/* ═══════════════════════════════════════════════════════════════════════════
   immojetzt · Erscheinungsbild „Klar"
   ═══════════════════════════════════════════════════════════════════════════
   EIN Stylesheet für alle Seiten — Mitarbeiter und Kunden. Ersetzt styles.css,
   theme-v2.css, design.css und immo.css.

   Leitlinien:
   - Farbe ist Wegweiser: jeder Bereich hat seinen eigenen Ton (--bereich).
   - Status ist nie nur Farbe: immer Symbol + Wort + Farbe (WCAG 1.4.1).
   - Erfolg knallgrün, Fehler/Verlust knallrot — Töne so gewählt, dass Text
     darauf 4,5:1 erreicht (WCAG 1.4.3).
   - Bewegung 100–300 ms, rein ease-out, raus ease-in; bei
     prefers-reduced-motion aus (NN/g Animation Duration).
   - Klickziele mindestens 40 px hoch (WCAG 2.5.8 verlangt 24 px).
   #9e40b5 & Co. ersetzt sync-orgs.sh beim Ausrollen.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/jakarta-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/jakarta-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ─── Grundwerte ─────────────────────────────────────────────────────────── */
:root {
  /* Marke der Organisation */
  --marke: #9e40b5;
  --marke-dunkel: #7c2e8f;   /* Text/Links in Markenfarbe — im Dunkelmodus aufgehellt */
  --marke-tief: #7c2e8f;     /* Flächen/Verläufe — bleibt in beiden Themen dunkel */
  --marke-hell: #f6f2f7;
  --marke-rgb: 158, 64, 181;

  /* Flächen & Schrift */
  --grund: #f4f6fb;
  --flaeche: #ffffff;
  --flaeche-2: #f8fafc;
  --flaeche-3: #eef2f7;
  --tinte: #0f172a;
  --text: #334155;
  --leise: #5b6b7f;          /* 5,45:1 auf Weiß, 4,85:1 auf --flaeche-3, 5,0:1 auf --grund (vorher #64748b: 4,23:1 auf --flaeche-3) */
  --linie: #e2e8f0;
  --linie-stark: #cbd5e1;

  /* Signale — kräftig, aber lesbar (Kontraste im Kommentar gegen Weiß) */
  --gruen: #16a34a;          /* Symbole/Rahmen 3,3:1 */
  --gruen-knall: #22c55e;    /* Fläche mit dunkler Schrift */
  --gruen-text: #15803d;     /* Text 5,0:1 */
  --gruen-tief: #052e16;     /* Schrift auf Knallgrün 6,5:1 */
  --gruen-hell: #dcfce7;
  --rot: #dc2626;            /* Fläche mit weißer Schrift 4,8:1 */
  --rot-text: #b91c1c;       /* Text 6,5:1 */
  --rot-hell: #fee2e2;
  --gelb: #f59e0b;           /* Fläche mit dunkler Schrift */
  --gelb-text: #b45309;      /* Text 5,0:1 */
  --gelb-tief: #451a03;
  --gelb-hell: #fef3c7;
  --blau: #2563eb;
  --blau-text: #1d4ed8;
  --blau-hell: #dbeafe;
  --lila: #7c3aed;
  --lila-text: #6d28d9;
  --lila-hell: #ede9fe;
  --grau-hell: #f1f5f9;

  /* Bereichsfarben — Wegweiser in Navigation und Seitenkopf */
  --b-uebersicht: #4f46e5;
  --b-anfragen: #ea580c;
  --b-nachrichten: #0284c7;
  --b-termine: #db2777;
  --b-immobilien: #059669;
  --b-kunden: #7c3aed;
  --b-interessenten: #d97706;
  --b-dokumente: #2563eb;
  --b-aushaenge: #0d9488;
  --b-hilfe: #0891b2;
  --b-team: #c026d3;
  --b-einstellungen: #475569;
  --bereich: var(--marke);

  /* Form */
  --r-s: 8px;
  --r: 12px;
  --r-l: 18px;
  --r-xl: 24px;
  --schatten-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --schatten-2: 0 4px 12px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.06);
  --schatten-3: 0 24px 48px -12px rgba(15,23,42,.22);
  --fokus: 0 0 0 3px rgba(var(--marke-rgb), .35);

  /* Schrift */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kopf: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Bewegung */
  --t-kurz: 100ms;
  --t: 200ms;
  --t-lang: 300ms;
  --ein: cubic-bezier(.16, 1, .3, 1);     /* ease-out, „kommt an" */
  --aus: cubic-bezier(.7, 0, .84, 0);     /* ease-in, „geht weg" */
  --feder: cubic-bezier(.34, 1.56, .64, 1);

  /* Maße */
  --leiste: 272px;
  --kopfzeile: 64px;

  color-scheme: light;
}

[data-thema="dunkel"] {
  --grund: #0b1120;
  --flaeche: #111827;
  --flaeche-2: #0f172a;
  --flaeche-3: #1e293b;
  --tinte: #f1f5f9;
  --text: #cbd5e1;
  --leise: #94a3b8;
  --linie: #1e293b;
  --linie-stark: #334155;
  --gruen-text: #4ade80;
  --rot-text: #f87171;
  --gelb-text: #fbbf24;
  --blau-text: #60a5fa;
  --lila-text: #a78bfa;
  --gruen-hell: rgba(34,197,94,.14);
  --rot-hell: rgba(239,68,68,.16);
  --gelb-hell: rgba(245,158,11,.16);
  --blau-hell: rgba(59,130,246,.16);
  --lila-hell: rgba(139,92,246,.16);
  --grau-hell: #1e293b;
  --marke-hell: rgba(var(--marke-rgb), .16);
  /* Links und Markentext: die dunkle Markenfarbe hatte auf --flaeche nur 2,6:1.
     Zur Hälfte mit Weiß gemischt sind es je nach Marke 6–8:1. */
  --marke-dunkel: color-mix(in srgb, var(--marke) 50%, #fff);
  --schatten-1: 0 1px 2px rgba(0,0,0,.4);
  --schatten-2: 0 4px 14px rgba(0,0,0,.45);
  --schatten-3: 0 24px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ─── Basis ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 15.5px/1.55 var(--sans);
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
img, svg, video { max-width: 100%; }
a { color: var(--marke-dunkel); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--kopf); color: var(--tinte); margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
small, .klein { font-size: .85rem; }
.leise { color: var(--leise); }
.rot-text { color: var(--rot-text); }
.zahl { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 20px 0; }
/* Fokusrahmen in voller Markenfarbe: halbtransparent erreichte er auf Weiß nur 2,6:1 (WCAG 1.4.11 will 3:1). */
:focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; border-radius: 6px; }
[data-thema="dunkel"] :focus-visible { outline-color: var(--marke-dunkel); }
/* „Zum Inhalt springen" — erster Tab-Halt jeder Seite, nur sichtbar mit Tastatur (WCAG 2.4.1) */
.sprunglink { position: fixed; z-index: 1002; left: 12px; top: -80px; padding: 12px 18px; border-radius: var(--r); background: var(--tinte); color: var(--flaeche); font-weight: 700; box-shadow: var(--schatten-3); }
.sprunglink:focus { top: 12px; text-decoration: none; }
main[tabindex="-1"]:focus { outline: none; }
::selection { background: rgba(var(--marke-rgb), .2); }
[hidden] { display: none !important; }
/* Sprungziele (#passwort, #benachrichtigungen …) nicht unter der klebenden Kopfzeile verstecken */
section[id], .karte[id] { scroll-margin-top: calc(var(--kopfzeile) + 16px); }
.seite input, .seite select, .seite textarea { scroll-margin-top: calc(var(--kopfzeile) + 48px); }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
i[data-lucide], svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; }

