/* =============================================================================================
   Cyber Breach – Spielerhandy (Einlass, Status, Teamfoto, QR-Falle, Datenreflexion, Wiedereinstieg)
   Stil: docs/STIL.md §4.4 (abgeleitet aus Korbis Smartphone_UI.html) – dunkles Glas auf Aurora, große Rundungen,
   Markenverlauf für „primär/an“, Inter / Chakra Petch (Kicker) / JetBrains Mono (Technik), Federbewegungen.
   Baut auf /app/shared/ui.css (lädt stil/stil.css) auf; Farben nur über Tokens, Schatten über --schatten-*/--glut-*.
   Hell/Dunkel folgt der Systemeinstellung (html.thema-auto). Kein Telefonrahmen, keine Statusleiste.
   Die Köderseite „RestartKey“ ist eine fremde Website (STIL R2, VORGABE) und behält ihre eigene Optik;
   nur die Spielleiste darüber steht im Hausstil.
   Ziel: 360–430 px breit, Tippflächen ≥ 44 px, keine waagerechte Scrollleiste.
   ============================================================================================= */

html, body { min-height: 100%; }
body { overflow-x: hidden; }

/* ---------------------------------------------------------------------------------- Bühne */
/* Seitengrund (STIL §2.3 Bühne) + Aurora nur oben (60 vh), fest. Inhalt liegt darüber. */
body.hy-seite { font: 400 15px/1.5 var(--ui); color: var(--t1); }
.hy-seite #wurzel { position: relative; z-index: 1; }
.hy-aurora { background: transparent; height: 64vh; inset: 0 0 auto 0;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,.55) 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,.55) 62%, transparent 100%); }
.hy-aurora .schicht.tp-licht { display: none; }
.hy-aurora .koernung { opacity: .32; }
@media (prefers-color-scheme: light) {
  .thema-auto:not(.dunkel) body.buehne-grund {
    background:
      radial-gradient(90rem 60rem at 20% -10%, rgba(123,67,151,.16), transparent 60%),
      radial-gradient(70rem 50rem at 85% 110%, rgba(220,36,48,.12), transparent 60%),
      #f1f1f6;
    background-attachment: fixed;
  }
  .thema-auto:not(.dunkel) body.buehne-grund::after { opacity: .25; }
  .thema-auto:not(.dunkel) .hy-aurora .schicht.tp-aurora { display: none; }
  .thema-auto:not(.dunkel) .hy-aurora .schicht.tp-licht { display: block; }
  .thema-auto:not(.dunkel) .hy-aurora .koernung { opacity: .18; }
  /* weiße Markenzeichen auf hellem Grund dunkel zeigen */
  .thema-auto:not(.dunkel) .hy-kopf img, .thema-auto:not(.dunkel) .hy-fuss img { filter: brightness(0) saturate(0); opacity: .82; }
}

.recht-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.recht-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------------------------------- Gerüst */
.hy { display: flex; flex-direction: column; gap: var(--a4); min-height: 100%; }
.hy-kopf { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 0 0; }
.hy-kopf .marke-zeichen { height: 28px; width: auto; }
.hy-kopf .marke-voll { height: 15px; width: auto; opacity: .9; }
.hy-kopf .hy-verbindung { margin-left: auto; }
.hy-inhalt { display: flex; flex-direction: column; gap: var(--a4); flex: 1; animation: aufsteigen .5s var(--weich); }
.hy-fuss { margin-top: auto; padding-top: var(--a6); display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 10.5px/1.4 var(--anz); letter-spacing: .22em; text-transform: uppercase; color: var(--t3); text-align: center; }
.hy-fuss img { height: 14px; width: auto; opacity: .7; }

/* Überschriften (STIL §4.4: Titel 28/700 −.02em, darunter 15/1.5 --t2) */
.hy h1.titel { font: 700 28px/1.15 var(--ui); letter-spacing: -.02em; margin: 2px 0 0; }
.hy h2.titel { font: 700 19px/1.25 var(--ui); letter-spacing: -.015em; margin: 0; }
.hy p { margin: 0; }
/* Verlaufstitel mit den Text-Tönen der Marke (dunkel #B98AE0→#FF6B76, hell #7B4397→#C81E1E), damit der Titel auf
   beiden Gründen genug Kontrast hat; der Flächenverlauf (--verlauf) bleibt Knöpfen und Kanten vorbehalten */
