/*
 * Komponenten aus dem Styleguide. Nur Bausteine, deren Werte im Handover final sind.
 * Neue Komponenten hier ergänzen (alphabetisch gruppiert) oder — wenn sie umfangreich
 * werden — als eigene Datei anlegen und in assets/app.js importieren.
 */

/* --- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--min-touch-target);
    padding: 14px 28px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-green);
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.btn:hover {
    background: var(--color-green-dark);
    color: #fff;
}

.btn--secondary {
    padding: 12px 24px;
    border: 1.5px solid var(--color-green);
    background: transparent;
    color: var(--color-green);
    font-size: 14px;
}

.btn--secondary:hover {
    background: var(--color-free-bg);
    color: var(--color-green-dark);
}

.btn--pill {
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-size: 14px;
}

.btn--block {
    width: 100%;
}

/* Deaktivierter „bald verfügbar“-Zustand (z. B. Preise & Buchung, solange die
   Seite noch nicht existiert): sichtbar gedämpft statt grüner CTA. */
.btn--soon,
.btn--soon:hover {
    background: var(--color-surface-natural);
    color: var(--color-text-muted);
    cursor: default;
}

.link-arrow {
    color: var(--color-green);
    font-size: 14px;
    font-weight: 700;
}

/* --- Badges (Verfügbarkeit) --------------------------------------------- */

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-eyebrow);
    font-weight: 700;
    white-space: nowrap;
}

.badge--free {
    background: var(--color-free-bg);
    color: var(--color-green);
}

.badge--booked {
    background: var(--color-booked-bg);
    color: var(--color-booked-text);
}

/* --- Filter-Chips ------------------------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--min-touch-target);
    padding: 8px 16px;
    border: 1px solid var(--color-border-chip);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-meta);
    font-weight: 600;
    cursor: pointer;
}

.chip[aria-pressed='true'],
.chip--active {
    border-color: var(--color-green);
    background: var(--color-green);
    color: #fff;
}

/* --- Karten ------------------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    overflow: hidden;
    transition: box-shadow .18s ease;
}

/* Ganze Karte klickbar: <a class="card"> */
.card:hover {
    box-shadow: var(--shadow-card-hover);
}

.card__media {
    height: 190px;
    object-fit: cover;
    width: 100%;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 18px 20px;
}

.card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-card-title);
    font-weight: 400;
    color: var(--color-near-black);
}

.card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

/* Schwebende Box (z. B. Verfügbarkeits-Leiste über der Hero-Unterkante) */
.floating-box {
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-floating);
    padding: var(--space-5);
}

/* --- Formularfelder ----------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
}

.field__label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-label);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

.field__control {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-near-black);
    font-family: var(--font-body);
    font-size: 14px;
}

.field__control:focus {
    outline: none;
}

.field--invalid {
    border-color: var(--color-warning);
}

.form-error {
    color: var(--color-warning);
    font-size: var(--font-size-small);
}

.field__help {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

/* Kästchenfelder brauchen die Beschriftung neben, nicht über dem Feld. */
.field--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.field--checkbox .field__label {
    /*
     * Die Beschriftung bleibt neben dem Kästchen und bricht in sich um. Ohne
     * flex-basis 0 rutscht sie als ganzes Element in die nächste Zeile, sobald
     * sie länger als ein Satzfragment ist — dann steht das Kästchen allein.
     */
    flex: 1 1 0;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--font-size-meta);
    font-weight: 400;
    letter-spacing: normal;
    line-height: var(--line-height-compact);
    text-transform: none;
}

.field--checkbox input[type='checkbox'] {
    /* An der ersten Textzeile ausrichten, nicht an der Oberkante des Kastens. */
    flex: none;
    margin-top: 3px;
    width: 15px;
    height: 15px;
    accent-color: var(--color-green);
}

.field--checkbox .field__help {
    flex-basis: 100%;
}

/* --- Rückmeldungen ------------------------------------------------------ */

.flash {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    font-size: var(--font-size-meta);
    font-weight: 600;
}

.flash--success {
    background: var(--color-free-bg);
    color: var(--color-free-text);
}

.flash--error {
    background: var(--color-booked-bg);
    color: var(--color-warning);
}

/*
 * Dazwischen: die Handlung hat geklappt, aber etwas ist erwähnenswert. Heute
 * das Kopfbild, aus dem sich keine gute Linkvorschau schneiden lässt
 * (`admin.image_slot.flash.preview_source_poor`).
 *
 * Sandton statt Rot — grün wäre gelogen, rot wäre eine Fehlermeldung, und
 * Regina hat nichts falsch gemacht. Es ist derselbe Ton wie „belegt" im
 * Kalender, dort mit demselben Kontrast geprüft (ColorContrastTest).
 */
.flash--warning {
    background: var(--color-booked-bg);
    color: var(--color-booked-text);
}

