/*
 * ============================================================
 * STYLE BASE — Technische Basis
 * Nicht vom Nutzer änderbar.
 *
 * Enthält:
 *   - Navbar Basis (Toggle, Collapse, Brand, Mobile)
 *   - Content-Wrapper Basis
 *   - Bild-Filter Utilities
 *
 * Ladereihenfolge:
 *   1. generator (CSS-Variablen :root)
 *   2. style-base.css  ← diese Datei
 *   3. style-<layout>.css (oder custom.css)
 * ============================================================
 */


/* ── Skip-Navigation ───────────────────────────────────────── */

.skip-nav {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: #000;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
}

.skip-nav:focus {
    top: 0;
}


/* ── Content-Wrapper ───────────────────────────────────────── */

html {
    background-color: var(--color-surface, #ffffff);
}

body {
    background-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-inner ul,
.text-inner ol {
    list-style-position: outside;
    padding-left: 30px;
    margin-left: 0;
}

.block-card-icon-wrap {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .75rem;
}

/* Karten-Tags (docs/spec_card_element_tags.md) — el.tags, aktuell immer 1
   Eintrag. Neutraler, geteilter Stil (wie .block-card-icon-wrap) statt
   pro-Theme-Farbe, um keine 13 Theme-CSS-Dateien anfassen zu müssen. */
.block-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .75rem; }
.block-card-tags.text-center { justify-content: center; }
.block-card-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 10px; background: rgba(0,0,0,.06);
}


/* ── Navbar Basis ──────────────────────────────────────────── */

#sub .navbar {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Navbar Container: Brand links, Links rechts */
#sub .navbar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0 1.5rem;
    gap: 1rem;
}

/* Brand: nimmt nur so viel Platz wie nötig, aber mindestens genug */
#sub .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;  /* darf schrumpfen aber nicht wachsen */
    min-width: 0;
    text-decoration: none;
}

/* Brand-Text: immer einzeilig, nie abgeschnitten auf Desktop */
#sub .brand-text {
    white-space: nowrap;
    overflow: visible;
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Logo — M ist der Default */
#sub .brand-logo {
    height: 44px;
    max-height: 44px;
    width: auto;
    flex-shrink: 0;
}
#sub .navbar-size-s .brand-logo {
    height: 32px;
    max-height: 32px;
}
#sub .navbar-size-l .brand-logo {
    height: 60px;
    max-height: 60px;
}

/* Vertikales Navbar-Padding läuft gegenläufig zur Logo-Größe, damit die
   Navbar-Gesamthöhe nicht 1:1 mit dem Logo mitwächst — Bootstrap-Default
   (0.5rem/0.5rem = 16px pro Seite) wäre für alle drei Stufen gleich und
   würde ein größeres Logo direkt in eine höhere Navbar übersetzen. */
#sub .navbar {
    padding-top: 6px;
    padding-bottom: 6px;
}
#sub .navbar-size-s {
    padding-top: 10px;
    padding-bottom: 10px;
}
#sub .navbar-size-l {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Toggler: ganz rechts */
#sub .navbar-toggler {
    flex-shrink: 0;
    margin-left: auto;
}

/* Nav-Links: nehmen den restlichen Platz */
#sub .navbar-collapse {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

#sub .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

#sub .navbar-toggler {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Logo vorhanden */
#sub .has-logo .brand-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.25rem;
}

/* Kein Logo */
#sub .no-logo .brand-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
}


/* ── Navbar Mobile Collapse ────────────────────────────────── */

@media (max-width: 991.98px) {
    /* Auf Mobile: Brand + Toggler IMMER nebeneinander, kein Umbruch */
    #sub .navbar-container {
        flex-wrap: nowrap;
        padding: 0 1.5rem;
        align-items: center;
    }

    #sub .navbar-brand {
        flex: 1 1 auto;
    }

    /* Brand begrenzen damit Toggler in derselben Zeile bleibt */
    #sub .navbar-brand {
        flex: 0 1 auto;
        max-width: calc(100% - 60px); /* 60px = Toggler-Breite */
    }

    /* Toggler sichtbar */
    #sub .navbar-toggler {
        display: block;
        flex-shrink: 0;
        border-color: var(--color-primary-text, rgba(255,255,255,0.5)) !important;
    }

    /* Hamburger icon Farbe passend zur Navbar-Textfarbe */
    #sub .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255%2C255%2C255%2C0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Collapse klappt unter der Navbar auf — absolut positioniert.
       flex-direction: column ergänzt (Basis-Regel oben ist row) — sonst
       konkurrieren Haupt-Navigation und Sprachumschalter (zwei
       .navbar-nav-Listen, jede für sich schon column) nebeneinander um
       denselben width:100%-Anspruch in einer Reihe, werden gestaucht und
       landen nebeneinander statt gestapelt (Haupt-Navigation links,
       Sprachumschalter rechts) — vorbestehender Bug, unabhängig vom
       Sprachumschalter selbst erst beim genauen Hinsehen aufgefallen. */
    #sub .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--navbar-bg, var(--color-primary, #ffffff));
        padding: 0.5rem 1rem 1rem;
        z-index: 999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    }

    #sub .navbar-collapse:not(.show) {
        display: none;
    }

    #sub .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }

    /* Mobile Nav Links — identisch zur Desktop Navbar */
    #sub .navbar-collapse .nav-link {
        color: var(--color-primary-text) !important;
        width: 100%;
        border-radius: 6px;
        padding: 8px 12px !important;
    }

    #sub .navbar-collapse .nav-link:hover {
        background-color: rgba(255,255,255,0.12) !important;
        opacity: 1;
    }

    #sub .navbar-collapse .nav-link.active {
        background-color: rgba(255,255,255,0.22) !important;
    }

    /* Brand-Text auf Mobile: ausblenden wenn ein Logo existiert — das Logo
       trägt dann allein die Markenidentität (Platzgrund: Logo + Name
       teilen sich sonst denselben knappen Rest-Platz neben dem Toggler,
       der Name wird oft mitten im Wort abgeschnitten). Ohne Logo bleibt
       der Name der einzige Marken-Anker, wird nur bei Bedarf gekürzt. */
    #sub .has-logo .brand-text {
        display: none;
    }
    #sub .no-logo .brand-text {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 58vw;
    }

    /* Sprachumschalter von der Seiten-Navigation abgrenzen — teilt sich
       sonst dieselbe .navbar-nav-Optik und wirkt wie ein weiterer
       Menüpunkt statt einer eigenen Funktion (der Bootstrap-Abstand
       ms-lg-3 wirkt nur ab 992px, auf Mobile fehlt jede Abgrenzung). */
    #sub .lang-switcher {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
}

