/* Hier kommt das CSS für die Gestaltung hin */

:root {
    --page-bg-color: #f0f8ff; /* Sanftes Hellblau als Standard-Hintergrund */
    --container-bg-color: #ffffff; /* Weißer Standard-Hintergrund für den Inhaltsbereich */
    --text-color: #2c3e50; /* Standard-Textfarbe (dunkles Blau-Grau) */
    --button-bg-color: #3498db; /* Standard-Knopffarbe (freundliches Blau) */
    --button-text-color: #ffffff; /* Standard-Textfarbe für Knöpfe (Weiß) */
    --button-hover-bg-color: #2980b9; /* Standard-Hoverfarbe für Knöpfe (dunkleres Blau) */
}

body {
    font-family: 'Arial', sans-serif; /* Eine einfache, gut lesbare Schriftart */
    background-color: var(--page-bg-color); /* Ein sanftes Hellblau als Hintergrund */
    color: var(--text-color); /* Dunkelgrau für Text, guter Kontrast */
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Stellt sicher, dass der Inhalt bei wenig Text zentriert ist */
    box-sizing: border-box;
    transition: background-color 0.5s ease, color 0.5s ease; /* Sanfter Übergang für Farbwechsel */
}

/* NEU: @property für animierbaren Gradientenwinkel */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* NEU: Keyframes für die Rahmenanimation */
@keyframes sparkleAnimation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

/* NEU: Pseudo-Element für subtile Hintergrundanimation auf Story-Seiten */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Stellt sicher, dass es hinter allem anderen Inhalt liegt */
    pointer-events: none; /* Erlaubt Klicks "durch" das Element */
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%), /* Deckkraft weiter erhöht */
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 65%);  /* Deckkraft weiter erhöht */
    background-size: 300% 300%; 
    animation: subtlePageBackgroundAnimation 40s ease infinite alternate;
}

/* NEU: Keyframes für die subtile Hintergrundanimation der Story-Seiten */
@keyframes subtlePageBackgroundAnimation {
    0% {
        background-position: 0% 0%, 100% 100%;
        opacity: 0.8; /* Erhöht für mehr Präsenz der stärkeren Gradients */
    }
    50% {
        opacity: 1;  /* Bleibt bei 1 für volle Präsenz */
    }
    100% {
        background-position: 100% 100%, 0% 0%;
        opacity: 0.8; /* Erhöht für mehr Präsenz der stärkeren Gradients */
    }
}

#story-container {
    padding: 25px;
    border-radius: 18px; /* Äußerer Radius des Rahmens (15px Inhalt + 3px Rahmen) */
    max-width: 600px;
    width: 100%;
    text-align: center;
    position: relative; 
    overflow: hidden; 
    transition: opacity 0.4s ease-in-out; /* Added for fade transitions */

    /* Kein direkter Rahmen oder Animation mehr hier */
}

/* Pseudo-Element für den glitzernden Rahmen (unterste Schicht) */
#story-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2; /* Ganz nach hinten */
    border-radius: 18px; /* Selber Radius wie der Container */
    background: repeating-conic-gradient(
        from var(--gradient-angle),
        #ffd700 0%,    /* Start Gold */
        #ffffff 5%,    /* Sanfter Übergang zu Weiß (erreicht bei 5%) */
        #ffd700 10%,   /* Sanfter Übergang zurück zu Gold (erreicht bei 10%) */
        #add8e6 15%,   /* Sanfter Übergang zu Hellblau (erreicht bei 15%) */
        #ffd700 20%,   /* Sanfter Übergang zurück zu Gold (erreicht bei 20%) */
        #c0c0c0 25%,   /* Sanfter Übergang zu Silber (erreicht bei 25%) */
        #ffffff 30%,   /* Sanfter Übergang zu Weiß (erreicht bei 30%) */
        #c0c0c0 35%,   /* Sanfter Übergang zurück zu Silber (erreicht bei 35%) */
        #add8e6 40%,   /* Sanfter Übergang zu Hellblau (erreicht bei 40%) */
        #c0c0c0 45%,   /* Sanfter Übergang zurück zu Silber (erreicht bei 45%) */
        #ffd700 50%    /* Sanfter Übergang zurück zu Gold (erreicht bei 50%), schließt den 50%-Zyklus */
    );
    animation: sparkleAnimation 15s linear infinite;
}

