/* ============================================================================
   css/skala.css  —  EINE Quelle fuer Groessen und den Seitenkopf.

   Diese Datei laden BEIDE Templates: scripts/page.template.html (Unterseiten)
   und scripts/home-live.template.html (Startseite). Sie ist der einzige Ort,
   an dem Schriftgroessen, Hero-Hoehe und der Baustein .page-hero--split stehen.

   Grund: Die Startseite laeuft auf einem eigenen CSS-System (v3.css), die
   Unterseiten auf v4.css. Vorher standen die Groessen doppelt und liefen
   auseinander. Wer hier etwas aendert, aendert es fuer die ganze Website.
   Nichts davon in v4.css, v3.css oder css/pages/ wiederholen.
   Stand 07.09.2026.
   ============================================================================ */

:root {
  /* Schriftskala Desktop, Stand 07.09.2026.
     Gemessen an aon.com, marsh.com/de, stripe.com, linear.app, vercel.com, apple.com,
     figma.com, notion.com bei 1440, 2000 und 2560 px.
     Zwei Befunde bestimmen diese Werte:
     1. Ueber 1440 px skaliert bei 5 von 8 Seiten NICHTS. Wer den Container deckelt, friert
        die Schrift ein. Wir deckeln bei 1440, also frieren wir ein. Sonst waeren bei 2560
        die Zeilen genauso kurz wie bei 1440, nur die Buchstaben groesser.
     2. Andere sind nicht groesser in der Schrift, sondern in der Flaeche. Aon faehrt 96 px
        in einem 810 px hohen Kopf, wir hatten 86 px in einem 560 px flachen. Die Peer-Gruppe
        mit unserem Setup (deutsch, Schadenmanagement, geteilter Hero, Serif ohne Fettschnitt)
        liegt bei 52 bis 60 px: marsh.com 52, willistowerswatson.com 56, howdengroup.com 60.
     Skala: 96 · 64 · 48 · 30 · 26 · 22 · 18 · 15. Oben weit (1.33), unten enger (1.20). */
  --fc-h1-home: 96px;   /* Aon 96 */
  --fc-h1: 96px;        /* Aon-Niveau, 07.09. Laurence: Hero groesser */
  --fc-h2: 56px;        /* haelt H1:H2 bei 1.43, Band 1.11 bis 1.38 plus Apple 2.0 */
  --fc-h3-lg: 30px;
  --fc-h3: 26px;
  --fc-lead: 22px;      /* Stripe 22 · Apple 21 · Linear 24 · Vercel 24 */
  --fc-body: 18px;      /* Aon 18 · Figma 18. Kein gemessener Fliesstext liegt ueber 22 px. */
  --fc-small: 15px;
  --fc-hero-h: min(56.25vw, 92vh); /* Aon: 16:9 der Fensterbreite, 92vh als Deckel */

  /* Flaeche und Rhythmus. Werte wie vor dem 07.09., BEWUSST unveraendert.
     Die Messung an apple, linear, notion, stripe, figma, vercel, aon, marsh haette
     Gosse 64, Container 1360 und die Staffel 96/144/192 nahegelegt. Beim Test hat das
     die Seiten verschoben statt verbessert, deshalb zurueckgenommen (Laurence, 07.09.).
     Falls das noch einmal angefasst wird: einzeln aendern und einzeln pruefen, nicht alles auf einmal. */
  --fc-container: 1440px;
  --fc-container-wide: 1640px;
  /* Bild-Text-Baustein .feature (11.09.2026): Desktop endet das Bild mit dem Text, keine Mindesthoehe
     (4:5 als Minimum war Laurence viel zu gross). Mobil steht das Bild oben und braucht ein Verhaeltnis. */
  --fc-feature-ratio-mobile: 4 / 3;
  --fc-gutter: 36px;
  --fc-section: 132px;
  --fc-section-lg: 160px;
  --fc-section-sm: 84px;

  /* Diese zwei Token stehen sonst nur in styles.css, das die Startseite nicht laedt.
     Ohne sie hatte der Startseiten-Hero margin-top 0 (rutschte unter den fixen Header)
     und einen weissen statt getoenten Grund (07.09.). */
  --fc-header-h: 76px;
  --fc-band: #f4f5f3;

  /* Randkante fuer Header und Hero (Aon-Muster, Laurence 07.09.): Logo, Navigation und
     Hero-Text bleiben am Bildschirmrand, waehrend die Sektionen im zentrierten Container
     laufen. Aon: 48 px fest auf jeder Breite, Sektionen in Spalte 2 (163/203/257).
     Bei 1440 gleich der Gosse (36), 48 bei 1920, 64 bei 2560.
     Seit 26.10.2026 (Laurence) ueberholt: Header und Heros fluchten mit der Containerkante, auf grossen
     Bildschirmen stand das Logo sonst weit links vom Inhalt. Der max()-Teil ist genau der Einzug von .fc-container. */
  --fc-edge: max(clamp(36px, 2.5vw, 64px), calc((100vw - var(--fc-container)) / 2));
}
/* Grossbild-Stufe (Laurence, 07.09. abends): Aon macht ueber 1900 px genau EINE Stufe
   (Titel 80 -> 96, H3 56 -> 66, Fliesstext 18 -> 22) und laesst die Flaeche mitwachsen.
   Wir hatten ab 1440 alles eingefroren, waehrend der 16:9-Hero weiterwuchs: bei 2560 ein
   1325 px hoher Kopf ueber Sektionen in 1440er-Werten. Einzige Ausnahme von Bau-Regel 3
   (Breakpoints nur 991/767/479), dokumentiert in CLAUDE.md und docs/ia-v2-bauanleitung.md.
   Container 1640 statt 1440, Typo +15 bis +20 %, Sektionsstaffel +15 %. Fliesstext 20, nicht
   22 wie Aon: bei 60ch bleibt die Zeile lesbar. */
@media (min-width: 1900px) {
  :root {
    --fc-container: 1640px;
    --fc-container-wide: 1840px;
    --fc-h1-home: 112px;
    --fc-h1: 112px;
    --fc-h2: 66px;
    --fc-h3-lg: 34px;
    --fc-h3: 28px;
    --fc-lead: 24px;
    --fc-body: 20px;
    --fc-statement: 72px;
    --fc-statement-w: 1240px;
    --fc-section: 152px;
    --fc-section-lg: 184px;
    --fc-section-sm: 96px;
  }
}
/* Mobile Staffel. Stand hier frueher nur in styles.css und wurde von diesem :root-Block
   ueberschrieben, seit skala.css als letzte Datei laedt (Sektionsabstand 132 auf dem Handy). */
@media (max-width: 991px) {
  :root { --fc-gutter: 28px; --fc-edge: 28px; --fc-header-h: 64px; --fc-section: 104px; --fc-section-lg: 120px; --fc-section-sm: 68px; }
}
@media (max-width: 767px) {
  :root { --fc-gutter: 20px; --fc-edge: 20px; --fc-header-h: 64px; --fc-section: 80px; --fc-section-lg: 92px; --fc-section-sm: 56px; }
}

/* ===== Seitenkopf zweigeteilt: links Text auf heller Flaeche, rechts das Foto scharf.
   Vorbild Aon (07.09.2026). Moeglich, weil der Header seit dem gleichen Tag deckt:
   kein aufhellender Verlauf mehr, kein Textschatten. ===== */
.page-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: var(--fc-hero-h);
  margin-top: var(--fc-header-h);
  padding: 0;
  background: var(--fc-band);
}
/* Header ueber die volle Breite, Logo und Navigation auf --fc-edge (css/pages/navigation.css
   deckelt sonst auf 1440 + Gosse). Das Mega-Menue behaelt seine Breite, startet aber an derselben Kante. */
.fc-header__inner { max-width: none; padding-inline: var(--fc-edge); }
.fc-header .fc-nav__menu--mega > .fc-container { margin-inline: 0; padding-inline: var(--fc-edge); } /* Mega-Menue haengt am Ausloeser links, nicht zentriert */
/* v3.css gibt main der Startseite 12px Abstand und 30px Eckenradius (alter Prototyp). */
main:has(> .page-hero--split) { margin-top: 0; border-radius: 0; }
.page-hero--split .page-hero__panel {
  display: grid;
  align-content: center;
  justify-items: start;
  text-align: left;
  padding: 72px clamp(40px, 5vw, 80px) 72px var(--fc-edge); /* vorher an der Container-Kante, seit 07.09. abends am Rand wie der Header */
}
.page-hero--split .page-hero__panel .fc-kicker { margin-bottom: 20px; line-height: 1.55; color: var(--fc-muted); }
.page-hero--split .page-hero__panel h1 {
  /* 08.09.: Wachstumsrate 5.4vw (vorher 6.67vw, Deckel 96 schon bei 1440). Der Text laeuft in der HALBEN
     Fensterbreite minus Randkante und Innenabstand: 612 px bei 1440, 625 bei 1470 (MacBook Air), 643 bei 1512.
     "Die Außenregulierung" braucht bei 96 px 711 px, der Browser fuellt Zeile 1 gierig und brach am ­
     ("Die Außen- / regulierung") auf jedem Mac-Laptop bis 1727 px. Jetzt: 78 bei 1440 (Aon: 80), 96 ab 1780,
     112 ab 2074 (nicht schon bei 1900: dort haette der Claim mit 830 px wieder nicht in die 822 px passen).
     Untergrenze 52 statt 56, damit auch 992 bis 1037 ohne Trennstrich laeuft. Gemessen 992 bis 2560, immer
     zwei Zeilen. Hero-Hoehe absichtlich nicht angefasst (Laurence: darf ueber den Viewport ragen).
     max-width in ch war zu eng fuer lange Komposita, deshalb zusaetzlich 100% als Deckel.
     Trennstellen stehen als ­ im Fragment, NICHT per hyphens:auto. Chrome trennt sonst falsch
     ("Handwer-/kercheck") und ignoriert gesetzte ­; ohne Trennwoerterbuch bricht es sogar ganz ohne
     Trennstrich. Vorbild hiscox.de und wuerttembergische.de. overflow-wrap bleibt als Netz, falls jemand
     eine H1 ohne ­ nachtraegt (break-word, nicht anywhere: anywhere wuerde die Grid-Spalte kollabieren). */
  max-width: min(100%, 20ch);
  font-size: clamp(52px, 5.4vw, var(--fc-h1));
  line-height: 1.02;
  order: 0; /* v3.css:1978 schiebt .home-hero h1 auf Mobile per order hinter die Buttons */
  hyphens: manual;
  overflow-wrap: break-word;
}
.page-hero--split .page-hero__panel .page-hero__lead { max-width: 46ch; margin-top: 28px; font-size: var(--fc-lead); line-height: 1.5; color: var(--fc-copy); }
.page-hero--split .page-hero__actions { justify-self: start; margin-top: 32px; }
.page-hero--split .page-hero__media { position: relative; inset: auto; min-height: var(--fc-hero-h); }
.page-hero--split .page-hero__media::after { content: none; }
.page-hero--split .page-hero__media img { object-position: 50% 35%; }
.page-hero--split .page-hero__media img,
.page-hero--split .page-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Variante "Bild dahinter" (Laurence 08.09.2026, Vorbild Aon Deutschland): das Foto liegt ueber die
   volle Breite hinter dem Hero, die Textflaeche links ist eine weichgezeichnete, abgedunkelte Scheibe
   desselben Bildes, rechts bleibt es scharf. Text auf Weiss. Zusaetzlich zu .page-hero--split setzen. */
.page-hero--bleed { background: var(--fc-green-950); }
.page-hero--bleed .page-hero__media { position: absolute; inset: 0; min-height: 0; z-index: 0; }
.page-hero--bleed .page-hero__media img { object-position: 50% 50%; }
.page-hero--bleed .page-hero__panel {
  position: relative;
  z-index: 1;
  align-content: end;
  padding-bottom: 88px;
}
/* Die Scheibe ist ein eigenes Element, damit sie beim Scroll-Lauf ohne den Text verschoben werden kann. */
.page-hero--bleed .page-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(42, 121, 85, .30); /* --fc-green-600 mit Alpha. 08.09. spaet zweimal heller: green-950 bei .58 und green-800 bei .34 waren zu dicht, das Buero soll durchscheinen */
  -webkit-backdrop-filter: blur(12px) saturate(.95);
  backdrop-filter: blur(12px) saturate(.95);
  transform: translateX(calc(-100% * var(--scrub, 0)));
  will-change: transform;
}
/* Spezifischer als .js .page-hero.is-ready .hero-seq (v4.css), sonst bleibt der Lead auf 1.
   Ohne Übergang auf opacity, damit der Wert dem Scrollen direkt folgt. */
.js .page-hero--bleed.is-ready .page-hero__panel .page-hero__lead { opacity: calc(1 - var(--scrub, 0)); transition-property: transform; }
/* Scroll-Lauf: Wrapper gibt den Laufweg (ein Viewport) vor, der Hero klebt solange unter dem Header.
   Nur mit .is-scrub (setzt js/v4.js ab 992 px ohne reduzierte Bewegung), sonst normaler Hero. */
