/* =========================================================
   Globale Variablen (CSS Custom Properties)
   Definiert zentrale Farbwerte, die im gesamten Projekt
   wiederverwendet werden können.
   ========================================================= */
:root {
    --primary: red; /* Primärfarbe der Website – wird für Akzente, Buttons und Hervorhebungen genutzt */
}


/* =========================================================
   Hauptbereich der Seite (Wrapper für gesamten Content)
   Sorgt für vertikale Mindesthöhe und zentrierte Ausrichtung.
   ========================================================= */
.main-content {
    min-height: 100vh; /* Mindestens volle Bildschirmhöhe */
    padding: 140px 40px 100px; /* Abstand oben (z.B. wegen Navbar), seitlich und unten */
    display: flex; /* Aktiviert Flexbox */
    align-items: flex-start; /* Inhalt beginnt oben */
    justify-content: center; /* Zentriert horizontal */
}


/* =========================================================
   Inhaltscontainer – begrenzt maximale Breite
   ========================================================= */
.content-container {
    max-width: 1200px; /* Maximale Inhaltsbreite */
    width: 100%; /* Nimmt volle verfügbare Breite ein */
}


/* =========================================================
   Hauptüberschrift der Seite
   ========================================================= */
.content-title {
    font-size: 4rem; /* Sehr große Schrift für starke visuelle Wirkung */
    top: 40px; /* Abstand nach oben (nur wirksam bei positioniertem Element) */
    text-align: center; /* Zentriert die Überschrift */
    margin-bottom: 80px; /* Abstand zum nachfolgenden Inhalt */
    color: white; /* Standardfarbe im Dark Mode */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* Weicher Schatten für bessere Lesbarkeit */
}


/* Anpassung der Überschrift im Light Mode */
body.light-mode .content-title {
    color: black; /* Überschrift wird im hellen Modus schwarz */
}


/* =========================================================
   Content-Box – visuelles Kartenlayout für Textblöcke
   ========================================================= */
.content-box {
    background-color: rgba(30, 30, 30, 0.95); /* Dunkler Hintergrund mit leichter Transparenz */
    padding: 60px; /* Innenabstand */
    border-radius: 20px; /* Abgerundete Ecken */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Tiefenschatten */
    color: white; /* Textfarbe */
    margin-bottom: 40px; /* Abstand zur nächsten Box */
}


/* Light Mode Variante der Content-Box */
body.light-mode .content-box {
    background-color: rgba(240, 240, 240, 0.95); /* Heller Hintergrund */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Reduzierter Schatten */
    color: black; /* Dunkler Text */
}


/* =========================================================
   Fließtext innerhalb von Content-Boxen
   ========================================================= */
.content-text {
    font-size: 1.3rem; /* Angenehme Leseschrift */
    line-height: 2; /* Großer Zeilenabstand für Lesbarkeit */
    margin-bottom: 20px; /* Abstand zum nächsten Absatz */
}


/* =========================================================
   Beispiel-Fenster Container (UI-Demonstration)
   ========================================================= */
.example-window-container {
    display: flex; /* Flexbox für interne Struktur */
    flex-direction: column; /* Elemente vertikal anordnen */
    margin-top: 40px; /* Abstand nach oben */
    width: 100%; /* Volle Breite */
    border-radius: 10px; /* Abgerundete Ecken */
    overflow: hidden; /* Inhalt außerhalb der Box wird abgeschnitten */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Tiefenschatten */
    background-color: #333; /* Dunkler Hintergrund */
    color: white; /* Textfarbe */
}


/* Light Mode Variante */
body.light-mode .example-window-container {
    background-color: #f0f0f0; /* Heller Hintergrund */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Reduzierter Schatten */
    color: black; /* Dunkler Text */
}


/* =========================================================
   Button-Container innerhalb des Beispiel-Fensters
   ========================================================= */
.example-buttons-container {
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Vertikale Anordnung */
    gap: 10px; /* Abstand zwischen Reihen */
    padding: 20px; /* Innenabstand */
    background-color: rgba(30, 30, 30, 0.95); /* Dunkler Hintergrund */
    border-radius: 10px 10px 0 0; /* Nur obere Ecken abrunden */
}


/* Light Mode Hintergrund */
body.light-mode .example-buttons-container {
    background-color: rgba(240, 240, 240, 0.95);
}


/* Zeile mit mehreren Buttons */
.example-button-row {
    display: flex; /* Buttons nebeneinander */
    gap: 10px; /* Abstand zwischen Buttons */
}


/* Einzelner Beispiel-Button */
.example-button {
    flex: 1; /* Jeder Button nimmt gleich viel Platz ein */
    padding: 15px; /* Innenabstand */
    background-color: black; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: 2px solid red; /* Roter Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Mauszeiger als Klicksymbol */
    transition: background-color 0.3s; /* Sanfter Hover-Übergang */
    font-size: 0.9rem; /* Schriftgröße */
    text-align: center; /* Text zentrieren */
}


/* Light Mode Standard */
body.light-mode .example-button {
    background-color: black;
    color: white;
}


/* Aktiver Button im Light Mode */
body.light-mode .example-button.active {
    background-color: red;
    color: white;
}


/* Hover- oder aktiver Zustand */
.example-button:hover,
.example-button.active {
    background-color: red; /* Hintergrund wird rot */
    color: white; /* Text bleibt weiß */
}


/* =========================================================
   Inhaltsfenster unterhalb der Buttons
   ========================================================= */
