:root{
  --paper:#ffffff;
  --ink:#0f0e0c;
  --muted:#6f6a63;
  --line:#e7e3dc;
  --soft:#f6f4f0;
  --soft2:#efece6;
  --dark:#1b1916;
  --dark-ink:#f4f1ea;
  --dark-muted:#a49c8f;
  --dark-line:#37322b;
  --ghost:#f1eee8;
  --accent:#e3c36c;--accent-ink:#1c1710;
  --neg:#9a4a3a; --pos:#4e6b46;
  --c1a:#e7d9c6; --c1b:#cdb79c;
  --c2a:#eadfe0; --c2b:#c9b3b0;
  --c3a:#dfe2dc; --c3b:#b9bcae;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-press:120ms;
  --dur-ui:220ms;
  --dur-reveal:460ms;
  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);
  --logo:url("/bilder/inline-dd125a9a60.png");
  /* Eine Familie, variabel 100-900. Was traegt, traegt ueber Gewicht und
     Groesse — nicht ueber eine zweite Schriftart. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  font-family:var(--sans);
}
:root{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}
:root[data-theme="light"]{
  --paper:#ffffff; --ink:#0f0e0c; --muted:#6f6a63; --line:#e7e3dc;
  --soft:#f6f4f0; --soft2:#efece6; --dark:#1b1916; --dark-ink:#f4f1ea;
  --dark-muted:#a49c8f; --dark-line:#37322b; --ghost:#f1eee8;
}
:root[data-theme="dark"]{
  --neg:#c4705e; --pos:#82a176;
  --paper:#121212; --ink:#f2f2f2; --muted:#a0a0a0; --line:#2a2a2a;
  --soft:#1a1a1a; --soft2:#212121; --dark:#0b0b0b; --dark-ink:#f2f2f2;
  --dark-muted:#a0a0a0; --dark-line:#2a2a2a; --ghost:#1c1c1c;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:100px;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;letter-spacing:.005em;}
/* height:auto gehoert zwingend dazu, seit die Bilder ihre echten Masse als
   Attribut tragen: sonst haelt der Browser an der Attributhoehe fest,
   sobald max-width das Bild schmaler macht — und verzerrt es. */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}

/* labels / type utilities */
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  font-weight:500;color:var(--muted);}
.display{font-weight:500;letter-spacing:-.02em;line-height:1.02;text-wrap:balance;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:500;
  padding:16px 30px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .3s,color .3s,border-color .3s;cursor:pointer;}
.btn:hover{background:transparent;color:var(--ink);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--paper);}
.link-u{display:inline-flex;align-items:center;gap:.5em;font-size:12px;
  text-transform:uppercase;letter-spacing:.16em;font-weight:500;padding-bottom:5px;
  border-bottom:1px solid currentColor;transition:transform var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.link-u:hover{transform:translateX(3px);}}
.hi{color:var(--accent);}
.mark{background:color-mix(in srgb,var(--accent) 58%,transparent);color:inherit;
  padding:0 .12em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* ANNOUNCEMENT BAR */
.announce{background:var(--dark);color:var(--dark-ink);text-align:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:11px 16px;font-weight:500;}
.announce span{color:var(--dark-muted);}

/* HEADER */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{font-size:20px;font-weight:500;letter-spacing:-.01em;display:flex;align-items:baseline;gap:.05em;}
.brand b{font-weight:500;}
.brand i{font-style:normal;color:var(--muted);}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{font-size:13.5px;letter-spacing:.01em;color:var(--ink);position:relative;padding:4px 0;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.nav-links a:hover::after{transform:scaleX(1);}}
.nav-links a.active::after{transform:scaleX(1);background:var(--accent);height:2px;}
.nav-right{display:flex;align-items:center;gap:20px;}
/* Konto-Link in der Kopfleiste. Gleiche Schriftgroesse und Sperrung wie der
   Menue-Knopf, aber ohne Rahmen — er soll erreichbar sein, nicht um
   Aufmerksamkeit mit dem Termin-CTA konkurrieren. */
.konto-link{font-size:12px;text-transform:uppercase;letter-spacing:.16em;
  font-weight:500;color:var(--ink);padding:11px 0;white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .2s;}
@media (hover:hover) and (pointer:fine){.konto-link:hover{border-bottom-color:var(--ink);}}
.konto-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media (max-width:900px){.konto-link{display:none;}}
/* Konto-Icon in der Kopfleiste. Es erscheint genau dort, wo der Textlink
   verschwindet: ein Weg ins Konto, der im geschlossenen Menue liegt, ist auf
   dem Handy keiner. Nur ein Symbol, weil daneben schon der Burger steht und
   zwei Beschriftungen nebeneinander die Leiste zerreissen wuerden. */
/* Gleiche Kantenlaenge, gleiche Kante, gleiche Symbolgroesse wie der
   Themenschalter daneben. Der Kreis war der einzige runde Knopf im ganzen
   Haus: zwei Knoepfe nebeneinander, von denen einer rund und einer eckig
   ist, sehen nach zwei verschiedenen Dingen aus — sie tun aber dasselbe,
   sie fuehren woandershin. */
.konto-icon{display:none;align-items:center;justify-content:center;flex:none;
  position:relative;width:40px;height:40px;color:var(--ink);
  border:1px solid var(--line);
  transition:transform var(--dur-press) var(--ease-out),
             border-color var(--dur-ui) ease,background var(--dur-ui) ease;}
.konto-icon svg{width:17px;height:17px;display:block;}
.konto-icon:active{transform:scale(.94);}
.konto-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  .konto-icon:hover{border-color:var(--ink);background:var(--soft);}
}
/* Angemeldet: ein Punkt genuegt. Der Name steht im Menue. */
.konto-icon.an::after{content:"";position:absolute;top:-4px;right:-4px;
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  border:2px solid var(--paper);}
@media (max-width:900px){.konto-icon:not([hidden]){display:inline-flex;}}
/* Angemeldet genuegt das Maennchen, auch am Schreibtisch: der Weg ins Konto
   ist dann ein Ziel, kein Angebot, und der Kopf bleibt ruhig. Wer sich erst
   anmelden muss, behaelt das Wort — ein Symbol allein fordert niemanden zur
   Anmeldung auf. Die Klasse setzt das Konto-Skript. */
.konto-an .konto-link{display:none;}
.konto-an .konto-icon:not([hidden]){display:inline-flex;}
.menu-btn{display:none;align-items:center;gap:9px;font-size:12px;text-transform:uppercase;
  letter-spacing:.16em;font-weight:500;background:none;border:1px solid var(--ink);
  color:var(--ink);padding:11px 18px;cursor:pointer;}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:3px;}
.menu-btn .bars i{width:15px;height:1.5px;background:var(--ink);display:block;}
.mobile-panel{height:0;overflow:hidden;border-top:1px solid transparent;background:var(--paper);
  transition:height 260ms var(--ease-out),border-color 260ms var(--ease-out);}
.mobile-panel a{display:block;padding:13px var(--pad);font-size:15.5px;
  border-bottom:1px solid var(--line);letter-spacing:.01em;}
/* Offen scrollt das Menue in sich selbst. overscroll-behavior haelt den
   Schwung darin: vorher lief er auf die Seite dahinter ueber, sobald das
   Menue am Ende war — man scrollte scheinbar das Menue und bewegte die
   Seite. */
.mobile-panel.open{border-top-color:var(--line);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.mobile-panel a.sub{padding-left:calc(var(--pad) + 18px);font-size:14px;
  padding-top:11px;padding-bottom:11px;color:var(--muted);}

/* Zeilen mit Unterpunkten: der Name bleibt ein Link, das Zeichen daneben
   klappt auf. Zugeklappt zeigt das Menue zehn statt fuenfzehn Zeilen. */
.mp-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line);}
.mp-row > a{flex:1 1 auto;border-bottom:0;}
.mp-toggle{flex:none;width:58px;background:none;border:0;
  border-left:1px solid var(--line);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.mp-toggle .ic{position:relative;width:14px;height:14px;}
.mp-toggle .ic::before,.mp-toggle .ic::after{content:"";position:absolute;
  background:var(--ink);transition:transform var(--dur-ui) var(--ease-out);}
.mp-toggle .ic::before{top:6px;left:0;width:14px;height:1.5px;}
.mp-toggle .ic::after{left:6px;top:0;width:1.5px;height:14px;}
.mp-toggle[aria-expanded="true"] .ic::after{transform:scaleY(0);}
.mp-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;}
.mp-sub{display:none;background:var(--soft);}
.mp-sub.open{display:block;}

/* Ein Schleier ueber der Seite, solange das Menue offen ist: er faengt den
   Tipp ab (und schliesst) und schluckt den Wisch, damit die Seite dahinter
   still steht. Bewusst KEIN overflow:hidden auf html/body -- das bricht das
   sticky des Kopfes, der Kopf blieb dann an seiner Dokumentstelle weit oben
   stehen und das Menue ragte samt Menueknopf aus dem Bild.
   Der Schleier steht ausserhalb des Kopfes: dessen backdrop-filter erzeugt
   einen eigenen Bezug, position:fixed haenge darin am Kopf statt am Fenster.
   Die Dockleiste weicht, sie liegt sonst ueber den letzten Eintraegen. */
.mp-scrim{position:fixed;inset:0;z-index:49;background:rgba(12,10,8,.3);
  opacity:0;visibility:hidden;touch-action:none;
  transition:opacity 260ms var(--ease-out),visibility 260ms;}
.nav-open .mp-scrim{opacity:1;visibility:visible;}
/* .on gewinnt sonst: gleiche Spezifitaet, aber weiter unten im Blatt. */
.nav-open .dockbar.on{transform:translateY(100%);}
.nav-item{position:relative;display:flex;align-items:center;height:74px;}
.nav-item > a{position:relative;padding:4px 0;font-size:13.5px;letter-spacing:.01em;color:var(--ink);}
.nav-item > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.nav-item.has-drop:hover > a::after{transform:scaleX(1);}}
/* ── MEGA-MENUE ────────────────────────────────────────────────────────────
   Statt einer schmalen Linkliste klappt die Kategorie in voller Breite auf
   und zeigt, worum es geht. Das Panel haengt an der Kopfleiste, nicht am
   Menuepunkt — deshalb steht der Menuepunkt auf position:static, damit die
   absolute Positionierung bis zum sticky <header> durchgreift. */
.nav-item.has-mega{position:static;}
.mega{position:absolute;left:0;right:0;top:100%;z-index:60;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 26px 50px rgba(20,16,12,.13);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-ui) var(--ease-out),
             transform var(--dur-ui) var(--ease-out),
             visibility var(--dur-ui);}
.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none;}
.mega-inner{padding:clamp(24px,2.8vw,38px) var(--hdr-pad) clamp(28px,3.2vw,44px);}
.mega-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;padding-bottom:15px;border-bottom:1px solid var(--ink);
  margin-bottom:clamp(20px,2.4vw,30px);}
.mega-k{font-weight:600;letter-spacing:-.025em;
  font-size:clamp(19px,1.9vw,25px);}
.mega-grid{display:grid;gap:clamp(16px,2.2vw,32px);
  grid-template-columns:repeat(3,1fr);}
.mega-grid.two{grid-template-columns:repeat(2,1fr);max-width:780px;}
.mega-card{display:block;color:var(--ink);}
.mega-shot{display:block;position:relative;overflow:hidden;aspect-ratio:3/2;
  background:var(--soft2);margin-bottom:15px;}
.mega-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform 600ms var(--ease-out);}
/* Geraetefotos sind Freisteller: sie brauchen Luft, keinen Beschnitt. */
.mega-shot.contain{background:var(--soft);}
.mega-shot.contain img{object-fit:contain;padding:16px;}
.mega-t{display:block;font-weight:500;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.018em;line-height:1.2;}
.mega-d{display:block;color:var(--muted);font-size:14px;line-height:1.5;
  margin-top:8px;}
.mega-p{display:block;color:var(--muted);font-size:13px;letter-spacing:.01em;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);}
@media (hover:hover) and (pointer:fine){
  .mega-card:hover .mega-shot img{transform:scale(1.05);}
  .mega-card:hover .mega-t{text-decoration:underline;
    text-underline-offset:4px;text-decoration-thickness:1px;}
}
.mega-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.mega a::after{display:none;}

/* LOGO */
.logo-mark{display:block;background-image:var(--logo);background-repeat:no-repeat;
  background-position:center;background-size:contain;}
.brand{align-items:center;}
.brand-logo{width:78px;height:27px;}
:root[data-theme="dark"] .brand-logo{filter:invert(1);}
.f-logo{width:128px;height:44px;filter:invert(1);}
/* Der Schriftzug soll das Bild grundieren, nicht darauf liegen. Bei .09 las
   man ihn als zweite Ueberschrift und er lief der echten in die Zeilen. */
.hero-ghost .logo-mark{width:min(1500px,155vw);aspect-ratio:1000/345;
  opacity:.032;filter:invert(1);transform:translateY(-4%);}
@media (max-width:560px){.brand-logo{width:66px;height:23px;}}

/* THEME TOGGLE */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;padding:0;border:1px solid var(--line);background:transparent;
  color:var(--ink);cursor:pointer;transition:border-color .3s,background .3s,color .3s;}
.theme-toggle:hover{border-color:var(--ink);background:var(--soft);}
.theme-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.theme-toggle svg{width:17px;height:17px;display:block;}
.theme-toggle .i-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}

/* SPRACHWAHL
   Derselbe Knopf wie der Themenschalter, nur mit Kuerzel statt Symbol: acht
   Sprachen lassen sich nicht als Piktogramm sagen, und eine Weltkugel sagt
   nicht, welche gerade gilt. Die Liste nennt jede Sprache in ihrer eigenen
   Schrift — wer kein Deutsch liest, findet "Russisch" nicht. */
.sprachwahl{position:relative;flex:none;}
.sw-knopf{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;padding:0;border:1px solid var(--line);background:transparent;
  color:var(--ink);cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  transition:transform var(--dur-press) var(--ease-out),
             border-color var(--dur-ui) ease,background var(--dur-ui) ease;}
.sw-knopf:hover{border-color:var(--ink);background:var(--soft);}
.sw-knopf:active{transform:scale(.94);}
.sw-knopf:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.sw-tafel{position:absolute;top:calc(100% + 9px);right:0;z-index:70;min-width:186px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 26px 50px rgba(20,16,12,.13);padding:6px;display:none;}
.sw-tafel.auf{display:block;}
.sw-eintrag{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:16px;padding:9px 10px;background:none;border:0;cursor:pointer;font:inherit;
  font-size:13.5px;color:var(--ink);text-align:left;}
.sw-eintrag:hover{background:var(--soft);}
.sw-eintrag[aria-current="true"]{background:var(--ink);color:var(--paper);}
.sw-eintrag:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.sw-code{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;}
.sw-eintrag[aria-current="true"] .sw-code{opacity:.8;}
/* Der Hinweis ist kein Kleingedrucktes aus Vorsicht: die Uebersetzung kommt
   aus einem Woerterbuch, nicht von einer Uebersetzerin. Bei Preisen, AGB und
   Datenschutz gilt der deutsche Wortlaut. */
.sw-hinweis{margin:4px 6px 2px;padding-top:8px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.45;color:var(--muted);}
@media (max-width:620px){.nav-right > .link-u{display:none;}}

/* HERO */
.hero{position:relative;overflow:hidden;background:var(--dark);color:#fff;
  min-height:90dvh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(60px,10vw,110px);}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(12,10,8,.78) 0%,rgba(12,10,8,.5) 44%,rgba(12,10,8,.14) 100%),
  linear-gradient(0deg,rgba(12,10,8,.55) 0%,rgba(12,10,8,0) 42%);}
.hero-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:hidden;z-index:1;}
.hero-ghost span{font-size:clamp(120px,26vw,420px);font-weight:500;letter-spacing:-.04em;
  color:rgba(255,255,255,.08);white-space:nowrap;line-height:1;transform:translateY(-4%);}
.hero-inner{position:relative;z-index:2;max-width:820px;}
.hero .eyebrow{color:rgba(255,255,255,.72);}
.hero h1,.hero h2{font-size:clamp(38px,6.2vw,86px);margin:22px 0 0;color:#fff;}
.hero .lead{font-size:clamp(17px,1.5vw,21px);color:rgba(255,255,255,.82);max-width:36ch;
  margin:26px 0 40px;line-height:1.55;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.hero .btn{border-color:#fff;background:#fff;color:var(--dark);}
.hero .btn:hover{background:transparent;color:#fff;}
.hero .btn.ghost{background:transparent;color:#fff;}
.hero .btn.ghost:hover{background:#fff;color:var(--dark);}
/* Die Belege stehen im Bild, auf der Unterkante des Hero. Der Verlauf des
   Scrims ist unten am dunkelsten — genau dort tragen weisse Ziffern. */
.hero-meta{position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,40px);
  margin-top:clamp(44px,6vw,76px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.24);}
.hero-meta .n{font-size:clamp(21px,2.1vw,30px);line-height:1;color:#fff;}
.hero-meta .t{font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.62);margin-top:9px;line-height:1.45;}

/* ── VORHER-NACHHER ────────────────────────────────────────────────────────
   Ein endloses Band aus Bildpaaren, das von selbst laeuft und sich jederzeit
   anfassen laesst. Deshalb scrollt es echt (overflow-x) statt per Animation
   verschoben zu werden — eine CSS-Animation kann man nicht greifen. Das
   Weiterlaufen uebernimmt ein Skript, das scrollLeft fortschreibt.

   Der Abstand zwischen den Karten sitzt als margin-right AN der Karte, nicht
   als gap am Band: nur dann ist eine Haelfte der Spur exakt die Haelfte ihrer
   Breite und der Ruecksprung faellt auf die Fuge statt mitten in eine Karte. */
.results{background:var(--soft);border-block:1px solid var(--line);}
.ba{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  margin-top:clamp(22px,3vw,34px);
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);}
.ba::-webkit-scrollbar{display:none;}
.ba-track{display:flex;width:max-content;}

/* ── STEUERLEISTE ─────────────────────────────────────────────────────────
   Ein Strich, der zeigt wo man ist, und zwei Pfeile. Der Strich ist 30 px
   hoch, aber nur 2 px sichtbar — sonst trifft ihn auf dem Telefon niemand. */
.ba-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,26px);
  margin-top:clamp(30px,4vw,46px);}
.ba-bar{position:relative;flex:1;height:30px;cursor:pointer;touch-action:none;}
.ba-bar::before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;
  background:color-mix(in srgb,var(--ink) 14%,transparent);}
.ba-bar-fill{position:absolute;top:14px;height:2px;left:0;width:20%;
  background:var(--ink);}
.ba-bar:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.ba-arrows{display:flex;gap:8px;flex:none;}
.ba-arrow{width:46px;height:46px;display:inline-flex;align-items:center;
  justify-content:center;background:none;border:1px solid var(--line);
  color:var(--ink);font-size:15px;line-height:1;cursor:pointer;
  transition:border-color var(--dur-ui) ease,background var(--dur-ui) ease,
             transform var(--dur-press) var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .ba-arrow:hover{border-color:var(--ink);background:var(--paper);}
}
.ba-arrow:active{transform:scale(.94);}
.ba-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.ba-card{flex:none;margin:0 clamp(16px,2vw,28px) 0 0;
  width:clamp(280px,33vw,450px);}
.ba-shot{position:relative;aspect-ratio:620/400;overflow:hidden;
  background:var(--soft2);}
.ba-shot img{width:100%;height:100%;object-fit:cover;display:block;}
/* Die Fuge zwischen beiden Haelften — im Bild ist sie unsichtbar, hier traegt
   sie die Aussage: links davor, rechts danach. */
.ba-shot::after{content:"";position:absolute;top:0;bottom:0;left:50%;
  width:1px;background:rgba(255,255,255,.9);}
.ba-l,.ba-r{position:absolute;bottom:0;z-index:1;font-weight:500;
  font-size:clamp(9.5px,.78vw,11px);
  text-transform:uppercase;letter-spacing:.15em;padding:6px 11px;
  background:var(--paper);color:var(--ink);}
.ba-l{left:0;} .ba-r{right:0;}
.ba-card figcaption{margin-top:clamp(14px,1.2vw,18px);font-weight:500;
  font-size:clamp(16px,1.35vw,19px);letter-spacing:-.018em;line-height:1.25;}
.ba-card figcaption span{display:block;margin-top:6px;
  font-weight:400;font-size:clamp(13px,1.05vw,14.5px);letter-spacing:.01em;color:var(--muted);}

/* Wer Bewegung abbestellt hat, bekommt ein Band zum Schieben. Die doppelte
   Kartenreihe braucht es dann nicht mehr. */
/* Ohne Bewegung laeuft nichts von selbst — geschoben werden darf trotzdem. */
@media (prefers-reduced-motion:reduce){
  .ba{scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;}
  .ba-card{scroll-snap-align:start;}
}

/* ── UNSER STUDIO ─────────────────────────────────────────────────────────
   Ein Mosaik statt einer Reihe: feste Zeilenhoehe, zwei Bilder greifen in
   die Nachbarzeile. Die Fotos liegen als Dateien in bilder/ — acht Stueck
   als Base64 haetten das Dokument um ein Zehntel schwerer gemacht, ohne
   dass ein Besucher der Startseite sie je braucht. */
.stu-grid{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(140px,14.5vw,210px);gap:clamp(8px,1.2vw,16px);
  margin-top:clamp(30px,4vw,48px);}
.stu-grid figure{margin:0;overflow:hidden;background:var(--soft2);}
.stu-grid img{width:100%;height:100%;object-fit:cover;display:block;}
.stu-wide{grid-column:span 2;}
.stu-tall{grid-row:span 2;}
@media (max-width:760px){
  .stu-grid{grid-template-columns:repeat(2,1fr);
    grid-auto-rows:clamp(120px,26vw,170px);}
  .stu-wide{grid-column:span 2;}
  .stu-tall{grid-row:span 2;}
}
.stu-cap{margin-top:clamp(18px,2.4vw,26px);font-size:12.5px;color:var(--muted);
  line-height:1.55;max-width:56ch;}

/* ── STIMMEN ──────────────────────────────────────────────────────────────
   Dieselbe Mechanik wie die Galerie, aber im Schritt statt im Fluss: alle
   paar Sekunden rueckt genau eine Karte nach. Ein Zitat will gelesen werden,
   und Text, der stetig wandert, liest sich nicht.

   Zwei Kartenarten wechseln sich ab. Die dunkle traegt eine echte Zuschrift
   samt Sternen; die Bildkarte traegt eine Aussage von uns ueber die Technik
   und bewusst KEIN Zitat und keinen Namen — sonst laege ein fremder Satz auf
   einem fremden Gesicht. */
.voices{background:var(--paper);}
.st{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  margin-top:clamp(22px,3vw,34px);
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);}
.st::-webkit-scrollbar{display:none;}
.st-track{display:flex;align-items:stretch;width:max-content;}

