/*
 * onehome.css — Oberfläche angleichen, Etappe 14 Teil 2 (03.10.2026)
 *
 * Warum: Die Plattform liefert bislang komplett unstylisiertes HTML aus (kein
 * eigenes Stylesheet, `templates/base.html.twig` hatte einen leeren
 * `stylesheets`-Block). Dieser Umbau setzt NUR auf, was die Templates schon an
 * CSS-Haken mitbringen (`data-status`, `data-zustand`, `data-modul`, …) —
 * kein Eingriff in Formulare/Logik, reines CSS.
 *
 * Vorlage: die abgenommene Vorschau „vorschau-14-oberflaeche.html" (Zustand
 * „Vorschlag"). Nutzer-Entscheidung 03.10.2026: „Passt, Inter selbst hosten" —
 * deshalb liegen die Schriftdateien unter public/fonts/inter/ (SIL Open Font
 * License, OFL.txt daneben) statt über Google Fonts zu laden: die CSP setzt
 * `default-src 'self'` ohne Ausnahmen (src/Kern/Sicherheit/SicherheitsHeader.php),
 * ein Fremd-Request hätte dort eine Lockerung gebraucht.
 *
 * Mandanten-Akzent: `--oh-accent` ist hier auf den Standardwert aus der
 * Vorschau fest verdrahtet. Eine Mandanten-Einstellung für eine eigene
 * Akzentfarbe gibt es in diesem Stand noch nicht (Tabelle `mandant` kennt nur
 * `id`/`name`, src/Plattform/Mandant/MandantEinrichtungRepository.php) — siehe
 * offener Punkt in der Rückmeldung zu dieser Etappe.
 */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/InterVariable.woff2') format('woff2-variations'),
       url('/fonts/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2-variations'),
       url('/fonts/inter/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --oh-bg: #fbfbfa;
  --oh-surface: #ffffff;
  --oh-surface-sunken: #f4f4f2;
  --oh-text: #1c1c1e;
  --oh-text-muted: #6b7280;
  --oh-border: #e4e4e1;
  --oh-border-strong: #d2d2cf;
  --oh-accent: #2b4b8f;
  --oh-accent-soft: #eaeef6;
  --oh-ok: #3f6b4f;
  --oh-warn: #9a6b1f;
  --oh-fehler: #a33a3a;
  --oh-radius-sm: 8px;
  --oh-radius-md: 12px;
  --oh-radius-modal: 16px;
  --oh-radius-pill: 999px;
  --oh-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --oh-weight-title: 620;
  --oh-shadow-hairline: 0 0 0 1px var(--oh-border);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --oh-bg: #17181a;
    --oh-surface: #1f2023;
    --oh-surface-sunken: #28292c;
    --oh-text: #e9e9eb;
    --oh-text-muted: #9a9ba1;
    --oh-border: #323335;
    --oh-border-strong: #45464a;
    --oh-accent: #7b9ae0;
    --oh-accent-soft: #232b3d;
    --oh-ok: #7fb08f;
    --oh-warn: #d1a24c;
    --oh-fehler: #d17a7a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --oh-bg: #17181a;
  --oh-surface: #1f2023;
  --oh-surface-sunken: #28292c;
  --oh-text: #e9e9eb;
  --oh-text-muted: #9a9ba1;
  --oh-border: #323335;
  --oh-border-strong: #45464a;
  --oh-accent: #7b9ae0;
  --oh-accent-soft: #232b3d;
  --oh-ok: #7fb08f;
  --oh-warn: #d1a24c;
  --oh-fehler: #d17a7a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--oh-bg);
  color: var(--oh-text);
  font-family: var(--oh-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Handybreite: fester Seitenrand, kein horizontales Scrollen der Seite selbst. */
  padding: 16px;
  max-width: 1040px;
  margin: 0 auto;
  overflow-x: hidden;
}
@media (min-width: 760px) {
  body { padding: 28px 24px 64px; }
}

h1 { font-size: 19px; font-weight: var(--oh-weight-title); margin: 0 0 4px; letter-spacing: -0.01em; }
h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 28px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--oh-border);
}
h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 20px; }
p { margin: 0 0 10px; }
a { color: var(--oh-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: var(--oh-surface-sunken);
  padding: 1px 5px;
  border-radius: 5px;
}
/* Etappe 15d (03.10.2026): wörtliche Ausgabe (Telemetriebericht) – leise, scrollt auf
   Handybreite in sich statt die Seite zu verbreitern. */
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: var(--oh-surface-sunken);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-radius-sm);
  padding: 10px 12px;
  overflow-x: auto;
  max-width: 100%;
}
pre code { background: transparent; padding: 0; }

/* ---------- Formulare ---------- */
label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--oh-text-muted);
  margin-bottom: 12px;
  max-width: 340px;
}
select, input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"] {
  font-family: var(--oh-font);
  font-size: 13.5px;
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-radius-sm);
  padding: 7px 9px;
  background: var(--oh-surface);
  color: var(--oh-text);
  max-width: 100%;
}

/* Ein primärer Knopf je Formular als Leitregel; Nebenhandlungen sind sekundär
   (Klasse `sekundaer`, von den Templates bei Bedarf gesetzt) oder Text-Link. */
button, input[type="submit"] {
  font-family: var(--oh-font);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--oh-accent);
  color: #fff;
  border: 1px solid var(--oh-accent);
  border-radius: var(--oh-radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: none;
}
button:hover, input[type="submit"]:hover { filter: brightness(1.08); }
button.sekundaer {
  background: transparent;
  color: var(--oh-text);
  border-color: var(--oh-border);
}
button.sekundaer:hover { background: var(--oh-surface-sunken); filter: none; }

