/* ===== Alef Beth – App-Stile =====
   Farben, Maße und Schrift: tokens.css. Komponenten (ab-…): components.css.
   Hier steht nur, wie die App die Komponenten auf ihren Bildschirmen anordnet. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: var(--content-width);
  margin: 0 auto;
  /* unten Platz für die Tab-Leiste */
  padding: var(--space-4) var(--space-4) calc(96px + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh; /* mobile Adressleisten ein-/ausblenden lassen die vh springen */
}

/* Solange die Feedback-Leiste eingeblendet ist, unten Platz schaffen – sonst
   liegt auf kurzen Displays die letzte Antwort darunter. */
body.fb-open #app { padding-bottom: var(--fb-space, 220px); }

a { color: var(--tekhelet-ink); text-decoration: none; }

/* Fokusring: components.css (:focus-visible). #app bekommt nach jedem
   Screenwechsel programmatisch den Fokus – dort wäre ein Ring nur irritierend. */
#app:focus, #app:focus-visible { outline: none; }

/* ===== Rahmen ===== */
body.in-lesson #bottomnav { display: none; }

/* Startbildschirm (Komponente ab-splash): nur, wenn der Kopf von index.html
   ihn für diese Sitzung freigegeben hat. Dockt das Icon an, gleitet der
   Screen herein – Kopfleiste, dann Karte für Karte, dazu die Tab-Leiste. */
html:not(.is-splash) .ab-splash { display: none; }
#app.is-revealing > * > * { animation: ab-fade-up var(--dur-slow) var(--ease-out) 120ms both; }
#app.is-revealing > * > :nth-child(2) { animation-delay: 180ms; }
#app.is-revealing > * > :nth-child(3) { animation-delay: 240ms; }
#app.is-revealing > * > :nth-child(4) { animation-delay: 300ms; }
#app.is-revealing > * > :nth-child(n+5) { animation-delay: 360ms; }
#bottomnav.is-revealing { animation: ab-fade-up var(--dur-slow) var(--ease-out) 120ms both; }

