/* ===================================================================
   Tagstamp™ — site.css (Ausbaustufe 2, 07.09.2026)
   Hell, eckig, ein dunkler Abschnitt je Seite. Sechs Textstile.
   =================================================================== */

/* ============ Fonts (self-hosted) ============ */
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ============ Tokens ============ */
:root{
  --ink:#3d3b60;
  --ink-70:#666481;
  --ink-40:#acabbb;
  --ink-15:#e4e4e9;
  --accent:#0e7c86;       /* Petrol (Standard) */
  --accent-dark:#0a5e66;
  --accent-ink:#ffffff;   /* Textfarbe auf Akzentflächen (Kontrast) */
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --line:#777690;
  --white:#ffffff;

  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:40px; --sp-9:40px;

  --gutter:16px;
  --maxw:1280px;

  --h1: 34px; --h1-lh:1.12;
  --h2: 28px; --h2-lh:1.16;
  --h3: 22px; --h3-lh:1.22;
  --lead: 17px; --lead-lh:1.5;
  --body: 16px; --body-lh:1.6;
  --caption: 12px; --caption-lh:1.4;

  --font-head:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Inter", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: 180ms;
  --dur-m: 360ms;
  --dur-l: 640ms;

  color-scheme: light;
}
@media (min-width:960px){
  :root{
    --gutter:24px;
    --sp-8:64px; --sp-9:64px;
    --h1:56px; --h1-lh:1.08;
    --h2:40px; --h2-lh:1.12;
    --h3:28px; --h3-lh:1.2;
    --lead:20px; --lead-lh:1.5;
    --body:17px; --body-lh:1.65;
  }
}

/* ============ Reset / base ============ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--body);
  line-height:var(--body-lh);
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
h1,h2,h3{margin:0;color:var(--ink);}
h1,h2{font-family:var(--font-head);font-weight:600;}
h3{font-family:var(--font-body);font-weight:600;}
h1{font-size:var(--h1);line-height:var(--h1-lh);font-weight:700;letter-spacing:-0.01em;}
h2{font-size:var(--h2);line-height:var(--h2-lh);}
h3{font-size:var(--h3);line-height:var(--h3-lh);}
p{margin:0;}
a{color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;-webkit-appearance:none;appearance:none;border-radius:0;}
input,select,textarea{border-radius:0;font-family:inherit;}

.lead{font-size:var(--lead);line-height:var(--lead-lh);color:var(--ink);}
.body-text{font-size:var(--body);line-height:var(--body-lh);color:var(--ink);}
.caption{font-size:var(--caption);line-height:var(--caption-lh);color:var(--ink-70);}
.overline{
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.4;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink);
}

:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

.skip-link{
  position:absolute;
  left:var(--sp-3);
  top:-100px;
  z-index:1000;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--body);
  padding:12px 20px;
  text-decoration:none;
  transition:top var(--dur-s) var(--ease);
}
.skip-link:focus{
  top:var(--sp-3);
  outline:2px solid var(--white);
  outline-offset:2px;
}

/* ============ Layout helpers ============ */
.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.grid12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
}
section{
  padding-block:var(--sp-8);
}
section[data-alt="1"]{background:var(--bg-alt);}
.section-head{
  grid-column:1/-1;
  max-width:760px;
  margin-bottom:8px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  border:2px solid var(--ink);
  padding:14px 28px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--lead);
  line-height:1.1;
  text-decoration:none;
  cursor:pointer;
  min-height:44px;
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  background:var(--bg);
  color:var(--ink);
}
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
.btn-secondary{background:transparent;}
.btn-secondary:hover{background:var(--ink);color:var(--white);}
.btn-ghost-dark{border-color:var(--white);color:var(--white);background:transparent;}
.btn-ghost-dark:hover{background:var(--white);color:var(--ink);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.55;cursor:default;}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--body);
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border-color var(--dur-s) var(--ease), gap var(--dur-s) var(--ease);
}
.link-arrow:hover{border-color:var(--ink); gap:12px;}
.link-arrow svg{flex:0 0 auto;}

/* ============ Header / Nav ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#ffffff;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(32,32,32,.04);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:88px;
  transition:height var(--dur-m) var(--ease);
}
.site-header.is-scrolled .nav-row{height:64px;}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.brand-mark{width:26px;height:26px;flex:0 0 auto;}
.brand-mark rect,.brand-mark path{fill:var(--ink);}
.brand-word{
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--lead);
  letter-spacing:-0.01em;
}
.brand-word sup{font-size:.5em;font-weight:600;}

.nav-links{
  display:none;
  align-items:center;
  gap:var(--sp-6);
}
.nav-links a{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--body);
  text-decoration:none;
  color:var(--ink);
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-s) var(--ease);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{transform:scaleX(1);}

.nav-right{display:flex;align-items:center;gap:var(--sp-4);}
.nav-cta{display:none;}
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  background:transparent;
  border:2px solid var(--ink);
  cursor:pointer;
}
.nav-toggle svg{width:20px;height:14px;}
.nav-toggle rect{fill:var(--ink);}

@media (min-width:960px){
  .nav-links{display:flex;}
  .nav-cta{display:inline-flex;}
  .nav-toggle{display:none;}
}

/* Off-canvas mobile menu */
.offcanvas{
  position:fixed;
  inset:0;
  z-index:200;
  visibility:hidden;
}
.offcanvas__scrim{
  position:absolute;inset:0;
  background:var(--ink);
  opacity:0;
  transition:opacity var(--dur-m) var(--ease);
}
.offcanvas__panel{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(86vw,360px);
  background:var(--bg);
  border-left:1px solid var(--line);
  transform:translateX(100%);
  transition:transform var(--dur-m) var(--ease);
  display:flex;
  flex-direction:column;
  padding:var(--sp-4);
}
.offcanvas.is-open{visibility:visible;}
.offcanvas.is-open .offcanvas__scrim{opacity:.32;}
.offcanvas.is-open .offcanvas__panel{transform:translateX(0);}
.offcanvas__top{display:flex;justify-content:flex-end;margin-bottom:var(--sp-6);}
.offcanvas__close{
  width:44px;height:44px;
  border:2px solid var(--ink);
  background:transparent;
  cursor:pointer;
  position:relative;
}
.offcanvas__close::before,.offcanvas__close::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:18px;height:2px;
  background:var(--ink);
}
.offcanvas__close::before{transform:translate(-50%,-50%) rotate(45deg);}
.offcanvas__close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.offcanvas__links{display:flex;flex-direction:column;gap:var(--sp-2);}
.offcanvas__links a{
  display:block;
  padding:var(--sp-3) var(--sp-2);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--lead);
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  min-height:44px;
}
.offcanvas__cta{margin-top:var(--sp-6);}

/* ============ Sticky-Unternavigation ============ */
.subnav{
  position:sticky;
  top:64px;
  z-index:90;
  height:40px;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.subnav__track{
  height:100%;
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.subnav__track::-webkit-scrollbar{display:none;height:0;}
.subnav a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  height:100%;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--ink-70);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
.subnav a:hover{color:var(--ink);}
.subnav a.is-active{color:var(--ink);border-bottom-color:var(--accent);}
@media (max-width:639px){
  /* Scroll-Hinweis: rechte Kante blendet in Weiß aus, solange die Leiste
     horizontal scrollbar ist — rein dekorativ (generierter Inhalt, kein
     Text), daher ohne eigenes Accessibility-Gewicht. .subnav ist bereits
     position:sticky — das reicht als Positionierungskontext für ::after,
     keine eigene position:relative nötig (würde das von JS gesetzte
     inline top zweckentfremden und die Leiste nach unten verschieben). */
  .subnav::after{
    content:"";
    position:absolute;
    top:0;right:0;bottom:0;
    width:24px;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--white) 100%);
    pointer-events:none;
  }
}

