/* Examensfälle (Premium) — baut auf style.css (Tokens, Header, Buttons) und
   konto.css (Felder, Korrektur-Liste, Badges, Meldung). Folgt dem Ton der
   eingeloggten Lern-Werkzeuge: warmes Papier, Hairlines statt Kästen, EIN
   Sienna-Akzent nur für Aktionen/aktive Zustände. Status-Tokens nur für echte
   Zustände, nie als Marketing-Akzent. Keine neuen Farben — nur bestehende Tokens. */

.ex-wrap { max-width: var(--breite-max); margin: 0 auto; padding: var(--abstand-seitenkopf) var(--abstand-rand) 4rem; }
.ex-zurueck { font-size: .9rem; margin: 0 0 1.25rem; }

/* Kopf: H1 (Fraunces, geerbt) + dezentes Mono-Kontingent-Label rechts. */
.ex-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1.5rem;
}
.ex-kopf > h1 { margin: 0 0 .5rem; }
.ex-kontingent {
  font-family: var(--schrift-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinte-blass); white-space: nowrap;
}
.ex-intro { color: var(--tinte-blass); margin: 0 0 2rem; max-width: 54ch; }

/* Abschnitte durch Hairline + Luft getrennt, kein Kasten. */
.ex-block { margin-top: 2.5rem; }
.ex-block + .ex-block { padding-top: 2.5rem; border-top: 1px solid var(--linie); }
.ex-marke {
  font-family: var(--schrift-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinte-blass); margin: 0 0 .4rem;
}
/* Abschnitts-Titel nüchtern (Plex Sans) — Fraunces bleibt dem H1 vorbehalten. */
.ex-block > h2 {
  font-family: var(--schrift-sans);
  font-weight: 600; font-size: 1.3rem; line-height: 1.25;
  letter-spacing: -.01em; margin: 0 0 .4rem;
}
.ex-hint { color: var(--tinte-blass); margin: 0 0 1.5rem; max-width: 54ch; font-size: .98rem; }
.ex-hint-klein { color: var(--tinte-leise); font-size: .85rem; margin: .6rem 0 0; max-width: 54ch; }
.ex-optional { color: var(--tinte-leise); font-weight: 400; }

/* Formular-Abschnitte. */
.ex-fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
.ex-fieldset legend {
  font-family: var(--schrift-sans); font-weight: 600; font-size: 1.05rem;
  color: var(--tinte); padding: 0; margin: 0 0 .9rem;
}
.ex-fieldset .feld small {
  display: block; margin-top: .35rem; font-size: .82rem; color: var(--tinte-leise);
}

/* Quelle-Wahl: ruhige Radio-Reihe, Sienna nur als accent-color. */
.ex-quelle-wahl { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.1rem; }
.ex-quelle-wahl label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .95rem; color: var(--tinte); cursor: pointer;
}
.ex-quelle-wahl input[type="radio"] { accent-color: var(--terra); }
.ex-quelle-panel { margin-top: .25rem; }
.ex-quelle-panel[hidden] { display: none; }

/* Sachverhalt-Vorschau: das EINE Artefakt-Blatt der Seite (--karte + --schatten). */
.ex-sv-aktion { margin: 0 0 .75rem; }
.btn-klein { padding: .5rem .9rem; font-size: .88rem; }
.ex-sv-vorschau {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); box-shadow: var(--schatten);
  padding: 1.25rem 1.4rem; margin-top: .25rem;
}
.ex-sv-vorschau[hidden] { display: none; }
.ex-sv-meta {
  font-family: var(--schrift-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--tinte-blass);
  margin: 0 0 .3rem;
}
.ex-sv-vorschau h3 {
  font-family: var(--schrift-sans); font-weight: 600; font-size: 1.05rem;
  margin: 0 0 .9rem; color: var(--tinte);
}
.ex-sv-text {
  white-space: pre-wrap; line-height: 1.65; color: var(--tinte);
  max-height: 22rem; overflow-y: auto; font-size: .96rem;
}
.ex-sv-frame {
  width: 100%; height: 60vh; border: 1px solid var(--linie);
  border-radius: var(--radius-knopf); background: var(--feld-bg);
}
.ex-sv-fuss { margin: .9rem 0 0; font-size: .82rem; color: var(--tinte-leise); }
.ex-sv-leer { margin: 0; color: var(--tinte-blass); font-size: .92rem; }

/* Examensfall-Liste erbt .korr-liste/.korr-card/.badge aus konto.css; hier nur
   ein dezenter Hinweis auf das Rechtsgebiet in der Meta-Zeile. */
.korr-card .zeile .note-stufe { color: var(--tinte-blass); }

/* Gating-Hinweis (nicht eingeloggt / kein Premium): Hairline statt Kasten. */
.gate-hinweis { border-top: 1px solid var(--linie); padding-top: 2rem; margin-top: 1rem; }
.gate-hinweis h2 { margin-top: 0; }
.gate-hinweis p { color: var(--tinte-blass); max-width: 54ch; }

/* JS blendet Abschnitte per [hidden] aus; !important schlägt Flex/Grid-Displays.
   Auf den Wrapper begrenzt, damit die Regel nicht aus dem Modul leckt. */
.ex-wrap [hidden] { display: none !important; }

/* Schmale Viewports: Kopf-Zeile bricht sauber um. */
@media (max-width: 560px) {
  .ex-kopf { flex-direction: column; gap: .2rem; }
}