.hy .titel-verlauf { background: linear-gradient(135deg, var(--ma-text), var(--mb-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hy .kicker { color: var(--t3); font-size: 11px; }
.hell .hy .codekasten .kicker { color: #575760; }
@media (prefers-color-scheme: light) { .thema-auto:not(.dunkel) .hy .codekasten .kicker { color: #575760; } }
.lead { font-size: 15px; line-height: 1.5; color: var(--t2); }
.fein { font-size: 13px; line-height: 1.55; color: var(--t3); }
.hy a { color: var(--ma-text); text-underline-offset: 3px; }
.hy a.knopf { color: var(--t1); text-decoration: none; }
.hy a.knopf.primaer { color: #fff; }
.hy .knopf svg { width: 19px; height: 19px; }
.hy .knopf { text-align: center; }

/* Karten: Glas auf Aurora (STIL §4.4 „.glas-1 r 22“) */
.hy .karte { padding: 18px; border-radius: var(--r-xl); background: var(--glas1); border-color: var(--glas1-rand);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--schatten-karte); }
.hy .karte.flach { background: var(--f1); border-color: var(--rand); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hy .karte.kante { padding-left: 22px; }
.hy .karte > * + * { margin-top: 10px; }
.hy .karte.liste > * + * { margin-top: 0; }
.hy .karte .knopf.voll + .knopf.voll { margin-top: var(--a2); }
.hy .karte.gefahr { border-color: rgba(255,95,82,.35);
  background: radial-gradient(120% 90% at 0% 0%, rgba(220,36,48,.25), transparent 60%), var(--glas1); }
.karten-kopf { display: flex; align-items: center; gap: 12px; }
.karten-kopf .tx { flex: 1; min-width: 0; }
.karten-kopf .tx b { display: block; font: 620 15px/1.3 var(--ui); color: var(--t1); }
.karten-kopf .tx span { display: block; font-size: 12.5px; color: var(--t3); margin-top: 1px; }

/* Rückmeldungen */
.stoerung { position: relative; overflow: hidden; border: 1px solid rgba(255,95,82,.35); background: var(--bad-flaeche); color: var(--t1);
  border-radius: var(--r-l); padding: 13px 16px 13px 19px; font-size: 14.5px; line-height: 1.45; }
.stoerung::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bad); }
.offline-band { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 50; align-self: center;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pille);
  background: var(--glas-toast); border: 1px solid rgba(255,176,32,.45); color: var(--t1); box-shadow: var(--schatten-toast);
  font: 560 13px/1.35 var(--ui); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: pop .35s var(--feder); }
.offline-band::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--warn); box-shadow: 0 0 8px var(--warn);
  animation: cb-puls 1.2s ease-in-out infinite; }
.hinweis-kasten { position: relative; overflow: hidden; border: 1px solid var(--rand); background: var(--warn-flaeche); color: var(--t1);
  border-radius: var(--r-l); padding: 13px 16px 13px 19px; font-size: 14px; line-height: 1.45; }
.hinweis-kasten::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
.hinweis-kasten[hidden] { display: none; }
.hinweis-kasten b { color: var(--t1); }
.merken { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 14px 19px;
  border-radius: var(--r-l); background: var(--f1); border: 1px solid var(--rand); font-size: 13.5px; line-height: 1.5; color: var(--t2); }
.merken::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--verlauf-kante); }
.merken > svg { width: 20px; height: 20px; flex: none; color: var(--ma-text); margin-top: 1px; }
.merken b { color: var(--t1); font-weight: 620; }

/* Ladeanzeige */
.hy .warteschleier.dezent { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }

/* ---------------------------------------------------------------------------------- Formular */
.formular { display: flex; flex-direction: column; gap: var(--a4); }
.feld .pflicht { color: var(--mb-text); font-weight: 700; }
.feld .optional { font-weight: 450; color: var(--t3); }
.meldung-oben:empty { display: none; }

/* Case-Zuordnung (feste Unit aus ?u=) */
.einheit-zeile { display: flex; align-items: center; gap: 13px; padding: 12px 12px 12px 14px; border-radius: var(--r-xl);
  background: var(--glas1); border: 1px solid var(--glas1-rand); box-shadow: var(--schatten-karte);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.einheit-zeile .symbolkachel { --a: #8e9bb0; --b: #3b4456; }
.einheit-zeile > div { min-width: 0; }
.einheit-zeile .fein { font-size: 12px; }
.einheit-zeile b { display: block; font: 700 18px/1.2 var(--ui); letter-spacing: -.01em; overflow-wrap: anywhere; }
.einheit-zeile .knopf { margin-left: auto; flex: none; }

/* Zwei freiwillige Zwecke: Glaskarten mit Datenschutz-Zeilen (STIL §4.4) */
.zweck { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--r-xl);
  background: var(--glas1); border: 1px solid var(--glas1-rand); box-shadow: var(--schatten-karte);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.zweck > h3 { margin: 0; display: flex; align-items: center; gap: 10px; font: 620 15px/1.3 var(--ui); letter-spacing: -.005em; text-transform: none; color: var(--t1); }
.zweck > h3 .symbolkachel { width: 32px; height: 32px; border-radius: 10px; }
.zweck > h3 .symbolkachel svg { width: 17px; height: 17px; }
.zweck > h3 .pille { margin-left: auto; }
.zweck dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); border-radius: var(--r-m); background: var(--f1);
  border: 1px solid var(--rand); overflow: hidden; }
.zweck dt, .zweck dd { padding: 10px 12px; border-bottom: 1px solid var(--rand); }
.zweck dt { font: 600 12px/1.45 var(--ui); color: var(--t3); padding-right: 4px; }
.zweck dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--t1); }
.zweck dt:last-of-type, .zweck dd:last-of-type { border-bottom: 0; }
.einwilligungstext { margin: 0; position: relative; overflow: hidden; padding: 11px 14px 11px 17px; border-radius: var(--r-m);
  background: var(--f1); border: 1px solid var(--rand); font-size: 13.5px; line-height: 1.5; color: var(--t2); }
.einwilligungstext::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--verlauf-kante); }

/* Einwilligung als Schalter statt Kontrollkästchen am Zeilenanfang (STIL §4.4). Das Eingabeelement bleibt ein echtes
   Kontrollkästchen (Formular, Tastatur, Vorleser), sieht aber wie der Schalter aus §3.8 aus. */
.hy .wahl.als-schalter { align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-m); background: var(--f1);
  border: 1px solid var(--rand); min-height: 56px; }
.hy .wahl.als-schalter span { flex: 1; font: 560 14px/1.4 var(--ui); color: var(--t1); }
.hy .wahl.als-schalter input[type=checkbox] { order: 2; position: relative; width: 47px; height: 28px; border-radius: 15px; flex: none;
  background: var(--f2); border: 1px solid var(--rand); transition: background .28s var(--weich); display: block; }
.hy .wahl.als-schalter input[type=checkbox]::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 21px; height: 21px;
  border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transform: none; transition: transform .28s var(--feder); }
.hy .wahl.als-schalter input[type=checkbox]:checked { background: var(--verlauf); border-color: transparent; }
.hy .wahl.als-schalter input[type=checkbox]:checked::after { transform: translateX(19px); }
@media (prefers-color-scheme: light) {
  .thema-auto:not(.dunkel) .hy .wahl.als-schalter input[type=checkbox]:not(:checked) { background: rgba(0,0,0,.14); border-color: rgba(0,0,0,.12); }
}
.hy .feld.fehler .wahl.als-schalter { border-color: var(--bad); }

/* Ja/Nein als Segmente (runde Optionen wie .kontrolle) */
.wahlgruppe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }
.wahlgruppe label { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: var(--r-m);
  border: 1px solid var(--rand); background: var(--f1); font: 600 14.5px/1.3 var(--ui); cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s var(--feder); }
.wahlgruppe label:active { transform: scale(.97); }
.wahlgruppe input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border-radius: 50%;
  border: 1.6px solid var(--t3); display: inline-grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.wahlgruppe input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .2s var(--feder); }
.wahlgruppe input:checked { background: var(--verlauf); border-color: transparent; }
.wahlgruppe input:checked::after { transform: scale(1); }
.wahlgruppe label:has(input:checked) { border-color: var(--ma-text); background: rgba(123,67,151,.18); }
.unterfelder { display: flex; flex-direction: column; gap: var(--a3); padding-top: 2px; animation: aufsteigen .4s var(--weich); }

/* Wiedereinstieg (aufklappbare Glaskarte) */
details.wiedereinstieg { padding: 0; overflow: hidden; }
details.wiedereinstieg > summary { min-height: 60px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 12px 16px; font: 620 15px/1.3 var(--ui); color: var(--t1); }
details.wiedereinstieg > summary::-webkit-details-marker { display: none; }
details.wiedereinstieg > summary .symbolkachel { --a: #9b59d0; --b: #5b2a86; }
details.wiedereinstieg > summary .tx { flex: 1; min-width: 0; }
details.wiedereinstieg > summary .pfeil { width: 18px; height: 18px; color: var(--t3); transition: transform .3s var(--feder); flex: none; }
details.wiedereinstieg[open] > summary .pfeil { transform: rotate(90deg); }
details.wiedereinstieg > .wiedereinstieg-inhalt { padding: 2px 16px 18px; }
.hy .karte.wiedereinstieg > * + * { margin-top: 0; }
.wiedereinstieg .eingabe.code { font: 300 34px/1 var(--ui); letter-spacing: .5em; padding-left: calc(16px + .5em); min-height: 64px; }
.wiedereinstieg .fein[aria-live] { min-height: 1em; }

/* ---------------------------------------------------------------------------------- Großer Code (Spielercode, Freigabecode) */
.codekasten { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 18px 24px;
  border-radius: var(--r-2xl); overflow: hidden; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, rgba(123,67,151,.35), transparent 62%), var(--glas1);
  border: 1px solid var(--glas1-rand); box-shadow: var(--schatten-karte), 0 0 0 1px rgba(185,138,224,.08) inset;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); animation: pop .45s var(--feder); }
.codekasten::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--verlauf3); }
.codekasten .kicker { justify-content: center; }
.codekasten .code { font: 250 clamp(56px, 18vw, 68px)/1 var(--ui); letter-spacing: .08em; padding-left: .08em; font-variant-numeric: tabular-nums;
  color: var(--t1); margin: 4px 0 2px; }
.codekasten .code.sechs { font-size: clamp(44px, 13.4vw, 54px); letter-spacing: .06em; padding-left: .06em; }
.codekasten .name { font: 620 16px/1.3 var(--ui); overflow-wrap: anywhere; color: var(--t1); }
.codekasten .unit { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pille);
  background: var(--f1); border: 1px solid var(--rand); font: 600 12.5px/1.25 var(--ui); color: var(--t2); }
.codekasten .unit:empty { display: none; }

/* Korbi E7/E24: Zuteilung „Ihr spielt an Case 2“ – große Karte mit Verlaufskante wie der Codekasten */
.zuteilung-karte { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 18px 20px 20px; overflow: hidden;
  border-radius: var(--r-2xl); background: radial-gradient(110% 90% at 0% 0%, rgba(220,36,48,.22), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(123,67,151,.28), transparent 62%), var(--glas1);
  border: 1px solid var(--glas1-rand); box-shadow: var(--schatten-karte);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.zuteilung-karte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--verlauf-kante); }
.zuteilung-karte.neu { animation: pop .45s var(--feder); }
.zuteilung-karte .symbolkachel { --a: #ff5f6d; --b: #7b4397; width: 52px; height: 52px; border-radius: 15px; flex: none; }
.zuteilung-karte .symbolkachel svg { width: 26px; height: 26px; }
.zuteilung-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zuteilung-satz { font: 500 15px/1.3 var(--ui); color: var(--t2); }
.zuteilung-name { font: 250 clamp(34px, 11vw, 44px)/1.05 var(--ui); letter-spacing: -.02em; color: var(--t1); overflow-wrap: anywhere; }
.zuteilung-karte .fein b { color: var(--t1); font-weight: 620; }

/* ---------------------------------------------------------------------------------- Status */
.status-liste .zeile .rechts { font-size: 13px; color: var(--t2); text-align: right; max-width: 55%; white-space: normal; }
.status-liste .zeile .sym { background: var(--f2); }
.hy .fallenkarte .status-pille.bad { color: #fff; background: #9f1920; }
.hell .status-liste .status-pille.ok { color: #086b31; }
@media (prefers-color-scheme: light) { .thema-auto:not(.dunkel) .status-liste .status-pille.ok { color: #086b31; } }
.fallenkarte .fallen-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fallenkarte .seit { font: 500 12.5px/1 var(--mono); color: var(--t3); font-variant-numeric: tabular-nums; }
.fallenkarte .abzug { margin-left: auto; font: 250 34px/1 var(--ui); letter-spacing: -.03em; color: var(--mb-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fallenkarte .abzug small { font: 600 11px/1 var(--anz); letter-spacing: .18em; text-transform: uppercase; color: var(--t3); margin-left: 4px; }
.fallenkarte .text-dim { font-size: 14px; line-height: 1.5; }
.ende-karte { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ende-karte .symbolkachel { --a: #3ddc84; --b: #0a8f3c; }

/* ---------------------------------------------------------------------------------- Teamfoto (Sucher wie die Kamera-App) */
.foto-buehne { position: relative; border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: radial-gradient(60% 70% at 25% 20%, rgba(123,67,151,.45), transparent 65%),
              radial-gradient(55% 60% at 85% 90%, rgba(220,36,48,.32), transparent 65%), #0b0b12;
  border: 1px solid var(--glas1-rand); box-shadow: var(--schatten-karte); color: #fff; }
.foto-buehne img, .foto-buehne video { width: 100%; height: 100%; object-fit: cover; display: block; animation: einblenden .35s ease; }
.foto-buehne .ecken { position: absolute; inset: 14px; pointer-events: none; opacity: .85;
  background:
    linear-gradient(#fff,#fff) left top / 26px 2.5px no-repeat, linear-gradient(#fff,#fff) left top / 2.5px 26px no-repeat,
    linear-gradient(#fff,#fff) right top / 26px 2.5px no-repeat, linear-gradient(#fff,#fff) right top / 2.5px 26px no-repeat,
    linear-gradient(#fff,#fff) left bottom / 26px 2.5px no-repeat, linear-gradient(#fff,#fff) left bottom / 2.5px 26px no-repeat,
    linear-gradient(#fff,#fff) right bottom / 26px 2.5px no-repeat, linear-gradient(#fff,#fff) right bottom / 2.5px 26px no-repeat; }
.foto-leer { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.45;
  text-align: center; padding: 28px; max-width: 290px; }
.foto-leer svg { width: 44px; height: 44px; opacity: .8; }

/* Bedienleiste wie Kamera-App: links Galerie, Mitte Auslöser (70-px-Ring), rechts Live-Kamera */
.kamera-leiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding: 4px 0 2px; }
.kamera-leiste > * { justify-self: center; }
.kl-knopf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; cursor: pointer;
  font: 560 12px/1.25 var(--ui); color: var(--t2); text-align: center; background: none; border: 0; padding: 0; }
.kl-knopf .rund { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--f2); border: 1px solid var(--rand);
  color: var(--t1); transition: transform .18s var(--feder), background .2s; }
.kl-knopf .rund svg { width: 22px; height: 22px; }
.kl-knopf:active .rund { transform: scale(.88); }
.kl-knopf.ausloeser { color: var(--t1); font-weight: 620; }
.kl-knopf.ausloeser .rund { width: 76px; height: 76px; background: transparent; border: 4px solid var(--t1); padding: 5px; }
.kl-knopf.ausloeser .rund::before { content: ""; width: 100%; height: 100%; border-radius: 50%; background: var(--verlauf); box-shadow: var(--glut-knopf); }
.kl-knopf.ausloeser:active .rund { transform: scale(.9); }
.kl-knopf input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; width: 100%; height: 100%; }
.kl-knopf:focus-within .rund { outline: 2px solid var(--ma-text); outline-offset: 3px; }
.kl-knopf:disabled { opacity: .45; cursor: not-allowed; }
.datei-knopf { position: relative; overflow: hidden; }
.datei-knopf input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ladebalken { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-l); background: var(--f1); border: 1px solid var(--rand); }
.ladebalken .balken { height: 8px; border-radius: 4px; }
.ladebalken .reihe { justify-content: space-between; font-size: 13.5px; color: var(--t2); }
.ladebalken .zahl { font: 500 13px/1 var(--mono); color: var(--t1); }
.foto-weitere { display: flex; flex-direction: column; gap: var(--a2); }

/* ---------------------------------------------------------------------------------- Datenreflexion */
.profil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profil .wert { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-l); min-width: 0;
  background: var(--glas1); border: 1px solid var(--glas1-rand); box-shadow: var(--schatten-karte);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); animation: aufsteigen .5s var(--weich) both; }
.profil .wert:first-child { grid-column: 1 / -1; }
.profil .wert:nth-child(2) { animation-delay: .06s; } .profil .wert:nth-child(3) { animation-delay: .12s; }
.profil .wert span { font: 600 10.5px/1.2 var(--anz); letter-spacing: .2em; text-transform: uppercase; color: var(--t3); }
.profil .wert b { font: 300 26px/1.2 var(--ui); letter-spacing: -.01em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.profil .wert b.fehlt { font: italic 450 15px/1.3 var(--ui); color: var(--t3); }
.profil .bild { grid-column: 1 / -1; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--glas1-rand); background: #0b0b12;
  aspect-ratio: 4 / 3; box-shadow: var(--schatten-karte); animation: aufsteigen .5s var(--weich) .18s both; }
.profil .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loeschuhr { display: flex; flex-direction: column; gap: 10px; }
.loeschuhr .countdown { font: 200 64px/1 var(--ui); letter-spacing: -.04em; }
.loeschuhr .einheit { font: 600 11px/1.2 var(--anz); color: var(--t3); letter-spacing: .22em; text-transform: uppercase; }
.loeschuhr .uhr-zeile { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.loeschuhr p { font-size: 14px; line-height: 1.5; color: var(--t2); }
.loeschuhr p b { color: var(--t1); white-space: nowrap; font-weight: 620; }
.loeschuhr .balken { height: 6px; }

/* Dialog im Stil (STIL §3.10), IDs bleiben für Tests und Vorleser */
.hy-dialog .dialog-kopf .kicker { color: var(--mb-text); }

/* =============================================================================================
   QR-Falle: Spielleiste (Hausstil, immer dunkel) + Köderseite „RestartKey“ (Fremdoptik, R2)
   ============================================================================================= */
body.falle-seite { background: #fff; color: #111; }
/* Spielleiste und Spielhilfe sind immer dunkel (.dunkel). Die Rückmeldefarben setzt .dunkel im Stilsystem nicht mit
   zurück – im Hell-Modus des Systems blieben sonst die dunklen Hell-Töne auf dunklem Glas (Wunsch an stil-basis). */
.spielleiste.dunkel, .spielhilfe.dunkel {
  --ok: #3ddc84; --warn: #FFB020; --bad: #ff5f52; --info: #5ab9ff;
  --ok-text: #3ddc84; --warn-text: #FFB020; --bad-text: #ff5f52; --info-text: #5ab9ff;
  --ma-text: #B98AE0; --mb-text: #FF6B76;
}
body.falle-seite #wurzel { max-width: none; padding: 0; }
body.falle-seite .hy { gap: 0; min-height: 100dvh; }
.spielleiste { position: sticky; top: 0; z-index: 40; color: var(--t1); font-family: var(--ui);
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 11px max(16px, env(safe-area-inset-left));
  background: radial-gradient(90% 140% at 0% 0%, rgba(123,67,151,.45), transparent 60%), radial-gradient(70% 120% at 100% 0%, rgba(220,36,48,.28), transparent 60%), rgba(10,10,17,.9);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); }
.spielleiste::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--verlauf3); }
.spielleiste .reihe1 { display: flex; align-items: center; gap: 9px; min-height: 30px; }
.spielleiste .reihe1 img { height: 22px; width: auto; }
.spielleiste .spiel { font: 600 10.5px/1 var(--anz); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.spielleiste .pille { margin-left: auto; }
.spielleiste .pille svg { width: 13px; height: 13px; }
.spielleiste .reihe2 { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.spielleiste .wer { font: 620 15.5px/1.3 var(--ui); overflow-wrap: anywhere; min-width: 0; }
.spielleiste .wer small { color: rgba(255,255,255,.62); font-weight: 500; font-size: 14px; }
.spielleiste .abzug { margin-left: auto; font: 560 12.5px/1 var(--ui); color: rgba(255,255,255,.62); white-space: nowrap; }
.spielleiste .abzug b { font: 300 22px/1 var(--ui); letter-spacing: -.02em; color: var(--mb-text); font-variant-numeric: tabular-nums; margin-left: 3px; }
.spielleiste .abzug.null b { color: #fff; }
.spielhilfe { color: var(--t1); padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); background: #0e0d15;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.spielhilfe:empty { display: none; }
.spielhilfe details { padding: 2px 0; }
.spielhilfe summary { min-height: 52px; display: flex; align-items: center; gap: 12px; cursor: pointer; font: 600 14.5px/1.3 var(--ui); color: #fff; list-style: none; }
.spielhilfe summary::-webkit-details-marker { display: none; }
.spielhilfe summary .symbolkachel { --a: #5ab9ff; --b: #0a6cf1; }
.spielhilfe summary .tx { flex: 1; min-width: 0; }
.spielhilfe summary .pfeil { width: 18px; height: 18px; color: rgba(255,255,255,.5); transition: transform .3s var(--feder); flex: none; }
.spielhilfe details[open] summary .pfeil { transform: rotate(90deg); }
.spielhilfe .hilfetext { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); padding: 2px 0 16px; display: flex; flex-direction: column; gap: 10px;
  animation: aufsteigen .4s var(--weich); }
.spielhilfe .hilfetext ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-radius: var(--r-m); overflow: hidden;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); counter-reset: schritt; }
.spielhilfe .hilfetext ol li { position: relative; padding: 11px 14px 11px 46px; border-bottom: 1px solid rgba(255,255,255,.08); counter-increment: schritt; }
.spielhilfe .hilfetext ol li:last-child { border-bottom: 0; }
.spielhilfe .hilfetext ol li::before { content: counter(schritt); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--verlauf); color: #fff; font: 700 11.5px/1 var(--ui); }
.spielhilfe .hilfetext b { color: #fff; font-weight: 620; }
.spielhilfe .linkzeile { display: flex; gap: 8px; align-items: stretch; }
.spielhilfe .linkzeile input { flex: 1; min-width: 0; min-height: 48px; border-radius: var(--r-m); border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.065); color: #fff; padding: 0 12px; font: 500 12.5px/1 var(--mono); }
.spielhilfe .linkzeile .knopf { min-height: 48px; padding: 0 16px; font-size: 14px; flex: none; }
.spielhilfe .knopf { min-height: 48px; }
.spielhilfe .fallen-ergebnis { padding: 16px 0 14px; display: flex; gap: 14px; align-items: flex-start; }
.spielhilfe .fallen-ergebnis .symbolkachel { --a: #3ddc84; --b: #0a8f3c; }
.spielhilfe .fallen-ergebnis.grau .symbolkachel { --a: #6b7684; --b: #2b3038; }
.spielhilfe .fallen-ergebnis b#beendet-grund { display: block; font: 650 16px/1.3 var(--ui); color: #fff; }
.spielhilfe .fallen-ergebnis p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); margin-top: 4px; }
.spielhilfe .unten { padding-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.spielhilfe .karte { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.09); }
.spielhilfe .merken { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.09); color: rgba(255,255,255,.75); }
.spielhilfe .merken b { color: #fff; }
.spielhilfe .stoerung { margin: 12px 0; }

/* Köderseite: glaubwürdige fremde Website (hell, eigene Marke, Systemschrift) – bewusst NICHT im Hausstil */
.rk { color-scheme: light; flex: 1; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #111; background: #fff; display: flex; flex-direction: column; }
.rk-kopf { display: flex; align-items: center; gap: 10px; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid #E5E7EB; background: #fff; position: relative; }
.rk-logo { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(160deg, #DC2626, #991B1B); color: #fff; display: grid; place-items: center; flex: none;
  box-shadow: 0 2px 6px rgba(153,27,27,.3); }
.rk-logo svg { width: 20px; height: 20px; }
.rk-name b { display: block; font: 800 16px/1.15 system-ui, sans-serif; color: #7F1D1D; letter-spacing: -.01em; }
.rk-name span { font: 600 10.5px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; }
.rk-menueknopf { margin-left: auto; min-width: 48px; min-height: 48px; border-radius: 10px; border: 1px solid #E5E7EB; background: #fff; color: #111; cursor: pointer; display: grid; place-items: center; }
.rk-menueknopf svg { width: 22px; height: 22px; }
.rk-menue { position: absolute; right: 12px; top: 60px; z-index: 30; min-width: 230px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.18); overflow: hidden; display: flex; flex-direction: column; }
.rk-menue button { min-height: 50px; border: 0; background: #fff; text-align: left; padding: 0 16px; font: 500 15px/1 system-ui, sans-serif; color: #111; cursor: pointer; border-bottom: 1px solid #F3F4F6; }
.rk-menue button:last-child { border-bottom: 0; }
.rk-menue button:disabled { color: #9CA3AF; cursor: not-allowed; }
.rk-menue button[aria-current="page"] { color: #B91C1C; font-weight: 700; }
.rk-inhalt { padding: 20px max(16px, env(safe-area-inset-right)) 26px max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 16px; }
.rk h1 { font: 800 23px/1.2 system-ui, sans-serif; margin: 0; color: #111; letter-spacing: -.01em; }
.rk p { margin: 0; color: #4B5563; font-size: 15px; line-height: 1.5; }
.rk-balken { height: 14px; border-radius: 7px; background: #F3F4F6; overflow: hidden; border: 1px solid #E5E7EB; }
.rk-balken i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--anteil, 0)); background: linear-gradient(90deg, #B91C1C, #EF4444); transition: transform .6s linear; }
.rk-prozent { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rk-prozent b { font: 800 34px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; color: #B91C1C; }
.rk-prozent span { font-size: 13px; color: #6B7280; }
.rk-schritte { list-style: none; margin: 0; padding: 12px 14px; border: 1px solid #E5E7EB; border-radius: 12px; background: #FAFAFA; display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.4 ui-monospace, Menlo, Consolas, monospace; color: #374151; }
.rk-schritte li::before { content: "✓ "; color: #15803D; }
.rk-schritte li.laeuft::before { content: "… "; color: #B91C1C; }
.rk-karte { border: 1px solid #E5E7EB; border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.rk-verbindung { display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 12px; border-radius: 10px; border: 1px solid #E5E7EB; cursor: pointer; background: #fff; }
.rk-verbindung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #B91C1C; flex: none; }
.rk-verbindung b { display: block; font: 700 15px/1.3 system-ui, sans-serif; color: #111; overflow-wrap: anywhere; }
.rk-verbindung small { display: block; color: #6B7280; font-size: 13px; margin-top: 2px; }
.rk-verbindung:has(input:checked) { border-color: #B91C1C; background: #FEF2F2; }
.rk-knopf { min-height: 50px; border-radius: 10px; border: 0; background: #B91C1C; color: #fff; font: 700 16px/1 system-ui, sans-serif; cursor: pointer; padding: 0 18px; width: 100%; }
.rk-knopf:disabled { background: #E5E7EB; color: #4B5563; cursor: not-allowed; }   /* gesperrt: lesbar (≈ 6:1), klar als „noch nicht“ */
.rk-knopf-platz { display: flex; flex-direction: column; gap: 6px; }
.rk-knopf-grund { color: #4B5563; font-size: 13px; text-align: center; }
.rk-knopf-grund[hidden] { display: none; }
.rk-knopf.hell { background: #fff; color: #374151; border: 1px solid #D1D5DB; }
.rk-hinweis { border-radius: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; }
.rk-hinweis.warnung { background: #FFFBEB; border: 1px solid #FCD34D; color: #78350F; }
.rk-hinweis.erfolg { background: #F0FDF4; border: 1px solid #86EFAC; color: #14532D; }
.rk-hinweis.fehler { background: #FEF2F2; border: 1px solid #FCA5A5; color: #7F1D1D; }
.rk-fuss { margin-top: auto; padding: 14px 16px 22px; border-top: 1px solid #F3F4F6; font: 400 11.5px/1.5 system-ui, sans-serif; color: #6B7280; }
.rk-ende { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 8px; }
.rk-ende .symbol { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #F3F4F6; border: 2px solid #D1D5DB; color: #6B7280; }
.rk-ende .symbol svg { width: 30px; height: 30px; }
.rk-dialog { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(17,24,39,.55); }
.rk-dialog > div { width: min(420px, 100%); background: #fff; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.rk-dialog h2 { margin: 0; font: 800 18px/1.3 system-ui, sans-serif; color: #111; }
.rk-dialog .knopfzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 370px) {
  .hy h1.titel { font-size: 25px; }
  .wahlgruppe { grid-template-columns: 1fr; }
  .spielleiste .abzug b { font-size: 20px; }
  .kl-knopf { min-width: 64px; }
}

/* Seite genau bildschirmhoch (Fußzeile unten, kein unnötiges Scrollen) */
#wurzel.handyspalte { min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; }
#wurzel.handyspalte > .hy { flex: 1 0 auto; min-height: 0; }

/* E82/H2: Ergebnis zum Mitnehmen, im selben Glasstil wie Einlass und Status. */
#ergebnis .karte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hy-ergebnis-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 0; }
.hy-ergebnis-zahlen > div { display: flex; flex-direction: column; gap: 4px; }
.hy-ergebnis-zahlen strong { font: 700 38px/1 var(--anz); }
.hy-ergebnis-zahlen span { color: var(--t2); font-size: 13px; }
.hy-ergebnis-foto img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.hy-ergebnis-platzhalter { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 14px;
  border: 1px dashed var(--rand); border-radius: 12px; text-align: center; font-size: 13px; }
.hy-ergebnis-platzhalter svg { width: 28px; height: 28px; }
.hy-phishing-adresse { display: flex; flex-direction: column; gap: 6px; padding: 12px;
  background: var(--glas); border: 1px solid var(--rand); border-radius: 10px; }
.hy-phishing-text { font-family: var(--mono); font-size: 15px; overflow-wrap: anywhere; }
.hy-phishing-text mark { color: #66142d; background: #ffe2aa; text-decoration: underline; font-weight: 700; }
#ergebnis ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.5; }
#ergebnis table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#ergebnis th, #ergebnis td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--rand); overflow-wrap: anywhere; }
#ergebnis th:last-child, #ergebnis td:last-child { text-align: right; width: 84px; }