/* ============ Hero (full-bleed photo) ============ */
.hero{
  position:relative;
  height:52vh;
  min-height:340px;
  overflow:hidden;
}
@media (min-width:640px){
  .hero{height:46vh;min-height:380px;max-height:520px;}
}
.hero-bg{
  position:absolute;
  inset:-4% -2%;
  z-index:0;
  will-change:transform;
}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;}
@media (max-width:639px){
  /* Bagger im Bild sichtbar halten (Bild rechts betont) statt der Mitte,
     die auf schmalen Formaten vor allem Himmel zeigt. */
  .hero-bg img{object-position:70% 50%;}
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:flex-end;
  background:linear-gradient(0deg, rgba(32,32,32,.78) 0%, rgba(32,32,32,.62) 45%, rgba(32,32,32,.28) 72%, rgba(32,32,32,0) 100%);
}
@media (max-width:639px){
  /* Zweiter Anlauf: 0.55/0.15 machte den Text auf hellem Himmel kaum
     lesbar. Jetzt stark unten (0.78), bis 55% Höhe auf 0.10 abgeblendet,
     der obere Bildteil (wo kein Text steht) bleibt darüber frei sichtbar. */
  .hero-overlay{background:linear-gradient(0deg, rgba(32,32,32,.78) 0%, rgba(32,32,32,.10) 55%, rgba(32,32,32,0) 100%);}
  .hero .hero-copy{text-shadow:0 1px 2px rgba(32,32,32,.35);}
  .hero-lead-more{display:none;}
}
@media (min-width:640px){
  .hero-overlay{
    background:linear-gradient(90deg, rgba(32,32,32,.68) 0%, rgba(32,32,32,.62) 32%, rgba(32,32,32,0) 60%);
  }
}
.hero-overlay .wrap{width:100%;}
.hero-copy{
  position:relative;
  color:var(--white);
  padding-block:var(--sp-4) var(--sp-5);
}
@media (min-width:640px){
  .hero-copy{max-width:560px;}
}
.hero-copy .overline{color:var(--white);}
.hero-copy h1{color:var(--white);margin-bottom:var(--sp-3);font-size:clamp(30px,3.6vw,46px);line-height:1.1;}
.hero-copy .lead{color:rgba(255,255,255,.94);margin-bottom:var(--sp-3);max-width:42ch;font-size:17px;line-height:1.45;}
.hero-copy .hero-fineprint{color:rgba(255,255,255,.8);max-width:56ch;}
.hero-copy .link-arrow{color:var(--white);white-space:nowrap;}
.hero-copy .link-arrow:hover{border-color:var(--white);}
.hero-overline{margin-bottom:var(--sp-3);}
.hero-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);}
@media (max-width:479px){
  .hero-actions{gap:var(--sp-2);}
  .hero-actions .btn{padding-inline:18px;}
}

.hero-reveal{opacity:0;transform:translateY(18px);}
.js .hero-reveal{
  animation:heroIn var(--dur-l) var(--ease) forwards;
}
.js .hero-reveal[data-d="1"]{animation-delay:.05s;}
.js .hero-reveal[data-d="2"]{animation-delay:.16s;}
.js .hero-reveal[data-d="3"]{animation-delay:.27s;}
.js .hero-reveal[data-d="4"]{animation-delay:.38s;}
.js .hero-reveal[data-d="5"]{animation-delay:.49s;}
@keyframes heroIn{to{opacity:1;transform:translateY(0);}}

/* ============ Unterseiten Hero-Band (21:9 / 3:2) ============
   Bildfläche ist mindestens 32vh hoch; bei langem Lead-Absatz wächst
   die Fläche mit dem Text mit (Overlay steht im Fluss, nicht absolut),
   damit Überschrift/Breadcrumb nie abgeschnitten werden. */
.hero-band{
  position:relative;
  min-height:32vh;
  overflow:hidden;
}
@media (max-width:639px){
  /* Harte Obergrenze zusätzlich zum gekürzten Lead: verhindert einen sehr
     hohen Hero-Block, falls ein Lead auf einer Seite künftig doch mal
     länger ausfällt. */
  .hero-band{max-height:62vh;}
}
.hero-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* Verlauf als eigener, immer-volle-Höhe-Layer (::before) statt als Hintergrund
   des Text-Overlays: das Overlay ist nur noch für den Textfluss zuständig
   (seine Höhe folgt dem Inhalt, damit das Band mitwächst) und wäre dadurch oft
   niedriger als das Bild — ein Verlauf auf dem Overlay selbst würde dann vor
   dem unteren/oberen Bildrand enden und als harte Kante sichtbar sein. Der
   ::before-Layer liegt exakt auf dem Bild (inset:0) und deckt es lückenlos ab:
   vertikal (unten dunkler) plus horizontal (links dunkler, Textlesbarkeit),
   als zwei überlagerte Verläufe ohne Bruch an einer Breakpoint-Kante. */
.hero-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(32,32,32,.15) 0%, rgba(32,32,32,.70) 100%),
    linear-gradient(90deg, rgba(32,32,32,.55) 0%, rgba(32,32,32,0) 65%);
}
.hero-band .hero-overlay{
  position:relative;
  z-index:2;
  align-items:flex-end;
  min-height:32vh;
  background:none;
}
.breadcrumb{
  color:rgba(255,255,255,.82);
  font-size:13px;
  font-weight:600;
  margin-bottom:var(--sp-2);
}
.breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;}
.breadcrumb a:hover{border-color:rgba(255,255,255,.6);}

/* ============ Draft banner (Seiten 2 und 5) ============ */
.draft-bar{
  background:var(--bg-alt);
  border-left:3px solid var(--ink);
  padding:10px var(--gutter);
}
.draft-bar p{max-width:var(--maxw);margin-inline:auto;color:var(--ink);font-weight:600;}

/* Hinweis-Kasten: Absätze mit [PRÜFEN:] oder Anwalt-Vermerken */
.hinweis-box{
  border:1px solid var(--ink);
  background:var(--bg-alt);
  padding:var(--sp-3) var(--sp-4);
  margin-block:var(--sp-4);
}
.hinweis-box__label{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:2px 8px;
  margin-bottom:8px;
}
.hinweis-box p{color:var(--ink);}
.hinweis-box p + p{margin-top:8px;}

/* ============ Ergebnis + Sequenz (zusammengelegt, EIN Abschnitt) ============
   „Das Ergebnis“ und die Scroll-Sequenz sind ein Abschnitt (#so-funktioniert):
   Die Sequenz endet in der Komposition, die vorher „Das Ergebnis“ zeigte.
   EIN Handy-Bauteil (kein Duplikat), Zustand wird per Klasse auf .sequence-stage
   gesteuert (is-a/is-b/is-c); inaktive Ebenen sind opacity:0 UND transform-
   versetzt, nie eine separate Kopie — daher kein „Rest-Panel“ möglich. */
.sequence-section{padding-block:0;}
/* Bühne füllt den Viewport unter Header+Unternav: --sticky-top wird von
   site.js aus der tatsächlichen Header+Unternav-Höhe gesetzt (Fallback 104px
   ohne JS). Scrollweg des Wrappers: 200vh mobil (extra Weg, damit der Finger
   zwischen zwei Zuständen anhalten kann, ohne dass ein Fenster übersprungen
   wird), 180vh ab 960px — der Fortschritt p∈[0,1] darin treibt in site.js
   jeden Frame alle Eigenschaften unten direkt (kein Zustand „hängt“ mehr
   zwischen Sprüngen, nichts rastet ein). */
.sequence-wrap{
  position:relative;
  height:calc(200vh - var(--sticky-top,104px));
}
@media (min-width:960px){
  .sequence-wrap{height:calc(180vh - var(--sticky-top,104px));}
}
.sequence-stage{
  position:sticky;
  top:var(--sticky-top,104px);
  height:calc(100vh - var(--sticky-top,104px));
  min-height:440px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
.seq-inner{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--sp-6);
  padding-inline:var(--gutter);
  max-width:var(--maxw);
  margin-inline:auto;
  width:100%;
  min-height:0;
}
/* Fußzeile der Bühne: Link + Caption, im Fluss (nie über einem Element) */
.seq-continue{
  flex:0 0 auto;
  padding-block:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.seq-continue a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--caption);
  color:var(--ink-70);
  text-decoration:none;
  padding:6px 4px;
}
.seq-continue a:hover{color:var(--ink);}
.seq-continue .seq-caption{margin:0;text-align:center;color:var(--ink-70);}

/* Links: Abschnittskopf (steht fest) + wechselnder Satz + Zustandsleiste.
   Beginnt am Rasterrand der Seite (kein zusätzliches Padding). */
.seq-text{flex:1 1 380px;max-width:460px;}
.seq-text .overline{margin-bottom:var(--sp-2);}
.seq-text h2{margin-bottom:var(--sp-5);max-width:16ch;}
/* Bühnenkarte: in A/B ohne sichtbare Kante (nur Handy „schwebt“ auf der
   Bühne, keine breite leere weiße Fläche); die Linie erscheint erst in
   Zustand C, wenn Handy + Bogen die Karte gemeinsam ausfüllen — eine reine
   Farbüberblendung statt einer Breitenanimation (robuster, kein Ruckeln). */
