/* ============================================================
   FIX30 — Inhaltsebene (/kosten/…, spätere Themenseiten)

   Uebernimmt die Bausteine des Decks — Gitter im Hero, Pille mit
   Haekchen, Abschlusskasten, FAQ-Karten mit Pluszeichen — baut sie
   hier aber eigenstaendig nach, weil fix30.css NICHT geladen wird.

   ---------------------------------------------------------------
   DREI REGELN, DIE AUS FEHLERN STAMMEN. Bitte nicht aufweichen.

   1. KEIN fix30.css AUF INHALTSSEITEN.
      Das Deck-Stylesheet definiert .feld als Eingabefeld
      (grid-template-columns: 34px 1fr) — jeder Abschnitt einer
      Inhaltsseite war dadurch 34px breit.

   2. JEDE KLASSE TRAEGT DAS PRAEFIX fx-.
      Damit sind Kollisionen konstruktiv ausgeschlossen.

   3. NIEMALS EINE PAUSCHALE LINKFARBE.
      "a { color }" schlaegt jede Knopfregel mit nur einer Klasse —
      der Haupt-CTA stand dadurch als schwarzer Block ohne Text auf
      der Seite. Textlinks werden EINZELN adressiert.
   ---------------------------------------------------------------
   ============================================================ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   FARBEN: zwei Belegungen.  Hell ist der Normalfall; dunkel schaltet
   allein der Knopf in der Kopfzeile (thema.js).  prefers-color-scheme
   wird bewusst nicht abgefragt.

   VIERTE REGEL, die aus demselben Holz ist wie die drei oben:
   KEINE HARTE FARBE AUSSERHALB DIESES BLOCKS. Ausgenommen sind nur die
   Stellen, die auf einem Foto liegen (.ba-*). Die bleiben in jedem
   Modus gleich.  Und: wer "background: var(--tinte)" setzt, setzt die
   Schrift darauf mit var(--auf-tinte).  Im Dunkeln kippen beide.
   ------------------------------------------------------------ */
:root {
  --tinte:  #131313;
  --auf-tinte: #ffffff;   /* Schrift auf der Tintenflaeche */
  --tinte-hover: #000000;
  --stark:  #3d3d45;
  --leise:  #6f6f78;
  --zart:   #9a9aa2;
  --grund:  #ffffff;      /* das Blatt */
  --flaeche: #ffffff;     /* Karte auf dem Blatt */
  --sanft:  #f5f5f7;
  --kante:  #e0e0e6;
  --kante2: #c9c9d1;
  --gelb:   #fcc50d;
  --gelb-rgb: 252, 197, 13;
  --gelb-hover: #ffd23d;

  --grund-rgb: 255, 255, 255;
  --tinte-rgb: 19, 19, 19;
  --auf-tinte-rgb: 255, 255, 255;
  --schatten-rgb: 19, 19, 19;
  /* Gelb ist in beiden Modi dasselbe, also auch die Schrift darauf.
     Sonst steht der Hauptknopf im Dunkeln weiss auf Gelb. */
  --auf-gelb: #131313;
  --auf-gelb-rgb: 19, 19, 19;

  /* UMGEKEHRTE TAFEL, siehe fix30.css. Der Abschlusskasten kippt im
     Dunkeln nicht auf Weiss (eine fast weisse Tafel ueber den halben
     Bildschirm blendet), sondern wird eine leicht erhabene dunkle
     Flaeche; das Ziehen uebernimmt allein der gelbe Knopf. */
  --um-flaeche: var(--tinte);
  --um-schrift: var(--auf-tinte);
  --um-schrift-rgb: var(--auf-tinte-rgb);

  --r-s: 10px;
  --r-m: 14px;
  /* Apple setzt Karten auf einen deutlich weicheren Radius als
     uebliche 12-14px. 18px liest sich noch als Rechteck, nimmt der
     Flaeche aber die Haerte. */
  --r-apple: 18px;
  --r-l: 20px;
  --r-xl: 32px;

  --schatten-s: 0 1px 2px rgba(var(--schatten-rgb), 0.05);
  --schatten-m: 0 1px 2px rgba(var(--schatten-rgb), 0.05), 0 8px 24px -10px rgba(var(--schatten-rgb), 0.16);

  --zug: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-thema="dunkel"] {
  /* Tiefes Neutral, siehe die Begruendung im dunklen Block von
     fix30.css. Beide Welten teilen dieselben Werte, sonst springt die
     Farbe beim Wechsel von /kosten auf /. */
  --tinte:  #f2f2f5;
  --auf-tinte: #0f0f11;
  --tinte-hover: #ffffff;
  --stark:  #c7c7cf;
  --leise:  #a0a0ab;
  --zart:   #8e8e99;   /* nachgemessen: 5.0:1 auf --flaeche, AA erfuellt */
  --grund:  #0f0f11;
  --flaeche: #1c1c20;
  --sanft:  #17171a;
  --kante:  #2c2c33;
  --kante2: #3e3e47;
  --gelb:   #fcc50d;
  --gelb-hover: #ffd23d;

  --grund-rgb: 15, 15, 17;
  --tinte-rgb: 242, 242, 245;
  --auf-tinte-rgb: 15, 15, 17;
  --schatten-rgb: 0, 0, 0;

  --um-flaeche: #1a1a1f;
  --um-schrift: var(--tinte);
  --um-schrift-rgb: var(--tinte-rgb);

  /* Schatten tragen auf dunklem Grund nicht, die Kante uebernimmt. */
  --schatten-s: 0 0 0 1px var(--kante);
  --schatten-m: 0 0 0 1px var(--kante), 0 12px 30px -14px rgba(0,0,0,0.8);

  color-scheme: dark;
}

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

/* Sanft scrollen statt springen — aber nur, wenn niemand weniger
   Bewegung verlangt hat. Steht auf :root UND body, weil je nach
   Browser mal das eine, mal das andere das scrollende Element ist.

   scroll-margin-top haelt das Ziel unter der klebenden Kopfzeile
   frei (70px hoch); ohne das landet die Ueberschrift dahinter. */
@media (prefers-reduced-motion: no-preference) {
  :root, body.fx { scroll-behavior: smooth; }
}
[id] { scroll-margin-top: 94px; }

body.fx {
  background: var(--grund);
  color: var(--stark);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-variant-numeric: tabular-nums;
}
body.fx img { display: block; max-width: 100%; }
body.fx button { font: inherit; cursor: pointer; }
::selection { background: var(--gelb); color: var(--auf-gelb); }
body.fx { caret-color: var(--tinte); accent-color: var(--tinte); }
body.fx :focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }

/* ---- Raster ---- */
.fx-mitte { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.fx-band { padding: clamp(64px, 9vw, 120px) 0; }
.fx-band--sanft { background: var(--sanft); border-block: 1px solid var(--kante); }
@media (max-width: 640px) { .fx-mitte { padding: 0 20px; } }

/* ---- Schrift ---- */
.fx h1, .fx h2, .fx h3 { color: var(--tinte); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.fx h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.05; letter-spacing: -0.04em; }
.fx h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.12; }
.fx h3 { font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.02em; }
.fx p { margin: 0; }
.fx strong { color: var(--tinte); font-weight: 600; }

.fx-lead { font-size: clamp(1.02rem, 1.7vw, 1.12rem); line-height: 1.62; color: var(--leise); }
.fx-klein { font-size: 0.875rem; color: var(--leise); }
.fx-mini { font-size: 0.8rem; color: var(--zart); }

/* Textlinks EINZELN, nie pauschal — siehe Regel 3 im Kopf. */
.fx-prosa a, .fx-fuss a, .fx-f p a { color: var(--tinte); text-underline-offset: 3px; }
.fx-prosa a:hover, .fx-fuss a:hover { color: var(--tinte-hover); }

