/* LD Verwaltung — Gestaltungssystem.
 *
 * Aufbau: 1. Farben und Maße (hell/dunkel)  2. Grundlagen  3. Rahmen (Seitenleiste, Kopf, Mobil)
 *         4. Bausteine (Knöpfe, Felder, Karten, Kacheln, Marken, Tabellen …)  5. Diagramme  6. Module
 *
 * Diagrammfarben: Referenzpalette des Dataviz-Verfahrens, Plätze 1–3 geprüft (alle Paare, hell auf
 * #ffffff und dunkel auf #171918). Aqua liegt hell unter 3:1 → Bereiche immer mit Textlabel,
 * Diagramme immer mit Tabellenansicht.
 */

/* ---------- 1. Farben und Maße ---------- */
:root {
  color-scheme: light;
  --grund: #f6f5f2;
  --flaeche: #ffffff;
  --flaeche-2: #f3f2ee;
  --flaeche-3: #ebe9e3;
  --linie: #e6e4de;
  --linie-2: #d7d4cc;
  --tinte: #141413;
  --tinte-2: #52514e;
  --tinte-3: #6f6e68;   /* 5,1:1 auf Weiß, 4,7:1 auf Grund (WCAG AA) */
  --akzent: #1d5a47;
  --akzent-2: #164a3a;
  --akzent-hell: #e5efe9;
  --akzent-text: #1d5a47;
  --auf-akzent: #ffffff;
  --fokus: #2a78d6;

  /* Status: feste Bedeutung, nie als Reihenfarbe — immer mit Symbol und Text */
  --gut: #0ca30c;       --gut-text: #006300;     --gut-hell: #e7f5e7;
  --warn: #fab219;      --warn-text: #8a5a00;    --warn-hell: #fdf3dc;
  --ernst: #ec835a;     --ernst-text: #9a3f17;   --ernst-hell: #fdece4;
  --kritisch: #d03b3b;  --kritisch-text: #a82a2a; --kritisch-hell: #fbe7e7;

  /* Reihen (Dataviz-Referenz) — Bereiche: 1 Fotografie, 2 Little Ones, 3 Marrigo */
  --reihe-1: #2a78d6;
  --reihe-2: #eb6834;
  --reihe-3: #1baf7a;
  --reihe-4: #eda100;
  --reihe-grau: #b9b7ae;
  --reihe-wash: .10;

  /* Diagramm-Chrome */
  --raster: #ecebe6;
  --achse: #c3c2b7;
  --achsen-text: #898781;

  --schatten-1: 0 1px 2px rgba(20, 20, 19, .05), 0 0 0 1px rgba(20, 20, 19, .02);
  --schatten-2: 0 10px 30px -12px rgba(20, 20, 19, .18), 0 2px 6px rgba(20, 20, 19, .06);
  --schatten-3: 0 24px 60px -20px rgba(20, 20, 19, .35);

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --leiste: 256px;
  --schrift: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --grund: #0e100f;
    --flaeche: #171918;
    --flaeche-2: #1e211f;
    --flaeche-3: #262a27;
    --linie: #272a28;
    --linie-2: #353936;
    --tinte: #f3f3f0;
    --tinte-2: #c3c2b7;
    --tinte-3: #8e8d86;
    --akzent: #5cc39b;
    --akzent-2: #74d2ad;
    --akzent-hell: #16302a;
    --akzent-text: #7fd8b4;
    --auf-akzent: #07120e;
    --gut-text: #3cc73c;     --gut-hell: #15261a;
    --warn-text: #f6c257;    --warn-hell: #2d2413;
    --ernst-text: #f29a78;   --ernst-hell: #2e1d15;
    --kritisch-text: #ef7a7a; --kritisch-hell: #2f1818;
    --reihe-1: #3987e5;
    --reihe-2: #d95926;
    --reihe-3: #199e70;
    --reihe-4: #c98500;
    --reihe-grau: #55544f;
    --reihe-wash: .16;
    --raster: #262927;
    --achse: #3a3d3b;
    --achsen-text: #8e8d86;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .02);
    --schatten-2: 0 12px 32px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
    --schatten-3: 0 24px 60px -20px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #0e100f; --flaeche: #171918; --flaeche-2: #1e211f; --flaeche-3: #262a27;
  --linie: #272a28; --linie-2: #353936; --tinte: #f3f3f0; --tinte-2: #c3c2b7; --tinte-3: #8e8d86;
  --akzent: #5cc39b; --akzent-2: #74d2ad; --akzent-hell: #16302a; --akzent-text: #7fd8b4; --auf-akzent: #07120e;
  --gut-text: #3cc73c; --gut-hell: #15261a; --warn-text: #f6c257; --warn-hell: #2d2413;
  --ernst-text: #f29a78; --ernst-hell: #2e1d15; --kritisch-text: #ef7a7a; --kritisch-hell: #2f1818;
  --reihe-1: #3987e5; --reihe-2: #d95926; --reihe-3: #199e70; --reihe-4: #c98500; --reihe-grau: #55544f; --reihe-wash: .16;
  --raster: #262927; --achse: #3a3d3b; --achsen-text: #8e8d86;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .02);
  --schatten-2: 0 12px 32px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
  --schatten-3: 0 24px 60px -20px rgba(0, 0, 0, .8);
}

