/* =========================================
   1. VARIABLEN & RESET
   ========================================= */

:root {
  --bg-color: #0c1117;
  --text-primary: #f0f6fc;
  --text-secondary: #c9d1d9;
  --accent-color: #00ff9f; /* #00ffc4 Das Türkis aus deinem Screenshot */
  --local-accent: #00ff9f;
  --header-bg: #161b22;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);

  /* Kategorie-Farben */
  --cat-evolution: #00ffff; 
  --cat-realitaet: #ffa500; 
  --cat-gefahren: #ff4d4d;   
  --cat-horizonte: #bc13fe; 
  --cat-resilienz: #32cd32; 
  --cat-philosophie: #ffd700;
  
      /* Neu: Das tiefrote X-Risiko */
 --danger-x-risk: #800000;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =========================================
   2. HEADER & TITEL
   ========================================= */
.main-header {
    background-color: var(--header-bg);
    /* Vorher: 2.5rem 1rem (Oben/Unten Links/Rechts) */
    padding: 1rem 1rem; 
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2000;
}

.header-title {
  color: var(--local-accent);
  font-size: clamp(1.8rem, 5vw, 3rem); /* Responsive Schriftgröße */
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  /* Dezenter Glow-Effekt wie im Bild */
  text-shadow: 0 0 15px rgba(0, 255, 196, 0.3);
}

.header-subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  opacity: 0.7;
  font-style: italic;
}

/* =========================================
   3. NAVIGATION & DROPDOWN (Mit Icons & Farben)
   ========================================= */
.main-nav {
  /*margin-top: 2rem;*/   /* Mit Seitentitel*/
  margin-top: 0rem;        /* Ohne Seitentitel*/
}

.nav-list {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 5px;
  flex-wrap: wrap;
}

/* Haupt-Links */
.nav-item {
  display: flex; /* Wichtig für Icon + Text */
  align-items: center; /* Vertikal zentrieren */
  gap: 8px; /* Abstand zwischen Icon und Text */
  padding: 12px 18px;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

/* Basis-Hover (falls keine spezifische Farbe definiert ist) */
.nav-item:hover {
  background-color: var(--nav-hover-bg);
  color: var(--accent-color);
}

/* Styling für die Icons */
.nav-item .icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor; /* Icon nimmt die Textfarbe an */
  transition: transform 0.2s ease;
}

/* Kleiner Effekt: Icon bewegt sich beim Hover leicht */
.nav-item:hover .icon {
  transform: translateY(-2px);
}


/* --- KATEGORIE-SPEZIFISCHE HOVER-FARBEN --- */

/* Evolution: Cyan */
.cat-evo .nav-item:hover { color: var(--cat-evolution); }
.cat-evo .dropdown-menu { border-top-color: var(--cat-evolution); }
.cat-evo .dropdown-menu a:hover { color: var(--cat-evolution) !important; } /* NEU */

/* Realität: Orange */
.cat-rea .nav-item:hover { color: var(--cat-realitaet); }
.cat-rea .dropdown-menu { border-top-color: var(--cat-realitaet); }
.cat-rea .dropdown-menu a:hover { color: var(--cat-realitaet) !important; } /* NEU */

/* Gefahren: Rot */
.cat-gef .nav-item:hover { color: var(--cat-gefahren); }
.cat-gef .dropdown-menu { border-top-color: var(--cat-gefahren); }
.cat-gef .dropdown-menu a:hover { color: var(--cat-gefahren) !important; } /* NEU */

/* Horizonte: Violett */
.cat-hor .nav-item:hover { color: var(--cat-horizonte); }
.cat-hor .dropdown-menu { border-top-color: var(--cat-horizonte); }
.cat-hor .dropdown-menu a:hover { color: var(--cat-horizonte) !important; } /* NEU */

/* Resilienz: Grün */
.cat-res .nav-item:hover { color: var(--cat-resilienz); }
.cat-res .dropdown-menu { border-top-color: var(--cat-resilienz); }
.cat-res .dropdown-menu a:hover { color: var(--cat-resilienz) !important; } /* NEU */

/* Philosophie: Gold */
.cat-phi .nav-item:hover { color: var(--cat-philosophie); }
.cat-phi .dropdown-menu { border-top-color: var(--cat-philosophie); }
.cat-phi .dropdown-menu a:hover { color: var(--cat-philosophie) !important; } /* NEU */


