/* Funktionsseiten — Gestaltung (Spec 2026-09-25 §4; Enis 25.9. «kein KI-Standardlook», Herzensangelegenheit).
   Marke: landing-v5-Tokens, Bricolage Grotesque (--font-display) / DM Sans, Gold. Redaktionell und asymmetrisch:
   echte Produktausschnitte als Hauptdarsteller, jeder liegt auf einer Sandplatte, die zum Seitenrand hin ausläuft;
   Haarlinien statt Kästen; eine starke Aussage je Seite.
   Verboten (tests/funktionsseiten-gestaltung.test.js): Verläufe, Blur/Glow, Verlaufstext, Textschatten, farbige
   Schatten, Blau-/Lilatöne, Pillen über der H1, Kartenraster aus Symbol + Titel + Text.
   Varianten: Kopf bild-rechts|bild-unten, Nutzen liste|spalte, Abschnitt wechsel|gross|detail|umschalter,
   Alltag zitat|zahl|preis; dazu der Block «weitere» (kurze Nutzenzeilen ohne Bild).
   Stempel: STEMPEL.funktionsseiteCss in scripts/funktionsseiten/konstanten.js (nie per sed). */

.fs-seite {
  --fs-luft: clamp(72px, 4rem + 4vw, 128px); /* Abstand zwischen Abschnitten */
  --fs-platte: rgba(184, 134, 11, 0.075); /* Sand unter den Bildern — Gold stark verdünnt, kein Verlauf */
  --fs-bildrand: rgba(0, 0, 0, 0.1); /* 1-px-Kontur der Aufnahmen (better-ui: reines Schwarz, tief deckend) */
  --fs-tiefe: 0 1px 2px rgba(27, 25, 24, 0.06), 0 12px 28px -10px rgba(27, 25, 24, 0.16),
    0 36px 72px -28px rgba(27, 25, 24, 0.22);
  --fs-band: #1b1918; /* die eine starke Aussage: ein ruhiges Tintenband */
  --fs-band-schrift: #f5f2ea;
  --fs-band-leise: #cfc8bb;
  --fs-band-gold: #d4a03e;
  --fs-band-linie: #3a352e;
}
:root[data-theme='dark'] .fs-seite {
  --fs-platte: rgba(212, 160, 62, 0.06);
  --fs-bildrand: rgba(255, 255, 255, 0.1);
  --fs-tiefe: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 36px -12px rgba(0, 0, 0, 0.55), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  --fs-band: #1f1d18;
  --fs-band-linie: #3d3630;
}

.fs-seite main { display: block; overflow-x: clip; }
.fs-seite main h1, .fs-seite main h2 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
  font-optical-sizing: auto;
}
.fs-seite main :is(h1, h2, h3, p, dt, dd, li) { overflow-wrap: break-word; }

/* ── Aufnahmen im Rahmen ── */
.fs-seite main .browser-frame {
  border: 0;
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--fs-bildrand), var(--fs-tiefe);
}
.fs-seite main .browser-frame__bar {
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}
.fs-seite main .browser-frame__dots i { width: 8px; height: 8px; background: var(--border-hover); }
.fs-seite main .browser-frame__url {
  flex: 0 1 auto;
  max-width: none;
  margin: 0 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
  text-align: start;
  color: var(--ink-4-a11y);
}
:root[data-theme='dark'] .fs-seite main .browser-frame__shot { filter: brightness(0.94); }

/* Jedes Bild liegt auf einer Platte, die hinter ihm zum Rand der Seite ausläuft (main schneidet sie ab). */
.fs-kopf-bild, .fs-abschnitt-bild { position: relative; isolation: isolate; margin: 0; }
.fs-kopf-bild::before, .fs-abschnitt-bild::before {
  content: '';
  position: absolute;
  z-index: -1;
  background: var(--fs-platte);
}

