/* Token-Set AUREXcall: hell, weich, ein Akzent (Petrol) */
:root{
  --bg:#f6f7f9; --flaeche:#fff; --flaeche-2:#eef1f4;
  --text:#14202b; --text-2:#475565; --linie:#dde3ea;
  --akzent:#0b6b66; --akzent-hover:#095652; --akzent-weich:#e3f1f0; --auf-akzent:#fff;
  --r-s:10px; --r-m:16px; --r-l:24px;
  --schatten-1:0 1px 2px rgba(20,32,43,.06),0 2px 8px rgba(20,32,43,.05);
  --schatten-2:0 4px 12px rgba(20,32,43,.07),0 16px 40px rgba(20,32,43,.08);
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4.5rem;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breite:68rem; --dauer:180ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.6 var(--font);overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--akzent)}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:var(--s2);top:-4rem;background:var(--flaeche);padding:.6rem 1rem;border-radius:var(--r-s);box-shadow:var(--schatten-2);z-index:20}
.skip:focus{top:var(--s1)}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--s2)}
@media(min-width:48rem){.wrap{padding:0 var(--s3)}}

/* Kopf: Material, kein harter Strich */
header.kopf{position:sticky;top:0;z-index:10;background:rgba(246,247,249,.8);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:0 1px 0 rgba(20,32,43,.05)}
.kopf .wrap{display:flex;align-items:center;gap:var(--s2);min-height:4rem;flex-wrap:wrap;padding-top:.4rem;padding-bottom:.4rem}
.marke{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--text);text-decoration:none;margin-right:auto;min-height:44px}
.marke svg{width:2rem;height:2rem}
.nav{display:none;gap:.25rem}
.nav a{color:var(--text-2);text-decoration:none;padding:.6rem .75rem;border-radius:var(--r-s);min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--text);background:var(--flaeche-2)}
.sprache{color:var(--text-2);font-size:.9rem;white-space:nowrap}
.sprache a{color:var(--text-2);text-decoration:none;padding:.6rem .3rem;min-height:44px;display:inline-flex;align-items:center}
.sprache a[aria-current]{color:var(--text);font-weight:600}
@media(min-width:62rem){.nav{display:flex}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.4rem;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:background var(--dauer),transform var(--dauer),box-shadow var(--dauer);touch-action:manipulation}
.btn-primaer{background:var(--akzent);color:var(--auf-akzent);box-shadow:var(--schatten-1)}
.btn-primaer:hover{background:var(--akzent-hover);box-shadow:var(--schatten-2)}
.btn-ruhig{background:var(--flaeche);color:var(--text);border-color:var(--linie)}
.btn-ruhig:hover{background:var(--flaeche-2)}
.btn:active{transform:scale(.97)}

/* Abschnitte */
section{padding:var(--s5) 0}
section.hell{background:var(--flaeche)}
h1,h2,h3{line-height:1.12;margin:0 0 var(--s2);color:var(--text)}
h1{font-size:clamp(2.1rem,7vw,3.9rem);letter-spacing:-.03em;font-weight:750;max-width:18ch}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem);letter-spacing:-.022em;font-weight:700;max-width:24ch}
h3{font-size:1.15rem;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 var(--s2);max-width:62ch}
.lead{font-size:clamp(1.05rem,2.5vw,1.25rem);color:var(--text-2);max-width:56ch}
.kopfzeile{margin-bottom:var(--s4)}