/* ---- Pille mit Haekchen ---- */
.fx-pille {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--flaeche); border: 1px solid var(--kante);
  box-shadow: var(--schatten-s);
  color: var(--tinte); font-size: 0.87rem; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
}
.fx-pille svg { width: 15px; height: 15px; flex: none; color: var(--stark); }
/* In der dunklen Flaeche kehrt sie sich um, Haekchen wird gelb. */
.fx-schluss .fx-pille {
  background: rgba(var(--um-schrift-rgb), 0.08); border-color: rgba(var(--um-schrift-rgb), 0.24);
  color: var(--um-schrift); box-shadow: none;
}
.fx-schluss .fx-pille svg { color: var(--gelb); }

/* ---- Knoepfe ----
   Pfeil in fester Blende hinter dem Text: der Abstand Text-Pfeil
   bleibt konstant, beim Ueberfahren schiebt sich ein Streifen aus
   zwei Pfeilen durch. Nachbau von .btn-slide im Deck, damit sich
   Inhaltsebene und Konfigurator gleich anfuehlen. */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 26px; border-radius: 999px;
  font-size: 0.97rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: background 0.2s var(--zug), border-color 0.2s var(--zug),
              color 0.2s var(--zug), box-shadow 0.2s var(--zug), transform 0.2s var(--zug);
}
.fx-btn i { font-style: normal; opacity: 0.55; font-weight: 500; font-size: 0.88em; }
.fx-pf { display: block; width: 1em; overflow: hidden; }
.fx-pf span { display: flex; transition: transform 0.34s var(--zug); }
.fx-pf b { flex: none; width: 1em; font-weight: 400; }
.fx-btn:hover .fx-pf span { transform: translateX(-1em); }

/* Farben stehen auf .fx-btn selbst und werden von keiner Linkregel
   getroffen. */
.fx-btn--voll { background: var(--tinte); color: var(--auf-tinte); box-shadow: var(--schatten-s); }
.fx-btn--voll:hover { background: var(--tinte-hover); transform: translateY(-1px); box-shadow: var(--schatten-m); }
/* Der zweite Knopf hatte auf Grau zu wenig Kontrast. Jetzt weiss mit
   voller Tintenkante, beim Ueberfahren umgekehrt — deutlich lesbar,
   ohne dem Hauptknopf die Aufmerksamkeit zu nehmen. */
.fx-btn--rand { background: var(--flaeche); color: var(--tinte); border-color: var(--tinte); }
.fx-btn--rand:hover { background: var(--tinte); color: var(--auf-tinte); }
.fx-btn--gelb { background: var(--gelb); color: var(--auf-gelb); font-size: clamp(1.05rem, 2vw, 1.2rem); height: 62px; padding: 0 40px; }
.fx-btn--gelb:hover { background: var(--gelb-hover); transform: translateY(-1px); }
.fx-btn--klein { height: 42px; padding: 0 20px; font-size: 0.88rem; }

/* ---- Hell/Dunkel-Knopf in der Kopfzeile ----
   Kreis statt Kapsel, 42px wie .fx-btn--klein daneben. Das Zeichen
   zeigt, was der Klick BRINGT: im Hellen der Mond, im Dunkeln die
   Sonne. Er steht LINKS vom Hauptknopf, der Ruf zur Tat bleibt das
   letzte Element der Zeile. */
.fx-thema {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid var(--kante);
  color: var(--tinte);
  transition: border-color 0.2s var(--zug), background 0.2s var(--zug);
}
.fx-thema:hover { border-color: var(--gelb); }
/* Das Zeichen und seine Bewegung stehen in fix30.css beschrieben;
   hier steht dieselbe Regel noch einmal, weil die Inhaltsebene
   fix30.css nicht laedt (Regel 1 im Kopf dieser Datei). */
.t-zeichen { width: 19px; height: 19px; overflow: visible; }
.t-zeichen path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
.t-sonne, .t-mond {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.t-zeichen path { transition: stroke-dashoffset 0.34s ease; }

/* Ruhezustand hell: der Mond steht da, denn das Zeichen zeigt, was der
   Klick BRINGT, nicht was gerade gilt. */
.t-sonne { transform: scale(0); transition-delay: 0.26s; }
.t-sonne path { stroke-dashoffset: 1; transition-delay: 0s; }
.t-mond { transform: scale(1); transition-delay: 0s; }
.t-mond path { stroke-dashoffset: 0; transition-delay: 0.26s; }

[data-thema="dunkel"] .t-sonne { transform: scale(1); transition-delay: 0s; }
[data-thema="dunkel"] .t-sonne path { stroke-dashoffset: 0; transition-delay: 0.26s; }
[data-thema="dunkel"] .t-mond { transform: scale(0); transition-delay: 0.26s; }
[data-thema="dunkel"] .t-mond path { stroke-dashoffset: 1; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .t-sonne, .t-mond, .t-zeichen path { transition: none; }
}
/* Wortmarke, Knopf und Tat sitzen rechts als eine Gruppe. */
.fx-kopf-tat { display: flex; align-items: center; gap: 12px; }
/* Unter 430px ist fuer beides kein Platz mehr: der Ruf zur Tat wandert
   in die mitlaufende Leiste am unteren Rand (.fx-leiste), die es auf
   dieser Seite ohnehin gibt. Oben bleibt die Wortmarke und der Knopf. */
@media (max-width: 520px) { .fx-kopf-tat { gap: 8px; } }
@media (max-width: 430px) { .fx-kopf-tat .fx-btn { display: none; } }

.fx-leise {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 8px 12px;
  color: var(--leise); font-size: 0.94rem; font-weight: 500; text-decoration: none;
  transition: color 0.2s var(--zug);
}
.fx-leise:hover { color: var(--tinte); }

/* ---- Kopfleiste: bewusst ohne Trennlinie ---- */
.fx-kopf { position: sticky; top: 0; z-index: 50; background: rgba(var(--grund-rgb), 0.82); backdrop-filter: saturate(180%) blur(14px); }
.fx-kopf-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 70px; }
/* flex: none, sonst zerquetscht die Gruppe rechts (Knopf + Tat) am
   schmalen Fenster die Wortmarke, und "FIX→30" bricht auf drei Zeilen.
   Nachgemessen bei 335px Fensterbreite. */
