/* ═══════════════════════════════════════════════════════════════════
   prüfungsgenerator.de | Designsystem „Tinte auf Papier"
   ═══════════════════════════════════════════════════════════════════
   Haltung: ruhig, hochwertig, fast monochrom. Struktur entsteht durch
   Haarlinien und Weißraum, nicht durch Schatten, Farbflächen oder
   Verläufe. Genau EIN Akzentton (--accent) trägt Aktionen und Marke.

   Liegt als Layer über Bootstrap 5.3 (CDN). Bootstrap-Variablen werden
   im Abschnitt „Bootstrap-Brücke" auf diese Tokens umgebogen, damit
   bestehende Utility-Klassen in den Templates weiter funktionieren.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ──────────────────────────────────────────────────── */
:root {
    /* Tinte: die einzige „Farbe", die Text trägt */
    --ink:        #14161a;  /* Überschriften, Fließtext        17.5:1 */
    --ink-2:      #4a4e55;  /* Sekundärtext                     8.0:1 */
    --ink-3:      #6e727a;  /* Meta, Labels                     4.6:1 */
    --ink-4:      #a2a6ac;  /* nur Deko/Disabled, nie Fließtext      */

    /* Papier */
    --paper:      #faf9f6;  /* Seitengrund, warm gebrochen            */
    --paper-2:    #f2f0ea;  /* eingelassene Flächen, Tabellenkopf     */
    --surface:    #ffffff;  /* Karten, Formularfelder                 */

    /* Haarlinien: das tragende Strukturelement */
    --rule:       #e4e1d9;
    --rule-2:     #cfcbc1;
    --rule-ink:   #14161a;

    /* Der eine Akzent: Korrekturstift */
    --accent:     #8a3324;  /* Links, Marke, Ziffern            7.8:1 */
    --accent-2:   #6e2819;  /* Hover/aktiv                            */
    --accent-3:   #f6efec;  /* Lasur, sehr sparsam                    */

    /* Semantik: nie allein tragend, immer mit Icon und Wort */
    --ok:         #1f6b43;  --ok-bg:   #eef4f0;
    --warn:       #8a6320;  --warn-bg: #f7f2e8;
    --bad:        #b3271a;  --bad-bg:  #f9eeec;

    /* Schrift */
    --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Typografische Skala */
    --t-display: clamp(2.6rem, 6.2vw, 4.6rem);
    --t-h1:      clamp(2.1rem, 4.4vw, 3.1rem);
    --t-h2:      clamp(1.7rem, 3.2vw, 2.4rem);
    --t-h3:      1.3125rem;
    --t-h4:      1.0625rem;
    --t-body:    1.0625rem;   /* 17px, bewusst über Bootstrap-Default */
    --t-small:   0.9375rem;
    --t-meta:    0.8125rem;
    --t-label:   0.75rem;

    /* Raum: großzügig, das ist der Kern der Richtung */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
    --s-9: 6rem;     --s-10: 8rem;
    --section-y: clamp(3.5rem, 8vw, 7rem);

    /* Radien: nahezu rechtwinklig, das wirkt ruhig */
    --r-sm: 3px;  --r: 5px;  --r-lg: 8px;

    /* Maße */
    --w-page:  1140px;
    --w-prose: 68ch;
    --w-narrow: 560px;

    /* Bewegung */
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
    --dur:  150ms;
}

/* ─── 2. Bootstrap-Brücke ────────────────────────────────────────── */
:root {
    /* Hoehe der Kopfzeile, siehe .pg-header-inner. */
    --header-h: 68px;

    --bs-body-bg:            var(--paper);
    --bs-body-color:         var(--ink);
    --bs-body-font-family:   var(--sans);
    --bs-body-font-size:     var(--t-body);
    --bs-body-line-height:   1.65;
    --bs-emphasis-color:     var(--ink);
    --bs-secondary-color:    var(--ink-2);
    --bs-tertiary-color:     var(--ink-3);
    --bs-border-color:       var(--rule);
    --bs-border-radius:      var(--r);
    --bs-border-radius-sm:   var(--r-sm);
    --bs-border-radius-lg:   var(--r-lg);
    --bs-border-radius-xl:   var(--r-lg);
    --bs-primary:            var(--accent);
    --bs-primary-rgb:        138, 51, 36;
    --bs-link-color:         var(--ink);
    --bs-link-hover-color:   var(--accent);
    --bs-link-color-rgb:     20, 22, 26;
    --bs-link-hover-color-rgb: 138, 51, 36;
    --bs-success:            var(--ok);
    --bs-warning:            var(--warn);
    --bs-danger:             var(--bad);
    --bs-focus-ring-color:   rgba(138, 51, 36, 0.28);
    --bs-focus-ring-width:   3px;
}

/* ─── 3. Basis ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
}

::selection { background: var(--accent); color: var(--paper); }

/* Sichtbarer, konsistenter Fokus. Nie entfernen. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.pg-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--ink);
    color: var(--paper);
    padding: var(--s-3) var(--s-5);
    border-radius: 0 0 var(--r) 0;
    font-size: var(--t-small);
    font-weight: 600;
}
.pg-skip:focus { left: 0; color: var(--paper); }

/* ─── 4. Typografie ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.18;
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { text-wrap: pretty; }

/* Das große, ruhige Display: Regular statt Bold, dafür groß. */
.pg-display {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-display);
    line-height: 1.03;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