/*
 * Hinweis über einer Liste — heute das Ergebnis der Zeitraumsuche auf der
 * Wohnungsübersicht. Anders als `.flash` gehört er zum Inhalt und nicht zu einer
 * gerade abgeschlossenen Handlung: er bleibt stehen, solange die Suche gilt, und
 * ist deshalb ruhiger gesetzt.
 */
.notice {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-surface-natural);
    font-size: var(--font-size-small);
}

.notice > p {
    margin: 0;
}

.notice--warning {
    background: var(--color-booked-bg);
    color: var(--color-warning);
    font-weight: 600;
}

/* --- Belegungskalender -------------------------------------------------- */

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.calendar__day {
    padding: 8px 0;
    border-radius: var(--radius-day);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-align: center;
}

.calendar__day--free {
    background: var(--color-calendar-free-bg);
    color: var(--color-green-dark);
}

/* Belegt trägt zusätzlich zur Farbe eine Schraffur: die Farbe allein wäre für
   Rot-Grün-Blinde kein Unterschied zu „frei“ (WCAG 1.4.1). Die Legende führt
   dasselbe Muster, sonst passt die Erklärung nicht zum Kalender. */
.calendar__day--booked {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 3px,
            var(--color-calendar-booked-stripe) 3px 5px
        ),
        var(--color-calendar-booked-bg);
    color: var(--color-booked-text);
}

.calendar__day--empty {
    background: transparent;
}

/* Jenseits der Wissensgrenze: bewusst keine der beiden Kalenderfarben, damit
   „keine Angaben“ nicht wie „frei“ oder „belegt“ aussieht. Nur die Zahl, gedämpft. */
.calendar__day--unknown {
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 400;
}

.calendar__weekday {
    padding-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
    font-weight: 700;
    text-align: center;
}

/* Rahmen um den Kalender, mit Monatszeile und Legende. */
.calendar-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 22px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-lg);
}

.calendar-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-card__month {
    font-family: var(--font-heading);
    font-size: 17px;
    color: var(--color-near-black);
}

.calendar-card__nav {
    display: flex;
    gap: var(--space-2);
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border-chip);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-decoration: none;
}

.calendar-nav:hover,
.calendar-nav:focus-visible {
    border-color: var(--color-green);
    color: var(--color-green);
}

/* Kein Ziel: der Pfeil bleibt als Platzhalter stehen, damit die Monatszeile
   nicht springt, ist aber sichtbar unbenutzbar. */
.calendar-nav--off {
    opacity: 0.35;
}

.calendar-legend {
    display: flex;
    gap: 22px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-meta);
}

.calendar-legend__item {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.calendar-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-swatch);
}

.calendar-legend__swatch--free {
    background: var(--color-calendar-free-bg);
    border: 1px solid var(--color-calendar-free-border);
}

.calendar-legend__swatch--booked {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 2px,
            var(--color-calendar-booked-stripe) 2px 3px
        ),
        var(--color-calendar-booked-bg);
}

.calendar-card__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
    line-height: var(--line-height-compact);
}

/* --- Buchungskalender (Auswahl im Raster) -------------------------------- */

/*
 * Seit dem 10.08.2026 ist das Monatsraster kein Schaubild mehr: wählbare Tage
 * sind Links (templates/accommodation/_calendar.html.twig). Sie müssen sich
 * deshalb wie Bedienelemente anfühlen und nicht wie eingefärbte Zahlen.
 */
/*
 * Kein `color: inherit` hier — das stand zwischenzeitlich drin, um das
 * Link-Grün zu neutralisieren, und überschrieb dabei die Zustandsfarbe: freie
 * Tage kamen in Grau statt in Dunkelgrün. Nötig ist es ohnehin nicht, denn
 * jede Tageszelle trägt über `--free`/`--booked` schon eine eigene Farbe, und
 * die schlägt die Vorgabe für `a` aus base.css.
 */
.calendar__day--pickable {
    text-decoration: none;
    cursor: pointer;
}

.calendar__day--pickable:hover,
.calendar__day--pickable:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: -2px;
}

/*
 * Die Auswahl steht **nach** den Zustandsfarben, damit sie gewinnt: ein
 * gewählter Tag ist zuerst gewählt und erst dann frei oder belegt.
 *
 * Die Ränder sind kräftig gefüllt, die Nächte dazwischen nur getönt — so ist
 * auf einen Blick zu sehen, wo der Aufenthalt anfängt und aufhört, und nicht
 * bloß, dass irgendein Block markiert ist.
 */
.calendar__day--within {
    background: var(--color-calendar-selected-soft);
    color: var(--color-green-dark);
}

.calendar__day--arrival,
.calendar__day--departure {
    background: var(--color-green);
    color: #fff;
}

/*
 * Bewusst *keine* zusammengezogene Rundung über den Aufenthalt hinweg: das
 * Raster ist ein Gitter mit Zeilenumbruch, ein durchgehender Balken bräche am
 * Wochenende, und die Sonderfälle (eine Nacht, Zeilenanfang, Monatsende) wären
 * mehr Regeln als Gewinn. Füllung und Ton reichen, um Rand und Mitte zu trennen.
 */