.seq-scene{
  flex:1 1 420px;
  position:relative;
  height:100%;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  border:1px solid transparent;
  background:transparent;
  /* Rahmen/Fläche werden von site.js jeden Frame aus p interpoliert
     (rgba-Alpha von var(--line)/var(--white)) — bewusst KEINE transition:
     ein Klassenwechsel mit CSS-transition wäre wieder ein diskreter
     Zwischenschritt, dem das Scrubbing hinterherläuft. */
}
@media (min-width:960px){
  .seq-text{padding-block:0;}
}
/* Satz links: alle drei Varianten permanent übereinander gestapelt und
   DAUERHAFT scroll-gekoppelt überblendet (opacity + translateY aus p, jeden
   Frame in site.js gesetzt) — kein Schwellenwert-Sprung mehr, auch kein
   250-ms-Crossfade: der Finger kann zwischen zwei Ständen anhalten und
   sieht dort ein echtes, stabiles Mischbild statt eines Zustands, der
   „nachzieht". Reserve-Höhe (max. aller drei Varianten) wird einmalig in
   site.js gemessen und als min-height gesetzt — kein geratener Fixwert. */
.seq-sentence-wrap{position:relative;}
.seq-sentence{
  position:absolute;
  top:0;left:0;right:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:var(--h3);
  line-height:var(--h3-lh);
  color:var(--ink);
  max-width:15ch;
  opacity:0;
  pointer-events:none;
  will-change:opacity,transform;
}
.seq-sentence .seq-subline{display:block;margin-top:10px;font-family:var(--font-body);font-weight:400;font-size:var(--lead);line-height:var(--lead-lh);color:var(--ink-70);}
.seq-states-group{margin-top:var(--sp-5);}
.seq-states{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  list-style:none;
  padding:0;
}
.seq-states li{margin:0;}
/* Marken sind Buttons (antippbar → springt sanft zu p=0.05/0.45/0.90).
   Farbe/Hintergrund werden JEDEN Frame aus p interpoliert (site.js setzt
   background-color/color inline) — bewusst keine transition/Klassenwechsel;
   border folgt per currentColor automatisch mit, ohne eigene JS-Zeile. */
.seq-states button{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--ink-70);
  background:var(--white);
  border:1px solid currentColor;
  padding:9px 14px;
  cursor:pointer;
  will-change:background-color,color;
}
.seq-states button:hover{opacity:.85;}
/* Fortschrittslinie unter den Marken: durchgehende Füllung = p·100 %, keine
   Klassenumschaltung mehr (löst das alte diskrete Umschalten ab). */
.seq-rail{position:relative;height:2px;margin-top:10px;background:var(--line);}
.seq-rail__fill{display:block;height:100%;width:0%;background:var(--accent);will-change:width;}

/* ---------- EIN Handy-Bauteil ---------- */
/* Alles unten Aufgeführte (opacity/transform/stroke-dashoffset) wird von
   site.js in jedem rAF-Frame direkt aus p gesetzt (Inline-Style) — deshalb
   bewusst KEINE transition auf diesen Eigenschaften: die Bewegung ist
   scroll-gekoppelt, ein transitionierter Wert würde dem Scrubbing
   hinterherlaufen und sich „hängend“ anfühlen (genau der gemeldete Fehler). */
.seq-phone{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  height:82%;
  max-width:300px;
  aspect-ratio:9/19.5;
  border:2px solid var(--ink);
  background:var(--white);
  box-shadow:0 12px 28px -16px rgba(32,32,32,.4);
  display:flex;
  flex-direction:column;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.seq-phone__frame{display:flex;flex-direction:column;height:100%;padding:10px 10px 8px;}
.seq-phone__status{display:flex;align-items:center;justify-content:space-between;}
.seq-phone__time{font-family:var(--font-body);font-weight:700;font-size:11px;color:var(--ink);}
.seq-phone__icons{display:flex;gap:3px;align-items:center;}
.seq-phone__icons span{display:block;width:8px;height:6px;background:var(--ink);}
.seq-phone__icons span:last-child{width:12px;height:6px;border:1px solid var(--ink);background:none;position:relative;}
.seq-phone__place{margin:2px 0 0;font-size:9px;color:var(--ink-70);border-bottom:1px solid var(--line);padding-bottom:8px;}
.seq-phone__screen{position:relative;flex:1 1 auto;overflow:hidden;background:var(--white);margin-top:6px;}

/* Sperrbildschirm (Foto g3) ↔ Aufnahme-Ansicht: opacity aus p, p 0.12–0.28 */
.seq-phone__lock{position:absolute;inset:0;opacity:1;will-change:opacity;}
.seq-phone__lock img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;}
.seq-phone__lock-time{
  position:absolute;left:8px;bottom:10px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:26px;
  color:var(--white);
  text-shadow:0 2px 10px rgba(32,32,32,.55);
}
.seq-phone__record{
  position:absolute;inset:0;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:0;
  will-change:opacity;
}
.seq-phone__rec-btn{
  width:34px;height:34px;
  flex:0 0 auto;
  background:var(--accent);
  border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:default;
}
.seq-phone__rec-btn svg{width:16px;height:16px;fill:#fff;}
.seq-phone__wave{display:flex;align-items:flex-end;gap:1.5px;height:24px;flex:0 0 auto;}
/* Amplitude per scaleY (transform) statt height — Umhüllende wächst mit p
   0.25–0.45, das Rauschen je Balken bleibt (fühlt sich nach Aufnahme an). */
.seq-phone__wave span{display:block;width:3px;height:24px;background:var(--accent);transform:scaleY(.04);transform-origin:bottom;will-change:transform;}
.seq-phone__dictate{
  font-size:11px;
  line-height:1.4;
  color:var(--ink);
  max-height:3.9em;
  overflow:hidden;
  text-align:center;
  min-height:1.4em;
}
/* Jedes Wort ein eigenes span: die Erscheinung selbst ist fließend — das
   jeweils nächste Wort blendet mit einem Opacity-Anteil (Bruchteil von t·n)
   statt in einem Schritt aufzutauchen. Einmalig beim Laden erzeugt, pro
   Frame wird nur opacity gesetzt (keine DOM-Neuerzeugung im Scroll-Takt). */
.seq-word{opacity:0;will-change:opacity;}
.seq-phone__chipdock{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:auto;opacity:0;will-change:opacity;}
.seq-chip{
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  font-size:8px;
  padding:2px 4px;
  white-space:nowrap;
}
.seq-phone__footer{border-top:1px solid var(--line);padding-top:6px;margin-top:6px;}
.seq-phone__progress{height:2px;background:var(--line);}
.seq-phone__progress span{display:block;height:100%;width:0%;background:var(--accent);}
.seq-phone__footer p{margin:4px 0 0;font-size:9px;color:var(--ink-70);}

/* ---------- Berichtsbogen (fährt kontinuierlich von rechts ein, p 0.55–0.72) ---------- */
.seq-report{
  position:absolute;
  left:40%;
  top:50%;
  height:88%;
  max-width:56%;
  opacity:0;
  border:1px solid var(--line);
  background:var(--white);
  box-shadow:0 24px 48px -24px rgba(32,32,32,.28);
  will-change:transform,opacity;
  pointer-events:none;
}
.seq-report.is-interactive{pointer-events:auto;}
.seq-report img{height:100%;width:auto;max-width:100%;display:block;}
.seq-target{
  position:absolute;
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  padding:3px 6px;
  white-space:nowrap;
  opacity:0;
  will-change:transform,opacity;
}
/* Zielpunkte als Klassen statt Inline-Style (mobil per Media Query
   überschreibbar); site.js animiert je Chip einen eigenen translate-Offset
   (Startversatz relativ zum eigenen Zielpunkt, „Flug“ aus Richtung Handy)
   on top on je 0.06 breitem Fenster ab p 0.68/0.74/0.80/0.86. */
.seq-target1{left:22%;top:33%;}
.seq-target2{left:22%;top:48%;}
.seq-target3{left:62%;top:48%;}
.seq-target4{left:78%;top:24%;}
@media (max-width:959px){
  .seq-target1{left:14%;top:33%;}
  .seq-target2{left:14%;top:52%;}
  .seq-target3{left:14%;top:62%;}
  .seq-target4{left:58%;top:21%;}
  .seq-target{font-size:10px;padding:2px 4px;}




}

.sig-line{position:absolute;left:7%;width:38%;bottom:9%;}
.sig-line svg{width:100%;height:auto;display:block;}
.sig-path{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.6;
  stroke-linecap:round;
  transform-box:fill-box;
  transform-origin:0% 50%;
  transform:rotate(-4deg);
  will-change:stroke-dashoffset;
}
.seq-report-note{
  position:absolute;
  left:0;right:0;
  bottom:-28px;
  text-align:center;
  color:var(--ink-70);
  opacity:0;
  will-change:opacity;
}

.seq-caption{
  text-align:center;
  margin-top:var(--sp-4);
  color:var(--ink-70);
}

@media (max-width:959px){
  /* Mobil: Text oben (kompakt), Szene darunter — Spalte, nicht zentriert
     gestapelt, sonst wird der Text vom Bühnenrand abgeschnitten. Die Bühne
     selbst wird auf Inhaltshöhe gebracht (kein 100vh-Ausfüllen wie auf
     Desktop): sonst wächst .seq-scene per flex:1 1 auto in die ungenutzte
     Resthöhe hinein und das Handy „schwebt“ mittig in viel Leerraum. */
  .sequence-stage{height:auto;min-height:0;}
  .seq-inner{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:var(--sp-3);}
  .seq-text{flex:0 0 auto;max-width:none;padding-block:var(--sp-3) 0;text-align:center;}
  .seq-text h2{max-width:none;margin-inline:auto;font-size:24px;}
  .seq-sentence{max-width:none;margin-inline:auto;font-size:17px;text-align:center;}
  .seq-states{justify-content:center;}
  .seq-states button{height:32px;padding:0 12px;display:inline-flex;align-items:center;}
  .seq-rail{max-width:280px;margin-inline:auto;}
  /* Szenenhöhe an die Handyhöhe gekoppelt (46vh + Innenabstand), damit unter
     dem Handy kein Leerraum > 15 % der Bühne entsteht (keine flex-grow-
     Resthöhe mehr, da .sequence-stage jetzt auto-hoch ist). */
  .seq-scene{flex:0 0 auto;min-height:0;height:calc(46vh + 32px);padding:16px;}
  .seq-phone{height:46vh;}
  .seq-report{left:44%;width:56%;max-width:56%;height:auto;max-height:76%;}
  .seq-report img{width:100%;height:auto;}
  /* Caption im Fluss unterhalb der Karte statt frei schwebend (absolut) —
     lag vorher außerhalb der Bühnenfläche und wurde vom Link darunter
     verdeckt. Der Bogen ist mobil vertikal zentriert (top:50%) und dadurch
     ohnehin schon kleiner als die Bühne, die Caption passt in die
     verbleibende Reserve darunter. */
  .seq-report-note{position:absolute;top:100%;left:0;right:0;bottom:auto;margin:6px 0 0;font-size:11px;}
}

/* ============ Steps ============ */
.steps-list{
  grid-column:1/-1;
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .steps-list{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1280px){
  .steps-list{grid-template-columns:repeat(4,1fr);}
}
.step{
  border-top:1px solid var(--line);
  padding-top:var(--sp-3);
}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--caption);
  margin-bottom:var(--sp-3);
}
.step h3{margin-bottom:var(--sp-2);font-size:var(--lead);}
.step p{color:var(--ink-70);}
.steps-foot{
  grid-column:1/-1;
  margin-top:var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  color:var(--ink-70);
}