/* ─── Rahmen: Leiste + Kopfzeile + Inhalt ────────────────────────────────── */
.rahmen { display: grid; grid-template-columns: var(--leiste) 1fr; min-height: 100vh; }
.rahmen__inhalt { min-width: 0; display: flex; flex-direction: column; }

.leiste {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  z-index: 30;
}
.leiste__marke { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; min-height: var(--kopfzeile); }
.leiste__logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--marke), var(--marke-tief));
  color: #fff; font: 800 15px/1 var(--kopf);
  box-shadow: 0 6px 16px -4px rgba(var(--marke-rgb), .55);
  overflow: hidden;
}
.leiste__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.leiste__name { font: 700 15px/1.25 var(--kopf); color: var(--tinte); }
.leiste__name small { display: block; font: 500 12px/1.3 var(--sans); color: var(--leise); }
.leiste__nav { flex: 1; overflow-y: auto; padding: 6px 12px 16px; overscroll-behavior: contain; }
.leiste__gruppe { margin-top: 18px; }
.leiste__gruppe:first-child { margin-top: 4px; }
.leiste__titel { font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); padding: 0 10px 8px; }
.navpunkt {
  --bereich: var(--marke);
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 6px 10px; margin: 2px 0;
  border-radius: var(--r);
  color: var(--text); font-weight: 500;
  transition: background var(--t-kurz), color var(--t-kurz);
}
.navpunkt:hover { background: var(--flaeche-3); text-decoration: none; color: var(--tinte); }
.navpunkt__symbol {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bereich) 13%, transparent);
  color: var(--bereich);
  transition: transform var(--t) var(--feder), background var(--t);
}
.navpunkt__symbol svg, .navpunkt__symbol i { width: 18px; height: 18px; }
.navpunkt:hover .navpunkt__symbol { transform: scale(1.08); }
.navpunkt[aria-current="page"] { background: color-mix(in srgb, var(--bereich) 10%, var(--flaeche)); color: var(--tinte); font-weight: 650; }
.navpunkt[aria-current="page"] .navpunkt__symbol { background: var(--bereich); color: #fff; box-shadow: 0 6px 14px -6px var(--bereich); }
.navpunkt[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--bereich);
}
.navpunkt__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zaehler {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--rot); color: #fff;
  font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 8px -2px rgba(220,38,38,.55);
  animation: zaehler-pop var(--t-lang) var(--feder);
}
.zaehler--ruhig { background: var(--flaeche-3); color: var(--text); box-shadow: none; }
@keyframes zaehler-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.leiste__fuss { border-top: 1px solid var(--linie); padding: 12px; }
.ich {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 10px; border-radius: var(--r);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--tinte); font: inherit;
}
.ich:hover { background: var(--flaeche-3); }
.ich__text { flex: 1; min-width: 0; }
.ich__name { font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich__rolle { font-size: 12.5px; color: var(--leise); }

/* Kopfzeile im Inhaltsbereich */
.kopfzeile {
  position: sticky; top: 0; z-index: 20;
  height: var(--kopfzeile);
  display: flex; align-items: center; gap: 12px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
.kopfzeile.ist-gescrollt { border-bottom-color: var(--linie); }
.kopfzeile .kopfzeile__menue { display: none; }
.suche-knopf {
  flex: 1; max-width: 520px;
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px;
  border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--flaeche); color: var(--leise);
  font: inherit; cursor: pointer; text-align: left;
  transition: border-color var(--t-kurz), box-shadow var(--t-kurz);
}
.suche-knopf:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-1); }
.suche-knopf kbd { margin-left: auto; font: 600 11.5px/1 var(--sans); padding: 4px 6px; border-radius: 6px; background: var(--flaeche-3); color: var(--leise); }
.kopfzeile__rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.leiste .leiste__zu { display: none; }   /* „Menü schließen" gibt es nur in der Handy-Schublade */
/* Sehr schmale Handys: „Neue Anfrage" nur als Symbol (Name bleibt per aria-label) */
@media (max-width: 380px) { .kopfzeile__neu span { display: none; } .kopfzeile__neu { width: 42px; padding: 0; } }

/* Inhalt */
.seite { width: 100%; max-width: 1280px; margin: 0 auto; padding: 8px 28px 64px; }
.seite--schmal { max-width: 880px; }
.seite--voll { max-width: none; }

/* Seitenkopf: Titel, Erklärsatz, Hauptaktion */
.seitenkopf {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  margin: 12px 0 24px;
}
.seitenkopf__symbol {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--bereich) 82%, #fff), var(--bereich));
  color: #fff;
  box-shadow: 0 10px 24px -10px var(--bereich);
}
.seitenkopf__symbol svg, .seitenkopf__symbol i { width: 26px; height: 26px; }
.seitenkopf__text { flex: 1; min-width: 240px; }
.seitenkopf__text p { margin-top: 6px; color: var(--leise); font-size: 1rem; max-width: 64ch; }
.seitenkopf__aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.pfad { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--leise); margin-bottom: 6px; }
.pfad a { white-space: nowrap; }
.pfad a { color: var(--leise); }
.pfad a:hover { color: var(--tinte); }

