/* Orbit-Gestalt fuer account. Liegt NACH den Stilen des Bestands und
   ueberschreibt sie gezielt. Hier wird NICHTS an der Funktion geaendert. */

/* ══════════════════════════════════════════════════════════════════════════
   KONTO-SEITE — Orbit-Gestalt über der Struktur des Bestands
   ══════════════════════════════════════════════════════════════════════════
   Betreiber: „dieselben Funktionen wie vorher und dieselbe Struktur wie
   vorher", und für das Aussehen ist die Startseite der Massstab.

   Angefasst werden Farbe, Kante, Radius, Schrift. NICHT angefasst werden
   `display`, `position`, `.open`, `[hidden]` und `aria-*` — die Seite schaltet
   ihre Felder selbst um, und das ist Verhalten.
   ========================================================================== */

/* ── Gerüst ──────────────────────────────────────────────────────────────── */
/* BETREIBER-BEFUND 27.08., am Handy: „glitcht rum und kann nicht weiter hoch
   scrollen". Ursache stand genau hier.

   Diese Regel hiess:

       .acc-wrap, .profile-wrap { … padding: 0 var(--pad-x); }

   Die Kurzschreibweise setzt AUCH oben und unten, und zwar auf null. Was die
   Seite dadurch verlor (beides steht in `account.html` selbst, das externe
   Blatt wird nur spaeter geladen und gewinnt):

       .acc-wrap      Zeile  24   padding: 100px 20px 60px   ->  0
       .profile-wrap  Zeile 216   padding: 36px 28px 28px    ->  0

   Und `#nav` ist `position: fixed`. Ohne die 100px oben rutscht der
   Seiteninhalt UNTER die feste Leiste, und weil die Seite dann schon bei
   Bildlaufposition 0 steht, laesst er sich nicht hervorholen — genau das,
   was der Betreiber als „kann nicht weiter hoch scrollen" beschreibt. Auf
   seinem Bildschirmfoto ist der Profil-Avatar oben abgeschnitten.

   Behoben wird es NICHT, indem die alten Zahlen hier wiederholt werden — die
   stehen schon in der Seite und gehoeren dorthin. Es genuegt, nur die
   waagerechten Werte zu setzen. Die Breite und der seitliche Abstand bleiben
   damit die Gestaltung dieses Blattes, der senkrechte Rhythmus bleibt der der
   Seite.

   Merksatz, der ueber diese Zeile hinausgeht: der Kopf dieser Datei sagt
   selbst „NICHT angefasst werden `display`, `position` …" — `padding` an
   einer Geruest-Klasse ist genauso Layout und gehoert in dieselbe Liste. */
.acc-wrap, .profile-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.acc-body  { color: var(--ink); }