@media (min-width: 992px) {
    /* Toggler verstecken */
    #sub .navbar-toggler {
        display: none;
    }

    /* Collapse immer sichtbar */
    #sub .navbar-collapse {
        display: flex !important;
    }
}


/* ── Bild-Filter Utilities ─────────────────────────────────── */

#sub .theme-img {
    filter:
        hue-rotate(var(--img-hue, 0deg))
        saturate(var(--img-saturation, 100%))
        brightness(var(--img-brightness, 100%))
        contrast(var(--img-contrast, 100%));
}


/* ── Process Timeline ─────────────────────────────────────────── */

#sub .process-timeline {
    position: relative;
    margin-left: 1rem;
}

#sub .process-timeline::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--accent, var(--color-primary));
    opacity: 0.2;
}

#sub .process-step {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 3rem;
}

#sub .process-marker {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    z-index: 2;
    background-color: var(--accent, var(--color-primary));
    color: var(--accent-text, var(--color-primary-text));
    transition: all 0.3s ease;
}

#sub .process-step:hover .process-marker {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

#sub .process-content {
    margin-left: 1.5rem;
    flex: 1;
}

#sub .process-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent, var(--color-primary));
}

#sub .process-content p {
    margin: 0;
    opacity: 0.85;
}

#sub .process-step:last-child {
    margin-bottom: 0;
}

/* ── Person-Karte (craft/templates/blocks/person.html) ──────────────────
   Rundes Foto, Link statt Button, zwei Anordnungen (Hochformat gestapelt /
   Querformat über layout=text-left|text-right). Theme-unabhängig über
   dieselbe --accent/--color-primary-Kette wie .process-marker oben, statt
   eine eigene Regel pro Theme-CSS-Datei zu duplizieren. */
#sub .person-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

#sub .person-card-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.04);
}

#sub .person-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

#sub .person-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

/* .block-eyebrow ist von Haus aus inline-block (schrumpft auf den Text) —
   als direktes Kind eines Flex-Containers ohne align-self wird es aber auf
   die volle Breite gestreckt (Flex-Default align-items:stretch) und wirkt
   dadurch wie ein Balken statt wie die Pillenform der anderen Eyebrows auf
   der Seite (Nutzer-Fund 2026-09-16). */
#sub .person-card-body .block-eyebrow {
    align-self: center;
}
#sub .person-card--split .person-card-body .block-eyebrow {
    align-self: flex-start;
}

#sub .person-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    color: var(--accent, var(--color-primary));
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    width: fit-content;
}

#sub .person-card-link:hover {
    opacity: 0.75;
}

/* Querformat: Foto neben statt über dem Text — sinnvoll wenn die schmale
   Hochformat-Karte zu viel Leerfläche neben sich lässt (Nutzer-Fund
   2026-09-16). person-card--reverse spiegelt für layout='text-right'. */
#sub .person-card--split {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1.75rem;
}

#sub .person-card--split.person-card--reverse {
    flex-direction: row-reverse;
}

@media (max-width: 767px) {
    #sub .person-card--split {
        flex-direction: column;
        text-align: center;
    }
}


/* ── Toggle-Button (Collapsible Blocks) ────────────────────── */

#sub .toggle-btn {
    font-size: 1.4rem;
    cursor: pointer;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
}

#sub .toggle-btn .icon-minus { display: none; }
#sub .toggle-btn .icon-plus  { display: inline-block; }

#sub .toggle-btn.open .icon-plus  { display: none; }
#sub .toggle-btn.open .icon-minus { display: inline-block; }


/* ── Hintergrundbild-Basis ─────────────────────────────────── */

