/* ============================================================
   css/05-components.css
   Bausteine aller Seiten: Navigation, Kästen, Knöpfe, Footer,
   Karte, Kalender, Seiten-Eigenes

   Letzte der fünf CSS-Dateien, nach 01-reset, 02-variables,
   03-typography, 04-layout. Wird asynchron nachgeladen;
   was beim ersten Bild sichtbar ist, steht zusätzlich in
   partials/critical.css.

   REGELN

   - Werte kommen aus 02-variables.css. Keine neuen Farben oder
     Abstände als Literal -- erst dort eine Variable anlegen.
   - Raster (welche Spalte wie breit, Reihenfolge auf Mobile)
     gehört in 04-layout.css, nicht hierher.
   - WAS IN partials/critical.css STEHT, MUSS HIER GENAUSO STEHEN.
     Der Inline-Block gewinnt beim ersten Bild; laufen die beiden
     auseinander, springt die Seite beim Nachladen. Nach jeder
     Änderung an einer Regel über der Falz beide abgleichen.
   - Neue Seite mit eigenen Bausteinen: eigener Abschnitt am Ende,
     Titel = Seite(n) und Datum, wie AGENTUR-SEITEN.
   - Mehrere Abschnitte sind Nachträge zu früheren (z. B.
     ERGÄNZUNGEN, KNÖPFE IN DER SEITENSPALTE) und überschreiben
     sie bewusst -- darum stehen sie weiter hinten. Nicht nach
     vorne ziehen, ohne die Reihenfolge zu prüfen.

   Stand 01.11.2026.

   GLIEDERUNG
   Zum Springen den Abschnittstitel suchen (Zeilennummern
   wandern bei jeder Änderung).

    1. Navigation
         NAVBAR DESKTOP AND MOBILE
         MOBILE NAV
         ARTIST SIDEBAR NAV
         STICKY SCHNELLZUGRIFF-BAR
    2. Kästen und Text
         GRID CONTENT BOXES
         TEXT BLOCK STABILIZATION   (.post-heading, .post-lead,
                                     .post-article, .figcap)
    3. Künstlerseite
         ARTIST OFFER TAGS / OFFER TAGS BOX STABILIZATION
         ARTIST AWARDS / PREIS-BILDER
         SPOTLIGHT
         SHOW PRODUCTION TEAM / SHOW ARTIKEL PREMIERE/DERNIERE BOX
         EVENT FRAME KALENDAR
         KLAPPBOXEN (.collapse-mobile)
         PREVIOUS CREDITS
         ARTIST ANFRAGE-BUTTON / ARTIST KNOPFZEILE / ARTIST WEBSITE
    4. Kontakt
         KONTAKT/INDEX?   (.company-intro; Startseite nimmt
                           seit 01.11. .post-lead ohne Kasten)
         KONTAKT: FORMULAR / ANFRAGEFORMULAR
         KONTAKT-KARTE    (.contact-card, auch Agentur-Seiten)
    5. Medien und Stabilität (CLS)
         ARTIST-SEITE: MOBILE — BOX-OPTIK
         LAZY LOADING / ASPECT RATIO / ARTIST, SHOW, STYLING
    6. Dialog und Social
         DIALOG: TICKET INFO
         Social Icon Hover
    7. Knöpfe
         BUTTONS: MAIN, WHITE, GHOST, GHOST INVERS, ORANGE, BLUE
    8. Footer und Karte
         FOOTER   (mit Jubiläum neben dem Kontakt, 22.10.)
         MAP CONTAINER / VOLLBILD / MAP PLACEHOLDER
         SWISSTOPO KARTE (MapLibre)
    9. Cookies und eingebettete Medien
         CookieConsent Custom Styles
         VIDEO/AUDIO EMBED WRAPPER / NATIVE AUDIO-DATEIEN
   10. Hilfsregeln
         RESPONSIVE BREAKPOINTS
         HILFSKLASSEN + KARTEN-APP-BUTTONS / TAP-TARGET-FIX
         SECTION SPACER
         E-MAIL-BUTTONS (09-mailbutton.js) + HONEYPOT
   11. Kalender
         KALENDER: EVENT-AUSGABE   (Unterabschnitte 1-10, eigene
                                    Gliederung am Abschnittsanfang)
   12. Nachträge
         PRIVATSPHÄRE-BUTTON
         UEBERSCHRIFTEN-OPTIK (.heading-accent, .heading-sub)
         SILBENTRENNUNG (.hyphens)
         ERGÄNZUNGEN FÜR 05-components.css (Irre Welle)
         SPRUNGZIELE UNTER DER STICKY-BAR
   13. Seiten
         PRODUKTIONEN (/kunst/produktionen.html)
         MEDIEN (/kunst/medien.html) / MEDIEN – ANMELDUNG
         KNÖPFE IN DER SEITENSPALTE (22.10.)
         AGENTUR-SEITEN (nathalie-buchli, ueber-uns -- 22.10.;
                        freunde-familie, angebote -- 26.10.)
         HINWEIS-SEITEN (datenschutz -- 01.11.)
         STARTSEITE (index.html -- 01.11.)
         TERMINSEITEN (termine/termin.php -- 09.11.)
   ============================================================ */


/* ============================================
   NAVBAR DESKTOP AND MOBILE
   ============================================ */
.MainNav {
    position: static;
    width: 100%;
    z-index: 1000;
    border-top: var(--nav-border-top);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--color-border-nav);
    transition: background-color var(--transition-normal), transform var(--transition-slow), top var(--transition-normal);
    height: var(--nav-height);
}

.MainNav.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: var(--nav-height);
    box-shadow: var(--shadow-sticky);
}

.MainNav.is-hidden {
    transform: translateY(-100%);
}

.MainNav.menu-open {
    position: fixed;
    top: 0;
    height: var(--nav-height);
    z-index: 1000;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nav-padding-y) 20px;
    max-width: var(--container-max-width);
    margin: 0 auto;
    height: 100%;
}

.nav-logo img {
    height: var(--nav-logo-height);         /* fest -> kein Springen beim Laden */
    width: auto;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.nav-logo img:hover {
    opacity: 0.8;
}

/* Nur noch ein Icon statt "MENU ☰" -- quadratisch und mit festen
   Massen, damit der Wechsel Burger -> Kreuz die Buttonbreite nicht
   ändert und das Logo daneben nicht springt. 44px = komfortable
   Touch-Zielgrösse. */
.nav-toggle {
    position: relative; /* Bezugspunkt für die absolut zentrierten Icons */
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0px solid var(--color-primary-faded);
    cursor: pointer;
    color: var(--color-primary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

/* :focus-visible statt :focus -- der Button behält nach einem Klick
   den Fokus, mit :focus bliebe der eingefärbte Zustand also hängen,
   bis irgendwo anders hingeklickt wird. Nach dem Schliessen soll das
   Burger-Icon aber wieder im Ausgangszustand stehen (transparenter
   Grund, Strich in --color-primary).
   :hover zusätzlich auf Zeigergeräte begrenzt: Safari auf iOS hält
   :hover nach dem Antippen aktiv ("sticky hover") -- ohne die Media
   Query bliebe der Button dort ebenfalls eingefärbt. */
@media (hover: hover) {
    .nav-toggle:hover {
        background: var(--color-primary-faded);
        color: #fff;
    }
}

.nav-toggle:active {
    background: var(--color-primary-faded);
    color: #fff;
}

.nav-toggle:focus {
    outline: none;
}

/* Umriss nur bei Tastaturbedienung -- ohne ihn wäre die Nav für
   Tastaturnutzer blind zu bedienen. */
.nav-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Absolut zentriert statt über line-height/text-align: SVG hat keine
   Grundlinie im Sinne von vertical-align, und der Zeilenumbruch
   zwischen den beiden <svg> im Markup ist ein echter Textknoten, der
   bei text-align:center mitzentriert würde. Absolut positioniert
   entfallen beide Effekte -- und es funktioniert unabhängig davon,
   welchen display-Wert die Breakpoints dem Button geben. */
.nav-toggle-icon {
    /* Zentriert OHNE transform: sonst dreht "rotate" (Burger <-> Kreuz)
       nicht um die Icon-Mitte, das Icon schwenkt aus dem Button und
       ragt über den Rand (horizontale Scrollbar auf Mobile). */
    position: absolute;
    inset: 0;
    margin: auto;
    width: 33px;
    height: 33px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

/* Burger <-> Kreuz: Überblenden mit Drehung.
   Beide Icons liegen übereinander (absolut zentriert, s.o.).
   Beim Öffnen dreht der Burger weg und blendet aus, das Kreuz
   dreht aus der Gegenrichtung herein -- gleiches Tempo wie die
   Chevrons (--transition-normal). Die Icons sind per inset/margin
   zentriert (ohne transform), damit rotate um ihre Mitte dreht.
   Zwei Signale abgedeckt (aria-expanded am Button, .menu-open an
   der MainNav) -- es genügt, wenn das Nav-JS eines davon pflegt. */
.nav-toggle-icon {
    transition: opacity var(--transition-normal),
                rotate var(--transition-normal);
}

/* Ausgangszustand: Burger sichtbar, Kreuz versteckt + vorgedreht */
.nav-toggle-icon--menu {
    opacity: 1;
    rotate: 0deg;
}
.nav-toggle-icon--close {
    opacity: 0;
    rotate: -90deg;
}

/* Offen: Burger dreht weg, Kreuz dreht herein */
.MainNav.menu-open .nav-toggle-icon--menu,
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--menu {
    opacity: 0;
    rotate: 90deg;
}
.MainNav.menu-open .nav-toggle-icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--close {
    opacity: 1;
    rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-icon { transition: none; }
}

.nav-desktop {
    display: none;
}

.nav-primary, .nav-secondary {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.nav-secondary {
    margin-top: 6px;
}

.nav-primary a {
    display: block;
    padding: 10px 18px;
    color: var(--color-text-strong);
    font-family: var(--font-sans-semibold);
    font-size: 16px;
    letter-spacing: 0.5px;
    transition: color var(--transition-fast);
}

.nav-primary a:hover {
    color: var(--color-primary);
}

.nav-secondary a {
    display: block;
    padding: 8px 18px;
    color: var(--color-primary);
    font-family: var(--font-sans-thin);
    font-size: 16px;
    letter-spacing: 0.5px;
    transition: color var(--transition-fast);
}

.nav-secondary a:hover {
    color: var(--color-text-strong);
}

/* ============================================================
   MOBILE NAV — im Stil des CookieConsent-Einstellungsfensters
   ============================================================
   Vollbreite Textzeilen  ->  abgesetzte Kacheln (1px Rahmen,
                              .4rem Radius, .375rem Abstand)
   CSS-Dreieck (.caret)   ->  Chevron rechts, gleiche Form und
                              Drehung wie bei Preise/Bisheriges
   Trennlinien pro Zeile  ->  Rahmen um die aufgeklappte Liste,
                              Sublinks intern per 1px getrennt

   Stand v2:
   1. Kacheln flacher -- min-height 58px -> 46px,
      vertikales Padding 1.1em -> 0.7em. Die Cookie-Kategorien
      brauchen 58px wegen der Toggle-Schalter darin; hier steht
      nur Text, entsprechend darf die Zeile niedriger sein.
   2. Grauskala eine Stufe dunkler und leicht ins Warme
      gezogen (Richtung rgb(209,203,203) / --color-primary),
      damit sich die Kacheln vom fast weissen Menühintergrund
      rgba(253,253,253,.97) klarer abheben.
   3. Aufklapp-Status wird jetzt aus DREI möglichen Signalen
      gelesen (.active am Button, aria-expanded="true" am
      Button, .open an der Liste) -- vorher nur .active.
      Siehe Kommentar beim Pfeil-Kreis weiter unten.
   ============================================================ */

.nav-mobile {
    /* Die drei Grautöne zentral -- zum Nachjustieren nur hier
       anfassen, nicht in den acht Regeln weiter unten. */
    --nav-tile-bg: #f2efee;          /* vorher #f9f9f9 */
    --nav-tile-hover-bg: #e9e4e3;    /* vorher #f1efef */
    --nav-tile-expanded: #ded7d6;    /* vorher #e6e2e2 */

    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    /* Analog .pm__body (1em 1.4em) -- Kacheln brauchen Luft zum
       Rand, sonst wirken sie wie abgeschnittene Vollbreitzeilen. */
    padding: 1em 1.2em 1.2em;
    background: var(--nav-mobile-bg);
    box-shadow: var(--shadow-menu, 0 4px 14px rgba(111, 82, 77, 0.18));
    /* Basis-Typo einmal am Container, wie #cc-main sie setzt */
    font-family: var(--font-sans-semibold);
    font-size: 16px;
    color: var(--color-primary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transition-normal, 0.3s ease),
                transform var(--transition-normal, 0.3s ease),
                visibility var(--transition-normal, 0.3s ease);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-mobile.open {
    display: block;
}

.MainNav.menu-open .nav-mobile {
    position: absolute;
    top: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
}

/* --- Gemeinsame Kachel-Basis -------------------------------
   Ein Selektor für alle drei Zeilentypen (Dropdown-Kopf,
   Primär-Link, Sekundär-Link). Unterschiede nur bei der
   Textfarbe weiter unten. */
.mobile-dropdown-toggle,
.mobile-nav-primary a,
.mobile-nav-secondary a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0.7em 1.2em;
    margin-bottom: 0.375rem;
    background: var(--nav-tile-bg);
    border: 1px solid var(--nav-tile-bg);
    border-radius: 0.4rem;
    /* Hermes Regular = Mittelweg zwischen Thin und Semibold.
       font-weight: 500 auf Hermes Thin hätte keine Wirkung: der
       Browser verfettet künstlich erst ab 600. */
    font-family: var(--font-sans-regular);
    font-weight: normal;
    font-size: 0.95em;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                color var(--transition-fast, 0.15s ease);
}

.mobile-dropdown-toggle:hover,
.mobile-nav-primary a:hover,
.mobile-nav-secondary a:hover {
    background: var(--nav-tile-hover-bg);
    border-color: var(--nav-tile-hover-bg);
}

/* Primär = dunkler Fliesstext, Sekundär = Kulturist-Braun */
.mobile-nav-primary a,
.mobile-dropdown-toggle {
    color: var(--color-text-strong);
}

.mobile-nav-secondary a {
    color: var(--color-primary);
}

.mobile-nav-primary a:hover,
.mobile-dropdown-toggle:hover {
    color: var(--color-primary);
}

.mobile-nav-secondary a:hover {
    color: var(--color-text-strong);
}

/* --- Aufklappmenü (Künstler:innen) --------------------------- */
.mobile-dropdown {
    border-bottom: none; /* alte Volllinie entfällt, Kachel trennt selbst */
}

/* Text links, Chevron rechts -- wie bei Preise/Bisheriges */
.mobile-dropdown-toggle {
    position: relative;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--nav-tile-bg); /* explizit, überschreibt border:none */
}

/* --- Aufklapp-Status: drei mögliche Signale -----------------
   Welche Klasse das Nav-JS beim Öffnen setzt, ist je nach
   Implementierung unterschiedlich. Deshalb hier alle drei
   gängigen Varianten abgedeckt, statt das JS anzupassen:

     a) .active am Button          (Demo-JS, alte CSS-Konvention)
     b) aria-expanded="true"       (barrierefreie Implementierungen)
     c) .open an der Liste         (per :has() am Elternteil geprüft)

   :has() ist seit 2023 in allen aktuellen Browsern verfügbar.
   Fällt es aus, greifen immer noch a) und b) -- und selbst
   ohne alles bleibt das Menü bedienbar, nur ohne Drehung. */
.mobile-dropdown-toggle.active,
.mobile-dropdown-toggle[aria-expanded="true"],
.mobile-dropdown:has(.mobile-dropdown-list.open) .mobile-dropdown-toggle {
    margin-bottom: 0;
    border-color: var(--nav-tile-expanded);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mobile-dropdown-toggle.active:hover,
.mobile-dropdown-toggle[aria-expanded="true"]:hover,
.mobile-dropdown:has(.mobile-dropdown-list.open) .mobile-dropdown-toggle:hover {
    background: var(--nav-tile-expanded);
    border-color: var(--nav-tile-expanded);
}

/* Chevron rechts -- gleiche Form und Animation wie bei den
   Klappboxen (.collapse-mobile > summary::after). Sitzt im
   bestehenden <span class="caret">, kein Markup-Eingriff nötig.
   Farbe = Textfarbe des Buttons (wechselt beim Hover mit).
   Zu: zeigt nach unten, offen: nach oben. */
.mobile-dropdown-toggle .caret {
    /* Runder Chevron wie Burger/Kreuz (--icon-chevron-down) */
    display: block;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    border: none;                            /* altes Border-Dreieck zurücksetzen */
    background: currentColor;
    -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
            mask: var(--icon-chevron-down) center / contain no-repeat;
    rotate: 0deg;
    transition: rotate var(--transition-normal);
}

.mobile-dropdown-toggle.active .caret,
.mobile-dropdown-toggle[aria-expanded="true"] .caret,
.mobile-dropdown:has(.mobile-dropdown-list.open) .mobile-dropdown-toggle .caret {
    rotate: -180deg;
}

/* --- Sublinks ----------------------------------------------- */
.mobile-dropdown-list {
    display: none;
    background: #fff;
    border: 1px solid var(--nav-tile-expanded);
    border-top: none;
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    margin-bottom: 0.375rem;
    overflow: hidden;
    box-shadow: none; /* Rahmen statt Schatten, wie im Cookie-Modal */
}

.mobile-dropdown-list.open {
    display: block;
    padding: 0;
    opacity: 1;
    transform: none;
    box-shadow: none;
}

.mobile-dropdown-list a {
    display: block;
    padding: 0.7em 1.2em;
    color: var(--color-primary);
    font-family: var(--font-sans-regular);
    font-weight: normal;
    font-size: 0.9em;
    line-height: 1.5em;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease);
}

/* Entspricht .pm__section-desc-wrapper>:not(:last-child) */
.mobile-dropdown-list a:not(:last-child) {
    border-bottom: 1px solid var(--nav-tile-hover-bg);
}

.mobile-dropdown-list a:hover {
    background: var(--nav-tile-bg);
    color: var(--color-text-strong);
}

/* --- Gruppen-Zwischentitel (optional) ----------------------- */
.mobile-nav-label {
    margin: 1.2em 0 0.5em;
    padding: 0 0.2em;
    font-family: var(--font-sans-thin);
    font-size: 0.82em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-primary);
    opacity: 0.75;
}

/* --- Fokus: Tastaturbedienung sichtbar halten --------------- */
.mobile-dropdown-toggle:focus-visible,
.mobile-dropdown-list a:focus-visible,
.mobile-nav-primary a:focus-visible,
.mobile-nav-secondary a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .nav-mobile,
    .mobile-dropdown-toggle,
    .mobile-dropdown-toggle .caret,
    .mobile-dropdown-list a {
        transition: none;
    }
}

/* ============================================
   ARTIST SIDEBAR NAV (Desktop Only)
   ============================================ */
.artist-sidebar {
    background-color: var(--color-bg-lighter);
    border-right: 1px solid var(--color-border-light);
    text-align: left;
}

.ArtistNaviDesktop {
    color: var(--color-primary);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
    line-height: var(--line-height-verybig); /*35px*/
    letter-spacing: 0.5px;
    text-align: left; /* !important entfernt */
    padding-left: 0;
    margin-left: 0;
}

.ArtistNaviDesktop li {
    text-align: left; /* !important entfernt */
    list-style: none;
}

.ArtistNaviDesktop a {
    color: var(--color-primary);
    display: block;
    padding: 4px 0;
    transition: color var(--transition-fast);
    text-align: left; /* !important entfernt */
    margin-left: 0;
    text-decoration: none;
}

.ArtistNaviDesktop a:hover {
    color: #000;
}

/* --------------------------------------------
   ARTIST_SIDEBAR Sticky-Verhalten (nur Desktop)

   Aufteilung:
   - Die SPALTE (.artist-sidebar) wird auf volle Row-Höhe gedehnt und
     dient nur noch als unsichtbare Laufstrecke fürs Sticky.
   - Das <aside> traegt die Box-Optik und klebt am Viewport.

   WICHTIG: .grid-box setzt height: 100%. Ein Flex-Item mit expliziter
   Hoehe wird NICHT mehr auf Row-Hoehe gedehnt (align-self: stretch greift
   nur bei height: auto) -- und 100% gegen eine .row ohne feste Hoehe
   faellt auf Inhaltshoehe zurueck. Deshalb hier zuruecksetzen.
   Selektor .artist-sidebar.grid-box (0,2,0) schlaegt die spaetere
   .artist-sidebar-Regel weiter unten in dieser Datei.
   -------------------------------------------- */
@media (min-width: 992px) {

    /* Spalte: nur Laufstrecke, keine sichtbare Box mehr */
    .artist-sidebar.grid-box {
        height: auto;
        align-self: stretch;
        background: transparent;
        border: none;
        padding: 0;
        margin-bottom: 0;
    }

    /* Die eigentliche sichtbare Karte */
    .artist-sidebar.grid-box > aside {
        position: sticky;
        /* Navbar-Hoehe + etwas Luft */
        top: calc(var(--nav-height) + 20px);

        /* Box-Optik, vorher auf der Spalte */
        background-color: var(--color-bg-lighter);
        border: 1px solid var(--color-border-light);
        border-radius: var(--border-radius-sm);
        padding: 20px;
        margin-right: calc(var(--grid-gutter) * 0.5);

        /* Falls die Liste laenger als der Viewport wird: eigener Scroll */
        max-height: calc(100vh - var(--nav-height) - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--transition-normal),
                    transform var(--transition-normal),
                    visibility 0s;
    }

    /* Wird per JS gesetzt: beim Runterscrollen und am Footer.
       Verhaelt sich damit wie .MainNav.is-hidden -- beim Zurueckscrollen
       ist die Liste sofort wieder da. */
    .artist-sidebar.grid-box > aside.is-hidden {
        opacity: 0;
        visibility: hidden; /* nicht mehr per Tab erreichbar */
        transform: translateY(-12px);
        transition: opacity var(--transition-normal),
                    transform var(--transition-normal),
                    visibility 0s linear 0.3s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .artist-sidebar > aside {
        transition: none;
    }
}

/* ============================================
   STICKY SCHNELLZUGRIFF-BAR (nur Mobile)
   Drei <button class="direct-btn">: Agenda, Newsletter,
   Privatsphäre. Logik in 03-sticky-bar.js.
   ============================================ */
.direct-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    background: var(--color-primary-faded);
    border-bottom: 1px solid var(--color-primary-faded);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;

    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 8px;                                /* Mindestabstand, auch wenn es eng wird */

    /* Gleiten statt Faden: iOS-Safari färbt Statusleiste und
       Adresszeile in der Farbe eines oben fixierten Elements --
       aber erst, wenn es deckend genug ist. Ein Fade erzeugt
       darum zwei Phasen (erst Leiste, dann Sprung ins Braun).
       Die Leiste ist deshalb immer voll deckend und gleitet
       herein, wie die Navbar (translateY) beim Verschwinden. */
    --bar-slide-in: 0.6s;                    /* weich hinein */
    --bar-slide-out: 0.35s;                  /* zügig hinaus, macht der Navbar Platz */

    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
    /* Ausblenden: gleitet hoch, visibility wechselt ERST DANACH */
    transition: transform var(--bar-slide-out) ease-in,
                visibility 0s var(--bar-slide-out);
}

.direct-sticky-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    /* Einblenden: sofort sichtbar, gleitet sanft herein und bremst weich ab */
    transition: transform var(--bar-slide-in) cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s 0s;
}

/* ---- Button: Masse identisch zu .btn-ghost & Co. ---- */
.direct-btn {
    /* <button>-Defaults zurücksetzen */
    -webkit-appearance: none;
    appearance: none;
    font: inherit;

    display: inline-flex;
    align-items: center;
    gap: 0.5em;

    background: var(--color-bg-lighter);
    color: var(--color-text-main);           /* Safari färbt Buttons sonst blau */
    cursor: pointer;

    font-family: var(--font-sans-thin);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;

    padding: var(--btn-padding);
    margin: 0;

    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;

    border: 1px solid var(--color-border-faint);
    border-radius: var(--border-radius-btn);
    box-shadow: var(--shadow-kulturist);
    transition: var(--transition-btn), transform 0.2s ease;
}

.direct-btn:active {
    transform: scale(0.96);
    background: var(--color-primary-deep);
    color: var(--color-text-white);
}

.direct-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- Icons: Grösse + Farbe folgen der Schrift ---- */
.direct-icon {
    display: inline-flex;
    font-size: 1.15em;                       /* Icons optisch gleich gross */
}

.direct-btn svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: currentColor;
}

