/* ── Was nur der Aufnahmetest braucht ───────────────────────────────────────
   Alles Übrige kommt aus wbk.css. Die Datei ist eine KOPIE des Design-Systems
   und bleibt unberührt — geändert wird hier. Gleiche Aufteilung wie in lernen. */


/* ── Die Prüflingsansicht ───────────────────────────────────────────────────
   Eigene Maße, nicht die der Verwaltung. Wer gleich geprüft wird, soll nicht
   suchen müssen: größere Schrift, größere Ziele, weniger auf dem Schirm.
   Gemessen gedacht für 820×1180 (iPad hoch) und 1180×820 (quer).          */
.pruefling{ background:var(--flaeche-leise); }
.pruefling-inhalt{ max-width:680px; margin:0 auto;
                   padding:max(var(--a-8), env(safe-area-inset-top)) var(--a-6) var(--a-8); }
.pruefling h1{ font-size:40px; line-height:1.15; margin:0 0 var(--a-3); }
.pruefling .gross{ font-size:22px; line-height:1.5; }
.pruefling .feld{ margin-bottom:var(--a-5); }
.pruefling .feld-label{ font-size:18px; }
/* Touch-Ziele deutlich über den 44 px aus dem Standard: hier wird unter Anspannung
   getippt, oft mit dem Stift in der anderen Hand. */
.pruefling .eingabe{ min-height:56px; font-size:20px; }
.btn-gross{ min-height:60px; font-size:20px; padding:0 var(--a-7); }

.willkommen{ text-align:center; }
.willkommen .gruss{ font-size:20px; color:var(--text-grau); margin:0; }
.willkommen .nummer{ font-size:26px; font-weight:600; color:var(--akzent-text);
                     margin:0 0 var(--a-6); }
.willkommen .karte{ background:var(--grund); border:1px solid var(--linie);
                    border-radius:var(--r-lg); padding:var(--a-6); text-align:left;
                    font-size:19px; }
.willkommen .warten{ margin-top:var(--a-7); font-size:19px; color:var(--text-grau); }

.absage{ background:var(--gefahr-flaeche); border:1px solid var(--gefahr-rand);
         border-left-width:4px; border-radius:var(--r-lg); padding:var(--a-5);
         font-size:19px; color:var(--gefahr-text); margin-bottom:var(--a-6); }

.notfall{ margin-top:var(--a-8); }
.notfall summary{ cursor:pointer; font-size:17px; color:var(--text-grau);
                  padding:var(--a-4) 0; }
.notfall summary::marker{ color:var(--text-leise); }

/* ── Der Zettelbogen ────────────────────────────────────────────────────────
   Sechs Zettel je A4-Seite, zum Ausschneiden. Die Leiste oben verschwindet
   beim Drucken — auf dem Papier soll nur stehen, was ausgeteilt wird.      */
.bogen-seite{ background:var(--flaeche-leise); }
.bogen-leiste{ display:flex; align-items:center; justify-content:space-between; gap:var(--a-5);
               flex-wrap:wrap; max-width:900px; margin:0 auto; padding:var(--a-5) var(--a-5) 0; }
.bogen{ max-width:900px; margin:0 auto; padding:var(--a-5);
        display:grid; grid-template-columns:repeat(2, 1fr); gap:6mm; }

.zettel{ background:#fff; color:#000; border:1px dashed #999; border-radius:4px;
         padding:6mm; min-height:78mm; display:flex; flex-direction:column;
         page-break-inside:avoid; break-inside:avoid; }
.zettel .z-kopf{ display:flex; justify-content:space-between; align-items:baseline;
                 gap:4mm; border-bottom:1px solid #ddd; padding-bottom:2mm; }
.zettel .z-nr{ font-size:20pt; font-weight:700; line-height:1; }
.zettel .z-termin{ font-size:8pt; color:#555; text-align:right; }
.zettel .z-name{ font-size:15pt; font-weight:600; margin-top:3mm; line-height:1.2; }
.zettel .z-geb{ font-size:10pt; color:#444; margin-top:1mm; }
.zettel .z-qr{ margin:3mm auto 0; width:38mm; height:38mm; }
/* Breite UND Hoehe: Ein SVG mit nur einem viewBox und `height:auto` faellt in
   Safari beim Drucken auf null Hoehe zusammen. Seit dem 28.09.2026 traegt das
   SVG selbst width/height (siehe Qr::svg) — diese Regel ist die zweite Schranke. */
.zettel .z-qr svg{ width:100%; height:100%; display:block; }
.zettel .z-code{ margin-top:auto; padding-top:3mm; font-size:8.5pt; color:#444;
                 border-top:1px solid #eee; }
.zettel .z-code strong{ font-size:14pt; letter-spacing:2px; }
.zettel .z-klein{ display:block; font-size:7.5pt; color:#777; }
.zettel-leer{ border-style:solid; border-color:#ddd; background:#fafafa; }
.zettel-leer .z-hinweis{ font-size:9pt; color:#666; margin-top:3mm; }

/* ── Beim Drucken ───────────────────────────────────────────────────────────
   Hier stand `display:grid` auch fuer den Druck. Auf dem Bildschirm und in
   Chromium sah das richtig aus — Martin meldete am 28.09.2026 trotzdem einen
   leeren Zettel auf dem Mac.
   CSS-Raster und Seitenumbruch vertragen sich in Safari schlecht; die aelteste
   und verlaesslichste Art, Karten nebeneinander zu drucken, ist `inline-block`
   mit fester Breite. Auf dem Bildschirm bleibt das Raster, es sieht dort besser
   aus und wird nie umbrochen. */
@media print{
  .bogen-leiste{ display:none; }
  .bogen-seite{ background:#fff; }
  .bogen{ display:block; max-width:none; margin:0; padding:0;
          font-size:0;            /* schluckt den Zwischenraum der inline-Bloecke */ }
  .zettel{ display:inline-block; vertical-align:top; width:49.6%; font-size:10pt;
           border-radius:0; margin:0; box-sizing:border-box;
           page-break-inside:avoid; break-inside:avoid; }
  /* Safari zeichnet weisse Flaechen im Druck nicht — der QR-Code besteht aus
     schwarzen Pfaden auf weissem Grund und braucht das ausdrueckliche Ja. */
  .zettel .z-qr svg{ print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  @page{ size:A4; margin:8mm; }
}

/* ── Die Prüfung ────────────────────────────────────────────────────────────
   Alles hier ist größer als in der Verwaltung. Gerechnet für 820×1180 (iPad
   hoch) und 1180×820 (quer), mit fester Kopf- und Fußleiste, damit Zeit und
   Weiter-Schalter beim Scrollen nicht verschwinden.                        */
.pruefen{ background:var(--flaeche-leise); padding:0 0 92px;
          -webkit-text-size-adjust:100%; }

.pruefkopf{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:var(--a-4);
            padding:max(var(--a-3), env(safe-area-inset-top)) var(--a-5) var(--a-3);
            background:var(--grund); border-bottom:1px solid var(--linie); }
.pruefkopf-person{ font-size:16px; }
.pruefkopf-stand{ flex:1; text-align:center; min-width:0; }
.pruefkopf-zeit{ font-variant-numeric:tabular-nums; }

.stand{ font-size:14px; color:var(--text-grau); }
.stand-ok{ color:var(--akzent-text); }
.stand-laeuft{ color:var(--text-grau); }
.stand-weg{ color:var(--gefahr-text); font-weight:600; }

.uhr{ font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.uhr-knapp{ color:var(--warn-text); }
.uhr-aus{ color:var(--gefahr-text); }

.fortschritt{ position:sticky; top:56px; z-index:4; height:4px; background:var(--linie-leise); }
.fortschritt-balken{ height:100%; width:0; background:var(--akzent); transition:width .2s; }

.pruefbahn{ max-width:820px; margin:0 auto; padding:var(--a-6) var(--a-5) var(--a-8); }

.aufgabe-kopf{ display:flex; justify-content:space-between; align-items:baseline;
               color:var(--text-grau); font-size:15px; margin-bottom:var(--a-3); }
.aufgabe-frage{ font-size:26px; line-height:1.35; margin:0 0 var(--a-5); }
.aufgabe-hinweis{ font-size:16px; color:var(--text-grau); margin:calc(-1 * var(--a-3)) 0 var(--a-5); }

/* Auswahl: große Karten statt winziger Radios (Standard, Abschnitt 5.3). */
.wahlliste{ display:flex; flex-direction:column; gap:var(--a-3); }
.wahl{ display:flex; align-items:center; gap:var(--a-4); min-height:64px;
       padding:var(--a-4) var(--a-5); background:var(--grund);
       border:2px solid var(--linie); border-radius:var(--r-lg);
       font-size:20px; cursor:pointer; }
.wahl input{ width:26px; height:26px; flex:none; accent-color:var(--akzent); }
.wahl.ist-gewaehlt{ border-color:var(--akzent); background:var(--akzent-flaeche); }

.zahlfeld{ display:flex; align-items:center; gap:var(--a-3); }
.eingabe-zahl{ font-size:34px; min-height:72px; text-align:right;
               font-variant-numeric:tabular-nums; max-width:320px; }
.eingabe-wort{ font-size:24px; min-height:64px; max-width:420px; }
.einheit{ font-size:24px; color:var(--text-grau); }

/* Ein eigenes Tastenfeld: Die Systemtastatur frisst auf dem iPad den halben
   Schirm, und für eine Zahl braucht es zwölf Tasten, nicht dreißig. */
.tastenfeld{ display:grid; grid-template-columns:repeat(3, 84px); gap:10px;
             margin-top:var(--a-5); }
.taste{ min-height:64px; font-size:26px; font-weight:500; background:var(--grund);
        border:1px solid var(--linie); border-radius:var(--r-lg); cursor:pointer; }
.taste:active{ background:var(--flaeche); }

.flaeche{ background:#fff; border:2px solid var(--linie); border-radius:var(--r-lg);
          overflow:hidden; }
.stiftflaeche{ display:block; width:100%; touch-action:none; cursor:crosshair; }
.flaeche-leiste{ display:flex; gap:var(--a-3); padding:var(--a-3) var(--a-4);
                 border-top:1px solid var(--linie-leise); background:var(--flaeche-leise); }

.papierhinweis{ background:var(--warn-flaeche); border:1px solid var(--warn-rand);
                border-radius:var(--r-lg); padding:var(--a-5); font-size:19px; }

.pruefleiste{ position:fixed; left:0; right:0; bottom:0; z-index:5;
              display:flex; align-items:center; gap:var(--a-4);
              padding:var(--a-3) var(--a-5) calc(var(--a-3) + env(safe-area-inset-bottom));
              background:var(--grund); border-top:1px solid var(--linie); }
.pruefleiste .btn{ flex:1; max-width:220px; }
.pruefleiste-mitte{ flex:1; text-align:center; color:var(--text-grau);
                    font-variant-numeric:tabular-nums; }

.abgabe{ max-width:820px; margin:0 auto var(--a-8); padding:0 var(--a-5); text-align:center; }

/* Ohne Skript stehen alle Aufgaben untereinander, jede mit eigenem Schalter.
   Mit Skript blättert die Leiste, und der Schalter wäre nur Verwirrung. */
.aufgabe{ margin-bottom:var(--a-9); }
.pruefen.mit-js .aufgabe{ margin-bottom:0; }
.pruefen.mit-js .ohne-js{ display:none; }
.pruefen.keine-verbindung .pruefkopf{ background:var(--warn-flaeche); }

@media (max-width:700px){
  .aufgabe-frage{ font-size:22px; }
  .tastenfeld{ grid-template-columns:repeat(3, 1fr); max-width:320px; }
  .pruefleiste .btn{ max-width:none; }
}

/* ── Die Aufsichtsansicht ───────────────────────────────────────────────────
   Zahlen groß, damit sie vom Pult aus lesbar sind, ohne sich vorzubeugen.  */
.kacheln{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
          gap:var(--a-4); margin:var(--a-5) 0 var(--a-6); }
.kachel{ background:var(--grund); border:1px solid var(--linie); border-radius:var(--r-lg);
         padding:var(--a-4) var(--a-5); font-size:14px; color:var(--text-grau); }
.kachel-zahl{ display:block; font-size:32px; font-weight:600; color:var(--text);
              line-height:1.1; font-variant-numeric:tabular-nums; }
.kachel-warn{ border-color:var(--gefahr-rand); background:var(--gefahr-flaeche); }
.kachel-warn .kachel-zahl{ color:var(--gefahr-text); }

.balken-klein{ height:6px; background:var(--linie-leise); border-radius:3px;
               overflow:hidden; margin:6px 0 4px; max-width:160px; }
.balken-klein div{ height:100%; background:var(--akzent); }

/* ── Luft zwischen den Abschnitten ──────────────────────────────────────────
   Ohne diese Regeln klebte „Prüfungstermine" unmittelbar unter der Überschrift
   und „Neuen Termin anlegen" unmittelbar unter der Tabelle. Das Design-System
   setzt fuer h2 bewusst wenig Abstand — in einer Verwaltungsseite mit mehreren
   Abschnitten untereinander ist das zu wenig.                              */
.inhalt h1{ margin-bottom:var(--a-6); }
.inhalt h2{ margin-top:var(--a-8); margin-bottom:var(--a-4);
            padding-top:var(--a-5); border-top:1px solid var(--linie-leise); }
.inhalt h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
/* Eine Tabelle bringt schon eine Kante mit — dann genuegt Abstand ohne Linie. */
.inhalt .tabelle + h2{ border-top:0; padding-top:0; }
.inhalt > form{ margin-bottom:var(--a-6); }
.inhalt .feld-raster{ margin-bottom:var(--a-4); }

/* Die Schalter in der letzten Spalte: `.akt` ist im Design-System ein Flex-
   Behaelter und gehoert IN die Zelle, nicht auf sie. Steht er auf dem <td>,
   faellt die Zelle aus dem Tabellenlayout — keine Trennlinie, schiefe
   Ausrichtung. Am 28.09.2026 auf dem fertigen Server gesehen. */
.tabelle td .akt{ justify-content:flex-end; }
@media (max-width:640px){ .tabelle td .akt{ justify-content:flex-start; } }
.bogen-schalter{ display:flex; gap:var(--a-3); flex-wrap:wrap; }