/* =====================================================================================================================
   Klarglas – Designsprache von e-volutions (Stand 2026-10-16)
   Eigenständige Stilvorlage: Variablen, Grundstile und die wichtigsten Bausteine. Keine Abhängigkeiten, kein Skript nötig.
   Idee: nahezu klares Glas auf neutralem Hellgrau. Die Form entsteht nicht durch Farbe in der Fläche, sondern durch
   (1) eine haarfeine Lichtkante als Ring, (2) eine kühle Außenlinie und (3) große, weiche Schatten.
   Immer hell (kein Dark Mode). Farbe ist funktional: Blau = Hauptaktion/Auswahl/Fokus, Grün = Erfolg, Rot = Gefahr, Gold = Warnung.
   Einbinden:  <link rel="stylesheet" href="klarglas.css">   (Beschreibung und Regeln: „Designsprache Klarglas.md“)
   ===================================================================================================================== */

:root {
  color-scheme: light;

  /* Marke (Logo, Dreifarb-Leiste) */
  --navy: #2B3A8A; --navy-deep: #202D6B; --blue: #6FB2FF; --gold: #F5B82E; --gold-deep: #DE9F17;

  /* Text: mindestens 4,5 : 1 auf dem Grund (geprüft) */
  --ink: #1C2444; --muted: #5E6985; --faint: #6B7690;

  /* Funktionsfarben (als Zahlentripel, damit Transparenzen möglich sind: rgba(var(--akzent), .1)) */
  --akzent: 30, 100, 225;          /* Hauptaktion, Auswahl, Fokus */
  --gruen: 40, 167, 100;           /* Erfolg, aktiv */
  --err: #BD3F2D;                  /* Gefahr, Fehlertext */
  --warn: 245, 184, 46;            /* Warnung, Hinweis */

  /* Flächen und Linien */
  --bg: #EDEFF3;
  --hair: rgba(28, 36, 68, .08);
  --fill: rgba(28, 36, 68, .05);
  --fill-2: rgba(28, 36, 68, .08);
  --tint: rgba(30, 100, 225, .09);

  /* Form: große Flächen mit großen Radien, Bedienelemente als Kapseln */
  --r-s: 10px; --r-m: 14px; --r-l: 24px; --r-xl: 32px; --kapsel: 999px;

  /* Tiefe: große, weiche, kühle Schatten */
  --shadow-1: 0 1px 1px rgba(30, 40, 70, .04), 0 10px 28px -12px rgba(30, 40, 70, .16), 0 30px 60px -34px rgba(30, 40, 70, .18);
  --shadow-2: 0 2px 6px rgba(30, 40, 70, .06), 0 34px 80px -26px rgba(30, 40, 70, .34);

  /* Glas */
  --glas-blur: blur(22px) saturate(170%);
  --glas-fuellung: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .48));
  --glas-fuellung-dicht: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .72));
  --glas-kante: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .22) 30%, rgba(255, 255, 255, .06) 58%, rgba(255, 255, 255, .92) 100%);
  --glas-licht: inset 0 1px 0 rgba(255, 255, 255, .9);              /* Lichtkante oben */
  --glas-tiefe: inset 0 -12px 20px -16px rgba(80, 96, 146, .24);    /* Glasdicke am unteren Innenrand */
  --glas-aussen: 0 0 0 1px rgba(40, 52, 88, .08);                   /* kühle Außenlinie */

  /* Schrift: Systemschrift (SF Pro auf Apple-Geräten); Größen in rem, damit sie der Textgröße des Nutzers folgen */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif;

  /* Bewegung: weiche, nie hart endende Kurven; die Feder (Dämpfung 0,8, Reaktionszeit 0,3 s) nur dort, wo eine Geste vorausgeht */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sheet: cubic-bezier(.32, .72, 0, 1);
  --spring-sheet: linear(0, 0.089, 0.274, 0.4743, 0.6502, 0.787, 0.8841, 0.9474, 0.9851, 1.0049, 1.0133, 1.0152, 1.0136, 1.0107, 1.0077, 1.0051, 1.0031, 1.0017, 1.0007, 1.0002, 0.9999, 0.9998, 0.9998, 0.9998, 1);
}

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable; }   /* kein Seitenspringen */
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background:
    radial-gradient(900px 560px at -4% 106%, rgba(255, 255, 255, .95), transparent 62%),
    radial-gradient(760px 520px at 104% -6%, rgba(204, 211, 228, .55), transparent 60%),
    linear-gradient(165deg, #F5F6F9 0%, #E7E9EF 100%);
  background-attachment: fixed;
  font: 0.9375rem/1.5 var(--font); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); color: var(--ink); }