/* ---------- 2. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 var(--schrift);
  color: var(--tinte);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--akzent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.012em; }
h1 { font-size: 1.6rem; font-weight: 680; }
h2 { font-size: 1.08rem; font-weight: 650; }
h3 { font-size: .95rem; font-weight: 640; }
p { margin: 0 0 .75rem; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 1.25rem 0; }
code, .mono { font-family: var(--mono); font-size: .88em; }
.leise { color: var(--tinte-2); }
.blass { color: var(--tinte-3); }
.klein { font-size: .85rem; }
.mini { font-size: .76rem; }
.fett { font-weight: 640; }
.ziffern { font-variant-numeric: tabular-nums; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.kuerzen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.zeile.eng { gap: .35rem; }
.zeile.weit { gap: 1rem; }
.zeile.zwischen { justify-content: space-between; }
.stapel { display: grid; gap: .75rem; }
.stapel.eng { gap: .4rem; }
.stapel.weit { gap: 1.25rem; }
.fuell { flex: 1; min-width: 0; }
.gitter { display: grid; gap: 1rem; }
.gitter > *, .stapel > *, .kacheln > * { min-width: 0; }
.gitter.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gitter.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gitter.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gitter.haupt-seite { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.abstand-o { margin-top: 1.5rem; }
.abstand-u { margin-bottom: 1.5rem; }
svg.sym { width: 18px; height: 18px; flex: none; stroke-width: 1.9; }
svg.sym.s { width: 15px; height: 15px; }
svg.sym.l { width: 22px; height: 22px; }

/* ---------- 3. Rahmen ---------- */
.rahmen {
  min-height: 100vh; display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr);
  background: linear-gradient(90deg, var(--flaeche) 0 calc(var(--leiste) - 1px), var(--linie) calc(var(--leiste) - 1px) var(--leiste), transparent var(--leiste));
}
.seitenleiste {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--flaeche); border-right: 1px solid var(--linie);
  display: flex; flex-direction: column; padding: 1rem .8rem;
}
.logo { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem 1.1rem; color: var(--tinte); }
.logo:hover { text-decoration: none; }
.logo-zeichen {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, var(--akzent) 0%, var(--akzent-2) 100%); color: var(--auf-akzent);
  font-weight: 750; font-size: .9rem; letter-spacing: -.02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--schatten-1);
}
.logo-text { line-height: 1.15; }
.logo-text b { display: block; font-size: .95rem; font-weight: 680; letter-spacing: -.01em; }
.logo-text span { font-size: .76rem; color: var(--tinte-3); }
.navgruppe { margin-top: .6rem; }
.navgruppe-titel { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinte-3); padding: .6rem .7rem .3rem; font-weight: 600; }
.navpunkt {
  display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: 10px;
  color: var(--tinte-2); font-weight: 540; font-size: .93rem; position: relative;
}
.navpunkt:hover { background: var(--flaeche-2); color: var(--tinte); text-decoration: none; }
.navpunkt.aktiv { background: var(--akzent-hell); color: var(--akzent-text); font-weight: 620; }
.navpunkt .zaehler {
  margin-left: auto; font-size: .72rem; font-weight: 650; min-width: 1.4rem; text-align: center;
  padding: .05rem .4rem; border-radius: 999px; background: var(--flaeche-3); color: var(--tinte-2);
}
.navpunkt.aktiv .zaehler { background: var(--akzent); color: var(--auf-akzent); }
.navpunkt .zaehler.warn { background: var(--warn-hell); color: var(--warn-text); }
.leiste-fuss { margin-top: auto; padding-top: 1rem; display: grid; gap: .6rem; }
.stempel-mini {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: var(--r-m);
  background: var(--flaeche-2); border: 1px solid var(--linie); font-size: .85rem;
}
a.stempel-mini { color: inherit; }
a.stempel-mini:hover { text-decoration: none; border-color: var(--linie-2); }
.stempel-mini .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-3); flex: none; }
.stempel-mini.laeuft .punkt { background: var(--gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gut) 20%, transparent); }
.stempel-mini.pause .punkt { background: var(--warn); }
.ich { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: var(--r-m); }
.ich-text { min-width: 0; line-height: 1.2; }
.ich-text b { display: block; font-size: .88rem; font-weight: 620; }
.ich-text span { font-size: .75rem; color: var(--tinte-3); }