/* ---------- Tabellen ----------
   Reiner CSS-Trick statt Template-Wrapper: `display:block` auf der Tabelle
   selbst macht nur sie zum Scroll-Container, die Kindelemente (thead/tbody/
   tr/td) behalten ihr Tabellen-Layout. So scrollen breite Tabellen auf
   Handybreite horizontal, ohne jedes Template anzufassen. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
thead, tbody, tfoot { width: 100%; }
th {
  text-align: left;
  font-weight: 600;
  color: var(--oh-text-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--oh-border);
  white-space: nowrap;
}
td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--oh-border);
}
tr:last-child td { border-bottom: 0; }
tfoot td, tfoot th { font-weight: 600; border-top: 1px solid var(--oh-border-strong); border-bottom: 0; }

/* ---------- Status-Anzeigen ----------
   Status als kursiver Text in Zustandsfarbe statt umrandeter Pill —
   `data-status` (Zeiterfassung, Modulliste) und `data-zustand` (OnePulse-
   Zellen) tragen den Wert schon in den Templates, hier nur noch die Optik. */
[data-status], [data-zustand] { font-style: italic; }
[data-zustand="ok"], [data-status="ANWESEND"], [data-status="AKTIV"] { color: var(--oh-ok); }
[data-zustand="beachten"], [data-zustand="warn"] { color: var(--oh-warn); }
[data-zustand="kritisch"], [data-zustand="fehler"] { color: var(--oh-fehler); }

/* ---------- Navigation (templates/base.html.twig) ---------- */
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--oh-border);
  font-size: 13px;
}
nav a { color: var(--oh-text-muted); }
nav a:hover { color: var(--oh-accent); }
nav form { margin: 0; }
nav button {
  background: transparent;
  color: var(--oh-text-muted);
  border: 0;
  font-weight: 600;
  padding: 0;
}
nav button:hover { color: var(--oh-accent); filter: none; text-decoration: underline; }

/* Etappe 17 (04.10.2026), P-83 Variante A: Bereichsgruppen per natives <details>, kein
   JavaScript (CSP). `position: relative` auf dem <details>, das Panel liegt absolut darunter,
   damit ein geöffnetes Menü die übrige Navigation nicht verschiebt. */
details.nav-gruppe {
  position: relative;
}
details.nav-gruppe > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--oh-text-muted);
  list-style: none;
}
details.nav-gruppe > summary::-webkit-details-marker { display: none; }
details.nav-gruppe > summary::after {
  content: '▾';
  font-size: 10px;
}
details.nav-gruppe > summary:hover { color: var(--oh-accent); }
details.nav-gruppe[open] > summary { color: var(--oh-accent); }
.nav-gruppe-inhalt {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  padding: 8px;
  background: var(--oh-surface);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-radius-sm);
  box-shadow: var(--oh-shadow-hairline);
}
.nav-gruppe-inhalt a { padding: 4px 6px; border-radius: var(--oh-radius-sm); }
.nav-gruppe-inhalt a:hover { background: var(--oh-surface-sunken); }

/* Schmale Breite (Mobil): Gruppen nicht schwebend, sondern eingeklappt im Fluss, damit
   nichts über dem Rand abgeschnitten wird. */
@media (max-width: 640px) {
  nav { flex-direction: column; align-items: stretch; gap: 8px; }
  .nav-gruppe-inhalt {
    position: static;
    box-shadow: none;
    margin-top: 4px;
  }
}

[role="alert"] {
  font-style: italic;
  color: var(--oh-fehler);
  border-left: 2px solid var(--oh-fehler);
  padding-left: 10px;
  margin: 10px 0;
}
[role="status"] {
  font-style: italic;
  color: var(--oh-ok);
  border-left: 2px solid var(--oh-ok);
  padding-left: 10px;
  margin: 10px 0;
}

main { max-width: 100%; }

/* Etappe 16 (04.10.2026, ADR-0032): leiser Demo-Hinweis auf jeder Seite und die
   Besucherzugaenge auf der Anmeldeseite der Demo. Nur Tokens, keine eigenen Farben;
   Inline-Styles verbietet die CSP. */
.demo-hinweis {
  margin: 0 0 12px;
  padding: 6px 10px;
  font-size: 0.85em;
  color: var(--oh-text-muted);
  background: var(--oh-surface-sunken);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-radius-sm);
}
.demo-besuch {
  margin: 16px 0;
  padding: 10px 14px;
  background: var(--oh-accent-soft);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-radius-sm);
}
.demo-besuch dl { margin: 6px 0 0; }
.demo-besuch dt { font-weight: 600; margin-top: 8px; }
.demo-besuch dd { margin: 0; color: var(--oh-text-muted); font-family: ui-monospace, monospace; }

/* Etappe 17 (04.10.2026), P-83 Variante A: Kacheln der „Heute"-Startseite
   (templates/anmeldung/start.html.twig). Nur Tokens, Status über das bestehende
   [data-zustand] (Zeile ~233), keine neue Farbkonvention. */
.heute-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.heute-kachel {
  padding: 12px 14px;
  background: var(--oh-surface);
  border: 1px solid var(--oh-border);
  border-radius: var(--oh-radius-md);
}
.heute-kachel h2 { font-size: 14px; margin: 0 0 6px; font-weight: var(--oh-weight-title); }
.heute-kachel p { margin: 0 0 6px; }