/* ==========================================================================
   Brandstyleguide One-Pager
   --------------------------------------------------------------------------
   Aufbau dieser Datei:

    1. Schriften (lokal, WOFF2)
    2. Reset & Design-Tokens
    3. Basis-Typografie & Hilfsklassen
    4. Navigation - Desktop-Pill, Mobile-Burger, Overlay
    5. Story - gestapelt  (Default: <900px und bei prefers-reduced-motion)
    6. Story - gepinnt    (ab 900px, nur ohne reduced motion)
    7. Content-Sektionen - Mobile
    8. Content-Sektionen - Desktop (ab 900px)
    9. Reveal-Zustände
   10. Reduced Motion & noscript

   Mobile First: der Default ist die gestapelte Fassung. Die gepinnte
   Scroll-Bühne wird erst ab 900px zugeschaltet - und nur, wenn der Nutzer
   keine reduzierte Bewegung verlangt. Genau dieselbe Bedingung fragt
   app.js per matchMedia ab, damit immer nur eine Engine läuft.
   ========================================================================== */

/* ==========================================================================
   1. SCHRIFTEN
   Variable WOFF2, selbst gehostet (kein Google-CDN - Datenschutz CH/EU).
   Je Familie latin + latin-ext; alle drei stehen unter der SIL OFL.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bodoni Moda, kursiv, nur fuer die hervorgehobenen Akzente. Variable Font
   mit optischer Achse (opsz 6-96): dadurch werden die Haarstriche in kleinen
   Groessen automatisch kraeftiger und laufen im Fliesstext nicht zu. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/bodonimoda-italic-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/bodonimoda-italic-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. RESET & DESIGN-TOKENS
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Markenpalette */
  --off-white: #f5f5f0;
  --anthrazit: #111111;
  /* Acid-Lime ersetzt Terrakotta. Es traegt nur als FLAECHE, nicht als
     duenne Schrift: auf Off-White kaeme Lime auf 1.06:1, mit Schwarz darauf
     sind es 16.3:1. Deshalb ist der Akzent ein Block, kein Textfarbwechsel. */
  --lime: #d4ff00;
  /* Akzentschrift auf hellem Grund. Die Farbe liegt im Block, der Text
     darauf ist anthrazit. */
  --terrakotta: #111111;
  --sand: #c8b89a;

  /* Grautöne */
  --grau-intro: #555555;
  --grau-text: #666666;
  --grau-label: #999999;
  --grau-dunkel: #bbbbbb;
  --linie-hell: #e5e3de;
  --linie-dunkel: #222222;
  --ziffer: #edecea;
  --rand-hell: #cccccc;
  --karten-flaeche: #1a1a1a;

  /* Schriften */
  --font-head: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-demo: "Syne", sans-serif;
  /* Akzentschrift. Der Faktor gleicht die kleinere x-Hoehe der Bodoni
     gegenueber Outfit aus (gemessen: 98 zu 93 bei gleicher Groesse). */
  --font-akzent: "Bodoni Moda", Georgia, serif;
  --akzent-groesse: 1.056em;

  /* Layout */
  --gutter: 24px; /* Seitenrand: Mobile 24px, Desktop 6vw */
  --sec-pad: 88px; /* Sektions-Padding oben: Mobile 88px, Desktop 140px */

  /* Textfarben auf den dunklen Flächen (#111111 / #1A1A1A).
     Die Werte der Vorlage (#333333 bis #777777) lagen zwischen 1.4:1 und
     4.2:1 Kontrast und waren praktisch unlesbar - gerade in der Paket-
     Sektion, also bei der kaufentscheidenden Information. Die Staffelung
     der Vorlage bleibt erhalten, nur oberhalb der AA-Schwelle (4.5:1).

       --auf-dunkel-stark   10.5:1   PRO-Features (hervorgehoben)
       --auf-dunkel-text     7.9:1   Features
       --auf-dunkel-label    6.6:1   Paketname, Footer-Links
       --auf-dunkel-meta     5.5:1   "Alles aus BASIS", Platzhaltertexte */
  --auf-dunkel-stark: #c9c9c9;
  --auf-dunkel-text: #a8a8a8;
  --auf-dunkel-label: #999999;
  --auf-dunkel-meta: #8a8a8a;

  /* Gegenstück für zurückhaltende Texte auf Off-White. #888888 (4.66:1
     wird knapp verfehlt: 3.2:1) und #999999 (2.6:1) reichten dort nicht. */
  --grau-auf-hell: #6e6e6e;

  /* Auf dunklem Grund braucht Lime keine Flaeche: als Schrift auf #111111
     sind es 16.3:1. Dort ist der Akzent also wieder reine Farbe. */
  --terrakotta-hell: var(--lime);

  /* Fehlerfarbe. Bewusst ausserhalb der Markenpalette: sie muss sich vom
     Akzent unterscheiden lassen. 5.2:1 auf #111111, 4.9:1 auf Off-White. */
  --fehler: #ff6b5e;

  /* Easing */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Luft unter den Titelzeilen für die Unterlängen (g, y, ß).
     Die Titel laufen mit line-height 0.92 bzw. 0.95 - also enger als die
     natürliche Zeilenhöhe der Schrift. Jede Beschneidung an der Boxkante
     (clip-path: inset(0) oder overflow: hidden) säbelt dadurch die
     Unterlängen ab. Wo das passiert, schafft padding-bottom Platz und ein
     gleich grosses negatives margin-bottom nimmt ihn dem Layout wieder
     weg - die Zeilenabstände bleiben exakt gleich. */
  --unterlaenge: 0.16em;
}

html {
  -webkit-text-size-adjust: 100%;
}
/* Einzige Regel, die Lenis braucht (aus dessen lenis.css übernommen, statt
   eine zweite Datei auszuliefern). Lenis setzt die Klasse selbst, sobald es
   läuft - also nur auf Desktop und nur ohne "Bewegung reduzieren".
   Die übrigen Regeln aus lenis.css betreffen Funktionen, die diese Seite
   nicht nutzt (data-lenis-prevent, iframes, autoToggle, lenis-stopped). */
html.lenis,
html.lenis body {
  height: auto;
}

/* Kein overflow-x am <body>: das macht den Body zum eigenen Scroll-Container
   und bricht die Sticky-Bühne. Waagrecht läuft ohnehin nichts über - die
   Bühne selbst kappt per overflow: hidden. */
body {
  background: var(--off-white);
  color: var(--anthrazit);
  font-family: var(--font-body);
}

/* ==========================================================================
   3. BASIS-TYPOGRAFIE & HILFSKLASSEN
   ========================================================================== */

.accent {
  color: var(--terrakotta);
}

/* AKZENT
   Wechselt Farbe UND Schrift. Der Schriftwechsel ist nicht Zierde: Lime hat
   gegenueber Off-White nur 1.06:1 Leuchtdichte-Unterschied - ohne ihn saehe
   niemand eine Hervorhebung, der den Farbton nicht unterscheiden kann. */
.accent,
.chtitle__line.accent,
.intro__line.accent {
  font-family: var(--font-akzent);
  font-style: italic;
  font-weight: 700;
  font-size: var(--akzent-groesse);
  letter-spacing: 0;
  /* Optische Achse: haelt die Haarstriche in kleinen Groessen kraeftig. */
  font-optical-sizing: auto;
}

/* Im Fliesstext Hintergrund am Element selbst statt ::before: ein Akzent aus
   mehreren Woertern kann umbrechen, ein absolutes ::before deckt dann nur ein
   Fragment ab. box-decoration-break gibt jeder Zeile ihre eigene Flaeche.
   Der negative Margin nimmt die waagrechte Polsterung zurueck, damit der Satz
   nicht auseinanderrueckt. */