.inhalt { min-width: 0; display: flex; flex-direction: column; }
.kopf {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .8rem;
  padding: .7rem 2rem; background: color-mix(in srgb, var(--grund) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
}
.kopf .suchfeld { flex: 1; max-width: 520px; position: relative; }
.kopf .suchfeld svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--tinte-3); pointer-events: none; }
.kopf .suchfeld input { width: 100%; padding-left: 2.3rem; background: var(--flaeche); }
.kopf .suchfeld kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.glocke { position: relative; }
.glocke .punkt { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--kritisch); box-shadow: 0 0 0 2px var(--grund); }
.haupt { padding: 1.4rem 2rem 4rem; max-width: 1280px; width: 100%; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.seitenkopf .unterzeile { color: var(--tinte-2); margin-top: .3rem; font-size: .95rem; }
.seitenkopf > .fuell { flex: 1 1 260px; min-width: 0; }   /* Titel wird bei zwei Knöpfen am Handy nicht gequetscht */
.krume { display: flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--tinte-3); margin-bottom: .45rem; }
.krume a { color: var(--tinte-2); }
.krume svg { width: 14px; height: 14px; }
kbd { font: 600 .7rem var(--schrift); color: var(--tinte-3); border: 1px solid var(--linie-2); border-bottom-width: 2px; border-radius: 6px; padding: .05rem .35rem; background: var(--flaeche); }

/* Mobil: Kopfleiste, Schublade, Tab-Leiste */
.mobil-kopf, .tableiste, .schublade-schalter, .schleier { display: none; }
@media (max-width: 960px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); background: none; }
  .seitenleiste {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); z-index: 60; transform: translateX(-102%);
    transition: transform .22s ease; box-shadow: var(--schatten-3);
  }
  .schublade-schalter:checked ~ .seitenleiste { transform: none; }
  .schublade-schalter:checked ~ .schleier { display: block; }
  .schleier { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 55; }
  .mobil-kopf { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--grund) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linie); }
  .mobil-kopf .titel { font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kopf { display: none; }
  .haupt { padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); }
  .tableiste {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--flaeche) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--linie); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  }
  .tableiste a, .tableiste label { display: grid; justify-items: center; gap: .1rem; font-size: .68rem; color: var(--tinte-3); padding: .25rem 0; font-weight: 560; cursor: pointer; }
  .tableiste a.aktiv { color: var(--akzent-text); }
  .tableiste a:hover { text-decoration: none; }
  .tableiste svg { width: 22px; height: 22px; }
  .gitter.zwei, .gitter.drei, .gitter.vier, .gitter.haupt-seite { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 1.35rem; }
  .versteckt-mobil { display: none !important; }
}
@media (min-width: 961px) { .nur-mobil { display: none !important; } }
@media (min-width: 961px) and (max-width: 1180px) {
  .gitter.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gitter.haupt-seite { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 4. Bausteine ---------- */

/* Knöpfe */
.knopf, button {
  font: inherit; font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem .95rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  background: var(--akzent); color: var(--auf-akzent); box-shadow: var(--schatten-1); line-height: 1.2;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.knopf:hover, button:hover { background: var(--akzent-2); text-decoration: none; }
.knopf:active, button:active { transform: translateY(1px); }
.knopf.zweit, button.zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--linie-2); }
.knopf.zweit:hover, button.zweit:hover { background: var(--flaeche-2); }
.knopf.geist, button.geist { background: transparent; color: var(--tinte-2); box-shadow: none; }
.knopf.geist:hover, button.geist:hover { background: var(--flaeche-2); color: var(--tinte); }
.knopf.gefahr, button.gefahr { background: var(--kritisch); color: #fff; }
.knopf.klein, button.klein { padding: .35rem .65rem; font-size: .82rem; border-radius: 8px; }
.knopf.symbol, button.symbol { padding: .45rem; border-radius: 10px; }
.knopf.symbol.klein, button.symbol.klein { padding: .3rem; }
button:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.knopfgruppe { display: inline-flex; gap: .4rem; flex-wrap: wrap; }

/* Felder */
input, select, textarea {
  font: inherit; font-size: .92rem; color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie-2); border-radius: 10px; padding: .55rem .7rem; min-width: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent); }