.fx-marke { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.fx-logo { font-weight: 800; font-size: 1.32rem; letter-spacing: -0.03em; color: var(--tinte); }
.fx-pfeil {
  display: inline-block; width: 0.63em; height: 0.5em; margin: 0 0.09em; vertical-align: 0.09em;
  fill: none; stroke: var(--gelb); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Quadratgitter ----
   Uebernommen aus fix30.css, hier eigenstaendig: ruhige graue Linien
   ueber dem Hero, darueber dieselben Linien in vollem CI-Gelb, per
   Radialmaske auf einen Kreis um den Zeiger beschnitten. Halbtrans-
   parentes Gelb kippt auf Weiss ins Blasse — die Daempfung zum Rand
   macht allein die Maske. Gesteuert von gitter.js. */
.fx-gitter {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--gitter-o, 1);
  background-image:
    linear-gradient(to right,  rgba(var(--tinte-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--tinte-rgb), 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Oben ausblenden — angeschnittene Zellen unter der Kopfzeile wirken
     unruhig. Unten auslaufen, das Gitter gehoert nur zum Hero. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 110px, black 52%, transparent 88%);
          mask-image: linear-gradient(to bottom, transparent 0, black 110px, black 52%, transparent 88%);
}
.fx-glut {
  position: absolute; inset: 0; display: block;
  background-image:
    linear-gradient(to right,  var(--gelb) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gelb) 1px, transparent 1px),
    linear-gradient(rgba(252, 197, 13, 0.05), rgba(252, 197, 13, 0.05));
  background-size: 56px 56px, 56px 56px, auto;
  opacity: 0; transition: opacity 0.4s ease;
  -webkit-mask-image: radial-gradient(150px circle at var(--gx, -500px) var(--gy, -500px), black, transparent 72%);
          mask-image: radial-gradient(150px circle at var(--gx, -500px) var(--gy, -500px), black, transparent 72%);
}
body.fx-glut-wach .fx-glut { opacity: 1; }
@media (hover: none) { .fx-glut { display: none; } }
@media (prefers-reduced-motion: reduce) { .fx-glut { transition: none; } }

/* Inhalt liegt ueber dem Gitter. */
.fx-kopf, main, .fx-fuss, .fx-leiste { position: relative; z-index: 1; }

/* ---- Hero ----
   Aufbau nach Vorlage: kleine graue Zeile, grosse Ueberschrift links,
   Knoepfe darunter, und der erklaerende Satz als SCHMALE Spalte weit
   rechts, unten buendig mit den Knoepfen. Die Spalte ist bewusst eng
   (rund ein Drittel) und der Satz klein — in der Vorlage sind es drei
   kurze Zeilen. Laeuft der Text auf fuenf Zeilen, kippt die Balance
   und der Hero wirkt wie zwei gleichwertige Spalten. */
/* NUR padding-top, niemals die Kurzform: .fx-hero sitzt am selben
   Element wie .fx-mitte, und "padding: X 0 0" loescht deren seitlichen
   Abstand — der Hero klebte dadurch am linken Rand. Gilt fuer jede
   Klasse, die mit .fx-mitte kombiniert wird. */
.fx-hero {
  padding-top: clamp(52px, 7vw, 92px);
  /* Unteres Polster NICHT vergessen: ohne es stoesst die Buehne direkt
     an das naechste Band, und dessen eigenes Polster liegt schon auf
     der grauen Flaeche — der Platzhalter klebte an der Kante. */
  padding-bottom: clamp(56px, 7vw, 100px);
  position: relative;
}

.fx-auge { font-size: 0.9rem; color: var(--leise); margin-bottom: 20px; }

.fx-hero > .fx-pille { margin-bottom: 24px; }

.fx-hero-satz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.54fr);
  gap: 28px clamp(40px, 7vw, 104px);
  align-items: end;
}
.fx-hero h1 { grid-column: 1; max-width: 13ch; margin-bottom: 30px; }
.fx-tat { grid-column: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.fx-hero-rechts { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-bottom: 4px; }
.fx-hero-rechts .fx-lead { font-size: 0.96rem; line-height: 1.62; }

@media (max-width: 900px) {
  .fx-hero-satz { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  .fx-hero h1 { max-width: 17ch; margin-bottom: 4px; }
  .fx-hero-rechts { grid-column: 1; grid-row: auto; padding-bottom: 0; }
  .fx-hero-rechts .fx-lead { font-size: 1.04rem; }
  .fx-tat { grid-column: 1; margin-top: 8px; }
}

/* ---- Buehne: das breite Bild unter dem Hero ----
   Wie in der Vorlage ueber die volle Spaltenbreite. Solange kein Foto
   da ist, steht ein Platzhalter, der als solcher erkennbar ist —
   nichts Halbfertiges, das man fuer Gestaltung halten koennte.
   AUSTAUSCHEN: <img> in .fx-buehne legen und .fx-platz entfernen. */
.fx-buehne {
  margin-top: clamp(40px, 5.5vw, 72px);
  border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--kante); background: var(--sanft);
}
.fx-buehne img { width: 100%; display: block; }
.fx-platz {
  aspect-ratio: 16 / 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 24px;
  /* Schraffur macht sofort klar: hier fehlt noch etwas. */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(var(--tinte-rgb), 0.035) 0 10px,
    transparent 10px 20px);
}
.fx-platz b { color: var(--leise); font-weight: 600; font-size: 0.95rem; }
.fx-platz span { color: var(--zart); font-size: 0.85rem; max-width: 34ch; }
@media (max-width: 700px) { .fx-platz { aspect-ratio: 4 / 3; } }

/* ---- Kennzahlen: Beschriftung oben, Werte auf gemeinsamer Grundlinie ---- */
.fx-fakten-titel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; text-align: center; margin-bottom: 40px; }
.fx-fakten-logo { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--kante2); border-radius: 12px; background: var(--flaeche); color: var(--tinte); line-height: 1; }
.fx-fakten-logo .fx-logo { font-size: 0.72em; white-space: nowrap; }
.fx-fakten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 0; padding: 0;
}
.fx-fakt {
  min-width: 0; min-height: 228px;
  display: flex; flex-direction: column;
  justify-content: space-between; gap: 56px;
  padding: 20px 22px 12px;
  border-left: 1px solid var(--kante2);
}
.fx-fakt dt {
  order: 2; white-space: nowrap;
  font-size: clamp(60px, 6.4vw, 88px); font-weight: 400;
  color: var(--tinte); letter-spacing: -0.065em; line-height: 1;
}
.fx-fakt dt span {
  font-size: 0.32em; letter-spacing: -0.035em; margin-left: 0.12em;
}
.fx-fakt dt.fx-fakt-wort {
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 1; padding-bottom: 5px; letter-spacing: -0.055em;
}
.fx-fakt dd {
  order: 1; margin: 0; max-width: 19ch;
  font-size: 0.85rem; line-height: 1.4; color: var(--stark);
}
@media (max-width: 900px) {
  .fx-fakt { padding-inline: 16px; }
}
@media (max-width: 720px) {
  .fx-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .fx-fakt { min-height: 176px; gap: 36px; padding: 12px 16px 8px; }
  .fx-fakt dt { font-size: clamp(56px, 12vw, 76px); }
  .fx-fakt dt.fx-fakt-wort { font-size: clamp(34px, 8vw, 48px); padding-bottom: 4px; }
}

/* ---- Abschnittskopf ---- */
.fx-kopfzeile { max-width: 42rem; margin: 0 0 clamp(36px, 5vw, 56px); }
.fx-kopfzeile h2 { margin-bottom: 14px; max-width: 20ch; }
/* Der Preisblock steht mittig: drei gleichrangige Varianten unter
   einer mittigen Ueberschrift lesen sich als Auswahl, linksbuendig
   dagegen als Aufzaehlung mit Anfang. */
.fx-kopfzeile--mitte { max-width: 44rem; margin-inline: auto; text-align: center; }
.fx-kopfzeile--mitte h2 { max-width: none; margin-inline: auto; }
.fx-kopfzeile--mitte .fx-lead { max-width: 34rem; margin-inline: auto; }

/* ---- Umschalter ---- */
/* ---- Steuerung: Bauart und Groesse ---- */
/* Untereinander: erst die Bauart, dann die Groesse. Nebeneinander
   konkurrierten zwei Bedienelemente um dieselbe Zeile; so liest es
   sich als Reihenfolge — was fuer ein Haus, wie gross. */
.fx-steuer {
  display: flex; flex-direction: column; align-items: center;
  gap: 26px; margin-bottom: 44px;
}

/* Bauart-Umschalter. Der Schieber ist eine eigene Flaeche HINTER den
   Knoepfen und das einzige, was sich bewegt — Symbol und Wort bleiben
   stehen, sonst zappelt der Wechsel. Breite und Position rechnet das
   Skript, damit unterschiedlich breite Woerter passen. */
.fx-typ {
  position: relative; display: inline-flex; padding: 5px;
  background: rgba(var(--tinte-rgb), 0.07); border-radius: 999px;
}
.fx-typ-schieber {
  position: absolute; top: 5px; bottom: 5px; left: 0;
  background: var(--flaeche); border-radius: 999px;
  box-shadow: 0 1px 3px rgba(var(--schatten-rgb), 0.14), 0 0 0 1px rgba(var(--tinte-rgb), 0.05);
  /* NUR transform animiert. Vorher lief auch die Breite mit, das ist
     ein Layout je Bild. Beide Knoepfe sind jetzt gleich breit, damit
     der Schieber seine Breite gar nicht aendern muss. */
  transition: transform 0.42s var(--zug);
}
.fx-typ button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; background: transparent; color: var(--leise);
  height: 46px; min-width: 150px; padding: 0 22px; border-radius: 999px;
  justify-content: center;
  font-size: 0.97rem; font-weight: 600; letter-spacing: -0.01em;
  transition: color 0.28s var(--zug);
}
.fx-typ button svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.42s var(--zug);
}
.fx-typ button:hover { color: var(--tinte); }
.fx-typ button[aria-pressed="true"] { color: var(--tinte); }
.fx-typ button[aria-pressed="true"] svg { transform: translateY(-1px) scale(1.06); }

