:root {
    --nibelungia-gold: #a0895d;
    --nibelungia-red: #e23320;
    /* Deep red used for headline text and the "one" tile - shared so the
       two can never drift apart. */
    --nibelungia-red-dark: #7d1912;
    --nibelungia-pale: #ffffff;
    --nibelungia-gray: #838484;
    --nibelungia-stripe-width: 3px;
    --nibelungia-header-bg: #ffffff;
    /* Hoehe des Logos im Kopfbereich. Als Variable, damit Bildhoehe und der
       Abstand darunter nicht auseinanderlaufen - der ist als Anteil davon
       gerechnet. */
    --nibelungia-logo-hoehe: 40px;
    --nibelungia-footer-bg: #ffffff;
}

/* Luft unter dem Logo im Kopfbereich: 20 % seiner Hoehe.
   Bewusst als Abstand (margin) und nicht als Rand im Bild selbst - so bleibt
   das Logo unangetastet und durchsichtig, und die Luft laesst sich hier
   aendern, ohne eine Grafik neu zu erzeugen.
   Casper setzt img global auf display:block (screen.css), der untere Abstand
   wirkt also; bei einem inline-Bild taete er es nicht. */
.gh-navigation-logo img {
    max-height: var(--nibelungia-logo-hoehe);
    /* width:auto (03.09.26, Fix eines Bugs von der CLS-Aenderung):
       navigation.hbs setzt seit dem CLS-Fix width="905" height="266" als
       HTML-Attribute (echte Dateigroesse) - Browser behandeln ein
       width-Attribut ohne widersprechende CSS-Regel aber als tatsaechliche
       Boxbreite in Pixeln, nicht bloss als Seitenverhaeltnis-Hinweis
       (Letzteres braucht zusaetzlich width:auto in CSS, dann wird das
       Attribut-Paar nur noch zur Berechnung des Seitenverhaeltnisses
       herangezogen). Ohne dieses width:auto wurde die Box auf dem Desktop
       905px breit angefordert und auf 40px Hoehe zusammengequetscht - auf
       Mobile mit deutlich weniger verfuegbarer Breite sah man das als
       verzerrtes, zu breites Logo. */
    width: auto;
    margin-bottom: calc(var(--nibelungia-logo-hoehe) * 0.2);
}

/* Gleicher width:auto-Fix wie oben bei .gh-navigation-logo img, hier fuer
   das Logo in der Fusszeile (footer.hbs hat seit dem CLS-Fix dieselben
   width/height-Attribute) - Casper's eigene Regel in screen.css setzt nur
   max-height, ohne Override waere hier derselbe Verzerrungs-Bug. */
.gh-footer-logo img {
    width: auto;
}

::selection {
    background: rgba(160, 137, 93, 0.35);
}

.gh-content blockquote {
    border-left: 4px solid var(--nibelungia-red);
    padding-left: 1.5rem;
}

.gh-content hr {
    height: calc(var(--nibelungia-stripe-width) * 3);
    width: 100%;
    margin: 3rem auto;
    background: linear-gradient(
        to bottom,
        var(--nibelungia-red) 0 33.333%,
        var(--nibelungia-pale) 33.333% 66.666%,
        var(--nibelungia-gold) 66.666% 100%
    );
}

.gh-navigation,
.gh-navigation.has-accent-color,
.gh-navigation-actions,
.gh-navigation.has-accent-color .gh-navigation-actions {
    background-color: var(--nibelungia-header-bg);
}

/* Suche und "Mein Konto" sitzen in .gh-navigation-actions, und Casper gibt
   diesem Block eine EIGENE deckende Flaeche (screen.css: background-color:
   var(--background-color)) - die Regel darueber hat sie nochmal gesetzt.
   Auf der Startseite laeuft das Wappen ueber .gh-navigation::before durch
   den Kopfbereich, und zwar rechts oben (--nibelungia-wappen-pos: right
   -10vw) - also genau unter diesem Block. Die Flaeche schnitt dort ein
   weisses Rechteck ins Wappen. Der Elternteil .gh-navigation traegt die
   Farbe ohnehin, das Kind braucht keine eigene.

   BEWUSST nur ab 768px: darunter wird .gh-navigation-actions im geoeffneten
   Menue zur unten klebenden Leiste (screen.css, .is-open#gh-navigation
   .gh-navigation-actions -> position:sticky; bottom:0). Ohne eigene Flaeche
   scrollen die Menuepunkte sichtbar darunter durch. */
@media (min-width: 768px) {
    .gh-navigation-actions,
    .gh-navigation.has-accent-color .gh-navigation-actions {
        background-color: transparent;
    }
}

.gh-navigation {
    position: relative;
    border-bottom: calc(var(--nibelungia-stripe-width) * 3) solid transparent;
}

.gh-navigation::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--nibelungia-stripe-width) * -3);
    height: calc(var(--nibelungia-stripe-width) * 3);
    background: linear-gradient(
        to bottom,
        var(--nibelungia-red) 0 33.333%,
        var(--nibelungia-pale) 33.333% 66.666%,
        var(--nibelungia-gold) 66.666% 100%
    );
}

.gh-footer,
.gh-footer.has-accent-color {
    background-color: var(--nibelungia-footer-bg);
}

.gh-footer {
    position: relative;
    border-top: calc(var(--nibelungia-stripe-width) * 3) solid transparent;
}

.gh-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--nibelungia-stripe-width) * -3);
    height: calc(var(--nibelungia-stripe-width) * 3);
    background: linear-gradient(
        to bottom,
        var(--nibelungia-red) 0 33.333%,
        var(--nibelungia-pale) 33.333% 66.666%,
        var(--nibelungia-gold) 66.666% 100%
    );
}

.gh-content a {
    text-decoration-color: var(--nibelungia-red);
}

/* "Mein Konto" in der Navigation: schlichter Link ohne eigene Fläche, damit
   das Wappen im Kopfbereich dahinter durchläuft wie überall sonst. */
