/* ===========================================================================
   Frontend für Leichte und Einfache Sprache
   ---------------------------------------------------------------------------
   Gestaltungs-Grundsätze:

   - Kontrast vor Eleganz. Die Zielgruppe liest nicht gern grau auf weiß.
     Alle Text-Hintergrund-Paare halten mindestens WCAG AA (4,5:1).
   - Große Schrift. Grundgröße 1,125 rem, der Lesetext 1,1875 rem.
     Die Besucher können zusätzlich selbst vergrößern.
   - Systemschriften. Keine Web-Fonts von fremden Servern: das wäre eine
     Datenübermittlung und im Intranet oft gar nicht erreichbar.
   - Hell und dunkel. Folgt der Einstellung des Geräts, lässt sich umschalten.
   - Bewegung nur als Zugabe, abschaltbar über prefers-reduced-motion.
   =========================================================================== */

:root {
    /* Diese vier Werte überschreibt die Seite aus den Branding-Einstellungen. */
    --marke:        #1d6fb8;             /* Flächen */
    --marke-auf:    #ffffff;             /* Schrift auf diesen Flächen */
    --marke-text:   #1d6fb8;             /* Schrift auf hellem Grund */
    --marke-hell:   #4ea3e8;             /* Schrift auf dunklem Grund */
    --marke-tief:   #15537a;             /* Zeigefinger darauf */
    --marke-weich:  #eaf2f9;             /* ganz leichte Tönung */
    --marke-ring:   rgba(29,111,184,.35); /* Fokus-Ring */
    --schrift-skala: 100%;

    /* Flächen und Linien */
    --grund:        #f5f6f8;
    --karte:        #ffffff;
    --senke:        #fafbfc;
    --linie:        #dce0e6;
    --linie-stark:  #b9c0ca;

    /* Schrift */
    --text:         #15181c;
    --text-leise:   #4e5760;

    /* Zustände */
    --ok:           #1f6b36;
    --ok-flaeche:   #eef7f0;
    --ok-linie:     #bcdcc5;
    --warn:         #8a5200;
    --warn-flaeche: #fdf5e9;
    --warn-linie:   #e8d2ab;
    --fehler:       #a01b23;
    --fehler-flaeche: #fdf2f3;
    --fehler-linie: #e8bcbf;

    /* Form */
    --rund-s:  0.5rem;
    --rund:    0.875rem;
    --rund-l:  1.25rem;
    --schatten:    0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --schatten-l:  0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.07);
    --ring:        0 0 0 3px var(--marke-ring);

    --kopf-glas: rgba(255, 255, 255, 0.86);
    /* Abstände. Ein Wert pro Stufe, damit überall derselbe Rhythmus gilt. */
    --luft-1: 0.5rem;
    --luft-2: 0.75rem;
    --luft-3: 1.15rem;
    --luft-4: 1.6rem;
    --luft-5: 2rem;
    --luft-6: 2.5rem;
    --luft-7: 4rem;

    --breite: 84rem;
    --lesebreite: 46rem;
}

