/* Clean View — project.css
   Globale Wahrheit fuer Schrift, Farbe, Container, Abstand, Fokus.
   Modul-CSS setzt NIE font-size, font-family, font-weight, letter-spacing
   und benutzt NIE einen Farbliteral — immer die Tokens von hier. */

/* ---------- 1 Schriften (variabel, selbst gehostet, kein fonts.googleapis.com) ---------- */

@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-var.woff2') format('woff2');
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-var.woff2') format('woff2');
}

/* ---------- 2 Farb-Tokens ---------- */

:root {
	/* Flaechen & Text */
	--fx-navy:        #0F3D4F;
	--fx-navy-deep:   #0A2E3D;
	--fx-azure:       #327AA7;
	--fx-text:        #4A6C7E;
	--fx-white:       #fff;

	/* auf dunklem Grund */
	--fx-ice:         #9FD8F0;
	--fx-mist:        #B9D5E3;
	--fx-muted:       #8FAFBE;

	/* Flaechen & Linien hell */
	--fx-tint:        #EAF2F8;
	--fx-line:        #D3E3EE;
	--fx-line-tint:   #C6D9E6;
	--fx-line-form:   #9FC0D2;
	--fx-navy-hover:  #154B60;   /* Hover auf dem dunklen Anruf-Block */
	--fx-offen:       #3E9B6E;   /* Status "erreichbar", nur das Quadrat */
	--fx-nummer-aus:  #5A7E92;   /* inaktive Nummer in Auswahlleisten */

	/* Fehler (Formular) */
	--fx-fehler:         #C0392B;
	--fx-fehler-flaeche: #FDF4F3;

	/* Overlays */
	--fx-overlay:        rgba(15, 61, 79, .90);
	--fx-overlay-strong: rgba(15, 61, 79, .92);
	--fx-overlay-hero:   rgba(15, 61, 79, .88);
	--fx-overlay-deep:   rgba(10, 46, 61, .90);
	--fx-rule-dark:      rgba(255, 255, 255, .16);
	--fx-divider-dark:   rgba(255, 255, 255, .28);
	--fx-shadow-dropdown: rgba(15, 61, 79, .16);   /* Aufgabe 25: fx4-Custom-Dropdown */
	--fx-shadow-sticky:   0 1px 0 var(--fx-line), 0 14px 30px -20px rgba(15, 61, 79, .5);
	--fx-shadow-griff:    0 12px 30px -12px rgba(15, 61, 79, .55);
	--fx-versatz:         12px 12px 0 var(--fx-navy);   /* harter Versatz am Stoerer */
	--fx-versatz-klein:   6px 6px 0 var(--fx-navy);
	--fx-ease-slider:     cubic-bezier(.2, .7, .2, 1);
	--fx-dauer-slider:    .45s;
	--fx-dauer-header:    .2s;

	/* Lichtstreifen (Fensterkreuz) — exakt, nicht normalisiert */
	--fx-glare-70: rgba(255, 255, 255, .70);
	--fx-glare-60: rgba(255, 255, 255, .60);
	--fx-glare-55: rgba(255, 255, 255, .55);
	--fx-glare-45: rgba(255, 255, 255, .45);
	--fx-glare-28: rgba(255, 255, 255, .28);
	--fx-glare-08: rgba(255, 255, 255, .08);
}

/* ---------- 3 Typografie-Tokens ---------- */

