/* ==========================================================================
   rare united — Komponenten
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.site-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--hair);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}
/* Milchglas-Hintergrund bewusst auf einer eigenen Ebene, nicht auf
   .site-head selbst: `backdrop-filter` macht das tragende Element zum
   Bezugsrahmen für `position: fixed`-Kinder. Läge der Filter auf der
   Kopfzeile, würde das mobile Menü (fixed, Kind der Kopfzeile) beim
   Scrollen auf Kopfzeilenhöhe zusammenschrumpfen und wäre nicht mehr
   bedienbar. Als Pseudo-Element bleibt der Effekt erhalten, ohne einen
   Bezugsrahmen aufzuspannen. */
.site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--alabaster) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}
.site-head.is-stuck::before { opacity: 1; }
.site-head.is-stuck::after { opacity: 1; }

.site-head__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand:hover { opacity: 0.72; }

/* Wortmarke: Inline-SVG, Farbe folgt currentColor.
   Bewusst kein mask-image — Safari zeigte die maskierte Variante nicht an. */
.brand-mark {
  display: block;
  width: var(--mark-w, clamp(74px, 6.4vw, 96px));
  height: auto;
}
.brand-mark path { fill: currentColor; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.site-nav a {
  font-size: var(--fs-small);
  color: var(--ink-70);
  text-decoration: none;
  position: relative;
  padding-block: 0.4em;
  letter-spacing: -0.008em;
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale 420ms var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { scale: 1 1; }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { scale: 1 1; background: var(--orange); }

.site-head .btn { padding: 0.72em 1.25em; }

.nav-toggle {
  margin-left: auto;
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle span {
  display: block;
  position: relative;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform 320ms var(--ease-out), background 200ms;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform 320ms var(--ease-out);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
[aria-expanded="true"].nav-toggle span { background: transparent; }
[aria-expanded="true"].nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"].nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--alabaster);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-4);
    padding: var(--gutter);
    margin: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 620ms var(--ease-out);
    overflow-y: auto;
  }
  .site-nav.is-open { clip-path: inset(0 0 0 0); }
  .site-nav a { font-size: clamp(1.5rem, 5.4vw, 2.25rem); letter-spacing: var(--ls-head); color: var(--ink); }
  .site-nav .btn { margin-top: var(--s-4); font-size: var(--fs-body); }
}

/* ==========================================================================
   Hero — Standbild mit Rack Focus
   Scroll setzt nur --t (0…1) und daraus ausschließlich stetige Werte:
   Schärfe, Skalierung, Lichtwäsche. Nichts ist quantisiert, deshalb bleibt
   die Bewegung unabhängig vom Eingabegerät glatt — anders als bei einer
   Bildsequenz, die immer an die Rasterung des Scrollrads gebunden ist.
   ========================================================================== */
.hero {
  --t: 0;
  /* leicht verzögerter Fokus: die Schärfe zieht erst nach, dann schnell durch */
  --tf: clamp(0, calc((var(--t) - 0.02) / 0.5), 1);
  position: relative;
}
.hero__track { height: 240vh; }
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #ddd9c9;
}

.hero__still {
  position: absolute;
  inset: 0;
  margin: 0;
  will-change: transform, filter;
  /* Fokus zieht auf, Bild fährt langsam heran */
  filter: blur(calc(6px * (1 - var(--tf)))) saturate(calc(0.95 + 0.05 * var(--tf)));
  transform: scale(calc(1.065 - 0.065 * var(--t)));
  /* Push-in zieht zum Poster und zur sitzenden Frau, nicht zur Bildmitte */
  transform-origin: 44% 38%;
}
.hero__still img { width: 100%; height: 100%; object-fit: cover; }

/* Lichtwäsche von unten: hält die Copy lesbar, ohne das Bild zu deckeln.
   Zieht mit --t leicht auf, damit die Szene beim Scrollen freier wird. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(105% 78% at 2% 100%,
      rgba(236,233,217,0.97) 0%, rgba(236,233,217,0.86) 26%,
      rgba(236,233,217,0.44) 50%, rgba(236,233,217,0) 74%),
    linear-gradient(to top,
      rgba(236,233,217,0.94) 0%, rgba(236,233,217,0.82) 14%,
      rgba(236,233,217,0.42) 30%, rgba(238,234,216,0.08) 52%,
      rgba(238,234,216,0) 66%),
    radial-gradient(88% 56% at 84% 2%, rgba(255,236,190,0.42) 0%, rgba(255,241,214,0) 68%);
  opacity: calc(1 - 0.07 * var(--t));
}

/* Copy */
.hero__copy {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  padding-bottom: clamp(2.5rem, 8vh, 6rem);
}
/* Breiter und etwas kleiner als die Display-Stufe: so bleibt die Headline
   zweizeilig statt vierzeilig, der Textblock rutscht nach unten und das
   Poster im Key Visual bleibt frei. */
.hero__copy-inner { max-width: min(60rem, 74vw); }
.hero__h {
  font-size: clamp(2.35rem, 5.2vw, 5rem);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
}
.hero__h span { display: block; }
.hero__h span:last-child { color: var(--ink-70); }
.hero__sub { margin-top: var(--s-5); max-width: 32ch; }
.hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Rechtlicher Hinweis — immer lesbar, nie über dem Bild */
.hero__note {
  margin-top: var(--s-5);
  max-width: 34ch;
  display: flex;
  gap: 0.7em;
  align-items: baseline;
}
.hero__note::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--hair-strong);
  flex: none;
  transform: translateY(-0.4em);
}