input::placeholder, textarea::placeholder { color: var(--tinte-3); }
textarea { width: 100%; min-height: 6rem; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); padding: 0; }
input[type="file"] { padding: .45rem; background: var(--flaeche-2); }
.feld { display: grid; gap: .35rem; }
.feld > span, .feld > label { font-size: .82rem; font-weight: 600; color: var(--tinte-2); }
.feld small { color: var(--tinte-3); font-size: .78rem; }
.felder { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.felder .feld { align-content: start; }   /* Felder einer Zeile bleiben bündig, auch mit Hinweis darunter */
.filterleiste { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filterleiste input[type="search"] { flex: 1; min-width: 220px; }
.haken { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .7rem; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--tinte-2); font-size: .84rem; font-weight: 560; }
.chip:hover { background: var(--flaeche-2); text-decoration: none; color: var(--tinte); }
.chip.aktiv { background: var(--tinte); color: var(--flaeche); border-color: var(--tinte); }
.chip .anzahl { font-size: .72rem; opacity: .75; }

/* Karten */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); box-shadow: var(--schatten-1); }
.karte.innen, .karte > .innen { padding: 1.15rem 1.25rem; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem .2rem; }
.karte-kopf .leise { font-size: .84rem; }
.karte-rumpf { padding: .8rem 1.25rem 1.15rem; }
.karte-fuss { border-top: 1px solid var(--linie); padding: .7rem 1.25rem; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.karte.flach { box-shadow: none; }
.karte.hervor { border-color: color-mix(in srgb, var(--akzent) 30%, var(--linie)); background: linear-gradient(180deg, color-mix(in srgb, var(--akzent-hell) 55%, var(--flaeche)) 0%, var(--flaeche) 70%); }
a.karte { color: inherit; display: block; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
a.karte:hover { text-decoration: none; border-color: var(--linie-2); box-shadow: var(--schatten-2); transform: translateY(-1px); }

/* Kennzahl-Kacheln (Stat tiles) */
.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kachel { padding: 1.05rem 1.2rem 1rem; display: grid; gap: .35rem; align-content: start; }
.kachel-kopf { display: flex; align-items: center; gap: .5rem; color: var(--tinte-2); font-size: .84rem; font-weight: 560; }
.kachel-kopf .sym-rund { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--flaeche-2); color: var(--tinte-2); }
.kachel-kopf .sym-rund svg { width: 16px; height: 16px; }
.kachel-wert { font-size: 1.75rem; font-weight: 690; letter-spacing: -.02em; line-height: 1.15; }
.kachel-wert small { font-size: .95rem; font-weight: 560; color: var(--tinte-2); letter-spacing: 0; }
.kachel-fuss { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--tinte-3); min-height: 1.3rem; }
.kachel .funke { margin-top: .2rem; }
.held { display: grid; gap: .25rem; }
.held-wert { font-size: clamp(2.4rem, 5vw, 3.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.delta { display: inline-flex; align-items: center; gap: .2rem; font-weight: 640; font-size: .8rem; padding: .08rem .45rem; border-radius: 999px; }
.delta svg { width: 13px; height: 13px; stroke-width: 2.4; }
.delta.hoch { color: var(--gut-text); background: var(--gut-hell); }
.delta.runter { color: var(--kritisch-text); background: var(--kritisch-hell); }
.delta.neutral { color: var(--tinte-2); background: var(--flaeche-2); }

/* Marken (Status mit Symbol + Text) */
.marke {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 620; white-space: nowrap;
  padding: .16rem .55rem .16rem .45rem; border-radius: 999px; background: var(--flaeche-2); color: var(--tinte-2); line-height: 1.35;
}
.marke svg { width: 13px; height: 13px; stroke-width: 2.3; }
.marke.gut { background: var(--gut-hell); color: var(--gut-text); }
.marke.gut svg { color: var(--gut); }
.marke.warn { background: var(--warn-hell); color: var(--warn-text); }
.marke.warn svg { color: var(--warn); }
.marke.ernst { background: var(--ernst-hell); color: var(--ernst-text); }
.marke.ernst svg { color: var(--ernst); }
.marke.kritisch { background: var(--kritisch-hell); color: var(--kritisch-text); }
.marke.kritisch svg { color: var(--kritisch); }
.marke.akzent { background: var(--akzent-hell); color: var(--akzent-text); }
.marke.umriss { background: transparent; border: 1px solid var(--linie-2); }
/* Bereichs-Punkt: Identität über den Punkt, der Text bleibt in Tinte */
.bereich { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--tinte-2); white-space: nowrap; }
.bereich::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--reihe-grau); flex: none; }
.bereich.b-kathrin_leuschner_fotografie::before { background: var(--reihe-1); }
.bereich.b-little_ones::before { background: var(--reihe-2); }
.bereich.b-marrigo::before { background: var(--reihe-3); }

