/* Google Fonts Import (Alternative zu <link> im HTML) */
/* @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&family=Roboto:wght@300;400&family=Noto+Sans+JP&family=Noto+Sans+SC&display=swap'); */

:root {
  /* Farb- und Designvariablen */
  --primary-color: cyan;
  --background-color: #000814; /* Dunkelblau/Schwarz */
  --glow-opacity: 0.15; /* Standard-Intensität des Maus-Glows */
  --text-shadow: 0 0 10px var(--primary-color);
  --star-color: rgba(255, 255, 255, 0.8); /* Farbe der Sterne */
  --shooting-star-color: rgba(255, 255, 255, 0.9); /* Farbe der Sternschnuppen */
  --intro-font-family: 'Roboto', 'Noto Sans JP', 'Noto Sans SC', sans-serif; /* Eigene Schrift für Intro */
  --text-fade-duration: 0.5s; /* Dauer der Fade-Animation für Fakten */
}

/* Basis-Styling für HTML und Body */
html, body {
    margin: 0;
    padding: 0;
    background: var(--background-color);
    color: var(--primary-color);
    font-family: 'Orbitron', monospace; /* Standard-Schrift */
    height: 100%;
    overflow-x: hidden; /* Verhindert horizontalen Scrollbalken */
    overflow-y: auto; /* Erlaubt vertikales Scrollen bei Bedarf */
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Verteilt Intro/Fakt/Outro vertikal */
    align-items: center; /* Zentriert Inhalt horizontal */
}

/* Sprachspezifische Schriftarten (falls benötigt) */
.lang-ja { font-family: 'Noto Sans JP', 'Orbitron', monospace; }
.lang-zh { font-family: 'Noto Sans SC', 'Orbitron', monospace; }

/* Cursor-Steuerung */
body:not(.show-system-cursor).js-enabled { cursor: none; } /* Versteckt System-Cursor, wenn JS aktiv & Checkbox aus */
body.show-system-cursor { cursor: default; } /* Zeigt System-Cursor, wenn Checkbox an */

/* Sternenhimmel-Canvas */
#starfield-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* Hintergrundebene */
    display: block;
}

/* Haupt-Content-Container */
#content-container {
    position: relative;
    z-index: 2; /* Über dem Canvas */
    text-align: center;
    max-width: 90%; /* Responsive Breite */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Zentriert Inhalt intern */
    width: 100%;
    max-width: 800px; /* Maximale Breite für Lesbarkeit */
    margin: auto 0; /* Vertikale Zentrierung durch Flexbox am Body */
}

/* Intro-Container Styling */
#intro-container {
    font-family: var(--intro-font-family);
    font-size: 1.1em;
    line-height: 1.6;
    opacity: 1; /* Standardmäßig sichtbar */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, max-height 1s ease-out, margin-bottom 0.5s ease-out;
    color: rgba(255, 255, 255, 0.9); /* Leicht transparentes Weiß */
    max-width: 600px; /* Maximale Breite für Intro-Text */
    max-height: 65vh; /* Maximale Höhe, um Scrollen zu ermöglichen */
    overflow-y: auto; /* Scrollbar bei Bedarf */
    overflow-x: hidden;
    padding: 0 10px;
    scrollbar-width: none; /* Versteckt Scrollbar (Firefox) */
    -ms-overflow-style: none; /* Versteckt Scrollbar (IE) */
}
#intro-container::-webkit-scrollbar { display: none; } /* Versteckt Scrollbar (Webkit) */
#intro-container p, #intro-container h2 { margin: 15px 0; text-shadow: 0 0 3px rgba(0, 255, 255, 0.3); }
#intro-container h2 { font-family: 'Orbitron', monospace; color: var(--primary-color); font-size: 1.5em; margin-top: 25px; margin-bottom: 25px; text-shadow: var(--text-shadow); }
#intro-container .intro-instruction { font-style: italic; opacity: 0.8; margin-top: 20px; }