/* Kleines Versal-Label über Abschnitten und Karten. */
.pg-label {
    display: block;
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 var(--s-4);
}
.pg-label--accent { color: var(--accent); }

.pg-lead {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 52ch;
}

.pg-prose { max-width: var(--w-prose); }
.pg-prose p + p { margin-top: var(--s-4); }

/* Links tragen standardmäßig KEINEN Unterstrich. Die meisten Links dieser
   Oberfläche sind Bedienelemente (Kacheln, Zeilen, Navigation), bei denen ein
   Unterstrich nur Unruhe erzeugt. Eine Allowlist der Ausnahmen wäre fehler-
   anfällig: jede neue Komponente müsste dort nachgetragen werden. Deshalb ist
   die Regel umgedreht und der Unterstrich wird gezielt dort gesetzt, wo ein
   Link mitten im Fließtext steht. */
a {
    color: var(--ink);
    text-decoration: none;
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--accent); }

/* Fließtext-Links: unterstrichen, damit sie nicht allein über Farbe erkennbar sind. */
.pg-prose a, .pg-faq-body a, .pg-auth-foot a, .pg-empty p a, .form-text a, .pg-link {
    text-decoration: underline;
    text-decoration-color: var(--rule-2);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
.pg-prose a:hover, .pg-faq-body a:hover, .pg-auth-foot a:hover,
.pg-empty p a:hover, .form-text a:hover, .pg-link:hover {
    text-decoration-color: var(--accent);
}

a.pg-quiet { color: var(--ink-2); }
a.pg-quiet:hover { color: var(--accent); }

/* Textlink-CTA mit Pfeil: die ruhigste Handlungsaufforderung. */
.pg-textlink {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 600;
    font-size: var(--t-small);
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
    min-height: 44px;
}
.pg-textlink:hover { color: var(--accent-2); border-color: var(--accent-2); }
.pg-textlink i { transition: transform var(--dur) var(--ease); }
.pg-textlink:hover i { transform: translateX(3px); }

/* ─── 5. Layout-Primitive ────────────────────────────────────────── */
.container, .container-fluid { padding-inline: var(--s-5); }
@media (min-width: 1200px) { .container { max-width: var(--w-page); } }

.pg-section { padding-block: var(--section-y); }
.pg-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Haarlinie als Trenner zwischen Abschnitten. */
.pg-section + .pg-section { border-top: 1px solid var(--rule); }

.pg-rule { height: 1px; background: var(--rule); border: 0; margin: var(--s-6) 0; }
.pg-rule--ink { background: var(--rule-ink); height: 2px; width: 64px; margin-inline: 0; }

/* Abschnittskopf: Label, Überschrift, optionaler Beisatz, linksbündig. */
.pg-head { margin-bottom: var(--s-7); max-width: 60ch; }
.pg-head h2 { margin: 0 0 var(--s-3); }
.pg-head p { color: var(--ink-2); margin: 0; max-width: 56ch; }

/* Kopfzeile mit Titel links und Aktionen rechts (App-Seiten). */
.pg-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--s-6);
}
.pg-pagehead h1 { margin: 0; }
.pg-pagehead .pg-pagehead-meta { color: var(--ink-3); font-size: var(--t-meta); margin-top: var(--s-2); }
.pg-pagehead-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ─── 6. Kopfzeile / Navigation ──────────────────────────────────── */
.pg-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.pg-header-inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    /*
     * Die Hoehe steht hier und nur hier. Zwei Klappmenues haengen daran, das
     * Ausklappmenue der Navigation und der Kinder-Umschalter: beide setzen
     * ihr `top` auf --header-h. Vorher trugen sie den Wert als Rueckfall
     * doppelt, waehrend die Variable nirgends gesetzt war. Wer die Kopfzeile
     * hoeher macht, haette damit beide Panels verschoben, ohne es zu merken.
     */
    min-height: var(--header-h);
}

.pg-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--serif);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-right: auto;
    white-space: nowrap;
}
/* Die Bildmarke sitzt optisch etwas hoch, wenn sie an der Mittelachse des
   Schriftzugs ausgerichtet wird. Ein Hauch nach unten gleicht das aus. */
.pg-brand .pg-mark { flex: 0 0 auto; }
.pg-brand-text { display: inline-block; }
.pg-brand:hover { color: var(--ink); }
.pg-brand .pg-brand-tld { color: var(--accent); }

.pg-nav { display: flex; align-items: center; gap: var(--s-1); }

.pg-navlink {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-3);
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--ink-2);
    transition: color var(--dur) var(--ease);
}
.pg-navlink:hover { color: var(--ink); }
/* Aktiver Zustand: feiner Akzentstrich, keine Farbfläche. */
.pg-navlink.is-active { color: var(--ink); font-weight: 600; }
.pg-navlink.is-active::after {
    content: '';
    position: absolute;
    left: var(--s-3);
    right: var(--s-3);
    bottom: 14px;
    height: 1px;
    background: var(--accent);
}

.pg-nav-sep { width: 1px; height: 20px; background: var(--rule); margin-inline: var(--s-2); }

/* ── Kinder-Umschalter ────────────────────────────────────────────
   Steht neben der Marke, nicht in .pg-nav: auf dem Telefon klappt die
   Navigation zusammen, der Name des aktiven Kindes muss aber ohne Tipp
   lesbar bleiben. Natives <details>, kein nachgebautes Klappmenü. */
