/**
 * =================================================================
 * design-system-pastell.css (v1)
 *
 * Ein professionelles, modernes und pastellfarbenes Design-System.
 * Thema: "Pastell-Politik" - Freundlich, klar und modern.
 *
 * Merkmale:
 * - Helles, aufgeräumtes Layout mit sanften Pastellfarben.
 * - Moderne, gut lesbare Typografie.
 * - Abgerundete Ecken und weiche Schatten für eine freundliche Ästhetik.
 * - Klare visuelle Hierarchie und intuitive Interaktionen.
 *
 * Struktur:
 * 1. Design Tokens (:root) & Schriften
 * 2. Globale Resets & Basis-Stile
 * 3. Layout-Struktur
 * 4. Allgemeine Komponenten (Buttons, etc.)
 * 5. Kategoriale Farbgebung
 * 6. Ansicht: Netzwerk (Knoten, Tiers, Verbinder)
 * 7. Ansicht: Liste (Aufklappbare Elemente)
 * 8. Komponente: Detail-Panel (Seitenleiste)
 * 9. Komponente: Relations-Karussell
 * 10. Komponente: Quiz
 * 11. Komponente: Zeitleiste
 * 12. Komponente: Legende
 * 13. Zustands-Modifikatoren & Animationen
 * 14. Media Queries für Mobile Optimierung
 * =================================================================
 */

/* =================================================================
   1. DESIGN TOKENS (VARIABLEN) & SCHRIFTEN
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

:root {
    /* Farbschema: Pastell-Politik */
    --color-primary: #556b2f; /* Dunkles Salbei/Olivgrün */
    --color-primary-light: #f0f4e8;
    --color-secondary: #6a7a8c; /* Gedecktes Blaugrau */
    --color-accent: #d9534f; /* Sanftes Korallrot */
    
    --color-background: #f9f9f9;
    --color-surface: #ffffff;
    --color-surface-alt: #f4f6f8;
    --color-border: #e1e4e8;
    --color-text: #333333;
    --color-text-muted: #767676;
    --color-text-on-primary: #ffffff;

    /* --- Kategorien in Pastelltönen --- */
    --color-category-strategy: #d4e9e2; /* Mintgrün */
    --color-category-future: #e8dff5;   /* Lavendel */
    --color-category-law: #fde2e4;      /* Zartrosa */
    --color-category-special: #e0f7fa;  /* Helles Cyan */
    --color-category-default: #f1f3f5;  /* Helles Grau */
    --color-category-locked: #fafafa;

    /* Typografie */
    --font-header: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-semibold: 600;

    /* Abstände */
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;

    /* Rahmen & Radien */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 9999px;
    --border-width: 1px;

    /* Schatten */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
    --shadow-md: 0 5px 10px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.08);

    /* Übergänge */
    --transition-fast: all 150ms ease-in-out;
    --transition-normal: all 300ms ease-in-out;
}

/* =================================================================
   2. GLOBALE RESETS & BASIS-STILE
   ================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.7;
	scroll-padding-top: 50px; /* Oder den gewünschten Abstand */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }

p {
    margin-bottom: var(--space-4);
    max-width: 65ch;
}

hr {
    border: 0;
    height: var(--border-width);
    background-color: var(--color-border);
    margin: var(--space-8) 0;
}

h1, h2, h3, h4, p, .node-title, .detail-section-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* =================================================================
   3. LAYOUT-STRUKTUR
   ================================================================= */
#app {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-12);
}

#app-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

#app-header h1 {
    color: var(--color-text);
}

#app-header p {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    margin: var(--space-2) auto 0;
}

#global-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

#global-controls > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

#view-container {
    min-height: 50vh;
}

.hidden {
    display: none !important;
}

/* =================================================================
   4. ALLGEMEINE KOMPONENTEN
   ================================================================= */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
    border: var(--border-width) solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-primary);
}

.button:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.button.is-active {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
}

.jump-button {
    display: none;
}

/* =================================================================
   5. KATEGORIALE FARBGEBUNG
   ================================================================= */
.category-default { background-color: var(--color-category-default); }
.category-strategy { background-color: var(--color-category-strategy); }
.category-future { background-color: var(--color-category-future); }
.category-law { background-color: var(--color-category-law); }
.category-special { background-color: var(--color-category-special); }

