/* ==========================================================================
   WALDARENA.AT — Site-Stylesheet (vormals Code Injection)
   Wird von default.hbs NACH built/screen.css eingebunden — die Reihenfolge
   entspricht der früheren Injection-Reihenfolge, die Kaskade bleibt gleich.

   Inhalt:
     1  Design-Token & Globales
     2  Site-Header (inkl. aktiver Menüpunkt)
     3  Artikel & Inhalt
     4  Zweispalten-Layout (.row/.col-2)
     5  Tabellen (.table-custom)
     6  Kontakt-Container
     7  Eintritts-Leiste (.claim-bar)
     8  Einbettungen (YouTube)
     9  Responsive (Burger ≤1410px, Spalten ≤1200px, Handy ≤768px)
    10  Programm: große Konzertkarte (+ Saison-Ende-Karte)
    11  Programm: Zeilen (<details>) + Monats-Abschnitte
    12  Programm: CSS-only-Mechanik (Kürzung, "Mehr lesen", [hidden])
    13  Startseite (.home-*)
    14  Vergangene Termine (AA-Farben statt opacity)
    15  Fußzeile
    16  Druck
    17  Kleinigkeiten
   ========================================================================== */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-regular.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-600.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-700.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-800.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/space-mono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/space-mono-700.woff2') format('woff2');}

/* ==========================================================================
   1. DESIGN-TOKEN & GLOBALES
   --color-darkmode muss so heißen: Casper liest genau diese Variable.
   ========================================================================== */
:root {
    color-scheme: dark;
    --color-darkmode: #14180f;                   /* Seitengrund               */
    --panel: #1E2416;                            /* Kopf-/Ankündigungsleiste  */
    --brass: #C9A24B;                            /* Akzent Messing            */
    --cream: #EDE7D3;                            /* Fließtext Creme           */
    --muted: #9A9C86;                            /* zurückgenommener Text     */
    --muted-2: #B9BBA6;                          /* eine Stufe heller         */
    --dim: #8F9280;                              /* abgesagt / Instrumente    */
    --warn: #E8A79C;                             /* Abgesagt-Pille, Text      */
    --warn-bg: rgba(217, 112, 95, .18);          /* Abgesagt-Pille, Grund     */
    --line: rgba(237, 231, 211, .10);            /* Hairline auf Karten       */
    --line-brass: rgba(201, 162, 75, .13);       /* Hairline unterm Header    */
    --line-brass-2: rgba(201, 162, 75, .28);     /* Monats-Trennlinien        */
    --underline: rgba(201, 162, 75, .45);        /* Link-Unterstriche (matt)  */
    --card-bg: rgba(237, 231, 211, .035);        /* Kartengrund               */
    --sans: 'Bricolage Grotesque', sans-serif;
    --mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }

.inner { max-width: 1440px; }

/* Tastatur-Fokus in Messing */
:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* Skip-Link (default.hbs) — sichtbar nur bei Tab-Fokus */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 5000000;
    padding: 8px 16px;
    background: var(--panel);
    color: var(--cream);
}
.skip-link:focus { left: 8px; top: 8px; }

/* Nur für Screenreader (z. B. für eine spätere unsichtbare h1) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

img { border-radius: 6px; }
html.dark-mode .site-header-cover { border-radius: 0; }
html.dark-mode img { opacity: 1; }   /* Caspers Dark-Mode-Dimmung aus */

/* ==========================================================================
   2. SITE-HEADER
   ========================================================================== */
.gh-head {
    height: 82px;
}

.gh-head-inner { margin-top: 8px; }
.gh-head-brand { height: 21px; }
.gh-head-actions { gap: 1em; }
.gh-head-menu { margin-top: 2px; }

.gh-head-menu .nav,
.gh-social-link {
    font-size: 2.3rem;
}

/* Aktiver Menüpunkt (Ghost setzt nav-current automatisch) */
.gh-head-menu .nav li.nav-current > a {
    color: var(--brass);
}

.has-cover .gh-head-logo { font-size: 5rem; }
.gh-head-logo.no-image { margin-top: -18px; }

.has-cover .gh-head-button { display: none; }

/* Subpage-Header: Nachtgrün + Messing-Hairline */
.has-cover .site-header-content.left-aligned,
.has-cover:not(.home-template) .gh-head {
    background-color: var(--panel);
    border-bottom: 1px solid var(--line-brass);
}

.home-template.has-cover .gh-head {
    color: var(--cream);
}

.social-media-icon svg {
    width: 1.8em;
    fill: var(--cream);
}

/* Social-Icons: Trefffläche auf ~30px vergrößern (WCAG 2.5.8),
   ohne das Layout zu verschieben */
.gh-social-link {
    display: inline-flex;
}

@media (min-width: 768px) {
    .has-cover .site-header-content { min-height: 480px; }
}

/* ==========================================================================
   3. ARTIKEL & INHALT
   ========================================================================== */
.page-template .gh-content:only-child > :first-child:not(.kg-width-full) { margin-top: 0; }
.page-template .gh-content > :last-child:not(.kg-width-full) { margin-bottom: 0; }

.article {
    padding: max(5vmin, 40px) 0 max(5vmin, 64px);
    overflow-wrap: break-word;
}

.gh-canvas .article-image { margin: max(3vmin, 40px) 0 0; }
.gh-canvas .aufnahmen { margin: max(3.2vmin, 20px) 0 0; }

.gh-content > blockquote:not([class]),
.gh-content > dl,
.gh-content > ol,
.gh-content > p,
.gh-content > ul {
    font-size: 1.9rem;
}

.gh-content > blockquote,
.gh-content > hr {
    margin-top: 0;
}

/* Fließtext-Links: Creme, Unterstrich matt-Messing, voll erst beim Hover.
   !important kontert Caspers Link-Farben in .gh-content. */
