/* getvia.css, Fassung 28, WEB-U27, 2026-10-19 (Blog: Liste als Karten, Leser in einer Lesespalte mit weisser Schrift im dunklen Modus, kleinere Ueberschriften, Gliederung mit Linie, Zitate mit Linie in Orange; neuer Abschnitt 24 am Ende, Zeilen 2 bis 1238 unveraendert; Werner 19.10.2026: machen wir alle deine vorschlaege). Fassung 27 war WEB-U26, 2026-10-18: getvia.css, Fassung 27, WEB-U26, 2026-10-18 (Ziffern im Ablauf kleiner und mit Abstand zur Linie oben und unten, auch 3 und 4 mit Unterlaenge bleiben in ihrer Zeile, am Rechner und bis 760 px; neuer Abschnitt 23 am Ende, Zeilen 2 bis 1229 unveraendert; Werner 18.10.2026: doch kleiner und abstand zur linie in beiden Versionen). Fassung 26 war WEB-U25, 2026-10-18: getvia.css, Fassung 26, WEB-U25, 2026-10-18 (Ziffern im Ablauf und Nummern im FAQ auf 15 % Deckkraft, Linie unter der Ziffer bis 760 px an der Ueberschrift; neuer Abschnitt 22 am Ende, Zeilen 2 bis 1220 unveraendert; Werner 18.10.2026: die zahlen brauchen kaum Deckkraft, 15 % oder 10 %). Fassung 25 war WEB-U24, 2026-10-18: getvia.css, Fassung 25, WEB-U24, 2026-10-18 (Ziffern im Ablauf bis 760 px in eigener Zeile von Linie zu Linie; neuer Abschnitt 21 am Ende, Zeilen 2 bis 1204 unveraendert; Werner 18.10.2026: nix von linie zu linie). Fassung 24 war WEB-U23, 2026-10-18: getvia.css, Fassung 24, WEB-U23, 2026-10-18 (Karten wieder als Flaeche mit Rand und 8 px Radius, Schlagwort-Punkt am Zeilenende, Ziffern im Ablauf und Nummern im FAQ in Abhaya Libre auf Zeilenhoehe mit 75 % Deckkraft, Termin als Kasten, Termin ohne Adresse zweispaltig, Seitenkopf-Knoepfe nebeneinander; neuer Abschnitt 20 am Ende, Zeilen 2 bis 1124 unveraendert; Werner 18.10.2026 nach Sichtabnahme: die Cards sind verloren gegangen, Welcher Agent passt zu dir sieht verloren aus). Fassung 23 war WEB-U22, 2026-10-18: getvia.css, Fassung 23, WEB-U22, 2026-10-18 (Ruhige Fassung: Ueberschriften in Abhaya Libre, Kicker ohne Grossbuchstaben und Sperrung, Abschnitte ohne Rahmen, Rundung und Schatten, Karten mit Linie oben statt Box, Schlagworte als Textzeile, Knoepfe 6 px, gezeichnete Bildflaechen entfallen, gruener WhatsApp-Knopf nur auf Live erleben, Karte mit Bild zweispaltig; neuer Abschnitt 19 am Ende, Zeilen 2 bis 976 unveraendert; Werner 18.10.2026: sieht nach KI-Design aus, css go). Fassung 22 war WEB-U21, 2026-10-16: getvia.css, Fassung 22, WEB-U21, 2026-10-16 (Live erleben: Hyperlink mit Klasse card-call als oranger Knopf Jetzt anrufen unter dem WhatsApp-Knopf, Zeichen bxs-phone aus Boxicons 2.1.4, MIT; Text mit Klasse live-hinweis als Begleittext unter den Karten ueber die ganze Breite; Werner 16.10.2026: diese karten brauchen noch jetzt anrufen und den begleittext). Fassung 21 war WEB-U20, 2026-10-14: getvia.css, Fassung 21, WEB-U20, 2026-10-14 (FAQ-Leiste mobil: rueckt an den oberen Rand, wenn der Kopf ausgeblendet ist; Reihenfolge der Gruppen fest, aktive Gruppe bleibt orange an ihrem Platz; Werner 14.10.2026). Fassung 20 war WEB-U19, 2026-10-13: getvia.css, Fassung 20, WEB-U19, 2026-10-13 (FAQ-Navigation in jeder Gruppe: Desktop links mitlaufend mit aktiver Gruppe, Handy als Leiste unter dem Menue mit aktiver Gruppe vorne). Fassung 19 war WEB-U18, 2026-10-13: getvia.css, Fassung 19, WEB-U18, 2026-10-13 (FAQ: Artikel faq mit nummerierten Fragen, zwei Spalten ab 1000 px, Sprungleiste faq-nav als Pillen; Seitenkopf h1 ohne Trennung). Fassung 18 war WEB-U17, 2026-10-13: getvia.css, Fassung 18, WEB-U17, 2026-10-13 (Live erleben: Karten ab 1280 px vierspaltig (darunter passt der WhatsApp-Knopf nicht einzeilig), h2 in Karten auf Kartengroesse, Klasse akzent fuer einzelne Karten wie die Paketkarte Team, h1 im Seitenkopf ab 900 px ohne Silbentrennung, Link mit Klasse card-link als gruener WhatsApp-Knopf mit Zeichen bxl-whatsapp aus Boxicons 2.1.4, MIT; Werner 13.10.2026). WEB-U16 entfiel ungelaufen. (Live erleben: Karten ab 1100 px vierspaltig, h2 in Karten auf Kartengroesse, Klasse akzent fuer einzelne Karten wie die Paketkarte Team, h1 im Seitenkopf ab 900 px ohne Silbentrennung; Werner 13.10.2026). Fassung 17 war WEB-U14, 2026-10-13 (Artikel cards mit vier Karten als 2 x 2 ab 600 px, darunter einspaltig; Artikel mit drei Karten unveraendert; Werner 13.10.2026: 850 px 2 spaltig). Fassung 16 war WEB-U11, 2026-10-12 (Kicker ueber Abschnitten orange wie im Hero, im Seitenkopf und im Rechner: cards, ablauf, ersparnis, preise, jahr nutzen --accent-text statt --muted; Knopf im Rechner bricht ausgewogen um statt nach Demo-; Werner 12.10.2026: kicker farbe???). Fassung 15 war WEB-U10, 2026-10-12 (Berge ganz: Bergmotiv mit preserveAspectRatio none statt slice, die Gipfel werden nicht mehr oben abgeschnitten, bei knapper Hoehe flacher; Seitenkopf hoechstens 72 Prozent statt 45, Rechner min(26.35vw, 40%) statt min(18vw, 30%); Werner 12.10.2026: header schneidet die berge ab). Fassung 14 war WEB-U9, 2026-10-12 (Hero ohne Slider: Elementgruppe direkt im Artikel hero; Rechner als eigener Artikel rechner mit Himmel und Bergen; Abschnitt 18; Werner 12.10.2026). Fassung 13 war WEB-U7, 2026-10-11 (Seite Preise: Abschnitt 15 preise mit Paketkarten, Abschnitt 16 jahr mit Tabelle erstes Jahr, Abschnitt 17 Termin haelt Orange als Schrift im hellen Modus auf #ff9900; Werner 11.10.2026). Fassung 12 war WEB-U6, 2026-10-09 (Orange als Schrift, Linie und Fokus im hellen Modus #a65200, Token --accent-text, Flaechen bleiben #ff9900; Werner 09.10.2026). Fassung 11 war WEB-U5, 2026-10-09 (Bergmotiv nach Werners Vorlage getVIA-hg.svg, Hero und Seitenkopf folgen dem Modus hell und dunkel; Werner 08.10.2026). Fassung 10 war WEB-U4, 2026-10-02 (Bestaetigung nach dem Absenden eines Formulars als Flaeche; Werner 02.10.2026). Fassung 9 war WEB-U3, 2026-10-02 (Menue und Kopf-Button 16px, Formular, Kontaktseite mit Klassen kontakt und kontakt-termin; Werner 02.10.2026). Fassung 8 war WEB-U2, 2026-10-02 (Seitenkopf und Fuss fluchten auf breiten Fenstern mit dem Inhalt; Werner 02.10.2026). Fassung 7 war WEB-U1, 2026-10-02 (Schriftgroessen ueber Tokens --fs-nav, --fs-body, --fs-lead, --fs-h1, --fs-h2; Klassen legal und page-head fuer Unterseiten; Werner 02.10.2026). Fassung 6 war WEB-H4, 2026-10-02 (Radien und Schatten ueber Tokens: --r 14px, --r-lg 28px, --shadow, --shadow-lg; Werner 02.10.2026). Fassung 5 war WEB-C15, 2026-09-22 (Hero als Content-Slider mit Rechner, Abschnitte Haltung, Ablauf, Ersparnis, Termin). Fassung 4 war WEB-C14, 2026-09-21. Tokens aus dem Designprototyp (Startseite :root), Radius 10px nach Werner. Selektoren gegen das Contao-Markup aus REPORT WEB-C9 A5, WEB-C10 B4 und WEB-C13c C4 (Hero, Produktkarten, Entitaetssatz). */

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

/* 1 Tokens */
:root {
  --accent: #ff9900;
  --accent-ink: #0a1014;
  --accent-text: #ff9900; /* WEB-U6: Orange als Schrift, Linie und Fokus. Flaechen (Knoepfe, Balken) bleiben --accent */
  --dark-1: #0a1014;
  --dark-2: #141e26;
  --p1: #1e323a;
  --p2: #28424c;
  --p3: #34545e;
  --bg: #0a1014;
  --panel: #141e26;
  --card: #1e323a;
  --text: #f6f8f8;
  --muted: #b0bec4;
  --line: rgba(176,190,196,.16);
  --line-strong: rgba(176,190,196,.28);
  --header: rgba(10,16,20,.72);
  --field: rgba(255,255,255,.04);
  --r: 14px; /* WEB-H4: Karten, Menue, Kaestchen */
  --r-lg: 28px; /* WEB-H4: Abschnittsrahmen und Bildflaechen */
  --shadow: 0 18px 36px -18px rgba(0,0,0,.6), 0 4px 12px -6px rgba(0,0,0,.4); /* WEB-H4: Karten, Menue */
  --fs-nav: 16px; /* WEB-U3: Menue, Kopf-Button. War 15px (WEB-U1). Der Fuss haengt nicht an diesem Token, er steht fest auf 14px. */
  --fs-body: clamp(16px,1.1vw,17px); /* WEB-U1: Fliesstext */
  --fs-lead: clamp(17px,1.3vw,19px); /* WEB-U1: Einleitung, Klasse lead */
  --fs-h1: clamp(32px,4.4vw,58px); /* WEB-U1: Seitentitel der Unterseiten */
  --fs-h2: clamp(28px,3.8vw,52px); /* WEB-U1: Abschnittstitel */
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.75), 0 8px 20px -8px rgba(0,0,0,.5); /* WEB-H4: schwebende Bildflaechen, Rezept der Hero-Karte vom 21.09. */
  --pad: clamp(14px,3.6vw,44px);
  --inner: clamp(22px,5vw,72px);
  --max: 1480px;
  --header-h: 74px;
  /* WEB-U5: Hero und Seitenkopf. Himmel, Berge und Schrift je Modus, Werte aus Werners Vorlage getVIA-hg.svg (08.10.2026) */
  --hero-sky-top: #0a1014;
  --hero-sky-bottom: #141e26;
  --hero-berge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4200 1106.78' preserveAspectRatio='none'%3E%3Cpolygon fill='%231e323a' points='0 1106.78 -200 905.92 197 936.95 541 801.4 1307 238 1753 892.85 2867.65 887.95 2946.65 531.94 3078.65 342.52 3460.65 799.77 3813.69 330.71 4363 948.37 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2328424c' points='0 1106.78 -200 1011.08 634 527.72 799.21 970.3 1220.15 452.39 1812 944.51 2702 794.72 2813.39 499.49 3000 565.87 3300 553.39 3702 70.73 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2334545e' points='0 1106.78 -200 913.3 412 963.23 1097.94 734.89 1390 1036.05 2002 1050.61 2418 979.87 2806.6 843.17 3142 680.3 3483.28 824.34 3673.38 621.9 4506 994.44 4200 1106.78 0 1106.78'/%3E%3C/svg%3E");
  --hero-text: #f6f8f8;
  --hero-muted: #b6c4ca; /* WEB-U5: war #b0bec4, jetzt 4,5 auf der vorderen Kette #34545e */
  --hero-ink: 246,248,248; /* Linien und Flaechen als rgba(var(--hero-ink), Deckkraft) */
  --hero-card: rgba(10,16,20,.42);
  --hero-result: linear-gradient(155deg, rgba(40,66,76,.7), rgba(10,16,20,.7));
}
:root[data-theme="light"] {
  --bg: #f6f8f8;
  --panel: #ffffff;
  --card: #f2f5f5;
  --text: #14232b;
  --muted: #4d6570;
  --line: rgba(20,35,43,.12);
  --line-strong: rgba(20,35,43,.22);
  --header: rgba(246,248,248,.78);
  --field: rgba(20,35,43,.03);
  --shadow: 0 18px 36px -18px rgba(20,35,43,.28), 0 4px 12px -6px rgba(20,35,43,.14); /* WEB-H4: hell weicher */
  --accent-text: #a65200; /* WEB-U6: Orange als Schrift hell, mindestens 4,5 auf jedem hellen Grund (#f2f5f5 5,0, Himmel unten #e0ecf5 4,57). Dashboard hat #b45900 */
  /* WEB-U5: Hero und Seitenkopf hell, gespiegelt aus der dunklen Fassung, von Werner freigegeben 08.10.2026 */
  --hero-sky-top: #f8fcff;
  --hero-sky-bottom: #e0ecf5;
  --hero-berge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4200 1106.78' preserveAspectRatio='none'%3E%3Cpolygon fill='%23c1d5de' points='0 1106.78 -200 905.92 197 936.95 541 801.4 1307 238 1753 892.85 2867.65 887.95 2946.65 531.94 3078.65 342.52 3460.65 799.77 3813.69 330.71 4363 948.37 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%23aac3cd' points='0 1106.78 -200 1011.08 634 527.72 799.21 970.3 1220.15 452.39 1812 944.51 2702 794.72 2813.39 499.49 3000 565.87 3300 553.39 3702 70.73 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2393b0ba' points='0 1106.78 -200 913.3 412 963.23 1097.94 734.89 1390 1036.05 2002 1050.61 2418 979.87 2806.6 843.17 3142 680.3 3483.28 824.34 3673.38 621.9 4506 994.44 4200 1106.78 0 1106.78'/%3E%3C/svg%3E");
  --hero-text: #14232b;
  --hero-muted: #28424c; /* WEB-U5: Grundton, 4,5 auf der vorderen Kette #93b0ba. #4e6872 haette dort 2,58 */
  --hero-ink: 20,35,43;
  --hero-card: rgba(248,252,255,.78);
  --hero-result: linear-gradient(155deg, rgba(224,236,245,.92), rgba(248,252,255,.92));
}