:root {
	--font-heading: 'Hanken Grotesk', system-ui, sans-serif;
	--font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

	/* Obergrenze = Entwurfswert bei 1080px Bildschirmhoehe. Auf einem Laptop mit
	   750px Hoehe fraess eine 76px-Ueberschrift ueber drei Zeilen ein Drittel des
	   Schirms — deshalb skalieren die grossen Groessen mit der Hoehe, nicht nur mit
	   der Breite. Unter 992px gelten weiterhin die festen Werte der Media Query. */
	--fx-fs-h1: clamp(52px, 7.05vh, 76px);  --fx-lh-h1: 1.0;   --fx-ls-h1: -0.035em;
	--fx-fs-h2: clamp(36px, 4.07vh, 44px);  --fx-lh-h2: 1.05;  --fx-ls-h2: -0.03em;
	--fx-fs-h2-band:    42px; --fx-lh-h2-band: 1.1;   /* nur fx13 */
	--fx-fs-h3:         24px; --fx-lh-h3: 1.2;        /* fx9 */
	--fx-fs-h3-gross:   26px;                          /* fx10 */
	--fx-fs-h3-referenz: clamp(26px, 2.96vh, 32px);    /* fx14 */
	--fx-fs-h2-stoerer:  clamp(34px, 4.44vh, 48px);    /* fx15 */
	--fx-fs-nav:         16px;
	--fx-fs-tel-gross:   36px;
	--fx-fs-tel-sticky:  19px;   /* Header-Nummer im gescrollten Zustand */
	--fx-fs-tel-karte:   24px;   /* Nummer in der Anruf-Karte des Mobil-Menues */
	--fx-fs-menue-nr:    13px;   /* Nummer in der mobilen Menueliste */
	--fx-fs-fussnote:    15px;   /* Oeffnungszeiten-Zeile, kleine Hinweise */
	--fx-fs-hinweis:     18px;   /* Hinweistext neben einer Ueberschrift */
	--fx-fs-karte-titel: 17px;   /* Titel in Auswahlkarten */
	--fx-fs-badge-gross: 13px;   /* Marken Vorher/Nachher */
	--fx-fs-schritt:     60px;   /* Ablauf-Zeilen, fx10 */
	--fx-fs-h2-video:    40px;   /* fx12 */
	--fx-fs-topline:    12px;
	--fx-fs-lead:       19px; --fx-lh-lead: 1.65;
	--fx-fs-body:       17px; --fx-lh-body: 1.6;
	--fx-fs-label-gross:13px;  --fx-fs-label: 12px;  --fx-fs-caption: 11px;
	--fx-fs-meta:       13px;
	--fx-fs-btn:        18px;  --fx-fs-btn-klein: 17px;  --fx-fs-btn-versal: 14px;
	--fx-fs-zitat:      24px;
	--fx-fs-tel:        30px;  --fx-fs-tel-klein: 20px;
	--fx-fs-zahl:       44px;  --fx-fs-zahl-klein: 14px;  --fx-fs-zahl-form: 15px;
	--fx-fs-nr:         15px;  --fx-fs-tab: 14px;  --fx-fs-mini: 9px;   /* fx14 */
	--fx-fs-form-label: 15px;  --fx-fs-form-feld: 17px;   --fx-fs-form-fuss: 16px;
	--fx-fs-footer:     17px;  --fx-fs-footer-link: 17px; --fx-fs-copyright: 15px;

	--fx-ls-versal:  .14em;  --fx-ls-topline: .18em;
	--fx-ls-button:  .16em;  --fx-ls-meta:    .12em;
	--fx-ls-link:    .06em;
}

@media (max-width: 991px) {
	:root {
		--fx-fs-h1: 42px;  --fx-lh-h1: 1.02;  --fx-ls-h1: -0.03em;
		--fx-fs-h2: 34px;  --fx-fs-h2-band: 32px;
		--fx-fs-h3: 23px;  --fx-fs-h3-gross: 22px;
		--fx-fs-h3-referenz: 26px;
		--fx-fs-topline: 11px;  --fx-fs-lead: 18px;
		--fx-fs-label-gross: 12px; --fx-fs-label: 11px; --fx-fs-caption: 10px;
		--fx-fs-meta: 12px;  --fx-fs-btn: 19px;  --fx-fs-btn-versal: 13px;
		--fx-fs-zitat: 20px;  --fx-fs-h2-stoerer: 30px;  --fx-fs-tel-gross: 26px;
		--fx-fs-hinweis: 17px;  --fx-fs-karte-titel: 15px;  --fx-fs-badge-gross: 11px;
		--fx-fs-schritt: 32px;  --fx-fs-h2-video: 26px; --fx-fs-tel: 26px;  --fx-fs-tel-klein: 18px;
		--fx-fs-zahl: 34px;  --fx-fs-zahl-klein: 13px; --fx-fs-zahl-form: 14px;
		--fx-fs-nr: 14px;  --fx-fs-tab: 13px;
		--fx-fs-form-fuss: 15px;
		--fx-fs-footer-link: 16px; --fx-fs-copyright: 14px;
	}
}