.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 8vh, 6rem);
  display: flex;
  align-items: center;
  gap: 0.9em;
  opacity: clamp(0, calc(1 - var(--t) * 4), 1);
  transition: opacity 160ms linear;
}
.hero__cue-rail {
  width: 1px; height: 46px;
  background: var(--hair-strong);
  position: relative;
  overflow: hidden;
}
.hero__cue-rail::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--night);
  animation: cue 2.4s var(--ease-inout) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}

@media (max-width: 1000px) {
  .hero__track { height: 200vh; }
  .hero__stage { min-height: 560px; }
  .hero__copy-inner { max-width: none; }
  .hero__still { transform-origin: 46% 36%; }
  .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(236,233,217,0.98) 0%, rgba(236,233,217,0.94) 24%,
        rgba(236,233,217,0.62) 44%, rgba(238,234,216,0.12) 66%,
        rgba(238,234,216,0) 82%);
  }
  .hero__cue { display: none; }
}

/* Ohne Bewegung: scharfes Standbild, kein Sticky-Scroll */
@media (max-width: 700px) {
  .hero__still img { object-position: 30% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__track { height: auto; }
  .hero__stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding-top: calc(var(--header-h) + clamp(16rem, 42vh, 30rem));
  }
  .hero__still { filter: none; transform: none; }
  .hero__copy { position: relative; bottom: auto; padding-bottom: clamp(2.5rem, 8vh, 6rem); }
}

/* ==========================================================================
   Page-Hero (Unterseiten)
   ========================================================================== */
.phero {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 8rem));
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}
.phero__grid { align-items: end; }
.phero__deco {
  position: absolute;
  right: calc(var(--gutter) * -0.5);
  top: 12%;
  width: min(30vw, 360px);
  opacity: 0.9;
  pointer-events: none;
}
.phero__media { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* ==========================================================================
   Medien
   ========================================================================== */
.media { position: relative; overflow: hidden; border-radius: var(--r-sm); background: #ddd9c8; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--9x16 { aspect-ratio: 9 / 16; }

figcaption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-55); }
.on-night figcaption { color: var(--ink-inv-45); }

/* ==========================================================================
   Film-Sektion (emotionaler Anker)
   ========================================================================== */
.film { position: relative; }
.film__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.film__player img, .film__player video { width: 100%; height: 100%; object-fit: cover; }
.film__player video { display: none; }
.film__player.is-playing img,
.film__player.is-playing .film__ui { display: none; }
.film__player.is-playing video { display: block; }

.film__ui {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  background: linear-gradient(15deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 46%, rgba(0,0,0,0.05) 100%);
  transition: background var(--t-mid) var(--ease-out);
}
.film__player:hover .film__ui { background: linear-gradient(15deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.24) 46%, rgba(0,0,0,0.06) 100%); }

.film__play {
  width: clamp(56px, 6vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(246,245,239,0.5);
  display: grid;
  place-items: center;
  flex: none;
  position: relative;
  overflow: hidden;
  color: var(--ink-inv);
}
.film__play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sunrise);
  scale: 0;
  border-radius: 50%;
  transition: scale 560ms var(--ease-out);
}
.film__player:hover .film__play::before { scale: 1; }
.film__player:hover .film__play { color: var(--night); border-color: transparent; }
.film__play svg { position: relative; width: 34%; }
.film__play svg path { fill: currentColor; }

.film__meta { margin-left: clamp(1rem, 2.4vw, 2rem); color: var(--ink-inv); }
.film__meta p { color: var(--ink-inv-65); }

/* ==========================================================================
   Zielgruppen-Weiche
   ========================================================================== */
.routes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--hair); }
.route {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-5) var(--s-7);
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  text-decoration: none;
  color: inherit;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 15rem;
}
.route:nth-child(4) { grid-column: span 3; }
.route:nth-child(5) { grid-column: span 3; border-right: 0; }
.route:nth-child(3) { border-right: 0; }
.route::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--sunrise);
  scale: 0 1;
  transform-origin: left;
  transition: scale 620ms var(--ease-out);
  z-index: 1;
}
.route::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-hi);
  opacity: 0;
  transition: opacity 480ms var(--ease-out);
  z-index: -1;
}
.route:hover::before, .route:focus-visible::before { scale: 1 1; }
.route:hover::after, .route:focus-visible::after { opacity: 1; }

.route__idx { font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--ink-40); font-weight: 700; }
.route__title { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: var(--ls-head); }
.route__text { font-size: var(--fs-small); color: var(--ink-55); margin-top: auto; max-width: 30ch; }
.route__arrow { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs-small); }
.route__arrow svg { transition: transform 420ms var(--ease-out); }
.route:hover .route__arrow svg { transform: translateX(5px); }

@media (max-width: 1000px) {
  .routes { grid-template-columns: repeat(2, 1fr); }
  .route, .route:nth-child(4), .route:nth-child(5) { grid-column: span 1; }
  .route:nth-child(odd) { border-right: 1px solid var(--hair); }
  .route:nth-child(even) { border-right: 0; }
  .route:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .routes { grid-template-columns: 1fr; }
  .route, .route:nth-child(n) { grid-column: span 1; border-right: 0; min-height: 0; }
}