/* ─── Knöpfe ─────────────────────────────────────────────────────────────── */
.knopf {
  --k-grund: var(--flaeche); --k-text: var(--tinte); --k-rand: var(--linie-stark);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px;
  border: 1px solid var(--k-rand); border-radius: var(--r);
  background: var(--k-grund); color: var(--k-text);
  font: 600 14.5px/1 var(--sans); white-space: nowrap;
  cursor: pointer; text-decoration: none !important;
  transition: transform var(--t-kurz), box-shadow var(--t), background var(--t-kurz), filter var(--t-kurz);
  user-select: none;
}
.knopf:hover { box-shadow: var(--schatten-2); filter: brightness(1.03); }
.knopf:active { transform: scale(.97); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.knopf--haupt {
  --k-grund: linear-gradient(180deg, color-mix(in srgb, var(--marke) 88%, #fff), var(--marke));
  --k-text: #fff; --k-rand: transparent;
  background: var(--k-grund);
  box-shadow: 0 8px 20px -8px rgba(var(--marke-rgb), .7), inset 0 1px 0 rgba(255,255,255,.25);
}
.knopf--haupt:hover { box-shadow: 0 12px 26px -8px rgba(var(--marke-rgb), .75), inset 0 1px 0 rgba(255,255,255,.25); }
.knopf--gruen { --k-grund: var(--gruen-knall); --k-text: var(--gruen-tief); --k-rand: transparent; box-shadow: 0 8px 20px -8px rgba(34,197,94,.75); }
.knopf--rot { --k-grund: var(--rot); --k-text: #fff; --k-rand: transparent; box-shadow: 0 8px 20px -8px rgba(220,38,38,.7); }
.knopf--leise { --k-grund: transparent; --k-rand: transparent; --k-text: var(--text); }
.knopf--leise:hover { background: var(--flaeche-3); box-shadow: none; }
.knopf--rot-leise { --k-grund: transparent; --k-rand: transparent; --k-text: var(--rot-text); }
.knopf--rot-leise:hover { background: var(--rot-hell); box-shadow: none; }
.knopf--klein { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: var(--r-s); }
.knopf--gross { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: var(--r-l); }
.knopf--rund { width: 42px; padding: 0; border-radius: 999px; }
.knopf--rund.knopf--klein { width: 34px; }
.knopf--block { width: 100%; }
.knopf.ist-laedt { position: relative; color: transparent !important; pointer-events: none; }
.knopf.ist-laedt::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: var(--k-text) var(--k-text) var(--k-text) transparent;
  animation: drehen .7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
.symbolknopf {
  position: relative;
  width: 42px; height: 42px; border-radius: var(--r); border: 0;
  display: inline-grid; place-items: center;
  background: transparent; color: var(--text); cursor: pointer;
  transition: background var(--t-kurz), transform var(--t-kurz);
}
.symbolknopf:hover { background: var(--flaeche-3); color: var(--tinte); }
.symbolknopf:active { transform: scale(.94); }
/* Zahl oben rechts an der Glocke — links bündig ab der Mitte, damit sie die
   Glocke bei „25" nicht ganz zudeckt. */
.symbolknopf .punkt {
  position: absolute; top: 3px; left: 23px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--rot); color: #fff; border: 2px solid var(--flaeche);
  font: 700 10.5px/14px var(--sans); text-align: center;
}

/* ─── Karten, Flächen ────────────────────────────────────────────────────── */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-1);
}
.karte--polster { padding: 22px; }
.karte__kopf { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--linie); }
.karte__kopf h2, .karte__kopf h3 { flex: 1; }
.karte__inhalt { padding: 22px; }
.karte__fuss { padding: 14px 22px; border-top: 1px solid var(--linie); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.karte--klickbar { cursor: pointer; transition: transform var(--t) var(--ein), box-shadow var(--t), border-color var(--t); }
.karte--klickbar:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); border-color: var(--linie-stark); text-decoration: none; }
.raster { display: grid; gap: 18px; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.spalten { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.spalten > *, .raster > * { min-width: 0; }
.stapel { display: flex; flex-direction: column; gap: 16px; }
.reihe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reihe--zwischen { justify-content: space-between; }
.wachsen { flex: 1; min-width: 0; }

/* Kennzahl — immer klickbar, führt in die passende Liste */
.kennzahl {
  --bereich: var(--marke);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border-radius: var(--r-l);
  background: var(--flaeche); border: 1px solid var(--linie);
  color: var(--text); box-shadow: var(--schatten-1);
  transition: transform var(--t) var(--ein), box-shadow var(--t);
}
button.kennzahl { font: inherit; text-align: left; cursor: pointer; width: 100%; }
a.kennzahl:hover, button.kennzahl:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); text-decoration: none; }
.kennzahl::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bereich) 11%, transparent), transparent 68%);
}
.kennzahl__kopf { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.kennzahl__symbol { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--bereich) 14%, transparent); color: var(--bereich); }
.kennzahl__wert { font: 800 2rem/1.1 var(--kopf); color: var(--tinte); font-variant-numeric: tabular-nums; }
.kennzahl__hinweis { font-size: 13px; color: var(--leise); }
.kennzahl--alarm { border-color: color-mix(in srgb, var(--rot) 45%, var(--linie)); }
.kennzahl--alarm .kennzahl__wert { color: var(--rot-text); }

/* Willkommensfläche */
.held {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: 28px 30px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(125deg, var(--marke) 0%, color-mix(in srgb, var(--marke) 55%, #7c3aed) 60%, color-mix(in srgb, var(--marke) 30%, #db2777) 100%);
  box-shadow: 0 24px 48px -24px rgba(var(--marke-rgb), .7);
}
.held h1 { color: #fff; }
.held p { color: rgba(255,255,255,.9); margin-top: 8px; font-size: 1.05rem; max-width: 60ch; }
.held .knopf { --k-grund: #fff; --k-text: var(--marke-tief); --k-rand: transparent; }
.held .knopf--glas { --k-grund: rgba(255,255,255,.16); --k-text: #fff; --k-rand: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.held__aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* Große Aufgaben-Kacheln („Was möchten Sie tun?") */
.aufgabe {
  --bereich: var(--marke);
  display: flex; align-items: center; gap: 16px;
  padding: 18px; border-radius: var(--r-l);
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-1);
  color: var(--tinte); text-decoration: none !important;
  transition: transform var(--t) var(--ein), box-shadow var(--t), border-color var(--t);
}
.aufgabe:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px var(--bereich); border-color: color-mix(in srgb, var(--bereich) 40%, var(--linie)); }
.aufgabe__symbol { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--bereich); color: #fff; box-shadow: 0 8px 18px -8px var(--bereich); }
.aufgabe__symbol svg, .aufgabe__symbol i { width: 24px; height: 24px; }
.aufgabe__titel { font: 700 1.02rem/1.3 var(--kopf); display: block; }
.aufgabe__text { font-size: 13.5px; color: var(--leise); }
.aufgabe__pfeil { margin-left: auto; color: var(--leise); transition: transform var(--t); }
.aufgabe:hover .aufgabe__pfeil { transform: translateX(4px); color: var(--bereich); }

/* ─── Status — immer Symbol + Wort + Farbe ───────────────────────────────── */
.status {
  --s-grund: var(--grau-hell); --s-text: var(--text); --s-punkt: var(--leise);
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px 0 8px; border-radius: 999px;
  background: var(--s-grund); color: var(--s-text);
  font: 600 12.5px/1 var(--sans); white-space: nowrap;
}
.status svg, .status i { width: 14px; height: 14px; stroke-width: 2.5; }
.status--neu { --s-grund: var(--blau-hell); --s-text: var(--blau-text); }
.status--arbeit { --s-grund: var(--gelb-hell); --s-text: var(--gelb-text); }
.status--warten { --s-grund: var(--lila-hell); --s-text: var(--lila-text); }
.status--erledigt { --s-grund: var(--gruen-hell); --s-text: var(--gruen-text); }
.status--fehler, .status--dringend { --s-grund: var(--rot-hell); --s-text: var(--rot-text); }
.status--knall-gruen { --s-grund: var(--gruen-knall); --s-text: var(--gruen-tief); }
.status--knall-rot { --s-grund: var(--rot); --s-text: #fff; }
.status--leise { --s-grund: var(--grau-hell); --s-text: var(--leise); }
.status--puls svg, .status--puls i { animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; } }
.marke { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 12px/1 var(--sans); background: var(--flaeche-3); color: var(--text); }

/* Geld: Gewinn grün, Verlust rot — mit Vorzeichen und Pfeil */
.betrag { font-weight: 700; font-variant-numeric: tabular-nums; }
.betrag--plus { color: var(--gruen-text); }
.betrag--minus { color: var(--rot-text); }

/* ─── Listen & Tabellen ──────────────────────────────────────────────────── */
.liste { list-style: none; margin: 0; padding: 0; }
.zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; min-height: 64px;
  border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none !important;
  transition: background var(--t-kurz);
}
.zeile:last-child, .liste > li:last-child > .zeile { border-bottom: 0; }
.liste > li:not(:last-child) > .zeile:last-child { border-bottom: 1px solid var(--linie); }
a.zeile:hover, button.zeile:hover, .zeile--klickbar:hover { background: var(--flaeche-2); cursor: pointer; }
.zeile.ist-aktiv { background: var(--marke-hell); box-shadow: inset 4px 0 0 var(--marke); }
.zeile__haupt { flex: 1; min-width: 0; }
.zeile__titel { font-weight: 650; color: var(--tinte); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile__unter { font-size: 13.5px; color: var(--leise); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile__rechts { display: flex; align-items: center; gap: 10px; flex: none; }
button.zeile { width: 100%; border: 0; border-bottom: 1px solid var(--linie); background: none; font: inherit; text-align: left; }

.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.tabelle th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font: 600 12.5px/1.2 var(--sans); letter-spacing: .02em; color: var(--leise);
  padding: 12px 16px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.tabelle td { padding: 14px 16px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr { transition: background var(--t-kurz); }
.tabelle tbody tr:hover { background: var(--flaeche-2); }
.tabelle tbody tr.ist-klickbar { cursor: pointer; }

/* Avatar */
.avatar {
  --a: var(--marke);
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  /* Initialen zu 40 % mit --tinte gemischt: reine Bereichsfarbe hatte nur 2,5–3,7:1 (WCAG 1.4.3), so ≥ 5,3:1 hell und dunkel */
  background: color-mix(in srgb, var(--a) 16%, var(--flaeche)); color: color-mix(in srgb, var(--a) 60%, var(--tinte));
  font: 700 14px/1 var(--kopf); text-transform: uppercase;
  position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar--klein { width: 30px; height: 30px; font-size: 12px; }
.avatar--gross { width: 64px; height: 64px; font-size: 22px; }
.avatar__online::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--gruen-knall); border: 2px solid var(--flaeche); }

/* ─── Werkzeugleiste: Suche + Filter ─────────────────────────────────────── */
.werkzeuge { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.suchfeld { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.suchfeld > svg, .suchfeld > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--leise); pointer-events: none; }
.suchfeld input { padding-left: 40px !important; }
.werkzeuge select { width: auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  font: 600 13.5px/1 var(--sans); cursor: pointer;
  transition: all var(--t-kurz);
}
.chip:hover { border-color: var(--linie-stark); }
.chip[aria-pressed="true"], .chip.ist-aktiv { background: var(--tinte); color: var(--flaeche); border-color: var(--tinte); }
.chip .chip__zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--flaeche-3); color: var(--text); font-size: 11.5px; }
.chip .chip__zahl--rot { background: var(--rot); color: #fff; }
.chip[aria-pressed="true"] .chip__zahl, .chip.ist-aktiv .chip__zahl { background: rgba(255,255,255,.2); color: inherit; }

/* Reiter */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.reiter__eintrag {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 14px; border: 0; background: none; cursor: pointer;
  font: 600 14.5px/1 var(--sans); color: var(--leise); white-space: nowrap;
  text-decoration: none !important; transition: color var(--t-kurz);
}
.reiter__eintrag:hover { color: var(--tinte); }
.reiter__eintrag[aria-selected="true"], .reiter__eintrag[aria-current="page"] { color: var(--tinte); }
.reiter__eintrag[aria-selected="true"]::after, .reiter__eintrag[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--bereich); animation: reiter-strich var(--t) var(--ein);
}
@keyframes reiter-strich { from { transform: scaleX(.3); opacity: 0; } }

/* Umschalter (zwei, drei Möglichkeiten) */
.umschalter { display: inline-flex; padding: 4px; border-radius: var(--r); background: var(--flaeche-3); gap: 2px; }
.umschalter button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: 600 13.5px/1 var(--sans); color: var(--leise); cursor: pointer; transition: all var(--t-kurz); }
.umschalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-1); }