h1 { font-size: 2.125rem; line-height: 1.1; font-weight: 650; letter-spacing: -.028em; }   /* große Schrift: enger Buchstabenabstand */
h2 { font-size: 1.375rem; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
h3 { font-size: 0.75rem; line-height: 1.3; font-weight: 600; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }  /* kleine Schrift: weiter */
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
b, strong { font-weight: 600; }
.muted { color: var(--muted); }
.zahl { font-variant-numeric: tabular-nums; }                       /* Beträge und Zahlenspalten stehen bündig */
.hide { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(var(--akzent), .7); outline-offset: 2px; }   /* folgt der Rundung, ändert sie nie */

/* Dreifarb-Leiste der Marke ganz oben */
.leiste-marke { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50;
  background: linear-gradient(90deg, var(--blue) 0 33.33%, var(--navy) 33.33% 66.66%, var(--gold) 66.66%); }

/* ---------- Glasflächen ---------- */
.card, .kpi, .sheet, .dialog, .menu, .leiste {
  position: relative;
  background: var(--glas-fuellung); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-licht), var(--glas-tiefe), var(--glas-aussen), var(--shadow-1);
}
.card, .kpi { border-radius: var(--r-l); }
.sheet, .dialog, .menu, .leiste { background: var(--glas-fuellung-dicht); box-shadow: var(--glas-licht), var(--glas-aussen), var(--shadow-2); }
/* Lichtkante als Ring: nur der Rand trägt das Licht (die Maske schneidet die Fläche aus) */
.card::before, .kpi::before, .sheet::before, .dialog::before, .menu::before, .leiste::before, button::after, .btn::after, .chip::after {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; z-index: 3;
  background: var(--glas-kante);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.info { padding: 18px 20px; }
.kpi { padding: 18px 20px; transition: transform .25s var(--ease); }
.kpi:hover { transform: translateY(-2px); }
.kpi .n { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 0.8125rem; color: var(--muted); margin-top: 4px; letter-spacing: 0; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* ---------- Schaltflächen: Kapseln. Hauptaktion = blaues Glas, sonst klares Glas. Pro Ansicht nur eine Hauptaktion. ---------- */
button, .btn {
  --t: var(--akzent);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; letter-spacing: -.011em; cursor: pointer; border: 0; text-decoration: none;
  height: 40px; padding: 0 18px; border-radius: var(--kapsel); color: #fff; white-space: nowrap;
  background: rgba(var(--t), .94); text-shadow: 0 1px 0 rgba(0, 0, 0, .14);
  box-shadow: var(--glas-licht), inset 0 -1px 0 rgba(0, 0, 0, .10), 0 1px 2px rgba(var(--t), .30), 0 10px 20px -10px rgba(var(--t), .65);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background-color .2s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
button:hover, .btn:hover { background: rgb(var(--t)); transform: translateY(-1px); text-decoration: none; }
button:active, .btn:active { transform: scale(.97); transition-duration: .08s;          /* Rückmeldung beim Drücken, nicht erst beim Loslassen */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22), 0 0 0 1px rgba(var(--t), .5); }
button:disabled { cursor: default; transform: none; color: var(--faint); text-shadow: none; background: rgba(255, 255, 255, .4); box-shadow: var(--glas-aussen); }
button:disabled::after { display: none; }
button.sec, .btn.sec, button.danger, button.ghost {
  --t: 40, 52, 88; color: var(--ink); text-shadow: none; background: rgba(255, 255, 255, .58);
  box-shadow: var(--glas-licht), var(--glas-tiefe), var(--glas-aussen), 0 6px 14px -8px rgba(30, 40, 70, .30);
}
button.sec:hover, .btn.sec:hover, button.danger:hover, button.ghost:hover { background: rgba(255, 255, 255, .86); }
button.sec:active, .btn.sec:active, button.danger:active, button.ghost:active { box-shadow: inset 0 2px 4px rgba(30, 40, 70, .16), var(--glas-aussen); }
button.danger { --t: 214, 80, 63; color: #BC3624; }
button.danger:hover { background: rgba(214, 80, 63, .12); }
button.ghost { background: transparent; box-shadow: 0 0 0 1px rgba(40, 52, 88, .14); }
button.klein { height: 32px; padding: 0 14px; font-size: 0.8125rem; }

/* ---------- Eingaben ---------- */
input, select, textarea {
  font: inherit; letter-spacing: -.011em; color: var(--ink); min-width: 0;
  height: 42px; padding: 0 14px; border-radius: var(--r-m); border: 0; background-color: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 2px rgba(30, 40, 70, .10), inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(40, 52, 88, .10);
  transition: box-shadow .18s ease, background-color .18s ease;
}
textarea { height: auto; min-height: 96px; padding: 10px 12px; width: 100%; line-height: 1.45; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background: rgba(255, 255, 255, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E6985' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { background-color: rgba(255, 255, 255, .8); }
input:focus, select:focus, textarea:focus { background-color: #fff; outline: none;
  box-shadow: inset 0 1px 2px rgba(30, 40, 70, .06), 0 0 0 1px rgba(var(--akzent), .7), 0 0 0 5px rgba(var(--akzent), .16); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: rgb(var(--akzent)); padding: 0; box-shadow: none; }
input[type="search"] { -webkit-appearance: none; appearance: none; border-radius: var(--kapsel); padding: 0 18px; }
label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; letter-spacing: .005em; }
.fehler { color: var(--err); font-size: 0.8125rem; min-height: 18px; }
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* ---------- Kennzeichen, Ampel, Umschalter ---------- */
.chip, .tag { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; line-height: 1.4; white-space: nowrap; position: relative; }
.chip { background: rgba(255, 255, 255, .64); color: #24376F; box-shadow: var(--glas-licht), var(--glas-aussen); }
.chip.ok { background: rgba(var(--gruen), .14); color: #1D7A4B; box-shadow: 0 0 0 1px rgba(var(--gruen), .26); }
.chip.warn { background: rgba(var(--warn), .18); color: #7A5200; box-shadow: 0 0 0 1px rgba(var(--warn), .38); }
.chip.bad { background: rgba(214, 80, 63, .12); color: #B83A27; box-shadow: 0 0 0 1px rgba(214, 80, 63, .26); }
.chip.info { background: rgba(var(--akzent), .10); color: #174AA8; }
.chip.still { background: rgba(110, 122, 160, .12); color: var(--muted); box-shadow: none; }
.dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 99px; background: var(--faint); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.dot.gruen { background: rgb(var(--gruen)); } .dot.gelb { background: var(--gold); } .dot.rot { background: var(--err); } .dot.blau { background: rgb(var(--akzent)); }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: rgba(110, 122, 160, .14); border-radius: var(--kapsel); }
.tab, .tab:hover { height: 34px; padding: 0 16px; border-radius: var(--kapsel); background: transparent; color: var(--muted); font-weight: 500; font-size: 0.8125rem; box-shadow: none; text-shadow: none; transform: none; }
.tab::after { display: none; }
.tab:hover { background: rgba(255, 255, 255, .5); color: var(--ink); }
.tab.on, .tab.on:hover { background: rgba(255, 255, 255, .94); color: var(--ink); font-weight: 600; box-shadow: var(--glas-licht), 0 1px 3px rgba(28, 36, 68, .14), var(--glas-aussen); }

/* ---------- Tabellen und Listen (feste Spalten, damit sich beim Filtern nichts verschiebt) ---------- */
.card > table { width: 100%; border-collapse: collapse; }
.card:has(> table) { overflow: clip; }
table.fest { table-layout: fixed; }
th { font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; text-align: left; padding: 12px 20px; border-bottom: 1px solid var(--hair); }
td { padding: 14px 20px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.zeile { cursor: pointer; transition: background-color .12s ease; }
tr.zeile:hover td { background: var(--fill); }
tr.zeile:active td { background: rgba(var(--akzent), .13); transition-duration: 0s; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
.liste-z { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--hair); border-radius: 14px; position: relative; cursor: pointer; transition: background-color .12s ease; }
.liste-z:hover { background: rgba(255, 255, 255, .62); }
.liste-z:active { background: rgba(var(--akzent), .13); transition-duration: 0s; }
.liste-z.auswahl { background: rgba(var(--akzent), .08); }
.liste-z.auswahl::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: rgb(var(--akzent)); }

/* ---------- Platzhalter beim Laden (Formen wie die echten Inhalte, damit nichts springt) ---------- */
.skel-z { display: grid; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(40, 52, 88, .05); }
.skel { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(110, 122, 160, .12) 25%, rgba(110, 122, 160, .22) 37%, rgba(110, 122, 160, .12) 63%);
  background-size: 400% 100%; animation: skel-glanz 1.5s ease-in-out infinite; }
.skel.kurz { height: 11px; opacity: .8; }
@keyframes skel-glanz { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Schwebende Bausteine ---------- */
/* Auswahlleiste: Aktionen für die Auswahl, unten mittig */
.leiste { position: fixed; left: 0; right: 0; bottom: 22px; margin: 0 auto; width: fit-content; max-width: min(980px, calc(100vw - 24px)); z-index: 35;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 12px 10px 18px; border-radius: 26px; }
.leiste.ein { animation: leiste-ein .42s var(--spring-sheet) both; }
@keyframes leiste-ein { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
/* Hinweis mit „Rückgängig“ (statt Rückfrage): bleibt 10–12 Sekunden, solange der Zeiger darauf steht */
.hinweis { position: fixed; bottom: 28px; left: 50%; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 22px;
  border-radius: var(--kapsel); font-weight: 500; font-size: 0.875rem; white-space: nowrap; background: var(--glas-fuellung-dicht);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); box-shadow: var(--glas-licht), var(--glas-aussen), var(--shadow-2); animation: hinweis-ein .35s var(--ease) both; }
@keyframes hinweis-ein { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Dialog auf heller Milchglas-Abdeckung (kein dunkler Schleier) */
.dialog-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.dialog-scrim { position: absolute; inset: 0; background: rgba(226, 230, 238, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dialog { width: min(420px, 100%); padding: 26px; border-radius: var(--r-xl); animation: dialog-ein .5s var(--spring-sheet) both; }
.dialog h2 { font-size: 1.25rem; margin-bottom: 6px; }
.dialog-aktionen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
@keyframes dialog-ein { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
/* Seitenfenster (Sheet): schwebt am rechten Rand; zum Öffnen translateX(0) setzen, zum Schließen translateX(calc(100% + 24px)) */
.sheet { position: fixed; z-index: 40; top: 12px; right: 12px; bottom: 12px; width: min(580px, calc(100vw - 24px)); overflow: auto; padding: 24px 24px 28px; border-radius: var(--r-xl);
  transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform .35s var(--sheet), visibility 0s .35s; }
.sheet.offen { transform: translateX(0); visibility: visible; transition: transform .55s var(--spring-sheet), visibility 0s; }

/* ---------- Seitenaufbau ---------- */
.seite { max-width: 1240px; margin: 0 auto; padding: 32px 36px 56px; }
.kopf { position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px auto 0; max-width: 1240px; padding: 12px 20px;
  border-radius: var(--r-l); background: var(--glas-fuellung-dicht); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
  box-shadow: var(--glas-licht), var(--glas-aussen), var(--shadow-1); }
.kopf, .menu { position: relative; }
.kopf::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: var(--glas-kante);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

/* ---------- Barrierefreiheit ---------- */
@media (pointer: coarse) { button, .btn, input, select { min-height: 44px; } input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .skel { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .kpi, .sheet, .dialog, .menu, .leiste, .kopf, .hinweis { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --hair: rgba(28, 36, 68, .35); --muted: #3F4862; --faint: #4A5470; --err: #A02C1B;
    --glas-kante: linear-gradient(rgba(28, 36, 68, .6), rgba(28, 36, 68, .6)); --glas-aussen: 0 0 0 1px rgba(28, 36, 68, .5); }
  :focus-visible { outline: 3px solid rgb(var(--akzent)); outline-offset: 2px; }
  .chip { box-shadow: 0 0 0 1px rgba(28, 36, 68, .6); }
}
@media (max-width: 640px) { .seite { padding: 20px 16px 48px; } h1 { font-size: 1.75rem; } }