/* Page "Ausweis aufs Handy holen": the page of the integration guide, a
   heading per pass with the area of the widget below it. Only the page's own
   elements are styled, nothing inside the widget. The sign-in page keeps the
   look of the HELIXPASS self-service (white card on a
   light grey gradient). */
:root {
  color-scheme: light;
  --text: #0f172a;
  --leise: #475569;
  --leiser: #64748b;
  --schwarz: #131313;
  --schwarz-2: #3e3e3d;
  --grau: #f3f3f3;
  --rand: #e2e8f0;
  --feldrand: #d1d5db;
  --fokus: #3d4b5a;
  --fehler-bg: #fef2f2;
  --fehler-rand: #fecaca;
  --fehler: #991b1b;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #e9e8e8 100%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--text); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Card */
.karte {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
}
.anmeldung { display: flex; flex-direction: column; align-items: center; justify-content: center; }
h1 {
  margin: 0;
  text-align: center;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text);
}
.unter { margin: 8px 0 0; text-align: center; color: var(--leise); font-size: 16px; }

/* Button of the sign-in */
.knopf-haupt {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  color: #ffffff;
  background: linear-gradient(135deg, var(--schwarz) 0%, var(--schwarz-2) 100%);
}
.knopf-haupt:hover { background: linear-gradient(135deg, #504f4f 0%, #39393b 100%); }

/* Sign-in */
.login h1 { margin-top: 0; }
.login form { margin-top: 28px; }
.feld { margin: 0 0 20px; }
label { display: block; margin: 0 0 8px; font-weight: 500; }
input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--feldrand);
  border-radius: 12px;
  font-size: 16px;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
input:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 4px rgba(100, 116, 139, .15); }
.meldung {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--fehler-bg);
  border: 1px solid var(--fehler-rand);
  color: var(--fehler);
  font-size: 14px;
}

/* User menu (top right, as in the self-service). Opens on focus too, so it
   works before the page script runs. */
.nutzer { position: fixed; top: 20px; right: 20px; z-index: 10; }
.nutzer-knopf {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--leiser);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  cursor: pointer;
}
.nutzer-menue {
  position: absolute;
  top: 50px;
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
  visibility: hidden;
  opacity: 0;
}
.nutzer:not(.mit-skript):focus-within .nutzer-menue, .nutzer.offen .nutzer-menue { visibility: visible; opacity: 1; }
.nutzer-name { margin: 0; padding: 8px 10px; font-size: 14px; color: var(--leise); border-bottom: 1px solid var(--rand); }
.nutzer form { margin: 0; }
.nutzer-eintrag {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.nutzer-eintrag:hover { background: var(--grau); }


/* The page after the sign-in */
body.seite { display: block; padding: 24px 20px 48px; background: #ffffff; }
.blatt { max-width: 560px; margin: 0 auto; padding-top: 24px; }
.blatt h1 { margin: 0 0 32px; text-align: left; font-size: 24px; }
.blatt h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.ausweis + .ausweis { margin-top: 40px; }
.klein { margin: 24px 0 0; font-size: 13px; line-height: 1.5; color: var(--leiser); }
.klein + .klein { margin-top: 8px; }
.meldung-karte {
  margin: 0 0 12px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 8px;
  background: #fff7e6;
  border: 1px solid #f2c46d;
  text-align: center;
}

@media (max-width: 480px) {
  /* The user button scrolls with the page, next to the heading. */
  .nutzer { position: absolute; top: 12px; right: 12px; }
  .nutzer-knopf { width: 38px; height: 38px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
  .blatt { padding-top: 40px; }
  .blatt h1 { font-size: 22px; }
  body.anmeldung { padding: 0; background: #ffffff; justify-content: flex-start; }
  .karte { max-width: none; min-height: 100vh; padding: 16px 16px 24px; border-radius: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Widget-Bereich, gestaltete Fassung v2 ---- */
/* Auf sehr schmalen Handys (bis 360 px) wird der Eintrag im Nutzermenü flacher, damit der Google-Knopf,
   der dort proportional schrumpft, kein kleinerer Knopf als ein anderer auf der Seite ist (Googles Regel). */
@media (max-width: 360px) { .nutzer-eintrag { padding: 6px 10px; } }

/* Auf winzigen Schirmen (bis 320 px, zum Beispiel Außendisplay eines Faltgeräts) werden Nutzerknopf und Menüeintrag 32 px hoch,
   damit der dort proportional geschrumpfte Google-Knopf kein kleinerer Knopf als ein anderer auf der Seite ist (Googles Regel). */
@media (max-width: 320px) {
  .nutzer-knopf { width: 32px; height: 32px; }
  .nutzer-eintrag { padding: 4px 10px; }
}

/* Die Seite ist hell. Browser mit erzwungenem Dunkelmodus (Chrome Android „Auto Dark“, Samsung ab 24) lassen sie hell,
   weil die Wallet-Knöpfe nur schwarz auf hellem Grund erlaubt sind. */
:root { color-scheme: only light; }
/* Am Handy 16 px Seitenrand wie auf der Anmeldekarte; der Google-Knopf bekommt so ab 364 px Fensterbreite seine 48 px. */
@media (max-width: 480px) { body.seite { padding: 24px 16px 48px; } }

/* Seitenregeln rund um die Knopfzone (nicht Teil des Widget-Vorschlags). */
/* Die Ausweise trennt eine Haarlinie mit Luft, damit kein Knopf zum falschen Ausweis gelesen wird. */
.ausweis + .ausweis { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rand, #e2e8f0); }
/* Überschriften ohne Umbruchstelle (Zoom 300 % am Handy) brechen, statt die Seite waagrecht zu sprengen. */
.blatt h1, .blatt h2 { overflow-wrap: anywhere; }
/* Der schwebende Nutzerknopf würde bei 566 bis 597 px Fensterbreite das rechte Ende des Google-Knopfs überdecken; ab 600 px scrollt er mit. */
@media (max-width: 600px) { .nutzer { position: absolute; top: 12px; right: 12px; } }

/* Gestaltete Fassung v2 (30.10.2026): nur die Knöpfe des Widgets und ihr
   Umfeld, über die Haken .bereich und .hp-*. Grundlage ist die Variante, die
   zwei Richter unabhängig gewählt haben, ergänzt um Funde aus der Messung in
   Chromium, Firefox und WebKit (27 Geräteprofile) und aus fünf unabhängigen
   Prüfungen (Gerätematrix, Markenregeln, Barrierefreiheit, Störer, Recherche).
   Voraussetzung: .bereich ist ein Block oder ein Flex-Element mit Breite. */

/* Je Wallet eine Spalte: Abzeichen, darunter sein QR-Knopf; die Spalten stehen nebeneinander und brechen um, wenn der Platz fehlt.
   Solange die Knöpfe noch laden, hält der leere Bereich seine spätere Höhe frei (kleiner Layoutsprung). */
.bereich { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.bereich:empty { position: relative; min-height: 98px; }
/* Platzhalter, solange die Knöpfe laden: zwei graue Flächen in der Form der späteren Abzeichen (Apple links, Google rechts),
   leicht schimmernd, ohne Skript; sie verschwinden, sobald das Widget zeichnet oder die Seite eine Zeile einsetzt. */
.bereich:empty::before, .bereich:empty::after {
  content: ""; position: absolute; top: 0; height: 48px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%;
  animation: hp-laden 1.4s ease-in-out infinite;
}
.bereich:empty::before { left: 0; width: 153px; border-radius: 10px; }
.bereich:empty::after { left: 177px; width: 340px; max-width: calc(100% - 177px); border-radius: 24px; }
@keyframes hp-laden { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .bereich:empty::before, .bereich:empty::after { animation: none; }
}
.bereich .hp-badge-wrap { display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px; min-width: 0; max-width: 100%; }

/* Beide Grafiken gleich hoch, 48 px (Googles Mindestmaß), die Breite folgt dem Seitenverhältnis. Das Widget setzt inline
   width: auto, height: auto und max-width: 100 %; die Seite begrenzt nur die Höhe. Ist der Platz schmaler als der Google-Knopf
   (354 px bei 50 px), schrumpft Google proportional, wie im Widget selbst, und das Apple-Abzeichen schrumpft auf dieselbe Höhe,
   damit Google nie der kleinere Knopf ist. !important nur bei Apple, weil das Widget die Höhe inline setzt. */
.bereich .hp-badge img { max-height: 48px; object-fit: contain; object-position: left center; }
.bereich .hp-badge:not([data-wallet="GOOGLE"]) img { height: 48px !important; }

/* Sichtbarer Fokusring auch auf den Abzeichen (das Widget bringt keinen eigenen mit). */
.bereich .hp-badge:focus-visible { outline: 3px solid #3d4b5a; outline-offset: 3px; }

/* Der QR-Knopf ist eine leise Pille unter seinem Abzeichen: weiße Fläche, grauer Rand (4,8:1 auf Weiß), Seitenschrift,
   sichtbarer Fokus; langer Text (zum Beispiel nach Browser-Übersetzung) bricht um statt auszulaufen. */
.bereich .hp-qr-trigger {
  max-width: 100%; min-height: 32px; min-width: 48px; padding: 6px 14px;
  border: 1px solid #64748b; border-radius: 999px; background: #ffffff;
  color: #0f172a; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; letter-spacing: .02em;
  overflow-wrap: anywhere; cursor: pointer;
}
.bereich .hp-qr-trigger:hover { background: #f1f5f9; border-color: #475569; }
.bereich .hp-qr-trigger:focus-visible { outline: 3px solid #3d4b5a; outline-offset: 2px; }

/* Die Statuszeile unter dem Apple-Knopf (Live-Region des Widgets) bleibt im Barrierebaum: leer ohne Höhe statt display: none,
   mit Text bricht sie in der Breite ihrer Spalte um. */
.bereich .hp-access-status { width: 0; min-width: 100%; margin: 6px 0 0; font-size: .8125rem; line-height: 1.4; color: #475569; overflow-wrap: anywhere; }
.bereich .hp-access-status:empty { margin: 0 0 -2px; }

/* Der Safari-Hinweis nimmt die Breite seiner Spalte und bricht um; sein Linkfeld bekommt einen Rand mit 3:1 Kontrast. */
.bereich .hp-safari-hint { max-width: 100%; margin-top: 8px; font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.bereich .hp-safari-hint-link { width: 100%; max-width: 340px; border-color: #64748b; }

/* QR-Dialog des Widgets: der QR-Code darf nie höher sein als der sichtbare Teil der Karte (Handy quer), sonst ist er nicht
   scannbar. Gehört ins Widget (qr.js), bis dahin hier; am PC bleibt er 364 px. */
/* Die Karte des QR-Dialogs ist höchstens 420 px breit: so macht es die nächste Widget-Fassung (MR !259) selbst,
   das heutige Live-Widget nimmt 90 % der Fensterbreite und zeigt den Link ausgeschrieben, bis Jens ausrollt. */
.hp-overlay-card { max-width: min(90vw, 420px) !important; }
.hp-overlay-card .hp-qr-svg { width: min(364px, calc(100vh - 170px)) !important; width: min(364px, calc(100dvh - 170px)) !important; height: auto !important; max-width: 100%; }

/* Auf Geräten mit Finger (Handy, Tablet, Touch-Laptop) wird der QR-Knopf ein volles Tippziel. */
@media (any-pointer: coarse) {
  .bereich .hp-qr-trigger { min-height: 44px; min-width: 64px; }
}

/* Am Handy stehen die Spalten untereinander. Der rechte Rand des Widgets (8 px) entfällt, weil der Seitenrand (16 px)
   den Freiraum liefert; so bekommt Google die volle Breite und ab 364 px Fensterbreite die vollen 48 px.
   Apple und der QR-Knopf folgen der Höhe des Google-Knopfs, sobald er schrumpft (Google nie der kleinere Knopf).
   Formel für Browser ohne Container-Queries: Fensterbreite minus 32 px Seitenrand minus 17 px Reserve für eine Scrollleiste. */
@media (max-width: 480px) {
  .bereich { flex-direction: column; }
  .bereich:empty { min-height: 236px; }
  .bereich:empty::after { left: 0; top: 126px; width: 100%; max-width: 340px; }
  .bereich .hp-badge-wrap { margin-right: 0 !important; }
  .bereich .hp-badge:not([data-wallet="GOOGLE"]) img { height: min(48px, calc((100vw - 49px) * 50 / 354)) !important; }
  .bereich .hp-qr-trigger { min-height: min(44px, calc((100vw - 49px) * 50 / 354)); min-width: 64px; }
}

/* Browser mit Container-Queries (Chrome 105, Safari 16, Firefox 110, Samsung 20 und neuer) rechnen mit der echten Breite
   des Bereichs, auch bei Scrollleisten oder in schmalen Spalten; ältere Browser bleiben bei den Zeilen darüber.
   inline-size: 100 % hält den Bereich auch in einer Flex-Zeile oder Grid-Spalte offen (Containment setzt die Eigenbreite sonst auf 0). */
@supports (width: 1cqw) {
  .bereich { container-type: inline-size; inline-size: 100%; }
  .bereich .hp-badge:not([data-wallet="GOOGLE"]) img { height: min(48px, calc((100cqw - 8px) * 50 / 354)) !important; }
  @media (max-width: 480px) {
    .bereich .hp-badge:not([data-wallet="GOOGLE"]) img { height: min(48px, calc(100cqw * 50 / 354)) !important; }
    .bereich .hp-qr-trigger { min-height: min(44px, calc(100cqw * 50 / 354)); }
  }
}