:root{--navy:#1B3A57;--cta:#2E5FA8;--sky:#C8DFF7;--sand:#FBFAF6;--line:#D9E1EA;--ok:#1E5E3F;--nicht:#9E2B20;--nicht-bg:#F8E1DE;--grey:#4A5563;--stage:#0F1C2B}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--sand);color:var(--navy);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.45;display:flex;flex-direction:column;min-height:100vh}
.kopf{background:var(--navy);color:#fff;padding:10px 18px 0;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.kopf-zeile{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.marke-name{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:600}
h1{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.25rem;margin:0;line-height:1.2}
.status{font-size:.85rem;color:var(--sky);padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.status.ok{color:#BFEFD1}.status.fehler{color:#FFC9C2;background:rgba(158,43,32,.35)}.status.warte{color:#FFE4B5}
.abmelden{display:flex;align-items:center;gap:10px;font-size:.85rem;margin:0}
.abmelden button{color:#fff;text-decoration:underline;background:none;border:none;cursor:pointer;font:inherit;font-size:.85rem}
.reiter{display:flex;gap:4px;overflow-x:auto;padding:10px 0 0;scrollbar-width:thin}
.reiter button{flex:0 0 auto;font:inherit;font-size:.88rem;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-bottom:none;border-radius:10px 10px 0 0;padding:9px 14px;cursor:pointer;display:flex;gap:8px;align-items:center}
.reiter button[aria-selected="true"]{background:var(--sand);color:var(--navy);border-color:var(--sand)}
.reiter .zahl{font-size:.75rem;font-weight:600;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.18)}
.reiter button[aria-selected="true"] .zahl{background:var(--sky)}
.reiter .zahl.fertig{background:var(--ok);color:#fff}
.reiter .nicht-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;background:#E4655A}
.haupt{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;padding:16px 18px 8px;max-width:1700px;width:100%;margin:0 auto}
.buehne{position:relative;background:var(--stage);border-radius:12px;overflow:hidden;aspect-ratio:16/9;max-height:min(74vh,900px);display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:zoom-in}
.buehne.gezoomt{cursor:grab}.buehne.zieht{cursor:grabbing}
.buehne img{max-width:100%;max-height:100%;display:block;transform-origin:center center;will-change:transform;pointer-events:none}
.buehne-hinweis{position:absolute;left:12px;bottom:10px;font-size:.75rem;color:rgba(255,255,255,.8);background:rgba(0,0,0,.4);padding:4px 9px;border-radius:6px;pointer-events:none}
.buehne-hinweis-kurz{display:none;position:absolute;left:8px;bottom:6px;font-size:.7rem;color:rgba(255,255,255,.8);background:rgba(0,0,0,.4);padding:3px 7px;border-radius:6px;pointer-events:none}
.laedt{position:absolute;top:10px;right:12px;font-size:.75rem;color:#fff;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:6px;pointer-events:none}
.buehne-leiste{display:flex;align-items:center;gap:12px;padding:10px 2px 0;flex-wrap:wrap}
.folien-titel{flex:1;min-width:200px}
.folien-nr{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:700}
h2{font-size:1.1rem;margin:2px 0 0;line-height:1.25}
.zoom-knoepfe{display:flex;align-items:center;gap:6px;font-size:.85rem}
.zoom-knoepfe span{min-width:52px;text-align:center}
button{font:inherit}
.knopf-pfeil{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:1.2rem;cursor:pointer}
.knopf-pfeil:disabled{opacity:.35;cursor:default}
.knopf-klein{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:8px;padding:6px 10px;cursor:pointer;min-width:36px}
.urteil{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:12px}
.urteil-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.knopf-ok,.knopf-nicht{border:2px solid var(--line);border-radius:10px;padding:14px 8px;font-weight:700;font-size:1rem;cursor:pointer;background:#fff;color:var(--navy);line-height:1.2}
.knopf-ok[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#fff}
.knopf-nicht[aria-pressed="true"]{background:var(--nicht);border-color:var(--nicht);color:#fff}
.knopf-ok:hover{border-color:var(--ok)}.knopf-nicht:hover{border-color:var(--nicht)}
.urteil-stand{font-size:.85rem;color:var(--grey);min-height:1.2em}
.anmerkung label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nicht);margin-bottom:6px}
textarea{font:inherit;font-size:.95rem;width:100%;border:1px solid #B8C4D1;border-radius:8px;padding:9px 10px;color:var(--navy);background:#fff;resize:vertical;min-height:110px}
textarea:focus{outline:3px solid var(--cta);outline-offset:1px}
.diktat-zeile{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.knopf-diktat{border:1px solid var(--cta);background:#fff;color:var(--cta);border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer}
.knopf-diktat[aria-pressed="true"]{background:var(--nicht);border-color:var(--nicht);color:#fff;animation:puls 1.2s infinite}
@keyframes puls{50%{opacity:.75}}
.hinweis{font-size:.78rem;color:var(--grey)}
.zwischen{font-size:.9rem;color:var(--grey);font-style:italic;min-height:1.2em;margin-top:4px}
.pflicht{font-size:.82rem;color:var(--nicht);font-weight:600;margin-top:6px}
.vorabnahme{font-size:.85rem;border-top:1px solid var(--line);padding-top:10px}
.vorabnahme summary{cursor:pointer;font-weight:600;color:var(--cta)}
.befund{border-radius:8px;padding:8px 10px;margin-top:8px;background:#F1F4F8}
.befund.hoch{background:var(--nicht-bg);color:var(--nicht)}.befund.mittel{background:#FBEBD3;color:#8A4B08}
.befund .schwere{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.vorabnahme ul{margin:6px 0 0;padding-left:18px}
.knopf-leise{background:none;border:none;color:var(--cta);text-decoration:underline;cursor:pointer;padding:0;font-size:.85rem;text-align:left}
.tasten{font-size:.75rem;color:var(--grey);border-top:1px solid var(--line);padding-top:8px}
.filmstreifen{display:flex;gap:8px;overflow-x:auto;padding:8px 18px 12px;scroll-snap-type:x proximity;scrollbar-width:thin}
.filmstreifen button{flex:0 0 auto;width:150px;padding:0;border:3px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;position:relative;overflow:hidden;scroll-snap-align:center}
.filmstreifen button img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#EEF2F6}
.filmstreifen button .nr{position:absolute;left:4px;top:4px;font-size:.7rem;font-weight:700;background:rgba(27,58,87,.85);color:#fff;padding:1px 6px;border-radius:4px}
.filmstreifen button[data-status="ok"]{border-color:var(--ok)}
.filmstreifen button[data-status="nicht"]{border-color:var(--nicht)}
.filmstreifen button[aria-current="true"]{outline:3px solid var(--cta);outline-offset:1px}
.filmstreifen .zeichen{position:absolute;right:4px;top:4px;font-size:.85rem;font-weight:700;width:22px;height:22px;border-radius:50%;display:none;align-items:center;justify-content:center;color:#fff}
.filmstreifen button[data-status="ok"] .zeichen{display:flex;background:var(--ok)}
.filmstreifen button[data-status="nicht"] .zeichen{display:flex;background:var(--nicht)}
.fuss{font-size:.75rem;color:var(--grey);text-align:center;padding:6px 18px 14px}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.anmeldung{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.karte{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px;max-width:420px;width:100%;box-shadow:0 8px 30px rgba(27,58,87,.08)}
.karte .marke-name{color:var(--cta)}
.karte h1{color:var(--navy);font-size:1.5rem;margin:6px 0 4px}
.karte p{margin:0 0 16px;color:var(--grey);font-size:.92rem}
.feld{display:block;margin-bottom:14px}
.feld span{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.feld input{font:inherit;width:100%;border:1px solid #B8C4D1;border-radius:8px;padding:11px 12px;color:var(--navy)}
.knopf-haupt{width:100%;background:var(--cta);color:#fff;border:none;border-radius:10px;padding:13px;font-weight:700;font-size:1rem;cursor:pointer}
.meldung{color:var(--nicht);background:var(--nicht-bg);border-radius:8px;padding:9px 12px;font-size:.9rem;margin-bottom:14px}
.meldung:empty{display:none}
@media (max-width:980px){.buehne-hinweis{display:none}.buehne-hinweis-kurz{display:block}.haupt{grid-template-columns:1fr;padding:12px 12px 6px}.urteil{position:static}.buehne{max-height:60vh}.filmstreifen{padding:8px 12px 10px}.filmstreifen button{width:120px}.kopf{padding:10px 12px 0}}