/* Fortunella v2 — Sektion 1 (Kopfleiste + Hero) massstabsgetreu nach der
   Figma-Vorgabe "Fortunella Web-Relaunch – Aug 26", Rahmen 14:1330.

   ---------------------------------------------------------------------------
   MASSSTAB
   Der Entwurf ist 1728px breit und haelt 128px Rand, der Inhalt misst also
   1472px. Diese Datei rechnet mit einer einzigen Groesse --s (Laenge je
   Entwurfspixel) und schreibt jedes Mass aus Figma als
   calc(var(--s) * <Figma-Wert>).

       --s = min(Fensterbreite / 1728, 1px)

   Bezug ist bewusst der ganze 1728er Rahmen, nicht nur die 1472px Inhalt:
   Die schwebenden Label reichen im Entwurf bis x=1671, also 71px ueber die
   Inhaltskante hinaus. Wuerde nur der Inhalt skalieren, schnitte das Fenster
   zwischen 1280px und 1615px die rechte Pille an. So passt der Entwurf immer
   vollstaendig ins Bild.

   Ab 1728px ist --s genau 1px — dann steht jedes Element auf dem gezeichneten
   Pixel; der Inhalt waechst nicht weiter, sondern bleibt bei 1472px.

   Unter 1400px traegt das nicht mehr: Fliesstext laege dann unter 16px.
   Ab dort greift der Fliess-Umbruch am Ende dieser Datei.

   KOORDINATEN
   Nullpunkt der Buehne ist die linke Inhaltskante (Figma x=128) und die
   Oberkante der Seite (Figma y=0). Ein Figma-Wert x wird also zu (x - 128),
   ein Figma-Wert y bleibt y. Die Kopfleiste liegt ueber der Buehne, wie im
   Entwurf — sie beansprucht keine eigene Hoehe im Fluss.

   SCHRIFT
   Inter, variabel, liegt lokal (assets/fonts/inter.woff2) und wird nicht von
   Google geladen. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter.woff2') format('woff2');
}

body.v2 {
  font-family: 'Inter', 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Der Entwurf setzt Flaechen und Schrift auf das gedeckte Schwarzgruen
     (#2A3D40), nicht auf das fast schwarze --ink von v1. */
  color: var(--ink-3);
  background: var(--white);
}
body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4 { font-family: inherit; }
body.v2 .container p { max-width: none; }

/* Fokusrahmen zweifarbig: ein dunkler Umriss mit weissem Zwischenring.
   Einfarbig traegt er nicht ueberall — das Markengruen kommt auf Weiss nur auf
   2,1:1, verlangt sind 3:1; ein dunkler Umriss allein verschwindet auf den
   dunklen Karten. Der weisse Ring fuellt genau den Versatz und macht den
   Umriss auch auf dunklem Grund sichtbar. */
.v2 :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ink-3);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--white);
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Der Massstab.
   .v2-rahmen ist der Bezugsrahmen fuer die Container-Abfrage; 100cqw ist die
   Fensterbreite ohne Bildlaufleiste. Kopfleiste und Hero erben --s daraus,
   damit beide exakt dasselbe Raster benutzen.

   .container bekommt in v2 seine Breite ebenfalls aus --s: 1472 Entwurfs-
   pixel. Der Rand daneben ist damit automatisch 128 Entwurfspixel, wie
   gezeichnet — und nicht die feste Polsterung aus ../styles.css. */
.v2-rahmen { container-type: inline-size; }
.v2-rahmen > * {
  --s: min(calc(100cqw / 1728), 1px);
}
.v2-rahmen .container {
  max-width: calc(var(--s) * 1472);
  padding-inline: 0;
}

/* Sprungziele freihalten.

   Die Kopfleiste klebt oben und ist 99 hoch. Ohne Abstand landet ein Sprung
   auf #cta oder #preise exakt an der Sektionskante, und die oberen 99 stecken
   hinter der Leiste: die Ueberschrift der Sektion ist dann unsichtbar. Der
   Abstand gilt fuer jedes Element mit Kennung, wirkt aber nur beim Springen. */
.v2-rahmen [id] { scroll-margin-top: calc(var(--s) * 99 + 24px); }

.v2-sprungmarke {
  position: absolute; left: 16px; top: 16px; z-index: 200;
  padding: 10px 16px; border-radius: 8px;
  background: var(--ink); color: var(--white); text-decoration: none;
  transform: translateY(-200%); transition: transform .2s;
}
.v2-sprungmarke:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   Kopfleiste (Figma 14:1405)
   Oberkante y=50, Zeilenhoehe 49, Inhaltsbreite 1472, dreigeteilt mit
   space-between. Liegt ueber dem Hero, damit die Hintergrundflaeche wie im
   Entwurf bis unter die Leiste laeuft. */
.v2-kopf {
  position: sticky; top: 0; z-index: 100;
  padding-top: calc(var(--s) * 50);
  background: transparent;
  transition: padding .25s, background .25s, box-shadow .25s;
}
/* Sobald die Seite laeuft, braucht die Leiste einen Grund: die Pillen sind
   weiss und stuenden sonst unsichtbar auf weissem Inhalt.

   Dabei wird die Polsterung ausgeglichen. Die 50 aus Figma sind der Abstand
   zur Seitenoberkante, nicht die Polsterung einer Leiste — als Leiste haette
   sie oben 53,5 und unten 3,5 Luft. Oben und unten je 25 ergibt dieselbe
   Gesamthoehe von 99, deshalb springt im Fluss nichts. */
.v2-kopf.gescrollt {
  padding-top: calc(var(--s) * 25);
  padding-bottom: calc(var(--s) * 25);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(42, 61, 64, 0.08);
}
.v2-kopfzeile {
  height: calc(var(--s) * 49);
  display: flex; align-items: center; justify-content: space-between;
}
.v2-logo { display: flex; flex-shrink: 0; }
.v2-logo img {
  display: block;
  width: calc(var(--s) * 203); height: calc(var(--s) * 42);
  object-fit: contain;
}

.v2-nav { display: flex; align-items: center; gap: calc(var(--s) * 14); }
.v2-nav-punkt { position: relative; }

/* Pille: Figma 7px oben, 8px unten, 16px links; mit Pfeil rechts 14px + 6px
   Abstand, ohne Pfeil rechts 16px. Die Schrift faellt nie unter 14px —
   sonst waere die Navigation zwischen 1400px und 1728px nicht mehr lesbar. */
.v2-pille {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--s) * 6);
  padding: calc(var(--s) * 7) calc(var(--s) * 16) calc(var(--s) * 8);
  background: var(--white); border: 0; border-radius: 100px;
  font: inherit;
  font-size: max(14px, calc(var(--s) * 16));
  font-weight: 500; line-height: 1.4; letter-spacing: 0.02em;
  color: var(--ink-3); text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.v2-pille.hat-menue { padding-right: calc(var(--s) * 14); }
.v2-pille[aria-expanded="true"] { background: var(--brand-100); color: var(--brand-800); }
.v2-pille .pfeil {
  display: block; flex-shrink: 0;
  width: calc(var(--s) * 5); height: calc(var(--s) * 4);
  transition: transform .25s;
}
.v2-pille[aria-expanded="true"] .pfeil { transform: rotate(180deg); }
@media (hover: hover) {
  .v2-pille:hover { background: var(--brand-50); }
}

.v2-kopf-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--s) * 8);
  padding: calc(var(--s) * 12) calc(var(--s) * 16) calc(var(--s) * 13) calc(var(--s) * 20);
  border-radius: 500px;
  background: var(--nav-cta); border: 1px solid var(--nav-cta);
  color: var(--white); text-decoration: none;
  font-size: max(14px, calc(var(--s) * 16)); font-weight: 600; line-height: 1.4;
  white-space: nowrap; flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.v2-kopf-cta img { display: block; width: calc(var(--s) * 19); height: calc(var(--s) * 19); }
@media (hover: hover) {
  .v2-kopf-cta:hover { background: var(--nav-cta-hover); border-color: var(--nav-cta-hover); }
}

/* Aufklappmenue — im Entwurf nicht gezeichnet, uebernimmt darum die
   Flaechenwerte von v1. */
.v2-menue {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 320px; padding: 10px; border-radius: 18px;
  background: var(--white); border: 1px solid var(--rule);
  box-shadow: var(--shadow-3);
}
.v2-menue a {
  display: block; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: var(--ink-3);
}
.v2-menue a:hover { background: var(--brand-50); }
.v2-menue b { display: block; font-weight: 500; font-size: 15px; }
.v2-menue span { display: block; font-size: 13px; color: var(--mute); }
/* Gruppen im Aufklappmenue: eine Ueberschrift je Ebene, die zweite durch
   eine Linie abgesetzt. Die Ueberschrift ist fuer die Vorlesehilfe
   ausgeblendet, dort traegt die Gruppe ihren Namen bereits als aria-label. */
.v2-menue-titel {
  margin: 0; padding: 6px 12px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #0F766E;
}
.v2-menue-gruppe + .v2-menue-gruppe {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule);
}

.v2-menue-btn { display: none; }

/* ---------------------------------------------------------------------------
   Hero
   Die Buehne beginnt an der Seitenoberkante (Figma y=0) und ist 1221 hoch —
   so weit reicht der Entwurf, bevor Sektion 2 einsetzt. Die Kopfleiste wird
   mit dem negativen Aussenabstand darueber gezogen; ihre Hoehe ist genau
   50 + 49 = 99 Entwurfspixel. */
.v2-hero {
  position: relative;
  overflow: hidden;                     /* haelt die Flaeche im Bild */
  margin-top: calc(var(--s) * -99);
}
.v2-buehne {
  position: relative;
  height: calc(var(--s) * 1221);
}

/* Hintergrundflaeche (Figma 14:1337): Rechteck 1104,71 x 1398,225, Ecken 240,
   um 105,61 Grad gedreht. Der aeussere Kasten ist die Huellflaeche aus Figma,
   der innere traegt Drehung und Verlauf. */
.v2-flaeche {
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--s) * 742);            /* Figma x 870 - 128 */
  top: calc(var(--s) * -238);
  width: calc(var(--s) * 1643.968);
  height: calc(var(--s) * 1440.288);
  display: flex; align-items: center; justify-content: center;
}
.v2-flaeche i {
  flex: none; display: block;
  width: calc(var(--s) * 1104.71);
  height: calc(var(--s) * 1398.225);
  border-radius: calc(var(--s) * 240);
  transform: rotate(105.61deg);
  background: url('assets/hero-flaeche.svg') center / 100% 100% no-repeat;
}

/* Geraet (Figma 14:1338) */
.v2-geraet {
  position: absolute; z-index: 1;
  left: calc(var(--s) * 802);            /* Figma x 930 - 128 */
  top: calc(var(--s) * 162);
  width: calc(var(--s) * 643);
  height: calc(var(--s) * 867);
  object-fit: contain;
}

/* Textspalte (Figma 14:1360): x 129, y 209, 877 breit, 784 hoch.
   Die feste Hoehe plus space-between erzeugt den grossen Abstand zwischen
   Fliesstext und Schaltflaechen, den der Entwurf zeigt. */
/* Abweichung vom Entwurf, bewusst gesetzt: Figma haengt die Schaltflaechen
   unten in die 784 hohe Textspalte, also auf y 934. Auf einem Notebook mit
   rund 750 Inhaltshoehe liegt die wichtigste Handlung der Seite damit unter
   der Falz, und zwischen Vorspann und Knoepfen steht 336 Leerraum. Die
   Spalte waechst deshalb mit ihrem Inhalt und setzt die Knoepfe mit 48 Luft
   direkt unter den Vorspann. Alles andere im Hero bleibt auf dem
   gezeichneten Platz: Flaeche, Geraet, Label, Linien, Sektionshoehe 1221. */
.v2-hero-kopie {
  position: absolute; z-index: 2;
  left: calc(var(--s) * 1);              /* Figma x 129 - 128 */
  /* Figma setzt 209. Die 20 mehr sind Absicht: die Textspalte sitzt damit
     ruhiger zwischen Kopfleiste und Geraet. Rechte Spalte, Flaeche, Label
     und Linien bleiben auf ihrem gezeichneten Platz. */
  top: calc(var(--s) * 229);
  width: calc(var(--s) * 877);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  gap: calc(var(--s) * 48);
}
.v2-hero-text {
  display: flex; flex-direction: column; align-items: flex-start;
  /* Figma setzt 44. Die Zeilenhoehe der Ueberschrift bringt oben rund 18
     zusaetzliche Luft mit. Gemessen von Textkante zu Textkante ergeben die
     Werte hier rund 24 — in allen Sektionen gleich. */
  gap: calc(var(--s) * 24);
  width: 100%;
}

.v2-eyebrow {
  display: inline-flex; align-items: center;
  gap: calc(var(--s) * 16);
  margin: 0;
  font-size: calc(var(--s) * 18); line-height: 1.4; letter-spacing: 0.02em;
  color: var(--ink-3); white-space: nowrap;
}
.v2-eyebrow img {
  display: block; flex-shrink: 0;
  width: calc(var(--s) * 17); height: calc(var(--s) * 18.7);
}

/* Ueberschrift: 47px, Zeilenhoehe 1,32, Zeilenabstand 14, Sperrung 0,006em.
   Die Zeilen sind im Entwurf breiter als die Spalte (bis 957px) und brechen
   nicht um — deshalb nowrap. */
/* Abweichung vom Entwurf, bewusst gesetzt: Figma zeichnet 47. Damit ist die
   laengste Zeile ("Mehr Aufmerksamkeit als das Intranet.") 874 breit in einer
   877 breiten Spalte und ragt 5 ueber die Kante der Mintflaeche. Bei 44 sind
   es 819, also 51 Luft bis zur Kante. Der Unterschied betraegt 6 Prozent und
   faellt ohne direkten Vergleich nicht auf. */
.v2-hero-kopie h1 {
  margin: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 14);
  font-size: calc(var(--s) * 44);
  font-weight: 300; line-height: 1.32; letter-spacing: 0.006em;
}
/* Die drei Zeilen sind eigene Elemente, die gezeichneten Umbrueche stehen
   also fest. Kein nowrap: eine spaeter im Editor verlaengerte Zeile bricht
   dann um, statt ueber die Kante zu laufen. */
.v2-hero-kopie h1 .zeile { display: block; white-space: normal; }
.v2-hero-kopie h1 b { font-weight: 600; }
.v2-hero-kopie h1 .akzent { color: var(--brand-500); }

.v2-hero-lead {
  margin: 0;
  width: calc(var(--s) * 647);
  font-size: calc(var(--s) * 20); line-height: 1.7;
  color: var(--ink-3);
}

.v2-hero-aktionen {
  display: flex; align-items: center;
  gap: calc(var(--s) * 24);
}

/* Schaltflaechen (Figma 14:1376 / 14:1380): vollstaendig gerundet, 1px Rahmen,
   16px halbfett, Innenabstand 17 oben / 18 unten. */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--s) * 8);
  padding: calc(var(--s) * 17) calc(var(--s) * 24) calc(var(--s) * 18) calc(var(--s) * 28);
  border-radius: 500px; border: 1px solid var(--ink-3);
  font: inherit; font-weight: 600; line-height: 1.4;
  /* Untergrenze wie bei der Navigation: unter 14px waere die Beschriftung
     der Hauptaktion zwischen 1400px und 1728px nicht mehr lesbar. */
  font-size: max(14px, calc(var(--s) * 16));
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.v2-btn.gefuellt { background: var(--ink-3); color: var(--white); }
.v2-btn.offen {
  background: transparent; color: var(--ink-3);
  padding-right: calc(var(--s) * 28);
}
.v2-btn img { display: block; width: calc(var(--s) * 19); height: calc(var(--s) * 19); }
@media (hover: hover) {
  .v2-btn.gefuellt:hover { background: var(--ink); border-color: var(--ink); }
  .v2-btn.offen:hover    { background: var(--brand-50); }
}