.direct-btn svg path {
    fill: currentColor;                      /* falls der Pfad eigenes fill mitbringt */
}

/* ---- Sehr schmale Geräte: nur Icons (aria-label bleibt) ---- */
@media (max-width: 359px) {
    .direct-text { display: none; }
    .direct-btn  { padding: 0 12px; }
}

/* ---- Ab Desktop ausblenden ---- */
@media (min-width: 992px) {
    .direct-sticky-bar {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .direct-sticky-bar,
    .direct-btn {
        transition: none;
    }
}

/* ============================================
   GRID CONTENT BOXES
   ============================================ */
.content-wrapper {
    padding-top: 20px;
    padding-bottom: 40px;
    min-height: 80vh;
}

.grid-box {
    background-color: var(--color-bg-light-max);
    border: 1px solid var(--color-border);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--border-radius-sm);
    height: 100%;
}

/* Mobile: Kasten-Optik ablegen. Die Boxen stehen dort ohnehin nur
   untereinander (col-12), Fläche und Rahmen bringen also wenig --
   ohne sie fluchtet der Text bündig mit dem Footer, statt durch das
   Box-Padding 20px weiter innen zu sitzen. Der Seitenrand kommt
   allein vom Container-Padding (--grid-gutter in 04-layout.css).
   margin-bottom bleibt: es ist der einzige verbliebene Abstand
   zwischen den Boxen, sobald das Padding weg ist. */
@media screen and (max-width: 767px) {
    .grid-box {
        background: none;
        border: none;
        padding: 0;
        border-radius: 0;
    }

}

/*.grid-box h3 {
    margin-top: 0;
    color: var(--color-primary);
    font-family: var(--font-thin);
    border-bottom: 0.5px solid var(--color-primary);
    padding-bottom: 10px;
    margin-bottom: 15px;
}*/


/* ============================================
   TEXT BLOCK STABILIZATION (Prevents CLS via Font Swap)
   ============================================ */

/* === HEADINGS (H1/H2 in post-heading) ===
   Die Groesse kommt aus --font-size-h1. Auf Mobile setzt
   02-variables.css diese Variable kleiner -- hier ist dafuer
   nichts zu tun. */
.post-heading {
    font-family: var(--font-article-heading, 'Hermes Semibold', sans-serif);
    font-size: var(--font-size-h1, 30px);
    line-height: 1.2; /* Feste Höhe vorab definieren */
    margin-top: 0;
    margin-bottom: 4px;
    word-wrap: break-word;
}

/* Vorspann unter der Ueberschrift.
   .post-subtitle und .post-lead sind dasselbe und teilen sich
   deshalb eine Regel: der eine Name steht auf den Kuenstlerseiten
   (Untertitel unter dem Namen), der andere auf der Kalenderseite
   (Teasertext unter dem Titel). .post-lead hatte bisher gar keine
   Regel hier und lebte nur im Critical CSS seiner Seite -- ein
   Zustand, der beim naechsten Umbau still gekippt waere. */
.post-subtitle,
.post-lead,
.inquiry-lead {
    font-family: var(--font-article-subtitle, 'Sabon Roman', serif);
    font-size: var(--font-size-subtitle, 24px);
    line-height: 1.3; /* Konstant halten mit post-article */
    margin-bottom: 20px;
    margin-top: 0;
}

/* Auf Mobile faellt der Vorspann auf Grundgroesse: als Flaeche
   liest er sich dort ohnehin wie Fliesstext, und die zwei bis drei
   Zeilen bei 24px kosten mehr Hoehe, als sie an Gewicht bringen.
   Nicht ueber --font-size-subtitle geloest, weil h4 und
   .heading-sub dieselbe Variable nutzen und 18px dort zu klein
   waeren. */
@media (max-width: 991px) {
    .post-heading {
        margin-bottom: 2px;
    }

    .post-subtitle,
    .post-lead,
    .inquiry-lead {
        font-size: var(--font-size-base);
        line-height: 1.25;
        margin-bottom: 12px;
    }
}

/* === ARTICLE TEXT === */
.post-article {
    font-family: var(--font-article-text, 'Sabon Roman', serif);
    font-size: var(--font-size-base, 18px);
    line-height: var(--line-height-base, 1.3); /* Gleiche Höhe wie subtitle! */
    word-wrap: break-word;

    /* Container schon von Anfang am Platz haben */
    min-height: auto; /* Optional, wenn Text kurz sein könnte */
    margin-top: 0;
}

/* === FIGCAPTION === */
.figcap {
    font-family: var(--font-sans-thin, 'Hermes Thin', sans-serif);
    font-size: var(--font-size-verysmall, 11px);
    margin: 4px 0 0 0;
    float: none; /* Vermeidet Sprünge durch Float */
    display: block;
    text-align: right;
}

/* ============================================
   ARTIST OFFER TAGS
   ============================================ */
.offer-box {
    outline: none;
    margin-bottom: var(--margin-bottom-big);
}

.offer-tag {
    outline: none;
    margin: 2px 2px 5px 2px; /* Kurzform */
    color: var(--color-text-main); /* #0E0E0E durch Variable ersetzt */
    font-family: var(--font-event); /* Hermes Thin durch Variable ersetzt */
    -webkit-font-smoothing: antialiased; /* !important entfernt */
    padding: 6px 10px;
    opacity: 0.8;
    display: inline-block;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-kulturist);
    /* Alte Vendor-Prefixes für border-radius und box-shadow entfernt (heute unnötig) */
}
/* ============================================
   OFFER TAGS BOX STABILIZATION (Prevents CLS)
   ============================================ */
.offer-box {
    outline: none;
    margin-bottom: var(--margin-bottom-big, 25px);
    padding: 5px 0; /* Feste Padding-Werte vermeiden Sprünge */
}

.offer-tag {
    outline: none;
    margin: 2px 2px 5px 2px; /* Konsistente Abstände */
    color: var(--color-text-main, #0E0E0E);
    font-family: var(--font-event, 'Hermes Thin', sans-serif);
    -webkit-font-smoothing: antialiased;
    padding: 6px 10px;
    opacity: 0.8;
    display: inline-block;
    border-radius: var(--border-radius-sm, 3px);
    box-shadow: var(--shadow-kulturist);

    /* WICHTIG: Feste Höhe für konsistentes Layout vor Font-Load */
    line-height: 1.4;
    white-space: nowrap; /* Verhindert Umbruch innerhalb des Tags */
    min-width: fit-content;
}

/* ============================================
   ARTIST AWARDS
   Als <details id="awards-details"> umgesetzt:
   Desktop immer offen (JS + pointer-events), Mobile eingeklappt.
   Ohne JS bleibt das open-Attribut -> Preise immer sichtbar.
   ============================================ */
.artist-awards-box {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-sans-thin)!important;
    padding: 6px 10px;
    display: block;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-kulturist);
}
.artist-awards-heading {
    font-family: var(--font-sans-semibold)!important;
    font-size: var(--font-size-big);
    color: var(--color-primary);
    line-height: var(--line-height-base);
    margin-bottom: 0;                        /* nur im offenen Zustand, s. KLAPPBOXEN */
}
.artist-awards {
    font-family: var(--font-sans-thin)!important;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-base);
}
/* ============================================
   PREIS-BILDER (.award-row)
   Vorher: display:grid mit repeat(3, 1fr). Ein Grid
   reserviert seine drei Spalten, ob belegt oder nicht --
   ein einzelnes Bild klebte im linken Drittel.

   Jetzt Flex. Entscheidend ist die flex-basis: ein
   Drittel der Zeile, nicht 0. Damit passen immer genau
   drei nebeneinander, ein viertes bricht um. Mit
   flex-basis:0 bliebe alles einzeilig und vier Bilder
   schrumpften auf 66px.

   Gemessen, Bio-Spalte 325px / Tablet 728px:
     1 Bild    220px          mittig
     2 Bilder  je 150px       als Paar mittig
     3 Bilder  95 bzw. 150px  füllen die Zeile
     4 Bilder  3 + 1          Umbruchzeile mittig
     5 Bilder  3 + 2          Umbruchzeile mittig
   ============================================ */
.award-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* weniger als drei -> mittig statt linksbündig */
    align-items: end;          /* unterschiedlich hohe Bilder: Unterschriften auf einer Linie */
    gap: var(--grid-gutter);
}

.award-row > * {
    flex: 1 1 calc((100% - 2 * var(--grid-gutter)) / 3);
    min-width: 0;              /* sonst schrumpfen sie nicht unter ihre Bildbreite */
    max-width: 150px;          /* ohne Deckel liefe ein Bild über die ganze Spalte */
}

/* Ein einzelnes Bild darf grösser stehen. Browser ohne :has()
   ignorieren die Regel und bleiben bei 150px -- das Layout
   bricht dadurch nicht, es wird nur etwas kleiner. */
.award-row:has(> :only-child) > * { max-width: 220px; }

/* Ab vier Bildern: ohne diese Regel wächst das umgebrochene
   Bild allein auf 150px, während die drei darüber 95px breit
   sind. Der Deckel je Zeilendrittel hält alle gleich gross. */
.award-row:has(> :nth-child(4)) > * {
    max-width: min(150px, calc((100% - 2 * var(--grid-gutter)) / 3));
}

.award-row img { width: 100%; height: auto; }

/* ============================================
   SPOTLIGHT (Aktuelles über der Agenda)
   Frei austauschbarer Baustein für Gratulationen,
   Begrüssungen neuer Künstler, News. Wenn nichts
   aktuell ist, ganze <section> aus dem HTML nehmen.
   ============================================ */
/* Gleicher Schatten-Look wie .artist-awards-box / .previous-credits-box */
.spotlight-box {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-sans-thin)!important;
    font-weight: 600;
    padding: 6px 10px;
    display: block;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-kulturist);
    margin-bottom: var(--margin-bottom-verybig);   /* Desktop: Abstand zur Agenda */
}
.spotlight-heading {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    color: var(--color-primary);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-small);
}
.spotlight-figure { overflow: hidden; }      /* umschliesst die float:right-.figcap */
.spotlight-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sm);
}
.spotlight-text {
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-basesmall);   /* 01.11.: zwischen base und small */
    line-height: var(--line-height-base);
    margin-top: var(--margin-top-small);
}


/* ============================================
   SHOW PRODUCTION TEAM
   ============================================ */
.show-team-box {
    padding: 6px 10px;
    opacity: 0.8;
    display: block;
    border-bottom: thin;
    border-top: thin;
    /*border-radius: var(--border-radius-sm);
    box-shadow: 4px 4px 17px 0px rgba(111, 82, 77, 0.3);*/
    margin-top: var(--margin-top-base);
    margin-bottom: var(--margin-bottom-base);
}
.show-team {
    color: var(--color-text-main);
    font-family: var(--font-sans-thin);
    /*font-style: var(--font-style-italic);*/
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-base);
}
/* ============================================
   SHOW ARTIKEL PREMIERE/DERNIERE BOX
   ============================================ */
.prem-dern-show-box {
    padding: 20px 0px 20px 0px;
    /*opacity: 0.9;*/
    display: inline-block;
    font-family: var(--font-serif-bold);
    font-style: var(font-style-bold);
    font-size: var(--font-size-base);
   /* background-color: rgba(111, 82, 77, 0.6);
    color: white;*/
    line-height: var(--line-height-base);
    /*border: rgba(111, 82, 77, 0.3) thin solid;
    border-color: rgba(111, 82, 77, 0.3);*/
    /*border-radius: var(--border-radius-sm);
    box-shadow: 4px 4px 17px 0px rgba(111, 82, 77, 0.3);*/
    /*margin: 0px 0px 10px 0px;*/
    /*margin-top: var(--margin-top-small);*/
    margin-bottom: var(--margin-bottom-base);
}
.prem-dern-show-link {
    color: var(--color-text-main);
    font-family: var(--font-serif-bold);
    font-style: var(font-style-bold);
    font-size: var(--font-size-base);
    text-decoration: underline;
    line-height: var(--line-height-base);
    /*margin-bottom: var(--margin-bottom-base);*/
}

/* ============================================
   EVENT FRAME KALENDAR
   ============================================ */




/* ============================================
   KLAPPBOXEN (.collapse-mobile)
   <details class="... collapse-mobile" open> + <summary>.
   Desktop immer offen (JS + pointer-events), Mobile eingeklappt.
   Ohne JS bleibt das open-Attribut -> Inhalt immer sichtbar.
   Genutzt von: Preise, Bisheriges.
   ============================================ */
.collapse-mobile > summary {
    cursor: pointer;
    list-style: none;                        /* Standard-Dreieck weg (Firefox/Chrome) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}
.collapse-mobile > summary::-webkit-details-marker { display: none; }  /* Safari */
/* Runder Chevron wie Burger/Kreuz (--icon-chevron-down), Farbe =
   Textfarbe des Summary (--color-primary). Zu: zeigt nach unten, offen: nach oben. */
.collapse-mobile > summary::after {
    content: "";
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    background: currentColor;
    -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
            mask: var(--icon-chevron-down) center / contain no-repeat;
    rotate: 0deg;
    transition: rotate var(--transition-normal);
}
.collapse-mobile[open] > summary::after { rotate: -180deg; }
.collapse-mobile[open] > summary { margin-bottom: var(--margin-bottom-base); }

@media (prefers-reduced-motion: reduce) {
    .collapse-mobile > summary::after { transition: none; }
}

/* Fokusrahmen innen gezeichnet und nur bei Maus/Tastatur --
   Safari zeigt :focus-visible nach dem Antippen teils auch bei Touch. */
@media (hover: hover) {
    .collapse-mobile > summary:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }
}
.collapse-mobile > summary:focus:not(:focus-visible) { outline: none; }

@media (min-width: 992px) {
    .collapse-mobile > summary {
        cursor: default;
        pointer-events: none;
    }
    /* [open] mit aufgeführt: sonst gewinnt die spezifischere
       [open]-Regel und der Chevron bleibt sichtbar. */
    .collapse-mobile > summary::after,
    .collapse-mobile[open] > summary::after { display: none; }
}


/* ============================================
   PREVIOUS CREDITS
   ============================================ */

.previous-credits-box {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-serif)!important;
    padding: 6px 10px;
    display: block;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-kulturist);
}
.previous-credits-heading {
    font-family: var(--font-sans-semibold)!important;
    font-size: var(--font-size-big);
    color: var(--color-primary);
    line-height: var(--line-height-base);
    /* 0, nicht --margin-bottom-base: diese Überschrift steht in der
       <summary> der Klappbox, und dort regelt .collapse-mobile den
       Abstand schon selbst -- 0 im zugeklappten, 20px im offenen
       Zustand. Ein eigener Aussenabstand kommt INNERHALB der summary
       obendrauf: zugeklappt war der Balken damit 67px hoch statt 47
       wie bei "Preise", offen klaffte die Lücke 40px statt 20.
       Gemessen bei 325px Spaltenbreite.
       Genauso gelöst bei .artist-awards-heading. */
    margin-bottom: 0;
}
.previous-credits-subheading {
    font-family: var(--font-serif-bold)!important;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}
.previous-credits {
    font-family: var(--font-serif)!important;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-base);
}

/* Desktop: Abstände in Spalte 2 (ersetzen lose Spacer).
   Bewusst in der Media Query: .artist-col-bio > .artist-awards-box
   ist spezifischer als .artist-col-bio > * und hätte auf Mobile das
   margin-top: 0 überschrieben -> 30px Extra-Abstand. */
@media (min-width: 992px) {
    .artist-col-bio > .artist-awards-box,
    .artist-col-bio > .previous-credits-box {
        margin-top: var(--margin-top-verybig);
    }
}


/* ============================================
   ARTIST ANFRAGE-BUTTON (am Ende der Bio)
   Hauptaktion der Seite: führt zur Kulturist-Kontaktseite.
   Gefüllt statt Rahmen -> klar als wichtigster Button erkennbar.
   Zweizeilig: "Buchungsanfrage" + kleiner "für Name".
   Wird auch als Absende-Button im Anfrageformular genutzt.
   ============================================ */
.artist-inquiry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: var(--margin-top-small);
    padding: 6px 18px;                       /* kompakt trotz zwei Zeilen */
    min-height: 46px;                        /* komfortable Touch-Zielgrösse */
    background: var(--color-primary-faded);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary-faded);
    border-radius: var(--border-radius-btn);
    box-shadow: var(--shadow-kulturist);
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-base);
    line-height: 1.15;
    text-align: left;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
}

/* Zwei Zeilen untereinander (statt <br>) */
.artist-inquiry-text {
    display: flex;
    flex-direction: column;
}
.artist-inquiry-sub {
    font-family: var(--font-sans-regular);
    font-size: var(--font-size-small);
    line-height: 1.1;
    opacity: 0.9;
}

.artist-inquiry-arrow {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate var(--transition-fast);
}

@media (hover: hover) {
    .artist-inquiry-btn:hover {
        background: var(--color-primary-deep);
        border-color: var(--color-primary-deep);
    }
    .artist-inquiry-btn:hover .artist-inquiry-arrow { translate: 3px 0; }
}
.artist-inquiry-btn:active { background: var(--color-primary-deep); }
.artist-inquiry-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}


/* ============================================
   ARTIST KNOPFZEILE (Buchungsanfrage + Medien)

   Keine Media Query: flex-basis entscheidet. Zwei Knöpfe
   brauchen 2 x 220px + 10px Abstand = 450px. Ist so viel
   da, stehen sie nebeneinander, sonst bricht die Zeile um
   und beide laufen über die volle Breite.

   Gemessen an den vorhandenen Werten:
     Telefon  390px Ansicht -> 350px Inhalt      -> gestapelt
     Tablet   768px Ansicht -> 728px Inhalt      -> nebeneinander
     Desktop  ab 992px      -> 325px Bio-Spalte  -> gestapelt

   Woher die 220px: --font-size-base ist 18px, "Buchungsanfrage"
   misst darin rund 150px. Dazu 2x18px Polsterung, 0.6em
   Abstand, 1.1em Pfeil und 2x1px Rahmen. Wird
   --font-size-base je grösser, muss die Basis mit.
   ============================================ */
.artist-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--margin-top-small);
}

/* KEIN min-width: 0 hier. Der Vorgabewert min-width: auto ist
   gewollt: er verhindert, dass ein Knopf unter seine Textbreite
   gequetscht wird, statt umzubrechen. */
.artist-btn-row > .artist-inquiry-btn {
    flex: 1 1 220px;
    margin-top: 0;   /* der Abstand nach oben sitzt an der Zeile */
}


/* ============================================
   ARTIST WEBSITE (externer Link, unten in Spalte 2)
   Bewusst dezent: auffindbar, aber nicht aufdrängend,
   damit Besucher nicht zu früh abspringen.
   ============================================ */
.artist-website {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 12px;
    border-left: 3px solid var(--color-primary);
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}
@media (min-width: 992px) {
    .artist-col-bio > .artist-website { margin-top: var(--margin-top-verybig); }
}
.artist-website-label {
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-small);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.artist-website-url {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--transition-fast);
}
.artist-website-arrow {
    width: 0.8em;
    height: 0.8em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate var(--transition-fast);
}
@media (hover: hover) {
    .artist-website:hover .artist-website-url { text-decoration-color: currentColor; }
    .artist-website:hover .artist-website-arrow { translate: 2px -2px; }
}
.artist-website:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .artist-inquiry-btn,
    .artist-inquiry-arrow,
    .artist-website-url,
    .artist-website-arrow { transition: none; }
}


/* ============================================
   KONTAKT/INDEX?: "Was wir machen" + Einleitung
   Box im Look der .artist-awards-box (Schatten, kleiner Radius)
   ============================================ */
.company-intro {
    -webkit-font-smoothing: antialiased;
    max-width: 44rem;
    margin: var(--margin-top-base) 0 var(--margin-bottom-verybig);
    padding: 6px 10px 12px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-kulturist);
}
.company-intro-heading {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    color: var(--color-primary);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-small);
}
.company-intro-text {
    font-family: var(--font-article-text);
    font-size: var(--font-size-base);
    line-height: 1.45;                       /* Serif-Fliesstext: etwas mehr Luft */
    margin: 0;
}

/* ============================================
   KONTAKT: FORMULAR
   ============================================ */
/* Begrüssungstext der Kontaktseite.

   Schrift, Grösse und Zeilenhöhe kommen aus derselben Regel wie
   .post-lead und .post-subtitle weiter oben -- der Teaser sieht
   damit auf allen Seiten gleich aus. Vorher stand er auf
   --font-size-big (22px) und wirkte neben dem Kalender-Teaser wie
   ein anderer Bautyp.

   Eigen bleiben nur zwei Dinge:
     max-width      angenehme Zeilenlänge im breiten Formularbereich
     margin-bottom  die Luft unter dem Absatz trennt auf Desktop die
                    Begrüssung vom Formular (siehe 04-layout.css) --
                    auf Mobile setzt sie die Regel dort auf 0, weil
                    dazwischen die Direkt-Karte steht.

   Der Abstand DARÜBER ist weg: 50px unter dem h1 waren es, jetzt
   sitzt der Teaser direkt unter dem Titel wie auf der
   Kalenderseite. Die Luft kam aus einer Zeit, in der Titel und
   Teaser grösser waren. */
