:root{
  --ink:#0b0c0d;
  --ink-2:#111315;
  --ink-3:#171a1c;
  --line:#242729;        /* dekorative Trennlinien */
  --line-ui:#666a6e;     /* Raender interaktiver Elemente, WCAG 1.4.11 braucht 3:1 */
  --paper:#f2f3f0;
  --muted:#8d9297;
  --muted-2:#5f6469;
  /* Zwei Gruentoene, nicht aus Willkuer.
     Beide sollen wie DIE Markenfarbe aussehen, aber grosse Flaechen und
     duenne Elemente werden vom Bildschirm unterschiedlich dargestellt.
     Eine 2px-Linie oder 12px-Versalien werden mit dem fast schwarzen
     Hintergrund verrechnet, wirken dadurch heller und blasser, und ein
     Gelbgruen kippt genau dann sichtbar Richtung Gold.
     --lime-fein ist deshalb neun Grad gruener und minimal dunkler.
     Nebeneinander gehalten wirken beide gleich, das ist der Zweck.
     Wer sie angleicht, bekommt den Goldstich zurueck. */
  --lime:#9eb538;      /* grosse Flaechen: Knoepfe, gefuellte Balken */
  --lime-fein:#85af32;
  --lime-ink:#0a0a0a;
  --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shell:1180px;
  --pad:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Sanft scrollen bei Ankersprüngen, also beim Logo im Fussbereich und bei
   den Navigationslinks auf Ablauf und Preise. Nur wenn der Nutzer keine
   reduzierte Bewegung eingestellt hat: fuer Menschen mit Vestibularstoerungen
   loest gleitendes Scrollen Schwindel aus, WCAG 2.3.3. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{background:var(--ink);color:var(--paper);font-family:var(--font-text);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:2px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--lime);color:var(--lime-ink);padding:12px 18px;border-radius:8px;font-weight:700}

h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.022em;line-height:1.08}
h2{font-size:clamp(1.75rem,3.6vw,2.55rem)}
h3{font-size:1.12rem;letter-spacing:-.012em;line-height:1.3}
p{max-width:64ch}
.lead{font-size:1.1rem;color:#c3c7c2}
.dim{color:var(--muted)}
.kicker{font-size:.79rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lime-fein);margin-bottom:14px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:14px 26px;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:1rem;text-decoration:none;border:1px solid transparent;transition:background-color .18s,border-color .18s,color .18s;cursor:pointer}
.btn-primary{background:var(--lime);color:var(--lime-ink)}
.btn-primary:hover{background:#b5cb56}
.btn-ghost{border-color:var(--line-ui);color:var(--paper);background:transparent}
.btn-ghost:hover{border-color:var(--paper)}
.btn svg{width:17px;height:17px;flex:none}

/* ---------- Header ---------- */
.masthead{position:absolute;top:0;left:0;right:0;z-index:50}
.masthead .bar{display:flex;align-items:center;gap:28px;height:78px}
.masthead img{height:38px;width:auto}
.mainnav{display:flex;gap:26px;margin-left:auto;font-size:.94rem}
.mainnav a{color:#cfd2ce;text-decoration:none;padding:6px 0}
.mainnav a:hover{color:#fff}
.masthead .tel{font-family:var(--font-display);font-weight:700;font-size:1.02rem;text-decoration:none;white-space:nowrap}
@media(max-width:900px){.mainnav,.masthead .tel{display:none}}

/* ---------- Hero: Zahnkranz dreht sich auf ----------
   Ebene 1 Studiobild, faehrt aus dem Dunkeln nach vorn
   Ebene 2 Zahnkranz, dreht 360 Grad und oeffnet sich nach aussen
   Ebene 3 Badge und Text, bleiben bis zum Schluss lesbar             */
/* 150vh = 50vh Scrollweg fuer die gesamte Drehung. Vorher waren es 200vh,
   also eine volle Bildschirmhoehe Festhalten. Das fuehlte sich an, als
   haenge man fest. */
.hero-scroll{position:relative;height:150vh}
.hero-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.6vh,18px);
  padding:86px 0 62px}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(var(--bgz,1.2));transform-origin:50% 50%;opacity:var(--bgo,.3);will-change:transform,opacity}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.28) 42%,rgba(0,0,0,.82))}

/* Logo-Video. Schwarz ist im Encode auf echtes 0 gebrannt, screen-Blend
   loescht es damit weg.
   WICHTIG: .hero-mark darf KEIN z-index bekommen. Mit z-index entstuende ein
   eigener Stacking Context, und mix-blend-mode mischt dann nur noch gegen den
   leeren Inhalt dieses Contexts statt gegen das Studiobild. Genau daher kam
   der schwarze Kasten. Die Stapelreihenfolge regelt hier die DOM-Reihenfolge:
   .hero-bg steht davor, .hero-mark danach, also liegt das Video oben. */