.st-card{flex:none;margin:0 clamp(14px,1.8vw,24px) 0 0;
  width:clamp(268px,25vw,340px);display:flex;flex-direction:column;}

/* Zuschrift */
.st-quote{background:var(--dark);color:var(--dark-ink);
  padding:clamp(26px,3vw,36px);flex:1;display:flex;flex-direction:column;}
.st-stars{font-size:12px;letter-spacing:.28em;color:var(--accent);}
.st-quote blockquote{margin:22px 0 0;font-size:clamp(16px,1.5vw,18px);
  line-height:1.5;letter-spacing:-.012em;color:var(--dark-ink);flex:1;}
.st-who{margin-top:26px;font-size:12.5px;line-height:1.5;
  color:var(--dark-muted);}
.st-who b{display:block;font-weight:500;color:var(--dark-ink);}

/* Bildkarte — Aussage, kein Zitat */
.st-shot{position:relative;overflow:hidden;aspect-ratio:3/4;
  background:var(--soft2);flex:1;display:flex;align-items:flex-end;
  isolation:isolate;}
.st-shot img{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;}
.st-shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,11,9,.05) 0%,rgba(14,11,9,.34) 48%,
    rgba(14,11,9,.82) 100%);}
.st-claim{position:relative;z-index:2;padding:clamp(22px,2.6vw,30px);color:#fff;}
.st-claim p{font-size:clamp(17px,1.6vw,21px);line-height:1.24;font-weight:600;
  letter-spacing:-.025em;color:#fff;}
.st-claim span{display:block;margin-top:12px;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.7);}


/* Die Google-Bewertung steht bei den Stimmen, weil sie belegt, was die
   Zuschriften behaupten. Die Zahl traegt, die Quelle steht daneben. */
.gg{display:flex;align-items:baseline;gap:clamp(10px,1.4vw,16px);
  flex-wrap:wrap;margin-top:clamp(28px,3.4vw,40px);}
/* Reines Gold auf Weiss kommt auf 1,7:1 -- die Sterne waren fuer viele
   kaum zu sehen, ausgerechnet beim Vertrauensbeleg. Gegen den Textton
   gemischt bleiben sie golden und erreichen 4,7:1. Im Dunkelmodus zieht
   die Mischung von selbst mit, weil --ink dort hell ist. */
.gg-stars{font-size:15px;letter-spacing:.2em;line-height:1;
  color:color-mix(in srgb,var(--accent) 55%,var(--ink));}
.gg-n{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;}
.gg-t{font-size:13.5px;letter-spacing:.01em;color:var(--muted);}

@media (prefers-reduced-motion:reduce){
  .st{scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;}
  .st-card{scroll-snap-align:start;}
}

/* SECTION HEADS */
.sec{padding:clamp(70px,11vw,140px) 0;}
.sec-head{margin-bottom:52px;}
.sec-head h1,.sec-head h2{font-size:clamp(30px,4.4vw,58px);font-weight:500;letter-spacing:-.025em;
  /* 1.03 liess Unterlaengen der oberen Zeile in den Gold-Marker der unteren
     ragen. 1.09 gibt gerade genug Luft, ohne die Ueberschrift auseinander
     zu ziehen. */
  line-height:1.09;max-width:18ch;text-wrap:balance;}
.sec-head p{color:var(--muted);max-width:58ch;margin-top:20px;font-size:16.5px;}

/* TREATMENT CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.card{position:relative;display:block;overflow:hidden;background:var(--soft2);
  aspect-ratio:3/4.1;color:#fff;isolation:isolate;}
.card .surface{position:absolute;inset:0;z-index:-2;transition:transform 600ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){.card:hover .surface{transform:scale(1.06);}}
.card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,16,12,.05) 0%,rgba(20,16,12,.08) 45%,rgba(20,16,12,.62) 100%);}
.card .grain{position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");}
.card .c-top{position:absolute;top:24px;left:24px;right:24px;z-index:2;display:flex;
  justify-content:space-between;align-items:flex-start;}
.card .c-idx{font-size:11px;letter-spacing:.2em;font-weight:500;opacity:.85;
  font-variant-numeric:tabular-nums;}
.card .c-price{font-size:11px;letter-spacing:.12em;font-weight:500;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);padding:6px 11px;backdrop-filter:blur(2px);}
.card .c-body{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;}
.card .c-body .k{font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:500;
  opacity:.9;}
.card .c-body h3{font-size:clamp(24px,2.3vw,32px);font-weight:500;letter-spacing:-.02em;
  margin:12px 0 10px;line-height:1.05;}
.card .c-body p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.86);max-width:32ch;
  margin-bottom:18px;}
.card .c-cta{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:500;
  display:inline-flex;gap:.6em;align-items:center;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.6);
  transition:transform var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.card:hover .c-cta{transform:translateX(4px);}}
.surf-1{background:url("/bilder/inline-1ff49418ff.webp") center/cover no-repeat,radial-gradient(120% 120% at 30% 15%,#f2e7d6 0%,var(--c1a) 40%,var(--c1b) 100%);}
.surf-2{background:url("/bilder/inline-afc8bf36a7.webp") center 20%/cover no-repeat,radial-gradient(120% 120% at 70% 20%,#f4eaea 0%,var(--c2a) 42%,var(--c2b) 100%);}
.surf-3{background:url("/bilder/inline-1246a81792.webp") center 15%/cover no-repeat,radial-gradient(120% 120% at 40% 20%,#eef0ea 0%,var(--c3a) 42%,var(--c3b) 100%);}

/* DARK STATEMENT */
.statement{background:var(--dark);color:var(--dark-ink);}
.statement .wrap{padding-top:clamp(80px,13vw,160px);padding-bottom:clamp(80px,13vw,160px);}
.statement .eyebrow{color:var(--dark-muted);}
.statement blockquote{margin:26px 0 0;font-size:clamp(26px,3.8vw,50px);font-weight:500;
  letter-spacing:-.02em;line-height:1.12;max-width:20ch;text-wrap:balance;}
.statement .who{margin-top:40px;display:flex;gap:14px;align-items:center;
  font-size:13px;letter-spacing:.03em;color:var(--dark-muted);}
.statement .who::before{content:"";width:34px;height:1px;background:var(--dark-muted);}
.statement{position:relative;overflow:hidden;}
.statement .wrap{position:relative;z-index:2;}
.statement-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1250px,112%);aspect-ratio:1000/345;opacity:.045;filter:invert(1);
  z-index:1;pointer-events:none;}
.st-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(36px,6vw,88px);align-items:end;}
.st-grid .who{margin-top:24px;}
.st-rule{width:54px;height:2px;background:var(--accent);margin-top:34px;}
.st-facts{display:grid;gap:1px;background:var(--dark-line);
  border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);}
.st-fact{background:var(--dark);padding:17px 0;display:flex;justify-content:space-between;
  align-items:baseline;gap:20px;}
.st-fact .n{font-size:clamp(21px,2.3vw,29px);font-weight:500;letter-spacing:-.02em;
  color:var(--dark-ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.st-fact .t{font-size:12.5px;color:var(--dark-muted);text-align:right;line-height:1.45;max-width:23ch;}

/* WHY — Gruende */
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);}
.reasons > :first-child{grid-column:1 / -1;}
.reasons > :first-child h3{font-size:clamp(24px,2.6vw,32px);}
.reasons > :first-child p{max-width:52ch;}
/* In den schmalen Karten schiebt margin-auto den Text nach unten. Über die
   volle Breite entsteht daraus eine Leerzone, die wie ein Fehler wirkt. */
.reasons > :first-child{min-height:0;}
.reasons > :first-child .r-rule{margin:20px 0 22px;}
.reason{background:var(--paper);padding:clamp(26px,3.2vw,40px);display:flex;flex-direction:column;
  min-height:340px;transition:background .4s;}
@media (hover:hover) and (pointer:fine){.reason:hover{background:var(--soft2);}}
.reason .r-idx{font-size:11px;letter-spacing:.2em;font-weight:500;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.reason .r-rule{width:34px;height:2px;background:var(--accent);margin:24px 0 auto;
  transform-origin:left center;transition:transform 420ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){.reason:hover .r-rule{transform:scaleX(2.3);}}
.reason h3{font-size:clamp(20px,1.9vw,25px);font-weight:500;letter-spacing:-.015em;
  margin:0 0 12px;line-height:1.15;}
.reason p{font-size:15px;color:var(--muted);line-height:1.6;}
.reason .r-proof{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:500;
  display:flex;align-items:center;gap:.7em;line-height:1.4;}


/* CTA als Panel */
.finance.cta-panel .fl{max-width:none;flex:1 1 420px;}
.finance.cta-panel .fl h3{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.025em;margin-bottom:16px;}
.finance.cta-panel .fl p{color:var(--muted);line-height:1.6;margin-bottom:30px;max-width:46ch;}
.cta-panel .fbig{text-align:right;}
.cta-panel .ct-note{font-size:12px;color:var(--muted);margin:18px 0 0;letter-spacing:.02em;}
@media (max-width:900px){
  .st-grid{grid-template-columns:1fr;align-items:start;}
  .reasons{grid-template-columns:1fr;}
  .reason{min-height:0;}
}
@media (max-width:560px){.cta-panel .fbig{text-align:left;}}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);}
.cell{background:var(--soft);padding:clamp(28px,3.4vw,44px);min-height:230px;
  display:flex;flex-direction:column;}
.cell .num{font-size:12px;letter-spacing:.2em;font-weight:500;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.cell h3{font-size:21px;font-weight:500;letter-spacing:-.01em;margin:auto 0 10px;}
.cell p{font-size:15px;color:var(--muted);line-height:1.55;}

/* FINANCE STRIP */
.finance{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:28px;border:1px solid var(--ink);padding:clamp(26px,4vw,44px);}
.finance .fl{max-width:44ch;}
.finance .fl .eyebrow{margin-bottom:14px;}
.finance .fl h3{font-size:clamp(22px,2.6vw,32px);font-weight:500;letter-spacing:-.02em;line-height:1.1;}
.finance .fbig{font-size:clamp(44px,7vw,84px);font-weight:500;letter-spacing:-.03em;line-height:.95;
  white-space:nowrap;}
.finance .fbig small{font-size:.3em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:block;margin-top:10px;font-weight:500;}

/* PRICE CALCULATOR */
.calc-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;}
.calc-region{margin-bottom:32px;}
.calc-region > .eyebrow{display:block;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.zone-wrap{display:flex;flex-wrap:wrap;gap:10px;}
.zone-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  padding:10px 15px;font-size:14px;cursor:pointer;user-select:none;transition:background .2s,color .2s,border-color .2s;
  background:var(--paper);color:var(--ink);line-height:1.2;font-family:inherit;}
.zone-chip:hover{border-color:var(--ink);}
.zone-chip .zp{font-size:11px;color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.zone-chip.sel{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.zone-chip.sel .zp{color:rgba(255,255,255,.6);}
.zone-chip .mk{width:15px;height:15px;border:1px solid currentColor;display:inline-flex;
  align-items:center;justify-content:center;font-size:10px;line-height:1;flex:none;}
.zone-chip.sel .mk::after{content:"✓";}
.zone-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.paket-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.paket-chip{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;
  padding:15px 17px;cursor:pointer;line-height:1.25;
  transition:background .2s,color .2s,border-color .2s;}
.paket-chip:hover{border-color:var(--ink);}
.paket-chip.sel{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.paket-chip .pk-n{font-size:15px;font-weight:500;}
.paket-chip .pk-p{font-size:21px;font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.paket-chip .pk-s{font-size:11.5px;color:var(--muted);letter-spacing:.02em;}
.paket-chip.sel .pk-s{color:rgba(255,255,255,.62);}
.paket-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.paket-note{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.5;}
@media (max-width:560px){.paket-wrap{grid-template-columns:1fr;}}

/* Sortierleiste ueber den Bereichen — dieselben Chips wie darunter, nur
   kleiner: sie ordnet die Liste, sie ist nicht Teil der Auswahl. */
.calc-sort{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin-bottom:28px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.cst-k{font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  font-weight:500;color:var(--muted);}
.cst-opts{display:flex;flex-wrap:wrap;gap:8px;}
.sort-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font:inherit;font-size:13px;padding:8px 13px;cursor:pointer;line-height:1.2;
  transition:background .2s,color .2s,border-color .2s;}
.sort-chip:hover{border-color:var(--ink);}
.sort-chip.sel{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.sort-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.calc-summary{position:sticky;top:98px;border:1px solid var(--ink);background:var(--paper);}
.cs-head{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:baseline;gap:12px;}
.cs-head .eyebrow{color:var(--ink);}
.cs-head .cnt{font-size:12px;color:var(--muted);letter-spacing:.03em;font-variant-numeric:tabular-nums;}
.cs-body{padding:26px;}
.cs-empty{color:var(--muted);font-size:15px;line-height:1.55;}
.cs-price{font-size:clamp(40px,6vw,60px);font-weight:500;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;}
.cs-price .cur{font-size:.42em;font-weight:500;letter-spacing:0;margin-left:.1em;}
.cs-save{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;background:var(--accent);color:var(--accent-ink);padding:6px 12px;}
.cs-lines{margin:24px 0 6px;border-top:1px solid var(--line);}
.cs-lines .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14px;font-variant-numeric:tabular-nums;}
.cs-lines .row .lbl{color:var(--muted);}
/* Ein Betrag bricht nie um. Die Ratenzeile hat ein langes Etikett -- das darf
   auf schmalen Schirmen umbrechen, die Zahl daneben nicht. */
.cs-lines .row .val{white-space:nowrap;}
.cs-lines .row.tot .lbl,.cs-lines .row.tot .val{color:var(--ink);font-weight:500;}
.cs-raten{margin-top:22px;}
.cs-raten .rt-h{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
  font-weight:500;margin-bottom:10px;}
/* Die Laufzeiten sind waehlbar, nicht nur ablesbar. Chipform wie beim
   Glow-Zusatz -- eine Auswahl sieht in diesem Rechner ueberall gleich aus. */
.cs-raten .rt-opts{display:flex;flex-wrap:wrap;gap:8px;}
.nudge{background:var(--soft);border:1px solid var(--line);padding:12px 15px;font-size:13px;
  color:var(--ink);margin-top:18px;line-height:1.45;}
.cs-note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:18px;}
.cs-cta{margin-top:22px;}
.cs-cta .btn{width:100%;}
@media (max-width:900px){
  .calc-grid{grid-template-columns:1fr;}
  .calc-summary{position:static;}
}

/* TREATMENT DETAIL */
.tdetail{border-top:1px solid var(--line);}
.treatment{padding:clamp(54px,8vw,100px) 0;border-bottom:1px solid var(--line);}
.treatment:last-child{border-bottom:0;}
.t-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
.t-kicker{color:var(--muted);margin-bottom:18px;}
.t-name{font-size:clamp(28px,3.8vw,48px);font-weight:500;letter-spacing:-.025em;line-height:1.03;text-wrap:balance;}
.t-claim{font-size:clamp(18px,1.7vw,22px);margin-top:16px;letter-spacing:-.01em;}
.t-intro{color:var(--muted);margin-top:20px;line-height:1.6;max-width:62ch;}
.t-steps{margin-top:32px;}
.t-steps{border-top:1px solid var(--line);padding-top:6px;}
.step{display:flex;gap:18px;padding:14px 0;}
.step .sn{font-size:11px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;
  flex:none;width:24px;padding-top:3px;letter-spacing:.1em;}
.step .stx b{font-weight:500;display:block;margin-bottom:3px;}
.step .stx span{color:var(--muted);font-size:14.5px;line-height:1.5;}
.facts{border:1px solid var(--line);}
.fact{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;
  border-bottom:1px solid var(--line);font-size:14px;}
.fact:last-child{border-bottom:0;}
.fact .fl{color:var(--muted);}
.fact .fv{text-align:right;font-weight:500;}
.honest{margin-top:22px;border:1px solid var(--ink);padding:18px 20px;font-size:14px;line-height:1.55;}
.honest b{font-weight:500;}
.mini-table{margin-top:18px;width:100%;border-collapse:collapse;font-size:13.5px;}
.mini-table td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.mini-table tr:last-child td{border-bottom:0;}
.mini-table td:first-child{padding-right:16px;font-weight:500;}
.mini-table td:last-child{color:var(--muted);text-align:right;}
.serums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:26px;}
.serum{background:var(--paper);padding:22px;}
.serum .snm{font-size:17px;font-weight:500;}
.serum .sr{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:5px 0 10px;}
.serum p{font-size:13.5px;color:var(--muted);line-height:1.5;}

/* Kernfakten je Behandlung — das Wichtigste zuerst */
.t-head{max-width:64ch;margin-bottom:clamp(26px,3.2vw,38px);}
.t-key{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-bottom:clamp(34px,4.5vw,54px);}
.tk{background:var(--paper);padding:22px 22px 24px;}
.tk-n{font-size:clamp(23px,2.5vw,33px);font-weight:500;letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.tk-t{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
  margin-top:11px;font-weight:500;line-height:1.5;}
@media (max-width:900px){.t-key{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.t-key{grid-template-columns:1fr;}}

/* GERÄTE */
.dev{border-top:1px solid var(--line);padding:clamp(52px,7.5vw,96px) 0;}
.dev:first-of-type{border-top:0;padding-top:0;}
.dev-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,72px);align-items:start;}
.dev-stage{position:static;display:flex;align-items:center;justify-content:center;}
.dev-stage img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;}
.dev-name{font-size:clamp(26px,3.4vw,42px);font-weight:500;letter-spacing:-.025em;
  line-height:1.05;margin:14px 0 0;}
.dev-claim{font-size:clamp(17px,1.6vw,20px);margin-top:14px;letter-spacing:-.01em;}
.dev-body{color:var(--muted);line-height:1.65;margin-top:18px;max-width:64ch;}
.dev .t-key{grid-template-columns:repeat(2,1fr);margin:28px 0 0;}
.dev .facts{margin-top:26px;}
.dev-sub{margin-top:clamp(34px,5vw,56px);}
.dev-use{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.dev-use a{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;
  border:1px solid var(--line);padding:9px 14px;transition:border-color .3s,background .3s;}
.dev-use a:hover{border-color:var(--ink);background:var(--soft);}
.dev-wide{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:20px;
  align-items:center;}
.dev-link{margin-top:18px;}
@media (max-width:900px){
  .dev-grid{grid-template-columns:1fr;}
  .dev-stage img{max-width:min(100%,420px);margin-inline:auto;}
}
@media (max-width:560px){.dev-wide{grid-template-columns:1fr;}}

/* PRICING EXPLAINER */
.pi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.pi{background:var(--soft);padding:clamp(24px,3vw,36px);}
.pi .pk{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:500;}
.pi h4{font-size:20px;font-weight:500;margin:12px 0 8px;letter-spacing:-.01em;}
.pi p{color:var(--muted);font-size:15px;line-height:1.55;}
.cats{border:1px solid var(--line);}
.cat{display:grid;grid-template-columns:auto 1fr auto;gap:4px 18px;align-items:center;
  padding:15px 20px;border-bottom:1px solid var(--line);}
.cat:last-child{border-bottom:0;}
.cat .cl{font-size:20px;font-weight:500;width:34px;}
.cat .cd{color:var(--muted);font-size:14.5px;}
.cat .cp{font-weight:500;font-variant-numeric:tabular-nums;}
/* Die vollstaendige Bereichsliste. Sie steht unter der Zeile statt in .cd,
   damit Kategorie, Charakter und Preis in einer Zeile lesbar bleiben. */
.cat .cz{grid-column:2 / -1;color:var(--muted);font-size:13px;line-height:1.65;}
.staffel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stf{background:var(--soft);padding:clamp(22px,3vw,34px);}
.stf .pct{font-size:clamp(34px,4vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1;}
.stf .cond{color:var(--muted);font-size:14px;margin-top:8px;}
.raten-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.rc{background:var(--soft);padding:22px;}
.rc .rm{font-size:22px;font-weight:500;}
.rc .ra{color:var(--muted);font-size:13px;margin-top:6px;}
.sub-eyebrow{display:block;margin-bottom:18px;}

/* PACKAGES */
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.pack .pold{display:inline-block;margin-left:10px;font-size:15px;color:var(--muted);text-decoration:line-through;letter-spacing:0;vertical-align:middle;font-weight:400;}
.pack.featured .pold{color:var(--dark-muted);}
.pack .psave{display:inline-block;margin-top:14px;background:var(--accent);color:var(--accent-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:6px 12px;align-self:flex-start;}
.pack{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;position:relative;}
.pack.featured{background:var(--dark);color:var(--dark-ink);}
.pack .pn{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;}
.pack .pp{font-size:32px;font-weight:500;letter-spacing:-.02em;margin:16px 0 2px;font-variant-numeric:tabular-nums;}
.pack .per{font-size:12.5px;color:var(--muted);}
.pack.featured .per{color:var(--dark-muted);}
.pack .pnote{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.5;flex:1;}
.pack.featured .pnote{color:var(--dark-muted);}
.pack .pfin{font-size:12px;color:var(--muted);margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.pack.featured .pfin{border-color:var(--dark-line);color:var(--dark-muted);}
.pack .ptag{position:absolute;top:0;right:0;background:var(--accent);color:var(--accent-ink);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;}
.pack.featured .ptag{background:var(--accent);color:var(--accent-ink);}

/* FAQ */
.faq-group{margin-top:8px;}
.faq-group + .faq-group{margin-top:44px;}
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;
  padding:22px 0;display:flex;justify-content:space-between;gap:24px;align-items:center;
  font-size:clamp(16px,1.5vw,18px);color:var(--ink);letter-spacing:-.01em;}
.faq-q .ic{flex:none;width:16px;height:16px;position:relative;}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--ink);transition:transform .3s;}
.faq-q .ic::before{top:7px;left:0;width:16px;height:1.5px;}
.faq-q .ic::after{left:7px;top:0;width:1.5px;height:16px;}
.faq-item.open .faq-q .ic::after{transform:scaleY(0);}
.faq-a{height:0;overflow:hidden;transition:height 280ms var(--ease-out);}
.faq-a .inner{padding:0 0 24px;color:var(--muted);line-height:1.6;max-width:76ch;font-size:15.5px;}

@media (max-width:900px){
  .t-grid{grid-template-columns:1fr;gap:26px;}
  .serums{grid-template-columns:1fr 1fr;}
  .pi-grid{grid-template-columns:1fr;}
  .staffel{grid-template-columns:1fr;}
  .raten-row{grid-template-columns:1fr 1fr;}
  .packs{grid-template-columns:1fr 1fr;}
  .cat{grid-template-columns:auto 1fr;}
  .cat .cp{grid-column:1 / -1;text-align:left;}
  .cat .cz{grid-column:1 / -1;}
}
@media (max-width:560px){
  .serums{grid-template-columns:1fr;}
  .packs{grid-template-columns:1fr;}
}

.ptable{width:100%;border-collapse:collapse;border:1px solid var(--line);}
.ptable th,.ptable td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.5px;}
.ptable th{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:500;}
.ptable td:first-child{font-weight:500;}
.ptable td:nth-child(2),.ptable td:nth-child(3),.ptable th:nth-child(2),.ptable th:nth-child(3){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ptable td:nth-child(3){font-weight:500;}
.ptable tbody tr:last-child td{border-bottom:0;}

.glow-cross{margin-top:24px;border:1px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--paper));padding:18px;}
.gx-head{font-size:14px;font-weight:500;}
.gx-sub{font-size:13px;color:var(--muted);margin:5px 0 14px;line-height:1.45;}
.gx-opts{display:flex;flex-wrap:wrap;gap:8px;}
.glow-chip{border:1px solid var(--line);background:var(--paper);font:inherit;font-size:13px;
  padding:9px 13px;cursor:pointer;color:var(--ink);transition:background .2s,color .2s,border-color .2s;}
