/*
 * Theme opcon: Toolbox Konsortialfinanzierung auf BookStack v26.05.4.
 *
 * Sechs Schichten in fester Reihenfolge: tokens, fonts, base, bookstack, components, print.
 * Sie stehen als Sektionen, nicht als @layer: BookStacks eigenes Stylesheet (dist/styles.css)
 * ist ungelayert, und ungelayerte Regeln schlagen jede @layer-Regel unabhängig von der
 * Spezifität. Ein Theme in @layer könnte den Kopf nie neutralisieren. Die Reihenfolge der
 * Sektionen und die Spezifität der Selektoren tragen die Kaskade; kein !important, außer
 * BookStack setzt selbst einen Inline-Style (jede Stelle ist am Ort begründet).
 *
 * Alle Werte sind VB-Tokens aus dem Relaunch-Designsystem (Bundle 01) oder BookStack-Werte;
 * Mapping und Herleitung: Bundle 05, Abschnitt 2. Eingebunden über
 * layouts/parts/custom-styles.blade.php mit ?v=<hash> (functions.php, opcon_asset).
 */

/* ============================================================================
 * 1 tokens
 * ========================================================================== */

:root {
    /* BookStack-Variablen, mit VB-Werten belegt (05 Abschnitt 2.1). Die vier AA-Textfarben des
     * Relaunchs besetzen die vier Semantik-Slots und die vier Entitäts-Farben. */
    --color-primary: #2E7D46;
    --color-primary-light: #f3f8f7;
    --color-link: #2E7D46;
    --color-bookshelf: #393939;
    --color-book: #2E7D46;
    --color-chapter: #9A5B00;
    --color-page: #1675a4;
    --color-page-draft: #8f142d;
    --color-positive: #2E7D46;
    --color-info: #1675a4;
    --color-warning: #9A5B00;
    --color-negative: #8f142d;

    /* Schrift: Barlow Semi Condensed für Interface und Überschriften, PT Serif für Fließtext.
     * BookStack nutzt --font-body auch für Buttons, Inputs und Sidebars, darum liegt dort die
     * Interface-Schrift; der Fließtext bekommt die Serif in Schicht 3 gezielt. */
    --opcon-font-ui: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
    --opcon-font-serif: "PT Serif", Georgia, "Times New Roman", serif;
    --font-body: var(--opcon-font-ui);
    --font-heading: var(--opcon-font-ui);

    /* Größen-Skala (05 Abschnitt 2.2, 01 Abschnitt 2.2): jede font-size referenziert eine Stufe.
     * Werte außerhalb der Skala sind Ausreißer, die der Token-Ratchet zählt. --opcon-fs-subtitle
     * bleibt bei 18 px, bis die Gestaltung des Hero-Textes entschieden ist (05 nennt
     * clamp(18px, 2vw, 22px)). Der Druck (Sektion 6) trägt feste pt-Werte, dompdf kennt kein var(). */
    --opcon-fs-display: clamp(2rem, 5vw, 3.25rem);
    --opcon-fs-h1: clamp(26px, 3vw, 36px);
    --opcon-fs-h2: clamp(16px, 1.75vw, 20px);
    --opcon-fs-h3: clamp(15px, 1.5vw, 18px);
    --opcon-fs-h4: clamp(14px, 1.3vw, 16px);
    --opcon-fs-card-title: 1.375rem;
    --opcon-fs-subtitle: 1.125rem;
    --opcon-fs-body: 1rem;
    --opcon-fs-secondary: 0.9375rem;
    --opcon-fs-meta: 0.875rem;
    --opcon-fs-byline: 0.8125rem;

    /* Eigene Variablen (Präfix --opcon-), Werte aus Bundle 01. */
    --opcon-text: #222222;
    --opcon-text-secondary: #555555;
    --opcon-meta: #595959;
    --opcon-border: #767676;
    --opcon-hairline: #e0e0e0;
    --opcon-bg: #ffffff;
    --opcon-bg-muted: #f5f5f5;
    --opcon-bg-dark: #1a1a1a;
    --opcon-on-dark: #ffffff;
    --opcon-accent-marker: #dfede9;
    --opcon-accent-on-dark: #A0C8BE;
    --opcon-type-checkliste: #1675a4;
    --opcon-type-vorlage: #9A5B00;
    --opcon-type-baum: #2E7D46;
    --opcon-type-fallstudie: #8f142d;

    /* Faded-Stufen der vier Familien (01 Abschnitt 1.1). Zwei Consumer: die
     * Callout-Flächen (05 Abschnitt 4.4) und die Typ-Pillen, deren Text die
     * Textfarbe derselben Familie trägt. Die Paarung Familie-Text auf
     * Familie-Faded ist die einzige, die AA erreicht: auf dem einheitlichen
     * Marker-Ton fielen Checkliste (4,24) und Baum (4,21) darunter, gemessen
     * von tools/contrast-audit.cjs und an der Instanz von pa11y. */
    --opcon-faded-blog: #f3f8f7;
    --opcon-faded-editorial: #f1f6f7;
    --opcon-faded-books: #fdf6ee;
    --opcon-faded-symposium: #f7f0f0;
    --opcon-callout-info-bg: var(--opcon-faded-editorial);
    --opcon-callout-success-bg: var(--opcon-faded-blog);
    --opcon-callout-warning-bg: var(--opcon-faded-books);
    --opcon-callout-danger-bg: var(--opcon-faded-symposium);

    /* Abstände, Radien, Breiten (01 Abschnitt 3). */
    --opcon-space-2xs: 4px;
    --opcon-space-xs: 8px;
    --opcon-space-s: 16px;
    --opcon-space-m: 24px;
    --opcon-space-l: 32px;
    --opcon-space-xl: 48px;
    --opcon-space-2xl: 64px;
    --opcon-radius-sm: 1px;
    --opcon-radius-md: 2px;
    --opcon-radius-xl: 4px;
    --opcon-radius-pill: 9999px;
    --opcon-reading-width: 600px;
    --opcon-content-width: 1200px;
    --opcon-shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.15);
    --opcon-header-height: 64px;
    /* Breite der Wortmarke des Verfassungsblogs, im Fuß und unter der Hero-Karte dieselbe. */
    --opcon-logo-width: 160px;
}