/* ─── Formulare ──────────────────────────────────────────────────────────── */
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.feld > label, .feld__label { font-weight: 600; color: var(--tinte); font-size: 14px; }
.feld__label .pflicht { color: var(--rot-text); }
.feld__hilfe { font-size: 13px; color: var(--leise); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"],
input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"],
input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1.5px solid var(--linie-stark); border-radius: var(--r);
  background: var(--flaeche); color: var(--tinte);
  font: 400 15px/1.4 var(--sans);
  transition: border-color var(--t-kurz), box-shadow var(--t-kurz);
}
textarea { min-height: 110px; resize: vertical; }
select[size], select[multiple] { background-image: none; padding-right: 14px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--marke) 40%, var(--linie-stark)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marke); box-shadow: var(--fokus); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--leise) 75%, transparent); }
.feld--fehler input, .feld--fehler select, .feld--fehler textarea, [aria-invalid="true"] { border-color: var(--rot) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.18) !important; }
.feld--fehler { animation: wackeln .32s var(--ein); }
.feld__fehler { display: flex; gap: 6px; align-items: center; color: var(--rot-text); font-size: 13.5px; font-weight: 600; }
.feld--ok input { border-color: var(--gruen); }
@keyframes wackeln { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--marke); cursor: pointer; }
.haken { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.haken input { margin-top: 2px; flex: none; }

/* Schalter */
.schalter { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter__bahn { width: 46px; height: 26px; border-radius: 999px; background: var(--linie-stark); position: relative; transition: background var(--t); flex: none; }
.schalter__bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--schatten-1); transition: transform var(--t) var(--feder); }
.schalter input:checked + .schalter__bahn { background: var(--gruen); }
.schalter input:checked + .schalter__bahn::after { transform: translateX(20px); }
.schalter input:focus-visible + .schalter__bahn { box-shadow: var(--fokus); }

/* Dateien ablegen */
.ablage-feld {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 28px; border: 2px dashed var(--linie-stark); border-radius: var(--r-l);
  background: var(--flaeche-2); color: var(--leise); cursor: pointer;
  transition: all var(--t);
}
.ablage-feld:hover, .ablage-feld.ist-drueber { border-color: var(--marke); background: var(--marke-hell); color: var(--marke-dunkel); }
.ablage-feld.ist-drueber { transform: scale(1.01); }

/* ─── Hinweise (bleiben stehen — für Fehler und Wichtiges) ───────────────── */
.hinweis {
  --h: var(--blau); --h-grund: var(--blau-hell); --h-text: var(--blau-text);
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--h-grund); color: var(--tinte);
  border-left: 5px solid var(--h);
}
.hinweis > svg, .hinweis > i { color: var(--h-text); margin-top: 1px; }
.hinweis strong { color: var(--h-text); }
.hinweis--erfolg { --h: var(--gruen); --h-grund: var(--gruen-hell); --h-text: var(--gruen-text); }
.hinweis--fehler { --h: var(--rot); --h-grund: var(--rot-hell); --h-text: var(--rot-text); }
.hinweis--warnung { --h: var(--gelb); --h-grund: var(--gelb-hell); --h-text: var(--gelb-text); }

/* Leer-Zustand: warum leer + was jetzt */
.leer {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 44px 24px; color: var(--leise);
}
.leer__symbol {
  width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bereich) 12%, var(--flaeche)); color: var(--bereich);
  margin-bottom: 6px; animation: schweben 3.2s ease-in-out infinite;
}
.leer__symbol svg, .leer__symbol i { width: 34px; height: 34px; }
.leer h3 { font-size: 1.1rem; }
.leer p { max-width: 46ch; }
.leer .knopf { margin-top: 8px; }
@keyframes schweben { 50% { transform: translateY(-5px); } }

/* Platzhalter beim Laden — statt leerer Seiten */
.skelett { display: block; border-radius: 8px; height: 14px; background: linear-gradient(90deg, var(--flaeche-3) 25%, color-mix(in srgb, var(--flaeche-3) 40%, var(--flaeche)) 50%, var(--flaeche-3) 75%); background-size: 200% 100%; animation: schimmer 1.3s linear infinite; }
.skelett--titel { height: 18px; width: 45%; }
.skelett--zeile { height: 64px; border-radius: 0; border-bottom: 1px solid var(--linie); }
@keyframes schimmer { to { background-position: -200% 0; } }