/* ==========================================================================
   Steps / Prozess
   ========================================================================== */
.steps { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); position: relative; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--hair); }
.on-night .step { border-color: var(--hair-inv); }

/* Schritte mit angehängter Merkmal-Box (.stepcard): Über `subgrid` teilen
   sich alle vier Spalten dieselben Zeilen, damit jede Box exakt auf gleicher
   Höhe beginnt und alle vier gleich groß sind — unabhängig davon, wie lang
   der Text im jeweiligen Schritt darüber ist. */
.steps--cards { grid-template-rows: auto auto auto auto; }
.steps--cards .step {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  gap: var(--s-4);
}
@supports not (grid-template-rows: subgrid) {
  .steps--cards .step { display: flex; flex-direction: column; }
  .steps--cards .stepcard { margin-top: auto; }
}
.step__idx {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-weight: 700;
  color: var(--orange);
}
.step__fig { margin-block: var(--s-2) var(--s-1); width: clamp(52px, 5vw, 68px); }

/* Kleine Merkmal-Box je Schritt (z. B. Hygieneaspekt). Innerhalb von
   .steps--cards übernimmt subgrid die Ausrichtung (siehe oben); die
   @supports-Regel dort liefert das margin-top:auto-Fallback ohne subgrid. */
.stepcard {
  background: var(--paper-hi);
  border-radius: var(--r-sm);
  padding: var(--s-4);
}
.on-night .stepcard { background: var(--night-soft); }
.stepcard__label { font-weight: 700; margin-bottom: var(--s-1); }
.stepcard__text { font-size: var(--fs-small); color: var(--ink-55); }
.on-night .stepcard__text { color: var(--ink-inv-45); }
.pict { width: 28px; height: 28px; display: block; margin-bottom: var(--s-2); }
.pict path, .pict circle, .pict rect {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 860px) {
  .steps, .steps--4 { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ==========================================================================
   Ablauf-Infografik (Startseite)
   Portiert aus dem Design-Artefakt „Animierte Prozess-Infografik"
   (ProcessInfographic). Geometrie und Texte 1:1, Umsetzung als Inline-SVG
   auf 1920x1080 — skaliert damit ohne JS und ohne Framework.
   Unter 1000px übernimmt die gestapelte Liste (.ablauf) denselben Inhalt.
   Night ist hier das warme Anthrazit der Anwendung (--night-warm).
   ========================================================================== */
/* Die Grafik nutzt die volle Sektionsbreite (nicht nur --wrap), damit die
   16:9-Geometrie groß genug skaliert: bei 1440px Viewport ~72% statt 65%. */
.pinf-holder {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2vw, 2.5rem);
}
.pinf { margin: 0; }
.pinf__svg { width: 100%; height: auto; display: block; }

.pinf__svg text { font-family: var(--font); }
.pinf-card rect { fill: var(--paper-warm); }
.pinf-card--clear rect { fill: var(--alabaster-deep); }

.pinf-glyph {
  fill: none;
  stroke: var(--night-warm);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pinf-sweep { stroke: var(--night-40); }

.pinf-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; fill: var(--night-60); }
.pinf-h { font-size: 52px; font-weight: 400; letter-spacing: -0.02em; fill: var(--night-warm); }
.pinf-lane { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; fill: var(--night-60); }
.pinf-title { font-size: 25px; font-weight: 400; letter-spacing: -0.02em; fill: var(--night-warm); }
.pinf-sub { font-size: 16px; font-weight: 400; letter-spacing: -0.01em; fill: var(--night-60); }
.pinf-step { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; fill: var(--alabaster); }
.pinf-badge { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; fill: var(--orange-deep); }
.pinf-flag { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; fill: var(--alabaster); }
.pinf-flag--soft { fill: var(--night-60); }
.pinf-dlabel { font-size: 14px; font-weight: 400; letter-spacing: -0.01em; fill: var(--alabaster); }
.pinf-caption { font-size: 31px; font-weight: 400; letter-spacing: -0.02em; fill: var(--night-warm); }
.pinf-note { font-size: 17px; font-weight: 400; fill: var(--night-60); }

.pinf-rule { stroke: var(--alabaster-shade); stroke-width: 1; }
.pinf-rule-strong { stroke: var(--night-warm); stroke-width: 1; opacity: 0.35; }
.pinf-line, .pinf-arrow {
  fill: none;
  stroke: var(--night-warm);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pinf-diamond rect { fill: var(--night-warm); }

/* Die wandernden Datenpunkte sind die einzige Bewegung in der Grafik */
.pinf-dot { fill: var(--orange); opacity: 0.92; }

/* Zwei Darstellungen, ein Inhalt: breit die Grafik, schmal die Liste */
.pinf { display: block; }
.ablauf { display: none; }
@media (max-width: 999px) {
  .pinf { display: none; }
  .ablauf { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .pinf-dot { display: none; }
}

.ablauf__lane { padding-block: clamp(1.5rem, 2.6vw, 2.5rem) clamp(2rem, 3.4vw, 3rem); }
.ablauf__lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.ablauf__tag {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-55);
  padding: 0.5em 0.95em;
  background: var(--alabaster-deep);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.ablauf__grid { display: grid; gap: var(--s-6); list-style: none; }
.astep {
  position: relative;
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair);
}
.astep__idx {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--orange);
}
.astep + .astep::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 8px; height: 8px;
  border-top: 1px solid var(--hair-strong);
  border-right: 1px solid var(--hair-strong);
  transform: rotate(135deg);
}
/* Entscheidungspunkt in der Liste */
.adec {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
  margin-block: var(--s-5);
}
.adec__q { font-size: var(--fs-h4); font-weight: 400; letter-spacing: -0.016em; }
.aend {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--r-sm);
  background: var(--paper-hi);
  margin-top: var(--s-5);
}
.aend--open { border-left: 2px solid var(--orange); background: var(--paper-hi); }