/* Pseudo-Element für den soliden Hintergrund des Inhalts (mittlere Schicht) */
#story-container::after {
    content: '';
    position: absolute;
    top: 3px;    /* Inset um Rahmenbreite */
    left: 3px;   /* Inset um Rahmenbreite */
    right: 3px;  /* Inset um Rahmenbreite */
    bottom: 3px; /* Inset um Rahmenbreite */
    background-color: var(--container-bg-color);
    border-radius: 15px; /* Innerer Radius */
    z-index: -1; /* Über dem ::before, aber hinter dem eigentlichen Inhalt */
}

#story-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Abgerundete Ecken für Bilder */
    margin-bottom: 20px;
    display: none; /* Standardmäßig ausgeblendet, bis wir Bilder haben und einblenden */
}

#story-text {
    font-size: 1.2em; /* Etwas größere Schrift für bessere Lesbarkeit */
    line-height: 1.6; /* Guter Zeilenabstand */
    margin-bottom: 25px;
    color: var(--text-color); /* Verwendet die Textfarb-Variable */
    transition: color 0.5s ease; /* Sanfter Übergang für Farbwechsel */
}

#choices-container button {
    display: block; /* Knöpfe untereinander */
    width: 80%; /* Nicht die volle Breite, sieht besser aus */
    margin: 10px auto; /* Zentriert die Knöpfe und gibt Abstand */
    padding: 15px 20px;
    font-size: 1em;
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
    border: none;
    border-radius: 8px; /* Abgerundete Ecken für Knöpfe */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    transition: background-color 0.3s ease, color 0.3s ease;
}

#choices-container button:hover {
    background-color: var(--button-hover-bg-color);
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    #story-container {
        padding: 20px;
    }

    #story-text {
        font-size: 1.1em;
    }

    #choices-container button {
        width: 90%;
        padding: 12px 15px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    #story-container {
        padding: 15px;
    }

    #story-text {
        font-size: 1em;
    }

    #choices-container button {
        width: 95%;
        font-size: 0.9em;
    }
}

/* NEU: Stile für den Startbildschirm */

/* Wieder einkommentieren und anpassen */
@keyframes subtleGradientFlow {
    0% { background-position: 0% 50%; }    
    25% { background-position: 100% 50%; }  
    50% { background-position: 40% 100%; }  
    75% { background-position: 80% 0%; }   
    100% { background-position: 0% 50%; }  
}

@keyframes moveAccent1 {
    0% { transform: translate(20vw, 30vh) scale(1); opacity: 0.3; }
    25% { transform: translate(50vw, 10vh) scale(1.2); opacity: 0.5; }
    50% { transform: translate(80vw, 40vh) scale(0.8); opacity: 0.2; }
    75% { transform: translate(30vw, 70vh) scale(1.1); opacity: 0.4; }
    100% { transform: translate(20vw, 30vh) scale(1); opacity: 0.3; }
}

@keyframes moveAccent2 {
    0% { transform: translate(70vw, 60vh) scale(1.2); opacity: 0.2; }
    25% { transform: translate(20vw, 80vh) scale(0.9); opacity: 0.4; }
    50% { transform: translate(50vw, 50vh) scale(1.3); opacity: 0.3; }
    75% { transform: translate(80vw, 20vh) scale(1); opacity: 0.5; }
    100% { transform: translate(70vw, 60vh) scale(1.2); opacity: 0.2; }
}

#start-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw; 
    height: 100vh; 
    text-align: center;
    position: fixed; 
    top: 0;          
    left: 0;         
    z-index: 1000;   
    overflow: hidden; 
    background: linear-gradient(270deg, #0f2027, #203a43, #2c5364, #1a2a3a);
    background-size: 400% 400%;
    animation: subtleGradientFlow 15s ease infinite;
}

#start-screen::before,
#start-screen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); 
    pointer-events: none; 
    /* display: none; ENTFERNT */
}

#start-screen::before {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.4) 0%, rgba(76, 175, 80, 0) 70%); 
    animation: moveAccent1 30s linear infinite alternate;
}

#start-screen::after {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.3) 0%, rgba(33, 150, 243, 0) 70%); 
    animation: moveAccent2 35s linear infinite alternate-reverse;
}

#start-screen h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #ecf0f1; 
    position: relative; 
    z-index: 1;
}

#start-screen p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #bdc3c7; 
    position: relative; 
    z-index: 1;
}

#start-screen button {
    padding: 15px 30px;
    font-size: 1.5em;
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative; 
    z-index: 9999; 
    pointer-events: auto; 
}

#start-screen button:hover {
    background-color: var(--button-hover-bg-color);
}
/* Ende NEU */