/* ===== 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); }
/* Kleine Medaille: Kopfzeile der Bereiche, Serien-Stufen, Als Nächstes */
.erfolg-mini { display: inline-grid; }
.erfolg-mini .ab-medal__disc { width: 32px; height: 32px; box-shadow: 0 2px 0 var(--_lc); }
.erfolg-mini .ab-medal__disc::before { inset: 3px; border-width: 2px; }
.erfolg-mini .ab-medal__disc .ab-icon { width: 16px; height: 16px; }
.erfolg-mini .glyph-md { font-size: 16px; line-height: 1; }
/* Serien-Stufen in der Flammen-Karte */
.erfolg-serie { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 2px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.erfolg-serie__stufe { display: grid; justify-items: center; align-content: start; gap: var(--space-2); min-width: 0; text-align: center; }
.erfolg-serie__stufe .erfolg-mini .ab-medal__disc { width: 40px; height: 40px; }
.erfolg-serie__stufe .erfolg-mini .ab-medal__disc .ab-icon { width: 20px; height: 20px; }
.erfolg-serie__text { display: grid; min-width: 0; white-space: nowrap; }
.erfolg-serie__text .text-caption { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Als Nächstes */
.erfolg-next { list-style: none; margin: 0; padding: var(--space-2) var(--space-4); display: grid; }
.erfolg-next__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.erfolg-next__item + .erfolg-next__item { border-top: 2px solid var(--line); }
.erfolg-next__item .erfolg-mini .ab-medal__disc { width: 44px; height: 44px; box-shadow: 0 3px 0 var(--_lc); }
.erfolg-next__item .erfolg-mini .ab-medal__disc .ab-icon { width: 22px; height: 22px; }
.erfolg-next__item .erfolg-mini .glyph-md { font-size: 22px; }
.erfolg-next__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.erfolg-next__desc { color: var(--ink-soft); }
.erfolg-next .ab-medal__bar { width: 100%; }
/* Bereiche: Kopfzeile zum Aufklappen */
.erfolg-bereich { display: grid; }
.erfolg-bereich__kopf { margin: 0; }
.erfolg-bereich__toggle {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  min-height: var(--tap-target); padding: var(--space-3) var(--space-4);
  border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink);
  box-shadow: 0 3px 0 var(--line); font: inherit; text-align: left; cursor: pointer;
}
.erfolg-bereich__toggle:focus-visible { outline: 3px solid var(--tekhelet); outline-offset: 2px; }
.erfolg-bereich__titel { flex: 1; display: flex; align-items: baseline; }
.erfolg-bereich__minis { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.erfolg-bereich__toggle[aria-expanded="true"] .erfolg-bereich__minis { display: none; }
.erfolg-bereich__chev { display: grid; color: var(--ink-soft); transition: transform var(--dur-quick) var(--ease-out); }
.erfolg-bereich__chev .ab-icon { width: var(--icon-sm); height: var(--icon-sm); }
.erfolg-bereich__toggle[aria-expanded="true"] .erfolg-bereich__chev { transform: rotate(90deg); }
.erfolg-bereich__medals { margin-top: var(--space-5); margin-bottom: var(--space-3); }
.erfolg-stufen { margin-top: 2px; }
.erfolg-stufen .ab-pip { height: 8px; width: 14px; }

/* 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 mit zwei Feldern (Rangliste: Gruppe) */
.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); }