.gh-content a {
    color: var(--cream) !important;
    text-decoration: underline;
    text-decoration-color: rgba(201, 162, 75, .55);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.gh-content a:hover {
    color: var(--brass) !important;
    text-decoration-color: var(--brass);
}

/* Titel-Links (aufnahmen-wide-post.hbs) — ohne Unterstrich */
.article-header a {
    color: inherit;
    text-decoration: none;
}
.article-header a:hover .article-title { color: var(--brass); }

/* Caspers Verlaufs-Hintergrund auf Randzellen von Tabellen entfernen */
.gh-content table td:first-child,
.gh-content table td:last-child,
html.dark-mode .gh-content table td:first-child,
html.dark-mode .gh-content table td:last-child {
    background-image: none !important;
}

/* h3 = Mono-Overline in Messing, sitewide Sektionstitel-Stimme */
h3 {
    font-family: var(--mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brass) !important;
    font-size: 1.9rem !important;
    text-align: left;
}

h2.article-title { margin: 0; }

.article-title { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); }                 /* Karten     */
.post-template .article-title { font-size: clamp(3.2rem, 2rem + 3.4vw, 5.2rem); } /* Einzelpost */

/* Titel einzeilig mit Ellipse (Aufnahmen-Kacheln) */
html.dark-mode .nolinebreak {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/* Dark-Mode-Textfarben gesammelt: Creme */
html.dark-mode body,
html.dark-mode .article-title,
.has-cover .gh-head-logo,
.home-template.has-cover .gh-head,
.gh-social-link,
html.dark-mode .site-header-content,
.has-cover .site-description,
html.dark-mode .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button),
html.dark-mode .gh-content em,
html.dark-mode .gh-content strong {
    color: var(--cream);
}

/* ==========================================================================
   4. ZWEISPALTEN-LAYOUT (.row/.col-2 — ueberuns, kontakt, location,
      anfahrt, aufnahmen)
   Caspers gh-canvas-Zentrierraster ist für Halbspalten ungeeignet →
   Raster aus, Blockfluss. Mittellücke strukturell: ungerade Spalten
   halbe Lücke rechts, gerade halbe Lücke links.
   ========================================================================== */