.pg-kid { position: relative; flex: 0 0 auto; }

.pg-kid-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0 var(--s-3);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: border-color var(--dur) var(--ease);
}
/* Das Standarddreieck der Browser weicht vom Rest der Oberfläche ab, der
   eigene Winkel rechts ersetzt es. */
.pg-kid-summary::-webkit-details-marker { display: none; }
.pg-kid-summary::marker { content: ''; }
.pg-kid-summary:hover { border-color: var(--ink); }
.pg-kid[open] .pg-kid-summary { border-color: var(--ink); }
.pg-kid-for { color: var(--ink-3); font-weight: 500; }
.pg-kid-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.pg-kid-caret { font-size: 0.75rem; color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.pg-kid[open] .pg-kid-caret { transform: rotate(180deg); }

.pg-kid-panel {
    position: absolute;
    top: calc(100% + var(--s-2));
    right: 0;
    z-index: 200;
    width: max-content;
    min-width: 15rem;
    max-width: min(20rem, calc(100vw - var(--s-5)));
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: var(--r);
}
.pg-kid-heading { margin-bottom: var(--s-2); }

.pg-kid-list { list-style: none; margin: 0; padding: 0; }
.pg-kid-list li + li { border-top: 1px solid var(--rule); }
.pg-kid-list form { margin: 0; }

.pg-kid-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    min-height: 44px;
    padding: var(--s-2) 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--t-small);
    text-align: left;
    color: var(--ink-2);
    cursor: pointer;
}
.pg-kid-item:hover { color: var(--ink); }
.pg-kid-item--active { color: var(--ink); font-weight: 600; cursor: default; }
.pg-kid-item--active .bi { color: var(--accent); }
.pg-kid-item-text { display: flex; flex-direction: column; line-height: 1.3; }
.pg-kid-item-meta { font-size: var(--t-meta); font-weight: 400; color: var(--ink-3); }

.pg-kid-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule);
    font-size: var(--t-meta);
}
.pg-kid-foot a { color: var(--ink-2); }
.pg-kid-foot a:hover { color: var(--accent); }

/* Konto ohne Profil: kein leerer Umschalter, sondern der Weg zum Anlegen. */
.pg-kid-empty {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 var(--s-3);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--accent-3);
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}
.pg-kid-empty:hover { color: var(--accent-2); border-color: var(--accent-2); }

.pg-navtoggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 1.125rem;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .pg-navtoggle { display: inline-flex; }
    /* Offen fuellt das Menue den gesamten Rest-Viewport. Ein Panel, das nur
       einen Teil ueberdeckt, laesst den Hero mitten im Satz durchblitzen und
       wirkt bei gleicher Papierfarbe wie kaputtes Layout. */
    .pg-nav {
        display: none;
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-top: 1px solid var(--rule);
        padding: var(--s-2) var(--s-5) var(--s-5);
    }
    .pg-nav.is-open { display: flex; }
    /* Seite hinter dem offenen Menue nicht mitscrollen. */
    body.pg-nav-open { overflow: hidden; }
    .pg-navlink { min-height: 48px; padding-inline: 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
    .pg-navlink.is-active::after { left: 0; right: auto; width: 20px; bottom: 12px; }
    .pg-nav-sep { display: none; }
    .pg-nav .btn { margin-top: var(--s-4); min-height: 48px; }
    /* Marke, Kinder-Umschalter und Menüknopf teilen sich eine Zeile. */
    .pg-header-inner { gap: var(--s-3); }
}

@media (max-width: 575.98px) {
    /* Auf schmalen Telefonen weicht der Schriftzug, die Bildmarke bleibt und
       bleibt verlinkt. Für wen gerade gearbeitet wird, ist unterwegs
       wichtiger als der ausgeschriebene Name der Seite. Nur im angemeldeten
       Zustand, die Werbe-Kopfzeile behält ihren Schriftzug. */
    .pg-header--app .pg-brand-text { display: none; }
    /* Das Klappmenü hängt hier am Fensterrand statt am Umschalter. Am
       Umschalter ausgerichtet ragte es auf einem 320px-Telefon links aus dem
       Bild. Die Kopfzeile klebt oben, also ist fixed die richtige Bindung. */
    .pg-kid-panel {
        position: fixed;
        top: calc(var(--header-h) + var(--s-2));
        right: var(--s-3);
        left: var(--s-3);
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* ─── 7. Schaltflächen ───────────────────────────────────────────── */
.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.6875rem;
    --bs-btn-font-size: var(--t-small);
    --bs-btn-border-radius: var(--r);
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
    box-shadow: none !important;
}

/* Primär = massive Tinte. Der Akzent bleibt für Marke und Links frei. */
.btn-primary {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-color: var(--paper);
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-hover-color: var(--paper);
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: var(--ink-4);
    --bs-btn-disabled-border-color: var(--ink-4);
}

/* Sekundär = Umriss auf Haarlinie. */
.btn-outline-primary, .btn-outline-secondary, .btn-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--rule-2);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: var(--paper-2);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-active-color: var(--ink);
    --bs-btn-disabled-color: var(--ink-4);
    --bs-btn-disabled-border-color: var(--rule);
}

/* Akzent-Schaltfläche: nur für die eine wichtigste Handlung pro Seite. */
.btn-accent {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--accent-2);
    --bs-btn-hover-border-color: var(--accent-2);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--accent-2);
    --bs-btn-active-color: #fff;
}