.glow-chip:hover{border-color:var(--accent);}
.glow-chip.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:500;}

/* CTA */
.cta{text-align:center;}
.cta h2{font-size:clamp(32px,5.2vw,72px);font-weight:500;letter-spacing:-.03em;line-height:1.02;
  max-width:16ch;margin:20px auto 0;text-wrap:balance;}
.cta p{color:var(--muted);max-width:44ch;margin:24px auto 40px;}
.cta .hero-actions{justify-content:center;}

/* FOOTER */
footer{background:var(--dark);color:var(--dark-ink);}
footer .wrap{padding-top:clamp(64px,9vw,110px);padding-bottom:44px;}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:56px;border-bottom:1px solid var(--dark-line);}
.f-brand{font-size:30px;font-weight:500;letter-spacing:-.01em;}
.f-brand + p{color:var(--dark-muted);max-width:32ch;margin-top:18px;font-size:15px;line-height:1.6;}
.f-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--dark-muted);
  font-weight:500;margin-bottom:20px;}
.f-col a,.f-col p{display:block;font-size:15px;color:var(--dark-ink);margin-bottom:12px;
  opacity:.9;}
.f-col a:hover{opacity:.6;}
.f-note{color:var(--dark-muted);font-size:12px;}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding-top:28px;font-size:12px;color:var(--dark-muted);letter-spacing:.03em;}
.f-bottom a{color:var(--dark-muted);}
.f-bottom a:hover{color:var(--dark-ink);}
.tag{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:3px 8px;margin-left:8px;vertical-align:middle;}

/* reveal */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}
  .card .surface{transition:none;}}

@media (max-width:900px){
  .nav-links{display:none;}
  .menu-btn{display:inline-flex;}
  .cards{grid-template-columns:1fr;}
  .grid3{grid-template-columns:1fr;}
  .f-top{grid-template-columns:1fr;gap:36px;}
  .hero-meta{gap:24px;}
}
@media (max-width:560px){
  .hero-ghost .logo-mark{width:195vw;}
  .card{aspect-ratio:4/4.4;}
  .finance{flex-direction:column;align-items:flex-start;}
}
/* ── DRUCKFEEDBACK ───────────────────────────────────────────────────────────
   Apple: auf pointer-down reagieren, nicht auf release. Ohne :active-Zustand
   fuehlt sich jedes Element tot an, egal wie schnell der Rest ist. */
.btn{transition:transform var(--dur-press) var(--ease-out),background var(--dur-ui) ease,
  color var(--dur-ui) ease,border-color var(--dur-ui) ease;}
.btn:active{transform:scale(.97);}
.menu-btn{transition:transform var(--dur-press) var(--ease-out),background var(--dur-ui) ease;}
.menu-btn:active{transform:scale(.97);}
.theme-toggle{transition:transform var(--dur-press) var(--ease-out),
  border-color var(--dur-ui) ease,background var(--dur-ui) ease,color var(--dur-ui) ease;}
.theme-toggle:active{transform:scale(.94);}
.zone-chip{transition:transform var(--dur-press) var(--ease-out),background var(--dur-ui) ease,
  color var(--dur-ui) ease,border-color var(--dur-ui) ease;}
.zone-chip:active{transform:scale(.97);}
.paket-chip{transition:transform var(--dur-press) var(--ease-out),background var(--dur-ui) ease,
  color var(--dur-ui) ease,border-color var(--dur-ui) ease;}
.paket-chip:active{transform:scale(.985);}
.glow-chip{transition:transform var(--dur-press) var(--ease-out),background var(--dur-ui) ease,
  color var(--dur-ui) ease,border-color var(--dur-ui) ease;}
.glow-chip:active{transform:scale(.97);}
.dev-use a{transition:transform var(--dur-press) var(--ease-out),
  border-color var(--dur-ui) ease,background var(--dur-ui) ease;}
.dev-use a:active{transform:scale(.97);}
.card{transition:transform var(--dur-press) var(--ease-out);}
.card:active{transform:scale(.995);}
.faq-q .ic{transition:transform var(--dur-press) var(--ease-out);}
.faq-q:active .ic{transform:scale(.88);}

/* Preis quittiert den Klick — nur Opazitaet, das passiert Dutzende Male */
.cs-price{animation:preisWechsel 200ms var(--ease-out);}
@keyframes preisWechsel{from{opacity:.35;}}

/* Marquee haelt an, wenn man hinschaut */
@media (hover:hover) and (pointer:fine){
}

/* Themewechsel ueberblenden statt hart umschalten */
body,header,footer,.statement,.tdetail{
  transition:background-color 260ms ease,color 260ms ease,border-color 260ms ease;}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────────
   Sanfter, nicht aus: Opazitaet bleibt, Bewegung geht. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;transition:opacity 200ms ease;}
  .card .surface,.card:hover .surface{transform:none;transition:none;}
  .card:hover .c-cta,.link-u:hover{transform:none;}
  .reason .r-rule,.reason:hover .r-rule{transform:none;transition:none;}
  .mega,.nav-item.has-mega:hover .mega{transform:none;}
  .mega-card:hover .mega-shot img{transform:none;}
  .nav-links a::after,.nav-item > a::after{transition:none;}
  .faq-a,.mobile-panel{transition:none;}
  .cs-price{animation:none;}
  .btn:active,.menu-btn:active,.theme-toggle:active,.konto-icon:active,
  .zone-chip:active,
  .paket-chip:active,.glow-chip:active,.dev-use a:active,.card:active,
  .faq-q:active .ic{transform:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   UX-REDESIGN — CTA-Hierarchie, sichtbarer Weg zum Termin, A11y
   Bewusst am Ende des Stylesheets: gleiche Spezifitaet, spaeter definiert.
   ══════════════════════════════════════════════════════════════════════════ */

p,.t-intro,.dev-body,.faq-a .inner{text-wrap:pretty;}


/* ══════════════════════════════════════════════════════════════════════════
   TASTE-PASS — Ruhe in die Auszeichnungen
   Die Seite trug rund 60 Versalien-Labels. Was Inhalt traegt, ist jetzt eine
   Zwischenueberschrift; was nur dekorierte, ist weg.
   ══════════════════════════════════════════════════════════════════════════ */

/* Aus dem Versalien-Eyebrow wird eine lesbare Zwischenzeile */
.sub-h{display:block;font-size:clamp(17px,1.6vw,20px);font-weight:500;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:18px;line-height:1.25;
  text-transform:none;}

/* Funktionale Formular-Labels im Rechner: leiser, aber lesbar */
.calc-region > .eyebrow,.cs-head .eyebrow{font-size:12.5px;text-transform:none;
  letter-spacing:.01em;font-weight:500;color:var(--ink);}

/* Kontaktkarten: Label ohne Versalien-Sperrung */
.cell .num{font-size:13px;text-transform:none;letter-spacing:.01em;
  color:var(--muted);font-weight:400;}

/* ── STANDORT IM KONTAKT ───────────────────────────────────────────────────
   Karte, Anschrift und die zwei Wege dorthin. 16:9 statt eines Quadrats: die
   Karte belegt, wo das Studio steht, und ist nicht der Grund, warum jemand
   die Seite geoeffnet hat.

   Der Platzhalter ist bewusst kein graues Nichts, sondern traegt schon die
   Anschrift. Wer die Karte nie laedt -- und das ist der Normalfall -- hat
   damit trotzdem alles, was er zum Herfinden braucht. */
/* Luft ueber der Karte. Vorher 1px, damit die Haarlinie des Rasters darueber
   durchlief -- das machte aus Kacheln und Karte einen einzigen Block, und die
   Karte sah aus wie eine vierte, umgefallene Kachel. Sie ist aber etwas
   anderes als die drei Textfelder und darf als eigener Gegenstand stehen. */
.ort{margin-top:clamp(28px,3.6vw,52px);}
/* Hoehe per clamp statt aspect-ratio mit max-height: das Verhaeltnis haette
   die Breite an die gedeckelte Hoehe gebunden -- die Karte stand dann 747 px
   breit in einer 1200 px breiten Spalte und sah aus wie danebengerutscht.
   Jetzt fuellt sie die Spalte, die Hoehe waechst mit und hoert bei 420 auf. */
.ort-karte{position:relative;width:100%;height:clamp(240px,32vw,420px);
  background:var(--soft);border:1px solid var(--line);overflow:hidden;}
.ort-karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ort-platz{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;
  padding:24px;}
.ort-adresse{font-size:clamp(17px,1.8vw,21px);line-height:1.5;margin:0;
  color:var(--ink);}
.ort-hinweis{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;
  max-width:44ch;}
.ort-wege{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(18px,2vw,28px);}
.ort-apple{font-size:14px;color:var(--ink);border-bottom:1px solid var(--line);
  padding-bottom:2px;}
@media (hover:hover) and (pointer:fine){
  .ort-apple:hover{border-bottom-color:var(--ink);}}

/* Belege-Strip unter dem Hero (ersetzt Marquee und Hero-Fakten) */

/* ── KOPFLEISTE: ohne Weichzeichner, ohne Trennlinie ─────────────────────
   Oben deckend genug fuer den Kontrast ueber dem dunklen Hero, beim Scrollen
   auf 30 Prozent. Trennung uebernimmt allein der getoente Schatten. */
header{
  border-bottom:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:background-color 280ms ease,box-shadow 280ms ease;}
header.scrolled{
  background:color-mix(in srgb,var(--paper) 50%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 6%,transparent);}

/* Das geschlossene Mobilmenue ist 1px hoch, hat weissen Volltongrund und
   einen transparenten 1px-Rahmen. Bei background-clip:border-box wird der
   Grund unter dem Rahmen mitgemalt — das ergab die weisse Linie unter der
   Kopfleiste. Sichtbar wurde sie erst, seit die Leiste durchscheinend ist. */
.mobile-panel{background-clip:padding-box;}
@media (prefers-reduced-motion:reduce){header{transition:none;}}

/* Auf der Geraeteseite bestimmte die Breite die Groesse. Mit den neuen,
   hohen Freistellern wurde daraus ein ueberdimensionales Bild. Jetzt
   begrenzt die Hoehe, die Breite folgt.
   Der Textblock daneben ist deutlich hoeher als jedes sinnvolle Bildmass.
   Das Geraet steht deshalb ruhig auf halber Hoehe des Textes, so gross wie
   es sein kann, ohne dass man es zum Betrachten zerschneiden muesste. */
.dev-grid{align-items:center;}
.dev-grid .dev-stage{position:static;}
.dev-grid .dev-stage img{width:auto;max-width:100%;
  height:min(74vh,720px);object-fit:contain;margin-inline:auto;}
@media (max-width:900px){
  .dev-grid .dev-stage img{height:clamp(300px,52vw,420px);}
}

/* Band innerhalb einer Behandlungsseite: randlos ueber die Spaltenbreite */
.t-band{margin-bottom:clamp(34px,4.5vw,52px);}
.t-band > .wrap{padding-inline:clamp(26px,4vw,52px);
  min-height:clamp(300px,34vw,430px);}
.t-band .t-name,.t-band .t-claim{color:#fff;}
.t-band .t-claim{color:rgba(255,255,255,.85);}

/* ── EDITORIAL-BAND ───────────────────────────────────────────────────────
   Die Bildsprache der Behandlungskarten, auf ganze Sektionen uebertragen:
   Foto vollflaechig, dunkler Verlauf darueber, Text darauf. Die Verlaufs-
   richtung wechselt von Band zu Band, damit die Wiederholung Rhythmus
   ergibt statt Schablone. */
.band{position:relative;overflow:hidden;background:var(--dark);color:#fff;
  isolation:isolate;}
.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;}
.band::after{content:"";position:absolute;inset:0;z-index:-1;}
.band.scrim-l::after{background:linear-gradient(90deg,
  rgba(18,15,11,.86) 0%,rgba(18,15,11,.62) 42%,rgba(18,15,11,.14) 100%);}
.band.scrim-r::after{background:linear-gradient(90deg,
  rgba(18,15,11,.14) 0%,rgba(18,15,11,.6) 52%,rgba(18,15,11,.86) 100%);}
.band.scrim-b::after{background:linear-gradient(180deg,
  rgba(18,15,11,.12) 0%,rgba(18,15,11,.4) 48%,rgba(18,15,11,.88) 100%);}
.band > .wrap{position:relative;z-index:1;display:flex;align-items:center;
  padding-block:clamp(64px,9vw,116px);
  min-height:clamp(360px,42vw,540px);}
.band.tall > .wrap{min-height:clamp(440px,52vw,660px);}
.band.bottom > .wrap{align-items:flex-end;}
.band-inner{max-width:46ch;}
.band.right .band-inner{margin-left:auto;}
.band h2,.band h3{color:#fff;}
.band p{color:rgba(255,255,255,.85);}
.band .eyebrow{color:rgba(255,255,255,.72);}
.band .btn.second{color:#fff;border-color:rgba(255,255,255,.7);}
@media (hover:hover) and (pointer:fine){
  .band .btn.second:hover{background:#fff;color:var(--dark);border-color:#fff;}}
.band-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;}

/* GUTSCHEIN
   Die Karte steht neben dem Text, nicht darunter und nicht darauf. Drei
   Anlaeufe haben den Rahmen abgesteckt, in dem das ueberhaupt geht:

   Ueber die volle Breite war sie 960 px hoch und fuellte ein ganzes
   Bildfenster -- als Bild neben einem Satz zu viel Gewicht.

   Als Grund UNTER dem Text war sie unbrauchbar: die Karte ist selbst ein
   fertiger Satzspiegel mit Rahmen, mittiger Wortmarke, mittigem GUTSCHEIN
   und mittigem Wertfeld. Zwei mittige Satzspiegel uebereinander lesen sich
   als Fehler.

   Bleibt: begrenzte Breite, ganze Karte, zurueckgenommen. .72 laesst sie in
   den Hintergrund treten, ohne dass eine Linie verloren geht -- sie ist der
   Beleg fuer das, was der Text daneben behauptet, nicht sein Konkurrent. */
#gutschein{padding-block:clamp(52px,6.5vw,96px);}
#gutschein .wrap{max-width:1440px;}
.gs{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,56px);
  align-items:center;}
.gs-karte{display:block;width:100%;height:auto;opacity:.72;}
.gs-text h2{font-size:clamp(28px,3.4vw,46px);font-weight:500;letter-spacing:-.025em;
  line-height:1.06;}
.gs-text p{color:var(--muted);margin-top:20px;font-size:16.5px;max-width:44ch;}
@media (max-width:860px){.gs{grid-template-columns:1fr;gap:28px;}}
.band-note{font-size:13px;color:rgba(255,255,255,.66);margin-top:20px;}
.band-preis{font-size:clamp(40px,6vw,76px);font-weight:600;letter-spacing:-.035em;
  line-height:.95;margin-bottom:18px;}
.band-preis small{display:block;font-size:.2em;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:14px;}
@media (max-width:760px){
  .band-inner,.band.right .band-inner{max-width:none;margin-left:0;}
  .band.scrim-l::after,.band.scrim-r::after,.band.scrim-b::after{
    background:linear-gradient(180deg,rgba(18,15,11,.55) 0%,rgba(18,15,11,.86) 100%);}
}

/* ── VERGLEICH ────────────────────────────────────────────────────────────
   Zwei Listen nebeneinander zwingen den Leser, selbst zu paaren. Als Tabelle
   steht jede Aussage neben ihrem Gegenstueck, Zeile fuer Zeile. Die eigene
   Spalte liegt als heller Block auf dem warmen Grau der Sektion — sie wird
   ueber Papier hervorgehoben, nicht ueber Farbe. Gold bleibt der Buchung. */
.compare{background:var(--soft);border-block:1px solid var(--line);}
.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;}

.cmp-table{width:100%;border-collapse:collapse;}
.cmp-table thead th{text-align:left;vertical-align:bottom;
  font-weight:600;letter-spacing:-.025em;
  font-size:clamp(19px,2vw,26px);line-height:1.15;
  padding:clamp(20px,2.4vw,28px) clamp(18px,2vw,26px);}
.cmp-table thead th.cmp-crit{padding-left:0;}
.cmp-table th[scope="row"]{text-align:left;vertical-align:top;width:23%;
  font-weight:500;letter-spacing:-.018em;
  font-size:clamp(15px,1.4vw,17.5px);line-height:1.25;
  padding:clamp(20px,2.3vw,26px) clamp(20px,2vw,28px) clamp(20px,2.3vw,26px) 0;}
.cmp-table td{vertical-align:top;font-size:14.5px;line-height:1.5;
  padding:clamp(20px,2.3vw,26px) clamp(18px,2vw,26px);}
.cmp-table tbody tr{border-top:1px solid var(--line);}
.cmp-table tbody tr:last-child{border-bottom:1px solid var(--line);}

/* Die eigene Spalte: heller Block ueber die volle Tabellenhoehe */
.cmp-table .cmp-us{background:var(--paper);}
/* Im Dunkelmodus liegen --soft und --soft2 nur vier Prozent auseinander —
   die Spalte war praktisch unsichtbar. Sie wird stattdessen aufgehellt. */
:root[data-theme="dark"] .cmp-table .cmp-us{
  background:color-mix(in srgb,var(--ink) 10%,var(--soft));}
.cmp-table td.cmp-them{color:var(--muted);}
.cmp-table thead th.cmp-them{color:var(--muted);}

.cmp-cell{display:flex;gap:13px;align-items:flex-start;}
.cmp-mark{flex:none;width:15px;font-size:14px;line-height:1.35;}
.cmp-mark.yes{color:var(--pos);}
.cmp-mark.no{color:var(--neg);}
.cmp-sub{display:block;margin-top:8px;font-size:13.5px;color:var(--muted);
  padding-left:14px;border-left:1px solid var(--line);line-height:1.45;}
.cmp-sub + .cmp-sub{margin-top:5px;}

.cmp-cta{margin-top:clamp(28px,3.5vw,38px);display:grid;gap:14px;
  justify-items:start;}
.cmp-note{font-size:13px;color:var(--muted);line-height:1.5;}

/* Schmal: aus der Tabelle wird ein Stapel. Die Spaltenkoepfe wandern als
   kleine Marke in die Zellen, sonst weiss niemand mehr, wer was sagt. */
@media (max-width:820px){
  .cmp-table,.cmp-table tbody,.cmp-table tr,
  .cmp-table th,.cmp-table td{display:block;width:auto;}
  .cmp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);}
  .cmp-table tbody tr{border-top:1px solid var(--ink);
    padding:clamp(20px,4vw,26px) 0;}
  .cmp-table tbody tr:last-child{border-bottom:1px solid var(--ink);}
  /* width:auto aus der Sammelregel oben greift hier nicht: die 23 Prozent
     stehen an einem Selektor mit hoeherer Spezifitaet. */
  .cmp-table th[scope="row"]{width:auto;padding:0 0 14px;font-size:18px;}
  .cmp-table td{padding:0;}
  .cmp-table td.cmp-us{background:var(--paper);padding:15px 17px;}
  .cmp-table td.cmp-them{margin-top:12px;padding:0 17px;}
  .cmp-table td::before{content:attr(data-col);display:block;
    font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
    color:var(--muted);margin-bottom:8px;}
}

/* ── KOPFLEISTE UEBER DIE VOLLE BREITE ────────────────────────────────────
   Logo an die linke Kante, Termin-Button und Themenschalter an die rechte.
   Nur die Leiste bricht aus dem zentrierten Satzspiegel aus; der restliche
   Seiteninhalt behaelt seine 1280er Breite. Der Innenabstand bleibt, damit
   nichts am Bildschirmrand klebt. */
header{--hdr-pad:clamp(18px,3vw,44px);}
header > .wrap{max-width:none;padding-inline:var(--hdr-pad);}
/* Mobilmenue an derselben Kante ausrichten wie die Leiste darueber */
.mobile-panel a{padding-inline:var(--hdr-pad);}
.mobile-panel a.sub{padding-left:calc(var(--hdr-pad) + 18px);}

/* Aufklappmenues waren nur per Maus erreichbar */
.nav-item.has-drop:focus-within > a::after{transform:scaleX(1);}

