/* Konto- & Portalseiten — baut auf style.css (Tokens, Buttons, Header) auf.
   Werkstatt-System: Hairlines gliedern, Kästen sind rationiert. Die frühere
   Schatten-Karte weicht der ruhigen Hairline-Fläche; das „eine Blatt"
   (--karte + --schatten) bleibt echten Artefakten vorbehalten (PDF-Frame).
   Tanne trägt die Lern-Kennzahlen, die Bühne trägt allein die Note. */

.konto-wrap { max-width: 440px; margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
.portal-wrap { max-width: var(--breite-max); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* --- Hairline-Abschnitt (ehem. Schatten-Karte; Klassenname ist API) ---
   Transparent, hairline-oben/unten; gestapelte Abschnitte teilen sich eine
   Linie. Auf den schmalen Auth-Seiten rahmt dasselbe Muster das Formular. */
.karte {
  border: 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 1.75rem 0;
}
.karte + .karte { margin-top: 0; border-top: 0; }
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

/* --- Formulare --- */
.feld { margin-bottom: 1rem; }
.feld label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.feld input, .feld textarea, .feld select {
  width: 100%;
  font: inherit;
  font-family: var(--schrift-sans);
  font-size: 1rem;
  padding: .6rem .75rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-knopf);
  background: var(--feld-bg);
  color: var(--tinte);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--terra);
  background: var(--fokus-bg);
}
.btn-block { display: block; width: 100%; cursor: pointer; }
.form-fuss { margin-top: 1rem; font-size: .9rem; color: var(--tinte-blass); text-align: center; }
/* Erklärender Hinweistext im Formularkopf (z. B. Passwort-Reset) */
.form-intro { color: var(--tinte-blass); font-size: .95rem; margin: 0 0 1.25rem; }

/* --- Meldung = Randbemerkung: 3px-Lineal, -tief-Text, transparenter Grund --- */
.meldung {
  margin-top: 1rem;
  font-size: .9rem;
  padding: .15rem 0 .15rem .9rem;
  border: 0;
  border-left: 3px solid var(--linie);
  border-radius: 0;
  background: transparent;
  display: none;
}
.meldung.aktiv { display: block; }
.meldung.fehler { border-left-color: var(--rot); color: var(--rot-tief); }
.meldung.ok { border-left-color: var(--gruen); color: var(--gruen-tief); }

/* --- Abo-Status: ruhige Hairline-Zeile statt gefüllter Kachel --- */
.abo-banner {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: 1rem .15rem; margin-bottom: 1.5rem;
}
.quota { font-family: var(--schrift-mono); font-weight: 600; color: var(--tinte); }
.abo-banner .btn { margin-left: auto; }

/* --- Korrektur-Liste: Hairline-Katalog, eine Spalte, kein Kasten --- */
.korr-liste {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linie);
}
.korr-card {
  display: flex; flex-direction: column; min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 1.25rem .15rem;
}
.korr-liste .karte { border-top: 0; }
.korr-card .titel { font-family: var(--schrift-sans); font-weight: 600; font-size: 1.1rem; margin: 0 0 .4rem; overflow-wrap: break-word; }
.korr-card .zeile { color: var(--tinte-blass); font-size: .9rem; margin: 0 0 .75rem; }
.korr-card .btn { margin-top: .25rem; align-self: flex-start; }

/* --- Badges (Status, Outline + semantische Farbe, kein Rot als Akzent) --- */
.badge {
  display: inline-block; font-family: var(--schrift-mono); font-size: .68rem;
  padding: .1rem .5rem; border-radius: 999px; border: 1px solid currentColor;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 500; vertical-align: middle;
}
.badge.fertig { color: var(--gruen); }
.badge.in_bearbeitung { color: var(--bernstein); }
.badge.offen { color: var(--tinte-blass); }

/* --- Noten-Bühne: die eine dunkle Ergebnis-Bühne der Korrektur-Ansicht.
   Note als Zahlen-Bühne in --ziffer, Beitext in --auf-buehne. --- */
.note-buehne {
  border: 0;
  border-radius: var(--radius);
  background: var(--buehne);
  color: var(--auf-buehne);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 .75rem;
}
.note-buehne .note-gross {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ziffer);
}
.note-buehne .note-stufe {
  font-family: var(--schrift-sans);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--auf-buehne);
}
.note-buehne p { color: var(--auf-buehne); max-width: 60ch; margin: 1.1rem 0 0; }
.note-buehne :focus-visible { outline-color: var(--auf-buehne-leise); }

/* Grundstil außerhalb der Bühne (Punkte-Angabe in Listen) */
.note-gross { font-family: var(--schrift-sans); font-size: 2rem; color: var(--tinte); font-weight: 600; }
.note-stufe { color: var(--tinte-blass); font-weight: 400; }

/* --- Votum-Abschnitte --- */
.votum-abschnitt h3 { margin-top: 1.25rem; }
.votum-abschnitt p { white-space: pre-wrap; }

/* --- Fehlertabelle --- */
.tab-wrap { overflow-x: auto; }
table.fehler { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.fehler th, table.fehler td { padding: .45rem .55rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
table.fehler th {
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinte-blass);
}
.sev {
  font-family: var(--schrift-mono); font-size: .66rem; padding: .08rem .45rem; border-radius: 999px;
  border: 1px solid currentColor; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
}
.sev.leicht { color: var(--gruen); }
.sev.mittel { color: var(--bernstein); }
.sev.schwer { color: var(--rot); }

/* --- PDF-Ansicht: der Frame ist das „eine Blatt" der Seite --- */
.pdf-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
/* Aktiv-Zustand (CSS-Hook): gewählter Tab als getönte Auswahlfläche */
.pdf-tabs .btn.is-aktiv,
.pdf-tabs .btn[aria-pressed="true"] {
  background: var(--terra-blass);
  border-color: var(--terra);
  color: var(--terra-tief);
}
.pdf-frame {
  width: 100%; height: 80vh;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten);
}