.calendar-legend__swatch--selected {
    background: var(--color-green);
}

/* Woran man gerade ist: Anreise wählen, Abreise wählen, oder fertig. */
.booking-status {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-meta);
    line-height: var(--line-height-compact);
}

.booking-status__error {
    color: var(--color-warning);
    font-weight: 600;
}

/*
 * Die Felder unter dem Raster — derselbe Weg mit der Tastatur. Das Raster ist
 * schneller, aber wer ein Datum kennt, tippt es lieber.
 */
.booking-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: end;
}

.booking-form__submit {
    grid-column: 1 / -1;
    justify-content: center;
}

.booking-form__hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-meta);
    line-height: var(--line-height-compact);
}

@media (max-width: 560px) {
    /* Drei Felder nebeneinander werden auf einem Telefon zu drei schmalen
       Streifen — untereinander bleiben sie bedienbar. */
    .booking-form {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Höhere Tageskacheln, seit man sie antippt. In der Breite geht nichts: das
     * Raster hat sieben Spalten, auf 375 px bleiben je 36 px, und daran ändert
     * kein Wunsch etwas. In der Höhe kostet es nichts — 44 px sind die Größe,
     * die ein Daumen zuverlässig trifft, und der Rest des Rasters wächst mit.
     */
    .calendar__day {
        padding: 11px 0;
    }
}

/* --- Tabellen (Preise) -------------------------------------------------- */

.table th {
    padding: var(--space-3) var(--space-4);
    background: var(--color-near-black);
    color: #fff;
    font-size: var(--font-size-meta);
    font-weight: 700;
    text-align: left;
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

.table tbody tr:nth-child(even) {
    background: var(--color-surface-alt);
}

.table tfoot td {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
}

/* --- Wortmarke ---------------------------------------------------------- */

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

/*
 * Runder Logo-Kreis, 52 px (Design-Handover: „Logo rund 52px + Wortmarke").
 * Füllung und Rand stehen im Prototyp am Platzhalter des Logos — das Bild selbst
 * ist der freigestellte Pferdekopf mit transparentem Grund, weil nur der Kopf bei
 * dieser Größe noch zu erkennen ist. Wie die Datei entsteht, steht in
 * .claude/ideen/2026-08-03-logo-und-favicon.md.
 */
.wordmark__logo {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border: 1.5px solid var(--color-green);
    border-radius: 50%;
    background: var(--color-green-soft);
    /* `contain`, nicht `cover`: ein Logo darf nicht angeschnitten werden. */
    object-fit: contain;
}

.wordmark__text {
    display: flex;
    flex-direction: column;
}

.wordmark__top {
    font-family: var(--font-heading);
    font-size: 19px;
    letter-spacing: var(--letter-spacing-wordmark);
    text-transform: uppercase;
    color: var(--color-near-black);
}

.wordmark__bottom {
    font-family: var(--font-heading);
    font-size: 13px;
    font-style: italic;
    letter-spacing: .06em;
    color: var(--color-green);
}

.wordmark--inverted .wordmark__top,
.wordmark--inverted .wordmark__bottom {
    color: #fff;
}

/* --- Ausstattungs-Liste mit grünem Häkchen ------------------------------ */

.check-list {
    display: grid;
    gap: var(--space-2);
}

.check-list--two-columns {
    grid-template-columns: 1fr 1fr;
}

.check-list__item {
    display: flex;
    gap: var(--space-1);
    font-size: var(--font-size-meta);
}

.check-list__item::before {
    content: '✓';
    color: var(--color-green);
    font-weight: 700;
}

/* --- Filterleiste (FeWo-Übersicht) -------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* --- Medien-Platzhalter (bis zum Bild-Import) --------------------------- */

.media-placeholder {
    display: block;
    background: var(--color-surface-natural);
}

.card .media-placeholder {
    height: 190px;
    border-bottom: 1px solid var(--color-border);
}

.card__price {
    color: var(--color-near-black);
    font-weight: 700;
}

/* --- Breadcrumb --------------------------------------------------------- */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    color: var(--color-text-meta);
    font-size: var(--font-size-meta);
}

/* --- Detailseite: Galerie und Zwei-Spalten-Layout ----------------------- */

.gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 155px 155px;
    gap: 14px;
    margin-bottom: var(--space-7);
}

.gallery__item {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card-lg);
    overflow: hidden;
}

/* Klickbare Kachel (Button um das Bild) öffnet die Lightbox. */
button.gallery__item {
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

button.gallery__item:hover img {
    transform: scale(1.04);
}

.gallery__item:first-child {
    grid-row: 1 / span 2;
}

/* --- Lightbox (FeWo-Galerie) -------------------------------------------- */

.has-lightbox {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background: var(--overlay-backdrop);
}

.lightbox__image {
    max-width: min(100%, 1100px);
    max-height: 82vh;
    object-fit: contain;
    border-radius: var(--radius-card-lg);
}

.lightbox__caption {
    position: absolute;
    left: var(--space-8);
    right: var(--space-8);
    bottom: var(--space-5);
    text-align: center;
    color: #fff;
    font-size: var(--font-size-meta);
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--overlay-control);
    color: #fff;
    font-family: var(--font-body);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background: var(--overlay-control-hover);
    color: #fff;
}