/* Start-Button Container */
#start-button-container {
    margin-top: 25px;
    opacity: 1; /* Standardmäßig sichtbar */
    transition: opacity 0.5s ease-out;
}
#start-btn { font-size: 1.1em; }

/* Intro Reminder (ASCII Art) */
#intro-reminder {
    display: none; /* Standardmäßig versteckt */
    margin-bottom: 20px;
    width: 100%;
    max-width: 800px; /* Breite für ASCII */
    opacity: 0; /* Wird über JS/Body-Klasse eingeblendet */
    transition: opacity 0.5s ease-in;
    display: flex; /* Zentriert Placeholder intern */
    justify-content: center;
}
#reminder-image-placeholder {
    border: 1px solid rgba(0, 255, 255, 0.2);
    margin: 0 0 10px 0;
    background-color: transparent;
    display: block;
    opacity: 0.9;
    padding: 10px 5px;
    overflow-x: auto; /* Horizontales Scrollen für sehr schmale Bildschirme */
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: fit-content; /* Passt sich an Breite der pre-Grafik an */
}
#reminder-image-placeholder::-webkit-scrollbar { display: none; }

/* ASCII Timeline Styling */
#ascii-timeline {
    font-family: 'Courier New', Courier, monospace; /* Monospace für ASCII */
    font-size: 9px; /* Kleinere Schrift */
    line-height: 1.2;
    color: var(--primary-color);
    text-align: left; /* Wichtig für ASCII-Ausrichtung */
    white-space: pre; /* Behält Leerzeichen und Umbrüche bei */
    margin: 0;
    padding: 5px 0;
}

/* Fakten-Anzeige Styling */
#fakt {
    font-size: 2em;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: var(--text-shadow);
    opacity: 0;
    transition: opacity var(--text-fade-duration) ease-in-out;
    width: 100%;
    min-height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    overflow-wrap: break-word; /* Erlaubt Umbruch langer Wörter */
    -webkit-hyphens: auto;     /* Für ältere Webkit-Browser (Safari etc.) */
    -epub-hyphens: auto;
    -moz-hyphens: auto;        /* Für ältere Firefox-Browser */
    -ms-hyphens: auto;         /* Für IE/Edge (älter) */
    hyphens: auto;             /* Standard-Silbentrennung */
}
#fakt.visible { opacity: 1; visibility: visible; } /* Sichtbarkeitsklasse */

/* Outro Container Styling */
#outro-container {
    display: none; /* Standardmäßig versteckt */
    font-family: 'Orbitron', monospace;
    font-size: 1.2em;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px; /* Begrenzt Breite für Lesbarkeit */
    width: 90%; /* Responsive Breite */
    margin: 20px 0;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.4);
    opacity: 0; /* Wird über JS/Body-Klasse eingeblendet */
    transition: opacity 0.8s ease-in;
    text-align: center; /* Zentriert die Wort-Blöcke */
    height: auto; /* Passt sich automatisch der Höhe an */
    outline: none; /* Kein Fokus-Rahmen */
    overflow-wrap: break-word; /* Bricht sehr lange Wörter um (Sicherheitsnetz) */
}
#outro-text { /* Der Paragraf innerhalb des Outro-Containers */
    margin: 0; /* Keine Standard-Absatzmargen */
}
/* Styling für die einzelnen Buchstaben-Spans (für Animation) */
#outro-text .letter {
    display: inline-block; /* Erlaubt Transformationen */
    opacity: 0;
    transform: translate(0);
    transition-property: opacity, transform;
    transition-duration: 0.6s, 0.8s;
    transition-timing-function: ease-out;
    font-family: 'Orbitron', monospace;
    white-space: normal; /* Standard-Umbruchverhalten */
}
/* Die Wort-Wrapper Spans werden inline im JS mit display: inline-block gestylt */
/* Die Leerzeichen-Spans werden inline im JS mit display: inline gestylt */