/* ── Kopf ── */
.fs-kopf { padding: clamp(28px, 1rem + 2vw, 56px) 0 var(--fs-luft); }
.fs-brotkrumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 clamp(28px, 1rem + 2.5vw, 56px);
  padding: 0;
  font-size: 13px;
  color: var(--ink-4-a11y);
}
.fs-brotkrumen li + li::before { content: '/'; margin-right: 6px; color: var(--ink-5); }
.fs-brotkrumen a { color: var(--ink-4-a11y); text-decoration: none; }
.fs-brotkrumen a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fs-brotkrumen [aria-current] { color: var(--ink-2); }
.fs-kopf h1 {
  margin: 0 0 var(--s6);
  font-size: clamp(2.25rem, 1.2rem + 2.7vw, 3.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.fs-versprechen {
  max-width: 34em;
  margin: 0 0 var(--s8);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.fs-cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.fs-preiszeile {
  max-width: 34em;
  margin: var(--s8) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
:root:not([data-theme='dark']) .fs-preiszeile { color: var(--ink-4-a11y); }

/* bild-rechts: Text 5, Bild 7; die Platte beginnt unter dem Bild und läuft nach rechts aus dem Fenster. */
.fs-kopf--bild-rechts .fs-kopf-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 1rem + 4vw, 88px);
  align-items: center;
}
.fs-kopf--bild-rechts .fs-kopf-bild::before { inset: 14% -100vw -9% 18%; border-radius: 18px 0 0 18px; }
.fs-kopf--bild-rechts .browser-frame__shot {
  aspect-ratio: 6 / 5; /* bewusst: fester Zuschnitt, die Arbeitsseite ist länger als der Kopf hoch */
  object-fit: cover;
  object-position: top left;
}

/* bild-unten: Titel links gross, Versprechen rechts unten angeschlagen; das Bild darunter über die ganze Breite,
   es ragt in den Nutzen-Streifen hinein. */
.fs-kopf--bild-unten .fs-kopf-text {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(32px, 1rem + 4vw, 88px);
  align-items: end;
}
.fs-kopf--bild-unten h1 { grid-row: 1 / span 3; margin: 0; }
.fs-kopf--bild-unten .fs-versprechen { margin-bottom: var(--s6); }
.fs-kopf--bild-unten .fs-kopf-bild { z-index: 1; margin: clamp(40px, 1.5rem + 3vw, 72px) 0 calc(-1 * var(--fs-luft)); }
.fs-kopf--bild-unten .fs-kopf-bild::before { inset: -28px -100vw 36% 22%; border-radius: 18px 0 0 18px; }
.fs-kopf--bild-unten + .fs-nutzen { padding-top: calc(var(--fs-luft) * 2); }

/* ── Nutzen ── */
.fs-nutzen {
  padding: var(--fs-luft) 0;
  background: var(--bg-warm);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.fs-nutzen h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.625rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.fs-nutzen-liste { list-style: none; margin: 0; padding: 0; }
.fs-nutzen-liste h3 { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.fs-nutzen-liste p { margin: 0; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* liste: grosse Ziffern auf einer Goldlinie, zwei Spalten neben der Überschrift */
.fs-nutzen--liste .fs-nutzen-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 1rem + 4vw, 88px);
  align-items: start;
}
.fs-nutzen--liste .fs-nutzen-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 1rem + 2vw, 56px);
  row-gap: clamp(36px, 1.5rem + 1.5vw, 56px);
}
.fs-nutzen--liste li { padding-top: var(--s5); border-top: 1px solid var(--gold); }
.fs-nummer {
  display: block;
  margin-bottom: var(--s4);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

/* spalte: eine Tafel — Überschrift klebt links, rechts Zeilen mit Stichwort | Satz, getrennt durch Haarlinien.
   Bewusst ohne Symbole: Symbol + Titel + Text je Punkt wäre das Kartenmuster (Review Task 2). */
.fs-nutzen--spalte .fs-nutzen-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 1rem + 4vw, 88px);
}
.fs-nutzen--spalte h2 { position: sticky; top: 104px; align-self: start; }
.fs-nutzen--spalte .fs-nutzen-liste { border-top: 1px solid var(--ink); }
.fs-nutzen--spalte li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--s8);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--border);
}
.fs-nutzen--spalte h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.fs-beta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--ink-5);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 3px;
  color: var(--ink-2);
}