/* Dark Mode bleibt BookStack-nativ (01 Abschnitt 5: keine VB-Dunkelpalette). Das Theme setzt
 * den Akzent auf on-dark.blog und legt die eigenen Flächen- und Textvariablen auf die Werte,
 * die BookStack selbst im Dark Mode fährt (body #111, Karten #222, Text #BBB bis #EEE). */
:root.dark-mode {
    --color-primary: #A0C8BE;
    --color-link: #A0C8BE;
    --color-primary-light: rgba(160, 200, 190, 0.15);
    --opcon-text: #eeeeee;
    --opcon-text-secondary: #bbbbbb;
    --opcon-meta: #aaaaaa;
    --opcon-border: #555555;
    --opcon-hairline: #333333;
    --opcon-bg: #111111;
    --opcon-bg-muted: #222222;
    --opcon-accent-marker: #2a3a36;
    --opcon-faded-editorial: #1e2a30;
    --opcon-faded-blog: #1e2c26;
    --opcon-faded-books: #302818;
    --opcon-faded-symposium: #301c20;
}

/* ============================================================================
 * 2 fonts (selbst gehostet, woff2 aus relaunch/verfassungsblog/fonts, SIL OFL)
 * ========================================================================== */

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-semi-condensed-400.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/barlow-semi-condensed-700.woff2") format("woff2");
}
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pt-serif-400.woff2") format("woff2");
}
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pt-serif-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/pt-serif-700.woff2") format("woff2");
}
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/pt-serif-700-italic.woff2") format("woff2");
}

/* ============================================================================
 * 3 base: Typo-Skala, Lesebreite, Links
 * ========================================================================== */

/* Seite weiß (05 Abschnitt 2.1, vb-bg-default) statt BookStacks #F2F2F2; Karten und Sektionen
 * setzen sich über Haarlinien und --opcon-bg-muted ab, nicht über einen grauen Grund. */
body {
    background-color: var(--opcon-bg);
    color: var(--opcon-text);
    line-height: 1.6;
}

/* Überschriften-Skala des Relaunchs (01 Abschnitt 2.2) statt BookStacks em-Skala. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.15;
    color: var(--opcon-text);
}
h1 { font-size: var(--opcon-fs-h1); font-weight: 700; }
h2 { font-size: var(--opcon-fs-h2); text-transform: none; }
h3 { font-size: var(--opcon-fs-h3); }
h4 { font-size: var(--opcon-fs-h4); }
h5, h6 { font-size: var(--opcon-fs-secondary); }

/* Fließtext in Serif, Lesebreite 600 px innerhalb der BookStack-Mittelspalte. Tabellen,
 * Bilder und Code bleiben so breit, wie die Spalte es zulässt. */
.page-content p,
.page-content li,
.page-content blockquote,
.page-content td,
.page-content dd,
.opcon-serif {
    font-family: var(--opcon-font-serif);
    font-size: var(--opcon-fs-body);
    line-height: 1.6;
}
/* Lesebreite des Fließtextes (05 Abschnitt 2.3). BookStack legt den gerenderten Seiteninhalt
 * in einen Richtungs-Wrapper (`.page-content > div[dir=auto]`), die Absätze sind also Enkel:
 * ein reiner Kind-Selektor trifft über den ganzen Bestand null Elemente und die Breite wäre
 * gesetzt, ohne zu wirken. Beide Ebenen nennen, damit die Regel auch dann greift, wenn der
 * Wrapper einmal fehlt (Markdown-Renderer, Vorschau). */
:is(.page-content, .page-content > [dir]) > :is(p, ul, ol, blockquote, .callout, details) {
    max-width: var(--opcon-reading-width);
}
.page-content p {
    margin-bottom: var(--opcon-space-s);
}
.page-content h2 { margin-top: var(--opcon-space-l); }
.page-content h3 { margin-top: var(--opcon-space-m); }

a {
    color: var(--color-link);
}
a:hover {
    text-decoration: underline;
}

/* Sichtbarer Fokus auf allen Interaktiven (05 Abschnitt 8). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================================
 * 4 bookstack: Kopf-Neutralisierung, Buttons, Listen, Callouts, Fuß
 * ========================================================================== */

/* Kopf: weiß mit Haarlinie statt Vollfarb-Balken (05 Abschnitt 2.4). Ohne Schatten. */
#header.opcon-header {
    background: var(--opcon-bg);
    color: var(--opcon-text);
    border-bottom: 1px solid var(--opcon-hairline);
    box-shadow: none;
    display: block;
    padding-inline: var(--opcon-space-m);
}
#header.opcon-header .opcon-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--opcon-space-m);
    min-height: var(--opcon-header-height);
    max-width: 1400px;
    margin-inline: auto;
}
/* BookStack färbt Fokus-Ringe im Kopf weiß (für den dunklen Balken); hier ist der Kopf hell. */
#header.opcon-header *,
#header.opcon-header .primary-background * {
    outline-color: var(--color-primary);
}

/* Wortmarke: Text, kein Zeichen. »Toolbox« auf 60 Prozent Deckung (MR-Entscheid 14.09.). */
.opcon-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    font-family: var(--font-heading);
    font-weight: 700;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value --
     * Wortmarke im Kopf: Größe außerhalb der Skala aus Sektion 1. Ob die fünf Ausreißer
     * gerastert werden oder eine eigene Stufe bekommen, ist eine Gestaltungsfrage
     * und liegt als Entscheid in oc_8; bis dahin zählt sie der Token-Ratchet. */
    font-size: 1.25rem;
    line-height: 1;
    color: var(--opcon-text);
    text-decoration: none;
    white-space: nowrap;
    padding: var(--opcon-space-xs) 0;
    border-radius: var(--opcon-radius-xl);
}
.opcon-wordmark:hover,
.opcon-wordmark:focus-visible {
    text-decoration: none;
    color: var(--opcon-text);
}
.opcon-wordmark__pre {
    opacity: 0.6;
}