.inquiry-lead {
    max-width: 44rem;
    margin-bottom: var(--margin-bottom-max);
}

/* ============================================
   ANFRAGEFORMULAR (/agentur/kontakt.html)
   Nutzt nur bestehende Variablen aus 02-variables.css.
   Chips im Stil der .offer-tag, Absende-Button = .artist-inquiry-btn.
   ============================================ */
/* Formular als eigene Fläche: warmer Hellton + Rahmen hebt es
   vom weissen Seitengrund ab, weisse Felder stehen klar darauf. */
.inquiry-form {
    -webkit-font-smoothing: antialiased;
    max-width: 44rem;                        /* angenehme Zeilenlänge */
    padding: 24px 24px 28px;
    background: var(--color-surface-form);
    border: 1px solid var(--color-border-form);
    border-radius: var(--border-radius-md);
}
@media (max-width: 767px) {
    .inquiry-form { padding: 16px 14px 20px; }
}

/* --- Gruppen (Anfrage / Kontaktdaten) --- */
.inquiry-group {
    margin: 0 0 var(--margin-bottom-verybig);
    padding: 0;
    border: 0;
    min-width: 0;                            /* fieldset darf schrumpfen (Mobile) */
}
.inquiry-legend {
    width: 100%;
    margin-bottom: var(--margin-bottom-base);
    padding: 0 0 8px;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    color: var(--color-primary);
    line-height: var(--line-height-base);
}

/* --- Felder --- */
.inquiry-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--margin-bottom-base);
    min-width: 0;
}
.inquiry-row {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--grid-gutter);
}
@media (min-width: 768px) {
    .inquiry-row { grid-template-columns: 1fr 1fr; }
    .inquiry-row--3 { grid-template-columns: 1fr 1.3fr 1fr; }   /* Datum | Ort | Land */
}

.inquiry-event-fields[hidden] { display: none; }

.inquiry-label {
    font-family: var(--font-sans-regular);
    font-size: var(--font-size-small);
    color: var(--color-text-strong);
    line-height: var(--line-height-base);
}
.inquiry-optional {
    font-family: var(--font-sans-thin);
    color: var(--color-text-muted);
}
.inquiry-required { color: var(--color-event-warning); }

.inquiry-input {
    width: 100%;
    min-height: 46px;                        /* Touch-Zielgrösse */
    padding: 10px 12px;
    font-family: var(--font-serif);
    font-size: var(--font-size-base);        /* >=16px: kein Auto-Zoom auf iOS */
    line-height: var(--line-height-base);
    color: var(--color-text-main);
    background: var(--color-bg-light-max);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-btn);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.inquiry-input::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.inquiry-input:hover { border-color: var(--color-primary-faded); }
.inquiry-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
}
/* Fehler erst nach Interaktion zeigen, nicht schon beim Laden */
.inquiry-input:user-invalid {
    border-color: var(--color-event-warning);
}

.inquiry-textarea { min-height: 8rem; resize: vertical; }
/* Datumsfeld: iOS/iPadOS zeichnet input[type=date] als eigenes
   Steuerelement. Es nimmt sich eine Mindestbreite (ragt aus der
   Spalte), ist leer höher als die übrigen Felder, zentriert den
   Inhalt und nimmt die Systemschrift. Hier auf die Form der
   übrigen Felder zurückgesetzt. */
.inquiry-input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 46px;                            /* = min-height der übrigen Felder */
    text-align: left;
}
.inquiry-input[type="date"]::-webkit-date-and-time-value {
    text-align: left;                        /* iOS zentriert sonst */
    margin: 0;
    min-height: 0;
    line-height: var(--line-height-base);
}
.inquiry-input[type="date"]::-webkit-datetime-edit {
    padding: 0;
    font-family: var(--font-serif);          /* Sabon wie die anderen Felder */
}
.inquiry-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;                            /* Kalendersymbol (Chrome) dezenter */
}

/* Telefon: Vorwahl schmal links, Nummer füllt den Rest.
   Bewusst NACH .inquiry-input und mit ">" (höhere Spezifität):
   sonst gewinnt dessen width: 100% und die Vorwahl nimmt die
   ganze Breite ein, das Nummernfeld wird zum Streifen. */
.inquiry-phone {
    display: flex;
    gap: 8px;
}
/* Die Vorwahl trug hier eine Zeit lang --font-sans-regular, weil
   "CH +41" in der Groteske schmaler baut und damit sicher in die
   6.8em passte. Neben den Sabon-Feldern daneben fiel sie aber als
   Fremdkoerper auf -- ein Formular, zwei Schriften. Jetzt Sabon
   wie alle anderen Felder, dafuer etwas mehr Breite: "LI +423" ist
   der laengste Eintrag und braucht in der Serife rund 70px, dazu
   12px Polsterung links und 44px fuer das Chevron rechts. */
.inquiry-phone > .inquiry-phone-cc {
    flex: 0 0 auto;
    width: 7.6em;
    font-size: var(--font-size-base);
}
.inquiry-phone > .inquiry-input:not(.inquiry-phone-cc) {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* Select mit eigenem Chevron (gleiche runde Form wie Klappboxen) */
.inquiry-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: var(--icon-chevron-down-primary);
    background-position: right 14px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

/* --- Chips: Art des Anlasses (Look der .offer-tag) --- */
.inquiry-choices {
    margin: 0 0 var(--margin-bottom-base);
    padding: 0;
    border: 0;
    min-width: 0;
}
.inquiry-choices > .inquiry-label { margin-bottom: 8px; padding: 0; }
.inquiry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.inquiry-chip { position: relative; cursor: pointer; }
.inquiry-chip input {                        /* echte Checkbox bleibt bedienbar */
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}
.inquiry-chip span {
    display: inline-block;
    padding: 6px 12px;
    font-family: var(--font-event);
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-text-main);
    background: var(--color-bg-light-max);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-kulturist);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.inquiry-chip input:checked + span {
    background: var(--color-primary);
    color: var(--color-text-white);
}
.inquiry-chip input:focus-visible + span {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
@media (hover: hover) {
    .inquiry-chip:hover input:not(:checked) + span { background: var(--color-primary-tint); }
}

/* --- Datenschutz-Einwilligung --- */
.inquiry-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--margin-bottom-base);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-small);
    line-height: var(--line-height-base);
    cursor: pointer;
}
.inquiry-consent input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--color-primary);
}

/* --- Honeypot: unsichtbar, aber nicht display:none (Bots erkennen das) --- */
.inquiry-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.inquiry-captcha { margin-bottom: 8px; min-height: 78px; }  /* kein Sprung beim Laden */
.inquiry-captcha-note {
    max-width: 38rem;
    margin: 0 0 var(--margin-bottom-base);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-small);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
}

/* --- Rückmeldung nach dem Senden --- */
.inquiry-status {
    max-width: 44rem;
    margin-bottom: var(--margin-bottom-base);
    padding: 14px 16px;
    border-left: 4px solid currentColor;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-sans-regular);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}
.inquiry-status:focus { outline: none; }
.inquiry-status--ok {
    color: var(--color-event-highlight);
    background: rgba(0, 117, 53, 0.07);
}
.inquiry-status--error {
    color: var(--color-event-warning);
    background: rgba(178, 34, 34, 0.07);
}

/* "Weitere Anfrage senden" in der grünen Meldung: sieht aus wie ein Link */
.inquiry-again {
    -webkit-appearance: none;
    appearance: none;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.inquiry-again:hover { color: var(--color-text-main); }
.inquiry-again:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Während des Sendens */
.inquiry-actions .artist-inquiry-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* --- Absenden --- */
.inquiry-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.inquiry-actions .artist-inquiry-btn {       /* <button>-Defaults zurücksetzen */
    -webkit-appearance: none;
    appearance: none;
    margin-top: 0;
    cursor: pointer;
}
.inquiry-note {
    margin: 0;
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
}

/* ============================================
   KONTAKT-KARTE (Spalte rechts)
   ============================================ */
.contact-card {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    padding-bottom: var(--margin-top-small);
    /*border-bottom: 1px solid var(--color-border);*/
}
.contact-card-heading {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    color: var(--color-primary);
    margin-bottom: var(--margin-bottom-small);
}
.contact-card-text { margin-bottom: var(--margin-bottom-base); }
.contact-card-list { margin: 0 0 var(--margin-bottom-base); }
.contact-card-list dt {
    font-family: var(--font-sans-regular);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-top: var(--margin-top-small);
}
.contact-card-list dd { margin: 2px 0 0; }
.contact-card-link {
    color: var(--color-primary);
    font-family: var(--font-sans-semibold);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transition-fast);
}
.contact-card-link:hover,
.contact-card-link:focus-visible { text-decoration-color: currentColor; }
.contact-card-hours {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    padding-top: var(--margin-top-small);
    padding-bottom: var(--margin-top-small);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

@media (max-width: 991px) {  
.contact-card { 
    padding-top: var(--margin-top-small);
    border-top: 1px solid var(--color-border);
    padding-bottom: var(--margin-bottom-max);
    }
}
@media (prefers-reduced-motion: reduce) {
    .inquiry-input,
    .inquiry-chip span,
    .contact-card-link { transition: none; }
}


/* ============================================
   ARTIST-SEITE: MOBILE — BOX-OPTIK DER AUFGELOESTEN SPALTEN

   Die Reihenfolge (order) und das display: contents stehen seit
   dem Grid-Umbau in 04-layout.css, Abschnitt "KUENSTLERSEITE:
   REIHENFOLGE AUF MOBILE". Hier bleibt nur, was Aussehen ist:

   Bio und Agenda liegen auf Mobile nicht mehr in einer .grid-box
   (ihre Spalten sind aufgeloest), holen sich die Kasten-Optik
   deshalb selbst -- passend zu .grid-box: 768-991 mit Kasten,
   <=767 ohne. Preise, Bisheriges und Spotlight haben ihren
   eigenen Schatten-Look und brauchen hier nichts.
   ============================================ */
@media (max-width: 991px) {
    .bio-block,
    .agenda-block {
        background-color: var(--color-bg-light-max);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .bio-block,
    .agenda-block {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
    }
}


/* ============================================
   LAZY LOADING MEDIA OPTIMIZATION
   ============================================ */
/* Basis für lazy geladene Medien */
.lazy-media {
    display: block;
    max-width: 100%;
    height: auto;
    /* Sanfter grauer Hintergrund während des Ladens */
    background-color: #f4f4f4;
    /* Verhindert Sprünge im Layout */
    min-height: 50px;

    position: relative;
    overflow: hidden;
}

/* Option B: Generisch für alle Bilder (nutzt object-fit) */
/*.lazy-media {
    display: block;
    max-width: 100%;
    height: auto;
    background-color: #f0f0f0;*/

/* Wenn das Bild geladen ist, wird es sichtbar.
   Da CSS allein nicht weiß, wann es geladen ist, nutzen wir oft ein kleines JS-Snippet
   ODER wir verlassen uns darauf, dass der Browser es automatisch rendert.

   Um den "Fade-In" Effekt nur bei Lazy-Load zu haben, ist ein winziges JS nötig.
   Wenn du REINES CSS willst, lass den Fade-Out weg und nutze nur den Platzhalter.
*/


/* ============================================
   ASPECT RATIO FOR IMAGES & IFRAMES (Prevents CLS)
   ============================================ */
/* Hier stand img { aspect-ratio: attr(width) / attr(height) }.
   Ungueltig (attr() liefert dort keine Zahl), vom Browser verworfen.
   Das Verhaeltnis leitet der Browser selbst aus width/height ab,
   solange keine Regel aspect-ratio ueberschreibt -- siehe unten. */

video, iframe {
    max-width: 100%;
}
/* Spezifisch für SRF Video Embed (16:9) */
.video-ratio {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    margin-top: 15px;
}
/* Spezifisch für cookie bloc */
.media-placeholder {
    background: #000;
    color: #fff;
    padding: 40px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    cursor: pointer;
}

/* ============================================
   ARTIST, SHOW,  STYLING (Prevents CLS)
   ============================================ */
.artist-img {
    width: 100%;
    height: auto;
    display: block;
    /* KEIN aspect-ratio hier. Das fruehere var(--img-ratio, auto)
       ergab ein nacktes auto und loeschte damit das Verhaeltnis, das
       der Browser aus width/height ableitet (auto 1600/1067). Folge:
       lazy Bilder waren bis zum Laden 0px hoch, die Seite wuchs
       waehrend des Sprungs zur Agenda, und das Ziel rutschte weg. */
    border-radius: var(--border-radius-sm);
    /* Kein max-height/object-fit mehr -- Bild skaliert proportional
       zur vollen Breite, immer vollständig sichtbar, nie verzerrt/beschnitten.
       (Vorherige aspect-ratio:attr(...)-Zeile entfernt: ungültige CSS-Syntax,
       wurde von Browsern ohnehin ignoriert.) */
}
.show-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sm);   /* wie Video/Audio */
    /* Kein max-height/object-fit mehr -- Bild skaliert proportional
       zur vollen Breite, immer vollständig sichtbar, nie verzerrt/beschnitten. */
}

figure {
    margin: 0; /* Verhindert Sprünge durch Standard-Margins */
    padding: 0;
}

figcaption {
    margin: 4px 0 0 0; /* Kleiner Platzhalter nach dem Bild */
    font-size: var(--font-size-verysmall, 11px);
}



/* ============================================
   DIALOG: TICKET INFO (Ticket-Session-Hinweis)
   FÜR CASINO THEATER & FAUTEUIL & SCHAUSPIELHAUS TICKETS
   Buttons: .btn-blue (Bestätigen) / .btn-white (Abbrechen)
   ============================================ */

dialog#ticket-info-dialog {
  border: none;
  border-radius: var(--dialog-radius, 8px);
  padding: 0;
  max-width: 450px;
  width: 90%;
  box-shadow: var(--dialog-shadow, 0 5px 15px rgba(0, 0, 0, 0.3));
  background: transparent;
  margin: auto;                       /* zentriert im Viewport */
  color: var(--color-text-main);
}

dialog#ticket-info-dialog::backdrop {
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(2px);
}

/* Hintergrund-Scroll sperren, solange der Dialog offen ist */
html.has-open-dialog {
  overflow: hidden;
}

/* Innerer Inhalt (weiße Box) */
dialog#ticket-info-dialog .dialog-content {
  background: var(--color-bg-lighter);
  padding: 30px;
  border-radius: var(--dialog-radius);
  text-align: center;
}

/* Typografie */
dialog#ticket-info-dialog h4 {
  margin: 0 0 20px;
  color: var(--color-text-main);
  font-family: var(--font-sans-thin);
  font-weight: 300;
}

dialog#ticket-info-dialog p {
  margin: 0 0 15px;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  line-height: 1.6;
}

dialog#ticket-info-dialog p:last-of-type {
  margin-bottom: 0;
}

/* Hervorgehobener Text */
dialog#ticket-info-dialog .highlight-warning {
  background-color: var(--modal-highlight-bg);
  padding: 2px 4px;
  border-radius: 2px;
  font-family: var(--font-sans-semibold);
  color: var(--color-text-main);
  line-height: 1.6;
}
dialog#ticket-info-dialog .highlight {
  background-color: var(--modal-highlight-bg);
}


/* Neuladen-Symbol im Fließtext */
dialog#ticket-info-dialog .icon-reload {
  vertical-align: -3px;
  fill: currentColor;
}

/* Buttons */
dialog#ticket-info-dialog .dialog-buttons {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Eigen-Margin der Button-Klassen zurücksetzen — gap regelt den Abstand */
dialog#ticket-info-dialog .dialog-buttons .btn-blue,
dialog#ticket-info-dialog .dialog-buttons .btn-white {
  margin: 0;
}



/* Responsive */
@media (max-width: 480px) {
  dialog#ticket-info-dialog .dialog-content {
    padding: 20px;
  }
}


/* ============================================
   Social Icon Hover — Dim + Flare
   HTML: <a><button class="social-btn" data-provider="..." aria-label="...">
            <svg>...</svg>
         </button></a>
   Grundaussehen der Buttons: Abschnitt FOOTER.
   ============================================ */

.social-btn {
    position: relative;
    isolation: isolate;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Flare: heller Glanz, größer als das Icon, bläht sich aus der Mitte auf */
.social-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    z-index: 0;
}

/* SVG-Icon über dem Flare halten */
.social-btn > svg {
    position: relative;
    z-index: 1;
}

.social-btn:hover {
    /* Dim: Umgebung leicht aufhellen */
    background: rgba(255,255,255,0.1);
    /* Sanfter Glow statt Bewegung — verändert nie die Box-Geometrie,
       kann also nie die Hover-Fläche verschieben (kein Wackeln) */
    box-shadow: 0 0 12px rgba(255,255,255,0.35);
}

.social-btn:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Gesperrte Fläche über der GANZEN Social-Buttons-Reihe (nicht pro
   Button einzeln) -- gleiche Optik wie bei Video/Audio/Karte:
   dunkler Scrim, zentriertes Icon + Text/Link. Sichtbarkeit wird
   per JS gesteuert (cookieconsent-config.js). Blockiert automatisch
   auch Klicks auf die Buttons darunter, da sie visuell darüberliegt --
   keine einzelne pointer-events-Steuerung pro Button mehr nötig. */
.social-blocked-overlay {
    display: none;
    position: absolute;
    inset: -12px -16px;                      /* ragt rundum etwas über die Buttons hinaus */
    z-index: 5;
    border-radius: var(--border-radius-md);
    background: rgba(0,0,0,.35);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 10px;
}

.social-blocked-overlay .no-icon {
    width: 40px;
    height: 40px;
    color: #fff;
    filter: drop-shadow(var(--shadow-media-text));
}

.social-blocked-overlay span,
.social-blocked-overlay span a {
    color: #fff;
    text-shadow: var(--shadow-media-text);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-small);
}

.social-blocked-overlay span a {
    text-decoration: underline;
}

/* ============================================
   BUTTONS
   ============================================ */

/* ============================================
   BUTTON MAIN - OPTIMIERT & STABILISIERT
   Verhindert Layout-Shift durch Font-Swap und Padding-Änderungen
   ============================================ */
.btn-main {
    /* Basis Styles */
    clear: both;
    background-color: #aaa;
    border: 0 none;
    border-radius: var(--border-radius-btn); /* Vereinfacht - Vendor Prefixes meist unnötig heutzutage */

    /* Transition für Hover-Effekte */
    transition: var(--transition-btn);

    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    text-decoration: none !important;

    /* ⚠️ CRITICAL FOR CLS: Feste Werte statt Variablen im Critical Path */
    font-family: 'Hermes Thin', 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--btn-font-size) !important; /* Explizit, um Fallback-Größen zu override */
    line-height: var(--btn-line-height) !important; /* Muss exakt zum Padding passen, wenn height fehlt */
    font-weight: 300;

    padding: var(--btn-padding) !important;
    margin: var(--btn-margin);

    /* Layout-Stabilisierung */
    white-space: nowrap; /* Verhindert Umbruch */
    box-sizing: border-box;
    min-width: fit-content; /* Sorgt für konsistente Breite */
    width: auto;
    height: auto;
}

.btn-main:hover,
.btn-main:active {
    background-color: #777;
    text-decoration: unset;
}

.btn-main:focus {
    outline: 2px solid darkblue;
    outline-offset: 2px;
}


/* ============================================
   BUTTON WHITE - OPTIMIERT & STABILISIERT
   ============================================ */
.btn-white {
    /* Basis Styles */
    clear: both;
    background-color: #FFFFFF;
    border: 1px solid var(--color-primary); /* Vereinfacht: outline/border unify */
    border-radius: var(--border-radius-btn);

    transition: var(--transition-btn);

    color: var(--color-primary);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    text-decoration: none !important;

    /* ⚠️ CRITICAL FOR CLS: Feste Werte statt Variablen im Critical Path */
    font-family: 'Hermes Thin', 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--btn-font-size) !important;
    line-height: var(--btn-line-height) !important; /* Muss mit Padding übereinstimmen */
    font-weight: 300;

    padding: var(--btn-padding) !important;
    margin: var(--btn-margin);

    /* Layout-Stabilisierung */
    white-space: nowrap;
    box-sizing: border-box;
    min-width: fit-content;
    width: auto;
    height: auto;
}

.btn-white:hover,
.btn-white:active {
    background-color: var(--color-primary-tint);
    border-color: var(--color-text-muted); /* Outline durch Border ersetzen für Konsistenz */
    text-decoration: unset;
    outline: none; /* Sicherstellen, dass kein doppelter Rand entsteht */
}

.btn-white:focus-visible {
    outline: 1px solid var(--color-text-muted); /* Standard Fokus für Barrierefreiheit behalten */
    outline-offset: 2px; /* Leicht abgesetzt für bessere Sichtbarkeit */
}

/* ============================================================
   BUTTON GHOST (outline white - transparent)
   ============================================================ */
.btn-ghost,
.btn-cookie-settings {
    display: inline-block;
    background: transparent;
    border: 1px solid #fff;
    border-radius: var(--border-radius-btn);
    color: #fff;
    cursor: pointer;

    font-family: 'Hermes Thin', 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    font-weight: 300;

    padding: var(--btn-padding);
    margin: var(--btn-margin);

    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
    box-sizing: border-box;

    transition: var(--transition-btn);
}

.btn-ghost:hover,
.btn-ghost:active,
.btn-cookie-settings:hover {
    background: #fff;
    color: var(--color-primary);
}

.btn-ghost:focus-visible,
.btn-cookie-settings:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ============================================================
   BUTTON GHOST INVERS (ARTIST_LINKS)
   ============================================================ */
.btn-ghost-invert,
.btn-cookie-settings-invert {
    display: inline-flex;              /* war: inline-block */
    align-items: center;               /* Icon auf Textmitte */
    justify-content: center;
    gap: 0.5em;                        /* Abstand Icon ↔ Text */
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-btn);
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    line-height: var(--btn-line-height);
    font-weight: 400;
    padding: var(--btn-padding);
    margin: var(--btn-margin);
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
    box-sizing: border-box;
    transition: var(--transition-btn);
}
.btn-ghost-invert:hover,
.btn-ghost-invert:active,
.btn-cookie-settings-invert:hover {
    background: var(--color-primary);
    color: #fff;
}
.btn-ghost-invert:focus-visible,
.btn-cookie-settings-invert:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Icon: Grösse und Farbe folgen der Schrift */
.btn-ghost-invert svg,
.btn-cookie-settings-invert svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: currentColor;
    transition: inherit;
}
.btn-ghost-invert svg path,
.btn-cookie-settings-invert svg path {
    fill: currentColor;
}
/* ============================================
   BUTTON ORANGE - OPTIMIERT & STABILISIERT
   Verhindert Layout-Shift durch Font-Swap
   ============================================ */