body { font:400 var(--fx-fs-body)/var(--fx-lh-body) var(--font-body); color:var(--fx-text); background:var(--fx-white); }
h1,h2,h3,h4 { font-family:var(--font-heading); color:var(--fx-navy); margin:0; }
h1 { font-weight:800; font-size:var(--fx-fs-h1); line-height:var(--fx-lh-h1); letter-spacing:var(--fx-ls-h1); }
h2 { font-weight:800; font-size:var(--fx-fs-h2); line-height:var(--fx-lh-h2); letter-spacing:var(--fx-ls-h2); }
h3, h4 { font-weight:700; font-size:var(--fx-fs-h3); line-height:var(--fx-lh-h3); }
/* Regel 11: zweigeteilte Ueberschrift, zweiter Schnitt per <span> */
h1 > span, h2 > span, h3 > span { font-weight:700; }
/* Mehrzeilig gleich lange Zeilen, statt ein Wort oder ein "&" allein umbrechen zu lassen */
h1, h2, h3, h4, .fx-topline, .fx-meta { text-wrap:balance; }

.fx-h2-band     { font-size:var(--fx-fs-h2-band); line-height:var(--fx-lh-h2-band); }
.fx-h3-gross    { font-size:var(--fx-fs-h3-gross); }
.fx-h3-referenz { font-size:var(--fx-fs-h3-referenz); line-height:1.12; letter-spacing:-0.025em; }
.fx-topline     { font:700 var(--fx-fs-topline)/1 var(--font-body); letter-spacing:var(--fx-ls-topline); text-transform:uppercase; color:var(--fx-azure); margin:0; }
.fx-topline--navy { color:var(--fx-navy); }   /* Termin, Ablauf, Ergebnisse */
.fx-topline--ice  { color:var(--fx-ice); }    /* Video, CTA-Band */
.fx-lead        { font:400 var(--fx-fs-lead)/var(--fx-lh-lead) var(--font-body); color:var(--fx-text); margin:0; }
.fx-lead--hell  { color:var(--fx-mist); }
.fx-label-gross { font:600 var(--fx-fs-label-gross)/1 var(--font-body); letter-spacing:var(--fx-ls-versal); text-transform:uppercase; }
.fx-label       { font:600 var(--fx-fs-label)/1 var(--font-body); letter-spacing:var(--fx-ls-versal); text-transform:uppercase; }
.fx-caption     { font:600 var(--fx-fs-caption)/1 var(--font-body); letter-spacing:var(--fx-ls-versal); text-transform:uppercase; }
.fx-badge       { font:700 var(--fx-fs-caption)/1 var(--font-body); letter-spacing:var(--fx-ls-topline); text-transform:uppercase; }
.fx-badge--gross { font-size:var(--fx-fs-badge-gross); }
.fx-hinweis     { font:400 var(--fx-fs-hinweis)/1.6 var(--font-body); color:var(--fx-text); margin:0; }
.fx-meta        { font:600 var(--fx-fs-meta)/1.6 var(--font-body); letter-spacing:var(--fx-ls-meta); text-transform:uppercase; color:var(--fx-text); }
.fx-link-klein  { font:700 var(--fx-fs-meta)/var(--fx-lh-body) var(--font-body); letter-spacing:var(--fx-ls-link); text-transform:uppercase; }   /* Leistungskarten */
.fx-zitat       { font:500 var(--fx-fs-zitat)/1.6 var(--font-body); color:var(--fx-navy); }
.fx-tel         { font:800 var(--fx-fs-tel)/1.1 var(--font-heading); }
.fx-tel-klein   { font:800 var(--fx-fs-tel-klein)/1 var(--font-heading); }
.fx-zahl        { font:800 var(--fx-fs-zahl)/1 var(--font-heading); color:var(--fx-azure); font-variant-numeric:tabular-nums; }
.fx-zahl-klein  { font:800 var(--fx-fs-zahl-klein)/1 var(--font-heading); color:var(--fx-azure); font-variant-numeric:tabular-nums; }
.fx-footer-text    { font:400 var(--fx-fs-footer)/1.7 var(--font-body); color:var(--fx-mist); }
.fx-footer-kontakt { font:500 var(--fx-fs-footer)/1.9 var(--font-body); color:var(--fx-mist); }
.fx-footer-link    { font:500 var(--fx-fs-footer-link)/1.4 var(--font-body); }
.fx-copyright      { font:400 var(--fx-fs-copyright)/1.5 var(--font-body); color:var(--fx-muted); }