.hero-mark{position:relative;flex:0 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* translateZ und backface-visibility halten das Video auf einer eigenen
   GPU-Ebene. Ohne das flackert der screen-Blend bei jedem Seek, weil der
   Compositor die Ebene neu aufbaut. */
.hero-mark .ring{width:min(76vmin,620px);max-height:46svh;height:auto;object-fit:contain;
  mix-blend-mode:screen;transform:scale(var(--ringz,1)) translateZ(0);opacity:var(--ringo,1);
  backface-visibility:hidden;will-change:transform,opacity}

.hero-copy{position:relative;z-index:5;width:100%;text-align:center;flex:none;
  opacity:var(--copyo,1);transform:translateY(calc(var(--copyy,0) * -18px));will-change:transform,opacity}
.hero-copy h1{max-width:24ch;margin:0 auto;text-shadow:0 2px 26px rgba(0,0,0,.9);letter-spacing:-.035em;line-height:1}
.h1-lead{display:block;font-size:clamp(2.6rem,7.4vw,5.4rem)}
.h1-tail{display:block;font-size:clamp(1.25rem,2.9vw,2.1rem);font-weight:700;letter-spacing:-.02em;
  margin-top:10px;color:#dfe2dc}
.hero-copy .lead{margin:16px auto 0;max-width:50ch;text-shadow:0 2px 16px rgba(0,0,0,.85)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;justify-content:center}
.hero-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#7d8288}
@media(max-width:900px){
  .hero-scroll{height:auto}
  .hero-stage{position:relative;height:auto;min-height:0;padding:100px 0 56px;gap:10px}
  .hero-bg img{transform:none;opacity:.3}
  .hero-mark .ring{width:min(84vmin,400px);max-height:none;transform:none;opacity:1}
  .hero-hint{display:none}
}

/* ---------- Standort-Weiche ---------- */
.switch{padding:clamp(56px,7vw,86px) 0 clamp(60px,7vw,92px);border-bottom:1px solid var(--line)}
.switch-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:34px}
.switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.studio{display:block;text-decoration:none;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:30px 30px 26px;transition:border-color .18s}
.studio:hover{border-color:#3d4247}
.studio .kiez{font-family:var(--font-display);font-size:clamp(1.45rem,2.6vw,1.85rem);font-weight:800;letter-spacing:-.022em}
.studio .addr{margin-top:8px;color:var(--muted)}
.studio .rail{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:.93rem;color:#c3c7c2}
.ubahn{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 6px;border-radius:3px;font-family:var(--font-display);font-weight:800;font-size:.75rem;background:#1f5fbf;color:#fff}
.ubahn.s{background:#00823c}
.studio .hours{margin-top:16px;font-size:.9rem;color:var(--muted)}
.studio .go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--font-display);font-weight:700;color:var(--lime)}
.studio .go svg{width:15px;height:15px}
@media(max-width:760px){.switch-grid{grid-template-columns:1fr}}

/* ---------- Trust ---------- */
.trust{border-bottom:1px solid var(--line);background:var(--ink-2)}
/* Raster statt flex-wrap. Beim Umbrechen entstanden sonst ungleiche Reihen,
   auf schmalen Fenstern zwei Punkte oben und je einer darunter. */
.trust .shell{display:grid;grid-template-columns:repeat(4,1fr);
  padding-top:26px;padding-bottom:26px}
/* Inhalt jeder Zelle mittig, sonst klebt alles am linken Rand und rechts
   bleibt Luft. Die Trennstriche brauchen dafuer gleiche Innenabstaende. */
.trust .item{display:flex;justify-content:center;align-items:baseline;
  flex-wrap:wrap;align-content:start;gap:6px 10px;
  font-size:.92rem;line-height:1.45;color:#c3c7c2;text-align:center;
  padding:4px 20px;border-left:1px solid var(--line)}
.trust .item:first-child{border-left:0}

/* Immer zwei Zeilen: Zahl oben, Beschriftung darunter.
   Vorher durfte die Beschriftung neben der Zahl stehen, wenn sie zufaellig
   hineinpasste. Dann stand ein Punkt einzeilig und die drei anderen
   zweizeilig, und die ganze Leiste sah schief aus. Der Umbruch haengt jetzt
   nicht mehr von der Textlaenge ab. */
.trust .item .label{flex-basis:100%;text-wrap:balance}

.trust .item b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;
  line-height:1.1;letter-spacing:-.02em;color:var(--paper)}
.trust .stars{color:var(--lime-fein);letter-spacing:1px;font-size:.88rem}

@media(max-width:860px){
  .trust .shell{grid-template-columns:1fr 1fr;gap:26px 0}
  .trust .item:nth-child(odd){border-left:0}
}
@media(max-width:430px){
  /* Auf dem Handy nebeneinander in zwei Spalten lassen. Vier volle Zeilen
     untereinander schieben den ersten Knopf zu weit nach unten. */
  .trust .shell{grid-template-columns:1fr 1fr;gap:22px 0}
  .trust .item{padding:4px 10px;font-size:.85rem}
  .trust .item b{font-size:1.28rem}
}

/* ---------- Ablauf als Zeitstrahl ----------
   Desktop: waagerecht, fuenf Spalten, Linie auf Punkthoehe.
   Mobil:   senkrecht, Linie links neben den Punkten.
   Die Fuellung haengt an --prog (0 bis 1), gesetzt vom Scroll-Handler.
   Ohne JS und bei reduced-motion steht die Linie voll gefuellt da.      */
.flow{padding:clamp(64px,8vw,104px) 0;overflow:hidden}
.timeline{list-style:none;position:relative;margin-top:52px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:26px;--prog:1}
.tl-track{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--tail,82%),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 var(--tail,82%),transparent 100%)}
.tl-fill{display:block;height:100%;width:calc(var(--prog) * 100%);background:var(--lime-fein);
  transition:width .12s linear}
.tl-step{position:relative;padding-top:34px}
.tl-dot{position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--ink);border:2px solid var(--line);
  transition:border-color .25s,background-color .25s,transform .25s}
.tl-step.on .tl-dot{border-color:var(--lime-fein);background:var(--lime-fein);transform:scale(1.12)}
/* --muted statt --muted-2: Kleintext braucht 4.5:1, --muted-2 kam nur auf 3.28.
   min-height auf zwei Zeilen, damit die Ueberschriften aller fuenf Spalten auf
   einer Linie stehen. Ohne das rutscht die Spalte mit dem zweizeiligen Label
   ("Innerhalb von 24 Stunden") als einzige nach unten. */