/* Verbindungslinien (Figma 14:1383 bis 14:1387): 1px in #C8C8C8, gedreht um
   ihren Mittelpunkt. Die Staerke bleibt bei 1px — eine mitskalierte Haarlinie
   wuerde auf einfachen Bildschirmen verschwinden. */
.v2-linie {
  position: absolute; z-index: 3;
  height: 1px; border-radius: 1px; background: #C8C8C8;
  transform-origin: 50% 50%;
}

/* Schwebende Label (Figma 14:1388 bis 14:1402): weiss, 1px Rahmen #DEDEDE,
   vollstaendig gerundet, 16px normal. */
.v2-marken { display: contents; }
.v2-label {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--s) * 17) calc(var(--s) * 28) calc(var(--s) * 18);
  border-radius: 500px;
  background: var(--white); border: 1px solid #DEDEDE;
  font-size: max(13px, calc(var(--s) * 16)); line-height: 1.4;
  color: var(--ink-3); white-space: nowrap;
}
.v2-label img { display: block; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Sektion 2 "Drei Branchen" (Figma 29:4182 ff. und 14:1429)

   Der Entwurf laesst die Sektion bei y=1168 beginnen, waehrend die Minzflaeche
   des Heros ganz rechts noch bis y=1202 reicht. Deshalb bleibt der Hero 1221
   hoch — auf sehr breiten Schirmen wuerde er die Flaeche sonst anschneiden —
   und Sektion 2 wird um die 53px Ueberlappung hochgezogen.
   Nullpunkt der Buehne: linke Inhaltskante (x=128), Sektionsbeginn (y=1168). */
.v2-branchen {
  position: relative;
  margin-top: calc(var(--s) * -53);
  --laufweg: 80vh;                       /* Scrollweg je Kartenwechsel */
  --buehne-hoehe: 600;                   /* Karte 510 hoch, mittig zur Textspalte */
}
/* Die Buehne bleibt stehen, waehrend der Stapel sie durchlaeuft. Die Strecke
   dafuer traegt der .container als Hoehe — nicht als Polsterung: Ein klebendes
   Element haftet nur innerhalb der Inhaltsbox seines Elternteils, Polsterung
   zaehlt dort nicht mit und die Strecke waere null. Nach dem letzten Wechsel
   loest sich die Buehne und die Seite scrollt normal weiter. */
/* Je Kartenwechsel ein Laufweg: bei vier Karten drei Wechsel. Die Zahl
   kommt aus components/branchen.jsx, damit eine weitere Karte nur dort
   eingetragen werden muss. */
.v2-branchen .container {
  height: calc(var(--s) * var(--buehne-hoehe) + (var(--karten, 3) - 1) * var(--laufweg));
}
.v2-branchen-buehne {
  position: sticky;
  /* Mindestens die Hoehe der Kopfleiste (99), sonst mittig im Fenster —
     die Buehne darf nie unter der Leiste verschwinden. */
  top: max(calc(var(--s) * 99), calc((100vh - var(--s) * var(--buehne-hoehe)) / 2));
  height: calc(var(--s) * var(--buehne-hoehe));
}

/* Jede Karte sitzt in einer Lage, die Platz, Groesse, Weichzeichnung und
   Schleier traegt. Die Werte kommen als Variablen aus branchen.jsx — beim
   ersten Bild stehen dort genau die Figma-Werte des gezeichneten Stapels. */
.v2-stapel { display: contents; }
.v2-karte-lage {
  position: absolute; left: 0; top: 0;
  /* Kartenmass kommt aus branchen.jsx, damit Stapel und Bewegung mit
     denselben Zahlen rechnen. */
  width: calc(var(--s) * var(--karte-breite));
  height: calc(var(--s) * var(--karte-hoehe));
  transform-origin: 0 0;
  transform: translate(calc(var(--s) * var(--x)), calc(var(--s) * var(--y)))
             scale(var(--sx), var(--sy));
  filter: blur(calc(var(--s) * var(--unschaerfe)));
  will-change: transform, opacity;
}
/* Der Schleier deckt die Karte ab, je weiter hinten desto staerker. */
.v2-schleier {
  position: absolute; inset: 0;
  border-radius: calc(var(--s) * 47);
  background: var(--white);
  opacity: var(--schleier);
  pointer-events: none;
}

.v2-karte {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; height: 100%;
  padding: calc(var(--s) * 40);
  border-radius: calc(var(--s) * 47);
  background: var(--ink-3);
  overflow: hidden;
}
.v2-karte-titel {
  margin: 0 0 calc(var(--s) * 8);
  font-size: calc(var(--s) * 42); font-weight: 700;
  line-height: calc(var(--s) * 60); letter-spacing: 0.00837em;
  color: #E8F4F2; white-space: nowrap;
}
.v2-karte-block { width: 100%; }
.v2-karte-block + .v2-karte-block { margin-top: calc(var(--s) * 24); }
.v2-karte-marke {
  margin: 0;
  font-size: max(12px, calc(var(--s) * 12)); font-weight: 700;
  line-height: calc(var(--s) * 16); letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Beide Farben sind gegenueber dem Entwurf aufgehellt. Auf dem dunklen Grund
   #2A3D40 kamen sie auf 3,6:1; fuer 12px fett verlangt WCAG 2.2 AA 4,5:1.
   Jetzt 5,1:1 und 5,0:1, der Farbton bleibt. */
.v2-karte-marke.problem { color: #E99982; }
.v2-karte-marke.loesung { color: #6BBAAB; }
.v2-karte-text {
  margin: calc(var(--s) * 12) 0 0;
  font-size: max(14px, calc(var(--s) * 16)); line-height: calc(var(--s) * 26);
  letter-spacing: -0.01875em; color: #C8DCD9;
}
/* Der Fuss sitzt unten: im Entwurf bleiben unter den Texten 57px Luft. */
.v2-karte-fuss {
  flex: 1 0 0; min-height: 0; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: calc(var(--s) * 8);
  padding-top: calc(var(--s) * 40);
}
.v2-karte-fuss-text {
  margin: 0;
  font-size: max(14px, calc(var(--s) * 14)); line-height: calc(var(--s) * 20);
  letter-spacing: -0.01074em; color: #C8DCD9;
}
.v2-karte-kennzahl {
  margin: 0;
  font-size: calc(var(--s) * 47); font-weight: 700;
  line-height: calc(var(--s) * 60); letter-spacing: 0.00561em;
  color: #33B9B0;
}

/* Textspalte (14:1429): x 1013, y 1221, 587 breit */
.v2-branchen-text {
  position: absolute;
  left: calc(var(--s) * 885);            /* Figma x 1013 - 128 */
  top: calc(var(--s) * 53);              /* Figma y 1221 - 1168 */
  width: calc(var(--s) * 587);
  display: flex; flex-direction: column; align-items: flex-start;
}
.v2-branchen-text .v2-eyebrow { margin-bottom: calc(var(--s) * 24); }

.v2-branchen-text h2 {
  margin: 0 0 calc(var(--s) * 28);
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: calc(var(--s) * 60);
  font-weight: 300; line-height: 1.35; letter-spacing: normal;
}
.v2-branchen-text h2 .zeile { display: block; }
.v2-branchen-text h2 b { font-weight: 600; }

.v2-branchen-lead {
  margin: 0 0 calc(var(--s) * 66);
  width: 100%;
  font-size: calc(var(--s) * 18); line-height: 1.7;
  color: var(--ink-3);
}

/* Merkmale (14:1443): Rahmen statt Flaeche, 9px oben / 10px unten,
   Zeilenumbruch nach 587px genau wie im Entwurf. */
.v2-merkmale {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-wrap: wrap; gap: calc(var(--s) * 18);
}
.v2-merkmal {
  display: inline-flex; align-items: center;
  gap: calc(var(--s) * 10);
  padding: calc(var(--s) * 9) calc(var(--s) * 16) calc(var(--s) * 10);
  border: 1px solid var(--ink-3); border-radius: 500px;
  font-size: max(13px, calc(var(--s) * 16)); font-weight: 600;
  line-height: 1.4; letter-spacing: 0.02em;
  color: var(--ink-3); white-space: nowrap;
}
.v2-merkmal img { display: block; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Sektion 3 "Weitere Einsatzmoeglichkeiten" (Figma 14:1358, 14:1359,
   14:1465, 14:1728)

   Nullpunkt der Buehne: linke Inhaltskante (x=128), Sektionsbeginn (y=1821).
   Die Sektion reicht bis 3195, wo Sektion 4 ansetzt — so weit laufen auch die
   beiden gedrehten Hintergrundflaechen. */
.v2-einsatz {
  position: relative;
  overflow: hidden;                      /* haelt beide Flaechen im Bild */
}
.v2-einsatz-buehne {
  position: relative;
  height: calc(var(--s) * 1374);         /* 1821 bis 3195 */
}

/* Beide Flaechen: aeusserer Kasten ist die Huellflaeche aus Figma, der innere
   traegt Drehung, Eckenradius und Fuellung. Reihenfolge wie gezeichnet —
   der Verlauf links liegt ueber dem Foto rechts. */
.v2-einsatz-foto, .v2-einsatz-flaeche {
  position: absolute; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.v2-einsatz-foto i, .v2-einsatz-flaeche i {
  flex: none; display: block;
  border-radius: calc(var(--s) * 240);
  overflow: hidden;
}
/* Das Foto liegt aus Figma nicht vor (die Bilddatei kommt leer zurueck).
   Bis es da ist, steht hier die Ersatzfarbe, die Figma selbst hinterlegt. */
.v2-einsatz-foto i {
  transform: rotate(100.87deg);
  background: #7C695A;
}
/* Figma dreht nur den Rahmen, nicht das Bild: die vorherrschende
   Kantenrichtung ist in Figmas Darstellung dieselbe wie im Rohbild (130 Grad).
   Der Kasten .richtung dreht deshalb zurueck und ist damit wieder
   achsenparallel zur Seite; er deckt die Huellflaeche des gedrehten Rahmens ab
   (1434,588 x 1167,986) und wird ueber negative Aussenabstaende zentriert —
   translate liefe entlang der gedrehten Achsen. */
.v2-einsatz-foto i { position: relative; }
.v2-einsatz-foto .richtung {
  position: absolute; left: 50%; top: 50%;
  display: block; overflow: hidden;
  transform: rotate(-100.87deg);
  transform-origin: 50% 50%;
}
/* Das Bild ist breiter als die Huellflaeche und sitzt rechtsbuendig: sonst
   laege das Handy bei Entwurfs-x 1572 bis 1923 und der Bildschirmrand bei
   1728 schnitte es zur Haelfte ab. */
.v2-einsatz-foto img {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  display: block; max-width: none;
}
.v2-einsatz-foto img:not([src]) { display: none; }
.v2-einsatz-flaeche i {
  transform: rotate(105.61deg);
  background: url('assets/einsatz-flaeche.svg') center / 100% 100% no-repeat;
}

/* Ueberschrift (14:1465), Abstand Eyebrow zu Ueberschrift 36 */
.v2-einsatz-text { position: absolute; }
.v2-einsatz-text .v2-eyebrow { margin-bottom: calc(var(--s) * 22); }
.v2-einsatz-text h2 {
  margin: 0;
  font-size: calc(var(--s) * 47);
  font-weight: 300; line-height: 1.35; letter-spacing: normal;
  color: var(--ink-3);
}
.v2-einsatz-text h2 b { font-weight: 600; }

/* Kacheln (14:1728). Der Umbruch nach 950px Breite erzeugt genau die
   gezeichneten zwei Reihen: drei Kacheln, dann zwei. */
.v2-kacheln {
  position: absolute;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: calc(var(--s) * 32);
}
.v2-kachel {
  display: flex; align-items: flex-start;
  gap: calc(var(--s) * 32);
  padding: calc(var(--s) * 20);
  border: 0; border-radius: calc(var(--s) * 22);
  background: var(--white);
  font: inherit; text-align: left; cursor: pointer;
  filter: drop-shadow(0 calc(var(--s) * 10) calc(var(--s) * 7.5) rgba(0, 0, 0, 0.1))
          drop-shadow(0 calc(var(--s) * 4)  calc(var(--s) * 3)   rgba(0, 0, 0, 0.1));
  transition: transform .2s;
}
@media (hover: hover) {
  .v2-kachel:hover { transform: translateY(-2px); }
}
.v2-kachel-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--s) * 55); height: calc(var(--s) * 55);
  border-radius: calc(var(--s) * 12);
  background: #E6F7F5;
}
.v2-kachel-icon img {
  display: block;
  width: calc(var(--s) * 24); height: calc(var(--s) * 24);
}
.v2-kachel-text {
  display: flex; flex-direction: column;
  gap: calc(var(--s) * 12);
  min-width: calc(var(--s) * 141);
}
.v2-kachel-titel {
  font-size: calc(var(--s) * 22); font-weight: 600;
  line-height: calc(var(--s) * 22.5); letter-spacing: -0.02em;
  color: #101828; white-space: nowrap;
}
.v2-kachel-link {
  display: inline-flex; align-items: center;
  gap: calc(var(--s) * 4);
  font-size: max(14px, calc(var(--s) * 14)); font-weight: 600;
  line-height: calc(var(--s) * 20); letter-spacing: -0.0107em;
  /* Der Entwurf setzt #0D9488. Auf Weiss sind das 3,74:1 — WCAG AA verlangt
     fuer Text dieser Groesse 4,5:1. Eine Stufe dunkler (#0F766E) erreicht
     5,0:1 und sieht im Vergleich unveraendert aus. Rueckbau: eine Zeile. */
  color: #0F766E; white-space: nowrap;
}
.v2-kachel-link img {
  display: block;
  width: calc(var(--s) * 14); height: calc(var(--s) * 14);
}

/* ---------- Detailfenster (im Entwurf nicht gezeichnet) ---------- */
.v2-dialog-grund {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  background: rgba(11, 26, 30, 0.55);
  backdrop-filter: blur(6px);
}
.v2-dialog {
  position: relative;
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px; background: var(--white);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
}
.v2-dialog-zu {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--rule);
  color: var(--ink-3); cursor: pointer;
}
.v2-dialog-kopf {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
  padding-right: 44px;
}
.v2-dialog-kopf .v2-kachel-icon { width: 56px; height: 56px; border-radius: 14px; }
.v2-dialog-kopf .v2-kachel-icon img { width: 24px; height: 24px; }
.v2-dialog-bereich {
  margin: 0 0 4px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mute);
}
.v2-dialog h3 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--ink-3);
}
.v2-dialog-block + .v2-dialog-block { margin-top: 24px; }
.v2-dialog-block p:not(.v2-dialog-marke) {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-3);
}
.v2-dialog-marke {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute);
}
.v2-dialog-marke.problem { color: #CB4924; }   /* heller Grund: dunkler statt heller, 4,6:1 */
.v2-dialog-marke.loesung { color: #0F766E; }   /* 3,7:1 waren zu wenig, jetzt 5,5:1 */
.v2-dialog-funktionen {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.v2-dialog-funktionen li {
  padding: 10px 14px; border-radius: 12px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  font-size: 13px; color: var(--ink-3);
}
.v2-dialog-fuss {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 12px;
}
/* Im Fenster steht der Knopf ausserhalb der Buehne, also ohne --s. */
.v2-dialog-fuss .v2-btn {
  font-size: 16px; gap: 8px;
  padding: 17px 24px 18px 28px;
}
.v2-dialog-fuss .v2-btn img { width: 19px; height: 19px; }

@media (max-width: 560px) {
  .v2-dialog-funktionen { grid-template-columns: 1fr; }
}

/* Sektion 3 im Fliess-Umbruch: Ueberschrift, dann Kacheln. Die beiden
   gedrehten Flaechen tragen bei schmalen Fenstern nicht mehr — an ihre Stelle
   tritt ein weicher Verlauf ueber der ganzen Sektion. */
@media (max-width: 1399px), print {
  .v2-einsatz {
    padding: clamp(56px, 8vw, 96px) 0;
    background: radial-gradient(110% 70% at 12% 30%, #F2FBFA 0%, #E4F4F2 45%, #FFFFFF 100%);
  }
  .v2-einsatz-buehne { height: auto; }
  .v2-einsatz-foto, .v2-einsatz-flaeche { display: none; }

  .v2-einsatz-text {
    position: static; width: 100% !important;
    margin-bottom: clamp(36px, 5vw, 56px);
  }
  .v2-einsatz-text .v2-eyebrow { margin-bottom: clamp(14px, 2vw, 22px); }
  .v2-einsatz-text h2 { font-size: clamp(28px, 4.4vw, 47px); }

  .v2-kacheln {
    position: static; width: 100% !important;
    gap: clamp(16px, 2.4vw, 32px);
  }
  .v2-kachel {
    gap: 20px; padding: 20px; border-radius: 22px;
    filter: drop-shadow(0 10px 7.5px rgba(0, 0, 0, 0.1))
            drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
  }
  .v2-kachel-icon { width: 55px; height: 55px; border-radius: 12px; }
  .v2-kachel-icon img { width: 24px; height: 24px; }
  .v2-kachel-text { gap: 10px; min-width: 0; }
  .v2-kachel-titel { font-size: 20px; line-height: 1.2; white-space: normal; }
  .v2-kachel-link { font-size: 14px; line-height: 20px; }
  .v2-kachel-link img { width: 14px; height: 14px; }
}

@media (max-width: 620px) {
  .v2-kacheln { flex-direction: column; }
  .v2-kacheln li { width: 100%; }
  .v2-kachel { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Sektion 4 "Funktionsuebersicht" (Figma 14:1476)

   Im Entwurf eine Spalte auf 1472: Kopfzeile 227 hoch, 111 Abstand, darunter
   Kartenraster (1084) und Merkmalstafel (339) mit space-between. Deshalb hier
   im Fluss statt absolut. Die Sektion reicht bis 4232, wo Sektion 5 ansetzt. */
.v2-funktionen {
  position: relative;
  padding-bottom: calc(var(--s) * 172);  /* 4060 bis 4232 */
}
.v2-funktionen-inhalt {
  display: flex; flex-direction: column;
  gap: calc(var(--s) * 111);
}

/* Kopfzeile (14:1477): beide Spalten unten buendig, 227 hoch */
.v2-funktionen-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  height: calc(var(--s) * 227);
}
.v2-funktionen-kopf-links {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 20);
  width: calc(var(--s) * 743);
}
.v2-funktionen-kopf h2 {
  margin: 0;
  font-size: calc(var(--s) * 60);
  font-weight: 300; line-height: 1.35; letter-spacing: normal;
  color: var(--ink-3);
}
.v2-funktionen-kopf h2 b { font-weight: 600; }
.v2-funktionen-lead {
  margin: 0;
  /* Figma setzt den Textkasten fest auf 546 x 76 und richtet ihn unten aus.
     Der Text fuellt zwei Zeilen (61,2) und sitzt oben im Kasten — ohne die
     feste Hoehe rutschte er 15px nach unten. */
  width: calc(var(--s) * 546);
  height: calc(var(--s) * 76);
  font-size: calc(var(--s) * 18); line-height: 1.7;
  color: var(--ink-3);
}

.v2-funktionen-unten {
  display: flex; align-items: flex-start; justify-content: space-between;
}

/* Kartenraster (14:1491): drei mal zwei auf 1084 x 527, Luft 37 */
.v2-funktionen-raster {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(var(--s) * 37);
  width: calc(var(--s) * 1084);
  height: calc(var(--s) * 527);
}
.v2-funktionen-raster > li { display: flex; }

.v2-funktionskarte {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--s) * 24);
  border-radius: calc(var(--s) * 22);
  background: #C6E8E5;
  transition: background .2s;
}
@media (hover: hover) {
  .v2-funktionskarte:hover { background: #B8E2DE; }
}
.v2-funktionskarte-text {
  display: flex; flex-direction: column;
  gap: calc(var(--s) * 8);
}
.v2-funktionskarte h3 {
  margin: 0;
  font-size: calc(var(--s) * 23); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01877em;
  color: var(--ink-3);
}
.v2-funktionskarte-text p {
  margin: 0;
  font-size: max(14px, calc(var(--s) * 14));
  line-height: calc(var(--s) * 22.75); letter-spacing: -0.01074em;
  color: var(--ink-3);
}
.v2-funktionskarte-knopf {
  display: inline-flex; align-items: center;
  gap: calc(var(--s) * 6);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit;
  font-size: max(14px, calc(var(--s) * 14)); font-weight: 500;
  line-height: calc(var(--s) * 20); letter-spacing: -0.01074em;
  color: var(--ink-3); white-space: nowrap;
}
.v2-funktionskarte-knopf .pfeil {
  display: inline-flex; padding: calc(var(--s) * 2);
  border-radius: 500px; background: #E8F4F4;
}
.v2-funktionskarte-knopf .pfeil img {
  display: block;
  width: calc(var(--s) * 14); height: calc(var(--s) * 14);
}
/* Die ganze Karte ist anklickbar, der Knopf bleibt aber ein einzelnes
   Bedienelement mit eigener Beschriftung. */
.v2-flaeche-knopf { position: absolute; inset: 0; border-radius: inherit; }
.v2-funktionskarte-knopf:focus-visible { outline: none; }
.v2-funktionskarte:has(.v2-funktionskarte-knopf:focus-visible) {
  outline: 3px solid var(--ink-3); outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--white);
}

/* Merkmalstafel (14:1558): 339 x 527, Grund #556466 */
.v2-funktionen-tafel {
  display: flex; flex-direction: column; justify-content: space-between;
  width: calc(var(--s) * 339);
  /* Gezeichnet sind 527. Als Mindestmass, nicht als feste Hoehe: sonst
     schneidet die Tafel ab, sobald in der Redaktion ein Punkt dazukommt. */
  min-height: calc(var(--s) * 527);
  gap: calc(var(--s) * 32);
  padding: calc(var(--s) * 36) calc(var(--s) * 32);
  border-radius: calc(var(--s) * 22);
  background: #556466;
}
.v2-tafel-titel {
  margin: 0;
  width: calc(var(--s) * 274);
  font-size: calc(var(--s) * 33);
  font-weight: 300; line-height: 1.35;
  color: #FEFEFE;
}
.v2-tafel-titel b { font-weight: 600; }
/* Zwei gleich breite Spalten statt zwei nach dem laengsten Wort. Mit
   max-content bestimmten die Eintraege die Breite, und sobald einer laenger
   wurde als gezeichnet, lief die rechte Spalte aus der Tafel heraus und
   wurde abgeschnitten. Redaktionelle Texte sind aber laenger oder kuerzer
   als der Entwurf, das muss die Tafel aushalten. */
.v2-tafel-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Breite der Tafel, nicht des laengsten Wortes. Ohne width und min-width
     nimmt sich das Raster als Flex-Kind so viel Platz, wie sein Inhalt
     verlangt, und schiebt die rechte Spalte aus der Tafel heraus. */
  width: 100%; min-width: 0;
  column-gap: calc(var(--s) * 24);
  row-gap: calc(var(--s) * 32);
}
.v2-tafel-gruppe {
  /* stretch statt flex-start: sonst nehmen Titel und Liste die Breite ihres
     laengsten Wortes und ragen aus der Spalte heraus, sobald ein Eintrag
     laenger ist als im Entwurf. Der Text bleibt trotzdem linksbuendig. */
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 0;
  gap: calc(var(--s) * 16);
}
.v2-tafel-gruppe-titel {
  display: flex; align-items: center;
  gap: calc(var(--s) * 10);
  margin: 0;
  font-size: max(14px, calc(var(--s) * 16)); font-weight: 600; line-height: 1.4;
  color: #FEFEFE;
}
.v2-tafel-gruppe-titel svg {
  display: block; flex-shrink: 0;
  width: calc(var(--s) * 16); height: calc(var(--s) * 16);
}
.v2-tafel-gruppe ul {
  list-style: none; margin: 0; padding: 0;
  font-size: max(14px, calc(var(--s) * 14)); line-height: 1.4;
  color: #FEFEFE;
  /* Lange Woerter wie "Terminabstimmungen" passen nicht in eine 125 breite
     Spalte. Mit Silbentrennung bekommen sie einen Trennstrich statt eines
     Bruchs mitten im Wort; break-word bleibt als Notnagel fuer Woerter, die
     auch die Trennung nicht klein genug bekommt. */
  hyphens: auto; overflow-wrap: break-word;
}
.v2-tafel-gruppe li + li { margin-top: calc(var(--s) * 6); }

/* Kennzahl im Funktionsfenster */
.v2-dialog-kennzahl {
  margin-top: 24px; padding: 16px 20px;
  border-radius: 16px; background: var(--brand-50);
  display: flex; align-items: baseline; gap: 12px;
}
.v2-dialog-kennzahl .wert {
  font-size: 28px; font-weight: 700; color: var(--brand-700);
}
.v2-dialog-kennzahl .was { font-size: 14px; color: var(--ink-3); }

/* Fliess-Umbruch */
@media (max-width: 1399px), print {
  .v2-funktionen { padding: clamp(56px, 8vw, 96px) 0; }
  .v2-funktionen-inhalt { gap: clamp(40px, 6vw, 72px); }
  .v2-funktionen-kopf {
    flex-direction: column; align-items: flex-start; height: auto;
    gap: clamp(24px, 3vw, 40px);
  }
  .v2-funktionen-kopf-links { width: 100%; gap: clamp(14px, 2vw, 26px); }
  .v2-funktionen-kopf h2 { font-size: clamp(30px, 5.2vw, 60px); }
  .v2-funktionen-lead { width: 100%; max-width: 640px; font-size: 18px; }

  .v2-funktionen-unten { flex-direction: column; gap: clamp(20px, 3vw, 37px); }
  .v2-funktionen-raster {
    width: 100%; height: auto;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 1fr;                 /* alle Karten gleich hoch, wie gezeichnet */
    gap: clamp(16px, 2.4vw, 37px);
  }
  .v2-funktionskarte { padding: 24px; border-radius: 22px; gap: 24px; }
  .v2-funktionskarte h3 { font-size: 21px; }
  .v2-funktionskarte-text { gap: 8px; }
  .v2-funktionskarte-text p { font-size: 14px; line-height: 22.75px; }
  .v2-funktionskarte-knopf { font-size: 14px; line-height: 20px; gap: 6px; }
  .v2-funktionskarte-knopf .pfeil { padding: 2px; }
  .v2-funktionskarte-knopf .pfeil img { width: 14px; height: 14px; }

  .v2-funktionen-tafel {
    width: 100%; height: auto;
    padding: 32px; border-radius: 22px; gap: 32px;
  }
  .v2-tafel-titel { width: auto; font-size: clamp(26px, 3.4vw, 33px); }
  .v2-tafel-raster {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 30px; row-gap: 32px;
  }
  .v2-tafel-gruppe { gap: 16px; }
  .v2-tafel-gruppe-titel { font-size: 16px; }
  .v2-tafel-gruppe-titel svg { width: 16px; height: 16px; }
  .v2-tafel-gruppe ul { font-size: 14px; }
  .v2-tafel-gruppe li + li { margin-top: 6px; }
}

/* ---------------------------------------------------------------------------
   Sektion 5 "Vorteile und Vergleich" (Figma 14:1582, 14:1593)

   Beide Bloecke sitzen bei Entwurfs-x 704, also 576 rechts vom Inhaltsrand.
   Die Tabelle ist 896 breit und endet damit genau auf 1600, der rechten
   Inhaltskante. Die Sektion reicht bis 5096, wo Sektion 6 ansetzt. */
.v2-vergleich {
  position: relative;
  overflow: hidden;                      /* haelt die Fotoflaeche im Bild */
  /* Die Flaeche links beginnt bei 4148, also 84 vor der Sektion. Der Kasten
     wird um diese 84 hochgezogen und legt sie als Polsterung wieder drauf —
     der Inhalt bleibt damit auf 4232, die Flaeche wird nicht angeschnitten. */
  margin-top: calc(var(--s) * -83.76);
  padding-top: calc(var(--s) * 83.76);
  padding-bottom: calc(var(--s) * 82);   /* 5014 bis 5096 */
}
.v2-vergleich .container { position: relative; }

/* Fotoflaeche links (14:1715). Aufbau wie in Sektion 3: aeusserer Kasten ist
   die Huellflaeche, i traegt Drehung und Maske, .richtung dreht zurueck. */
.v2-vergleich-foto {
  position: absolute; pointer-events: none;
  left: calc(var(--s) * -573.39);        /* Figma x -445,39 - 128 */
  top: calc(var(--s) * -83.76);          /* Figma y 4148,24 - 4232 */
  width: calc(var(--s) * 1096.996);
  height: calc(var(--s) * 931.887);
  display: flex; align-items: center; justify-content: center;
}
.v2-vergleich-foto i {
  position: relative; flex: none; display: block;
  width: calc(var(--s) * 978.365);
  height: calc(var(--s) * 775.378);
  border-radius: calc(var(--s) * 240);
  overflow: hidden;
  transform: rotate(-170.11deg);
  background: #7C695A;
}
.v2-vergleich-foto .richtung {
  position: absolute; left: 50%; top: 50%;
  display: block; overflow: hidden;
  width: calc(var(--s) * 1096.996);
  height: calc(var(--s) * 931.887);
  margin-left: calc(var(--s) * -548.498);
  margin-top: calc(var(--s) * -465.944);
  transform: rotate(170.11deg);
  transform-origin: 50% 50%;
}
.v2-vergleich-foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.v2-vergleich-foto img:not([src]) { display: none; }
.v2-vergleich-inhalt {
  margin-left: calc(var(--s) * 576);
  width: calc(var(--s) * 896);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 75);              /* 4232+227 bis 4534 */
}
.v2-vergleich-kopf {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 20);
  width: calc(var(--s) * 783);
}
.v2-vergleich-kopf h2 {
  margin: 0;
  font-size: calc(var(--s) * 60);
  font-weight: 300; line-height: 1.35; letter-spacing: normal;
  color: var(--ink-3);
}
.v2-vergleich-kopf h2 b { font-weight: 600; }

