/* ==========================================================================
   Fasten Isarwinkel - Relaunch & CMS
   public/assets/css/app.css

   Frontend-Styles (Heritage-Stil der alten Seite - traditionell, bodenstaendig,
   ruhig, vertrauenswuerdig - modern umgesetzt). Baut auf design-tokens.css
   auf (wird mit geladen, siehe AssetManager::BASE_STYLES).

   KONSOLIDIERTE FASSUNG: enthaelt die A-2-Korrekturen (Akkordeon-Padding,
   Sticky-Summenleiste body.page--booking), den A-3-Appendix (Checkbox &
   klassische Radio-Gruppe des Form-Kits), den C-6b-Appendix (Termin-
   Detailseite, Buchungsformular, mobile Kalkulations-Aufklappung), den
   C-7-Appendix (Kontaktseite, Wartelisten-Sektion), den D-9b-Appendix
   (CMS-Bloecke: textimage-Floats samt Medien-Groessen, CTA-Panel,
   Video-Play-Dreieck, Anreise-Regionen-Snippets), den E-13f-Appendix
   (Startseite: Begruessungs-Zweispalter, Modul-Teaser, Stimmen-Grid;
   Team: bild-zentrierte Portrait-Karten L1, Profil-Zweispalter +
   PERSONENSTRAHL L2), die E-18/E-20-Logo-Korrektur (D107; brand__mark
   72px/auto) samt .button--ghost und Footer-Abschnitt 17 (D108) sowie
   seit FIX-12 (D112) die Karten-Sichtbarkeits-Korrektur in Abschnitt 10:
   .map-canvas erhaelt width:100% (Flex-Kind ohne Breite schrumpfte auf
   0px - die Karte war unsichtbar trotz geladener Kacheln), und die
   Fassade blendet im is-open-Zustand (gesetzt von js/map.js) den
   Poster-Overlay (::after) aus und nimmt die Padding zurueck. Seit E-33
   (D125/D126/D127) zusaetzlich: das zweizeilige Termin-Detail-Grid (Aside
   spannt Text- UND Formular-Zeile, Preisbox sticky ab 900px, Buchungs-
   formular als Panel #buchung statt vollbreitem section--surface-Band,
   Abschnitt 13) sowie die Filterleiste der Termin-Uebersicht mit
   Monatsformular von/bis, 1/2-Personen-Preisschalter und den server-
   seitig vorbereiteten Karten-Preisvarianten (Abschnitt 18). FIX-16
   (D128, 2026-11-11) korrigiert die E-33c-Spaltenzuweisung: Der Aside
   der Termin-Detailseite traegt ab 900px EXPLIZIT grid-column: 2 - die
   Auto-Platzierung des CSS-Grid setzt reihenfeste Items (grid-row)
   VOR vollautomatische Kinden ein und nistete den Aside sonst in die
   breite 1fr-Spalte ein (Preisbox 'riesig' links, Inhalt schmal rechts,
   Nutzer-Befund VP-88b, Abschnitt 13).

   Abschnitte:
     01 Basis & Reset          09 Termin-Listenzeilen, Preisbox, Sticky-Summe
     02 Typografie (Fett!)    10 Karten-Fassade, Video, Hero-Slider, Lightbox
     03 Utilities             11 Bewegung/Print
     04 Buttons & Badges      12 Form-Kit-Ergaenzung (A-3)
     05 Flash                 13 Termin-Detailseite & Buchung (C-6b, E-33c)
     06 Header & Navigation   14 Kontaktseite & Wartelisten-Sektion (C-7)
     07 Formulare             15 CMS-Bloecke (D-9b)
     08 Komponenten           16 Startseite & Team (E-13f)
                               17 Footer (E-18, D108)
                               18 Termin-Uebersicht: Filter & Preisvarianten (E-33)

   KLASSENVERTRAG: Die hier definierten Komponenten-Klassen sind verbindlich
   fuer alle Partials/Block-Templates (Phase D/E) - der Content-Styleguide
   wird ueber Blocktypen + diese Klassen erzwungen (Spec cms_content_blocks).
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 Basis & Reset
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--font-weight-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-brown);
    text-decoration-thickness: from-font;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--color-gold-text);
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Body-Scroll-Zustaende (Slide-Over, Lightbox) */
body.nav-open,
body.lightbox-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   02 Typografie - Fett als EINZIGE Inline-Auszeichnung, CSS-gezaehmt:
   <strong> rendert als goldener Akzentton (abgedunkelt fuer AA);
   ein einheitliches Erscheinungsbild, Missbrauch kann das Layout nicht
   brechen (Spec cms_content_blocks.mini_editor.bold_decision)
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: var(--lh-heading);
    color: var(--color-brown);
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: var(--font-weight-heading-strong); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-md); }

p {
    margin: 0 0 1em;
    max-width: var(--measure);          /* Zeilenlaenge <= 70 Zeichen (WCAG) */
}

b, strong {
    font-weight: var(--font-weight-strong);
    color: var(--color-gold-text);     /* goldener Akzentton (Kontrast #A05F16
                                           bei Implementierung NACHMESSEN -
                                           offener Punkt der Spezifikation) */
}

/* Auf dunklen Flaechen (Footer braun) hebt Gold die Schrift ab */
.site-footer b,
.site-footer strong {
    color: var(--color-gold);
}

ul, ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

/* Prosa-Container: Ausgabeflaeche fuer CMS-Bloecke/Editor-Inhalte (Vertrag
   fuer den BlockRenderer, Phase D) */
.prose > * + * {
    margin-top: 1em;
}

.prose ul,
.prose ol {
    padding-left: 1.4em;
}

/* --------------------------------------------------------------------------
   03 Utilities
   -------------------------------------------------------------------------- */

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--section-y);       /* Desktop 64-96 / Mobil 40-48 */
}