/* ─── Dialog (auf <dialog>) ──────────────────────────────────────────────── */
dialog.dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 0; border-radius: var(--r-xl);
  background: var(--flaeche); color: var(--text);
  box-shadow: var(--schatten-3);
  overflow: clip;
}
dialog.dialog--breit { width: min(860px, calc(100vw - 32px)); }
dialog.dialog--voll { width: min(1200px, calc(100vw - 32px)); height: calc(100vh - 48px); }
dialog.dialog[open] { display: flex; flex-direction: column; animation: dialog-rein var(--t-lang) var(--ein); }
dialog.dialog::backdrop { background: rgba(15,23,42,.45); backdrop-filter: blur(3px); animation: einblenden var(--t) var(--ein); }
.dialog__kopf { display: flex; align-items: center; gap: 12px; padding: 20px 24px 12px; }
.dialog__kopf h2 { flex: 1; }
.dialog__inhalt { padding: 8px 24px 20px; overflow-y: auto; flex: 1; min-height: 0; }
/* Formular-Dialoge (<dialog><form>…kopf/inhalt/fuss</form>): Das Formular übernimmt
   die Spalte, damit nur der Inhalt scrollt und der Absende-Knopf im Fuß sichtbar
   bleibt — vorher lag er am Handy unter dem Bildschirmrand (Wunsch Agent 5). */
dialog.dialog > form, dialog.schublade > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dialog__fuss { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--linie); background: var(--flaeche-2); flex-wrap: wrap; }
.dialog__gefahr { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--rot-hell); color: var(--rot); margin-bottom: 4px; }
@keyframes dialog-rein { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes einblenden { from { opacity: 0; } }

/* Seitliche Schublade */
dialog.schublade {
  margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(520px, 100vw); max-width: 100vw;
  padding: 0; border: 0; border-radius: var(--r-xl) 0 0 var(--r-xl);
  background: var(--flaeche); box-shadow: var(--schatten-3);
}
dialog.schublade[open] { display: flex; flex-direction: column; animation: schublade-rein var(--t-lang) var(--ein); }
dialog.schublade::backdrop { background: rgba(15,23,42,.35); }
@keyframes schublade-rein { from { transform: translateX(40px); opacity: 0; } }
/* Glocke: Zähler + „Alle als gelesen" unter dem Kopf — oben ist auf dem Handy kein Platz */
.glocke__leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 16px 8px 24px; border-bottom: 1px solid var(--linie); }

/* Aufklappmenü */
.menue {
  position: absolute; z-index: 60; min-width: 220px; width: max-content; max-width: min(340px, 92vw); padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  box-shadow: var(--schatten-3); animation: menue-rein var(--t) var(--ein);
}
.menue button, .menue a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 8px; background: none;
  font: 500 14px/1.2 var(--sans); color: var(--text); text-align: left; cursor: pointer;
}
.menue button:hover, .menue a:hover { background: var(--flaeche-3); color: var(--tinte); text-decoration: none; }
.menue .gefahr { color: var(--rot-text); }
.menue .gefahr:hover { background: var(--rot-hell); }
.menue hr { margin: 6px 0; }
@keyframes menue-rein { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ─── Meldungen (Toasts) — Erfolg und Info. Fehler bleiben als .hinweis ─── */
.meldungen { position: fixed; z-index: 1000; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.meldungen[popover] { inset: 18px 18px auto auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible; color: inherit; }
.meldung {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  min-width: 300px; max-width: 420px; padding: 14px 16px 14px 14px;
  border-radius: var(--r-l); box-shadow: var(--schatten-3);
  background: var(--tinte); color: var(--flaeche);
  font-weight: 600;
  animation: meldung-rein var(--t-lang) var(--feder);
}
.meldung.ist-weg { animation: meldung-raus var(--t) var(--aus) forwards; }
.meldung__symbol { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.18); }
.meldung__text { flex: 1; }
.meldung__text small { display: block; font-weight: 500; opacity: .85; margin-top: 2px; }
.meldung button { border: 0; background: rgba(255,255,255,.18); color: inherit; border-radius: 8px; padding: 6px 10px; font: 700 13px/1 var(--sans); cursor: pointer; }
.meldung--erfolg { background: var(--gruen-knall); color: var(--gruen-tief); }
.meldung--erfolg .meldung__symbol { background: rgba(5,46,22,.12); }
.meldung--fehler { background: var(--rot); color: #fff; animation: meldung-rein var(--t-lang) var(--feder), wackeln .4s var(--ein) .25s; }
.meldung--warnung { background: var(--gelb); color: var(--gelb-tief); }
.meldung--erfolg .haken-zeichnen path, .meldung--erfolg .haken-zeichnen polyline { stroke-dasharray: 30; stroke-dashoffset: 30; animation: haken-zeichnen .45s var(--ein) .15s forwards; }
@keyframes haken-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes meldung-rein { from { opacity: 0; transform: translateX(30px) scale(.95); } }
@keyframes meldung-raus { to { opacity: 0; transform: translateX(30px) scale(.95); } }

/* ─── Chat ───────────────────────────────────────────────────────────────── */
.chat { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - var(--kopfzeile) - 172px); min-height: 520px; overflow: hidden; }
.chat__liste { border-right: 1px solid var(--linie); display: flex; flex-direction: column; min-height: 0; }
.chat__liste .liste { overflow-y: auto; flex: 1; }
.chat__verlauf { display: flex; flex-direction: column; min-height: 0; background: var(--flaeche-2); }
.chat__kopf { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.chat__nachrichten { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.chat__eingabe { display: flex; gap: 10px; align-items: flex-end; padding: 14px 16px; border-top: 1px solid var(--linie); background: var(--flaeche); }
.chat__eingabe textarea { min-height: 44px; max-height: 160px; resize: none; }
.blase { max-width: min(560px, 78%); padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte); align-self: flex-start; animation: blase-rein var(--t) var(--ein); word-wrap: break-word; }
.blase--ich { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--marke); border-color: transparent; color: #fff; }
.blase__zeit { display: block; margin-top: 4px; font-size: 11.5px; opacity: .7; }
.chat__tag { align-self: center; font-size: 12px; font-weight: 600; color: var(--leise); background: var(--flaeche); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--linie); margin: 8px 0; }
@keyframes blase-rein { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ─── Fortschritt / Schritte ─────────────────────────────────────────────── */
.schritte { display: flex; gap: 8px; counter-reset: s; margin: 0 0 22px; padding: 0; list-style: none; }
.schritt { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--linie); color: var(--leise); font-weight: 600; font-size: 14px; }
.schritt::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche-3); color: var(--text); font-weight: 700; flex: none; }
.schritt.ist-aktiv { border-color: var(--marke); color: var(--tinte); box-shadow: var(--fokus); }
.schritt.ist-aktiv::before { background: var(--marke); color: #fff; }
.schritt.ist-fertig::before { content: "✓"; background: var(--gruen); color: #fff; }
.balken { height: 8px; border-radius: 999px; background: var(--flaeche-3); overflow: hidden; }
.balken > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--marke), color-mix(in srgb, var(--marke) 60%, #22c55e)); transition: width var(--t-lang) var(--ein); }

/* Zeitstrahl */
.zeitstrahl { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitstrahl::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--linie); }
.zeitstrahl li { position: relative; padding: 0 0 18px 44px; }
.zeitstrahl__punkt { position: absolute; left: 4px; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche); border: 2px solid var(--bereich); color: var(--bereich); }
.zeitstrahl__punkt svg { width: 12px; height: 12px; }

