/* ============================================================
   ERZEUGT - NICHT VON HAND ÄNDERN.

   Abgeleitet aus server/web/src/zimmer.js durch
   werkzeuge/zimmer-css-bauen.mjs. Wer hier etwas ändert, ändert
   es nur hier - und beim nächsten Ausliefern ist es wieder fort.
   Änderungen gehören in zimmer.js, dann sieht die App sie auch.
   ============================================================ */

.zimmer {
  position: fixed; inset: 0; z-index: 900; overflow: hidden;
  color: #4A3320; font-family: 'Nunito', ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  user-select: none; background: #D5A97A;
  /* In der installierten App gibt es unten den Streifen der
     Home-Leiste und oben die Statuszeile. Beides liegt ueber der
     Seite. Ohne diese Masse landen die Kloetze - sie sitzen in
     den untersten Prozent des Bildes - unter der Home-Leiste und
     sind abgeschnitten. */
  --unten: env(safe-area-inset-bottom, 0px);
  --oben: env(safe-area-inset-top, 0px);
}

/* ---------- Das Bild ----------
   Der Rahmen behaelt das Seitenverhaeltnis des Bildes und wird
   so gross gerechnet, dass er den Bildschirm in beiden Richtungen
   fuellt. Unten mittig verankert - dort liegen die Kloetze, die
   duerfen nie weggeschnitten werden. */
.zimmer-bild {
  position: absolute; bottom: var(--unten); left: 50%; transform: translateX(-50%);
  --seiten: 0.5625;

    --k-links: 29.6%;
    --k-breite: 40.8%;
    --k-oben: 77.5%;
    --k-hoehe: 9.6%;
  width: max(100vw, calc((100dvh - var(--unten)) * var(--seiten)));
  aspect-ratio: var(--seiten);
  background-image: url("bilder/zimmer-hoch-1080.webp");
  background-size: 100% 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Weicher Uebergang, wenn zwischen Tag und Nacht gewechselt
     wird - etwa wenn die App ueber die Daemmerung offen bleibt. */
  transition: opacity .6s ease;
}
/* Beim Aufrufen wird genau ein Bild geholt - das zur Tageszeit
   passende. Der Untergrund traegt es.

   Die zweite Ebene entsteht erst, wenn die Tageszeit waehrend
   der Sitzung umschlaegt. Sie traegt dann jeweils das andere
   Bild und wird darueber eingeblendet, damit es keinen harten
   Schnitt gibt. Deshalb heisst sie Wechselbild und nicht
   Nachtbild: bei wem die App ueber die Nacht offen bleibt,
   zeigt sie morgens den Tag. */
.zimmer-nachtbild {
  position: absolute; inset: 0;
  background-image: url("bilder/zimmer-nacht-hoch-1080.webp");
  background-size: 100% 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0; transition: opacity .6s ease;
}
.zimmer-nacht .zimmer-nachtbild { opacity: 1; }

/* War es beim Aufrufen schon Nacht: Untergrund = Nacht, und die
   Wechselebene traegt umgekehrt den Tag. */
.zimmer-startnacht .zimmer-bild { background-image: url("bilder/zimmer-nacht-hoch-1080.webp"); }
.zimmer-startnacht .zimmer-nachtbild { background-image: url("bilder/zimmer-hoch-1080.webp"); opacity: 1; }
.zimmer-startnacht.zimmer-nacht .zimmer-nachtbild { opacity: 0; }

.zimmer-nacht .zimmer-bild {
    --k-links: 30.4%;
    --k-breite: 42.7%;
    --k-oben: 70.6%;
    --k-hoehe: 7.5%; }
/* Querformat nur, wenn das Fenster auch quer ist. Nach reiner
   Breite zu schalten reichte nicht: ein Tablet mit 900 x 1200
   ist breit genug, aber hochkant - das Querbild wurde dort links
   und rechts brutal beschnitten, Fenster und Dino waren weg. */
