/* ═══════════════════════════════════════════════════════════════════════════
   Museum Abtei Liesborn — Sitepackage
   Farben, Typografie und Rasterwerte stammen aus dem Gestaltungsentwurf
   (/www/liesborn/design/styles.css). Werte dort ändern sich nur im Entwurf —
   maßgeblich für die Webseite ist diese Datei.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Palette */
    --paper:       #FFFFFF;
    --paper-2:     #F2EFE8;
    --ink:         #2A2A26;
    --ink-2:       #2A2A26;
    --muted:       #55554F;
    --rule:        #2A2A260F;
    --rule-strong: #2A2A2622;
    --mint:        #BDD2BC;   /* Kopfleiste und Footer */
    --mint-2:      #DCE6DA;
    --mint-deep:   #7C9A85;
    --gold:        #B89766;
    --gold-deep:   #8C6F45;

    /* Farbleitsystem der Sammlungsbereiche.
       Alle fünf Grundfarben am 13.08.2026 auf die Werte des Designkonzepts
       berichtigt; der jeweils alte Wert steht daneben. Sie stammen damit
       nicht mehr aus der CMYK-Umrechnung des ersten Entwurfs — der Entwurf
       unter /www/liesborn/design/styles.css trägt weiterhin die alten.

       Soft und Deep sind ABGELEITET, nicht geschätzt:
       · Soft = Grundfarbe zu 62 % auf Weiß aufgehellt.
       · Deep = Grundfarbe so weit abgedunkelt, dass Schrift darin auf der
         zugehörigen Soft-Fläche mindestens 4,65:1 erreicht (WCAG AA verlangt
         4,5:1). Der Faktor ist je Bereich verschieden, weil die Grundfarben
         unterschiedlich hell sind — deshalb rechnen, nicht übertragen.
       Wer eine Grundfarbe ändert, muss beide Ableitungen neu rechnen. */
    --c-abtei:       #C6D6B7;   /* war #B8EDA8 */
    --c-abtei-soft:  #E9EFE4;
    --c-abtei-deep:  #636B5C;
    --c-kunst:       #9DC1DA;   /* war #8DCED9 */
    --c-kunst-soft:  #DAE7F1;
    --c-kunst-deep:  #536674;
    --c-kreuz:       #D9937A;   /* war #D97777 */
    --c-kreuz-soft:  #F1D6CC;
    --c-kreuz-deep:  #7C5446;
    --c-alltag:      #EBCD98;   /* war #E6C373 */
    --c-alltag-soft: #F7ECD8;
    --c-alltag-deep: #76664C;
    --c-sonder:      #C4ACC6;   /* war #B898D9 */
    --c-sonder-soft: #E9DFE9;
    --c-sonder-deep: #6C5F6D;
    --c-grau:        #E1E1DD;

    /* Schrift */
    --serif: "Noto Serif", "Times New Roman", Times, serif;
    --sans:  "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;

    /* Rundung — gilt für Bilder und für Flächen wie Infobox oder Zitat */
    --radius: 4px;

    /* Raster */
    --max: 1280px;
    --gutter: 32px;
    --col-gap: 24px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
    /* Ohne das laufen lange Komposita wie „Barrierefreiheitserklärung" auf
       schmalen Schirmen aus dem Fenster und erzeugen waagerechtes Scrollen. */
    overflow-wrap: break-word;
}
h1 { font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; }
h3 { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; }
h4 { font-size: 18px; line-height: 1.2; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--gold-deep); }

/* Sichtbarer Fokus — Pflicht nach BITV, darf nirgends wegoptimiert werden */
:focus-visible {
    outline: 3px solid var(--gold-deep);
    outline-offset: 2px;
}

.skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: var(--paper);
    padding: 14px 22px;
    font-weight: 500;
    text-decoration: none;
}
.skiplink:focus {
    left: 0;
    color: var(--paper);
}

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

/* ───────────────────────────────────────────────────────────────────────────
   Inhaltselemente von fluid_styled_content
   Jedes Element bringt seinen eigenen Container mit; einzelne Typen dürfen
   über die volle Breite laufen (siehe .frame-type-liesborn_hero).
   ─────────────────────────────────────────────────────────────────────────── */

.frame {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.seiteninhalt > .frame + .frame { margin-top: 56px; }
/* Im Styleguide steckt jedes Text-und-Medien-Element in .sg-abbildungen.
   Damit sind die Rahmen nicht mehr direkte Geschwister, und die Regel
   darüber greift nicht — der Abstand zwischen den Abschnitten fiele aus.
   Nach einer Abbildung etwas mehr, damit der Rahmen nicht am nächsten
   Abschnitt klebt. */
.seiteninhalt > .frame + .sg-abbildungen,
.seiteninhalt > .sg-abbildungen + .sg-abbildungen { margin-top: 56px; }
.seiteninhalt > .sg-abbildungen + .frame { margin-top: 72px; }
.seiteninhalt { padding: 56px 0 96px; }
.seiteninhalt--start { padding-top: 0; }

.frame-space-before-extra-small { margin-top: 16px; }
.frame-space-before-small { margin-top: 32px; }
.frame-space-before-medium { margin-top: 56px; }
.frame-space-before-large { margin-top: 80px; }
.frame-space-before-extra-large { margin-top: 112px; }
.frame-space-after-extra-small { margin-bottom: 16px; }
.frame-space-after-small { margin-bottom: 32px; }
.frame-space-after-medium { margin-bottom: 56px; }
.frame-space-after-large { margin-bottom: 80px; }
.frame-space-after-extra-large { margin-bottom: 112px; }

/* Volle Breite für Hero-Slider */
.frame-type-liesborn_hero {
    max-width: none;
    padding: 0;
}
.seiteninhalt > .frame-type-liesborn_hero + .frame { margin-top: 72px; }

/* Überschrift eines Inhaltselements.
   Die Klasse setzt das eigene Header-Partial (Partials/ContentElements/Header/All.html);
   der Kern gibt ein <header> ohne Klasse aus. An der Klasse statt an ".frame > header"
   zu hängen ist wichtig, weil die Überschrift nicht überall direktes Kind des Rahmens
   ist — in der Infobox steht sie innerhalb der Mintfläche. */
.elementkopf { margin-bottom: 28px; }
.elementkopf > * { margin-bottom: 0; }
/* Abstand zwischen goldener Kleinzeile und Überschrift wie im Entwurf */
.elementkopf > .eyebrow + * { margin-top: 12px; }
.elementkopf > * + * { margin-top: 10px; }

/* Die Kachelreihe braucht mehr Luft zur ersten Kachelreihe hin */
.frame-type-liesborn_kacheln .elementkopf { margin-bottom: 2.5rem; }

/* In der Infobox bringt der Textblock seinen eigenen Abstand mit */
.infobox .elementkopf { margin-bottom: 0; }

/* Fließtext */
.frame ul, .frame ol { margin: 0 0 1em; padding-left: 1.3em; }
.frame li { margin-bottom: .35em; }
.frame table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
    font-size: 14px;
}
.frame th, .frame td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule-strong);
    vertical-align: top;
}
.frame th { font-weight: 600; border-bottom-color: var(--ink); }
.frame blockquote {
    margin: 0 0 1em;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--gold);
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.5;
}
.frame figure { margin: 0; }
/* Auch die Bilder der Kernelemente (Text & Medien, Bild) rundum gleich */
.frame .ce-gallery img { border-radius: var(--radius); }
.frame figcaption {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
    letter-spacing: .02em;
}

/* Text/Medien nebeneinander */
.ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div {
    overflow: hidden;
}
.ce-gallery figure { display: inline-block; margin: 0; }
.ce-left .ce-gallery, .ce-column { float: left; }
.ce-center .ce-outer { position: relative; float: right; right: 50%; }
.ce-center .ce-inner { position: relative; float: right; right: -50%; }
.ce-right .ce-gallery { float: right; }
.ce-gallery .ce-row { margin-bottom: 16px; }
.ce-gallery .ce-row:last-child { margin-bottom: 0; }
.ce-gallery .ce-column { margin-right: 16px; }
.ce-gallery .ce-column:last-child { margin-right: 0; }
.ce-intext.ce-right .ce-gallery { margin-left: 32px; }
.ce-intext.ce-left .ce-gallery { margin-right: 32px; }
.ce-below .ce-gallery { margin-top: 24px; }
.ce-above .ce-gallery { margin-bottom: 24px; }

/* Videos laufen über die volle Breite des Elements.

   Warum das eine eigene Regel braucht: fluid_styled_content deckelt eine
   Galerie auf styles.content.textmedia.maxW (600 px) und schreibt das Ergebnis
   als width-Attribut ins <video>. Die Spalten sind Floats ohne eigene Breite —
   sie sind also genau so breit wie das, was drinsteht. Ein "width: 100%" am
   Video allein würde nichts ändern, weil es sich auf eine Breite bezöge, die
   das Video selbst bestimmt.

   Deshalb bekommen erst die Spalte und dann das Video die volle Breite. Bei
   Bildern bleibt es beim Deckel: eine 600 px breite Bilddatei auf 1280 px zu
   ziehen wäre unscharf. Ein Video streamt seine Originaldatei (hier 1080p),
   das width-Attribut ist dort reine Layoutangabe — es verliert nichts.

   :has() grenzt die Regel auf Galerien ein, in denen ausschließlich Videos
   stehen — das ":not(:has(figure.image))" ist dabei kein Beiwerk: In einer
   gemischten Galerie stünde sonst ein Video über die volle Breite neben einem
   Bild, das bei seinen 600 px bleiben muss. Die behält deshalb ihr Raster.

   Kennt ein Browser :has() nicht, fällt die Regel weg und es bleibt bei den
   600 px — kein kaputtes Layout, nur das alte. */
.frame .ce-gallery:has(figure.video):not(:has(figure.image)) { float: none; width: 100%; }
.frame .ce-gallery:has(figure.video):not(:has(figure.image)) .ce-outer,
.frame .ce-gallery:has(figure.video):not(:has(figure.image)) .ce-inner { float: none; right: auto; }
.frame .ce-gallery:has(figure.video):not(:has(figure.image)) .ce-column {
    float: none;
    width: 100%;
    margin: 0 0 32px;
}
.frame .ce-gallery:has(figure.video):not(:has(figure.image)) .ce-row:last-child .ce-column:last-child { margin-bottom: 0; }

/* Auch diese drei Regeln bleiben auf die reine Video-Galerie beschränkt.

   Sie waren zunächst allgemein formuliert — und haben damit die gemischte
   Galerie auf der Kruzifix-Seite zerlegt: Dort steht das Video in einer
   schmalen, rechts umflossenen Spalte ohne eigene Breite. Ein "width: 100%"
   am Video bezieht sich dann auf eine Breite, die das Video selbst bestimmen
   soll; Browser lösen diesen Zirkel unterschiedlich auf, im schlechtesten Fall
   mit Breite null. Nur wo die Spalte ihre Breite von der Regel oben bekommt,
   ist das "100%" eindeutig. */
.frame .ce-gallery:has(figure.video):not(:has(figure.image)) figure.video { display: block; }
.frame .ce-gallery:has(figure.video):not(:has(figure.image)) figure.video .video-embed { width: 100%; }
.frame .ce-gallery:has(figure.video):not(:has(figure.image)) figure.video video {
    display: block;
    width: 100%;
    height: auto;
    /* Ohne Höhenangabe im Markup wüsste der Browser die Höhe erst nach dem
       Laden der Metadaten — die Seite würde beim Laden springen. */
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--ink);
    border-radius: var(--radius);
}

/* ───────────────────────────────────────────────────────────────────────────
   Auszeichnungen und Schaltflächen
   ─────────────────────────────────────────────────────────────────────────── */

.eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
}
.eyebrow--gold { color: var(--gold-deep); }
.eyebrow--ink { color: var(--ink); }

.btn {
    /* Schaltflächen bleiben eckig — so sieht es der Entwurf vor */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 2.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    border-radius: 0;
}
/* :focus wiederholt nur die Schriftfarbe der Grundregel — für den alten
   Seitenbaum. Dort setzt Bootstrap 3 ".btn:focus { color: #333 }" (0,2,0) und
   schlägt damit ".btn" (0,1,0): Nach dem Schließen des Such-Overlays, wenn
   der Fokus auf den Such-Button zurückkehrt, stand dunkle Schrift auf dunkler
   Fläche. Die Regeln stehen bewusst HIER und nicht in altbestand.css:
   Sie müssen vor :hover stehen (sonst verlöre das Überfahren eines
   fokussierten Buttons) und vor den Varianten wie ".infobox--dunkel .btn",
   die dieselbe Spezifität haben und weiter gewinnen sollen. */