/* ============ Reveal on scroll ============ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ============ Galerie (scroll-snap) ============ */
#galerie{padding-block:0;}
.gallery-eyebrow{padding-top:var(--sp-8);margin-bottom:var(--sp-3);}
.gallery-wrap{padding-bottom:var(--sp-8);}
.gallery-track{
  display:flex;
  gap:var(--sp-4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-inline:var(--gutter);
  padding-bottom:var(--sp-2);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.gallery-track::-webkit-scrollbar{display:none;height:0;}
.gallery-card{
  flex:0 0 auto;
  height:min(360px, 42vh);
  min-height:260px;
  aspect-ratio:4/5;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:var(--white);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}
.gallery-card__img{flex:0 0 60%;position:relative;overflow:hidden;}
.gallery-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-card__img--focus-br{object-position:78% 70%;}
.gallery-card__panel{
  flex:1;
  background:var(--ink);
  color:var(--white);
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--sp-2);
}
.gallery-card__panel h3{color:var(--white);}
.gallery-card__panel p{color:rgba(255,255,255,.82);font-size:var(--caption);margin:0;}
.gallery-card__arrow{align-self:flex-end;color:var(--white);display:inline-flex;}
.gallery-card--link:hover .gallery-card__arrow{transform:translateX(4px);}
.gallery-card__arrow svg{display:block;}
.gallery-controls{display:flex;align-items:center;justify-content:center;gap:var(--sp-5);margin-top:var(--sp-5);}
@media (max-width:639px){
  /* Die größeren 32-px-Trefflächen der Fortschrittsmarken brauchen mehr
     Platz als vorher — Abstand zu den Pfeil-Buttons verkleinert, damit die
     7 Marken auf 390 px in einer Zeile bleiben (kein Umbruch/Waisenpunkt). */
  .gallery-controls{gap:8px;}
}
.gallery-btn{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--white);
  border:1px solid var(--ink);
  color:var(--ink);
  cursor:pointer;
  padding:0;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.gallery-btn:hover{background:var(--ink);color:var(--white);}
.gallery-progress{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;}
/* Trefffläche 32×32 px (Touch), sichtbar bleibt das 8-px-Quadrat als
   zentriertes ::before — Button selbst ist unsichtbar/transparent. */
.gallery-mark{
  width:32px;
  height:32px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.gallery-mark::before{
  content:"";
  display:block;
  width:8px;
  height:8px;
  border:1px solid var(--ink);
  background:transparent;
}
.gallery-mark.is-active::before{background:var(--accent);border-color:var(--accent);}
/* Karten (außer Karte 5, die ein echter Link bleibt) öffnen per Klick/Tipp
   die Lightbox-Vorschau — daher role="button"/tabindex im Markup. */
.gallery-card[role="button"]{cursor:pointer;}
.gallery-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.gallery-card__preview{
  align-self:flex-start;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--caption);
  color:var(--white);
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
  padding:6px 10px;
  cursor:pointer;
}
.gallery-card__preview:hover{border-color:var(--white);}

/* ============ Galerie-Lightbox (<dialog>) ============ */
.gallery-lightbox{
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--white);
  color:var(--ink);
  padding:0;
  max-width:960px;
  width:min(960px, calc(100vw - 48px));
  max-height:calc(100vh - 64px);
  overflow:auto;
}
.gallery-lightbox::backdrop{background:rgba(32,32,32,.6);}
.gallery-lightbox[open]{display:flex;flex-direction:column;}
@media (min-width:720px){
  .gallery-lightbox[open]{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;}
}
.lightbox-media{
  position:relative;
  background:var(--bg-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  padding:16px;
}
.lightbox-media img{max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain;display:block;}
.lightbox-body{padding:var(--sp-5);padding-right:calc(var(--sp-5) + 56px);display:flex;flex-direction:column;gap:10px;}
.lightbox-body h3{margin:0;}
@media (max-width:719px){
  .lightbox-body{padding-right:var(--sp-5);}
}
.lightbox-body p{margin:0;color:var(--ink-70);}
.lightbox-body .caption{margin-top:auto;padding-top:10px;color:var(--ink-40);}
.lightbox-link a{color:var(--accent-dark);font-weight:600;}
.lightbox-close{
  position:absolute;
  top:12px;right:12px;
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);
  border:1px solid var(--ink);
  color:var(--ink);
  cursor:pointer;
  padding:0;
  z-index:2;
}
.lightbox-close:hover{background:var(--ink);color:var(--white);}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);
  border:1px solid var(--ink);
  color:var(--ink);
  cursor:pointer;
  padding:0;
}
.lightbox-nav:hover{background:var(--ink);color:var(--white);}
.lightbox-nav--prev{left:12px;}
.lightbox-nav--next{right:12px;}
@media (max-width:719px){
  .gallery-lightbox{
    width:100vw;
    max-width:100vw;
    height:100vh;
    max-height:100vh;
    margin:0;
    border-width:0;
    padding:16px;
    box-sizing:border-box;
  }
  .lightbox-media{min-height:0;flex:0 0 auto;padding:0 0 16px;}
  .lightbox-media img{max-height:50vh;}
  .lightbox-body{padding:0;}
}
/* Öffnen/Schließen ohne Zeit-Animation per Vorgabe bei Reduced Motion; sonst
   ein kurzes, dezentes Einblenden über @starting-style (progressive
   Verbesserung — ohne Unterstützung erscheint der Dialog einfach sofort). */
@media not (prefers-reduced-motion: reduce){
  .gallery-lightbox{
    transition:opacity 220ms var(--ease), transform 220ms var(--ease), display 220ms allow-discrete, overlay 220ms allow-discrete;
    opacity:1;
    transform:scale(1);
  }
  .gallery-lightbox::backdrop{transition:background-color 220ms var(--ease);}
  @starting-style{
    .gallery-lightbox[open]{opacity:0;transform:scale(.96);}
  }
  .gallery-lightbox:not([open]){opacity:0;transform:scale(.96);}
}

/* ============ Two report tiles (mit Klapp-Details) ============ */
.tiles{
  grid-column:1/-1;
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:1fr;
}
@media (min-width:960px){
  .tiles{grid-template-columns:repeat(2,1fr);}
}
.tile{
  border:1px solid var(--line);
  transition:border-color var(--dur-s) var(--ease);
  overflow:hidden;
}
.tile:hover{border-color:var(--ink);}
.tile-img{border:none;height:130px;width:100%;object-fit:cover;display:block;margin:0;}
.tile-body{padding:var(--sp-4);}
.tile h3{margin-bottom:var(--sp-3);}
.tile p{color:var(--ink-70);}
.tile-link{margin-top:var(--sp-3);}