.btn-orange {
    /* Basis Styles */
    clear: both;
    background-color: var(--color-secondary);
    border: 1px solid var(--color-secondary); /* Vereinfacht: outline/border unify */
    border-radius: var(--border-radius-btn);

    transition: var(--transition-btn);

    color: var(--color-link-default);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    text-decoration: none !important;

    /* ⚠️ CRITICAL FOR CLS: Feste Werte statt Variablen im Critical Path */
    font-family: var(--font-sans-semibold);
    font-size: var(--btn-font-size) !important;
    line-height: var(--btn-line-height) !important; /* Muss mit Padding übereinstimmen */
    font-weight: 300;


    padding: var(--btn-padding) !important;
    margin: var(--btn-margin);

    /* Layout-Stabilisierung */
    white-space: nowrap;
    box-sizing: border-box;
    min-width: fit-content;
    width: auto;
    height: auto;
}

.btn-orange:hover,
.btn-orange:active {
    background-color: var(--color-secondary-deep);
    border-color: var(--color-secondary-deep); /* Outline durch Border ersetzen für Konsistenz */
    color: var(--color-secondary-tint-hover);
    text-decoration: unset;
    outline: none; /* Sicherstellen, dass kein doppelter Rand entsteht */
}

.btn-orange:focus {
    outline: 1px solid var(--color-secondary-deep); /* Standard Fokus für Barrierefreiheit behalten */
    color: var(--color-secondary-tint-hover);
    outline-offset: 2px; /* Leicht abgesetzt für bessere Sichtbarkeit */
}


/* ============================================
   BUTTON BLUE (CHACHE BUSTING DIALOG)
   ============================================ */
.btn-blue {
    clear: both;
    background-color: var(--modal-color-selection);   /* statt --color-selection */
    border: 0 none;
    border-radius: var(--border-radius-btn);
    transition: var(--transition-btn);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    text-decoration: none !important;
    font-family: 'Hermes Thin', 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--btn-font-size) !important;
    line-height: var(--btn-line-height) !important;
    font-weight: 300;
    padding: var(--btn-padding) !important;
    margin: var(--btn-margin);
    white-space: nowrap;
    box-sizing: border-box;
    min-width: fit-content;
    width: auto;
    height: auto;
}

.btn-blue:hover,
.btn-blue:active {
    background-color: var(--modal-color-selection-hover);
    text-decoration: unset;
}

.btn-blue:focus-visible {
    outline: 2px solid var(--modal-color-selection-hover);
    outline-offset: 2px;
}

/* ============================================
   FOOTER
   Aufbau: .footer-top (Kontakt | Newsletter)
           .footer-map-row (Karte | Karten-Apps)
           .footer-bottom (Copyright | rechtliche Links)
   Alles weisse Schrift auf --color-primary, keine Inline-Styles.
   ============================================ */
footer,
.site-footer {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    padding: 50px 0;
    margin-top: 40px;
    font-family: var(--font-sans-thin);
    -webkit-font-smoothing: antialiased;
}

.site-footer a { color: inherit; }

/* Icons in Zeilen (Telefon, Privatsphäre) */
.site-footer .footer-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}

/* --- Zeile 1 --- */
.footer-top { row-gap: 20px; }

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Social Media */
/* Zeile mit Sperrfläche (vier Kanäle) und Papierflieger daneben.
   Der Flieger steht AUSSERHALB von .social-buttons-wrapper, damit
   ihn die Sperrfläche nicht abdeckt (mailto, lädt nichts von
   Dritten) -- ohne diese Regel rutscht er auf eine eigene Zeile
   (28.10., am 01.11. wiederhergestellt). Abstand gleich wie
   zwischen den Kanälen. */
.social-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
    margin: 25px 0 55px;
}
.social-buttons-wrapper {
    position: relative;                      /* Bezug für .social-blocked-overlay */
    width: fit-content;                      /* nur so breit wie die Buttons -> Sperrfläche auch */
    max-width: 100%;
    margin: 0;                               /* Abstand kommt von .social-line */
}
.social-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    border-radius: 50%;
    color: var(--color-text-white);
    background: transparent;
}
.social-btn .social-icon {
    width: 53px;
    height: 53px;
    fill: currentColor;
}

/* Datum, Adresse, Telefon */
.footer-date {
    min-height: 1.3em;                       /* Platz reserviert, bis das Script das Datum setzt */
    margin-bottom: 50px;
}

.footer-address {
    font-style: normal;                      /* <address> ist sonst kursiv */
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-mail { margin-bottom: 20px; }

/* E-Mail-Button: Icon + Text nebeneinander (ersetzt das frühere Inline-Style) */
.footer-mail .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-mail .btn-ghost svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: currentColor;                      /* folgt dem Hover-Farbwechsel */
}

.footer-phones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.6;
    margin-bottom: 35px;
}
.footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-phone-link { text-decoration: none; }

/* Kontakt + Jubiläum nebeneinander (22.10.). Wird es zu eng
   (Handy, schmale Footer-Spalte), rutscht das Emblem unter den
   Kontakt. margin-bottom der Telefonliste (35px) bleibt der
   Abstand nach unten. */
.footer-kontakt-reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 80px;                          /* Abstand Kontakt -> Emblem */
}
.footer-jubilaeum {
    flex: 0 0 170px;                         /* Emblem 130px, Text darf etwas breiter */
    margin: 0 0 35px;
}
.footer-jubilaeum img {
    width: 130px;
    max-width: 100%;
    height: auto;
}
.footer-jubilaeum-text {
    font-size: var(--font-size-small);
    line-height: 1.4;
    margin-top: 10px;
}
.footer-phone-link:hover,
.footer-phone-link:focus-visible { text-decoration: underline; }

/* Newsletter */
.footer-newsletter { margin: 25px 0 55px; }

.newsletter-form { text-align: left; }

.footer-heading {
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-h1);
    color: var(--color-text-white);
    margin-bottom: 10px;
}
.newsletter-intro { margin-bottom: 15px; }

.newsletter-field { margin-bottom: 10px; }
.newsletter-label {
    display: block;
    margin-bottom: 5px;
}
.newsletter-input {
    width: 100%;
    height: 44px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius-btn);
    background-color: var(--color-bg-light-max);
    color: var(--color-text-main);
    font-family: var(--font-serif);
    font-size: var(--font-size-base);        /* >=16px: kein Auto-Zoom auf iOS */
}
.newsletter-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: var(--icon-chevron-down-primary);  /* runder Chevron wie überall */
    background-position: right 12px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}
.newsletter-captcha {
    margin: 15px 0;
    /* Kein reservierter Platz: das Captcha lädt erst bei Nutzung
       (04-hcaptcha.js), sonst stünde hier dauerhaft eine Lücke. */
}
.newsletter-note {
    margin: 15px 0 25px;
    font-size: var(--font-size-small);
    line-height: var(--line-height-base);
}
.newsletter-note a {
    font-family: var(--font-sans-bold);
    text-decoration: underline;
}

/* --- Zeile 2: Karte --- */
#footer-map {
    position: relative;
    z-index: 1;
    border-radius: var(--border-radius-btn);
}
.footer-map-apps { margin: 30px 0 25px; }

/* --- Zeile 3: Copyright + Links --- */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 70px;
}
.footer-copyright {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover,
.footer-legal a:focus-visible { text-decoration: underline; }

/* "Privatsphäre" ist ein Button (öffnet Dialog), sieht aus wie ein Link */
.footer-legal-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    color: inherit;
    font: inherit;
}
.footer-legal-btn:hover,
.footer-legal-btn:focus-visible { text-decoration: underline; }

.site-footer a:focus-visible,
.site-footer button:focus-visible {
    outline: 2px solid var(--color-text-white);
    outline-offset: 2px;
}

/* --- Mobile / Tablet (unter 992px): alles untereinander --- */
@media (max-width: 991px) {
    .social-buttons-row,
    .social-line { gap: 15px; }
}
@media (max-width: 767px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-legal-sep { display: none; }  /* Trenner nur auf breiten Screens */
    .footer-legal { column-gap: 16px; }
}

/* ============================================
   MAP CONTAINER STYLES
   ============================================ */
/* HINWEIS: Die frühere Regel "#footer-map .leaflet-layer { filter: ... }"
   wurde entfernt -- die Karte läuft nicht mehr auf Leaflet, die Klasse
   existiert im DOM nicht mehr. Die Darstellung regelt jetzt der
   swisstopo-Kartenstil selbst (Light Base Map). */

/* Basishöhe der Karte.
   WICHTIG: Die Höhe gehört hierher und NICHT als style="height:…" ins HTML.
   Grund: Im Vollbild greift die MapLibre-Regel

       .maplibregl-map:fullscreen { height: 100%; width: 100%; }

   Ein Inline-Style oder ein "!important" schlägt diese Regel — die Karte
   wird dann zwar über die volle Breite gelegt, behält aber ihre 520/550px
   Höhe. Der Rest der Vollbildfläche bleibt schwarz und verdeckt die Seite.
   Genau deshalb steht hier bewusst KEIN !important. */
#footer-map {
    position: relative;   /* Bezugsrahmen für die Vorschau-Fassade (inset:0) */
    container: footer-map / inline-size;   /* Vorschaubild richtet sich nach der Flächenbreite */
    height: 550px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

/* Kleinere Höhe auf Mobile — ebenfalls ohne !important. */
@media (max-width: 768px) {
    #footer-map {
        height: 520px;
    }
}

/* ============================================
   VOLLBILD DER KARTE
   ============================================
   Wird nach 06-maplibre-gl.css geladen und ist über die ID spezifischer
   als die Bibliotheksregel — damit gewinnt die Vollbildhöhe zuverlässig,
   auch wenn oben später wieder eine Höhe dazukommt.

   -webkit-full-screen muss in einer EIGENEN Regel stehen: Browser, die
   das alte Präfix nicht kennen, verwerfen sonst den ganzen Selektor. */
#footer-map:fullscreen {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
}

#footer-map:-webkit-full-screen {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
}

/* Fallback für iOS-Safari: dort kann ein beliebiges Element nicht in den
   echten Vollbildmodus, MapLibre legt stattdessen die Klasse
   .maplibregl-pseudo-fullscreen an (position:fixed, height:100%).
   100dvh statt 100% berücksichtigt die ein- und ausfahrende Adressleiste. */
#footer-map.maplibregl-pseudo-fullscreen {
    height: 100dvh !important;
    border-radius: 0;
}

/* Navbar und Direkt-Bar aus dem Weg räumen, solange die Karte im Vollbild
   liegt. Die Klasse setzt 07-map.js.

   Bewusst NICHT über einen höheren z-index an der Karte gelöst: die
   .maplibregl-pseudo-fullscreen der Bibliothek bringt bereits z-index 99999
   mit, was gegen die 1000 der Navbar reichen müsste. Es reicht aber nur
   dann, wenn beide im selben Stapelkontext liegen. #footer-map steht im
   Footer -- macht dort irgendein Vorfahr einen eigenen Stapelkontext auf
   (transform, filter, opacity < 1, position + z-index, will-change), wird
   die 99999 in diesem Kontext eingesperrt und als Ganzes gegen die
   fixierte Navbar gewertet. Hochdrehen bringt dann nichts, weil der
   Vergleich gar nicht mehr auf dieser Ebene stattfindet.

   visibility statt display: keine Layout-Neuberechnung beim Ein- und
   Ausschalten, also kein Springen der Seite nach dem Verlassen. */
body.map-is-fullscreen .MainNav,
body.map-is-fullscreen .direct-sticky-bar {
    visibility: hidden;
    pointer-events: none;
}

/* ============================================
   MAP PLACEHOLDER (Cookie Consent)
   Optisch an .media-placeholder (Video/Audio) angelehnt,
   eigene Klasse, weil "Maps" eine eigenständige Cookie-
   Kategorie ist. Farben ans helle Standard-Kartenfeld
   angepasst (dunkler Text statt Weiß, da kein dunkler
   Foto-Hintergrund wie bei den Video-Thumbnails).
   ============================================ */
/* Sicherheitsnetz für iOS: solange der Platzhalter drin liegt, ist
   die Fläche ein reines Bild -- Wischgesten gehören an die Seite,
   nicht an eine Kartensteuerung. Leaflet hinterlässt beim Sperren
   sonst seine Klassen am Container (leaflet-touch-drag /
   -touch-zoom / -gesture-handling), an denen "touch-action: none"
   hängt; das Scrollen über der Karte blockiert dann bis zum
   Neuladen. Die Regel muss auf #footer-map selbst sitzen, nicht auf
   .map-placeholder: touch-action wird zwar nicht vererbt, aber ein
   Vorfahr mit "none" blockiert die Geste trotzdem.
   Die eigentliche Ursache behebt getCleanMapContainer() in
   cookieconsent-config.js -- das hier fängt nur Reste ab.
   Gilt sinngemäss weiterhin: MapLibre setzt ebenfalls touch-action
   am Container. */
#footer-map:has(.map-placeholder) {
    touch-action: auto;
}

.map-placeholder {
    position: relative;
    height: 550px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 20px;
    /* Scrim (dunkler Verlauf) + echtes Kartenvorschaubild kombiniert --
       Reihenfolge wichtig: Scrim zuerst = liegt oben. */
    background-image: linear-gradient(var(--overlay-scrim), var(--overlay-scrim)), url('/image/kulturist/site/cookievorschau/map_preview.webp');
    background-size: cover;
    /* Rechtsbuendig: der rechte Bildrand bleibt immer sichtbar, beschnitten
       wird links. Bei 'center' waeren beide Seiten betroffen. */
    background-position: center right;
    background-repeat: no-repeat;
}

/* Hochkant-Vorschaubild nur in einer SCHMALEN Kartenfläche (Handy).
   Entscheidend ist die Breite der Fläche, nicht des Fensters: in einer
   breiteren Fläche würde das hochkante Bild hochskaliert und gezoomt.
   Gleiche Grenze (440px) wie NARROW_MAX_WIDTH in 07-map.js. */
@container footer-map (max-width: 440px) {
    .map-placeholder {
        background-image: linear-gradient(var(--overlay-scrim), var(--overlay-scrim)), url('/image/kulturist/site/cookievorschau/map_preview_mobile.webp');
    }
}

@media (max-width: 768px) {
    .map-placeholder {
        height: 520px;
    }
}

.map-placeholder .no-icon {
    width: 48px;
    height: 48px;
    color: #fff;
    filter: drop-shadow(var(--shadow-media-text));
}

.map-placeholder span,
.map-placeholder span a {
    color: #fff;
    text-shadow: var(--shadow-media-text);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base); /* explizit fixiert, nicht vom
        Erzeugungskontext geerbt -- Platzhalter wird per JS live neu
        ins DOM geschrieben, daher ohne feste Größe anfällig für
        Vererbung aus dem gerade schließenden Cookie-Modal. */
}

.map-placeholder span a {
    text-decoration: underline;
}

/* ============================================
   CookieConsent Custom Styles
   ============================================ */

/* Eigene Website-Schrift statt System-Font-Stack der Bibliothek.
   --cc-font-family ist die einzige Stelle, an der die Bibliothek ihre
   Basis-Schrift bezieht (#cc-main{font-family:var(--cc-font-family)}) --
   diese eine Variable zu überschreiben reicht für den ganzen Dialog.
   Bewusst einheitlich --font-sans-thin überall (auch für Titel/Buttons/
   Badges, die die Bibliothek sonst per font-weight:600 hervorheben
   würde) -- getestet gegen --font-sans-bold/--font-serif-bold, diese
   Variante am klarsten lesbar bei gleichzeitig durchgehendem CI. */
#cc-main {
    --cc-font-family: var(--font-sans-thin);
}

/* Graustufen durch abgestufte Skala auf Basis rgb(209,203,203) ersetzt,
   Textfarbe auf Kulturist-Braun (--color-primary/#6F524D) umgestellt.
   Betrifft: Trennlinien, Kategorie-Zeilen-Hintergrund (+Hover/Expanded).
   Notwendig-Toggle (readonly) = gefadetes Grün statt Braun/Grau --
   signalisiert "immer an", aber sichtbar gedämpft/nicht-interaktiv.
   Toggle-Off-Track = gedämpftes Braun statt neutralem Grau-Blau.
   Schließen-Button + Badge = kräftiges Kulturist-Braun statt blassem
   Grauton -- deutlich dunkler/kräftiger als die vorherige helle Stufe.
   Die grüne Footer-"Speichern"-Regel bleibt unverändert (siehe unten). */
#cc-main {
    /* Textfarben */
    --cc-primary-color: var(--color-primary);      /* #111 – Titel, Tabellenköpfe */
    --color-cc-text-body: var(--color-text-strong);   /* #000 – Beschreibungstexte */

    --cc-separator-border-color: var(--color-bg-light);
    --cc-cookie-category-block-bg: var(--color-bg-light);
    --cc-cookie-category-block-border: var(--color-bg-light);
    --cc-cookie-category-block-hover-bg: #f1efef;
    --cc-cookie-category-block-hover-border: #f1efef;
    --cc-cookie-category-expanded-block-hover-bg: #e6e2e2;
    --cc-footer-border-color: #f1efef;

    --cc-toggle-readonly-bg: var(--color-smaragd-fade, #8ed8bb); /* gefadetes Smaragd (01.11., vorher #96d6ae) */
    --cc-toggle-readonly-knob-bg: #fff;

    --cc-toggle-off-bg: var(--color-primary-mid); /* gedämpftes Braun statt neutralem Grau-Blau */

    --cc-btn-secondary-bg: var(--color-primary-mid); /* gleicher Ton wie Toggle-Off (Schließen-Button, Badge) */
    --cc-btn-secondary-color: #fff;
    --cc-btn-secondary-border-color: var(--color-primary-mid); /* Rand = Hintergrund, kein Farbkontrast am Rand */
    --cc-btn-secondary-hover-bg: var(--color-primary-dark);
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: var(--color-primary-dark);
}

/* Aufklapp-Pfeil-Button (zeigt Einzeldienste einer Kategorie) --
   nutzte vorher dieselbe Variable wie der Notwendig-Toggle
   (--cc-toggle-readonly-bg, jetzt Grün) -- hier gezielt entkoppelt
   und auf denselben Ton wie Toggle-Off/Schließen-Button gesetzt.
   WICHTIG: Selektor muss .pm__section--expandable mit enthalten --
   sonst weniger spezifisch als das Original und wird ignoriert. */
#cc-main .pm__section--expandable .pm__section-arrow {
    background: var(--color-primary-mid);
}

#cc-main .pm__badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 6px;
    background: var(--color-smaragd-hell, #e1f5ed); /* Smaragd hell (01.11., vorher #e8f5e9) */
    color: var(--color-smaragd-tief, #025f24);       /* Smaragd tief, 6,9:1 (vorher #2e7d32) */
}

/* Schieberegler "An" = Smaragd, global für Banner + Einstellungen-Fenster.
   01.11.: Grün aus den Angebote-Bändern (image/kulturist/site/angebote/),
   eine Stufe dunkler als der Mittelton #05a967 des Bildes -- der
   erreichte auf dem Grau der Kategoriezeilen (#f9f9f9) nur 2,9:1,
   Bedienelemente brauchen 3:1 (WCAG 1.4.11). #009660: 3,6:1.
   Vorher #16a34a. */
#cc-main {
    --cc-toggle-on-bg: var(--color-smaragd, #009660);
}

/* "So speichern" auffälligster der drei Footer-Buttons im
   Einstellungen-Fenster -- Alle akzeptieren/ablehnen jetzt in
   hellem Kulturist-Braun (passend zum Schließen-Kreuz), Speichern weiterhin
   kräftig Kulturist-Braun als klar hervorstechende Haupt-Aktion. Bewusst auf
   .pm__footer verengt (NICHT .pm komplett) -- sonst würden auch das
   Schließen-Kreuz (.pm__close-btn) und die kleinen Service-Zähler-
   Badges (.pm__service-counter) dieselben Variablen erben und
   fälschlich grün statt braun eingefärbt. */
#cc-main .pm__footer {
    --cc-btn-primary-bg: var(--color-primary-mid);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--color-primary-mid);
    --cc-btn-primary-hover-bg: var(--color-primary-dark);
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--color-primary-dark);

 /* "So speichern" jetzt in Kulturist-Braun statt Grün --
       dunkler/kräftiger als das #a18f8b der beiden anderen
       Footer-Buttons, bleibt dadurch die klare Haupt-Aktion. */
    --cc-btn-secondary-bg: var(--color-primary, #6F524D);
    --cc-btn-secondary-color: #fff;
    --cc-btn-secondary-border-color: var(--color-primary, #6F524D);
    --cc-btn-secondary-hover-bg: var(--color-primary-deep);
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: var(--color-primary-deep);
}

/* Häkchen im Speichern-Button: gleicher Pfad wie die Toggle-Slider
   (toggle__icon-on), nur ohne deren 45°-Rotation. Klassen-Selektor
   nötig, weil #cc-main svg{width:100%} das Icon sonst aufbläht. */
#cc-main .pm__btn[data-role="save"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
}

#cc-main .cc-save-check {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor; /* = weiss auf braunem Button */
}

/* Footer-Knöpfe im Einstellungen-Fenster auf dem Handy (01.11.):
   «So speichern» oben, «Alle ablehnen» in der Mitte, «Alle
   akzeptieren» unten -- Desktop unverändert (nur in der Media Query).
   Im HTML stehen [akzeptieren, ablehnen] in der ersten Gruppe und
   [speichern] in der zweiten; column-reverse dreht erst die Gruppen,
   dann die Knöpfe in der Gruppe.
   - !important: die Bibliothek setzt hier selbst
     flex-direction: column!important. Das zusätzliche .pm macht die
     Selektoren spezifischer, unabhängig von der Ladereihenfolge.
   - Abstand per gap (12px wie bisher, analog .app-buttons) statt
     margin: die Bibliothek setzt margin-top auf den jeweils zweiten
     Knopf, nach dem Umdrehen säße er auf der falschen Seite.
   - Gleicher Breakpoint wie die Bibliothek (640px).
   - Tab-Reihenfolge folgt weiter dem HTML (von unten nach oben). */
@media screen and (max-width: 640px) {
    #cc-main .pm .pm__footer,
    #cc-main .pm .pm__footer .pm__btn-group {
        flex-direction: column-reverse !important;
        gap: 12px;
    }
    #cc-main .pm .pm__footer .pm__btn + .pm__btn,
    #cc-main .pm .pm__footer .pm__btn-group + .pm__btn-group {
        margin: 0 !important;
    }
}