.gh-navigation-members a[data-portal="account"] {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

/* Instagram hero widget: right third on desktop, prominent full-width on smaller screens */
.gh-container.has-sidebar .gh-hero-sidebar {
    grid-column: 12 / -1;
}

.gh-container.has-sidebar .gh-hero-sidebar ~ .gh-main {
    grid-column: 1 / span 11;
}

.gh-hero-widget {
    padding: 24px;
    background-color: transparent;
}

/* LightWidget's own auto-resize script is unreliable; force a taller
   fixed height so all rows are visible, with scroll as a fallback. */
.gh-hero-widget .lightwidget-widget {
    height: 480px !important;
    overflow-y: auto !important;
}

@media (max-width: 1199px) {
    .gh-container.has-sidebar .gh-hero-sidebar {
        display: block;
        margin-bottom: var(--grid-gap);
    }
}

/* Der Mitglieder-Bereich (Nextcloud im Rahmen) fuellt den Viewport unterhalb
   der Navigation, Footer bleibt versteckt (23.08.26 umgebaut, gleiches Muster
   wie .page-fotoalbum weiter unten - dort ausfuehrlich dokumentiert, warum
   eine verschachtelte Flex-Kette zu fragil ist: funktionierte scheinbar,
   aber genau dieselbe Konstruktion stand hier vorher auch schon und zeigte
   auf Wunsch des Nutzers denselben Effekt - sichtbarer, ungenutzter Footer
   unterhalb einer eigentlich bildschirmfuellend gedachten Seite. Diese Seite
   ist nur fuer eingeloggte Mitglieder sichtbar (visibility:members) - intern
   braucht niemand Impressum/Datenschutz/Kontakt, der Footer darf hier also
   ersatzlos weg, kein "Zugriff zurueck"-Bedenken wie beim Fotoalbum (die
   Navigation bleibt ja ohnehin stehen).
   Kein `zoom` hier (anders als beim Fotoalbum) - Nextclouds eigene
   Oberflaeche wirkte in der Groesse unauffaellig, nicht angefragt. */
.page-mitglieder-bereich {
    overflow: hidden;
}

.page-mitglieder-bereich .gh-content > .kg-embed-card {
    position: fixed;
    top: var(--nibelungia-nav-height);
    left: 0;
    width: 100vw;
    height: calc(100dvh - var(--nibelungia-nav-height));
    margin: 0 !important;
    max-width: none;
    overflow: hidden;
    z-index: 80;
}

.page-mitglieder-bereich .kg-embed-card iframe {
    width: 100%;
    height: 100% !important;
}

/* On short mobile viewports, 100vh minus nav+footer leaves too little room -
   Nextcloud's login form (or file list) gets cut off with no way to scroll to
   the rest. Drop the fill-the-viewport trick there and give the iframe a
   generous fixed height instead, with the page scrolling normally.
   WICHTIG seit dem Umbau auf den fixed-Wrapper (23.08.26): `position:fixed`
   MUSS hier explizit auf `static` zurueckgesetzt werden, nicht nur
   `display`/`flex` - sonst bleibt `.kg-embed-card` bildschirmfixiert und die
   1400px-Iframe-Hoehe kann nicht mehr normal mitscrollen (genau die Ausnahme,
   die dieser Block herstellen soll, waere damit wirkungslos). */
@media (max-width: 767px) {
    .page-mitglieder-bereich {
        overflow: visible !important;
    }

    .page-mitglieder-bereich .gh-content > .kg-embed-card {
        position: static !important;
        display: block;
        width: auto;
        height: auto;
        z-index: auto;
        overflow: visible;
    }

    .page-mitglieder-bereich .kg-embed-card iframe {
        height: 1400px !important;
    }
}

/* Fotoalbum (Immich, 23.08.26) - Vollbild-Iframe. Immichs eigene Oberflaeche
   ist eine Ein-Seiten-App, die ihr Scrollen (Galerie-Raster) und ihre
   Vollbild-Fotoansicht selbst verwaltet, per `position:fixed` INNERHALB des
   iframes - das bezieht sich auf die Groesse des iframes selbst, nicht auf
   den sichtbaren Bildschirmausschnitt. Der iframe muss deshalb selbst exakt
   Viewport-gross sein, sonst wirkt Immichs eigene Vollbildansicht
   abgeschnitten (iPhone, urspruenglich mit fester 1400px-Hoehe entdeckt).

   Zweiter Anlauf (23.08.26, gleicher Tag): eine verschachtelte Flex-Kette
   (body -> .gh-viewport -> .gh-main -> .gh-article -> .gh-content ->
   .kg-embed-card -> iframe, mit height:100% auf jeder Stufe) war zu fragil -
   auf dem Desktop blieb der iframe trotzdem klein, Kopf-/Fusszeile blieben
   sichtbar (vom Nutzer bemerkt). Vermutete Ursache: `.gh-viewport` hat nur
   `min-height:100vh` (kein festes `height`), ob der Ausgleich bis zum iframe
   durchgereicht wird, haengt an mehreren Stellen gleichzeitig von einem
   intakten Flex-Kontext ab. Robuster: der iframe wird direkt per
   `position:fixed` bildschirmfuellend gelegt, unabhaengig von jeder
   Eltern-Kette.

   Dritter Anlauf (23.08.26, gleicher Abend): der iframe deckte per
   `inset:0` auch die Navigation zu (Nutzer bemerkte, dass nach dem zweiten
   Anlauf gar keine Ghost-Navigation mehr erreichbar war - kein Weg zurueck
   zur restlichen Seite ausser dem Browser-Zurueck-Knopf). Auf Wunsch
   korrigiert: die Navigation bleibt oben stehen (`.gh-navigation` hat feste
   Hoehe in screen.css: 100px normal, 64px unter 767px - siehe
   `@media (max-width:767px) #gh-navigation`), NUR der Footer bleibt versteckt.
   `--nibelungia-nav-height` haelt die Navigationshoehe an EINER
   Stelle synchron mit screen.css - bei einer kuenftigen Aenderung der
   Nav-Hoehe dort auch hier den Wert nachziehen (kein automatischer Bezug
   moeglich, da screen.css keine CSS-Variable dafuer nutzt).
   `dvh` statt `vh` wegen iOS Safaris ein-/ausblendender Werkzeugleiste
   (100vh kann dort mehr sein als der tatsaechlich sichtbare Bereich).

   Vierter Anlauf (23.08.26, gleicher Abend): Immichs eigene Oberflaeche wirkt
   insgesamt groesser/groebschlaechtiger als der Rest der Seite (Nutzer hat das
   selbst schon mit Browser-Zoom Strg+"-" bestaetigt getestet - genau dieser
   Effekt, nur automatisch und nur fuer diesen Bereich). Cross-Origin (Immich
   laeuft auf einer eigenen Subdomain) - kein Zugriff aufs innere DOM/CSS von
   aussen moeglich, deshalb `zoom` direkt auf dem iframe-ELEMENT selbst.

   Fuenfter Anlauf, PRAEZISIERT statt weiter geraten (23.08.26, gleicher
   Abend - der Nutzer hat zurecht nachgefragt, warum hier geschaetzt statt
   nachgerechnet wird): `zoom` auf dem iframe UND gleichzeitig `top`/`left`
   auf demselben Element ist die Fehlerquelle - ob/wie ein Browser den
   `position:fixed`-Versatz eines gezoomten Elements interpretiert (in
   CSS-Pixeln vor oder nach der Zoom-Skalierung), ist beim nicht-
   standardisierten `zoom` nicht zuverlaessig herleitbar, nur austesten - das
   war das eigentliche Rate-Problem. Sauber getrennt: der `.kg-embed-card`-
   WRAPPER (nicht der iframe selbst) traegt jetzt `position:fixed` mit
   `top`/`left`/`width`/`height` in echten, ungezoomten Pixeln - eindeutig,
   keine Interaktion mit `zoom` moeglich. Der iframe DARIN ist `width:100%;
   height:100%` seines Wrappers (also exakt dessen Groesse), plus `zoom` +
   Kompensations-Aufblaehung um denselben Faktor wie zuvor - der Wrapper hat
   `overflow:hidden`, schneidet den ueberstehenden Rand sauber ab.
   Positionierung (Wrapper) und Verkleinerung (iframe) sind damit vollstaendig
   entkoppelt.

   Streifenberechnung (jetzt exakt, nicht mehr geschaetzt): `.gh-navigation`
   hat `height:100px` MIT `box-sizing:border-box` (globaler Reset, `*,
   *::before, *::after { box-sizing:border-box }`) UND `border-bottom:9px
   solid transparent` - der Inhalt/Padding-Bereich ist also nur 91px hoch,
   die letzten 9px sind der (unsichtbare) Rand. `.gh-navigation::after`
   (der Streifen) ist absolut positioniert mit `bottom:-9px` relativ zur
   PADDING-Box des Navs (die bei 91px endet) - sein unterer Rand landet damit
   bei 91+9=100px, sein oberer bei 100-9=91px. Der Streifen liegt also exakt
   im Bereich [91px, 100px] - komplett INNERHALB der 100px-Nav-Hoehe, endet
   exakt buendig mit deren Unterkante. `--nibelungia-nav-height`
   (100px) allein reicht deshalb rechnerisch bereits aus, KEIN zusaetzlicher
   Puffer noetig - die vorherigen "+9px"/"+6px" auf dem iframe selbst waren
   Kompensation fuer das oben beschriebene Zoom/top-Zusammenspiel, nicht fuer
   die Streifen-Geometrie. */
:root {
    --nibelungia-nav-height: 82px; /* synchron mit .gh-navigation height in screen.css halten */
}

@media (max-width: 767px) {
    :root {
        --nibelungia-nav-height: 64px;
    }
}

.page-fotoalbum {
    overflow: hidden;
}

.page-fotoalbum .gh-content > .kg-embed-card {
    /* display:block statt Casper's Default display:flex; align-items:center
       (screen.css, .kg-embed-card) - "center" zentriert den iframe statt ihn
       zu strecken, wenn die per `zoom` verzerrte Breiten-/Hoehenrechnung
       (siehe iframe-Regel unten) nicht exakt aufgeht. Sichtbar am iPhone als
       Raender rechts/links und ungenutzter Platz unten (23.08.26, vom Nutzer
       per Screenshot bemerkt). Mit display:block gibt es keine Flex-Cross-
       Achse mehr, die etwas zentrieren koennte - width/height:100% auf dem
       iframe greift dann eindeutig. */
    display: block;
    position: fixed;
    top: var(--nibelungia-nav-height);
    left: 0;
    width: 100vw;
    height: calc(100dvh - var(--nibelungia-nav-height));
    margin: 0 !important;
    max-width: none;
    overflow: hidden;
    z-index: 80;
}

/* `zoom` (10.09.26 entfernt - hat einen echten Bug verursacht, keine
   Kosmetik-Feinheit): Immich am Desktop bewusst kleiner wirken zu lassen
   lief ueber `zoom:0.85` + eine passend aufgeblasene width/height
   (calc(100% / 0.85)), damit die sichtbare Flaeche nach dem Verkleinern
   wieder exakt den Wrapper ausfuellt (23.08.26, "vierter/fuenfter Anlauf").
   Das hat aber nebenbei Immichs EIGENES internes Layout-Verstaendnis seiner
   Bildschirmgroesse verzerrt: aufgeblasene width/height sind die tatsaech-
   liche CSS-Box des iframes, und GENAU daran bemisst Immichs eigenes
   Dokument innen seine "100vh"/"100dvh" - nicht an dem, was nach dem Zoom
   am Ende wirklich sichtbar ist. Jedes Immich-Dialogfenster, das sich per
   `max-h-dvh` an seiner eigenen Bildschirmhoehe orientiert (z.B. die
   Suchoptionen), hielt sich dadurch fuer hoeher, als tatsaechlich sichtbar
   war - der untere Teil landete unsichtbar hinter dem `overflow:hidden`
   des Wrappers, ohne jede Moeglichkeit, dahin zu scrollen (10.09.26 vom
   Nutzer per Screenshot gemeldet, mit Playwright real nachgemessen:
   Wrapper 884px hoch, iframe-INNERES Sichtfeld durch den Zoom auf 1223px
   aufgeblasen - der Suchoptionen-Dialog passte sich exakt daran an und
   ragte entsprechend unten heraus). Betrifft potenziell JEDES aehnlich
   gebaute Immich-Dialogfenster, nicht nur dieses eine - deshalb komplett
   entfernt statt nur an dieser einen Stelle geflickt. Mobile hatte
   `zoom:1` schon vorher (s.o., historischer Verdacht war dort iOS-
   Unzuverlaessigkeit - im Rueckblick vermutlich derselbe Bug, nur nie an
   einem hohen genug Dialog bemerkt). */
.page-fotoalbum .kg-embed-card iframe {
    width: 100%;
    height: 100% !important;
}

/* Coat of arms watermark.
   Source: WappenLight.eps (the grayscale variant), rendered to WebP at
   2000px height - it is only ever shown at ~12% opacity, so render
   fidelity matters far less than file size.

   Home page: one large, fixed watermark bleeding off the right edge.
   Content scrolls over it. This needs TWO congruent layers, because the
   navigation bar has an opaque cream background that would otherwise cut
   the watermark off at the top:
     1. body::before          - position:fixed, behind the content
     2. .gh-navigation::before - inside the header, using
        background-attachment:fixed so its slice lines up seamlessly
        with layer 1.
   Layer 1 sits at z-index:-1 and would disappear behind the body's own
   background colour, so the page colour moves to <html> and the body is
   made transparent on the home page.

   All other templates: no full-page watermark, just a small one in the
   footer (see further down). */
:root {
    --nibelungia-wappen: url('../images/wappen.webp');
    --nibelungia-wappen-pos: right -10vw top -2vh;
    --nibelungia-wappen-size: auto 90vh;
    --nibelungia-wappen-opacity: .12;
}

html {
    background-color: var(--background-color);
}

.home-template {
    background-color: transparent;
}

.home-template::before,
.home-template .gh-navigation::before {
    content: '';
    pointer-events: none;
    background-image: var(--nibelungia-wappen);
    background-repeat: no-repeat;
    background-position: var(--nibelungia-wappen-pos);
    background-size: var(--nibelungia-wappen-size);
    opacity: var(--nibelungia-wappen-opacity);
}

.home-template::before {
    position: fixed;
    inset: 0;
    z-index: -1;
}

/* .gh-navigation is already position:relative further up, and its ::after
   carries the red/white/gold stripe - only ::before is free here. */
.home-template .gh-navigation::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-attachment: fixed;
}