/* Avatare */
.avatar {
  --g: 150; width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; letter-spacing: .01em; color: hsl(var(--g) 45% 22%);
  background: hsl(var(--g) 45% 88%); overflow: hidden; border: 2px solid var(--flaeche);
}
.avatar.gross { width: 72px; height: 72px; font-size: 1.4rem; border-width: 3px; }
.avatar.mittel { width: 44px; height: 44px; font-size: .95rem; }
.avatar.klein { width: 24px; height: 24px; font-size: .62rem; border-width: 1.5px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .avatar { color: hsl(var(--g) 55% 85%); background: hsl(var(--g) 30% 24%); } }
:root[data-theme="dark"] .avatar { color: hsl(var(--g) 55% 85%); background: hsl(var(--g) 30% 24%); }
.avatare { display: flex; }
.avatare .avatar + .avatar { margin-left: -8px; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; border-radius: var(--r-l); }
table.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.tabelle th {
  text-align: left; font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-3);
  padding: .7rem 1rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); position: sticky; top: 0; white-space: nowrap;
}
.tabelle td { padding: .72rem 1rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr { transition: background .1s ease; }
.tabelle tbody tr:hover { background: color-mix(in srgb, var(--flaeche-2) 70%, transparent); }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .minus { color: var(--tinte); }
.tabelle .plus { color: var(--gut-text); }
.tabelle .haupt-zelle { font-weight: 580; }
.tabelle .unter { display: block; font-size: .8rem; color: var(--tinte-3); font-weight: 400; margin-top: .1rem; }
.tabelle a.zeilen-link { color: var(--tinte); font-weight: 580; }
.betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.betrag.aus { color: var(--tinte); }
.betrag.ein { color: var(--gut-text); }

/* Listen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { display: flex; align-items: center; gap: .8rem; padding: .75rem 1.25rem; border-top: 1px solid var(--linie); }
.liste > li:first-child { border-top: 0; }
.liste > li.klickbar:hover { background: var(--flaeche-2); }
.liste .li-text { min-width: 0; flex: 1; }
.liste .li-titel { font-weight: 580; display: block; }
.liste a.li-titel { color: var(--tinte); }
.liste .li-unter { display: block; font-size: .8rem; color: var(--tinte-3); }
.liste .li-rechts { margin-left: auto; text-align: right; flex: none; }

/* Datenpaare */
dl.daten { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: .55rem 1.2rem; margin: 0; font-size: .92rem; }
dl.daten dt { color: var(--tinte-3); font-size: .84rem; padding-top: .05rem; }
dl.daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Reiter */
.reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); margin-bottom: 1.2rem; overflow-x: auto; }
.reiter a { padding: .6rem .8rem; color: var(--tinte-2); font-weight: 560; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center; }
.reiter a:hover { color: var(--tinte); text-decoration: none; }
.reiter a.aktiv { color: var(--tinte); border-bottom-color: var(--akzent); }
.reiter .zaehler { font-size: .72rem; background: var(--flaeche-3); color: var(--tinte-2); border-radius: 999px; padding: 0 .4rem; }

/* Hinweise, Leerzustände, Meldungen */
.hinweis { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--r-m); background: var(--flaeche-2); border: 1px solid var(--linie); font-size: .9rem; }
.hinweis svg { margin-top: .1rem; }
.hinweis.warn { background: var(--warn-hell); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn-text); }
.hinweis.gut { background: var(--gut-hell); border-color: color-mix(in srgb, var(--gut) 30%, transparent); color: var(--gut-text); }
.hinweis.kritisch { background: var(--kritisch-hell); border-color: color-mix(in srgb, var(--kritisch) 30%, transparent); color: var(--kritisch-text); }
.leer { text-align: center; padding: 2.6rem 1.5rem; color: var(--tinte-2); }
.leer .leer-symbol { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto .9rem; display: grid; place-items: center; background: var(--flaeche-2); color: var(--tinte-3); }
.leer .leer-symbol svg { width: 24px; height: 24px; }
.leer h3 { color: var(--tinte); margin-bottom: .3rem; }
.leer p { max-width: 380px; margin: 0 auto .9rem; font-size: .9rem; }
.meldung {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: .6rem;
  background: var(--tinte); color: var(--flaeche); padding: .7rem 1rem .7rem .85rem; border-radius: 12px; box-shadow: var(--schatten-3);
  font-size: .9rem; font-weight: 560; animation: meldung-ein .25s ease, meldung-aus .4s ease 5s forwards;
}
.meldung svg { color: var(--gut); }
@media (max-width: 960px) { .meldung { bottom: calc(5rem + env(safe-area-inset-bottom)); } }
@keyframes meldung-ein { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes meldung-aus { to { opacity: 0; transform: translate(-50%, 8px); visibility: hidden; } }

/* Fortschritt / Meter (gleiche Rampe für Spur und Füllung) */
.meter { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--reihe-1) 18%, var(--flaeche)); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: var(--reihe-1); }
.meter.gut { background: color-mix(in srgb, var(--gut) 18%, var(--flaeche)); } .meter.gut > i { background: var(--gut); }
.meter.warn { background: color-mix(in srgb, var(--warn) 22%, var(--flaeche)); } .meter.warn > i { background: var(--warn); }
.meter.akzent { background: color-mix(in srgb, var(--akzent) 16%, var(--flaeche)); } .meter.akzent > i { background: var(--akzent); }

/* Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--linie); border-radius: 2px; }
.zeitleiste > li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .8rem; padding: .45rem 0 .9rem; }
.zeitleiste .zl-punkt { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche); border: 1px solid var(--linie-2); color: var(--tinte-2); position: relative; z-index: 1; }
.zeitleiste .zl-punkt svg { width: 15px; height: 15px; }
.zeitleiste .zl-punkt.akzent { background: var(--akzent-hell); color: var(--akzent-text); border-color: transparent; }
.zeitleiste .zl-punkt.warn { background: var(--warn-hell); color: var(--warn-text); border-color: transparent; }
.zeitleiste .zl-punkt.gut { background: var(--gut-hell); color: var(--gut-text); border-color: transparent; }
.zeitleiste .zl-kopf { font-size: .8rem; color: var(--tinte-3); margin-bottom: .2rem; }
.zeitleiste .zl-text { font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.zeitleiste .zl-blase { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px; padding: .65rem .85rem; }

/* Kleines Symbol-Feld in Listen */
.symbol-kachel { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--flaeche-2); color: var(--tinte-2); }
.symbol-kachel.warn { background: var(--warn-hell); color: var(--warn-text); }
.symbol-kachel.gut { background: var(--gut-hell); color: var(--gut-text); }
.symbol-kachel.akzent { background: var(--akzent-hell); color: var(--akzent-text); }
.symbol-kachel.kritisch { background: var(--kritisch-hell); color: var(--kritisch-text); }
svg.sym.blass { color: var(--tinte-3); }

/* Offene-Punkte-Karten (Buchhaltung, Aufgaben) */
.punkt-karte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: .95rem 1.2rem; border-top: 1px solid var(--linie); }
.punkt-karte:first-child { border-top: 0; }
.punkt-karte .pk-symbol { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--flaeche-2); color: var(--tinte-2); }
.punkt-karte .pk-symbol.warn { background: var(--warn-hell); color: var(--warn-text); }
.punkt-karte .pk-symbol.gut { background: var(--gut-hell); color: var(--gut-text); }
.punkt-karte .pk-symbol.akzent { background: var(--akzent-hell); color: var(--akzent-text); }
.punkt-karte .pk-titel { font-weight: 620; }
.punkt-karte .pk-text { font-size: .88rem; color: var(--tinte-2); margin-top: .15rem; white-space: pre-wrap; }
.punkt-karte .pk-meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .45rem; font-size: .78rem; color: var(--tinte-3); }
.punkt-karte .pk-rechts { text-align: right; display: grid; gap: .35rem; justify-items: end; }

/* Aufklapper */
details.klapp { border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche); }
details.klapp > summary { cursor: pointer; list-style: none; padding: .7rem 1rem; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--tinte-3); border-bottom: 2px solid var(--tinte-3); transform: rotate(45deg); transition: transform .15s ease; }
details.klapp[open] > summary::after { transform: rotate(-135deg); }
details.klapp > .klapp-inhalt { padding: 0 1rem 1rem; }

/* Aktion an einem Punkt: kleiner Geister-Knopf, Formular klappt darunter auf */
details.aktion { margin-top: .55rem; }
details.aktion > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--akzent-text); padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--linie-2); background: var(--flaeche); }
details.aktion > summary::-webkit-details-marker { display: none; }
details.aktion > summary:hover { background: var(--flaeche-2); }
details.aktion[open] > summary { background: var(--akzent-hell); border-color: transparent; }
details.aktion > .aktion-inhalt { margin-top: .6rem; padding: .85rem; border-radius: var(--r-m); background: var(--flaeche-2); border: 1px solid var(--linie); }

/* Anmeldung */
.anmelde-seite { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--grund); }
.anmelde-bild {
  position: relative; overflow: hidden; color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(1200px 600px at -10% 110%, rgba(92, 195, 155, .45), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(42, 120, 214, .35), transparent 60%),
    linear-gradient(160deg, #10372c 0%, #0b241d 55%, #081a15 100%);
}
.anmelde-bild::after {
  content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 70%, #000 0%, transparent 70%);
}
.anmelde-bild .logo { color: #fff; }
.anmelde-bild .logo-text span { color: rgba(255,255,255,.65); }
.anmelde-bild blockquote { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.25; max-width: 30ch; position: relative; z-index: 1; }
.anmelde-bild .bereiche-leiste { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.75); position: relative; z-index: 1; }
.anmelde-bild .bereiche-leiste span { display: inline-flex; gap: .45rem; align-items: center; }
.anmelde-bild .bereiche-leiste i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.anmelde-form { display: grid; place-items: center; padding: 2rem; }
.anmelde-form .karte { width: 100%; max-width: 400px; padding: 2.2rem 2rem; }
.google-knopf { width: 100%; background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie-2); padding: .75rem 1rem; font-size: .95rem; }
.google-knopf:hover { background: var(--flaeche-2); }
@media (max-width: 860px) { .anmelde-seite { grid-template-columns: 1fr; } .anmelde-bild { min-height: 260px; padding: 1.6rem; } }