/* Kategoriezeilen auf dem Handy flacher (01.11.): Die Bibliothek gibt
   jeder Zeile 58px Mindesthöhe und 1.1em oben/unten. Auf dem iPhone
   füllten die fünf Zeilen damit genau den Bildschirm bis zur Knopfleiste,
   und nichts deutete an, dass darunter noch Text kommt. Flacher (48px,
   .7em) und weniger Abstand zum Hinweis-Kasten: dessen Titel schaut
   unten an, man sieht, dass es weitergeht. Zeilen bleiben über 44px
   (Touch). Links-/Rechts-Polsterung (Pfeil, Schalter) unverändert. */
@media screen and (max-width: 640px) {
    #cc-main .pm .pm__section--toggle .pm__section-title {
        min-height: 48px;
        padding-top: 0.7em;
        padding-bottom: 0.7em;
    }
    #cc-main .pm .pm__section-toggles + .pm__section {
        margin-top: 1em;
    }
}

/* Unterschalter der Anbieter (Video/Audio, 01.11.): Die Bibliothek
   zeichnet sie 42 x 19px in Zeilen von rund 30px -- mit dem Finger kaum
   zu treffen. Auf Touch-Geräten so gross wie die Kategorie-Schalter
   (50 x 23px, Knopf 23px, Weg 27px) und jede Zeile höher (gut 44px).
   Gilt auch fürs iPad (pointer: coarse), nicht für die Maus. */
@media screen and (max-width: 640px), (pointer: coarse) {
    #cc-main .pm .pm__service {
        padding-top: 0.65em;
        padding-bottom: 0.65em;
    }
    #cc-main .pm .toggle-service,
    #cc-main .pm .toggle-service .section__toggle,
    #cc-main .pm .toggle-service .toggle__icon,
    #cc-main .pm .toggle-service .toggle__label {
        width: 50px;
        height: 23px;
    }
    #cc-main .pm .toggle-service .toggle__icon-circle {
        width: 23px;
        height: 23px;
    }
    #cc-main .pm .toggle-service .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
        transform: translateX(27px);
    }
}

/* Tabellen Styling */
#cc-main .section-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    margin-top: 10px;
}
#cc-main .table-th {
    background: #f5f5f5;
    padding: 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}
#cc-main .table-td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--color-text-muted);
}

/* ============================================
   VIDEO/AUDIO EMBED WRAPPER (Cookie Consent)
   Placeholder & Iframe liegen absolut übereinander
   und übernehmen automatisch die Höhe des Wrappers.

   .video-wrapper -> Breite responsive (100%),
   Höhe automatisch über aspect-ratio (16:9),
   skaliert proportional mit der Breite mit.

   .audio-wrapper -> Breite responsive (100%),
   Höhe FIX (Default 166px, z.B. für Soundcloud),
   skaliert NICHT mit — Audio-Player brauchen
   unabhängig von der Breite eine konstante Höhe.

   Beide per Inline-Style überschreibbar, siehe Vorlagen.
   ============================================ */
.video-wrapper,
.audio-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Die Rundung sitzt HIER, nicht an Platzhalter und iframe: das
       Sperrbild haengt als background-image am Wrapper selbst. War
       nur das Kind gerundet, blitzte das eckige Bild in den Ecken
       durch -- vor der Einwilligung unter dem Scrim, danach hinter
       dem Player. overflow:hidden schneidet alles darin mit zu,
       isolation haelt Safari dazu an, auch das iframe zu beschneiden.
       --border-radius-sm wie Boxen und Bilder. */
    border-radius: var(--border-radius-sm);
    isolation: isolate;
}

.video-wrapper {
    aspect-ratio: 16 / 9; /* Default, per Inline-Style überschreibbar */
}

.audio-wrapper {
    height: 166px; /* Default-Höhe, per Inline-Style überschreibbar */
}

.video-wrapper .media-placeholder,
.video-wrapper iframe,
.audio-wrapper .media-placeholder,
.audio-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper .media-placeholder,
.audio-wrapper .media-placeholder {
    z-index: 2; /* liegt immer über dem Iframe */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    background: linear-gradient(var(--overlay-scrim), var(--overlay-scrim));
    background-size: cover;
    background-position: center;
    /* Die Basisregel .media-placeholder setzt padding 40px und
       min-height 200px -- hier ausdruecklich zurueck. Unter 356px
       Breite ist der 16:9-Wrapper niedriger als 200px, der
       Platzhalter ragte unten hinaus und verlor seine Rundung. */
    padding: 0;
    min-height: 0;
    border-radius: 0;   /* rundet der Wrapper */
}

.video-wrapper iframe,
.audio-wrapper iframe {
    z-index: 1;
    border-radius: 0;   /* rundet der Wrapper */
}

.video-wrapper .media-placeholder .no-icon,
.audio-wrapper .media-placeholder .no-icon {
    width: 48px;
    height: 48px;
    color: #fff;
    filter: drop-shadow(var(--shadow-media-text));
}

.video-wrapper .media-placeholder span,
.video-wrapper .media-placeholder span a,
.audio-wrapper .media-placeholder span,
.audio-wrapper .media-placeholder span a {
    color: #fff;
    text-shadow: var(--shadow-media-text);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
}

.video-wrapper .media-placeholder span a,
.audio-wrapper .media-placeholder span a {
    text-decoration: underline;
}

/* ============================================
   NATIVE AUDIO-DATEIEN (<audio>-Tag)
   Kein Cookie-Placeholder nötig, da selbst gehostete
   Dateien keine Drittanbieter-Cookies/Tracking laden.
   ============================================ */
.native-audio-player {
    width: 100%;
    max-width: 100%;
    height: 40px;
    border-radius: var(--border-radius-md);
}



/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 991px) {
    .nav-toggle {
        display: block;
    }

    .nav-desktop {
        display: none !important; /* BEHALTEN: Muss andere Regeln überschreiben */
    }

    .nav-mobile {
        display: block;
    }

    /* Mobile: Sidebar ausblenden */
    .artist-sidebar {
        display: none !important; /* BEHALTEN: Muss sicherstellen, dass sie weg ist */
    }
}

@media (min-width: 992px) {
    .nav-toggle {
        display: none !important; /* BEHALTEN */
    }

    .nav-mobile {
        display: none !important; /* BEHALTEN */
    }

    .nav-desktop {
        display: block;
    }

    /* Desktop: Sidebar einblenden */
    .artist-sidebar {
        border-right: 1px solid var(--color-border-light);
        border-bottom: none;
    }
}
/* ============================================
   HILFSKLASSEN + KARTEN-APP-BUTTONS (Footer)
   Frühere Footer-Regeln (.footer-links-row, .separator,
   .mobile-center, .kontakt_button, globale Gap-Regel für
   ".row > .col-12 > div:first-child") sind durch den
   Abschnitt FOOTER ersetzt.
   ============================================ */
/* Verstecktes Element */
.hidden {
    display: none !important;
}

@media screen and (max-width: 991px) {
    .cookie-mobile-left {
        text-align: left !important;
    }
}

.app-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: flex-start;
  align-items: flex-start;
}

@media screen and (max-width: 991px) {
  .app-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
}

/* ============================================
   TAP-TARGET-FIX für kleine Text-Links
   (Telefonnummer, kulturist.ch etc.)
   Vergrössert per unsichtbarem Padding die
   Klickfläche auf ~48px Höhe, ohne den
   sichtbaren Text zu verändern.
   ============================================ */
.tap-target-link {
    display: inline-block;
    padding: 14px 4px;
    margin: -14px -4px; /* gleicht das Padding im Layout wieder aus, kein visueller Versatz */
}


/* ============================================================
   SWISSTOPO KARTE (MapLibre)
   Alles, was die interaktive Karte betrifft. Das Vorschaubild
   der gesperrten Flaeche steht weiter oben bei MAP PLACEHOLDER.
   ============================================================ */

/* --- Marker-Pins blau einfaerben ---
   Vorher in 06-leaflet@1.9.4.css. Die Leaflet-CSS-Dateien werden nicht mehr
   geladen; die Klasse vergibt jetzt 07-map.js an die MapLibre-Marker.
   Ohne diese Regel erscheinen die Pins schwarz. */
.kulturist-marker-icon img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(95%) saturate(1600%) hue-rotate(185deg) contrast(105%);
}

/* --- Aktivierungs-Schaltflaeche der Karte ---
   Blau wie die Marker. Kontrast zu Weiss betraegt rund 5.4:1 und erfuellt
   damit die Anforderung fuer normalen Text (mindestens 4.5:1). */
.btn-map-activate {
    display: inline-block;
    background: #0059FC;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-family: 'Hermes Thin', 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 34px;
    padding: 0 18px;
    white-space: nowrap;
    text-align: center;
}

/* --- Popups ---
   WICHTIG (Farbe): Leaflets CSS setzte im Popup ausdruecklich color: #333.
   MapLibres CSS faerbt nur den Hintergrund weiss und laesst die Textfarbe
   erben. Da die Karte im Footer sitzt, wo color: #fff gilt, waere der
   Popup-Text sonst weiss auf weiss — also unsichtbar.

   WICHTIG (Schrift): Bewusst KEIN var(--font-sans-thin) hier. Hermes Thin
   enthaelt das Zeichen × nicht, das MapLibre fuer den Schliessen-Knopf
   verwendet — es erschiene ein leeres Ersatz-Kaestchen. Die Werte unten
   entsprechen der frueheren Leaflet-Darstellung. */