@media (min-width: 780px) and (min-aspect-ratio: 1/1) {
  .zimmer-bild {
    --seiten: 1.6;

    --k-links: 36.2%;
    --k-breite: 25.6%;
    --k-oben: 85.3%;
    --k-hoehe: 12.8%;
    background-image: url("bilder/zimmer-quer-1280.webp");
  }
  .zimmer-nachtbild { background-image: url("bilder/zimmer-nacht-quer-1280.webp"); }
  .zimmer-startnacht .zimmer-bild { background-image: url("bilder/zimmer-nacht-quer-1280.webp"); }
  .zimmer-startnacht .zimmer-nachtbild { background-image: url("bilder/zimmer-quer-1280.webp"); }
  .zimmer-nacht .zimmer-bild {
    --k-links: 36.2%;
    --k-breite: 25.8%;
    --k-oben: 86.1%;
    --k-hoehe: 10.1%; }
}
@media (min-width: 1400px) and (max-width: 1999px) and (min-aspect-ratio: 1/1) {
  .zimmer-bild { background-image: url("bilder/zimmer-quer-1920.webp"); }
  .zimmer-nachtbild { background-image: url("bilder/zimmer-nacht-quer-1920.webp"); }
  .zimmer-startnacht .zimmer-bild { background-image: url("bilder/zimmer-nacht-quer-1920.webp"); }
  .zimmer-startnacht .zimmer-nachtbild { background-image: url("bilder/zimmer-quer-1920.webp"); }
}
@media (min-width: 2000px) and (min-aspect-ratio: 1/1) {
  .zimmer-bild { background-image: url("bilder/zimmer-quer-2560.webp"); }
  .zimmer-nachtbild { background-image: url("bilder/zimmer-nacht-quer-2560.webp"); }
  .zimmer-startnacht .zimmer-bild { background-image: url("bilder/zimmer-nacht-quer-2560.webp"); }
  .zimmer-startnacht .zimmer-nachtbild { background-image: url("bilder/zimmer-quer-2560.webp"); }
}

/* ---------- Nacht ----------
   Der Schleier von vorher ist weg: es gibt jetzt eine echte
   Nachtfassung des Bildes. Nur die Schrift muss mitziehen, sonst
   steht dunkles Gruen auf dunkler Wand. */
