/* =======================================================================
 * 1. GLOBALE KONFIGURATION & THEMEN
 * ======================================================================= */

/* CSS-Variablen für Farben und Schriftarten */
:root {
    /* --- Schriftarten --- */
    --font: 'Courier Prime', monospace;

    /* --- Light Theme (Standard) --- */
    --bg-color: #f9f9f9;
    --text-color: #333;                 /* Haupttextfarbe */
    --link-color: #0066cc;              /* Farbe für ungefilterte Links (z.B. Content, Weiter-Link) */
    --border-color: #bdd;               /* Farbe für Blockzitate und Navigationstrenner */
    --nav-decoration-color: #b0b0b0;    /* Gedämpfte Farbe für sekundäre Navigationselemente */
    --toc-bg-color: #f0f0f0;            /* Hintergrundfarbe Inhaltsverzeichnis */
    --code-bg-color: #f5f5f5;           /* Hintergrundfarbe für Code-Blöcke */
    --blockquote-color: #666;           /* Farbe für Zitate, Bildunterschriften, Tastaturkürzel */
}

/* Dark Theme für Benutzer mit Dark Mode-Einstellung */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #e0e0e0;
        --link-color: #4dabf7;
        --border-color: #444;
        --nav-decoration-color: #777777;
        --toc-bg-color: #252525;
        --code-bg-color: #2d2d2d;
        --blockquote-color: #aaa;
    }
    body {
        color-scheme: dark; /* Verbessert die Kompatibilität des Browsers mit dunklen Elementen */
    }
}


/* =======================================================================
 * 2. SCHRIFTARTENEINBINDUNG
 * ======================================================================= */

/* Courier Prime als eingebundene Schriftart */
@font-face {
    font-family: 'Courier Prime';
    src: url('assets/fonts/CourierPrime-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('assets/fonts/CourierPrime-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('assets/fonts/CourierPrime-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* =======================================================================
 * 3. GRUND-LAYOUT UND ALLGEMEINE TYPOGRAPHIE
 * ======================================================================= */

/* Grundlegendes Design */
body {
    font-family: var(--font);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: var(--text-color);
    background-color: var(--bg-color);
  
    /* Rauschen / Faserstruktur simulieren */
    background-image: repeating-radial-gradient(
    circle at 0 0, 
    rgba(0,0,0,0.01), /* Sehr leichtes Grau/Schwarz für die Textur */
    rgba(0,0,0,0.01) 1px, 
    transparent 1px, 
    transparent 2px  
    );
  
    /* Größe der sich wiederholenden Kachel festlegen */
    background-size: 3px 3px; 
  
    /* OPTIONAL: Für eine bessere Lesbarkeit */
    font-family: serif; 
    line-height: 1.6;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Stellt sicher, dass der Footer unten ist */
}

/* =======================================================================
 * 4. INHALTSBEREICH (.content)
 * ======================================================================= */

.content {
    /* padding-bottom entfernt, da es durch margin-bottom des letzten Elements ersetzt wurde */
}

/* --- Überschriften --- */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    font-weight: normal;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

/* Absätze */
.content p {
    margin-bottom: 1em;
}

/* --- Content Links --- */
.content a {
    color: var(--link-color);
    text-decoration: none;
}
.content a:visited {
    color: var(--link-color); /* Verhindert Violettfärbung */
    text-decoration: none;
}
.content a:hover {
    text-decoration: underline;
}

/* --- Blockzitate --- */
.content blockquote {
    border-left: 3px solid var(--border-color);
    padding-left: 15px;
    margin-left: 0;
    color: var(--blockquote-color);
    font-style: italic;
}

/* --- Code & Pre-Formatierung --- */
.content code {
    background-color: var(--code-bg-color);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.98em;
}
.content pre {
    background-color: var(--code-bg-color);
    padding: 10px;
    border-radius: 3px;
    overflow-x: auto;
    font-size: 0.98em;
}

/* --- Bilder und Figuren --- */
.content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
}
.content figure {
    margin: 1.5em auto;
    max-width: 100%;
    display: table; /* Nötig, um Figcaption korrekt zu zentrieren */
}
.content figcaption {
    text-align: center;
    font-size: 0.9em;
    color: var(--blockquote-color);
    margin-top: 5px;
    font-style: italic;
}

/* Korrektur für Layout-Abstände: Entfernt den Bodenabstand des letzten Elements im Content */
.content > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}


/* =======================================================================
 * 5. FUSSNOTEN
 * ======================================================================= */

.content .footnotes {
    margin-top: 30px;
    padding-top: 10px;
    font-size: 0.9em;
}
.content .footnotes ol {
    padding-left: 20px;
}
.content .footnotes li {
    margin-bottom: 0.5em;
}
.content .footnotes a {
    color: var(--text-color);
}
.content .footnotes a:visited {
    color: var(--text-color); /* Verhindert Violettfärbung */
}


/* =======================================================================
 * 6. NAVIGATION (Weiter, Zurück, Home, TOC)
 *
 * Logik: Primary-Action (Weiter) = Linkfarbe. Secondary-Action (Zurück, Home, TOC) = gedämpfte Farbe.
 * ======================================================================= */

.navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 0; /* Vertikaler Abstand oben/unten */
    margin-top: 0; 
}

