/*
Theme Name: IW Terminal
Theme URI: https://internetwetten.de
Description: Custom dark "odds-desk" theme for internetwetten.de — Sportwetten-Vergleich DE/AT. Slate-coral palette, Bricolage Grotesque + Albert Sans (self-hosted), tabular figures. Built from SuperDesign Variant B. No marketplace base.
Author: internetwetten.de Redaktion
Version: 0.1.0
Text Domain: iw-terminal
*/

/* ---------- self-hosted fonts ---------- */
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/albert-400.woff2') format('woff2');}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/albert-500.woff2') format('woff2');}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/albert-600.woff2') format('woff2');}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/albert-700.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/bricolage-700.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/bricolage-800.woff2') format('woff2');}

/* ---------- design tokens ---------- */
:root{
	--base:#222B3D; --panel:#1B2433; --panel-2:#161D29;
	--bone:#F5F5F0; --muted:#9AA3B2; --muted-dim:#5B6473;
	--coral:#FF6B57; --coral-hi:#FF8A7A; --coral-ink:#160a07;
	--hair:rgba(255,255,255,.10); --hair-soft:rgba(255,255,255,.05);
	--wrap:1280px;
	--font:'Albert Sans',system-ui,sans-serif;
	--display:'Bricolage Grotesque',var(--font);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--base);color:var(--bone);font-family:var(--font);font-variant-numeric:tabular-nums;line-height:1.6;font-size:16px;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}
.font-display{font-family:var(--display);}
.tnum{font-variant-numeric:tabular-nums;}

/* ---------- skip + a11y ---------- */
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:12px;top:12px;background:var(--coral);color:var(--coral-ink);padding:8px 12px;z-index:200;}

/* ---------- header ---------- */
.site-header{background:var(--panel);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:50;}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand svg{display:block;height:26px;width:auto;}
.brand .wm{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;}
.brand .wm .tld{color:var(--coral);}
.primary-nav{display:flex;gap:22px;}
.primary-nav a{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--bone);transition:color .15s;}
.primary-nav a:hover,.primary-nav a:focus{color:var(--coral);}
.primary-nav .idx{color:var(--muted-dim);margin-right:4px;}
.hdr-right{display:flex;align-items:center;gap:14px;}
.region{display:flex;border:1px solid var(--hair);font-size:11px;font-weight:700;letter-spacing:.06em;}
.region a{padding:3px 8px;color:var(--muted);}
.region a[aria-current="true"]{background:var(--coral);color:var(--coral-ink);}
.badge18{font-size:12px;font-weight:700;border:1px solid var(--coral);color:var(--coral);padding:2px 6px;}
.nav-toggle{display:none;}

/* ---------- masthead ---------- */
.masthead{background:var(--panel);border-bottom:1px solid var(--hair);padding:40px 0;}
.masthead-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.masthead h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.1rem);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 6px;}
.masthead .sub{color:var(--muted);font-weight:500;margin:0;}
.masthead .meta{text-align:right;}
.masthead .stamp{font-size:11px;color:var(--muted-dim);text-transform:uppercase;letter-spacing:.05em;}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair);background:rgba(0,0,0,.25);padding:4px 8px;}
.live-dot i{width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 var(--coral);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,87,.6);}70%{box-shadow:0 0 0 6px rgba(255,107,87,0);}100%{box-shadow:0 0 0 0 rgba(255,107,87,0);}}

main{padding:36px 0 0;}
.section{margin-bottom:48px;}
.kicker{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-dim);margin:0 0 12px;}
.section h2{font-family:var(--display);font-weight:700;font-size:1.65rem;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 18px;}