.lightbox__close {
    top: var(--space-5);
    right: var(--space-5);
}

.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__nav--prev {
    left: var(--space-5);
}

.lightbox__nav--next {
    right: var(--space-5);
}

@media (max-width: 1024px) {
    .lightbox {
        padding: var(--space-5);
    }

    .lightbox__nav {
        top: auto;
        bottom: var(--space-5);
        transform: none;
    }

    .lightbox__nav--prev {
        left: var(--space-5);
    }

    .lightbox__nav--next {
        right: var(--space-5);
    }

    .lightbox__caption {
        bottom: calc(var(--space-5) + 60px);
    }
}

.detail-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.request-box {
    position: sticky;
    top: var(--sticky-offset);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-floating);
}

.request-box__price {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--color-near-black);
}

.request-box__cta {
    margin-top: var(--space-3);
    justify-content: center;
}

@media (max-width: 1024px) {
    .gallery {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .gallery__item:first-child {
        grid-row: auto;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }

    .request-box {
        position: static;
    }
}

/* --- Site-Header und Navigation ----------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--header-height);
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.nav__link {
    color: var(--color-near-black);
    font-size: 14px;
    font-weight: 600;
}

.nav__link:hover,
.nav__link--active {
    color: var(--color-green);
}

.nav__link--soon {
    color: var(--color-text-muted);
    cursor: default;
}

.site-header__aside {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Seit dem 10.08.2026 nur noch der Hörer: die ausgeschriebene Nummer kostete
   im Header mehr Platz, als sie dort wert war. Erreichbar bleibt sie überall —
   im aufgeklappten Mobil-Menü als Text daneben, sonst über den schwebenden
   Anrufknopf unten rechts (siehe `.call-fab`). */
.site-header__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: var(--min-touch-target);
    min-height: var(--min-touch-target);
    border-radius: 50%;
    color: var(--color-near-black);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.site-header__phone:hover,
.site-header__phone:focus-visible {
    color: var(--color-green);
}

.site-header__phone-icon {
    width: 22px;
    height: 22px;
    flex: none;
}

/* Auf Desktop trägt der Link seinen Namen über `aria-label`; sichtbar ist nur
   das Icon. Im Mobil-Menü kommt die Zahl zurück (Breakpoint unten). */
.site-header__phone-number {
    display: none;
}

/* Auf Desktop lösen sich Navigation und Aside auf und sitzen direkt im
   Header-Raster; der Umschalter bleibt verborgen. Beides kehrt sich im
   Mobil-Breakpoint um (siehe unten). */
.site-header__menu {
    display: contents;
}

.nav-toggle {
    display: none;
}

/* --- Hero und Verfügbarkeits-Leiste ------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hero-height);
    padding: var(--space-8) 0 calc(var(--space-8) + 44px);
    overflow: hidden;
    /* Fläche, solange kein Hero-Foto hinterlegt ist: warmer grüner Verlauf aus
       dem Handover, darüber das dunkle Text-Overlay. Liegt ein Bild am Platz
       `startseite_hero`, schiebt sich `.hero__image` davor — der Verlauf bleibt
       als Grund darunter, damit beim Laden nichts weiß aufblitzt. */
    background-color: var(--color-green-dark);
    background-image: var(--overlay-hero), var(--gradient-hero-fallback);
    color: #fff;
    text-align: center;
}

/*
 * Das Hero-Foto als eigenes `img` und nicht als `background-image`: die
 * Inhaltssicherheitsrichtlinie verbietet Inline-Stile, und ohne sie ließe sich
 * ein Pfad aus der Datenbank nicht in CSS einsetzen. Der Umweg hat einen
 * Vorteil — ein `img` trägt einen Alt-Text, eine Hintergrundfläche nicht.
 */
.hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dasselbe dunkle Overlay wie auf der Verlaufsfläche, damit die weiße Schrift
   auch auf einem hellen Foto lesbar bleibt. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--overlay-hero);
}

.hero__content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    color: #fff;
    font-size: var(--font-size-h1);
}

.hero .eyebrow {
    color: #fff;
}

.hero__subline {
    color: rgba(255, 255, 255, .9);
}

.availability {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin-top: -44px;
}

.availability__form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--space-3);
    align-items: end;
}

/* Der Absende-Button füllt die Zeilenhöhe, damit er nicht niedriger als die
   zweizeiligen Felder (Label + Eingabe) sitzt. */
.availability__form .btn {
    align-self: stretch;
}

/* --- Angebote-Streifen (Startseite) ------------------------------------- */