/* Nav-Links: Barlow 600, uppercase, aktiver Eintrag mit 2 px Unterstrich. */
#header.opcon-header .header-links {
    display: flex;
    align-items: center;
    gap: var(--opcon-space-m);
    justify-content: flex-end;
    flex: 1 1 auto;
}
#header.opcon-header .links {
    display: flex;
    align-items: center;
    gap: var(--opcon-space-xs);
}
#header.opcon-header .links a {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-meta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--opcon-text);
    padding: 6px var(--opcon-space-xs);
    border-radius: 0;
    border-bottom: 2px solid transparent;
    line-height: 1.4;
}
#header.opcon-header .links a:hover,
#header.opcon-header .links a:focus-visible {
    background: none;
    color: var(--color-primary);
    text-decoration: none;
}
#header.opcon-header .links a.active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}
#header.opcon-header .links a svg {
    display: none;
}
#header.opcon-header .links a.opcon-btn {
    border-bottom: 1px solid var(--opcon-border);
}

/* Suche: Feld 240 px mit Haarlinien-Rahmen, dunkler Text (BookStack rechnet mit weißem Kopf-Text). */
#header.opcon-header .search-box input {
    width: 240px;
    background: var(--opcon-bg);
    border: 1px solid var(--opcon-hairline);
    border-radius: var(--opcon-radius-xl);
    color: var(--opcon-text);
    font-family: var(--font-body);
    font-size: var(--opcon-fs-meta);
    padding: 7px 10px 7px 34px;
}
#header.opcon-header .search-box input::placeholder {
    color: var(--opcon-meta);
    opacity: 1;
}
#header.opcon-header .search-box input:focus {
    border-color: var(--color-primary);
}
#header.opcon-header #header-search-box-button {
    color: var(--opcon-meta);
    opacity: 1;
    top: 8px;
    inset-inline-start: 10px;
}
#header.opcon-header .search-box.search-active:focus-within input {
    background: var(--opcon-bg);
    border-color: var(--color-primary);
}

/* Werkzeuge rechts: Dark-Mode-Toggle als Icon-Knopf, Nutzermenü in Textfarbe. */
.opcon-header__tools {
    display: flex;
    align-items: center;
    gap: var(--opcon-space-xs);
}
.opcon-header__toggle {
    display: inline-flex;
    align-items: center;
    padding: 6px;
    border-radius: var(--opcon-radius-xl);
    color: var(--opcon-meta);
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}
.opcon-header__toggle:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.opcon-header__toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    margin: 0;
}
/* BookStacks Knopf trägt sein Label als zweites span (common/dark-mode-toggle);
 * am Breitbild zeigt der Kopf nur das Symbol. Ein display: none nimmt dem Knopf
 * damit seinen zugänglichen Namen, gemessen als button-name auf allen sieben
 * Adressen. Das Muster ist BookStacks .screen-reader-only (_layout.scss): aus
 * dem Fluss genommen, für den Screenreader da. Unter dem Breakpoint (Mobil-Block
 * derselben Sektion) wird daraus wieder sichtbarer Text. */
.opcon-header__toggle > span + span {
    position: absolute;
    inset-inline-start: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#header.opcon-header .user-name {
    color: var(--opcon-text);
}
#header.opcon-header .user-name:hover {
    background: var(--color-primary-light);
}
#header.opcon-header .user-name svg {
    fill: currentColor;
}

/* Mobile: nur Wortmarke, Login-Icon und Burger in einer Zeile; die Nav liegt im BookStack-Burger. */
.opcon-header__mobile {
    display: none;
    align-items: center;
    gap: var(--opcon-space-xs);
}
.opcon-header__login-icon {
    display: inline-flex;
    padding: 6px;
    color: var(--opcon-text);
}
.opcon-header__login-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    margin: 0;
}
#header.opcon-header .mobile-menu-toggle {
    color: var(--opcon-text);
    fill: var(--opcon-text);
    border-color: var(--opcon-border);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value --
     * Burger-Toggle, Größe folgt dem Icon-Glyph: Größe außerhalb der Skala aus Sektion 1. Ob die fünf Ausreißer
     * gerastert werden oder eine eigene Stufe bekommen, ist eine Gestaltungsfrage
     * und liegt als Entscheid in oc_8; bis dahin zählt sie der Token-Ratchet. */
    font-size: 1.75em;
}

@media (max-width: 1000px) {
    :root { --opcon-header-height: 56px; }
    #header.opcon-header { padding-inline: var(--opcon-space-s); }
    .opcon-header__mobile { display: flex; }
    .opcon-wordmark { font-size: var(--opcon-fs-subtitle); }
    /* Das aufgeklappte Menü übernimmt BookStacks Karten-Layout; nur Schrift und Farben sind
     * hier neu, die Klapp-Mechanik (.show) bleibt BookStack. */
    #header.opcon-header .header-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--opcon-bg);
        border: 1px solid var(--opcon-hairline);
        box-shadow: var(--opcon-shadow-modal);
        position: absolute;
        inset-inline-end: var(--opcon-space-s);
        top: calc(var(--opcon-header-height) - 4px);
        min-width: 240px;
        padding: var(--opcon-space-xs) 0;
        z-index: 10;
    }
    #header.opcon-header .header-links.show { display: flex; }
    #header.opcon-header .links {
        display: block;
    }
    #header.opcon-header .links a {
        display: grid;
        grid-template-columns: 16px auto;
        gap: var(--opcon-space-s);
        align-items: center;
        padding: 8px var(--opcon-space-s);
        border-bottom: 0;
        text-transform: none;
        letter-spacing: 0;
        font-size: var(--opcon-fs-body);
    }
    #header.opcon-header .links a svg {
        display: inline-block;
        width: 16px;
        margin: 0;
        fill: currentColor;
    }
    #header.opcon-header .links a.active {
        color: var(--color-primary);
        background: var(--color-primary-light);
    }
    #header.opcon-header .links a.opcon-btn {
        border: 0;
        border-radius: 0;
        margin: 0;
    }
    .opcon-header__tools {
        padding: var(--opcon-space-xs) var(--opcon-space-s);
        border-top: 1px solid var(--opcon-hairline);
    }
    .opcon-header__toggle > span + span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        margin-inline-start: var(--opcon-space-xs);
        font-size: var(--opcon-fs-meta);
    }
    #header.opcon-header .dropdown-container ul li a,
    #header.opcon-header .dropdown-container ul li button {
        color: var(--opcon-text);
    }
}

