/* ==========================================================================
   Freiraum: Stylesheet
   Markenwelt: Off-White, Salbeigrün, Waldgrün, Apricot (Akzent)
   Kein Framework, keine Build-Kette. Mobile first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Metrisch angeglichene Ersatzschriften

   Bis die Webschriften geladen sind, rendert der Browser mit einer lokalen
   Schrift. Inter ist rund 9 Prozent breiter als Segoe UI und rund 7 Prozent
   breiter als Arial. Ohne Ausgleich springt deshalb beim Nachladen die
   gesamte Kopfzeile. Die folgenden Werte wurden im Browser gemessen und
   gleichen die Laufweite an, sodass der Wechsel praktisch unsichtbar ist.

   Die Zeilenhoehe ist im gesamten Stylesheet explizit gesetzt, deshalb sind
   ascent- und descent-override nicht noetig.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter Ersatz Segoe";
  src: local("Segoe UI"), local("Segoe UI Regular");
  size-adjust: 109.09%;
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: "Inter Ersatz Arial";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 106.90%;
  font-weight: 100 900;
  font-style: normal;
}
/* Georgia wird ueber @font-face ohne kuenstlichen Fettschnitt eingebunden.
   Deshalb braucht der Ueberschriftenschnitt einen eigenen Wert. */
@font-face {
  font-family: "Serif Ersatz Georgia";
  src: local("Georgia"), local("Liberation Serif"), local("Times New Roman");
  size-adjust: 106.88%;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Serif Ersatz Georgia";
  src: local("Georgia"), local("Liberation Serif"), local("Times New Roman");
  size-adjust: 108.40%;
  font-weight: 500 900;
  font-style: normal;
}
@font-face {
  font-family: "Serif Ersatz Georgia";
  src: local("Georgia"), local("Liberation Serif"), local("Times New Roman");
  size-adjust: 106.88%;
  font-weight: 100 900;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   1. Design-Tokens (Freiraum 2026/2027 Farb- & Maßsystem)
   -------------------------------------------------------------------------- */
:root {
  /* Flächen */
  --paper:          #f8f7f2;   /* Primärer warmer Seitengrund */
  --paper-alt:      #fbf9f5;   /* Warmes Papier alternativ */
  --paper-2:        #f3f5f0;   /* Sekundärer Grund / abgesetzte Bänder */
  --card:           #ffffff;
  --forest:         #294437;   /* Primäres Waldgrün */
  --forest-brand:   #2c4a38;   /* Marken-Waldgrün */
  --forest-deep:    #183027;   /* Tiefes Waldgrün */
  --forest-ink:     #20352a;   /* Dunkles Grün für markante Texte */

  /* Grün & Salbei */
  --sage:           #afc0ae;   /* Salbeigrün */
  --sage-alt:       #afc2b3;
  --sage-soft:      #e5ece4;   /* Sanftes Salbei */
  --sage-soft-alt:  #e6ede4;
  --sage-ink:       #375443;   /* Kontraststark für Text auf hell */
  --sage-line:      #c7d5c6;

  /* Akzent (menschliche Wärme, behutsam dosiert) */
  --apricot:        #d9835f;   /* Apricot-Akzent */
  --apricot-alt:    #d9814c;
  --apricot-soft:   #f3dfd4;   /* Weiches Apricot */
  --apricot-soft-alt: #f8e6d8;
  --apricot-line:   #e8c1b0;

  /* Text & Kontraste */
  --ink:            #18221e;   /* Primärtext */
  --ink-2:          #39423d;   /* Fließtext */
  --ink-3:          #59635d;   /* Sekundärtext */
  --on-dark:        #eef2ea;
  --on-dark-2:      #b3c2b6;

  /* Linien & Trennungen */
  --line:           #dde3dd;
  --line-strong:    #cad2ca;

  /* Typografie */
  --sans: "Inter", "Inter Ersatz Segoe", "Inter Ersatz Arial",
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", "Serif Ersatz Georgia", "Iowan Old Style",
           "Palatino Linotype", Georgia, "Times New Roman", serif;

  /* Maße */
  --shell: 75rem;          /* ~1200px Content-Breite */
  --shell-narrow: 46rem;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Ruhige, warme Schatten */
  --shadow-sm: 0 1px 3px rgba(24, 34, 30, .04);
  --shadow:    0 2px 6px rgba(24, 34, 30, .04), 0 12px 28px -12px rgba(24, 34, 30, .10);
  --shadow-lg: 0 4px 10px rgba(24, 34, 30, .04), 0 24px 60px -20px rgba(24, 34, 30, .14);
}

/* --------------------------------------------------------------------------
   2. Reset / Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  /* Platz der Scrollleiste immer reservieren. Ohne das verschiebt sich
     die Kopfzeile beim Wechsel auf eine kürzere Seite. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  /* optimizeLegibility bewusst nicht gesetzt: es erzeugt uneinheitliche
     Textmetriken und dadurch minimale Layoutsprünge in der Kopfzeile. */
  -webkit-font-smoothing: antialiased;
  /* clip, nicht hidden: hidden macht den Body zum Scrollcontainer
     und kann position: sticky aushebeln. */
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

strong { font-weight: 600; }

::selection { background: var(--apricot-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--sage-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout-Bausteine
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 40em) { .shell { padding-inline: 2rem; } }

.narrow { max-width: var(--shell-narrow); margin-inline: auto; }

.section { padding-block: 4rem; }
@media (min-width: 48em) { .section { padding-block: 6rem; } }
@media (min-width: 64em) { .section { padding-block: 7rem; } }

.section--tight { padding-block: 3rem; }
@media (min-width: 48em) { .section--tight { padding-block: 4.5rem; } }

/* Farbige Bänder */
.band--sage   { background: var(--sage-soft); }
.band--paper2 { background: var(--paper-2); }
.band--forest { background: var(--forest); color: var(--on-dark); }
.band--forest h1, .band--forest h2, .band--forest h3, .band--forest h4 { color: var(--on-dark); }
.band--forest .muted { color: var(--on-dark-2); }
/* Nicht auf Schaltflaechen anwenden: .band--forest a hat hoehere
   Spezifitaet als .btn--light und faerbte dessen Text hell auf hell. */
.band--forest a:not(.btn) { color: var(--on-dark); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: var(--on-dark);
  padding: .75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Typografie-Klassen
   -------------------------------------------------------------------------- */
.display {
  font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.55rem);
  line-height: 1.07;
  letter-spacing: -0.022em;
}

.h1 { font-size: clamp(1.95rem, 1.3rem + 2.9vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; }
.h2 { font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.5rem); line-height: 1.15; }
.h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.25; }
.h4 { font-size: 1.0625rem; line-height: 1.35; font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }

.lead {
  font-size: clamp(1.09rem, 1.02rem + .38vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.muted { color: var(--ink-3); }
.tint  { color: var(--sage-ink); }
.serif { font-family: var(--serif); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--sage);
  flex: none;
}
.kicker--accent { color: var(--apricot); }
.kicker--accent::before { background: var(--apricot-line); }
.band--forest .kicker { color: #a9c6ae; }
.band--forest .kicker::before { background: #4d6b56; }

.section-head { margin-bottom: 2.5rem; max-width: 46rem; }
.section-head .lead { margin-top: 1rem; }
@media (min-width: 48em) { .section-head { margin-bottom: 3.5rem; } }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
}
.btn:hover { background: rgba(126, 154, 133, .1); border-color: var(--sage); }
.btn:active { transform: translateY(1px); }

.btn--solid {
  background: var(--forest);
  border-color: var(--forest);
  color: #f6f9f4;
}
.btn--solid:hover {
  background: #2a4635;
  border-color: #2a4635;
  color: #ffffff;
}
.btn--solid:focus-visible { outline-color: var(--forest); }

.btn--light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.btn--light:hover { background: #fff; border-color: #fff; }

/* Helle Ghost-Variante fuer den Hero. Vorher stand dort ein unterstrichener
   Textlink direkt unter dem gefuellten Button -- die Unterstreichung las sich
   als zweite, abgeschnittene Buttonkante. */
.btn--ghost { border-color: var(--line-strong); color: var(--ink-2); background: transparent; }
.btn--ghost:hover { border-color: var(--forest); color: var(--forest); background: rgba(41, 68, 55, .04); }

.btn--ghost-light { border-color: rgba(238, 242, 234, .35); color: var(--on-dark); }
.btn--ghost-light:hover { background: rgba(238, 242, 234, .1); border-color: rgba(238, 242, 234, .6); }

.btn--sm { padding: .55rem 1.05rem; font-size: .88rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.textlink {
  color: var(--sage-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sage-line);
  padding-bottom: 1px;
  font-weight: 500;
  transition: border-color .18s ease, color .18s ease;
}
.textlink:hover { border-color: var(--sage-ink); }
.band--forest .textlink { color: #b8d2bc; border-bottom-color: #46644f; }
.band--forest .textlink:hover { border-bottom-color: #b8d2bc; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  font-weight: 500;
  color: var(--sage-ink);
}
.arrow-link span { transition: transform .18s ease; }
.arrow-link:hover span { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Kopfzeile / Navigation
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 245, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-head[data-scrolled="true"] {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-head__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* feste Hoehe, damit die Kopfzeile zwischen den Seiten nicht springt */
  min-height: 4.25rem;
}
@media (min-width: 40em) { .site-head__inner { padding-inline: 2rem; } }

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__mark {
  display: block;
  flex: none;
  filter: drop-shadow(0 1px 1px rgba(24, 43, 34, .08));
}

.site-nav {
  display: none;
  align-items: center;
  gap: .35rem;
  margin-left: auto;      /* rechtsbuendig verankert */
  flex: none;
}
/* Gemessen: die volle Navigation braucht 1030 Pixel innerhalb der Schale,
   mit Innenabstand also rund 1100. Bei 62em lief sie 17 Pixel ueber den
   Rand hinaus und die Schaltflaeche war angeschnitten. */
@media (min-width: 69em) { .site-nav { display: flex; } }

.site-nav a:not(.btn) {
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .95rem;
  color: var(--ink-2);
  transition: color .18s ease, background-color .18s ease;
}
.site-nav a:not(.btn):hover { color: var(--ink); background: rgba(126, 154, 133, .1); }
.site-nav a:not(.btn)[aria-current="page"] {
  color: var(--ink);
  background: rgba(217, 129, 76, .09);
  box-shadow: inset 0 -2px 0 var(--apricot);
}
.site-nav .btn { margin-left: .75rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: 999px;
  padding: .6rem 1.05rem .6rem .95rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  transition: background-color .18s ease, border-color .18s ease;
}
.nav-toggle:hover { border-color: var(--sage); background: var(--sage-soft); }
@media (min-width: 69em) { .nav-toggle { display: none; } }

/* Drei gleichmäßige Striche, optisch zentriert zur Schrift */
.nav-toggle__bars {
  display: block;
  position: relative;
  width: 18px;
  height: 12px;
  flex: none;
}
/* Ganze Pixel. Bei 1,7px lagen die drei Striche auf verschiedenen
   Subpixelgrenzen, der obere wirkte dadurch duenner als die anderen. */
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars {
  --bar: 2px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--bar);
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { bottom: 0; }
/* mittlerer Strich */
.nav-toggle__bars span {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: var(--bar);
  background: currentColor;
  border-radius: 2px;
  transition: opacity .18s ease;
}

/* Geöffneter Zustand: Kreuz */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: .75rem 1.25rem 1.5rem;
}
.mobile-nav[data-open="true"] { display: block; }

/* Das Menue ist auf dem Telefon ein eigenes Blatt, kein aufgeklappter
   Streifen. Der Inhalt dahinter scrollt nicht mit, sonst verliert man beim
   Schliessen die Position. */
@media (max-width: 68.99em) {
  .mobile-nav[data-open="true"] {
    position: fixed;
    top: var(--kopfhoehe, 4.25rem);
    left: 0;
    right: 0;
    /* Nicht bottom: 0. Die Kopfzeile hat backdrop-filter und ist damit der
       Bezugsrahmen fuer position: fixed. Das Blatt waere sonst so hoch wie
       die Kopfzeile. Die Hoehe wird deshalb gerechnet. */
    height: calc(100vh - var(--kopfhoehe, 4.25rem));
    height: calc(100dvh - var(--kopfhoehe, 4.25rem));
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 1.25rem 2.5rem;
    animation: menueEin .28s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes menueEin {
    from { opacity: 0; transform: translateY(-.5rem); }
    to   { opacity: 1; transform: none; }
  }
}
body[data-nav-open="true"] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-nav[data-open="true"] { animation: none; }
}
@media (min-width: 69em) { .mobile-nav { display: none !important; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--line); }
.mobile-nav a:not(.btn) {
  display: block;
  padding: .9rem .25rem;
  text-decoration: none;
  font-size: 1.05rem;
}
.mobile-nav .btn { margin-top: 1.25rem; width: 100%; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: 3rem 3.5rem; position: relative; }
@media (min-width: 48em) { .hero { padding-block: 4.5rem 5rem; } }
@media (min-width: 64em) { .hero { padding-block: 5.5rem 6rem; } }

.hero__sub { margin-top: 1.4rem; max-width: 34rem; }

.hero__note {
  margin-top: 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: var(--ink-3);
  max-width: 30rem;
}

.hero__proof {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .65rem;
}
.hero__proof li {
  font-size: .88rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: .65rem;
}
.hero__proof li::before {
  content: "✓";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: #33553d;
  font-size: .7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Statuszeile im Hero: editorial gesetzt, kein Badge */
.hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .7rem;
  margin: 0 0 1.6rem;
  font-size: 1rem;
  color: var(--ink-2);
  max-width: 30rem;
}
.hero__status b {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #9a5227;
  background: var(--apricot-soft);
  border-radius: 4px;
  padding: .28rem .5rem;
  white-space: nowrap;
}
.hero__status span {
  font-family: var(--serif);
  font-size: 1.06rem;
  color: var(--ink-2);
}

.device {
  width: 100%;
  max-width: 20rem;
  background: var(--forest);
  border-radius: 34px;
  padding: 9px;
  box-shadow: var(--shadow-lg);
}

.device__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.1rem .35rem;
  font-size: .72rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.device__status-icons { display: inline-flex; gap: .3rem; align-items: center; }

.device__label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: .5rem;
}

.device__title {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}

.caption {
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--ink-3);
  text-align: center;
  max-width: 24rem;
  margin-inline: auto;
  line-height: 1.5;
}

/* UI-Kartenelemente in der Gerätedarstellung */
.ui-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8rem .85rem;
  margin-bottom: .6rem;
}
.ui-card:last-child { margin-bottom: 0; }

.ui-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.ui-name { font-size: .88rem; font-weight: 500; }
.ui-meta { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.ui-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.ui-status--on {
  background: var(--sage-soft);
  color: #33553d;
}
.ui-status--pending {
  background: #f4f1e9;
  color: #7a6a4e;
}
.ui-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.ui-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--sage-soft);
  overflow: hidden;
  margin-top: .6rem;
}
.ui-bar__fill { height: 100%; border-radius: 999px; background: var(--sage); }
.ui-bar__fill--warn { background: var(--apricot); }

.ui-divider { height: 1px; background: var(--line); margin: .9rem 0; }

/* --------------------------------------------------------------------------
   9. Karten & Raster
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: 1.5rem; }
}

.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split--sticky > :first-child { position: sticky; top: 6.5rem; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.card h3, .card .h4 { margin-bottom: .55rem; }
.card p { color: var(--ink-2); font-size: .97rem; }
.card p:last-child { margin-bottom: 0; }
.card--sage  { background: var(--sage-soft); border-color: var(--sage-line); }
.band--forest .card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(238, 242, 234, .13);
}
.band--forest .card p { color: var(--on-dark-2); }
.band--forest .card__icon { background: rgba(169, 198, 174, .16); color: #b8d2bc; }
.pillars .h3 { margin-bottom: .6rem; }

.pull {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.95rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  margin: 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--apricot);
}

/* --------------------------------------------------------------------------
   11. Nummerierte Schritte
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1.25rem; }
@media (min-width: 56em) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.steps > li {
  counter-increment: step;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--sage-line);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 600;
  color: var(--sage-ink);
  margin-bottom: .6rem;
  letter-spacing: .04em;
}
.steps h3 { margin-bottom: .5rem; }
.steps p { color: var(--ink-2); font-size: .97rem; margin-bottom: 0; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  position: relative;
  margin: 0;
  padding: 0 0 2rem 2rem;
  border-left: 1px solid var(--sage-line);
}
.timeline > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -4.5px; top: .55rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage);
  border: 2px solid var(--paper);
  box-sizing: content-box;
}
.timeline__when {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: .3rem;
}
.timeline h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.timeline p { color: var(--ink-2); font-size: .97rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Listen: Ja / Nein
   -------------------------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.checklist li {
  position: relative;
  padding-left: 2.2rem;
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  display: block;
}
.checklist li::before {
  position: absolute;
  left: 0;
  top: .15rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
}
.checklist--no li::before {
  content: "✕";
  background: var(--apricot-soft);
  color: #9a5227;
}
.checklist--yes li::before {
  content: "✓";
  background: var(--sage-soft);
  color: #33553d;
}
.band--forest .checklist--no li::before { background: rgba(217, 129, 76, .2); color: #f0b98f; }
.band--forest .checklist--yes li::before { background: rgba(169, 198, 174, .18); color: #b8d2bc; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }

.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color .18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sage-ink); }
.faq summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 1.75rem;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--sage-ink);
  border-bottom: 1.5px solid var(--sage-ink);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.95rem; }
.faq__answer { padding: 0 1rem 1.6rem 0; max-width: 44rem; color: var(--ink-2); }
.faq__answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Quellen / Wissenschaft
   -------------------------------------------------------------------------- */
.source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.source-list > li {
  margin: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.source-list > li:first-child { border-top: 1px solid var(--line); }
.source-list h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.source-list .source-meta {
  font-size: .85rem;
  color: var(--ink-3);
  margin-bottom: .65rem;
}
.source-list p { font-size: .97rem; color: var(--ink-2); }

.tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
  margin-right: .35rem;
  vertical-align: 1px;
}
.tag--sage { background: var(--sage-soft); border-color: var(--sage-line); color: #3f6349; }
.tag--accent { background: var(--apricot-soft); border-color: var(--apricot-line); color: #9a5227; }

.note {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  font-size: .97rem;
  color: var(--ink-2);
}
.note strong { color: var(--ink); }
.note--accent { background: var(--apricot-soft); border-color: var(--apricot-line); }

/* --------------------------------------------------------------------------
   15. Gründerbereich
   -------------------------------------------------------------------------- */
.founder { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56em) { .founder { grid-template-columns: 20rem 1fr; gap: 3.5rem; } }
@media (min-width: 72em) { .founder { grid-template-columns: 23rem 1fr; } }

.founder__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 4 / 5;
  max-width: 20rem;
}
.founder__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 75%;
}
.founder__meta {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--ink-3);
  max-width: 20rem;
}
.founder__meta strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .15rem; }

.signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-2);
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   16. Formular
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }

.field { display: grid; gap: .4rem; }
.field label { font-size: .92rem; font-weight: 500; }
.field .hint { font-size: .84rem; color: var(--ink-3); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(126, 154, 133, .2);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #b4553a;
  box-shadow: 0 0 0 3px rgba(180, 85, 58, .13);
}

.field__error {
  font-size: .85rem;
  color: #a34728;
  min-height: 0;
}
.field__error:empty { display: none; }

.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
}
.field--check input { width: 1.1rem; height: 1.1rem; margin-top: .28rem; accent-color: var(--sage-ink); }
.field--check label { font-weight: 400; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.field--check .field__error { grid-column: 1 / -1; }

.form__status {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: .95rem;
  display: none;
}
.form__status[data-state="ok"] {
  display: block;
  background: var(--sage-soft);
  border: 1px solid var(--sage-line);
  color: #2c4a35;
}
.form__status[data-state="error"] {
  display: block;
  background: var(--apricot-soft);
  border: 1px solid var(--apricot-line);
  color: #8d4a22;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   17. Fußzeile
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--forest-deep);
  color: var(--on-dark-2);
  padding-block: 3.5rem 2rem;
  font-size: .93rem;
}
.site-foot a:not(.btn) { color: var(--on-dark-2); text-decoration: none; }
.site-foot a:not(.btn):hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }

.site-foot__grid { display: grid; gap: 2.25rem; }
@media (min-width: 40em) { .site-foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .site-foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } }

.site-foot h2 { font-size: 1rem; color: var(--on-dark); margin-bottom: .9rem; font-family: var(--sans); font-weight: 600; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .55rem; }
.site-foot .brand { color: var(--on-dark); margin-bottom: .9rem; }

.site-foot__legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(238, 242, 234, .12);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem;
}

/* --------------------------------------------------------------------------
   18. Rechtstexte / Fließtextseiten
   -------------------------------------------------------------------------- */
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.75rem; margin-bottom: .85rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.85rem; margin-bottom: .6rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .93rem;
}
.prose th, .prose td {
  text-align: left;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { font-weight: 600; color: var(--ink); background: var(--paper-2); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.todo {
  background: #fff6e8;
  border: 1px dashed #d9a05c;
  border-radius: 8px;
  padding: .15rem .5rem;
  font-size: .9rem;
  color: #8a5a1e;
  font-weight: 500;
}

.page-head { padding-block: 3rem 1rem; }
@media (min-width: 48em) { .page-head { padding-block: 4.5rem 1.5rem; } }

/* --------------------------------------------------------------------------
   19. Bewegung
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* --------------------------------------------------------------------------
   21. Diagramme
   -------------------------------------------------------------------------- */
.figure {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 48em) { .figure { padding: 1.75rem 2rem; } }

.figure__svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}
.figure .caption { margin-top: .9rem; }

/* --------------------------------------------------------------------------
   22. Wärme: Grund, weiche Formen, Illustrationen
   -------------------------------------------------------------------------- */

/* Sehr ruhiger, warmer Farbgrund. Zwei weit auslaufende Lichtflächen,
   damit die Seite nicht wie ein leeres Blatt Papier wirkt. */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(58rem 40rem at 88% -6%, rgba(232, 176, 132, .16), transparent 62%),
    radial-gradient(52rem 38rem at -8% 12%, rgba(126, 154, 133, .15), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Weiche organische Form hinter dem Hero */
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6rem -30% auto auto;
  width: min(46rem, 90vw);
  aspect-ratio: 1 / .82;
  background: radial-gradient(closest-side, rgba(126, 154, 133, .22), transparent 72%);
  border-radius: 62% 38% 55% 45% / 48% 56% 44% 52%;
  pointer-events: none;
}

/* Illustrationen */
.illu {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.illu--wide { max-width: 46rem; }
.illu--sm { max-width: 26rem; }

.illu-figure { margin: 3rem 0; }
.illu-figure:first-child { margin-top: 0; }
.illu-figure figcaption {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--ink-3);
  text-align: center;
  max-width: 30rem;
  margin-inline: auto;
  line-height: 1.55;
}

/* Karten etwas weicher und wärmer */
.card { border-radius: 18px; }
.card--sage { border-radius: 18px; }
.figure { border-radius: 20px; }

/* Weicher Übergang zwischen hellen und farbigen Bändern */
.band--sage, .band--paper2 { position: relative; }

/* Zitatblöcke wärmer akzentuieren */
.pull { position: relative; }
.pull::before {
  content: "";
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--apricot), rgba(217, 129, 76, .15));
  border-radius: 2px;
}

/* Bild des Gründers weicher einbetten */
.founder__photo { box-shadow: var(--shadow); }
.founder__photo::after { content: none; }


/* --------------------------------------------------------------------------
   23. Feinschliff der Geraetedarstellung
   -------------------------------------------------------------------------- */
.device { max-width: 19rem; padding: 10px; border-radius: 38px; }

.device__label {
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--ink-3);
  margin-bottom: .35rem;
}
.device__title { font-size: 1.3rem; margin-bottom: .9rem; }

.ui-card { padding: .75rem .8rem; margin-bottom: .55rem; border-radius: 13px; }

