/* ==========================================================================================
 * css/test-kiosk.css -- Auftrag 177 (Fenster TK, Beat 2.11.2026): DER TEST-KIOSK.
 * «Sobald ich einen Test starte ... sehe ich nur noch das Eintrittsfenster. Oben rechts, links und
 * unten ist nichts mehr zu sehen. Der Test nimmt den ganzen Bildschirm ein.»
 * Die Huelle ist ein showModal-<dialog class="widget-vollbild-dialog test-kiosk"> (js/app.js,
 * testAlleinOeffnen); die Grundmasse (100vw x 100dvh) kommen schon aus .widget-vollbild-dialog
 * (css/styles.css). Hier: der Rest der App weg (body.ist-test), Leiste mit «✕ Pause», Rueckfrage,
 * Sicherheitsabstaende (env(safe-area-inset-*)) und die feste Abgabeleiste des Motors unten.
 * Einhaengen: index.html nach css/styles.css (Larry).
 * ========================================================================================== */
body.ist-test { overflow: hidden; }
body.ist-test > :not(.test-kiosk) { visibility: hidden !important; }

.test-kiosk.widget-vollbild-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  background: var(--farbe-karte, #fff);
  overscroll-behavior: contain;
}
.test-kiosk[open] {
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
/* Kein durchscheinender Hintergrund: hinter dem Test ist nichts zu sehen. */
.test-kiosk::backdrop { background: var(--farbe-karte, #fff); }

.test-kiosk__leiste {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
}
.test-kiosk__pause,
.test-kiosk__schliessen {
  min-height: 44px;
  min-width: 44px;
  padding: 0 1rem;
  font-size: 1rem;
  border-radius: 22px;
  border: 1px solid var(--farbe-rand, #c8d0d8);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.test-kiosk__inhalt {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem 1rem;
}
/* Die Startmaske (das Eintrittsfenster) steht mittig; waehrend des Tests beginnt die Karte oben, damit sie
   beim Wechsel der Aufgabe nicht springt. margin:auto im Flex-Container: ein zu hoher Inhalt beginnt trotzdem oben. */
.test-kiosk .test-allein {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  min-width: 0;
}
.test-kiosk .test-allein:has(.uebung--start-maske) { margin: auto; }
.test-kiosk .uebung { max-width: 100%; box-sizing: border-box; }
.test-kiosk img, .test-kiosk svg, .test-kiosk video { max-width: 100%; height: auto; }

/* Die Abgabeleiste des Motors (Fenster TM, .uebung__abgabeleiste) steht fest am unteren Rand der Huelle -- auch
   bei kurzer Karte (sticky griffe erst bei Ueberlauf). Der Inhalt bekommt unten Platz, damit nichts darunter liegt. */
.test-kiosk[open] .test-kiosk__inhalt { padding-bottom: 6rem; }
.test-kiosk .uebung__abgabeleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--farbe-karte, #fff);
  border-top: 1px solid var(--farbe-rand, #d8dee4);
  box-sizing: border-box;
}
.test-kiosk .uebung__abgabeleiste button { min-height: 44px; }

/* Die eigene Rueckfrage («✕ Pause», Esc, Rueckwaerts-Geste) */
.test-kiosk__frage {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 40, 60, 0.45);
}
.test-kiosk__frage-karte {
  width: 100%;
  max-width: 30rem;
  box-sizing: border-box;
  padding: 1.4rem;
  border-radius: 12px;
  background: var(--farbe-karte, #fff);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.test-kiosk__frage-text { margin: 0 0 1rem; font-size: 1.1rem; line-height: 1.45; }
.test-kiosk__frage-knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }
.test-kiosk__frage-knoepfe button { min-height: 44px; padding: 0 1.1rem; font-size: 1rem; }

/* Im Kiosk steht nur die Testkarte: die Kopfzeile der Übungsliste («🧩 Übungen») hat dort nichts zu sagen. */
.test-kiosk .uebungen-bereich__kopfzeile { display: none; }