/* ==========================================================================
   Karten / Panels
   ========================================================================== */
.card {
  background: var(--paper-hi);
  border-radius: var(--r-sm);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.on-night .card { background: var(--night-soft); }

.cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Gegenüberstellung: was das System tut / nicht tut */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--paper-hi); }
.contrast > div { padding: clamp(1.5rem, 2.6vw, 2.5rem); }
.contrast > div + div { background: var(--alabaster-deep); }
.contrast ul { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.contrast li { display: grid; grid-template-columns: 1.4em 1fr; gap: 0.6em; font-size: var(--fs-small); color: var(--ink-70); line-height: 1.5; }
.contrast li b { font-weight: 400; color: var(--ink); }
.mark { width: 14px; height: 14px; margin-top: 0.35em; }
.mark path { stroke-width: 1.4; fill: none; vector-effect: non-scaling-stroke; }
.mark--yes path { stroke: var(--orange); }
.mark--no path { stroke: var(--ink-40); }
@media (max-width: 800px) {
  .contrast { grid-template-columns: 1fr; }
  .contrast > div + div { border-top: 0; }
}

/* Hinweis-Box (MDR / Datenschutz) */
.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: var(--paper-hi);
}
.notice__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sunrise); margin-top: 0.55em; }

/* ==========================================================================
   Datenschutz-Datenfluss (Für Familien)
   Portiert aus dem Design-Artefakt „Datenschutz-Datenfluss visualisiert".
   Zwei Kreisläufe, verbunden nur durch den QR-Scan. Die Vorlage ist eine
   feste 1600px-Bühne; hier fluid, weil sie ohnehin auf Flex/Grid basiert.
   ========================================================================== */
.dflow {
  display: grid;
  grid-template-columns: 1fr clamp(140px, 12vw, 190px) 1fr;
  align-items: stretch;
  gap: 0;
}
.dflow__lane {
  background: var(--alabaster-deep);
  border-radius: 32px;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.75rem, 2.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.4vw, 2.25rem);
}
.dflow__row { display: flex; align-items: center; }
.dflow__foot { margin-top: auto; color: var(--night-80); }

/* --- Knoten --- */
.dnode {
  flex: 1;
  background: var(--paper-warm);
  border-radius: 22px;
  padding: clamp(1.1rem, 1.8vw, 1.75rem) clamp(0.9rem, 1.5vw, 1.5rem);
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
}
.dnode__title { font-size: var(--fs-h4); font-weight: 400; line-height: 1.2; letter-spacing: -0.018em; }
.dnode__sub { font-size: var(--fs-small); color: var(--night-60); line-height: 1.35; }

.dnode__art { display: grid; place-items: center; }
/* Fragebogen: Blatt mit drei Zeilen, die letzte akzentuiert */
.dnode__art--doc {
  width: 52px; height: 74px;
  border-radius: 10px;
  background: var(--alabaster-deep);
  align-content: center;
  gap: 6px;
}
.dnode__art--doc i { width: 24px; height: 3px; border-radius: 2px; background: var(--night-40); }
.dnode__art--doc i.is-accent { width: 14px; background: var(--orange); }
/* Cloud: Kreis mit der UUID */
.dnode__art--round {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--alabaster-deep);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--night-80);
}
/* Praxis-Tablet */
.dnode__art--tablet {
  width: 88px; height: 62px;
  border-radius: 10px;
  background: var(--alabaster-deep);
}
.dnode__art--tablet i { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); opacity: 0.9; }
/* Ergebnis: Schloss */
.dnode__art--lock { width: 74px; height: 74px; border-radius: 16px; background: var(--alabaster-deep); }
.dnode__art--lock svg { width: 34px; height: 34px; fill: none; stroke: var(--night-warm); stroke-width: 1.4; stroke-linecap: round; }
.dnode__art--lock .is-accent { fill: var(--orange); stroke: none; }

