/* ===========================================================================
   vergleich.css — Marketing-Unterseiten (Vergleiche, Preisrechner, Branchen)

   ENTWURF (WS3, 16.09.2026) — nicht aus der Navigation verlinkt, Freigabe
   durch den Inhaber ausstehend.

   Baut ausschliesslich auf static/tokens.css auf (keine eigenen Farbwerte —
   test_design_system.py verbietet neuen Seiten ein eigenes Token-System).
   Klassennamen und Aufbau folgen static/home.html, damit Kopf- und Fusszeile
   dort und hier gleich aussehen.
=========================================================================== */
:root{
  --maxw:1120px;
  --f:"Helvetica Neue",Helvetica,Arial,"Inter",system-ui,sans-serif;
  --ground:var(--surface);
  --navy:var(--text);
}
*{box-sizing:border-box;} html,body{margin:0;}
html{scroll-behavior:smooth;}
body{background:var(--ground);color:var(--ink);font-family:var(--f);line-height:1.55;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
h1,h2,h3{letter-spacing:-.028em;line-height:1.05;margin:0;font-weight:800;text-wrap:balance;}
a{color:inherit;text-decoration:none;}
p{margin:0;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:15.5px;padding:13px 22px;border-radius:11px;transition:transform .15s,background .15s;border:none;cursor:pointer;font-family:inherit;}
.btn:hover{background:var(--accent-deep);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

/* Kopfzeile (wie home.html) */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--ground) 82%, transparent);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;}
.bar-nav{display:flex;gap:28px;margin:0 auto;}
.bar-nav a{color:var(--muted);font-weight:600;font-size:15px;}
.bar-nav a:hover,.bar-nav a[aria-current="page"]{color:var(--accent);}
@media (max-width:920px){.bar-nav{display:none;}}
@media (max-width:560px){
  .bar{padding:11px 14px;gap:10px;}
  .bar .btn.ghost{display:none;}
  .bar .btn{padding:10px 15px;font-size:14px;}
  .brand b{font-size:17px;} .brand img{width:30px;height:30px;}
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:34px;height:34px;border-radius:9px;}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.03em;}
.brand b span{color:var(--accent);}
.bar-right{display:flex;align-items:center;gap:8px;}
.bar .btn{padding:9px 16px;font-size:14px;}

/* Kopfbereich der Seite */
.hero{padding:64px 0 30px;}
.hero h1{font-size:clamp(30px,5.2vw,56px);margin-top:16px;}
.hero .lede{font-size:clamp(17px,2.1vw,20px);color:var(--muted);max-width:62ch;margin:20px 0 0;}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px;}
.stand{margin-top:22px;font-size:13px;color:var(--muted);}

section{padding:48px 0;border-top:1px solid var(--line);}
section[id]{scroll-margin-top:74px;}
.sec-head{max-width:64ch;margin-bottom:26px;}
.sec-head h2{font-size:clamp(24px,3.4vw,36px);margin-top:12px;}
.sec-head p{color:var(--muted);font-size:16.5px;margin:14px 0 0;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
.grid.two{grid-template-columns:1fr 1fr;}
@media (max-width:820px){.grid,.grid.two{grid-template-columns:1fr;}}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:15px;padding:22px;}
.card .ico{font-size:23px;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--ground);border:1px solid var(--line);margin-bottom:14px;}
.card h3{font-size:17px;margin:0 0 7px;}
.card p{margin:0;color:var(--muted);font-size:14.5px;}
.card ul{margin:10px 0 0;padding-left:18px;color:var(--ink);font-size:14.5px;display:flex;flex-direction:column;gap:7px;}
.card.accent{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}