/* --- A. Primäre Aktion: WEITER-Link (Fett und Linkfarbe) --- */

/* Wrapper: Visuelle Trennlinie oberhalb des "Weiter"-Links */
.nav-wrapper.primary-action {
    font-size: 1em; 
    font-weight: normal;
    border-top: 1px solid var(--nav-decoration-color); 
    padding-top: 10px; 
}

/* Link-Styling: Setzt die Linkfarbe für den "Weiter" Button */
.nav-wrapper.primary-action a.nav-link {
    color: var(--link-color);
}

/* Verhindert Violettfärbung für den "Weiter" Button */
.nav-wrapper.primary-action a.nav-link:visited {
    color: var(--link-color); 
    text-decoration: none;
}


/* --- B. Sekundäre Aktionen: Zurück, Home, TOC (Gedämpft und kleiner) --- */

/* 1. Container für Home und TOC */
.nav-secondary-wrapper {
    display: flex; 
    align-items: center;
    margin-top: 10px; 
    font-size: 0.75em; /* Kleinere Schriftgröße */
    color: var(--nav-decoration-color); /* Gedämpfte Farbe */
}

/* 2. Wrapper für Zurück, Home, TOC */
.nav-wrapper.secondary-action {
    margin: 0; 
}

/* 3. Tastaturkürzel (z.B. (i), (h)) */
.nav-keyboard-link {
    font-size: 1em; 
    color: var(--blockquote-color); /* Dunkler als die Linkfarbe, aber sichtbar */
    white-space: nowrap;
}

/* 4. Link-Farbe: Wichtig! Stellt sicher, dass alle sekundären Nav-Links die gedämpfte Farbe des Wrappers erben */
.nav-secondary-wrapper .nav-link,
.nav-secondary-wrapper .nav-keyboard-link {
    color: inherit; 
}

/* 5. Besuchte Links in der gesamten Navigation (bezieht sich auf alle a.nav-link) */
.navigation a.nav-link:visited {
    color: inherit; /* Behält die Farbe des Wrappers bei (gedämpft oder Linkfarbe) */
    text-decoration: none;
}

/* 6. Hover-Effekt: Sekundäre Links sollen beim Hover heller werden (Haupttextfarbe) */
.nav-secondary-wrapper .nav-link:hover {
    color: var(--text-color); 
}

/* 7. Trennzeichen (|) */
.nav-separator {
    margin: 0 8px; 
    color: var(--nav-decoration-color); 
}


/* =======================================================================
 * 7. INHALTSVERZEICHNIS (TOC-Seite)
 * ======================================================================= */

/* Spezifisches Design für die TOC-Liste */
.content ul#toc {
    display: inline-block; 
    padding-left: 0; /* Entfernt die Standard-Einrückung */
    margin-left: 0; 
    text-align: left; 
    list-style: none; /* Entfernt die Listenpunkte */
    margin: 1em auto;
}
.content ul#toc li {
    margin: 5px 0;
    padding-left: 0;
}

/* Styling für das Filter-Menü auf der TOC-Seite */
.filter-menu {
    font-size: 0.9em; 
    color: var(--texte-color); 
    
    /* NEU: Vergrößert den Abstand nach oben */
    margin-top: 30px; /* Wählen Sie hier den gewünschten Wert (z.B. 20px, 30px, 1.5em) */
    
    /* Behält den Abstand nach unten bei */
    margin-bottom: 10px; 
}


/* =======================================================================
 * 8. Modal Einblendung für die Suche
 * ======================================================================= */

/* MODAL OVERLAY */
#search-modal {
    display: none; /* Wichtig: Standardmäßig versteckt */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); 
    padding-top: 50px; 
}

/* INHALT DES MODALS */
.modal-content {
    background-color: var(--bg-color);
    margin: 10% auto; 
    padding: 20px;
    border: 1px solid var(--nav-decoration-color);
    width: 80%; 
    max-width: 500px; 
    position: relative;
    border-radius: 5px;
}

/* SCHLIESSEN-BUTTON */
.close-button {
    color: var(--text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* FORMULAR-ELEMENTE */
#search-input-field {
    width: 100%;
    padding: 10px;
    margin: 10px 0 20px 0;
    box-sizing: border-box;
    font-size: 1em;
    border: 1px solid var(--nav-decoration-color);
    background-color: var(--bg-color);
    color: var(--text-color);
}
.search-modal-title {
    margin-top: 0;
    font-size: 1.2em;
}