/* Titel und Status in eine Zeile zwingen, kein hässlicher Umbruch */
.ui-row { gap: .5rem; }
.ui-name {
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-meta { font-size: .74rem; white-space: nowrap; }

.ui-status {
  font-size: .64rem;
  letter-spacing: .01em;
  padding: .22rem .45rem;
  gap: .3rem;
  flex: none;
}
.ui-dot { width: 5px; height: 5px; }

.ui-bar { height: 5px; margin-top: .55rem; }

/* --------------------------------------------------------------------------
   24. Illustrationsplatten
   Die Illustrationen tragen den Papierton der Marke. Auf abgesetzten Bändern
   wirken sie dadurch wie eingelegte Tafeln, deshalb runde Ecken.
   -------------------------------------------------------------------------- */
.illu {
  border-radius: 18px;
  background: var(--paper);
}
.band--paper2 .illu,
.illu-band .illu {
  box-shadow: 0 1px 2px rgba(34, 44, 38, .04), 0 18px 40px -28px rgba(34, 44, 38, .22);
}


/* --------------------------------------------------------------------------
   25. Wortmarke als Lockup
   Das Produkt heißt Wiedeki Freiraum. Die Herkunftsangabe steht deshalb
   dauerhaft an der Wortmarke.
   -------------------------------------------------------------------------- */
.brand__lockup {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: .16rem;
}
.brand__name {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.brand__by {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.site-foot .brand__by { color: var(--on-dark-2); opacity: .8; }
.site-foot .brand__name { font-size: 1.2rem; }
@keyframes stagePulse {
  0%   { box-shadow: 0 0 0 0 rgba(143, 206, 159, .45); }
  70%  { box-shadow: 0 0 0 6px rgba(143, 206, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 206, 159, 0); }
}

/* Das Geraet bekommt auf der dunklen Platte eine Lichtkante */
.device-stage .device {
  position: relative;
  max-width: 18.5rem;
  background: linear-gradient(165deg, #4d6a56 0%, #24382c 42%, #18291f 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .09),
    0 26px 44px -20px rgba(8, 16, 12, .75);
}

/* Auf breiten Spalten darf das Geraet groesser stehen, dann bricht auch
   kein Regelname mehr ab. */
@media (min-width: 64em) {
  .device-stage .device { max-width: 20.5rem; }
}

/* Auf schmalen Geraeten darf ein Regelname umbrechen statt abzuschneiden.
   Die Fusszeile stapelt dann ohne Trennstriche. */
@media (max-width: 30em) {
}

/* Der Fortschrittsbalken laeuft einmal auf, wenn der Hero erscheint */
.hero .reveal.is-in .ui-bar__fill {
  transform-origin: left center;
  animation: uiFill 1.05s .45s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes uiFill {
  from { transform: scaleX(.04); }
  to   { transform: scaleX(1); }
}

/* Belegzeile in der linken Spalte: gestapelt gesetzt, keine Pillen.
   Ein umbrechender Trennstrich landet sonst am Zeilenanfang. */
.hero__proof {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 1.7rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  max-width: 26rem;
}
.hero__proof li {
  position: relative;
  padding-left: 1rem;
  font-size: .84rem;
  color: var(--ink-2);
}
.hero__proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 7px;
  height: 1px;
  background: var(--sage-ink);
}

/* Der Hinweis unter den Schaltflaechen ist Fliesstext, kein Flexcontainer */
.hero__note { display: block; margin-top: 1.35rem; }

@media (prefers-reduced-motion: reduce) {
  .hero .reveal.is-in .ui-bar__fill { animation: none; }
}

@media (max-width: 67.99em) {
  .phone-hardware {
    order: 1;
    width: 100%;
    max-width: 19rem;
  }
}

.phone-hardware {
  position: relative;
  width: 100%;
  max-width: 19.5rem;
  margin-inline: auto;
  background: linear-gradient(165deg, #334d3e 0%, #1f3428 28%, #14231b 100%);
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 1px 2px rgba(255, 255, 255, .35),
    0 0 0 1px #0e1a14,
    0 8px 24px -4px rgba(20, 42, 33, .3),
    0 38px 80px -20px rgba(14, 30, 23, .55);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
}
.phone-hardware:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .25),
    inset 0 1px 2px rgba(255, 255, 255, .4),
    0 0 0 1px #0e1a14,
    0 12px 32px -4px rgba(20, 42, 33, .35),
    0 48px 90px -18px rgba(14, 30, 23, .6);
}

.phone-hardware__screen {
  background: var(--paper);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(24, 34, 30, .08);
  padding-bottom: .75rem;
}

.phone-hardware__notch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
  margin-bottom: 2px;
}
.phone-hardware__speaker {
  width: 44px;
  height: 4px;
  background: #203529;
  border-radius: 999px;
}
.phone-hardware__camera {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14221a;
  box-shadow: inset 0 0 2px rgba(0,0,0,.8);
}

/* Kreisförmiger Budget-Ring im Hero */
.time-ring-wrap {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .85rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: .6rem;
}
.time-ring {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
}
.time-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.time-ring-bg {
  stroke: var(--sage-soft);
}
.time-ring-val {
  stroke: var(--apricot);
  stroke-dasharray: 100;
  stroke-dashoffset: 27; /* 73% genutzt */
  transition: stroke-dashoffset 1s ease;
}
.time-ring-info {
  flex: 1;
  min-width: 0;
}
.time-ring-info .ui-meta {
  margin: .2rem 0 0;
}
.device__bottom-note {
  line-height: 1.4;
  color: var(--forest-ink);
  font-weight: 500;
  text-align: center;
  margin-top: .6rem;
  font-size: .76rem;
}


@media (min-width: 64em) {
  .phone-story-container {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 3.5rem;
    align-items: flex-start;
  }
  .phone-story__left {
    display: flex;
    flex-direction: column;
  }
  .hero__lead-block {
    padding-bottom: 4rem;
  }
  .phone-story__sticky {
    position: sticky;
    top: 5.5rem;
    height: calc(100vh - 7rem);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
  }
  .phone-story__narrative {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding-bottom: 6rem;
  }
}


/* --------------------------------------------------------------------------
   28b. Telefonfassung des Hero
   Auf dem Telefon ist die Kapitelstrecke keine Liste aus vier Karten,
   sondern ein Geraet mit einer Zeitleiste darunter. Sichtbar ist immer nur
   das Kapitel, das gerade auf dem Display steht. Vier gestapelte Karten
   kosteten hier zweieinhalb Bildschirmhoehen und erzaehlten dieselbe
   Geschichte viermal.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99em) {
  /* Reihenfolge auf dem Telefon: Schlagzeile, dann das Geraet, dann die
     Zeitleiste, die es steuert. Vorher stand das Geraet unter allen
     Kapiteln, also unter der Bedienung, die es veraendert. */
  .phone-story__left { display: contents; }
  .hero__lead-block { order: 1; }
  .phone-story__sticky { order: 2; }
  .phone-story__narrative { order: 3; }

  .phone-story__narrative .story-chapter { display: none; }
  .phone-story__narrative .story-chapter.active { display: block; }

  /* Ohne Nachbarn braucht das Kapitel keine Kartenwand mehr */
  .story-chapter {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: .25rem 0 0;
    cursor: default;
  }
  .story-chapter.active {
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .story-chapter h3 { font-size: 1.45rem; }
  .story-chapter .lead { font-size: 1rem; }

  /* Die Zeitleiste wird zur Steuerung und gehoert deshalb unter das Geraet */
  .phone-story__narrative { gap: 0; }
  .story-timeline-rail {
    margin-bottom: 1.1rem;
    padding-bottom: .35rem;
  }

  /* Der Hero traegt auf dem Telefon weniger Luft, damit die Schlagzeile
     und der erste Beleg zusammen auf den Schirm passen */
  .hero__status { margin-bottom: 1rem; }
  .hero__sub { margin-top: 1rem; }
  .hero__proof { margin-top: 1.25rem; padding-top: .9rem; }
  .hero__note { margin-top: 1.1rem; }
}

@media (max-width: 63.99em) {
  .phone-story-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .hero__lead-block {
    padding-bottom: 1rem;
  }
  /* Das Geraet ist auf dem Telefon 500 Pixel hoch. Klebend belegt es
     zusammen mit der Kopfzeile zwei Drittel des Schirms und verdeckt genau
     die Zeitleiste, die es steuert. Also scrollt das Geraet mit, und die
     Bedienung bleibt stehen. */
  .phone-story__sticky {
    position: static;
    padding-block: .5rem 1.25rem;
  }
  /* Das Gehaeuse behaelt bei jedem Zustand exakt dieselbe Proportion.
     Zuvor hatte der Bildschirm nur eine Mindesthoehe; dadurch bestimmte
     der unterschiedlich lange Inhalt des aktiven Zustands die Geraetehoehe. */
  .phone-story__sticky .phone-hardware {
    width: min(100%, 17rem);
    max-width: none;
    aspect-ratio: .486 / 1;
    margin-inline: auto;
    display: flex;
  }
  .phone-story__sticky .phone-hardware__screen {
    width: 100%;
    min-height: 0;
    flex: 1;
  }
  .phone-story__sticky .phone-hardware__screens {
    min-height: 0;
    flex: 1;
  }
  .phone-story__sticky .phone-screen-state.active {
    height: 100%;
  }

  .story-timeline-rail {
    position: sticky;
    top: var(--kopfhoehe, 4.25rem);
    z-index: 12;
    background: var(--paper);
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    padding-block: .6rem;
    border-bottom: 1px solid var(--line);
  }
  .phone-story__narrative {
    display: grid;
    gap: 1.25rem;
  }
}

.story-chapter {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2rem;
  box-shadow: var(--shadow-sm);
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  position: relative;
  cursor: pointer;
}
.story-chapter h3 {
  font-size: 1.75rem;
  margin-top: .4rem;
  margin-bottom: .8rem;
  color: var(--ink);
}
.story-chapter.active {
  background: #ffffff;
  border-color: var(--forest);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--forest-brand);
  transform: scale(1.02);
}
.story-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--forest-ink);
  background: var(--sage-soft);
  padding: .4rem .85rem;
  border-radius: 999px;
  margin-top: 1rem;
}
.story-chip--safe {
  background: #e4efe4;
  color: #2b5735;
}

/* Multi-Screen Crossfade innerhalb des Smartphones */
.phone-hardware__screens {
  position: relative;
  width: 100%;
  min-height: 25.5rem;
  overflow: hidden;
}
.phone-screen-state {
  position: absolute;
  inset: 0;
  padding: .85rem .95rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.phone-screen-state.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  position: relative;
}

/* --------------------------------------------------------------------------
   29. Signatur-Moment 2: Chaos → Klarheit Metamorphose
   -------------------------------------------------------------------------- */
.chaos-clarity-section {
  padding-block: 5rem 6rem;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.chaos-stage {
  position: relative;
  max-width: 48rem;
  margin: 3.5rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chaos-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  max-width: 44rem;
  transition: all .6s cubic-bezier(.16, 1, .3, 1);
}
.bubble {
  background: #ffffff;
  border: 1.5px dashed var(--apricot-line);
  color: #8c4b28;
  font-family: var(--serif);
  font-size: 1.05rem;
  padding: .65rem 1.15rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transform: rotate(var(--r, 0deg));
  transition: all .5s cubic-bezier(.16, 1, .3, 1);
}
.chaos-stage.is-condensed .bubble {
  opacity: 0.25;
  transform: scale(0.7) translateY(16px);
  filter: blur(1.5px);
}
.chaos-transform-arrow {
  margin-block: 1.5rem;
  color: var(--sage-ink);
  display: grid;
  place-items: center;
}

.clarity-monolith {
  width: 100%;
  max-width: 32rem;
  background: #ffffff;
  border: 1px solid var(--sage-line);
  border-radius: var(--radius-xl);
  padding: 2rem 2.2rem;
  box-shadow: 0 16px 40px -10px rgba(41, 68, 55, .15);
  transition: all .5s cubic-bezier(.16, 1, .3, 1);
}
.clarity-monolith__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}
.clarity-badge {
  font-size: .8rem;
  font-weight: 700;
  color: var(--forest);
  background: var(--sage-soft);
  padding: .3rem .75rem;
  border-radius: 999px;
}
.clarity-time {
  font-size: .82rem;
  color: var(--ink-3);
}
.clarity-row {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding-block: .65rem;
  border-bottom: 1px solid var(--line);
}
.clarity-row:last-child { border-bottom: none; }
.clarity-row__icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--forest);
  display: grid;
  place-items: center;
  font-size: .85rem;
  flex: none;
}
.clarity-row strong {
  display: block;
  font-size: .95rem;
  color: var(--forest);
}
.clarity-row span {
  font-size: .83rem;
  color: var(--ink-2);
}
.clarity-monolith__foot {
  margin-top: 1.25rem;
  font-size: .82rem;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.4;
  font-family: var(--serif);
}

/* --------------------------------------------------------------------------
   30. Signatur-Moment 3: Komplexitäts-Stream (Einfach für Familien)
   -------------------------------------------------------------------------- */