.offer {
    gap: var(--space-2);
}

.offer__media {
    height: 150px;
    border-radius: var(--radius-card);
    /* Fallback-Verlauf bis die Angebote-Fotos importiert sind. */
    background: var(--gradient-natural);
}

.offer__title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 400;
    color: var(--color-near-black);
}

/* --- Hofleben ----------------------------------------------------------- */

/* Reiterleiste der Unterseiten — dieselben Chips wie die Filterleiste,
   nur mit dem größeren Abstand aus dem Handover (12 px). */
.tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.badge--category {
    background: var(--color-free-bg);
    color: var(--color-green);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
}

.team-member,
.farm-animal,
.memoriam-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.team-member__media {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: var(--radius-card);
    object-fit: cover;
    /* Fallback-Verlauf, bis die Team-Fotos kuratiert sind. */
    background: var(--gradient-photo-a);
}

.team-member__name,
.farm-animal__name,
.memoriam-card__name {
    font-family: var(--font-heading);
    font-size: 19px;
    color: var(--color-near-black);
}

.team-member__role {
    color: var(--color-text-meta);
    font-size: var(--font-size-meta);
}

/* Über .card, weil `.card .media-placeholder` sonst mit 190 px gewinnt —
   das Handover nennt für die Steckbrief-Karte 170 px. */
.card .horse-card__media {
    height: 170px;
    background: var(--gradient-photo-b);
}

.horse-card__name {
    font-family: var(--font-heading);
    font-size: 19px;
    color: var(--color-near-black);
}

.horse-card__profile {
    color: var(--color-text-meta);
    font-size: var(--font-size-small);
}

.farm-animal__media {
    display: block;
    width: 100%;
    height: 200px;
    border-radius: var(--radius-card);
    object-fit: cover;
    background: var(--gradient-photo-a);
}

.farm-animal__species {
    color: var(--color-text-secondary);
    font-size: var(--font-size-meta);
}

/* In Memoriam: gedeckte Töne, bewusst ohne Grün-Akzent. */
.memoriam .container {
    align-items: center;
}

.memoriam__intro {
    max-width: 640px;
    font-size: var(--font-size-lead);
    line-height: var(--line-height-body);
    font-style: italic;
    color: var(--color-text-secondary);
}

.memoriam .grid-4 {
    width: 100%;
}

/* Galerie eines festen Bildplatzes (Reiterstüberl, Reiterferien-Zimmer,
   „Im Fichtelgebirge“). Nur das Bild selbst — das Raster kommt von .grid-3. */
.slot-gallery {
    width: 100%;
}

.slot-gallery__media {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: var(--radius-card);
    object-fit: cover;
}

.memoriam-card__media {
    display: block;
    width: 100%;
    height: 200px;
    border-radius: var(--radius-card);
    object-fit: cover;
    filter: saturate(.7);
    background: var(--gradient-memoriam);
}

@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Fließtext aus dem Pflegebereich (Rechtstexte) ---------------------- */

.prose {
    max-width: 820px;
}

.prose h2 {
    margin-top: var(--space-7);
    font-size: var(--font-size-h3);
}

.prose h3,
.prose h4 {
    margin-top: var(--space-5);
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 400;
    color: var(--color-near-black);
}

.prose p,
.prose ul,
.prose ol,
.prose address {
    margin-top: var(--space-4);
    line-height: var(--line-height-body);
}

.prose ul,
.prose ol {
    padding-left: var(--space-5);
}

.prose li + li {
    margin-top: var(--space-1);
}

.prose__footer {
    max-width: 820px;
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* --- Versetztes Foto-Paar (Reiterstüberl, Reiterferien) ------------------ */

.photo-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.photo-pair__item {
    display: block;
    height: 280px;
    border-radius: var(--radius-card);
    /* Fallback-Verläufe aus dem Handover, bis die Fotos kuratiert sind. */
    background: var(--gradient-photo-a);
}

/* Das zweite Bild sitzt laut Handover 32 px tiefer als das erste. */
.photo-pair__item--offset {
    margin-top: var(--space-6);
    background: var(--gradient-photo-b);
}

/* Auf der Reiterferien-Seite nennt das Handover 260 px statt 280 px. */
.photo-pair--compact .photo-pair__item {
    height: 260px;
}

/*
 * Liegt ein Bild am Platz, ist `.photo-pair__item` der Lightbox-Knopf und das
 * Bild darin füllt ihn. Die Höhe steht am Knopf (oben), damit ein gefülltes und
 * ein leeres Feld nebeneinander gleich hoch bleiben.
 */
.photo-pair__media {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-card);
    object-fit: cover;
}

/* --- Reiterstüberl ------------------------------------------------------ */

.tavern-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

/* --- Angebote ----------------------------------------------------------- */

.offers-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.camps-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

/* Gerahmte Box mit Innenabstand („Gut zu wissen“, Preiskarte). */
.info-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-lg);
}