/* Vergleichstabelle */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:15px;background:var(--panel2);}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
table.cmp thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--ground);}
table.cmp thead th.us{color:var(--accent);}
table.cmp tbody th{font-weight:700;width:22%;color:var(--ink);}
table.cmp td.us{background:var(--accent-soft);}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none;}
table.cmp small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px;}
table.cmp .na{color:var(--muted);font-style:italic;}
@media (max-width:720px){
  .cmp-wrap{border:none;background:transparent;overflow:visible;}
  table.cmp thead{display:none;}
  table.cmp,table.cmp tbody,table.cmp tr,table.cmp th,table.cmp td{display:block;width:100%;}
  table.cmp tr{border:1px solid var(--line);border-radius:14px;background:var(--panel2);margin-bottom:12px;overflow:hidden;}
  table.cmp tbody th{width:auto;background:var(--ground);border-bottom:1px solid var(--line);}
  table.cmp td{border-bottom:1px solid var(--line);}
  table.cmp td::before{content:attr(data-l);display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
  table.cmp td.us::before{color:var(--accent);}
  table.cmp tbody tr:last-child td{border-bottom:1px solid var(--line);}
  table.cmp tr td:last-child{border-bottom:none;}
}

.note{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--accent-soft);padding:14px 18px;font-size:14px;color:var(--ink);margin-top:18px;}
.note b{color:var(--ink);}
.sources{font-size:13.5px;color:var(--muted);}
.sources ol{padding-left:20px;margin:10px 0 0;display:flex;flex-direction:column;gap:6px;}
.sources a{color:var(--accent);word-break:break-all;}

.band{margin:56px auto 0;}
.box{background:var(--navy);color:var(--ground);border-radius:22px;padding:clamp(32px,5vw,56px);text-align:center;}
.box .eyebrow{color:var(--accent);}
.box h2{font-size:clamp(25px,3.6vw,40px);color:var(--ground);margin-top:12px;}
.box p{color:var(--ground);opacity:.78;font-size:16.5px;margin:14px auto 0;max-width:52ch;}
.box .btn{margin-top:24px;font-size:16px;padding:15px 28px;}

.disclaimer{margin-top:28px;font-size:12.5px;color:var(--muted);}

/* Fusszeile (wie home.html) */
footer{padding:44px 0 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);margin-top:52px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:26px;}
.foot-col{display:flex;flex-direction:column;gap:9px;}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin:0 0 3px;font-weight:700;}
.foot-col a{color:var(--muted);font-weight:500;font-size:14px;}
.foot-col a:hover{color:var(--accent);}
.foot-brand{font-size:18px;font-weight:800;}
.foot-brand-col p{margin:8px 0 0;color:var(--muted);font-size:13.5px;max-width:34ch;}
.foot-bottom{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:22px 20px;} .foot-brand-col{grid-column:1 / -1;}}
/* Sechs Spalten, sobald die Gruppe "Branchen" dazukommt (Vergleichs- und Branchenseiten) */
.foot-grid.six{grid-template-columns:1.4fr repeat(5,1fr);}
@media(max-width:820px){.foot-grid.six{grid-template-columns:1fr 1fr;}}

/* Branchenseiten: Sprachumschalter (wie home.html) und Karten mit zwei Absaetzen */
.langs{display:flex;gap:2px;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
.langs button{background:transparent;border:none;color:var(--muted);font-family:inherit;font-weight:700;font-size:12.5px;padding:7px 10px;cursor:pointer;}
.langs button.on{background:var(--accent);color:var(--on-accent);}
/* Schmal: Sprachwahl bleibt, die Demo-Schaltfläche weicht (Kontakt steht im Hero und am Seitenende). */
@media (max-width:560px){.langs button{padding:6px 7px;font-size:12px;} .bar .langs ~ .btn{display:none;}}
.card p + p{margin-top:10px;color:var(--ink);}
.card .ico.num{font-size:17px;font-weight:800;color:var(--accent);}
.note ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;}
.note a{color:var(--accent);font-weight:700;}