/* ─── Schnellsuche (Strg/⌘ K) ────────────────────────────────────────────── */
.schnellsuche__eingabe { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linie); }
.schnellsuche__eingabe input { border: 0 !important; box-shadow: none !important; padding: 0; font-size: 17px; min-height: 32px; }
.schnellsuche__treffer { max-height: 60vh; overflow-y: auto; padding: 8px; }
.schnellsuche__treffer .zeile { border-radius: var(--r); border: 0; padding: 10px 12px; min-height: 52px; }
.schnellsuche__treffer .zeile.ist-aktiv { background: var(--marke-hell); box-shadow: none; }
.schnellsuche__gruppe { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 6px; }
.schnellsuche__gruppe .leiste__titel { padding: 0; }
.schnellsuche__gruppe .knopf { min-height: 32px; }
/* Wohin führt der Vorschlag? Rechts als kleine Marke, auf dem Handy unter dem Titel. */
.schnellsuche__ziel { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--leise); white-space: nowrap; }
.schnellsuche__ziel svg, .schnellsuche__ziel i { width: 14px; height: 14px; }
.schnellsuche__ziel-unter { display: none; }
.schnellsuche__fuss { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--linie); background: var(--flaeche-2); font-size: 12.5px; color: var(--leise); }
.schnellsuche__fuss kbd { font: 600 11.5px/1 var(--sans); padding: 3px 6px; border-radius: 6px; background: var(--flaeche-3); color: var(--text); border: 1px solid var(--linie); }
.schnellsuche__leer { padding: 28px 16px; text-align: center; color: var(--leise); }
/* Erklärung/Weg darf zwei Zeilen haben — „Immobilie → Wohnung öffnen → …" soll lesbar bleiben */
.schnellsuche__treffer .zeile__unter { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.schnellsuche__leer strong { display: block; color: var(--tinte); margin-bottom: 4px; }

/* ─── Streifen „Kundenansicht" (Mitarbeiter sieht ein fremdes Konto) ─────── */
.fremd-streifen { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--gelb); color: var(--gelb-tief); font-weight: 600; }
.fremd-streifen .knopf { --k-grund: var(--gelb-tief); --k-text: #fff; --k-rand: transparent; flex: none; }
.fremd-streifen__lang { flex: 1; min-width: 0; }
.fremd-streifen__kurz { display: none; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Untere Leiste (Handy) ──────────────────────────────────────────────── */
.unten { display: none; }

/* ─── Bewegung beim Erscheinen ───────────────────────────────────────────── */
.erscheinen { animation: erscheinen var(--t-lang) var(--ein) both; }
.erscheinen-staffel > * { animation: erscheinen var(--t-lang) var(--ein) both; }
.erscheinen-staffel > *:nth-child(2) { animation-delay: 40ms; }
.erscheinen-staffel > *:nth-child(3) { animation-delay: 80ms; }
.erscheinen-staffel > *:nth-child(4) { animation-delay: 120ms; }
.erscheinen-staffel > *:nth-child(5) { animation-delay: 160ms; }
.erscheinen-staffel > *:nth-child(6) { animation-delay: 200ms; }
.erscheinen-staffel > *:nth-child(n+7) { animation-delay: 240ms; }
@keyframes erscheinen { from { opacity: 0; transform: translateY(10px); } }
.aufleuchten { animation: aufleuchten 1.2s var(--ein); }
@keyframes aufleuchten { 0% { background: color-mix(in srgb, var(--gruen-knall) 30%, transparent); } }

/* ─── Anmeldung & öffentliche Seiten ─────────────────────────────────────── */
/* <body data-ansicht="oeffentlich"><main class="anmeldung" style="--bild:url(bild-team.jpg)">
     <section class="anmeldung__bild">…Marke, Satz…</section>
     <section class="anmeldung__form"><div class="anmeldung__karte">…Formular…</div></section> */
.anmeldung { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); min-height: 100vh; }
.anmeldung__bild {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px; color: #fff;
  background: linear-gradient(160deg, rgba(var(--marke-rgb), .78), rgba(15,23,42,.82)), var(--bild, none) center / cover no-repeat, var(--marke-tief);
}
.anmeldung__bild::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; bottom: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); pointer-events: none;
}
.anmeldung__marke { display: flex; align-items: center; gap: 12px; font: 700 17px/1.2 var(--kopf); color: #fff; }
.anmeldung__marke .leiste__logo { background: rgba(255,255,255,.18); box-shadow: none; backdrop-filter: blur(6px); }
.anmeldung__satz { max-width: 520px; }
.anmeldung__satz h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.1; }
.anmeldung__satz p { margin-top: 14px; font-size: 1.1rem; color: rgba(255,255,255,.88); }
.anmeldung__vorteile { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.anmeldung__vorteile li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.anmeldung__vorteile li span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.anmeldung__form { display: grid; place-items: center; padding: 40px 24px; background: var(--flaeche); }
.anmeldung__karte { width: 100%; max-width: 420px; animation: erscheinen var(--t-lang) var(--ein) both; }
.anmeldung__karte h2 { font-size: 1.75rem; font-weight: 800; }
.anmeldung__karte > p { color: var(--leise); margin: 8px 0 26px; }
.anmeldung__wechsel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); text-align: center; color: var(--leise); }
/* Links mitten im Text brauchen mehr als Farbe (WCAG 1.4.1): unterstreichen */
.anmeldung__wechsel a:not(.knopf), .lesen p a, .lesen li a, .hinweis a:not(.knopf), .dialog__inhalt p a { text-decoration: underline; text-underline-offset: 2px; }
.anmeldung__fuss { display: flex; gap: 16px; justify-content: center; margin-top: 28px; font-size: 13px; }
.anmeldung__fuss a { color: var(--leise); }
.passwortfeld { position: relative; }
.passwortfeld input { padding-right: 48px; }
.passwortfeld button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; }
/* Lesbare Inhaltsseiten (Impressum, Datenschutz) */
.lesen { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
.lesen h1 { margin-bottom: 24px; }
.lesen h2 { margin: 28px 0 10px; }
.lesen p, .lesen li { line-height: 1.7; }

/* ─── Kleiner als Desktop ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .chat { grid-template-columns: 280px minmax(0, 1fr); }
  .spalten { grid-template-columns: minmax(0, 1fr); }
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .anmeldung { grid-template-columns: minmax(0, 1fr); }
  .anmeldung__bild { min-height: 220px; padding: 24px; }
  .anmeldung__satz h1 { font-size: 1.7rem; }
  .anmeldung__vorteile { display: none; }
  .anmeldung__form { padding: 28px 20px 48px; border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -24px; position: relative; }
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  /* Schublade: liegt ÜBER der unteren Leiste (z 40), sonst verschwinden
     Kontoknopf und Rechtslinks dahinter. Geschlossen unsichtbar, damit die
     Tab-Taste nicht durch unsichtbare Menüpunkte wandert. */
  .leiste {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 46;
    transform: translateX(-102%); visibility: hidden;
    transition: transform var(--t-lang) var(--ein), visibility 0s linear var(--t-lang);
    box-shadow: var(--schatten-3);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .leiste.ist-offen { transform: none; visibility: visible; transition: transform var(--t-lang) var(--ein), visibility 0s; }
  .leiste .leiste__zu { display: inline-grid; position: absolute; top: 12px; right: 8px; }
  .leiste__marke { padding-right: 56px; }
  .leisten-schleier { position: fixed; inset: 0; z-index: 45; background: rgba(15,23,42,.4); animation: einblenden var(--t); }
  .kopfzeile { padding: 0 12px; }
  .fremd-streifen { padding: 6px 12px; gap: 8px; }
  .fremd-streifen__lang { display: none; }
  .fremd-streifen__kurz { display: block; }
  /* Tippflächen am Handy mindestens 40 px (kleine Knöpfe, Chips, Augen-Knopf) */
  .knopf--klein { min-height: 40px; }
  .knopf--rund.knopf--klein { width: 40px; }
  .chip { height: 40px; }
  .passwortfeld button { width: 40px; height: 40px; }
  .schnellsuche__gruppe .knopf { min-height: 40px; }
  .kopfzeile .kopfzeile__menue { display: inline-grid; }
  .suche-knopf kbd, .suche-knopf span { display: none; }
  .suche-knopf { flex: 0 0 42px; padding: 0; justify-content: center; border: 0; background: none; }
  .seite { padding: 4px 16px 96px; }
  .seitenkopf { margin: 8px 0 18px; gap: 12px 14px; align-items: flex-start; }
  .seitenkopf__symbol { width: 44px; height: 44px; border-radius: 13px; }
  .seitenkopf__aktionen { width: 100%; }
  .seitenkopf__aktionen .knopf--haupt { flex: 1; }
  .raster--2, .raster--3, .raster--4 { grid-template-columns: minmax(0, 1fr); }
  .zeile { padding: 12px 16px; }
  .schritt { padding: 10px; font-size: 13px; }
  .schritt:not(.ist-aktiv) { flex: 0 0 auto; font-size: 0; gap: 0; }
  .schritt::before { font-size: 13px; }
  /* Kein Schritt aktiv (alles erledigt / noch nicht begonnen)? Sonst stünde nur eine
     Zahlenreihe da — dann den letzten fertigen bzw. den ersten Schritt beschriften. */
  .schritte:not(:has(.ist-aktiv)) .schritt.ist-fertig:not(:has(~ .ist-fertig)),
  .schritte:not(:has(.ist-aktiv, .ist-fertig)) .schritt:first-child { flex: 1; font-size: 13px; gap: 10px; color: var(--tinte); }
  /* Variante: alle Beschriftungen sichtbar, zwei Spalten (z. B. Checklisten mit vielen Schritten) */
  .schritte.schritte--raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte.schritte--raster .schritt { font-size: 12.5px; gap: 8px; flex: none; }
  .karte__kopf, .karte__inhalt { padding: 16px; }
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--kopfzeile) - 150px); }
  .chat.zeigt-verlauf .chat__liste { display: none; }
  .chat:not(.zeigt-verlauf) .chat__verlauf { display: none; }
  .meldungen { left: 12px; right: 12px; top: auto; bottom: 84px; }
  .meldungen[popover] { inset: auto 12px 84px 12px; }
  /* Öffentliche Seiten haben keine untere Leiste — Meldung weiter nach unten, weg vom Hauptknopf. */
  [data-ansicht="oeffentlich"] .meldungen { bottom: 16px; }
  [data-ansicht="oeffentlich"] .meldungen[popover] { inset: auto 12px calc(16px + env(safe-area-inset-bottom)) 12px; }
  .schnellsuche__ziel { display: none; }
  .schnellsuche__ziel-unter { display: inline; }
  .schnellsuche__fuss { display: none; }
  /* Suche auf dem Handy oben andocken: Die Bildschirmtastatur deckt sonst die Treffer zu. */
  dialog.dialog.dialog--suche { margin: 0 0 auto; max-height: 86dvh; border-radius: 0 0 var(--r-xl) var(--r-xl); }
  dialog.dialog.dialog--suche[open] { animation: suche-rein var(--t-lang) var(--ein); }
  @keyframes suche-rein { from { transform: translateY(-30px); opacity: .4; } }
  dialog.dialog.dialog--suche .schnellsuche__treffer { max-height: calc(86dvh - 76px); }
  .schnellsuche__eingabe { padding: 12px 16px; }
  .meldung { min-width: 0; max-width: none; }
  .unten {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linie);
  }
  .unten a, .unten button {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border: 0; background: none; border-radius: 12px;
    font: 600 11px/1.1 var(--sans); color: var(--leise); text-decoration: none; cursor: pointer;
  }
  .unten [aria-current="page"] { color: var(--bereich); }
  .unten [aria-current="page"] svg { transform: translateY(-1px); }
  .unten .zaehler { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
  dialog.dialog, dialog.dialog--breit, dialog.dialog--voll { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .reiter { flex-wrap: wrap; overflow: visible; }
  .reiter__eintrag { padding: 10px 10px; }
  dialog.dialog[open] { animation: blatt-rein var(--t-lang) var(--ein); }
  .dialog__fuss { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  @keyframes blatt-rein { from { transform: translateY(40px); opacity: .4; } }
}

/* ─── Weniger Bewegung, wenn gewünscht ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ─── Druck ──────────────────────────────────────────────────────────────── */
@media print {
  .leiste, .kopfzeile, .unten, .meldungen, .seitenkopf__aktionen { display: none !important; }
  .rahmen { display: block; }
  body { background: #fff; }
  .karte { box-shadow: none; }
}

/* ─── Dateiliste: Ordner und Dateien einer Ebene in EINER Liste ──────────── */
/* Baustein dateiliste.js (aus BZI übernommen 10/2026). Ordner zuerst, dann
   Dateien, gleiche Spalten; Klick auf eine Ordnerzeile geht tiefer, „Zurück zu …“
   und die Pfadleiste gehen hoch. Am Handy (≤ 700 px) werden aus Tabellenzeilen
   Listenzeilen: Datum/Größe stehen dann unter dem Namen, nichts scrollt seitlich. */
.dateiliste { display: block; min-width: 0; }
/* „Ordner anlegen“ und „Hochladen“ gehören zur geöffneten Ebene — deshalb im Kopf
   der Liste (neben „Nur Team“ o. ä.), nicht oben rechts auf der Seite, wo man sie
   übersieht (Wunsch 18.10.). Am Handy eine eigene Zeile, Knöpfe teilen sie sich. */
.ebenen-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 700px) {
  :is(.karte__kopf, .abschnitt, .werkzeuge):has(> .ebenen-aktionen) { flex-wrap: wrap; }
  .ebenen-aktionen { flex: 1 1 100%; margin-left: 0; }
  .ebenen-aktionen .knopf { flex: 1 1 0; justify-content: center; }
}
.dateiliste__pfad { margin: 0 0 8px; }
.dateiliste__pfad ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; }
.dateiliste__pfad li { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.dateiliste__trenner { color: var(--leise); padding: 0 2px; }
.dateiliste__krume {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%;
  padding: 6px 10px; border: 0; border-radius: var(--r-s); background: none;
  font: 600 14px/1.2 var(--sans); color: var(--marke-dunkel); cursor: pointer; text-align: left;
  overflow-wrap: anywhere;
}
.dateiliste__krume svg { width: 16px; height: 16px; flex: none; }
button.dateiliste__krume:hover { background: var(--marke-hell); }
.dateiliste__krume[aria-current] { color: var(--tinte); cursor: default; }
.dateiliste__krume.ist-ziel { background: var(--marke-hell); box-shadow: inset 0 0 0 2px var(--marke); }

.dateiliste__rahmen { position: relative; min-width: 0; border-radius: inherit; }
.dateiliste__tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.dateiliste__tabelle th {
  text-align: left; font: 600 12.5px/1.2 var(--sans); letter-spacing: .02em; color: var(--leise);
  padding: 10px 14px; border-bottom: 1px solid var(--linie); white-space: nowrap; background: none;
}
.dateiliste__tabelle td { padding: 8px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.dateiliste__tabelle tbody tr:last-child td { border-bottom: 0; }
.dateiliste__name { width: 100%; min-width: 0; }
.dateiliste__rechts { text-align: right; }
.dateiliste__leise { color: var(--leise); white-space: nowrap; font-size: 13.5px; }
.dateiliste__groesse { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dateiliste__tabelle th.dateiliste__groesse, .dateiliste__tabelle th.dateiliste__rechts { text-align: right; }
.dateiliste__aktionen { text-align: right; white-space: nowrap; }
.dateiliste__wahl { width: 44px; padding-right: 0 !important; }
.dateiliste__opt { white-space: nowrap; }

.dateiliste__zeile { transition: background var(--t-kurz); }
.dateiliste__zeile.ist-oeffnbar, .dateiliste__zeile.ist-hoch { cursor: pointer; }
.dateiliste__zeile:hover { background: var(--flaeche-2); }
.dateiliste__zeile:focus-visible { outline: 3px solid var(--marke); outline-offset: -3px; }
.dateiliste__zeile.ist-gewaehlt { background: var(--marke-hell); }
.dateiliste__zeile.ist-ziel { background: var(--marke-hell); box-shadow: inset 4px 0 0 var(--marke); }
.dateiliste__zeile.ist-gezogen { opacity: .5; }
.dateiliste__zeile.ist-markiert { background: var(--gelb-hell); box-shadow: inset 4px 0 0 var(--gelb); }
.dateiliste__zeile[draggable="true"] { -webkit-user-drag: element; }

.dateiliste__namezelle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dateiliste__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dateiliste__titel {
  font-weight: 650; color: var(--tinte); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dateiliste__zeile.ist-datei .dateiliste__titel { font-weight: 600; }
.dateiliste__zeile.ist-hoch .dateiliste__titel { color: var(--marke-dunkel); }
.dateiliste__zeile.ist-oeffnbar:hover .dateiliste__titel { text-decoration: underline; text-underline-offset: 3px; }
.dateiliste__unter { font-size: 13px; color: var(--leise); overflow-wrap: anywhere; }
.dateiliste__unter:empty, .dateiliste__handy { display: none; }
.dateiliste__zusatz + .dateiliste__zusatz::before { content: " · "; }
.dateiliste__plaketten { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; vertical-align: middle; }
.dateiliste__zusatz + .dateiliste__plaketten { margin-left: 8px; }
.dateiliste__knoepfe { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; }
.dateiliste__knoepfe .symbolknopf { width: 38px; height: 38px; }
.dateiliste__knoepfe .symbolknopf[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.dateiliste__nur-klein { display: none !important; }

.dateiliste__ordnersymbol {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--b-dokumente) 15%, var(--flaeche)); color: var(--b-dokumente);
}
.dateiliste__ordnersymbol svg { width: 21px; height: 21px; }
.dateiliste__ordnersymbol--hoch { background: var(--flaeche-3); color: var(--marke-dunkel); }

/* Dateisymbol: farbiges Kürzel, darüber (wenn vorhanden) das Vorschaubild */
.dateisymbol {
  --d: var(--leise);
  position: relative; overflow: hidden; flex: none;
  width: 40px; height: 48px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--d) 14%, var(--flaeche)); color: var(--d);
  border: 1px solid color-mix(in srgb, var(--d) 22%, transparent);
  font: 800 10px/1 var(--sans); letter-spacing: .02em;
}
.dateisymbol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--flaeche); }
.dateisymbol--pdf { --d: var(--rot-text); }
.dateisymbol--text { --d: var(--blau-text); }
.dateisymbol--tabelle { --d: var(--gruen-text); }
.dateisymbol--folie { --d: var(--gelb-text); }
.dateisymbol--bild { --d: var(--lila-text); }