/* ============ Klapp-Details (gemeinsam für Tiles/Karten) ============ */
.details-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:var(--sp-3);
  background:none;
  border:none;
  padding:6px 0;
  min-height:44px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--caption);
  color:var(--ink);
  cursor:pointer;
}
.details-icon{position:relative;width:14px;height:14px;flex:0 0 auto;}
.details-icon::before,.details-icon::after{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:14px;height:2px;
  background:var(--ink);
  transform:translateY(-50%);
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.details-icon::after{transform:translateY(-50%) rotate(90deg);}
.details-toggle[aria-expanded="true"] .details-icon::after{opacity:0;transform:translateY(-50%) rotate(0deg);}
.details-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-m) var(--ease);
}
.details-toggle[aria-expanded="true"] + .details-wrap{grid-template-rows:1fr;}
.details-inner{overflow:hidden;}
.details-text{padding-top:var(--sp-2);color:var(--ink-70);}

/* ============ Sprachen — Tippbare Demo ============ */
.lang-grid{
  grid-column:1/-1;
  display:grid;
  gap:var(--sp-6);
  grid-template-columns:1fr;
  align-items:stretch;
}
@media (min-width:960px){
  .lang-grid{grid-template-columns:5fr 7fr;gap:var(--sp-7);}
}
.lang-text{display:flex;flex-direction:column;}
.lang-visual{max-width:420px;}
.lang-visual .lang-visual-img{margin-bottom:var(--sp-3);width:100%;height:auto;}
.lang-strip{
  margin-top:var(--sp-3);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  align-items:center;
}
.lang-pill{
  border:1px solid var(--line);
  color:var(--ink);
  padding:8px 14px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--caption);
}
.lang-note{
  margin-top:var(--sp-2);
  color:var(--ink-70);
}
.lang-closing{
  margin-top:var(--sp-3);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--lead);
}

.demo-switch{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:var(--sp-3);
}
.demo-switch button{
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--caption);
  padding:9px 14px;
  min-height:44px;
  cursor:pointer;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.demo-switch button:hover{border-color:var(--ink);}
.demo-switch button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white);}
.demo-body{
  border:1px solid var(--line);
  background:var(--bg-alt);
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background-color:var(--line);
}
@media (min-width:520px){
  .demo-body{grid-template-columns:1fr 1fr;}
}
.demo-dictate,.demo-report{
  background:var(--bg-alt);
  padding:var(--sp-4);
  min-height:150px;
}
.demo-report{background:var(--white);}
.demo-label{
  display:block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-70);
  margin-bottom:var(--sp-2);
}
.demo-dictate p{font-size:var(--lead);line-height:1.45;}
.demo-report ul{display:flex;flex-direction:column;gap:6px;}
.demo-report li{
  border:1px solid var(--line);
  background:var(--white);
  padding:6px 10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--caption);
}
.demo-report .demo-translated-note{
  margin-top:8px;
  color:var(--ink-70);
  font-weight:400;
}
.demo-caption{margin-top:var(--sp-3);}

/* ============ Office shelf ============ */
.office-grid{grid-column:1/-1;display:grid;gap:var(--sp-6);grid-template-columns:1fr;}
@media (min-width:960px){
  .office-grid{grid-template-columns:5fr 7fr;}
}
.office-left{display:flex;flex-direction:column;}
.office-spacer{display:none;}
@media (min-width:960px){.office-spacer{display:block;}}
.office-band{margin:0 0 var(--sp-2);height:70px;width:100%;object-fit:cover;display:block;}
.shelf{
  border:1px solid var(--line);
}
.shelf-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px var(--sp-4);
  border-bottom:1px solid var(--line);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--body);
  opacity:0;
  transform:translateX(16px);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.shelf-row:last-child{border-bottom:none;}
.shelf.is-visible .shelf-row{opacity:1;transform:translateX(0);}
.shelf.is-visible .shelf-row:nth-child(1){transition-delay:.05s;}
.shelf.is-visible .shelf-row:nth-child(2){transition-delay:.15s;}
.shelf.is-visible .shelf-row:nth-child(3){transition-delay:.25s;}
.shelf.is-visible .shelf-row:nth-child(4){transition-delay:.35s;}
.shelf.is-visible .shelf-row:nth-child(5){transition-delay:.45s;}
.shelf-status{
  font-size:var(--caption);
  padding:4px 8px;
  border:1px solid var(--line);
  background:transparent;
}
.shelf-status.is-ok{color:var(--ink);}
.shelf-status.is-missing{border-color:var(--ink);color:var(--ink);}
.office-points{grid-column:1/-1;margin-top:0;display:grid;gap:var(--sp-4);grid-template-columns:1fr;}
@media (min-width:640px){.office-points{grid-template-columns:repeat(3,1fr);}}
.office-point{border-top:1px solid var(--line);padding-top:var(--sp-3);font-family:var(--font-body);font-weight:600;}

/* ============ Security cards ============ */
.cards3{grid-column:1/-1;display:grid;gap:var(--sp-5);grid-template-columns:1fr;}
@media (min-width:640px){.cards3{grid-template-columns:repeat(3,1fr);}}
.card{border:1px solid var(--line);padding:var(--sp-4);}
.card h3{font-size:var(--lead);margin-bottom:var(--sp-3);}
.card p{color:var(--ink-70);}
.sec-caption{grid-column:1/-1;margin-top:0;color:var(--ink-70);}

/* ============ Angebots-Kachel ============ */
#angebot{padding-block:0;}
.angebot-tile{display:flex;flex-direction:column;}
@media (min-width:960px){.angebot-tile{flex-direction:row;min-height:380px;}}
.angebot-images{display:flex;flex:0 0 auto;height:33vw;max-height:220px;}
@media (min-width:960px){.angebot-images{flex:0 0 50%;height:auto;max-height:none;}}
.angebot-images__col{flex:1;overflow:hidden;}
.angebot-images__col img{width:100%;height:100%;object-fit:cover;display:block;}
.angebot-copy{
  flex:1;
  background:var(--bg-alt);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--sp-3);
  padding:var(--sp-6) var(--gutter);
}
@media (min-width:960px){.angebot-copy{padding:var(--sp-7) var(--sp-8);}}
.angebot-copy p{color:var(--ink-70);max-width:48ch;}

/* ============ Vertrauensblock ============ */
.trust-grid{grid-column:1/-1;display:grid;gap:var(--sp-6);grid-template-columns:1fr;}
@media (min-width:960px){.trust-grid{grid-template-columns:5fr 7fr;align-items:start;}}
.trust-img{width:100%;height:auto;}
.trust-lists{display:grid;gap:var(--sp-5);grid-template-columns:1fr;margin-top:var(--sp-3);}
@media (min-width:560px){.trust-lists{grid-template-columns:1fr 1fr;}}
.trust-list h3{font-size:var(--body);margin-bottom:var(--sp-3);}
.trust-list ul{display:flex;flex-direction:column;gap:8px;}
.trust-list li{
  padding-left:18px;
  position:relative;
  color:var(--ink-70);
  font-size:var(--body);
}
.trust-list li::before{
  content:"";
  position:absolute;
  left:0;top:.65em;
  width:8px;height:1px;
  background:var(--line);
}
.trust-list--no li::before{background:var(--ink-15);}
.trust-caption{margin-top:var(--sp-4);}
.founder-box{
  margin-top:var(--sp-5);
  border:1px solid var(--line);
  padding:var(--sp-4);
}
.founder-box h3{font-size:var(--body);margin-bottom:var(--sp-2);}
.founder-box p{color:var(--ink-70);}