/* Wissen-Übersicht: Abschnitte, Fortschritt in der Kachel, halbe Kacheln */
.wissen-abschnitt > .screen__section { margin-bottom: var(--space-3); }
.wissen-prog { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.wissen-prog__bar { display: block; flex: 1; height: 6px; }
.wissen-prog__bar .ab-progress__fill { display: block; }
.wissen-prog__num { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wissen-halves { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.wissen-halves > li { display: grid; }
.wissen-half { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3); }
.wissen-half .wissen-prog { margin-top: auto; }
.wissen-half__top { display: flex; justify-content: space-between; align-items: flex-start; }
.wissen-half__glyph { width: 52px; height: 44px; }
.wissen-gold .ab-alpha { --_lc: var(--gold-ledge); border-color: var(--gold); }
.wissen-gold .ab-alpha__glyph { background: var(--gold-soft); color: var(--gold-ink); }
.wissen-heute { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.wissen-due, .wissen-heute__item {
  border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink);
  box-shadow: 0 3px 0 var(--line); text-decoration: none;
}
.wissen-due {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}
.wissen-due__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wissen-due .ab-btn { flex: none; width: auto; padding-inline: var(--space-4); }
.wissen-heute__item { display: grid; align-content: start; gap: 2px; padding: var(--space-3); min-width: 0; }
.wissen-heute__item:only-of-type, .wissen-due + .wissen-heute__item:last-child { grid-column: 1 / -1; }
.wissen-heute__item .text-overline { color: var(--ink-soft); }
.wissen-suche { position: relative; margin-bottom: var(--space-4); }
.wissen-suche .ab-input { width: 100%; padding-left: 44px; }
.wissen-suche__lupe { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; color: var(--ink-soft); pointer-events: none; }
.wissen-suche__lupe svg { width: 20px; height: 20px; }
.wissen-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.wissen-hit {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--ink); text-decoration: none;
}
.wissen-hit__text { flex: 1; min-width: 0; display: grid; gap: 2px; }

/* 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; }

/* Jüdische Zeiten */
/* Jüdische Zeiten: Kopf mit Ort und Tag, Sonnenbogen, Gebetskarten */
.zkopf { display: grid; gap: var(--space-2); }
.zkopf__ort .ab-select { display: grid; }
.zkopf__heute { justify-self: center; }
.zman-tag { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.zman-tag__text { display: grid; margin: 0; text-align: center; }
.zman-tag__text .text-caption { color: var(--ink-soft); }
.zman-tag__prev .ab-icon { transform: scaleX(-1); }

.zbogen { margin: 0 auto; width: 100%; max-width: 380px; }
.zbogen svg { display: block; width: 100%; height: auto; overflow: visible; }
.zbogen__horizont { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 5; }
.zbogen__tag { fill: none; stroke: var(--well); stroke-width: 14; stroke-linecap: round; }
.zbogen__striche line { stroke: var(--control); stroke-width: 2; stroke-linecap: round; }
.zbogen__band { fill: none; stroke-width: 14; stroke-linecap: round; }
.zbogen__band--schacharit { stroke: var(--tekhelet); }
.zbogen__band--mincha { stroke: var(--gold); }
.zbogen__band--maariw { stroke: var(--granat); }
.zbogen__sonne { fill: var(--gold); stroke: var(--card); stroke-width: 4; }
.zbogen__sonne.is-unten { fill: var(--control); }
.zbogen__zeit { fill: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zbogen__klein { fill: var(--ink-soft); font-size: 11px; }

.zjetzt { display: grid; gap: 2px; margin: calc(-1 * var(--space-2)) 0 0; text-align: center; }
.zjetzt .text-body { color: var(--ink-soft); }

.zkarten { display: grid; gap: var(--space-3); }
.zkarte { --_c: var(--control); border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.zkarte--schacharit { --_c: var(--tekhelet); }
.zkarte--mincha { --_c: var(--gold); }
.zkarte--maariw { --_c: var(--granat); }
.zkarte--schabbat { --_c: var(--minze); }
.zkarte.is-jetzt { border-color: var(--_c); }
.zkarte > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.zkarte > summary::-webkit-details-marker { display: none; }
.zkarte[open] .giur-q__chev { transform: rotate(90deg); }
.zkarte .giur-q__chev { padding-top: 0; }
.zkarte__punkt { flex: none; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--_c); }
.zkarte__name { flex: 1; min-width: 0; display: grid; }
.zkarte__name .text-caption { color: var(--ink-soft); }
.zkarte.is-vorbei .zkarte__name .text-heading, .zkarte.is-vorbei .zkarte__uhr { color: var(--ink-soft); }
.zkarte__rechts { flex: none; display: grid; justify-items: end; gap: 2px; }
.zkarte__uhr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.zkarte__stand { padding: 0 8px; border-radius: var(--radius-full); background: var(--well); color: var(--ink-soft); }
.zkarte__stand--jetzt { background: var(--gold-soft); color: var(--gold-ink); }
.zkarte__body { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.zkarte__text { margin: 0; color: var(--ink-soft); }

.zzeiten { display: grid; border-top: 2px solid var(--line); }
.zzeit { border-bottom: 2px solid var(--line); }
.zzeit > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-2) 0;
  cursor: pointer;
}
.zzeit > summary::-webkit-details-marker { display: none; }
.zzeit__name { flex: 1; min-width: 0; display: grid; }
.zzeit__name .text-caption { color: var(--ink-soft); }
.zzeit__uhr { flex: none; font-variant-numeric: tabular-nums; }
.zzeit--next .zzeit__name .text-caption { color: var(--gold-ink); }
.zzeit__text { display: grid; gap: var(--space-2); padding: 0 0 var(--space-3); }
.zzeit__text p { margin: 0; }

.zkarte__erinnerung { display: grid; gap: var(--space-2); }
.zschalter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--tap-target); }
.zman-note { margin-top: var(--space-4); }