.tl-when{display:block;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;transition:color .25s;line-height:1.35;min-height:2.7em}
.tl-step.on .tl-when{color:var(--lime-fein)}
.tl-step h3{font-size:1.05rem}
.tl-step p{margin-top:8px;color:var(--muted);font-size:.93rem;line-height:1.55}

@media(max-width:900px){
  .timeline{grid-template-columns:1fr;gap:0;padding-left:38px;margin-top:40px}
  .tl-track{left:7px;right:auto;top:10px;bottom:14px;width:2px;height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--tail,88%),transparent 100%);
            mask-image:linear-gradient(180deg,#000 0,#000 var(--tail,88%),transparent 100%)}
  .tl-fill{width:100%;height:calc(var(--prog) * 100%);transition:height .12s linear}
  .tl-when{min-height:0}
  .tl-step{padding:0 0 30px}
  .tl-step:last-child{padding-bottom:0}
  .tl-dot{left:-38px;top:4px}
}
@media(prefers-reduced-motion:reduce){
  .timeline{--prog:1}
  .tl-step .tl-dot{border-color:var(--lime-fein);background:var(--lime-fein)}
  .tl-step .tl-when{color:var(--lime-fein)}
}

/* ---------- Fuenf Wege ----------
   Bewusst KEINE Karten: die Sektion soll sich vom Rest der Seite
   unterscheiden. Traeger sind duenne senkrechte Trennlinien. */
.system{padding:clamp(64px,8vw,104px) 0;border-top:1px solid var(--line)}
.ways{display:grid;grid-template-columns:repeat(5,1fr);margin-top:46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.way{padding:32px 22px;border-left:1px solid var(--line);text-align:center}
.way:first-child{border-left:0}
.way img{width:44px;height:44px;object-fit:contain;margin:0 auto 18px}
.way h3{font-size:1rem}
.way p{margin:9px auto 0;color:var(--muted);font-size:.9rem;line-height:1.55}
/* Mittig unter das zentrierte Raster, sonst haengt der Satz allein links */
.system .closing{margin:34px auto 0;color:#c3c7c2;max-width:52ch;text-align:center;font-size:1.05rem}
@media(max-width:980px){
  .ways{grid-template-columns:1fr 1fr}
  .way{border-left:1px solid var(--line);border-top:1px solid var(--line);padding:26px 20px}
  .way:nth-child(odd){border-left:0}
  .way:nth-child(-n+2){border-top:0}
}
@media(max-width:560px){
  .ways{grid-template-columns:1fr}
  .way,.way:first-child{border-left:0;padding:26px 0}
  .way:first-child{border-top:0}
}

/* ---------- Personas ---------- */
.who{padding:clamp(64px,8vw,104px) 0;border-top:1px solid var(--line);background:var(--ink-2)}
.who-list{margin-top:40px;border-top:1px solid var(--line)}
.who-row{display:grid;grid-template-columns:190px 1fr 300px;gap:clamp(24px,4vw,54px);padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.who-row h3{font-size:1.3rem}
.who-row .body{color:#c3c7c2}
.who-quote{border-left:2px solid var(--lime-fein);padding-left:18px;font-size:.95rem;color:var(--muted);line-height:1.6}
.who-person{display:flex;align-items:center;gap:12px;margin-top:14px}
.who-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line)}
.who-person cite{font-style:normal;font-weight:700;color:#c3c7c2;font-size:.88rem;line-height:1.3}
.who-person cite span{display:block;font-weight:500;color:var(--muted);font-size:.82rem}
@media(max-width:900px){.who-row{grid-template-columns:1fr;gap:14px;padding:28px 0}}

/* ---------- Kinoband ----------
   Randlos ueber die volle Breite, Bild faehrt beim Scrollen langsam durch.
   Der Versatz kommt aus --shift (-1 bis 1), gesetzt vom selben Scroll-Handler
   wie der Hero. Kein background-attachment:fixed, das ruckelt auf iOS und
   erzeugt auf Mobil oft gar keinen Effekt.                                  */
.cine{position:relative;width:100%;overflow:hidden;background:#000;
  height:clamp(340px,46vw,560px);display:flex;align-items:flex-end}
.cine img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;
  transform:translate3d(0,calc(var(--shift,0) * 3.4%),0);will-change:transform}
.cine::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.88) 100%)}
.cine-copy{position:relative;z-index:2;width:100%;padding-bottom:clamp(30px,4.5vw,56px)}
.cine-copy p{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  line-height:1.02;max-width:20ch;text-shadow:0 2px 24px rgba(0,0,0,.9)}
.cine-h{font-size:clamp(2.1rem,6vw,4.4rem)}
.cine-sub{font-size:clamp(1.15rem,2.6vw,1.9rem);color:var(--lime-fein);margin-top:6px}
.cine-copy small{display:block;margin-top:16px;font-size:1rem;color:#c3c7c2;max-width:44ch;
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
@media(prefers-reduced-motion:reduce){.cine img{transform:none}}

/* ---------- FAQ ---------- */
.faq{padding:clamp(64px,8vw,104px) 0;border-top:1px solid var(--line)}
/* Schmalerer, mittig sitzender Block. Vorher klebte die Liste links und
   rechts blieb ein Drittel der Seite leer. Text bleibt linksbuendig,
   nur der Block wandert in die Mitte. */
.faq .shell{max-width:880px}
.faq-list{margin-top:34px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--lime-fein);border-bottom:2px solid var(--lime-fein);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:70ch}