.btn-outline-danger {
    --bs-btn-color: var(--bad);
    --bs-btn-border-color: var(--rule-2);
    --bs-btn-hover-bg: var(--bad);
    --bs-btn-hover-border-color: var(--bad);
    --bs-btn-hover-color: #fff;
}

.btn-success { --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-hover-bg: #185536; --bs-btn-hover-border-color: #185536; }

.btn-lg {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 0.875rem;
    --bs-btn-font-size: 1rem;
    min-height: 52px;
}
.btn-sm {
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-font-size: var(--t-meta);
    min-height: 38px;
}

.btn-link { --bs-btn-color: var(--accent); --bs-btn-hover-color: var(--accent-2); text-decoration: none; }

/* ─── 8. Flächen: Karten, Tafeln, Zeilen ─────────────────────────── */
/* Karten tragen eine Haarlinie, keinen Schatten. */
.pg-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    padding: var(--s-5);
}
@media (min-width: 768px) { .pg-card { padding: var(--s-6); } }

.pg-card--flat { background: transparent; border: 0; padding: 0; }
.pg-card--inset { background: var(--paper-2); border-color: transparent; }

.pg-card-title {
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--rule);
}
.pg-card-title .pg-count { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink-4); }

/* Dialoge tragen dieselbe Haarlinie wie Karten, keinen Schatten und kein
   Bootstrap-Grau: der Dialog gehoert zur Seite und nicht zum Browser. */
.pg-modal .modal-content {
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: var(--r);
}
.pg-modal .modal-header,
.pg-modal .modal-footer { border-color: var(--rule); padding: var(--s-4) var(--s-5); }
.pg-modal .modal-body { padding: var(--s-5); }
.pg-modal .modal-title {
    font-family: var(--serif);
    font-size: var(--t-h4);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.pg-modal .form-text { color: var(--ink-3); font-size: var(--t-meta); }

/* Interaktive Kachel: Hover verschiebt nichts, sondern verdichtet die Linie. */
.pg-tile {
    display: block;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    padding: var(--s-4) var(--s-5);
    color: var(--ink);
    height: 100%;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pg-tile:hover { border-color: var(--ink); color: var(--ink); }

/* Listenzeile mit Haarlinie, ersetzt die früheren Karten-Stapel. */
.pg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--rule);
}
.pg-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pg-row:first-child { padding-top: 0; }
.pg-row-main { min-width: 0; flex: 1 1 20rem; }
.pg-row-title { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; margin-bottom: var(--s-1); }
.pg-row-title a { text-decoration: none; }
.pg-row-title a:hover { color: var(--accent); }
.pg-row-meta {
    font-size: var(--t-meta);
    color: var(--ink-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
}
.pg-row-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* Definitionsliste für Kennzahlen. */
.pg-facts { margin: 0; }
.pg-facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
}
.pg-facts > div:last-child { border-bottom: 0; }
.pg-facts dt { color: var(--ink-2); font-weight: 400; font-size: var(--t-small); }
.pg-facts dd {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

/* ─── 9. Nummerierte Schrittliste (01 / 02 / 03) ─────────────────── */
.pg-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pg-steps li {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
    padding: var(--s-5) 0;
    border-bottom: 1px solid var(--rule);
}
.pg-step-num {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.pg-step-body h3 { font-size: var(--t-h4); margin: 0 0 var(--s-2); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.pg-step-body p { margin: 0; color: var(--ink-2); font-size: var(--t-small); max-width: 54ch; }

/* ─── 10. Typografischer Fächer-Index ────────────────────────────── */
/* Ersetzt 19 identische Icon-Kacheln durch einen dichten Sachindex. */
.pg-index {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--s-7);
    border-top: 1px solid var(--rule);
}
@media (min-width: 768px)  { .pg-index { columns: 3; } }
@media (min-width: 1100px) { .pg-index { columns: 4; } }
.pg-index li { break-inside: avoid; }
.pg-index-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-size: var(--t-small);
    font-weight: 500;
    transition: color var(--dur) var(--ease);
}
.pg-index-item:hover { color: var(--accent); }
.pg-index-item .pg-index-mark {
    font-size: var(--t-meta);
    color: var(--ink-4);
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pg-index-item:hover .pg-index-mark { color: var(--accent); transform: translateX(2px); }

/* Kompakte Zahlenreihe für Klassenstufen. */
.pg-grades { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.pg-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 48px;
    padding: 0 var(--s-3);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    font-family: var(--serif);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pg-grade:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ─── 11. Marken, Chips, Meta ────────────────────────────────────── */
.badge, .pg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-family: var(--sans);
    font-size: var(--t-meta);
    font-weight: 500;
    line-height: 1.4;
    padding: 0.25rem 0.5rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink-2);
}
.pg-chip--accent { border-color: var(--accent); color: var(--accent); background: var(--accent-3); }
.pg-chip--ink { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* Chips, die Links sind, brauchen eine tippbare Hoehe. */
a.pg-chip { min-height: 32px; padding-block: 0.375rem; }
a.pg-chip:hover { border-color: var(--ink); color: var(--ink); }

/* Inline-Textregister (z. B. Faecherliste): tippbare Flaechen statt blanker
   Textzeilen, WCAG-Mindesthoehe fuer Touch. */
.pg-taglist a { display: inline-block; padding-block: 0.3rem; }

/* Schlichte Linkliste, eine Zeile pro Eintrag (Bundeslaender-Auswahl). */
.pg-linklist { list-style: none; margin: 0; padding: 0; }
.pg-linklist li + li { border-top: 1px solid var(--rule); }
.pg-linklist a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--ink-2);
    transition: color var(--dur) var(--ease);
}
.pg-linklist a:hover { color: var(--ink); }