.home-template .gh-navigation-inner {
    position: relative;
    z-index: 1;
}

/* Small footer watermark on every template except the home page.
   Deliberately NOT clipped with overflow/clip-path: .gh-footer::before is
   the stripe and sits *outside* the footer box, so clipping would cut it
   off. Instead background-size:contain plus a capped height keeps the
   watermark inside the footer on its own. */
body:not(.home-template) .gh-footer::after {
    content: '';
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: 240px;
    height: 220px;
    max-height: calc(100% - 16px);
    pointer-events: none;
    background: var(--nibelungia-wappen) no-repeat center right / contain;
    opacity: .18;
}

/* On phones, 180vh fills the whole screen and background-attachment:fixed
   is unreliable on iOS, so scale the watermark down and drop the header
   layer (nothing to line up with once it is out of the header's way). */
@media (max-width: 767px) {
    :root {
        --nibelungia-wappen-size: auto 60vh;
        --nibelungia-wappen-pos: right -30vw bottom 6vh;
    }

    .home-template .gh-navigation::before {
        display: none;
    }
}

/* Right-aligned logo, wider nav menu area for more links */
@media (min-width: 768px) {
    .gh-navigation.is-left-logo .gh-navigation-inner {
        grid-template-columns: 1fr auto auto;
    }
    .gh-navigation.is-left-logo .gh-navigation-brand {
        order: 3;
    }
    .gh-navigation.is-left-logo .gh-navigation-menu {
        order: 1;
        margin-left: 0;
        margin-right: 0;
        justify-content: flex-start;
    }
    .gh-navigation.is-left-logo .gh-navigation-actions {
        order: 2;
    }
}

/* Homepage tiles in the Couleur colours instead of the default grey:
   one = red, two = white, three = gold. The colour is bound to a class on
   the tile (set in page-tiles.hbs), not to :nth-child - a missing page must
   not shift the colours of its siblings. */
.gh-tile-one .gh-tile-inner {
    background-color: var(--nibelungia-red-dark);
    color: #fff;
}

/* Transparent rather than white, so the coat of arms watermark behind the
   page shows through the middle tile. */
.gh-tile-two .gh-tile-inner {
    background-color: transparent;
    color: var(--color-darker-gray);
}

.gh-tile-three .gh-tile-inner {
    background-color: var(--nibelungia-gold);
    /* Dark text on gold: white would only reach ~3.4:1 contrast. */
    color: var(--color-darker-gray);
}

/* Links have to follow the tile's text colour, otherwise the accent colour
   clashes with red and gold. */
.gh-tile-one .gh-tile-content a,
.gh-tile-three .gh-tile-content a {
    color: inherit;
}

/* Buttons: one pair of colours across all three tiles, white on deep red,
   with the roles swapped on the white tile - a white button would be
   invisible there. Both directions land at ~10:1 contrast. */
.gh-tile .gh-tile-content .kg-btn-accent {
    background-color: #fff;
    color: var(--nibelungia-red-dark);
}

.gh-tile-two .gh-tile-content .kg-btn-accent {
    background-color: var(--nibelungia-red-dark);
    color: #fff;
}

.gh-tile .gh-tile-content .kg-btn-accent:hover {
    opacity: .85;
}

/* The thin vertical rule between tiles was there to separate two grey
   blocks; between coloured ones it is just noise. */
.gh-tiles-feed .gh-tile:not(:last-child)::after {
    display: none;
}

/* Tiles butt straight up against each other - the colours do the dividing,
   no gap needed. Overrides the theme-wide --grid-gap for this row only. */
.gh-tiles-feed {
    gap: 0;
}

/* Tile headings at the same weight as the lead post's headline. Values
   copied verbatim from .gh-header.is-highlight .gh-header-left .gh-card
   .gh-card-title (screen.css) so the two stay visually in step. The
   original 2rem was noticeably smaller than everything around it. */