/* ---------- Preis ---------- */
.price{padding:clamp(56px,7vw,88px) 0;border-top:1px solid var(--line);background:var(--ink-2)}
.price .box{max-width:720px}
.todo{display:inline-block;background:rgba(224,83,61,.12);border:1px dashed #e0533d;color:#f0a597;border-radius:6px;padding:3px 9px;font-size:.82rem;font-family:var(--font-display);font-weight:700}
/* Zwei verschiedene Sorten offener Punkte, deshalb zwei Markierungen.
   .todo, rot:      hier fehlt ein Text, den das Studio einsetzen muss.
                    Diese Zahl nennen wir im Termin, sie muss stimmen.
   .pruefen, gelb:  der Text steht, aber eine Angabe darin ist noch nicht
                    bestaetigt, etwa von der Anwaeltin oder von STRATO.
   Beides in einen Topf zu werfen macht die Zahl der fehlenden Texte falsch. */
.pruefen{display:inline-block;background:rgba(224,161,61,.10);border:1px dashed #b8862f;
  color:#d9ab63;border-radius:6px;padding:6px 11px;font-size:.82rem;line-height:1.5;
  font-family:var(--font-display);font-weight:500}

/* ---------- Formular ---------- */
.book{padding:clamp(64px,8vw,104px) 0;border-top:1px solid var(--line)}
.book-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,70px);align-items:start}
.book-side .callrow{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.callcard{display:flex;align-items:center;gap:16px;text-decoration:none;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:16px 20px;min-height:56px;transition:border-color .18s}
.callcard:hover{border-color:#3d4247}
.callcard b{font-family:var(--font-display);font-weight:700;font-size:.96rem}
.callcard .num{margin-left:auto;font-family:var(--font-display);font-weight:700;color:var(--lime-fein);white-space:nowrap}
form.lead-form{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:clamp(24px,3.4vw,36px)}
fieldset{border:0}
legend,.flabel{display:block;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.radios{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.radios label{display:flex;align-items:center;gap:11px;min-height:56px;padding:12px 16px;border:1px solid var(--line-ui);border-radius:9px;cursor:pointer;background:var(--ink);font-weight:600;transition:border-color .18s}
.radios input{accent-color:var(--lime);width:19px;height:19px;flex:none}
.radios label:has(input:checked){border-color:var(--lime-fein)}
.field{margin-bottom:18px}
.field input{width:100%;min-height:52px;background:var(--ink);border:1px solid var(--line-ui);border-radius:9px;padding:13px 15px;color:var(--paper);font-family:inherit;font-size:1rem}
.field input:focus{outline:none;border-color:var(--lime-fein);box-shadow:0 0 0 3px rgba(133,175,50,.18)}
.field .err{display:none;color:#f0a597;font-size:.85rem;margin-top:7px}
.field.bad input{border-color:#e0533d}
.field.bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--muted);margin:4px 0 20px;cursor:pointer}
.consent input{accent-color:var(--lime);width:19px;height:19px;margin-top:2px;flex:none}
.consent a{color:var(--lime-fein)}
/* Fehlende Einwilligung sichtbar machen.
   Vorher aenderte sich nur die Textfarbe von grau zu blassrot. Auf grauem
   Text faellt das praktisch nicht auf: der Knopf tat scheinbar nichts, und
   niemand wusste warum. Jetzt gibt es denselben roten Satz wie bei den
   anderen Pflichtfeldern, dazu einen Rahmen um das Kaestchen.
   Der Fehlertext steht bewusst AUSSERHALB des <label>, sonst wuerde ein
   Klick darauf das Haekchen wieder umschalten. */
.consent-wrap{margin:4px 0 20px}
.consent-wrap .consent{margin:0}
.consent-wrap .err{display:none;color:#f0a597;font-size:.85rem;margin-top:7px}
.consent-wrap.bad .err{display:block}
.consent-wrap.bad .consent{color:#f0a597}
.consent-wrap.bad input[type=checkbox]{outline:2px solid #e0533d;outline-offset:2px}
.promise{margin-top:14px;font-size:.9rem;color:var(--muted);text-align:center}
.sent{display:none}
.sent.on{display:block;text-align:center;padding:18px 0}
.sent h3{font-size:1.35rem;margin-bottom:8px}
.sent p{color:var(--muted);margin:0 auto}
@media(max-width:880px){.book-grid{grid-template-columns:1fr}}
@media(max-width:520px){.radios{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);background:var(--ink-2);padding:44px 0 132px;font-size:.92rem;color:var(--muted)}
/* Spalten enger zusammen und Textbreite begrenzt, sonst zieht die
   Beschreibung die erste Spalte auf und die Adressen kleben rechts. */
.foot-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:clamp(26px,3.4vw,48px);align-items:start}
.foot-grid>div:first-child p{max-width:32ch}
/* width:auto ist Pflicht. Ohne das zieht die width-Angabe im Markup das
   Logo in die Breite, weil CSS nur die Hoehe setzt. Logo ist 899x533. */
/* Logo im Fussbereich: nach oben beziehungsweise zur Startseite.
   Der Kasten ist mindestens 44px hoch, damit er auf dem Handy sicher zu
   treffen ist. Das Logo selbst ist nur 32px hoch. */
.foot-marke{display:inline-flex;align-items:center;min-height:44px;margin-bottom:6px;
  transition:opacity .18s}
.foot-marke:hover{opacity:.7}
footer img{height:32px;width:auto;margin-bottom:14px}
.foot-marke img{margin-bottom:0}

/* Standortname im Fussbereich als Link. Unterstrichen mit Abstand, damit man
   sieht, dass es einer ist. Ohne Unterstreichung ist ein Link, der dieselbe
   Farbe hat wie seine Umgebung, nicht erkennbar. */
/* Der Studioname als Pille statt als unterstrichener Text. Eine Unterstreichung
   sagt "Link", eine Pille sagt "hier drueckst du drauf". Auf dem Handy ist das
   der Unterschied, ob jemand es als Schaltflaeche erkennt.
   Die Hoehe liegt bei 40px plus Zeilenhoehe, damit das Ziel gross genug ist. */
/* Gleiche Form wie die Knoepfe der Seite: abgerundetes Rechteck mit 8px,
   nicht als Kapsel. Sonst haette der Fussbereich eine eigene Formensprache.
   Das Zentrieren steuert die feste Mindesthoehe zusammen mit line-height:1.
   Vorher standen Innenabstand und Zeilenhoehe gegeneinander, dadurch sass der
   Text im Kasten sichtbar zu hoch. */
.foot-ort{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 18px;border-radius:8px;line-height:1;
  background:rgba(158,181,56,.12);border:1px solid rgba(158,181,56,.42);
  color:var(--lime);text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  transition:background-color .18s,border-color .18s}
.foot-ort::after{content:"→";font-size:1em;line-height:1}
.foot-ort:hover,.foot-ort:focus-visible{background:rgba(158,181,56,.2);
  border-color:var(--lime)}
footer h2{font-family:var(--font-display);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);margin-bottom:12px}
footer h2:has(.foot-ort){text-transform:none;letter-spacing:0;font-size:1rem;margin-bottom:14px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--paper)}
footer .flist{display:flex;flex-direction:column;gap:7px}
.foot-legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;font-size:.87rem}
/* Beide Standorte nebeneinander statt untereinander. Spart auf dem Handy
   rund eine halbe Bildschirmhoehe und liest sich als Paar sauberer. */
@media(max-width:760px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 22px}
  .foot-grid>div:first-child{grid-column:1 / -1}
  .foot-grid>div:first-child p{max-width:none}
  footer{padding-bottom:120px}
}
@media(max-width:380px){.foot-grid{grid-template-columns:1fr}}
@media(min-width:901px){footer{padding-bottom:44px}}

/* ---------- Mobile Kontaktleiste ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.dock a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:58px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:.97rem}
.dock .d-call{background:var(--ink-2);color:var(--paper)}
.dock .d-book{background:var(--lime);color:var(--lime-ink)}
.dock svg{width:17px;height:17px}
/* Studioauswahl beim Anrufen, nur auf der Startseite.
   Das <summary> sieht aus wie die alte Schaltflaeche, die Liste klappt
   darueber auf. Sie oeffnet sich nach OBEN, weil die Leiste am unteren
   Bildschirmrand klebt und unten kein Platz mehr ist. */
.dock .d-wahl{background:var(--ink-2);position:relative}
.dock .d-wahl>summary{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:58px;color:var(--paper);cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:.97rem}
.dock .d-wahl>summary::-webkit-details-marker{display:none}
.dock .d-wahl[open]>summary{background:var(--ink-3)}
.d-nummern{position:absolute;left:0;right:0;bottom:100%;
  background:var(--ink-2);border-top:1px solid var(--line);
  box-shadow:0 -14px 34px rgba(0,0,0,.5)}
.d-nummern a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:13px 20px;min-height:60px;justify-content:center;
  border-bottom:1px solid var(--line);text-decoration:none}
.d-nummern a:last-child{border-bottom:0}
.d-nummern b{color:var(--paper);font-family:var(--font-display);font-size:.98rem}
.d-nummern span{color:var(--lime-fein);font-size:.92rem;font-weight:400}
.d-nummern a:active{background:var(--ink-3)}

@media(min-width:901px){.dock{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .hero-scroll{height:auto}
  .hero-stage{position:relative;height:auto;min-height:0;padding:100px 0 56px;gap:10px}
  .hero-bg img{transform:none;opacity:.3}
  .hero-mark .ring{max-height:none;transform:none;opacity:1}
  .hero-hint{display:none}
}

/* ============================================================
   STANDORTSEITEN
   ============================================================ */
.loc-hero{position:relative;min-height:clamp(420px,58vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;background:#000;padding:120px 0 clamp(36px,5vw,64px)}
.loc-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66}
.loc-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.9) 100%)}
.loc-hero .shell{position:relative;z-index:2}
.loc-hero h1{font-size:clamp(2.1rem,5.4vw,4rem);letter-spacing:-.035em;line-height:1;max-width:16ch;
  text-shadow:0 2px 26px rgba(0,0,0,.9)}