.col-2 {
    float: left;
    width: 50%;
    padding: 10px;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

.row .col-2 .gh-content.gh-canvas,
.row .col-2 .article-header.gh-canvas {
    display: block;                    /* gh-canvas-Grid deaktiviert */
}
.row > .col-2:nth-child(odd)  .gh-canvas { padding-right: max(4vmin, 10px); }
.row > .col-2:nth-child(even) .gh-canvas { padding-left:  max(4vmin, 10px); }

/* /aufnahmen/: Kacheln reservieren ihre Höhe vorab (CLS, Lazy-Loading) */
.article-image.aufnahmen img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   5. TABELLEN (.table-custom, in Beitragsinhalten)
   ========================================================================== */
.table-custom {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.th-custom,
.td-custom {
    border: 0 !important;
    font-size: 1.9rem;
    padding: 15px !important;
    height: 95px;
    line-height: 3rem;
    vertical-align: middle;
}

.th-custom-no-wrap,
.td-custom-no-wrap { white-space: nowrap; }

.th-custom-wrap,
.td-custom-wrap {
    overflow-wrap: break-word !important;
    white-space: normal !important;
    padding-left: 0 !important;
}

.table-custom tr:nth-child(even) { background-color: rgba(237, 231, 211, .04); }
.table-custom td:nth-child(1) { font-weight: bold; }

/* ==========================================================================
   6. KONTAKT-CONTAINER (Beitragsinhalt der Kontaktseite)
   ========================================================================== */
.container_kontakt {
    display: flex;
    justify-content: space-between;
    padding-left: 15%;
    padding-right: 15%;
}
.container_kontakt h3 { margin-top: unset; }

/* Textgrößen unabhängig von Caspers .gh-content > p halten */
.container_kontakt p,
.container_kontakt address {
    font-size: 1.9rem;
    line-height: 1.6;
}
.container_kontakt p { margin-top: 2.4rem; }
.container_kontakt address {
    font-style: normal;
    margin-bottom: 4rem;
}

/* Sponsorenlogos: feste Anzeigehöhe, kein Springen beim Laden */
.kontakt-logos img {
    height: clamp(52px, 7vw, 84px);
    width: auto;
    object-fit: contain;
}
.kontakt-danke {
    text-align: center;
    font-size: clamp(2rem, 1.4rem + 1.5vw, 3rem);
}

/* ==========================================================================
   7. EINTRITTS-LEISTE (.claim-bar)
   Solide Leiste unter dem Cover, gleiche Sprache wie der Subpage-Header.
   ========================================================================== */
.claim-bar {
    background: var(--panel);
    border-top: 1px solid rgba(201, 162, 75, .22);
    border-bottom: 1px solid var(--line-brass);
}

.claim-bar-text {
    margin: 0;
    padding: 16px 0 15px;
    font-family: var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.claim-main { color: var(--brass); font-weight: 700; font-size: 1.8rem; }
.claim-sep  { color: rgba(237, 231, 211, .35); margin: 0 10px; }
.claim-sub  { color: var(--muted); }

@media (max-width: 768px) {
    .claim-bar-text { font-size: 1.4rem; letter-spacing: .1em; padding: 13px 0 12px; }
    .claim-main { font-size: 1.5rem; }
}
@media (max-width: 420px) {
    /* Wird es eng: Untertitel weglassen statt umbrechen */
    .claim-sep, .claim-sub { display: none; }
}

/* ==========================================================================
   8. EINBETTUNGEN — YouTube per aspect-ratio
   ========================================================================== */
.kg-embed-card { position: relative; }

.kg-embed-card iframe,
.kg-embed-card object,
.kg-embed-card embed {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* --- Header-Kollaps + Burger-Menü (≤1241px) ------------------------------ */
@media (max-width: 1241px) {
    .gh-burger {
        display: inline-block;
    }


    #gh-head { overflow: hidden; }

    #gh-head .gh-head-inner {
        height: 100%;
        grid-template-columns: 1fr;
    }

    #gh-head .gh-head-brand {
        position: relative;
        z-index: 10;
        grid-column-start: auto;
        max-width: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        user-select: none;
    }

    .no-logo #gh-head .gh-head-brand { justify-content: flex-end; }

    /* Zugeklapptes Menü NICHT mit display:none verstecken: dropdown.js
       misst nav-/menu-Breiten und würde bei 0/0 alle <li> entfernen.
       Stattdessen messbar lassen (fixed + visibility:hidden) und mit
       width:4000px die Overflow-Schleife stilllegen. */
    #gh-head .gh-head-menu {
        position: fixed;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        width: 4000px;
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 0 10vh 0;
        font-weight: 300;
        font-size: 3.6rem;
        line-height: 1.1em;
    }

    #gh-head .gh-head-menu .nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        font-weight: 500;
    }

    #gh-head .nav a { font-size: 3.5rem; }

    /* Actions: zugeklappt versteckt, Layout greift im offenen Overlay */
    #gh-head .gh-head-actions {
        display: none;
        flex-direction: column-reverse;
        justify-content: center;
        padding: 20px 0 32px;
        text-align: left;
    }

    /* dropdown.js blendet nav-li bis "is-dropdown-loaded" aus —
       im Overlay immer sichtbar erzwingen */
    .gh-head-open #gh-head .gh-head-menu .nav > li {
        opacity: 1 !important;
        transform: none;
    }

    .gh-head-open {
        overflow: hidden;
        height: 100vh;
        height: 100dvh;   /* mobile Browserleiste nicht übers Menü */
    }

    .gh-head-open #gh-head {
        position: fixed;
        inset: 0;
        z-index: 3999999;
        height: 100%;     /* feste .gh-head-Höhe gewänne sonst gegen inset */
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    /* Overlay-Layout wie Caspers ≤767px-Block: eine Spalte, drei Zeilen
       (Logo-Zeile / Menü / Actions) */
    .gh-head-open #gh-head .gh-head-inner {
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
        gap: 48px;
        height: 100%;
        margin-top: -4px;
    }

    .gh-head-open #gh-head .gh-head-brand {
        display: grid;
        grid-template-columns: 1fr auto;   /* Logo links, X rechts */
        grid-column-start: 1;
        align-items: center;
        height: 88px;                      /* wie geschlossen → Logo springt nicht */
    }

    .gh-head-open #gh-head .gh-head-menu {
        display: flex;
        justify-content: center;
        position: static;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        width: auto;
        margin: 0;
    }

    .gh-head-open #gh-head .nav {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        line-height: 1.4;
    }

    .gh-head-open #gh-head .gh-head-actions {
        display: flex;
        justify-content: center;
        padding-bottom: max(4vmin, 28px);
    }

    .gh-head-open.has-cover #gh-head,
    .gh-head-open.has-cover #gh-head .gh-head-actions {
        background-color: var(--panel);
    }

    /* Burger: drei Balken; der mittlere ist ein Hintergrund-Streifen */
    .gh-burger::before,
    .gh-burger::after,
    .has-cover .gh-burger::before,
    .has-cover .gh-burger::after {
        height: 2px;
        border-radius: 2px;
        background-color: var(--cream);
    }
    .gh-burger::before { top: 7px; }
    .gh-burger::after  { bottom: 7px; }

    .gh-burger {
        background-image: linear-gradient(var(--cream), var(--cream));
        background-repeat: no-repeat;
        background-size: 24px 2px;
        background-position: 3px center;
    }

    /* Offen: mittleren Balken verbergen, X zentrieren */
    .gh-head-open .gh-burger { background-image: none; }
    .gh-head-open .gh-burger::before { top: 14px; }
    .gh-head-open .gh-burger::after  { bottom: 14px; }
}

/* --- Zwei Spalten → eine Spalte (≤1200px) -------------------------------- */
@media (max-width: 1200px) {
    .col-2 { width: 100%; }

    /* Gestapelt keine Mittellücke; Randabstand liefert .outer */
    .row > .col-2:nth-child(odd)  .gh-canvas { padding-right: 0; }
    .row > .col-2:nth-child(even) .gh-canvas { padding-left: 0; }
}

/* --- Handy (≤768px) ------------------------------------------------------- */
@media (max-width: 768px) {
    .has-cover .gh-head-logo { font-size: 4.5rem !important; }

    .th-custom,
    .td-custom {
        font-size: 1.5rem !important;
        padding: 10px 8px !important;
        height: 60px;
        line-height: 2rem;
    }

    .container_kontakt {
        flex-direction: column;
        padding-left: unset;
        padding-right: unset;
    }

    .has-cover .site-header-content { min-height: 200px; }
}

/* ==========================================================================
   10. PROGRAMM — GROSSE KONZERTKARTE
   Karte: Datumsspalte links (Label/Uhrzeit, Wochentag/Tag/Monat, Ort),
   Inhalt Mitte ([Pille] → Genre → Titel → Untertitel → Besetzung →
   Bandinfo → Hinweis → Aktionen → weitere Punkte), Bild rechts.
   Mobil gestapelt: Datumszeile → Bild → Inhalt.
   ========================================================================== */

.next-concerts {
    font-family: var(--mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brass);
    font-size: 1.9rem;
    text-align: left;
    margin-top: 100px;
}
@media (max-width: 768px) { .next-concerts { margin-top: 50px; } }

#np-programm-out { margin: 14px 0 76px; }