/* --- Dunkelmodus: folgt dem Gerät, außer der Besucher wählt ausdrücklich hell --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --marke-weich:    #1e2730;
        --kopf-glas:      rgba(23, 26, 32, 0.86);
        --marke-text:     var(--marke-hell);
        --grund:          #0f1115;
        --karte:          #171a20;
        --senke:          #1c2026;
        --linie:          #2b3139;
        --linie-stark:    #3d444e;
        --text:           #e9ebef;
        --text-leise:     #a3abb6;
        --ok:             #6cc083;
        --ok-flaeche:     #16241a;
        --ok-linie:       #2f5338;
        --warn:           #e0b063;
        --warn-flaeche:   #241d10;
        --warn-linie:     #574424;
        --fehler:         #f09296;
        --fehler-flaeche: #261518;
        --fehler-linie:   #5a2e33;
        --schatten:       0 1px 2px rgba(0, 0, 0, 0.3);
        --schatten-l:     0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    }
}

/* --- Ausdrücklich dunkel gewählt --- */
:root[data-theme="dark"] {
        --marke-weich:    #1e2730;
        --kopf-glas:      rgba(23, 26, 32, 0.86);
    --marke-text:     var(--marke-hell);
    --grund:          #0f1115;
    --karte:          #171a20;
    --senke:          #1c2026;
    --linie:          #2b3139;
    --linie-stark:    #3d444e;
    --text:           #e9ebef;
    --text-leise:     #a3abb6;
    --ok:             #6cc083;
    --ok-flaeche:     #16241a;
    --ok-linie:       #2f5338;
    --warn:           #e0b063;
    --warn-flaeche:   #241d10;
    --warn-linie:     #574424;
    --fehler:         #f09296;
    --fehler-flaeche: #261518;
    --fehler-linie:   #5a2e33;
    --schatten:       0 1px 2px rgba(0, 0, 0, 0.3);
    --schatten-l:     0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

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

/* Das Attribut "hidden" muss stärker sein als jede display-Regel weiter
   unten. Ohne diese Zeile blieben Fehlermeldung, Fortschritt, Leerzustand
   und der Abbrechen-Knopf sichtbar, obwohl das JavaScript sie ausblendet. */
[hidden] { display: none !important; }

html {
    font-size: var(--schrift-skala);
    scroll-behavior: smooth;
    /* Damit Sprungziele nicht unter dem mitlaufenden Kopf verschwinden. */
    scroll-padding-top: 7rem;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--grund);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -0.011em; }

/* Diese Klasse bestimmt NUR den seitlichen Rand und die Breite.
   Sie darf das Polster oben und unten nicht anfassen: Sonst überstimmt sie
   als Klasse die Regeln für <main>, <header> und <footer> – und der ganze
   senkrechte Rhythmus der Seite verschwindet. */
.huelle {
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding-inline: var(--luft-5);
}

/* ---------------------------------------------------------------- Sprunglink */
.sprunglink {
    position: fixed;
    left: 1rem;
    top: -4rem;
    z-index: 200;
    background: var(--marke);
    color: var(--marke-auf);
    padding: 0.75rem 1.25rem;
    border-radius: var(--rund-s);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.sprunglink:focus { top: 1rem; }

/* -------------------------------------------------------------------- Kopf */
.kopf {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--karte);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--linie);
}
@supports (backdrop-filter: blur(1px)) {
    .kopf { background: var(--kopf-glas, var(--karte)); }
}

.kopf-inhalt {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 5rem;
    padding-block: var(--luft-3);
}

.marke { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }

.logo {
    max-height: 2.75rem;
    max-width: 13rem;
    width: auto;
    height: auto;
    flex: none;
}

/* Firmenlogos sind fast immer für hellen Grund gemacht. Im Dunkelmodus
   bekommen sie deshalb eine weiße Plakette – das sieht gewollt aus,
   während ein nackter weißer Kasten wie ein Fehler wirkt. */
:root[data-theme="dark"] .logo {
    background: #fff;
    padding: 0.3rem 0.45rem;
    border-radius: 0.5rem;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo {
        background: #fff;
        padding: 0.3rem 0.45rem;
        border-radius: 0.5rem;
    }
}

.marke-text { min-width: 0; }
.kopf h1, .kopf .kopf-titel {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.011em;
    color: var(--text);
    overflow-wrap: break-word;
}
.untertitel {
    margin: 0.1rem 0 0;
    color: var(--text-leise);
    font-size: 0.95rem;
}