/* Groessenregler */
.fx-regler { width: min(400px, 100%); }
.fx-regler-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.fx-regler-kopf label { font-size: 0.88rem; color: var(--leise); }
.fx-regler-kopf output {
  font-size: 1.05rem; font-weight: 600; color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.fx-regler input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; margin: 0;
  background: rgba(var(--tinte-rgb), 0.12);
  cursor: pointer;
}
/* Beide Schreibweisen einzeln — ein gemeinsamer Selektor wird von
   Browsern verworfen, die nur eine davon kennen. */
.fx-regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tinte); border: 3px solid var(--flaeche);
  box-shadow: 0 1px 4px rgba(var(--schatten-rgb), 0.28);
  transition: transform 0.16s var(--zug);
}
.fx-regler input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--flaeche);
  background: var(--tinte); box-shadow: 0 1px 4px rgba(var(--schatten-rgb), 0.28);
  transition: transform 0.16s var(--zug);
}
.fx-regler input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.14); }
.fx-regler input[type="range"]:active::-moz-range-thumb { transform: scale(1.14); }
.fx-regler-enden {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 0.76rem; color: var(--zart);
}
@media (max-width: 620px) {
  .fx-steuer { align-items: stretch; }
  .fx-typ { align-self: center; }
  .fx-regler { width: 100%; }
}

.fx-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.fx-karte {
  display: flex; flex-direction: column;
  /* --flaeche, nicht --grund: die Karte liegt AUF dem Blatt. Im Hellen
     sind beide weiss, im Dunkeln waere die Karte sonst dunkler als das
     Band unter ihr und wirkte eingestanzt statt aufgelegt. */
  /* KEINE Kante. Apple trennt Karten durch Flaechenunterschied und
     einen sehr weichen Schatten, nicht durch eine gezeichnete Linie —
     die Oberflaeche soll zuruecktreten, der Inhalt fuehren. Das Band
     unter den Karten ist ohnehin --sanft (#f5f5f7, exakt Apples
     Flaechengrau), die Karte reinweiss. Der Kontrast reicht. */
  background: var(--flaeche); border: 0; border-radius: var(--r-apple);
  padding: 44px 40px 36px;
  /* Zweistufiger Schatten: eine enge Kontaktkante plus ein weiter,
     sehr schwacher Wurf. Ein einzelner Schatten wirkt aufgeklebt. */
  box-shadow: 0 1px 2px rgba(var(--schatten-rgb), 0.04),
              0 10px 34px -12px rgba(var(--schatten-rgb), 0.13);
  transition: box-shadow 0.3s var(--zug), transform 0.3s var(--zug);
}
.fx-karte:hover { border-color: var(--tinte); box-shadow: var(--schatten-m); transform: translateY(-2px); }
/* Der Name traegt die Karte. Bei 1.12rem gegen 2.4rem Preis war er
   kaum mehr als eine Beschriftung; die Vorlage haelt rund 1:1,7. */
.fx-karte h3 { font-size: clamp(1.45rem, 2.4vw, 1.6rem); letter-spacing: -0.032em; }
/* min-height = genau zwei Zeilen (2 x 1.45), sonst stehen die Preise
   einzeiliger Karten hoeher als die der zweizeiligen. */
/* Der Abstand zur naechsten Gruppe steckt im Preis-Abstand, nicht
   hier — min-height muss die zwei Zeilen exakt halten. */
.fx-karte-was { margin-top: 9px; font-size: 0.9rem; color: var(--leise); min-height: 2.9em; line-height: 1.45; }
/* ---- Rollende Ziffern ----
   Jede Stelle ist ein Fenster von genau einer Zeilenhoehe, darin eine
   Spalte mit 0-9. Bewegt wird nur transform, also kein Layout.

   line-height MUSS hier 1 sein und die Hoehe genau 1em: die Rolle
   rechnet in em-Schritten, jede Abweichung laesst die Ziffern
   verrutschen. Deshalb steht beides ausdruecklich da und nicht
   geerbt. */
/* ---- Wortwechsel in der Ueberschrift ----
   Fenster mit fester Zeilenhoehe; das Wort faehrt darin hoch raus und
   von unten wieder herein. overflow: clip statt hidden, weil hidden
   auf einem Inline-Element einen Scrollbereich anlegen kann. */
/* Die Breite faehrt mit. BEWUSST, obwohl der Detektor Layout-
   Animationen anmerkt: die Alternative war eine feste Breite auf dem
   laengeren Wort, und dann stand beim kuerzeren dauerhaft eine Luecke
   von 16px im Satz ("fuer  Altbausanierung  in Wien"). Ein staendig
   sichtbarer Fehler wiegt schwerer als ein einmaliger 16px-Lauf auf
   einem kleinen Element, ausgeloest durch einen Klick. */
.fx-wechsel {
  display: inline-block; overflow: clip; vertical-align: bottom;
  transition: width 0.46s cubic-bezier(0.45, 0.05, 0.2, 1);
  /* Zeilenhoehe 1.12 ist KLEINER als die Schrift hoch ist: Ober- und
     Unterlaengen malen ausserhalb ihres Kastens, und overflow: clip
     schnitt dort ab — beim "g" von Altbausanierung sichtbar.
     Polster erweitert den Beschnittbereich, der negative Aussenabstand
     nimmt ihn aus dem Layout wieder heraus. Die Zeile rutscht also
     nicht, nur der Beschnitt sitzt weiter aussen. */
  padding: 0.2em 0 0.22em;
  margin: -0.2em 0 -0.22em;
}
.fx-wechsel-in {
  display: inline-block; white-space: nowrap;
  /* Dieselbe Kurve wie die Ziffernrollen, damit beides gleich atmet. */
  transition: transform 0.46s cubic-bezier(0.45, 0.05, 0.2, 1), opacity 0.3s ease;
}
.fx-wechsel-in.raus  { transform: translateY(-0.92em); opacity: 0; }
.fx-wechsel-in.unten { transform: translateY(0.92em);  opacity: 0; }
.fx-wechsel-in.ohne-fahrt { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-wechsel, .fx-wechsel-in { transition: none; }
}

.fx-zahl { display: inline-flex; align-items: baseline; }
.fx-z-sicht { display: inline-flex; align-items: baseline; }
/* Optisch weg, fuer Vorlesesoftware da. */
.fx-nur-lesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fx-z-stelle {
  display: inline-block; overflow: hidden;
  height: 1em; line-height: 1;
}
.fx-z-rolle {
  display: flex; flex-direction: column;
  /* Sanft an, sanft aus. Die vorige Kurve (0.22, 1, 0.36, 1) sprang
     fast sofort auf den Zielwert und kroch dann aus — schnappig, aber
     unruhig. Diese faehrt weich an und landet lang. */
  transition: transform 0.58s cubic-bezier(0.45, 0.05, 0.2, 1);
  will-change: transform;
}
.fx-z-rolle b { display: block; height: 1em; line-height: 1; font-weight: inherit; }
/* white-space: pre — sonst klappt das Leerzeichen vor dem €-Zeichen
   im Inline-Block zusammen und es steht "17.328€". */
.fx-z-fest { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: reduce) {
  .fx-z-rolle { transition: none; }
}