/* =================================================================
   6. ANSICHT: NETZWERK
   ================================================================= */
#network-view-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    min-width: 1024px;
}

.tier-section {
    margin-bottom: var(--space-8);
    text-align: center;
}

.tier-title {
    display: inline-block;
    padding: var(--space-3) var(--space-8);
    background-color: var(--color-surface);
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-full);
    margin-bottom: var(--space-12);
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-md);
}

.node-container-flex,
.node-container-grid {
    margin-top: var(--space-6);
}

.node-container-flex {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.node-container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-6);
}

.node-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-4);
    border-radius: var(--border-radius-lg);
    border: var(--border-width) solid var(--color-border);
    width: 12rem;
    height: 6rem;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.node-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.node-card .node-title {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.node-card .node-keywords {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.node-locked-icon {
    display: none;
}

/* --- Spezifisches hierarchisches Layout --- */
.node-container-hierarchical {
    position: relative;
    max-width: 48rem;
    height: 26rem;
    margin: var(--space-6) auto 0;
}

.node-container-hierarchical .node-card {
    position: absolute;
}

.node-container-hierarchical [data-id="fti-strategie"] { top: 0; left: 50%; transform: translateX(-50%); }
.node-container-hierarchical [data-id="fti-pakt"]      { top: 10rem; left: 5%; }
.node-container-hierarchical [data-id="era-nap"]       { top: 10rem; right: 5%; }
.node-container-hierarchical [data-id="hop"]           { bottom: 0; left: 0; }
.node-container-hierarchical [data-id="guep"]          { bottom: 0; right: 0; }
.node-container-hierarchical [data-id="hs2040"]        { bottom: 0; left: 50%; transform: translateX(-50%); }

.node-container-hierarchical [data-id="fti-strategie"]:hover,
.node-container-hierarchical [data-id="hs2040"]:hover {
    transform: translateX(-50%) translateY(-4px);
}

.node-container-hierarchical [data-id="fti-strategie"].is-active,
.node-container-hierarchical [data-id="hs2040"].is-active {
    transform: translateX(-50%) scale(1.05);
}

#connector-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.connector-line {
    stroke: var(--color-border);
    stroke-width: 1px;
    transition: var(--transition-normal);
}

.connector-line.highlighted {
    stroke: var(--color-primary);
    stroke-width: 2px;
}

/* =================================================================
   7. ANSICHT: LISTE
   ================================================================= */
#list-view-content .tier-title {
    margin-bottom: var(--space-6);
}

#list-view-content .tier-section {
    margin-bottom: var(--space-12);
}

#list-view-content .list-node-wrapper {
    margin-top: var(--space-4);
}

.list-node-wrapper {
    border-radius: var(--border-radius-lg);
    transition: var(--transition-normal); /* Für border, shadow, background */
    overflow: hidden; /* WICHTIG: schneidet den Inhalt ab, wenn max-height: 0 */
    border: var(--border-width) solid var(--color-border);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.list-node-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: var(--transition-fast);
}

.list-node-header h3 {
    flex-grow: 1;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.list-node-body {
    /* ALT: max-height: 0; */
    /* NEU: Wir verwenden ein Grid, um die Höhe des Inhalts animierbar zu machen. */
    display: grid;
    grid-template-rows: 0fr; /* Startzustand: Höhe 0 */
    transition: grid-template-rows 0.4s ease-in-out; /* Animation auf das Grid-Template anwenden */
    overflow: hidden; /* Muss auf dem Grid-Container sein */
}

.list-node-wrapper.is-expanded .list-node-body {
    /* ALT: max-height: 1600px; */
    /* NEU: Animiert auf 1fr, was der vollen Höhe des Inhalts entspricht. */
    grid-template-rows: 1fr;
}

.list-node-body-content {
    /* Das Kindelement muss overflow: hidden haben, damit die Grid-Animation korrekt funktioniert. */
    overflow: hidden;
}

.list-node-content { /* Dies ist das innere DIV mit dem eigentlichen Inhalt */
    padding: var(--space-6);
    background-color: var(--color-background);
    border-top: var(--border-width) solid var(--color-border);
    text-align: left;
    
    /* NEU: Klassen für die Überblend-Animation */
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.list-node-content.content-fade-out {
    /* NEU: Klasse für das Ausblenden */
    opacity: 0;
}


.expand-icon {
    transition: transform 0.4s ease-in-out; /* Nur Transform animieren */
    color: var(--color-primary);
}

.list-node-wrapper.is-expanded .expand-icon {
    transform: rotate(180deg);
}

.list-node-wrapper.is-expanded {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.node-status-icon {
    font-weight: bold;
    color: var(--color-primary);
}


/* =================================================================
   8. KOMPONENTE: DETAIL-PANEL
   ================================================================= */
#detail-view {
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-lg);
    position: sticky;
    top: var(--space-8);
    max-height: calc(100vh - (var(--space-8) * 2));
    overflow-y: auto;
}

#detail-view h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
}