#sub .has-bg-image {
    background-image: var(--block-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay-Schicht (wird von hero-inner-bg genutzt) — dunkler Tint auf
   Hero-/Hintergrundbildern. position:relative (nicht absolute) ist
   bewusst so: erzeugt einen eigenen Stacking-Context, siehe
   craft/templates/blocks/_hero_termin_modal_include.html für den dadurch
   bereits gefixten Modal-Klick-Bug. */
#sub .overlay {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
}

#sub .hero-inner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ── Block Split Layout ────────────────────────────────────── */
/*
 * Strukturklassen für das Split-Layout.
 * text-left / text-right steuern wo der Fließtext steht.
 * Layout-unabhängig — gehört zur Basis.
 */

#sub .block-split-inner.text-left .block-split-compact { order: 2; }
#sub .block-split-inner.text-left .block-split-wide    { order: 1; }
#sub .block-split-inner.text-right .block-split-compact { order: 1; }
#sub .block-split-inner.text-right .block-split-wide   { order: 2; }

/* ── Block Comparison Table ────────────────────────────────── */
/*
 * Struktur für den comparison-Block (block_comparison.html).
 * Layout-unabhängig — gehört zur Basis, wie Block Split Layout oben.
 */

#sub .block-comparison-wrap {
    width: 100%;
    overflow-x: auto;
}
#sub .block-comparison-table {
    width: 100%;
    /* separate + spacing 0 statt collapse: border-radius auf <th>/<td>
       wird von der Spec bei border-collapse:collapse ignoriert (die
       hervorgehobene Spalte blieb deshalb eckig, unabhängig vom Layout —
       Fund 2026-08-14). spacing:0 hält die Zellen weiterhin ohne Lücke
       aneinander, wie bei collapse. */
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    /* Ab Tablet/Desktop: gleich breite Spalten statt "so breit wie der
       längste Inhalt" — sonst zwingt eine einzelne lange Zeile jede Spalte
       (und damit die ganze Tabelle) in die Breite (Fund 2026-08-14:
       Scrollbalken bei normalen KI-Texten, nicht nur bei Extremfällen).
       Erfordert white-space: normal unten, sonst hat table-layout:fixed
       keine Wirkung auf die Höhe. Auf Mobil bewusst NICHT (siehe
       Media-Query unten) — bei wenig Breite pro Spalte würde jedes Wort
       einzeln umbrechen, dort ist Scrollen mit lesbarer Spaltenbreite die
       bessere Lösung (Nutzer-Vorgabe 2026-08-14). */
    table-layout: fixed;
}
#sub .block-comparison-table th,
#sub .block-comparison-table td {
    padding: .65rem 1rem;
    /* currentColor statt festem rgba(0,0,0,.1): comparison kann in jeder
       .theme-X-Sektion landen, auch dunklen (z. B. digital/genuss theme-2)
       — dort wäre ein schwarzbasierter Rahmen praktisch unsichtbar.
       currentColor greift automatisch die für die Sektion bereits korrekt
       gesetzte Textfarbe auf (Fund 2026-08-14, Nutzer-Hinweis "Tabelle
       muss zum jeweiligen Layout passen"). */
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    white-space: normal;
    overflow-wrap: break-word;
}
@media (max-width: 767.98px) {
    /* Mobil: zurück auf die alte Scroll-Lösung statt gleich breiter Spalten
       — bei wenig verfügbarer Breite pro Spalte bricht sonst jedes Wort
       einzeln um (Nutzer-Vorgabe 2026-08-14). block-comparison-wrap hat
       bereits overflow-x: auto, das reicht dafür aus. */
    #sub .block-comparison-table {
        table-layout: auto;
    }
    #sub .block-comparison-table th,
    #sub .block-comparison-table td {
        white-space: nowrap;
    }
}
#sub .block-comparison-table thead {
    /* Dezenter Hintergrund-Farbton auf der ganzen Kopfzeile, damit sie sich
       strukturell abhebt — unabhängig davon, ob eine einzelne Zelle per
       value_styles zufällig auch fett ist (Fund 2026-08-17, Nutzer-
       Feedback: reines font-weight allein war kein verlässliches
       Unterscheidungsmerkmal, da Zellen ebenfalls fett sein können).
       currentColor statt --accent: malt sich unter der eigenen Produkt-
       Spalte weg (die hat ihren eigenen --accent-Hintergrund direkt auf
       der <th>, siehe .block-comparison-own — Element-Hintergründe
       überdecken den <thead>-Hintergrund an der eigenen Zellenfläche ganz
       normal, kein Selektor-Konflikt). */
    background-color: color-mix(in srgb, currentColor 6%, transparent);
}
#sub .block-comparison-table thead th {
    /* Größer als Body-Text (Fund 2026-08-17, Korrektur des vorherigen
       Versuchs: klein+Versalien+gedämpfte Opacity ging im Vergleich zu den
       Produktnamen/Zellinhalten unter, gerade weil font-weight allein kein
       verlässliches Signal ist). Header sind hier Produkt-/Plannamen, keine
       generischen Feldbezeichner — sollen dominieren, nicht zurücktreten. */
    font-size: 1.1rem;
    font-weight: 700;
}
#sub .block-comparison-col-icon {
    display: inline-flex;
    align-items: center;
    margin-right: .35em;
    vertical-align: -2px;
}
#sub .block-comparison-bold {
    font-weight: 700;
}
#sub .block-comparison-italic {
    font-style: italic;
}
#sub .block-comparison-own {
    /* Kontrast von farbigem Text auf beliebigem Sektions-Hintergrund ist
       nirgends garantiert (kein Kontrast-Check im Theming-System, Fund
       2026-08-14) — deshalb Hervorhebung über Rahmen + leichte
       Hintergrundabhebung statt Textfarbe. Der Zellentext bleibt in der
       normalen, bereits kontrastsicheren Farbe. KEIN pauschales font-weight
       mehr (Fund 2026-08-17): überschrieb sonst die bewusste, zellenweise
       normal/bold/italic-Wahl aus value_styles — wer eine Zelle in der
       eigenen Spalte explizit auf "normal" stellte, sah trotzdem fett.
       Bold/Italic kommt jetzt ausschließlich aus value_styles (.block-
       comparison-bold/-italic), die Spalten-Hervorhebung nur noch aus
       Rahmen/Hintergrund/Schatten.
       --accent statt --color-primary: pro .theme-X-Sektion definiert und in
       jedem Layout konsistent vorhanden (auch bei "Individuelles Design",
       das eine von --color-primary unabhängige Palette mitbringt) — siehe
       docs/craft_css_architecture.md. */
    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
    border-left: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    /* --comparison-radius/-shadow: optionale, layout-eigene Tokens (nur
       genuss/flow definieren sie aktuell — Fallback 0/none für alle
       anderen Layouts, deren .block-table-card ebenfalls eckig/schattenlos
       ist). Damit folgt die Hervorhebung demselben "Box"-Charakter wie die
       bestehenden Preis-Karten pro Layout, statt ein eigenes, layout-
       fremdes Aussehen zu erfinden (Fund 2026-08-14, u. a. "flow" mit
       aktiviertem Rundungs-/Schatten-Regler). */
    box-shadow: var(--comparison-shadow, none);
}
#sub .block-comparison-table thead th.block-comparison-own {
    border-top: 2px solid var(--accent);
    border-top-left-radius: var(--comparison-radius, 0);
    border-top-right-radius: var(--comparison-radius, 0);
}
#sub .block-comparison-table tbody tr:last-child .block-comparison-own {
    border-bottom: 2px solid var(--accent);
    border-bottom-left-radius: var(--comparison-radius, 0);
    border-bottom-right-radius: var(--comparison-radius, 0);
}
#sub .card.text-content.block-comparison-own {
    /* Card-Ansicht (docs/spec_comparison_costs_unification.md): kein
       Tabellen-Zellenraster, deshalb Rahmen auf allen vier Seiten und
       voller Radius statt der eckenweisen Aufteilung oben, die nur wegen
       border-collapse-Mechanik in der Tabelle nötig war.
       !important + 3 Klassen (.card.text-content.block-comparison-own,
       nicht nur .card.block-comparison-own) nötig (Fund 2026-08-17, echter
       Bug: Stern war aktiv, Hervorhebung optisch komplett unsichtbar):
       "Individuelle Designs" (tenant-custom.css) stylen `.card` generisch
       MIT `!important` — border/border-radius/box-shadow über die 2-Klassen-
       Regel `#sub .card {...}`, background-color zusätzlich nochmal über
       `#sub .theme-1 .card, #sub .theme-2 .card {...}` (ebenfalls 2 Klassen +
       !important, aber SPÄTER im Stylesheet als die border-Regel). Bei
       gleicher Spezifität UND beide !important entscheidet die
       Ladereihenfolge — tenant-custom.css lädt komplett nach style-base.css
       und würde eine bloß 2-klassige Gegenregel hier also überstimmen. Die
       dritte, ohnehin auf jeder comparison-Card vorhandene Klasse
       `.text-content` hebt die Spezifität zuverlässig darüber, unabhängig
       von Ladereihenfolge oder welche der beiden tenant-custom-Regeln
       gerade greift. background-color/box-shadow hier wiederholt (nicht nur
       in .block-comparison-own oben), aus demselben Grund. */
    background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    border: 1px solid var(--accent) !important;
    border-radius: var(--comparison-radius, 0) !important;
    box-shadow: var(--comparison-shadow, none) !important;
}
#sub ul.block-comparison-card-list {
    /* `ul.` (Typselektor) statt nur `.block-comparison-card-list` nötig
       (Fund 2026-08-17, echter Bug: Zeilen deutlich eingerückter als bei
       normalen Cards): fonts.css definiert `#sub .text-content ul { margin:
       0 0 1rem 1.5rem; ... }` für Bullet-Listen in Trix-Rich-Text-Feldern —
       diese Karte trägt (wie jede Card) selbst die Klasse `.text-content`,
       die Prosa-Listen-Regel hat dadurch mit 1 Typselektor mehr höhere
       Spezifität als eine reine Klassen-Regel und gewann trotz späterer
       Ladereihenfolge. Der zusätzliche `ul`-Typselektor hier gleicht die
       Spezifität aus, die spätere Position in style-base.css entscheidet
       den Rest zugunsten dieser Regel. */
    margin: 0;
    padding: 0;
}
#sub .block-comparison-card-list li {
    font-size: .95rem;
}
#sub .block-comparison-card-text {
    /* Spalten-Freitext (docs/spec_comparison_costs_unification.md,
       column_text) — bei costs der Preis, bei comparison optional eine
       Tagline. Bewusst groß/fett statt gedämpft: die Preis-Darstellung ist
       der treibende Anwendungsfall, eine Tagline verträgt fette Schrift
       eher als ein Preis eine klein/blasse Darstellung verträgt (Fund
       2026-08-17). Nutzer-Feedback 2026-08-17: erste Größe (1.5rem) wirkte
       neben dem Kartentitel (bei "Individuellem Design" ca. 1.15rem) noch
       nicht wie ein echtes Preisschild — deutlich größer nachgezogen.
       calc(...*var(--f-type-scale,1)) statt fixem rem: "Individuelle
       Designs" skalieren ihre gesamte Typografie über --f-type-scale
       (Nutzer-Textgrößen-Regler) — ein fester rem-Wert würde bei anderer
       Skalierung inkonsistent zum Rest der Seite wirken. Fallback ,1 greift
       für alle Layouts ohne dieses Custom-Property. */
    font-size: calc(2.25rem * var(--f-type-scale, 1));
    font-weight: 700;
    margin: .25rem 0 .75rem;
}
#sub .block-comparison-highlight-row {
    /* Tabellen-Pendant zu .block-comparison-card-text — eigene Zeile direkt
       unter dem Header statt Teil von `elements` (vorher: elements[0] mit
       erzwungenem value_styles[0]='bold', keine echte Struktur). Moderater
       skaliert als die Card-Variante (Tabellenzelle statt Hero-Preisschild),
       aber aus demselben Grund ebenfalls über --f-type-scale. */
    font-size: calc(1.3rem * var(--f-type-scale, 1));
    font-weight: 700;
}
#sub .block-comparison-icon {
    display: inline-flex;
    align-items: center;
}
#sub .block-comparison-icon-yes {
    color: #198754;
}
#sub .block-comparison-icon-no {
    color: #dc3545;
}