.badge.text-bg-light   { background: var(--surface) !important; color: var(--ink-2) !important; border-color: var(--rule); }
.badge.text-bg-primary { background: var(--ink) !important;  color: var(--paper) !important;  border-color: var(--ink); }
.badge.text-bg-success { background: var(--ok-bg) !important;   color: var(--ok) !important;   border-color: rgba(31,107,67,.3); }
.badge.text-bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; border-color: rgba(138,99,32,.3); }
.badge.text-bg-danger  { background: var(--bad-bg) !important;  color: var(--bad) !important;  border-color: rgba(179,39,26,.3); }
.badge.text-bg-secondary { background: var(--paper-2) !important; color: var(--ink-2) !important; border-color: var(--rule); }

/* Punktetrenner-Liste für Metazeilen. */
.pg-dotlist { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-meta); color: var(--ink-3); }
.pg-dotlist > * + *::before { content: '·'; margin-right: var(--s-3); color: var(--ink-4); }

/* ─── 12. Formulare ──────────────────────────────────────────────── */
.form-label {
    font-family: var(--sans);
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s-2);
}
.form-control, .form-select {
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: var(--r);
    color: var(--ink);
    font-size: var(--t-small);
    padding: 0.6875rem 0.875rem;
    min-height: 46px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control::placeholder { color: var(--ink-4); }
.form-control:focus, .form-select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(138, 51, 36, 0.14);
    outline: none;
}
.form-control:disabled, .form-select:disabled { background: var(--paper-2); color: var(--ink-3); }
textarea.form-control { min-height: 96px; line-height: 1.6; }

.form-text { font-size: var(--t-meta); color: var(--ink-3); margin-top: var(--s-2); }

.form-check { padding-left: 1.75rem; min-height: 28px; }
.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-left: -1.75rem;
    margin-top: 0.28rem;
    border-color: var(--rule-2);
    background-color: var(--surface);
    cursor: pointer;
}
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(138, 51, 36, 0.14); }
.form-check-label { cursor: pointer; font-size: var(--t-small); line-height: 1.55; }

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bad); }
.form-control.is-valid,   .form-select.is-valid   { border-color: var(--ok); }
.invalid-feedback { color: var(--bad); font-size: var(--t-meta); }
.invalid-feedback:empty { display: none; }

/* Symfony rendert Formularfehler als <ul><li>. Ohne eigene Regel erbt die
   Liste Aufzählungspunkte und Einzug und sieht aus wie Fließtext. */
.pg-errors ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.pg-errors li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    color: var(--bad);
    font-size: var(--t-meta);
    line-height: 1.5;
    padding: 2px 0;
}
.pg-errors li::before {
    content: '!';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border: 1px solid var(--bad);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}
.pg-errors:empty { display: none; }

/* Feldgruppe mit Beschriftung, Feld und Hilfetext als Einheit. */
.pg-field { margin-bottom: var(--s-5); }
.pg-field:last-child { margin-bottom: 0; }

