/* Feinschliff, zuletzt geladen.
   Korrigiert konkrete Befunde aus dem Geraetetest, ohne app.css oder
   design-v2.css anzufassen. Wer das rueckgaengig machen will, entfernt
   die eine Zeile in index.html, die diese Datei einbindet. */

/* ------------------------------------------------------------------
   1. Meldung kollidierte mit der unteren Leiste
   Gemessen: Toast auf bottom 28px, Leiste 70px hoch. Die Meldung lag
   sichtbar auf den Reitern. Jetzt sitzt sie darueber, inklusive
   Rand fuer Geraete mit abgerundeter Unterkante.
   ------------------------------------------------------------------ */
:root {
  --leiste-hoehe: 70px;
  --sicher-unten: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 820px) {
  /* Die Grundregeln verschieben den Toast zusaetzlich per transform.
     Deshalb wird die Verschiebung hier auf null gesetzt und die Lage
     allein ueber bottom bestimmt, sonst rutscht er wieder auf die Leiste. */
  .toast {
    bottom: calc(var(--leiste-hoehe) + var(--sicher-unten) + 16px);
    max-width: min(92vw, 30rem);
  }
  /* !important ist hier noetig: die Grundregel setzt den Versatz per
     Animation, und die schlaegt eine normale Deklaration. */
  .toast.is-up { transform: translateX(-50%) !important; }
  .toast:not(.is-up) { transform: translateX(-50%) translateY(200%) !important; }

  /* Die Leiste selbst braucht denselben Rand, sonst rutschen die
     Beschriftungen auf Geraeten mit Homeindikator unter den Rand. */
  .bottom-nav {
    padding-bottom: var(--sicher-unten);
  }

  /* Inhalt darf nicht hinter der Leiste enden. */
  .app-main,
  main {
    padding-bottom: calc(var(--leiste-hoehe) + var(--sicher-unten) + 24px);
  }
}

/* ------------------------------------------------------------------
   2. Kopfzahlen waren auf dem Handy unbeschriftet
   Sichtbar stand dort nur "5  105". Ohne Beschriftung raet man, was
   gemeint ist. Statt die Labels zu verstecken, werden sie klein
   gesetzt und behalten ihre Bedeutung.
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
  .vital-lbl {
    display: inline;
    font-size: .58rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dim);
    margin-left: 3px;
  }
  .vital { gap: 2px; padding-inline: 7px; }
  .vital-num { font-size: .8rem; }
}

/* Unter 380px wird es zu eng fuer drei beschriftete Werte.
   Dann zaehlt nur, was heute ansteht. */
@media (max-width: 344px) {
  .vitals .vital:not(.vital--due) .vital-lbl { display: none; }
}

/* ------------------------------------------------------------------
   3. Kacheln waren zu blass, die Seite hatte keine Tiefe
   Hintergrund und Flaeche lagen mit #F4F7F8 gegen #FFFFFF sehr nah
   beieinander. Ein etwas kraeftigerer Rahmen und eine ruhige Kante
   geben Struktur, ohne laut zu werden.
   ------------------------------------------------------------------ */
.exam-card,
.stat,
.q-block,
.flashcard {
  border-color: #d7e0e4;
  box-shadow: 0 1px 2px rgb(23 33 43 / .04);
}

.exam-card:hover,
.q-block:hover {
  border-color: #b9c8ce;
}

/* ------------------------------------------------------------------
   4. Handlungsaufforderung deutlicher vom Rest abheben
   ------------------------------------------------------------------ */
.btn.hero-cta,
.btn:not(.btn--ghost) {
  box-shadow: 0 1px 2px rgb(8 127 122 / .18), 0 6px 16px -8px rgb(8 127 122 / .35);
}

.btn.hero-cta:active,
.btn:not(.btn--ghost):active {
  transform: translateY(1px);
}

/* ------------------------------------------------------------------
   5. Tastaturbedienung sichtbar halten
   Der Fokusring muss auf hellem Grund erkennbar bleiben, auch auf
   farbigen Flaechen.
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid #087f7a;
  outline-offset: 2px;
  border-radius: 6px;
}

.btn:not(.btn--ghost):focus-visible {
  outline-color: #17212b;
}

/* ------------------------------------------------------------------
   6. Lange Fachbegriffe brachen aus schmalen Kacheln aus
   "Articulatio talocalcaneonavicularis" ist laenger als jede
   Handybreite. Ohne Umbruch schiebt es das Layout auf.
   ------------------------------------------------------------------ */
