/*
 * Ein Schaufenster, kein Aufmerksamkeitswettbewerb.
 *
 * Drei Entscheidungen, die den Rest erklaeren:
 *
 * 1. Zwei Spaltenbreiten. Text laeuft auf 68 Zeichen, weil laengere Zeilen den Ruecksprung
 *    ans Zeilenende verlieren. Bilder, Code und Tabellen duerfen breiter werden - ein
 *    1920x1080-Mockup auf Textbreite zu quetschen waere der Zweck der Sache verfehlt.
 * 2. Kein reines Schwarz und kein reines Weiss. #101216 gegen #dfe2e8 ist ruhiger als
 *    #000 gegen #fff und flimmert abends nicht.
 * 3. Genau eine Akzentfarbe, und die nur fuer Dinge, die man anklicken kann.
 */

:root {
    --grund: #101216;
    --grund-erhoben: #171a20;
    --grund-tief: #0b0d10;
    --linie: #262b33;
    --linie-zart: #1c2128;

    --text: #dfe2e8;
    --text-leise: #9aa2ae;
    --text-sehr-leise: #6b7280;

    --akzent: #d8a657;
    --akzent-hell: #e8bd7a;

    --spalte-text: 68ch;
    --spalte-breit: 1180px;
    --rand: 1.5rem;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-hell); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────── Kopfzeile ─────────────────────────── */

.kopf {
    border-bottom: 1px solid var(--linie-zart);
    background: var(--grund-tief);
    position: sticky;
    top: 0;
    z-index: 10;
}

.kopfinhalt {
    max-width: var(--spalte-breit);
    margin: 0 auto;
    padding: 0.9rem var(--rand);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marke {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-leise);
}
a.marke:hover { color: var(--text); text-decoration: none; }

.abmelden {
    font-size: 0.8125rem;
    color: var(--text-sehr-leise);
}
.abmelden:hover { color: var(--text-leise); text-decoration: none; }

/* ─────────────────────────── Übersicht ─────────────────────────── */

.uebersicht {
    max-width: var(--spalte-text);
    margin: 0 auto;
    padding: 4.5rem var(--rand) 6rem;
}

.uebersicht h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.4rem;
}

.unterzeile {
    color: var(--text-leise);
    margin: 0 0 3rem;
    font-size: 0.9375rem;
}

.seitenliste {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--linie-zart);
}

.seitenliste li { border-bottom: 1px solid var(--linie-zart); }

.seitenliste a {
    display: block;
    padding: 1.5rem 0;
    color: inherit;
}
.seitenliste a:hover { text-decoration: none; }
.seitenliste a:hover .eintragtitel { color: var(--akzent-hell); }

.eintragtitel {
    display: block;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--text);
    transition: color 0.15s ease;
}

.eintragtext {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-leise);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.eintragfuss {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin-top: 0.65rem;
    font-size: 0.8125rem;
    color: var(--text-sehr-leise);
}

.quelle {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

.leer {
    color: var(--text-leise);
    padding: 2rem 0;
}

/* ─────────────────────────── Einzelseite ─────────────────────────── */

.seite {
    max-width: var(--spalte-breit);
    margin: 0 auto;
    padding: 3.5rem var(--rand) 7rem;
}

.seitenkopf {
    max-width: var(--spalte-text);
    margin: 0 auto 0.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.8125rem;
    color: var(--text-sehr-leise);
}

/*
 * Der Text steht in der schmalen Spalte, aber die Kinder duerfen ausbrechen: alles, was
 * breiter sein darf, setzt seine eigene Breite und zentriert sich selbst. Deshalb liegt
 * hier keine feste Breite, sondern nur die Vorgabe fuer die Kinder.
 */
.text > * {
    max-width: var(--spalte-text);
    margin-left: auto;
    margin-right: auto;
}

.text h1, .text h2, .text h3, .text h4 {
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 600;
    color: #eef0f4;
}

.text h1 {
    font-size: 2.125rem;
    margin: 0 auto 1.75rem;
    letter-spacing: -0.025em;
}

.text h2 {
    font-size: 1.4375rem;
    margin: 3.5rem auto 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--linie-zart);
}

.text h3 {
    font-size: 1.125rem;
    margin: 2.5rem auto 0.75rem;
}

.text h4 {
    font-size: 1rem;
    margin: 2rem auto 0.5rem;
    color: var(--text-leise);
}

.text p { margin: 0 auto 1.4rem; }

.text ul, .text ol {
    margin: 0 auto 1.4rem;
    padding-left: 1.4rem;
}
.text li { margin-bottom: 0.5rem; }
.text li::marker { color: var(--text-sehr-leise); }