.complexity-stream {
  margin-top: 3.5rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 3rem 2rem;
  box-shadow: var(--shadow);
}
@media (min-width: 64em) {
  .complexity-stream {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 1.5rem;
    padding: 3.5rem 2.5rem;
    align-items: center;
  }
}
@media (max-width: 63.99em) {
  .complexity-stream {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.25rem;
  }
}
.complexity-inputs {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.stream-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  transition: all .25s ease;
}
.stream-card:hover {
  border-color: var(--sage);
  transform: translateY(-2px);
}
.stream-card__tag {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sage-ink);
  margin-bottom: .25rem;
}
.stream-card strong {
  display: block;
  font-size: .92rem;
  color: var(--ink);
}
.stream-card span {
  font-size: .8rem;
  color: var(--ink-3);
  display: block;
  margin-top: .15rem;
}
.complexity-core {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.core-hub {
  background: var(--forest);
  color: #ffffff;
  padding: 1.5rem 1.25rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(41, 68, 55, .25);
  position: relative;
  z-index: 2;
  min-width: 12rem;
  max-width: 13.5rem;
  flex: none;
}
.core-hub__badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apricot-soft);
  margin-bottom: .35rem;
}
.core-hub__title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  display: block;
  margin-bottom: .4rem;
}
.core-hub__desc {
  font-size: .78rem;
  color: var(--on-dark-2);
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 64em) {
  .stream-connector--desktop {
    display: flex;
    align-items: center;
    flex: 1 1 50px;
    height: 160px;
  }
  .stream-connector--desktop svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .stream-connector--desktop path {
    stroke-dasharray: 6 6;
    animation: streamFlow 12s linear infinite;
  }
  .stream-connector--mobile {
    display: none;
  }
}
@media (max-width: 63.99em) {
  .complexity-core {
    flex-direction: column;
    gap: .85rem;
  }
  .stream-connector--desktop {
    display: none;
  }
  .stream-connector--mobile {
    display: grid;
    place-items: center;
    color: var(--sage-ink);
    padding: .25rem;
  }
}
@keyframes streamFlow {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}
.stream-card--output {
  background: #ffffff;
  border: 1.5px solid var(--forest);
  padding: 1.5rem;
  box-shadow: 0 12px 28px -6px rgba(41, 68, 55, .12);
}
.stream-card__tag--ok {
  color: var(--forest);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   31. Signatur-Moment 4: Eltern → Kind Synchronisation
   -------------------------------------------------------------------------- */
.parent-child-sync-stage {
  margin-top: 3rem;
  background: linear-gradient(180deg, #f7faf6 0%, #edf3ec 100%);
  border: 1px solid var(--sage-line);
  border-radius: var(--radius-xl);
  padding: 3rem 1.5rem;
}
@media (min-width: 56em) {
  .parent-child-sync-stage { padding: 4rem 3rem; }
  .sync-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.5rem;
  }
}
@media (max-width: 55.99em) {
  .sync-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }
}
.sync-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sage-ink);
  display: block;
  margin-bottom: .85rem;
}
.sync-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.sync-card h4 {
  font-size: 1.15rem;
  margin-bottom: .35rem;
}
.sync-controls {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}
.sync-btn {
  flex: 1;
  padding: .5rem .6rem;
  font-size: .84rem;
  cursor: pointer;
}
.sync-btn.active {
  background: var(--forest);
  color: #ffffff;
  border-color: var(--forest);
}
.sync-meta-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--ink-2);
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.sync-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
}
.sync-bridge__line {
  width: 80px;
  height: 3px;
  background: var(--sage);
  position: relative;
  border-radius: 999px;
  overflow: hidden;
}
.sync-pulse {
  position: absolute;
  top: 0; left: 0; width: 30px; height: 100%;
  background: var(--forest-brand);
  border-radius: 999px;
  animation: pulseTravel 2s infinite ease-in-out;
}
@keyframes pulseTravel {
  0% { transform: translateX(-30px); }
  100% { transform: translateX(80px); }
}
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #ffffff;
  border: 1px solid var(--sage-line);
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--forest);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* Child Phone Mockup innerhalb der Synchronisations-Bühne */
.child-phone {
  width: 100%;
  max-width: 21.5rem;
  margin-inline: auto;
  background: #17261e;
  border-radius: 40px;
  padding: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .15),
    0 24px 60px -15px rgba(20, 38, 29, .5);
}
.child-screen {
  background: #fafaf6;
  border-radius: 30px;
  overflow: hidden;
  padding: 1.15rem 1.25rem 1.6rem;
}
.child-screen__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
}
.child-alert-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.35rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  transition: all .3s ease;
}
.child-alert-card--warn {
  border-left: 4px solid var(--apricot);
}
.child-alert-card h4 {
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: .4rem;
}
.child-alert-card p {
  font-size: .86rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 0;
}
.child-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .32rem .7rem;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage-ink);
  margin-bottom: .85rem;
}

/* --------------------------------------------------------------------------
   32. Signatur-Moment 5: Twilight Evening Calm Sanctuary
   -------------------------------------------------------------------------- */
.evening-ambient {
  background: linear-gradient(180deg, #1d3127 0%, #13221a 100%);
  color: var(--on-dark);
  border-radius: var(--radius-xl);
  padding: 4.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 48em) {
  .evening-ambient { padding: 6rem 4rem; }
}
.evening-ambient::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -15%;
  width: 36rem;
  height: 36rem;
  background: radial-gradient(circle, rgba(217, 131, 95, .18) 0%, transparent 70%);
  pointer-events: none;
}
.evening-ambient h2 {
  color: var(--on-dark);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 1.35rem;
}
.evening-ambient .lead {
  color: var(--on-dark-2);
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   33. Interaktiver Smartphone-Berater & Tech-Concierge
   -------------------------------------------------------------------------- */
.consulting-section {
  background: var(--sage-soft);
  border-radius: var(--radius-xl);
  padding: 3.5rem 1.5rem;
  margin-block: 2.5rem;
  border: 1px solid var(--sage-line);
}
@media (min-width: 48em) {
  .consulting-section { padding: 5rem 3.5rem; }
}

.device-advisor-box {
  background: #ffffff;
  border: 1px solid var(--sage-line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  margin-top: 2rem;
  box-shadow: var(--shadow);
}
@media (min-width: 48em) {
  .device-advisor-box { padding: 2.5rem; }
}

.advisor-filters {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (min-width: 52em) {
  .advisor-filters { grid-template-columns: repeat(3, 1fr); }
}

.advisor-filter-group label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--forest);
  margin-bottom: .5rem;
}
.advisor-filter-group select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  /* Rechts Platz fuer den Auswahlpfeil, sonst schneidet er den Text ab */
  padding: .75rem 2.2rem .75rem .9rem;
  text-overflow: ellipsis;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.advisor-filter-group select:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(41, 68, 55, .15);
}

.advisor-result-card {
  background: #f7faf7;
  border: 1px solid var(--sage-line);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
@media (min-width: 48em) {
  .advisor-result-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.advisor-result-card__meta strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--forest);
  margin-bottom: .1rem;
}
.advisor-result__kicker {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--apricot);
  margin-bottom: .4rem;
}
/* Der Preis ist die Zahl, die Eltern zuerst suchen. Er bekommt deshalb
   eine eigene Zeile und tabellarische Ziffern. */
.advisor-result__price {
  margin: 0 0 .6rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.advisor-result__cta { flex: none; align-self: flex-start; }
@media (min-width: 48em) {
  .advisor-result__cta { align-self: center; }
}
.advisor-result-card__meta p {
  font-size: .92rem;
  color: var(--ink-2);
  margin-bottom: 0;
  max-width: 36rem;
}

/* --------------------------------------------------------------------------
   35. Redaktionelle Illustrationen (Warm, ruhig & menschlich)
   -------------------------------------------------------------------------- */
.illu-figure {
  margin: 0;
  display: block;
}
.illu {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  background: var(--paper-2);
}
.illu--frame {
  border: 1px solid var(--line);
  background: #ffffff;
  padding: .5rem;
  box-shadow: var(--shadow-sm);
}
.illu--wide {
  max-width: 38rem;
  margin-inline: auto;
}
.illu-figure figcaption {
  font-size: .84rem;
  color: var(--ink-3);
  margin-top: .75rem;
  text-align: center;
  font-family: var(--serif);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   36. Interaktiver Kategorie-Inspektor (Differenzierte Grenzen)
   -------------------------------------------------------------------------- */
.category-inspector {
  margin-top: 1.5rem;
}
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.cat-tab-btn {
  background: #ffffff;
  border: 1px solid var(--line);
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.cat-tab-btn:hover {
  border-color: var(--sage);
  color: var(--ink);
  transform: translateY(-1px);
}
.cat-tab-btn.active {
  background: var(--forest);
  border-color: var(--forest);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(41, 68, 55, .15);
}
.cat-display-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.35rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: all .3s ease;
}
.cat-display-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
.cat-display-card__title {
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}
.cat-display-card__meter {
  height: 8px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .85rem;
}
.cat-display-card__fill {
  height: 100%;
  background: var(--forest);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.16, 1, .3, 1), background-color .3s ease;
}
.cat-display-card__desc {
  font-size: .86rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
}

/* --------------------------------------------------------------------------
   37. Chaos / Clarity Segmented Switch
   -------------------------------------------------------------------------- */
.chaos-switch-bar {
  display: inline-flex;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  gap: 4px;
}
.chaos-switch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .55rem 1.35rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all .25s ease;
}
.chaos-switch-btn strong {
  font-size: .88rem;
  color: var(--ink-2);
}
.chaos-switch-btn span {
  font-size: .72rem;
  color: var(--ink-3);
  margin-top: 1px;
}
.chaos-switch-btn:hover strong {
  color: var(--ink);
}
.chaos-switch-btn.active {
  background: var(--forest);
  box-shadow: 0 4px 12px rgba(41, 68, 55, .18);
}
.chaos-switch-btn.active strong {
  color: #ffffff;
}
.chaos-switch-btn.active span {
  color: var(--on-dark-2);
}

/* --------------------------------------------------------------------------
   38. Architektur-Vergleich (Store-Apps vs. Device Owner Kernel)
   -------------------------------------------------------------------------- */
.arch-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 52em) {
  .arch-compare {
    grid-template-columns: 1fr 1.15fr;
  }
}
.arch-card {
  border-radius: var(--radius-lg);
  padding: 2rem 1.65rem;
  border: 1px solid var(--line);
}
.arch-card--store {
  background: #ffffff;
  border-color: rgba(217, 131, 95, .35);
}
.arch-card--freiraum {
  background: #ffffff;
  border: 2px solid var(--forest);
  box-shadow: 0 16px 36px -12px rgba(41, 68, 55, .16);
  position: relative;
}
.arch-card__badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .28rem .75rem;
  border-radius: 999px;
  margin-bottom: .85rem;
}
.arch-card--store .arch-card__badge {
  background: var(--apricot-soft);
  color: #8c4b28;
}
.arch-card--freiraum .arch-card__badge {
  background: var(--sage-soft);
  color: var(--forest);
}
.arch-card h3 {
  font-size: 1.25rem;
  margin-bottom: .4rem;
}
.arch-card p.arch-sub {
  font-size: .86rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}