.detail-section {
    background-color: var(--color-surface-alt);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-4);
    margin-top: var(--space-4);
    text-align: left;
}

.detail-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.detail-section-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.detail-section-header h4 {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    text-transform: uppercase;
}

.detail-section-content {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    padding-left: calc(1.25rem + var(--space-2));
    color: var(--color-text-muted);
}

.detail-section-content ul {
    list-style-position: outside;
    padding-left: var(--space-4);
}

.detail-section-content li {
    margin-top: var(--space-2);
}

.zeitraum-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
    align-items: center;
}

.zeitraum-label {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* =================================================================
   9. KOMPONENTE: RELATIONS-KARUSSELL
   ================================================================= */
.relations-carousel-container {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: var(--border-width) dashed var(--color-border);
}

.relations-carousel-tier h5 {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    margin-bottom: var(--space-2);
}

.relations-carousel {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-4);
    overflow-x: auto;
    padding: var(--space-2) 0 var(--space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.relations-carousel-item {
    flex: 0 0 12rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    height: auto;
}

.relations-carousel-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.relation-type {
    font-size: var(--font-size-xs);
    font-family: var(--font-body);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.relation-node-title {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* =================================================================
   10. KOMPONENTE: QUIZ
   ================================================================= */
#quiz-status {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-4);
}

.quiz-progress {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-4);
    text-transform: uppercase;
}

.quiz-question-text {
    font-family: var(--font-header);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--space-6);
    text-align: center;
    color: var(--color-text);
}

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.quiz-answer-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    color: var(--color-text);
}

.quiz-answer-btn.feedback-correct {
    background-color: var(--color-category-strategy);
    border-color: #4caf50;
    color: #1b5e20;
}

.quiz-answer-btn.feedback-incorrect {
    background-color: #ffcdd2;
    border-color: var(--color-accent);
    color: #b71c1c;
}

/* =================================================================
   11. KOMPONENTE: ZEITLEISTE
   ================================================================= */
#timeline-section { margin-top: var(--space-12); background-color: var(--color-surface); padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--border-radius-lg); }
#timeline-section header { margin-bottom: var(--space-6); }
#timeline-outer-container { display: flex; align-items: flex-start; gap: var(--space-4); user-select: none; position: relative; overflow: hidden; padding-bottom: var(--space-4); }
#timeline-labels-container { width: 120px; flex-shrink: 0; display: grid; gap: 2px 0; }
#timeline-grid-container { position: relative; display: grid; gap: 2px 0; overflow-x: auto; flex-grow: 1; -ms-overflow-style: none; scrollbar-width: none; }
#timeline-grid-container::-webkit-scrollbar { display: none; }
.timeline-header, .timeline-row-track { display: grid; grid-template-columns: repeat(19, 140px); }
.timeline-header { border-bottom: 2px solid var(--color-border); padding-bottom: var(--space-2); margin-bottom: var(--space-2); }
.timeline-year { text-align: center; font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); cursor: pointer; transition: var(--transition-fast); }
.timeline-year:hover { color: var(--color-primary); }
.timeline-row-label { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); height: 36px; display: flex; align-items: center; cursor: pointer; }
.timeline-row-label.spacer { height: 0.75rem; }
.timeline-row-track { height: 36px; }
.timeline-spacer { height: 0.75rem; }

.timeline-item {
    position: relative;
    z-index: 2;
    height: 24px;
    align-self: center;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    padding: 0 var(--space-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-fast);
    color: var(--color-text);
    border: 1px solid rgba(0,0,0,0.1);
    width: calc(100% - 8px);
    margin: 0 auto;
}

.timeline-item.has-successor {
    width: calc(100% - 60px);
    margin-left: 4px;
    margin-right: auto;
}