/* ── Bildabschnitte ── */
.fs-abschnitt { padding: var(--fs-luft) 0; }
.fs-abschnitt + .fs-abschnitt { padding-top: 0; }
.fs-abschnitt h2 {
  margin: 0 0 var(--s5);
  font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.375rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.fs-abschnitt-text p { max-width: 32em; margin: 0 0 var(--s3); font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.fs-abschnitt-text p:last-child { margin-bottom: 0; }

/* wechsel: 5/7, das Bild wechselt die Seite; die Platte läuft auf der Bildseite aus dem Fenster */
.fs-abschnitt--wechsel .fs-abschnitt-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 1rem + 4vw, 96px);
  align-items: center;
}
.fs-abschnitt--wechsel.fs-abschnitt--bild-rechts .fs-abschnitt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fs-abschnitt--wechsel.fs-abschnitt--bild-rechts .fs-abschnitt-bild { order: 2; }
.fs-abschnitt--wechsel.fs-abschnitt--bild-links .fs-abschnitt-bild { order: -1; }
.fs-abschnitt--wechsel.fs-abschnitt--bild-rechts .fs-abschnitt-bild::before { inset: -8% -100vw 12% 26%; border-radius: 18px 0 0 18px; }
.fs-abschnitt--wechsel.fs-abschnitt--bild-links .fs-abschnitt-bild::before { inset: -8% 26% 12% -100vw; border-radius: 0 18px 18px 0; }

/* gross: Bild breit (bis 960 px), die Platte als Streifen über die ganze Fensterbreite hinter seiner unteren Hälfte;
   darunter Titel und Text in zwei Spalten */
.fs-abschnitt--gross .fs-abschnitt-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 1rem + 4vw, 96px);
}
.fs-abschnitt--gross .fs-abschnitt-bild { grid-column: 1 / -1; grid-row: 1; width: min(100%, 960px); margin: 0 auto clamp(48px, 2rem + 3vw, 88px); }
.fs-abschnitt--gross .fs-abschnitt-bild::before { inset: 40% -100vw calc(-1 * clamp(24px, 1rem + 1vw, 40px)); }
/* Titel links über alle Zeilen, Absätze rechts untereinander (bewusst: bis drei Absätze; ein vierter liefe weiter) */
.fs-abschnitt--gross .fs-abschnitt-text {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(32px, 1rem + 4vw, 96px);
}
.fs-abschnitt--gross h2 { grid-column: 1; grid-row: 1 / -1; margin: 0; }
.fs-abschnitt--gross .fs-abschnitt-text p { grid-column: 2; }

/* detail: kleiner Ausschnitt, daneben eine grosse Aussage; das Blatt steht etwas schräg auf der Platte */
.fs-abschnitt--detail .fs-abschnitt-raster {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(32px, 1rem + 4vw, 96px);
  align-items: center;
}
.fs-abschnitt--detail.fs-abschnitt--bild-links .fs-abschnitt-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.fs-abschnitt--detail.fs-abschnitt--bild-links .fs-abschnitt-bild { order: -1; }
.fs-abschnitt--detail h2 { font-size: clamp(2rem, 1.25rem + 2.4vw, 3.25rem); line-height: 1.04; letter-spacing: -0.028em; }
.fs-abschnitt--detail .fs-abschnitt-bild::before { inset: -12% -100vw -12% -16%; border-radius: 22px 0 0 22px; }
.fs-abschnitt--detail.fs-abschnitt--bild-links .fs-abschnitt-bild::before { inset: -12% -16% -12% -100vw; border-radius: 0 22px 22px 0; }
.fs-abschnitt--detail .browser-frame { rotate: 1.25deg; }
.fs-abschnitt--detail.fs-abschnitt--bild-links .browser-frame { rotate: -1.25deg; }

