/* ============================================================
   style.css – Survival Horror, subtil
   Dein Tabletop RPG Regelwerk
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ── CSS-Variablen ────────────────────────────────────────── */
:root {
    /* Hintergründe – nicht reines Schwarz, leicht bräunlich verwittert */
    --bg-base:      #090909;
    --bg-panel:     #0f0f0d;   /* minimal warmer Unterton, wie altes Holz */
    --bg-card:      #141410;
    --bg-hover:     #1c1c17;

    /* Rostiges Gold – weniger edel, mehr abgenutzt */
    --gold:         #b8873a;
    --gold-hell:    #d4a855;
    --gold-dunkel:  #6b4e1f;
    --gold-matt:    #7a6535;   /* matter, fast rostfarben */

    /* Rot – nicht Blut, sondern Rost / verwittert */
    --rost:         #7a3520;
    --rost-hell:    #a04428;
    --rost-dunkel:  #3d1a0e;

    /* Textfarben – leicht vergilbt, nie reines Weiß */
    --text-hell:    #ddd5c0;   /* vergilbtes Papier */
    --text-mittel:  #857a68;
    --text-dunkel:  #3e3830;

    /* Rahmen */
    --border-fein:  rgba(184, 135, 58, 0.10);
    --border-stark: rgba(184, 135, 58, 0.28);
    --border-rost:  rgba(122, 53, 32, 0.25);

    /* Layout */
    --sidebar-breite: 290px;
    --header-hoehe:   68px;

    /* Schriften */
    --font-display: 'Cinzel Decorative', serif;
    --font-body:    'Crimson Pro', serif;

    /* Abstände */
    --abstand-s:   0.5rem;
    --abstand-m:   1rem;
    --abstand-l:   2rem;
    --abstand-xl:  4rem;

    /* Übergänge */
    --transition: 0.3s ease;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

/* ── BODY – Körnung und Verfall-Atmosphäre ────────────────── */
body {
    background-color: var(--bg-base);
    color: var(--text-hell);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    min-height: 100vh;

    /*
        Filmkörnung als SVG-Rausch-Muster (Data-URI) +
        zwei sehr subtile Farbflecken für atmosphärische Tiefe
    */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(122, 53, 32, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(107, 78, 31, 0.06) 0%, transparent 60%);
}

/* ── HEADER ───────────────────────────────────────────────── */
header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-hoehe);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-stark);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 4px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    padding: 0 var(--abstand-l);
    gap: var(--abstand-l);
    z-index: 100;
}

/* ── LOGO – ganz leises Flackern ──────────────────────────── */
.site-logo {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-decoration: none;
    text-shadow:
        0 0 18px rgba(184, 135, 58, 0.4),
        0 0 40px rgba(122, 53, 32, 0.15);

    /* So langsam und minimal, dass man es kaum bewusst wahrnimmt */
    animation: flackern 8s infinite ease-in-out;
}

@keyframes flackern {
    0%,  100% { opacity: 1;    text-shadow: 0 0 18px rgba(184,135,58,0.40), 0 0 40px rgba(122,53,32,0.15); }
    42%        { opacity: 0.97; text-shadow: 0 0 12px rgba(184,135,58,0.30), 0 0 30px rgba(122,53,32,0.10); }
    43%        { opacity: 0.91; text-shadow: 0 0  6px rgba(184,135,58,0.18), 0 0 18px rgba(122,53,32,0.07); }
    44%        { opacity: 0.97; text-shadow: 0 0 18px rgba(184,135,58,0.40), 0 0 40px rgba(122,53,32,0.15); }
    79%        { opacity: 0.98; text-shadow: 0 0 14px rgba(184,135,58,0.33), 0 0 34px rgba(122,53,32,0.12); }
}

/* Trennlinie im Header */
.header-trenner {
    width: 1px;
    height: 26px;
    background: var(--border-stark);
    flex-shrink: 0;
    opacity: 0.5;
}

/* ── NAVIGATION – gefüllte Buttons, kein Trennstrich ──────── */
.header-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
}

.header-nav a {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.42rem 1rem;

    /* Verwittertes Messing – kein satt-goldener KI-Button */
    background: var(--gold-dunkel);
    color: var(--text-hell);
    border: 1px solid var(--gold-matt);
    border-radius: 2px;   /* kaum abgerundet, wirkt rauer */

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.header-nav a:hover {
    background: var(--gold-matt);
    color: var(--gold-hell);
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(184, 135, 58, 0.18);
    text-decoration: none;
}

.header-nav a.aktiv {
    background: var(--gold-matt);
    color: var(--gold-hell);
    border-color: var(--gold);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Platzhalter rechts im Header */
.header-rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.seiten-wrapper {
    display: flex;
    padding-top: var(--header-hoehe);
    min-height: 100vh;
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-breite);
    flex-shrink: 0;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-rost);   /* Rost statt Gold */
    position: sticky;
    top: var(--header-hoehe);
    height: calc(100vh - var(--header-hoehe));
    overflow-y: auto;
    padding: var(--abstand-l) var(--abstand-m);
}