.np-tonight {
    position: relative;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: start;
    gap: clamp(12px, 1.6vw, 18px) clamp(20px, 3vw, 38px);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: clamp(20px, 3vw, 32px) clamp(22px, 3.5vw, 38px);
    margin-bottom: 36px;
    background: var(--card-bg);
}
/* Mit Bild: dritte Spalte rechts */
.np-tonight--img {
    grid-template-columns: 140px minmax(0, 1fr) clamp(240px, 30vw, 480px);
}

/* Saison-Ende: gleiche Kartensprache wie die Konzertkarte, damit der
   leerste Zustand der Seite nicht als nackter Satz dasteht. */
.np-season-over {
    margin: 8px 0 44px;
    padding: clamp(26px, 4vw, 44px) clamp(22px, 3.5vw, 38px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-bg);
    font-family: var(--sans);
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--muted-2);
    text-align: center;
}

/* --- Datumsspalte -------------------------------------------------------- */
.np-tonight-date {
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    align-self: stretch; justify-content: flex-start;
    padding-right: clamp(18px, 2.4vw, 28px);
    border-right: 1px solid var(--line);
    min-width: 0;
}
/* Label + Uhrzeit mit auslaufender Messing-Hairline darunter */
.np-td-lab {
    width: 100%; display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 12px; margin-bottom: 14px;
    background: linear-gradient(90deg, rgba(201,162,75,.5), rgba(201,162,75,0))
                left bottom / 100% 1px no-repeat;
}
.np-td-lab-t {
    font-family: var(--mono); font-size: 1.4rem; letter-spacing: .24em;
    font-weight: 700; text-transform: uppercase; color: var(--brass); line-height: 1.2;
}
.np-td-time {
    font-family: var(--mono); font-size: 1.4rem; letter-spacing: .12em;
    font-weight: 700; color: var(--brass); line-height: 1.2;
}
.np-td-wd {
    font-family: var(--mono); font-size: 1.3rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--muted);
}
.np-td-day {
    font-family: var(--sans); font-weight: 800;
    font-size: clamp(3.6rem, 5vw, 4.8rem); line-height: 1; color: var(--brass);
    margin: 2px 0;
}
.np-td-mo {
    font-family: var(--mono); font-size: 1.25rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--cream);
}
/* Trennstrich + Ort (Label/Wert-Paar, dichtes Leading) */
.np-td-rule { width: 28px; height: 1px; background: rgba(201,162,75,.4); margin: 18px 0; }
.np-td-pair { display: flex; flex-direction: column; gap: 3px; }
.np-td-k {
    font-family: var(--mono); font-size: 1.05rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); line-height: 1.1;
}
.np-td-venue {
    font-family: var(--mono); font-size: 1.3rem; color: var(--cream);
    line-height: 1.35;
    hyphens: auto; overflow-wrap: anywhere;   /* lange Ortsnamen brechen sauber */
}

/* --- Inhalt --------------------------------------------------------------- */
.np-tonight-main { min-width: 0; padding-top: 2px; }

/* Genre als Overline über dem Titel */
.np-genre {
    font-family: var(--mono); font-size: 1.35rem; letter-spacing: .26em;
    text-transform: uppercase; color: var(--brass); margin: 0 0 8px;
}

.np-tonight-head {
    font-family: var(--sans); font-weight: 800; color: var(--cream);
    line-height: 1.05; letter-spacing: -.02em;
    font-size: clamp(2.4rem, 4vw, 3.8rem); margin: 2px 0 0;
}
.np-tonight-sub {
    color: var(--cream); font-size: 1.8rem; font-weight: 600; line-height: 1.4;
    margin: 8px 0 0; max-width: 62ch;
}

/* --- Meta-Zeile: Karte = nur Status-Pille; Zeilen-Details = Genre ·
   Video · Teilen */
.np-metaline {
    display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 5px;
    font-family: var(--mono); font-size: 1.35rem; line-height: 1.5;
    color: var(--muted);
}
.np-mi { white-space: nowrap; min-width: 0; }
/* inline-block: Unterstreichung des Video-Links nicht auf den Trenner */
.np-mi + .np-mi::before {
    content: '\00B7'; margin: 0 .75em; color: rgba(237,231,211,.28);
    display: inline-block;
}
.np-mi--time { color: var(--brass); }
/* !important: kontert die eigene .gh-content-a-Regel oben — auf
   /programm/ liegt das Programm in .gh-content, auf der Startseite
   nicht. So ist der Link überall Messing. */