/* --- Gutachtenstil-Legende --- */
.gs-legende { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1rem; font-size: .85rem; }
.gs-legende span { display: inline-flex; align-items: center; gap: .4rem; }
.gs-swatch { width: 1rem; height: 1rem; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinte) 18%, transparent); }

/* --- Sterne-Feedback: interaktiv → Klickfarbe Terra (Bernstein bleibt
   Warte-Status); button-Reset für fokussierbare Stern-Buttons. --- */
.sterne { font-size: 1.6rem; cursor: pointer; color: var(--linie); user-select: none; margin: 0 0 .75rem; }
.sterne .stern { background: none; border: 0; padding: 0 .05em; font: inherit; font-size: inherit; color: inherit; cursor: pointer; line-height: 1; }
.sterne .stern:hover { color: var(--terra-tief); }
.sterne .stern.aktiv { color: var(--terra); }

/* --- KPI: Hairline-Block mit 3px-Linksmarker, Wert als Fraunces-Zahl --- */
.kpi-reihe { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; margin-bottom: 2rem; }
.kpi {
  flex: 1 1 150px;
  border: 0;
  border-left: 3px solid var(--linie);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: .2rem 0 .2rem 1rem;
}
.kpi .wert {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--tinte);
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi .label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
  margin-top: .2rem;
}
/* Lern-Kennzahlen (Fortschritt): die ruhende Lern-Tinte */
.kpi-lern { border-left-color: var(--tanne); }
.kpi-lern .wert { color: var(--tanne); }
/* Kern-KPI der Seite: Zahlen-Bühnen-Skala */
.kpi-kern .wert { font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1; letter-spacing: -.02em; }
/* Status-Deltas bleiben Statusfarbe (Text, nie Fläche) */
.kpi .wert.verbessert { color: var(--gruen); }
.kpi .wert.wiederholung { color: var(--rot); }

/* --- Notentrend: Balken in Tanne (Lernfortschritt), Status nur als Text ---
   Höhe = 140px Balkenskala + Luft für die absoluten Wert-/Datums-Marker. */
.trend-chart { display: flex; align-items: flex-end; gap: .5rem; height: calc(140px + 3.5rem); padding: 2rem 0 1.5rem; }
.trend-bar { flex: 1; background: var(--tanne); border-radius: 3px 3px 0 0; min-height: 4px; position: relative; }
.trend-bar span { position: absolute; top: -1.3rem; left: 0; right: 0; text-align: center; font-family: var(--schrift-mono); font-size: .75rem; color: var(--tinte-blass); }
.trend-bar small { position: absolute; bottom: -1.4rem; left: 0; right: 0; text-align: center; font-family: var(--schrift-mono); font-size: .68rem; color: var(--tinte-blass); }
/* Status als Klein-/Fließtext → -tief-Stufen (AA); die großen KPI-Werte
   oben behalten die kräftigen Stufen (Großtext ≥3:1). */
.wiederholung { color: var(--rot-tief); font-weight: 600; }
.verbessert { color: var(--gruen-tief); font-weight: 600; }

/* --- Zuhause (mein-bereich): kuratierte Übersicht über beide Welten -------
   Eine Sprache: Haarlinien und Mono-Marker tragen die Abschnitte, keine
   zweite Kachel-Optik. Korrektur-Liste, KPIs und Modul-Katalog bleiben die
   bereits gesetzten Bausteine. */
.home-abschnitt { margin-top: 2.75rem; }

/* Abschnitts-Marker im Katalog-Ton — folgt der einen Eyebrow-Definition
   (11px Mono, .14em, --tinte-blass). Rechts darf ein ruhiger Sekundär-Link
   stehen (z. B. „Ganzer Verlauf"). */
.home-titel {
  font-family: var(--schrift-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  flex-wrap: wrap;
}
.home-titel a {
  font-family: var(--schrift-sans);
  font-size: .9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Weitermachen — Haarlinien-Liste echter nächster Schritte, keine Kacheln. */
.weiter-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.weiter-eintrag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  flex-wrap: wrap;
  padding: 1rem .15rem;
  border-bottom: 1px solid var(--linie);
}
.weiter-text { margin: 0; color: var(--tinte); max-width: 60ch; }
.weiter-text .leise { color: var(--tinte-blass); font-weight: 400; }
.weiter-aktion { white-space: nowrap; }

/* Korrekturen im Zuhause: gesetzter Katalog (Haarlinien), keine Kachel-Optik. */
.korr-eintrag-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.korr-eintrag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem .15rem;
  border-bottom: 1px solid var(--linie);
}
.korr-haupt { min-width: 0; }
.korr-titel {
  font-family: var(--schrift-sans);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 .25rem;
  color: var(--tinte);
  overflow-wrap: break-word;
}
.korr-meta { margin: 0; font-size: .9rem; color: var(--tinte-blass); }
.korr-aktion { white-space: nowrap; }
.korr-warte { font-size: .9rem; color: var(--tinte-leise); }