.accent {
  background: var(--lime);
  padding: 0.06em 0.12em 0.1em;
  margin-left: -0.12em;
  margin-right: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* In den Titeln ist die Akzentzeile ein Block, dort deckt ein ::before
   zuverlaessig ab und laesst sich unabhaengig vom Textfluss ausdehnen.
   Ein Inline-Akzent waere hier falsch: bei line-height 0.92 bzw. 1.06 ist
   die Zeilenbox kleiner als die Schrifthoehe, die Flaeche wuerde in die
   Nachbarzeile ragen. */
.chtitle__line.accent,
.intro__line.accent {
  position: relative;
  isolation: isolate;
  /* Ohne fit-content waere die Zeile so breit wie die laengste Zeile des
     Titels, nicht wie ihr eigener Text.
     Kein max-width: 100% dazu - Zirkelbezug (die Prozentbasis ist der Titel,
     dessen Breite gerade aus dieser Zeile entsteht), die Zeile bricht dann um.
     fit-content laeuft von sich aus nicht ueber den Titel hinaus. */
  width: -moz-fit-content;
  width: fit-content;
}
.chtitle__line.accent::before,
.intro__line.accent::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--lime);
}
/* Der Intro-Titel hat keine Unterlängen-Polsterung wie die Kapitel-Titel,
   deshalb unten mehr Luft für das "g" in "verfügbar". */
.intro__line.accent::before {
  inset: -0.02em -0.05em -0.16em -0.05em;
}
/* In den Titeln: oben knapp, weil darueber die naechste Zeile sitzt; unten
   grosszuegig, weil die Akzentzeile immer die letzte des Titels ist und die
   Unterlaengen der Bodoni tiefer gehen als die der Outfit. */
.chtitle__line.accent::before {
  inset: -0.01em -0.04em -0.06em -0.04em;
}
/* Auf dunklem Grund braucht es keine Flaeche, dort traegt die Farbe selbst. */
.pakete .accent,
.kontakt .accent {
  color: var(--lime);
  background: none;
  padding: 0;
  margin: 0;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--anthrazit);
  color: var(--off-white);
  font-size: 13px;
  text-decoration: none;
}
.skiplink:focus {
  left: 0;
}

/* Sektions-Label (BRANDSTYLEGUIDE, VORTEILE, ZIELGRUPPEN)
   Auf hellem Grund dieselbe Lime-Fläche wie bei den Kapitel-Labels, damit
   sich die Auszeichnung durch die ganze Seite zieht. Bewusst serifenlos:
   der Schriftwechsel bleibt der inhaltlichen Hervorhebung vorbehalten.
   inline-block, damit die Fläche nur so breit wird wie der Text. */
.seclabel {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--anthrazit);
}
.seclabel::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--lime);
  inset: -7px -10px -6px -9px;
}
/* "UNSERE PAKETE" steht auf dunklem Grund. Dort trägt Lime als Schrift
   (16.3:1), eine Fläche braucht es nicht - das ist dieselbe Regel wie bei
   den Akzentwörtern. Stattdessen die beiden flankierenden Striche. */
.seclabel--center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  margin-bottom: 40px;
  color: var(--lime);
}
.seclabel--center::before,
.seclabel--center::after {
  content: "";
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 24px;
  height: 1px;
  background: var(--lime);
}

/* Hero-Ladeanimation: jedes Wort gleitet einmalig von unten herein. */
@keyframes wordReveal {
  from {
    clip-path: inset(110% 0 0 0);
    transform: translateY(20px);
  }
  to {
    clip-path: inset(0% 0 0 0);
    transform: translateY(0);
  }
}

/* ==========================================================================
   4. NAVIGATION
   Theme (hell/dunkel) setzt app.js per data-theme, der aktive Punkt per
   aria-current. Kein backdrop-filter - der Blur erzeugte zusammen mit den
   will-change-Ebenen der Story Rendering-Artefakte.
   ========================================================================== */

/* --- Desktop-Pill (ab 900px sichtbar) --- */
.navpill {
  display: none;
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(245, 245, 240, 0.94);
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
  opacity: 0;
  transition:
    opacity 0.6s ease,
    background 0.4s ease,
    border-color 0.4s ease;
  --nav-fg: #111111;
  --nav-muted: #6e6e6e;
  /* Der aktive Punkt bekommt die Lime-Flaeche mit anthrazitem Text: 16.3:1
     und dieselbe Auszeichnungslogik wie im Fliesstext. */
  --nav-active-bg: var(--lime);
  --nav-active: var(--anthrazit);
}
.navpill[data-theme="dark"] {
  background: rgba(20, 20, 20, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  --nav-fg: #f5f5f0;
  --nav-muted: #9a9a95;
  --nav-active-bg: var(--lime);
  --nav-active: var(--anthrazit);
}
body[data-nav-ready] .navpill {
  opacity: 1;
}

.navpill__item {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nav-muted);
  transition:
    color 0.25s ease,
    background 0.25s ease;
}
.navpill__item:hover {
  color: var(--nav-fg);
}
.navpill__item[aria-current="true"] {
  color: var(--nav-active);
  background: var(--nav-active-bg);
}
.navpill__item:focus-visible {
  outline: 2px solid var(--anthrazit);
  outline-offset: 3px;
}
.navpill__item:focus:not(:focus-visible) {
  outline: none;
}

/* --- Mobile-Burger --- */
.burger {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(245, 245, 240, 0.94);
  border: 1px solid rgba(17, 17, 17, 0.08);
  color: var(--anthrazit);
  opacity: 0;
  transition:
    opacity 0.6s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease;
}
.burger[data-theme="dark"] {
  background: rgba(20, 20, 20, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--off-white);
}
body[data-nav-ready] .burger {
  opacity: 1;
}
.burger:focus-visible {
  outline: 2px solid var(--terrakotta);
  outline-offset: 3px;
}
.burger:focus:not(:focus-visible) {
  outline: none;
}

.burger__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease;
}
/* Geöffnet: die beiden Striche rotieren zum Schliessen-Kreuz. */
.burger[aria-expanded="true"] {
  color: var(--anthrazit);
}
.burger[aria-expanded="true"] .burger__bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* --- Fullscreen-Overlay --- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--off-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.overlay[data-open] {
  opacity: 1;
}
.overlay[hidden] {
  display: none;
}
/* Beim Öffnen bekommt der Container den Fokus (siehe openMenu() in app.js).
   Er ist selbst kein Bedienelement, ein Ring um das ganze Overlay wäre also
   nur Rauschen - dass das Menü offen ist, sieht man am Menü. Die Einträge
   darin behalten ihren Fokusring. */
.overlay:focus,
.overlay:focus-visible {
  outline: none;
}

.overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.overlay__item {
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 24px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 32px;
  color: var(--anthrazit);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    color 0.25s ease;
}
.overlay[data-open] .overlay__item {
  opacity: 1;
  transform: translateY(0);
}
.overlay__item:nth-child(1) {
  transition-delay: 0ms;
}
.overlay__item:nth-child(2) {
  transition-delay: 60ms;
}
.overlay__item:nth-child(3) {
  transition-delay: 120ms;
}
.overlay__item:nth-child(4) {
  transition-delay: 180ms;
}
.overlay__item:nth-child(5) {
  transition-delay: 240ms;
}
.overlay__item[aria-current="true"] {
  position: relative;
  isolation: isolate;
  color: var(--anthrazit);
}
.overlay__item[aria-current="true"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 12px 6px 12px;
  background: var(--lime);
}
.overlay__item:focus-visible {
  outline: 2px solid var(--terrakotta);
  outline-offset: 3px;
}
.overlay__item:focus:not(:focus-visible) {
  outline: none;
}

.overlay__mark {
  margin-top: 48px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--grau-auf-hell);
}

/* ==========================================================================
   5. STORY - GESTAPELT
   Default-Fassung: jedes Kapitel eine eigene, etwa bildschirmhohe Sektion
   im normalen Dokumentfluss. Kein Pinning. Gilt unter 900px und - als
   Reduced-Motion-Variante - auch darüber.
   ========================================================================== */

