/* =====================================================================
   MasterFarm – Aussehen der Seite (stil.css)
   ---------------------------------------------------------------------
   Diese Datei regelt NUR das Aussehen: Farben, Schriften, Größen und
   Positionen. Die 3D-Farm selbst wird in farm.js gezeichnet, die
   Figur Ida in ida.js bewegt.

   Aufbau der Seite (von hinten nach vorne):
     1. #buehne     – die 3D-Farm, füllt den ganzen Bildschirm
     2. .kopf       – Titel „MasterFarm“ oben links
     3. .alle       – Knopf „Alle Links“ oben rechts (einfache Liste)
     4. #schilder   – Holzschilder, die über den Gebäuden schweben
     5. #blase      – Idas Sprechblase unten, Ida schaut darüber hervor
     6. #ziel       – Vorschau der Zielseite „hinter der Tür“

   Bewusst gibt es nur EIN Farbschema (Abendlicht). Ein dunkles Thema
   würde nicht zur Farm passen, deshalb sind alle Farben fest gesetzt.
   ===================================================================== */

/* ---------- Farben und Schriften an einer Stelle ----------
   Alle Farben stehen hier als Variablen. Wer eine Farbe ändern will,
   ändert sie nur hier, und sie ändert sich überall. */
:root {
  --himmel-oben: #8fc6ea;
  --himmel-mitte: #ffd9a6;
  --himmel-unten: #ffb57a;
  --karte: #fff8ec;          /* helles Papier für Sprechblase und Knöpfe */
  --text: #3a2716;           /* dunkles Braun statt Schwarz, wirkt wärmer */
  --leise: #7c6249;          /* Nebentext */
  --holz: #8a5a32;           /* Rahmen im Holzschild-Stil */
  --holz-dunkel: #5e3a1d;    /* „Schatten“ unter den Holzrahmen */
  --gruen: #5aa13a;          /* Hauptknopf */
  --gruen-dunkel: #3d7a25;
  /* Schriften mit Ersatzschriften, falls die eigentliche Schrift nicht lädt */
  --schrift-titel: "Lilita One", "Arial Black", Impact, sans-serif;
  --schrift-text: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

/* ---------- Grundgerüst ---------- */
html { height: 100%; }
body {
  height: 100%; margin: 0;
  overflow: hidden;   /* Die Seite scrollt nicht, die Farm füllt den Bildschirm */
  /* Seitenabstand, der auch Kamera-Aussparungen am Handy freihält */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-family: var(--schrift-text); color: var(--text);
  /* Himmel als Hintergrund – sichtbar, solange die 3D-Farm lädt */
  background: linear-gradient(180deg, var(--himmel-oben) 0%, var(--himmel-mitte) 62%, var(--himmel-unten) 100%);
  -webkit-tap-highlight-color: transparent;
}

/* Die 3D-Farm liegt fest hinter allem anderen.
   touch-action: none verhindert, dass das Handy beim Ziehen die Seite verschiebt. */
#buehne { position: fixed; inset: 0; touch-action: none; }
#buehne canvas { display: block; }

/* ---------- Titel oben links ---------- */
.kopf {
  position: fixed; left: 0; top: 0;
  padding: calc(.9rem + env(safe-area-inset-top, 0px)) 1rem .5rem max(1rem, env(safe-area-inset-left, 0px));
  pointer-events: none;            /* Klicks gehen durch den Titel hindurch auf die Farm */
  transition: opacity .35s;
}
.kopf h1 {
  margin: 0; font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(2rem, 7vw, 3rem); line-height: 1; color: #fff;
  text-shadow: 0 3px 0 var(--holz), 0 7px 18px rgba(80, 40, 10, .35);
}
.kopf p { margin: .35rem 0 0; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(60, 25, 5, .55); font-size: .92rem; }
.kopf button { pointer-events: auto; margin-top: .55rem; }
.kopf { max-width: calc(100% - 5rem); box-sizing: border-box; }   /* nicht unter die Knöpfe rechts laufen */
.kopf .tipp { margin-top: .15rem; font-size: .78rem; font-weight: 700; opacity: .9; }

/* ---------- „Alle Links“ oben rechts ----------
   Ein ganz normales Aufklapp-Element. Es ist der Ausweichweg für alle,
   die die 3D-Farm nicht nutzen können oder wollen. */
details.alle {
  position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); top: calc(1rem + env(safe-area-inset-top, 0px));
  background: var(--karte); border: 2.5px solid var(--holz); border-radius: .9rem;
  box-shadow: 0 3px 0 var(--holz); max-width: 15rem; transition: opacity .35s;
  z-index: 2;                      /* aufgeklappt liegt die Liste über den Zoom-Knöpfen */
}
details.alle summary { cursor: pointer; padding: .55rem .8rem; font-weight: 800; font-size: .9rem; list-style: none; }
details.alle summary::-webkit-details-marker { display: none; }
details.alle summary:focus-visible { outline: 3px solid var(--holz); outline-offset: 2px; border-radius: .6rem; }
details.alle ul { margin: 0; padding: 0 .9rem .75rem 1.8rem; line-height: 1.85; }
details.alle a { color: var(--text); font-weight: 700; }

