/* rechtliches.css — schlichtes Layout für Impressum & Datenschutzerklärung.
   Nutzt dieselben Grundfarben wie style.css, aber ohne die Kulisse/Blur im
   Hintergrund (body::before) - reiner Lesetext braucht keine Bühne. */

body.rechtliches-seite::before {
  content: none;
}

body.rechtliches-seite {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.25rem 4rem;
}

.rechtliches-box {
  width: 100%;
  max-width: 42rem;
  line-height: 1.6;
}

.rechtliches-box h1 {
  color: #ffd23f;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}

.rechtliches-box h2 {
  color: #ffd23f;
  font-size: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.rechtliches-box p,
.rechtliches-box li {
  color: #d0d0d8;
}

.rechtliches-box a {
  color: #ffd23f;
}

.rechtliches-box ul {
  padding-left: 1.25rem;
}

.rechtliches-zurueck {
  margin-bottom: 1.5rem;
}

.rechtliches-zurueck a {
  color: #9a9aa8;
  text-decoration: none;
}

.rechtliches-zurueck a:hover {
  text-decoration: underline;
}

.rechtliches-stand {
  margin-top: 2.5rem;
  color: #707081;
  font-size: 0.85rem;
}

/* Formulare auf den Konto-Seiten (Registrieren, künftig Login/Passwort-Reset,
   siehe tickets/01-backend-auth/). Bewusst hier statt einer eigenen Datei -
   dieselbe schlichte "Lesetext"-Bühne wie Impressum/Datenschutz passt auch
   für ein kurzes Formular. */
.konto-formular {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.konto-formular label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: #d0d0d8;
}

.konto-formular input {
  background: #1a1a22;
  border: 1px solid #35353f;
  border-radius: 0.4rem;
  padding: 0.6rem 0.7rem;
  color: #f0f0f5;
  font-size: 1rem;
}

.konto-formular input:focus {
  outline: 2px solid #ffd23f;
  outline-offset: 1px;
}

.konto-formular button {
  background: #ffd23f;
  color: #1a1a12;
  border: none;
  border-radius: 0.4rem;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.konto-formular button:disabled {
  opacity: 0.6;
  cursor: default;
}

.konto-hinweis {
  font-size: 0.85rem;
  color: #9a9aa8;
}

/* Umschalter zwischen "Mit E-Mail" und "Ohne E-Mail" auf registrieren.html
   (siehe BE-06). */
.konto-modus-umschalter {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.konto-modus-btn {
  flex: 1;
  background: #1a1a22;
  border: 1px solid #35353f;
  border-radius: 0.4rem;
  padding: 0.5rem 0.7rem;
  color: #9a9aa8;
  font-size: 0.9rem;
  cursor: pointer;
}

.konto-modus-btn.aktiv {
  border-color: #ffd23f;
  color: #ffd23f;
}

/* Honeypot-Feld: für Menschen unsichtbar (nicht per display:none - manche
   Bots überspringen genau das gezielt), für Formular-Bots aber ein ganz
   normales, ausfüllbares Textfeld. Siehe BE-06 / server/src/routes/auth.js. */
.konto-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Profilseite (profil.html, PROFIL-01). Der Anzeigename steht bewusst groß
   ganz oben: das ist die eine Information, wegen der man diese Seite
   überhaupt aufruft. */
.profil-anzeigename {
  font-size: 1.05rem;
  color: #b8b8c4;
  margin-bottom: 0.3rem;
}

.profil-anzeigename strong {
  color: #ffd23f;
}

/* Lektionsauswahl auf der Profilseite (PROFIL-04). Bewusst eine schlichte
   Liste mit Checkboxen statt Kacheln: es können mit eigenen
   Lehrwerks-Lektionen schnell viele Einträge werden, und eine Liste bleibt
   dabei überschaubar und auf dem Handy bedienbar. */
#profil-lektionen-bereich {
  margin-top: 2rem;
}

#profil-lektionen-bereich h2 {
  font-size: 1.05rem;
  color: #ffd23f;
  margin-bottom: 0.4rem;
}

/* Avatar auf der Profilseite (PROFIL-02). */
.profil-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

#profil-avatar-bereich {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #35353f;
  background: #14141b;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Das gespeicherte Bild ist quadratisch (der Server schneidet zu), der
   runde Rahmen kommt allein aus dem border-radius oben - so sieht auch
   eine lokale Vorschau mit anderem Seitenverhältnis schon richtig aus. */
#profil-avatar-bereich img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#profil-avatar-platzhalter {
  font-size: 2.4rem;
  opacity: 0.5;
}

#profil-avatar-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Ein <label>, das wie ein Knopf aussieht: das echte Datei-Feld ist
   versteckt (siehe profil.html), damit es sich überhaupt gestalten lässt. */
.knopf-artig,
#profil-avatar-aktionen button {
  background: #1a1a22;
  border: 1px solid #35353f;
  border-radius: 0.4rem;
  color: #d8d8e2;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.knopf-artig:hover,
#profil-avatar-aktionen button:hover {
  border-color: #ffd23f;
  color: #ffd23f;
}

#profil-avatar-speichern-knopf {
  background: #ffd23f;
  border-color: #ffd23f;
  color: #14141b;
  font-weight: bold;
}

#profil-avatar-speichern-knopf:hover {
  background: #ffdd6b;
  color: #14141b;
}

#profil-avatar-speichern-knopf:disabled,
#profil-avatar-aktionen button:disabled {
  opacity: 0.6;
  cursor: default;
}

#profil-avatar-status:not(:empty) {
  margin-top: 0.6rem;
}