.arch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.arch-list li {
  font-size: .86rem;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.arch-icon--bad {
  color: #c05230;
  font-weight: 700;
  font-size: 1rem;
  flex: none;
}
.arch-icon--good {
  color: var(--forest);
  font-weight: 700;
  font-size: 1rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   39. Story Timeline Rail (Hero in Motion)
   -------------------------------------------------------------------------- */
.story-timeline-rail {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.story-timeline-rail::-webkit-scrollbar { display: none; }
.story-timeline-node {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .8rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .25s ease;
}
.story-timeline-node:hover {
  border-color: var(--sage);
  color: var(--ink);
}
.story-timeline-node.active {
  background: var(--forest);
  color: #ffffff;
  border-color: var(--forest);
  box-shadow: 0 4px 12px rgba(41, 68, 55, .15);
}
.story-timeline-node__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   27. Hilfsklassen
   Stehen bewusst am Dateiende, damit Abstandsklassen nicht von
   Komponentenregeln gleicher Spezifitaet ueberschrieben werden.
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.center .lead, .center .section-head { margin-inline: auto; }


/* --------------------------------------------------------------------------
   37. Nachjustierung nach der Gestaltungsdurchsicht
   -------------------------------------------------------------------------- */

/* Die Reibungsblasen sind der Zustand "ohne Freiraum". Im Ruhemodus standen
   sie auf dem Telefon als graue, unlesbare Textwand weiter im Fluss und
   sahen aus wie ein Darstellungsfehler. */
@media (max-width: 47.99em) {
  .chaos-stage.is-condensed .chaos-bubbles {
    display: none;
  }
}

/* Bedienzeichen sind jetzt Linienzeichnungen statt Emoji */
.clarity-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Das Abschlussmotiv des Alltagsabschnitts */
.chaos-illu {
  margin: 0 0 2rem;
}
.chaos-illu img {
  border-radius: 18px;
}
.chaos-illu figcaption {
  margin-top: .9rem;
  text-align: center;
  font-size: .9rem;
  color: var(--ink-3);
}

/* Der Statuspunkt in der Ruhekarte ist jetzt ein Element, kein Textzeichen */
.clarity-badge { display: inline-flex; align-items: center; gap: .4rem; }
.clarity-badge .ui-dot { background: currentColor; }


/* --------------------------------------------------------------------------
   38. Beruehrflaechen auf dem Telefon
   Gemessen bei 320 Pixel Breite: Zeitleiste 28, Kategoriereiter 33,
   Menueknopf 36, Fusszeilenlinks 18 Pixel hoch. Ein Finger trifft das nicht
   zuverlaessig. Richtwert sind 44 Pixel.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 68.99em) {
  .story-timeline-node {
    min-height: 44px;
    padding-block: .55rem;
  }
  .cat-tab-btn {
    min-height: 44px;
    padding-block: .6rem;
  }
  .nav-toggle {
    min-height: 44px;
    padding-block: .7rem;
  }
  .site-foot a:not(.btn) {
    display: inline-block;
    padding-block: .38rem;
  }
  .faq summary { min-height: 44px; }
}


/* --------------------------------------------------------------------------
   39. Tablet, 48 bis 64em
   Zwischen Telefon und Desktop lief die Seite in der Telefonfassung, aber
   auf 750 Pixel Breite. Ergebnis: Zeilen mit 95 Zeichen und ein 272 Pixel
   breites Geraet allein in einer halbleeren Spalte. Beides gehoert
   gefasst, nicht neu gebaut.
   -------------------------------------------------------------------------- */
@media (min-width: 48em) and (max-width: 63.99em) {
  /* Lesbare Zeilenlaenge. Richtwert sind 65 bis 75 Zeichen. */
  .hero__lead-block .lead,
  .hero__lead-block .hero__note,
  .hero__proof,
  .story-chapter .lead,
  .section-head .lead,
  .section-head p,
  .split > div > p,
  .split > div > .lead {
    max-width: 38rem;
  }

  /* Das Geraet darf mehr Raum nehmen und steht mittig */
  .phone-story__sticky .phone-hardware { max-width: 21rem; }

  /* Der Alltagsabschnitt und die Belegzeile wirken sonst wie Reste */
  .hero__proof { column-count: 2; column-gap: 2.5rem; }
  .hero__proof li { break-inside: avoid; }

  /* Zwei Spalten, wo bisher gestapelt wurde */
  .consulting-grid,
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Auch auf dem Telefon bleibt die Zeile nicht laenger als noetig */
@media (max-width: 47.99em) {
  .story-chapter .lead { max-width: 34rem; }
}


/* --------------------------------------------------------------------------
   40. Vergleich, Preis, Rueckweg
   Drei Abschnitte, die ohne Karten auskommen. Die Ordnung entsteht aus
   Ziffern, Linien und Weissraum.
   -------------------------------------------------------------------------- */
.vergleich-liste {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.vergleich-liste li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1.25rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.vergleich-liste li:last-child { border-bottom: 1px solid var(--line); }
.vergleich-liste__nr {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--apricot);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.vergleich-liste h3 { margin: 0 0 .4rem; }
.vergleich-liste p { margin: 0; max-width: 44rem; }
@media (min-width: 62em) {
  .vergleich-liste li { grid-template-columns: 4rem 1fr; padding: 2rem 0; }
  .vergleich-liste__nr { font-size: 1.6rem; }
}
@media (max-width: 30em) {
  .vergleich-liste li { grid-template-columns: 2.5rem 1fr; gap: 0 .9rem; padding: 1.4rem 0; }
  .vergleich-liste__nr { font-size: 1.15rem; }
}

/* Die Preistafel: die Zahl traegt, das Wort erklaert */
.preis-block { border-top: 1px solid var(--line); }
.preis-block__zeile {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.preis-block__wert {
  flex: none;
  min-width: 4.75rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.preis-block__was {
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink-2);
}
@media (min-width: 48em) {
  .preis-block__wert { font-size: 2rem; min-width: 5.5rem; }
}
@media (max-width: 26em) {
  .preis-block__zeile { flex-direction: column; gap: .15rem; }
  .preis-block__wert { min-width: 0; }
}


/* --------------------------------------------------------------------------
   41. Nach dem Absenden
   -------------------------------------------------------------------------- */
.danach { border-top: 2px solid var(--forest); padding-top: 1.5rem; }
.danach__liste {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  counter-reset: danach; display: grid; gap: 1.1rem;
}
.danach__liste li {
  counter-increment: danach;
  display: grid; grid-template-columns: 1.9rem 1fr; gap: .1rem .9rem;
  align-items: start;
}
.danach__liste li::before {
  content: counter(danach);
  grid-row: span 2;
  width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sage-soft); color: var(--sage-ink);
  font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.danach__liste strong { display: block; font-size: 1rem; }
.danach__liste span { display: block; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.danach__hinweis {
  margin: 1.4rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   42. Bewegungsreduktion, verbindlich
   Wer im Betriebssystem weniger Bewegung einstellt, meint das ernst. Statt
   jede Animation einzeln auszunehmen, gilt hier eine Regel fuer alle.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* --------------------------------------------------------------------------
   43. Weg zur Anfrage
   -------------------------------------------------------------------------- */
.sprung { margin-top: 1rem; font-size: .95rem; color: var(--ink-2); }
.form__vorspann { margin: .5rem 0 0; font-size: .95rem; color: var(--ink-2); }
.feld-optional {
  margin-left: .4rem; font-size: .72rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.form__kopie {
  width: 100%; font: inherit; font-size: .88rem; line-height: 1.5;
  padding: .75rem .85rem; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--card); color: var(--ink);
  resize: vertical;
}
.form__kopie-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 0; }


/* --------------------------------------------------------------------------
   44. Einstiegsleiste auf dem Telefon
   Sie nennt den Preis, weil das die Frage ist, die den Klick sonst
   aufhaelt. Sie erscheint nach dem Hero und verschwindet am Seitenende.
   Kein Overlay, keine Sperre, kein Zaehler.
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  /* Aussenkante buendig mit der Textspalte (.shell), damit die Leiste nicht
     weiter links steht als der uebrige Inhalt. */
  left: 1.25rem;
  right: 1.25rem;
  bottom: .75rem;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .8rem .7rem 1rem;
  border-radius: 999px;
  background: rgba(251, 249, 245, .97);
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px -12px rgba(22, 38, 30, .35);
  animation: leisteEin .3s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes leisteEin {
  from { opacity: 0; transform: translateY(.75rem); }
  to   { opacity: 1; transform: none; }
}
.sticky-cta__text { display: grid; line-height: 1.25; min-width: 0; }
.sticky-cta__text strong {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apricot);
}
.sticky-cta__text span {
  font-size: .82rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-cta .btn { flex: none; min-height: 40px; }
/* Ohne diese Zeile bleibt die Leiste sichtbar: display: flex oben schlaegt
   das display: none, das der Browser fuer hidden mitliefert. */
.sticky-cta[hidden] { display: none; }
/* Sehr schmale Geraete: der Text bekommt den Platz zurueck, den die
   buendige Ausrichtung kostet. */
@media (max-width: 23em) {
  .sticky-cta { padding-left: .8rem; gap: .5rem; }
  .sticky-cta__text span { font-size: .72rem; }
}
@media (min-width: 40em) { .sticky-cta { left: 2rem; right: 2rem; } }
@media (min-width: 69em) { .sticky-cta { display: none !important; } }


/* --------------------------------------------------------------------------
   45. Das Geraet im Hero
   Eine feste, leichte Neigung statt vier wechselnder Winkel. Sie gibt dem
   Geraet Tiefe, ohne dass der Bildschirm bei jedem Kapitel neu kippt.
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .phone-hardware--story {
    transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg);
  }
  .phone-hardware--story:hover {
    transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg) translateY(-5px);
  }

  /* Die Uhr wechselt, ohne dass die Ziffern springen */
  .device__status-zeit { font-variant-numeric: tabular-nums; }
}

/* Ab dieser Breite ist die rechte Spalte breit genug, dass das Geraet mehr
   Raum nehmen kann, ohne an den Text zu stossen. Gemessen: Spalte 407px,
   Geraet bisher 312px. */
@media (min-width: 85em) {
  .phone-story__sticky .phone-hardware { max-width: 21.5rem; }
}


/* --------------------------------------------------------------------------
   46. Kein stiller Textverlust in den Geraetedarstellungen

   ui-meta galt pauschal als nicht umbrechend. Richtig ist das fuer die
   kurze Angabe rechts neben einem Namen, falsch fuer ui-meta als eigenen
   Absatz. Zusammen mit overflow: hidden am Bildschirm wurde der Satz dann
   hart abgeschnitten, ohne Auslassungszeichen, also ohne jeden Hinweis.

   Gemessen bei 375 Pixeln auf der Startseite: 17 abgeschnittene Stellen.
   Der schlimmste Fall zeigte 191 von 511 Pixeln Text.

   Eine passende Regel gab es bereits, sie hing aber an .device-stage,
   einem Markup, das es seit dem Umbau des Hero nicht mehr gibt. Sie hat
   deshalb nie gegriffen und ist oben entfernt.
   -------------------------------------------------------------------------- */
.ui-meta { white-space: normal; }

/* Nur die Kurzangabe in einer Zeile mit dem Namen bleibt einzeilig. */
.ui-row > .ui-meta { white-space: nowrap; }

/* Lieber zwei Zeilen als ein angeschnittener Name. Betraf zum Beispiel
   "Heutiges Clip-Budget", davon blieben 76 von 135 Pixeln uebrig. */
@media (max-width: 34em) {
  .ui-row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: .2rem;
  }
  .ui-row > .ui-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}


/* --------------------------------------------------------------------------
   47. Der Lichtfleck hinter dem Hero

   Gemeldet: der Verlauf wechselt an der Inhaltsbreite unangenehm scharf.
   Gemessen: der Fleck war 736 Pixel breit, seine Mitte lag 8 Pixel vor der
   rechten Hero-Kante, und .hero hatte overflow: clip. Abgeschnitten wurde
   also nicht der ausgelaufene Rand, sondern der hellste Kern. Deshalb die
   Kante.

   Jetzt liegt der Fleck vollstaendig innerhalb des sichtbaren Bereichs und
   laeuft nach allen Seiten aus. Damit gibt es bei keiner Fensterbreite mehr
   etwas abzuschneiden, und .hero braucht kein clip mehr.
   -------------------------------------------------------------------------- */
.hero { overflow: visible; }
.hero::before {
  inset: -2rem -2rem auto auto;
  width: min(38rem, 55vw);
  aspect-ratio: 1 / .9;
  background: radial-gradient(closest-side, rgba(126, 154, 133, .20), transparent 70%);
}

/* --------------------------------------------------------------------------
   48. Proportion des Geraets

   Gemessen: 345 auf 497 Pixel, Verhaeltnis 0,695. Ein echtes Telefon liegt
   bei 0,46 bis 0,50. Das Geraet las sich dadurch als flaches Tablet.

   Die Hoehe fuehrt jetzt, die Breite folgt dem Seitenverhaeltnis. So passt
   das Geraet auch in niedrige Fenster, ohne die Form zu verlieren.
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .phone-story__sticky .phone-hardware {
    --geraet-hoehe: min(42rem, calc(100vh - 11rem));
    height: var(--geraet-hoehe);
    width: max(19rem, calc(var(--geraet-hoehe) * .486));
    max-width: none;
    min-width: 0;
    display: flex;
  }
  .phone-story__sticky .phone-hardware__screen {
    flex: 1;
    min-height: 0;
    width: 100%;
  }
  /* Der Inhalt darf die neue Hoehe nutzen, statt eine feste Mindesthoehe
     zu behaupten. */
  .phone-story__sticky .phone-hardware__screens { flex: 1; min-height: 0; }
}

@media (min-width: 64em) {
  /* Der Inhalt verteilt sich ueber die volle Hoehe, statt oben zu kleben. */
  .phone-story__sticky .phone-screen-state { padding: 1.1rem 1.05rem 1.25rem; }
  .phone-story__sticky .phone-screen-state .ui-card { margin-bottom: .7rem; }
  .phone-story__sticky .phone-screen-state .time-ring-wrap { margin-bottom: 1rem; }

  .phone-story__sticky .phone-screen-state.active { height: 100%; }

  /* Die Schlusszeile steht unten am Rand, wie auf einem echten Geraet.
     Sie traegt die Aussage des ganzen Bildes und ist dort keine Fuellung,
     sondern ein Abschluss. */
  .phone-story__sticky .device__bottom-note {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
}


/* --------------------------------------------------------------------------
   49. Verdichtete Startseite
   Produktoberflaeche im Geraet (.ps), Kapitel ohne Kartenwand, Hero ohne
   Beweiszeilen, Vertrauen als eine Aussage, Warum-Liste, Preis.
   Grundsatz: Serif nur fuer Markenbotschaften, alles Funktionale in Sans.
   -------------------------------------------------------------------------- */

/* Hero */
.hero .actions { align-items: center; }
.hero__sekundaer { font-size: 1rem; font-weight: 500; margin-left: .25rem; }
.hero__pilot { margin-top: 1.4rem; font-size: .92rem; color: var(--ink-3); max-width: 30rem; }
.hero__sub { max-width: 30rem; }

/* Der Scroll-Hinweis erklaert die Scrollytelling-Geste, bevor die erste
   Bewegung stattfindet. Nach der Uebergabe an die Hand tritt er zurueck. */
.phone-story__scroll-cue { display: none; }
@media (min-width: 64em) {
  .phone-story__scroll-cue {
    position: absolute;
    top: -.15rem;
    left: 50%;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: .7rem;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
  }
  .phone-story__scroll-cue::before {
    content: "";
    width: 2.1rem;
    height: 1px;
    background: var(--sage-line);
  }
  .phone-story__scroll-copy {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    line-height: 1.05;
  }
  .phone-story__scroll-copy > span {
    color: var(--ink-3);
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .phone-story__scroll-copy strong {
    color: var(--sage-ink);
    font-family: var(--serif);
    font-size: 1rem;
    font-style: italic;
    font-weight: 600;
  }
  .phone-story__scroll-cue svg {
    overflow: visible;
    fill: none;
    stroke: var(--apricot);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: scrollCue 1.8s ease-in-out infinite;
  }
  [data-phone-story][data-hand] .phone-story__scroll-cue {
    opacity: 0;
    transform: translate(-50%, .55rem);
  }
}
@keyframes scrollCue {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

/* Kapitel: links nur Ueberschrift und ein, zwei Saetze. Keine Karten. */
.phone-story__narrative .story-chapter,
.phone-story__narrative .story-chapter.active {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  transform: none;
  cursor: default;
}
.phone-story__narrative .story-chapter h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 .6rem;
  color: var(--ink);
}
.phone-story__narrative .story-chapter p {
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 26rem;
  margin: 0;
}
@media (min-width: 64em) {
  .phone-story__narrative { gap: 42vh; padding-bottom: 20vh; }
  .phone-story__narrative .story-chapter { opacity: .35; transition: opacity .4s ease; }
  .phone-story__narrative .story-chapter.active { opacity: 1; }
  .story-timeline-rail { margin-bottom: 0; }
}

/* Produktoberflaeche im Geraet. Sans, eine grosse Zahl, ein Balken, Zeilen. */
.ps { font-family: var(--sans); color: var(--ink); }
.ps__eyebrow {
  margin: 0 0 .15rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.ps__big {
  margin: 0;
  font-size: 3.6rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--forest-ink);
}
.ps__big span { font-size: 1.4rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-left: .1rem; }
.ps__big--wort { font-size: 2.3rem; letter-spacing: -.02em; }
.ps__sub { margin: .35rem 0 0; font-size: .98rem; color: var(--ink-2); }
.ps__bar {
  height: 8px;
  margin: 1.2rem 0 1.1rem;
  border-radius: 999px;
  background: var(--sage-soft);
  overflow: hidden;
}
.ps__bar span { display: block; height: 100%; border-radius: inherit; background: var(--forest); transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.ps__bar--warn span { background: var(--apricot); }
.ps__bar--voll span { background: var(--forest-deep); }
.ps__notice {
  padding: .8rem .9rem;
  border-radius: 12px;
  background: var(--sage-soft);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.ps__notice strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .1rem; }
.ps__notice--warn { background: var(--apricot-soft); }
.ps__rows { list-style: none; margin: 1rem 0 0; padding: 0; }
.ps__rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .6rem 0;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--ink-2);
}
.ps__rows li:first-child { border-top: 0; }
.ps__rows b { font-weight: 600; color: var(--forest-ink); white-space: nowrap; }
.ps__rows .ps__aus { color: var(--ink-3); font-weight: 500; }
.ps__rows--gross li { font-size: 1rem; padding: .75rem 0; }
.ps__fuss { margin: 1rem 0 0; font-size: .82rem; color: var(--ink-3); }
@media (min-width: 64em) {
  .phone-story__sticky .ps__fuss { margin-top: auto; padding-top: 1rem; }
}
/* Das Kindergeraet im Abschnitt Fuer Familien nutzt dieselbe Oberflaeche */
.child-screen.ps { padding: 1.4rem 1.35rem 1.5rem; }
.child-screen.ps .ps__rows { margin-top: 1.4rem; }
.sync-card__hinweis { margin: 1rem 0 0; font-size: .9rem; color: var(--ink-3); }
.sync-card h4 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 .9rem; }

/* Vertrauen: eine Aussage, vier Zeilen */
.vertrauen {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 64em) { .vertrauen { grid-template-columns: 1.1fr .9fr; gap: 5rem; } }
.vertrauen__titel { color: var(--on-dark); margin: 0; }
.vertrauen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--on-dark);
}
.vertrauen__liste li { padding: .55rem 0; border-top: 1px solid rgba(238, 242, 234, .16); }
.vertrauen__liste li:first-child { border-top: 0; padding-top: 0; }
.vertrauen__text { margin: 1.5rem 0 0; color: var(--on-dark-2); font-size: 1rem; max-width: 30rem; }

/* Warum anders: nummerierte Liste ohne Karten */
.warum-liste { list-style: none; margin: 0; padding: 0; counter-reset: warum; }
.warum-liste li {
  counter-increment: warum;
  position: relative;
  padding: 1rem 0 1rem 3rem;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.warum-liste li::before {
  content: counter(warum, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--sage-ink);
  font-variant-numeric: tabular-nums;
}
.warum-liste strong { display: block; color: var(--ink); font-weight: 600; }
/* --------------------------------------------------------------------------
   50. Der erste Blick
   Der Hero wirkte leer: Schlagzeile zu klein fuer zwei kurze Zeilen, ein
   toter Streifen zwischen Text und Geraet, das Geraet stand still auf einer
   flachen Flaeche. Drei Eingriffe: groessere Typografie, die Zeile auf
   Geraetehoehe zentriert, und das Geraet zeigt beim Erscheinen einmal,
   was es tut. Keine Deko-Flaechen, kein Verlauf ueber die ganze Breite.
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .hero .display {
    font-size: clamp(3.4rem, 1.8rem + 3.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.028em;
  }
  .hero__sub { font-size: 1.3rem; max-width: 26rem; margin-top: 1.6rem; }
  .hero .actions { margin-top: 2rem; }

  /* Die Zeile steht auf Hoehe des Geraets, nicht oben in der Ecke */
  .hero__lead-block {
    min-height: calc(100vh - 7rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
  }
  .phone-story-container { grid-template-columns: 1fr .9fr; gap: 2rem; }

  /* Ein weiches Licht direkt hinter dem Geraet, wie bei einer
     Produktaufnahme. Nicht ueber die Flaeche, nur hinter dem Objekt. */
  .phone-story__sticky::before {
    content: "";
    position: absolute;
    inset: 8% 6% 8% 6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(175, 192, 174, .38), rgba(175, 192, 174, .12) 55%, transparent 80%);
    z-index: -1;
    pointer-events: none;
  }
  .phone-story__sticky { isolation: isolate; }
}

/* Das Geraet zeigt beim Zustandswechsel einmal, was passiert: der Balken
   laeuft auf seinen Stand, der Hinweis erscheint. Zustandswechsel sichtbar,
   nicht Schmuck. Bewegungsreduktion greift ueber Abschnitt 42. */
@keyframes psBalken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes psHinweis { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.phone-screen-state.active .ps__bar span {
  transform-origin: left center;
  animation: psBalken .9s .15s cubic-bezier(.22, 1, .36, 1) both;
}
.phone-screen-state.active .ps__notice {
  animation: psHinweis .5s .75s cubic-bezier(.22, 1, .36, 1) both;
}
.phone-screen-state.active .ps__rows li {
  animation: psHinweis .45s cubic-bezier(.22, 1, .36, 1) both;
}
.phone-screen-state.active .ps__rows li:nth-child(1) { animation-delay: .95s; }
.phone-screen-state.active .ps__rows li:nth-child(2) { animation-delay: 1.05s; }
.phone-screen-state.active .ps__rows li:nth-child(3) { animation-delay: 1.15s; }




/* --------------------------------------------------------------------------
   51. Der Hero als Produktgeschichte
   Ein einziger Produktmoment statt vieler Effekte: um 20:30 wechselt der
   ganze Bildschirm in den Abendzustand. Davor eine Systemmeldung, danach
   eine Nachricht, die ankommt. Alles in Produktsprache, alles Sans.
   -------------------------------------------------------------------------- */
.hero__ueber {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sage-ink);
  margin: 0 0 1rem;
}
@media (min-width: 64em) {
  .hero .display { font-size: clamp(3rem, 1.6rem + 3vw, 4.1rem); }
  .hero__ueber { font-size: 1.3rem; }
}

/* Systemmeldung, wie eine Android-Benachrichtigung von oben */
.ps__push {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: -.2rem 0 1.1rem;
  padding: .7rem .8rem;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px -14px rgba(24, 34, 30, .35);
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.ps__push b { display: block; font-weight: 600; color: var(--ink); font-size: .8rem; }
.ps__push-icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--forest);
  position: relative;
}
.ps__push-icon::before {
  content: "";
  position: absolute; inset: 7px;
  border-top: 2px solid #f8f7f2;
  border-left: 2px solid #f8f7f2;
}
.ps__push-icon--mama { background: var(--apricot); }
.ps__push-icon--mama::before { border: 0; inset: 8px; border-radius: 50%; background: #fff; }
.phone-screen-state.active .ps__push {
  animation: psPush .6s .35s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes psPush { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* Der Abendzustand: der Bildschirm selbst wechselt, nicht nur ein Text */
.phone-hardware__screen { transition: background-color .9s ease; }
.phone-hardware.is-nacht .phone-hardware__screen { background: #172820; }
.phone-hardware.is-nacht .device__status { color: rgba(238, 242, 234, .75); }
.ps--nacht { color: var(--on-dark); }
.ps--nacht .ps__eyebrow { color: var(--on-dark-2); }
.ps--nacht .ps__big { color: #f3f6f1; }
.ps--nacht .ps__sub, .ps--nacht .ps__rows li { color: var(--on-dark-2); }
.ps--nacht .ps__rows li { border-top-color: rgba(238, 242, 234, .14); }
.ps--nacht .ps__rows b { color: #f3f6f1; }
.ps--nacht .ps__rows .ps__aus { color: rgba(238, 242, 234, .5); text-decoration: line-through; text-decoration-color: rgba(238, 242, 234, .35); }
.ps--nacht .ps__fuss { color: var(--on-dark-2); }
.ps--nacht .ps__push--hell { background: rgba(255, 255, 255, .08); border-color: rgba(238, 242, 234, .16); color: var(--on-dark-2); box-shadow: none; }
.ps--nacht .ps__push--hell b { color: #f3f6f1; }
.phone-screen-state.active.ps--nacht .ps__big {
  animation: psPause .7s .2s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes psPause { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Zeitleiste: der laufende Schritt zeigt seinen Fortschritt */
.story-timeline-node { position: relative; overflow: hidden; }
.story-timeline-node.active[data-dauer]::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--forest);
  transform-origin: left center;
  animation: psSchritt var(--dauer, 3.5s) linear both;
}
@keyframes psSchritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-phone-story][data-hand] .story-timeline-node.active[data-dauer]::after { animation: none; transform: none; }


/* --------------------------------------------------------------------------
   51. Pilot-Funnel
   Nutzen, Eignung und Anfrage stehen im ersten Entscheidungsweg. Die laengere
   Erklaerung folgt danach, damit interessierte Eltern nicht erst vier Warnkarten
   lesen muessen, bevor sie handeln koennen.
   -------------------------------------------------------------------------- */
.pilot-hero {
  padding-block: 3.5rem 4.5rem;
}
.pilot-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.pilot-hero__copy,
.pilot-form-wrap { min-width: 0; }
.pilot-hero__copy .display {
  max-width: 12ch;
  margin-top: 1rem;
}
.pilot-hero__copy .lead {
  max-width: 35rem;
  margin-top: 1.25rem;
}
.pilot-hero__actions { margin-top: 1.8rem; }
.pilot-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.2rem;
  margin: 1.25rem 0 0;
  padding: 0;
  color: var(--ink-2);
  font-size: .9rem;
}
.pilot-proof li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.pilot-proof li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--forest);
  font-size: .72rem;
  font-weight: 700;
}
.pilot-hero__figure { display: none; margin: 2rem 0 0; }
.pilot-hero__figure .illu {
  width: 100%;
  max-width: 38rem;
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  object-position: center 46%;
}
.pilot-hero__figure figcaption {
  margin-top: .7rem;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: .9rem;
}
.pilot-form-card {
  padding: clamp(1.35rem, 2.8vw, 2rem);
  box-shadow: var(--shadow-lg);
}
.pilot-form-card .h2 { margin-top: .65rem; }
.pilot-form-card .form { gap: 1rem; }
.pilot-form-card__submit { width: 100%; }
.pilot-form-card__note {
  margin: 0;
  color: var(--ink-3);
  font-size: .8rem;
  line-height: 1.5;
}
.pilot-phone-field[hidden] { display: none; }
.form-grid--2 { display: grid; gap: 1rem; }
.form-optional {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: .85rem;
}
.form-optional summary {
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 500;
}
.form-optional summary span {
  margin-left: .35rem;
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pilot-fit-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
}
.pilot-fit-item {
  padding: 1.5rem;
  background: var(--card);
}
.pilot-fit-item > span {
  color: var(--apricot);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.pilot-fit-item h3 {
  margin: .65rem 0 .5rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
}
.pilot-fit-item p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.pilot-steps {
  list-style: none;
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.pilot-steps li { border-top: 1px solid var(--line-strong); padding-top: 1.15rem; }
.pilot-steps li > span {
  color: var(--apricot);
  font-size: .75rem;
  font-weight: 600;
}
.pilot-steps h3 {
  margin: .6rem 0 .45rem;
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 600;
}
.pilot-steps p { margin: 0; color: var(--ink-2); }
.pilot-closing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 3rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--sage-soft);
}
.pilot-closing p { margin: .5rem 0 0; color: var(--ink-2); }

@media (max-width: 34em) {
  .pilot-hero__actions { width: 100%; }
  .pilot-hero__actions .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

@media (min-width: 40em) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .pilot-fit-grid { grid-template-columns: 1fr 1fr; }
  .pilot-steps { grid-template-columns: repeat(3, 1fr); }
  .pilot-closing { flex-direction: row; align-items: center; justify-content: space-between; }
  .pilot-closing .btn { flex: none; }
}
@media (min-width: 64em) {
  .pilot-hero { padding-block: 5rem 6rem; }
  .pilot-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(24rem, .82fr); gap: 4.5rem; }
  .pilot-hero__figure { display: block; }
  .pilot-form-wrap { position: sticky; top: 6rem; }
  .pilot-fit-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   52. Smartphone-Beratung
   Finder und persoenliche Anfrage bilden einen kurzen, zusammenhaengenden Weg.
   -------------------------------------------------------------------------- */
.beratung-hero { padding-block: 3.5rem 4.5rem; }
.beratung-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.beratung-hero__grid > * { min-width: 0; }
.beratung-hero .display {
  max-width: 13ch;
  margin-top: 1rem;
}
.beratung-hero .lead {
  max-width: 38rem;
  margin-top: 1.25rem;
}
.beratung-hero__actions { margin-top: 1.8rem; }
.beratung-hero__figure { margin: 0; }
.beratung-hero__figure .illu {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
.beratung-hero__figure figcaption {
  margin-top: .7rem;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: .9rem;
}
.advisor-result__independent {
  margin-top: .7rem;
  color: var(--ink-3) !important;
  font-size: .78rem !important;
  line-height: 1.45;
}
.beratung-conversion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.beratung-conversion-grid > * { min-width: 0; }
.beratung-conversion-copy .lead { max-width: 39rem; }
.beratung-conversion-note {
  margin-top: 1.6rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--apricot);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: .9rem;
}
.beratung-form-card {
  padding: clamp(1.35rem, 2.8vw, 2rem);
  box-shadow: var(--shadow-lg);
}
.beratung-form-card .h3 { margin-top: .65rem; }
.beratung-form-card .form { gap: 1rem; }
.beratung-form-card__submit { width: 100%; }

@media (max-width: 34em) {
  .beratung-hero__actions { width: 100%; }
  .beratung-hero__actions .btn,
  .advisor-result__cta {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

@media (min-width: 64em) {
  .beratung-hero { padding-block: 5rem 6rem; }
  .beratung-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(24rem, .9fr); gap: 4.5rem; }
  .beratung-conversion-grid { grid-template-columns: minmax(0, 1fr) minmax(24rem, .9fr); gap: 4.5rem; }
  .beratung-form-card { position: sticky; top: 6rem; }
}

/* ==========================================================================
   Umbau 2026-09: weniger Text, mehr Ablesbarkeit.
   Vier Bausteine: Vorher/Nachher, Restzeit-Tacho, Altersskala, Setup.
   ========================================================================== */

/* Gleicher vertikaler Rhythmus wie .section -- die neuen Bausteine tragen ihre
   Breite ueber .shell, brauchen den Abstand aber trotzdem. */
.ages, .setup { padding-block: 4rem; }
@media (min-width: 48em) { .ages, .setup { padding-block: 6rem; } }
@media (min-width: 64em) { .ages, .setup { padding-block: 7rem; } }

/* --- Vorher / Nachher ----------------------------------------------------
   Der Nutzen soll ueber Farbe ankommen, bevor jemand liest: die alte Lage
   matt und flach, die neue als volle Markenflaeche mit Gewicht. Zwei fast
   gleich helle Karten nebeneinander haetten den Unterschied verschenkt. */
.shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1rem, 3vw, 2.2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.shift__side {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  border-radius: 22px;
  display: flex; flex-direction: column;
}

/* Die alte Lage: entsaettigt, ohne Schatten, bewusst leblos. */
.shift__side--before {
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
}

/* Die neue: volles Waldgruen, angehoben. Traegt das Gewicht der Aussage. */
.shift__side--after {
  background: var(--forest);
  border: 1px solid var(--forest);
  color: #fff;
  box-shadow: 0 18px 44px rgba(41, 68, 55, .22);
}

.shift__tag {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 .7rem; color: var(--ink-3);
}
.shift__side--after .shift__tag { color: var(--sage); }

.shift__line {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.25;
  margin: 0 0 1.2rem; font-weight: 400;
}
.shift__side--before .shift__line { color: var(--ink-2); }
.shift__side--before .shift__line strong { color: var(--ink-2); font-weight: 600; }
.shift__side--after .shift__line { color: rgba(255, 255, 255, .82); }
.shift__side--after .shift__line strong { color: #fff; font-weight: 600; }

.shift__list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; }
.shift__list li {
  font-size: .96rem; line-height: 1.45;
  padding-left: 1.6rem; position: relative;
}
/* Vor jedem Reibungssatz ein kleines Spannungszeichen, vor jeder Zusage ein Haken. */
.shift__list li::before {
  position: absolute; left: 0; top: 0;
  font-size: .95rem; line-height: 1.5;
}
.shift__side--before .shift__list li { color: var(--ink-3); }
.shift__side--before .shift__list li::before { content: "×"; color: var(--apricot); font-weight: 600; }
.shift__list--calm li { color: rgba(255, 255, 255, .9); }
.shift__list--calm li::before { content: "✓"; color: var(--sage); font-weight: 600; }

.shift__cost {
  margin: auto 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-3);
}
.shift__cost--good {
  border-top-color: rgba(255, 255, 255, .18);
  color: var(--sage); font-weight: 500;
}

.shift__arrow { color: var(--sage); width: clamp(2rem, 5vw, 3.4rem); align-self: center; }
.shift__arrow svg { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  .shift { grid-template-columns: 1fr; }
  .shift__arrow { justify-self: center; transform: rotate(90deg); width: 2.4rem; }
}

/* --- Altersleiter --------------------------------------------------------
   Alle fuenf Stufen gleichzeitig. Das Wachsen ist die Aussage, und das sieht
   man nur, wenn die Balken nebeneinander stehen -- eine Stufe nach der anderen
   einzublenden wuerde genau die Abstufung verstecken, um die es hier geht. */
.ages__head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.ages__lead {
  max-width: 54ch; margin: .9rem auto 0; color: var(--ink-2);
  font-size: clamp(1rem, 2vw, 1.14rem); line-height: 1.55;
}
.ages__lead em { font-style: normal; font-weight: 600; color: var(--ink); }

/* Der Rahmen als Bild: dicker Rand = viel Struktur, duenner Rand = viel
   Selbstbestimmung. Die helle Flaeche darin ist das echte Tagesbudget. */
/* Eine Zeile je Altersstufe, drei Spalten: Alter, Zeit als Balken, wer sie
   einteilt. Die Spaltentitel ersetzen die frühere Legende, und die aktive
   Zeile hebt sich als Karte heraus statt durch dicke Rahmen. */
.grow { display: grid; gap: 2px; margin-bottom: clamp(.5rem, 1.4vw, .8rem); }

.grow__head,
.grow__row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 4.1rem 7.6rem;
  align-items: center; gap: clamp(.6rem, 1.6vw, 1rem);
}
.grow__head {
  align-items: end; margin: 0 0 .5rem; padding: 0 .7rem;
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.grow__head-main { color: var(--forest); font-weight: 600; }
.grow__head-mode { grid-column: 4; }
/* Ohne diese Zeile liest sich "10 Min." als gesamte Handyzeit und wirkt absurd. */
.grow__head-main em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--ink-3); font-size: .95em; margin-left: .5em;
}

.grow__row {
  width: 100%; padding: .6rem .7rem; border: 0; border-radius: 14px;
  background: transparent; font: inherit; text-align: left; cursor: pointer;
  transition: background .2s, box-shadow .25s;
}
.grow__row:hover { background: rgba(255, 255, 255, .55); }
.grow__row:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.grow__row[data-aktiv="true"] {
  background: var(--card); box-shadow: 0 .55rem 1.5rem rgba(41, 68, 55, .1);
}

.grow__age {
  white-space: nowrap; font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .25s;
}
.grow__age i { font-style: normal; opacity: .5; margin: 0 .05em; }
.grow__row[data-aktiv="true"] .grow__age { color: var(--ink); }

.grow__track {
  position: relative; height: 12px; border-radius: 999px;
  background: var(--sage-soft); overflow: hidden;
}
.grow__fill {
  position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px;
  background: var(--sage);
  transition: width .55s cubic-bezier(.22, 1, .36, 1), background .25s;
}
/* Ab 15 wechselt die Farbe: die Einteilung liegt dann beim Kind. */
.grow__row--soft .grow__fill { background: var(--apricot-line); }
.grow__row[data-aktiv="true"] .grow__fill { background: var(--forest); }
.grow__row--soft[data-aktiv="true"] .grow__fill { background: var(--apricot); }

.grow__num {
  text-align: right; white-space: nowrap;
  font-size: 1rem; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; transition: color .25s;
}
.grow__num em {
  font-style: normal; font-size: .68em; font-weight: 500;
  color: var(--ink-3); margin-left: .25em; letter-spacing: 0;
}
.grow__row[data-aktiv="true"] .grow__num { color: var(--ink); }

.grow__mode {
  font-size: .85rem; color: var(--ink-3); white-space: nowrap; transition: color .25s;
}
.grow__row[data-aktiv="true"] .grow__mode { color: var(--forest); font-weight: 600; }
.grow__row--soft[data-aktiv="true"] .grow__mode { color: #8a4a2a; }

.grow__foot {
  display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: .7rem 0 0; padding: 0 .7rem;
  font-size: .8rem; color: var(--ink-3);
}
.grow__hint { color: var(--sage-ink); font-weight: 600; }

.ages__detail {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(1.2rem, 2.8vw, 1.8rem);
}
.ages__detail-mode { margin: 0 0 1.2rem; }
.ages__detail-mode span { font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 600; color: var(--ink); }
.ages__detail-mode em { font-style: normal; color: var(--ink-3); font-size: .96rem; }
.ages__detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.4rem); }
.ages__detail-label {
  margin: 0 0 .55rem; font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.ages__detail-end { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.45; }
.ages__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ages__chip {
  padding: .35rem .7rem; border-radius: 999px; font-size: .86rem;
  background: var(--card); color: var(--sage-ink); border: 1px solid var(--sage-line);
}
.ages__chip--none { color: var(--ink-3); border-style: dashed; border-color: var(--line-strong); }

.ages__override {
  margin: clamp(1.2rem, 2.5vw, 1.6rem) auto 0; max-width: 62ch; text-align: center;
  font-size: .95rem; color: var(--ink-3); line-height: 1.55;
}
.ages__closing {
  text-align: center; margin: clamp(1.2rem, 2.5vw, 1.8rem) auto 0; max-width: 46ch;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--ink-2);
}

@media (max-width: 780px) {
  /* Schmal bleibt jede Stufe eine Zeile. Wer einteilt, steht nur unter der
     gewaehlten Stufe -- sonst waere die dritte Spalte nicht unterzubringen. */
  .grow__head, .grow__row { grid-template-columns: 3.2rem minmax(0, 1fr) 3.8rem; gap: .6rem; }
  .grow__head-main em { display: block; margin: .15rem 0 0; }
  .grow__head-mode, .grow__mode { display: none; }
  .grow__row[data-aktiv="true"] .grow__mode {
    display: block; grid-column: 1 / -1; margin-top: .25rem; font-size: .8rem;
  }
  .ages__detail-cols { grid-template-columns: 1fr; }
}
}
}