/* --- DROPDOWN CONTAINER & LOGIK (unverändert, nur Z-Index Check) --- */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; 
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--header-bg);
  min-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 2px solid var(--accent-color); /* Wird oben per Kategorie überschrieben */
  border-radius: 0 0 8px 8px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.7);
  z-index: 9999; /* Sehr hoch, damit es über allem schwebt */
  padding: 10px 0;
  list-style: none;
  margin: 0;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li a {
  padding: 10px 20px;
  display: block;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: left;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.dropdown-menu li a:hover {
  background-color: var(--nav-hover-bg);
  color: var(--accent-color); /* Dropdown-Links leuchten einheitlich Türkis */
  padding-left: 25px;
}




/* =========================================
   4. HAUPTINHALT (INDEX)
   ========================================= */
.main-content {
    flex: 1; /* Das ist der entscheidende Teil: Er nimmt allen freien Platz ein */
    flex-shrink: 0;
    order: 2;
    max-width: 1200px; /* Deine gewünschte Inhaltsbreite bleibt bestehen */
    margin: 0 auto; /* Zentriert den Inhalt innerhalb des verfügbaren Flex-Raums */
    padding: 0 0.2rem;
}

.content-section {
      opacity: 1;
    transform: none;
    transition: all 0.6s ease-out;
  margin-bottom: 4rem;
}

.content-section h2 {
  font-size: 2rem;
  color: var(--local-accent);
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--local-accent);
  padding-left: 1rem;
}

.content-section p {
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

/* Grafik-Platzhalter */
.chart-placeholder {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 3rem 1rem;
  text-align: center;
  background: linear-gradient(145deg, #161b22, #0c1117);
  margin-top: 2rem;
}

/* Grundzustand Mobile */
.scaling-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
    align-items: center;
    --txt-w: 1fr;    /* Standard-Breite für Text */
    --img-w: 1.5fr;  /* Standard-Breite für Bild */
}

/* PC-Zustand */
@media (min-width: 900px) {
    /* NORMAL: Text links, Bild rechts */
    .scaling-grid {
        display: grid;
        /* Wir setzen einfach die Variablen ein - keine Rechnungen mehr! */
        grid-template-columns: var(--txt-w) var(--img-w); 
        gap: 4rem;
        align-items: center;
    }
    .scaling-grid .text-content { order: 1; }
    .scaling-grid .image-content { order: 2; }

    /* REVERSE: Bild links, Text rechts */
    .scaling-grid.reverse {
        /* Hier tauschen wir einfach die Variablen um */
        grid-template-columns: var(--img-w) var(--txt-w);
    }
    .scaling-grid.reverse .image-content { order: 1; }
    .scaling-grid.reverse .text-content { order: 2; }
}


/* Container, der den Content-Bereich flankiert */
.page-wrapper {
    display: flex;
    justify-content: center; /* Zentriert die Gruppe primär */
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 0 20px;
}

/* Ergänzungen für das Framework */
.sticky-sidebar {
    position: -webkit-sticky; /* Support für Safari */
    position: sticky;
    top: 120px; /* Der Abstand zum oberen Rand, wenn sie festklebt */
    height: fit-content;
    z-index: 900;
    align-self: flex-start;  /*Hiermit nimmt es maximalen Platz ein */
    /*flex-basis: 220px; /* Hiermit wird es zentriert */
    margin-top: 50px; /* Startposition: Wie weit sie am Anfang "unten" hängen */
}


.sidebar-left {
    order: 1;
    margin-right: 20px;
    justify-content: flex-start; /* Badge klebt links in seinem 220px Raum */
}
.sidebar-right {
    margin-left: 20px;
    order: 3;
    justify-content: flex-end; /* News kleben rechts in ihrem 220px Raum */
}


.petition-badge {
    background-color: var(--cat-gefahren);
    color: white;
    padding: 20px 10px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.3);
}


