/*
 * static/haut/woijd.css – die Haut „woijd“: timeTrack als Produkt für zahlende Betriebe (Marke woijd, core/marke.py).
 *
 * Werte aus dem woijd Markenbuch (Papier #F5F5F2, Graphit #1D1D1F, Moos #2E6B4F als einziger Akzent, Spross #8CC79A,
 * Nachtwald #121614, Schrift Manrope) und dem woijd Industrial Design Guide 1.1 (Kopf wie ein Gerätesockel in
 * Graphit, Haarlinien statt Schatten, Beschriftung in Versalien mit Sperrung, Signalfarben nach EN 60204-1:
 * Spross läuft/bereit, Blau du bist dran, Gelb Achtung, Rot Stopp). Unsere eigene Instanz sieht diese Haut nie –
 * sie trägt Marke „woidsiederei“ (haut.js filtert die Liste).
 *
 * Alles unter html[data-haut="woijd"]. Der zweite Attributwähler ([data-theme]) hebt die Spezifität über
 * hub-rahmen.css (html[data-haut]:not([data-haut="bsc"]) färbt dort den Kopf in die Hauptfarbe).
 */
@font-face {
  font-family: "Manrope";
  src: url("/static/woijd/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

html[data-haut="woijd"][data-theme] {
  --bg: #f5f5f2; --bg2: #ecece7;
  --surface: #ffffff; --surface2: #f5f5f2; --hover: rgba(46, 107, 79, .06);
  --border: #deded8; --text: #1d1d1f; --text-dim: #5e5e5a;
  --primary: #2e6b4f; --primary-h: #24563f; --on-primary: #ffffff; --secondary: #2e6b4f;
  --success: #2e6b4f; --warning: #a8781a; --danger: #c2412f;
  --shadow: rgba(29, 29, 31, .08);
  --radius: 8px;
  --hbg: #1d1d1f; --htx: #f5f5f2;
  --woijd-spross: #8cc79a; --woijd-lichtung: #bfe0c4; --woijd-blau: #4e8fd6; --woijd-gelb: #e5b53a; --woijd-rot: #e05545;
}
html[data-haut="woijd"][data-theme="dark"] {
  --bg: #121614; --bg2: #0e1311;
  --surface: #18201c; --surface2: #1d2622; --hover: rgba(140, 199, 154, .07);
  --border: #2a332e; --text: #f2f2ee; --text-dim: #a3aba6;
  --primary: #8cc79a; --primary-h: #a3d4ad; --on-primary: #121614; --secondary: #2e6b4f;
  --success: #8cc79a; --warning: #e5b53a; --danger: #e05545;
  --shadow: rgba(0, 0, 0, .4);
  --hbg: #0c0f0d; --htx: #f2f2ee;
}

html[data-haut="woijd"] body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -.003em;
}
html[data-haut="woijd"] button, html[data-haut="woijd"] input, html[data-haut="woijd"] select, html[data-haut="woijd"] textarea { font-family: inherit; }

/* ── Kopf: Graphit wie der Sockel einer woijd-Maschine, Wortmarke statt Anton-Schrift ── */
html[data-haut="woijd"] .hr-kopf { box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
html[data-haut="woijd"] .hr-logo-img { height: 22px; opacity: 1; border-radius: 0; }
html[data-haut="woijd"] .hr-logo-main, html[data-haut="woijd"] .hr-logo-sub { display: none; }
html[data-haut="woijd"] .hr-pill, html[data-haut="woijd"] .hr-uhr, html[data-haut="woijd"] .hr-fuss {
  font-family: "Manrope", system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
html[data-haut="woijd"] .hr-pill { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-weight: 600; letter-spacing: .04em; }
html[data-haut="woijd"] .hr-pill.online .hr-dot { background: var(--woijd-spross); animation: none; }   /* bereit = ruhig, nie blinkend (SIG-02) */
html[data-haut="woijd"] .hr-pill.offline .hr-dot { background: var(--woijd-rot); }
html[data-haut="woijd"] .hr-uhr { font-size: 13px; font-weight: 600; opacity: .7; letter-spacing: .02em; }
html[data-haut="woijd"] .hr-rund { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
html[data-haut="woijd"] .hr-rund:hover { background: rgba(255, 255, 255, .16); }
html[data-haut="woijd"] .hr-av { border-width: 1.5px; border-color: rgba(255, 255, 255, .22); }

/* ── Seitenleiste: Gruppen als Beschriftung, das Aktive mit Moos ── */
html[data-haut="woijd"] .hr-gruppe {
  font-family: "Manrope", system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-dim);
}
html[data-haut="woijd"] #nav.nav button { border-radius: 6px; }
html[data-haut="woijd"] #nav.nav button.an { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* ── Inhalt: Überschriften ruhig, Karten mit Haarlinie, Beschriftung in Versalien ── */
html[data-haut="woijd"] .inhalt h2 { font-weight: 700; letter-spacing: -.02em; font-size: 24px; }
html[data-haut="woijd"] .tt-karte { border-radius: 12px; box-shadow: none; }
html[data-haut="woijd"] .tt-karte h3, html[data-haut="woijd"] .fb-blatt h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
html[data-haut="woijd"] .knopf { border-radius: 8px; font-weight: 600; }
html[data-haut="woijd"] .knopf.haupt { box-shadow: none; }
html[data-haut="woijd"] .feld input, html[data-haut="woijd"] .feld textarea, html[data-haut="woijd"] .feld select { border-radius: 8px; }
html[data-haut="woijd"] table { font-variant-numeric: tabular-nums; }
html[data-haut="woijd"] th { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }

/* ── Fußzeile: Graphit wie der Kopf, Haarlinie ── */
html[data-haut="woijd"] .hr-fuss { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: rgba(245, 245, 242, .5); }

/* ── Anmeldung: Wortmarke auf Papier, kein farbiger Kopf ── */
html[data-haut="woijd"] .hr-anm.anm-blatt { border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 24px 60px var(--shadow); }
html[data-haut="woijd"] .hr-anm-kopf { background: transparent; color: var(--text); padding: 34px 32px 6px; text-align: left; }
html[data-haut="woijd"] .hr-anm-logo { height: 30px; opacity: 1; margin-bottom: 18px; }
html[data-haut="woijd"] .hr-anm-titel { display: none; }
html[data-haut="woijd"] .hr-anm-sub { font-family: "Manrope", system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--text-dim); margin-top: 0; }

/* ── „Was ist neu“: Kopf in Graphit wie der Seitenkopf, Titel in Manrope ── */
html[data-haut="woijd"] .hr-neu-kopf { background: var(--hbg); color: var(--htx); border-bottom: 1px solid rgba(255, 255, 255, .08); }
html[data-haut="woijd"] .hr-neu-titel { font-family: "Manrope", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; text-transform: none; font-size: 19px; }
html[data-haut="woijd"] .hr-neu-version { font-family: "Manrope", system-ui, sans-serif; }

/* Was nur unsere eigene Instanz kennt (Investitionen des Office), zeigt die Marke woijd nicht */
html[data-marke="woijd"] #fuss-invest { display: none; }

@media (max-width: 720px) {
  html[data-haut="woijd"] .hr-logo-img { height: 18px; }
}