/* =====================================================================
Design v2 – Inhalte der CMS-Seiten (body.v2-seite)
Gestaltet das unveränderte HTML der 24 CMS-Bausteine (com-*) nach EE/14_design/konzept.md Kap. 3–5:
ruhige Abschnitte (Weiß/Hellgrau), Lesespalte, Karten, Hinweis-Kästen, Linklisten, Downloads, FAQ, Tabellen.
Texte, Überschriften, Links und Sprungmarken bleiben unverändert (nur Darstellung).
Mobile-first: Grundregeln für das Handy, Erweiterungen nur mit min-width.
===================================================================== */
/* ---------- Grundlagen ---------- */
.v2-seite { overflow-x: hidden; }
.v2-seite img { max-width: 100%; height: auto; }
.v2-seite main { display: block; }
.v2-seite main a:not([class*="btn"]):not(.by-button):not(.by-button-secondary) { color: var(--c-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.v2-seite main a:not([class*="btn"]):hover { color: var(--c-link-hover); }
.v2-seite p, .v2-seite li { overflow-wrap: break-word; }
.v2-seite strong, .v2-seite b { font-weight: 600; }
.v2-seite .text-center, .v2-seite .text-left, .v2-seite .text-right { text-align: left; }
.v2-seite .hidden, .v2-seite .ee-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- Abschnitte ---------- */
.v2-seite .by-content-area { padding-block: var(--abschnitt); position: relative; background: var(--c-flaeche); }
.v2-seite .by-content-area + .by-content-area { padding-top: 0; }
.v2-seite .by-content-area.content-bg-gray,
.v2-seite .by-content-area.content-bg-secondary { background: var(--c-flaeche-ruhig); border-block: 1px solid var(--c-linie); padding-top: var(--abschnitt); }
.v2-seite .by-content-area.content-bg-gray + .by-content-area:not(.content-bg-gray):not(.content-bg-secondary),
.v2-seite .by-content-area.content-bg-secondary + .by-content-area:not(.content-bg-gray):not(.content-bg-secondary) { padding-top: var(--abschnitt); }
.v2-seite .content-bg-pattern::before, .v2-seite .content-bg-pattern::after { content: none !important; display: none !important; }
.v2-seite .color-invert, .v2-seite .color-invert * { color: inherit; }
/* Raster (Überarbeitung 04.10.2026, Messung 14_design/werkzeuge/kanten.mjs): EINE linke Kante für alles.
Jeder Baustein steht im selben Container wie Kopf, Brotkrumen und Fuß (--breite). Fließtext, Überschriften, Hinweise,
FAQ, Bilder und Videos sind in der Breite begrenzt (--lesebreite), stehen aber linksbündig an derselben Kante –
nicht mehr mittig. Karten, Spalten, Tabellen und Rechner nutzen die volle Breite. */
.v2-seite .by-section { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); box-sizing: border-box; }
.v2-seite .by-section .by-section { padding-inline: 0; }
.v2-seite :is(.com-text, .com-headline, .com-infobox, .com-quote, .com-accordion-faq, .com-filelist, .com-ankernavi, .com-button, .com-image, .com-video, .com-borlabs-shortcode) > * { max-width: var(--lesebreite); }
.v2-seite :is(.com-text:has(.by-laravel-content), .com-text:has(.com-calculators), .com-image:has(.width-full)) > * { max-width: none; }
.v2-seite :is(.com-two-cols, .com-three-cols) .by-section > * { max-width: none; }
/* Alle Seiten außer Einstiegsseiten und großen Rechnern (Formular, kostenloser Rechner): ein gemeinsames Maß --inhaltsbreite
(= Lesebreite) für alle Blöcke der Hauptspalte. Teaserboxen, Zwei-Spalten und Tabellen enden an derselben rechten Kante wie
der Fließtext (vorher Text ≈ 44 rem, Kachel bis 76 rem). Das gilt seit 08.10.2026 auch für Seiten mit Inhaltsverzeichnis
(Ankernavigation): dort ragte z. B. die Termin-Tabelle der Kindergeld-Auszahlungstermine über die grauen Karten hinaus und
reichte dicht an die Kapitel-Leiste. Breite Raster (Teaserbox-Raster, Beitragslinks, Drei-Spalten) behalten die volle
Breite: drei Karten nebeneinander brauchen sie, und sie stehen als eigene Zeile unter einer Zwischenüberschrift. */
body.v2-seite:not(.v2-einstieg) main:not(:has(#form-container, #rechner-free-rechner)) { --inhaltsbreite: var(--lesebreite); }
body.v2-seite:not(.v2-einstieg) main:not(:has(#form-container, #rechner-free-rechner)) :is(.com-teaserbox, .com-two-cols, .com-table) > * { max-width: var(--inhaltsbreite); }
/* Rhythmus: Abstand zwischen Bausteinen; neue Zwischenüberschrift mit deutlich mehr Luft, Unterzeile direkt darunter */
.v2-seite .by-section + .by-section { margin-top: var(--s-5); }
.v2-seite .by-section:not(.com-headline) + .com-headline { margin-top: var(--s-8); }
.v2-seite .com-headline + .com-headline { margin-top: var(--s-2); }
.v2-seite .com-headline + .by-section:not(.com-headline) { margin-top: var(--s-4); }
/* ---------- Überschriften ---------- */
.v2-seite .com-headline__wrapper > * { margin: 0; }
.v2-seite .com-headline h1, .v2-seite h1 { color: var(--c-text); }
.v2-seite .page-startseite .com-headline h1, .v2-seite .site-main.page-rechner h1 { color: var(--ee-rot); }
.v2-seite h1.color-red-dark, .v2-seite h2.color-red-dark, .v2-seite h3.color-red-dark, .v2-seite h4.color-red-dark,
.v2-seite .headline-large, .v2-seite .headline-default { color: var(--c-text); }
.v2-seite .com-headline h2, .v2-seite main h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.v2-seite main h3 { font-size: var(--fs-h3); margin: var(--s-5) 0 var(--s-2); }
.v2-seite main h4 { font-size: var(--fs-h4); margin: var(--s-4) 0 var(--s-2); }
.v2-seite .com-headline p.h1, .v2-seite .com-headline p.h2, .v2-seite .com-headline p.h3 { font-weight: 600; line-height: var(--lh-kopf); }
.v2-seite .com-headline p.h2 { font-size: var(--fs-h2); }
.v2-seite .com-headline p.h3 { font-size: var(--fs-h3); }
.v2-seite .com-headline__subheadline { color: var(--c-text-2); font-size: var(--fs-lead); margin-top: var(--s-2) !important; }
/* ---------- Text ---------- */
.v2-seite .com-text__inner > :first-child { margin-top: 0; }
.v2-seite .com-text__inner > :last-child { margin-bottom: 0; }
.v2-seite .com-text__inner p { margin: 0 0 var(--s-4); }
.v2-seite .com-text__inner ul, .v2-seite .com-text__inner ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
.v2-seite .com-text__inner li { margin-bottom: var(--s-2); }
.v2-seite .com-text__inner li::marker { color: var(--ee-rot); }
.v2-seite .com-text__inner table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: .9375rem; display: block; overflow-x: auto; }
.v2-seite .com-text__inner th, .v2-seite .com-text__inner td { border-bottom: 1px solid var(--c-linie); padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; }
.v2-seite .com-text__inner th { background: var(--ee-grau-100); font-weight: 600; }
.v2-seite .smaller, .v2-seite small { font-size: var(--fs-klein); color: var(--c-text-2); }
/* ---------- Zwei/Drei Spalten ---------- */
.v2-seite .com-two-cols__wrapper, .v2-seite .com-three-cols__wrapper { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
/* Linklisten neben dekorativer Verlaufsgrafik (WordPress: „wrapper-has-bg“ mit einer leeren Spalte): Grafik aus, die Links
stehen als ruhiges Themen-Raster über die volle Breite (Konzept Kap. 4.2 „Themen-Raster ersetzt rote Verlaufs-Linklisten“).
Die Grafik lag sonst je nach Breite hinter dem Text (Text auf Rot, Überschneidungen). Links und Texte unverändert. */
.v2-seite .com-two-cols__wrapper.wrapper-has-bg { background-image: none !important; }
/* (:has() darf nicht verschachtelt werden – deshalb über „linke/rechte Spalte ohne Kind“) */
.v2-seite .com-two-cols__wrapper:not(:has(> .com-two-cols__col__left > *)), .v2-seite .com-two-cols__wrapper:not(:has(> .com-two-cols__col__right > *)) { grid-template-columns: minmax(0, 1fr) !important; }
.v2-seite .com-two-cols__wrapper > .com-two-cols__col:not(:has(*)) { display: none; }
/* zwei solche Listen direkt nacheinander lesen sich als eine Liste */
.v2-seite .com-two-cols:has(.wrapper-has-bg) + .com-two-cols:has(.wrapper-has-bg) { margin-top: 0; }
.v2-seite .com-two-cols:has(.wrapper-has-bg) + .com-two-cols:has(.wrapper-has-bg) .com-linklist__list { border-top: 0; }
@media (min-width: 48rem) { .v2-seite .com-two-cols__wrapper.wrapper-has-bg .com-linklist__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .v2-seite .com-two-cols__wrapper.wrapper-has-bg .com-linklist__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Blocksatz aus WordPress-Texten: im neuen Design linksbündig (keine Löcher im Text) */
.v2-seite main [style*="justify"] { text-align: left !important; }
.v2-seite .com-two-cols__col, .v2-seite .com-three-cols__col { min-width: 0; }
/* Spaltenbreite bestimmt das Raster, nicht das bisherige Theme (dort flex: 0 0 calc(50% - 15px)) */
.v2-seite .com-two-cols__col, .v2-seite .com-three-cols__col { width: auto !important; flex: none !important; max-width: none; }
.v2-seite .com-two-cols__col > .by-section + .by-section { margin-top: var(--s-4); }
.v2-seite .com-two-cols__col__vertical-align-center { align-self: center; }
@media (min-width: 48rem) {
.v2-seite .com-two-cols__wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-seite .com-two-cols__wrapper:has(.com-two-cols__col__66.com-two-cols__col__left) { grid-template-columns: 2fr 1fr; }
.v2-seite .com-two-cols__wrapper:has(.com-two-cols__col__33.com-two-cols__col__left) { grid-template-columns: 1fr 2fr; }
.v2-seite .com-three-cols__wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .v2-seite .com-three-cols__wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Adress-Spalten (Familienkassen, Elterngeldstellen) als ruhige Karten */
.v2-seite .com-three-cols__col { background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); padding: var(--s-5); }
.v2-seite .com-three-cols__col:empty { display: none; }
/* ---------- Bilder ---------- */
.v2-seite .com-image__wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
/* Die CMS-Bildkomponente setzt bei „eigener Breite“ z. B. style="width:1000px" – nie breiter als der Inhalt (wie bisheriges Theme) */
.v2-seite .com-image img, .v2-seite .com-image picture, .v2-seite .com-image svg { max-width: 100%; }
.v2-seite .com-image img { height: auto; }
.v2-seite .com-image.width-full img, .v2-seite .com-image.width-full picture, .v2-seite .com-image.width-full svg { width: 100%; }
.v2-seite .com-image img, .v2-seite .com-image picture { border-radius: var(--radius); display: block; }
.v2-seite .com-image label { font-size: var(--fs-klein); color: var(--c-text-2); width: 100%; max-width: 100%; text-align: left; }
/* ---------- Hinweis-Kasten (infobox) ---------- */
.v2-seite .com-infobox__inner { display: flex; gap: var(--s-4); align-items: flex-start; background: var(--ee-grau-100); border: 1px solid var(--c-linie); border-left: 4px solid var(--ee-rot); border-radius: var(--radius-s); padding: var(--s-4) var(--s-5); }
.v2-seite .com-infobox__inner.bg-green, .v2-seite .com-infobox__inner[class*="green"] { background: var(--ee-gruen-zart); border-left-color: var(--ee-gruen); }
.v2-seite .com-infobox__inner[class*="yellow"], .v2-seite .com-infobox__inner[class*="gelb"] { background: #fdf8e1; border-left-color: #d9b100; }
.v2-seite .com-infobox__text { flex: 1 1 auto; min-width: 0; }
.v2-seite .com-infobox__text > :last-child { margin-bottom: 0; }
.v2-seite .com-infobox__icon { flex: none; width: 36px; }
.v2-seite .com-infobox__icon img { width: 36px; height: 36px; object-fit: contain; }
/* ---------- Zitat ---------- */
.v2-seite .com-quote__inner { border-left: 4px solid var(--ee-rot); padding: var(--s-2) 0 var(--s-2) var(--s-5); background: none; box-shadow: none; }
.v2-seite .com-quote__inner::before, .v2-seite .com-quote__inner::after { content: none !important; }
.v2-seite .com-quote__inner__message { font-size: var(--fs-lead); }
.v2-seite .com-quote__inner__author { margin-top: var(--s-2); color: var(--c-text-2); font-size: var(--fs-klein); }
/* ---------- Buttons ---------- */
.v2-seite .com-button__wrapper { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.v2-seite .com-button__wrapper.button-align-center { justify-content: flex-start; }
.v2-seite main .by-button, .v2-seite main .by-button-secondary, .v2-seite main .btn, .v2-seite .com-button__wrapper > a {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5);
border-radius: var(--radius-pill); font-weight: 600; text-decoration: none !important; border: 2px solid var(--ee-rot); line-height: 1.2; white-space: normal; text-align: center; }
.v2-seite main .by-button, .v2-seite main .btn-red, .v2-seite .com-button__wrapper > a:not(.by-button-secondary):not(.btn-secondary) { background: var(--ee-rot); color: #fff !important; }
.v2-seite main .by-button:hover, .v2-seite main .btn-red:hover, .v2-seite .com-button__wrapper > a:not(.by-button-secondary):not(.btn-secondary):hover { background: var(--ee-rot-dunkel); border-color: var(--ee-rot-dunkel); }
.v2-seite main .by-button-secondary, .v2-seite main .btn-secondary { background: #fff; color: var(--ee-rot) !important; }
.v2-seite main .by-button-secondary:hover, .v2-seite main .btn-secondary:hover { background: var(--ee-rot); color: #fff !important; }
.v2-seite main .btn.btn-golden { background: var(--ee-rot) !important; color: #fff !important; border-color: var(--ee-rot) !important; } /* bisheriger Hauptknopf (z. B. Einwilligung im Rechner) */
.v2-seite main .btn.btn-golden:hover { background: var(--ee-rot-dunkel) !important; border-color: var(--ee-rot-dunkel) !important; }
.v2-seite main .btn.btn-golden:disabled, .v2-seite main .btn.btn-golden.disabled { background: var(--ee-grau-300) !important; border-color: var(--ee-grau-300) !important; color: var(--ee-grau-800) !important; opacity: 1; }
/* ---------- Karten: Teaser, Teaser-Raster, Beitragslinks ---------- */
.v2-seite .com-teaserbox__inner, .v2-seite .com-teaserbox-grid__single, .v2-seite .com-postlinks__preview {
position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--schatten); color: var(--c-text); transition: box-shadow .15s, border-color .15s; }
.v2-seite .com-teaserbox__inner:hover, .v2-seite .com-teaserbox-grid__single:hover, .v2-seite .com-postlinks__preview:hover { box-shadow: var(--schatten-hoch); border-color: var(--ee-grau-300); }
.v2-seite .com-teaserbox__inner__content, .v2-seite .com-teaserbox-grid__single__content { padding: var(--s-5); background: none !important; color: var(--c-text); }
.v2-seite .com-teaserbox__inner__content::before, .v2-seite .com-teaserbox__inner__content::after,
.v2-seite .com-teaserbox-grid__single::before, .v2-seite .com-teaserbox-grid__single::after { content: none !important; }
.v2-seite .com-teaserbox__inner__content :is(h2, h3, h4, p.h2, p.h3, p.h4), .v2-seite .com-teaserbox-grid__single__content :is(h2, h3, h4, p.h2, p.h3, p.h4) { font-size: var(--fs-h3); margin: 0 0 var(--s-2); color: var(--c-text); }
.v2-seite .com-teaserbox__inner__image img, .v2-seite .com-teaserbox-grid__single__image img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
/* Hochkant-/quadratische Kartenbilder (js/v2/bilder.js): ganz zeigen, z. B. runde Team-Porträts */
.v2-seite .v2-bild--ganz { padding: var(--s-5) var(--s-5) 0; }
.v2-seite .v2-bild--ganz img { aspect-ratio: auto !important; width: auto !important; max-width: 100%; height: 200px !important; object-fit: contain !important; margin-inline: auto; border-radius: 0; }
.v2-seite .com-teaserbox-grid__single__subheadline { color: var(--c-text-2); font-size: var(--fs-klein); margin: 0 0 var(--s-2); }
@media (min-width: 48rem) {
.v2-seite .com-teaserbox__inner.has-image { flex-direction: row; }
.v2-seite .com-teaserbox__inner.has-image .com-teaserbox__inner__image { flex: 0 0 40%; }
.v2-seite .com-teaserbox__inner.has-image .com-teaserbox__inner__image img { height: 100%; aspect-ratio: auto; }
}
.v2-seite .com-teaserbox-grid__inner, .v2-seite .com-postlinks__inner { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .v2-seite .com-teaserbox-grid__inner, .v2-seite .com-postlinks__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .v2-seite .com-teaserbox-grid__inner, .v2-seite .com-postlinks__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Spaltenzahl nach Anzahl der Karten: keine leere dritte Spalte bei 2 oder 4 Karten (2 → zwei Spalten, 4 → 2×2 bzw. vier nebeneinander) */
@media (min-width: 40rem) {
.v2-seite :is(.com-teaserbox-grid__inner, .com-postlinks__inner):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-seite :is(.com-teaserbox-grid__inner, .com-postlinks__inner):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
.v2-seite :is(.com-teaserbox-grid__inner, .com-postlinks__inner):has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Zwei aufeinanderfolgende Beitragslisten mit je zwei Karten (Startseite) lesen sich als ein 2×2-Raster */
.v2-seite .com-postlinks + .com-postlinks { margin-top: var(--s-4); }
.v2-seite .com-postlinks__preview__thumb { display: block; width: 100%; aspect-ratio: 2 / 1; background-size: cover; background-position: center; }
.v2-seite .com-postlinks__preview > img, .v2-seite .com-postlinks__preview picture img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.v2-seite .com-postlinks__preview__content { padding: var(--s-4) var(--s-5) var(--s-5); margin: 0; }
.v2-seite .com-postlinks__title { color: var(--c-text) !important; text-decoration: none !important; }
.v2-seite .com-postlinks__title::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.v2-seite .com-postlinks__preview__content__teasertext, .v2-seite .com-postlinks__preview__content__teasertext * { color: var(--c-text-2); font-size: 1rem; line-height: 1.6; }
/* Kartentexte einheitlich: gleiche Größe, Farbe und Zeilenhöhe in Teaser- und Beitragskarten */
.v2-seite .com-teaserbox-grid__single__content p, .v2-seite .com-teaserbox__inner__content p { color: var(--c-text-2); font-size: 1rem; line-height: 1.6; }
.v2-seite .by-link-wrapper { cursor: pointer; }
.v2-seite .by-arrow { display: none; }
/* ---------- Linkliste ---------- */
/* Spalten nach verfügbarer Breite (auch innerhalb von Zwei-Spalten-Bausteinen nie zu schmal) */
.v2-seite .com-linklist__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: var(--s-6); border-top: 1px solid var(--c-linie); }
.v2-seite .com-linklist__list__item { border-bottom: 1px solid var(--c-linie); margin: 0; }
.v2-seite .com-linklist__list__item__link { display: flex !important; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; padding: var(--s-2) 0;
color: var(--c-text) !important; text-decoration: none !important; font-weight: 600; background: none !important; }
.v2-seite .com-linklist__list__item__link::after { content: "→"; color: var(--ee-rot); font-weight: 400; flex: none; }
.v2-seite .com-linklist__list__item__link:hover { color: var(--ee-rot) !important; }
.v2-seite .com-linklist__list__item__link img, .v2-seite .com-linklist__list__item__link picture { display: none; }
/* ---------- Inhaltsverzeichnis (Ankernavigation) ---------- */
.v2-seite .com-ankernavi__menu { list-style: none; margin: 0; padding: var(--s-4) var(--s-5); background: var(--ee-grau-100); border: 1px solid var(--c-linie); border-radius: var(--radius); }
.v2-seite .com-ankernavi__menu__headline { font-weight: 600; margin-bottom: var(--s-2); }
.v2-seite .com-ankernavi__menu__item { margin: 0; }
.v2-seite .com-ankernavi__menu__item__link { display: flex; align-items: center; min-height: 40px; color: var(--c-text) !important; text-decoration: none !important; }
.v2-seite .com-ankernavi__menu__item__link::before { content: "↓"; color: var(--ee-rot); margin-right: var(--s-2); }
.v2-seite .com-ankernavi__menu__item__link:hover { color: var(--ee-rot) !important; }
/* ---------- FAQ (Akkordeon) ---------- */
.v2-seite .com-accordion-faq__inner { border: 0; padding: 0; background: none; box-shadow: none; }
.v2-seite .com-accordion-faq dl { margin: 0; border-top: 1px solid var(--c-linie); }
.v2-seite .com-accordion-faq__tab { border-bottom: 1px solid var(--c-linie); }
.v2-seite .by-tab__headline { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding: var(--s-3) 0; cursor: pointer; margin: 0; }
.v2-seite .by-tab__headline h3 { font-size: var(--fs-h4); margin: 0; font-weight: 600; color: var(--c-text); }
.v2-seite .by-tab__headline::after { content: ""; width: 10px; height: 10px; flex: none; margin-right: 6px; border-right: 2px solid var(--ee-rot); border-bottom: 2px solid var(--ee-rot); transform: rotate(45deg); transition: transform .2s; }
.v2-seite .com-accordion-faq__tab[data-tab-active="true"] .by-tab__headline::after { transform: rotate(-135deg); }
.v2-seite .by-tab__headline .by-arrow { display: none; }
.v2-seite .by-tab__text { margin: 0; padding: 0 0 var(--s-4); }
.v2-seite .by-tab__text > :last-child { margin-bottom: 0; }
/* ---------- Downloads (Dateiliste) ---------- */
.v2-seite .by-filelist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.v2-seite .by-filelist li { margin: 0; }
.v2-seite .by-filelist a { display: flex !important; align-items: center; gap: var(--s-3); min-height: 60px; padding: var(--s-2) var(--s-4); border: 1px solid var(--c-linie); border-radius: var(--radius-s);
background: #fff; color: var(--c-text) !important; text-decoration: none !important; }
.v2-seite .by-filelist a:hover { border-color: var(--ee-rot); color: var(--ee-rot) !important; }
.v2-seite .by-filelist__icon { flex: none; color: var(--ee-rot); display: inline-grid; place-items: center; width: 28px; height: 28px; }
.v2-seite .by-filelist__title { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.v2-seite .by-filelist a > .material-icons { flex: none; color: var(--ee-rot); }
.v2-seite .by-filelist svg { width: 24px; height: 24px; fill: currentColor; }
/* ---------- Tabelle (div-basiert) ---------- */
.v2-seite .com-table__inner { border: 1px solid var(--c-linie); border-radius: var(--radius); overflow: hidden; background: #fff; }
.v2-seite .com-table__row { display: grid; grid-auto-flow: row; border-bottom: 1px solid var(--c-linie); padding: var(--s-3) var(--s-4); gap: var(--s-1); }
.v2-seite .com-table__body .com-table__row:last-child { border-bottom: 0; }
.v2-seite .com-table__header { display: none; }
.v2-seite .com-table__row__inner { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: var(--s-3); }
.v2-seite .com-table__row__inner:has(> .com-table__row__column:only-child) { grid-template-columns: 1fr; }
.v2-seite .com-table__row__header { font-weight: 600; color: var(--c-text-2); font-size: var(--fs-klein); }
.v2-seite .com-table__row__column { border: 0; background: none; padding: 0; }
@media (min-width: 48rem) {
.v2-seite .com-table__header { display: grid; background: var(--ee-grau-100); font-weight: 600; }
.v2-seite .com-table__row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0; gap: 0; }
.v2-seite .com-table__row__inner { display: block; padding: var(--s-3) var(--s-4); }
.v2-seite .com-table__row__header { display: none; }
}
/* ---------- Tipps-Raster ---------- */
.v2-seite .com-tips-grid__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); counter-reset: tipp; }
@media (min-width: 48rem) { .v2-seite .com-tips-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .v2-seite .com-tips-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-seite .com-tips-grid__list > li { counter-increment: tipp; background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); padding: var(--s-5); margin: 0; }
.v2-seite .com-tips-grid__list__type { display: block; font-weight: 600; margin-bottom: var(--s-2); color: var(--c-text); }
.v2-seite .com-tips-grid__list__type::before { content: counter(tipp); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: var(--s-2); border-radius: 50%; background: var(--ee-rot-zart); color: var(--ee-rot-tief); font-size: .875rem; }
.v2-seite .com-tips-grid__list__answer { display: block; color: var(--c-text-2); }
/* ---------- Video (Zwei-Klick) ---------- */
.v2-seite .com-video__container { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ee-grau-900); }
.v2-seite .com-video__container iframe, .v2-seite .com-video__container video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---------- Bewertungen ohne Einwilligung ---------- */
.v2-seite .com-borlabs-shortcode__fallback { background: var(--ee-grau-100); border: 1px solid var(--c-linie); border-radius: var(--radius); padding: var(--s-5); color: var(--c-text-2); }
.v2-seite .com-borlabs-shortcode__fallback p { text-align: left !important; margin: 0; }
/* ---------- Pakete (Beratung) ---------- */
.v2-seite .com-servicepackage__inner { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .v2-seite .com-servicepackage__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-seite .by-servicepackage { background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); box-shadow: var(--schatten); }
.v2-seite .by-servicepackage__header__price { font-size: var(--fs-h2); font-weight: 600; color: var(--c-text); }
.v2-seite .by-servicepackage__header__price__small { font-size: var(--fs-klein); color: var(--c-text-2); font-weight: 400; }
.v2-seite .by-servicepackage__body__service { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-1) 0; }
.v2-seite .by-servicepackage__footer { margin-top: auto; }
/* ---------- Laravel-Inhalte innerhalb von CMS-Seiten (Rechner, Registrierung, Buchung) ---------- */
.v2-seite .by-laravel-content { max-width: none; }
/* ---------- Ergänzungen nach Sichtprüfung ---------- */
/* Rechner/Registrierung/Buchung im Textbaustein: volle Breite statt Lesespalte */
/* Hinweis-Symbol klein halten (Bild/SVG in beliebiger Verschachtelung) */
.v2-seite .com-infobox__icon, .v2-seite .com-infobox__icon * { max-width: 40px !important; max-height: 40px !important; }
@media (max-width: 39.99rem) { .v2-seite .com-infobox__icon { display: none; } }
/* FAQ: Antworten einklappen wie bisher (aria-hidden setzt das Theme-Skript), ohne Höhenbegrenzung */
.v2-seite .by-tab__text[aria-hidden="true"] { display: none; }
.v2-seite .by-tab__text { max-height: none !important; overflow: visible; }
/* Abstand: Text nach einem breiten Baustein nicht direkt ankleben */
.v2-seite :is(.com-two-cols, .com-video, .com-table, .com-teaserbox-grid, .com-postlinks) + .by-section:not(.com-headline) { margin-top: var(--s-6); }
/* Video vor der Einwilligung: helles Vorschaufeld mit Abspiel-Knopf statt dunklem Kasten */
.v2-seite .com-video__container { background: var(--ee-grau-200); box-shadow: var(--schatten); }
.v2-seite .com-video__container video { object-fit: cover; cursor: pointer; }
.v2-seite .com-video__container:has(video.by-enable-video-borlabs)::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; pointer-events: none;
background: var(--ee-rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") no-repeat 56% 50% / 34px;
box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s ease; }
.v2-seite .com-video__container:has(video.by-enable-video-borlabs):hover::after { transform: scale(1.06); }
.v2-seite .com-video__container:has(video.by-enable-video-borlabs)::before {
content: "Video von YouTube · zum Abspielen zustimmen"; position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 1; pointer-events: none;
padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.92); color: var(--c-text); font-size: var(--fs-klein); font-weight: 600; }
html[lang^="en"] .v2-seite .com-video__container:has(video.by-enable-video-borlabs)::before { content: "YouTube video · consent required to play"; }
@media (prefers-reduced-motion: reduce) { .v2-seite .com-video__container::after { transition: none; } }
/* Schnellrechner ([rechnerShort]): Karte im neuen Stil, Erklärung/Ergebnis nicht auf volle Höhe gezogen */
.v2-seite #schnellrechner-container { align-items: flex-start; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--c-linie); border-radius: var(--radius); box-shadow: var(--schatten); background: #fff; }
.v2-seite #schnellrechner-container > [class*="col-"] { padding-left: 0; padding-right: 0; }
.v2-seite #schnellrechner-container h3 { color: var(--c-text); font-size: var(--fs-h3); margin: 0 0 var(--s-4); }
.v2-seite #short-calculator-info { border-radius: var(--radius-s); background: #fdf8e1; border: 1px solid #f1e3a6; padding: var(--s-5); }
@media (min-width: 64rem) {
.v2-seite #schnellrechner-container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.v2-seite #schnellrechner-container > [class*="col-"] { float: none; width: auto; }
}
@media (max-width: 63.99rem) { .v2-seite #schnellrechner-container { padding: var(--s-4); } }
/* Textbaustein-Varianten aus dem CMS („Mit Rahmen“, „Hintergrund sekundär“) als ruhige Kästen */
.v2-seite .com-text__inner.bordered-text { border: 1px solid var(--c-linie); border-radius: var(--radius); padding: var(--s-5); }
.v2-seite .com-text__inner.content-bg-secondary { background: var(--ee-grau-100); border: 1px solid var(--c-linie); border-radius: var(--radius); padding: var(--s-5) var(--s-6); }
/* Häkchen-Listen (ul.check-list): ein Häkchen statt Punkt (auch gegen eingebettetes list-style) */
.v2-seite ul.check-list { list-style: none !important; padding-left: 0; }
.v2-seite ul.check-list > li { position: relative; padding-left: 1.9rem; list-style: none !important; }
.v2-seite ul.check-list > li::marker { content: none; }
.v2-seite ul.check-list > li::before {
content: ""; position: absolute; left: 0; top: .22em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background-color: var(--ee-gruen);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: .85rem; -webkit-mask: none; mask: none; } /* basis.css maskiert sonst mit dem Häkchen-Symbol */
/* ---------- Theme-Rechner (Mutterschutz, Mutterschaftsgeld, Elternzeit, Kindergeld) ---------- */
.v2-seite .com-calculators__wrapper { background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--schatten); }
.v2-seite .com-calculators label { display: block; font-weight: 600; margin: var(--s-4) 0 var(--s-2); }
.v2-seite .com-calculators label:has(input[type="checkbox"]), .v2-seite .com-calculators label:has(input[type="radio"]) { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: 400; min-height: var(--tap); }
.v2-seite .com-calculators input[type="text"], .v2-seite .com-calculators input[type="date"], .v2-seite .com-calculators input[type="number"],
.v2-seite .com-calculators input[type="tel"], .v2-seite .com-calculators select {
width: 100%; max-width: 22rem; min-height: var(--tap); padding: 0 var(--s-3); font: inherit; font-size: 1rem; border: 1px solid var(--ee-grau-500); border-radius: var(--radius-s); background: #fff; color: var(--c-text); }
.v2-seite .com-calculators input:focus-visible, .v2-seite .com-calculators select:focus-visible { outline: 3px solid var(--ee-rot-hell); border-color: var(--ee-rot); }
.v2-seite .com-calculators input[type="checkbox"], .v2-seite .com-calculators input[type="radio"] { width: 22px; height: 22px; accent-color: var(--ee-rot); flex: none; margin-top: 2px; }
.v2-seite .com-calculators button, .v2-seite .com-calculators input[type="submit"], .v2-seite .com-calculators .by-button {
margin-top: var(--s-4); min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--radius-pill); background: var(--ee-rot); color: #fff; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.v2-seite .com-calculators button:hover { background: var(--ee-rot-dunkel); }
.v2-seite .com-calculators table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.v2-seite .com-calculators th, .v2-seite .com-calculators td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-linie); }
.v2-seite .com-ankernavi__menu__item__link { min-height: 44px; }
.v2-seite main a[href^="tel:"], .v2-seite main a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
/* ---------- Kindergeld-Termin-Finder (Etappe E3, public/js/v2/termin-finder.js) ---------- */
.v2-seite .v2-finder { width: 100%; max-width: var(--lesebreite); margin: var(--s-4) 0 var(--s-5); padding: var(--s-5); border: 2px solid var(--ee-rot); border-radius: var(--radius); background: #fff; }
.v2-seite .v2-finder__titel { display: flex; gap: var(--s-2); align-items: center; font-weight: 600; font-size: var(--fs-h4); margin: 0 0 var(--s-2); }
.v2-seite .v2-finder__titel svg { width: 24px; height: 24px; color: var(--ee-rot); flex: none; }
.v2-seite .v2-finder fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.v2-seite .v2-finder__legende { font-size: .9375rem; color: var(--c-text-2); margin-bottom: var(--s-3); padding: 0; }
.v2-seite .v2-finder__ziffern { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
@media (min-width: 30rem) { .v2-seite .v2-finder__ziffern { grid-template-columns: repeat(10, 1fr); } }
.v2-seite .v2-finder label { position: relative; margin: 0; }
.v2-seite .v2-finder input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.v2-seite .v2-finder label span { display: grid; place-items: center; height: 48px; border: 1.5px solid var(--ee-grau-300); border-radius: var(--radius-s); font-weight: 600; font-size: 1.125rem; cursor: pointer; background: #fff; }
.v2-seite .v2-finder input:checked + span { background: var(--ee-rot); border-color: var(--ee-rot); color: #fff; }
.v2-seite .v2-finder input:focus-visible + span { outline: 3px solid var(--c-text); outline-offset: 2px; }
.v2-seite .v2-finder__ergebnis { display: block; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--ee-grau-100); border-radius: var(--radius-s); font-size: 1rem; line-height: 1.5; }
.v2-seite .v2-finder__ergebnis a { display: inline-block; padding-block: 4px; }
/* Treffer: grüne Ergebnisbox in den Farben der Rechner-Ergebnisse (Geschwister-Check: --ee-gruen-zart, Rand --ee-gruen, Text #1d6630) */
.v2-seite .v2-finder__ergebnis--treffer { padding: var(--s-4) var(--s-5); background: var(--ee-gruen-zart); border: 2px solid var(--ee-gruen); border-radius: var(--radius); color: #1d6630; }
.v2-seite .v2-finder__ergebnis--treffer .v2-finder__text { display: block; font-weight: 600; }
.v2-seite .v2-finder__ergebnis--treffer .v2-finder__datum { display: block; margin: var(--s-1) 0 var(--s-2); font-size: clamp(1.375rem, 0.9rem + 1.8vw, 2rem); font-weight: 700; line-height: 1.2; color: #1d6630; }
.v2-seite .v2-finder__ergebnis--treffer .v2-finder__alle a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (max-width: 29.99rem) { .v2-seite .v2-finder__ergebnis--treffer { padding-inline: var(--s-4); } }
.v2-seite h3[id^="endziffer-"] { scroll-margin-top: 80px; }
.v2-seite .v2-termine .v2-termine__vorbei { color: var(--c-text-2); }
.v2-seite .v2-termine .v2-termine__naechster { font-weight: 600; color: var(--ee-rot-tief); }
/* Rahmen um die gewählte Tabelle: am Inhalt (auf Lesebreite begrenzt), nicht am Baustein über die volle Seitenbreite */
.v2-seite .v2-termine--gewaehlt > * { outline: 2px solid var(--ee-rot); outline-offset: 4px; border-radius: var(--radius-s); }
/* ---------- Kostenlose Rechner: Formular-Kästchen und Ergebnis (Ausgabe app/Cms/Calculators/Ausgabe.php) ---------- */
.v2-seite .com-calculators .mb-formfield:has(> input[type="checkbox"]) { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-4) 0 0; min-height: var(--tap); }
.v2-seite .com-calculators .mb-formfield:has(> input[type="checkbox"]) > label { margin: 0; font-weight: 400; cursor: pointer; }
.v2-seite .com-calculators small { display: block; color: var(--c-text-2); font-size: var(--fs-klein); margin-top: var(--s-1); }
.v2-seite .com-calculators .hidden { display: none !important; }
.v2-seite .com-calculators .m-t-15 { margin-top: var(--s-3); }
.v2-seite .com-calculators .m-t-20 { margin-top: var(--s-4); }
.v2-seite .calculator-result { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-linie); }
.v2-seite .calculator-result > .headline.important[role="heading"] { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-kopf); }
.v2-seite .calculator-result > .headline.important[role="heading"]:focus { outline: none; }
.v2-seite .calculator-result > .headline.important[role="heading"]:focus-visible { outline: 3px solid var(--ee-rot-hell); outline-offset: 4px; }
.v2-seite .calculator-result .headline.m-t-15[role="heading"] { font-size: var(--fs-h4); font-weight: 600; margin-top: var(--s-5); }
.v2-seite .calculator-result .result-highlight { background: var(--ee-grau-100); border: 1px solid var(--c-linie); border-left: 4px solid var(--ee-rot); border-radius: var(--radius-s); padding: var(--s-2) var(--s-4); }
.v2-seite .calculator-result .result-line { display: flex; gap: var(--s-3); justify-content: space-between; align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-linie); }
.v2-seite .calculator-result .result-line:last-child { border-bottom: 0; }
.v2-seite .calculator-result .result-line .headline { min-width: 0; hyphens: manual; }
.v2-seite .calculator-result .result-line .headline.important { font-weight: 600; }
.v2-seite .calculator-result .result-line .amount { flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.v2-seite .calculator-result .result-line .amount.important { color: var(--ee-rot-tief); font-size: 1.125rem; }
.v2-seite .calculator-result .result-line .amount small { display: block; font-weight: 400; color: var(--c-text-2); font-size: var(--fs-klein); margin: 0; }
.v2-seite .calculator-result .result-line .substract { color: var(--c-text-2); }
.v2-seite .calculator-result .parental-leave-parent + .parental-leave-parent, .v2-seite .calculator-result .parental-leave-parent { margin-top: var(--s-4); }
.v2-seite .calculator-result ul { padding-left: 1.25em; margin: var(--s-2) 0 0; }
.v2-seite .calculator-result li { margin-bottom: var(--s-2); }
.v2-seite .calculator-result p small { color: var(--c-text-2); }
.v2-seite .calculator-result [data-rechner-aktionen] { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.v2-seite .calculator-result [data-rechner-aktionen] .by-button-secondary { margin: 0; }
.v2-seite .com-calculators .hint { background: #fdf3f2; border: 1px solid var(--c-linie); border-left: 4px solid var(--ee-rot); border-radius: var(--radius-s); padding: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.v2-seite .com-calculators .hint .hint-headline { font-weight: 600; }
.v2-seite .com-calculators .hint ul { padding-left: 1.25em; margin: var(--s-2) 0 0; }
.v2-seite .com-calculators [aria-invalid="true"] { border-color: var(--ee-rot) !important; box-shadow: 0 0 0 1px var(--ee-rot); }
.v2-seite .calculator-result .parental-leave-parent > .headline.important { font-weight: 600; margin-bottom: var(--s-2); }
/* ---------- Kinderzuschlagsrechner (resources/views/cms/components/rechner/kinderzuschlag.blade.php) ---------- */
.v2-seite .com-calculators .kiz-gruppe { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-linie); }
.v2-seite .com-calculators .kiz-gruppe > .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-kopf); margin: 0; }
.v2-seite .com-calculators .kiz-gruppe > small { margin-top: var(--s-2); }
.v2-seite .com-calculators .kiz-gruppe :is(.kiz-zeile, .mb-formfield-row) { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: var(--s-5); align-items: end; }
.v2-seite .com-calculators details.kiz-weitere { margin-top: var(--s-5); border-top: 1px solid var(--c-linie); border-bottom: 1px solid var(--c-linie); }
.v2-seite .com-calculators details.kiz-weitere > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; font-weight: 600; cursor: pointer; list-style: none; }
.v2-seite .com-calculators details.kiz-weitere > summary::-webkit-details-marker { display: none; }
.v2-seite .com-calculators details.kiz-weitere > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--ee-rot); border-bottom: 2px solid var(--ee-rot); transform: rotate(45deg); transition: transform .2s; }
.v2-seite .com-calculators details.kiz-weitere[open] > summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .v2-seite .com-calculators details.kiz-weitere > summary::after { transition: none; } }
.v2-seite .com-calculators details.kiz-weitere > summary:focus-visible { outline: 3px solid var(--ee-rot-hell); outline-offset: 2px; }
.v2-seite .com-calculators details.kiz-weitere[open] > summary { margin-bottom: var(--s-2); }
.v2-seite .com-calculators details.kiz-weitere > :last-child { margin-bottom: var(--s-4); }
/* ---------- Einstieg und Karten (Prototyp Startseite, Konzept Kap. 4.1) – nur Gestaltung, Inhalte unverändert ---------- */
/* Zitat direkt unter der H1 im ersten Abschnitt = Einleitungssatz → ruhiger Lead statt Zitat-Rahmen */
.v2-seite main > .by-content-area:first-child .com-headline + .com-quote .com-quote__inner { border-left: 0; padding: 0; }
.v2-seite main > .by-content-area:first-child .com-headline + .com-quote .com-quote__inner__message { color: var(--c-text-2); font-size: var(--fs-lead); line-height: 1.55; }
.v2-seite main > .by-content-area:first-child .com-headline + .com-quote { margin-top: var(--s-3); }
.v2-seite main > .by-content-area:first-child .com-headline__subheadline { color: var(--c-text-2); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; margin-top: var(--s-3) !important; }
/* Platzhalter für Google-Bewertungen (vor Einwilligung): kompakt statt großer Kasten */
.v2-seite .com-borlabs-shortcode__fallback { padding: var(--s-3) var(--s-4); font-size: var(--fs-klein); }
.v2-seite .by-content-area:has(> .com-borlabs-shortcode:only-child .borlabs-hide) { padding-block: var(--s-4); background: var(--c-flaeche); border-block: 0; }
.v2-seite .com-borlabs-shortcode__fallback p { text-align: left !important; margin: 0; }
.v2-seite .com-borlabs-shortcode__fallback a { cursor: pointer; }
/* Karten: Bild oben, Titel linksbündig, Weiterlink als Textlink mit Pfeil */
.v2-seite .com-teaserbox-grid__single.has-image { display: flex; flex-direction: column; }
.v2-seite .com-teaserbox-grid__single.has-image .com-teaserbox-grid__single__image { order: -1; }
.v2-seite .com-teaserbox-grid__single__content { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
.v2-seite .com-teaserbox-grid__single__content :is(h2, h3, h4) { text-align: left !important; }
.v2-seite main .com-teaserbox-grid__single__content a.by-link-item { margin-top: auto; padding: var(--s-3) 0 0; min-height: var(--tap); border: 0; border-radius: 0; background: none !important; color: var(--ee-rot) !important; font-weight: 600; box-shadow: none; display: inline-flex; align-items: center; gap: var(--s-2); }
.v2-seite main .com-teaserbox-grid__single__content a.by-link-item::after { content: "→"; transition: transform .15s ease; }
.v2-seite main .com-teaserbox-grid__single:hover a.by-link-item::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .v2-seite main .com-teaserbox-grid__single a.by-link-item::after { transition: none; } }
/* ---------- Kontaktformular (cms-contact-form, Etappe E5) ---------- */
.v2-seite .cms-contact-form { display: grid; gap: var(--s-2); max-width: 40rem; }
.v2-seite .cms-contact-form > p { margin: 0; }
.v2-seite .cms-contact-form > p:empty { display: none; }
.v2-seite .cms-contact-form .v2-feldname { display: block; font-weight: 600; margin: var(--s-3) 0 var(--s-1); }
.v2-seite .cms-contact-form .v2-feldhinweis { display: block; font-size: var(--fs-klein); color: var(--c-text-2); margin: 0 0 var(--s-2); }
.v2-seite .cms-contact-form .wpcf7-form-control-wrap { display: block; }
.v2-seite .cms-contact-form input[type="text"], .v2-seite .cms-contact-form input[type="email"], .v2-seite .cms-contact-form textarea {
width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3); font: inherit; font-size: 16px; color: var(--c-text);
background: #fff; border: 1.5px solid var(--ee-grau-300); border-radius: var(--radius-s); box-sizing: border-box; }
.v2-seite .cms-contact-form textarea { min-height: 10rem; resize: vertical; }
.v2-seite .cms-contact-form input:focus-visible, .v2-seite .cms-contact-form textarea:focus-visible { outline: 3px solid var(--ee-rot-hell); border-color: var(--ee-rot); }
.v2-seite .cms-contact-form [aria-invalid="true"] { border-color: var(--ee-rot); }
.v2-seite .cms-contact-form .wpcf7-acceptance label { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-3); font-weight: 400; cursor: pointer; }
.v2-seite .cms-contact-form .wpcf7-acceptance input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--ee-rot); }
.v2-seite .cms-contact-form .wpcf7-list-item-label p { font-size: var(--fs-klein); color: var(--c-text-2); margin: var(--s-2) 0 0; }
.v2-seite .cms-contact-form input[type="submit"] { justify-self: start; min-height: var(--tap); padding: var(--s-2) var(--s-6); border: 0; border-radius: var(--radius-pill);
background: var(--ee-rot); color: #fff; font: inherit; font-weight: 600; cursor: pointer; margin-top: var(--s-3); }
.v2-seite .cms-contact-form input[type="submit"]:hover { background: var(--ee-rot-dunkel); }
.v2-seite .cms-contact-form input[type="submit"]:focus-visible { outline: 3px solid var(--c-text); outline-offset: 2px; }
.v2-seite .cms-contact-form .wpcf7-not-valid-tip { display: block; color: var(--ee-rot-tief); font-size: var(--fs-klein); margin-top: var(--s-1); }
.v2-seite .cms-contact-form .wpcf7-response-output { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); border: 1px solid var(--c-linie); }
/* Buchungsformular Beratung: Beschriftungen (public/js/v2/formulare.js) */
.v2-seite main form .v2-feldname { display: block; font-weight: 600; margin: var(--s-3) 0 var(--s-1); font-size: 16px; }
.v2-seite main form .v2-feldhinweis { display: block; font-size: var(--fs-klein); color: var(--c-text-2); margin: 0 0 var(--s-2); }
/* =====================================================================
Nutzerführung (Prüfung 04.10.2026, EE/14_design/audit/nutzerfuehrung_2026-10-04.md) – nur Gestaltung,
Texte, Überschriften und Links unverändert. Bedienhilfen dazu in public/js/v2/fuehrung.js.
===================================================================== */
/* N-05 Hinweis-Kästen in der Variante, die die Redaktion im CMS gewählt hat (Konzept 3.4: Tipp grün, Achtung gelb, Wichtig rot) –
bisher sahen „Tipp“ und „Hinweis“ gleich aus */
.v2-seite .com-infobox__inner.box-success { background: var(--ee-gruen-zart); border-color: var(--ee-gruen-hell); border-left-color: var(--ee-gruen); }
.v2-seite .com-infobox__inner.box-notice { background: #fdf8e1; border-color: #f1e3a6; border-left-color: #d9b100; }
.v2-seite .com-infobox__inner.box-error { background: var(--ee-grau-100); border-left-color: var(--ee-rot); }
/* N-17 Leere Abstands-Absätze aus WordPress (
, js/v2/fuehrung.js) – Abstände regelt das Design */
.v2-seite .v2-leer { display: none !important; }
/* N-18 Zentrierte Absätze im Fließtext linksbündig wie die Überschrift darüber (Konzept 3.2) */
.v2-seite main .com-text__inner [style*="text-align: center"], .v2-seite main .com-text__inner [style*="text-align:center"] { text-align: left !important; }
/* N-16 Beitrags- und Themenkarten: Pfeil am Titel zeigt, dass die ganze Karte ein Link ist (wie bei den Teaser-Karten) */
/* Pfeil bleibt mit dem letzten Wort in der Zeile (inline statt inline-block: das geschützte Leerzeichen bindet) */
.v2-seite .com-postlinks__title strong::after { content: "\00a0→"; color: var(--ee-rot); font-weight: 400; display: inline; }
.v2-seite .com-postlinks__preview:hover .com-postlinks__title { color: var(--ee-rot) !important; }
/* N-09 Beratungspakete vergleichbar: Häkchen links, nicht enthaltene Leistungen erkennbar (grau, Strich, für
Bildschirmleser „nicht enthalten“), empfohlenes Paket hervorgehoben (die Seite nennt die Empfehlung bereits im Text) */
.v2-seite .by-servicepackage__body__service { gap: var(--s-3); }
.v2-seite .by-servicepackage__body__service__feature { flex: 1 1 auto; min-width: 0; }
.v2-seite .by-servicepackage__body__service__checkmark { order: -1; flex: none; width: 1.3rem; }
.v2-seite .by-servicepackage__body__service__checkmark .fa { display: none; }
.v2-seite .by-servicepackage__body__service__checkmark::before {
content: "" / "nicht enthalten"; display: block; width: 1.3rem; height: 1.3rem; margin-top: .2em; border-radius: 50%;
background: var(--ee-grau-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717171' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") no-repeat center / .8rem; }
.v2-seite .by-servicepackage__body__service__checkmark:has(.fa-check)::before {
content: "" / "enthalten"; background-color: var(--ee-gruen);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: .85rem; }
.v2-seite .by-servicepackage__body__service:not(:has(.fa-check)) .by-servicepackage__body__service__feature { color: var(--c-text-2); }
html[lang^="en"] .v2-seite .by-servicepackage__body__service__checkmark::before { content: "" / "not included"; }
html[lang^="en"] .v2-seite .by-servicepackage__body__service__checkmark:has(.fa-check)::before { content: "" / "included"; }
/* Paket-Hilfe „Welches Paket passt zu uns?“ (E1-7, Einstieg::paketHilfe): drei Ja/Nein-Fragen, Empfehlung per CSS (:has),
ohne Skript, nichts wird gesendet. Regel: F1 und F2 nein → Basic; F1 oder F2 ja, F3 nein → Top; F3 ja → Premium. */
.v2-seite .z-pakethilfe { margin-top: var(--s-6); }
.v2-seite .z-pakethilfe > * { max-width: 52rem; margin-inline: auto; }
.v2-seite .z-pakethilfe { --zp-rand: var(--ee-grau-300); }
.v2-seite .z-pakethilfe__titel { margin-block: 0; font-size: var(--fs-h3, 1.375rem); font-weight: 600; line-height: 1.3; color: var(--c-text); }
.v2-seite .z-pakethilfe__einleitung { margin-block: var(--s-2) var(--s-4); color: var(--c-text-2); }
.v2-seite .z-pakethilfe__fragen { display: grid; gap: var(--s-3); padding: var(--s-4); background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.v2-seite .z-pakethilfe__frage { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--s-2); }
.v2-seite .z-pakethilfe__frage + .z-pakethilfe__frage { padding-top: var(--s-3); border-top: 1px solid var(--c-linie); }
.v2-seite .z-pakethilfe__frage legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s-2); border: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--c-text); display: flex; gap: var(--s-2); align-items: baseline; }
.v2-seite .z-pakethilfe__nr { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ee-grau-100); font-size: .875rem; color: var(--ee-rot); }
.v2-seite .z-pakethilfe__wahl { clear: both; display: flex; gap: var(--s-2); }
.v2-seite .z-pakethilfe__wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.v2-seite .z-pakethilfe__wahl label { display: inline-grid; place-items: center; min-width: 6.5rem; min-height: 44px; margin: 0; padding: 0 var(--s-4); border: 1.5px solid var(--zp-rand); border-radius: var(--radius-pill); background: #fff; font-weight: 600; cursor: pointer; }
.v2-seite .z-pakethilfe__wahl label:hover { border-color: var(--ee-rot); }
.v2-seite .z-pakethilfe__wahl input:checked + label { border-color: var(--ee-rot); background: var(--ee-rot); color: #fff; }
.v2-seite .z-pakethilfe__wahl input:focus-visible + label { outline: 3px solid var(--ee-text, #191919); outline-offset: 2px; }
.v2-seite .z-pakethilfe__ergebnisse { margin: 0; } /* kein Platzhaltertext mehr (Inhaber 09.10.2026): Ergebnis erscheint erst nach den drei Antworten */
.v2-seite .z-pakethilfe__ergebnis { display: none; margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border: 2px solid var(--ee-rot); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten); }
.v2-seite .z-pakethilfe__ergebnis p { margin: 0 0 var(--s-3); }
.v2-seite .z-pakethilfe__empfehlung { font-size: 1.125rem; }
.v2-seite .z-pakethilfe__empfehlung strong { color: var(--ee-rot); }
.v2-seite .z-pakethilfe__empfehlung span { color: var(--c-text-2); font-size: 1rem; }
.v2-seite .z-pakethilfe__hinweis { font-weight: 600; }
.v2-seite .z-pakethilfe:has(#zp-f1-nein:checked):has(#zp-f2-nein:checked):has(#zp-f3-nein:checked) .z-pakethilfe__ergebnis--basic,
.v2-seite .z-pakethilfe:has(#zp-f1-ja:checked):has([name="zp-f2"]:checked):has(#zp-f3-nein:checked) .z-pakethilfe__ergebnis--top,
.v2-seite .z-pakethilfe:has([name="zp-f1"]:checked):has(#zp-f2-ja:checked):has(#zp-f3-nein:checked) .z-pakethilfe__ergebnis--top,
.v2-seite .z-pakethilfe:has([name="zp-f1"]:checked):has([name="zp-f2"]:checked):has(#zp-f3-ja:checked) .z-pakethilfe__ergebnis--premium { display: block; }
.v2-seite .by-servicepackage.highlight { position: relative; border: 2px solid var(--ee-rot); box-shadow: var(--schatten-hoch); }
.v2-seite .by-servicepackage.highlight::before { content: "Empfehlung"; position: absolute; top: -.85rem; left: var(--s-5); padding: 2px var(--s-3); border-radius: var(--radius-pill);
background: var(--ee-rot); color: #fff; font-size: var(--fs-klein); font-weight: 600; line-height: 1.5; }
html[lang^="en"] .v2-seite .by-servicepackage.highlight::before { content: "Recommended"; }
.v2-seite .com-servicepackage__inner { padding-top: var(--s-3); }
.v2-seite .by-servicepackage__header__headline { font-size: var(--fs-h3); font-weight: 600; }
/* N-10 Sprungmarken „Direkt zu Ihrem Bundesland“ über Tabellen mit Bundesland-Spalte (js/v2/fuehrung.js) */
.v2-seite .v2-sprung { margin: 0 0 var(--s-5); }
.v2-seite .v2-sprung__titel { font-weight: 600; margin: 0 0 var(--s-2); }
.v2-seite .v2-sprung ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.v2-seite .v2-sprung li { margin: 0; }
.v2-seite main .v2-sprung a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--ee-grau-300); border-radius: var(--radius-pill);
background: #fff; color: var(--c-text) !important; text-decoration: none !important; font-size: .9375rem; }
.v2-seite main .v2-sprung a:hover { border-color: var(--ee-rot); color: var(--ee-rot) !important; }
.v2-seite .com-table__row:target, .v2-seite .com-table__row.v2-ziel { outline: 2px solid var(--ee-rot) !important; outline-offset: -2px; }
/* N-02 Rechner Schritt 5: Ergebnistabelle über die volle Breite und mit Summe auch auf dem Handy
(der Textbaustein machte die Tabelle zum wischbaren Block; das alte CSS blendet Summen-Spalte und Gesamtsumme < 480 px aus) */
.v2-seite #elterngeld-summary-table { display: table; width: 100%; overflow: visible; }
@media (max-width: 30rem) {
.v2-seite #elterngeld-summary-table thead tr:last-child th:last-of-type, .v2-seite #elterngeld-summary-table tbody tr td:last-of-type { display: table-cell; }
.v2-seite #elterngeld-summary-table tfoot { display: table-footer-group; }
.v2-seite #elterngeld-summary-table td, .v2-seite #elterngeld-summary-table th { font-size: 14px; padding: 10px 4px; }
}
.v2-seite #elterngeld-summary-table tfoot td { font-weight: 600; }
/* N-08 Brotkrumen nah an der Überschrift (bisher 48 px Handy / 90 px Desktop Abstand) */
.v2-brotkrumen + main > .by-content-area:first-child:not(.content-bg-gray):not(.content-bg-secondary) { padding-top: clamp(1rem, .6rem + 1.6vw, 2rem); }
/* Rückfrage-Kasten unter dem Buchungsformular („Sie sind sich unsicher …“): linksbündig an der Kante wie alle Kästen */
.v2-seite .quote-container { max-width: var(--lesebreite); margin: var(--s-6) 0 0 !important; padding: 0 !important; float: none; width: auto; border: 0 !important; box-shadow: none !important; background: none !important; }
.v2-seite .quote-container .quote { text-align: left !important; margin: 0 !important; padding: var(--s-5) !important; background: var(--ee-grau-100); border: 1px solid var(--c-linie); border-radius: var(--radius); box-shadow: none; }
.v2-seite .quote-container .quote p, .v2-seite .quote-container .quote * { text-align: left !important; }
/* ---------- Ratgeber-Seitenleiste (Klickseite U-09, public/js/v2/seitenleiste.js) ----------
Ab 80rem: Artikel in der linken Spalte (alle Bausteine), rechts 17rem Leiste mit Kapiteln und Rechner-Kasten.
Gleiche linke Kante wie überall; die Kapitel-Liste im Artikel steht dann nur noch in der Leiste. */
.v2-seitenleiste { display: none; }
@media (min-width: 80rem) {
body.v2-mit-seitenleiste main .by-section { padding-right: calc(var(--rand) + 17rem + var(--s-7)); }
body.v2-mit-seitenleiste main .by-section .by-section { padding-right: 0; }
body.v2-mit-seitenleiste main .com-ankernavi { display: none; }
body:is(.v2-mit-seitenleiste, .v2-mit-seitenleiste-teil) .v2-seitenleiste {
display: flex; flex-direction: column; gap: 0; position: fixed; z-index: 40; top: 96px; width: 17rem;
right: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
font-family: var(--font); font-size: .9375rem; line-height: 1.4; color: var(--c-text); }
}
.v2-seitenleiste__titel { margin: 0 0 var(--s-2); font-size: var(--fs-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2); }
.v2-seitenleiste__kapitel { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-linie); }
.v2-seitenleiste__kapitel li { margin: 0; }
.v2-seitenleiste__kapitel a { display: block; padding: 6px 0 6px var(--s-4); margin-left: -2px; border-left: 2px solid transparent; color: var(--c-text-2); text-decoration: none; }
.v2-seitenleiste__kapitel a:hover { color: var(--ee-rot); }
.v2-seitenleiste__kapitel a[aria-current] { color: var(--c-text); font-weight: 600; border-left-color: var(--ee-rot); }
.v2-seitenleiste__rechner { margin-top: var(--s-5); padding: var(--s-4); background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.v2-seitenleiste__rechner p { margin: 0 0 var(--s-3); font-weight: 600; }
.v2-seitenleiste__rechner .v2-btn { width: 100%; white-space: normal; text-align: center; color: #fff; }
/* =====================================================================
Seitenkonzept 10/2026 (EE/14_design/seitenkonzept_2026-10.md) – gilt für alle CMS-Seiten im neuen Design.
SK-8 Knöpfe in drei Stufen, SK-9 eine Kartenform für alle Kachel-Bausteine (Reihen ohne Lücken, Einzelkachel als
Querkarte). Einstiegsseiten zusätzlich: css/v2/einstieg.css.
===================================================================== */
:root { --karte-radius: 20px; --karte-schatten: 0 1px 2px rgba(25,25,25,.05), 0 8px 24px -6px rgba(25,25,25,.10); --karte-schatten-hoch: 0 2px 4px rgba(25,25,25,.06), 0 20px 44px -12px rgba(25,25,25,.18); }
/* SK-8: CMS-Knöpfe wie .v2-btn (rahmen.css): Hauptaktion rot gefüllt, zweite Wahl weiß mit grauem Rand, 52 px */
.v2-seite main .by-button, .v2-seite main .by-button-secondary, .v2-seite main .btn, .v2-seite .com-button__wrapper > a { min-height: 52px; padding: 0 1.6rem; }
.v2-seite main .by-button-secondary:not(.by-link-item), .v2-seite main .btn-secondary { background: #fff; color: var(--ee-text) !important; border: 1.5px solid var(--ee-grau-300); }
.v2-seite main .by-button-secondary:not(.by-link-item):hover, .v2-seite main .btn-secondary:hover { background: #fff; color: var(--ee-text) !important; border-color: var(--ee-text); }
.v2-seite main .v2-btn--primaer, .v2-seite main .by-button, .v2-seite .com-button__wrapper > a:not(.by-button-secondary):not(.btn-secondary) { box-shadow: 0 8px 18px -8px rgba(189,49,34,.6); }
.v2-seite main .v2-btn--primaer { transition: background-color .15s, box-shadow .15s, transform .15s; }
.v2-seite main .v2-btn--primaer:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .v2-seite main .v2-btn--primaer:hover { transform: none; } }
/* SK-9: eine Karte für Teaser-Raster, Beitragskacheln und Drei-Spalten (Bild oben, Titel, kurzer Text, Link) */
.v2-seite main :is(.com-teaserbox-grid__single, .com-postlinks__preview, .com-three-cols__col, .com-teaserbox__inner) {
position: relative; background: #fff; border: 1px solid var(--c-linie); border-radius: var(--karte-radius); box-shadow: var(--karte-schatten);
overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.v2-seite main :is(.com-teaserbox-grid__single, .com-postlinks__preview, .com-three-cols__col) { display: flex; flex-direction: column; padding: 0; }
/* ganze Karte ist ein Link → hebt sich beim Überfahren leicht an */
.v2-seite main :is(.com-teaserbox-grid__single.by-link-wrapper, .com-postlinks__preview):hover { box-shadow: var(--karte-schatten-hoch); transform: translateY(-2px); border-color: var(--ee-grau-300); }
.v2-seite main .com-three-cols__col:hover { box-shadow: var(--karte-schatten-hoch); }
@media (prefers-reduced-motion: reduce) { .v2-seite main :is(.com-teaserbox-grid__single, .com-postlinks__preview):hover { transform: none; } }
.v2-seite .com-teaserbox-grid__inner, .v2-seite .com-postlinks__inner, .v2-seite .com-three-cols__wrapper { gap: var(--s-5); align-items: stretch; }
/* Drei-Spalten-Karte: Bild randlos oben, Inhalte mit Innenabstand */
.v2-seite main .com-three-cols__col > :is(.by-section, h2, h3, h4, p) { padding-inline: var(--s-5); }
.v2-seite main .com-three-cols__col > :is(.by-section, h2, h3, h4, p):first-child:not(.com-image) { margin-top: var(--s-5); }
.v2-seite main .com-three-cols__col > .by-section + .by-section { margin-top: var(--s-3); }
.v2-seite main .com-three-cols__col > :is(.by-section, h2, h3, h4, p):last-child { padding-bottom: var(--s-5); }
.v2-seite main .com-three-cols__col > .com-image:first-child { padding: 0; margin: 0 0 var(--s-2); }
.v2-seite main .com-three-cols__col > .com-image:first-child img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 0; } /* viele CMS-Bilder 2:1 mit Bildtext – nicht beschneiden */
.v2-seite main .com-three-cols__col > .com-image:first-child picture { border-radius: 0; }
.v2-seite main .com-three-cols__col .com-headline { text-align: left !important; }
.v2-seite main .com-three-cols__col .com-headline :is(h2, h3, h4) { font-size: var(--fs-h3); margin: 0; }
.v2-seite main .com-three-cols__col .com-text p { color: var(--ee-grau-800); font-size: 1rem; line-height: 1.6; }
.v2-seite main .com-three-cols__col .com-linklist__list { grid-template-columns: minmax(0, 1fr); }
.v2-seite main .com-three-cols__col .com-linklist__list__item__link { font-size: 1rem; min-height: 48px; }
.v2-seite main .com-three-cols__col:not(:has(img, p, a, li, h2, h3, h4)) { display: none; }
/* Textbausteine mit Kartenstil („Hintergrund sekundär“, Rahmentext) in einer Spalte von drei Spalten: die Spalte ist selbst die Karte; eine zweite
graue Karte darin lag versetzt (nur links eingerückt, rechts bündig bis über den Rand) und war je Spalte unterschiedlich hoch (z. B. Still-Beschäftigungsverbot). */
.v2-seite main .com-three-cols__col .com-text__inner:is(.content-bg-secondary, .bordered-text) { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.v2-seite main .com-three-cols__col > .by-section.com-text { padding-inline: var(--s-5); }
/* Teaser-Raster: Bild oben (16:10), Text, Link unten bündig */
.v2-seite main .com-teaserbox-grid__single__image { order: -1; margin: 0; }
.v2-seite main .com-teaserbox-grid__single__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.v2-seite main .com-teaserbox-grid__single__content { padding: var(--s-5); }
/* Beitragskacheln: Bild 3:2, eine Kachel allein = Querkarte, vier Kacheln = eine Reihe */
.v2-seite main .com-postlinks__preview__thumb, .v2-seite main .com-postlinks__preview img { aspect-ratio: 3 / 2 !important; }
.v2-seite main .com-postlinks__title { font-size: var(--fs-h4); font-weight: 600; }
@media (min-width: 48rem) {
.v2-seite main .com-postlinks__inner:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }
.v2-seite main .com-postlinks__inner > .com-postlinks__preview:only-child { flex-direction: row; align-items: center; }
.v2-seite main .com-postlinks__inner > .com-postlinks__preview:only-child > :first-child { flex: 0 0 42%; align-self: stretch; }
.v2-seite main .com-postlinks__inner > .com-postlinks__preview:only-child .com-postlinks__preview__content { padding: var(--s-6); }
}
@media (min-width: 64rem) {
.v2-seite main :is(.com-teaserbox-grid__inner, .com-postlinks__inner):has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* Fristenrechner: Erläuterung, was das Ergebnis bedeutet (Seitenkonzept SK-5) */
.v2-seite .z-frist-erklaerung { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); background: var(--ee-grau-100); border-left: 4px solid var(--ee-rot); border-radius: var(--radius-s); font-size: .9375rem; line-height: 1.55; color: var(--ee-grau-800); }
/* ---------- Elterngeldrechner-Seite kompakt (Seitenkonzept SK-7 „kompakt“, Einstieg::rechnerSeite) ----------
Reihenfolge der Überschriften und alle Texte bleiben; die Teile vor dem großen Rechner brauchen weniger Höhe:
Kapitel-Liste als Sprung-Knöpfe, ab Tablet quer Einleitung links und Video rechts, „Wer kann …“ als Dreierreihe,
Schnellrechner als kompakte Karte. */
/* (!important: stärker als die allgemeinen Abschnittsabstände nach grauen Abschnitten) */
.v2-rechnerseite main .by-content-area.z-rechner-vorspann { padding-block: var(--s-6) !important; }
.v2-rechnerseite main .by-content-area.z-rechner-vorspann:first-child { padding-top: var(--s-4) !important; }
.v2-rechnerseite main .by-content-area.z-rechner-bereich { padding-top: var(--s-6) !important; }
.v2-rechnerseite main .z-rechner-vorspann .com-text__inner p { margin-bottom: var(--s-3); }
.v2-rechnerseite main .z-rechner-vorspann .com-video__container { max-height: 56vw; }
.v2-rechnerseite main .z-rechner-vorspann .com-ankernavi__menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 0; background: none; border: 0; }
.v2-rechnerseite main .z-rechner-vorspann .com-ankernavi__menu__headline { margin: 0 var(--s-1) 0 0; font-size: var(--fs-klein); font-weight: 400; color: var(--c-text-2); }
.v2-rechnerseite main .z-rechner-vorspann .com-ankernavi__menu__item__link { min-height: 48px; padding: 0 var(--s-3); border: 1.5px solid var(--ee-grau-300); border-radius: var(--radius-pill); background: #fff; font-size: .9375rem; font-weight: 600; }
.v2-rechnerseite main .z-rechner-vorspann .com-ankernavi__menu__item__link:hover { border-color: var(--ee-rot); }
.v2-rechnerseite main .z-rechner-vorspann .com-ankernavi__menu__item__link::before { margin-right: var(--s-1); }
.v2-rechnerseite main .z-rechner-vorspann .com-headline + .by-section:not(.com-headline) { margin-top: var(--s-3); }
.v2-rechnerseite main .z-rechner-vorspann .by-section:not(.com-headline) + .com-headline { margin-top: var(--s-6); }
.v2-rechnerseite main .z-rechner-vorspann .com-two-cols__wrapper { gap: var(--s-5); }
/* Schnellrechner als kompakte Karte */
.v2-rechnerseite main .z-rechner-vorspann #schnellrechner-container { padding: var(--s-4) var(--s-5); gap: var(--s-4); }
.v2-rechnerseite main .z-rechner-vorspann #schnellrechner-container h3 { margin-bottom: var(--s-2); }
.v2-rechnerseite main .z-rechner-vorspann #short-calculator-info { padding: var(--s-3) var(--s-4); font-size: .875rem; line-height: 1.5; }
.v2-rechnerseite main .z-rechner-vorspann .com-ankernavi__menu__item { font-size: .875rem; }
.v2-rechnerseite main .z-rechner-vorspann #short-calculator-info p { margin: 0 0 var(--s-2); }
@media (min-width: 64rem) {
.v2-rechnerseite main .z-rechner-kopf { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: var(--s-8); row-gap: var(--s-3); align-items: start;
padding-inline: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); }
.v2-rechnerseite main .z-rechner-kopf > .by-section, .v2-rechnerseite main .z-rechner-video .com-two-cols__col__left > .by-section { grid-column: 1; max-width: none; padding-inline: 0; margin: 0; }
.v2-rechnerseite main .z-rechner-kopf > .by-section > * { max-width: none; }
.v2-rechnerseite main .z-rechner-kopf > .z-rechner-video, .v2-rechnerseite main .z-rechner-video > .com-two-cols__wrapper, .v2-rechnerseite main .z-rechner-video .com-two-cols__col__left { display: contents; }
.v2-rechnerseite main .z-rechner-video .com-two-cols__col__right { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.v2-rechnerseite main .z-rechner-kopf > .z-rechner-breit { grid-column: 1 / -1; }
.v2-rechnerseite main .z-rechner-kopf > .com-headline.z-rechner-breit { margin-top: var(--s-5); }
.v2-rechnerseite main .z-rechner-spalten .com-text__inner { column-count: 3; column-gap: var(--s-7); }
.v2-rechnerseite main .z-rechner-vorspann #schnellrechner-container { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}
/* Handy: lange Erklärtexte vor dem großen Rechner eingeklappt (E1-3, Einstieg::rechnerSeite, Knopf: js/v2/fuehrung.js).
Der Text steht vollständig im HTML; drei Zeilen bleiben sichtbar, „Weiterlesen“ liegt auf der ausgeblendeten letzten Zeile.
Ohne JavaScript (scripting: none) und ab 40rem ungekürzt und ohne Knopf. */
.v2-seite .z-weiterlesen__leiste { display: none; }
@media (max-width: 39.99rem) and (scripting: enabled) {
.v2-rechnerseite main .z-weiterlesen:not(.z-weiterlesen--offen) .com-text__inner,
.v2-rechnerseite main #short-calculator-info-text.z-weiterlesen:not(.z-weiterlesen--offen) {
max-height: 5em; max-height: 3lh; overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); }
.v2-rechnerseite main #short-calculator-info-text.z-weiterlesen:not(.z-weiterlesen--offen) { max-height: 7.6em; }
.v2-rechnerseite main .z-weiterlesen__leiste { display: flex; justify-content: flex-end; position: relative; margin-top: -2.2rem !important; }
.v2-rechnerseite main .z-weiterlesen--offen + .z-weiterlesen__leiste { margin-top: var(--s-2) !important; }
.v2-rechnerseite main .z-weiterlesen__knopf { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
border: 1.5px solid var(--ee-grau-300); border-radius: var(--radius-pill); background: #fff; color: var(--ee-rot); font: 600 .9375rem/1.2 var(--font); cursor: pointer;
box-shadow: 0 0 0 6px rgba(255,255,255,.85); }
.v2-rechnerseite main .z-weiterlesen__knopf::after { content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.15em) rotate(45deg); }
.v2-rechnerseite main .z-weiterlesen__knopf[aria-expanded="true"]::after { transform: translateY(.15em) rotate(-135deg); }
.v2-rechnerseite main #short-calculator-info .z-weiterlesen__leiste { padding-inline: 0; margin-bottom: var(--s-2); }
/* Ergebnis des Schnellrechners da: die Erklärung blendet short-calculator.js aus – dann auch kein Knopf */
.v2-rechnerseite main #short-calculator-info.bg-success .z-weiterlesen__leiste { display: none; }
}
/* Ratgeberteil nach dem Rechner: Kapitel-Leiste rechts (seitenleiste.js, body.v2-mit-seitenleiste-teil); sie erscheint erst,
wenn der Rechner nach oben aus dem Bild gescrollt ist – der Rechner selbst behält die volle Breite */
@media (min-width: 80rem) {
body.v2-mit-seitenleiste-teil main .z-rechner-ratgeber > .by-section { padding-right: calc(var(--rand) + 17rem + var(--s-7)); }
body.v2-mit-seitenleiste-teil main .z-rechner-ratgeber .com-ankernavi { display: none; }
body.v2-mit-seitenleiste-teil .v2-seitenleiste { transition: opacity .2s, visibility .2s; }
body.v2-mit-seitenleiste-teil .v2-seitenleiste.v2-seitenleiste--verborgen { visibility: hidden; opacity: 0; }
}
@media (min-width: 80rem) and (prefers-reduced-motion: reduce) { body.v2-mit-seitenleiste-teil .v2-seitenleiste { transition: none; } }
/* =====================================================================
Layoutprüfung aller öffentlichen Seiten (Oktober 2026, EE/14_design/werkzeuge/layoutpruefung.mjs)
Befunde je Gruppe: docs/cms.md Abschnitt 9e. Nur Darstellung – Texte, Überschriften und Links unverändert.
===================================================================== */
/* Lange zusammengesetzte Wörter (z. B. „Partnerschaftsbonusmonate“, „Mutterschaftsgeldangelegenheiten“) ragten in schmalen
Kacheln und Spalten aus der Karte bzw. über den Bildschirmrand oder brachen ohne Trennstrich mitten im Wort um.
Überschriften und Texte in Karten/Spalten trennen jetzt nach Silben (lang="de-DE"/"en-US" am ); nur Wörter ab
16 Zeichen, mindestens 8 Zeichen vor und nach dem Trennstrich (sonst trennt der Browser auch Wörter, die in die nächste
Zeile passen würden, z. B. „Basisel-terngeld“). Fließtext in der Lesespalte bleibt ungetrennt. */
.v2-seite main :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4),
.v2-seite main :is(.com-teaserbox-grid__single, .com-teaserbox__inner, .com-postlinks__preview, .com-three-cols__col,
.by-servicepackage, .com-tips-grid__list, .com-table, .com-linklist, .com-filelist, .z-karte, .z-schnell, .z-weg, .v2-finder, .com-calculators),
.v2-seite main :is(.com-teaserbox-grid__single, .com-teaserbox__inner, .com-postlinks__preview, .com-three-cols__col,
.by-servicepackage, .com-tips-grid__list, .com-table, .com-linklist, .com-filelist, .z-karte, .z-schnell, .z-weg, .v2-finder, .com-calculators) * {
-webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 8 8; -webkit-hyphenate-limit-before: 8; -webkit-hyphenate-limit-after: 8; overflow-wrap: break-word; }
/* Laravel-Inhalte im Textbaustein (Beratungsbuchung, Registrierung): das bisherige app.css setzt min-width: 320px –
auf dem Handy (360 px abzüglich Rand) war das Formular dadurch breiter als der Bildschirm (Seite seitlich verschiebbar). */
.v2-seite .by-laravel-content { min-width: 0; }
/* Leer-Absätze aus WordPress („
“ als Abstandhalter) entfernt CmsPageRenderer im neuen Design; leere ohne Inhalt ebenso ausblenden */
.v2-seite main p:empty { display: none; }
/* Kartenbilder im Seitenverhältnis der CMS-Bilder (2:1, WordPress-Größen 300×150 … 1280×640) statt 3:2 bzw. 16:10:
vorher wurden die Fotos seitlich bzw. oben/unten beschnitten – eingebrannte Bildtitel und Logos waren angeschnitten
(„Kindergeld Auszahlung…“, rotes Logo am rechten Rand). Querkarten (einzelne Kachel) behalten die volle Kartenhöhe. */
.v2-seite main .com-postlinks__preview__thumb, .v2-seite main .com-postlinks__preview img,
.v2-seite main .com-teaserbox-grid__single__image:not(.v2-bild--ganz) img { aspect-ratio: 2 / 1 !important; }
@media (min-width: 48rem) {
.v2-seite main .com-postlinks__inner > .com-postlinks__preview:only-child :is(.com-postlinks__preview__thumb, img) { aspect-ratio: auto !important; height: 100%; min-height: 14rem; }
}
/* Zwei Spalten „Inhalte strecken“ (content-stretch-items, z. B. Hinweis-Kästen der Familienkassen-Seiten): gleich hohe Kästen */
@media (min-width: 48rem) {
.v2-seite .com-two-cols__wrapper.content-stretch-items { align-items: stretch; }
.v2-seite .com-two-cols__wrapper.content-stretch-items > .com-two-cols__col:has(> .by-section:only-child) { display: flex; flex-direction: column; }
.v2-seite .com-two-cols__wrapper.content-stretch-items > .com-two-cols__col > .by-section:only-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.v2-seite .com-two-cols__wrapper.content-stretch-items > .com-two-cols__col > .by-section:only-child > :only-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.v2-seite .com-two-cols__wrapper.content-stretch-items > .com-two-cols__col > .by-section:only-child > :only-child > :only-child { flex: 1 1 auto; }
}
/* Ungerade Kachelzahl in zwei Spalten (Tablet): die letzte Kachel stand allein mit einer Lücke daneben – sie geht über
die ganze Breite, mit Bild als Querkarte (Bild links, Text rechts). */
@media (min-width: 40rem) and (max-width: 63.99rem) {
.v2-seite main :is(.com-teaserbox-grid__inner, .com-postlinks__inner) > :last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
.v2-seite main :is(.com-teaserbox-grid__inner, .com-postlinks__inner) > :last-child:nth-child(odd):not(:only-child):has(img, .com-postlinks__preview__thumb) {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.v2-seite main :is(.com-teaserbox-grid__inner, .com-postlinks__inner) > :last-child:nth-child(odd):not(:only-child) :is(.com-teaserbox-grid__single__image, picture) { height: 100%; }
.v2-seite main :is(.com-teaserbox-grid__inner, .com-postlinks__inner) > :last-child:nth-child(odd):not(:only-child) :is(img, .com-postlinks__preview__thumb) { aspect-ratio: auto !important; height: 100%; min-height: 12rem; object-fit: cover; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
.v2-seite main .com-three-cols__wrapper > .com-three-cols__col:last-child:nth-child(odd):not(:only-child),
.v2-seite main .com-tips-grid__list > li:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
}
/* Eigenes HTML in Textbausteinen mit Flex-Zeilen (z. B. Zeitleiste auf /unternehmen/felix-boehme): lange Wörter schoben
die Spalte über den Bildschirmrand – Flex-Kinder dürfen schmaler werden als ihr längstes Wort. */
.v2-seite .com-text__inner [style*="flex"] > * { min-width: 0; }
.v2-seite .com-text__inner [style*="flex"] > * * { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 8 8; }
/* Dateiliste: das Raster hatte keine Spaltenbreite – ein langes Wort („Krankenkassenbescheinigung“) machte die Spalte breiter
als den Bildschirm (Download-Symbol abgeschnitten). */
.v2-seite .by-filelist { grid-template-columns: minmax(0, 1fr); }
/* Bootstrap-Raster in Textbausteinen (z. B. „container rechner-free“ auf /en/calculator): .container hat ab 768 px eine feste
Breite (750 px) und ragte über den Rand; eine einzelne halbe Spalte ließ die rechte Hälfte leer. */
.v2-seite .com-text__inner > .container { width: auto; max-width: 100%; padding-inline: 0; margin-inline: 0; }
.v2-seite .com-text__inner > .container > .row { margin-inline: 0; }
.v2-seite .com-text__inner > .container > .row > [class*="col-"]:only-child { width: auto; float: none; padding-inline: 0; }
.v2-seite .com-text__inner [style*="space-between"] { flex-wrap: wrap; }
.v2-seite .com-text__inner span[style*="inline-block"] { max-width: 100%; overflow-wrap: anywhere; }
/* Hellgraue Inline-Farben aus eigenem HTML (#999/#aaa, z. B. Datumsangaben der Zeitleiste) hatten zu wenig Kontrast (2,8:1) */
.v2-seite .com-text__inner [style*="color: #999"], .v2-seite .com-text__inner [style*="color:#999"],
.v2-seite .com-text__inner [style*="color: #aaa"], .v2-seite .com-text__inner [style*="color:#aaa"] { color: var(--c-text-2) !important; }
/* Zwei Spalten mit je einem gerahmten Textkasten (z. B. „Ablauf einer Elterngeldberatung“ 1. / 2.): gleich hohe Kästen */
@media (min-width: 48rem) {
.v2-seite .com-two-cols__wrapper:has(> .com-two-cols__col > .com-text:only-child > .com-text__wrapper > :is(.bordered-text, .content-bg-secondary)) { align-items: stretch; }
.v2-seite .com-two-cols__col:has(> .com-text:only-child > .com-text__wrapper > :is(.bordered-text, .content-bg-secondary)) { display: flex; flex-direction: column; }
.v2-seite .com-two-cols__col > .com-text:only-child:has(> .com-text__wrapper > :is(.bordered-text, .content-bg-secondary)) { flex: 1 1 auto; display: flex; flex-direction: column; }
.v2-seite .com-two-cols__col > .com-text:only-child > .com-text__wrapper:has(> :is(.bordered-text, .content-bg-secondary)) { flex: 1 1 auto; display: flex; flex-direction: column; }
.v2-seite .com-two-cols__col > .com-text:only-child > .com-text__wrapper > :is(.bordered-text, .content-bg-secondary) { flex: 1 1 auto; }
}
/* Kapitel-Liste (Inhaltsverzeichnis): mehrzeilige Einträge liefen ohne Abstand ineinander, der Pfeil stand mittig –
jetzt Abstand je Eintrag und Pfeil an der ersten Zeile (nicht die Sprung-Knöpfe auf /rechner) */
.v2-seite main .com-ankernavi__menu__item__link:not(.z-rechner-vorspann *) { align-items: flex-start; padding-block: var(--s-2); line-height: 1.4; }
.v2-seite main .com-ankernavi__menu__item__link::before { flex: none; }
/* Produktbilder der Website (Software-/Rechner-Aufnahmen in selbst gezeichneten Rahmen, public/img/…) in Querkarten nie
beschneiden: der Ausschnitt schnitt Geräte und Hinweis-Chip ab („…fen, Antrag als PDF erstellen“). Ganz zeigen, mittig. */
.v2-seite main .com-teaserbox__inner__image img:is([src*="/img/rechner/v2/"], [src*="/img/software/v2/"], [src*="/img/seitenkonzept/"]) { object-fit: contain !important; object-position: center !important; }
/* Querkarten mit Bild und viel Text (z. B. Linkliste „Weitere Familienkassen im Bundesland“): das Bild wurde auf die volle
Kartenhöhe gestreckt und zu einem schmalen Streifen beschnitten (24 % des Motivs). Höchstens 5:4 hoch (mind. 40 % des
2:1-Motivs sichtbar), bei längeren Karten mittig. */
@media (min-width: 48rem) {
.v2-seite main .com-teaserbox__inner.has-image > .com-teaserbox__inner__image { container-type: inline-size; display: flex; flex-direction: column; justify-content: center; }
.v2-seite main .com-teaserbox__inner.has-image > .com-teaserbox__inner__image picture { display: block; height: 100%; max-height: 125cqi; }
.v2-seite main .com-teaserbox__inner.has-image > .com-teaserbox__inner__image img { max-height: 125cqi; }
}
/* Termin-Finder (js/v2/termin-finder.js) direkt im Abschnitt statt in einem Baustein: stand ohne Seitenrand an der
Bildschirmkante (Handy: Rahmen angeschnitten; Desktop: links vor der gemeinsamen Kante) – jetzt an der Inhaltskante */
.v2-seite main .by-content-area > .v2-finder { width: auto; margin-left: calc(max(0px, (100% - var(--breite)) / 2) + var(--rand)); margin-right: var(--rand); }
/* ProvenExpert-Siegel im Fließtext (z. B. /beratung): mittig, mit Luft nach oben und unten (Inhaber 09.10.2026) */
.v2-seite main p:has(> a > img[src*="provenexpert-siegel"]) { text-align: center !important; max-width: none !important; margin: var(--s-6) auto var(--s-5) !important; }
.v2-seite main a > img[src*="provenexpert-siegel"] { display: inline-block; width: 180px; max-width: 60vw; height: auto; border-radius: 6px; box-shadow: var(--schatten); }