/* 
  CSS = Cascading Style Sheets
  Hier definieren wir wie alles AUSSIEHT
  Kommentare in CSS: zwischen /* und */
*/

/* ========== BASIC RESET ========== */
* {
    /* 
      * = "Universeller Selektor" - gilt für ALLE Elemente
    */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 
      Setzt Abstände zurück damit wir volle Kontrolle haben
      box-sizing: border-box macht Größenberechnung einfacher
      (Padding wird in die Breite einberechnet, nicht extra drauf)
    */
}

/* ========== BODY STYLING ========== */
/* ========== BODY STYLING ========== */
body {
    font-family: "Lucida Console", "Courier New", monospace;
    
    /* Hintergrundbild */
    background-image: url('https://smnathom.neocities.org/hintergrundimagegrafik.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    /* Textfarbe */
    color: #f0f0f0;
    
    /* Zeilenhöhe für bessere Lesbarkeit */
    line-height: 1.6;
    
    /* Wichtig: Damit Inhalt sichtbar ist */
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ========== CONTAINER ========== */
.container {
    /* 
      . vor dem Namen = Klassen-Selektor
      Gilt für alle Elemente mit class="container"
    */
    
    max-width: 1400px;
    /* Maximale Breite - wird nicht breiter auch auf großen Bildschirmen */
    
    margin: 0 auto;
    /* 
      margin: 0 auto; zentriert den Container
      0 = oben/unten, auto = links/rechts (automatisch berechnet)
    */
    
    padding: 20px;
    /* Innenabstand */
}

/* ========== ÜBERSCHRIFTEN ========== */
h1 {
    /* Element-Selektor - gilt für alle <h1> Elemente */
    text-align: center;
    margin-bottom: 30px;
    color: #9370DB;
    font-size: 2.5em;
    
    /* Halbtransparenter Hintergrund */
    background-color: rgba(239, 239, 240, 0.6);
    /* Schwarz mit 70% Deckkraft */
    padding: 5px;
    border-radius: 0px;
    backdrop-filter: blur(10px);
    
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* 
      Textschatten für Tiefe
      2px horizontal, 2px vertikal, 4px Unschärfe, schwarze Farbe mit 50% Transparenz
    */
}

/* ========== BILD CONTAINER ========== */
.image-container {
    position: relative;
    /* 
      SEHR WICHTIG!
      position: relative macht dieses Element zum Bezugspunkt
      für die absolut positionierten Hotspots
    */
    
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Zentriert */
    
    border: 3px solid #9370DB;
    /* Rahmen um das Bild */
    
    border-radius: 0px;
    /* Abgerundete Ecken */
    
    overflow: hidden;
    /* Schneidet Inhalte ab die über den Rand gehen */
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* 
      Schatten für Tiefeneffekt
      0 = horizontal, 10px nach unten, 30px Unschärfe
    */
}

#main-image {
    /* 
      # vor dem Namen = ID-Selektor
      Gilt nur für EIN Element mit dieser ID
    */
    
    width: 100%;
    /* Bild füllt die volle Breite des Containers */
    
    height: auto;
    /* Höhe passt sich automatisch an (behält Seitenverhältnis) */
    
    display: block;
    /* Entfernt ungewollten Abstand unter dem Bild */
}

/* ========== HOTSPOTS (Klickbare Bereiche) ========== */
.hotspot {
    /* Gemeinsames Styling für ALLE Hotspots */
    
    position: absolute;
    /* 
      position: absolute platziert Element relativ zum nächsten
      "position: relative" Parent (hier: .image-container)
    */
    
    background-color: rgba(147, 112, 219, 0.3);
    /* 
      Halbtransparentes Blau
      rgba: r=rot, g=grün, b=blau, a=alpha (Transparenz)
      0.3 = 30% sichtbar
    */
    
    border: 2px solid #9370DB;
    /* Rand */
    
    border-radius: 0px;
    /* Abgerundete Ecken */
    
    padding: 10px 15px;
    /* Innenabstand: 10px oben/unten, 15px links/rechts */
    
    cursor: pointer;
    /* 
      Zeigt Hand-Cursor beim Hovern
      Signalisiert "das ist klickbar"
    */
    
    transition: all 0.3s ease;
    /* 
      ANIMATION!
      Alle Änderungen dauern 0.3 Sekunden mit "ease" Verlauf
      (langsam starten, schnell werden, langsam enden)
    */
    
    font-size: 14px;
    font-weight: bold;
}

.hotspot:hover {
    /* 
      :hover = Pseudo-Klasse
      Gilt wenn man mit der Maus drüber ist
    */
    
    background-color: rgba(147, 112, 219, 0.7);
    /* Wird deutlicher beim Hovern */
    
    transform: scale(1.1);
    /* 
      Vergrößert den Hotspot um 10%
      Gibt visuelles Feedback
    */
    
    box-shadow: 0 0 20px rgba(147, 112, 219, 0.8);
    /* Leuchtender Effekt */
}

/* ========== SPEZIFISCHE POSITIONEN ========== */
/* 
  Hier legst du fest WO genau die Hotspots erscheinen
  Du musst die Werte anpassen basierend auf deinem Bild!
*/

.hotspot-door {
    /* Position für die Tür */
    top: 70%;
    /* 75% von oben */
    left: 40%;
    /* 25% von links */
    
    /* 
      Diese Werte musst du anpassen!
      Probiere verschiedene Prozent-Werte bis der Hotspot
      genau über der Tür in deinem Bild ist
    */
}

.hotspot-sign {
    /* Position für das Schild */
    top: 63%;
    left: 70%;
}

.hotspot-window {
    /* Position für das Fenster */
    top: 15%;
    left: 15%;
}
/* ========== EBENE 2 HOTSPOTS ========== */

.hotspot-hallway {
    /* Position für den Flur */
    top: 50%;
    left: 50%;
}

.hotspot-infotafel {
    /* Position für die Infotafel */
    top: 30%;
    left: 70%;
}

.hotspot-stairs {
    /* Position für die Treppe */
    top: 40%;
    left: 20%;
}

/* ========== ZURÜCK BUTTON ========== */
.back-button {
    /* 
      Button um zur vorherigen Ebene zurückzukehren
    */
    display: inline-block;
    /* 
      inline-block: Verhält sich wie Text, kann aber Breite/Höhe haben
    */
    
    margin-bottom: 20px;
    padding: 12px 20px;
    background-color: rgba(74, 158, 255, 0.2);
    border: 2px solid #4a9eff;
    border-radius: 5px;
    color: #4a9eff;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.back-button:hover {
    background-color: rgba(74, 158, 255, 0.4);
    transform: translateX(-5px);
    /* 
      translateX: Bewegt Element horizontal
      -5px = 5px nach links
      Visuelles Feedback beim Hovern
    */
}

/* ========== NAVIGATION INFO ========== */
.navigation-info {
    text-align: center;
    margin-top: 30px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.navigation-info p {
    color: #4a9eff;
    font-size: 1.1em;
}

/* ========== POP-UP OVERLAY ========== */
.popup-overlay {
    /* Der dunkle Hintergrund */
    
    display: none;
    /* 
      Standardmäßig versteckt
      JavaScript ändert das zu "flex" wenn geöffnet
    */
    
    position: fixed;
    /* 
      position: fixed bleibt an der gleichen Stelle auch beim Scrollen
    */
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 
      Füllt den GESAMTEN Bildschirm
    */
    
    background-color: rgba(0, 0, 0, 0.8);
    /* 80% transparentes Schwarz */
    
    z-index: 1000;
    /* 
      z-index: Stapelreihenfolge
      1000 = sehr weit oben, liegt über allem anderen
    */
    
    justify-content: center;
    align-items: center;
    /* 
      Zusammen mit display: flex zentriert das den Inhalt
      perfekt in der Mitte des Bildschirms
    */
}

/* ========== POP-UP CONTENT ========== */
.popup-content {
    background-color: #2a2a2a;
    /* Dunkler Hintergrund für den Pop-up */
    
    padding: 30px;
    border-radius: 15px;
    max-width: 800px;
    max-height: 90vh;
    /* 
      vh = viewport height
      90vh = 90% der Bildschirmhöhe
      Stellt sicher dass Pop-up nicht zu groß wird
    */
    
    overflow-y: auto;
    /* 
      Scrollbar wenn Inhalt zu lang
      overflow-y = nur vertikal
    */
    
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    
    animation: popupAppear 0.3s ease;
    /* 
      Animation beim Erscheinen
      (wird unten definiert)
    */
}

/* ========== ANIMATION ========== */
@keyframes popupAppear {
    /* 
      @keyframes definiert eine Animation
      "popupAppear" ist der Name
    */
    
    from {
        /* Start */
        opacity: 0;
        /* Unsichtbar */
        transform: scale(0.8);
        /* 80% Größe */
    }
    to {
        /* Ende */
        opacity: 1;
        /* Voll sichtbar */
        transform: scale(1);
        /* Normale Größe */
    }
    /* 
      Effekt: Pop-up erscheint sanft und wird größer
    */
}

/* ========== SCHLIESSEN BUTTON ========== */
.close-popup {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 35px;
    color: #ff4a4a;
    /* Rote Farbe */
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-popup:hover {
    color: #ff0000;
    /* Helleres Rot beim Hovern */
    transform: rotate(90deg);
    /* Dreht sich um 90° - cooler Effekt! */
}

/* ========== POP-UP INHALT ========== */
#popup-body h2 {
    color: #4a9eff;
    margin-bottom: 20px;
}

#popup-body p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.popup-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 20px 0;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ========== VERSTECKTE ELEMENTE ========== */
.popup-data {
    /* 
      Wird durch style="display: none;" im HTML versteckt
      Kein extra CSS nötig, aber hier falls du es brauchst
    */
}

/* ========== RESPONSIVE DESIGN ========== */
/* 
  Media Queries = CSS das nur auf bestimmten Bildschirmgrößen gilt
*/

@media (max-width: 768px) {
    /* 
      Gilt nur wenn Bildschirm schmaler als 768px (Tablets/Handys)
    */
    
    h1 {
        font-size: 1.8em;
        /* Kleinere Überschrift auf Handy */
    }
    
    .hotspot {
        font-size: 12px;
        padding: 8px 12px;
        /* Kleinere Hotspots */
    }
    
    .popup-content {
        margin: 20px;
        padding: 20px;
        /* Weniger Platz auf kleinen Bildschirmen */
    }
}