/* Buttons: BookStacks .button bekommt die Token-Radien und die Interface-Schrift. */
.button {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--opcon-radius-xl);
}

/* Deckkraft als optische Zurücknahme: BookStack legt sie auf ganze Blöcke und
 * holt sie bei Hover und Fokus zurück (`.tri-layout-left-contents > *` und
 * `-right-` in _layout.scss ab 1400 px, `.fade-in-when-active` in _blocks.scss,
 * `.breadcrumbs` in _header.scss). Im Ruhezustand fällt damit jeder Text darin
 * unter AA, und zwar unabhängig von der Farbe: gemessen 36 Fundstellen bei 4,29
 * (BookStacks eigenes text-muted #575757 bei 0,6), 34 bei 2,43 (unser Akzent auf
 * derselben Stufe), dazu die Brotkrume bei 0,7. Die Farben erfüllen AA für sich,
 * die Deckkraft nimmt es ihnen; heilbar ist darum nur sie. Die Zurücknahme
 * trägt weiterhin die Farbe (text-muted) und die Schriftgröße, und für ein
 * Nachschlagewerk ist ein zurückgenommener Buch-Baum ohnehin keine Hilfe.
 * BookStacks Hover- und prefers-contrast-Regeln (beide !important) bleiben. */
.tri-layout-left-contents > *,
.tri-layout-right-contents > *,
.fade-in-when-active,
.breadcrumbs {
    opacity: 1;
}

/* Dieselbe Klasse an einer Alpha-Farbe: BookStack setzt den nicht gewählten
 * Reiter auf `rgba(0, 0, 0, .5)` (_components.scss), also 3,94 auf weiß. Der
 * gewählte Reiter trägt ohnehin den Akzent und eine 2-px-Kante, die Abstufung
 * bleibt also erkennbar; die Meta-Farbe steht bei 7,0. Betrifft die
 * Kommentar-Reiter unter jeder Leseseite. */
.tab-container [role="tablist"] button[role="tab"] {
    color: var(--opcon-meta);
}

/* Karten und Listen: eckig, plain, Haarlinien statt Schatten. */
.card {
    border-radius: var(--opcon-radius-xl);
    box-shadow: none;
    border: 1px solid var(--opcon-hairline);
}
.card .card-title {
    font-family: var(--font-heading);
    font-size: var(--opcon-fs-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--opcon-meta);
}
.entity-list-item-name {
    font-family: var(--font-heading);
    font-weight: 600;
}
.entity-item-snippet p {
    font-family: var(--opcon-font-serif);
    font-size: var(--opcon-fs-secondary);
}
.entity-list-item:hover,
.entity-list-item:focus {
    background: var(--color-primary-light);
}

/* Callouts: Fläche in der Faded-Farbe, 3 px Kante in der Semantikfarbe, Beschriftung über
 * ::before in Barlow 600 uppercase, Icon bleibt BookStacks Hintergrundbild (05 Abschnitt 4.4).
 * »Erfahrung Verfassungsblog« ist ein success-Callout, dessen erste Zeile die Redaktion schreibt. */
.callout {
    border-inline-start-width: 3px;
    border-radius: 0;
    padding: var(--opcon-space-s);
    padding-inline-start: var(--opcon-space-s);
    font-family: var(--opcon-font-serif);
}
.callout:before {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-bottom: var(--opcon-space-2xs);
    padding-inline-start: 22px;
    background-size: 16px 16px;
    background-position: 0 50%;
    background-repeat: no-repeat;
    font-family: var(--font-heading);
    font-weight: 600;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value --
     * Callout-Beschriftung: Größe außerhalb der Skala aus Sektion 1. Ob die fünf Ausreißer
     * gerastert werden oder eine eigene Stufe bekommen, ist eine Gestaltungsfrage
     * und liegt als Entscheid in oc_8; bis dahin zählt sie der Token-Ratchet. */
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--opcon-text);
    opacity: 1;
}
.callout.info { background: var(--opcon-callout-info-bg); border-color: var(--color-info); }
.callout.info:before { content: "Hinweis"; color: var(--color-info); }
.callout.success { background: var(--opcon-callout-success-bg); border-color: var(--color-positive); }
.callout.success:before { content: "Tipp"; color: var(--color-positive); }
.callout.warning { background: var(--opcon-callout-warning-bg); border-color: var(--color-warning); }
.callout.warning:before { content: "Achtung"; color: var(--color-warning); }
.callout.danger { background: var(--opcon-callout-danger-bg); border-color: var(--color-negative); }
.callout.danger:before { content: "Risiko"; color: var(--color-negative); }

/* BookStacks Fuß (app-footer-links) rendert das Theme nicht mehr sichtbar: die Linkzeile lebt in
 * der eigenen Fußzeile (opcon/footer.blade.php), die dieselbe Einstellung liest. */
body > footer:not(.opcon-footer) {
    display: none;
}

/* Skip-Link behält BookStacks Mechanik, bekommt aber den Akzent. */
.skip-to-content-link:focus {
    color: var(--color-primary);
}

/* ============================================================================
 * 5 components (.opcon-*)
 * ========================================================================== */