.gh-tile-title {
    font-size: clamp(2.8rem, 1.36vw + 2.25rem, 4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.022em;
    /* 12px looked cramped under a 40px headline. */
    margin-bottom: clamp(12px, 1vw, 20px);
}

/* Shown instead of the article body when a member-only post is opened by
   someone who is not signed in - replaces Ghost's own "Subscribe" box. */
.gh-members-note {
    margin: 2em 0;
    padding: clamp(24px, 4vw, 40px);
    background-color: var(--nibelungia-header-bg);
    border-top: calc(var(--nibelungia-stripe-width) * 3) solid transparent;
    border-image: linear-gradient(
        to right,
        var(--nibelungia-red-dark) 0 33.333%,
        var(--nibelungia-pale) 33.333% 66.666%,
        var(--nibelungia-gold) 66.666% 100%
    ) 1;
    text-align: center;
}

.gh-members-note h2 {
    margin: 0 0 .4em;
    color: var(--nibelungia-red-dark);
}

.gh-members-note p {
    margin: 0 auto 1.5em;
    max-width: 44ch;
}

/* Ohne das erbt der Knopf die Linkfarbe aus .gh-content und steht dann
   goldbraun auf goldbraunem Grund - praktisch unlesbar. */
.gh-members-note .gh-button,
.gh-members-note .gh-button:hover {
    color: var(--color-white);
    text-decoration: none;
}

/* Emotion slider (homepage, directly below the navigation).
   Markup is built at runtime by assets/built/emotion.js from the Ghost page
   with slug "emotion" - see partials/components/emotion.hbs. */
:root {
    /* 23.08.26: von reiner Viewport-Hoehe (50vh) auf Aspect-Ratio umgestellt.
       Die Kachel ist vollbreit (nicht auf --container-width begrenzt), eine
       reine vh-Hoehe ignoriert die Breite komplett - auf einem breiten
       16:9-Laptop-Fenster (z.B. 1440x900) ergab das ein extrem flaches
       Verhaeltnis (~3,5:1), object-fit:cover schnitt dabei oben/unten hart
       weg, genau wo bei den meisten Fotos die Koepfe sitzen. Bewusst NICHT
       einfach 16/9 wie die mittlere Stufe uebernommen: bei Vollbreite auf
       einem tatsaechlichen 16:9-Bildschirm waere die Kachel damit fast
       bildschirmfuellend hoch (Kachelbreite = Bildschirmbreite, gleiches
       Verhaeltnis wie der Bildschirm => gleiche Hoehe wie der Bildschirm).
       2/1 auf Wunsch gewaehlt, bewusst OHNE max-height-Deckel (waere fuer
       sehr breite/Ultrawide-Monitore theoretisch nochmal ratsam, aber nicht
       gewuenscht). */
    /* 1.8/1 -> 1.6/1 (03.09.26, 1.5/1 war zu hoch, auf Wunsch etwas
       zurueckgenommen) - bei voller Container-Breite (1320px) landet die
       Hoehe damit bei 825px statt der 880px von 1.5/1. */
    --nibelungia-emotion-ratio: 1.6 / 1;
    --nibelungia-emotion-min-height: 360px;
    --nibelungia-emotion-fade: .8s;
    --nibelungia-emotion-title: var(--nibelungia-red-dark);
    --nibelungia-emotion-subtitle: #2f2f2f;
    --nibelungia-emotion-veil: rgba(255, 255, 255, .55);
    --nibelungia-emotion-blur: 16px;
}

/* CLS-Fix (03.09.26): Die Kachel reserviert ihre Flaeche jetzt SOFORT per
   CSS, unabhaengig von emotion.js - vorher stand hier "display:none" bis
   das Skript per "is-ready"-Klasse auf "block" umschaltete. Das erzeugte
   beim echten Laden einen der groessten Layout-Shifts der Seite (gemessen,
   nicht vermutet: CLS 0.51-0.66 je nach Breite, siehe
   docs/cls-report.md) - der Bereich hatte bis dahin Hoehe 0, alles
   darunter (Kacheln, Header) rutschte beim Erscheinen der Kachel schlagartig
   nach unten.
   aspect-ratio + min-height sind dieselben Werte, die vorher nur auf dem
   von JS erst noch zu bauenden .gh-emotion-viewport standen (s.u., dort
   jetzt entfernt) - die Kachel hat also von der allerersten Bildschirmzeile
   an exakt die Groesse, die sie nach dem Laden ohnehin haben wird. Bis JS
   fertig ist, zeigt ein simpler Hintergrundton (dieselbe Platzhalterfarbe
   wie vorher auf .gh-emotion-viewport) eine leere Flaeche statt eines
   Sprungs. Fallback ohne JS/bei leerem Slide-Inhalt: emotion.js setzt in
   dem Fall die Klasse "is-empty", siehe dort weiter unten. */
.gh-emotion {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: var(--nibelungia-emotion-ratio);
    min-height: var(--nibelungia-emotion-min-height);
    background-color: #e9e4dc;
    overflow: hidden;
    /* Abstand zum Streifen im Header (24.08.26, auf Wunsch) - Hoehe EINES
       Farbbands, nicht des ganzen dreifarbigen Streifens: Der gesamte
       Streifen ist calc(--nibelungia-stripe-width * 3) = 9px hoch, aber rot/
       weiss/gold teilen sich das zu je einem Drittel (siehe .gh-content hr
       oben, "0 33.333%" etc.) - ein einzelnes Band ist also
       --nibelungia-stripe-width selbst (3px). Beim ersten Versuch aus
       Versehen die Gesamthoehe genommen, dadurch wirkte der Abstand wie alle
       drei Streifen zusammen statt wie einer. */
    margin-top: var(--nibelungia-stripe-width);
}

/* Escape-Hatch fuer den seltenen Fehlerfall (kein JS, Seite "emotion"
   fehlt/leer, keine gueltige Folie) - emotion.js setzt diese Klasse gezielt
   in genau diesen Faellen, s. init() dort. Kollabiert die reservierte
   Flaeche nachtraeglich wieder, statt dauerhaft eine leere Farbflaeche ohne
   Inhalt zu zeigen. */
.gh-emotion.is-empty {
    display: none;
}

/* 23.08.26, auf Wunsch nach Implenia-Vorbild: bei sehr breiten Monitoren
   (Vollbild) NICHT weiter vollbreit wachsen - das haette bei festem 2/1
   sonst auch die Hoehe unbegrenzt mitwachsen lassen. Dieselbe
   --container-width wie der Rest der Seite (und schon der Caption-Balken
   dieser Kachel selbst, s.u.) - kein neuer Wert. Nur ab 1200px (dort gilt
   das feste 2/1-Verhaeltnis ueberhaupt erst, s.u.) - auf Tablet/Handy bleibt
   die Kachel bewusst vollbreit. */
@media (min-width: 1200px) {
    .gh-emotion {
        max-width: var(--container-width);
        margin-inline: auto;
    }
}

/* Fuellt nur noch den vom Eltern-Element (.gh-emotion) bereits reservierten
   Platz - Groesse/Hintergrund sitzen seit dem CLS-Fix oben auf .gh-emotion
   selbst, nicht mehr doppelt hier. */
.gh-emotion-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gh-emotion-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity var(--nibelungia-emotion-fade) ease-in-out;
}

.gh-emotion-slide.is-active {
    opacity: 1;
}

.gh-emotion-image,
.gh-emotion-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Lower third: a bright, frosted band. The backdrop-filter both blurs and
   lightens whatever part of the photo sits behind it. */
.gh-emotion-caption {
    position: absolute;
    /* Sits 1px below the edge on purpose: aspect-ratio boxes at odd window
       widths land on half pixels, where the browser rounds the image and
       the caption independently and leaves a hairline of the unblurred
       photo showing. The overhang is clipped by
       the viewport's overflow:hidden, so nothing of it is visible; the extra
       bottom padding keeps the text at its original distance. */
    /* Same box as the body content column: the side padding of .gh-outer,
       capped at --container-width and centred (auto margins resolve the
       leftover space evenly). The photo stays visible left and right. */
    /* Nur noch halb so breit (02.09.26, auf Wunsch) - seit der Text
       rechtsbündig ist, braucht das Band nicht mehr die volle Breite; es
       haengt jetzt rechts, keine linke Kante mehr definiert (nur noch
       ueber die width). Passt der Text nicht, bricht er um (kein eigenes
       white-space noetig, ist Block-Standardverhalten) statt das Band zu
       verbreitern. */
    /* Rechts bis an die Bildkante (02.09.26, auf Wunsch) - kein Rand mehr
       dort, -1px statt 0 aus demselben Subpixel-Grund wie unten (s.o.). */
    inset: auto -1px -1px auto;
    width: 50%;
    max-width: calc(var(--container-width) / 2);
    /* Rechts dreifacher Abstand (seit Folien-Text rechtsbündig ist): die
       Einrückung gibt dem Text Luft zur Bandkante. Links bleibt es beim
       schmalen Maß, dort steht ohnehin nichts an. */
    padding:
        clamp(16px, 3vw, 32px)
        clamp(48px, 4.8vw, 84px)
        calc(clamp(16px, 3vw, 32px) + 1px)
        clamp(16px, 1.6vw, 28px);
    /* Goldton, deckend statt Weissglas (02.09.26, auf Wunsch) - deshalb
       kein backdrop-filter mehr noetig (haette bei deckendem Hintergrund
       ohnehin keine sichtbare Wirkung) und keine eigene Firefox-Ausnahme
       mehr noetig (die galt nur der Durchsichtigkeit). */
    background-color: var(--nibelungia-gold);
}

.gh-emotion-title {
    margin: 0;
    /* Weiss (02.09.26, auf Wunsch - kurz zuvor auf Schwarz gesetzt, dann
       wieder zurueck). H4/.gh-emotion-subtitle bleibt bewusst schwarz. */
    color: #fff;
    /* Verkleinert + rechtsbuendig (02.09.26, auf Wunsch) - deutlich kleiner
       als die feste Titelzeile oben (.gh-emotion-heading-title), damit die
       Folien-Texte klar als das Untergeordnete lesbar sind. */
    font-size: clamp(1.6rem, 2.4vw, 2.6rem);
    /* Explizit gesetzt (02.09.26): der Titel ist seit der H1/H3-Aufteilung
       ein h3, nicht mehr h2 - ohne eigenes font-weight wuerde er das
       Browser-Standardgewicht von h3 erben statt wie bisher auszusehen. */
    font-weight: 700;
    line-height: 1.15;
    text-align: right;
}

.gh-emotion-subtitle {
    margin: .3em 0 0;
    color: #fff;
    /* +30% (02.09.26, auf Wunsch), von clamp(1.1rem, 1.3vw, 1.5rem). */
    font-size: clamp(1.4rem, 1.7vw, 2rem);
    /* Aus demselben Grund: seit der Aufteilung ein h4 statt eines <p>. */
    font-weight: 400;
    line-height: 1.3;
    text-align: right;
}

/* Feste Titelzeile (H1/H2 aus dem ERSTEN Block der Emotion-Seite, 02.09.26):
   anders als die Folien-Bildunterschrift oben bleibt sie bei jedem
   Folienwechsel unveraendert stehen - sie ist der einzige echte h1/h2 der
   Seite (SEO-Grund, siehe emotion.js), die Folien-Titel selbst sind
   bewusst nur noch h3/h4. Gleiche Verschleierungs-Mechanik wie
   .gh-emotion-caption, nur oben statt unten verankert - deshalb dieselben
   --nibelungia-emotion-*-Variablen, keine eigene Farbwelt. */
/* Aeusserer, unsichtbarer Rahmen (02.09.26): traegt nur noch die
   Positionierung ueber dem Foto (inset/max-width/margin, wie vorher direkt
   auf .gh-emotion-heading). Die weisse Flaeche selbst sitzt jetzt auf dem
   INNEREN .gh-emotion-heading und endet dadurch exakt nach H1/H2 - die
   Navigationsstriche stehen als naechstes Flusskind DARUNTER, ausserhalb
   dieser weissen Flaeche, s.u. */