/* Farben für Zeitleisten-Items */
.color-series-fti-strategie { background-color: #be123c; color: white; } 
.color-series-fti-pakt { background-color: #dc2626; color: white; } 
.color-series-lv-fv-ext { background-color: #ea580c; color: white; } 
.color-series-hochschulplan { background-color: #4f46e5; color: white; } 
.color-series-guep { background-color: #2563eb; color: white; } 
.color-series-lv-uni { background-color: #0891b2; color: white; } 
.color-series-era-agenda { background-color: #0d9488; color: white; } 
.color-series-era-nap { background-color: #059669; color: white; } 
.color-series-default { background-color: #64748b; color: white; } 
.color-process-fti { background-color: #fecaca; color: #991b1b; } 
.color-process-uni { background-color: #dbeafe; color: #1e40af; } 
.color-process-era { background-color: #a7f3d0; color: #065f46; } 
.color-process-default { background-color: #e2e8f0; color: #334155; }

#now-marker { position: absolute; top: 0; bottom: 0; background-color: rgba(192, 57, 43, 0.1); border-left: 1px solid var(--color-accent); border-right: 1px solid var(--color-accent); z-index: 1; pointer-events: auto; cursor: ew-resize; }
#now-marker::before { content: 'JETZT'; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: var(--color-accent); color: white; padding: 2px 6px; border-radius: var(--border-radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); z-index: 3; }
#timeline-arrow-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 1; }

/* =================================================================
   12. KOMPONENTE: LEGENDE
   ================================================================= */
.legend-section { max-width: 56rem; margin: var(--space-8) auto; padding: var(--space-4); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--border-radius-lg); }
.legend-section h3 { text-align: center; color: var(--color-text); font-family: var(--font-body); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); }
.legend-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); }
.legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.legend-color-box { width: 1rem; height: 1rem; border: var(--border-width) solid var(--color-border); border-radius: var(--border-radius-sm); }
.legend-color-box.is-strategy { background-color: var(--color-category-strategy); } 
.legend-color-box.is-future   { background-color: var(--color-category-future); } 
.legend-color-box.is-law      { background-color: var(--color-category-law); } 
.legend-color-box.is-locked   { background-color: var(--color-category-locked); } 
.legend-color-box.is-default  { background-color: var(--color-category-default); }

/* =================================================================
   13. ZUSTANDS-MODIFIKATOREN & ANIMATIONEN
   ================================================================= */
.is-inactive { pointer-events: none; opacity: 0.6; }
.is-showing-feedback { cursor: not-allowed; }

/* -- Netzwerk-Knoten Zustände -- */
.node-card.is-active { box-shadow: 0 0 0 2px var(--color-primary); transform: scale(1.05); }
.node-card.is-related { box-shadow: 0 0 0 2px var(--color-secondary); }
.node-card.is-faded { opacity: 0.6; }
.node-card.is-faded:hover { opacity: 1; }
.node-card.is-locked { background-color: var(--color-category-locked); cursor: not-allowed; }
.node-card.is-locked .node-content { display: none; }
.node-card.is-locked .node-locked-icon { display: block; font-size: 2rem; color: var(--color-text-muted); }

/* -- Zeitleisten-Zustände -- */
.timeline-item.is-highlighted { opacity: 1 !important; transform: scale(1.05); box-shadow: 0 0 0 2px var(--color-primary); }
.timeline-item.not-highlighted { opacity: 0.6; }
.timeline-item.category-highlighted { opacity: 1 !important; outline: 2px solid var(--color-primary); outline-offset: 2px; }
.timeline-item.category-faded { opacity: 0.5 !important; }
.is-pulsing { animation: timeline-pulse 1.5s infinite ease-in-out; }
@keyframes timeline-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--color-accent); } 50% { box-shadow: 0 0 0 4px var(--color-accent); } }

/* =================================================================
   14. MEDIA QUERIES FÜR MOBILE OPTIMIERUNG
   ================================================================= */
@media (max-width: 1023px) {
    body:has(#network-view-wrapper) {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    #timeline-labels-container {
        display: none;
    }

    .timeline-header, 
    .timeline-row-track {
        grid-template-columns: repeat(19, 90px);
    }

    .timeline-item {
        font-size: 0.6rem;
    }

    .relations-carousel-item {
        flex-basis: 80%;
        flex-shrink: 0;
    }
}