/* Nur fuer die Vorlesehilfe, nicht im Bild — der Entwurf zeichnet keine
   Tabellenbeschriftung, ohne sie stuende die Tabelle aber ohne Kontext. */
.v2-nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.v2-vergleich-rahmen {
  width: 100%;
  border-radius: calc(var(--s) * 20);
  overflow: hidden;
  box-shadow: 0 calc(var(--s) * 10) calc(var(--s) * 15) calc(var(--s) * -3) rgba(0, 0, 0, 0.1),
              0 calc(var(--s) * 4)  calc(var(--s) * 6)  calc(var(--s) * -4) rgba(0, 0, 0, 0.1);
}
.v2-vergleich-tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
.v2-vergleich-tabelle .spalte-kanal  { width: calc(var(--s) * 160); }
.v2-vergleich-tabelle .spalte-bisher { width: calc(var(--s) * 368); }
.v2-vergleich-tabelle .spalte-mit    { width: calc(var(--s) * 368); }

/* Kopfzeile: 48 hoch, 12px Versalien */
.v2-vergleich-tabelle thead th {
  height: calc(var(--s) * 48);
  padding: calc(var(--s) * 14) calc(var(--s) * 24);
  background: #E8E8E8;
  /* Der Entwurf setzt #6A7282. Auf #E8E8E8 sind das 3,95:1 — WCAG AA verlangt
     fuer 12px 4,5:1. Eine Spur dunkler (#5B6474) erreicht 4,81:1. Der
     Fliesstext derselben Farbe steht auf Weiss und kommt dort auf 4,84:1,
     bleibt also unveraendert. */
  color: #5B6474;
  font-size: max(12px, calc(var(--s) * 12)); font-weight: 600;
  line-height: calc(var(--s) * 15); letter-spacing: 0.0931em;
  text-transform: uppercase; white-space: nowrap;
}
.v2-vergleich-tabelle thead th.mit { background: #3D5254; color: #C6E8E5; }

/* Datenzeilen: 86,5 hoch, Inhalt oben */
.v2-vergleich-tabelle tbody th,
.v2-vergleich-tabelle tbody td {
  height: calc(var(--s) * 86.5);
  padding: calc(var(--s) * 20) calc(var(--s) * 24);
  vertical-align: top;
  background: var(--white);
  border-top: 1px solid #E5E7EB;
}
.v2-vergleich-tabelle tbody th {
  font-size: calc(var(--s) * 18); font-weight: 600;
  line-height: calc(var(--s) * 20); letter-spacing: -0.00836em;
  color: #101828; white-space: nowrap;
}
.v2-vergleich-tabelle tbody td {
  font-size: max(14px, calc(var(--s) * 14)); font-weight: 400;
  line-height: calc(var(--s) * 22.75); letter-spacing: -0.01074em;
  color: #6A7282;
}
.v2-vergleich-tabelle tbody td.mit {
  background: #35474A; border-top-color: #4A6264; color: #E5E7EB;
}
.v2-vergleich-tabelle .mit-inhalt {
  display: flex; align-items: flex-start;
  gap: calc(var(--s) * 12);
}
.v2-vergleich-tabelle .mit-inhalt img {
  display: block; flex-shrink: 0;
  width: calc(var(--s) * 14); height: calc(var(--s) * 14);
  margin-top: calc(var(--s) * 2);
}

/* Fliess-Umbruch: die Sektion rueckt an den linken Rand, die Tabelle rollt
   waagerecht, wenn sie nicht mehr passt. */
@media (max-width: 1399px), print {
  .v2-vergleich { margin-top: 0; padding: clamp(56px, 8vw, 96px) 0; }
  .v2-vergleich-foto { display: none; }
  .v2-vergleich-inhalt {
    margin-left: 0; width: 100%;
    gap: clamp(28px, 4vw, 48px);
  }
  .v2-vergleich-kopf { width: 100%; gap: clamp(14px, 2vw, 26px); }
  .v2-vergleich-kopf h2 { font-size: clamp(30px, 5.2vw, 60px); }

  .v2-vergleich-rahmen { border-radius: 20px; overflow-x: auto; }
  .v2-vergleich-tabelle { min-width: 720px; }
  .v2-vergleich-tabelle .spalte-kanal  { width: 140px; }
  .v2-vergleich-tabelle .spalte-bisher { width: 290px; }
  .v2-vergleich-tabelle .spalte-mit    { width: 290px; }
  .v2-vergleich-tabelle thead th {
    height: 48px; padding: 14px 20px;
    font-size: 12px; line-height: 15px;
  }
  .v2-vergleich-tabelle tbody th,
  .v2-vergleich-tabelle tbody td { height: auto; padding: 20px; }
  .v2-vergleich-tabelle tbody th { font-size: 17px; line-height: 20px; white-space: normal; }
  .v2-vergleich-tabelle tbody td { font-size: 14px; line-height: 22.75px; }
  .v2-vergleich-tabelle .mit-inhalt { gap: 12px; }
  .v2-vergleich-tabelle .mit-inhalt img { width: 14px; height: 14px; margin-top: 2px; }
}

/* ---------------------------------------------------------------------------
   Sektion 6 "Preise und Modelle" (Figma 14:1336, 14:1342, 14:1716, 14:1343)

   Nullpunkt: linke Inhaltskante (x=128), Sektionsbeginn (y=5096). Die Sektion
   reicht bis 5941, wo die getoente Flaeche der naechsten Sektion ansetzt.
   Beide gedrehten Flaechen laufen im Entwurf darueber hinaus; sie werden
   seitlich beschnitten (overflow-x: clip laesst die Hoehe frei) und
   verschwinden erst unter der naechsten Sektion. */
.v2-preise {
  position: relative;
  overflow-x: clip;
  height: calc(var(--s) * 845);          /* 5096 bis 5941 */
}
.v2-preise .container { position: relative; height: 100%; }

.v2-preise-foto, .v2-preise-flaeche, .v2-preise-kopf, .v2-preise-person {
  position: absolute;
}
.v2-preise-foto, .v2-preise-flaeche {
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.v2-preise-foto i, .v2-preise-flaeche i {
  flex: none; display: block; overflow: hidden;
}
.v2-preise-foto i {
  position: relative;
  border-radius: calc(var(--s) * 160);
  transform: rotate(168.32deg);
  background: #7C695A;
}
/* Wie in Sektion 3 und 5: Figma dreht den Rahmen, nicht das Bild. */
.v2-preise-foto .richtung {
  position: absolute; left: 50%; top: 50%;
  display: block; overflow: hidden;
  transform: rotate(-168.32deg);
  transform-origin: 50% 50%;
}
.v2-preise-foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.v2-preise-foto img:not([src]) { display: none; }
.v2-preise-flaeche i {
  border-radius: calc(var(--s) * 200);
  transform: rotate(168.32deg);
  background: url('assets/preise-flaeche.svg') center / 100% 100% no-repeat;
}

/* Ueberschrift (14:1716) */
.v2-preise-kopf {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 20);
}
.v2-preise-kopf h2 {
  margin: 0;
  font-size: calc(var(--s) * 60);
  font-weight: 600; line-height: 1.35; letter-spacing: normal;
  color: var(--ink-3); white-space: nowrap;
}

/* Ansprechpartner (14:1343): Portraet 177, dann Name und Wege mit je 40 Luft */
.v2-preise-person {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 24);
}
.v2-preise-name {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 18);
  width: 100%;
}
.v2-preise-name .name {
  margin: 0;
  font-size: calc(var(--s) * 33); font-weight: 600; line-height: 1.35;
  color: var(--ink-3);
}
.v2-preise-name .rolle {
  margin: 0;
  font-size: calc(var(--s) * 18); line-height: 1.4; letter-spacing: 0.02em;
  color: var(--ink-3);
}