/* ===== Startseite ===== */
.home { display: grid; gap: var(--space-4); }
.home-meter {
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.home .ab-unit { margin-top: var(--space-4); }
/* Fortschritt der laufenden Einheit, im Banner unter der Beschreibung. Die
   Rinne hat die Farbe der Banner-Kante, damit sie auf Granat zu sehen ist. */
.ab-unit__meter { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.ab-unit__meter .ab-progress { background: var(--_lc); }
.ab-unit__count { flex: none; font-variant-numeric: tabular-nums; }
/* Der Text neben einem Knoten gehört mit zur Tippfläche (siehe screens.js). */
.ab-step__text { cursor: pointer; }

/* Begrüßung oben auf der Lernen-Seite (greetingHtml in screens.js) */
/* Reicht die Breite nicht für beides, rutscht der hebräische Gruß unter die Überschrift. */
.greeting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.greeting__text { flex: 1 1 auto; min-width: 0; }
.greeting__text h1 { margin: 0; overflow-wrap: anywhere; }
.greeting__de { color: var(--ink-soft); }
.greeting__he {
  flex: 0 1 auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--tekhelet-soft);
  color: var(--tekhelet-ink);
  font: inherit;
}
button.greeting__he { cursor: pointer; }
.greeting__he .ab-icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
.greeting__he.is-playing .w1 { animation: ab-wave 900ms var(--ease-in-out) infinite; }
.greeting__he.is-playing .w2 { animation: ab-wave 900ms var(--ease-in-out) 150ms infinite; }
button.greeting__he:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Karte „Heute“: kleiner Tagesziel-Ring (ab-goal--sm) neben dem Text */
.today { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.today__ring { flex: none; }
.today__text { display: grid; gap: 2px; min-width: 0; }
.today__kicker { color: var(--gold-ink); }
.today__note { color: var(--ink-soft); }
.today.is-leaving { animation: ab-fade-out var(--dur-base) var(--ease-in) forwards; }

/* ===== Lektion ===== */
.lesson-stage { margin-top: var(--space-4); }
.ab-listen-skip { display: flex; margin: var(--space-4) auto 0; }

/* ===== Üben, Alef-Bet, Einstellungen ===== */
.screen { display: grid; gap: var(--space-3); }
.screen__title { margin: var(--space-2) 0; }
.screen__section { margin-top: var(--space-5); }

/* Üben: Karte mit Symbol, Zahl und der nächsten Aktion */
.review-card { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.review-card__art {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-2);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--tekhelet-soft);
  color: var(--tekhelet-ink);
}
.review-card__art .ab-icon { width: var(--icon-lg); height: var(--icon-lg); }
.review-card__art--done { background: var(--minze-soft); color: var(--minze-ink); }
.review-card__text { color: var(--ink-soft); }
.review-card .ab-btn { margin-top: var(--space-3); }

/* Erfolge */
.screen__owner { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: calc(var(--space-2) * -1) 0 0; color: var(--ink-soft); }
.screen__count { margin-left: var(--space-2); color: var(--ink-soft); }

/* Einstellungen */
/* Über dich: Namensfelder. Schmal wird die Zeile zweistöckig. */
.profile-field { flex-wrap: wrap; }
.profile-field .ab-setting__text { flex: 1 1 12rem; }
.profile-field .ab-input { flex: 1 1 10rem; min-width: 0; width: 100%; }
.profile-field__he { flex: 1 1 10rem; display: flex; align-items: center; gap: var(--space-2); }
.profile-field__he .ab-input { flex: 1; text-align: right; }
.profile-field__listen { width: 44px; height: 44px; }
.profile-field__listen .ab-icon { width: var(--icon-sm); height: var(--icon-sm); }
.about { display: grid; gap: var(--space-3); padding: var(--space-5); }

/* ===== Giur-Wissen (js/giur.js) ===== */
.giur { display: grid; gap: var(--space-4); }

/* Umschalter Hebräisch lesen | Giur-Wissen, oben auf der Lernen-Seite */
.modeswitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--well);
}
.modeswitch a, .modeswitch button {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: var(--radius-full);
  color: var(--ink-soft);
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.modeswitch a[aria-current="page"], .modeswitch button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); }

/* Liste der Teile (Zeilen: Komponente ab-alpha) */
.giur-teile { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.giur-soon { --_d: 0px; border-style: dashed; background: var(--well); color: var(--ink-soft); }
.giur-soon .ab-alpha__glyph { background: var(--paper); }
.giur-chevron { flex: none; color: var(--ink-soft); }
.giur-chevron .ab-icon { width: var(--icon-sm); height: var(--icon-sm); }
.giur-meter__note { margin: var(--space-2) 0 0; color: var(--ink-soft); }

/* Markieren zum Wiederholen: Lesezeichen in Liste und Karte, Kachel auf der Übersicht */
.giur-mark {
  flex: none; display: grid; place-items: center; width: var(--tap-target); height: var(--tap-target);
  margin: -8px -4px -8px 0; padding: 0; border: 0; border-radius: var(--radius-full);
  background: none; color: var(--ink-soft); cursor: pointer;
}
.giur-mark .ab-icon { width: var(--icon-md); height: var(--icon-md); fill: none; }
.giur-mark[aria-pressed="true"] { color: var(--gold); }
.giur-mark[aria-pressed="true"] .ab-icon { fill: currentColor; }
.giur-mark:focus-visible { outline: 3px solid var(--tekhelet); outline-offset: -3px; }
.giur-mark--card { margin-left: auto; }
.giur-marked { width: 100%; background: var(--gold-soft); border-color: var(--gold); }
.giur-marked .ab-alpha__glyph { background: var(--card); color: var(--gold); }
.giur-marked .ab-alpha__glyph .ab-icon { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.giur-marked .ab-alpha__sub { color: var(--gold-ink); }

/* Ein Teil */
.giur-back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-target); width: fit-content; color: var(--tekhelet-ink); }
.giur-back .ab-icon { width: var(--icon-sm); height: var(--icon-sm); transform: scaleX(-1); }
.giur-desc { margin: 0; color: var(--ink-soft); }
.giur-of { color: var(--ink-soft); }
.giur-card-progress { width: 100%; flex: none; }