main:has(> .hero-scrub) { margin-top: 0; border-radius: 0; }
.hero-scrub.is-scrub { padding-top: var(--fc-header-h); height: calc(var(--fc-header-h) + var(--fc-hero-h) + 100vh); }
.hero-scrub.is-scrub .page-hero--bleed { position: sticky; top: var(--fc-header-h); margin-top: 0; z-index: 0; }
/* Zweiter Akt: die Folgesektion schiebt sich ueber das freigelegte Foto (Cover). Der Wrapper bekommt eine
   Hero-Hoehe extra Laufweg und zieht die Folgesektion um dieselbe Hoehe hoch, die Sektion liegt per z-index
   ueber dem klebenden Hero. Ablauf: ein Viewport Scheibe raus, dann eine Hero-Hoehe Cover. */
.hero-scrub.is-scrub { height: calc(var(--fc-header-h) + var(--fc-hero-h) + 100vh + var(--fc-hero-h)); margin-bottom: calc(-1 * var(--fc-hero-h)); }
.hero-scrub.is-scrub ~ * { position: relative; z-index: 2; }
/* Test 08.09. spaet: Hero mit data-nav="dark" laeuft unter den transparenten Header, deshalb kein Kopfabstand
   und eine Header-Hoehe mehr Bild. Text bleibt durch align-content: end unten. */
.page-hero--bleed[data-nav="dark"] { margin-top: 0; min-height: calc(var(--fc-hero-h) + var(--fc-header-h)); }
.hero-scrub.is-scrub:has(> [data-nav="dark"]) { padding-top: 0; }
.hero-scrub.is-scrub > .page-hero--bleed[data-nav="dark"] { top: 0; }
@media (max-width: 991px) {
  .page-hero--bleed[data-nav="dark"] { min-height: calc(min(120vw, 80vh) + var(--fc-header-h)); }
} /* alle Folgesektionen, sonst scheint der klebende Hero unter kurzen Sektionen durch */
.page-hero--bleed .page-hero__panel h1, .page-hero--bleed .page-hero__panel .page-hero__lead { color: var(--fc-white); }
.page-hero--bleed .page-hero__panel .fc-kicker { color: var(--fc-green-300); }
.page-hero--bleed .page-hero__panel .page-hero__lead { color: var(--fc-on-dark-soft); }

@media (max-width: 991px) {
  .page-hero--split { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0; }
  .page-hero--bleed { min-height: min(120vw, 80vh); }
  .page-hero--bleed .page-hero__media { aspect-ratio: auto; }
  .page-hero--bleed .page-hero__panel { align-self: end; padding-bottom: 48px; }
  .page-hero--split .page-hero__media { min-height: 0; aspect-ratio: 16 / 9; }
  .page-hero--split .page-hero__panel { padding: 48px var(--fc-gutter) 56px; }
  .page-hero--split .page-hero__panel h1 { font-size: clamp(38px, 6.4vw, 56px); }
}

/* Primaerbutton. Steht hier, weil ihn beide Systeme brauchen: v4.css kennt --green,
   v3.css kannte bisher nur --dark. Ohne diese Zeile hatte der Startseiten-Hero nach der
   Vereinheitlichung einen Button ohne Fuellung (07.09.). */
.fc-button--green { background: var(--fc-green-800); color: var(--fc-white); border-color: var(--fc-green-800); }
.fc-button--green:hover { background: var(--fc-green-950); border-color: var(--fc-green-950); }

/* Die Startseite laeuft auf v3.css und hatte dort eigene Layout-Werte:
   Container 1240 statt 1440 und Sektionsabstand 150 statt 132. Dadurch sass der Hero
   an einer anderen Kante als die Sektionen darunter, und die Startseite war schmaler
   als alle Unterseiten. Hier werden die v3-Variablen auf die gemeinsamen umgebogen,
   damit es genau eine Quelle gibt (Laurence, 07.09.: "muss einheitlich in einem CSS"). */
:root {
  --v3-container: var(--fc-container);
  --v3-wide: var(--fc-container-wide);
  --v3-gutter: var(--fc-gutter);
  --v3-section: var(--fc-section);
}

/* ===== Startseite: Sektionsrhythmus und H2 wie auf den Unterseiten (07.09.).
   v3.css und css/pages/home*.css geben jeder Sektion eigene Werte (Padding 72/96/104/128,
   H2 40/46/52/60/66). Hier werden sie auf die eine Staffel gezogen: Sektion --fc-section,
   H2 wie v4.css. Ausgenommen: .home-ways (laeuft schon als .sec--lg), .vn-strip (Leiste),
   Footer. Selektoren mit .home-page, weil v3 bis 0,2,1 spezifisch ist. ===== */
main > .statement-section,
main > .home-services,
main > .home-state-network,
main > .trust-section,
main > .about-section,
main > .home-testimonials,
main > .intent-section { padding-block: var(--fc-section); }
.home-page .statement-section__text,
.home-page .home-services__head h2,
.home-page .home-state-network__heading h2,
.home-page .trust-section h2,
.home-page .about-section .feature-block__head h2,
.home-page .home-testimonials__head h2,
.home-page .intent-section__intro h2,
.home-page .home-ways__title { font-size: clamp(34px, 3.89vw, var(--fc-h2)); line-height: 1.06; }

/* ===== Sichtprobe Teko nur auf der Startseite (Laurence 09.09.2026, Bastians Mail 08.09.: Serif "zu feminin").
   Brand-Guide S. 14: Teko Primary Typography, S. 15 Work Sans Slogan und Fliesstext. Die Unterseiten bleiben
   auf Instrument Serif (styles.css/v4.css), deshalb alles unter .home-page. Teko hat 622 statt 720 Versalhoehe
   pro 1000 em, darum die Display-Groessen mal 1,16 (H1 96 -> 112, H2 56 -> 64, H3 26 -> 30, Grossbild 112 -> 130,
   66 -> 76). Navigation und Buttons ebenfalls Teko ("ueberall muss das gleich sein"), Tracking 0 laut Guide,
   Nav und Buttons .02em, 3 bis 5 px groesser als die Work-Sans-Werte davor. ===== */
.home-page {
  --fc-h1-home: 112px;
  --fc-h1: 112px;
  --fc-h2: 64px;
  --fc-h3-lg: 34px;
  --fc-h3: 30px;
}
@media (min-width: 1900px) {
  .home-page { --fc-h1-home: 130px; --fc-h1: 130px; --fc-h2: 76px; --fc-h3-lg: 40px; --fc-h3: 32px; --fc-statement: 84px; }
}
.home-page .fc-header .fc-nav__link,
.home-page .fc-header .fc-header__cta,
.home-page .fc-mobile-nav > a,
.home-page .fc-button { font-family: var(--fc-font-display); font-weight: 500; letter-spacing: .02em; }
.home-page .fc-header .fc-nav__link { font-size: 20px; }
.home-page .fc-header .fc-nav__link--sm { font-size: 18px; font-weight: 500; }
.home-page .fc-header .fc-header__cta { font-size: 18px; }
.home-page .fc-button { font-size: 21px; }
.home-page .tile--compact .fc-button { font-size: 19px; }
.home-page .fc-mobile-nav > a { font-size: 28px; }
.home-page .fc-mobile-nav > a span { font-family: var(--fc-font); font-weight: 400; letter-spacing: 0; }
.home-page .fc-header .fc-nav__lead h2 { font-family: var(--fc-font-display); font-size: clamp(34px, 3.4vw, 46px); font-weight: 400; line-height: 1; letter-spacing: 0; }
.home-page .fc-header .fc-nav__menu--mega strong { font-family: var(--fc-font-display); font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: 0; }
.home-page .home-ways__title { font-size: clamp(40px, 4.4vw, var(--fc-h2)); line-height: 1; }
.home-page h1 em, .home-page h2 em, .home-page h3 em { font-style: normal; } /* Teko hat keinen Kursivschnitt, Akzent nur ueber die Farbe */
/* Hierarchie der Gewichte (Laurence 09.09.): H1 Medium, darunter Regular. Nav, Buttons und Zahlen bleiben Medium. */
.home-page h1 { font-weight: 500; }
.home-page h2, .home-page h3 { font-weight: 400; }
.home-page .fc-header .fc-nav__lead h2, .home-page .home-ways .home-ways__card .tile__title { font-weight: 400; }
/* Kein DM Mono auf der Startseite (Laurence 09.09.): der Guide kennt nur Teko und Work Sans. Alle Kicker, Labels,
   Chips und Meta-Zeilen haengen am Mono-Token, deshalb reicht das Umbiegen des Tokens; Work Sans 600 in Versalien
   mit dem vorhandenen Tracking. Unterseiten behalten DM Mono bis zur Entscheidung fuer alle Seiten. */
.home-page { --v3-font-mono: var(--fc-font); --fc-font-mono: var(--fc-font); }
.home-page .home-services, .home-page .home-ways { --fc-font-mono: var(--fc-font); }
.home-page .fc-header { --fc-nav-mono: var(--fc-font); } /* Mega-Menue-Spaltentitel (navigation.css) */
.home-page .fc-header .fc-nav__col-title { font-weight: 600; } /* home-live-sections.css setzt das Token auf diesen beiden Sektionen erneut */
.home-page .fc-kicker, .home-page .home-services__eyebrow, .home-page .home-testimonial__topic,
.home-page .home-state-network__eyebrow, .home-page .hero-karte__kicker, .home-page .feature-block__rows span,
.home-page .intent-section__result > p, .home-page .fc-footer__grid strong { font-weight: 600; }

/* ===== Startseiten-Hero zentriert auf der Karte (Sichtprobe 09.09.2026, Bastians Mail 08.09.:
   "fetter Text auf einem hellen Map-Hintergrund"). Layout wie Canvas Board A vom 04.09. (21c732b, H1 136):
   Bastians Karte der Live-Seite vollflaechig unter dem Text, H1 und Lead zentriert, Logo-Luecke dazwischen.
   Vier Schadenmeldungen als HTML-Karten in den Raendern (kein Video: Linien und Marker wackeln im Render,
   Laurence 09.09.). Unterseiten behalten .page-hero--split. Logo-Proportion aus dem Guide: Hoehe = 57 % der H1
   (Versalhoehe 622/1000), gerundet auf die Guide-Stufen 32 / 64 (S. 9), Luecke = Logo + Clearspace X oben und
   unten (S. 4) = 2,125 x Logo. ===== */
.home-page .page-hero--karte {
  --hero-logo-h: 38px;
  --hero-gap: calc(var(--hero-logo-h) * 2.125);
  --hero-takt: 1.1s;   /* Abstand zwischen zwei Schadenmeldungen */
  --hero-start: 1.4s;  /* erste Meldung nach dem Textaufbau */
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: var(--fc-hero-h);
  margin-top: var(--fc-header-h);
  padding: 72px var(--fc-edge) 72px;
  background: var(--fc-white);
}
main:has(> .page-hero--karte) { margin-top: 0; border-radius: 0; }
.home-page .hero-karte__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--fc-white); }
.home-page .hero-karte__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Weiss von oben und unten, damit Header-Kante und Uebergang zur naechsten Sektion ruhig bleiben, und ein
   Wasch in der Mitte fuer H1 und Lead. Die Karte ist ohnehin fast weiss. */
.home-page .hero-karte__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 64%, rgba(255,255,255,.4) 100%), radial-gradient(ellipse 40% 46% at 50% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%); }
.home-page .hero-karte__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.home-page .hero-karte__inner .fc-kicker { margin-bottom: 20px; }
.home-page .hero-karte__inner h1 { max-width: min(100%, 1100px); font-size: clamp(56px, 5.9vw, var(--fc-h1-home)); line-height: .96; hyphens: manual; overflow-wrap: break-word; } /* Skala vom 07.09. x1,16 (Deckel 112, 130 ab 1900), nicht mehr die 136 des Canvas: zu dominant (Laurence 09.09.) */
.home-page .hero-karte__logo { display: grid; place-items: center; height: var(--hero-gap); }
.home-page .hero-karte__logo picture, .home-page .hero-karte__logo img { display: block; height: var(--hero-logo-h); width: auto; }
.home-page .hero-karte__lead { max-width: 640px; margin-top: 0; font-size: var(--fc-lead); line-height: 1.5; color: var(--fc-copy); }
.home-page .hero-karte__actions { justify-content: center; margin-top: 36px; }

/* Schadenmeldungen: Pin plus Karte, am Punkt --x/--y verankert. Links-Variante haengt die Karte links vom Pin. */
.home-page .hero-karte__fall { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 1; display: flex; align-items: center; gap: 12px; }
.home-page .hero-karte__fall--rechts { flex-direction: row-reverse; transform: translateX(-100%); }
.home-page .hero-karte__fall--links { transform: none; }
.home-page .hero-karte__pin { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--fc-green-800); box-shadow: 0 0 0 4px var(--fc-white), 0 0 0 5px rgba(26, 81, 63, .18), 0 0 0 14px rgba(95, 255, 167, .18); }
.home-page .hero-karte__fall--links .hero-karte__pin { order: -1; }
.home-page .hero-karte__karte { display: grid; gap: 2px; padding: 12px 16px 13px; border: 1px solid var(--fc-line); border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 40px -22px rgba(25, 27, 25, .35), 0 0 0 1px rgba(25, 27, 25, .03); text-align: left; white-space: nowrap; }
.home-page .hero-karte__kicker { color: var(--fc-green-600); font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.home-page .hero-karte__karte strong { font-family: var(--fc-font-display); font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--fc-black); }
.home-page .hero-karte__karte span:last-child { color: var(--fc-copy); font-size: 13px; line-height: 1.4; }
/* Folge: Text (hero-seq, 0 bis 3 x 160 ms), dann die vier Meldungen im Takt, dann das Logo. Ausgeloest von is-ready
   aus js/v3.js, nur transition (Regel 2). */
