/* -------------------------------------------------------------
   Grundstil, gemeinsam für alle Seiten dieser Domain.
   Die Seite ist immer schwarz, unabhängig von der
   Systemeinstellung. Nur der Windows-Kontrastmodus setzt sich
   darüber hinweg, weil Menschen darauf angewiesen sind.
   Kontraste geprüft nach WCAG 2.2 (Text mindestens 4.5:1,
   Linien und Bedienelemente mindestens 3:1).
   ------------------------------------------------------------- */

:root {
    --grund:   #000000;
    --tinte:   #dfe3e8;   /* 16.29:1 */
    --leise:   #9aa4b0;   /*  8.31:1 */
    --akzent:  #e3b341;   /* 10.79:1 */
    --linie:   #5d6874;   /*  3.70:1 */
    --fokus:   #dfe3e8;
    --warnung: #ff7b72;
    --schatten: rgba(255, 255, 255, 0.32);

    /* Der Terminalblock, unabhängig vom Farbschema der Seite */
    --term-grund:  #08090b;
    --term-text:   #dfe3e8;   /* 15.45:1 */
    --term-leise:  #9aa4b0;   /*  7.88:1 */
    --term-prompt: #6fcf8a;   /* 10.40:1 */
    --term-fehler: #ff7b72;   /*  7.90:1 */
    --term-link:   #e3b341;   /* 10.24:1 */
    --term-linie:  #5d6874;   /*  3.51:1 */

    --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
}

/* Nutzer mit erhöhtem Kontrastbedarf bekommen die kräftigste Variante */
@media (prefers-contrast: more) {
    :root {
        --leise:      var(--tinte);
        --akzent:     var(--tinte);
        --linie:      var(--tinte);
        --warnung:    var(--tinte);
        --term-leise: var(--term-text);
        --term-linie: var(--term-text);
    }
}

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

/* Basis bleibt in Prozent, damit die Schriftgrößeneinstellung
   des Browsers wirksam bleibt. Alle Größen darunter in rem. */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@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;
    }
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* ---------- Sprungmarke zum Inhalt ---------- */

.sprung {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.75rem 1.25rem;
    background: var(--tinte);
    color: var(--grund);
    font-size: 1rem;
    text-decoration: none;
    z-index: 10;
}

.sprung:focus {
    left: 0;
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

/* ---------- Das Terminal ---------- */

.terminal {
    /* Volle Spaltenbreite, damit der Kasten auf denselben Kanten
       steht wie Überschriften, Text und Fußlinie. */
    width: 100%;
    margin: 0 0 0.9rem;
    padding: 1.15rem 1.3rem;
    overflow-x: auto;
    border: 1px solid var(--term-linie);
    /* Hinweis auf verdeckten Inhalt: Die beiden Deckflächen laufen mit
       dem Inhalt mit und verdecken den Schatten, solange am jeweiligen
       Rand nichts mehr kommt. Bleibt etwas übrig, bleibt der Schatten
       stehen. Reines CSS, kein Skript, und für Vorleseprogramme
       unsichtbar: Die bekommen den Bereich ohnehin angesagt. */
    background-color: var(--term-grund);
    background-image:
        linear-gradient(to right, var(--term-grund) 50%, transparent),
        linear-gradient(to left, var(--term-grund) 50%, transparent),
        radial-gradient(farthest-side at 0 50%, var(--schatten), transparent),
        radial-gradient(farthest-side at 100% 50%, var(--schatten), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-size: 2rem 100%, 2rem 100%, 1rem 100%, 1rem 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;

    border-radius: 4px;
    color: var(--term-text);
    font-family: var(--mono);
    /* So bemessen, dass eine 46 Zeichen breite Zeile auch
       auf schmalen Geräten noch ohne Scrollen hineinpasst. */
    font-size: clamp(0.68rem, 3.05vw, 0.875rem);
    line-height: 1.55;
    white-space: pre;
    tab-size: 4;
}

.terminal:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 3px;
}

.prompt { color: var(--term-prompt); }
.aus    { color: var(--term-leise); }
.fehler { color: var(--term-fehler); }

.terminal a {
    color: var(--term-link);
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.1875rem;
}

.terminal a:hover {
    text-decoration-thickness: 0.125rem;
}

/* Blinkender Cursor. Steht still, wenn Bewegung abbestellt wurde. */
.cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.05em;
    vertical-align: text-bottom;
    background: var(--term-text);
    animation: blinken 1.1s steps(1) infinite;
}

@keyframes blinken {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; }
}

/* Sichtbarer Stand der Fallangaben. Der Kasten nimmt den Ton des
   Terminals auf, damit er sich vom Fließtext abhebt, ohne zu schreien. */
.stand {
    display: inline-block;
    margin: 0 0 1.6rem;
    padding: 0.35rem 0.7rem;
    background: var(--term-grund);
    border-left: 3px solid var(--akzent);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--leise);
}

/* Die Einordnung direkt unter dem Terminal */
.einordnung {
    margin: 0 0 2.2rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--leise);
}

/* ---------- Raster ---------- */

/* Eine Spalte, und nur eine Breite. Vorher hatten Rahmen und Absätze
   unterschiedliche Maße, dadurch standen Terminal und Trennlinie über
   den Text hinaus. */