.loc-hero .lead{margin-top:18px;max-width:50ch;text-shadow:0 2px 16px rgba(0,0,0,.85)}
.loc-hero .hero-actions{justify-content:flex-start}

/* Fakten: Adresse, Anfahrt, Zeiten */
.facts{padding:clamp(56px,7vw,88px) 0;border-bottom:1px solid var(--line)}
.facts-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(24px,4vw,50px)}
.fact h2{font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--lime-fein);margin-bottom:14px}
.fact address{font-style:normal;line-height:1.7}
.fact a{color:inherit}
.fact .big{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.hours-table{width:100%;border-collapse:collapse;font-size:.95rem}
.hours-table th{text-align:left;font-weight:500;color:var(--muted);padding:6px 0}
.hours-table td{text-align:right;padding:6px 0;font-variant-numeric:tabular-nums}
.hours-table tr+tr th,.hours-table tr+tr td{border-top:1px solid var(--line)}

/* Preistabelle. Sieht aus wie die Oeffnungszeiten, verhaelt sich aber anders,
   deshalb eine eigene Klasse.
   Der Grund: .hours-table richtet Werte rechts aus, weil dort "08:00 – 21:00"
   steht, also immer gleich kurz. Ein Preisfeld enthaelt einen Satz, und ein
   noch nicht gefuellter Platzhalter einen langen. Rechtsbuendig umbrechend
   lief der Text in die Beschriftung hinein.
   Hier also: Werte links, Beschriftungsspalte mit fester Breite, und die
   Zeilen duerfen atmen. */
/* Der grosse Betrag. Steht bewusst allein in einer Zeile, mit der Einheit
   direkt darunter in klein. Zwei verschiedene Betraege auf derselben Seite,
   29,90 pro Woche und rund 119 einmalig, duerfen optisch nicht wie derselbe
   aussehen, sonst rechnet niemand nach und alle fuehlen sich hinterher
   ueberrumpelt. */
/* Die Null ist der Einstieg und darf am lautesten sein: groesser als die
   anderen beiden Betraege und im helleren --lime statt --lime-fein.
   Kein clamp noetig, "0 €" ist drei Zeichen breit und passt auch auf 390px. */
.preis-null{font-size:3.4rem}

/* Der Aktionspreis laeuft in derselben Farbe wie die anderen Betraege.
   Die Aufmerksamkeit soll auf dem gestrichenen Preis liegen. */
.preis-aktion{color:inherit;font-weight:inherit}

/* Streichpreis. Bewusst kleiner und gedaempft: er ist der Bezugswert, nicht
   das Angebot. Steht er gleich gross daneben, sieht die Seite nach Rabattschlacht
   aus statt nach offener Preisangabe. */
.preis-vorher{color:var(--lime);font-size:.5em;font-weight:700;margin-right:.35em;
  vertical-align:.22em;position:relative;display:inline-block;
  /* Die Standardlinie weg. Sie bleibt aber im <s>, falls das CSS nicht laedt:
     dann sieht man wieder den waagerechten Strich statt gar keinen. */
  text-decoration:none}
/* Schraeger Strich von links oben nach rechts unten. 14 Grad, weil das etwa
   der Diagonalen des Preisfeldes entspricht und steiler wie ein Schraegstrich
   im Text aussaehe statt wie eine Streichung. Der Strich endet knapp innerhalb
   des Preises statt darueber hinaus. Das ::after liegt absolut, die Zeile
   rueckt dadurch nicht. */
.preis-vorher::after{content:"";position:absolute;left:1%;right:1%;top:50%;
  height:.1em;background:var(--paper);border-radius:.05em;
  transform:translateY(-50%) rotate(14deg);pointer-events:none}

.preis-gross{font-family:var(--font-display);font-weight:800;font-size:2.4rem;
  letter-spacing:-.03em;line-height:1.1;color:var(--paper);margin:10px 0 14px}
.preis-gross small{display:block;font-family:var(--font-text);font-weight:400;
  font-size:.95rem;letter-spacing:0;color:var(--muted);margin-top:8px}
.preis-gross .todo{font-size:.9rem;letter-spacing:0}

.preistabelle{width:100%;border-collapse:collapse;font-size:.98rem;
  max-width:560px;margin-top:20px}
.preistabelle th{text-align:left;font-weight:500;color:var(--muted);
  padding:12px 18px 12px 0;vertical-align:top;width:11em;white-space:nowrap}
.preistabelle td{text-align:left;padding:12px 0;vertical-align:top}
.preistabelle tr+tr th,.preistabelle tr+tr td{border-top:1px solid var(--line)}
/* Der Platzhalter darf umbrechen, sonst sprengt er die Spalte. */
.preistabelle .todo{white-space:normal;display:inline-block;max-width:100%}
@media(max-width:520px){
  /* Auf schmalen Schirmen untereinander statt nebeneinander. Zwei Spalten mit
     11em Beschriftung lassen fuer den Wert keine 8em uebrig. */
  .preistabelle th,.preistabelle td{display:block;width:auto;padding:0}
  .preistabelle th{padding-top:14px;font-size:.86rem}
  .preistabelle td{padding-bottom:14px}
  .preistabelle tr+tr th{border-top:1px solid var(--line);padding-top:14px}
  .preistabelle tr+tr td{border-top:0}
}
@media(max-width:840px){.facts-grid{grid-template-columns:1fr;gap:34px}}

/* Kontaktwege in der Adressspalte.
   Einer fuehrt, die anderen stehen leise daneben. Drei gleich laute Links
   untereinander erzeugen Entscheidungslast und sehen unruhig aus. */
.tel-gross{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--font-display);font-weight:800;font-size:1.28rem;
  letter-spacing:-.02em;text-decoration:none;
  /* 44px Mindesthoehe, damit der Daumen sicher trifft. */
  min-height:44px}