.stage-wrap {
  position: relative;
}

.chapter {
  min-height: 100dvh;
  padding: var(--sec-pad) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Hero --- */
.chapter--hero {
  position: relative;
}

.herotitle {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--anthrazit);
  max-width: 14ch;
}
.herotitle__line {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.28em;
  /* Ohne flex-start würde stretch die Wörter auf die Zeilenhöhe ziehen und
     die Polsterung unten wieder zunichtemachen. */
  align-items: flex-start;
}
/* Ohne die Polsterung schneidet das clip-path: inset(0) am Ende der
   Ladeanimation das "g" in "zufällig." ab (siehe --unterlaenge). */
.herotitle__word {
  display: inline-block;
  padding-bottom: var(--unterlaenge);
  margin-bottom: calc(-1 * var(--unterlaenge));
  clip-path: inset(110% 0 0 0);
  transform: translateY(20px);
  animation: wordReveal 0.7s var(--ease) forwards;
}
.herotitle__word[data-word="1"] {
  animation-delay: 0.15s;
}
.herotitle__word[data-word="2"] {
  animation-delay: 0.3s;
}
.herotitle__word[data-word="3"] {
  animation-delay: 0.45s;
}
.herotitle__word[data-word="4"] {
  animation-delay: 0.6s;
}
.herotitle__word[data-word="5"] {
  animation-delay: 0.75s;
}

.subline {
  margin-top: 24px;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grau-text);
}

.scrollhint {
  position: absolute;
  left: var(--gutter);
  bottom: 6vh;
  display: flex;
  align-items: center;
  gap: 14px;
}
.scrollhint__line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--anthrazit);
}
.scrollhint__text {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--anthrazit);
}

/* --- Kapitel-Bausteine --- */
/* Kapitel-Label: liegt ebenfalls auf Lime, bleibt aber Sans. Der
   Schriftwechsel ist der inhaltlichen Hervorhebung vorbehalten, eine
   Beschriftung ist keine. */
.chlabel {
  /* position MUSS hier stehen, nicht erst im Desktop-Zweig: das ::before ist
     absolut positioniert und braucht ein positioniertes Elternteil. Ohne
     dieses position entsteht der Bezugsrahmen nur zufällig über das transform
     von [data-m-reveal] - und bei "Bewegung reduzieren" fällt das weg, das
     ::before spannt sich dann über die ganze .stage-wrap.
     isolation:isolate erzeugt einen Stapelkontext, aber KEINEN umschliessenden
     Block. Das ist nicht dasselbe. */
  position: relative;
  isolation: isolate;
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--anthrazit);
}
.chlabel::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--lime);
  inset: -7px -10px -6px -9px;
}

.chtitle {
  margin-top: 20px;
  font-family: var(--font-head);
  font-weight: 800;
  /* Mitwachsend, weil die Akzentzeile die längste Zeile der Seite ist und
     über ihre negativen Ränder zusätzlich in den Seitenrand ausblutet: bei
     festen 40px machte sie die Seite auf 360px-Geräten waagrecht scrollbar.
     Die Zeile misst rund das 8.7-fache der Schriftgrösse, 3px sind Marge.
     Ab 390px greift die Obergrenze. */
  font-size: clamp(28px, calc(11vw - 3px), 40px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--anthrazit);
  max-width: 14ch;
}
.chtitle__mask {
  display: block;
}
.chtitle__line {
  display: block;
}

.lead {
  margin-top: 24px;
}
/* line-height 1.85 statt 1.6: bei 1.6 ueberlappten sich die Lime-Bloecke
   zweier aufeinanderfolgender Zeilen. Der Wert haengt direkt an der
   Polsterung von .accent::before, beide gehoeren zusammen. */
.lead p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--anthrazit);
}
.lead[data-lead="2b"] {
  margin-top: 20px;
}

/* --- Kapitel 01: Schrift-Demos (linksbündig gestapelt) --- */
.demos {
  margin-top: 40px;
}
.demo + .demo {
  margin-top: 32px;
}
.demo__glyph--syne {
  font-family: var(--font-demo);
  font-weight: 700;
  font-size: 140px;
  line-height: 0.82;
  letter-spacing: -0.03em;
}
.demo__glyph--inter {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 110px;
  line-height: 0.85;
  letter-spacing: -0.02em;
}
.demo__caption {
  margin-top: 0.6rem;
  font-size: 14px;
  color: var(--grau-text);
}

/* --- Kapitel 02: Farbbalken (volle Breite, Label darunter) --- */
.bars {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bar {
  display: flex;
  flex-direction: column-reverse; /* Label unter dem Balken */
  gap: 6px;
}
.bar__fill {
  width: 100%;
  height: 64px;
}
.bar__fill--1 {
  background: var(--lime);
}
.bar__fill--2 {
  background: var(--anthrazit);
}
.bar__fill--3 {
  background: var(--off-white);
  border: 1px solid var(--rand-hell);
}
.bar__fill--4 {
  background: var(--sand);
}
.bar__label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--grau-text);
}
/* "Terrakotta · #C1440E" - auf 390px darf hier nichts umbrechen erzwungen
   werden, deshalb bewusst kein white-space: nowrap. */
.bar__name::after {
  content: " · ";
}

/* --- Kapitel 03: vereinfachtes Logo-Visual --- */
.logostage {
  display: none;
}

/* Dieselbe Konstruktion wie auf Desktop, im Massstab von 390px. Die Geometrie
   hängt an denselben zwei Grössen, damit sie nicht auf feste Pixelwerte
   kalibriert ist:
     --tw      Breite der Wortmarke
     --th      Höhe, aus dem Seitenverhältnis des SVG (390 : 43.667)
     --schutz  Schutzzone rundum, zugleich das Padding der Box
   Linksbündig, weil rechts Platz für "Cap-Height" und "Baseline" bleiben
   muss (das längere Label braucht 71px). */
.logomobile {
  --schutz: 22px;
  /* Der Abzug ist die Summe dessen, was links und rechts danebensteht:
     Seitenrand + Schutzzone beidseitig + 12px zum Label + 80px fürs Label
     selbst. Wird ein Label länger, muss der Wert mit. */
  --tw: clamp(
    150px,
    calc(100vw - var(--gutter) - 2 * var(--schutz) - 12px - 80px),
    210px
  );
  --th: calc(var(--tw) / 8.93125);
  margin-top: 40px;
  text-align: left;
}
.logomobile__box {
  position: relative;
  display: inline-block;
  padding: var(--schutz);
}
.logomobile__rect {
  position: absolute;
  inset: 0;
  border: 1px solid var(--terrakotta);
  opacity: 0.4;
}
.logomobile__corners {
  display: block;
}
.logomobile__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0.7;
}
.logomobile__corner--tl {
  left: 0;
  top: 0;
  border-left: 1px solid var(--terrakotta);
  border-top: 1px solid var(--terrakotta);
}
.logomobile__corner--tr {
  right: 0;
  top: 0;
  border-right: 1px solid var(--terrakotta);
  border-top: 1px solid var(--terrakotta);
}
.logomobile__corner--bl {
  left: 0;
  bottom: 0;
  border-left: 1px solid var(--terrakotta);
  border-bottom: 1px solid var(--terrakotta);
}
.logomobile__corner--br {
  right: 0;
  bottom: 0;
  border-right: 1px solid var(--terrakotta);
  border-bottom: 1px solid var(--terrakotta);
}
/* Das Beispiel-Logo ist ein Inline-SVG mit fill:currentColor. Gesetzt wird
   immer nur die Breite, die Höhe folgt über das Seitenverhältnis (8.93:1).
   display:block verhindert den Zeilenzwischenraum unter dem SVG. */
.logomobile__mark {
  position: relative;
  display: block;
  width: var(--tw);
  color: var(--anthrazit);
}

