/* 1. Das Standard-CSS laden */
@import url("asciidoctor.css");

/* 2. Custom CSS */
:root {
    --phase-1-color: #fbc02d; /* Gold/Gelb */
    --phase-2-color: #4caf50; /* Grün */
    --phase-3-color: #29b6f6; /* Hellblau */
    --phase-4-color: #e57373; /* Rot/Rosa */
    --phase-5-color: #9c27b0; /* Violett */

    /* NEU: Variablen für die Tabelle */
    --zebra-odd-bg: #ffffff;    /* Weiß für jede 1. Zeile */
    --zebra-even-bg: #f4f6f8;   /* Helles Grau für jede 2. Zeile */
    
    --category-bg: #2d3e50;     /* Dunkelblau für Kategorie-Zeilen (A, B...) */
    --category-text: #ffffff;   /* Weißer Text für Kategorie-Zeilen */

    /* NEU: Variablen für die Kopfzeile (Erste Zeile) */
    --table-head-bg: #333333;   /* Dunkelgrau/Schwarz für den Header */
    --table-head-text: #ffffff; /* Weißer Text im Header */
}

#footer {
    background-color: transparent !important; /* Entfernt den dunklen Hintergrund */
    color: rgba(0,0,0,.8) !important;       /* Macht den Text wieder dunkel */
    border-top: 1px solid #dddddf;          /* Optionale, feine Trennlinie oben */
}

#footer-text {
    color: rgba(0,0,0,.8) !important;       /* Textfarbe erzwingen */
}

/* Basis-Styling für die großen Phasen-Container */
.hintergrund-phase1, .hintergrund-phase2, .hintergrund-phase3, .hintergrund-phase4, .hintergrund-phase5 {
    padding: 1.5em;
    margin-bottom: 1.5em;
    background: #f9f9f9;       
    border: 1px solid #e0e0dc; 
    border-radius: 4px;

    /* Der vertikale farbige Balken links (10px breit) */
    border-left-width: 10px;
    border-left-style: solid;
}

/* Die Farben für die großen Boxen zuweisen */
.hintergrund-phase1 { border-left-color: var(--phase-1-color); }
.hintergrund-phase2 { border-left-color: var(--phase-2-color); }
.hintergrund-phase3 { border-left-color: var(--phase-3-color); }
.hintergrund-phase4 { border-left-color: var(--phase-4-color); }
.hintergrund-phase5 { border-left-color: var(--phase-5-color); }


/* Basis-Styling für die Sub-Kategorien (innere Boxen) */
.hintergrund-phase1-subkategorie, 
.hintergrund-phase2-subkategorie, 
.hintergrund-phase3-subkategorie, 
.hintergrund-phase4-subkategorie, 
.hintergrund-phase5-subkategorie {
    padding: 1em;
    margin-bottom: 1em;
    background: #ffffff;      
    border: 1px solid #e0e0dc;
    
    /* Etwas schmalerer Balken für die inneren Boxen (5px breit) */
    border-left-width: 5px;
    border-left-style: solid;
}

/* Die Farben für die inneren Boxen zuweisen */
.hintergrund-phase1-subkategorie { border-left-color: var(--phase-1-color); }
.hintergrund-phase2-subkategorie { border-left-color: var(--phase-2-color); }
.hintergrund-phase3-subkategorie { border-left-color: var(--phase-3-color); }
.hintergrund-phase4-subkategorie { border-left-color: var(--phase-4-color); }
.hintergrund-phase5-subkategorie { border-left-color: var(--phase-5-color); }


/* 1. Abstände am Container (dem Kasten außen) */
#phase-1-titel, 
#phase-2-titel, 
#phase-3-titel, 
#phase-4-titel, 
#phase-5-titel {
    margin-top: 50px !important;
    margin-bottom: 20px;
}

/* 2. Schriftgröße DIREKT am Text (dem p-Tag innen) */
#phase-1-titel p, 
#phase-2-titel p, 
#phase-3-titel p, 
#phase-4-titel p, 
#phase-5-titel p {
    font-size: 1.4em !important; /* Größe hier anpassen (1.8em ist groß) */
    line-height: 1.2 !important;
}

/* ==========================================================================
   NEU: TABELLEN STYLING (Header, Zebra & Kategorien)
   ========================================================================== */

/* Grundeinstellung für saubere Ränder */
table.tableblock {
    border-collapse: collapse !important;
    width: 100%;
    margin-bottom: 1.5em;
}

/* --- 1. KOPFZEILE (HEADER) STYLING --- */
/* Das betrifft die allererste Zeile mit den Spaltentiteln */
table.tableblock thead th,
table.tableblock thead tr {
    background-color: var(--table-head-bg) !important;
    color: var(--table-head-text) !important;
    font-weight: bold;
}

/* --- 2. ZEBRA-STREIFEN (BODY) --- */

/* Ungerade Zeilen (1, 3, 5...) */
table.tableblock tbody tr:nth-child(odd) {
    background-color: var(--zebra-odd-bg);
}

/* Gerade Zeilen (2, 4, 6...) */
table.tableblock tbody tr:nth-child(even) {
    background-color: var(--zebra-even-bg);
}

/* --- 3. KATEGORIE-HERVORHEBUNG --- */
/* Dies überschreibt den Zebra-Look, wenn die Klasse .kategorie in der Zeile gefunden wird */

table.tableblock tbody tr:has(.kategorie) {
    background-color: var(--category-bg) !important;
    color: var(--category-text) !important;
}

table.tableblock tbody tr:has(.kategorie) p,
table.tableblock tbody tr:has(.kategorie) strong,
table.tableblock tbody tr:has(.kategorie) a {
    color: var(--category-text) !important;
}

/* Fallback für die Zelle selbst */
td.kategorie {
    background-color: var(--category-bg) !important;
    color: var(--category-text) !important;
    font-weight: bold;
}