.example-content-window {
    width: 100%; /* Volle Breite */
    background-color: #333; /* Dunkler Hintergrund */
    padding: 25px; /* Innenabstand */
    border-radius: 0 0 10px 10px; /* Nur untere Ecken abrunden */
    color: white; /* Textfarbe */
}


/* Light Mode */
body.light-mode .example-content-window {
    background-color: #f0f0f0;
    color: black;
}


/* =========================================================
   Content-Items (z.B. Unterabschnitte)
   ========================================================= */
.content-item {
    margin-bottom: 20px; /* Abstand zwischen einzelnen Items */
}


.content-item h3 {
    font-size: 1.6rem; /* Überschriftengröße */
    margin-top: 0; /* Kein oberer Abstand */
    margin-bottom: 15px; /* Abstand nach unten */
    color: white; /* Standardfarbe */
}


.content-item p {
    font-size: 1rem; /* Absatzgröße */
    line-height: 1.6; /* Lesefreundlicher Abstand */
    color: white;
}


/* Light Mode erzwingt schwarze Schrift */
body.light-mode .content-item,
body.light-mode .content-item h3,
body.light-mode .content-item p {
    color: black !important;
}


/* =========================================================
   Detail-Ansicht Container (Glassmorphism Design)
   ========================================================= */
.detail-view-container {
    display: none; /* Standardmäßig ausgeblendet */
    margin-top: 2.5rem; /* Abstand nach oben */
    padding: 2rem 1.5rem; /* Innenabstand */
    background: rgba(30, 30, 35, 0.65); /* Transparenter Hintergrund */
    border-radius: 16px; /* Abgerundete Ecken */
    border: 1px solid rgba(120,120,140,0.3); /* Leichter Rahmen */
    backdrop-filter: blur(8px); /* Hintergrundunschärfe */
    -webkit-backdrop-filter: blur(8px); /* Safari-Unterstützung */
    box-shadow: 0 12px 40px rgba(0,0,0,0.45); /* Starker Tiefenschatten */
}


/* Light Mode Variante */
body.light-mode .detail-view-container {
    background: rgba(245,245,250,0.82);
    border-color: rgba(160,160,190,0.45);
    box-shadow: 0 10px 36px rgba(0,0,0,0.18);
}


/* Flex-Layout für Detailinhalt */
.detail-content {
    display: flex;
    flex-wrap: wrap; /* Umbruch bei kleineren Screens */
    gap: 2.5rem; /* Abstand zwischen Text und Bild */
    align-items: stretch;
}


.detail-left,
.detail-right {
    min-width: 320px; /* Mindestbreite */
}


.detail-left {
    flex: 2; /* Textbereich */
}


.detail-right {
    flex: 3; /* Bildbereich */
}


/* Reihenfolge umkehren */
.detail-content.reverse-order {
    flex-direction: row-reverse;
}


/* Bild innerhalb der Detailansicht */
.detail-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    display: block;
}


/* Detailtext */
.detail-text {
    font-size: 1.08rem;
    line-height: 1.75;
    color: #e8e8f0;
}


/* Light Mode Textfarbe */
body.light-mode .detail-text {
    color: #1f2937;
}


/* Titel der Detailansicht */
.detail-title {
    color: #60a5fa;
    margin-bottom: 1.6rem;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
}


/* Light Mode Titel */
body.light-mode .detail-title {
    color: #1d4ed8;
}


/* =========================================================
   Footer
   ========================================================= */
footer {
    background-color: black;
    color: white;
    padding: 40px 0;
    text-align: center;
}


body.light-mode footer {
    background-color: white;
    color: black;
}


.footer-bottom a {
    color: red;
    text-decoration: none;
}


/* =========================================================
   Responsive Design Anpassungen
   ========================================================= */

/* Große Tablets / kleinere Desktops */
@media (max-width: 1200px) {
    .content-title { font-size: 3rem; }
    .content-text { font-size: 1.1rem; }
}


/* Tablets */
@media (max-width: 992px) {
    .main-content { padding: 100px 20px 60px; }
    .content-title { font-size: 2.5rem; margin-bottom: 40px; }
    .content-box { padding: 30px; }
    .content-text { font-size: 1rem; }
    .content-item h3 { font-size: 1.4rem; }
    .content-item p { font-size: 0.9rem; }
}


/* Kleine Tablets / große Smartphones */
@media (max-width: 768px) {
    .main-content { padding: 80px 15px 50px; }
    .content-title { font-size: 2rem; margin-bottom: 30px; }
    .content-box { padding: 20px; }
    .content-text { font-size: 0.9rem; line-height: 1.6; }
    .example-button-row { flex-direction: column; }
    .example-button { width: 100%; padding: 12px; font-size: 0.85rem; }
    .content-item h3 { font-size: 1.2rem; }
    .content-item p { font-size: 0.85rem; line-height: 1.5; }
    .example-content-window { padding: 15px; }
}


/* Sehr kleine Smartphones */
@media (max-width: 576px) {
    .main-content { padding: 60px 10px 40px; }
    .content-title { font-size: 1.7rem; margin-bottom: 25px; }
    .content-box { padding: 15px; }
    .content-text { font-size: 0.85rem; line-height: 1.5; }
    .example-button { padding: 10px; font-size: 0.8rem; }
    .content-item h3 { font-size: 1.1rem; }
    .content-item p { font-size: 0.8rem; line-height: 1.4; }
}