:root{--marine:#0c2038;--marine-7:#1a4a78;--tuerkis:#26cdd0;--tuerkis-t:#0eaeb4;--grund:#eaf4fb;--linie:#c9dded;--sanft:#3d5872;--gelb:#f9a825;--gelbf:#fdeed2}
  *{box-sizing:border-box}
  body{margin:0;background:#fff;color:var(--marine);font:400 17px/1.65 -apple-system,"Segoe UI",system-ui,sans-serif}
  h1,h2,h3{font-family:Futura,"Avenir Next","Century Gothic","Trebuchet MS",sans-serif;line-height:1.15;text-wrap:balance}
  .w{max-width:68rem;margin:0 auto;padding:0 1.25rem}
  a{color:var(--tuerkis-t)}
  header{position:sticky;top:0;z-index:40;background:#fffd;backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
  .kopf{display:flex;align-items:center;gap:1.2rem;height:64px}
  .logo{display:flex;align-items:center;gap:.55rem;font-family:Futura,"Avenir Next",sans-serif;font-weight:700;font-size:1.25rem;color:var(--marine);text-decoration:none}
  .logo svg{width:30px;height:30px}
  nav{display:none;gap:1.4rem;margin-left:auto}
  nav a{color:var(--sanft);text-decoration:none;font-weight:600;font-size:.95rem}
  nav a:hover{color:var(--marine)}
  .cta{margin-left:auto;background:var(--tuerkis);color:var(--marine);font-weight:700;text-decoration:none;padding:.6rem 1.1rem;border-radius:12px;white-space:nowrap;font-size:.95rem}
  @media(min-width:820px){nav{display:flex}.cta{margin-left:0}}
  .hero{background:linear-gradient(180deg,var(--grund),#fff);padding:4rem 0 3.5rem}
  .eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;font-weight:700;color:var(--tuerkis-t)}
  h1{font-size:clamp(2rem,5.5vw,3.2rem);margin:.6rem 0 1rem;max-width:46rem}
  .sub{font-size:1.2rem;color:var(--sanft);max-width:38rem;margin:0 0 1.6rem}
  .knoepfe{display:flex;flex-wrap:wrap;gap:.8rem}
  .btn-p{background:var(--tuerkis);color:var(--marine);font-weight:700;text-decoration:none;padding:.95rem 1.5rem;border-radius:14px;font-size:1.05rem}
  .btn-s{background:#fff;color:var(--marine);font-weight:700;text-decoration:none;padding:.95rem 1.5rem;border-radius:14px;border:1px solid var(--linie);font-size:1.05rem}
  .trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.6rem;padding:0;list-style:none;color:var(--sanft);font-size:.92rem;font-weight:600}
  .trust li::before{content:"✓ ";color:var(--tuerkis-t);font-weight:800}
  section{padding:3.4rem 0}
  .hell{background:var(--grund)}
  h2{font-size:clamp(1.5rem,3.5vw,2.1rem);margin:0 0 .6rem}
  .lead{color:var(--sanft);max-width:44rem;margin:0 0 1.8rem}
  .raster{display:grid;gap:1rem;grid-template-columns:1fr}
  @media(min-width:700px){.raster{grid-template-columns:1fr 1fr}}
  @media(min-width:1000px){.raster.r3{grid-template-columns:1fr 1fr 1fr}}
  .karte{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:1.25rem 1.35rem}
  .karte h3{margin:.2rem 0 .45rem;font-size:1.08rem}
  .karte p{margin:0;color:var(--sanft);font-size:.95rem}
  .zahl{font-family:Futura,"Avenir Next",sans-serif;font-weight:800;font-size:2rem;color:var(--tuerkis-t)}
  .beweis{background:var(--marine);color:#dbe9f5;border-radius:20px;padding:2rem 1.5rem;display:grid;gap:1.4rem}
  @media(min-width:800px){.beweis{grid-template-columns:1fr 1fr 1fr;padding:2.4rem 2.2rem}}
  .beweis .zahl{color:var(--tuerkis)}
  .beweis p{margin:.2rem 0 0;font-size:.95rem}
  table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:520px}
  .t-rahmen{overflow-x:auto;border:1px solid var(--linie);border-radius:16px;background:#fff}
  th,td{text-align:left;padding:.7rem .9rem;vertical-align:top}
  thead th{border-bottom:1px solid var(--linie);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sanft)}
  tbody tr+tr td{border-top:1px solid #e4eef7}
  td.gut{color:var(--tuerkis-t);font-weight:700}
  td.schlecht{color:#b45309}
  .preis-k{border:1px solid var(--linie);border-radius:16px;background:#fff;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
  .preis-k.top{border:2px solid var(--gelb);position:relative}
  .preis-k .tag{position:absolute;top:-.8rem;left:1rem;background:var(--gelbf);color:#b45f04;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px}
  .preis-k .p{font-family:Futura,"Avenir Next",sans-serif;font-weight:800;font-size:1.5rem}
  .preis-k small{color:var(--sanft)}
  details{border:1px solid var(--linie);border-radius:14px;background:#fff;padding:.9rem 1.1rem;margin:.6rem 0}
  summary{font-weight:700;cursor:pointer}
  details p{color:var(--sanft);margin:.6rem 0 0}
  .schluss{background:var(--marine);color:#fff;text-align:center;padding:4rem 0}
  .schluss h2{color:#fff}
  .schluss .lead{color:#9db4c9;margin-inline:auto}
  footer{background:#0a1a2c;color:#9db4c9;padding:2rem 0;font-size:.88rem}
  footer a{color:#9db4c9}
  .fusszeile{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center}

/* ── Ergänzungen für Demo-Bühne, Vergleich und Unterseiten ── */
.buehne{background:linear-gradient(160deg,#0c2038,#123049);border-radius:24px;padding:2rem 1.5rem;color:#dbe9f5}
@media(min-width:820px){.buehne{padding:2.8rem 2.4rem}}
.buehne h2{color:#fff;margin-bottom:.5rem}
.buehne .lead{color:#9db4c9}
.buehne .zahl{color:var(--tuerkis)}
.fenster{background:#0a1a2c;border:1px solid #24405c;border-radius:14px;overflow:hidden;margin-top:1.4rem}
.fenster .leiste{display:flex;gap:.4rem;align-items:center;padding:.6rem .9rem;background:#112536;border-bottom:1px solid #24405c}
.fenster .leiste i{width:10px;height:10px;border-radius:50%;background:#31506f;display:block}
.fenster .adresse{margin-left:.6rem;font-size:.78rem;color:#9db4c9;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fenster .inhalt{padding:1.1rem;display:grid;gap:.6rem}
.zeile{display:flex;gap:.7rem;align-items:center;font-size:.9rem;color:#c7d9ea}
.zeile b{color:#fff;font-weight:650}
.punkt{width:8px;height:8px;border-radius:50%;background:var(--tuerkis);flex:none}
.punkt.warn{background:var(--gelb)}
.zugang{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1.2rem;padding:.85rem 1rem;background:#ffffff12;border:1px solid #ffffff1f;border-radius:12px;font-size:.88rem}
.zugang code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tuerkis)}
.gegen{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:860px){.gegen{grid-template-columns:1fr 1fr}}
.gegen .spalte{border:1px solid var(--linie);border-radius:16px;padding:1.2rem 1.35rem;background:#fff}
.gegen .spalte.wir{border:2px solid var(--tuerkis);background:linear-gradient(180deg,#f2fdfd,#fff)}
.gegen h3{margin:.1rem 0 .7rem;font-size:1.1rem}
.gegen ul{margin:0;padding-left:1.15rem}
.gegen li{margin:.4rem 0;font-size:.95rem;color:var(--sanft)}
.gegen .spalte.wir li{color:var(--marine)}
.gegen li::marker{color:var(--tuerkis-t)}
.gegen .spalte:not(.wir) li::marker{color:#c0392b}
.mini{font-size:.85rem;color:var(--sanft)}
.pfad{font-size:.82rem;color:var(--sanft);padding:1rem 0 0}
.pfad a{color:var(--sanft)}

/* Kopfzeile auf schmalen Geräten: Der CTA-Knopf lief rechts aus dem Bild.
   Logo darf schrumpfen, Knopf wird kompakter und bricht nie um. */
@media(max-width:520px){
  .kopf{gap:.6rem;height:58px}
  .logo img{height:32px !important}
  .cta{font-size:.82rem;padding:.5rem .7rem;border-radius:10px}
}
@media(max-width:380px){
  .cta{font-size:.78rem;padding:.45rem .6rem}
}
.nur-breit{display:none}
@media(min-width:560px){.nur-breit{display:inline}}
.zeile{align-items:flex-start;line-height:1.5}
.zeile .punkt{margin-top:.42rem}