.fx-preis { margin-top: 32px; font-size: clamp(2.5rem, 4.2vw, 3.2rem); font-weight: 500; color: var(--tinte); letter-spacing: -0.045em; line-height: 1; }
/* Die kleine Zeile traegt jetzt den Bruttopreis und ist damit eine
   Pflichtangabe — deshalb etwas kraeftiger als eine reine Fussnote. */
.fx .fx-preis-neben { margin-top: 11px; font-size: 0.86rem; line-height: 1.6; color: var(--leise); }
/* "netto" direkt an der grossen Zahl, damit sie nicht falsch gelesen
   wird. Klein und still, aber unmittelbar daneben. */
.fx-preis em {
  font-style: normal; font-size: 0.3em; font-weight: 500;
  color: var(--leise); letter-spacing: 0; margin-left: 0.15em;
}
.fx-drin { list-style: none; margin: 34px 0 30px; flex: 1; }
.fx-drin li { position: relative; padding-left: 24px; font-size: 0.92rem; line-height: 1.5; margin-bottom: 13px; color: var(--stark); }
.fx-drin li:last-child { margin-bottom: 0; }
/* Punkt statt Haken — wie in der Vorlage. Ein Haken behauptet
   "erledigt", hier ist es schlicht eine Aufzaehlung. */
.fx-drin li svg { display: none; }
.fx-drin li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--leise);
}
/* Vollflaechig: ueber die ganze Kartenbreite UND gefuellt statt
   umrandet, wie in der Vorlage. Ein Umrissknopf ganz unten wirkt wie
   ein Nachgedanke; die gefuellte Flaeche schliesst die Karte ab. */
/* Tinte mit gelbem Hover — dasselbe Verhalten wie .lp-btn-hell im
   Deck. --auf-tinte, nicht #fff: im dunklen Modus kippen Flaeche und
   Schrift gemeinsam, ein hartes Weiss staende dort weiss auf hell. */
/* Apples Knopfradius ist praktisch eine volle Pille (980px in ihrem
   eigenen CSS). 999px ergibt dasselbe Bild. */