/* ---------- ranking grid (the money table) ---------- */
.iw-table-wrap{background:var(--panel);border:1px solid var(--hair);overflow-x:auto;}
table.iw-grid{width:100%;border-collapse:collapse;text-align:left;min-width:860px;}
.iw-grid thead th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-dim);background:rgba(0,0,0,.22);padding:12px 14px;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair-soft);}
.iw-grid thead th:last-child{border-right:none;}
.iw-grid tbody td{padding:14px;border-top:1px solid var(--hair-soft);border-right:1px solid var(--hair-soft);vertical-align:middle;font-size:14px;}
.iw-grid tbody td:last-child{border-right:none;}
.iw-grid tbody tr:hover{background:rgba(255,255,255,.04);}
.c-rank{width:54px;text-align:center;}
.rank-num{font-family:var(--font);font-size:12px;color:var(--muted-dim);}
.c-name{font-weight:700;}
.op-logo{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:10px;background:var(--panel-2);border:1px solid var(--hair);font-family:var(--display);font-size:11px;font-weight:700;vertical-align:middle;}
.op-logo-img{display:inline-block;width:104px;height:42px;object-fit:contain;background:#fff;border-radius:5px;padding:5px 9px;margin-right:12px;vertical-align:middle;}
.c-name{font-weight:700;}
.c-name .op-name{vertical-align:middle;}
.c-rate{white-space:nowrap;}
.rate-val{color:var(--coral);font-weight:700;font-size:15px;}
.rate-max{color:var(--muted-dim);font-size:11px;}
.c-bonus{color:var(--bone);font-size:13px;}
.c-lic{font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap;}
.lic-dot{display:inline-block;width:7px;height:7px;background:var(--coral);margin-right:6px;vertical-align:middle;}
.c-feat{color:var(--muted);font-size:12px;}
.c-cta{width:150px;text-align:right;}
.iw-btn,.entry a.iw-btn{display:inline-block;background:var(--coral);color:var(--coral-ink);padding:9px 16px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;transition:background .15s;white-space:nowrap;}
.iw-btn:hover,.iw-btn:focus,.entry a.iw-btn:hover{background:var(--coral-hi);color:var(--coral-ink);text-decoration:none;}

/* ---------- metric strip (methodology) ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);}
.metric{background:var(--panel);padding:22px;}
.metric .lbl{font-size:10px;color:var(--muted-dim);font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;}
.metric .val{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px;}
.metric .val svg{width:20px;height:20px;stroke:var(--coral);}
.metric p{font-size:12px;color:var(--muted);margin:0;line-height:1.5;}

/* ---------- two-up panels (rechner / ratgeber) ---------- */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.panel{background:var(--panel);border:1px solid var(--hair);padding:28px;position:relative;}
.panel h2{margin-top:0;}
.panel .accent{color:var(--coral);}
.panel p{color:var(--muted);font-size:14px;}
.linklist{display:grid;gap:8px;}
.linklist a{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--hair);background:rgba(0,0,0,.12);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:border-color .15s;}
.linklist a:hover{border-color:var(--coral);}
.linklist a .arr{color:var(--muted-dim);}
.linklist a:hover .arr{color:var(--coral);}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--hair);background:var(--panel);margin-bottom:8px;}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary h3{display:inline;margin:0;font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:normal;text-transform:none;color:inherit;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--coral);font-family:var(--display);font-size:18px;}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 16px 16px;color:var(--muted);font-size:14px;}

/* ---------- responsible gambling block ---------- */
.rg{background:var(--panel);border:1px solid var(--hair);padding:32px;text-align:center;}
.rg-marks{display:flex;gap:38px;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:22px;}
.rg-18{border:2px solid var(--coral);color:var(--coral);font-family:var(--display);font-weight:700;font-size:1.4rem;padding:6px 12px;}
.rg-mark{display:flex;flex-direction:column;align-items:center;}
.rg-mark .t{font-size:10px;color:var(--muted-dim);text-transform:uppercase;font-weight:700;letter-spacing:.05em;}
.rg-mark .v{font-family:var(--display);font-size:1.1rem;}
.rg p{font-size:12px;color:var(--muted);max-width:640px;margin:0 auto;line-height:1.7;}
.rg a{color:var(--coral);}

/* ---------- Wettsteuer-Rechner ---------- */
.iw-calc{background:var(--panel);border:1px solid var(--hair);}
.calc-inputs{display:flex;gap:18px;flex-wrap:wrap;padding:22px;border-bottom:1px solid var(--hair);background:rgba(0,0,0,.18);}
.calc-inputs label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-dim);}
.calc-inputs input{background:var(--panel-2);border:1px solid var(--hair);color:var(--bone);font-family:var(--font);font-size:18px;font-variant-numeric:tabular-nums;padding:10px 12px;width:160px;}
.calc-inputs input:focus{outline:2px solid var(--coral);outline-offset:0;}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);}
.calc-col{background:var(--panel);padding:22px;}
.calc-mkt{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:14px;display:flex;flex-direction:column;}
.calc-mkt span{font-family:var(--font);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--coral);margin-top:3px;}
.calc-col dl{margin:0;}
.calc-col dt{font-size:11px;color:var(--muted-dim);text-transform:uppercase;letter-spacing:.06em;margin-top:12px;}
.calc-col dd{margin:2px 0 0;font-size:16px;font-variant-numeric:tabular-nums;}
.calc-net{color:var(--coral);font-weight:700;font-size:20px;}
.calc-note{padding:16px 22px;font-size:11px;color:var(--muted-dim);line-height:1.6;margin:0;border-top:1px solid var(--hair);}
@media(max-width:680px){.calc-out{grid-template-columns:1fr;}}