/* ── Alltag: die eine starke Aussage ── */
.fs-alltag { padding: var(--fs-luft) 0; }
.fs-abschnitt + .fs-alltag--zahl, .fs-abschnitt + .fs-alltag--preis { padding-top: 0; }
.fs-alltag blockquote { margin: 0; }
/* zitat: ein Satz aus dem Alltag auf dem Tintenband, die Guillemets hängen in den Rand */
.fs-alltag--zitat { background: var(--fs-band); border-block: 1px solid var(--fs-band-linie); }
.fs-alltag--zitat .container { padding-left: calc(var(--s6) + 8%); }
.fs-alltag--zitat blockquote p {
  max-width: 20ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-indent: -0.42em;
  color: var(--fs-band-schrift);
  text-wrap: balance;
}
.fs-alltag--zitat .fs-alltag-zusatz {
  max-width: 34em;
  margin: var(--s10) 0 0;
  padding-top: var(--s5);
  border-top: 2px solid var(--fs-band-gold);
  width: fit-content;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--fs-band-leise);
  text-wrap: pretty;
}
/* zahl | preis: die Zahl links, gross in Gold; die Erklärung rechts, zwischen zwei Tintenlinien */
.fs-alltag--zahl .container, .fs-alltag--preis .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s8) clamp(32px, 1rem + 4vw, 96px);
  align-items: end;
  padding-block: var(--s12);
  border-block: 1px solid var(--ink);
}
.fs-zahl {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 1.8rem + 5.6vw, 7.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fs-alltag--zahl .fs-alltag-zusatz, .fs-alltag--preis .fs-alltag-zusatz {
  max-width: 30em;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ── Unterschied ── */
.fs-unterschied { padding: var(--fs-luft) 0; background: var(--bg-warm); border-top: 1px solid var(--border-light); }
.fs-unterschied h2, .fs-verwandt h2 {
  margin: 0;
  font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.375rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.fs-unterschied-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s10) clamp(28px, 1rem + 2vw, 56px);
  margin: var(--s10) 0 0;
}
.fs-unterschied-liste > div { padding-top: var(--s5); border-top: 1px solid var(--ink); }
.fs-unterschied-liste dt { margin-bottom: 8px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.fs-unterschied-liste dd { margin: 0; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.fs-unterschied-liste a, .fs-zubringer-link a, .fs-hoch a {
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fs-unterschied-liste a:hover, .fs-zubringer-link a:hover, .fs-hoch a:hover { text-decoration-thickness: 2px; }

/* ── Passt dazu: ein Register aus Zeilen (Name | Satz | Pfeil), keine Kacheln ── */
.fs-verwandt { padding: var(--fs-luft) 0 var(--s12); }
.fs-verwandt-liste { list-style: none; margin: var(--s8) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.fs-verwandt-liste li { border-bottom: 1px solid var(--border); }
.fs-verwandt-liste a {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 24px;
  gap: var(--s6);
  align-items: baseline;
  min-height: 44px;
  padding: var(--s5) 0;
  color: var(--ink);
  text-decoration: none;
}
.fs-verwandt-liste strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 150ms ease-out;
}
.fs-verwandt-liste a > span { color: var(--ink-3); line-height: 1.5; }
:root:not([data-theme='dark']) .fs-verwandt-liste a > span { color: var(--ink-4-a11y); }
.fs-verwandt-liste svg { align-self: center; color: var(--gold-text); transition: translate 150ms ease-out; }
.fs-verwandt-liste a:hover strong { color: var(--gold-text); }
.fs-verwandt-liste a:hover svg { translate: 4px 0; }
.fs-verwandt-liste a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.fs-zubringer-link, .fs-hoch { margin: var(--s6) 0 0; }

/* ── Handy: ein Gerät statt eines Fensters — dunkler Rand, keine Adresszeile ── */
.fs-seite main .browser-frame--handy {
  max-width: 300px;
  margin-inline: auto;
  padding: 9px;
  border-radius: 38px;
  background: #1b1918;
  box-shadow: 0 0 0 1px var(--fs-bildrand), var(--fs-tiefe);
}
.fs-seite main .browser-frame--handy .browser-frame__shot { border-radius: 30px; }
:root[data-theme='dark'] .fs-seite main .browser-frame--handy { background: #2b2824; }
/* Kopf mit Handy (Stufe 2, Self-Service): das Gerät steht aufrecht neben dem Titel — kein 6:5-Zuschnitt, auch nicht
   im quadratischen Handy-Zuschnitt unter 560 px (die höhere Spezifität gewinnt dort ebenfalls). */
.fs-kopf--bild-rechts .browser-frame--handy .browser-frame__shot { aspect-ratio: auto; }
.fs-kopf--bild-rechts .browser-frame--handy { max-width: 320px; }
/* Schmale Ausschnitte (Datensatz: schmal) in natürlicher Grösse statt hochgezogen. */
.fs-seite main .browser-frame--schmal { max-width: 440px; margin-inline: auto; }
.fs-abschnitt--detail .browser-frame--handy { rotate: 0deg; }
.fs-abschnitt--detail.fs-abschnitt--bild-links .browser-frame--handy { rotate: 0deg; }

/* ── Umschalter: zwei Bilder desselben Ergebnisses. Ohne JS untereinander mit Beschriftung; mit JS (Klasse
   fs-umschalter--an) liegen beide in derselben Zelle, sichtbar ist das mit data-aktiv — die Höhe springt nicht. ── */
.fs-abschnitt--umschalter .fs-abschnitt-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 1rem + 4vw, 96px);
  align-items: center;
}
.fs-umschalter-bilder { display: grid; gap: var(--s10); justify-items: center; }
.fs-umschalter-bilder .fs-abschnitt-bild { width: min(100%, 560px); }
.fs-umschalter-bilder .fs-abschnitt-bild::before { inset: -6% -100vw 10% 30%; border-radius: 18px 0 0 18px; }
.fs-umschalter-titel {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}
.fs-umschalter--an .fs-umschalter-titel { display: none; }
.fs-umschalter--an .fs-umschalter-bilder { grid-template-areas: 'bild'; }
.fs-umschalter--an .fs-umschalter-bilder > .fs-abschnitt-bild { grid-area: bild; transition: opacity 200ms ease-out, visibility 200ms; }
.fs-umschalter--an .fs-umschalter-bilder > .fs-abschnitt-bild:not([data-aktiv]) { visibility: hidden; opacity: 0; }
.fs-umschalter {
  display: inline-flex;
  gap: 4px;
  margin-top: var(--s8);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
}
.fs-umschalter[hidden] { display: none; }
.fs-umschalter-knopf {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 15px/1 var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.fs-umschalter-knopf:hover { color: var(--ink); }
.fs-umschalter-knopf[aria-pressed='true'] { background: var(--ink); color: var(--bg-card); }
.fs-umschalter-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Weitere: kurze Nutzenzeilen ohne Bild — Titel links, rechts ein zweispaltiges Register aus Haarlinien ── */
.fs-weitere { padding: var(--fs-luft) 0; border-top: 1px solid var(--border-light); }
.fs-weitere-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 1rem + 4vw, 88px);
  align-items: start;
}
.fs-weitere-kopf { position: sticky; top: 104px; }
.fs-weitere h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.625rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.fs-weitere-kopf p { max-width: 24em; margin: var(--s5) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.fs-weitere-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 1rem + 2vw, 56px);
  margin: 0;
  padding: 0;
}
.fs-weitere-liste li { padding: var(--s6) 0; border-top: 1px solid var(--border); }
.fs-weitere-liste li:nth-child(-n + 2) { border-top-color: var(--ink); }
.fs-weitere-liste h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fs-weitere-liste p { margin: 0; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ── Gründerblock vor dem Schluss-Aufruf (Entscheid Enis 25.9.): ein Satz, eine Person, eine Adresse — Haarlinie
   statt Karte, kein Foto. Werte aus STEMPEL-freien Konstanten (GRUENDER in scripts/funktionsseiten/konstanten.js). ── */
.fs-gruender { padding: var(--fs-luft) 0 calc(var(--fs-luft) * 0.75); }
.fs-gruender-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--s8) clamp(28px, 1rem + 3vw, 72px);
  align-items: stretch;
}
/* Haarlinie je Spalte wie in «Was uns unterscheidet» — die Linie des .container liefe über dessen Innenabstand hinaus */
.fs-gruender-raster > * { padding-top: var(--s6); border-top: 1px solid var(--ink); }
.fs-gruender h2 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.375rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.fs-gruender-person { display: grid; align-content: start; gap: 4px; margin: 0; line-height: 1.5; color: var(--ink-2); }
.fs-gruender-person strong { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--ink); }
.fs-gruender-person a {
  justify-self: start;
  margin-top: 6px;
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.fs-gruender-person a:hover { text-decoration-thickness: 2px; }

/* ── Bewegung (Entscheid Enis 25.9.: dezent und gezielt; Memory feedback_einstiegsanimation_kein_opacity_grundwert).
   Alles bleibt ohne JS und ohne Bewegung sichtbar: Kein Grundzustand ist unsichtbar, nur ease-out, kein Parallax.
   1) Umschalter: Überblenden 200 ms (oben). 2) Aufnahmen heben sich beim Zeigen minimal — nur mit echter Maus.
   3) Bildabschnitte: public/js/funktionsseite.js setzt «fs-wartet» (8 px tiefer, sichtbar) nur an Bildern, die beim
   Laden unterhalb des Fensters liegen, und nimmt die Klasse einmal beim Hereinrollen weg. ── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fs-seite main .browser-frame { transition: translate 200ms ease-out, box-shadow 200ms ease-out; }
  .fs-seite main .browser-frame:hover {
    translate: 0 -3px;
    box-shadow: 0 0 0 1px var(--fs-bildrand), var(--fs-tiefe), 0 22px 40px -18px rgba(27, 25, 24, 0.18);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fs-bewegt { transition: translate 400ms ease-out; }
  .fs-bewegt.fs-wartet { translate: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-verwandt-liste strong, .fs-verwandt-liste svg { transition: none; }
  .fs-umschalter--an .fs-umschalter-bilder > .fs-abschnitt-bild, .fs-umschalter-knopf { transition: none; }
  .fs-seite main .browser-frame, .fs-bewegt { transition: none; translate: none; }
}

/* ── Tablet und Handy ── */
@media (max-width: 860px) {
  .fs-gruender-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .fs-gruender-person { padding-top: 0; border-top: 0; }
  .fs-kopf--bild-rechts .fs-kopf-raster,
  .fs-kopf--bild-unten .fs-kopf-text,
  .fs-nutzen--liste .fs-nutzen-raster,
  .fs-nutzen--spalte .fs-nutzen-raster,
  .fs-abschnitt--wechsel .fs-abschnitt-raster,
  .fs-abschnitt--wechsel.fs-abschnitt--bild-rechts .fs-abschnitt-raster,
  .fs-abschnitt--gross .fs-abschnitt-raster,
  .fs-abschnitt--detail .fs-abschnitt-raster,
  .fs-abschnitt--detail.fs-abschnitt--bild-links .fs-abschnitt-raster,
  .fs-alltag--zahl .container,
  .fs-alltag--preis .container,
  .fs-abschnitt--umschalter .fs-abschnitt-raster,
  .fs-weitere-raster { grid-template-columns: minmax(0, 1fr); }
  .fs-weitere-kopf { position: static; }
  .fs-abschnitt--umschalter .fs-abschnitt-raster { gap: var(--s10); }
  .fs-kopf--bild-rechts .fs-kopf-raster { gap: var(--s10); }
  .fs-kopf--bild-unten h1 { grid-row: auto; margin-bottom: var(--s6); }
  /* Text vor Bild, wie im DOM — auf dem Handy liest man zuerst, was das Bild zeigt */
  .fs-abschnitt--wechsel .fs-abschnitt-bild,
  .fs-abschnitt--detail .fs-abschnitt-bild { order: 2; }
  .fs-abschnitt--wechsel .fs-abschnitt-raster, .fs-abschnitt--detail .fs-abschnitt-raster { gap: var(--s10); }
  .fs-abschnitt--wechsel.fs-abschnitt--bild-links .fs-abschnitt-bild::before { inset: -8% -100vw 12% 26%; border-radius: 18px 0 0 18px; }
  .fs-abschnitt--gross .fs-abschnitt-text { display: block; }
  .fs-abschnitt--gross .fs-abschnitt-bild { width: 100%; }
  .fs-abschnitt--gross .fs-abschnitt-bild { margin-bottom: var(--s10); }
  .fs-abschnitt--gross h2 { margin-bottom: var(--s5); }
  .fs-abschnitt--detail .fs-abschnitt-bild { max-width: 460px; margin-inline: auto; }
  /* Text vor Bild auch bei «detail» mit Bild links (die Desktop-Regel order:-1 ist spezifischer), und die Platte
     beginnt unter dem Blatt statt 12 % darüber — sonst lag sie hinter dem letzten Absatz (Sichtprobe Ausbau 25.9.) */
  .fs-abschnitt--detail.fs-abschnitt--bild-links .fs-abschnitt-bild { order: 2; }
  .fs-abschnitt--detail .fs-abschnitt-bild::before,
  .fs-abschnitt--detail.fs-abschnitt--bild-links .fs-abschnitt-bild::before { inset: 8% -100vw -6% 24%; border-radius: 18px 0 0 18px; }
  .fs-nutzen--spalte h2 { position: static; }
  .fs-nutzen--spalte li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .fs-alltag--zitat .container { padding-left: calc(var(--s6) + 1rem); } /* Platz für das hängende « */
  .fs-zahl { white-space: normal; }
  .fs-unterschied-liste { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .fs-verwandt-liste a { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 4px; }
  .fs-verwandt-liste strong { grid-column: 1; }
  .fs-verwandt-liste a > span { grid-column: 1; grid-row: 2; }
  .fs-verwandt-liste svg { grid-column: 2; grid-row: 1 / span 2; }
  .fs-kopf--bild-unten .fs-kopf-bild { margin-bottom: calc(-0.6 * var(--fs-luft)); }
  .fs-kopf--bild-unten + .fs-nutzen { padding-top: calc(var(--fs-luft) * 1.6); }
}
@media (max-width: 560px) {
  .fs-nutzen--liste .fs-nutzen-liste { grid-template-columns: minmax(0, 1fr); }
  .fs-alltag--zitat .container { padding-left: calc(var(--s4) + 0.85rem); }
  .fs-kopf--bild-rechts .browser-frame__shot { aspect-ratio: 1 / 1; }
  /* Querformat (Dialog, Übersicht): nie seitlich abschneiden — ganze Breite, eigene Höhe (U1-Befund 25.9.) */
  .fs-kopf--bild-rechts .fs-kopf-bild--quer .browser-frame__shot { aspect-ratio: auto; }
  .fs-weitere-liste { grid-template-columns: minmax(0, 1fr); }
  .fs-weitere-liste li:nth-child(2) { border-top-color: var(--border); }
  .fs-umschalter { display: flex; width: 100%; }
  .fs-umschalter-knopf { flex: 1; padding: 0 12px; }
  .fs-abschnitt--detail .browser-frame, .fs-abschnitt--detail.fs-abschnitt--bild-links .browser-frame { rotate: 0deg; }
}