.tel-gross svg{width:19px;height:19px;flex:none;color:var(--lime-fein)}
.tel-gross:hover{color:var(--lime-fein)}
.fact .fein{margin-top:8px;font-size:.9rem;color:var(--muted)}
.fact .fein a{color:var(--muted);text-decoration:underline;
  text-underline-offset:3px}
.fact .fein a:hover{color:var(--lime-fein)}

/* Route statt Karte. Kein iframe, kein Kartenbild, kein externer Request.
   Der Knopf oeffnet direkt die Navigations-App, und genau das ist der
   einzige Grund, aus dem jemand hier ueberhaupt tippt. */
.route-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:30px;padding:20px 22px;border:1px solid var(--line);
  border-radius:12px;background:var(--ink-2)}
.route-cta .btn{min-height:44px;padding:11px 22px;font-size:.94rem}
.route-cta small{font-size:.88rem;color:var(--muted);line-height:1.55}

/* Anfahrt in Schritten */
.route{list-style:none;margin-top:18px}
.route li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:11px 0;
  border-top:1px solid var(--line);font-size:.95rem}
.route li:first-child{border-top:0}
.route .u{margin-top:2px}

/* Team */
.team{padding:clamp(56px,7vw,88px) 0;border-bottom:1px solid var(--line);background:var(--ink-2)}
/* Foto links, Text rechts. Das Foto ist bewusst nicht rund und nicht klein:
   es ist kein Teammitglied unter mehreren, sondern die Person, mit der man
   trainiert. Auf dem Handy stapelt es sich, Foto zuerst. */