.giur-list { display: grid; gap: var(--space-3); }
.giur-q { border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.giur-q > summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-3);
  cursor: pointer;
}
.giur-q > summary::-webkit-details-marker { display: none; }
.giur-q__nr {
  flex: none;
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--well);
  color: var(--ink-soft);
}
.giur-q__text { flex: 1; min-width: 0; padding-top: 4px; }
.giur-q__subs { display: block; margin-top: var(--space-1); font-weight: normal; color: var(--ink-soft); }
.giur-q__chev { flex: none; padding-top: 7px; color: var(--ink-soft); transition: transform var(--dur-quick) var(--ease-out); }
.giur-q__chev .ab-icon { width: var(--icon-sm); height: var(--icon-sm); }
.giur-q[open] .giur-q__chev { transform: rotate(90deg); }
.giur-q__body { display: grid; gap: var(--space-3); padding: var(--space-1) var(--space-4) var(--space-4); }

/* Etiketten: Fragetyp, Status (Entwurf / Geprüft), Lernstufe */
.giur-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.giur-tags .ab-pips { margin-left: auto; }
.giur-type, .giur-status { padding: 4px 12px; border-radius: var(--radius-full); }
.giur-type { background: var(--well); color: var(--ink-soft); }
.giur-status--entwurf { background: var(--gold-soft); color: var(--gold-ink); }
.giur-status--geprueft { background: var(--minze-soft); color: var(--minze-ink); }

