/* =========================================================
   PUMPLING – TEXTSEITEN IM NEUEN LAYOUT

   Gilt fuer anleitung.html, impressum.php und datenschutz.php - die
   drei Seiten, die im Spiel als Fenster (guide.js) und von aussen als
   eigene Seiten laufen.

   BEWUSST ALS UEBERSCHREIBUNG GEBAUT: jede Seite behaelt ihren
   eigenen <style>-Block, diese Datei haengt DAHINTER und faerbt nur
   um. So bleiben die Seiten ohne dieses Stylesheet vollstaendig
   brauchbar (der Bau prueft Inhalte, nicht Optik), und die alten
   Regeln dokumentieren weiter, welche Bausteine es gibt.

   Die Werte sind die des neuen Spielbildschirms (spiel-neu.css) -
   wer dort eine Grundfarbe aendert, zieht sie hier nach. Zwei
   Stellen, bewusst: die Spielseite laedt dieses Blatt nicht, und ein
   gemeinsames Grundlagen-Blatt waere ein groesserer Umbau als diese
   Seiten rechtfertigen.
   ========================================================= */

:root {
    --d-bg:    #0C0F13;
    --d-bg2:   #080A0D;
    --d-panel: #151A20;
    --d-panel2:#1D242C;
    --d-line:  #2B343F;
    --d-zug:   #00E5FF;
    --d-gold:  #FFD84D;
    --d-stahl: #8FB2CE;
    --d-fg:    #E9EEF3;
    --d-dim:   #96A4B2;
    --d-dim2:  #8B99A7;
    --d-krit:  #FF4D5E;
}

body {
    background:
        radial-gradient(70% 30% at 50% -4%, rgba(0,229,255,.07), transparent 70%),
        var(--d-bg) !important;
    color: var(--d-dim) !important;
}

/* Der Kopf: kein gelber Rahmen mehr, der Titel schimmert wie das
   Wortzeichen im Spiel. */
header {
    background: var(--d-panel) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: 16px !important;
    position: relative;
    overflow: hidden;
}
header::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--d-stahl), var(--d-zug), var(--d-gold));
}
/* Der Titel ist die Wortmarke der Kopfleiste (site.css .brand): dieselben
   drei Farben, dieselbe Laufrichtung, derselbe Schimmer. */
header h1 {
    font-weight: 900 !important;
    letter-spacing: 1.5px;
    background: linear-gradient(92deg,
        var(--d-stahl), var(--d-zug) 30%, var(--d-gold) 60%, var(--d-stahl) 90%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
    animation: dok-schimmer 7s linear infinite;
}
@keyframes dok-schimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { header h1 { animation: none; } }
header p { color: var(--d-dim) !important; }

/* Inhaltsverzeichnis und Abschnitte als Graphit-Karten. */
nav.toc {
    background: var(--d-bg2) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: 12px !important;
}
nav.toc strong { color: var(--d-dim2) !important; }
nav.toc a { color: var(--d-zug) !important; }

section {
    background: var(--d-panel) !important;
    border: 1px solid var(--d-line) !important;
    border-radius: 14px !important;
}
h2 {
    color: var(--d-fg) !important;
    border-bottom: 1px solid var(--d-line) !important;
}
h3 { color: var(--d-zug) !important; }
strong { color: var(--d-fg); }
a { color: var(--d-zug); }

/* Hinweis- und Warnkaesten. */
.tip {
    background: rgba(0,229,255,.06) !important;
    border: 1px solid rgba(0,229,255,.25) !important;
    border-left-width: 3px !important;
    border-radius: 10px !important;
    color: var(--d-dim) !important;
}
.warn, .warnbox {
    background: rgba(255,77,94,.07) !important;
    border: 1px solid rgba(255,77,94,.3) !important;
    border-left-width: 3px !important;
    border-radius: 10px !important;
    color: var(--d-dim) !important;
}

/* Tabellen (Stufenleiter in der Anleitung). */
table { border-color: var(--d-line) !important; }
th {
    background: var(--d-bg2) !important;
    color: var(--d-dim2) !important;
    border-color: var(--d-line) !important;
}
td { border-color: var(--d-line) !important; color: var(--d-dim) !important; }
tr:nth-child(even) td { background: rgba(29,36,44,.4) !important; }

/* Zurueck-Verweise und Fussnavigation. */
.back, .nav-row a {
    color: var(--d-dim2) !important;
    border-color: var(--d-line) !important;
    background: var(--d-panel) !important;
    border-radius: 10px !important;
}
.back:hover, .nav-row a:hover { color: var(--d-fg) !important; border-color: var(--d-zug) !important; }

/* Eingebettet im Spielfenster (guide.js haengt ?embed an bzw. die
   Seiten erkennen es selbst): der Kopf darf kompakter sein. */
body.eingebettet header, body.embed header { padding: 14px 18px !important; }