/* thema2.css */

/* Ganzseitiges Snap-Scrolling für den Main-Container */
main {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none; /* Versteckt Scrollbar in Firefox */
  }
  
  /* Der fixierte Hintergrundtitel */
  .background-title {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfekt zentriert */
    font-size: 6vw; /* Schriftgröße passt sich der Bildschirmbreite an */
    font-weight: 900;
    color: #d60270;
    opacity: 0.2; /* Sehr blass/durchsichtig */
    z-index: 0;   /* Liegt ganz unten */
    pointer-events: none; /* Man kann "durch" den Titel klicken */
    white-space: nowrap;
    text-transform: uppercase;
  }
  
  main::-webkit-scrollbar {
    display: none; /* Versteckt Scrollbar in Chrome/Safari */
  }
  
  /* Grund-Style für jede Stage */
  .topic-stage {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
  }
  
  /* Inhalts-Container */
  .content-box {
    max-width: 600px;
    animation: fadeIn 1s ease-out;
  }
  
  .topic-label {
    display: block;
    color: #d60270;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9em;
    margin-bottom: 10px;
  }
  
  h2 {
    font-size: 2em;
    margin: 0 0 20px 0;
    color: #333;
  }
  
  .placeholder-text {
    font-style: italic;
    color: #888;
  }
  
  /* Dezente Hintergrund-Variationen für die Stages */
  #sub-stage1 { background-color: #d6026f14; }
  #sub-stage2 { background-color: #ffffff; }
  #sub-stage3 { background-color: #d6026f14; }
  #sub-stage4 { background-color: #ffffff; }
  #sub-stage5 { background-color: #d6026f14; }