.gh-emotion-heading-wrap {
    position: absolute;
    /* Volle Bildbreite (02.09.26, auf Wunsch) - kein seitlicher Rand, kein
       max-width-Deckel mehr: die weisse Flaeche soll bis an beide
       Bildkanten reichen statt wie die untere Box eingerueckt zu sein. */
    inset: -1px 0 auto;
}

.gh-emotion-heading {
    /* Jetzt ein <a> statt eines <div> (02.09.26, Link zur CTA-Seite) -
       display:block noetig (Links sind sonst inline), dazu die
       Standard-Linkfarbe/-Unterstreichung ausgeschaltet: die Farbe kommt
       weiterhin allein von H1/H2 selbst. */
    display: block;
    color: inherit;
    text-decoration: none;
    padding:
        clamp(16px, 3vw, 32px)
        clamp(16px, 1.6vw, 28px)
        clamp(16px, 3vw, 32px);
    padding-left: clamp(48px, 4.8vw, 84px);
    background-color: var(--nibelungia-emotion-veil);
    backdrop-filter: blur(var(--nibelungia-emotion-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--nibelungia-emotion-blur)) saturate(140%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .gh-emotion-heading {
        background-color: rgba(255, 255, 255, .82);
    }
}

/* Nur als <a> (Nicht-Mitglieder, Klickziel /cta/) einen Zeigefinger-Cursor
   zeigen (03.09.26) - fuer Mitglieder ist es seit dem Hero-CTA-Ausschluss
   ein reines <div>, ohne Klickziel waere ein Pointer-Cursor irrefuehrend. */
a.gh-emotion-heading {
    cursor: pointer;
}

/* Striche unter der weissen Flaeche, nicht mehr Teil davon (02.09.26, auf
   Wunsch) - eigenstaendiges Flusskind im transparenten Rahmen, deshalb
   width:fit-content + margin:auto zum Zentrieren statt der
   position:absolute-Zentrierung der Standard-Regel unten. */
.gh-emotion-heading-wrap .gh-emotion-dots {
    position: static;
    transform: none;
    width: fit-content;
    margin: clamp(10px, 1.6vw, 16px) auto 0;
}

.gh-emotion-heading-title {
    margin: 0;
    color: var(--nibelungia-emotion-title);
    font-size: clamp(2.2rem, 3.4vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
}

.gh-emotion-heading-subtitle {
    margin: .3em 0 0;
    color: var(--nibelungia-emotion-subtitle);
    font-size: clamp(1.5rem, 1.7vw, 2.1rem);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
}

/* Sichtbarer CTA-Button in der Titelzeile (03.09.26, Launch-Fix B) - die
   weisse Flaeche war zwar komplett klickbar, sah aber nirgends nach einem
   Button aus. Bewusst ein <span>, kein eigenes <a> (siehe emotion.js) - die
   Optik eines Buttons, die Klick-/Tastaturbedienung traegt weiterhin das
   umschliessende .gh-emotion-heading. */
.gh-emotion-heading-button {
    display: inline-block;
    margin-top: clamp(14px, 1.8vw, 22px);
    padding: .7em 1.4em;
    border-radius: 100px;
    background-color: var(--nibelungia-red-dark);
    color: #fff;
    font-size: clamp(1.4rem, 1.3vw, 1.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.004em;
}

/* Sichtbarer Fokuszustand (Launch-Fix B, Akzeptanzkriterium) - ohne diese
   Regel liefert der Browser hier oft keinen sichtbaren Standard-Fokusring,
   weil .gh-emotion-heading selbst background/backdrop-filter setzt. */
.gh-emotion-heading:focus-visible {
    outline: 3px solid var(--nibelungia-gold);
    outline-offset: -3px;
}

/* Navigation marks: short bars, horizontally centred over the photo.
   (The .gh-emotion-dot class name is kept - it is referenced by
   emotion.js - even though these are no longer dots.) */
.gh-emotion-dots {
    position: absolute;
    top: clamp(12px, 2vw, 20px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    /* Bars differ in thickness; centring keeps them on a shared axis so the
       active one grows evenly up and down. */
    align-items: center;
    gap: 10px;
}

.gh-emotion-dot {
    width: clamp(22px, 2.4vw, 34px);
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: rgba(255, 255, 255, .6);
    /* The bars sit straight on the photo, so they need their own contrast. */
    box-shadow: 0 0 6px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: height .25s ease, background-color .25s ease;
}

.gh-emotion-dot:hover {
    background-color: rgba(255, 255, 255, .85);
}

/* Three times the thickness marks the current slide. */
.gh-emotion-dot.is-active {
    height: 9px;
    background-color: #fff;
}

.gh-emotion-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* CTA-Popup (02.09.26): ein Klick auf die feste Emotion-Titelzeile oeffnet
   denselben Inhalt wie die eigenstaendige /cta/-Seite als Popup, siehe
   emotion.js. */
.gh-cta-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.gh-cta-popup[hidden] {
    display: none;
}

.gh-cta-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    /* Verhindert, dass ein Wisch auf dem Backdrop selbst als Scroll-Geste
       irgendwo landet (02.09.26) - die eigentliche Sperre passiert in
       popup.js (body auf position:fixed), das hier ist nur ein
       zusaetzliches Sicherheitsnetz fuer Browser, die touch-action
       respektieren. */
    touch-action: none;
}

.gh-cta-popup-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    /* Der Dialog selbst scrollt NICHT mehr (02.09.26) - nur noch
       .gh-cta-popup-scroll darin. Sonst waere der absolut positionierte
       Schliessen-Knopf ein Kind des scrollenden Bereichs gewesen und beim
       Herunterscrollen aus dem Blickfeld verschwunden. overflow:hidden hier
       sorgt zusaetzlich dafuer, dass die Ecken des Scroll-Bereichs am
       abgerundeten Dialograhmen sauber abgeschnitten werden. */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.gh-cta-popup-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Verhindert Scroll-Chaining an den Raendern (z.B. am Ende des Inhalts
       weiter wischen wuerde sonst auf manchen Browsern an ein Eltern-Element
       durchgereicht) - zusaetzliches Sicherheitsnetz neben der body-Sperre
       in popup.js. */
    overscroll-behavior: contain;
    padding: clamp(28px, 4vw, 48px);
}

.gh-cta-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--nibelungia-red-dark);
    cursor: pointer;
}

.gh-cta-popup-close:hover,
.gh-cta-popup-close:focus-visible {
    opacity: .7;
}

#gh-cta-popup-title {
    margin-top: 0;
    padding-right: 36px;
    color: var(--nibelungia-red-dark);
}

/* Tablets: keep a cinematic ratio instead of a viewport-height share, which
   would get disproportionately tall on short landscape screens.
   CLS-Fix (03.09.26): gilt jetzt fuer .gh-emotion selbst (reserviert die
   Flaeche), nicht mehr fuer .gh-emotion-viewport (fuellt nur noch 100% des
   Elternelements, s.o.) - sonst waeren Tablet/Mobile beim Umschalten der
   Breakpoints wieder ungeschuetzt vor demselben Sprung wie vorher. */