/* ---------- Zoom-Knöpfe unter „Alle Links“ ---------- */
.zoom {
  position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); top: calc(4.2rem + env(safe-area-inset-top, 0px));
  display: grid; gap: .4rem; transition: opacity .35s;
}
.zoom .klein { width: 2.5rem; height: 2.5rem; padding: 0; font-size: 1.3rem; line-height: 1; }
.drin .zoom { opacity: 0; pointer-events: none; }

/* ---------- Holzschilder über den Gebäuden ----------
   farm.js rechnet in jedem Bild aus, wo das Gebäude auf dem Bildschirm
   liegt, und schiebt das Schild per transform dorthin. */
#schilder { position: fixed; inset: 0; pointer-events: none; transition: opacity .35s; }
.schild {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  display: grid; justify-items: center; gap: .1rem;
  font: 800 .88rem/1 var(--schrift-text); color: var(--text);
  background: #fff3dc; border: 2.5px solid var(--holz); border-radius: .65rem;
  padding: .42rem .7rem .4rem; white-space: nowrap;
  box-shadow: 0 3px 0 var(--holz-dunkel), 0 8px 16px rgba(60, 30, 10, .2);
  transition: opacity .3s;
}
/* kleiner Pfosten unter dem Schild */
.schild::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 4px; height: 7px;
  margin-left: -2px; background: var(--holz-dunkel); border-radius: 0 0 2px 2px;
}
.schild small { font-weight: 700; font-size: .72rem; color: var(--leise); }
.schild:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Idas Sprechblase ----------
   #blase ist nur die Hülle, die als Ganzes hoch- und runterfährt.
   Darin liegen zwei Ebenen:
     .figur  – Ida (hinten), schaut oben links über die Karte
     .karte  – die eigentliche Holz-Sprechblase (vorne)
   Ist die Blase zu, fährt sie so weit nach unten, dass auch Ida
   komplett verschwindet (deshalb „+ 18rem“). */
#blase {
  position: fixed; left: 50%;
  bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
  width: min(27rem, calc(100% - 2rem));
  transform: translate(-50%, calc(100% + 18rem));
  transition: transform .42s cubic-bezier(.2, .9, .3, 1.15);   /* leichtes Nachfedern wie im Spiel */
}
#blase.offen { transform: translate(-50%, 0); }

.figur {
  position: absolute; left: -.6rem; bottom: calc(100% - 1.1rem);
  width: clamp(8.5rem, 30vw, 13rem); z-index: 0; cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(80, 40, 10, .25));
}
.figur svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Bei sehr niedrigen Fenstern (Handy quer) wird Ida kleiner */
@media (max-height: 640px) { .figur { width: clamp(7rem, 22vh, 10rem); } }

/* Breite Bildschirme: Blase und Ida unten links in die Ecke,
   damit Ida nicht vor den Gebäuden in der Bildmitte steht. */
@media (min-width: 900px) {
  #blase { left: max(1.5rem, env(safe-area-inset-left, 0px)); transform: translate(0, calc(100% + 18rem)); }
  #blase.offen { transform: translate(0, 0); }
  .figur { left: -.2rem; }
}

.karte {
  position: relative; z-index: 1;      /* liegt vor Ida */
  background: var(--karte); border: 3px solid var(--holz); border-radius: 1.2rem;
  box-shadow: 0 5px 0 var(--holz-dunkel), 0 18px 40px rgba(60, 28, 6, .3);
  padding: 1.25rem 1.1rem 1.05rem;
}
.namensschild {
  position: absolute; right: 1rem; top: -1rem;
  display: flex; align-items: baseline; gap: .45rem;
  background: var(--holz); color: #fff; border-radius: .6rem; padding: .32rem .7rem;
  box-shadow: 0 3px 0 var(--holz-dunkel);
}
.namensschild b { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; }
.namensschild span { font-size: .72rem; font-weight: 700; opacity: .9; }
#blase h2 { margin: .1rem 0 .3rem; font-family: var(--schrift-titel); font-weight: 400; font-size: 1.55rem; line-height: 1.1; text-wrap: balance; }
#blase p { margin: 0 0 .95rem; line-height: 1.45; font-weight: 500; }