/* Verbindliche Korrektur 2 (Vorab-Konfliktscan 2026-09-22): Spec §4.3 verlangt fuer die
   fx9-Fusszeile unter 359px letter-spacing:.1em — Modul-CSS darf letter-spacing nicht setzen,
   deshalb hier. Aufgabe 14 vergibt die Klasse .fx-meta--weit im Markup. */
@media (max-width: 359px) {
	.fx-meta--weit { letter-spacing: .1em; }
}

/* fx11 (Spec 4.7): .fx11_label braucht bei <=330px eine weitere Laufweite, sonst
   bricht "Nachher" um. fx11 vergibt die Klasse .fx-badge--weit im Markup. */
@media (max-width: 330px) {
	.fx-badge--weit { letter-spacing: .12em; }
}

/* fx5 (Spec 4.6): .fx5_zaehler braucht bei <=330px eine engere Laufweite, damit
   Nav (48+38+48+12) in 280px passt. fx5 vergibt die Klasse .fx-meta--eng im Markup. */
@media (max-width: 330px) {
	.fx-meta--eng { letter-spacing: .06em; }
}

/* ---------- 5 Buttons, Container, Abstaende, Fokus ---------- */

.fx-btn { display:inline-flex; align-items:center; gap:14px; border:0; border-radius:0;
          font:700 var(--fx-fs-btn)/1 var(--font-heading); text-decoration:none; cursor:pointer;
          transition:background-color .18s ease, color .18s ease; }
.fx-btn--primaer { background:var(--fx-navy); color:var(--fx-white); padding:22px 34px; }
.fx-btn--primaer:hover, .fx-btn--primaer:focus-visible { background:var(--fx-azure); }
.fx-btn--outline { background:transparent; color:var(--fx-navy); border:1px solid var(--fx-navy); padding:22px 30px; gap:12px; }
.fx-btn--outline:hover, .fx-btn--outline:focus-visible { background:var(--fx-tint); }
.fx-btn--submit  { background:var(--fx-azure); color:var(--fx-white); padding:24px 40px; }
/* Kein flacher Farbwechsel — den Hover macht der Wisch (.fx4_form_submit::before). */
.fx-btn--versal  { font:700 var(--fx-fs-btn-versal)/1 var(--font-body); letter-spacing:var(--fx-ls-button); text-transform:uppercase; padding:26px 40px; gap:16px; background:var(--fx-navy); color:var(--fx-white); }
.fx-btn--versal:hover { background:var(--fx-azure); }

@media (max-width: 991px) {
	.fx-btn { width:100%; justify-content:space-between; min-height:44px; padding:21px 24px; }
}
@media (max-width: 359px) { .fx-btn { padding:18px 16px; gap:10px; } }

:root { --fx-gutter: 20px; --fx-content-max: none; }
@media (min-width: 992px) { :root { --fx-gutter: 56px; } }
@media (max-width: 359px) { :root { --fx-gutter: 16px; } }

.fx-band { padding-inline: var(--fx-gutter); }

.fx-container-normal { max-width: var(--fx-content-max); margin-inline: auto; }
.fx-container-fluid  { max-width: none; }

.fx-align-zentriert { margin-inline: auto; }
.fx-align-links     { margin-inline: 0 auto 0 0; }
.fx-align-rechts    { margin-inline: auto 0 0 0; }

.fx-lesebreite-hero   { max-width: 460px; }
.fx-lesebreite-neben  { max-width: 360px; }
.fx-lesebreite-schmal { max-width: 300px; }
.fx-lesebreite-klein  { max-width: 340px; }

.fx-bg-weiss { background: var(--fx-white); }
.fx-bg-hell  { background: var(--fx-tint); }

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	/* Buehnenhoehen. Bildflaechen hingen bisher allein an der Breite. Auf einem
	   Laptop ist aber die Hoehe die knappe Groesse: 1440x750 ist breit und niedrig,
	   und eine 700px hohe Buehne plus Kopfzeile und Navigation passt dort nicht mehr
	   auf den Schirm. Diese Deckel begrenzen jede Buehne zusaetzlich an der Hoehe.
	   Unter 992px greifen die festen Hoehen der Modul-Media-Queries davor. */
	--fx-buehne-gross:  min(60vh, 720px);
	--fx-buehne-mittel: min(52vh, 620px);
	--fx-buehne-klein:  min(22vh, 240px);

	/* Innenabstaende, die mit der Bildschirmhoehe mitgehen. Bei Modulen mit einer
	   Textspalte neben der Buehne bestimmt die Textspalte die Zeilenhoehe — der
	   Buehnendeckel allein bringt dort nichts. */
	--fx-gap-block:       clamp(16px, 2.6vh, 28px);
	--fx-gap-block-klein: clamp(10px, 1.8vh, 20px);
	--fx-pad-block:       clamp(20px, 3.4vh, 32px);
	--fx-pad-block-gross: clamp(24px, 4.2vh, 40px);

	--fx-space-o-small:36px;  --fx-space-u-small:40px;
	--fx-space-o-medium:36px; --fx-space-u-medium:40px;
	--fx-space-o-large:52px;  --fx-space-u-large:56px;
}
@media (min-width: 992px) {
	:root {
		/* Obergrenze = der Entwurfswert bei 1080px Bildschirmhoehe, darunter schrumpfen
		   die Abstaende mit. Sonst frisst allein der Weissraum auf einem 750px hohen
		   Laptop-Schirm zwei Fingerbreit je Sektion. */
		--fx-space-o-small:  clamp(40px,  6.0vh,  64px);  --fx-space-u-small:  clamp(40px,  6.0vh,  64px);
		--fx-space-o-medium: clamp(48px,  7.4vh,  78px);  --fx-space-u-medium: clamp(52px,  8.2vh,  86px);
		--fx-space-o-large:  clamp(64px, 10.4vh, 110px);  --fx-space-u-large:  clamp(70px, 11.4vh, 120px);
	}
}

.fx-abstand-oben-none   { padding-top: 0; }
.fx-abstand-oben-small  { padding-top: var(--fx-space-o-small); }
.fx-abstand-oben-medium { padding-top: var(--fx-space-o-medium); }
.fx-abstand-oben-large  { padding-top: var(--fx-space-o-large); }

.fx-abstand-unten-none   { padding-bottom: 0; }
.fx-abstand-unten-small  { padding-bottom: var(--fx-space-u-small); }
.fx-abstand-unten-medium { padding-bottom: var(--fx-space-u-medium); }
.fx-abstand-unten-large  { padding-bottom: var(--fx-space-u-large); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fx-azure); outline-offset: 2px; }
.fx-bg-dunkel :focus-visible, section.fx12_video :focus-visible,
section.fx13_cta_band :focus-visible { outline-color: var(--fx-white); outline-offset: -4px; }
button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; }

/* ---------- 7 Icons (inc/icons.php) ---------- */

.fx-icon { flex: none; display: inline-block; vertical-align: middle; }
.fx-icon--telefon { stroke: var(--fx-azure); }
.fx-icon--play,
.fx-icon--pause { fill: currentColor; stroke: none; }

/* ---------- 8 Formulare (Aufgabe 24: fx4_kontakt, erstes Modul mit echten
   Formularelementen). Native Controls erben KEINE font-family vom body — das
   muss global gesetzt werden, Modul-CSS darf font-family nicht setzen
   (Regel 5). Die Groessen-Tokens --fx-fs-form-label/-feld/-fuss/-zahl-form
   liegen seit dem Fundament bereit (§2.4) und werden hier erstmals verbraucht;
   Modul-CSS darf sie nicht selbst in eine font-Deklaration schreiben. ---------- */

input, select, textarea, button { font-family: var(--font-body); }

section.fx4_kontakt .fx4_form_label   { font: 600 var(--fx-fs-form-label)/1.3 var(--font-body); }
section.fx4_kontakt .fx4_form_control { font: 400 var(--fx-fs-form-feld)/1.3 var(--font-body); }
section.fx4_kontakt .fx4_form_fuss,
section.fx4_kontakt .fx4_form_hinweis { font: 400 var(--fx-fs-form-fuss)/1.5 var(--font-body); }
section.fx4_kontakt .fx4_form_schritt_nr { font: 800 var(--fx-fs-zahl-form)/1 var(--font-heading); }