.news-sidebar {
    background-color: var(--header-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 180px; /* Schmaler gemacht */
    padding: 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    height: auto;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.news-sidebar::-webkit-scrollbar {
    width: 4px;
}
.news-sidebar::-webkit-scrollbar-thumb {
    background: var(--local-accent);
    border-radius: 5px;
}

/* Standardmäßig ist die Mobile-Box unsichtbar */
.mobile-petition-box {
    display: none;
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid var(--cat-gefahren);
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    text-align: center;
}

/* Media Query: Wenn die Sidebars verschwinden, taucht die Box auf */
@media (max-width: 1200px) {
    .mobile-petition-box {
        display: block; /* Nur auf Mobile/Tablets sichtbar */
    }
    
    .sticky-sidebar {
        display: none !important; /* Sidebars sicher ausblenden */
    }
}

/* --- SPICKZETTEL (SIDEBAR RECHTS) --- */



/* Der leere Platzhalter links, damit die Mitte zentriert bleibt */
.sidebar-placeholder-left {
    flex-basis: 100px;
    flex-shrink: 0;
    order: 1;
}

/* 1. Der schicke Grundzustand (verborgen) */

/* Nur wenn die Sidebar AUCH die Klasse .sticky-learning hat, wird sie umgedreht */
/* Die Sidebar selbst ist wieder ganz normal */
.news-sidebar.sticky-learning {
    display: block; 
}

.sticky-learning .spick-list {
    display: flex;
    /*flex-direction: column-reverse;*/
    flex-direction: column;
    justify-content: flex-end;
    gap: 0; /* Abstände regeln wir über margin-bottom der Items */
}

/* Optional: Styling für den Titel, damit er sich abhebt */
.sidebar-title {
    font-size: 1.1rem;
    color: var(--local-accent);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.spick-item {
    display: none; /* Komplett weg, solange nicht aktiv */
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--local-accent);
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 8px; /* Schöne abgerundete Ecken */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sanfter "Pop"-Effekt */
    
    /* Vorbereitung für die Animation */
    opacity: 0;
    transform: translateX(20px);
    width: 100%;
}

/* 2. Der aktive Zustand (Schick & Sichtbar) */
.spick-item.active {
    display: block !important; /* Erscheint im Layout */
    opacity: 1 !important;
    transform: translateX(0) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* Tiefe wie im Screenshot */
    background: rgba(255, 255, 255, 0.05); /* Leicht helleres Highlight */
    border-left: 3px solid var(--local-accent);
    animation: slideInSpick 0.5s ease-out, superHighlight 2s ease-out;

}


@keyframes superHighlight {
    0% {
        background: rgba(var(--local-accent-rgb), 0.8); /* Volle Akzentfarbe als Hintergrund */
        box-shadow: 0 0 30px rgba(var(--local-accent-rgb), 0.8); /* Starker Glow-Effekt */
        transform: scale(1.05); /* Leichtes Aufblähen */
        color: #000; /* Text kurz schwarz machen für maximale Lesbarkeit auf hellem Grund */
    }
    10% {
        /* Hält den Status kurz an */
        transform: scale(1.05);
        background: var(--local-accent);
    }
    100% {
        /* Sanftes Ausfaden zum Standard-Look */
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        transform: scale(1);
        color: inherit;
    }
}

/* Hilfs-Animation für den "Wow"-Effekt beim Erscheinen */
@keyframes slideInSpick {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Styling für die Inhalte innerhalb der Karte */
.spick-item h4 {
    margin: 0 0 8px 0;
    color: var(--local-accent);
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
}

.spick-item p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.spick-item .back-link {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.spick-item:hover .back-link {
    opacity: 1;
}

/* Mobil-Optimierung: Spickzettel ausblenden */
@media (max-width: 1200px) {
    .sidebar-placeholder-left, .sidebar-right {
        display: none !important;
    }
    .page-wrapper {
        padding: 0 10px;
    }
}

/* =========================================
   5. FOOTER
   ========================================= */
.main-footer {
  text-align: center;
  padding: 4rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 5rem;
  background-color: var(--header-bg);
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-brand {
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.footer-brand strong {
  color: var(--local-accent);
}

.footer-nav {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  
}

/* =========================================
   ERGÄNZUNGEN FÜR INTERAKTIVE UNTERSEITEN
   ========================================= */

/* Sanftes Einblenden der Sektionen beim Scrollen */

/* 2. Nur wenn JS wirklich funktioniert, setzen wir es für den Effekt kurz auf unsichtbar */
/* Das verhindert, dass bei deaktiviertem JS alles schwarz bleibt */
.js-enabled .content-section {
    opacity: 0;
    transform: translateY(20px);
}

/* 3. Wenn die Sektion ins Bild kommt */
.content-section.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Styling für die interaktiven Regler (Input Range) */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--local-accent);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 10px var(--local-accent);
}

/* Mobile Optimierung für das Content-Grid */
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr !important;
    }
    
    .timeline-item {
        flex-direction: column !important;
        text-align: left !important;
    }
    
    .timeline-item > div {
        width: 100% !important;
        padding: 1rem 0 !important;
    }

    
    .main-header {
    padding: 1.5rem 1rem;
    }
}

/* Hover-Effekt für den Button in der Hero-Sektion */
.nav-item:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

/* News Feed Styling */
.news-item {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.news-date {
    font-size: 0.7rem;
    color: var(--accent-color);
    display: block;
}
.news-headline {
    font-weight: 500;
    line-height: 1.3;
    display: block;
    margin-top: 3px;
}

/* Hero Section Styling */
.hero-container {
    text-align: center;
    padding-top: 4rem;
    /*padding: 1rem 0;*/
    /*border-bottom: 1px solid rgba(0, 255, 196, 0.1);*/
}
.hero-glitch {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #fff 20%, var(--local-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}



.hero-lead {
    font-size: 1.3rem !important;
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-secondary);
    text-align: center;
}

/* Zitat-Boxen */
.quote-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 2rem 0;
}

/* Dynamische Zitat-Balken */
.quote-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 12px;
    /* Nutzt den Akzent der jeweiligen Seite oder des Containers */
    border-left: 4px solid var(--local-accent, var(--cat-gefahren)); 
    margin: 1.5rem 0;
    position: relative;
}

/* Spezial-Klasse für existentielles Zitat */
.quote-card.x-risk {
    border-left-color: var(--danger-x-risk);
    background: rgba(128, 0, 0, 0.05);
}

.quote-card.pessimist { border-left-color: var(--cat-gefahren); }
.quote-text { font-style: italic; font-size: 1rem; margin-bottom: 10px; display: block; }
.quote-author { font-weight: bold; font-size: 0.8rem; color: var(--author-color, var(--local-accent, #888)); }

/* Akkordeon Styling */
.accordion {
    background: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-top: 1rem;
    overflow: hidden;
}
.accordion-header {
    padding: 1rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.accordion-content {
    padding: 1rem;
    display: none; /* Steuerung via JS in main.js oder inline */
    color: var(--text-secondary);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .quote-container { grid-template-columns: 1fr; }
}

/* Polykrise Grid */
.poly-grid {
    display: grid;
    /* Erzwingt exakt 2 Spalten, die sich den Platz teilen */
    grid-template-columns: 1fr 1fr; 
    gap: 25px;
    margin: 2.5rem 0;
}

/* Auf Mobile schalten wir es wieder untereinander, damit es lesbar bleibt */
@media (max-width: 600px) {
    .poly-grid {
        grid-template-columns: 1fr;
    }
}

.poly-card {
    background: linear-gradient(145deg, #161b22, #0c1117);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 1.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.poly-card:hover {
    transform: translateY(-5px);
    border-color: var(--local-accent);
}

.poly-card h3 {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.poly-card p {
    font-size: 0.9rem;
    line-height: 1.5;
}

.tag {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
}

.pause-banner {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid var(--cat-gefahren);
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 3rem;
    text-align: center;
}

/* Navigator Grid */
.nav-grid {
    display: grid;
    /* Erzwingt exakt 3 Spalten */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    margin-top: 2.5rem;
}

/* Mittlere Bildschirme (z.B. Tablets): 2 Spalten (3 Reihen) */
@media (max-width: 900px) {
    .nav-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Kleine Bildschirme: Alles untereinander */
@media (max-width: 600px) {
    .nav-grid {
        grid-template-columns: 1fr;
    }
}

.nav-card {
    position: relative;
    padding: 2rem 1.5rem;
    background: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.nav-card:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--card-color);
    box-shadow: 0 0 20px rgba(var(--card-color-rgb), 0.2);
    transform: translateY(-5px);
}

.nav-card h3 {
    font-size: 1.5rem;
    color: var(--card-color);
    margin-bottom: 0.5rem;
}

.nav-card .time-tag {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    display: inline-block;
    color: var(--card-color);
    opacity: 0.8;
}

.nav-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.nav-btn {
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--card-color);
    color: var(--card-color);
    font-size: 0.85rem;
    font-weight: bold;
    transition: all 0.2s;
}

.nav-card:hover .nav-btn {
    background: var(--card-color);
    color: #000;
}

/* Container für atmosphärische Hintergrund-Sektionen */
.atmos-section {
    position: relative;
    width: 100%;
    padding: 6rem 0; /* Mehr Platz für den Effekt */
    margin: 4rem 0;
    border-radius: 20px;
    overflow: hidden; /* Wichtig für Blur-Effekt am Rand */
}

/* Das eigentliche Hintergrundbild (Technik: Pseudo-Element) */
.atmos-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Hier wird später das Bild via Inline-HTML eingefügt */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* DIE ATMOSPHÄRE: Dunkel, Transparent, Unscharf */
    opacity: 0.15; /* Sehr transparent */
    filter: blur(5px) brightness(0.5); /* Leicht unscharf und dunkler */
    
    z-index: 1; /* Hinter dem Text */
}

/* Der Content-Container innerhalb der Atmos-Sektion */
.atmos-content {
    position: relative;
    z-index: 10; /* Über dem Bild */
    max-width: 800px; /* Text schmaler für bessere Lesbarkeit */
    margin: 0 auto;
    padding: 0 20px;
}