.kopf-werkzeuge {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.gruppe {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    overflow: hidden;
    background: var(--karte);
}
.gruppe .knopf-sym { border: 0; border-radius: 0; }
.gruppe .knopf-sym + .knopf-sym { border-left: 1px solid var(--linie); }

.knopf-sym {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    cursor: pointer;
}
.knopf-sym:hover { background: var(--senke); }
.knopf-sym svg { width: 1.15rem; height: 1.15rem; flex: none; }
@media (max-width: 52rem) { .knopf-sym .wort { display: none; } }

/* Auf schmalen Geräten nimmt der Kopf sonst so viel Platz für Logo und
   Werkzeuge, dass der Titel Buchstabe für Buchstabe umbricht. */
@media (max-width: 48rem) {
    /* Auf kleinen Geräten ist Platz kostbar: überall eine Stufe enger. */
    .huelle { padding-inline: var(--luft-3); }
    main { padding-block: var(--luft-4) var(--luft-6); }
    .einleitung { padding: var(--luft-3); margin-bottom: var(--luft-4); gap: var(--luft-2); }
    .spalten { gap: var(--luft-3); }
    .karte-kopf, .karte-fuss { padding: var(--luft-3); }
    .karte-leib { padding: var(--luft-3); }
    .ausgabe { padding: var(--luft-3); }
    .fuss { padding-block: var(--luft-4); }
}

@media (max-width: 40rem) {
    /* Nebeneinander bleibt für Logo, Titel und drei Knöpfe kein Platz –
       der Titel bräche sonst Buchstabe für Buchstabe um. Deshalb zwei
       Reihen. Und weil ein zweireihiger Kopf zu viel vom Bildschirm
       wegnähme, läuft er auf dem Handy nicht mit. */
    .kopf { position: static; }
    .kopf-inhalt {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        min-height: 0;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
    .marke { flex: 1 1 100%; }
    .logo { max-width: 7rem; max-height: 2.25rem; }
    .kopf h1, .kopf .kopf-titel { font-size: 1.15rem; }
    .untertitel { font-size: 0.9rem; }
    .kopf-werkzeuge { margin-left: 0; width: 100%; justify-content: flex-end; gap: 0.4rem; }
}

/* ------------------------------------------------------------------- Inhalt */
main { flex: 1 0 auto; padding-block: var(--luft-6) var(--luft-7); }

.einleitung {
    display: flex;
    gap: var(--luft-3);
    align-items: flex-start;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--marke);
    border-radius: var(--rund);
    padding: var(--luft-3) var(--luft-4);
    margin: 0 0 var(--luft-5);
    box-shadow: var(--schatten);
}
.einleitung svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--marke-text); margin-top: 0.15rem; }
.einleitung p { margin: 0; max-width: 64rem; }

.spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--luft-4);
    align-items: stretch;
}
@media (max-width: 64rem) { .spalten { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- Karte */
.karte {
    display: flex;
    flex-direction: column;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.karte-kopf {
    display: flex;
    align-items: center;
    gap: var(--luft-2);
    padding: var(--luft-3) var(--luft-4);
    border-bottom: 1px solid var(--linie);
}
.karte-kopf h2 {
    font-size: 1.05rem;
    letter-spacing: 0.005em;
}
.karte-kopf .nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 999px;
    background: var(--marke);
    color: var(--marke-auf);
    font-size: 0.9rem;
    font-weight: 700;
}
.karte-kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

.karte-leib {
    padding: var(--luft-4);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--luft-3);
}
.karte-fuss {
    padding: var(--luft-3) var(--luft-4);
    border-top: 1px solid var(--linie);
    background: var(--senke);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--luft-2) var(--luft-3);
}

/* ------------------------------------------------------------- Formularteile */
.feld-beschriftung {
    display: block;
    font-weight: 600;
    font-size: 0.975rem;
    margin-bottom: 0.4rem;
}

textarea, select, input[type="text"] {
    width: 100%;
    font-family: inherit;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--karte);
    border: 1.5px solid var(--linie-stark);
    border-radius: var(--rund);
    padding: 0.85rem 1rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
textarea::placeholder, input::placeholder { color: var(--text-leise); opacity: 1; }

textarea {
    flex: 1 1 auto;
    resize: vertical;
    tab-size: 4;
}

/* Die Höhe richtet sich nach dem Fenster, nicht nach einer festen Zahl.
   So passen Eingabe, Knopf und Fußzeile auch auf einen Laptop-Bildschirm,
   ohne dass man scrollen muss – und auf einem großen Schirm bleibt es
   trotzdem großzügig. */