.section--tight {
    padding-block: var(--section-y-tight);
}

.section--surface {
    background: var(--color-surface);
    border-block: 1px solid var(--color-border);
}

/* Sektionskopf: Eyebrow (Versalen-Motiv) + Titel + Einleitung */
.eyebrow {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-gold-text);
    margin-bottom: 0.5rem;
}

.section-head {
    max-width: 70ch;
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.section-head h2 {
    margin-bottom: 0.35em;
}

.page-title {
    margin-bottom: 0.6em;
}

.lead {
    font-size: var(--fs-md);
    color: var(--color-muted);
    max-width: 70ch;
}

.text-muted {
    color: var(--color-muted);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Icon-Basis (helpers.php icon()) */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    vertical-align: -0.28em;
}

/* Barrierefreiheit: Skip-Link + screen-reader-only */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 999;
    background: var(--color-brown);
    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.skip-link:focus {
    top: 1rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   04 Buttons & Badges
   -------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--touch-target);       /* Touch-Targets >= 44px */
    padding: 0.7em 1.5em;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}

/* Primaer: Gold mit dunkelbrauner Schrift (Heritage-Kontrast statt weiss-auf-gold) */
.button--primary {
    background: var(--color-gold);
    color: var(--color-brown-dark);
}

.button--primary:hover {
    background: #C67A20;
    color: var(--color-brown-dark);
}

.button--secondary {
    background: transparent;
    border-color: var(--color-brown);
    color: var(--color-brown);
}

.button--secondary:hover {
    background: rgba(77, 51, 25, 0.06);
    color: var(--color-brown-dark);
}

/* Ghost: transparent mit hellem Rand fuer DUNKLE Flaechen (Footer-CTA
   Newsletter, Abschnitt 17; E-18) */
.button--ghost {
    background: transparent;
    border-color: rgba(246, 238, 227, 0.55);
    color: #F6EEE3;
}

.button--ghost:hover {
    background: rgba(246, 238, 227, 0.12);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.button[disabled],
.button[aria-busy="true"] {
    opacity: 0.65;
    cursor: wait;
}

/* Badges (Spec design_tokens.badges):
   gold = Rabatt/Aufmerksam | teal = freie Plaetze/Warteliste | muted = ausgebucht */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    white-space: nowrap;
}

.badge--gold  { background: var(--badge-gold-bg);  color: var(--badge-gold-text); }
.badge--teal  { background: var(--badge-teal-bg);  color: var(--badge-teal-text); }
.badge--muted { background: var(--badge-muted-bg); color: var(--badge-muted-text); }

/* --------------------------------------------------------------------------
   05 Flash-Nachrichten (partial flash.phtml)
   -------------------------------------------------------------------------- */

.flash-stack {
    max-width: var(--container-max);
    margin: 0 auto var(--space-24);
    padding-inline: var(--gutter);
    display: grid;
    gap: 0.75rem;
}

.flash {
    margin: 0;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid;
    font-size: var(--fs-sm);
}

.flash--success { background: var(--badge-teal-bg);  color: var(--badge-teal-text);  border-color: var(--color-teal); }
.flash--error   { background: #F8EAE4;               color: var(--color-danger);     border-color: var(--color-danger); }
.flash--info    { background: var(--color-surface);  color: var(--color-text);       border-color: var(--color-brown); }
.flash--warning { background: var(--badge-gold-bg);  color: var(--badge-gold-text);  border-color: var(--color-gold-text); }

/* --------------------------------------------------------------------------
   06 Header & Navigation (partial header.phtml)
   -------------------------------------------------------------------------- */

/* Utility-Leiste: persoenliche Telefonnummer, prominent AUCH mobil (Spec phone_cta) */
.utility-bar {
    background: var(--color-brown);
    color: #F6EEE3;
    font-size: var(--fs-sm);
}

.utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.4rem;
}

.utility-bar__tagline {
    margin: 0;
    letter-spacing: 0.02em;
}

.utility-bar__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.utility-bar__phone:hover {
    color: var(--color-gold);
}

.utility-bar__phone .icon {
    color: var(--color-gold);
}

/* Kopfzeile */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__main {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 0.85rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: auto;          /* Navigation nach rechts, Toggle dahinter */
    text-decoration: none;
}

.brand__mark {
    width: 72px;                 /* D107 (E-18; E-20 auf Nutzerwunsch von
                                    48px vergroessert): Vektor-Logo 120x102
                                    proportionssicher (Hoehe auto statt
                                    quadratischer Box, ~61px hoch).
                                    Groesse ausschliesslich HIER feinjustieren. */
    height: auto;
    flex: 0 0 auto;
}

.brand__word {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-brown);
}

/* Burger (nur < 900px sichtbar; Animation zu X via body.nav-open) */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: calc(var(--z-slideover) + 1);  /* ueber dem offenen Panel erreichbar */
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-brown);
    border-radius: 2px;
    position: relative;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

body.nav-open .nav-toggle__bars {
    background: transparent;
}