.info-card__title {
    font-family: var(--font-heading);
    font-size: 19px;
    color: var(--color-near-black);
}

.price-tag {
    font-family: var(--font-heading);
    font-size: 30px;
    color: var(--color-near-black);
}

.session-list {
    display: grid;
    gap: var(--space-2);
}

.session {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.session__title {
    font-weight: 700;
}

.session__dates {
    margin-right: auto;
    color: var(--color-text-secondary);
    font-size: var(--font-size-meta);
}

.region-tip {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.region-tip__media {
    display: block;
    height: 200px;
    border-radius: var(--radius-card);
    background: var(--gradient-photo-a);
}

.region-tip:nth-child(2) .region-tip__media {
    background: var(--gradient-photo-b);
}

.region-tip:nth-child(3) .region-tip__media {
    background: var(--gradient-natural);
}

.region-tip__title {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--color-near-black);
}

@media (max-width: 1024px) {
    .tavern-layout,
    .offers-layout,
    .camps-layout {
        grid-template-columns: 1fr;
    }

    .photo-pair__item--offset {
        margin-top: 0;
    }

    .session {
        flex-wrap: wrap;
    }
}

/* --- Preise & Buchung --------------------------------------------------- */

.pricing-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.pricing-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

/* Gerahmter, abgerundeter Rahmen um eine Tabelle (Preistabelle). */
.table-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-lg);
    overflow: hidden;
}

.price-table th:not(:first-child),
.price-table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.price-table__price {
    font-weight: 700;
    color: var(--color-near-black);
}

/* Zusatz zur Leistung („pro Einheit, ca. 20–30 Minuten“) unter der Bezeichnung. */
.price-table__label-note {
    display: block;
    color: var(--color-text-meta);
    font-size: var(--font-size-small);
}

.price-table__note {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-natural);
    color: var(--color-text-secondary);
    font-size: var(--font-size-meta);
}

/* Die Fußnoten der Reitpreis-Tabelle kommen aus einer Textseite und damit als
   mehrere Absätze in einem Kasten. base.css nimmt Absätzen den Außenabstand —
   hier braucht es ihn wieder, sonst kleben die Sätze aneinander. */
.price-table__note > p + p {
    margin-top: var(--space-2);
}

/* Stornostaffel: drei Prozent-Karten. */
.cancellation__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.cancellation__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.cancellation__rate {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    color: var(--color-green);
}

.cancellation__rate--mid {
    color: var(--color-booked-text);
}

.cancellation__rate--high {
    color: var(--color-warning);
}

.cancellation__when {
    color: var(--color-text-meta);
    font-size: var(--font-size-meta);
    line-height: var(--line-height-compact);
}

/* Online-Buchung: toubiz-Strecke als iframe, davor (ohne Einwilligung) der
   gestreifte Hinweis mit Verweis auf die Cookie-Einstellungen. */
.booking-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-lg);
    overflow: hidden;
}

.booking-box__head {
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 19px;
    color: var(--color-near-black);
}

.booking-box__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 260px;
    padding: var(--space-6) var(--space-5);
    background: repeating-linear-gradient(
        45deg,
        var(--color-surface-alt),
        var(--color-surface-alt) 14px,
        var(--color-surface-natural) 14px,
        var(--color-surface-natural) 28px
    );
    text-align: center;
}

.booking-box__title {
    font-weight: 700;
    color: var(--color-text-secondary);
}

.booking-box__text {
    max-width: 34ch;
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
}

.booking-box__cta {
    margin-top: var(--space-2);
}

/* Die Höhe der fremden Strecke lässt sich von außen nicht messen (andere
   Herkunft), deshalb ein fester Rahmen, in dem toubiz selbst scrollt. Auf
   kleinen Geräten deckelt die Fensterhöhe, damit der Rahmen die Seite nicht
   auffrisst. */
.booking-box__frame {
    display: block;
    width: 100%;
    height: min(780px, 85vh);
    border: 0;
}

.booking-box__foot {
    margin: 0;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
    line-height: var(--line-height-compact);
}

/* Kontakt-Karte (dunkel) mit Anruf- und E-Mail-Weg. */
.contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-card-lg);
    background: var(--color-near-black);
    color: #fff;
}

.contact-card__title {
    font-family: var(--font-heading);
    font-size: 19px;
}

.contact-card__text,
.contact-card__hours {
    color: rgba(255, 255, 255, .72);
    font-size: var(--font-size-meta);
}

.contact-card__mail {
    color: #fff;
    font-size: var(--font-size-meta);
    text-align: center;
    text-decoration: underline;
}

.contact-card__mail:hover {
    color: #fff;
}

@media (max-width: 1024px) {
    .pricing-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Anfrageformular ---------------------------------------------------- */

.inquiry-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.inquiry-fieldset {
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.inquiry-fieldset__legend {
    padding: 0 0 var(--space-3);
    color: var(--color-near-black);
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
}

.inquiry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.inquiry-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/*
 * Honeypot: aus dem Sichtfeld geschoben statt display:none. Bots erkennen
 * display:none teilweise und lassen das Feld dann aus.
 */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .inquiry-layout {
        grid-template-columns: 1fr;
    }

    .inquiry-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Gästebuch ---------------------------------------------------------- */

.guestbook-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.guestbook-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.guestbook-entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-lg);
}