/* Vollbreites Band statt Bildkachel. Der Text sitzt links, weil Sven rechts
   im Bild steht: das Auge laeuft von der Schrift zu ihm und bleibt dort.
   Die Westenstange links wird vom Verlauf abgedunkelt, dadurch verliert das
   helle Fenster seine Sogwirkung, ohne dass die Stange verschwindet. */
.sven-band{position:relative;width:100%;overflow:hidden;background:#000;
  /* Text unten statt mittig: oben haengt das Wandlogo, und wenn der Block
     mittig sitzt, laeuft die Ueberschrift hinein. Unten bleibt das Logo frei
     und der Blick geht von der Schrift nach oben rechts zu Sven.
     Die Kinobaender der Seite verankern ihren Text ebenfalls unten. */
  min-height:clamp(470px,46.6vw,700px);display:flex;align-items:flex-end}
.sven-band>picture{position:absolute;inset:0;display:block}
.sven-band>picture img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.sven-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,11,10,.96) 0%,rgba(9,11,10,.9) 26%,
    rgba(9,11,10,.62) 46%,rgba(9,11,10,.1) 66%,transparent 78%),
    radial-gradient(120% 90% at 62% 45%,transparent 38%,rgba(0,0,0,.42) 100%)}
/* Kennzeichnung fuer KI-bearbeitete Bilder.
   Seit dem 2. August 2026 gelten die Transparenzpflichten der EU-KI-
   Verordnung: wer eine reale Person oder Umgebung mit KI veraendert, soll das
   kenntlich machen. Deshalb sichtbar am Bild und nicht nur im Impressum.
   Klein, aber lesbar: 10px mit Schattenwurf, damit es auf hellen wie dunklen
   Bildstellen erkennbar bleibt. */
.ki-hinweis{position:absolute;right:12px;bottom:9px;z-index:3;
  font-size:10px;letter-spacing:.02em;color:rgba(255,255,255,.72);
  text-shadow:0 1px 4px rgba(0,0,0,.9);pointer-events:none}
@media(max-width:860px){.ki-hinweis{right:10px;bottom:7px}}

.sven-band .shell{position:relative;z-index:2;max-width:none;
  /* margin und width muessen hier stehen. .shell bringt "margin:0 auto" mit,
     und in einem Flex-Container saugen auto-Margins den freien Platz auf:
     der Block wird zentriert, egal welches padding-left daneben steht.
     max-width:none allein reicht nicht, weil ein Flex-Item sich ohne
     width-Angabe an seinem Inhalt bemisst und nicht an der Containerbreite. */
  margin:0;width:100%;
  padding-left:clamp(20px,12vw,340px);padding-right:var(--pad);
  padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(32px,3.6vw,54px)}
.sven-text{max-width:46ch}
.sven-text h2{margin-top:6px}
.sven-name{display:block;font-family:var(--font-display);font-weight:800;
  color:var(--lime-fein);font-size:1.02rem;letter-spacing:.01em;margin-top:18px}
/* Keine Pillen. Vier gestapelte Kapseln lesen sich wie Feature-Badges und
   ziehen mehr Aufmerksamkeit als der Satz darunter. Eine gesetzte Zeile mit
   Trennpunkten sagt dasselbe und traegt sich ruhiger. */