/* ============ Pricing ============ */
.price-grid{grid-column:1/-1;display:grid;gap:var(--sp-5);grid-template-columns:1fr;}
@media (min-width:960px){.price-grid{grid-template-columns:repeat(2,1fr);}}
.price-card{
  border:1px solid var(--line);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.price-card.is-recommended{
  border:2px solid var(--accent);
}
.price-badge{
  align-self:flex-start;
  background:transparent;
  border:1px solid var(--ink);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--caption);
  padding:5px 10px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.price-amount{
  font-family:var(--font-head);
  font-weight:700;
  font-size:var(--h2);
}
.price-amount small{font-family:var(--font-body);font-weight:500;font-size:var(--caption);color:var(--ink-70);}
.price-alt{color:var(--ink-70);}
.price-features{display:flex;flex-direction:column;gap:6px;}
.price-features li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--ink);
}
.checkmark{
  flex:0 0 auto;
  width:16px;height:16px;
  margin-top:3px;
  position:relative;
}
.checkmark::before{
  content:"";
  position:absolute;
  left:1px;top:6px;
  width:6px;height:2px;
  background:var(--ink);
  transform:rotate(45deg);
  transform-origin:left;
}
.checkmark::after{
  content:"";
  position:absolute;
  left:5px;top:9px;
  width:10px;height:2px;
  background:var(--ink);
  transform:rotate(-45deg);
  transform-origin:left;
}
.price-tiers{
  border-top:1px solid var(--line);
  padding-top:10px;
  display:flex;
  flex-direction:column;
  gap:3px;
  color:var(--ink-70);
  font-size:var(--caption);
}
.price-note{color:var(--ink-70);font-size:var(--caption);}
.price-card .btn{padding:10px 24px;}
.price-foot{
  grid-column:1/-1;
  margin-top:0;
  color:var(--ink-70);
}

/* ============ Preisrechner ============ */
.calc{
  grid-column:1/-1;
  border:1px solid var(--line);
  padding:var(--sp-5);
  margin-bottom:var(--sp-5);
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:1fr;
}
@media (min-width:960px){
  .calc{grid-template-columns:1fr 1fr;padding:var(--sp-6);}
}
.calc h3{margin-bottom:var(--sp-2);}
.calc-controls{display:flex;flex-direction:column;gap:var(--sp-4);}
.calc-field label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--body);
  margin-bottom:8px;
}
.calc-field output{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--ink);
}
input[type="range"].calc-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:2px;
  background:var(--line);
  outline:none;
  margin:12px 0;
}
input[type="range"].calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;height:22px;
  background:var(--ink);
  border:2px solid var(--ink);
  cursor:pointer;
}
input[type="range"].calc-slider::-moz-range-thumb{
  width:22px;height:22px;
  background:var(--ink);
  border:2px solid var(--ink);
  cursor:pointer;
  border-radius:0;
}
input[type="range"].calc-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent);outline-offset:2px;}
.calc-switch{display:flex;border:1px solid var(--ink);width:fit-content;}
.calc-switch button{
  background:var(--white);
  color:var(--ink);
  border:none;
  padding:10px 18px;
  min-height:44px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--caption);
  cursor:pointer;
}
.calc-switch button + button{border-left:1px solid var(--ink);}
.calc-switch button[aria-pressed="true"]{background:var(--ink);color:var(--white);}
.calc-check{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  cursor:pointer;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--body);
}
.calc-check input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;
  border:2px solid var(--ink);
  background:var(--white);
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
}
.calc-check input[type="checkbox"]:checked{background:var(--ink);}
.calc-check input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;left:3px;top:6px;
  width:4px;height:8px;
  border-right:2px solid var(--white);
  border-bottom:2px solid var(--white);
  transform:rotate(40deg);
}
.calc-output{
  background:var(--bg-alt);
  border:1px solid var(--line);
  padding:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:6px;
}
/* Zweispaltig, feste Labelbreite 45 % — Betrag bricht nie um. */
.calc-row{display:grid;grid-template-columns:45% 1fr;align-items:baseline;gap:var(--sp-3);}
.calc-row .calc-label{color:var(--ink-70);font-size:var(--body);}
.calc-row .calc-value{
  font-family:var(--font-head);
  font-weight:700;
  font-size:24px;
  white-space:nowrap;
  text-align:right;
  justify-self:end;
}
.calc-row.is-net .calc-value{font-size:24px;}
.calc-row.is-savings{padding-top:8px;border-top:1px solid var(--line);}
.calc-row.is-savings .calc-value{font-size:var(--body);color:var(--ink);}
.calc-copy{margin-top:8px;align-self:flex-start;}
.calc-hint{margin-top:var(--sp-3);}

/* ============ Vergleichstabelle ============
   border-collapse:separate statt collapse: bei collapse + sticky entsteht
   eine leere Abstandszeile über der Kopfzeile durch doppelt gerenderte Ränder.
   thead bewusst NICHT sticky: .compare-wrap braucht overflow-x:auto für den
   mobilen Scroll, wodurch die Box laut Spezifikation auch zum Scroll-Container
   für die Y-Achse wird (overflow-x ungleich visible erzwingt overflow-y:auto) —
   sticky-Elemente darin kleben dann an dieser Box, nie am Seiten-Viewport, und
   verschwinden beim Scrollen unbemerkt nach oben. Sauberer Ausweg ohne diese
   Falle: statische Kopfzeile (Fallback laut Bauauftrag). */
.compare-wrap{grid-column:1/-1;overflow-x:auto;}
table.compare{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:520px;
}
table.compare caption{text-align:left;margin-bottom:var(--sp-3);}
table.compare th,table.compare td{
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:10px 14px;
  text-align:left;
  font-size:var(--body);
}
table.compare th:first-child,table.compare td:first-child{border-left:1px solid var(--line);}
table.compare thead th{border-top:1px solid var(--line);}
table.compare thead th{
  background:var(--white);
  font-family:var(--font-body);
  font-weight:700;
  color:var(--ink);
}
table.compare td:first-child,table.compare th:first-child{font-weight:600;}
table.compare td.is-yes,table.compare td.is-no{text-align:center;}
.icon-check{display:inline-block;width:14px;height:10px;position:relative;}
.icon-check::before{
  content:"";
  position:absolute;left:0;top:5px;
  width:5px;height:2px;
  background:var(--ink);
  transform:rotate(45deg);
  transform-origin:left;
}
.icon-check::after{
  content:"";
  position:absolute;left:4px;top:8px;
  width:9px;height:2px;
  background:var(--ink);
  transform:rotate(-45deg);
  transform-origin:left;
}
.icon-dash{display:inline-block;width:12px;height:2px;background:var(--line);}
.compare-foot{grid-column:1/-1;margin-top:var(--sp-3);}
@media (max-width:639px){
  /* Ohne Seitwärtsscrollen: table-layout:fixed erzwingt die drei Spalten in
     den Viewport — Spalte 1 flexibel (nimmt den Rest, bricht um), Spalten 2/3
     fest auf 64 px (reicht für Häkchen/Strich, zentriert). */
  .compare-wrap{overflow-x:visible;}
  table.compare{table-layout:fixed;width:100%;min-width:0;font-size:14px;}
  table.compare th:first-child,table.compare td:first-child{
    width:auto;
    font-size:14px;
    white-space:normal;
    word-break:break-word;
    padding:8px 8px 8px 0;
  }
  table.compare th:nth-child(2),table.compare td:nth-child(2),
  table.compare th:nth-child(3),table.compare td:nth-child(3){
    width:64px;
    padding:8px 4px;
    text-align:center;
    white-space:normal;
  }
  table.compare thead th{font-size:13px;line-height:1.25;white-space:normal;}
  table.compare th,table.compare td{padding:8px 8px;font-size:14px;}
}

/* ============ CTA dark section ============ */
.cta-section{
  position:relative;
  background:var(--ink);
  color:var(--white);
  padding-block:var(--sp-9);
  text-align:center;
  overflow:hidden;
}
.cta-bg{position:absolute;inset:0;z-index:0;}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;}
.cta-overlay{position:absolute;inset:0;z-index:1;background:rgba(32,32,32,.72);}
.cta-content{position:relative;z-index:2;}
.cta-section h2{color:var(--white);margin-bottom:var(--sp-3);}
.cta-section p{color:var(--ink-15);max-width:52ch;margin-inline:auto;margin-bottom:var(--sp-5);}
.cta-section .btn-primary{border-color:var(--accent);}

/* ============ Benachrichtigungs-Formular ============ */
.notify{margin-top:var(--sp-6);}
.notify-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  max-width:440px;
  margin-inline:auto;
}
.notify-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.notify-form input[type="email"]{
  flex:1 1 220px;
  min-height:44px;
  padding:10px 14px;
  border:2px solid var(--white);
  background:transparent;
  color:var(--white);
  font-family:var(--font-body);
  font-size:var(--body);
}
.notify-form input[type="email"]::placeholder{color:rgba(255,255,255,.7);}
.notify-form input[type="email"]:disabled{opacity:.6;}
.notify-msg{
  margin-top:var(--sp-3);
  color:var(--white);
  font-weight:600;
  max-width:48ch;
  margin-inline:auto;
}
.notify-privacy{margin-top:var(--sp-3);color:var(--ink-15);}
.notify-privacy a{color:var(--white);}