/* 2 Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}
img, svg { max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(255,153,0,.28); }
input, textarea, button { font-family: inherit; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.08; letter-spacing: -.025em; margin: 0 0 .5em; text-wrap: pretty; }
h1 { font-size: var(--fs-h1); line-height: 1.06; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.01em; }
h4 { font-size: clamp(17px, 1.4vw, 19px); letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Contao-Sprungmarken: fuer Screenreader da, sichtbar erst mit Tastaturfokus */
.invisible {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
a.invisible:focus-visible {
  position: fixed; top: 10px; left: 10px; z-index: 200; width: auto; height: auto; margin: 0;
  padding: 10px 16px; clip-path: none; background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; font-weight: 600; font-size: 14px;
}

/* 3 Kopf: #header ist fix, .inside traegt Logo, Hauptmenue und die Schalter aus getvia.js */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  background: var(--header);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
#header.is-hidden { transform: translateY(-100%); }
#header > .inside {
  max-width: var(--max); margin: 0 auto; padding: 12px var(--pad);
  min-height: var(--header-h);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 clamp(16px,3vw,40px);
}
#header .logo { flex: 0 0 auto; line-height: 0; }
#header .logo a { display: block; font-size: 0; line-height: 0; }
#header .logo img { display: block; height: 30px; width: auto; max-width: none; }

.main-nav { margin-left: auto; font-size: var(--fs-nav); }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav .level_1 { display: flex; align-items: center; gap: clamp(14px,2vw,30px); }
.main-nav .level_1 > li { position: relative; }
.main-nav a, .main-nav strong { display: block; padding: 10px 0; font-weight: 400; white-space: nowrap; }
.main-nav strong.active, .main-nav a.trail, .main-nav li.active > a { color: var(--accent-text); }
.main-nav .level_1 > li > strong.active, .main-nav .level_1 > li > a.trail, .main-nav .level_1 > li.active > a { box-shadow: inset 0 -2px 0 var(--accent-text); }
.main-nav .level_2 {
  position: absolute; top: 100%; left: -18px; min-width: 210px;
  padding: 10px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.main-nav li.submenu:hover > .level_2,
.main-nav li.submenu:focus-within > .level_2 { opacity: 1; visibility: visible; transform: none; }

.header-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.tool-btn {
  border: 0; background: transparent; padding: 9px; border-radius: 999px; cursor: pointer;
  color: var(--muted); display: grid; place-items: center; line-height: 0;
}
.tool-btn:hover { color: var(--accent-text); }
.tool-btn svg { width: 20px; height: 20px; }
.tool-btn .icon-moon { display: none; }
:root[data-theme="light"] .tool-btn .icon-moon { display: block; }
:root[data-theme="light"] .tool-btn .icon-sun { display: none; }
.menu-btn { display: none; color: var(--text); }

/* Button im Kopf: Inhaltselement Hyperlink auf Theme-Ebene, Klasse header-cta. Die Klasse haengt am div, nicht am a. */
#header .header-cta { flex: 0 0 auto; margin-left: calc(10px - clamp(16px,3vw,40px)); }

/* 4 Buttons: Inhaltselement Hyperlink, Klasse am Wrapper (REPORT WEB-C8b Nebenbefund 7) */
.btn-primary a, .btn-secondary a, a.btn-primary, a.btn-secondary {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent; transition: filter .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary a, a.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary a:hover, a.btn-primary:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn-secondary a, a.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-strong); font-weight: 500; }
.btn-secondary a:hover, a.btn-secondary:hover { color: var(--accent-text); border-color: var(--accent-text); }
#header .header-cta a { padding: 11px 22px; font-size: var(--fs-nav); }
.kicker, .kicker p { margin: 0 0 22px; font-weight: 300; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text); }

/* 5 Inhalt: jeder Artikel ist eine Flaeche mit Radius, wie die Sektionen im Design */
#wrapper { min-height: 100vh; display: flex; flex-direction: column; }
#container { padding-top: var(--header-h); flex: 1 0 auto; }
.mod_article {
  margin: clamp(14px,2.4vw,28px) var(--pad) 0;
  padding: clamp(40px,5.4vw,92px) var(--inner);
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  animation: riseIn .7s ease both;
}
.mod_article > * { max-width: calc(var(--max) - 2 * 72px); margin-left: auto; margin-right: auto; }
.mod_article .content-text { color: var(--muted); font-size: var(--fs-body); }
.mod_article .lead { font-size: var(--fs-lead); }
.mod_article .content-text .rte > * { max-width: 62ch; }
.mod_article .content-text a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.mod_article .content-text a:hover { color: var(--accent-text); }
.mod_article .content-headline { max-width: calc(var(--max) - 2 * 72px); }
.mod_article h1.content-headline { margin-bottom: 26px; }

/* Klasse hero am Artikel: Himmel und Berge, folgt dem Modus (WEB-U5). Berge in voller Breite unten, Hoehe hoechstens 26.35vw oder 45 Prozent des Artikels, ganz, bei knapper Hoehe flacher (WEB-U10).
   Die drei Polygone stammen wortgleich aus Werners Vorlage getVIA-hg.svg (08.10.2026), hinten nach vorne. berge.svg in files/getvia/img ist ein ganzes Banner mit Schrift und eignet sich nicht als Hintergrund. */
.mod_article.hero {
  position: relative; overflow: hidden; border: 0; color: var(--hero-text);
  min-height: clamp(460px,70vh,760px);
  background:
    var(--hero-berge) center bottom / 100% min(26.35vw, 45%) no-repeat,
    linear-gradient(180deg, var(--hero-sky-top) 0%, var(--hero-sky-bottom) 100%);
}
/* Hero als Raster ohne Elementgruppe (Klickpfad Nachtrag 8): Spalte 1 bis 3 tragen den Text, die zwei Hyperlinks stehen nebeneinander in Spalte 1 und 2,
   Spalte 4 ist die Bildflaeche. Solange kein Bild mit Klasse hero-media im Artikel liegt, zeichnet ::after die Flaeche mit den Bergen aus dem Design. */
.mod_article.hero {
  display: grid; grid-template-columns: auto auto minmax(0,1fr) minmax(0,460px);
  column-gap: 12px; align-content: center; justify-content: stretch;
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
}
.mod_article.hero > * { grid-column: 1 / 4; max-width: none; margin-left: 0; margin-right: 0; position: relative; z-index: 1; min-width: 0; }
.mod_article.hero > .kicker { margin-bottom: 22px; }
.mod_article.hero h1.content-headline { font-size: clamp(38px,6.2vw,86px); line-height: 1.02; max-width: none; margin-bottom: 26px; }
.mod_article.hero .content-text { color: var(--hero-muted); }
.mod_article.hero .content-text a { color: var(--hero-text); }
.mod_article.hero .lead .rte > * { max-width: 52ch; }
.mod_article.hero > .content-hyperlink { grid-column: auto; margin-top: 36px; }
.mod_article.hero .btn-secondary a { color: var(--hero-text); border-color: rgba(var(--hero-ink),.34); }
.mod_article.hero .btn-secondary a:hover { color: var(--accent-text); border-color: var(--accent-text); }
.mod_article.hero > .hero-facts { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(var(--hero-ink),.14); }
.hero-facts ul, .hero-facts ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-weight: 300; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hero-muted); line-height: 1.5;
}
.mod_article.hero::after, .mod_article.hero > .hero-media {
  grid-column: 4; grid-row: 1 / span 6; align-self: center; justify-self: end;
  width: 100%; aspect-ratio: 4 / 5; margin-left: clamp(20px,4vw,56px);
  border-radius: var(--r-lg); border: 1px solid rgba(var(--hero-ink),.18); box-shadow: var(--shadow-lg); overflow: hidden;
}
.mod_article.hero::after {
  content: ""; position: relative; z-index: 1;
  background: #141e26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1050 0 1500 1106.78' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230a1014'/%3E%3Cstop offset='1' stop-color='%23141e26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='-400' y='-400' width='6000' height='2000' fill='url(%23h)'/%3E%3Cpolygon fill='%231e323a' points='0 1106.78 -200 905.92 197 936.95 541 801.4 1307 238 1753 892.85 2867.65 887.95 2946.65 531.94 3078.65 342.52 3460.65 799.77 3813.69 330.71 4363 948.37 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2328424c' points='0 1106.78 -200 1011.08 634 527.72 799.21 970.3 1220.15 452.39 1812 944.51 2702 794.72 2813.39 499.49 3000 565.87 3300 553.39 3702 70.73 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2334545e' points='0 1106.78 -200 913.3 412 963.23 1097.94 734.89 1390 1036.05 2002 1050.61 2418 979.87 2806.6 843.17 3142 680.3 3483.28 824.34 3673.38 621.9 4506 994.44 4200 1106.78 0 1106.78'/%3E%3C/svg%3E") center bottom / cover no-repeat;
}
.mod_article.hero:has(> .hero-media)::after { content: none; }
.mod_article.hero > .hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .mod_article.hero { grid-template-columns: auto auto minmax(0,1fr); }
  .mod_article.hero::after, .mod_article.hero > .hero-media { display: none; }
}
@media (max-width: 480px) {
  .mod_article.hero > .content-hyperlink { grid-column: 1 / 4; margin-top: 12px; }
  .mod_article.hero > .content-hyperlink:first-of-type, .mod_article.hero > .lead + .content-hyperlink { margin-top: 30px; }
  .mod_article.hero > .content-hyperlink a { display: block; text-align: center; }
}

/* Hero als Content-Slider (Fassung 5): im Artikel hero liegt EIN Element Content-Slider, Folie 1 ist eine Elementgruppe mit den sechs Hero-Elementen, Folie 2 der Rechner (Unfiltered HTML, .calc).
   Markup aus dem Contao-Template content_element/swiper.html.twig (Zweig 5.7, Abruf 21.09.2026): div.content-swiper > div.swiper > div.swiper-wrapper > div.swiper-slide > Kindelement,
   danach .swiper-button-prev, .swiper-button-next, .swiper-pagination. An der installierten 5.7.13 noch nicht gemessen. Liegen die Elemente wie bisher direkt im Artikel, gelten die Regeln oben unveraendert. */
.mod_article.hero:has(.content-swiper) { display: block; }
.mod_article.hero:has(.content-swiper)::after { content: none; }
.mod_article.hero .swiper { overflow: hidden; position: relative; z-index: 1; padding-top: 2px; }
.mod_article.hero .swiper-wrapper { display: flex; }
.mod_article.hero .swiper-slide { flex: 0 0 100%; width: 100%; height: auto; display: flex; align-items: center; box-sizing: border-box; }
.mod_article.hero .swiper-slide > * { width: 100%; min-width: 0; }
.mod_article.hero .swiper-slide > .content-element-group {
  display: grid; grid-template-columns: auto auto minmax(0,1fr) minmax(0,460px); column-gap: 12px; align-content: center;
}
.mod_article.hero .swiper-slide > .content-element-group > * { grid-column: 1 / 4; max-width: none; margin-left: 0; margin-right: 0; position: relative; z-index: 1; min-width: 0; }
.mod_article.hero .swiper-slide > .content-element-group > .kicker { margin-bottom: 22px; }
.mod_article.hero .swiper-slide > .content-element-group > .content-hyperlink { grid-column: auto; margin-top: 36px; }
.mod_article.hero .swiper-slide > .content-element-group > .content-list { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(var(--hero-ink),.14); }
.mod_article.hero .swiper-slide > .content-element-group > .content-list ul, .mod_article.hero .swiper-slide > .content-element-group > .content-list ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-weight: 300; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hero-muted); line-height: 1.5;
}
.mod_article.hero .swiper-slide > .content-element-group::after, .mod_article.hero .swiper-slide > .content-element-group > .hero-media {
  grid-column: 4; grid-row: 1 / span 6; align-self: center; justify-self: end;
  width: 100%; aspect-ratio: 4 / 5; margin-left: clamp(20px,4vw,56px);
  border-radius: var(--r-lg); border: 1px solid rgba(var(--hero-ink),.18); box-shadow: var(--shadow-lg); overflow: hidden;
}
.mod_article.hero .swiper-slide > .content-element-group::after {
  content: ""; position: relative; z-index: 1;
  background: #141e26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1050 0 1500 1106.78' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230a1014'/%3E%3Cstop offset='1' stop-color='%23141e26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='-400' y='-400' width='6000' height='2000' fill='url(%23h)'/%3E%3Cpolygon fill='%231e323a' points='0 1106.78 -200 905.92 197 936.95 541 801.4 1307 238 1753 892.85 2867.65 887.95 2946.65 531.94 3078.65 342.52 3460.65 799.77 3813.69 330.71 4363 948.37 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2328424c' points='0 1106.78 -200 1011.08 634 527.72 799.21 970.3 1220.15 452.39 1812 944.51 2702 794.72 2813.39 499.49 3000 565.87 3300 553.39 3702 70.73 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2334545e' points='0 1106.78 -200 913.3 412 963.23 1097.94 734.89 1390 1036.05 2002 1050.61 2418 979.87 2806.6 843.17 3142 680.3 3483.28 824.34 3673.38 621.9 4506 994.44 4200 1106.78 0 1106.78'/%3E%3C/svg%3E") center bottom / cover no-repeat;
}
.mod_article.hero .swiper-slide > .content-element-group:has(> .hero-media)::after { content: none; }
.mod_article.hero .swiper-slide > .content-element-group > .hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .mod_article.hero .swiper-slide > .content-element-group { grid-template-columns: auto auto minmax(0,1fr); }
  .mod_article.hero .swiper-slide > .content-element-group::after, .mod_article.hero .swiper-slide > .content-element-group > .hero-media { display: none; }
}
@media (max-width: 480px) {
  .mod_article.hero .swiper-slide > .content-element-group > .content-hyperlink { grid-column: 1 / 4; margin-top: 12px; }
  .mod_article.hero .swiper-slide > .content-element-group > .content-text + .content-hyperlink { margin-top: 30px; }
  .mod_article.hero .swiper-slide > .content-element-group > .content-hyperlink a { display: block; text-align: center; }
}
/* Bedienung: die Pfeile entfallen, die zwei Punkte werden Reiter. getvia.js beschriftet sie aus data-tabs am Rechner, ohne Script bleiben es zwei Striche. */
.mod_article.hero .swiper-button-prev, .mod_article.hero .swiper-button-next { display: none; }
.mod_article.hero .swiper-pagination { position: absolute; top: 0; right: 0; left: auto; bottom: auto; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; width: auto; transform: none; }
@media (max-width: 900px) {
  .mod_article.hero .swiper { display: flex; flex-direction: column; }
  .mod_article.hero .swiper-pagination { position: static; order: -1; margin-bottom: 26px; }
}
.mod_article.hero .swiper-pagination-bullet {
  width: 34px; height: 6px; margin: 0 !important; padding: 0; border-radius: 999px; opacity: 1; cursor: pointer;
  background: rgba(var(--hero-ink),.22); color: var(--hero-muted); font-size: 12px; font-weight: 500; line-height: 1.2; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mod_article.hero .swiper-pagination-bullet-active { background: var(--accent); }
.mod_article.hero .swiper.has-tabs .swiper-pagination-bullet { width: auto; height: auto; padding: 9px 16px; background: transparent; border: 1px solid rgba(var(--hero-ink),.26); }
.mod_article.hero .swiper.has-tabs .swiper-pagination-bullet:hover { color: var(--hero-text); border-color: rgba(var(--hero-ink),.5); }
.mod_article.hero .swiper.has-tabs .swiper-pagination-bullet-active, .mod_article.hero .swiper.has-tabs .swiper-pagination-bullet-active:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Rechner (.calc): steht im Hero und nimmt dessen Farben je Modus (WEB-U5). Zwei Karten nebeneinander, links die fuenf Regler, rechts das Ergebnis. */
.calc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(14px,1.6vw,22px); color: var(--hero-text); }
.calc > .calc-head, .calc > .calc-foot { grid-column: 1 / -1; }
.calc p { margin: 0; }
.calc-kicker { font-weight: 300; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px !important; }
.calc h2 { margin: 0 0 6px; font-size: clamp(26px,3.2vw,44px); line-height: 1.08; max-width: 24ch; }
.calc-card { border-radius: var(--r-lg); padding: clamp(20px,2vw,30px); border: 1px solid rgba(var(--hero-ink),.16); background: var(--hero-card); display: flex; flex-direction: column; gap: 14px; }
.calc-result { background: var(--hero-result); }
.calc-label { font-weight: 300; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hero-muted); }
.calc-inputs .calc-label ~ .calc-label { margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(var(--hero-ink),.14); }
.calc-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: baseline; font-size: 14px; color: var(--hero-muted); cursor: pointer; }
.calc-row input { grid-column: 1 / -1; }
.calc-val { color: var(--hero-text); font-weight: 600; font-size: 16px; white-space: nowrap; }
.calc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; }
.calc .tel { background: #ff9900; } .calc .wa { background: #6fb7a5; } .calc .mail { background: var(--hero-muted); }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; accent-color: #ff9900; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: rgba(var(--hero-ink),.22); }
.calc input[type="range"]::-moz-range-track { height: 3px; border-radius: 999px; background: rgba(var(--hero-ink),.22); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: #ff9900; border: 3px solid var(--hero-sky-bottom); box-shadow: 0 0 0 1px #ff9900; }
.calc input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ff9900; border: 3px solid var(--hero-sky-bottom); box-shadow: 0 0 0 1px #ff9900; }
.calc:not(.is-live) input[type="range"] { display: none; }
.calc-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(var(--hero-ink),.12); }
.calc-bar span { display: block; height: 100%; transition: width .3s ease; }
.calc-plan { font-size: 14px; line-height: 1.5; color: var(--hero-muted); padding: 12px 14px; border-radius: var(--r); border: 1px solid rgba(255,153,0,.4); background: rgba(255,153,0,.08); }
.calc-plan strong { color: var(--hero-text); }
.calc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 18px; margin: 0; }
.calc-metrics .wide { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid rgba(var(--hero-ink),.14); }
.calc-metrics dt { font-size: 12px; color: var(--hero-muted); margin-bottom: 4px; }
.calc-metrics dd { margin: 0; font-weight: 600; font-size: clamp(17px,1.5vw,21px); line-height: 1.2; }
.calc-metrics .calc-net { font-size: clamp(20px,2vw,28px); color: var(--accent-text); letter-spacing: -.01em; }
.calc-metrics .calc-net.is-negative { color: var(--hero-muted); }
.calc-payback { font-size: 13px; color: var(--hero-muted); }
.calc-cta { margin-top: auto !important; }
.calc-cta a { display: block; text-align: center; padding: 14px 24px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px; line-height: 1.2; text-wrap: balance; }
.calc-cta a:hover { color: var(--accent-ink); filter: brightness(1.08); }
.calc-foot { font-size: 12px; line-height: 1.6; color: var(--hero-muted); max-width: 110ch; }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0,1fr); } }