.guestbook-entry__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.guestbook-entry__name {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--color-near-black);
}

.guestbook-entry__date {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    white-space: nowrap;
}

.guestbook-entry__text {
    font-size: 14.5px;
    line-height: 1.7;
}

.guestbook-more {
    align-self: flex-start;
    color: var(--color-green);
    font-size: 14px;
    font-weight: 700;
}

.guestbook-more:hover {
    color: var(--color-green-dark);
}

/* Formular in der rechten Spalte — sticky wie die Anfrage-Box der Detailseite. */
.guestbook-form {
    position: sticky;
    top: var(--sticky-offset);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-lg);
    background: var(--color-surface);
}

.guestbook-form__title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 400;
    color: var(--color-near-black);
}

.guestbook-form__note {
    color: var(--color-text-muted);
    font-size: 11.5px;
    line-height: var(--line-height-compact);
}

@media (max-width: 1024px) {
    .guestbook-layout {
        grid-template-columns: 1fr;
    }

    .guestbook-form {
        position: static;
    }
}

/* --- Site-Footer -------------------------------------------------------- */

.site-footer {
    padding: var(--section-gap) 0 var(--space-6);
    background: var(--color-near-black);
    color: #fff;
}

.site-footer a {
    color: #fff;
}

/*
 * Alles, was im Fußbereich als Sekundärtext gedacht ist, muss dort hell sein.
 * Die Regel steht bewusst als Ausnahme im Fußbereich und nicht an den einzelnen
 * Komponenten: sonst müsste jede von ihnen wissen, auf welchem Grund sie liegt.
 */
.site-footer .field__label,
.site-footer .text-secondary,
.site-footer .meta {
    color: var(--color-text-on-dark);
}

.site-footer a:hover {
    /* Auf dem dunklen Grund eine Spur heller — Begründung am Token. */
    color: var(--color-green-on-dark);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-6);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
}

.footer-link--soon {
    color: rgba(255, 255, 255, .5);
    cursor: default;
}

.site-footer__copyright {
    margin-top: var(--space-6);
    /*
     * Auf dem dunklen Fußbereich gilt die Gegenrichtung: das dunkle
     * Sekundärgrau käme hier auf 2,72:1. Dieser Wert erreicht 6,58:1.
     */
    color: var(--color-text-on-dark);
    font-size: var(--font-size-small);
}

address {
    font-style: normal;
    line-height: var(--line-height-body);
}

@media (max-width: 1024px) {
    .availability__form {
        grid-template-columns: 1fr;
    }

    .site-header__inner {
        position: relative;
    }

    /* Umschalter (Burger) mit ≥ 44 px Hit-Target. */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--color-near-black);
        cursor: pointer;
    }

    /* Drei Balken aus einem Element (Mitte) plus zwei Pseudo-Elementen. */
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        display: block;
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform .2s ease, background-color .2s ease;
    }

    .nav-toggle__bars {
        position: relative;
    }

    .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;
    }

    /* Geöffnet: mittlerer Balken verschwindet, äußere bilden ein Kreuz. */
    .nav-toggle--open .nav-toggle__bars {
        background: transparent;
    }

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

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

    /* Aufklapp-Panel: standardmäßig verborgen, sitzt unter dem Kopf. */
    .site-header__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        padding: var(--space-4);
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-floating);
    }

    .site-header__menu.is-open {
        display: flex;
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav__list li {
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__list li:last-child {
        border-bottom: none;
    }

    .nav__link {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 16px;
    }

    .site-header__aside {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .site-header__aside .btn--pill {
        justify-content: center;
        min-height: 44px;
    }

    .site-header__phone {
        justify-content: flex-start;
        min-height: 44px;
        border-radius: var(--radius-control);
    }

    /* Im aufgeklappten Menü ist Platz, und ein einzelner Hörer zwischen
       gestapelten Textzeilen sähe aus, als fehlte etwas. */
    .site-header__phone-number {
        display: inline;
    }
}

/* --- Cookie-Hinweis und Einwilligung ------------------------------------ */

/*
 * Der Hinweis liegt fest am unteren Rand und überlagert die Seite, ohne sie zu
 * sperren: Lesen und Scrollen gehen weiter. Er ist keine Lightbox — deshalb
 * kein Backdrop und kein Fokus-Fang.
 */
.cookie-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-floating);
}