.zimmer-nacht { background: #7A5A3E; }

/* ---------- Text auf der freien Wandflaeche ----------
   Oberes Drittel, mittig - dort ist im Bild nur Tapete. */
.wand-text {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--oben) + clamp(56px, 17vh, 190px));
  text-align: center; width: min(88vw, 560px);
  padding: 0 8px; box-sizing: border-box;
}
.wand-text h1 {
  font-family: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-size: clamp(20px, 3.4vw, 33px); font-weight: 800;
  color: #2F6B4F; margin: 0 0 5px; line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.wand-text p {
  margin: 0; color: #6E5237;
  font-size: clamp(13.5px, 2.1vw, 17px); line-height: 1.45;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.zimmer-nacht .wand-text h1 { color: #F2E6C8; text-shadow: 0 2px 8px rgba(20,12,4,.75); }
.zimmer-nacht .wand-text p  { color: #E4D6BC; text-shadow: 0 2px 8px rgba(20,12,4,.75); }

/* ---------- Die Kloetze im Bild sind der Zugang ----------
   Unsichtbare Flaechen genau darueber. Sie liegen im Rahmen des
   Bildes, nicht im Bildschirm - deshalb sitzen sie immer richtig. */
.kloetze-feld {
  position: absolute;
  left: var(--k-links);
  width: var(--k-breite);
  top: var(--k-oben);
  height: var(--k-hoehe);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%;
}
.klotz-flaeche {
  border: none; background: none; padding: 0; cursor: pointer;
  border-radius: 14%; transition: transform .18s ease;
  /* Mindestens 44 px Trefferflaeche, auch wenn das Bild klein
     dargestellt wird - notfalls ragt sie unsichtbar darueber
     hinaus. */
  min-width: 44px; min-height: 44px;
}
.klotz-flaeche:hover { transform: translateY(-6px); }
.klotz-flaeche:focus-visible {
  outline: 3px solid #2F6B4F;
  outline-offset: 3px;
  transform: translateY(-6px);
}
.kloetze-feld.wackelt { animation: zWackeln .45s ease; }
@keyframes zWackeln {
  0%,100% { transform: translateX(0) }
  20% { transform: translateX(-9px) }
  40% { transform: translateX(9px) }
  60% { transform: translateX(-5px) }
  80% { transform: translateX(5px) }
}

/* Hier stand ein beschriftetes Schild ueber den Kloetzen. Es ist
   auf Wunsch weg: der Klick bleibt, aber unsichtbar. */

/* ---------- PIN dort, wo die Kloetze sind ---------- */
.pin-bereich {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* Klappt die Tastatur auf, rueckt die Eingabe darueber statt
     dahinter zu verschwinden. */
  bottom: calc(var(--unten) + var(--tastatur, 0px) + clamp(14px, 4vh, 54px));
  transition: bottom .2s ease;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(92vw, 320px);
  background: #FFFBF3;
  border: 2px solid #C89A62;
  border-radius: 22px; padding: 16px 16px 18px;
  box-shadow: 0 12px 30px rgba(90,60,30,.32);
  animation: zAuf .22s ease;
}
@keyframes zAuf { from { opacity: 0; transform: translate(-50%, 10px) } }
/* Die Kloetzchen SIND das Eingabefeld. Darunter stand frueher
   zusaetzlich ein sichtbares Feld mit demselben Inhalt - zweimal
   dieselbe PIN nebeneinander, das ergab keinen Sinn.

   Ganz weg darf das Feld trotzdem nicht: ohne ein echtes
   Eingabefeld gibt es auf dem Telefon keine Tastatur und keine
   Zifferntastatur. Es liegt jetzt unsichtbar ueber den Kloetzchen -
   wer sie antippt, tippt in Wahrheit ins Feld. */
.pin-kloetze { display: flex; gap: 8px; cursor: pointer; position: relative; }
.pin-klotz {
  width: 44px; height: 44px; border-radius: 11px;
  background: #FFFDF8; border: 2px solid #C89A62;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: #2F6B4F;
  box-shadow: 0 3px 6px rgba(120,84,48,.18);
}
.pin-klotz.voll { border-color: #2F6B4F; background: #F1F7F3; }
.pin-feld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; background: transparent; outline: none;
  /* 16px, damit iOS beim Antippen nicht hineinzoomt. */
  font-size: 16px; padding: 0; margin: 0; cursor: pointer;
}
/* Tastaturbedienung soll sichtbar bleiben: wer sich mit der
   Tabulatortaste hierher bewegt, sieht die Kloetzchen umrandet. */
.pin-kloetze:focus-within .pin-klotz { border-color: #2F6B4F; }
.pin-fehler { color: #B5462F; font-size: 13.5px; font-weight: 700; text-align: center; }
/* Abbrechen links und unauffaellig, Anmelden rechts und farbig */
.pin-knoepfe { display: flex; gap: 10px; width: 100%; }
.pin-knoepfe button {
  flex: 1; min-height: 48px; border-radius: 14px;
  font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.pin-zurueck { background: #FFF6E6; border: 1.5px solid #C89A62; color: #6E5237; }
.pin-weiter {
  background: #2F6B4F; border: 2px solid #2F6B4F; color: #FFFBF3;
  box-shadow: 0 6px 16px rgba(47,107,79,.28);
}
.pin-weiter:disabled { opacity: .5; }

/* Auf sehr flachen Fenstern rueckt der Text an den Rand */
@media (max-height: 480px) {
  .wand-text { top: 8px; }
  .wand-text h1 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .klotz-flaeche, .pin-bereich, .kloetze-feld.wackelt { animation: none; transition: none }
}