.layer-title,
.card-front,
.card-back,
.q-text,
.opt {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ------------------------------------------------------------------
   7. Ungeprueftes muss als solches erkennbar sein
   Bislang war der Pruefstand nur in den Daten sichtbar, nicht im Bild.
   ------------------------------------------------------------------ */
.review-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: #fdf3e3;
  color: #8a5a12;
  border: 1px solid #f0dcb8;
}

.review-flag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d99826;
}

.review-flag[data-stand="freigegeben"] {
  background: #edf8f1;
  color: #256b47;
  border-color: #cbe8d8;
}
.review-flag[data-stand="freigegeben"]::before { background: #3c9a67; }

@media (prefers-reduced-motion: reduce) {
  .btn.hero-cta:active,
  .btn:not(.btn--ghost):active { transform: none; }
}

/* ------------------------------------------------------------------
   8. Weniger auf einmal zeigen
   Die Seitenleiste hatte 13 Eintraege. Wer auf eine Pruefung lernt,
   braucht davon fuenf. Der Rest rueckt nach unten, sichtbar aber
   ruhiger, getrennt durch eine Linie.
   ------------------------------------------------------------------ */
.side-nav .nav--sekundaer {
  order: 10;
  opacity: .72;
  font-weight: 400;
}
.side-nav .nav--sekundaer:hover,
.side-nav .nav--sekundaer:focus-visible { opacity: 1; }

/* Erste sekundaere Position bekommt die Trennlinie */
.side-nav .nav--sekundaer:nth-of-type(1 of .nav--sekundaer) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Die Fachpruefung ist keine Schueleransicht. */
.side-nav .nav--dozent {
  order: 20;
  color: var(--dim);
}
:root[data-rolle="dozent"] .side-nav .nav--dozent {
  color: var(--text);
  font-weight: 600;
}

.rollen-schalter .row { flex-wrap: wrap; }
.rollen-schalter .btn { flex: 1 1 auto; min-width: 12rem; }

/* Der Mehr-Schalter sitzt immer unter den sichtbaren Punkten. */
.side-nav .nav-mehr {
  order: 15;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-weight: 500;
}
.side-nav .nav-mehr:hover { color: var(--text); }
/* Wenn aufgeklappt, braucht die erste sekundaere Position keine zweite Linie */
.side-nav .nav--sekundaer:nth-of-type(1 of .nav--sekundaer) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* [hidden] setzt nur display:none mit niedriger Spezifitaet und verliert
   gegen jede display-Regel der Navigation. Ohne das hier bleiben
   ausgeblendete Punkte sichtbar. */
[hidden] { display: none !important; }

/* Impressum und Datenschutz muessen nach § 5 DDG staendig verfuegbar sein.
   Deshalb fest in der Seitenleiste, nicht hinter dem Mehr-Schalter. */
.rechts-links a { color: var(--dim); text-decoration: none; }
.rechts-links a:hover { color: var(--amber); text-decoration: underline; }

/* ------------------------------------------------------------------
   9. Rueckmeldung im Beta-Test
   Der Knopf muss immer erreichbar sein, ohne den Inhalt zu verdecken.
   Auf dem Handy sitzt er ueber der unteren Leiste.
   ------------------------------------------------------------------ */
.rueck-knopf {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .95rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgb(23 33 43 / .1), 0 10px 24px -12px rgb(23 33 43 / .3);
}
.rueck-knopf:hover { border-color: var(--amber); color: var(--amber); }
.rueck-knopf svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

@media (max-width: 820px) {
  .rueck-knopf {
    bottom: calc(var(--leiste-hoehe) + var(--sicher-unten) + 14px);
    padding: .55rem .8rem;
  }
  .rueck-knopf span { display: none; }
}

.rueck-hintergrund {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgb(23 33 43 / .32);
}

.rueck-fenster {
  width: min(100%, 30rem);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 20px 50px -20px rgb(23 33 43 / .4);
}