.dateiliste__leer > td { padding: 0 !important; }
.dateiliste__leer .skelett--zeile:last-child { border-bottom: 0; }
.dateiliste__status { margin: 8px 2px 0; font-size: 13px; color: var(--leise); }
.dateiliste__status:empty { display: none; }
/* In einer Karte: Pfad und Zähler bekommen den Innenabstand der Karte */
.karte > .dateiliste > .dateiliste__pfad { padding: 10px 12px 0; margin: 0; }
.karte > .dateiliste > .dateiliste__status { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--linie); }

/* Dateien vom Rechner über die Liste ziehen */
.dateiliste__drueber { display: none; }
.dateiliste__rahmen.ist-drueber { outline: 3px dashed var(--marke); outline-offset: -3px; }
.dateiliste__rahmen.ist-drueber .dateiliste__drueber {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px);
  padding: 10px 16px; border-radius: 999px; background: var(--marke-tief); color: #fff;
  font: 650 14px/1.3 var(--sans); box-shadow: var(--schatten-3);
}
.dateiliste__drueber svg { width: 20px; height: 20px; flex: none; }

/* Ein Menü für alle Zeilen (hängt am <body> bzw. im offenen <dialog>) */
.dateiliste__menue { position: fixed; z-index: 70; }
.dateiliste__menue[hidden] { display: none; }
.dateiliste__menue button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dateiliste__menue button[aria-disabled="true"]:hover { background: none; }
.dateiliste__menuehinweis { margin: 6px 4px 2px; padding: 8px 10px; border-radius: 8px; background: var(--flaeche-3); color: var(--leise); font-size: 12.5px; line-height: 1.4; max-width: 300px; }