/* ── EINE REGEL FUER VERSALIEN ─────────────────────────────────────────────
   Versalien mit Sperrung bleiben den interaktiven Elementen vorbehalten
   (Buttons, Navigation, Footer-Spalten). Alles Informative laeuft in
   Satzschreibung. Vorher war beides gemischt, das erzeugte die typische
   durchgaengig geschriene Textur. */
.ps-cost,.tk-t,.serum .sr,.pi .pk,.card .c-body .k,.cs-raten .rt-h,.book-side .bs-h,
.dockbar .dk-k{text-transform:none;letter-spacing:.01em;}
.ps-cost,.tk-t{font-size:13px;font-weight:400;color:var(--muted);}
.card .c-body .k{font-size:13px;opacity:.82;}
.serum .sr,.pi .pk,.cs-raten .rt-h,.book-side .bs-h,.dockbar .dk-k{font-size:12.5px;}

/* Belegzeile der Gruende ohne Punkt */
.reason .r-proof{color:var(--muted);text-transform:none;letter-spacing:.01em;
  font-size:13px;font-weight:400;}

/* Gruende-Sektion bricht ab Tablet auf eine Spalte */
@media (max-width:760px){
  .reasons{grid-template-columns:1fr;}
  .reasons > :first-child{grid-column:auto;}
}

/* ── CTA-HIERARCHIE ────────────────────────────────────────────────────────
   Vorher waren Primaer- und Sekundaeraktion optisch gleich stark, das Gold
   war reine Dekoration. Jetzt drei klar getrennte Stufen:
     1. .btn.primary — Gold, fuehrt IMMER zur Buchung. Max. einer pro Blick.
     2. .btn         — Ink/Outline. Zweitwichtigste Aktion (Preis berechnen).
     3. .link-u      — Textlink. Alles Weiterfuehrende.
   Das Gold gehoert ab jetzt ausschliesslich der Buchung. */
.btn{min-height:52px;}
.btn .arw{display:inline-block;transition:transform var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.btn:hover .arw{transform:translateX(4px);}}

.btn.primary,.hero .btn.primary,.statement .btn.primary{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  font-size:13px;letter-spacing:.13em;padding:18px 34px;min-height:56px;
  box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 32%,transparent);}
@media (hover:hover) and (pointer:fine){
  .btn.primary:hover,.hero .btn.primary:hover,.statement .btn.primary:hover{
    background:color-mix(in srgb,var(--accent) 84%,#fff);
    border-color:color-mix(in srgb,var(--accent) 84%,#fff);
    color:var(--accent-ink);
    box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 42%,transparent);}
}
.btn.primary .sub{display:block;font-size:9.5px;letter-spacing:.14em;opacity:.72;
  margin-top:3px;font-weight:500;}

/* Sekundaer bleibt Ink, wird aber als Outline gefuehrt, damit Gold allein steht */
.btn.second,.hero .btn.second{background:transparent;color:var(--ink);border-color:var(--ink);}
.hero .btn.second{color:#fff;border-color:rgba(255,255,255,.7);}
@media (hover:hover) and (pointer:fine){
  .btn.second:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .hero .btn.second:hover{background:#fff;color:var(--dark);border-color:#fff;}
}

/* ── FOKUS ─────────────────────────────────────────────────────────────────
   Fehlte durchgaengig. Gold als Fokusfarbe, weil es auf hell UND dunkel traegt. */
.btn:focus-visible,.link-u:focus-visible,.faq-q:focus-visible,.menu-btn:focus-visible,
.nav-links a:focus-visible,.nav-item > a:focus-visible,.mega a:focus-visible,
.mobile-panel a:focus-visible,.dev-use a:focus-visible,.f-col a:focus-visible,
.f-bottom a:focus-visible,.announce-link:focus-visible,.pstep-link:focus-visible,
.cs-alt:focus-visible,.dockbar a:focus-visible,.cs-reset:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;}

/* ── SKIP-LINK ─────────────────────────────────────────────────────────────*/
.skip{position:fixed;top:0;left:-9999px;z-index:200;background:var(--ink);color:var(--paper);
  padding:15px 24px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.skip:focus{left:0;}

/* ── ANNOUNCEMENT: nennt das staerkste Angebot, war aber nicht klickbar ─────*/
.announce{padding:0;}
.announce-link{display:flex;align-items:center;justify-content:center;gap:.6em;
  min-height:44px;padding:11px 16px;color:var(--dark-ink);text-align:center;
  transition:background var(--dur-ui) ease;}
@media (hover:hover) and (pointer:fine){.announce-link:hover{background:#000;}}
.announce-link b{font-weight:500;color:var(--accent);}
.announce-link .arw{transition:transform var(--dur-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.announce-link:hover .arw{transform:translateX(3px);}}

@media (max-width:560px){
  .announce-link{gap:.4em;font-size:11px;letter-spacing:.1em;}
  .announce-link .a-mid{display:none;}
}
@media (max-width:380px){.announce-link .a-act{display:none;}}

.mobile-panel a.mp-cta{background:var(--accent);color:var(--accent-ink);font-weight:500;
  border-bottom-color:var(--accent);}

/* ── WEG ZUM TERMIN — 3 Schritte, damit der Kaufweg sichtbar ist ────────────*/
.path{background:var(--soft);border-block:1px solid var(--line);}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);}
.pstep{background:var(--paper);padding:clamp(26px,3.2vw,38px);
  display:flex;flex-direction:column;transition:background var(--dur-ui) ease;}
@media (hover:hover) and (pointer:fine){.pstep:hover{background:var(--soft2);}}
.pstep .ps-n{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;border:1px solid var(--line);font-size:12px;
  font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--muted);}
.pstep.now .ps-n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.pstep h3{font-size:clamp(20px,2vw,25px);margin:22px 0 10px;line-height:1.15;}
.pstep p{font-size:14.5px;color:var(--muted);line-height:1.6;flex:1;}
.pstep .ps-cost{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:500;
  display:flex;align-items:center;gap:.7em;line-height:1.4;}

.pstep .ps-go{margin-top:20px;}
.path-cta{margin-top:clamp(34px,5vw,52px);display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.path-cta .note{font-size:13px;color:var(--muted);}
@media (max-width:900px){.path-grid{grid-template-columns:1fr;}}


/* ── SEKTIONEN AUF EINEM FOTO ─────────────────────────────────────────────
   Statt auf Papier liegt die Sektion auf einem Bild. Weil hier alles ueber
   Token laeuft, genuegt es, die Token auf der Sektion zu drehen: Ziffern,
   Haarlinien, Knoepfe und die Vergleichstabelle folgen von selbst. Dieselbe
   Rechnung, die beim Umbau auf Schwarz-Weiss aufgegangen ist. */
.bg-foto{
  position:relative;isolation:isolate;overflow:hidden;border-block:0;
  background:#0f0d0c;color:#f4f3f1;
  --paper:#0f0d0c; --ink:#f4f3f1; --muted:#c6c2bc;
  --line:rgba(255,255,255,.22); --soft:transparent; --soft2:rgba(255,255,255,.07);
  --ghost:rgba(255,255,255,.05);
  --accent:#f4f3f1; --accent-ink:#101010;
  --pos:#f4f3f1; --neg:#9c958e;
}
.sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
/* Auf schmalen Geraeten wird die Sektion sehr hoch. object-fit:cover schnitte
   das Bild dann zu einem abstrakten Streifen -- man saehe Haut, aber nicht
   mehr, wovon. Also bleibt es oben stehen und laeuft nach unten aus. */
@media (max-width:760px){
  .sec-bg{height:min(62vh,500px);
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 58%,transparent 100%);}
}
/* Oben offener als unten: der Kopf der Sektion darf im Bild stehen, der
   Textblock darunter braucht den ruhigeren Grund. */
.bg-foto::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(15,13,12,.62) 0%,rgba(15,13,12,.78) 42%,rgba(15,13,12,.9) 100%);}

/* Der Marker ist ein Kasten hinter dem Wort. Auf Papier eine Auszeichnung,
   auf einem Foto ein grauer Fleck -- und beim Zeilenumbruch zwei davon.
   Hier traegt die Schrift allein. */
.bg-foto .mark{background:transparent;}

/* Die Karten waren undurchsichtiges Papier und haetten das Bild zugedeckt.
   Als Milchglas bleibt beides: das Foto sichtbar, der Text lesbar. */
.bg-foto .pstep,
.bg-foto .cmp-table .cmp-us{
  background:color-mix(in srgb,#0f0d0c 48%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);}
/* Der Schritt war eine offene Spalte mit einer Linie oben -- an Seiten und
   unten hatte er null Innenabstand, weil da nie ein Rand war. Mit dem
   Milchglas dahinter ist er ein Kasten, und ein Kasten braucht Luft. */
.bg-foto .pstep{padding:clamp(26px,3vw,36px) clamp(24px,2.6vw,34px) clamp(28px,3.2vw,40px);}
@media (hover:hover) and (pointer:fine){
  .bg-foto .pstep:hover{background:color-mix(in srgb,#0f0d0c 32%,transparent);}}

/* Der Schlagschatten des Hauptknopfes mischt sich aus dem Akzent. Der ist hier
   fast weiss -- auf dem dunklen Grund wurde daraus ein Heiligenschein. */
.bg-foto .btn.primary{box-shadow:0 6px 22px rgba(0,0,0,.45);}
@media (hover:hover) and (pointer:fine){
  .bg-foto .btn.primary:hover{box-shadow:0 12px 30px rgba(0,0,0,.55);}}

/* ── FLAGSHIP-KARTE: das Wichtigste soll auch aussehen wie das Wichtigste ───*/
.card .c-flag{position:absolute;top:0;left:0;z-index:3;background:var(--accent);
  color:var(--accent-ink);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 12px;}
.card.lead .c-price{border-color:var(--accent);color:var(--accent);}
@media (max-width:900px){.card .c-flag{font-size:9.5px;}}

@media (min-width:901px){.card{aspect-ratio:3/4.85;}}

/* ── BEHANDLUNGS-SEKTIONEN: waren teils Sackgassen ohne naechsten Schritt ───*/
.t-cta{margin-top:clamp(32px,4.5vw,44px);padding-top:clamp(26px,3.5vw,34px);
  border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.t-cta .note{font-size:13px;color:var(--muted);max-width:34ch;line-height:1.5;}

/* ── PREISRECHNER: Abschluss statt Sackgasse ───────────────────────────────*/
.cs-cta{display:grid;gap:10px;}
.cs-cta .btn{width:100%;}
.cs-alt{display:block;text-align:center;font-size:12.5px;color:var(--muted);
  letter-spacing:.02em;padding:4px 0;}
@media (hover:hover) and (pointer:fine){.cs-alt:hover{color:var(--ink);}}
.cs-reset{background:none;border:0;font:inherit;font-size:12px;color:var(--muted);
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;}
@media (hover:hover) and (pointer:fine){.cs-reset:hover{color:var(--ink);}}
.cs-head{align-items:center;}

/* ── DOCKBAR: dauerhaft erreichbarer Kaufweg auf Mobil ─────────────────────
   Ohne sie ist der Termin-Button nach dem ersten Scroll nicht mehr sichtbar. */
.dockbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  gap:12px;align-items:center;
  padding:10px var(--pad) calc(10px + var(--safe-b));
  background:color-mix(in srgb,var(--paper) 93%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(115%);transition:transform 320ms var(--ease-out);}
.dockbar.on{transform:none;}
.dockbar .dk-info{flex:1 1 auto;min-width:0;line-height:1.25;}
.dockbar .dk-k{font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);font-weight:500;}
.dockbar .dk-v{font-size:15px;font-weight:500;letter-spacing:-.01em;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dockbar .btn{flex:none;padding:14px 20px;min-height:48px;font-size:11px;letter-spacing:.11em;}
@media (max-width:900px){
  .dockbar{display:flex;}
  footer .wrap{padding-bottom:calc(96px + var(--safe-b));}
}
@media (prefers-reduced-motion:reduce){.dockbar{transition:none;}}

/* ── KONTAKT / BUCHUNG ─────────────────────────────────────────────────────*/
.book{border:1px solid var(--ink);padding:clamp(26px,4vw,44px);
  display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;}
.book h3{font-size:clamp(26px,3.4vw,42px);line-height:1.08;margin-bottom:16px;}
.book p{color:var(--muted);line-height:1.6;max-width:46ch;}
.book .book-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.book .book-note{font-size:12px;color:var(--muted);margin-top:18px;letter-spacing:.02em;}
.book-side{border:1px solid var(--line);background:var(--soft);padding:24px;}
.book-side .bs-h{font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);font-weight:500;margin-bottom:16px;}
.book-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14px;}
.book-row:last-child{border-bottom:0;}
.book-row .bl{color:var(--muted);flex:none;}
.book-row .bv{text-align:right;font-weight:500;}
@media (max-width:900px){.book{grid-template-columns:1fr;}}

/* Buttons mit Zusatzzeile stapeln — sonst laeuft der Zusatz daneben und
   der Button wird unnoetig breit. */
.btn.primary:has(.sub){flex-direction:column;gap:0;padding-top:14px;padding-bottom:14px;}
.btn.primary .sub{text-transform:none;letter-spacing:.08em;font-size:10px;}

/* Die Fahne sass auf dem Karten-Label. Kopfzeile aller Karten tiefer legen,
   damit die Preisbadges ueber alle drei auf einer Linie sitzen. Seit die
   Indexzeile weg ist, ist das Badge das einzige Kind des space-between-
   Flex und wuerde sonst nach links rutschen. */
.card .c-top{top:56px;justify-content:flex-end;}

.zone-chip.sel .zp,.paket-chip.sel .pk-s{
  color:color-mix(in srgb,var(--paper) 66%,var(--ink));}

/* Impressum und Datenschutz sind gesetzlich Pflicht und stehen noch aus —
   sichtbar als ausstehend kennzeichnen statt als toter Link. */
.f-bottom .todo{opacity:.55;cursor:not-allowed;}

/* ── REDUCED MOTION fuer die neuen Elemente ────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .btn:hover .arw,.announce-link:hover .arw{transform:none;}
  .dockbar{transition:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   LUXUS-MAGAZIN
   Die Bildbaender geben den Ton vor; hier zieht der Rest der Seite nach.
   Drei Mittel, mehr nicht:

     1. Eine Stimme — eine einzige Schriftfamilie traegt die ganze Seite
        (seit dem 2026-08-13 die Systemschrift). Was behauptet, wird
        gross, halbfett und eng gesetzt; was erklaert, bleibt leicht und
        offen. Hierarchie ueber Gewicht und Groesse, nicht ueber Schriftart.
     2. Kein Kasten — die Rasterzellen der Seite waren in Haarlinien gefasst
        und mit Flaechen hinterlegt. Das ist die Textur einer Tabelle. Ein
        Magazin trennt Spalten mit einer Linie und Weissraum, sonst nichts.
     3. Versatz — gleich hohe Spalten sind ein Formular. Spalten, die auf
        unterschiedlicher Hoehe beginnen, sind ein Umbruch.

   Bewusst am Ende: gleiche Spezifitaet, spaeter definiert. Die Regeln, die
   frueher im Stylesheet in Media Queries stehen, werden unten neu gesetzt —
   eine Media Query erhoeht die Spezifitaet nicht, die Reihenfolge entscheidet.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DIE ZWEI STIMMEN ───────────────────────────────────────────────── */

/* Was behauptet: gross, halbfett, eng gesetzt. Die Wirkung entsteht ueber
   Groesse und Laufweite, nicht ueber eine zweite Schriftart. */
.hero h1,.hero h2,.sec-head h1,.sec-head h2,.band h2,.cta h2,.statement blockquote,
.t-name,.dev-name,.book h3,.finance .fl h3,.band h3,.f-brand{
  font-weight:600;font-style:normal;
  /* 1.05 war zu eng: die Gold-Auszeichnung der oberen Zeile stiess in die
     Versalien der unteren. */
  letter-spacing:-.032em;line-height:1.07;}
.t-name,.dev-name{letter-spacing:-.03em;}

/* Was ordnet: mittlere Groessen, halbfett, damit sie neben dem Fliesstext
   nicht verschwinden. */
.reason h3,.cell h3,.pstep h3,.card .c-body h3,
.pi h4,.serum .snm,.faq-q,.pack .pn,.t-steps .step .stx b{
  font-weight:500;letter-spacing:-.018em;line-height:1.14;}

/* Zahlen im Schaufenster: gross, halbfett, eng. Tabellenziffern behalten
   ihre gleiche Breite, damit Spalten untereinander stehen. */
.tk-n,.hero-meta .n,.band-preis,.finance .fbig,.stf .pct,
.pack .pp,.rc .rm,.cat .cl,.st-fact .n,.cs-price{
  font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.band-preis{font-weight:600;letter-spacing:-.035em;margin-bottom:28px;}
/* Als Anteil der Preiszahl waere die Zeile auf Mobil bei 7 px gelandet. */
.band-preis small{font-size:max(11.5px,.19em);letter-spacing:.18em;}

/* Der Vorspann eines Artikels. Eine Zeile, nie mehr. */
.t-claim,.dev-claim{font-weight:400;letter-spacing:-.01em;line-height:1.35;
  color:var(--muted);}

/* Bildunterschriften-Ton: die kleinen Belegzeilen unter den Spalten. */
.reason .r-proof,.pstep .ps-cost,.cmp-note,.band-note,.path-cta .note,
.book-note,.t-cta .note{
  font-weight:400;font-size:13.5px;letter-spacing:.01em;
  color:var(--muted);text-transform:none;}

/* ── 2. DER SEKTIONSKOPF ALS AUFMACHER ─────────────────────────────────────
   Zeile ueber die volle Satzbreite, Schlagzeile links, Vorspann rechts auf
   der Grundlinie. Das ist der Aufmacher jeder Doppelseite. */
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,4vw,64px);align-items:end;
  border-top:1px solid var(--ink);padding-top:clamp(18px,2.2vw,26px);
  margin-bottom:clamp(46px,7vw,88px);}
.sec-head h1,.sec-head h2{font-size:clamp(36px,5.6vw,74px);max-width:15ch;}
.sec-head p{margin-top:0;max-width:42ch;font-size:16px;padding-bottom:.45em;}
/* „Was moeglich ist." fuehrt keinen Vorspann, sondern nennt nur das Geraet —
   gross, rechts, auf der Grundlinie der Schlagzeile. Dieselbe Setzung, die
   der Name auf der Geraeteseite bekommt (`.dev-name`), damit das Geraet
   ueberall gleich aussieht.

   Eigener Selektor statt `.dev-name` mitzubenutzen: dort ist es eine
   Ueberschrift mit eigenem Abstand (`margin:14px 0 0`), und ein `<p>` haette
   hier ohnehin verloren — `.sec-head p` ist spezifischer als `.dev-name`.
   Deshalb traegt das Element im Markup auch kein `p`. */
.sec-geraet{font-size:clamp(28px,3.6vw,46px);font-weight:500;
  letter-spacing:-.03em;line-height:1.05;margin:0;color:var(--ink);
  padding-bottom:.08em;}

/* Dieselbe Behandlung im Band, nur ohne Linie — dort trennt das Bild.
   Der Vorspann braucht Abstand: h2 und p standen bisher direkt aufeinander,
   was mit der engeren Serifen-Zeile sofort auffiel. */
.band h2{font-size:clamp(34px,5.2vw,68px);}
.band-inner h3{font-size:clamp(26px,3.2vw,42px);}
.band-inner > h2 + p,.band-inner > h3 + p{margin-top:22px;}
/* Das Textfeld im Band war auf die Zeilenlaenge des Fliesstexts begrenzt.
   Die Serifen-Schlagzeile brach darin auf vier Zeilen und die zweizeilige
   Gold-Auszeichnung zerfiel in zwei versetzte Bloecke. Die Schlagzeile
   bekommt jetzt ihr eigenes Mass, der Absatz behaelt seins. */
.band-inner{max-width:min(660px,58vw);}
.band-inner p{max-width:44ch;}

/* ── 3. SPALTEN STATT ZELLEN ───────────────────────────────────────────────
   Ueberall dasselbe Muster: Raster ohne Grund und Rahmen, die Zellen ohne
   Flaeche, getrennt durch eine Haarlinie links. Die erste Spalte hat keine. */
.reasons,.path-grid,.t-key,.grid3,.serums,.pi-grid,.staffel,
.raten-row,.packs{background:none;border:0;}
.reason,.pstep,.tk,.cell,.serum,.pi,.stf,.rc{background:none;}
@media (hover:hover) and (pointer:fine){
  .reason:hover,.pstep:hover,.cell:hover{background:none;}
}

/* GRUENDE — drei Spalten, versetzt beginnend, mit laufender Nummer.
   Die Nummern stehen nicht im Markup: sie sind Auszeichnung, kein Inhalt. */
.reasons{grid-template-columns:repeat(3,1fr);gap:0;counter-reset:reason;
  border-top:1px solid var(--ink);}
.reasons > :first-child{grid-column:auto;}
.reasons > :first-child h3{font-size:clamp(22px,2.2vw,28px);}
.reason{counter-increment:reason;min-height:0;padding:0;
  padding-inline:clamp(22px,2.8vw,44px);
  border-left:1px solid var(--line);transition:none;}
.reason:first-child{border-left:0;padding-left:0;}
.reason:last-child{padding-right:0;}
.reason::before{content:counter(reason,decimal-leading-zero);
  display:block;font-size:13px;letter-spacing:.08em;font-weight:500;
  color:var(--muted);}
.reason h3{font-size:clamp(22px,2.2vw,28px);margin:0 0 14px;}
.reason p{font-size:15.5px;}
.reasons > :first-child .r-rule,.reason .r-rule{width:30px;margin:16px 0 22px;}
.reason .r-proof{border-top:0;padding-top:0;margin-top:20px;display:block;}

/* Der Versatz. Ohne ihn stehen drei gleich hohe Spalten nebeneinander und
   die Seite sieht wieder aus wie ein Formular. Die Trennlinien laufen
   trotzdem auf voller Hoehe durch, weil sie am Rasterfeld haengen. */
.reason:nth-child(1){padding-top:clamp(26px,3vw,38px);}
.reason:nth-child(2){padding-top:clamp(54px,6.4vw,92px);}
.reason:nth-child(3){padding-top:clamp(82px,9.8vw,146px);}

/* DREI SCHRITTE — hier trennt nicht die Linie links, sondern eine Linie
   oben je Spalte. Der Weg laeuft waagerecht, also markiert ihn eine
   waagerechte Linie. Die Ziffer wird gross und zur Serife. */
.path-grid{grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,54px);}
.pstep{padding:clamp(20px,2.4vw,28px) 0 0;border-top:1px solid var(--ink);}
.pstep .ps-n{width:auto;height:auto;border:0;background:none;display:block;
  font-weight:600;
  font-size:clamp(40px,4.6vw,62px);line-height:.9;letter-spacing:-.04em;
  color:color-mix(in srgb,var(--ink) 24%,transparent);}
.pstep.now .ps-n{background:none;color:var(--accent);}

/* ── DER AKTIVE SCHRITT WANDERT MIT ───────────────────────────────────────
   Beim Scrollen faehrt eine Goldlinie in den Schritt ein, bei dem man gerade
   ist, und seine Ziffer wechselt auf Gold. Die Linie sitzt auf der schon
   vorhandenen Trennlinie, deshalb top:-1px — sie deckt sie exakt ab, statt
   daneben eine zweite zu ziehen. */
.pstep{position:relative;}
.pstep::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform 560ms var(--ease-out);}
.pstep.on::before{transform:scaleX(1);}
.ps-n{transition:color 420ms var(--ease-out);}
.pstep.on .ps-n{color:var(--accent);}
@media (prefers-reduced-motion:reduce){
  .pstep::before{transition:none;}
  .ps-n{transition:none;}
}
.pstep h3{font-size:clamp(21px,2.1vw,27px);margin:18px 0 12px;}
.pstep .ps-cost{border-top:0;padding-top:0;margin-top:20px;display:block;}

/* KENNZAHLEN — 130 € / NiSV / 8× und die Fakten je Behandlung */
.t-key{grid-template-columns:repeat(4,1fr);gap:0;
  border-block:0;border-top:1px solid var(--ink);
  margin-bottom:clamp(34px,4.5vw,54px);}
.tk{padding:clamp(22px,2.6vw,30px) 0 0;
  padding-inline:clamp(22px,2.8vw,44px);border-left:1px solid var(--line);}
.tk:first-child{border-left:0;padding-left:0;}
.tk-n{font-size:clamp(30px,3.6vw,48px);line-height:1;}
.tk-t{margin-top:14px;}
.t-key.three{grid-template-columns:repeat(3,1fr);}
/* Der Weg zum Termin hat drei Schritte, das Empfehlungsprogramm vier. */
/* VIER SPALTEN BRAUCHEN MEHR BREITE ALS DREI.

   Im 1280er-Mass bleiben je Spalte rund 240 px -- darin bricht bei 14,5 px
   Schriftgroesse jeder Satz nach drei Woertern, und die Ueberschrift „Haarfrei-
   Check machen" faellt auf zwei Zeilen. Die Sektion mit einem Vierer-Raster
   bekommt deshalb ein eigenes, breiteres Mass, und die Fugen ruecken enger
   zusammen: zusammen rund ein Drittel mehr Textbreite je Spalte.

   Der wrap waechst mit, nicht nur das Raster -- sonst stuende die Ueberschrift
   auf einer anderen Kante als die Spalten darunter. */
.path-grid.four{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.2vw,36px);}
#ablauf .wrap{max-width:min(1560px,94vw);}

/* Vier Spalten lohnen sich erst, wenn je Spalte rund 290 px uebrig bleiben --
   das ist ab etwa 1500 px Fensterbreite der Fall. Darunter zwei mal zwei: auf
   einem 1280er-Laptop waeren vier Spalten 248 px breit, also genauso eng wie
   vor der Verbreiterung. Die 900er-Regel weiter unten macht daraus dann eine
   einzige Spalte. */
@media (max-width:1500px){
  .path-grid.four{grid-template-columns:repeat(2,1fr);
    gap:clamp(26px,3vw,44px) clamp(20px,2.2vw,36px);}
}
.dev .t-key{grid-template-columns:repeat(2,1fr);}
/* Zweispaltige Raster laufen ueber mehrere Zeilen. Dort ist nicht das erste
   Element das linke, sondern jedes ungerade — sonst haengt mitten im Satz
   eine Trennlinie, die keine Spalte trennt. Zeile zwei trennt stattdessen
   eine waagerechte Linie. */
.dev .tk:nth-child(2n+1){border-left:0;padding-left:0;}
.dev .tk:nth-child(n+3){border-top:1px solid var(--line);
  margin-top:clamp(20px,2.4vw,28px);}

/* Zwischenueberschriften ("Die Technik dahinter", "Die vier Kategorien",
   "Ratenlaufzeiten") sind Rubriktitel — dieselbe Stimme wie die Schlagzeile,
   nur leiser. */
.sub-h{font-weight:600;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;line-height:1.15;
  margin-bottom:20px;}

/* KONTAKTSPALTEN und Serum-Spalten nach demselben Muster */
.grid3,.serums{gap:0;}
.cell,.serum{padding:clamp(24px,2.8vw,34px) 0 0;
  padding-inline:clamp(20px,2.6vw,38px);border-left:1px solid var(--line);
  min-height:0;}
.cell:first-child,.serum:first-child{border-left:0;padding-left:0;}
.cell h3{font-size:22px;margin:14px 0 10px;}

/* PREIS-SEITE: Erklaerblocks, Staffel, Raten */
.pi-grid,.staffel,.raten-row{gap:0;}
.pi,.stf,.rc{padding:clamp(22px,2.6vw,32px) 0 0;
  padding-inline:clamp(20px,2.6vw,38px);border-left:1px solid var(--line);}
.pi:first-child,.stf:first-child,.rc:first-child{border-left:0;padding-left:0;}
.pi-grid,.staffel,.raten-row{border-top:1px solid var(--ink);}
.stf .pct{font-size:clamp(36px,4.2vw,54px);}
/* Erklaerblocks stehen zweispaltig ueber zwei Zeilen — siehe oben. */
.pi:nth-child(2n+1){border-left:0;padding-left:0;}
.pi:nth-child(n+3){border-top:1px solid var(--line);
  margin-top:clamp(24px,3vw,36px);}

/* TABELLEN — Rahmen weg, es bleiben die Zeilenlinien. Eine Preistabelle im
   Magazin steht frei im Satzspiegel, nicht in einem Kasten. */
.cats,.ptable{border:0;border-top:1px solid var(--ink);}
.cat,.ptable th,.ptable td{padding-inline:0;}
.cat .cl{font-size:24px;}
.ptable th,.ptable td{padding-block:15px;}

/* PAKETE — die hervorgehobene Karte behaelt ihre Flaeche, das ist Absicht.
   Die uebrigen verlieren Rahmen und Grund und stehen auf einer Linie. */
.packs{gap:clamp(20px,2.6vw,36px);}
.pack{background:none;padding:clamp(20px,2.4vw,26px) 0 0;
  border-top:1px solid var(--ink);}
.pack.featured{background:var(--dark);border-top-color:var(--dark);
  padding:clamp(24px,3vw,32px);}
.pack .pp{font-size:clamp(30px,3.4vw,40px);}
.pack .ptag{top:auto;bottom:100%;}
.pack.featured .ptag{top:0;bottom:auto;}

/* ── 5. GERAETE-SEITE ──────────────────────────────────────────────────────*/
.dev-name{font-size:clamp(28px,3.6vw,46px);}
.dev .facts,.facts{border:0;border-top:1px solid var(--ink);}
.fact{padding-inline:0;}
.honest{border:0;border-left:2px solid var(--accent);padding:6px 0 6px 20px;
  font-size:15.5px;line-height:1.55;color:var(--muted);}
.honest b{font-weight:500;color:var(--ink);}

/* ── 6. FAQ ────────────────────────────────────────────────────────────────*/
.faq-q{font-size:clamp(18px,1.8vw,23px);padding:26px 0;}
.faq-list{border-top:1px solid var(--ink);}

/* ── 7. KONTAKT / BUCHUNG ──────────────────────────────────────────────────*/
.book{border:0;border-top:1px solid var(--ink);padding:clamp(26px,3.4vw,40px) 0 0;}
.book h3{font-size:clamp(28px,3.6vw,46px);}
.book-side{border:0;background:none;padding:0;
  border-left:1px solid var(--line);padding-left:clamp(24px,3vw,44px);}

/* ── 8. MEHR LUFT ──────────────────────────────────────────────────────────
   Weissraum ist der eigentliche Luxus. Die Sektionen bekommen ihn zurueck. */
.sec{padding:clamp(84px,13vw,168px) 0;}
.statement blockquote{font-size:clamp(28px,4vw,54px);line-height:1.14;}

/* ── 9. UMBRUCH ────────────────────────────────────────────────────────────
   Steht hier unten, weil die Regeln oben ohne Media Query definiert sind
   und sonst auf jedem Bildschirm gewinnen wuerden. Sobald die Spalten
   untereinander stehen, wird aus der senkrechten Linie eine waagerechte. */
@media (max-width:1000px){
  .t-key,.dev .t-key{grid-template-columns:repeat(2,1fr);}
  .tk:nth-child(2n+1){border-left:0;padding-left:0;}
  .tk:nth-child(n+3){border-top:1px solid var(--line);
    margin-top:clamp(20px,2.4vw,28px);}
  .pi-grid{grid-template-columns:1fr;}
  .pi{border-left:0;padding-inline:0;}
  .pi:nth-child(n+2){border-top:1px solid var(--line);margin-top:28px;}
}
@media (max-width:900px){
  .sec-head{grid-template-columns:1fr;align-items:start;}
  .sec-head p{margin-top:18px;padding-bottom:0;}
  .sec-geraet{margin-top:16px;padding-bottom:0;}
  /* Die Vierer-Variante muss hier mitgenannt werden: eine Media Query erhoeht
     die Spezifitaet nicht, und .path-grid.four ist staerker als .path-grid. */
  .path-grid,.path-grid.four{grid-template-columns:1fr;gap:0;}
  .pstep{padding-top:24px;}
  .pstep + .pstep{margin-top:34px;}
  .book-side{border-left:0;padding-left:0;border-top:1px solid var(--line);
    padding-top:28px;}
}
@media (max-width:860px){
  .reasons{grid-template-columns:1fr;border-top:0;}
  .reason,.reason:nth-child(1),.reason:nth-child(2),.reason:nth-child(3){
    border-left:0;padding-inline:0;padding-top:30px;
    border-top:1px solid var(--line);}
  .reason:first-child{border-top:1px solid var(--ink);}
  .grid3,.serums,.pi-grid,.staffel,.raten-row{grid-template-columns:1fr;}
  .cell,.serum,.pi,.stf,.rc{border-left:0;padding-inline:0;
    border-top:1px solid var(--line);}
  .cell:first-child,.serum:first-child,.pi:first-child,
  .stf:first-child,.rc:first-child{border-top:0;}
}
@media (max-width:760px){
  .t-key,.dev .t-key{grid-template-columns:1fr;}
  .tk{border-left:0;padding-inline:0;border-top:1px solid var(--line);}
  .tk:first-child{border-top:0;}
  .packs{grid-template-columns:1fr;}
}
/* Die Belege im Hero brechen frueh um — vier Spalten Versalien werden auf
   dem Telefon sonst zu Buchstabensuppe. */
@media (max-width:760px){
  .hero-meta{grid-template-columns:1fr 1fr;row-gap:26px;}
}
@media (max-width:420px){
  .hero-meta{grid-template-columns:1fr;row-gap:20px;padding-top:22px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   ANGEBOTS-DIALOG
   Eine Anzeigenseite, kein Formular: das Foto fuellt die Karte, der Text
   liegt darauf. Fuenf Zeilen, ein Weg hinaus. Der Verlauf wird nach unten
   dunkel, damit weisse Schrift auf jedem Bildausschnitt traegt — auch wenn
   spaeter ein anderes Foto darunterliegt.
   ══════════════════════════════════════════════════════════════════════════ */
.promo[hidden]{display:none;}
.promo{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);}
.promo-scrim{position:absolute;inset:0;background:rgba(12,10,8,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity 320ms var(--ease-out);}
.promo.on .promo-scrim{opacity:1;}

.promo-card{position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  width:min(430px,100%);aspect-ratio:4/5;
  max-height:calc(100dvh - 2*clamp(16px,4vw,48px));
  overflow:hidden;background:var(--dark);color:#fff;
  box-shadow:0 40px 90px rgba(12,10,8,.44);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out);}
.promo.on .promo-card{opacity:1;transform:none;}
/* Die Karte bekommt den Fokus nur, damit Tastatur und Vorleseprogramm im
   Dialog landen — sie ist selbst nicht bedienbar und per Tab nicht
   erreichbar. Der Ring des Browsers (Systemakzentfarbe: lila hier, blau auf
   dem iPhone) rahmte deshalb nur das Bild ein. Die Bedienelemente darin
   behalten ihren eigenen Fokusstil. */
.promo-card:focus{outline:none;}

.promo-bg{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;}
.promo-card::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,
    rgba(14,11,9,.10) 0%,rgba(14,11,9,.34) 38%,
    rgba(14,11,9,.78) 72%,rgba(14,11,9,.94) 100%);}