/* Steuerungs-Buttons Container */
#controls {
    display: flex;
    gap: 15px; /* Abstand zwischen Buttons */
    margin-top: 30px;
    flex-wrap: wrap; /* Buttons umbrechen bei Bedarf */
    justify-content: center;
    opacity: 0; /* Wird über JS/Body-Klasse eingeblendet */
    transition: opacity 0.5s ease-in;
    display: none; /* Standardmäßig versteckt */
    pointer-events: none; /* Verhindert Interaktion wenn versteckt */
    width: 100%;
}
/* Pause/Play Button Icon Wechsel */
#pause-btn.paused .icon-play { display: inline; }
#pause-btn.paused .icon-pause { display: none; }
#pause-btn:not(.paused) .icon-play { display: none; }
#pause-btn:not(.paused) .icon-pause { display: inline; }


/* Zustands-Management mit Body-Klassen */

/* Zustand: Intro (Standard) */
body:not(.facts-active):not(.outro-active) #intro-container,
body:not(.facts-active):not(.outro-active) #start-button-container {
    opacity: 1;
    max-height: 75vh; /* Sichtbar */
    transform: translateY(0);
}
body:not(.facts-active):not(.outro-active) #fakt,
body:not(.facts-active):not(.outro-active) #controls,
body:not(.facts-active):not(.outro-active) #intro-reminder,
body:not(.facts-active):not(.outro-active) #outro-container {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* Andere Sektionen versteckt */
}

/* Zustand: Fakten aktiv */
body.facts-active #intro-container,
body.facts-active #start-button-container {
    opacity: 0;
    pointer-events: none;
    max-height: 0; /* Blendet Intro aus */
    transform: translateY(-20px); /* Leichte Verschiebung beim Ausblenden */
    margin: 0;
    overflow: hidden;
}
body.facts-active #intro-reminder { display: flex; opacity: 1; } /* Zeigt ASCII Reminder */
body.facts-active #fakt { display: flex; visibility: visible; } /* Zeigt Fakt (Opacity wird separat gesteuert) */
body.facts-active #controls { display: flex; opacity: 1; pointer-events: auto; } /* Zeigt Controls */
body.facts-active #outro-container { display: none; opacity: 0; } /* Versteckt Outro */

/* Zustand: Outro aktiv */
body.outro-active #intro-container,
body.outro-active #start-button-container,
body.outro-active #intro-reminder,
body.outro-active #fakt,
body.outro-active #controls {
    display: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* Versteckt alles außer Outro */
}
body.outro-active #outro-container { display: block; opacity: 1; } /* Zeigt Outro */


/* Maus-Glow Effekt */
#glow {
    position: fixed;
    width: 28px; height: 28px;
    border: 2px solid rgba(0, 255, 255, var(--glow-opacity));
    border-radius: 50%;
    background: transparent;
    pointer-events: none; /* Klicks gehen durch */
    transform: translate(-50%, -50%); /* Zentriert auf Cursor */
    z-index: 3; /* Über Content, unter Menüs */
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, left 0.05s linear, top 0.05s linear; /* Animationen */
    display: none; /* Standardmäßig aus, wird über JS-Klasse aktiviert */
}
#glow::after { /* Innerer Punkt des Glows */
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    background-color: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px var(--primary-color);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
body.js-enabled:not(.show-system-cursor) #glow { display: block; } /* Zeigt Glow nur wenn JS aktiv und System-Cursor aus */

/* Button Basis-Styling */
.btn {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 8px 16px;
    font-family: 'Orbitron', monospace;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; /* Für Pseudo-Element */
    overflow: hidden; /* Für Hover-Effekt */
    z-index: 1;
}
.btn::before { /* Hover-Effekt Hintergrund */
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 100%;
    background: rgba(0, 255, 255, 0.2);
    transition: width 0.3s ease;
    z-index: -1;
}
.btn:hover::before { width: 100%; }
.btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.5); } /* Fokus-Indikator */