/* ── Anfrage-Modal ──────────────────────────────────────────
 * Vorher Inline-<style> in blocks/_anfrage_modal_styles.html, per
 * {% include %} in page_form.html/leadmagnet_form.html/
 * _event_register_modal.html/_termin_booking_modal.html eingebunden —
 * bei jedem Seitenaufruf neu mitgeschickt statt einmal gecacht. */
#sub .anfrage-modal-content { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
#sub .anfrage-preview-banner { background: #fff3cd; color: #856404; font-size: 0.8rem; font-weight: 500; padding: 8px 16px; text-align: center; border-bottom: 1px solid #ffc107; }
#sub .anfrage-modal-header { background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 1.25rem 1.5rem; align-items: flex-start; }
#sub .anfrage-modal-title { font-size: 1.1rem; font-weight: 600; color: #212529; margin-bottom: 2px; }
#sub .anfrage-modal-intro { font-size: 0.85rem; color: #6c757d; }
#sub .anfrage-modal-body { padding: 1.5rem; }
#sub .anfrage-label { display: block; font-size: 0.8rem; font-weight: 500; color: #495057; margin-bottom: 4px; }
#sub .anfrage-required { color: #dc3545; margin-left: 1px; }
#sub .anfrage-input { border: 1px solid #dee2e6; border-radius: 8px; font-size: 0.9rem; padding: 8px 12px; transition: border-color 0.15s, box-shadow 0.15s; background: #fff; }
#sub .anfrage-input:focus { border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(13,110,253,0.1); outline: none; }
#sub .anfrage-textarea { resize: vertical; min-height: 100px; }
#sub .anfrage-captcha-input { max-width: 250px; }
#sub .anfrage-check { padding-left: 1.75rem; }
#sub .anfrage-check-label { font-size: 0.82rem; color: #6c757d; }
#sub .anfrage-link { color: inherit; text-decoration: underline; }
#sub .anfrage-modal-footer { background: #f8f9fa; border-top: 1px solid #e9ecef; padding: 1rem 1.5rem; gap: 8px; }
#sub .anfrage-btn-secondary { border: 1px solid #dee2e6; background: #fff; color: #495057; border-radius: 8px; padding: 8px 18px; font-size: 0.875rem; font-weight: 500; }
#sub .anfrage-btn-secondary:hover { background: #f8f9fa; }
#sub .anfrage-btn-primary { background: var(--s-accent, var(--accent, var(--color-primary, #212529))); color: var(--color-primary-text, #fff); border: none; border-radius: 8px; padding: 8px 22px; font-size: 0.875rem; font-weight: 500; font-family: inherit; transition: background 0.15s; }
#sub .anfrage-btn-primary:hover:not(:disabled) { filter: brightness(0.9); color: var(--color-primary-text, #fff); }
#sub .anfrage-btn-primary:disabled { opacity: 0.65; cursor: not-allowed; }
#sub .anfrage-success { text-align: center; padding: 2rem 1rem; }
#sub .anfrage-success-icon { width: 56px; height: 56px; border-radius: 50%; background: #d1e7dd; color: #0f5132; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1rem; }
#sub .anfrage-success h6 { font-size: 1rem; font-weight: 600; color: #212529; margin-bottom: 4px; }
#sub .anfrage-success p { font-size: 0.875rem; color: #6c757d; margin: 0; }

