/* FEROX HQ – Grundgestaltung. Layout: dunkle Seitenleiste links, Inhalt rechts; mobil Schublade + Leiste unten. */
:root {
  --bg: #f4f5f7;
  --flaeche: #ffffff;
  --flaeche-2: #f8f9fb;
  --text: #171b22;
  --leise: #5d6676;
  --linie: #e1e4ea;
  --linie-stark: #cdd2db;
  --akzent: var(--dep, #e5541f);
  --akzent-text: #ffffff;
  --akzent-weich: color-mix(in srgb, var(--akzent) 12%, transparent);
  --ok: #1f7a4a; --ok-weich: #e2f3e9;
  --warn: #9a6100; --warn-weich: #fbf0d8;
  --krit: #b4261e; --krit-weich: #fbe5e3;
  --side-bg: #12161d; --side-text: #c9ced8; --side-leise: #7d8696; --side-hover: #1d232d; --side-aktiv: #262e3a;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(16, 20, 28, .06), 0 2px 8px rgba(16, 20, 28, .04);
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --side-breite: 252px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116; --flaeche: #161b23; --flaeche-2: #1b212b; --text: #e7eaf0; --leise: #98a1b2;
    --linie: #262d38; --linie-stark: #343d4b;
    --ok: #5fcb8e; --ok-weich: #143021; --warn: #e7b553; --warn-weich: #33280f; --krit: #ff8b80; --krit-weich: #3a1916;
    --side-bg: #0a0d12; --side-hover: #151a22; --side-aktiv: #1f2630;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1116; --flaeche: #161b23; --flaeche-2: #1b212b; --text: #e7eaf0; --leise: #98a1b2;
  --linie: #262d38; --linie-stark: #343d4b;
  --ok: #5fcb8e; --ok-weich: #143021; --warn: #e7b553; --warn-weich: #33280f; --krit: #ff8b80; --krit-weich: #3a1916;
  --side-bg: #0a0d12; --side-hover: #151a22; --side-aktiv: #1f2630;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--schrift); }
a { color: inherit; text-decoration-color: var(--linie-stark); text-underline-offset: 2px; }
a:hover { color: var(--akzent); }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h2 { font-size: 1.35rem; } h3 { font-size: 1rem; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 6px 0; }
.ic { width: 18px; height: 18px; flex: none; }
.leise { color: var(--leise); } .klein { font-size: .84rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.zahlen, .zahl { font-variant-numeric: tabular-nums; }

/* ---------- Rahmen ---------- */
.app { display: grid; grid-template-columns: var(--side-breite) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side-bg); color: var(--side-text);
  display: flex; flex-direction: column; padding: 14px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: thin; scrollbar-color: var(--side-aktiv) transparent;
}
.side-kopf { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 12px; }
.marke { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 750; letter-spacing: .02em; }
.marke:hover { color: #fff; }
.marke-zeichen { width: 30px; height: 30px; border-radius: 8px; background: var(--akzent); color: #fff; display: grid; place-items: center; font-weight: 800; }

.dep-wahl-alt { position: relative; margin: 0 4px 12px; display: flex; align-items: center; }
.dep-wahl select {
  width: 100%; appearance: none; background: var(--side-hover); color: #fff; border: 1px solid var(--side-aktiv);
  border-radius: 8px; padding: 8px 30px 8px 28px; font: inherit; font-size: .88rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8696' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}
.dep-wahl option { color: #111; }
.dep-punkt { position: absolute; left: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); pointer-events: none; }
.dep-fest { padding: 8px 10px 8px 28px; background: var(--side-hover); border-radius: 8px; font-size: .88rem; color: #fff; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-zeile { display: flex; align-items: center; border-radius: 8px; }
.nav-zeile:hover { background: var(--side-hover); }
.nav-bereich { flex: 1; display: flex; align-items: center; gap: 11px; padding: 8px 8px 8px 10px; color: var(--side-text); text-decoration: none; font-weight: 550; font-size: .93rem; border-radius: 8px; }
.nav-bereich:hover { color: #fff; }
.nav-bereich.aktiv { color: #fff; }
.nav-gruppe.offen > .nav-zeile { background: var(--side-aktiv); }
.nav-bereich.aktiv .ic { color: var(--akzent); }
.nav-auf { background: none; border: 0; color: var(--side-leise); padding: 6px 8px; cursor: pointer; border-radius: 6px; display: grid; }
.nav-auf .ic { width: 15px; height: 15px; transition: transform .15s; }
.nav-gruppe.offen .nav-auf .ic { transform: rotate(90deg); }
.nav-kinder { list-style: none; margin: 2px 0 6px; padding: 0 0 0 30px; display: none; }
.nav-gruppe.offen .nav-kinder { display: block; }
.nav-kinder a { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 10px; color: var(--side-leise); text-decoration: none; font-size: .87rem; border-radius: 6px; border-left: 1px solid var(--side-aktiv); border-radius: 0 6px 6px 0; }
.nav-kinder a:hover { color: #fff; background: var(--side-hover); }
.nav-kinder a.aktiv { color: #fff; border-left-color: var(--akzent); background: var(--side-hover); }
.alt-mark { font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--side-leise); border: 1px solid var(--side-aktiv); border-radius: 4px; padding: 0 4px; }

.side-fuss { border-top: 1px solid var(--side-aktiv); padding-top: 10px; margin-top: 10px; }
.benutzer summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: #fff; font-size: .9rem; }
.benutzer summary::-webkit-details-marker { display: none; }
.benutzer summary:hover { background: var(--side-hover); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--side-aktiv); display: grid; place-items: center; font-weight: 700; flex: none; }
.benutzer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benutzer-menue { display: flex; flex-direction: column; padding: 6px 0 2px; }
.benutzer-menue a, .benutzer-menue button { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--side-text); font: inherit; font-size: .88rem; padding: 7px 10px; text-align: left; text-decoration: none; border-radius: 6px; cursor: pointer; width: 100%; }
.benutzer-menue a:hover, .benutzer-menue button:hover { background: var(--side-hover); color: #fff; }
.benutzer-menue form { margin: 0; }
.benutzer-menue hr { border-color: var(--side-aktiv); }
.menue-titel { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--side-leise); padding: 4px 10px; }
.theme-sonne { display: none; }
:root[data-theme="dark"] .theme-sonne { display: block; } :root[data-theme="dark"] .theme-mond { display: none; }

.haupt { min-width: 0; display: flex; flex-direction: column; }
.kopf {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 28px 12px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie);
}
.kopf-titel { font-size: 1.12rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suche-knopf { display: flex; align-items: center; gap: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; color: var(--leise); font: inherit; font-size: .88rem; cursor: pointer; min-width: 220px; }
.suche-knopf:hover { border-color: var(--linie-stark); }
.suche-text { flex: 1; text-align: left; }
kbd { font-family: var(--mono); font-size: .72rem; border: 1px solid var(--linie); border-radius: 4px; padding: 1px 5px; background: var(--flaeche-2); }
.inhalt { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 18px; max-width: 1400px; width: 100%; }

.nur-mobil { display: none !important; }
.knopf-icon { background: none; border: 0; color: inherit; padding: 6px; border-radius: 8px; cursor: pointer; display: grid; }
.knopf-icon:hover { background: var(--linie); }
.side .knopf-icon:hover { background: var(--side-hover); }

/* ---------- Bausteine ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.spalten { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.spalten-schmal { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); }
.stapel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.seiten-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.seiten-kopf p { max-width: 70ch; }
.zurueck { font-size: .88rem; }
.zurueck a { color: var(--leise); text-decoration: none; }

.knopf { display: inline-flex; align-items: center; gap: 7px; background: var(--akzent); color: var(--akzent-text); border: 1px solid var(--akzent); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.knopf:hover { color: var(--akzent-text); filter: brightness(1.06); }
.knopf .ic { width: 16px; height: 16px; }
.knopf-klein { padding: 5px 10px; font-size: .82rem; background: transparent; color: var(--akzent); }
.knopf-klein:hover { background: var(--akzent); color: var(--akzent-text); }
.knopf-zweit { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf-zweit:hover { color: var(--text); background: var(--flaeche-2); }
.knopf-gefahr { background: transparent; color: var(--krit); border-color: var(--krit); }
.knopf-gefahr:hover { background: var(--krit); color: #fff; }
.knopf-voll { width: 100%; justify-content: center; padding: 10px 14px; }
.link-knopf { background: none; border: 0; color: var(--akzent); padding: 0; font: inherit; cursor: pointer; }

.pill { display: inline-block; font-size: .74rem; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--linie); white-space: nowrap; }
.pill-akzent { background: var(--akzent-weich); color: var(--akzent); border-color: transparent; }
.pill-ok { background: var(--ok-weich); color: var(--ok); border-color: transparent; }
.pill-status { color: var(--leise); }

.flash { padding: 10px 14px; border-radius: 8px; font-size: .9rem; border: 1px solid transparent; }
.flash-ok { background: var(--ok-weich); color: var(--ok); }
.flash-fehler { background: var(--krit-weich); color: var(--krit); }

/* Heute */
.heute-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gruss { font-size: 1.6rem; letter-spacing: -.01em; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; text-decoration: none; box-shadow: var(--schatten); min-width: 0; }
.kachel:hover { border-color: var(--linie-stark); color: inherit; }
.kachel strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.kachel .leise { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--leise); font-weight: 650; }
.kachel-warn { border-left: 3px solid var(--warn); }

.aufgaben { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aufgabe { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linie); }
.aufgabe:first-child { border-top: 0; }
.aufgabe-streifen { align-self: stretch; border-radius: 4px; background: var(--linie-stark); }
.stufe-kritisch .aufgabe-streifen { background: var(--krit); }
.stufe-warnung .aufgabe-streifen { background: var(--warn); }
.stufe-info .aufgabe-streifen { background: var(--akzent); opacity: .55; }
.aufgabe-text { display: flex; flex-direction: column; min-width: 0; }
.aufgabe-text > span:first-child { overflow-wrap: anywhere; }
.leer-hinweis { color: var(--leise); display: flex; gap: 8px; align-items: center; }

.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.liste li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linie); }
.liste li:first-child { border-top: 0; }
.liste li > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.liste.kompakt li { padding: 7px 0; }
.datum-chip { flex: none; min-width: 58px; text-align: center; font-size: .78rem; font-weight: 650; background: var(--akzent-weich); color: var(--akzent); border-radius: 6px; padding: 3px 6px; }
.zahl { font-weight: 700; }

/* Tabellen & Formulare */
.tabelle-rahmen { overflow-x: auto; margin: 0 -2px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th, .tabelle td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); font-weight: 650; }
.tabelle tr.gruppe th { background: var(--flaeche-2); font-size: .8rem; color: var(--text); padding-top: 12px; }
.rechte-tabelle td:nth-child(n+2) { white-space: nowrap; }
.ic-ok { color: var(--ok); }

.formular { display: flex; flex-direction: column; gap: 6px; }
.formular label:not(.haken) { font-size: .84rem; font-weight: 600; margin-top: 6px; }
input[type="text"], input[type="password"], input[type="search"], input:not([type]), select, textarea {
  font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 8px; padding: 8px 10px; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent-weich); border-color: var(--akzent); }
.haken { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.haken input { margin-top: 3px; accent-color: var(--akzent); }
.haken-block { padding: 8px 0; border-top: 1px solid var(--linie); }
.haken-block:first-of-type { border-top: 0; }
.haken-block span { display: flex; flex-direction: column; }
.klein-select { padding: 4px 8px; font-size: .84rem; }
.klein-select.gesetzt { border-color: var(--akzent); color: var(--akzent); }
.zeile-formular { display: flex; gap: 10px; flex-wrap: wrap; }
.zeile-formular select { flex: 1 1 220px; }
.daten { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .9rem; }
.daten dt { color: var(--leise); } .daten dd { margin: 0; overflow-wrap: anywhere; }
.aktionen-leiste { position: sticky; bottom: 0; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--linie); display: flex; justify-content: flex-end; margin-top: 4px; }
.formular-breit { display: flex; flex-direction: column; gap: 18px; }
.rechte-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rechte-raster fieldset { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rechte-raster legend { font-weight: 700; font-size: .85rem; padding: 0 4px; }
.rollen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rolle-karte { text-decoration: none; }
.rolle-karte:hover { border-color: var(--akzent); color: inherit; }
.rolle-zahlen { display: flex; gap: 14px; font-size: .84rem; color: var(--leise); margin-top: auto; }
.loeschen-form { display: flex; justify-content: flex-end; }
.umzug { max-width: 640px; }
.umzug p { max-width: 62ch; }
.umzug .knopf { align-self: flex-start; }

/* Suche */
.suche { border: 0; padding: 0; border-radius: 14px; width: min(640px, calc(100vw - 32px)); background: var(--flaeche); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); margin-top: 10vh; }
.suche::backdrop { background: rgba(10, 13, 18, .45); }
.suche-feld { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--linie); margin: 0; }
.suche-feld input { flex: 1; border: 0; font-size: 1.05rem; padding: 6px 2px; background: transparent; }
.suche-feld input:focus { outline: 0; }
.suche-treffer { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.suche-treffer a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; text-decoration: none; }
.suche-treffer a:hover, .suche-treffer a.gewaehlt { background: var(--akzent-weich); color: inherit; }
.suche-treffer .art { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }
.suche-treffer .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suche-treffer .leer { padding: 14px 10px; color: var(--leise); font-size: .9rem; }

/* Login */
body.leer { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--side-bg); }
.login { width: 100%; display: grid; place-items: center; }
.login-karte { width: min(400px, 100%); background: var(--flaeche); border-radius: 14px; padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.login-marke { display: flex; align-items: center; gap: 10px; font-weight: 750; margin-bottom: 8px; }
.login-karte h1 { font-size: 1.4rem; }
.login-karte .haken { margin: 8px 0 6px; }

/* Mobil */
.schleier { display: none; }
@media (max-width: 960px) {
  .spalten, .spalten-schmal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nur-mobil { display: grid !important; }
  .side { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-102%); transition: transform .2s ease; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  body.side-offen .side { transform: none; }
  body.side-offen .schleier { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(8, 10, 14, .5); }
  .kopf { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
  .suche-knopf { min-width: 0; }
  .suche-text, .suche-knopf kbd { display: none; }
  .inhalt { padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .unten {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--flaeche); border-top: 1px solid var(--linie); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .unten a, .unten button { display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: .7rem; color: var(--leise); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
  .unten .ic { width: 22px; height: 22px; }
  .unten a.aktiv { color: var(--akzent); }
  .gruss { font-size: 1.35rem; }
  .aufgabe { grid-template-columns: 4px minmax(0, 1fr); }
  .aufgabe .knopf { grid-column: 2; justify-self: start; }
  .suche-treffer a { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Logos ---------- */
.marke { min-height: 34px; }
.marke-logo { height: 30px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.marke-hq { font-size: .78rem; font-weight: 750; letter-spacing: .14em; color: var(--side-leise); border-left: 1px solid var(--side-aktiv); padding-left: 10px; }
.weiss { filter: brightness(0) invert(1); }
.dep-menue { margin: 0 4px 12px; position: relative; }
.dep-menue summary, .dep-fest { list-style: none; display: flex; align-items: center; gap: 10px; background: var(--side-hover); border: 1px solid var(--side-aktiv); border-radius: 8px; padding: 7px 10px; color: #fff; font-size: .88rem; cursor: pointer; }
.dep-fest { cursor: default; }
.dep-menue summary::-webkit-details-marker { display: none; }
.dep-menue summary > span:not(.dep-icon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-pfeil { width: 14px; height: 14px; color: var(--side-leise); transform: rotate(90deg); transition: transform .15s; }
.dep-menue[open] .dep-pfeil { transform: rotate(-90deg); }
.dep-icon { width: 22px; height: 22px; object-fit: contain; flex: none; border-radius: 5px; }
.dep-alle { background: conic-gradient(from 45deg, #e5541f, #294a58, #000033, #8f8f8f, #e5541f); border-radius: 50%; width: 16px; height: 16px; margin: 0 3px; }
.dep-liste { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; background: var(--side-hover); border: 1px solid var(--side-aktiv); border-radius: 8px; padding: 4px; }
.dep-liste button { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--side-text); font: inherit; font-size: .88rem; padding: 7px 8px; border-radius: 6px; cursor: pointer; text-align: left; }
.dep-liste button:hover { background: var(--side-aktiv); color: #fff; }
.dep-liste button.aktiv { color: #fff; box-shadow: inset 2px 0 0 var(--akzent); }
.dep-icon-klein { width: 20px; height: 20px; object-fit: contain; flex: none; margin-top: 1px; }
.haken-block:has(.dep-icon-klein) { align-items: center; }
.login-logos { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 22px; }
.login-hq { height: 52px; width: auto; }
.login-marken { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 26px; opacity: .55; }
.login-marken img { height: 20px; width: auto; max-width: 130px; object-fit: contain; }
.login { display: flex; flex-direction: column; align-items: center; }

/* Akzent auf dunkler Seitenleiste aufhellen (z. B. Harbor-Club-Blau) */
.side { --akzent-side: color-mix(in srgb, var(--akzent) 55%, #ffffff); }
.nav-bereich.aktiv .ic { color: var(--akzent-side); }
.nav-kinder a.aktiv { border-left-color: var(--akzent-side); }
.dep-liste button.aktiv { box-shadow: inset 2px 0 0 var(--akzent-side); }
.side .marke-zeichen { background: var(--akzent-side); }

/* ---------- Kalender ---------- */
:root {
  --eb-events: #1f7a4a; --eb-anfragen: #b7791f; --eb-intern: #6b7280; --eb-termine: #2f5fa7;
  --eb-schichten: #c2410c; --eb-dienstleister: #7c4dbd; --eb-fristen: #b4261e;
}
:root[data-theme="dark"] { --eb-events: #5fcb8e; --eb-anfragen: #e7b553; --eb-intern: #9aa3b2; --eb-termine: #7fa8ea; --eb-schichten: #fb8c5a; --eb-dienstleister: #b794f4; --eb-fristen: #ff8b80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --eb-events: #5fcb8e; --eb-anfragen: #e7b553; --eb-intern: #9aa3b2; --eb-termine: #7fa8ea; --eb-schichten: #fb8c5a; --eb-dienstleister: #b794f4; --eb-fristen: #ff8b80; } }
.eb-events { --eb: var(--eb-events); } .eb-anfragen { --eb: var(--eb-anfragen); } .eb-intern { --eb: var(--eb-intern); }
.eb-termine { --eb: var(--eb-termine); } .eb-schichten { --eb: var(--eb-schichten); } .eb-dienstleister { --eb: var(--eb-dienstleister); } .eb-fristen { --eb: var(--eb-fristen); }

.kal-kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.kal-nav { display: flex; align-items: center; gap: 8px; }
.kal-nav h2 { min-width: 9.5em; text-align: center; font-size: 1.2rem; }
.knopf-quadrat { width: 36px; justify-content: center; padding: 6px 0; font-size: 1.1rem; }
.ebenen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ebene { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; padding: 4px 10px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); cursor: pointer; user-select: none; }
.ebene input { position: absolute; opacity: 0; pointer-events: none; }
.ebene-punkt { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--eb); }
.ebene:has(input:checked) .ebene-punkt { background: var(--eb); }
.ebene:has(input:not(:checked)) { color: var(--leise); }
.ebene:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }

.kal-monat { padding: 0; overflow: hidden; gap: 0; }
.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-wochentage div { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); padding: 8px 10px; border-bottom: 1px solid var(--linie); font-weight: 650; }
.kal-tag { min-height: 118px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kal-tag:nth-child(7n) { border-right: 0; }
.kal-tag.we { background: var(--flaeche-2); }
.kal-tag.fremd .kal-datum { color: var(--linie-stark); }
.kal-datum { font-size: .8rem; font-weight: 650; color: var(--leise); padding: 0 4px; align-self: flex-start; border-radius: 999px; }
.kal-tag.heute .kal-datum { background: var(--akzent); color: var(--akzent-text); padding: 0 7px; }
.kal-eintrag { display: block; font-size: .76rem; line-height: 1.3; padding: 2px 6px; border-radius: 4px; text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--eb) 13%, transparent); border-left: 3px solid var(--eb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-eintrag:hover { background: color-mix(in srgb, var(--eb) 24%, transparent); color: var(--text); }
.kal-eintrag.offen { border-left-style: dashed; background: transparent; outline: 1px dashed color-mix(in srgb, var(--eb) 60%, transparent); outline-offset: -1px; }
.kal-uhr { font-variant-numeric: tabular-nums; color: var(--leise); margin-right: 4px; }
.kal-mehr { font-size: .74rem; color: var(--leise); padding: 0 6px; }

.kal-liste { display: none; gap: 0; }
.kal-liste-tag { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); padding: 14px 0 6px; }
.kal-liste-tag:first-child { padding-top: 0; }
.kal-liste-tag.heute { color: var(--akzent); }
.kal-zeile { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 9px 0 9px 12px; border-left: 3px solid var(--eb); margin: 2px 0; text-decoration: none; border-radius: 0 6px 6px 0; }
.kal-zeile:hover { background: color-mix(in srgb, var(--eb) 9%, transparent); color: inherit; }
.kal-zeile.offen { border-left-style: dashed; }
.kal-zeit { font-size: .82rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.kal-zeile-text { display: flex; flex-direction: column; min-width: 0; }
.kal-zeile-text strong { font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .kal-monat { display: none; }
  .kal-liste { display: flex; }
  .kal-nav h2 { min-width: 0; flex: 1; }
  .kal-kopf { flex-direction: column; align-items: stretch; }
}

/* ---------- Kontakte & Formulare ---------- */
.such-form { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; max-width: 720px; }
.such-form input[type="search"] { flex: 1 1 260px; }
.profil-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.profil-kopf h2 { font-size: 1.5rem; }
.knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kacheln-klein .kachel strong { font-size: 1.05rem; }
.formular-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; }
.feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feld label { font-size: .8rem; font-weight: 600; color: var(--leise); }
.feld-breit { grid-column: 1 / -1; }
textarea { font: inherit; resize: vertical; }
input[type="email"], input[type="tel"], input[type="number"], input[type="url"] { font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.mini-menue > summary { list-style: none; cursor: pointer; }
.mini-menue > summary::-webkit-details-marker { display: none; }
.mini-menue[open] > summary { margin-bottom: 10px; }
.mini-form { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 8px; padding: 12px; }
.liste li.inaktiv { opacity: .55; }
.liste li:has(> details[open]) { flex-wrap: wrap; }
.liste li > details[open] { flex-basis: 100%; }
.rechts { text-align: right !important; }
.seiten-nav { display: flex; gap: 12px; align-items: center; justify-content: center; padding-top: 6px; }
.hinweis-karte { border-color: var(--warn); background: var(--warn-weich); }
.hinweis-karte h3 { display: flex; gap: 8px; align-items: center; color: var(--warn); }
.zeitleiste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zeitleiste li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 8px 0; position: relative; }
.zeitleiste li::before { content: ""; position: absolute; left: 14px; top: 34px; bottom: -8px; width: 1px; background: var(--linie); }
.zeitleiste li:last-child::before { display: none; }
.zl-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--flaeche-2); border: 1px solid var(--linie); display: grid; place-items: center; color: var(--leise); }
.zl-icon .ic { width: 15px; height: 15px; }
.zl-mail_in .zl-icon { color: var(--eb-termine); }
.zl-mail_out .zl-icon { color: var(--ok); }
.zl-termin .zl-icon { color: var(--akzent); }
.zeitleiste li > div { display: flex; flex-direction: column; min-width: 0; }
.zl-text { overflow-wrap: anywhere; font-size: .9rem; }

/* ---------- Kacheln (globaler Baustein fuer Uebersichten) ---------- */
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.kachel-raster.eng { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.k-karte {
  position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--schatten);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.k-karte:hover { border-color: var(--linie-stark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 20, 28, .08); }
.k-karte.inaktiv { opacity: .6; }
.k-kopf { display: flex; gap: 12px; align-items: center; min-width: 0; }
.k-kopf > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.k-avatar {
  --h: 20; width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  font-weight: 750; font-size: .95rem; letter-spacing: .02em;
  background: hsl(var(--h) 70% 93%); color: hsl(var(--h) 45% 30%);
}
:root[data-theme="dark"] .k-avatar { background: hsl(var(--h) 30% 22%); color: hsl(var(--h) 70% 82%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-avatar { background: hsl(var(--h) 30% 22%); color: hsl(var(--h) 70% 82%); } }
.k-avatar.rund { border-radius: 50%; }
.k-avatar-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: var(--flaeche-2); border: 1px solid var(--linie); padding: 6px; flex: none; }
.k-titel { font-weight: 650; font-size: 1rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.k-titel::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.k-titel:hover { color: var(--text); }
.k-unter { color: var(--leise); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.k-dep { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; }
.k-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: var(--flaeche-2); border-radius: 10px; padding: 10px 12px; }
.k-zahlen div { display: flex; flex-direction: column; min-width: 0; }
.k-zahlen strong { font-size: .98rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-zahlen span { font-size: .72rem; color: var(--leise); text-transform: uppercase; letter-spacing: .05em; }
.k-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.k-aktionen { display: flex; gap: 6px; position: relative; z-index: 1; }
.k-aktion { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linie); background: var(--flaeche); color: var(--leise); text-decoration: none; }
.k-aktion:hover { color: var(--akzent); border-color: var(--akzent); }
.k-aktion .ic { width: 16px; height: 16px; }
.k-meta { font-size: .8rem; color: var(--leise); }
.k-karte .pill { position: relative; z-index: 1; }
.k-neu { border-style: dashed; box-shadow: none; align-items: center; justify-content: center; text-align: center; color: var(--leise); text-decoration: none; min-height: 150px; }
.k-neu:hover { color: var(--akzent); border-color: var(--akzent); }
.k-neu .ic { width: 26px; height: 26px; }
.k-streifen { position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--linie-stark); }
.k-karte.stufe-kritisch .k-streifen { background: var(--krit); }
.k-karte.stufe-warnung .k-streifen { background: var(--warn); }
.k-karte.stufe-info .k-streifen { background: var(--akzent); opacity: .6; }
.k-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--leise); }
.stufe-kritisch .k-label { color: var(--krit); } .stufe-warnung .k-label { color: var(--warn); }
.ansicht-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Chips, Aufgaben-Kacheln, Tageskacheln */
.filter-chips { gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .82rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); text-decoration: none; cursor: pointer; }
.chip span { color: var(--leise); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--linie-stark); color: var(--text); }
.chip.aktiv { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip.aktiv span { color: inherit; opacity: .7; }
.abschnitt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.abschnitt h3 { font-size: 1.05rem; }
.k-aufgabe { padding-left: 20px; gap: 8px; }
.k-aufgabe-kopf { display: flex; justify-content: space-between; gap: 8px; }
.k-titel-mehrzeilig { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; font-weight: 600; }
.k-aufgabe .knopf-klein { pointer-events: none; }
.k-aufgabe:hover .knopf-klein { background: var(--akzent); color: var(--akzent-text); }
.knopf-mitte { align-self: center; }
.k-todo { gap: 6px; }
.k-zahl-karte { text-decoration: none; gap: 2px; }
.k-zahl-karte strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.k-formular select { width: 100%; }
.tage-reihe { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.tag-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 130px; scroll-snap-align: start; }
.tag-kachel.leer { background: var(--flaeche-2); box-shadow: none; }
.tag-kachel.heute { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent) inset; }
.tag-kopf { display: flex; align-items: baseline; gap: 6px; color: var(--leise); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.tag-kopf strong { font-size: 1.25rem; color: var(--text); letter-spacing: 0; }
.tag-kachel.heute .tag-kopf strong { color: var(--akzent); }
.tag-eintrag { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; border-radius: 8px; text-decoration: none; background: color-mix(in srgb, var(--eb) 12%, transparent); border-left: 3px solid var(--eb); font-size: .82rem; }
.tag-eintrag:hover { background: color-mix(in srgb, var(--eb) 22%, transparent); color: inherit; }
.tag-eintrag strong { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .tage-reihe { grid-template-columns: repeat(7, 72%); } }
.kachel-raster.mini { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.k-mini { padding: 12px 14px; gap: 6px; border-radius: 12px; box-shadow: none; }
.k-mini .k-titel { font-size: .95rem; }
.k-mini .k-titel::after { border-radius: 12px; }
.k-avatar.klein { width: 36px; height: 36px; font-size: .82rem; }
.k-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-raster > .k-karte:has(details[open]) { grid-column: 1 / -1; transform: none; }
.k-karte details[open] { flex-basis: 100%; }
.k-fuss:has(details[open]) { flex-wrap: wrap; }

/* Tabs fuer umfangreiche Datensaetze (Kunde, Projekt …) */
.tabs-leiste { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; position: sticky; top: calc(57px + env(safe-area-inset-top, 0px)); z-index: 10; background: var(--bg); margin: 0 -2px; padding: 0 2px; }
.tabs-leiste::-webkit-scrollbar { display: none; }
.tabs-leiste a { white-space: nowrap; padding: 10px 14px; text-decoration: none; color: var(--leise); font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-leiste a:hover { color: var(--text); }
.tabs-leiste a.aktiv { color: var(--text); border-bottom-color: var(--akzent); }
.tabs-leiste a span { font-size: .75rem; color: var(--leise); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px; padding: 0 7px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.spalten-gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .spalten-gleich { grid-template-columns: minmax(0, 1fr); } }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 2px 0; }
.kennzahlen div { display: flex; align-items: baseline; gap: 6px; }
.kennzahlen strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.kennzahlen span { color: var(--leise); font-size: .85rem; }

/* ToDos & Pinnwand */
.k-formular { gap: 8px; }
.k-formular input, .k-formular textarea, .k-formular select { width: 100%; }
.zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.k-unter.mehrzeilig { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.k-erledigt:hover { color: var(--ok); border-color: var(--ok); }
.k-aktionen form { margin: 0; display: flex; gap: 6px; }
.k-aktionen details { position: static; }
.k-aktionen details[open] .mini-form { position: absolute; left: 12px; right: 12px; bottom: 56px; z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,.18); background: var(--flaeche); }
.k-aktionen summary.k-aktion { list-style: none; cursor: pointer; }
.k-aktionen summary.k-aktion::-webkit-details-marker { display: none; }
.kachel-raster > .k-karte:has(.k-aktionen details[open]) { grid-column: auto; z-index: 4; }
.notiz { background: color-mix(in srgb, #f6d860 16%, var(--flaeche)); border-color: color-mix(in srgb, #e0b93a 35%, var(--linie)); }
.notiz-system { background: var(--flaeche); }
.notiz-neu { background: var(--flaeche); }
.notiz-text { font-size: .9rem; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }

/* Departments */
.dep-karte { border-top: 4px solid var(--dep-farbe); }
.dep-logo-flaeche { height: 64px; display: grid; place-items: center; background: #fff; border-radius: 10px; border: 1px solid var(--linie); }
.dep-logo-flaeche img { max-height: 40px; max-width: 80%; object-fit: contain; }
.farb-punkt { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--linie-stark); display: inline-block; }
.logo-vorschau { display: grid; grid-template-columns: 1fr 1fr 70px; gap: 8px; }
.logo-vorschau div { height: 70px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--linie); padding: 8px; }
.logo-vorschau .hell { background: #fff; } .logo-vorschau .dunkel { background: #12161d; }
.logo-vorschau img { max-height: 46px; max-width: 100%; object-fit: contain; }
input[type="color"] { width: 100%; height: 40px; border: 1px solid var(--linie-stark); border-radius: 8px; padding: 2px; background: var(--flaeche); }
input[type="file"] { font-size: .85rem; max-width: 100%; }

/* Zugang (Nuki) */
.code-liste { display: flex; flex-direction: column; gap: 6px; }
.code-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 6px 6px 6px 10px; position: relative; z-index: 1; }
.code-zeile form { margin: 0; }
.code-zeile.fehler { border-color: var(--krit); background: var(--krit-weich); }
.code-zeile.alt { border-style: dashed; }
.code { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; font-size: 1rem; }
.code.gross { font-size: 1.6rem; color: var(--akzent); }
.pill-krit { background: var(--krit-weich); color: var(--krit); border-color: transparent; }
.k-avatar .ic { width: 20px; height: 20px; }
form[data-warten].laeuft button[type="submit"] { opacity: .6; pointer-events: none; }

/* Automatiken */
.takt-kopf { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.takt-kopf .k-kopf { flex: 1; min-width: 240px; }
.takt-kopf details[open] { flex-basis: 100%; }
.befehl { font-family: var(--mono); font-size: .8rem; background: var(--side-bg); color: #d6dbe4; padding: 10px 12px; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 6px 0; max-height: 360px; }
.mono { font-family: var(--mono); }
.inaktiv-weich { opacity: .72; }
.k-karte.gewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent) inset; }
.schalter-form { margin: 0; position: relative; z-index: 1; }
.schalter { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; font: inherit; font-size: .84rem; color: var(--leise); cursor: pointer; padding: 0; }
.schalter span { width: 38px; height: 22px; border-radius: 999px; background: var(--linie-stark); position: relative; transition: background .15s; }
.schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.schalter.an { color: var(--ok); font-weight: 650; }
.schalter.an span { background: var(--ok); }
.schalter.an span::after { transform: translateX(16px); }
.lauf-liste { display: flex; flex-direction: column; gap: 6px; }
.lauf summary { display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 6px 0; flex-wrap: wrap; }
.zeile-formular .feld { flex: 1 1 180px; }
.zeile-formular { align-items: flex-end; }
.k-zahlen.weit { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr); }
.k-zahlen.weit strong { white-space: normal; font-size: .9rem; line-height: 1.25; }

/* ---------- Anfragen ---------- */
.anfrage-summe { font-weight: 700; font-variant-numeric: tabular-nums; }
.hinweis { font-size: .74rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--flaeche-2); color: var(--leise); }
.hinweis-krit { background: var(--krit-weich); color: var(--krit); }
.hinweis-warn { background: var(--warn-weich); color: var(--warn); }
.hinweis-info { background: var(--akzent-weich); color: var(--akzent); }
.verschieben-menue { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 10px; right: 10px; bottom: 54px; z-index: 6; background: var(--flaeche); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.verschieben-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.verloren-form { display: flex; gap: 6px; margin: 0; }
.verloren-form select { flex: 1; min-width: 0; font-size: .82rem; padding: 4px 6px; }
.lead-text { -webkit-line-clamp: 4; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; scroll-snap-type: x proximity; }
.board-spalte { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; scroll-snap-align: start; transition: background .12s, border-color .12s; }
.board-spalte.spalte-verloren { background: transparent; border-style: dashed; }
.board-spalte.drueber { border-color: var(--akzent); background: var(--akzent-weich); }
.board-kopf { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.board-kopf h3 { font-size: .92rem; flex: 1; }
.board-karten { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.board .anfrage[draggable="true"] { cursor: grab; }
.board .anfrage.zieht { opacity: .4; }
.board-ablage { padding: 8px 4px; }
.grund-dialog { border: 0; border-radius: 14px; padding: 18px; width: min(460px, calc(100vw - 32px)); background: var(--flaeche); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.grund-dialog::backdrop { background: rgba(10,13,18,.45); }
.grund-dialog .chip.aktiv { background: var(--text); color: var(--bg); }
.balken-liste { display: flex; flex-direction: column; gap: 8px; }
.balken-zeile { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 32px; gap: 10px; align-items: center; font-size: .88rem; }
.balken { height: 10px; background: var(--flaeche-2); border-radius: 999px; overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.hinweis-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: .9rem; z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
@media (max-width: 900px) { .board { grid-auto-columns: 82%; } .hinweis-toast { bottom: 90px; } }

/* =====================================================================
   Farbwelt „gedeckt, modern“ (User-Vorgabe 2026-10-12): ruhige, satte Toene
   (Gruen, Blau, Rot, Ocker), KEINE Verlaeufe, KEINE Pastellflaechen –
   Akzente ueber Rahmen/Randstreifen und einfarbige Flaechen.
   ===================================================================== */
:root {
  --bg: #f4f5f7;
  --flaeche: #ffffff;
  --flaeche-2: #f0f1f4;
  --text: #15181e;
  --leise: #5b6372;
  --linie: #dfe2e8;
  --linie-stark: #c5cad3;
  --akzent: var(--dep, #d4471a);
  --gruen: #2e7d55; --gelb: #b7791f; --rot: #b8352f; --blau: #24527a; --lila: #5b4b8a; --tuerkis: #2a7f87; --schiefer: #4b5563;
  --ok: var(--gruen); --ok-weich: var(--flaeche); --warn: var(--gelb); --warn-weich: var(--flaeche); --krit: var(--rot); --krit-weich: var(--flaeche);
  --akzent-weich: var(--flaeche-2);
  --eb-events: var(--gruen); --eb-anfragen: var(--gelb); --eb-intern: var(--schiefer); --eb-termine: var(--blau);
  --eb-schichten: #a8552a; --eb-dienstleister: var(--lila); --eb-fristen: var(--rot);
  --schatten: 0 1px 2px rgba(21, 24, 30, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101317; --flaeche: #171b21; --flaeche-2: #1e232b; --text: #eceff3; --leise: #9aa2b1; --linie: #2a313b; --linie-stark: #3a4350;
    --gruen: #4f9d76; --gelb: #d29a3c; --rot: #d2554e; --blau: #4f86b8; --lila: #8a7bc0; --schiefer: #8792a3;
  }
}
:root[data-theme="dark"] {
  --bg: #101317; --flaeche: #171b21; --flaeche-2: #1e232b; --text: #eceff3; --leise: #9aa2b1; --linie: #2a313b; --linie-stark: #3a4350;
  --gruen: #4f9d76; --gelb: #d29a3c; --rot: #d2554e; --blau: #4f86b8; --lila: #8a7bc0; --schiefer: #8792a3;
}
body { background: var(--bg); }

/* Knoepfe: einfarbig, ohne Schatten */
.knopf { background: var(--akzent); border-color: var(--akzent); color: #fff; box-shadow: none; }
.knopf:hover { filter: brightness(.94); color: #fff; }
.knopf-klein { background: var(--flaeche); color: var(--akzent); border-color: var(--akzent); }
.knopf-klein:hover { background: var(--akzent); color: #fff; }
.knopf-zweit { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf-zweit:hover { color: var(--text); border-color: var(--text); background: var(--flaeche); }
.knopf-gefahr { background: var(--flaeche); color: var(--rot); border-color: var(--rot); }
.knopf-gefahr:hover { background: var(--rot); color: #fff; }

/* Seitenleiste: aktiver Bereich mit Randstreifen statt Flaeche */
.nav-gruppe.offen > .nav-zeile { background: var(--side-aktiv); box-shadow: inset 3px 0 0 var(--akzent-side); }
.nav-bereich.aktiv .ic { color: var(--akzent-side); }
.nav-kinder a.aktiv { color: #fff; background: var(--side-hover); border-left: 2px solid var(--akzent-side); }
.avatar { background: var(--side-aktiv); color: #fff; }

/* Pills und Hinweise: Rahmen oder einfarbig, nie pastell */
.pill { background: var(--flaeche); border: 1px solid var(--linie-stark); color: var(--text); }
.pill-akzent { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.pill-ok { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.pill-krit { background: var(--rot); border-color: var(--rot); color: #fff; }
.pill-status { background: var(--flaeche); border-color: var(--blau); color: var(--blau); }
.hinweis { background: var(--flaeche); border: 1px solid var(--linie-stark); color: var(--leise); }
.hinweis-krit { border-color: var(--rot); color: var(--rot); }
.hinweis-warn { border-color: var(--gelb); color: var(--gelb); }
.hinweis-info { border-color: var(--blau); color: var(--blau); }
.flash { background: var(--flaeche); border: 1px solid var(--linie-stark); border-left-width: 4px; }
.flash-ok { border-color: var(--gruen); color: var(--text); }
.flash-fehler { border-color: var(--rot); color: var(--rot); }
.chip { background: var(--flaeche); }
.chip.aktiv { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Avatare: einfarbig, gedeckt */
.k-avatar { background: hsl(var(--h) 32% 38%); color: #fff; text-shadow: none; }
:root[data-theme="dark"] .k-avatar { background: hsl(var(--h) 28% 42%); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-avatar { background: hsl(var(--h) 28% 42%); color: #fff; } }

/* Karten: weiss mit Rahmen */
.k-karte, .karte, .kachel { border: 1px solid var(--linie); box-shadow: var(--schatten); }
.k-karte:hover { border-color: var(--linie-stark); box-shadow: var(--schatten); transform: none; }
.k-zahlen { background: var(--flaeche-2); }
.tabs-leiste a.aktiv { color: var(--text); border-bottom: 3px solid var(--akzent); }
.tabs-leiste a span { background: var(--flaeche-2); color: var(--leise); border: 1px solid var(--linie); }
.tabs-leiste a.aktiv span { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Startseite: Kennzahlen weiss mit farbigem Randstreifen */
.kacheln .kachel { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-left: 5px solid var(--kf, var(--blau)); }
.kacheln .kachel .leise { color: var(--leise); }
.kacheln .kachel .kachel-label { color: var(--kf, var(--blau)); }
.kacheln .kachel:nth-child(1) { --kf: var(--blau); }
.kacheln .kachel:nth-child(2) { --kf: var(--gelb); }
.kacheln .kachel:nth-child(3) { --kf: var(--tuerkis); }
.kacheln .kachel:nth-child(4) { --kf: var(--gruen); }
.kacheln .kachel.kachel-warn { --kf: var(--rot); }
.kacheln .kachel:hover { border-color: var(--linie-stark); border-left-color: var(--kf); color: var(--text); }

/* Aufgaben, Tage, Kalender: einfarbige Eintraege */
.k-karte.stufe-kritisch .k-streifen { background: var(--rot); }
.k-karte.stufe-warnung .k-streifen { background: var(--gelb); }
.k-karte.stufe-info .k-streifen { background: var(--blau); opacity: 1; }
.tag-kachel.heute { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.tag-kachel.leer { background: var(--flaeche-2); }
.tag-eintrag, .kal-eintrag { background: var(--eb); color: #fff; border-left: 0; }
.tag-eintrag .leise, .tag-eintrag .kal-uhr, .kal-eintrag .kal-uhr { color: rgba(255,255,255,.8); }
.tag-eintrag:hover, .kal-eintrag:hover { background: var(--eb); color: #fff; filter: brightness(.92); }
.kal-eintrag.offen { background: var(--flaeche); color: var(--eb); outline: 1px dashed var(--eb); }
.kal-eintrag.offen .kal-uhr { color: var(--eb); }
.kal-tag.heute .kal-datum { background: var(--text); color: var(--bg); }
.kal-zeile { border-left-width: 4px; }
.ebene:has(input:checked) { background: var(--flaeche); color: var(--text); border-color: var(--eb); box-shadow: inset 0 0 0 1px var(--eb); }
.ebene:has(input:checked) .ebene-punkt { background: var(--eb); border-color: var(--eb); }

/* Board: Spaltenkopf mit Farbstreifen, Flaeche neutral */
.board-spalte { background: var(--flaeche-2); border: 1px solid var(--linie); border-top: 4px solid var(--sp, var(--schiefer)); }
.spalte-neu { --sp: var(--blau); } .spalte-angebot { --sp: var(--gelb); } .spalte-option { --sp: var(--lila); } .spalte-gebucht { --sp: var(--gruen); } .spalte-verloren { --sp: var(--rot); }
.board-spalte.spalte-verloren { background: transparent; border-style: dashed; border-top-style: solid; }
.board-kopf .pill { background: var(--sp); border-color: var(--sp); color: #fff; }
.board-spalte.drueber { background: var(--flaeche); border-color: var(--sp); }

/* Notizzettel: weiss mit Ocker-Rand */
.notiz { background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--gelb); }
.notiz-system { border-top-color: var(--blau); }

/* Sonstiges */
.schalter.an span { background: var(--gruen); }
.balken span { background: var(--blau); }
.code.gross { color: var(--text); background: none; -webkit-background-clip: initial; background-clip: initial; }
.dep-alle { background: var(--schiefer); }

/* Fristen mit Ergebnis */
.kal-eintrag.frist-aktiv, .kal-zeile.frist-aktiv { background: var(--flaeche); color: var(--rot); outline: 2px solid var(--rot); outline-offset: -2px; font-weight: 650; }
.kal-eintrag.frist-verpasst { background: var(--rot); color: #fff; font-weight: 650; }
.kal-eintrag.frist-erledigt { background: var(--gruen); color: #fff; opacity: .75; }
.kal-zeile.frist-erledigt { border-left-color: var(--gruen); opacity: .8; }
.kal-zeile.frist-verpasst { border-left-color: var(--rot); background: var(--krit-weich); }
.kal-zeile.frist-aktiv { outline: 0; border-left-color: var(--rot); background: transparent; }
.frist-legende { gap: 8px; }
.frist-legende .kal-eintrag { display: inline-block; font-size: .78rem; padding: 3px 10px; }
.frist-karte { border-left: 5px solid var(--fk); }
.frist-karte.frist-verpasst { --fk: var(--rot); }
.frist-karte.frist-aktiv { --fk: var(--gelb); }
.frist-karte.frist-erledigt { --fk: var(--gruen); opacity: .85; }
.frist-ergebnis { display: flex; gap: 6px; align-items: flex-start; font-size: .85rem; font-weight: 650; color: var(--fk); }
.frist-ergebnis .ic { width: 16px; height: 16px; margin-top: 1px; }

/* Projektseite */
.fortschritt { height: 6px; background: var(--flaeche-2); border-radius: 999px; overflow: hidden; }
.fortschritt span { display: block; height: 100%; background: var(--gruen); border-radius: 999px; }
.fortschritt.gross { height: 10px; }
.checkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.checkliste li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; }
.checkliste li.offen { box-shadow: inset 3px 0 0 var(--gelb); }
.check-kreis { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linie-stark); display: grid; place-items: center; }
.checkliste li.ok .check-kreis { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.check-kreis .ic { width: 15px; height: 15px; }
.check-text { display: flex; flex-direction: column; font-weight: 600; font-size: .92rem; }
.check-text a { text-decoration: none; }
.checkliste li.ok .check-text { color: var(--leise); font-weight: 500; }
.schicht-offen { outline: 2px dashed var(--rot); outline-offset: -2px; }
.ablauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ablauf-tag { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--akzent); font-weight: 700; margin-top: 8px; }
.ablauf-eintrag { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.ablauf-zeit { font-family: var(--mono); font-weight: 700; display: flex; flex-direction: column; padding-top: 10px; }
.ablauf-zeit small { color: var(--leise); font-weight: 500; }
.ablauf-eintrag .k-karte { border-left: 4px solid var(--blau); }
.ablauf-eintrag.dl .k-karte { border-left-color: var(--lila); }

/* ToDos als Board */
.todo-schnell { display: grid; grid-template-columns: minmax(0, 1fr) 200px 150px auto; gap: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px; }
.todo-board { grid-auto-columns: minmax(260px, 1fr); }
.todo-spalte { --sp: var(--schiefer); }
.todo-spalte.spalte-ich { --sp: var(--akzent); }
.todo-spalte .board-kopf .pill { background: var(--sp); border-color: var(--sp); color: #fff; }
.todo-karte { padding-left: 18px; }
.chip-klein { font-size: .74rem; padding: 2px 8px; }
.todo-karte .k-aktionen details[open] .mini-form { left: 8px; right: 8px; }
@media (max-width: 700px) { .todo-schnell { grid-template-columns: 1fr 1fr; } .todo-schnell .knopf { grid-column: 1 / -1; justify-content: center; } .todo-schnell input[name="todo"] { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .todo-schnell { grid-template-columns: minmax(0, 1fr) minmax(0, 180px) auto; } .todo-schnell input[name="todo"] { grid-column: 1 / -1; } }
@media (max-width: 700px) { .todo-schnell { grid-template-columns: 1fr 1fr; } }

/* ---------- Overlay-Fenster (statt eingebetteter Formulare) ---------- */
.overlay { border: 1px solid var(--linie); border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 900px); background: var(--flaeche); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.overlay.overlay-breit { width: min(820px, calc(100vw - 32px)); }
.overlay::backdrop { background: rgba(12, 14, 18, .55); }
.overlay[open] { display: flex; flex-direction: column; }
.overlay-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linie); }
.overlay-kopf h3 { font-size: 1.05rem; }
.overlay-inhalt { padding: 16px 18px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.overlay-inhalt form { margin: 0; }
.overlay .formular-raster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.overlay .knopf-reihe { justify-content: flex-end; padding-top: 4px; }
.overlay .feld input, .overlay .feld select, .overlay .feld textarea, .overlay .formular input:not([type="checkbox"]):not([type="radio"]), .overlay .formular select, .overlay .formular textarea { width: 100%; }
.overlay-aktionen { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 4px; }
@media (max-width: 700px) {
  .overlay { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .overlay .formular-raster { grid-template-columns: 1fr; }
}
input[type="date"], input[type="datetime-local"], input[type="time"] { font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 8px; padding: 8px 10px; min-width: 0; }

/* Datumsauswahl: einheitliches Feld + Schnellwahl */
input[type="date"], input[type="datetime-local"] { height: 40px; width: 100%; padding: 6px 10px; font-variant-numeric: tabular-nums; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.datum-wahl { display: flex; flex-direction: column; gap: 8px; }
.datum-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.datum-chips button { font: inherit; font-size: .8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); cursor: pointer; }
.datum-chips button:hover { border-color: var(--text); }
.datum-chips button.aktiv { background: var(--text); color: var(--bg); border-color: var(--text); }
.datum-lesbar { font-size: .82rem; color: var(--leise); }
.overlay .zwei-felder:has(.datum-wahl), .overlay .formular-raster .feld:has(.datum-wahl) { grid-template-columns: 1fr; grid-column: 1 / -1; }
.datum-wahl input[type="date"] { max-width: 260px; }
.weiter-raster { display: flex; flex-direction: column; gap: 12px; }
.weiter-raster .verschieben-form, .weiter-raster .verloren-form { display: flex; flex-wrap: wrap; gap: 8px; }
.weiter-raster .verloren-form select { flex: 1 1 200px; }
.weiter-raster form.formular { border-top: 1px solid var(--linie); padding-top: 12px; }
.lead-volltext { background: var(--flaeche-2); border-radius: 8px; padding: 10px 12px; max-height: 220px; overflow-y: auto; }
.hinweis-toast { transition: opacity .3s, transform .3s; border-left: 4px solid var(--gruen); background: var(--text); color: var(--bg); }
.hinweis-toast.fehler { border-left-color: var(--rot); }
.hinweis-toast.weg { opacity: 0; transform: translate(-50%, 8px); }
.hinweis-toast { left: auto; right: 24px; transform: none; max-width: min(420px, calc(100vw - 32px)); }
.hinweis-toast.weg { transform: translateY(8px); }
@media (max-width: 900px) { .hinweis-toast { right: 16px; left: 16px; } }

/* ===================================================================== Mail & Anrufe */
button.k-karte { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
kbd { font: 600 .75rem var(--mono); padding: 1px 6px; border: 1px solid var(--linie-stark); border-bottom-width: 2px; border-radius: 5px; background: var(--flaeche); }
.chip-logo { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; flex: none; vertical-align: -3px; }
.pill .chip-logo { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.knopf-reihe.links { justify-content: flex-start; }
.kachel-raster.breit { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }

.mail-kopf { align-items: center; }
.mail-suche { flex: 1; max-width: 520px; }
.mail-suche input { width: 100%; }
.mail-filter { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: -6px; }
.mail-filter .filter-chips { display: flex; flex-wrap: wrap; }

.mail-layout { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); min-height: calc(100vh - 250px); overflow: hidden; }
.mail-liste { border-right: 1px solid var(--linie); overflow-y: auto; max-height: calc(100vh - 230px); position: sticky; top: 0; }
.mail-liste .leer-hinweis { margin: 24px 16px; }
.mail-liste-ende { padding: 14px 16px; }
.mail-karte { display: flex; gap: 11px; padding: 12px 14px 12px 12px; border-bottom: 1px solid var(--linie); border-left: 3px solid transparent; color: var(--text); text-decoration: none; transition: background .12s; }
.mail-karte:hover { background: var(--flaeche-2); color: var(--text); }
.mail-karte.aktiv { background: var(--flaeche-2); border-left-color: var(--akzent); }
.mail-karte .k-avatar { width: 36px; height: 36px; font-size: .8rem; }
.mail-karte-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mail-karte-zeile { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mail-karte-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; }
.mail-karte-zeit { font-size: .76rem; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-karte-betreff { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-karte-auszug { font-size: .8rem; color: var(--leise); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mail-karte-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.mail-karte-chips .pill { font-size: .68rem; padding: 1px 7px; }
.mail-karte.ungelesen .mail-karte-name, .mail-karte.ungelesen .mail-karte-betreff { font-weight: 750; }
.mail-karte.ungelesen .mail-karte-zeit { color: var(--akzent); font-weight: 650; }
.mail-anzahl { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--leise); margin-left: 4px; }

.mail-lesen { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mail-leer { margin: auto; text-align: center; color: var(--leise); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mail-leer svg { width: 40px; height: 40px; opacity: .45; }
.mail-lesen-kopf h2 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 8px; overflow-wrap: anywhere; }
.mail-aktionen { position: static; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; padding: 0 0 14px; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; }
.mail-aktionen form { margin: 0; }
.mail-kontext { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche-2); }
.mail-kontext-kunde { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; }
.mail-kontext-kunde > span:last-child { display: flex; flex-direction: column; }
.mail-kontext-kunde .k-avatar { width: 34px; height: 34px; font-size: .78rem; }

.mail-verlauf { display: flex; flex-direction: column; gap: 10px; }
.mail-nachricht { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); overflow: hidden; }
.mail-nachricht.raus { border-left: 3px solid var(--blau, #24527a); }
.mail-nachricht > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 14px; cursor: pointer; list-style: none; }
.mail-nachricht > summary::-webkit-details-marker { display: none; }
.mail-nachricht > summary .k-avatar { width: 34px; height: 34px; font-size: .78rem; grid-row: span 2; }
.mail-nachricht-wer { display: flex; flex-direction: column; min-width: 0; }
.mail-nachricht-wer .k-unter { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-nachricht-zeit { font-size: .8rem; color: var(--leise); }
.mail-nachricht-auszug { grid-column: 2 / 4; font-size: .82rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-nachricht[open] .mail-nachricht-auszug { display: none; }
.mail-nachricht[open] > summary { border-bottom: 1px solid var(--linie); }
.mail-nachricht-inhalt { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mail-html { width: 100%; border: 0; min-height: 80px; background: #fff; border-radius: 8px; display: block; }
.mail-html.klein { min-height: 40px; }
.mail-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; font-size: .93rem; }
.mail-schnell-antwort { text-align: left; font: inherit; color: var(--leise); background: var(--flaeche); border: 1px dashed var(--linie-stark); border-radius: 12px; padding: 14px 16px; cursor: text; display: flex; gap: 8px; align-items: center; }
.mail-schnell-antwort:hover { border-color: var(--akzent); color: var(--text); }

.mail-schreiben textarea { min-height: 220px; font: inherit; line-height: 1.5; }
.baustein-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mail-signatur-vorschau { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--linie); border-radius: 10px; }
.overlay-aktionen .klein-select { margin-right: auto; max-width: 260px; }
.overlay-aktionen .haken { white-space: nowrap; }

.personen-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.person-knopf { display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.person-knopf > span { display: flex; flex-direction: column; min-width: 0; }
.person-knopf .k-avatar { width: 32px; height: 32px; font-size: .75rem; }
.person-knopf:hover { border-color: var(--linie-stark); }
.person-knopf.aktiv { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }

.anruf-tag { font-size: .9rem; margin: 14px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.anruf-karte { gap: 8px; padding: 13px 14px; }
.anruf-karte .k-avatar { width: 36px; height: 36px; font-size: .8rem; }
.anruf-karte .k-kopf > span { display: flex; flex-direction: column; min-width: 0; }
.anruf-karte.offen { border-left: 4px solid var(--rot, #b8352f); }
.anruf-karte.r-missed_in { border-left: 3px solid var(--rot, #b8352f); }
.anruf-karte.r-in { border-left: 3px solid var(--gruen, #2e7d55); }
.anruf-karte.r-out { border-left: 3px solid var(--blau, #24527a); }
.anruf-karte.r-missed_out { border-left: 3px solid var(--gelb, #b7791f); }
.anruf-notiz { font-size: .84rem; padding: 8px 10px; border-radius: 8px; background: var(--flaeche-2); border: 1px solid var(--linie); white-space: pre-line; }

.regel-liste { gap: 8px; }
.regel-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); margin: 0; }
.regel-chip.spam { border-color: var(--rot, #b8352f); }
.regel-chip .knopf-icon { width: 26px; height: 26px; }
.baustein-karte .k-titel { font-size: 1rem; }
.signatur-vorschau { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--linie); }

@media (max-width: 900px) {
  .mail-kopf { flex-wrap: wrap; }
  .mail-suche { flex: 1 1 100%; max-width: none; }
  .mail-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mail-liste { max-height: none; position: static; border-right: 0; }
  .mail-layout.hat-thread .mail-liste { display: none; }
  .mail-layout:not(.hat-thread) .mail-lesen { display: none; }
  .mail-lesen { padding: 14px; }
  .mail-filter { flex-direction: column; align-items: flex-start; }
  .mail-filter .filter-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
  .mail-filter .chip { flex: none; }
  .kachel-raster.breit { grid-template-columns: minmax(0, 1fr); }
}
html.laedt { cursor: progress; }
html.laedt .mail-lesen { opacity: .55; transition: opacity .15s .1s; }
.k-zahl-karte.zahl-krit { border-color: var(--rot, #b8352f); }
.k-zahl-karte.zahl-krit strong { color: var(--rot, #b8352f); }
.anruf-karte .k-kopf > span, a.k-karte .k-kopf > span { display: flex; flex-direction: column; min-width: 0; }
a.k-karte { color: var(--text); text-decoration: none; }