/* ==========================================================================
   BesucherTerminal - Kiosk-Abweichungen vom S3-Standard
   --------------------------------------------------------------------------
   Grundlage bleibt app.css. Hier stehen nur die Abweichungen, die sich aus
   der Bedienung durch externe Erstnutzer auf einem Tablet ergeben - das ist
   der eigene Entwurfsschritt aus ADR-001.

   Leitgedanke: groessere Trefferflaechen, weniger gleichzeitige Entscheidungen,
   keine Navigationsangebote. Farben, Radius und Typografie bleiben Standard.
   ========================================================================== */

.kiosk-body {
    margin: 0;
    /* Kein Textselektieren und kein Doppeltipp-Zoom auf dem Tablet. */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.kiosk-root {
    display: flex;
    flex-direction: column;
    /* Feste Hoehe, nicht min-height: Nur so loest das max-height der Karte
       auf und der Regeltext bekommt tatsaechlich den Rest des Schirms.
       Mit min-height waechst die Karte weiter und die Bestaetigungsknoepfe
       rutschen unter den Sichtbereich. */
    height: 100vh;
    background: var(--background);
}

.kiosk-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Wortmarke, ueber die Hoehe gesetzt. 56 px ergeben bei 5:1 rund 283 px
   Breite - in einem Kopf ueber die volle Geraetebreite unproblematisch, und
   gross genug, dass "CASING & PACKAGING" lesbar bleibt. */
.kiosk-logo {
    max-height: 56px;
    width: auto;
}

.kiosk-main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 2rem;
    /* Der Kioskbereich scrollt nie als Ganzes - sonst rutschen die
       Bestaetigungsknoepfe unter den Sichtbereich, und genau die muss der
       Besucher finden. Gescrollt wird ausschliesslich im Regeltext. */
    min-height: 0;
    overflow: hidden;
}

/* Ein Schritt = eine Karte. Mehr als eine Entscheidung gleichzeitig ist am
   Tresen unter Zeitdruck der haeufigste Abbruchgrund. */
.kiosk-card {
    width: 100%;
    max-width: 820px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Die Karte bleibt vollstaendig sichtbar; was zu lang wird, ist der
       Regeltext, und der bekommt seinen eigenen Scrollbereich. */
    max-height: 100%;
    min-height: 0;
}

.kiosk-title {
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
}

.kiosk-subtitle {
    font-size: 1.125rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* Grosse Schaltflaechen: Fingerbedienung, nicht Mausbedienung. */
.kiosk-btn {
    font-size: 1.25rem;
    padding: 1.25rem 2rem;
    min-height: 72px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
}

.kiosk-btn:hover {
    background: var(--muted);
}

.kiosk-btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.kiosk-btn-primary:hover {
    background: var(--primary-hover);
}

.kiosk-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.kiosk-btn-gross {
    min-height: 120px;
    font-size: 1.5rem;
}

.kiosk-btn-reihe {
    display: flex;
    gap: 1rem;
}

.kiosk-btn-reihe > .kiosk-btn {
    flex: 1;
}

.kiosk-eingabe {
    font-size: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--input-background);
    width: 100%;
    box-sizing: border-box;
}

/* Vier Ziffern brauchen kein Feld ueber die ganze Karte - aber auch keines,
   das sich in der Ecke versteckt. Ein 12rem-Feld am linken Rand liess 587 von
   820 Pixeln der Karte leer (gemessen 2026-08-20); es sah aus wie vergessen,
   nicht wie die eine Sache, um die es auf dieser Seite geht.

   Zurueck zur Mitte, und groesser (Daniel Simon, 2026-08-20): Das ist der
   einzige Schritt, an dem der Besucher etwas eingeben MUSS, um weiterzukommen.
   2,5rem bleibt unter den 3rem, in denen eine neu vergebene PIN angezeigt wird
   - wer sie eben abgelesen hat, erkennt das Feld wieder.

   Gesperrter Satz und Tabellenziffern bleiben: Aus zwei Metern Abstand - der
   Entfernung, aus der jemand am Tablet steht - sind die Ziffern so am besten
   auseinanderzuhalten. */
.kiosk-eingabe-pin {
    width: 16rem;
    font-size: 2.5rem;
    padding: 1.25rem 1rem;
    text-align: center;
    letter-spacing: 1rem;
    /* Der Sperrsatz haengt hinter der letzten Ziffer als Leerraum - ohne den
       Ausgleich sieht die Zahl aus wie nach links gerutscht. */
    text-indent: 1rem;
    font-variant-numeric: tabular-nums;
}

/* Nur dieser Schritt wird zentriert. Die uebrigen Felder (Name, Firma,
   E-Mail) bleiben linksbuendig - dort stehen mehrere untereinander, und eine
   gemeinsame Kante ist beim Ausfuellen die Hilfe, die eine Mitte nicht gibt. */
.kiosk-feld-pin {
    align-items: center;
}

.kiosk-eingabe:focus {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.kiosk-feld {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kiosk-label {
    font-size: 1.125rem;
    font-weight: 500;
}

/* Der angekuendigte Besuch, zum Bestaetigen. Zwei Zeilen, links die Frage,
   rechts die Antwort - aus zwei Metern Abstand schneller zu erfassen als ein
   Fliesstext. */
.kiosk-erwartet {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--input-background);
    border-left: 4px solid var(--primary);
}

.kiosk-erwartet-zeile {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.kiosk-erwartet-feld {
    min-width: 9rem;
    font-size: 1.125rem;
    color: var(--muted-foreground);
}

.kiosk-erwartet-wert {
    font-size: 1.5rem;
    font-weight: 500;
}

/* Ein Knopf je Person - untereinander, nicht nebeneinander: Die Zahl steht
   nicht fest, und drei Namen in einer Reihe waeren je Knopf zu schmal fuer
   einen Finger. */
.kiosk-btn-breit {
    width: 100%;
    margin-bottom: 0.75rem;
}

.kiosk-abstand-oben {
    margin-top: 1.5rem;
}

/* --- Fortschritt ------------------------------------------------------- */
.kiosk-schritte {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.kiosk-schritt {
    flex: 1;
    height: 6px;
    background: var(--border);
}

.kiosk-schritt.ist-erledigt,
.kiosk-schritt.ist-aktiv {
    background: var(--primary);
}

/* --- Regelwerk (F2, OP-13) --------------------------------------------- */
/* Vollstaendig und scrollbar, in Abschnitten. Der Bestaetigungsknopf wird
   erst aktiv, wenn bis zum Ende gescrollt wurde. */
.regel-flaeche {
    /* Nimmt den Platz, der uebrig bleibt - statt einer festen Hoehe, die auf
       dem einen Geraet passt und auf dem naechsten die Knoepfe verdraengt. */
    flex: 1;
    min-height: 8rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    padding: 1.5rem;
    background: var(--background);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.regel-abschnitt h3 {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0 0 0.5rem 0;
}

.regel-abschnitt p {
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}

/* Der Gesundheitsabschnitt traegt die Erklaerung - er wird hervorgehoben,
   damit der Besucher weiss, worauf sich seine Bestaetigung bezieht. */
.regel-abschnitt.ist-gesundheit {
    border-left: 4px solid var(--primary);
    padding-left: 1rem;
}

.regel-hinweis {
    font-size: 1rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Unterschrift (OP-1, OP-20) ---------------------------------------- */
.unterschrift-flaeche {
    border: 2px dashed var(--border);
    background: var(--card);
    height: 260px;
    position: relative;
    touch-action: none;
}

.unterschrift-flaeche canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.unterschrift-linie {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 3rem;
    border-bottom: 1px solid var(--border);
    pointer-events: none;
}

/* --- Trefferliste Gastgeber (OP-14) ------------------------------------ */
/* Keine durchblaetterbare Liste - Treffer erscheinen erst ab zwei Zeichen
   und zeigen nur den Namen. */
.kiosk-treffer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kiosk-treffer-leer {
    color: var(--muted-foreground);
    padding: 1rem 0;
}

/* --- Sprachumschaltung (OP-17) ----------------------------------------- */
.kiosk-sprache {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.kiosk-sprache button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 1rem;
}

.kiosk-sprache button.ist-aktiv {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* --- Zeitanzeige (OP-15) ----------------------------------------------- */
/* Erscheint erst in den letzten Sekunden - eine dauerhaft laufende Uhr setzt
   den Besucher unnoetig unter Druck. */
.kiosk-timeout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: #fef9c3;
    color: #854d0e;
}

/* --- Abschluss --------------------------------------------------------- */
.kiosk-abschluss {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem 0;
}

.kiosk-pin {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.5rem;
    font-variant-numeric: tabular-nums;
}

/* Erlaeuterung unter einem Eingabefeld. Kleiner als das Feld, aber am Kiosk
   immer noch aus zwei Metern lesbar. */
.kiosk-hinweis {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}