@media (max-width: 700px) {
  .dateiliste__tabelle thead { display: none; }
  .dateiliste__tabelle, .dateiliste__tabelle tbody { display: block; }
  .dateiliste__tabelle tr.dateiliste__zeile { display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 12px; border-bottom: 1px solid var(--linie); }
  .dateiliste__tabelle tbody tr.dateiliste__zeile:last-child { border-bottom: 0; }
  .dateiliste__tabelle tr.dateiliste__zeile > td { display: block; padding: 0; border: 0; }
  .dateiliste__tabelle tr.dateiliste__zeile > td.dateiliste__opt, .dateiliste__tabelle tr.dateiliste__zeile > td.dateiliste__groesse { display: none; }
  .dateiliste__tabelle tr.dateiliste__zeile > td.dateiliste__name, .dateiliste__tabelle tr.ist-hoch > td { flex: 1 1 auto; min-width: 0; }
  .dateiliste__tabelle tr.dateiliste__leer, .dateiliste__tabelle tr.dateiliste__leer > td { display: block; }
  .dateiliste__tabelle tr.dateiliste__zeile > td.dateiliste__wahl { flex: 0 0 34px; width: 34px; padding: 0 !important; }
  .dateiliste__namezelle { gap: 10px; }
  .dateiliste__text { flex-basis: 0; }
  .dateiliste__titel { -webkit-line-clamp: 3; }
  .dateiliste__unter:empty { display: none; }
  .dateiliste__unter { display: block; }
  .dateiliste__handy { display: inline; }
  .dateiliste__handy + .dateiliste__zusatz::before { content: " · "; }
  .dateiliste__handy + .dateiliste__plaketten { margin-left: 8px; }
  .dateiliste__nur-gross { display: none !important; }
  .dateiliste__nur-klein { display: inline-grid !important; }
  .dateiliste__knoepfe .symbolknopf { width: 42px; height: 42px; }
  .dateisymbol { width: 36px; height: 44px; }
  .dateiliste__ordnersymbol { width: 36px; height: 36px; }
  .dateiliste__drueber { display: none !important; }
}