/* Ober- und Grundlinie liegen exakt an den Kanten der Wortmarke: die Box ist
   rundum --schutz gepolstert, das Logo beginnt also --schutz unter der
   Oberkante des Polsterbereichs. Genau wie auf Desktop laufen die Linien
   über die volle Breite der Box, nicht nur über das Logo. */
.logomobile__hline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--terrakotta);
  opacity: 0.35;
}
.logomobile__hline--cap {
  top: var(--schutz);
}
.logomobile__hline--base {
  top: calc(var(--schutz) + var(--th));
}
/* Die Beschriftungen stehen rechts neben der Box, auf Höhe ihrer Linie.
   Sie sind der Grund für die linksbündige Ausrichtung; zentriert stünde
   rechts nur die halbe Breite zur Verfügung und "Cap-Height" liefe aus dem
   Bild. */
.logomobile__hlabel {
  position: absolute;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--terrakotta);
  opacity: 0.6;
  white-space: nowrap;
}
.logomobile__hlabel--cap {
  top: var(--schutz);
}
.logomobile__hlabel--base {
  top: calc(var(--schutz) + var(--th));
}

/* "Schutzzone" über der Box, linksbündig - dieselbe Stelle wie auf Desktop. */
.logomobile__vlabel {
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--terrakotta);
  opacity: 0.6;
}

/* Mindestbreite: Doppelpfeil unter der Box, so breit wie die Box. */
.logomobile__measure {
  width: calc(var(--tw) + 2 * var(--schutz));
  margin-top: 18px;
  opacity: 0.7;
}
.logomobile__arrow {
  display: flex;
  align-items: center;
  height: 8px;
}
.logomobile__head {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.logomobile__head--left {
  border-right: 6px solid var(--terrakotta);
}
.logomobile__head--right {
  border-left: 6px solid var(--terrakotta);
}
.logomobile__shaft {
  flex: 1;
  height: 1px;
  background: var(--terrakotta);
}
.logomobile__mindest {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--grau-text);
}
.logomobile__mark svg,
.system__head--mark svg,
.wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Kapitel 04: das System (untereinander, vertikale Linie) --- */
.system {
  margin-top: 40px;
}
.system__items {
  /* Masse an einer Stelle, damit die Verbindungslinie daraus gerechnet wird
     statt aus abgeschriebenen Pixelwerten.
     --sys-item = Kopf 72 + Label-Abstand 14 + Label 12.
     --sys-gap nicht unter 64px: darunter bleiben für die Linienstücke je
     weniger als 12px und sie sehen nach Fehler aus. */
  --sys-item: 98px;
  --sys-gap: 64px;
  --sys-luft: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sys-gap);
}
/* Senkrechte Verbindungslinie aus zwei Stücken, je eines pro Lücke: sie
   spart alle drei Elemente aus, statt hinter ihnen durchzulaufen.
   Die Aussparung ist ein Verlauf mit harten Stopps, kein zweites Element -
   so läuft die clip-path-Reveal über beide Stücke durch. */
.system__line {
  --seg: calc(var(--sys-gap) - 2 * var(--sys-luft)); /* sichtbares Stück */
  --cut: calc(var(--sys-item) + 2 * var(--sys-luft)); /* Aussparung Mitte */
  position: absolute;
  left: calc(50% - 1px);
  top: calc(var(--sys-item) + var(--sys-luft));
  bottom: calc(var(--sys-item) + var(--sys-luft));
  width: 2px;
  background: linear-gradient(
    var(--terrakotta) 0 var(--seg),
    transparent var(--seg) calc(var(--seg) + var(--cut)),
    var(--terrakotta) calc(var(--seg) + var(--cut)) 100%
  );
  z-index: 0;
}
.system__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.system__head {
  height: 72px;
  display: flex;
  align-items: center;
}
.system__head--aa {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  color: var(--anthrazit);
}
.system__head--dots {
  gap: 10px;
}
.system__head--mark {
  width: 150px;
  color: var(--anthrazit);
}
.dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.dot--terrakotta {
  background: var(--lime);
}
.dot--anthrazit {
  background: var(--anthrazit);
}
.dot--offwhite {
  background: var(--off-white);
  border: 1px solid var(--rand-hell);
}
.dot--sand {
  background: var(--sand);
}
.system__label {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 3px;
  color: var(--grau-auf-hell);
}
.system__summary {
  margin-top: 48px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grau-auf-hell);
}

/* ==========================================================================
   7. CONTENT-SEKTIONEN - MOBILE
   (Abschnitt 6 - die gepinnte Bühne - steht weiter unten, damit die
   Desktop-Regeln die Mobile-Defaults sauber überschreiben.)
   ========================================================================== */

/* --- Intro --- */
.intro {
  padding: var(--sec-pad) var(--gutter) 0;
}
.intro__inner {
  max-width: 680px;
}
/* Drei Blockzeilen statt <br>: nur so lässt sich die letzte Zeile als
   Akzent auszeichnen, und auf Mobile bricht jede Zeile für sich um. */
.intro__line {
  display: block;
}
.intro__title {
  margin-top: 24px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--anthrazit);
}
.intro__text {
  margin-top: 32px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--grau-intro);
}

/* --- Vorteile --- */
.vorteile {
  padding: var(--sec-pad) var(--gutter) 0;
}
.vorteile__list {
  margin-top: 40px;
}
.vorteil {
  padding: 20px 0;
}
.vorteil + .vorteil {
  border-top: 0.5px solid var(--linie-hell);
}
/* Abschlusslinie: gibt der Liste ein definiertes Ende, statt sie
   auslaufen zu lassen. */
.vorteil:last-child {
  border-bottom: 0.5px solid var(--linie-hell);
}
/* Ziffer + Name bilden zusammen die linke Spalte. Die Aufteilung
   38% / 58% aus der Vorlage bleibt dadurch unangetastet. */
.vorteil__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.vorteil__num {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--rand-hell);
  transition: color 0.25s ease;
}
/* Zurückhaltender Hover: nur die Ziffer reagiert. Die Einträge sind
   nicht klickbar, ein Farbwechsel am Namen würde Verlinkung suggerieren. */
.vorteil:hover .vorteil__num {
  color: var(--terrakotta);
}
.vorteil__name {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 19px;
  color: var(--anthrazit);
}
.vorteil__text {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grau-text);
}

/* --- Pakete --- */
.pakete {
  background: var(--anthrazit);
  padding: var(--sec-pad) var(--gutter);
}
/* Abstand statt Trennlinie: beide Karten haben eine eigene Fläche. */
.pakete__grid {
  display: grid;
  gap: 16px;
}
/* Flex-Column: zusammen mit margin-top:auto am CTA stehen beide
   "Jetzt anfragen" auf derselben Grundlinie, auch bei ungleich langen
   Listen. Beide Karten liegen bewusst auf derselben Fläche - die Pakete
   sind gleichwertig, nicht gestuft. */
.paket {
  display: flex;
  flex-direction: column;
  padding: 32px var(--gutter);
  background: var(--karten-flaeche);
}

.paket__name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--terrakotta-hell);
}
/* Positionierungssatz: beantwortet "wofür ist das", bevor die Liste kommt. */
.paket__claim {
  margin-top: 12px;
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--auf-dunkel-text);
}
/* Überleitung vor der PRO-Liste. Bewusst ruhig gesetzt: sie soll erklären,
   dass PROs Liste eine Ergänzung ist, aber PRO nicht zum hervorgehobenen
   Paket machen. */