/* ============ FAQ ============ */
.faq-list{grid-column:1/-1;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-4) 0;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--body);
  color:var(--ink);
  min-height:44px;
}
.faq-icon{position:relative;width:18px;height:18px;flex:0 0 auto;}
.faq-icon::before,.faq-icon::after{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:18px;height:2px;
  background:var(--ink);
  transform:translateY(-50%);
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.faq-icon::after{transform:translateY(-50%) rotate(90deg);}
.faq-item[data-open="true"] .faq-icon::after{opacity:0;transform:translateY(-50%) rotate(0deg);}
.faq-a-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-m) var(--ease);
}
.faq-item[data-open="true"] .faq-a-wrap{grid-template-rows:1fr;}
.faq-a-inner{overflow:hidden;}
.faq-a{padding-bottom:var(--sp-4);color:var(--ink-70);max-width:64ch;}

/* ============ Contact ============ */
.contact-grid{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start;max-width:56ch;}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);}
.contact-email{font-family:var(--font-body);font-weight:600;color:var(--ink);user-select:text;}

/* ============ Footer ============ */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:var(--sp-7);
}
.footer-grid{
  grid-column:1/-1;
  display:grid;
  gap:var(--sp-6);
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1100px){
  .footer-grid{grid-template-columns:repeat(4,1fr);}
}
.footer-col .footer-h{font-family:var(--font-body);font-weight:600;color:var(--ink);margin:0 0 var(--sp-3);font-size:var(--body);}
.footer-col ul{display:flex;flex-direction:column;gap:8px;}
.footer-col a{
  display:inline-block;
  color:var(--ink-70);
  text-decoration:none;
  font-size:var(--caption);
  border-bottom:1px solid transparent;
  padding-block:12px;
  margin-block:-12px;
}
.footer-col a:hover{color:var(--ink);border-color:var(--ink);}
.footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-3);}
.footer-brand svg{width:22px;height:22px;}
.footer-legal{
  grid-column:1/-1;
  margin-top:var(--sp-6);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--sp-3);
  font-size:var(--caption);
  color:var(--ink-70);
}
.footer-changelog{
  grid-column:1/-1;
  margin-top:var(--sp-4);
  color:var(--ink-70);
}

/* ============ Unterseiten: Inhalt / Sidebar ============ */
.article-grid{grid-column:1/-1;display:grid;gap:var(--sp-6);grid-template-columns:1fr;align-items:start;}
@media (min-width:960px){
  .article-grid{grid-template-columns:8fr 4fr;}
}
.article-body h2{margin-top:var(--sp-7);margin-bottom:var(--sp-3);}
.article-body h2:first-child{margin-top:0;}
.article-body h3{margin-top:var(--sp-5);margin-bottom:var(--sp-2);}
.article-body p{color:var(--ink);margin-top:var(--sp-3);max-width:72ch;}
.article-body p:first-of-type{margin-top:0;}
.article-body ul,.article-body ol{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:8px;max-width:72ch;}
.article-body ul{list-style:none;}
.article-body ul li{padding-left:20px;position:relative;color:var(--ink);}
.article-body ul li::before{content:"";position:absolute;left:0;top:.65em;width:9px;height:1px;background:var(--line);}
.article-body ol{counter-reset:steps;list-style:none;}
.article-body ol li{padding-left:32px;position:relative;color:var(--ink);}
.article-body ol li::before{
  counter-increment:steps;
  content:counter(steps) ".";
  position:absolute;left:0;top:0;
  font-weight:700;color:var(--ink);
}
.article-body a:not(.btn){color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;}
.article-body a:not(.btn):hover{color:var(--ink);}
.article-body figure{margin:var(--sp-4) 0 0;}
.article-body figure img{border:1px solid var(--line);width:100%;height:auto;}
.article-body figcaption{margin-top:8px;color:var(--ink-70);}
.article-body table{width:100%;border-collapse:collapse;margin-top:var(--sp-3);}
.article-body th,.article-body td{border:1px solid var(--line);padding:8px 12px;text-align:left;font-size:15px;vertical-align:top;}
.article-body th{background:var(--bg-alt);font-family:var(--font-body);font-weight:700;}
.article-qa{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-4);}
.article-qa + .article-qa{margin-top:var(--sp-4);}
.article-qa__q{font-weight:700;color:var(--ink);}
.article-qa__a{margin-top:6px;color:var(--ink-70);}
.img-placeholder{
  background:var(--bg-alt);
  border:1px solid var(--ink);
  margin-top:var(--sp-4);
  min-height:200px;
  display:flex;
  align-items:flex-end;
  padding:var(--sp-3);
}
.img-placeholder p{color:var(--ink-70);}
.article-download{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4);
  align-items:center;
  border:1px solid var(--line);
  padding:var(--sp-4);
  margin-top:var(--sp-4);
}
.article-download img{width:96px;height:auto;border:1px solid var(--line);flex:0 0 auto;}

.sidebar{position:sticky;top:112px;display:flex;flex-direction:column;gap:var(--sp-5);}
.sidebar-card{border:1px solid var(--line);padding:var(--sp-4);}
.sidebar-card h3{font-size:var(--body);margin-bottom:var(--sp-3);}
.sidebar-card ul{display:flex;flex-direction:column;gap:10px;}
.sidebar-card ul li{padding-left:16px;position:relative;color:var(--ink-70);font-size:var(--caption);}
.sidebar-card ul li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:1px;background:var(--line);}
.sidebar-card--related ul{gap:8px;}
.sidebar-card--related a{
  display:block;
  color:var(--ink);
  text-decoration:none;
  font-size:var(--caption);
  font-weight:600;
  padding:2px 0;
}
.sidebar-card--related a:hover{color:var(--accent-dark);}

.author-line{
  grid-column:1/-1;
  margin-top:var(--sp-6);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  color:var(--ink-70);
}

/* ============ Rechtstexte (Impressum / Datenschutz) ============ */
.legal-body h2{margin-top:var(--sp-6);margin-bottom:var(--sp-2);}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{color:var(--ink);margin-top:var(--sp-2);max-width:72ch;}
.legal-body .adresse{
  background:var(--bg-alt);
  border:1px solid var(--line);
  padding:var(--sp-4);
  margin-top:var(--sp-3);
  max-width:60ch;
}
.legal-body table{width:100%;border-collapse:collapse;margin-top:var(--sp-3);}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:8px 10px;text-align:left;font-size:14px;vertical-align:top;}
.legal-body th{background:var(--ink);color:var(--white);font-family:var(--font-body);font-weight:600;}
.legal-body .table-wrap{overflow-x:auto;margin-top:var(--sp-3);}
.legal-body a{color:var(--accent-dark);}
.legal-stand{margin-top:var(--sp-6);color:var(--ink-70);}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-reveal{opacity:1;transform:none;}
  .reveal{opacity:1;transform:none;}
  .shelf-row{opacity:1;transform:none;}
  /* Die Sequenz hat GAR KEINE transition mehr auf gescrubbten Eigenschaften
     (auch Satz/Marken/Rahmen nicht mehr — site.js setzt alles direkt aus der
     Scrollposition, ohne Zeit-Übergang). Reduced Motion ändert an der
     Bühne selbst nichts (sie ist ohnehin nicht zeitbasiert); betroffen sind
     hier nur die verbleibenden Marken-Klick-Glättung (scroll-behavior, per
     *-Regel oben bereits auf auto gesetzt) und andere Seitenelemente. */
}