/* Preisrechner */
.calc{display:grid;grid-template-columns:1fr 1.2fr;gap:22px;align-items:start;}
@media (max-width:820px){.calc{grid-template-columns:1fr;}}
.calc-in{background:var(--panel2);border:1px solid var(--line);border-radius:15px;padding:22px;display:flex;flex-direction:column;gap:20px;}
.field label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px;}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px;}
.field .row{display:flex;gap:12px;align-items:center;}
.field input[type=range]{flex:1;accent-color:var(--accent);min-height:44px;}
.field input[type=number]{width:96px;background:var(--input-bg);border:1px solid var(--input-border);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:15px;font-family:inherit;min-height:44px;}
.field input[type=number]:focus{outline:none;border-color:var(--accent);}
.calc-out{display:flex;flex-direction:column;gap:14px;}
.result{background:var(--panel2);border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent);border-radius:15px;padding:22px;}
.result .plan{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.result .big{font-size:clamp(34px,5vw,46px);font-weight:800;letter-spacing:-.02em;margin:6px 0 0;}
.result .big small{font-size:15px;font-weight:600;color:var(--muted);}
.result .why{color:var(--muted);font-size:14px;margin-top:8px;}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:560px){.kpis{grid-template-columns:1fr;}}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:14px 16px;}
.kpi .k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.kpi .v{font-size:22px;font-weight:800;margin-top:4px;}
.kpi .v.pos{color:var(--ok);} .kpi .v.neg{color:var(--warn);}
.bars{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:16px;display:flex;flex-direction:column;gap:12px;}
.bar-row{display:grid;grid-template-columns:150px 1fr 90px;gap:10px;align-items:center;font-size:14px;}
@media (max-width:560px){.bar-row{grid-template-columns:1fr;gap:4px;}}
.bar-track{height:14px;background:var(--surface-3);border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;background:var(--accent);transition:width .25s;}
.bar-fill.bench{background:var(--text-disabled);}
.bar-row b{text-align:right;}
@media (max-width:560px){.bar-row b{text-align:left;}}
.verdict{font-size:15px;line-height:1.55;}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:13px;background:var(--panel2);}
table.mini{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;}
table.mini th,table.mini td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);}
table.mini thead th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
table.mini tbody tr:last-child td{border-bottom:none;}
table.mini td.num,table.mini th.num{text-align:right;font-variant-numeric:tabular-nums;}
table.mini tr.on td{background:var(--accent-soft);font-weight:700;}
table.mini .dim{color:var(--muted);}

@media (prefers-reduced-motion:reduce){.btn,.bar-fill{transition:none;}}

/* Anbietervergleiche aus vergleich_daten.py (Batch 23): Gruppenzeilen, Sprachwahl als Links, Quellen */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
table.cmp tr.grp th{background:var(--ground);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:12px 16px;}
table.cmp small a{color:var(--accent);font-weight:700;margin-right:4px;}
.langs a{color:var(--muted);font-weight:700;font-size:12.5px;padding:7px 10px;display:inline-block;}
.langs a.on{background:var(--accent);color:var(--on-accent);}
.sources li{line-height:1.5;}
.sources .q-meta{color:var(--muted);}
.sources .q-us{margin-top:14px;}
.sources .q-us a{color:var(--accent);font-weight:700;}
.hero .stand{max-width:80ch;}
@media (max-width:720px){
  table.cmp tr.grp{border:none;background:transparent;margin:18px 0 8px;}
  table.cmp tr.grp th{background:transparent;padding:0;border:none;}
}
@media (max-width:560px){.langs a{padding:6px 7px;font-size:12px;}}
/* Paketrechner (Batch 23) */
.kpis.two{grid-template-columns:1fr 1fr;margin-top:14px;}
@media (max-width:560px){.kpis.two{grid-template-columns:1fr;}}
select.sel{width:100%;background:var(--input-bg);border:1px solid var(--input-border);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:15px;font-family:inherit;min-height:44px;}
select.sel:focus{outline:none;border-color:var(--accent);}
.result .why + .why{margin-top:4px;}