.hero{padding:var(--s5) 0 var(--s4)}
.hero .aktionen{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.hero-karte{margin-top:var(--s4)}

/* Karten, bewusst unterschiedlich gewichtet */
.raster{display:grid;gap:var(--s2);grid-template-columns:1fr}
@media(min-width:40rem){.raster.zwei{grid-template-columns:repeat(2,1fr)}}
@media(min-width:56rem){.raster.drei{grid-template-columns:repeat(3,1fr)}.raster.vier{grid-template-columns:repeat(4,1fr)}}
.karte{background:var(--flaeche);border-radius:var(--r-m);padding:var(--s3);box-shadow:var(--schatten-1)}
section.hell .karte{background:var(--bg);box-shadow:none}
.karte p:last-child{margin-bottom:0}
.karte p{color:var(--text-2)}
.icon{width:2.75rem;height:2.75rem;border-radius:var(--r-s);background:var(--akzent-weich);color:var(--akzent);display:grid;place-items:center;margin-bottom:var(--s2)}
.icon svg{width:1.4rem;height:1.4rem}

/* Ablauf: echte Reihenfolge */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);counter-reset:s}
@media(min-width:56rem){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritte li{counter-increment:s;background:var(--flaeche);border-radius:var(--r-m);padding:var(--s3);box-shadow:var(--schatten-1)}
.schritte li::before{content:counter(s);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--akzent);color:var(--auf-akzent);font-weight:700;margin-bottom:var(--s2)}
.schritte p{color:var(--text-2);margin:0}

/* Hörprobe */
.probe{background:var(--flaeche);border-radius:var(--r-l);padding:var(--s3);box-shadow:var(--schatten-2);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.probe .play{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--flaeche-2);color:var(--text-2);display:grid;place-items:center;flex:none}
.probe .play svg{width:1.4rem;height:1.4rem}
.platzhalter{display:inline-block;background:#fff4d6;color:#5c4400;border:1px dashed #b88a00;border-radius:var(--r-s);padding:.15rem .6rem;font-size:.9rem;font-weight:600}

/* Preise */
.preise{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
@media(min-width:48rem){.preise{grid-template-columns:repeat(2,1fr)}}
@media(min-width:70rem){.preise{grid-template-columns:repeat(4,1fr)}}
.preise li{background:var(--flaeche);border-radius:var(--r-m);padding:var(--s3);box-shadow:var(--schatten-1);display:flex;flex-direction:column;gap:.4rem}
.preise .takt{color:var(--akzent);font-weight:600;font-size:.95rem}
.preise .betrag{font-size:1.25rem;font-weight:700;color:var(--text-2)}
.preise p{margin:0;color:var(--text-2)}

/* Vertrauen */
.liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.liste li{display:flex;gap:.8rem;align-items:flex-start}
.liste svg{flex:none;width:1.5rem;height:1.5rem;color:var(--akzent);margin-top:.15rem}
.hinweis{margin-top:var(--s3);color:var(--text-2);font-size:.95rem}

/* FAQ */
details{background:var(--flaeche);border-radius:var(--r-m);box-shadow:var(--schatten-1);margin-bottom:.75rem;max-width:48rem}
summary{cursor:pointer;list-style:none;padding:1rem var(--s3);min-height:56px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);border-radius:var(--r-m)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--akzent);transition:transform var(--dauer)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 var(--s3) var(--s3);margin:0;color:var(--text-2)}

/* Abschluss */
.abschluss .box{background:var(--akzent);color:var(--auf-akzent);border-radius:var(--r-l);padding:var(--s4) var(--s3);box-shadow:var(--schatten-2)}
.abschluss h2,.abschluss p{color:var(--auf-akzent)}
.abschluss .btn{background:var(--flaeche);color:var(--akzent)}
.abschluss .btn:hover{background:var(--akzent-weich)}
.abschluss :focus-visible{outline-color:#fff}

footer.fuss{padding:var(--s4) 0;color:var(--text-2);font-size:.95rem}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.fuss a{color:var(--text-2);display:inline-flex;align-items:center;min-height:44px}
.fuss .rechts{margin-left:auto}

/* Rechtsseiten */
.recht{padding:var(--s4) 0 var(--s5)}
.recht h2{font-size:1.4rem;margin-top:var(--s4)}
.recht .platzhalter{margin:0 0 var(--s2)}

@media(prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead,.hero .aktionen{animation:rein 520ms cubic-bezier(.2,.7,.2,1) both}
  .hero .lead{animation-delay:70ms}.hero .aktionen{animation-delay:140ms}
}
@keyframes rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}
@media(prefers-reduced-transparency:reduce){header.kopf{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){.karte,.schritte li,.preise li,details{border:1px solid var(--text-2)}}