.paket__plus {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--auf-dunkel-meta);
}
.paket__plus + .paket__features {
  margin-top: 10px;
}
.paket__features {
  margin-top: 24px;
  /* Mindestabstand zum CTA — dessen margin-top:auto schluckt nur den
     überschüssigen Platz, nicht diesen Grundabstand. */
  margin-bottom: 16px;
  list-style: none;
  font-size: 13px;
  line-height: 2;
  color: var(--auf-dunkel-stark);
}
.paket__features li::before {
  content: "- ";
}
.paket__cta {
  display: inline-block;
  /* Drückt den CTA an die Spaltenunterkante → gemeinsame Grundlinie. */
  margin-top: auto;
  align-self: flex-start; /* sonst zieht der Flex-Kontext ihn auf volle Breite */
  /* Tap-Fläche exakt 44px: 16px Zeilenhöhe + 2 × 14px Polsterung. Die
     Zeilenhöhe ist gesetzt, damit die Rechnung nicht an der Schriftmetrik
     hängt. */
  padding: 14px 0;
  line-height: 16px;
  font-size: 12px;
  color: var(--terrakotta-hell);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.25s ease;
}
.paket__cta:hover {
  opacity: 0.6;
}
.paket__cta:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* --- Zielgruppen --- */
.zielgruppen {
  padding: var(--sec-pad) var(--gutter) 0;
  padding-bottom: var(--sec-pad);
}
.zielgruppen__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 20px;
}
.zielgruppe__num {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  color: var(--ziffer);
}
.zielgruppe__title {
  margin-top: 8px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 17px;
  color: var(--anthrazit);
}
.zielgruppe__text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--grau-text);
}

/* --- Kontakt + Footer --- */
.kontakt {
  background: var(--anthrazit);
  padding: var(--sec-pad) var(--gutter) 48px;
}
.kontakt__closing {
  margin-bottom: 48px;
}
.kontakt__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.kontakt__text {
  margin-top: 32px;
  max-width: 380px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--grau-dunkel);
}

/* Formular - Unterstrich-Inputs */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field {
  margin-top: 28px;
}
.field:first-of-type {
  margin-top: 0;
}
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--grau-label);
}
.field__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #444444;
  background: transparent;
  padding-bottom: 12px;
  font-family: var(--font-body);
  font-size: 16px; /* genau 16px - verhindert iOS-Auto-Zoom beim Fokus */
  color: #ffffff;
  outline: none;
  transition: border-color 0.25s ease;
}
.field__input--area {
  min-height: 80px;
  resize: none;
}
.field__input::placeholder {
  color: var(--auf-dunkel-meta);
}
/* Fokus in Lime: auf dunklem Grund 16.3:1 und damit unmissverstaendlich,
   welches Feld gerade aktiv ist. */
.field__input:focus {
  border-bottom-color: var(--lime);
}
.field__input:focus-visible {
  outline: none;
}
/* Fehlerzustand bewusst NICHT in Lime, sonst waere er vom Fokus nicht zu
   unterscheiden. Rot bleibt hier die eindeutige Semantik. */
.field__input[aria-invalid="true"] {
  border-bottom-color: var(--fehler);
}

.form__submit {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 0; /* Tap-Fläche ≥44px */
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
  color: #ffffff;
  transition: opacity 0.3s ease;
}
/* Der Pfeil rückt beim Hover nach — macht den Button als Aktion lesbar,
   er wirkt sonst wie blosser Text. Nur transform, kein Layout-Reflow. */
.form__arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}
.form__submit:hover .form__arrow,
.form__submit:focus-visible .form__arrow {
  transform: translateX(4px);
}
.form__submit:hover {
  opacity: 0.65;
}
.form__submit:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.form__submit[disabled] {
  opacity: 0.4;
  cursor: default;
}

.form__status {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grau-dunkel);
  min-height: 1em;
}
.form__status[data-state="error"] {
  color: var(--fehler);
}
.form__status[data-state="ok"] {
  color: var(--off-white);
}

/* Footer */
.footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--linie-dunkel);
}
.footer__mark {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 14px;
  color: var(--auf-dunkel-label);
}
.footer__links {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  /* Kein Zeilenabstand nötig — den liefert die Polsterung der Links. */
  gap: 0 20px;
}
.footer__links a {
  /* Tap-Fläche 44px (16px Zeilenhöhe + 2 × 14px), gleiche Rechnung wie
     beim Paket-CTA. Ohne das sind die Links auf dem Handy 15px hoch. */
  padding: 14px 0;
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--auf-dunkel-label);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer__links a:hover {
  color: var(--off-white);
}
.footer__links a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.footer__copy {
  margin-top: 20px;
  font-size: 12px;
  color: var(--auf-dunkel-meta);
}

/* ==========================================================================
   9. REVEAL-ZUSTÄNDE
   [data-reveal]   - Content-Sektionen, beide Breakpoints (app.js setzt die
                     Transition inline beim Eintritt).
   [data-m-reveal] - Story-Kapitel in der gestapelten Fassung. app.js setzt
                     nur --d (Verzögerung) und die Klasse is-in.
   ========================================================================== */

/* Content-Sektionen - gilt in beiden Fassungen. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
/* Die Zielgruppen stehen nebeneinander und lösen fast gleichzeitig aus.
   Damit die Bewegung überhaupt wahrnehmbar wird, legen sie einen längeren
   Weg zurück und brauchen länger dafür (data-dauer im Markup). */
.zielgruppe[data-reveal] {
  transform: translateY(44px);
}
.vorteil[data-reveal] {
  transform: translateY(16px);
}

/* Story-Kapitel - ausschliesslich in der gestapelten Fassung.
   Bewusst als Media Query formuliert (das genaue Gegenteil der Bedingung
   für die gepinnte Bühne): sonst würden diese Regeln wegen ihrer höheren
   Spezifität in die Bühne hineinwirken und den scroll-gesteuerten Werten
   CSS-Transitions verpassen. */
