/* ============================================================================
   RESET & BASE STYLES
   ============================================================================
   
   Profi: Einheitlicher Reset + Design-Tokens sichern konsistente Darstellung.
   für mich: Erst resetten (Box-Modell vereinheitlichen), dann mit Variablen arbeiten
             (Farben/Abstände zentral steuern), danach Seiten-/Komponenten-Styles.
   ============================================================================ */

/* Universal Selector (*) - betrifft alle Elemente */
/* box-sizing: border-box bedeutet: padding und border werden in der width/height 
   mit eingerechnet, was Layoutberechnungen erheblich vereinfacht */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Performance: Optimierte Rendering-Hinweise */
img {
    height: auto;
    max-width: 100%;
    display: block;
}

/* Skip Link für Accessibility (versteckt, sichtbar bei Tab-Focus) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--text-primary);
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 0;
}

/* Design-Tokens: zentrale Variablen für Farben, Abstände, Größen */
:root {
    /* Petrol Farben */
    --petrol-light: #d4e8e8;
    --petrol-soft: #b8d8d8;
    
    /* Rose Farben */
    --rose-light: #f4e4e8;
    --rose-soft: #e8d4dc;
    
    /* Sage Farben */
    --sage-light: #e8f0e8;
    --sage-soft: #d8e4d8;
    
    /* Text Farben */
    --text-primary: #2c3e3e;
    --text-secondary: #4a5c5c;
    --text-muted: #6a7878;
    
    /* Kompatibilität: Alte Variablen auf neue Farben mappen */
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-muted);
    --color-text-soft: var(--text-muted);
    --color-text-dim: var(--text-secondary);
    --color-text-strong: var(--text-primary);
    --color-accent-blue: var(--petrol-soft);
    /* Link-Farben: Petrol/Rose für harmonisches Design */
    --color-link-internal: var(--petrol-soft);           /* Petrol statt Grün */
    --color-link-internal-hover: var(--text-secondary);   /* dunkleres Petrol-Grau */
    --color-link-nav: var(--rose-soft);                   /* Rose statt Rot */
    --color-link-nav-hover: var(--text-secondary);        /* dunkleres Grau */
    /* Tabellen-Links: Burgunder */
    --color-link-table: #6a1b9a;                          /* Burgunder für Ruhezustand */
    --color-link-table-hover: #4a148c;                    /* dunkleres Burgunder beim Hover */
    --color-grid-blue: rgba(184, 216, 216, 0.4);         /* Petrol-basiert */
    --color-surface: rgba(255, 255, 255, 0.55);
    --color-surface-strong: rgba(255, 255, 255, 0.65);

    /* Layout/Komponente Wissen-Fenster */
    --wissen-header-height: 44px;
    --wissen-row-extra: 7px; /* min-height = 1em + extra */

    /* Tabellen/Boxen */
    --color-table-border: #bbb;
    --color-table-head-bg: #e9ecef;
    --color-table-row-odd: rgba(255, 255, 255, 0.9);
    --color-table-row-even: rgba(248, 248, 248, 0.9);
    --color-legend-border: #aaa;
    --color-legend-bg: rgba(255, 255, 255, 0.9);
    --color-kernel-head-bg: rgba(236, 240, 241, 0.7);
    --color-kernel-head-border: rgba(189, 195, 199, 0.8);
    --color-kernel-row-border: rgba(236, 240, 241, 0.8);
    --color-kernel-row-even: rgba(248, 249, 250, 0.5);
}

/* Body als Hauptcontainer für die gesamte Seite */
/* min-height: 100vh sorgt dafür, dass die Seite mindestens die volle Viewport-Höhe 
   einnimmt, auch bei wenig Inhalt */