/* --- Einrichtungs-Assistent ----------------------------------------------
   Anfassbar statt nur abgebildet: wer einmal selbst auf ein Alter tippt und
   den Vorschlag umspringen sieht, glaubt "einfach einzurichten" eher als einem
   Satz darueber. Die Bestaetigung am Ende bleibt bewusst ruhig -- ein Produkt,
   das gegen Aufmerksamkeitsdesign antritt, darf selbst keins betreiben. */
.setup__head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.setup__lead { margin: .8rem auto 0; color: var(--ink-3); max-width: 42ch; }

.wizard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(1rem, 2.5vw, 1.6rem); align-items: start;
}
.wizard__steps { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.wizard__step, .wizard__result {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
.wizard__no {
  margin: 0 0 .5rem; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: .9rem; font-weight: 600;
  background: var(--sage-soft); color: var(--sage-ink);
}
.wizard__step h3, .wizard__result h3 { margin: 0 0 .45rem; font-size: 1.05rem; }

.wizard__opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.wizard__opts--rows { flex-direction: column; }
.wizard__opts button {
  position: relative; cursor: pointer; font: inherit; font-size: .9rem;
  padding: .5rem .85rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
  transition: background .18s, border-color .18s, color .18s;
}
.wizard__opts--rows button { text-align: left; }
.wizard__opts button:hover { border-color: var(--sage); }
.wizard__opts button[aria-pressed="true"] {
  background: var(--forest); border-color: var(--forest); color: #fff; font-weight: 500;
}
/* Der Vorschlag bleibt markiert, auch wenn der Elternteil abweicht. */
.wizard__opts button[data-empfohlen="true"]::after {
  content: "empfohlen"; margin-left: .5rem;
  font-size: .7rem; letter-spacing: .04em; color: var(--ink-3);
}
.wizard__opts button[data-empfohlen="true"][aria-pressed="true"]::after { color: var(--sage); }

.wizard__rows { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; }
.wizard__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem .15rem; border-bottom: 1px solid var(--line);
}
.wizard__row span { font-size: .92rem; color: var(--ink-2); }
.wizard__row b {
  font-size: 1.2rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wizard__row b em { font-style: normal; font-size: .58em; font-weight: 500; color: var(--ink-3); margin-left: .2em; }
.wizard__row--free { border-bottom: 0; }
.wizard__row--free span { color: var(--sage-ink); }
.wizard__row--free b { font-size: 1rem; color: var(--sage-ink); }

/* Sagt vor der ersten Zahl, was die Karte ist: ein Vorschlag, kein Vertrag. */
.wizard__badge {
  display: inline-block; margin: 0 0 .5rem; padding: .2rem .6rem;
  border-radius: 999px; background: var(--sage-soft); color: var(--sage-ink);
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.wizard__note {
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .84rem; line-height: 1.5; color: var(--ink-3);
}

/* Wofuer der Vorschlag gilt. Ohne das steht rechts eine Liste ohne Bezug. */
.wizard__for { margin: -.5rem 0 .8rem; font-size: .85rem; color: var(--ink-3); }
.wizard__for b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.wizard__for i { font-style: normal; opacity: .45; margin: 0 .35em; }
.wizard__for span { color: var(--forest); font-weight: 600; }

.wizard__end { margin: 0 0 1.1rem; font-size: .86rem; color: var(--ink-3); }


.setup__foot { text-align: center; margin: clamp(1.4rem, 3vw, 2rem) 0 0; font-size: .92rem; color: var(--ink-3); }

/* Erst ab 1150px hat die Leiter neben der Karte noch genug Breite, damit die
   Balken den Unterschied zwischen 10 und 60 Minuten zeigen. */
@media (max-width: 1150px) {
  .wizard { grid-template-columns: 1fr; }
  .wizard__result { max-width: 46rem; }
}

@media (prefers-reduced-motion: reduce) {
  .grow__fill, .ladder__bar span { transition: none; }
}

/* --- Zusammengefuehrter Alters- und Einrichtungsblock --------------------
   Vorher zwei Sektionen mit je eigener Altersauswahl -- dieselbe Frage zweimal
   zu stellen liest sich als zwei Themen, obwohl es eines ist. */
.wizard__left { display: grid; gap: .9rem; align-content: start; max-width: 46rem; }

/* Nicht gewaehlte Zeilen treten zurueck, statt zu verschwinden: die Reihe
   selbst ist die Aussage, die gewaehlte Stufe nur der Einstiegspunkt. */

.wizard__adjust { margin: 0 0 1rem; }
.wizard__adjust summary {
  cursor: pointer; font-size: .88rem; color: var(--forest); font-weight: 500;
  padding: .3rem 0;
}
.wizard__adjust[open] summary { margin-bottom: .6rem; }
.wizard__result h3 { margin-top: 0; }


/* Nimmt das Prinzip vorweg, statt es entdecken zu lassen: wer weiss, wonach er
   schaut, versteht den Tacho beim ersten Blick statt beim dritten Antippen. */
.use-story__principle {
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  line-height: 1.4; color: var(--ink-2); margin: 0;
  text-wrap: balance;
}
.use-story__principle b { color: var(--sage-ink); font-weight: 600; }

/* --- Im Alltag ------------------------------------------------------------
   Vier Momente statt einer Featureliste. Jede Karte nennt zuerst die Situation,
   dann was passiert -- in der Reihenfolge, in der ein Elternteil danach fragt. */
.daily__head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.daily__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 2vw, 1.3rem);
}
.daily__card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  display: flex; flex-direction: column; gap: .5rem;
}
.daily__when {
  margin: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage-ink);
}
.daily__card h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.daily__card p:last-child { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 900px) { .daily__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .daily__grid { grid-template-columns: 1fr; } }