@media (max-width: 899.98px), (prefers-reduced-motion: reduce) {
  [data-m-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.6s var(--ease),
      transform 0.6s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  [data-m-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Farbbalken: der Balken selbst wird nicht eingeblendet, sondern gefüllt.
     Das Label folgt, sobald die Füllung durch ist. */
  .bar[data-m-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bar .bar__fill {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .bar.is-in .bar__fill {
    clip-path: inset(0);
  }
  .bar .bar__label {
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: calc(var(--d, 0ms) + 0.7s);
  }
  .bar.is-in .bar__label {
    opacity: 1;
  }

  /* Schutzzonen-Rechteck: scale(0.9) → 1, Zielopazität 0.4 */
  .logomobile__rect[data-m-reveal] {
    opacity: 0;
    transform: scale(0.9);
  }
  .logomobile__rect[data-m-reveal].is-in {
    opacity: 0.4;
    transform: scale(1);
  }

  /* Eckmarken: die 0.7 sitzen an den Marken selbst, der Wrapper blendet
     nur auf volle Deckung ein. */
  .logomobile__corners[data-m-reveal] {
    transform: none;
  }
  .logomobile__corners[data-m-reveal].is-in {
    opacity: 1;
  }

  /* Beschriftung "Schutzzone" und Mindestbreite: Zielopazitäten wie auf
     Desktop, damit die Zeichnung nicht schwerer wirkt als dort. */
  .logomobile__vlabel[data-m-reveal].is-in {
    opacity: 0.6;
  }
  .logomobile__measure[data-m-reveal].is-in {
    opacity: 0.7;
  }

  /* Hilfslinien: der Wrapper blendet auf volle Deckung ein, Linien und
     Beschriftungen tragen ihre eigene Opazität. Die Linien laufen zusätzlich
     von links nach rechts auf - dieselbe Geste wie auf Desktop. */
  .logomobile__guides[data-m-reveal].is-in {
    opacity: 1;
  }
  .logomobile__hline {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s var(--ease);
    transition-delay: calc(var(--d, 0ms) + 0.1s);
  }
  .logomobile__guides.is-in .logomobile__hline {
    clip-path: inset(0);
  }

  /* Verbindungslinie K4: Reveal von oben nach unten, Zielopazität 0.4 */
  .system__line[data-m-reveal] {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition:
      opacity 0.6s var(--ease),
      clip-path 0.7s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .system__line[data-m-reveal].is-in {
    opacity: 0.4;
    clip-path: inset(0);
  }
}

/* ==========================================================================
   6. STORY - GEPINNT  (ab 900px, nur ohne reduced motion)
   Eine einzige Sticky-Bühne über 1150vh. Die [data-chapter]-Sektionen
   werden display:contents, ihre Kinder positionieren sich absolut in der
   Bühne. Alle Werte stammen unverändert aus der Design-Referenz.
   ========================================================================== */

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* Die [data-m-reveal]-Zustände greifen hier nicht (siehe Abschnitt 9):
     in der Bühne setzt die Scroll-Engine jeden Wert pro Frame, ohne
     CSS-Transition. */

  /* 1050vh Travel (K1 280 + K2 380 + K3 240 + K4 150) + 100vh Sticky.
     Muss zu den Kapitel-Formeln in app.js passen. */
  .stage-wrap {
    height: 1150vh;
  }
  .stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  /* Die Kapitel-Sektionen sind nur eine semantische Gruppierung; in der
     Bühne zählen ihre Kinder als direkte, absolut positionierte Ebenen. */
  [data-chapter] {
    display: contents;
  }

  /* --- Hero-Titel = zugleich Titel von Kapitel 01. Grösse und top werden
         von app.js scroll-gesteuert interpoliert (15vh → 60px). --- */
  .herotitle {
    position: absolute;
    top: 15vh;
    left: 6vw;
    max-width: 14ch;
    font-size: calc(7vw + 20px);
    line-height: 0.92;
    z-index: 5;
    will-change: transform, opacity, top, font-size;
  }

  .subline {
    position: absolute;
    left: 6vw;
    top: 52vh; /* app.js setzt den finalen Wert messbasiert */
    margin-top: 0;
    max-width: 34ch;
    font-size: 17px;
    z-index: 4;
  }

  .scrollhint {
    left: 6vw;
    bottom: 6vh;
    z-index: 4;
  }
  .scrollhint__line {
    width: 48px;
  }

  /* --- Kapitel-Labels --- */
  .chlabel {
    position: absolute;
    left: 6vw;
    top: 60vh;
    opacity: 0;
    z-index: 4;
  }

  /* --- Kapitel-Titel 2–4 --- */
  .chtitle {
    position: absolute;
    top: 60px;
    left: 6vw;
    margin-top: 0;
    max-width: 14ch;
    /* Die Akzentzeile laeuft in der Bodoni deutlich breiter als in der
       Outfit. Bei clamp(56px, 8vw, 128px) ragte "Unverwechselbar." ueber
       den rechten Rand und in die Visuals hinein. Der Wert muss zur
       Berechnung von normalPx in app.js passen. */
    font-size: clamp(48px, 6.6vw, 100px);
    line-height: 0.92;
    opacity: 0;
    transform: translate(-50px, 200px);
    will-change: transform, opacity;
    z-index: 5;
  }
  .chtitle[data-title="4"] {
    transform: translate(-40px, 180px);
  }
  /* Hier beschneiden zwei Ebenen an der Boxkante: die Maske per overflow
     und die Zeile per clip-path. Beide brauchen die Luft für die
     Unterlängen ("Immer verbindlich.", "Ein System."), in der Bodoni
     zusätzlich mehr als in der Outfit. */
  .chtitle__mask {
    overflow: hidden;
    padding-bottom: var(--unterlaenge);
    margin-bottom: calc(-1 * var(--unterlaenge));
  }
  .chtitle__line {
    padding-bottom: var(--unterlaenge);
    margin-bottom: calc(-1 * var(--unterlaenge));
    clip-path: inset(110% 0 0 0);
    transform: translateY(24px);
    will-change: clip-path, transform;
  }

  /* --- Leadtexte --- */
  .lead {
    position: absolute;
    left: 6vw;
    top: 66vh; /* app.js setzt den finalen Wert messbasiert */
    margin-top: 0;
    opacity: 0;
    will-change: transform, opacity;
    z-index: 4;
  }
  /* Auf schmalen Desktops muessen die Textspalten mitgeben, sonst stossen
     sie mit der Schutzzonen-Konstruktion rechts zusammen. */
  .lead--wide {
    max-width: min(480px, 34vw);
  }
  .lead--narrow {
    max-width: min(380px, 28vw);
  }
  .lead p {
    font-size: 22px;
  }

  /* --- Kapitel 01: Aa-Demos rechts --- */
  .demos {
    position: absolute;
    right: 6vw;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
    text-align: right;
    z-index: 3;
  }
  .demo {
    opacity: 0;
    transform: translateX(100%);
    will-change: transform, opacity;
  }
  .demo + .demo {
    margin-top: 3rem;
  }
  .demo__glyph--syne {
    font-size: clamp(160px, 24vw, 340px);
  }
  .demo__glyph--inter {
    font-size: clamp(120px, 18vw, 260px);
  }
  .demo__caption {
    font-size: 18px;
  }

  /* --- Kapitel 02: Farbbalken rechts, ansteigende Breite --- */
  /* Mittig, nicht vom unteren Rand aus: auf kurzen Viewports (ein
     1440x900-MacBook lässt rund 757px übrig) wuchs der Stapel sonst in die
     Navigation hinein. */
  .bars {
    position: absolute;
    right: 80px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
    z-index: 3;
  }
  .bar {
    flex-direction: column; /* Label über dem Balken */
    align-items: flex-end;
    gap: 6px;
  }
  .bar__label {
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: 0ms;
    text-align: right;
    white-space: nowrap;
  }
  .bar__name {
    display: block;
  }
  .bar__name::after {
    content: none;
  }
  /* An die Viewporthöhe gekoppelt: vier Balken à 80px plus Labels ergeben
     530px Stapelhöhe, zu viel für niedrige Notebooks. */
  .bar__fill {
    height: clamp(56px, 9vh, 80px);
    clip-path: inset(0 0 0 100%);
    transition: none;
  }
  .bar__fill--1 {
    width: 300px;
  }
  .bar__fill--2 {
    width: 400px;
  }
  .bar__fill--3 {
    width: 520px;
  }
  .bar__fill--4 {
    width: 640px;
  }

  /* --- Kapitel 03: Wortmarke + Schutzzonen-Konstruktion --- */
  .logomobile {
    display: none;
  }
  .logostage {
    display: contents;
  }

  /* Die Wortmarke wächst beim Einwandern von 64px auf ihre Zielbreite.
     Bei einem SVG greifen font-size und letter-spacing nicht, deshalb
     interpoliert app.js die Breite. */
  .wordmark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    line-height: 0;
    color: var(--anthrazit);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    will-change: transform, opacity;
  }

  /* Nullgrosser Bezugspunkt in der Mitte der rechten Hälfte, wo die
     Wortmarke zum Stehen kommt. app.js setzt left sowie --tw und --th, die
     Zielmasse des Logos. Die gesamte Geometrie leitet sich daraus ab und
     wächst dadurch mit dem Logo mit, statt auf feste Pixelwerte kalibriert
     zu sein.
       --tw   Breite des Logos
       --th   Höhe des Logos (Seitenverhältnis 8.93:1)
       --schutz  Schutzzone rundum
       --boxh    Höhe der Schutzzonen-Box */
  .construction {
    position: absolute;
    left: 72.5%;
    top: 50%;
    width: 0;
    height: 0;
    --tw: 558px;
    --th: 62px;
    --schutz: 36px;
    --boxh: calc(var(--th) + 2 * var(--schutz));
    z-index: 5;
    pointer-events: none;
  }

  .cbox {
    position: absolute;
    left: calc(var(--tw) / -2 - var(--schutz));
    top: calc(var(--boxh) / -2);
    width: calc(var(--tw) + 2 * var(--schutz));
    height: var(--boxh);
    border: 1px solid var(--terrakotta);
    opacity: 0;
    transform: scale(0.3);
    transform-origin: center;
    will-change: transform, opacity;
  }

  .corner {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    will-change: opacity;
  }
  .corner--tl {
    left: calc(var(--tw) / -2 - var(--schutz));
    top: calc(var(--boxh) / -2);
    border-left: 1px solid var(--terrakotta);
    border-top: 1px solid var(--terrakotta);
  }
  .corner--tr {
    left: calc(var(--tw) / 2 + var(--schutz) - 10px);
    top: calc(var(--boxh) / -2);
    border-right: 1px solid var(--terrakotta);
    border-top: 1px solid var(--terrakotta);
  }
  .corner--bl {
    left: calc(var(--tw) / -2 - var(--schutz));
    top: calc(var(--boxh) / 2 - 10px);
    border-left: 1px solid var(--terrakotta);
    border-bottom: 1px solid var(--terrakotta);
  }
  .corner--br {
    left: calc(var(--tw) / 2 + var(--schutz) - 10px);
    top: calc(var(--boxh) / 2 - 10px);
    border-right: 1px solid var(--terrakotta);
    border-bottom: 1px solid var(--terrakotta);
  }

  .hline {
    position: absolute;
    left: calc(var(--tw) / -2 - var(--schutz));
    width: calc(var(--tw) + 2 * var(--schutz));
    height: 1px;
    background: var(--terrakotta);
    opacity: 0.35;
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
  }
  /* Ober- und Grundlinie liegen exakt an der Ober- und Unterkante des
     Logos, nicht mehr auf festen Pixelwerten. */
  .hline--cap {
    top: calc(var(--th) / -2);
  }
  .hline--base {
    top: calc(var(--th) / 2);
  }

  .hlabel {
    position: absolute;
    left: calc(var(--tw) / 2 + var(--schutz) + 12px);
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--terrakotta);
    opacity: 0;
    white-space: nowrap;
    will-change: opacity;
  }
  .hlabel--cap {
    top: calc(var(--th) / -2);
  }
  .hlabel--base {
    top: calc(var(--th) / 2);
  }

  .vline {
    position: absolute;
    top: calc(var(--boxh) / -2);
    width: 1px;
    height: var(--boxh);
    background: var(--terrakotta);
    opacity: 0.35;
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
  }
  .vline--left {
    left: calc(var(--tw) / -2 - var(--schutz));
  }
  .vline--right {
    left: calc(var(--tw) / 2 + var(--schutz));
  }

  .vlabel {
    position: absolute;
    left: calc(var(--tw) / -2 - var(--schutz));
    top: calc(var(--boxh) / -2 - 16px);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--terrakotta);
    opacity: 0;
    white-space: nowrap;
    will-change: opacity;
  }

  .arrow {
    position: absolute;
    left: calc(var(--tw) / -2 - var(--schutz));
    top: calc(var(--boxh) / 2 + 22px);
    width: calc(var(--tw) + 2 * var(--schutz));
    height: 8px;
    display: flex;
    align-items: center;
    opacity: 0;
    will-change: opacity;
  }
  .arrow__head {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .arrow__head--left {
    border-right: 6px solid var(--terrakotta);
  }
  .arrow__head--right {
    border-left: 6px solid var(--terrakotta);
  }
  .arrow__shaft {
    flex: 1;
    height: 1px;
    background: var(--terrakotta);
  }
  .arrow__label {
    position: absolute;
    left: 0;
    top: calc(var(--boxh) / 2 + 38px);
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--grau-text);
    opacity: 0;
    white-space: nowrap;
    will-change: opacity;
  }

  /* --- Kapitel 04: drei Elemente nebeneinander --- */
  /* Mittig, aber mit Untergrenze: rein zentriert rückt die Reihe auf kurzen
     Viewports an den Titel heran. Die Grenze ist Titelunterkante
     (60px Abstand + 186px Titelhöhe) + 72px Luft + halbe Blockhöhe (228/2).
     Ändert sich die Titelgrösse, muss sie mit. */
  .system {
    position: absolute;
    left: 0;
    right: 0;
    top: max(50%, calc(60px + 186px + 72px + 114px));
    margin-top: 0;
    transform: translateY(-50%);
    z-index: 4;
  }
  .system__row {
    display: flex;
    justify-content: center;
  }
  /* Waagrecht sind die drei Elemente unterschiedlich breit, deshalb ihre
     Einzelmasse statt einer gemeinsamen Grösse. --sys-mitte spielt die Rolle
     von --sys-item aus der gestapelten Fassung. */
  .system__items {
    --sys-gap: 160px;
    --sys-luft: 28px;
    --sys-aa: 129px; /* Breite "Aa" bei 96px Kopfhöhe */
    --sys-mitte: 164px; /* 4 Kreise à 32px + 3 Abstände à 12px */
    --sys-logo: 240px; /* gesetzte Breite des Logo-SVG */
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sys-gap);
  }
  /* Zwei Stücke wie gestapelt, nur waagrecht. Beide gleich lang, weil die
     Luft an allen drei Elementen dieselbe ist. */
  .system__line {
    --seg: calc(var(--sys-gap) - 2 * var(--sys-luft));
    --cut: calc(var(--sys-mitte) + 2 * var(--sys-luft));
    top: 48px; /* halbe Kopfhöhe (96px) */
    left: calc(var(--sys-aa) + var(--sys-luft));
    right: calc(var(--sys-logo) + var(--sys-luft));
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(
      to right,
      var(--terrakotta) 0 var(--seg),
      transparent var(--seg) calc(var(--seg) + var(--cut)),
      var(--terrakotta) calc(var(--seg) + var(--cut)) 100%
    );
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
  }
  .system__item {
    opacity: 0;
    transform: translateY(16px);
    will-change: transform, opacity;
  }
  .system__head {
    height: 96px;
  }
  .system__head--aa {
    font-size: 96px;
  }
  .system__head--dots {
    gap: 12px;
  }
  .system__head--mark {
    width: 240px;
  }
  .dot {
    width: 32px;
    height: 32px;
  }
  .system__label {
    margin-top: 18px;
    font-size: 13px;
  }
  .system__summary {
    margin-top: 80px;
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: normal;
    opacity: 0;
    will-change: opacity;
  }

  /* --- Intro schliesst direkt am Pin-Ende von Kapitel 4 an --- */
  .intro {
    margin-top: -100vh;
    opacity: 0;
    will-change: opacity;
  }
}