.fx-karte .fx-btn {
  width: 100%; height: 52px; border-radius: 999px;
  background: var(--tinte); border-color: var(--tinte); color: var(--auf-tinte);
}
.fx-karte .fx-btn:hover {
  background: var(--gelb); border-color: var(--gelb); color: var(--auf-gelb, #131313);
}
@media (max-width: 900px) { .fx-karten { grid-template-columns: 1fr; } }

/* ---- Ablauf: ruhige Karten mit Raum zwischen Nummer und Inhalt ---- */
.fx-ablauf-kopf { margin-top: clamp(120px, 14vw, 200px); }
.fx-schritte {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.fx-schritt {
  min-width: 0; min-height: 420px;
  display: flex; flex-direction: column;
  padding: 36px; border-radius: 24px;
  background: var(--sanft); color: var(--tinte);
}
.fx-schritt-nr {
  display: block; margin-bottom: 64px;
  font-size: 4rem; line-height: 1; letter-spacing: -0.05em;
  font-weight: 650; color: var(--tinte);
}
.fx-schritt h3 {
  margin-bottom: 14px; font-size: 1.3rem; line-height: 1.25;
  font-weight: 600; letter-spacing: -0.035em;
}
.fx-schritt p { max-width: 30ch; font-size: 0.94rem; color: var(--stark); line-height: 1.65; }
.fx-schritt-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; position: relative; top: 0;
  min-height: 48px; padding: 12px 18px;
  border: 1px solid var(--kante2); border-radius: 999px;
  color: var(--tinte); background: transparent;
  text-decoration: none; font-size: 0.85rem; font-weight: 600; line-height: 1.4;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.fx .fx-schritt p { margin-bottom: 32px; }
.fx-schritt-cta span { display: inline-block; font-size: 1.15rem; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.fx-schritt-cta:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .fx-schritt-cta:hover span { transform: translateX(3px); }
  .fx-schritt-cta:hover { background: var(--tinte); color: var(--auf-tinte); border-color: var(--tinte); }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .fx-schritt { padding: 28px; }
}
@media (max-width: 760px) {
  .fx-schritte { grid-template-columns: 1fr; gap: 16px; }
  .fx-schritt { min-height: 0; padding: 32px; }
  .fx-schritt-nr { margin-bottom: 44px; }
  .fx-schritt p { max-width: 42ch; }
}

/* ---- Zweispalter mit Bild ---- */
.fx-paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Zwei TEXTSPALTEN gehoeren oben buendig. Zentriert (der Normalfall
   fuer Text neben Bild) begann die kuerzere Spalte tiefer, und die
   beiden Zwischenueberschriften standen auf verschiedenen Hoehen. */
.fx-paar--oben { align-items: start; }
.fx-paar h2 { margin-bottom: 16px; }
.fx-liste { list-style: none; margin-top: 24px; }
.fx-liste li { position: relative; padding-left: 26px; font-size: 0.95rem; line-height: 1.5; margin-bottom: 12px; }
.fx-liste li svg { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; fill: none; stroke: var(--tinte); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fx-bild { border: 1px solid var(--kante); border-radius: var(--r-m); overflow: hidden; background: var(--sanft); box-shadow: var(--schatten-m); }
.fx-bild img { width: 100%; }
.fx-bild--doc { max-height: 540px; }
.fx-bild--doc img { object-fit: cover; object-position: top center; height: 540px; }
@media (max-width: 860px) { .fx-paar { grid-template-columns: 1fr; } }

/* ---- Vergleichsregler (aus fix30.css uebernommen) ---- */
.fx-ba { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-lage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ba-lage-v { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-lage-n { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-before, .ba-griff, .ba-lage { transition: clip-path 0.15s ease-out, left 0.15s ease-out; }
.ba--live .ba-before, .ba--live .ba-griff, .ba--live .ba-lage { transition: none; }
.ba-griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 40px; transform: translateX(-20px);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize; touch-action: none; z-index: 3;
}
.ba-griff::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
.ba-knopf { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.24); display: grid; place-items: center; }
.ba-knopf svg { width: 18px; height: 18px; fill: none; stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-tag { position: absolute; bottom: 12px; z-index: 2; font-size: 0.68rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(19,19,19,0.62); color: #fff; backdrop-filter: blur(6px); pointer-events: none; }
.ba-tag-v { left: 12px; }
.ba-tag-n { right: 12px; }

/* ---- Fragen: Karten mit Pluszeichen, wie im Deck ---- */
.fx-faq-satz { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: clamp(32px, 5vw, 56px); align-items: start; }
.fx-faq-kopf h2 { margin-bottom: 10px; }
.fx-faq-kopf p { margin-bottom: 22px; }
.fx-fragen { display: flex; flex-direction: column; gap: 12px; }
.fx-f {
  background: var(--sanft); border: 1px solid var(--kante);
  border-radius: var(--r-m); padding: 18px 22px;
  transition: border-color 0.2s var(--zug), background 0.2s var(--zug);
}
.fx-f:hover { border-color: var(--kante2); }
.fx-f[open] { background: var(--flaeche); }
.fx-f summary {
  cursor: pointer; list-style: none; display: flex; gap: 20px;
  align-items: center; justify-content: space-between;
  color: var(--tinte); font-weight: 600; font-size: 1rem; letter-spacing: -0.02em;
}
.fx-f summary::-webkit-details-marker { display: none; }
.fx-f summary i {
  font-style: normal; font-size: 1.5rem; font-weight: 300; line-height: 1;
  color: var(--stark); flex: none; transition: transform 0.3s var(--zug);
}
.fx-f[open] summary i { transform: rotate(45deg); }
.fx-f p { margin-top: 12px; font-size: 0.94rem; color: var(--leise); line-height: 1.6; }
@media (max-width: 820px) { .fx-faq-satz { grid-template-columns: 1fr; } }
/* Auf dem grauen Band kehren sich die Karten um, sonst verschwinden sie. */
.fx-band--sanft .fx-f { background: var(--flaeche); }
.fx-band--sanft .fx-f[open] { background: var(--flaeche); border-color: var(--kante2); }

/* ---- Abschluss: Kasten wie im Deck ---- */
.fx-schluss {
  background: var(--um-flaeche); border-radius: var(--r-xl);
  padding: clamp(56px, 8vw, 96px) 32px clamp(56px, 8vw, 92px);
  text-align: center; position: relative; overflow: hidden;
}
/* Nur ein dezenter, mit dem Zeiger wandernder Lichtschein. */
.fx-schluss::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(
    400px circle at var(--gx, 50%) var(--gy, 100%),
    rgba(var(--gelb-rgb),0.08), transparent 72%);
}
.fx-schluss.wach::before { opacity: 1; }
/* Ohne Maus gibt es nichts zu verfolgen. */
@media (hover: none) { .fx-schluss::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .fx-schluss::before { transition: none; } }
.fx-schluss > * { position: relative; z-index: 1; }
.fx-schluss .fx-pille { margin-bottom: 24px; }
.fx-schluss h2 { color: var(--um-schrift); margin-bottom: 16px; max-width: 22ch; margin-inline: auto; }
.fx-schluss > p { color: rgba(var(--um-schrift-rgb), 0.68); max-width: 38rem; margin: 0 auto 34px; font-size: 1.05rem; }
/* display: flex statt inline-flex — als Inline-Element stand der
   Termin-Link NEBEN dem Knopf, und margin-top konnte daran nichts
   aendern. Jetzt eigene Zeile, mittig unter dem Knopf. */
.fx-schluss .fx-leise {
  display: flex; justify-content: center;
  color: rgba(var(--um-schrift-rgb), 0.6); margin-top: 18px;
}
.fx-schluss .fx-leise:hover { color: var(--um-schrift); }

/* ---- Diagrammabschnitt: Text links, Balken rechts ----
   Nach goldsand.fi. Die Spalten sind ungleich breit: der Text traegt
   die Erklaerung und braucht Zeilenlaenge, das Diagramm kommt mit
   weniger aus. align-items: end setzt die Balken auf die Grundlinie
   des Textblocks. */
.fx-diagramm {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 88px); align-items: end;
}
.fx-diagramm-text h2 { margin-bottom: 16px; }
.fx-diagramm-text .fx-lead { margin-bottom: 22px; }
.fx-diagramm-text p + p { margin-top: 14px; }
.fx-diagramm-text > p:not(.fx-lead) { font-size: 0.97rem; }
@media (max-width: 900px) {
  .fx-diagramm { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
}

/* ---- Balkengrafik ----
   Nach dem Vorbild von goldsand.fi: Saeulen auf gemeinsamer Grundlinie,
   der Wert steht IM Balken unten, die Beschriftung darunter. Eine
   Saeule ist hervorgehoben.

   Die Hoehe kommt aus --hoch und wird beim Erscheinen von 0 auf den
   Zielwert gefahren. Animiert wird height, nicht transform: ein
   skalierter Balken zieht seine Beschriftung und die abgerundeten
   Ecken mit in die Laenge. Es sind sechs Elemente, die einmal
   wachsen — das ist vertretbar. */
.fx-balken-reihe {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
  height: 320px;
  /* KEIN align-items: end. Das verhindert das Dehnen der Spalten, und
     ohne gedehnte Spalte hat "height: X%" am Balken keine definierte
     Bezugsgroesse — alle Balken fielen auf die Mindesthoehe zurueck.
     Nach unten gedrueckt wird stattdessen INNERHALB der Spalte, per
     justify-content an .fx-balk. */
}
/* Drei statt sechs Saeulen: die Beschriftung sitzt IM Balken und
   braucht Breite. KEIN !important — sonst schlaegt diese Regel die
   Handy-Regel weiter unten, und die drei Balken blieben auch am
   Telefon nebeneinander (gemessen: sie liefen aus dem Bild). */
.fx-balken-reihe--drei { grid-template-columns: repeat(3, 1fr); }
.fx-balken-reihe--drei .fx-balk-saeule b { font-size: clamp(0.95rem, 1.5vw, 1.18rem); line-height: 1.25; }
.fx-balken-reihe--drei .fx-balk-name { white-space: normal; font-size: 0.82rem; line-height: 1.4; }

.fx-balk { display: flex; flex-direction: column; height: 100%; }
/* Eigenes Feld fuer die Saeule. Ohne das teilen sich Saeule und
   Beschriftung dieselbe Hoehe, und der hoechste Balken wird um die
   Beschriftung gestaucht — gemessen: Verhaeltnis 1,00 zu 0,99 statt
   1,00 zu 0,90. So bezieht sich die Prozenthoehe nur auf das Feld. */
.fx-balk-feld { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.fx-balk-saeule {
  display: flex; align-items: flex-end; width: 100%;
  height: calc(var(--hoch, 0) * 1%);
  min-height: 62px;
  background: rgba(var(--tinte-rgb), 0.07);
  border-radius: var(--r-m);
  padding: 16px;
  transition: height 1s cubic-bezier(0.32, 0.72, 0.26, 1);
}
.fx-balk-saeule b {
  font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-weight: 600;
  color: var(--leise); letter-spacing: -0.03em; white-space: nowrap;
}
.fx-balk--held .fx-balk-saeule { background: var(--tinte); }
.fx-balk--held .fx-balk-saeule b { color: var(--auf-tinte); }
.fx-balk-saeule b { white-space: normal; }
.fx-balk-name {
  margin-top: 14px; font-size: 0.86rem; color: var(--leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-balk--held .fx-balk-name { color: var(--tinte); font-weight: 600; }
@media (max-width: 760px) {
  /* Sechs Saeulen nebeneinander werden am Handy zu schmal fuer die
     Beschriftung — dann liegende Balken mit Namen daneben. */
  .fx-balken-reihe, .fx-balken-reihe--drei { grid-template-columns: 1fr; height: auto; gap: 10px; }
  .fx-balk { flex-direction: row; align-items: center; gap: 14px; height: auto; }
  .fx-balk-feld { flex: 1; }
  .fx-balk-saeule {
    height: 46px !important; min-height: 0;
    width: calc(var(--hoch, 0) * 1%); min-width: 68px;
    align-items: center; padding: 0 14px;
    transition: width 1s cubic-bezier(0.32, 0.72, 0.26, 1);
  }
  .fx-balk-name { margin-top: 0; flex: none; order: -1; width: 5.6rem; }
}
@media (prefers-reduced-motion: reduce) { .fx-balk-saeule { transition: none; } }

/* Titel und kurze Erklaerung bilden gemeinsam den Inhalt der Saeule. */
.fx-diagramm--kurz {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.fx-diagramm--kurz .fx-diagramm-text .fx-lead { margin-bottom: 0; }
.fx-diagramm--kurz .fx-balken-reihe { height: auto; }
.fx-diagramm--kurz .fx-balk-feld { flex: none; height: 380px; }
.fx-diagramm--kurz .fx-balk-saeule {
  flex-direction: column; align-items: flex-start; justify-content: flex-end;
  min-height: 180px; padding: 24px 20px; gap: 10px;
  color: var(--stark);
}
.fx-diagramm--kurz .fx-balk-saeule b { color: var(--tinte); font-size: 1.125rem; }
.fx-diagramm--kurz .fx-balk--held .fx-balk-saeule,
.fx-diagramm--kurz .fx-balk--held .fx-balk-saeule b { color: var(--auf-tinte); }
.fx-balk-erklaerung { font-size: 0.85rem; line-height: 1.5; }
@media (max-width: 900px) {
  .fx-diagramm--kurz { grid-template-columns: minmax(0, 1fr); }
  .fx-diagramm--kurz .fx-diagramm-text { max-width: 36rem; }
}
@media (max-width: 760px) {
  .fx-diagramm--kurz .fx-balken-reihe { gap: 16px; }
  .fx-diagramm--kurz .fx-balk { flex-direction: column; align-items: stretch; gap: 0; }
  .fx-diagramm--kurz .fx-balk-feld { height: auto; }
  .fx-diagramm--kurz .fx-balk-saeule {
    height: auto !important; min-height: 146px;
    min-width: min(250px, 100%); padding: 24px;
  }
}

.fx-zwischen { font-size: 1.15rem; margin-bottom: 10px; }

/* ---- Fuss ---- */
.fx-fuss {
  padding: 36px 0 48px; border-top: 1px solid var(--kante);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  font-size: 0.85rem; color: var(--zart);
}
.fx-fuss nav { display: flex; gap: 22px; }
.fx-fuss a { text-decoration: none; }
.fx-fuss a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Mitlaufender CTA, nur mobil ---- */
.fx-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  background: rgba(var(--grund-rgb), 0.94); backdrop-filter: blur(14px);
  border-top: 1px solid var(--kante);
  transform: translateY(102%); transition: transform 0.3s var(--zug);
}
.fx-leiste.da { transform: none; }
.fx-leiste .fx-btn { width: 100%; min-width: 0; padding: 0 16px; }
@media (max-width: 760px) { .fx-leiste { display: block; } body.fx { padding-bottom: 80px; } }

/* ---- Bewegung: ein Einzug beim Laden, sonst nichts ---- */
.js .fx-auf { opacity: 0; transform: translateY(12px); }
.js .fx-auf.da { opacity: 1; transform: none; transition: opacity 0.7s var(--zug), transform 0.7s var(--zug); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .fx-auf { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   DRUCKEN IST IMMER HELL. Ein dunkel gedrucktes Blatt ist
   unlesbar und kostet eine Tonerkassette. Die Werte sind die
   woertliche Kopie des hellen :root-Blocks oben. Wer dort
   eine Marke aendert, aendert sie hier mit.
   ------------------------------------------------------------ */
@media print {
  :root[data-thema="dunkel"] {
    --tinte:  #131313;
    --auf-tinte: #ffffff;   /* Schrift auf der Tintenflaeche */
    --tinte-hover: #000000;
    --stark:  #3d3d45;
    --leise:  #6f6f78;
    --zart:   #9a9aa2;
    --grund:  #ffffff;      /* das Blatt */
    --flaeche: #ffffff;     /* Karte auf dem Blatt */
    --sanft:  #f5f5f7;
    --kante:  #e0e0e6;
    --kante2: #c9c9d1;
    --gelb:   #fcc50d;
    --gelb-hover: #ffd23d;
    --grund-rgb: 255, 255, 255;
    --tinte-rgb: 19, 19, 19;
    --auf-tinte-rgb: 255, 255, 255;
    --schatten-rgb: 19, 19, 19;
    --auf-gelb: #131313;
    --auf-gelb-rgb: 19, 19, 19;
    --um-flaeche: var(--tinte);
    --um-schrift: var(--auf-tinte);
    --um-schrift-rgb: var(--auf-tinte-rgb);
    --r-s: 10px;
    --r-m: 14px;
  /* Apple setzt Karten auf einen deutlich weicheren Radius als
     uebliche 12-14px. 18px liest sich noch als Rechteck, nimmt der
     Flaeche aber die Haerte. */
  --r-apple: 18px;
    --r-l: 20px;
    --r-xl: 32px;
    --schatten-s: 0 1px 2px rgba(var(--schatten-rgb), 0.05);
    --schatten-m: 0 1px 2px rgba(var(--schatten-rgb), 0.05), 0 8px 24px -10px rgba(var(--schatten-rgb), 0.16);
    --zug: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
  }
}

/* Rollen nur die Ziffern, bleiben Einheiten und Spalten ruhig. */
.fx-fakt .fx-fakt-zahl { display: inline-flex; font: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; }
.fx-fakt-ziffer { display: inline-block; height: 1em; overflow: hidden; font: inherit; }
.fx-fakt-rolle, .fx-fakt-rolle em { display: block; font: inherit; line-height: 1; }
.fx-fakt-rolle em { height: 1em; }

/* Eigenstaendige Architekturillustration im Hero. */
.fx-modell { margin: clamp(40px, 5.5vw, 72px) 0 0; }
.fx-modell-bild {
  overflow: hidden; border-radius: 24px;
  border: 1px solid var(--kante); background: var(--flaeche);
}
.fx-modell-bild img { display: block; width: 100%; height: auto; transform-origin: 50% 65%; }
.fx-modell-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 4px 0; font-size: 0.8rem; color: var(--stark);
}
.fx-modell-hinweis { color: var(--leise); }
@media (max-width: 600px) {
  .fx-modell-bild { border-radius: 16px; }
  .fx-modell-fuss { align-items: flex-start; font-size: 0.75rem; }
  .fx-modell-hinweis { display: block; margin-top: 3px; }
}

/* Scrollgesteuerte Sanierung. Das Standbild bleibt der Ausweichinhalt. */
.fx-modell--3d { height: calc(160vh + 460px); }
.fx-modell-sticky { position: static; }
.fx-modell--3d .fx-modell-sticky { position: sticky; top: 90px; }
.fx-modell--3d .fx-modell-bild { position: relative; aspect-ratio: 8 / 3; }
.fx-modell-bild canvas { display: none; }
.fx-modell--3d .fx-modell-bild canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-modell--3d .fx-modell-bild img { visibility: hidden; }
.fx-modell-phasen { display: none; }
.fx-modell--3d .fx-modell-phasen { display: flex; justify-content: center; gap: clamp(20px,4vw,48px); padding-top: 22px; }
.fx-modell-phasen span { font-size: 0.8rem; color: var(--leise); padding-bottom: 8px; border-bottom: 2px solid transparent; }
.fx-modell-phasen .fx-phase-active { color: var(--tinte); border-color: var(--gelb); }
@media (max-width: 760px) {
  .fx-modell--3d { height: calc(120vh + 400px); }
  .fx-modell--3d .fx-modell-bild { aspect-ratio: 4 / 3; }
  .fx-modell--3d .fx-modell-bild img { height: 100%; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-schritt-cta, .fx-schritt-cta span { transition: none; }
  .fx-schritt-cta:hover span { transform: none; }
}

@media (min-width: 901px) {
  .fx-diagramm--kurz { align-items: start; }
  .fx-diagramm--kurz .fx-balken { padding-top: 0; }
}
/* Ganze Saeulen aufdecken, ohne Texte zu verzerren. */
.fx-balken--bereit .fx-balk-saeule {
  clip-path: inset(100% 0 0 0 round 14px);
  transition: clip-path 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}
.fx-balken--bereit .fx-balk--sichtbar .fx-balk-saeule { clip-path: inset(0 0 0 0 round 14px); }
@media (prefers-reduced-motion: reduce) {
  .fx-balken--bereit .fx-balk-saeule { clip-path: none; transition: none; }
}

@media (hover: hover) and (pointer: fine) {
  .fx-hero a[href="#preise"]:hover {
    background: var(--gelb); color: var(--auf-gelb); border-color: var(--gelb);
  }
}
@media (max-width: 480px) {
  .fx-karte .fx-btn { padding-inline: 14px; font-size: 0.84rem; white-space: normal; text-align: center; }
}
.fx-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-karte { min-width: 0; }
.fx-karte .fx-btn { padding-inline: 14px; font-size: 0.875rem; gap: 8px; white-space: normal; text-align: center; }
@media (max-width: 900px) { .fx-karten { grid-template-columns: minmax(0, 1fr); } }

/* Nettobetrag und Vergleichspreis gehoeren zusammen, Brutto folgt darunter. */
.fx-netto-gruppe {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; margin-top: 32px;
}
.fx-netto-gruppe .fx-preis { margin-top: 0; white-space: nowrap; }
.fx-preis-tag {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 6px 10px; border-radius: 8px;
  background: var(--sanft); color: var(--stark);
  font-size: 0.76rem; font-weight: 500; line-height: 1.4; white-space: nowrap;
}

/* Video folgt dem Scrollfortschritt, ohne automatische Wiedergabe. */
.fx-modell-video { display: none; }
.fx-modell--video .fx-modell-bild {
  position: sticky; top: var(--fx-video-top, 90px); aspect-ratio: 8 / 3;
}
.fx-modell--video .fx-modell-bild img { width: 100%; height: 100%; object-fit: contain; }
.fx-modell--video .fx-modell-video {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: var(--flaeche);
}
@media (max-width: 600px) {
  .fx-modell--video .fx-modell-bild { top: var(--fx-video-top, 80px); }
}

/* Fester Angebotsrahmen mit nacheinander erfassten Leistungspositionen. */
.fx-angebot-demo {
  min-width: 0; overflow: hidden; border: 1px solid var(--kante2);
  border-radius: 24px; background: var(--flaeche); color: var(--tinte);
  box-shadow: 0 16px 40px rgba(var(--schatten-rgb), 0.045);
}
.fx-angebot-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 24px; min-height: 60px; border-bottom: 1px solid var(--kante); }
.fx-angebot-marke { font-size: 0.85rem; font-weight: 750; letter-spacing: -0.035em; }
.fx-angebot-marke span { color: var(--leise); font-weight: 400; letter-spacing: 0; margin-left: 10px; }
.fx-angebot-demo-label { font-size: 0.7rem; color: var(--leise); }
.fx-angebot-workspace { min-width: 0; }
.fx-angebot-rail { display: flex; align-items: center; flex-direction: column; gap: 18px; border-right: 1px solid var(--kante); padding-top: 32px; background: var(--sanft); }
.fx-angebot-rail span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--zart); border-radius: 8px; }
.fx-angebot-rail .fx-angebot-rail-aktiv { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 3px rgba(var(--schatten-rgb), 0.08); }
.fx-angebot-demo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fx-angebot-blatt { padding: 24px 26px; }
.fx-angebot-kopf > span { color: var(--leise); font-size: 0.72rem; }
.fx-angebot-kopf h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.04em; margin: 0 0 24px; font-weight: 600; }
.fx-angebot-kopf p { font-size: 0.75rem; color: var(--leise); }
.fx-angebot-zeilen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fx-angebot-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--kante); border-radius: 10px; padding: 14px; }
.fx-angebot-zeile b { display: block; font-size: 0.82rem; font-weight: 550; }
.fx-angebot-zeile div > span { display: block; font-size: 0.71rem; color: var(--leise); margin-top: 4px; line-height: 1.5; }
.fx-angebot-zeile i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 0.75rem; background: var(--sanft); color: var(--stark); }
.fx-angebot-abschluss { display: flex; gap: 10px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--kante); }
.fx-angebot-siegel { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--gelb); color: var(--auf-gelb); }
.fx-angebot-abschluss b { display: block; font-size: 0.8rem; font-weight: 600; }
.fx-angebot-abschluss div > span { display: block; font-size: 0.67rem; color: var(--leise); margin-top: 3px; }
.fx-angebot-fuss { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 16px 4px 24px; border-top: 1px solid var(--kante); color: var(--leise); font-size: 0.67rem; }
.fx-angebot-replay { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--stark); cursor: pointer; }
.fx-angebot-replay[hidden] { display: none; }
.fx-angebot-replay:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .fx-angebot-replay:hover { background: var(--sanft); } }
@media (max-width: 480px) {
  .fx-angebot-zeilen { grid-template-columns: 1fr; }
  .fx-angebot-blatt { padding: 24px 16px; }
  .fx-angebot-toolbar { padding: 8px 16px; }
  .fx-angebot-zeile { padding: 12px; gap: 8px; }
}

