/* Das Konto gehört zu stellium.club: Nachtblau, Gold, Newsreader + Instrument Sans wie die Hauptseite
   (stellium-site-neu/src/style.css). Leitwert behält sein eigenes Aussehen unter /leitwert/. */
@font-face { font-family: "Newsreader"; src: url(schrift/newsreader.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(schrift/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root:not(#_) {
  color-scheme: dark;
  --grund: #080a14; --flaeche: #10132a; --flaeche-2: #0d1022; --text: #e8e4d8; --text-2: #b4afc2; --text-3: #9a96a8;
  --linie: #22284d; --akzent: #d4b56e; --auf-akzent: #1a1406; --akzent-weich: rgba(212, 181, 110, 0.16); --tint: #d4b56e;
  --gut: #6fcf97; --gut-weich: rgba(111, 207, 151, 0.14); --schlecht: #ff7b72; --schlecht-weich: rgba(255, 123, 114, 0.14);
  --warn: #f0b36b; --warn-weich: rgba(240, 179, 107, 0.14);
  --material: rgba(10, 12, 24, 0.82); --schatten-1: 0 0 0 1px #1d2140; --schatten-2: 0 0 0 1px #2a2f55, 0 24px 60px rgba(0, 0, 0, 0.5);
  --schrift-schild: "Newsreader", "Iowan Old Style", Georgia, serif;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: radial-gradient(120% 60% at 50% -10%, #141935 0%, #080a14 60%) fixed, #080a14; }
h1, .t1, h2, .t2 { font-weight: 400; letter-spacing: -0.01em; color: #efe9dc; }
.leiste { background: var(--material); border-bottom: 1px solid #1d2140; }
.marke-stellium { font-family: "Newsreader", Georgia, serif; font-size: 22px; letter-spacing: 6px; color: var(--text); text-decoration: none; white-space: nowrap; }
.marke-stellium span { color: var(--akzent); }
.marke-stellium small { margin-left: 14px; font-family: "Instrument Sans", sans-serif; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--text-3); }
.leiste nav a { color: var(--text-2); }
.leiste nav a:hover { color: var(--text); background: transparent; }
.knopf { font-weight: 500; letter-spacing: 0.01em; }
.knopf:hover { filter: none; background: #f0d9a4; }
.knopf.zweit, .knopf.leise { background: transparent; }
.knopf.zweit:hover, .knopf.leise:hover { background: transparent; color: #efe9dc; }
.feld input { background: #0d1022; border-color: #2a2f55; }
/* Fuß unten halten, ohne zu raten, wie hoch Kopf und Fuß sind (die Schätzung 200 px ließ die Seite auf dem Handy scrollen). */
body { display: flex; flex-direction: column; }
.konto-haupt { flex: 1 0 auto; padding: clamp(32px, 7vw, 80px) var(--rand) 24px; }
.konto-haupt:focus { outline: none; }
.formular { max-width: 420px; margin: 0 auto; display: grid; gap: 18px; }
.formular > * { min-width: 0; }
.formular form { display: grid; gap: 18px; }   /* gap von .formular wirkt nur auf das <form> selbst, nicht auf seine Felder */
.formular form > * { min-width: 0; }
.formular h1 { text-align: center; }
.formular > .unter { text-align: center; margin: -6px 0 6px; font-size: 1.0625rem; }
.formular .unten { text-align: center; font-size: 0.9375rem; color: var(--text-2); }
.formular .zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 400px) { .formular .zeile { font-size: 0.875rem; } }
.stern-gross { width: 64px; height: 64px; margin: 0 auto 4px; }
.staerke { height: 4px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.staerke i { display: block; height: 100%; width: calc(var(--wert, 0) * 100%); background: var(--schlecht); transition: width 0.3s, background 0.3s; }
.staerke.mittel i { background: var(--warn); } .staerke.gut i { background: var(--gut); }
.passwort-feld { position: relative; }
.passwort-feld input { width: 100%; padding-right: 74px; }
.zeigen { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 10px; font-size: 0.875rem; }
.uebersicht { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; }
.uebersicht > h1 { margin-bottom: 4px; }
.gruppe { padding: 6px 0; }
.gruppe h2 { font-family: var(--schrift-schild); font-size: 1.375rem; font-weight: 400; letter-spacing: 0; color: #efe9dc; padding: 18px 20px 6px; }
.eintrag { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; min-height: 56px; }
.eintrag + .eintrag { border-top: 1px solid var(--linie); }
.eintrag .links { display: grid; gap: 2px; min-width: 0; }
.eintrag .links span:first-child { font-weight: 500; }
.eintrag .klein { overflow-wrap: anywhere; }
.etikett { font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 980px; white-space: nowrap; }
.etikett.gut { background: var(--gut-weich); color: var(--gut); }
.etikett.warn { background: var(--warn-weich); color: var(--warn); }
.etikett.info { background: var(--tint-weich); color: var(--tint); }
.knopf.gefahr { background: var(--schlecht-weich); color: var(--schlecht); }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font: 600 1rem ui-monospace, "SF Mono", Menlo, monospace; padding: 14px; border-radius: 12px; background: var(--flaeche-2); }
.geheim { font: 600 0.9375rem ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; padding: 12px; border-radius: 12px; background: var(--flaeche-2); user-select: all; }
.code-feld { width: 100%; min-width: 0; text-align: center; font: 600 1.75rem/1 ui-monospace, "SF Mono", Menlo, monospace !important; letter-spacing: 0.4em; height: 64px !important; }
.unten .knopf.leise { min-height: 0; padding: 0; font-size: inherit; font-weight: 500; }
.leiste nav a { white-space: nowrap; }