.acc-card, .sec-section, .twofa-box, .del-panel, .pw-panel, .name-edit-panel, .agb-box {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

/* ── Reiter ───────────────────────────────────────────────────────────────
   `.acc-tab` wird vom Bestand mit einer eigenen Klasse als aktiv markiert;
   hier nur Farbe und Form, die Markierung selbst bleibt seine Sache. */
.acc-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
.acc-tab {
  color: var(--ink-mute);
  border-radius: var(--r-s) var(--r-s) 0 0;
  font-family: var(--font-body);
  font-size: .95rem;
}
.acc-tab:hover { color: var(--ink); background: var(--bg-2); }
.acc-tab.active { color: var(--ink); border-bottom: 2px solid var(--blurple); }

/* ── Felder ───────────────────────────────────────────────────────────────── */
.acc-input, .twofa-input, .qr-secret {
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  color: var(--ink);
  font-family: var(--font-body);
}
.acc-input:focus, .twofa-input:focus { border-color: var(--blurple); outline: none; }
.qr-secret { font-family: var(--font-mono); letter-spacing: .06em; }
.qr-wrap { background: #fff; border-radius: var(--r-s); padding: 10px; }

/* ── Meldungen ────────────────────────────────────────────────────────────
   Erfolg und Fehler müssen sich UNTERSCHEIDEN, und zwar nicht nur farblich:
   wer rot und grün nicht trennen kann, braucht die Kante links als zweites
   Merkmal. */
.acc-ok, .success {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-s);
  color: var(--ink);
}
.acc-err {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--pink);
  border-radius: var(--r-s);
  color: var(--ink);
}

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */
.acc-btn, .sec-btn, .discord-btn, .btn-ghost2, .profile-redeem-btn, .mykey-redeem {
  border-radius: var(--r-s);
  font-family: var(--font-body);
  transition: background-color .18s ease, border-color .18s ease;
}
.acc-btn, .profile-redeem-btn, .mykey-redeem {
  background: var(--blurple); border: 1px solid var(--blurple); color: #fff;
}
.acc-btn:hover, .profile-redeem-btn:hover { background: var(--blurple-2); }
.sec-btn, .btn-ghost2 { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.discord-btn { background: #5865f2; border: 1px solid #5865f2; color: #fff; }

/* Löschen und Abmelden sind die zwei Knöpfe, die etwas wegnehmen. Sie tragen
   deshalb die Warnfarbe — aber nur als Kontur: ein voll gefärbter roter Knopf
   lädt zum Klicken ein, und das soll er hier nicht. */
.btn-del, .del-btn { background: transparent; border: 1px solid var(--pink); color: var(--pink); }
.btn-logout { background: transparent; border: 1px solid var(--line-2); color: var(--ink-mute); }
.btn-admin  { background: transparent; border: 1px solid var(--violet); color: var(--violet); }

/* ── Profil ───────────────────────────────────────────────────────────────── */
.profile-avatar { border-radius: 50%; border: 2px solid var(--line-2); }
.profile-avatar.has-img { border-color: var(--blurple); }
.avatar-cam { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 50%; }
.profile-name-row { gap: 10px; }
.profile-meta { color: var(--ink-mute); font-size: .9rem; }
.profile-actions { gap: 8px; }
.name-edit-btn { color: var(--ink-mute); }
.name-edit-btn:hover { color: var(--ink); }

.role-badge {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .05em;
  padding: 3px 9px;
}

/* ── Sicherheit ───────────────────────────────────────────────────────────── */
.sec-row { border-bottom: 1px solid var(--line); }
.sec-row-title { color: var(--ink); font-weight: 600; }
.sec-row-sub, .sec-row-info { color: var(--ink-mute); font-size: .88rem; }

/* ── Empfehlungen ─────────────────────────────────────────────────────────── */
.ref-stats { gap: 12px; }
.ref-stat { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-s); }
.ref-stat-num { font-family: var(--font-head); font-size: 1.5rem; color: var(--ink); }
.ref-stat-lbl { color: var(--ink-mute); font-size: .8rem; }
.ref-desc { color: var(--ink-mute); }
.ref-link-row { background: var(--bg-0); border: 1px solid var(--line-2); border-radius: var(--r-s); }

/* ── Konto löschen ────────────────────────────────────────────────────────
   Die eine Fläche der Seite, die etwas endgültig macht. Sie darf sich
   abheben — aber der Text bleibt ruhig lesbar, nicht alarmrot. */
.del-panel { border-color: var(--pink); }
.del-text  { color: var(--ink); }
.del-liste { color: var(--ink-mute); }
.del-sicher { color: var(--pink); font-weight: 600; }

/* ── Zustimmung und Trennlinien ───────────────────────────────────────────── */
.agb-kopf { color: var(--ink); font-weight: 600; }
.agb-pflicht { color: var(--pink); }
.agb-auchdiscord { color: var(--ink-mute); font-size: .88rem; }
.or-divider { color: var(--ink-faint); }
.or-divider::before, .or-divider::after { border-top: 1px solid var(--line); }

/* ── 2FA-Fenster ──────────────────────────────────────────────────────────
   Der Betreiber hat es ausdrücklich als FENSTER verlangt. Der Bestand bringt
   es mit (`twofaOverlay`, `.open`); hier bekommt es nur den neuen Ton. Die
   Sichtbarkeit hängt weiter allein an `.open`. */
.twofa-overlay { background: rgba(3, 5, 10, .72); backdrop-filter: blur(6px); }
.twofa-box { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.twofa-input { font-family: var(--font-mono); font-size: 1.3rem; letter-spacing: .3em; text-align: center; }

/* ── Kleinkram ────────────────────────────────────────────────────────────── */
.scroll-progress { background: var(--grad-brand); }
.ad-inline { border: 1px dashed var(--line); border-radius: var(--r-s); }