/* Antwort: Kernantwort, Merkpunkte, Hebräisch, Quelle, Hinweis */
.giur-answer { display: grid; gap: var(--space-3); }
.giur-answer__label { margin: 0; color: var(--granat-ink); }
.giur-answer__kurz { margin: 0; }
.giur-points { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.giur-sub { margin: 0; padding-left: var(--space-6); }
.giur-hebrew { display: grid; gap: var(--space-1); }
.giur-hebrew .ab-showcase { margin: 0; }
.giur-hebrew__label, .giur-hebrew__translit, .giur-hebrew__de,
.giur-source, .giur-draftnote { margin: 0; color: var(--ink-soft); }

/* Karten-Runde: Frage, aufdecken, bewerten – die Knöpfe bleiben unten stehen */
.giur-card { display: grid; gap: var(--space-3); }
.giur-card__q { margin: 0; }
.giur-card__prompt { margin: 0; color: var(--ink-soft); }
.giur-card__answer { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--line); outline: none; }
.giur-card__answer[hidden] { display: none; }
.giur-again { margin: 0; color: var(--gold-ink); }
.giur-bar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: var(--space-4);
  padding: var(--space-3) 0 calc(var(--space-2) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 75%, transparent);
}
.giur-bar__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* Prüfung der Antwort-Entwürfe (js/giur-pruefung.js) */
.giur-review { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--line); }
.giur-review__label { margin: 0; color: var(--ink-soft); }
.giur-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.giur-choice {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 2px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.giur-choice[aria-pressed="true"].giur-choice--stimmt { background: var(--minze-soft); border-color: var(--minze); color: var(--minze-ink); }
.giur-choice[aria-pressed="true"].giur-choice--aenderung { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.giur-choice[aria-pressed="true"].giur-choice--falsch { background: var(--koralle-soft); border-color: var(--koralle); color: var(--koralle-ink); }
.giur-note { display: block; width: 100%; min-height: 72px; padding: var(--space-2) var(--space-3); resize: vertical; font-family: inherit; }

/* Fragenliste: die Nummer zeigt, wie die Antwort beurteilt wurde */
.giur-q[data-urteil="stimmt"] .giur-q__nr { background: var(--minze-soft); color: var(--minze-ink); }
.giur-q[data-urteil="aenderung"] .giur-q__nr { background: var(--gold-soft); color: var(--gold-ink); }
.giur-q[data-urteil="falsch"] .giur-q__nr { background: var(--koralle-soft); color: var(--koralle-ink); }

/* Bereich „Prüfung weitergeben“ */
.giur-export { padding: 0; }
.giur-export > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
}
.giur-export > summary::-webkit-details-marker { display: none; }
.giur-export__count { flex: 1; text-align: right; color: var(--ink-soft); }
.giur-export .giur-q__chev { padding-top: 0; }
.giur-export[open] .giur-q__chev { transform: rotate(90deg); }
.giur-export__body { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.giur-export__body p { margin: 0; color: var(--ink-soft); }
.giur-field { display: grid; gap: var(--space-1); color: var(--ink-soft); }
.giur-export__btns { display: grid; gap: var(--space-2); }

/* ===== Rangliste (js/rangliste.js) ===== */
/* Sechs Tabs: auf schmalen Handys Pille und Beschriftung etwas kleiner */
.ab-nav__pill::before { max-width: calc(100% - 4px); }
.ab-nav__label { white-space: nowrap; }
@media (max-width: 380px) {
  .ab-nav__label { font-size: 12px; letter-spacing: -0.01em; }
}

.modeswitch button { border: 0; background: none; cursor: pointer; }

.rl { gap: var(--space-4); }
.rl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.rl-head .screen__title { margin-bottom: 0; }
.rl-head__week { color: var(--ink-soft); }
.rl-status { margin: 0; color: var(--ink-soft); }
.rl-foot { margin: 0; color: var(--ink-soft); text-align: center; }

/* Gruppen als Chips, die letzte legt eine neue an */
.rl-chips { display: flex; gap: var(--space-2); overflow-x: auto; margin: 0 calc(var(--space-4) * -1); padding: 2px var(--space-4) var(--space-1); scrollbar-width: none; }
.rl-chip { flex: none; padding: 0 14px; border: 2px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.rl-chip[aria-pressed="true"] { border-color: var(--granat); background: var(--granat-soft); color: var(--granat-ink); }
.rl-chip--add { border-style: dashed; color: var(--ink-soft); }
.rl-chip--add .ab-icon { color: var(--gold); }

.rl-board { display: grid; gap: var(--space-4); }
.rl-standing .ab-banner__text { margin: 0; }

/* Initiale im Farbkreis */
.rl-avatar {
  --_bg: var(--tekhelet-soft);
  --_fg: var(--tekhelet-ink);
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.rl-avatar--minze { --_bg: var(--minze-soft); --_fg: var(--minze-ink); }
.rl-avatar--granat { --_bg: var(--granat-soft); --_fg: var(--granat-ink); }
.rl-avatar--koralle { --_bg: var(--koralle-soft); --_fg: var(--koralle-ink); }
.rl-avatar--gold { --_bg: var(--gold-soft); --_fg: var(--gold-ink); }
.rl-avatar--lg { width: 56px; height: 56px; font-size: 24px; }
.rl-avatar--xl { width: 68px; height: 68px; font-size: 30px; }

/* Siegertreppchen */
.rl-podium { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-2); }
.rl-podium__place { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.rl-podium__crown { color: var(--gold); margin-bottom: -6px; }
.rl-podium__crown .ab-icon { width: 30px; height: 30px; }
.rl-podium__place .rl-avatar { box-shadow: 0 0 0 3px var(--paper); }
.rl-podium__place.is-me .rl-avatar { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--tekhelet); }
.rl-podium__name { max-width: 100%; margin-top: var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-podium__xp { color: var(--ink-soft); }
.rl-podium__block {
  width: 100%;
  margin-top: var(--space-1);
  display: grid;
  place-items: start center;
  padding-top: var(--space-2);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--well);
  color: var(--ink-soft);
  transform-origin: bottom;
  animation: rl-rise var(--dur-slow) var(--ease-spring) both;
}
.rl-podium__place--1 .rl-podium__block { height: 104px; background: var(--gold-soft); color: var(--gold-ink); animation-delay: 160ms; }
.rl-podium__place--2 .rl-podium__block { height: 76px; animation-delay: 80ms; }
.rl-podium__place--3 .rl-podium__block { height: 56px; background: var(--koralle-soft); color: var(--koralle-ink); }
@keyframes rl-rise { from { transform: scaleY(0.2); opacity: 0; } }

/* Liste: Zeilen in einer Karte, durch Linien getrennt */
/* overflow: hidden schneidet die blaue eigene Zeile an den runden Ecken der Karte ab. */
.rl-list { list-style: none; margin: 0; padding: 0; display: grid; overflow: hidden; }
.rl-row { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-2) var(--space-4); }
.rl-row + .rl-row { border-top: 2px solid var(--line); }
.rl-row.is-me { background: var(--tekhelet-soft); }
.rl-row__rank { flex: none; width: 2ch; text-align: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rl-row__name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); }
.rl-row__name > .text-strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-row__sub { flex-basis: 100%; color: var(--ink-soft); }
.rl-row__streak { display: inline-flex; align-items: center; gap: 2px; }
.rl-row__streak .ab-icon { width: 14px; height: 14px; color: var(--koralle); }
.rl-row__xp { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl-row__xp .text-caption { color: var(--ink-soft); }
.rl-you { padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--tekhelet); color: var(--on-tekhelet); }

/* Einladen */
.rl-invite { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rl-invite h2, .rl-invite p { margin: 0; }
.rl-invite__text { display: grid; gap: 2px; }
.rl-invite__text .text-caption { color: var(--ink-soft); }
.rl-invite__code { color: var(--ink); letter-spacing: 0.12em; }
.rl-leave { justify-self: center; }

/* Leer-Zustand, Einladung, Start-Formular */
.rl-hero { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.rl-hero h2, .rl-hero p { margin: 0; }
.rl-hero > .text-body { color: var(--ink-soft); }
.rl-hero__kicker { color: var(--ink-soft); }
.rl-hero__art { width: 88px; height: 88px; margin-bottom: var(--space-2); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--gold-soft); color: var(--gold); }
.rl-hero__art .ab-icon { width: 48px; height: 48px; }
.rl-startcard { display: grid; gap: var(--space-4); }
.rl-start { display: grid; gap: var(--space-4); width: 100%; text-align: left; }
.rl-start[data-mode="create"] [data-for="join"], .rl-start[data-mode="join"] [data-for="create"] { display: none; }
.rl-start--invite { margin-top: var(--space-2); }
.rl-field { display: grid; gap: var(--space-1); }
.rl-field__hint { color: var(--ink-soft); }
.rl-field .ab-input { width: 100%; margin-top: var(--space-1); }
.rl-code-input { letter-spacing: 0.2em; text-transform: uppercase; }

.rl-dialog { position: relative; display: grid; gap: var(--space-4); }
.rl-dialog:not([open]) { display: none; }
.rl-dialog .ab-dialog__title { margin: 0; text-align: left; }
.rl-dialog__close { position: absolute; top: var(--space-3); right: var(--space-3); }

/* Konto: Abschnitt in den Einstellungen, Hinweis auf der Startseite, Dialog */
.konto-card { display: grid; gap: var(--space-3); }
.konto-card p { margin: 0; }
.konto-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.konto-delete { justify-self: start; margin-top: var(--space-2); }
.konto-hint { align-items: center; }
.konto-hint__actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.konto-first { margin: 0; color: var(--ink-soft); text-align: center; }
.konto-link { border: 0; padding: 0; background: none; color: var(--tekhelet-ink); text-decoration: underline; cursor: pointer; }
.konto-dialog__text { margin: 0; padding-right: var(--space-6); }
.konto-code { letter-spacing: 0.3em; }

/* Anmeldebildschirm vor der App (js/zugang.js) */
.zugang__card { display: grid; gap: var(--space-4); max-width: 28rem; margin: var(--space-6) auto 0; }
.zugang__card p, .zugang__title { margin: 0; }
body.is-gated #bottomnav { display: none; }