/* NHR-Board · iPad (Counter und Info-Point). Vorlage „F9 Counter iPad“; Farben aus design/paket/README.md.
   Quer 1180 × 820 und hochkant 820 × 1180; Touch-Ziele mindestens 52 px; kein nowrap bei Sätzen (X3). */
@font-face { font-family: Archia; src: url("/schrift/archia-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Archia; src: url("/schrift/archia-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Archia; src: url("/schrift/archia-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Archia; src: url("/schrift/archia-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --tinte: #1A0F4A; --violett: #5B2FE4; --violett-dunkel: #3A1C9E; --zart: #EEE9FD; --lime: #E4FF00;
  --rand: #DCD5F5; --rand-hell: #ECE8F8; --flaeche: #FBFAFE; --grau: #4A4A55; --grau-hell: #9A99A8; --knopf-rand: #CFC3F7;
  --ok-bg: #E2F5EC; --ok: #14613F; --warn-bg: #FFF4C2; --warn: #6B5500; --err-bg: #FBE7E4; --err: #A1271D; --neu-bg: #EFEDF5; --neu: #4A4A55;
  --gruen: #1E9E62; --gelb: #D9A400; --rot: #C43B2E;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body.ipad { font-family: Archia, system-ui, sans-serif; color: var(--tinte); background: var(--flaeche); -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
body.ipad input, body.ipad textarea { -webkit-user-select: text; user-select: text; }
button, input, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
body.ipad .umgebungsband { position: sticky; top: 0; z-index: 100; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--lime); color: #000; font-weight: 700; font-size: 14px; }
.ipad-rahmen { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body[data-umgebung="test"] .ipad-rahmen { height: calc(100dvh - 28px); }
.ipad-rahmen > * { flex: 1; min-height: 0; }

/* Am Mac eingehängt („Counter-Ansicht wie iPad", G27): fester Rahmen in iPad-Größe quer, Dialoge bleiben darin */
.ipad-rahmen.ipad-mac, body[data-umgebung="test"] .ipad-rahmen.ipad-mac { position: relative; width: 1180px; max-width: 100%; height: 820px; flex: none;
  border-radius: 18px; border: 1px solid var(--rand-hell); box-shadow: 0 12px 40px rgba(26,15,74,.16); background: var(--flaeche); font-family: Archia, system-ui, sans-serif; color: var(--tinte); }
@keyframes blinken { 50% { opacity: 0; } }

/* Alles Weitere gilt nur im Rahmen der iPad-Oberfläche — am iPad und eingehängt am Mac. Selektoren, die mit einem
   Element beginnen, tragen „&", damit auch ältere Safari-Versionen die Verschachtelung lesen. */
.ipad-rahmen {
  .uhrzeit { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 22px; }
  .uhrzeit.gross { font-size: 24px; }
  .fehler { color: var(--err); font-weight: 700; margin: 0; }
  .ton-ok { color: var(--ok); } .ton-warn { color: var(--warn); } .ton-err { color: var(--err); } .ton-neu { color: var(--neu); }
  & i[class^="punkt-"] { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
  .punkt-ok { background: var(--gruen); } .punkt-warn { background: var(--gelb); } .punkt-err { background: var(--rot); } .punkt-neu { background: var(--grau-hell); }
  & svg.wlan { flex: none; color: var(--rot); }

  /* ---------- Einrichten ---------- */
  .einrichten { display: flex; align-items: center; justify-content: center; padding: 32px; }
  .karte-ipad { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; padding: 32px 36px; border-radius: 24px; background: #fff; box-shadow: 0 12px 30px rgba(26,15,74,.15); }
  .karte-ipad h1 { margin: 0; font-size: 30px; }
  .karte-ipad p { margin: 0; font-size: 17px; line-height: 1.45; color: #2E2A3D; }
  .feld { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; }
  .feld input { height: 56px; padding: 0 14px; border: 2px solid var(--rand); border-radius: 12px; font-size: 19px; font-weight: 600; background: #fff; }
  .feld input:focus { outline: none; border-color: var(--violett); }
  & button.gross { min-height: 64px; padding: 0 20px; border-radius: 16px; font-size: 19px; font-weight: 700; border: 2px solid var(--knopf-rand); background: #fff; color: var(--violett-dunkel); }
  & button.gross.haupt { border: 0; background: var(--violett); color: #fff; min-height: 80px; font-size: 22px; }

  /* ---------- Anmeldung „Wo stehst du?“ ---------- */
  .anmeldung { display: flex; flex-direction: row; }
  .anmeldung .links { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 28px 32px; overflow-y: auto; }
  .anmeldung .zeile { display: flex; align-items: center; gap: 14px; }
  .anmeldung .titel { font-size: 30px; line-height: 1.1; }
  .anmeldung .unter { font-size: 16px; font-weight: 500; color: var(--grau); }
  .kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ckachel { min-height: 100px; border-radius: 16px; border: 2px solid var(--rand); background: #fff; color: var(--tinte); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 16px; text-align: left; }
  .ckachel .kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .ckachel .kopf b { font-size: 34px; line-height: 1; }
  .ckachel .kopf span { font-size: 17px; font-weight: 700; }
  .ckachel .status { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.25; }
  .ckachel.ip { min-height: 76px; flex-direction: row; align-items: center; gap: 14px; padding: 0 18px; }
  .ckachel.ip .status { margin-left: auto; }
  .ckachel.schraffur { background: repeating-linear-gradient(135deg, var(--err-bg) 0 8px, #fff 8px 16px); }
  .ckachel.an { border-color: var(--violett); background: var(--violett); color: #fff; }
  .ckachel.an .status { color: #fff; }
  .ckachel.an i[class^="punkt-"] { box-shadow: 0 0 0 2px #fff; }
  .legende { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--grau); }
  .legende span { display: inline-flex; align-items: center; gap: 8px; }
  .pinfeld { width: 400px; flex: none; background: var(--tinte); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
  .pinfeld .klein, .sperre .klein { font-size: 17px; font-weight: 600; opacity: .8; text-align: center; }
  .pinfeld .leise { font-size: 14px; opacity: .7; }
  .pinfeld .code { font-size: 44px; line-height: 1; }
  .pinfeld .code.klein2 { font-size: 24px; text-align: center; line-height: 1.25; }
  .pinpunkte { display: flex; gap: 16px; padding: 6px 0; }
  .pinpunkte span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; }
  .pinpunkte span.voll { background: #fff; }
  .pinmeldung { max-width: 340px; padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; }
  .pinmeldung.rot { background: var(--rot); }
  .pinblock { display: grid; grid-template-columns: repeat(3, 96px); gap: 12px; }
  .pintaste { height: 72px; border-radius: 16px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 30px; font-weight: 700; }
  .pintaste:active { background: rgba(255,255,255,.28); }
  .pintaste.ok { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
  .pintaste.ok.bereit { background: var(--lime); color: #000; }
  .pinblock.pruefung .pintaste { opacity: .35; }
  .pinblock.pruefung .pintaste.ok { opacity: 1; font-size: 18px; color: #fff; background: rgba(255,255,255,.2); }

  /* ---------- Warnung „zu zweit“ ---------- */
  .warnung { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--warn-bg); overflow-y: auto; }
  .warnung .karte-ipad { max-width: 660px; gap: 18px; }
  .rund { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #fff; }
  .rund.gelb { background: var(--gelb); }
  .riesig { font-size: 40px; line-height: 1.08; text-wrap: balance; }
  .warnung .text { font-size: 20px; font-weight: 500; line-height: 1.45; color: #2E2A3D; }
  .warnung .liste { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--flaeche); font-size: 16px; font-weight: 600; }
  .warnung .liste span::before { content: "✓ "; }

  /* ---------- Sperre und Gerätesperre ---------- */
  .sperre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: var(--tinte); color: #fff; overflow-y: auto; }
  .sperre .riesig { font-size: 56px; line-height: 1; text-align: center; }
  .sperre .wechseln { min-height: 52px; padding: 0 22px; border-radius: 12px; border: 2px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 17px; font-weight: 700; }
  .geraetesperre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; background: repeating-linear-gradient(135deg, #1A0F4A 0 22px, #22145C 22px 44px); color: #fff; }
  .geraetesperre .schloss { width: 96px; height: 96px; border-radius: 50%; background: var(--rot); display: flex; align-items: center; justify-content: center; }
  .geraetesperre .riesig { font-size: 52px; max-width: 760px; }
  .geraetesperre .unter { font-size: 20px; font-weight: 600; opacity: .85; }
  .geraetesperre .hinweis { max-width: 560px; padding: 14px 20px; border-radius: 14px; background: rgba(255,255,255,.1); font-size: 17px; line-height: 1.45; }

  /* ---------- Arbeitsbildschirm ---------- */
  .arbeit { display: flex; flex-direction: column; position: relative; }
  .ikopf { height: 76px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px 0 18px; background: #fff; border-bottom: 1px solid var(--rand-hell); }
  .codechip { display: inline-flex; align-items: center; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--tinte); color: #fff; font-size: 28px; font-weight: 700; }
  .ikopf .wer { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: none; }
  .ikopf .wer b { font-size: 16px; }
  .crewpill { align-self: flex-start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--neu-bg); color: var(--neu); font-size: 14px; font-weight: 700; }
  .crewpill.zwei { background: var(--warn-bg); color: var(--warn); }
  .lampe { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--ok); }
  .lampe i { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); }
  .lampe.aus { color: var(--err); } .lampe.aus i { background: var(--rot); }
  .knopf-i { min-height: 52px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--rand); background: #fff; color: var(--tinte); font-size: 16px; font-weight: 700; }
  .zweibalken { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; background: var(--violett-dunkel); color: #fff; }
  .zweibalken .lime { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--lime); color: #000; font-size: 17px; font-weight: 700; }
  .zweibalken .text { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
  .zweibalken button { flex: none; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 2px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-size: 16px; font-weight: 700; }
  .irumpf { flex: 1; min-height: 0; display: flex; flex-direction: column; }

  /* ---------- Hochkant 820 × 1180 ---------- */
  @media (orientation: portrait) {
    .anmeldung { flex-direction: column; }
    .anmeldung .links { flex: none; }
    .pinfeld { width: 100%; flex: 1; }
    .ckachel { min-height: 92px; }
    .ikopf { gap: 8px; }
    .nur-quer { display: none; }
  }

  /* ---------- Kopf: Stand, Verbindung, Meldung ---------- */
  .ikopf .stand { display: flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 14px; background: var(--zart); margin-left: 4px; }
  .ikopf .stand > b { font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ikopf .stand > div { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 700; color: var(--violett-dunkel); }
  .ikopf .stand .balken { display: block; width: 200px; height: 8px; border-radius: 999px; background: #fff; overflow: hidden; }
  .ikopf .stand .balken i { display: block; height: 100%; background: var(--violett); border-radius: 999px; }
  .offlinebalken { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--err-bg); color: var(--err); font-size: 17px; font-weight: 700; }
  .offlinebalken i { width: 12px; height: 12px; border-radius: 50%; background: var(--rot); flex: none; }
  .laedt { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--grau); }
  .toast-i { position: absolute; z-index: 30; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 0 12px 0 22px; border-radius: 18px; background: var(--tinte); color: #fff; box-shadow: 0 12px 30px rgba(26,15,74,.3); }
  .toast-i.ueber-fuss { bottom: 116px; }
  .toast-i.fehler { background: var(--err); }
  .toast-i span { flex: 1; font-size: 19px; font-weight: 700; line-height: 1.3; }
  .toast-i button { min-height: 56px; padding: 0 22px; border-radius: 12px; border: 2px solid rgba(255,255,255,.45); background: transparent; color: #fff; font-size: 18px; font-weight: 700; }
  .pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 700; }
  .pill-ok { background: var(--ok-bg); color: var(--ok); } .pill-warn { background: var(--warn-bg); color: var(--warn); } .pill-err { background: var(--err-bg); color: var(--err); }
  .pill-zart { background: var(--zart); color: var(--violett-dunkel); } .pill-neu { background: var(--neu-bg); color: var(--neu); }

  /* ---------- Liste ---------- */
  .liste { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 0; }
  .suchzeile { display: flex; gap: 10px; flex: none; }
  .suchfeld { flex: 1; min-width: 0; height: 64px; border-radius: 16px; border: 2px solid var(--rand); background: #fff; display: flex; align-items: center; gap: 12px; padding: 0 18px; text-align: left; }
  .suchfeld.aktiv { border-color: var(--violett); }
  .suchfeld .text { font-size: 24px; font-weight: 500; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .suchfeld .text.voll { font-weight: 700; color: var(--tinte); }
  .suchfeld .cursor { width: 3px; height: 30px; background: var(--violett); animation: blinken 1s steps(1) infinite; }
  .suchfeld .hinweis { font-size: 15px; font-weight: 600; color: var(--grau); }
  .alle-zeigen { flex: none; height: 64px; padding: 0 20px; border-radius: 16px; border: 2px solid var(--knopf-rand); background: #fff; color: var(--violett-dunkel); font-size: 18px; font-weight: 700; }
  .azleiste { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; flex: none; }
  .az { height: 56px; border-radius: 12px; border: 2px solid var(--rand-hell); background: #fff; color: var(--tinte); display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0; }
  .az b { font-size: 24px; line-height: 1; }
  .az i { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--neu-bg); color: var(--neu); font-size: 13px; font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; }
  .az.leer { color: #B9B7C6; }
  .az.mein { background: var(--zart); border-color: var(--knopf-rand); }
  .az.mein i { background: var(--violett); color: #fff; }
  .az.an { background: var(--violett); border-color: var(--violett); color: #fff; }
  .az.an i { background: #fff; color: var(--violett); }
  .titelzeile { display: flex; align-items: center; gap: 10px 12px; flex: none; flex-wrap: wrap; }
  .titelzeile > b { font-size: 22px; }
  .titelzeile > span { font-size: 15px; font-weight: 500; color: var(--grau); }
  .ipfilter { display: flex; gap: 6px; flex-wrap: wrap; }
  .ipfilter button { min-height: 52px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--knopf-rand); background: #fff; color: var(--violett-dunkel); font-size: 15px; font-weight: 700; }
  .ipfilter button.an { background: var(--violett); border-color: var(--violett); color: #fff; }
  .schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--rand); background: #fff; color: var(--tinte); font-size: 15px; font-weight: 700; }
  .schalter > i { width: 36px; height: 22px; border-radius: 999px; background: #C9C6D4; position: relative; flex: none; }
  .schalter > i > i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
  .schalter.an { background: var(--zart); border-color: var(--violett); }
  .schalter.an > i { background: var(--violett); } .schalter.an > i > i { left: 17px; }
  .kachelraster { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; grid-auto-rows: max-content; padding-bottom: 18px; }
  .kachelraster.mit-toast { padding-bottom: 100px; }
  .pkachel { min-height: 108px; border-radius: 18px; border: 2px solid var(--rand-hell); background: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 16px; text-align: left; min-width: 0; }
  .pkachel.eigen { border-color: var(--rand); }
  .pkachel.mitmeta { border-color: var(--gelb); }
  .pkachel.fertig { background: var(--flaeche); }
  .pkachel.fertig .namen b { color: var(--grau); }
  .pkachel .meta { font-size: 14px; font-weight: 700; line-height: 1.3; }
  .pkachel .namen { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
  .pkachel .namen b { font-size: 28px; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pkachel .namen span { font-size: 15px; font-weight: 500; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pkachel .mknoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
  .pkachel .mknoepfe button { min-height: 52px; padding: 0 18px; font-size: 16px; }
  .ausmeldung { margin: 0 0 10px; padding: 12px 16px; border-radius: 14px; background: var(--zart); color: var(--violett-dunkel); font-size: 16px; font-weight: 700; }
  .leerbox { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; border-radius: 18px; background: #fff; color: var(--grau); text-align: center; }
  .leerbox img { width: 72px; height: auto; opacity: .28; }
  .leerbox b { font-size: 26px; color: var(--tinte); }
  .leerbox span { font-size: 18px; font-weight: 500; max-width: 560px; }
  .leerbox.rot { background: var(--err-bg); color: var(--err); }
  .leerbox.rot b { color: var(--err); }
  .leerbox button { min-height: 64px; padding: 0 24px; border-radius: 16px; border: 2px solid var(--rot); background: #fff; color: var(--err); font-size: 19px; font-weight: 700; }
  .tastatur { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 14px; margin: 0 -18px; background: #E3E1EA; }
  .tastatur > div { display: flex; gap: 7px; justify-content: center; }
  .tastatur button { flex: 1; min-width: 0; max-width: 92px; height: 60px; border-radius: 10px; border: 0; background: #fff; color: var(--tinte); font-size: 24px; font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
  .tastatur button.breit { flex: 1.6; max-width: 150px; } .tastatur button.grau { background: #BDBAC9; }
  .tastatur button.leerzeichen { flex: 5; max-width: 520px; font-size: 18px; }
  .tastatur button.fertig { flex: 2; max-width: 200px; background: var(--violett); color: #fff; font-size: 20px; }

  /* ---------- Karte ---------- */
  .karte { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .kartenflaeche { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .karte .links { display: flex; flex-direction: column; gap: 16px; padding: 28px 34px; min-height: 0; overflow: hidden; }
  .ton-bg-ok { background: var(--ok-bg); } .ton-bg-warn { background: var(--warn-bg); } .ton-bg-err { background: var(--err-bg); } .ton-bg-zart { background: var(--zart); }
  .karte .name { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
  .karte .name b { font-size: 64px; line-height: .95; }
  .karte .name span { font-size: 20px; font-weight: 500; padding-bottom: 6px; }
  .kpills { display: flex; flex-wrap: wrap; gap: 8px; }
  .kpill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--tinte); font-size: 16px; font-weight: 700; }
  .kpill.pro { background: var(--violett); color: #fff; } .kpill.dunkel { background: var(--tinte); color: #fff; } .kpill.rot { background: var(--rot); color: #fff; } .kpill.gelb { background: var(--gelb); color: #000; }
  .urteil { display: flex; align-items: center; gap: 18px; }
  .urteil b { font-size: 48px; line-height: 1.02; text-wrap: balance; }
  & i[class^="kreis-gross-"] { flex: none; width: 76px; height: 76px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; font-style: normal; }
  .kreis-gross-ok { background: var(--gruen); } .kreis-gross-warn { background: var(--gelb); } .kreis-gross-err { background: var(--rot); } .kreis-gross-zart { background: var(--violett); }
  .urteiltext { font-size: 20px; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
  .sagbox { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.72); }
  .abschnitt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
  .saghinweis { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 700; line-height: 1.3; }
  .sag { font-size: 21px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
  .sag-en { padding-top: 6px; border-top: 1px solid rgba(26,15,74,.12); font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--grau); }
  .karte .rechts { background: #fff; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .rechts-innen { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px; }
  .ipdaten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 12px 14px; border-radius: 12px; background: var(--flaeche); font-size: 15px; line-height: 1.3; color: var(--grau); }
  .ipdaten b { color: var(--tinte); font-weight: 700; overflow-wrap: anywhere; }
  .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 17px; font-weight: 700; line-height: 1.3; }
  .alert i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 13px; font-style: normal; }
  .alert.dunkel { background: var(--tinte); color: #fff; } .alert.gelb { background: var(--warn-bg); color: var(--warn); }
  .checks { display: flex; flex-direction: column; }
  .check { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 4px 0; border-bottom: 1px solid var(--rand-hell); }
  .check > span { flex: 1; min-width: 0; font-size: 18px; font-weight: 500; line-height: 1.2; }
  .check > b { flex: none; max-width: 48%; text-align: right; font-size: 15px; }
  & i[class^="kreis-"]:not([class^="kreis-gross"]) { flex: none; width: 32px; height: 32px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; font-style: normal; }
  .kreis-ok { background: var(--gruen); } .kreis-warn { background: var(--gelb); } .kreis-err { background: var(--rot); } .kreis-neu { background: var(--grau-hell); }
  .haken { flex: none; min-height: 92px; border-radius: 18px; border: 3px solid var(--rand); background: #fff; display: flex; align-items: center; gap: 16px; padding: 10px 20px; text-align: left; }
  .haken > i { flex: none; width: 46px; height: 46px; border-radius: 12px; border: 3px solid var(--violett); background: #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; font-style: normal; }
  .haken > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .haken b { font-size: 22px; } .haken small { font-size: 16px; font-weight: 600; color: var(--grau); }
  .haken em { flex: none; font-size: 44px; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
  .haken.an { border-color: var(--violett); background: var(--zart); }
  .haken.an > i { background: var(--violett); }
  .nrblock { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--rand-hell); }
  .nrblock > span { font-size: 15px; font-weight: 700; color: var(--grau); }
  .nrblock > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .nrblock button { height: 56px; border-radius: 12px; border: 2px solid var(--rand); background: #fff; font-size: 22px; font-weight: 700; }
  .notiz { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; }
  .notiz input { height: 56px; border-radius: 12px; border: 2px solid var(--gelb); padding: 0 14px; font-size: 19px; font-weight: 600; }
  .adresse { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--rand-hell); }
  .adresse.fehlt { background: var(--warn-bg); color: var(--warn); }
  .adresse .kopf { display: flex; align-items: center; gap: 12px; }
  .adresse .kopf > div { flex: 1; display: flex; flex-direction: column; }
  .adresse .kopf b { font-size: 17px; } .adresse .kopf span { font-size: 15px; font-weight: 500; }
  .adresse .kopf button { min-height: 56px; padding: 0 20px; border-radius: 12px; border: 2px solid var(--knopf-rand); background: #fff; color: var(--violett-dunkel); font-size: 17px; font-weight: 700; }
  .adresse.fehlt .kopf button { border-color: var(--gelb); color: var(--warn); }
  .adressform { display: flex; flex-direction: column; gap: 10px; }
  .adressform input, .adressform select { height: 56px; border-radius: 12px; border: 2px solid var(--gelb); padding: 0 14px; font-size: 19px; font-weight: 600; color: var(--tinte); background: #fff; min-width: 0; width: 100%; }
  .adressform .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
  .adressform .knoepfe { display: flex; gap: 10px; }
  .adressform .knoepfe button { min-height: 56px; padding: 0 18px; border-radius: 12px; border: 2px solid var(--gelb); background: #fff; color: var(--warn); font-size: 17px; font-weight: 700; }
  .adressform .knoepfe button.haupt { flex: 1; border: 0; background: var(--violett); color: #fff; }
  .kartenfuss { flex: none; display: flex; gap: 12px; padding: 14px 18px; background: #fff; border-top: 1px solid var(--rand-hell); }
  .kartenfuss button, .kartenfuss .notiz { min-height: 84px; border-radius: 18px; font-size: 19px; font-weight: 700; }
  .kartenfuss .zurueck { flex: none; width: 220px; border: 2px solid var(--knopf-rand); background: #fff; color: var(--violett-dunkel); }
  .kartenfuss .haupt { flex: 1; min-width: 0; font-size: 24px; border: 3px solid var(--violett); background: var(--violett); color: #fff; }
  .kartenfuss .haupt.ton-rot { border-color: var(--rot); background: var(--rot); }
  .kartenfuss .haupt:disabled { border-color: var(--zart); background: var(--zart); color: var(--grau-hell); cursor: not-allowed; }
  .kartenfuss .notiz { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 22px; background: var(--zart); color: var(--violett-dunkel); font-size: 18px; }
  .kartenfuss .neben { flex: none; padding: 0 18px; border: 2px solid #F3CBC5; background: #fff; color: var(--err); font-size: 17px; }
  .kartenfuss .neben.ton-zweit { border-color: var(--knopf-rand); color: var(--violett-dunkel); }

  @media (orientation: portrait) {
    .kachelraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kartenflaeche { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .karte .links { padding: 22px 26px; }
    .karte .name b { font-size: 52px; } .urteil b { font-size: 38px; }
    .kartenfuss .zurueck { width: 170px; }
    .ikopf .stand .balken { width: 90px; }
  }

  /* ---------- Reiter Check-in | Rückgabe, Rückgabe-Ansicht (H10) ---------- */
  .reiter-i { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: #fff; border: 2px solid var(--rand); }
  .reiter-i button { min-height: 52px; min-width: 128px; padding: 0 14px; border-radius: 12px; border: 0; background: transparent; color: var(--violett-dunkel); font-size: 18px; font-weight: 700; }
  .reiter-i button.an { background: var(--violett); color: #fff; }
  .rueckgabe { flex: 1; min-height: 0; display: flex; gap: 18px; padding: 18px; }
  .nrfeld { width: 340px; flex: none; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--rand-hell); }
  .nrfeld > b { font-size: 18px; color: var(--violett-dunkel); }
  .nrfeld .anzeige { height: 80px; border-radius: 16px; border: 2px solid var(--violett); display: flex; align-items: center; justify-content: center; font-size: 52px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
  .nrfeld .anzeige.leer { color: #C9C6D4; }
  .nrfeld .tasten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .nrfeld .tasten button { height: 68px; border-radius: 14px; border: 2px solid var(--rand); background: #fff; font-size: 28px; font-weight: 700; }
  .nrfeld .tasten button.zart { background: var(--zart); }
  .nrfeld > span { font-size: 15px; font-weight: 500; color: var(--grau); }
  .geraeteliste { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
  .kachelraster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (orientation: portrait) {
    .rueckgabe { flex-direction: column; }
    .nrfeld { width: 100%; }
    .nrfeld .tasten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .reiter-i button { min-width: 96px; }
  }

  /* ---------- Info-Point: Schritte, Meldungen, Gast anlegen (G17, L2) ---------- */
  .schritt-ip { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px; background: #F6F4FD; border: 2px solid var(--zart); }
  .schritt-ip.fertig { background: #fff; border-color: #BFE6D2; }
  .schritt-ip.aus { background: var(--flaeche); border: 2px dashed var(--rand); }
  .schritt-ip.aus .kopf b { color: var(--grau-hell); }
  .schritt-ip .kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .schritt-ip .kopf b { font-size: 20px; }
  .schritt-ip small { font-size: 15px; font-weight: 500; color: var(--grau); }
  .schritt-ip .knoepfe, .schritt-ip .wege { display: flex; gap: 10px; flex-wrap: wrap; }
  .knopf-schritt { flex: 1 1 200px; min-height: 64px; border-radius: 14px; border: 2px solid var(--knopf-rand); background: #fff; color: var(--violett-dunkel); font-size: 18px; font-weight: 700; }
  .knopf-schritt.haupt { border-color: var(--violett); background: var(--violett); color: #fff; }
  .knopf-schritt:disabled { opacity: .5; cursor: not-allowed; }
  .chip-i { min-height: 52px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--rand); background: #fff; color: var(--tinte); font-size: 17px; font-weight: 700; }
  .chip-i.an { border-color: var(--violett); background: var(--violett); color: #fff; }
  .notizfeld { flex: 1 1 100%; height: 56px; border-radius: 12px; border: 2px solid var(--gelb); padding: 0 14px; font-size: 19px; font-weight: 600; }
  .gast-neu { min-height: 52px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--lime); color: #000; font-size: 15px; font-weight: 700; }
  .meldung { cursor: default; }
  .meldung .pill { border: 0; min-height: 52px; padding: 0 18px; font-size: 16px; align-self: flex-start; }
  .alert.rot { background: var(--err-bg); color: var(--err); }
  .dialog-i { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(26,15,74,.35); overflow-y: auto; }
  .dialog-i .karte-ipad { max-width: 720px; }
  .dialog-i .titel { font-size: 28px; }
  .dialog-i .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .wahl-i { display: flex; gap: 8px; flex-wrap: wrap; }
  .knoepfe-i { display: flex; gap: 12px; }
  .knoepfe-i .gross { flex: 1; }
}

/* Land: Auswahl mit „anderes Land" und Freitext (Abw. 52) */
.landwahl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.landwahl input[hidden] { display: none; }