/* lt-formular-ausnahme: Familien-Apps (Cockpit 4 / Familien-Cockpit), nicht die Website; Freigabe Tobias 17.10.2026 */
/* Leuchtturm „Glas“-Look für alle Apps (16.10.2026)
   Vorbild: weiche Glaskarten, Kapsel-Navigation, runde Icon-Knöpfe, große Zahlen. Farben bleiben Leuchtturm:
   Mint-Grund, Navy-Text, Grün als Akzent, Rot/Bernstein nur für Warnungen.
   Einbinden NACH dem seiteneigenen <style>: <link rel="stylesheet" href="/static/glas.css">
   Seitenspezifische Anpassungen stehen im jeweiligen Template in <style id="glas-seite">. */

@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/plus-jakarta-sans-latin-wght.woff2') format('woff2-variations'), url('/static/fonts/plus-jakarta-sans-latin-wght.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --g-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --g-bg: #f0f6f5; --g-fg: #1a1a2e; --g-muted: #5b6575; --g-accent: #2a6049; --g-accent-hell: #7ec8c0;
  --g-surface: #ffffff; --g-surface-2: #e8f0ee; --g-line: #d6e5e1;
  --g-rot: #b8372b; --g-bernstein: #b56f00;
  --g-glas: rgba(255,255,255,.66); --g-glas-rand: rgba(255,255,255,.85);
  --g-schatten: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 50px -26px rgba(26,26,46,.22), 0 2px 6px rgba(26,26,46,.04);
  --g-schatten-hoch: 0 1px 0 rgba(255,255,255,.9) inset, 0 28px 60px -24px rgba(26,26,46,.30), 0 2px 8px rgba(26,26,46,.05);
  --g-knopf-schatten: 0 6px 18px -10px rgba(26,26,46,.35);
  --g-radius: 28px; --g-radius-klein: 18px;
  --g-blob-1: rgba(126,200,192,.45); --g-blob-2: rgba(42,96,73,.16); --g-blob-3: rgba(167,178,230,.30);
  /* Seiten mit eigenen Tokens auf die Glas-Werte lenken (neue Familie: --bg/--fg …, alte Familie: --teal/--dark …) */
  --font: var(--g-font);
}
:root[data-theme="dark"], html.dark, body.dark {
  --g-bg: #0f0f1a; --g-fg: #e6e8ee; --g-muted: #a4abbb; --g-accent: #7ec8c0; --g-surface: #1a1a2e; --g-surface-2: #24243f; --g-line: #2c2c52;
  --g-rot: #f0806f; --g-bernstein: #f2b544;
  --g-glas: rgba(26,26,46,.62); --g-glas-rand: rgba(255,255,255,.07);
  --g-schatten: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 50px -24px rgba(0,0,0,.6);
  --g-schatten-hoch: 0 1px 0 rgba(255,255,255,.06) inset, 0 28px 60px -22px rgba(0,0,0,.7);
  --g-knopf-schatten: 0 6px 18px -10px rgba(0,0,0,.6);
  --g-blob-1: rgba(126,200,192,.16); --g-blob-2: rgba(42,96,73,.22); --g-blob-3: rgba(90,100,170,.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-bg: #0f0f1a; --g-fg: #e6e8ee; --g-muted: #a4abbb; --g-accent: #7ec8c0; --g-surface: #1a1a2e; --g-surface-2: #24243f; --g-line: #2c2c52;
    --g-rot: #f0806f; --g-bernstein: #f2b544;
    --g-glas: rgba(26,26,46,.62); --g-glas-rand: rgba(255,255,255,.07);
    --g-schatten: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 50px -24px rgba(0,0,0,.6);
    --g-schatten-hoch: 0 1px 0 rgba(255,255,255,.06) inset, 0 28px 60px -22px rgba(0,0,0,.7);
    --g-knopf-schatten: 0 6px 18px -10px rgba(0,0,0,.6);
    --g-blob-1: rgba(126,200,192,.16); --g-blob-2: rgba(42,96,73,.22); --g-blob-3: rgba(90,100,170,.18);
  }
}

/* Grund */
html body {
  font-family: var(--g-font);
  background:
    radial-gradient(48vw 40vw at 92% -6%, var(--g-blob-1), transparent 70%),
    radial-gradient(40vw 36vw at -8% 38%, var(--g-blob-3), transparent 70%),
    radial-gradient(46vw 40vw at 70% 105%, var(--g-blob-2), transparent 70%), var(--g-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
html body button, html body input, html body select, html body textarea { font-family: inherit; }

/* Glasfläche als Baustein */
.glas, .g-karte {
  background: var(--g-glas); border: 1px solid var(--g-glas-rand); box-shadow: var(--g-schatten);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-radius: var(--g-radius);
}

/* Kopf: hell, schwebend; Texte und Knöpfe auf hellem Grund */
html body > header {
  position: relative; z-index: 40; /* nicht klebend: viele Seiten haben eigene klebende Leisten */
  background: color-mix(in srgb, var(--g-bg) 55%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--g-fg); box-shadow: none; border: 0;
  padding-top: 14px; padding-bottom: 14px;
}
html body > header h1, html body > header .title, html body > header .header-title { color: var(--g-fg); font-family: var(--g-font); font-weight: 700; letter-spacing: -.015em; }
html body > header .sub, html body > header .subtitle, html body > header small, html body > header p { color: var(--g-muted); }
html body > header .logo-plate, html body > header a:has(> img) { background: #fff; border-radius: 16px; box-shadow: var(--g-schatten); }
html body > header button, html body > header .btn-ghost, html body > header a.btn-ghost, html body > header .theme-toggle, html body > header .tb-btn {
  background: var(--g-glas); color: var(--g-fg); border: 1px solid var(--g-glas-rand); box-shadow: var(--g-schatten);
  border-radius: 999px; min-height: 44px;
}
html body > header button:hover, html body > header .btn-ghost:hover, html body > header a.btn-ghost:hover { background: var(--g-surface); color: var(--g-fg); }
html body > header button:focus-visible, html body > header .btn-ghost:focus-visible, html body > header a:focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; }
html body > header .i, html body > header svg { color: var(--g-fg); }

/* Karten */
html body .card, html body .stat-card, html body .card.kpi, html body .panel, html body .box {
  background: var(--g-glas); border: 1px solid var(--g-glas-rand); box-shadow: var(--g-schatten);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-radius: var(--g-radius);
}

/* Knöpfe: Kapseln */
html body .btn, html body button.btn, html body a.btn { border-radius: 999px; }
html body .btn-weiss { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--g-surface); color: var(--g-fg); font-weight: 650; box-shadow: var(--g-knopf-schatten); cursor: pointer; }

/* Felder */
html body input[type="text"], html body input[type="search"], html body input[type="email"], html body input[type="number"], html body input[type="date"],
html body input[type="password"], html body input[type="month"], html body input[type="tel"], html body input[type="url"], html body select, html body textarea {
  border-radius: 14px; border: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-surface) 85%, transparent); color: var(--g-fg);
}
html:root body input:focus, html:root body select:focus, html:root body textarea:focus { border-color: var(--g-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 22%, transparent); }

/* Tabellen: ruhig */
html body table { border-collapse: separate; border-spacing: 0; }
html body th { color: var(--g-muted); font-weight: 600; }

/* Fokus sichtbar halten */
html body :focus-visible { outline: 3px solid color-mix(in srgb, var(--g-accent) 70%, #1f6fa8); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { html body * { transition: none !important; animation: none !important; } }