.maplibregl-popup-content {
    color: #333;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    border-radius: 12px;
    padding: 13px 26px 13px 18px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.maplibregl-popup-content strong {
    color: #000;
}

/* Der Zipfel unterhalb des Popups muss dieselbe Farbe haben wie der Inhalt */
.maplibregl-popup-tip {
    border-top-color: #fff;
    border-bottom-color: #fff;
}

/* Schliessen-Kreuz: eigene Schrift (siehe Hinweis oben), und die Farbe
   muss gesetzt werden, weil sonst Weiss aus dem Footer geerbt wird. */
.maplibregl-popup-close-button {
    font-family: Arial, Helvetica, sans-serif;
    color: #757575;
    font-size: 18px;
    line-height: 1;
    padding: 2px 7px;
    background: transparent;
}

.maplibregl-popup-close-button:hover {
    color: #333;
    background: transparent;
}

/* --- Zwei-Finger-Geste ueber den Popups ---
   Ein Popup liegt als DOM-Element ueber der Karten-Canvas und faengt
   Beruehrungen ab. Wer die Geste auf einem Popup beginnt, bewegt deshalb
   nichts — die Karte bekommt das Ereignis gar nicht erst.

   WICHTIG (Selektor): NICHT .maplibregl-popup — dieses Element hat von
   MapLibre aus bereits pointer-events: none. Abgefangen werden die
   Beruehrungen vom Kind .maplibregl-popup-content, dem MapLibre
   ausdruecklich pointer-events: auto gibt. Nur dort greift es.

   WICHTIG (!important): 07-map.js haengt 06-maplibre-gl.css erst bei der
   Aktivierung in den Head, also NACH dieser Datei. Bei gleicher
   Spezifitaet gewinnt die spaetere Regel — ohne !important wuerde
   MapLibre die Angabe hier ueberstimmen.

   Bewusst nur auf Geraeten ohne Mauszeiger — am Desktop bleibt der
   Popup-Text so weiterhin markier- und kopierbar. */
@media (hover: none) and (pointer: coarse) {
    .maplibregl-popup-content {
        pointer-events: none !important;
    }

    /* Schliessen-Kreuz bleibt als einziges bedienbar */
    .maplibregl-popup-close-button {
        pointer-events: auto !important;
    }
}

/* --- Bedienelemente ---
   Auch hier erbt MapLibre sonst die weisse Footer-Schriftfarbe. */
.maplibregl-ctrl-group button {
    color: #333;
}

.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib a {
    color: #333;
}


/* ============================================
   SECTION SPACER (Utility)
   Leerer Abstandshalter zwischen Blöcken.
   Bewusst height statt margin: Bei einem leeren
   Block-Element kollabieren oberer und unterer
   Rand durch das Element hindurch und dann mit
   den Nachbar-Margins -- der Spacer würde also
   keinen Abstand addieren, sondern nur eine
   Untergrenze setzen. height kollabiert nie.
   ============================================ */
.section-spacer {
    height: var(--margin-top-base);          /* 20px -- Standard */
    width: 100%;                             /* bricht in .row auf eigene Zeile um */
    flex: 0 0 auto;                          /* wird in Flex-Containern nicht gestaucht */
}

.section-spacer.small {
    height: var(--margin-top-small);         /* 10px */
}

.section-spacer.large {
    height: var(--margin-top-verybig);       /* 30px */
}
/* ============================================
   E-MAIL-BUTTONS (09-mailbutton.js) + HONEYPOT
   ============================================ */
/* Während Token/Adresse geholt werden (meist unter einer Sekunde) */
a[data-mail][aria-busy="true"] {
    cursor: progress;
    opacity: 0.7;
}

/* Honeypot: unsichtbar, aber nicht display:none (Bots erkennen das) */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* ============================================================
   KALENDER: EVENT-AUSGABE

   Diese Sektion ersetzt die frühere Sektion EVENTS mit ihren
   Abschnitten 1 bis 6. Die Sektion BUTTONS (.btn-orange) bleibt
   unangetastet — die Sender-Schaltflächen nutzen sie mit, siehe
   Abschnitt 5.


   WAS SICH GEGENÜBER DER ALTEN FASSUNG GEÄNDERT HAT

   Der Kasten wird zur Zeile. Rahmen, Schatten, Hintergrund und
   --min-height-event fallen weg; es bleibt eine Trennlinie über
   die volle Breite. Grund: in der 340px-Spalte der Produktions-
   seiten kosteten Rahmen und Innenabstand auf beiden Seiten
   Platz, den der Titel braucht — dort brach "PHILIPPE" zu
   "PHIL-IPPE" um. Und --min-height-event erzwang 220px auch bei
   Einträgen mit drei Zeilen Inhalt.

   Die Liste ist in JEDER Breite einspaltig. Ein Termin pro
   Zeile, chronologisch von oben nach unten — bei zwei Spalten
   muss das Auge nach jedem Eintrag entscheiden, ob der nächste
   rechts oder unten steht.

   Alle Textbausteine haben dieselbe Grösse wie der Titel
   (--font-size-base). Der Titel hebt sich über die Schrift ab,
   nicht über die Grösse. Die frühere Staffelung mit
   --font-size-small machte Mitwirkende und Ortsangaben auf
   kleinen Bildschirmen unnötig schwer lesbar.

   Das Layout richtet sich nach der CONTAINERBREITE, nicht nach
   der Fensterbreite. Nötig, weil dieselbe Liste einmal 340px
   breit in der Sidebar steht und einmal über die ganze Agenda-
   seite. Ein Media Query nach Viewport würde der schmalen
   Sidebar am grossen Bildschirm das breite Layout geben — also
   genau das Falsche. Container Queries laufen seit 2023 in allen
   Browsern (Chrome 105, Safari 16, Firefox 110). Ohne
   Unterstützung greift die schmale Basisvariante, die in jeder
   Breite funktioniert.

   Die Abstandsdisziplin aus der alten Fassung bleibt: alle
   Abstände von oben, nie gemischt, alle an einer Stelle. Der
   Grund gilt unverändert — nicht jeder Eintrag hat alle
   Bausteine.

   Nicht mehr nötig, weil die <br> aus dem Template raus sind:
   .eventframe_termine > br { display: none } und der ganze
   display:block-Block. Die Bausteine sind jetzt echte Blöcke.

   GLIEDERUNG
     1. Liste und Container
     2. Die Zeile
     3. Datumsmarker
     4. Textbausteine
     5. Zeit, Ort, Sender
     6. Monatsbalken
     7. Breite Ansicht (Container Query)
     8. Berührungsziele
   ============================================================ */


/* ============================================================
   VARIABLEN DIESER SEKTION

   Alle Werte stehen in 02-variables.css im Block
   EVENT COMPONENT STYLES:

       --color-event-text        Fliesstext der Zeile
       --color-event-date        Datumsblock und Trennlinien
       --font-event-date         Schrift von Datum und Uhrzeit
       --color-event-highlight   Premiere / Derniere
       --color-event-warning     abgesagt, verschoben, ausverkauft
       --border-event            nur noch Monatsbalken
       --shadow-event            nur noch Monatsbalken

   --color-event-date faerbt den kompletten Datumsblock --
   Wochentag, Tag, Monat und Uhrzeit, auch die Uhrzeiten in der
   Sendeliste -- und die Trennlinien zwischen den Eintraegen.
   Frueher trugen diese zwei verschiedene Farben: Tag und Uhrzeit
   standen auf --color-text-main, Wochentag und Monat auf
   --color-text-muted. Das las sich wie eine Gewichtung, die gar
   nicht gemeint war.

   --font-event-date auf var(--font-serif) setzen, um Datum und
   Uhrzeit in Sabon zu zeigen. Umgeschaltet wird in
   02-variables.css, nicht an den Verwendungsstellen unten: der
   zweite Wert in einem var()-Aufruf ist ein Fallback und greift
   nur, wenn die Variable ueberhaupt nicht gesetzt ist. Die
   Fallbacks hier sind reine Absicherung, falls eine Variable
   einmal aus 02-variables.css verschwindet.

   --color-event-highlight und --color-event-warning ersetzen die
   frueheren Literale #319C46 und indianred; beide lagen unter dem
   geforderten Kontrast von 4,5:1 gegen Weiss und fielen bei
   Lighthouse durch. "Eintritt frei" trug frueher #50C878 (2,1:1)
   und laeuft jetzt ueber --color-event-text, siehe Abschnitt 5.

   Beim Umbau entfallen sind --color-event-bg,
   --border-radius-event, --min-height-event, --padding-event und
   --margin-event-bottom.
   ============================================================ */


/* ============================================
   1. LISTE UND CONTAINER

   Die <ul> wird zum Messpunkt für die Container Queries.

   display:block statt flex. Flex mit align-items:stretch sorgte
   dafür, dass alle Kästen einer Zeile gleich hoch werden — ohne
   Kästen gibt es nichts mehr auszugleichen, und ohne Flex kann
   auch kein flex-basis von irgendwoher zwei Einträge
   nebeneinander stellen.
   ============================================ */
.event-list {
    container-type: inline-size;
    container-name: agenda;
    display: block;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.event-list-title {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    color: var(--color-primary);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-small);
    margin-top: var(--margin-top-small);
}
/* Einspaltig in jeder Breite. Die Eigenschaften sind der
   ausdrückliche Gegenzug zu allem, was aus dem alten Raster noch
   irgendwo steht — Bootstrap-Spaltenklassen im Markup, ein
   übriggebliebenes flex-basis, eine col-md-6-Regel.

   Die seitliche Polsterung wird NICHT hier zurückgesetzt. Der
   Selektor hat zwei Teile (0,1,1) und schlüge damit jede Regel
   aus, die einem einzelnen Listeneintrag eine Polsterung gibt —
   der Monatsbalken (0,1,0) verlor auf diesem Weg sein
   padding-left und der Monatsname klebte am linken Rand.
   Zurückgesetzt wird stattdessen gezielt an .eventframe in
   Abschnitt 2, wo die Zeile ihre eigenen Abstände ohnehin
   festlegt. */
.event-list > li {
    position: relative;
    width: 100%;
    max-width: 100%;
    flex: none;
    float: none;
}

/* KEIN display hier. Der Selektor hat zwei Teile (0,1,1) und wuerde
   damit das display:grid aus Abschnitt 7 (0,1,0) ausschlagen -- das
   Raster kaeme nie zustande und der Datumsmarker landete als eigener
   Block ueber dem Titel. Die Blockdarstellung steht deshalb in
   Abschnitt 2 an .eventframe selbst, wo die Container Query sie
   sauber ueberschreiben kann. */


/* ============================================
   2. DIE ZEILE
   ============================================ */
.eventframe {
    color: var(--color-event-text);
    font-family: var(--font-event);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    display: block;

    /* Kurzschreibweise: setzt zugleich die seitliche Polsterung
       auf 0, die frueher aus den Bootstrap-Spaltenklassen kam.
       Der Monatsbalken behaelt seine eigene, siehe Abschnitt 6. */
    padding: 18px 0;
    margin-bottom: 0;
    border: 0;

    /* Volle Breite, in derselben Farbe wie der Datumsblock. Die
       frühere helle Linie (--color-border-light, #eee) hatte gegen
       Weiss ein Kontrastverhältnis von rund 1,2:1 und war auf
       hellen Bildschirmen bei Sonnenlicht praktisch unsichtbar;
       reines Schwarz war umgekehrt kräftiger als der Text, den es
       trennt. */
    border-bottom: 1px solid var(--color-event-date, #555);

    background: none;
    box-shadow: none;
    min-height: 0;
}

/* Ganz am Ende der Liste ist die Linie überflüssig. Zwischen
   zwei Monaten bleibt sie und schliesst den Block ab. */
.event-list > .eventframe:last-child {
    border-bottom: 0;
}

/* Kontext-Override: Im Eventframe fällt der Spacer kompakter aus. */
.eventframe .section-spacer {
    height: var(--margin-top-small);
}


/* ============================================
   3. DATUMSMARKER

   Schmal: eine Zeile über dem Titel, die vier Bausteine stehen
   nebeneinander. Breit: eine eigene Spalte, dort untereinander.
   Der Tag traegt beim Ueberfliegen die Orientierung -- in der
   breiten Ansicht ueber seine Groesse, in der schmalen ueber die
   Position am Zeilenanfang. Farbe und Schriftschnitt sind bei
   allen vier gleich.
   ============================================ */
.event-marker .event-date {
    display: block;
    margin-bottom: var(--margin-top-verysmall);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);

    /* Eine Farbe fuer den ganzen Block. Wochentag, Tag, Monat und
       Uhrzeit erben sie -- keiner der vier setzt sie neu. */
    color: var(--color-event-date, #555);

    /* Umgeschaltet wird oben an der Variable, nicht hier.
       Denselben Aufruf traegt .event-time in Abschnitt 5 --
       beide muessen gleich lauten, sonst laufen Datum und
       Uhrzeit auseinander. */
    font-family: var(--font-event-date, var(--font-event));
}

.marker-weekday,
.marker-day,
.marker-month {
    display: inline;
}

/* Die Leerzeichen zwischen den Bausteinen kommen aus ::after,
   nicht aus dem Quelltext. Im Template stehen die drei <span>
   ohne Umbruch aneinander — sonst würde die Einrückung als
   zusätzlicher Leerraum ausgegeben, gleiches Problem wie beim
   Ortsnamen. */
.marker-weekday::after,
.marker-day::after {
    content: "\00a0";
}

/* Nicht hervorgehoben -- nur die Farbe hebt den Tag von Wochentag
   und Monat ab. Das fruehere --font-sans-semibold liess das Datum
   mit dem Titel um die Aufmerksamkeit konkurrieren. */
/* Der Tag unterscheidet sich nur ueber die Groesse in der
   Rasteransicht, nicht ueber Farbe oder Schriftschnitt. */
.marker-day {
    color: inherit;
}

/* Uhrzeit der Einzeltermine. Sie steht im Template im Datumsblock,
   nicht mehr in der Meta-Zeile: bei einem Termin gehoert die Zeit
   zum Datum. Nur bei mehreren Ausstrahlungen bleibt sie unten bei
   ihrem jeweiligen Sender, weil sie dort unterscheidet. */
.marker-time {
    display: inline;
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.marker-month::after {
    content: "\00a0";
}

/* Mehrtägige Veranstaltung: Zeitraum statt Einzeldatum. */
.event-date.is-range {
    text-transform: none;
    letter-spacing: 0;
}


/* ============================================
   4. TEXTBAUSTEINE

   Alle auf --font-size-base. Unterschieden wird über Schrift und
   Farbe, nicht über die Grösse.
   ============================================ */

.event-body > * {
    display: block;
}

/* --- Premiere / Derniere --- */
.special-show {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-base);
    color: var(--color-event-highlight, #2E8B57);
    font-style: italic;
}

/* --- Abgesagt, verschoben, ausverkauft ... --- */
.event-info {
    font-size: var(--font-size-base);
    color: var(--color-event-warning, #B22222);
    font-style: italic;
}

/* --- Titel ---
   Als <h4> im Markup, deshalb muss die Regel aus 03-typography.css
   (Serif, 24px) hier vollständig überschrieben werden — Schrift,
   Grösse UND Zeilenhöhe. */
.event-title {
    margin: 0 0 2px;
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-base);
    line-height: 1.25;
    color: var(--color-link-default);

    /* Keine automatische Silbentrennung. In schmalen Spalten
       trennt sie Eigennamen falsch — aus PHILIPPE wurde
       PHIL-IPPE. Die Klasse .hypens aus 03-typography.css bleibt
       für Fliesstext zuständig, hier ist sie schädlich. */
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: break-word;
}

/* --- Links allgemein --- */
.eventframe a {
    color: var(--color-link-default);
    font-family: var(--font-event);
    text-decoration: underline;
}

/* Verlinkter Titel: dauerhaft unterstrichen, weil er das
   wichtigste Ziel im Kasten ist. Die Regel setzt nur die Schrift
   zurück — ohne sie greift .eventframe a (zwei Selektorteile,
   also spezifischer als .event-title) und der Titel bekäme
   --font-event. */
.eventframe a.event-title-link {
    font-family: var(--font-sans-semibold);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.eventframe a.event-title-link:hover,
.eventframe a.event-title-link:focus-visible {
    color: var(--color-link-hover);
}

/* --- Mitwirkende ---
   Gleiche Grösse wie der Titel, abgesetzt nur über Schrift und
   Farbe. Zwischen Titel und Namen bleibt bewusst kein Abstand —
   die beiden gehören zusammen. */
.performer {
    margin: 0 0 var(--margin-top-small);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
    hyphens: none;
    -webkit-hyphens: none;
}



/* ============================================
   5. ZEIT, ORT, SENDER

   Früher drei Zeilen untereinander, jetzt eine Flex-Zeile.
   Spart in der schmalen Spalte zwei Zeilen pro Eintrag.
   flex-wrap sorgt dafür, dass lange Ortsangaben umbrechen statt
   überzulaufen.

   Der Sender ist ab sofort eine Schaltfläche: im Template trägt
   der Link die Klassen "ticket btn-orange", genau wie der
   Ticket-Knopf. Damit sind Farbe, Radius, Fokusring UND die
   48px-Trefferfläche aus Abschnitt 8 automatisch identisch — es
   gibt keine zweite Stelle, die nachgepflegt werden muss.
   Deshalb steht hier keine eigene Farbregel dafür.
   ============================================ */
.event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: var(--font-size-base);
}

/* Uhrzeit in der Sendeliste. Ebenfalls nicht hervorgehoben;
   tabular-nums haelt die Ziffern untereinander in einer Flucht,
   damit mehrere Ausstrahlungen als Spalte lesbar bleiben. */
.event-time {
    font-variant-numeric: tabular-nums;
    color: var(--color-event-date, #555);
    font-family: var(--font-event-date, var(--font-event));
}

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

.eventframe .event-venue a {
    color: inherit;
}

.eventframe .event-venue a:hover,
.eventframe .event-venue a:focus-visible {
    color: var(--color-link-hover);
}

/* Der Aussenabstand von .btn-orange (--btn-margin: 0 5px 10px 0)
   würde sich in der Flex-Zeile mit dem gap addieren. In der
   Zeile übernimmt der gap die Abstände. */
.event-meta .btn-orange {
    margin: 0;
}

/* --- Mehrere Sendetermine desselben Abends ---
   Untereinander, jede Ausstrahlung mit eigener Uhrzeit und
   eigenem Sender. Kommt aus broadcasts[], siehe
   groupBroadcasts() in 05-my-events.js. */
.broadcasts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Hinweise zum Zugang ---
   Eine Regel fuer beide: "Eintritt frei / Kollekte" aus der
   Checkbox und der Freitext aus offers.ticketInfo. Sie stammen
   aus verschiedenen Feldern, sagen dem Publikum aber dasselbe --
   etwas Zusaetzliches zum Zugang. Zwei Gestaltungen dafuer
   waeren eine Unterscheidung ohne Bedeutung.

   Farbe --color-event-text, nicht die Signalfarbe: Gratiseintritt
   ist eine Information, keine Warnung und kein Hinweis, der ueber
   dem Titel stehen muesste. Das fruehere Gruen (#50C878) lag mit
   2,1:1 ohnehin unter dem geforderten Kontrast.

   .is-free bleibt als Haken im Markup, falls die beiden doch
   einmal auseinandergehen sollen -- es traegt hier bewusst keine
   eigene Gestaltung. */
.ticket-info {
    display: block;
    margin-top: var(--margin-top-verysmall);
    font-size: var(--font-size-base);
    color: var(--color-event-text);
    font-style: italic;
}

/* --- Schaltflächen --- */
.eventframe [property="offers"] {
    margin-top: var(--margin-top-small);
}


/* ============================================
   6. MONATSBALKEN

   Unverändert bis auf sticky: der Balken bleibt beim Scrollen am
   oberen Rand stehen, solange sein Monat sichtbar ist. Nützlich
   geworden, weil ohne Kästen mehr Einträge gleichzeitig im Bild
   sind.
   ============================================ */
.month-bar {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 2;

    /* Links nur eine Andeutung, damit der Monatsname nicht am
       Rahmen klebt: in der schmalen Ansicht beginnt jeder Eintrag
       ganz links, der Balken bleibt in derselben Flucht.
       Rechts die volle Polsterung -- bei linksbuendigem Text
       ohnehin unsichtbar, haelt aber den Rahmen sauber. */
    padding: 0.4em 0.8em 0.4em 0.15em;
    margin: 1.5em 0 0.5em;
        background: var(--color-surface-form);
    border: var(--border-event);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-event);
    color: var(--color-text-main);
    font-weight: bold;
    list-style: none;
}

.month-bar:first-child {
    margin-top: 0;
}

/* Hier stand kurzzeitig eine Korrektur fuer die Kalenderseite:
   .page-layout--agenda .month-bar { top: var(--nav-height) }, damit
   der Balken nicht hinter der klebenden Navi verschwindet.

   Wieder entfernt. .event-list ist wegen container-type:
   inline-size ein Eingrenzungskontext, und der Sticky-Versatz wird
   darin nicht gegen das Fenster gerechnet, sondern gegen die Liste:
   der Balken wurde um volle 120px nach unten gezeichnet und lag
   quer ueber dem ersten Datum.

   top: 0 ist deshalb kein Versehen, sondern Bedingung. Wer den
   Nav-Abstand braucht, muss den Messpunkt der Container Query von
   der <ul> auf ein <div> darum verlegen -- dann liegt der klebende
   Balken ausserhalb des Eingrenzungskontexts. */

/* Die Überschrift im Balken trägt nur die Bedeutung, nicht das
   Aussehen. Zwei Klassen (0,2,0) schlagen jede Regel, die
   03-typography.css über den Elementnamen h3 setzt. */
.month-bar .month-bar-title {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: none;
    border: 0;
}


/* ============================================
   7. BREITE ANSICHT

   Ab 380px Containerbreite bekommt der Datumsmarker eine eigene
   Rasterspalte. Greift auf normalen Handys und auf der Agenda-
   seite, NICHT in der 340px-Sidebar.

   Das betrifft nur den Aufbau INNERHALB einer Zeile. Die Liste
   selbst bleibt einspaltig, siehe Abschnitt 1.
   ============================================ */
@container agenda (min-width: 320px) {

    .eventframe {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 0 20px;
        align-items: start;
        padding: 22px 0;
    }

    .event-marker .event-date {
        margin-bottom: 0;
        text-align: center;
        line-height: 1.15;
    }

    .marker-weekday,
    .marker-day,
    .marker-month {
        display: block;
    }

    .marker-weekday::after,
    .marker-day::after {
        content: none;
    }

    .marker-day {
        font-size: 32px;
        line-height: 1;
        letter-spacing: -0.03em;
    }

    .marker-month {
        margin-top: 3px;
    }

    /* Untereinander statt in einer Zeile: das Leerzeichen aus
       ::after wird hier nicht gebraucht. */
    .marker-month::after {
        content: none;
    }

    .marker-time {
        display: block;
        margin-top: 6px;
    }

    /* Zeitraum-Angabe braucht mehr Platz als die Spalte hergibt,
       deshalb bleibt sie über beide Spalten. */
    .event-date.is-range {
        grid-column: 1 / -1;
        text-align: left;
    }

    /* In der Rasteransicht rueckt der Monatsname ein. Er steht
       dann neben der Datumsspalte statt ueber einer durchgehend
       linksbuendigen Liste, und ein Einzug in der Groessenordnung
       dieser Spalte haelt ihn von den Datumsangaben frei. */
    .month-bar {
        padding-left: 1em;
    }
}


/* ============================================
   Ab 720px: die Veranstaltungsagenda.

   Der Ticket-Knopf rückt in eine dritte Spalte an den rechten
   Rand. Dadurch stehen alle Knöpfe untereinander in einer Linie
   und man sieht auf einen Blick, welche Termine buchbar sind.
   ============================================ */
@container agenda (min-width: 720px) {

    .eventframe {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 0 26px;
        padding: 24px 0;
    }

    .marker-day {
        font-size: 36px;
    }

    /* Einziger Baustein, der in der breiten Ansicht wächst.
       Alles andere bleibt auf --font-size-base — der Titel
       gewinnt hier zusätzlich über die Grösse, weil in der
       Vollbreite mehr Zeilen gleichzeitig im Blick sind. */
    .event-title {
        font-size: var(--font-size-big);
    }

    .performer {
        max-width: 52ch;
    }

    /* Der Ticket-Knopf bleibt links unter dem Ort -- also in
       jeder Breite an derselben Stelle. Eine dritte Spalte haette
       ihn rechts an den Rand gesetzt; bei 800px liegen dazwischen
       aber gut 500px Leerraum, und der Knopf verliert den Bezug zu
       seinem Termin. */
}


/* ============================================
   8. BERÜHRUNGSZIELE (WCAG 2.5.8, Lighthouse: 48x48px)

   Hier stehen nur Trefferflächen. Die Abstände zwischen den
   Bausteinen regelt Abschnitt 5 — bis auf den Aussenabstand der
   Schaltflächen, der Teil der Trefferfläche ist und deshalb
   hierher gehört.

   Bedingung ist die Eingabeart, nicht die Fensterbreite: ein
   Tablet mit 1024px braucht grosse Trefferflächen, ein schmal
   gezogenes Desktop-Fenster nicht. Deshalb pointer: coarse und
   nicht max-width. Wer das im Browser testen will, muss den
   Gerätemodus einschalten — Schmalziehen allein genügt nicht.

   Der Sender-Knopf braucht hier keine eigene Regel: er trägt
   dieselbe Klasse .btn-orange und bekommt die Trefferfläche
   automatisch mit.
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Sichtbar bleibt der Knopf so kompakt wie am Desktop. Die
       Trefferfläche wächst unsichtbar über ::after auf 48px —
       WCAG 2.5.8 bewertet das Ziel, nicht die Farbfläche.

       !important bei der Polsterung ist nötig, weil .btn-orange
       sein padding selbst mit !important setzt. */
    .eventframe .btn-orange {
        font-family: var(--font-sans-semibold);
        position: relative;
        min-height: 0;
        padding-left: 14px !important;
        padding-right: 14px !important;
        margin: 12px 8px 12px 0;
    }

    .eventframe .btn-orange::after {
        content: "";
        position: absolute;
        inset: 50% 0 auto 0;
        transform: translateY(-50%);
        height: 48px;
    }

    /* In der Flex-Zeile ersetzt ein grösserer gap den margin:
       zwei Trefferflächen nebeneinander müssen sich trennen,
       aber margin und gap dürfen sich nicht addieren. */
    .event-meta {
        gap: 14px 12px;
    }

    .event-meta .btn-orange {
        margin: 0;
    }

    .broadcasts {
        gap: 14px;
    }

    /* Ortsname bleibt ein Textlink. Trefferfläche über senkrechte
       Polsterung; der gap der Flex-Zeile hält die Flächen zweier
       Zeilen auseinander. */
    .eventframe .event-venue a {
        display: inline-block;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    /* Titel: die Zeile ist hoch genug, aber der Link ist bei
       kurzen Titeln schmal. Untere Grenze setzen. */
    .eventframe a.event-title-link {
        display: inline-block;
        min-height: 24px;
    }
}

/* ============================================
   9. FILTERLEISTE (nur Veranstaltungskalender)

   ZUERST das Wichtigste: ausgeblendet heisst ausgeblendet.

   Die Browser-Regel [hidden] { display: none } hat Spezifitaet
   (0,0,1). .eventframe (0,1,0) setzt display: block, die Container
   Query in Abschnitt 7 sogar display: grid -- beide schlagen sie.
   Ohne diese Regel setzen PHP und JavaScript das hidden-Attribut
   korrekt, und sichtbar aendert sich nichts.

   !important, weil auch die Container Query dagegenhaelt: eine
   @container-Regel hat dieselbe Spezifitaet wie eine Regel
   ausserhalb, und die spaetere gewinnt -- Abschnitt 7 steht weiter
   oben, aber die Reihenfolge kann sich beim naechsten Umbau
   aendern.
   ============================================ */
.eventframe[hidden],
.month-bar[hidden] {
    display: none !important;
}


/* ------------------------------------------------------------
   Die Knoepfe sind <a>, keine <button>: sie tragen echte Adressen
   (?kategorie=tv) und funktionieren damit auch ohne JavaScript --
   PHP blendet beim Neuladen dieselben Eintraege aus, die
   08-agenda-filter.js sonst umschaltet. Der aktive Zustand haengt
   deshalb an aria-current, nicht an aria-pressed.

   Geometrie, Rahmen und Uebergang kommen von .btn-white. Hier
   steht nur, was dazukommt.

   Die Leiste erzeugt agenda_filter_bar() in partials/agenda.php,
   und zwar nur fuer Kategorien, die im Datensatz auch vorkommen:
   ein Radio-Knopf ohne Radiotermine erscheint gar nicht. Bei
   weniger als zwei Kategorien faellt die ganze Leiste weg.
   ============================================ */
.event-filter [aria-current="true"] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.event-filter [aria-current="true"]:hover,
.event-filter [aria-current="true"]:active {
    background-color: var(--color-primary-deep);
    border-color: var(--color-primary-deep);
    color: var(--color-text-white);
}

/* Zahlen in gleicher Breite, sonst zappelt der Knopf beim
   Umschalten zwischen 9 und 12 Terminen. */
.filter-count {
    margin-left: 6px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Abstand vor «Premieren» (agenda_filter_bar, 22.10.). Ein leeres
   Element in der Knopfreihe: volle Breite, damit es in der
   umbrechenden Handy-Leiste und im Dialog eine neue Zeile erzwingt,
   und feste Höhe für den Abstand. Die Regeln für .event-filter > *
   (Polsterung, Breite) müssen hier ausdrücklich zurück -- die des
   Dialogs trägt eine ID und braucht darum einen eigenen Selektor. */
.event-filter > .event-filter-trenner,
dialog#filter-dialog .event-filter > .event-filter-trenner {
    flex: none;
    width: 100%;
    height: 14px;
    margin: 0;
    padding: 0;
}
/* Auf dem Handy kein Umbruch vor «Premieren» (01.11.): steht so schon
   in partials/critical.css, hier nachgetragen, damit beide gleich sind. */
@media (max-width: 991px) {
    .event-filter > .event-filter-trenner { display: none; }
}

/* Der Kasten selbst -- gebaut wie .artist-sidebar > aside weiter
   oben in dieser Datei, Zeile 544 ff. Wie dort sitzt er im <aside>
   INNERHALB der Spalte, nicht auf der Spalte: nur so kann er
   kleben, ein Element in voller Zeilenhoehe hat keinen Weg zu
   gehen. Die Spalte wird dafuer in 04-layout.css durchsichtig
   geschaltet.

   Uebernommen sind Sticky-Abstand, Box-Optik, eigener Scrollbereich
   und das Ein- und Ausblenden per .is-hidden. Abweichend ist nur
   das Aussehen der Knoepfe -- die Kuenstler-Navi setzt Links
   untereinander, hier stehen .btn-white-Knoepfe. */
@media (min-width: 992px) {
    .agenda-filter-box > aside {
        position: sticky;
        /* Navbar-Hoehe + etwas Luft */
        top: calc(var(--nav-height) + 20px);

        background-color: var(--color-bg-lighter);
        border: 1px solid var(--color-border-light);
        border-radius: var(--border-radius-sm);
        padding: 20px;
        margin-right: calc(var(--grid-gutter) * 0.5);

        /* Falls die Liste laenger als der Viewport wird: eigener
           Scroll. overscroll-behavior verhindert, dass die Seite
           weiterscrollt, sobald die Liste unten ankommt. */
        max-height: calc(100vh - var(--nav-height) - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--transition-normal),
                    transform var(--transition-normal),
                    visibility 0s;
    }

    /* Wird per JS gesetzt: beim Runterscrollen und am Footer.
       Verhaelt sich damit wie .MainNav.is-hidden -- beim
       Zurueckscrollen ist der Filter sofort wieder da. */
    .agenda-filter-box > aside.is-hidden {
        opacity: 0;
        visibility: hidden;   /* nicht mehr per Tab erreichbar */
        transform: translateY(-12px);
        transition: opacity var(--transition-normal),
                    transform var(--transition-normal),
                    visibility 0s linear 0.3s;
    }

    /* In der Spalte stehen die Knoepfe untereinander und auf
       gleicher Breite -- eine Liste, keine Wolke. */
    .event-filter {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .event-filter > * {
        margin: 0;   /* .btn-white bringt 0 5px 10px 0 mit */
    }
}

@media (prefers-reduced-motion: reduce) {
    .agenda-filter-box > aside {
        transition: none;
    }
}

@media (max-width: 991px) {
    /* Inhaltsbreite Chips, umbrechend -- wie auf der alten Seite.
       Gleich breite Knoepfe kosten hier zu viel Hoehe: vier Stueck
       in einer 200px-Spalte sind zwei volle Zeilen, und der erste
       Termin rutscht aus dem Bild. "Alle 27" darf schmaler sein als
       "Fernsehen 2".

       Etwas kompakter als auf Desktop: 13px statt 14px, 30px statt
       32px Zeilenhoehe, weniger Polsterung. Das Beruehrungsziel
       bleibt ueber 32px, weil der Rahmen und der Abstand dazukommen. */
    .event-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .event-filter > * {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0 12px;
        font-size: 13px;
        line-height: 30px;
    }
}


/* ============================================
   10. FILTER-DIALOG (nur Mobile)

   Wer weit unten in der Liste steht, kommt ueber den Filter-Knopf
   der Sticky-Bar hierher, statt zwanzig Bildschirme zurueckzu-
   scrollen.

   Im Dialog stehen KEINE eigenen Knoepfe: 08-agenda-filter.js
   haengt die vorhandene .event-filter beim Oeffnen hinein und beim
   Schliessen wieder an ihren Platz. Eine Quelle, keine doppelten
   IDs, nichts, was auseinanderlaufen kann.

   Zentriert und schmal wie der Ticket-Hinweis (450px, 90% Breite),
   damit beide Dialoge der Seite gleich auftreten. Farben, Schatten
   und Abdunkelung kommen aus denselben Variablen.
   ============================================ */
dialog#filter-dialog {
    border: none;
    border-radius: var(--dialog-radius, 8px);
    padding: 0;
    max-width: 450px;                /* wie #ticket-info-dialog */
    width: 90%;
    max-height: 85vh;
    margin: auto;                    /* zentriert im Viewport */
    background: transparent;
    color: var(--color-text-main);
    box-shadow: var(--dialog-shadow, 0 5px 15px rgba(0, 0, 0, 0.3));
}

dialog#filter-dialog::backdrop {
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(2px);
}

dialog#filter-dialog .dialog-content {
    background: var(--color-bg-lighter);
    border-radius: var(--dialog-radius);
    padding: 24px;
}

dialog#filter-dialog h4 {
    margin: 0 0 16px;
    font-family: var(--font-sans-thin);
    font-weight: 300;
    font-size: var(--font-size-big);
    text-align: center;
}

/* Im Dialog stehen die Knoepfe untereinander: mehr Trefferflaeche
   als nebeneinander, und die Zahlen fluchten. Das Raster der Seite
   (zwei Spalten) wird hier ueberschrieben. */
dialog#filter-dialog .event-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-height: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Im Dialog etwas groesser als in der Seite: hier ist Platz, und
   der Daumen trifft ein 40px hohes Ziel besser. */
dialog#filter-dialog .event-filter > * {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0 16px;
    font-size: var(--btn-font-size);
    line-height: 40px;
}

dialog#filter-dialog .dialog-buttons {
    margin-top: 20px;
    text-align: center;
}

dialog#filter-dialog .dialog-buttons .btn-white {
    margin: 0;
    padding: 0 24px;
    line-height: 40px;
}

/* Auf Desktop gibt es weder Sticky-Bar noch Dialog. */
@media (min-width: 992px) {
    dialog#filter-dialog {
        display: none;
    }
}