/* Buttons */
.opcon-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--opcon-space-xs);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-meta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 9px var(--opcon-space-s);
    border-radius: var(--opcon-radius-xl);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--opcon-on-dark);
    text-decoration: none;
    cursor: pointer;
}
.opcon-btn:hover,
.opcon-btn:focus-visible {
    text-decoration: none;
    filter: brightness(0.92);
    color: var(--opcon-on-dark);
}
.opcon-btn--outline {
    background: transparent;
    color: var(--opcon-text);
    border-color: var(--opcon-border);
}
.opcon-btn--outline:hover,
.opcon-btn--outline:focus-visible {
    filter: none;
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

/* Pills (Typ-Filter). Farbe und Fläche kommen als Paar je Instanz; jede Pill
 * trägt Text. Die Fläche ist die Faded-Stufe derselben Familie, nicht der
 * einheitliche Marker-Ton: dort erreichen zwei der vier Typ-Farben AA nicht
 * (05 Abschnitt 4.2 nennt den Marker-Ton, Abschnitt 8 verlangt AA; die
 * Familien-Paarung erfüllt beides und folgt der Systematik der Callouts). */
.opcon-pill {
    --opcon-pill-color: var(--color-primary);
    --opcon-pill-bg: var(--opcon-faded-blog);
    display: inline-flex;
    align-items: center;
    gap: var(--opcon-space-2xs);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-byline);
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 5px 12px;
    border-radius: var(--opcon-radius-pill);
    background: var(--opcon-pill-bg);
    color: var(--opcon-pill-color);
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.opcon-pill:hover,
.opcon-pill:focus-visible {
    text-decoration: none;
    border-color: var(--opcon-pill-color);
}
/* Die Zahl steht abgestuft neben der Beschriftung; das trägt das Gewicht, nicht
 * eine Deckkraft. Eine Deckkraft auf Text rechnet sich in den Kontrast ein und
 * drückt die Pill-Paarung unter AA, während der Token-Wert unverändert aussieht
 * (dieselbe Klasse wie die Block-Deckkraft in Sektion 4). */
.opcon-pill__count {
    font-weight: 500;
}
.opcon-pill--checkliste {
    --opcon-pill-color: var(--opcon-type-checkliste);
    --opcon-pill-bg: var(--opcon-faded-editorial);
}
.opcon-pill--vorlage {
    --opcon-pill-color: var(--opcon-type-vorlage);
    --opcon-pill-bg: var(--opcon-faded-books);
}

/* Arrow-Links */
.opcon-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--opcon-space-2xs);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-byline);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}
.opcon-link-arrow::before {
    content: "\2192";
    font-weight: 700;
}
.opcon-link-arrow:hover,
.opcon-link-arrow:focus-visible {
    text-decoration: underline;
}

/* Entwurfs-Band: die Arbeits-Marke des Betreibers für die Erarbeitungsphase. Sie erscheint an
 * einer Seite, deren Text vom Betreiber stammt und noch Entwurf ist, also an den Tags
 * `opcon:status=entwurf` UND `opcon:zustaendig=betreiber`; die Seiten der Redaktion tragen keine
 * Marke. Die Tags stehen als Klassen am body (BookStack, entities.body-tag-classes; die
 * Startseite trägt die Tags ihrer Hero-Quellseite, home/default.blade.php) und rendern als
 * Zeile über dem Text, auf der Seite wie im Einstieg. Farbpaar wie die Callout-Beschriftung
 * Achtung (Warnfarbe auf ihrer Faded-Fläche, AA im Kontrast-Audit). Die Beschriftung liegt wie
 * bei den Callouts im CSS, Tag und Band haben damit eine Quelle; die Fassung für Gäste nach
 * der Veröffentlichung folgt mit dem Marken-System (oc_23). */
body.tag-pair-opcon\:status-entwurf.tag-pair-opcon\:zustaendig-betreiber .page-content::before,
body.tag-pair-opcon\:status-entwurf.tag-pair-opcon\:zustaendig-betreiber .opcon-hero__text::before {
    content: "Entwurf mr/cc";
    display: inline-block;
    margin-bottom: var(--opcon-space-s);
    padding: var(--opcon-space-2xs) var(--opcon-space-xs);
    border-inline-start: 3px solid var(--color-warning);
    background: var(--opcon-callout-warning-bg);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-byline);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--color-warning);
}

/* Abschnitts-Kopf */
.opcon-section {
    margin-top: var(--opcon-space-xl);
}
.opcon-section__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--opcon-meta);
    margin: 0 0 var(--opcon-space-s);
}

/* Startseite */
.opcon-home {
    max-width: var(--opcon-content-width);
    margin-inline: auto;
    padding: var(--opcon-space-l) var(--opcon-space-s) var(--opcon-space-2xl);
}
.opcon-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--opcon-space-l);
    align-items: start;
}
.opcon-hero__text h1,
.opcon-hero__text h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--opcon-fs-display);
    line-height: 1.05;
    margin: 0 0 var(--opcon-space-s);
    color: var(--opcon-text);
}
.opcon-hero__text p {
    font-family: var(--opcon-font-serif);
    font-size: var(--opcon-fs-subtitle);
    line-height: 1.6;
    color: var(--opcon-text-secondary);
    max-width: var(--opcon-reading-width);
    margin: 0 0 var(--opcon-space-s);
}
/* Ein Link im Einstiegstext liegt auf Sekundär-Text; gegen den trägt der Akzent allein keine
 * 3:1 (axe link-in-text-block), darum die Unterstreichung als zweites Merkmal (WCAG 1.4.1).
 * Der Pfeil-Link unter dem Text steht allein in seiner Zeile und trägt die Form der Karten. */
.opcon-hero__text p a:not(.opcon-link-arrow) {
    text-decoration: underline;
}
.opcon-hero__more {
    margin-top: var(--opcon-space-xs);
}
.opcon-hero-card {
    background: var(--opcon-bg-muted);
    border-top: 4px solid var(--color-primary);
    padding: var(--opcon-space-l);
}
.opcon-hero-card__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-card-title);
    margin: 0 0 var(--opcon-space-s);
}
/* Der Titel der Karte ist der Name des Buchs, das sie zeigt, und führt dorthin: als Text,
 * nicht als Link-Blau, damit die Karte eine Überschrift bleibt. Der Hover nimmt den Akzent
 * wie die Einträge darunter. */