/* ---------- 5. Diagramme ---------- */
figure.diagramm { margin: 0; container-type: inline-size; }
.diagramm svg.variante.mittel, .diagramm svg.variante.schmal { display: none; }
@container (max-width: 640px) {
  .diagramm svg.variante.breit { display: none; }
  .diagramm svg.variante.mittel { display: block; }
}
@container (max-width: 420px) {
  .diagramm svg.variante.mittel { display: none; }
  .diagramm svg.variante.schmal { display: block; }
}
.diagramm-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .6rem; flex-wrap: wrap; }
.diagramm-titel { font-weight: 640; font-size: .95rem; }
.diagramm-unter { font-size: .8rem; color: var(--tinte-3); }
.legende { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .8rem; color: var(--tinte-2); }
.legende span { display: inline-flex; align-items: center; gap: .4rem; }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legende i.linie { height: 2px; width: 14px; border-radius: 2px; }
.diagramm svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagramm .raster line { stroke: var(--raster); stroke-width: 1; shape-rendering: crispEdges; }
.diagramm .grundlinie { stroke: var(--achse); stroke-width: 1; shape-rendering: crispEdges; }
.diagramm .achse text { fill: var(--achsen-text); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.diagramm .wert-label { fill: var(--tinte); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.diagramm .wert-label.leise { fill: var(--tinte-2); font-weight: 560; }
.diagramm .r1 { fill: var(--reihe-1); } .diagramm .r2 { fill: var(--reihe-2); } .diagramm .r3 { fill: var(--reihe-3); } .diagramm .r4 { fill: var(--reihe-4); } .diagramm .rg { fill: var(--reihe-grau); }
.diagramm .l1 { stroke: var(--reihe-1); } .diagramm .l2 { stroke: var(--reihe-2); }
.diagramm .linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagramm .wash { opacity: var(--reihe-wash); }
.diagramm .endpunkt { stroke: var(--flaeche); stroke-width: 2; }
.diagramm .marke-ziel { cursor: default; transition: opacity .12s ease; }
.diagramm .marke-ziel:hover, .diagramm .marke-ziel:focus { opacity: .82; outline: none; }
.diagramm .fadenkreuz { stroke: var(--achse); stroke-width: 1; opacity: 0; pointer-events: none; }
.diagramm .fk-punkt { opacity: 0; pointer-events: none; stroke: var(--flaeche); stroke-width: 2; }
svg.zeigt .fadenkreuz, svg.zeigt .fk-punkt { opacity: 1; }
.diagramm .ueberzug { fill: transparent; cursor: crosshair; }
.diagramm details.tabellenansicht { margin-top: .6rem; }
.diagramm details.tabellenansicht summary { font-size: .78rem; color: var(--tinte-3); cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; }
.diagramm details.tabellenansicht table { margin-top: .5rem; font-size: .82rem; }
.funke { width: 100%; height: 34px; display: block; overflow: visible; }
.funke .linie { fill: none; stroke: var(--reihe-grau); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.funke .aktuell { fill: var(--reihe-1); stroke: var(--flaeche); stroke-width: 2; }
.funke .wash { fill: var(--reihe-grau); opacity: .12; }
.hbalken { display: grid; gap: .55rem; }
.hbalken .hb-zeile { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: .8rem; align-items: center; font-size: .86rem; }
.hbalken .hb-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--tinte-2); line-height: 1.25; overflow-wrap: anywhere; }
.hbalken .hb-name a { color: var(--tinte-2); }
.hbalken .hb-spur { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.hbalken .hb-balken { height: 14px; border-radius: 0 4px 4px 0; background: var(--reihe-1); min-width: 3px; }
.hbalken .hb-wert { font-variant-numeric: tabular-nums; font-weight: 620; font-size: .82rem; white-space: nowrap; }
.tooltip {
  position: fixed; z-index: 90; pointer-events: none; background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie);
  border-radius: 10px; box-shadow: var(--schatten-2); padding: .5rem .65rem; font-size: .8rem; min-width: 120px; opacity: 0; transition: opacity .08s ease;
}
.tooltip.an { opacity: 1; }
.tooltip .tt-kopf { color: var(--tinte-3); font-size: .74rem; margin-bottom: .2rem; }
.tooltip .tt-zeile { display: flex; align-items: center; gap: .45rem; justify-content: space-between; }
.tooltip .tt-zeile b { font-variant-numeric: tabular-nums; font-size: .9rem; }
.tooltip .tt-zeile i { width: 12px; height: 2px; border-radius: 2px; display: inline-block; }

/* ---------- 6. Module ---------- */

/* Begrüßung auf der Übersicht */
.gruss { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.gruss h1 { font-size: 1.85rem; letter-spacing: -.025em; }
.gruss .datum { color: var(--tinte-3); font-size: .9rem; font-weight: 560; margin-bottom: .2rem; }

/* Zeiterfassung (Stempeluhr) */
.stempeluhr { display: grid; gap: .9rem; }
.stempeluhr .uhr { font-size: 2.3rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.stempeluhr .status { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--tinte-2); font-weight: 560; }
.stempeluhr .status i { width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-3); }
.stempeluhr.laeuft .status i { background: var(--gut); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gut) 20%, transparent); }
.stempeluhr.pause .status i { background: var(--warn); }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 1rem; align-items: start; overflow-x: auto; }
.kanban-spalte { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r-l); padding: .7rem; min-height: 200px; }
.kanban-spalte h3 { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .2rem .35rem .7rem; color: var(--tinte-2); }
.kanban-karte { display: block; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: .75rem .85rem; margin-bottom: .55rem; box-shadow: var(--schatten-1); color: inherit; }
.kanban-karte:hover { text-decoration: none; border-color: var(--linie-2); box-shadow: var(--schatten-2); }
.kanban-karte .kk-titel { font-weight: 600; font-size: .92rem; }
.kanban-karte .kk-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .55rem; font-size: .78rem; color: var(--tinte-3); gap: .5rem; }
@media (max-width: 960px) { .kanban { grid-template-columns: repeat(3, minmax(250px, 86vw)); } }