/* Idas Text erscheint Wort für Wort. Alle Wörter stehen von Anfang an
   da (unsichtbar), damit die Blase beim Sprechen nicht wächst und springt. */
.wort { opacity: 0; transition: opacity .12s; }
.wort.da { opacity: 1; }

/* Blinzeln: das Auge wird kurz flach gedrückt */
.auge { transform-box: fill-box; transform-origin: center; }
.auge.blinzeln { animation: blinzeln .16s ease-in-out; }
@keyframes blinzeln { 50% { transform: scaleY(.08); } }

/* ---------- Knöpfe in der Blase ---------- */
.knoepfe { display: flex; gap: .55rem; flex-wrap: wrap; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .65rem; }
.knopf {
  font: 800 1rem/1 var(--schrift-text); border-radius: .8rem; padding: .78rem 1.05rem;
  border: 2.5px solid var(--gruen-dunkel); cursor: pointer; color: var(--text); background: transparent;
}
.knopf.haupt { background: var(--gruen); color: #fff; box-shadow: 0 3px 0 var(--gruen-dunkel); flex: 1 1 auto; }
.knopf.haupt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gruen-dunkel); }
.knopf.neben { border-color: #cdb79a; }
.knopf:focus-visible, .chip:focus-visible { outline: 3px solid var(--holz); outline-offset: 2px; }
.chip {
  font: 800 .85rem/1 var(--schrift-text); color: var(--text); cursor: pointer;
  background: #fff0d4; border: 2px solid var(--holz); border-radius: .6rem; padding: .5rem .65rem;
  box-shadow: 0 2px 0 var(--holz);
}
.klein {
  font: 800 .78rem/1 var(--schrift-text); color: var(--text); cursor: pointer;
  background: var(--karte); border: 2px solid var(--holz); border-radius: 999px; padding: .42rem .7rem;
  box-shadow: 0 2px 0 var(--holz);
}

/* Während man durch eine Tür geht (Klasse „drin“ am body),
   werden Titel, Linkliste und Schilder ausgeblendet. */
.drin .kopf, .drin details.alle, .drin #schilder { opacity: 0; pointer-events: none; }
.drin #schilder .schild { pointer-events: none; }

/* ---------- Zielseite „hinter der Tür“ ----------
   Im Vorschau-Modus (DEMO in farm.js) zeigt diese Ebene eine Nachbildung
   der Zielseite. Im echten Betrieb leitet farm.js stattdessen weiter. */
#ziel {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem;
  padding: calc(1.5rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, var(--z-bg1, #1f5fae) 0%, var(--z-bg2, #5a9be6) 100%);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
#ziel.an { opacity: 1; pointer-events: auto; }
.z-karte {
  width: min(26rem, calc(100vw - 2.5rem)); box-sizing: border-box;
  background: var(--z-karte, #fff); color: var(--z-text, #13304f);
  border-radius: 20px; padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  display: grid; gap: .8rem; justify-items: start;
}
.z-icon { width: 64px; height: 64px; display: block; }
.z-karte h2 { margin: 0; font-family: var(--schrift-titel); font-weight: 400; font-size: 2rem; line-height: 1.15; }
.z-karte p { margin: 0; font: 500 1rem/1.5 var(--schrift-text); color: var(--z-leise, #587390); }
.z-mock {
  width: 100%; height: 3rem; border-radius: 12px; background: var(--z-akzent, #1f5fae);
  color: #fff; font: 800 1rem/3rem var(--schrift-text); text-align: center; margin-top: .3rem;
}
.z-demo {
  width: min(26rem, calc(100vw - 2.5rem)); box-sizing: border-box;
  background: rgba(255, 248, 236, .94); color: #3a2716; border: 2.5px solid #8a5a32; border-radius: 1rem;
  padding: .9rem 1rem 1rem; box-shadow: 0 4px 0 #8a5a32;
  opacity: 0; transform: translateY(8px); transition: opacity .35s .45s, transform .35s .45s;
}
#ziel.an .z-demo { opacity: 1; transform: none; }
.z-demo p { margin: 0 0 .75rem; font-size: .9rem; line-height: 1.45; }
.z-demo code { background: #f3e6cc; padding: .05rem .35rem; border-radius: .3rem; word-break: break-all; font-size: .85rem; }

/* Hinweis, falls der Browser keine 3D-Grafik kann */
.hinweis-webgl {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--karte); padding: 1rem; border-radius: 1rem; border: 2px solid var(--holz);
}

/* Wer im System „Bewegung reduzieren“ eingestellt hat,
   bekommt keine fahrenden oder überblendenden Elemente. */
@media (prefers-reduced-motion: reduce) {
  #blase, #ziel, .z-demo, .schild { transition-duration: .01s; transition-delay: 0s; }
}