.sidebar::-webkit-scrollbar       { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--gold-dunkel); }

.sidebar-titel {
    font-family: var(--font-display);
    font-size: 0.52rem;
    color: var(--gold-dunkel);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: var(--abstand-m);
    padding-bottom: var(--abstand-s);
    border-bottom: 1px solid var(--border-rost);
}

.sidebar-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar-nav a {
    display: block;
    color: var(--text-mittel);
    text-decoration: none;
    padding: 0.45rem 0.75rem;
    font-size: 0.95rem;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    border-left: 2px solid transparent;
}

.sidebar-nav a:hover {
    background: var(--bg-hover);
    color: var(--text-hell);
    border-left-color: var(--rost-hell);   /* Rost beim Hover */
}

.sidebar-nav a.aktiv {
    background: var(--bg-hover);
    color: var(--gold);
    border-left-color: var(--gold);
}

.sidebar-gruppe {
    margin-top: var(--abstand-m);
    margin-bottom: var(--abstand-s);
    font-size: 0.65rem;
    color: var(--text-dunkel);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-left: 0.75rem;
}

/* ── HAUPTINHALT ──────────────────────────────────────────── */
.haupt-inhalt {
    flex: 1;
    padding: var(--abstand-xl);
    max-width: 860px;
}

/* ── TYPOGRAFIE ───────────────────────────────────────────── */
h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    line-height: 1.3;
    margin-bottom: var(--abstand-l);

    /* Kein strahlender Glanz – matter Schein wie Licht durch Staub */
    text-shadow:
        0 0 25px rgba(184, 135, 58, 0.22),
        0 2px 4px rgba(0, 0, 0, 0.8);
}

h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--gold-hell);
    margin-top: var(--abstand-xl);
    margin-bottom: var(--abstand-m);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-rost);
}

h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-hell);
    margin-top: var(--abstand-l);
    margin-bottom: var(--abstand-s);
    letter-spacing: 0.06em;
}

p {
    margin-bottom: 0.75rem;
    color: var(--text-hell);
}

ul, ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: var(--text-hell);
}

li {
    margin-bottom: 0.3rem;
    line-height: 1.6;
}

/* Abstand wenn Text direkt nach einer Liste folgt */
ul + p,
ol + p {
    margin-top: 0.75rem;
}

.lead {
    font-size: 1.15rem;
    color: var(--text-mittel);
    font-style: italic;
    margin-bottom: var(--abstand-l);
    border-left: 3px solid var(--rost-dunkel);
    padding-left: var(--abstand-m);
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--gold-hell);
    text-decoration: underline;
}

/* ── BOXEN ────────────────────────────────────────────────── */
.box {
    background: var(--bg-card);
    border: 1px solid var(--border-fein);
    border-radius: 2px;
    padding: var(--abstand-l);
    margin-bottom: var(--abstand-l);
}

.box-wichtig {
    background: var(--bg-card);
    border: 1px solid var(--border-stark);
    border-left: 3px solid var(--gold-dunkel);
    border-radius: 2px;
    padding: var(--abstand-l);
    margin-bottom: var(--abstand-l);
}
.box-wichtig .box-label { color: var(--gold); }

.box-gefahr {
    background: rgba(61, 26, 14, 0.35);
    border: 1px solid var(--border-rost);
    border-left: 3px solid var(--rost-hell);
    border-radius: 2px;
    padding: var(--abstand-l);
    margin-bottom: var(--abstand-l);
}
.box-gefahr .box-label { color: var(--rost-hell); }

.box-label {
    font-family: var(--font-display);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: var(--abstand-s);
    color: var(--gold-dunkel);
}

/* ── TRENNLINIEN ──────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--border-fein);
    margin: var(--abstand-xl) 0;
}

.trenner-gold {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    margin: var(--abstand-xl) 0;
    color: var(--gold-dunkel);
    font-size: 1rem;
}
.trenner-gold::before,
.trenner-gold::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-dunkel), transparent);
    opacity: 0.5;
}

/* ── FOOTER ───────────────────────────────────────────────── */
footer {
    background: var(--bg-panel);
    border-top: 1px solid var(--border-rost);
    padding: var(--abstand-l) var(--abstand-xl);
    color: var(--text-dunkel);
    font-size: 0.85rem;
    text-align: center;
    margin-top: auto;
}

/* ── HILFSKLASSEN ─────────────────────────────────────────── */
.text-gold  { color: var(--gold); }
.text-rost  { color: var(--rost-hell); }
.text-grau  { color: var(--text-mittel); }
.kursiv     { font-style: italic; }
.zentriert  { text-align: center; }
.mb-klein   { margin-bottom: var(--abstand-s); }
.mb-mittel  { margin-bottom: var(--abstand-m); }
.mb-gross   { margin-bottom: var(--abstand-l); }

/* ============================================================
   ENDE style.css
   ============================================================ */