/* =========================================================
   START.CSS
   ---------------------------------------------------------
   Diese Datei gestaltet die komplette Startseite:
   - das große Einstiegsbild
   - die Sprechblasen von Pixeli und Walter
   - den Tür-Hotspot

   WICHTIG:
   Diese Datei muss im selben Ordner liegen wie:
   - start.html
   - start.js
   ========================================================= */


/* =========================================================
   1. GRUNDEINSTELLUNGEN
   ========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Andika", Arial, sans-serif;
  background: #efe7dc;
  color: #2f241a;
}


/* =========================================================
   2. HAUPTSEITE
   ========================================================= */

.startseite {
  min-height: 100vh;
}


/* =========================================================
   3. BÜHNENBEREICH
   ---------------------------------------------------------
   Hier liegt die eigentliche Startszene.
   ========================================================= */

.buehne {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #e6ddd1;
}


/* =========================================================
   4. HINTERGRUNDBILD
   ---------------------------------------------------------
   Das Bild füllt den Bildschirmbereich.
   ========================================================= */

.hintergrundbild {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}


/* =========================================================
   5. TÜR-HOTSPOT
   ---------------------------------------------------------
   Unsichtbarer klickbarer Bereich über der Tür.

   WICHTIG:
   Die Breite bleibt bewusst unverändert.
   Der Bereich wurde vor allem auf der y-Achse vergrößert.
   ========================================================= */

.tuer-hotspot {
  position: absolute;
  left: 35.5%;
  top: 4.5%;
  width: 29%;
  height: 78%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
}


/* =========================================================
   6. TÜR-GLANZFLÄCHE
   ---------------------------------------------------------
   Sanfter Effekt über der gesamten Türfläche.
   Die Werte müssen exakt zum Hotspot passen.
   ========================================================= */

.tuer-glanz {
  position: absolute;
  left: 35.5%;
  top: 4.5%;
  width: 29%;
  height: 78%;
  border-radius: 10px;
  background: rgba(255, 235, 170, 0);
  transition: background 0.25s ease, box-shadow 0.25s ease;
  pointer-events: none;
  z-index: 2;
}

.tuer-hotspot:hover + .tuer-glanz,
.tuer-hotspot:focus + .tuer-glanz {
  background: rgba(255, 233, 170, 0.16);
  box-shadow: inset 0 0 0 9999px rgba(255, 220, 120, 0.08);
}


/* =========================================================
   7. SPRECHBLASEN
   ---------------------------------------------------------
   Gemeinsame Gestaltung beider Blasen.
   ========================================================= */

.sprechblase {
  position: absolute;
  max-width: 300px;
  background: rgba(255, 255, 255, 0.96);
  border: 3px solid #8d6c50;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  z-index: 4;
}

.sprechblase h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.sprechblase p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}


/* =========================================================
   8. PIXELI-BLASE
   ---------------------------------------------------------
   Etwas höher gesetzt als zuvor.
   ========================================================= */

.sprechblase-pixeli {
  left: 4%;
  bottom: 18%;
}


/* =========================================================
   9. WALTER-BLASE
   ---------------------------------------------------------
   Ebenfalls etwas höher gesetzt.
   ========================================================= */

.sprechblase-walter {
  right: 4%;
  bottom: 18%;
}


/* =========================================================
   14. MITTLERE BILDSCHIRME
   ---------------------------------------------------------
   Anpassungen für kleinere Fenster und Tablets.
   ========================================================= */

@media (max-width: 900px) {
  .hintergrundbild {
    height: 100vh;
    object-fit: cover;
  }

  .tuer-hotspot {
    left: 34%;
    top: 5%;
    width: 32%;
    height: 70%;
  }

  .tuer-glanz {
    left: 34%;
    top: 5%;
    width: 32%;
    height: 70%;
  }

  .sprechblase {
    max-width: 230px;
  }

  .sprechblase p {
    font-size: 0.92rem;
  }

  .sprechblase-pixeli {
    bottom: 21%;
  }

  .sprechblase-walter {
    bottom: 21%;
  }
}


/* =========================================================
   15. KLEINERE BILDSCHIRME
   ---------------------------------------------------------
   Auf kleinen Geräten werden die Blasen einfacher angeordnet.
   ========================================================= */

@media (max-width: 700px) {
  .hintergrundbild {
    height: 100vh;
    object-fit: cover;
  }

  .sprechblase {
    max-width: 210px;
    padding: 12px 14px;
  }

  .sprechblase h2 {
    font-size: 1rem;
  }

  .sprechblase p {
    font-size: 0.86rem;
  }

  .sprechblase-pixeli {
    left: 3%;
    bottom: 23%;
  }

  .sprechblase-walter {
    right: 3%;
    bottom: 23%;
  }
}