.btn:focus { color: var(--paper); }
.btn:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:focus { color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* Zurück-Schaltfläche. Der Pfeil kommt aus dem CSS und nicht aus dem
   Redaktionstext — so zeigt er immer in dieselbe Richtung, auch wenn ihn
   jemand beim Tippen vergisst. Die übrigen Schaltflächen tragen ihren Pfeil
   als SVG im Template; hier geht das nicht, weil die Schaltfläche im Editor
   entsteht und CKEditor eingefügtes SVG entfernen würde. */
.btn--zurueck::before {
    content: "\2190";   /* ← */
    font-size: 15px;
    line-height: 1;
    /* Der Pfeil sitzt in der Schrift etwas hoch; ohne die Korrektur steht er
       über der Grundlinie der Beschriftung. */
    transform: translateY(-1px);
    transition: transform .2s ease;
}
.btn--zurueck:hover::before { transform: translate(-3px, -1px); }
/* Mehrere Schaltflächen nebeneinander entstehen im Fließtext über die
   Stil-Auswahl des Editors. Ohne Abstand kleben sie aneinander, und beim
   Umbruch auf schmalen Schirmen auch übereinander. */
.btn + .btn { margin: 4px 0 4px 10px; }
/* Der Entwurf kennt zusätzlich .btn--gold und .btn--mint. Beide sind hier
   bewusst nicht definiert: Es gibt nur die dunkle und die helle Schaltfläche,
   und ungenutzte Klassen im Stylesheet führen später nur in die Irre. */

/* Im Fließtext soll eine Schaltfläche nicht an der Zeile kleben */
.frame p > .btn { margin-top: 8px; }

.rundbutton {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2.5px solid var(--ink);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}
.rundbutton:hover { background: var(--ink); color: var(--paper); }
.rundbutton[disabled] {
    color: #B5B0A4;
    border-color: #D9D5CB;
    cursor: default;
    background: transparent;
}

/* ───────────────────────────────────────────────────────────────────────────
   Kopf
   ─────────────────────────────────────────────────────────────────────────── */

.site-head {
    border-bottom: 1px solid var(--rule-strong);
    background: var(--paper);
    position: relative;
    z-index: 20;
}
.site-head__main { padding: 18px var(--gutter); }
.site-head__inner {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.site-head__bar {
    height: 6px;
    width: 100%;
    background: var(--mint);
}

.brand { flex-shrink: 0; text-decoration: none; display: inline-flex; align-items: center; }
.brand img { height: 56px; width: auto; max-width: none; object-fit: contain; }

.hauptmenue {
    display: flex;
    gap: 28px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.hauptmenue__link {
    display: inline-block;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 6px 0;
    position: relative;
}
.hauptmenue__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.hauptmenue__link:hover::after,
.hauptmenue__link.is-active::after { transform: scaleX(1); }
.hauptmenue__link.is-active { color: var(--gold-deep); }

.untermenue {
    list-style: none;
    margin: 0;
    padding: 0;
}
.untermenue__link {
    display: block;
    font-size: 14px;
    text-decoration: none;
    color: var(--ink);
    padding: 8px 0;
}
.untermenue__link:hover,
.untermenue__link.is-active { color: var(--gold-deep); }

.nav-toggle { display: none; }
.btn--suche { text-decoration: none; }

/* ab Tablet: Untermenü als Klappmenü, Logo · Menü · Suche in drei Spalten */
@media (min-width: 992px) {
    .site-head__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        flex-wrap: nowrap;
    }
    .site-head__inner > .brand { grid-column: 1; justify-self: start; }
    .site-head__inner > .site-head__nav { grid-column: 2; justify-self: center; }
    .site-head__inner > .btn--suche { grid-column: 3; justify-self: end; }

    .hauptmenue__item { position: relative; }
    .hauptmenue__item--hat-untermenue > .untermenue {
        position: absolute;
        top: 100%;
        left: -18px;
        min-width: 240px;
        background: var(--paper);
        border: 1px solid var(--rule-strong);
        border-top: 3px solid var(--mint);
        padding: 10px 18px;
        box-shadow: 0 14px 32px rgba(42, 42, 38, .12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
        z-index: 30;
    }
    .hauptmenue__item:hover > .untermenue,
    .hauptmenue__item:focus-within > .untermenue {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* bis Tablet: Menü hinter einer Schaltfläche */
@media (max-width: 991px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        border: 2px solid var(--ink);
        color: var(--ink);
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: 10px 16px;
        cursor: pointer;
        order: 3;
    }
    .nav-toggle__balken,
    .nav-toggle__balken::before,
    .nav-toggle__balken::after {
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        transition: transform .2s ease, opacity .2s ease;
    }
    .nav-toggle__balken { position: relative; }
    .nav-toggle__balken::before,
    .nav-toggle__balken::after {
        content: "";
        position: absolute;
        left: 0;
    }
    .nav-toggle__balken::before { top: -6px; }
    .nav-toggle__balken::after { top: 6px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__balken { background: transparent; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__balken::before { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__balken::after { transform: translateY(-6px) rotate(-45deg); }

    .site-head__nav {
        display: none;
        order: 4;
        width: 100%;
        border-top: 1px solid var(--rule-strong);
        margin-top: 16px;
        padding-top: 12px;
    }
    .site-head__nav.is-offen { display: block; }
    .hauptmenue { display: block; }
    .hauptmenue__item { border-bottom: 1px solid var(--rule); }
    .hauptmenue__item:last-child { border-bottom: none; }
    .hauptmenue__link { padding: 14px 0; font-size: 15px; }
    .hauptmenue__link::after { display: none; }
    .untermenue { padding: 0 0 12px 16px; }
    .btn--suche { order: 2; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Brotkrumen und Seitenkopf
   ─────────────────────────────────────────────────────────────────────────── */

.brotkrumen {
    padding: 18px 0 0;
    /* Versalien wie bei den übrigen Kleinbeschriftungen des Designsystems
       (Eyebrow, Meta-Zeile, Bildunterschrift). Dazu gehört zwingend beides:
       eine Stufe kleiner und Sperrung — Großbuchstaben ohne Laufweite kleben
       aneinander und lesen sich schlechter als gemischte Schrift.

       Das macht ausschließlich das CSS. Im Quelltext steht der Seitentitel
       unverändert gemischt, Screenreader lesen ihn also normal vor — anders
       als bei von Hand getippten Großbuchstaben. */
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}
.brotkrumen ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.brotkrumen li + li::before {
    content: "›";
    margin-right: 8px;
    /* Der Trenner wird nicht über die Schriftstärke dick — Inter Tight liefert
       für dieses Zeichen kaum Unterschied. Sichtbar wird er über Größe und
       einen kräftigeren Ton als das vorher fast durchsichtige --rule-strong. */
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--muted);
}
.brotkrumen a { color: var(--ink); text-decoration: none; }
.brotkrumen a:hover { color: var(--gold-deep); text-decoration: underline; }
/* Nur die aktuelle Seite in Gold — sie ist der Bezugspunkt der Zeile.
   --gold-deep, nicht --gold: das hellere Gold kommt auf Weiß nur auf 2,74:1
   und wäre als Text nicht lesbar. --gold-deep schafft 4,69:1. */
.brotkrumen [aria-current] { color: var(--gold-deep); font-weight: 600; }

/* Auf dunkler Seite kehren sich beide Töne um */
.seite--dunkel .brotkrumen,
.seite--dunkel .brotkrumen a { color: var(--paper); }
.seite--dunkel .brotkrumen a:hover { color: var(--gold); }
.seite--dunkel .brotkrumen [aria-current] { color: var(--gold); }

/* Der Block .seitenkopf (Seitentitel als h1 plus Untertitel) ist am
   06.08.2026 aus Default.html und Dunkel.html entfernt worden; die Regeln
   dafür stehen deshalb nicht mehr hier. Der Abstand nach der Brotkrumenzeile
   kommt aus .seiteninhalt (padding-top 56px). */

/* ───────────────────────────────────────────────────────────────────────────
   Hero-Slider
   ─────────────────────────────────────────────────────────────────────────── */

.slider-hero {
    --slide-gap: 24px;
    --teaser-w: 120px;
    --slide-pad: 64px;
    position: relative;
    background: var(--paper);
    overflow: hidden;
}
.slider-hero__track {
    display: flex;
    gap: var(--slide-gap);
    align-items: stretch;
    transition: transform .6s cubic-bezier(.6, .05, .2, 1);
    will-change: transform;
    /* Ziehen und Wischen (sliderAufbauen in liesborn.js): Das senkrechte
       Scrollen der Seite bleibt beim Browser, die waagerechte Bewegung
       bekommt das Skript. Ohne diese Angabe würde der Browser auf dem Telefon
       das Wischen selbst deuten und die Pointer-Ereignisse abbrechen. */
    touch-action: pan-y;
    cursor: grab;
}
/* Während des Ziehens folgt der Streifen dem Finger unmittelbar — mit der
   Übergangszeit liefe er hinterher. Text wird dabei nicht markiert. */
.slider-hero__track.is-ziehend {
    transition: none;
    cursor: grabbing;
    user-select: none;
}
.slider-hero__slide {
    flex: 0 0 calc(100vw - var(--teaser-w) - var(--slide-gap));
    position: relative;
    /* Bewusst asymmetrisch und NICHT --radius: Die große Ecke unten rechts ist
       ein Gestaltungsmerkmal des Entwurfs, keine vergessene Vereinheitlichung. */
    border-radius: 0 0 64px 0;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    min-height: 480px;
    opacity: .55;
    transition: opacity .5s ease;
}
.slider-hero__slide.is-active { opacity: 1; }
.slider-hero__flaeche {
    display: block;
    position: absolute;
    inset: 0;
    text-decoration: none;
}
.slider-hero__flaeche img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
a.slider-hero__flaeche:hover img { transform: scale(1.02); }

/* Hinweisfahne oben rechts im Bild („Heute geöffnet · 14 — 18 Uhr“).
   Steht im Markup in jeder Slide, sichtbar nur in der aktiven — so bleibt sie
   beim Blättern an Ort und Stelle, und Screenreader lesen sie einmal statt
   einmal je Slide. "pointer-events: none", damit sie über einer verlinkten
   Slide nicht den Klick abfängt. */
.slider-hero__slide .slider-hero__pill { display: none; }
.slider-hero__slide.is-active .slider-hero__pill { display: block; }
.slider-hero__pill {
    position: absolute;
    top: 18px;
    /* -1px: Bei gebrochenen Gerätepixeln bliebe sonst eine Haarlinie Bild
       zwischen Fahne und Bildkante stehen. */
    right: -1px;
    z-index: 10;
    margin: 0;
    max-width: calc(100% - 32px);
    background: var(--mint);
    color: var(--ink);
    padding: 14px 22px 16px;
    border-radius: 22px 0 0 22px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

.slider-hero__caption {
    position: absolute;
    left: var(--slide-pad);
    right: var(--slide-pad);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}
.slider-hero__caption > div {
    background: var(--paper);
    padding: 22px 28px;
    max-width: 760px;
}
.slider-hero__caption h2 { color: var(--gold-deep); }
.slider-hero__date {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink);
    margin: 10px 0 0;
}
.slider-hero__nav {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    padding: 24px var(--slide-pad) 0;
}

@media (max-width: 767px) {
    .slider-hero__slide {
        flex-basis: 100vw;
        min-height: 320px;
        aspect-ratio: 4 / 3;
        border-radius: 0 0 32px 0;
    }
    .slider-hero { --slide-pad: 20px; --teaser-w: 0px; --slide-gap: 12px; }
    /* Bleibt absolut positioniert: Mit "position: static" verliert der Kasten
       seine Stapelposition (z-index wirkt nur auf positionierte Elemente) und
       verschwindet hinter dem absolut gesetzten Bild. Stattdessen unten
       verankert statt mittig. */
    .slider-hero__caption {
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        transform: none;
    }
    .slider-hero__caption > div { padding: 14px 16px; }
    .slider-hero__caption h2 { font-size: 22px; }
    .slider-hero__date { font-size: 12px; margin-top: 6px; }
    .slider-hero__pill {
        top: 12px;
        padding: 10px 14px 11px;
        font-size: 11px;
        letter-spacing: .06em;
        border-radius: 18px 0 0 18px;
        max-width: calc(100% - 24px);
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Kachelreihe
   ─────────────────────────────────────────────────────────────────────────── */

.kacheln__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.kacheln--1 .kacheln__track { grid-template-columns: 1fr; }
.kacheln--2 .kacheln__track { grid-template-columns: repeat(2, 1fr); }
.kacheln--3 .kacheln__track { grid-template-columns: repeat(3, 1fr); }

/* Ab vier Kacheln: waagerecht wischen, die vierte wird angeteasert.
   Der Streifen bricht nach rechts aus dem Container aus. */
.kacheln--karussell .kacheln__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    touch-action: pan-x pan-y;
    user-select: none;
    margin-right: calc(-1 * ((100vw - min(100vw, var(--max))) / 2 + var(--gutter)));
    padding-right: var(--gutter);
}
.kacheln--karussell .kacheln__track::-webkit-scrollbar { display: none; }
.kacheln--karussell .kacheln__track.is-ziehend { cursor: grabbing; scroll-snap-type: none; }
/* Ohne das startet ein Mausklick auf ein Bild das native Ziehen des Browsers
   und bricht die Ziehbewegung ab (WebKit/Blink; Firefox über draggable="false"). */
.kacheln--karussell .kacheln__track img,
.kacheln--karussell .kacheln__track a { -webkit-user-drag: none; }
.kacheln--karussell .kachel {
    flex: 0 0 auto;
    width: max(280px, calc((min(100vw, var(--max)) - 2 * var(--gutter) - 3 * 16px) / 3.5));
    scroll-snap-align: start;
}

.kachel__flaeche {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform .35s ease;
}
a.kachel__flaeche:hover { transform: translateY(-4px); }
.kachel__bild {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper-2);
}
.kachel__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
a.kachel__flaeche:hover .kachel__bild img { transform: scale(1.03); }
.kachel__label {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    padding: 8px 16px;
    letter-spacing: -0.01em;
}
/* Das Titelkästchen bleibt beim Überfahren unverändert weiß. Es lag hier
   einmal eine Regel, die es auf Gold umfärbte — zusammen mit dem Anheben der
   Kachel und dem Heranzoomen des Bildes waren das drei Bewegungen auf einmal,
   und das goldene Kästchen sah aus wie eine Auswahl, die es nicht ist.
   Die Rückmeldung beim Überfahren geben .kachel__flaeche und das Bild. */
.kachel__text {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2);
}

/* Abschnittskopf der Themenkarten: Überschrift links, Schaltfläche rechts —
   die "section-head" des Entwurfs. Ohne Schaltfläche bleibt allein der Kopf
   stehen und wirkt wie überall sonst. */
.themenkarten__kopf,
.bilderslider__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
}
/* Den Abstand nach unten setzt der Kopf-Behälter, nicht mehr .elementkopf —
   sonst stünde die Schaltfläche 28px höher als die Überschrift. */
.themenkarten__kopf .elementkopf,
.bilderslider__kopf .elementkopf { margin-bottom: 0; }
.themenkarten__kopf,
.bilderslider__kopf { margin-bottom: 36px; }
.themenkarten__aktion,
.bilderslider__aktion { margin: 0; }
/* Einleitung unter dem Kopf — nutzt die Nachrichtenliste im Kartenraster. */
.themenkarten__lead {
    margin: -16px 0 32px;
    max-width: 720px;
    color: var(--ink-2);
}
/* Als Plugin ausgeliefert bringt die Nachrichtenliste keinen .frame mit und
   damit auch keinen Seitencontainer — siehe .termine. */
.frame-type-news_newsliststicky > .themenkarten,
.frame-type-news_pi1 > .themenkarten,
.news > .themenkarten {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
@media (max-width: 767px) {
    .news > .themenkarten { padding: 0 20px; }
}

@media (max-width: 575px) {
    /* Nebeneinander bliebe für die Schaltfläche kaum Platz. */
    .themenkarten__kopf,
    .bilderslider__kopf { display: block; }
    .themenkarten__aktion,
    .bilderslider__aktion { margin-top: 20px; }
}

/* ── Themenzeile — dieselbe Karte, quer über die volle Breite ─────────────
   Element: liesborn_themenzeile, Template ThemenZeile.html. Sie liest
   dieselbe Kartenliste wie die Themenkarten; die Farben des Leitsystems
   kommen aus den is-…-Klassen weiter unten. */

.themenzeile + .themenzeile { margin-top: 32px; }

.themenzeile__flaeche {
    position: relative;
    display: grid;
    /* Schmalere Bildspalte und flaches 16:9 (unten am Bildbehälter): Mit dem
       4:3-Bild in einer 5fr-Spalte wurde jede Zeile über 400px hoch — vier
       davon untereinander sind eine halbe Seite. */
    grid-template-columns: 4fr 8fr;
    gap: 36px;
    /* stretch statt center: Das Bild füllt immer die volle Zeilenhöhe. Sein
       16:9 (am Bildbehälter) gibt die Mindesthöhe vor; wird der Text einmal
       höher, wächst das Bild mit und wird per object-fit beschnitten. Bild und
       Karte sind so in jeder Zeile gleich hoch — ohne Leerraum darüber oder
       darunter. Der Text bleibt über seine eigene Flex-Spalte mittig. */
    align-items: stretch;
    padding: 20px 28px;
    /* Kontur statt Fläche: Die Zeile läuft über die volle Breite, und eine
       durchgehende Füllung in dieser Größe legt sich schwer über die Seite.
       Der Rahmen grenzt genauso ab, ohne Gewicht zu geben — dafür muss er
       aber tragen: 2px in --ink, wie die Schaltflächen des Hauses. Eine feine
       Haarlinie verliert sich bei diesem Format. */
    background: transparent;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease;
}
a.themenzeile__flaeche:hover { border-color: var(--gold-deep); }
.themenzeile--gespiegelt .themenzeile__bild { order: 2; }
.themenzeile--gespiegelt .themenzeile__text { order: 1; }
/* Beim Spiegeln müssen auch die Spaltenbreiten mitwandern. "order" tauscht nur
   die Reihenfolge der Zellen — die Spalten bleiben 4fr | 8fr. Das Bild landete
   damit in der BREITEN Spalte, war doppelt so groß und die Zeile fast doppelt
   so hoch wie ihre Nachbarn. */
.themenzeile--gespiegelt .themenzeile__flaeche { grid-template-columns: 8fr 4fr; }

/* Der Farbstreifen läuft senkrecht am linken Rand der ganzen Zeile. Über dem
   Bild — wie bei der Themenkarte — wäre er im Querformat kaum zu sehen. */
.themenzeile__bild {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
}
.themenzeile__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Der Textblock steht mittig zur Bildhöhe — nicht oben oder unten, je
   nachdem wie lang der Titel ist. Deshalb eine eigene Flex-Spalte: Das
   "align-items: center" des Rasters zentriert nur die Spalte als Ganzes, nicht
   ihren Inhalt. */
.themenzeile__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Kein Zoom beim Überfahren: Rahmen, Titel und Schaltfläche reagieren bereits.
   Ein sich bewegendes Bild darüber war eine Bewegung zu viel (Wunsch der
   Redaktion, 15.09.2026). Themenkarten und Kacheln zoomen weiterhin. */

.themenzeile__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.themenzeile__titel {
    font-family: var(--serif);
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}
a.themenzeile__flaeche:hover .themenzeile__titel { color: var(--gold-deep); }
/* Nur in der automatischen Nachrichtenliste: Titel höchstens zwei Zeilen.
   Der Kurztext ist dort schon im Template auf 180 Zeichen gekürzt, der Titel
   aber nicht — ein sehr langer Ausstellungstitel würde eine einzelne Zeile
   deutlich höher machen als die übrigen. Der volle Titel steht auf der
   Detailseite. Beim Inhaltselement bleibt der Text ungekürzt: Dort schreibt
   die Redaktion jede Karte bewusst. */
.themenzeile--nachricht .themenzeile__titel {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.themenzeile__lead {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 640px;
}
/* „Mehr erfahren" als Schaltfläche. Ein span, kein a — die ganze Zeile ist
   bereits ein Link, ein zweiter darin wäre ungültiges Markup. Die Breite
   richtet sich nach dem Text, deshalb align-self statt display:inline-flex
   allein: In einer Flex-Spalte würde der Knopf sonst über die volle Breite
   laufen. */
.themenzeile__mehr {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 11px 18px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    border: 2.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    border-radius: 0;
    transition: background .2s ease, color .2s ease;
}
/* Beim Überfahren der Zeile kehrt der Knopf um — wie .btn:hover. */
a.themenzeile__flaeche:hover .themenzeile__mehr {
    background: transparent;
    color: var(--ink);
}
.seite--dunkel main .themenzeile__mehr {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
}
.seite--dunkel main a.themenzeile__flaeche:hover .themenzeile__mehr {
    background: transparent;
    color: var(--paper);
}
.themenzeile__nachweis {
    margin: 16px 0 0;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
}

/* Der Punkt vor der Bereichszeile holt seine Farbe aus derselben is-…-Klasse
   wie bei der Themenkarte. Er ist hier der einzige Träger des Leitsystems. */
.themenzeile.is-abtei  .karte__punkt { background: var(--c-abtei); }
.themenzeile.is-kunst  .karte__punkt { background: var(--c-kunst); }
.themenzeile.is-kreuz  .karte__punkt { background: var(--c-kreuz); }
.themenzeile.is-alltag .karte__punkt { background: var(--c-alltag); }
.themenzeile.is-sonder .karte__punkt { background: var(--c-sonder); }

/* Auf dunkler Seite braucht die Zeile KEINE Ausnahme: Sie hat keine eigene
   Fläche mehr, der Text steht also auf dem Seitengrund und folgt dessen
   Farben. Nur der Rahmen beim Überfahren muss hell werden statt dunkel. */
.seite--dunkel main .themenzeile__flaeche { border-color: var(--paper); }
.seite--dunkel main a.themenzeile__flaeche:hover { border-color: var(--gold); }

@media (max-width: 767px) {
    .themenzeile__flaeche {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px 20px 24px 24px;
    }
    .themenzeile--gespiegelt .themenzeile__bild,
    .themenzeile--gespiegelt .themenzeile__text { order: 0; }
    /* Sonst gewänne 8fr | 4fr (0,2,0) gegen die einspaltige Regel (0,1,0). */
    .themenzeile--gespiegelt .themenzeile__flaeche { grid-template-columns: 1fr; }
}

/* Farbleitsystem — Streifen über dem Bild und Punkt in der Meta-Zeile.
   Nur die Themenkarte trägt das Leitsystem; die Kachel bleibt bewusst neutral,
   sie wirkt allein über Bild und weißes Titelkästchen. */
.is-abtei  .karte__streifen,
.is-abtei  .karte__punkt { background: var(--c-abtei); }
.is-kunst  .karte__streifen,
.is-kunst  .karte__punkt { background: var(--c-kunst); }
.is-kreuz  .karte__streifen,
.is-kreuz  .karte__punkt { background: var(--c-kreuz); }
.is-alltag .karte__streifen,
.is-alltag .karte__punkt { background: var(--c-alltag); }
.is-sonder .karte__streifen,
.is-sonder .karte__punkt { background: var(--c-sonder); }

.carousel-nav {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    justify-content: flex-end;
}

/* ── Einzelbild-Karussell ───────────────────────────────────────────────────
   Ein Bild zur Zeit, vollständig sichtbar (object-fit: contain) — bei
   Objektaufnahmen darf nichts angeschnitten werden. */
.einzelbild__lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 720px;
    margin-bottom: 36px;
}
/* Die Höhe setzt das Skript auf die der sichtbaren Slide (einzelbildAufbauen
   in liesborn.js) — sie wandert also mit und wird hier nur weich geführt.
   Ohne Skript bleibt sie automatisch, dann richtet sie sich nach der höchsten
   Slide; sichtbar ist in dem Fall ohnehin nur die erste. */
.einzelbild__buehne {
    overflow: hidden;
    transition: height .5s cubic-bezier(.6, .05, .2, 1);
}
.einzelbild__track {
    display: flex;
    /* Nicht strecken: Nur so hat jede Slide ihre natürliche Höhe, und nur die
       lässt sich messen. Mit dem Flex-Standard "stretch" wäre jede Slide so
       hoch wie die höchste — genau das, was hier vermieden werden soll. */
    align-items: flex-start;
    transition: transform .5s cubic-bezier(.6, .05, .2, 1);
    will-change: transform;
}
.einzelbild__slide {
    flex: 0 0 100%;
    margin: 0;
    min-width: 0;
}
.einzelbild__flaeche {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Bewusst immer weiß, auch auf Mint und Dunkel: Die Objektaufnahmen sind
       vor weißem Grund fotografiert, sonst steht das Motiv in einem Kasten
       anderer Farbe. */
    background: var(--paper);
}
.einzelbild--hoch .einzelbild__flaeche { aspect-ratio: 4 / 5; }
.einzelbild__flaeche img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.einzelbild__unterschrift {
    margin-top: 20px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.einzelbild__steuerung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 8px;
}
.einzelbild__steuerung[hidden] { display: none; }
.einzelbild__steuerung .carousel-nav { margin-top: 0; }

.einzelbild__punkte { display: flex; gap: 12px; }
.einzelbild__punkt {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ink);
    opacity: .3;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}
.einzelbild__punkt:hover { opacity: .6; }
.einzelbild__punkt.is-aktiv { opacity: 1; transform: scale(1.2); }

@media (max-width: 767px) {
    .einzelbild__steuerung { flex-direction: column; align-items: flex-start; }
}

/* ── Digitale Sammlungskarten ───────────────────────────────────────────────
   Große Blöcke mit eigener Farbfläche je Sammlungsbereich (samm-block im
   Entwurf). Jede Karte ist als Ganzes ein Link. */
.sammlungskarten__lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 720px;
    margin-bottom: 36px;
}

.sammlungskarte {
    display: grid;
    grid-template-columns: 5fr 7fr;
    min-height: 640px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.sammlungskarte + .sammlungskarte { margin-top: 40px; }
.sammlungskarte:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(42, 42, 38, .18);
    color: inherit;
}

/* Jede zweite Karte spiegelt sich — Bild links, Text rechts */
.sammlungskarte--gespiegelt { grid-template-columns: 7fr 5fr; }
.sammlungskarte--gespiegelt .sammlungskarte__text { order: 2; }
.sammlungskarte--gespiegelt .sammlungskarte__bild { order: 1; }

.sammlungskarte__text {
    position: relative;
    padding: 96px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sammlungskarte__ecke {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
}
.sammlungskarte--gespiegelt .sammlungskarte__ecke { left: auto; right: 0; }

.sammlungskarte__nummer {
    margin: 0 0 20px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sammlungskarte__titel {
    font-family: var(--serif);
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 0 0 24px;
}
.sammlungskarte__lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 440px;
}
.sammlungskarte__aktion { margin: 32px 0 0; }

.sammlungskarte__bild { position: relative; overflow: hidden; }
.sammlungskarte__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Kein Zoom beim Überfahren: Die Karte selbst reagiert bereits. Ein sich
   bewegendes Bild darüber war eine Bewegung zu viel — wie bei der
   Themenzeile (Wunsch der Redaktion, 15.09.2026). */

/* Farbleitsystem: helle Fläche, kräftige Ecke, gedeckte Nummernzeile */
.sammlungskarte.is-abtei  { background: var(--c-abtei-soft); }
.sammlungskarte.is-abtei  .sammlungskarte__ecke { background: var(--c-abtei); }
.sammlungskarte.is-abtei  .sammlungskarte__nummer { color: var(--c-abtei-deep); }
.sammlungskarte.is-kunst  { background: var(--c-kunst-soft); }
.sammlungskarte.is-kunst  .sammlungskarte__ecke { background: var(--c-kunst); }
.sammlungskarte.is-kunst  .sammlungskarte__nummer { color: var(--c-kunst-deep); }
.sammlungskarte.is-kreuz  { background: var(--c-kreuz-soft); }
.sammlungskarte.is-kreuz  .sammlungskarte__ecke { background: var(--c-kreuz); }
.sammlungskarte.is-kreuz  .sammlungskarte__nummer { color: var(--c-kreuz-deep); }
.sammlungskarte.is-alltag { background: var(--c-alltag-soft); }
.sammlungskarte.is-alltag .sammlungskarte__ecke { background: var(--c-alltag); }
.sammlungskarte.is-alltag .sammlungskarte__nummer { color: var(--c-alltag-deep); }
.sammlungskarte.is-sonder { background: var(--c-sonder-soft); }
.sammlungskarte.is-sonder .sammlungskarte__ecke { background: var(--c-sonder); }
.sammlungskarte.is-sonder .sammlungskarte__nummer { color: var(--c-sonder-deep); }

@media (max-width: 991px) {
    .sammlungskarte,
    .sammlungskarte--gespiegelt { grid-template-columns: 1fr; min-height: 0; }
    .sammlungskarte--gespiegelt .sammlungskarte__text,
    .sammlungskarte--gespiegelt .sammlungskarte__bild { order: 0; }
    .sammlungskarte--gespiegelt .sammlungskarte__ecke { left: 0; right: auto; }
    .sammlungskarte__text { padding: 48px 32px; }
    .sammlungskarte__bild { aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
    .sammlungskarte__text { padding: 32px 24px; }
}

/* ── Kachelreihe mit Reitern ────────────────────────────────────────────────
   Schaltflächenleiste, darunter je Reiter eine eigene Kachelreihe. */
.kachelgruppen__leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}
.kachelgruppen__leiste[hidden] { display: none; }

.kachelgruppen__knopf {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 12px 20px;
    border: 1.5px solid var(--rule-strong);
    background: transparent;
    color: var(--ink);
    border-radius: 0;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.kachelgruppen__knopf:hover { border-color: var(--ink); }
.kachelgruppen__knopf.is-aktiv {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Ohne Skript stehen alle Gruppen untereinander, jede mit Überschrift.
   Sobald das Skript übernimmt, verschwinden die Überschriften — die
   Schaltfläche benennt den Bereich dann bereits. */
.kachelgruppen__inhalt + .kachelgruppen__inhalt { margin-top: 56px; }
.kachelgruppen.is-interaktiv .kachelgruppen__kopf { display: none; }
.kachelgruppen.is-interaktiv .kachelgruppen__inhalt + .kachelgruppen__inhalt { margin-top: 0; }
.kachelgruppen__inhalt[hidden] { display: none; }

.seite--dunkel .kachelgruppen__knopf { color: var(--paper); }
.seite--dunkel .kachelgruppen__knopf:hover { border-color: var(--paper); }
.seite--dunkel .kachelgruppen__knopf.is-aktiv {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

/* ── Aufzählung untereinander ───────────────────────────────────────────────
   Vorbild ist die Zeitleiste auf museum.html: links die Einleitung, rechts die
   Einträge, getrennt durch feine Linien. */
.aufzaehlung--mit-einleitung {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 48px;
    align-items: start;
}
.aufzaehlung__einleitung {
    /* Bleibt beim Scrollen stehen, solange die Liste läuft */
    position: sticky;
    top: 32px;
}
.aufzaehlung__lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
}
.aufzaehlung__bild { margin-top: 28px; }
.aufzaehlung__bild img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.aufzaehlung__aktion { margin: 28px 0 0; }

.aufzaehlung__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aufzaehlungseintrag {
    border-top: 1px solid var(--rule-strong);
}
/* Das Raster sitzt auf der inneren Fläche, nicht auf dem <li>: Mit gesetztem
   Ziel ist diese Fläche ein <a>, und die ganze Zeile wird anklickbar. Die
   dritte Spalte ist "auto" — ohne Pfeil fällt sie auf null zusammen. */
.aufzaehlungseintrag__flaeche {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 32px;
    align-items: start;
    padding: 28px 0;
    text-decoration: none;
    color: inherit;
}
.aufzaehlungseintrag__pfeil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--rule-strong);
    border-radius: 999px;
    color: var(--ink);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
a.aufzaehlungseintrag__flaeche:hover .aufzaehlungseintrag__titel { color: var(--gold-deep); }
a.aufzaehlungseintrag__flaeche:hover .aufzaehlungseintrag__pfeil {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    transform: translateX(3px);
}
/* Erste und letzte Linie kräftiger — das rahmt die Liste */
.aufzaehlungseintrag:first-child { border-top-color: var(--ink); }
.aufzaehlungseintrag:last-child { border-bottom: 1px solid var(--ink); }

/* Linke Spalte: Zuordnung und Kennzeichnung untereinander. */
.aufzaehlungseintrag__spalte { display: block; }
.aufzaehlungseintrag__marke {
    display: block;
    font-family: var(--serif);
    font-size: 32px;
    line-height: 1.1;
    color: var(--gold-deep);
}
/* Steht eine Zuordnung darüber, rückt die Kennzeichnung etwas ab. */
.aufzaehlungseintrag__bereich + .aufzaehlungseintrag__marke { margin-top: 8px; }

/* Kleine Fassung der Kennzeichnung — dieselbe Anmutung wie die Zuordnung.
   Für Wörter wie „laufend" oder „abgeschlossen"; als 32px-Serifenzeile
   wirken die zu gewichtig. Im Entwurf heißt dieser Stil "mono", ist aber
   keine Monospace-Schrift, sondern dieselbe Inter Tight in Versalien. */
.aufzaehlung--marke-klein .aufzaehlungseintrag__marke {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.3;
}
/* Bei der kleinen Fassung braucht die linke Spalte weniger Platz. */
.aufzaehlung--marke-klein .aufzaehlungseintrag__flaeche { grid-template-columns: 120px minmax(0, 1fr) auto; }

/* Zuordnung aus dem Farbleitsystem — farbiger Punkt und Bereichsname,
   dieselbe Anmutung wie die Meta-Zeile der Themenkarte. */
.aufzaehlungseintrag__bereich {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.aufzaehlungseintrag__punkt {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    /* Ohne Zuordnung bliebe der Punkt unsichtbar — er wird nur gerendert,
       wenn eine Kategorie gesetzt ist. */
    background: var(--rule-strong);
}
.is-abtei  .aufzaehlungseintrag__punkt { background: var(--c-abtei); }
.is-kunst  .aufzaehlungseintrag__punkt { background: var(--c-kunst); }
.is-kreuz  .aufzaehlungseintrag__punkt { background: var(--c-kreuz); }
.is-alltag .aufzaehlungseintrag__punkt { background: var(--c-alltag); }
.is-sonder .aufzaehlungseintrag__punkt { background: var(--c-sonder); }
.aufzaehlungseintrag__titel {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}
.aufzaehlungseintrag__text p {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 620px;
}

.seite--dunkel .aufzaehlungseintrag:first-child { border-top-color: var(--paper); }
.seite--dunkel .aufzaehlungseintrag:last-child { border-bottom-color: var(--paper); }
.seite--dunkel .aufzaehlungseintrag__marke { color: var(--gold); }
.seite--dunkel .aufzaehlungseintrag__bereich { color: var(--paper); }
.seite--dunkel .aufzaehlungseintrag__titel { color: var(--paper); }

@media (max-width: 991px) {
    .aufzaehlung--mit-einleitung { grid-template-columns: 1fr; gap: 40px; }
    .aufzaehlung__einleitung { position: static; }
}
@media (max-width: 575px) {
    .aufzaehlungseintrag__flaeche,
    .aufzaehlung--marke-klein .aufzaehlungseintrag__flaeche { grid-template-columns: 1fr; gap: 8px; }
    .aufzaehlungseintrag__marke { font-size: 26px; }
    /* Der Pfeil rückt unter den Text statt eine eigene Spalte zu erzwingen. */
    .aufzaehlungseintrag__pfeil { margin-top: 12px; }
}

/* ── Icon-Infokacheln ───────────────────────────────────────────────────────
   Linie, Symbol, Überschrift, Text. Vorbild ist die Hausordnung auf
   besuch-service.html. */
.iconkacheln__lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 720px;
    margin-bottom: 36px;
}
.iconkacheln__raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
}
.iconkachel {
    border-top: 1px solid var(--ink);
    padding-top: 20px;
}
.iconkachel__symbol {
    display: block;
    color: var(--gold-deep);
    font-size: 20px;
    line-height: 1;
    margin-bottom: 16px;
}
/* Bild oben in der Kachel, das Symbol darunter */
.iconkachel__bild {
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: var(--radius);
}
.iconkachel__bild img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.iconkachel__titel {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}
.iconkachel__text {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
}
.iconkachel__hinweis {
    margin: 10px 0 0;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
}

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

/* Auf dunkler Seite: Linie und Symbol mitziehen */
.seite--dunkel .iconkachel { border-top-color: var(--paper); }
.seite--dunkel .iconkachel__symbol { color: var(--gold); }
.seite--dunkel .iconkachel__titel { color: var(--paper); }

/* ── Zitat ──────────────────────────────────────────────────────────────────
   Goldbalken links, Serifenschrift kursiv, Quellenzeile darunter. */
.zitat { margin: 0; }
.zitat__text {
    margin: 0;
    padding: 32px 40px;
    border: none;
    border-left: 3px solid var(--gold);
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.5;
    font-style: italic;
}
/* Anführungszeichen zentral gesetzt, nicht im Redaktionstext */
.zitat__text > *:first-child::before { content: "„"; }
.zitat__text > *:last-child::after { content: "“"; }
.zitat__text p + p { margin-top: 16px; }

.zitat__quelle {
    margin-top: 18px;
    padding-left: 43px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--muted);
}
.zitat__quelle::before { content: "— "; }

.zitat--mint {
    background: var(--mint);
    padding: 32px 24px;
    border-radius: var(--radius);
}
.zitat--dunkel {
    background: var(--ink);
    color: var(--paper);
    padding: 32px 24px;
    border-radius: var(--radius);
}
/* Das dunkle Gold verschwindet auf schwarzem Grund */
.zitat--dunkel .zitat__text { border-left-color: var(--gold); }
.zitat--dunkel .zitat__quelle { color: rgba(255, 255, 255, .7); }

@media (max-width: 767px) {
    .zitat__text { padding: 20px 24px; font-size: 19px; }
    .zitat__quelle { padding-left: 27px; }
    .zitat--mint,
    .zitat--dunkel { padding: 24px 16px; }
}

/* ── Text mit Bildkarussell ─────────────────────────────────────────────────
   Links Text, rechts das Karussell. Fläche wählbar wie bei der Infobox. */
/* Das Raster sitzt auf der Slide, nicht auf dem Element: Der Rahmen ist die
   Bühne des Karussells, jede Slide bringt Text und Bild nebeneinander mit. */
.bildtext__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: start;
}
.bildtext--bild-links .bildtext__bild { order: -1; }
.bildtext__titel {
    font-family: var(--serif);
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 16px;
}
.bildtext__bild figure { margin: 0; }
.bildtext__bild .einzelbild__flaeche { aspect-ratio: 4 / 5; }

/* „Über die volle Breite" (Feld Darstellung des Bildes = fluid).

   Die Bühne gibt ihr festes 4:5 und ihren hellen Grund auf, das Bild bestimmt
   die Höhe selbst und wird auf die Spaltenbreite gezogen. Damit verschwindet
   der helle Rand, den sonst jedes Bild bekommt, das kleiner oder anders
   proportioniert ist als die Bühne.

   Die drei Zeilen im Bild sind nicht wegzulassen: In der Vorgabe steht dort
   "max-width/max-height: 100%" mit "width: auto" — genau das lässt ein zu
   kleines Bild klein. Erst "width: 100%" zieht es auf.

   Die Selektoren tragen .bildtext__bild mit, damit sie (0,3,0) erreichen und
   die 4:5-Regel darüber sicher schlagen, unabhängig von der Reihenfolge. */
.bildtext--zuschnitt-fluid .bildtext__bild .einzelbild__flaeche {
    aspect-ratio: auto;
    background: none;
    display: block;
}
.bildtext--zuschnitt-fluid .bildtext__bild .einzelbild__flaeche img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
}

.bildtext--weiss { background: transparent; }
.bildtext--mint {
    background: var(--mint);
    padding: 48px 40px;
    border-radius: var(--radius);
}
.bildtext--dunkel {
    background: var(--ink);
    color: var(--paper);
    padding: 48px 40px;
    border-radius: var(--radius);
}

/* Fläche aus dem Farbleitsystem — Geometrie wie die Mintfassung, nur der
   helle Ton des Sammlungsbereichs. Wie beim Hero und bei der Infobox wird
   ".soft" gezeichnet, nicht die Grundfarbe. */
.bildtext--farbe {
    padding: 48px 40px;
    border-radius: var(--radius);
}
.bildtext--farbe-abtei  { background: var(--c-abtei-soft); }
.bildtext--farbe-kunst  { background: var(--c-kunst-soft); }
.bildtext--farbe-kreuz  { background: var(--c-kreuz-soft); }
.bildtext--farbe-alltag { background: var(--c-alltag-soft); }
.bildtext--farbe-sonder { background: var(--c-sonder-soft); }
.bildtext--farbe-grau   { background: var(--c-grau); }

.bildtext__inhalt {
    font-size: 17px;
    line-height: 1.7;
}
.bildtext__inhalt p + p { margin-top: 16px; }

/* Objektangabe — im Editor als Absatz-Stil wählbar */
.objektzeile {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-top: 24px;
}

/* Umkehrungen der dunklen Fläche — müssen hinter den Grundregeln stehen */
.bildtext--dunkel h1,
.bildtext--dunkel h2,
.bildtext--dunkel h3,
.bildtext--dunkel h4 { color: var(--paper); }
.bildtext--dunkel .eyebrow--gold { color: var(--gold); }
.bildtext--dunkel a { color: var(--paper); }
.bildtext--dunkel .objektzeile,
.bildtext--dunkel .einzelbild__unterschrift { color: rgba(255, 255, 255, .7); }
.bildtext--dunkel .einzelbild__punkt { background: var(--paper); }
.bildtext--dunkel .rundbutton { border-color: var(--paper); color: var(--paper); }
.bildtext--dunkel .rundbutton:hover { background: var(--paper); color: var(--ink); }
.bildtext--dunkel :focus-visible { outline-color: var(--gold); }

@media (max-width: 991px) {
    .bildtext__slide { grid-template-columns: 1fr; gap: 32px; }
    .bildtext--bild-links .bildtext__bild { order: 0; }
    .bildtext--mint,
    .bildtext--farbe,
    .bildtext--dunkel { padding: 32px 24px; }
}

/* ── Bilderslider ───────────────────────────────────────────────────────────
   Teilt sich Track, Wischen und Pfeile mit der Kachelreihe; eigen ist nur,
   dass die Kachel ein reines Bild ist. */
.bilderslider__lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 720px;
    margin-bottom: 36px;
}
.bilderslider__bild { margin: 0; }
.bilderslider__bild img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}
.bilderslider__bild figcaption {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
}

@media (max-width: 767px) {
    .kacheln--2 .kacheln__track,
    .kacheln--3 .kacheln__track { grid-template-columns: 1fr; }
    .kachel__label { font-size: 20px; top: 16px; left: 16px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Hero mit Eckdaten — Abschnittskopf einer Unterseite
   ─────────────────────────────────────────────────────────────────────────── */

.seitenhero__spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Fläche aus dem Farbleitsystem. Gezeichnet wird der helle Ton des Bereichs,
   nicht die Grundfarbe — die trägt hinter Fließtext zu kräftig auf. Maße wie
   bei der Infobox, damit farbige Flächen im Seitenlauf gleich wirken. */
.seitenhero--farbe {
    padding: 48px 40px;
    border-radius: var(--radius);
}
.seitenhero--farbe-abtei  { background: var(--c-abtei-soft); }
.seitenhero--farbe-kunst  { background: var(--c-kunst-soft); }
.seitenhero--farbe-kreuz  { background: var(--c-kreuz-soft); }
.seitenhero--farbe-alltag { background: var(--c-alltag-soft); }
.seitenhero--farbe-sonder { background: var(--c-sonder-soft); }
.seitenhero--farbe-grau   { background: var(--c-grau); }

/* Zwei Anpassungen innerhalb der Fläche:
   · Das freigestellte Bild steht sonst auf Mint — zwei Flächenfarben
     übereinander. Auf der Bereichsfläche bekommt es Papierweiß.
   · Der Bildnachweis in #787672 erreicht auf den hellen Tönen nur 3,3—3,9:1.
     Mit --muted sind es über 5:1. */
.seitenhero--farbe .seitenhero__bild--voll figure { background: var(--paper); }
.seitenhero--farbe .seitenhero__nachweis { color: var(--muted); }

@media (max-width: 767px) {
    .seitenhero--farbe { padding: 32px 20px; }
}

.seitenhero__bild figure { margin: 0; }

/* Vollständig gezeigtes Bild — für freigestellte Motive und Zeichnungen.
   Das Bild bleibt ganz und steht mittig auf einer Mintfläche; das Verhältnis
   bleibt 3:2, damit die Spalte neben dem Text gleich hoch bleibt wie bei
   einem beschnittenen Foto. */
.seitenhero__bild--voll figure {
    background: var(--mint);
    border-radius: var(--radius);
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    overflow: hidden;
}
.seitenhero__bild--voll img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
}
/* Der Nachweis säße sonst innerhalb der Mintfläche. */
.seitenhero__bild--voll .seitenhero__nachweis { margin-top: 12px; }

/* „Über die volle Breite": keine Fläche, kein festes Verhältnis — das Bild
   füllt die Spalte und bestimmt die Höhe selbst. Für Bilder, die weder
   beschnitten werden noch einen Rand bekommen sollen. */
.seitenhero__bild--fluid img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.seitenhero__bild img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
}
.seitenhero__nachweis {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: .06em;
    color: #787672;
}

.seitenhero__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 480px;
}
.seitenhero__lead p + p { margin-top: 18px; }