.np-metaline a.np-mi--link {
    color: var(--brass) !important;
    text-decoration: underline;
    text-decoration-color: var(--underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.np-metaline a.np-mi--link:hover {
    color: var(--brass) !important;
    text-decoration-color: var(--brass);
}

.np-status {
    font-family: var(--mono);
    background: var(--warn-bg); color: var(--warn);
    padding: 4px 11px; border-radius: 100px;
    letter-spacing: .08em; text-transform: uppercase; font-size: 1.2rem;
    white-space: nowrap;
}

/* Kleines Mono-Label ("HINWEIS") vor Fließtext-Zeilen */
.np-lab-k {
    font-family: var(--mono); font-size: 1.05rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--brass); margin-right: .9em;
}

/* --- Besetzung: Namen betont, Instrumente zurückgenommen ------------------ */
.np-cast {
    font-family: var(--sans);
    color: var(--muted); font-size: 1.4rem; line-height: 1.6; max-width: 70ch;
}
.np-cast-n { color: #CFCBB8; font-weight: 600; }
.np-cast-i { color: var(--dim); }

/* Hinweis (z. B. Schlechtwetter-Ausweichort) */
.np-note {
    font-family: var(--sans);
    color: var(--muted-2); font-size: 1.45rem; line-height: 1.5; max-width: 70ch;
}

/* Vertikaler Rhythmus in der Karte */
.np-tonight .np-metaline { margin-top: 14px; }
.np-tonight .np-cast     { margin-top: 16px; }
.np-tonight .np-note     { margin-top: 14px; }

/* Zeit/Ort in den Zeilenköpfen */
.np-fact {
    font-family: var(--mono); font-size: 1.35rem;
    color: var(--muted); white-space: nowrap;
}
.np-fact-time { color: var(--brass); }

/* --- Bandinfo (Kürzung entscheidet der Editor, s. Abschnitt 12) ----------- */
.np-info {
    font-family: var(--sans);
    margin-top: 16px; color: var(--muted-2); font-size: 1.6rem;
    line-height: 1.6; max-width: 70ch;
}
.np-info p { margin: 0 0 .8em; }
.np-info p:last-child { margin-bottom: 0; }

/* "Mehr lesen" — <label> der CSS-only-Checkbox (Abschnitt 12) */
.np-more-btn {
    display: inline-block; padding: 0 0 2px;
    background: none; border: 0; border-bottom: 1px solid var(--underline);
    font-family: var(--mono); font-size: 1.3rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--brass); cursor: pointer;
}
.np-more-btn:hover { border-bottom-color: var(--brass); }

/* --- Aktionszeile: "Mehr lesen" + "Video ↗" + "Teilen" -------------------- */
.np-actions {
    margin-top: 16px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px;
}
a.np-action-link {
    display: inline-block; padding-bottom: 2px;
    border-bottom: 1px solid var(--underline);
    font-family: var(--mono); font-size: 1.3rem; letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass) !important;         /* kontert .gh-content a */
    text-decoration: none !important;
}
a.np-action-link:hover { border-bottom-color: var(--brass); color: var(--brass) !important; }

/* Weiterer Programmpunkt am selben Abend — eigene volle Zeile im
   Kartenraster mit denselben Spalten wie der Hauptact (Datumsspalte
   mit "↳ DANACH" + Uhrzeit + Ort · Inhalt · Bild rechts). Die
   Trennlinie läuft über die ganze Kartenbreite; Abstand darüber und
   darunter symmetrisch. Moderne Browser erben die Spalten exakt per
   subgrid, der Fallback wiederholt das Kartenraster.                  */
.np-second {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: start;
    gap: clamp(12px, 1.6vw, 18px) clamp(20px, 3vw, 38px);
    border-top: 1px solid var(--line);
    margin-top: clamp(10px, 1.6vw, 16px);
    padding-top: clamp(20px, 3vw, 32px);
}
.np-tonight--img .np-second {
    grid-template-columns: 140px minmax(0, 1fr) clamp(240px, 30vw, 480px);
}
@supports (grid-template-columns: subgrid) {
    .np-second,
    .np-tonight--img .np-second { grid-template-columns: subgrid; }
}
.np-second--cancelled .np-tonight-head {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    color: var(--muted-2);
}
.np-second--cancelled .np-td-time { color: var(--dim); }

/* Abgesagte Karte — auf den Hauptact begrenzt (> …), damit ein
   abgesagter Hauptact nicht den zweiten Act mit durchstreicht        */
.np-tonight--cancelled > .np-tonight-main > .np-tonight-head {
    text-decoration: line-through; text-decoration-thickness: 3px; color: var(--muted-2);
}
.np-tonight--cancelled > .np-tonight-date .np-td-day,
.np-tonight--cancelled > .np-tonight-date .np-td-time { color: var(--dim); }

/* Veranstaltungsbild rechts */
.np-tonight-media { min-width: 0; }
.np-tonight-media img {
    display: block; width: 100%; height: auto;
    max-height: clamp(360px, 34vw, 480px);   /* begrenzt nur Hochformat */
    object-fit: contain;
    object-position: center top;
    border-radius: 6px;
}

/* --- Karte mobil: Datums-Kopf, Bild, Inhalt ------------------------------- */
@media (max-width: 768px) {
    .np-tonight,
    .np-tonight--img { grid-template-columns: 1fr; gap: 16px; align-items: start; }

    .np-second,
    .np-tonight--img .np-second {
        grid-template-columns: 1fr;
        order: 4;   /* ohne order: 0 → stünde vor der Datumsspalte */
    }

    .np-tonight-date {
        order: 1;
        flex-direction: row; flex-wrap: wrap; align-items: baseline;
        min-width: 0; align-self: auto;
        padding: 0 0 12px; border-right: 0;
        border-bottom: 1px solid var(--line);
        justify-content: flex-start;
    }
    .np-td-lab {
        flex-direction: row; align-items: baseline; gap: .9em;
        padding-bottom: 10px; margin-bottom: 12px;
    }
    .np-td-wd  { font-size: 1.2rem; }
    .np-td-day { font-size: 1.9rem; margin: 0 .45em; }
    .np-td-mo  { font-size: 1.2rem; }
    .np-td-rule { display: none; }
    .np-td-pair { flex-direction: row; align-items: baseline; gap: .6em; }
    .np-td-ort { margin-left: auto; }
    .np-td-venue { font-size: 1.3rem; }

    .np-tonight-media { order: 2; max-width: 480px; margin-inline: auto; }
    .np-tonight-main  { order: 3; }

    .np-tonight-sub { font-size: 1.6rem; }
    .np-genre { font-size: 1.2rem; }
    .np-info { font-size: 1.5rem; }
    .np-metaline { font-size: 1.25rem; }
    .np-mi + .np-mi::before { margin: 0 .6em; }
    .np-cast { font-size: 1.3rem; }
    .np-note { font-size: 1.35rem; }
    .np-tonight .np-metaline { margin-top: 12px; }
    .np-tonight .np-cast     { margin-top: 14px; }
}