.cookie-banner__inner {
    display: grid;
    /* Die rechte Spalte ist so breit, dass die drei Antworten in eine Zeile
       passen — sonst steht eine allein und sieht nach Nachgedanke aus. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    gap: var(--grid-gap);
    align-items: start;
}

.cookie-banner__title {
    font-size: var(--font-size-card-title);
    line-height: var(--line-height-heading);
}

.cookie-banner__text {
    max-width: 62ch;
    font-size: var(--font-size-meta);
    line-height: var(--line-height-compact);
}

.cookie-banner__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--font-size-meta);
}

.consent-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.consent-form__details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4);
}

.consent-form__summary {
    cursor: pointer;
    min-height: var(--min-touch-target);
    display: flex;
    align-items: center;
    font-size: var(--font-size-meta);
    font-weight: 600;
    color: var(--color-near-black);
}

.consent-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.consent-form__actions .btn {
    min-height: var(--min-touch-target);
}

.consent-categories {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding: 0;
}

.consent-categories__name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-meta);
    font-weight: 600;
    color: var(--color-near-black);
}

.consent-categories__text {
    margin-top: var(--space-1);
    font-size: var(--font-size-small);
    line-height: var(--line-height-compact);
    color: var(--color-text-secondary);
}

/* Einstellungsseite: dieselben Bausteine, nur in Lesebreite. */
.consent-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 68ch;
}

@media (max-width: 1024px) {
    .cookie-banner__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .cookie-banner {
        /* Auf kleinen Geräten darf der Hinweis nicht die halbe Seite fressen. */
        max-height: 80vh;
        overflow-y: auto;
        padding: var(--space-4) 0;
    }

    .consent-form__actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --- Schwebender Anrufknopf --------------------------------------------- */

/*
 * Unten rechts auf jeder öffentlichen Seite (templates/layout/_call_button.html.twig).
 * Eingeklappt ein runder Knopf mit Hörer, bei Hover oder Tastaturfokus wächst
 * die Nummer nach links heraus.
 *
 * **z-index 30, also unter dem Cookie-Hinweis (40).** Solange der Hinweis
 * steht, verschwindet der Knopf dahinter, und das ist richtig herum: der
 * Hinweis will eine Entscheidung, der Knopf kann warten. Ihn darüberzulegen
 * hieße, auf schmalen Geräten die Antwortknöpfe zu verdecken — und die Höhe
 * des Hinweises kennt niemand vorher.
 */
.call-fab {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 30;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 56px;
    min-height: 56px;
    padding: 0 17px;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: var(--shadow-floating);
}

.call-fab:hover,
.call-fab:focus-visible {
    background: var(--color-green-dark);
    color: #fff;
}

.call-fab__icon {
    width: 22px;
    height: 22px;
    flex: none;
}

/*
 * Eingeklappt über `max-width: 0`, nicht über `display: none`: eine Breite
 * lässt sich weich animieren, und der Text bleibt für Suchmaschinen und
 * Screenreader lesbar. `overflow: hidden` schneidet ihn dabei sauber ab.
 */
.call-fab__label {
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition:
        max-width .2s ease,
        opacity .2s ease,
        margin-left .2s ease;
}

/*
 * Nur wo es einen Zeiger gibt, der schweben kann. Auf Touch-Geräten gibt es
 * kein Hover — dort bliebe der Knopf entweder für immer schmal (richtig: ein
 * Tipp wählt ohnehin) oder er klappte beim Antippen kurz auf und wirkte kaputt.
 */
@media (hover: hover) {
    .call-fab:hover .call-fab__label {
        max-width: 12rem;
        margin-left: var(--space-2);
        opacity: 1;
    }
}

/* Tastatur: der Fokus klappt immer aus, auch auf Touch-Geräten mit
   angeschlossener Tastatur. Ohne das wüsste niemand, welche Nummer da wählt. */
.call-fab:focus-visible .call-fab__label {
    max-width: 12rem;
    margin-left: var(--space-2);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .call-fab__label {
        transition: none;
    }
}

@media (max-width: 640px) {
    /* Näher an die Ecke: auf einem Telefon ist jeder Rand Inhalt, den der
       Knopf sonst verdeckt. */
    .call-fab {
        right: var(--space-4);
        bottom: var(--space-4);
    }
}

/* Auf Papier gibt es nichts zu wählen. */
@media print {
    .call-fab {
        display: none;
    }
}

/* --- Anklickbares Bild (Lightbox) --------------------------------------- */

/*
 * Jedes vergrößerbare Bild steckt in einem Knopf (templates/layout/_lightbox.html.twig).
 * Ein Knopf und kein `div` mit Klick-Handler, damit Tastatur und Screenreader
 * ihn als bedienbares Element behandeln — die Kehrseite ist, dass der Knopf die
 * Stelle des Bildes im Layout einnimmt und dessen Maße erben muss.
 */
.lightbox-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    /* Der Knopf ist nur Halter — die Rundung sitzt am Bild darin. */
    line-height: 0;
}

.lightbox-thumb img {
    display: block;
}

/* Sichtbare Rückmeldung, dass hier etwas passiert. */
.lightbox-thumb:hover img,
.lightbox-thumb:focus-visible img {
    opacity: .92;
}