.v2-preise-wege { display: flex; gap: calc(var(--s) * 16); }
/* Beide Knoepfe haben rechts 25 statt 24 und der zweite 10 statt 8 Luft. */
.v2-preise-wege .v2-btn { padding-right: calc(var(--s) * 25); }
.v2-preise-wege .v2-btn.offen { gap: calc(var(--s) * 10); }

/* Fliess-Umbruch: Ueberschrift, dann Ansprechpartner, Flaechen entfallen. */
@media (max-width: 1399px), print {
  .v2-preise {
    height: auto;
    padding: clamp(56px, 8vw, 96px) 0;
    background: radial-gradient(110% 70% at 80% 40%, #F2FBFA 0%, #E4F4F2 45%, #FFFFFF 100%);
  }
  .v2-preise-foto, .v2-preise-flaeche { display: none; }
  .v2-preise-kopf, .v2-preise-person {
    position: static; width: 100% !important;
  }
  .v2-preise-kopf { margin-bottom: clamp(36px, 5vw, 56px); gap: clamp(14px, 2vw, 26px); }
  .v2-preise-kopf h2 { font-size: clamp(28px, 5vw, 60px); white-space: normal; }
  .v2-preise-person { gap: clamp(18px, 2.5vw, 24px); max-width: 420px; }
  .v2-preise-name { gap: 12px; }
  .v2-preise-name .name { font-size: clamp(24px, 3.4vw, 33px); }
  .v2-preise-name .rolle { font-size: 17px; }
  .v2-preise-wege { gap: 12px; flex-wrap: wrap; }
  .v2-preise-wege .v2-btn { padding: 17px 25px 18px 28px; }
}

@media print {
  .v2-preise { background: none; }
}

/* ---------------------------------------------------------------------------
   Sektion 7 "Unsere Loesungen" (Figma 64:1754, 100:426, 64:1740)

   Nullpunkt: linke Inhaltskante (x=128), Sektionsbeginn (y=5941). Die
   getoente Flaeche reicht 1766 weit (bis 7707), der Kartenstapel etwas
   darueber hinaus — deshalb faerbt ein Verlauf nur den oberen Teil, statt die
   ganze Sektion einzufaerben.

   Der Stapel arbeitet mit position: sticky, ganz ohne Javascript: jede Karte
   sitzt unten in einem 760 hohen klebenden Kasten, die Kaesten ueberlappen
   sich um 250. Beim Scrollen bleibt eine Karte nach der anderen stehen und
   die naechste legt sich darueber. */
.v2-faelle {
  position: relative;
}
/* Die getoente Flaeche liegt im Entwurf UNTER der Fotoflaeche von Sektion 6,
   die bis 6111 herunterreicht. Als Hintergrund der Sektion wuerde sie sie
   ueberdecken, weil Sektion 7 spaeter gezeichnet wird. Als eigene Ebene mit
   z-index -1 kommt sie an die richtige Stelle: hinter alles Positionierte,
   aber vor dem Seitengrund. Hoehe 1766, also 5941 bis 7707. */
.v2-faelle::before {
  content: ''; position: absolute; z-index: -1;
  left: 0; right: 0; top: 0;
  height: calc(var(--s) * 1766);
  background: #E8F4F4;
}
.v2-faelle {
  /* Ein klebendes Element haftet bis seine RANDbox die Unterkante des
     Elternteils erreicht. Die Kaesten tragen -250 Rand, also koennen sie 250
     ueber das Spaltenende hinausgeschoben werden. Dazu ragt die Karte 28 aus
     dem kuerzesten Kasten heraus (490 hoch in 732 minus 270 Polsterung).
     Ohne die Zugabe von 278 liefen die Karten in die naechste Sektion.
     Diese 278 sind aber genau der Puffer und lassen keine Luft uebrig: die
     letzte Karte kaeme mit ihrer Unterkante exakt auf der Dachzeile der
     Blog-Sektion zu ruhen. Der Entwurf zeichnet dort 152 Luft (Unterkante
     letzte Karte 7762, Dachzeile 97:206 bei 7914), also 278 + 152. */
  padding-bottom: calc(var(--s) * 430);
}
.v2-faelle .container { padding-top: calc(var(--s) * 41); }   /* 5941 bis 5982 */

.v2-faelle-spalten {
  display: flex; align-items: flex-start;
  gap: calc(var(--s) * 201);             /* 1044 minus 128+715 */
}

/* --- Kartenstapel (100:426) --- */
.v2-faelle-karten {
  width: calc(var(--s) * 715);
  flex: none;
  display: flex; flex-direction: column;
}
.v2-fall-halter {
  position: sticky;
  /* Figma haengt die Karte unten in den 760 hohen Kasten, also 270 unter
     dessen Oberkante (760 minus Kartenhoehe 490). Das ist hier als Polsterung
     nachgebaut statt ueber justify-end — nur so bleibt der Versatz im Stapel
     auch beim Loesen erhalten. Die Klebekante zieht die 270 wieder ab, damit
     die Karte bei 190 zur Ruhe kommt: die Kopfleiste ist 99 hoch, damit
     bleiben 91 Luft darueber. Plus 14 je Karte fuer den Versatz. */
  padding-top: calc(var(--s) * 270);
  top: calc(var(--s) * (-80 + var(--fall-oben, 0)));
  /* Die Kastenhoehe traegt denselben Versatz nach unten. Sonst enden alle
     drei Kaesten an derselben Spaltenunterkante, sitzen beim Loesen genau
     uebereinander und der Versatz springt weg. */
  height: calc(var(--s) * (760 - var(--fall-oben, 0)));
  display: flex; flex-direction: column;
  /* Oben ausrichten, nicht unten: die Karten sind unterschiedlich hoch
     (445, 488, 445). Unten ausgerichtet stuenden ihre Oberkanten ungleich
     und der Stapel saehe schief aus. */
  justify-content: flex-start;
  margin-bottom: calc(var(--s) * -250);
}
/* Klebeweg fuer die letzte Karte. Ein klebendes Element kann sich nur
   innerhalb seines Elternteils bewegen; ohne diesen Auslauf endet der Kasten
   der letzten Karte genau am Spaltenende und sie kommt nie zur Ruhe. */
.v2-fall-auslauf { height: calc(var(--s) * 500); flex: none; }

.v2-fall {
  display: flex; align-items: stretch;
  /* Alle Karten gleich hoch. Ihre Texte sind verschieden lang (445 bis 488
     hoch); ohne gemeinsame Hoehe steht im gestapelten Zustand die laengste
     unten heraus und der Stapel wirkt schief. */
  min-height: calc(var(--s) * 490);
  border-radius: calc(var(--s) * 16);
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 calc(var(--s) * 10) calc(var(--s) * 15) calc(var(--s) * -3) rgba(0, 0, 0, 0.1),
              0 calc(var(--s) * 4)  calc(var(--s) * 6)  calc(var(--s) * -4) rgba(0, 0, 0, 0.1);
}
.v2-fall-text {
  flex: 1 1 0; min-width: 0;
  padding: calc(var(--s) * 40);
  border: 1px solid #E7E7E7;
  border-radius: inherit;
}
.v2-fall-text .marke {
  margin: 0 0 calc(var(--s) * 8);
  font-size: max(12px, calc(var(--s) * 12)); font-weight: 600;
  line-height: calc(var(--s) * 20); letter-spacing: -0.01253em;
  text-transform: uppercase; color: #0F766E;
}
.v2-fall-text h3 {
  margin: 0;
  font-size: calc(var(--s) * 33); font-weight: 700;
  line-height: 1.3; letter-spacing: 0.00213em;
  color: #111827;
}
.v2-fall-text blockquote {
  margin: calc(var(--s) * 20) 0 0;
  font-size: max(14px, calc(var(--s) * 14));
  line-height: calc(var(--s) * 22.75); letter-spacing: -0.01074em;
  color: #374151;
}
.v2-fall-text .stimme {
  margin: calc(var(--s) * 16) 0 0;
  font-size: max(14px, calc(var(--s) * 14));
  line-height: calc(var(--s) * 20); letter-spacing: -0.01074em;
  color: #6B7280;
}
.v2-fall-text hr {
  margin: calc(var(--s) * 24) 0 0;
  border: 0; height: 1px; background: #E5E7EB;
}
.v2-fall-zahlen {
  margin: calc(var(--s) * 24) 0 0;
  display: flex; gap: calc(var(--s) * 32);
}
.v2-fall-zahlen dt {
  font-size: calc(var(--s) * 30); font-weight: 700;
  line-height: calc(var(--s) * 36); letter-spacing: 0.01318em;
  color: #111827; white-space: nowrap;
}
.v2-fall-zahlen dd {
  margin: calc(var(--s) * 4) 0 0;
  font-size: max(12px, calc(var(--s) * 12));
  line-height: calc(var(--s) * 16);
  color: #6B7280; white-space: nowrap;
}
.v2-fall-bild { flex: none; width: calc(var(--s) * 218); }
.v2-fall-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Textspalte (64:1740) --- */
.v2-faelle-seite {
  flex: 1 1 auto; min-width: 0;
  margin-top: calc(var(--s) * 137);      /* 6119 minus 5982 */
  align-self: stretch;
}
.v2-faelle-seite-innen {
  position: sticky; top: calc(var(--s) * 120);
  display: flex; flex-direction: column;
  gap: calc(var(--s) * 64);
}
.v2-faelle-kopf {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 28);
}
/* Der Spaltenabstand betraegt 28; die Dachzeile rueckt 8 naeher an die
   Ueberschrift, der Vorspann behaelt seinen Abstand. */