/* Der gesamte Hero bleibt zusammen: Text, CTAs und Video. */
.fx-hero--pinned {
  position: sticky; top: 80px; height: calc(100svh - 80px);
  display: flex; flex-direction: column;
  padding-top: clamp(16px, 3vh, 32px); padding-bottom: 24px;
}
.fx-hero--pinned > .fx-pille { align-self: flex-start; flex-shrink: 0; margin-bottom: 16px; }
.fx-hero--pinned .fx-hero-satz { flex-shrink: 0; gap: 18px 48px; }
.fx-hero--pinned h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.08; max-width: 20ch; margin-bottom: 0; }
.fx-hero--pinned .fx-modell { flex: 1; min-height: 0; margin-top: 40px; }
.fx-hero--pinned .fx-modell-bild { position: relative; top: auto; height: 100%; aspect-ratio: auto; }
.fx-hero--pinned .fx-modell-bild img { height: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .fx-hero--pinned .fx-hero-satz { gap: 12px; }
  .fx-hero--pinned h1 { max-width: 20ch; }
  .fx-hero--pinned .fx-hero-rechts .fx-lead { font-size: 0.88rem; line-height: 1.5; }
  .fx-hero--pinned .fx-tat { margin-top: 0; }
  .fx-hero--pinned .fx-modell { margin-top: 32px; }
}
@media (max-height: 650px) {
  .fx-hero--pinned { height: auto; min-height: calc(100svh - 80px); }
  .fx-hero--pinned .fx-modell { flex: none; height: 160px; }
}