.promo-body{position:relative;z-index:2;
  padding:clamp(24px,4vw,36px) clamp(24px,4vw,36px) 0;}
.promo-k{font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;color:rgba(255,255,255,.72);}
.promo-body h2{margin-top:14px;font-weight:600;line-height:1.06;
  font-size:clamp(30px,4.4vw,40px);letter-spacing:-.03em;
  color:#fff;max-width:13ch;text-wrap:balance;}
.promo-sub{margin-top:14px;font-size:15px;line-height:1.5;
  color:rgba(255,255,255,.84);max-width:30ch;}
.promo-body .btn{align-self:flex-start;margin-top:clamp(20px,3vw,26px);}

/* Das Pflichtkleingedruckte sitzt unten an der Kante, wie im Anzeigensatz. */
.promo-fine{position:relative;z-index:2;
  padding:clamp(18px,2.6vw,24px) clamp(24px,4vw,36px) clamp(20px,3vw,28px);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  line-height:1.6;color:rgba(255,255,255,.55);}

.promo-x{position:absolute;top:6px;right:6px;z-index:3;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:#fff;font-size:17px;line-height:1;
  cursor:pointer;opacity:.85;
  transition:opacity var(--dur-ui) ease,transform var(--dur-press) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.promo-x:hover{opacity:1;}}
.promo-x:active{transform:scale(.9);}
.promo-x:focus-visible{outline:2px solid var(--accent);outline-offset:-6px;}

/* Solange der Dialog offen ist, scrollt die Seite dahinter nicht mit. */
.promo-open,.promo-open body{overflow:hidden;}

@media (max-width:760px){
  .promo{padding:20px;}
  .promo-card{width:min(400px,100%);
    max-height:calc(100dvh - 40px);}
  .promo-body h2{font-size:clamp(27px,7.6vw,34px);}
  .promo-sub{font-size:14.5px;}
  .promo-body .btn{align-self:stretch;}
}
@media (prefers-reduced-motion:reduce){
  .promo-scrim,.promo-card{transition:opacity 160ms ease;}
  .promo-card{transform:none;}
  .promo-x:active{transform:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL — WENIGER KANTEN
   Auf dem Telefon standen vier gerahmte Elemente in einer Reihe: Logo,
   Gold-Button, Themenschalter, Menue-Knopf. Vier Kaesten nebeneinander
   lesen sich als Werkzeugleiste, nicht als Kopf eines Magazins. Es bleibt
   ein Kasten — der Gold-Button, weil er der Kaufweg ist. Der Rest wird zu
   Schrift und Strich.
   ══════════════════════════════════════════════════════════════════════════ */
/* Mit acht Menuepunkten stiess die Navigation bei 940 px an den Gold-Button.
   Statt Punkte zu verstecken ruecken sie zusammen — unter 900 px uebernimmt
   ohnehin das Mobilmenue. */
@media (max-width:1180px){ .nav-links{gap:22px;} }
@media (max-width:1020px){
  .nav-links{gap:15px;}
  .nav-links a,.nav-item > a{font-size:12.5px;}
}

@media (max-width:900px){
  /* In der Kopfleiste bleibt links das Logo und rechts das Burger-Icon.
     Der Themenschalter faellt weg und zieht ins Menue. Der Buchungsweg liegt
     ohnehin doppelt an: oben in der Ankuendigungsleiste und unten dauerhaft
     in der Dockbar. */
  .nav-right .theme-toggle{display:none;}
  .nav-right{gap:14px;}
  .menu-btn{border:0;padding:10px 0;gap:0;}
  .mb-label{display:none;}
  .menu-btn .bars{gap:5px;}
  .menu-btn .bars i{width:24px;height:1.5px;}
  /* Die Leiste selbst darf leiser werden: sie nennt das Angebot, sie ist
     nicht das Angebot. */
  .announce-link{min-height:38px;padding:9px 14px;font-size:10.5px;
    letter-spacing:.11em;}
}
@media (max-width:420px){
  .announce-link{font-size:10px;letter-spacing:.08em;}
}

/* Themenschalter als letzte Zeile im Mobilmenue — gleiche Anmutung wie die
   Links darueber, nur leiser. */
.mp-theme{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);font:inherit;font-size:14px;
  color:var(--muted);padding:16px var(--hdr-pad);cursor:pointer;}
.mp-theme:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;}

/* ══ GRUENDE UND TECHNIK — NEUFASSUNG ══════════════════════════════════════
   Der Treppenversatz der drei Spalten sollte Rhythmus erzeugen. Er erzeugte
   drei Leerzonen oben und eine ausgefranste Unterkante: die Trennlinien
   liefen auf volle Hoehe, der Inhalt nicht. Jetzt beginnen alle Spalten auf
   einer Oberkante und enden auf einer gemeinsamen Grundlinie — die Belegzeile
   sitzt unten und zieht quer durch alle drei eine durchgehende Linie.
   Den Rhythmus tragen jetzt die Ziffern: gross und leise wie bei den
   Prozess-Schritten, damit die Spalten auch ohne Versatz gezaehlt wirken. */
.reasons{align-items:stretch;}
.reasons > .reason:nth-child(n){
  padding-top:clamp(24px,2.8vw,34px);
  padding-bottom:clamp(24px,2.8vw,34px);
}
.reason::before{
  font-size:clamp(28px,3vw,42px);font-weight:600;line-height:.9;
  letter-spacing:-.04em;
  color:color-mix(in srgb,var(--ink) 22%,transparent);
  transition:color 420ms var(--ease-out);}
.reason .r-rule{width:30px;margin:16px 0 20px;
  transform-origin:left center;transition:transform 420ms var(--ease-out);}
.reason h3{margin:0 0 12px;}
.reason .r-proof{margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line);display:block;}
@media (hover:hover) and (pointer:fine){
  .reason:hover::before{color:var(--accent);}
  .reason:hover .r-rule{transform:scaleX(1.9);}
}
@media (prefers-reduced-motion:reduce){
  .reason::before,.reason .r-rule{transition:none;}
  .reason:hover .r-rule{transform:none;}
}
/* Eine Spalte: die senkrechte Trennlinie hat nichts mehr zu trennen. */
@media (max-width:760px){
  .reasons > .reason:nth-child(n){
    border-left:0;padding-inline:0;
    padding-top:clamp(24px,5vw,32px);padding-bottom:clamp(24px,5vw,32px);}
  .reasons > .reason + .reason{border-top:1px solid var(--line);}
  .reason .r-proof{margin-top:20px;}
}


/* ── HELLO POINTS ─────────────────────────────────────────────────────────
   Der groesste Auftritt der Seite. Der Coin bleibt beim Scrollen stehen,
   kippt mit dem Fortschritt, und die Textbeats wechseln daneben.

   Der Scrollfortschritt steht als --hp-p (0 bis 1) an der Sektion, alles
   Weitere rechnet in CSS damit. Faellt das Skript aus, bleibt --hp-p auf 0:
   der Coin steht schraeg, der erste Beat ist sichtbar, die Seite bleibt
   lesbar. */
.hp{position:relative;--hp-p:0;color:var(--ink);isolation:isolate;
  /* Warmes Licht statt dunklem Raum: in der Mitte ein Hauch Gold auf Papier,
     nach aussen die Sandstufe. Beides aus den Tokens, damit die Buehne im
     Dunkelmodus mitkippt statt als weisser Block stehenzubleiben. */
  background:radial-gradient(125% 95% at 50% 38%,
    color-mix(in srgb,var(--accent) 9%,var(--paper)) 0%,
    var(--soft2) 68%);}
.hp-track{height:360vh;height:360svh;}
.hp-stage{position:sticky;top:0;overflow:hidden;
  height:100vh;height:100svh;min-height:520px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vh,34px);
  padding:calc(76px + 2vh) var(--pad) calc(3vh + 18px + var(--safe-b));}

/* ── Das Foto hinter der Buehne ───────────────────────────────────────────
   Zwei Frauen, eine reicht der anderen den Coin. Es liegt BEWUSST weit
   hinten: davor schwebt derselbe Coin gross und scharf, darunter steht der
   ganze Text. Das Foto ist die Ahnung einer Geste, kein zweiter Blickfang —
   sonst streiten zwei Muenzen um dieselbe Aufmerksamkeit.

   Das Foto ist bewusst als Panorama gebaut: die beiden Frauen stehen in der
   linken Haelfte, rechts davon ist nur leere Wand. Der erste Entwurf hatte
   die Uebergabe mittig — und die lag damit genau unter Schlagzeile und
   Absatz, also unter dem dichtesten Teil des Schleiers. Man haette die Geste
   nicht gesehen. Jetzt weichen Bild und Text einander seitlich aus.

   Zwei Schleier liegen darueber: ein senkrechter, der nach unten dichter
   wird, und ein runder genau ueber dem Textblock. Der runde ist BEWUSST
   schmal (30 % Radius, der Textblock ist 27-73 % breit). Im ersten Anlauf
   stand da 62 % — damit reichte er ueber die ganze Buehne und deckte die
   Uebergabe links zu 75 % zu, also wieder genau das, was man sehen soll.
   Beide aus `--paper` gemischt, kippen im Dunkelmodus also mit, statt als
   weisser Nebel stehenzubleiben.

   Die Bewegung rechnet mit --hp-p, derselben Zahl wie Coin und Aura. Faellt
   das Skript aus, bleibt sie 0: das Bild steht still, sonst aendert sich
   nichts. */