/* ── Block-Alternating ──────────────────────────────────────
 * Zickzack-Reihen (Bild|Text, nächste Zeile Text|Bild), Bild wechselt pro
 * Element die Seite. Radius/Overflow des Bildes kommt aus
 * style-<layout>.css (#sub .block-alt-photo, an den jeweiligen Card-Radius
 * des Themes angeglichen) — hier nur die theme-unabhängige Struktur. */
#sub .block-alt {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}
#sub .block-alt-row {
    /* Grid statt Flex-Basis-% (Fund: eine leere .block-alt-photo kollabierte
       bei flex-basis:45% auf 0 Breite, weil ein Flex-Item ohne Inhalt trotz
       gesetzter basis in manchen Browsern am min-content misst) — zwei
       feste Grid-Spalten reservieren die Bildspalte auch ganz ohne Bild. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2.5rem;
}
/* grid-row: 1 auf beiden ist nötig, nicht nur Kosmetik (Fund: ohne das
   landete der Text beim --end-Wechsel in einer zweiten, impliziten Zeile
   statt neben dem Bild) — die Foto-Spalte (DOM-erstes Kind) sitzt dabei in
   der jeweils LETZTEN Grid-Spalte, der Auto-Placement-Cursor rutscht danach
   eine Zeile weiter, bevor er die explizite Spalte 1 fürs Textfeld sucht. */