/* linear-gradient erzeugt einen weichen Farbübergang von links oben nach rechts unten */
body {
    min-height: 100vh;
    background: linear-gradient(to bottom, var(--petrol-light) 0%, var(--rose-light) 50%, var(--sage-light) 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Globale Link-Standards: intern (Default) und extern (rel~="external").
   Navigation unten hat eigene Regeln. */
/* Intern: Standard */
a {
    color: var(--color-link-internal);
    text-decoration: none;
}
a:hover,
a:focus-visible {
    color: var(--color-link-internal-hover);
    text-decoration: underline;
}

/* Externe Links */
a[rel~="external"] {
    color: #0645ad;
}
a[rel~="external"]:hover,
a[rel~="external"]:focus-visible {
    color: #043e8f;
    text-decoration: underline;
}

/* ============================================================================
   NAVIGATION
   ============================================================================
   
   Profi: Drei Bereiche (left/center/right). Flexbox für horizontale Verteilung,
          .nav-center absolut zentriert für exakte Mitte unabhängig von Breite links/rechts.
   für mich: Entspricht der HTML-Struktur in allen Seiten: nav-left (Brand/Logo),
             nav-center (Hauptlinks), nav-right (Kontakt). aria-current hebt aktive Seite.
   ============================================================================ */

/* Hauptcontainer der Navigation */
/* display: flex aktiviert Flexbox-Layout */
/* justify-content: space-between verteilt den verfügbaren Platz zwischen den 
   Flex-Items (hier: nav-left, nav-center, nav-right) */
/* align-items: center sorgt für vertikale Zentrierung aller Elemente */
.nav-bar {
    background: var(--color-surface);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Linker Bereich: Brand/Logo-Link */
/* gap: 3rem erzeugt Abstand zwischen Elementen im Flex-Container */
.nav-left {
    display: flex;
    align-items: center;
    gap: 3rem;
}

/* Zentrale Navigation mit absoluter Positionierung */
/* position: absolute entfernt das Element aus dem normalen Dokumentenfluss */
/* left: 50% + transform: translateX(-50%) ist eine bewährte Methode zur 
   horizontalen Zentrierung - das Element wird um die Hälfte seiner eigenen 
   Breite nach links verschoben, wodurch es exakt zentriert ist */
.nav-center {
    display: flex;
    gap: 2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Brand-Link: Logo/Imperiumcrew-Link */
/* font-weight: 500 = medium weight, zwischen normal (400) und bold (700) */
.nav-brand {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
}

/* Navigation-Links: Standard-Styling für alle Links in nav-center und nav-right */
/* transition: color 0.3s ease erzeugt einen sanften Übergangseffekt beim 
   Hover - die Farbe ändert sich über 0.3 Sekunden mit einer "ease"-Kurve */
.nav-center a,
.nav-right a {
    color: var(--color-text); /* sanftes Schwarz wie bisher */
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

/* Hover-State: Wenn der Mauszeiger über dem Link ist */
/* Farbwechsel nach schwarz für besseren Kontrast und visuelles Feedback */
.nav-center a:hover,
.nav-right a:hover {
    color: var(--color-link-nav); /* sanftes Rot beim Hover */
}

/* Aktive Seite: Hervorhebung der aktuell besuchten Seite */
/* Die .active Klasse wird im HTML dynamisch gesetzt und signalisiert 
   dem Nutzer seine aktuelle Position */
.nav-center a.active,
.nav-right a.active {
    color: var(--color-text);
    font-weight: 500;
}

/* Kontakt-Link: Styling identisch mit Brand-Link für visuelle Konsistenz */
.nav-right .nav-brand {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
}

/* Brand-Link links (Imperiumcrew) soll wie Navi-Links aussehen */
.nav-left .nav-brand {
    color: var(--color-text);
    text-decoration: none;
}
.nav-left .nav-brand:hover,
.nav-left .nav-brand:focus-visible {
    color: var(--color-link-nav);
}

/* ============================================================================
   MAIN CONTENT
   ============================================================================
   
   Profi: .page-content begrenzt Zeilenlänge (max-width) und zentriert den Text,
          h1/h2/p Typographie für klare Hierarchie.
   für mich: In HTML werden die meisten Seiten-Inhalte in <div class="page-content"> gepackt;
             Dokumentseiten nutzen zusätzlich .content-wide/.content-xl.
   ============================================================================ */

/* Hauptinhalt-Container */
/* max-width: 800px ist ein bewährter Wert für Lesbarkeit - ideal für 55-75 
   Zeichen pro Zeile (optimal für Textverständnis) */
/* margin: 0 auto ist die Kurzform für margin-top: 0, margin-bottom: 0, 
   margin-left: auto, margin-right: auto - zentriert den Block horizontal */
.page-content {
    max-width: 800px;
    margin: 3rem auto 0; /* Abstand zur Navigation oben (3rem), unten 0 */
    padding: 1.5rem 2rem; /* reduziertes Padding oben/unten innerhalb der Box */
    background: rgba(255, 255, 255, 0.4); /* leichter Hintergrund für bessere Lesbarkeit auf Gradient */
    border-radius: 8px;
    margin-bottom: 2rem; /* Abstand nach unten zur nächsten Box */
}

/* Typografie: Überschriften erster Ebene */
/* font-weight: 300 = light weight für elegantes, modernes Erscheinungsbild */
/* text-align: center zentriert die Überschrift - bei Haupttiteln häufig gewünscht */
h1 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Typografie: Überschriften zweiter Ebene */
/* font-weight: 400 = normal weight, Standard für h2 */
h2 {
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--petrol-soft);
}

/* Typografie: Absätze/Fließtext */
/* line-height: 1.6 */
p {
    margin-bottom: 0.75rem;
    text-align: justify;
    hyphens: auto;
    color: var(--text-primary);
}

/* Typografie: Überschriften dritter Ebene */
h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 1.3rem;
    margin-bottom: 0.6rem;
}

/* Typografie: Überschriften vierter Ebene */
h4 {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

/* Text-Elemente: Blockquotes */
blockquote {
    border-left: 3px solid var(--rose-soft);
    padding-left: 1.2rem;
    margin: 1.2rem 0;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Listen */
ul {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

li {
    margin-bottom: 0;
    line-height: 1.6;
}

/* Text-Formatierung */
strong {
    color: var(--text-primary);
    font-weight: 600;
}

em {
    color: var(--text-secondary);
    font-style: italic;
}

/* Code-Inline */
code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* Horizontale Linie */
hr {
    border: none;
    border-top: 1px solid var(--petrol-soft);
    margin: 1.5rem 0;
}

/* Inhaltssektionen: Gruppierung von zusammengehörigem Content */
.section {
    background: rgba(255, 255, 255, 0.55);
    padding: 1.8rem;
    border-radius: 8px;
    margin-bottom: 1.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Summary-Section: Für Einleitungen und Zusammenfassungen */
.summary-section {
    background: rgba(255, 255, 255, 0.65);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   FOOTER
   ============================================================================
   
   Profi: Fixierter Footer (links unten) für Branding/Link; zusätzliche Meta-Infos
          (last-updated) werden separat positioniert (unten rechts).
   für mich: In index.html ist ein Besucherzähler im Footer-Block integriert –
             zählt nur lokal (localStorage), keine Server-Verbindung.
   ============================================================================ */

/* Fixierter Footer-Container */
/* position: fixed bedeutet: das Element bleibt an der angegebenen Position 
   (bottom: 2rem, left: 2rem) auch beim Scrollen fixiert */
.footer {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
}

/* Label im Footer (z.B. "chd108") */
.footer-label {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    margin-bottom: 0.3rem;
}

/* Links im Footer */
.footer a {
    text-decoration: none; /* Farbe kommt aus globalen Linkregeln */
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

/* Hover-State für Footer-Links */
.footer a:hover {
    text-decoration: underline; /* Farbe via globalen Hover-Regeln */
}

/* ============================================================================
   NOTICE COMPONENT
   ============================================================================
   
   Profi: Neutrale Hinweisbox mit leichtem Hintergrund und Border – gut sichtbar,
          ohne ablenkend zu sein.
   für mich: Wird in einigen Indexseiten genutzt, um „Bereich im Aufbau“ anzuzeigen.
   ============================================================================ */

/* Hinweis-Box */
/* background: rgba() nutzt Alpha-Transparenz für halbtransparenten Hintergrund */
/* border-radius: 8px erzeugt abgerundete Ecken für modernes, freundliches Design */
/* box-shadow fügt subtilen Schatten hinzu für Tiefe und Abhebung */
.notice {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================================
   WISSENSCHAFTSSYSTEMATIK PAGE
   ============================================================================
   
   Profi: .container erweitert die Inhaltsbreite für große Tabellen; h1/Untertitel
          sind spezifisch gestylt; .main-table Wrap zentriert und limitiert Breite.
   für mich: HTML-Struktur siehe seiten/wissen/wissenschaftssystematik.html –
             Reihenfolge: Titel, Untertitel, Haupttabelle, Kurzerklärungen, Beispiele, Quellen.
   ============================================================================ */

/* Container für breitere Inhalte (z.B. große Tabellen) */
/* Standard: 1400px für Wissenschaftssystematik, 900px für leitfaden_erweitert.html */
.container {
    max-width: 1600px; /* noch breiter für Wissenschaftssystematik */
    margin: 0 auto;
    padding: 32px 20px 56px;
}

/* Container für leitfaden_erweitert.html: schmalere Darstellung */
/* Wenn Container ein header-Element enthält (leitfaden_erweitert.html Struktur) */
.container > header {
    max-width: 900px;
}

/* Container mit max-width 900px für leitfaden_erweitert.html */
body > .container {
    max-width: 900px;
    padding: 2.5rem 2rem;
}

/* Wissenschaftssystematik-Seite: volle Breite nutzen */
/* Spezifische Regel für diese Seite, damit sie nicht von body > .container begrenzt wird */
.container:not(body > .container) {
    max-width: 1600px; /* breiter für Wissenschaftssystematik */
}

/* Header innerhalb von Container (für leitfaden_erweitert.html) */
header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--petrol-soft);
}

/* H1 innerhalb von .container: Spezielle Formatierung */
/* !important überschreibt eventuelle andere Styles - wird hier verwendet, 
   weil h1 bereits global definiert ist. Vorsicht: !important sollte sparsam 
   eingesetzt werden, da es die CSS-Spezifität umgeht */
.container > h1 {
    margin-bottom: 0.6rem !important;
    color: var(--text-primary);
}

/* Untertitel innerhalb von .container: Reduzierter Abstand zum Titel */
.container > .subtitle {
    margin-top: 0 !important;
}

/* Untertitel-Styling */
.subtitle {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Unterabschnitt-Überschriften (h2) */
/* Farbe: pastell-hellblau (#8ec5ff) für visuelle Hierarchie und Abgrenzung */
.subsection-title {
    color: #8ec5ff;
}

/* Zusätzlicher Abstand für bestimmte Unterabschnitte */
.subsection-spaced {
    margin-top: 1.2rem;
}

/* ============================================================================
   TABLES (für Wissenschaftssystematik)
   ============================================================================
   
   Profi: Ruhiges, lesbares Tabellenlayout mit Zebra-Streifen und klaren Borders.
   für mich: thead = Kopfzeile, tbody = Daten; Spaltenbreiten werden per nth-child gesetzt.
   ============================================================================ */

/* Basis-Tabellen-Styling */
/* border-collapse: collapse = angrenzende Borders werden zusammengelegt 
   (keine Doppel-Linien zwischen Zellen) */
/* overflow: hidden verhindert, dass Inhalte über die border-radius hinausragen */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Wrapper für Zentrierung der Haupttabelle */
/* display: flex mit justify-content: center ist eine moderne Alternative zu 
   margin: 0 auto und erlaubt zusätzliche Flexbox-Features */
.main-table-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Haupttabelle: Begrenzte Breite für optimale Lesbarkeit */
.container .main-table {
    max-width: 1200px;
    width: 96%;
    margin: 0 auto;
}

/* Tabellenzellen: th (Header) und td (Daten) */
/* vertical-align: top sorgt dafür, dass Inhalte oben ausgerichtet werden, 
   besonders wichtig bei unterschiedlich hohen Zellen */
th, td {
    border: 1px solid var(--color-table-border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

/* Tabellenkopf: Visuelle Hervorhebung durch Hintergrundfarbe */
th {
    background: var(--color-table-head-bg);
}

/* Zebra-Streifen: Alternierende Hintergrundfarben für bessere Lesbarkeit */
/* :nth-child() ist ein CSS-Pseudo-Klassen-Selektor - (odd) = ungerade Zeilen */
tbody tr:nth-child(odd) {
    background: var(--color-table-row-odd);
}

/* Gerade Zeilen: Leicht dunklerer Hintergrund */
tbody tr:nth-child(even) {
    background: var(--color-table-row-even);
}

/* Tabellenspalten-Breiten: Individuelle Breiten für optimale Darstellung */
/* :first-child = erste Spalte, :nth-child(3) = dritte Spalte, etc. */
/* min-width verhindert, dass Spalten zu schmal werden und Text abgeschnitten wird */
th:first-child, td:first-child {
    width: 28%;
    min-width: 180px;
}

th:nth-child(3), td:nth-child(3) {
    width: 16%;
    min-width: 220px;
}

th:nth-child(6), td:nth-child(6) {
    width: 36%;
    min-width: 300px;
}

th:nth-child(7), td:nth-child(7) {
    width: 12%;
    min-width: 160px;
}

/* Links in Tabellen: Burgunder */
/* Ausnahme: Externe Links behalten ihre Standard-Farbe */
table a:not([rel~="external"]),
.table-doc a:not([rel~="external"]),
tbody a:not([rel~="external"]),
td a:not([rel~="external"]),
.link-item a:not([rel~="external"]) {
    color: var(--color-link-table) !important;
    text-decoration: none;
}

table a:not([rel~="external"]):hover,
.table-doc a:not([rel~="external"]):hover,
tbody a:not([rel~="external"]):hover,
td a:not([rel~="external"]):hover,
.link-item a:not([rel~="external"]):hover,
table a:not([rel~="external"]):focus-visible,
.table-doc a:not([rel~="external"]):focus-visible,
tbody a:not([rel~="external"]):focus-visible,
td a:not([rel~="external"]):focus-visible,
.link-item a:not([rel~="external"]):focus-visible {
    color: var(--color-link-table-hover) !important;
    text-decoration: underline;
}

/* ============================================================================
   LEGEND BOX
   ============================================================================
   
   Profi: .legend-box mit monospace-Schrift und pre-line für verständliche Quellenlisten.
   für mich: Externe Links haben einheitlich target+rel – entspricht dem HTML-Refactoring.
   ============================================================================ */

/* Quellen-Box */
/* font-family: ui-monospace, monospace nutzt die System-Monospace-Schrift für 
   gleichmäßige Zeichenbreite - ideal für Links und Quellen */
/* white-space: pre-line behält Zeilenumbrüche bei, erlaubt aber Textumbrüche */
.legend-box {
    margin-top: 20px;
    padding: 14px;
    border: 1px solid var(--color-legend-border);
    background: var(--color-legend-bg);
    font-family: ui-monospace, monospace;
    white-space: pre-line;
    font-size: 0.9rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Links innerhalb der Legend-Box */
/* Externe Links verwenden eine andere Farbe (#0645ad = Standard-Link-Blau) 
   zur visuellen Unterscheidung */
.legend-box a {
    text-decoration: none;
}

.legend-box a:hover {
    text-decoration: underline;
}

/* Deutliche Signalfarbe auch für Links in der Legende bei Interaktion */
.legend-box a:hover,
.legend-box a:focus-visible,
.legend-box a:active {
    text-decoration: underline;
}

/* Footer auf der Wissenschaftssystematik-Seite */
footer {
    margin-top: 40px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* ============================================================================
   WISSEN-FENSTER KOMPONENTE
   ============================================================================
   
   Profi: Grid mit 4 Spalten; sticky Spaltenkopf; jede Spalte scrollt separat;
          Rasterlinien bewusst entfernt (Designentscheidung) → ruhiges Layout.
   für mich: HTML-Struktur: .wissen-fenster > .fenster-spalte > (.spaltenkopf + .link-item*).
             Leere .link-item.empty halten die Zeilenhöhe/Raster konsistent.
   ============================================================================ */

/* Hauptcontainer der Tabellen-Komponente */
/* display: grid aktiviert CSS Grid Layout - moderner und mächtiger als Flexbox 
   für zweidimensionale Layouts */
/* grid-template-columns: repeat(4, 1fr) erstellt 4 Spalten mit jeweils gleicher 
   Breite (1fr = 1 fraction, d.h. gleichmäßige Aufteilung des verfügbaren Platzes) */
/* gap: 0 bedeutet kein Abstand zwischen Spalten - die Trennlinien werden durch 
   border-right der Spalten erzeugt */
/* width: fit-content bedeutet, die Breite passt sich dem Inhalt an (dynamisch) */
/* max-width: 95% verhindert, dass die Tabelle zu breit wird auf großen Bildschirmen */
.wissen-fenster {
    --cols: 4; /* Anzahl Spalten (nur für Responsive) */
    background: var(--color-surface);
    border: none;
    border-radius: 0;
    box-shadow: none; /* kein Außenrahmen */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 1rem auto 0;
    padding: 0;
    box-sizing: border-box;
    width: fit-content;
    max-width: 95%;
    position: relative;
}

/* Einzelne Spalte innerhalb der Tabelle */
/* display: flex mit flex-direction: column erstellt vertikales Flexbox-Layout 
   innerhalb jeder Grid-Spalte */
/* max-height: 600px begrenzt die Höhe - bei Überschreitung wird scrollbar */
/* overflow-y: auto erzeugt automatisch eine Scrollbar, wenn der Inhalt höher 
   als max-height ist */
/* overflow-x: hidden verhindert horizontales Scrollen */
/* position: relative ermöglicht absolute Positionierung von Kind-Elementen 
   (z.B. für Hintergrund-Raster) */
.fenster-spalte {
    display: flex;
    flex-direction: column;
    border-right: none; /* Vertikale Linien kommen vom Container */
    position: relative;
    /* Konstanten für Header- und Zeilenhöhe (für sichtbares Raster) */
    --header-height: var(--wissen-header-height);
    --row-height: calc(1em + var(--wissen-row-extra));
    max-height: 600px;
    min-height: calc(var(--header-height) + var(--row-height));
    overflow-y: auto;
    overflow-x: hidden;
}

/* Letzte Spalte: Keine rechte Border (wird durch Container-Border ersetzt) */
.fenster-spalte:last-child {
    border-right: none;
}

/* Spaltenkopf: Sticky-Header bleibt beim Scrollen sichtbar */
/* position: sticky kombiniert relative und fixed Positionierung - das Element 
   bleibt in normalem Flow, bis der Viewport die angegebene Position erreicht, 
   dann "klebt" es am angegebenen Ort (top: 0) */
/* z-index: 2 stellt sicher, dass der Header über anderen Elementen liegt */
/* flex-shrink: 0 verhindert, dass der Header beim Scrollen schrumpft */
/* display: flex mit align-items: center zentriert Icon und Text vertikal */
/* gap: 8px erzeugt Abstand zwischen Icon und Text */
.spaltenkopf {
    position: sticky;
    top: 0;
    background: var(--color-surface-strong);
    border-bottom: none; /* Zeilenlinie kommt vom Raster */
    padding: 12px 7px;
    font-weight: 500;
    text-align: center;
    font-size: 1.1rem;
    color: #333;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--header-height);
}

/* Icon-Styling in Spaltenköpfen */
/* object-fit: contain sorgt dafür, dass das Bild vollständig sichtbar bleibt 
   und sein Seitenverhältnis behält, auch wenn es gestreckt werden müsste */
/* flex-shrink: 0 verhindert, dass das Icon beim Platzmangel schrumpft */
.spalten-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Link-Item: Einzelne Zeile mit einem Link */
/* height: 42px = feste Zellhöhe für konsistentes Raster */
/* overflow: hidden verhindert, dass Text über die Zelle hinausragt */
/* text-overflow: ellipsis zeigt "..." am Ende an, wenn Text zu lang ist */
/* white-space: nowrap verhindert Zeilenumbrüche innerhalb der Zelle */
/* z-index: 1 stellt sicher, dass Links über dem Hintergrund-Raster liegen */
.link-item {
    display: block;
    height: auto; /* dynamisch: wächst mit Inhalt */
    min-height: calc(1em + 7px); /* Minimum plus 7px */
    padding: 0 7px; /* vertikal minimal, horizontal wie gehabt */
    font-size: 0.9rem;
    line-height: 1; /* dichteste Zeilenhöhe */
    border-bottom: none; /* keine Zell-Borders, um doppelte Linien zu vermeiden */
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Letzte Zelle pro Spalte: keine doppelte untere Linie mit Container-Border */
/* Hintergrund-Raster für jede Spalte: horizontale Linien unabhängig vom Inhalt */
.fenster-spalte::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-height);
    bottom: 0;
    z-index: 0; /* unter den Zellen */
    background: none; /* keine horizontalen Rasterlinien */
}

/* Vertikale Rasterlinien für das gesamte Fenster (keine Doppel-Linien) */
.wissen-fenster::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: none; /* keine vertikalen Rasterlinien */
}



/* Link innerhalb einer Zelle */
/* display: block macht den Link zu einem Blockelement, wodurch die gesamte 
   Zelle klickbar wird (bessere UX) */
.link-item a {
    text-decoration: none;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Hover-State: Visuelles Feedback bei Mauszeiger */
.link-item a:hover {
    text-decoration: underline; /* Farbe kommt aus globalen Regeln */
}

/* Leere Platzhalter-Zelle */
/* background: transparent macht die Zelle unsichtbar, behält aber die Rasterstruktur */
/* Wird verwendet, um immer mindestens eine leere Zeile nach den Einträgen zu zeigen */
.link-item.empty {
    background: transparent;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================
   
   Profi: Breakpoints 1024px (2 Spalten), 640px (1 Spalte). Grid-Spalten werden reduziert,
          Borders der Spalten angepasst, um Doppelungen zu vermeiden.
   für mich: Mobile-First: Basis = groß, Media Queries machen’s kleiner/umschaltend.
   ============================================================================ */

/* Tablet und kleinere Desktop-Bildschirme: 2 Spalten */
@media (max-width: 1024px) {
    .wissen-fenster {
        grid-template-columns: repeat(2, 1fr);
        --cols: 2;
    }
}

/* Mobile-Geräte: 1 Spalte (vollständig untereinander) */
/* border-right wird durch border-bottom ersetzt für vertikale Trennung */
@media (max-width: 640px) {
    .wissen-fenster {
        grid-template-columns: 1fr;
        --cols: 1;
    }
    
    .fenster-spalte {
        border-right: none;
        border-bottom: none; /* horizontale Linien kommen vom Raster */
    }
    
    .fenster-spalte:last-child {
        border-bottom: none;
    }
}

/* ============================================================================
   PRINT STYLES (nur Druck)
   ============================================================================
   
   Profi: Navigation/Footers ausblenden; Content auf volle Breite; Links klassisch darstellen.
   für mich: So wird ein sauberer Ausdruck ohne UI-Elemente erzeugt.
   ============================================================================ */
@media print {
    body {
        background: #fff !important;
    }
    .nav-bar,
    .footer {
        display: none !important;
    }
    .page-content,
    .content-wide,
    .content-xl,
    .kernel-content {
        max-width: 100% !important;
        padding: 0 !important;
    }
    a {
        color: var(--color-text-strong) !important;
        text-decoration: underline !important;
    }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================
   
   Profi: Kleine, gezielte Klassen für Abstände, Breite, Texte.
   für mich: Wiederverwendbar auf allen Seiten; vermeiden Duplikate in spezifischen Regeln.
   ============================================================================ */

/* Zusätzlicher Abstand nach oben */
.margin-top-spaced {
    margin-top: 1.75rem;
}

/* Negativer Abstand: Kompensiert zu große Abstände zwischen Elementen */
.margin-top-negative {
    margin-top: -0.375rem;
}

/* Gedämpfte Textfarbe: Für weniger hervorgehobene Textelemente */
.subtitle-muted {
    color: #333;
}

/* Eingerückte Liste: Standard-Margin für Listen mit Einrückung */
.list-indented {
    margin: 0 0 20px 18px;
}

/* Einfacher Link ohne spezielle Formatierung */
.link-simple {
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--color-link-table); /* Burgunder für interne Links */
    transition: color 0.3s ease;
}

.link-simple:hover,
.link-simple:focus-visible {
    color: var(--color-link-table-hover); /* dunkleres Burgunder beim Hover */
    text-decoration: underline;
}

/* Container für Links mit spezifischem Abstand */
.link-container {
    margin-top: 2rem;
    margin-left: -2rem;
}

/* Breiten-Utilities für unterschiedliche Inhaltsbreiten */
.content-wide {
    max-width: 1200px !important;
    background: rgba(255, 255, 255, 0.4); /* leichter Hintergrund für bessere Lesbarkeit auf Gradient */
    border-radius: 8px;
    padding: 2rem !important; /* zusätzlicher Padding für bessere Lesbarkeit */
}

.content-xl {
    max-width: 1400px !important;
}

/* Thema: Dokument-Seiten (kräftige Doku-Überschriften) */
.theme-doc h1 {
    color: #0d4f4f !important; /* kräftiges dunkles Petrol */
}

.theme-doc h2 {
    color: #0d4f4f !important; /* kräftiges dunkles Petrol */
    border-left: 4px solid #0d4f4f !important;
    padding-left: 1rem;
}

/* ============================================================================
   DOCUMENT UTILITIES (Tabellen, Abbildungen)
   ============================================================================
   
   Profi: .table-doc für neutrale Dokutabellen; .table-scroll für horizontales Scrollen;
          .doc-figure/.doc-caption strukturieren Abbildungen konsistent.
   für mich: Siehe Doku-Seiten in seiten/it/… und seiten/texte/… – dort kommen diese Klassen vor.
   ============================================================================ */

/* Tabellen in Dokumenten: ruhiges Layout, klare Abstände */
.table-doc {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    font-size: 0.96rem;
}

.table-doc th,
.table-doc td {
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.table-doc thead th {
    background: rgba(236, 240, 241, 0.7);
    font-weight: 600;
}

/* Scroll-Container für breite Tabellen auf kleinen Screens */
.table-scroll {
    width: 100%;
    overflow-x: auto;
}

/* Abbildungen mit Caption */
.doc-figure {
    margin: 1.2rem 0;
}

.doc-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.doc-caption {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.4rem;
    text-align: center;
}

/* ============================================================================
   LINUX-KERNEL DOCUMENT PAGE
   ============================================================================
   
   Profi: .kernel-content öffnet Breite; Code-Blöcke, Erklärboxen, ASCII-Diagramme sind
          optisch integriert und gut lesbar.
   für mich: HTML nutzt .page-content.content-wide.theme-doc.kernel-content – Reihenfolge wichtig.
   ============================================================================ */

/* Breitere Container-Variante für Kernel-Content: Nutzt mehr Platz für Tabellen */
/* Override der .page-content max-width für technische Dokumentation */
.kernel-content {
    max-width: 1200px !important;
}

/* H1 innerhalb von Kernel-Content: Haupttitel in Blau */
.kernel-content h1 {
    color: var(--color-accent-blue);
}

/* H2 innerhalb von Kernel-Content: mit linker Border für visuelle Hierarchie */
.kernel-content h2 {
    font-size: 1.5rem;
    color: var(--color-accent-blue);
    font-weight: 400;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    border-left: 4px solid var(--color-accent-blue);
    padding-left: 1rem;
    text-align: left;
}

/* H3 innerhalb von Kernel-Content */
.kernel-content h3 {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

/* Paragraphs innerhalb von Kernel-Content: Justified Text für bessere Lesbarkeit */
.kernel-content p {
    text-align: justify;
    margin: 1rem 0;
}

/* Strong/Bold Text innerhalb von Kernel-Content */
.kernel-content strong {
    color: var(--color-text);
    font-weight: 600;
}

/* Code innerhalb von Fließtext */
.kernel-content code {
    background: rgba(142, 197, 255, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    color: #c7254e;
}

/* Code-Blocks (pre) */
.kernel-content pre {
    background: rgba(248, 249, 250, 0.8);
    border: 1px solid rgba(222, 226, 230, 0.8);
    border-left: 4px solid #8ec5ff;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 1.2rem 0;
}

/* Erklärungsboxen */
.kernel-content .explanation {
    background: rgba(232, 244, 248, 0.7);
    border-left: 4px solid #8ec5ff;
    padding: 1rem 1.2rem;
    margin: 1.2rem 0;
    border-radius: 0 4px 4px 0;
}

.kernel-content .explanation em {
    color: #2980b9;
    font-style: italic;
    font-weight: 600;
}

/* Einleitungsbox */
.kernel-content .intro {
    background: rgba(248, 249, 250, 0.7);
    padding: 1.5rem;
    margin: 2rem 0 3rem 0;
    border-left: 4px solid #8ec5ff;
    line-height: 1.7;
    border-radius: 0 4px 4px 0;
}

/* Tabellen innerhalb von Kernel-Content */
.kernel-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.kernel-content th {
    background: var(--color-kernel-head-bg);
    color: #333;
    padding: 0.8rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--color-kernel-head-border);
}

.kernel-content td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--color-kernel-row-border);
    vertical-align: top;
}

.kernel-content tr:nth-child(even) {
    background: var(--color-kernel-row-even);
}

/* ASCII-Diagramme */
.kernel-content .ascii-diagram {
    background: rgba(248, 249, 250, 0.7);
    border: 1px solid rgba(222, 226, 230, 0.8);
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 1.2rem 0;
    white-space: pre;
    overflow-x: auto;
}

/* Footer innerhalb von Kernel-Content (nicht der fixed Footer) */
.kernel-content .kernel-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(142, 197, 255, 0.5);
    font-size: 0.9rem;
    color: #666;
}

.kernel-content .kernel-footer p {
    margin: 0.5rem 0;
}

/* ============================================================================
   META-INFOS (Letzte Aktualisierung, Besucherzähler)
   ============================================================================
   
   Profi: .last-updated fix unten rechts; .visit-counter typografisch zurückhaltend.
   für mich: .visit-counter steht nur auf index.html, .last-updated auf jeder Seite separat.
   ============================================================================ */

.last-updated {
    position: fixed;
    right: 12px;
    bottom: 8px;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    opacity: 0.85;
    background: transparent;
    pointer-events: none;
}

.visit-counter {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .container {
        padding: 1.5rem 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .section {
        padding: 1.3rem;
    }
}