/* css/eintrag.css · Das Eintrage-Blatt, ein Bauteil für alle Screens (R10), gebaut nach den sechs
 * Figma-Rahmen „Neueintrag" (83:276 Start, 83:291 und 83:305 Spielausgang, 83:323 und 83:334
 * Bestleistung, 83:349 Strich), am 03.09.2026 über den Draht gemessen. Entscheidungen 36 und 37:
 * halbhohes Blatt als einzige Tür zum Eintragen, Trichter Was · Wer · Wert.
 *
 * Blatt 393 × 435, Vanille #f3e8c8, 4 px Herz-Gold innen, oben Radius 32, unten eckig,
 * Überlagerungs-Schatten 0 / −10 / 28 Espresso 40 % nach oben (Stilregel 7). Lage nach Tabeas
 * Wort vom 03.09.2026: Es dockt an der Oberkante der Bottom-Leiste an und taucht ein kleines Stück
 * hinter ihr ab, Überlappung 16 (DESIGN.md Abschnitt 7, „Halbhohe Blätter", Tabea 03.09.2026).
 * Solange das Blatt offen ist, verschwindet das Plus in der Leiste, die
 * Seite dahinter ist mit Espresso 40 % abgedunkelt, ein Tipp daneben schließt (alles Tabea, 03.09.).
 * Kopfzeile 369 × 42 bei 12 / 24, Radius 16, Gold; darin Schrittzahl links (Textkasten bei 22 / 28),
 * Symbol mittig (Dartscheibe 40 × 40 bei 177 / 25, Pokal 29,64 × 36 bei 182 / 26, Strichliste
 * 40,13 × 31 bei 177 / 31) und „< zurück" rechts (Textkasten 84 breit bei 287 / 28).
 * Frage-Knopf 227 × 75 bei 83 / 92, Radius 32, Espresso mit 3 px Gold innen, Text Gold mittig
 * (Button-Regel: auf Creme wechseln Knöpfe nach Espresso). Auf Schritt 1 drei solche Knöpfe bei
 * y 92 / 203 / 314 mit Symbol bei x 95 und Text nach Figma-Kasten. Pillen 150 × 50 bei 121,5 und
 * y 193 / 259 / 325, Radius 24, gleiche Farben. Haken 50 rund bei 331 / 373 mit 3 px Gold innen.
 * Text durchgehend Indie Flower 24, Zeilenhöhe 35 (Bestandsaufnahme in DESIGN.md Abschnitt 3).
 * Alle Figma-Lagen zählen ab der Rahmenkante; im Browser liegen absolute Kinder innerhalb der
 * 4-px-Kontur, darum stehen hier die Figma-Werte minus 4. Einheit --u wie in start.css.
 * Styling-Datei im Sinne von CLAUDE.md: Claude ändert sie nie ungefragt.
 */
.eintrag-schleier {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(42, 29, 18, .4);
  opacity: 0; visibility: hidden;
  transition: opacity .55s, visibility 0s .55s;
}
body.eintrag-offen .eintrag-schleier { opacity: 1; visibility: visible; transition: opacity .55s; }
body.eintrag-offen .leiste .plus { visibility: hidden; }

.eintrag {
  position: fixed; left: 50%; z-index: 9;
  bottom: calc(80 * var(--u) + env(safe-area-inset-bottom, 0px));   /* Leiste 96 minus Überlappung 16 */
  width: calc(393 * var(--u)); height: calc(435 * var(--u));
  box-sizing: border-box;
  background: #f3e8c8;
  border: calc(4 * var(--u)) solid #f0b429;
  border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0;
  box-shadow: 0 calc(-10 * var(--u)) calc(28 * var(--u)) rgba(42, 29, 18, .4);
  font-family: "Indie Flower", sans-serif; font-size: calc(24 * var(--u)); line-height: calc(35 * var(--u)); color: #2a1d12;
  transform: translate(-50%, calc(560 * var(--u)));   /* unter dem Bildschirm: 435 + 80 + Schattenrand */
  visibility: hidden;
  transition: transform .55s cubic-bezier(.2, .9, .25, 1), visibility 0s .55s;
}
body.eintrag-offen .eintrag { transform: translate(-50%, 0); visibility: visible; transition: transform .55s cubic-bezier(.2, .9, .25, 1); }
@media (prefers-reduced-motion: reduce) { .eintrag, .eintrag-schleier, body.eintrag-offen .eintrag, body.eintrag-offen .eintrag-schleier { transition: none; } }