/* --- Platzhalter fuer echte App-Screenshots -------------------------------
   Bewusst sichtbar als Platzhalter markiert: ein unauffaelliger grauer Kasten
   wuerde irgendwann ungefragt live gehen. Das Seitenverhaeltnis entspricht dem
   Testgeraet (1080x2400), damit das Layout beim Einsetzen nicht springt. */
.shots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem); justify-items: center;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
.shots--einzeln { grid-template-columns: minmax(0, 15rem); justify-content: center; }
.shots--schmal { justify-content: start; margin-top: 1.4rem; }
.shot { margin: 0; display: grid; gap: .6rem; justify-items: center; max-width: 15rem; }
.shot__frame {
  width: 100%; aspect-ratio: 1080 / 2400;
  border: 2px dashed var(--outline, var(--line-strong)); border-radius: 20px;
  background: repeating-linear-gradient(
    135deg, transparent 0 10px, rgba(41, 68, 55, .04) 10px 20px);
  display: grid; place-items: center;
}
.shot__frame span {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; padding: 0 1rem;
}
.shot figcaption { font-size: .82rem; color: var(--ink-3); text-align: center; line-height: 1.4; }
@media (max-width: 620px) { .shots { grid-template-columns: minmax(0, 13rem); justify-content: center; } }