.v2-faelle-kopf .v2-eyebrow { margin-bottom: calc(var(--s) * -8); }
.v2-faelle-kopf h2 {
  margin: 0;
  font-size: calc(var(--s) * 60); font-weight: 600;
  line-height: 1.35; letter-spacing: normal;
  color: var(--ink-3); white-space: nowrap;
}
.v2-faelle-lead {
  margin: 0;
  width: calc(var(--s) * 371);
  font-size: calc(var(--s) * 18); line-height: 1.7;
  color: var(--ink-3);
}

.v2-faelle-punkte {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: calc(var(--s) * 32);
}
.v2-faelle-punkte li {
  display: flex; align-items: flex-start;
  gap: calc(var(--s) * 16);
}
.v2-faelle-punkte li + li {
  border-top: 1px solid #D1D5DB;
  padding-top: calc(var(--s) * 32);
  margin-top: calc(var(--s) * -32);      /* Linie sitzt in der Luecke */
}
.v2-faelle-punkte .symbol {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--s) * 61); height: calc(var(--s) * 61);
  color: var(--ink-3);
}
.v2-faelle-punkte .symbol svg { width: 100%; height: 100%; }
.v2-faelle-punkte .wort {
  display: flex; flex-direction: column;
  gap: calc(var(--s) * 8);
}
.v2-faelle-punkte .titel {
  font-size: calc(var(--s) * 23); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01877em;
  color: var(--ink-3);
}
.v2-faelle-punkte .text {
  width: calc(var(--s) * 287);
  font-size: max(14px, calc(var(--s) * 14));
  line-height: calc(var(--s) * 22.75); letter-spacing: -0.01074em;
  color: var(--ink-3);
}

/* Fliess-Umbruch: Text zuerst, dann die Karten untereinander, ohne Kleben. */
@media (max-width: 1399px), print {
  .v2-faelle {
    background: #E8F4F4;
    padding: clamp(56px, 8vw, 96px) 0;
  }
  .v2-faelle::before { display: none; }
  .v2-faelle .container { padding-top: 0; }
  .v2-faelle-spalten { flex-direction: column; gap: clamp(32px, 5vw, 56px); }

  .v2-faelle-seite { order: 1; margin-top: 0; width: 100%; }
  .v2-faelle-seite-innen { position: static; gap: clamp(28px, 4vw, 48px); }
  .v2-faelle-kopf { gap: clamp(16px, 2.4vw, 28px); }
  .v2-faelle-kopf h2 { font-size: clamp(30px, 5.2vw, 60px); white-space: normal; margin-bottom: 0; }
  .v2-faelle-kopf .v2-eyebrow { margin-bottom: 0; }
  .v2-faelle-lead { width: 100%; max-width: 560px; font-size: 18px; }
  .v2-faelle-punkte { gap: 24px; }
  .v2-faelle-punkte li + li { padding-top: 24px; margin-top: -24px; }
  .v2-faelle-punkte .symbol { width: 48px; height: 48px; }
  .v2-faelle-punkte .wort { gap: 6px; }
  .v2-faelle-punkte .titel { font-size: 20px; }
  .v2-faelle-punkte .text { width: auto; font-size: 14px; line-height: 22.75px; }

  .v2-faelle-karten { order: 2; width: 100%; gap: clamp(20px, 3vw, 32px); }
  .v2-fall-halter {
    position: static; height: auto; margin-bottom: 0 !important;
  }
  .v2-fall-auslauf { display: none; }
  .v2-fall { border-radius: 16px; min-height: 0; }
  .v2-fall-text { padding: clamp(24px, 4vw, 40px); }
  .v2-fall-text h3 { font-size: clamp(22px, 3.4vw, 33px); }
  .v2-fall-text .marke { font-size: 12px; line-height: 20px; margin-bottom: 8px; }
  .v2-fall-text blockquote { font-size: 14px; line-height: 22.75px; margin-top: 20px; }
  .v2-fall-text .stimme { font-size: 14px; line-height: 20px; margin-top: 16px; }
  .v2-fall-text hr { margin-top: 24px; }
  .v2-fall-zahlen { margin-top: 24px; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; }
  .v2-fall-zahlen dt { font-size: clamp(24px, 3.4vw, 30px); line-height: 36px; }
  .v2-fall-zahlen dd { font-size: 12px; line-height: 16px; margin-top: 4px; }
  .v2-fall-bild { width: clamp(120px, 24vw, 218px); }
}

@media (max-width: 620px) {
  .v2-fall { flex-direction: column-reverse; }
  .v2-fall-bild { width: 100%; height: 180px; }
}

/* ---------------------------------------------------------------------------
   Sektion 8 "Unser Blog" (Figma 97:206, 100:415, 100:416, 98:241)
   Nullpunkt: linke Inhaltskante (x=128), Sektionsbeginn (y=7914).
   Die Sektion reicht bis 8674, wo Sektion 9 ansetzt. */
.v2-blog { position: relative; }
.v2-blog .container { position: relative; height: calc(var(--s) * 760); }
.v2-blog-kopf, .v2-blog-lead, .v2-blog-alle, .v2-blog-karten { position: absolute; }

.v2-blog-kopf {
  left: 0; top: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 20);
}
.v2-blog-kopf h2 {
  margin: 0;
  font-size: calc(var(--s) * 60); font-weight: 600;
  line-height: 1.35; letter-spacing: normal;
  color: var(--ink-3); white-space: nowrap;
}
.v2-blog-lead {                          /* Figma x 1187, y 7982 */
  margin: 0;
  left: calc(var(--s) * 1059); top: calc(var(--s) * 68);
  width: calc(var(--s) * 230);
  font-size: calc(var(--s) * 18); line-height: 1.7;
  color: var(--ink-3);
}
.v2-blog-alle {                          /* Figma x 1419, y 7984 */
  left: calc(var(--s) * 1291); top: calc(var(--s) * 70);
}

.v2-blog-karten {                        /* Figma x 128, y 8153 */
  left: 0; top: calc(var(--s) * 239);
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: calc(var(--s) * 33); align-items: stretch;
  width: 100%;
}
.v2-blog-karten > li { flex: 1 1 0; min-width: 0; display: flex; }
.v2-blog-karte {
  display: flex; flex-direction: column; flex: 1;
  border: 1px solid #E7E7E7; border-radius: calc(var(--s) * 16);
  background: var(--white); overflow: hidden;
  box-shadow: 0 calc(var(--s) * 10) calc(var(--s) * 15) calc(var(--s) * -3) rgba(0, 0, 0, 0.1),
              0 calc(var(--s) * 4)  calc(var(--s) * 6)  calc(var(--s) * -4) rgba(0, 0, 0, 0.1);
}
/* Das Bild ist ein Verweis auf den Artikel, wie die Ueberschrift. */
.v2-blog-bild { display: block; height: calc(var(--s) * 180); flex: none; }
.v2-blog-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-blog-inhalt {
  display: flex; flex-direction: column; flex: 1;
  padding: calc(var(--s) * 28);
}
.v2-blog-inhalt .marke {
  margin: 0 0 calc(var(--s) * 8);
  font-size: max(11px, calc(var(--s) * 11)); font-weight: 600;
  line-height: calc(var(--s) * 20); letter-spacing: 0.06em;
  text-transform: uppercase; color: #0F766E;
}
.v2-blog-inhalt h2,
.v2-blog-inhalt h3 {
  margin: 0 0 calc(var(--s) * 12);
  font-size: max(17px, calc(var(--s) * 21)); font-weight: 700;
  line-height: calc(var(--s) * 27.3); letter-spacing: -0.01667em;
  color: #111827;
}
/* Die Ueberschrift fuehrt zum Artikel und sieht aus wie zuvor: Der Verweis
   erbt Farbe und Schnitt, unterstrichen wird erst beim Zeigen. */
.v2-blog-inhalt h2 a,
.v2-blog-inhalt h3 a {
  color: inherit; text-decoration: none;
}
@media (hover: hover) {
  .v2-blog-inhalt h2 a:hover,
  .v2-blog-inhalt h3 a:hover { text-decoration: underline; }
}
.v2-blog-inhalt .text {
  margin: 0 0 calc(var(--s) * 8);
  font-size: max(13px, calc(var(--s) * 13));
  line-height: calc(var(--s) * 21.125); letter-spacing: -0.0077em;
  color: #374151;
}
.v2-blog-link {
  margin-top: auto; padding-top: calc(var(--s) * 16);
  display: inline-flex; align-items: center; gap: calc(var(--s) * 4);
  font-size: max(14px, calc(var(--s) * 14)); font-weight: 600;
  line-height: calc(var(--s) * 20); letter-spacing: -0.01074em;
  color: #0F766E; text-decoration: none; white-space: nowrap;
}
.v2-blog-link img { display: block; width: calc(var(--s) * 14); height: calc(var(--s) * 14); }
@media (hover: hover) { .v2-blog-link:hover { text-decoration: underline; } }

/* ---------------------------------------------------------------------------
   Sektion 9 "Kundenstimmen" (Figma 102:583, 102:571, 102:584, 102:443)
   Nullpunkt: x=128, Sektionsbeginn y=8674. Reicht bis 9646. */
.v2-stimmen { position: relative; overflow-x: clip; }
/* Die Karten stehen im Fluss, nicht absolut: Redaktionelle Zitate sind laenger
   als die im Entwurf, und bei fester Hoehe liefen sie unter den folgenden
   Abschnitt. So waechst die Sektion mit. Die Figma-Hoehe bleibt Untergrenze,
   das Polster oben entspricht dem Abstand der Karten (Figma y 8757 gegen
   Sektionsbeginn 8674), das untere haelt sie von der Abschlusskarte frei,
   die 76 Einheiten in diese Sektion hineinragt. */
.v2-stimmen .container {
  position: relative;
  min-height: calc(var(--s) * 972);
  padding-top: calc(var(--s) * 83);
  padding-bottom: calc(var(--s) * 140);
}
.v2-stimmen-flaeche, .v2-stimmen-kopf, .v2-stimmen-zahlen {
  position: absolute;
}
.v2-stimmen-flaeche {
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.v2-stimmen-flaeche i {
  flex: none; display: block;
  border-radius: calc(var(--s) * 200);
  transform: rotate(-172.34deg);
  background: url('assets/stimmen-flaeche.svg') center / 100% 100% no-repeat;
}

.v2-stimmen-kopf {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--s) * 22);
}
.v2-stimmen-kopf h2 {
  margin: 0;
  font-size: calc(var(--s) * 60); font-weight: 300;
  line-height: 1.35; letter-spacing: normal;
  color: var(--ink-3);
}
.v2-stimmen-kopf h2 b { font-weight: 600; }

.v2-stimmen-zahlen {
  margin: 0;
  display: flex; gap: calc(var(--s) * 33);
}
.v2-stimmen-zahlen > div { display: flex; align-items: center; gap: calc(var(--s) * 12); }
.v2-stimmen-zahlen dt {
  font-size: calc(var(--s) * 47); font-weight: 600;
  line-height: 1.2; letter-spacing: 0.00841em;
  color: var(--ink-3); white-space: nowrap;
}
.v2-stimmen-zahlen dd {
  margin: 0;
  width: calc(var(--s) * 103);
  font-size: max(14px, calc(var(--s) * 16)); line-height: 1.5;
  color: #5B6474;
}

.v2-stimmen-karten {
  /* Linker Abstand statt "left": die Karten stehen im Fluss (Figma x 746,
     Inhaltskante 128). */
  list-style: none; margin: 0 0 0 calc(var(--s) * 618); padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--s) * 20);
}
.v2-stimmen-karten > li { display: flex; }
.v2-stimme {
  margin: 0; flex: 1;
  display: flex; flex-direction: column; gap: calc(var(--s) * 24);
  padding: calc(var(--s) * 28);
  border: 1px solid #F3F4F6; border-radius: calc(var(--s) * 16);
  background: var(--white);
  filter: drop-shadow(0 calc(var(--s) * 1) calc(var(--s) * 1.5) rgba(0, 0, 0, 0.1))
          drop-shadow(0 calc(var(--s) * 1) calc(var(--s) * 1)   rgba(0, 0, 0, 0.1));
}
.v2-stimme .sterne { margin: 0; display: flex; gap: calc(var(--s) * 4); }
.v2-stimme .sterne img { display: block; width: calc(var(--s) * 20); height: calc(var(--s) * 20); }
.v2-stimme blockquote {
  margin: 0;
  font-size: max(14px, calc(var(--s) * 15.2)); line-height: calc(var(--s) * 24.7);
  color: #364153;
}
.v2-stimme figcaption {
  margin-top: auto;
  display: flex; align-items: center; gap: calc(var(--s) * 12);
}
.v2-stimme .kuerzel {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--s) * 44); height: calc(var(--s) * 44);
  border-radius: 50%; background: var(--brand-100);
  font-size: max(14px, calc(var(--s) * 14)); font-weight: 600; color: var(--brand-800);
}
.v2-stimme .wer { display: flex; flex-direction: column; }
.v2-stimme .name {
  font-size: max(14px, calc(var(--s) * 15)); font-weight: 600; color: var(--ink-3);
}
.v2-stimme .rolle {
  font-size: max(13px, calc(var(--s) * 13)); color: #5B6474;
}

/* ---------------------------------------------------------------------------
   Sektion 10 "Demo in 20 Minuten" (Figma 111:736, 106:606)
   Nullpunkt: x=128, Sektionsbeginn y=9646. Reicht bis 10578, dem Seitenende. */
/* Auch senkrecht beschneiden: die Verlaufsflaeche reicht im Entwurf bis 10767,
   die Seite endet aber bei 10578. Ohne den Schnitt haengt sie 189 unter dem
   Fussbereich heraus und verlaengert die Seite um einen weissen Streifen. */
/* Der Fussbereich beginnt im Entwurf 76 ueber dieser Sektion (y 9570 statt
   9646) und zeigt dort seine 64er Ecke. Der Schnitt oben wuerde beides
   wegnehmen, deshalb faengt die Sektionsbox selbst 76 hoeher an und holt den
   Versatz mit Polsterung wieder auf: die Kante wandert nach oben, der Inhalt
   bleibt bei 9646 stehen. Unterkante und Seitenhoehe aendern sich nicht. */