.opcon-hero-card__title a {
    color: var(--opcon-text);
    text-decoration: none;
}
.opcon-hero-card__title a:hover,
.opcon-hero-card__title a:focus-visible {
    color: var(--color-primary);
}
.opcon-hero-card ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: opcon-step;
}
.opcon-hero-card li {
    counter-increment: opcon-step;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: baseline;
    gap: var(--opcon-space-xs);
    padding: var(--opcon-space-xs) 0;
    border-top: 1px solid var(--opcon-hairline);
}
.opcon-hero-card li::before {
    content: counter(opcon-step);
    font-family: var(--font-heading);
    font-weight: 700;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value --
     * Zähler der Hero-Karte: Größe außerhalb der Skala aus Sektion 1. Ob die fünf Ausreißer
     * gerastert werden oder eine eigene Stufe bekommen, ist eine Gestaltungsfrage
     * und liegt als Entscheid in oc_8; bis dahin zählt sie der Token-Ratchet. */
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-primary);
}
.opcon-hero-card li a {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-body);
    color: var(--opcon-text);
}
.opcon-hero-card li a:hover {
    color: var(--color-primary);
}
.opcon-hero-card__placeholder {
    font-family: var(--opcon-font-serif);
    color: var(--opcon-text-secondary);
    margin: 0;
}
/* Schlusszeile der Karte: die Wortmarke des Betreibers als Absender, rechtsbündig unter der
 * Liste und von ihr mit derselben Haarlinie getrennt wie die Einträge untereinander (MR
 * 21.09.2026; bis dahin stand sie lose unter der Karte). Dieselbe Wortmarke wie im Fuß, hier
 * dunkel auf hell; der Dark Mode kehrt sie um, statt ein zweites Bild zu laden. */
.opcon-hero-card__brand {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-top: var(--opcon-space-s);
    border-top: 1px solid var(--opcon-hairline);
}
.opcon-hero-card__brand img {
    display: block;
    width: var(--opcon-logo-width);
    height: auto;
}
/* Über und unter der Wortmarke derselbe Abstand (MR 21.09.2026): trägt die Karte eine
 * Schlusszeile, nimmt sie ihren unteren Innenabstand auf deren Stufe zurück; ein Träger je
 * Kante, oben die Zeile, unten die Karte. */
.opcon-hero-card:has(> .opcon-hero-card__brand) {
    padding-bottom: var(--opcon-space-s);
}
:root.dark-mode .opcon-hero-card__brand img {
    filter: invert(1);
}

/* Marke »Work in progress«: der Aufbau-Stand der ganzen Toolbox, geschaltet über
 * opcon:status=workinprogress am Regal (functions.php, opcon_home_data). Dieselbe Farbfamilie wie das
 * Entwurfs-Band (Warnfarbe auf ihrer Faded-Fläche, AA im Kontrast-Audit); erkennbar macht sie
 * der zu drei Vierteln gefüllte Fortschrittsbalken mit Schrägstreifen, gezeichnet allein aus Tokens.
 * Sie steht im Markup vor dem Einstiegstext und damit mobil ganz oben; die Platzierung über der
 * Karte ab 900 px trägt das Grid des Hero (Media-Query am Ende der Startseite). */
.opcon-wip {
    display: grid;
    gap: var(--opcon-space-xs);
    margin: 0;
    padding: var(--opcon-space-m) var(--opcon-space-l);
    border: 1px solid var(--color-warning);
    background: var(--opcon-callout-warning-bg);
    color: var(--color-warning);
    font-family: var(--font-heading);
    font-weight: 600;
}
/* Zwei Angaben in einer Zeile, getrennt durch »|« als Textzeichen (MR 28.09.2026); der Strich
 * ist für Screenreader ausgeblendet, die beiden Angaben lesen sich ohne ihn. */
.opcon-wip__label {
    font-size: var(--opcon-fs-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.opcon-wip__nowrap {
    white-space: nowrap;
}
.opcon-wip__bar {
    display: block;
    height: var(--opcon-space-m);
    border: 1px solid var(--color-warning);
    background:
        repeating-linear-gradient(
            -45deg,
            var(--color-warning) 0 var(--opcon-space-xs),
            transparent var(--opcon-space-xs) var(--opcon-space-s)
        )
        left / 75% 100% no-repeat,
        var(--opcon-bg);
}

/* Einstiegs-Karten: Info-Bereich-Muster (Charcoal-Top-Border), Hover wird Akzent. */
.opcon-entries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--opcon-space-m);
}
.opcon-card {
    display: flex;
    flex-direction: column;
    gap: var(--opcon-space-xs);
    background: var(--opcon-bg);
    border: 1px solid var(--opcon-border);
    border-top: 4px solid var(--opcon-text);
    padding: var(--opcon-space-l);
    color: var(--opcon-text);
    text-decoration: none;
}
.opcon-card:hover,
.opcon-card:focus-visible {
    border-top-color: var(--color-primary);
    text-decoration: none;
    color: var(--opcon-text);
}
.opcon-card__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-card-title);
    line-height: 1.15;
    margin: 0;
}
.opcon-card__text {
    font-family: var(--opcon-font-serif);
    font-size: var(--opcon-fs-secondary);
    color: var(--opcon-text-secondary);
    margin: 0;
    flex: 1 1 auto;
}
.opcon-card .opcon-link-arrow {
    margin-top: var(--opcon-space-xs);
}