#eingabe, .ausgabe { min-height: clamp(10rem, 30vh, 26rem); }

textarea:hover, select:hover, input[type="text"]:hover { border-color: var(--marke); }
textarea:focus, select:focus, input[type="text"]:focus {
    outline: none;
    border-color: var(--marke);
    box-shadow: var(--ring);
}

select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
:root[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) select {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    }
}

:is(textarea, select, input, button, a, [tabindex]):focus-visible {
    outline: 3px solid var(--marke);
    outline-offset: 2px;
}

.zaehler {
    margin: 0;
    font-size: 0.925rem;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}
.zaehler.zu-lang { color: var(--fehler); font-weight: 650; }
.zaehler b { color: var(--text); font-weight: 650; }

.stufe-feld { flex: 1 1 15rem; min-width: 11rem; }
.stufe-hinweis {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
    color: var(--text-leise);
}

/* ------------------------------------------------------------------- Knöpfe */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    padding: 0.75rem 1.4rem;
    min-height: 3.125rem;
    border-radius: var(--rund);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.knopf svg { width: 1.2rem; height: 1.2rem; flex: none; }
.knopf:active:not(:disabled) { transform: translateY(1px); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }

.knopf-haupt {
    background: var(--marke);
    color: var(--marke-auf);
    box-shadow: var(--schatten);
}
.knopf-haupt:hover:not(:disabled) { background: var(--marke-tief); }

.knopf-zweit {
    background: var(--karte);
    color: var(--marke-text);
    border-color: var(--marke);
}
.knopf-zweit:hover:not(:disabled) { background: var(--marke-weich); }

.knopf-still {
    background: var(--karte);
    color: var(--text);
    border-color: var(--linie-stark);
}
.knopf-still:hover:not(:disabled) { background: var(--senke); }

.knopf-klein { font-size: 0.975rem; padding: 0.5rem 0.9rem; min-height: 2.5rem; }
.knopf-breit { flex: 1 1 auto; }

/* Ladekringel im Knopf */
.kringel {
    width: 1.15rem;
    height: 1.15rem;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--marke-auf);
    border-radius: 999px;
    animation: dreh 0.7s linear infinite;
    flex: none;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ Ausgabe */
.ausgabe-huelle { position: relative; flex: 1 1 auto; display: flex; }

.ausgabe {
    flex: 1 1 auto;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    background: var(--senke);
    border: 1.5px solid var(--linie);
    border-radius: var(--rund);
    padding: var(--luft-4);
    font-size: 1.1875rem;
    line-height: 1.85;
    max-width: var(--lesebreite);
}
.ausgabe:focus-visible { border-color: var(--marke); }
.ausgabe.laeuft { border-color: var(--marke); background: var(--karte); }

.ausgabe.laeuft::after {
    content: "";
    display: inline-block;
    width: 0.5ch;
    height: 1.15em;
    margin-left: 0.1ch;
    vertical-align: -0.2em;
    background: var(--marke-text);
    animation: blinke 1.1s steps(1) infinite;
}
@keyframes blinke { 50% { opacity: 0; } }

/* Auf dem Handy wächst das Ergebnis mit der Seite: Ein eigenes Scrollfeld
   mitten in der Seite lässt sich mit dem Finger kaum bedienen. */
@media (max-width: 64rem) {
    .ausgabe { max-height: none; overflow-y: visible; }
    #eingabe, .ausgabe { min-height: 15rem; }
}

.leerzustand {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--text-leise);
    pointer-events: none;
}
.leerzustand svg { width: 2.75rem; height: 2.75rem; opacity: 0.55; }
.leerzustand p { margin: 0; max-width: 22rem; }

/* ------------------------------------------------------------- Fortschritt */
.fortschritt { display: flex; flex-direction: column; gap: 0.5rem; }