/* Trefferzahl ueber der Liste. Im Markup aria-live="polite":
   beim Umschalten wird die neue Zahl vorgelesen, sonst bliebe fuer
   Screenreader unklar, was der Klick bewirkt hat. */
.agenda-count {
    margin-bottom: var(--margin-bottom-base);
    color: var(--color-text-muted);
    font-family: var(--font-event);
    font-size: var(--font-size-small);
}

/* Keine Termine im Datensatz -- nicht zu verwechseln mit "keine
   Treffer in dieser Kategorie", das steht in .agenda-count. */
.agenda-empty {
    margin-top: var(--margin-top-base);
    color: var(--color-text-muted);
    font-family: var(--font-event);
}


/* ============================================
   PRIVATSPHÄRE-BUTTON (fix, links unten)
   Nur ab 992px: darunter gibt es den Zugriff in der Sticky-Bar.
   Verschwindet über dem Footer, dort steht der Link "Privatsphäre".
   z-index unter Navbar (1000) und Sticky-Bar (999).
   ============================================ */
.privacy-fab {
    display: none;
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 900;
    width: 48px;
    height: 48px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: var(--color-bg-lighter);
    border: 1px solid var(--color-border-faint);
    border-radius: 50%;
    box-shadow: var(--shadow-kulturist);
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                opacity var(--transition-normal),
                visibility 0s;
}
.privacy-fab-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

@media (min-width: 992px) {
    .privacy-fab { display: inline-flex; }
}

/* Über dem Footer ausblenden (Klasse setzt 09-privacy-button.js) */
.privacy-fab.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-normal),
                visibility 0s var(--transition-normal);
}

@media (hover: hover) {
    .privacy-fab:hover {
        color: var(--color-text-white);
        background: var(--color-primary);
    }
}
.privacy-fab:active { background: var(--color-primary-deep); color: var(--color-text-white); }
.privacy-fab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

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


/* ============================================================
   UEBERSCHRIFTEN-OPTIK, ENTKOPPELT VON DER EBENE

   Nach dem Umbau richtet sich die h-Ebene nach der Gliederung,
   nicht mehr nach dem gewuenschten Aussehen. Damit die Seite
   genauso aussieht wie vorher, tragen die Ueberschriften diese
   beiden Klassen:

   .heading-accent   braun, wie bisher jedes h3
                     (LUECKE, TV SRF1, Vimeo, YouTube)
   .heading-sub      24px Serif schwarz, wie bisher jedes h4
                     (Untertitel der Video-Bloecke)

   «Postmodern Talking» bekommt bewusst KEINE der beiden: das
   schwarze, groessere h2 hebt das aktuelle Programm ab.
   ============================================================ */
.heading-accent {
    color: var(--color-primary);
}

.heading-sub {
    font-family: var(--font-article-subtitle);
    font-size: var(--font-size-subtitle);
    color: var(--color-text-main);
}


/* ============================================================
   SILBENTRENNUNG: Klassenname korrigiert

   In 03-typography.css heisst die Regel .hypens (Tippfehler).
   Im Markup stand sie mal als "hypens", mal als "hyphens" -- an
   den "hyphens"-Stellen hat die Silbentrennung deshalb nie
   gegriffen. Die Seiten nutzen jetzt durchgaengig .hyphens;
   diese Regel macht sie wirksam, ohne 03-typography.css
   anzufassen. Sobald dort .hypens in .hyphens umbenannt ist,
   kann dieser Block raus.
   ============================================================ */
.hyphens {
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-chars: auto 5;
    -webkit-hyphenate-limit-lines: 2;
    -ms-hyphens: auto;
}


/* ============================================================
   ERGÄNZUNGEN FÜR 05-components.css
   aufgedeckt beim Bauen von kunst/irre-welle.html, 06.10.2026

   Zwei Blocktypen, die die Vorlage bisher nicht kannte, weil
   Markus und Patti sie nicht brauchten. Beide Regeln hinter die
   jeweils verwandte Regel einsetzen -- die Reihenfolge in der
   Datei ist sonst beliebig, aber so bleibt Verwandtes beieinander.
   ============================================================ */


/* ------------------------------------------------------------
   1. UNTERÜBERSCHRIFT IN DER PREIS-KLAPPBOX
   einsetzen direkt nach  .artist-awards

   Irre Welle ist ein Duo, und die Preise gehören nicht der
   Gruppe, sondern den zwei Personen -- beide haben sie vor der
   Gründung 2025 gewonnen. Es braucht also zwei Listen mit je
   einer Überschrift, wie es «Bisheriges» mit
   .previous-credits-subheading schon vormacht.

   Nicht einfach .previous-credits-subheading mitbenutzen:
   die ist --font-serif-bold, und die Preisliste darunter läuft
   in --font-sans-thin. Serif-Überschrift über Sans-Liste sieht
   aus wie ein Versehen. Darum sans, passend zur Liste.

   margin-top, weil zwischen erster Liste und zweiter
   Überschrift ein .section-spacer steht -- die Regel setzt
   nur den kleinen Rest, der die Überschrift an ihre Liste
   bindet statt an die Lücke darüber.
   ------------------------------------------------------------ */
.artist-awards-subheading {
    font-family: var(--font-sans-semibold)!important;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-small);
}


/* ------------------------------------------------------------
   2. PUBLIKUMSZITATE
   einsetzen am Ende des Abschnitts der Programm-Blöcke

   Die Guillemets stehen im HTML, nicht hier als ::before: fällt
   diese Regel einmal aus, liest sich der Absatz trotzdem als
   Zitat. Ein Anführungszeichen, das nur im Stylesheet existiert,
   verschwindet beim Kopieren des Textes und im Lesemodus.

   Der Balken links statt eines Einzugs: in der 570px-Spalte ist
   ein Einzug allein kaum zu erkennen, sobald mehrere Zitate
   untereinander stehen. --color-secondary ist die Akzentfarbe,
   dieselbe wie am SoundCloud-Abspielbalken.

   Keine Kursive. Hermes Thin hat keinen echten Kursivschnitt,
   der Browser würde ihn schräg stellen -- das sieht bei einer
   geometrischen Sans nach Fehler aus.
   ------------------------------------------------------------ */
.audience-quote {
    font-family: var(--font-sans-thin)!important;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin: 0 0 var(--margin-bottom-base) 0;
    padding: 0 0 0 20px;
    border-left: 2px solid var(--color-secondary);
}
.audience-quote:last-child {
    margin-bottom: 0;      /* letzter Block der Spalte, kein Spacer danach */
}

/* ============================================================
   SPRUNGZIELE UNTER DER STICKY-BAR (nur Mobile)

   html { scroll-padding-top } rechnet mit der Navbar (100 + 20px).
   Beim Runterscrollen faehrt die Navbar aber weg, oben steht nur
   noch die Sticky-Bar: 10 + 34 + 10 + 1 = rund 55px. Das Ziel
   landete deshalb rund 65px zu tief. Auf Mobile darum die Hoehe
   der Bar plus 10px Luft.

   Wirkt nur, wenn 03-sticky-bar.js mit scrollIntoView() oder
   einem Anker springt. Rechnet es selbst mit window.scrollTo(),
   ignoriert der Browser diesen Wert -- dann gehoert er ins JS.
   ============================================================ */
@media (max-width: 991px) {
    html { scroll-padding-top: 65px; }
}

/* ============================================================
   PRODUKTIONEN (/kunst/produktionen.html)
   ans Ende von 05-components.css anhängen

   Raster, Naht und Mobile-Reihenfolge kommen unverändert aus
   04-layout.css (.page-layout--agenda) -- die Seite benutzt
   dieselben Klassen wie der Kalender. Hier steht nur, was in
   der Liste steht.

   Schriften und Farben wie die Agenda-Zeile: Titel semibold in
   Grundgrösse bzw. --font-size-big, Mitwirkende muted, Datum in
   --color-event-date. Eine Produktion soll aussehen wie ein
   Termin, der schon war.
   ============================================================ */


/* --- Abschnittstitel «Aktuell» / «Archiv» --- */
.prod-section + .prod-section {
    margin-top: var(--margin-top-verybig);
}

.prod-section-title {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    color: var(--color-primary);
    line-height: var(--line-height-base);
    margin: 0 0 var(--margin-bottom-base);
}

.prod-section-title .filter-count {
    font-family: var(--font-sans-thin);
}


/* --- Archiv-Klappe ---
   Gleicher Chevron wie .collapse-mobile, aber auf ALLEN Breiten
   klickbar -- die Klappboxen der Künstlerseite sind auf Desktop
   gesperrt, das Archiv nicht. Darum eigene Regeln statt der
   Klasse. */
.prod-archiv > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 12px 0;
    border-top: 1px solid var(--color-event-date, #555);
}
.prod-archiv > summary::-webkit-details-marker { display: none; }
.prod-archiv > summary::after {
    content: "";
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--color-primary);
    -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
            mask: var(--icon-chevron-down) center / contain no-repeat;
    transition: rotate var(--transition-normal);
}
.prod-archiv[open] > summary::after { rotate: -180deg; }
.prod-archiv > summary .prod-section-title { margin: 0; }
.prod-archiv > summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* --- Bildfläche, gemeinsam für Kachel und Zeile ---
   Einheitlich 3:2, beschnitten statt verzerrt. Die alten
   Kacheln hatten Hoch-, Quer- und Plakatformate gemischt, die
   Zeilen sprangen entsprechend. Wer ein Bild nicht beschnitten
   haben will, braucht eine eigene Kachel-Fassung im 3:2-Format. */
.prod-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

/* Platzhalter, solange 'bild' in den Daten null ist */
.prod-img--leer {
    background: var(--color-surface-form, #f2efee);
}


/* --- AKTUELL: Kachelraster ---
   1 Spalte unter 600px, 2 bis 1199px, 3 ab 1200px. Die Werte
   in PROD_SIZES_AKTUELL (partials/produktionen.php) hängen
   daran -- wer hier ändert, ändert dort mit. */
.prod-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 20px;
}
@media (min-width: 600px)  { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.prod-card-media {
    display: block;
    margin-bottom: 12px;
}

.prod-title {
    margin: 0 0 2px;
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    line-height: 1.25;
    color: var(--color-link-default);
    hyphens: none;                           /* Eigennamen, siehe .event-title */
    -webkit-hyphens: none;
    overflow-wrap: break-word;
}
.prod-title a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transition-fast);
}
.prod-title a:hover,
.prod-title a:focus-visible { text-decoration-color: currentColor; }

.prod-artist {
    margin: 0 0 var(--margin-top-small);
    font-family: var(--font-event);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
    hyphens: none;
    -webkit-hyphens: none;
}

.prod-meta {
    margin: 0;
    font-family: var(--font-event-date, var(--font-event));
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-event-date, #555);
}
.prod-meta a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prod-meta a:hover,
.prod-meta a:focus-visible { color: var(--color-link-hover); }


/* --- ARCHIV: Zeilen ---
   Bild links schmal, Text rechts. Trennlinie wie .eventframe. */
.prod-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.prod-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-event-date, #555);
}
.prod-row:last-child { border-bottom: 0; }

@media (min-width: 768px) {
    .prod-row {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 0 26px;
        padding: 24px 0;
    }
}

.prod-row .prod-title {
    font-size: var(--font-size-base);
}
@media (min-width: 768px) {
    .prod-row .prod-title { font-size: var(--font-size-big); }
}

.prod-link {
    margin: var(--margin-top-small) 0 0;
    font-family: var(--font-event);
}
.prod-link a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* --- Archivbild als Knopf: öffnet den Dialog ---
   Knopf ohne Knopf-Optik, das Bild füllt ihn ganz. */
button.prod-row-media {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}
button.prod-row-media img { transition: opacity var(--transition-fast); }
button.prod-row-media:hover img { opacity: .85; }

/* --- Knopf «Mehr zur Produktion» ---
   Sieht aus wie ein Link (ein Knopf, weil er nicht navigiert,
   sondern einen Dialog öffnet). Gleiche Farbe wie der Link daneben. */
.prod-more-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.prod-more-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* --- Dialog einer Archivproduktion ---
   Gleiche Herkunft wie #ticket-info-dialog und #filter-dialog
   (Rundung, Schatten, Abdunkelung aus denselben Variablen), aber
   breit genug für Bilder: 760px statt 450px. Der Inhalt scrollt
   im Dialog, die Kopfzeile mit dem Schliessen-Kreuz bleibt stehen.
   Scroll-Sperre der Seite: html.has-open-dialog (05-components.css),
   gesetzt von 08-produktionen.js. */
dialog.prod-dialog {
    border: none;
    border-radius: var(--dialog-radius, 8px);
    padding: 0;
    width: 92%;
    max-width: 760px;
    max-height: 90vh;
    margin: auto;
    background: transparent;
    color: var(--color-text-main);
    box-shadow: var(--dialog-shadow, 0 5px 15px rgba(0, 0, 0, 0.3));
    overflow: hidden;
}
dialog.prod-dialog::backdrop {
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(2px);
}
dialog.prod-dialog .dialog-content {
    background: var(--color-bg-lighter);
    border-radius: var(--dialog-radius);
    padding: 0 24px 24px;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;            /* Seite dahinter scrollt nicht mit */
}
@media (min-width: 768px) {
    dialog.prod-dialog .dialog-content { padding: 0 36px 32px; }
}

.prod-dialog-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 8px;
    background: var(--color-bg-lighter);
}
.prod-dialog-title {
    margin: 0;
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    line-height: 1.25;
    color: var(--color-link-default);
    hyphens: none;
    -webkit-hyphens: none;
}
.prod-dialog-x {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: -6px -8px 0 0;
    padding: 6px;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-primary);
}
.prod-dialog-x svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}
.prod-dialog-x:hover,
.prod-dialog-x:focus-visible {
    background: var(--color-surface-form, #f2efee);
    outline: none;
}
dialog.prod-dialog .dialog-buttons {
    display: flex;
    justify-content: center;
    margin-top: var(--margin-top-base);
}

/* Bilder und Videos im Dialog: volle Textbreite, nicht beschnitten
   -- hier soll man die Produktion sehen, nicht eine Kachel. */
.prod-figur { margin: var(--margin-top-base) 0; }

/* Untertitel aus dem alten Modal (zweite Überschrift) */
.prod-subtitle {
    margin: 0 0 var(--margin-bottom-base);
    font-family: var(--font-sans-regular);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

/* Zitat mit Quelle (DIE FREMDENINDUSTRIE) */
.prod-zitat { margin: var(--margin-top-base) 0; }
.prod-zitat blockquote {
    margin: 0;
    padding-left: 16px;
    border-left: 2px solid var(--color-primary);
    font-style: italic;
}
.prod-zitat figcaption { text-align: right; margin-top: 4px; }
.prod-figur-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
}
.prod-dialog .video-wrapper { margin: var(--margin-top-base) 0; }

.prod-text {
    margin-top: var(--margin-top-base);
    font-family: var(--font-article-text);
    font-size: var(--font-size-base);
    line-height: 1.45;
}
.prod-text p { margin: 0 0 var(--margin-bottom-base); }
.prod-text h4 {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-base);
    margin: var(--margin-top-base) 0 4px;
}
.prod-text ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--margin-bottom-base);
    font-family: var(--font-sans-thin);
}
.prod-text .figcap { text-align: right; }

@media (prefers-reduced-motion: reduce) {
    .prod-archiv > summary::after { transition: none; }
}

/* Ganzes Bild statt Beschnitt (Plakate, quadratische Grafiken). In den Daten: ganz => true */
.prod-img--ganz {
    object-fit: contain;
    background: var(--color-surface-form, #f2efee);
}

/* --- Dialog auf dem Smartphone (Nachtrag 12.10.) ---
   iOS-Safari legt Adressleiste und Werkzeugleiste ÜBER die Seite.
   100dvh reicht dann bis unter die Leisten: Kopf und Kreuz rutschen
   oben darunter, unten stösst der Dialog an die Wischgeste des
   Home-Balkens. svh = Höhe bei ausgeklappten Leisten, also der
   Platz, der sicher frei ist; dazu 40px Luft oben und unten.
   Steht NACH den übrigen prod-dialog-Regeln und überschreibt sie. */
dialog.prod-dialog,
dialog.prod-dialog .dialog-content {
    max-height: calc(100vh - 56px);
    max-height: calc(100svh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
dialog.prod-dialog .dialog-content {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}
dialog.prod-dialog .dialog-buttons {
    margin-top: calc(var(--margin-top-base) * 1.5);
}
@media (min-width: 768px) {
    dialog.prod-dialog .dialog-content { padding-bottom: 48px; }
}





/* --- Kacheln «Aktuell»: weiss, feiner Rahmen um die Textfläche,
   Link «Mehr zur Produktion» (13.10.) ---
   Bild oben bündig, darunter die Textfläche mit Rahmen links,
   unten und rechts (oben schliesst das Bild ab). Der Link sitzt
   immer unten, damit alle Links einer Reihe auf gleicher Höhe
   stehen. Gleiche Linkform wie im Archiv. */
.prod-card {
    display: flex;
    flex-direction: column;
}
.prod-card .prod-card-media { margin-bottom: 0; }
.prod-card .prod-img { border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; }

.prod-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    border: 1px solid var(--color-border-light);
    border-top: 0;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}
.prod-card-more {
    margin: auto 0 0;                       /* nach unten schieben */
    padding-top: var(--margin-top-small, 12px);
    font-family: var(--font-event);         /* wie .prod-link im Archiv */
}

/* Linkform für beide: Kachel und Archivzeile */
.prod-card-more a,
.prod-link a,
.prod-more-btn {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prod-card-more a:hover,
.prod-card-more a:focus-visible,
.prod-link a:hover,
.prod-link a:focus-visible,
.prod-more-btn:hover,
.prod-more-btn:focus-visible { color: var(--color-link-hover); }


/* ============================================================
   MEDIEN (/kunst/medien.html)
   ERSETZT den bisherigen Medien-Block am Ende von
   05-components.css (alles ab «Medien-Seite (/kunst/medien.html)»
   löschen, dies einfügen).

   Fast alles kommt aus Vorhandenem:
     Raster, Sprungkasten     .page-layout--agenda, .agenda-filter-box,
                              .event-filter + .btn-white (wie Produktionen)
     Klappe pro Künstler:in   .prod-archiv (Linie, Chevron, Fokus)
     Name                     .prod-section-title
     Stücke unter dem Namen   .prod-artist
     Programmtitel            .prod-title
     Link zur Künstlerseite   .prod-link
   Hier steht nur, was es nicht gibt: Porträt in der Zeile,
   Bildraster, Download-Zeilen. Werte nur aus 02-variables.css.
   ============================================================ */


/* --- Klappe pro Künstler:in (Aussehen wie Entwurf 9) --- */
.medien-kuenstler { border-top: 1px solid var(--color-border); }
.medien-kuenstler:last-child { border-bottom: 1px solid var(--color-border); }
.medien-kuenstler > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .6em;
    padding: 1rem 0;
    scroll-margin-top: calc(var(--nav-height) + 20px);
}
.medien-kuenstler > summary::-webkit-details-marker { display: none; }
.medien-kuenstler > summary::before {
    content: "+";
    flex: none;
    width: 1em;
    font-size: 1.4em;
    line-height: 1;
}
.medien-kuenstler[open] > summary::before { content: "\2212"; }
.medien-kuenstler > summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.medien-h2 { margin: 0; font-size: 1.3rem; }

.medien-portrait {
    flex: none;
    width: 144px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-border-light);
}
.medien-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .medien-portrait { width: 96px; } }

.medien-kopf { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.medien-kopf-stuecke { font-size: .9rem; color: var(--color-text-muted); }
.medien-kuenstler[open] .medien-kopf-stuecke { display: none; }

.medien-body { padding: 0 0 2rem; }
.medien-zur-seite { margin: 0 0 1.5rem; }

.medien-programm { margin: 0 0 2.5rem; scroll-margin-top: calc(var(--nav-height) + 20px); }
.medien-h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.medien-h4 { margin: 1.5rem 0 .6rem; font-size: 1rem; font-weight: 600; }


/* --- Download-Zeilen (Pressetext, Technik, Rider …) ---
   Trennlinie wie die Archivzeilen, nur heller. */
.medien-docs {
    list-style: none;
    margin: var(--margin-top-small) 0 0;
    padding: 0;
    font-family: var(--font-event);
}
.medien-docs li {
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.medien-dl {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.medien-dl:hover,
.medien-dl:focus-visible { color: var(--color-link-hover); }

/* «JPG · 3.2 MB · 4000 × 6000 px» */
.medien-dl-info,
.medien-masse {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.medien-dl-info { white-space: nowrap; }

.medien-folgt { font-family: var(--font-event); color: var(--color-text-muted); }
.medien-folgt span { font-style: var(--font-style-italic); }


/* --- Bildraster ---
   Alle Bilder in gleich hohen Feldern, ganz sichtbar (contain)
   statt beschnitten: Hoch- und Querformat, Plakat und Sperrbild
   stehen ruhig nebeneinander. Fläche wie .prod-img--ganz. */
.medien-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--grid-gutter);
}
.medien-grid--video {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin-top: var(--margin-top-base);
}

.medien-figur {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-event);
}
.medien-figur picture,
.medien-figur video {
    display: block;
    background: var(--color-surface-form);
    border-radius: var(--border-radius-sm);
}
.medien-img,
.medien-figur video {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
}
.medien-figur figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-small);
    line-height: var(--line-height-base);
}
.medien-legende { color: var(--color-text-main); }
.medien-figur--ohne { justify-content: center; min-height: 80px; }


/* --- Nutzungshinweis: Fliesstextgrösse, Hermes Thin --- */
.medien-hinweis {
    margin-top: var(--margin-top-base);
    margin-bottom: 0;
    padding-bottom: var(--margin-bottom-max);   /* padding statt margin: geht im Titelkasten nicht verloren */
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-main);
}


/* --- Bildunterschriften in Sabon (wie Fliesstext), Dateiname
   darf umbrechen, sonst sprengt er die Kachel --- */
.medien-figur,
.medien-figur figcaption { font-family: var(--font-serif); }
.medien-dl { overflow-wrap: anywhere; }

/* --- Vorschau: Bild ist ein Link, Lupe als Zeiger --- */
.medien-zoom { display: block; cursor: zoom-in; }
.medien-zoom img { transition: opacity var(--transition-fast); }
.medien-zoom:hover img { opacity: .85; }

/* Dialog: Rahmen, Kopf und Kreuz kommen von .prod-dialog */
.medien-vorschau-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: var(--color-surface-form);
    border-radius: var(--border-radius-sm);
}
.medien-vorschau-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--margin-top-small);
    font-family: var(--font-serif);
    font-size: var(--font-size-small);
}