.eintrag:focus { outline: none; }
.eintrag button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.eintrag img { display: block; }
.eintrag .seite { display: none; position: absolute; inset: 0; }
.eintrag .seite.aktiv { display: block; }

/* Kopfzeile */
.eintrag .kopfzeile { position: absolute; left: calc(8 * var(--u)); top: calc(20 * var(--u)); width: calc(369 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(16 * var(--u)); background: #f0b429; }
.eintrag .kopfzeile .schritt { position: absolute; left: calc(10 * var(--u)); top: calc(4 * var(--u)); white-space: nowrap; }
.eintrag .kopfzeile .zurueck { position: absolute; left: calc(275 * var(--u)); top: calc(4 * var(--u)); width: calc(84 * var(--u)); text-align: left; white-space: nowrap; }
.eintrag .kopfzeile img { position: absolute; object-fit: cover; }
.eintrag .kopfzeile .dartscheibe { left: calc(165 * var(--u)); top: calc(1 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.eintrag .kopfzeile .pokal { left: calc(170 * var(--u)); top: calc(2 * var(--u)); width: calc(29.64 * var(--u)); height: calc(36 * var(--u)); }
.eintrag .kopfzeile .strichliste { left: calc(165 * var(--u)); top: calc(7 * var(--u)); width: calc(40.13 * var(--u)); height: calc(31 * var(--u)); }

/* Frage-Knopf und die drei großen Wahl-Knöpfe von Schritt 1 */
.eintrag .frage, .eintrag .wahl {
  position: absolute; box-sizing: border-box;
  background: #2a1d12; border: calc(3 * var(--u)) solid #f0b429; color: #f0b429;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: pre-line;
}
.eintrag .frage, .eintrag .wahl.gross { left: calc(79 * var(--u)); top: calc(88 * var(--u)); width: calc(227 * var(--u)); height: calc(75 * var(--u)); border-radius: calc(32 * var(--u)); }
.eintrag .wahl.gross { display: block; text-align: left; }
.eintrag .wahl.gross.w2 { top: calc(199 * var(--u)); }
.eintrag .wahl.gross.w3 { top: calc(310 * var(--u)); }
.eintrag .wahl.gross span { position: absolute; top: calc(18 * var(--u)); white-space: nowrap; }
.eintrag .wahl.gross.w1 span { left: calc(55 * var(--u)); }
.eintrag .wahl.gross.w2 span { left: calc(60 * var(--u)); }
.eintrag .wahl.gross.w3 span { left: calc(87 * var(--u)); }
.eintrag .wahl.gross img { position: absolute; left: calc(9 * var(--u)); object-fit: cover; }
.eintrag .wahl.gross .dartscheibe { top: calc(15 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.eintrag .wahl.gross .pokal { top: calc(17 * var(--u)); width: calc(29.64 * var(--u)); height: calc(36 * var(--u)); }
.eintrag .wahl.gross .strichliste { top: calc(19 * var(--u)); width: calc(40.13 * var(--u)); height: calc(31 * var(--u)); }

/* Pillen */
.eintrag .wahl.klein { left: calc(117.5 * var(--u)); width: calc(150 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(24 * var(--u)); }
.eintrag .wahl.klein.p1 { top: calc(189 * var(--u)); }
.eintrag .wahl.klein.p2 { top: calc(255 * var(--u)); }
.eintrag .wahl.klein.p3 { top: calc(321 * var(--u)); }

/* Haken */
.eintrag .fertig {
  position: absolute; left: calc(327 * var(--u)); top: calc(369 * var(--u)); width: calc(50 * var(--u)); height: calc(50 * var(--u));
  box-sizing: border-box; border: calc(3 * var(--u)) solid #f0b429; border-radius: 50%;
  background: url(../assets/haken-kreis-gefuellt.png) center / cover no-repeat;
}

/* R12 Phase 3 (03.09.2026): Personenwahl nach Tabeas Form (Entscheidung 103): ein Eingabefeld an der Stelle des
   Frage-Knopfs, darunter die Namen als Pillen 150 x 50 in zwei Spalten (x 40 / 206, Luecke 16, Reihen im
   Abstand 58), die Liste scrollt innerhalb des Blatts; beim Tippen bleiben nur passende Namen. Feld wie ein
   Badge: Champagner, 4 px Gold innen, Radius 24, Indie Flower 24 Espresso (Abschnitt 2, 3, 5). Gewaehlte Pille
   hell in Champagner (Abschnitt 2: aktive Buttons). Wert-Feld auf Schritt best-was an der Stelle der dritten
   Pille. Rueckfrage als Schritt (Entscheidung 101): Frage-Knopf plus grosser Knopf. Rueckmeldung (Entscheidung
   102): Kopfzeile Gebucht, Tabeas franziger Patch (Canva-Seite 17) faellt herein, Text darauf Rubik Dirt in
   Herz-Rot; Glow-Werte sind offene weiche Werte, darum hier ohne. Stilregel 9: feuert nur nach dem Eintrag. */
.eintrag .feld {
  position: absolute; left: calc(79 * var(--u)); top: calc(88 * var(--u)); width: calc(227 * var(--u)); height: calc(50 * var(--u));
  box-sizing: border-box; background: #f5e4b8; border: calc(4 * var(--u)) solid #f0b429; border-radius: calc(24 * var(--u));
  padding: 0 calc(16 * var(--u)); font: inherit; color: #2a1d12; text-align: center; outline: none;
}
.eintrag .feld::placeholder { color: rgba(42, 29, 18, .75); opacity: 1; }
.eintrag .feld.wert { top: calc(317 * var(--u)); left: calc(117.5 * var(--u)); width: calc(150 * var(--u)); -moz-appearance: textfield; }
.eintrag .feld.wert::-webkit-inner-spin-button, .eintrag .feld.wert::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.eintrag .liste { position: absolute; left: 0; top: calc(150 * var(--u)); width: 100%; height: calc(211 * var(--u)); overflow-y: auto; overscroll-behavior: contain; }
.eintrag .liste .innen { position: relative; }
.eintrag .wahl.person { position: absolute; width: calc(150 * var(--u)); height: calc(50 * var(--u)); box-sizing: border-box; background: #2a1d12; border: calc(3 * var(--u)) solid #f0b429; color: #f0b429; border-radius: calc(24 * var(--u)); display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.eintrag .wahl.person[aria-pressed="true"], .eintrag .wahl.klein[aria-pressed="true"] { background: #f5e4b8; color: #2a1d12; }
.eintrag .wahl.gross.mittig { display: flex; text-align: center; }
.eintrag .wahl.gross.mittig span { position: static; }
.eintrag .patch { position: absolute; left: calc(66 * var(--u)); top: calc(76 * var(--u)); width: calc(260 * var(--u)); height: calc(267 * var(--u)); transform: rotate(-6deg); filter: drop-shadow(calc(-6 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)) rgba(42, 29, 18, .4)); }
.eintrag .patch img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.eintrag .patch .text { position: absolute; left: calc(10 * var(--u)); top: calc(92 * var(--u)); width: calc(240 * var(--u)); text-align: center; font: calc(24 * var(--u)) / calc(35 * var(--u)) "Rubik Dirt", sans-serif; color: #c62b1e; white-space: pre-line; }
.eintrag .seite.aktiv .patch { animation: patch-rein .55s cubic-bezier(.2, .9, .25, 1); }
@keyframes patch-rein { from { transform: translateY(calc(-600 * var(--u))) rotate(20deg); } to { transform: translateY(0) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .eintrag .seite.aktiv .patch { animation: none; } }