.text strong { color: #f2f4f7; font-weight: 600; }
.text em { color: var(--text); }

.text blockquote {
    border-left: 2px solid var(--akzent);
    padding: 0.2rem 0 0.2rem 1.25rem;
    margin: 0 auto 1.4rem;
    color: var(--text-leise);
}
.text blockquote p:last-child { margin-bottom: 0; }

.text hr {
    border: 0;
    border-top: 1px solid var(--linie);
    margin: 3rem auto;
}

/* Verweise im Fliesstext sollen lesbar bleiben, nicht leuchten. */
.text a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ── Bilder: die breite Spalte, denn dafuer gibt es diese Anwendung ── */

.abbildung {
    max-width: var(--spalte-breit);
    margin: 2.5rem auto;
    text-align: center;
}

.bildrahmen {
    display: block;
    border: 1px solid var(--linie);
    border-radius: 3px;
    overflow: hidden;
    background: var(--grund-tief);
    line-height: 0;
}
.bildrahmen:hover { border-color: var(--akzent); }

.abbildung img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /*
     * Spieltexturen sind 16x16 und wuerden weichgezeichnet zu Brei. Grosse Renderbilder
     * schadet es nicht, weil sie ohnehin nicht hochskaliert werden.
     */
    image-rendering: pixelated;
}

/* Grosse Bilder duerfen nicht hochskaliert werden, kleine schon gar nicht. */
.abbildung img[src$=".png"], .abbildung img[src$=".jpg"] { width: auto; }

.abbildung figcaption {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-sehr-leise);
    line-height: 1.5;
    text-align: center;
}

/* ── Code ── */

.text code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875em;
    background: var(--grund-erhoben);
    border: 1px solid var(--linie-zart);
    border-radius: 3px;
    padding: 0.1em 0.35em;
    color: #e6c07b;
}

.text pre.code {
    max-width: var(--spalte-breit);
    margin: 1.75rem auto;
    background: var(--grund-tief);
    border: 1px solid var(--linie-zart);
    border-radius: 4px;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    line-height: 1.6;
}

.text pre.code code {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text);
    font-size: 0.8125rem;
}

/* ── Tabellen ── */

.tabellenrahmen {
    max-width: var(--spalte-breit);
    margin: 1.75rem auto;
    overflow-x: auto;
    border: 1px solid var(--linie-zart);
    border-radius: 4px;
}

.text table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.875rem;
    max-width: none;
    margin: 0;
}

.text th, .text td {
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--linie-zart);
    vertical-align: top;
    line-height: 1.55;
}

.text th {
    background: var(--grund-erhoben);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--text);
    white-space: nowrap;
}

.text tbody tr:last-child td { border-bottom: 0; }
.text tbody tr:hover { background: rgba(255, 255, 255, 0.017); }

/* ── Fuss ── */

.fuss {
    max-width: var(--spalte-text);
    margin: 4rem auto 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--linie-zart);
    font-size: 0.875rem;
}

/* ─────────────────────────── Anmeldung ─────────────────────────── */

body.anmeldung {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--rand);
}

.anmeldekarte {
    width: 100%;
    max-width: 21rem;
    text-align: left;
}

.anmeldekarte h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
}

.anmeldekarte .unterzeile { margin-bottom: 2.25rem; }

.anmeldekarte form { display: flex; flex-direction: column; }

.anmeldekarte label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-sehr-leise);
    margin-bottom: 0.4rem;
}

.anmeldekarte input {
    background: var(--grund-erhoben);
    border: 1px solid var(--linie);
    border-radius: 4px;
    color: var(--text);
    font: inherit;
    font-size: 0.9375rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1.25rem;
}
.anmeldekarte input:focus {
    outline: none;
    border-color: var(--akzent);
}

.anmeldekarte button {
    background: var(--akzent);
    color: #17130a;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    cursor: pointer;
    margin-top: 0.25rem;
}
.anmeldekarte button:hover { background: var(--akzent-hell); }

.fehler {
    background: rgba(200, 80, 70, 0.1);
    border: 1px solid rgba(200, 80, 70, 0.35);
    color: #e8a49c;
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    margin: 0 0 1.25rem;
}

.zurueck { font-size: 0.9375rem; }

/* ─────────────────────────── Handy ─────────────────────────── */