.hp-foto{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:38% 50%;pointer-events:none;
  opacity:.48;transform-origin:50% 42%;
  transform:scale(calc(1.03 + var(--hp-p) * .06));}
/* Im Dunkelmodus liegt ein helles Foto auf dunklem Grund, das traegt weiter.
   Nachgerechnet: bei .20 blieb von der Uebergabe nur 3-15 % uebrig, praktisch
   nichts. Bei .38 sind es 6-29 %, und der schlechteste Punkt unter dem Text
   steht immer noch bei 9,2:1 — die Grenze liegt bei 4,5. */
:root[data-theme="dark"] .hp-foto{opacity:.38;}
.hp-stage::after{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(30% 40% at 50% 68%,
      color-mix(in srgb,var(--paper) 84%,transparent)  0%,
      color-mix(in srgb,var(--paper) 58%,transparent) 58%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--paper) 24%,transparent)  0%,
      color-mix(in srgb,var(--paper) 12%,transparent) 32%,
      color-mix(in srgb,var(--paper) 34%,transparent) 56%,
      color-mix(in srgb,var(--paper) 64%,transparent) 82%,
      color-mix(in srgb,var(--paper) 80%,transparent) 100%);}

/* Lichtkegel hinter dem Coin. Waechst mit dem Fortschritt, wie das
   Auflodern im Video. */
.hp-aura{position:absolute;left:50%;top:46%;z-index:0;pointer-events:none;
  width:min(150vw,1180px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--accent) 36%,transparent) 0%,
    color-mix(in srgb,var(--accent) 11%,transparent) 30%,
    transparent 62%);
  opacity:calc(.4 + var(--hp-p) * .6);}

/* ── Der Coin ─────────────────────────────────────────────────────────────
   Drei ineinander liegende Ebenen, damit sich Scroll-Kippen und ruhiges
   Schweben nicht dieselbe transform-Eigenschaft streitig machen:
   .hp-coin (Buehne) > .hp-coin-tilt (Scroll) > .hp-coin-float (Leerlauf). */
.hp-coin{position:relative;z-index:1;flex:none;
  width:clamp(180px,29vh,320px);aspect-ratio:760/772;perspective:1100px;}
.hp-coin-tilt{width:100%;height:100%;
  transform:
    rotateX(calc(8deg - var(--hp-p) * 15deg))
    rotateY(calc(-15deg + var(--hp-p) * 30deg))
    rotateZ(calc(-4deg + var(--hp-p) * 8deg))
    scale(calc(.88 + var(--hp-p) * .18));
  transition:transform 90ms linear;}
.hp-coin-float{position:relative;width:100%;height:100%;
  animation:hpFloat 7.5s var(--ease-in-out) infinite;}
.hp-coin-img{width:100%;height:auto;display:block;}
/* Der Schatten liegt als eigene Flaeche unter dem Coin und nicht als
   filter:drop-shadow am Bild. WebKit rastert einen Filter im 3D-Kontext
   (perspective + rotate) auf die Bildkante statt auf die Silhouette: auf
   dunklem Grund fiel dieses Rechteck nicht auf, auf hellem stand es als
   Kasten hinter dem Coin. Im ganzen Coin gibt es deshalb kein filter mehr.
   Der Fleck bleibt am Boden stehen, waehrend der Coin darueber schwebt. */
.hp-coin::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:6%;right:6%;bottom:-3%;height:17%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(38,30,16,.26) 0%,rgba(38,30,16,.11) 46%,transparent 72%);}
@keyframes hpFloat{
  0%,100%{transform:translate3d(0,-1.7%,0);}
  50%{transform:translate3d(0,1.7%,0);}
}

/* ── Textbeats ────────────────────────────────────────────────────────────
   Alle Beats liegen uebereinander, damit beim Wechsel nichts springt. Die
   Hoehe des Kastens richtet sich nach dem laengsten. */
.hp-eyebrow{position:relative;z-index:2;
  font-size:11px;text-transform:uppercase;letter-spacing:.24em;font-weight:500;
  color:color-mix(in srgb,var(--accent) 56%,var(--ink));}
.hp-beats{position:relative;z-index:2;width:100%;max-width:660px;
  min-height:clamp(196px,25vh,244px);}
.hp-beat{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vh,18px);
  text-align:center;opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out);}
.hp-beat.on{opacity:1;transform:none;}
.hp-beat h3{font-size:clamp(25px,3.5vw,44px);font-weight:500;
  letter-spacing:-.028em;line-height:1.06;color:var(--ink);text-wrap:balance;}
.hp-beat p{font-size:clamp(15px,1.3vw,17.5px);line-height:1.55;
  color:var(--muted);max-width:44ch;text-wrap:pretty;}

/* Die Zahl traegt den Beat. Verlauf statt Vollton, damit sie wie eingelegtes
   Gold liest und nicht wie eingefaerbter Text. */
.hp-num{font-variant-numeric:tabular-nums;
  /* Der hellste Punkt ist das reine Akzentgold, die Enden laufen ins
     Bronzene. Ein Stop Richtung --paper waere auf hellem Grund verschwunden. */
  background:linear-gradient(96deg,
    color-mix(in srgb,var(--accent) 34%,var(--ink)) 2%,
    color-mix(in srgb,var(--accent) 74%,var(--ink)) 26%,
    var(--accent) 52%,
    color-mix(in srgb,var(--accent) 62%,var(--ink)) 78%,
    color-mix(in srgb,var(--accent) 32%,var(--ink)) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;}

.hp-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(4px,1vh,10px);}
/* Fortschrittsleiste — vier Striche, einer je Beat. */
.hp-rail{position:relative;z-index:2;display:flex;gap:8px;}
.hp-dot{width:clamp(26px,5vw,40px);height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--ink) 16%,transparent);overflow:hidden;}
.hp-dot i{display:block;height:100%;width:0;
  background:color-mix(in srgb,var(--accent) 62%,var(--ink));
  transition:width 220ms linear;}

/* ── Coin-Karte auf der Empfehlen-Seite ───────────────────────────────────
   Dieselbe Sprite-Form, ruhiger gesetzt: hier ist der Coin die Ueberschrift
   des Themas, nicht die Vorstellung. */
.hp-card{position:relative;overflow:hidden;--hp-p:0;color:#fff;
  background:radial-gradient(120% 130% at 22% 50%,#221e18 0%,#0b0a08 70%);
  border-radius:2px;margin-bottom:clamp(40px,6vw,68px);
  padding:clamp(34px,5vw,64px);
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(28px,5vw,64px);}
.hp-card .hp-aura{top:50%;left:16%;width:min(120vw,760px);opacity:.5;}
.hp-card .hp-eyebrow{color:color-mix(in srgb,var(--accent) 74%,#fff);}
.hp-card .hp-coin{width:clamp(132px,17vw,206px);}
.hp-card .hp-coin-tilt{transform:rotateX(5deg) rotateY(-11deg) rotateZ(-3deg);}
.hp-card-txt{position:relative;z-index:2;display:grid;gap:16px;justify-items:start;}
.hp-card h2{font-size:clamp(25px,3.2vw,42px);font-weight:500;
  letter-spacing:-.028em;line-height:1.08;color:#fff;text-wrap:balance;}
.hp-card p{font-size:clamp(15px,1.3vw,17.5px);line-height:1.55;
  color:rgba(255,255,255,.75);max-width:46ch;}
.hp-card-keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.hp-card-keys span{font-size:12.5px;letter-spacing:.02em;
  padding:7px 13px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  color:color-mix(in srgb,var(--accent) 84%,#fff);
  background:color-mix(in srgb,var(--accent) 10%,transparent);}
@media (max-width:760px){
  .hp-card{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .hp-card-txt{justify-items:center;}
  .hp-card .hp-aura{left:50%;}
}

/* ── Der Bildausschnitt im Hochformat ──────────────────────────────────────
   Das Foto ist 2400x1019, also 2,36:1. Auf einem stehenden Telefon deckt es
   eine Flaeche von etwa 0,46:1 ab -- object-fit:cover skaliert dann auf die
   Hoehe und schneidet waagerecht rund 80 Prozent weg. Sichtbar bleibt ein
   Streifen von knapp 20 Prozent der Bildbreite.

   Bei object-position:38% lag dieser Streifen auf dem Pullover der rechten
   Frau. Die Uebergabe selbst -- die eine Hand laesst den Coin in die offene
   Hand der anderen fallen -- sitzt aber bei 16 bis 36 Prozent der Bildbreite,
   Mitte 26. Sie lag damit links ausserhalb: auf dem Telefon war von der Geste,
   um die es in diesem Abschnitt geht, nichts zu sehen.

   23 statt der rechnerischen Mitte 26: der Streifen ist mit 19,6 Prozent
   knapp schmaler, als die Geste breit ist -- einer der beiden Raender
   schneidet in jedem Fall. Bei 26 fiel die gebende Hand halb heraus, bei 23
   steht sie ganz im Bild und die offene Handflaeche verliert stattdessen
   etwas nach rechts. Die Hand, die gibt, traegt die Aussage.

   Nach Seitenverhaeltnis und nicht nach Breite geschaltet: der Schnitt geht
   genau dann daneben, wenn die Flaeche hochkant ist -- auf dem Telefon wie
   auf dem stehenden Tablet. */
@media (orientation:portrait){
  .hp-foto{object-position:23% 50%;}
}

/* Schmale Fenster: der Coin darf schrumpfen, der Text bekommt den Platz. */
@media (max-width:560px){
  .hp-track{height:320svh;}
  .hp-coin{width:clamp(158px,42vw,220px);}
  .hp-beats{min-height:238px;}
}

/* Kurze Fenster: kleine Geraete, und jedes Handy, solange die Browserleisten
   noch ausgefahren sind. Der Coin gibt die Hoehe ab, denn der Text kann sie
   nicht hergeben — sonst schneidet die Buehne den Coin oben ab. */
@media (max-height:700px){
  .hp-stage{gap:clamp(10px,1.6vh,20px);
    padding-top:calc(66px + 1vh);
    padding-bottom:calc(1.5vh + 12px + var(--safe-b));}
  .hp-coin{width:clamp(112px,22vh,168px);}
}

/* Die Leiste lag frueher hinter der Dockbar und war deshalb ganz aus. Sie
   gehoert aber zum Lesen dazu -- sie sagt, wie viele Beats noch kommen.
   Also macht die Buehne unten Platz, statt sie wegzunehmen. Die Dockbar
   erscheint erst ab 900 px abwaerts, deshalb haengt der Zuschlag daran. */
@media (max-width:900px){
  .hp-stage{padding-bottom:calc(3vh + 18px + 76px + var(--safe-b));}
}
@media (max-width:900px) and (max-height:700px){
  .hp-stage{padding-bottom:calc(1.5vh + 12px + 76px + var(--safe-b));}
}

/* Liegende Handys — die Buehne waere sonst hoeher als das Fenster. */
@media (max-height:560px) and (orientation:landscape){
  .hp-stage{min-height:0;}
  .hp-coin{width:clamp(120px,22vh,180px);}
  .hp-beats{min-height:180px;}
}

/* Wer wenig Bewegung moechte, bekommt keine: die Buehne loest sich auf,
   alle vier Beats stehen untereinander und sind vollstaendig lesbar. */
@media (prefers-reduced-motion:reduce){
  .hp-track{height:auto;}
  .hp-stage{position:static;height:auto;min-height:0;
    padding-block:clamp(64px,9vw,120px);}
  .hp-coin-tilt{transform:rotateX(5deg) rotateY(-10deg) rotateZ(-3deg);
    transition:none;}
  .hp-coin-float{animation:none;}
  .hp-beats{min-height:0;display:grid;gap:clamp(34px,5vw,54px);}
  .hp-beat{position:static;opacity:1;transform:none;transition:none;}
  .hp-rail{display:none;}
}

/* ── RECHTSTEXTE ──────────────────────────────────────────────────────────
   Impressum und Datenschutz sind Pflichtangaben, kein Produkt. Sie brauchen
   eine lesbare Zeilenlaenge und sonst nichts. Die Anschrift steht als Block
   mit white-space:pre-line, damit die Zeilenumbrueche zur Bedeutung gehoeren
   statt aus <br>-Gestruepp zu kommen. */
.rechtstext{max-width:74ch;}
.rechtstext h3{font-size:19px;font-weight:500;margin:38px 0 12px;
  padding-top:20px;border-top:1px solid var(--line);}
.rechtstext h4{font-size:16px;font-weight:500;margin:22px 0 8px;}
.rechtstext p,.rechtstext li{line-height:1.7;margin-bottom:12px;}
.rechtstext ul{padding-left:20px;list-style:disc;}
.rechtstext .adresse{white-space:pre-line;line-height:1.7;margin-bottom:12px;}
.rechtstext .stand{color:var(--muted);font-size:14px;}
.rechtstext a{color:inherit;text-underline-offset:3px;}

/* ── ORTSSEITEN ───────────────────────────────────────────────────────────
   Aalen und Heidenheim. Beide Seiten hatten dieselbe Schwaeche: 700 Woerter
   Fliesstext und nichts zu sehen. Wer aus Aalen kommt, hat aber genau eine
   Frage, bevor er den Text ueberhaupt liest — "wie weit ist das?".

   Deshalb steht die Strecke oben, das Ortsbild in der Mitte und der Text am
   Ende. Der Text bleibt vollstaendig: er ist der Grund, warum die Seite bei
   "Haarentfernung Aalen" ueberhaupt gefunden wird. */

.os-weg{display:grid;grid-template-columns:minmax(230px,.72fr) 1fr;
  gap:clamp(26px,4vw,60px);align-items:start;
  margin-top:clamp(30px,4vw,46px);}

/* Liegt die Strecke quer — Schwaebisch Gmuend ist 24 Kilometer breit und nur
   fuenf hoch —, passt sie nicht in die schmale Spalte: gestaucht auf 410 px
   waeren die Ortsnamen zehn Pixel gross. Dann steht die Karte ueber der
   vollen Breite und der Text darunter. */
.os-weg.breit{grid-template-columns:1fr;gap:clamp(22px,3vw,38px);}
.os-weg.breit .os-karte{max-width:min(100%,640px);}
.os-karte-schiene{max-width:100%;}
.os-weg.breit .os-weg-info{display:grid;grid-template-columns:1fr auto;
  gap:clamp(24px,4vw,56px);align-items:start;padding-top:0;}
.os-weg.breit .os-weg-info h3{grid-column:1/-1;}
.os-weg.breit .os-adresse{margin-top:0;min-width:26ch;}

/* Die Karte traegt keinen eigenen Rahmen: der Kasten drumherum wuerde eine
   Abbildung behaupten, wo nur eine Linie steht.

   Gedeckelt wird die BREITE, nicht die Hoehe. Ein max-height liesse das
   Element schmaler werden als sein Feld, und die Zeichnung stuende dann
   links neben ihrer eigenen Spalte. */
.os-karte{width:100%;max-width:410px;height:auto;display:block;
  color:var(--ink);}
.os-karte text{font-family:var(--sans);}

.os-weg-info{padding-top:clamp(4px,1vw,14px);}
.os-weg-info h3{font-size:clamp(19px,2.2vw,25px);font-weight:500;
  letter-spacing:-.015em;margin-bottom:14px;}
.os-weg-info > p{color:var(--muted);font-size:15.5px;line-height:1.65;
  max-width:46ch;}
.os-adresse{margin-top:26px;padding-top:20px;border-top:1px solid var(--ink);
  display:grid;gap:3px;line-height:1.55;}
.os-adresse .eyebrow{margin-bottom:7px;}
.os-adresse b{font-weight:600;}
.os-adresse span{color:var(--muted);font-size:15px;}
.os-adresse a{text-decoration:underline;text-underline-offset:3px;}

/* ── DAS ORTSBILD ─────────────────────────────────────────────────────────
   Ein Band wie auf der Startseite, aber mit einer Pflicht mehr: unter einem
   fremden Foto steht, von wem es ist. Der Nachweis gehoert an das Bild und
   nicht ins Impressum — dort sucht ihn niemand. */
.os-bild{position:relative;}
.os-quelle{position:absolute;right:var(--pad);bottom:14px;z-index:2;
  font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.62);
  max-width:60ch;text-align:right;
  /* Der Nachweis liegt am unteren Bildrand, und was dort steht, weiss man
     vorher nicht — beim Heidenheimer Panorama sind es helle Hausdaecher.
     Der Schatten kostet nichts und macht die Zeile ueberall lesbar. */
  text-shadow:0 1px 4px rgba(0,0,0,.75);}
.os-quelle a{text-decoration:underline;text-underline-offset:2px;}
.os-quelle a:hover{color:rgba(255,255,255,.85);}

/* ── STIMMEN AUF DER ORTSSEITE ────────────────────────────────────────────
   Kein zweites Karussell: drei Karten, die stehen bleiben. Das Band auf der
   Startseite lebt von der Bewegung, hier waere sie nur ein Bauteil mehr
   zwischen Karte und Fliesstext. */
.os-stimmen{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px);margin-top:clamp(26px,3.4vw,38px);}
.os-stimme{border:1px solid var(--line);background:var(--soft);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:14px;}
.os-stimme .st-stars{font-size:13px;letter-spacing:.18em;line-height:1;
  color:color-mix(in srgb,var(--accent) 55%,var(--ink));}
.os-stimme blockquote{margin:0;font-size:15.5px;line-height:1.6;
  letter-spacing:-.005em;}
.os-stimme figcaption{margin-top:auto;font-size:12.5px;color:var(--muted);
  line-height:1.5;}
.os-stimme figcaption b{display:block;color:var(--ink);font-weight:500;
  font-size:13px;margin-bottom:2px;}

@media (max-width:900px){
  .os-weg{grid-template-columns:1fr;gap:clamp(24px,4vw,34px);}
  /* Auf dem Telefon steht die Karte ueber dem Text. In voller Breite wuerden
     die sechs Orte zu einer 20 cm hohen Saeule. */
  .os-karte{max-width:290px;margin-inline:auto;}
  /* Die querformatige Karte darf schmal bleiben, aber nicht auf 290 px:
     quer gelegt waeren die Ortsnamen sonst unleserlich. */
  /* Eine querformatige Karte auf 335 px gestaucht haette achtelpunkt-grosse
     Ortsnamen. Statt sie unlesbar zu machen, behaelt sie ihre Breite und
     bekommt eine eigene Schiene — waagerecht scrollt hier nur sie, nie die
     Seite. */
  .os-karte-schiene{overflow-x:auto;overscroll-behavior-x:contain;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);}
  .os-weg.breit .os-karte{max-width:none;min-width:520px;}
  .os-weg.breit .os-weg-info{grid-template-columns:1fr;}
  .os-stimmen{grid-template-columns:1fr;}
  .os-quelle{position:static;text-align:left;margin-top:18px;
    color:rgba(255,255,255,.55);}
}



:root,
:root[data-theme="light"]{
  --paper:#ffffff; --ink:#101010; --muted:#6e6e6e; --line:#e3e3e3;
  --soft:#f5f5f5; --soft2:#ededed; --ghost:#f0f0f0;
  --dark:#161616; --dark-ink:#f2f2f2; --dark-muted:#a0a0a0; --dark-line:#363636;
  --accent:#101010; --accent-ink:#ffffff;
  --neg:#8a8a8a; --pos:#101010;
  --c1a:#ededed; --c1b:#c9c9c9;
  --c2a:#e6e6e6; --c2b:#c0c0c0;
  --c3a:#dedede; --c3b:#b6b6b6;
}
:root[data-theme="dark"]{
  --paper:#121212; --ink:#f2f2f2; --muted:#a0a0a0; --line:#2a2a2a;
  --soft:#1a1a1a; --soft2:#212121; --ghost:#1c1c1c;
  --dark:#0b0b0b; --dark-ink:#f2f2f2; --dark-muted:#a0a0a0; --dark-line:#2a2a2a;
  --accent:#f2f2f2; --accent-ink:#0e0e0e;
  --neg:#8a8a8a; --pos:#f2f2f2;
  --c1a:#242424; --c1b:#3a3a3a;
  --c2a:#202020; --c2b:#343434;
  --c3a:#1c1c1c; --c3b:#303030;
}
/* Bilder/Video bleiben absichtlich farbig — neutralisiert wird nur die
   UI-Palette (Gold + warme Beigetoene). */
/* Schwarz als Akzent traegt nur auf hellem Papier. Auf den dunklen Flaechen
   kehrt er sich um — sonst faellt jede Auszeichnung ins Schwarz des Grundes.
   Das Gold davor konnte beides, ein Akzent aus dem Graukeil kann es nicht.
   Vererbt: eine Zeile pro Flaeche statt eine pro Auszeichnung. */
.announce, .hero, .st-quote, .statement, .st-fact,
.pack.featured, .promo-card, .band, footer{
  --accent:#f2f2f2; --accent-ink:#101010;
}
/* Der Marker war Gold auf 58 % — als Schwarz auf 58 % wird er zum Balken, der
   seinen eigenen Text verschluckt. Als heller Aufheller bleibt er, was er war:
   eine Hervorhebung, durch die man hindurchliest. */
.mark{background:color-mix(in srgb,var(--ink) 13%,transparent);}
:root[data-theme="dark"] .mark{background:color-mix(in srgb,var(--ink) 22%,transparent);}

/* Gold-Hover mischte gegen #fff; im Dunkelmodus wuerde Weiss auf Weiss laufen. */
:root[data-theme="dark"] .btn.primary:hover,
:root[data-theme="dark"] .hero .btn.primary:hover,
:root[data-theme="dark"] .statement .btn.primary:hover{
  background:#d6d6d6; border-color:#d6d6d6; color:#0e0e0e;
}


.va{position:fixed;right:var(--pad);bottom:24px;z-index:96;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
/* Auf schmalen Geraeten sitzt unten die Dockbar mit dem Buchungsknopf. Der
   Agent legt sich nicht darueber -- gebucht wird haeufiger als beraten. */
@media (max-width:900px){ .va{bottom:calc(84px + var(--safe-b));right:16px;} }

/* ── Der Anrufer ──────────────────────────────────────────────────────────
   Bewusst NICHT der dritte schwarze Knopf im Bild. Die Seite hat schon zwei,
   und der Probetermin soll die beiden gewinnen. Milchglas mit Haarlinie liest
   sich als Werkzeug, das da ist, wenn man es braucht -- nicht als drittes
   Angebot, das um dieselbe Entscheidung wirbt. */
.va-dock{display:flex;align-items:center;gap:13px;cursor:pointer;text-align:left;
  padding:10px 19px 10px 15px;min-height:58px;
  border:1px solid var(--line);color:var(--ink);
  background:color-mix(in srgb,var(--paper) 76%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 10px 34px rgba(0,0,0,.15);
  transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease,
             background var(--dur-ui) ease,transform var(--dur-press) var(--ease-out);}
.va-dock:hover{border-color:var(--ink);box-shadow:0 16px 46px rgba(0,0,0,.22);
  background:color-mix(in srgb,var(--paper) 90%,transparent);}
.va-dock:active{transform:translateY(1px);}
.va-dock:disabled{cursor:default;}
.va-dock .va-v{display:block;font-size:14px;letter-spacing:-.01em;margin-top:3px;
  white-space:nowrap;}

/* Drei Pegelbalken statt eines Mikrofonsymbols: ein Mikrofon sagt "wir hoeren
   mit", ein Pegel sagt "hier wird gesprochen". Sie atmen langsam -- lebendig,
   ohne zu blinken. */
.va-eq{display:flex;align-items:center;gap:3px;height:24px;flex:none;}
.va-eq i{display:block;width:3px;background:currentColor;
  transform-origin:50% 50%;animation:va-eq 1.9s var(--ease-out) infinite;}
.va-eq i:nth-child(1){height:9px;animation-delay:0s;}
.va-eq i:nth-child(2){height:20px;animation-delay:.24s;}
.va-eq i:nth-child(3){height:13px;animation-delay:.48s;}
@keyframes va-eq{0%,100%{transform:scaleY(.5);}50%{transform:scaleY(1);}}

/* Laeuft die Beratung, wird aus der Kachel ihr Schliessen-Knopf. Das Widget
   bringt keinen eigenen mit — weder `dismissible` noch die eingeklappte
   Fassung zeigen einen. Ein Ding, das sich oeffnen laesst und nicht wieder
   zu, ist ein Fehler, kein Fenster. */
.va-x{display:none;width:20px;height:20px;flex:none;}
.va-dock.zu .va-eq{display:none;}
.va-dock.zu .va-x{display:block;}

/* Auf dem Handy ist die zweizeilige Kachel ueber 200 px breit und legt sich
   quer ueber den Inhalt. Dort bleibt nur das Zeichen -- der Name steht im
   aria-label, damit die Vorlesefunktion ihn weiter bekommt. */
@media (max-width:760px){
  .va-dock{width:54px;min-height:54px;padding:0;gap:0;justify-content:center;}
  .va-dock .va-txt{display:none;}
}

/* ── Das Hinweisfeld ──────────────────────────────────────────────────────
   Sieht bewusst nicht wie ein Cookie-Balken aus. Ein Cookie-Balken wird
   weggeklickt, ohne gelesen zu werden -- und dann ist die Einwilligung zwar
   erteilt, aber nichts davon verstanden. */
.va-note{width:min(356px,calc(100vw - 32px));background:var(--paper);
  border:1px solid var(--line);padding:26px 26px 22px;
  box-shadow:0 26px 74px rgba(0,0,0,.28);
  transform-origin:100% 100%;
  animation:va-in 280ms var(--ease-out);
  /* Auf flachen Fenstern (Notebook quer, Handy gedreht) waere das Feld sonst
     hoeher als der Platz und schoebe seinen Kopf aus dem Bild. */
  max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);
  overflow-y:auto;overscroll-behavior:contain;}
@media (max-width:900px){ .va-note{max-height:calc(100dvh - 190px);} }
.va-note h4{font-size:21px;line-height:1.14;letter-spacing:-.022em;margin:11px 0 11px;}
.va-note p{font-size:12.5px;line-height:1.62;color:var(--muted);}

.va-k{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--muted);font-weight:500;}

/* Zweite Ebene: die Aufschluesselung liegt hinter einem Klick, damit das
   Feld nicht wie ein Beipackzettel aussieht. Wer die Daten bekommt und dass
   das Mikrofon aufgeht, steht bewusst DAVOR -- eine Einwilligung, deren
   Kernpunkte erst nach einem Klick auftauchen, ist keine informierte. */
.va-mehr{display:flex;align-items:center;justify-content:space-between;width:100%;
  margin-top:16px;padding:11px 0;cursor:pointer;background:none;
  border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  transition:color var(--dur-ui) ease;}
.va-mehr:hover{color:var(--ink);}
.va-mehr svg{width:11px;height:11px;flex:none;
  transition:transform var(--dur-ui) var(--ease-out);}
.va-mehr[aria-expanded="true"]{border-bottom-color:transparent;}
.va-mehr[aria-expanded="true"] svg{transform:rotate(45deg);}

.va-fakten{margin:0 0 2px;border-top:1px solid var(--line);}
.va-fakten > div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);}
.va-fakten dt{flex:0 0 88px;font-size:9px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);padding-top:3px;}
.va-fakten dd{font-size:12.5px;line-height:1.45;color:var(--ink);}