/* CF7-Fehlerhinweis ist global (jedes Formular auf der Seite kann ihn zeigen). */
.wpcf7-not-valid-tip { font: 500 var(--fx-fs-meta)/1.4 var(--font-body); }

/* Auf sehr breiten Schirmen laeuft der Inhalt jetzt bis zum Rand (Entscheidung
   2026-09-22). Damit Fliesstext dabei nicht unlesbar lange Zeilen bekommt,
   deckelt diese Klasse reine Textabsaetze. Bilder, Raster und Slider bleiben breit. */
.fx-lesetext { max-width: 640px; }
/* 640px statt einer ch-Angabe: Plus Jakarta Sans hat breite Ziffern, 72ch ergaebe
   896px und damit ueber 100 Zeichen pro Zeile. Bei 1440px ist die Spalte ohnehin
   nur 632px breit — der Deckel greift also erst oberhalb der Entwurfsbreite und
   laesst das Layout bei 1440px unveraendert. */

/* ---------------------------------------------------------------------------
   Bewegung
   Der Entwurf gibt nur Farbwechsel vor (style-hover). Diese Ergaenzungen sind
   bewusst zurueckhaltend: sie zeigen an, dass etwas anklickbar ist, ohne das
   Layout zu verschieben — jede Regel bewegt nur transform oder opacity, nie
   Groesse oder Abstand. Wer Bewegung reduziert haben moechte, bekommt am Ende
   der Datei alles wieder abgeschaltet.
   --------------------------------------------------------------------------- */

/* Pfeile laufen ein Stueck in ihre Richtung. Bewusst elementbasiert statt an eine
   Klasse gebunden: Pfeil-Icons stecken in Buttons UND in Navigations-, Footer- und
   Mobile-Links. Eine Klassenregel muesste ueberall vergeben werden und wird dann
   irgendwo vergessen. */
a .fx-icon, button .fx-icon { transition: transform .18s ease; }

a:hover .fx-icon--pfeil-rechts, a:focus-visible .fx-icon--pfeil-rechts,
button:hover .fx-icon--pfeil-rechts, button:focus-visible .fx-icon--pfeil-rechts {
	transform: translateX(4px);
}

a:hover .fx-icon--pfeil-links, a:focus-visible .fx-icon--pfeil-links,
button:hover .fx-icon--pfeil-links, button:focus-visible .fx-icon--pfeil-links {
	transform: translateX(-4px);
}

a:hover .fx-icon--pfeil-runter, a:focus-visible .fx-icon--pfeil-runter {
	transform: translateY(3px);
}

a:hover .fx-icon--telefon, a:focus-visible .fx-icon--telefon {
	transform: rotate(-12deg) scale(1.08);
}

/* Gedrueckt: der Button gibt minimal nach. */
.fx-btn:active { transform: translateY(1px); }

/* Bildflaechen: leichter Zoom, der Ausschnitt bleibt durch overflow:hidden stehen. */
.fx-zoom { overflow: hidden; }
.fx-zoom img { transition: transform .4s ease; }
.fx-zoom:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	a .fx-icon, button .fx-icon, .fx-zoom img { transition: none; }
	a:hover .fx-icon, button:hover .fx-icon,
	a:focus-visible .fx-icon, button:focus-visible .fx-icon,
	.fx-zoom:hover img, .fx-btn:active { transform: none; }
}

/* ===========================================================================
   Bewegung
   ---------------------------------------------------------------------------
   Zurueckhaltend und einmalig: Inhalte kommen beim Scrollen ein Stueck herauf,
   ein Glanzstreifen zieht ueber die Bilder, Flaechen werden beim Hover gewischt
   statt umgefaerbt. Das passt zur harten, linearen Bildsprache — Weichzeichner,
   Schlagschatten oder Federeffekte gibt es hier bewusst nicht.

   .fx-reveal vergibt erst js/fx-motion.js, und nur an Elemente, die beim Laden
   unterhalb des Bildschirms liegen. Ohne JS ist die Seite vollstaendig sichtbar.
   =========================================================================== */

:root {
	--fx-motion-weg:   14px;   /* Weg, den ein Element beim Einblenden zuruecklegt */
	--fx-reveal-warte: 0ms;    /* Versatz, je Element aus data-reveal gesetzt */
}

.fx-reveal {
	opacity: 0;
	transform: translateY(var(--fx-motion-weg));
}