.v2-abschluss {
  position: relative; overflow: hidden;
  margin-top: calc(var(--s) * -76);
  padding-top: calc(var(--s) * 76);
}
.v2-abschluss .container { position: relative; height: calc(var(--s) * 932); }
.v2-abschluss-flaeche { position: absolute; }
.v2-abschluss-karte { position: absolute; z-index: 1; }
.v2-abschluss-flaeche {
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.v2-abschluss-flaeche i {
  flex: none; display: block;
  border-radius: calc(var(--s) * 200);
  transform: rotate(170.76deg);
  background: url('assets/abschluss-flaeche.svg') center / 100% 100% no-repeat;
}

.v2-abschluss-karte {
  display: flex; align-items: stretch;
  width: calc(var(--s) * 1024);
  min-height: calc(var(--s) * 873.5);
  border-radius: calc(var(--s) * 16);
  background: #C6E8E5;
  overflow: hidden;
  box-shadow: 0 calc(var(--s) * 25) calc(var(--s) * 50) calc(var(--s) * -12) rgba(0, 0, 0, 0.25);
}
.v2-abschluss-links {
  flex: none; width: calc(var(--s) * 503);
  padding: calc(var(--s) * 48);
  display: flex; flex-direction: column; align-items: flex-start;
}
.v2-abschluss-links h2 {
  margin: 0;
  font-size: calc(var(--s) * 48); font-weight: 700;
  line-height: calc(var(--s) * 60); letter-spacing: normal;
  color: var(--ink-3);
}
/* Der Entwurf setzt #0D9488. Auf #C6E8E5 sind das 2,3:1 — verlangt sind 3:1
   fuer grosse Schrift. #0B5F58 erreicht 4,6:1 und bleibt derselbe Ton. */
.v2-abschluss-links h2 b { color: #0B5F58; font-weight: 700; }
.v2-abschluss-links .lead {
  margin: calc(var(--s) * 16) 0 0;
  width: calc(var(--s) * 384);
  font-size: max(14px, calc(var(--s) * 16)); line-height: calc(var(--s) * 26);
  color: rgba(42, 61, 64, 0.85);
}
.v2-abschluss-fortschritt {
  width: 100%; margin-top: calc(var(--s) * 32);
}
.v2-abschluss-fortschritt .balken {
  height: 1px; background: rgba(42, 61, 64, 0.2);
}
.v2-abschluss-fortschritt .balken i {
  display: block; height: 1px; background: rgba(42, 61, 64, 0.6);
  transition: width .3s;
}
.v2-abschluss-fortschritt p {
  margin: calc(var(--s) * 8) 0 0;
  font-size: max(12px, calc(var(--s) * 12)); line-height: calc(var(--s) * 16);
  letter-spacing: 0.05em; text-align: right;
  color: rgba(42, 61, 64, 0.65);
}
.v2-abschluss-frage, .v2-abschluss-rat { width: 100%; }
.v2-abschluss-frage .nummer, .v2-abschluss-rat .nummer {
  margin: calc(var(--s) * 24) 0 0;
  font-size: max(12px, calc(var(--s) * 12)); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(42, 61, 64, 0.65);
}
.v2-abschluss-frage h3, .v2-abschluss-rat h3 {
  margin: calc(var(--s) * 8) 0 0;
  font-size: calc(var(--s) * 20); font-weight: 600; line-height: 1.3;
  color: var(--ink-3);
}
.v2-abschluss-antworten {
  list-style: none; margin: calc(var(--s) * 20) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: calc(var(--s) * 8);
}
.v2-abschluss-antworten button {
  width: 100%; text-align: left; cursor: pointer;
  padding: calc(var(--s) * 12) calc(var(--s) * 20);
  border: 1px solid rgba(42, 61, 64, 0.2); border-radius: calc(var(--s) * 12);
  background: rgba(42, 61, 64, 0.08);
  font: inherit; color: var(--ink-3);
  transition: background .2s, border-color .2s;
}
@media (hover: hover) {
  .v2-abschluss-antworten button:hover {
    background: rgba(42, 61, 64, 0.14); border-color: rgba(42, 61, 64, 0.4);
  }
}
.v2-abschluss-antworten .wort {
  display: block;
  font-size: max(14px, calc(var(--s) * 15)); font-weight: 500; line-height: calc(var(--s) * 20);
}
.v2-abschluss-antworten .dazu {
  display: block; margin-top: calc(var(--s) * 2);
  font-size: max(12px, calc(var(--s) * 12)); line-height: calc(var(--s) * 16);
  color: rgba(42, 61, 64, 0.7);
}
.v2-abschluss-merkmale {
  list-style: none; margin: calc(var(--s) * 20) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: calc(var(--s) * 8);
}
.v2-abschluss-merkmale li {
  padding: calc(var(--s) * 10) calc(var(--s) * 16);
  border-radius: calc(var(--s) * 10);
  background: rgba(255, 255, 255, 0.6);
  font-size: max(14px, calc(var(--s) * 14)); color: var(--ink-3);
}
.v2-abschluss-rat .dauer {
  margin: calc(var(--s) * 16) 0 0;
  font-size: max(14px, calc(var(--s) * 14)); color: rgba(42, 61, 64, 0.8);
}
.v2-abschluss-links .zurueck {
  margin-top: calc(var(--s) * 16);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: max(13px, calc(var(--s) * 13));
  color: rgba(42, 61, 64, 0.8); text-decoration: underline;
}

.v2-abschluss-rechts {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: stretch;
  padding: calc(var(--s) * 32);
}
.v2-abschluss-form {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: calc(var(--s) * 16);
  padding: calc(var(--s) * 32);
  border-radius: calc(var(--s) * 12);
  background: var(--white);
  filter: drop-shadow(0 calc(var(--s) * 20) calc(var(--s) * 12.5) rgba(0, 0, 0, 0.1))
          drop-shadow(0 calc(var(--s) * 8)  calc(var(--s) * 5)    rgba(0, 0, 0, 0.1));
}
.v2-abschluss-form .marke {
  margin: 0;
  font-size: max(12px, calc(var(--s) * 12)); font-weight: 600;
  line-height: calc(var(--s) * 16); letter-spacing: 0.1em;
  text-transform: uppercase; color: #6B7280;
}
.v2-abschluss-form label { display: block; }
.v2-abschluss-form label > span {
  display: block; margin-bottom: calc(var(--s) * 4);
  font-size: max(14px, calc(var(--s) * 14)); font-weight: 500;
  line-height: calc(var(--s) * 20); color: #364153;
}
.v2-abschluss-form input[type="text"],
.v2-abschluss-form input[type="email"],
.v2-abschluss-form textarea {
  width: 100%; font: inherit;
  padding: calc(var(--s) * 10) calc(var(--s) * 16);
  min-height: calc(var(--s) * 42);
  border: 1px solid #E5E7EB; border-radius: calc(var(--s) * 8);
  font-size: max(14px, calc(var(--s) * 14)); color: var(--ink-3); background: var(--white);
}
.v2-abschluss-form textarea { min-height: calc(var(--s) * 84); resize: vertical; }
/* #767E8B kaeme auf Weiss nur auf 4,1:1, verlangt sind 4,5:1. */
.v2-abschluss-form input::placeholder,
.v2-abschluss-form textarea::placeholder { color: #6B7280; }
.v2-abschluss-form [aria-invalid="true"] { border-color: #B3261E; border-width: 2px; }
.v2-abschluss-form em, .v2-abschluss-form .fehler {
  display: block; margin-top: calc(var(--s) * 4);
  font-size: max(13px, calc(var(--s) * 13)); font-style: normal; color: #B3261E;
}
.v2-abschluss-einwilligung {
  display: flex !important; align-items: flex-start; gap: calc(var(--s) * 10);
}
.v2-abschluss-einwilligung input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.v2-abschluss-einwilligung > span {
  margin: 0 !important;
  font-size: max(13px, calc(var(--s) * 13)); font-weight: 400 !important;
  line-height: 1.5; color: #364153;
}
.v2-abschluss-meldung {
  margin: 0; padding: calc(var(--s) * 12) calc(var(--s) * 16);
  border-radius: calc(var(--s) * 10);
  font-size: max(14px, calc(var(--s) * 14)); line-height: 1.5;
}
.v2-abschluss-meldung.fehler { background: #FCE9E7; color: #8C1D18; }
.v2-abschluss-meldung.gut    { background: var(--brand-50); color: var(--brand-800); }
.v2-abschluss-form .v2-btn { align-self: flex-start; }
.v2-abschluss-form .hinweis {
  margin: 0;
  font-size: max(12px, calc(var(--s) * 12)); line-height: 1.5; color: #5B6474;
}
/* Honigtopf: fuer Menschen unsichtbar, fuer Maschinen ausfuellbar. */
.v2-honigtopf {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Fliess-Umbruch fuer die letzten drei Sektionen */
@media (max-width: 1399px), print {
  .v2-blog { padding: clamp(56px, 8vw, 96px) 0; }
  .v2-blog .container { height: auto; }
  .v2-blog-kopf, .v2-blog-lead, .v2-blog-alle, .v2-blog-karten { position: static; }
  .v2-blog-kopf { gap: clamp(14px, 2vw, 26px); margin-bottom: clamp(20px, 3vw, 32px); }
  .v2-blog-kopf h2 { font-size: clamp(30px, 5.2vw, 60px); white-space: normal; }
  .v2-blog-lead { width: 100%; max-width: 480px; font-size: 18px; margin-bottom: 20px; }
  .v2-blog-alle { display: inline-flex; margin-bottom: clamp(28px, 4vw, 40px); }
  .v2-blog-karten { flex-wrap: wrap; gap: clamp(16px, 2.4vw, 33px); }
  .v2-blog-karten > li { flex: 1 1 280px; }
  .v2-blog-karte { border-radius: 16px; }
  .v2-blog-bild { height: 180px; }
  .v2-blog-inhalt { padding: 24px; }
  .v2-blog-inhalt .marke { font-size: 11px; line-height: 20px; margin-bottom: 8px; }
  .v2-blog-inhalt h2,
  .v2-blog-inhalt h3 { font-size: 20px; line-height: 27px; margin-bottom: 12px; }
  .v2-blog-inhalt .text { font-size: 13px; line-height: 21.125px; margin-bottom: 8px; }
  .v2-blog-link { font-size: 14px; line-height: 20px; padding-top: 16px; gap: 4px; }
  .v2-blog-link img { width: 14px; height: 14px; }

  .v2-stimmen {
    padding: clamp(56px, 8vw, 96px) 0;
    background: radial-gradient(110% 70% at 20% 30%, #F2FBFA 0%, #E4F4F2 45%, #FFFFFF 100%);
  }
  .v2-stimmen .container { min-height: 0; padding-top: 0; padding-bottom: 0; }
  .v2-stimmen-flaeche { display: none; }
  .v2-stimmen-kopf, .v2-stimmen-zahlen, .v2-stimmen-karten {
    position: static; width: 100% !important;
  }
  .v2-stimmen-kopf { gap: clamp(14px, 2vw, 22px); margin-bottom: clamp(28px, 4vw, 40px); }
  .v2-stimmen-kopf h2 { font-size: clamp(30px, 5.2vw, 60px); }
  .v2-stimmen-zahlen { gap: clamp(20px, 3vw, 33px); margin-bottom: clamp(32px, 5vw, 48px); flex-wrap: wrap; }
  .v2-stimmen-zahlen > div { gap: 12px; }
  .v2-stimmen-zahlen dt { font-size: clamp(32px, 5vw, 47px); }
  .v2-stimmen-zahlen dd { width: auto; font-size: 16px; }
  .v2-stimmen-karten { margin-left: 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
  .v2-stimme { padding: 24px; gap: 20px; border-radius: 16px; }
  .v2-stimme .sterne img { width: 20px; height: 20px; }
  .v2-stimme blockquote { font-size: 15px; line-height: 24.7px; }
  .v2-stimme .kuerzel { width: 44px; height: 44px; font-size: 14px; }
  .v2-stimme .name { font-size: 15px; }
  .v2-stimme .rolle { font-size: 13px; }

  .v2-abschluss {
    margin-top: 0;
    padding: clamp(56px, 8vw, 96px) 0;
    background: radial-gradient(110% 70% at 30% 60%, #F2FBFA 0%, #E4F4F2 45%, #FFFFFF 100%);
  }
  .v2-abschluss .container { height: auto; }
  .v2-abschluss-flaeche { display: none; }
  .v2-abschluss-karte {
    position: static; width: 100%; min-height: 0;
    flex-direction: column; border-radius: 16px;
  }
  .v2-abschluss-links { width: 100%; padding: clamp(24px, 4vw, 48px); }
  .v2-abschluss-links h2 { font-size: clamp(28px, 4.6vw, 48px); line-height: 1.25; }
  .v2-abschluss-links .lead { width: 100%; max-width: 460px; font-size: 16px; line-height: 26px; }
  .v2-abschluss-fortschritt p { font-size: 12px; line-height: 16px; }
  .v2-abschluss-frage h3, .v2-abschluss-rat h3 { font-size: 20px; }
  .v2-abschluss-antworten button { padding: 12px 20px; border-radius: 12px; }
  .v2-abschluss-antworten .wort { font-size: 15px; line-height: 20px; }
  .v2-abschluss-antworten .dazu { font-size: 12px; line-height: 16px; }
  .v2-abschluss-rechts { padding: 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); }
  .v2-abschluss-form { padding: clamp(20px, 3vw, 32px); border-radius: 12px; gap: 16px; }
  .v2-abschluss-form label > span { font-size: 14px; line-height: 20px; }
  .v2-abschluss-form input, .v2-abschluss-form textarea { font-size: 16px; min-height: 44px; }
  .v2-abschluss-form .marke { font-size: 12px; line-height: 16px; }
  .v2-abschluss-form .hinweis { font-size: 12px; }
  .v2-abschluss-einwilligung > span { font-size: 13px; }
  .v2-abschluss-meldung { font-size: 14px; padding: 12px 16px; }
}

/* ---------------------------------------------------------------------------
   Preistabelle in Sektion 6 (Figma 14:1727 "Tab Preise"): x 128, y 5370 */
.v2-preise-tafel { position: absolute; }
/* Drei Schritte statt Preistabelle. Die Ziffer steht als eigene Spalte
   links, damit die Zeilen auch ohne Linien als Folge lesbar sind. */
.v2-preise-schritte {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: calc(var(--s) * 28);
}
.v2-preise-schritte > li {
  display: flex; gap: calc(var(--s) * 20);
  padding-bottom: calc(var(--s) * 28);
  border-bottom: 1px solid rgba(42, 61, 64, 0.12);
}
.v2-preise-schritte > li:last-child { padding-bottom: 0; border-bottom: 0; }
.v2-preise-schritte .nr {
  flex: none; width: calc(var(--s) * 44);
  font-size: calc(var(--s) * 18); font-weight: 600;
  line-height: calc(var(--s) * 27); letter-spacing: 0.02em;
  color: #2ECFC1;
}
.v2-preise-schritte .wort { min-width: 0; }
.v2-preise-schritte h3 {
  margin: 0;
  font-size: max(17px, calc(var(--s) * 22)); font-weight: 600;
  line-height: calc(var(--s) * 30); color: #111111;
}
.v2-preise-schritte .wort > p {
  margin: calc(var(--s) * 6) 0 0;
  font-size: max(14px, calc(var(--s) * 16)); line-height: calc(var(--s) * 25);
  color: #5B6474;
}
/* Die Gruppen als Marken: kurze Woerter, die nebeneinander stehen und
   umbrechen duerfen. Im Editor unter Listen pflegbar. */
.v2-preise-gruppen {
  list-style: none; margin: calc(var(--s) * 14) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: calc(var(--s) * 8);
}
.v2-preise-gruppen li {
  padding: calc(var(--s) * 6) calc(var(--s) * 12);
  border: 1px solid #E7E7E7; border-radius: 500px; background: var(--white);
  font-size: max(13px, calc(var(--s) * 14)); line-height: calc(var(--s) * 21);
  color: #111111;
}
.v2-preise-schluss {
  margin: calc(var(--s) * 28) 0 calc(var(--s) * 24);
  font-size: max(14px, calc(var(--s) * 16)); line-height: calc(var(--s) * 25);
  color: #444444;
}

/* ---------------------------------------------------------------------------
   Fussbereich (Figma 14:2040): x 1018, y 9570, 710 breit, bis zur
   Seitenunterkante, oben links 64 gerundet. Er sitzt rechts neben der
   Abschluss-Sektion, nicht darunter. */
/* Im Entwurf liegt der Fussbereich HINTER der Abschluss-Karte: beide
   ueberlappen sich zwischen x 1018 und 1152. Im Quelltext steht er danach,
   damit die Vorlesereihenfolge stimmt — deshalb hier per z-index zurueck. */
.v2-fuss {
  /* Rand zwischen Inhaltsspalte und Fensterkante. Bis 1728 ist das genau der
     gezeichnete Seitenrand von 128; darueber bleibt --s bei 1px stehen und der
     Rand waechst. Die dunkle Flaeche laeuft deshalb ueber --rand bis an die
     Fensterkante, statt am Entwurfsrand aufzuhoeren und einen weissen
     Streifen stehen zu lassen. Der Inhalt bleibt trotzdem am gezeichneten
     Rand, weil die rechte Polsterung denselben Wert traegt. */
  --rand: calc((100cqw - var(--s) * 1472) / 2);
  position: absolute; z-index: 0;
  left: calc(var(--s) * 890);            /* Figma x 1018 - 128 */
  right: calc(-1 * var(--rand));         /* bis 1728 genau die 710 aus Figma */
  top: calc(var(--s) * -76);             /* Figma y 9570 - 9646 */
  min-height: calc(var(--s) * 1008);
  padding: calc(var(--s) * 76) var(--rand) calc(var(--s) * 64) calc(var(--s) * 128);
  border-top-left-radius: calc(var(--s) * 64);
  background: var(--ink-3);
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.v2-fuss-innen {
  width: calc(var(--s) * 369);
  display: flex; flex-direction: column; gap: calc(var(--s) * 44);
}
.v2-fuss-marke { display: flex; flex-direction: column; gap: calc(var(--s) * 24); }
.v2-fuss-marke img {
  display: block; width: calc(var(--s) * 286); height: auto;
}
.v2-fuss-marke p {
  margin: 0;
  font-size: max(14px, calc(var(--s) * 16)); font-weight: 500; line-height: 1.6;
  color: #9DBDBA;
}
.v2-fuss-spalten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--s) * 32); row-gap: calc(var(--s) * 44);
}
.v2-fuss h2 {
  margin: 0;
  font-size: max(12px, calc(var(--s) * 12)); font-weight: 700;
  line-height: calc(var(--s) * 16); letter-spacing: 0.1em;
  text-transform: uppercase; color: #4ECDC4;
}
.v2-fuss ul {
  list-style: none; margin: calc(var(--s) * 20) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: calc(var(--s) * 12);
}
.v2-fuss li, .v2-fuss a, .v2-fuss span {
  font-size: max(14px, calc(var(--s) * 14)); line-height: calc(var(--s) * 20);
  color: #C8D8D6;
}
.v2-fuss a { text-decoration: none; }
@media (hover: hover) { .v2-fuss a:hover { text-decoration: underline; color: var(--white); } }

@media (max-width: 1399px), print {
  .v2-preise-tafel { position: static; width: 100% !important; margin-bottom: clamp(32px, 5vw, 48px); }
  .v2-preise-schritte { gap: 24px; }
  .v2-preise-schritte > li { gap: 16px; padding-bottom: 24px; }
  .v2-preise-schritte .nr { width: 34px; font-size: 16px; line-height: 24px; }
  .v2-preise-schritte h3 { font-size: 19px; line-height: 26px; }
  .v2-preise-schritte .wort > p { font-size: 16px; line-height: 24px; }
  .v2-preise-gruppen { margin-top: 12px; gap: 8px; }
  .v2-preise-gruppen li { padding: 6px 12px; font-size: 14px; line-height: 21px; }
  .v2-preise-schluss { margin: 24px 0 20px; font-size: 16px; line-height: 24px; }

  .v2-fuss {
    position: static; width: auto; min-height: 0;
    margin: clamp(48px, 7vw, 80px) calc(-1 * var(--gutter)) calc(-1 * var(--gutter));
    padding: clamp(40px, 6vw, 64px) var(--gutter);
    border-top-left-radius: 32px; border-top-right-radius: 32px;
    justify-content: flex-start;
  }
  .v2-fuss-innen { width: 100%; gap: clamp(28px, 4vw, 44px); }
  .v2-fuss-marke { gap: 20px; }
  .v2-fuss-marke img { width: min(240px, 60%); }
  .v2-fuss-marke p { font-size: 16px; max-width: 480px; }
  .v2-fuss-spalten { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 32px; row-gap: 36px; }
  .v2-fuss h2 { font-size: 12px; line-height: 16px; }
  .v2-fuss ul { margin-top: 16px; gap: 10px; }
  .v2-fuss li, .v2-fuss a, .v2-fuss span { font-size: 15px; line-height: 22px; }
}

/* Gestapelt statt gefahren: unter 1400px und bei abgeschalteter Bewegung
   stehen die drei Karten untereinander. Alle drei sind dann vollstaendig
   lesbar — kein Schleier, keine Weichzeichnung, kein Festhalten der Seite. */
@media (max-width: 1399px), (prefers-reduced-motion: reduce), print {
  .v2-branchen { margin-top: 0; }
  .v2-branchen .container { height: auto; }
  .v2-branchen-buehne {
    position: static; height: auto;
    display: flex; flex-direction: column;
  }
  .v2-branchen-text {
    order: 1; position: static; width: 100%;
    margin-bottom: clamp(32px, 5vw, 56px);
  }
  .v2-stapel {
    order: 2; display: flex; flex-direction: column; align-items: flex-start;
    gap: clamp(20px, 3vw, 32px); width: 100%;
  }
  .v2-karte-lage {
    position: static;
    width: min(100%, calc(var(--s) * var(--karte-breite))); height: auto;
    transform: none !important; filter: none !important; opacity: 1 !important;
    will-change: auto;
  }
  .v2-schleier { display: none; }
  .v2-karte { height: auto; }
  .v2-karte-fuss { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   Fliess-Umbruch unter 1400px
   Ab hier waere der mitskalierte Entwurf nicht mehr lesbar (Fliesstext unter
   16px). Statt zu skalieren wird gestapelt: Text, Geraet, danach die Label als
   Reihe — so bleibt ihr Inhalt erhalten, statt einfach zu verschwinden. */
@media (max-width: 1399px), print {
  .v2-rahmen > * { --s: 1px; }
  .v2-rahmen .container { max-width: var(--maxw); padding-inline: var(--gutter); }

  .v2-kopf {
    padding-top: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  .v2-kopfzeile { height: 72px; }
  .v2-logo img { width: auto; height: 34px; }
  .v2-nav, .v2-kopf-cta { display: none; }
  .v2-menue-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex-shrink: 0; cursor: pointer;
    background: var(--white); border: 1px solid var(--rule-2); border-radius: 100px;
  }
  .v2-mobilmenue { padding-bottom: 24px; }
  .v2-mobilmenue nav {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--white); border-radius: 18px; padding: 12px;
    box-shadow: var(--shadow-2);
  }
  .v2-mobilmenue a {
    padding: 12px 14px; border-radius: 12px; text-decoration: none;
    color: var(--ink-3); font-size: 16px; font-weight: 500;
  }
  .v2-mobilmenue .cta {
    margin-top: 8px; padding: 14px 20px; border-radius: 500px; text-align: center;
    background: var(--nav-cta); color: var(--white); font-weight: 600;
  }

  .v2-hero {
    margin-top: 0;
    padding: clamp(40px, 7vw, 72px) 0 clamp(56px, 8vw, 96px);
    background: radial-gradient(120% 80% at 82% 18%, #F2FBFA 0%, #E4F4F2 52%, #FFFFFF 100%);
  }
  /* Im Fluss zaehlt die Quelltextreihenfolge — das Geraet steht dort vor der
     Textspalte, weil Figma es darunter zeichnet. Hier wird es zurueckgeholt. */
  .v2-buehne { height: auto; display: flex; flex-direction: column; }
  .v2-flaeche { display: none; }
  .v2-linie   { display: none; }

  .v2-hero-kopie {
    order: 1;
    position: static; width: 100%; height: auto;
    gap: clamp(32px, 5vw, 48px);
  }
  .v2-hero-text { gap: clamp(18px, 2.4vw, 28px); }
  .v2-eyebrow { font-size: 17px; gap: 14px; white-space: normal; }
  .v2-eyebrow img { width: 17px; height: 18.7px; }
  .v2-hero-kopie h1 {
    font-size: clamp(28px, 4.4vw, 47px);
    gap: clamp(6px, 1vw, 14px);
  }
  .v2-hero-kopie h1 .zeile { white-space: normal; }
  .v2-hero-lead { width: min(100%, 647px); font-size: 18px; }
  .v2-hero-aktionen { flex-wrap: wrap; gap: 16px; }
  .v2-btn {
    font-size: 16px;
    padding: 17px 24px 18px 28px;
  }
  .v2-btn.offen { padding-right: 28px; }
  .v2-btn img { width: 19px; height: 19px; }

  .v2-geraet {
    order: 2;
    position: static; display: block;
    width: min(100%, 420px); height: auto;
    margin: clamp(40px, 6vw, 64px) auto 0;
  }

  .v2-marken {
    order: 3;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px;
    margin: clamp(28px, 4vw, 40px) 0 0;
  }
  .v2-label {
    position: static !important;
    padding: 12px 20px 13px;
    font-size: 15px;
  }
}

@media (max-width: 1399px), print {
  .v2-karte { padding: clamp(24px, 5vw, 40px); }
  .v2-karte-titel {
    white-space: normal;
    font-size: clamp(30px, 5.4vw, 42px); line-height: 1.28;
    margin-bottom: 16px;
  }
  .v2-karte-block + .v2-karte-block { margin-top: 24px; }
  .v2-karte-marke { font-size: 12px; line-height: 16px; }
  .v2-karte-text  { font-size: 16px; line-height: 26px; margin-top: 12px; }
  .v2-karte-fuss  { padding-top: 32px; gap: 8px; }
  .v2-karte-fuss-text { font-size: 14px; line-height: 20px; }
  .v2-karte-kennzahl  { font-size: clamp(34px, 6vw, 47px); line-height: 1.28; }

  .v2-branchen-text h2 {
    font-size: clamp(30px, 5.2vw, 60px);
    margin-bottom: clamp(18px, 2.6vw, 28px);
  }
  .v2-branchen-text .v2-eyebrow { margin-bottom: clamp(14px, 2vw, 22px); }
  .v2-branchen-lead { font-size: 18px; margin-bottom: clamp(32px, 5vw, 66px); }
  .v2-merkmale { gap: 12px; }
  .v2-merkmal {
    font-size: 15px; gap: 10px;
    padding: 9px 16px 10px;
  }
  .v2-merkmal img { width: auto !important; height: auto !important; }
}

@media (max-width: 560px) {
  .v2-hero-kopie h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .v2-hero-aktionen .v2-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Druck
   Die Umbruchbloecke oben gelten auch fuer print, damit nichts absolut
   positioniert auf dem Papier landet. Hier bleibt, was nur den Druck betrifft. */
@media print {
  .v2-kopf {
    position: static;
    background: none; box-shadow: none; backdrop-filter: none;
  }
  .v2-menue-btn, .v2-sprungmarke { display: none; }

  /* Flaechen und Verlaeufe kosten Farbe, ohne etwas zu erklaeren. */
  .v2-hero, .v2-einsatz { background: none; }
  .v2-flaeche, .v2-einsatz-flaeche, .v2-einsatz-foto, .v2-linie { display: none; }

  body.v2 { color: #000; }
  .v2-hero-kopie h1 .akzent { color: #000; }

  /* Dunkle Flaechen wuerden ganze Seiten schwaerzen. */
  .v2-karte, .v2-funktionen-tafel {
    background: none; color: #000;
    border: 1px solid #767676;
  }
  .v2-karte-titel, .v2-karte-text, .v2-karte-fuss-text, .v2-karte-kennzahl,
  .v2-tafel-titel, .v2-tafel-gruppe-titel, .v2-tafel-gruppe ul { color: #000; }
  .v2-vergleich-tabelle tbody td.mit { background: none; color: #000; }
  .v2-vergleich-tabelle thead th, .v2-vergleich-tabelle thead th.mit {
    background: none; color: #000; border-bottom: 1px solid #767676;
  }
  .v2-funktionskarte, .v2-kachel { background: none; border: 1px solid #767676; filter: none; }

  /* Zusammenhaengendes nicht ueber den Seitenrand reissen. */
  .v2-karte-lage, .v2-funktionskarte, .v2-kacheln li,
  .v2-vergleich-tabelle tr { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* Ziele ausschreiben, auf Papier ist ein Link sonst wertlos. */
  .v2-hero-aktionen a::after, .v2-dialog-fuss a::after { content: ""; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ---------------------------------------------------------------------------
   Unterseiten des Blogs (blog.html, blog/<slug>.html)

   Der Entwurf zeichnet nur die Kartenreihe auf der Startseite. Diese Seiten
   sind dazugebaut und rechnen deshalb nicht in Entwurfspixeln, sondern in
   clamp(): sie sollen bei jeder Fensterbreite lesbar sein, nicht eine
   gezeichnete Vorlage treffen. Kopfleiste, Karten und Fussbereich kommen
   unveraendert von der Startseite. */

/* --- Fussbereich ausserhalb der Abschluss-Sektion ---
   Auf der Startseite haengt er rechts neben der Karte und ist absolut
   gesetzt. Hier ist er ein durchlaufender Streifen am Seitenende. Die
   Polsterung folgt dem Seitenraster, damit sein Inhalt unter dem Inhalt der
   Seite steht und nicht daneben. */
.v2-unterseite-fuss .v2-fuss {
  position: static; width: auto; min-height: 0;
  margin: 0;
  padding: clamp(40px, 5vw, 76px) max(var(--gutter), calc((100cqw - var(--s) * 1472) / 2))
           clamp(32px, 4vw, 64px);
  border-top-left-radius: clamp(24px, 3vw, 64px);
  border-top-right-radius: clamp(24px, 3vw, 64px);
  justify-content: center;
}
.v2-unterseite-fuss .v2-fuss-innen {
  width: 100%; max-width: calc(var(--s) * 1472);
  gap: clamp(28px, 4vw, 44px);
}
.v2-unterseite-fuss .v2-fuss-spalten {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: clamp(24px, 3vw, 48px); row-gap: 36px;
}

/* --- Uebersicht --- */
.v2-blogseite { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 112px); }
.v2-blogseite-kopf {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.v2-blogseite-kopf h1 {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 60px); font-weight: 600;
  line-height: 1.2; color: var(--ink-3);
}
.v2-blogseite-lead {
  margin: 0; max-width: 42rem;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--ink-3);
}
/* Die Kartenreihe der Startseite steht absolut auf ihrem gezeichneten Platz.
   Hier traegt sie sich selbst und bricht um, sobald der Platz eng wird. */
.v2-blog-karten.im-fluss {
  position: static;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(20px, 2.3vw, 33px);
}
.v2-blog-karten.im-fluss > li { display: flex; }
.v2-blog-inhalt .marke time { text-transform: none; letter-spacing: normal; }

/* --- Beitrag --- */
.v2-beitrag { padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 8vw, 112px); }
/* Linksbuendig wie der Rest der Seite: Die Lesespalte beginnt an derselben
   Kante wie Kopfleiste, Karten und Fussbereich. */
.v2-beitrag > .container {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(20px, 2.4vw, 32px);
}

/* --- Zwei Spalten: Text und Seitenspalte ---
   Der freie Platz rechts der Lesespalte entstand, als alles linksbuendig
   wurde. Er traegt jetzt weitere Beitraege und den Aufruf zur Demo. Unter
   1100px stehen beide untereinander, die Seitenspalte kommt nach dem Text. */
.v2-beitrag-spalten {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 44rem) 18rem;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.v2-beitrag-haupt {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(20px, 2.4vw, 32px);
}
.v2-beitrag-haupt > * { width: 100%; }

/* Die Spalte laeuft mit, damit der Aufruf die ganze Lesezeit ueber steht.
   Der Abstand nach oben haelt sie unter der klebenden Kopfleiste frei. */
.v2-beitrag-spalte { min-width: 0; }
.v2-beitrag-spalte-innen {
  position: sticky; top: clamp(88px, 11vh, 124px);
  display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px);
}

.v2-spalte-block {
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid #E7E7E7; border-radius: clamp(12px, 1.2vw, 16px);
  background: var(--white);
}
.v2-spalte-titel {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #5B6474;
}

/* Weitere Beitraege: Bild links, Text rechts. */
.v2-spalte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.v2-spalte-liste a {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px;
  text-decoration: none; align-items: start;
}
.v2-spalte-liste .bild {
  display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3;
}
.v2-spalte-liste img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v2-spalte-liste .wort { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-spalte-liste .marke {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #0F766E;
}
.v2-spalte-liste .titel {
  font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink-3);
}
@media (hover: hover) {
  .v2-spalte-liste a:hover .titel { text-decoration: underline; }
  .v2-spalte-liste a:hover img { transform: scale(1.05); }
  .v2-spalte-liste img { transition: transform .4s var(--auf-kurve); }
}

/* Kategorien auf der Uebersicht. */
.v2-spalte-kategorien { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v2-spalte-kategorien a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 10px;
  font-size: 15px; color: var(--ink-3); text-decoration: none;
  transition: background .2s;
}
.v2-spalte-kategorien .anzahl { font-size: 13px; color: #5B6474; }
.v2-spalte-kategorien a[aria-current="true"] {
  background: #E8F4F4; font-weight: 600; color: #0B5F58;
}
.v2-spalte-kategorien a[aria-current="true"] .anzahl { color: #0B5F58; }
@media (hover: hover) {
  .v2-spalte-kategorien a:hover { background: #F2F7F7; }
}

/* Aufruf zur Demo in der Spalte. */
.v2-spalte-cta { background: #E8F4F4; border-color: transparent; }
.v2-spalte-cta-titel {
  margin: 0 0 8px;
  font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink-3);
}
.v2-spalte-cta-text {
  margin: 0 0 16px;
  font-size: 14px; line-height: 1.6; color: #374151;
}
.v2-spalte-cta .v2-btn { width: 100%; justify-content: center; }

/* Hinweis auf den aktiven Filter ueber den Karten. */
.v2-blogseite-filter {
  margin: 0 0 clamp(16px, 2vw, 24px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  font-size: 15px; color: #374151;
}
.v2-blogseite-filter a { color: #0F766E; }

@media (max-width: 1099px) {
  .v2-beitrag-spalten { grid-template-columns: minmax(0, 1fr); }
  .v2-beitrag-spalte-innen { position: static; }
  .v2-spalte-liste { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.v2-beitrag-pfad {
  margin: 0;
  font-size: 14px; color: #5B6474;
}
.v2-beitrag-pfad a { color: #0F766E; text-decoration: none; }
@media (hover: hover) { .v2-beitrag-pfad a:hover { text-decoration: underline; } }

.v2-beitrag-kopf { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.v2-beitrag-meta {
  margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #0F766E;
}
.v2-beitrag-kopf h1 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-3);
}
/* Entwurf: nur im Editor sichtbar, deshalb auch deutlich gekennzeichnet. */
.v2-beitrag-entwurf {
  margin: 0 0 20px;
  padding: 10px 14px; border-radius: 10px;
  background: #FEF3C7; border: 1px solid #FCD34D;
  font-size: 14px; line-height: 1.5; color: #713F12;
}

.v2-beitrag-vorspann {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: #374151;
}

.v2-beitrag-bild {
  width: min(100%, 60rem); height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: clamp(12px, 1.2vw, 16px);
  display: block;
}

.v2-beitrag-text section + section { margin-top: clamp(28px, 3vw, 44px); }
.v2-beitrag-text h2 {
  margin: 0 0 clamp(10px, 1vw, 14px);
  font-size: clamp(20px, 1.9vw, 26px); font-weight: 700;
  line-height: 1.3; color: var(--ink-3);
}
.v2-beitrag-text p {
  margin: 0 0 clamp(12px, 1.1vw, 16px);
  font-size: clamp(16px, 1.25vw, 17px); line-height: 1.75; color: #374151;
}
.v2-beitrag-text p:last-child { margin-bottom: 0; }
.v2-beitrag-text ul {
  margin: 0; padding-left: 1.25em;
  display: flex; flex-direction: column; gap: 10px;
}
.v2-beitrag-text li {
  font-size: clamp(16px, 1.25vw, 17px); line-height: 1.7; color: #374151;
}
.v2-beitrag-text li::marker { color: #0F766E; }


/* ---------------------------------------------------------------------------
   Bewegung

   Ein Mechanismus fuer die ganze Seite: Elemente mit data-auf steigen beim
   ersten Sichtwerden 12 auf. Reihen staffeln sich ueber --auf-nr, das die
   Karte als Zahl mitgibt. Der Hero laeuft ohne Beobachter, er steht ohnehin
   im Blick; ihn startet .v2-auftakt.

   Alles haengt an .v2-bewegt. Diese Klasse setzt components/bewegung.jsx und
   nur dann, wenn keine Bewegungsreduzierung eingestellt ist. Ohne Skript
   versteckt also nichts etwas, die Seite steht sofort vollstaendig da.

   Bewegt werden ausschliesslich opacity und transform. Beides kostet kein
   neues Layout, deshalb springt beim Einblenden nichts. */
.v2 {
  --auf-weg: 12px;                                /* Strecke beim Aufsteigen */
  --auf-zeit: 480ms;
  --auf-takt: 60ms;                               /* Versatz je Karte in einer Reihe */
  --auf-kurve: cubic-bezier(.22, .61, .36, 1);    /* schnell an, weich aus */
}

.v2-bewegt [data-auf] {
  opacity: 0;
  transform: translateY(var(--auf-weg));
  transition: opacity var(--auf-zeit) var(--auf-kurve),
              transform var(--auf-zeit) var(--auf-kurve);
  transition-delay: calc(var(--auf-nr, 0) * var(--auf-takt));
}
.v2-bewegt [data-auf].auf { opacity: 1; transform: none; }

/* --- Auftakt im Hero ---
   Das Geraet bleibt bewusst unangetastet: es ist der wahrscheinliche
   Messpunkt fuer die Ladezeit, ein Einblenden wuerde ihn nach hinten
   schieben. Die Verbindungslinien tragen ihre Drehung als Stilattribut und
   koennen deshalb nur ihre Deckkraft aendern. */
.v2-bewegt .v2-hero-kopie .v2-eyebrow,
.v2-bewegt .v2-hero-kopie h1 .zeile,
.v2-bewegt .v2-hero-lead,
.v2-bewegt .v2-hero-aktionen,
.v2-bewegt .v2-label {
  opacity: 0; transform: translateY(10px);
  transition: opacity 520ms var(--auf-kurve), transform 520ms var(--auf-kurve);
}
.v2-bewegt .v2-linie {
  opacity: 0;
  transition: opacity 520ms var(--auf-kurve);
}
.v2-auftakt .v2-hero-kopie .v2-eyebrow,
.v2-auftakt .v2-hero-kopie h1 .zeile,
.v2-auftakt .v2-hero-lead,
.v2-auftakt .v2-hero-aktionen,
.v2-auftakt .v2-label { opacity: 1; transform: none; }
.v2-auftakt .v2-linie { opacity: 1; }

.v2-bewegt .v2-hero-kopie .v2-eyebrow      { transition-delay:  60ms; }
.v2-bewegt .v2-hero-kopie h1 .zeile:nth-child(1) { transition-delay: 120ms; }
.v2-bewegt .v2-hero-kopie h1 .zeile:nth-child(2) { transition-delay: 190ms; }
.v2-bewegt .v2-hero-kopie h1 .zeile:nth-child(3) { transition-delay: 260ms; }
.v2-bewegt .v2-hero-lead                   { transition-delay: 330ms; }
.v2-bewegt .v2-hero-aktionen               { transition-delay: 400ms; }
/* Die Label sitzen am Geraet und kommen zuletzt, in der Reihenfolge, in der
   der Blick sie abgeht. Die Linien jeweils kurz davor. */
.v2-bewegt .v2-linie:nth-of-type(1) { transition-delay: 460ms; }
.v2-bewegt .v2-linie:nth-of-type(2) { transition-delay: 520ms; }
.v2-bewegt .v2-linie:nth-of-type(3) { transition-delay: 580ms; }
.v2-bewegt .v2-linie:nth-of-type(4) { transition-delay: 640ms; }
.v2-bewegt .v2-linie:nth-of-type(5) { transition-delay: 700ms; }
.v2-bewegt .v2-label:nth-child(1) { transition-delay: 500ms; }
.v2-bewegt .v2-label:nth-child(2) { transition-delay: 560ms; }
.v2-bewegt .v2-label:nth-child(3) { transition-delay: 620ms; }
.v2-bewegt .v2-label:nth-child(4) { transition-delay: 680ms; }
.v2-bewegt .v2-label:nth-child(5) { transition-delay: 740ms; }

/* --- Karten beim Ueberfahren ---
   Nur auf Geraeten mit echtem Zeiger. Auf Touch bleibt der Zustand sonst
   nach dem Tippen haengen. */
@media (hover: hover) {
  .v2-blog-karte, .v2-blog-bild img, .v2-stimme,
  .v2-spalte-liste a, .v2-btn img, .v2-blog-link img {
    transition: transform .25s var(--auf-kurve), box-shadow .25s var(--auf-kurve);
  }
  .v2-blog-bild img { transition-duration: .5s; }
  .v2-blog-karte:hover, .v2-stimme:hover {
    transform: translateY(-2px);
  }
  .v2-blog-karte:hover {
    box-shadow: 0 calc(var(--s) * 16) calc(var(--s) * 24) calc(var(--s) * -6) rgba(0, 0, 0, 0.14),
                0 calc(var(--s) * 6)  calc(var(--s) * 8)  calc(var(--s) * -4) rgba(0, 0, 0, 0.1);
  }
  .v2-blog-karte:hover .v2-blog-bild img { transform: scale(1.03); }
  /* Der Pfeil geht mit, wenn man dorthin will, wohin er zeigt. */
  .v2-btn:hover img, .v2-blog-link:hover img { transform: translateX(2px); }
}

/* --- Wechsel der Quizfrage ---
   Der Block bekommt in abschluss.jsx einen Schluessel je Schritt und wird
   dadurch neu gesetzt. Diese Animation laeuft deshalb bei jeder Antwort. */
@keyframes v2-frage-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.v2-bewegt .v2-abschluss-frage, .v2-bewegt .v2-abschluss-rat {
  animation: v2-frage-ein 300ms var(--auf-kurve) both;
}

/* Sicherheitsnetz: Sollte die Klasse trotz Bewegungsreduzierung gesetzt sein,
   ueberschreibt diese Regel jeden Startzustand. */
@media (prefers-reduced-motion: reduce) {
  .v2-bewegt [data-auf],
  .v2-bewegt .v2-hero-kopie .v2-eyebrow,
  .v2-bewegt .v2-hero-kopie h1 .zeile,
  .v2-bewegt .v2-hero-lead,
  .v2-bewegt .v2-hero-aktionen,
  .v2-bewegt .v2-label,
  .v2-bewegt .v2-linie {
    opacity: 1 !important; transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Impressum und Datenschutz in der v2

   Der Rechtstext kommt unveraendert aus components/impressum-page.jsx und
   components/datenschutz-page.jsx im Wurzelverzeichnis, damit es weiterhin
   nur eine Fassung gibt. Diese Regeln setzen ihn in die Typografie der v2.

   Die Polsterung oben traegt dort ein Stilattribut, weil die alte Kopfleiste
   ueber dem Inhalt lag. In der v2 steht sie im Fluss, deshalb hier weniger
   Luft. Ein Stilattribut laesst sich nur mit !important ueberschreiben. */
.v2-rechtsseite .section {
  padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 8vw, 112px) !important;
  border-top: 0;
}
/* Aus der Pille der v1 wird die Dachzeile der v2. */
.v2-rechtsseite .section-badge {
  height: auto; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #0F766E;
}
.v2-rechtsseite h1 {
  font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-3);
}
.v2-rechtsseite h2 {
  font-weight: 700; line-height: 1.3; letter-spacing: normal; color: var(--ink-3);
}
.v2-rechtsseite p, .v2-rechtsseite li { line-height: 1.75; color: #374151; }
.v2-rechtsseite ul { padding-left: 1.25em; }
.v2-rechtsseite li::marker { color: #0F766E; }
.v2-rechtsseite a { color: #0F766E; }
@media (hover: hover) { .v2-rechtsseite a:hover { text-decoration: underline; } }

/* ---------------------------------------------------------------------------
   Kacheln im Bearbeitungsmodus

   Ueber der Funktionskarte liegt eine unsichtbare Flaeche, damit die ganze
   Karte den Knopf ausloest. Im Editor faengt sie jeden Klick ab, bevor er den
   Text darunter erreicht: der Titel liess sich nur im Fenster aendern, das
   sich dabei oeffnete. Im Bearbeitungsmodus ist sie deshalb durchlaessig.

   Dazu ein sichtbarer Hinweis: bearbeitbare Stellen bekommen im Editor einen
   Textcursor, damit erkennbar ist, wo geschrieben werden kann. */
.cms-edit-mode .v2-flaeche-knopf { pointer-events: none; }
.cms-edit-mode [data-cms-id] { cursor: text; }

/* ---------------------------------------------------------------------------
   Mitgliedschaften im Fussbereich

   Unter den Spalten, abgesetzt durch eine feine Linie. Die Logos sind leer
   angelegt und bleiben verborgen, bis im Editor eine Datei hochgeladen ist;
   ein <img> ohne Quelle zeigte sonst je nach Browser ein Platzhalterkaestchen. */
.v2-fuss-mitglied {
  padding-top: calc(var(--s) * 32);
  border-top: 1px solid rgba(200, 216, 214, 0.18);
}
.v2-fuss-mitglied ul {
  display: flex; flex-wrap: wrap; gap: 18px 36px;
}
.v2-fuss-mitglied li { display: flex; align-items: center; gap: 12px; }
/* Die Verbandslogos sind farbig und tragen ihren eigenen Grund (BNI weiss
   auf Rot, BVMW rot auf Weiss). Auf dem dunklen Fuss stuenden sie unruhig,
   deshalb sitzt jedes auf einer hellen Flaeche. Die Hoehe gilt fuer das Logo
   selbst, das Polster kommt aussen herum (content-box) — so sind beide
   Logos gleich gross, obwohl ihre Seitenverhaeltnisse abweichen. */
.v2-fuss-mitglied img {
  display: block; flex: none; box-sizing: content-box;
  height: 44px; width: auto; max-width: 150px; object-fit: contain;
  padding: 9px 11px; border-radius: 9px; background: #FEFEFE;
}
.v2-fuss-mitglied img:not([src]),
.v2-fuss-mitglied img[src=""] { display: none; }
.v2-fuss-mitglied .wort { display: flex; flex-direction: column; gap: 2px; }
.v2-fuss .v2-fuss-mitglied .name {
  font-weight: 600; color: #FEFEFE;
}
.v2-fuss .v2-fuss-mitglied .dazu {
  font-size: max(12px, calc(var(--s) * 13)); line-height: 1.4; color: #9DBDBA;
}