#sub .block-alt-row .block-alt-photo { grid-column: 1; grid-row: 1; }
#sub .block-alt-row .block-alt-body  { grid-column: 2; grid-row: 1; }
#sub .block-alt-row.block-alt-row--end .block-alt-photo { grid-column: 2; grid-row: 1; }
#sub .block-alt-row.block-alt-row--end .block-alt-body  { grid-column: 1; grid-row: 1; }
#sub .block-alt-photo:has(img) {
    /* Nur MIT Bild eine feste Bildhöhe erzwingen — sonst reserviert eine
       leere Zeile eine bildgroße leere Fläche statt sich auf die Texthöhe
       zu setzen (Fund: wirkte wie ein riesiger Abstand zwischen den
       Zeilen). Die Grid-Spalte selbst (Text alterniert links/rechts)
       bleibt auch ohne Bild erhalten, nur ohne die feste Höhe. */
    aspect-ratio: 4 / 3;
}
#sub .block-alt-photo-img {
    display: block;
    width: 100%;
    height: 100%;
}
#sub .block-alt-body {
    min-width: 0;
}
@media (max-width: 768px) {
    #sub .block-alt {
        gap: 3rem;
    }
    #sub .block-alt-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    #sub .block-alt-row .block-alt-photo,
    #sub .block-alt-row.block-alt-row--end .block-alt-photo {
        grid-column: 1;
        grid-row: 1;
    }
    #sub .block-alt-row .block-alt-body,
    #sub .block-alt-row.block-alt-row--end .block-alt-body {
        grid-column: 1;
        grid-row: 2;
    }
}


/* ── Theme-Baukasten: Kartenstile (docs/spec_themes_baukasten.md,
 *    spec_themes_in_flow.md) ────────────────────────────────────────────────
 * Jeder Theme-Slot hat neben der Flächenfarbe einen `card_style`. 'karten'
 * bekommt keine Regel: die layout-eigene .card-CSS IST der 'karten'-Look. Die
 * vier anderen Stile hier sind Overrides für Box-Behandlung (Rahmen / Schatten
 * / Radius / Gruppierung).
 *
 * Spezifität: Layouts stylen `.card` mit `!important` über `#sub .card` bzw.
 * `#sub .theme-N .card` (1,2,1). Die Regeln hier tragen deshalb den
 * Typselektor `section` mit — `#sub section.text-block.block-cardstyle-<stil>
 * .card` (1,3,1) schlägt das.
 *
 * Jedes Layout-Stylesheet setzt im `#sub {}`-Block:
 *   --theme-card-radius   Karten-Radius des Layouts (Preset = Literal,
 *                         flow = var(--f-r-md), folgt dem "Rundung"-Regler)
 *   --theme-contrast-bg   Fläche der `kontrast`-Karte = Markenfarbe
 *                         (Preset var(--color-primary), flow var(--f-primary))
 *   --theme-contrast-fg   Text darauf (auto-kontrastierendes -text-Pendant)
 * Ohne diese Vars (theoretisch) greift der 2. var()-Parameter als Fallback.
 * --theme-border / --theme-card-bg sind noch nicht pro Layout gesetzt →
 * currentColor-basierter Fallback. */