/* Produktkarten: Artikel mit Klasse cards ist das Raster, jede Elementgruppe darin ist eine Karte (Markup REPORT WEB-C13c C4: div.card.content-element-group, Kinder direkt darin).
   Gezielt wird auf den Typ, nicht nur auf die Klasse: jede Gruppe im Raster ist Karte, jede Liste in einer Karte sind Schlagworte, jeder Hyperlink ist der Kartenlink. */
.mod_article.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,1.6vw,22px);
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
}
.mod_article.cards > * { grid-column: 1 / -1; max-width: none; margin-left: 0; margin-right: 0; min-width: 0; }
.mod_article.cards > .kicker { margin-bottom: 6px; }
.mod_article.cards > .kicker, .mod_article.cards > .kicker p { color: var(--accent-text); }
.mod_article.cards > h2.content-headline { max-width: 22ch; font-size: var(--fs-h2); letter-spacing: -.02em; margin-bottom: clamp(22px,2.6vw,38px); }
.mod_article.cards > .content-element-group {
  grid-column: auto; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px,2.4vw,36px); border-radius: var(--r); box-shadow: var(--shadow);
  background: var(--card); border: 1px solid var(--line); transition: border-color .2s ease;
}
.mod_article.cards > .content-element-group:hover { border-color: var(--line-strong); }
@media (max-width: 860px) { .mod_article.cards { grid-template-columns: minmax(0,1fr); } }
.mod_article.cards:has(> .content-element-group ~ .content-element-group ~ .content-element-group ~ .content-element-group) { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 600px) { .mod_article.cards:has(> .content-element-group ~ .content-element-group ~ .content-element-group ~ .content-element-group) { grid-template-columns: minmax(0,1fr); } }
.cards .content-element-group > * { margin: 0; }
.cards .content-element-group .kicker, .cards .content-element-group .kicker p { margin: 0; font-size: 11px; letter-spacing: .2em; color: var(--accent-text); }
.cards .content-element-group h3.content-headline { font-size: clamp(22px,1.9vw,28px); line-height: 1.15; }
.cards .content-element-group .content-text { font-size: 15px; line-height: 1.6; }
.cards .content-element-group .content-list { margin-top: auto; padding-top: 16px; }
.cards .content-element-group .content-list ul, .cards .content-element-group .content-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.cards .content-element-group .content-list li { font-size: 12px; line-height: 1.3; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.cards .content-element-group .card-foot, .cards .content-element-group .card-footer { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text); }
.cards .content-element-group .content-hyperlink { font-size: 14px; font-weight: 600; }
.cards .content-element-group .content-hyperlink a { color: var(--accent-text); }
.cards .content-element-group .content-hyperlink a::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .2s ease; }
.cards .content-element-group .content-hyperlink a:hover::after { transform: translateX(4px); }
/* WEB-U16: h2 in einer Karte (Live erleben) so gross wie h3 in Karten. Karte mit Klasse akzent: dunkle Flaeche mit oranger Oberkante wie die Paketkarte Team, in hell und dunkel gleich. */
.cards .content-element-group h2.content-headline { font-size: clamp(22px,1.9vw,28px); line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.mod_article.cards > .content-element-group.akzent {
  --accent-text: #ff9900; --text: #f6f8f8; --muted: #b0bec4; --line: rgba(246,248,248,.18); --line-strong: rgba(246,248,248,.34);
  color: #f6f8f8; border: 0; box-shadow: var(--shadow-lg), inset 0 3px 0 #ff9900;
  background: linear-gradient(155deg, #28424c 0%, #1e323a 45%, #0a1014 100%);
}
@media (min-width: 1280px) { .mod_article.cards.live:has(> .content-element-group ~ .content-element-group ~ .content-element-group ~ .content-element-group) { grid-template-columns: repeat(4, minmax(0,1fr)); } }
/* WEB-U17: Hyperlink mit Klasse card-link (Live erleben) als gruener WhatsApp-Knopf, volle Kartenbreite, Schrift dunkel (Kontrast etwa 10:1). Zeichen bxl-whatsapp aus Boxicons 2.1.4, MIT-Lizenz, als Maske in Schriftfarbe. */
.cards .content-element-group .card-link { margin-top: 4px; }
.cards .content-element-group .card-link a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 999px; background: #25d366; color: #0b141a; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.cards .content-element-group .card-link a::after { content: none; }
.cards .content-element-group .card-link a::before { content: ""; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M18.403 5.633A8.919 8.919 0 0 0 12.053 3c-4.948 0-8.976 4.027-8.978 8.977 0 1.582.413 3.126 1.198 4.488L3 21.116l4.759-1.249a8.981 8.981 0 0 0 4.29 1.093h.004c4.947 0 8.975-4.027 8.977-8.977a8.926 8.926 0 0 0-2.627-6.35m-6.35 13.812h-.003a7.446 7.446 0 0 1-3.798-1.041l-.272-.162-2.824.741.753-2.753-.177-.282a7.448 7.448 0 0 1-1.141-3.971c.002-4.114 3.349-7.461 7.465-7.461a7.413 7.413 0 0 1 5.275 2.188 7.42 7.42 0 0 1 2.183 5.279c-.002 4.114-3.349 7.462-7.461 7.462m4.093-5.589c-.225-.113-1.327-.655-1.533-.73-.205-.075-.354-.112-.504.112s-.58.729-.711.879-.262.168-.486.056-.947-.349-1.804-1.113c-.667-.595-1.117-1.329-1.248-1.554s-.014-.346.099-.458c.101-.1.224-.262.336-.393.112-.131.149-.224.224-.374s.038-.281-.019-.393c-.056-.113-.505-1.217-.692-1.666-.181-.435-.366-.377-.504-.383a9.65 9.65 0 0 0-.429-.008.826.826 0 0 0-.599.28c-.206.225-.785.767-.785 1.871s.804 2.171.916 2.321c.112.15 1.582 2.415 3.832 3.387.536.231.954.369 1.279.473.537.171 1.026.146 1.413.089.431-.064 1.327-.542 1.514-1.066.187-.524.187-.973.131-1.067-.056-.094-.207-.151-.43-.263'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M18.403 5.633A8.919 8.919 0 0 0 12.053 3c-4.948 0-8.976 4.027-8.978 8.977 0 1.582.413 3.126 1.198 4.488L3 21.116l4.759-1.249a8.981 8.981 0 0 0 4.29 1.093h.004c4.947 0 8.975-4.027 8.977-8.977a8.926 8.926 0 0 0-2.627-6.35m-6.35 13.812h-.003a7.446 7.446 0 0 1-3.798-1.041l-.272-.162-2.824.741.753-2.753-.177-.282a7.448 7.448 0 0 1-1.141-3.971c.002-4.114 3.349-7.461 7.465-7.461a7.413 7.413 0 0 1 5.275 2.188 7.42 7.42 0 0 1 2.183 5.279c-.002 4.114-3.349 7.462-7.461 7.462m4.093-5.589c-.225-.113-1.327-.655-1.533-.73-.205-.075-.354-.112-.504.112s-.58.729-.711.879-.262.168-.486.056-.947-.349-1.804-1.113c-.667-.595-1.117-1.329-1.248-1.554s-.014-.346.099-.458c.101-.1.224-.262.336-.393.112-.131.149-.224.224-.374s.038-.281-.019-.393c-.056-.113-.505-1.217-.692-1.666-.181-.435-.366-.377-.504-.383a9.65 9.65 0 0 0-.429-.008.826.826 0 0 0-.599.28c-.206.225-.785.767-.785 1.871s.804 2.171.916 2.321c.112.15 1.582 2.415 3.832 3.387.536.231.954.369 1.279.473.537.171 1.026.146 1.413.089.431-.064 1.327-.542 1.514-1.066.187-.524.187-.973.131-1.067-.056-.094-.207-.151-.43-.263'/%3E%3C/svg%3E") center / contain no-repeat; }
.cards .content-element-group .card-link a:hover { background: #1ebe5a; transform: translateY(-1px); }
.cards .content-element-group .card-link a:focus-visible { outline: 2px solid #25d366; outline-offset: 3px; }

/* Vier Abschnitte der Startseite (Fassung 5): Artikel mit Klasse haltung, ablauf, ersparnis, termin. Bauweise wie die Karten: der Artikel ist das Raster,
   Elementgruppen sind die Flaechen, keine Gruppe in einer Gruppe. Gezielt wird auf den Elementtyp im Artikel, die Klassen an den Elementen sind Zugabe.
   Markup abgeleitet aus REPORT WEB-C13c C4 (Wrapper je Elementtyp gemessen), die Abschnitte selbst sind noch nicht gemessen. */
.mod_article.haltung, .mod_article.ablauf, .mod_article.ersparnis, .mod_article.termin {
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
}
.mod_article.haltung > *, .mod_article.ablauf > *, .mod_article.ersparnis > *, .mod_article.termin > * { max-width: none; margin-left: 0; margin-right: 0; min-width: 0; }
.mod_article.ablauf > .kicker, .mod_article.ablauf > .kicker p, .mod_article.ersparnis > .kicker, .mod_article.ersparnis > .kicker p { color: var(--accent-text); }
.mod_article.ablauf > h2.content-headline, .mod_article.ersparnis > h2.content-headline { font-size: var(--fs-h2); letter-spacing: -.02em; }

/* Haltung: immer dunkel. Spalte 1 ist die Bildflaeche (gezeichnet, bis ein Bild mit Klasse haltung-media im Artikel liegt), Spalte 2 traegt Kicker, h2 und drei Gruppen mit h4 und Text. */
.mod_article.haltung {
  display: grid; grid-template-columns: minmax(0,420px) minmax(0,1fr); column-gap: clamp(30px,5vw,72px); align-content: center;
  border: 0; color: #f6f8f8; background: linear-gradient(150deg, #1e323a 0%, #141e26 58%, #0a1014 100%);
}
.mod_article.haltung > * { grid-column: 2; }
.mod_article.haltung, .mod_article.ersparnis > .content-element-group ~ .content-element-group { --accent-text: #ff9900; } /* WEB-U6: immer dunkel, Orange als Schrift bleibt #ff9900 */
.mod_article.haltung::before, .mod_article.haltung > .haltung-media {
  grid-column: 1; grid-row: 1 / span 8; align-self: stretch;
  width: 100%; min-height: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(246,248,248,.16); overflow: hidden;
}
.mod_article.haltung::before {
  content: "";
  background: #0a1014 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2700 0 1500 1106.78' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230a1014'/%3E%3Cstop offset='1' stop-color='%23141e26'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='-400' y='-400' width='6000' height='2000' fill='url(%23h)'/%3E%3Cpolygon fill='%231e323a' points='0 1106.78 -200 905.92 197 936.95 541 801.4 1307 238 1753 892.85 2867.65 887.95 2946.65 531.94 3078.65 342.52 3460.65 799.77 3813.69 330.71 4363 948.37 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2328424c' points='0 1106.78 -200 1011.08 634 527.72 799.21 970.3 1220.15 452.39 1812 944.51 2702 794.72 2813.39 499.49 3000 565.87 3300 553.39 3702 70.73 4200 1106.78 0 1106.78'/%3E%3Cpolygon fill='%2334545e' points='0 1106.78 -200 913.3 412 963.23 1097.94 734.89 1390 1036.05 2002 1050.61 2418 979.87 2806.6 843.17 3142 680.3 3483.28 824.34 3673.38 621.9 4506 994.44 4200 1106.78 0 1106.78'/%3E%3C/svg%3E") center bottom / cover no-repeat;
}
.mod_article.haltung:has(> .haltung-media)::before { content: none; }
.mod_article.haltung > .haltung-media { position: relative; }
.mod_article.haltung > .haltung-media figure { position: absolute; inset: 0; margin: 0; }
.mod_article.haltung > .haltung-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mod_article.haltung > h2.content-headline { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.02em; margin-bottom: clamp(28px,3vw,44px); }
.mod_article.haltung > .content-element-group { padding: 22px 0; border-top: 1px solid rgba(246,248,248,.14); }
.mod_article.haltung > .content-element-group:last-child { border-bottom: 1px solid rgba(246,248,248,.14); }
.mod_article.haltung .content-element-group > * { margin: 0; }
.mod_article.haltung .content-element-group .content-headline { font-size: 17px; line-height: 1.3; letter-spacing: 0; margin-bottom: 8px; }
.mod_article.haltung .content-text { color: #b0bec4; font-size: 15px; line-height: 1.6; }
.mod_article.haltung .content-text .rte > * { max-width: 52ch; }
.mod_article.haltung .content-text a { color: #f6f8f8; }
@media (max-width: 900px) {
  .mod_article.haltung { grid-template-columns: minmax(0,1fr); }
  .mod_article.haltung > * { grid-column: 1; }
  .mod_article.haltung::before, .mod_article.haltung > .haltung-media { display: none; }
}

/* Ablauf: jede Elementgruppe ist ein Schritt. Die Ziffer 01 bis 04 zaehlt das CSS, sie wird nicht gepflegt. */
.mod_article.ablauf { counter-reset: schritt; }
.mod_article.ablauf > h2.content-headline { max-width: 20ch; margin-bottom: clamp(34px,4vw,58px); }
.mod_article.ablauf > .content-element-group {
  counter-increment: schritt;
  display: grid; grid-template-columns: minmax(64px,auto) minmax(0,1fr) minmax(0,1.4fr); gap: 12px clamp(18px,3vw,52px); align-items: start;
  padding: clamp(24px,2.6vw,38px) 0; border-top: 1px solid var(--line);
}
.mod_article.ablauf > .content-element-group:last-child { border-bottom: 1px solid var(--line); }
.mod_article.ablauf > .content-element-group::before {
  content: counter(schritt, decimal-leading-zero);
  font-weight: 300; font-size: clamp(30px,3.4vw,46px); line-height: 1; color: var(--accent-text);
}
.mod_article.ablauf .content-element-group > * { margin: 0; min-width: 0; }
.mod_article.ablauf .content-element-group .content-headline { font-size: clamp(20px,1.8vw,26px); line-height: 1.2; letter-spacing: -.01em; }
.mod_article.ablauf .content-element-group .content-text { font-size: 15px; line-height: 1.65; }
.mod_article.ablauf .content-element-group .content-text .rte > * { max-width: 56ch; }
@media (max-width: 760px) {
  .mod_article.ablauf > .content-element-group { grid-template-columns: minmax(52px,auto) minmax(0,1fr); }
  .mod_article.ablauf > .content-element-group::before { grid-row: 1 / span 2; }
  .mod_article.ablauf .content-element-group > * { grid-column: 2; }
}

/* Ersparnis: statisch, ohne Regler. Gruppe 1 sind die Annahmen (helle Karte), Gruppe 2 ist die Rechnung (immer dunkel).
   Eine Zeile ist ein Absatz im Text-Element, der fett gesetzte Teil ist der Wert und rueckt nach rechts. */
.mod_article.ersparnis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px,2vw,28px); align-items: start; }
.mod_article.ersparnis > * { grid-column: 1 / -1; }
.mod_article.ersparnis > .kicker { margin-bottom: -6px; }
.mod_article.ersparnis > h2.content-headline { max-width: 24ch; margin-bottom: clamp(14px,2vw,30px); }
.mod_article.ersparnis > .content-element-group {
  grid-column: auto; align-self: stretch; display: flex; flex-direction: column; gap: 20px;
  padding: clamp(24px,2.6vw,38px); border-radius: var(--r); background: var(--card); border: 1px solid var(--line);
}
.mod_article.ersparnis > .content-element-group ~ .content-element-group { border: 0; color: #f6f8f8; background: linear-gradient(155deg, #1e323a, #0a1014); }
.mod_article.ersparnis .content-element-group > * { margin: 0; }
.mod_article.ersparnis .content-element-group .kicker, .mod_article.ersparnis .content-element-group .kicker p { margin: 0; font-size: 11px; letter-spacing: .2em; color: var(--accent-text); }
.mod_article.ersparnis .content-element-group .content-text { font-size: 15px; line-height: 1.5; }
.mod_article.ersparnis .content-element-group .content-text .rte > * { max-width: none; }
.mod_article.ersparnis .content-element-group .content-text p:has(> strong) {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.mod_article.ersparnis .content-element-group .content-text p:has(> strong):first-child { padding-top: 0; }
.mod_article.ersparnis .content-element-group .content-text strong { font-weight: 600; font-size: 20px; color: var(--text); white-space: nowrap; }
.mod_article.ersparnis .content-element-group .note { font-size: 12px; line-height: 1.6; }
.mod_article.ersparnis > .content-element-group ~ .content-element-group .kicker,
.mod_article.ersparnis > .content-element-group ~ .content-element-group .kicker p,
.mod_article.ersparnis > .content-element-group ~ .content-element-group .content-text { color: #b0bec4; }
.mod_article.ersparnis > .content-element-group ~ .content-element-group .content-text p:has(> strong) { border-bottom-color: rgba(246,248,248,.14); }
.mod_article.ersparnis > .content-element-group ~ .content-element-group .content-text strong { color: #f6f8f8; font-weight: 400; font-size: 16px; }
.mod_article.ersparnis .content-element-group .sum p:first-child { font-weight: 300; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 6px; }
.mod_article.ersparnis > .content-element-group ~ .content-element-group .sum p:has(> strong) { display: block; padding: 0; border: 0; }
.mod_article.ersparnis > .content-element-group ~ .content-element-group .sum strong { font-weight: 600; font-size: clamp(40px,5vw,66px); line-height: 1; letter-spacing: -.03em; }
.mod_article.ersparnis .content-element-group .sum p:last-child { margin: 8px 0 0; font-size: 14px; }
.mod_article.ersparnis .content-element-group .content-hyperlink { margin-top: auto; padding-top: 8px; }
.mod_article.ersparnis .content-element-group .content-hyperlink a { display: block; text-align: center; white-space: normal; }
@media (max-width: 860px) { .mod_article.ersparnis { grid-template-columns: minmax(0,1fr); } }

/* Termin: immer dunkel, ohne Formular. Spalte 1 Kicker, h2, Text und Button, Spalte 2 die Adresse als Flaeche (Text mit Klasse address). */
.mod_article.termin {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); column-gap: clamp(32px,5vw,72px); align-content: center;
  border: 0; color: #f6f8f8; background: linear-gradient(150deg, #28424c 0%, #1e323a 50%, #0a1014 100%);
}
.mod_article.termin > * { grid-column: 1; }
.mod_article.termin > h2.content-headline { font-size: var(--fs-h2); line-height: 1.06; margin-bottom: 24px; }
.mod_article.termin .content-text { color: #b0bec4; font-size: 16px; line-height: 1.65; }
.mod_article.termin .content-text .rte > * { max-width: 46ch; }
.mod_article.termin .content-text a { color: #f6f8f8; }
.mod_article.termin > .content-hyperlink { margin-top: clamp(26px,3vw,40px); }
.mod_article.termin > .address {
  grid-column: 2; grid-row: 1 / span 8; align-self: center;
  padding: clamp(24px,2.6vw,38px); border-radius: var(--r); box-shadow: var(--shadow);
  background: rgba(10,16,20,.42); border: 1px solid rgba(246,248,248,.16); font-size: 15px; line-height: 1.7;
}
.mod_article.termin > .address p { margin: 0 0 6px; }
.mod_article.termin > .address p:first-child { color: #f6f8f8; font-weight: 600; }
@media (max-width: 860px) {
  .mod_article.termin { grid-template-columns: minmax(0,1fr); }
  .mod_article.termin > .address { grid-column: 1; grid-row: auto; margin-top: clamp(30px,3.4vw,48px); }
}

/* Entitaetssatz: Theme-Inhaltselement Text mit Klasse entity in der Hauptspalte nach dem Artikel, auf jeder Seite. Fluchtet mit dem Text in den Flaechen. */
#main .entity {
  margin: clamp(18px,2.6vw,30px) var(--pad) 0;
  padding: 0 max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  color: var(--muted); font-size: 13px; line-height: 1.65;
}
#main .entity .rte > * { max-width: 96ch; margin: 0; }

/* 6 Fuss */
#footer > .inside {
  margin: clamp(18px,3vw,34px) var(--pad);
  padding: 28px max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between;
  font-size: 14px;
}
#footer .content-text { color: var(--muted); max-width: 46ch; line-height: 1.65; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-nav strong.active { color: var(--accent-text); font-weight: 400; }

/* 7 Schmal: Menue klappt unter den Kopf, Schalter aus getvia.js */
@media (max-width: 900px) {
  .menu-btn { display: grid; }
  .header-tools { margin-left: auto; }
  #header .header-cta { display: none; margin-left: 0; }
  .main-nav {
    display: none; order: 10; flex: 0 0 100%; margin: 8px 0 6px; font-size: 17px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
    padding: 10px 20px 14px; box-shadow: var(--shadow);
    max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto;
  }
  html.menu-open .main-nav { display: block; }
  html.menu-open #header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.menu-open #header .header-cta { display: flex; justify-content: center; order: 11; flex: 0 0 100%; margin: 6px 0 12px; }
  html.menu-open #header .header-cta a { padding: 14px 30px; font-size: 15px; }
  .main-nav .level_1 > li > strong.active, .main-nav .level_1 > li > a.trail, .main-nav .level_1 > li.active > a { box-shadow: none; }
  .main-nav .level_1 { display: block; }
  .main-nav .level_1 > li { border-bottom: 1px solid var(--line); }
  .main-nav .level_1 > li:last-child { border-bottom: 0; }
  .main-nav a, .main-nav strong { padding: 13px 6px; white-space: normal; }
  .main-nav .level_2 {
    position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    padding: 0 0 8px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 15px;
  }
  .main-nav .level_2 a, .main-nav .level_2 strong { padding: 8px 6px; color: var(--muted); }
  .main-nav .level_2 strong.active { color: var(--accent-text); }
}

/* 8 Bewegung */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: riseIn .7s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 9 Movie */
/* WEB-H2, Nachtrag 2 (22.09.2026). Fall B. Raster: .mod_article.hero .swiper-slide > .content-element-group (Z. 231-233),
   vier Spalten, keine expliziten Zeilen. Auto-Placement: 1 Kicker, 2 H1, 3 Lead, 4 beide Buttons, 5 Facts.
   Karte in Spalte 4, Zeile 2 bis 5. Selektor (0,6,0) schlaegt Z. 242-246 (0,5,0), steht spaeter in der Datei. */
.mod_article.hero .swiper-slide > .content-element-group > .hero-media.content-player {
  grid-column: 4;
  grid-row: 2 / span 4;
  align-self: stretch;
  justify-self: end;
  width: calc(100% - 40px); /* V2: 40 px Luft rechts fuer den Schatten, Blur 60 minus Spread 20 */
  margin-right: 40px;
  aspect-ratio: auto; /* Z. 244 setzt 4 / 5, die Hoehe kommt aus den Zeilen */
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--hero-ink),.16); /* wie .calc-card, Z. 284 */
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.mod_article.hero .swiper-slide > .content-element-group > .hero-media.content-player figure {
  position: absolute;
  inset: 0;
  margin: 0;
}
.mod_article.hero .swiper-slide > .content-element-group > .hero-media.content-player video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 100%;
  border-radius: 0; /* N1.1: die Karte clippt ueber overflow, das Video braucht keinen Radius */
  display: block;
}
/* Nachtrag 4 (22.09.2026): Luft unten bleibt im Fluss. margin-bottom -5rem hat den Artikel ueber die Slide-Unterkante gezogen,
   .mod_article.hero clippt (Z. 173). Rechts keine Luft, spaceBetween ist 0. */
.mod_article.hero .swiper {
  padding-bottom: 5rem;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .mod_article.hero .swiper-slide > .content-element-group > .hero-media.content-player {
    display: block; /* N2.4: Z. 255 blendet die Karte aus, hier gewinnt (0,6,0) */
    grid-column: 1 / -1; /* Werner 22.09.: statt auto, Z. 254 hat drei Spalten, auto waere nur Spalte 1 (Buttonbreite) */
    margin-top: 32px; /* WEB-H3: Abstand zur Facts-Zeile, Nachtrag 5 aus WEB-H2 */
    grid-row: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 4 / 5;
  }
}

/* 10 Rechtstext (WEB-U1): Artikel mit Klasse legal, Impressum und Datenschutz. Schmale Lesespalte, Abschnittstitel als fette erste Zeile im Absatz. */
.mod_article.legal { padding-top: clamp(40px,4.6vw,72px); padding-bottom: clamp(40px,4.6vw,72px); }
.mod_article.legal h1.content-headline { margin-bottom: clamp(24px,2.6vw,36px); }
.mod_article.legal .content-text { font-size: var(--fs-body); line-height: 1.7; }
.mod_article.legal .content-text .rte > * { max-width: 68ch; }
.mod_article.legal .content-text p { margin: 0 0 1em; }
.mod_article.legal .content-text p:has(> strong:first-child) { margin-top: 1.9em; }
.mod_article.legal .content-text .rte > p:first-child { margin-top: 0; }
.mod_article.legal .content-text strong { color: var(--text); font-weight: 600; }
.mod_article.legal .content-text p > strong:first-child { font-size: clamp(17px,1.3vw,19px); line-height: 1.5; }
.mod_article.legal > .content-text + .content-text { margin-top: clamp(28px,3vw,44px); padding-top: clamp(28px,3vw,44px); border-top: 1px solid var(--line); }
.mod_article.legal > .content-text + .content-text .rte > p:first-child > strong:first-child { font-size: clamp(20px,2vw,26px); letter-spacing: -.01em; line-height: 1.9; }

/* 11 Seitenkopf (WEB-U1): Artikel mit Klasse page-head als erster Artikel einer Unterseite. Himmel und Berge wie der Hero der Startseite, folgt dem Modus (WEB-U5), flach. */
.mod_article.page-head {
  position: relative; overflow: hidden; border: 0; color: var(--hero-text);
  min-height: clamp(240px,34vh,380px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(40px,5vw,84px); padding-bottom: clamp(72px,9vw,150px);
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  background:
    var(--hero-berge) center bottom / 100% min(26.35vw, 72%) no-repeat,
    linear-gradient(180deg, var(--hero-sky-top) 0%, var(--hero-sky-bottom) 100%);
}
.mod_article.page-head > * { position: relative; z-index: 1; width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.mod_article.page-head h1.content-headline { margin: 0; max-width: 22ch; font-size: clamp(24px,6.6vw,58px); overflow-wrap: break-word; hyphens: manual; } /* WEB-U18: keine Trennung mehr, auch nicht am Handy (Bran-che.) */
.mod_article.page-head > .kicker { margin-bottom: 18px; }
.mod_article.page-head .content-text { color: var(--hero-muted); }
.mod_article.page-head .content-text a { color: var(--hero-text); }
.mod_article.page-head .lead { margin-top: 22px; }
.mod_article.page-head .lead .rte > * { max-width: 52ch; }

/* 12 Formular (WEB-U3): Contao-Formulargenerator, Markup aus Anlagen/Kontakt_ getVIA, Malta in Kaernten.html.
   div.ce_form > form > div.formbody > fieldset > legend + div.widget (label, input.text | textarea.textarea), div.widget-altcha, div.widget-submit > button.submit.
   Gilt fuer jedes Formular der Seite, nicht nur fuer Kontakt. Die Felder stehen mit 16px, darunter zoomt iOS beim Antippen. */
.ce_form fieldset { border: 0; margin: 0 0 clamp(18px,2vw,26px); padding: 0; min-width: 0; }
.ce_form legend { display: block; width: 100%; padding: 0; margin: 0 0 14px; font-weight: 300; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ce_form .widget { margin: 0 0 16px; min-width: 0; }
.ce_form .widget > label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text); }
.ce_form label span.mandatory { margin-left: 3px; color: var(--accent-text); }
.ce_form input.text, .ce_form textarea.textarea {
  display: block; width: 100%; padding: 13px 16px; font-size: 16px; line-height: 1.45; color: var(--text);
  background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--r);
  transition: border-color .2s ease, background .2s ease; -webkit-appearance: none; appearance: none;
}
.ce_form textarea.textarea { min-height: 150px; resize: vertical; }
.ce_form input.text::placeholder, .ce_form textarea.textarea::placeholder { color: var(--muted); opacity: .7; }
.ce_form input.text:hover, .ce_form textarea.textarea:hover { border-color: var(--muted); }
.ce_form input.text:focus-visible, .ce_form textarea.textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text); border-radius: var(--r); }
.ce_form p.error { margin: 0 0 7px; font-size: 14px; line-height: 1.4; color: #ff9d8f; }
:root[data-theme="light"] .ce_form p.error { color: #b3261e; }
.ce_form input.error, .ce_form textarea.error { border-color: #ff9d8f; }
:root[data-theme="light"] .ce_form input.error, :root[data-theme="light"] .ce_form textarea.error { border-color: #b3261e; }
.ce_form .widget-altcha { margin-top: clamp(4px,.6vw,8px); }
.ce_form altcha-widget {
  display: block;
  --altcha-max-width: 320px; --altcha-border-radius: var(--r); --altcha-color-base: var(--field);
  --altcha-color-border: var(--line-strong); --altcha-color-border-focus: var(--accent-text); --altcha-color-text: var(--text);
  --altcha-color-error-text: #ff9d8f;
}
.ce_form .widget-submit { margin: clamp(20px,2.2vw,28px) 0 0; }
.ce_form button.submit {
  display: inline-block; padding: 14px 28px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink); transition: filter .2s ease;
}
.ce_form button.submit:hover { filter: brightness(1.08); }
.ce_form button.submit:disabled { opacity: .6; cursor: progress; }
.ce_form form[aria-busy="true"] { opacity: .7; }
@media (min-width: 620px) {
  .ce_form fieldset:has(> .widget-text + .widget-text) { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 16px; }
  .ce_form fieldset:has(> .widget-text + .widget-text) > legend { grid-column: 1 / -1; }
}

/* 13 Kontakt (WEB-U3): Artikel mit Klasse kontakt. Spalte 1 das Formular, Spalte 2 die Adresse (Text mit Klasse address) und darunter der Terminblock
   (Elementgruppe mit Klasse kontakt-termin: h2, Text, Hyperlink mit btn-primary). Rand wie Hero, Seitenkopf und Fuss, damit alles an einer Kante steht. */
.mod_article.kontakt {
  display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); column-gap: clamp(32px,5vw,80px); row-gap: clamp(16px,1.8vw,24px);
  grid-template-rows: auto 1fr; align-items: start;
  padding-top: clamp(40px,4.6vw,72px); padding-bottom: clamp(40px,4.6vw,72px);
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
}
.mod_article.kontakt > * { grid-column: 1; max-width: none; margin-left: 0; margin-right: 0; min-width: 0; }
.mod_article.kontakt > .ce_form { grid-column: 1; grid-row: 1 / span 2; }
.mod_article.kontakt > script { display: none; }
.mod_article.kontakt > .address, .mod_article.kontakt > .kontakt-termin {
  grid-column: 2; padding: clamp(22px,2.4vw,34px); border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.mod_article.kontakt > .address { grid-row: 1; font-size: 15px; line-height: 1.7; }
.mod_article.kontakt > .address p { margin: 0 0 6px; }
.mod_article.kontakt > .address p:last-child { margin-bottom: 0; }
.mod_article.kontakt > .address p:first-child { color: var(--text); font-weight: 600; }
.mod_article.kontakt > .kontakt-termin { grid-row: 2; }
.mod_article.kontakt > .kontakt-termin > * { margin: 0; }
.mod_article.kontakt > .kontakt-termin h2.content-headline { font-size: clamp(22px,1.9vw,28px); line-height: 1.15; letter-spacing: -.01em; margin-bottom: 10px; }
.mod_article.kontakt > .kontakt-termin .content-text { font-size: 15px; line-height: 1.6; }
.mod_article.kontakt > .kontakt-termin .content-hyperlink { margin-top: 20px; }
@media (max-width: 860px) {
  .mod_article.kontakt { grid-template-columns: minmax(0,1fr); grid-template-rows: none; }
  .mod_article.kontakt > .ce_form, .mod_article.kontakt > .address, .mod_article.kontakt > .kontakt-termin { grid-column: 1; grid-row: auto; }
  .mod_article.kontakt > .ce_form { order: 1; margin-bottom: clamp(14px,3vw,24px); }
  .mod_article.kontakt > .kontakt-termin { order: 2; }
  .mod_article.kontakt > .address { order: 3; }
  .mod_article.kontakt > .kontakt-termin .content-hyperlink a { display: block; text-align: center; }
  .ce_form button.submit { display: block; width: 100%; }
}

/* 14 Formular-Bestaetigung (WEB-U4): Nach dem Absenden ersetzt Contao das form-Element durch div.form-confirmation, der Text aus dem Feld Bestaetigungsmeldung steht darin
   (Template forms/form_message.html5, Contao 5.7). Flaeche wie Adresse und Terminblock, die erste Zeile des ersten Absatzes steht als Titel. */
.ce_form .form-confirmation {
  padding: clamp(22px,2.4vw,34px); border-radius: var(--r); background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); box-shadow: var(--shadow);
  color: var(--muted); font-size: var(--fs-body); line-height: 1.6;
}
.ce_form .form-confirmation p { margin: 0 0 .6em; }
.ce_form .form-confirmation p:last-child { margin-bottom: 0; }
.ce_form .form-confirmation p:first-child::first-line { color: var(--text); font-weight: 600; font-size: clamp(19px,1.6vw,23px); line-height: 1.7; }

/* 15 Preise (WEB-U7): Seite Preise. Artikel mit Klasse preise ist das Raster, jede Elementgruppe darin ist eine Paketkarte. Bauweise wie cards und ersparnis:
   der Artikel ist das Raster, Elementgruppen sind die Flaechen, keine Gruppe in einer Gruppe. Die Gruppe mit Klasse empfohlen ist immer dunkel.
   In jeder Karte: Text mit Klasse preis (erster Absatz: Betrag fett, dann zwei Zeilen), Liste = Leistungen mit Haken, Text mit Klasse card-footer = Einrichtung.
   Markup abgeleitet aus REPORT WEB-C13c C4 und der Startseite (Anlagen/WEB-H3-startseite-2026-10-02.html), die Seite Preise selbst ist noch nicht gemessen. */
.mod_article.preise {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px,2vw,28px); align-items: stretch;
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
}
.mod_article.preise > * { grid-column: 1 / -1; max-width: none; margin-left: 0; margin-right: 0; min-width: 0; }
.mod_article.preise > .kicker, .mod_article.preise > .kicker p { color: var(--accent-text); }
.mod_article.preise > .kicker { margin-bottom: -6px; }
.mod_article.preise > h2.content-headline { font-size: var(--fs-h2); letter-spacing: -.02em; max-width: 22ch; margin-bottom: clamp(10px,1.6vw,24px); }
.mod_article.preise > .content-element-group {
  grid-column: auto; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(26px,3vw,44px); border-radius: var(--r-lg); box-shadow: var(--shadow);
  background: var(--card); border: 1px solid var(--line);
}
.mod_article.preise .content-element-group > * { margin: 0; }
.mod_article.preise .content-element-group .kicker, .mod_article.preise .content-element-group .kicker p { margin: 0; font-size: 11px; letter-spacing: .2em; color: var(--accent-text); }
.mod_article.preise .content-element-group h3.content-headline { font-size: clamp(28px,2.6vw,38px); line-height: 1.05; letter-spacing: -.02em; margin-top: -6px; }
.mod_article.preise .content-element-group .content-text { font-size: 15px; line-height: 1.6; }
.mod_article.preise .content-element-group .content-text .rte > * { max-width: 46ch; }
/* Betrag: erster Absatz, fett gesetzter Teil gross. Zweiter und dritter Absatz klein. */
.mod_article.preise .preis { padding: 6px 0 20px; border-bottom: 1px solid var(--line); }
.mod_article.preise .preis p { margin: 0; font-size: 14px; line-height: 1.5; }
.mod_article.preise .preis p:first-child { font-size: 16px; color: var(--muted); margin-bottom: 10px; }
.mod_article.preise .preis p:first-child strong { display: inline-block; margin-right: 6px; font-weight: 600; font-size: clamp(52px,5.6vw,76px); line-height: 1; letter-spacing: -.035em; color: var(--text); vertical-align: -.06em; }
.mod_article.preise .preis p + p strong { color: var(--text); font-weight: 600; }
/* Leistungen: Liste mit Haken in Orange, eine Zeile je Punkt */
.mod_article.preise .content-list ul, .mod_article.preise .content-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mod_article.preise .content-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.45; color: var(--text); }
.mod_article.preise .content-list li::before {
  content: ""; position: absolute; left: 2px; top: .28em; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,153,0,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23ff9900' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
:root[data-theme="light"] .mod_article.preise .content-list li::before {
  background-color: rgba(166,82,0,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23a65200' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Einrichtung: Fusszeile der Karte, Betrag rechts */
.mod_article.preise .content-element-group .card-footer .rte > * { max-width: none; } /* schlaegt die 46ch der Texte in der Karte */
.mod_article.preise .card-footer { margin-top: auto !important; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.mod_article.preise .card-footer p { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; color: var(--muted); }
.mod_article.preise .card-footer strong { font-weight: 600; font-size: 19px; color: var(--text); white-space: nowrap; }
.mod_article.preise .content-element-group .content-hyperlink { margin-top: 4px; }
.mod_article.preise .content-element-group .content-hyperlink a { display: block; text-align: center; white-space: normal; }
/* Empfohlen: immer dunkel, Rahmen oben in Orange */
.mod_article.preise > .content-element-group.empfohlen {
  --accent-text: #ff9900; --text: #f6f8f8; --muted: #b0bec4; --line: rgba(246,248,248,.14); --line-strong: rgba(246,248,248,.3);
  color: #f6f8f8; border: 0; box-shadow: var(--shadow-lg), inset 0 3px 0 #ff9900;
  background: linear-gradient(155deg, #28424c 0%, #1e323a 45%, #0a1014 100%);
}
.mod_article.preise > .content-element-group.empfohlen .content-list li::before {
  background-color: rgba(255,153,0,.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23ff9900' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Fussnote unter den Karten: Text mit Klasse note, ueber beide Spalten */
.mod_article.preise > .note { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.mod_article.preise > .note .rte > * { max-width: 110ch; }
@media (max-width: 860px) { .mod_article.preise { grid-template-columns: minmax(0,1fr); } }

/* 16 Erstes Jahr (WEB-U7): Artikel mit Klasse jahr, Kicker, h2, Text und ein Inhaltselement Tabelle (Kopfzeile und erste Spalte als Kopf).
   Markup laut Contao-Template content_element/table.html.twig, Zweig 5.7: div.content-table > table > thead, tbody, th scope. Nicht auf staging gemessen.
   Reihenfolge der Zeilen ist fest: die vorletzte Zeile ist die Summe (fett, Linie darueber), die letzte die erste Zahlung (klein). Spalte 4 beginnt Team, Linie links.
   Auf schmalen Fenstern schiebt die Tabelle seitlich. */
.mod_article.jahr {
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
}
.mod_article.jahr > * { max-width: none; margin-left: 0; margin-right: 0; min-width: 0; }
.mod_article.jahr > .kicker, .mod_article.jahr > .kicker p { color: var(--accent-text); }
.mod_article.jahr > h2.content-headline { font-size: var(--fs-h2); letter-spacing: -.02em; max-width: 22ch; }
.mod_article.jahr > .content-text .rte > * { max-width: 62ch; }
.mod_article.jahr > .content-table { margin-top: clamp(26px,3vw,44px); overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.mod_article.jahr table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.mod_article.jahr th, .mod_article.jahr td { padding: 15px clamp(14px,1.6vw,24px); text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mod_article.jahr thead th { font-weight: 300; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; white-space: normal; }
.mod_article.jahr thead th:first-child, .mod_article.jahr tbody th { text-align: left; }
.mod_article.jahr tbody th { font-weight: 400; color: var(--muted); }
.mod_article.jahr tbody td { color: var(--text); }
.mod_article.jahr tbody tr:last-child th, .mod_article.jahr tbody tr:last-child td { border-bottom: 0; }
.mod_article.jahr tbody tr:nth-last-child(2) th, .mod_article.jahr tbody tr:nth-last-child(2) td { font-weight: 600; color: var(--text); border-top: 1px solid var(--line-strong); }
.mod_article.jahr tbody tr:nth-last-child(2) td { font-size: 17px; }
.mod_article.jahr tbody tr:last-child th, .mod_article.jahr tbody tr:last-child td { font-size: 13px; color: var(--muted); }
.mod_article.jahr thead th:nth-child(4), .mod_article.jahr tbody td:nth-child(4) { border-left: 1px solid var(--line); }
.mod_article.jahr thead th:first-child, .mod_article.jahr tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); }
@media (max-width: 600px) {
  .mod_article.jahr table { min-width: 500px; font-size: 14px; }
  .mod_article.jahr th, .mod_article.jahr td { padding: 13px 10px; }
  .mod_article.jahr thead th { letter-spacing: .08em; }
  .mod_article.jahr tbody th { white-space: normal; min-width: 118px; }
}
.mod_article.jahr > .note { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* 17 Termin im hellen Modus (WEB-U7): Der Artikel termin ist immer dunkel, Orange als Schrift bleibt dort #ff9900 wie bei haltung (WEB-U6). Fassung 12 setzte im hellen Modus #a65200 auf dunklen Grund. */
.mod_article.termin { --accent-text: #ff9900; }

/* 18 Hero ohne Slider und Rechner als eigener Abschnitt (WEB-U9, Werner 12.10.2026: zwei Abschnitte statt Slider).
   Hero: Die Elementgruppe der frueheren Folie 1 liegt direkt im Artikel hero. Sie bekommt dasselbe Raster wie in der Folie (Abschnitt 5 und 9),
   Spalte 1 bis 3 Text, Spalte 4 das Video. Der Artikel zeichnet dann keine eigene Bildflaeche (::after). Ohne Gruppe gelten die Regeln aus Abschnitt 5 unveraendert.
   Rechner: Artikel mit Klasse rechner und ID rechner, darin das Element Unfiltered HTML mit .calc. Himmel und Berge wie der Seitenkopf, folgt dem Modus.
   Markup abgeleitet aus Werners HTML-Auszug der Startseite vom 12.10. (Gruppe, Kinder, Video) und dem Element WEB-U8-rechner-element-v2.html. Nach dem Umbau nicht gemessen. */
.mod_article.hero:has(> .content-element-group) { display: flex; flex-direction: column; justify-content: center; }
.mod_article.hero:has(> .content-element-group)::after { content: none; }
.mod_article.hero > .content-element-group {
  width: 100%; max-width: none; margin: 0; position: relative; z-index: 1;
  display: grid; grid-template-columns: auto auto minmax(0,1fr) minmax(0,460px); column-gap: 12px; align-content: center;
}
.mod_article.hero > .content-element-group > * { grid-column: 1 / 4; max-width: none; margin-left: 0; margin-right: 0; position: relative; z-index: 1; min-width: 0; }
.mod_article.hero > .content-element-group > .kicker { margin-bottom: 22px; }
.mod_article.hero > .content-element-group > h1.content-headline { font-size: clamp(38px,6.2vw,86px); line-height: 1.02; max-width: none; margin-bottom: 26px; }
.mod_article.hero > .content-element-group > .content-text { color: var(--hero-muted); }
.mod_article.hero > .content-element-group > .lead .rte > * { max-width: 52ch; }
.mod_article.hero > .content-element-group > .content-hyperlink { grid-column: auto; margin-top: 36px; }
.mod_article.hero > .content-element-group > .content-list { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(var(--hero-ink),.14); }
.mod_article.hero > .content-element-group > .content-list ul, .mod_article.hero > .content-element-group > .content-list ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-weight: 300; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hero-muted); line-height: 1.5;
}
.mod_article.hero > .content-element-group > .hero-media.content-player {
  grid-column: 4; grid-row: 2 / span 4; align-self: stretch; justify-self: end;
  width: calc(100% - 40px); margin-left: clamp(20px,4vw,56px); margin-right: 40px; aspect-ratio: auto; position: relative; min-height: 0; overflow: hidden;
  border: 1px solid rgba(var(--hero-ink),.16); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); isolation: isolate;
}
.mod_article.hero > .content-element-group > .hero-media.content-player figure { position: absolute; inset: 0; margin: 0; }
.mod_article.hero > .content-element-group > .hero-media.content-player video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
@media (max-width: 900px) {
  .mod_article.hero > .content-element-group { grid-template-columns: auto auto minmax(0,1fr); }
  .mod_article.hero > .content-element-group > .hero-media.content-player { grid-column: 1 / -1; grid-row: auto; margin: 32px 0 0; width: 100%; aspect-ratio: 4 / 5; }
}
@media (max-width: 480px) {
  .mod_article.hero > .content-element-group > .content-hyperlink { grid-column: 1 / 4; margin-top: 12px; }
  .mod_article.hero > .content-element-group > .content-text + .content-hyperlink { margin-top: 30px; }
  .mod_article.hero > .content-element-group > .content-hyperlink a { display: block; text-align: center; }
}
.mod_article.rechner {
  position: relative; overflow: hidden; border: 0; color: var(--hero-text);
  scroll-margin-top: calc(var(--header-h) + 16px);
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px - var(--pad)));
  background:
    var(--hero-berge) center bottom / 100% min(26.35vw, 40%) no-repeat,
    linear-gradient(180deg, var(--hero-sky-top) 0%, var(--hero-sky-bottom) 100%);
}
.mod_article.rechner > * { position: relative; z-index: 1; max-width: none; margin-left: 0; margin-right: 0; }
.mod_article.rechner .calc-foot { color: var(--hero-muted); }

/* 12 FAQ (WEB-U18): Artikel mit Klasse faq, je Gruppe einer. Frage als h2, Antwort als Text darunter, alles offen. Fragen getrennt durch eine Linie, davor eine Nummer per CSS-Zaehler (nicht im HTML, die Nummern zaehlen ueber die ganze Seite). Ab 1000 px zwei Spalten: links der Kicker als Gruppenname, laeuft beim Scrollen mit, rechts Fragen und Antworten. Sprungleiste: Text mit Klasse faq-nav im Seitenkopf, Liste als Pillen. */
body { counter-reset: faq; }
.mod_article.faq { display: grid; grid-template-columns: minmax(0,1fr); scroll-margin-top: calc(var(--header-h) + 16px); }
.mod_article.faq > * { max-width: none; margin-left: 0; margin-right: 0; min-width: 0; }
.mod_article.faq > .kicker { margin-bottom: clamp(18px,2vw,28px); }
.mod_article.faq > h2.content-headline {
  counter-increment: faq; margin: 0; max-width: 44rem;
  padding-top: clamp(24px,2.4vw,34px); border-top: 1px solid var(--line);
  font-size: clamp(20px,1.7vw,26px); line-height: 1.25; letter-spacing: -.01em;
}
.mod_article.faq > .kicker + h2.content-headline { padding-top: 0; border-top: 0; }
.mod_article.faq > h2.content-headline::before {
  content: counter(faq, decimal-leading-zero); display: block; margin-bottom: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--accent-text);
}
.mod_article.faq > h2.content-headline + .content-text { margin: 12px 0 clamp(24px,2.4vw,34px); }
.mod_article.faq > .content-text:last-child { margin-bottom: 0; }
.mod_article.faq > .content-text { max-width: 44rem; }
.mod_article.faq .content-text .rte > * { max-width: none; }
.mod_article.faq .content-text p { margin: 0; }
@media (min-width: 1000px) {
  .mod_article.faq { grid-template-columns: minmax(170px,1fr) minmax(0,2.8fr); column-gap: clamp(40px,5vw,96px); }
  .mod_article.faq > * { grid-column: 2; }
  .mod_article.faq > .kicker { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: calc(var(--header-h) + 28px); margin: 0; }
  .mod_article.faq > .kicker p { margin: 0; font-size: 13px; font-weight: 500; }
}
.mod_article.page-head .faq-nav { margin-top: clamp(26px,3vw,40px); }
.mod_article.page-head .faq-nav .rte > * { max-width: none; }
.mod_article.page-head .faq-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mod_article.page-head .faq-nav a {
  display: inline-block; padding: 9px 18px; border-radius: 999px; font-size: 15px; line-height: 1.3;
  color: var(--hero-text); text-decoration: none; background: var(--hero-card);
  border: 1px solid rgba(var(--hero-ink),.26); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mod_article.page-head .faq-nav a:hover { color: var(--accent-text); border-color: var(--accent-text); }

/* 13 FAQ-Navigation in den Gruppen (WEB-U19): Text mit Klasse faq-nav als zweites Element jedes Artikels faq, direkt nach dem Kicker (Kopie des Elements aus dem Seitenkopf). Die aktive Gruppe ist orange, je Gruppe eine Regel ueber die CSS-ID (neue Gruppe = neue Zeile). Bis 999 px eine Leiste unter dem Menue, die beim Scrollen oben stehen bleibt und seitlich wischt; die Reihenfolge bleibt fest, getvia.js (Fassung 8) schiebt die Leiste auf die aktive Gruppe und blendet die Raender aus, an denen noch Punkte folgen (ohne Script blendet der rechte Rand aus). Ist der Kopf ausgeblendet (is-hidden), rueckt die Leiste an den oberen Rand (WEB-U20, Werner 14.10.2026: Spalt unter dem Menue, Reihenfolge fest). Ab 1000 px links eine Liste, die mitlaeuft; der Kicker tritt dort zurueck, die aktive Zeile traegt den Gruppennamen. */
.mod_article.faq > .faq-nav ul { list-style: none; margin: 0; padding: 0; }
.mod_article.faq > .faq-nav a { color: var(--muted); text-decoration: none; }
.mod_article.faq > .faq-nav a:hover { color: var(--accent-text); }
#grundlagen > .faq-nav a[href$="#grundlagen"], #kosten > .faq-nav a[href$="#kosten"], #arbeitsweise > .faq-nav a[href$="#arbeitsweise"], #anwendungen > .faq-nav a[href$="#anwendungen"] { color: var(--accent-text); font-weight: 600; }
@media (max-width: 999px) {
  .mod_article.faq > .faq-nav {
    position: sticky; top: var(--header-h); z-index: 5; transition: top .4s cubic-bezier(.4,0,.2,1);
    margin: 0 calc(-1 * var(--inner)) clamp(18px,4vw,28px); padding: 10px var(--inner);
    background: var(--panel); border-bottom: 1px solid var(--line);
  }
  html:has(#header.is-hidden) .mod_article.faq > .faq-nav { top: 0; }
  .mod_article.faq > .faq-nav ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mod_article.faq > .faq-nav ul::-webkit-scrollbar { display: none; }
  .mod_article.faq > .faq-nav li { flex: none; }
  .mod_article.faq > .faq-nav ul { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .mod_article.faq > .faq-nav ul.leiste { -webkit-mask: none; mask: none; }
  .mod_article.faq > .faq-nav ul.leiste.ist-rechts { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .mod_article.faq > .faq-nav ul.leiste.ist-links { -webkit-mask: linear-gradient(90deg, transparent, #000 40px); mask: linear-gradient(90deg, transparent, #000 40px); }
  .mod_article.faq > .faq-nav ul.leiste.ist-links.ist-rechts { -webkit-mask: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .mod_article.faq > .faq-nav a { display: block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; line-height: 1.3; white-space: nowrap; }
  #grundlagen > .faq-nav a[href$="#grundlagen"], #kosten > .faq-nav a[href$="#kosten"], #arbeitsweise > .faq-nav a[href$="#arbeitsweise"], #anwendungen > .faq-nav a[href$="#anwendungen"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
}
@media (min-width: 1000px) {
  .mod_article.faq:has(> .faq-nav) > .kicker { display: none; }
  .mod_article.faq > .faq-nav { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: calc(var(--header-h) + 28px); margin: 0; }
  .mod_article.faq > .faq-nav li + li { margin-top: 12px; }
  .mod_article.faq > .faq-nav a { display: inline-block; font-size: 15px; line-height: 1.35; padding-left: 14px; border-left: 2px solid transparent; }
  #grundlagen > .faq-nav a[href$="#grundlagen"], #kosten > .faq-nav a[href$="#kosten"], #arbeitsweise > .faq-nav a[href$="#arbeitsweise"], #anwendungen > .faq-nav a[href$="#anwendungen"] { border-left-color: var(--accent); }
}

/* 14 Live erleben, Telefon (WEB-U21): Hyperlink mit Klasse card-call direkt nach dem WhatsApp-Knopf jeder Karte, gleiche Form, Flaeche --accent, Schrift --accent-ink. Zeichen bxs-phone aus Boxicons 2.1.4, MIT-Lizenz, als Maske in Schriftfarbe. Text mit Klasse live-hinweis als letztes Element im Artikel cards live, ueber alle Spalten. */
.cards .content-element-group .card-call { margin-top: -4px; }
.cards .content-element-group .card-call a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: filter .2s ease, transform .2s ease; }
.cards .content-element-group .card-call a::after { content: none; }
.cards .content-element-group .card-call a::before { content: ""; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m20.487 17.14-4.065-3.696a1.001 1.001 0 0 0-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.66-2.926l2.459-2.394a1 1 0 0 0 .043-1.391L6.859 3.513a1 1 0 0 0-1.391-.087l-2.17 1.861a1 1 0 0 0-.29.649c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008a.992.992 0 0 0 .648-.291l1.86-2.171a.997.997 0 0 0-.085-1.39z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m20.487 17.14-4.065-3.696a1.001 1.001 0 0 0-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.66-2.926l2.459-2.394a1 1 0 0 0 .043-1.391L6.859 3.513a1 1 0 0 0-1.391-.087l-2.17 1.861a1 1 0 0 0-.29.649c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008a.992.992 0 0 0 .648-.291l1.86-2.171a.997.997 0 0 0-.085-1.39z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cards .content-element-group .card-call a:hover { color: var(--accent-ink); filter: brightness(1.08); transform: translateY(-1px); }
.cards .content-element-group .card-call a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mod_article.cards.live > .live-hinweis { margin-top: clamp(10px,1.6vw,22px); font-size: 14px; line-height: 1.65; color: var(--muted); }
.mod_article.cards.live > .live-hinweis .rte > * { max-width: 72ch; }
.mod_article.cards.live > .live-hinweis p { margin: 0; }
.mod_article.cards.live > .live-hinweis p + p { margin-top: 8px; }
.mod_article.cards.live > .live-hinweis strong { color: var(--text); font-weight: 600; }
.mod_article.cards.live > .live-hinweis a { color: var(--text); }
/* 19 Ruhige Fassung (WEB-U22, Werner 18.10.2026: sieht nach KI-Design aus, css go). Ein Abschnitt am Ende, ueberschreibt die Abschnitte 1 bis 18, die Zeilen darueber bleiben byte-gleich.
   a Ueberschriften in Abhaya Libre 500/600 (SIL OFL 1.1, Fontsource 5.3.0), wie die Design-Guardrails vom 27.04.2026. Fliesstext bleibt Montserrat.
   b Kicker und kleine Beschriftungen in normaler Schreibweise, ohne Sperrung, ohne Grossbuchstaben.
   c Abschnitte ohne Rahmen, ohne Rundung, ohne eigene Flaeche, ohne Einblenden. Haltung, Termin und Rechner bleiben farbige Baender ueber die ganze Breite, ohne Verlauf.
   d Karten: keine Box, kein Schatten, kein Verlauf. Eine Linie oben traegt die Karte, bei akzent und empfohlen in Orange.
   e Schlagworte statt Pillen als Textzeile mit Punkt dazwischen. Knoepfe mit 6 px Rundung statt Pille.
   f Ziffern im Ablauf klein und fett. Vertrauenszeile im Hero klein, normale Schreibweise.
   g Gezeichnete Bildflaechen (Hero ohne Video, Haltung ohne Bild) entfallen. Haltung zweispaltig: links Kicker und h2, rechts die Punkte.
   h Gruener WhatsApp-Knopf nur noch auf Live erleben (cards live). Fassung 18 bis 22 faerbte auch die Kartenlinks der Startseite (card-link) gruen.
   i Karte mit Bild (Ueber uns, Werner): ab 900 px Foto links, Text rechts (Checkliste B6). */
@font-face { font-family: "Abhaya Libre"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/abhaya-libre-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Abhaya Libre"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/abhaya-libre-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Abhaya Libre"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/abhaya-libre-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Abhaya Libre"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/abhaya-libre-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --serif: "Abhaya Libre", Georgia, "Times New Roman", serif;
  --r: 6px; --r-lg: 0; --r-btn: 6px;
  --shadow: none; --shadow-lg: none;
  --band: #141e26;
}
:root[data-theme="light"] { --shadow: none; }

/* a Schrift */
h1, h2, h3, .calc h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; line-height: 1.08; }
h4 { letter-spacing: 0; }
h1 { font-size: clamp(36px,5vw,66px); }
h2 { font-size: clamp(30px,4vw,54px); }
h3 { font-size: clamp(22px,2.1vw,28px); line-height: 1.15; }
.mod_article.hero h1.content-headline, .mod_article.hero > .content-element-group > h1.content-headline { font-size: clamp(42px,6.4vw,92px); line-height: 1; letter-spacing: -.01em; }
.mod_article.page-head h1.content-headline { font-size: clamp(34px,6.4vw,66px); line-height: 1.02; }
.mod_article.cards > h2.content-headline, .mod_article.ablauf > h2.content-headline, .mod_article.ersparnis > h2.content-headline,
.mod_article.haltung > h2.content-headline, .mod_article.termin > h2.content-headline, .mod_article.preise > h2.content-headline,
.mod_article.jahr > h2.content-headline { letter-spacing: -.005em; }
.cards .content-element-group h2.content-headline, .cards .content-element-group h3.content-headline { font-size: clamp(24px,2.1vw,30px); line-height: 1.1; letter-spacing: 0; }
.mod_article.ablauf .content-element-group .content-headline { font-size: clamp(22px,2vw,28px); letter-spacing: 0; }
.mod_article.faq > h2.content-headline { font-size: clamp(22px,2vw,28px); letter-spacing: 0; }
.mod_article.preise .content-element-group h3.content-headline { font-size: clamp(30px,2.8vw,40px); letter-spacing: 0; }
.mod_article.preise .preis p:first-child strong, .mod_article.ersparnis > .content-element-group ~ .content-element-group .sum strong { font-family: var(--serif); letter-spacing: -.01em; }

/* b Kicker und Beschriftungen */
.kicker, .kicker p, .calc-kicker, .calc-label, .ce_form legend, .mod_article.ersparnis .content-element-group .sum p:first-child, .mod_article.jahr thead th { text-transform: none; letter-spacing: 0; }
.kicker, .kicker p, .calc-kicker { font-size: 15px; font-weight: 500; }
.cards .content-element-group .kicker, .cards .content-element-group .kicker p,
.mod_article.ersparnis .content-element-group .kicker, .mod_article.ersparnis .content-element-group .kicker p,
.mod_article.preise .content-element-group .kicker, .mod_article.preise .content-element-group .kicker p { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.calc-label, .mod_article.ersparnis .content-element-group .sum p:first-child { font-size: 13px; font-weight: 500; }
.ce_form legend { font-size: 14px; font-weight: 600; color: var(--text); }
.mod_article.jahr thead th { font-size: 13px; font-weight: 500; }
.mod_article.faq > h2.content-headline::before { letter-spacing: 0; font-size: 13px; font-weight: 600; }

/* c Abschnitte */
.mod_article {
  margin: 0; border: 0; border-radius: 0; background: transparent; animation: none;
  border-top: 1px solid var(--line);
}
#main > .inside > .mod_article:first-child, .mod_article.hero, .mod_article.page-head, .mod_article.rechner,
.mod_article.haltung, .mod_article.termin, .mod_article.haltung + .mod_article, .mod_article.termin + .mod_article,
.mod_article.rechner + .mod_article, .mod_article.hero + .mod_article, .mod_article.page-head + .mod_article { border-top: 0; }
.mod_article.page-head { padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px)); padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px)); }
.mod_article.hero, .mod_article.cards, .mod_article.haltung, .mod_article.ablauf, .mod_article.ersparnis, .mod_article.termin,
.mod_article.preise, .mod_article.jahr, .mod_article.kontakt, .mod_article.rechner {
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px));
}
.mod_article.haltung { background: var(--band); }
.mod_article.termin { background: #0e171d; border-top: 3px solid var(--accent); }
.rise { animation: none; }
#main .entity { margin: 0; padding: clamp(22px,2.6vw,34px) max(var(--inner), calc((100% - var(--max)) / 2 + 72px)); border-top: 1px solid var(--line); }
#footer > .inside { margin: 0; border: 0; border-radius: 0; background: transparent; border-top: 1px solid var(--line); padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px)); padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px)); }

/* d Karten */
.mod_article.cards > .content-element-group, .mod_article.preise > .content-element-group, .mod_article.ersparnis > .content-element-group,
.mod_article.kontakt > .address, .mod_article.kontakt > .kontakt-termin {
  background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; box-shadow: none;
  padding: clamp(18px,1.8vw,24px) 0 0;
}
.mod_article.cards > .content-element-group:hover { border-color: var(--line-strong); }
.mod_article.cards { column-gap: clamp(24px,3vw,48px); }
.mod_article.cards > .content-element-group { margin-top: clamp(8px,1.2vw,18px); }
.mod_article.cards > .content-element-group.akzent, .mod_article.preise > .content-element-group.empfohlen {
  --accent-text: inherit; --text: inherit; --muted: inherit; --line: inherit; --line-strong: inherit;
  color: inherit; background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--line-strong);
}
.mod_article.preise > .content-element-group.empfohlen { border-top: 3px solid var(--accent); }
.mod_article.preise > .content-element-group.empfohlen { background: var(--card); padding: clamp(22px,2.4vw,32px); border-top-width: 3px; }
.mod_article.ersparnis > .content-element-group ~ .content-element-group { background: var(--band); color: #f6f8f8; padding: clamp(22px,2.4vw,32px); border-top: 0; }
.mod_article.termin > .address { background: transparent; border: 0; border-left: 1px solid rgba(246,248,248,.2); border-radius: 0; box-shadow: none; padding: 4px 0 4px clamp(20px,2.4vw,34px); }
.mod_article.jahr > .content-table { border-radius: 0; border: 0; border-top: 1px solid var(--line-strong); background: transparent; }
.mod_article.jahr thead th:first-child, .mod_article.jahr tbody th { background: var(--bg); }
.calc-card { border-radius: var(--r); }
.calc-plan { border-radius: var(--r); }
.main-nav .level_2 { border-radius: var(--r); }
.ce_form input.text, .ce_form textarea.textarea, .ce_form .form-confirmation { border-radius: var(--r); box-shadow: none; }

/* e Schlagworte und Knoepfe */
.cards .content-element-group .content-list ul, .cards .content-element-group .content-list ol { display: block; }
.cards .content-element-group .content-list li { display: inline; padding: 0; border: 0; border-radius: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.cards .content-element-group .content-list li::after { content: " "; }
.cards .content-element-group .content-list li + li::before { content: "\00b7\00a0\00a0"; margin-left: .25em; color: var(--accent-text); }
.btn-primary a, .btn-secondary a, a.btn-primary, a.btn-secondary, .calc-cta a, .ce_form button.submit,
.cards .content-element-group .card-link a, .cards .content-element-group .card-call a, a.invisible:focus-visible { border-radius: var(--r-btn); }
.mod_article.page-head .faq-nav a { border-radius: var(--r-btn); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 999px) { .mod_article.faq > .faq-nav a { border-radius: var(--r-btn); } }
.mod_article.hero .swiper.has-tabs .swiper-pagination-bullet { border-radius: var(--r-btn); }

/* f Ziffern und Vertrauenszeile */
.mod_article.ablauf > .content-element-group::before { font-family: "Montserrat", system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.9; letter-spacing: 0; }
.mod_article.ablauf > .content-element-group { grid-template-columns: minmax(36px,auto) minmax(0,1fr) minmax(0,1.4fr); }
@media (max-width: 760px) { .mod_article.ablauf > .content-element-group { grid-template-columns: minmax(32px,auto) minmax(0,1fr); } }
.hero-facts ul, .hero-facts ol,
.mod_article.hero > .content-element-group > .content-list ul, .mod_article.hero > .content-element-group > .content-list ol,
.mod_article.hero .swiper-slide > .content-element-group > .content-list ul, .mod_article.hero .swiper-slide > .content-element-group > .content-list ol { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; gap: 6px 22px; }

/* g Gezeichnete Bildflaechen */
.mod_article.hero::after, .mod_article.hero .swiper-slide > .content-element-group::after { content: none; }
.mod_article.hero:not(:has(.hero-media)) { grid-template-columns: auto auto minmax(0,1fr); }
.mod_article.hero > .content-element-group:not(:has(> .hero-media)) { grid-template-columns: auto auto minmax(0,1fr); }
.mod_article.hero > .content-element-group > .hero-media.content-player, .mod_article.hero .swiper-slide > .content-element-group > .hero-media.content-player,
.mod_article.hero::after, .mod_article.hero > .hero-media { border-radius: var(--r); border: 0; box-shadow: none; }
.mod_article.haltung:not(:has(> .haltung-media))::before { content: none; }
@media (min-width: 901px) {
  .mod_article.haltung:not(:has(> .haltung-media)) { grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); align-content: start; }
  .mod_article.haltung:not(:has(> .haltung-media)) > .kicker { grid-column: 1 / -1; grid-row: 1; }
  .mod_article.haltung:not(:has(> .haltung-media)) > h2.content-headline { grid-column: 1; grid-row: 2 / span 6; align-self: start; margin: 0; padding-right: clamp(0px,2vw,24px); font-size: clamp(30px,3.4vw,46px); }
  .mod_article.haltung:not(:has(> .haltung-media)) > .content-element-group { grid-column: 2; }
}
.mod_article.haltung > .haltung-media { border-radius: var(--r); border: 0; box-shadow: none; }
.mod_article.haltung .content-element-group .content-headline { font-size: 18px; }

/* h Gruener Knopf nur auf Live erleben. Kartenlinks anderswo wieder als Textlink in Orange mit Pfeil (Regeln aus Abschnitt 5). */
.mod_article.cards:not(.live) .content-element-group .card-link a {
  display: inline; width: auto; padding: 0; border-radius: 0; background: none; color: var(--accent-text);
  font-size: 14px; white-space: normal; transform: none;
}
.mod_article.cards:not(.live) .content-element-group .card-link a::before { content: none; }
.mod_article.cards:not(.live) .content-element-group .card-link a::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .2s ease; }
.mod_article.cards:not(.live) .content-element-group .card-link a:hover { background: none; color: var(--accent-text); }
.mod_article.cards:not(.live) .content-element-group .card-link a:hover::after { transform: translateX(4px); }
.mod_article.cards:not(.live) .content-element-group .card-link a:focus-visible { outline-color: var(--accent-text); }

/* i Karte mit Bild: Artikel cards ohne Elementgruppe, mit Bild. Ab 900 px Foto links ueber alle Zeilen, Kicker, h2 und Text rechts. */
.mod_article.cards:has(> .content-image):not(:has(> .content-element-group)) .content-image img { display: block; width: 100%; max-width: 420px; height: auto; border-radius: var(--r); }
@media (min-width: 900px) {
  .mod_article.cards:has(> .content-image):not(:has(> .content-element-group)) { grid-template-columns: minmax(0,360px) minmax(0,1fr); column-gap: clamp(36px,5vw,80px); align-content: start; }
  .mod_article.cards:has(> .content-image):not(:has(> .content-element-group)) > * { grid-column: 2; }
  .mod_article.cards:has(> .content-image):not(:has(> .content-element-group)) > .content-image { grid-column: 1; grid-row: 1 / span 8; align-self: start; }
  .mod_article.cards:has(> .content-image):not(:has(> .content-element-group)) > .content-text .rte > * { max-width: 58ch; }
}
/* 20 Karten und Schluss (WEB-U23, Werner 18.10.2026 nach Sichtabnahme Fassung 23: die Cards sind verloren gegangen, die letzte Sektion Welcher Agent passt zu dir sieht verloren aus).
   a Karten wieder als Flaeche: Hintergrund --panel, Rand 1 px, Radius 8 px, kein Schatten, kein Verlauf, keine Linie in Orange. Gilt fuer cards, preise und die erste Gruppe in ersparnis.
     Karte akzent (Live erleben) gleich wie die anderen. Paket empfohlen behaelt die Linie in Orange oben.
   b Schlagworte: der Punkt steht am Ende der Zeile davor, nie am Zeilenanfang.
   c Termin ohne Adresse (Unterseiten): zweispaltig, links Kicker und h2, rechts Text und Knopf, oben buendig mit der h2. Mit Adresse (Startseite) bleibt es wie Fassung 23.
   d Seitenkopf mit Knoepfen (voiceVIA, messageVIA): Knoepfe nebeneinander mit Abstand statt aneinander geklebt (Checkliste B5).
   e Termin als eigene Flaeche: Kasten mit 8 px Radius, Linie in Orange oben, Abstand zum Rand wie der Inhalt. Gilt mit und ohne Adresse.
   f Ziffern im Ablauf auf Zeilenhoehe, Abhaya Libre, 75 % Deckkraft.
   g Nummern im FAQ im selben Stil. */
:root { --r-card: 8px; }

/* a Karten */
.mod_article.cards > .content-element-group, .mod_article.preise > .content-element-group, .mod_article.ersparnis > .content-element-group:not(.content-element-group ~ .content-element-group),
.mod_article.cards > .content-element-group.akzent {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none;
  padding: clamp(22px,2.2vw,32px);
}
.mod_article.ersparnis > .content-element-group ~ .content-element-group { border-radius: var(--r-card); }
.mod_article.cards > .content-element-group:hover { border-color: var(--line-strong); }
.mod_article.cards > .content-element-group { margin-top: 0; }
.mod_article.cards { row-gap: clamp(16px,1.8vw,24px); column-gap: clamp(16px,1.8vw,24px); }
.mod_article.cards > h2.content-headline { margin-bottom: clamp(14px,1.8vw,26px); }
.mod_article.preise > .content-element-group.empfohlen { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r-card); }
.mod_article.cards:has(> .content-image):not(:has(> .content-element-group)) .content-image img { border-radius: var(--r-card); }

/* b Schlagworte */
.cards .content-element-group .content-list li + li::before { content: none; }
.cards .content-element-group .content-list li::after { content: " "; }
.cards .content-element-group .content-list li:not(:last-child)::after { content: "\00a0\00b7  "; color: var(--accent-text); white-space: pre-wrap; }

/* c Termin ohne Adresse */
@media (min-width: 861px) {
  .mod_article.termin:not(:has(> .address)) { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); column-gap: clamp(40px,6vw,110px); align-items: start; }
  .mod_article.termin:not(:has(> .address)) > .kicker { grid-column: 1; grid-row: 1; }
  .mod_article.termin:not(:has(> .address)) > h2.content-headline { grid-column: 1; grid-row: 2 / span 2; align-self: start; margin-bottom: 0; }
  .mod_article.termin:not(:has(> .address)) > .content-text:not(.kicker) { grid-column: 2; grid-row: 2; align-self: start; padding-top: .5em; }
  .mod_article.termin:not(:has(> .address)) > .content-hyperlink { grid-column: 2; grid-row: 3; align-self: start; margin: clamp(18px,2vw,26px) 0 0; }
}
.mod_article.termin {
  margin: clamp(28px,4vw,64px) max(var(--pad), calc((100% - var(--max)) / 2 + 40px));
  padding: clamp(36px,4.4vw,72px) clamp(24px,4.4vw,72px);
  border: 1px solid rgba(246,248,248,.12); border-top: 3px solid var(--accent); border-radius: var(--r-card);
  background: #111b22;
}
#main .mod_article.termin { border-top: 3px solid var(--accent); } /* schlaegt .mod_article.rechner + .mod_article aus Abschnitt 19 */
.mod_article.termin + .mod_article, #main > .inside > .mod_article.termin + .entity { border-top: 0; }

/* d Seitenkopf mit Knoepfen */
.mod_article.page-head:has(> .content-hyperlink) { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: center; column-gap: 12px; }
.mod_article.page-head:has(> .content-hyperlink) > * { flex: 0 0 100%; }
.mod_article.page-head:has(> .content-hyperlink) > .content-hyperlink { flex: 0 0 auto; width: auto; margin-top: clamp(24px,2.6vw,34px); }
@media (max-width: 480px) {
  .mod_article.page-head:has(> .content-hyperlink) > .content-hyperlink { flex: 0 0 100%; margin-top: 12px; }
  .mod_article.page-head:has(> .content-hyperlink) > .lead + .content-hyperlink { margin-top: 28px; }
  .mod_article.page-head:has(> .content-hyperlink) > .content-hyperlink a { display: block; text-align: center; }
}

/* f Ziffern im Ablauf auf Zeilenhoehe (Werner 18.10.: Version 2, naeher zusammen, 75 % Deckkraft): Abhaya Libre 600, die Ziffer reicht von der Linie oben bis zur Linie unten, 3 und 4 haengen mit ihrer Unterlaenge darunter.
   Hoehe ueber --zh, Schriftgroesse = --zh / Ziffernhoehe (0.531 em), Verschiebung um Zeilenoberkante bis Ziffernoberkante (0.2187 em), in Chromium nachgemessen. Gilt fuer jeden Artikel ablauf (Startseite, voiceVIA, Preise, Ueber uns). */
.mod_article.ablauf { --zh: clamp(84px,7.6vw,112px); }
.mod_article.ablauf > .content-element-group { padding: 0; min-height: var(--zh); align-items: center; column-gap: clamp(22px,3vw,52px); grid-template-columns: calc(var(--zh) * 1.72) minmax(0,1fr) minmax(0,1.4fr); }
.mod_article.ablauf > .content-element-group > * { padding: clamp(16px,1.6vw,22px) 0; }
.mod_article.ablauf > .content-element-group::before {
  align-self: start; display: block; height: var(--zh); overflow: visible;
  font-family: var(--serif); font-weight: 600; font-size: calc(var(--zh) / 0.531); line-height: 1; letter-spacing: -.07em; opacity: .75;
  font-variant-numeric: proportional-nums; transform: translateY(-0.2187em);
}
@media (max-width: 760px) {
  .mod_article.ablauf { --zh: 64px; }
  .mod_article.ablauf > .content-element-group { grid-template-columns: calc(var(--zh) * 1.72) minmax(0,1fr); row-gap: 0; }
  .mod_article.ablauf > .content-element-group > * { padding: 0; }
  .mod_article.ablauf > .content-element-group > .content-headline { padding-top: 14px; }
  .mod_article.ablauf > .content-element-group > .content-text { padding-bottom: 16px; }
}

/* g Nummern im FAQ wie im Ablauf: Abhaya Libre 600, eng, 75 % Deckkraft, ueber der Frage. */
.mod_article.faq > h2.content-headline::before {
  font-family: var(--serif); font-weight: 600; font-size: clamp(34px,3vw,44px); line-height: .9; letter-spacing: -.07em;
  font-variant-numeric: proportional-nums; opacity: .75; margin-bottom: 8px;
}
/* 21 Ziffern am Handy von Linie zu Linie (WEB-U24, Werner 18.10.2026 zum iPhone-Bild von Fassung 24: nix von linie zu linie).
/* 21 Ziffern von Linie zu Linie, auch am Handy (WEB-U24, Werner 18.10.2026 zum iPhone-Bild von Fassung 24: nix von linie zu linie).
   Bis 760 px steht die Ziffer in einer eigenen Zeile ueber Ueberschrift und Text, mit Linie darunter. So reicht sie von der Linie oben bis zur Linie unten, egal wie lang der Text umbricht.
   Lage ueber die Zeilenhoehe statt Verschiebung, damit die Linie unten mit der Grundlinie der Ziffer zusammenfaellt: line-height 0.564 em (in Chromium nachgemessen, Grundlinie bei 0.531 em), gilt fuer alle Breiten. */
.mod_article.ablauf > .content-element-group::before { line-height: .564em; transform: none; }
@media (max-width: 760px) {
  .mod_article.ablauf { --zh: 76px; }
  .mod_article.ablauf > .content-element-group { grid-template-columns: minmax(0,1fr); row-gap: 0; padding-bottom: 18px; }
  .mod_article.ablauf > .content-element-group::before {
    grid-column: 1; grid-row: 1; height: var(--zh);
    border-bottom: 1px solid var(--line); margin-bottom: 14px;
  }
  .mod_article.ablauf > .content-element-group > * { grid-column: 1; padding: 0; }
  .mod_article.ablauf > .content-element-group > .content-headline { padding-top: 0; margin-bottom: 6px; }
  .mod_article.ablauf > .content-element-group > .content-text { padding-bottom: 0; }
}

/* 22 Ziffern als Wasserzeichen (WEB-U25, Werner 18.10.2026 nach Sichtabnahme Fassung 25: die Zahlen brauchen kaum Deckkraft, 15 % oder 10 %).
   a Ziffern im Ablauf und Nummern im FAQ auf 15 % Deckkraft.
   b iPhone: die Linie unter der Ziffer sitzt jetzt als Linie oben an der Ueberschrift. Am ::before wuerde sie mit der Ziffer auf 15 % verblassen. */
.mod_article.ablauf > .content-element-group::before, .mod_article.faq > h2.content-headline::before { opacity: .15; }
@media (max-width: 760px) {
  .mod_article.ablauf > .content-element-group::before { border-bottom: 0; margin-bottom: 0; }
  .mod_article.ablauf > .content-element-group > .content-headline { border-top: 1px solid var(--line); padding-top: 14px; }
}

/* 23 Ziffern kleiner, mit Abstand zur Linie (WEB-U26, Werner 18.10.2026 nach Sichtabnahme Fassung 26: doch kleiner und abstand zur linie in beiden Versionen).
   a Rechner: Schriftgroesse 90 % von --zh, die Ziffer steht mittig in ihrer Zeile. Unten .07 em Zugabe fuer die Unterlaenge von 3 und 4, damit auch sie in der Zeile bleiben.
   b bis 760 px: Schrift 80 px, 18 px Luft zur Linie oben, 14 px plus Unterlaenge zur Linie an der Ueberschrift.
   In Chromium nachgemessen: Rechner 1440 px Luft 23 bis 33 px, 390 px Luft 16 bis 22 px, keine Ziffer beruehrt eine Linie. Deckkraft, Spaltenbreite und FAQ-Nummern bleiben. */
.mod_article.ablauf > .content-element-group::before { align-self: center; height: auto; font-size: calc(var(--zh) * .9); line-height: .564em; padding: 0 0 .07em; }
@media (max-width: 760px) {
  .mod_article.ablauf > .content-element-group::before { align-self: start; height: auto; font-size: 80px; padding: 18px 0 calc(.07em + 14px); }
}

/* 24 Blog (WEB-U27, Werner 19.10.2026 nach dem ersten Artikel auf staging: in der dunklen Version Schrift weiss, Ueberschriften kleiner, bessere Gliederung fuers Auge; alle Vorschlaege go).
   Markup aus Contao 5 news-bundle, gespeichert 19.10.: Liste .mod_newslist > .layout_short (p.info, h2 > a, .content-text, p.more), Leser .mod_newsreader > .layout_full (h1, p.info, .content-text > .rte, danach p.back).
   a Ausrichtung wie die anderen Unterseiten, Leser in einer Lesespalte von 720 px, Titel buendig mit dem Text.
   b Leser: Datum und Autor klein ueber dem Titel, h1 32 bis 44 px, Text in --text (dunkel fast weiss), 17 px, Zeilenhoehe 1,75.
   c Leser: h2 26 px mit feiner Linie darueber, h3 Montserrat 18 px fett in Orange, Zitate mit Linie in Orange und leichter Flaeche, Quellenliste klein und gedaempft.
   d Liste: Karten wie die Startseite (Flaeche --panel, Rand 1 px, Radius 8 px), ganze Karte klickbar, Weiterlesen in Orange.
   e Steht Liste und Leser auf derselben Seite, verschwindet die Liste, solange ein Artikel offen ist. */

/* a Ausrichtung */
.mod_article:has(> .mod_newslist), .mod_article:has(> .mod_newsreader) {
  padding-left: max(var(--inner), calc((100% - var(--max)) / 2 + 72px));
  padding-right: max(var(--inner), calc((100% - var(--max)) / 2 + 72px));
  padding-top: clamp(40px,5vw,84px); padding-bottom: clamp(48px,6vw,96px);
}
.mod_article > .mod_newsreader, .mod_article > .mod_newslist { max-width: none; margin-left: 0; margin-right: 0; }
.mod_newsreader .layout_full, .mod_newsreader > .back { max-width: 720px; }

/* b Leser: Kopf und Text */
.mod_newsreader .layout_full { display: flex; flex-direction: column; }
.mod_newsreader .layout_full > .info { order: -1; margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.mod_newsreader .layout_full > h1 { font-size: clamp(32px,4vw,44px); line-height: 1.1; margin: 0 0 clamp(28px,3vw,40px); text-wrap: balance; }
.mod_newsreader .content-text { color: var(--text); font-size: 17px; line-height: 1.75; }
.mod_newsreader .content-text .rte > * { max-width: none; }
.mod_newsreader .content-text p { margin: 0 0 1.15em; }
.mod_newsreader .content-text strong { color: var(--text); font-weight: 600; }
.mod_newsreader .content-text ul, .mod_newsreader .content-text ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.mod_newsreader .content-text li { margin: 0 0 .4em; }
.mod_newsreader .content-text li::marker { color: var(--accent-text); }
.mod_newsreader .content-text hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.mod_newsreader .content-text code { font-size: .9em; padding: 1px 5px; border-radius: 4px; background: var(--field); border: 1px solid var(--line); }

/* c Leser: Gliederung */
.mod_newsreader .content-text h2 {
  font-size: 26px; line-height: 1.2; letter-spacing: 0; color: var(--text);
  margin: 56px 0 16px; padding-top: 28px; border-top: 1px solid var(--line);
}
.mod_newsreader .content-text .rte > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mod_newsreader .content-text h3 {
  font-family: "Montserrat", system-ui, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: 0;
  color: var(--accent-text); margin: 32px 0 10px;
}
.mod_newsreader .content-text h2 + h3 { margin-top: 20px; }
.mod_newsreader .content-text blockquote {
  margin: 28px 0; padding: 18px 22px; border-left: 3px solid var(--accent);
  background: rgba(255,153,0,.08); border-radius: 0 var(--r-card) var(--r-card) 0; color: var(--text);
}
.mod_newsreader .content-text blockquote p { margin: 0 0 .6em; }
.mod_newsreader .content-text blockquote p:last-child { margin-bottom: 0; }
.mod_newsreader .content-text h2 + ul { font-size: 14px; line-height: 1.6; color: var(--muted); }
.mod_newsreader .content-text table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; line-height: 1.5; }
.mod_newsreader .content-text th { text-align: left; font-weight: 600; color: var(--text); background: var(--card); padding: 10px 14px; border: 1px solid var(--line); }
.mod_newsreader .content-text td { padding: 9px 14px; border: 1px solid var(--line); }
.mod_newsreader > .back { margin: clamp(40px,4vw,56px) 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; }
.mod_newsreader > .back a { color: var(--accent-text); }
.mod_newsreader > .back a::before { content: "\2190"; display: inline-block; margin-right: 8px; transition: transform .2s ease; }
.mod_newsreader > .back a:hover::before { transform: translateX(-4px); }

/* d Liste als Karten */
.mod_newslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(16px,1.8vw,24px); }
.mod_newslist .layout_short {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(22px,2.2vw,32px); transition: border-color .2s ease;
}
.mod_newslist .layout_short:hover { border-color: var(--line-strong); }
.mod_newslist .layout_short > .info { order: -1; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.mod_newslist .layout_short > h2 { font-size: clamp(22px,1.9vw,26px); line-height: 1.2; letter-spacing: 0; margin: 0 0 12px; }
.mod_newslist .layout_short > h2 a { color: var(--text); }
.mod_newslist .layout_short > h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mod_newslist .layout_short:hover > h2 a { color: var(--accent-text); }
.mod_newslist .layout_short > .content-text { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.mod_newslist .layout_short > .more { margin: auto 0 0; font-size: 14px; font-weight: 600; }
.mod_newslist .layout_short > .more a { color: var(--accent-text); position: relative; z-index: 1; }

/* e Liste aus, solange ein Artikel offen ist */
.mod_article:has(> .mod_newsreader) > .mod_newslist { display: none; }

@media (max-width: 760px) {
  .mod_newsreader .content-text { font-size: 16px; line-height: 1.7; }
  .mod_newsreader .content-text h2 { font-size: 23px; margin-top: 44px; padding-top: 22px; }
  .mod_newsreader .content-text blockquote { padding: 14px 16px; }
  .mod_newsreader .content-text table { display: block; overflow-x: auto; }
}