/* ─── 13. Tabellen ───────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    color: var(--ink);
    font-size: var(--t-small);
    border-color: var(--rule);
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: var(--s-3) var(--s-3); background: transparent; }
.table thead th, .table thead.table-light th {
    background: transparent !important;
    color: var(--ink-3) !important;
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--rule-2) !important;
    white-space: nowrap;
}
.table tbody tr { border-color: var(--rule); }
.table tbody tr:hover > * { background: var(--paper-2); }
.table td { vertical-align: middle; }

/* Tabellen dürfen nie die Seite horizontal schieben. */
.pg-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── 14. Hinweise / Flash-Meldungen ─────────────────────────────── */
.alert {
    border-radius: var(--r);
    border: 1px solid var(--rule);
    border-left-width: 3px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--t-small);
    padding: var(--s-4) var(--s-5);
}
.alert-success { background: var(--ok-bg);   border-color: rgba(31,107,67,.25);  border-left-color: var(--ok);   color: #12482d; }
.alert-danger  { background: var(--bad-bg);  border-color: rgba(179,39,26,.25);  border-left-color: var(--bad);  color: #7d1b12; }
.alert-warning { background: var(--warn-bg); border-color: rgba(138,99,32,.25);  border-left-color: var(--warn); color: #5f4415; }
.alert-info    { background: var(--paper-2); border-color: var(--rule);          border-left-color: var(--ink-3); color: var(--ink); }
.alert .btn-close { --bs-btn-close-opacity: .45; }

/* ─── 15. Blätterfunktion ────────────────────────────────────────── */
.pagination { --bs-pagination-border-radius: var(--r-sm); gap: var(--s-1); }
.page-link {
    border: 1px solid transparent;
    color: var(--ink-2);
    background: transparent;
    font-size: var(--t-small);
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.page-link:hover { background: var(--paper-2); color: var(--ink); border-color: var(--rule); }
.page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-item.disabled .page-link { color: var(--ink-4); background: transparent; border-color: transparent; }

/* ─── 16. Papierbogen: die Produktvorschau ───────────────────────── */
/* Zeigt Eltern, was sie tatsächlich bekommen: ein Aufgabenblatt. */
/* Kein angedeuteter Heftrand: eine senkrechte Linie im Bogen liegt zwangs-
   läufig über dem Text, weil die Aufgabenzeilen die volle Breite nutzen. */
.pg-sheet {
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    padding: var(--s-6) var(--s-5);
    max-width: 460px;
}
@media (min-width: 768px) { .pg-sheet { padding: var(--s-7) var(--s-6); } }
.pg-sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--ink);
}
.pg-sheet-title { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; margin: 0; }
.pg-sheet-meta { font-size: var(--t-label); color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pg-sheet-q { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: var(--s-2) var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-small); }
.pg-sheet-q:last-of-type { border-bottom: 0; }
.pg-sheet-num { font-family: var(--serif); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pg-sheet-pts { font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-sheet-foot { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-size: var(--t-meta); color: var(--ink-3); }
/* Notiz am Rand, wie mit Korrekturstift ergänzt. */
.pg-sheet-note {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-meta);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--surface);
    padding: var(--s-2) var(--s-3);
}

/* ─── 17. Preisdarstellung ───────────────────────────────────────── */
.pg-price {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    font-family: var(--serif);
    margin: 0 0 var(--s-2);
}
.pg-price-amount { font-size: 2.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.pg-price-unit { font-family: var(--sans); font-size: var(--t-small); color: var(--ink-3); font-weight: 400; }
/* Der Steuersatz gehoert unter den Preis, nicht daneben: er ist eine
   Pflichtangabe und keine zweite Zeile derselben Wichtigkeit. */
.pg-price-tax { display: block; font-size: var(--t-meta); color: var(--ink-3); }

.pg-checklist { list-style: none; margin: 0; padding: 0; }
.pg-checklist li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-small);
    color: var(--ink-2);
}
.pg-checklist li:last-child { border-bottom: 0; }
.pg-checklist li i { color: var(--accent); font-size: 0.875rem; margin-top: 0.28em; }

/* ─── 18. Häufige Fragen ─────────────────────────────────────────── */
.pg-faq { border-top: 1px solid var(--rule); }
.pg-faq details { border-bottom: 1px solid var(--rule); }
.pg-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    min-height: 44px;
}
.pg-faq summary::-webkit-details-marker { display: none; }
/* Marker als reines Schriftzeichen, kein Icon-Font-Codepoint, der bei
   einem Bibliotheks-Update stillschweigend auf ein falsches Glyph zeigt. */
.pg-faq summary::after {
    content: '+';
    font-family: var(--sans);
    font-size: 1.375rem;
    line-height: 1;
    color: var(--ink-3);
    font-weight: 300;
    flex-shrink: 0;
}
.pg-faq details[open] summary::after { content: '\2212'; }
.pg-faq summary:hover { color: var(--accent); }
.pg-faq-body { padding: 0 0 var(--s-5); color: var(--ink-2); font-size: var(--t-small); max-width: 62ch; }
.pg-faq-body p:last-child { margin-bottom: 0; }

/* ─── 19. Vertrauensleiste ───────────────────────────────────────── */
.pg-trust { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pg-trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pg-trust { grid-template-columns: repeat(4, 1fr); } }
.pg-trust-item { padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.pg-trust-item h3 { font-family: var(--sans); font-size: var(--t-h4); font-weight: 600; letter-spacing: 0; margin: 0 0 var(--s-2); }
.pg-trust-item p { margin: 0; font-size: var(--t-small); color: var(--ink-2); }

/* ─── 20. Leerzustände ───────────────────────────────────────────── */
.pg-empty {
    text-align: center;
    padding: var(--s-8) var(--s-5);
    border: 1px dashed var(--rule-2);
    border-radius: var(--r);
    color: var(--ink-2);
}
.pg-empty h3 { font-size: var(--t-h4); font-family: var(--sans); font-weight: 600; letter-spacing: 0; margin: 0 0 var(--s-2); }
.pg-empty p { margin: 0 auto var(--s-5); max-width: 44ch; font-size: var(--t-small); }
.pg-empty p:last-child { margin-bottom: 0; }

/* ─── 21. Anmeldung / Registrierung ──────────────────────────────── */
.pg-auth { max-width: var(--w-narrow); margin: 0 auto; padding-block: clamp(2.5rem, 7vw, 5rem); }
.pg-auth h1 { font-size: var(--t-h2); margin: 0 0 var(--s-3); }
.pg-auth-sub { color: var(--ink-2); font-size: var(--t-small); margin-bottom: var(--s-6); }
.pg-auth-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s-6); }
@media (min-width: 640px) { .pg-auth-card { padding: var(--s-7); } }
.pg-auth-foot { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-small); color: var(--ink-2); text-align: center; }

/* Passwortstärke */
.pg-meter { display: flex; gap: 4px; margin: var(--s-3) 0 var(--s-2); }
.pg-meter span { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; transition: background-color var(--dur) var(--ease); }
.pg-meter[data-score="1"] span:nth-child(-n+1),
.pg-meter[data-score="2"] span:nth-child(-n+2) { background: var(--bad); }
.pg-meter[data-score="3"] span:nth-child(-n+3) { background: var(--warn); }
.pg-meter[data-score="4"] span:nth-child(-n+4),
.pg-meter[data-score="5"] span { background: var(--ok); }
.pg-rules { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--t-meta); color: var(--ink-3); }
.pg-rules li { display: flex; align-items: center; gap: var(--s-2); }
.pg-rules li.is-ok { color: var(--ok); }