@media (max-width: 46rem) {
    :root { --rand: 1.15rem; }
    body { font-size: 16.5px; }

    .uebersicht { padding-top: 3rem; }
    .uebersicht h1 { font-size: 1.6875rem; }
    .unterzeile { margin-bottom: 2rem; }

    .seite { padding-top: 2.25rem; }
    .text h1 { font-size: 1.6875rem; }
    .text h2 { font-size: 1.25rem; margin-top: 2.5rem; padding-top: 1.25rem; }
    .text h3 { font-size: 1.0625rem; }

    /* Bilder und Code duerfen bis an den Rand, sonst bleibt zu wenig fuer den Inhalt. */
    .abbildung, .tabellenrahmen, .text pre.code {
        margin-left: calc(var(--rand) * -1);
        margin-right: calc(var(--rand) * -1);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .abbildung figcaption { padding: 0 var(--rand); }
    .bildrahmen { border-radius: 0; border-left: 0; border-right: 0; }
}

/* ─────────────────────────── Hervorhebung im Code ─────────────────────────── */

.hljs-comment, .hljs-quote { color: #6b7280; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: #c792ea; }
.hljs-string, .hljs-attr, .hljs-addition { color: #a3be8c; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #d8a657; }
.hljs-title, .hljs-section, .hljs-name { color: #8ab4f8; }
.hljs-built_in, .hljs-class .hljs-title { color: #7fd1c1; }
.hljs-variable, .hljs-template-variable { color: #e6c07b; }
.hljs-meta { color: #6b7280; }
.hljs-deletion { color: #e8a49c; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* ─────────────────────────── Entscheidungen ─────────────────────────── */

/*
 * Der auffaelligste Block der Startseite. Das ist kein Geschmack: eine wartende
 * Entscheidung ist der Grund, warum Maggus die Seite ueberhaupt aufmacht - sie darf
 * nicht wie ein weiterer Listeneintrag aussehen.
 */

.rubrik {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: 0 0 1rem;
}
.rubrik.leise { color: var(--text-sehr-leise); margin-top: 3.5rem; margin-bottom: 0.35rem; }

.rubrikzeile {
    color: var(--text-sehr-leise);
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

.entscheidungen { margin: 0 0 1rem; }

.kartenliste { list-style: none; margin: 0; padding: 0; }
.kartenliste li + li { margin-top: 0.75rem; }

.entscheidungkarte {
    display: block;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--akzent);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(216, 166, 87, 0.07), rgba(216, 166, 87, 0.02));
    color: inherit;
}
.entscheidungkarte:hover { text-decoration: none; background: rgba(216, 166, 87, 0.12); }

.kartetitel {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text);
}

.kartefuss {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.55rem;
    font-size: 0.8125rem;
    color: var(--text-leise);
}
.wartet { color: var(--akzent-hell); }

.erledigt .urteil {
    font-weight: 600;
    color: var(--text-leise);
}

/* ── Die Entscheidungsseite ── */

.entscheidung {
    max-width: var(--spalte-text);
    margin: 0 auto;
    padding: 3rem var(--rand) 6rem;
}

.uebertitel {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: 0 0 0.6rem;
}

.entscheidung h1 {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 2rem;
}

/*
 * Ein Briefing ist kein Aufsatz. Deshalb enger gesetzt als eine Seite: kein Trennstrich
 * ueber jeder Zwischenueberschrift, kein Ausbrechen in die breite Spalte.
 */
.briefing h2, .briefing h3 {
    font-size: 0.9375rem;
    margin: 1.75rem auto 0.3rem;
    padding-top: 0;
    border-top: 0;
    color: var(--text-leise);
    letter-spacing: 0;
}
.briefing p { margin-bottom: 1rem; }
.briefing > :first-child { margin-top: 0; }

.antwortkasten {
    border: 1px solid var(--linie);
    border-left: 3px solid var(--akzent);
    border-radius: 4px;
    background: var(--grund-erhoben);
    padding: 1rem 1.25rem;
    margin: 0 0 2rem;
}

.antwortmarke {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-sehr-leise);
}

.antwortwahl {
    margin: 0.35rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--akzent-hell);
}
.antworttext { margin: 0.5rem 0 0; color: var(--text-leise); }
.antwortzeit { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--text-sehr-leise); }

.warnung {
    border: 1px solid #7a4b2a;
    background: rgba(180, 90, 40, 0.12);
    border-radius: 4px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: #e9b98f;
    margin: 0 0 1.25rem;
}

/*
 * Die Knoepfe sind die Seite. Untereinander und ueber die volle Breite, weil sie mit dem
 * Daumen getroffen werden - 3,25rem ist ueber der Empfehlung von 44 px, und bei drei
 * Knoepfen nebeneinander waere jeder davon zu schmal fuer eine ehrliche Beschriftung.
 */
.wahl { margin: 2.5rem 0 0; }

.knopfreihe { display: flex; flex-direction: column; gap: 0.75rem; }

.wahlknopf {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.85rem 1.25rem;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    color: var(--grund-tief);
    background: var(--akzent);
    border: 1px solid var(--akzent);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.06s ease;
}
.wahlknopf:hover { background: var(--akzent-hell); }
.wahlknopf:active { transform: translateY(1px); }
.wahlknopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.wahlknopf.leise {
    color: var(--text);
    background: transparent;
    border-color: var(--linie);
    font-weight: 500;
    font-size: 0.9375rem;
    min-height: 2.75rem;
}
.wahlknopf.leise:hover { background: var(--grund-erhoben); border-color: var(--text-sehr-leise); }

.freitext { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.6rem; }

.freitext label {
    font-size: 0.8125rem;
    color: var(--text-sehr-leise);
}

.freitext textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--grund-tief);
    border: 1px solid var(--linie);
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    resize: vertical;
}
.freitext textarea:focus { outline: none; border-color: var(--akzent); }
.freitext textarea::placeholder { color: var(--text-sehr-leise); }