.sven-qual{list-style:none;padding:0;margin:12px 0 22px;
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;row-gap:2px;
  font-size:.9rem;color:#b9bec0;letter-spacing:.005em}
/* Trenner haengt hinten am Eintrag, nicht vorn am naechsten. Sonst startet
   eine umgebrochene Zeile mit einem einsamen Trennpunkt, und das sieht nach
   Versehen aus statt nach Satz. */
.sven-qual li:not(:last-child)::after{content:" ·";margin-right:.5em;color:var(--muted-2)}
.sven-text p{margin-top:14px;color:#d3d7d2;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.sven-lead{font-family:var(--font-display);font-weight:700;font-size:clamp(1.06rem,1.7vw,1.2rem);
  line-height:1.42;color:var(--paper)!important;letter-spacing:-.008em;margin-top:4px!important}
/* Drei Belege statt eines Blocks. Haarlinien statt Aufzaehlungspunkte: die
   Linie gliedert, ohne wie eine Merkmalsliste auszusehen. */
/* Akzentlinie statt Kachel. Eine Kachel legt einen Rahmen aufs Foto und
   nimmt ihm die Flaeche; die Linie gliedert genauso, kostet aber nichts.
   Sie ist ausserdem das einzige Markengruen im Band ausser der Namenszeile
   und bindet die Sektion damit an den Rest der Seite. */
.sven-punkte{list-style:none;padding:0;margin:24px 0 0}
.sven-punkte li{position:relative;padding:0 0 16px 18px;
  font-size:.97rem;line-height:1.5;color:#b9bec0;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.sven-punkte li::before{content:"";position:absolute;left:0;top:4px;bottom:20px;
  width:2px;background:var(--lime-fein)}
.sven-punkte li:last-child{padding-bottom:0}
.sven-punkte li:last-child::before{bottom:4px}
.sven-punkte b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:1rem;color:#f2f3f0;margin-bottom:3px}
@media(max-width:860px){
  .sven-punkte li{color:var(--muted);text-shadow:none}
  .sven-lead{color:var(--paper)!important}
}

/* Schmale Schirme.
   Nicht object-fit:cover ueber die ganze Bandhoehe: bei einem 700px hohen
   Band auf 390px Breite wird das Bild dafuer so stark vergroessert, dass nur
   ein schmaler senkrechter Streifen uebrig bleibt. Der Kopf fuellt dann die
   halbe Breite und sitzt direkt an der Ueberschrift.

   Stattdessen bekommt das Bild oben eine feste Hoehe im eigenen Format, und
   der Verlauf blendet es nach unten in die Flaeche, auf der der Text steht.
   Damit bleibt das Gesicht frei und der Uebergang trotzdem weich. */
@media(max-width:860px){
  .sven-band{min-height:0;height:auto;display:block;position:relative;
    background:var(--ink)}
  .sven-band>picture{position:absolute;inset:0 0 auto 0;height:82vw;display:block}
  .sven-band>picture img{width:100%;height:100%;object-fit:cover;
    object-position:62% 18%}
  /* Der Verlauf setzt frueher ein als vorher, weil der Text jetzt hoeher
     beginnt. Bei 59vw sitzt der Kicker auf Hoehe des EMS-Geraets, und dort
     muss der Untergrund schon dunkel genug fuer Text sein. */
  .sven-band::after{inset:0 0 auto 0;height:82vw;
    background:linear-gradient(180deg,
      rgba(11,12,13,0) 0%, rgba(11,12,13,.08) 28%,
      rgba(11,12,13,.62) 56%, rgba(11,12,13,.93) 80%, var(--ink) 100%)}
  .sven-band .shell{position:relative;z-index:2;max-width:none;width:100%;
    padding:59vw var(--pad) 34px}
  .sven-text{max-width:none}
  .sven-text p{text-shadow:none;color:var(--muted)}
  .sven-punkte li{color:var(--muted);text-shadow:none}
  .sven-lead{color:var(--paper)!important}
  .ki-hinweis{right:10px;top:calc(82vw - 20px);bottom:auto;
    color:rgba(255,255,255,.6)}
}

/* Verweis auf den anderen Standort */
.other{padding:clamp(48px,6vw,72px) 0;border-bottom:1px solid var(--line)}
.other-card{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:26px 30px;
  text-decoration:none;transition:border-color .18s}
.other-card:hover{border-color:#3d4247}
/* display:block, sonst laufen Studioname und Strasse in einer Zeile weiter
   und der Name bricht mitten in der Adresse um. Das margin-top an .addr war
   an einem inline-Element wirkungslos. */
.other-card .kiez{display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.4rem;letter-spacing:-.022em;line-height:1.2}
.other-card .addr{display:block;color:var(--muted);margin-top:6px;font-size:.95rem}

/* Stimmen pro Standort */
.voices{padding:clamp(56px,7vw,88px) 0;border-bottom:1px solid var(--line)}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.voice{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:26px;
  display:flex;flex-direction:column;gap:18px}
.voice p{flex:1;color:#c3c7c2;font-size:.98rem;line-height:1.6}
.voice .who-person{margin-top:0}
@media(max-width:860px){.voice-grid{grid-template-columns:1fr}}

/* Kiez-Absatz */
.kiez-intro{padding:clamp(52px,6.5vw,80px) 0;border-bottom:1px solid var(--line)}
.kiez-intro .box{max-width:70ch}
.kiez-intro p+p{margin-top:16px}

/* ============================================================
   KOPFLOGO, animiert aus dem echten 360-Grad-Video
   18 Frames aus dem Clip, nebeneinander in einer Datei. Das Schwarz des
   Videos ist beim Erzeugen in Transparenz umgerechnet worden, deshalb
   braucht es hier keinen Blendmodus und das Logo sitzt sauber auf jedem
   Hintergrund. Abgespielt wird ueber background-position mit steps(),
   das ist ein einziges Bild statt 18 Requests und laeuft auf der GPU.
   ============================================================ */
.brandmark{display:block;width:60px;height:38px;flex:none;
  background:url("logo-sprite.webp") 0 0 / 1080px 38px no-repeat}
.masthead a:hover .brandmark,
.masthead a:focus-visible .brandmark{animation:logoDreh 1.1s steps(18) 1}
/* einmal beim Laden, damit man die Drehung ueberhaupt bemerkt */
.brandmark{animation:logoDreh 1.4s steps(18) 1 .3s}
@keyframes logoDreh{from{background-position:0 0}to{background-position:-1080px 0}}
@media(prefers-reduced-motion:reduce){
  .brandmark,.masthead a:hover .brandmark{animation:none}
}

/* Rechtsseiten */
.legal-head{position:relative;background:var(--ink-2);border-bottom:1px solid var(--line)}
.legal{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,90px)}
.legal .shell{max-width:820px}
.legal h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.03em}
.legal h2{font-size:1.18rem;margin:38px 0 12px;letter-spacing:-.015em}
.legal p{color:#c3c7c2;max-width:none}
.legal p+p{margin-top:12px}
.legal a{color:var(--lime-fein)}
/* Knoepfe sind keine Textlinks. Ohne diese Ausnahme faerbt die Regel darueber
   auch die Beschriftung der Knoepfe gruen, und dann steht gruene Schrift auf
   gruener Flaeche: Kontrast 1,2 zu 1 statt der geforderten 4,5. Aufgefallen
   auf der Preisseite, die als erste Seite mit .legal einen Knopf hat. */
.legal .btn-primary{color:var(--lime-ink)}
.legal .btn-ghost{color:var(--paper)}
.legal .dim{color:var(--muted)}

/* Quellenangabe unter dem Kartenbild. Klein, aber Pflicht: OpenStreetMap
   verlangt die Nennung. Kontrast trotzdem ueber 4.5:1 gehalten. */
/* Bleibt stehen fuer den Fall, dass wieder ein Kartenbild eingebaut wird.
   Dann ist die Quellenangabe Pflicht und soll sofort richtig aussehen. */
.karte-quelle{margin:10px 0 0;font-size:.78rem;color:#9aa0a6}
.karte-quelle a{color:#9aa0a6;text-decoration:underline}
.karte-quelle a:hover{color:var(--lime-fein)}