/* --- Pfeil zwischen zwei Knoten, mit wandernden Punkten --- */
.dflow__arrow {
  width: clamp(48px, 7vw, 104px);
  display: grid;
  justify-items: center;
  gap: 10px;
  flex: none;
}
.dflow__dots { display: flex; gap: 6px; }
.dflow__dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: dflow-x 2.4s linear infinite;
}
.dflow__dots i:nth-child(2) { animation-delay: 0.35s; }
.dflow__dots i:nth-child(3) { animation-delay: 0.7s; }
.dflow__bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--alabaster-shade);
  position: relative;
}
.dflow__bar::after {
  content: "";
  position: absolute;
  right: -15px; top: 50%;
  transform: translateY(-50%);
  border-left: 16px solid var(--alabaster-shade);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

/* --- Die Brücke --- */
.dflow__bridge {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  padding-inline: clamp(0.5rem, 1vw, 0.75rem);
  text-align: center;
}
.dflow__qr-frame {
  width: 84px; height: 84px;
  background: var(--paper-warm);
  border-radius: 8px;
  padding: 8px;
  display: grid;
}
.dflow__qr { width: 100%; height: 100%; fill: var(--night-warm); }
.dflow__down { display: grid; justify-items: center; gap: 6px; }
.dflow__dot-y {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: dflow-y 1.8s linear infinite;
}
.dflow__tri {
  width: 0; height: 0;
  border-top: 14px solid var(--alabaster-shade);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.dflow__phone {
  width: 64px; height: 88px;
  background: var(--paper-warm);
  border-radius: 10px;
  padding: 8px 8px 14px;
  display: grid;
  place-items: center;
}
.dflow__phone i {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--orange);
  animation: dflow-pulse 1.8s ease-in-out infinite;
}
.dflow__bridge-title { font-size: var(--fs-h4); font-weight: 400; letter-spacing: -0.018em; }

@keyframes dflow-x {
  0% { transform: translateX(-14px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(14px); opacity: 0; }
}
@keyframes dflow-y {
  0% { transform: translateY(-12px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}
@keyframes dflow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* --- Notizen unter dem Diagramm --- */
.dflow__notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gutter);
  margin-top: var(--s-6);
}
.dnote {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border-radius: var(--r-sm);
  background: var(--paper-hi);
}
.dnote__lead { font-size: var(--fs-h4); font-weight: 400; letter-spacing: -0.018em; }
.dflow__chip {
  justify-self: start;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--night-80);
  background: var(--alabaster-deep);
  border-radius: var(--r-pill);
  padding: 0.5em 0.95em;
}
/* Austausch mit Bonn: hin verschlüsselt, zurück das Ergebnis */
.dexch { display: grid; gap: var(--s-3); }
.dexch__leg { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: var(--s-3); }
.dexch__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--alabaster-shade);
  position: relative;
}
.dexch__bar::after {
  content: "";
  position: absolute;
  right: -14px; top: 50%;
  transform: translateY(-50%);
  border-left: 15px solid var(--alabaster-shade);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
/* Rückweg: nur der Balken wird gespiegelt, das Label bleibt in Leserichtung */
.dexch__bar--rev { transform: scaleX(-1); }

/* --- Die vier Prinzipien --- */
.dprinciples {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter) clamp(2rem, 4vw, 4rem);
  margin-top: var(--s-8);
}
.dprin { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--hair); }
.dprin__idx {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--orange);
}

