/* Theme — die EINE Stelle fuer Farben, Schrift und Grundbausteine.
   Ein Rebranding aendert diese Datei; Templates und die anderen CSS-Dateien
   nutzen ausschliesslich die Variablen (kleine Fallbacks var(--app-gold, #EA9D17)
   sind erlaubt, damit ein Partial auch ohne diese Datei nicht kaputt aussieht).

   Standard: dunkel + Gold, Montserrat. */

:root {
  --app-gold: #EA9D17;
  --app-gold-bright: #E5B634;
  --app-gold-soft: rgba(234,157,23,.14);
  --app-bg: #0A0A0A;
  --app-bg-soft: #141414;
  --app-bg-card: #161616;
  --app-text: #FFFFFF;
  --app-text-muted: #EAEAEA;
  --app-text-dim: rgba(255,255,255,.55);
  --app-text-faint: rgba(255,255,255,.35);
  --app-border-soft: rgba(255,255,255,.12);
  --app-danger: #ff6b6b;
  --app-ok: #22C55E;
  --app-info: #5B9BD5;
  /* Recovery-Baender (WHOOP gruen/gelb/rot), auf --app-bg-card nachgemessen:
     Kontrast >= 4:1, jedes Paar auch bei Rot-Gruen-Schwaeche unterscheidbar
     (OKLab-Abstand >= 14). Gruen bewusst tuerkis: ein reines Gruen fiele fuer
     Deuteranope mit dem Rot zusammen. */
  --app-band-gruen: #35D0BA;
  --app-band-gelb: #E3C23B;
  --app-band-rot: #D9434F;
  /* Diagramm-Chrome: Gitter und Achsen zurueckhaltend, Tageswerte als leise Punkte. */
  --app-chart-grid: rgba(255,255,255,.08);
  --app-chart-axis: rgba(255,255,255,.22);
  --app-chart-punkt: rgba(255,255,255,.38);
  /* Zwei Personen im WHOOP-Vergleich: Blau (du) und Orange (die andere Person).
     Auf --app-bg-card nachgemessen (dataviz-Validator): Kontrast >= 3:1, OKLab-
     Abstand 31,8 normal und >= 26,8 bei Rot-Gruen-/Blau-Gelb-Schwaeche. Bewusst
     weder Gold (Akzent) noch die Recovery-Baender, damit keine Bedeutung mitschwingt. */
  --app-person-a: #3987E5;
  --app-person-b: #D95926;
  --app-font-head: 'Montserrat', system-ui, sans-serif;
  --app-font-body: 'Montserrat', system-ui, sans-serif;
  --app-topbar-h: 72px;
  --app-sidebar-w: 212px;
}

/* ── Grundbausteine, die jede Seite nutzt ────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--app-font-body); background: var(--app-bg); color: var(--app-text); min-height: 100vh; }
a { color: var(--app-gold); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 40px 32px; }
.eyebrow { color: var(--app-gold); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
h1 { font-family: var(--app-font-head); font-weight: 900; text-transform: uppercase; font-size: 34px; margin: 8px 0 8px; }
h2 { font-family: var(--app-font-head); font-size: 17px; text-transform: uppercase; margin-bottom: 6px; }
.sub { color: var(--app-text-muted); font-size: 15px; margin-bottom: 28px; line-height: 1.6; max-width: 720px; }

.card { background: var(--app-bg-card); border: 1px solid var(--app-border-soft); padding: 26px; margin-bottom: 22px; }
.card .h-sub { color: var(--app-text-dim); font-size: 13px; margin-bottom: 20px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld--wide { grid-column: 1 / -1; }
label { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--app-text-muted); letter-spacing: .04em; }
label .ro { text-transform: none; font-weight: 400; color: var(--app-text-dim); }
input, select, textarea { padding: 11px; background: var(--app-bg); border: 1px solid var(--app-border-soft);
  color: var(--app-text); font-family: inherit; font-size: 14px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--app-gold); }
input:disabled { opacity: .55; cursor: not-allowed; }
textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
input[type="checkbox"] { width: auto; }

.btn { font-family: var(--app-font-head); font-weight: 800; text-transform: uppercase; font-size: 13px;
  color: var(--app-bg); background: var(--app-gold); border: 2px solid var(--app-gold); padding: 11px 20px;
  cursor: pointer; letter-spacing: .04em; transition: all .2s; }
.btn:hover { background: var(--app-gold-bright); }
.btn:disabled { background: transparent; border-color: var(--app-border-soft); color: var(--app-text-muted); cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--app-gold); }
.btn--ghost:hover { background: var(--app-gold); color: var(--app-bg); }
.btn--sm { padding: 6px 10px; font-size: 11px; }
.btn--danger { border-color: var(--app-danger); color: var(--app-danger); background: transparent; }
.btn--danger:hover { background: var(--app-danger); color: var(--app-bg); }

.formfoot { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.msg { min-height: 18px; font-size: 14px; color: var(--app-danger); }
.msg.ok { color: var(--app-ok); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--app-border-soft); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--app-text-dim); }
tr.inaktiv td { opacity: .5; }

.pill { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 2px; }
.pill.on { background: rgba(34,197,94,.16); color: var(--app-ok); }
.pill.off { background: rgba(255,255,255,.08); color: var(--app-text-dim); }
.pill.warn { background: var(--app-gold-soft); color: var(--app-gold); }

.state { padding: 50px 0; text-align: center; color: var(--app-text-dim); font-size: 14px; }

/* Passwortfeld mit Auge */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display: none; }
.pw-auge { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 42px; display: flex; align-items: center;
  justify-content: center; background: none; border: 0; padding: 0; color: var(--app-text-muted); opacity: .65; cursor: pointer; }
.pw-auge:hover { color: var(--app-gold); opacity: 1; }
.pw-auge:focus-visible { outline: 2px solid var(--app-gold); outline-offset: -2px; }
.pw-auge svg { width: 20px; height: 20px; display: block; }
.pw-auge .strich { display: none; }
.pw-auge[aria-pressed="true"] .strich { display: inline; }

/* Oeffentliche Seiten (Login, Passwort setzen): zentrierte Karte + Wortmarke */
body.zentriert { display: flex; align-items: center; justify-content: center; }
.brand { position: fixed; top: 0; left: 0; height: var(--app-topbar-h); display: flex; align-items: center; padding: 0 24px;
  font-family: var(--app-font-head); font-weight: 900; font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--app-text); text-decoration: none; }
.brand img { display: block; width: 284px; height: auto; }
@media (max-width: 760px) { .brand { padding: 0 16px; } .brand img { width: 172px; } }
.card--login { padding: 40px; width: 100%; max-width: 380px; margin: 0; }
.card--login h1 { font-size: 24px; text-align: center; margin: 0 0 28px; }
.card--login label { display: block; margin: 16px 0 6px; }
.card--login .btn { width: 100%; margin-top: 24px; padding: 14px; }
.hint { font-size: 13px; color: var(--app-text-muted); line-height: 1.5; margin-bottom: 16px; }
.hint--sm { margin-top: 14px; margin-bottom: 0; font-size: 12px; opacity: .8; text-align: center; }
.hint a { color: var(--app-gold); text-decoration: none; }
.step { display: none; }
.step.active { display: block; }

/* hidden-Attribut muss gegen display:flex/grid der Bausteine gewinnen
   (.fld, .row, .grid setzen display und wuerden es sonst ueberstimmen). */
[hidden] { display: none !important; }