/* Gemeinsame Basis: alle vier Nicht-karten-Stile treffen dieselben Elemente
   (Karten-Grid `.card`, Split-Layout `.block-split-element`, FAQ).

   Hover: jeder Stil bekommt eine LEICHTE Reaktion (Nutzer-Wunsch — auch diese
   Stile sollen sich "anfassbar" anfühlen, nur dezenter als der Standard-
   'karten'-Look). 'karten' selbst behält die layout-eigene `.card:hover`-Regel.
   Gilt für Presets UND flow (style-base.css ist immer geladen). */
#sub section.text-block[class*="block-cardstyle-"] .card,
#sub section.text-block[class*="block-cardstyle-"] .block-split-element {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
/* flächig / flächig + Rahmen: sanfter Lift. */
#sub section.text-block.block-cardstyle-flaechig .card:hover,
#sub section.text-block.block-cardstyle-flaechig .block-split-element:hover,
#sub section.text-block.block-cardstyle-flaechig_rahmen .card:hover,
#sub section.text-block.block-cardstyle-flaechig_rahmen .block-split-element:hover {
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}
/* flächig + Rahmen: Rahmen zieht zusätzlich zur Markenfarbe. */
#sub section.text-block.block-cardstyle-flaechig_rahmen .card:hover,
#sub section.text-block.block-cardstyle-flaechig_rahmen .block-split-element:hover {
    border-color: var(--theme-contrast-bg, currentColor) !important;
}
/* kontrast (CTA-Karte): Lift + etwas kräftigerer Schatten. */
#sub section.text-block.block-cardstyle-kontrast .card:hover,
#sub section.text-block.block-cardstyle-kontrast .block-split-element:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .45) !important;
}
/* panel: einzelne Zelle würde aus overflow:hidden ragen — die verbundene
   Gruppe hebt sich als Ganzes. */
#sub section.text-block.block-cardstyle-panel .row.layout-2,
#sub section.text-block.block-cardstyle-panel .row.layout-3,
#sub section.text-block.block-cardstyle-panel .row.layout-4 {
    transition: transform .18s ease, box-shadow .18s ease;
}
#sub section.text-block.block-cardstyle-panel .row.layout-2:hover,
#sub section.text-block.block-cardstyle-panel .row.layout-3:hover,
#sub section.text-block.block-cardstyle-panel .row.layout-4:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -18px rgba(0, 0, 0, .28);
}
#sub section.text-block.block-cardstyle-panel .card:hover,
#sub section.text-block.block-cardstyle-panel .block-split-element:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ── flächig — randlos, keine Füllung, kein Schatten ────────────────────── */
#sub section.text-block.block-cardstyle-flaechig .card,
#sub section.text-block.block-cardstyle-flaechig .block-split-element {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#sub section.text-block.block-cardstyle-flaechig .sub-accordion .accordion-item {
    border: 0 !important;
    border-bottom: 1px solid var(--theme-border, color-mix(in srgb, currentColor 16%, transparent)) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* ── flächig + Rahmen — nur Outline ────────────────────────────────────── */
#sub section.text-block.block-cardstyle-flaechig_rahmen .card,
#sub section.text-block.block-cardstyle-flaechig_rahmen .block-split-element {
    background: transparent !important;
    border: 1px solid var(--theme-border, color-mix(in srgb, currentColor 16%, transparent)) !important;
    box-shadow: none !important;
}
#sub section.text-block.block-cardstyle-flaechig_rahmen .sub-accordion .accordion-item {
    border: 1px solid var(--theme-border, color-mix(in srgb, currentColor 16%, transparent)) !important;
    border-radius: var(--theme-card-radius, 12px) !important;
    background: transparent !important;
}

/* ── kontrast — Karte zur Fläche invertiert ────────────────────────────── */
#sub section.text-block.block-cardstyle-kontrast .card,
#sub section.text-block.block-cardstyle-kontrast .block-split-element {
    background: var(--theme-contrast-bg, #1e2733) !important;
    border: 0 !important;
    border-radius: var(--theme-card-radius, 12px) !important;
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .35) !important;
}
#sub section.text-block.block-cardstyle-kontrast .card,
#sub section.text-block.block-cardstyle-kontrast .card :where(h1, h2, h3, h4, p, li, strong, span),
#sub section.text-block.block-cardstyle-kontrast .block-split-element,
#sub section.text-block.block-cardstyle-kontrast .block-split-element :where(p, strong, span),
#sub section.text-block.block-cardstyle-kontrast .block-split-element-title {
    color: var(--theme-contrast-fg, #edf0f4) !important;
}
/* Icon-Kreis (.block-card-icon-wrap, s. oben in dieser Datei) bekommt sonst
   IMMER --f-primary als Icon-Farbe (style-flow.css) und einen fast
   unsichtbaren dunklen Kreis-Hintergrund (rgba(0,0,0,.06)) — auf der
   dunklen Kontrast-Fläche verschwimmen beide mit dem Hintergrund
   (Nutzer-Fund: "Icon nicht erkennbar, Hintergrund und Icon sind dunkel").
   Heller Kreis + kontrastsichere Text-Farbe (das Icon-SVG nutzt
   stroke="currentColor", s. lucide_tags.py), analog zum Rest der Karte. */
#sub section.text-block.block-cardstyle-kontrast .block-card-icon-wrap {
    background: rgba(255, 255, 255, .14) !important;
    color: var(--theme-contrast-fg, #edf0f4) !important;
}
#sub section.text-block.block-cardstyle-kontrast .sub-accordion .accordion-item {
    border: 0 !important;
    border-radius: var(--theme-card-radius, 12px) !important;
    background: var(--theme-contrast-bg, #1e2733) !important;
}
#sub section.text-block.block-cardstyle-kontrast .sub-accordion .accordion-item,
#sub section.text-block.block-cardstyle-kontrast .sub-accordion .accordion-button,
#sub section.text-block.block-cardstyle-kontrast .sub-accordion .accordion-body {
    color: var(--theme-contrast-fg, #edf0f4) !important;
}
/* CTA-Button auf der kontrast-Karte (Nutzer-Fund 2026-09-11): .btn-cta ist
   selbst in Markenfarbe (--f-primary bzw. --color-primary) — dieselbe Farbe
   wie --theme-contrast-bg, mit der die Karte gefüllt ist (s. Modulkopf-
   Kommentar oben: "Fläche der kontrast-Karte = Markenfarbe"). Ohne eigene
   Regel verschwindet der Button unsichtbar in der Kartenfläche. Invertiert
   zur Karte (wie die Karte selbst zur Fläche invertiert ist): Button-Fläche
   = --theme-contrast-fg, Button-Text = --theme-contrast-bg. */
/* Person-Karten-Link auf der kontrast-Karte: dieselbe Unsichtbar-Gefahr wie
   beim .btn-cta oben — .person-card-link ist in --accent/--color-primary
   gefärbt, das kann mit --theme-contrast-bg zusammenfallen. Kein
   :where(...)-Fallback nötig, eigene Klasse statt <a> im generischen Text. */
#sub section.text-block.block-cardstyle-kontrast .person-card-link {
    color: var(--theme-contrast-fg, #edf0f4) !important;
}

#sub section.text-block.block-cardstyle-kontrast .card .btn-cta,
#sub section.text-block.block-cardstyle-kontrast .block-split-element .btn-cta {
    background-color: var(--theme-contrast-fg, #edf0f4) !important;
    border-color: var(--theme-contrast-fg, #edf0f4) !important;
    color: var(--theme-contrast-bg, #1e2733) !important;
}

/* ── panel — verbundene Karten: ein Außenrahmen, Haarlinien dazwischen ──── */
#sub section.text-block.block-cardstyle-panel .row.layout-2,
#sub section.text-block.block-cardstyle-panel .row.layout-3,
#sub section.text-block.block-cardstyle-panel .row.layout-4 {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-right: 0;
    margin-left: 0;
    gap: 1px;
    background: var(--theme-border, color-mix(in srgb, currentColor 16%, transparent));
    border: 1px solid var(--theme-border, color-mix(in srgb, currentColor 16%, transparent));
    border-radius: var(--theme-card-radius, 12px);
    overflow: hidden;
}
#sub section.text-block.block-cardstyle-panel .row.layout-2 > [class*="col-"],
#sub section.text-block.block-cardstyle-panel .row.layout-3 > [class*="col-"],
#sub section.text-block.block-cardstyle-panel .row.layout-4 > [class*="col-"] {
    padding: 0 !important;
    margin-bottom: 0 !important;
    flex: 1 1 0 !important;
    max-width: none !important;
}
#sub section.text-block.block-cardstyle-panel .card {
    background: var(--theme-card-bg, color-mix(in srgb, currentColor 6%, transparent)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
}
#sub section.text-block.block-cardstyle-panel .block-split-element {
    background: var(--theme-card-bg, color-mix(in srgb, currentColor 6%, transparent)) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--theme-border, color-mix(in srgb, currentColor 16%, transparent)) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}
#sub section.text-block.block-cardstyle-panel .block-split-element:last-child {
    border-bottom: 0 !important;
}
#sub section.text-block.block-cardstyle-panel .sub-accordion {
    border: 1px solid var(--theme-border, color-mix(in srgb, currentColor 16%, transparent));
    border-radius: var(--theme-card-radius, 12px);
    overflow: hidden;
}
#sub section.text-block.block-cardstyle-panel .sub-accordion .accordion-item {
    border: 0 !important;
    border-bottom: 1px solid var(--theme-border, color-mix(in srgb, currentColor 16%, transparent)) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    background: var(--theme-card-bg, color-mix(in srgb, currentColor 6%, transparent)) !important;
}
#sub section.text-block.block-cardstyle-panel .sub-accordion .accordion-item:last-child {
    border-bottom: 0 !important;
}
@media (max-width: 767.98px) {
    #sub section.text-block.block-cardstyle-panel .row.layout-2 > [class*="col-"],
    #sub section.text-block.block-cardstyle-panel .row.layout-3 > [class*="col-"],
    #sub section.text-block.block-cardstyle-panel .row.layout-4 > [class*="col-"] {
        flex-basis: 100% !important;
    }
    #sub section.text-block.block-cardstyle-flaechig .row > [class*="col-"] {
        margin-bottom: 1.75rem !important;
    }
}