/* Zwei Dauern laut Handoff: die Deckkraft kommt schneller als die Bewegung,
   dadurch wirkt es weich statt geschoben. */
.fx-reveal--da {
	opacity: 1;
	transform: none;
	transition:
		opacity   .9s ease var(--fx-reveal-warte, 0ms),
		transform 1.1s var(--fx-ease-slider) var(--fx-reveal-warte, 0ms);
}

/* ---- Glanz ueber Bildern -------------------------------------------------
   "Frisch geputztes Glas": ein schmaler heller Streifen zieht alle 14-16 s
   einmal durch. Nur ueber dem Hero und dem Bild bei "Wer wir sind"; der
   Rahmen muss overflow:hidden tragen. */

@keyframes fx-glanz {
	0%, 82% { transform: translateX(-160%) skewX(-18deg); }
	100%    { transform: translateX(560%)  skewX(-18deg); }
}

.fx-glanz {
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: 0;
	width: 22%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--fx-glare-28), transparent);
	animation: fx-glanz 14s ease-in-out infinite;
}
.fx-glanz--langsam { animation-duration: 16s; }

/* ---- Hover: Wisch statt Farbsprung ---------------------------------------
   Die dunklen Flaechen bekommen ihre Hover-Farbe als Balken, der von links
   einlaeuft. Eckig, in einem Zug — kein Verlauf, kein Leuchten. */

/*
 * Der Wisch laeuft ueber ein ::before, nicht ueber background-position wie im
 * Handoff skizziert. Grund: die Modul-CSS setzen ihre Flaechen mit der
 * background-Kurzform, und die setzt background-image auf none zurueck — der
 * Verlauf waere dort ueberschrieben. Dauer und Kurve sind die des Handoffs.
 */
.fx-btn,
.fx14_cta,
.fx6_pfeil,
.fx11_karte,
.fx_nav_link--cta,
.fx8_pfeil,
.fx8_button,
.fx12_play,
.fx15_anruf,
.fx14_medien_pfeil,
.fx11_pfeil,
.fx4_form_submit {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.fx-btn::before,
.fx14_cta::before,
.fx6_pfeil::before,
.fx_nav_link--cta::before,
.fx8_pfeil::before,
.fx8_button::before,
.fx12_play::before,
.fx15_anruf::before,
.fx14_medien_pfeil::before,
.fx11_pfeil::before,
.fx4_form_submit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fx-wisch, var(--fx-azure));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--fx-dauer-slider) var(--fx-ease-slider);
}

/* Die Ausnahmen: der dunkle Anruf-Block wischt nach Navy-Hover, der weisse
   Video-Knopf nach der hellen Flaeche, der Formular-Knopf umgekehrt. */
.fx15_anruf { --fx-wisch: var(--fx-navy-hover); }
.fx12_play  { --fx-wisch: var(--fx-tint); }
.fx4_form_submit { --fx-wisch: var(--fx-navy); }

.fx-btn:hover::before,            .fx-btn:focus-visible::before,
.fx14_cta:hover::before,          .fx14_cta:focus-visible::before,
.fx6_pfeil:hover::before,         .fx6_pfeil:focus-visible::before,
.fx_nav_link--cta:hover::before,  .fx_nav_link--cta:focus-visible::before,
.fx8_pfeil:hover::before,         .fx8_pfeil:focus-visible::before,
.fx8_button:hover::before,        .fx8_button:focus-visible::before,
.fx12_play:hover::before,         .fx12_play:focus-visible::before,
.fx15_anruf:hover::before,        .fx15_anruf:focus-visible::before,
.fx14_medien_pfeil:hover::before, .fx14_medien_pfeil:focus-visible::before,
.fx11_pfeil:hover::before,        .fx11_pfeil:focus-visible::before,
.fx4_form_submit:hover::before,        .fx4_form_submit:focus-visible::before { transform: scaleX(1); }

/* ---- Tastaturfokus -------------------------------------------------------
   Sichtbar und in der Formensprache: ein eckiger Rahmen, kein Systemring. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--fx-azure);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.fx-reveal,
	.fx-reveal--da {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.fx-glanz { animation: none; display: none; }
	.fx-btn::before,
	.fx14_cta::before,
	.fx6_pfeil::before,
	.fx_nav_link--cta::before { transition: none; }
}