@media (max-width: 1000px) {
  .dflow { grid-template-columns: 1fr; gap: var(--s-4); }
  .dflow__bridge { padding-block: var(--s-4); }
  .dflow__notes, .dprinciples { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .dflow__row { flex-direction: column; gap: var(--s-4); }
  .dflow__arrow { width: 100%; }
  .dflow__bar { width: 6px; height: 34px; justify-self: center; }
  .dflow__bar::after {
    right: auto; top: auto;
    left: 50%; bottom: -15px;
    transform: translateX(-50%);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 16px solid var(--alabaster-shade);
    border-bottom: 0;
  }
  .dflow__dots i { animation-name: dflow-y; }
}

@media (prefers-reduced-motion: reduce) {
  .dflow__dots i, .dflow__dot-y, .dflow__phone i { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Roadmap / Timeline
   ========================================================================== */
.timeline { position: relative; display: grid; gap: 0; }
.timeline__rail {
  position: absolute;
  left: 7px; top: 0.6rem; bottom: 3rem;
  width: 1px;
  background: var(--hair);
}
.timeline__rail::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--progress, 0%);
  background: var(--sunrise);
  transition: height 240ms linear;
}
.tl {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: var(--s-6);
  padding-block: clamp(1.75rem, 3.4vw, 3rem);
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.tl:last-child { border-bottom: 0; }
.tl__dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--alabaster);
  margin-top: 0.45rem;
  position: relative;
  z-index: 1;
  transition: border-color 400ms var(--ease-out), background 400ms var(--ease-out);
}
.tl.is-active .tl__dot { background: var(--sunrise); border-color: transparent; }
.tl__body { display: grid; gap: var(--s-3); }
.tl__head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline; }
.tl__phase { font-size: var(--fs-label); letter-spacing: var(--ls-label); font-weight: 700; color: var(--ink-40); }
.tl.is-active .tl__phase { color: var(--orange); }
.tl__when { font-size: var(--fs-h3); letter-spacing: var(--ls-head); }
.tl__list { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.tl__list li { font-size: var(--fs-small); color: var(--ink-55); padding-left: 1.1em; position: relative; }
.tl__list li::before { content: "—"; position: absolute; left: 0; color: var(--ink-40); }
@media (max-width: 700px) {
  .tl { gap: var(--s-4); }
}

/* ==========================================================================
   Datenfluss-Infografik (Technologie)
   ========================================================================== */
.flow { width: 100%; height: auto; color: var(--ink); }
.flow .fl-line { fill: none; stroke: var(--hair-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flow .fl-line--live { stroke: url(#flowGrad); stroke-width: 2.6; stroke-dasharray: 2.6 9; stroke-linecap: round; }
.flow .fl-box { fill: var(--paper-hi); stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flow .fl-node { fill: none; stroke: var(--hair-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flow text { font-family: var(--font); fill: var(--ink); }
.flow .fl-t { font-size: 15px; letter-spacing: -0.018em; }
.flow .fl-l { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; fill: var(--ink-40); }
.flow .fl-s { font-size: 11.5px; fill: var(--ink-55); }

/* ==========================================================================
   Geräte-Mockups
   ========================================================================== */
.device { position: relative; }
.device__frame {
  background: #0e0e11;
  border-radius: var(--r-device);
  padding: 10px;
  box-shadow: var(--shadow-device);
  position: relative;
}
.device__screen { border-radius: 17px; overflow: hidden; position: relative; background: #f2f1e7; }
.device__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 17px;
  background: linear-gradient(128deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.03) 24%, rgba(255,255,255,0) 44%);
  pointer-events: none;
}
.device--phone { max-width: 300px; }
.device--phone .device__frame { border-radius: 38px; padding: 8px; }
.device--phone .device__screen { border-radius: 31px; }
.device--phone .device__frame::after { inset: 8px; border-radius: 31px; }
.device--phone .device__notch {
  position: absolute;
  top: 15px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 5px;
  border-radius: var(--r-pill);
  background: #0e0e11;
  z-index: 2;
}
.device--wall .device__frame { border-radius: 12px; padding: 7px; }
.device--wall .device__screen { border-radius: 6px; }
.device--wall .device__frame::after { inset: 7px; border-radius: 6px; }

/* ==========================================================================
   Störer (Allianz & Partner)
   Orangener Kasten mit weißer Schrift und CTA. Grundfarbe ist bewusst
   --orange-deep, nicht Rare Orange: Weiß auf Rare Orange erreicht nur
   3,22:1 und fällt damit für Fließtext durch (nötig sind 4,5:1). Auf
   --orange-deep sind es 4,75:1. Der helle Rare-Orange-Ton bleibt als
   Lichtkante oben erhalten, damit der Marken-Ton präsent ist.
   ========================================================================== */
.stoerer {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-radius: var(--r-sm);
  background: var(--orange-deep);
  color: #fff;
  overflow: hidden;
}
.stoerer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--sunrise);
}
/* warmer Schein von oben rechts, damit der Block nicht flach wirkt */
.stoerer::after {
  content: "";
  position: absolute;
  right: -20%;
  top: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.16), rgba(255,255,255,0));
  pointer-events: none;
}
.stoerer > * { position: relative; }

.stoerer__label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.stoerer__lead {
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}
.stoerer__text {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.stoerer .btn { justify-self: start; margin-top: var(--s-2); }

/* Button auf farbigem Grund: weiß gefüllt, Schrift in Orange-deep (4,75:1),
   beim Hover kippt er auf Night — der Sunrise-Sweep wäre hier unsichtbar. */
.btn--on-accent {
  --btn-bg: #fff;
  --btn-fg: var(--orange-deep);
  --btn-bd: #fff;
}
.btn--on-accent::after { background: var(--night-warm); }
.btn--on-accent:hover,
.btn--on-accent:focus-visible { color: #fff; border-color: var(--night-warm); }
.btn--on-accent:focus-visible { outline-color: #fff; }

/* Bild und Störer als ein Block — der orangene Teil sitzt oben und unten
   bündig an der Bildkante. Grid statt Flex, damit beide Spalten ohne
   Zutun exakt gleich hoch werden. */
.pherobar {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr clamp(19rem, 27vw, 26rem);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.pherobar__media { position: relative; min-height: clamp(17rem, 30vw, 27rem); }
.pherobar__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stoerer--panel {
  border-radius: 0;
  align-content: center;
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
/* Im Verbund keine Lichtkante: der Block soll ruhig wirken, nicht gegliedert */
.stoerer--panel::before { content: none; }

@media (max-width: 860px) {
  .pherobar { grid-template-columns: 1fr; }
  .pherobar__media { min-height: clamp(14rem, 52vw, 22rem); }
}

/* ==========================================================================
   Partner-Logos
   ========================================================================== */
.logostrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Abstand so bemessen, dass die vier Logos in einer Reihe bleiben, auch
     wenn die gestapelten Lockups optisch vergrößert sind. */
  gap: clamp(1.5rem, 3.4vw, 3.25rem) clamp(1.5rem, 3.4vw, 3.25rem);
}
.logostrip img {
  height: var(--logo-h, clamp(18px, 1.7vw, 25px));
  width: auto;
  opacity: 1;
  filter: brightness(0);
  transition: opacity var(--t-mid) var(--ease-out);
}
/* Gestapelte Lockups (Marke über Wortmarke über Claim) haben etwa die halbe
   Proportion der einzeiligen. Auf gleiche Höhe gebracht wirken sie deutlich
   zu klein — deshalb optisch statt rein rechnerisch ausgleichen. */
.logostrip img[data-lockup="stacked"] { --logo-h: clamp(30px, 2.9vw, 43px); }
.logostrip a:hover img, .logostrip img:hover { opacity: 0.75; }
.logostrip--night img { filter: brightness(0) invert(1); }

/* Partnerkarten: vier gleich hohe Flächen ohne Kontur. Über `subgrid` teilen
   sich alle Karten dieselben Zeilen — dadurch stehen Logo, orangefarbenes
   Label und schwarze Headline über alle vier auf einer Linie, egal wie
   unterschiedlich lang die Texte sind. */
.partnergrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  row-gap: var(--s-3);
}
.partnercard {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  border-radius: var(--r-sm);
  background: var(--paper-hi);
  padding: clamp(1.75rem, 2.8vw, 2.75rem);
}
.partnercard__logo {
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--s-5);
}
.partnercard img {
  height: var(--logo-h, 24px);
  width: auto;
  filter: brightness(0);
  opacity: 1;
}
.partnercard img[data-lockup="stacked"] { --logo-h: 40px; }
.partnercard__role {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange);
}
.partnercard .t-small { margin-top: var(--s-3); }

/* Ohne subgrid: feste Mindesthöhen halten die Zeilen näherungsweise auf Linie */
@supports not (grid-template-rows: subgrid) {
  .partnergrid { grid-template-rows: none; }
  .partnercard { grid-row: auto; grid-template-rows: none; align-content: start; }
  .partnercard__logo { min-height: 44px; }
  .partnercard__role { min-height: 2.6em; }
  .partnercard .t-h4 { min-height: 2.6em; }
}

@media (max-width: 1000px) {
  .partnergrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .partnergrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Geräte-Bühne (Für die Praxis)
   Portiert aus dem Design-Artefakt „Minimal Device Display Room": drei
   Oberflächen bodengleich nebeneinander — Wandposter, Gerät der Eltern,
   Praxis-Tablet. Die Vorlage ist eine feste 1920x1080-Bühne mit absoluten
   Positionen; hier fluid als Flexzeile, alle Maße als Prozent der
   Bühnenbreite, damit die Proportionen exakt erhalten bleiben.
   ========================================================================== */
.devroom {
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  /* Unten mehr Raum, damit der Lichtreflex auf dem Boden Platz hat */
  padding-block: clamp(2rem, 5vw, 5rem) clamp(2.5rem, 6vw, 6rem);
  /* Horizont wie in der Vorlage bei 64 % — aber als weicher Übergang statt
     harter Kante, sonst zeichnet sich eine Linie quer durchs Bild. */
  background:
    linear-gradient(180deg,
      #edebde 0%, var(--alabaster) 46%, #e8e5d7 60%,
      #e3e0d0 68%, #e7e4d6 82%, var(--alabaster) 100%);
}
.devroom__stage {
  width: min(100%, 1694px);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15.82%;
}

/* Breiten und Seitenverhältnisse 1:1 aus der Vorlage */
.devwrap { position: relative; flex: none; }
.devwrap--poster { width: 23.14%; }
.devwrap--phone  { width: 11.22%; }
.devwrap--tablet { width: 34.00%; }

/* Warmer Schein hinter dem Gerät */
.devglow {
  position: absolute;
  left: 50%;
  bottom: var(--glow-b, -22%);
  width: var(--glow-w, 230%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(225,112,8,0.30) 0%, rgba(225,112,8,0.11) 48%, rgba(225,112,8,0) 74%);
  filter: blur(26px);
  animation: devGlow var(--beat, 8s) ease-in-out infinite;
}
/* Lichtreflex auf dem Boden */
.devpool {
  position: absolute;
  left: 50%;
  bottom: var(--pool-b, -21%);
  width: var(--pool-w, 152%);
  height: 28%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(225,112,8,0.32) 0%, rgba(225,112,8,0.07) 52%, rgba(225,112,8,0) 78%);
  filter: blur(18px);
  animation: devPool var(--beat, 8s) ease-in-out infinite;
}
.devwrap--poster { --beat: 8s;   --glow-w: 230%; --pool-w: 153%; }
.devwrap--phone  { --beat: 6.6s; --glow-w: 326%; --pool-w: 174%; }
.devwrap--tablet { --beat: 9.4s; --glow-w: 153%; --pool-w: 125%; }

@keyframes devGlow {
  0%, 100% { opacity: 0.82; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.035); }
}
@keyframes devPool {
  0%, 100% { opacity: 0.70; }
  50%      { opacity: 0.95; }
}

/* Das Gerät selbst */
.devframe {
  position: relative;
  background: linear-gradient(160deg, #3a3a34 0%, #22221f 100%);
  box-shadow: 1.1% 1.3% 3.2% rgba(44,44,40,0.07), 0 2px 8px rgba(44,44,40,0.05);
}
.devframe > video,
.devframe > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
}
.devwrap--poster .devframe {
  aspect-ratio: 392 / 672;
  border-radius: clamp(5px, 0.75vw, 12px);
  padding: clamp(4px, 0.62vw, 10px);
}
.devwrap--poster .devframe > * { border-radius: clamp(2px, 0.32vw, 5px); }

.devwrap--phone .devframe {
  aspect-ratio: 190 / 394;
  border-radius: clamp(14px, 2.1vw, 34px);
  padding: clamp(3px, 0.44vw, 7px);
}
.devwrap--phone .devframe > * { border-radius: clamp(11px, 1.75vw, 28px); }
.devframe__notch {
  position: absolute;
  top: clamp(4px, 0.5vw, 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: clamp(3px, 0.56vw, 9px);
  border-radius: var(--r-pill);
  background: #111;
}

.devwrap--tablet .devframe {
  aspect-ratio: 576 / 444;
  border-radius: clamp(9px, 1.35vw, 22px);
  padding: clamp(5px, 0.75vw, 12px);
}
.devwrap--tablet .devframe > * { border-radius: clamp(5px, 0.75vw, 12px); }

/* Schmal: das Tablet führt, Poster und Telefon rücken darunter zusammen */
@media (max-width: 860px) {
  .devroom__stage {
    flex-wrap: wrap;
    gap: clamp(1.5rem, 6vw, 3rem);
  }
  .devwrap--tablet { width: 100%; order: -1; }
  .devwrap--poster { width: 44%; }
  .devwrap--phone  { width: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .devglow, .devpool { animation: none; }
}

/* ==========================================================================
   Team
   ========================================================================== */
.people { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
.person { display: grid; gap: var(--s-4); align-content: start; }
.person__img { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1; background: var(--paper); }
.person__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(1.02); transition: filter 700ms var(--ease-out), transform 900ms var(--ease-out); }
.person:hover .person__img img { filter: none; transform: scale(1.03); }
.person__role { font-size: var(--fs-label); letter-spacing: var(--ls-label); font-weight: 700; color: var(--ink-40); }
.on-night .person__role { color: var(--ink-inv-45); }
.people--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; }
/* Gründerporträts liegen im Hochformat vor. Ein quadratischer Ausschnitt
   würde die Köpfe anschneiden, deshalb hier 2:3 statt 1:1 — betrifft nur
   diesen Abschnitt, die drei Fachporträts bleiben quadratisch. */
.people--duo .person__img { aspect-ratio: 2 / 3; }
@media (max-width: 860px) { .people { grid-template-columns: 1fr; } }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.acc { border-top: 1px solid var(--hair); }
.acc details { border-bottom: 1px solid var(--hair); }
.acc summary {
  list-style: none;
  cursor: pointer;
  padding-block: clamp(1.1rem, 1.8vw, 1.6rem);
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: -0.016em;
  transition: color var(--t-fast);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--orange); }
.acc summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 13px; height: 13px;
  align-self: center;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform 420ms var(--ease-out), opacity var(--t-fast);
  opacity: 0.5;
}
.acc details[open] summary::after { transform: rotate(135deg); opacity: 1; }
.acc__body { padding-bottom: clamp(1.1rem, 1.8vw, 1.75rem); max-width: 60ch; }

/* ==========================================================================
   Micro-Funnel (Overlay)
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(17, 17, 17, 0.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease-out), visibility 320ms;
}
.overlay.is-open { opacity: 1; visibility: visible; }
.overlay__panel {
  width: min(30rem, 100%);
  background: var(--alabaster);
  border-radius: var(--r-sm);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  transform: translateY(14px) scale(0.985);
  transition: transform 420ms var(--ease-out);
  box-shadow: 0 40px 90px -30px rgba(17,17,17,0.5);
}
.overlay.is-open .overlay__panel { transform: none; }
.overlay__close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  width: 36px; height: 36px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-55);
  display: grid;
  place-items: center;
}
.overlay__close:hover { color: var(--ink); }
.overlay__close svg { width: 13px; }
.overlay__close path { stroke: currentColor; stroke-width: 1.3; fill: none; }

.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-label); letter-spacing: var(--ls-label); font-weight: 700; color: var(--ink-55); text-transform: uppercase; }
.field input {
  font: inherit;
  font-size: var(--fs-body);
  padding: 0.8em 0.9em;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-xs);
  background: var(--paper-hi);
  color: var(--ink);
  width: 100%;
}
.field input::placeholder { color: var(--ink-40); }
.field input:focus { outline-offset: 1px; }
.form-note { font-size: var(--fs-small); color: var(--ink-55); }
.form-done { display: none; }
form.is-sent .form-fields { display: none; }
form.is-sent .form-done { display: grid; gap: var(--s-3); }

/* ==========================================================================
   Zitat
   ========================================================================== */
.quote { display: grid; gap: var(--s-5); }
.quote blockquote {
  font-size: clamp(1.35rem, 2.6vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}
.quote figcaption { display: flex; align-items: center; gap: var(--s-4); }
.quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* ==========================================================================
   Kennzahlen-Slot
   ========================================================================== */
.facts { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
.fact { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--hair); }
.on-night .fact { border-color: var(--hair-inv); }
@media (max-width: 820px) { .facts { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot { background: var(--night); color: var(--ink-inv); padding-block: clamp(3.5rem, 7vw, 7rem) var(--s-6); }
.site-foot a { color: var(--ink-inv-65); text-decoration: none; }
.site-foot a:hover { color: var(--ink-inv); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--gutter); }
.foot-col { display: grid; gap: var(--s-3); align-content: start; }
.foot-col h3 { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 700; color: var(--ink-inv-45); margin-bottom: var(--s-2); }
.foot-brand .brand-mark { --mark-w: 116px; }
.foot-bottom {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair-inv);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: baseline;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Legal-Seiten
   ========================================================================== */
.legal { max-width: 62ch; }
.legal h2 { font-size: var(--fs-h3); letter-spacing: var(--ls-head); margin-top: var(--s-8); }
.legal h3 { font-size: var(--fs-h4); margin-top: var(--s-6); }
.legal p, .legal li { color: var(--ink-70); margin-top: var(--s-3); }
.legal ul { list-style: none; }
.legal li { padding-left: 1.1em; position: relative; }
.legal li::before { content: "—"; position: absolute; left: 0; color: var(--ink-40); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.todo {
  background: rgba(225, 112, 8, 0.1);
  border-bottom: 1px solid var(--orange);
  padding: 0.05em 0.3em;
  font-style: italic;
}