/* Lernfortschritt auf der Profilseite (PROFIL-05). Balken und Zahlenzeilen
   selbst kommen aus style.css (.fortschritt-*) - dieselben Regeln wie im
   Spiel, damit beide Anzeigen gleich aussehen. Hier steht nur, wie der
   Block auf dieser Seite eingebettet ist. */
#profil-fortschritt-bereich {
  margin-top: 2rem;
}

#profil-fortschritt-bereich h2 {
  font-size: 1.05rem;
  color: #ffd23f;
  margin-bottom: 0.6rem;
}

#profil-fortschritt-lektionen {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.fortschritt-lektion h3 {
  font-size: 0.9rem;
  color: #c8c8d4;
  margin: 0 0 0.35rem;
  font-weight: normal;
}

/* --- Gefahrenzone + Löschdialog (BE-07) ---------------------------------- */

/* Sichtbar abgesetzt vom Rest der Profilseite: roter Rahmen, großer
   Abstand nach oben. Wer hier landet, soll merken, dass er den Bereich
   für alltägliche Einstellungen verlassen hat. */
#profil-gefahrenzone {
  margin-top: 3.5rem;
  border: 1px solid rgba(220, 90, 90, 0.4);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem 1.25rem;
}

#profil-gefahrenzone h2 {
  color: #ff9d9d;
  margin-top: 0.5rem;
}

#konto-loeschen-oeffnen {
  background: transparent;
  border: 1px solid rgba(220, 90, 90, 0.6);
  border-radius: 0.4rem;
  color: #ff9d9d;
  font: inherit;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

#konto-loeschen-oeffnen:hover {
  background: rgba(220, 90, 90, 0.12);
}

#konto-loeschen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 7, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* .verborgen (style.css) setzt display:none - das muss die display:flex
   von oben überstimmen, deshalb hier ausdrücklich wiederholt. */
#konto-loeschen-overlay.verborgen {
  display: none;
}

#konto-loeschen-box {
  background: #14141b;
  border: 2px solid rgba(220, 90, 90, 0.55);
  border-radius: 12px;
  padding: 18px 20px;
  width: 640px;
  max-width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  line-height: 1.6;
}

#konto-loeschen-box h2 {
  margin: 0 0 0.5rem;
  color: #ff9d9d;
  font-size: 1.15rem;
}

#konto-loeschen-box h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: #ffd23f;
}

.loeschen-warnung {
  color: #ff9d9d;
  font-weight: 600;
  margin: 0 0 1rem;
}

#konto-loeschen-verlust {
  margin: 0.5rem 0 1rem;
  padding-left: 1.25rem;
  color: #d0d0d8;
  font-size: 0.92rem;
}

.loeschen-huerde {
  margin-top: 1.25rem;
  border-top: 1px solid #2c2c36;
  padding-top: 1rem;
}

.loeschen-huerde input {
  background: #1a1a22;
  border: 1px solid #35353f;
  border-radius: 0.4rem;
  padding: 0.55rem 0.7rem;
  color: #f0f0f5;
  font-size: 1rem;
  width: 100%;
  margin-top: 0.4rem;
}

.loeschen-huerde input:focus {
  outline: 2px solid #ffd23f;
  outline-offset: 1px;
}

/* Die drei Rechenaufgaben nebeneinander, auf dem Handy untereinander. */
#konto-loeschen-aufgaben {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.loeschen-aufgabe {
  flex: 1 1 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: #d0d0d8;
  font-variant-numeric: tabular-nums;
}

.loeschen-aufgabe input {
  background: #1a1a22;
  border: 1px solid #35353f;
  border-radius: 0.4rem;
  padding: 0.5rem 0.6rem;
  color: #f0f0f5;
  font-size: 1rem;
  width: 100%;
}

/* Der abzutippende Satz: als Zitat abgesetzt, damit klar ist, wo er
   anfängt und aufhört. Auswählbar - Kopieren ist ausdrücklich erlaubt. */
#konto-loeschen-satz-vorlage {
  background: #101017;
  border-left: 3px solid #ffd23f;
  border-radius: 0.25rem;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0 0;
  color: #d8d8e2;
  font-size: 0.92rem;
}

#konto-loeschen-aktionen {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Abbrechen ist die Voreinstellung und steht deshalb zuerst und ruhiger -
   der gefährliche Knopf ist der auffällige, aber nicht der bequemste. */
#konto-loeschen-abbrechen {
  flex: 1 1 10rem;
  background: #1a1a22;
  border: 1px solid #35353f;
  border-radius: 0.4rem;
  color: #f0f0f5;
  font: inherit;
  padding: 0.7rem 1rem;
  cursor: pointer;
}

#konto-loeschen-bestaetigen {
  flex: 1 1 14rem;
  background: #b53a3a;
  border: none;
  border-radius: 0.4rem;
  color: #fff0f0;
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1rem;
  cursor: pointer;
}

#konto-loeschen-bestaetigen:disabled {
  background: #3a2a2a;
  color: #8a7a7a;
  cursor: not-allowed;
}

#konto-loeschen-status:empty {
  display: none;
}

#konto-loeschen-status {
  margin-top: 1rem;
}

/* ===========================================================================
   Lektionsauswahl nach Lehrwerk (WORT-01) und Grammatik-Stand (WORT-03)
   =========================================================================== */

/* Zweiter Fortschrittsblock: Grammatik (SATZ-01). Getrennt von den Vokabeln,
   weil Satzfragen im SRS unter eigenen Schlüsseln laufen. */
#profil-fortschritt-grammatik h3 {
  margin: 16px 0 6px;
  font-size: 0.95rem;
  color: #ffd23f;
}
.grammatik-fortschritt-liste {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.85rem;
  color: #c8c8d4;
}