/* ==========================================================================
   8. CONTENT-SEKTIONEN - DESKTOP (ab 900px)
   Gilt unabhängig von der Bewegungs-Einstellung.
   ========================================================================== */

@media (min-width: 900px) {
  :root {
    --gutter: 6vw;
    --sec-pad: 140px;
  }

  .navpill {
    display: flex;
  }
  .burger {
    display: none;
  }
  .overlay {
    display: none;
  }

  .seclabel--center {
    /* Mehr Luft unter dem Sektionslabel, passend zum grösseren Gitter. */
    font-size: 11px;
    margin-bottom: 64px;
  }

  /* --- Intro --- */
  .intro {
    padding: 80px var(--gutter) 0;
  }
  .intro__title {
    font-size: 56px;
    line-height: 1.06;
  }
  .intro__text {
    font-size: 20px;
  }

  /* --- Vorteile: zweispaltige Streifen --- */
  .vorteile__list {
    margin-top: 56px;
    margin-bottom: 56px;
  }
  .vorteil {
    display: flex;
    gap: 4%;
    padding: 28px 0;
  }
  /* Die 38% liegen jetzt am Kopf (Ziffer + Name), nicht mehr am Namen
     selbst — die Aufteilung 38% / 58% bleibt damit exakt erhalten. */
  .vorteil__head {
    flex: 0 0 38%;
    gap: 18px;
  }
  .vorteil__name {
    font-size: 22px;
  }
  .vorteil__text {
    flex: 0 0 58%;
    margin-top: 0;
    font-size: 16px;
  }

  /* --- Pakete: 1fr 1.5fr 1fr, kein Gap, Trennung nur per Linie --- */
  .pakete__grid {
    /* Gleich breite Spalten: die Pakete sind gleichwertig, ein
       Breitenunterschied läse sich als Fehler.
       880px statt der vollen Textspalte (1267px) der Nachbarsektionen - über
       die volle Breite stünde hinter jedem Merkmalspunkt mehrere hundert
       Pixel Leerraum und die Karten wirkten wie leere Bänder. */
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 880px;
    margin: 0 auto;
  }
  /* Mitwachsend: fest 48px frassen bei 1024px so viel Spalte, dass der
     längste Merkmalspunkt umbrach. */
  .paket {
    padding: clamp(36px, 3.6vw, 52px) clamp(32px, 3.4vw, 48px);
  }
  .paket__name {
    font-size: 13px;
  }
  /* 20px: der Claim ist die Überschrift der Karte. Er liegt damit zwischen
     dem Leadtext der Story (22px) und den Zielgruppentexten (15px). */
  .paket__claim {
    max-width: 26ch;
    font-size: 20px;
  }
  .paket__plus {
    margin-top: 32px;
    font-size: 13px;
  }
  .paket__features {
    margin-top: 32px;
    margin-bottom: 36px;
    font-size: 17px;
    /* Bei 17px ergäbe line-height 2 volle 34px Zeilenabstand - das reisst die
       Liste auseinander. 1.9 hält sie als Block zusammen. */
    line-height: 1.9;
  }
  .paket__cta {
    padding: 0;
    font-size: 16px;
  }

  /* --- Zielgruppen: vier Spalten --- */
  .zielgruppen__grid {
    margin-top: 64px;
    display: flex;
    gap: 5%;
  }
  .zielgruppe {
    flex: 1;
  }
  .zielgruppe__num {
    font-size: 80px;
  }
  .zielgruppe__title {
    margin-top: 12px;
    font-size: 22px;
  }
  .zielgruppe__text {
    margin-top: 10px;
    max-width: 220px;
    font-size: 15px;
  }

  /* --- Kontakt: zweispaltig --- */
  .kontakt {
    padding: 120px var(--gutter) 80px;
  }
  .kontakt__cols {
    display: flex;
    gap: 10%;
    align-items: flex-start;
  }
  .kontakt__closing {
    flex: 0 0 50%;
    margin-bottom: 0;
  }
  .kontakt__formwrap {
    flex: 1;
  }
  .kontakt__title {
    font-size: 48px;
    line-height: 1.1;
  }
  .kontakt__text {
    font-size: 16px;
  }
  .field {
    margin-top: 32px;
  }
  .form__submit {
    margin-top: 40px;
    padding: 0;
  }

  /* --- Footer: einzeilig --- */
  .footer {
    margin-top: 80px;
    padding-top: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  .footer__links {
    margin-top: 0;
    gap: 8px 16px;
  }
  /* Am Desktop braucht es keine vergrösserte Tap-Fläche — die Polsterung
     würde die Fusszeile nur unnötig hoch machen. */
  .footer__links a {
    padding: 0;
  }
  .footer__copy {
    margin-top: 0;
  }
}

/* ==========================================================================
   10. REDUCED MOTION & NOSCRIPT
   Bei reduzierter Bewegung: Ladeanimation übersprungen, Reveals sofort
   sichtbar, keine Transitions. Die Story läuft dann in der gestapelten
   Fassung (die gepinnte Bühne oben ist bewusst an
   prefers-reduced-motion: no-preference gebunden).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .herotitle__word {
    animation: none;
    clip-path: inset(0);
    transform: none;
  }

  [data-reveal],
  [data-m-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bar .bar__fill,
  .system__line[data-m-reveal] {
    clip-path: inset(0) !important;
    transition: none !important;
  }
  .bar .bar__label {
    opacity: 1 !important;
    transition: none !important;
  }
  .logomobile__rect[data-m-reveal] {
    opacity: 0.4 !important;
  }
  .logomobile__vlabel[data-m-reveal] {
    opacity: 0.6 !important;
  }
  .logomobile__measure[data-m-reveal] {
    opacity: 0.7 !important;
  }
  .logomobile__hline {
    clip-path: inset(0) !important;
    transition: none !important;
  }
  .system__line[data-m-reveal] {
    opacity: 0.4 !important;
  }

  .cookiehinweis {
    transform: none !important;
    transition: none !important;
  }

  .navpill,
  .burger {
    transition: none;
  }
  .overlay,
  .overlay__item {
    transition: none;
  }

  /* Der Pfeil im Absende-Button bewegt sich nicht; der Hover bleibt
     über die Deckkraft trotzdem spürbar. */
  .form__arrow {
    transition: none;
  }
  .form__submit:hover .form__arrow,
  .form__submit:focus-visible .form__arrow {
    transform: none;
  }
}