/* Themen-Raster: die Bücher des Regals als Karten mit Nummern-Cover. */
.opcon-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--opcon-space-s);
}
.opcon-topic {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--opcon-hairline);
    background: var(--opcon-bg);
    color: var(--opcon-text);
    text-decoration: none;
    overflow: hidden;
}
.opcon-topic:hover,
.opcon-topic:focus-visible {
    border-color: var(--color-primary);
    text-decoration: none;
    color: var(--opcon-text);
}
.opcon-topic__cover {
    height: 88px;
    background: var(--color-primary-light);
    display: flex;
    align-items: flex-end;
    padding: var(--opcon-space-xs) var(--opcon-space-s);
    font-family: var(--font-heading);
    font-weight: 700;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value --
     * Themen-Cover-Nummer: Größe außerhalb der Skala aus Sektion 1. Ob die fünf Ausreißer
     * gerastert werden oder eine eigene Stufe bekommen, ist eine Gestaltungsfrage
     * und liegt als Entscheid in oc_8; bis dahin zählt sie der Token-Ratchet. */
    font-size: 2rem;
    line-height: 1;
    color: var(--color-primary);
}
.opcon-topic__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: calc(-1 * var(--opcon-space-xs)) calc(-1 * var(--opcon-space-s));
}
/* Themen-Piktogramm im Cover (theme/opcon/icons/opcon-<import-id>.svg, inline über @icon):
 * Stufe xl der Abstands-Skala statt BookStacks 1em, ohne dessen Grundlinien-Versatz und
 * Rand (.svg-icon in _text.scss). Die Farbe ist der Akzent des Covers über currentColor; die
 * Formen tragen fill="none" als Attribut, weil .svg-icon dem Element fill: currentColor gibt. */
.opcon-topic__cover > svg {
    width: var(--opcon-space-xl);
    height: var(--opcon-space-xl);
    position: static;
    margin: 0;
}
/* Mit Piktogramm trägt das Cover ein Emblem mittig im Bildfeld: links das Piktogramm, daneben
 * das Wort »Kapitel« klein und darunter die Nummer im Akzent, dieselbe Konstruktion wie auf
 * den Regal-Kacheln (MR 21.09.2026). Ohne Piktogramm bleibt die große Nummer unten links. */
.opcon-topic__cover:has(> svg) {
    justify-content: center;
    align-items: center;
    gap: var(--opcon-space-xs);
}
.opcon-topic__number {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-heading);
    line-height: 1;
}
.opcon-topic__number-label,
.opcon-kachel__nummer-label {
    font-weight: 600;
    font-size: var(--opcon-fs-byline);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--opcon-meta);
}
.opcon-topic__number-value,
.opcon-kachel__nummer-value {
    font-weight: 700;
    font-size: var(--opcon-fs-h2);
    line-height: 1;
    color: var(--color-primary);
}
/* Dieselbe Zeile auf den Buch-Kacheln der Regal-Ansicht (Raster und Liste), unten links im
 * Bildfeld, das BookStack relativ positioniert. BookStack setzt sein Piktogramm dort absolut;
 * die Zeile holt es in den Fluss zurück (svg:first-child schlägt die Klassen-Regel in der
 * Spezifität) und stellt es in der Stufe l der Skala. Alles weiß auf der Buch-Fläche; auf
 * schmalen Kacheln (80 px mobil) bricht das Label unter das Piktogramm. */
.opcon-kachel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--opcon-space-xs);
    padding: var(--opcon-space-xs);
    color: var(--opcon-on-dark);
}
.opcon-kachel > svg:first-child {
    position: static;
    width: var(--opcon-space-xl);
    height: var(--opcon-space-xl);
    margin: 0;
}
.opcon-kachel__nummer {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-heading);
    line-height: 1;
}
.opcon-kachel__nummer-label,
.opcon-kachel__nummer-value {
    color: var(--opcon-on-dark);
}
/* BookStack verengt die Listen-Kachel unter 800 px (sein bp-m) auf 80 px; die Zeile aus
 * Piktogramm, Wort und Nummer bräche dort um und schöbe das Piktogramm aus dem Bildfeld.
 * Auf dieser Kachel fällt das Wort weg, Piktogramm und Nummer bleiben in einer Zeile. Die
 * Grenze ist BookStacks, nicht eine vierte des Themes: sie folgt der Kachelbreite. */
@media (max-width: 800px) {
    .opcon-kachel--liste {
        flex-wrap: nowrap;
    }
    .opcon-kachel--liste > svg:first-child {
        width: var(--opcon-space-l);
        height: var(--opcon-space-l);
    }
    .opcon-kachel--liste .opcon-kachel__nummer-label {
        display: none;
    }
}
.opcon-topic__body {
    padding: var(--opcon-space-s);
    display: flex;
    flex-direction: column;
    gap: var(--opcon-space-2xs);
}
.opcon-topic__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-body);
    line-height: 1.2;
    margin: 0;
}
.opcon-topic__meta {
    font-family: var(--font-heading);
    font-size: var(--opcon-fs-byline);
    color: var(--opcon-meta);
}

/* Direkt zu / Zuletzt aktualisiert */
.opcon-two {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--opcon-space-l);
}
.opcon-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--opcon-space-xs);
}
.opcon-recent {
    list-style: none;
    margin: 0;
    padding: 0;
}
.opcon-recent li {
    display: flex;
    justify-content: space-between;
    gap: var(--opcon-space-s);
    align-items: baseline;
    padding: var(--opcon-space-xs) 0;
    border-top: 1px solid var(--opcon-hairline);
}
.opcon-recent li:first-child {
    border-top: 0;
}
.opcon-recent a {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--opcon-text);
}
.opcon-recent a:hover {
    color: var(--color-primary);
}
.opcon-recent time {
    font-family: var(--font-heading);
    font-size: var(--opcon-fs-byline);
    color: var(--opcon-meta);
    white-space: nowrap;
}
.opcon-empty {
    font-family: var(--opcon-font-serif);
    color: var(--opcon-text-secondary);
    margin: 0;
}

/* Für Bibliotheken */
.opcon-libraries {
    background: var(--opcon-bg);
    border: 1px solid var(--opcon-hairline);
    padding: var(--opcon-space-m) var(--opcon-space-l);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--opcon-space-s);
}
.opcon-libraries__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-body);
    margin: 0 0 var(--opcon-space-2xs);
}
.opcon-libraries p {
    font-family: var(--opcon-font-serif);
    font-size: var(--opcon-fs-secondary);
    color: var(--opcon-text-secondary);
    margin: 0;
}

/* Meine Arbeit (nur angemeldet): eingeklappt, BookStacks Listen. */
.opcon-mine {
    margin-top: var(--opcon-space-xl);
    border-top: 1px solid var(--opcon-hairline);
    padding-top: var(--opcon-space-s);
}
.opcon-mine > summary {
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--opcon-fs-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--opcon-meta);
}
.opcon-mine__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--opcon-space-m);
    margin-top: var(--opcon-space-s);
}

@media (min-width: 900px) {
    .opcon-hero { grid-template-columns: 7fr 5fr; }
    /* Marke »Work in progress« rechts über der Karte, der Text läuft links über beide Zeilen. */
    .opcon-hero:has(> .opcon-wip) { grid-template-rows: auto 1fr; }
    .opcon-hero > .opcon-wip { grid-column: 2; grid-row: 1; }
    .opcon-hero:has(> .opcon-wip) > .opcon-hero__text { grid-column: 1; grid-row: 1 / span 2; }
    .opcon-hero:has(> .opcon-wip) > .opcon-hero-card { grid-column: 2; grid-row: 2; }
    .opcon-two { grid-template-columns: 5fr 7fr; }
    .opcon-mine__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 600px) {
    .opcon-home { padding-top: var(--opcon-space-m); }
    .opcon-topics { grid-template-columns: 1fr 1fr; }
    .opcon-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--opcon-space-2xs);
    }
    .opcon-card { padding: var(--opcon-space-m); }
}

/* Fußzeile (05 Abschnitt 3.6): dunkel, drei Spalten ab 900 px, gestapelt darunter. */
.opcon-footer {
    background: var(--opcon-bg-dark);
    color: var(--opcon-on-dark);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--opcon-fs-meta);
    line-height: 1.5;
    padding: var(--opcon-space-2xl) var(--opcon-space-s);
    text-align: start;
    flex-shrink: 0;
}
.opcon-footer a {
    color: var(--opcon-accent-on-dark);
    margin: 0;
}
.opcon-footer__inner {
    max-width: var(--opcon-content-width);
    margin-inline: auto;
}
.opcon-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--opcon-space-l);
}
.opcon-footer__title {
    font-weight: 700;
    font-size: var(--opcon-fs-body);
    margin: 0 0 var(--opcon-space-2xs);
}
.opcon-footer__label {
    font-size: var(--opcon-fs-byline);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 0 0 var(--opcon-space-xs);
}
.opcon-footer p {
    margin: 0 0 var(--opcon-space-xs);
}
.opcon-footer__logo {
    display: block;
    width: var(--opcon-logo-width);
    height: auto;
    margin: var(--opcon-space-xs) 0 var(--opcon-space-s);
}
/* Das BMFTR-Logo liegt nur mit weißem Grund vor; die Kachel ist die Lösung, kein Freistellen. */
.opcon-footer__funder {
    display: inline-block;
    background: #ffffff;
    padding: var(--opcon-space-xs);
    margin: var(--opcon-space-xs) 0;
}
.opcon-footer__funder img {
    display: block;
    width: 200px;
    height: auto;
}
.opcon-footer__links {
    margin-top: var(--opcon-space-l);
    padding-top: var(--opcon-space-s);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--opcon-space-xs) var(--opcon-space-m);
}
.opcon-footer__links:empty {
    display: none;
}
@media (min-width: 900px) {
    .opcon-footer__cols { grid-template-columns: 5fr 4fr 3fr; }
}

/* ============================================================================
 * 6 print (feste px-Werte: dompdf kennt weder clamp() noch @layer)
 * ========================================================================== */

/* stylelint-disable scale-unlimited/declaration-strict-value --
 * Der Druck trägt feste pt- und Hex-Werte, weil dompdf weder var() noch clamp() auflöst:
 * ein Token wäre hier ein Wert, den der Renderer verwirft. Die Ausnahme gilt der ganzen
 * Sektion, ihr Umfang steht in der Decke des Token-Ratchets (token-discipline.md). */

@media print {
    #header.opcon-header,
    .opcon-footer,
    .back-to-top {
        display: none;
    }
    body {
        font-family: "PT Serif", Georgia, serif;
        font-size: 11pt;
        color: #000;
    }
    h1, h2, h3, h4 {
        font-family: "Barlow Semi Condensed", Arial, sans-serif;
        color: #000;
    }
    h1 { font-size: 22pt; }
    h2 { font-size: 15pt; }
    h3 { font-size: 13pt; }
    h4 { font-size: 12pt; }
    /* Dieselbe Doppel-Ebene wie in Sektion 3, hier ausgeschrieben: dompdf kennt :is() nicht,
     * und ein Selektor, den der Renderer verwirft, lässt die Lesebreite im PDF stehen. */
    .page-content > p,
    .page-content > ul,
    .page-content > ol,
    .page-content > blockquote,
    .page-content > .callout,
    .page-content > [dir] > p,
    .page-content > [dir] > ul,
    .page-content > [dir] > ol,
    .page-content > [dir] > blockquote,
    .page-content > [dir] > .callout {
        max-width: none;
    }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    .callout {
        background: none;
        border: 1px solid #555;
        border-inline-start-width: 3px;
    }
    .opcon-pill {
        border: 1px solid #555;
        background: none;
        color: #000;
    }
    /* Einzeilige Lizenz- und Förderzeile am Ende jeder gedruckten Seite. */
    .page-content::after {
        content: "Toolbox Konsortialfinanzierung \00B7 CC BY-SA 4.0 \00B7 Open Constitutionalism (OpCon) \00B7 verfassungsblog.de \00B7 Gefördert durch BMFTR, FKZ 01UG2403";
        display: block;
        margin-top: 24px;
        padding-top: 8px;
        border-top: 1px solid #555;
        font-family: "Barlow Semi Condensed", Arial, sans-serif;
        font-size: 8pt;
        color: #555;
    }
}

/* stylelint-enable scale-unlimited/declaration-strict-value */