.va-ds{display:inline-block;margin-top:15px;font-size:11px;color:var(--muted);
  border-bottom:1px solid var(--line);transition:color var(--dur-ui) ease,border-color var(--dur-ui) ease;}
.va-ds:hover{color:var(--ink);border-bottom-color:var(--ink);}

.va-acts{display:flex;align-items:center;gap:18px;margin-top:20px;}
.va-acts .btn{flex:1 1 auto;padding:14px 18px;min-height:48px;font-size:10px;letter-spacing:.14em;}
/* Das Abbrechen ist bewusst kein zweiter Kasten: zwei gleich schwere Knoepfe
   machen aus einer Einladung eine Pruefungsfrage. */
.va-no{flex:none;font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);cursor:pointer;background:none;border:0;padding:5px 0;
  border-bottom:1px solid transparent;
  transition:color var(--dur-ui) ease,border-color var(--dur-ui) ease;}
.va-no:hover{color:var(--ink);border-bottom-color:var(--ink);}

@keyframes va-in{from{opacity:0;transform:translateY(10px) scale(.975);}}
@media (prefers-reduced-motion:reduce){
  .va-note{animation:none;}
  .va-eq i{animation:none;transform:none;}
  .va-mehr svg{transition:none;}
}

/* Das Widget haengt sich selbst unten rechts auf und bringt eigene Farben
   mit (weiss, runde Ecken, blaugrauer Rand). Ueber seine --el-Variablen
   bekommt es stattdessen die Toene dieser Seite. --el-overlay-padding ist
   sein Abstand zum Fensterrand -- auf schmalen Geraeten hebt er es ueber die
   Dockbar mit dem Buchungsknopf. */
elevenlabs-convai{
  --el-base:var(--paper); --el-base-hover:var(--soft); --el-base-active:var(--soft2);
  --el-base-border:var(--line); --el-base-subtle:var(--muted); --el-base-primary:var(--ink);
  --el-accent:var(--ink); --el-accent-hover:#333; --el-accent-active:#4a4a4a;
  --el-accent-border:var(--ink); --el-accent-subtle:var(--muted); --el-accent-primary:var(--paper);
  --el-button-radius:2px; --el-input-radius:2px; --el-bubble-radius:2px;
  /* Das Widget rechnet seine Flaechenradien aus dem Knopfradius (+6 bzw.
     +12 px) -- das ergaebe runde Ecken auf einer Seite, die keine hat. */
  --el-sheet-radius:2px; --el-compact-sheet-radius:2px; --el-dropdown-sheet-radius:2px;
  --el-overlay-padding:24px;
}
@media (max-width:900px){ elevenlabs-convai{--el-overlay-padding:88px;} }
/* Solange die Beratung laeuft, steht darunter der Schliessen-Knopf. Das
   Widget rueckt um dessen Hoehe nach oben, statt sich darauf zu legen. */
.va-offen elevenlabs-convai{--el-overlay-padding:96px;}
@media (max-width:900px){ .va-offen elevenlabs-convai{--el-overlay-padding:154px;} }

/* ══ SCROLL-ANIMATIONEN ═══════════════════════════════════════════════════
   Alles nativ ueber `animation-timeline`. Bewusst OHNE Bibliothek: GSAP
   waeren rund 70 KB fremder Code auf einer Seite, fuer die das
   ElevenLabs-Buendel eigens selbst gehostet wurde, um genau das zu
   vermeiden. Native Zeitachsen kosten null Bytes, laufen im Compositor und
   haengen kein Skript in den Scroll-Pfad — kein Jank, kein Scroll-Hijacking.

   Zwei Schalen darum:
   - `@supports`: wo es das nicht gibt (aeltere Safari), steht die Seite
     exakt so da wie vorher. Fortschritt, kein Ersatz.
   - `prefers-reduced-motion: no-preference`: wer Bewegung abbestellt hat,
     bekommt nichts davon. Dasselbe Versprechen wie im Rest der Datei.

   ⚠ Der Fallstrick, der hier Zeit gekostet hat: `view()` misst gegen den
   naechsten SCROLL-CONTAINER, nicht gegen das Fenster. `.hero`, `.band` und
   `.bg-foto` stehen alle auf `overflow:hidden` und sind damit selbst einer.
   Ein Bild darin liegt bildschirmfuellend in seinem eigenen Rahmen, ruehrt
   sich relativ dazu nie — und die Animation stand still. Deshalb tragen die
   Sektionen eine BENANNTE Zeitachse (`view-timeline-name`), die ihre eigene
   Lage im Fenster misst, und ihre Kinder haengen sich daran.
   ════════════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion:no-preference) {

  .hero   {view-timeline-name:--hl-hero;}
  .bg-foto{view-timeline-name:--hl-sek;}
  .band   {view-timeline-name:--hl-band;}

  /* ── Tiefe: Vollbild-Bilder ziehen langsamer als die Seite ──────────────
     Der Weg betraegt ±5 %, deshalb liegt eine Skalierung von 1.12 darunter —
     ohne sie liefe an einer Kante der Grund ins Bild. */
  @keyframes hl-sog{
    from{transform:translate3d(0,-5%,0) scale(1.12);}
    to  {transform:translate3d(0, 5%,0) scale(1.12);}
  }
  .sec-bg  {animation:hl-sog linear both;animation-timeline:--hl-sek;
            animation-range:cover 0% cover 100%;}
  .band-img{animation:hl-sog linear both;animation-timeline:--hl-band;
            animation-range:cover 0% cover 100%;}

  /* ── Der Hero verabschiedet sich, statt wegzurutschen ───────────────────
     Nur waehrend er das Fenster verlaesst (`exit`) — sonst waere die erste
     Sekunde auf der Seite schon Bewegung ohne Anlass. */
  @keyframes hl-hero-weg{
    from{transform:scale(1);}
    to  {transform:scale(1.09) translate3d(0,7%,0);}
  }
  .hero-video{animation:hl-hero-weg linear both;animation-timeline:--hl-hero;
              animation-range:exit 0% exit 100%;}
  @keyframes hl-hero-text{
    from{opacity:1;transform:none;}
    to  {opacity:0;transform:translate3d(0,-28px,0);}
  }
  .hero-inner{animation:hl-hero-text linear both;animation-timeline:--hl-hero;
              animation-range:exit 10% exit 85%;}

  /* ── Die Haarlinie ueber jedem Sektionskopf zeichnet sich ───────────────
     Die Seite kennt diese Geste schon: `.pstep::before` faehrt beim aktiven
     Schritt als Linie ein. Hier bekommt sie jede Sektion — nicht von einem
     Beobachter ausgeloest, sondern am Scroll gezogen. Die echte Kante wird
     durchsichtig, ihre Hoehe bleibt: kein Sprung. */
  @keyframes hl-strich{to{transform:scaleX(1);}}
  .sec-head{position:relative;border-top-color:transparent;}
  .sec-head::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
    background:var(--ink);transform:scaleX(0);transform-origin:left center;
    animation:hl-strich linear both;
    animation-timeline:view();
    animation-range:entry 8% entry 78%;}
  /* In den Fotosektionen liegt der Kopf in einem eigenen Scroll-Container —
     dort zaehlt die Zeitachse der Sektion. */
  /* Aus demselben Grund hier ein Bereich, der bei jeder Sektionshoehe
     monoton laeuft: `cover` ist auch fuer hohe Elemente sauber definiert,
     `entry` nicht. Und ein Strich ist Zierrat — verschwindet er, fehlt
     nichts. */
  .bg-foto .sec-head::before{animation-timeline:--hl-sek;
    animation-range:cover 0% cover 18%;}

  /* ── Lesefortschritt an der Unterkante der Kopfleiste ───────────────────
     Zwei Pixel, dieselbe Sprache wie die uebrigen Haarlinien. Haengt an der
     Zeitachse des Dokuments, nicht an einem Scroll-Ereignis. */
  header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--ink);transform:scaleX(0);transform-origin:left center;
    animation:hl-strich linear both;
    animation-timeline:scroll(root block);}

  /* ── Die Galerie: Karten treten seitlich ein ────────────────────────────
     `view(inline)` misst die waagerechte Achse — dieselbe, in der die
     Galerie geschoben wird. Bewusst mild: die Haut ist der Inhalt, sie darf
     nicht halb durchsichtig ankommen. */
  @keyframes hl-karte{
    from{opacity:.5;transform:scale(.95);}
    to  {opacity:1;transform:none;}
  }
  .ba-card{animation:hl-karte linear both;animation-timeline:view(inline);
    animation-range:entry 0% entry 65%;}

  /* ── KEINE Animation auf den drei Schritten ─────────────────────────────
     Stand hier und ist wieder raus. Die Karten liegen in `.bg-foto`, und das
     ist wegen `overflow:hidden` ein eigener Scroll-Container: eine eigene
     `view()`-Achse haetten sie also nicht, und ueber die Sektionsachse laesst
     sich „diese Karte tritt gerade ins Bild" nicht ausdruecken — die Sektion
     ist hoeher als das Fenster, `entry` endet dort erst spaet und der Bereich
     kippt. Ergebnis: die Karten standen auf `opacity:0` und kamen nie zurueck.
     Der ganze Inhalt der Sektion war weg.

     Sie brauchen es auch nicht: `.path-grid` traegt `.rv`, der Beobachter
     blendet sie gestaffelt ein. Das lief vorher und laeuft weiter.

     Merke: was Inhalt traegt, wird nicht auf `opacity:0` animiert, ohne dass
     jemand nachgesehen hat, ob er wieder auftaucht. */
}
}