@media (max-width: 1199px) {
    .gh-emotion {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    .gh-emotion {
        /* 1/1.2 -> 1/1.4 (03.09.26, auf Wunsch noch hoeher) - dritte
           Erhoehung dieser Kachel in Folge (vorher 50vh, dann 1/1, dann
           1/1.2), deshalb bewusst nur ein moderater Schritt statt eines
           beliebig hohen Wertes. */
        aspect-ratio: 1 / 1.4;
    }

    /* H3/H4-Textband breiter als auf Desktop (02.09.26, auf Wunsch) - dort
       bewusst nur 50%, da rechtsbuendiger Text auf breiten Bildschirmen
       genug Platz hat; auf schmalen Mobile-Breiten braucht derselbe Text
       mehr Raum, bevor er umbricht. max-width faellt hier weg (die
       Container-Breiten-Deckelung greift ohnehin erst ab 1200px, s.o.). */
    .gh-emotion-caption {
        width: 66%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gh-emotion-slide {
        transition: none;
    }

    .gh-emotion-dot {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Findfix - Archivsuche auf der Seite /digitaler-archivar/              */
/*                                                                      */
/* Bewusst OHNE eigene Farb- und Schriftwerte: Alles kommt aus dem      */
/* Theme (--nibelungia-*, var(--font-serif), .gh-canvas). Bis 20.08.    */
/* lag die Oberflaeche in einem iframe mit einer zweiten, abgeschrie-   */
/* benen Kopie dieser Werte - und abgeschriebene Werte laufen bei der   */
/* ersten Theme-Aenderung auseinander.                                  */
/* ------------------------------------------------------------------ */

.gh-findnix {
    margin-top: 2.4rem;
    /* Luft unter dem Eingabefeld. Ohne sie klebt es am Seitenende, sobald man
       ganz nach unten scrollt - und auf dem Handy sitzt es dann direkt an der
       Bildschirmkante, wo der Daumen ohnehin schon ist. */
    padding-bottom: calc(56px * var(--content-spacing-factor, 1));
}

/* Sprechblasen wie in einem Nachrichtenverlauf: eigene Fragen rechts in
   Nibelungia-Rot, Findnix' Antworten links in Grau. Das trennt die beiden
   Stimmen ohne ein einziges Wort Erklaerung - und es ist das Muster, das
   jeder vom Telefon kennt. */
.gh-findnix-beitrag {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.8rem;
}

.gh-findnix-frage {
    align-self: flex-end;
    max-width: 80%;
    padding: 1rem 1.6rem;
    color: #fff;
    background: var(--nibelungia-red-dark);
    /* Die "Ecke" unten rechts zeigt zum Absender - wie beim Vorbild. */
    border-radius: 16px 16px 4px 16px;
}

.gh-findnix-blase {
    align-self: flex-start;
    max-width: 88%;
    margin-top: 1.2rem;
    padding: 1.2rem 1.8rem;
    background: rgba(0, 0, 0, 0.055);
    border-radius: 16px 16px 16px 4px;
}

/* Teilen-Symbol am Ende jeder Frage (25.08.26): kopiert einen dauerhaften
   Link auf genau diese Frage+Antwort, wie ein Google-Maps-Standort-Link.
   currentColor erbt das weisse Textcolor der Sprechblase (.gh-findnix-frage)
   - eine eigene Farbe waere hier unnoetig. */
.gh-findnix-teilen {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.6em;
    padding: 0.2em;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}

.gh-findnix-teilen:hover,
.gh-findnix-teilen:focus-visible {
    opacity: 1;
}

.gh-findnix-teilen-hinweis {
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.8em;
    color: inherit;
    opacity: 0.85;
}

/* Die Quellen als EIGENE Blase unter der Antwort: Belege, Einschraenkungen
   und Zahlen sind etwas anderes als das Gesagte. In derselben Blase liefen
   sie mit der Auskunft zusammen und machten sie optisch schwer.

   Schriftgroesse EINMAL hier, nicht je Element - sonst multiplizieren sich
   verschachtelte em-Werte: 0.86em auf der Blase mal 0.9em auf der Liste
   ergaebe 0.77em, also kleiner als beabsichtigt und ohne dass man es einer
   der beiden Zeilen ansieht. Die Kinder stehen deshalb auf 1em. */
.gh-findnix-quellen {
    margin-top: 0.8rem;
    font-size: 0.86em;
    color: var(--nibelungia-gray);
}

.gh-findnix-quellen .gh-findnix-gesperrt,
.gh-findnix-quellen .gh-findnix-belege {
    font-size: 1em;
}

.gh-findnix-quellen > * + * {
    margin-top: 1rem;
}

/* Der Datenschutzhinweis stand bis 20.08. als Fusszeile unter dem
   Eingabefeld - also weit weg von der Handlung, auf die er sich bezieht.
   Jetzt steht er unmittelbar ueber den Knoepfen. */
.gh-findnix-datenhinweis {
    margin: 0 0 0.6rem;
}

/* Die Bewertung sitzt bewusst AUSSERHALB der Blase: Sie ist kein Gesagtes,
   sondern ein Bedienelement. In der Blase saehe sie aus, als gehoerte sie
   zur Auskunft. */
.gh-findnix-bewertung {
    align-self: flex-start;
}

/* Die Antwort des Sprachmodells, aus Markdown gebaut (findnix.js).
   Listen, Ueberschriften und Links erben ihre Gestaltung von .gh-content -
   dessen Selektoren sind Nachfahren-Selektoren und greifen auch hier.
   NICHT geerbt wird der vertikale Rhythmus: ".gh-content > * + *" gilt nur
   fuer direkte Kinder, und der Chat sitzt tiefer. Deshalb hier eigene
   Abstaende - sonst kleben Absaetze und Listen aneinander. */
/* Abstaende: DIESELBE Rechnung wie das Theme (screen.css, ".gh-content > * + *"),
   nicht ein eigener Wert. Hier stand bis 20.08. "1.2rem" - bei der
   62,5-%-Basis des Themes sind das 12px statt 28px, also weniger als die
   Haelfte. Absaetze klebten aneinander, und weil Casper alle Abstaende global
   zuruecksetzt, betraf es auch Listen: Die Theme-Regel greift nur auf DIREKTE
   Kinder von .gh-content, und der Chat sitzt tiefer. */
.gh-findnix-text > * + * {
    margin-top: calc(28px * var(--content-spacing-factor, 1));
}

/* Ueberschriften brauchen mehr Luft nach oben als nach unten - sonst schweben
   sie zwischen zwei Absaetzen, statt zu ihrem eigenen zu gehoeren. */
.gh-findnix-text > h3 + * {
    margin-top: calc(12px * var(--content-spacing-factor, 1));
}

.gh-findnix-text h3 {
    margin-top: calc(36px * var(--content-spacing-factor, 1));
    font-size: 1.15em;
}

.gh-findnix-text p {
    margin: 0;
}

/* Aufzaehlungen: Einzug und Zeilenabstand kommen aus dem Theme
   (.gh-content :is(ul, ol)), die Marke bekommt hier nur etwas Farbe und
   Abstand zum Text. */
.gh-findnix-text :is(ul, ol) {
    margin-left: 0;
}

.gh-findnix-text li {
    padding-left: 0.2em;
}

.gh-findnix-text li::marker {
    color: var(--nibelungia-gold);
}

.gh-findnix-text code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* Der Satz in Findnix' Rolle - normal lesbar. */
.gh-findnix-satz {
    margin: 0;
    white-space: pre-wrap;
}

/* Der nuechterne Grund darunter: kleiner und leiser, aber NICHT versteckt.
   Er ist der Teil, der die Rolle ehrlich macht. */
.gh-findnix-grund {
    margin: 0.6rem 0 0;
    font-size: 0.86em;
    color: var(--nibelungia-gray);
    border-left: 2px solid var(--nibelungia-gold);
    padding-left: 1rem;
}

.gh-findnix-antwort.is-wartend .gh-findnix-satz {
    font-style: italic;
    color: var(--nibelungia-gray);
}

.gh-findnix-antwort.is-stoerung .gh-findnix-grund {
    border-left-color: var(--nibelungia-red);
}

.gh-findnix-eingrenzung,
.gh-findnix-gesperrt {
    margin: 0.8rem 0 0;
    font-size: 0.86em;
    color: var(--nibelungia-gray);
}

.gh-findnix-eingrenzung {
    border-left: 2px solid var(--nibelungia-gold);
    padding-left: 1rem;
}

.gh-findnix-belege {
    margin-top: 0;
}

.gh-findnix-belege h3 {
    margin: 0 0 0.4rem;
    font-size: 1em;
    font-weight: 600;
    color: var(--nibelungia-gray);
}

.gh-findnix-belege ol {
    margin: 0;
    padding-left: 2.2rem;
}

.gh-findnix-belege a {
    color: var(--nibelungia-red-dark);
}

/* --- Beispielfragen --- */
.gh-findnix-beispiele {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
}

.gh-findnix-beispiele button {
    font: inherit;
    font-size: 0.93em;
    text-align: left;
    cursor: pointer;
    padding: 0.7rem 1.5rem;
    color: var(--nibelungia-red-dark);
    background: transparent;
    border: 1px solid rgba(160, 137, 93, 0.5);
    border-radius: 999px;
}

.gh-findnix-beispiele button:hover {
    border-color: var(--nibelungia-gold);
    background: rgba(160, 137, 93, 0.1);
}

/* --- Eingabe --- */
.gh-findnix-eingabe {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.gh-findnix-eingabe textarea {
    font: inherit;
    flex: 1;
    min-height: 4.6rem;
    max-height: 16rem;
    padding: 1rem 1.4rem;
    line-height: 1.4;
    resize: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.gh-findnix-eingabe textarea:focus {
    outline: 2px solid var(--nibelungia-gold);
    outline-offset: -1px;
}

/* Senden-Knopf: NUR auf Touch-Geräten. Auf Zeigegeräten sendet die
   Eingabetaste, und der Hinweis darauf steht im Feld selbst - ein zweiter Weg
   zum selben Ziel macht die Zeile nur schwer.
   Auf Touch bleibt er, weil die Eingabetaste der Bildschirmtastatur in einem
   mehrzeiligen Feld nicht verlässlich sendet; ohne Knopf käme man dort unter
   Umständen gar nicht weiter. */
.gh-findnix-eingabe button {
    display: none;
}

@media (hover: none) {
    /* Doppelte Höhe auf Touch-Geräten. Zwei Gründe: Der Daumen trifft ein
       größeres Feld sicherer, und die Bildschirmtastatur verdeckt beim Tippen
       einen guten Teil der Seite - man sieht sonst kaum, was man geschrieben
       hat.
       min-height statt height, damit das Mitwachsen bei längeren Fragen
       (findnix.js) weiterhin greift; es setzt die Höhe direkt und würde eine
       feste Angabe überschreiben. */
    .gh-findnix-eingabe textarea {
        min-height: 9.2rem;
    }

    .gh-findnix-eingabe button {
        display: block;
        font: inherit;
        /* Das Ruecklaufzeichen sitzt in den meisten Schriften etwas hoch
           in der Zeile - minimal nachjustiert, damit es im runden Knopf
           mittig wirkt. */
        font-size: 2rem;
        line-height: 1;
        padding-bottom: 0.2rem;
        cursor: pointer;
        flex: 0 0 auto;
        width: 4.6rem;
        height: 4.6rem;
        color: #fff;
        background: var(--nibelungia-red-dark);
        border: 0;
        border-radius: 50%;
    }

    .gh-findnix-eingabe button:disabled {
        background: var(--nibelungia-gray);
        cursor: default;
    }
}

/* --- Bewertung --- */
.gh-findnix-bewertung {
    margin-top: 1.2rem;
    font-size: 0.88em;
    color: var(--nibelungia-gray);
}

.gh-findnix-bewertung button {
    font: inherit;
    font-size: 1em;
    cursor: pointer;
    margin-right: 0.6rem;
    padding: 0.3rem 1rem;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.gh-findnix-bewertung button:hover {
    border-color: var(--nibelungia-gold);
}

.gh-findnix-nachfrage {
    display: none;
    margin-top: 1rem;
}

.gh-findnix-nachfrage.is-offen {
    display: block;
}

.gh-findnix-nachfrage textarea {
    font: inherit;
    font-size: 0.95em;
    width: 100%;
    min-height: 6.2rem;
    padding: 0.8rem;
    resize: vertical;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.gh-findnix-nachfrage-zeile {
    display: flex;
    gap: 1rem;
    margin-top: 0.6rem;
}

/* Fundstellen-Marker im Antworttext: hochgestellt, klein, in Rot - erkennbar
   als Verweis, ohne den Lesefluss zu zerhacken. Der Titel zeigt beim
   Darauffahren die Quelle im Klartext. */
.gh-findnix-ref {
    font-size: 0.72em;
    font-weight: 600;
    vertical-align: super;
    line-height: 0;
    padding: 0 0.1em;
    color: var(--nibelungia-red-dark);
    text-decoration: none;
    white-space: nowrap;
}

.gh-findnix-ref:hover {
    text-decoration: underline;
    text-decoration-color: var(--nibelungia-gold);
}

/* Hinweis, dass eine Antwort aus dem Speicher kommt. Gedeckt, nicht als
   Stoerung: Es ist dieselbe Auskunft, nur schneller. */
.gh-findnix-speicher {
    margin-bottom: 1.2rem;
}

.gh-findnix-speicher .gh-findnix-satz {
    font-style: italic;
    color: var(--nibelungia-gray);
}

/* --- Fundstellen: eingeklappt ------------------------------------------
   Die ersten Eintraege stehen offen da, der naechste wird nach unten
   ausgeblendet. Der angeschnittene Eintrag ist der eigentliche Hinweis,
   dass da noch mehr kommt - deutlicher als jede Beschriftung. Die Hoehe
   haengt an --sichtbar (setzt findnix.js), damit hier keine Pixelwerte
   stehen, die beim naechsten Schriftwechsel nicht mehr passen. */
.gh-findnix-belege.is-eingeklappt ol {
    max-height: calc(var(--sichtbar, 5.5) * 2.15em);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent);
}

.gh-findnix-mehr {
    font: inherit;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.6rem;
    padding: 0;
    color: var(--nibelungia-red-dark);
    background: none;
    border: 0;
    cursor: pointer;
}

.gh-findnix-mehr:hover {
    text-decoration: underline;
    text-decoration-color: var(--nibelungia-gold);
}

/* Das Dreieck zeigt die HANDLUNG, nicht den Zustand: eingeklappt nach unten
   ("da kommt noch was"), aufgeklappt nach oben ("wieder zumachen"). Zuerst
   hatte ich es als Zustandsanzeige gebaut - aufgeklappt zeigte es nach unten,
   auf den Inhalt. Das ist die uebliche Lesart bei Baumstrukturen, aber an
   einem Knopf mit Beschriftung fragt man sich zu Recht, wohin es denn gehen
   soll. Grundstellung ist deshalb "nach unten"; das Zeichen selbst bleibt
   das nach rechts zeigende, gedreht wird per CSS. */
.gh-findnix-pfeil {
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

.gh-findnix-belege:not(.is-eingeklappt) .gh-findnix-pfeil {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .gh-findnix-pfeil { transition: none; }
}

/* --- Volltextmodus: alle Fundstellen, nach Dokument gruppiert ---------- */
.gh-findnix-volltext {
    margin-top: calc(20px * var(--content-spacing-factor, 1));
}

.gh-findnix-vt-dok + .gh-findnix-vt-dok {
    margin-top: calc(20px * var(--content-spacing-factor, 1));
    padding-top: calc(16px * var(--content-spacing-factor, 1));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.gh-findnix-vt-kopf {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.gh-findnix-vt-kopf a {
    color: var(--nibelungia-red-dark);
}

.gh-findnix-vt-zahl {
    font-weight: 400;
    color: var(--nibelungia-gray);
}

.gh-findnix-vt-stelle {
    margin-bottom: 0.4rem;
    padding-left: 1.2rem;
    text-indent: -1.2rem;
}

/* Zusaetzliche Stellen sind eingeklappt, bis der Knopf sie oeffnet. Hier per
   Klasse und display:none statt per max-height: Die Ausschnitte sind
   unterschiedlich lang, eine feste Hoehe traefe nie. */
.gh-findnix-vt-stelle.is-versteckt {
    display: none;
}

.gh-findnix-vt-dok.is-offen .gh-findnix-vt-stelle.is-versteckt {
    display: block;
}

.gh-findnix-vt-dok.is-offen .gh-findnix-pfeil {
    transform: rotate(-90deg);
}

.gh-findnix-vt-seite {
    font-weight: 600;
    color: var(--nibelungia-gray);
    white-space: nowrap;
}

.gh-findnix-vt-gesperrt {
    font-style: italic;
}

/* Zweite Ebene: weitere Dokumente. Wie bei den Stellen per display statt
   max-height - die Bloecke sind unterschiedlich hoch, eine feste Hoehe
   traefe nie. */
.gh-findnix-vt-dok.is-dok-versteckt {
    display: none;
}

.gh-findnix-volltext.is-alle .gh-findnix-vt-dok.is-dok-versteckt {
    display: block;
}

.gh-findnix-mehr-dok {
    margin-top: 1.2rem;
    font-weight: 600;
}

.gh-findnix-volltext.is-alle + .gh-findnix-mehr-dok .gh-findnix-pfeil {
    transform: rotate(-90deg);
}

/* Hinweis ueber der Fundstellenliste - leiser als die Liste selbst, aber
   nicht versteckt. */
.gh-findnix-belege-hinweis {
    margin: 0 0 0.6rem;
    font-size: 0.94em;
    font-style: italic;
    color: var(--nibelungia-gray);
}

/* Dropdown-Untermenues in der Hauptnavigation (23.08.26). Aufbau/Gruppierung
   passiert in assets/built/nav-dropdown.js - hier nur das Aussehen. Zwei
   Elternteil-Varianten, siehe JS-Kommentar: eigene Zielseite (Pfeil-Knopf
   .gh-nav-dropdown-toggle daneben) oder reiner Gruppentitel ohne Ziel
   (.gh-nav-toggle-only, Pfeil als ::after am Label selbst). */

/* Kurzes Aufblitzen der noch flachen, ungruppierten Liste beim Laden einer
   neuen Seite vermeiden (23.08.26 live bemerkt) - nav-dropdown.js braucht
   nach source.js noch einen Wimpernschlag, bis die "| "-Praefixe verarbeitet
   sind. Deshalb die Liste bis dahin ausblenden, JS macht sie sofort per
   .gh-nav-ready wieder sichtbar. Reine CSS-Notbremse (animation-delay) fuer
   den Fall, dass JS mal nicht laeuft - sonst waere die Navigation komplett
   unerreichbar, anders als z.B. bei der Emotion-Kachel vertretbar. */
.gh-navigation-menu .nav {
    opacity: 0;
    animation: gh-nav-reveal 0.01s 0.3s forwards;
}

.gh-navigation-menu .nav.gh-nav-ready {
    opacity: 1;
    animation: none;
}

@keyframes gh-nav-reveal {
    to {
        opacity: 1;
    }
}

.gh-nav-has-dropdown {
    position: relative;
}

.gh-nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
}

.gh-nav-dropdown-toggle svg {
    transition: transform 0.15s ease;
}

.gh-nav-toggle-only > a {
    cursor: pointer;
}

.gh-nav-toggle-only > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    margin-bottom: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.gh-nav-has-dropdown.is-open .gh-nav-dropdown-toggle svg,
.gh-nav-has-dropdown.is-open.gh-nav-toggle-only > a::after {
    transform: rotate(180deg);
}

.gh-nav-has-dropdown.is-open.gh-nav-toggle-only > a::after {
    transform: rotate(225deg);
}

@media (min-width: 768px) {
    /* Auf Desktop rein dekorativ (oeffnet ueber Hover, nicht per Klick -
       siehe nav-dropdown.js) - Cursor soll das nicht als Knopf ausgeben. */
    .gh-nav-dropdown-toggle {
        cursor: default;
    }

    .gh-nav-dropdown {
        /* Box mittig unter dem Elternteil (23.08.26 auf Wunsch), NICHT
           linksbuendig ab dem Label-Anfang wie zuvor - die Eintraege DARIN
           bleiben normal linksbuendig (text-align unveraendert = left). */
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        /* 200 statt 10 (23.08.26 abends) - muss ueber dem fest positionierten
           Fotoalbum-iframe liegen (z-index 80), sonst verschwindet das
           aufgeklappte Dropdown-Menue auf der Fotoalbum-Seite dahinter. */
        z-index: 200;
        display: flex;
        flex-direction: column;
        min-width: 200px;
        margin: 12px 0 0;
        padding: 8px 0;
        list-style: none;
        background-color: var(--nibelungia-header-bg);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .gh-nav-has-dropdown:hover .gh-nav-dropdown,
    .gh-nav-has-dropdown.is-open .gh-nav-dropdown {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Unsichtbare Bruecke zwischen Elternteil und Dropdown, damit die Maus
       beim Runterfahren nicht durchs Hover-Loch faellt und das Menu zuklappt. */
    .gh-nav-dropdown::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }

    .gh-nav-dropdown li {
        white-space: nowrap;
    }

    .gh-nav-dropdown a {
        display: block;
        padding: 8px 20px;
        color: var(--nibelungia-red-dark);
        text-transform: none;
        font-weight: 500;
    }

    .gh-nav-dropdown a:hover {
        background-color: rgba(226, 51, 32, 0.08);
    }
}

@media (max-width: 767px) {
    /* Casper's eigenes screen.css zentriert die Top-Level-Punkte auf Mobile
       (#gh-navigation .nav { align-items: center }) - passte nicht mehr, seit
       die Untermenues links eingerueckt darunter stehen (wirkte schief/
       uneinheitlich). Alle Ebenen jetzt auf derselben linken Achse. */
    #gh-navigation .nav {
        align-items: flex-start;
    }

    /* Kein Auf-/Zuklappen mehr auf Mobile (23.08.26 auf Wunsch vereinfacht) -
       das Untermenue steht immer sichtbar, eingerueckt unter dem Elternteil.
       Beide Pfeil-Varianten dadurch ueberfluessig und ausgeblendet: der
       Knopf (.gh-nav-dropdown-toggle, echte Zielseite) UND das ::after am
       Label selbst (.gh-nav-toggle-only, reiner Gruppentitel wie "Interner
       Bereich") - Letzteres zunaechst uebersehen, tauchte auf schmaler
       Breite weiter funktionslos auf. */
    .gh-nav-toggle-only > a::after {
        display: none;
    }

    .gh-nav-dropdown {
        display: flex;
        flex-direction: column;
        gap: 10px;
        list-style: none;
        margin: 10px 0 0;
        padding: 0 0 0 20px;
        border-left: 2px solid rgba(0, 0, 0, 0.08);
    }

    .gh-nav-dropdown a {
        font-size: 1.45rem;
        opacity: 0.85;
    }

    .gh-nav-dropdown-toggle {
        display: none;
    }
}

/* Eigener Announcement-Banner (02.09.26, seit 03.09.26 serverseitig
   gerendert statt per JS nachgeladen - Ersatz fuer Ghosts natives, extern
   per CDN nachgeladenes Skript). Steht als erstes Kind von <body> direkt in
   default.hbs (nicht mehr per assets/built/banner.js eingefuegt - CLS-Fix,
   siehe dort und docs/cls-report.md: ein per fetch() nachgeladener und erst
   danach per insertBefore eingefuegter Banner verschiebt die GESAMTE Seite
   darunter, sobald die Antwort da ist - klassischer Layout-Shift, keine
   Ausnahme). min-height statt einer festen height: reserviert eine
   Ein-Zeilen-Mindesthoehe gegen Webfont-Nachlade-Zittern, laesst laengere,
   mehrzeilige Ankuendigungen aber frei wachsen (nie abschneiden). */
.gh-announcement-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px max(4vmin, 20px);
    min-height: 44px;
    box-sizing: border-box;
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: center;
}

.gh-announcement-bar-accent {
    background: var(--ghost-accent-color, var(--nibelungia-red-dark));
    color: #fff;
}

.gh-announcement-bar-light {
    background: #f4f4f4;
    color: #15171a;
}

.gh-announcement-bar-dark {
    background: #15171a;
    color: #fff;
}

.gh-announcement-bar-content p {
    margin: 0;
}

.gh-announcement-bar-content a {
    color: inherit;
    text-decoration: underline;
}

.gh-announcement-bar-close {
    flex-shrink: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 767px) {
    .gh-announcement-bar {
        font-size: 1.3rem;
        gap: 10px;
    }
}

/* Kontakt-/Funktionstraeger-Tabellen auf Mobile (03.09.26, Launch-Fix C).
   Sicherheitsnetz zusaetzlich zum min-width:0-Fix in screen.css (siehe dort
   fuer den eigentlichen Root Cause, dem CSS-Grid-Item-Overflow) - lange
   E-Mail-Adressen/URLs duerfen brechen statt abgeschnitten zu werden, egal
   in welchem Kontext eine solche Tabelle je auftaucht. */
.gh-content .gh-table td a,
.gh-content .gh-table td {
    overflow-wrap: anywhere;
}

/* Unterhalb 767px: aus jeder Tabellenzeile wird eine gestapelte Karte statt
   einer horizontal scrollenden Zeile. Alle vier Kontakt-/Funktionstraeger-
   Tabellen auf /kontakt/ nutzen durchgehend dasselbe Muster - <th
   scope="row"> als Zeilen-Label in der ERSTEN Zelle, keine <thead>
   Spaltenkoepfe - deshalb reicht eine einzige, generische Regel fuer alle
   vier statt einer Sonderloesung pro Tabelle. Desktop (>767px) bleibt exakt
   wie zuvor: white-space:nowrap + eigenes horizontales Scrollen. */
@media (max-width: 767px) {
    .gh-content .gh-table table {
        white-space: normal;
    }

    .gh-content .gh-table tr {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-block: 10px;
    }

    .gh-content .gh-table tr:not(:last-child) {
        border-bottom: 1px solid var(--color-border);
    }

    .gh-content .gh-table :is(th, td) {
        display: block;
        width: 100%;
        padding: 0;
        border-bottom: 0;
    }

    .gh-content .gh-table th {
        color: var(--color-secondary-text);
    }
}

/* 404-Seite (03.09.26, Launch-Fix G) - gebrandet statt Ghosts nackter
   Standard-Fehlerseite, nutzt aber dasselbe Layout/dieselben Abstaende wie
   eine normale Page (.gh-article-header/.gh-content), daher nur wenige
   eigene Regeln fuer die Optik der Zahl/Ueberschrift. */
.gh-nbb-404-title-wrap {
    text-align: center;
}

.gh-nbb-404-code {
    font-size: clamp(5rem, 8vw + 2rem, 9rem);
    color: var(--nibelungia-red-dark);
    line-height: 1;
    margin: 0;
}

.gh-nbb-404-body {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.gh-nbb-404-heading {
    margin-top: 0;
}

.gh-nbb-404-links {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.gh-nbb-404-links a {
    display: inline-block;
    padding: .7em 1.4em;
    border-radius: 100px;
    background-color: var(--nibelungia-red-dark);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.gh-nbb-404-links a:hover {
    background-color: var(--nibelungia-gold);
    color: #2f2f2f;
}

/* Sticky Mobile-CTA (03.09.26, Launch-Fix H). Nur auf Mobile sichtbar
   (Desktop hat den Hero-CTA-Knopf im Emotion-Slider dauerhaft im Blick,
   eine zweite fixe Leiste waere dort nur Platzverschwendung). Sitzt unten,
   respektiert die iOS-Sicherheitszone (Home-Indicator) per
   env(safe-area-inset-bottom) - ohne das laege die Leiste teils dahinter
   und waere kaum antippbar. z-index unterhalb von Ghosts Member-Portal-
   Overlay (3999999) und dem Fotoalbum/Mitgliederbereich-iframe (500,
   beide s.o.), aber ueber normalem Seiteninhalt - kollidiert mit keinem
   von beiden, da jene Seiten kein Emotion-Slider/keine Sticky-CTA zeigen. */
.gh-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--nibelungia-header-bg, #fff);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    transition: transform .25s ease;
}

@media (max-width: 767px) {
    .gh-sticky-cta.is-ready {
        display: block;
    }
}

.gh-sticky-cta.is-hidden-by-hero {
    transform: translateY(100%);
}

.gh-sticky-cta-link {
    display: block;
    text-align: center;
    padding: .8em 1.4em;
    border-radius: 100px;
    background-color: var(--nibelungia-red-dark);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}