/* Ohne JavaScript bleibt nichts unsichtbar liegen. */
.no-js [data-reveal],
.no-js [data-m-reveal] {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   11. RECHTSSEITEN (impressum.html, datenschutz.html)
   Eigenständige Unterseiten in derselben Designsprache.
   ========================================================================== */

.legal {
  max-width: 680px;
  margin: 0 auto;
  padding: 88px var(--gutter) 120px;
}
.legal__back {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--terrakotta);
  text-decoration: none;
}
.legal__back:hover {
  opacity: 0.6;
}
.legal__title {
  margin-top: 32px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--anthrazit);
}
.legal h2 {
  margin-top: 48px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 19px;
  color: var(--anthrazit);
}
.legal p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grau-intro);
}
/* ==========================================================================
   COOKIE-HINWEIS
   Kompakte Karte unten rechts statt eines Balkens über die volle Breite:
   der Scroll-Hinweis im Hero sitzt unten LINKS, ein voller Balken würde ihn
   zudecken. Liegt unter Burger (60) und Overlay (55), das Menü deckt ihn
   also zu, wenn es offen ist.
   ========================================================================== */
.cookiehinweis {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 45;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* max-width plus margin-left:auto schiebt die Karte nach rechts; auf
     schmalen Geräten bleibt sie dadurch von selbst über die volle Breite. */
  max-width: 460px;
  margin-left: auto;
  padding: 18px 20px;
  background: var(--anthrazit);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.cookiehinweis[data-sichtbar] {
  opacity: 1;
  transform: none;
}
.cookiehinweis[hidden] {
  display: none;
}
.cookiehinweis__text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--auf-dunkel-text);
}
.cookiehinweis__text a {
  color: var(--terrakotta-hell);
  text-underline-offset: 3px;
}
.cookiehinweis__text a:hover {
  opacity: 0.6;
}
.cookiehinweis__text a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
/* Negative Ränder: 44px Tap-Fläche, ohne die Karte grösser zu machen. */
.cookiehinweis__schliessen {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
  color: var(--auf-dunkel-stark);
  transition: opacity 0.25s ease;
}
.cookiehinweis__schliessen:hover {
  opacity: 0.6;
}
.cookiehinweis__schliessen:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* Links im Fliesstext der Rechtsseiten. Ohne diese Regel griffe die
   Browser-Vorgabe (Blau) und fiele aus der Seite heraus. */
.legal p a {
  color: var(--terrakotta);
  text-underline-offset: 3px;
}
.legal p a:hover {
  opacity: 0.6;
}
.legal p a:focus-visible,
.legal__back:focus-visible {
  outline: 2px solid var(--terrakotta);
  outline-offset: 3px;
}
.legal__footer {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 0.5px solid var(--linie-hell);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 14px;
  color: var(--grau-label);
}

@media (min-width: 900px) {
  .legal {
    padding: 140px var(--gutter) 160px;
  }
  .legal__title {
    font-size: 56px;
    line-height: 1.06;
  }
  .legal h2 {
    font-size: 22px;
  }
}