/* --------------------------------------------------------------------------
   Fehlerseite. Kurz gehalten: Wer hier landet, sucht einen Weg zurueck, keine
   Erklaerung. Alle Verweise absolut, weil die Seite unter jeder beliebigen
   Adresse ausgeliefert wird.
   -------------------------------------------------------------------------- */
.fehler { padding-block: 3rem 5rem; max-width: 42rem; }
.fehler__titel {
  font-family: var(--sans);
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1.06;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
.fehler__titel em { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--forest); }
.fehler__text { font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 1.6rem; }
.fehler__wege { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fehler__wege li {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-3);
  border-top: 1px solid var(--line-strong);
  padding-top: .8rem;
}
.fehler__wege a { font-size: 1.02rem; font-weight: 600; color: var(--forest); }

/* Datenschutz: warmer, klar lesbarer Datenweg statt technischer Kachelzeichnung. */
.privacy-flow{position:relative;isolation:isolate;margin:0;padding:clamp(1.4rem,3vw,2.7rem);overflow:hidden;border:1px solid var(--line);border-radius:clamp(1.2rem,3vw,2rem);background:radial-gradient(ellipse at 12% 14%,#e9ead9 0,transparent 42%),radial-gradient(ellipse at 87% 91%,#f4ddc6 0,transparent 44%),#fbf7ef;color:var(--ink)}
.privacy-flow::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.23;background-image:repeating-linear-gradient(108deg,transparent 0 44px,#d7c7ab 45px,transparent 46px)}
.privacy-flow__head{max-width:42rem;margin-bottom:clamp(1.8rem,4vw,3rem)}
.privacy-flow__eyebrow,.privacy-flow__number{font:.7rem/1.4 var(--sans);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#986343}
.privacy-flow__head h3{margin:.55rem 0 0;font-family:var(--serif);font-size:clamp(1.8rem,3.3vw,3rem);font-weight:400;line-height:1.08;letter-spacing:-.035em;color:var(--forest)}
.privacy-flow__path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.6rem);list-style:none;margin:0;padding:0}
.privacy-flow__step{position:relative;min-width:0;padding-top:.75rem;border-top:1px solid #b7bcae}
.privacy-flow__step:not(:last-child)::after{content:"→";position:absolute;top:4.5rem;right:-1.65rem;font:1.8rem var(--serif);color:#997c5b}
.privacy-flow__step--server{border-top-color:#63816a}
.privacy-flow__icon{display:block;width:5.1rem;height:5.1rem;margin:.8rem 0 .55rem;fill:none;stroke:#294c3b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-2deg)}
.privacy-flow__step--server .privacy-flow__icon{stroke:#315b43;transform:rotate(2deg)}
.privacy-flow__step h4{margin:0 0 .45rem;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.75rem);font-weight:400;line-height:1.15;color:var(--forest)}
.privacy-flow__step p{margin:0;max-width:18rem;color:var(--ink-2);font-size:.94rem;line-height:1.58}
.privacy-flow__service{display:flex;align-items:flex-start;gap:1rem;margin:clamp(1.8rem,4vw,2.8rem) 0 0;padding:1rem 0;border-top:1px solid #b7bcae;border-bottom:1px solid #b7bcae}
.privacy-flow__service-mark{display:grid;place-items:center;flex:none;width:2.15rem;height:2.15rem;border:1px solid #c89a74;border-radius:50%;color:#a35e35;font-size:1.2rem}
.privacy-flow__service strong{display:block;margin:.15rem 0 .15rem;color:var(--forest);font-size:.92rem}
.privacy-flow__service p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.5}
.privacy-flow figcaption{max-width:55rem;margin:1rem 0 0;color:var(--ink-3);font-size:.78rem;line-height:1.5}
@media(max-width:47.99em){.privacy-flow__path{grid-template-columns:1fr;gap:1.7rem}.privacy-flow__step{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem}.privacy-flow__number{grid-column:1/-1}.privacy-flow__icon{grid-row:2/4;width:4.2rem;height:4.2rem;margin:.45rem 0 0}.privacy-flow__step h4{align-self:end;margin:.55rem 0 .2rem}.privacy-flow__step p{grid-column:2}.privacy-flow__step:not(:last-child)::after{top:auto;bottom:-1.55rem;left:1.4rem;right:auto;content:"↓";font-size:1.4rem}.privacy-flow__service{margin-top:2rem}}
.privacy-flow__infrastructure{margin:clamp(1.8rem,4vw,2.8rem) 0 0;padding-top:1.2rem;border-top:1px solid #b7bcae}
.privacy-flow__infrastructure-title{margin:0 0 1rem;font:.7rem/1.4 var(--sans);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#986343}
.privacy-flow__infrastructure-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.5rem)}
.privacy-flow__infra{min-width:0;padding:1rem 0 0;border-top:2px solid #c89a74}
.privacy-flow__infra--core{border-top-color:#55765a}
.privacy-flow__infra-mark{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-bottom:.7rem;border:1px solid #bcab91;border-radius:50%;font:1.3rem var(--serif);color:var(--forest)}
.privacy-flow__infra-region{display:block;margin-bottom:.25rem;font:.64rem/1.4 var(--sans);font-weight:700;letter-spacing:.12em;color:#986343}
.privacy-flow__infra strong{display:block;margin-bottom:.35rem;font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:400;color:var(--forest)}
.privacy-flow__infra p{margin:0;color:var(--ink-2);font-size:.88rem;line-height:1.5}
@media(max-width:47.99em){.privacy-flow__infrastructure-grid{grid-template-columns:1fr;gap:1.1rem}.privacy-flow__infra{display:grid;grid-template-columns:2.8rem 1fr;column-gap:.8rem;align-items:start}.privacy-flow__infra-mark{grid-row:1/4}.privacy-flow__infra-region,.privacy-flow__infra strong,.privacy-flow__infra p{grid-column:2}.privacy-flow__infra-region{margin-top:.1rem}}