.rahmen {
    max-width: 38rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

/* Damit Sprungziele nicht direkt am oberen Rand kleben */
:target {
    scroll-margin-top: 1.5rem;
}

/* ---------- Typografie ---------- */

h1 {
    margin: 0 0 0.6rem;
    /* Getrennt wird nur an der weichen Trennstelle im Markup,
       nicht automatisch: dafür bräuchte der Browser ein
       Silbentrennwörterbuch, das nicht überall vorliegt. */
    -webkit-hyphens: manual;
    hyphens: manual;
    font-size: clamp(2rem, 7vw, 3.1rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.unterzeile {
    /* Abstand zum ersten Absatz, sonst kleben Kopf und Inhalt aneinander */
    margin: 0 0 2.6rem;
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--leise);
}

h2 {
    margin: 3.5rem 0 1rem;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.022em;
}

h3 {
    margin: 2rem 0 0.3rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Die Glossareinträge tragen die Abkürzung in Schreibmaschinenschrift,
   damit sie sichtbar zur Ausgabe im Terminal gehören, dahinter
   ausgeschrieben, wofür sie steht. */
.langform {
    font-weight: 400;
    color: var(--leise);
}

h3 code {
    font-family: var(--mono);
    font-size: 0.92em;
    font-weight: 400;
    color: var(--akzent);
}

/* Angesprungener Eintrag bekommt eine Marke am Rand */
main :target {
    border-left: 3px solid var(--akzent);
    margin-left: -1rem;
    padding-left: calc(1rem - 3px);
}

p {
    margin: 0 0 1.15rem;
}

.gross {
    font-size: 1.19rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
}

ul {
    margin: 0 0 1.15rem;
    padding-left: 1.1rem;
}

li {
    margin-bottom: 0.55rem;
}

/* ---------- Verweise ---------- */

a {
    color: var(--akzent);
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.1875rem;
}

a:hover {
    text-decoration-thickness: 0.125rem;
}

/* Sichtbarer Fokus für Tastaturbedienung, in jedem Farbschema */
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 3px;
    border-radius: 1px;
}

/* ---------- Kennzeichnung externer Verweise ---------- */

/* Das Zeichen ist Bild, kein Text: Screenreader überspringen es,
   dafür kündigt der verborgene Zusatz das Ziel an. */
.extern {
    font-size: 0.82em;
    opacity: 0.8;
}

/* Sichtbar nur für Screenreader, nimmt keinen Platz im Layout ein */
.nurvorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.rot {
    color: var(--warnung);
}

/* ---------- Kleingedrucktes ---------- */

.fussnote {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--leise);
}

footer {
    margin-top: 4.5rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--linie);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--leise);
}

footer a {
    color: var(--leise);
}

/* Schlusszeile und Verweise darunter stehen mittig. Der Fließtext
   darüber bleibt linksbündig: Zentrierte Absätze sind schwerer zu
   lesen, weil das Auge jede Zeile neu suchen muss. */
.signatur {
    margin: 0 0 0.5rem;
    text-align: center;
}

footer nav ul {
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.4rem;
}

footer nav li {
    margin: 0;
}

footer nav a {
    display: inline-block;
    padding: 0.6rem 0;
}

/* ---------- Windows-Kontrastmodus ---------- */

@media (forced-colors: active) {
    /* Ohne Rahmen wäre die Sprungmarke nicht von der Seite zu unterscheiden */
    .sprung {
        border: 1px solid;
    }
    /* Der Terminalblock verliert seine Farben, der Rahmen muss bleiben */
    .terminal {
        border: 1px solid;
    }
    .cursor {
        background: CanvasText;
    }
    main :target {
        border-left-color: Highlight;
    }
}

/* ---------- Kleine Bildschirme ---------- */

/* Auf Telefonen wird der Seitenrand schmaler. Das bringt der Zeile
   ein paar Zeichen mehr und schafft Platz für alles, was sonst
   seitlich aus dem Bild geschoben würde. */
@media (max-width: 34rem) {
    .rahmen {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    /* Weniger Innenabstand im Kasten: So bleibt für die 46 Zeichen
       breite Zeile mehr Platz und die Schrift kann größer werden. */
    .terminal {
        padding: 1rem 0.5rem;
    }
}

/* ---------- Druck ---------- */

@media print {
    :root {
        --grund:   #ffffff;
        --tinte:   #000000;
        --leise:   #333333;
        --akzent:  #000000;
        --linie:   #999999;
        --warnung: #000000;

        --term-grund:  #ffffff;
        --term-text:   #000000;
        --term-leise:  #333333;
        --term-prompt: #000000;
        --term-fehler: #000000;
        --term-link:   #000000;
        --term-linie:  #999999;
    }

    /* Auf Papier wird nicht gerollt, der Hinweis entfällt */
    .terminal {
        background-image: none;
    }
    .sprung, .cursor {
        display: none;
    }
    .rahmen {
        max-width: none;
        padding: 0;
    }
    .terminal {
        font-size: 9pt;
        white-space: pre-wrap;
    }
    /* Auf Papier steht die Zieladresse, das Zeichen wäre doppelt */
    .extern {
        display: none;
    }
    /* Zieladresse ausschreiben, sonst geht sie auf Papier verloren */
    main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }
    h2, h3 {
        break-after: avoid;
    }
    li, pre {
        break-inside: avoid;
    }
}