/* ══ SEKTIONS-SIGNATUREN ══════════════════════════════════════════════════
   Der Block darueber ist die gemeinsame Grundlage — Tiefe hinter den
   Vollbildern, Haarlinie ueber jedem Kopf, Lesefortschritt. Ueberall gleich,
   damit die Seite EINE Handschrift hat.

   Hier bekommt jede Sektion darueber hinaus eine eigene Bewegung, die aus
   ihrem Inhalt kommt statt aus dem Effektkasten:

     Hero          Die vier Belege loesen sich gestaffelt, das Logo zieht nach.
     Ablauf        Eine Linie zeichnet den Weg ueber die drei Schritte.
     Ergebnisse    Die Fuge zwischen Vorher und Nachher zieht sich von oben.
     Vergleich     Die beiden Spalten treten von links und rechts gegeneinander an.
     hello points  Hat laengst eine eigene (Muenze, Beats) — bleibt unangetastet.
     Stimmen       Die fuenf Sterne wischen auf, die Karten drehen sich herein.
     Probetermin   Der Preis kommt heran, darunter zieht sich eine Linie.

   Vier Regeln, an die sich hier alles haelt:

   1. WAS INHALT TRAEGT, WIRD NICHT AUF `opacity:0` ANIMIERT, ohne dass der
      Bereich nachweislich monoton laeuft. Das ist der Fehler aus 67c8234 —
      die drei Schritte standen auf 0 und kamen nie zurueck, die Sektion war
      leer. Deshalb sind fast alle Keyframes hier reine Transformationen. Wo
      doch Deckkraft im Spiel ist (die Vergleichsspalten), liegt der Bereich
      auf `cover`: das ist auch fuer Sektionen hoeher als das Fenster sauber
      definiert, `entry` kippt dort.

   2. NICHTS UEBERSCHREIBT EINE BESTEHENDE `transform`. `.card` benutzt sie
      fuers Druecken, `.card .surface` fuers Ueberfahren — eine Animation
      wuerde beides totlegen, weil Animationen staerker sind als Regeln.

   3. NICHTS ANIMIERT DIE DECKKRAFT EINES `.rv`-ELEMENTS. Die gehoert dem
      Beobachter (`.rv` → `.rv.in`); eine Animation nimmt sie ihm weg.
      Angefasst werden ausschliesslich Kinder ohne `.rv`.

   4. WER SELBST `overflow:hidden` HAT, TAUGT NICHT ALS MESSLATTE. `view()`
      misst gegen den naechsten SCROLL-CONTAINER. `.card`, `.ba-shot`,
      `.hero`, `.band` und `.bg-foto` sind alle einer — ein Kind darin
      ruehrt sich relativ dazu nie, die Animation stuende still. Solche
      Kinder haengen an einer BENANNTEN Achse des Elternteils.

   `hl-strich` (scaleX 0 → 1) stammt aus dem Block darueber und wird hier
   zweimal wiederverwendet. Beide Bloecke haengen an denselben zwei
   Bedingungen, er ist also immer da, wenn dieser hier gilt.
   ════════════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion:no-preference) {

  /* ── KEINE Animation auf den vier Belegen ───────────────────────────────
     Hier zogen die vier Belege — 2 Geraete, NiSV, CE & FDA, 0 € — beim
     Abgang des Hero gestaffelt um 54 px nach oben, von links nach rechts.
     Nachgesehen und wieder raus: es sind Zahlen, die man liest, keine
     Zierde. Waehrend man sie liest, wandern sie unter dem Blick weg, und
     zwar jede in einem anderen Takt — vier Beweise, die sich beim Lesen
     bewegen, lesen sich wie ein Karussell.

     Das Bild dahinter skaliert weiter (`hl-hero-weg`), der Text darueber
     hebt ab (`hl-hero-text`). Die Tiefe bleibt also; nur die Belege stehen
     jetzt still an ihrer Stelle und scrollen mit der Seite wie jeder andere
     Text auch. Ihr Einblenden beim ersten Erscheinen macht weiterhin `.rv`
     — das ist der Beobachter, nicht der Scroll. */

  /* Das Geisterlogo hinter dem Video zieht langsamer weg als das Video davor.
     Zwei Geschwindigkeiten sind es, die Tiefe ueberhaupt erst erzeugen. */
  @keyframes hl-geist{
    from{transform:translate3d(0,0,0) scale(1);}
    to  {transform:translate3d(0,-11%,0) scale(1.07);}
  }
  .hero-ghost{animation:hl-geist linear both;animation-timeline:--hl-hero;
    animation-range:exit 0% exit 100%;}

  /* ── ABLAUF · Die Ziffern setzen sich ───────────────────────────────────
     Hier lief bis zum 2026-08-30 eine 2 px starke Linie ueber die volle
     Breite des Rasters mit, am Scroll gezogen. Sie ist raus: ueber vier
     Kacheln gespannt las sie sich nicht mehr als Fortschritt, sondern als
     Trennstrich quer durch die Sektion.

     Der Fortschritt bleibt sichtbar, nur leiser: `.pstep.on::before` setzt
     die Kante des erreichten Schrittes, und `.now` verteilt das Skript. */

  /* Die Ziffern 01 02 03 setzen sich nacheinander, waehrend die Sektion
     durchs Bild zieht. Nur die Groesse — Farbe und Rahmen gehoeren `.now`,
     und die verteilt das Skript. */
  @keyframes hl-ziffer{
    from{transform:scale(.68);}
    to  {transform:scale(1);}
  }
  #ablauf .pstep .ps-n{animation:hl-ziffer linear both;
    animation-timeline:--hl-sek;animation-range:cover 16% cover 34%;}
  /* Vier Schritte statt drei: die Fenster ruecken enger zusammen, damit der
     letzte noch innerhalb der Sektion ankommt. */
  #ablauf .pstep:nth-child(2) .ps-n{animation-range:cover 24% cover 42%;}
  #ablauf .pstep:nth-child(3) .ps-n{animation-range:cover 32% cover 50%;}
  #ablauf .pstep:nth-child(4) .ps-n{animation-range:cover 40% cover 58%;}

  /* ── ERGEBNISSE · Die Fuge zieht sich ───────────────────────────────────
     Die Galerie zeigt Vorher und Nachher in EINEM Bild; die senkrechte Fuge
     in der Mitte traegt die ganze Aussage — links davor, rechts danach.
     Bisher stand sie einfach da. Jetzt zieht sie sich von oben nach unten,
     waehrend die Karte hereinfaehrt, und das Bild dahinter kommt aus einer
     leichten Vergroesserung zur Ruhe.

     `.ba-shot` ist wegen `overflow:hidden` selbst ein Scroll-Container
     (Regel 4) — Fuge und Bild darin brauchen die benannte Achse der Karte.
     Deren Achse laeuft waagerecht (`view-timeline-axis:inline`): `.ba` wird
     seitlich geschoben, das ist die Richtung, in der hier etwas passiert. */
  .ba-card{view-timeline-name:--hl-bakarte;view-timeline-axis:inline;}
  @keyframes hl-fuge{
    from{transform:scaleY(0);}
    to  {transform:scaleY(1);}
  }
  .ba-shot::after{transform-origin:top center;
    animation:hl-fuge linear both;animation-timeline:--hl-bakarte;
    animation-range:entry 20% entry 90%;}
  @keyframes hl-ruhe{
    from{transform:scale(1.12);}
    to  {transform:scale(1);}
  }
  .ba-shot img{animation:hl-ruhe linear both;animation-timeline:--hl-bakarte;
    animation-range:entry 0% entry 95%;}

  /* ── KEIN Antritt der beiden Spalten mehr ───────────────────────────────
     Hier traten die Zellen gegeneinander an: unsere Seite von links, die
     andere von rechts, Zeile fuer Zeile versetzt, jede aus `opacity:0`.

     Das geht nicht mit dem Mitlesen zusammen. Eine Zeile, die sich beim
     Lesen erst aus der Unsichtbarkeit schiebt, hat zwei Ansagen zugleich —
     man sieht sie kommen UND man liest sie —, und keine gewinnt. Der Antritt
     ist deshalb raus, das Mitlesen der Zeilen hat seinen Platz genommen.

     Damit faellt auch die einzige Stelle in dieser Datei weg, an der Inhalt
     ueber Deckkraft hereinkam. Die Tabelle steht jetzt einfach da; was sich
     bewegt, ist die Helligkeit beim Lesen. */

  /* Haken und Kreuz setzen sich, waehrend ihre Zeile gelesen wird. Der
     Bereich kommt aus `--hl-a`/`--hl-span` der Zelle darum — dieselben
     gemessenen Werte, die auch die Zeichen benutzen. Vorher standen hier
     sechs abgezaehlte Zeilen mit festen Prozenten; die waeren jetzt gegen
     den Text verrutscht, auf dem Telefon um mehr als eine halbe Sektion.
     Nur Groesse, keine Deckkraft: der Haken traegt `--pos`/`--neg`, seine
     Farbe gehoert der Aussage und nicht dem Scroll. */
  @keyframes hl-marke{
    from{transform:scale(.4);}
    to  {transform:scale(1);}
  }
  #vergleich .cmp-mark{display:inline-block;animation:hl-marke linear both;
    animation-timeline:--hl-sek;
    animation-range:cover calc(var(--hl-a) * 1%)
                    cover calc((var(--hl-a) + var(--hl-span) * 0.4) * 1%);}

  /* ── VERGLEICH · Die Sektion wird mitgelesen ───────────────────────────
     Der Absatz unter der Ueberschrift stand fertig da, in `--muted` — hell-
     grau auf dem Foto. Jetzt zieht die Helligkeit beim Scrollen Wort fuer
     Wort durch ihn hindurch, bis er ganz in `--ink` steht: das Auge liest
     mit, statt einen Block anzusehen. Kein neuer Ton — beide Werte stehen
     schon auf `.bg-foto`, hier laeuft nur der Weg dazwischen.

     Die ZEICHEN sind einzelne Spans; sie entstehen erst im Browser (Skript
     „VERGLEICH — den Text der Sektion in Woerter zerlegen"), damit der Satz im
     Quelltext ein Satz bleibt. Jedes traegt `--w`, seinen Platz im Satz von
     0 bis 1, und rechnet seinen Bereich selbst daraus aus — der Absatz darf
     umformuliert werden, ohne dass hier etwas nachgezaehlt wird.

     `--hl-sek` statt `view()`, weil `.bg-foto` selbst ein Scroll-Container
     ist (Regel 4), und `cover` statt `entry`, weil die Sektion hoeher ist
     als das Fenster (Regel 1).

     Wo auf dieser Achse die Strecke liegt, auf der man den Absatz liest,
     haengt an Sektionshoehe, Fensterhoehe und der Lage des Absatzes darin —
     auf einem Telefon also woanders als auf dem Desktop. Feste Prozente
     trafen deshalb nur eine Geraeteklasse. `--hl-a` (Anfang), `--hl-span`
     (Weg des letzten Zeichens) und `--hl-win` (Fenster eines Zeichens)
     kommen darum gemessen aus dem Skript und werden bei jeder Groessen-
     aenderung neu gesetzt. Die Werte hier sind die Vorgabe fuer den Fall,
     dass das Skript nicht laeuft: der Desktop-Stand.

     Das Fenster eines Zeichens ist sechs Zeichenabstaende breit — die Kante
     bleibt klar und laeuft mitten durch das Wort („güns|tige"), statt weich
     ueber ganze Woerter zu wischen. */
  @keyframes hl-mitlesen{
    from{color:var(--hl-vor);}
    to  {color:var(--hl-nach);}
  }
  #vergleich .sec-head p.mitlesen,
  #vergleich .cmp-table tbody th[scope="row"],
  #vergleich .cmp-table tbody .cmp-cell{--hl-a:22;--hl-span:20;--hl-win:3;}
  #vergleich .mlz{
    animation:hl-mitlesen linear both;animation-timeline:--hl-sek;
    animation-range:cover calc((var(--hl-a) + var(--w) * var(--hl-span)) * 1%)
                    cover calc((var(--hl-a) + var(--w) * var(--hl-span) + var(--hl-win)) * 1%);}

  /* Ein Ungelesen, zwei Gelesen.

     Der erste Anlauf setzte das Ungelesen auf `--muted` (#c6c2bc) und das
     Gelesen auf `--ink` (#f4f3f1) — 46 Stufen Unterschied. Nachgesehen war
     das zu wenig: man sah, DASS sich etwas aufhellt, aber nicht, WO man
     gerade steht. Jetzt beginnt alles bei `--hl-vor`, und das liegt
     deutlich tiefer: 106 Stufen bis `--ink`, mehr als doppelt so weit.

     Warum nicht noch dunkler: ungelesener Text ist trotzdem Text. #89837d
     steht auf dem abgedunkelten Foto bei rund 5:1 und bleibt damit ueber
     der Schwelle fuer Fliesstext. Eine Stufe tiefer waere die Markierung
     schoener und der Satz waehrenddessen nicht mehr lesbar — das ist kein
     Tausch, den man macht.

     Zwei Ziele, weil die Tabelle zwei Staerken hat: unsere Spalte steht in
     `--ink`, „Andere Studios" und die Unterzeilen in `--muted`. Ein Verlauf,
     der ueberall auf `--ink` endete, haette diese Rangfolge eingeebnet und
     beide Spalten gleich laut gemacht. Der START ist dagegen ueberall
     derselbe — ungelesen ist ungelesen. */
  #vergleich{--hl-vor:#89837d;}
  #vergleich .mlz{--hl-nach:var(--ink);}
  #vergleich td.cmp-them .mlz,
  #vergleich .cmp-sub .mlz{--hl-nach:var(--muted);}

  /* ── STIMMEN · Die Sterne setzen sich ───────────────────────────────────
     „5,0 aus 24 Rezensionen bei Google." Der Beleg stand als fertige Zeile
     da. Jetzt wischen die fuenf Sterne von links auf, waehrend die Zeile
     hereinkommt — einer nach dem anderen, am Scroll gezogen.

     Der erste Entwurf legte einen zweiten, farbigen Satz Sterne darueber und
     gab ihn frei. Nachgemessen war das wirkungslos: `--accent` ist auf dieser
     Seite inzwischen DERSELBE Wert wie `--ink` (das Gold ist raus), und
     `.gg-stars` steht ohnehin schon auf `color-mix(--accent 55%, --ink)` —
     der Zwilling haette exakt die Farbe dessen gehabt, was er ueberdecken
     sollte. Ein Wischen der Sterne selbst braucht gar keinen Farbunterschied.

     Kein Verstoss gegen Regel 1: die Zeichen sind `aria-hidden`, die Aussage
     tragen die „5,0" und „aus 24 Rezensionen" daneben, und der Bereich ist
     monoton mit `both` — am Ende steht die Zeile vollstaendig.

     `cover`, nicht `entry`: die Zeile ist 15px hoch, ihr `entry`-Bereich
     waere nach 15 Pixeln Scroll vorbei und niemand saehe etwas davon. */
  @keyframes hl-sterne{
    from{clip-path:inset(0 100% 0 0);}
    to  {clip-path:inset(0 0 0 0);}
  }
  .gg-stars{animation:hl-sterne linear both;animation-timeline:view();
    animation-range:cover 14% cover 44%;}

  /* Die Zuschriften drehen sich herein statt zu skalieren — die Galerie
     darueber skaliert bereits, und zwei Baender mit derselben Geste waeren
     ein Band zu viel. */
  @keyframes hl-stimme{
    from{transform:perspective(1000px) rotateY(-9deg) translate3d(28px,0,0);}
    to  {transform:perspective(1000px) rotateY(0deg)  translate3d(0,0,0);}
  }
  .st-card{animation:hl-stimme linear both;animation-timeline:view(inline);
    animation-range:entry 0% entry 72%;}

  /* ── PROBETERMIN · Der Preis kommt heran ────────────────────────────────
     „130 € — Wert Ihrer Probebehandlung." Die Zahl ist das Argument des
     ganzen Bandes, und sie steht am Ende der Seite, wo die Entscheidung
     faellt. Sie kommt aus einer leichten Vergroesserung zur Ruhe, danach
     zieht sich eine Linie darunter — in `currentColor`, weil `var(--ink)`
     hier im Hellmodus fast schwarz ist und auf dem dunklen Band verschwaende.

     `.band-inner` traegt `.rv` (Regel 3) — angefasst wird die Zahl darin,
     die keins traegt. `--hl-band` statt `view()`, weil `.band` wegen
     `overflow:hidden` selbst ein Scroll-Container ist (Regel 4). */
  @keyframes hl-preis-an{
    from{transform:translate3d(0,16px,0) scale(1.12);}
    to  {transform:translate3d(0,0,0) scale(1);}
  }
  .band-preis{position:relative;transform-origin:left bottom;
    animation:hl-preis-an linear both;animation-timeline:--hl-band;
    animation-range:cover 10% cover 48%;}
  .band-preis::after{content:"";position:absolute;left:0;bottom:-12px;
    width:clamp(88px,10vw,150px);height:2px;background:currentColor;
    transform:scaleX(0);transform-origin:left center;
    animation:hl-strich linear both;animation-timeline:--hl-band;
    animation-range:cover 26% cover 60%;}

  /* ── AUF DEM TELEFON ────────────────────────────────────────────────────
     Hier stand die einzige Sonderregel fuer schmale Geraete: im Vergleich
     stehen die beiden Spalten untereinander statt nebeneinander, ein Antritt
     von links und rechts haette dort keinen Gegner mehr gehabt — sie hoben
     stattdessen. Mit dem Antritt ist auch sie weg.

     Es braucht sie nicht mehr: das Mitlesen misst seinen Bereich an der
     Geometrie, und die stimmt auf dem Telefon von selbst. Keine Sonderregel,
     keine zweite Wahrheit, die jemand nachziehen muesste.

     Der Rest bleibt, wie er ist. Native Zeitachsen laufen im Compositor,
     kein Skript haengt im Scroll-Pfad — es gibt keinen Grund, dem Telefon
     die Seite aermer auszuliefern. */
}
}


/* Mobil zuerst: die Mehrheit kommt vom Handy, oft ueber die Ortsseiten.
   Alles hier arbeitet mit den Tokens der Seite, damit der Check den
   Dunkelmodus und die Farbwelt ohne eigene Werte mitmacht. */
/* Linksbuendig zur Ueberschrift, nicht in der Sektion zentriert. Zentriert
   sass der Fragebogen rund 170 px weiter rechts als der Kopf darueber -- zwei
   Kanten in einem Block, und genau das laesst eine Seite verzogen aussehen. */
.hc{max-width:720px;}

.hc-vorab{max-width:62ch;color:var(--muted);font-size:16px;line-height:1.65;
  margin:0 0 clamp(34px,4.5vw,56px);}

.hc-fortschritt{margin-bottom:clamp(24px,5vw,40px);}
/* Die Frage traegt den Blick, nicht die Sektionsueberschrift darueber: sie
   darf deutlich kleiner sein als ein h2 und trotzdem die groesste Zeile im
   Fragebogen. */
.hc-frage{max-width:22ch;}
.hc-balken{height:2px;background:var(--line);position:relative;overflow:hidden;}
.hc-balken span{display:block;height:100%;background:var(--ink);
  transition:width var(--dur-ui) var(--ease-out);}
.hc-zaehler{margin-top:10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--muted);}

.hc-kopf{margin-bottom:clamp(20px,4vw,32px);}
.hc-frage{font-size:clamp(24px,5vw,36px);}
.hc-frage:focus-visible{outline:2px solid var(--ink);outline-offset:6px;}
.hc-hilfe{margin-top:10px;color:var(--muted);font-size:15px;}

/* AUSWAHLKACHELN */
.hc-kacheln{display:grid;gap:10px;grid-template-columns:1fr;}
.hc-kachel{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font:inherit;font-size:15px;cursor:pointer;
  transition:border-color var(--dur-ui) var(--ease-out),
             background var(--dur-ui) var(--ease-out);}
.hc-kachel:hover{border-color:var(--ink);}
.hc-kachel:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.hc-kachel.an{border-color:var(--ink);background:var(--soft);}
/* Nicht nur der Rahmen traegt die Auswahl: ein Haken steht daneben, damit sie
   auch ohne Farb- und Kontrastwahrnehmung ankommt. */
.hc-kachel.an .hc-label::after{content:" \2713";font-weight:600;}
.hc-farbe{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);}
.hc-kachel-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hc-kurz{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.hc-label{line-height:1.35;}

.hc-hautton .hc-kacheln,.hc-haarfarbe{grid-template-columns:1fr;}
@media (min-width:640px){
  .hc-kacheln{grid-template-columns:1fr 1fr;}
  .hc-zustand{grid-template-columns:1fr;}
}

.hc-gruppe{margin-bottom:22px;}
.hc-gruppe h3{margin-bottom:10px;}

.hc-keins{margin-top:12px;padding:12px 16px;width:100%;text-align:left;
  border:1px dashed var(--line);background:transparent;color:var(--muted);
  font:inherit;font-size:14px;cursor:pointer;}
.hc-keins.an{border-style:solid;border-color:var(--ink);color:var(--ink);}
.hc-keins:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.hc-datum{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:14px;}
.hc-datum input{padding:12px 14px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font:inherit;}
.hc-datum input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* FUSSLEISTE */
.hc-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-top:clamp(24px,5vw,36px);padding-top:20px;border-top:1px solid var(--line);}
.hc-weiter[disabled]{opacity:.35;cursor:not-allowed;}
.hc-weiter[disabled]:hover{background:var(--ink);color:var(--paper);}
.hc-skip{font-size:11px;color:var(--muted);}

.hc-datenschutz{margin-top:18px;}
.hc-leise{color:var(--muted);font-size:13px;line-height:1.55;}
.hc-timeline + .hc-leise{margin-top:20px;}

/* ERGEBNIS */
.hc-verdikt{display:flex;flex-direction:column;gap:8px;
  padding-left:16px;border-left:3px solid var(--line);margin-bottom:20px;}
.hc-verdikt .hc-zeichen{font-size:26px;line-height:1;}
.hc-verdikt .hc-titel{font-size:clamp(24px,5vw,38px);margin-top:4px;}
.hc-titel:focus-visible{outline:2px solid var(--ink);outline-offset:6px;}
/* Farbe ist die Zugabe, nicht die Aussage -- Zeichen und Wort stehen daneben.
   Und das ist hier keine Vorsichtsmassnahme, sondern Notwendigkeit: die Seite
   laeuft in einer neutralisierten Palette (siehe style#sw-preview), in der
   --pos, --neg und --accent auf Grauwerte fallen. Deshalb unterscheidet auch
   die STRICHART die vier Ergebnisse -- sie traegt ohne jede Farbe. */
.hc-gut{border-left-color:var(--pos);}
.hc-gut .hc-zeichen{color:var(--pos);}
.hc-bedingt{border-left-color:var(--accent);}
.hc-bedingt .hc-zeichen{color:var(--accent);}
.hc-klaeren{border-left-color:var(--muted);}
.hc-nein{border-left-color:var(--neg);}
.hc-nein .hc-zeichen{color:var(--neg);}
.hc-bedingt{border-left-style:dashed;}
.hc-klaeren{border-left-style:dotted;}
.hc-nein{border-left-width:5px;border-left-style:double;}

.hc-vorspann{font-size:17px;}
.hc-klartext{font-size:18px;line-height:1.55;margin-bottom:18px;}
.hc-sitzungen{margin-top:14px;font-size:20px;font-weight:500;}
.hc-geraet{margin-top:8px;color:var(--muted);font-size:15px;}
.hc-hinweis{margin-top:16px;padding:14px 16px;background:var(--soft);font-size:15px;}

.hc-gruende{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;}
.hc-grund{padding:14px 16px;border:1px solid var(--line);}
.hc-grund h4{margin:0 0 6px;font-size:14px;font-weight:600;}
.hc-grund p{font-size:14px;color:var(--muted);line-height:1.55;}
.hc-grund.hc-blocker{border-color:var(--neg);}
.hc-grund.hc-consult,.hc-grund.hc-limit{border-color:var(--accent);}

.hc-abschnitt{margin:32px 0 12px;font-size:13px;text-transform:uppercase;
  letter-spacing:.18em;font-weight:500;color:var(--muted);}

.hc-bereich-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.hc-bereich-liste li{padding:6px 12px;border:1px solid var(--line);font-size:13px;}

.hc-takt,.hc-vorwaerts,.hc-dauer,.hc-ziel{font-size:16px;line-height:1.6;margin-top:10px;}
.hc-vorwaerts{font-size:18px;}
.hc-ziel{margin-top:18px;padding:14px 16px;background:var(--soft);}
/* Knappe Zeit bekommt Gewicht, keinen Alarm: kein Rot, kein Blinken, kein
   Zaehler. Die Dringlichkeit ist biologisch und traegt sich selbst. */
.hc-knapp{border-left:3px solid var(--accent);}
.hc-ziel-nein{border-left:3px solid var(--muted);}

/* TIMELINE: mobil senkrecht, ab Tablet waagerecht */
.hc-timeline{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0;}
.hc-punkt{display:flex;align-items:baseline;gap:14px;padding:9px 0 9px 20px;
  position:relative;border-left:1px solid var(--line);}
.hc-punkt::before{content:"";position:absolute;left:-4px;top:16px;
  width:7px;height:7px;border-radius:50%;background:var(--ink);}
.hc-punkt:last-child::before{width:11px;height:11px;left:-6px;}
.hc-punkt-nr{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto;min-width:88px;}
/* „August 2026" gehoert auf eine Zeile. Umgebrochen steht neben einem
   zweizeiligen Monat ein einzeiliger, und die Reihe franst aus. */
.hc-punkt-monat{font-size:15px;white-space:nowrap;}
@media (min-width:760px){
  .hc-timeline{grid-auto-flow:column;grid-auto-columns:1fr;}
  .hc-punkt{flex-direction:column;gap:6px;padding:22px 8px 0;
    border-left:0;border-top:1px solid var(--line);}
  .hc-punkt::before{left:0;top:-4px;}
  .hc-punkt:last-child::before{left:-2px;top:-6px;}
  .hc-punkt-nr{min-width:0;white-space:nowrap;}
  /* Optisch weg, fuer Vorlesehilfen da. */
  .hc-punkt-wort{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;}
  /* Acht Spalten teilen sich die Breite: der Monat darf hier kleiner werden,
     damit er einzeilig bleibt, statt die Spalte zu sprengen. */
  .hc-punkt-monat{font-size:14px;}
}

.hc-betrag{margin-top:6px;font-size:clamp(28px,6vw,40px);font-weight:500;letter-spacing:-.02em;}
.hc-preis .link-u{margin-top:12px;}

.hc-alternative{margin-top:28px;padding:18px;border:1px solid var(--line);}
.hc-alternative p{font-size:15px;line-height:1.6;}
.hc-anderes{margin-top:24px;}
.hc-anderes p{font-size:14px;color:var(--muted);margin:8px 0 12px;}

.hc-aktionen{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;}
.hc-recht{margin-top:24px;font-size:12px;line-height:1.6;color:var(--muted);}
.hc-mail{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
.hc-mail-feld{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:14px;}
.hc-mail-feld input{padding:12px 14px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font:inherit;}
.hc-mail-feld input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.hc-mail-feld input:disabled{opacity:.6;}
.hc-mail-haken{display:flex;gap:10px;align-items:flex-start;margin:14px 0 16px;
  font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer;}
.hc-mail-haken input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--ink);}
.hc-mail-meldung{margin-top:12px;font-size:14px;}
.hc-mail-meldung:empty{display:none;}
.hc-mail-fehler{color:var(--neg);}
.hc-mail-gut{color:var(--pos);}
.hc-mail-link{margin-top:12px;}
.hc-neu{margin-top:28px;}
.hc-fehler{padding:14px 16px;border:1px solid var(--neg);color:var(--neg);}
.hc-noscript{color:var(--muted);font-size:15px;line-height:1.6;}

/* DER EINSTIEG auf Preis- und Ortsseiten.

   Auf der Startseite steht der Check inzwischen als Schritt 01 in „In vier
   Schritten zum Ergebnis" -- dort, wo er hingehoert: vor dem Probetermin,
   weil er die Frage beantwortet, die vor dem Termin kommt. Die eigene Karte
   davor ist damit entfallen; sie haette dieselbe Aufforderung zweimal
   hintereinander gestellt.

   Hier bleibt es beim eigenen Kasten statt einer Fussnote: Aussage,
   Begruendung und Knopf auf einer Hoehe.

   Die Kaesten tragen `.rv` wie der Rest der Seite. Sie hatten es
   zwischenzeitlich nicht, weil eine Messung sie auf opacity:0 zeigte und das
   nach einem Fehler aussah -- tatsaechlich stand die Einblendung nur mitten
   in ihrer Transition. Ein Block, der als einziger ohne Uebergang dasteht,
   sieht nicht auffaelliger aus, sondern unfertig. */
.hc-quer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 28px;margin-block:clamp(22px,3vw,32px) clamp(26px,3.5vw,40px);
  padding:clamp(20px,3vw,28px);border:1px solid var(--line);background:var(--soft);}
.hc-quer-text{display:flex;flex-direction:column;gap:6px;max-width:62ch;}
.hc-quer-text strong{font-size:clamp(17px,2vw,21px);font-weight:500;letter-spacing:-.01em;}
.hc-quer-text span{color:var(--muted);font-size:15px;line-height:1.55;}
.hc-quer .btn{flex:0 0 auto;}
@media (max-width:640px){
  .hc-quer .btn{width:100%;}
}

/* Wer Bewegung abbestellt hat, bekommt keine. Der Balken springt dann auf
   seinen Wert, statt dorthin zu laufen. */
@media (prefers-reduced-motion:reduce){
  .hc-balken span,.hc-kachel{transition:none;}
}