/* ==========================================================================
   11. PROGRAMM — ZEILEN (<details>) & MONATS-ABSCHNITTE
   Termin mit Details:   <details class="np-row"><summary class="np-line">…
   Termin ohne Details:  <div class="np-row"><div class="np-line np-line--static">…
   /programm/ gruppiert die Zeilen zusätzlich in Monats-<details>.
   ========================================================================== */

.np-lines-label { font-family: var(--mono); font-size: 1.3rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.np-lines-rule { height: 1px; background: linear-gradient(90deg, rgba(201,162,75,.55), rgba(201,162,75,0)); margin: 8px 0 2px; }

.np-row + .np-row { border-top: 1px solid rgba(237,231,211,.09); }
.np-lines-month + .np-row,
.np-row + .np-row--second { border-top: 0; }

/* --- Zeilenkopf ----------------------------------------------------------- */
.np-line {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto 16px;
    align-items: baseline; gap: 0 20px;
    width: 100%; margin: 0; padding: 18px 6px;
    background: none; border: 0; text-align: left;
    font-family: inherit; color: inherit; font-size: inherit; line-height: inherit;
}
.np-line .np-d { font-family: var(--mono); color: var(--muted); font-size: 1.4rem; line-height: 1.2; }
.np-line .np-d b { display: block; color: var(--cream); font-size: 2.4rem; font-weight: 700; }
.np-line .np-b { min-width: 0; display: block; }
.np-line .np-nm { display: block; font-family: var(--sans); font-weight: 700; color: var(--cream); font-size: 2.1rem; line-height: 1.16; letter-spacing: -.01em; transition: color .15s ease; }
.np-line .np-rs {
    display: -webkit-box; color: var(--muted); font-size: 1.45rem; line-height: 1.45; margin-top: 5px;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.np-line .np-meta { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.np-line .np-meta .np-fact { color: var(--muted); }
.np-line .np-meta .np-fact-time { font-size: 1.5rem; color: var(--brass); }
.np-caret {
    color: var(--brass); font-size: 2.5rem; line-height: 1;
    align-self: center; justify-self: end;
    transition: transform .18s ease;
}
.np-caret--none { visibility: hidden; }

/* Abgesagte Zeile */
.np-line--cancelled .np-nm { text-decoration: line-through; color: var(--dim); }
.np-cancel-tag {
    font-family: var(--mono); font-size: 1.2rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--warn);
}

/* Zweiter Programmpunkt am selben Abend ("↳ danach") */
.np-row--second .np-line { padding-top: 2px; }
.np-row--second .np-nm { font-size: 1.8rem; }
.np-danach { font-family: var(--mono); font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }

/* Monats-Marker innerhalb der Listen */
.np-lines-month {
    font-family: var(--mono); font-size: 1.25rem; letter-spacing: .24em;
    text-transform: uppercase; color: var(--brass);
    padding: 26px 6px 4px;
    border-bottom: 1px solid var(--line-brass-2);
}
.np-lines-month:first-child { padding-top: 8px; }

/* --- <details>-Mechanik der Zeilen ---------------------------------------- */
details.np-row > summary.np-line {
    list-style: none; cursor: pointer;
    -webkit-user-select: none; user-select: none;
}
details.np-row > summary.np-line::-webkit-details-marker { display: none; }
details.np-row > summary.np-line::marker { content: ''; }
details.np-row > summary.np-line:hover .np-nm { color: var(--brass); }
details.np-row > summary.np-line:focus-visible {
    outline: 2px solid rgba(201,162,75,.6); outline-offset: 2px; border-radius: 6px;
}
details.np-row[open] { background: rgba(237,231,211,.03); border-radius: 8px; }
details.np-row[open] > summary.np-line .np-rs { display: none; }
details.np-row:not([open]) > summary.np-line .np-caret { transform: rotate(-90deg); }

/* --- Detailbereich (Einzug flieht mit der Titel-Spalte: 80+20+6px) -------- */
.np-line-detail { padding: 0 6px 22px 106px; }
.np-ld {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 20vw, 220px);
    gap: 24px; align-items: start;
}
.np-ld--noimg { grid-template-columns: minmax(0, 1fr); }
.np-ld-sub { color: var(--cream); font-size: 1.6rem; font-weight: 600; line-height: 1.4; max-width: 62ch; }
.np-ld-body > :first-child { margin-top: 0; }
.np-ld-body .np-cast { margin-top: 12px; font-size: 1.35rem; }
.np-ld-body .np-info { margin-top: 10px; font-size: 1.5rem; }
.np-ld-body .np-metaline { margin-top: 12px; }
.np-ld-body .np-note { margin-top: 10px; }
.np-ld-media img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* --- Zeilen mobil ---------------------------------------------------------- */
@media (max-width: 768px) {
    .np-line {
        grid-template-columns: 44px minmax(0, 1fr) 16px;
        grid-template-areas: "d b c" "d m c";
        row-gap: 7px; column-gap: 14px;
        padding: 16px 4px;
        align-items: start;
    }
    .np-line .np-d { grid-area: d; font-size: 1.15rem; letter-spacing: .08em; }
    .np-line .np-d b { font-size: 2rem; margin-top: 2px; }
    .np-line .np-b { grid-area: b; }
    .np-line .np-nm { font-size: 1.8rem; }
    .np-line .np-rs { -webkit-line-clamp: 1; font-size: 1.35rem; margin-top: 4px; }
    .np-line .np-meta {
        grid-area: m; flex-direction: row; flex-wrap: wrap; gap: 0;
        justify-content: flex-start; align-items: baseline; text-align: left;
    }
    .np-line .np-meta .np-fact + .np-fact::before,
    .np-line .np-meta .np-cancel-tag + .np-fact::before {
        content: '\00B7'; margin: 0 .6em; color: rgba(237,231,211,.3);
    }
    .np-line .np-meta .np-fact-time { font-size: 1.35rem; }
    .np-caret { grid-area: c; align-self: center; font-size: 3rem; }

    .np-line-detail { padding: 0 20px 20px; }
    .np-ld { grid-template-columns: 1fr; gap: 16px; }
    .np-ld-media { order: -1; max-width: 280px; }
}

/* --- /programm/: Monats-Abschnitte als <details> --------------------------- */
#np-programm-cal { margin-bottom: max(5vmin, 44px); }
.np-cal-sec + .np-cal-sec { margin-top: 4px; }
.np-cal-month {
    display: flex; align-items: baseline; gap: 14px; width: 100%;
    background: none; border: 0; border-top: 1px solid var(--line-brass-2);
    padding: 26px 4px 12px; cursor: pointer; text-align: left;
    font-family: var(--mono); font-size: 1.6rem; letter-spacing: .22em;
    text-transform: uppercase; font-weight: 700; color: var(--brass);
    -webkit-user-select: none; user-select: none;
}
.np-cal-month:hover .np-cal-lab { color: var(--cream); }
.np-cal-month:focus-visible {
    outline: 2px solid rgba(201,162,75,.6); outline-offset: 2px; border-radius: 6px;
}
.np-cal-count {
    font-size: 1.3rem; letter-spacing: .08em; text-transform: none;
    color: var(--muted); font-weight: 400;
}
.np-cal-chev {
    margin-left: auto; color: var(--brass); font-size: 1.4rem; line-height: 1;
    transition: transform .18s ease;
}
.np-cal-body { padding: 0 0 8px; }

details.np-cal-sec > summary.np-cal-month { list-style: none; }
details.np-cal-sec > summary.np-cal-month::-webkit-details-marker { display: none; }
details.np-cal-sec > summary.np-cal-month::marker { content: ''; }
details.np-cal-sec:not([open]) > summary.np-cal-month .np-cal-chev { transform: rotate(-90deg); }

/* Kalender-Download unter der Jahresüberschrift ("Programm als
   Kalender laden") — nutzt die .np-all-Optik aus Abschnitt 13. */
#np-programm-cal > .np-all { margin: 10px 0 22px; }

@media (max-width: 768px) {
    .np-cal-month { font-size: 1.3rem; padding: 20px 4px 10px; }
}

/* Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .np-caret, .np-cal-chev, .np-line .np-nm { transition: none; }
}

/* ==========================================================================
   12. PROGRAMM — CSS-ONLY-MECHANIK (Kürzung, "Mehr lesen", [hidden])
   Der Editor setzt beim Speichern np-clamp-d / np-clamp-m, wenn Bandinfo
   oder Besetzung bei 70ch überlaufen. Die unsichtbare Checkbox .np-x
   (erstes Kind in .np-tonight-main) öffnet angehakt beides.
   ========================================================================== */

/* Visually-hidden-Checkbox */
.np-x {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden;
}
/* Status-Pille = erstes sichtbares Element nach der Checkbox */
.np-tonight-main > .np-x + .np-metaline { margin-top: 0; margin-bottom: 12px; }

/* Label-Beschriftung wechselt mit dem Haken */
label.np-more-btn .np-more-close { display: none; }
.np-x:checked ~ .np-actions label.np-more-btn .np-more-open { display: none; }
.np-x:checked ~ .np-actions label.np-more-btn .np-more-close { display: inline; }

/* Fokus-Ring des Labels (Checkbox selbst ist 1×1px) */
.np-x:focus-visible ~ .np-actions label.np-more-btn {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Kürzung je Viewport, mit Ausblend-Verlauf; "Mehr lesen" erscheint nur
   im Viewport, in dem wirklich gekürzt ist */
@media (min-width: 769px) {
    .np-info.np-clamp-d {
        max-height: 6.4em; overflow: hidden;
        -webkit-mask-image: linear-gradient(#000 55%, transparent);
                mask-image: linear-gradient(#000 55%, transparent);
    }
    .np-cast.np-clamp-d {
        max-height: 6.4em; overflow: hidden;
        -webkit-mask-image: linear-gradient(#000 60%, transparent);
                mask-image: linear-gradient(#000 60%, transparent);
    }
    .np-more--m:not(.np-more--d) { display: none; }
}
@media (max-width: 768px) {
    .np-info.np-clamp-m {
        max-height: 12.8em; overflow: hidden;
        -webkit-mask-image: linear-gradient(#000 55%, transparent);
                mask-image: linear-gradient(#000 55%, transparent);
    }
    .np-cast.np-clamp-m {
        max-height: 6.4em; overflow: hidden;
        -webkit-mask-image: linear-gradient(#000 60%, transparent);
                mask-image: linear-gradient(#000 60%, transparent);
    }
    .np-more--d:not(.np-more--m) { display: none; }
}
/* Angehakt = Bandinfo UND Besetzung offen */
.np-x:checked ~ .np-clamp-d,
.np-x:checked ~ .np-clamp-m {
    max-height: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
}

/* [hidden] durchsetzen (Datums-Umschalter im Partial): .np-tonight setzt
   display:grid und gewänne sonst gegen den UA-Stil von [hidden] */
.np-tonight[hidden] { display: none !important; }
.np-row[hidden] { display: none; }
.np-row[hidden] + .np-row { border-top: 0; }
.np-lines-month[hidden],
.np-lines-label[hidden],
.np-lines-rule[hidden],
.np-season-over[hidden],
#np-home-nextwrap[hidden] { display: none; }

/* ==========================================================================
   13. STARTSEITE (.home-*)
   Bewusst ohne die gh-canvas/row-Maschinerie.
   ========================================================================== */

/* Große Konzertkarte */
.home-tonight { margin-top: max(4vmin, 28px); }
.home-tonight .np-tonight { margin-bottom: 0; }

/* Nächste Konzerte */
.home-next { margin-top: max(4vmin, 36px); }
.home-next h3 { margin-bottom: 12px; }

.np-all {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 1.4rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
    text-decoration: none;
    border-bottom: 1px solid var(--underline);
    padding-bottom: 2px;
}
.np-all:hover { border-bottom-color: var(--brass); color: var(--brass); }

/* Vergangene Konzerte: kompaktes Karten-Raster.
   Desktop 3 Spalten (6 Karten), Handy 1 Spalte (3 Karten — die
   restlichen sind display:none und laden dank loading="lazy" nicht). */
.home-past { margin-top: max(5vmin, 44px); padding-bottom: max(5vmin, 44px); }
.home-past-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 36px);
    margin-top: 16px;
    margin-bottom: 16px;
}
.home-past-card {
    display: block;
    color: var(--cream);
    text-decoration: none;
}
.home-past-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px;
}
.home-past-title {
    display: block;
    margin-top: 10px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-past-card:hover .home-past-title { color: var(--brass); }

@media (max-width: 768px) {
    .home-past-grid { grid-template-columns: 1fr; }
    .home-past-grid .home-past-card:nth-child(n+4) { display: none; }
}

/* Vergangene Konzerte: nowrap-Titel darf den 1fr-Track nicht aufsprengen
 *  (Grid-Items haben min-width:auto → min-content = volle Titelbreite) */
.home-past-card {
    min-width: 0;
}


/* ==========================================================================
   14. VERGANGENE TERMINE — AA-FARBEN STATT OPACITY
   Zeile tritt farblich zurück, bleibt aber lesbar (alle Töne AA gegen
   den hellsten Grund geprüft). Nur Bilder dimmen per opacity.
   ========================================================================== */
.np-row--past { opacity: 1; }

.np-row--past .np-nm { color: var(--dim); }

.np-row--past .np-d,
.np-row--past .np-rs,
.np-row--past .np-fact,
.np-row--past .np-cast,
.np-row--past .np-cast-i { color: #8A8C75; }

.np-row--past .np-d b,
.np-row--past .np-cast-n { color: var(--muted); }

.np-row--past .np-fact-time,
.np-row--past .np-danach { color: #A98B4C; }

.np-row--past .np-ld-media img,
.np-row--past .kg-image { opacity: .7; }

/* ==========================================================================
   15. FUSSZEILE
   Casper setzt #000 — hier auf die Nachtgrün-Palette geholt.
   ========================================================================== */
.site-footer {
    background: var(--color-darkmode);
    border-top: 1px solid var(--line-brass);
    padding-bottom: max(8vmin, 64px);
}
.site-footer .inner { font-size: 1.4rem; }

/* Fußzeilen-Links: Trefffläche vergrößern */
.site-footer-nav a,
.site-footer .copyright a {
    padding: 6px 0;
}

/* ==========================================================================
   16. DRUCK
   Helles Papier-Layout für /programm/. Geschlossene <details> öffnen:
   modern per ::details-content (Chromium 131+), display-Regeln als
   Fallback für ältere Engines; in Firefox drucken zugeklappte Zeilen
   ggf. nur als Kopfzeile (Datum, Titel, Zeit, Ort stehen dort).
   ========================================================================== */
@media print {
    html.dark-mode, html.dark-mode body,
    .np-tonight, details.np-row[open], .claim-bar, .site-footer {
        background: #fff !important;
        color: #000 !important;
    }
    /* h3 trägt sitewide color:var(--brass)!important — neutralisieren */
    h3,
    .np-tonight-head, .np-line .np-nm, .np-line .np-d b,
    .np-td-day, .np-td-mo, .np-td-venue, .np-info, .np-cast,
    .np-cast-n, .np-note, .np-cal-month, .np-lines-month,
    .np-td-lab-t, .np-td-time, .np-fact, .np-fact-time, .np-genre,
    .claim-main, .claim-sub {
        color: #000 !important;
    }
    .np-cast-i, .np-rs, .np-td-k { color: #555 !important; }

    /* Kürzungen aufheben */
    .np-info, .np-cast {
        max-height: none !important;
        -webkit-mask-image: none !important;
                mask-image: none !important;
    }

    /* Zugeklappte details öffnen */
    details.np-row::details-content,
    details.np-cal-sec::details-content {
        content-visibility: visible !important;
        display: block !important;
    }
    details.np-row > .np-line-detail,
    details.np-cal-sec > .np-cal-body { display: block !important; }
    details.np-row[open] > summary.np-line .np-rs { display: none; }

    .np-row--past { display: none; }

    /* Bildschirm-Beiwerk weg */
    #gh-head, .site-header-content, .site-footer-nav, .np-caret,
    .np-cal-chev, .np-actions, .np-tonight-media, .np-ld-media,
    .skip-link, .home-past { display: none !important; }

    .np-tonight, .np-row, .np-cal-sec { break-inside: avoid; }
    .np-tonight { border: 1px solid #999; }
    .np-row + .np-row { border-top: 1px solid #ccc; }

    /* Ziel-URL bei externen Links mitdrucken */
    .gh-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .8em;
        word-break: break-all;
    }
    @page { margin: 14mm; }
}

/* ==========================================================================
   17. KLEINIGKEITEN
   ========================================================================== */

/* /ueberuns/: <hr class="rule-brass"> statt Unterstrich-Ketten —
   auslaufende Messing-Haarlinie wie im Rest der Seite */
hr.rule-brass {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(201,162,75,.55), rgba(201,162,75,0));
    margin: max(4vmin, 32px) 0;
}

/* Notbehelf für alte Ghost-Galerien ohne inline flex-Basis (CLS).
   Greift nur, wo das inline-flex fehlt; beschneidet auf 3:2 —
   nach redaktionellem Neu-Einfügen der Galerien wieder entfernen. */
.kg-gallery-image:not([style*="flex"]) {
    flex: 1 1 0%;
}
.kg-gallery-image:not([style*="flex"]) img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}