.segmente { display: flex; gap: 3px; height: 0.5rem; }
.segment {
    flex: 1 1 0;
    background: var(--linie);
    border-radius: 999px;
    overflow: hidden;
}
.segment i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--marke);
    transition: width 0.3s ease;
}
.segment.fertig i { width: 100%; }

.fortschritt-text {
    margin: 0;
    font-size: 0.925rem;
    color: var(--text-leise);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --------------------------------------------------------------- Kennzahlen */
.kennzahlen-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}
.kennzahlen-leiste span { display: inline-flex; align-items: center; gap: 0.35rem; }
.kennzahlen-leiste b { color: var(--text); font-weight: 650; }

/* ---------------------------------------------------------------- Meldungen */
.meldung {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    padding: 0.9rem 1.05rem;
    border-radius: var(--rund);
    border: 1px solid var(--fehler-linie);
    background: var(--fehler-flaeche);
    color: var(--fehler);
    font-weight: 550;
    font-size: 1rem;
}
.meldung svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.1rem; }
.meldung.gut { border-color: var(--ok-linie); background: var(--ok-flaeche); color: var(--ok); }
.meldung.warn { border-color: var(--warn-linie); background: var(--warn-flaeche); color: var(--warn); }

.wink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.925rem;
    font-weight: 650;
    color: var(--ok);
}

/* -------------------------------------------------------- Verbessern-Bereich */
.panel {
    margin-top: var(--luft-5);
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten-l);
    overflow: hidden;
}
.panel .karte-leib { gap: 1rem; }
.panel-hinweis { margin: 0; color: var(--text-leise); max-width: 52rem; }

/* --------------------------------------------------------------------- Fuß */
.fuss {
    border-top: 1px solid var(--linie);
    background: var(--karte);
    padding-block: var(--luft-5);
    color: var(--text-leise);
    font-size: 0.95rem;
}
.fuss-inhalt { display: flex; flex-wrap: wrap; gap: var(--luft-1) var(--luft-5); align-items: center; }
.fuss p { margin: 0; }
.fuss a { color: var(--marke-text); }
.fuss .rechts { margin-left: auto; }

/* ------------------------------------------------------------- Hilfsklassen */
.nur-fuer-screenreader {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------- Rücksicht und Drucken */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .kopf, .fuss, .karte-fuss, .einleitung, .fortschritt, .panel,
    #spalte-eingabe, .kopf-werkzeuge { display: none !important; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .spalten { display: block; }
    .karte { border: 0; box-shadow: none; }
    .ausgabe {
        border: 0; background: #fff; max-height: none; overflow: visible;
        font-size: 12pt; line-height: 1.6; padding: 0; max-width: none;
    }
    .karte-kopf { border: 0; padding: 0 0 0.5rem; }
}

/* ------------------------------------------------------------ Inhaltsseiten
   Datenschutz und ähnliche Texte, die im Admin-Bereich gepflegt werden. */
.inhaltsseite { max-width: 56rem; margin: 0 auto; }
.inhaltsseite .karte-leib { padding: 2rem 2.25rem 2.5rem; gap: 0; }
@media (max-width: 40rem) { .inhaltsseite .karte-leib { padding: 1.5rem 1.25rem 2rem; } }

.inhaltsseite .seiten-titel {
    font-size: 1.85rem;
    margin: 0 0 1.25rem;
    color: var(--text);
}
.inhaltsseite h2 {
    font-size: 1.3rem;
    margin: 2rem 0 0.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linie);
    color: var(--marke-text);
}
.inhaltsseite h2:first-of-type { margin-top: 0.5rem; padding-top: 0; border-top: 0; }
.inhaltsseite h3 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
.inhaltsseite p { margin: 0 0 1rem; max-width: var(--lesebreite); }
.inhaltsseite ul { margin: 0 0 1.25rem; padding-left: 1.35rem; max-width: var(--lesebreite); }
.inhaltsseite li { margin-bottom: 0.35rem; }
.inhaltsseite a { color: var(--marke-text); }
.inhaltsseite strong { font-weight: 650; }