/* ===== Variante B (10.09.) — Schrift im Bild, Kontrast über dunkle Zone + Schatten ===== */
.hero{padding:0!important;}
@media (min-width:640px){
  .hero{height:auto;min-height:560px;max-height:none;}
  .hero-bg{inset:0;}
  .hero-overlay{align-items:center;padding:56px 0;
    background:linear-gradient(90deg, rgba(40,39,63,.90) 0%, rgba(40,39,63,.86) 34%, rgba(40,39,63,.55) 50%, rgba(40,39,63,0) 66%);}
  .hero-copy{max-width:540px;}
}
@media (max-width:639px){
  .hero{height:auto;min-height:0;}
  .hero-bg{inset:0;position:absolute;}
  .hero-overlay{position:relative;inset:auto;display:block;padding:200px 0 24px;
    background:linear-gradient(180deg, rgba(40,39,63,0) 0%, rgba(40,39,63,.35) 22%, rgba(40,39,63,.88) 42%, rgba(40,39,63,.92) 100%);}
  .hero .hero-copy{text-shadow:0 1px 3px rgba(0,0,0,.45);}
  .hero-lead-more{display:inline;}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;}
  .hero-actions .btn{width:100%;text-align:center;}
  .hero-actions .link-arrow{justify-content:center;}
}
.hero-copy{color:#fff;}
.hero-copy .overline,.hero-copy h1,.hero-copy .lead,.hero-copy .link-arrow{color:#fff;}
.hero-copy .hero-fineprint{color:rgba(255,255,255,.92);}
.hero-copy h1,.hero-copy .lead{text-shadow:0 1px 2px rgba(0,0,0,.35);}
.ki-mark{position:absolute;right:12px;bottom:10px;z-index:2;margin:0;background:rgba(255,255,255,.92);color:#3d3b60;font-style:italic;font-size:12px;line-height:1.4;padding:2px 8px;}
.ki-mark--small{font-size:11px;right:8px;bottom:6px;padding:1px 6px;}
/* Unterseiten: Fotoband mit dunkler Zone, wie bisher, aber stärker */
.hero-band::before{background:linear-gradient(180deg, rgba(40,39,63,.25) 0%, rgba(40,39,63,.85) 100%), linear-gradient(90deg, rgba(40,39,63,.70) 0%, rgba(40,39,63,0) 70%);}
.hero-band .hero-copy h1,.hero-band .hero-copy p{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.hero-band .breadcrumb,.hero-band .breadcrumb a{color:rgba(255,255,255,.85);}
/* Ergänzung 02 (Wissensseiten): Kurzantwort zuerst */
.kurz-box{margin:24px 0 8px;padding:18px 22px;background:#f5f5f7;border-left:3px solid #3d3b60;}
.kurz-box .overline{margin-bottom:8px;}
.kurz-box ul{margin:0;padding-left:18px;line-height:1.55;}
.kurz-box li{margin:0 0 6px;}
/* Ergänzung 01 (Preise): Grundprodukt + Ergänzung */
.price-note--top{margin:-4px 0 12px;color:#666481;font-size:14px;}
.price-badge{display:none;}
@media (max-width:639px){ .hero-band .ki-mark{top:8px;bottom:auto;right:8px;} }
/* Preiskarten: Knoepfe auf einer Hoehe */
.price-card .btn{margin-top:auto;}
.price-card .price-note:last-of-type{margin-bottom:0;}

/* V06: usable in-page gallery when native modal dialogs are unavailable. */
.gallery-lightbox:not([open]){display:none}
.gallery-lightbox.gallery-lightbox--inline[open]{position:relative;inset:auto;margin:24px auto;max-height:none;height:auto;opacity:1;transform:none}

/* V08: A007 Tintenblau colour proposal on V07. Layout and interaction unchanged. */
:root{--accent-text:#0a5e66;--focus:var(--ink);--focus-inverse:#fff;--line-inverse:var(--ink-40)}
.lightbox-body .caption{color:var(--ink-70)}
.trust-list--no li::before{background:var(--line)}
svg [fill="#163a5c"]{fill:var(--ink)}
main[style*="color:#163a5c"]{color:var(--ink)!important}
main p[style*="color:#4a6a86"]{color:var(--ink-70)!important}
.cta-overlay{background:var(--ink)}
.cta-section .btn-primary{border-color:white}
.notify-form input[type=email]::placeholder{color:var(--white)}

/* A005/V09 — adapted A011 source. Signed original Q020 remains separate. */
#so-funktioniert{scroll-margin-top:140px}
#so-funktioniert .seq-text h2{max-width:13ch}
#so-funktioniert .seq-scene{min-height:400px;max-height:620px}
#so-funktioniert .seq-phone__dictate{max-height:none;overflow:visible}
#so-funktioniert .seq-report{width:56%;max-width:56%;height:auto;max-height:none;border-color:var(--ink-70);color:var(--ink);}
.seq-sheet{padding:18px;background:#fff;line-height:1.4;font-size:10px;}
.seq-sheet-head{display:flex;justify-content:space-between;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.seq-sheet-head{flex-wrap:wrap}
.seq-sheet-head strong{font-size:12px}.seq-sheet-head>span{font-size:10px}
.seq-sheet-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 0;border-bottom:1px solid var(--ink-70);font-size:9px}
.seq-sheet-row{min-height:43px;padding:7px 0;border-bottom:1px solid var(--ink-70);display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px}
.seq-sheet-row b{display:block;width:100%;font-size:9px}.seq-sheet-row small{font-size:9px}
.seq-sheet-sign{display:flex;justify-content:space-between;padding-top:18px}
#so-funktioniert .seq-report-note{font-size:12px;line-height:1.5;bottom:auto;top:100%;margin-top:9px;background:var(--white);color:var(--ink)}
#so-funktioniert .seq-caption{font-size:14px;margin-top:0}
.seq-source{padding-block:20px 40px}.seq-source details{border:1px solid var(--ink-70);padding:16px 22px;max-width:760px;margin:auto;background:var(--white)}
.seq-source summary{cursor:pointer;min-height:48px;display:list-item;font-weight:600;padding-block:12px}
.seq-source dl{display:grid;grid-template-columns:140px 1fr;gap:14px;font-size:16px}.seq-source dd{margin:0}.seq-source blockquote{margin:20px 0;padding:18px;border-left:3px solid var(--accent);background:var(--bg-alt)}
/* A supported preference yields a frontal readable end state, without a long sticky scroll. */
/* This V09 rule supersedes earlier comments about keeping the animated stage under reduced motion. */
#so-funktioniert .seq-static{height:auto!important}
#so-funktioniert .seq-static .sequence-stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible;padding-block:38px}
#so-funktioniert .seq-static .seq-inner{align-items:flex-start}
#so-funktioniert .seq-static .seq-scene{width:100%;min-width:0}
#so-funktioniert .seq-static .seq-scene{height:auto;min-height:0;max-height:none;display:block;padding:24px}
#so-funktioniert .seq-static .seq-phone{display:none}
#so-funktioniert .seq-static .seq-report{position:relative;inset:auto;width:100%;max-width:100%;height:auto;transform:none!important;opacity:1!important}
#so-funktioniert .seq-static .seq-sheet{font-size:16px;padding:22px}
#so-funktioniert .seq-static .seq-sheet b,#so-funktioniert .seq-static .seq-sheet small,#so-funktioniert .seq-static .seq-sheet-meta,#so-funktioniert .seq-static .seq-sheet-head>*{font-size:14px}
#so-funktioniert .seq-static .seq-sheet-row{min-height:65px}
#so-funktioniert .seq-static .seq-report-note{position:static;margin:15px 0;padding:12px;font-size:16px}
#so-funktioniert .seq-static .seq-sentence-wrap{min-height:70px!important}
#so-funktioniert .seq-static .seq-sentence{display:none}
#so-funktioniert .seq-static .seq-sentence[data-state-text="C"]{display:block;position:static;transform:none!important;opacity:1!important}
html:not(.js) #so-funktioniert .sequence-wrap{height:auto}
html:not(.js) #so-funktioniert .sequence-stage{position:relative;top:auto;height:auto;min-height:0;padding-block:32px;overflow:visible}
html:not(.js) #so-funktioniert .seq-phone{display:none}
html:not(.js) #so-funktioniert .seq-scene{height:auto;max-height:none;min-height:0;display:block}
html:not(.js) #so-funktioniert .seq-report{position:relative;inset:auto;transform:none;opacity:1;width:100%;max-width:100%}
html:not(.js) #so-funktioniert .seq-sentence{display:none}
html:not(.js) #so-funktioniert .seq-sentence[data-state-text="C"]{display:block;position:static;opacity:1}
html:not(.js) #so-funktioniert .seq-report-note{position:static;opacity:1;margin:12px}
@media(max-width:959px){#so-funktioniert .seq-static .seq-inner{align-items:stretch}#so-funktioniert .seq-static .seq-sheet-meta{grid-template-columns:1fr}}
@media(max-width:959px){#so-funktioniert .seq-scene{height:420px;min-height:420px;padding:12px}#so-funktioniert .seq-phone{height:330px}#so-funktioniert .seq-text h2{max-width:none;font-size:25px;margin-bottom:18px}#so-funktioniert .seq-report{left:31%;width:67%;max-width:67%;}#so-funktioniert .seq-sheet{padding:12px;font-size:10px}#so-funktioniert .seq-sheet-meta{font-size:8px}.seq-sheet-row{min-height:40px}#so-funktioniert .seq-sheet-head strong{font-size:10px}#so-funktioniert .seq-report-note{font-size:12px}#so-funktioniert .seq-continue{padding:12px 18px}.seq-source dl{grid-template-columns:1fr}.seq-source dd{margin-bottom:12px}}
@media(max-height:700px){#so-funktioniert .sequence-stage{position:relative;top:auto}#so-funktioniert .sequence-wrap{height:auto!important}#so-funktioniert .seq-phone{display:none}#so-funktioniert .seq-scene{height:auto;min-height:0;max-height:none;display:block}#so-funktioniert .seq-report{position:relative;inset:auto;transform:none!important;opacity:1!important;max-width:100%;width:100%}#so-funktioniert .seq-sentence{display:none}#so-funktioniert .seq-sentence[data-state-text="C"]{display:block;position:static;opacity:1!important;transform:none!important}#so-funktioniert .seq-report-note{position:static;opacity:1!important;margin:12px}}