body.nav-open .nav-toggle__bars::before {
    transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle__bars::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* Slide-Over-Backdrop (von core.js dynamisch eingesetzt) */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(58, 38, 18, 0.5);
    z-index: calc(var(--z-slideover) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Navigation: MOBIL als Slide-Over mit KOMPLETTER Navigation
   (kein Content-Hiding, Spec mobile_rules) */
@media (max-width: 899.98px) {
    .site-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(86vw, 380px);
        background: var(--color-surface);
        z-index: var(--z-slideover);
        transform: translateX(-102%);
        transition: transform var(--transition-base) ease;
        overflow-y: auto;
        padding: 1.25rem 1.5rem 2rem;
        box-shadow: var(--shadow-md);
    }

    body.nav-open .site-nav {
        transform: translateX(0);
    }

    .site-nav__list {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav__link,
    .site-nav__sublink {
        display: block;
        padding: 0.85rem 0.5rem;
        font-size: 1.125rem;
        color: var(--color-text);
        text-decoration: none;
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__link.is-active {
        color: var(--color-gold-text);
        font-weight: 600;
    }

    /* Dropdown im Panel: als aufklappende Liste, nicht ueberlagernd */
    .site-nav__dropdown {
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__sublist {
        position: static;
        box-shadow: none;
        border: 0;
        background: transparent;
        border-radius: 0;
        padding: 0 0 0.5rem 0.9rem;
        margin: 0;
        list-style: none;
    }

    .utility-bar__tagline {
        display: none;              /* Telefonnummer bleibt, Tagline weicht */
    }
}

/* Navigation: DESKTOP (>= 900px) */
@media (min-width: 900px) {
    .nav-toggle,
    .nav-backdrop {
        display: none;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav__link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.55rem 0.8rem;
        color: var(--color-text);
        text-decoration: none;
        font-weight: 500;
    }

    .site-nav__link:hover {
        color: var(--color-brown-dark);
    }

    .site-nav__link.is-active {
        color: var(--color-brown);
        font-weight: 600;
    }

    .site-nav__link.is-active::after {
        content: "";
        position: absolute;
        left: 0.8rem;
        right: 0.8rem;
        bottom: 0.1rem;
        height: 3px;
        background: var(--color-gold);
        border-radius: 2px;
    }

    /* Service-Dropdown (details/summary - ohne JS bedienbar) */
    .site-nav__dropdown {
        position: relative;
    }

    .site-nav__dropdown summary {
        list-style: none;
        cursor: pointer;
    }

    .site-nav__dropdown summary::-webkit-details-marker {
        display: none;
    }

    .icon--chevron {
        transition: transform var(--transition-fast);
    }

    .site-nav__dropdown[open] .icon--chevron {
        transform: rotate(180deg);
    }

    .site-nav__sublist {
        position: absolute;
        top: calc(100% + 0.4rem);
        left: 0;
        min-width: 260px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: 0.5rem 0;
        margin: 0;
        list-style: none;
        z-index: var(--z-nav);
    }

    .site-nav__sublink {
        display: block;
        padding: 0.55rem 1.1rem;
        color: var(--color-text);
        text-decoration: none;
        font-size: var(--fs-sm);
    }

    .site-nav__sublink:hover {
        background: rgba(217, 136, 41, 0.08);
        color: var(--color-brown-dark);
    }

    .site-nav__sublink.is-active {
        color: var(--color-gold-text);
        font-weight: 600;
    }
}

/* Brotkrumen (partial breadcrumbs.phtml) */
.breadcrumbs {
    font-size: var(--fs-sm);
    padding-block: 0.9rem;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    color: var(--color-muted);
    margin-right: 0.3rem;
}

.breadcrumbs__link {
    color: var(--color-muted);
    text-decoration: none;
}

.breadcrumbs__link:hover {
    color: var(--color-gold-text);
}

.breadcrumbs__current {
    color: var(--color-text);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   07 Formulare - KLASSENVERTRAG des Form-Kits (Partials, Phase A-3)
   -------------------------------------------------------------------------- */

.form {
    display: grid;
    gap: var(--space-24);
    max-width: 720px;
}

.form-field {
    display: grid;
    gap: 0.4rem;
}

.form-field__label {
    font-weight: 600;
}

.form-field--required > .form-field__label::after {
    content: " *";
    color: var(--color-gold-text);
}

.form-field__hint {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

/* Eingabeelemente (field-Partial setzt class="input") */
.input {
    width: 100%;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.65em 0.85em;
    min-height: var(--touch-target);
}

textarea.input {
    min-height: 8rem;
    resize: vertical;
}

select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6459' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1.1em;
    padding-right: 2.6rem;
}

.input:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 0;
    border-color: var(--color-teal);
}

.input[aria-invalid="true"] {
    border-color: var(--color-danger);
}

.field-error {
    font-size: var(--fs-sm);
    color: var(--color-danger);
    margin: 0;
}

/* Fehler-Zusammenfassung (error_summary-Partial, tabindex=-1 fuer Fokus) */
.error-summary {
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    background: #F8EAE4;
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
}

.error-summary:focus {
    outline: var(--focus-ring);
}

.error-summary__title {
    font-weight: 700;
    color: var(--color-danger);
    margin: 0 0 0.4rem;
}

.error-summary ul {
    margin: 0;
    padding-left: 1.2em;
}

/* Radio-Karten (radio_cards-Partial) */
.radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.radio-card {
    position: relative;
    display: block;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.radio-card:hover {
    border-color: var(--color-teal);
}

.radio-card:has(input:checked) {
    border-color: var(--color-teal);
    background: var(--badge-teal-bg);
}

.radio-card:has(input:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.radio-card__title {
    display: block;
    font-weight: 600;
}

.radio-card__meta {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin-top: 0.2rem;
}

/* Honeypot: offscreen (nicht display:none - dummy bleibt fuer Bots real) */
.honeypot {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.form-note {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   08 Komponenten (Klassenvertrag fuer Block-Partials, Phase D)
   -------------------------------------------------------------------------- */

/* --- Zeitstrahl: EIN Renderer fuer Tagesablauf (Event/Fastenart) und
       Team-Lebenslauf (Spec fasting_schedules_vs_event_schedule) --- */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline__item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0 1.25rem;
    padding-block: 0.95rem;
    border-top: 1px solid var(--color-border);
}

.timeline__item:first-child {
    border-top: 0;
}

.timeline__time {
    font-weight: 600;
    color: var(--color-brown);
    font-variant-numeric: tabular-nums;
}

.timeline__content {
    display: grid;
    gap: 0.25rem;
}

.timeline__title {
    font-weight: 600;
    margin: 0;
}

.timeline__description {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    max-width: 70ch;
}

@media (max-width: 639.98px) {
    .timeline__item {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

/* --- Checkliste: teal Haken-Komponente (IST-Stil, Spec checkmarks) --- */
.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.checklist__item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.checklist__item .icon {
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.28em;
    color: var(--color-teal);
}

.checklist__item span {
    max-width: 65ch;
}

/* --- Zitat-Komponente (Rezensionen, Teilnehmerstimmen, Medienberichte) --- */
.quote {
    background: var(--color-surface);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.6rem;
    font-style: italic;
    margin: 0;
}

.quote__text {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.5;
}

.quote__text::before {
    content: "\201E";
    color: var(--color-gold-text);
}

.quote__text::after {
    content: "\201C";
    color: var(--color-gold-text);
}

.quote__author {
    margin: 0.9rem 0 0;
    font-style: normal;
    font-weight: 600;
    color: var(--color-brown);
}

.quote__source {
    display: block;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

/* --- Akkordeon (Blocktyp accordion, FAQ-Seite) --- */
.accordion {
    display: grid;
    gap: 0.75rem;
}

.accordion__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.accordion__summary {
    position: relative;
    padding: 1rem 3rem 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.accordion__summary::-webkit-details-marker {
    display: none;
}

.accordion__summary .icon--chevron {
    position: absolute;
    right: 1rem;
    top: 1.15rem;
    transition: transform var(--transition-fast);
}

.accordion__item[open] .icon--chevron {
    transform: rotate(180deg);
}

.accordion__body {
    padding: 0 1.25rem 1.25rem;
    max-width: 70ch;
}

/* --- Galerie (Blocktyp gallery + /impressionen) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-item a {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.gallery-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    transition: transform var(--transition-base);
}

.gallery-item a:hover img {
    transform: scale(1.02);
}

/* --- Karten (Modul-Uebersichten L1, Termin-Karten) --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card__media {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}

.card__body {
    padding: 1.25rem;
    display: grid;
    gap: 0.5rem;
}

.card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-brown);
    margin: 0;
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.card__meta .icon {
    color: var(--color-teal);
}

.card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.card__footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.card__price {
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--color-brown);
}

/* --- Filter-Chips (Termin-Filter Region/Fastenart; GET-Links) --- */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.chip:hover {
    border-color: var(--color-brown);
    color: var(--color-text);
}

.chip.is-active {
    background: var(--color-brown);
    border-color: var(--color-brown);
    color: #fff;
}

/* --------------------------------------------------------------------------
   09 Termin-Listenzeilen (Desktop-Alternative zur Kartenansicht) &
      Preis-/Kalkulationsbox (Detailseite) & Sticky-Summenleiste (Buchung)
   -------------------------------------------------------------------------- */

.event-rows {
    border-block: 1px solid var(--color-border);
}

.event-row {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 1fr auto;
    gap: 1rem;
    align-items: center;
    padding-block: 1.1rem;
    border-top: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
}

.event-rows .event-row:first-of-type {
    border-top: 0;
}

.event-row:hover {
    background: rgba(217, 136, 41, 0.05);
}

.event-row__title {
    font-weight: 600;
    color: var(--color-brown);
}

.event-row__meta {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.event-row__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@media (max-width: 899.98px) {
    .event-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        text-align: left;
    }

    .event-row__price {
        text-align: left;
    }
}

/* Preis-/Kalkulationsbox: Desktop sticky rechts (Detailseite, Phase E);
   Mobil aufklappbar + Sticky-Summenleiste beim Buchen (Spec live_calculation) */
.price-box {
    position: sticky;
    top: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: grid;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.price-box__title {
    margin: 0;
    font-size: var(--fs-md);
}

.price-box__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.price-box__row dt {
    color: var(--color-muted);
}

.price-box__row dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.price-box__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 2px solid var(--color-border);
    padding-top: 0.75rem;
    font-size: var(--fs-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.price-box__hint {
    font-size: var(--fs-xs);
    color: var(--color-muted);
    margin: 0;
}

/* Sticky-Summenleiste (nur auf der Buchungsseite mobil; die Klasse liegt
   auf <body> selbst: body.page--booking) */
.sticky-summary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem var(--gutter);
    background: var(--color-brown);
    color: #fff;
    box-shadow: 0 -4px 14px rgba(77, 51, 25, 0.25);
}

.sticky-summary__label {
    font-size: var(--fs-sm);
    color: #F1E7DC;
}

.sticky-summary__price {
    font-weight: 700;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 899.98px) {
    .page--booking .sticky-summary {
        display: flex;
    }

    body.page--booking {
        padding-bottom: 4.5rem;         /* Leiste verdeckt nichts */
    }
}

/* --------------------------------------------------------------------------
   10 Karten-Fassade (Leaflet Click-to-Load), Video, Hero-Slider, Lightbox
   -------------------------------------------------------------------------- */

/* Statische Karten-Vorschau: immer sichtbar (Spec mobile_rules) */
.map-facade {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #EAE0D2;
    overflow: hidden;
}

.map-facade__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(58, 38, 18, 0.35);   /* Textlesbarkeit ueber Poster */
}

.map-facade__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    justify-items: center;
    color: #fff;
}

.map-facade__address {
    margin: 0;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* FIX-12 (D112) - KARTEN-ZUSTAND: js/map.js setzt nach dem Klick die
   Klasse 'is-open' auf die Fassade. Der Poster-Overlay (::after, fuer
   Textlesbarkeit UEBER dem statischen Poster gedacht) entfaellt damit -
   er wuerde sonst als dunkle Flaeche UEBER der geladenen Karte liegen
   (Pseudo-::after malt nach den Kindern). Die Padding entfaellt ebenso,
   die Karte fuellt die Fassade randlos (Rahmen + Radius bleiben). */
.map-facade.is-open {
    padding: 0;
}

.map-facade.is-open::after {
    content: none;
}

/* FIX-12 (D112) - KARTEN-BREITE: .map-facade ist display:flex (zentriert
   die Fassaden-Inhalte); der Canvas als Flex-Kind OHNE Breitenangabe
   schrumpfte auf Inhaltsbreite = 0px - die Karte war UNSICHTBARR trotz
   geladener Kacheln (Diagnose 2026-11-08: genau 2 Kacheln = 0px breite
   Karte). width:100% gibt dem Canvas die volle Fassadenbreite. */
.map-canvas {
    width: 100%;
    height: min(60vh, 420px);
    border-radius: var(--radius-md);
    z-index: 0;
}

/* Video-Fassade + iframe (Blocktyp video; Click-to-Load via core.js) */
.video-facade {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-brown-dark);
}

.video-facade__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 0;
    background: var(--color-gold);
    color: var(--color-brown-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.video-facade__play .icon {
    width: 1.8rem;
    height: 1.8rem;
}

.video-frame {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-caption {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin-top: 0.5rem;
}

/* Hero-Slider: Signaturmotiv = halbtransparenter dunkler Caption-Balken
   unten links mit VERSALIEN (Spec signature_motif) */
.hero-slider {
    position: relative;
    height: min(72vh, 560px);
    min-height: 320px;
    overflow: hidden;
}

.hero-slider__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity var(--hero-fade) ease;
}

.hero-slider__slide.is-active {
    opacity: 1;
}

.hero-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slider__caption {
    position: absolute;
    left: var(--gutter);
    bottom: 2rem;
    margin: 0;
    max-width: min(90%, 540px);
    background: var(--overlay-caption);
    border-left: 4px solid var(--color-gold);
    color: #fff;
    padding: 0.9rem 1.4rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    font-size: var(--fs-sm);
}

.hero-slider__dots {
    position: absolute;
    bottom: 1.1rem;
    right: var(--gutter);
    display: flex;
    gap: 0.55rem;
    z-index: 1;
}

.hero-slider__dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    background: transparent;
    cursor: pointer;
}

.hero-slider__dot.is-active {
    background: var(--color-gold);
    border-color: var(--color-gold);
}

/* Lightbox (core.js baut sie dynamisch) */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
}

.lightbox.is-open {
    display: block;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 17, 9, 0.88);
}

.lightbox__stage {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1.5rem, 5vw, 3.5rem);
}

.lightbox__img {
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox__caption {
    margin: 0;
    color: #F6EEE3;
    font-size: var(--fs-sm);
    text-align: center;
    max-width: 70ch;
}

.lightbox__btn {
    position: absolute;
    width: var(--touch-target);
    height: var(--touch-target);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox__btn:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.lightbox__btn--close { top: 1rem; right: 1rem; }
.lightbox__btn--prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 0.75rem; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   11 Bewegung & Druck
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    /* Slider bleibt statisch (core.js entscheidet ebenso); Faden aus */
    .hero-slider__slide {
        transition: none;
    }

    .hero-slider__dots {
        display: none;
    }
}

@media print {
    .site-header,
    .site-footer,
    .nav-toggle,
    .nav-backdrop,
    .breadcrumbs,
    .sticky-summary,
    .button,
    .filter-chips,
    .filter-bar {
        display: none !important;
    }

    body {
        background: #fff;
    }
}

/* --------------------------------------------------------------------------
   12 Form-Kit-Ergaenzung (Schritt A-3): Checkbox & klassische Radio-Gruppe.
   Wird in Frontend UND Admin genutzt (identischer Block in admin.css).
   -------------------------------------------------------------------------- */

/* --- Checkbox (field_checkbox.phtml): Kaestchen links, Text rechts --- */
.check {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    cursor: pointer;
}

.check input {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.22em;
    accent-color: var(--color-teal);
    flex: 0 0 auto;
}

.check span {
    max-width: 65ch;
}

.form-field--check .form-field__hint {
    margin-top: 0.35rem;
}

.form-field--check .field-error {
    margin-top: 0.35rem;
}

/* --- Klassische Radio-Gruppe (field_radios.phtml) --- */
.radio-group {
    display: grid;
    gap: 0.5rem;
}

.radio-option {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    cursor: pointer;
}

.radio-option input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--color-teal);
    flex: 0 0 auto;
}

.radio-option span {
    max-width: 65ch;
}

/* --------------------------------------------------------------------------
   13 Termin-Detailseite & Buchung (C-6b; E-33c/D127: zweizeiliges Grid)
   -------------------------------------------------------------------------- */

/* Alpine-Initialisierung: [x-cloak]-Elemente verbergen, bis Alpine sie
   entfernt (Standard-Pattern des CSP-Builds, kein Inline-Style noetig -
   CSP-hygiene, Entscheidung D29) */
[x-cloak] {
    display: none !important;
}

/* Zweispalter: Inhalt + Preisbox. E-33c (D127): Zwei Spalten bereits AB
   900px (Aside 320px; ab 1200px 360px) - Sticky wirkt damit auch auf
   schmalen Desktop-Fenstern (1366px-Laptops mit 125-%-Skalierung liegen
   unter der frueheren 1200px-Schwelle und standen voellig ohne haftende
   Preisbox da). Mit Buchungsformular (Modifier .detail-grid--with-booking,
   nur bei buchbarem Termin gesetzt) ist das Grid ZWEIZEILIG: Hauptspalte
   Zeile 1 = Artikel, Hauptspalte Zeile 2 = Buchungs-Panel (#buchung);
   der Aside SPANNT BEIDE ZEILEN - die Preisbox haftet beim Scrollen neben
   dem Text UND neben dem Formular, die Personen-Radios des Formulars
   aktualisieren die nebenan haftende Box live (ein Alpine-Wrapper, D29).
   Einspaltig (< 900px) bleibt die mobile Reihenfolge Text -> Preisbox ->
   Formular (DOM-Reihenfolge, nichts verschiebt sich). */
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

/* Sticky-Preisbox braucht die volle Zeilenhoehe als Bewegungsraum */
.detail-aside {
    align-self: stretch;
}

@media (max-width: 899.98px) {
    .price-box {
        position: static;           /* kein Ueberdecken beim einspaltigen Lesen */
    }
}

@media (min-width: 900px) {
    .detail-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 2.5rem;
    }

    /* FIX-16 (D128, 2026-11-11) - SPALTENZUWEISUNG DES ASIDE EXPLIZIT:
       Ohne grid-column plaziert das CSS-Grid Items mit FESTER REIHE
       (grid-row: 1 / span 2, siehe unten) VOR allen vollautomatischen
       Kinden (Auto-Platzierung: Schritt 'reihenfeste Items' laeuft vor
       dem Schritt der vollautomatischen). Der Aside schnappte sich so
       die ERSTE Spalte - die breite 1fr-Spalte -, waehrend Artikel und
       Buchungsformular in die 320px-Spalte rutschten: Preisbox 'riesig'
       links sticky, Inhalt schmal rechts, die Bereiche vertauscht
       (Nutzer-Befund VP-88b). Der Aside gehoert IMMER in die schmale
       zweite Spalte - auch im Wartelistenfall ohne Modifier (seine
       Reihe bleibt dort automatisch). */
    .detail-aside {
        grid-column: 2;
    }

    /* Zweizeiliges Grid mit Buchung: Aside ueberspannt Text- UND
       Formular-Zeile (Sticky-Bewegungsraum ueber die volle Seite;
       ohne Modifier bleibt der Aside in Zeile 1). */
    .detail-grid--with-booking .detail-aside {
        grid-row: 1 / span 2;
    }

    /* Sicherheits-Deckel: Eine hoehere Box als der Viewport scrollt
       INTERN (statt unten unbedienbar abzuschneiden); bei normalen
       Hoehen erscheint kein Scrollbalken. */
    .price-box {
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}

@media (min-width: 1200px) {
    .detail-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 3rem;
    }
}

/* Buchungsformular (#buchung) als PANEL der Hauptspalte (E-33c, D127):
   ersetzt das fruehere vollbreite section--surface-Band - die Flaeche
   bleibt optisch abgesetzt (Surface + Rahmen), ohne die Sticky-Box vom
   Formular zu trennen. Einspaltig ist das Panel das dritte Grid-Kind in
   unveraenderter DOM-Reihenfolge. */
.detail-booking {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

@media (min-width: 900px) {
    .detail-booking {
        padding: 1.75rem 2rem;
    }
}

.detail-meta {
    font-size: var(--fs-md);
    color: var(--color-muted);
    margin: 0 0 0.9rem;
}

.detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
}

.detail-block {
    margin-top: 2.75rem;
}

/* Trainer-Karten (event_trainers) */
.trainer-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.trainer-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.2rem;
}

.trainer-card__name {
    font-family: var(--font-heading);
    color: var(--color-brown);
    margin: 0 0 0.15rem;
}

.trainer-card__role {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-gold-text);
    margin: 0;
}

.trainer-card__note {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin: 0.15rem 0 0;
}

.trainer-card__bio {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin: 0.5rem 0 0;
}

.trainer-card__more {
    margin: 0.6rem 0 0;
    font-size: var(--fs-sm);
}

/* Weitere Termine (desselben Events, Entscheidung D25) */
.detail-upcoming {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.detail-upcoming a {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
}

.detail-upcoming a:hover {
    box-shadow: var(--shadow-sm);
}

.detail-upcoming__range {
    font-weight: 600;
    color: var(--color-brown);
    font-variant-numeric: tabular-nums;
}

.detail-upcoming__title {
    font-weight: 600;
}

.detail-upcoming__place {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

/* Kalkulationsbox: dl-Reset, mobile Aufklapplogik, Aktionen */
.price-box__list {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.price-box__details {
    display: grid;
    gap: 0.75rem;
}

.price-box__toggle {
    display: none;
}

.price-box__toggle .icon {
    transition: transform var(--transition-fast);
}

.price-box.is-open .price-box__toggle .icon {
    transform: rotate(180deg);
}

.price-box__note {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin: 0;
}

.price-box__actions {
    display: grid;
    gap: 0.6rem;
}

.price-box__actions .button {
    width: 100%;
}

@media (max-width: 899.98px) {
    .price-box__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        font: inherit;
        font-weight: 600;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }

    /* Alpine setzt is-collapsed/is-open (boxStateClass); ohne JS bleibt der
       Kasten offen (Progressive Enhancement, kein Content-Hiding) */
    .price-box.is-collapsed .price-box__details {
        display: none;
    }
}

/* Buchungsformular (#buchung) */
.booking {
    max-width: 720px;
}

/* Mobile Sticky-Summenleiste: Link zur Buchung (Leiste selbst: Abschnitt 09) */
.sticky-summary__link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
}

.sticky-summary__link:hover,
.sticky-summary__link:focus-visible {
    color: var(--color-gold);
}

/* Karten-Fassade: DSGVO-Hinweis vor dem Nachladen der Tiles */
.map-facade__hint {
    font-size: var(--fs-sm);
    color: #F6EEE3;
    margin: 0;
    max-width: 46ch;
}

/* --------------------------------------------------------------------------
   14 Kontaktseite & Wartelisten-Sektion (C-7)
   -------------------------------------------------------------------------- */

/* Kontaktseite /kontakt: Kontaktkarte (settings) links, Anfrageformular
   rechts ab 900px; darunter mobil einspaltig */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .contact-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 3rem;
    }
}

.contact-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.5rem;
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
}

.contact-card__name {
    font-family: var(--font-heading);
    color: var(--color-brown);
    margin: 0 0 0.35rem;
}

.contact-card__line {
    margin: 0;
}

.contact-note {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    max-width: 65ch;
}

.contact-form .form-note {
    margin-top: 0.75rem;
}

/* Wartelisten-Sektion der Termin-Detailseite (nur sichtbar bei
   ausgebuchtem Termin mit aktivierter Warteliste) */
.waiting-list {
    max-width: 720px;
}

.waiting-list__full {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   15 CMS-Bloecke (D-9b): Rendern der pages.blocks ueber die Partiale
      templates/frontend/blocks/* (Klassenvertrag). checklist/quote/accordion/
      gallery/video-facade nutzen die Komponenten aus Abschnitt 08/10; hier
      folgen die blockspezifischen Ergaenzungen: Blockabstand, text_image-
      Floats samt Medien-Groessen (media--* ist VERTRAG mit der D-11 Bild-
      Mini-Toolbar), CTA-Panel, Video-Play-Dreieck und die Anreise-Regionen-
      Snippets (/anreise-Vertrag, D20/D41).
   -------------------------------------------------------------------------- */

/* Blockabstand innerhalb der Seite (Rahmen: .cms-blocks in cms.phtml) */
.cms-blocks {
    display: grid;
    gap: 2.5rem;
}

/* --- text_image: Desktop float, Mobil kollabiert float zu block --------- */
.textimage__media {
    margin: 0 0 1.25rem;
}

.textimage__media img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.textimage__caption {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    margin: 0.4rem 0 0;
}

/* Medien-Groessen (VERTRAG mit D-11: Bild-Mini-Toolbar S|M|Vollbreite) */
.media--S    { width: 200px; }
.media--M    { width: 320px; }
.media--full { width: 100%; }

/* Float-Kontext aufraeumen (clearfix) */
.textimage::after {
    content: "";
    display: table;
    clear: both;
}

@media (min-width: 640px) {
    .textimage--left .textimage__media {
        float: left;
        margin: 0.25rem 1.5rem 0.5rem 0;
    }

    .textimage--right .textimage__media {
        float: right;
        margin: 0.25rem 0 0.5rem 1.5rem;
    }
}

/* Mobil kollabiert float zu block (Spec cms_content_blocks.text_image) */
@media (max-width: 639.98px) {
    .textimage .textimage__media {
        float: none;
        width: 100%;
    }
}

/* --- cta: Panel mit Gold-Akzent (Handlungsaufruf) ------------------------ */
.cta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-gold);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.cta__title {
    margin: 0;
}

.cta__text {
    margin: 0;
    max-width: 65ch;
}

/* --- video: Play-Dreieck im Fassaden-Button (icons.svg hat kein 'play'-
       Symbol; bewusst CSS statt Sprite-Erweiterung - VP-4-Lektion) -------- */
.video-facade__play::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--color-brown-dark);
    margin-left: 4px;   /* optische Zentrierung des Dreiecks */
}