.js .home-page .page-hero--karte .hero-karte__fall { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .6s ease, transform .8s var(--v3-ease); transition-delay: calc(var(--hero-start) + var(--i) * var(--hero-takt)); }
.js .home-page .page-hero--karte .hero-karte__fall--rechts { transform: translateX(-100%) translateY(10px) scale(.96); }
.js .home-page .page-hero--karte.is-ready .hero-karte__fall { opacity: 1; transform: none; }
.js .home-page .page-hero--karte.is-ready .hero-karte__fall--rechts { transform: translateX(-100%); }
.js .home-page .page-hero--karte .hero-seq--ende { opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform .9s var(--v3-ease); transition-delay: calc(var(--hero-start) + .2s); }
.js .home-page .page-hero--karte.is-ready .hero-seq--ende { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) { .home-page .page-hero--karte { --hero-logo-h: 76px; } } /* 09.09.: rund 20 % groesser als die Guide-Stufe 64 (Laurence) */
@media (min-width: 1900px) { .home-page .page-hero--karte { --hero-logo-h: 88px; } }
@media (max-width: 991px) {
  .home-page .page-hero--karte { min-height: 70vh; padding: 56px var(--fc-gutter) 64px; }
  .home-page .hero-karte__inner h1 { font-size: clamp(48px, 7.4vw, 72px); }
  .home-page .hero-karte__karte { padding: 10px 12px; }
  .home-page .hero-karte__karte strong { font-size: 20px; }
  .home-page .hero-karte__karte span:last-child { font-size: 12px; }
}
@media (max-width: 767px) {
  .home-page .page-hero--karte { padding-top: 40px; }
  .home-page .hero-karte__inner h1 { font-size: clamp(44px, 12vw, 64px); }
  .home-page .hero-karte__lead { font-size: 17px; }
  /* Mobil nur die Pins, die Karten haetten keinen Platz neben dem Text. */
  .home-page .hero-karte__karte { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .home-page .page-hero--karte .hero-karte__fall, .js .home-page .page-hero--karte .hero-seq--ende { opacity: 1; transform: none; transition: none; }
  .js .home-page .page-hero--karte .hero-karte__fall--rechts { transform: translateX(-100%); }
}


/* ===== Bestaetigte Typografie fuer alle Unterseiten, 09.09.2026.
   Groessen bleiben zentral. Die feinere About-Abstimmung folgt danach. ===== */
.brand-page { --fc-h1: 112px; --fc-h2: 64px; --fc-h3: 32px; --fc-h3-lg: 36px; }
.brand-page h1 { font-weight: 500; letter-spacing: 0; }
.brand-page h2 { font-size: clamp(40px, 4.45vw, var(--fc-h2)); font-weight: 400; line-height: 1.04; letter-spacing: 0; }
.brand-page h3 { font-weight: 400; letter-spacing: 0; }
.brand-page h1 em, .brand-page h2 em, .brand-page h3 em { font-style: normal; }
.brand-page .page-hero--split .page-hero__panel h1 {
  max-width: 100%; font-size: clamp(60px, 6.3vw, var(--fc-h1)); line-height: .98;
}
.brand-page .statement { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.14; letter-spacing: 0; text-wrap: pretty; }
.brand-page .fc-copy { line-height: 1.7; }
.brand-page .fc-kicker, .brand-page .fc-header .fc-nav__col-title,
.brand-page .fc-footer__grid strong, .brand-page .tile__meta { font-weight: 600; }
.brand-page .fc-header .fc-nav__link,
.brand-page .fc-header .fc-header__cta,
.brand-page .fc-mobile-nav > a,
.brand-page .fc-button { font-family: var(--fc-font-display); font-weight: 500; letter-spacing: .02em; }
.brand-page .fc-header .fc-nav__link { font-size: 20px; }
.brand-page .fc-header .fc-nav__link--sm, .brand-page .fc-header .fc-header__cta { font-size: 18px; }
.brand-page .fc-mobile-nav > a { font-size: 28px; }
.brand-page .fc-mobile-nav > a span { font-family: var(--fc-font); font-weight: 400; letter-spacing: 0; }
.brand-page .fc-header .fc-nav__lead h2 { font-size: clamp(34px, 3.4vw, 46px); font-weight: 400; line-height: 1; letter-spacing: 0; }
.brand-page .fc-header .fc-nav__menu--mega strong { font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: 0; }
.brand-page .fc-button { font-size: 21px; }
.brand-page .tile--compact .fc-button { font-size: 19px; }
.brand-page .card__title { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
.brand-page .tile__title { font-size: 36px; line-height: 1.1; letter-spacing: 0; }
.brand-page .card__title--sm, .brand-page .tile__title--sm { font-size: 32px; }
.brand-page .cols__title, .brand-page .academy-modules__title { font-size: 30px; line-height: 1.15; letter-spacing: 0; }
.brand-page .academy-pfad__titel { font-size: 34px; letter-spacing: 0; }
.brand-page .rows--titled .rows__label { font-size: 28px; line-height: 1.15; letter-spacing: 0; }
.brand-page .link-card strong { font-size: 26px; letter-spacing: 0; }
.brand-page .quote__text { font-size: 34px; line-height: 1.25; letter-spacing: 0; }
.brand-page .community-stimmen__row .quote__text { font-size: 26px; }
.brand-page .facts__num { font-size: 48px; font-weight: 500; letter-spacing: 0; }
.brand-page .facts--big .facts__num, .brand-page .numbers--facts .numbers__titel { font-size: 60px; font-weight: 500; letter-spacing: 0; }
.brand-page .facts-band__text { font-size: 28px; letter-spacing: 0; }
.brand-page .phases--num .phases__n { font-weight: 500; letter-spacing: 0; }
/* Kompakte Funktions- und Zwischenueberschriften bleiben in der Textschrift. */
.brand-page .steps__title, .brand-page .phases__title,
.brand-page .numbers__titel:not(.numbers--facts .numbers__titel),
.brand-page .kontakt-thema__weg-title { font-family: var(--fc-font); font-weight: 500; }
.brand-page .legal-page__head h1 { font-size: clamp(52px, 6.3vw, 112px); line-height: 1; }
.brand-page .legal-page__body h2 { font-size: 36px; line-height: 1.15; }
.brand-page .legal-page__body h3 { font-family: var(--fc-font); font-size: 17px; font-weight: 600; line-height: 1.4; }
/* Startseite verwendet schon Teko; hier Tracking und kleine Titel angleichen. */
.home-page h1, .home-page h2, .home-page h3 { letter-spacing: 0; }
.home-page .home-ways .tile__title { font-size: 36px; line-height: 1.1; letter-spacing: 0; }
@media (min-width: 1900px) {
  .brand-page { --fc-h1: 130px; --fc-h2: 76px; --fc-h3: 36px; --fc-h3-lg: 40px; }
  .brand-page .statement { font-size: 64px; }
}
@media (max-width: 991px) {
  .brand-page .page-hero--split .page-hero__panel h1 { font-size: clamp(54px, 8vw, 80px); }
}
@media (max-width: 767px) {
  .brand-page { --fc-body: 17px; --fc-lead: 19px; }
  .brand-page .page-hero--split .page-hero__panel h1 { font-size: clamp(48px, 10vw, 68px); }
  .brand-page .statement { font-size: clamp(34px, 6.7vw, 44px); line-height: 1.16; }
  .brand-page .fc-button { font-size: 20px; }
  .brand-page .tile--compact .fc-button { font-size: 19px; }
  .brand-page .card__title { font-size: 36px; }
  .brand-page .tile__title, .home-page .home-ways .tile__title { font-size: 32px; }
  .brand-page .card__title--sm, .brand-page .tile__title--sm { font-size: 30px; }
  .brand-page .quote__text { font-size: 30px; }
  .brand-page .community-stimmen__row .quote__text { font-size: 24px; }
  .brand-page .legal-page__body h2 { font-size: 32px; }
}

/* ===== Ueber uns: bestaetigte Markentypografie, 09.09.2026.
   Teko Medium setzt die Anker, Regular traegt die Sektionsueberschriften.
   Work Sans bleibt fuer Absaetze und Metadaten. Nur diese Seite ist betroffen. ===== */
.ueber-uns-page {
  --fc-h1: 112px;
  --fc-h2: 64px;
  --fc-h3: 32px;
  --fc-section: 112px;
  --fc-section-lg: 128px;
  --fc-section-sm: 80px;
}
.ueber-uns-page h2 { font-size: clamp(40px, 4.45vw, var(--fc-h2)); line-height: 1.04; }
.ueber-uns-page .ueber-uns-hero .page-hero__panel h1 {
  max-width: 100%;
  font-size: clamp(64px, 6.3vw, var(--fc-h1));
  line-height: .98;
  text-wrap: balance;
}
.ueber-uns-page .ueber-uns-hero .page-hero__lead { max-width: 42ch; margin-top: 24px; line-height: 1.6; }
.ueber-uns-page .ueber-uns-wer .statement {
  max-width: 1120px;
  font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: pretty;
}
.ueber-uns-page .ueber-uns-story__body { max-width: 680px; }
.ueber-uns-page .ueber-uns-story__body .fc-lead { line-height: 1.6; }
.ueber-uns-page .ueber-uns-story__body .fc-copy { line-height: 1.75; }
.ueber-uns-page .ueber-uns-story__stations { margin-top: 40px; }
.ueber-uns-page .ueber-uns-story__stations .rows__item { padding-block: 28px; }
.ueber-uns-page .ueber-uns-story__stations .rows__label { font-size: 17px; line-height: 1.5; }
.ueber-uns-page .ueber-uns-story__stations .rows__text { margin-top: 10px; font-size: var(--fc-body); line-height: 1.7; }
/* Seit 22.10.2026 (Laurence): Kopf im selben 3er-Raster wie die Porträts darunter. Überschrift über Foto 1,
   Textblock rechtsbündig zur rechten Kante von Foto 3; oben bündig mit der ersten H2-Zeile. */
.ueber-uns-page #team.ueber-uns-team .split { grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: start; } /* seit 26.10.: Kopf untereinander wie überall */
.ueber-uns-page .ueber-uns-team .split__body { grid-column: auto; max-width: 44em; padding-top: 0; }
.ueber-uns-page .ueber-uns-team .split__body { display: block; }
.ueber-uns-page .ueber-uns-team .split__body .fc-lead { max-width: 48ch; } /* Block endet bündig mit der rechten Kante von Foto 3 (Laurence 22.10.) */
@media (max-width: 991px) { .ueber-uns-page #team.ueber-uns-team .split { grid-template-columns: minmax(0, 1fr); } .ueber-uns-page .ueber-uns-team .split__body { grid-column: auto; padding-top: 0; justify-content: flex-start; } }
.ueber-uns-page .ueber-uns-team__people { margin-top: 48px; gap: 56px 32px; }
.ueber-uns-page .ueber-uns-team__person .people__name { margin-top: 24px; font-size: 34px; line-height: 1.1; }
.ueber-uns-page .ueber-uns-team__person .people__role { margin-top: 6px; font-size: 15px; }
.ueber-uns-page .ueber-uns-team__person .people__text { margin-top: 14px; font-size: 16px; line-height: 1.7; }
.ueber-uns-page .ueber-uns-teil .fc-lead { max-width: 42ch; font-size: 20px; line-height: 1.65; }
.ueber-uns-page .ueber-uns-wege__title { max-width: 760px; }
.ueber-uns-page .ueber-uns-wege__tiles { margin-top: 40px; }
.ueber-uns-page .ueber-uns-wege .tile__title { font-size: 36px; line-height: 1.1; }
.ueber-uns-page .fc-header .fc-nav__link { font-size: 20px; }
.ueber-uns-page .fc-header .fc-nav__link--sm,
.ueber-uns-page .fc-header .fc-header__cta { font-size: 18px; }
.ueber-uns-page .fc-header .fc-nav__lead h2 { font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.ueber-uns-page .fc-header .fc-nav__menu--mega strong { font-size: 24px; line-height: 1.1; }
.ueber-uns-page .fc-mobile-nav > a { font-size: 28px; }
.ueber-uns-page .fc-button { font-size: 21px; }
@media (min-width: 1900px) {
  .ueber-uns-page { --fc-h1: 130px; --fc-h2: 76px; --fc-h3: 36px; --fc-section: 132px; --fc-section-lg: 152px; --fc-section-sm: 96px; }
  .ueber-uns-page .ueber-uns-wer .statement { max-width: 1280px; font-size: 64px; }
  .ueber-uns-page .ueber-uns-story__body { max-width: 760px; }
  .ueber-uns-page .ueber-uns-team__person .people__name { font-size: 38px; }
  .ueber-uns-page .ueber-uns-team__person .people__text { font-size: 18px; }
  .ueber-uns-page .ueber-uns-teil .fc-lead { font-size: 22px; }
}
@media (max-width: 991px) {
  .ueber-uns-page { --fc-section: 88px; --fc-section-lg: 104px; --fc-section-sm: 64px; }
  .ueber-uns-page .ueber-uns-hero .page-hero__panel h1 { max-width: 680px; font-size: clamp(60px, 8vw, 80px); }
  .ueber-uns-page .ueber-uns-team__people { gap: 44px 24px; }
}
@media (max-width: 767px) {
  .ueber-uns-page { --fc-section: 64px; --fc-section-lg: 80px; --fc-section-sm: 56px; --fc-body: 17px; --fc-lead: 19px; }
  .ueber-uns-page .ueber-uns-hero .page-hero__panel h1 { font-size: clamp(54px, 11vw, 72px); }
  .ueber-uns-page .ueber-uns-hero .page-hero__lead { margin-top: 20px; }
  .ueber-uns-page .ueber-uns-wer .statement { font-size: clamp(34px, 6.7vw, 44px); line-height: 1.16; padding-left: 20px; }
  .ueber-uns-page .ueber-uns-story__stations { margin-top: 32px; }
  .ueber-uns-page .ueber-uns-story__stations .rows__item { padding-block: 24px; }
  .ueber-uns-page .ueber-uns-team__people, .ueber-uns-page .ueber-uns-wege__tiles { margin-top: 32px; }
  .ueber-uns-page .ueber-uns-team__person .people__name { margin-top: 20px; font-size: 30px; }
  .ueber-uns-page .ueber-uns-teil .fc-lead { font-size: var(--fc-lead); }
  .ueber-uns-page .ueber-uns-wege .tile__title { font-size: 32px; }
  .ueber-uns-page .fc-button { font-size: 20px; }
}


/* ===== Startseite nach About-Freigabe: dunkle Abschnitte und Bildrhythmus. ===== */
.home-page .statement-section__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.home-page .statement-section__text { font-size: clamp(44px, 4.45vw, 64px); line-height: 1.08; }
.home-page .statement-section__aside > p { font-size: 18px; line-height: 1.7; }
.home-page .statement-section__facts { margin-top: 36px; padding-top: 28px; }
.home-page .statement-fact dt { font-size: 40px; line-height: 1.1; }
.home-page .statement-fact dd { line-height: 1.6; }
.home-page .about-section .feature-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
.home-page .about-section .feature-block__media { position: sticky; top: 112px; aspect-ratio: 4 / 5; max-height: 700px; border-radius: 20px; }
.home-page .about-section .feature-block__media img { object-position: 58% 50%; }
.home-page .about-section .feature-block__rows h3 { font-size: 32px; line-height: 1.12; }
.home-page .about-section .feature-block__rows p { font-size: 17px; line-height: 1.7; }
.home-page .about-section .feature-block__rows li { padding-block: 24px; }
.home-page .intent-section__choice { font-family: var(--fc-font-body); font-size: 13px; letter-spacing: 0; text-transform: none; }
.home-page .intent-section__cta { border-radius: 999px; font-family: var(--fc-font-display); font-size: 24px; font-weight: 500; line-height: 1.2; }
.home-page .home-ways .tile__media { aspect-ratio: 4 / 3; }
.home-page .home-ways__card[href="/karriere"] .tile__media img { object-position: 65% 50%; }
.home-page .home-footer--contact .home-footer__layout { padding-block: 112px; }
.home-page .home-footer--contact .home-footer__copy { max-width: 880px; }
.home-page .home-footer h2 { font-size: clamp(48px, 5.4vw, 78px); font-weight: 400; }
.home-page .home-footer .home-footer__primary { font-size: 21px; }
.home-page .home-footer__lead { font-size: 20px; }
@media (min-width: 1900px) {
  .home-page .statement-section__text { font-size: 76px; }
}
@media (max-width: 991px) {
  .home-page .statement-section__grid { grid-template-columns: 1fr; gap: 36px; }
  .home-page .about-section .feature-block { grid-template-columns: 1fr; gap: 40px; }
  .home-page .about-section .feature-block__media { position: relative; top: auto; max-width: none; width: 100%; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .home-page .statement-section__text { font-size: 44px; }
  .home-page .statement-section__aside > p { font-size: 17px; }
  .home-page .about-section .feature-block__rows h3 { font-size: 30px; }
  .home-page .about-section .feature-block__rows p { font-size: 16px; }
  .home-page .home-footer--contact .home-footer__layout { padding-block: 72px; }
  .home-page .home-footer__lead { font-size: 18px; }
}

/* Politur nach Desktop-/Mobil-Sichtung: Originalsymbol, Pille wie About, kompakter Mobil-Hero. */
.home-page .fc-button { border-radius: 999px; min-height: 58px; }
.home-page .about-section .feature-block__head h2 { font-size: clamp(40px, 4.45vw, var(--fc-h2)); line-height: 1.04; }
.home-page .about-section .feature-block__head .fc-button { font-size: 21px; min-height: 58px; border-radius: 999px; }
.home-page .about-section .feature-block__media { aspect-ratio: 5 / 4; height: auto; min-height: 0; max-height: none; }
@media (max-width: 991px) {
  .home-page .about-section .feature-block__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
}
/* Durchgehende Kartenbuehne: Typografie und Schadenparameter auf derselben Flaeche. */
.home-page main:has(> .home-map-hero) { margin-top: 0; border-radius: 0; }
.home-page .home-map-hero { position: relative; margin-top: var(--fc-header-h); isolation: isolate; }
.home-page .home-map-hero__map { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.home-page .home-map-hero__map img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.home-page .home-map-hero__map::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.home-page .home-map-hero__stage { position: relative; max-width: 1720px; min-height: 740px; margin-inline: auto; display: flex; align-items: center; padding: 76px max(var(--fc-edge), calc((100vw - 1320px) / 2)); }
.home-page .home-map-hero__copy { container-type: inline-size; width: 56%; position: relative; z-index: 2; }
.home-page .home-map-hero .fc-kicker { margin-bottom: 28px; font-size: 12px; line-height: 1.5; }
.home-page .home-map-hero h1 { font-size: clamp(46px, 13.2cqi, 100px); line-height: 1; font-weight: 500; letter-spacing: 0; text-wrap: initial; max-width: none; }
.home-page .home-map-hero h1 span { display: block; }
.home-page .home-map-hero__lead { max-width: 47ch; margin-top: 28px; font-size: 18px; line-height: 1.75; }
.home-page .home-map-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.home-page .home-map-hero .fc-button { min-height: 58px; font-size: 21px; padding: 13px 26px 11px; }
.home-page .home-map-hero__scope { display: flex; align-items: center; gap: 16px; margin-top: 40px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.home-page .home-map-hero__cases { position: absolute; inset: 0; pointer-events: none; }
.home-page .home-map-hero__legend { position: absolute; right: 60px; bottom: 44px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.home-page .home-map-case { position: absolute; width: 254px; }
.home-page .home-map-case--water { top: 140px; right: 56px; }
.home-page .home-map-case--fire { bottom: 124px; right: 138px; }
.home-page .home-map-case__panel { position: relative; border-radius: 12px; padding: 22px 24px 20px; }
.home-page .home-map-case__top { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.home-page .home-map-case__top span:last-child { padding: 4px 8px; border-radius: 4px; }
.home-page .home-map-case h2 { margin-top: 16px; font-size: 32px; font-weight: 500; line-height: 1; }
.home-page .home-map-case dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 18px 0 0; padding-top: 14px; }
.home-page .home-map-case dt { font-size: 10px; line-height: 1.5; }
.home-page .home-map-case dd { margin: 6px 0 0; font-size: 12px; font-weight: 500; line-height: 1.4; }
.home-page .home-map-case dl > div:last-child { text-align: right; }
.home-page .home-map-case dl > div:last-child dd { white-space: nowrap; font-family: var(--fc-font-display); font-size: 25px; font-weight: 400; line-height: .9; }
.home-page .home-map-case dl > div:last-child dd span { font-size: 18px; }
.home-page .home-map-case__anchor { position: absolute; width: 12px; height: 12px; top: 96px; }
.home-page .home-map-case--water .home-map-case__anchor { left: -88px; }
.home-page .home-map-case--fire .home-map-case__anchor { right: -88px; }
.home-page .home-map-case__pin, .home-page .home-map-case__halo { position: absolute; inset: 0; border-radius: 50%; }
.home-page .home-map-case__halo { inset: -10px; }
.home-page .home-map-case__leader { position: absolute; top: 47px; width: 88px; height: 60px; overflow: visible; }
.home-page .home-map-case--water .home-map-case__leader { left: -82px; }
.home-page .home-map-case--fire .home-map-case__leader { right: -82px; }
/* Fachgebiete: Bild und Inhalt als zusammenhaengende Leistungsbereiche. */
.home-page .home-services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.home-page .home-services .home-services__card { display: flex; grid-row: auto; padding: 0; border-radius: 20px; overflow: hidden; }
.home-page .home-services__overview { display: block; grid-row: auto; }
.home-page .home-services__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.home-page .home-services__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--fc-ease); }
.home-page .home-services__overview:hover .home-services__media img { transform: scale(1.035); }
.home-page .home-services__summary { display: block; padding: 32px 36px 28px; }
.home-page .home-services .card__title { font-size: clamp(36px, 3.1vw, 46px); font-weight: 400; line-height: 1.06; }
.home-page .home-services .card__text { font-size: 16px; line-height: 1.7; min-height: 5.1em; }
.home-page .home-services__packages, .home-page .home-services__tandem { margin-top: auto; padding: 0 36px 32px; }
.home-page .home-services__tandem h4 { padding-top: 20px; }
.home-page .home-services__event { padding: 32px 36px; border-radius: 20px; }
@media (min-width: 1900px) {
  .home-page .home-map-hero__stage { min-height: 840px; padding-inline: 80px; }
  .home-page .home-map-hero h1 { font-size: 112px; }
  .home-page .home-map-hero__lead { font-size: 21px; }
  .home-page .home-map-case { width: 280px; }
  .home-page .home-map-case--water { right: 64px; top: 156px; }
  .home-page .home-map-case--fire { right: 164px; bottom: 148px; }
}
@media (max-width: 991px) {
  .home-page .home-map-hero__stage { display: block; padding: 64px var(--fc-edge) 48px; min-height: 0; }
  .home-page .home-map-hero__copy { width: 100%; }
  .home-page .home-map-hero h1 { font-size: clamp(60px, 8.4vw, 80px); }
  .home-page .home-map-hero__lead { max-width: 63ch; }
  .home-page .home-map-hero__cases { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; padding: 0 20px 0 52px; }
  .home-page .home-map-hero__legend { right: 20px; bottom: -24px; }
  .home-page .home-map-case { position: relative; inset: auto; width: 100%; }
  .home-page .home-map-case--water .home-map-case__anchor { left: -34px; }
  .home-page .home-map-case--fire .home-map-case__anchor { right: -26px; }
  .home-page .home-map-case__leader { width: 34px; }
  .home-page .home-map-case--water .home-map-case__leader { left: -28px; }
  .home-page .home-map-case--fire .home-map-case__leader { right: -20px; width: 26px; }
  .home-page .home-services__summary { padding: 28px; }
  .home-page .home-services__packages, .home-page .home-services__tandem { padding: 0 28px 28px; }
}
@media (max-width: 767px) {
  .home-page .home-map-hero__stage { padding: 44px var(--fc-edge) 52px; }
  .home-page .home-map-hero .fc-kicker { font-size: 10px; margin-bottom: 24px; }
  .home-page .home-map-hero h1 { font-size: clamp(42px, 10.7vw, 64px); }
  .home-page .home-map-hero__lead { font-size: 17px; line-height: 1.65; margin-top: 24px; }
  .home-page .home-map-hero__actions { gap: 10px; margin-top: 26px; }
  .home-page .home-map-hero .fc-button { min-height: 52px; padding-inline: 22px; font-size: 20px; }
  .home-page .home-map-hero__scope { margin-top: 28px; font-size: 10px; }
  .home-page .home-map-hero__cases { grid-template-columns: 1fr; margin-top: 48px; gap: 20px; padding: 0 24px 0 32px; }
  .home-page .home-map-hero__legend { right: 24px; bottom: -28px; font-size: 9px; }
  .home-page .home-map-case__panel { padding: 18px 20px; }
  .home-page .home-map-case h2 { font-size: 30px; margin-top: 12px; }
  .home-page .home-map-case dl { margin-top: 14px; padding-top: 12px; }
  .home-page .home-services__grid { grid-template-columns: 1fr; gap: 28px; }
  .home-page .home-services .card__text { min-height: 0; }
  .home-page .home-services .card__title { font-size: 36px; }
  .home-page .home-services__event { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .home-services__media img { transition: none; }
  .home-page .home-services__overview:hover .home-services__media img { transform: none; }
}

.home-page .intent-section__intro h2 { hyphens: none; text-wrap: pretty; }

/* Fairly geographic hero, 09.09.2026: approved Teko / Work Sans. */
.home-page .home-globe__copy h1 { font-size: clamp(58px, 6.65vw, 118px); line-height: .99; }
.home-page .home-globe__lead { font-size: clamp(17px, 1.3vw, 22px); line-height: 1.65; }
.home-page .home-globe__scope { font-size: 11px; }
.home-page .home-globe__story h2 { font-size: clamp(54px, 5.9vw, 106px); line-height: 1.02; }
.home-page .home-globe__story p:last-child { font-size: 19px; line-height: 1.65; }
.home-page .home-globe__label { font-size: 13px; }
.home-page .home-globe__label span, .home-page .home-globe__destination div > span { font-size: 11px; }
.home-page .home-globe__track { font-size: 10px; }
.home-page .home-globe__skip { font-size: 12px; }
@media (max-width: 991px) {
 .home-page .home-globe__copy h1 { font-size: clamp(54px, 8.4vw, 76px); }
 .home-page .home-globe__lead { font-size: 17px; }
 .home-page .home-globe__story h2 { font-size: 64px; }
}
@media (max-width: 767px) {
 .home-page .home-globe__copy h1 { font-size: clamp(44px, 10.7vw, 64px); line-height: 1.02; }
 .home-page .home-globe__lead { font-size: 15px; line-height: 1.6; }
 .home-page .home-globe__copy .fc-kicker { font-size: 10px; }
 .home-page .home-globe__story h2 { font-size: 48px; }
 .home-page .home-globe__story p:last-child { font-size: 17px; }
 .home-page .home-globe__label { font-size: 11px; }
 .home-page .home-globe__label span { font-size: 9px; }
 .home-page .home-globe__track { font-size: 8px; }
}

/* Static Germany hero, simplified after the scroll prototype. */
.home-page .home-calm h1 { font-size: clamp(58px,6.65vw,118px); line-height: .99; }
.home-page .home-calm__lead { font-size: clamp(17px,1.3vw,22px); line-height: 1.65; }
.home-page .home-calm__scope { font-size: 11px; }
.home-page .home-calm__case > p { font-size: 10px; }
.home-page .home-calm__case h2 { font-size: 36px; line-height: 1.1; }
.home-page .home-calm__case dt { font-size: 11px; }
.home-page .home-calm__case dd { font-size: 15px; }
@media (max-width: 991px) {
 .home-page .home-calm h1 { font-size: clamp(54px,8.4vw,76px); }
 .home-page .home-calm__lead { font-size: 17px; }
}
@media (max-width: 767px) {
 .home-page .home-calm h1 { font-size: clamp(44px,10.7vw,64px); line-height: 1.02; }
 .home-page .home-calm__lead { font-size: 15px; line-height: 1.6; }
 .home-page .home-calm .fc-kicker { font-size: 10px; }
 .home-page .home-calm__case h2 { font-size: 32px; }
}


/* ===== Unterseiten: Rhythmus und Bildsprache der About-Freigabe. ===== */
.subpage-design { --fc-section: 112px; --fc-section-lg: 128px; --fc-section-sm: 80px; }
.subpage-design .statement { max-width: 1120px; }
.subpage-design .fc-copy { line-height: 1.75; }
.subpage-design .feature .fc-lead { max-width: 42ch; font-size: 20px; line-height: 1.65; }
.subpage-design :is(.community-kopf, .academy-kopf, .karriere-kopf) { align-items: end; }
.subpage-design :is(.community-kopf, .academy-kopf, .karriere-kopf) + * { margin-top: 48px; }
.subpage-design .rows--stations .rows__item { padding-block: 28px; }
.subpage-design .rows--stations .rows__label { font-weight: 600; line-height: 1.5; }
.subpage-design .rows--stations .rows__text { margin-top: 10px; line-height: 1.7; }
/* Academy-Module (11.09.2026): Modultitel in Teko statt Stationen-Label, die verschachtelte Spec (Themen, Lernpfade)
   bleibt so kompakt wie in den Lernpfad-Karten. */
.subpage-design .academy-module__rows > .rows__item > .rows__label { font-weight: 400; line-height: 1.1; }
.subpage-design .academy-modul__spec .rows__item { padding-block: 10px; }
.subpage-design .academy-modul__spec .rows__label { font-weight: 500; line-height: 1.5; }
.subpage-design .academy-modul__spec .rows__text { margin-top: 0; line-height: 1.5; }
.subpage-design :is(.academy-weiter__tiles, .kontakt-weiter__tiles) { margin-top: 40px; }
.subpage-design .cta-panel:not(.cta-panel--media) { padding: 80px 72px; }
.subpage-design .cta-panel--media > .cta-block--solo { padding: 80px 64px; }
.subpage-design .cta-panel h2 { max-width: 20ch; }
.subpage-design .legal-page__head { max-width: 880px; margin-bottom: 40px; padding-bottom: 40px; }
.subpage-design .legal-page__body { max-width: 880px; padding: 40px; line-height: 1.75; }
.subpage-design .legal-page__body h2 { margin-top: 40px; }
.subpage-design .legal-page__body h2:first-child { margin-top: 0; }
@media (min-width: 1900px) {
  .subpage-design { --fc-section: 132px; --fc-section-lg: 152px; --fc-section-sm: 96px; }
  .subpage-design .statement { max-width: 1280px; }
  .subpage-design .feature .fc-lead { font-size: 22px; }
}
@media (max-width: 991px) {
  .subpage-design { --fc-section: 88px; --fc-section-lg: 104px; --fc-section-sm: 64px; }
  .subpage-design .page-hero--bleed[data-nav="dark"] { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .subpage-design .page-hero--bleed .page-hero__panel { padding: calc(var(--fc-header-h) + 48px) var(--fc-edge) 48px; }
  .subpage-design .page-hero--bleed .page-hero__panel::before { content: none; }
  .subpage-design .page-hero--bleed .page-hero__media { position: relative; min-height: 0; aspect-ratio: 16 / 9; }
  .subpage-design .page-hero--bleed .page-hero__panel h1 { max-width: 760px; }
  .subpage-design .page-hero--bleed .page-hero__panel .page-hero__lead { max-width: 60ch; }
  .subpage-design .cta-panel:not(.cta-panel--media), .subpage-design .cta-panel--media > .cta-block--solo { padding: 56px 40px; }
}
@media (max-width: 767px) {
  .subpage-design { --fc-section: 64px; --fc-section-lg: 80px; --fc-section-sm: 56px; }
  .subpage-design .page-hero--bleed .page-hero__panel { padding-top: calc(var(--fc-header-h) + 40px); padding-bottom: 40px; }
  .subpage-design .page-hero--bleed .page-hero__panel .page-hero__lead { margin-top: 20px; }
  .subpage-design .feature .fc-lead { font-size: var(--fc-lead); }
  .subpage-design :is(.community-kopf, .academy-kopf, .karriere-kopf) + *,
  .subpage-design :is(.academy-weiter__tiles, .kontakt-weiter__tiles) { margin-top: 32px; }
  .subpage-design .rows--stations .rows__item { padding-block: 24px; }
  .subpage-design .academy-modul__spec .rows__item { padding-block: 10px; }
  .subpage-design .cta-panel:not(.cta-panel--media), .subpage-design .cta-panel--media > .cta-block--solo { padding: 48px 24px; }
  .subpage-design .legal-page__head { padding-bottom: 28px; margin-bottom: 28px; }
  .subpage-design .legal-page__body { padding: 28px 20px; }
}


/* Gemeinsame Button-Masse; kompakte Variante nur in Navigation und Karten. */
.brand-page:not(.home-page) .fc-button { min-height: 58px; padding: 14px 32px 12px; font-size: 21px; line-height: 1.2; text-align: center; white-space: normal; }
.brand-page:not(.home-page) .tile--compact .fc-button { min-height: 46px; padding: 10px 22px 8px; font-size: 19px; }
@media (max-width: 767px) {
  .brand-page:not(.home-page) .fc-button { min-height: 54px; padding: 13px 24px 11px; font-size: 20px; }
  .brand-page:not(.home-page) .tile--compact .fc-button { min-height: 46px; padding: 10px 22px 8px; font-size: 19px; }
}

.home-page .home-calm__notice { font-size: 13px; line-height: 1.5; font-weight: 500; }

/* Navigation nutzt dieselbe Pille in der kompakten Bediengroesse. */
:is(.brand-page, .home-page) .fc-header .fc-header__cta { min-height: 44px; padding: 10px 22px 8px; font-size: 18px; line-height: 1; white-space: nowrap; }

/* Navigation bleibt auch direkt oberhalb der mobilen Stufe einzeilig. */
:is(.brand-page, .home-page) .fc-header__inner { gap: clamp(12px, calc(4vw - 32px), 36px); }
:is(.brand-page, .home-page) .fc-header .fc-nav__link { white-space: nowrap; }
:is(.brand-page, .home-page) .fc-header .fc-nav__list--secondary { margin-left: clamp(4px, calc(4vw - 36px), 20px); padding-left: clamp(4px, calc(4vw - 36px), 20px); }
:is(.brand-page, .home-page) .fc-header { --fc-nav-pad: clamp(6px, calc(3vw - 24px), 14px); }
:is(.brand-page, .home-page) .fc-header .fc-nav__link--sm { padding-inline: clamp(6px, calc(2vw - 14px), 10px); }


/* Weitere Kategorie-Einstiege. Die freigegebenen Bildszenen folgen im eigenen Block. */
.subpage-design :is(.page-hero--editorial, .page-hero--service, .page-hero--catalog, .page-hero--utility) {
  min-height: 0; margin-top: 0; padding: calc(var(--fc-header-h) + 64px) var(--fc-edge) 64px;
}
.subpage-design .page-hero--editorial { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
.subpage-design .page-hero--editorial .page-hero__panel { padding-block: 24px; }
.subpage-design .page-hero--editorial .page-hero__panel h1 { max-width: 12ch; font-size: clamp(64px, 6.3vw, 104px); line-height: 1; }
.subpage-design .page-hero--editorial .page-hero__media { position: relative; inset: auto; height: clamp(360px, 32vw, 540px); min-width: 0; }
.subpage-design .page-hero--editorial .page-hero__media img { width: 100%; height: 100%; object-position: 50% 35%; }
.subpage-design .page-hero--editorial .page-hero__lead { max-width: 42ch; margin-top: 24px; font-size: var(--fc-lead); line-height: 1.6; }
.subpage-design .page-hero__actions { margin-top: 32px; }
.subpage-design .page-hero--service { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
.subpage-design .page-hero--service .leistung-breadcrumb { margin-bottom: 28px; }
.subpage-design .page-hero--service .page-hero__panel h1 { max-width: 100%; text-wrap: balance; font-size: clamp(52px, 5.3vw, 80px); line-height: 1.02; hyphens: manual; overflow-wrap: break-word; }
.subpage-design .page-hero--service .page-hero__lead { max-width: 54ch; margin-top: 24px; font-size: 19px; line-height: 1.65; }
.subpage-design .page-hero--service .page-hero__media { position: relative; inset: auto; min-width: 0; aspect-ratio: 4 / 3; }
.subpage-design .page-hero--service .page-hero__media img { position: absolute; width: 100%; height: 100%; object-position: center; }
.subpage-design :is(.page-hero--catalog, .page-hero--utility) .page-hero__panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 80px; align-items: end; }
.subpage-design .page-hero--catalog .leistung-breadcrumb { grid-column: 1 / -1; margin-bottom: 36px; }
.subpage-design :is(.page-hero--catalog, .page-hero--utility) .page-hero__panel h1 { max-width: 17ch; font-size: clamp(56px, 5.3vw, 80px); line-height: 1.02; }
.subpage-design :is(.page-hero--catalog, .page-hero--utility) .page-hero__lead { max-width: 48ch; margin: 0; font-size: 20px; line-height: 1.65; }
.subpage-design .page-hero__topics { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 40px; padding-top: 24px; font-size: 16px; line-height: 1.5; font-weight: 500; }
.subpage-design .page-hero--utility { padding-bottom: 40px; }
.subpage-design .page-hero--utility .page-hero__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.subpage-design .kontakt-thema { padding-top: 64px; }
@media (min-width: 1900px) {
  .subpage-design :is(.page-hero--service, .page-hero--catalog, .page-hero--utility) .page-hero__panel h1 { font-size: 92px; }
  .subpage-design .page-hero--service .page-hero__lead { font-size: 21px; }
}
@media (max-width: 991px) {
  .subpage-design :is(.page-hero--editorial, .page-hero--service, .page-hero--catalog, .page-hero--utility) { padding-top: calc(var(--fc-header-h) + 48px); padding-bottom: 48px; gap: 40px; }
  .subpage-design .page-hero--editorial { grid-template-columns: minmax(0, 1fr); }
  .subpage-design .page-hero--editorial .page-hero__panel { padding: 0; }
  .subpage-design .page-hero--editorial .page-hero__panel h1 { max-width: none; font-size: 72px; }
  .subpage-design .page-hero--editorial .page-hero__media { height: auto; aspect-ratio: 16 / 9; }
  .subpage-design .page-hero--editorial .page-hero__lead { max-width: 56ch; }
  .subpage-design .page-hero--service { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; }
  .subpage-design :is(.page-hero--catalog, .page-hero--utility) .page-hero__panel { column-gap: 40px; }
}
@media (max-width: 767px) {
  .subpage-design :is(.page-hero--editorial, .page-hero--service, .page-hero--catalog, .page-hero--utility) { padding-top: calc(var(--fc-header-h) + 36px); padding-bottom: 40px; }
  .subpage-design :is(.page-hero--editorial, .page-hero--service) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .subpage-design :is(.page-hero--editorial, .page-hero--service, .page-hero--catalog, .page-hero--utility) .page-hero__panel h1 { max-width: 100%; font-size: clamp(44px, 10.5vw, 64px); line-height: 1.04; }
  .subpage-design .page-hero--service .page-hero__media { aspect-ratio: 16 / 9; }
  .subpage-design :is(.page-hero--catalog, .page-hero--utility) .page-hero__panel { grid-template-columns: minmax(0, 1fr); }
  .subpage-design :is(.page-hero--catalog, .page-hero--utility) .page-hero__lead { margin-top: 20px; font-size: 18px; }
  .subpage-design .page-hero--service .page-hero__lead { font-size: 18px; margin-top: 20px; }
  .subpage-design .page-hero--catalog .leistung-breadcrumb { margin-bottom: 24px; }
  .subpage-design .page-hero__topics { margin-top: 28px; padding-top: 20px; gap: 14px 28px; font-size: 15px; }
  .subpage-design .kontakt-thema { padding-top: 40px; }
}

/* Leistungsuebersicht: die drei Bereiche bilden eine eigene typografische Navigation. */
.subpage-design .page-hero--catalog .page-hero__topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.subpage-design .page-hero--catalog .page-hero__topics a { font-family: var(--fc-font-display); font-size: 30px; font-weight: 400; line-height: 1.2; padding-block: 4px; text-decoration: none; }
.subpage-design .page-hero--catalog .page-hero__topics a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .subpage-design .page-hero--catalog .page-hero__topics { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .subpage-design .page-hero--catalog .page-hero__topics a { font-size: 26px; }
}

/* Remotion-Kartenszene: Beschriftung bleibt HTML in der Markentypografie. */
.home-page .home-calm__location { font-size: 10px; line-height: 1.4; font-weight: 500; }
.home-page .home-calm__notice strong { font-size: 32px; line-height: 1.1; }
.home-page .home-calm__status { font-size: 13px; line-height: 1.4; font-weight: 400; }
.home-page .home-calm__play { font-size: 11px; line-height: 1.5; }
.home-page .home-calm__credit { font-size: 9px; line-height: 1.5; }
@media (max-width: 767px) { .home-page .home-calm__credit { font-size: 8px; } }

/* Logo-Abschluss ersetzt den Kartenpunkt, ohne die Textspalte zu berühren. */
.home-page .home-calm__brand { width: clamp(340px, 30vw, 520px); }
@media (max-width: 991px) { .home-page .home-calm__brand { width: 340px; } }
@media (max-width: 767px) { .home-page .home-calm__brand { width: 276px; } }

/* Hero-Szenen Community / Academy: Abmessungen der Ueber-uns-Referenz.
   Ein Viewport Freilegen, danach deckt der normale Seiteninhalt den klebenden Hero ab. */
.hero-scrub--scene { --fc-scene-h: calc(var(--fc-hero-h) + var(--fc-header-h)); --fc-h1: 112px; }
.hero-scrub--scene.is-scrub { padding-top: 0; height: calc(var(--fc-scene-h) + 100vh + var(--fc-scene-h)); margin-bottom: calc(-1 * var(--fc-scene-h)); }
.subpage-design .page-hero--scene { height: var(--fc-scene-h); min-height: var(--fc-scene-h); margin: 0; padding: 0; }
.subpage-design .page-hero--scene .page-hero__scene-media { inset: 0; border-radius: 0; }
.subpage-design .page-hero--scene .page-hero__scene-media img { height: 100%; width: 100%; object-fit: cover; border-radius: 0; object-position: 50% 45%; }
.subpage-design .page-hero--scene .page-hero__scene-copy { left: var(--fc-edge); right: var(--fc-edge); gap: 80px; }
.subpage-design .page-hero--scene h1 { max-width: 100%; font-size: clamp(64px, 6.3vw, var(--fc-h1)); line-height: .98; }
.subpage-design .page-hero--scene .page-hero__lead { max-width: 45ch; margin: 0; font-size: var(--fc-lead); line-height: 1.6; }
.subpage-design .page-hero--scene .page-hero__actions { margin-top: 24px; }
.subpage-design .page-hero--panorama .page-hero__scene-copy { bottom: 88px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.page-hero--panorama .page-hero__scene-veil { inset: 58% 0 0; }
.subpage-design .page-hero--panorama .page-hero__lead { max-width: 30ch; }
.subpage-design .page-hero--opening .page-hero__scene-copy { top: calc(var(--fc-header-h) + 8%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; transform: translateY(calc(-350px * var(--scrub, 0))); }
.subpage-design .page-hero--opening .page-hero__scene-media { top: calc(max(47%, var(--fc-header-h) + 320px) * (1 - var(--scrub, 0))); left: calc(var(--fc-edge) * (1 - var(--scrub, 0))); right: calc(var(--fc-edge) * (1 - var(--scrub, 0))); bottom: calc(36px * (1 - var(--scrub, 0))); border-radius: calc(var(--fc-radius) * (1 - var(--scrub, 0))); }
.subpage-design .page-hero--opening .page-hero__scene-media img { object-position: 50% 49%; }
.page-hero__scene-caption { left: var(--fc-edge); bottom: 72px; padding: 18px 26px; border-radius: var(--fc-radius-sm); font-family: var(--fc-font-display); font-size: 32px; line-height: 1.1; }
.subpage-design .hero-scene-intro .statement { max-width: 1120px; padding: 0; font-size: var(--fc-h2); line-height: 1.08; letter-spacing: 0; }
@media (min-width: 1900px) { .hero-scrub--scene { --fc-h1: 130px; } }
@media (max-width: 991px) {
  .hero-scrub--scene { --fc-scene-h: calc(min(120vw, 80vh) + var(--fc-header-h)); }
  .subpage-design .page-hero--scene { height: auto; min-height: 0; }
  .subpage-design .page-hero--scene .page-hero__scene-copy { inset: auto; grid-template-columns: minmax(0, 1fr); gap: 24px; transform: none; }
  .subpage-design .page-hero--scene h1 { font-size: clamp(60px, 8vw, 80px); }
  .subpage-design .page-hero--panorama { min-height: var(--fc-scene-h); padding-top: calc(var(--fc-header-h) + 240px); }
  .subpage-design .page-hero--panorama .page-hero__scene-copy { padding: 48px var(--fc-edge); }
  .subpage-design .page-hero--opening { display: flex; flex-direction: column; padding-top: calc(var(--fc-header-h) + 48px); }
  .subpage-design .page-hero--opening .page-hero__scene-copy { order: 0; margin-inline: var(--fc-edge); }
  .subpage-design .page-hero--opening .page-hero__scene-media { order: 1; inset: auto; margin: 36px var(--fc-edge) 48px; aspect-ratio: 16 / 9; border-radius: var(--fc-radius); }
  .subpage-design .page-hero--opening .page-hero__scene-media img { display: block; }
}
@media (max-width: 767px) {
  .subpage-design .page-hero--scene h1 { font-size: clamp(54px, 11vw, 72px); }
  .subpage-design .page-hero--scene .page-hero__lead { font-size: 18px; }
  .subpage-design .page-hero--opening { padding-top: calc(var(--fc-header-h) + 40px); }
  .subpage-design .hero-scene-intro .statement { font-size: clamp(36px, 7vw, 48px); }
}

/* Erster Bildschirm: volle sichtbare Fensterhöhe, ohne angeschnittene Folgesektion. */
.home-page main { margin-top: 0; border-radius: 0; }
.home-page .home-calm { min-height: 100svh; }
.home-page .fc-footer__sources { font-size: 12px; line-height: 1.6; }

/* Home: Teko Medium; leichtere, dezent geneigte Akzentzeile (Laurence, 09.09.). */
.home-page .home-calm { padding-top: calc(var(--fc-header-h) + 56px); padding-bottom: 72px; }
.home-page .home-calm h1 { font-weight: 500; font-size: clamp(58px, 6.5vw, 116px); line-height: 1.04; letter-spacing: 0; }
/* Gerade Akzentzeile, bewusst leichter als die erste Zeile. */
.home-page .home-calm h1 > span { font-weight: 400; font-style: normal; transform: none; }
.home-page .home-calm__lead { margin-top: 30px; margin-bottom: 32px; }
@media (max-width: 991px) {
 .home-page .home-calm { padding-top: calc(var(--fc-header-h) + 48px); padding-bottom: 390px; }
 .home-page .home-calm h1 { font-size: clamp(54px, 8.2vw, 76px); }
}
@media (max-width: 767px) {
 /* H1 mobil luftiger (Laurence 26.10.): vorher 1.02 Zeilenabstand, wirkte gequetscht. */
 .home-page .home-calm h1 { font-size: clamp(42px, 12vw, 60px); line-height: 1.1; letter-spacing: .01em; }
 /* Mobil liest sich der Hero als Text, Film, Buttons (Laurence 26.10.): Karte in den Fluss, keine Leerfläche. */
 .home-page .home-calm { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-top: calc(var(--fc-header-h) + 36px); padding-bottom: 40px; }
 .home-page .home-calm__content { display: contents; }
 .home-page .home-calm__map { position: relative; inset: auto; order: 2; height: 280px; margin: 4px calc(var(--fc-edge) * -1) 20px; }
 .home-page .home-calm__content .fc-actions { order: 3; }
 .home-page .home-calm__lead { margin-top: 24px; margin-bottom: 0; }
}

/* Community-Kapitel: kurze Lesepause, ein seitlicher Wechsel, dann wieder normaler Seitenfluss. */
.story-shift { --story-height: calc(100vh - var(--fc-header-h)); --story-hold: 35vh; --story-travel: 140vh; --story-settle: 18vh; }
.story-shift.is-active { height: calc(var(--story-height) + var(--story-hold) + var(--story-travel) + var(--story-settle)); }
.story-shift.is-active .story-shift__stage { top: var(--fc-header-h); height: var(--story-height); }
.story-shift.is-active .story-shift__stage > .sec { inset: 0; height: 100%; padding-block: 64px; }
.story-shift.is-active .story-shift__intro::before { inset: 0 0 0 auto; width: 1px; }
.story-shift.is-active .fc-container { width: 100%; }

/* Gemeinsames Tempo: kurze Lesepause, danach deckt die naechste Flaeche den Bildschirm ab. */
.scroll-chapter { --chapter-window: calc(100vh - var(--fc-header-h)); --chapter-hold: 12vh; }
.scroll-chapter.is-active { height: calc(var(--chapter-size) + var(--chapter-hold) + var(--chapter-window)); margin-bottom: calc(-1 * var(--chapter-window)); }
.scroll-chapter.is-active > .scroll-chapter__panel { top: var(--chapter-top); min-height: var(--chapter-window); }
.has-scroll-chapters .scroll-chapter__guide { top: calc(var(--fc-header-h) + 32px); }
/* Nach dem seitlichen Kapitel bleibt das letzte Bild stehen, bis die Vorteile es abdecken. */
.has-scroll-chapters .story-shift.is-active { height: calc(var(--story-height) * 2 + var(--story-hold) + var(--story-travel) + var(--story-settle)); margin-bottom: calc(-1 * var(--story-height)); }

/* Gefuehrte Karten: eine ruhige Folge rechts neben der stehenden Ueberschrift. */
.has-scroll-chapters .scroll-chapter--guided .split > .card-grid { grid-template-columns: minmax(0, 1fr); }
.has-scroll-chapters .scroll-chapter--guided .split > .card-grid > .card { min-height: 180px; }

/* Freigegebene gemeinsame Hero-Geometrie, 09.09.: About als Massstab. */
.subpage-design .page-hero--brand-bleed { --fc-h1: 112px; }
.subpage-design .page-hero--brand-bleed .page-hero__panel { padding-top: calc(var(--fc-header-h) + 40px); }
.subpage-design .page-hero--brand-bleed .page-hero__panel h1 { max-width: 100%; font-size: clamp(64px, 6.3vw, var(--fc-h1)); line-height: .98; text-wrap: balance; }
.subpage-design .page-hero--brand-bleed .page-hero__lead { max-width: 42ch; margin-top: 24px; line-height: 1.6; }
.page-hero--brand-bleed .leistung-breadcrumb { margin-bottom: 24px; }
.page-hero--brand-bleed .page-hero__topics { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; padding-top: 24px; }
.page-hero--brand-bleed .page-hero__topics a { font-size: 18px; }
main:has(> .page-hero--welcome) { margin-top: 0; border-radius: 0; }
.subpage-design .page-hero--welcome { padding: calc(var(--fc-header-h) + 72px) var(--fc-edge) 48px; min-height: 0; }
.page-hero--welcome .page-hero__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 72px; align-items: center; }
.subpage-design .page-hero--welcome h1 { font-size: clamp(64px, 6.3vw, 112px); line-height: .98; max-width: 100%; }
.page-hero--welcome .page-hero__lead { margin: 0; max-width: 42ch; font-size: var(--fc-lead); line-height: 1.6; }
.page-hero--welcome .page-hero__topics { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 8px; padding-top: 24px; }
.page-hero--welcome .page-hero__topics a { font-family: var(--fc-font-display); font-size: 24px; text-underline-offset: 5px; }
.page-hero--welcome .page-hero__media { inset: auto; height: clamp(260px, 24vw, 420px); margin-top: 40px; }
.page-hero--welcome .page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 1900px) {
 .subpage-design .page-hero--brand-bleed { --fc-h1: 130px; }
 .subpage-design .page-hero--welcome h1 { font-size: clamp(64px, 6.3vw, 130px); }
}
@media (max-width: 991px) {
 .subpage-design .page-hero--brand-bleed .page-hero__panel h1 { font-size: clamp(60px, 8vw, 80px); }
 .subpage-design .page-hero--welcome { padding-top: calc(var(--fc-header-h) + 48px); }
 .page-hero--welcome .page-hero__panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .subpage-design .page-hero--welcome h1 { font-size: clamp(60px, 8vw, 80px); }
 .page-hero--welcome .page-hero__media { height: auto; aspect-ratio: 16 / 7; }
}
@media (max-width: 767px) {
 .subpage-design .page-hero--brand-bleed .page-hero__panel h1, .subpage-design .page-hero--welcome h1 { font-size: clamp(54px, 11vw, 72px); }
 .subpage-design .page-hero--welcome { padding-top: calc(var(--fc-header-h) + 40px); padding-bottom: 32px; }
 .page-hero--welcome .page-hero__topics { gap: 12px 24px; padding-top: 20px; }
 .page-hero--welcome .page-hero__topics a { font-size: 22px; }
 .page-hero--welcome .page-hero__media { aspect-ratio: 4 / 3; margin-top: 32px; }
 .page-hero--welcome .page-hero__lead { font-size: 18px; }
}

/* Hintergrundanimation: kompakte, tastaturbedienbare Pausenfunktion. */
.home-page .home-footer__motion-toggle { width: 44px; height: 44px; }

/* Ein Produktmass auch fuer lange Titel auf schmalen Desktop-Fenstern. Mobil waechst der Inhalt frei. */
.subpage-design .page-hero--brand-bleed[data-nav="dark"] { min-height: max(calc(var(--fc-hero-h) + var(--fc-header-h)), 880px); }
.geschaedigte-hero.page-hero--welcome .page-hero__media img { object-position: center top; }
@media (max-width: 991px) {
 .subpage-design .page-hero--brand-bleed[data-nav="dark"] { min-height: 0; }
 .partner-werden-hero .page-hero__scene-media img { object-position: 28% 45%; }
}

/* Produktfamilie: dieselbe Hero-Hoehe und Schriftgroesse wie Community. */
.subpage-design .page-hero--product .page-hero__scene-copy { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; align-items: end; }
.page-hero--product .page-hero__scene-copy::before { inset: -48px calc(-1 * var(--fc-edge)) -88px; }
.subpage-design .page-hero--product .page-hero__lead { max-width: 44ch; }
.page-hero--product .page-hero__product-links { gap: 12px 24px; margin-top: 24px; padding-top: 20px; }
.page-hero--product .page-hero__product-links a { font-size: 23px; text-underline-offset: 5px; }
.page-hero--product .page-hero__scene-media img { object-position: center top; }
@media (max-width: 991px) {
 .subpage-design .page-hero--product .page-hero__scene-copy { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .page-hero--product .page-hero__scene-media img { object-position: 58% top; }
}
@media (max-width: 767px) {
 .page-hero--product .page-hero__product-links { gap: 10px 20px; }
 .page-hero--product .page-hero__product-links a { font-size: 21px; }
}

.home-page .home-ending__motion { width: 44px; height: 44px; }


/* Mobile: Motiv im Footer begrenzen, damit der lange Linkbereich es nicht aufzieht. */
@media (max-width: 767px) {
  .home-page .home-ending--graphite .home-ending__media { top: auto; height: 520px; max-height: 100%; }
}

/* Startseite: ausgewogener Abschluss des Heros und zusammengefasste Zusatzleistungen. */
.home-page .home-calm__brand { width: clamp(280px, 27vw, 440px); }
.home-page .home-services__extras { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); gap: 64px; padding-top: 40px; }
.home-page .home-services__extras-head { display: block; margin: 0; }
.home-page .home-services__extras-head p { margin-top: 16px; max-width: 28ch; }
.home-page .home-services__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding-block: 24px; border-top: 0; }
.home-page .home-services__row-text { grid-column: 1; }
.home-page .home-services__row > .home-services__action { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 991px) { .home-page .home-services__extras { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 767px) { .home-page .home-calm__brand { width: 276px; } }

/* Kurze, geordnete Gespraechsauswahl statt unterschiedlich breiter Textpillen. */
.home-page .intent-section__grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 80px; }
.home-page .intent-section__choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.home-page .intent-section__choice { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 16px 18px; border-radius: 12px; font-size: 15px; line-height: 1.4; }
.home-page .intent-section__choice::before { width: 14px; height: 14px; flex: 0 0 14px; }
.home-page .intent-section__result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 28px; }
.home-page .intent-section__result > p { display: block; flex: 1 1 200px; margin: 0; font-size: 15px; line-height: 1.5; font-weight: 400; }
.home-page .intent-section__cta { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 18px; width: auto; max-width: 100%; min-height: 52px; padding: 12px 22px; font-family: var(--fc-font-body); font-size: 15px; line-height: 1.4; font-weight: 500; }
.home-page .home-ways .tile__media { aspect-ratio: auto; height: clamp(340px,28vw,420px); }
.home-page .home-ways .tile__media img { width: 100%; height: 100%; object-fit: cover; }
.home-page .home-services__disclosure summary { min-height: 72px; padding: 18px 0; gap: 24px; font-size: 28px; line-height: 1.2; }
.home-page .home-services__disclosure summary i { width: 20px; height: 20px; }
.home-page .home-services__disclosure summary i::before,.home-page .home-services__disclosure summary i::after { width: 16px; height: 1px; top: 9px; left: 2px; }
.home-page .home-services__answer { padding: 0 36px 24px 0; font-size: 16px; line-height: 1.65; }
.home-page .home-services__answer a { min-height: 44px; margin-top: 8px; gap: 14px; font-size: 14px; }
@media (max-width: 991px) { .home-page .intent-section__grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 767px) {
 .home-page .home-ways .tile__media { height: 340px; }
 .home-page .intent-section__choice { padding: 14px; font-size: 14px; }
 .home-page .intent-section__result { align-items: flex-start; }
 .home-page .home-services__disclosure summary { font-size: 25px; }
}
@media (max-width: 479px) { .home-page .intent-section__choices { grid-template-columns: 1fr; } }

/* Persoenlicher Kontakt als zusammenhaengende, begrenzte Einheit. */
.home-page .intent-section--direct .intent-section__grid { width: calc(100% - 2 * var(--fc-edge)); max-width: 920px; margin-inline: auto; grid-template-columns: 220px minmax(0,1fr); align-items: center; gap: 64px; }
.home-page .intent-section--direct .intent-section__intro h2 { max-width: 18ch; font-size: clamp(48px,4.2vw,60px); line-height: 1.05; }
.home-page .intent-section--direct .intent-section__intro > p:not(.fc-kicker) { max-width: 43ch; margin-top: 22px; }
.home-page .intent-section__contact { display: flex; justify-content: center; align-items: center; }
.home-page .intent-section--direct .intent-section__cta { min-height: 52px; margin-top: 28px; padding: 14px 24px; gap: 24px; font-size: 15px; }
@media (max-width: 991px) { .home-page .intent-section--direct .intent-section__grid { grid-template-columns: 180px minmax(0,1fr); gap: 40px; } }
@media (max-width: 767px) {
 .home-page .intent-section--direct .intent-section__grid { grid-template-columns: 1fr; gap: 30px; max-width: 520px; text-align: center; }
 .home-page .intent-section--direct .intent-section__intro h2 { margin-inline: auto; font-size: 44px; }
 .home-page .intent-section--direct .intent-section__intro > p:not(.fc-kicker) { margin-inline: auto; }
}

.home-page .home-services__extras .home-services__row-title { font-size: 28px; line-height: 1.2; }
.home-page .home-services__extras .home-services__action { font-size: 22px; }
@media (max-width: 767px) { .home-page .home-services__extras .home-services__row-title { font-size: 25px; } }

 .contact-person { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.contact-person__avatar { display: block; width: 192px; height: 192px; flex: 0 0 192px; border-radius: 50%; overflow: hidden; }
.contact-person__portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: scale(1.4); transform-origin: 50% 18%; }
.contact-person__info { min-width: 0; }
.contact-person__name { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 400; }
.contact-person__role { margin: 5px 0 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 991px) { .contact-person__avatar { width: 164px; height: 164px; flex-basis: 164px; } }
@media (max-width: 767px) {
 .contact-person { gap: 14px; }
 .contact-person__avatar { width: 136px; height: 136px; flex-basis: 136px; }
 .contact-person__name { font-size: 26px; }
}


/* Ohne JavaScript bleiben Navigation und Lernpfade vollständig erreichbar (auch im Home-System). */
html:not(.js) .fc-header__burger { display: none; }
html:not(.js) .fc-mobile-nav[hidden] { display: block; position: relative; inset: auto; min-height: 0; margin-top: var(--fc-header-h); }
html:not(.js) .fold__panel { grid-template-rows: 1fr; }
html:not(.js) .fold__head { cursor: default; }
html:not(.js) .fold__head i, html:not(.js) .fold__toggle { display: none; }

/* Academy: Bild und Text müssen in die Szene passen, sonst wachsen sie im natürlichen Lesefluss. */
.hero-scrub--opening { --fc-scene-min-image: 240px; --fc-scene-copy-gap: 32px; }
.subpage-design .hero-scrub--opening:not(.is-scrub) .page-hero--opening { display: flex; flex-direction: column; height: auto; min-height: 0; padding-top: calc(var(--fc-header-h) + 48px); }
.subpage-design .hero-scrub--opening:not(.is-scrub) .page-hero__scene-copy { position: relative; inset: auto; order: 0; margin-inline: var(--fc-edge); transform: none; opacity: 1; }
.subpage-design .hero-scrub--opening:not(.is-scrub) .page-hero__scene-media { position: relative; order: 1; flex: none; inset: auto; width: calc(100% - 2 * var(--fc-edge)); height: auto; margin: 36px var(--fc-edge) 48px; aspect-ratio: 16 / 9; border-radius: var(--fc-radius); }
.hero-scrub--opening:not(.is-scrub) .page-hero__scene-caption { display: none; }
@media (max-width: 767px) {
 .subpage-design .hero-scrub--opening:not(.is-scrub) .page-hero--opening { padding-top: calc(var(--fc-header-h) + 40px); }
}

/* Produktpanorama: dieselbe Bild-/Textanordnung, bei kurzen Fenstern genug natürliche Höhe für den Lead. */
.subpage-design .page-hero--product { display: grid; align-items: end; height: auto; min-height: var(--fc-scene-h); padding: calc(var(--fc-header-h) + 48px) 0 88px; }
.subpage-design .page-hero--product .page-hero__scene-copy { position: relative; inset: auto; margin-inline: var(--fc-edge); }
@media (max-width: 991px) {
 .subpage-design .page-hero--product { display: block; padding: calc(var(--fc-header-h) + 240px) 0 0; }
 .subpage-design .page-hero--product .page-hero__scene-copy { margin-inline: 0; }
}

/* Mobilnavigation: gemeinsame Geometrie für Startseite und Unterseiten. */
.fc-mobile-nav { inset: var(--fc-header-h) 0 auto; height: calc(100svh - var(--fc-header-h)); height: calc(100dvh - var(--fc-header-h)); min-height: 0; padding: 0; }
.fc-mobile-nav__body { padding: 24px var(--fc-gutter) 16px; }
.fc-mobile-nav__label { margin: 0 0 12px; font-size: 11px; line-height: 1.5; }
.fc-mobile-nav .fc-mobile-nav__row { min-height: 58px; padding: 8px 12px; gap: 16px; font-size: 32px; line-height: 1.2; }
.fc-mobile-nav__row i { width: 16px; height: 16px; margin-right: 2px; }
.fc-mobile-nav__row i::before { width: 16px; height: 1.5px; left: 0; top: 7px; }
.fc-mobile-nav__row i::after { width: 1.5px; height: 16px; left: 7px; top: 0; }
.fc-mobile-nav__links { padding: 0 0 12px 12px; }
.fc-mobile-nav .fc-mobile-nav__links a { min-height: 48px; padding: 10px 12px; font-size: 16px; line-height: 1.5; }
.fc-mobile-nav .fc-mobile-nav__help { min-height: 52px; gap: 4px 12px; padding: 16px 12px 0; font-size: 14px; line-height: 1.5; }
.fc-mobile-nav .fc-mobile-nav__help span { font-size: 12px; }
.fc-mobile-nav__footer { padding: 16px var(--fc-gutter) max(8px, env(safe-area-inset-bottom)); }
.fc-mobile-nav a.fc-mobile-nav__cta { min-height: 52px; padding: 12px 20px; font-size: 25px; line-height: 1.15; }
.fc-mobile-nav a.fc-mobile-nav__phone { min-height: 44px; padding: 10px; font-size: 13px; line-height: 1.5; }
html:not(.js) .fc-mobile-nav[hidden] { height: auto; }
html:not(.js) .fc-mobile-nav__body { overflow: visible; }

/* Startseite, mobiler Lesefluss: stabile Bildplätze und voneinander freie Abschnitte. */
.home-page .home-testimonial__portrait { flex: none; width: 100%; aspect-ratio: 4 / 3; }
.home-page .home-testimonial__portrait img { position: absolute; inset: 0; }
@media (max-width: 991px) {
  .home-page .home-state-network__heading { grid-template-columns: 1fr; gap: 24px; }
  .home-page .home-state-network__heading > p { max-width: 40em; }
  .home-page .home-state-network__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Mobil (Laurence 26.10.): Text, ruhige Karte, darunter die drei Schritte als ruhige Liste. Die Karte wechselt
     alle 5 s selbst (js/network-states.js, .is-autoplay); der laufende Schritt ist voll sichtbar und hat einen
     Fortschrittsbalken, die anderen sind gedimmt. Kein Wischen, nichts klebt. */
  .home-page .home-state-network__layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .home-page .home-state-network__panel { display: contents; }
  .home-page .home-state-network__panel > :not(.home-state-network__steps, .home-state-network__service-link) { order: 1; }
  .home-page .home-state-network__figure { order: 2; position: relative; top: auto; width: 100%; max-width: 520px; margin: 20px auto 0; }
  .home-page .home-state-network__canvas { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .home-page .home-state-network__steps { order: 3; display: block; margin-top: 8px; }
  .home-page .home-state-network__steps li { position: relative; min-height: 0; border-top: 1px solid rgba(255, 255, 255, .14); opacity: .45; transition: opacity .4s ease; }
  .home-page .home-state-network__steps li:has([aria-pressed="true"]) { opacity: 1; }
  .home-page .home-state-network__steps li::before { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--fc-green-300); transform: scaleX(0); transform-origin: left; content: ""; }
  .home-page .home-state-network.is-autoplay .home-state-network__steps li:has([aria-pressed="true"])::before { transform: scaleX(1); transition: transform 5s linear; }
  .home-page .home-state-network__steps button, .home-page .home-state-network__steps button[aria-pressed="true"] { padding: 18px 0 10px; background: none; }
  .home-page .home-state-network__step-links { padding: 0 0 16px 41px; }
  .home-page .home-state-network__service-link { order: 4; align-self: flex-start; margin-top: 24px; }
  .home-page .home-state-network__panel { padding: 0; }

  .home-page .home-state-network__step-links a { min-height: 44px; }
}
@media (max-width: 767px) {
  .home-page main > .statement-section { padding-block: 56px; }
  .home-page .statement-section__grid { gap: 28px; }
  .home-page .statement-section__facts { margin-top: 28px; padding-top: 24px; }

  /* Grüner Block mobil kompakter (Laurence 26.10.): Kennzahlen als 3er-Reihe, Werte als Fließzeile. */
  .home-page .statement-section__text { font-size: 34px; line-height: 1.1; }
  .home-page .statement-section__aside > p { font-size: 16px; line-height: 1.6; }
  .home-page .statement-section__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .home-page .statement-fact dt { font-size: 24px; line-height: 1.05; white-space: normal; }
  .home-page .statement-fact dd { margin-top: 6px; font-size: 12px; line-height: 1.4; }
  .home-page .statement-section__values { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding-top: 22px; }
  .home-page .statement-section__values li { padding: 7px 14px 5px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; font-size: 18px; }
  .home-page .statement-section__values li::before { display: none; }
}
@media (min-width: 768px) {
  .home-page main > .statement-section { padding-block: calc(var(--fc-section) * .8); }
}

.kontakt-thema__body .kontakt-thema__card { margin-top: 0; }

/* Kodex: typografischer Hero, kleine Motive und fünf gleichwertige Textgruppen. */
.werte-kodex__text + .werte-kodex__text { margin-top: 24px; }
.werte-miteinander__grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 56px; }
.werte-commitment { padding-top: 32px; }
.werte-commitment__icon { width: 48px; height: 48px; margin-bottom: 24px; }
.werte-commitment h3 { font-size: 34px; line-height: 1.1; margin-bottom: 20px; }
.werte-commitment .fc-copy { font-size: 16px; }
.werte-qualitaet__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 104px; }
.werte-qualitaet__intro h2 { max-width: 14ch; }
.werte-qualitaet__intro .fc-lead { max-width: 34ch; margin-top: 24px; }
.werte-qualitaet__zahlen { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; gap: 56px 40px; }
.werte-qualitaet__zahlen .facts__item { padding: 0; min-width: 0; }
.werte-qualitaet__zahlen .facts__num { font-size: clamp(64px, 5.5vw, 88px); line-height: 1; letter-spacing: 0; }
.werte-proof__unit { font-size: .78em; }
.werte-qualitaet__zahlen .facts__label { max-width: 29ch; font-size: 15px; line-height: 1.55; margin-top: 16px; }
.werte-qualitaet .werte-proof__title { font-size: clamp(34px, 3vw, 44px); line-height: 1.12; letter-spacing: 0; }
@media (min-width: 1900px) {
  .werte-value > .fc-copy, .werte-benefit > p:last-child, .werte-commitment .fc-copy { font-size: 18px; }
}
@media (max-width: 991px) {
  .werte-miteinander__grid { gap: 24px; }
  .werte-commitment h3 { font-size: 30px; }
  .werte-qualitaet__layout { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .werte-qualitaet__zahlen { gap: 40px 24px; }
}
@media (max-width: 767px) {
  .werte-miteinander__grid { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
  .werte-commitment { padding-top: 24px; }
  .werte-commitment h3 { max-width: 25ch; font-size: 34px; }
  .werte-commitment .fc-copy { font-size: var(--fc-body); }
  .werte-qualitaet__layout { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .werte-qualitaet__intro h2 { max-width: 17ch; }
  .werte-qualitaet__intro .fc-lead { margin-top: 20px; }
  .werte-qualitaet__zahlen { gap: 36px 24px; }
  .werte-qualitaet__zahlen .facts__num { font-size: clamp(48px, 12vw, 72px); }
  .werte-qualitaet .werte-proof__title { font-size: 34px; }
  .werte-qualitaet__zahlen .facts__label { font-size: 14px; margin-top: 12px; overflow-wrap: anywhere; }
}

/* Kontakt, 11.09.2026: zusammenhängender Kontaktbereich und gegliedertes Formular. */
main:has(> .kontakt-thema:first-child) { margin-top: 0; border-radius: 0; }
.subpage-design .kontakt-thema:first-child { padding-top: calc(var(--fc-header-h) + 56px); }
.kontakt-thema > .fc-container { max-width: 1352px; }
.kontakt-chooser { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 80px; row-gap: 24px; }
.kontakt-thema__head h1 { margin-top: 16px; font-size: clamp(56px, 5vw, 72px); line-height: 1.02; }
.kontakt-thema__head > .fc-kicker { margin-bottom: 0; }
.kontakt-thema__lead { margin-top: 20px; max-width: 34ch; font-size: var(--fc-body); }
.kontakt-thema__details { margin-top: 36px; padding-top: 24px; }
.kontakt-thema__details > .kontakt-thema__person-label { margin: 0 0 16px; }
.kontakt-thema__person { margin: 0; }
.contact-person--compact { flex-direction: row; gap: 20px; text-align: left; }
.contact-person--compact .contact-person__avatar { width: 80px; height: 80px; flex-basis: 80px; }
.contact-person--compact .contact-person__portrait { transform: scale(1.4); object-position: center; }
.contact-person--compact .contact-person__name { margin: 0; font-size: 28px; }
.kontakt-thema__wege { gap: 0; margin-top: 0; }
.kontakt-thema__weg { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 18px 0; }
.kontakt-thema__weg-title { font-size: var(--fc-small); line-height: 1.6; }
.kontakt-thema__weg-text { margin: 0; font-size: var(--fc-small); line-height: 1.6; }
.kontakt-thema__card { padding: 32px; gap: 24px; }
.form__group { padding: 24px 0 0; gap: 18px; }
.form__group-title { padding: 0; margin: 0; font-size: 16px; line-height: 1.5; }
.kontakt-thema .form__row { gap: 18px; }
.kontakt-thema .form__label { flex-wrap: wrap; }
@media (min-width: 1900px) {
  .kontakt-thema > .fc-container { max-width: 1536px; }
  .kontakt-thema__head h1 { font-size: 84px; }
}
@media (max-width: 991px) {
  .subpage-design .kontakt-thema:first-child { padding-top: calc(var(--fc-header-h) + 48px); }
  .kontakt-chooser { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .kontakt-thema__head h1 { font-size: clamp(54px, 8vw, 72px); }
  .kontakt-thema__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: min-content min-content min-content 1fr; column-gap: 40px; align-items: start; }
  .kontakt-thema__head > :not(.kontakt-thema__details) { grid-column: 1; }
  .kontakt-thema__details { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; padding-top: 0; border-top: 0; }
  .kontakt-thema__quicklinks { margin-top: 24px; }
  .kontakt-thema__weg { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 12px; }
}
@media (max-width: 767px) {
  .subpage-design .kontakt-thema:first-child { padding-top: calc(var(--fc-header-h) + 32px); }
  .kontakt-thema__head { display: block; }
  .kontakt-thema__head h1 { font-size: clamp(44px, 10.5vw, 64px); }
  .kontakt-thema__details { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--fc-line); }
  .kontakt-thema__card { padding: 24px; }
  .kontakt-thema__weg { grid-template-columns: 68px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 479px) {
  .kontakt-thema__card { padding: 20px; }
}

/* Eine Kante für die ganze Startseite (Laurence 26.10.2026): Der Hero lief an der Fensterkante (--fc-edge),
   alle Sektionen am Container. Jetzt beginnt auch der Hero dort, wo .fc-container beginnt. */
.home-page .home-calm { padding-inline: max(var(--fc-gutter), calc((100% - var(--fc-container)) / 2)); }
@media (max-width: 767px) { .home-page .home-calm__map { margin-inline: calc(var(--fc-gutter) * -1); } }
/* Referenzen: Text und Logowand beginnen auf derselben Höhe. */
.home-page .trust-section__grid { align-items: start; }
.home-page .trust-section__content { padding-top: 0; }
.home-page .trust-section__content > .fc-kicker { margin-top: 0; }

/* Logoleiste im Hero (Laurence 26.10.2026): am Desktop über die volle Breite an der Unterkante des ersten
   Bildschirms, mobil unter den Buttons. Laufband mit allen 16 Logos (js/home-logo-marquee.js, ohne @keyframes),
   Ränder weich ausgeblendet. Grau, beim Überfahren farbig und angehalten. Ausnahme zu Bau-Regel 2, Laurence 26.10. */
.home-page .home-calm__trust { display: flex; align-items: center; gap: 16px 40px; }
.home-page .home-calm__trust-label { flex: none; margin: 0; color: var(--fc-muted); font-size: 13px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.home-page .home-calm__trust-viewport { flex: 1; min-width: 0; overflow: hidden; }
.home-page .home-calm__trust-viewport.is-moving { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home-page .home-calm__trust-track { display: flex; width: max-content; }
.home-page .home-calm__trust-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 56px; margin: 0; padding: 0; list-style: none; }
.home-page .home-calm__trust-viewport.is-moving .home-calm__trust-logos { flex-wrap: nowrap; padding-right: 56px; }
.home-page .home-calm__trust-logos li { flex: none; display: flex; align-items: center; }
.home-page .home-calm__trust-logos img { display: block; width: auto; height: 32px; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter 250ms var(--fc-ease), opacity 250ms var(--fc-ease); }
.home-page .home-calm__trust-logos li:hover img { filter: none; opacity: 1; }
/* Optisch gleich groß: runde Marke größer, massive Wortmarken kleiner. */
.home-page .home-calm__trust-logos .is-round img { height: 46px; max-width: none; }
.home-page .home-calm__trust-logos .is-heavy img { height: 22px; }
.home-page .home-calm__trust-logos .is-badge img { height: 44px; max-width: none; }
@media (min-width: 768px) {
  .home-page .home-calm { padding-bottom: 150px; }
  .home-page .home-calm__trust { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 26px var(--fc-edge) 30px; background: var(--fc-white); box-shadow: inset 0 1px 0 var(--fc-line); }
}
@media (max-width: 767px) {
  .home-page .home-calm__trust { order: 4; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--fc-line); }
  .home-page .home-calm__trust-viewport { margin-inline: calc(var(--fc-gutter) * -1); padding-inline: var(--fc-gutter); }
  .home-page .home-calm__trust-viewport.is-moving { padding-inline: 0; }
  .home-page .home-calm__trust-logos { gap: 16px 36px; }
  .home-page .home-calm__trust-viewport.is-moving .home-calm__trust-logos { padding-right: 36px; }
  .home-page .home-calm__trust-logos img { height: 26px; max-width: 100px; }
  .home-page .home-calm__trust-logos .is-round img { height: 38px; }
  .home-page .home-calm__trust-logos .is-heavy img { height: 18px; }
  .home-page .home-calm__trust-logos .is-badge img { height: 36px; }
}

/* Referenzen nur noch als Kopf über den Kundenstimmen (Logowand seit 26.10.2026 im Hero). */
.home-page .trust-section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.home-page .trust-section__head .fc-kicker { margin-bottom: 18px; }
.home-page .trust-section__aside > p { max-width: 34em; color: var(--fc-copy); font-size: 17px; }
.home-page .trust-section__aside > p + p { margin-top: 12px; color: var(--fc-muted); font-size: 15px; }
.home-page .trust-section__aside .home-textlink { margin-top: 8px; }
.home-page main > .trust-section { padding-bottom: 40px; }
@media (max-width: 991px) { .home-page .trust-section__head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Eine Kopf-Regel für alle Sektionen der Startseite (Laurence 26.10.2026, Layout-Regel Kick-off 04.09.: „alles auf einer
   linken Kante, nie mittig“). Kicker, Überschrift und Einleitung stehen untereinander linksbündig; vorher stand die
   Einleitung als zweite Spalte unten bündig und passte zu keiner Kante darunter. */
.home-page main :is(.home-services__head, .home-ablauf__head, .home-state-network__heading, .trust-section__head) {
  display: block;
}
.home-page main :is(.home-services__head, .home-ablauf__head, .home-state-network__heading, .trust-section__head) > :not(:first-child) {
  max-width: 44em; margin-top: 20px;
}
.home-page main :is(.home-services__intro, .home-ablauf__lead, .home-state-network__heading > p, .trust-section__aside > p:first-child) { font-size: 18px; line-height: 1.6; }
.home-page main .home-state-network__heading { padding-bottom: 32px; }