/* Jahreskreis: Termine als Zeitleiste, die Farbe des Tages zeigt die Art */
/* Jahresrad (js/jahresrad.js): Farbe je Art über --_c, --_ci für Text */
.jahr-rad { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.jahr-rad [data-art="tora"] { --_c: var(--gold); --_ci: var(--gold-ink); }
.jahr-rad [data-art="rabbinisch"] { --_c: var(--tekhelet); --_ci: var(--tekhelet-ink); }
.jahr-rad [data-art="fasten"] { --_c: var(--koralle); --_ci: var(--koralle-ink); }
.jahr-rad [data-art="modern"] { --_c: var(--minze); --_ci: var(--minze-ink); }
.jahr-rad [data-art="zeit"] { --_c: var(--control); --_ci: var(--ink-soft); }
.jahr-rad__rad { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 1; }
.jahr-rad__rad svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jahr-rad__monat { fill: var(--card); stroke: var(--line); stroke-width: 0.5; }
.jahr-rad__monat.is-alt { fill: var(--well); }
.jahr-rad__monat.is-jetzt { fill: var(--granat-soft); stroke: var(--granat); }
.jahr-rad__mname { fill: var(--ink); font-size: 5.4px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; }
.jahr-rad__seg { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.jahr-rad__hit { fill: transparent; }
.jahr-rad__bogen { fill: var(--_c); transition: filter var(--dur-quick) var(--ease-out); }
.jahr-rad__sel { fill: none; stroke: var(--ink); stroke-width: 0.9; opacity: 0; }
.jahr-rad__seg:hover .jahr-rad__bogen { filter: brightness(1.12); }
.jahr-rad__seg.is-sel .jahr-rad__sel { opacity: 1; }
.jahr-rad__seg:focus-visible .jahr-rad__sel { opacity: 1; stroke: var(--tekhelet-ink); stroke-width: 1.4; }
.jahr-rad__heute path { stroke: var(--granat); stroke-width: 1.4; stroke-linecap: round; }
.jahr-rad__heute circle { fill: var(--granat); }
.jahr-rad__heute text { fill: var(--granat-ink); font-size: 5.2px; font-weight: 700; }
.jahr-rad__mitte {
  position: absolute;
  inset: 31%;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}
.jahr-rad__mitte .text-overline { color: var(--_ci); font-size: 11px; }
.jahr-rad__mitte .text-strong { line-height: 1.2; text-wrap: balance; }
.jahr-rad__mitte .text-caption { color: var(--ink-soft); }
.jahr-rad__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.jahr-rad__nav p { margin: 0; color: var(--ink-soft); text-align: center; }
.jahr-rad__prev .ab-icon { transform: scaleX(-1); }
.jahr-rad__karte { display: grid; gap: var(--space-2); }
.jahr-rad__karte p { margin: 0; }
.jahr-rad__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.jahr-rad__kopf h2 { margin: 0; }
.jahr-rad__he { font-family: var(--font-hebrew); font-size: 22px; line-height: 1.3; color: var(--granat-ink); }
/* Farbpunkt vor der Art: dieselbe Farbe wie der Bogen im Rad */
.jahr-rad__art { display: flex; align-items: center; gap: var(--space-2); color: var(--_ci); }
.jahr-rad__art::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--_c); }
.jahr-rad__datum { color: var(--tekhelet-ink); }
.jahr-rad__datum span { display: block; color: var(--ink-soft); }
.jahr-filter { margin-top: var(--space-4); }
.jahr-when { display: block; margin-top: 2px; color: var(--tekhelet-ink); }
.giur-group[hidden] { display: none; }
.giur-list--timeline { position: relative; }
.giur-list--timeline::before {
  content: '';
  position: absolute;
  top: var(--space-5);
  bottom: 0;
  left: calc(var(--space-3) + 2px + 15px);
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--line);
}
.giur-list--timeline .giur-q { position: relative; scroll-margin-top: var(--space-6); }
.giur-q[data-art="tora"] .giur-q__nr { background: var(--gold-soft); color: var(--gold-ink); }
.giur-q[data-art="rabbinisch"] .giur-q__nr { background: var(--tekhelet-soft); color: var(--tekhelet-ink); }
.giur-q[data-art="fasten"] .giur-q__nr { background: var(--koralle-soft); color: var(--koralle-ink); }
.giur-q[data-art="modern"] .giur-q__nr { background: var(--minze-soft); color: var(--minze-ink); }
.giur-q[data-next] { border-color: var(--gold); }