/* ─── 22. Prüfungsansicht: Bewertungszustände ────────────────────── */
/* Zustand wird über Randstreifen UND Icon+Wort vermittelt, nie über Farbe allein. */
.pg-q { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); padding: var(--s-5); margin-bottom: var(--s-4); }
@media (min-width: 768px) { .pg-q { padding: var(--s-6); } }
.pg-q-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.pg-q-num { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; }
.pg-q-meta { font-size: var(--t-meta); color: var(--ink-3); }

.pg-graded-correct { border-left: 3px solid var(--ok); }
.pg-graded-partial { border-left: 3px solid var(--warn); }
.pg-graded-wrong   { border-left: 3px solid var(--bad); }

/* Antwortoptionen: einheitliches Grundmaß, damit markierte Zeilen nicht springen. */
.pg-q .form-check { padding: var(--s-2) var(--s-3) var(--s-2) 2.5rem; border-radius: var(--r-sm); margin-bottom: var(--s-1); border: 1px solid transparent; }
.pg-q .form-check .form-check-input { margin-left: -1.75rem; }
.pg-mc-correct { background: var(--ok-bg); border-color: rgba(31,107,67,.25) !important; }
.pg-mc-partial { background: var(--warn-bg); border-color: rgba(138,99,32,.25) !important; }
.pg-mc-wrong   { background: var(--bad-bg); border-color: rgba(179,39,26,.25) !important; }
.pg-mc-correct .form-check-input:checked { background-color: var(--ok); border-color: var(--ok); opacity: 1 !important; }
.pg-mc-wrong   .form-check-input:checked { background-color: var(--bad); border-color: var(--bad); opacity: 1 !important; }
.form-control.is-partial { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(138, 99, 32, 0.16); }

/* Ergebnisstand */
.pg-score { text-align: right; font-variant-numeric: tabular-nums; }
.pg-score-value { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.pg-score-label { font-size: var(--t-meta); color: var(--ink-3); margin-top: var(--s-1); }

/* Aufklappbare Musterlösung */
.pg-details { border-top: 1px solid var(--rule); margin-top: var(--s-4); padding-top: var(--s-3); }
.pg-details summary { cursor: pointer; font-size: var(--t-meta); color: var(--ink-3); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; min-height: 32px; display: flex; align-items: center; gap: var(--s-2); }
.pg-details summary:hover { color: var(--accent); }
.pg-details-body { margin-top: var(--s-3); padding: var(--s-4); background: var(--paper-2); border-radius: var(--r-sm); font-size: var(--t-small); }

/* ─── 23. Verwaltungsbereich ─────────────────────────────────────── */
.pg-admin-sidebar { background: var(--paper); border-right: 1px solid var(--rule); padding: var(--s-5) var(--s-3); }
.pg-admin-sidebar .nav-link {
    color: var(--ink-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--t-small);
    font-weight: 500;
    min-height: 40px;
    display: flex;
    align-items: center;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pg-admin-sidebar .nav-link:hover { background: var(--paper-2); color: var(--ink); }
.pg-admin-sidebar .nav-link.active { background: var(--ink); color: var(--paper); font-weight: 600; }
.pg-admin-content { padding: var(--s-6) var(--s-5); background: var(--paper); min-width: 0; }
@media (min-width: 992px) { .pg-admin-content { padding: var(--s-7) var(--s-6); } }

/* Kennzahl in der Verwaltung: große Serifenziffer auf ruhiger Fläche. */
.pg-stat-num {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ─── 24. Mathematische Inhalte (KaTeX) ──────────────────────────── */
.pg-math-content { white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; }
/* `$$…$$` inline halten, damit mehrschrittige Lösungen nicht zerfallen. */
.pg-math-content .katex-display { display: inline-block; margin: 0 .15em; text-align: left; }
/* Der Chip um eine Kurzantwort. Er sieht aus wie <code>, ist aber keines:
   KaTeX ueberspringt `code` und `pre` grundsaetzlich (ignoredTags, richtig so
   fuer echte Codebeispiele), und eine Kurzantwort wie `$2{,}02\text{ g/mol}$`
   stand deshalb als roher Quelltext auf der Seite. */
.pg-math-content code,
.pg-answer-chip {
    background: var(--paper-2);
    color: var(--ink);
    padding: 0.05em 0.35em;
    border-radius: var(--r-sm);
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ─── 25. Fußzeile ───────────────────────────────────────────────── */
.pg-footer { border-top: 1px solid var(--rule); background: var(--paper); margin-top: var(--section-y); padding-block: var(--s-7) var(--s-6); font-size: var(--t-small); }
.pg-footer-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pg-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pg-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
/* Spaltenlabels sind bewusst keine Ueberschriften: sie sollen nicht mit den
   inhaltlichen h2 der Seite in der Dokument-Gliederung konkurrieren. */
.pg-footer-heading { font-family: var(--sans); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-4); }
.pg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pg-footer a { color: var(--ink-2); font-size: var(--t-small); }
.pg-footer a:hover { color: var(--accent); }
.pg-footer-base { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); color: var(--ink-3); font-size: var(--t-meta); }

/* ─── 26. Hilfsklassen ───────────────────────────────────────────── */
.text-secondary { color: var(--ink-2) !important; }
small.text-secondary, .small.text-secondary { color: var(--ink-3) !important; }
.pg-muted { color: var(--ink-3); }
.pg-nums { font-variant-numeric: tabular-nums; }
.pg-stack > * + * { margin-top: var(--s-4); }
.pg-stack-lg > * + * { margin-top: var(--s-6); }
.pg-max-prose { max-width: var(--w-prose); }
.pg-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── 26b. Tippziele ─────────────────────────────────────────────── */
/* Auf Zeigegeräten ohne Feinauflösung (Finger) müssen Bedienelemente
   mindestens 44x44px messen. Auf Maus-Geräten dürfen sie kompakter bleiben,
   sonst wirken dichte Tabellen und Werkzeugleisten unnötig aufgeblasen. */
.pg-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.pg-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); }
.pg-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }

@media (pointer: coarse) {
    .btn-sm { min-height: 44px; --bs-btn-padding-y: 0.625rem; }
    .page-link { min-width: 44px; min-height: 44px; }
    /* Das Kontrollkästchen selbst misst nur 18px. Tappbar wird die ganze Zeile,
       indem die zugehörige Beschriftung auf volle Zeilenhöhe aufgezogen wird;
       ein Tipp irgendwo darauf schaltet das Kästchen. */
    .form-check { min-height: 44px; display: flex; align-items: center; }
    .form-check-input { margin-top: 0; flex-shrink: 0; }
    .form-check-label { display: flex; align-items: center; min-height: 44px; flex: 1 1 auto; }
    .pg-details summary { min-height: 44px; }
}

/* ─── 26b. Fortschritt beim Zusammenstellen ──────────────────────── */

/* Der Balken im Wizard, waehrend die Arbeit entsteht.

   Zwei Zustaende, und der Unterschied ist eine Aussage: kennt der Auftrag
   seine Laenge, steht hier echter Fortschritt in Prozent. Kennt er sie noch
   nicht, laeuft ein Streifen, der ueber die Strecke nichts behauptet, nur
   ueber die Verbindung. Ein Balken auf 0 Prozent sagt dagegen "es geht
   nicht voran", und das waere geraten.

   Bei prefers-reduced-motion friert der Streifen ein (Abschnitt 27). Damit
   er dann nicht wie ein leerer Balken aussieht, ist er breit genug, um auch
   stehend als Fuellung erkennbar zu sein. */
.pg-lauf-balken {
    height: 4px;
    background: var(--rule);
    border-radius: 2px;
    overflow: hidden;
}

.pg-lauf-fuellung {
    height: 100%;
    background: var(--accent);
    transition: width var(--dur) var(--ease);
}

.pg-lauf-fuellung--unbestimmt {
    width: 40%;
    animation: pg-lauf-wandern 1.6s var(--ease) infinite;
}

/* Steht es, steht auch der Streifen: eine Bewegung neben "Es geht gerade
   nicht weiter" waere ein Widerspruch. Blasser, damit der Stillstand auch
   zu sehen und nicht nur zu lesen ist. */
.pg-lauf-fuellung--ruht {
    width: 40%;
    background: var(--rule-2);
}

@keyframes pg-lauf-wandern {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

/* Der Kringel auf der Warteseite.

   Anders als im Wizard gibt es dort keine offene Verbindung, die von sich aus
   erzaehlt, wie weit sie ist: die Seite laedt sich alle paar Sekunden neu und
   steht dazwischen vollkommen still. Stillstand sieht aber aus wie ein Fehler,
   und genau das soll der Kringel widerlegen. Er behauptet dabei so wenig wie
   der wandernde Streifen: nichts ueber die verbleibende Zeit, nur dass
   gearbeitet wird.

   Haelt das Nachladen an, haelt auch der Kringel an (--ruht). Eine Drehung
   neben dem Satz "laedt sich nicht mehr von selbst neu" waere eine Luege, und
   die blasse Linie zeigt dasselbe wie --ruht am Balken: hier bewegt sich
   nichts mehr, bis jemand einen Knopf drueckt.

   Ein halber Ring in Akzent, kein Viertel: er sitzt in der Kartenzeile, und die
   ist mit 12 Pixeln die kleinste Schrift der Seite. Ein feiner Bogen waere dort
   nicht mehr als Drehung zu erkennen, sondern nur noch als Kreis.

   Alle Masse in em, damit er die Zeile traegt, in der er steht, und nicht die
   Zeile ihn. Bei prefers-reduced-motion (Abschnitt 27) bleibt er als ruhiger
   Ring stehen, der immer noch nach Zeichen und nicht nach Panne aussieht. */
.pg-kringel {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.2em;
    vertical-align: -0.4em;
    border: 0.17em solid var(--rule);
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    border-radius: 50%;
    animation: pg-kringel-drehen 900ms linear infinite;
}

.pg-kringel--ruht {
    border-color: var(--rule-2);
    animation: none;
}

@keyframes pg-kringel-drehen {
    to { transform: rotate(360deg); }
}

/* ─── 27. Bewegung & Druck ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .pg-header, .pg-footer, .pg-nav, .btn, .pg-skip, .pagination { display: none !important; }
    body { background: #fff; }
    .pg-card, .pg-sheet, .pg-q { border-color: #999; break-inside: avoid; }
    a { text-decoration: none; color: #000; }
}