/* ============================================================
   MEDIEN – ANMELDUNG (/kunst/medien.html, seit 31.10.2026)
   Gehört zu php/medien-zugang.php und js/08-medien-reg.js.
   Felder und Knopf kommen vom Kontaktformular (.inquiry-*),
   Rahmen und Kopf vom Produktionen-Dialog (.prod-dialog).
   ============================================================ */
/* Nicht-modal geöffnet (dlg.show(), siehe 08-medien-reg.js), damit
   das Bilderrätsel von hCaptcha DARÜBER erscheint: der Dialog selbst
   füllt das Fenster und ist die Abdunkelung, die weisse Box ist
   .dialog-content. z-index über Navigation (1000), unter hCaptcha. */
dialog.medien-reg[open] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(2px);
    border-radius: 0;
    box-shadow: none;
}
dialog.medien-reg .dialog-content {
    width: 92%;
    max-width: 520px;
    max-height: min(90vh, calc(100% - 16px));   /* 100% = Fenster; mit Tastatur nur der sichtbare Teil */
    box-shadow: var(--dialog-shadow, 0 5px 15px rgba(0, 0, 0, 0.3));
}
/* Handy mit offener Tastatur (Klasse setzt 08-medien-reg.js):
   Kopf einzeilig und knapp, damit über der Tastatur Platz für
   Beschriftung und Feld bleibt. */
dialog.medien-reg.mit-tastatur .prod-dialog-head { padding: 10px 0 6px; align-items: center; }
dialog.medien-reg.mit-tastatur .prod-dialog-title { font-size: var(--font-size-base); }
dialog.medien-reg.mit-tastatur .prod-dialog-x { width: 30px; height: 30px; margin-top: 0; padding: 4px; }
.medien-reg-lead {
    margin: 0 0 var(--margin-bottom-base);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}


/* --- Sprungknöpfe nur auf Desktop ---
   Unter 992px stünden sie über der Liste und wiederholen nur, was
   die Zeilen darunter schon zeigen. Nur auf der Medien-Seite: der
   Kalender braucht seinen Filter auch auf dem Handy. */
@media (max-width: 991px) {
    .page-layout .agenda-filter-box.medien-sprung-box { display: none; }
}

/* Sprung-Dialog: schmal, Knöpfe untereinander und gleich breit */
dialog.medien-sprung-dialog { max-width: 420px; }
.medien-sprung-body .event-filter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.medien-sprung-body .event-filter > * { margin: 0; text-align: center; }


/* Download-Link: Pfeil klickbar, aber nur der Text unterstrichen */
.medien-dl { text-decoration: none; }
.medien-dl-text { text-decoration: underline; text-underline-offset: 2px; }




/* --- Sprungknöpfe = Stücktitel (22.10.) ---
   .btn-white ist für einzeilige Knöpfe gebaut (nowrap, feste
   Zeilenhöhe, Polsterung mit !important). Lange Titel wie «Bei uns
   ist alles in Ordnung!» liefen in der 205px-Spalte hinaus. Darum
   dürfen sie hier umbrechen; zwei Klassen und !important, damit es
   gegen .btn-white und die Handy-Regel von .event-filter gewinnt.
   Gilt in der Spalte und im Sprung-Dialog. */
.medien-nav .medien-sprung {
    white-space: normal;
    text-align: left;
    line-height: 1.25 !important;
    padding: 7px 12px !important;
    hyphens: none;
    -webkit-hyphens: none;
}

/* ============================================================
   KNÖPFE IN DER SEITENSPALTE: Farben wie .artist-inquiry-btn (22.10.)
   Filter (Veranstaltungskalender), Sprungknöpfe (Produktionen,
   Stücktitel der Medien-Seite) -- in der Spalte, auf dem Handy
   unter dem Teaser und in den Dialogen. Nur die Farben; Schrift,
   Grösse und Form bleiben die von .btn-white.
   Gewählt (aria-current): --color-primary, Hover: --color-primary-deep.
   ============================================================ */
.event-filter > .btn-white {
    background-color: var(--color-primary-faded);
    border-color: var(--color-primary-faded);
    color: var(--color-text-white);
}
.event-filter > .btn-white[aria-current="true"] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}
.event-filter > .btn-white:hover,
.event-filter > .btn-white:active {
    background-color: var(--color-primary-deep);
    border-color: var(--color-primary-deep);
    color: var(--color-text-white);
}
.event-filter > .btn-white:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================
   AGENTUR-SEITEN (nathalie-buchli.html, ueber-uns.html) -- 22.10.
   freunde-familie.html (.freunde-*, .familie-*, .fk/.fl) -- 26.10.
   angebote.html (.angebote-liste, .angebot-*) -- 26.10.
   Raster: .page-layout--agentur in 04-layout.css. Wiederverwendet:
   .grid-box, .post-heading, .post-lead, .offer-box/.offer-tag,
   .company-intro, .contact-card, .artist-img, .figcap.
   Neu sind nur die Jahresliste (.vita-*) und die Team-Abschnitte.
   ============================================================ */

/* Abschnittstitel in der Inhaltsspalte («Produktionen») */
.vita-abschnitt {
    margin-top: var(--margin-top-max);
    margin-bottom: var(--margin-bottom-small);
}

/* Ein Jahr: Titel, Liste, Management-Zeile */
.vita-jahr {
    margin-top: var(--margin-top-verybig);
}
.vita-jahr-titel {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    line-height: var(--line-height-base);
    color: var(--color-primary);
    margin-bottom: var(--margin-bottom-small);
}

.vita-liste,
.vita-stationen {
    font-family: var(--font-article-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}
.vita-liste > li + li,
.vita-stationen > li + li {
    margin-top: var(--margin-top-small);
}
/* Stücktitel: gerade, die Guillemets im Text zeigen den Titel an */
.vita-liste cite {
    font-style: normal;
    font-family: var(--font-serif-bold);
}

/* Monat bzw. Zeitraum als kleine Zeile über dem Eintrag --
   statt einer festen Spalte, weil die Angaben von «Mai» bis
   «November 2011 – März 2012» reichen. */
.vita-zeit {
    display: block;
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-small);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
}

.vita-management {
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
    margin-top: var(--margin-top-small);
}

/* Werdegang in der rechten Spalte, unter der Direkt-Karte */
.vita-box {
    margin-top: var(--margin-top-verybig);
}
.vita-box-heading {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-big);
    line-height: var(--line-height-base);
    color: var(--color-primary);
    margin-bottom: var(--margin-bottom-small);
}
.vita-stationen {
    font-family: var(--font-sans-thin);
}

/* Über uns: Teambild und Personen */
.team-bild {
    margin: 0 0 var(--margin-bottom-max);
}
.team-person + .team-person {
    margin-top: var(--margin-top-verybig);
    padding-top: var(--margin-top-verybig);
    border-top: 1px solid var(--color-border);
}
.team-name {
    margin-bottom: var(--margin-bottom-verysmall);
}
.team-person .post-article + .post-article {
    margin-top: var(--margin-top-small);
}
.team-tage {
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin-top: var(--margin-top-small);
}


/* Freunde und Familie (freunde-familie.html) -- 26.10.
   Oben «Familie» als Baum (js/08-familie-baum.js zeichnet ihn als
   SVG aus .familie-daten), darunter «Freund:innen» als zwei Listen,
   getrennt nur durch Abstand. Abschnitte und Listen stehen über der
   Falz, darum gleich auch in partials/critical.css; der Baum
   entsteht erst mit dem Skript und steht nur hier. */
.freunde-abschnitt h2 {
    margin-bottom: var(--margin-bottom-small);
}
.freunde-abschnitt + .freunde-abschnitt {
    margin-top: var(--margin-top-verybig);
}
.freunde-liste {
    font-family: var(--font-article-text);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--margin-bottom-verybig);
}

/* Baum: Linien werden zum Ende hin dünner (Fluss -> Nebenfluss) */
.familie-baum {
    margin-bottom: var(--margin-bottom-verybig);
}
.familie-svg {
    display: block;
    width: 100%;
    overflow: visible;
}
.familie-daten ul {
    padding-left: var(--margin-bottom-base);
}
.fl {
    fill: none;
    stroke: var(--color-primary-faded);
    stroke-linecap: round;
}
.fl--1 { stroke-width: 2.2; }
.fl--2 { stroke-width: 1.6; }
.fl--3 { stroke-width: 1.1; }
.fl, .fk { transition: opacity var(--transition-normal), stroke var(--transition-normal); }
.fk-strich {
    stroke: var(--color-primary-faded);
    stroke-width: 1;
    stroke-linecap: round;
}
/* Strich unter dem Etikett so dick wie der Ast, der hineinführt */
.fk--1 .fk-strich { stroke-width: 2.2; }
.fk--2 .fk-strich { stroke-width: 1.6; }
.fk--3 .fk-strich { stroke-width: 1.1; }
.fk-punkt {
    fill: var(--color-bg-light-max);
    stroke: var(--color-primary-faded);
    stroke-width: 1.2;
}
.fk-wurzel {
    fill: var(--color-border-light);
    stroke: var(--color-primary-faded);
}
.fk-text {
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
    fill: var(--color-text-main);
}
.fk--0 .fk-text {
    font-family: var(--font-sans-semibold);
    fill: var(--color-primary);
}
.fk--1 .fk-text {
    font-family: var(--font-article-text);
}
a.fk:hover .fk-punkt { fill: var(--color-primary); stroke: var(--color-primary); }

/* Hover über einem Ast: dieser nach vorne, die übrigen zurück */
.familie-svg.hat-vorne .fk:not(.ist-vorne):not(.fk--0),
.familie-svg.hat-vorne .fl:not(.ist-vorne) { opacity: 0.2; }
.fl.ist-vorne { stroke: var(--color-primary); }
.fk--1.ist-vorne .fk-text { fill: var(--color-primary); }
.fk.ist-vorne .fk-strich { stroke: var(--color-primary); }
.fk:focus { outline: none; }
.fk:focus-visible .fk-text,
a.fk:hover .fk-text {
    fill: var(--color-primary);
    text-decoration: underline;
}

/* Social Media nur mit Zustimmung (Kategorie «social»): ohne
   Klasse .cc-social-ok am <html> liegt eine Sperrfläche über den
   Social-Ästen -- gleiche Optik wie .social-blocked-overlay im
   Footer (dunkler Scrim, Symbol, Satz mit Link). Lage und Grösse
   setzt js/08-familie-baum.js. Websites bleiben frei. */
.familie-baum { position: relative; }
.familie-social-sperre {
    display: none;
    position: absolute;
    z-index: 5;
    text-align: center;
    pointer-events: none;                    /* nur Bänder und Satz fangen Klicks */
}
/* Scrim je Website-Gruppe (vom Skript gesetzt); dazwischen bleiben
   Künstler:innen und Websites frei */
.familie-social-band {
    position: absolute;
    left: 0;
    right: 0;
    border-radius: var(--border-radius-md);
    background: rgba(0,0,0,.35);
    pointer-events: auto;
}
html:not(.cc-social-ok) .familie-social-sperre[data-bereit] { display: block; }
.familie-social-sperre-inhalt {
    position: sticky;
    top: 45vh;                               /* Satz bleibt beim Scrollen im Bild */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;                       /* eigener Scrim: Satz liegt über Beschriftungen */
    margin: 0 4px;
    z-index: 1;
    pointer-events: auto;
    border-radius: var(--border-radius-md);
    background: rgba(0,0,0,.7);
}
.familie-social-sperre .no-icon {
    width: 40px;
    height: 40px;
    color: #fff;
    filter: drop-shadow(var(--shadow-media-text));
}
.familie-social-sperre span,
.familie-social-sperre span a {
    color: #fff;
    text-shadow: var(--shadow-media-text);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-small);
}
.familie-social-sperre span a { text-decoration: underline; }

/* Fliessen: beim Laden zeichnen sich die Äste Ebene um Ebene vom
   Ursprung her, die Beschriftung erscheint danach */
.fl.neu {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: familie-fliessen 0.6s ease-out var(--verz, 0s) forwards;
}
.fk.neu {
    animation: familie-auftauchen 0.4s ease-out var(--verz, 0s) both;
}
@keyframes familie-fliessen { to { stroke-dashoffset: 0; } }
@keyframes familie-auftauchen { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .fl.neu, .fk.neu { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}


/* Angebote (angebote.html) -- 26.10., Textbreite 31.10.
   Vier Angebote, ab 1200px zwei nebeneinander (darunter ist die
   Inhaltsspalte zu schmal für zwei). Der Text ist so breit wie das
   Band darüber -- darum ohne Rahmen und ohne seitliche Polsterung;
   getrennt wird nur durch Abstand (Spalten 30px, damit zwei Text-
   spalten nicht aneinanderstossen; Zeilen 50px).
   Bild über .artist-img (ganz, im eigenen Format -- die Bänder sind
   900 x 261; steht schon in critical.css). «Anfrage stellen» sitzt
   per margin-top: auto unten, damit zwei Angebote einer Zeile gleich
   enden. Steht über der Falz, darum gleich auch in
   partials/critical.css -- nur Variablen, die es dort gibt. */
.angebote-liste {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--margin-bottom-max) var(--margin-top-verybig);
    margin-top: var(--margin-top-verybig);
}
@media (min-width: 1200px) {
    .angebote-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.angebot {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.angebot-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-top: var(--margin-top-base);
}
.angebot-titel {
    margin-bottom: 4px;
}
.angebot-art {
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
    margin-bottom: var(--margin-bottom-small);
}
.angebot-link {
    margin-top: auto;
    padding-top: var(--margin-top-small);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
}


/* ============================================================
   HINWEIS-SEITEN (datenschutz.html) -- 01.11.2026
   Raster wie die Agentur-Seiten (.page-layout--agentur), Abschnitte
   mit .freunde-abschnitt / .freunde-liste. Neu nur:
   - Links im Text unterstrichen (uBlock Origin, Ghostery, Datenschutz-
     Links der Anbieter): sonst sind sie im Fliesstext nicht zu erkennen,
     weil 01-reset a { text-decoration: none } setzt.
   - Knopf «Privatsphäre anpassen» mit Symbol wie im Footer.
   In critical.css nur .hinweis-bild (Abstand über der Falz);
   Unterstreichung und Symbol (1em, mit width/height-Attribut im
   Markup) verschieben nichts.
   ============================================================ */
.hinweis-text .post-article a,
.hinweis-text .freunde-liste a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hinweis-text .post-article a:hover,
.hinweis-text .post-article a:focus-visible,
.hinweis-text .freunde-liste a:hover,
.hinweis-text .freunde-liste a:focus-visible {
    color: var(--color-link-hover);
}

/* Bild über dem Titel: Abstand wie Band -> Titel auf angebote.html
   (.angebot-text padding-top). Steht über der Falz, darum gleich
   auch in partials/critical.css. */
.hinweis-bild {
    margin: 0 0 var(--margin-top-base);
}
/* Blass wie auf der alten Seite (dort Klasse .fade50): das Bild ist
   Stimmung, kein Inhalt, und soll dem Titel nicht die Schau stehlen. */
.hinweis-bild img {
    opacity: 0.5;
}

.hinweis-privacy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.hinweis-privacy-btn svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    fill: currentColor;
}

/* ============================================================
   STARTSEITE (index.html) -- 01.11.
   Raster: .page-layout--start in 04-layout.css. Inhalt aus
   partials/startseite-daten.php. Wiederverwendet: .grid-box,
   .post-heading, .post-subtitle, .post-lead, .post-article,
   .show-img, .figcap, .btn-ghost-invert, .spotlight-*,
   .agenda-block. Steht über der Falz, darum gleich auch in
   partials/critical.css.
   ============================================================ */

/* Einführung: kein Kasten, steht frei wie auf der alten Seite.
   Rahmen nur unsichtbar (nicht weg), damit der Text bündig mit
   dem Text der Berichte darunter steht. Zwei Klassen (0,2,0)
   schlagen .grid-box. */
.start-intro.grid-box {
    background: transparent;
    border-color: transparent;
    height: auto;
}
.start-intro .post-lead {
    margin-bottom: 0;
}

/* Berichte: Absätze und Bild brauchen Abstand -- .post-article
   hat von sich aus keinen (Reset). */
.start-bericht figure {
    margin-bottom: var(--margin-bottom-base);
}
.start-bericht .post-article {
    margin-bottom: var(--margin-bottom-small);
}

/* Interview: Frage in Hermes, Antwort in Sabon, Name fett. */
.start-interview {
    margin: var(--margin-top-small) 0 var(--margin-bottom-base);
}
.start-interview-frage {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-small);
}
/* Aussage (06.11.): Antwort ohne Frage, Statement oder Kommentar.
   Mit Namen wie eine Antwort; ohne Namen steht der Text kursiv
   (<em> im Markup). */
.start-interview-antwort,
.start-interview-aussage {
    font-family: var(--font-article-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: var(--margin-bottom-small);
}
.start-interview-antwort strong,
.start-interview-aussage strong {
    font-family: var(--font-serif-bold);
    font-weight: normal;
}

/* Auf dem Handy bekommt .agenda-block einen eigenen Kasten
   (ARTIST-SEITE: MOBILE — BOX-OPTIK). Auf der Startseite steht er
   schon im Kasten der rechten Spalte -- sonst doppelter Rahmen. */
@media (max-width: 991px) {
    .start-side .agenda-block {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
    }
}

/* ============================================================
   TERMINSEITEN (termine/termin.php) -- 09.11.2026
   Eine Seite pro Vorstellung. Raster wie die Agentur-Seiten
   (.page-layout--agentur: Navi | Termin | Agenda der Künstler:in).
   Wiederverwendet: .grid-box, .post-heading, .post-subtitle,
   .post-article, .artist-img, .special-show, .event-info,
   .ticket-info, .btn-orange (Ticketknopf wie in der Agenda),
   .btn-ghost-invert, .agenda-block. Neu nur, was die Seite selbst
   ordnet. Bild, Vermerk und Fakten stehen über der Falz, darum
   gleich auch in partials/critical.css.
   ============================================================ */

/* Bild: ganz sichtbar, nie beschnitten (auch Hochformat/Plakat),
   aber nicht höher als gut ein Bildschirmdrittel. */
.termin-bild {
    margin: 0 0 var(--margin-bottom-base);
}
.termin-bild img {
    width: auto;
    max-width: 100%;
    max-height: 32rem;
}
.termin--vorbei .termin-bild img {
    opacity: 0.6;
}

/* Premiere / Vorpremiere / Derniere gross über dem Titel, dazu
   Verfügbarkeit (ausverkauft …) und Festival in einer Zeile. */
.termin-vermerk {
    font-family: var(--font-event);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0 0 var(--margin-bottom-small);
}
.termin-vermerk .special-show {
    font-size: var(--font-size-big);
}
.termin-festival {
    font-family: var(--font-sans-semibold);
    font-size: var(--font-size-base);
    color: var(--color-primary);
}
.termin-festival a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* «Hat stattgefunden» / «abgesagt» */
.termin-hinweis {
    margin: var(--margin-top-small) 0 var(--margin-bottom-base);
    padding: 10px 14px;
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface-form);
    font-family: var(--font-sans-regular);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

/* Datum und Ort: Beschriftung klein links, Angabe rechts */
.termin-fakten {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 20px;
    margin: var(--margin-top-base) 0 var(--margin-bottom-base);
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}
.termin-fakten dt {
    font-family: var(--font-sans-regular);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    padding-top: 3px;
}
.termin-fakten dd {
    margin: 0;
}

.termin-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.termin-link:hover,
.termin-link:focus-visible {
    color: var(--color-link-hover);
}

/* Kurzbeschrieb aus dem Spielplan-Tool */
.termin-text {
    margin-bottom: var(--margin-bottom-base);
}
.termin-text .post-article + .post-article {
    margin-top: var(--margin-top-small);
}

/* Tickets, Hinweise, Veranstalterseite */
.termin-aktionen {
    margin: var(--margin-top-base) 0;
}
.termin-veranstalter {
    margin: var(--margin-top-small) 0 0;
    font-family: var(--font-sans-thin);
    font-size: var(--font-size-base);
}

/* «Mehr über …» -- bei gemeinsamen Auftritten mehrere Knöpfe */
.termin-mehr {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--margin-top-verybig);
}
.termin-mehr .btn-ghost-invert {
    margin: 0;
    white-space: normal;
}

/* Terminseite als Dialog (js/08-termin-dialog.js, 09.11.).
   Rahmen, Kopf und Kreuz von .prod-dialog; hier nur, was im Dialog
   anders ist: Bild etwas niedriger, Knöpfe unten nebeneinander.
   Nicht in critical.css -- der Dialog entsteht erst auf Klick. */
.termin-dialog .termin-bild img {
    max-height: 22rem;
}
.termin-dialog .termin-mehr {
    margin-top: var(--margin-top-base);
}
.termin-dialog .termin-dialog-knoepfe {
    flex-wrap: wrap;
    gap: 10px;
}
.termin-dialog .termin-dialog-knoepfe .btn-white {
    margin: 0;
}

/* Terminseiten, Nachtrag 10.11.: «Details →» in der Agenda, Showbild
   im breiten Kalender, Links unten im Termin, «Auf Einladung». */
.event-details {
    margin: 4px 0 0;
}
.eventframe a.event-details-link,
.termin-pfeil {
    color: var(--color-primary);
    font-family: var(--font-event);
    font-size: var(--font-size-base);
    text-decoration: underline;
    text-underline-offset: 2px;
    hyphens: none;
    -webkit-hyphens: none;
}
.eventframe a.event-details-link:hover,
.eventframe a.event-details-link:focus-visible,
.termin-pfeil:hover,
.termin-pfeil:focus-visible {
    color: var(--color-link-hover);
}
button.termin-pfeil {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
button.termin-pfeil[hidden] {
    display: none;
}

/* «Auf Einladung» ist ein Hinweis, keine Warnung */
.event-info.event-einladung {
    color: var(--color-text-muted);
}

/* Showbild: nur in der breiten Liste (Veranstaltungskalender, Desktop).
   In der schmalen Agenda ausgeblendet -- loading="lazy" lädt es dann
   gar nicht. */
.eventframe .event-bild {
    display: none;
}
@container agenda (min-width: 720px) {
    .eventframe.mit-bild {
        grid-template-columns: 70px minmax(0, 1fr) 200px;
    }
    .eventframe .event-bild {
        display: block;
        grid-column: 3;
        align-self: start;
    }
    .eventframe .event-bild img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: var(--border-radius-sm);
        transition: opacity var(--transition-fast);
    }
    .eventframe .event-bild:hover img {
        opacity: 0.85;
    }
}

/* Unten im Termin: Künstlerseite, Teilen, In meinen Kalender */
.termin-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: var(--margin-top-verybig) 0 0;
    padding: 0;
    list-style: none;
}
.termin-veranstalter .termin-pfeil {
    font-family: var(--font-sans-thin);
}