/* ---------- Glossar ---------- */
/* Begriffe im Text: unterstrichen, sonst wie der Text drumherum */
.gloss {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: underline dotted var(--granat-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gloss:hover { color: var(--granat-ink); }
.gloss:focus-visible { outline: 2px solid var(--focus, var(--granat)); outline-offset: 2px; border-radius: 2px; }
.gloss-search { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.gloss-search input { width: 100%; }
.gloss-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gloss-links .ab-chip { text-decoration: none; }
.gloss-fund:empty { display: none; }
.gloss-fund { display: grid; gap: var(--space-2); }
.giur-round .gloss-fund { display: none; }
.giur-q__nr [lang="he"] { font-family: var(--font-hebrew); font-size: 18px; line-height: 1; }
.gloss-dialog { display: grid; gap: var(--space-3); max-height: calc(100dvh - 32px); overflow-y: auto; }
.gloss-dialog > p, .gloss-dialog .ab-dialog__title { margin: 0; }
.gloss-dialog .ab-showcase { margin: 0; }
.gloss-dialog__de { color: var(--granat-ink); }
.gloss-dialog .ab-dialog__actions { margin-top: var(--space-2); }
.gloss-dialog .ab-btn .ab-icon { margin-right: var(--space-2); }
.gloss-dialog > .text-body { text-align: left; }
.gloss-dialog .gloss-links { justify-content: center; }

/* ---------- Gebete lesen ---------- */

/* Zeile lesen: das aktuelle Wort ist hinterlegt, gelesene färben sich. */
.ab-readline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}
.ab-readline__word {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.ab-readline__word.is-current { background: var(--tekhelet-soft); color: var(--tekhelet-ink); }
.ab-readline__word.is-read { color: var(--minze-ink); }
.ab-readline__word.is-missed { color: var(--granat-ink); }

/* Gebetstext zum Abschluss */
.ab-verse { text-align: center; }
.ab-verse__line + .ab-verse__line {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.ab-verse__line p { margin: 0 0 var(--space-1); }
.ab-verse__line p:last-child { margin-bottom: 0; }
.ab-verse__de { color: var(--ink-soft); }
.ab-verse__word {
  padding: 0 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
button.ab-verse__word:hover { background: var(--tekhelet-soft); }
.ab-verse__hint { color: var(--ink-soft); margin: 0; }