/* --- Anreise-Regionen-Snippets (/anreise, UNTERHALB der Bloecke) --------- */
.region-arrivals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.region-arrival {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.region-arrival__name {
    margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   16 Startseite & Team (E-13f): Begruessungs-Zweispalter, Modul-Teaser,
      Stimmen-Grid (home.phtml); bild-zentrierte Portrait-Karten mit
      Rollen-Badge, Hook-Zeile und Mehr-ueber-Link (team.phtml, Spec IA
      special_cases "Team L1 bild-zentriert, Portrait 3:4"); Profil-
      Zweispalter mit Lebenslauf-Zeitstrahl (timeline: Abschnitt 08) und
      PERSONENSTRAHL als Quer-Navigation (team_detail.phtml, D85).
   -------------------------------------------------------------------------- */

/* --- Startseite: Begruessung (Portrait + Text) ------------------------------
   .home-greeting liegt ZUSAEMTLICH mit .container im Markup (Template:
   <div class="container home-greeting">) - Container liefert die Breite,
   hier steht nur das Zweispalten-Grid. */
.home-greeting {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.home-greeting__img {
    width: 100%;
    max-width: 320px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.home-greeting__body {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

@media (min-width: 900px) {
    .home-greeting {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 3rem;
    }
}

/* --- Startseite: Modul-Teaser (4 Karten, Spec IA "Karten mit 1-3 Fakten") */
.home-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.home-module {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.home-module:hover {
    border-color: var(--color-brown);
    box-shadow: var(--shadow-sm);
}

.home-module__label {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-brown);
}

.home-module__text {
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.home-module__fact {
    margin-top: auto;               /* dockt unten an (gestreckte Grid-Kinder) */
    font-size: var(--fs-sm);
    color: var(--color-muted);
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

/* --- Startseite: Teilnehmerstimmen (2-3 Zitate, .quote: Abschnitt 08) --- */
.home-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* --- Team L1: bild-zentrierte Portrait-Karten (Portrait 3:4) --------------
   Die KARTE ist das <a> innerhalb des <li class="team-card"> - das li
   bleibt ungestylt, saemtliches Karten-Styling traegt der Link. */
.team-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
}

.team-card a {
    display: grid;
    gap: 0.55rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.team-card a:hover {
    border-color: var(--color-brown);
    box-shadow: var(--shadow-sm);
}

.team-card__img {
    width: 100%;
    aspect-ratio: 3 / 4;           /* Spec IA: Portrait 3:4 */
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Initialen-Platzhalter ohne Portrait (Team ohne Medienbestand nutzbar) */
.team-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--color-brown);
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.team-card__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    color: var(--color-brown);
}

/* Rollen-Badge (Spec IA special_cases; Pill im Badge-Stil, Abschnitt 04) */
.team-card__role {
    justify-self: start;            /* Grid-Kind sonst gestreckt */
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    background: var(--badge-gold-bg);
    color: var(--badge-gold-text);
}

.team-card__bio {
    font-size: var(--fs-sm);
    color: var(--color-muted);
}

.team-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: start;
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* --- Team L2: Profil-Zweispalter (Portrait + Text) -------------------------- */
.team-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.team-profile__img {
    width: 100%;
    max-width: 360px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.team-profile__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 4;
    background: var(--color-brown);
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    border-radius: var(--radius-md);
}

.team-profile__body {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

@media (min-width: 900px) {
    .team-profile {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 3rem;
    }
}

/* --- Team L2: PERSONENSTRAHL (D85) - Portrait-Streifen der uebrigen
       Mitglieder als Quer-Navigation (runde Thumbs, umbruchfaehig) ------- */
.team-strip ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.team-strip__item a {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
}

.team-strip__img {
    width: 76px;
    height: 76px;
    border-radius: 50%;            /* Personen-Thumb rund */
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.team-strip__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--color-brown);
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
}

.team-strip__name {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
}

.team-strip a:hover .team-strip__name,
.team-strip a:focus-visible .team-strip__name {
    color: var(--color-gold-text);
}

/* --------------------------------------------------------------------------
   17 Footer (partials/footer.phtml) - E-18 (D108): BRAUN #4D3319 (das
      Sidebar-Braun der alten Seite lebt hier fort, Spec heritage_ist_
      mapping), DREI Spalten (Service & Rechtliches, Kontakt, Newsletter);
      die fruehere Navigations-Wiederholung des Headers ist entfallen.
      Die Styles fehlten in der E-13-Fassung komplett - dieser Abschnitt
      schliesst die Luecke. .button--ghost (CTA) steht in Abschnitt 04;
      Gold-Akzent fuer <strong> in Abschnitt 02.
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--color-brown);
    color: #E9DFD3;
    padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.site-footer__col {
    min-width: 0;                 /* Grid-Kind-Inhaltsumbruch (long words) */
}

.site-footer__heading {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    color: #fff;
    margin: 0 0 0.9rem;
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.site-footer__link {
    color: #E9DFD3;
    text-decoration: none;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: var(--color-gold);
}

.site-footer__address {
    font-style: normal;           /* <address> kursiv-Default zuruecknehmen */
    line-height: 1.7;
}

.site-footer__teaser {
    font-size: var(--fs-sm);
    color: #CDBFAE;
    max-width: 40ch;
    margin: 0 0 0.9rem;
}

.site-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__bottom p {
    margin: 0;
    font-size: var(--fs-sm);
    color: #CDBFAE;
}

/* --------------------------------------------------------------------------
   18 Termin-Uebersicht /termine (E-33): Filterleiste mit Monatsformular
      (D125) und 1/2-Personen-Preisschalter (D126) sowie die serverseitig
      vorbereiteten Karten-Preisvarianten (partials/event_card.phtml).
      Ohne JS ist alles per GET bedienbar (Formular + Schalter-Links);
      js/termine-filter.js schaltet ohne Reload und setzt .is-js ans
      Monatsformular (versteckt den dann redundanten Submit-Button).
      DOM-Vertrag dieser Klassen: templates/frontend/pages/dates.phtml.
   -------------------------------------------------------------------------- */

/* Filterleiste: Monatsformular + Personen-Schalter in einer Reihe (die
   Region-/Art-Chips darueber bleiben eigene .filter-chips-Zeilen,
   Abschnitt 08; data-termine-links-Container fuer den JS-Modus-Sync) */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem 1.5rem;
    margin-bottom: 1.75rem;
}

/* Monatsformular (von/bis): native selects mit Label darueber; kompakt in
   Chip-Hoehe (2.4rem statt 44px - die Selects bleiben ausreichend touch-
   bedienbar, gleiche Precedent wie die Filter-Chips) */
.filter-months {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
}

.filter-months__group {
    display: grid;
    gap: 0.35rem;
}

.filter-months__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-brown);
}

.filter-months .input {
    min-width: 11.5rem;
}

.filter-months .input,
.filter-months .button {
    min-height: 2.4rem;
    padding-block: 0.3rem;
}

/* Submit nur ohne JS noetig (termine-filter.js sendet bei change ab) */
.filter-months.is-js .filter-months__submit {
    display: none;
}

/* 1/2-Personen-Schalter (Segmented Control): Beide Zustaende sind Links
   (?personen=), der aktive ist optisch gesetzt - Styling-Spiegel der
   .chip.is-active-Familie (Abschnitt 08); term-filter.js toggelt
   .is-active + aria-current ohne Reload */
.persons-switch {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.persons-switch__btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.15rem;
    padding: 0.3rem 1.2rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
}

.persons-switch__btn:hover,
.persons-switch__btn:focus-visible {
    color: var(--color-text);
}

.persons-switch__btn.is-active {
    background: var(--color-brown);
    color: #fff;
}

/* Karten-Preisvarianten (D126): Beide Varianten stehen serverseitig im
   Markup (EventCardFormatter price/price_2/total_2); sichtbar ist genau
   eine - gesteuert am Karten-Raster via data-persons (Server-Vorbelegung,
   termine-filter.js toggelt ohne Reload). Ohne Varianten-Markup (alle
   anderen Karten-Seiten: Start, Modul-Detailseiten) bleibt alles beim
   gewohnten einzeiligen ab-Preis - diese Regeln sind dort wirkungslos. */
.card__price-variant--2 {
    display: none;
}

[data-persons="2"] .card__price-variant--1 {
    display: none;
}

[data-persons="2"] .card__price-variant--2 {
    display: inline;
}

/* Gesamtzeile der 2-Personen-Variante: klein unter dem p. P.-Preis */
.card__price-total {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-muted);
}