/* ---------- entry / prose content ---------- */
/* full width so ranking tables/grids breathe; prose kept readable via child max-width */
.entry{max-width:none;}
.entry > p,.entry > h2,.entry > h3,.entry > ul,.entry > ol,.entry > .lede,.entry > .byline{max-width:820px;margin-left:auto;margin-right:auto;}
.faq{max-width:820px;margin-left:auto;margin-right:auto;}
.entry p,.entry li{color:#cfd5de;font-size:16px;}
.entry h2,.entry h3{font-family:var(--display);color:var(--bone);margin-top:1.8em;}
.entry h2{font-size:1.5rem;}.entry h3{font-size:1.2rem;}
.entry a{color:var(--coral);text-decoration:underline;text-underline-offset:2px;}
.entry ul{padding-left:1.1em;}
.entry .iw-table-wrap,.entry .iw-calc{margin:1.5em 0;}
.lede{font-size:18px;color:var(--muted);}

/* ---------- footer ---------- */
.site-footer{background:var(--panel);border-top:1px solid var(--hair);padding:44px 0 28px;color:var(--muted);margin-top:24px;}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:32px;}
.foot-brand .wm{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--bone);}
.foot-brand .wm .tld{color:var(--coral);}
.foot-brand p{max-width:320px;font-size:12px;color:var(--muted);}
.foot-cols{display:flex;gap:56px;}
.foot-cols h4{color:var(--bone);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px;}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.foot-cols a{font-size:12px;text-transform:uppercase;letter-spacing:.05em;}
.foot-cols a:hover{color:var(--coral);}
.foot-legal{border-top:1px solid var(--hair);padding-top:18px;font-size:11px;color:var(--muted-dim);line-height:1.7;}

/* ---------- responsive ---------- */
@media(max-width:900px){
	.metrics{grid-template-columns:repeat(2,1fr);}
	.two-up{grid-template-columns:1fr;}
}
@media(max-width:760px){
	.primary-nav{display:none;}
	.masthead-inner{flex-direction:column;align-items:flex-start;}
	.masthead .meta{text-align:left;}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-dim);margin-bottom:10px;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--coral);}
.crumbs span{color:var(--muted-dim);margin:0 2px;}

/* ---------- review pros/cons ---------- */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.2em 0;}
.proscons>div{background:var(--panel);border:1px solid var(--hair);padding:18px;}
.proscons h3{margin:0 0 10px;font-size:.95rem;}
.proscons .pros h3{color:var(--coral);}
.proscons ul{margin:0;padding-left:1.1em;}
.proscons li{font-size:14px;margin-bottom:4px;}
@media(max-width:680px){.proscons{grid-template-columns:1fr;}}

/* ---------- operator name link in ranking ---------- */
.op-link{display:inline-flex;align-items:center;}
.op-link .op-name{transition:color .15s;}
.op-link:hover .op-name{color:var(--coral);}

/* ---------- author / redaktion ---------- */
.authors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:1.4em 0;}
.author{background:var(--panel);border:1px solid var(--hair);padding:20px;text-align:center;}
.author img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:2px solid var(--hair);}
.author .name{font-family:var(--display);font-weight:700;font-size:1.05rem;}
.author .role{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--coral);margin:4px 0 10px;}
.author p{font-size:13px;color:var(--muted);margin:0;}
.byline{font-size:12px;color:var(--muted-dim);margin-top:8px;display:flex;align-items:center;gap:8px;}
.byline img{width:28px;height:28px;border-radius:50%;object-fit:cover;}
.byline a{color:var(--muted);}
@media(max-width:680px){.authors{grid-template-columns:1fr;}}

/* ---------- ranking table: mobile = stacked cards ---------- */
@media(max-width:760px){
  .iw-table-wrap{overflow:visible;border:none;background:none;}
  table.iw-grid{min-width:0;width:100%;display:block;}
  .iw-grid thead{position:absolute;left:-9999px;}
  .iw-grid tbody{display:block;}
  .iw-grid tbody tr{display:block;background:var(--panel);border:1px solid var(--hair);margin-bottom:12px;padding:16px 16px 14px;position:relative;}
  .iw-grid tbody tr:hover{background:var(--panel);}
  .iw-grid tbody td{display:block;border:none!important;padding:6px 0;font-size:14px;}
  .iw-grid td.c-rank{position:absolute;top:14px;right:14px;width:auto;text-align:right;padding:0;}
  .iw-grid td.c-rank .rank-num{font-size:11px;}
  .iw-grid td.c-rank .rank-num::before{content:"PLATZ ";color:var(--muted-dim);}
  .iw-grid td.c-name{padding:0 60px 10px 0;border-bottom:1px solid var(--hair-soft)!important;margin-bottom:6px;}
  .iw-grid td.c-name .op-logo-img{width:120px;height:44px;}
  .iw-grid td.c-name .op-name{display:block;margin-top:6px;font-size:15px;}
  .iw-grid td.c-rate{display:inline-block;}
  .iw-grid td.c-bonus,.iw-grid td.c-lic,.iw-grid td.c-feat,.iw-grid td.c-rate{padding:5px 0;}
  .iw-grid td.c-bonus::before,.iw-grid td.c-lic::before,.iw-grid td.c-feat::before,.iw-grid td.c-rate::before{content:attr(data-label);display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-dim);margin-bottom:2px;}
  .iw-grid td.c-cta{width:100%;text-align:center;margin-top:12px;}
  .iw-grid td.c-cta .iw-btn{display:block;width:100%;padding:13px;}
}