/* Sprachauswahl Styling */
#language-selector { position: fixed; top: 20px; left: 20px; z-index: 10; }
.lang-btn { background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: 'Orbitron', monospace; font-size: 1em; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.3s ease; }
.lang-btn:hover { background: rgba(0, 255, 255, 0.1); }
.lang-dropdown { position: absolute; top: 40px; left: 0; background: rgba(0, 8, 20, 0.95); border: 1px solid var(--primary-color); border-radius: 4px; padding: 5px 0; width: 120px; display: none; flex-direction: column; box-shadow: 0 5px 15px rgba(0, 255, 255, 0.1); }
.lang-option { background: transparent; color: var(--primary-color); border: none; padding: 8px 15px; cursor: pointer; text-align: left; font-family: 'Orbitron', monospace; transition: all 0.2s ease; width: 100%; }
.lang-option:hover { background: rgba(0, 255, 255, 0.1); }

/* Einstellungen Styling */
#settings { position: fixed; top: 20px; right: 20px; z-index: 10; }
#settings-btn { background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2em; transition: all 0.3s ease; }
#settings-btn:hover { background: rgba(0, 255, 255, 0.1); transform: rotate(45deg); }
#settings-panel { position: absolute; top: 50px; right: 0; background: rgba(0, 8, 20, 0.95); border: 1px solid var(--primary-color); padding: 20px; width: 250px; display: none; border-radius: 5px; box-shadow: 0 5px 15px rgba(0, 255, 255, 0.1); }
.setting-item { margin-bottom: 15px; }
.setting-item label { display: block; margin-bottom: 8px; font-size: 0.9em; opacity: 0.8; }
.color-picker, input[type="range"], input[type="checkbox"] { accent-color: var(--primary-color); } /* Passt Akzentfarbe der Controls an */
input[type="range"] { width: 100%; cursor: pointer; }
.color-picker { background: transparent; border: 1px solid var(--primary-color); height: 30px; width: 100%; padding: 0; cursor: pointer; }

/* Verbesserte Fokus-Sichtbarkeit für alle Elemente */
*:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
    box-shadow: 0 0 10px white;
}

/* Skip-Link für Barrierefreiheit */
.skip-link {
    position: absolute;
    top: -40px; /* Versteckt außerhalb des Bildschirms */
    left: 0;
    background: var(--primary-color);
    color: var(--background-color);
    padding: 8px;
    z-index: 100; /* Oberste Ebene */
    transition: top 0.3s;
    border-radius: 0 0 5px 0;
}
.skip-link:focus { top: 0; } /* Wird sichtbar bei Fokus */


 /* Responsive Anpassungen */
 @media (max-height: 650px) { /* Niedrigere Bildschirme */
     #intro-container { max-height: 55vh; font-size: 1em; }
     #fakt { font-size: 1.8em; min-height: 6em; }
     #ascii-timeline { font-size: 8px; }
     #outro-container { font-size: 1.1em; }
}
 @media (max-width: 850px) { /* Schmalere Bildschirme */
     #ascii-timeline { font-size: 8px; }
     #intro-reminder { max-width: 850px; }
 }
 @media (max-width: 480px) { /* Sehr schmale Bildschirme (Handy Hochformat) */
     #intro-reminder { max-width: 480px;}
     #intro-container { font-size: 1em; max-height: 50vh; padding-left: 5px; padding-right: 5px; }
     #ascii-timeline { font-size: 7px; line-height: 1.1; }
     #fakt {
         font-size: 1.3em; 
         min-height: 7em;
         max-width: 400px;}
     #controls { gap: 10px; }
     .btn { padding: 6px 12px; font-size: 0.9em;}
     #outro-container { font-size: 1em; /* Kleinere Schrift für Outro */ line-height: 1.6; }
     #settings-panel { width: 200px; } /* Schmaleres Einstellungs-Panel */
 }