/* Kalender */
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linie); border-radius: var(--r-l); overflow: hidden; background: var(--linie); gap: 1px; }
.kalender .kt-kopf { background: var(--flaeche-2); font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-3); padding: .5rem .6rem; }
.kalender .kt { background: var(--flaeche); min-height: 104px; padding: .4rem .45rem; display: flex; flex-direction: column; gap: .25rem; }
.kalender .kt.fremd { background: var(--flaeche-2); }
.kalender .kt.fremd .kt-zahl { color: var(--tinte-3); }
.kalender .kt.heute .kt-zahl { background: var(--akzent); color: var(--auf-akzent); }
.kalender .kt.wochenende { background: color-mix(in srgb, var(--flaeche-2) 60%, var(--flaeche)); }
.kalender .kt-zahl { font-size: .78rem; font-weight: 650; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.kalender .ereignis { font-size: .72rem; font-weight: 600; padding: .12rem .4rem; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid; }
.ereignis.urlaub { background: color-mix(in srgb, var(--reihe-1) 14%, var(--flaeche)); border-color: var(--reihe-1); }
.ereignis.frei { background: color-mix(in srgb, var(--reihe-3) 16%, var(--flaeche)); border-color: var(--reihe-3); }
.ereignis.krank { background: color-mix(in srgb, var(--reihe-2) 16%, var(--flaeche)); border-color: var(--reihe-2); }
.ereignis.termin { background: color-mix(in srgb, var(--reihe-4) 18%, var(--flaeche)); border-color: var(--reihe-4); }
.ereignis.abwesend { background: var(--flaeche-3); border-color: var(--reihe-grau); }
.ereignis.beantragt { border-style: dashed; opacity: .8; }
@media (max-width: 700px) { .kalender .kt { min-height: 64px; } .kalender .ereignis { font-size: .62rem; padding: .05rem .25rem; } }

/* Kundenprofil */
.profil-kopf { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.profil-kopf h1 { font-size: 1.7rem; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.galerie a { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--flaeche-2); border: 1px solid var(--linie); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.galerie a:hover img { transform: scale(1.04); }
.datei-zeile { display: flex; align-items: center; gap: .75rem; padding: .6rem .2rem; border-top: 1px solid var(--linie); }
.datei-zeile:first-child { border-top: 0; }
.datei-symbol { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--flaeche-2); color: var(--tinte-2); flex: none; }
.ablage { border: 1.5px dashed var(--linie-2); border-radius: var(--r-m); padding: 1rem; display: grid; gap: .6rem; background: var(--flaeche-2); }

@media print {
  .seitenleiste, .kopf, .mobil-kopf, .tableiste, .knopf, button { display: none !important; }
  .rahmen { display: block; }
  .karte { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Nur für Screenreader sichtbar */
.sr-nur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Über Nacht offene Stempelung: keine laufende Uhr, sondern Hinweis zum Korrigieren */
.stempel-mini.alt .punkt { background: var(--kritisch); }
.stempel-mini.alt { color: var(--kritisch-text); }
.stempeluhr.alt .status i { background: var(--kritisch); }
.stempeluhr.alt .status { color: var(--kritisch-text); }