.seitenhero__eckdaten {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 36px 0 0;
    padding: 22px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule-strong);
}
.seitenhero__eckdaten dt {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.seitenhero__eckdaten dd {
    margin: 4px 0 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--ink);
}

@media (max-width: 767px) {
    .seitenhero__spalten { grid-template-columns: 1fr; gap: 28px; }
    .seitenhero__lead { max-width: none; }
    .seitenhero__eckdaten { gap: 24px 32px; }
    .seitenhero__eckdaten dd { font-size: 24px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Spalten-Container
   ─────────────────────────────────────────────────────────────────────────── */

.spalten {
    display: grid;
    gap: 32px;
}
.spalten--zwei { grid-template-columns: repeat(2, 1fr); }
.spalten--drei { grid-template-columns: repeat(3, 1fr); }

/* Jedes Inhaltselement bringt seinen eigenen Seitencontainer mit (.frame mit
   max-width und Innenabstand). Innerhalb einer Spalte muss der weg, sonst
   begrenzt er die Breite ein zweites Mal und setzt die Spalte ein. */
.spalte > .frame {
    max-width: none;
    padding: 0;
    margin: 0;
}
.spalte > .frame + .frame { margin-top: 32px; }

/* Das Karussell der Kachelreihe bricht sonst nach rechts aus dem Fenster aus —
   in einer Spalte ergibt das keinen Sinn. */
.spalte .kacheln--karussell .kacheln__track {
    margin-right: 0;
    padding-right: 0;
}
.spalte .kacheln--karussell .kachel { width: 78%; }

/* In schmalen Spalten wird aus dem dreispaltigen Kartenraster ein einspaltiges */
.spalten--drei .kartenraster { grid-template-columns: 1fr; }
.spalten--zwei .kartenraster { grid-template-columns: repeat(2, 1fr); }
.spalten--zwei .seitenhero__spalten,
.spalten--drei .seitenhero__spalten,
.spalten--zwei .infobox--mit-bild,
.spalten--drei .infobox--mit-bild { grid-template-columns: 1fr; }

/* Die Terminliste trägt ihren Seitencontainer selbst, weil TYPO3 Plugins ohne
   .frame ausliefert — in einer Spalte muss er weg wie bei .frame auch. Und die
   Einleitung steht dann über der Liste statt daneben; für zwei Spalten in
   einer Spalte ist kein Platz. */
.spalte .termine {
    max-width: none;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 28px;
}
.spalte .termine__einleitung { position: static; }
.spalte .termine__lead { max-width: none; }

@media (max-width: 767px) {
    .spalten { grid-template-columns: 1fr; gap: 40px; }
    .spalten--zwei .kartenraster { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Seitenlayout „Seite mit Rand rechts" (Templates/Page/Randrechts.html)
   Hauptinhalt 85 %, rechter Rand 15 %. Beide Spalten tragen zusätzlich
   .spalte — die Regeln der Spalten-Container oben nehmen den Elementen ihren
   eigenen Seitencontainer, den liefert hier .seitenraster einmal für beide.
   ─────────────────────────────────────────────────────────────────────────── */

.seitenraster {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
/* 85fr | 15fr ergibt nach Abzug des Abstands genau das Verhältnis 85 : 15
   (bis 16.09.2026: 75 : 25).
   minmax(0, …) verhindert, dass ein breites Element (Tabelle, Karussell)
   seine Spalte über das Verhältnis hinaus aufdrückt. */
.seitenraster--mit-rand {
    display: grid;
    grid-template-columns: minmax(0, 85fr) minmax(0, 15fr);
    gap: 48px;
    align-items: start;
}
/* Im Hauptinhalt derselbe Abstand wie auf einer normalen Seite, im Rand der
   engere der Spalten. Steht nach ".spalte > .frame + .frame" und gewinnt bei
   gleicher Spezifität über die Reihenfolge. */
.seitenraster__haupt > .frame + .frame { margin-top: 56px; }

/* Im schmalen Rand (bei voller Breite rund 175 px) ist für mehrspaltige
   Raster kein Platz — alles, was fest nebeneinander steht, wird einspaltig.
   Die Spezifität (0,2,0) schlägt auch die gespiegelten Varianten, die weiter
   oben stehen. Wer ein neues mehrspaltiges Element baut, ergänzt es hier. */
.seitenraster__rand .kartenraster,
.seitenraster__rand .kacheln--2 .kacheln__track,
.seitenraster__rand .kacheln--3 .kacheln__track,
.seitenraster__rand .seitenhero__spalten,
.seitenraster__rand .infobox--mit-bild,
.seitenraster__rand .iconkacheln__raster,
.seitenraster__rand .objektkarten__raster,
.seitenraster__rand .themenzeile__flaeche,
.seitenraster__rand .sammlungskarte,
.seitenraster__rand .aufzaehlung--mit-einleitung,
.seitenraster__rand .bildtext__slide,
.seitenraster__rand .akkordeon__inhalt--mit-bild,
.seitenraster__rand .spalten { grid-template-columns: 1fr; }
.seitenraster__rand .aufzaehlung__einleitung { position: static; }
/* Überschriften in voller Größe sprengen das schmale Viertel — im Rand eine
   Stufe kleiner, ganz gleich, welche Ebene die Redaktion wählt. */
.seitenraster__rand .elementkopf h1,
.seitenraster__rand .elementkopf h2 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; }
.seitenraster__rand .elementkopf h3 { font-size: 20px; }
.seitenraster__rand > .frame + .frame { margin-top: 40px; }
.seitenraster__rand .kacheln--karussell .kachel { width: 100%; }

@media (max-width: 991px) {
    .seitenraster--mit-rand { grid-template-columns: 1fr; gap: 56px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Akkordeon — aufklappbare Zeilen, ohne JavaScript
   ─────────────────────────────────────────────────────────────────────────── */

.akkordeon__lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 720px;
    margin-bottom: 28px;
}

/* Film im aufgeklappten Bereich. Das feste Seitenverhältnis verhindert, dass
   die Zeile beim Laden der Metadaten springt — ohne Höhenangabe im Markup
   kennt der Browser die Maße erst danach. */
.akkordeon__video {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
}
/* Gilt für alle drei Fälle: eigenes video-Tag des Kerns, iframe eines
   eingebetteten Videos und die Zustimmungsfläche von media2click davor. */
/* Eine Tonaufnahme ist eine Leiste, keine Fläche — kein Seitenverhältnis,
   kein dunkler Grund. */
.akkordeon__video--ton {
    background: none;
    border-radius: 0;
    overflow: visible;
}
.akkordeon__video--ton audio {
    display: block;
    width: 100%;
}
.akkordeon__video video,
.akkordeon__video iframe,
.akkordeon__video .media2click-placeholder,
.akkordeon__video img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border: 0;
}

.akkordeon__eintrag { border-top: 1px solid var(--rule-strong); }
.akkordeon__eintrag:last-of-type { border-bottom: 1px solid var(--rule-strong); }

.akkordeon__kopf {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
}
/* Das Standard-Dreieck der Browser entfernen — wir zeichnen ein eigenes Zeichen */
.akkordeon__kopf::-webkit-details-marker { display: none; }
.akkordeon__kopf::marker { content: ""; }

.akkordeon__bereich {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.akkordeon__titel {
    display: block;
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.35;
    margin-top: 4px;
    color: var(--ink);
}
.akkordeon__eintrag[open] .akkordeon__titel,
.akkordeon__kopf:hover .akkordeon__titel { color: var(--gold-deep); }

/* Plus, das im geöffneten Zustand zum Minus wird */
.akkordeon__zeichen {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
.akkordeon__zeichen::before,
.akkordeon__zeichen::after {
    content: "";
    position: absolute;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
}
.akkordeon__zeichen::before { top: 6px; left: 0; width: 14px; height: 2px; }
.akkordeon__zeichen::after { top: 0; left: 6px; width: 2px; height: 14px; }
.akkordeon__eintrag[open] .akkordeon__zeichen::after { transform: scaleY(0); }

.akkordeon__inhalt {
    font-size: 15px;
    line-height: 1.6;
}

/* Mit Bild: Bild links, Text rechts. Ohne Bild bleibt der Text über die
   volle Breite — deshalb hängt das Raster an der Modifier-Klasse. */
.akkordeon__inhalt--mit-bild {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 28px;
    align-items: start;
}
.akkordeon__bild figure { margin: 0; }
.akkordeon__bild img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.akkordeon__bildunterschrift {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
}
.akkordeon--dunkel .akkordeon__bildunterschrift { color: rgba(255, 255, 255, .65); }

@media (max-width: 767px) {
    .akkordeon__inhalt--mit-bild { grid-template-columns: 1fr; gap: 20px; }
}

/* Mint — der Kasten aus dem Entwurf */
.akkordeon--mint .akkordeon__inhalt {
    background: var(--mint);
    color: var(--ink);
    padding: 24px 28px;
    margin-bottom: 16px;
    border-radius: var(--radius);
}
.akkordeon--mint .akkordeon__inhalt a { color: var(--ink); }

/* Weiß — kein Kasten, der Text steht direkt unter der Zeile.
   Die Trennlinien des Akkordeons gliedern hier schon genug. */
.akkordeon--weiss .akkordeon__inhalt {
    background: transparent;
    padding: 0 0 20px;
    max-width: 720px;
}

/* Dunkel — heller Text auf dunkler Fläche */
.akkordeon--dunkel .akkordeon__inhalt {
    background: var(--ink);
    color: var(--paper);
    padding: 24px 28px;
    margin-bottom: 16px;
    border-radius: var(--radius);
}
.akkordeon--dunkel .akkordeon__inhalt a { color: var(--paper); }
.akkordeon--dunkel .akkordeon__inhalt :focus-visible { outline-color: var(--gold); }

@media print {
    /* Im Druck alles offen zeigen — sonst fehlt der Inhalt auf dem Papier */
    .akkordeon__eintrag > .akkordeon__inhalt { display: block !important; }
    .akkordeon__zeichen { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Infobox — hervorgehobener Kasten auf Mintfläche
   ─────────────────────────────────────────────────────────────────────────── */

.infobox { color: var(--ink); }

/* Hervorgehoben: Kasten auf Mintfläche */
.infobox--mint {
    background: var(--mint);
    padding: 48px 40px;
    border-radius: var(--radius);
}

/* Fläche aus dem Farbleitsystem — dieselbe Geometrie wie die Mintfassung,
   nur der helle Ton des Sammlungsbereichs statt Mint. Gezeichnet wird
   ".soft" und nicht die Grundfarbe: Die trägt hinter Fließtext zu kräftig
   auf und ist im Leitsystem den Markern vorbehalten. */
.infobox--farbe {
    padding: 48px 40px;
    border-radius: var(--radius);
}
.infobox--farbe-abtei  { background: var(--c-abtei-soft); }
.infobox--farbe-kunst  { background: var(--c-kunst-soft); }
.infobox--farbe-kreuz  { background: var(--c-kreuz-soft); }
.infobox--farbe-alltag { background: var(--c-alltag-soft); }
.infobox--farbe-sonder { background: var(--c-sonder-soft); }
.infobox--farbe-grau   { background: var(--c-grau); }

/* Zurückhaltend: weißer Grund, darunter eine feine Trennlinie */
.infobox--weiss {
    background: transparent;
    padding: 0 0 40px;
    border-bottom: 1px solid var(--rule-strong);
}

.infobox--mit-bild {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
/* "Bild links" — das Bild steht im Markup hinter dem Text und wird umsortiert */
.infobox--bild-links .infobox__bild { order: -1; }

.infobox__inhalt {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.7;
}
.infobox__inhalt p + p { margin-top: 16px; }
/* Mehrere Schaltflächen in einem Absatz — die Redaktion setzt sie über die
   Stil-Auswahl des Editors hintereinander. Ohne die Abstände kleben sie beim
   Umbruch aufeinander; das Leerzeichen zwischen zwei <a> trägt nur waagerecht. */
.infobox__inhalt .btn { margin: 4px 8px 4px 0; }
.infobox__aktion { margin: 32px 0 0; }

.infobox__bild figure { margin: 0; }
.infobox__bild img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.infobox__bildunterschrift {
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Mint- und Weißfläche verlangen durchgehend dunkle Schrift, auch bei Links */
.infobox a { color: var(--ink); }
.infobox .btn {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    text-decoration: none;
}
.infobox .btn:hover {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
/* Die helle Schaltfläche aus der Stil-Auswahl des Editors. Ohne diese Regel
   gewinnt ".infobox .btn" darüber (0,2,0 gegen 0,1,0) und färbt sie dunkel —
   im Editor wählbar, im Frontend ohne Wirkung. Muss NACH den Regeln oben
   stehen: gleiche Spezifität, es entscheidet die Reihenfolge. */
.infobox .btn--ghost {
    background: transparent;
    color: var(--ink);
}
.infobox .btn--ghost:hover {
    background: var(--ink);
    color: var(--paper);
}

/* Dunkle Fläche — muss nach den Regeln oben stehen: gleiche Spezifität,
   es entscheidet die Reihenfolge. */
.infobox--dunkel {
    background: var(--ink);
    color: var(--paper);
    padding: 48px 40px;
    border-radius: var(--radius);
}
.infobox--dunkel h1,
.infobox--dunkel h2,
.infobox--dunkel h3,
.infobox--dunkel h4 { color: var(--paper); }
/* Das dunkle Gold wäre auf Schwarz nicht mehr lesbar */
.infobox--dunkel .eyebrow--gold { color: var(--gold); }
.infobox--dunkel .infobox__bildunterschrift { color: rgba(255, 255, 255, .65); }
.infobox--dunkel a { color: var(--paper); }
.infobox--dunkel .btn {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}
.infobox--dunkel .btn:hover {
    background: transparent;
    color: var(--paper);
    border-color: var(--paper);
}
.infobox--dunkel :focus-visible { outline-color: var(--gold); }

@media (max-width: 767px) {
    .infobox--mint,
    .infobox--dunkel { padding: 32px 24px; }
    .infobox--weiss { padding-bottom: 28px; }
    .infobox--mit-bild { grid-template-columns: 1fr; gap: 28px; }
    .infobox--bild-links .infobox__bild { order: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Karten — gemeinsame Grundlage von Themen- und Verteilerkarten.
   Unterschied ist nur das Bildformat: Themenkarte 4:5 hoch, Verteilerkarte 4:3.
   ─────────────────────────────────────────────────────────────────────────── */

.kartenraster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
}

.verteilerkarten__lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 720px;
    margin-bottom: 36px;
}

.karte--verteiler .karte__bild { aspect-ratio: 4 / 3; }

.karte__mehr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}
.karte__mehr svg { transition: transform .2s ease; }
a.karte__flaeche:hover .karte__mehr { color: var(--gold-deep); }
a.karte__flaeche:hover .karte__mehr svg { transform: translateX(3px); }

.karte__flaeche {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .35s ease;
}
a.karte__flaeche { cursor: pointer; }
a.karte__flaeche:hover { transform: translateY(-4px); }

.karte__bild {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper-2);
}
.karte__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
a.karte__flaeche:hover .karte__bild img { transform: scale(1.03); }

.karte__streifen {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 2;
}

.karte__text { padding: 16px 0 0; }

.karte__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.karte__punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.karte__titel {
    font-family: var(--serif);
    font-size: 24px;
    line-height: 1.18;
    margin: 6px 0 0;
    transition: color .2s ease;
}
a.karte__flaeche:hover .karte__titel { color: var(--gold-deep); }

.karte__lead {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
}

.karte__nachweis {
    margin: 10px 0 0;
    font-size: 10px;
    letter-spacing: .06em;
    color: #787672;
}

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

/* ───────────────────────────────────────────────────────────────────────────
   Farblegende unter dem Google-Kalender

   Die Farben selbst kommen aus main.min.css von EXT:me_google_calendar
   (.fc-green, .fc-red …), damit Legende und Kalender nicht auseinanderlaufen.
   Hier steht nur die Anordnung.

   Die Selektoren sind zweistufig (.kalenderlegende .fc-event), weil die CSS
   des Kalenders NACH liesborn.css geladen wird — eine reine .fc-event-Regel
   verlöre gegen sie.
   ─────────────────────────────────────────────────────────────────────────── */

.kalenderlegende {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.kalenderlegende .fc-event {
    /* Der Kalender setzt display:block und keine Breite — in einer schmalen
       Spalte brach der Text dadurch mitten im Wort um. */
    display: inline-block;
    padding: 5px 12px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────────────
   Objektkarten — Sammlungsobjekte
   Vorbild sind „Die Werke" auf neuerwerbungen.html. Der Unterschied zu allen
   anderen Karten: Die Abbildung wird NICHT beschnitten. Ein Holzschnitt oder
   eine Medaille darf nicht angeschnitten werden, deshalb liegt das Bild
   vollständig auf einer Bühne mit festem Verhältnis.
   ─────────────────────────────────────────────────────────────────────────── */

.objektkarten__lead {
    max-width: 720px;
    margin: 0 0 36px;
    color: var(--ink-2);
}
.objektkarten__raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 24px;
}

.objektkarte__buehne {
    /* Getönte Fläche, damit freigestellte Objekte einen Rand bekommen und
       hochformatige neben querformatigen nicht ins Leere fallen. */
    background: var(--paper-2);
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}
.objektkarte__buehne img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.objektkarte__angaben {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
}
/* Die Erwerbungsart als Marke — der einzige runde Baustein neben den
   Filterknöpfen der Terminliste, so zeigt es der Entwurf. */
.objektkarte__art {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1.5px solid var(--rule-strong);
    border-radius: 999px;
    color: var(--gold-deep);
    white-space: nowrap;
}
.objektkarte__meta {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.objektkarte__titel {
    margin: 12px 0 0;
    font-size: 24px;
    line-height: 1.3;
    text-wrap: balance;
}
.objektkarte__urheber {
    margin: 6px 0 0;
    font-size: 16px;
    color: var(--ink-2);
}
.objektkarte__text {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
}

@media (max-width: 991px) {
    .objektkarten__raster { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .objektkarten__raster { grid-template-columns: 1fr; gap: 32px; }
}

/* In einer Spalte des Spalten-Containers bleibt für drei Objekte kein Platz. */
.spalten--zwei .objektkarten__raster { grid-template-columns: repeat(2, 1fr); }
.spalten--drei .objektkarten__raster { grid-template-columns: 1fr; }

/* Dunkle Seite: Die Bühne muss hell bleiben, sonst verschwinden freigestellte
   Objekte auf dunklem Grund. */
.seite--dunkel .objektkarte__buehne { background: var(--paper-2); }

/* ───────────────────────────────────────────────────────────────────────────
   Terminliste — Nachrichtenliste von EXT:news
   Vorbild ist „Veranstaltungen & Termine" auf home-a.jsx: links eine Spalte,
   die beim Scrollen stehen bleibt, rechts die Termine als Zeilen.

   Der Seitencontainer sitzt hier am Element selbst und nicht auf .frame:
   TYPO3 rendert Extbase-Plugins ohne den Rahmen von fluid_styled_content.
   ─────────────────────────────────────────────────────────────────────────── */

.termine {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
    align-items: start;
}
.termine__einleitung {
    position: sticky;
    top: 32px;
}
.termine__titel { margin-top: 14px; }
.termine__lead {
    margin-top: 18px;
    max-width: 360px;
    color: var(--ink-2);
}
.termine__aktion { margin: 36px 0 0; }
/* Die zweite Schaltfläche steht direkt unter der ersten, nicht daneben —
   deshalb der deutlich kleinere Abstand nach oben. */
.termine__aktion--zweite { margin-top: 12px; }

.termine__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
.termine__filter[hidden] { display: none; }
.termine__knopf {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 14px;
    /* Der einzige runde Baustein des Systems — so zeigt es der Entwurf.
       Schaltflächen (.btn) bleiben dagegen eckig. */
    border-radius: 999px;
    border: 1.5px solid var(--rule-strong);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.termine__knopf:hover { border-color: var(--ink); color: var(--ink); }
.termine__knopf.is-aktiv {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.termine__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Leermeldung beider Darstellungen der Nachrichtenliste. */
.termine__leer,
.themenkarten__leer {
    padding: 28px 0;
    border-top: 1px solid var(--ink);
    color: var(--ink-2);
    margin: 0;
}
.termine__leer[hidden] { display: none; }

.termin { border-top: 1px solid var(--rule-strong); }
/* Erste und letzte Linie kräftiger — der Block bekommt dadurch eine Kante. */
.termin:first-child { border-top: 1px solid var(--ink); }
.termine__liste .termin:last-child { border-bottom: 1px solid var(--ink); }
.termin[hidden] { display: none; }

.termin__flaeche {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 32px;
    align-items: start;
    padding: 28px 0;
    text-decoration: none;
    color: var(--ink-2);
}
.termin__datum {
    border-right: 1px solid var(--rule-strong);
    padding-right: 16px;
}
.termin__monat,
.termin__wochentag,
.termin__bereich,
.termin__zeile {
    display: block;
    font-family: var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--ink-2);
}
.termin__tag {
    display: block;
    font-family: var(--serif);
    font-size: 44px;
    line-height: 1;
    margin-top: 6px;
    color: var(--ink);
}
.termin__wochentag {
    font-size: 10px;
    letter-spacing: .08em;
    margin-top: 8px;
}
.termin__text { display: block; }
.termin__titel {
    display: block;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 8px;
    max-width: 540px;
    color: var(--ink);
    text-wrap: balance;
}
.termin__zeile {
    letter-spacing: .04em;
    text-transform: none;
    margin-top: 10px;
    max-width: 540px;
}
.termin__pfeil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--rule-strong);
    border-radius: 999px;
    color: var(--ink);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.termin__flaeche:hover .termin__titel { color: var(--gold-deep); }
.termin__flaeche:hover .termin__pfeil {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    transform: translateX(3px);
}

/* Blätterung. Das Markup kommt unverändert aus EXT:news (ul.f3-widget-
   paginator) — nur überschrieben sind die Listen-Templates, nicht dieses
   Partial. Ohne die Regeln hier stünden dort Aufzählungspunkte.

   Gilt für beide Darstellungen der Nachrichtenliste: .termine (Zeilen mit
   Datumsblock) und .themenkarten (Kartenraster, Template-Layout 100). */
.termine .f3-widget-paginator,
.themenkarten .f3-widget-paginator {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}
.termine .f3-widget-paginator li,
.themenkarten .f3-widget-paginator li {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
}
.termine .f3-widget-paginator li a,
.termine .f3-widget-paginator li.current,
.themenkarten .f3-widget-paginator li a,
.themenkarten .f3-widget-paginator li.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1.5px solid var(--rule-strong);
    text-decoration: none;
    color: var(--ink-2);
}
.termine .f3-widget-paginator li a:hover,
.themenkarten .f3-widget-paginator li a:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.termine .f3-widget-paginator li.current,
.themenkarten .f3-widget-paginator li.current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

@media (max-width: 991px) {
    .termine { grid-template-columns: 1fr; gap: 32px; }
    /* Ohne zweite Spalte gibt es nichts, woran der Kasten kleben könnte. */
    .termine__einleitung { position: static; }
    .termine__lead { max-width: none; }
}
@media (max-width: 767px) {
    .termine { padding: 0 20px; }
    .termin__flaeche { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
    .termin__tag { font-size: 34px; }
    .termin__titel { font-size: 21px; }
    /* Der Pfeil rückt unter den Text, statt eine dritte Spalte zu erzwingen. */
    .termin__pfeil { grid-column: 2; justify-self: start; margin-top: 14px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Dunkle Seite — Backend-Layout "Dunkle Seite (Digitale Sammlung)"
   Die Klasse setzt page.bodyTagCObject aus dem Backend-Layout.

   Die Grundlage sind umdefinierte Tokens statt einer langen Liste einzelner
   Regeln: --ink-2, --muted, --rule und --rule-strong werden im Stylesheet
   ausschließlich für Text und Linien verwendet, nie als Fläche — sie lassen
   sich deshalb gefahrlos umkehren. --ink bleibt unangetastet, weil daran
   zwölf Flächen hängen (Schaltflächen, Punkte, Social-Icons …).
   ─────────────────────────────────────────────────────────────────────────── */

.seite--dunkel {
    --ink-2: rgba(255, 255, 255, .78);
    --muted: rgba(255, 255, 255, .60);
    --rule: rgba(255, 255, 255, .12);
    --rule-strong: rgba(255, 255, 255, .26);

    background: var(--ink);
    color: var(--paper);
}

/* Kopf und Fuß bleiben hell — dort gelten wieder die normalen Werte */
.seite--dunkel .site-head,
.seite--dunkel .site-foot {
    --ink-2: #2A2A26;
    --muted: #55554F;
    --rule: #2A2A260F;
    --rule-strong: #2A2A2622;
    color: var(--ink);
}

.seite--dunkel h1,
.seite--dunkel h2,
.seite--dunkel h3,
.seite--dunkel h4,
.seite--dunkel h5,
.seite--dunkel h6 { color: var(--paper); }
.seite--dunkel .site-head h1,
.seite--dunkel .site-head h2,
.seite--dunkel .site-foot h1,
.seite--dunkel .site-foot h2 { color: var(--ink); }

.seite--dunkel main a { color: var(--paper); }
.seite--dunkel main a:hover { color: var(--gold); }
/* Das dunkle Gold ist auf Schwarz nicht mehr lesbar: --gold-deep kommt dort
   nur auf 3,07:1 und verfehlt die 4,5:1 der WCAG-Stufe AA. Auf der dunklen
   Fläche gilt deshalb --gold (#B89766) mit 5,25:1.

   Bis zum 07.09.2026 stand hier der hellere Ton --gold-2 (8,45:1). Er ist
   auf Wunsch entfallen: ein Gold im ganzen Haus statt zwei. Der Kontrast
   bleibt über der Stufe AA, auch für Fokusrahmen und Linien, die nach
   SC 1.4.11 nur 3:1 brauchen.

   Das betrifft jede Goldstelle, die direkt auf der Seitenfläche steht —
   nicht die in Kopf, Fuß oder auf einer eigenen hellen Fläche; dort bleibt
   --gold-deep richtig. */
.seite--dunkel main .eyebrow--gold,
.seite--dunkel main .akkordeon__bereich { color: var(--gold); }
.seite--dunkel main :focus-visible { outline-color: var(--gold); }

/* Auch die Hover-Farben, sonst wird die Zeile beim Überfahren dunkler statt heller */
.seite--dunkel .akkordeon__eintrag[open] .akkordeon__titel,
.seite--dunkel .akkordeon__kopf:hover .akkordeon__titel,
.seite--dunkel a.karte__flaeche:hover .karte__titel,
.seite--dunkel a.karte__flaeche:hover .karte__mehr { color: var(--gold); }

/* Schaltflächen kehren um */
.seite--dunkel main .btn {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}
.seite--dunkel main .btn:hover {
    background: transparent;
    color: var(--paper);
    border-color: var(--paper);
}
.seite--dunkel main .btn--ghost {
    background: transparent;
    color: var(--paper);
}
.seite--dunkel main .btn--ghost:hover {
    background: var(--paper);
    color: var(--ink);
}
.seite--dunkel .rundbutton { border-color: var(--paper); color: var(--paper); }
.seite--dunkel .rundbutton:hover { background: var(--paper); color: var(--ink); }
.seite--dunkel .rundbutton[disabled] {
    color: rgba(255, 255, 255, .35);
    border-color: rgba(255, 255, 255, .25);
}

/* Bausteine, die ihre Textfarbe fest gesetzt haben */
.seite--dunkel .karte__titel,
.seite--dunkel .karte__mehr,
.seite--dunkel .akkordeon__titel,
.seite--dunkel .seitenhero__eckdaten dd { color: var(--paper); }
.seite--dunkel .karte__nachweis { color: rgba(255, 255, 255, .6); }
.seite--dunkel .akkordeon__zeichen::before,
.seite--dunkel .akkordeon__zeichen::after { background: var(--paper); }
.seite--dunkel .einzelbild__punkt { background: var(--paper); }

/* Bedienelemente eines Karussells, das auf EIGENER heller Fläche steht.
   Die beiden Regeln oben hellen Pfeile und Punkte für die dunkle Seite auf —
   auf der weißen oder mintfarbenen Fläche des Bild-Text-Sliders wären sie
   damit unsichtbar (weiß auf weiß). Eine Klasse mehr genügt, um sie
   zurückzuholen: 0,3,0 gegen 0,2,0.
   Der umgekehrte Fall — dunkle Fläche auf heller Seite — ist bei
   ".bildtext--dunkel .rundbutton" schon abgedeckt. */
.seite--dunkel .bildtext--weiss .rundbutton,
.seite--dunkel .bildtext--mint .rundbutton,
.seite--dunkel .bildtext--farbe .rundbutton {
    border-color: var(--ink);
    color: var(--ink);
}
.seite--dunkel .bildtext--weiss .rundbutton:hover,
.seite--dunkel .bildtext--mint .rundbutton:hover,
.seite--dunkel .bildtext--farbe .rundbutton:hover {
    background: var(--ink);
    color: var(--paper);
}
.seite--dunkel .bildtext--weiss .rundbutton[disabled],
.seite--dunkel .bildtext--mint .rundbutton[disabled],
.seite--dunkel .bildtext--farbe .rundbutton[disabled] {
    color: rgba(42, 42, 38, .35);
    border-color: rgba(42, 42, 38, .25);
    background: transparent;
}
.seite--dunkel .bildtext--weiss .einzelbild__punkt,
.seite--dunkel .bildtext--mint .einzelbild__punkt,
.seite--dunkel .bildtext--farbe .einzelbild__punkt { background: var(--ink); }
.seite--dunkel .bildtext--weiss .einzelbild__unterschrift,
.seite--dunkel .bildtext--mint .einzelbild__unterschrift,
.seite--dunkel .bildtext--farbe .einzelbild__unterschrift { color: var(--muted); }
.seite--dunkel .seitenhero__eckdaten { border-top-color: var(--paper); }
.seite--dunkel .frame th { border-bottom-color: var(--paper); }
.seite--dunkel .kachel__bild,
.seite--dunkel .karte__bild { background: rgba(255, 255, 255, .08); }

/* Elemente mit eigener heller Fläche behalten dort dunkle Schrift.
   Das gilt für Mint wie für Weiß — die Auswahl der Redaktion bestimmt die
   Fläche, nicht die Seite. */
.seite--dunkel .seitenhero--farbe,
.seite--dunkel .infobox--mint,
.seite--dunkel .infobox--weiss,
.seite--dunkel .infobox--farbe,
.seite--dunkel .akkordeon--mint .akkordeon__inhalt,
.seite--dunkel .akkordeon--weiss .akkordeon__inhalt,
.seite--dunkel .bildtext--mint,
.seite--dunkel .bildtext--weiss,
.seite--dunkel .bildtext--farbe,
.seite--dunkel .zitat--mint,
.seite--dunkel .zitat--weiss {
    --ink-2: #2A2A26;
    --muted: #55554F;
    --rule: #2A2A260F;
    --rule-strong: #2A2A2622;
    color: var(--ink);
}
.seite--dunkel .infobox--mint h2,
.seite--dunkel .infobox--weiss h2,
.seite--dunkel .infobox--farbe h2,
.seite--dunkel .bildtext--mint h2,
.seite--dunkel .bildtext--mint h3,
.seite--dunkel .bildtext--weiss h2,
.seite--dunkel .bildtext--weiss h3,
.seite--dunkel .bildtext--farbe h2,
.seite--dunkel .bildtext--farbe h3 { color: var(--ink); }
.seite--dunkel .infobox--mint .eyebrow--gold,
.seite--dunkel .infobox--weiss .eyebrow--gold,
.seite--dunkel .infobox--farbe .eyebrow--gold,
.seite--dunkel .bildtext--mint .eyebrow--gold,
.seite--dunkel .bildtext--weiss .eyebrow--gold,
.seite--dunkel .bildtext--farbe .eyebrow--gold { color: var(--gold-deep); }
.seite--dunkel .infobox--mint a,
.seite--dunkel .infobox--weiss a,
.seite--dunkel .infobox--farbe a,
.seite--dunkel .bildtext--mint a,
.seite--dunkel .bildtext--weiss a,
.seite--dunkel .bildtext--farbe a { color: var(--ink); }

/* Der Hero mit Bereichsfläche zieht zwei fest gesetzte Farben oben zurück.
   Beide brauchen eine Klasse mehr als das Gegenstück (0,3,1 gegen 0,2,1) —
   sonst stünde die Serifenzeile der Eckdaten weiß auf Pastell. */
.seite--dunkel .seitenhero--farbe .seitenhero__eckdaten dd { color: var(--ink); }
.seite--dunkel .seitenhero--farbe .seitenhero__eckdaten { border-top-color: var(--ink); }

/* Digitale Sammlungskarten bringen ihre eigene Pastellfläche mit und bleiben
   deshalb auch auf dunkler Seite dunkel beschriftet. Der Link-Selektor braucht
   hier mehr Spezifität als ".seite--dunkel main a".

   Die dritte Zeile ist für Karten OHNE Ziel: Die rendert das Template als div
   (siehe Sammlungskarten.html), auf das kein a-Selektor greift. Sie trägt
   "main" mit, damit sie die allgemeine Umkehrung der Tokens sicher schlägt. */
.seite--dunkel main a.sammlungskarte,
.seite--dunkel main a.sammlungskarte:hover,
.seite--dunkel main div.sammlungskarte {
    --ink-2: #2A2A26;
    --muted: #55554F;
    color: var(--ink);
}
.seite--dunkel .sammlungskarte__titel { color: var(--ink); }
.seite--dunkel main .sammlungskarte .btn {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Dasselbe für jede Schaltfläche, die auf einer eigenen hellen Fläche steht:
   ".seite--dunkel main .btn" (0,2,1) schlägt ".infobox .btn" (0,2,0) und würde
   sie umkehren — die gefüllte Fassung wäre hell auf Mint, die helle Fassung
   sogar weiße Schrift auf Mint. Die Fläche entscheidet, nicht die Seite. */
.seite--dunkel main .infobox--mint .btn,
.seite--dunkel main .infobox--weiss .btn,
.seite--dunkel main .infobox--farbe .btn,
.seite--dunkel main .bildtext--mint .btn,
.seite--dunkel main .bildtext--weiss .btn,
.seite--dunkel main .bildtext--farbe .btn,
.seite--dunkel main .akkordeon--mint .btn,
.seite--dunkel main .akkordeon--weiss .btn {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.seite--dunkel main .infobox--mint .btn:hover,
.seite--dunkel main .infobox--weiss .btn:hover,
.seite--dunkel main .infobox--farbe .btn:hover,
.seite--dunkel main .bildtext--mint .btn:hover,
.seite--dunkel main .bildtext--weiss .btn:hover,
.seite--dunkel main .bildtext--farbe .btn:hover,
.seite--dunkel main .akkordeon--mint .btn:hover,
.seite--dunkel main .akkordeon--weiss .btn:hover {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.seite--dunkel main .infobox--mint .btn--ghost,
.seite--dunkel main .infobox--weiss .btn--ghost,
.seite--dunkel main .infobox--farbe .btn--ghost,
.seite--dunkel main .bildtext--mint .btn--ghost,
.seite--dunkel main .bildtext--weiss .btn--ghost,
.seite--dunkel main .bildtext--farbe .btn--ghost,
.seite--dunkel main .akkordeon--mint .btn--ghost,
.seite--dunkel main .akkordeon--weiss .btn--ghost {
    background: transparent;
    color: var(--ink);
}
.seite--dunkel main .infobox--mint .btn--ghost:hover,
.seite--dunkel main .infobox--weiss .btn--ghost:hover,
.seite--dunkel main .infobox--farbe .btn--ghost:hover,
.seite--dunkel main .bildtext--mint .btn--ghost:hover,
.seite--dunkel main .bildtext--weiss .btn--ghost:hover,
.seite--dunkel main .bildtext--farbe .btn--ghost:hover,
.seite--dunkel main .akkordeon--mint .btn--ghost:hover,
.seite--dunkel main .akkordeon--weiss .btn--ghost:hover {
    background: var(--ink);
    color: var(--paper);
}

/* "Weiß" heißt auf einer dunklen Seite eine wirklich weiße Fläche.
   Auf einer hellen Seite bleibt es die zurückhaltende Fassung ohne Kasten —
   dort wäre ein weißer Kasten auf weißem Grund ohnehin unsichtbar. */
.seite--dunkel .infobox--weiss,
.seite--dunkel .bildtext--weiss {
    background: var(--paper);
    padding: 48px 40px;
    border-bottom: none;
    border-radius: var(--radius);
}
.seite--dunkel .zitat--weiss {
    background: var(--paper);
    padding: 32px 24px;
    border-radius: var(--radius);
}
.seite--dunkel .akkordeon--weiss .akkordeon__inhalt {
    background: var(--paper);
    padding: 24px 28px;
    margin-bottom: 16px;
    border-radius: var(--radius);
}

@media (max-width: 767px) {
    .seite--dunkel .infobox--weiss,
    .seite--dunkel .bildtext--weiss { padding: 32px 24px; }
    .seite--dunkel .zitat--weiss { padding: 24px 16px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Bild vergrößern
   Bewusst ohne Fremdbibliothek — dieselbe Linie wie beim übrigen JavaScript.
   ─────────────────────────────────────────────────────────────────────────── */

.ist-vergroesserbar { cursor: zoom-in; }

.vergroesserung {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(42, 42, 38, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
}
.vergroesserung[hidden] { display: none; }

.vergroesserung__inhalt {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.vergroesserung__inhalt img {
    max-width: 100%;
    /* Platz für die Bildunterschrift lassen */
    max-height: calc(90vh - 60px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius);
}
.vergroesserung__inhalt figcaption {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    letter-spacing: .06em;
    text-align: center;
    max-width: 60ch;
}
.vergroesserung__inhalt figcaption[hidden] { display: none; }

.vergroesserung__zu {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--paper);
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}
.vergroesserung__zu:hover { background: var(--paper); color: var(--ink); }
.vergroesserung :focus-visible { outline-color: var(--gold); }

/* Seite darunter nicht mitscrollen lassen */
body.hat-vergroesserung { overflow: hidden; }

/* ───────────────────────────────────────────────────────────────────────────
   Suche
   Overlay und Ergebnisseite nach design/suche.jsx. Die Treffer kommen aus
   EXT:ke_search (Templates in Resources/Private/Extensions/KeSearch/); das
   Overlay übernimmt sie von der Ergebnisseite, deshalb gelten die Klassen
   .suchfeld, .suche__* und .suchtreffer an beiden Stellen gleich.
   ─────────────────────────────────────────────────────────────────────────── */

/* Nur für Screenreader — hier für die Ansage der Trefferzahl */
.visuell-verborgen {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.suche-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border: 0;
    background: var(--paper);
    color: var(--ink);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.suche-overlay::backdrop { background: var(--paper); }
body.hat-suche { overflow: hidden; }

.suche-overlay__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 18px;
}
.suche-overlay__marke {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}
.suche-overlay__marke img { height: 56px; width: auto; max-width: none; display: block; }
.suche-overlay__titel {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    cursor: text;
}
.suche-overlay__zu {
    flex-shrink: 0;
    padding: 10px 16px;
    border-width: 1.5px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* Das ✕ bleibt gold — hell auf schwarzem Grund, dunkler beim Überfahren */
.suche-overlay__zu svg { color: var(--gold); }
.suche-overlay__zu:hover svg { color: var(--gold-deep); }
.suche-overlay__linie { height: 6px; background: var(--mint); }

.suche-overlay__inhalt {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px var(--gutter) 64px;
}

/* Auf dunklen Seiten bleibt das Overlay hell, wie Kopf und Fuß */
.seite--dunkel .suche-overlay {
    --ink-2: #2A2A26;
    --muted: #55554F;
    --rule: #2A2A260F;
    --rule-strong: #2A2A2622;
}

/* Suchfeld — großes Eingabefeld mit Linie darunter */
.suchfeld {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid currentColor;
}
.suchfeld__lupe { flex-shrink: 0; color: var(--ink-2); }
/* "input." und nicht nur die Klasse: Bootstrap 3 (alter Seitenbaum) setzt
   input[type="search"] auf content-box — gleiche Spezifität, später geladen gewinnt. */
input.suchfeld__eingabe {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font-family: var(--serif);
    font-size: 40px;
    line-height: 1.2;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}
/* Fokus: Statt eines Kastens wird die Linie unter dem Feld gold und
   kräftiger — die Linie ist schon die Form des Feldes, ein Rahmen darum
   stünde quer dazu. --gold-deep erreicht auf Weiß 4,9:1, 3px Stärke
   erfüllen die Anforderung an einen sichtbaren Fokus (SC 2.4.7 / 1.4.11). */
.suchfeld { transition: border-color .15s ease, box-shadow .15s ease; }
.suchfeld__eingabe:focus-visible { outline: none; }
.suchfeld:focus-within {
    border-bottom-color: var(--gold-deep);
    box-shadow: 0 1.5px 0 0 var(--gold-deep);
}
.seite--dunkel main .suchfeld:focus-within { border-bottom-color: var(--gold); box-shadow: 0 1.5px 0 0 var(--gold); }
/* Der Entwurf hat hier #B5B0A4 — das erreicht auf Weiß nur 2,2:1.
   #77736A bleibt erkennbar heller als Eingetipptes und schafft 4,7:1. */
.suchfeld__eingabe::placeholder { color: #77736A; opacity: 1; }
.suchfeld__eingabe::-webkit-search-cancel-button { opacity: .5; cursor: pointer; }

/* Auf der Ergebnisseite so schmal wie im Overlay — lange Zeilen lesen sich schlecht */
.suche { max-width: 900px; }
.suche__ergebnis { margin-top: 40px; }
.suche__hinweis {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 620px;
}
.suche__wort { color: var(--ink); }
.seite--dunkel main .suche__wort { color: var(--paper); }
.suche__anzahl {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* "ol."/"li." statt nur der Klasse: Auf der Ergebnisseite steht die Liste in
   einem .frame, und ".frame ol" / ".frame li" (Fließtext-Listen) sind sonst
   spezifischer — die Treffer wären eingerückt und auseinandergezogen. */
ol.suche__treffer {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule-strong);
}
/* Die Trennlinie hängt am Listeneintrag, der Rahmen beim Überfahren am
   Link darin — mit 6px Luft dazwischen, sonst lägen graue Linie und
   schwarzer Rahmen direkt aufeinander und sähen aus wie ein dicker Strich. */
li.suchtreffer {
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-strong);
}
/* Beim Überfahren ein Rahmen wie bei den Ausstellungen (.themenzeile__flaeche):
   2px in --ink, gerundet, keine Fläche. Der Link ragt links und rechts um
   seinen Innenabstand über die Spalte hinaus — so bleibt der Text bündig mit
   Suchfeld und Trefferzahl, und nur der Rahmen steht außen.
   box-shadow statt border: Ein Rahmen, der erst beim Überfahren erscheint,
   würde sonst den Inhalt um 2px verschieben. */
.suchtreffer__inhalt {
    display: block;
    margin: 0 -28px;
    padding: 20px 28px;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s ease;
}
a.suchtreffer__inhalt:hover { box-shadow: inset 0 0 0 2px var(--ink); color: inherit; }
.seite--dunkel main a.suchtreffer__inhalt:hover { box-shadow: inset 0 0 0 2px var(--paper); color: inherit; }
.suchtreffer__bereich {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.seite--dunkel main .suchtreffer__bereich { color: var(--gold); }
.suchtreffer__titel {
    display: block;
    margin-top: 6px;
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1.25;
}
.suchtreffer__titel { transition: color .2s ease; }
/* Titel gold wie bei Terminen und Ausstellungen */
a.suchtreffer__inhalt:hover .suchtreffer__titel { color: var(--gold-deep); }
.seite--dunkel main a.suchtreffer__inhalt:hover .suchtreffer__titel { color: var(--gold); }
.suchtreffer__text {
    display: block;
    margin-top: 8px;
    max-width: 700px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
}
.suchtreffer__text mark {
    background: var(--mint-2);
    color: inherit;
    padding: 0 .1em;
}
.seite--dunkel main .suchtreffer__text mark { background: rgba(189, 210, 188, .25); }

.suche__seiten { margin-top: 32px; }
.suche__seiten li { margin: 0; }
.suche__seiten ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.suche__seite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--rule-strong);
    font-size: 14px;
    color: inherit;
    text-decoration: none;
}
a.suche__seite:hover { border-color: currentColor; color: inherit; }
.suche__seite.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seite--dunkel main .suche__seite.is-active { background: var(--paper); border-color: var(--paper); color: var(--ink); }

@media (max-width: 767px) {
    .suche-overlay__marke { gap: 16px; }
    .suche-overlay__marke img { height: 40px; }
    .suchfeld { gap: 14px; }
    .suchfeld__eingabe { font-size: 28px; }
    .suchtreffer__titel { font-size: 24px; }
    /* Seitenabstand ist hier nur 20px — der Rahmen darf nicht aus dem Fenster ragen */
    .suchtreffer__inhalt { margin: 0 -14px; padding: 18px 14px; }
}
@media (max-width: 575px) {
    /* Neben Logo und Schaltfläche ist für „Suche" kein Platz — das Feld
       selbst sagt mit seinem Platzhalter, worum es geht, und das Label
       bleibt für Screenreader erhalten. */
    .suche-overlay__titel {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Nach oben
   Runde Schaltfläche unten rechts. Ohne JavaScript bleibt sie hidden — ein
   Knopf ohne Wirkung wäre schlimmer als keiner. Eingeblendet wird sie erst
   nach einer Bildschirmhöhe, über .is-sichtbar, damit sie weich einblendet.
   ─────────────────────────────────────────────────────────────────────────── */

.nach-oben {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(42, 42, 38, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background .2s ease;
}
.nach-oben[hidden] { display: none; }
.nach-oben.is-sichtbar {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s, background .2s ease;
}
.nach-oben:hover { background: var(--gold-deep); }

/* Auf dunklen Seiten verschwände die dunkle Fläche — dort umgekehrt */
.seite--dunkel .nach-oben { background: var(--paper); color: var(--ink); }
.seite--dunkel .nach-oben:hover { background: var(--gold); }
.seite--dunkel .nach-oben:focus-visible { outline-color: var(--gold); }

@media (max-width: 767px) {
    .nach-oben { right: 14px; width: 44px; height: 44px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Footer
   ─────────────────────────────────────────────────────────────────────────── */

.site-foot {
    background: var(--mint);
    color: var(--ink);
    padding: 64px 0 28px;
    font-size: 13px;
    margin-top: 96px;
}
.site-foot a { color: var(--ink); text-decoration: underline; }
.site-foot a:hover { color: var(--gold-deep); }
.site-foot p { font-weight: 600; }
.site-foot__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.site-foot__head {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ink);
    margin-bottom: 16px;
}
.site-foot__abstand { margin-top: 14px; }
.site-foot__betont { font-weight: 700; }
.site-foot__socials { display: flex; gap: 12px; margin-top: 16px; }
.site-foot__social {
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
/* Die Symbolfarbe MUSS über "a" laufen: ".site-foot a" hat mit (0,1,1) mehr
   Spezifität als ".site-foot__social" mit (0,1,0) und würde die Farbe sonst
   überschreiben — das Symbol wäre schwarz auf schwarzem Kreis.
   Der Entwurf setzt hier Mint; Weiß ist die bewusste Abweichung. */
.site-foot a.site-foot__social {
    color: var(--paper);
    text-decoration: none;
}
.site-foot a.site-foot__social:hover {
    background: transparent;
    color: var(--ink);
    transform: translateY(-2px);
}
.site-foot__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid rgba(42, 42, 38, .25);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.site-foot__legal { font-weight: 700; }
.site-foot__legal a { text-decoration: none; }
.site-foot__legal a:hover { text-decoration: underline; }

@media (max-width: 991px) {
    .site-foot__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .site-foot__cols { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Kleinere Bildschirme
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    :root { --gutter: 20px; }
    .seiteninhalt { padding: 32px 0 64px; }
    .seiteninhalt > .frame + .frame { margin-top: 40px; }
    .seiteninhalt > .frame + .sg-abbildungen,
    .seiteninhalt > .sg-abbildungen + .sg-abbildungen { margin-top: 40px; }
    .seiteninhalt > .sg-abbildungen + .frame { margin-top: 52px; }
    .ce-intext.ce-right .ce-gallery,
    .ce-intext.ce-left .ce-gallery { float: none; margin: 0 0 20px; }

    /* Eine breite Tabelle hat sonst keinen Ausweg und schiebt die ganze Seite
       zur Seite. fluid_styled_content liefert die Tabelle ohne Hülle aus, der
       Ausweg muss deshalb an der Tabelle selbst hängen. */
    .frame table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Schaltflächen der Kachelgruppen dürfen enger stehen */
    .kachelgruppen__knopf { padding: 10px 14px; font-size: 11px; }
}

@media print {
    .site-head, .site-foot, .skiplink, .carousel-nav, .slider-hero__nav { display: none; }
    body { font-size: 11pt; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Nachricht — Detailansicht von EXT:news
   Template: Resources/Private/Extensions/News/Templates/News/Detail.html
   ─────────────────────────────────────────────────────────────────────────── */

/* Als Plugin ausgeliefert bringt die Detailansicht keinen .frame mit und damit
   auch keinen Seitencontainer — wie bei .termine und .themenkarten. */
.news-single > .nachricht {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Linie unter dem Kopf — sie trennt Titelzeile und Beitrag, wie es die
   Aufzählung mit ihren Eintragslinien tut. */
.nachricht__kopf {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}
.nachricht__meta { margin: 0 0 10px; }
.nachricht__titel {
    font-family: var(--serif);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
}

/* Der Anrisstext ist die Zusammenfassung. Er steht in derselben
   Serifenschrift wie die Überschrift, nur eine Stufe kleiner und mit mehr
   Durchschuss — so liest er sich als Unterzeile des Titels und nicht als
   erster Absatz des Fließtextes. Die Zeilenlänge bleibt begrenzt; über die
   volle Breite von 1280 px liest sich kein Absatz mehr angenehm. */
.nachricht__lead {
    font-family: var(--serif);
    font-size: clamp(19px, 1.9vw, 24px);
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--ink-2);
    max-width: 760px;
    margin-bottom: 36px;
}
.nachricht__lead p + p { margin-top: 14px; }

.nachricht__text {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.75;
}
.nachricht__text p + p,
.nachricht__text ul,
.nachricht__text ol { margin-top: 16px; }
.nachricht__text h2,
.nachricht__text h3,
.nachricht__text h4 {
    font-family: var(--serif);
    margin: 36px 0 12px;
    line-height: 1.2;
}
.nachricht__text h2 { font-size: 26px; }
.nachricht__text h3 { font-size: 22px; }
.nachricht__text h4 { font-size: 19px; }
.nachricht__text hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 32px 0;
}
.nachricht__text img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* Medien: Der Kern legt jede Datei in ein .outer. Statt einer Kolonne
   untereinander ein Raster, das sich nach der Bildbreite richtet — in einem
   Beitrag stecken oft Motiv und Förderer-Logos nebeneinander. */
.news-single .news-img-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px 24px;
    align-items: start;
    margin: 0 0 40px;
}
.news-single .news-img-wrap .outer { margin: 0; }
.news-single .mediaelement img,
.news-single .mediaelement video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.news-single .news-img-caption {
    margin: 10px 0 0;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
}

.nachricht__anhang { margin-top: 40px; }
.nachricht__anhang h3 {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
}
.nachricht__anhang ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
    max-width: 760px;
}
.nachricht__anhang li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}
.nachricht__groesse {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.nachricht__blaettern { margin: 40px 0 0; }
/* Der Rücksprung steht immer, ganz unten und links — wie auf allen
   Unterseiten des Hauses. Ohne Trennlinie: Die eine unter dem Kopf gliedert
   den Beitrag, eine zweite am Fuß machte daraus einen Kasten. */
.nachricht__zurueck { margin: 48px 0 0; }

@media (max-width: 767px) {
    .news-single > .nachricht { padding: 0 20px; }
    .news-single .news-img-wrap { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Styleguide (Hilfebereich, Seite 32129)

   Nur für die eine Hilfeseite gedacht: Sie zeigt die Bausteine des
   Designsystems an sich selbst — Farbflächen mit ihrem Token-Namen,
   Schriftmuster, Maße. Die Werte stehen NICHT hier, sondern kommen über
   var(--…) aus dem Block ganz oben; eine Farbe ändert sich damit im
   Styleguide von selbst mit. Die Hexwerte im Text der Seite sind
   redaktionell und müssen bei einer Änderung nachgezogen werden — deshalb
   steht auf der Seite, wo sie herkommen.
   ─────────────────────────────────────────────────────────────────────────── */

.sg-farben {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sg-farbe {
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    overflow: hidden;
}
/* Die weiße Kachel braucht eine eigene Kante, sonst verschwindet sie in der
   Seitenfläche. */
.sg-farbe__flaeche {
    display: block;
    height: 88px;
    box-shadow: inset 0 0 0 1px var(--rule-strong);
}
/* Alle Zeilen der Kachel sind span — ohne block stünden sie hintereinander. */
.sg-farbe__text { display: block; padding: 12px 14px 14px; }
.sg-farbe__name {
    display: block;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
}
.sg-farbe__wert {
    display: block;
    margin-top: 3px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.sg-farbe__hinweis {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-2);
}

/* Ein Sammlungsbereich mit seinen drei Tönen */
.sg-bereich {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 24px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid var(--rule-strong);
}
.sg-bereich:last-child { border-bottom: 1px solid var(--rule-strong); }
.sg-bereich__name {
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.15;
}
.sg-bereich__punkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: baseline;
}
.sg-toene {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.sg-ton__flaeche {
    display: block;
    height: 60px;
    border-radius: var(--radius);
    border: 1px solid var(--rule-strong);
}
.sg-ton__name {
    display: block;
    margin-top: 8px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.sg-ton__zweck {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-2);
}

/* Schrift- und Maßmuster: links die Bezeichnung, rechts die Probe */
.sg-muster {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
}
.sg-muster:first-child { border-top: 1px solid var(--rule-strong); }
.sg-muster:last-child { border-bottom: 1px solid var(--rule-strong); }
.sg-muster__was {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.sg-muster__wie {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
}
.sg-muster__probe > * { margin: 0; }
.sg-muster__probe .btn + .btn { margin-left: 10px; }

@media (max-width: 767px) {
    .sg-bereich,
    .sg-muster { grid-template-columns: 1fr; gap: 12px; }
    .sg-toene { grid-template-columns: 1fr; }
}

/* Schema des Seitenaufbaus — eine vereinfachte Seite in Originalfarben.
   Kein Bild, damit sie bei einer Änderung des Aufbaus nicht veraltet und
   auch beim Vergrößern scharf bleibt. */
.sg-schema {
    margin: 24px 0 20px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    overflow: hidden;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.3;
}
.sg-schema__kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-strong);
}
.sg-schema__logo {
    font-family: var(--serif);
    font-size: 15px;
    white-space: nowrap;
}
.sg-schema__menue {
    display: flex;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}
.sg-schema__menue span {
    padding: 5px 9px;
    background: var(--paper-2);
    border-radius: 2px;
}
.sg-schema__mint { height: 8px; background: var(--mint); }
.sg-schema__krume {
    padding: 10px 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 10px;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
}
.sg-schema__inhalt {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--paper);
}
.sg-schema__el {
    padding: 18px 12px;
    text-align: center;
    background: var(--paper-2);
    border-radius: var(--radius);
    color: var(--ink-2);
}
.sg-schema__fuss {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 18px 16px;
    background: var(--mint);
}
.sg-schema__fuss span { font-weight: 500; }
.sg-schema__fusszeile {
    padding: 10px 16px;
    background: var(--mint);
    border-top: 1px solid rgba(42, 42, 38, .18);
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--ink-2);
}

@media (max-width: 767px) {
    .sg-schema__fuss { grid-template-columns: 1fr 1fr; }
}

/* Abbildungen im Styleguide: Bildschirmaufnahmen ganzer Inhaltselemente.
   Ohne Rahmen liest man sie als Teil der Seite — die Aufnahme eines
   Kartenrasters sieht schließlich aus wie ein Kartenraster. Das Passepartout
   macht sichtbar, dass hier ein Bild steht. Der Umschlag .sg-abbildungen
   kommt aus dem TypoScript des Altbestand-Sets und gilt nur auf Seite 32129. */
.sg-abbildungen figure.image {
    padding: 10px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--paper-2);
}
.sg-abbildungen figure.image img {
    border-radius: 2px;
    /* Feine Kante am Bild selbst — die Aufnahmen haben oft weiße Ränder und
       verschwämmen sonst in der Passepartout-Fläche. */
    box-shadow: 0 0 0 1px var(--rule-strong);
}
.sg-abbildungen figcaption.image-caption {
    margin-top: 10px;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

/* Aufnahmen im Akkordeon der Anleitung (Seite 32125): Ein Formular des
   Backends ist 1600 px breit — in der halben Spalte des zweispaltigen
   Akkordeons wäre nichts mehr zu lesen. Deshalb hier einspaltig, Bild unter
   den Text, im selben Passepartout wie die übrigen Abbildungen. */
.sg-abbildungen .akkordeon__inhalt--mit-bild {
    grid-template-columns: 1fr;
    gap: 20px;
    /* Die weiße Fassung deckelt den Text auf 720px Lesebreite. Für eine
       Bildschirmaufnahme ist das zu schmal — hier zählt Erkennbarkeit. */
    max-width: none;
}
.sg-abbildungen .akkordeon__bild { order: 2; }
.sg-abbildungen .akkordeon__bild figure {
    padding: 10px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--paper-2);
}
.sg-abbildungen .akkordeon__bild img {
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--rule-strong);
}

/* Verzeichnis der Inhaltselemente (Hilfeseite 32125). Nennt alle Elemente
   beim Namen, bevor sie in den Klapplisten darunter erklärt werden — dort
   sieht man zugeklappt nur die Gruppenüberschriften. */
.sg-verzeichnis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}
.sg-verzeichnis__frage {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule-strong);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.sg-verzeichnis dl { margin: 0; }
.sg-verzeichnis dt {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.25;
}
.sg-verzeichnis dd {
    margin: 2px 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-2);
}
.sg-verzeichnis dd:last-child { margin-bottom: 0; }