.fx-modell-video { transform-origin: 50% 55%; }

/* Kompakte Angebotsvorschau mit breiter Arbeitsfläche. */
.fx-angebot-aktionen { display: flex; align-items: center; gap: 12px; }
.fx-angebot-zeile { min-height: 78px; }
@media (min-width: 861px) {
  .fx-paar--angebot { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; }
}
.fx .fx-preis-neben { margin-left: 0; margin-right: 0; text-align: left; align-self: stretch; }
.fx-netto-gruppe .fx-zahl { margin-left: -0.025em; }

/* Keep the last decoded frame visible while the video decoder seeks. */
.fx-modell--render .fx-modell-bild .fx-modell-render {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: var(--flaeche);
}
.fx-modell--render .fx-modell-video { opacity: 0; pointer-events: none; }

/* Mobile hero: clear reading order and deliberate spacing, not viewport compression. */
@media (max-width: 600px) {
  .fx-hero, .fx-hero--pinned { height: auto; min-height: 0; padding-top: 32px; padding-bottom: 32px; }
  .fx-hero > .fx-pille { margin-bottom: 28px; font-size: 0.72rem; }
  .fx-hero .fx-hero-satz { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .fx-hero h1 { order: 0; margin: 0; font-size: clamp(28px, 8.2vw, 36px); line-height: 1.14; }
  .fx-hero .fx-hero-rechts { order: 1; align-self: stretch; margin-top: 24px; }
  .fx-hero .fx-hero-rechts .fx-lead { font-size: 0.96rem; line-height: 1.65; }
  .fx-hero .fx-tat { order: 2; margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
  .fx-hero .fx-tat .fx-btn { width: 100%; min-height: 50px; justify-content: center; padding-inline: 14px; }
  .fx-hero .fx-modell { flex: none; height: auto; margin-top: 40px; }
  .fx-hero .fx-modell-bild { height: auto; aspect-ratio: 3 / 2; }
  .fx-hero .fx-modell-bild img { width: 100%; height: 100%; object-fit: contain; }
}

.fx .fx-preise-hinweis { margin: 24px auto 12px; text-align: center; color: var(--leise); font-size: 0.85rem; line-height: 1.6; }
.fx-beispiel-details { max-width: 48rem; margin: 0 auto; color: var(--stark); font-size: 0.88rem; line-height: 1.65; }
.fx-beispiel-details summary { cursor: pointer; text-align: center; padding: 12px; font-weight: 550; }
.fx-beispiel-details > div { padding: 12px 20px 4px; }
.fx-beispiel-details p + p { margin-top: 12px; }
.fx-beispiel-details summary:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }