/* Page "Ausweis aufs Handy holen", in the look of the HELIXPASS self-service
   with the h_da theme (self-service.css, themes/hda/admin-theme.css): a
   white card on a light grey gradient, row tiles with icon, title and
   chevron, black as the only accent.
   The page styles only its own elements. Three rules reach into the widget
   and are marked as such: the badge height (both badges 50 px high, the
   aspect ratio kept), the clear space around it, and the QR code centred in
   the widget's dialog. */
:root {
  color-scheme: light;
  --text: #0f172a;
  --leise: #475569;
  --leiser: #64748b;
  --schwarz: #131313;
  --schwarz-2: #3e3e3d;
  --grau: #f3f3f3;
  --rand: #e2e8f0;
  --feldrand: #d1d5db;
  --aus: #b8bec7;
  --fokus: #3d4b5a;
  --fehler-bg: #fef2f2;
  --fehler-rand: #fecaca;
  --fehler: #991b1b;
  --hinweis-bg: #f8fafc;
}
* { 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; }
h1[tabindex="-1"]:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic, .gross {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ic { width: 20px; height: 20px; }
.gross { width: 44px; height: 44px; stroke-width: 2.2; }

/* 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);
}
.seite, .anmeldung { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* The card keeps its top edge from view to view instead of jumping with
   its height. */
.seite { justify-content: flex-start; padding-top: clamp(20px, 9vh, 96px); }
.logo { display: block; height: 40px; width: auto; }
h1 {
  margin: 0;
  text-align: center;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text);
}
.unter, .frage { margin: 8px 0 0; text-align: center; color: var(--leise); font-size: 16px; }

/* Buttons of this page */
.knopf-haupt, .knopf-zweit {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.knopf-haupt {
  width: 100%;
  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%); }
.knopf-zweit { border: 1px solid var(--feldrand); background: #ffffff; }
.knopf-zweit:hover { background: var(--grau); }

/* Sign-in */
.login .logo { margin: 0 0 24px; }
.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); }

/* Wizard frame */
.assistent { position: relative; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.schritt[hidden] { display: none !important; }
.zurueck-zeile { min-height: 36px; margin: 12px 0 4px; display: flex; align-items: center; }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  margin-left: -6px;
  padding: 4px 10px 4px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--leise);
  font-size: 15px;
  cursor: pointer;
}
.zurueck:hover { color: var(--text); background: var(--grau); }
/* The pass chosen before, as a small chip below the heading. */
.gewaehlt { display: table; margin: 10px auto 0; padding: 3px 12px 3px 10px; border-radius: 999px; background: var(--grau); color: var(--text); font-size: 14px; font-weight: 600; }
.gewaehlt::before { content: "\2713"; margin-right: 6px; }
.gewaehlt:empty { display: none; }

/* Progress: three points, icons inside; done ones turn into a tick. */
.fortschritt { display: flex; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; }
.fortschritt li { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; position: relative; color: var(--aus); }
.fortschritt li + li::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 50%;
  width: calc(100% - 32px);
  margin-right: 16px;
  height: 2px;
  background: currentColor;
}
.punkt {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #ffffff;
}
.punkt .ic { width: 17px; height: 17px; }
.punkt .haken { display: none; }
.was { font-size: 12px; line-height: 1; font-weight: 600; color: var(--leiser); }
.fortschritt li.ist .was, .fortschritt li.fertig .was { color: var(--schwarz); }
.fortschritt li.ist { color: var(--schwarz); }
.fortschritt li.ist .punkt { background: var(--schwarz); border-color: var(--schwarz); color: #ffffff; }
.fortschritt li.fertig { color: var(--schwarz); }
.fortschritt li.fertig .punkt .ic:not(.haken) { display: none; }
.fortschritt li.fertig .punkt .haken { display: block; }
.fortschritt li.weg { display: none; }

/* Tiles (as the wallet cards of the self-service) */
.kacheln { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.kachel {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.kachel:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); border-color: var(--feldrand); }
.kachel:active { transform: none; box-shadow: none; }
.kachel-bild {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--grau);
  color: var(--schwarz);
  flex: none;
}
.kachel-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kachel-titel { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--text); }
/* A hint below a title, as "Für iOS Geräte" in the self-service. */
.kachel-unter { font-size: 13px; line-height: 1.35; color: var(--leiser); }
.kachel .weiter {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  background: var(--rand);
  color: var(--leise);
  stroke-width: 2.4;
}

/* The way from this computer to the phone */
.uebergabe {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 0;
  padding: 18px 12px 14px;
  border-radius: 12px;
  background: var(--hinweis-bg);
}
.geraet { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 124px; font-size: 13px; line-height: 1.2; text-align: center; }
.geraet.von { color: var(--aus); }
.geraet.von .gross { width: 58px; height: 58px; stroke-width: 1.8; }
.geraet.von span { color: var(--leiser); }
.pfeil { width: 64px; height: 16px; margin-bottom: 40px; fill: none; stroke: var(--schwarz); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 5; }
.pfeil path:last-child { stroke-dasharray: none; }
.geraet.nach { color: var(--schwarz); }
.geraet.nach .ziel-name { font-weight: 700; color: var(--text); }
.handy-bild { position: relative; display: block; width: 80px; height: 80px; }
.handy-bild .gross { width: 80px; height: 80px; stroke-width: 1.6; }
.mini-ausweis { position: absolute; left: 50%; top: 31px; width: 30px; height: 30px; margin-left: -15px; opacity: 0; transition: opacity .25s, transform .35s; transform: translateY(-10px); }
.mini-ausweis .gross { width: 30px; height: 30px; stroke-width: 2.4; }
.form-android, .karte-student, .karte-esc { display: none; }
body[data-handy="android"] .geraet.nach .form-iphone { display: none; }
body[data-handy="android"] .geraet.nach .form-android { display: block; }
body[data-ausweis="student"] .karte-student, body[data-ausweis="esc"] .karte-esc { display: block; }
body[data-ausweis] .mini-ausweis { opacity: 1; transform: none; }

/* Last view: one line, one button */
.kurz { margin: 22px auto 0; max-width: 24rem; text-align: center; color: var(--leise); font-size: 15px; }
.kurz:empty { display: none; }
.knoepfe { display: flex; flex-direction: column; align-items: center; min-height: 66px; margin-top: 14px; }
.meldung-karte {
  margin: 0 0 12px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 8px;
  background: #fff7e6;
  border: 1px solid #f2c46d;
  text-align: center;
}
.laedt { display: flex; align-items: center; gap: 10px; color: var(--leise); margin: 14px 0; }
.laedt::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--rand);
  border-top-color: var(--schwarz);
  border-radius: 50%;
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* Widget: both badges 50 px high. The width is set and the height follows
   (the widget keeps height:auto and max-width:100%), so a narrow screen
   shrinks the badge without distorting it. Apple's German badge is
   110.278 x 34.499 (159.8 x 50), Google's 354 x 50. */
.knoepfe .hp-badge-wrap { margin: 8px !important; }
.knoepfe .hp-badge[data-wallet^="APPLE"] img { width: 159.8px !important; }
.knoepfe .hp-badge[data-wallet="GOOGLE"] img { width: 354px !important; }
/* Widget: the QR code in the middle of its dialog. */
.hp-qr-image { display: flex; justify-content: center; }

/* Trademark line: right below the badge, only while it is Apple's. */
.marke { display: none; max-width: 26rem; margin: 18px auto 0; font-size: 12px; line-height: 1.5; color: var(--leiser); text-align: center; }
.seite[data-marke="apple"] .marke { display: block; }

/* Phones: the card fills the screen, so the German Google badge keeps its
   48 px (it needs 340 px of width; 8 px of clear space to the screen edge). */
@media (max-width: 480px) {
  body { padding: 0; background: #ffffff; }
  .seite, .anmeldung { justify-content: flex-start; padding-top: 0; }
  .karte { max-width: none; min-height: 100vh; padding: 16px 16px 24px; border-radius: 0; box-shadow: none; }
  .nutzer { top: 12px; right: 12px; }
  .nutzer-knopf { width: 38px; height: 38px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
  .karte-kopf { padding-right: 48px; }
  h1 { font-size: 24px; }
  .knoepfe { margin-left: -8px; margin-right: -8px; }
  .knoepfe .hp-badge-wrap { margin: 8px 0 !important; }
  .login .logo { margin-bottom: 18px; }
}
/* On a phone the phone is the device in hand: no drawing of the way. */
body.geraet-iphone .uebergabe, body.geraet-android .uebergabe { display: none; }

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

/* On a phone the last view shows the pass itself, large; the drawings of
   the way and of a phone are for the computer. */
.ausweis-gross { display: none; justify-content: center; margin: 20px 0 0; color: var(--schwarz); }
.ausweis-gross .gross { width: 120px; height: 120px; stroke-width: 1.3; }
body.geraet-iphone .ausweis-gross, body.geraet-android .ausweis-gross { display: flex; }
body.geraet-iphone #schritt-knopf .gewaehlt, body.geraet-android #schritt-knopf .gewaehlt { display: none; }
.seite.geraet-iphone[data-schritt="knopf"] .ausweis-gross .gross,
.seite.geraet-android[data-schritt="knopf"] .ausweis-gross .gross { animation: hinein .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hinein { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }