/* IDEE Immobilienmanagement – Ticketsystem (0.4)
   Modern, abgerundet; Markenbild Schwarz/Weiß mit klaren Statusfarben. Hell/Dunkel automatisch oder per Umschalter. */
:root {
  color-scheme: light;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --bg: #f3f4f6; --surface: #ffffff; --surface-2: #f8f9fa; --sunken: #eef0f3;
  --text: #16181d; --text-2: #3a3f48; --muted: #6b7280; --line: #e5e7eb; --line-2: #d6d9de;
  --primary: #16181d; --primary-ink: #ffffff; --primary-hover: #33373f;
  --link: #1f5fd6; --focus: #2f6fdb;
  --accent: #d63637; --accent-bg: #fdecec;
  --hover: #f1f3f5; --chip-on: #16181d; --chip-on-ink: #fff;
  --header-bg: #111317; --header-ink: #f2f3f5; --header-ink-2: #9aa0a9; --header-hover: #23262d;
  --nav-bg: #ffffff; --nav-active: #eef2ff; --nav-active-ink: #1f3fae;
  --in-bg: #f1f3f6; --out-bg: #16181d; --out-ink: #f5f6f8; --note-bg: #fff8db; --note-line: #f0dc8a; --priv-bg: #f3effd; --priv-line: #d7cbf7;
  --ok: #157f3b; --ok-bg: #e5f6eb; --warn: #8a5300; --warn-bg: #fff3d6; --err: #b42323; --err-bg: #fde8e8;
  /* Statusfarben – überall gleich */
  --s-neu: #2f6fdb;        --s-neu-bg: #e6efff;
  --s-offen: #7a4fd6;      --s-offen-bg: #f0eafd;
  --s-wartet: #b7791f;     --s-wartet-bg: #fff4dc;
  --s-handwerker: #0f8f86; --s-handwerker-bg: #ddf5f2;
  --s-nacharbeit: #c2410c; --s-nacharbeit-bg: #ffedd5;
  --s-erledigt: #1f8a4c;   --s-erledigt-bg: #e2f5e9;
  --s-geschlossen: #6b7280; --s-geschlossen-bg: #eceef1;
  /* Prioritäten als Ampel: grün – gelb – rot */
  --p-hoch: #d63637; --p-hoch-bg: #fdecec; --p-normal: #9a7600; --p-normal-bg: #fff6cc; --p-normal-fill: #f5c400; --p-normal-ink: #2e2500; --p-niedrig: #1f8a4c; --p-niedrig-bg: #e2f5e9;
  --p-dringend: var(--p-hoch); --p-dringend-bg: var(--p-hoch-bg);
  --r-tenant: #e6efff; --r-tenant-ink: #1f4fb0; --r-owner: #f0eafd; --r-owner-ink: #5b34b8; --r-craft: #ddf5f2; --r-craft-ink: #0b6c65;
  --r-both: #fde8f1; --r-both-ink: #a3245e; --r-staff: #e2f5e9; --r-staff-ink: #1d7a4b; --r-other: #eceef1; --r-other-ink: #4b5563;
  --radius: 14px; --radius-sm: 9px; --radius-xs: 6px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 40px rgba(16,24,40,.16);
  --nav-w: 280px;
  /* Kundenseiten der Dokumentenschmiede: Sie/Wir, Hinweiskasten, IBAN-Meldung, Häuschen */
  --dl-sie: #b45309; --dl-sie-bg: #fef3c7; --dl-sie-ink: #92400e; --dl-wir: #1d4ed8; --dl-wir-bg: #dbeafe; --dl-wir-ink: #1d4ed8;
  --dl-info-bg: #eff6ff; --dl-info-line: #bfdbfe; --dl-info-ink: #1e3a8a; --dl-sent-bg: #f0fdf4; --dl-sent-line: #bbf7d0;
  --iban-ok: #166534; --iban-bad: #b42318; --house-line: #1d4ed8; --house-roof: #dbeafe;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0f12; --surface: #171a1f; --surface-2: #1c2026; --sunken: #121418;
    --text: #f1f3f5; --text-2: #d9dde3; --muted: #b3b9c2; --line: #282c33; --line-2: #343941;
    --primary: #eceef1; --primary-ink: #111317; --primary-hover: #ffffff;
    --link: #a3c0ff; --focus: #a3c0ff; --accent: #ff6b6b; --accent-bg: #3a1b1b;
    --hover: #22262d; --chip-on: #eceef1; --chip-on-ink: #111;
    --header-bg: #08090b; --nav-bg: #13161a; --nav-active: #1f2a44; --nav-active-ink: #a9c1ff;
    --in-bg: #22262d; --out-bg: #e9ecf1; --out-ink: #111317; --note-bg: #2b2715; --note-line: #5c5120; --priv-bg: #251f38; --priv-line: #4a3b78;
    --ok: #6fd296; --ok-bg: #14301e; --warn: #f0b35a; --warn-bg: #33270f; --err: #ff8a80; --err-bg: #3a1c1a;
    --s-neu: #7fa8ff; --s-neu-bg: #1a2742; --s-offen: #b79bff; --s-offen-bg: #2a2142; --s-wartet: #f0b35a; --s-wartet-bg: #352a12;
    --s-handwerker: #4fd1c5; --s-handwerker-bg: #10302d; --s-nacharbeit: #fb923c; --s-nacharbeit-bg: #3a2414; --s-erledigt: #6fd296; --s-erledigt-bg: #14301e; --s-geschlossen: #9399a3; --s-geschlossen-bg: #262a30;
    --p-hoch: #ff7a7a; --p-hoch-bg: #3d1b1b; --p-normal: #ffd54a; --p-normal-bg: #352d0a; --p-normal-fill: #f5c400; --p-normal-ink: #2e2500; --p-niedrig: #6fd296; --p-niedrig-bg: #14301e; --p-dringend: #ff7a7a; --p-dringend-bg: #3d1b1b;
    --r-tenant: #1a2742; --r-tenant-ink: #a9c1ff; --r-owner: #2a2142; --r-owner-ink: #cdb8ff; --r-craft: #10302d; --r-craft-ink: #7fe0d6;
    --r-both: #3a1a2a; --r-both-ink: #f5a8cb; --r-staff: #133222; --r-staff-ink: #8fe0b4; --r-other: #262a31; --r-other-ink: #b7bdc8;
    --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
    --dl-sie-bg: rgba(245,158,11,.18); --dl-sie-ink: #fcd34d; --dl-wir-bg: rgba(59,130,246,.2); --dl-wir-ink: #93c5fd;
    --dl-info-bg: var(--sunken); --dl-info-line: var(--line); --dl-info-ink: var(--text); --dl-sent-bg: var(--sunken); --dl-sent-line: var(--line);
    --iban-ok: #86efac; --iban-bad: #fda29b; --house-line: #93c5fd; --house-roof: #22304f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f12; --surface: #171a1f; --surface-2: #1c2026; --sunken: #121418;
  --text: #f1f3f5; --text-2: #d9dde3; --muted: #b3b9c2; --line: #282c33; --line-2: #343941;
  --primary: #eceef1; --primary-ink: #111317; --primary-hover: #ffffff;
  --link: #a3c0ff; --focus: #a3c0ff; --accent: #ff6b6b; --accent-bg: #3a1b1b;
  --hover: #22262d; --chip-on: #eceef1; --chip-on-ink: #111;
  --header-bg: #08090b; --nav-bg: #13161a; --nav-active: #1f2a44; --nav-active-ink: #a9c1ff;
  --in-bg: #22262d; --out-bg: #e9ecf1; --out-ink: #111317; --note-bg: #2b2715; --note-line: #5c5120; --priv-bg: #251f38; --priv-line: #4a3b78;
  --ok: #6fd296; --ok-bg: #14301e; --warn: #f0b35a; --warn-bg: #33270f; --err: #ff8a80; --err-bg: #3a1c1a;
  --s-neu: #7fa8ff; --s-neu-bg: #1a2742; --s-offen: #b79bff; --s-offen-bg: #2a2142; --s-wartet: #f0b35a; --s-wartet-bg: #352a12;
  --s-handwerker: #4fd1c5; --s-handwerker-bg: #10302d; --s-nacharbeit: #fb923c; --s-nacharbeit-bg: #3a2414; --s-erledigt: #6fd296; --s-erledigt-bg: #14301e; --s-geschlossen: #9399a3; --s-geschlossen-bg: #262a30;
  --p-hoch: #ff7a7a; --p-hoch-bg: #3d1b1b; --p-normal: #ffd54a; --p-normal-bg: #352d0a; --p-normal-fill: #f5c400; --p-normal-ink: #2e2500; --p-niedrig: #6fd296; --p-niedrig-bg: #14301e; --p-dringend: #ff7a7a; --p-dringend-bg: #3d1b1b;
  --r-tenant: #1a2742; --r-tenant-ink: #a9c1ff; --r-owner: #2a2142; --r-owner-ink: #cdb8ff; --r-craft: #10302d; --r-craft-ink: #7fe0d6;
    --r-both: #3a1a2a; --r-both-ink: #f5a8cb; --r-staff: #133222; --r-staff-ink: #8fe0b4; --r-other: #262a31; --r-other-ink: #b7bdc8;
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  --dl-sie-bg: rgba(245,158,11,.18); --dl-sie-ink: #fcd34d; --dl-wir-bg: rgba(59,130,246,.2); --dl-wir-ink: #93c5fd;
  --dl-info-bg: var(--sunken); --dl-info-line: var(--line); --dl-info-ink: var(--text); --dl-sent-bg: var(--sunken); --dl-sent-line: var(--line);
  --iban-ok: #86efac; --iban-bad: #fda29b; --house-line: #93c5fd; --house-roof: #22304f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; font-weight: 650; margin: .1rem 0 1rem; line-height: 1.25; letter-spacing: -.015em; }
h2 { font-size: 1.12rem; font-weight: 650; margin: 1.6rem 0 .7rem; }
h3 { font-size: 1rem; font-weight: 650; margin: 0 0 .7rem; display: flex; align-items: center; gap: .45rem; }
h4 { font-size: .72rem; margin: 1rem 0 .45rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
code, pre { font-family: "Cascadia Mono", Consolas, monospace; font-size: .85rem; }
code.wrap { word-break: break-all; }
.pre { white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; margin: .4rem 0 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ico { flex: none; vertical-align: -3px; }

/* ---------- Kopfleiste ---------- */
.topbar { position: sticky; top: 0; z-index: 30; height: 58px; display: flex; align-items: center; gap: 1rem; padding: 0 16px; background: var(--header-bg); color: var(--header-ink); }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--header-ink); text-decoration: none; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.brand .brand-sub { font-size: .8rem; color: var(--header-ink-2); border-left: 1px solid #3a3d44; padding-left: .6rem; }
.brand-text { font-weight: 650; letter-spacing: .12em; }
.top-search { flex: 1; max-width: 460px; margin-left: 1rem; display: flex; align-items: center; gap: .5rem; background: #1f2228; border: 1px solid #2d3139; border-radius: 99px; padding: 0 .9rem; color: var(--header-ink-2); }
.top-search input { background: none; border: 0; color: var(--header-ink); padding: .5rem 0; outline: none; }
.top-search input::placeholder { color: #80868f; }
.top-search:focus-within { border-color: #5b6270; }
.top-search { position: relative; max-width: 620px; background: #262a31; border-color: #3a3f48; padding: 0 .6rem 0 1rem; min-height: 40px; }
.top-search input { font-size: .95rem; }
.top-search input::placeholder { color: #a3a9b2; }
.top-search:focus-within { background: #2d323a; border-color: #8a93a3; box-shadow: 0 0 0 3px rgba(138,147,163,.25); }
.search-kbd { flex: none; font: 600 .7rem var(--font); color: #a3a9b2; border: 1px solid #4a505a; border-radius: 6px; padding: .1rem .4rem; }
.top-search:focus-within .search-kbd { display: none; }
kbd { font: 600 .75em var(--font); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 .3em; background: var(--surface-2); }
.search-tips { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 340px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 59; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .55rem; font-size: .85rem; }
.search-tips[hidden] { display: none; }
.tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; color: var(--text-2); }
.tips-grid span { display: inline-flex; align-items: center; gap: .35rem; }
.search-toggle { display: none; background: none; border: 0; color: var(--header-ink); padding: .3rem; cursor: pointer; margin-left: auto; }
.top-search input { flex: 1; min-width: 0; }
.search-clear { background: #3a3f48; color: #fff; border: 0; border-radius: 99px; width: 22px; height: 22px; line-height: 20px; font-size: 16px; cursor: pointer; flex: none; padding: 0; }
.search-clear:hover { background: #c0392b; }
.search-clear[hidden] { display: none; }
.search-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 340px; max-height: 70vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60; padding: .35rem; }
.search-drop[hidden] { display: none; }
.search-drop .sg { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .55rem .6rem .2rem; }
.search-drop a { display: block; padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.search-drop a .t { display: block; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-drop a .s { display: block; font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-drop a.act, .search-drop a:hover { background: var(--hover); }
.search-drop mark { background: #ffe58a; color: #222; border-radius: 3px; padding: 0 1px; }
.search-drop .all { border-top: 1px solid var(--line); margin-top: .3rem; font-weight: 600; color: var(--link); }
.search-drop .none { padding: .7rem .6rem; color: var(--muted); font-size: .88rem; }
.search-page { position: relative; }
.search-page .search-drop { top: 100%; right: auto; width: min(560px, 100%); }
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.search-results li { padding: .25rem 0; }
.filter-reset { white-space: nowrap; }
/* Avatar-Farbwahl */
.color-pick .swatches { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.swatch { width: 32px; height: 32px; border-radius: 99px; border: 3px solid transparent; cursor: pointer; color: #fff; font-size: .62rem; font-weight: 700; padding: 0; box-shadow: 0 0 0 1px var(--line); }
.swatch.on { border-color: var(--surface); box-shadow: 0 0 0 3px var(--text); }
.swatch:disabled { cursor: not-allowed; opacity: .45; }
.swatch.custom { width: auto; padding: 0 .6rem 0 .2rem; display: inline-flex; align-items: center; gap: .3rem; color: var(--text); background: var(--surface-2); font-weight: 500; font-size: .8rem; margin: 0; }
.swatch.custom input { width: 26px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; }
.me { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.nav-toggle { display: none; background: none; border: 0; color: var(--header-ink); cursor: pointer; padding: .3rem; border-radius: 8px; }
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; border-radius: 99px; display: flex; }
.user-menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 10px); min-width: 260px; background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .5rem; z-index: 50; border: 1px solid var(--line); }
.menu-pop .menu-head { display: flex; gap: .7rem; align-items: center; padding: .5rem .6rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border-radius: var(--radius-sm); color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--hover); text-decoration: none; }
.theme-switch { display: inline-flex; border: 1px solid #343842; border-radius: 99px; padding: 2px; gap: 2px; }
.theme-switch button { background: none; border: 0; color: var(--header-ink-2); cursor: pointer; width: 28px; height: 24px; border-radius: 99px; display: grid; place-items: center; }
.theme-switch button[aria-pressed="true"] { background: var(--header-ink); color: var(--header-bg); }
.theme-switch svg { width: 14px; height: 14px; }

/* ---------- Avatar ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 650; letter-spacing: .02em; object-fit: cover; line-height: 1; user-select: none; }
img.avatar { background: var(--sunken); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); margin-left: -6px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- Seitenleiste ---------- */
.shell { display: flex; min-height: calc(100vh - 58px); }
.sidenav { width: var(--nav-w); flex: none; background: var(--nav-bg); border-right: 1px solid var(--line); padding: 1rem .75rem; position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; }
.nav-group { margin-bottom: .7rem; }
.nav-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 650; padding: .2rem .7rem .35rem; }
.sidenav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 520; text-decoration: none; }
.sidenav a:hover { background: var(--hover); color: var(--text); }
.sidenav a.active { background: var(--nav-active); color: var(--nav-active-ink); font-weight: 650; }
.nav-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: .7rem; padding: .05rem .45rem; border-radius: 99px; font-weight: 700; }
.sidenav a[href$="/tickets"] .nav-badge { background: var(--sunken); color: var(--text-2); }
.sidenav .nav-new { margin: 0 0 1rem; justify-content: center; color: var(--primary-ink); }
.sidenav .nav-new:hover { background: var(--primary-hover); color: var(--primary-ink); }
.nav-backdrop { display: none; }
.container { flex: 1; min-width: 0; max-width: 1480px; margin: 0 auto; padding: 1.5rem 24px 3rem; }
.container.narrow { max-width: 780px; }

/* ---------- Grundbausteine ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.narrow-card { max-width: 560px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.page-head h1 { margin-bottom: .2rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.grid-side { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
.grid-side > *, .grid2 > *, .grid3 > * { min-width: 0; }

label { display: block; margin: 0 0 .8rem; font-size: .84rem; color: var(--muted); font-weight: 520; }
label > input, label > select, label > textarea { margin-top: .3rem; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .55rem .75rem; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; margin: 0 .4rem 0 0; vertical-align: -3px; accent-color: var(--primary); padding: 0; }
input[type=file] { border: 1px dashed var(--line-2); padding: .5rem; background: var(--surface-2); }
textarea { resize: vertical; }
label.check { color: var(--text); font-size: .92rem; font-weight: 450; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 1rem; padding: .8rem 1rem .3rem; }
legend { color: var(--muted); font-size: .72rem; padding: 0 .4rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
details > summary { cursor: pointer; color: var(--text-2); margin: .4rem 0; font-weight: 550; }
.hp { position: absolute; left: -9999px; }
.stack { border-top: 1px dashed var(--line); padding-top: .7rem; margin-top: .7rem; }
form.inline { display: inline; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-weight: 600; padding: .55rem 1.05rem; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.btn.small { padding: .3rem .7rem; font-size: .84rem; }
.btn.danger.armed { background: var(--err); color: #fff; border-color: var(--err); animation: pulse-armed 1s ease-in-out infinite; }
@keyframes pulse-armed { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 25%, transparent); } }
.btn.block { display: flex; width: 100%; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
button.link { background: none; border: 0; color: var(--link); cursor: pointer; padding: 0; font: inherit; }
button.link:hover { text-decoration: underline; }
button.link.danger, a.danger { color: var(--err); }

.flash { padding: .7rem .95rem; border-radius: var(--radius-sm); margin-bottom: .9rem; border: 1px solid transparent; }
.flash.success { background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--err-bg); color: var(--err); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 650; padding: .15rem .55rem; border-radius: 99px; background: var(--sunken); color: var(--text-2); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.manual { background: var(--s-wartet-bg); color: var(--s-wartet); }

/* Status- und Prioritäts-Pillen */
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 650; padding: .2rem .65rem; border-radius: 99px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.big { font-size: .9rem; padding: .35rem .9rem; }
.s-neu { background: var(--s-neu-bg); color: var(--s-neu); }
.s-offen { background: var(--s-offen-bg); color: var(--s-offen); }
.s-wartet { background: var(--s-wartet-bg); color: var(--s-wartet); }
.s-handwerker { background: var(--s-handwerker-bg); color: var(--s-handwerker); }
.s-nacharbeit { background: var(--s-nacharbeit-bg); color: var(--s-nacharbeit); }
.s-erledigt { background: var(--s-erledigt-bg); color: var(--s-erledigt); }
.s-geschlossen { background: var(--s-geschlossen-bg); color: var(--s-geschlossen); }
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: 0; }
.sdot.s-neu { background: var(--s-neu); } .sdot.s-offen { background: var(--s-offen); } .sdot.s-wartet { background: var(--s-wartet); }
.sdot.s-handwerker { background: var(--s-handwerker); } .sdot.s-nacharbeit { background: var(--s-nacharbeit); } .sdot.s-erledigt { background: var(--s-erledigt); } .sdot.s-geschlossen { background: var(--s-geschlossen); }
.prio { display: inline-block; font-size: .68rem; font-weight: 750; padding: .15rem .55rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.prio::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: .35rem; vertical-align: 0; }
.prio.p-hoch, .prio.p-dringend { background: var(--p-hoch-bg); color: var(--p-hoch); }
.prio.p-normal { background: var(--p-normal-bg); color: var(--p-normal); }
.prio.p-niedrig { background: var(--p-niedrig-bg); color: var(--p-niedrig); }
/* Ampel-Auswahl */
.ampel { display: flex; gap: 6px; margin-top: .3rem; }
.ampel label { flex: 1; margin: 0; cursor: pointer; }
.ampel input { position: absolute; opacity: 0; pointer-events: none; }
.ampel span { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .4rem; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 650; font-size: .86rem; transition: all .12s; }
.ampel i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; }
.ampel-niedrig span { color: var(--p-niedrig); } .ampel-normal span { color: var(--p-normal); } .ampel-hoch span { color: var(--p-hoch); }
.ampel input:checked + span { color: #fff; border-color: transparent; }
.ampel input:checked + span i { background: #fff; border-color: #fff; }
.ampel-niedrig input:checked + span { background: var(--p-niedrig); }
.ampel-normal input:checked + span { background: var(--p-normal-fill); color: var(--p-normal-ink); }
.ampel-normal input:checked + span i { background: var(--p-normal-ink); border-color: var(--p-normal-ink); }
.ampel-hoch input:checked + span { background: var(--p-hoch); }
.ampel input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Frist-Schnellauswahl */
.due-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .35rem; }
.due-presets button { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: .74rem; font-weight: 600; padding: .15rem .5rem; border-radius: 99px; cursor: pointer; }
.due-presets button:hover { border-color: var(--text); color: var(--text); }
.due-presets button.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.role { display: inline-block; font-size: .7rem; font-weight: 650; padding: .08rem .5rem; border-radius: 99px; background: var(--sunken); color: var(--text-2); }
.r-tenant { background: var(--r-tenant); color: var(--r-tenant-ink); }
.r-owner { background: var(--r-owner); color: var(--r-owner-ink); }
.r-craftsman { background: var(--r-craft); color: var(--r-craft-ink); }
.r-staff, .r-note { background: var(--note-line); color: var(--text); }

/* ---------- Listen, Filter ---------- */
.filter-box { margin-bottom: 1rem; }
.filter-box > summary { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters input[type=search] { flex: 1 1 260px; width: auto; }
.filters select { width: auto; max-width: 240px; }
.quick { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chip { padding: .35rem .85rem; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: .86rem; text-decoration: none; font-weight: 550; }
.chip.on { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }
.chip:hover { text-decoration: none; border-color: var(--text); }
.seg { display: inline-flex; background: var(--sunken); border-radius: 99px; padding: 3px; }
.seg a { padding: .38rem .9rem; text-decoration: none; color: var(--text-2); font-weight: 600; font-size: .88rem; border-radius: 99px; display: inline-flex; gap: .35rem; align-items: center; }
.seg a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list th { font-size: .7rem; color: var(--muted); font-weight: 650; background: var(--surface-2); text-transform: uppercase; letter-spacing: .07em; }
table.list a { color: var(--text); }
table.list tr[data-href] { cursor: pointer; }
table.list tr[data-href]:hover td { background: var(--hover); }
tr.prio-dringend td:first-child, tr.prio-hoch td:first-child { box-shadow: inset 4px 0 var(--p-hoch); }
tr.prio-normal td:first-child { box-shadow: inset 4px 0 var(--p-normal-fill); }
tr.prio-niedrig td:first-child { box-shadow: inset 4px 0 var(--p-niedrig); }
tr.overdue td { background: color-mix(in srgb, var(--accent-bg) 70%, transparent); }
tr.inactive td { opacity: .5; }
.empty { text-align: center; color: var(--muted); padding: 2.2rem !important; }
.pager { display: flex; gap: .3rem; margin-top: 1rem; flex-wrap: wrap; }
.pager a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--text); }
.pager a.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.cards.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* Objekt-Steckbrief */
.pf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 1rem; margin-bottom: 1rem; }
.pf-top .card { margin: 0; }
.pf-ring { --p: 0; width: 110px; height: 110px; border-radius: 50%; margin: .2rem auto .8rem; display: grid; place-items: center;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--sunken) 0); }
.pf-ring span { width: 84px; height: 84px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; }
.pf-ring.good { --ring: var(--ok); } .pf-ring.mid { --ring: var(--p-normal-fill); } .pf-ring.low { --ring: var(--p-hoch); }
.pf-areas { display: flex; flex-direction: column; gap: 3px; }
.pf-area { display: flex; align-items: center; gap: .45rem; padding: .3rem .5rem; border-radius: 6px; font-size: .85rem; font-weight: 600; color: var(--text); text-decoration: none; }
.pf-area small { margin-left: auto; font-weight: 400; color: var(--muted); font-size: .72rem; text-align: right; }
.pf-area.ok { background: var(--ok-bg); } .pf-area.part { background: var(--warn-bg); } .pf-area.miss { background: var(--err-bg); }
.pf-area:hover { filter: brightness(.97); }
.pf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.pf-kpis div { background: var(--surface-2); border-radius: var(--radius-sm); padding: .5rem; text-align: center; }
.pf-kpis b { display: block; font-size: 1.3rem; }
.pf-kpis span { font-size: .7rem; color: var(--muted); }
.pf-kpis .bad b { color: var(--err); }
.pf-tl { list-style: none; padding: 0; margin: 0 0 .6rem; font-size: .85rem; }
.pf-tl li { display: grid; grid-template-columns: 105px 1fr; gap: 0 .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.pf-tl li span { grid-column: 2; font-size: .72rem; }
.pf-tl time { font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-tl.past { opacity: .8; }
.pf-dates h4 { margin: .2rem 0; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
.pf-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pf-fact { margin: 0; color: var(--text); text-decoration: none; border-top: 4px solid var(--line-2); }
.pf-fact.ok { border-top-color: var(--ok); } .pf-fact.part { border-top-color: var(--p-normal-fill); } .pf-fact.miss { border-top-color: var(--p-hoch); }
.pf-fact h3 { margin: 0 0 .4rem; font-size: .95rem; }
.pf-fact ul { margin: 0; padding-left: 1rem; }
.pf-missing { color: var(--err); font-weight: 600; display: block; margin-top: .3rem; }
.pf-specs .card h3 .badge { margin-left: .4rem; }
.pf-empty input, .pf-empty select { background: var(--warn-bg); }
.pf-inline { display: grid; grid-template-columns: minmax(140px, 1.3fr) 1fr 1fr; gap: .4rem; margin: 0; }
.pf-inline select, .pf-inline input { margin: 0; font-size: .82rem; padding: .3rem .45rem; }
tr.pf-free td:first-child strong { color: var(--err); }
@media (max-width: 1100px) { .pf-top { grid-template-columns: 1fr 1fr; } .pf-score { grid-column: 1 / -1; } }
@media (max-width: 700px) { .pf-top { grid-template-columns: 1fr; } .pf-kpis { grid-template-columns: repeat(2, 1fr); } .pf-inline { grid-template-columns: 1fr; } }
/* Platzhalter für Objekte ohne Bild: Haus + IDEE-Logo auf Grau */
.obj-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; width: 100%; height: 100%; color: #9aa1ab; }
.obj-ph-house { width: 34%; max-width: 90px; min-width: 34px; height: auto; }
.obj-ph-logo { width: 46%; max-width: 130px; min-width: 44px; height: auto; filter: brightness(0); opacity: .38; }
:root[data-theme="dark"] .obj-ph-logo { filter: none; opacity: .45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .obj-ph-logo { filter: none; opacity: .45; } }
.link-card .cover:has(.obj-ph), .record-head .cover:has(.obj-ph) { background: var(--sunken); }
.cover-remove { align-self: flex-start; margin: 0 0 0 -2.6rem; position: relative; z-index: 2; }
.cover-remove .icon-btn { background: var(--surface); border-radius: 99px; box-shadow: var(--shadow); padding: .3rem; }
.pf-shots figure .shot-del { position: absolute; top: 4px; right: 4px; margin: 0; }
.shot-del button { width: 24px; height: 24px; border-radius: 99px; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 22px; cursor: pointer; padding: 0; }
.shot-del button:hover { background: var(--p-hoch); }
.delete-box { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.2rem 0 .5rem; padding-top: .8rem; border-top: 1px dashed var(--line-2); }
/* Steckbrief: alles direkt sichtbar (kein Scrollen in Kästen) */
.rtabs { flex-wrap: wrap; overflow: visible; }
.pf-table { width: 100%; }
.pf-table td, .pf-table th { white-space: normal; vertical-align: top; }
.pf-photos { display: flex; flex-direction: column; gap: 1rem; }
.pf-slot { border-left: 4px solid var(--line-2); padding-left: .8rem; }
.pf-slot.ok { border-left-color: var(--ok); } .pf-slot.miss { border-left-color: var(--p-hoch); }
.pf-slot-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.pf-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.pf-shots figure { margin: 0; position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunken); aspect-ratio: 4 / 3; }
.pf-shots img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.pf-shots figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.62); color: #fff; font-size: .7rem; padding: .2rem .4rem; font-variant-numeric: tabular-nums; }
.pf-shot-missing, .pf-shot-add label { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; font-size: .8rem; font-weight: 600; margin: 0; }
.pf-shot-missing { border: 2px dashed var(--p-hoch); color: var(--p-hoch); background: var(--p-hoch-bg); }
.pf-shot-add { margin: 0; }
.pf-shot-add label { border: 2px dashed var(--line-2); color: var(--text-2); cursor: pointer; background: var(--surface-2); }
.pf-shot-add label:hover { border-color: var(--text-2); color: var(--text); }
.pf-specgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem 1.2rem; }
.pf-specgroup h4 { margin: 0 0 .3rem; display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
.pf-specgroup dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; margin: 0; font-size: .84rem; }
.pf-specgroup dt { color: var(--muted); }
.pf-specgroup dd { margin: 0; font-weight: 600; }
.pf-specgroup dd.pf-none { color: var(--err); font-weight: 500; font-style: italic; }
.pf-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.pf-key { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem; background: var(--surface); font-size: .88rem; }
.pf-key img, .pf-key-nopic { width: 64px; height: 64px; flex: none; border-radius: 8px; object-fit: cover; cursor: zoom-in; }
.pf-key-nopic { display: grid; place-items: center; background: var(--sunken); color: var(--muted); cursor: default; }
.pf-key-add { justify-content: center; border-style: dashed; color: var(--text-2); text-decoration: none; font-weight: 600; min-height: 82px; }
.pf-spacerow { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .5rem; }
.pf-spacekind { font-weight: 700; font-size: .82rem; min-width: 120px; }
.pf-space { font-size: .8rem; padding: .2rem .55rem; border-radius: 99px; background: var(--ok-bg); color: var(--text); }
.pf-space.free { background: var(--err-bg); color: var(--err); }
/* Objektkacheln: feste Zeilen – alles steht immer an derselben Stelle */
.prop-cards { align-items: stretch; }
.prop-cards .link-card { height: 100%; }
.pc-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 1.35; min-height: calc(1.35em * 3); }
.pc-addr { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; min-height: calc(1.35em * 2); }
.pc-meta { line-height: 1.35; min-height: calc(1.35em * 2); white-space: normal; }
.pc-badges { min-height: 1.5rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.prop-cards .link-card .ds-line { margin-top: auto; padding-top: .35rem; }
.prop-cards.size-s .pc-addr { display: none; }
/* Datenstand je Objekt */
.pct-bar { display: inline-block; width: 80px; height: 7px; border-radius: 99px; background: var(--sunken); overflow: hidden; vertical-align: middle; }
.pct-bar span { display: block; height: 100%; border-radius: 99px; }
.pct-bar.good span { background: var(--ok); } .pct-bar.mid span { background: var(--p-normal-fill); } .pct-bar.low span { background: var(--p-hoch); }
.ds-line { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .78rem; }
.ds-line .pct-bar { flex: 1; width: auto; }
.ds-icons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .3rem; }
.ds-ic { width: 24px; height: 24px; border-radius: 6px; display: inline-grid; place-items: center; }
.ds-ic.ok { background: var(--ok-bg); color: var(--ok); }
.ds-ic.part { background: var(--warn-bg); color: var(--warn); }
.ds-ic.miss { background: var(--sunken); color: var(--muted); opacity: .75; }
.ds-foot { display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--muted); margin-top: .35rem; }
.ds-foot span { display: inline-flex; align-items: center; gap: .25rem; }
.link-card .cover { position: relative; }
.cover-badge { position: absolute; top: 8px; right: 8px; background: var(--surface); color: var(--text); border-radius: 99px; padding: .1rem .5rem; font-size: .75rem; font-weight: 700; box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: .25rem; }
.cover-badge.urgent { background: var(--p-hoch); color: #fff; }
.prop-cards.size-s .ds-icons, .prop-cards.size-s .ds-foot { display: none; }
table.datenstand th.c, table.datenstand td.c { text-align: center; }
.ds-cell { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.ds-cell.ok { background: var(--ok-bg); color: var(--ok); }
.ds-cell.part { background: var(--warn-bg); color: var(--warn); }
.ds-cell.miss { background: var(--err-bg); color: var(--err); }
/* Objektkacheln S / M / L – Bild vollständig zeigen (nicht abschneiden) */
.prop-cards .link-card .cover { background-size: contain; background-color: var(--surface-2); }
.prop-cards.size-s { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.prop-cards.size-s .link-card .cover { height: 90px; }
.prop-cards.size-s .link-card { font-size: .85rem; }
.prop-cards.size-m .link-card .cover { height: 150px; }
.prop-cards.size-l { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.prop-cards.size-l .link-card .cover { height: 260px; }
.record-head .cover.cover-upload { background-size: cover; background-position: center; background-color: var(--surface-2); position: relative; overflow: hidden; }
.link-card { display: flex; flex-direction: column; gap: .2rem; color: var(--text); margin: 0; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.link-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.link-card .cover { margin: -1.1rem -1.2rem .7rem; height: 120px; border-radius: var(--radius) var(--radius) 0 0; background: var(--sunken) center/cover no-repeat; display: grid; place-items: center; color: var(--muted); }
ul.simple { list-style: none; padding: 0; margin: 0; }
ul.simple li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
ul.simple li:last-child { border-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 1.6rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .82rem; }

/* ---------- Ticket ---------- */
.ticket-head { display: flex; flex-direction: column; gap: .9rem; }
.ticket-head .top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.ticket-head h1 { margin: 0; }
.ticket-head .meta { color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
/* Status-Leiste: Klick setzt den Status */
.steps { display: flex; gap: 6px; flex-wrap: wrap; }
.steps form { flex: 1 1 0; min-width: 110px; margin: 0; }
.steps button { width: 100%; border: 0; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 650; padding: .55rem .7rem; border-radius: 99px; background: var(--sunken); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: .35rem; transition: filter .15s; }
.steps button:hover { filter: brightness(.96); color: var(--text); }
.steps .done button { color: var(--text-2); }
.steps .current button { color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.steps .done button { background: color-mix(in srgb, var(--s-erledigt) 12%, var(--sunken)); }
.steps .current.st-neu button { background: var(--s-neu); } .steps .current.st-offen button { background: var(--s-offen); }
.steps .current.st-wartet button { background: var(--s-wartet); } .steps .current.st-handwerker button { background: var(--s-handwerker); } .steps .current.st-nacharbeit button { background: var(--s-nacharbeit); }
.steps .current.st-erledigt button { background: var(--s-erledigt); } .steps .current.st-geschlossen button { background: var(--s-geschlossen); }
:root[data-theme="dark"] .steps .current button { color: #0d0f12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .steps .current button { color: #0d0f12; } }

.ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; }
.ticket-layout > * { min-width: 0; }
.sidebar .card { padding: 1rem; }
.tl-filter { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; gap: .5rem; flex-wrap: wrap; }

/* Nachrichten als Blasen */
.timeline { display: flex; flex-direction: column; gap: 1rem; }
.msg { display: flex; gap: .7rem; align-items: flex-end; max-width: 88%; }
.msg .bubble { border-radius: 18px; padding: .75rem 1rem; background: var(--in-bg); box-shadow: var(--shadow); min-width: 0; flex: 1; }
.msg .who { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; font-size: .82rem; margin-bottom: .3rem; }
.msg .who strong { font-size: .88rem; }
.msg .when { font-size: .75rem; opacity: .7; margin-left: auto; white-space: nowrap; }
.msg .body { overflow-wrap: anywhere; }
.msg.in { align-self: flex-start; }
.msg.in .bubble { border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; flex-direction: row-reverse; }
.msg.out .bubble { background: var(--out-bg); color: var(--out-ink); border-bottom-right-radius: 6px; }
.msg.out .bubble a { color: inherit; text-decoration: underline; }
.msg.out .role { background: rgba(255,255,255,.18); color: inherit; }
.msg.note { align-self: center; max-width: 92%; width: 100%; }
.msg.note .bubble { background: var(--note-bg); border: 1px solid var(--note-line); box-shadow: none; }
.msg.private .bubble { background: var(--priv-bg); border-color: var(--priv-line); }
.msg details.full { margin-top: .4rem; font-size: .85rem; }
.msg details.full .body { opacity: .8; max-height: 360px; overflow: auto; border-top: 1px solid rgba(127,127,127,.25); padding-top: .4rem; }
.msg-actions { display: flex; gap: .2rem; margin-top: .3rem; }
.msg-edit textarea { margin: .4rem 0; }
.mail-failed { color: var(--err); font-weight: 650; }
.mail-sent { color: var(--ok); }
.msg.out .mail-sent { color: inherit; opacity: .8; }
.mail-logged { color: var(--warn); }
.atts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.att { display: flex; align-items: center; gap: .45rem; border-radius: 10px; padding: .3rem .55rem; background: var(--surface); color: var(--text) !important; font-size: .84rem; max-width: 100%; text-decoration: none !important; border: 1px solid var(--line); }
.att img { width: 54px; height: 54px; object-fit: cover; border-radius: 7px; }
.att-tools { font-size: .75rem; }

.composer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin-top: .8rem; box-shadow: var(--shadow); }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; background: var(--sunken); padding: 4px; border-radius: 99px; width: fit-content; max-width: 100%; }
.tab { background: none; border: 0; padding: .4rem .9rem; font: inherit; font-size: .88rem; cursor: pointer; color: var(--muted); border-radius: 99px; font-weight: 600; white-space: nowrap; }
.tab.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
a.tab { text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.bc-tabs { margin-bottom: 1rem; }
.tpl-card.link { text-decoration: none; color: inherit; }
.tpl-card .tpl-actions { display: flex; gap: .5rem; margin-top: .5rem; font-size: .8rem; }
.tabpane { display: none; }
.tabpane.on { display: block; }
.tabpane textarea { margin-bottom: .6rem; }
.tabpane .row label { margin: 0; }
.tabpane .row select { width: auto; }
.tabpane > select { margin-bottom: .6rem; }
.recipients { margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.recipients label.check { margin: 0; }

/* Seitenleiste im Ticket */
ul.people { list-style: none; padding: 0; margin: 0 0 .5rem; }
ul.people li { padding: .6rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-items: start; }
ul.people li > .avatar { grid-row: span 3; margin-top: 2px; }
ul.people .tools { font-size: .78rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
ul.tasks { list-style: none; padding: 0; margin: .4rem 0 .6rem; }
ul.tasks li { border-bottom: 1px solid var(--line); }
.task-row { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; }
.task-check { flex: none; width: 20px; height: 20px; border: 2px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--primary-ink); cursor: pointer; font-size: .72rem; line-height: 1; padding: 0; display: grid; place-items: center; }
li.done .task-check { background: var(--s-erledigt); border-color: var(--s-erledigt); color: #fff; }
li.done .task-title { color: var(--muted); text-decoration: line-through; }
.task-title { flex: 1; font-size: .9rem; min-width: 0; }
.task-tools { visibility: hidden; display: flex; }
.task-row:hover .task-tools, .task-row:focus-within .task-tools { visibility: visible; }
.task-edit { display: flex; gap: .4rem; padding: .3rem 0 .5rem; }
/* „hidden“ gilt immer – auch wenn eine Klasse display setzt */
[hidden] { display: none !important; }
.add-task { display: flex; gap: .4rem; }
.add-task input { flex: 1; }
.kprog { height: 6px; background: var(--sunken); border-radius: 99px; overflow: hidden; margin: .4rem 0 .25rem; min-width: 60px; }
.kprog span { display: block; height: 100%; background: var(--s-erledigt); border-radius: 99px; }
.events { list-style: none; margin: 0; padding: 0; }
.events li { display: grid; grid-template-columns: 46px 1fr; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.events li:last-child { border-bottom: 0; }
.datebox { width: 46px; border-radius: 10px; overflow: hidden; text-align: center; background: var(--sunken); font-weight: 700; line-height: 1.1; }
.datebox .m { display: block; background: var(--accent); color: #fff; font-size: .62rem; padding: .15rem 0; text-transform: uppercase; letter-spacing: .05em; }
.datebox .d { display: block; font-size: 1.1rem; padding: .25rem 0; }
.events .src { font-size: .68rem; }
.event-links { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .8rem; margin-top: .25rem; }
.activity { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.activity li { padding: .35rem 0 .35rem .9rem; border-left: 2px solid var(--line); position: relative; color: var(--text-2); }
.activity li::before { content: ""; position: absolute; left: -5px; top: .65rem; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.activity time { display: block; color: var(--muted); font-size: .72rem; }
.inline-add { margin: .25rem 0; }
.people-pick:not(:empty), .picked:not(:empty) { margin: -.3rem 0 .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.pick { display: inline-flex; gap: .3rem; align-items: center; border: 1px solid var(--line); border-radius: 99px; padding: .2rem .7rem; font-size: .85rem; background: var(--surface-2); }
.pick button { background: none; border: 0; cursor: pointer; color: var(--muted); }
.suggest { position: absolute; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 280px; overflow: auto; min-width: 280px; }
.suggest div { padding: .5rem .7rem; cursor: pointer; font-size: .88rem; }
.suggest div:hover { background: var(--hover); }
.modal-form { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem; margin: .5rem 0; background: var(--surface-2); }
.repeat-opts[hidden] { display: none; }

/* Textvorlagen, Hilfe */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.tpl-card { text-align: left; border: 2px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: .7rem .8rem; cursor: pointer; font: inherit; color: var(--text); display: flex; flex-direction: column; gap: .25rem; transition: border-color .12s, transform .12s; }
.tpl-card:hover { border-color: var(--text-2); transform: translateY(-1px); }
.tpl-card.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--hover); }
.tpl-card span { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.tpl-card.blank { border-style: dashed; }
.step-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: .75rem; font-weight: 700; margin-right: .2rem; }
.step-no.inv { background: var(--primary-ink); color: var(--primary); }
.ph-chip { border: 1px dashed var(--line-2); background: var(--surface-2); color: var(--link); font-family: "Cascadia Mono", Consolas, monospace; font-size: .78rem; padding: .12rem .45rem; border-radius: 6px; cursor: pointer; }
.ph-chip:hover { border-style: solid; border-color: var(--link); }
.help-card summary { cursor: pointer; }
.help-steps { padding-left: 1.2rem; margin: .4rem 0 1rem; }
.help-steps li { margin-bottom: .45rem; }
.ph-example { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .8rem; white-space: pre-wrap; font-family: var(--font); font-size: .86rem; margin: .3rem 0; }
.ph-table td, .ph-table th { padding: .4rem .6rem; }
.tpl-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .8rem; white-space: pre-wrap; font-size: .86rem; min-height: 4rem; }

.link-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--hover); }
details.version { border-bottom: 1px solid var(--line); padding: .45rem 0; }
details.version summary { font-size: .88rem; }
ul.diff { list-style: none; padding: 0; margin: .4rem 0; }
ul.diff .add { color: var(--ok); } ul.diff .del { color: var(--err); text-decoration: line-through; }

/* Handwerker-Vorgänge */
.seg-opt { margin: 0; cursor: pointer; }
.seg-opt span { display: inline-block; padding: .38rem .9rem; border-radius: 99px; font-weight: 600; font-size: .88rem; color: var(--text-2); }
.seg-opt input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
/* Aktualisieren & Versionen */
.reload-btn { background: none; border: 1px solid #3a3f48; color: var(--header-ink); width: 34px; height: 34px; border-radius: 99px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.reload-btn:hover { background: var(--header-hover); }
.reload-btn:active svg { transform: rotate(180deg); transition: transform .3s; }
.nav-version { display: block; font-size: .72rem; color: var(--muted); padding: .5rem .8rem; text-decoration: none; }
.nav-version:hover, .nav-version.active { color: var(--text); }
.update-pkg.newer { border: 2px solid var(--ok); }
.version-entry.current { border: 2px solid var(--ok); }
.version-entry h3 { margin: 0 0 .3rem; }
.version-entry ul { margin: 0; padding-left: 1.2rem; }
/* Terminübersicht */
.agenda-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.agenda-filters select { width: auto; }
.ag-day { padding: .7rem 1rem .5rem; margin-bottom: .6rem; }
.ag-day h3 { margin: 0 0 .5rem; font-size: 1rem; }
.ag-day.today { border: 2px solid var(--primary); }
.ag-day.weekend h3 { color: var(--muted); }
.ag-overdue { border: 2px solid var(--err); background: var(--err-bg); }
.ag-overdue h3 { color: var(--err); }
.ag-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; border-left: 4px solid var(--line-2); margin-bottom: .3rem; background: var(--surface); }
.ag-item:hover { background: var(--hover); }
.ag-item.k-termin { border-left-color: var(--s-neu); }
.ag-item.k-handwerker { border-left-color: var(--s-handwerker); }
.ag-item.k-frist { border-left-color: var(--p-hoch); }
.ag-item.k-turnus { border-left-color: var(--s-wartet); }
.ag-item.k-notiz { border-left-color: var(--s-offen); }
.ag-time { font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; }
.ag-body { display: flex; flex-direction: column; min-width: 0; }
.ag-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-kind { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; }
.ag-sub { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-who { display: flex; gap: 2px; }
@media (max-width: 560px) { .ag-item { grid-template-columns: 1fr auto; } .ag-time { grid-column: 1 / -1; } }
.craft-info { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .82rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .4rem .6rem; margin: .35rem 0 .2rem; }
.reply-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .8rem; margin: .5rem 0; font-size: .85rem; }
.reply-preview details { margin-top: .3rem; }
.reply-preview .rp-body { white-space: pre-wrap; padding: .4rem .6rem; background: var(--surface); border-radius: 6px; margin-top: .3rem; }
.quick-new { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: .7rem .8rem; margin: .4rem 0 .6rem; }
/* Melder/in */
.reporter-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .35rem; font-size: .9rem; }
.rep-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 99px; background: var(--sunken); color: var(--text); text-decoration: none; font-weight: 600; font-size: .85rem; }
.rep-chip:hover { background: var(--hover); }
fieldset.reporter { background: var(--surface-2); }
fieldset.reporter .combo-list { top: calc(100% + 2px); }
.reporter-known { color: var(--ok); margin: 0; }
/* Ticket: „So steht's“ */
.overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.ov-tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ov-tile .btn, .ov-tile form { align-self: flex-start; margin-top: .45rem; }
.ov-photo { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .45rem; }
.ov-photo select { flex: 1 1 160px; min-width: 0; margin: 0; font-size: .85rem; padding: .35rem .5rem; }
.ov-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.ov-btns .btn, .ov-btns form { margin-top: 0; }
.no-recipient { background: var(--warn-bg); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.ov-next { background: var(--surface); border: 2px solid var(--primary); box-shadow: var(--shadow); }
.ov-label { font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ov-main { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .4rem; line-height: 1.3; overflow-wrap: anywhere; }
.ov-main a { color: inherit; }
.ov-sub { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.ov-bad, .ov-sub.ov-bad, span.ov-bad { color: var(--err); font-weight: 700; }
.ov-warn, span.ov-warn { color: var(--warn); font-weight: 700; }
.ov-ok { color: var(--text-2); }
@media (max-width: 1100px) { .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .overview { grid-template-columns: 1fr; } .ov-next { order: -1; } }
/* Auswahl mit Suchfeld */
.combo { position: relative; display: block; }
.combo-select { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; left: 50%; bottom: 0; }
.combo-input { width: 100%; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .25rem; }
.combo-list[hidden] { display: none; }
.combo-item { padding: .45rem .6rem; border-radius: 6px; cursor: pointer; font-size: .9rem; color: var(--text); font-weight: 400; }
.combo-item:hover, .combo-item.act { background: var(--hover); }
.combo-item.sel { font-weight: 700; }
.combo-none { padding: .5rem .6rem; color: var(--muted); font-size: .88rem; }
/* Neues Ticket: Schritte, Pflichtfelder */
/* Neues Ticket: Eingang über · Datum (mit Wochentag) · Uhrzeit */
.intake-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.date-wd { display: flex; align-items: center; gap: .6rem; }
.date-wd input { flex: 1; }
.date-wd b { min-width: 6.5em; font-weight: 600; color: var(--text-2); font-size: .9rem; }
.time-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.time-row input[type=time] { flex: 1; min-width: 110px; }
.time-row input[type=time]:disabled { opacity: .4; }
.time-row .check { margin: 0; white-space: nowrap; }
@media (max-width: 760px) { .intake-row { grid-template-columns: 1fr; } }
/* Pflichtfeld-Markierung: kleines rotes Sternchen, kein Kasten */
.req-mark { color: var(--p-hoch); font-weight: 600; font-size: .9em; margin-left: 1px; background: none; border: 0; padding: 0; box-shadow: none; }
legend .muted, legend [data-rep-hint] { text-transform: none; letter-spacing: 0; font-weight: 400; }
.req-legend { font-size: .8rem; }
.req-legend { font-size: .85rem; color: var(--muted); }
.ticket-new { display: flex; flex-direction: column; gap: 1rem; max-width: 980px; }
.ticket-new .card { margin: 0; }
.new-step h3 { display: flex; align-items: center; gap: .5rem; margin-top: 0; }
.new-step .opt { font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--sunken); border-radius: 99px; padding: .1rem .5rem; }
.req-field input { font-size: 1.05rem; padding: .7rem .8rem; border: 2px solid var(--line-2); }
.req-field input:focus { border-color: var(--focus); }
.req-field input:user-invalid { border-color: var(--accent); background: var(--accent-bg); }
.new-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.new-more > summary::-webkit-details-marker { display: none; }
.new-more > summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.new-more[open] > summary::after { content: '▴'; }
.submit-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.submit-bar .btn { font-size: 1rem; padding: .65rem 1.3rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.3rem 0 .7rem; }
.fav-list { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .3rem .6rem; }
.fav-list label[hidden] { display: none; }
/* Antworten / Notiz / Handwerker: aktiver Reiter deutlich gefüllt */
.compose-tabs { width: 100%; border-radius: var(--radius-sm); padding: 5px; gap: 5px; }
.compose-tabs .tab { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .9rem; font-size: .95rem; border-radius: 7px; color: var(--text-2); }
.compose-tabs .tab:hover { background: var(--surface); color: var(--text); }
.compose-tabs .tab.on { background: var(--primary); color: var(--primary-ink); box-shadow: var(--shadow); }
/* Art der Handwerker-Anfrage als große Karten */
.req-types-title { font-weight: 700; margin: .2rem 0 .45rem; }
.req-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.rq-pick { margin: 0; cursor: pointer; }
.rq-pick input { position: absolute; opacity: 0; pointer-events: none; }
.rt-box { display: flex; align-items: center; gap: .6rem; height: 100%; padding: .7rem .8rem; border: 2px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .12s, background .12s; }
.rq-pick:hover .rt-box { border-color: var(--text-2); }
.rt-no { flex: none; width: 28px; height: 28px; border-radius: 99px; background: var(--sunken); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.rt-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rt-txt strong { font-size: 1rem; }
.rt-txt small { color: var(--muted); font-size: .78rem; }
.rt-check { margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 99px; border: 2px solid var(--line-2); color: transparent; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.rq-pick input:checked + .rt-box { border-color: var(--primary); background: var(--hover); box-shadow: 0 0 0 3px var(--sunken); }
.rq-pick input:checked + .rt-box .rt-no, .rq-pick input:checked + .rt-box .rt-check { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.rq-pick input:focus-visible + .rt-box { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 760px) { .req-types { grid-template-columns: 1fr; } .compose-tabs .tab { font-size: .85rem; padding: .55rem .4rem; } }
.req { border: 1px solid var(--line); border-left: 4px solid var(--line-2); border-radius: var(--radius-sm); padding: .6rem .7rem; margin-bottom: .6rem; background: var(--surface); }
.req.req-angebot { border-left-color: var(--s-neu); }
.req.req-auftrag { border-left-color: var(--s-handwerker); }
.req.req-reklamation { border-left-color: var(--p-hoch); }
.req.closed { opacity: .7; }
.req-type { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.req-status { font-size: .74rem; font-weight: 650; padding: .1rem .5rem; border-radius: 99px; background: var(--sunken); }
.req-amount { color: var(--text); }
.req-actions { margin-top: .4rem; gap: .35rem; }
.portal-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.portal-actions label { margin: 0; }
.portal-actions .opt { display: block; border: 2px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .7rem; cursor: pointer; font-weight: 600; color: var(--text); font-size: .9rem; }
.portal-actions input:checked + .opt { border-color: var(--primary); background: var(--hover); }

/* ---------- Board ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: .9rem; overflow-x: auto; padding-bottom: .6rem; align-items: start; }
.bcol { background: var(--sunken); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 250px); min-height: 220px; border-top: 4px solid var(--line-2); }
.bcol[data-status=neu] { border-top-color: var(--s-neu); } .bcol[data-status=offen] { border-top-color: var(--s-offen); }
.bcol[data-status=wartet] { border-top-color: var(--s-wartet); } .bcol[data-status=handwerker] { border-top-color: var(--s-handwerker); } .bcol[data-status=nacharbeit] { border-top-color: var(--s-nacharbeit); }
.bcol[data-status=erledigt] { border-top-color: var(--s-erledigt); }
.bcol > header { display: flex; justify-content: space-between; align-items: center; padding: .7rem .8rem .4rem; }
.bcol > footer { padding: .3rem .8rem .6rem; }
.bcol-body { padding: .5rem .6rem .7rem; display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; flex: 1; min-height: 80px; border-radius: 0 0 var(--radius) var(--radius); }
.bcol-body.drag-over { background: var(--hover); outline: 2px dashed var(--line-2); outline-offset: -6px; }
.kcard { background: var(--surface); border-radius: 12px; padding: .7rem .8rem; cursor: grab; box-shadow: var(--shadow); border-left: 4px solid transparent; }
.kcard:hover { box-shadow: var(--shadow-lg); }
.kcard.dragging { opacity: .45; }
.kcard.prio-dringend, .kcard.prio-hoch { border-left-color: var(--p-hoch); }
.kcard.prio-normal { border-left-color: var(--p-normal-fill); }
.kcard.prio-niedrig { border-left-color: var(--p-niedrig); }
.kcard.overdue { background: color-mix(in srgb, var(--accent-bg) 60%, var(--surface)); }
.kcard-top { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.kcard-top .avatar { margin-left: auto; }
.kcard-title { display: block; font-weight: 650; text-decoration: none; color: var(--text); margin-bottom: .2rem; line-height: 1.3; }
.kcard-foot { margin-top: .4rem; }
.kmove { display: none; margin-top: .45rem; padding: .3rem .5rem; font-size: .85rem; }
@media (max-width: 760px), (pointer: coarse) { .kmove { display: block; } }
.due-over { color: var(--accent); font-weight: 650; }

/* ---------- Karteien ---------- */
.record-head { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.cover-upload { position: relative; margin: 0; overflow: hidden; }
.cover-btn { position: absolute; left: 6px; right: 6px; bottom: 6px; margin: 0; display: flex; align-items: center; justify-content: center; gap: .3rem; font-size: .72rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.6); border-radius: 6px; padding: .25rem .3rem; cursor: pointer; opacity: .9; }
.cover-upload:hover .cover-btn { opacity: 1; background: rgba(0,0,0,.8); }
.unit-thumbs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .5rem; }
.unit-thumbs img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.record-head .cover { width: 120px; height: 90px; border-radius: var(--radius-sm); background: var(--sunken) center/cover no-repeat; flex: none; display: grid; place-items: center; color: var(--muted); }
.record-head h1 { margin: 0 0 .2rem; }
.rtabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; overflow-x: auto; }
.rtabs a { padding: .6rem .9rem; color: var(--muted); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center; }
.rtabs a.on { color: var(--text); border-bottom-color: var(--text); }
.rtabs a .badge { font-size: .66rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.gallery figure { margin: 0; background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: zoom-in; background: var(--sunken); }
.gallery figcaption { padding: .45rem .55rem; font-size: .8rem; }
.gallery figcaption input { padding: .3rem .45rem; font-size: .8rem; }
.gallery .is-cover { outline: 3px solid var(--s-erledigt); }
.doclist li { display: flex; align-items: center; gap: .6rem; }
.doclist li .grow { flex: 1; min-width: 0; }
.fields-table { width: 100%; border-collapse: collapse; }
.fields-table td { padding: .3rem .2rem; vertical-align: top; }
.fields-table td:first-child { width: 38%; }
.fields-view dt { color: var(--muted); font-size: .8rem; }
.fields-view dd { margin: 0 0 .5rem; font-weight: 550; overflow-wrap: anywhere; }
.note-card { background: var(--note-bg); border: 1px solid var(--note-line); border-radius: var(--radius-sm); padding: .7rem .85rem; margin-bottom: .6rem; }
.note-card.pinned { border-width: 2px; }
.note-card .meta { font-size: .75rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; padding: 1rem; }
.lightbox img { display: block; width: auto; height: auto; max-width: min(92vw, 1600px); max-height: 86vh; max-height: 86dvh; object-fit: contain; border-radius: 8px; background: #fff; }
.lightbox-close { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 1.4rem; line-height: 1; cursor: pointer; }
body.lightbox-open { overflow: hidden; }
.upload-drop { border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 1rem; text-align: center; background: var(--surface-2); }
.unit-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem; margin-bottom: .7rem; background: var(--surface); }
.unit-card header { display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; }
.person-row { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; flex-wrap: wrap; }
.person-row .grow { flex: 1; min-width: 160px; }

/* ---------- Meine Notizen ---------- */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.pnote { background: var(--surface); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; }
.pnote.due { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.pnote.pinned { background: var(--note-bg); border-color: var(--note-line); }
.pnote h3 { margin: 0; }
.pnote .body { color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.pnote .tools { display: flex; gap: .2rem; margin-top: auto; flex-wrap: wrap; }

/* ---------- Diverses ---------- */
.sync-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; }
.sync-bar { height: 12px; background: var(--sunken); border-radius: 99px; overflow: hidden; margin-bottom: .4rem; }
.sync-bar span { display: block; height: 100%; background: var(--text); border-radius: 99px; transition: width .4s ease; }
.sync-box.ok .sync-bar span { background: var(--ok); }
.sync-box.err { border-color: var(--err); color: var(--err); }
ol.stages { list-style: none; display: flex; padding: 0; margin: .8rem 0 1rem; }
ol.stages li { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; font-size: .8rem; color: var(--muted); }
ol.stages li::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
ol.stages li:first-child::before { display: none; }
ol.stages li.done::before, ol.stages li.current::before { background: var(--s-erledigt); }
ol.stages .dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; font-weight: 700; position: relative; z-index: 1; margin-bottom: .3rem; }
ol.stages li.done .dot { background: var(--s-erledigt); border-color: var(--s-erledigt); color: #fff; }
ol.stages li.current .dot { border-color: var(--s-neu); color: var(--s-neu); box-shadow: 0 0 0 4px var(--s-neu-bg); }
ol.stages li.current { color: var(--text); font-weight: 650; }
.pw-wrap { position: relative; display: block; margin-top: .3rem; }
.pw-wrap input { padding-right: 2.7rem; margin-top: 0; }
.pw-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 30px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.pw-eye:hover { color: var(--text); background: var(--hover); }
.pw-eye svg { width: 18px; height: 18px; }
dl.summary { display: grid; grid-template-columns: 170px 1fr; gap: .4rem 1rem; margin: 0 0 .8rem; }
dl.summary dt { color: var(--muted); font-size: .86rem; }
dl.summary dd { margin: 0; overflow-wrap: anywhere; }
.profile-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }

/* Öffentliche Seiten */
body.public { background: var(--bg); }
.public-head { background: var(--header-bg); padding: .9rem 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.public-head .brand img { height: 42px; }
body.public .container { padding-top: 1.6rem; }
.card.login { max-width: 420px; margin: 8vh auto 2rem; }
.public-foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 1rem 16px 2rem; }
body.public .timeline .ev, body.public .ev { border-radius: 16px; padding: .8rem 1rem; background: var(--surface); box-shadow: var(--shadow); }
body.public .ev.in { background: var(--out-bg); color: var(--out-ink); margin-left: 10%; }
body.public .ev.out { background: var(--in-bg); margin-right: 10%; }
body.public .ev header { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .3rem; font-size: .88rem; }
body.public .ev .meta { margin-left: auto; opacity: .7; font-size: .78rem; }
body.public .timeline { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }

/* Kundenseiten (IDEE.Portal, Angebot): wie die Homepage – weiß, schwarz, Schrift Archivo, Knöpfe leicht abgerundet */
@font-face { font-family: "Archivo"; src: url("archivo-variable-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
body.kunde {
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f6f6f4; --sunken: #f2f2f0;
  --text: #151515; --text-2: #3b3b39; --muted: #62625e; --line: #e4e4e1; --line-2: #cfcfca;
  --primary: #151515; --primary-ink: #ffffff; --primary-hover: #3a3a3a; --link: #151515; --focus: #151515;
  --header-bg: #ffffff; --header-ink: #151515;
  --shadow: none; --radius: 12px; --radius-sm: 8px;
  font-size: 16px;
}
body.kunde .public-head { border-bottom: 1px solid var(--line); padding: .7rem 16px; }
body.kunde .public-head .brand img { height: 46px; }
body.kunde .brand-sub, body.kunde .brand .brand-sub { display: inline-block; border: 0; padding: 3px 10px; margin-left: .2rem; border-radius: 99px; background: #151515; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; white-space: nowrap; }
/* Schrift so groß wie auf der Homepage: rem-Größen wachsen mit (18 statt 16 px) */
html.kunde { font-size: 18px; }
body.kunde { font-size: 1rem; }
body.kunde input, body.kunde select, body.kunde textarea { font-size: 1rem; }
body.kunde label, body.kunde .req-note { font-size: 17px; }
body.kunde small, body.kunde .small, body.kunde .muted.small, body.kunde .flash { font-size: 16px; }
body.kunde legend { font-size: 14px; }
/* Weg zum Vertrag: aktueller Schritt schwarz statt gelb/blau, gut lesbar */
body.kunde { --dl-sie: #151515; --dl-sie-ink: #151515; --dl-sie-bg: #ececea; --dl-wir: #4a4a47; --dl-wir-ink: #4a4a47; --dl-wir-bg: #ececea; }
body.kunde .dl-way { border: 1px solid var(--line); }
body.kunde .dl-way-steps li.cur .dl-way-n, body.kunde .dl-way-steps li.cur.w-sie .dl-way-n { box-shadow: 0 0 0 5px rgba(0,0,0,.12); }
body.kunde .dl-way-t b { font-size: 16px; }
body.kunde .dl-way-steps li .dl-way-who, body.kunde .dl-way-pill { font-size: 13px; }
body.kunde .dl-way-now b { font-size: 17px; }
body.kunde .public-home { color: var(--text); border: 2px solid var(--text); background: transparent; border-radius: 8px; font-weight: 600; }
body.kunde .public-home:hover { background: var(--sunken); }
body.kunde h1, body.kunde h2, body.kunde h3 { font-weight: 700; font-stretch: 82%; letter-spacing: -.02em; }
body.kunde h1 { font-size: 2rem; line-height: 1.05; }
body.kunde .card { border-color: var(--line); }
body.kunde .btn.primary { background: linear-gradient(#2c2c2a, #151515); border-color: #151515; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 2px rgba(0,0,0,.25), 0 3px 8px -3px rgba(0,0,0,.35); }
body.kunde .btn.primary:hover { background: linear-gradient(#3a3a38, #222220); }
body.kunde .btn { border-radius: 8px; }
body.kunde .public-foot { color: var(--muted); }
body.kunde .public-teilen { display: flex; justify-content: center; padding: 1.5rem 16px .5rem; } /* „Diese Seite teilen“ über dem Fuß, wie auf der Homepage */

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .ticket-layout { grid-template-columns: minmax(0, 1fr); }
  .top-search { display: none; }
  .search-toggle { display: inline-grid; place-items: center; }
  body.search-open .top-search { display: flex; position: fixed; top: 58px; left: 0; right: 0; max-width: none; margin: 0; border-radius: 0; z-index: 70; padding: .4rem 16px; min-height: 52px; }
  body.search-open .search-drop, body.search-open .search-tips { position: fixed; top: 112px; left: 8px; right: 8px; min-width: 0; max-height: calc(100vh - 130px); }
  body.search-open .search-kbd { display: none; }
}
@media (max-width: 900px) {
  .grid2, .grid3, .grid-side { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .sidenav { position: fixed; top: 58px; left: 0; bottom: 0; height: auto; z-index: 40; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow-lg); width: 290px; }
  body.nav-open .sidenav { transform: none; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 58px 0 0 0; background: rgba(0,0,0,.35); z-index: 35; }
  .brand .brand-sub { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .container { padding: 1rem 12px 3rem; }
  h1 { font-size: 1.3rem; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .row { justify-content: space-between; }
  .me .badge { display: none; }
  .theme-switch { display: none; }
  /* Filter auf dem Handy einklappbar, damit nichts überlagert */
  .filter-box > summary { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); list-style: none; margin: 0 0 .6rem; }
  .filter-box > summary::-webkit-details-marker { display: none; }
  .filters { flex-direction: column; gap: .45rem; }
  .filters input[type=search], .filters select { width: 100%; max-width: none; flex: none; }
  .filters .btn { width: 100%; }
  input, select, textarea { font-size: 16px; }
  table.list.cards-mobile thead { display: none; }
  table.list.cards-mobile, table.list.cards-mobile tbody, table.list.cards-mobile tr, table.list.cards-mobile td { display: block; width: 100%; }
  table.list.cards-mobile tr { border-bottom: 1px solid var(--line); padding: .7rem .85rem; }
  table.list.cards-mobile td { border: 0; padding: .12rem 0; }
  table.list.cards-mobile td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .8rem; }
  table.list.cards-mobile td.hide-mobile { display: none; }
  .board { grid-auto-columns: 86vw; scroll-snap-type: x mandatory; }
  .bcol { scroll-snap-align: start; max-height: none; }
  .msg, .msg.note { max-width: 100%; }
  .msg .avatar { display: none; }
  .composer .row { flex-direction: column; align-items: stretch; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .steps form { min-width: calc(50% - 6px); }
  .public-head .brand img { height: 34px; }
  .card.login { margin-top: 2rem; }
  dl.summary { grid-template-columns: 1fr; }
  dl.summary dd { margin-bottom: .4rem; }
  .record-head .cover { width: 100%; height: 160px; }
}

/* Zuständig intern/extern */
.resp { display: grid; gap: .5rem; margin-bottom: .8rem; }
.resp-label { font-size: .88rem; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--sunken); padding: 4px; border-radius: 99px; width: fit-content; max-width: 100%; }
.seg label { margin: 0; display: flex; align-items: center; gap: .35rem; padding: .35rem .9rem; border-radius: 99px; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--muted); }
.seg label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg input { margin: 0; }
.ext-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 .8rem; }
@media (max-width: 700px) { .ext-grid { grid-template-columns: 1fr; } }

/* Aktivität als Knopf hinter den Status-Stufen */
.steps .act-btn { flex: 0 0 auto; width: auto; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); flex-wrap: wrap; }
.steps .act-btn.warn { border-color: var(--warn); }
.act-n { background: var(--sunken); border-radius: 99px; padding: 0 .45rem; font-size: .75rem; }
.act-mail { display: inline-flex; align-items: center; gap: .25rem; font-weight: 550; color: var(--muted); }
.act-btn.warn .act-mail { color: var(--warn); font-weight: 650; }
.act-panel { margin-top: .7rem; padding: .8rem 1rem; background: var(--sunken); border-radius: var(--radius-sm); max-height: 420px; overflow: auto; }
.act-mailbox { padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--surface); margin-bottom: .7rem; border-left: 4px solid var(--ok); }
.act-mailbox.warn { border-left-color: var(--warn); }
.act-mails { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .25rem; }
.mail-none { color: var(--warn); }

/* Resttage bis zur Frist */
.due-chip { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .76rem; font-weight: 650; white-space: nowrap; line-height: 1.5; }
.due-chip.d-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.due-chip.d-soon { background: color-mix(in srgb, #f5c400 28%, transparent); color: var(--p-normal-ink, #7a5d00); }
.due-chip.d-today { background: #f08c00; color: #fff; }
.due-chip.d-over { background: var(--err); color: #fff; }
.due-chip.d-done { background: var(--sunken); color: var(--muted); font-weight: 550; }
/* Eckdaten-Panel */
.panel h3 { display: flex; align-items: center; gap: .4rem; }
.panel-tools { margin-left: auto; font-weight: 500; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0; font-size: .88rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.eck-edit { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }

.sync-hint { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border-left: 4px solid var(--warn); padding: .55rem .8rem; border-radius: var(--radius-sm); margin: 0 0 1rem; }
.ok-text { color: var(--ok); font-weight: 600; }

/* Ticketkopf aufgeräumt: Titel + Aktionen, Eckdaten-Leiste, Melder */
.th-top { display: flex; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; align-items: flex-start; }
.th-title { min-width: 0; flex: 1 1 420px; }
.th-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.danger-text { color: var(--err) !important; }
.th-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center; padding: .7rem .9rem; background: var(--sunken); border-radius: var(--radius-sm); }
.fact { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fact .fl { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
.fact .fv { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .9rem; font-weight: 550; }
.fact .fv form.inline { display: inline; }
.fact.wide { flex: 1 1 260px; }
.fact-edit { margin-left: auto; align-self: center; }
.ticket-head .eck-edit { margin: 0; padding: .8rem .9rem; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); border-top: 1px dashed var(--line-2); }
.eck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 .8rem; }
.th-reporter .reporter-line { margin-top: 0; }
/* Seitenleiste: Panels mit festem Platz und Aktion im Kopf */
.sidebar .panel h3 { margin: 0 0 .7rem; font-size: .95rem; }
.sidebar .panel-tools .link { font-size: .82rem; }
.panel-more { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .fact-edit { margin-left: 0; } .th-facts { gap: .5rem 1rem; } }
/* So steht's: Als Nächstes zuerst, Zuständig/Frist stehen jetzt in der Eckdaten-Leiste */
.ticket-head .overview { grid-template-columns: 1.3fr 1fr 1fr; margin-top: 0; }
.ticket-head .overview .ov-next { order: -1; }
@media (max-width: 900px) { .ticket-head .overview { grid-template-columns: 1fr; } }
.eck-prio { grid-column: span 2; min-width: 0; }
@media (max-width: 700px) { .eck-prio { grid-column: auto; } }

/* Sprungleiste: nur wenn die Panels unter den Verlauf rutschen (Tablet/Handy) */
.jumpbar { display: none; }
@media (max-width: 1100px) {
  .jumpbar { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.2rem; padding: .1rem .2rem; }
  .jumpbar::-webkit-scrollbar { display: none; }
  .jumpbar a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .75rem; border-radius: 99px; background: var(--sunken); color: var(--text); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .jumpbar a span { color: var(--muted); font-weight: 550; }
  [id="verlauf"], [id="antwort"], .sidebar .panel { scroll-margin-top: 70px; }
}
/* Handy: Ticketkopf kompakt */
@media (max-width: 700px) {
  .ticket-head { gap: .7rem; }
  .ticket-head h1 { font-size: 1.25rem; line-height: 1.3; }
  .th-top { flex-direction: column; }
  .th-title { flex-basis: auto; }
  .th-actions { flex-wrap: nowrap; width: 100%; }
  .th-actions .btn.primary { flex: 1; justify-content: center; }
  .th-actions .lbl { display: none; }
  .th-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; padding: .7rem; }
  .th-facts .fact:first-child, .th-facts .fact.wide, .th-facts .fact-edit { grid-column: 1 / -1; }
  .fact-edit { justify-self: start; }
  /* Status als eine wischbare Zeile statt drei Zeilen */
  .ticket-head .steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ticket-head .steps::-webkit-scrollbar { display: none; }
  .ticket-head .steps form { flex: 0 0 auto; min-width: 0; }
  .ticket-head .steps button { white-space: nowrap; padding: .5rem .8rem; }
  .ticket-head .steps .act-btn { flex-wrap: nowrap; white-space: nowrap; }
  /* Antworten / Notiz / Handwerker: Reiter passen in die Breite */
  .compose-tabs .tab { font-size: .8rem; padding: .55rem .3rem; gap: .25rem; min-width: 0; }
  .compose-tabs .tab svg { display: none; }
}.lbl-short { display: none; }
@media (max-width: 700px) { .lbl-long { display: none; } .lbl-short { display: inline; } }

/* ================= Ticket – neues Design (Akten-Stil) ================= */
.tk { --st: var(--s-neu); --st-bg: var(--s-neu-bg); }
.tk.st-offen { --st: var(--s-offen); --st-bg: var(--s-offen-bg); }
.tk.st-wartet { --st: var(--s-wartet); --st-bg: var(--s-wartet-bg); }
.tk.st-handwerker { --st: var(--s-handwerker); --st-bg: var(--s-handwerker-bg); }
.tk.st-nacharbeit { --st: var(--s-nacharbeit); --st-bg: var(--s-nacharbeit-bg); }
.tk.st-erledigt { --st: var(--s-erledigt); --st-bg: var(--s-erledigt-bg); }
.tk.st-geschlossen { --st: var(--s-geschlossen); --st-bg: var(--s-geschlossen-bg); }

/* Kopf: Statusfarbe als Rand, klare Hierarchie */
.tk.ticket-head { position: relative; overflow: hidden; border: 1px solid var(--line); box-shadow: none; padding: 1.3rem 1.5rem 1.1rem 1.75rem; gap: 1rem; }
.tk.ticket-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--st); }
.tk .meta { font-size: .8rem; gap: .2rem .8rem; }
.tk h1 { font-size: 1.55rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 750; }
.tk .tk-no { display: flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 650; letter-spacing: .03em; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: .25rem; }
.tk .tk-st { background: var(--st-bg); color: var(--st); border-radius: 99px; padding: .1rem .6rem; font-size: .72rem; font-weight: 750; letter-spacing: .02em; }
.tk .th-actions .btn { border-radius: 10px; }
/* Eckdaten als ruhige Zeile mit Trennstrichen */
.tk .th-facts { background: none; border-radius: 0; padding: .9rem 0 0; border-top: 1px solid var(--line); gap: .6rem 0; }
.tk .fact { padding: 0 1.3rem; border-left: 1px solid var(--line); }
.tk .fact:first-child { padding-left: 0; border-left: 0; }
.tk .fact .fl { font-size: .68rem; letter-spacing: .07em; }
.tk .fact .fv { font-size: .92rem; }
.tk .fact-edit { padding-left: 1rem; }
.tk .eck-edit { background: var(--surface-2); border-style: solid; border-color: var(--line); }

/* Status: Fortschrittslinie mit Punkten */
.tk .steps { gap: 0; align-items: flex-start; padding: .2rem 0 .1rem; flex-wrap: nowrap; }
.tk .steps form { flex: 1 1 0; min-width: 0; position: relative; }
.tk .steps form::before { content: ""; position: absolute; top: 12px; left: -50%; right: 50%; height: 2px; background: var(--line-2); }
.tk .steps form:first-child::before { display: none; }
.tk .steps form.done::before, .tk .steps form.current::before { background: var(--st); }
.tk .steps form button { position: relative; z-index: 1; background: none !important; box-shadow: none !important; color: var(--muted); flex-direction: column; gap: .4rem; padding: 0 .15rem; font-size: .76rem; font-weight: 600; border-radius: 0; line-height: 1.25; text-align: center; white-space: normal; }
.tk .steps form button svg { display: none; }
.tk .steps form button::before { content: ""; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); box-sizing: border-box; transition: transform .15s; }
.tk .steps form.done button::before { background: var(--st); border-color: var(--st); }
.tk .steps form.current button { color: var(--text); font-weight: 750; }
.tk .steps form.current button::before { width: 20px; height: 20px; margin-top: 2px; background: var(--st); border: 4px solid var(--st-bg); box-shadow: 0 0 0 1px var(--st); }
.tk .steps form button:hover { color: var(--text); }
.tk .steps form button:hover::before { transform: scale(1.15); }
.tk .steps .act-btn { flex: 0 0 auto; align-self: center; margin-left: 1rem; border-radius: 10px; background: var(--surface) !important; }

/* So steht's: eine Leiste statt drei Kästen */
.tk .overview { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tk .ov-tile { background: var(--surface); border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: .85rem 1rem; }
.tk .ov-tile.ov-next { border-left: 0; background: var(--st-bg); box-shadow: none; }
.tk .ov-next .ov-label { color: var(--st); }

/* Verlauf: Akte statt Chat – alles linksbündig, Art am farbigen Rand */
.tk .timeline { gap: .7rem; }
.tk .msg { max-width: 100%; align-self: stretch; flex-direction: row; align-items: flex-start; }
.tk .msg .bubble { box-shadow: none; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 4px 12px 12px 4px; background: var(--surface); color: var(--text); padding: .8rem 1rem; }
.tk .msg.in .bubble { border-left-color: var(--s-neu); }
.tk .msg.out .bubble { border-left-color: var(--text); background: var(--surface-2); color: var(--text); }
.tk .msg.out .bubble a { color: var(--link, inherit); }
.tk .msg.out .role { background: var(--sunken); color: var(--text-2); }
.tk .msg.out .mail-sent { color: var(--ok); opacity: 1; }
.tk .msg.note .bubble { background: var(--note-bg); border-color: var(--note-line); border-left-color: var(--warn); }
.tk .msg.private .bubble { background: var(--priv-bg); border-color: var(--priv-line); border-left-color: var(--s-offen); }
.tk .msg .who { margin-bottom: .4rem; }
.tk .msg .when { opacity: 1; color: var(--muted); }
.tk .tl-filter .seg { background: none; padding: 0; gap: .2rem; }

/* Antworten: Reiter mit Unterstrich, ruhiger Rahmen */
.tk .composer { box-shadow: none; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 1rem 1rem; }
.tk .compose-tabs { background: none; border-radius: 0; padding: 0; gap: 0; border-bottom: 1px solid var(--line); margin: 0 -1rem 1rem; width: calc(100% + 2rem); }
.tk .compose-tabs .tab { background: none; box-shadow: none; border-radius: 0; color: var(--muted); border-bottom: 2px solid transparent; padding: .8rem .6rem; }
.tk .compose-tabs .tab.on { background: none; color: var(--text); border-bottom-color: var(--text); box-shadow: none; }
.tk .compose-tabs .tab:hover { background: none; color: var(--text); }

/* Rechts: eine Spalte mit Abschnitten statt Einzelkästen */
.tk .sidebar { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 1.1rem; display: block; }
.tk .sidebar > .card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 1rem 0; margin: 0; border-top: 1px solid var(--line); }
.tk .sidebar > .card:first-child { border-top: 0; }
.tk .sidebar .panel h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 750; margin-bottom: .6rem; }
.tk .sidebar .panel h3 svg { width: 14px; height: 14px; }
.tk .sidebar .panel h3 .muted { color: var(--text); font-weight: 650; letter-spacing: 0; }
.tk .sidebar .panel-tools .link { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Handy */
@media (max-width: 700px) {
  .tk.ticket-head { padding: 1rem 1rem 1rem 1.2rem; }
  .tk h1 { font-size: 1.25rem; }
  .tk .th-facts { padding-top: .8rem; }
  .tk .fact { padding: 0; border-left: 0; }
  .tk .steps { overflow-x: auto; }
  .tk .steps form { flex: 0 0 84px; }
  .tk .steps .act-btn { margin-left: .5rem; }
  .tk .overview { border-radius: 10px; }
  .tk .ov-tile { border-left: 0; border-top: 1px solid var(--line); }
  .tk .ov-tile.ov-next { border-top: 0; }
  .tk .sidebar { padding: 0 1rem; }
  .tk .composer { padding: 0 .8rem .8rem; }
  .tk .compose-tabs { margin: 0 -.8rem .8rem; width: calc(100% + 1.6rem); }
}@media (max-width: 700px) { .tk .fact-edit { padding-left: 0; } }

/* Workflow oben im Ticketkopf */
.wf-bar { display: flex; flex-direction: column; gap: .6rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.wf-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.wf-title { display: inline-flex; align-items: center; gap: .4rem; font-weight: 750; font-size: .92rem; }
.wf-count { font-weight: 700; font-size: .85rem; color: var(--st, var(--text)); font-variant-numeric: tabular-nums; }
.wf-prog { flex: 1 1 120px; max-width: 320px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.wf-prog span { display: block; height: 100%; background: var(--st, var(--ok)); border-radius: 99px; }
.wf-toggle { margin-left: auto; }
.wf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wf-steps form { margin: 0; }
.wf-steps button { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; padding: .35rem .75rem .35rem .4rem; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); transition: border-color .15s, background .15s; }
.wf-steps button:hover { border-color: var(--text); color: var(--text); }
.wf-dot { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 750; background: var(--sunken); color: var(--muted); flex: 0 0 auto; }
.wf-steps .done button { background: transparent; border-color: transparent; color: var(--muted); }
.wf-steps .done .wf-name { text-decoration: line-through; text-decoration-color: var(--line-2); }
.wf-steps .done .wf-dot { background: var(--st, var(--ok)); color: #fff; }
.wf-steps .next button { border: 2px solid var(--st, var(--primary)); background: var(--st-bg, var(--surface)); color: var(--text); font-weight: 700; }
.wf-steps .next .wf-dot { background: var(--st, var(--primary)); color: #fff; }
.wf-edit { padding: .9rem 1rem; border: 1px dashed var(--line-2); border-radius: 12px; }
.wf-edit .tasks { margin-top: 0; }
@media (max-width: 700px) {
  .wf-bar { padding: .75rem; }
  .wf-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .wf-steps::-webkit-scrollbar { display: none; }
  .wf-steps button { white-space: nowrap; }
  .wf-toggle { margin-left: 0; }
}
/* ================= Dashboard / Übersicht ================= */
.db-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.db-head h1 { margin: 0; font-size: 1.7rem; letter-spacing: -.01em; }
.db-head p { margin: .2rem 0 0; }
.db-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.db-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; position: relative; overflow: hidden; transition: border-color .15s; }
.db-kpi:hover { border-color: var(--text); text-decoration: none; }
.db-kpi b { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.db-kpi span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.db-kpi.bad { border-left: 4px solid var(--err); } .db-kpi.bad b { color: var(--err); }
.db-kpi.warn { border-left: 4px solid var(--warn); } .db-kpi.warn b { color: var(--warn); }
.db-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.db-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; min-width: 0; }
.db-card > header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.db-card > header h2 { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); display: flex; align-items: center; gap: .4rem; font-weight: 750; }
.db-card > header a { font-size: .82rem; font-weight: 600; }
.db-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 1rem 0 .3rem; font-weight: 700; }
.db-list, .db-agenda { list-style: none; margin: 0; padding: 0; }
.db-list li + li, .db-agenda li + li { border-top: 1px solid var(--line); }
.db-list a, .db-agenda a { display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; color: var(--text); text-decoration: none; border-radius: 8px; }
.db-list a:hover, .db-agenda a:hover { background: var(--surface-2); text-decoration: none; }
.db-list.compact a { padding: .45rem .2rem; }
.db-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.db-main strong { font-size: .92rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-main small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: .25rem; }
.db-due { flex: 0 0 auto; min-width: 92px; text-align: right; }
.db-who, .db-count { flex: 0 0 auto; font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: .35rem; }
.db-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--sunken); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: 0 0 auto; }
.db-ico.due { background: var(--s-wartet-bg); color: var(--s-wartet); }
.db-date { width: 40px; flex: 0 0 auto; text-align: center; border-radius: 8px; background: var(--sunken); padding: .2rem 0; line-height: 1.1; }
.db-date b { display: block; font-size: 1.05rem; }
.db-date small { font-size: .66rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.db-date.today { background: var(--primary); color: var(--primary-ink); } .db-date.today small { color: inherit; opacity: .8; }
.db-empty { color: var(--muted); font-size: .88rem; margin: .3rem 0 .6rem; }
.db-statusbar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--sunken); }
.db-statusbar a { display: block; min-width: 6px; }
.db-statusbar .s-neu { background: var(--s-neu); } .db-statusbar .s-offen { background: var(--s-offen); } .db-statusbar .s-wartet { background: var(--s-wartet); }
.db-statusbar .s-handwerker { background: var(--s-handwerker); } .db-statusbar .s-nacharbeit { background: var(--s-nacharbeit); } .db-statusbar .s-erledigt { background: var(--s-erledigt); } .db-statusbar .s-geschlossen { background: var(--s-geschlossen); }
.db-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; font-size: .82rem; }
.db-legend a { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-2); text-decoration: none; }
.db-legend b { color: var(--text); }
.db-mini { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.db-mini.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: .7rem; }
.db-mini a { display: flex; flex-direction: column; padding: .6rem .7rem; border-radius: 10px; background: var(--sunken); color: var(--text); text-decoration: none; min-width: 0; }
.db-mini a:hover { background: var(--line); text-decoration: none; }
.db-mini b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.db-mini span { font-size: .74rem; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.db-search input { width: 100%; margin: 0; }
.db-card > .btn { margin-top: .6rem; }
@media (max-width: 1200px) { .db-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .db-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .db-head h1 { font-size: 1.35rem; }
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .db-kpi { padding: .7rem .8rem; } .db-kpi b { font-size: 1.4rem; }
  .db-mini.four { grid-template-columns: 1fr 1fr; }
  .db-list .prio { display: none; }
  .db-due { min-width: 0; }
}
/* Benutzer: Tabelle volle Breite, Formular darunter */
.users-page { display: flex; flex-direction: column; gap: 1rem; }
.user-form { max-width: 760px; scroll-margin-top: 80px; }
.users-table td { vertical-align: top; }
.db-h2-sub { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); font-size: .78rem; }

.mail-blocked { color: var(--muted); font-weight: 600; }
.ext-off { display: flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; color: var(--muted); }

/* ================= Posteingang ================= */
.db-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.inbox-restore { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: var(--s-wartet-bg); border: 1px solid var(--s-wartet); }
.inbox-search input { margin: 0; min-width: 240px; }
.inbox-list { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.inbox-row { display: grid; grid-template-columns: 34px minmax(140px, 220px) minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .65rem 1rem; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); }
.inbox-row:first-child { border-top: 0; }
.inbox-row:hover { background: var(--surface-2); text-decoration: none; }
.inbox-row.unread { box-shadow: inset 3px 0 0 var(--s-neu); }
.inbox-row.unread .inbox-subj strong, .inbox-row.unread .inbox-from strong { font-weight: 750; }
.inbox-row:not(.unread) { color: var(--text-2); }
.inbox-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--s-neu-bg); color: var(--s-neu); display: inline-flex; align-items: center; justify-content: center; }
.inbox-ico.replied { background: var(--s-erledigt-bg); color: var(--s-erledigt); }
.inbox-from, .inbox-subj { display: flex; flex-direction: column; min-width: 0; }
.inbox-from strong, .inbox-subj strong { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: .3rem; }
.inbox-from small, .inbox-subj small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; font-size: .78rem; white-space: nowrap; }
.inbox-meta time { color: var(--muted); font-weight: 600; }
.reply-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 650; color: var(--s-erledigt); background: var(--s-erledigt-bg); border-radius: 99px; padding: .05rem .5rem; }
.mail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.mail-subject { display: flex; align-items: center; gap: .5rem; }
.mail-head { display: flex; gap: .8rem; align-items: flex-start; padding-bottom: .8rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.mail-head > div { flex: 1; min-width: 0; }
.mail-badges { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.mail-badge { background: var(--s-neu-bg); color: var(--s-neu); display: inline-flex; align-items: center; gap: .25rem; }
.mail-body { overflow-wrap: anywhere; line-height: 1.55; max-height: 70vh; overflow: auto; }
.mail-actions h3 { margin-top: 0; }
.btn.block { display: flex; width: 100%; justify-content: center; }
.from-mail { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: var(--s-neu-bg); border: 1px solid var(--s-neu); }
@media (max-width: 900px) {
  .mail-layout { grid-template-columns: minmax(0, 1fr); }
  .inbox-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .inbox-from { display: none; }
  .inbox-search input { min-width: 0; width: 100%; }
}
.ticket-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 700; color: var(--s-offen); background: var(--s-offen-bg); border-radius: 99px; padding: .05rem .5rem; }
.mail-link { padding: .7rem .8rem; border-radius: 10px; background: var(--s-offen-bg); margin-bottom: .6rem; display: flex; flex-direction: column; gap: .2rem; }
.mail-link a { color: var(--text); }
.msg-from-inbox { font-size: .76rem; display: inline-flex; align-items: center; gap: .25rem; }

.guess-hint { display: flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--s-erledigt); margin: .15rem 0 .2rem; }
.guess-hint.none { color: var(--muted); font-weight: 500; }

.from-mail > div { min-width: 0; flex: 1; }
.from-mail-body { margin-top: .5rem; }
.from-mail-body summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
.from-mail-body .mail-body { background: var(--surface); border-radius: 8px; padding: .6rem .8rem; margin: .4rem 0; max-height: 320px; }

/* ================= Workflows je Kategorie ================= */
.wf-section { font-size: 1rem; margin: 1.6rem 0 .7rem; display: flex; align-items: baseline; gap: .6rem; }
.wf-cats, .wf-free { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: .8rem; }
.wf-cat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.wf-cat.selected { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.wf-cat.missing { background: var(--surface-2); border-style: dashed; }
.wf-cat header { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; flex-wrap: wrap; }
.wf-cat h3 { margin: 0; font-size: .98rem; }
.wf-cat h3 a { color: var(--text); }
.wf-cat-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: .1rem; }
.wf-name { font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: .3rem; }
.wf-cat-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: auto; }
.wf-missing-text { display: flex; align-items: center; gap: .35rem; margin: 0; }
.wf-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .2rem; align-items: center; }
.wf-chain li { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; background: var(--sunken); border-radius: 99px; padding: .2rem .65rem .2rem .25rem; color: var(--text-2); }
.wf-chain li span { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 750; color: var(--muted); }
.wf-chain li:not(:last-child)::after { content: "›"; margin-left: .3rem; color: var(--muted); font-weight: 700; }
.wf-chain li.more { background: none; color: var(--muted); padding-left: .3rem; }
.wf-editor-wrap { display: flex; flex-direction: column; gap: .8rem; margin-bottom: .5rem; scroll-margin-top: 80px; }
.wf-editor { border: 1px solid var(--text); }
.wf-editor-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; margin: .8rem 0; }
.wf-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin-bottom: .5rem; }
.wf-editor [data-wf-preview] .wf-chain { flex-direction: column; align-items: flex-start; }
.wf-editor [data-wf-preview] .wf-chain li::after { content: none; }
.wf-versions summary { cursor: pointer; }
.wf-archived { margin-top: 1.4rem; }
.wf-archived summary { cursor: pointer; }
@media (max-width: 800px) { .wf-editor-grid { grid-template-columns: minmax(0, 1fr); } .wf-cat-meta { align-items: flex-start; text-align: left; } }
/* ================= Ablauf-Feld im Ticket (Jetzt dran + Checkliste) ================= */
.flow { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.flow-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.flow-title { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.flow-title strong { font-weight: 750; }
.flow-count { font-size: .82rem; font-weight: 700; color: var(--st, var(--text)); font-variant-numeric: tabular-nums; }
.flow-head .wf-prog { flex: 1 1 120px; max-width: 260px; }
.flow-edit { margin-left: auto; }
.flow-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.flow-body.no-steps { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.flow-now { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; background: var(--st-bg, var(--surface-2)); border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.flow-now .ov-label { color: var(--st, var(--muted)); }
.flow-now .ov-main { font-size: 1.05rem; }
.flow-now .ov-btns, .flow-now form { margin-top: .5rem; }
.flow-after { margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed color-mix(in srgb, var(--st, var(--line-2)) 40%, transparent); font-size: .8rem; color: var(--muted); }
.flow-list { list-style: none; margin: 0; padding: .5rem .6rem; border-left: 1px solid var(--line); max-height: 300px; overflow: auto; }
.flow-list form { margin: 0; }
.flow-list button { width: 100%; display: flex; align-items: flex-start; gap: .6rem; background: none; border: 0; padding: .4rem .5rem; border-radius: 8px; cursor: pointer; font: inherit; text-align: left; color: var(--text); }
.flow-list button:hover { background: var(--sunken); }
.fl-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 750; border: 2px solid var(--line-2); color: var(--muted); background: var(--surface); position: relative; }
.flow-list li:not(:last-child) .fl-dot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 18px; margin-left: -1px; background: var(--line); }
.fl-text { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.fl-title { font-size: .88rem; font-weight: 600; line-height: 1.3; }
.fl-text small { font-size: .72rem; color: var(--muted); }
.flow-list .done .fl-dot { background: var(--st, var(--ok)); border-color: var(--st, var(--ok)); color: #fff; }
.flow-list .done .fl-dot::after { background: var(--st, var(--ok)) !important; }
.flow-list .done .fl-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); font-weight: 550; }
.flow-list .now button { background: var(--st-bg, var(--sunken)); }
.flow-list .now .fl-dot { border-color: var(--st, var(--primary)); color: var(--st, var(--primary)); box-shadow: 0 0 0 3px var(--st-bg, var(--sunken)); }
.flow-list .now .fl-title { font-weight: 750; }
.flow-list .now small { color: var(--st, var(--text)); font-weight: 700; }
.flow-list .todo .fl-title { color: var(--text-2); }
.flow-empty { padding: 1rem 1.1rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.ticket-head .overview.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) {
  .flow-body, .flow-body.no-steps { grid-template-columns: minmax(0, 1fr); }
  .flow-list, .flow-empty { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .flow-edit { margin-left: 0; }
  .ticket-head .overview.two { grid-template-columns: 1fr; }
}
/* Übersicht: Zahlenleiste oben, Karten paarweise nebeneinander */
.db-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; padding: .55rem .9rem; margin-bottom: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: .84rem; }
.db-strip-group { display: inline-flex; align-items: center; gap: .3rem .9rem; flex-wrap: wrap; }
.db-strip-group + .db-strip-group { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.db-strip a { color: var(--text-2); text-decoration: none; white-space: nowrap; }
.db-strip a:hover { color: var(--text); text-decoration: underline; }
.db-strip a b { color: var(--text); font-variant-numeric: tabular-nums; }
.db-strip .db-strip-title { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 750; color: var(--muted); }
.db-strip-search { margin-left: auto; }
.db-strip-search input { margin: 0; height: 32px; min-width: 200px; font-size: .84rem; }
.db-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) {
  .db-pairs { grid-template-columns: minmax(0, 1fr); }
  .db-strip-group + .db-strip-group { padding-left: 0; border-left: 0; }
  .db-strip-search { margin-left: 0; width: 100%; } .db-strip-search input { width: 100%; }
}
/* Anhänge an Posteingangs-Mails */
.mail-files { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.mail-file { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem .45rem .45rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); text-decoration: none; max-width: 300px; }
.mail-file:hover { border-color: var(--text); text-decoration: none; }
.mail-file img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.mf-ico { width: 48px; height: 48px; border-radius: 6px; background: var(--s-neu-bg); color: var(--s-neu); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; }
.mf-ico small { font-size: .6rem; font-weight: 800; letter-spacing: .03em; }
.mf-name { display: flex; flex-direction: column; min-width: 0; font-size: .84rem; font-weight: 600; overflow-wrap: anywhere; }
.mf-name small { color: var(--muted); font-weight: 500; font-size: .74rem; }
.mail-files-missing { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* Mailverlauf (Outlook-Konversation) unter der Mail */
.mail-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.mail-thread h3 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: 0; }
.mt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.mt-list li { border: 1px solid var(--line); border-left: 3px solid var(--s-neu); border-radius: 4px 10px 10px 4px; padding: .65rem .9rem; background: var(--surface); }
.mt-list li.ours { border-left-color: var(--s-erledigt); background: var(--surface-2); }
.mt-list li.this { border-left-color: var(--text); background: var(--sunken); padding: .45rem .9rem; }
.mt-head { display: flex; align-items: center; gap: .3rem .6rem; flex-wrap: wrap; }
.mt-head time { margin-left: auto; white-space: nowrap; }
.mt-body { margin-top: .45rem; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
/* Workflow-Auswahl in „Neues Ticket“ */
.wf-choose { margin-top: .4rem; }
.wf-choose-row { display: flex; gap: .6rem 1rem; align-items: flex-end; flex-wrap: wrap; }
.wf-choose-row > label { flex: 1 1 280px; }
.wf-choose-tools { display: flex; gap: .8rem; align-items: center; padding-bottom: .55rem; }
.wf-choose-preview { margin-top: .6rem; }
.wf-new { margin-top: .6rem; }
.wf-edit-links { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.due-row { display: flex; gap: .4rem; }
.due-row input[type=date] { flex: 1 1 auto; min-width: 0; }
.due-row input[type=time] { flex: 0 0 110px; }

/* Workflow: Schritt entfällt (nicht notwendig) */
.flow-list form { display: flex; align-items: flex-start; gap: .2rem; }
.flow-list form > button:first-child { flex: 1; }
.fl-skip { flex: 0 0 auto !important; width: auto !important; font-size: .72rem !important; color: var(--muted) !important; padding: .45rem .5rem !important; opacity: 0; transition: opacity .15s; }
.flow-list li:hover .fl-skip, .flow-list li.now .fl-skip, .fl-skip:focus { opacity: 1; }
.flow-list .skipped .fl-dot { background: var(--sunken) !important; border-color: var(--line-2) !important; color: var(--muted) !important; }
.flow-list .skipped .fl-title { font-style: italic; }
@media (hover: none) { .fl-skip { opacity: 1; } }
/* Posteingang: große Suche, Hinweis „Nur Ansicht“ */
.view-only { background: var(--sunken); color: var(--text-2); display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; font-size: .72rem; }
.inbox-search { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; padding: .35rem .9rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; color: var(--muted); }
.inbox-search:focus-within { border-color: var(--text); }
.inbox-search input { flex: 1; border: 0 !important; box-shadow: none !important; margin: 0; font-size: 1.02rem; height: 42px; background: transparent; min-width: 0 !important; }
.inbox-search [data-live-count] { white-space: nowrap; }
@media (max-width: 900px) {
  .inbox-row { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ico from meta" "ico subj meta"; row-gap: .1rem; }
  .inbox-row .inbox-ico { grid-area: ico; } .inbox-row .inbox-from { display: flex; grid-area: from; flex-direction: row; gap: .4rem; align-items: baseline; }
  .inbox-row .inbox-subj { grid-area: subj; } .inbox-row .inbox-meta { grid-area: meta; }
}
/* Alle Workflows mit Schritten (Neues Ticket) */
.wf-all { margin-top: .6rem; }
.wf-all summary { cursor: pointer; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.wf-all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .6rem; margin-top: .6rem; }
.wf-card { display: flex; flex-direction: column; gap: .45rem; text-align: left; font: inherit; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: .7rem .8rem; cursor: pointer; color: var(--text); }
.wf-card:hover, .wf-card.on { border-color: var(--text); }
.wf-card.on { box-shadow: 0 0 0 1px var(--text); }
.wf-card-head { display: flex; flex-direction: column; gap: .1rem; }
.wf-card-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--text-2); }
.wf-card-steps li { display: flex; gap: .4rem; align-items: baseline; }
.wf-card-steps li span { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--sunken); font-size: .66rem; font-weight: 750; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.wf-card-pick { margin-top: auto; font-size: .76rem; font-weight: 700; color: var(--link, var(--s-neu)); }
#wf-apply-preview { margin-top: .5rem; }
/* Workflow-Suche (Ticket + Neues Ticket) und Ersetzen/Anhängen */
.wf-finder { position: relative; margin: .2rem 0 .6rem; }
.wf-finder-input { display: flex; align-items: center; gap: .5rem; padding: .2rem .8rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; color: var(--muted); }
.wf-finder-input:focus-within { border-color: var(--text); }
.wf-finder-input input { flex: 1; border: 0 !important; box-shadow: none !important; margin: 0; height: 38px; background: transparent; min-width: 0 !important; }
.wf-finder-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: .3rem; max-height: 360px; overflow: auto; }
.wf-hit { display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-radius: 8px; padding: .5rem .6rem; cursor: pointer; }
.wf-hit:hover, .wf-hit:focus { background: var(--sunken); outline: none; }
.wf-hit-head { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.wf-hit-steps { color: var(--text-2); }
.wf-hit-new { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; font-weight: 650; color: var(--link, var(--s-neu)); }
.wf-hit-none { margin: .4rem .6rem; }
.wf-apply { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.wf-apply-title { margin: 0 0 .5rem; font-size: .9rem; display: flex; align-items: center; gap: .35rem; }
.wf-apply-form select { width: 100%; }
.wf-apply-btns { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-top: .6rem; }
/* Verlauf ruhiger: Filter mit Zahlen, keine Sprünge, Notizen dezent, Bearbeiten an Ort und Stelle */
.tk .tl-filter .seg a span { display: inline-block; min-width: 1.3em; margin-left: .25rem; padding: 0 .35rem; border-radius: 999px; background: var(--sunken); font-size: .72rem; font-weight: 700; color: var(--muted); text-align: center; }
.tk .tl-filter .seg a.on span { background: rgba(127,127,127,.18); color: inherit; }
.tk .tl-filter .seg a[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.tk .tl-filter .seg a { transition: background-color .15s, color .15s; }
.timeline .msg.is-off { display: none; }
.timeline .tl-empty { margin: .5rem 0; text-align: center; }
.timeline .tl-empty[hidden], .compose-tabs[hidden], form.msg-edit[hidden] { display: none !important; }
.tk .msg .bubble { transition: border-color .15s, background-color .15s; }
.tk .msg.note .bubble { background: var(--surface); border-color: var(--line); border-left-color: var(--warn); }
.tk .msg.note .role.r-note { background: var(--note-bg); }
.tk .msg.private .bubble { background: var(--surface); border-color: var(--line); }
.msg-edit-btn { margin-left: .2rem; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; opacity: .55; transition: opacity .15s, background-color .15s; }
.msg:hover .msg-edit-btn, .msg-edit-btn:focus { opacity: 1; }
.msg-edit-btn:hover { background: var(--sunken); color: var(--text); }
.msg.editing .msg-edit-btn { opacity: 1; background: var(--sunken); color: var(--text); }
.msg.editing > .bubble > .body { display: none; }
.msg.editing .bubble { border-color: var(--text); }
form.msg-edit textarea { margin: .1rem 0 .5rem; }
form.msg-edit .row { gap: .4rem; flex-wrap: wrap; }
@media (hover: none) { .msg-edit-btn { opacity: 1; } }
/* Workflow im Ticket: Schritte direkt im Kasten bearbeiten */
.flow-list .fl-edit, .flow-list .fl-add { display: none !important; }
.flow.editing .flow-list li > form:not(.fl-edit) { display: none !important; }
.flow.editing .flow-list .fl-edit { display: flex !important; align-items: center; gap: .5rem; padding: .35rem .2rem; }
.flow.editing .flow-list .fl-add { display: block !important; }
.flow.editing .flow-list li { border-radius: 8px; }
.flow.editing .flow-list li:hover { background: var(--sunken); }
.fl-edit .fl-dot { flex: 0 0 auto; }
.fl-edit .fl-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.fl-edit input { margin: 0; min-width: 0; height: 34px; }
.fl-edit .fl-note-in { height: 30px; font-size: .82rem; }
.fl-add .fl-edit input { flex: 1; }
.fl-tools { display: inline-flex; gap: .15rem; flex: 0 0 auto; }
.fl-tools .icon-btn[disabled] { opacity: .25; cursor: default; }
.flow.editing .flow-edit { font-weight: 700; color: var(--text); }
.flow.editing { box-shadow: 0 0 0 2px var(--text); }
.fl-note { display: block; font-size: .78rem; color: var(--text-2); font-weight: 400; margin-top: .1rem; white-space: pre-line; }
.ov-note { font-size: .85rem; color: var(--text-2); margin: .15rem 0 .2rem; padding-left: .6rem; border-left: 2px solid var(--line-2); }
#workflow-edit { margin-top: .6rem; }

/* Workflow-Suche: Treffer hervorheben */
.wf-hit mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 .1em; }
:root[data-theme="dark"] .wf-hit mark { background: #7a6210; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wf-hit mark { background: #7a6210; } }
ol.wf-hit-steps { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; color: var(--text-2); }
ol.wf-hit-steps li { display: flex; gap: .4rem; align-items: baseline; }
ol.wf-hit-steps li span { flex: 0 0 16px; height: 16px; border-radius: 50%; background: var(--sunken); font-size: .62rem; font-weight: 750; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
ol.wf-hit-steps li.hit { color: var(--text); }
ol.wf-hit-steps li.more { color: var(--muted); padding-left: 1.4rem; }

/* Workflow-Editor: Schritte als einzelne Felder mit Bemerkung */
.wf-steps-label { font-size: .85rem; font-weight: 600; margin: .4rem 0 .4rem; }
.wf-se { margin-bottom: .8rem; }
.wf-se-rows { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.wf-se-rows li { display: flex; gap: .5rem; align-items: flex-start; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .55rem; }
.wf-se-rows li:focus-within { border-color: var(--text); }
.wf-se-num { flex: 0 0 24px; height: 24px; margin-top: .45rem; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: .75rem; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; }
.wf-se-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.wf-se-fields input, .wf-se-fields textarea { margin: 0; }
.wf-se-title { font-weight: 600; }
.wf-se-note { font-size: .85rem; min-height: 34px; resize: vertical; }
.wf-se-tools { display: inline-flex; gap: .1rem; margin-top: .3rem; }
.wf-se-raw[hidden] { display: none !important; }
.wf-switch { gap: .4rem; flex-wrap: nowrap; margin-top: .5rem; }
.wf-switch select { margin: 0; max-width: 240px; }
.badge.wf-std { font-size: .68rem; vertical-align: middle; display: inline-flex; align-items: center; gap: .2rem; }
.std-hint { margin: -.4rem 0 .8rem; padding: .45rem .7rem; border-radius: 8px; background: var(--note-bg); border: 1px solid var(--note-line); color: var(--text); }
.std-hint[hidden] { display: none !important; }

.flow.editing .fl-tools .icon-btn, .flow.editing .fl-tools .icon-btn:hover { background: none !important; color: var(--text-2) !important; border: 0 !important; box-shadow: none !important; }
.flow.editing .fl-tools .icon-btn:not([disabled]):hover { background: var(--surface) !important; color: var(--text) !important; }

/* Schritt-Nummern bleiben sichtbar: erledigt = grün gefüllt + Häkchen, entfällt = grau + Strich */
.flow-list .done .fl-dot { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }
.flow-list .done .fl-dot::after { background: var(--ok) !important; }
.flow-list .skipped .fl-dot { background: var(--sunken) !important; border-color: var(--line-2) !important; color: var(--muted) !important; text-decoration: line-through; }
.flow-list .skipped .fl-dot::after { background: var(--line) !important; }
.fl-mark { position: absolute; right: -6px; bottom: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--ok); color: #fff; border: 2px solid var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; line-height: 1; text-decoration: none; }
.skipped .fl-mark { background: var(--muted); }
.fl-mark svg { width: 9px; height: 9px; stroke-width: 3.5; }
.flow-list { max-height: 420px; }
/* Bearbeiten: volle Breite und ganze Liste sichtbar */
.flow.editing .flow-body { grid-template-columns: minmax(0, 1fr) !important; }
.flow.editing .flow-now { display: none; }
.flow.editing .flow-list { max-height: none; border-left: 0; padding: .6rem .9rem; }
.flow.editing .fl-edit .fl-fields { flex-direction: row; gap: .5rem; }
.flow.editing .fl-edit .fl-fields input[name=title] { flex: 1 1 45%; }
.flow.editing .fl-edit .fl-fields .fl-note-in { flex: 1 1 55%; height: 34px; }
@media (max-width: 760px) { .flow.editing .fl-edit .fl-fields { flex-direction: column; } }
/* Workflow-Suche: größer, Markierung ohne Lücken */
.wf-finder-input { padding: .25rem 1rem; border-radius: 12px; }
.wf-finder-input input { height: 48px; font-size: 1.05rem; }
.wf-hit mark { padding: 0; border-radius: 2px; }
ol.wf-hit-steps li > .wf-hit-t { flex: 1 1 auto; height: auto; background: none; display: inline; font-size: inherit; font-weight: inherit; color: inherit; border-radius: 0; min-width: 0; }
ol.wf-hit-steps li .wf-hit-t > .wf-hit-note { display: block; flex: none; height: auto; width: auto; background: none; border-radius: 0; font-size: .92em; font-weight: 400; color: var(--muted); margin-top: .05rem; }
.wf-finder-results { max-height: 460px; }
/* Workflow: zwei klare Aktionen – „Schritte ändern“ und „Workflow wechseln“ */
.flow-head { flex-wrap: wrap; }
.flow-actions { margin-left: auto; display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.flow-edit-hint { display: none; }
.flow.editing .flow-edit-hint { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--note-bg); border-bottom: 1px solid var(--note-line); font-size: .85rem; }
.flow.editing .flow-actions { display: none; }
.wf-switch-panel { margin-top: .8rem; background: var(--surface); border: 2px solid var(--text); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); scroll-margin-top: 80px; }
.wf-switch-panel[hidden] { display: none !important; }
.wf-sp-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.wf-sp-head h3 { margin: 0; display: flex; align-items: center; gap: .4rem; font-size: 1.05rem; }
.wf-sp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.wf-sp-steps > li { padding-left: 0; }
.wf-sp-label { font-weight: 700; font-size: .92rem; margin-bottom: .45rem; display: flex; align-items: center; gap: .45rem; }
.wf-sp-label > span:first-child { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.wf-switch-panel .wf-finder { margin: 0 0 .5rem; }
.wf-switch-panel .wf-apply-form select { width: 100%; margin: 0; }
.wf-switch-panel .wf-choose-preview { margin: 0; padding: .6rem .8rem; background: var(--surface-2, var(--sunken)); border-radius: 10px; }
.wf-switch-panel .wf-apply-btns { margin-top: 0; }
.wf-switch-panel .wf-edit-links { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
/* Posteingang: Treffer markieren, Hinweis Mails ab */
.inbox-row mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0; }
:root[data-theme="dark"] .inbox-row mark { background: #7a6210; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .inbox-row mark { background: #7a6210; } }
.inbox-since { margin: 1rem 0 0; padding: .7rem .9rem; border: 1px dashed var(--line-2); border-radius: 10px; }
.inbox-backfill { margin-top: .5rem; }
.inbox-backfill summary { cursor: pointer; font-weight: 600; }
.inbox-backfill form { margin-top: .5rem; gap: .6rem 1rem; align-items: flex-end; flex-wrap: wrap; }
.inbox-backfill label { margin: 0; }
/* „entfällt“ als kleine Pille neben dem Schritt */
.flow-list form { align-items: center !important; }
.flow-list .fl-skip { align-self: center; display: inline-flex !important; align-items: center; gap: .25rem; height: 24px; padding: 0 .55rem !important; margin-right: .2rem; border: 1px solid var(--line-2) !important; border-radius: 999px !important; background: var(--surface) !important; font-size: .7rem !important; font-weight: 600; color: var(--text-2) !important; white-space: nowrap; }
.flow-list .fl-skip:hover { border-color: var(--text) !important; color: var(--text) !important; background: var(--surface) !important; }
.flow-list .fl-skip svg { opacity: .7; }

/* Mail einem Ticket zuordnen: Suche */
.ticket-picker .tp-input { margin: 0; }
.tp-results { display: flex; flex-direction: column; gap: .1rem; border: 1px solid var(--line); border-radius: 10px; padding: .3rem; max-height: 380px; overflow: auto; background: var(--surface); }
.tp-count { padding: .2rem .5rem; }
.tp-hit.on { background: var(--sunken); box-shadow: inset 3px 0 0 var(--primary); }
.tp-hit mark, .tp-results mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0; }
.tp-chosen { font-size: .85rem; padding: .5rem .7rem; border-radius: 8px; background: var(--note-bg); border: 1px solid var(--note-line); }
.tp-chosen[hidden] { display: none; }
/* Anhänge: Büroklammer in der Mail-Liste, Auswahl beim Ticket-Anlegen */
.att-pill { display: inline-flex; align-items: center; gap: .15rem; margin-left: .4rem; padding: .05rem .4rem; border-radius: 999px; background: var(--sunken); color: var(--text-2); font-size: .72rem; font-weight: 700; vertical-align: middle; }
.from-mail-files { margin-top: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.from-mail-files .mf-item { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.from-mail-files .mf-item img, .from-mail-files .mf-ico { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--muted); }
.from-mail-files .mf-item > span:not(.mf-ico) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Objekt-Kacheln: Einheiten deutlich zeigen */
.prop-cards .cover { position: relative; }
.cover-units { position: absolute; left: .5rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border-radius: 999px; background: rgba(0,0,0,.68); color: #fff; font-size: .78rem; font-weight: 700; backdrop-filter: blur(2px); }
.pc-units { display: flex; flex-direction: column; gap: .25rem; margin: .45rem 0 .3rem; padding: .55rem .7rem; border-radius: 10px; background: var(--sunken); }
.pc-units.none { background: none; border: 1px dashed var(--line-2); color: var(--muted); }
.pcu-n { font-size: .92rem; display: inline-flex; align-items: center; gap: .3rem; }
.pcu-n b { font-size: 1.35rem; line-height: 1; font-weight: 800; color: var(--text); }
.pcu-split { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .76rem; }
.pcu-occ { color: var(--ok); font-weight: 650; }
.pcu-free { color: var(--warn-ink, #9a6700); font-weight: 650; }
.pcu-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pcu-bar span { display: block; height: 100%; background: var(--ok); }
/* Zurück-Knopf oben auf jeder Seite */
.back-link { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; padding: .3rem .75rem .3rem .55rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: .82rem; font-weight: 600; text-decoration: none; max-width: 100%; }
.back-link:hover { color: var(--text); border-color: var(--text); text-decoration: none; }
.back-link svg { transform: rotate(180deg); flex: 0 0 auto; }
.back-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-link[hidden] { display: none; }

/* Einheit: Räume mit Dokumentation */
.room-suggest { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.chip-check { margin: 0; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check > span { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .82rem; background: var(--surface); }
.chip-check input:checked + span { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip-check input:focus-visible + span { outline: 2px solid var(--text); }
.room { scroll-margin-top: 80px; }
.room-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.room-top h3 { margin: 0; }
.room-edit { gap: .4rem; margin: .6rem 0 0; flex-wrap: wrap; }
.room-edit[hidden], .room-entry-form[hidden] { display: none; }
.room-entry-form { margin-top: .7rem; padding: .8rem; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface-2, var(--sunken)); }
.room-entry { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.re-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.re-head .msg-edit-btn { margin-left: auto; }
.re-body { margin: .35rem 0 0; }
.re-shots { margin-top: .5rem; }
/* Herkunft kennzeichnen: aus Impower */
.badge.src-impower { background: #e7f0ff; color: #1d4ed8; border: 1px solid #c7dbff; font-size: .7rem; vertical-align: middle; display: inline-flex; align-items: center; gap: .2rem; }
:root[data-theme="dark"] .badge.src-impower { background: #16264a; color: #9fc0ff; border-color: #27406f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge.src-impower { background: #16264a; color: #9fc0ff; border-color: #27406f; } }
.nav-src { font-size: .6rem; font-weight: 700; text-transform: none; letter-spacing: 0; padding: .05rem .35rem; border-radius: 999px; background: rgba(59,130,246,.15); color: #3b82f6; margin-left: .3rem; vertical-align: middle; }
.chip-groups { align-items: center; }
.chip-group-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 .1rem 0 .4rem; }
.chip-group-label:first-child { margin-left: 0; }

/* Gewerk-Auswahl, Handwerker-Filter */
.trade-pick { display: flex; flex-direction: column; gap: .35rem; }
.trade-pick input[hidden] { display: none; }
.craft-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.craft-filters input[type=search] { flex: 1 1 260px; margin: 0; }
.craft-filters select { flex: 0 1 220px; margin: 0; }
.trade-badge { font-weight: 650; }
.craft-props { margin-top: .45rem; display: flex; gap: .3rem; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fav-tools { display: flex; gap: .6rem; align-items: center; margin: .3rem 0; }
.fav-tools input { flex: 1; margin: 0; }
.fav-list { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; }

/* Turnus-Formular */
.turnus-edit { margin-bottom: 1rem; }
.turnus-edit.with-side { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .turnus-edit.with-side { grid-template-columns: minmax(0, 1fr); } }
.turnus-form { display: flex; flex-direction: column; gap: .2rem; }
.tf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.tf-head h3 { margin: 0; }
.tf-sec { padding: .7rem 0; border-top: 1px solid var(--line); }
.tf-label { font-weight: 700; font-size: .9rem; margin-bottom: .45rem; display: flex; align-items: center; gap: .45rem; }
.tf-label > span { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.tf-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.tf-chip { font: inherit; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; }
.tf-chip:hover { border-color: var(--text); }
.tf-chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.tf-hint { margin: .2rem 0 0; }
.tf-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .7rem; border-top: 1px solid var(--line); }

/* Ticket: Mieter / Eigentümer bei der Einheit, Kontaktdaten des Zuständigen */
.unit-people { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .25rem; font-size: .82rem; font-weight: 400; }
.unit-people .role { margin-right: .2rem; }
.assignee-contact { display: block; font-weight: 400; margin-top: .15rem; }
.user-info { margin: -.3rem 0 .6rem; }
.people-pick .pp-head { font-weight: 700; margin: .6rem 0 .3rem; }
.people-pick .pp-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .3rem 0; border-top: 1px dashed var(--line); }
.people-pick .pp-role { flex: 0 0 150px; font-size: .78rem; font-weight: 700; color: var(--text-2); }

/* Schlüssel, Keller & Stellplätze: Formular oben, volle Breite */
.pf-stack { display: flex; flex-direction: column; gap: .8rem; }
.pf-add-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pf-add[hidden] { display: none; }
.pf-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 .8rem; }
.pf-add-grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pf-inline { display: grid !important; grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, 1.2fr); gap: .4rem; align-items: center; }
.pf-inline select, .pf-inline input { margin: 0; min-width: 0; }
@media (max-width: 760px) { .pf-inline { grid-template-columns: minmax(0, 1fr); } }

/* Ticket-Termin: Outlook-Status */
.ev-sync { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; font-size: .75rem; }
.ev-sync.ok { color: var(--ok); }
.ev-sync.miss { color: var(--warn-ink, #9a6700); }
.ev-sync .link { font-size: .75rem; }
/* Workflow-Suche: links Treffer, rechts alle Schritte des markierten Workflows */
.wf-finder-results { max-height: 70vh !important; overflow: hidden; display: flex; flex-direction: column; }
.wf-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .5rem; min-height: 0; flex: 1; }
.wf-res-list { overflow: auto; max-height: 62vh; display: flex; flex-direction: column; gap: .1rem; }
.wf-res-detail { overflow: auto; max-height: 62vh; padding: .6rem .8rem; border-left: 1px solid var(--line); background: var(--surface-2, var(--sunken)); border-radius: 8px; }
.wf-hit.on { background: var(--sunken); box-shadow: inset 3px 0 0 var(--primary); }
.wf-hit-where { color: var(--text-2); font-weight: 600; }
.wfd-head { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; margin-bottom: .2rem; }
.wfd-head strong { font-size: 1rem; }
.wfd-steps { margin: .5rem 0 .7rem !important; gap: .3rem !important; }
.wfd-steps li.hit { background: rgba(255, 229, 138, .25); border-radius: 6px; }
.wf-finder-results > .wf-hit-new { margin-top: .3rem; flex: none; }
@media (max-width: 760px) {
  .wf-res { grid-template-columns: minmax(0, 1fr); }
  .wf-res-list { max-height: 30vh; }
  .wf-res-detail { border-left: 0; border-top: 1px solid var(--line); max-height: 36vh; }
}
/* Sprungziele nicht unter der festen Kopfzeile verstecken */
section[id], .card[id], [id^="g-"] { scroll-margin-top: 84px; }

.wf-ins-hint { margin-top: .6rem; padding: .55rem .75rem; border-radius: 8px; background: var(--note-bg); border: 1px solid var(--note-line); display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.wf-ins-hint[hidden] { display: none; }

/* Objekt-Kacheln: einheitlich – Status oben links auf dem Bild, feste Höhen, Datenstand farbig mit „Fehlt:“ */
.cover-units { display: none !important; }
.cover-state { position: absolute; top: 8px; left: 8px; padding: .12rem .5rem; border-radius: 99px; font-size: .7rem; font-weight: 700; box-shadow: var(--shadow); }
.cover-state.warn { background: #fff3cd; color: #8a6100; }
.cover-state.manual { background: var(--surface); color: var(--text-2); }
.prop-cards .link-card { display: flex; flex-direction: column; gap: .2rem; }
.prop-cards .pc-title { -webkit-line-clamp: 2; min-height: calc(1.35em * 2); }
.prop-cards .pc-addr { -webkit-line-clamp: 1; min-height: 1.35em; }
.prop-cards .pc-meta { min-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-cards .pc-badges { display: none; }
.prop-cards .pc-units { min-height: 74px; justify-content: center; box-sizing: border-box; }
.prop-cards .pc-units.none { align-items: center; flex-direction: row; gap: .35rem; }
.prop-cards .link-card .ds-line { margin-top: auto; }
.ds-lbl { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.ds-pct { font-size: .85rem; min-width: 2.6em; text-align: right; }
.ds-line.low .ds-pct { color: var(--p-hoch, #c62828); }
.ds-line.mid .ds-pct { color: var(--warn-ink, #9a6700); }
.ds-line.good .ds-pct { color: var(--ok); }
.ds-miss { display: block; min-height: 1.35em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--p-hoch, #c62828); }
.ds-line.good + .ds-miss { color: var(--ok); }
.ds-line.mid + .ds-miss { color: var(--warn-ink, #9a6700); }
.prop-cards .ds-foot { min-height: 1.2em; }
.prop-cards.size-s .ds-miss { display: none; }
/* Status-Etikett als eigene Zeile unter dem Bild – überlagert nichts */
.prop-cards .pc-state { display: flex; min-height: 1.5rem; align-items: center; margin-top: .1rem; }
.prop-cards .pc-state .badge { font-size: .68rem; }
.cover-state { display: none !important; }
.prop-cards .pc-units { min-height: 92px; }

/* Posteingang: eigene Spalte für Anhänge */
.inbox-row, .inbox-head { grid-template-columns: 34px minmax(140px, 220px) minmax(0, 1fr) 76px auto; }
.inbox-head { display: grid; gap: .8rem; padding: .45rem 1rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.inbox-head .c { text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: .2rem; }
.inbox-head .r { text-align: right; }
.inbox-att { display: flex; justify-content: center; }
.att-col { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border-radius: 999px; background: #e7f0ff; color: #1d4ed8; font-size: .85rem; }
.att-col b { font-weight: 800; }
.att-col.pending { background: var(--sunken); color: var(--muted); }
:root[data-theme="dark"] .att-col:not(.pending) { background: #16264a; color: #9fc0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .att-col:not(.pending) { background: #16264a; color: #9fc0ff; } }
@media (max-width: 900px) {
  .inbox-head { display: none; }
  .inbox-row { grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "ico from att meta" "ico subj att meta"; }
  .inbox-row .inbox-att { grid-area: att; }
}
@media (min-width: 901px) { .inbox-row, .inbox-head { grid-template-columns: 34px minmax(140px, 220px) minmax(0, 1fr) 84px 200px; } .inbox-row .inbox-meta { justify-self: end; } }

.users-table .user-greet { min-width: 170px; }
.users-table .user-greet > span { display: block; line-height: 1.45; }

.outlook-diag { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .9rem; margin: 0 0 1rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); }
.outlook-diag.warn { border-color: #f0c36d; background: #fff8e6; }
:root[data-theme="dark"] .outlook-diag.warn { background: #3a2f12; border-color: #7a6210; }
.outlook-diag form { margin-top: .2rem; }

/* Turnus: Einheiten-Auswahl */
.tf-units { margin: .2rem 0 .7rem; }
.tf-scope { margin-bottom: .5rem; }
.tf-unit-list { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem; border: 1px dashed var(--line-2); border-radius: 8px; }
.tf-unit-list[hidden] { display: none; }

/* Workflows-Übersicht: klare Knöpfe, offene Tickets, „wo verwendet“, Filter */
.wf-open { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--muted); padding: .1rem .5rem; border-radius: 999px; background: var(--sunken); text-decoration: none; }
.wf-open.has { background: var(--p-hoch, #c62828); color: #fff; }
.wf-open.has:hover { filter: brightness(1.08); text-decoration: none; }
.wf-used { margin: .4rem 0 .2rem; font-size: .8rem; }
.wf-used.none { display: block; color: var(--muted); }
.wf-used summary { cursor: pointer; font-weight: 650; color: var(--link, var(--s-neu)); }
.wf-used ul { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.wf-used li { padding: .35rem .5rem; border-radius: 6px; background: var(--sunken); display: flex; flex-direction: column; gap: .1rem; }
.wf-used-step { color: var(--text-2); }
.wf-used-step.closed { color: var(--muted); }
.wf-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .8rem; }
.wf-filter input[type=search] { flex: 1 1 260px; margin: 0; }
.wf-filter select { flex: 0 1 220px; margin: 0; }
.wf-free .wf-cat header { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.wf-free mark, .wf-cat mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0; }
.sidenav .nav-new-note { display: flex; justify-content: center; margin: -.2rem 0 .8rem; width: 100%; box-sizing: border-box; }
#note-form { scroll-margin-top: 84px; }

/* Schritte ändern: Status je Schritt umstellen (erledigt / entfällt / offen) */
.fl-status { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.flow.editing .fl-status .fls { width: 30px !important; height: 28px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--surface) !important; color: var(--muted) !important; font-weight: 800; font-size: .85rem; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; }
.flow.editing .fl-status .fls + .fls { border-left: 1px solid var(--line-2) !important; }
.flow.editing .fl-status .fls:hover:not([disabled]) { background: var(--sunken) !important; color: var(--text) !important; }
.flow.editing .fl-status .fls.on.ok { background: var(--ok) !important; color: #fff !important; }
.flow.editing .fl-status .fls.on.skip { background: var(--muted) !important; color: #fff !important; }
.flow.editing .fl-status .fls.on.open { background: var(--primary) !important; color: var(--primary-ink) !important; }
.flow.editing .fl-status .fls[disabled] { cursor: default; }
/* Übersicht: Status als beschriftetes Etikett */
.db-list .db-status { flex: 0 0 auto; font-size: .7rem; padding: .15rem .55rem; }
@media (max-width: 600px) { .db-list .db-status { display: none; } }

/* Objekt-Kartei: Ansicht Technik / Verwaltung */
.pview-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.pview-seg button { font: inherit; font-size: .82rem; border: 0; background: none; padding: .35rem .75rem; border-radius: 7px; cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; gap: .3rem; }
.pview-seg button.on { background: var(--primary); color: var(--primary-ink); }
body[data-pview="tech"] [data-v="fach"]:not(.on), body[data-pview="fach"] [data-v="tech"]:not(.on) { display: none !important; }
/* Kennzahlen als Filter (Einheiten) */
.stat-filters .stat { text-decoration: none; color: inherit; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, background-color .15s; }
.stat-filters .stat:hover { border-color: var(--line-2); text-decoration: none; }
.stat-filters .stat.on { border-color: var(--primary); background: var(--surface); box-shadow: var(--shadow); }
.stat-filters .stat.on span::after { content: " ✓"; }

/* Handy: kein seitliches Verschieben der ganzen Seite – breite Inhalte scrollen in ihrem eigenen Kasten */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img, video, iframe { max-width: 100%; }
@media (max-width: 760px) {
  .container, main { min-width: 0; max-width: 100vw; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .card, .db-card, section { min-width: 0; }
}
.reporter-places { margin: .4rem 0 0; padding: .45rem .7rem; border-radius: 8px; background: var(--s-neu-bg, #e6efff); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.reporter-places[hidden] { display: none; }
.flow-actions .btn.ghost { font-weight: 700; }

/* Anhang-Ansicht innerhalb der Seite */
body.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(15,18,22,.82); display: flex; flex-direction: column; }
.viewer-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.viewer-name { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: .6rem; }
.viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; }
.viewer-body iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; background: #fff; }
.viewer-none { background: var(--surface); color: var(--text); border-radius: 12px; padding: 1.4rem 1.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
@media (max-width: 600px) { .viewer-bar .viewer-tab { display: none; } .viewer-body { padding: 0; } .viewer-body img, .viewer-body iframe { border-radius: 0; } }
/* Angebote */
.offer-form .card { margin-bottom: .9rem; }
.offer-calc { width: 100%; border-collapse: collapse; margin: .4rem 0 .8rem; }
.offer-calc th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .3rem .4rem; }
.offer-calc td { padding: .3rem .4rem; border-top: 1px solid var(--line); vertical-align: middle; }
.offer-calc input { margin: 0; max-width: 120px; }
.offer-calc .r, .list .r { text-align: right; }
.oc-eur { display: inline-flex; align-items: center; gap: .3rem; }
.offer-calc tfoot td { font-weight: 600; }
.offer-calc .oc-total td { font-weight: 800; font-size: 1.05rem; background: var(--sunken); }
.offer-foot { display: flex; justify-content: flex-end; gap: .5rem; position: sticky; bottom: 0; padding: .7rem 0; background: var(--bg, var(--surface-2)); }
.offer-statusbar { display: flex; gap: .4rem; align-items: center; margin: 0 0 .8rem; flex-wrap: wrap; }
.offer-statusbar .chip { cursor: pointer; font: inherit; }
.offer-status { margin: 0; font-weight: 650; }
.offer-status.s-angenommen { color: var(--ok); }
.offer-status.s-abgelehnt { color: var(--muted); }
@media (max-width: 600px) { .offer-calc thead { display: none; } .offer-calc input { max-width: 80px; } }
.offer-status { min-width: 130px; }
/* linke Spalte breit genug, damit „Stellplätze / Garagen“ und die Angebotsnummer einzeilig bleiben */
.offer-calc tbody td:first-child { white-space: nowrap; min-width: 190px; }
.offer-list td:nth-child(2) { white-space: nowrap; }
@media (min-width: 901px) {
  .offer-list td[data-label="Empfänger"], .offer-list td[data-label="Objekt"] { min-width: 150px; }
  .offer-list .offer-status { min-width: 100px; }
  .offer-list th, .offer-list td { padding-left: .4rem; padding-right: .4rem; }
}
.list td strong[data-hl] { white-space: nowrap; }

/* Kalendereinträge: Formular-Kopf und Tabelle */
.note-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; }
@media (max-width: 700px) { .note-head { grid-template-columns: 1fr; } }
.notes-table tr.due td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.notes-table tr.pinned td { background: var(--sunken); }
.notes-table .note-body { max-width: 520px; max-height: 3.2em; overflow: hidden; margin-top: .15rem; }
.notes-table .note-body p { margin: 0; }
/* Workflow-Kacheln: Kopf mit fester Ordnung – nichts verschiebt sich, nichts bricht um */
.wf-cat header.wf-cat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title open" "meta meta"; gap: .35rem .8rem; align-items: center; flex-wrap: nowrap; }
.wf-cat-head h3 { grid-area: title; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-cat-head .wf-open { grid-area: open; white-space: nowrap; }
.wf-cat-head .wf-cat-meta { grid-area: meta; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: .6rem; min-width: 0; min-height: 1.4rem; }
.wf-cat-head .wf-name { min-width: 0; white-space: nowrap; }
.wf-cat-head .wf-name span { overflow: hidden; text-overflow: ellipsis; }
.wf-cat-head .wf-name .ico { flex: none; }
.wf-cat-head .wf-ver { white-space: nowrap; flex: none; }
/* Linke Menüleiste: Einträge einzeilig (zu lange Namen mit „…“) */
.sidenav a { white-space: nowrap; min-width: 0; }
.sidenav a > span:not(.badge):not(.nav-badge) { overflow: hidden; text-overflow: ellipsis; }
/* Angebote: Word, PDF, Bearbeiten, Löschen – immer an derselben Stelle */
.offer-acts { display: grid; grid-template-columns: 60px 52px 32px 32px; gap: .25rem; align-items: center; }
.offer-acts form { margin: 0; }
.offer-acts .btn { justify-content: center; width: 100%; margin: 0; }
.offer-acts .btn[aria-disabled] { opacity: .35; pointer-events: none; }
/* Löschen: erster Klick färbt den Knopf rot (Größe bleibt gleich), zweiter Klick löscht */
.offer-acts .offer-del span { display: none; }
.offer-acts .offer-del.armed { background: var(--err); color: #fff; border-color: transparent; }
tr.row-flash td { background: color-mix(in srgb, var(--ok, #2e7d32) 12%, transparent); }.offer-head-acts { display: grid; grid-template-columns: repeat(4, auto); gap: .5rem; align-items: center; }
.offer-head-acts form { margin: 0; }
.offer-head-acts .btn { margin: 0; justify-content: center; }
.offer-head-acts .btn[aria-disabled] { opacity: .4; pointer-events: none; }
.offer-head-acts .offer-del span { display: none; }
.offer-head-acts .offer-del.armed { filter: brightness(.85); box-shadow: 0 0 0 2px var(--err); }
@media (max-width: 600px) { .offer-head-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } }
/* Bestätigung auf der Seite (data-confirm2): erster Klick färbt rot, zweiter Klick führt aus */
[data-confirm2].armed { background: var(--err) !important; color: #fff !important; border-color: var(--err) !important; border-radius: var(--radius-sm, 6px); }
.link[data-confirm2].armed { padding: 0 .3rem; text-decoration: none; }
/* Dunkel: helle Fläche (--err) braucht dunkle Schrift */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-confirm2].armed { color: var(--primary-ink) !important; } }
:root[data-theme="dark"] [data-confirm2].armed { color: var(--primary-ink) !important; }
/* Workflow-Kacheln (oben und unten gleich): Titel links, „Bearbeiten“ immer oben rechts mit fester Breite, darunter eine Zeile Zusatzinfos */
.wf-cat > header.wf-tile-head { display: grid; grid-template-columns: minmax(0, 1fr) 118px; grid-template-areas: "title edit" "meta meta"; gap: .35rem .8rem; align-items: center; flex-wrap: nowrap; }
.wf-tile-head h3 { grid-area: title; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wf-tile-head .wf-edit { grid-area: edit; width: 118px; justify-content: center; margin: 0; }
.wf-tile-meta { grid-area: meta; display: flex; align-items: center; gap: .6rem; min-width: 0; min-height: 1.5rem; white-space: nowrap; overflow: hidden; }
.wf-tile-meta > * { flex: none; }
.wf-tile-meta .wf-name { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .3rem; }
.wf-tile-meta .wf-name span, .wf-tile-meta .wf-desc { overflow: hidden; text-overflow: ellipsis; }
.wf-tile-meta .wf-desc { flex: 1 1 auto; min-width: 0; }
/* Gebäude & Technik: alle Gruppen gleich aufgebaut – gleiche Beschriftungsbreite, Überschriften einzeilig */
.pf-specgrid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.pf-specgroup { min-width: 0; }
.pf-specgroup h4 { white-space: nowrap; overflow: hidden; min-width: 0; }
.pf-specgroup h4 a { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf-specgroup h4 .ico { flex: none; }
.pf-specgroup dl { grid-template-columns: 10rem minmax(0, 1fr); }
.pf-specgroup dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pf-specgroup dd { min-width: 0; overflow-wrap: anywhere; }
/* Turnus-Formular richtet sich nach seiner eigenen Breite (z. B. schmale Seitenspalte): Felder untereinander statt gequetscht */
.turnus-form { container-type: inline-size; }
@container (max-width: 640px) { .turnus-form .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .turnus-form .grid3 > :first-child { grid-column: 1 / -1; } }
@container (max-width: 440px) { .turnus-form .grid2, .turnus-form .grid3 { grid-template-columns: 1fr; } }
.turnus-form label { margin-bottom: .55rem; }
/* Objekte als Liste: jede Zeile einzeilig, lange Namen/Adressen mit „…“ (voller Text beim Darüberfahren) */
@media (min-width: 901px) {
  .prop-list td { white-space: nowrap; }
  .prop-list .pl-name { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .prop-list .pl-addr { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}
/* Posteingang: Anhänge und Eingang (mit Uhrzeit) ganz vorne */
.inbox-date { white-space: nowrap; font-size: .8rem; color: var(--muted); font-weight: 600; }
@media (min-width: 901px) {
  .inbox-row, .inbox-head { grid-template-columns: 34px 40px 140px minmax(140px, 220px) minmax(0, 1fr) 170px; }
  .inbox-meta .m-only { display: none; }
}
@media (max-width: 900px) { .inbox-date { display: none; } }.inbox-folders { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .8rem; }
.inbox-folders .chip { white-space: nowrap; }
.inbox-folders-lbl { margin: 0 .2rem 0 .5rem; white-space: nowrap; }
.mail-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
/* Posteingang: erkanntes Objekt */
.obj-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 650; padding: .1rem .45rem; border-radius: 999px; background: var(--sunken); color: var(--text-2); white-space: nowrap; }
.inbox-obj-filter { max-width: 240px; margin: 0; }.person-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; background: var(--s-neu-bg); color: var(--s-neu); white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.filter-banner { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .55rem .8rem; margin: 0 0 .7rem; border-radius: 10px; background: var(--s-neu-bg); font-size: .88rem; }.match-box { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; background: var(--surface-2); }
.match-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; }
.match-list li.ok .ico { color: var(--ok); }
.match-list li.miss { color: var(--muted); }
.role-tag, .craft-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 650; padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
}

/* Rollenfarben – überall gleich: Mieter blau, Eigentümer violett, beides rosé, Handwerker türkis, Mitarbeiter grün, Sonstige grau */
.r-both { background: var(--r-both); color: var(--r-both-ink); }
.r-staff { background: var(--r-staff); color: var(--r-staff-ink); }
.r-other { background: var(--r-other); color: var(--r-other-ink); }
.role-tag.owner { background: var(--r-owner); color: var(--r-owner-ink); }
.role-tag.tenant { background: var(--r-tenant); color: var(--r-tenant-ink); }
.role-tag.both { background: var(--r-both); color: var(--r-both-ink); }
.craft-tag { background: var(--r-craft); color: var(--r-craft-ink); }
.chip .kdot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: .05rem; }
.kdot.r-tenant { background: var(--r-tenant-ink); } .kdot.r-owner { background: var(--r-owner-ink); } .kdot.r-both { background: var(--r-both-ink); }
.kdot.r-craftsman { background: var(--r-craft-ink); } .kdot.r-staff { background: var(--r-staff-ink); } .kdot.r-other { background: var(--r-other-ink); }

/* Linke Leiste: Outlook-Unterordner unter „Posteingang“ (nur lesend) */
.sidenav a.nav-sub { display: flex; align-items: center; gap: .4rem; padding: .28rem .6rem .28rem 2.35rem; font-size: .82rem; color: var(--text-2); border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; min-width: 0; }
.sidenav a.nav-sub.d2 { padding-left: 3.1rem; }
.sidenav a.nav-sub span { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.sidenav a.nav-sub small { color: var(--muted); font-size: .72rem; flex: none; }
.sidenav a.nav-sub:hover { background: var(--surface-2); color: var(--text); }
.sidenav a.nav-sub.active { background: var(--sunken); color: var(--text); font-weight: 650; }

/* Angebote: Status der Word-Vorlage oben, gut sichtbar */
.tpl-status { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; margin: 0 0 .9rem; border-radius: 10px; font-size: .88rem; color: var(--text); text-decoration: none; border: 1px solid var(--line); }
.tpl-status.ok { background: var(--s-erledigt-bg); border-color: transparent; }
.tpl-status.ok .ico { color: var(--s-erledigt); flex: none; }
.tpl-status.muster { background: var(--surface-2); }
.tpl-status .tpl-meta { color: var(--text-2); }
.tpl-status:hover { text-decoration: none; filter: brightness(.98); }

/* Kalendereinträge: Rückruf */
.note-kind { margin: 0 0 .7rem; }
.note-kind label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; margin: 0; }
.note-kind input { position: absolute; opacity: 0; pointer-events: none; }
.note-callback { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); gap: 0 1rem; padding: .6rem .7rem .1rem; margin-bottom: .6rem; border-radius: 10px; background: var(--s-neu-bg); }
.note-callback[hidden] { display: none; }
@media (max-width: 700px) { .note-callback { grid-template-columns: 1fr; } }
.cb-tag { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; font-weight: 650; padding: .05rem .45rem; border-radius: 999px; background: var(--s-neu-bg); color: var(--s-neu); vertical-align: .1rem; }
.cb-line { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .15rem; }
.cb-phone { font-weight: 650; white-space: nowrap; }

/* Ticket: Besichtigungen und verknüpfte Tickets */
.insp-row, .link-row { display: flex; align-items: center; gap: .4rem; padding: .3rem 0; border-top: 1px solid var(--line); font-size: .86rem; min-width: 0; }
.insp-row:first-of-type, .link-row:first-of-type { border-top: 0; }
.insp-row > a:first-child, .link-row > a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row .sdot { margin-right: .3rem; }

/* Besichtigungsprotokoll (handyfreundlich) */
.insp .card { margin-bottom: .8rem; }
.insp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .8rem; }
.insp-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .insp-grid { grid-template-columns: 1fr 1fr; } .insp-grid > :first-child { grid-column: 1 / -1; } .insp-grid.two { grid-template-columns: 1fr; } }
.insp-part { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; align-items: center; margin-bottom: .35rem; }
.insp-part input, .insp-action input { margin: 0; }
.insp-present { margin: 0; }
.insp-present input { position: absolute; opacity: 0; pointer-events: none; }
.insp-present span { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: transparent; cursor: pointer; }
.insp-present input:checked + span { background: var(--s-erledigt-bg); color: var(--s-erledigt); border-color: transparent; }
.insp-item-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.insp-item-title { margin: 0; font-weight: 650; flex: 1; min-width: 0; }
.insp-item.is-new { border-style: dashed; }
.insp-del { margin: 0; white-space: nowrap; }
.insp-rating { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.insp-rating label { margin: 0; }
.insp-rating input { position: absolute; opacity: 0; pointer-events: none; }
.insp-rating span { display: inline-block; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .82rem; cursor: pointer; }
.insp-rating .r-ok input:checked + span { background: var(--s-erledigt-bg); color: var(--s-erledigt); border-color: transparent; }
.insp-rating .r-bad input:checked + span { background: var(--p-hoch-bg); color: var(--p-hoch); border-color: transparent; }
.insp-rating .r-warn input:checked + span { background: var(--p-normal-bg); color: var(--p-normal); border-color: transparent; }
.insp-rating .r-info input:checked + span { background: var(--r-tenant); color: var(--r-tenant-ink); border-color: transparent; }
.insp-photos { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.insp-photos figure { position: relative; margin: 0; width: 92px; height: 92px; border-radius: 9px; overflow: hidden; background: var(--sunken); }
.insp-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insp-photos figure .icon-btn { position: absolute; top: 3px; right: 3px; background: rgba(255, 255, 255, .9); }
.insp-add-photo { width: 92px; height: 92px; border-radius: 9px; border: 1.5px dashed var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; cursor: pointer; font-size: .8rem; color: var(--text-2); margin: 0; }
.insp-add-photo.busy { opacity: .5; pointer-events: none; }
.insp-action { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 150px auto; gap: .4rem; align-items: center; margin-bottom: .35rem; }
@media (max-width: 600px) { .insp-action { grid-template-columns: 1fr 1fr; } .insp-action > input:nth-of-type(2) { grid-column: 1 / -1; } }
.insp-foot { display: flex; justify-content: flex-end; gap: .5rem; position: sticky; bottom: 0; padding: .7rem 0; background: var(--bg, var(--surface-2)); z-index: 3; }
.sign-pad { width: 100%; max-width: 600px; height: 160px; border: 1.5px dashed var(--line-2); border-radius: 10px; background: #fff; touch-action: none; display: block; }
.insp-sigs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.insp-sigs figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .4rem; border: 1px solid var(--line); border-radius: 9px; }
.insp-sigs img { height: 54px; background: #fff; border-radius: 6px; }
.insp-danger { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }

/* Mail-Zuordnung: Vorschläge und Auswahl */
.match-pick { margin: .3rem 0 0; }
.match-pick select { margin: 0; font-size: .84rem; }
.match-sugg { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .35rem 0 0; padding: .35rem .5rem; border-radius: 8px; background: var(--p-normal-bg); }
.match-sugg span { flex: 1 1 auto; min-width: 0; }
.match-sugg .btn { margin: 0; }

/* Mail im HTML-Format */
.mail-frame { width: 100%; min-height: 160px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: block; }
.mail-plain { margin-top: .5rem; }
.mail-plain .mail-body { margin-top: .4rem; }

/* Startseite: Tickets und Posteingang je eine volle Zeile; Mails mit Anhang, Eingang, Absender, Betreff, Objekt */
.db-pairs > .db-wide { grid-column: 1 / -1; }
.db-mails { display: flex; flex-direction: column; }
.db-mail { display: grid; grid-template-columns: 30px 44px 150px minmax(140px, 220px) minmax(0, 1fr) 150px; gap: .7rem; align-items: center; padding: .5rem .2rem; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.db-mail:first-child { border-top: 0; }
.db-mail:hover { background: var(--surface-2); text-decoration: none; }
.dm-date { font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.dm-from { display: flex; flex-direction: column; min-width: 0; }
.dm-from strong, .dm-from small, .dm-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-from strong { font-size: .88rem; } .dm-from small { color: var(--muted); font-size: .74rem; }
.dm-subj { font-weight: 600; font-size: .9rem; min-width: 0; }
.dm-obj { text-align: right; white-space: nowrap; overflow: hidden; }
@media (max-width: 900px) { .db-mail { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: 'ico from obj' 'ico subj att'; row-gap: .1rem; } .db-mail .db-ico { grid-area: ico; } .dm-from { grid-area: from; } .dm-subj { grid-area: subj; font-weight: 500; } .dm-obj { grid-area: obj; } .dm-att { grid-area: att; } .dm-date { display: none; } }

/* Pflichtfotos: Soll-Anzahl je Rubrik einstellbar */
.pf-target { display: inline-flex; align-items: center; gap: 0; margin: 0 .3rem; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; font-size: .72rem; vertical-align: middle; }
.pf-target span { padding: 0 .45rem; color: var(--text-2); white-space: nowrap; }
.pf-target button { border: 0; background: var(--surface-2); width: 22px; height: 22px; cursor: pointer; font-size: .9rem; line-height: 1; color: var(--text); }
.pf-target button:hover:not(:disabled) { background: var(--sunken); }
.pf-target button:disabled { opacity: .35; cursor: default; }

/* Handy: kein automatisches Heranzoomen beim Antippen von Eingabefeldern (iPhone zoomt bei Schrift unter 16 px) */
@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
  /* Hilfetext unter der Volltextsuche kompakt statt halber Bildschirm */
  .search-tips { min-width: 0; max-height: 30vh; overflow: auto; padding: .5rem .7rem; gap: .3rem; font-size: .78rem; }
  .search-drop { min-width: 0; max-height: 60vh; }
}

/* Objekt-Kartei am Handy: Bereiche als Auswahlliste, Ansicht einzeilig */
.rtab-select { display: none; }
@media (max-width: 700px) {
  .rtabs { display: none; }
  .rtab-select { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 1rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .rtab-select > span { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; font-size: .85rem; color: var(--text-2); white-space: nowrap; }
  .rtab-select select { flex: 1; min-width: 0; margin: 0; font-weight: 650; }
  .pview-bar { flex-wrap: nowrap; }
  .pview-seg { flex-wrap: nowrap; }
  .pview-seg button { padding: .35rem .6rem; white-space: nowrap; }
  .pv-long { display: none; }
}

/* Fotos: sortieren & drehen */
.gallery figure { position: relative; }
.shot-tools { position: absolute; top: 4px; left: 4px; display: inline-flex; gap: 2px; margin: 0; background: rgba(0,0,0,.55); border-radius: 99px; padding: 2px; }
.shot-tools button { width: 28px; height: 26px; border: 0; border-radius: 99px; background: transparent; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.shot-tools button:hover:not(:disabled) { background: rgba(255,255,255,.25); }
.shot-tools button:disabled { opacity: .3; cursor: default; }
@media (max-width: 700px) { .shot-tools button { width: 32px; height: 30px; } }

/* Großansicht: blättern */
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }
.lb-nav:hover { background: rgba(255,255,255,.32); }
.lb-prev { left: .6rem; } .lb-next { right: .6rem; }
.lb-count { position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.5); padding: .15rem .7rem; border-radius: 99px; font-size: .85rem; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .lb-nav { width: 40px; height: 56px; background: rgba(0,0,0,.35); } }

/* Offene Tickets oben in der Objekt-Kartei */
.open-tix { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; padding: .35rem .8rem; border-radius: 99px; font-weight: 600; font-size: .9rem;
  background: var(--s-neu-bg); color: var(--s-neu); border: 1px solid currentColor; text-decoration: none; }
.open-tix b { font-size: 1.05rem; }
.open-tix.urgent { background: var(--p-hoch-bg); color: var(--p-hoch); }
.open-tix.none { background: var(--ok-bg); color: var(--ok); border-color: transparent; font-weight: 500; font-size: .82rem; }
.cover-badge { background: var(--s-neu); color: #fff; padding: .15rem .6rem; font-size: .8rem; }

/* Umschalter: aktive Auswahl deutlich (auch im Dunkelmodus) */
.seg a.on, .seg-opt input:checked + span, .seg label:has(input:checked) { background: var(--primary); color: var(--primary-ink); }
.seg-label { font-size: .8rem; color: var(--muted); margin-right: .3rem; }
.prop-list td.num { font-variant-numeric: tabular-nums; width: 5.5rem; }
.open-n { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .55rem; border-radius: 99px; font-weight: 700; font-size: .82rem; background: var(--s-neu-bg); color: var(--s-neu); }
.open-n.urgent { background: var(--p-hoch-bg); color: var(--p-hoch); }

/* Suche: Rubriken kräftiger, dritte Zeile „gefunden über“ */
.search-drop .sg { font-size: .74rem; font-weight: 800; letter-spacing: .07em; color: var(--text); padding: .7rem .6rem .3rem; margin-top: .25rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .4rem; }
.search-drop .sg:first-child { border-top: 0; margin-top: 0; }
.search-drop .sg span { background: var(--sunken); color: var(--text-2); border-radius: 99px; padding: 0 .45rem; font-size: .7rem; letter-spacing: 0; }
.search-drop a .w, .search-why { display: block; font-size: .78rem; color: var(--s-neu); line-height: 1.35; white-space: normal; }
.search-drop a .w { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Einheiten & Bewohner: aufgeräumte Karte */
.unit-card header { flex-wrap: nowrap; align-items: flex-start; }
.uc-title { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; min-width: 0; }
.uc-title strong { font-size: 1.05rem; }
.uc-edit { flex: none; }
.uc-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: .65rem 0 .4rem; }
.uc-actions a, .uc-actions button { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .45rem .4rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; min-width: 0; }
.uc-actions a:hover, .uc-actions button:hover { background: var(--hover); }
.uc-actions span { overflow: hidden; text-overflow: ellipsis; }
.uc-actions b { display: inline-block; min-width: 1.2em; padding: 0 .3rem; border-radius: 99px; background: var(--sunken); font-size: .72rem; text-align: center; }
.uc-person { align-items: flex-start; flex-wrap: nowrap; border-top: 1px solid var(--line); padding-top: .55rem; margin-top: .2rem; }
.uc-person .grow { min-width: 0; }
.uc-name { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; }
.uc-contact { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .2rem; font-size: .84rem; }
.uc-contact a, .uc-contact > span { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; max-width: 100%; }
.uc-contact a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .uc-actions { gap: .3rem; }
  .uc-actions a, .uc-actions button { flex-direction: column; gap: .15rem; padding: .45rem .2rem; font-size: .74rem; }
}

/* Neues Ticket: weiterer TOP aus demselben Protokoll */
.series-hint { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; margin-bottom: .8rem; border-radius: var(--radius-sm); background: var(--s-neu-bg); color: var(--text); border: 1px solid var(--s-neu); font-size: .9rem; }
.series-hint > .ico { color: var(--s-neu); flex: none; margin-top: .15rem; }

/* Notiz bearbeiten: Anhänge */
.msg-edit-atts { display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: center; margin: .3rem 0; }
.msg-edit-atts .check { margin: 0; }
.msg-edit-add { margin: .4rem 0; }
.msg-edit-add input { margin-top: .25rem; }

/* Notiz bearbeiten: Anhänge */
.msg-edit-atts { display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: center; margin: .3rem 0; }
.msg-edit-atts .check { margin: 0; }
.msg-edit-add { margin: .4rem 0; }
.msg-edit-add input { margin-top: .25rem; }

/* Neues Ticket: Priorität und Frist direkt unter dem Betreff hervorheben */
.urgency-box { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .7rem .8rem .2rem; margin: 0 0 .8rem; }
.urgency-box [data-due-auto] { color: var(--s-neu); }
.urgency-box.grid3 { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: flex-start; }
.urgency-box > div:first-child { flex: 0 0 auto; }
.urgency-box > label { flex: 1 1 230px; min-width: 0; }

/* Verwaltung → Workflows: Volltextsuche */
.wf-find { margin-bottom: 1rem; }
.wf-find-q { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; color: var(--muted); }
.wf-find-q input { font-size: 1.02rem; padding: .7rem .9rem; }
.wf-find-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.wf-find-filters select { width: auto; min-width: 0; padding: .35rem .6rem; font-size: .85rem; }
.wf-find-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wf-find-list li + li { border-top: 1px solid var(--line); }
.wf-find-list a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .2rem .7rem; align-items: center; padding: .5rem .7rem; color: var(--text); text-decoration: none; }
.wf-find-list a:hover { background: var(--hover); }
.wff-nr { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.wff-main { display: flex; flex-direction: column; min-width: 0; }
.wff-main strong { overflow: hidden; text-overflow: ellipsis; }
.wff-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wff-where { color: var(--s-neu); }
.wff-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.wff-aud { font-size: .72rem; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 99px; padding: 0 .45rem; }
.wf-meta-edit { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .7rem; margin: 0 0 .8rem; }
.wf-meta-edit summary { cursor: pointer; }
@media (max-width: 700px) {
  .wf-find-list a { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .wff-tags { grid-column: 2; justify-content: flex-start; }
}
/* Neues Ticket: Zusatzangaben des gewählten Workflows */
.wf-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .15rem .7rem; margin: .5rem 0 0; padding: .5rem .7rem; font-size: .82rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.wf-meta dt { color: var(--muted); }
.wf-meta dd { margin: 0; }

/* Ticket: Objekt auf einen Blick (Foto, Anschrift, Eckdaten) */
.tk-obj { display: flex; gap: .8rem; align-items: center; padding: .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); text-decoration: none; max-width: 640px; }
.tk-obj:hover { border-color: var(--line-2); background: var(--hover); }
.tk-obj-img { flex: none; width: 96px; height: 72px; border-radius: 6px; background: var(--sunken) center/cover no-repeat; display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.tk-obj-img .obj-ph { transform: scale(.7); }
.tk-obj-txt { display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
.tk-obj-txt strong { font-size: 1rem; line-height: 1.25; }
.tk-obj-city { color: var(--text-2); font-size: .88rem; }
.tk-obj-facts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.tk-obj-facts > span { font-size: .74rem; padding: .05rem .5rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text-2); }
.tk-obj-facts .tk-obj-open { background: var(--s-neu-bg); color: var(--s-neu); border-color: transparent; font-weight: 600; display: inline-flex; align-items: center; gap: .2rem; }
@media (max-width: 700px) { .tk-obj { max-width: none; } .tk-obj-img { width: 72px; height: 56px; } }

/* Ticketliste: Status vorne, deutlich, mit Fortschritt darunter */
.tl-status { white-space: nowrap; }
.status.st-big { font-size: .82rem; padding: .25rem .7rem; font-weight: 700; border: 1px solid currentColor; }
.tl-prog { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .72rem; color: var(--muted); }
.tl-prog .kprog { width: 48px; margin: 0; }
.tl-prog .kprog { display: inline-block; flex: none; }

/* Posteingang: eigene Spalten Objekt, Einheit, Kontakt; Eingang zweizeilig */
.inbox-date time { display: flex; flex-direction: column; line-height: 1.25; }
.inbox-date time b { font-weight: 650; color: var(--text-2); }
.inbox-date time span { font-weight: 500; }
.inbox-obj, .inbox-unit, .inbox-contact { display: none; min-width: 0; font-size: .8rem; line-height: 1.3; }
.inbox-obj strong, .inbox-contact strong { display: flex; align-items: center; gap: .25rem; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-obj small, .inbox-contact small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-unit strong { font-weight: 650; color: var(--text); }
.inbox-contact .role-tag, .inbox-contact .craft-tag { display: inline-block; margin-top: .15rem; }
.inbox-unit-inline { display: none !important; }
@media (min-width: 901px) {
  .inbox-obj, .inbox-contact { display: flex; flex-direction: column; }
  .inbox-row, .inbox-head { grid-template-columns: 28px 34px 70px minmax(110px, 170px) minmax(160px, 1fr) minmax(120px, 170px) minmax(110px, 150px) 104px; column-gap: .6rem; }
  .inbox-head .inbox-unit { display: none; }
  .inbox-unit-inline { display: block !important; }
}
@media (min-width: 1600px) {
  .inbox-row, .inbox-head { grid-template-columns: 28px 34px 70px minmax(130px, 190px) minmax(200px, 1fr) 180px 80px 160px 110px; }
  .inbox-unit, .inbox-head .inbox-unit { display: block; }
  .inbox-unit-inline { display: none !important; }
}
@media (min-width: 901px) { .inbox-meta { white-space: normal; } .inbox-meta .reply-tag small { font-weight: 500; } }
@media (min-width: 901px) { .inbox-meta .ticket-tag { white-space: nowrap; font-size: .7rem; } }

/* Frist-Schnellwahl: gleich breite Knöpfe, oben Zeitraum, darunter Wochentag und Datum */
.due-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: .4rem; }
.due-presets button { display: flex; flex-direction: column; align-items: center; gap: 0; padding: .3rem .2rem; border-radius: var(--radius-sm); line-height: 1.2; font-size: .78rem; min-width: 0; }
.due-presets button b { font-weight: 700; white-space: nowrap; }
.due-presets button small { font-size: .68rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.due-presets button.on small { color: inherit; opacity: .85; }
.due-presets button:not([data-v]), .due-presets button[data-v=""] { grid-column: 1 / -1; justify-self: start; flex-direction: row; padding: .15rem .5rem; border-radius: 99px; }
.urgency-box .due-presets, .sidebar .due-presets, aside .due-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .due-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Mehrfach-Upload: Vorschau der gewählten Dateien */
.file-pick { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; align-items: center; }
.file-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 240px; padding: .2rem .25rem .2rem .3rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); font-size: .78rem; }
.file-chip img { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; flex: none; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.file-chip button:hover { color: var(--p-hoch); }
.file-count { flex-basis: 100%; }

/* Wartet auf Rückmeldung – von wem */
.wait-on { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0 .2rem; padding: .5rem .7rem; border-radius: 12px; background: var(--s-wartet-bg); }
.wait-on > span { display: inline-flex; align-items: center; gap: .3rem; font-weight: 650; color: var(--s-wartet); margin-right: .2rem; font-size: .88rem; }
.wait-on .chip { cursor: pointer; border: 1px solid color-mix(in srgb, var(--s-wartet) 35%, transparent); background: var(--surface); color: var(--text); font: inherit; font-size: .84rem; padding: .2rem .65rem; border-radius: 99px; min-height: 32px; }
.wait-on .chip.on { background: var(--s-wartet); color: #fff; border-color: var(--s-wartet); font-weight: 650; }

.tk .steps form button { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.inbox-ico.sent { color: var(--s-offen); }

/* Eigentümerversammlungen */
.etv-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; padding: .12rem .55rem; border-radius: 99px; background: var(--s-offen-bg); color: var(--s-offen); white-space: nowrap; text-decoration: none; vertical-align: middle; }
.etv-pill b { font-weight: 800; letter-spacing: .02em; }
.etv-pill.soon { background: var(--s-offen); color: #fff; }
a.etv-pill:hover { filter: brightness(.95); text-decoration: none; }
.prop-cards .etv-pill { margin: .35rem 0 .1rem; }
.etv-filter { margin-bottom: .8rem; }
.etv-filter select { max-width: 360px; margin: 0; }
.etv-new { padding: 0; margin-bottom: 1rem; border: 0; background: none; box-shadow: none; }
.etv-new > summary { list-style: none; display: inline-flex; }
.etv-new > summary::-webkit-details-marker { display: none; }
.etv-new[open] > summary { margin-bottom: .6rem; }
.etv-form { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; padding: 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.etv-form .span2 { grid-column: 1 / -1; }
.etv-times label { flex: 1; }
.etv-who { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: center; }
.etv-who legend { font-size: .85rem; font-weight: 600; padding: 0; margin-bottom: .2rem; }
.etv-h { font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; margin: 1.3rem 0 .6rem; }
.etv-list { display: flex; flex-direction: column; gap: .5rem; }
.etv-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center; padding: .75rem 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--s-offen); }
.etv-row.soon { border-left-color: var(--s-wartet); }
.etv-row.past { border-left-color: var(--s-geschlossen); opacity: .9; }
.etv-date { display: flex; flex-direction: column; align-items: center; line-height: 1.15; text-align: center; }
.etv-date strong { font-size: 1.35rem; }
.etv-wd, .etv-y, .etv-time { font-size: .76rem; color: var(--muted); }
.etv-time { font-weight: 650; color: var(--text-2); margin-top: .15rem; }
.etv-main { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.etv-prop { font-weight: 700; color: var(--text); }
.etv-loc { display: flex; align-items: baseline; gap: .35rem; }
.etv-loc svg { flex: none; align-self: center; }
.etv-side { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.etv-late { color: var(--err); font-weight: 600; }
.etv-missing { display: flex; flex-wrap: wrap; gap: .4rem; }
.etv-past > summary { cursor: pointer; list-style: none; }
.etv-past > summary::-webkit-details-marker { display: none; }
.etv-prop-head { margin-bottom: .7rem; }
.etv-next { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .2rem; }
.etv-upload { margin-bottom: 1rem; }
.etv-up-grid { display: grid; grid-template-columns: 130px 1fr 1fr 1.2fr; gap: .2rem .8rem; text-align: left; }
.etv-year h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.etv-ev { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .45rem .6rem; border-radius: 8px; background: var(--sunken); margin-bottom: .4rem; }
.etv-docs { margin: .3rem 0 0; }
.etv-docs li { align-items: center; }
.etv-doctype { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 99px; background: var(--sunken); color: var(--text-2); margin-right: .35rem; }
.etv-doctype.prot { background: var(--s-erledigt-bg); color: var(--s-erledigt); }
.ag-item.k-etv { border-left-color: var(--s-offen); }
@media (max-width: 720px) {
  .etv-form, .etv-up-grid { grid-template-columns: 1fr; }
  .etv-row { grid-template-columns: 64px 1fr; }
  .etv-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
}
.step-no.top-no { width: auto; min-width: 0; padding: 0 .6rem; border-radius: 99px; white-space: nowrap; font-size: .78rem; }
.top-move { display: inline-flex; gap: .2rem; flex: none; }
.top-move .icon-btn { width: 32px; height: 32px; font-size: 1rem; font-weight: 700; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.top-move .icon-btn:disabled { opacity: .3; cursor: default; }
.insp-item.moved { animation: top-flash .8s ease; }
@keyframes top-flash { from { box-shadow: 0 0 0 3px var(--primary); } to { box-shadow: none; } }
/* Ladebalken beim Foto-Upload */
.upload-progress { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999; width: min(440px, calc(100% - 32px)); padding: .7rem .9rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.upload-progress .up-text { font-size: .85rem; font-weight: 650; margin-bottom: .45rem; }
.upload-progress .up-bar { height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.upload-progress .up-bar span { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 99px; transition: width .2s ease; }

/* Protokolle als Karten mit TOP-Liste */
.insp-cards { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.insp-card { display: grid; grid-template-columns: 86px minmax(0, 1fr) minmax(220px, 34%); gap: 1.1rem; align-items: start; padding: 1rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.insp-card:hover { border-color: var(--line-2); box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.ic-date { display: flex; flex-direction: column; align-items: center; padding: .55rem .3rem; border-radius: 12px; background: var(--primary); color: var(--primary-ink); text-decoration: none; line-height: 1.15; }
.ic-date span { font-size: .72rem; opacity: .8; }
.ic-date strong { font-size: 1.35rem; }
.ic-date small { margin-top: .25rem; font-size: .72rem; font-weight: 650; opacity: .9; }
.ic-main { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.ic-kind { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ic-kind .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ic-title { font-size: 1.08rem; font-weight: 700; color: var(--text); text-decoration: none; }
.ic-sum { display: flex; flex-wrap: wrap; gap: .3rem; }
.ic-rate { font-size: .72rem; font-weight: 650; padding: .08rem .5rem; border-radius: 99px; }
.ic-rate.r-ok { background: var(--s-erledigt-bg); color: var(--s-erledigt); }
.ic-rate.r-bad { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.ic-rate.r-warn { background: var(--s-wartet-bg); color: var(--s-wartet); }
.ic-rate.r-info { background: var(--s-neu-bg); color: var(--s-neu); }
.ic-actions { display: flex; gap: .4rem; margin-top: .2rem; }
.ic-tops { list-style: none; margin: 0; padding: .55rem .7rem; border-radius: 10px; background: var(--sunken); font-size: .78rem; display: flex; flex-direction: column; gap: .22rem; max-height: 220px; overflow: auto; }
.ic-tops li { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ic-no { flex: none; font-size: .66rem; font-weight: 800; padding: .02rem .38rem; border-radius: 5px; background: var(--primary); color: var(--primary-ink); }
.ic-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ic-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ic-dot.r-ok { background: var(--s-erledigt); } .ic-dot.r-bad { background: var(--err); } .ic-dot.r-warn { background: var(--s-wartet); } .ic-dot.r-info { background: var(--s-neu); }
.ic-ph { flex: none; display: inline-flex; align-items: center; gap: .15rem; color: var(--muted); font-size: .7rem; }
@media (max-width: 760px) {
  .insp-card { grid-template-columns: 64px minmax(0, 1fr); }
  .ic-tops { grid-column: 1 / -1; }
}
/* Protokoll-Karten: Status, PDF, TOPs mit Einstufung und Fotozahl */
.insp-card { grid-template-columns: 86px minmax(0, 1fr) minmax(280px, 44%); }
.ic-flags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ic-flag { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 650; padding: .14rem .55rem; border-radius: 99px; text-decoration: none; }
.ic-flag.ok { background: var(--s-erledigt-bg); color: var(--s-erledigt); }
.ic-flag.warn { background: var(--s-wartet-bg); color: var(--s-wartet); }
.ic-flag.pdf { background: var(--primary); color: var(--primary-ink); }
.ic-flag.pdf:hover { filter: brightness(1.15); }
.ic-flag.none { background: var(--sunken); color: var(--muted); }
.ic-tops { gap: .3rem; max-height: 290px; }
.ic-tops li { gap: .5rem; padding: .15rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.ic-tops li:last-child { border-bottom: 0; }
.ic-tops .ic-rate { flex: none; font-size: .66rem; padding: .05rem .45rem; white-space: nowrap; }
.ic-rate.r-none { background: var(--surface); color: var(--muted); border: 1px dashed var(--line-2); }
.ic-ph { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 26px; line-height: 1; gap: 1px; color: var(--text-2); }
.ic-ph b { font-size: .68rem; font-weight: 750; }
.ic-ph.zero { color: var(--muted); opacity: .55; }
@media (max-width: 760px) { .insp-card { grid-template-columns: 64px minmax(0, 1fr); } }
.share-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999; max-width: calc(100% - 32px); padding: .65rem 1rem; border-radius: 10px; background: var(--primary); color: var(--primary-ink); font-size: .88rem; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.2); transition: opacity .5s; }
.share-toast.out { opacity: 0; }

/* Handy: Zurück-Knopf bleibt beim Scrollen unter der Kopfleiste stehen */
@media (max-width: 900px) {
  .back-link:not([hidden]) { display: flex; width: fit-content; max-width: 100%; position: sticky; top: calc(var(--topbar-h, 58px) + 8px); z-index: 25; box-shadow: 0 3px 12px rgba(0,0,0,.14); }
}
.btn.busy { opacity: .7; pointer-events: none; }
/* WhatsApp-Gruppen */
.wa-list { display: flex; flex-direction: column; gap: .5rem; }
.wa-row { padding: .7rem .9rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.wa-name { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.wa-name strong { font-size: 1.02rem; }
.wa-no { font-size: .7rem; font-weight: 800; padding: .1rem .45rem; border-radius: 6px; background: var(--primary); color: var(--primary-ink); }
.wa-desc { margin-top: .35rem; }
.wa-desc summary { cursor: pointer; color: var(--muted); }
.wa-desc pre { white-space: pre-wrap; font: inherit; font-size: .85rem; background: var(--sunken); border-radius: 8px; padding: .6rem .8rem; margin: .4rem 0; }
.wa-check-form { margin: 0; display: inline-flex; }
.wa-check { width: 32px; height: 32px; border-radius: 9px; border: 2px solid var(--line-2); background: var(--surface); color: transparent; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.wa-check:hover { border-color: var(--s-erledigt); color: var(--s-erledigt); }
.wa-check.on { background: var(--s-erledigt); border-color: var(--s-erledigt); color: #fff; }
.wa-row.done { opacity: .75; }
.wa-row.done strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
.wa-progress { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .2rem; font-size: .9rem; }
.wa-bar { flex: 1; max-width: 360px; height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.wa-bar span { display: block; height: 100%; background: var(--s-erledigt); border-radius: 99px; transition: width .3s; }
.wa-done-box { margin-top: 1rem; }
.wa-done-box > summary { cursor: pointer; list-style: none; }
.wa-done-box > summary::-webkit-details-marker { display: none; }
/* WhatsApp-Gruppen: aufgeräumte Zeilen (Haken · Kopieren · Name · Info · Beschreibung) */
.wa-list { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.wa-row { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: .55rem .9rem; background: transparent; }
.wa-row:last-child { border-bottom: 0; }
.wa-row:hover { background: color-mix(in srgb, var(--sunken) 60%, transparent); }
.wa-name { display: grid; grid-template-columns: 34px 92px minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; }
.wa-copy { justify-content: center; width: 92px; white-space: nowrap; }
.wa-title { font-size: .98rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-when { white-space: nowrap; }
.wa-desc { margin: 0; }
.wa-desc summary { font-size: .8rem; white-space: nowrap; }
.wa-desc[open] { grid-column: 1 / -1; }
.wa-desc-body { display: flex; gap: .7rem; align-items: flex-start; margin: .4rem 0 .2rem 104px; }
.wa-desc-body pre { margin: 0; flex: 1; }
.wa-list .card.empty { margin: 0; border: 0; border-radius: 0; }
@media (max-width: 720px) {
  .wa-name { grid-template-columns: 34px 82px minmax(0, 1fr); }
  .wa-copy { width: 82px; }
  .wa-title { white-space: normal; }
  .wa-when, .wa-desc { grid-column: 3 / -1; }
  .wa-desc[open] { grid-column: 1 / -1; }
  .wa-desc-body { margin-left: 0; flex-direction: column; }
}
/* WhatsApp-Gruppen: zwei Kopier-Knöpfe vorne */
.wa-name { grid-template-columns: 34px 132px 182px minmax(0, 1fr) auto auto; }
.wa-copy { width: 100%; }
.wa-desc pre { margin: .45rem 0 .2rem; }
.wa-desc[open] pre { margin-left: calc(34px + 132px + 182px + 2.1rem); }
@media (max-width: 720px) {
  .wa-name { grid-template-columns: 34px 1fr 1fr; }
  .wa-title { grid-column: 1 / -1; order: -1; }
  .wa-when, .wa-desc { grid-column: 1 / -1; }
  .wa-desc[open] pre { margin-left: 0; }
}
/* Übersicht: „Meine Tickets“ und „Alle Tickets“ klar unterscheiden */
.db-card > header h2.db-h2-big { font-size: 1.02rem; text-transform: none; letter-spacing: 0; color: var(--text); gap: .55rem; }
.db-scope { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .14rem .55rem; border-radius: 99px; }
.db-scope.mine { background: var(--primary); color: var(--primary-ink); }
.db-scope.all { background: var(--sunken); color: var(--text-2); border: 1px solid var(--line-2); }
.db-card.db-mine { border: 2px solid var(--primary); box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.db-card > header { flex-wrap: wrap; }
.db-card > header h2.db-h2-big { flex-wrap: wrap; white-space: nowrap; }
.db-scope { white-space: nowrap; }
/* Tageszähler an Terminen */
.day-counter { flex: none; align-self: center; margin-left: auto; }
.ag-item .day-counter { margin: 0 .4rem 0 .6rem; }
.db-agenda a { display: flex; align-items: center; gap: .6rem; }
.db-agenda .day-counter { margin-left: auto; }
.ag-item { grid-template-columns: 110px minmax(0, 1fr) auto auto; }
@media (max-width: 720px) { .ag-item { grid-template-columns: 70px minmax(0, 1fr) auto; } .ag-item .ag-who { display: none; } }
.ag-item .day-counter { justify-self: end; width: auto; }
@media (max-width: 560px) {
  .ag-item { grid-template-columns: minmax(0, 1fr) auto; }
  .ag-item .ag-who { display: none; }
  .ag-item .day-counter { margin: 0; }
}
/* Tageszähler-Legende */
.day-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .8rem; }
.day-legend .due-chip { margin-left: .4rem; }
.day-legend a { margin-left: .4rem; }
/* Benutzer-Ansicht (Administrator sieht als anderer Benutzer) */
.view-as-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .5rem 1rem; background: #f08c00; color: #fff; font-size: .9rem; font-weight: 600; }
.view-as-bar form { margin: 0; }
.view-as-bar .btn { background: #fff; color: #7a3d00; border-color: #fff; }
body.viewing-as .topbar { top: 40px; }
@media (max-width: 720px) { body.viewing-as .topbar { top: 64px; } }
/* Benutzer & Protokolle */
.log-section { margin-top: 1.4rem; }
.log-filter { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.log-who { display: flex; flex-wrap: wrap; gap: .35rem; }
.log-who .chip-check > span { display: inline-flex; align-items: center; gap: .35rem; }
.log-more { gap: .5rem; flex-wrap: wrap; }
.log-more input[type=search] { min-width: 220px; flex: 1; margin: 0; }

/* Posteingang am Handy: mehrzeilig statt gequetscht.
   Zeile 1 Absender + Anhänge + Zeit, Zeile 2 Betreff (bis 2 Zeilen), Zeile 3 Vorschau, Zeile 4 Objekt/Kontakt/Ticket */
@media (max-width: 900px) {
  .inbox-row { grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "ico from att date" "ico subj subj subj" "ico meta meta meta"; column-gap: .55rem; row-gap: .15rem; align-items: start; padding: .6rem .8rem; }
  .inbox-row .inbox-ico { grid-area: ico; margin-top: .1rem; }
  .inbox-row .inbox-from { grid-area: from; align-self: center; }
  .inbox-row .inbox-from small { display: none; }
  .inbox-row .inbox-att { grid-area: att; align-self: center; }
  .inbox-row .att-col { padding: .05rem .45rem; font-size: .75rem; }
  .inbox-row .inbox-mtime { display: block; grid-area: date; align-self: center; font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .inbox-row .inbox-subj { grid-area: subj; }
  .inbox-row .inbox-subj strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; line-height: 1.3; }
  .inbox-row .inbox-subj small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; line-height: 1.35; margin-top: .1rem; }
  .inbox-row .inbox-meta { grid-area: meta; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .3rem; margin-top: .15rem; white-space: normal; }
  .inbox-row .inbox-meta:not(:has(> *)) { display: none; }
}
@media (min-width: 901px) { .inbox-mtime { display: none; } }

/* Kopfleiste am Handy etwas größer: Menü-Knopf, Logo, Suche, Teilen, Neu laden, Profilbild */
@media (max-width: 900px) {
  :root { --topbar-h: 64px; }
  .topbar { height: 64px; gap: .8rem; padding: 0 12px; }
  .nav-toggle { width: 46px; height: 46px; margin-left: -6px; }
  .nav-toggle svg { width: 30px; height: 30px; }
  .brand img { height: 40px; }
  .search-toggle { width: 46px; height: 46px; }
  .search-toggle svg { width: 26px; height: 26px; }
  .me { gap: .6rem; }
  .reload-btn { width: 42px; height: 42px; }
  .reload-btn svg { width: 22px; height: 22px; }
  .user-menu > summary .avatar { width: 42px !important; height: 42px !important; font-size: 16px !important; }
  .sidenav { top: 64px; }
  body.nav-open .nav-backdrop { inset: 64px 0 0 0; }
  body.search-open .top-search { top: 64px; }
  body.search-open .search-drop, body.search-open .search-tips { top: 118px; max-height: calc(100vh - 136px); }
}

/* Mail-Liste: „+ Ticket“ direkt an jeder Mail ohne Ticket */
.row-ticket { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; }
.row-ticket:hover, .row-ticket:focus-visible { background: var(--text); color: var(--surface); border-color: var(--text); outline: none; }
@media (max-width: 900px) { .row-ticket { font-size: .78rem; padding: .25rem .7rem; } }

/* Mail-Listen (Posteingang, Übersicht): eigene Spalte „Ticket“ – Ticketnummer oder „+ Ticket“ */
.inbox-tkt { display: flex; align-items: center; min-width: 0; }
.inbox-tkt .ticket-tag { cursor: pointer; }
.inbox-tkt .ticket-tag:hover, .inbox-tkt .ticket-tag:focus-visible { filter: brightness(.95); text-decoration: underline; outline: none; }
@media (min-width: 901px) {
  .inbox-row:has(> .inbox-tkt), .inbox-head:has(> .inbox-tkt) { grid-template-columns: 28px 34px 70px minmax(110px, 170px) minmax(160px, 1fr) minmax(120px, 170px) minmax(110px, 150px) 92px 104px; }
}
@media (min-width: 1600px) {
  .inbox-row:has(> .inbox-tkt), .inbox-head:has(> .inbox-tkt) { grid-template-columns: 28px 34px 70px minmax(130px, 190px) minmax(200px, 1fr) 180px 80px 160px 100px 110px; }
}
@media (max-width: 900px) {
  .inbox-row:has(> .inbox-tkt) { grid-template-areas: "ico from att date" "ico subj subj subj" "ico meta meta tkt"; }
  .inbox-row .inbox-tkt { grid-area: tkt; justify-self: end; align-self: center; margin-top: .15rem; }
  .inbox-row .inbox-tkt > .muted { display: none; }
}
@media (max-width: 900px) { .inbox-row .inbox-mtime { justify-self: end; } }

/* Ticketliste am Handy: Kopf in einer Zeile, Schnellwahl wischbar, „Suchen & filtern“ als eine eingeklappte Leiste */
.sm-only { display: none; }
@media (max-width: 760px) {
  .lg-only { display: none; }
  .sm-only { display: inline; }
  .page-head.tickets-head { flex-direction: row; align-items: center; gap: .6rem; margin-bottom: .7rem; }
  .tickets-head h1 { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tickets-head .row { flex: none; flex-wrap: nowrap; gap: .45rem; justify-content: flex-end; }
  .tickets-head .seg { flex-wrap: nowrap; }
  .tickets-head .seg a { padding: .45rem .6rem; }
  .tickets-head .seg-txt { display: none; }
  .tickets-head .new-ticket-btn { padding: .5rem .85rem; border-radius: 99px; gap: .3rem; }
  .quick { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px .6rem; padding: 0 12px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .quick::-webkit-scrollbar { display: none; }
  .quick .chip { flex: none; white-space: nowrap; }
  [data-mobile-closed] > summary { display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: .55rem; padding: .7rem .95rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-weight: 500; margin: 0 0 .6rem; cursor: pointer; }
  [data-mobile-closed] > summary > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-mobile-closed] > summary .filter-n { min-width: 1.4em; padding: .05rem .45rem; border-radius: 99px; background: var(--text); color: var(--surface); font-size: .75rem; text-align: center; }
  [data-mobile-closed][open] > summary { color: var(--text); border-color: var(--text); }
  [data-mobile-closed] .filters { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .9rem; }
  [data-mobile-closed] .filters input[type=search], [data-mobile-closed] .filters .btn { grid-column: 1 / -1; }
  [data-mobile-closed] .filters select { min-width: 0; width: 100%; }
}

/* Öffentliche Startseite (Mieter/Eigentümer) und Meldeformular */
.welcome { text-align: center; padding: .5rem 0 1rem; }
.welcome h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.2; margin: .4rem 0 .6rem; }
.welcome-sub { color: var(--text-2); max-width: 560px; margin: 0 auto 1.6rem; line-height: 1.55; }
.welcome-q { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .8rem; }
.role-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; text-align: left; }
.role-card { display: flex; flex-direction: column; gap: .45rem; padding: 1.3rem 1.3rem 1.1rem; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.role-card:hover, .role-card:focus-visible { border-color: var(--text); transform: translateY(-2px); text-decoration: none; outline: none; }
.role-card strong { font-size: 1.2rem; }
.role-card > span:not(.role-ico):not(.role-go) { color: var(--text-2); font-size: .92rem; line-height: 1.45; }
.role-ico { width: 52px; height: 52px; border-radius: 14px; display: inline-grid; place-items: center; background: var(--primary); color: var(--primary-ink); }
.role-go { margin-top: auto; padding-top: .4rem; font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; }
.welcome-note { margin-top: 1.6rem; text-align: left; }

.role-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 99px; background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: .85rem; }
.report-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem .4rem; margin: 0 0 1rem; }
.report-form legend { font-weight: 700; padding: 0 .4rem; display: inline-flex; align-items: center; gap: .45rem; }
.grid-zip { display: grid; grid-template-columns: minmax(90px, 140px) 1fr; gap: .8rem; }
a.login-report { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--text); margin-top: 1rem; }
a.login-report span { color: var(--text-2); }
a.login-report:hover { border-color: var(--text); text-decoration: none; }
.portal-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin-bottom: .5rem; }
.portal-kicker > span:first-child { font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.portal-kicker a { margin-left: auto; }

/* Statusdauer: Ticket („Im Status“), Liste („seit x Tagen“), Statusseite (Tage je Stufe) */
.status-hist > summary { cursor: pointer; list-style: none; }
.status-hist > summary::-webkit-details-marker { display: none; }
.status-hist > summary::after { content: ' ▾'; color: var(--muted); }
.status-hist-tab { width: 100%; margin: .4rem 0 .2rem; border-collapse: collapse; }
.status-hist-tab th, .status-hist-tab td { text-align: left; padding: .2rem .4rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.status-hist-tab .r { text-align: right; }
.status-hist-tab tr.cur td { font-weight: 700; }
.status-since { display: block; margin-top: .2rem; font-size: .74rem; color: var(--muted); font-weight: 600; }
.status-since.long { color: var(--p-hoch, #c62828); }
.stage-days { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.stages li.current .stage-days { color: var(--text); font-weight: 700; }

/* Handwerker: Liste mit allen Angaben, Objekt-Chips, Matrix Objekt × Gewerk, aufklappbare Erfassung */
.obj-chip { display: inline-block; margin: 0 .25rem .25rem 0; padding: .08rem .5rem; border-radius: 99px; background: var(--sunken); color: var(--text-2); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.obj-chip.all { background: var(--s-neu-bg); color: var(--s-neu); }
.craft-table td { vertical-align: top; }
.craft-table .craft-objs { min-width: 200px; max-width: 360px; }
.craft-table .craft-notes { max-width: 260px; }
.craft-table tr.inactive { opacity: .55; }
.craft-table tr.editing td { background: var(--s-neu-bg); }
.craft-form-box > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: .45rem; list-style: none; }
.craft-form-box > summary::-webkit-details-marker { display: none; }
.craft-form-box[open] > summary { margin-bottom: .8rem; }
.craft-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.craft-matrix-wrap { max-height: 75vh; overflow: auto; }
.craft-matrix th, .craft-matrix td { vertical-align: top; white-space: nowrap; }
.craft-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.craft-matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 650; max-width: 260px; white-space: normal; }
.craft-matrix .cm-name { display: block; font-size: .82rem; }
.craft-matrix .cm-name.all { color: var(--muted); }
.craft-table .craft-objs { min-width: 170px; max-width: 240px; }
.craft-table .craft-objs .obj-chip { white-space: normal; }
.craft-table .craft-notes { min-width: 140px; max-width: 200px; }
.craft-table th, .craft-table td { padding-left: .55rem; padding-right: .55rem; }
.craft-table td[data-label="E-Mail"] { word-break: break-all; min-width: 150px; }
.craft-matrix tbody th { text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--text); }

/* Herkunft der Daten: kleines Impower-Kennzeichen (ohne Kennzeichen = aus dem Ticketsystem) */
.src-imp { display: inline-flex; align-items: center; vertical-align: middle; height: 15px; padding: 0 .35rem; border-radius: 4px; background: #e8f1f8; color: #1f5f8b; font-size: .62rem; font-weight: 800; letter-spacing: .02em; line-height: 1; text-transform: lowercase; white-space: nowrap; cursor: help; }
.src-imp.logo { background: none; padding: 0; }
.src-imp.logo img { height: 14px; width: auto; display: block; }
:root[data-theme="dark"] .src-imp:not(.logo) { background: #17324a; color: #9ccaf0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .src-imp:not(.logo) { background: #17324a; color: #9ccaf0; } }
/* Bestandssuche Dienstleister */
.prov-search { margin: .2rem 0 .8rem; }
.prov-input { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 .7rem; background: var(--surface); color: var(--muted); }
.prov-input input { border: 0 !important; box-shadow: none !important; margin: 0; flex: 1; min-width: 0; background: transparent; }
.prov-results { display: grid; gap: .3rem; margin-top: .4rem; }
.prov-results:empty { display: none; }
.prov-hit { display: flex; flex-direction: column; gap: .1rem; text-align: left; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; color: var(--text); font: inherit; }
.prov-hit:hover, .prov-hit:focus-visible { border-color: var(--text); outline: none; }
.prov-hit.on { border-color: var(--s-erledigt); background: var(--s-erledigt-bg); }
.prov-hit strong { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.prov-hit small { color: var(--muted); }
.prov-kind { font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prov-legend { margin: .35rem 0 0; }
.ext-save { padding: .6rem .8rem; border: 1px dashed var(--line-2); border-radius: 10px; margin: .4rem 0 .6rem; }

/* Nicht zugewiesene Tickets deutlich hervorheben */
.unassigned-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .55rem; border-radius: 99px; background: #fff1d6; color: #9a5b00; border: 1px solid #f0c36d; font-size: .74rem; font-weight: 750; white-space: nowrap; }
:root[data-theme="dark"] .unassigned-pill { background: #3a2a0c; color: #f3c46b; border-color: #7a5a14; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .unassigned-pill { background: #3a2a0c; color: #f3c46b; border-color: #7a5a14; } }
table.list tr.unassigned > td:first-child { box-shadow: inset 4px 0 0 #f0a020; }
.unassigned-banner { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .75rem 1rem; margin: 0 0 .9rem; border-radius: 12px; background: #fff1d6; border: 1px solid #f0c36d; color: #6b4000; }
.unassigned-banner > div { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.unassigned-banner span { font-size: .86rem; }
:root[data-theme="dark"] .unassigned-banner { background: #3a2a0c; border-color: #7a5a14; color: #f3d9a4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .unassigned-banner { background: #3a2a0c; border-color: #7a5a14; color: #f3d9a4; } }

/* Übersicht: deutlicher Link zum Mieter-/Eigentümerportal */
.portal-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; padding: .8rem 1rem; margin: 0 0 1rem; border-radius: 14px; background: var(--s-neu-bg); border: 1px solid var(--s-neu); }
.portal-strip-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--surface); color: var(--s-neu); flex: none; }
.portal-strip-txt { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.portal-strip-txt a { display: block; font-weight: 700; overflow-wrap: anywhere; }
.portal-strip-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.prov-again { justify-self: start; margin-top: .1rem; }
/* Volltextsuche: Fundstellen markieren (Ergebnisseite) */
.search-results mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0 1px; }
:root[data-theme="dark"] .search-results mark, :root[data-theme="dark"] .search-drop mark { background: #7a6210; color: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .search-results mark, :root:not([data-theme="light"]) .search-drop mark { background: #7a6210; color: inherit; } }
.search-why { color: var(--text-2); }
.craft-take { margin-top: .6rem; }
.craft-take-form summary { cursor: pointer; font-weight: 600; margin-top: .3rem; }
.craft-take-form form { margin-top: .5rem; gap: .35rem; }
.craft-take-form label { margin: 0; }

/* Statusseite: Aktionen oben, Nachricht aufklappbar, IDEE-Auftritt */
.portal-actions-top { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }
.nachtrag-box > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.05rem; }
.nachtrag-box > summary::-webkit-details-marker { display: none; }
.nachtrag-box[open] > summary { margin-bottom: .8rem; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.idee-card { display: flex; align-items: center; gap: 1rem; background: var(--header-bg); color: #e8eaee; border: 0; }
.idee-card-logo { height: 46px; width: auto; flex: none; }
.idee-card-txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.idee-card-txt strong { font-size: 1.05rem; color: #fff; }
.idee-card-txt > span { font-size: .9rem; color: #c9ced6; }
.idee-card-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.idee-card-links a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 520px) { .idee-card { flex-direction: column; align-items: flex-start; } }
.tenant-box { display: grid; gap: .3rem; padding: .7rem .8rem; margin: .2rem 0 .8rem; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface-2); }
.tenant-box[hidden] { display: none; }
.tenant-box .check { align-items: flex-start; line-height: 1.4; }
.idee-card { margin-bottom: 1rem; }
/* Einverständnis-Häkchen: Kästchen links, Text daneben mit hängendem Einzug */
.tenant-box .check.consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: .6rem; align-items: start; padding-left: .4rem; margin: .2rem 0; }
.tenant-box .check.consent input { margin: .15rem 0 0; }
.public-ver { display: block; margin-top: .3rem; font-size: .75rem; opacity: .75; }
/* Ticket: „So sieht es der Meldende“ – Stufen der Statusseite */
.portal-view { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin: .2rem 0 .5rem; color: var(--muted); }
.pv-stage { padding: .05rem .5rem; border-radius: 99px; border: 1px solid var(--line-2); font-size: .74rem; color: var(--muted); }
.pv-stage.done { color: var(--s-erledigt); border-color: var(--s-erledigt); }
.pv-stage.on { background: var(--s-neu); border-color: var(--s-neu); color: #fff; font-weight: 700; }
/* Anlagen deutlicher: Kasten je Nachricht + Sammelleiste oben im Verlauf */
.atts { padding: .5rem .6rem; border-radius: 10px; background: #eef4ff; border: 1px solid #c9dafc; align-items: center; }
.atts-head { flex-basis: 100%; display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 750; color: #1d4ed8; }
.att-audio { display: block; width: 100%; max-width: 360px; height: 36px; margin-top: .3rem; } /* Tonaufnahme der Telefon-KI */
.atts .att { border-color: #c9dafc; }
.att-strip { margin: 0 0 .8rem; padding: .65rem .8rem; border-radius: 12px; background: #eef4ff; border: 1px solid #c9dafc; }
.att-strip-head { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: #1d4ed8; }
.att-strip-list { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0 .1rem; }
.att-chip { flex: 0 0 auto; width: 118px; display: flex; flex-direction: column; gap: .2rem; padding: .35rem; border-radius: 10px; background: var(--surface); border: 1px solid #c9dafc; font-size: .75rem; }
.att-chip > a:first-child { display: flex; flex-direction: column; gap: .25rem; color: var(--text) !important; text-decoration: none !important; }
.att-chip img, .att-chip .att-ico { width: 100%; height: 72px; object-fit: cover; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--muted); }
.att-chip .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.att-goto { font-size: .7rem; color: var(--muted) !important; }
:root[data-theme="dark"] .atts, :root[data-theme="dark"] .att-strip { background: #16264a; border-color: #2a4378; }
:root[data-theme="dark"] .atts-head, :root[data-theme="dark"] .att-strip-head { color: #9fc0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .atts, :root:not([data-theme="light"]) .att-strip { background: #16264a; border-color: #2a4378; } :root:not([data-theme="light"]) .atts-head, :root:not([data-theme="light"]) .att-strip-head { color: #9fc0ff; } }
/* Kein Workflow: deutlich markieren */
.flow.no-wf { border: 2px dashed #e0a100; }
.flow.no-wf .flow-head { background: #fff6dc; }
.wf-missing { background: #e0a100; color: #fff; font-weight: 700; }
.wf-missing-text { margin: 0 0 .6rem; color: #8a5a00; }
.jumpbar a.jb-warn { background: #fff6dc; color: #8a5a00; }
:root[data-theme="dark"] .flow.no-wf .flow-head, :root[data-theme="dark"] .jumpbar a.jb-warn { background: #3a2e0a; color: #f3d27a; }
:root[data-theme="dark"] .wf-missing-text { color: #f3d27a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flow.no-wf .flow-head, :root:not([data-theme="light"]) .jumpbar a.jb-warn { background: #3a2e0a; color: #f3d27a; } :root:not([data-theme="light"]) .wf-missing-text { color: #f3d27a; } }
.portal-topic { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem; border-radius: 99px; background: #eef4ff; color: #1d4ed8; font-size: .78rem; font-weight: 650; }
:root[data-theme="dark"] .portal-topic { background: #16264a; color: #9fc0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portal-topic { background: #16264a; color: #9fc0ff; } }
.flow-empty .wf-missing-text { display: block; flex-basis: 100%; width: 100%; }
/* Ticket: Statusseiten-Links verwalten */
.portal-links { display: grid; gap: .35rem; margin: -.2rem 0 .6rem; }
.pl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; padding: .4rem .65rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: .82rem; }
.pl-url { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 260px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; }
.pl-state { color: var(--s-erledigt); font-weight: 650; }
.pl-off .pl-state { color: var(--danger, #c0392b); }
.pl-off .pl-url { text-decoration: line-through; color: var(--muted) !important; }
.pl-tools { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.sidenav a[href$="assignee=niemand"] .nav-badge { background: #e0a100; color: #fff; }
.welcome-kicker { margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
/* Pflichtfelder: rotes Sternchen + Erklärung oben im Formular */
.req-star { color: #d32f2f; font-weight: 800; }
.req-note { margin: 0 0 .8rem; font-size: .85rem; color: var(--muted); }
:root[data-theme="dark"] .req-star { color: #ff6b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .req-star { color: #ff6b6b; } }
/* Nicht ausgefüllte Pflichtfelder */
.field-missing { color: #b71c1c; }
.field-missing input, .field-missing select, .field-missing textarea { border-color: #d32f2f !important; background: #fff5f5; box-shadow: 0 0 0 3px rgba(211, 47, 47, .15); }
label.check.field-missing { background: #fff5f5; border-radius: 8px; outline: 2px solid #d32f2f; outline-offset: 2px; }
.missing-note { margin-bottom: .8rem; }
:root[data-theme="dark"] .field-missing input, :root[data-theme="dark"] .field-missing select, :root[data-theme="dark"] .field-missing textarea, :root[data-theme="dark"] label.check.field-missing { background: #3a1414; }
:root[data-theme="dark"] .field-missing { color: #ff8a8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-missing input, :root:not([data-theme="light"]) .field-missing select, :root:not([data-theme="light"]) .field-missing textarea, :root:not([data-theme="light"]) label.check.field-missing { background: #3a1414; } :root:not([data-theme="light"]) .field-missing { color: #ff8a8a; } }
/* Neue Tickets live (Meldung oben rechts, bleibt bis zum Schließen) */
.live-toasts { position: fixed; top: 74px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; width: min(380px, calc(100vw - 32px)); }
.live-toast { background: var(--surface); border: 2px solid var(--accent); border-left-width: 7px; border-radius: 12px; padding: .7rem .85rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); animation: lt-in .35s ease-out, lt-pulse 1.6s ease-in-out 3; }
.live-toast.urgent { border-color: #d32f2f; }
.lt-head { display: flex; align-items: center; gap: .45rem; font-size: .82rem; }
.lt-head strong { font-size: .95rem; color: var(--accent); }
.live-toast.urgent .lt-head strong { color: #d32f2f; }
.lt-un { background: #e0a100; color: #fff; border-radius: 99px; padding: .05rem .5rem; font-size: .72rem; font-weight: 700; }
.lt-x { margin-left: auto; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); }
.lt-subj { display: block; margin: .3rem 0 .15rem; font-weight: 700; color: var(--text) !important; }
.lt-from { font-size: .8rem; color: var(--muted); }
.lt-act { margin-top: .5rem; }
.nav-badge.bump { animation: lt-bump .6s ease-out 2; }
@keyframes lt-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lt-pulse { 50% { box-shadow: 0 0 0 6px rgba(47, 111, 219, .25), 0 12px 32px rgba(0, 0, 0, .22); } }
@keyframes lt-bump { 50% { transform: scale(1.35); } }
@media (max-width: 700px) { .live-toasts { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .live-toast, .nav-badge.bump { animation: none; } }
/* Übersicht: Statistik (Objekte, Einheiten, Kontakte, Mitarbeiter …) */
.db-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .55rem; margin-bottom: .9rem; }
.db-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text) !important; text-decoration: none !important; transition: border-color .15s; }
.db-stat:hover { border-color: var(--text); }
.db-stat-ico { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--sunken); color: var(--accent); }
.db-stat b { font-size: 1.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.db-stat span:last-child { font-size: .76rem; color: var(--muted); font-weight: 600; }
@media (max-width: 600px) { .db-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .db-stats { grid-template-columns: repeat(3, 1fr); gap: .4rem; } .db-stat { grid-template-columns: 1fr; padding: .5rem .6rem; } .db-stat-ico { display: none; } .db-stat b { font-size: 1.15rem; } }
/* Oben rechts: Version groß, Datum und Uhrzeit der Installation klein darunter */
.top-version { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; color: #fff !important; text-decoration: none !important; padding: 0 .3rem; white-space: nowrap; }
.top-version b { font-size: .9rem; font-weight: 750; }
.top-version small { font-size: .68rem; color: #c9ced6; }
.top-version:hover small { color: #fff; }
@media (max-width: 900px) { .top-version { display: none; } }
/* Übersicht: links Kennzahlen, rechts aktuelle Tickets */
.db-figures { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; margin-bottom: 1.1rem; align-items: start; }
.db-fig { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .8rem .8rem; }
.db-fig-h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.db-figures .db-stats, .db-figures .db-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.db-figures .db-stat, .db-figures .db-kpi { background: var(--surface-2); padding: .55rem .65rem; }
.db-figures .db-stat { grid-template-columns: 1fr; }
.db-figures .db-stat-ico { display: none; }
.db-figures .db-kpi b, .db-figures .db-stat b { font-size: 1.35rem; }
.db-figures .db-kpi span, .db-figures .db-stat span:last-child { font-size: .74rem; }
@media (max-width: 1100px) { .db-figures { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .db-figures .db-stats, .db-figures .db-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.db-figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; }
.db-figures .db-kpi span { line-height: 1.25; }
@media (max-width: 1100px) { .db-figures { grid-template-columns: 1fr; } }
.lt-head { flex-wrap: wrap; row-gap: .25rem; }
.lt-head strong, .lt-head > span { white-space: nowrap; }
.lt-un { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding: .15rem .6rem; }
.live-toast { position: relative; }
.lt-head { padding-right: 1.6rem; }
.lt-x { position: absolute; top: .45rem; right: .55rem; }
.fv-unit { display: block; font-size: .9em; margin-top: .1rem; }

/* ===== Übersicht (Dashboard) nach Vorlage „Dashboard überarbeitet“ ===== */
.dbx { --x-bg: #F4F5F7; --x-card: #FFFFFF; --x-line: #E3E6EB; --x-line-2: #DCE0E6; --x-row: #F0F1F4; --x-hover: #F7F8FA; --x-ghost: #EEF1F5;
  --x-text: #14171C; --x-text-2: #3A414C; --x-muted: #5B6370; --x-accent: #2348C7; --x-accent-bg: #E8EDFB; --x-accent-fg: #1B3A9E;
  --x-ok: #1D7A5C; --x-warn: #A8430C; --x-warn-bg: #FDF1E8; --x-warn-line: #F3D3BC; --x-warn-fg: #8A3A0C; --x-bad: #C2272D; --x-chip: #EEF0F3; --x-dot: #C5CAD3;
  max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; color: var(--x-text); font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .dbx { --x-card: #171a20; --x-line: #2a2f38; --x-line-2: #343a45; --x-row: #22262e; --x-hover: #1d2128; --x-ghost: #232831;
  --x-text: #e8eaee; --x-text-2: #c4c9d2; --x-muted: #9aa2ae; --x-accent: #7b9bff; --x-accent-bg: #1c2747; --x-accent-fg: #a9bfff;
  --x-ok: #4cc59a; --x-warn: #ff9a5c; --x-warn-bg: #2e1f14; --x-warn-line: #5a3a22; --x-warn-fg: #ffb98a; --x-bad: #ff6b6b; --x-chip: #262b34; --x-dot: #4a515e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbx { --x-card: #171a20; --x-line: #2a2f38; --x-line-2: #343a45; --x-row: #22262e; --x-hover: #1d2128; --x-ghost: #232831;
  --x-text: #e8eaee; --x-text-2: #c4c9d2; --x-muted: #9aa2ae; --x-accent: #7b9bff; --x-accent-bg: #1c2747; --x-accent-fg: #a9bfff;
  --x-ok: #4cc59a; --x-warn: #ff9a5c; --x-warn-bg: #2e1f14; --x-warn-line: #5a3a22; --x-warn-fg: #ffb98a; --x-bad: #ff6b6b; --x-chip: #262b34; --x-dot: #4a515e; } }
.dbx a { color: var(--x-accent); text-decoration: none; }
.dbx a:hover { text-decoration: underline; }
.dbx .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx h2 { margin: 0; font-size: 17px; font-weight: 600; }
.dbx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.dbx-head h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.dbx-date { color: var(--x-muted); font-size: 14px; }
.dbx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dbx-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: var(--x-card); border: 1px solid var(--x-line-2); border-radius: 10px; min-width: 260px; color: var(--x-muted); margin: 0; }
.dbx-search input { border: 0 !important; outline: 0; background: transparent !important; font: inherit; color: var(--x-text); flex: 1; min-width: 0; padding: 0 !important; box-shadow: none !important; height: auto; }
.dbx-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: var(--x-card); border: 1px solid var(--x-line-2); border-radius: 10px; font: inherit; font-weight: 500; color: var(--x-text) !important; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.dbx-btn:hover { background: var(--x-ghost); }
.dbx-btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink) !important; font-weight: 600; padding: 0 18px; }
.dbx-btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.dbx-btn.small { height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; gap: 6px; }
.dbx-btn.dashed { border-style: dashed; border-color: var(--x-dot); color: var(--x-text-2) !important; align-self: flex-start; }
.dbx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.dbx-kpi { background: var(--x-card); border: 1px solid var(--x-line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: var(--x-text) !important; text-decoration: none !important; transition: border-color .15s; }
.dbx-kpi:hover { border-color: var(--x-muted); }
.dbx-kpi b { font-size: 32px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.dbx-nw { white-space: nowrap; } /* Zahl und ihr Wort bleiben zusammen, z. B. „1.000 unbearbeitet“ */
.tm-more { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; } /* Termine: „und n weitere überfällige → in der Ticketliste“, außerhalb der Tabelle */
.dbx-kpi b.ok { color: var(--x-ok); } .dbx-kpi b.warn { color: var(--x-warn); } .dbx-kpi b.bad { color: var(--x-bad); }
.dbx-kpi-l { color: var(--x-muted); font-size: 13px; font-weight: 500; }
.dbx-kpi-s { color: var(--x-muted); font-size: 13px; }
.dbx-kpi.alert { background: var(--x-warn-bg); border-color: var(--x-warn-line); }
.dbx-kpi.alert .dbx-kpi-l, .dbx-kpi.alert .dbx-kpi-s { color: var(--x-warn-fg); font-weight: 500; }
.dbx-kpi.alert b { color: var(--x-warn); }
.dbx-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.dbx-left { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dbx-right { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dbx-card { background: var(--x-card); border: 1px solid var(--x-line); border-radius: 14px; overflow: hidden; }
.dbx-card.pad { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.dbx-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.dbx-card-h a { font-size: 13px; font-weight: 500; }
.dbx-card-h.tight { padding: 0; }
#posteingang > .dbx-card-h { padding-bottom: 16px; }
.dbx-h-inline { display: flex; align-items: baseline; gap: 10px; } .dbx-h-inline span { color: var(--x-muted); font-size: 13px; }
.dbx-h3 { font-size: 15px !important; }
/* Meldeportal oben: Steht die rechte Spalte unter der linken (Startseite schmaler als 900 px), erscheint es über den Kennzahlen, sonst oben rechts */
.dbx { container: dbx / inline-size; }
.dbx-portal.only-phone { display: none; }
@container dbx (max-width: 899px) { .dbx-portal.only-phone { display: flex; } .dbx-portal.only-desk { display: none; } }
/* Startseite schmaler als 900 px: Kennzahlen immer 2 × 2 (nie 3 + 1); das Handy-Aussehen (bis 700 px Fenster) folgt weiter unten und ändert nur Kachel-Optik und Höhe */
@container dbx (max-width: 899px) { .dbx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dbx-phone-only { display: none; }
.dbx-tabs { display: flex; gap: 4px; padding: 12px 20px 0; border-bottom: 1px solid var(--x-line); }
.dbx-tabs button { height: 40px; padding: 0 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-weight: 500; color: var(--x-muted); cursor: pointer; border-radius: 0; }
.dbx-tabs button span { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--x-chip); color: var(--x-muted); font-size: 12px; }
.dbx-tabs button[aria-selected="true"] { border-bottom-color: var(--x-accent); font-weight: 600; color: var(--x-text); }
.dbx-tabs button[aria-selected="true"] span { background: var(--x-accent-bg); color: var(--x-accent-fg); }
.dbx-group { padding: 14px 20px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--x-muted); }
.dbx-group + .dbx-row { border-top: 0; }
.dbx-group:not(:first-child) { border-top: 1px solid var(--x-row); }
.dbx-group.over { color: var(--x-bad); }
.dbx-row { display: flex; align-items: center; gap: 14px; padding: 11px 20px; border-top: 1px solid var(--x-row); color: var(--x-text) !important; text-decoration: none !important; }
.dbx-row:hover { background: var(--x-hover); }
.dbx-prio { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--x-dot); }
.dbx-prio.high { background: #C2500F; }
.dbx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: var(--x-text) !important; text-decoration: none !important; }
.dbx-title { font-weight: 500; }
.dbx-sub { color: var(--x-muted); font-size: 13px; }
.dbx-tag { flex: none; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.dbx-tag.high { background: var(--x-warn-bg); color: var(--x-warn); }
.dbx-tag.info { background: var(--x-accent-bg); color: var(--x-accent-fg); font-weight: 500; padding: 1px 7px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx-when { flex: none; width: 96px; text-align: right; display: flex; flex-direction: column; }
.dbx-when b { font-weight: 500; font-size: 13px; } .dbx-when b.over { color: var(--x-bad); font-weight: 600; }
.dbx-when small { color: var(--x-muted); font-size: 12px; }
.dbx-mail .dbx-when { width: 72px; }
.dbx-more { display: block; padding: 12px 20px; border-top: 1px solid var(--x-row); font-size: 13px; font-weight: 500; }
.dbx-more:hover { background: var(--x-hover); text-decoration: none !important; }
.dbx-empty { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--x-muted); font-size: 13px; }
.dbx-empty strong { color: var(--x-text); font-size: 14px; }
.dbx-empty svg { color: var(--x-ok); }
.dbx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dbx-chips button { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--x-line-2); background: var(--x-card); color: var(--x-text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.dbx-chips button:hover { background: var(--x-ghost); }
.dbx-chips button[aria-pressed="true"] { border-color: var(--x-text); background: var(--x-text); color: var(--x-card); }
.dbx-ini { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--x-chip); color: var(--x-text-2); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.dbx-mail-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dbx-mail-top .dbx-title { font-weight: 600; }
.dbx-att { flex: none; display: inline-flex; align-items: center; gap: 3px; color: var(--x-muted); font-size: 12px; }
.dbx-mail .dbx-sub { color: var(--x-text-2); }
.dbx-muted { color: var(--x-muted); font-size: 13px; margin: 0; }
.dbx-day { display: flex; gap: 14px; color: var(--x-text) !important; text-decoration: none !important; border-radius: 10px; }
.dbx-day:hover .dbx-main strong { text-decoration: underline; }
.dbx-day .dbx-main strong { font-weight: 600; }
.dbx-cal { flex: none; width: 48px; text-align: center; border-radius: 10px; background: var(--x-chip); color: var(--x-text-2); padding: 6px 0; display: flex; flex-direction: column; }
.dbx-cal small { font-size: 11px; font-weight: 600; text-transform: uppercase; }
.dbx-cal b { font-size: 20px; font-weight: 600; line-height: 1.1; }
.dbx-cal.hl { background: var(--x-accent-bg); color: var(--x-accent-fg); }
.dbx-bar { display: flex; flex-direction: column; gap: 5px; color: var(--x-text) !important; text-decoration: none !important; }
.dbx-bar-l { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; }
.dbx-bar-l b { font-weight: 600; white-space: nowrap; } .dbx-bar-l em { font-style: normal; color: var(--x-bad); font-weight: 600; font-size: 12px; }
.dbx-bar:hover .dbx-bar-l span { text-decoration: underline; }
.dbx-bar-t { height: 6px; border-radius: 3px; background: var(--x-chip); overflow: hidden; }
.dbx-bar-t span { display: block; height: 6px; border-radius: 3px; background: var(--x-accent); }
.dbx-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--x-chip); }
.dbx-stack a { display: block; min-width: 6px; }
.dbx-stack .s-neu, .dbx-legend .sq.s-neu { background: var(--s-neu); } .dbx-stack .s-offen, .dbx-legend .sq.s-offen { background: var(--s-offen); }
.dbx-stack .s-wartet, .dbx-legend .sq.s-wartet { background: var(--s-wartet); } .dbx-stack .s-handwerker, .dbx-legend .sq.s-handwerker { background: var(--s-handwerker); }
.dbx-stack .s-nacharbeit, .dbx-legend .sq.s-nacharbeit { background: var(--s-nacharbeit); } .dbx-stack .s-erledigt, .dbx-legend .sq.s-erledigt { background: var(--s-erledigt); }
.dbx-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.dbx-legend a { display: flex; align-items: center; gap: 6px; color: var(--x-text) !important; }
.dbx-legend .sq { width: 10px; height: 10px; border-radius: 3px; }
.dbx .small { font-size: 12px; }
.dbx-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--x-chip); border-radius: 8px; }
.dbx-link > span { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.dbx-link .dbx-btn.small { height: 32px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.dbx-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; font-weight: 500; }
.dbx-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 14px 20px; border: 1px solid var(--x-line); border-radius: 14px; background: var(--x-card); font-size: 13px; color: var(--x-muted); }
.dbx-stock a { color: var(--x-muted) !important; } .dbx-stock a b { color: var(--x-text); }
.dbx-stock-h { font-weight: 600; color: var(--x-text); }
@media (max-width: 700px) {
  .dbx { gap: 12px; }
  .dbx-head h1 { font-size: 22px; }
  .dbx-actions { width: 100%; } .dbx-search { min-width: 0; flex: 1 1 100%; }
  .dbx-actions .dbx-btn { flex: 1 1 auto; justify-content: center; }
  .dbx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Kennzahlen am Handy kompakt: Zahl links, Bezeichnung daneben; der Hinweis steht nur am PC */
  /* Zahl links, 8 px Abstand, Bezeichnung daneben; passt das längste Wort nicht mehr daneben, rutscht die Bezeichnung unter die Zahl */
  .dbx-kpi { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; padding: 6px 12px; border-radius: 10px; min-height: 46px; }
  /* Überfällig > 0: einzige rot hinterlegte Kachel (Ersatzwerte zuerst für Browser ohne color-mix) */
  .dbx-kpi.over { border-color: var(--x-bad); background: color-mix(in srgb, var(--x-bad) 9%, var(--x-card)); border-color: color-mix(in srgb, var(--x-bad) 35%, var(--x-line)); }
  .dbx-kpi.over .dbx-kpi-l { color: var(--x-bad); font-weight: 600; }
  .dbx-kpi b { order: -1; flex: none; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
  .dbx-kpis.long .dbx-kpi b { font-size: 18px; } /* ab vier Stellen in irgendeiner Kachel: alle vier Zahlen gleich klein */
  .dbx-kpi-l { flex: 1 1 0; min-width: min-content; font-size: 12.5px; line-height: 1.25; }
  .dbx-kpi-s { display: none; }
  /* Meldeportal kompakt: Titel und Adresse links, „Kopieren“ rechts, darunter die zwei Portal-Links */
  .dbx-portal.only-phone { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; padding: 8px 14px; }
  .dbx-portal .dbx-h3 { grid-column: 1; grid-row: 1; align-self: end; line-height: 1.3; }
  .dbx-portal .dbx-link { display: contents; }
  .dbx-portal .dbx-link > span { grid-column: 1; grid-row: 2; align-self: start; font-size: 12.5px; font-weight: 400; color: var(--x-muted); line-height: 1.35; }
  .dbx-portal .dbx-link .dbx-btn.small { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 44px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
  .dbx-portal .dbx-links { grid-column: 1 / -1; grid-row: 3; gap: 16px; font-size: 14px; }
  .dbx-portal .dbx-links a { position: relative; display: inline-flex; align-items: center; gap: .3em; min-height: 36px; } /* gap ersetzt das Leerzeichen vor „↗“ */
  .dbx-portal .dbx-links a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -8px; } /* Trefferfläche 44 px, nur nach unten */
  .dbx-no-phone { display: none; } .dbx-phone-only { display: inline; }
  .dbx-row { padding: 10px 14px; gap: 10px; } .dbx-group, .dbx-more { padding-left: 14px; padding-right: 14px; }
  .dbx-mail .dbx-btn.small { padding: 0 8px; } .dbx-mail .dbx-when { display: none; }
  .dbx-card-h { padding: 14px 14px 0; } #posteingang > .dbx-card-h { padding-bottom: 12px; } .dbx-tabs { padding: 8px 14px 0; }
}
.dbx [hidden] { display: none !important; }
.dbx-card-h.tight h2 { flex: 1 1 auto; min-width: 0; } .dbx-when small { white-space: nowrap; }

/* ===== Seitenleiste nach Vorlage „Seitenmenü“ (Claude Design) ===== */
:root { --nav-w: 272px; }
.sidenav { --n-bg: #FFFFFF; --n-line: #E3E6EB; --n-line-2: #DCE0E6; --n-soft: #F0F1F4; --n-hover: #F4F5F7; --n-text: #14171C; --n-text-2: #3A414C; --n-muted: #5B6370; --n-faint: #8A919C;
  --n-accent: #2348C7; --n-act-bg: #E8EDFB; --n-act-fg: #1B3A9E; --n-chip: #EEF0F3; --n-warn-bg: #FDF1E8; --n-warn: #A8430C;
  background: var(--n-bg); border-right: 1px solid var(--n-line); padding: 0; gap: 0; overflow: hidden; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .sidenav { --n-bg: #13161b; --n-line: #2a2f38; --n-line-2: #343a45; --n-soft: #22262e; --n-hover: #1d2128; --n-text: #e8eaee; --n-text-2: #c4c9d2; --n-muted: #9aa2ae; --n-faint: #7d8592;
  --n-accent: #7b9bff; --n-act-bg: #1c2747; --n-act-fg: #a9bfff; --n-chip: #262b34; --n-warn-bg: #2e1f14; --n-warn: #ff9a5c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidenav { --n-bg: #13161b; --n-line: #2a2f38; --n-line-2: #343a45; --n-soft: #22262e; --n-hover: #1d2128; --n-text: #e8eaee; --n-text-2: #c4c9d2; --n-muted: #9aa2ae; --n-faint: #7d8592;
  --n-accent: #7b9bff; --n-act-bg: #1c2747; --n-act-fg: #a9bfff; --n-chip: #262b34; --n-warn-bg: #2e1f14; --n-warn: #ff9a5c; } }
.sidenav .nav-head { padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--n-soft); flex: none; }
.nav-ws { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-ws-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--n-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.nav-ws-txt { min-width: 0; display: flex; flex-direction: column; }
.nav-ws-txt b { font-weight: 600; font-size: 14px; color: var(--n-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-ws-txt small { color: var(--n-muted); font-size: 12px; }
.sidenav a.nav-new, .sidenav a.nav-new-note { margin: 0; width: auto; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-weight: 600; padding: 0 16px; text-decoration: none; }
.sidenav a.nav-new { height: 44px; background: var(--primary); color: var(--primary-ink) !important; border: 0; }
.sidenav a.nav-new:hover { background: var(--primary-hover); color: var(--primary-ink); }
.sidenav a.nav-new-note { height: 40px; background: var(--n-bg); border: 1px solid var(--n-line-2); color: var(--n-text) !important; font-weight: 500; }
.sidenav a.nav-new-note:hover { background: var(--n-hover); }
.sidenav .nav-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sidenav .nav-scroll a, .sidenav .nav-foot > a { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; height: 40px; padding: 0 10px; border-radius: 8px; color: var(--n-text-2); font-weight: 500; text-decoration: none; }
.sidenav .nav-scroll a svg, .sidenav .nav-foot > a svg { flex: none; color: var(--n-muted); }
.sidenav .nav-scroll a > span:first-of-type, .sidenav .nav-foot > a > span { flex: 1; }
.sidenav .nav-scroll a:not(.active):hover, .sidenav .nav-foot > a:not(.active):hover { background: var(--n-hover); color: var(--n-text); }
.sidenav .nav-scroll a.active, .sidenav .nav-foot > a.active { background: var(--n-act-bg); color: var(--n-act-fg); font-weight: 600; }
.sidenav .nav-scroll a.active svg, .sidenav .nav-foot > a.active svg { color: var(--n-accent); }
.sidenav .nav-scroll a.nav-sub { height: 32px; padding-left: 38px; font-size: 13px; }
.sidenav .nav-scroll a.nav-sub.d2 { padding-left: 50px; }
.nav-grp { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 32px; margin-top: 12px; padding: 0 10px; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--n-muted); cursor: pointer; border-radius: 6px; }
.nav-grp:hover { color: var(--n-text); }
.nav-grp > span { display: flex; align-items: center; gap: 8px; }
.nav-grp > svg { transition: transform .15s; }
.nav-grp[aria-expanded="false"] > svg { transform: rotate(-90deg); }
.nav-items { display: flex; flex-direction: column; gap: 2px; }
.nav-items[hidden] { display: none; }
.sidenav .nav-src { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: var(--n-chip); color: var(--n-muted); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sidenav .nav-badge { flex: none; margin-left: 0; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--n-chip); color: var(--n-muted); }
.sidenav .nav-badge.nb-warn, .sidenav a[href$="assignee=niemand"] .nav-badge.nb-warn { background: var(--n-warn-bg); color: var(--n-warn); }
.sidenav .nav-badge.nb-accent { background: var(--n-act-bg); color: var(--n-act-fg); }
.sidenav .nav-badge.nb-gray, .sidenav a[href$="/tickets"] .nav-badge { background: var(--n-chip); color: var(--n-muted); }
.sidenav .nav-badge.nb-plain, .sidenav a[href$="assignee=niemand"] .nav-badge.nb-plain { background: none; padding: 0; color: var(--n-faint); font-weight: 500; }
.sidenav .nav-foot { flex: none; padding: 10px 10px 14px; border-top: 1px solid var(--n-line); display: flex; flex-direction: column; gap: 6px; }
.nav-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--n-hover); }
.nav-user-ava { flex: none; display: flex; }
.nav-user-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none !important; }
.nav-user-txt b { font-size: 13px; font-weight: 600; color: var(--n-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-txt small { color: var(--n-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user form { margin: 0; }
.nav-logout { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--n-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.nav-logout:hover { background: var(--n-chip); color: var(--n-text); }
.sidenav .nav-version { padding: 2px 10px 0; color: var(--n-faint); font-size: 12px; background: none; height: auto; }
.sidenav .nav-version a { display: inline; height: auto; padding: 0; color: var(--n-accent); }
.nav-user-txt { align-items: flex-start; text-align: left; justify-content: center; height: auto !important; padding: 0 !important; background: none !important; }
.nav-user-txt b, .nav-user-txt small { max-width: 100%; }
.nav-user-ava { height: auto !important; padding: 0 !important; background: none !important; }
:root[data-theme="dark"] .nav-ws-ico { background: #3d63e0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-ws-ico { background: #3d63e0; } }
.sidenav a.nav-user-txt { flex-direction: column; align-items: flex-start; gap: 0; text-align: left; white-space: normal; }
/* Telefon-KI: deutlich kennzeichnen */
.ki-banner { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .75rem 1rem; margin: 0 0 .7rem; border-radius: 12px; background: #f1ecff; border: 1px solid #c9b8ff; color: #3d2a8a; }
.ki-banner > div { display: flex; flex-direction: column; flex: 1; min-width: 220px; }
.ki-banner span:not(.ki-ico) { font-size: .86rem; }
.ki-ico { font-size: 1.6rem; line-height: 1; }
.ki-pill { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .5rem; border-radius: 99px; background: #f1ecff; color: #4b2fb0; border: 1px solid #d6caff; font-size: .72rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
:root[data-theme="dark"] .ki-banner, :root[data-theme="dark"] .ki-pill { background: #241b45; border-color: #4a3a8f; color: #cbbcff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ki-banner, :root:not([data-theme="light"]) .ki-pill { background: #241b45; border-color: #4a3a8f; color: #cbbcff; } }
.live-toast { transition: opacity .5s; } .live-toast.out { opacity: 0; }
/* Benutzerverwaltung: bei KI-Mitarbeitern nicht benötigte Felder ausgegraut */
.user-form .is-off { opacity: .45; }
.user-form .is-off input { background: var(--sunken) !important; cursor: not-allowed; }
.ki-note { padding: .5rem .7rem; border-radius: 10px; background: #f1ecff; border: 1px solid #d6caff; color: #3d2a8a; margin: 0 0 .7rem; }
:root[data-theme="dark"] .ki-note { background: #241b45; border-color: #4a3a8f; color: #cbbcff; }

/* Workflow wechseln: Vorschläge passend zum Thema */
.wf-sugg { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .55rem 0 .2rem; }
.wf-sugg .chip { cursor: pointer; font-size: .82rem; padding: .28rem .7rem; }
.wf-sugg .chip.on { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }

/* ===== Neues Ticket (reduzierte Ansicht nach Claude-Design „Ticketanlage neu“) ===== */
.nt-head { max-width: 760px; margin: 0 auto 4px; }
.nt-head h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.nt-head p { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.nt-form { max-width: 760px; margin: 0 auto; gap: 16px; padding-bottom: 96px; }
.nt-form .from-mail, .nt-form .series-hint { margin: 0; }
.nt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.nt-card h2 { margin: 0; font-size: 17px; font-weight: 700; }
.nt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.nt-field { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.nt-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.nt-req { font-size: 11px; font-weight: 600; color: var(--err); background: var(--err-bg); border-radius: 999px; padding: 2px 8px; }
.nt-opt { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--sunken); border-radius: 999px; padding: 2px 8px; }
.nt-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.nt-hint.err { color: var(--err); font-weight: 500; }
.nt-sub { align-self: flex-start; margin-top: 6px; }
.nt-form .nt-card input:not([type=checkbox]):not([type=radio]):not([type=file]), .nt-form .nt-card select, .nt-form .nt-card textarea { border-width: 1.5px; border-radius: 10px; }
.nt-form .nt-card .nt-field > input:not([type=file]), .nt-form .nt-card .nt-field > select, .nt-form .nt-card .nt-field .combo-input, .nt-form .nt-card .nt-field .combo > input { min-height: 46px; font-size: 15px; }
.nt-form .nt-card select:disabled { opacity: .7; }
.nt-form .field-missing, .nt-form .combo:has(.field-missing) .combo-input { border-color: var(--err) !important; background: var(--err-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 14%, transparent); }
.nt-role { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.nt-role select { width: auto; min-height: 32px; padding: 2px 8px; font-size: 13px; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-chip { height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.nt-chip:hover { border-color: var(--text); }
.nt-chip.on { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-ink); }
.nt-src-all { margin: 10px 0 0; max-width: 420px; font-size: 13px; }
.nt-form #nt-rcv { margin-top: 10px; }
.nt-prios { display: flex; flex-wrap: wrap; gap: 10px; }
.nt-prio { flex: 1; min-width: 140px; min-height: 64px; margin: 0; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-weight: 400; position: relative; }
.nt-prio input { position: absolute; opacity: 0; pointer-events: none; }
.nt-prio b { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 7px; }
.nt-prio b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--p-normal-fill); }
.nt-prio-hoch b::before { background: var(--p-hoch); }
.nt-prio-niedrig b::before { background: var(--p-niedrig); }
.nt-prio span { font-size: 12.5px; color: var(--muted); }
.nt-prio:hover { border-color: var(--text); }
.nt-prio.on, .nt-prio:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--surface-2); }
.nt-prio:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.nt-due { max-width: 260px; margin: 0; }
.nt-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--s-neu-bg); font-size: 13.5px; color: var(--nav-active-ink); }
.nt-suggest > span { flex: 1 1 220px; }
.nt-suggest button[data-wfs-take] { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--link); background: var(--surface); color: var(--link); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nt-suggest-x { background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; min-width: 28px; min-height: 28px; }
.nt-more { padding-top: 12px; padding-bottom: 12px; gap: 0; }
.nt-more-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; min-height: 44px; text-align: left; }
.nt-more-btn .nt-opt { margin-left: 6px; }
.nt-more-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.nt-more.open .nt-more-sub { display: none; }
.nt-more-ico { font-size: 20px; color: var(--muted); }
.nt-more-body { display: none; flex-direction: column; gap: 18px; padding: 14px 0 12px; }
.nt-more.open .nt-more-body { display: flex; }
.nt-more-body .wf-choose { margin: 0; }
.nt-more-body .resp { margin: 0; }
.nt-bar { position: fixed; left: var(--nav-w); right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px max(16px, calc((100vw - var(--nav-w) - 760px) / 2)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(16,24,40,.06); }
.nt-bar .btn { min-height: 46px; padding: 0 20px; font-size: 15px; }
.nt-progress { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; font-size: 13.5px; color: var(--muted); }
.nt-dots { display: inline-flex; gap: 6px; }
.nt-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.nt-dots i.on { background: var(--ok); }
.nt-complete .nt-progress { color: var(--ok); font-weight: 600; }
.nt-bar [hidden] { display: none !important; }
@media (max-width: 900px) { .nt-bar { left: 0; padding-inline: max(16px, calc((100vw - 760px) / 2)); } }
@media (max-width: 640px) {
  .nt-card { padding: 18px; }
  .nt-head h1 { font-size: 26px; }
  .nt-bar { padding: 10px 12px; }
  .nt-bar .btn { flex: 1; }
  .nt-progress { flex-basis: 100%; }
}

/* ===== Ticket bearbeiten (Claude-Design „Ticket-Bearbeitung“): Kopf · Status · Workflow · Verlauf, volle Breite ===== */
.tb { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; }
.tb-bar { display: flex; justify-content: flex-end; margin-top: -8px; }
.tb-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tb-acts .btn { min-height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); font-weight: 600; }
.tb-acts .btn:hover { background: var(--hover); }
.tb-acts .danger-text { color: var(--err); }
.tb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; margin: 0; }
.tb .tb-card.ticket-head { display: block; padding: 0; overflow: visible; gap: 0; }
.tb .tb-card.ticket-head::before { content: none; }
.tb-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.tb-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.tb-h-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.tb-h-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; }
.tb-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--link); cursor: pointer; text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; gap: 5px; }
.tb-link:hover { text-decoration: underline; }
.tb-link.small { font-size: 12.5px; min-height: 0; }
.tb-link.muted { color: var(--muted); font-weight: 500; }

/* 1 · Kopf */
.tb-titlebox { padding: 20px 24px 16px; display: flex; flex-direction: column; gap: 6px; }
.tb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 13px; }
.tb-meta > * + *::before { content: "·"; margin-right: 10px; color: var(--line-2); }
.tb-no { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--text-2); }
.tb .tb-titlebox h1 { margin: 0; font-size: 28px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.tb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--line); }
.tb-fact { padding: 14px 24px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); min-width: 0; align-items: flex-start; }
.tb-fact:last-child { border-right: 0; }
.tb-fl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tb-fv { font-size: 14px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 7px; line-height: 1.3; }
a.tb-fv { color: var(--link); }
.tb-fs { font-size: 12px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.tb-nobody { padding: 1px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.tb-prio i { width: 8px; height: 8px; border-radius: 50%; background: var(--p-normal-fill); }
.tb-prio.p-hoch { color: var(--p-hoch); } .tb-prio.p-hoch i { background: var(--p-hoch); }
.tb-prio.p-normal { color: var(--p-normal); }
.tb-prio.p-niedrig { color: var(--p-niedrig); } .tb-prio.p-niedrig i { background: var(--p-niedrig); }
.tb-obj { align-items: flex-start; }
.tb-obj-img { flex: none; width: 34px; height: 34px; border-radius: 7px; background: var(--sunken) center / cover no-repeat; }
.tb-facts-foot { display: flex; justify-content: flex-end; padding: 0 16px 10px; }
.tb .tb-edit { margin: 0 16px 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.tb .ticket-head .eck-edit { border-style: solid; }

/* 2 · Status */
.tb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 6px; background: var(--st-bg); color: var(--st); font-size: 13px; font-weight: 600; position: relative; }
.tb-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
details.tb-badge > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
details.tb-badge > summary::-webkit-details-marker { display: none; }
.status-hist-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 320px; padding: 10px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); font-weight: 400; }
.tb-ball { color: var(--muted); }
.tb-status .act-btn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.tb-body { padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.tb-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; }
.tb-rl { flex: 0 0 132px; font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; flex-direction: column; padding-top: 12px; }
.tb-rl small { font-size: 12px; font-weight: 400; color: var(--muted); }
.tb .tb-seg { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.tb .tb-seg form { margin: 0; min-width: 0; }
.tb .tb-seg button, .tb .tb-seg li { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--muted); font: inherit; text-align: left; min-height: 44px; cursor: pointer; filter: none; }
.tb .tb-seg li { cursor: default; }
.tb-bar-line { display: block; height: 8px; border-radius: 4px; background: var(--line); transition: background .15s; }
.tb-bar-lbl { font-size: 12px; line-height: 1.3; font-weight: 400; }
.tb .tb-seg .done .tb-bar-line { background: color-mix(in srgb, var(--link) 35%, var(--surface)); }
.tb .tb-seg .current .tb-bar-line { background: var(--link); }
.tb .tb-seg .current .tb-bar-lbl { color: var(--text); font-weight: 600; }
.tb .tb-seg button:hover .tb-bar-line { background: color-mix(in srgb, var(--link) 55%, var(--surface)); }
.tb .tb-seg button:hover .tb-bar-lbl { color: var(--text); }
.tb-indent { padding-left: 152px; }
.tb .wait-on { margin: -4px 0 0; }
.tb .portal-links { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 0; }
.tb .pl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 0; border: 0; background: none; font-size: 13px; }
.tb .pl-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ok); }
.tb .pl-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tb .pl-off .pl-state { color: var(--muted); }
.tb .pl-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.tb .pl-hint { margin: 0; }
.tb .act-panel { margin: 0; }

/* 3 · Workflow */
.tb-wfname { color: var(--text-2); font-size: 14px; }
.tb-count { color: var(--muted); } .tb-count strong { color: var(--text); font-weight: 600; }
.tb-nowbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 24px 0; padding: 10px 14px; border-radius: 10px; background: var(--s-neu-bg); color: var(--text); font-size: 13.5px; }
.tb-nowbar-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.tb-nowbar-t { flex: 1 1 260px; } .tb-nowbar-t span { color: var(--muted); }
.tb-stepbar { list-style: none; margin: 0; padding: 22px 24px 6px; display: flex; overflow-x: auto; scrollbar-width: thin; }
.tb-stepbar li { flex: 1 0 140px; min-width: 0; }
.tb-stepbar button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px 12px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; text-align: center; cursor: pointer; color: var(--text-2); position: relative; }
.tb-stepbar button:hover { background: var(--hover); }
.tb-stepbar button[aria-pressed="true"] { border-bottom-color: var(--link); }
.tb-stepbar button::before, .tb-stepbar button::after { content: ""; position: absolute; top: 17px; height: 2px; background: var(--line-2); width: calc(50% - 22px); }
.tb-stepbar button::before { left: 0; } .tb-stepbar button::after { right: 0; }
.tb-stepbar li:first-child button::before, .tb-stepbar li:last-child button::after { display: none; }
.tb-stepbar li.prev-closed button::before, .tb-sb-done button::after, .tb-sb-skip button::after { background: var(--ok); }
.tb-sb-dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; box-sizing: border-box; }
.tb-sb-cur .tb-sb-dot { border-color: var(--link); background: var(--link); color: #fff; }
.tb-sb-done .tb-sb-dot { border-color: var(--ok); background: var(--ok); color: #fff; }
.tb-sb-title { font-size: 13px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.tb-sb-cur .tb-sb-title { color: var(--text); font-weight: 600; }
.tb-sb-skip .tb-sb-title { text-decoration: line-through; color: var(--muted); }
.tb-sb-state { font-size: 12px; font-weight: 600; color: var(--muted); }
.tb-sb-cur .tb-sb-state { color: var(--link); } .tb-sb-done .tb-sb-state { color: var(--ok); }
.tb-step { margin: 0 24px 24px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tb-step[hidden] { display: none; }
.tb-step.is-cur { background: color-mix(in srgb, var(--s-neu-bg) 65%, var(--surface)); border-color: color-mix(in srgb, var(--link) 22%, var(--line)); }
.tb-step-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tb-step-side { padding: 18px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-step-k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tb-step.is-cur .tb-step-k:first-child { color: var(--link); }
.tb-step-k.ok { color: var(--ok); }
.tb-step-t { font-size: 20px; font-weight: 600; line-height: 1.3; }
.tb-step-n { color: var(--text-2); font-size: 14px; }
.tb-step-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 0; }
.tb-step-btns form { margin: 0; }
.tb-step-btns .btn { min-height: 42px; border-radius: 10px; font-weight: 600; }
.tb-step-btns select { width: auto; min-width: 220px; }
.tb-people { list-style: none; margin: 0; padding: 0; }
.tb-people li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tb-people-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.tb-people-t .muted:not(.small) { font-size: 13px; font-weight: 400; }
.tb-people-a { display: flex; gap: 6px; }
.tb-flow .flow-list { display: none; margin: 0 24px 20px; }
.tb-flow.editing .flow-list { display: block; }
.tb-flow.editing .tb-stepbar, .tb-flow.editing .tb-step, .tb-flow.editing .tb-nowbar { display: none !important; }
.tb-flow .flow-edit-hint { margin: 14px 24px 0; }
.tb-flow.editing { box-shadow: 0 0 0 2px var(--text); }
.tb-empty { padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.tb-empty .tb-step { margin: 0; }
.tb-empty .wf-missing-text { margin: 0; }

/* 4 · Verlauf und darunter */
.tb-lower { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; margin-top: 16px; }
.tb-verlauf { overflow: hidden; }
.tb-verlauf .tl-filter { margin: 0; }
.tb-verlauf .tl-filter .seg { display: flex; gap: 4px; padding: 4px; background: var(--sunken); border-radius: 10px; }
.tb-verlauf .tl-filter .seg a { height: 30px; padding: 0 12px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; }
.tb-verlauf .tl-filter .seg a.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.tb-verlauf .tl-filter .seg a span { color: var(--muted); font-weight: 500; background: none; }
.tb-verlauf .att-strip { margin: 14px 24px 0; }
.tb-verlauf .timeline { padding: 4px 24px; }
.tb-verlauf .composer { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface-2); box-shadow: none; padding: 14px 24px 18px; }
.tb-side { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; position: static !important; align-items: start; max-height: none !important; overflow: visible !important; }
.tb-side .panel { margin: 0; border: 1px solid var(--line); border-radius: 14px; }
@media (max-width: 760px) {
  .tb-h, .tb-titlebox, .tb-body { padding-left: 16px; padding-right: 16px; }
  .tb .tb-titlebox h1 { font-size: 23px; }
  .tb-fact { padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tb-rl { flex-basis: 100%; padding-top: 0; flex-direction: row; gap: 8px; align-items: baseline; }
  .tb-indent { padding-left: 0; }
  .tb .tb-seg { overflow-x: auto; grid-template-columns: repeat(var(--n, 6), minmax(92px, 1fr)); }
  .tb-stepbar { padding: 18px 12px 6px; } .tb-stepbar li { flex-basis: 120px; }
  .tb-step { margin: 0 12px 16px; } .tb-step-side { border-left: 0; border-top: 1px solid var(--line); }
  .tb-nowbar { margin: 12px 12px 0; }
  .tb-verlauf .timeline { padding: 4px 12px; } .tb-verlauf .composer { padding: 12px; }
  .tb-bar { margin-top: 0; justify-content: flex-start; }
  .tb-acts .lbl { display: none; }
}
.tb .tb-seg form::before, .tb .tb-seg form::after, .tb .tb-seg button::before, .tb .tb-seg button::after, .tb .tb-seg li::before, .tb .tb-seg li::after { content: none !important; display: none !important; }
.tb .tb-side { background: none; border: 0; padding: 0; box-shadow: none; }
.tb .tb-side .panel { background: var(--surface); padding: 16px 18px; }
.tb .tb-side .panel { border: 1px solid var(--line) !important; border-radius: 14px; }
.tb .tb-seg button { justify-content: flex-start !important; }

/* ===== Objekt-Kartei · Übersicht (Claude-Design „Objekt-Kartei“): Symbole tragen den Zustand ===== */
:root { --ok-red: #D23B33; --ok-red-soft: #FDECEB; --ok-amber: #B07A00; --ok-amber-soft: #FFF3D1; --ok-green: #1F8A4C; --ok-green-soft: #E3F5EA; --ok-faint: #A3A9B5; --ok-accent: #2348C7; --ok-accent-soft: #E9EEFC; --ok-ringL: 44%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok-red: #FF7A72; --ok-red-soft: #3A1E1D; --ok-amber: #E7B84A; --ok-amber-soft: #352B14; --ok-green: #5FCB8C; --ok-green-soft: #17301F; --ok-faint: #5E6575; --ok-accent: #7D98FF; --ok-accent-soft: #232C4A; --ok-ringL: 58%; } }
:root[data-theme="dark"] { --ok-red: #FF7A72; --ok-red-soft: #3A1E1D; --ok-amber: #E7B84A; --ok-amber-soft: #352B14; --ok-green: #5FCB8C; --ok-green-soft: #17301F; --ok-faint: #5E6575; --ok-accent: #7D98FF; --ok-accent-soft: #232C4A; --ok-ringL: 58%; }
.pview-bar { position: sticky; top: 58px; z-index: 12; background: var(--bg); padding: 8px 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ok-jump { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.ok-jump a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); }
.ok-jump a:hover { background: var(--surface); color: var(--text); }
.ok { display: flex; flex-direction: column; gap: 14px; max-width: 1240px; }
.ok [id^="s-"] { scroll-margin-top: 120px; }
.ok-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.ok-ph { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 13px 18px; }
.ok-ph h2 { font-size: 14.5px; margin: 0; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.ok-ph h2 .ico { color: var(--muted); }
.ok-ph .sp, .ok-bh .sp { flex: 1; }
.ok-plink { font-size: 12.5px; font-weight: 600; }
.ok-pb { padding: 0 18px 16px; }
.ok-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--sunken); color: var(--muted); }
.ok-chip.blue { background: var(--ok-accent-soft); color: var(--ok-accent); }
.ok-chip.red { background: var(--ok-red-soft); color: var(--ok-red); }
.ok-ib { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; transition: transform .15s, box-shadow .15s; border: 0; padding: 0; cursor: inherit; }
.ok-ib.ok { background: var(--ok-green-soft); color: var(--ok-green); }
.ok-ib.part { background: var(--ok-amber-soft); color: var(--ok-amber); }
.ok-ib.miss { background: var(--ok-red-soft); color: var(--ok-red); box-shadow: inset 0 0 0 1.5px var(--ok-red); }
.ok-ib.off { background: var(--sunken); color: var(--ok-faint); }
.ok-ib.sm { width: 28px; height: 28px; border-radius: 8px; }
.ok-ib.big { width: 48px; height: 48px; border-radius: 14px; }
a.ok-ib:hover, .ok-cap:hover .ok-ib { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
a.ok-ib.miss:hover, .ok-cap:hover .ok-ib.miss { box-shadow: inset 0 0 0 1.5px var(--ok-red), 0 4px 12px rgba(210,59,51,.25); }
.ok-cap { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 88px; text-align: center; background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-decoration: none !important; }
span.ok-cap { cursor: default; }
.ok-cap .l { font-size: 11px; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ok-cap .v { font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ok-cap .v.no { color: var(--ok-red); font-weight: 500; }
.ok-caps { display: flex; flex-wrap: wrap; gap: 12px 6px; }
.ok-ring { display: block; flex: none; }
.ok-ring circle { fill: none; }
.ok-ring .bg { stroke: var(--line); }
.ok-ring .fg { stroke: hsl(var(--h) 70% var(--ok-ringL)); stroke-linecap: round; }
.ok-ring text { fill: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ok-rib { position: relative; width: 52px; height: 52px; display: grid; place-items: center; }
.ok-rib .ok-ring { position: absolute; inset: 0; }
.ok-rib .ico { color: hsl(var(--h) 65% var(--ok-ringL)); }
/* Prioritäten */
.ok-next { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.ok-now { padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; border-right: 1px solid var(--line); }
.ok-now-b { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ok-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.ok-now h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.ok-why { color: var(--muted); font-size: 13px; }
.ok-tags, .ok-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ok-reason { display: inline-flex; gap: 5px; align-items: center; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.ok-reason.r-sicher { background: var(--ok-red-soft); color: var(--ok-red); }
.ok-reason.r-haftung, .ok-reason.r-frist { background: var(--ok-amber-soft); color: var(--ok-amber); }
.ok-reason.r-daten, .ok-reason.r-offen { background: var(--sunken); color: var(--muted); }
.btn.ok-accent { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .btn.ok-accent:hover { background: var(--primary-hover); }
.ok-after { padding: 8px 14px 12px; display: flex; flex-direction: column; min-width: 0; }
.ok-stage { display: flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 10px 6px 4px; }
.ok-stage .n { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; color: #fff; letter-spacing: 0; }
.ok-stage .c { color: var(--muted); font-weight: 600; }
.ok-todo { display: flex; gap: 10px; align-items: center; padding: 5px 6px; border-radius: 9px; color: var(--text); text-decoration: none !important; }
.ok-todo:hover { background: var(--sunken); }
.ok-todo .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.ok-todo .d { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ok-todo > .ico { color: var(--ok-faint); }
.ok-more { font-size: 12px; color: var(--muted); padding: 2px 6px 4px 44px; }
/* Datenstand */
.ok-comp { display: flex; gap: 22px; align-items: center; padding: 16px 18px; flex-wrap: wrap; }
.ok-big { display: flex; gap: 12px; align-items: center; flex: none; }
.ok-big b { display: block; font-size: 13px; } .ok-big span { font-size: 12px; color: var(--muted); }
.ok-sep { width: 1px; align-self: stretch; background: var(--line); }
.ok-arow { display: flex; flex-wrap: wrap; gap: 10px 4px; flex: 1; min-width: 0; }
.ok-arow .ok-cap { width: 76px; }
/* Objektdaten */
.ok-blk { padding: 0 0 14px; }
.ok-bh { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.ok-tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; border-top: 1px solid var(--line); }
.ok-tg { padding: 12px 0; }
/* Tabellen */
.ok-tblwrap { overflow-x: auto; }
.ok-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; margin: 0; }
.ok-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); white-space: nowrap; background: none; }
.ok-table th.c, .ok-table td.c { text-align: center; }
.ok-table th .ico { margin: 0 auto; display: block; }
.ok-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; vertical-align: middle; }
.ok-table td.c .ok-ib, .ok-table td.c .avatar { margin: 0 auto; }
.ok-table tr:last-child td { border-bottom: 0; }
.ok-table tbody tr:hover td { background: var(--sunken); }
.ok-table th:first-child, .ok-table td:first-child { padding-left: 18px; }
.ok-table .grp td { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 10px; padding-bottom: 4px; border-bottom: 0; background: none !important; }
.ok-tl { color: var(--text); font-weight: 500; }
.ok-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); }
.ok-frist { display: inline-flex; gap: 6px; align-items: center; } .ok-frist .ico { color: var(--ok-faint); }
.ok-frist.warn { color: var(--ok-amber); font-weight: 600; } .ok-frist.bad { color: var(--ok-red); font-weight: 600; }
.ok-warn { color: var(--ok-amber); font-weight: 600; }
.ok-favs { display: flex; flex-wrap: wrap; gap: 8px; }
.ok-fav { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none !important; }
.ok-fav span { display: flex; flex-direction: column; font-size: 13px; } .ok-fav small { color: var(--muted); font-size: 11.5px; }
/* Schlüssel & Fotos */
.ok-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ok-two > * { min-width: 0; }
.ok-prow { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.ok-prow:first-child { border-top: 0; }
.ok-prow .n { flex: 1; min-width: 0; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-pics { display: flex; gap: 3px; flex-wrap: wrap; max-width: 50%; }
.ok-pics img, .ok-pic-x { width: 28px; height: 22px; border-radius: 4px; object-fit: cover; display: block; cursor: zoom-in; }
.ok-pic-x { border: 1.5px dashed var(--ok-red); background: var(--ok-red-soft); cursor: default; }
.ok-soll { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 0; }
.ok-soll button { background: var(--sunken); width: 24px; height: 24px; font-weight: 700; border: 0; padding: 0; cursor: pointer; color: var(--text); }
.ok-soll button:disabled { opacity: .4; cursor: default; }
.ok-soll span { padding: 0 7px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ok-up { margin: 0; } .ok-up label { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--sunken); cursor: pointer; margin: 0; }
/* Notizen */
.ok-actions a { text-decoration: none; }
.ok-notes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.ok-gal { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ok-gal img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; cursor: zoom-in; }
.ok-tl-list { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.ok-tl-list time { color: var(--muted); font-size: 12px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.ok-foot { color: var(--ok-faint); font-size: 12px; display: flex; gap: 6px; align-items: center; }
/* Eingabefeld */
.ok-pop { position: absolute; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 10px; display: flex; flex-direction: column; gap: 6px; width: 260px; margin: 0; }
.ok-pop[hidden] { display: none; }
.ok-pop label { font-size: 12px; color: var(--muted); margin: 0; }
.ok-pop .r { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 980px) {
  .ok-next, .ok-two, .ok-tech, .ok-notes { grid-template-columns: minmax(0, 1fr); }
  .ok-now { border-right: 0; border-bottom: 1px solid var(--line); }
  .ok-sep { display: none; }
}
@media (max-width: 560px) { .ok-jump { display: none; } .ok-cap { width: 76px; } .ok-pics { max-width: 40%; } }
@media (max-width: 980px) { .ok-arow { flex: 1 1 100%; } .ok-comp { gap: 14px; } }

/* ===== Kontakt-Kartei (Claude-Design „Kontakt-Kartei“) ===== */
.kk { display: grid; gap: 14px; max-width: 1180px; margin-bottom: 14px; }
.kk-crumbs { font-size: 12px; color: var(--muted); }
.kk-head { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 12px; }
.kk-head-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kk-who { flex: 1; min-width: 220px; }
.kk-who h1 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kk-anr { font-weight: 400; color: var(--muted); font-size: 15px; }
.kk-role { font-size: 11px; font-weight: 600; color: var(--r-owner-ink); background: var(--r-owner); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.kk-role.r-tenant { color: var(--r-tenant-ink); background: var(--r-tenant); }
.kk-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 3px; }
.kk-src { font-size: 11px; font-weight: 600; color: var(--link); background: var(--s-neu-bg); border-radius: 4px; padding: 1px 6px; }
.kk-src.manual { color: var(--warn); background: var(--warn-bg); }
.kk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.kk-actions .btn { border-radius: 8px; font-weight: 600; }
.kk-ds { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.kk-ring { display: flex; gap: 10px; align-items: center; }
.kk-ring svg { width: 58px; height: 58px; } .kk-ring text { fill: var(--text); }
.kk-ring .t { font-size: 12px; color: var(--muted); line-height: 1.3; } .kk-ring .t b { display: block; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.kk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kk-tile { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; min-width: 0; }
.kk-tile .ic { grid-row: span 2; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--sunken); color: var(--muted); }
.kk-tile .n { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-tile .s { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 2; }
.kk-tile .st { grid-row: 1 / span 2; grid-column: 3; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.kk-tile.ok .st, .kk-tile.ok .ic { background: var(--ok-bg); color: var(--ok); }
.kk-tile.bad .st, .kk-tile.bad .ic { background: var(--err-bg); color: var(--err); }
.kk-tile.warn .st, .kk-tile.warn .ic { background: var(--warn-bg); color: var(--warn); }
.kk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.kk-tabs a { border-bottom: 2px solid transparent; padding: 7px 10px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; display: flex; gap: 6px; align-items: center; text-decoration: none; }
.kk-tabs a[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.kk-tabs .cnt { font-size: 11px; background: var(--sunken); border-radius: 4px; padding: 0 5px; font-variant-numeric: tabular-nums; } .kk-tabs .cnt.zero { opacity: .55; }
.kk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; max-width: 1180px; }
.kk-col { display: grid; gap: 14px; min-width: 0; }
.kk-card, .kk-fields > .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; margin: 0; box-shadow: none; }
.kk-card h2, .kk-fields > .card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kk-card h2 > .ico { color: var(--muted); }
.kk-card h2 .right { margin-left: auto; font-size: 12px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.kk-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.kk-kv > div { min-width: 0; }
.kk-kv dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kk-kv dd { margin: 1px 0 0; display: flex; gap: 6px; align-items: center; font-weight: 500; overflow-wrap: anywhere; flex-wrap: wrap; }
.kk-kv dd.missing { color: var(--err); font-weight: 400; font-size: 13px; }
.kk-multi { flex-direction: column; align-items: flex-start !important; } .kk-multi span { display: inline-flex; gap: 6px; align-items: center; }
.kk-copy { border: 0; background: none; color: var(--muted); padding: 2px; border-radius: 4px; display: inline-grid; place-items: center; cursor: pointer; font-size: 11px; }
.kk-copy:hover { color: var(--text); background: var(--sunken); }
.kk-wa { font-size: 11px; font-weight: 600; color: #1a8f4c; background: #e3f6ea; border-radius: 4px; padding: 0 6px; }
.kk-meta { font-size: 12px; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kk-edit { margin-top: 10px; }
.kk-links { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.kk-links li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.kk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.kk-lt { flex: 1; min-width: 180px; } .kk-lt small { display: block; color: var(--muted); font-size: 11px; }
.kk-la { display: flex; gap: 10px; font-size: 12px; font-weight: 600; }
.kk-portal { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.kk-portal p { margin: 0; flex: 1; min-width: 200px; }
.kk-obj { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
.kk-photo { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--sunken) center / cover no-repeat; display: grid; place-items: center; }
.kk-photo svg { width: 70%; height: auto; }
.kk-obj-body { display: grid; gap: 8px; min-width: 0; }
.kk-obj-title { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .kk-obj-title a { font-weight: 700; }
.kk-obj-addr { font-size: 12px; color: var(--muted); margin-top: -6px; }
.kk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kk-fact { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.kk-fact b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.kk-mini { display: flex; gap: 4px; flex-wrap: wrap; } .kk-mini span { font-size: 11px; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.m-h { color: var(--err); background: var(--err-bg); } .m-m { color: var(--warn); background: var(--warn-bg); } .m-n { color: var(--ok); background: var(--ok-bg); }
.kk-ulabel { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.kk-units { display: flex; gap: 6px; flex-wrap: wrap; }
.kk-unit { border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; display: flex; gap: 8px; align-items: baseline; color: var(--text); text-decoration: none !important; }
.kk-unit:hover { border-color: var(--text); } .kk-unit span { color: var(--muted); } .kk-unit .q { color: var(--warn); }
.kk-prio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.kk-prio div { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.kk-prio b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.kk-prio .h { border-left: 3px solid var(--err); } .kk-prio .m { border-left: 3px solid var(--warn); } .kk-prio .n { border-left: 3px solid var(--ok); }
.kk-filter { display: flex; gap: 4px; }
.kk-filter button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; cursor: pointer; }
.kk-filter button[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.kk-tl { overflow-x: auto; }
.kk-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.kk-table th { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; background: none; }
.kk-table td { padding: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.kk-table td.t { white-space: normal; min-width: 160px; } .kk-table td.t small { display: block; color: var(--muted); font-size: 11px; }
.kk-table tr.done td { color: var(--muted); } .kk-table tr.done a { color: var(--muted); }
.kk-table .nr { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.kk-pr { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; } .kk-pr::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kk-pr.h { color: var(--err); } .kk-pr.m { color: var(--warn); } .kk-pr.n { color: var(--ok); }
.kk-foot { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; border-top: 1px dashed var(--line); padding-top: 10px; margin: 14px 0; max-width: 1180px; }
@media (max-width: 900px) { .kk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kk-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .kk-ds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .kk-kv, .kk-obj, .kk-facts { grid-template-columns: minmax(0, 1fr); } .kk-prio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .kk-photo { aspect-ratio: 16 / 7; } .kk-photo svg { width: auto; height: 80%; } }

/* ===== Kalendereinträge (Claude-Design „Kalendereinträge“): geführter Ablauf und Liste mit festen Spalten ===== */
:root { --ke-termin: #2f5fb8; --ke-termin-bg: #e8eefa; --ke-rueck: #b4570f; --ke-rueck-bg: #fbeee3; --ke-erin: #6a4bb0; --ke-erin-bg: #efeafa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ke-termin: #8fb0f0; --ke-termin-bg: #1f2a40; --ke-rueck: #f0a66a; --ke-rueck-bg: #3a2717; --ke-erin: #b9a2f0; --ke-erin-bg: #2a2340; } }
:root[data-theme="dark"] { --ke-termin: #8fb0f0; --ke-termin-bg: #1f2a40; --ke-rueck: #f0a66a; --ke-rueck-bg: #3a2717; --ke-erin: #b9a2f0; --ke-erin-bg: #2a2340; }
.ke { display: flex; flex-direction: column; gap: 16px; max-width: 1320px; }
.ke-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ke-head h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.ke-wiz { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(20,25,35,.04), 0 8px 24px -16px rgba(20,25,35,.18); margin: 0; }
.ke-wiz[hidden] { display: none; }
.ke-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px 0; }
.ke-top .t { font-weight: 600; } .ke-top .c { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ke-track { list-style: none; margin: 0; padding: 16px 22px 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.ke-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.ke-track li::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--line); }
.ke-track li:first-child::before { display: none; }
.ke-track li.done::before, .ke-track li.cur::before { background: var(--text); }
.ke-track .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 2px solid var(--line-2); background: var(--surface); color: var(--muted); }
.ke-track li.done { cursor: pointer; }
.ke-track li.done .dot { background: var(--text); border-color: var(--text); color: var(--surface); }
.ke-track li.cur .dot { border-color: var(--text); color: var(--text); box-shadow: 0 0 0 4px var(--sunken); }
.ke-track .nm { font-size: 12px; font-weight: 600; color: var(--muted); }
.ke-track li.cur .nm, .ke-track li.done .nm { color: var(--text); }
.ke-track .vl { font-size: 11.5px; color: var(--muted); max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.ke-mail { margin: 14px 22px 0; }
.ke-stage { padding: 24px 22px 8px; display: flex; justify-content: center; }
.ke-step { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 18px; }
.ke-step[hidden] { display: none; }
.ke-q { font-size: 19px; font-weight: 600; margin: 0; }
.ke-qs { color: var(--muted); margin: -12px 0 0; font-size: 13px; }
.ke-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ke-tile { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 16px; cursor: pointer; margin: 0; font-weight: 400; transition: border-color .12s, box-shadow .12s; }
.ke-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ke-tile:hover { border-color: var(--line-2); box-shadow: 0 2px 10px -6px rgba(20,25,35,.25); }
.ke-tile:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 3px var(--sunken); }
.ke-tile:has(input:checked)::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--surface); font-size: 12px; display: grid; place-items: center; }
.ke-tile:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ke-tile .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.ke-tile b { font-size: 15px; } .ke-tile .d { color: var(--muted); font-size: 12.5px; margin-top: -6px; }
.ic.termin { background: var(--ke-termin-bg); color: var(--ke-termin); } .ic.rueckruf { background: var(--ke-rueck-bg); color: var(--ke-rueck); } .ic.erinnerung { background: var(--ke-erin-bg); color: var(--ke-erin); } .ic.me { background: var(--sunken); color: var(--text); }
.ke-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ke-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.ke-f.full { grid-column: 1 / -1; }
.ke-f > label, .ke-f label:first-child { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0; }
.ke-f label i { font-style: normal; font-weight: 400; color: var(--ok-faint, #9aa0aa); }
.ke-time { display: flex; gap: 10px; align-items: center; } .ke-time input { flex: 1; }
.ke-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ke-chips[hidden], .ke-step [hidden] { display: none !important; }
.ke-chip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px 6px 6px; cursor: pointer; white-space: nowrap; margin: 0; font: inherit; font-weight: 500; color: var(--text); }
.ke-chip.plain { padding: 7px 16px; }
.ke-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ke-chip .av { width: 24px; height: 24px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; font-size: 10.5px; font-weight: 600; }
.ke-chip:has(input:checked), .ke-chip[aria-pressed="true"] { border-color: var(--text); background: var(--sunken); }
.ke-chip:has(input:checked) .av { background: var(--text); color: var(--surface); }
.ke-summary { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ke-summary div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.ke-summary div:last-child { border-bottom: 0; } .ke-summary div:nth-child(odd) { background: var(--surface-2); }
.ke-summary dt { color: var(--muted); font-size: 13px; } .ke-summary dd { margin: 0; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.ke-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 22px 18px; }
.ke-nav .sp { flex: 1; }
.ke-nav .btn.text { border-color: transparent; background: transparent; color: var(--muted); padding-inline: 8px; box-shadow: none; }
.ke-err { color: var(--err); font-size: 13px; }
.ke-lhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ke-tabs { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; flex-wrap: wrap; }
.ke-tabs a { padding: 5px 12px; border-radius: 6px; color: var(--muted); font-weight: 500; white-space: nowrap; text-decoration: none; }
.ke-tabs a[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ke-tabs .cnt { font-variant-numeric: tabular-nums; margin-left: 5px; color: var(--muted); font-weight: 400; }
.ke-tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.ke-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; min-width: 1060px; }
.ke-table col.k-chk { width: 44px; } .ke-table col.k-due { width: 112px; } .ke-table col.k-typ { width: 112px; } .ke-table col.k-con { width: 15%; } .ke-table col.k-obj { width: 16%; }
.ke-table col.k-tic { width: 128px; } .ke-table col.k-for { width: 11%; } .ke-table col.k-ol { width: 112px; } .ke-table col.k-act { width: 100px; }
.ke-table th, .ke-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.ke-table thead th { background: var(--surface-2); font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; user-select: none; white-space: nowrap; overflow-wrap: normal; }
.ke-table thead th .sub { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; margin-top: 1px; }
.ke-table thead th .ar { opacity: .35; margin-left: 3px; } .ke-table thead th[aria-sort] .ar { opacity: 1; color: var(--text); }
.ke-table thead tr.flt th { background: var(--surface); padding: 5px 6px; cursor: default; }
.ke-table .flt input, .ke-table .flt select { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 12px; min-width: 0; min-height: 0; height: 28px; }
.ke-table tr.grp td { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 12px; }
.ke-table tr.grp.over td { color: var(--err); }
.ke-table tbody tr.ke-row:hover td { background: var(--surface-2); }
.ke-table .l1 { font-weight: 500; } .ke-table .l2 { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ke-table .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ke-table .na { color: var(--ok-faint, #9aa0aa); font-weight: 400; } .ke-table .miss { color: var(--err); font-size: 12.5px; }
.ke-table .mono { font-variant-numeric: tabular-nums; font-size: 12.5px; } .ke-table .over-t { color: var(--err); font-weight: 600; }
.ke-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 0; font-family: inherit; }
.ke-pill.p-termin { background: var(--ke-termin-bg); color: var(--ke-termin); } .ke-pill.p-rueckruf { background: var(--ke-rueck-bg); color: var(--ke-rueck); } .ke-pill.p-erinnerung { background: var(--ke-erin-bg); color: var(--ke-erin); }
.ke-pill.p-ok { background: var(--ok-bg); color: var(--ok); } .ke-pill.p-warn { background: var(--warn-bg); color: var(--warn); cursor: pointer; } .ke-pill.p-bad { background: var(--err-bg); color: var(--err); cursor: pointer; }
.ke-table form { margin: 0; }
.ke-chk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 0; color: transparent; }
.ke-chk:hover { border-color: var(--ok); color: var(--ok); }
.ke-table tr.done .ke-chk { background: var(--ok); border-color: var(--ok); color: #fff; }
.ke-table tr.done td:not(.c-chk) { color: var(--muted); } .ke-table tr.done .l1 { text-decoration: line-through; }
.ke-ib { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.ke-ib:hover { background: var(--sunken); color: var(--text); }
.ke-table td.c-act { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.ke-table .empty td { text-align: center; color: var(--muted); padding: 28px; }
.ke-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); }
@media (max-width: 760px) {
  .ke-table { table-layout: auto; min-width: 0; }
  .ke-table colgroup, .ke-table thead { display: none; }
  .ke-table, .ke-table tbody, .ke-table tr, .ke-table td { display: block; width: 100%; }
  .ke-table tr.ke-row { position: relative; padding: 12px 12px 12px 48px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .ke-table tr.ke-row[hidden] { display: none; }
  .ke-table tr.ke-row td { border: 0; padding: 0; }
  .ke-table tr.ke-row td.c-chk { position: absolute; left: 12px; top: 12px; width: auto; }
  .ke-table tr.ke-row td.c-ttl { grid-column: 1 / -1; order: -1; }
  .ke-table tr.ke-row td.c-act { grid-column: 1 / -1; }
  .ke-table tr.ke-row td[data-h]::before { content: attr(data-h); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .ke-fields { grid-template-columns: minmax(0, 1fr); }
  .ke-summary div { grid-template-columns: 1fr; gap: 2px; }
  .ke-track .vl { display: none; } .ke-track .nm { font-size: 11px; }
  .ke-track, .ke-stage, .ke-nav, .ke-top { padding-left: 14px; padding-right: 14px; }
}
.ke-f.check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.ke-table { min-width: 1240px; }
.ke-table col.k-con { width: 170px; } .ke-table col.k-obj { width: 180px; } .ke-table col.k-for { width: 120px; } .ke-table col.k-tic { width: 120px; } .ke-table col.k-ttl { width: auto; }
@media (max-width: 760px) { .ke-table { min-width: 0; } }

/* Eigentümerversammlungen (Übersicht): Nächste Schritte, Tabelle mit Abreißkalender, Objekte ohne Planung */
.et { display: flex; flex-direction: column; gap: 18px; max-width: 1320px; font-size: .9rem; }
.et-back { align-self: flex-start; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 12px; font-size: .78rem; font-weight: 600; color: var(--text); text-decoration: none; }
.et-back:hover { background: var(--hover); text-decoration: none; }
.et h1 { font-size: 1.45rem; margin: 0; text-wrap: balance; }
.et-sub { color: var(--muted); font-size: .83rem; margin: 2px 0 0; }
.et-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.et-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.et-tools form { margin: 0; }
.et-tools select { margin: 0; max-width: 320px; }
.et-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 2px 9px; font-size: .76rem; font-weight: 600; white-space: nowrap; max-width: 100%; text-decoration: none; font-variant-numeric: tabular-nums; }
.et a.et-chip:hover { text-decoration: none; filter: brightness(.96); }
.et .et-chip.ok { display: inline-flex; flex-direction: row; gap: 5px; max-width: 100%; background: var(--ok-bg); color: var(--ok); } .et-chip.warn { background: var(--warn-bg); color: var(--warn); }
.et-chip.bad { background: var(--err-bg); color: var(--err); } .et-chip.neu { background: var(--sunken); color: var(--muted); }
.et-chip.acc { background: var(--s-neu-bg); color: var(--s-neu); }
.et-det { font-size: .76rem; color: var(--muted); line-height: 1.3; }
.et-st { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.et-num { font-variant-numeric: tabular-nums; }
.et-bad { color: var(--err); }
.et-mono { white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
.et-sm { font-size: .77rem; }
.et-count { font-size: .8rem; color: var(--muted); font-weight: 600; }
.et-hint { font-size: .8rem; color: var(--muted); }
.et-empty { padding: 18px; color: var(--muted); text-align: center; margin: 0; }
.et .s-bad { color: var(--err); font-weight: 600; } .et .s-warn { color: var(--warn); font-weight: 600; } .et .s-ok { color: var(--ok); font-weight: 600; }

/* Formular */
.et-form { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.et-form input, .et-form select, .et-form textarea { margin: 0; width: 100%; }
.et-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.et-l { font-size: .8rem; color: var(--muted); font-weight: 600; }
.et-form .span2 { grid-column: span 2; } .et-form .span3 { grid-column: span 3; } .et-form .span4 { grid-column: 1 / -1; }
.et-times { flex-direction: row; gap: 8px; } .et-times > .et-f { flex: 1; }
.et-cal { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 4px; }
.et-cal label { display: flex; gap: 6px; align-items: center; font-size: .84rem; margin: 0; font-weight: 400; }
.et-cal input { width: auto; }
.et-deadline { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.et-fbtn { margin-left: auto; display: flex; gap: 8px; }

/* Nächste Schritte */
.et-alerts { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.et-wf-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.et-wf-head h2, .et-sec-h h2 { font-size: 1rem; margin: 0; display: flex; gap: 8px; align-items: baseline; }
.et-wf-sum { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.et-flow { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.et-flow summary { cursor: pointer; padding: 7px 12px; font-size: .83rem; font-weight: 600; }
.et-flow ol { margin: 0; padding: 4px 12px 12px; list-style: none; counter-reset: f; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.et-flow li { counter-increment: f; display: flex; flex-direction: column; gap: 2px; font-size: .77rem; color: var(--muted); border-top: 3px solid var(--link); padding-top: 6px; }
.et-flow li b { color: var(--text); font-size: .8rem; }
.et-flow li b::before { content: counter(f) ". "; }
.et-flow li:nth-child(4) { border-top-color: var(--err); }
.et-wf { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.et-wf-row { display: grid; grid-template-columns: 34px 128px 130px minmax(0, 2.2fr) 110px minmax(0, 1.6fr) 120px; gap: 12px; align-items: start; padding: 9px 12px; border-top: 1px solid var(--line); font-size: .83rem; }
.et-wf-row:first-child { border-top: 0; }
.et-wf-th { background: var(--surface-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding-block: 6px; }
.et-wf-row > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.et-wf-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); padding-top: 2px; }
.et-wf-s { color: var(--muted); font-size: .8rem; }
.et-wf-a { align-items: flex-end !important; }
.et-wf-more { align-self: flex-start; }

/* Abschnitte und Tabellen */
.et-sec { display: flex; flex-direction: column; gap: 8px; }
.et-sec-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.et-segs { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.et-seg { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 3px 10px; font-size: .8rem; color: var(--muted); text-decoration: none; cursor: pointer; font: inherit; font-size: .8rem; }
.et-seg:hover { text-decoration: none; background: var(--hover); }
.et-seg[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.et-box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.et-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
.et-tbl th, .et-tbl td { text-align: left; padding: 10px; vertical-align: top; white-space: normal; overflow-wrap: break-word; hyphens: auto; border: 0; }
.et-tbl thead th, .et-tbl thead td { vertical-align: bottom; }
.et-sum td { font-size: .72rem; color: var(--muted); background: var(--surface-2); padding-block: 5px !important; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line) !important; }
.et-sum b { color: var(--text); }
.et-hd th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; overflow-wrap: normal; word-break: normal; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line) !important; user-select: none; white-space: normal; hyphens: manual; background: none; vertical-align: bottom; line-height: 1.3; } /* lange Spaltennamen umbrechen statt abschneiden */
.et-hd th.sortable { cursor: pointer; }
.et-hd th .arr { opacity: .35; margin-left: 3px; }
.et-hd th[aria-sort] .arr { opacity: 1; color: var(--link); }
.et-flt td { padding: 5px 6px !important; border-bottom: 1px solid var(--line) !important; }
.et-flt input, .et-flt select { width: 100%; padding: 4px 6px; font-size: .78rem; border-radius: 5px; margin: 0; min-height: 0; height: auto; }
.et-row { border-bottom: 1px solid var(--line); cursor: pointer; }
.et-row.et-norow { cursor: default; }
.et-row:hover, .et-row.open { background: var(--surface-2); }
.et-tbl tbody tr:last-child { border-bottom: 0; }
.et-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Abreißkalender */
.et-date { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; }
.et-sheet { position: relative; width: 66px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; text-align: center; line-height: 1.1;
  box-shadow: 0 2px 0 -1px var(--surface), 0 2px 0 0 var(--line), 0 4px 0 -2px var(--surface), 0 4px 0 -1px var(--line); }
.et-sheet .mo { display: block; border-radius: 5px 5px 0 0; padding: 5px 0 3px; font-size: .64rem; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--band); }
.et-sheet .mo::before { content: ""; position: absolute; top: -3px; left: 14px; right: 14px; height: 6px; background: radial-gradient(circle, var(--line-2) 2.2px, transparent 2.6px) 0 0 / 16px 6px repeat-x; }
.et-sheet .dd { display: block; font-size: 1.4rem; font-weight: 700; padding-top: 3px; font-variant-numeric: tabular-nums; }
.et-sheet .wd { display: block; font-size: .67rem; color: var(--muted); padding-bottom: 3px; }
.et-sheet .tm { display: block; border-top: 1px dashed var(--line); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; font-weight: 500; padding: 3px 0 4px; }
.et-cd { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.et-cd small { font-size: .7rem; color: var(--muted); }

/* Objekt mit Foto, Tickets, Fortschritt, Jahre */
.et-ob { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.et-nr { font-weight: 700; white-space: nowrap; flex: none; width: 64px; color: var(--text); }
.et-ph { width: 58px; height: 42px; border-radius: 5px; flex: none; overflow: hidden; border: 1px solid var(--line); background: var(--sunken) center / cover no-repeat; display: flex; }
.et-ph .obj-ph { width: 100%; height: 100%; }
.et-stack { display: flex; flex-direction: column; min-width: 0; }
.et-tk { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.et-tk b { font-size: .84rem; font-variant-numeric: tabular-nums; }
.et-prio, .et-yrs { display: flex; gap: 3px; flex-wrap: nowrap; }
.et-prio span, .et-yr { font-size: .67rem; font-weight: 600; border-radius: 4px; padding: 1px 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.et-prio .h { background: var(--p-hoch-bg); color: var(--p-hoch); } .et-prio .m { background: var(--p-normal-bg); color: var(--p-normal); } .et-prio .n { background: var(--sunken); color: var(--muted); }
.et-yr.y { background: var(--ok-bg); color: var(--ok); } .et-yr.n { background: var(--err-bg); color: var(--err); text-decoration: line-through; }
.et-prog { display: flex; align-items: center; gap: 8px; margin-top: -3px; }
.et-ring { width: 26px; height: 26px; flex: none; }
.et-ring circle { fill: none; stroke-width: 4; }
.et-ring .t { stroke: var(--line); }

/* Detail */
.et-detail > td { background: var(--surface-2); border-bottom: 1px solid var(--line) !important; padding: 14px 16px 16px !important; cursor: default; }
.et-dgrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.et-dgrid h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.et-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.et-steps form { margin: 0; }
.et-steps label { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; cursor: pointer; margin: 0; font-weight: 400; font-size: .84rem; }
.et-steps label:hover { background: var(--surface); }
.et-steps input { accent-color: var(--link); width: 15px; height: 15px; margin: 0; padding: 0; flex: none; }
.et-steps .when { margin-left: auto; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.et-steps .done span:first-of-type { color: var(--muted); text-decoration: line-through; }
.et-docs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.et-docs li { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; min-width: 0; font-size: .84rem; }
.et-docs li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-docs form { margin: 0; }
.et-docs label.btn { margin: 0; cursor: pointer; }
.et-docbtn { display: flex; gap: 6px; align-items: center; }
.et-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .83rem; margin: 0; }
.et-kv dt { color: var(--muted); } .et-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .et-form { grid-template-columns: 1fr 1fr; }
  .et-form .span2, .et-form .span3 { grid-column: 1 / -1; }
  .et-dgrid { grid-template-columns: 1fr; }
  .et-tbl, .et-tbl tbody, .et-tbl thead { display: block; }
  .et-tbl colgroup, .et-hd, .et-flt, .et-sum { display: none; }
  .et-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 12px; }
  .et-row td { padding: 0 !important; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .et-row td::before { content: attr(data-label); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
  .et-row td.wide { grid-column: 1 / -1; }
  .et-row td.nolabel::before { display: none; }
  .et-detail, .et-detail > td { display: block; }
  .et-detail[hidden] { display: none; }
  .et-flow ol { grid-template-columns: 1fr 1fr; }
  .et-wf-th { display: none; }
  .et-wf-row { grid-template-columns: 28px 1fr 1fr; gap: 6px 10px; }
  .et-wf-t, .et-wf-s { grid-column: 2 / -1; }
  .et-wf-f { grid-column: 2; }
  .et-wf-a { grid-column: 3; align-items: flex-start !important; }
  .et-wf-row > span[data-l]::before { content: attr(data-l); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
  .et-wf-row[hidden] { display: none; }
}
@media (max-width: 480px) { .et-form { grid-template-columns: 1fr; } .et-flow ol { grid-template-columns: 1fr; } .et-fbtn { margin-left: 0; } }

/* Einheiten-Übersicht (eh-*): Objektkopf mit Kacheln und Datenqualität, Schnellfilter, Tabelle je Objekt/Haus, Leiste rechts */
.eh { --eh-obj: #eef2fc; --eh-faint: #a3a9b4; --eh-weg: #5a2e9c; --eh-weg-bg: #f0eafb; --eh-acc: #1f4fd1; --eh-acc-bg: #e8eefc; --eh-ok-line: #b9dfc8; --eh-mid: #8a5300; --eh-mid-bg: #fdf0d9; --eh-mid-line: #f1d19a;
  --eh-bad: #a8201a; --eh-bad-bg: #fce8e6; --eh-bad-line: #f3c1bc; --eh-hi: #b42318; --eh-md: #c46a00; --eh-chip: #e7e9ee; --eh-man: #8a4b08; --eh-man-bg: #fdf1dc; --eh-pct-l: 38%;
  display: flex; flex-direction: column; gap: 14px; max-width: 1392px; min-width: 0; font-size: 14px; }
.eh > * { min-width: 0; max-width: 100%; }
.eh-rail { --eh-acc: #1f4fd1; --eh-acc-bg: #e8eefc; --eh-chip: #e7e9ee; --eh-hi: #b42318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eh, :root:not([data-theme="light"]) .eh-rail { --eh-obj: #1e2537; --eh-faint: #646b78; --eh-weg: #c7a9f5; --eh-weg-bg: #30264a; --eh-acc: #8fb0ff; --eh-acc-bg: #22304f; --eh-ok-line: #285a3e;
  --eh-mid: #f2be62; --eh-mid-bg: #3a2c12; --eh-mid-line: #5e461c; --eh-bad: #ff9c90; --eh-bad-bg: #3d1d1a; --eh-bad-line: #66302a; --eh-hi: #ff8a7a; --eh-md: #f2be62; --eh-chip: #262a32; --eh-man: #f0b24b; --eh-man-bg: #3a2d14; --eh-pct-l: 62%; } }
:root[data-theme="dark"] .eh, :root[data-theme="dark"] .eh-rail { --eh-obj: #1e2537; --eh-faint: #646b78; --eh-weg: #c7a9f5; --eh-weg-bg: #30264a; --eh-acc: #8fb0ff; --eh-acc-bg: #22304f; --eh-ok-line: #285a3e;
  --eh-mid: #f2be62; --eh-mid-bg: #3a2c12; --eh-mid-line: #5e461c; --eh-bad: #ff9c90; --eh-bad-bg: #3d1d1a; --eh-bad-line: #66302a; --eh-hi: #ff8a7a; --eh-md: #f2be62; --eh-chip: #262a32; --eh-man: #f0b24b; --eh-man-bg: #3a2d14; --eh-pct-l: 62%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eh-num { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.eh-pagehead { display: flex; flex-direction: column; gap: 4px; }
.eh-crumb { font-size: 12px; color: var(--muted); }
.eh-crumb a { color: var(--eh-acc); text-decoration: none; }
.eh-h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.015em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; line-height: 1.15; }
.eh-h1 .h1n { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; font-weight: 600; color: var(--muted); }
.eh-h1 .h1o { font-size: 17px; font-weight: 500; color: var(--muted); }
.eh-src { font-size: 11px; font-weight: 600; color: var(--eh-acc); background: var(--eh-acc-bg); padding: 3px 8px; border-radius: 6px; }

.eh-objcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.eh-objhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px 24px; padding: 16px; align-items: start; }
.eh-oh-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.eh-oh-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.eh-oh-top .eh-thumb { width: 184px; height: 132px; border-radius: 12px; }
.eh-oh-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 260px; }
.eh-oh-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.eh-oh-title .ort { font-size: 16px; font-weight: 500; color: var(--muted); }
.eh-oh-title .ort.miss { color: var(--eh-bad); font-size: 15px; font-weight: 600; }
.eh-oh-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.eh-oh-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-left: auto; }
.eh-oh-switch { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); margin: 0; font-weight: 400; }
.eh-sel { height: 38px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; max-width: 100%; margin: 0; }
.eh-oh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; gap: 8px; }
.eh-tile { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.eh-ti { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.eh-ti.acc { color: var(--eh-acc); background: var(--eh-acc-bg); } .eh-ti.weg { color: var(--eh-weg); background: var(--eh-weg-bg); } .eh-ti.neu { color: var(--text-2); background: var(--eh-chip); }
.eh-ti.ok { color: var(--ok); background: var(--ok-bg); } .eh-ti.mid { color: var(--eh-mid); background: var(--eh-mid-bg); } .eh-ti.bad { color: var(--eh-bad); background: var(--eh-bad-bg); }
.eh-tt { display: flex; flex-direction: column; min-width: 0; }
.eh-tv { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 19px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.eh-tv small { font-size: 13px; font-weight: 500; color: var(--muted); }
.eh-tl { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-tl b { color: var(--eh-hi); font-weight: 600; }
.eh-tlinks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.eh-lk { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--eh-acc); background: var(--eh-acc-bg); padding: 1px 7px; border-radius: 99px; text-decoration: none; white-space: nowrap; }
.eh-lk:hover { text-decoration: underline; }
.eh-lk.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; }
.eh-lk.bad { color: var(--eh-bad); background: var(--eh-bad-bg); } .eh-lk.mid { color: var(--eh-mid); background: var(--eh-mid-bg); }
.eh-lk.ext { background: transparent; padding-left: 2px; padding-right: 2px; }
.eh-lk .od, .eh-occ-lg .od { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.eh-lk.occ { color: var(--ok); background: var(--ok-bg); }
.eh-lk.vac { color: var(--eh-mid); background: transparent; box-shadow: inset 0 0 0 1px var(--eh-mid-line); }
.eh-lk.vac .od { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.eh-occ-lg { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.eh-occ-lg .od.ok { background: var(--ok); } .eh-occ-lg .od.mid { background: transparent; box-shadow: inset 0 0 0 1.5px var(--eh-mid); }

.eh-dq { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eh-dq-head { display: flex; align-items: center; gap: 12px; padding: 0 4px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.eh-dq-ring { position: relative; flex: none; width: 56px; height: 56px; }
.eh-dq-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; }
.eh-dq-head > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.eh-dq-t { font-size: 15px; font-weight: 700; } .eh-dq-s { font-size: 12px; color: var(--muted); }
.eh-dq-g { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 8px 4px 2px; }
.eh-dq-line { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 2px; }
.eh-dq-row { display: grid; grid-template-columns: 118px minmax(40px, 1fr) 44px 46px; align-items: center; gap: 8px; padding: 3px 4px; border: 0; background: transparent; border-radius: 6px; font: inherit; font-size: 12.5px; text-align: left; width: 100%; color: var(--text); }
button.eh-dq-row { cursor: pointer; } button.eh-dq-row:hover { background: var(--eh-chip); }
.eh-dq-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-dq-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.eh-dq-bar i { display: block; height: 100%; border-radius: 3px; }
.eh-dq-n { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); text-align: right; }
.eh-dq-p { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; text-align: right; }
.eh-dq-row.na { color: var(--eh-faint); } .eh-dq-row.na .eh-dq-p { font-family: inherit; font-weight: 500; font-size: 11px; color: var(--eh-faint); }
.eh-dq-go { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); }
.eh-dq-go:hover { background: var(--eh-chip); color: var(--eh-acc); }
.eh-dq-foot { font-size: 11px; color: var(--muted); padding: 8px 4px 0; }

.eh-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; padding: 0 16px; border-top: 1px solid var(--line-2); }
.eh-tablist { display: flex; gap: 4px; overflow-x: auto; min-width: 0; }
.eh-tab { display: inline-flex; align-items: center; gap: 6px; padding: 11px 10px 9px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.eh-tab:hover { color: var(--text); text-decoration: none; }
.eh-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--eh-acc); }
.eh-tab .cnt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; padding: 0 6px; border-radius: 99px; background: var(--eh-chip); color: var(--text-2); }
.eh-tab.on .cnt { background: var(--eh-acc-bg); color: var(--eh-acc); }
.eh-sync { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding-bottom: 10px; }

.eh-thumb { flex: none; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; display: block; background: var(--sunken) center / cover no-repeat; }
.eh-thumb.sm { width: 56px; height: 42px; border-radius: 8px; }
.eh-thumb.none { border: 1.5px dashed var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--eh-faint); font-size: 10px; }
.eh-tag { flex: none; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.eh-tag.mv { color: var(--eh-acc); background: var(--eh-acc-bg); } .eh-tag.weg { color: var(--eh-weg); background: var(--eh-weg-bg); }
.eh-tag.test { color: var(--muted); border: 1px dashed var(--eh-faint); padding: 1px 6px; } .eh-tag.man { color: var(--eh-man); background: var(--eh-man-bg); }
.eh-tag.draft { color: var(--eh-mid); background: var(--eh-mid-bg); }

.eh-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.eh-kpi { background: var(--surface); border: 0; border-radius: 0; padding: 10px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; cursor: pointer; font: inherit; color: var(--text); margin: 0; }
.eh-kpi:hover { background: var(--surface-2); }
.eh-kpi .l { font-size: 12px; color: var(--muted); white-space: nowrap; }
.eh-kpi .v { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.eh-kpi .v small { font-size: 12px; font-weight: 500; color: var(--muted); }
.eh-kpi.on { box-shadow: inset 0 -3px 0 var(--text); } .eh-kpi.on .l { color: var(--text); font-weight: 600; }
.eh-kpi .v.warn { color: var(--eh-bad); } .eh-kpi .v.weg { color: var(--eh-weg); }

.eh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eh-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 0; margin: 0; color: var(--muted); font-weight: 400; }
.eh-search input { flex: 1; border: 0; outline: none; background: transparent; min-width: 0; font-size: 14px; margin: 0; padding: 0; height: auto; box-shadow: none; color: var(--text); }
.eh-tbtn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--text); cursor: pointer; margin: 0; text-decoration: none; }
.eh-tbtn:hover { background: var(--surface-2); text-decoration: none; }

.eh-tablebox { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; scroll-margin-top: 80px; }
.eh-table { min-width: 1170px; }
.eh-cols { display: grid; grid-template-columns: 150px 132px minmax(150px, 1.15fr) minmax(140px, 1fr) 72px 72px 72px 72px 128px 82px; column-gap: 10px; align-items: center; padding: 0 16px; }
.eh-cols .c { text-align: center; justify-self: center; } .eh-cols .r { text-align: right; justify-self: end; }
.eh-th { padding-top: 10px; padding-bottom: 4px; }
.eh-sortb { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 0; font: inherit; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; cursor: pointer; margin: 0; }
.eh-sortb:hover, .eh-sortb.on { color: var(--text); }
.eh-sortb .ar { width: 10px; color: var(--eh-faint); } .eh-sortb.on .ar { color: var(--eh-acc); }
.eh-fr { padding-top: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.eh-fsel, .eh-ftxt { width: 100%; height: 28px; min-height: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12px; padding: 0 4px; min-width: 0; margin: 0; }
.eh-ftxt { padding: 0 8px; }
.eh-fsel.on, .eh-ftxt.on { border-color: var(--eh-acc); background: var(--eh-acc-bg); color: var(--text); }
.eh-tot { padding-top: 8px; padding-bottom: 8px; background: var(--surface-2); border-bottom: 2px solid var(--line); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.eh-tot .lab { font-weight: 700; color: var(--text); }
.eh-obj { display: flex; align-items: center; gap: 12px; padding: 10px 16px 8px; background: var(--eh-obj); border-top: 6px solid var(--bg); }
.eh-obj:first-child { border-top: 0; }
.eh-obj .tog { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 2px 0; min-width: 0; text-align: left; flex: 0 1 auto; font: inherit; color: var(--text); cursor: pointer; margin: 0; }
.eh-obj .chev { transition: transform .15s; flex: none; color: var(--muted); }
.eh-obj.closed .chev { transform: rotate(-90deg); }
.eh-obj .nr { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; font-size: 15px; min-width: 36px; flex: none; }
.eh-obj .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eh-obj .adr { font-weight: 700; font-size: 15px; } .eh-obj .ort { color: var(--muted); font-size: 13px; } .eh-obj .ort.miss { color: var(--eh-bad); }
.eh-obj .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.eh-obj.haus .adr { font-size: 14px; } .eh-obj.haus .ort { font-size: 12px; }
.eh-obj .go { font-size: 12px; white-space: nowrap; align-self: flex-end; padding-bottom: 4px; }
.eh-sum { padding-top: 6px; padding-bottom: 8px; background: var(--eh-obj); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.eh-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.eh-row { padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--line-2); white-space: nowrap; font-size: 13.5px; }
.eh-row:hover { background: var(--surface-2); }
.eh-row a.id, .eh-row a.n { color: inherit; text-decoration: none; }
.eh-row a.id:hover, .eh-row a.n:hover { color: var(--eh-acc); text-decoration: underline; }
.eh-unit { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.eh-unit .id { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; font-size: 13px; }
.eh-unit .lage { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.eh-art { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.eh-art .qm { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); } .eh-art .qm.miss { color: var(--eh-faint); }
.eh-person { display: flex; align-items: center; gap: 6px; min-width: 0; }
.eh-person .n { overflow: hidden; text-overflow: ellipsis; }
.eh-dim { color: var(--eh-faint); }
.eh-status { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.eh-status.leer { color: var(--eh-mid); background: var(--eh-mid-bg); } .eh-status.self { color: var(--muted); background: var(--eh-chip); }
.eh-miss { font-size: 12px; font-weight: 500; color: var(--eh-bad); }
.eh-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; }
.eh-ico.ok { color: var(--ok); background: var(--ok-bg); } .eh-ico.no { color: var(--eh-bad); box-shadow: inset 0 0 0 1.5px var(--eh-bad-line); }
.eh-kontakt { display: flex; justify-content: center; gap: 4px; }
.eh-pill { display: inline-block; min-width: 42px; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 99px; border: 1px solid; }
.eh-pill.v { color: var(--ok); background: var(--ok-bg); border-color: var(--eh-ok-line); } .eh-pill.t { color: var(--eh-mid); background: var(--eh-mid-bg); border-color: var(--eh-mid-line); }
.eh-pill.l { color: var(--eh-bad); background: var(--eh-bad-bg); border-color: var(--eh-bad-line); } .eh-pill.na { color: var(--eh-faint); background: transparent; border-color: transparent; font-weight: 500; }
.eh-tk { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; text-decoration: none; color: var(--text); padding: 2px 6px; margin-left: -6px; border-radius: 6px; }
a.eh-tk:hover { background: var(--eh-chip); text-decoration: none; }
.eh-tk .tn { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; min-width: 12px; text-align: right; }
.eh-tk .dots { display: flex; align-items: center; gap: 3px; }
.eh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.eh-dot.h { background: var(--eh-hi); } .eh-dot.m { background: var(--eh-md); } .eh-dot.n { background: var(--muted); }
.eh-tk .more { font-size: 11px; color: var(--muted); }
.eh-tk .bar { display: flex; width: 52px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); }
.eh-tk .bar i { display: block; height: 100%; }
.eh-tk .bar .h { background: var(--eh-hi); } .eh-tk .bar .m { background: var(--eh-md); } .eh-tk .bar .n { background: var(--muted); }
.eh-tk .hi-txt { font-size: 11px; font-weight: 600; color: var(--eh-hi); white-space: nowrap; }
.eh-tk.none { color: var(--eh-faint); font-size: 13px; }
.eh-pct { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.eh-pct b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; width: 36px; text-align: right; }
.eh-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.eh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: var(--muted); }
.eh-legend .eh-pill { min-width: 0; }
.eh-lg-t { display: inline-flex; align-items: center; gap: 5px; }
.eh-push { margin-left: auto; }
.eh-flash { animation: ehFlash 1.8s ease-out; }
@keyframes ehFlash { 0%, 35% { background: var(--eh-acc-bg); } 100% { background: transparent; } }
.eh-obj.eh-flash { animation: ehFlashObj 1.8s ease-out; }
@keyframes ehFlashObj { 0%, 35% { background: var(--eh-acc-bg); } 100% { background: var(--eh-obj); } }

/* Leiste rechts (Schnellzugriff) */
.eh-rail { position: fixed; z-index: 20; top: 50%; transform: translateY(-50%); right: max(12px, env(safe-area-inset-right, 0px)); width: 196px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); }
.eh-rail-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 6px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--line-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.eh-rail-t { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; margin: 0; }
.eh-rail-t:hover { background: var(--surface-2); color: var(--text); }
.eh-ra { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 9px; color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.eh-ra:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.eh-ra svg { flex: none; }
.eh-ra.on { background: var(--eh-acc-bg); color: var(--eh-acc); font-weight: 600; }
.eh-rb { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--eh-chip); color: var(--text-2); }
.eh-ra.on .eh-rb { background: var(--surface); color: var(--eh-acc); }
.eh-rb.warn { background: var(--eh-hi); color: #fff; }
.eh-rail-sep { height: 1px; background: var(--line-2); margin: 4px 2px; }
.eh-rail.mini { width: auto; }
.eh-rail.mini .rl { display: none; }
.eh-rail.mini .eh-rail-h { padding: 2px 2px 6px; justify-content: center; }
.eh-rail.mini .eh-ra { justify-content: center; padding: 0; width: 42px; position: relative; }
.eh-rail.mini .eh-rb { position: absolute; top: 2px; right: 0; font-size: 10px; padding: 0 5px; }
@media (min-width: 1101px) { body.eh-has-rail main, body.eh-has-rail .main { padding-right: 224px; } body.eh-has-rail.eh-rail-mini main, body.eh-has-rail.eh-rail-mini .main { padding-right: 76px; } }
@media (max-width: 1100px) {
  .eh-rail { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; flex-direction: row; justify-content: space-around; border-radius: 14px 14px 0 0; padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); overflow-x: auto; }
  .eh-rail-h, .eh-rail-sep { display: none; }
  .eh-rail .eh-ra { flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 6px; font-size: 10.5px; position: relative; }
  .eh-rail.mini .rl { display: inline; }
  .eh-rail .eh-rb { position: absolute; top: 0; right: 0; font-size: 10px; padding: 0 5px; }
  .eh { padding-bottom: 76px; }
}
@media (max-width: 1000px) { .eh-objhead { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .eh-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .eh-oh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; } .eh-oh-top .eh-thumb { width: 100%; height: 150px; } }
@media (max-width: 520px) { .eh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eh-h1 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .eh-obj .chev { transition: none; } .eh-flash, .eh-obj.eh-flash { animation: none; } }

/* Termine (tm-*): Filter über der Liste, Liste nach Tagen, rechts Mini-Kalender, nächste Versammlung und Detailansicht */
.tm { --tm-red: #c42b2b; --tm-red-bg: #fbe6e6; --tm-orange: #c75a00; --tm-orange-bg: #fdebd9; --tm-yellow: #8a6a00; --tm-yellow-bg: #fbf1c9; --tm-green: #1e7a46; --tm-green-bg: #dff3e7;
  --tm-acc: #2348c7; --tm-acc-soft: #e6ebfb; --tm-soft: #eef1f7; font-size: 13.5px; line-height: 1.4; max-width: 1400px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tm { --tm-red: #ff8a8a; --tm-red-bg: #4a1f22; --tm-orange: #ffb066; --tm-orange-bg: #4a2e14; --tm-yellow: #f0d36a; --tm-yellow-bg: #3f3714; --tm-green: #6fd69b; --tm-green-bg: #173a27; --tm-acc: #7d97ff; --tm-acc-soft: #25305a; --tm-soft: #222838; } }
:root[data-theme="dark"] .tm { --tm-red: #ff8a8a; --tm-red-bg: #4a1f22; --tm-orange: #ffb066; --tm-orange-bg: #4a2e14; --tm-yellow: #f0d36a; --tm-yellow-bg: #3f3714; --tm-green: #6fd69b; --tm-green-bg: #173a27; --tm-acc: #7d97ff; --tm-acc-soft: #25305a; --tm-soft: #222838; }
.tm button { font: inherit; cursor: pointer; margin: 0; }
.tm form { margin: 0; }
.tm-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; padding: 6px 12px; font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.tm-btn:hover { text-decoration: none; background: var(--surface-2); }
.tm-btn.primary, .tm-btn.ok { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.tm-btn.primary:hover, .tm-btn.ok:hover { background: var(--primary-hover); }
.tm-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.tm-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.tm h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.tm-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .tm-sub b { color: var(--text); }
.tm-olk { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 14px; flex-wrap: wrap; }
.tm-olk .s1 { display: flex; align-items: center; gap: 10px; }
.tm-odot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--tm-green); }
.tm-olk .t { display: flex; flex-direction: column; line-height: 1.3; } .tm-olk .t b { font-size: 13px; } .tm-olk .t span { font-size: 12px; color: var(--muted); }
.tm-olk .err { color: var(--tm-red); font-weight: 600; }
.tm-olk .acts { display: flex; gap: 6px; }
.tm-olpanel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; }
.tm-olpanel h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tm-olpanel .kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; }
.tm-olpanel .kv span:nth-child(odd) { color: var(--muted); }
.tm-olmsg { font-size: 12.5px; color: var(--text-2); }
.tm .prob { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.tm .prob button { border: 1px solid var(--tm-red-bg); background: var(--tm-red-bg); color: var(--tm-red); border-radius: 7px; padding: 5px 8px; text-align: left; font-size: 12.5px; }
.tm .prob button b { color: var(--text); font-weight: 600; }

.tm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.tm-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tm-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100vh - 24px); }
.tm-side .tm-det { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
@media (max-width: 1200px) { .tm-layout { grid-template-columns: minmax(0, 1fr); } .tm-side { position: static; max-height: none; } }
.tm-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.tm-fsticky { position: sticky; top: 0; z-index: 5; background: var(--surface); border-radius: 12px 12px 0 0; box-shadow: 0 6px 12px -10px rgba(20, 25, 40, .35); }
.tm-fbar { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; }
.tm-bigsearch { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); background: var(--bg); border-radius: 10px; padding: 0 12px; height: 46px; cursor: text; margin: 0; color: var(--muted); font-weight: 400; }
.tm-bigsearch:focus-within { border-color: var(--tm-acc); background: var(--surface); box-shadow: 0 0 0 3px var(--tm-acc-soft); }
.tm-bigsearch input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text); outline: none; height: 100%; margin: 0; padding: 0; box-shadow: none; }
.tm-bigsearch input::-webkit-search-cancel-button { display: none; }
.tm-qx { border: 0; background: var(--tm-soft); border-radius: 50%; width: 24px; height: 24px; font-size: 16px; line-height: 1; color: var(--muted); padding: 0; }
.tm-fg { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tm-fl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tm-fc2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-pp { display: flex; gap: 4px; flex-wrap: wrap; padding-left: 10px; border-left: 1px solid var(--line); }
.tm-frow3 { display: flex; gap: 12px 22px; flex-wrap: wrap; align-items: flex-start; padding-top: 10px; border-top: 1px solid var(--line); }
.tm-seg { display: inline-flex; background: var(--tm-soft); border-radius: 99px; padding: 3px; flex-wrap: wrap; }
.tm-seg button { border: 0; background: none; padding: 4px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tm-seg button.on { background: var(--text); color: var(--bg); }
.tm-pchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 99px; padding: 2px 10px 2px 2px; font-size: 12.5px; white-space: nowrap; }
.tm-pchip.on { border-color: var(--tm-acc); background: var(--tm-acc-soft); }
.tm-pchip .c { color: var(--muted); font-variant-numeric: tabular-nums; }
.tm-av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex: none; }
.tm-sp { flex: 1; }
.tm-sums { display: flex; gap: 4px; flex-wrap: wrap; min-height: 34px; align-items: center; }
.tm-sum { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 3px 10px; display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tm-sum b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tm-sum.red b { color: var(--tm-red); } .tm-sum.orange b { color: var(--tm-orange); } .tm-sum.yellow b { color: var(--tm-yellow); } .tm-sum.green b { color: var(--tm-green); }
.tm-sum.on { border-color: var(--tm-acc); box-shadow: 0 0 0 1px var(--tm-acc); }
.tm-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.tm-fchip { display: inline-flex; align-items: center; gap: 6px; background: var(--tm-acc-soft); color: var(--tm-acc); border: 0; border-radius: 99px; padding: 2px 6px 2px 10px; font-weight: 600; font-size: 12px; }
.tm-fchip span { font-size: 14px; line-height: 1; }

.tm-tablebox { position: relative; overflow-x: auto; border-top: 1px solid var(--line); }
table.tm-t { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
.tm-t th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; cursor: pointer; background: none; }
.tm-t th:hover { color: var(--text); }
.tm-t th .ar { opacity: .4; margin-left: 3px; } .tm-t th.sorted .ar { opacity: 1; color: var(--tm-acc); }
.tm-t td { padding: 9px 10px; border: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tm-t tr.tm-row { cursor: pointer; }
.tm-t tr.tm-row:hover td { background: var(--tm-soft); }
.tm-t tr.tm-row.selr td { background: var(--tm-acc-soft); }
.tm-t tr.tm-row.selr td:first-child { box-shadow: inset 3px 0 0 var(--tm-acc); }
.tm-t tr.tm-grp td { background: var(--tm-soft); font-weight: 600; font-size: 12.5px; padding: 5px 10px; cursor: default; }
.tm-t tr.tm-grp .gc { color: var(--muted); font-weight: 500; margin-left: 6px; }
.tm-t tr.tm-grp.tod td { background: var(--tm-acc-soft); }
.tm-t.one td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; padding: 7px 10px; }
.tm-c1 { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tm-c1 .l2 { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tm-tt { font-weight: 600; line-height: 1.3; }
.tm-tt a { color: inherit; }
.tm-empty { padding: 28px; text-align: center; color: var(--muted); }
tr.tdone td { opacity: .6; } tr.tdone td:first-child { opacity: 1; }
.tm-due { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 99px; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-due.red { background: var(--tm-red-bg); color: var(--tm-red); } .tm-due.orange { background: var(--tm-orange-bg); color: var(--tm-orange); }
.tm-due.yellow { background: var(--tm-yellow-bg); color: var(--tm-yellow); } .tm-due.green, .tm-due.done { background: var(--tm-green-bg); color: var(--tm-green); }
.tm-type { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.tm-type i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.tm-tk { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 0 7px 0 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 20px; text-decoration: none; }
a.tm-tk:hover { border-color: var(--tm-acc); text-decoration: none; }
.tm-tk svg { width: 12px; height: 12px; color: var(--tm-acc); flex: none; } .tm-tk b { color: var(--tm-acc); font-weight: 500; }
.tm-ts { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 1px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tm-ts::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tm-ts.neu { background: var(--tm-soft); color: var(--muted); } .tm-ts.bearb { background: var(--tm-acc-soft); color: var(--tm-acc); }
.tm-ts.wart { background: var(--tm-yellow-bg); color: var(--tm-yellow); } .tm-ts.erl { background: var(--tm-green-bg); color: var(--tm-green); }
.tm-wechip { display: inline-flex; align-items: center; gap: 4px; background: var(--tm-acc-soft); color: var(--tm-acc); border-radius: 5px; padding: 0 6px; font-weight: 600; font-size: 11.5px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-wechip.gem { background: var(--tm-soft); color: var(--muted); }
.tm-wechip svg { width: 11px; height: 11px; }
.tm-onum { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tm-thumb { width: 26px; height: 19px; border-radius: 3px; border: 1px solid var(--line); flex: none; background: var(--sunken) center / cover no-repeat; display: inline-block; }
.tm-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tm-pb { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-pb .tr { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; max-width: 120px; }
.tm-pb .tr i { display: block; height: 100%; }
.tm-miss { display: flex; flex-wrap: wrap; gap: 3px; }
.tm-mi { display: inline-flex; align-items: center; gap: 4px; background: var(--tm-red-bg); color: var(--tm-red); border-radius: 5px; padding: 0 6px; font-size: 11.5px; line-height: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-mi::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; flex: none; }
.tm-allok { color: var(--tm-green); font-size: 12px; font-weight: 600; }
.tm-olm { font-size: 11.5px; color: var(--muted); } .tm-olm.err { color: var(--tm-red); font-weight: 600; } .tm-olm.pend { color: var(--tm-yellow); }
.tm-chk { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); display: grid; place-items: center; padding: 0; flex: none; }
.tm-chk svg { width: 10px; height: 10px; opacity: 0; }
.tm-chk:hover { border-color: var(--tm-green); } .tm-chk:hover svg { opacity: .5; color: var(--tm-green); }
.tdone .tm-chk { background: var(--tm-green); border-color: var(--tm-green); } .tdone .tm-chk svg { opacity: 1; color: #fff; }
.tm-chk.ph { visibility: hidden; }
.tm-fc { display: flex; align-items: center; gap: 6px; }

.tm-mini { padding: 8px 12px 6px; }
.tm-mh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .tm-mh b { font-size: 13.5px; }
.tm-mh .nv { display: flex; gap: 2px; }
.tm-mh .nv button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 6px; min-width: 26px; height: 24px; padding: 0 6px; font-size: 12px; }
.tm-mg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; text-align: center; }
.tm-mg .hd { font-size: 10.5px; color: var(--muted); font-weight: 600; padding: 2px 0; }
.tm-md { border: 0; background: none; color: var(--text); border-radius: 6px; padding: 2px 0 1px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 12px; font-variant-numeric: tabular-nums; min-height: 25px; }
.tm-md:hover { background: var(--tm-soft); }
.tm-md.out { color: var(--muted); opacity: .45; }
.tm-md.today { background: var(--primary); color: var(--primary-ink); font-weight: 700; }
.tm-md.sel { box-shadow: inset 0 0 0 2px var(--primary); }
.tm-md .dots { display: flex; gap: 2px; height: 4px; } .tm-md .dots i { width: 4px; height: 4px; border-radius: 50%; }
.tm-md.today .dots i { box-shadow: 0 0 0 1px var(--primary-ink); }
.tm-evline { display: flex; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--line); background: none; width: 100%; padding: 6px 12px; text-align: left; color: var(--text); border-radius: 0 0 12px 12px; }
.tm-evline:hover { background: var(--tm-soft); }
.tm-evline .tm-thumb { width: 34px; height: 25px; border-radius: 4px; }
.tm-evline .x { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); line-height: 1.3; min-width: 0; flex: 1; } .tm-evline .x b { color: var(--text); font-size: 12.5px; }
.tm .rn { flex: none; }

.tm-det { display: flex; flex-direction: column; }
.tm-dsec { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.tm-dsec:first-child { border-top: 0; }
.tm-dsec h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.tm-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tm-det h3 { margin: 0; font-size: 17px; line-height: 1.3; text-wrap: balance; }
.tm-dloc { font-size: 12.5px; color: var(--muted); min-height: 1.3em; }
.tm-when { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: nowrap; white-space: nowrap; } .tm-when b { font-variant-numeric: tabular-nums; }
.tm-objb { display: flex; gap: 10px; align-items: flex-start; }
.tm-objb .tm-thumb { width: 72px; height: 54px; border-radius: 7px; }
.tm-objb .x { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; min-width: 0; } .tm-objb .x .a { font-weight: 600; } .tm-objb .x .m { color: var(--muted); }
.tm-kv2 { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 10px; font-size: 12.5px; align-items: center; }
.tm-kv2 > span:nth-child(odd) { color: var(--muted); }
.tm-ph3 { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); } .tm-ph3 b { color: var(--text); font-size: 13px; display: block; }
.tm-cl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-cl li button { display: flex; align-items: flex-start; gap: 8px; border: 0; background: none; color: var(--text); padding: 3px 4px; text-align: left; font-size: 12.5px; line-height: 1.3; width: 100%; border-radius: 5px; }
.tm-cl li button:hover { background: var(--tm-soft); }
.tm-cl .bx { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--muted); display: grid; place-items: center; flex: none; margin-top: 1px; background: var(--surface); }
.tm-cl .bx svg { width: 9px; height: 9px; opacity: 0; color: #fff; }
.tm-cl .ok .bx { background: var(--tm-green); border-color: var(--tm-green); } .tm-cl .ok .bx svg { opacity: 1; } .tm-cl .ok span:last-child { color: var(--muted); }
.tm-cl .no .bx { border-color: var(--tm-red); } .tm-cl .no span:last-child { font-weight: 500; }
.tm-dacts { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.tm-prepsec { background: var(--surface-2); }
.tm-dhead { position: sticky; top: 0; background: var(--surface); z-index: 1; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.tm-dhead + .tm-dsec { border-top: 0; }
.tm-toast { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 13px; z-index: 50; }

/* Ticket bearbeiten (tv-*): Kopf, Ablauf in zwei Bahnen, Jetzt zu tun, Offene Angaben, Verlauf, Seitenleiste */
.tv { --tv-acc: #2348c7; --tv-acc-bg: #e8edfb; --tv-acc-ink: #1b3a9e; --tv-ok: #1d7a5c; --tv-ok-bg: #e7f4ee; --tv-ok-line: #8fd3b1; --tv-warn: #a8430c; --tv-warn-bg: #fdf1e8; --tv-warn-line: #f3cbb0;
  --tv-bad: #a3261c; --tv-bad-bg: #fbeae8; --tv-mel: #4b2e8f; --tv-mel-bg: #f2eefb; --tv-mel-on: #6b4fb3; --tv-mel-past: #e6def7; --tv-note: #fffcf5; --tv-note-line: #ebd39c; --tv-note-ink: #7a5410;
  --tv-dark: #14171c; --tv-dark-2: #22262e; --tv-soft: #f7f8fa; --tv-chip: #e9ecf0;
  display: flex; flex-direction: column; gap: 18px; font-size: 14px; line-height: 1.45; max-width: 1480px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tv { --tv-acc: #8fa9ff; --tv-acc-bg: #22304f; --tv-acc-ink: #b7c8ff; --tv-ok: #6fd49a; --tv-ok-bg: #183326; --tv-ok-line: #285a3e; --tv-warn: #f2be62; --tv-warn-bg: #3a2c12; --tv-warn-line: #5e461c;
  --tv-bad: #ff9c90; --tv-bad-bg: #3d1d1a; --tv-mel: #cdb8f5; --tv-mel-bg: #2b2342; --tv-mel-on: #7c5cc4; --tv-mel-past: #3a2f57; --tv-note: #2a2416; --tv-note-line: #5e4b22; --tv-note-ink: #f0d48a; --tv-dark: #0b0d10; --tv-dark-2: #1c2027; --tv-soft: #1c2026; --tv-chip: #262a32; } }
:root[data-theme="dark"] .tv { --tv-acc: #8fa9ff; --tv-acc-bg: #22304f; --tv-acc-ink: #b7c8ff; --tv-ok: #6fd49a; --tv-ok-bg: #183326; --tv-ok-line: #285a3e; --tv-warn: #f2be62; --tv-warn-bg: #3a2c12; --tv-warn-line: #5e461c;
  --tv-bad: #ff9c90; --tv-bad-bg: #3d1d1a; --tv-mel: #cdb8f5; --tv-mel-bg: #2b2342; --tv-mel-on: #7c5cc4; --tv-mel-past: #3a2f57; --tv-note: #2a2416; --tv-note-line: #5e4b22; --tv-note-ink: #f0d48a; --tv-dark: #0b0d10; --tv-dark-2: #1c2027; --tv-soft: #1c2026; --tv-chip: #262a32; }
.tv form { margin: 0; }
.tv button { font: inherit; }
.tv-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--muted); }
.tv-kick { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.tv-hint { font-size: 12px; color: var(--muted); }
.tv-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.tv-btn { height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); white-space: nowrap; text-decoration: none; margin: 0; }
.tv-btn:hover { border-color: var(--muted); text-decoration: none; }
.tv-btn.sm { height: 30px; padding: 0 10px; font-size: 12px; }
.tv-btn.sq { width: 30px; padding: 0; }
.tv-btn.dark { background: var(--text); color: var(--bg); border-color: var(--text); }
.tv-btn.light { background: #fff; color: #14171c; border-color: #fff; }
.tv-btn.light:hover { background: #e9ecf0; }
.tv-btn.ghostd { background: transparent; color: #fff; border-color: #4a515c; }
.tv-btn.ghostd:hover { border-color: #8a919c; }
.tv-lnk { padding: 0; border: 0; background: none; color: var(--link); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.tv-lnk:hover { text-decoration: underline; }
.tv-lnk.small { font-size: 12px; } .tv-lnk.bad { color: var(--tv-bad); }
.tv-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
a.tv-pill:hover { text-decoration: none; filter: brightness(.97); }
.tv-pill.ok { background: var(--tv-ok-bg); color: var(--tv-ok); } .tv-pill.warn { background: var(--tv-warn-bg); color: var(--tv-warn); } .tv-pill.bad { background: var(--tv-bad-bg); color: var(--tv-bad); }
.tv-pill.acc { background: var(--tv-acc-bg); color: var(--tv-acc-ink); } .tv-pill.gray, .tv-pill.neu { background: var(--tv-soft); color: var(--text-2); } .tv-pill.weg { background: var(--tv-mel-bg); color: var(--tv-mel); }
.tv-pill.st { background: var(--s-offen-bg); color: var(--s-offen); }
.tv-pill.st i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.tv-pill.st-neu { background: var(--s-neu-bg); color: var(--s-neu); } .tv-pill.st-wartet { background: var(--s-wartet-bg); color: var(--s-wartet); }
.tv-pill.st-erledigt { background: var(--s-erledigt-bg); color: var(--s-erledigt); } .tv-pill.st-geschlossen { background: var(--s-geschlossen-bg); color: var(--s-geschlossen); } .tv-pill.st-nacharbeit { background: var(--s-nacharbeit-bg); color: var(--s-nacharbeit); }
details.tv-pill { overflow: visible; position: relative; }
details.tv-pill summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
details.tv-pill summary::-webkit-details-marker { display: none; }
.tv-since { font-weight: 500; opacity: .8; }
.tv-field { height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; min-width: 0; width: 100%; margin: 0; }
.tv-field.sm { height: 30px; font-size: 12px; }
.tv-field.warn { background: var(--tv-warn-bg); border-color: var(--tv-warn-line); color: var(--tv-warn); }
.tv-chip { height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; margin: 0; }
.tv-chip:hover { border-color: var(--muted); }
.tv-chip.on, .tv-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.tv-chip.on-warn { background: var(--tv-warn-bg); color: var(--tv-warn); border-color: var(--tv-warn-line); }
.tv-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tv-row { display: flex; gap: 6px; align-items: center; } .tv-row.wrap { flex-wrap: wrap; } .tv-grow { flex: 1; min-width: 0; }
.tv-warn-txt { color: var(--tv-warn); font-weight: 600; }
.tv-ok-txt { color: var(--tv-ok); font-weight: 600; font-size: 12px; }

/* Werkzeugleiste und Kopf */
.tv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tv-crumb { display: flex; align-items: center; gap: 10px; }
.tv-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.tv-head { display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-margin-top: 80px; }
.tv-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tv-meta { font-size: 12px; color: var(--muted); }
.tv-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.tv-sub { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }

/* Ablauf: zwei Bahnen */
.tv-ablauf { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.tv-ab-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tv-ab-top h2 { display: inline-flex; }
.tv-lane { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; align-items: center; }
.tv-who { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 12px 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; text-align: left; margin: 0; }
.tv-who:hover { border-color: var(--muted); }
.tv-who.on { background: var(--tv-ok-bg); border-color: var(--tv-ok-line); color: var(--text); cursor: default; }
.tv-who-av { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--tv-mel-bg); color: var(--tv-mel); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.tv-who-av.sq { border-radius: 8px; background: var(--tv-acc); color: #fff; }
.tv-who-av.big { width: 36px; height: 36px; font-size: 13px; }
.tv-who-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-who-t b { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-who-t span { font-size: 11px; font-weight: 600; color: var(--muted); }
.tv-who.on .tv-who-t span { color: var(--tv-ok); }
.tv-lamp { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--line-2); box-shadow: inset 0 1px 2px rgba(20,23,28,.15); }
.tv-who.on .tv-lamp { background: #1d9e6b; box-shadow: 0 0 0 4px rgba(29,158,107,.16), 0 0 14px rgba(29,158,107,.5); }
.tv-track { display: flex; gap: 3px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.tv-chev { flex: 1 1 0; min-width: 0; margin: 0; }
.tv-chev button, .tv-chev > span { width: 100%; height: 36px; border: 0; padding: 0 14px 0 20px; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; border-radius: 0;
  background: var(--tv-chip); color: var(--muted); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.tv-chev:first-child button, .tv-chev:first-child > span { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-left: 12px; border-radius: 6px 0 0 6px; }
.tv-chev:last-child button, .tv-chev:last-child > span { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); border-radius: 0 6px 6px 0; }
.tv-chev button { cursor: pointer; } .tv-chev button:hover:not([disabled]) { filter: brightness(.95); }
.tv-chev.past button { background: var(--tv-acc-bg); color: var(--tv-acc-ink); }
.tv-chev.on button { background: var(--tv-acc); color: #fff; cursor: default; opacity: 1; }
.tv-track.cust .tv-chev > span { background: #f4f2f8; color: var(--muted); }
.tv-track.cust .tv-chev.past > span { background: var(--tv-mel-past); color: var(--tv-mel); }
.tv-track.cust .tv-chev.on > span { background: var(--tv-mel-on); color: #fff; }
:root[data-theme="dark"] .tv-track.cust .tv-chev > span { background: var(--tv-chip); }
.tv-ll { font-size: 12px; color: var(--muted); }
.tv-reads { align-items: start; }
.tv-quote { font-size: 13px; color: var(--tv-mel); }
.tv-waiton .tv-chips { gap: 6px; }

/* Niemand zuständig */
.tv-alert { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 20px; background: var(--tv-warn-bg); border: 1.5px solid var(--tv-warn-line); border-radius: 14px; }
.tv-alert-no { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #c2500f; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.tv-alert-t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; color: var(--tv-warn); font-size: 13px; }
.tv-alert-t strong { font-size: 16px; }
.tv-alert-a { display: flex; gap: 8px; flex-wrap: wrap; } .tv-alert-a select { width: 230px; }

/* Spalten */
.tv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.tv-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tv-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1150px) { .tv-cols { grid-template-columns: minmax(0, 1fr); } }

/* Workflow / Jetzt zu tun */
.tv-wf { overflow: hidden; scroll-margin-top: 80px; }
.tv-wf.resting .tv-wf-dim { opacity: .5; }
.tv-wf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px 0; }
.tv-wf-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.tv-wf-r { display: flex; gap: 14px; align-items: center; }
.tv-steps { list-style: none; margin: 0; padding: 10px 14px 0; display: flex; gap: 4px; overflow-x: auto; }
.tv-steps li { flex: 1 1 0; min-width: 110px; }
.tv-steps button { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; text-align: left; cursor: pointer; border-radius: 8px 8px 0 0; color: var(--text-2); margin: 0; }
.tv-steps button:hover { background: var(--tv-soft); }
.tv-steps button[aria-pressed="true"] { border-bottom-color: var(--text); }
.tv-st-dotline { display: flex; align-items: center; width: 100%; }
.tv-steps .tb-sb-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--surface); border: 1.5px solid var(--line-2); color: var(--muted); }
.tv-st-line { flex: 1; height: 2px; margin-left: 8px; border-radius: 1px; background: var(--line); }
.tv-steps li:last-child .tv-st-line { background: transparent; }
.tv-steps .tb-sb-title { font-size: 13px; line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-steps .tb-sb-state { font-size: 12px; font-weight: 600; color: var(--muted); }
.tv-steps .tb-sb-done .tb-sb-dot { background: var(--tv-ok); border-color: var(--tv-ok); color: #fff; }
.tv-steps .tb-sb-done .tv-st-line, .tv-steps .tb-sb-skip .tv-st-line { background: var(--tv-ok); }
.tv-steps .tb-sb-done .tb-sb-state { color: var(--tv-ok); }
.tv-steps .tb-sb-done .tb-sb-title, .tv-steps .tb-sb-skip .tb-sb-title { color: var(--muted); }
.tv-steps .tb-sb-cur .tb-sb-dot { background: var(--tv-acc); border-color: var(--tv-acc); color: #fff; }
.tv-steps .tb-sb-cur .tb-sb-title { font-weight: 600; color: var(--text); }
.tv-steps .tb-sb-cur .tb-sb-state { color: var(--tv-acc); }
.tv-focus { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.tv-focus h2 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; }
.tv-focus p { margin: 0; max-width: 70ch; }
.tv-focus.dark { background: var(--tv-dark); color: #fff; }
.tv-focus.dark .tv-kick { color: #a9b6e8; } .tv-focus.dark .tv-kick.dim { color: #8a919c; }
.tv-focus.dark p { color: #c6ccd6; }
.tv-focus.dark .tv-done-at { color: #8fd3b1; font-size: 13px; }
.tv-focus-main { display: flex; flex-direction: column; gap: 6px; }
.tv-focus.wait { background: var(--tv-ok-bg); border-top: 1px solid var(--tv-ok-line); flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tv-focus.wait .tv-kick { color: var(--tv-ok); }
.tv-focus.light { background: var(--tv-soft); border-top: 1px solid var(--line); flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tv-focus-a, .tv-focus-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tv-focus-btns form { display: flex; gap: 8px; flex-wrap: wrap; }
.tv-people { display: flex; flex-direction: column; gap: 6px; }
.tv-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--tv-dark-2); }
.tv-person-t { display: flex; flex-direction: column; min-width: 0; } .tv-person-t span { font-size: 12px; color: #a7aeb9; }
.tv-person-a { display: flex; gap: 6px; }
.tv-photo { display: flex; gap: 8px; flex-wrap: wrap; } .tv-photo select { max-width: 280px; }
.tv-alldone { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; background: #1f3a30; color: #bfe3d2; font-weight: 600; }
.tv-also { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.tv-also .tv-btn { margin-left: auto; }
.tv-nowf { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.tv-wfsearch { position: relative; display: block; margin: 0; color: var(--muted); }
.tv-wfsearch svg { position: absolute; left: 12px; top: 11px; }
.tv-wfsearch input { padding-left: 36px; height: 38px; }
.tv-tpls { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 8px; }
.tv-tpl { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.tv-tpl.best { border-color: var(--tv-ok-line); box-shadow: 0 0 0 3px rgba(29,158,107,.10); }
.tv-tpl-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; line-height: 1.3; }
.tv-pct { font-size: 18px; font-weight: 700; white-space: nowrap; }
.tv-tpl .tv-pill { align-self: flex-start; }
.tv-tpl ol { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.tv-tpl form { margin-top: auto; } .tv-tpl form .tv-btn { width: 100%; }
.tv-wf-all { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; max-height: 360px; overflow: auto; }
.tv-wf-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tv-wf-item > span { display: flex; flex-direction: column; min-width: 0; }
.tv-wf-all p { margin: 0; padding: 12px; }
.tv-nowf-links { display: flex; gap: 16px; align-items: center; }
.tv-wf .flow-list { display: none; margin: 0 20px 20px; max-height: none; border-left: 0; }
.tv-wf.editing .flow-list { display: block; }
.tv-wf.editing .tv-steps, .tv-wf.editing .tv-focus, .tv-wf.editing .tv-also { display: none !important; }

/* Offene Angaben */
.tv-chk { padding: 18px 20px 8px; scroll-margin-top: 80px; }
.tv-chk-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tv-chk-h h2, .tv-vl-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.tv-todo { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.tv-todo:first-of-type { border-top: 0; }
.tv-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); }
.tv-todo-t { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--muted); } .tv-todo-t b { font-size: 14px; color: var(--text); }
.tv-todo-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tv-todo-a select { min-width: 220px; max-width: 300px; }
.tv-done { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 0 10px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .tv-todo { grid-template-columns: 18px minmax(0, 1fr); } .tv-todo-a { grid-column: 2; justify-content: flex-start; } .tv-todo-a select { min-width: 0; } }

/* Verlauf */
.tv-vl { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px; }
.tv-vl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tv-seg { display: flex; gap: 3px; padding: 3px; background: var(--tv-chip); border-radius: 9px; flex-wrap: wrap; }
.tv-seg form { flex: 1; display: flex; }
.tv-seg button { flex: 1; height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; margin: 0; }
.tv-seg button span { color: var(--muted); font-weight: 500; }
.tv-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(20,23,28,.14); }
.tv-seg.full { width: 100%; }
.tv-pd { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); } .tv-pd.normal { background: #c98b12; } .tv-pd.hoch { background: #c2500f; }
.tv-note { border: 1px solid var(--tv-note-line); background: var(--tv-note); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tv-note-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--tv-note-ink); } .tv-note-h b { font-size: 13px; }
.tv-note textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--tv-note-line); border-radius: 8px; background: var(--surface); resize: vertical; margin: 0; min-height: 0; }
.tv-note-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tv-note-o { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin: 0; font-weight: 400; }
.tv-filebtn { display: inline-flex; align-items: center; gap: 4px; }
.tv-atts { display: flex; flex-direction: column; gap: 10px; }
.tv-atts-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tv-att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.tv-att { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 0; text-decoration: none; color: var(--text); }
.tv-att:hover { border-color: var(--muted); background: var(--tv-soft); text-decoration: none; }
.tv-att-th { width: 30px; height: 30px; flex: none; border-radius: 6px; object-fit: cover; background: #9099a8; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; }
.tv-att-th.audio { background: #6b4fb3; }
.tv-att-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tv-att-t b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-att-t span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.tv-src { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
.tv-src.melder { background: #7c5cc4; } .tv-src.team { background: #2348c7; } .tv-src.ki { background: #8a919c; } .tv-src.hw { background: #1d7a5c; }
.tv-attadd { display: flex; align-items: center; justify-content: center; height: 46px; border: 1.5px dashed var(--line-2); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; margin: 0; }
.tv-attadd:hover { border-color: var(--tv-acc); color: var(--tv-acc); }
.tv-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); } .tv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tv-sysline { align-self: flex-start; font-size: 12px; color: var(--muted); font-weight: 500; }
.tv-actlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tv-actlist li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 12.5px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.tv-actlist li i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; transform: translateY(-2px); }
.tv-actlist li span { flex: 1; min-width: 200px; white-space: pre-line; }
.tv-actlist time { color: var(--muted); font-size: 12px; }
.tv-tl { display: flex; flex-direction: column; }
.tv-entry { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); margin: 0; background: none; }
.tv-entry:first-child { border-top: 0; }
.tv-entry .avatar { flex: none; }
.tv-entry-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tv-entry-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tv-entry-time { margin-left: auto; font-size: 12px; color: var(--muted); }
.tv-pill.tg-note { background: var(--note-bg); color: var(--tv-note-ink); } .tv-pill.tg-in, .tv-pill.tg-call { background: var(--tv-mel-bg); color: var(--tv-mel); } .tv-pill.tg-out { background: var(--tv-acc-bg); color: var(--tv-acc-ink); }
.tv-bubble { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.tv-bubble.note { background: var(--tv-note); border-color: var(--tv-note-line); } .tv-bubble.note.private { background: var(--sunken); border-color: var(--line-2); }
.tv-bubble.in, .tv-bubble.call { background: #faf8fe; border-color: #e6def7; } .tv-bubble.out { background: #f7f9fe; border-color: #dce4fa; }
:root[data-theme="dark"] .tv-bubble.in, :root[data-theme="dark"] .tv-bubble.call, :root[data-theme="dark"] .tv-bubble.out { background: var(--surface-2); border-color: var(--line-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tv-bubble.in, :root:not([data-theme="light"]) .tv-bubble.call, :root:not([data-theme="light"]) .tv-bubble.out { background: var(--surface-2); border-color: var(--line-2); } }
.tv-bubble .body { overflow-wrap: anywhere; }
.tv-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.tv-more { font-size: 12px; margin-top: 4px; }
.tv-ki-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.tv-ki-tools .tv-lnk { font-size: 12px; }
.tv-kibox { padding: 10px 12px; border-radius: 10px; background: var(--tv-soft); font-size: 13px; }
.tv-transcript { color: var(--text-2); }
.tv-empty { padding: 14px 0; color: var(--muted); margin: 0; }
.tv-older { align-self: flex-start; }
.tv-composer { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }

/* Seitenleiste */
.tv-sd { padding: 16px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 80px; }
.tv-sd:first-child { border-top: 0; }
.tv-sd-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tv-sd-row { flex-direction: row; align-items: center; justify-content: space-between; }
.tv-sd-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; font-weight: 600; }
.tv-sd-links form { display: inline; }
.tv-kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 0; }
.tv-kv dt { font-size: 12px; color: var(--muted); } .tv-kv dd { margin: 0; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.tv-kv.small dd { font-size: 12px; }
.tv-rel { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } .tv-rel.warn { color: var(--tv-warn); } .tv-rel.bad { color: var(--tv-bad); font-weight: 600; }
.tv-links { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tv-link-row { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12px; }
.tv-link-row a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-link-row .tv-mono { font-size: 11.5px; }
.tv-objb { display: flex; align-items: center; gap: 10px; }
.tv-objimg { width: 52px; height: 52px; flex: none; border-radius: 10px; background: var(--sunken) center / cover no-repeat; display: flex; overflow: hidden; }
.tv-objimg .obj-ph { width: 100%; height: 100%; }
.tv-objt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tv-melder { display: flex; align-items: center; gap: 10px; }
.tv-ic { font-weight: 700; } .tv-ic.ok { color: var(--tv-ok); } .tv-ic.no { color: var(--tv-warn); }
.tv-editbox { padding: 12px; border-radius: 10px; background: var(--tv-soft); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tv-appt { display: flex; align-items: center; gap: 10px; }
.tv-cal { width: 42px; flex: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-align: center; display: flex; flex-direction: column; }
.tv-cal span { background: var(--tv-acc); color: #fff; font-size: 10px; font-weight: 700; } .tv-cal b { font-size: 16px; }
.tv-ev-links { font-size: 11.5px; color: var(--muted); } .tv-ev-links form { display: inline; }
.tv-req { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.tv-req:last-of-type { border-bottom: 0; } .tv-req.closed { opacity: .7; }
.tv-req-h { display: flex; align-items: center; gap: 8px; }
.tv-vo { display: flex; align-items: center; gap: 10px; font-size: 13px; } .tv-vo span { flex: 1; } .tv-vo b { color: var(--muted); min-width: 18px; text-align: right; }
.tv-insp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.tv-preview { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tv-preview.off { opacity: .5; }
.tv-pv-bar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: var(--tv-soft); border-bottom: 1px solid var(--line); min-width: 0; }
.tv-pv-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); flex: none; }
.tv-pv-bar .tv-mono { font-size: 11px; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-pv-b { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tv-pv-steps { list-style: none; margin: 0; padding: 0; display: flex; }
.tv-pv-steps li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.tv-pv-steps li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.tv-pv-steps li:first-child::before { left: 50%; } .tv-pv-steps li:last-child::before { right: 50%; }
.tv-pv-steps li.past::before, .tv-pv-steps li.on::before { background: var(--tv-acc); }
.tv-pv-steps li i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); position: relative; z-index: 1; }
.tv-pv-steps li.past i, .tv-pv-steps li.on i { background: var(--tv-acc); }
.tv-pv-steps li.on i { box-shadow: 0 0 0 4px rgba(35,72,199,.18); }
.tv-pv-steps li span { font-size: 10px; text-align: center; line-height: 1.2; color: var(--muted); }
.tv-pv-steps li.on span { color: var(--text); font-weight: 700; }
.tv-plink { display: flex; flex-direction: column; gap: 8px; }
.tv-people-list { margin: 0; }

@media (max-width: 760px) {
  .tv-lane { grid-template-columns: 1fr; }
  .tv-track { overflow-x: auto; }
  .tv-chev { min-width: 124px; }
  .tv-chev button, .tv-chev > span { justify-content: flex-start; }
  .tv-title { font-size: 22px; }
  .tv-ablauf, .tv-chk, .tv-vl { padding-left: 14px; padding-right: 14px; }
  .tv-focus { padding: 18px 16px; }
  .tv-kv { grid-template-columns: 1fr; gap: 2px 0; } .tv-kv dd { margin-bottom: 6px; }
  .tv-entry-time { margin-left: 0; width: 100%; }
}
/* Verlauf der Ticketseite: alte Blasen-Regeln (.msg) hier aufheben */
.tv .tv-tl { gap: 0; }
.tv .msg.tv-entry, .tv .msg.tv-entry.in, .tv .msg.tv-entry.out, .tv .msg.tv-entry.note { display: flex; flex-direction: row; align-items: flex-start; max-width: none; width: 100%; align-self: stretch; }
.tv .msg.tv-entry .avatar, .tv .msg.tv-entry > img, .tv .msg.tv-entry > span:first-child { flex: none; }
.tv .msg.tv-entry .tv-entry-b > .msg-edit { margin-top: 4px; }
/* Ticketliste: wartet auf Rückmeldung (Ball liegt beim Mieter, Eigentümer, Handwerker …) – grau und unten */
table.list tr.waiting > td { background: var(--sunken); color: var(--muted); }
table.list tr.waiting > td strong, table.list tr.waiting > td a { color: var(--text-2); }
table.list tr.waiting > td:first-child { box-shadow: inset 4px 0 0 var(--line-2); }
table.list tr.waiting .unassigned-pill { background: var(--surface); color: var(--muted); border-color: var(--line-2); }
table.list tr.waiting:hover > td { background: var(--hover); }
/* Filterleisten filtern sofort – der Knopf „Filtern“ wird nicht mehr gebraucht */
form.filters.live > button.btn:last-child, form.filters.live > .btn[type=submit] { display: none; }
/* Ablauf: die Seite, die nicht am Zug ist, ist ein Knopf („Ball holen“ / „Ball abgeben“) */
.tv-who.can { border-style: dashed; border-color: var(--line-2); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.tv-who.can:hover, .tv-who.can:focus-visible { border-style: solid; border-color: var(--tv-acc); background: var(--tv-acc-bg); box-shadow: 0 0 0 3px rgba(35,72,199,.12); color: var(--text); }
.tv-take { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: var(--primary); color: var(--primary-ink); white-space: nowrap; }
.tv-who.can:hover .tv-take { filter: brightness(1.1); }

/* 0.124.0 Schrittleiste: saubere Verbindungslinie (alte Stufenleiste-Linien aus), Notiz je Schritt, Notfall, Verknüpfen */
.tv-steps { gap: 0; padding: 14px 14px 0; }
.tv-steps button { align-items: stretch; padding: 8px 0 10px; border-radius: 0; }
.tv-steps button::before, .tv-steps button::after { display: none; }
.tv-steps button > .tb-sb-title, .tv-steps button > .tb-sb-state { padding: 0 10px 0 0; }
.tv-st-line { height: 2px; margin: 0 0 0 6px; background: var(--line-2); }
.tv-steps .tb-sb-dot { margin-left: 0; }
.tv-steps button:hover { background: transparent; }
.tv-steps button:hover .tb-sb-title { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.tv-steps .tb-sb-cur .tb-sb-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tv-acc) 20%, transparent); }
.tv-stepnote { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
.tv-stepnote summary { cursor: pointer; color: #cbd5e1; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.tv-stepnote summary::-webkit-details-marker { display: none; }
.tv-stepnote summary:hover { color: #fff; }
.tv-stepnote form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tv-stepnote textarea { flex: 1 1 100%; min-height: 56px; background: #1f242c; color: #fff; border-color: rgba(255,255,255,.18); }
.tv-sn-hint { font-size: 12px; color: #94a3b8; }
.tv-sn { display: block; background: #1f242c; border-left: 3px solid #fbbf24; border-radius: 6px; padding: 8px 10px; color: #e5e7eb; font-size: 13px; text-decoration: none; white-space: pre-line; }
.tv-sn:hover { background: #262c35; }
.tv-sn-h { display: block; font-size: 11px; color: #94a3b8; margin-bottom: 2px; white-space: normal; }
.tv-sn-tag { margin: 0 0 6px; }
.tv-emerg { display: flex; align-items: center; gap: 10px; background: #dc2626; color: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; animation: tv-emerg-p 2s ease-in-out 3; }
.tv-emerg b { text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.tv-emerg-i { font-size: 20px; }
@keyframes tv-emerg-p { 50% { box-shadow: 0 0 0 6px rgba(220,38,38,.25); } }
.tv-pill.emerg { background: #dc2626; color: #fff; }
select.tv-field.tv-emerg-f { background-color: #fee2e2; border-color: #dc2626; color: #b91c1c; font-weight: 700; }
.tv-emerg-n { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #dc2626; }
.tv-linkf { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tv-linkf[hidden] { display: none; }
.tv-wf-r { gap: 8px; }
.tv-btn.tv-wf-btn { border-radius: 99px; gap: 6px; color: var(--text); font-weight: 600; }
.tv-btn.tv-wf-btn:hover { background: var(--hover); border-color: var(--muted); }
.tv-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tv-linkf { align-self: stretch; }
.tv-linkf .tv-row { display: flex; gap: 6px; }
.tv-linkf .tv-field { flex: 1; min-width: 0; }

/* 0.125.0 Ablauf mit Workflow-Schritten (IDEE alle, Melder nur sichtbare), Sichtbarkeit je Schritt */
.tv-track-wf, .tv-track.cust { overflow-x: auto; scrollbar-width: thin; }
.tv-track-wf .tv-chev, .tv-track.cust .tv-chev { min-width: 96px; }

.tv-chev button, .tv-chev > span { display: block; line-height: 36px; text-align: center; }
.tv-track-wf .tv-chev:not(.on):not(.past) button { background: var(--tv-chip, #eef0f3); color: var(--muted); }
.tv-chev.next button { background: var(--tv-acc-bg); color: var(--tv-acc-ink); box-shadow: inset 0 -3px 0 var(--tv-acc); }
.tv-chev.skip button { text-decoration: line-through; opacity: .7; }
.tv-chev.intern button { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.035) 6px 12px); }
.tv-chev.ph button, .tv-chev.ph > span { font-style: italic; outline: 1.5px dashed var(--line-2); outline-offset: -4px; }
.tv-chev.on.ph button, .tv-chev.on.ph > span { outline-color: rgba(255,255,255,.6); }
.fl-vis { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; height: 30px; padding: 0 10px; border-radius: 99px; border: 1px dashed var(--line-2); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fl-vis.on { border-style: solid; border-color: #7c5cc4; background: #f3effb; color: #5b3fa6; }
.fl-vis:hover { border-color: var(--link); color: var(--link); }
:root[data-theme="dark"] .fl-vis.on { background: rgba(124,92,196,.2); color: #c4b5fd; }
.flow-list .fl-vis { width: auto; padding: 0 10px; gap: 4px; align-items: center; }
.flow-list .fl-vis:hover { background: var(--surface); }
.tv-track-wf .tv-chev { flex: 1 0 auto; }
.tv-track-wf .tv-chev button { padding-right: 18px; }
.flow-list .fl-vis { min-width: 128px; justify-content: center; }
.tv-track.cust .tv-chev { flex: 1 0 auto; }
.tv-track.cust .tv-chev > span { padding-right: 18px; }

/* 0.126.0 Objekt-Kartei: Bereiche als Pillen mit Symbol – breit links an der Seite, mittel als Pillenreihe, Handy als Auswahlliste */
.rk-wrap { display: block; }
.rk-main { min-width: 0; }
.rtabs.rk-side { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 0; margin-bottom: 1rem; overflow: visible; }
.rtabs.rk-side a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.rtabs.rk-side a:hover { border-color: var(--line-2); background: var(--hover, var(--sunken)); color: var(--text); }
.rtabs.rk-side a.on { background: var(--text); border-color: var(--text); color: var(--surface); }
.rk-ic { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--text-2); flex: none; }
.rtabs.rk-side a.on .rk-ic { background: rgba(255,255,255,.16); color: inherit; }
.rk-n { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--sunken); color: var(--text-2); font-size: 11px; font-weight: 700; text-align: center; }
.rk-n.zero { opacity: .5; }
.rtabs.rk-side a.on .rk-n { background: rgba(255,255,255,.2); color: inherit; opacity: 1; }
@media (min-width: 1100px) {
  .rk-wrap { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 20px; align-items: start; }
  .rtabs.rk-side { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 78px; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .rtabs.rk-side a { border-color: transparent; background: none; padding: 5px 10px 5px 5px; }
  .rtabs.rk-side a:hover { background: var(--sunken); border-color: transparent; }
  .rtabs.rk-side a.on { background: var(--text); color: var(--surface); }
  .rk-l { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 700px) { .rtabs.rk-side { display: none; } }
/* Kalendereinträge: Löschen bestätigen – der Knopf wird breit, Bearbeiten/Anheften treten so lange zurück */
.ke-table .c-act form { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.ke-ib.armed { width: auto; display: inline-flex; gap: 5px; padding: 0 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ke-table .c-act form:has(.armed) .ke-ib:not(.armed) { display: none; }
/* Outlook-Ordner (z. B. Gesendete Elemente): eigenes Raster mit 6 Spalten – Datum zweizeilig wie im Posteingang */
@media (min-width: 901px) {
  .inbox-folder .inbox-row, .inbox-folder .inbox-head { grid-template-columns: 28px 34px 84px minmax(160px, 260px) minmax(0, 1fr) 60px; column-gap: .8rem; }
}
.inbox-folder .inbox-from { min-width: 0; }
.inbox-folder .inbox-from strong, .inbox-folder .inbox-from small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ticketliste: Herkunft (Portal, Telefon-KI, E-Mail, Turnus, IDEE) */
.orig { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.orig-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.o-portal .orig-ic { background: #f3effb; color: #6d4bc4; }
.o-ki .orig-ic { background: #e0f2fe; color: #0369a1; }
.o-mail .orig-ic { background: #fef3c7; color: #b45309; }
.o-turnus .orig-ic { background: #ecfdf5; color: #047857; }
.o-tg .orig-ic { background: #e0f2fe; color: #229ed9; }
.o-hp .orig-ic { background: #fce7f3; color: #be185d; }
:root[data-theme="dark"] .o-hp .orig-ic { background: #500724; color: #f9a8d4; }
:root[data-theme="dark"] .o-tg .orig-ic { background: #0c4a6e; color: #7dd3fc; }
.o-idee .orig-ic { background: #1f2937; color: #fff; }
:root[data-theme="dark"] .o-idee .orig-ic { background: #e5e7eb; color: #111827; }
table.list td.tl-orig { text-align: center; }
@media (max-width: 700px) { .orig { flex-direction: row; } .orig-ic { width: 24px; height: 24px; } }
@media (max-width: 700px) { table.list td.tl-orig { text-align: left; } }
/* Ticketliste: Schritt-Text unter dem Fortschrittsbalken (schmaler) */
.tl-prog { flex-direction: column; align-items: flex-start; gap: 3px; }
.tl-prog .kprog { width: 84px; }
table.list td.tl-status { white-space: normal; min-width: 172px; width: 180px; max-width: 190px; }
table.list td.tl-status .status { white-space: normal; line-height: 1.25; }

/* 0.128.0 Ablauf: kein Rollen mehr – gleich große Felder im Raster (bis 8 einreihig, sonst zwei Reihen), Beschriftung zweizeilig */
.tv-lane { grid-template-columns: 236px minmax(0, 1fr); align-items: stretch; }
.tv-track-wf, .tv-track.cust { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 4px 3px; overflow: visible; }
.tv-track-wf .tv-chev, .tv-track.cust .tv-chev { min-width: 0; flex: none; }
.tv-track-wf .tv-chev button, .tv-track.cust .tv-chev > span { height: 42px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; font-size: 11.5px; padding: 0 14px 0 18px; overflow: hidden; text-overflow: clip; word-break: normal; overflow-wrap: anywhere; hyphens: auto; }
.tv-track-wf .tv-chev:first-child button, .tv-track.cust .tv-chev:first-child > span { padding-left: 10px; }
.tv-who { height: auto; min-height: 46px; flex-wrap: wrap; align-content: center; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
.tv-who .tv-take { margin-left: 38px; }
.tv-who-t { flex: 1 1 120px; }
@media (max-width: 1100px) {
  .tv-lane { grid-template-columns: 1fr; }
  .tv-track-wf, .tv-track.cust { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}
@media (max-width: 700px) {
  .tv-track-wf, .tv-track.cust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-track-wf .tv-chev button, .tv-track.cust .tv-chev > span { justify-content: center; font-size: 11px; padding: 0 10px 0 14px; }
}
.tv-cl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.tv-track-wf .tv-chev button, .tv-track.cust .tv-chev > span { overflow-wrap: normal; padding: 0 12px 0 16px; }
/* viele Schritte: Wer-Kasten als schmale Zeile über der Bahn, Bahn volle Breite */
.tv-ablauf.wide .tv-lane { grid-template-columns: 1fr; gap: 6px; }
.tv-ablauf.wide .tv-lane > form:first-child { justify-self: start; min-width: 300px; }
.tv-ablauf.wide .tv-who { min-height: 40px; flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px; }
.tv-ablauf.wide .tv-who .tv-take { margin-left: 8px; }
.tv-ablauf.wide .tv-who-t { flex-direction: row; align-items: baseline; gap: 8px; }
@media (max-width: 700px) { .tv-ablauf.wide .tv-lane > form:first-child { min-width: 0; justify-self: stretch; } .tv-ablauf.wide .tv-who-t { flex-direction: column; gap: 0; } }

/* 0.129.0 Ablauf: nummerierte Felder, klare Farben (erledigt grün, aktuell kräftig, offen hell), Ball-Pfeil zwischen den Bahnen */
.tv-ablauf .tv-lane { grid-template-columns: 1fr; gap: 6px; }
.tv-ablauf .tv-who { justify-self: start; width: auto; min-width: 300px; min-height: 40px; cursor: default; flex-wrap: nowrap; }
.tv-ablauf .tv-who-t { flex-direction: row; align-items: baseline; gap: 8px; }
.tv-track-wf .tv-chev button, .tv-track.cust .tv-chev > span { justify-content: flex-start; text-align: left; gap: 8px; padding: 0 14px 0 20px; font-size: 12px; font-weight: 600; }
.tv-track-wf .tv-chev:first-child button, .tv-track.cust .tv-chev:first-child > span { padding-left: 10px; }
.tv-cl { text-wrap: balance; hyphens: manual; }
.tv-no { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; background: rgba(15,23,42,.08); color: inherit; }
/* Bahn IDEE */
.tv-track-wf .tv-chev button, .tv-track-wf .tv-chev:not(.on):not(.past) button { background: #f1f3f6; color: #64748b; }
.tv-track-wf .tv-chev.past button { background: #e3f3ea; color: #166b40; }
.tv-track-wf .tv-chev.past .tv-no { background: #1f8f55; color: #fff; }
.tv-track-wf .tv-chev.skip .tv-no { background: #94a3b8; }
.tv-track-wf .tv-chev.on button { background: #1d4ed8; color: #fff; }
.tv-track-wf .tv-chev.on .tv-no { background: #fff; color: #1d4ed8; }
.tv-track-wf .tv-chev.next button { background: #e0e9ff; color: #1d4ed8; box-shadow: inset 0 -3px 0 #1d4ed8; }
.tv-track-wf .tv-chev.intern:not(.on) button { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(15,23,42,.045) 6px 12px); }
/* Bahn Melder */
.tv-track.cust .tv-chev > span, .tv-track.cust .tv-chev:not(.on):not(.past) > span { background: #f6f4fb; color: #8a84a3; }
.tv-track.cust .tv-chev.past > span { background: #ece6fa; color: #5b3fa6; }
.tv-track.cust .tv-chev.past .tv-no { background: #7c5cc4; color: #fff; }
.tv-track.cust .tv-chev.on > span { background: #6d4bc4; color: #fff; }
.tv-track.cust .tv-chev.on .tv-no { background: #fff; color: #6d4bc4; }
:root[data-theme="dark"] .tv-track-wf .tv-chev:not(.on):not(.past) button, :root[data-theme="dark"] .tv-track.cust .tv-chev:not(.on):not(.past) > span { background: var(--tv-chip, #2a2f37); color: #9aa3b2; }
:root[data-theme="dark"] .tv-track-wf .tv-chev.past button { background: rgba(31,143,85,.22); color: #86efac; }
:root[data-theme="dark"] .tv-track.cust .tv-chev.past > span { background: rgba(124,92,196,.25); color: #c4b5fd; }
/* Ball-Pfeil: verbindet die beiden Kästen, Spitze zeigt auf die Seite am Zug */
.tv-baton { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding-left: 44px; margin: -2px 0; }
.tv-arrow { position: absolute; left: 16px; top: -4px; bottom: -4px; width: 16px; }
.tv-arrow i:first-child { position: absolute; left: 6.5px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: #1d4ed8; }
.tv-arrow i:last-child { position: absolute; left: 0; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.tv-baton.up .tv-arrow i:last-child { top: -2px; border-bottom: 10px solid #1d4ed8; }
.tv-baton.down .tv-arrow i:last-child { bottom: -2px; border-top: 10px solid #6d4bc4; }
.tv-baton.down .tv-arrow i:first-child { background: #6d4bc4; }
.tv-baton.none .tv-arrow i:first-child { background: none; border-left: 3px dashed var(--line-2); width: 0; }
.tv-baton.none .tv-arrow i:last-child { display: none; }
.tv-baton form { margin: 0; }
.tv-baton-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--primary); color: var(--primary-ink); font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tv-baton-btn:hover { background: var(--primary-hover); }
.tv-baton-t { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) { .tv-ablauf .tv-who { min-width: 0; justify-self: stretch; } .tv-baton { padding-left: 40px; } .tv-baton-t { display: none; } }
/* Felder mindestens 150px breit: reicht der Platz nicht für --cols Spalten, gibt es eine Reihe mehr (beide Bahnen gleiches Raster) */
.tv-track-wf, .tv-track.cust { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(100% / var(--cols, 6) - 4px)), 1fr)); }
@media (max-width: 700px) { .tv-track-wf, .tv-track.cust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tv-track-wf .tv-chev button, .tv-track.cust .tv-chev > span { height: 48px; gap: 6px; padding: 0 12px 0 17px; font-size: 11.5px; line-height: 1.12; }
.tv-no { width: 18px; height: 18px; font-size: 10px; }
.tv-cl { -webkit-line-clamp: 3; }
/* Ball-Pfeil (0.130.0): Knopf sitzt mittig auf dem Pfeil unter der Mitte der Kästen, Spitze zeigt auf die Seite am Zug */
.tv-baton { display: flex; align-items: center; gap: 14px; min-height: 0; padding: 0; margin: 0; }
.tv-bt-col { width: 300px; display: flex; flex-direction: column; align-items: center; }
.tv-bt-seg { position: relative; width: 4px; height: 16px; border-radius: 2px; background: currentColor; }
.tv-baton.up { color: #1d4ed8; } .tv-baton.down { color: #6d4bc4; } .tv-baton.none { color: var(--line-2); }
.tv-baton.up .tv-bt-seg.top::before, .tv-baton.down .tv-bt-seg.bottom::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.tv-baton.up .tv-bt-seg.top::before { top: -6px; border-bottom: 10px solid currentColor; }
.tv-baton.down .tv-bt-seg.bottom::after { bottom: -6px; border-top: 10px solid currentColor; }
.tv-baton.up .tv-bt-seg.top { margin-top: 6px; } .tv-baton.down .tv-bt-seg.bottom { margin-bottom: 6px; }
.tv-baton.none .tv-bt-seg { background: none; border-left: 3px dashed currentColor; width: 0; }
.tv-baton-btn { height: 34px; padding: 0 16px 0 6px; gap: 8px; font-size: 13px; }
.tv-bt-ic { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--primary-ink) 22%, transparent); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.tv-baton-off { font-size: 12px; color: var(--muted); padding: 4px 10px; border: 1px dashed var(--line-2); border-radius: 99px; }
.tv-baton-t { font-size: 12px; color: var(--muted); }
.tv-arrow { display: none; }
@media (max-width: 700px) { .tv-bt-col { width: 100%; } .tv-baton-t { display: none; } }

/* Dokumentenschmiede */
.ds-empty ol { margin: .4rem 0 1rem 1.2rem; display: grid; gap: .45rem; }
.ds-empty h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1.05rem; }
.chip.ds-due { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
.ds-list tr.ds-late td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.ds-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 1px 8px; border-radius: 99px; background: var(--sunken); color: var(--text-2); font-size: 11px; font-weight: 600; }
.ds-status { font-size: 12px; font-weight: 650; border-radius: 99px; padding: 3px 26px 3px 10px; min-height: 0; height: 28px; }
.ds-status.s-erstellt { background-color: #eef2ff; color: #3730a3; } .ds-status.s-versendet { background-color: #e0f2fe; color: #075985; }
.ds-status.s-zurueck { background-color: #ede9fe; color: #5b21b6; } .ds-status.s-erledigt { background-color: #dcfce7; color: #166534; } .ds-status.s-storniert { background-color: var(--sunken); color: var(--muted); }
.ds-follow input { height: 28px; min-height: 0; padding: 2px 6px; font-size: 12px; width: 130px; margin: 0 0 3px; }
.ds-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.ds-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.ds-tile:hover { border-color: var(--link); box-shadow: 0 4px 14px rgba(15,23,42,.08); transform: translateY(-1px); }
.ds-tile.off { opacity: .55; }
.ds-tile-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #eef2ff; color: #3730a3; }
.ds-tile-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-tile-t > span { font-size: 12.5px; color: var(--muted); }
.ds-tile-t .ds-tile-n { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.ds-tile-go { color: var(--muted); font-size: 18px; }
.ds-upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: stretch; }
.ds-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 22px; border: 2px dashed var(--line-2); border-radius: 14px; cursor: pointer; background: var(--sunken); }
.ds-drop:hover, .ds-drop.over { border-color: var(--link); background: color-mix(in srgb, var(--link) 6%, var(--surface)); }
.ds-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ds-drop-ic { color: var(--link); }
.ds-howto { line-height: 1.9; color: var(--text-2); }
.ds-howto code, .ds-ftable code, .ds-key { font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: var(--sunken); color: var(--text-2); white-space: nowrap; }
.ds-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.ds-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ds-main .card, .ds-side .card { margin: 0; }
.ds-side { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 12px; }
.ds-side .card { display: flex; flex-direction: column; gap: 3px; }
.ds-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1rem; }
.ds-h3 { margin: 1rem 0 .5rem; font-size: .92rem; }
.ds-no { width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.ds-party { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ds-party .combo, .ds-party > select { flex: 1 1 280px; min-width: 0; }
.ds-party-a { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px 14px; }
.ds-field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.ds-field.wide { grid-column: 1 / -1; }
/* Kundenangaben in Zeilen: Firma | Anrede Vorname Nachname | Straße PLZ Ort | Telefon E-Mail | Einheiten */
.ds-frows { display: flex; flex-direction: column; gap: 12px; grid-column: 1 / -1; }
.ds-frow { display: grid; gap: 12px 14px; grid-column: 1 / -1; align-items: end; }
.ds-frow.n1 { grid-template-columns: minmax(0, 1fr); }
.ds-frow.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-frow.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-frow.r-name.n3 { grid-template-columns: minmax(90px, .7fr) 1.5fr 1.5fr; }
.ds-frow.r-adresse.n3 { grid-template-columns: 2.2fr minmax(90px, .8fr) 1.6fr; }
.ds-frow.r-rest { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ds-frow .ds-lbl { display: block; white-space: normal; min-width: 0; }
.ds-frow .ds-lbl > span, .ds-frow .ds-lbl > code { margin-left: 6px; vertical-align: 1px; }
.ds-frow .ds-src { white-space: nowrap; }
@media (max-width: 600px) {
  .ds-frow.r-firma, .ds-frow.r-kontakt, .ds-frow.r-einheiten, .ds-frow.r-rest { grid-template-columns: minmax(0, 1fr); }
  .ds-frow.r-name.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-frow.r-name.n3 > :first-child { grid-column: 1 / -1; max-width: 50%; }
  .ds-frow.r-adresse.n3 { grid-template-columns: minmax(90px, .8fr) 1.6fr; }
  .ds-frow.r-adresse.n3 > :first-child { grid-column: 1 / -1; }
}

.ds-field input, .ds-field select, .ds-field textarea { margin: 0; width: 100%; }
.ds-lbl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.ds-lbl .ds-key { margin-left: auto; font-weight: 500; opacity: .7; }
.ds-src { font-size: 10.5px; font-weight: 650; padding: 1px 7px; border-radius: 99px; background: #ede9fe; color: #5b21b6; }
@keyframes ds-flash { from { background-color: #ede9fe; } to { background-color: transparent; } }
.ds-filled { animation: ds-flash 1.2s ease-out; }
.ds-submit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ds-ftable td { vertical-align: top; } .ds-ftable input, .ds-ftable select { margin: 0; min-width: 0; width: 100%; }
.ds-ftable .ds-pos { width: 70px; } .ds-ftable .ds-hint, .ds-ftable .ds-opts { margin-top: 4px; font-size: 12px; }
.ds-import input[type=search] { width: 100%; margin: 0; }
.ds-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ds-res { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ds-res-k { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--sunken); color: var(--text-2); }
.ds-res-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ds-res-t span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-kind { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; align-items: center; justify-content: center; margin-right: 6px; vertical-align: middle; }
.ds-kind.p { background: #eef2ff; color: #3730a3; } .ds-kind.f { background: #fef3c7; color: #92400e; }
.ds-partyform .seg { margin-bottom: 12px; }
.ds-extra { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ds-xrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px; } .ds-xrow input { margin: 0; }
@media (max-width: 1000px) { .ds-grid { grid-template-columns: 1fr; } .ds-side { position: static; } .ds-upload { grid-template-columns: 1fr; } }
.ds-partyform .seg label { display: inline-flex; align-items: center; gap: 6px; padding: .38rem .9rem; border-radius: 99px; font-weight: 600; font-size: .88rem; color: var(--text-2); cursor: pointer; margin: 0; }
.ds-partyform .seg input { position: absolute; opacity: 0; pointer-events: none; }
.ds-partyform .seg label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.ds-ftable select[name$="[type]"] { min-width: 130px; } .ds-ftable select[name$="[source]"] { min-width: 230px; }
.ds-ftable td:nth-child(3) { min-width: 200px; }
.ds-status { min-width: 150px; }
.ds-none { padding: 12px 14px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; } .ds-none p { margin: 0 0 .3rem; }
.ds-gaps { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: .4rem 0 .8rem; }
.ds-gap { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; margin: 0; cursor: pointer; }
.ds-gap code { font-size: 11px; }
/* Dokumentenschmiede: Liste „Noch auszufüllen“ */
.ds-todo { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin: .2rem 0 .9rem; border-radius: 10px; background: var(--warn-bg); color: var(--warn); }
.ds-todo.done { background: var(--ok-bg); color: var(--ok); }
.ds-todo-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-todo-list:empty { display: none; }
.ds-todo-chip { display: inline-flex; padding: 3px 10px; border-radius: 99px; background: var(--surface, #fff); color: var(--text, inherit); border: 1px solid currentColor; font-size: 12.5px; text-decoration: none; }
.ds-todo-chip:hover { text-decoration: underline; }
.ds-todo .muted { color: inherit; opacity: .85; }
.ds-missing { border-color: var(--warn) !important; background: var(--warn-bg); }
.ds-todo-short { color: var(--warn); align-self: center; }

.ds-gaplist { margin: .3rem 0 0; padding-left: 1.1rem; font-size: 12.5px; display: grid; gap: 3px; }
.ds-gaplist mark { background: #fef08a; padding: 0 3px; border-radius: 3px; margin: 0 2px; }
.ds-plist .ds-fname { overflow-wrap: anywhere; min-width: 200px; max-width: 360px; }
.ds-plist tr.ds-off td { opacity: .6; }
.ds-acts { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.ds-acts form { margin: 0; } .ds-acts .btn { margin: 0; white-space: nowrap; }
.ds-acts .offer-del span { display: none; } .ds-acts .offer-del.armed span { display: inline; }
/* Profil: Speichern-Leiste oben (bleibt beim Scrollen stehen), Kürzel-Prüfung, Lücken-Tabelle, Dateileiste */
.ds-savebar { position: sticky; top: calc(var(--topbar-h, 58px) + 8px); z-index: 27; display: flex; justify-content: flex-end; margin: -6px 0 10px; pointer-events: none; }
.ds-savebar-in { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); box-shadow: 0 4px 16px rgba(15,23,42,.12); }
.ds-save-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--tv-ok, #15803d); }
form.dirty .ds-save-state { color: #b45309; }
form.dirty .ds-savebar-in { border-color: #f59e0b; box-shadow: 0 4px 18px rgba(245,158,11,.28); }
.ds-savebar .btn { margin: 0; border-radius: 99px; }
.ds-prefix-msg.ok { color: var(--tv-ok, #15803d); } .ds-prefix-msg.bad { color: #b91c1c; font-weight: 650; }
.ds-gap-intro { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 13px; }
.ds-gap-intro .ds-no { flex: none; margin-top: 1px; }
.ds-gtable { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.ds-grow { display: grid; grid-template-columns: 36px minmax(0, 1.3fr) 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); margin: 0; cursor: pointer; font-size: 13px; }
.ds-grow:first-child { border-top: 0; }
.ds-grow.head { background: var(--surface-2, var(--sunken)); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: default; }
.ds-grow:not(.head):hover { background: var(--sunken); }
.ds-grow:has(input[type=checkbox]:not(:checked)) .ds-gtext, .ds-grow:has(input[type=checkbox]:not(:checked)) .ds-gkey { opacity: .45; }
.ds-gtext { font-weight: 600; overflow-wrap: anywhere; }
.ds-garrow { color: var(--muted); text-align: center; }
.ds-gkey { display: flex; align-items: center; gap: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }
.ds-gkey input { flex: 1; min-width: 0; margin: 0; height: 30px; padding: 2px 8px; font-family: inherit; font-size: 12px; color: var(--text); }
.ds-gap-lines { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.ds-gaplist { list-style: none; padding: 0; margin: 0 0 0 34px; }
.ds-filebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-filebar form { margin: 0; display: flex; }
.ds-filebar .btn, .ds-filebar label.btn { margin: 0; height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.ds-filebar-note { flex-basis: 100%; }
@media (max-width: 700px) { .ds-grow { grid-template-columns: 30px minmax(0, 1fr); } .ds-garrow { display: none; } .ds-gkey { grid-column: 2; } .ds-savebar { justify-content: stretch; } .ds-savebar-in { flex: 1; justify-content: space-between; } }
/* Vorlagen-Liste: Namen und Dateinamen ohne Umbruch, Nummern-Spalte breit; Legende der Platzhalter */
.ds-plist .ds-namecol strong { white-space: nowrap; }
.ds-plist .ds-fname { white-space: nowrap; overflow-wrap: normal; max-width: none; min-width: 0; }
.ds-plist .ds-numcol { min-width: 170px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.ds-plist .ds-numcol .muted { font-size: 11px; }
@media (max-width: 1500px) { .ds-plist .ds-namecol strong, .ds-plist .ds-fname { white-space: normal; } }
.ds-upload { grid-template-columns: minmax(240px, .8fr) minmax(0, 2fr); }
.ds-legend { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ds-leg-h { display: flex; flex-direction: column; gap: 2px; }
.ds-leg-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ds-leg { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); min-width: 0; }
.ds-leg.p { background: #f5f3ff; border-color: #ddd6fe; } .ds-leg.s { background: #eff6ff; border-color: #bfdbfe; } .ds-leg.h { background: var(--sunken); }
.ds-leg-t { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.ds-leg.p .ds-leg-t { color: #5b21b6; } .ds-leg.s .ds-leg-t { color: #1d4ed8; }
.ds-leg-c { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-leg-c code { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
:root[data-theme="dark"] .ds-leg.p, :root[data-theme="dark"] .ds-leg.s { background: var(--sunken); border-color: var(--line); }
@media (max-width: 1250px) { .ds-leg-g { grid-template-columns: 1fr; } }
.ds-float { position: fixed; top: calc(var(--topbar-h, 58px) + 10px); right: 22px; z-index: 40; border-radius: 99px; box-shadow: 0 6px 20px rgba(15,23,42,.25); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .15s, transform .15s; }
.ds-float.show { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 1500px) { .ds-plist .ds-acts { flex-wrap: wrap; } .ds-plist .ds-numcol { min-width: 150px; } }
.ds-prefix-msg { display: block; line-height: 1.5; } .ds-prefix-msg b { display: inline; }
/* Versionen der Vorlage */
.ds-vpill { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: #dcfce7; color: #166534; }
.ds-vtable { margin-top: 12px; }
.ds-vtag { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 8px; border-radius: 99px; background: var(--sunken); font-weight: 800; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ds-vtag.on { background: #166534; color: #fff; }
.ds-vact { color: #166534; font-weight: 700; }
.ds-vtable tr.ds-von td { background: color-mix(in srgb, #22c55e 6%, transparent); }
.ds-dchips { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-dchip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 6px; background: var(--sunken); color: var(--text); text-decoration: none; border: 1px solid var(--line); white-space: nowrap; }
.ds-dchip:hover { border-color: var(--link); color: var(--link); }
.ds-dchip.more { font-family: inherit; color: var(--muted); }
.ds-vtag.gone { background: #fee2e2; color: #991b1b; font-family: inherit; font-size: 11px; }
.ds-vtable tr.ds-vgone td { background: color-mix(in srgb, #ef4444 4%, transparent); }

/* Kunden-Links der Dokumentenschmiede */
.dl-admin .ds-h { flex-wrap: wrap; }
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dl-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dl-box h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; }
.dl-linkrow { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: var(--sunken); }
.dl-st { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.dl-st.ok { background: #dcfce7; color: #166534; } .dl-st.warn { background: #fef3c7; color: #92400e; } .dl-st.off { background: #fee2e2; color: #991b1b; }
.dl-url { display: flex; gap: 6px; } .dl-url input { flex: 1; min-width: 0; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; height: 32px; }
.dl-fieldpick { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-empty { font-size: 10.5px; font-weight: 700; color: #b45309; }
.dl-proto td { vertical-align: top; }
.dl-ev { font-size: 12px; font-weight: 650; padding: 1px 8px; border-radius: 99px; background: var(--sunken); }
.dl-ev.ev-download, .dl-ev.ev-uebermittelt { background: #dcfce7; color: #166534; } .dl-ev.ev-geoeffnet { background: #e0f2fe; color: #075985; }
.dl-ev.ev-deaktiviert, .dl-ev.ev-abgelaufen { background: #fee2e2; color: #991b1b; } .dl-ev.ev-erneuert { background: #fef3c7; color: #92400e; }
.dl-tag { display: inline-flex; align-items: center; gap: 4px; margin: 3px 4px 0 0; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 650; background: #e0f2fe; color: #075985; }
.dl-tag.wait { background: #fef3c7; color: #92400e; } .dl-tag.ok { background: #dcfce7; color: #166534; }
@media (max-width: 900px) { .dl-grid { grid-template-columns: 1fr; } }
/* öffentliche Seite */
.dl-card { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.dl-kick { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dl-pill { text-transform: none; letter-spacing: 0; padding: 2px 10px; border-radius: 99px; background: var(--sunken); color: var(--text-2); }
.dl-title { margin: 0; font-size: 1.4rem; }
.dl-exp { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--dl-info-bg); border: 1px solid var(--dl-info-line); color: var(--dl-info-ink); font-size: 14px; }
.dl-exp.over { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.dl-exp-ic { font-size: 18px; }
.dl-btn { align-self: flex-start; font-size: 1rem; padding: .7rem 1.3rem; }
.dl-btn.disabled { opacity: .4; pointer-events: none; }
.dl-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 14px; }
.dl-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 6px; }
.dl-state h1 { margin: 0; font-size: 1.3rem; } .dl-state p { margin: 0; max-width: 460px; color: var(--text-2); }
.dl-state-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }
.dl-state.ok .dl-state-ic { background: #dcfce7; color: #166534; } .dl-state.off .dl-state-ic { background: #fef3c7; color: #92400e; }
.dl-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 6px 0; }
.dl-steps li { font-size: 12.5px; font-weight: 650; padding: 4px 12px; border-radius: 99px; background: var(--sunken); color: var(--muted); }
.dl-steps li.done { background: #dcfce7; color: #166534; } .dl-steps li.cur { background: #e0f2fe; color: #075985; }

/* Dokumentenschmiede: Prozessleiste (zugleich Filter) */
.dp-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 4px 0 12px; }
.dp-step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 22px 12px 26px; background: var(--surface); border: 1px solid var(--line); border-right: 0; color: var(--text); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); margin-right: -10px; transition: background-color .12s; }
.dp-step:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: 12px 0 0 12px; padding-left: 16px; }
.dp-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); border-radius: 0 12px 12px 0; border-right: 1px solid var(--line); margin-right: 0; }
.dp-step:hover { background: var(--sunken); }
.dp-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dp-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--text-2); }
.dp-cnt { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.dp-lbl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.dp-no { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; background: var(--text); color: var(--surface); flex: none; }
.dp-hint { font-size: 11.5px; color: var(--muted); }
.dp-step.zero .dp-cnt { color: var(--muted); opacity: .5; }
.dp-step.s-wartet .dp-ic { background: #fef3c7; color: #92400e; } .dp-step.s-daten .dp-ic { background: #fee2e2; color: #b91c1c; }
.dp-step.s-freigegeben .dp-ic { background: #e0f2fe; color: #075985; } .dp-step.s-zurueck .dp-ic { background: #ede9fe; color: #5b21b6; } .dp-step.s-erledigt .dp-ic { background: #dcfce7; color: #166534; }
.dp-step.attn { background: #fff1f2; } .dp-step.attn .dp-cnt { color: #b91c1c; }
.dp-step.on { background: var(--text); color: var(--surface); } .dp-step.on .dp-hint { color: rgba(255,255,255,.7); } .dp-step.on .dp-no { background: var(--surface); color: var(--text); }
.dp-step.on .dp-cnt { color: var(--surface); opacity: 1; }
@media (max-width: 1100px) { .dp-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; } .dp-step { clip-path: none !important; border-radius: 12px !important; border-right: 1px solid var(--line); margin-right: 6px; padding-left: 14px; } }
@media (max-width: 560px) { .dp-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dp-hint { display: none; } }
/* Prozess im Dokument */
.dp-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 14px; }
.dp-mini li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 99px; background: var(--sunken); color: var(--muted); font-size: 12.5px; font-weight: 650; }
.dp-mini .dp-n { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; background: var(--surface); }
.dp-mini li.past { background: #dcfce7; color: #166534; } .dp-mini li.on { background: var(--text); color: var(--surface); } .dp-mini li.on .dp-n { color: var(--text); }
.dl-box.dl-attn { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.dl-release { background: #166534; border-color: #166534; } .dl-release:hover { background: #14532d; }
.ds-status.s-entwurf { background-color: var(--sunken); color: var(--text-2); } .ds-status.s-wartet { background-color: #fef3c7; color: #92400e; }
.ds-status.s-daten { background-color: #fee2e2; color: #b91c1c; } .ds-status.s-freigegeben { background-color: #e0f2fe; color: #075985; }
.ds-status { min-width: 190px; }
.dl-tag { white-space: nowrap; }
.ds-list td[data-label="Dokument"] { min-width: 230px; }
/* Kundenseite: Weg zum Vertrag (immer oben); Sie = Bernstein, Wir = Blau. Handy: siehe Block „Kundenseiten am Handy“ */
.dl-way { padding: 22px 20px 18px; margin-bottom: 14px; border: 2px solid #bfdbfe; }
.dl-way-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0; position: relative; }
.dl-way-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; color: var(--muted); }
.dl-way-steps li:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 3px; border-radius: 2px; background: var(--line-2); }
.dl-way-steps li.done:not(:last-child)::after { background: #22c55e; }
.dl-way-n { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; background: var(--sunken); border: 3px solid var(--line-2); }
.dl-way-steps li.done .dl-way-n { background: #22c55e; border-color: #22c55e; color: #fff; }
.dl-way-steps li.cur .dl-way-n { background: var(--dl-wir); border-color: var(--dl-wir); color: #fff; box-shadow: 0 0 0 6px rgba(29,78,216,.18); transform: scale(1.08); }
.dl-way-steps li.cur.w-sie .dl-way-n { background: var(--dl-sie); border-color: var(--dl-sie); box-shadow: 0 0 0 6px rgba(180,83,9,.18); }
.dl-way-t { display: flex; flex-direction: column; } .dl-way-t b { font-size: 15px; color: var(--text-2); }
.dl-way-steps li.cur .dl-way-t b { color: var(--dl-wir-ink); } .dl-way-steps li.cur.w-sie .dl-way-t b { color: var(--dl-sie-ink); }
.dl-way-steps li .dl-way-who { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.dl-way-steps li.w-sie .dl-way-who { background: var(--dl-sie-bg); color: var(--dl-sie-ink); }
.dl-way-steps li.w-wir .dl-way-who { background: var(--dl-wir-bg); color: var(--dl-wir-ink); }
.dl-way-steps li.w-fertig .dl-way-who { visibility: hidden; }
.dl-way-steps li.cur.w-sie .dl-way-who { background: var(--dl-sie); color: #fff; }
.dl-way-steps li.cur.w-wir .dl-way-who { background: var(--dl-wir); color: #fff; }
.dl-way-now { display: none; } /* Handy-Zeile mit dem aktuellen Schritt, nur bis 520 px */
.dl-sent { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--dl-sent-bg); border: 1px solid var(--dl-sent-line); }
.dl-sent b { display: block; font-size: 1.05rem; } .dl-sent span { color: var(--text-2); }
.dl-state-ic.sm { width: 38px; height: 38px; font-size: 20px; flex: none; background: #dcfce7; color: #166534; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.dl-editnote { margin: 0; font-size: 13px; color: #92400e; }
.dl-next { margin: 0; font-size: 14px; }

/* Dokument erstellen: Vorlagen als Karten mit Miniatur */
.dp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.dp-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden; transition: border-color .12s, box-shadow .12s, transform .12s; }
.dp-card:hover { border-color: var(--link); box-shadow: 0 8px 24px rgba(15,23,42,.10); transform: translateY(-2px); }
.dp-paper { position: relative; display: flex; flex-direction: column; gap: 3px; height: 220px; margin: 14px 14px 0; padding: 16px 18px; background: #fff; border: 1px solid #e5e7eb; border-bottom: 0; border-radius: 6px 6px 0 0; overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.06); color: #374151; }
.dp-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(transparent, #fff); }
.dp-line { font-size: 6.5px; line-height: 1.45; font-family: Georgia, 'Times New Roman', serif; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dp-line.h { font-size: 8.5px; font-weight: 700; margin-bottom: 3px; }
.dp-line mark { background: #fde68a; color: #92400e; border-radius: 2px; padding: 0 2px; font-family: ui-monospace, monospace; font-size: .95em; }
.dp-stack { position: absolute; right: -4px; top: 6px; width: 100%; height: 100%; border: 1px solid #e5e7eb; border-radius: 6px; z-index: -1; }
.dp-meta { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.dp-meta b { font-size: 14px; line-height: 1.3; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--sunken); font-size: 11.5px; font-weight: 650; color: var(--text-2); }
.dp-chip.v { background: #dcfce7; color: #166534; font-family: ui-monospace, monospace; } .dp-chip.warn { background: #fef3c7; color: #92400e; }
.dp-go { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--link); }
.dp-card.empty .dp-go { color: #b45309; }
.dp-card, .dp-card:hover, .dp-card:hover * { text-decoration: none; }

/* Dokumentenübersicht 0.143: Prozessleiste mit Dokumenten je Schritt */
.dp-step { padding: 0; gap: 0; }
.dp-step .dp-head { display: flex; flex-direction: column; gap: 4px; padding: 12px 22px 8px 26px; color: inherit; text-decoration: none; }
.dp-step:first-child .dp-head { padding-left: 16px; }
.dp-docs { list-style: none; margin: 0; padding: 0 22px 12px 26px; display: flex; flex-direction: column; gap: 3px; }
.dp-step:first-child .dp-docs { padding-left: 16px; }
.dp-docs a { display: flex; flex-direction: column; padding: 4px 8px; border-radius: 7px; background: var(--sunken); color: var(--text); text-decoration: none; font-size: 11.5px; line-height: 1.25; min-width: 0; }
.dp-docs a:hover { background: var(--line); }
.dp-docs b { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; }
.dp-docs a span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-docs .dp-more a { background: none; color: var(--link); font-weight: 650; padding: 2px 8px; }
.dp-step.attn .dp-docs a { background: #ffe4e6; }
.dp-step.on .dp-docs a { background: rgba(255,255,255,.12); color: var(--surface); } .dp-step.on .dp-docs a span { color: rgba(255,255,255,.7); }
.dp-step.on .dp-docs .dp-more a { background: none; color: var(--surface); }

/* Dokumentenübersicht: Liste */
.ds-table { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ds-thead, .ds-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) 196px 150px 196px; gap: 16px; align-items: center; padding: 12px 16px; }
.ds-thead { padding-top: 10px; padding-bottom: 10px; background: var(--sunken); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ds-row { border-top: 1px solid var(--line); cursor: pointer; transition: background-color .1s; position: relative; }
.ds-row:hover { background: var(--sunken); }
.ds-row.empty { display: block; color: var(--muted); cursor: default; }
.ds-row.ds-late { box-shadow: inset 3px 0 0 #f59e0b; }
.ds-row.s-daten { box-shadow: inset 3px 0 0 #ef4444; }
.ds-c-doc { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.ds-c-doc > div { min-width: 0; }
.ds-fileic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: #3730a3; }
.ds-row.s-wartet .ds-fileic { background: #fef3c7; color: #92400e; } .ds-row.s-daten .ds-fileic { background: #fee2e2; color: #b91c1c; }
.ds-row.s-freigegeben .ds-fileic { background: #e0f2fe; color: #075985; } .ds-row.s-zurueck .ds-fileic { background: #ede9fe; color: #5b21b6; }
.ds-row.s-erledigt .ds-fileic { background: #dcfce7; color: #166534; } .ds-row.s-storniert .ds-fileic { background: var(--sunken); color: var(--muted); }
.ds-title { display: block; font-weight: 700; font-size: 14.5px; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-title:hover { color: var(--link); }
.ds-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.ds-docno { font-family: ui-monospace, monospace; font-weight: 700; color: var(--text-2); font-size: 11.5px; }
.ds-sub .avatar { margin-left: 2px; }
.ds-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ds-tags .dl-tag { margin: 0; }
.ds-note { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 8px; border-radius: 99px; background: var(--sunken); color: var(--text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-c-who { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.ds-c-who a { color: var(--text); font-weight: 600; text-decoration: none; } .ds-c-who a:hover { color: var(--link); }
.ds-c-st form, .ds-c-fu form { margin: 0; }
.ds-table .ds-status { min-width: 0; width: 100%; }
.ds-follow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ds-fu-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 650; color: var(--text-2); cursor: pointer; }
.ds-fu-btn:hover { border-color: var(--link); color: var(--link); }
.ds-fu-btn.none { border-style: dashed; color: var(--muted); font-weight: 500; }
.ds-fu-btn input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; }
.ds-table .ds-acts { justify-content: flex-end; gap: 4px; }
.ds-ib { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 42px; height: 40px; padding: 0 6px; border-radius: 9px; border: 0; background: none; color: var(--text-2); font-size: 10.5px; font-weight: 650; text-decoration: none; cursor: pointer; }
.ds-ib:hover { background: var(--line); color: var(--text); }
.ds-ib.off { opacity: .35; cursor: default; } .ds-ib.off:hover { background: none; }
.ds-ib.danger:hover, .ds-ib.danger.armed { background: #fee2e2; color: #b91c1c; }
.ds-ib.offer-del span:empty { display: none; } .ds-acts .ds-ib.offer-del.armed span { display: inline; }
@media (max-width: 1250px) {
  .ds-thead { display: none; }
  .ds-row { grid-template-columns: 1fr auto; grid-template-areas: "doc act" "who who" "st fu"; row-gap: 8px; }
  .ds-c-doc { grid-area: doc; } .ds-c-act { grid-area: act; align-self: start; } .ds-c-who { grid-area: who; flex-direction: row; gap: 8px; padding-left: 48px; }
  .ds-c-st { grid-area: st; padding-left: 48px; max-width: 260px; } .ds-c-fu { grid-area: fu; justify-self: end; }
}
@media (max-width: 560px) { .ds-row { grid-template-areas: "doc doc" "who who" "st fu" "act act"; } .ds-c-act .ds-acts { justify-content: flex-start; padding-left: 40px; } .ds-c-who, .ds-c-st { padding-left: 0; } }
.ds-tags .dl-tag { display: inline-flex; flex-direction: row; align-items: center; white-space: nowrap; } .ds-tags .dl-tag svg { display: inline-block; flex: none; }
/* Profil: Felder kompakt, mit Pfeilen und Seitenangabe */
.ds-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.ds-pg { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.ds-pg b { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--sunken); font-size: 11px; }
.ds-pg:hover { border-color: var(--link); } .ds-pg.on { background: var(--text); color: var(--surface); border-color: var(--text); } .ds-pg.on b { background: rgba(255,255,255,.2); }
.ds-pages .btn { margin-left: auto; }
.ds-ftable td { padding-top: 7px; padding-bottom: 7px; }
.ds-ftable tr.ds-dim { opacity: .3; }
.ds-ftable tr.ds-moved { animation: dsMoved .6s ease-out; }
@keyframes dsMoved { from { background: #fef9c3; } to { background: transparent; } }
.ds-mv { white-space: nowrap; text-align: center; width: 1%; }
.ds-arrow { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.ds-arrow:hover { border-color: var(--link); color: var(--link); background: var(--sunken); }
tr:first-child .ds-arrow[data-ds-mv="-1"], tr:last-child .ds-arrow[data-ds-mv="1"] { visibility: hidden; }
.ds-idx { display: inline-block; min-width: 22px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ds-where { min-width: 210px; max-width: 300px; }
.ds-where code { font-size: 12px; }
.ds-pgtag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 5px; background: #e0f2fe; color: #075985; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.ds-pgtag.hf { background: #ede9fe; color: #5b21b6; }
.ds-ctx { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); font-family: Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ctx mark { background: #fde68a; color: #92400e; border-radius: 3px; padding: 0 4px; font-family: inherit; font-size: 10.5px; }
.ds-addhint { margin-top: 3px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 11.5px; cursor: pointer; }
.ds-addhint:hover { color: var(--link); }
@media (max-width: 760px) { .ds-mv { text-align: left; } .ds-where { max-width: none; } .ds-pages .btn { margin-left: 0; } }
.ds-where { max-width: 220px; min-width: 180px; } .ds-ftable select[name$="[type]"] { min-width: 112px; } .ds-ftable select[name$="[source]"] { min-width: 180px; } .ds-ftable td:nth-child(3) { min-width: 170px; }
/* Kundenseite: Prüfen-Leiste (bleibt oben), Zusammenfassung „Stimmt alles?“ */
.dl-check { display: flex; flex-direction: column; gap: 14px; }
.dl-checkbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -26px -26px 0; padding: 12px 18px 12px 26px; background: var(--surface); border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: 0 6px 14px -10px rgba(15,23,42,.25); }
.dl-cb-t { display: flex; flex-direction: column; line-height: 1.25; } .dl-cb-t b { font-size: 1rem; } .dl-cb-t span { font-size: 12.5px; color: var(--muted); }
.dl-cb-btn { min-height: 44px; padding: 0 22px; font-size: 15px; font-weight: 700; }
.dl-pane { display: flex; flex-direction: column; gap: 12px; }
.dl-pre { margin-left: 6px; padding: 0 6px; border-radius: 99px; background: #dcfce7; color: #166534; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
body.public .dl-pre { font-size: 12px; } /* Kundenseiten: keine Schrift unter 12 px */
/* Zusammenfassung: Bezeichnung links klein und grau, Wert rechts; passt eine Zeile nicht, klappt sie auf volle Breite um (.dl-sum-wide, app.js) */
.dl-sum { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dl-sum dt, .dl-sum dd { margin: 0; padding: 6px 12px; line-height: 1.35; border-top: 1px solid var(--line); }
.dl-sum dt:first-of-type, .dl-sum dt:first-of-type + dd { border-top: 0; }
.dl-sum dt { display: flex; align-items: center; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.dl-sum dd { font-size: 14px; font-weight: 600; white-space: pre-wrap; } .dl-sum dd.is-empty { color: var(--muted); font-weight: 400; }
.dl-sum dt:nth-of-type(even), .dl-sum dt:nth-of-type(even) + dd { background: var(--sunken); }
.dl-sum dt.dl-sum-h { grid-column: 1 / -1; display: block; padding: 10px 12px 4px; background: var(--surface); color: var(--primary); font-size: 13.5px; font-weight: 750; border-top: 2px solid var(--line); }
.dl-sum dt.dl-sum-h:first-child { border-top: 0; }
body.public .dl-sum dt.dl-sum-wide, body.public .dl-sum dd.dl-sum-wide { grid-column: 1 / -1; overflow-wrap: break-word; }
body.public .dl-sum dt.dl-sum-wide { padding-right: 12px; padding-bottom: 0; }
body.public .dl-sum dd.dl-sum-wide { padding-top: 2px; padding-left: 12px; border-top: 0; }
/* Hauptknopf steht im Markup zuerst (Handy oben); ab 521 px wie gewohnt: Zurück links, Hauptknopf rechts */
.dl-sum-acts { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dl-sum-acts .btn { min-height: 44px; }
/* Rollen: Verwalter (wir) / Kunde (über den Link) */
.ds-role-fix { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.r-verwalter.ds-role-fix, .dp-chip.r-verwalter { background: #e0e7ff; color: #3730a3; }
.r-kunde.ds-role-fix, .dp-chip.r-kunde { background: #fef3c7; color: #92400e; }
.ds-roleseg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 2px; background: var(--sunken); white-space: nowrap; }
.ds-roleseg label { margin: 0; cursor: pointer; }
.ds-roleseg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-roleseg span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; color: var(--muted); }
.ds-roleseg label.r-verwalter input:checked + span { background: #e0e7ff; color: #3730a3; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ds-roleseg label.r-kunde input:checked + span { background: #fef3c7; color: #92400e; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ds-roleseg input:focus-visible + span { outline: 2px solid var(--link); }
.ds-rolecell { margin-top: 5px; white-space: nowrap; }
.ds-roles-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.ds-roles-sum .muted { margin-right: 10px; }
.ds-rename { margin: 0 0 12px; padding: 10px 14px; border: 1px dashed #a5b4fc; border-radius: 12px; background: #eef2ff; }
.ds-rename summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds-rename ul { columns: 2 280px; margin: .6rem 0 0; padding-left: 1.1rem; font-size: 12px; }
.ds-roleh { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.ds-kunde { margin-top: 16px; padding: 12px 14px; border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; }
.ds-kunde > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ds-kunde[open] > summary { margin-bottom: 12px; }
:root[data-theme="dark"] .ds-kunde, :root[data-theme="dark"] .ds-rename { background: var(--sunken); }
.ds-ftable .ds-where { max-width: 190px; min-width: 150px; } .ds-ftable select[name$="[source]"] { min-width: 150px; } .ds-ftable td:nth-child(4) { min-width: 150px; }
.ds-roleseg span { padding: 3px 7px; }
.ds-ftable th { white-space: normal; }
.ds-ftable .ds-where { max-width: 240px; min-width: 200px; }

/* ===== Vorlagen (Liste + Einrichtung im Seitenpanel) ===== */
.vt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 22px; }
.vt-head h1 { margin: 0; } .vt-head p { margin: 4px 0 0; }
.vt-search { margin-bottom: 18px; }
.vt-sec { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.vt-h { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
details.vt-off > summary { cursor: pointer; }
.vt-list { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; container-type: inline-size;
  --vt-c-name: minmax(260px, 1fr); --vt-c-num: 170px; --vt-c-state: 140px; --vt-act-w: 512px; /* breiteste Knopfgruppe „Neue Version“ + „Bearbeiten“ + „Dokument erstellen“ mit Icons: gemessen 504 px + 8 px Reserve */
  /* Spaltenreihenfolge an einer Stelle: Spaltenbreiten und benannte Bereiche (PC einzeilig, Tablet zweizeilig, Kopfzeile Tablet) */
  --vt-cols: var(--vt-c-num) var(--vt-c-name) var(--vt-c-state) var(--vt-act-w); --vt-areas: "num name state act";
  --vt-cols-2: var(--vt-c-num) var(--vt-c-name) var(--vt-c-state); --vt-areas-2: "num name state" "act act act"; --vt-areas-2h: "num name state"; }
/* Nummer | Name | Stand | Aktionen – gleich in „Zu erledigen“, „Bereit“ und „Ausgeblendet“, damit alles fluchtet */
.vt-row { display: grid; grid-template-columns: var(--vt-cols); grid-template-areas: var(--vt-areas); align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); }
.vt-row > * { min-width: 0; }
.vt-row > .vt-main, .vt-row > .vt-th-name { grid-area: name; } .vt-row > .vt-num, .vt-row > .vt-th-num { grid-area: num; }
.vt-row > .vt-state, .vt-row > .vt-th-state { grid-area: state; } .vt-row > .vt-act, .vt-row > .vt-th-act { grid-area: act; }
.vt-row .vt-num { overflow-wrap: anywhere; }
/* Schmale Liste (Tablet, PC mit Seitenleiste): Knöpfe in eigene Zeile, Name | Nummer | Stand fluchten weiter */
@container (max-width: 1170px) { /* 36 Innenmaß + 3 × 16 Lücken + 170 Nummer + 260 Name + 140 Stand + 512 Knöpfe = 1166, aufgerundet auf 1170 */
  .vt-row { grid-template-columns: var(--vt-cols-2); grid-template-areas: var(--vt-areas-2); }
  .vt-row.vt-thead { grid-template-areas: var(--vt-areas-2h); }
}
/* Handy (auch schmale Liste neben Seitenleiste): untereinander, Hauptknopf zuerst über die volle Breite */
@container (max-width: 640px) {
  .vt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .vt-row .vt-main, .vt-row .vt-act { flex: 1 1 100%; }
  .vt-row > .vt-num { flex: 1 1 100%; margin-bottom: -8px; } /* Nummer als erste Zeile der Karte, direkt über dem Namen (Karte nur um die Nummernzeile höher) */
  .vt-row > .vt-num-none { display: none; } /* „Einrichtung offen“: keine Nummernzeile, kein Platzhalter */
  .vt-act { justify-content: flex-start; }
  .vt-act > .btn.primary { order: -1; flex: 1 1 100%; }
  .vt-act > *:not(.primary) { flex: 1 1 0; }
  .vt-act > *:only-child:not(.primary) { flex: 0 0 auto; }
  .vt-act .btn, .vt-act .vt-upform label { min-height: 44px; width: 100%; }
  .vt-act > .btn:only-child:not(.primary) { width: auto; } /* einzelner „Bearbeiten“ (Ausgeblendet): normal breit, linksbündig */
}
.vt-row:first-child { border-top: 0; }
.vt-name { font-weight: 650; font-size: 15px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .vt-name:hover { color: var(--link); }
.vt-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.vt-num { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--text-2); }
.vt-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.vt-act { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .vt-act form { margin: 0; }
.vt-act .offer-del span:empty { display: none; }
.vt-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.vt-pill.warn { background: var(--warn-bg); color: var(--warn); } .vt-pill.ok { background: var(--ok-bg); color: var(--ok); display: inline-flex; flex-direction: row; gap: 6px; max-width: none; } /* gegen die globale Regel .ok (Spalten-Layout) */ .vt-pill.sm { font-size: 11px; padding: 1px 7px; vertical-align: 2px; }
.vt-steps { display: flex; gap: 4px; margin-top: 7px; } .vt-steps i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); } .vt-steps i.done { background: var(--ok); }
.vt-empty { padding: 22px 18px; color: var(--muted); }
/* Doppelte Vorlagen: ein Eintrag je Name unter „Zu erledigen“, Fassungen untereinander */
.vt-dup { padding: 14px 18px; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.vt-dup:first-child { border-top: 0; }
/* Hervorhebung nach Sprung (data-flash): JS setzt .is-flash bei jedem Klick neu, nach 2 s wieder weg */
.is-flash { background: var(--warn-bg); }
@media (prefers-reduced-motion: no-preference) { .is-flash { animation: is-flash-out .6s ease-out 1.2s forwards; } }
@keyframes is-flash-out { to { background: transparent; } }
.vt-dup-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vt-dup-name { font-size: 15px; font-weight: 650; color: var(--text); cursor: default; overflow-wrap: anywhere; min-width: 0; }
.vt-dup-text { margin: 6px 0 0; color: var(--text-2); font-size: 13.5px; }
.vt-fas { margin-top: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vt-fa { display: grid; grid-template-columns: calc(var(--vt-c-num) - 15px) minmax(0, 1fr) auto; /* −15 px = Einzug des Fassungskastens (1 px Rand + 14 px Innenmaß); so fluchten die Kennzahlen mit der Namensspalte */ align-items: center; gap: 4px 16px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.vt-fa > * { min-width: 0; }
.vt-fa:first-child { border-top: 0; }
/* Kennzahlen: Trennpunkt vor jeder Angabe; am Zeilenanfang liegt er links außerhalb und wird abgeschnitten – so steht nie ein Punkt am Anfang oder Ende einer Zeile */
.vt-fa-k { overflow: hidden; }
.vt-fa-kl { display: flex; flex-wrap: wrap; margin-left: -1.2em; }
.vt-fa-kl > span { white-space: nowrap; }
.vt-fa-kl > span::before { content: "·"; display: inline-block; width: 1.2em; text-align: center; color: var(--muted); font-weight: 400; }
.vt-fa-num { color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .vt-fa-num:hover { color: var(--link); }
.vt-fa-act { display: flex; justify-content: flex-end; } .vt-fa-act form { margin: 0; max-width: 100%; }
.vt-fa-btn .btn { white-space: normal; text-align: center; max-width: 220px; }
.vt-fa-file { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; margin-top: 0; overflow-wrap: normal; }
.vt-fa-file > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-fa-file .ico { flex: none; }
.vt-nw { white-space: nowrap; }
.vt-same { color: var(--muted); }
.vt-diff { color: var(--text); font-weight: 650; }
.vt-jump { text-decoration: none; position: relative; } .vt-jump:hover { text-decoration: underline; }
/* Vorlagen: Suche, Zählerzeile und Filterchips (ab 7 Vorlagen); Kopfzeile mit Sortierlinks bzw. Sortierreihe am Handy */
.vt-tools { container-type: inline-size; display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.vt-tools .vt-search { margin-bottom: 0; align-items: center; }
.vt-line { white-space: nowrap; }
.vt-sec[hidden], .vt-line[hidden], .vt-none[hidden] { display: none; }
.vt-none { margin-bottom: 28px; }
#vt-ready { scroll-margin-top: 84px; }
.vt-chg.on { color: var(--text-2); }
.chip-ico { display: inline-flex; margin-right: 6px; } .chip-ico.warn { color: var(--warn); } .chip.on .chip-ico.warn { color: inherit; } /* aktiv: Schriftfarbe der Füllung */
.vt-filter-ico { display: inline-flex; color: var(--muted); }
.vt-ph { color: var(--muted); }
.chip .n { font-variant-numeric: tabular-nums; color: var(--muted); } .chip.on .n { color: inherit; }
.chip-scroll .chip .n { margin-left: .3em; } /* das Leerzeichen nach „·“ fällt im Flex-Chip weg, hier ersetzt */
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
/* Chipreihe (Filter, Sortierreihe): bricht um, alle Chips ohne Wischen sichtbar; 8 px Abstand, Zeilenabstand 12 px, damit sich die 44-px-Trefferflächen nicht überlappen */
.chip-scroll { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; min-width: 0; max-width: 100%; padding: 6px 0; }
.chip-scroll .chip { position: relative; display: inline-flex; align-items: center; min-height: 32px; white-space: nowrap; }
.chip-scroll .chip::after { content: ""; position: absolute; inset: -6px -4px; } /* Trefferfläche 44 px hoch */
@container (min-width: 641px) {
  .vt-tools .vt-search { flex-wrap: nowrap; } .vt-tools .vt-search input { max-width: 420px; }
}
/* Sortierlink in Spaltenüberschriften (wiederverwendbar) */
.sortb { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; text-decoration: none; }
.sortb + .sortb { margin-left: 16px; }
.sortb:hover, .sortb:focus-visible, .sortb.on { color: var(--text); text-decoration: none; }
.sortb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sortb .ar { opacity: .5; } .sortb.on .ar { opacity: 1; }
.vt-thead { padding-top: 8px; padding-bottom: 8px; }
.vt-sortrow { display: none; padding: 6px 18px; }
@container (max-width: 1170px) { .vt-thead .vt-th-act { display: none; } }
@container (max-width: 640px) {
  .vt-thead { display: none; } .vt-sortrow { display: flex; }
  .vt-jump .ico { display: none; } /* Handy: Sprungmarke nur Text, damit sie neben dem Namen Platz hat */
}
/* Handy: „Filter aufheben“ bleibt ein Textlink, bekommt aber 44 px Trefferfläche */
@container (max-width: 640px) {
  .vt-line { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; }
  .vt-line a { position: relative; } .vt-line a::after { content: ""; position: absolute; inset: -14px -6px; }
}
.linkish { border: 0; background: none; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
@media (max-width: 700px) {
  .vt-fa { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .vt-fa-k { grid-column: 1 / -1; }
  .vt-fa-date { flex-basis: 100%; margin-top: 2px; } /* Datum eigene Zeile; sein Punkt liegt am Zeilenanfang und ist abgeschnitten */
  .vt-fa-act { grid-column: 2; grid-row: 1; }
  .vt-fa-file { order: 1; }
  .vt-fa-act.vt-fa-btn { grid-column: 1 / -1; grid-row: auto; order: 2; }
  .vt-fa-btn { justify-content: flex-start; }
  .vt-fa-btn .btn { min-height: 44px; white-space: normal; text-align: center; max-width: none; }
  .vt-fa-del form, .vt-fa-del .btn { width: 100%; }
  .vt-jump { white-space: normal; }
  .vt-jump::after { content: ""; position: absolute; left: -6px; right: -6px; top: -4px; bottom: -24px; } /* Trefferfläche 44 px, Pille bleibt klein */
}
.vt-scrim { position: fixed; inset: 0; background: rgba(10,12,15,.35); z-index: 200; }
.vt-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--surface); z-index: 201; display: flex; flex-direction: column; border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(15,23,42,.18); }
.vt-panel header { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.vt-ptop { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .vt-ptop h3 { margin: 0; font-size: 17px; }
.vt-x { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.vt-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.vt-track li { font-size: 12px; color: var(--muted); border-top: 3px solid var(--line); padding-top: 6px; }
.vt-track li.on { color: var(--text); font-weight: 650; border-color: var(--text); } .vt-track li.done { border-color: #1d7a46; }
.vt-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.vt-body { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.vt-body p { margin: 0; color: var(--muted); }
.vt-panel footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.vt-panel footer [data-vt-back][hidden] + * { margin-left: auto; }
.vt-drop { position: relative; display: block; border: 1.5px dashed var(--line-2, var(--line)); border-radius: 10px; padding: 34px 16px; text-align: center; color: var(--muted); cursor: pointer; }
.vt-drop:hover, .vt-drop.over { border-color: var(--link); background: var(--sunken); }
.vt-drop b { display: block; color: var(--text); margin-bottom: 4px; }
.vt-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vt-tag { display: inline-block; font-family: ui-monospace, monospace; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--sunken); border: 1px solid var(--line); color: var(--text-2); }
.vt-tag.gd { background: #e7f5ec; border-color: transparent; color: #1d7a46; } .vt-tag.ask { background: #fff4e2; border-color: transparent; color: #a35a00; }
.vt-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-grp { display: flex; flex-direction: column; gap: 8px; } .vt-grp h4 { margin: 0; font-size: 13px; display: flex; justify-content: space-between; }
.vt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-det { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; } .vt-det summary { cursor: pointer; font-weight: 600; } .vt-det p { margin-top: 8px; }
.vt-warn { background: #fff4e2; color: #a35a00; border-radius: 10px; padding: 12px 14px; } .vt-warn b { color: var(--text); }
.vt-lbl { font-weight: 600; font-size: 13px; margin-bottom: -10px; }
.vt-done { text-align: center; padding: 24px 0; display: flex; flex-direction: column; gap: 8px; align-items: center; } .vt-done h3 { margin: 0; }
.vt-check { width: 48px; height: 48px; border-radius: 50%; background: #e7f5ec; color: #1d7a46; display: grid; place-items: center; font-size: 24px; }
@media (prefers-reduced-motion: no-preference) { .vt-panel:not([hidden]) { animation: vtIn .18s ease-out; } @keyframes vtIn { from { transform: translateX(24px); opacity: .6; } } }
:root[data-theme="dark"] .vt-warn, :root[data-theme="dark"] .vt-tag.ask { background: #33270f; color: #f0b35a; }
:root[data-theme="dark"] .vt-tag.gd, :root[data-theme="dark"] .vt-check { background: #14301f; color: #6fcf97; }

/* ===== Dokument erstellen – Vorlage wählen ===== */
.pk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.pk-head h1 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pk-h1n { font-family: ui-monospace, monospace; font-size: 20px; font-weight: 650; color: var(--muted); } .pk-h1o { font-size: 17px; font-weight: 500; color: var(--muted); }
.pk-hact { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pk-step { display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-width: 0; position: relative; }
.pk-step + .pk-step { border-left: 1px solid var(--line); }
.pk-step .sn { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 13px; font-weight: 650; background: var(--sunken); color: var(--muted); }
.pk-step .st { display: flex; flex-direction: column; min-width: 0; }
.pk-step .sl { font-size: 13.5px; font-weight: 650; color: var(--muted); }
.pk-step .sv { font-size: 12px; color: var(--muted); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-step.on { background: #e8eefc; } .pk-step.on .sn { background: #1f4fd1; color: #fff; } .pk-step.on .sl { color: var(--text); } .pk-step.on .sv { color: #1f4fd1; font-weight: 500; opacity: 1; }
.pk-step.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #1f4fd1; }
.pk-step.done .sn { background: #1f4fd1; color: #fff; } .pk-step.done .sl { color: var(--text); }
.pk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.pk-kpi { background: var(--surface); border: 0; padding: 10px 14px; display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; cursor: pointer; font: inherit; color: var(--text); }
.pk-kpi:hover { background: var(--sunken); }
.pk-kpi .ki { flex: none; width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.ki.acc { color: #1f4fd1; background: #e8eefc; } .ki.gd { color: #17663a; background: #e3f3e9; } .ki.mid { color: #8a5300; background: #fdf0d9; } .ki.neu { color: var(--text-2); background: var(--sunken); }
.pk-kpi .kt { display: flex; flex-direction: column; min-width: 0; }
.pk-kpi .v { font-family: ui-monospace, monospace; font-size: 20px; font-weight: 650; line-height: 1.2; }
.pk-kpi .l { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-kpi.on { box-shadow: inset 0 -3px 0 var(--text); } .pk-kpi.on .l { color: var(--text); font-weight: 650; }
.pk-kpi.static { cursor: default; } .pk-kpi.static:hover { background: var(--surface); }
.pk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.pk-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 0; color: var(--muted); margin: 0; }
.pk-search input { flex: 1; border: 0 !important; outline: none; background: transparent; min-width: 0; font-size: 14px; box-shadow: none !important; padding: 0; height: auto; margin: 0; }
.pk-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 3px; gap: 2px; }
.pk-seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; }
.pk-seg button.on { background: var(--sunken); color: var(--text); font-weight: 650; }
.pk-work { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.pk-tablebox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.pk-cols { display: grid; grid-template-columns: 56px minmax(200px, 1fr) 96px 56px 58px 82px 170px; column-gap: 12px; align-items: center; padding: 0 16px; min-width: 760px; }
.pk-cols .c { justify-self: center; text-align: center; } .pk-cols .r { justify-self: end; }
.pk-th { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.thl { font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.pk-grp { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: #eef2fc; border-top: 6px solid var(--bg, #f3f4f6); font-size: 13px; font-weight: 700; min-width: 760px; }
.pk-th + .pk-grp { border-top: 0; }
.pk-grp .gc { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 650; padding: 0 7px; border-radius: 99px; background: var(--surface); color: var(--text-2); }
.pk-grp .gh { font-weight: 400; font-size: 12px; color: var(--muted); }
.pk-grp .gi { display: inline-flex; } .pk-grp.gd .gi { color: #17663a; } .pk-grp.mid .gi { color: #8a5300; }
.pk-row { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pk-row:hover { background: var(--sunken); }
.pk-row.is-sel { background: #e8eefc; box-shadow: inset 3px 0 0 #1f4fd1; }
.pk-vname { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pk-vname .t { font-weight: 650; font-size: 14px; color: var(--text); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.pk-vname .m, .pk-card .cm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); }
.pk-vname .file { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); opacity: .75; word-break: break-word; }
.pk-tag { flex: none; font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 5px; white-space: nowrap; color: #1f4fd1; background: #e8eefc; }
.pk-tag.dup { color: #8a5300; background: transparent; box-shadow: inset 0 0 0 1px #f1d19a; }
.pk-pill { display: inline-flex; align-items: center; gap: 5px; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.pk-pill.v { color: #17663a; background: #e3f3e9; border-color: #b9dfc8; } .pk-pill.l { color: #8a5300; background: #fdf0d9; border-color: #f1d19a; }
.pk-ver { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 650; color: var(--text-2); background: var(--sunken); padding: 2px 7px; border-radius: 5px; }
.pk-cnt { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 650; } .pk-cnt.zero { color: var(--muted); font-weight: 500; }
.pk-cnt small { display: block; font-family: inherit; font-size: 11px; font-weight: 400; color: var(--muted); }
.pk-act { display: flex; justify-content: flex-end; }
.pk-abtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 650; white-space: nowrap; border: 1px solid; text-decoration: none; }
.pk-abtn.go { color: var(--surface); background: var(--text); border-color: var(--text); } .pk-abtn.fix { color: #8a5300; background: #fdf0d9; border-color: #f1d19a; }
.pk-abtn:hover { filter: brightness(.95); text-decoration: none; }
.pk-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.pk-page { display: block; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; color: #2b2f37; font-family: Georgia, 'Times New Roman', serif; }
.pk-page.xs { width: 44px; height: 60px; padding: 5px 5px 0; box-shadow: 0 1px 2px rgba(22,24,29,.1); }
.pk-page .ph { display: block; height: 3px; width: 70%; background: #2b2f37; border-radius: 1px; margin: 0 0 4px; }
.pk-page.xs i { display: block; height: 2px; background: #8a909c; opacity: .45; border-radius: 1px; margin-bottom: 3px; }
.pk-page i.f { background: #e0a800 !important; opacity: .9 !important; }
.pk-page .stack { position: absolute; right: -1px; bottom: -1px; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 650; background: var(--sunken); color: var(--text-2); padding: 0 3px; border-radius: 3px 0 0 0; }
.pk-page.md { width: 96px; height: 128px; padding: 10px 9px 0; } .pk-page.md .ph { width: 60%; margin: 0 auto 7px; height: 4px; } .pk-page.md i { display: block; height: 3px; background: #8a909c; opacity: .45; border-radius: 1px; margin-bottom: 5px; }
.pk-page.lg { width: 100%; max-width: 300px; aspect-ratio: 210/297; padding: 18px 18px 0; font-size: 8.4px; line-height: 1.55; box-shadow: 0 2px 10px rgba(22,24,29,.1); }
.pk-page.lg p { margin: 0 0 5px; } .pk-page.lg p.h { font-size: 11px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.pk-page.lg mark { background: #fce9b2; color: #2b2f37; font-family: ui-monospace, monospace; font-size: 7.4px; padding: 0 2px; border-radius: 2px; }
.pk-page.lg .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to bottom, transparent, #fff); }
.pk-page .nofield { color: #8a909c; }
.pk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pk-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; }
.pk-card:hover { border-color: var(--muted); } .pk-card.is-sel { border-color: #1f4fd1; box-shadow: 0 0 0 1px #1f4fd1; }
.pk-card .cp { background: var(--sunken); padding: 14px; display: flex; justify-content: center; border-bottom: 1px solid var(--line); }
.pk-card .cb { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pk-card .ct { font-weight: 650; font-size: 14px; }
.pk-card .cf { margin-top: auto; padding-top: 4px; } .pk-card .cf .pk-abtn { width: 100%; }
.pk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: var(--muted); margin-top: 12px; } .pk-legend .push { margin-left: auto; }
.pk-detail { position: sticky; top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pk-detail .d-head { padding: 16px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.pk-detail .d-eyebrow { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pk-detail .d-title { margin: 0; font-size: 19px; font-weight: 700; }
.pk-detail .d-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.pk-detail .d-prev { background: var(--sunken); padding: 16px; display: flex; justify-content: center; border-bottom: 1px solid var(--line); }
.pk-detail .d-sec { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.pk-detail .d-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pk-detail .d-sh a { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.pk-detail .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk-detail .fact { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); }
.pk-detail .fact .fv { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 650; } .pk-detail .fact .fl { font-size: 11.5px; color: var(--muted); }
.pk-detail .fact.warn .fv { color: #8a5300; }
.pk-detail .fgroups { display: flex; flex-direction: column; gap: 8px; } .pk-detail .fg-l { font-size: 12px; color: var(--text-2); font-weight: 650; margin-bottom: 4px; }
.pk-detail .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pk-detail .chip { font-size: 11.5px; font-weight: 500; padding: 2px 7px; border-radius: 5px; background: #e0e7ff; color: #3730a3; } .pk-detail .chip.k { background: #fef3c7; color: #92400e; }
.pk-detail .notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; background: #fdf0d9; border: 1px solid #f1d19a; color: #8a5300; font-size: 13px; line-height: 1.45; }
.pk-detail .notice b { display: block; color: var(--text); margin-bottom: 2px; } .pk-detail .notice svg { flex: none; margin-top: 1px; }
.pk-detail .lastdocs { display: flex; flex-direction: column; gap: 6px; }
.pk-detail .ld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; }
.pk-detail .ld:hover { background: var(--sunken); } .pk-detail .ld .who { font-weight: 650; } .pk-detail .ld .when { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); } .pk-detail .ld .what { grid-column: 1/-1; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--muted); }
.pk-detail .none { font-size: 13px; color: var(--muted); }
.pk-detail .d-foot { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--sunken); }
.pk-full { width: 100%; justify-content: center; } .pk-detail .hint { font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 1100px) { .pk-work { grid-template-columns: minmax(0, 1fr); } .pk-detail { position: static; } }
@media (max-width: 820px) { .pk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk-step:nth-child(3) { border-left: 0; } .pk-step:nth-child(n+3) { border-top: 1px solid var(--line); } .pk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pk-step .sv { display: none; } }
:root[data-theme="dark"] .pk-step.on, :root[data-theme="dark"] .pk-row.is-sel, :root[data-theme="dark"] .pk-grp { background: #22304f; }
.pk-grp { flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; }
.pk-cols { grid-template-columns: 48px minmax(170px, 1fr) 92px 48px 54px 74px 128px; min-width: 700px; }
.pk-grp { min-width: 700px; }
.pk-cnt small { font-family: inherit; font-family: system-ui, sans-serif; }
.pk-detail .fact .fl { text-transform: none; letter-spacing: 0; }
.pk-cols { grid-template-columns: 48px minmax(150px, 1fr) 96px 74px 118px; min-width: 0; }
.pk-grp { min-width: 0; flex-wrap: wrap; }
@media (max-width: 640px) { .pk-cols.pk-th { display: none; } .pk-row { grid-template-columns: 48px minmax(0, 1fr) auto; row-gap: 8px; } .pk-row > span:nth-child(3) { grid-column: 2; } .pk-row > span:nth-child(4) { grid-column: 3; grid-row: 1; } .pk-row .pk-act { grid-column: 1 / -1; } .pk-row .pk-act .pk-abtn { width: 100%; } }

/* ===== Dokument ausfüllen als Ablauf ===== */
.wz-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; max-width: 860px; margin: 4px auto 16px; }
.wz-head h1 { margin: 0; }
.wz-tpl { position: relative; }
.wz-tpl summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 7px 11px; cursor: pointer; font-size: 13px; }
.wz-tpl summary::-webkit-details-marker { display: none; } .wz-tpl summary .k { color: var(--muted); }
.wz-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px -12px rgba(20,25,35,.3); padding: 6px; display: flex; flex-direction: column; }
.wz-menu a, .wz-menu button { border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--text); text-decoration: none; font: inherit; font-size: 14px; }
.wz-menu a:hover, .wz-menu button:hover { background: var(--sunken); }
.wz-menu .meta { padding: 6px 10px 8px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-wrap: anywhere; }
form.wz { max-width: 860px; margin: 0 auto 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(20,25,35,.04), 0 8px 24px -16px rgba(20,25,35,.18); }
.wz-track { list-style: none; margin: 0; padding: 18px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.wz-track li, .wz-track li > a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; color: inherit; text-decoration: none; }
.wz-track li::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--line); }
.wz-track li:first-child::before { display: none; }
.wz-track li.done::before, .wz-track li.cur::before { background: var(--text); }
.wz-track .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 650; border: 2px solid var(--line); background: var(--surface); color: var(--muted); }
.wz-track li.done { cursor: pointer; } .wz-track li.done .dot { background: var(--text); border-color: var(--text); color: var(--surface); }
.wz-track li.cur .dot { border-color: var(--text); color: var(--text); box-shadow: 0 0 0 4px var(--sunken); }
.wz-track .nm { font-size: 12px; font-weight: 650; color: var(--muted); } .wz-track li.cur .nm, .wz-track li.done .nm { color: var(--text); }
.wz-track .vl { font-size: 11.5px; color: var(--muted); max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.wz-stage { padding: 28px 22px 8px; display: flex; justify-content: center; }
.wz-pane { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 16px; }
.wz-on .wz-pane[hidden] { display: none !important; }
.wz-q { font-size: 19px; font-weight: 650; margin: 0; text-wrap: balance; }
.wz-qs { color: var(--muted); margin: -10px 0 0; font-size: 13px; }
.wz-search { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); margin: 0; }
.wz-search input { flex: 1; border: 0 !important; outline: none; background: transparent; padding: 0; margin: 0; height: auto; box-shadow: none !important; min-width: 0; }
.wz-picks { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wz-pick { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.wz-pick:last-of-type { border-bottom: 0; } .wz-pick:hover { background: var(--sunken); } .wz-pick[aria-pressed="true"] { background: #eaeef6; }
.wz-pick .av { width: 36px; height: 36px; border-radius: 9px; background: var(--sunken); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 650; }
.wz-pick[aria-pressed="true"] .av { background: var(--text); color: var(--surface); border-color: var(--text); }
.wz-pick b { display: block; font-weight: 650; } .wz-pick .s { display: block; font-size: 12.5px; color: var(--muted); }
.wz-pick .ck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; }
.wz-pick[aria-pressed="true"] .ck { background: var(--text); border-color: var(--text); color: var(--surface); }
.wz-pick.none { background: var(--sunken); } .wz-pick.none[aria-pressed="true"] { background: #eaeef6; }
.wz-nohit { padding: 12px; color: var(--muted); font-size: 13px; }
.wz-links { display: flex; gap: 8px; flex-wrap: wrap; }
.wz-newlink { border: 1px dashed var(--line); border-radius: 8px; padding: 7px 12px; color: var(--muted); text-decoration: none; font-size: 13.5px; }
.wz-newlink:hover { color: var(--text); border-color: var(--muted); text-decoration: none; }
.wz-pane .ds-fields { margin: 0; }
.wz-fold { border: 1px solid var(--line); border-radius: 12px; }
.wz-fold.kunde { border-color: #fde68a; background: #fffbeb; }
.wz-fold > summary { list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 11px 14px; cursor: pointer; font-weight: 600; }
.wz-fold > summary::-webkit-details-marker { display: none; }
.wz-fold > summary > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wz-fold > summary .c { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.wz-fold > summary .ch { transition: transform .15s; color: var(--muted); } .wz-fold[open] > summary .ch { transform: rotate(90deg); }
.wz-fold .body { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.wz-sum { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.wz-sum .g { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); align-items: start; }
.wz-sum .g:last-child { border-bottom: 0; }
.wz-sum dt { color: var(--muted); font-size: 13px; } .wz-sum dd { margin: 0; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.wz-sum dd .l2 { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.wz-sum .ed { border: 0; background: transparent; color: var(--link); cursor: pointer; font-size: 12.5px; padding: 0; }
.wz-sum .miss { color: #b42a2a; font-weight: 650; }
.wz-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 22px 18px; border-top: 1px solid var(--line); margin-top: 18px; }
.wz-nav .sp { flex: 1; } .wz-err { color: #b42a2a; font-size: 13px; }
.wz-on .wz-nav [hidden] { display: none !important; }
form.wz .ds-key { display: none; } body.wz-showtags form.wz .ds-key { display: inline; }
.ds-lbl i { font-style: normal; font-weight: 400; color: var(--muted); }
@media (max-width: 640px) {
  .wz-track { padding: 14px 10px; } .wz-track .vl { display: none; }
  .wz-stage { padding: 20px 14px 4px; } .wz-nav { padding: 12px 14px 14px; }
  .wz-sum .g { grid-template-columns: 1fr auto; } .wz-sum dt { grid-column: 1 / -1; }
}
:root[data-theme="dark"] .wz-fold.kunde { background: var(--sunken); } :root[data-theme="dark"] .wz-pick[aria-pressed="true"] { background: #252b38; }
.wz-nav .btn.text { border-color: transparent; background: none; color: var(--muted); box-shadow: none; } .wz-nav .btn.text:hover { color: var(--text); }
form.wz ~ .dl-admin { max-width: 860px; margin-left: auto; margin-right: auto; }
.vt-scrim { z-index: 1000; } .vt-panel { z-index: 1001; }

/* ===== Dokumentenübersicht (neu) ===== */
.zd { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zd.idee { background: #1f4fd1; } .zd.kunde { background: #5a2e9c; } .zd.fertig { background: #17663a; } .zd.storno { background: #a3a9b4; }
.dx-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; list-style: none; margin: 0 0 14px; padding: 0; }
.dx-step { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-width: 0; position: relative; text-align: left; width: 100%; height: 100%; cursor: pointer; font: inherit; color: var(--text); }
.dx-steps li + li .dx-step { border-left: 1px solid var(--line); }
.dx-step:hover { background: var(--sunken); }
.dx-step .sn { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 13px; font-weight: 650; background: var(--sunken); color: var(--muted); }
.dx-step .st { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dx-step .sl { font-size: 13.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-step .sv { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.dx-step .sc { flex: none; font-family: ui-monospace, monospace; font-size: 20px; font-weight: 650; color: var(--muted); opacity: .5; }
.dx-step.has .sn { background: var(--text); color: var(--surface); } .dx-step.has .sc { color: var(--text); opacity: 1; }
.dx-step.on { background: #e8eefc; } .dx-step.on .sn { background: #1f4fd1; color: #fff; } .dx-step.on .sl { color: var(--text); }
.dx-step.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #1f4fd1; }
.dx-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ki.weg { color: #5a2e9c; background: #f0eafb; } .ki.bad { color: #a8201a; background: #fce8e6; }
.pk-kpi .v.warn { color: #a8201a; }
.dx-work { grid-template-columns: minmax(0, 1fr) 380px; }
.dx-table { min-width: 860px; }
.dx-cols { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 1fr) 168px 70px 92px 110px 118px; column-gap: 12px; align-items: center; padding: 0 16px; }
.dx-cols .c { justify-self: center; text-align: center; }
.dx-th { padding-top: 10px; padding-bottom: 4px; }
.dx-sortb { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 0; font: inherit; font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; cursor: pointer; }
.dx-sortb:hover, .dx-sortb.on { color: var(--text); } .dx-sortb .ar { width: 10px; color: var(--muted); opacity: .6; } .dx-sortb.on .ar { color: #1f4fd1; opacity: 1; }
.dx-fr { padding-top: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dx-f { width: 100%; height: 28px !important; min-height: 0 !important; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12px !important; padding: 0 6px !important; margin: 0 !important; min-width: 0; }
.dx-f.on { border-color: #1f4fd1; background: #e8eefc; }
.dx-grp { border-top: 6px solid var(--bg, #f3f4f6); } .dx-fr + .dx-grp { border-top: 0; }
.dx-row { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.dx-row:hover { background: var(--sunken); } .dx-row.is-sel { background: #e8eefc; box-shadow: inset 3px 0 0 #1f4fd1; } .dx-row.storno { color: var(--muted); }
.dx-cell { min-width: 0; overflow-wrap: anywhere; }
.dx-cell .l1, .dx-dname .l1 { font-weight: 650; color: var(--text); text-decoration: none; } .dx-dname .l1:hover { color: var(--link); }
.dx-cell .l2 { font-size: 12px; color: var(--muted); }
.dx-dname { display: flex; flex-direction: column; gap: 3px; }
.dx-dname .m, .pk-detail .d-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); }
.dx-dname .nr, .pk-detail .nr { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 650; color: var(--text-2); }
.dx-spill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 9px 3px 4px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.dx-spill .pn { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 10.5px; color: #fff; }
.dx-spill.idee { border-color: transparent; background: #e8eefc; color: #1f4fd1; } .dx-spill.idee .pn { background: #1f4fd1; }
.dx-spill.kunde { border-color: transparent; background: #f0eafb; color: #5a2e9c; } .dx-spill.kunde .pn { background: #5a2e9c; }
.dx-spill.fertig { border-color: #b9dfc8; background: #e3f3e9; color: #17663a; } .dx-spill.fertig .pn { background: #17663a; }
.dx-spill.storno { color: var(--muted); background: var(--sunken); border-color: transparent; } .dx-spill.storno .pn { background: #a3a9b4; }
.dx-row .since { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.dx-pill { display: inline-block; min-width: 42px; text-align: center; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 650; padding: 2px 6px; border-radius: 99px; border: 1px solid; }
.dx-pill.v { color: #17663a; background: #e3f3e9; border-color: #b9dfc8; } .dx-pill.t { color: #8a5300; background: #fdf0d9; border-color: #f1d19a; } .dx-pill.l { color: #a8201a; background: #fce8e6; border-color: #f3c1bc; }
.dx-nf { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 650; } .dx-nf small { display: block; font-family: system-ui, sans-serif; font-size: 11.5px; font-weight: 500; }
.dx-nf.late small { color: #a8201a; } .dx-nf.soon small { color: #8a5300; } .dx-nf.ok small { color: var(--muted); }
.dx-dim { color: var(--muted); opacity: .75; font-size: 12.5px; }
.dx-bearb { font-size: 13px; }
.pk-detail .d-for { font-size: 13px; color: var(--text-2); }
.dx-next { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.dx-next b { display: block; color: var(--text); margin-bottom: 2px; } .dx-next svg { flex: none; margin-top: 1px; }
.dx-next.idee { background: #e8eefc; } .dx-next.idee svg { color: #1f4fd1; } .dx-next.kunde { background: #f0eafb; } .dx-next.kunde svg { color: #5a2e9c; }
.dx-next.late { background: #fce8e6; border: 1px solid #f3c1bc; } .dx-next.late svg { color: #a8201a; } .dx-next.fertig { background: #e3f3e9; } .dx-next.fertig svg { color: #17663a; } .dx-next.storno { background: var(--sunken); }
.pk-detail .fact.mid .fv { color: #8a5300; } .pk-detail .fact.bad .fv { color: #a8201a; }
.dx-bad, .dx-ok { text-transform: none; letter-spacing: 0; font-weight: 600; } .dx-bad { color: #a8201a; } .dx-ok { color: #17663a; }
.dx-chk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dx-chk li { display: flex; gap: 8px; align-items: center; } .dx-chk .y { color: #17663a; display: inline-flex; } .dx-chk .n { color: #a8201a; display: inline-flex; } .dx-chk li.miss span:nth-child(2) { font-weight: 550; }
.dx-role { margin-left: auto; font-size: 10.5px; font-weight: 650; padding: 0 6px; border-radius: 99px; background: #fef3c7; color: #92400e; }
.dx-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 10px; align-items: center; font-size: 13px; margin: 0; }
.dx-kv dt { color: var(--muted); } .dx-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .dx-kv form { margin: 0; }
.dx-kv input { width: 100%; height: 32px !important; min-height: 0 !important; margin: 0 !important; font-size: 13px !important; }
.dx-link { font-family: ui-monospace, monospace; font-size: 12px; background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; user-select: all; }
.dx-lmeta { font-size: 12px; color: var(--muted); }
.dx-btns, .dx-side { display: flex; flex-wrap: wrap; gap: 6px; } .dx-btns form, .dx-side form, .pk-detail .d-foot form { margin: 0; }
.dx-btns .btn span:empty, .dx-side .btn span:empty { display: none; }
.dx-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dx-log li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.dx-log time { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.dx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dx-two .btn { justify-content: center; } .dx-two .btn.disabled { opacity: .45; pointer-events: none; }
.dx-side { justify-content: space-between; }
.dx-legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1240px) { .dx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dx-steps li:nth-child(4) .dx-step { border-left: 0; } .dx-steps li:nth-child(n+4) .dx-step { border-top: 1px solid var(--line); } }
@media (max-width: 820px) { .dx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-steps li .dx-step { border-left: 0 !important; border-top: 0 !important; } .dx-steps li:nth-child(2n) .dx-step { border-left: 1px solid var(--line) !important; } .dx-steps li:nth-child(n+3) .dx-step { border-top: 1px solid var(--line) !important; } }
:root[data-theme="dark"] .dx-step.on, :root[data-theme="dark"] .dx-row.is-sel, :root[data-theme="dark"] .dx-next.idee, :root[data-theme="dark"] .dx-spill.idee { background: #22304f; }
:root[data-theme="dark"] .dx-next.kunde, :root[data-theme="dark"] .dx-spill.kunde { background: #30264a; }
.dx-step .sl { white-space: normal; line-height: 1.25; } .dx-step .sv { white-space: normal; line-height: 1.3; align-items: flex-start; } .dx-step .sv .zd { margin-top: 4px; }
.dx-table { min-width: 720px; }
.dx-cols { grid-template-columns: minmax(150px, 1.4fr) minmax(100px, 1fr) 150px 58px 84px minmax(70px, .7fr) 118px; column-gap: 10px; }
@media (max-width: 1100px) { .dx-work { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .dx-table { min-width: 0; }
  .dx-th, .dx-fr { display: none; }
  .dx-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .dx-row > :nth-child(1) { grid-column: 1; } .dx-row > :nth-child(4) { grid-column: 2; grid-row: 1; }
  .dx-row > :nth-child(2), .dx-row > :nth-child(3), .dx-row > :nth-child(5) { grid-column: 1 / -1; }
  .dx-row > :nth-child(6) { display: none; } .dx-row > :nth-child(7) { grid-column: 1 / -1; } .dx-edit .btn { width: 100%; justify-content: center; min-height: 44px; }
  .dx-row .since { display: inline; margin-left: 6px; } .dx-nf small { display: inline; margin-left: 6px; }
}

/* ===== Personen & Firmen ===== */
.pf-n { font-family: ui-monospace, monospace; font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.pf-sec { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.pf-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pf-search { flex: 1; min-width: 220px; }
.pf-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-seg button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--text); }
.pf-seg button[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.pf-found { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pf-found .cap { padding: 10px 18px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--sunken); }
.pf-hit { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); }
.pf-found .cap + .pf-hit { border-top: 0; }
.pf-panel .pf-hit { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.pf-hits { display: flex; flex-direction: column; gap: 8px; }
.pf-list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pf-row, .pf-thead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 150px; align-items: center; gap: 16px; padding: 12px 18px; }
.pf-row { border-top: 1px solid var(--line); }
.pf-thead { padding-top: 8px; padding-bottom: 8px; background: var(--sunken); font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pf-row .who, .pf-hit .who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pf-row .av, .pf-hit .av { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--sunken); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 650; }
.pf-row .av.p, .pf-hit .av.p { border-radius: 50%; }
.pf-row .name, .pf-hit .name { font-weight: 650; color: var(--text); text-decoration: none; } .pf-row a.name:hover { color: var(--link); }
.pf-row .sub, .pf-hit .sub { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.pf-row .cell { min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; } .pf-row .cell .sub { display: block; }
.pf-row .src { font-size: 12px; color: var(--muted); }
.pf-row.inc { box-shadow: inset 3px 0 0 #a35a00; }
.pf-miss-p { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 6px; background: #fff4e2; color: #a35a00; border: 1px solid #a35a00; white-space: nowrap; }
.pf-miss-s { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #a35a00; }
.pf-h-todo { color: #a35a00; display: flex; align-items: center; gap: 6px; }
.pf-sum { font-size: 13px; }
.pf-row .vts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-vt { display: inline-flex; } .pf-vt b { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 650; padding: 3px 8px; border-radius: 4px; color: #fff; }
.pf-vt.t-a b { background: #2f5bd3; } .pf-vt.t-b b { background: #7a3fb8; } .pf-vt.t-c b { background: #0b7a75; } .pf-vt.t-d b { background: #a35a00; }
.pf-row .more, .pf-seg .more { font-size: 12px; color: var(--muted); } .pf-docs { text-decoration: none; } .pf-docs:hover { color: var(--link); }
.pf-row .act { display: flex; justify-content: flex-end; }
.pf-panel .pf-2 { grid-template-columns: 1fr 1fr; }
.pf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-fields .f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-weight: 550; font-size: 13px; margin: 0; } .pf-fields .full { grid-column: 1 / -1; }
.pf-fields .f i { font-style: normal; font-weight: 400; color: var(--muted); }
.pf-fields input, .pf-fields select { margin: 0; width: 100%; }
.pf-panel input.pf-miss { border-color: #a35a00 !important; background: #fff4e2 !important; }
.pf-info { background: #edf2ff; border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.pf-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 13px; margin: 0; } .pf-dl dt { color: var(--muted); } .pf-dl dd { margin: 0; overflow-wrap: anywhere; }
.vt-check.warn { background: #fff4e2; color: #a35a00; }
@media (max-width: 760px) {
  .pf-thead { display: none; }
  .pf-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pf-row .cell { grid-column: 1; padding-left: 44px; } .pf-row .act { grid-column: 2; grid-row: 1; }
}
@media (max-width: 480px) { .pf-fields { grid-template-columns: 1fr; } }
:root[data-theme="dark"] .pf-miss-p, :root[data-theme="dark"] .pf-panel input.pf-miss { background: #33270f !important; color: #f0b35a; } :root[data-theme="dark"] .pf-info { background: #1c2540; }
/* Kundenseite: Download & Unterschrift */
.dl-big { font-size: 1.25rem; font-weight: 650; color: var(--text); line-height: 1.4; margin: .2rem 0 .4rem; }
.dl-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.dl-center .dl-btn { align-self: center; min-width: 260px; justify-content: center; }
.dl-next-steps { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; text-align: center; }
.dl-next-steps h2 { margin: 0; font-size: 1.05rem; }
/* „So geht es weiter“ mittig wie der obere Teil der Seite; die Nummer steht als Kreis vor dem Schritttitel */
.dl-next-steps ol { margin: 0 auto; padding: 0; list-style: none; counter-reset: dl-step; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 440px; text-align: left; }
/* Nummern untereinander in einer Linie, Titel und Inhalt bündig daneben */
.dl-next-steps li { counter-increment: dl-step; position: relative; padding-left: 38px; display: flex; flex-direction: column; align-items: stretch; }
.dl-next-steps li::before { content: counter(dl-step); position: absolute; left: 0; top: -1px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; }
.dl-next-steps li > b { display: block; margin-bottom: 8px; line-height: 1.35; }
.dl-upload { margin: 0; }
/* Upload: deutlich als Knopf erkennbar (Rahmen und Fläche in Akzentfarbe) */
.dl-file { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; border: 2px solid var(--primary); border-radius: 10px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); cursor: pointer; font-weight: 700; color: var(--primary); }
.dl-file:hover, .dl-file:focus-within { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.dl-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dl-upok { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 99px; background: #dcfce7; color: #166534; font-size: 12.5px; font-weight: 650; }
.dl-addr { font-style: normal; padding: 10px 14px; border-radius: 10px; background: var(--sunken); line-height: 1.5; display: block; max-width: 100%; text-align: left; }
.dl-sentform { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 2px 0 0; }
.dl-sentdate { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.dl-sentdate input { min-height: 44px; font-size: 16px; }
.dl-sentform .dl-btn { align-self: stretch; justify-content: center; white-space: normal; }
.dl-file.busy { opacity: .7; pointer-events: none; } /* Datei wird hochgeladen */
.dl-box .ds-acts { flex-wrap: wrap; } .dl-box .ds-acts .btn { white-space: normal; text-align: left; }
.dl-box .dl-release { max-width: 100%; white-space: normal; }
.dl-signed { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: #f0fdf4; font-size: 12.5px; color: #166534; }
.dl-signed span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* „Wir sind dran“ deutlich hervorheben */
.dx-grp.g-idee { background: #1f4fd1; color: #fff; font-size: 14px; padding: 11px 16px; }
.dx-grp.g-idee .gh { color: rgba(255,255,255,.85); } .dx-grp.g-idee .gc { background: #fff; color: #1f4fd1; font-size: 13px; }
.dx-grp.g-kunde, .dx-grp.g-fertig, .dx-grp.g-storno { background: var(--sunken); color: var(--text-2); }
.dx-row[data-turn="idee"] { box-shadow: inset 4px 0 0 #1f4fd1; background: #f7f9ff; }
.dx-row[data-turn="idee"]:hover { background: #eef2fc; } .dx-row[data-turn="idee"].is-sel { background: #e8eefc; }
.dx-row[data-turn="kunde"] .dx-dname .l1, .dx-row[data-turn="fertig"] .dx-dname .l1 { font-weight: 550; }
.dx-todo { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: #1f4fd1; color: #fff; font-size: 11.5px; font-weight: 650; }
.dx-when { font-size: 11.5px; color: var(--muted); }
.pk-kpi.hot { background: #1f4fd1; color: #fff; } .pk-kpi.hot .l { color: rgba(255,255,255,.9); font-weight: 650; } .pk-kpi.hot .ki { background: rgba(255,255,255,.18); color: #fff; }
.pk-kpi.hot:hover { background: #1a44b8; } .pk-kpi.hot.on { box-shadow: inset 0 -3px 0 #0b1f5c; }
:root[data-theme="dark"] .dx-row[data-turn="idee"] { background: #1c2540; }
.dx-todo { background: #e8eefc; color: #1f4fd1; border: 1px solid #c7d4f7; font-weight: 650; } :root[data-theme="dark"] .dx-todo { background: #22304f; color: #8fb0ff; border-color: #2d3d63; }
.vt-ver { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 6px; background: #dcfce7; color: #166534; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.vt-file { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.vt-upform { margin: 0; } .vt-upform label { cursor: pointer; margin: 0; }

/* Kundenlink: Begrüßung vor dem Formular; Sie/Wir in einer Zeile, Sie = Bernstein, Wir = Blau (kein Lila) */
.dl-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 10px 0 4px; }
.dl-welcome p { margin: 0; max-width: 34rem; }
.dl-hi { font-size: 1.05rem; color: var(--muted); }
.dl-who { margin: -6px 0 4px; font-size: 1.6rem; line-height: 1.2; }
.dl-doc { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-align: left; max-width: 100%; }
.dl-doc svg { flex: none; color: #1d4ed8; } .dl-doc > span { display: flex; flex-direction: column; min-width: 0; }
.dl-welcome .dl-btn { align-self: center; margin: 6px auto 0; min-height: 48px; padding: 0 26px; font-size: 16px; }
/* Begrüßung: Erklärsatz steht im Markup nach dem Knopf (Handy darunter); ab 521 px wie gewohnt darüber */
@media (min-width: 521px) { .dl-hello > .dl-btn, .dl-hello > .dl-why ~ * { order: 1; } }
/* Vorbelegung in der Dokumentenschmiede: aus Kontakt = Türkis, automatisch = Grau */
.ds-src { background: #ccfbf1; color: #115e59; } .ds-src.auto { background: var(--sunken); color: var(--text-2); }
:root[data-theme="dark"] .ds-src { background: rgba(45,212,191,.16); color: #5eead4; } :root[data-theme="dark"] .ds-src.auto { background: var(--sunken); color: var(--text-2); }

/* Art der Nummer: vier gleich hohe Karten (Handy 2 × 2), Auswahl mit Haken */
.vt-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .vt-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-choice { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--text); transition: border-color .12s, background .12s; }
.vt-choice:hover { border-color: var(--line-2); background: var(--surface-2); }
.vt-choice input { position: absolute; opacity: 0; pointer-events: none; }
.vt-choice b { font-size: 14px; line-height: 1.25; padding-right: 18px; hyphens: auto; overflow-wrap: anywhere; }
.vt-c-tag { align-self: flex-start; padding: 1px 7px; border-radius: 6px; background: var(--sunken); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--text-2); }
.vt-c-nr { margin-top: auto; padding-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.vt-c-ck { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.vt-choice:has(input:checked) { border-color: #1d4ed8; background: #eff6ff; box-shadow: inset 0 0 0 1px #1d4ed8; }
.vt-choice:has(input:checked) .vt-c-ck { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.vt-choice:has(input:checked) .vt-c-tag { background: #dbeafe; color: #1d4ed8; }
.vt-choice:has(input:focus-visible) { outline: 2px solid #1d4ed8; outline-offset: 2px; }
:root[data-theme="dark"] .vt-choice:has(input:checked) { background: rgba(59,130,246,.14); border-color: #60a5fa; box-shadow: inset 0 0 0 1px #60a5fa; }
:root[data-theme="dark"] .vt-choice:has(input:checked) .vt-c-tag { background: rgba(59,130,246,.25); color: #93c5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vt-choice:has(input:checked) { background: rgba(59,130,246,.14); border-color: #60a5fa; box-shadow: inset 0 0 0 1px #60a5fa; } }
.vt-c-old { margin: 6px 0 0; color: #92400e; }
/* Interne Notizen zu Versionen */
.ds-newver { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 100%; order: 3; }
.ds-newver input[name=notiz] { flex: 1 1 240px; min-width: 0; }
.ds-vnote { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; }
.ds-vnote textarea { flex: 1; min-width: 0; width: 100%; min-height: 54px; field-sizing: content; max-height: 160px; font-size: 13px; line-height: 1.4; resize: vertical; }
.ds-vtable td:has(.ds-vnote) { min-width: 240px; }
.ds-vnote:not(.has) textarea:not(:focus) { background: transparent; border-style: dashed; }
#vt-notiz { width: 100%; resize: vertical; }
/* Blanko-Links in der Dokumentenübersicht */
.dbl { padding: 0; margin-bottom: 14px; overflow: hidden; }
.dbl > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.dbl > summary::-webkit-details-marker { display: none; }
.dbl-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #e8eefc; color: #1f4fd1; }
.dbl-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .dbl-t b { font-size: 15px; } .dbl-t span { font-size: 12.5px; color: var(--muted); }
.dbl-on { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: #dcfce7; color: #166534; font-size: 12.5px; font-weight: 700; }
.dbl-on i, .dbl-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dbl-on i { animation: dbl-pulse 1.8s ease-in-out infinite; } @keyframes dbl-pulse { 50% { opacity: .35; } }
.dbl-ch { flex: none; color: var(--muted); font-size: 22px; line-height: 1; transition: transform .15s; } .dbl[open] .dbl-ch { transform: rotate(90deg); }
.dbl-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.dbl-new { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .dbl-new select { flex: 1 1 220px; min-width: 0; }
.dbl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dbl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.dbl-row.s-aktiv { border-color: #86efac; background: #f0fdf4; }
.dbl-st { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--sunken); color: var(--muted); }
.dbl-row.s-aktiv .dbl-st { background: #dcfce7; color: #166534; }
.dbl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dbl-main b { overflow-wrap: anywhere; }
.dbl-meta { font-size: 12.5px; color: var(--muted); }
.dbl-url { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbl-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .dbl-acts form { margin: 0; } .dbl-acts .btn span:empty { display: none; }
.dbl-row:not(.s-aktiv) .dbl-main b { color: var(--text-2); }
:root[data-theme="dark"] .dbl-row.s-aktiv { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.4); }
:root[data-theme="dark"] .dbl-row.s-aktiv .dbl-st, :root[data-theme="dark"] .dbl-on { background: rgba(34,197,94,.18); color: #86efac; }
:root[data-theme="dark"] .dbl-ic { background: #22304f; color: #93c5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbl-row.s-aktiv { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.4); } :root:not([data-theme="light"]) .dbl-row.s-aktiv .dbl-st, :root:not([data-theme="light"]) .dbl-on { background: rgba(34,197,94,.18); color: #86efac; } }
@media (max-width: 640px) {
  .dbl > summary { padding: 12px; } .dbl-t span { display: none; } .dbl-body { padding: 12px; }
  .dbl-row { grid-template-columns: minmax(0, 1fr); } .dbl-st { justify-self: start; } .dbl-acts { justify-content: flex-start; } .dbl-new .btn { width: 100%; justify-content: center; }
}
/* Notizen zu Vorlagen in den Übersichten (Vorlagen, Dokument erstellen) */
.vt-notes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-width: 640px; }
.vt-note { display: flex; align-items: flex-start; gap: 6px; padding: 5px 9px; border-radius: 8px; background: #fef9c3; color: #713f12; font-size: 12.5px; line-height: 1.4; text-align: left; }
.vt-note svg { flex: none; margin-top: 2px; } .vt-note > span { white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vt-note.v { background: var(--sunken); color: var(--text-2); } .vt-note.v b { flex: none; font-size: 11px; padding: 0 5px; border-radius: 4px; background: var(--surface); }
:root[data-theme="dark"] .vt-note:not(.v) { background: rgba(234,179,8,.14); color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vt-note:not(.v) { background: rgba(234,179,8,.14); color: #fde68a; } }
/* Aufgaben (Liste, Ticket, Dashboard) */
.td-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .td-head h1 { margin: 0; }
.td-bar { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.td-bar .chip b { margin-left: 4px; font-weight: 700; }
.td-newcard { margin-bottom: 14px; }
.td-group { padding: 6px 0 4px; margin-bottom: 12px; }
.td-gh { display: flex; align-items: center; gap: 8px; margin: 6px 16px 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.td-gh span { padding: 0 7px; border-radius: 99px; background: var(--sunken); color: var(--text-2); font-size: 11.5px; letter-spacing: 0; }
.td-group.g-ueberfaellig .td-gh { color: #b42318; } .td-group.g-heute .td-gh { color: #b45309; } .td-group.g-erinnerung .td-gh { color: #1d4ed8; }
.td-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.td-group .td-item:first-of-type, .td-dlist .td-item:first-child { border-top: 0; }
.td-ck { margin: 0; } .td-ck button { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.td-ck button:hover { border-color: #16a34a; color: #16a34a; }
.td-item.s-erledigt .td-ck button { background: #16a34a; border-color: #16a34a; color: #fff; }
.td-item.s-erledigt .td-t { text-decoration: line-through; color: var(--muted); }
.td-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.td-t { font-weight: 650; overflow-wrap: anywhere; }
.td-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--text-2); }
.td-meta > span, .td-meta > a { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.td-chip { padding: 1px 8px; border-radius: 99px; background: var(--sunken); font-weight: 650; }
.td-chip.bad { background: #fee4e2; color: #b42318; } .td-chip.warn { background: #fef3c7; color: #92400e; } .td-chip.rem { background: #dbeafe; color: #1d4ed8; } .td-chip.ok { background: #dcfce7; color: #166534; }
.td-rem { color: var(--muted); }
.td-tk { color: var(--text-2); text-decoration: none; max-width: 100%; } .td-tk span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-tk:hover { color: var(--accent, #1d4ed8); }
.td-body { font-size: 13px; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.td-edit { position: static; } .td-edit > summary { list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.td-edit > summary::-webkit-details-marker { display: none; } .td-edit > summary:hover { background: var(--sunken); color: var(--text); }
.td-edit[open] { grid-column: 1 / -1; } .td-edit[open] > summary { float: right; }
.td-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 6px 0 4px; }
.td-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--text-2); } .td-f i { font-weight: 400; color: var(--muted); }
.td-f input, .td-f select, .td-f textarea { width: 100%; min-width: 0; font-weight: 400; }
.td-f.wide, .td-acts.wide { grid-column: 1 / -1; }
.td-row { display: flex; gap: 6px; } .td-row input[type=date] { flex: 1 1 60%; min-width: 0; } .td-row input[type=time] { flex: 1 1 40%; min-width: 0; }
.td-acts { display: flex; gap: 8px; flex-wrap: wrap; } .td-acts .btn span:empty { display: none; }
.td-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--muted); text-align: center; } .td-empty svg { color: #16a34a; } .td-empty p { margin: 0; }
.tv-sd .td-item { padding: 8px 0; } .tv-sd .td-form { grid-template-columns: minmax(0, 1fr); } .tv-sd .td-f.wide { grid-column: auto; }
.td-dash .td-item { padding: 9px 0; }
.td-dn { margin-left: 6px; padding: 0 7px; border-radius: 99px; background: var(--sunken); font-size: 12px; font-weight: 700; vertical-align: middle; }
.td-dnow { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #fee4e2; color: #b42318; font-size: 12px; font-weight: 700; vertical-align: middle; }
.td-more { display: inline-block; margin-top: 6px; font-size: 13px; } .td-none { margin: 4px 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; } .td-none svg { color: #16a34a; }
:root[data-theme="dark"] .td-chip.bad, :root[data-theme="dark"] .td-dnow { background: rgba(240,68,56,.18); color: #fda29b; }
:root[data-theme="dark"] .td-chip.warn { background: rgba(245,158,11,.18); color: #fcd34d; } :root[data-theme="dark"] .td-chip.rem { background: rgba(59,130,246,.2); color: #93c5fd; } :root[data-theme="dark"] .td-chip.ok { background: rgba(34,197,94,.18); color: #86efac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .td-chip.bad, :root:not([data-theme="light"]) .td-dnow { background: rgba(240,68,56,.18); color: #fda29b; } :root:not([data-theme="light"]) .td-chip.warn { background: rgba(245,158,11,.18); color: #fcd34d; } :root:not([data-theme="light"]) .td-chip.rem { background: rgba(59,130,246,.2); color: #93c5fd; } :root:not([data-theme="light"]) .td-chip.ok { background: rgba(34,197,94,.18); color: #86efac; } }
@media (max-width: 640px) {
  .td-form { grid-template-columns: minmax(0, 1fr); } .td-f.wide, .td-acts.wide { grid-column: auto; }
  .td-item { padding: 10px 12px; gap: 4px 10px; } .td-gh { margin: 6px 12px 4px; }
  .td-acts .btn { flex: 1 1 auto; justify-content: center; }
}
/* Mail → Ticket verknüpfen (neu oder bestehend) */
.mail-tk-ic, .row-tk-ic { display: inline-flex; align-items: center; gap: 1px; }
.row-ticket .row-tk-ic svg { opacity: .9; }
.nt-link { margin-bottom: 18px; }
.nt-link-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.05rem; }
.nt-link-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #e8eefc; color: #1f4fd1; vertical-align: middle; }
.nt-head-sub h1 { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; }
.nt-link .ticket-picker .btn[data-tp-submit] { align-self: flex-start; }
:root[data-theme="dark"] .nt-link-ic { background: #22304f; color: #93c5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nt-link-ic { background: #22304f; color: #93c5fd; } }
@media (max-width: 640px) { .nt-link .ticket-picker .btn[data-tp-submit] { align-self: stretch; justify-content: center; } }
/* Dashboard „Nächste 7 Tage“: Kalenderblätter wie bei den Eigentümerversammlungen */
.dbx-day { align-items: flex-start; padding: 4px 0; }
.dbx-sheet { width: 68px; margin-top: 3px; }
.dbx-sheet .dd { font-size: 1.25rem; } .dbx-sheet .wd { font-size: .64rem; } .dbx-sheet .tm { font-size: .66rem; }
.dbx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 3px; }
.dbx-kind { font-size: 11.5px; color: var(--x-muted, var(--muted)); font-weight: 600; }
/* Einrichtungsfenster: Abbrechen links, Aktionen rechts; am Ende „Fertig“ und „Erstes Dokument erstellen“ */
.vt-panel footer { justify-content: flex-start; flex-wrap: nowrap; align-items: center; } .vt-foot-sp { flex: 1 1 auto; }
.vt-panel footer [data-vt-back][hidden] + * { margin-left: 0; }
@media (max-width: 520px) { .vt-panel footer { gap: 8px; padding: 12px 14px; flex-wrap: nowrap; } .vt-panel footer .btn { padding-left: 12px; padding-right: 12px; white-space: nowrap; } .vt-panel footer [data-vt-first] { flex: 1 1 auto; justify-content: center; } .vt-bk-t { display: none; } }
/* Kundenlink im Dokument: Adresse in voller Breite, Knöpfe darunter */
.dl-url { flex-wrap: wrap; width: 100%; } .dl-url input { flex: 1 1 100%; } .dl-url .btn { flex: 0 0 auto; }
.dl-urlt { flex: 1 1 100%; display: block; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12px; line-height: 1.45; word-break: break-all; user-select: all; cursor: text; }
/* Name des Dokuments ändern (Übersicht und Dokument) */
.d-rename { margin-top: 2px; } .d-rename > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12.5px; color: var(--muted); }
.d-rename > summary::-webkit-details-marker { display: none; } .d-rename > summary:hover { color: var(--text); }
.d-rename[open] > summary { display: none; }
.d-rename-f { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; } .d-rename-f input { flex: 1 1 220px; min-width: 0; }
.wz-rename > summary { font-size: 14px; color: var(--text-2); } .wz-rename > summary span { overflow-wrap: anywhere; }
.iban-msg { display: block; min-height: 1em; margin-top: 3px; font-weight: 600; } .iban-msg.ok { color: var(--iban-ok); } .iban-msg.bad { color: var(--iban-bad); }
.wz-docname { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 8px; background: var(--sunken); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.wz-docname span { overflow-wrap: anywhere; }
/* Kundenzeilen: Beschriftung nie im Wort trennen; „aus Kontakt“ darf in die nächste Zeile, Felder bleiben auf einer Linie */
.ds-frow .ds-lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; white-space: nowrap; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.ds-frow .ds-lbl > span, .ds-frow .ds-lbl > code { margin-left: 0; }
@media (min-width: 601px) { .ds-frow.r-name.n3 { grid-template-columns: minmax(110px, .75fr) 1.5fr 1.5fr; } .ds-frow.r-adresse.n3 { grid-template-columns: 2.2fr minmax(110px, .85fr) 1.6fr; } }
/* Kundenangaben in zwei Bereichen: Kunde / WEG und Objekt */
.ds-fpanels { display: flex; flex-direction: column; gap: 14px; grid-column: 1 / -1; }
.ds-fpanel { padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ds-fpanel h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--text-2); }
.ds-same { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; }
.ds-same-ro { background: var(--sunken) !important; color: var(--text-2); }
@media (max-width: 600px) { .ds-fpanel { padding: 10px 10px 12px; } }
.ds-frow.r-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 600px) { .ds-frow.r-bank { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 601px) { .ds-frow.r-objekt_adresse.n3 { grid-template-columns: 2.2fr minmax(110px, .85fr) 1.6fr; } }
@media (max-width: 600px) { .ds-frow.r-objekt_adresse.n3 { grid-template-columns: minmax(90px, .8fr) 1.6fr; } .ds-frow.r-objekt_adresse.n3 > :first-child { grid-column: 1 / -1; } }
.ds-frow-hint { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; } .ds-frow-hint b { font-weight: 650; color: var(--text-2); }
/* Kunde links, Objekt rechts (wo Platz ist); Objekt mit Häuschen, in dem die Einheiten erscheinen */
.wz-pane:has(.ds-fpanels) { max-width: 820px; }
.ds-fpanels { container-type: inline-size; }
@container (min-width: 700px) { .ds-fpanels-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; } }
.ds-fpanels-in { display: flex; flex-direction: column; gap: 14px; }
.ds-fpanel { container-type: inline-size; min-width: 0; }
.ds-frow .ds-lbl { white-space: normal; }
@container (max-width: 430px) {
  .ds-frow.r-name.n3, .ds-frow.r-adresse.n3, .ds-frow.r-objekt_adresse.n3 { grid-template-columns: minmax(90px, .8fr) 1.6fr !important; }
  .ds-frow.r-name.n3 > :first-child, .ds-frow.r-adresse.n3 > :first-child, .ds-frow.r-objekt_adresse.n3 > :first-child { grid-column: 1 / -1; max-width: none; }
  .ds-frow.r-kontakt, .ds-frow.r-bank { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Einheiten: Felder links schmal, Häuschen rechts groß; im schmalen Bereich (bis 430 px) Häuschen oben */
.ds-units { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 12px 24px; align-items: center; }
.ds-units-f .ds-frow.r-einheiten { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
@container (max-width: 430px) { .ds-units { grid-template-columns: minmax(0, 1fr); } .ds-units .ds-house { order: -1; max-width: 260px; } }
/* Häuschen: Wohneinheiten (WE) und SEV nebeneinander im Haus, Garage mit Zahl im Tor, Straßenschild links; Linien blau, Zahlen schwarz */
.ds-house { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; }
.ds-house .roof, .ds-house .body, .ds-house .garage, .ds-house .gdoor, .ds-house .div { vector-effect: non-scaling-stroke; }
.ds-house .roof { fill: var(--house-roof); stroke: var(--house-line); stroke-width: 2px; stroke-linejoin: round; }
.ds-house .body, .ds-house .garage { fill: var(--surface); stroke: var(--house-line); stroke-width: 2px; }
.ds-house .gdoor { fill: none; stroke: #93c5fd; stroke-width: 1.5px; }
.ds-house .div { stroke: #93c5fd; stroke-width: 1.5px; stroke-dasharray: 3 3; }
.ds-house text { text-anchor: middle; font-family: inherit; fill: var(--text); }
.ds-house .n { font-size: 22px; font-weight: 800; } .ds-house .gn { font-size: 18px; font-weight: 800; }
.ds-house .l { font-size: 12px; font-weight: 700; fill: var(--text-2, var(--muted)); } .ds-house .gl { font-size: 8px; font-weight: 600; fill: var(--muted); }
.ds-house .sign .pole { stroke: #64748b; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.ds-house .sign .plate { fill: #1d4ed8; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ds-house .sign .st { fill: #fff; font-size: 10px; font-weight: 700; } .ds-house .sign.off { opacity: .35; }
.ds-house [hidden] { display: none; }
.ds-fpanels, .ds-fpanels-in, .ds-fpanel { width: 100%; box-sizing: border-box; }
@container (min-width: 700px) { .ds-fpanels .ds-fpanels-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; } }
/* Fußnoten unter einer Feldreihe, mit etwas Abstand */
.ds-foot { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line); } .ds-foot p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; } .ds-foot sup { font-weight: 700; }

/* Blanko-Link: Auswahl der Leistungen (Mehrfachauswahl), Abschnitte je Vertrag, Dankeseite */
.dl-pick-form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 30rem; }
.dl-pick { display: flex; flex-direction: column; gap: 8px; }
.dl-pick-o { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; }
.dl-pick-o input { position: absolute; opacity: 0; pointer-events: none; }
.dl-pick-box { flex: none; width: 22px; height: 22px; border: 2px solid var(--line-strong, #9ca3af); border-radius: 6px; display: grid; place-items: center; }
.dl-pick-o input:checked + .dl-pick-box { background: var(--primary); border-color: var(--primary); }
.dl-pick-o input:checked + .dl-pick-box::after { content: ''; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.dl-pick-o:has(input:checked) { border-color: var(--primary); background: var(--surface-2); }
.dl-pick-o:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.dl-pick-o b { font-size: 16px; color: var(--text); }
.dl-pick-kz { flex: none; min-width: 48px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-align: center; color: var(--text); }
.dl-pick-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dl-pick-t small { font-size: 13px; color: var(--muted); }
.dl-pick-hint { color: var(--err) !important; }
.dl-pick-form .dl-btn { width: 100%; }
.dl-sec { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.dl-sec + .dl-sec { border-top: 1px solid var(--line); padding-top: 16px; }
.dl-sec-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.dl-sec-h svg { color: var(--primary); }
.dl-done-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 26rem; }
.dl-done-list .btn { width: 100%; justify-content: center; }
.dbl-new { flex-direction: column; align-items: stretch; } .dbl-new-h { font-size: 13px; color: var(--text-2); }
.dbl-pick { display: flex; flex-wrap: wrap; gap: 6px 16px; } .dbl-new > .btn { align-self: flex-start; }
/* Kundendaten: Bankverbindung – Kontoinhaber über die ganze Breite, IBAN und BIC darunter */
.ds-bankf { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px 14px; }
.ds-bankf .ds-field.wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .ds-bankf { grid-template-columns: minmax(0, 1fr); } }
/* BIC und Bank aus der IBAN: grau hinterlegt, nicht auszufüllen */
input[data-iban-auto][readonly] { background: var(--sunken); color: var(--text-2); border-style: dashed; cursor: default; }
.ds-frow.r-bank > :nth-child(3) { grid-column: 1 / -1; }
/* Kundenlink: optionale Nachricht vor dem Absenden – kompakt */
.dl-msg { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; }
.dl-msg textarea { min-height: 3.2em; max-height: 9em; resize: vertical; }
/* Kundenlink: Sicherheitsabfrage */
.dl-verify { max-width: 24rem; margin: 0 auto; }
.dl-verify .ds-field { width: 100%; text-align: left; }
.dl-verify .dl-state-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); color: var(--primary); }
/* „Vertragsentwurf jetzt anfordern“: sanft pulsierendes Glimmen, damit der letzte Schritt ins Auge fällt */
@keyframes dl-ember { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 101, 52, .45), 0 2px 8px rgba(22, 101, 52, .25); } 50% { box-shadow: 0 0 0 8px rgba(22, 101, 52, 0), 0 2px 18px rgba(34, 197, 94, .55); } }
.dl-check [data-dl-pane="review"]:not([hidden]) .dl-release, .dl-check .dl-cb-btn.dl-release { animation: dl-ember 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dl-check .dl-release { animation: none; } }

/* ===== Kundenseiten der Dokumentenschmiede (/d/, /n/): Zeilenumbruch bei allen Breiten ===== */
/* „·“-Kette: bricht nur zwischen den Teilen; ein Punkt am Zeilenende wird unsichtbar (app.js setzt .is-eol) */
.chain-part { display: inline-block; max-width: 100%; }
.chain-dot.is-eol { visibility: hidden; }
/* Silbentrennung statt zerrissener Wörter (Trennhilfe setzt weiche Trennstellen); break-word nur als Notbremse für ein Wort länger als die Zeile */
body.public .dl-card, body.public .dl-way, body.public .public-foot { overflow-wrap: break-word; word-break: normal; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
body.public .dl-sum dt:not(.dl-sum-wide), body.public .dl-sum dd:not(.dl-sum-wide) { overflow-wrap: normal; } /* zweispaltig: Überlauf erkennen, dann umklappen */
body.public .dl-card .btn { hyphens: manual; -webkit-hyphens: manual; }
body.public :is(.dl-title, .dl-state h1, .dl-who, .dl-big, .dl-next-steps h2, .dl-next-steps li > b, .dl-sec-h, .dl-way-now b) { text-wrap: balance; }
body.public .ds-foot sup { font-size: 12px; }
/* Sprung zum ersten fehlenden Pflichtfeld: unter der Prüfen-Leiste anhalten */
.dl-check .missing-note, .dl-check .ds-field, .dl-check label.check { scroll-margin-top: 84px; }

/* ===== Kundenseiten der Dokumentenschmiede am Handy (bis 520 px) – alle Handy-Regeln an einer Stelle ===== */
@media (max-width: 520px) {
  /* Außenabstand und Kartenpolster: 266 px für Text und Felder bei 320 px; Bereiche ohne Kasten, getrennt durch eine Linie */
  body.public .container:has(.dl-card) { padding: 12px 12px 24px; }
  body.public .dl-card { padding: 20px 14px 24px; gap: 12px; }
  body.public .ds-fpanel, body.public .dl-sec { padding: 0; border: 0; border-radius: 0; background: none; }
  body.public .ds-fpanel + .ds-fpanel, body.public .dl-sec + .dl-sec { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
  /* Kopf und Fuß: Tippflächen */
  body.public .public-head .brand { min-height: 44px; }
  body.public .public-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

  /* Weg zum Vertrag: nur die 5 Kreise, darunter Name des aktuellen Schritts mit „Sie/Wir sind dran“ (Namen bleiben für Vorleseprogramme) */
  body.public .dl-way { padding: 10px 12px; margin-bottom: 10px; }
  body.public .dl-way-steps li .dl-way-who, body.public .dl-way-steps li .dl-way-t { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.public .dl-way-n { width: 28px; height: 28px; font-size: 13px; border-width: 2px; }
  body.public .dl-way-steps li.cur .dl-way-n { transform: none; box-shadow: 0 0 0 4px rgba(29,78,216,.18); }
  body.public .dl-way-steps li.cur.w-sie .dl-way-n { box-shadow: 0 0 0 4px rgba(180,83,9,.18); }
  body.public .dl-way-steps li:not(:last-child)::after { top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 3px; }
  body.public .dl-way-now { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 0; text-align: center; }
  body.public .dl-way-now b { min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--dl-sie-ink); }
  body.public .dl-way-now.w-wir b { color: var(--dl-wir-ink); }
  body.public .dl-way-now.w-fertig b { color: var(--ok); }
  body.public .dl-way-pill { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--dl-sie); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
  body.public .dl-way-now.w-wir .dl-way-pill { background: var(--dl-wir); }

  /* Prüfen-Leiste: höchstens 72 px, Knopf ohne Häkchen */
  body.public .dl-checkbar { margin: -20px -14px 0; padding: 8px 8px 8px 14px; gap: 10px; }
  body.public .dl-cb-t { flex: 1; min-width: 0; }
  body.public .dl-cb-t b { font-size: 15px; font-weight: 700; white-space: nowrap; }
  body.public .dl-cb-t span { font-size: 12px; line-height: 1.3; }
  body.public .dl-cb-btn { flex: none; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 700; white-space: nowrap; }
  body.public .dl-cb-btn svg { display: none; }

  /* Knöpfe: volle Breite, höchstens zwei Zeilen, Umbruch nur an Wortgrenzen; Hauptknopf über „Zurück“ */
  body.public .dl-card .btn:not(.dl-cb-btn) { width: 100%; min-width: 0; min-height: 48px; margin-left: 0; margin-right: 0; padding: 12px 16px; gap: 8px; font-size: 16px; font-weight: 600; line-height: 1.25; white-space: normal; overflow-wrap: normal; text-align: center; text-wrap: balance; }
  body.public .dl-card .btn:not(.dl-cb-btn) svg { flex: none; width: 18px; height: 18px; }
  body.public .dl-sum-acts { flex-direction: column; align-items: stretch; gap: 8px; }
  body.public .dl-sum-acts .btn:not(.primary) { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

  /* Schrift: Titel 20, großer Satz 18, Fließtext 16, Beschriftungen 13 px */
  body.public .dl-title, body.public .dl-state h1, body.public .dl-who { font-size: 20px; line-height: 1.25; }
  body.public .dl-big { font-size: 18px; line-height: 1.35; }
  body.public .dl-hi { font-size: 16px; }
  body.public .dl-next-steps h2, body.public .dl-sec-h { font-size: 17px; }
  body.public .dl-next, body.public .dl-addr { font-size: 16px; } /* übriger Fließtext erbt 16 px vom body (bis 760 px) */
  body.public .dl-card .ds-lbl { font-size: 13px; }
  body.public .ds-foot p { font-size: 13px; }

  /* Begrüßung und Dokumentkachel */
  body.public .dl-welcome { padding: 0; }
  body.public .dl-welcome .dl-btn { margin-top: 4px; }
  body.public .dl-doc { display: flex; width: 100%; align-items: flex-start; gap: 10px; padding: 12px 14px; }
  body.public .dl-doc svg { margin-top: 2px; }
  body.public .dl-doc b { font-size: 16px; font-weight: 700; line-height: 1.35; }
  body.public .dl-doc .small { font-size: 13.6px; }

  /* Teile, die am Handy in eine eigene Zeile wandern (Gültigkeit, Nummer, Restzeit, Mailadresse, „Auswahl ändern“); Trennzeichen davor entfällt */
  body.public .chain-own { display: block; }
  body.public .chain-dot-own, body.public .dl-sep { display: none; }
  body.public .dl-mail, body.public .dl-again { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; }
  body.public .dl-own, body.public .dl-change { display: flex; justify-content: flex-start; align-items: center; min-height: 44px; padding: 0; }

  /* Download: Gültigkeitskasten zweizeilig, Schritte kompakter, Upload und Postanschrift in voller Breite */
  body.public .dl-exp { width: 100%; align-items: flex-start; gap: 10px; padding: 10px 14px; font-size: 15px; text-align: left; }
  body.public .dl-next-steps ol { gap: 12px; }
  body.public .dl-next-steps li > b { font-size: 16px; font-weight: 650; margin-bottom: 8px; }
  body.public .dl-upload { align-self: stretch; }
  body.public .dl-file { display: flex; width: 100%; min-height: 48px; justify-content: center; padding: 12px 16px; }
  body.public .dl-addr { padding: 10px 12px; line-height: 1.45; }

  /* Formular: einspaltig, nur PLZ | Ort nebeneinander; Felder und Kontrollkästchen mindestens 44 px hoch */
  body.public .dl-card .ds-frow { grid-template-columns: minmax(0, 1fr) !important; }
  body.public .dl-card .ds-frow > *, body.public .dl-card .ds-frow.r-name.n3 > :first-child { grid-column: auto; max-width: none; }
  body.public .dl-card .ds-frow.r-adresse.n3, body.public .dl-card .ds-frow.r-objekt_adresse.n3 { grid-template-columns: 104px minmax(0, 1fr) !important; }
  body.public .dl-card .ds-frow.r-adresse.n3 > :first-child, body.public .dl-card .ds-frow.r-objekt_adresse.n3 > :first-child { grid-column: 1 / -1; }
  body.public .dl-card input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), body.public .dl-card select { min-height: 44px; }
  body.public .ds-same { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 10px; font-size: 15px; }
  body.public .ds-same input { flex: none; width: 20px; height: 20px; margin: 0; }
  body.public .dl-check .missing-note { margin: 0 0 8px; }
  /* Häuschen über den Einheiten-Feldern */
  body.public .dl-card .ds-units { grid-template-columns: minmax(0, 1fr); }
  body.public .dl-card .ds-units .ds-house { order: -1; width: 100%; max-width: 260px; margin: 0 auto 4px; }

  /* Zusammenfassung: Bezeichnung 13 px, Wert 15 px; bis 360 px Bezeichnung über dem Wert */
  body.public .dl-sum dt:not(.dl-sum-h) { padding: 8px 6px 8px 12px; font-size: 13px; }
  body.public .dl-sum dd { padding: 8px 12px 8px 6px; font-size: 15px; }
  body.public .dl-sum dt.dl-sum-wide { padding-right: 12px; padding-bottom: 0; }
  body.public .dl-sum dd.dl-sum-wide { padding: 2px 12px 8px; }
  @media (max-width: 360px) {
    body.public .dl-sum { grid-template-columns: minmax(0, 1fr); }
    body.public .dl-sum dt:not(.dl-sum-h) { padding: 8px 12px 0; }
    body.public .dl-sum dd { border-top: 0; padding: 2px 12px 8px; }
  }

  /* Zustandsseiten */
  body.public .dl-state { padding: 8px 0; }
}
/* Neue Aufgabe: Art wählen (Aufgabe, Rückruf, Termin, Erinnerung) */
.td-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.td-kind { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--text) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
.td-kind:hover { background: var(--surface-2); }
.td-kind.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink, #fff) !important; }
@media (max-width: 520px) { .td-kinds { display: grid; grid-template-columns: 1fr 1fr; } .td-kind { justify-content: center; } }
/* Aufgabenliste: Rückruf, Termin, Erinnerung mit Art-Kennzeichen */
.td-kindbar { margin-top: -4px; }
.td-kindtag { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; vertical-align: 2px; background: var(--surface-2); color: var(--text-2); }
/* Art neutral (Farbe bleibt dem Zustand vorbehalten: überfällig, heute, erledigt) – passt auch im Dunkelmodus */
.td-kindtag { border: 1px solid var(--line); background: var(--surface); }
.td-tel { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.td-editlink { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--muted); }
.td-editlink:hover { background: var(--surface-2); color: var(--text); }

/* Aufgabenliste: Tippflächen mindestens 44 px (Abhaken, Bearbeiten, Rückrufnummer) */
.td-ck button { position: relative; } .td-ck button::before { content: ''; position: absolute; inset: -10px; }
@media (max-width: 760px) {
  .td-editlink { width: 44px; height: 44px; }
  .td-tel { min-height: 44px; padding: 0 6px; margin: -12px 0; }
}
#td-new, #note-form { scroll-margin-top: 72px; } /* Handy: „Zurück“-Pille überdeckt den Formularkopf nicht */
/* Dokument bearbeiten: kein Schritt-für-Schritt, alle Bereiche untereinander, nur „Änderungen speichern“ */
.wz.wz-edit .wz-track, .wz.wz-edit [data-wz-prev], .wz.wz-edit [data-wz-next], .wz.wz-edit [data-wz-sum], .wz.wz-edit [data-wz-pane="2"] > .wz-q { display: none !important; }
.wz.wz-edit .wz-pane, .wz.wz-edit .wz-pane[hidden] { display: block !important; }
.wz.wz-edit .wz-pane + .wz-pane { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.wz.wz-edit [data-wz-last], .wz.wz-edit [data-wz-last][hidden] { display: inline-flex !important; }
.dl-flowhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dl-proto { width: 100%; table-layout: fixed; } .dl-proto th, .dl-proto td { overflow-wrap: anywhere; } /* Protokoll am Handy nicht breiter als die Karte */

/* Dokumentenübersicht ohne rechte Spalte: Tabelle volle Breite, „Bearbeiten“ je Zeile, Zeile öffnet das Dokument */
.dx-work.dx-full { grid-template-columns: minmax(0, 1fr); }
.dx-row { cursor: pointer; } .dx-edit { justify-self: end; }
/* Dokument bearbeiten: Übersicht oben (nächster Schritt, Aktionen, Angaben, Eckdaten) */
.di { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.di-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .di-acts form { margin: 0; }
.di-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; align-items: start; }
.di-ang summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; } .di-ang .dx-chk { margin-top: 8px; }
.di-kv { margin: 0; }
@media (max-width: 760px) { .di-grid { grid-template-columns: minmax(0, 1fr); } .di-acts > *, .di-acts form .btn { flex: 1 1 auto; } .di-acts .btn { justify-content: center; min-height: 44px; } }
/* 0.221 Dokument bearbeiten: eine Spalte, Bereiche untereinander, gleiche Breite für Kopf, Infokarte, Formular und Ablauf */
.wz-head.doc-edit, form.wz.wz-edit, section.di, form.wz.wz-edit ~ section.dl-admin { max-width: 980px; margin-left: auto; margin-right: auto; }
.wz-head.doc-edit { align-items: center; }
section.di { margin-bottom: 16px; }
.wz.wz-edit .wz-stage { display: block; padding: 0; }
.wz.wz-edit .wz-pane, .wz.wz-edit .wz-pane:has(.ds-fpanels) { max-width: none; display: flex !important; flex-direction: column; gap: 14px; padding: 20px 22px; }
.wz.wz-edit .wz-pane + .wz-pane { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.wz.wz-edit .wz-q { font-size: 1.05rem; margin: 0; }
.wz.wz-edit .wz-qs { margin: 2px 0 0; font-size: 13px; }
.wz-q-edit { display: none; } .wz.wz-edit .wz-q-edit { display: block !important; }
/* Kunde: Überschrift links, Suche und Auswahl rechts; Liste begrenzt */
.wz.wz-edit .wz-pane[data-wz-pane="0"] { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px 24px; align-items: start; }
.wz.wz-edit [data-wz-pane="0"] > .wz-ph { grid-row: span 3; }
.wz.wz-edit [data-wz-pane="0"] > .wz-search, .wz.wz-edit [data-wz-pane="0"] > .wz-picks, .wz.wz-edit [data-wz-pane="0"] > .wz-links { grid-column: 2; }
.wz.wz-edit .wz-picks { max-height: 196px; overflow-y: auto; }
.wz.wz-edit .wz-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.wz.wz-edit .wz-links .wz-newlink { border: 0; padding: 0; }
/* Speichern bleibt beim Scrollen sichtbar */
.wz.wz-edit .wz-nav { position: sticky; bottom: 0; z-index: 5; margin-top: 0; background: var(--surface); border-radius: 0 0 14px 14px; box-shadow: 0 -6px 16px -12px rgba(20,25,35,.25); }
/* Infokarte: Eckdaten als ruhige Leiste */
.di-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; margin: 2px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 13px; }
.di-kv > div { min-width: 0; } .di-kv dt { color: var(--muted); font-size: 12px; margin-bottom: 2px; } .di-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.di-ang { border-top: 1px solid var(--line); padding-top: 10px; }
.di-ang summary { list-style: none; } .di-ang summary::-webkit-details-marker { display: none; }
.di-ang summary::after { content: '›'; color: var(--muted); transition: transform .15s; } .di-ang[open] summary::after { transform: rotate(90deg); }
.di-ang .dx-chk { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
/* Ablauf zurücksetzen: deutlich sichtbar */
.dl-flowhead { margin-bottom: 12px; } .dl-flowhead h2 { margin: 0; } .dl-flowhead form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.btn.dl-reset { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 700; min-height: 40px; }
.btn.dl-reset:hover { background: var(--primary-hover); }
.dl-reset-hint { font-size: 12.5px; color: var(--muted); max-width: 230px; line-height: 1.35; }
/* Protokoll: letzte drei Einträge, Rest aufklappbar */
.dl-log-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.dl-log-wrap .ds-h3 { margin: 0 0 8px; }
.dl-log { list-style: none; margin: 0; padding: 0; }
.dl-log li { display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(0, .9fr); gap: 4px 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dl-log li:last-child { border-bottom: 0; }
.dl-log time { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-log-ev { min-width: 0; } .dl-log-who { color: var(--muted); font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.dl-log-more { border-top: 1px solid var(--line); }
.dl-log-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 2px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 13px; font-weight: 650; cursor: pointer; }
.dl-log-more > summary::-webkit-details-marker { display: none; }
.dl-log-more > summary:hover { background: var(--sunken); }
.dl-log-more > summary .c, .dl-log-more[open] > summary .o { display: none; } .dl-log-more[open] > summary .c { display: inline; }
.dl-log-more[open] > summary svg { transform: rotate(180deg); }
.dl-log-more[open] > summary { order: 2; }
.dl-log-more[open] { display: flex; flex-direction: column; } .dl-log-more[open] > .dl-log { order: 1; border-top: 0; }
@media (max-width: 760px) {
  .wz.wz-edit .wz-pane { padding: 16px 14px; }
  .wz.wz-edit .wz-pane[data-wz-pane="0"] { display: flex !important; }
  .dl-log li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ev ev" "time who"; }
  .dl-log-ev { grid-area: ev; } .dl-log time { grid-area: time; font-size: 12px; color: var(--muted); } .dl-log-who { grid-area: who; text-align: right; font-size: 12px; }
  .dl-flowhead form { width: 100%; } .btn.dl-reset { width: 100%; min-height: 44px; } .dl-reset-hint { max-width: none; }
  .di-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .di-acts .btn { white-space: normal; text-align: center; } .di-acts > form:first-child:has(.btn.primary), .di-acts > .btn.primary:first-child { flex-basis: 100%; } .di-acts .btn.primary { width: 100%; }
  .wz.wz-edit .wz-nav { flex-wrap: nowrap; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .wz.wz-edit .wz-nav .sp { display: none; } .wz.wz-edit .wz-nav .btn { width: auto !important; flex: 0 1 auto; min-width: 0; } .wz.wz-edit .wz-nav [data-wz-last] { margin-left: auto; } .wz.wz-edit .wz-nav .btn.text { padding-left: 6px; padding-right: 6px; } .wz.wz-edit .wz-err:empty { display: none; }
}
/* 0.222 ETV-Details: Eckdaten | Arbeitsschritte | Unterlagen (breit, mit Dateinamen und „Ersetzen“) */
.et-dgrid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.55fr); gap: 18px 22px; }
.et-unterl .et-docs li { align-items: center; padding: 7px 10px; }
.et-docs .et-dn { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.et-docs .et-dn .t { font-weight: 600; overflow-wrap: anywhere; }
.et-docs .et-dn .et-chip, .et-docs .et-dn .et-det { align-self: flex-start; }
.et-file { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-size: .8rem; color: var(--link, #1d5bd6); text-decoration: none; }
.et-file span { overflow-wrap: anywhere; line-height: 1.3; } .et-file:hover span { text-decoration: underline; } .et-file svg { flex: none; }
.et-docs li.has { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); } .et-docs li.has::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; align-self: flex-start; margin-top: 7px; }
.et-docs li > .et-upf, .et-docs li > .btn { flex: none; }
@media (max-width: 1100px) { .et-dgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .et-unterl { grid-column: 1 / -1; } }
@media (max-width: 900px) { .et-dgrid { grid-template-columns: minmax(0, 1fr); } .et-unterl { grid-column: auto; } }
/* 0.223 ETV-Unterlagen löschen */
.et-docs .et-docbtn { flex: none; gap: 5px; }
.btn.et-del { color: var(--err); } .btn.et-del:hover { background: var(--err-bg); border-color: var(--err); }
@media (max-width: 560px) { .btn.et-del:not(.armed) span { display: none; } .btn.et-del { padding-left: .55rem; padding-right: .55rem; } }
/* 0.223 Startseite: drei Einträge je Bereich, deutlicher Knopf „Alle … anzeigen“ oben rechts und unten links */
a.dbx-all { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 650; white-space: nowrap; text-decoration: none !important; box-shadow: 0 1px 2px rgba(20,25,35,.05); }
a.dbx-all:hover { background: var(--sunken); border-color: var(--text-2); }
.dbx-card-h a.dbx-all { font-size: 13px; font-weight: 650; }
.dbx-foot { padding: 12px 20px 14px; border-top: 1px solid var(--x-row, var(--line)); }
@media (max-width: 760px) { .dbx-foot { padding: 12px 14px; } .dbx-foot a.dbx-all { width: 100%; justify-content: center; min-height: 44px; } }
#posteingang > .dbx-card-h .dbx-chips { margin-left: auto; }
/* 0.225 Belegordner: wo liegt er, seit wann */
.et-beleg { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.et-beleg h3 { margin-bottom: 4px !important; }
.et-beleg.at-hv { box-shadow: inset 3px 0 0 var(--link); } .et-beleg.at-gdwe { box-shadow: inset 3px 0 0 var(--warn); }
.et-beleg-now { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; font-size: .86rem; } .et-beleg-now svg { color: var(--muted); }
.et-beleg-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.et-beleg-f input { height: 32px; min-height: 0; padding: 4px 8px; font-size: .82rem; width: auto; }
.et-beleg-f input[type=date] { width: 128px; flex: none; } .et-beleg-f input[name=bei] { flex: 1 1 80px; min-width: 0; }
.et-beleg-b { display: flex; gap: 6px; flex-wrap: wrap; }
.et-beleg-b .btn.on { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.et-beleg-log { margin-top: 6px; font-size: .8rem; } .et-beleg-log summary { cursor: pointer; color: var(--muted); }
.et-beleg-log ul { margin: 4px 0 0; padding-left: 16px; } .et-beleg-log li { margin: 2px 0; }
@media (max-width: 560px) { .et-beleg-f input[type=date] { flex: 1 1 130px; } .et-beleg-b { width: 100%; } .et-beleg-b .btn { flex: 1; min-height: 40px; } }
/* 0.226 Dokumentenübersicht: Titel größer, Kundenlink mit Restlaufzeit, „Zu tun“ als deutlicher Knopf */
.dx-dname .l1 { font-size: 15.5px; line-height: 1.3; }
.dx-row[data-turn="idee"] .dx-dname .l1 { font-weight: 750; }
.dx-klink { display: inline-block; text-align: left; line-height: 1.45; align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--sunken); color: var(--text-2); }
.dx-klink small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.dx-klink.ok { background: var(--ok-bg); color: var(--ok); } .dx-klink.in { background: #e8eefc; color: #1f4fd1; } .dx-klink.off { color: var(--muted); }
:root[data-theme="dark"] .dx-klink.in { background: #22304f; color: #8fb0ff; }
.btn.dx-go { align-self: flex-start; margin: 4px 0 2px; white-space: normal; text-align: left; }
.dx-spill.go { font-size: 13px; padding: 6px 12px 6px 6px; text-decoration: none; background: #1f4fd1; color: #fff; box-shadow: 0 1px 2px rgba(31,79,209,.3); white-space: normal; }
.dx-spill.go .pn { background: #fff; color: #1f4fd1; width: 20px; height: 20px; }
.dx-spill.go:hover { background: #1a43b3; }
:root[data-theme="dark"] .dx-spill.go { background: #3563e9; color: #fff; }
@media (max-width: 760px) { .btn.dx-go { width: 100%; justify-content: center; min-height: 44px; } }
/* 0.226 Startseite: Rückmeldungen aus dem Kundenlink */
.dbx-docs { border-color: #c7d4f7; box-shadow: 0 0 0 3px rgba(31,79,209,.08); }
.dbx-docic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #e8eefc; color: #1f4fd1; display: flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] .dbx-docic { background: #22304f; color: #8fb0ff; }
.dbx-doc .dbx-title { font-weight: 650; }
.dbx-doc .dbx-sub b { font-weight: 650; color: var(--x-text, var(--text)); }
.btn.dbx-docbtn { flex: none; }
@media (max-width: 760px) { .dbx-doc { flex-wrap: wrap; } .btn.dbx-docbtn { width: 100%; justify-content: center; min-height: 44px; } }
.dx-klink svg { vertical-align: -2px; margin-right: 3px; }
/* 0.228 Startseite Dokumente: oben Titel + „Wir sind dran“, darunter Ereignis (Datum vorn) + Knopf */
.dbx-doc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ic main turn" "ic ev btn"; gap: 8px 14px; align-items: center; }
.dbx-doc .dbx-docic { grid-area: ic; align-self: start; } .dbx-doc .dbx-main { grid-area: main; } .dbx-doc .dbx-title { overflow-wrap: anywhere; }
.dbx-docev { grid-area: ev; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: 13.5px; padding: 6px 10px; border-radius: 8px; background: var(--x-chip, var(--sunken)); justify-self: start; }
.dbx-docev time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--x-text, var(--text)); white-space: nowrap; } .dbx-docev time small { font-weight: 500; color: var(--muted); font-size: 12px; }
.dbx-docev b { font-weight: 600; color: var(--x-text, var(--text)); }
.dbx-turn { grid-area: turn; justify-self: end; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; background: #fdecec; color: #b42323; border: 1px solid #f5c2c2; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
:root[data-theme="dark"] .dbx-turn { background: #3a1c1a; color: #ff8a80; border-color: #5a2a27; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbx-turn { background: #3a1c1a; color: #ff8a80; border-color: #5a2a27; } }
.dbx-doc .dbx-docbtn { grid-area: btn; }
@media (max-width: 760px) { .dbx-doc { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ic main" "ic turn" "ic ev" "btn btn"; } .dbx-turn { justify-self: start; } .dbx-doc .dbx-docbtn { justify-self: stretch; } }
/* 0.229 breite Karte: Titel | Mitte („Wir sind dran“ + Ereignis) | Knopf */
.dbx-docs { container-type: inline-size; }
@container (min-width: 860px) {
  .dbx-doc { grid-template-columns: 36px minmax(0, 1.25fr) minmax(0, 1fr) auto; grid-template-areas: "ic main turn btn" "ic main ev btn"; row-gap: 6px; }
  .dbx-doc .dbx-docic { align-self: center; }
  .dbx-turn, .dbx-docev { justify-self: start; }
  .dbx-turn { align-self: end; } .dbx-docev { align-self: start; }
}
/* 0.230 Datum vorne links, Ereignis als Pille */
.dbx-docwhen { grid-area: ic; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; padding: 6px 4px; border-radius: 9px; background: var(--x-chip, var(--sunken)); line-height: 1.2; font-variant-numeric: tabular-nums; }
.dbx-docwhen b { font-size: 14px; font-weight: 750; color: var(--x-text, var(--text)); } .dbx-docwhen small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.dbx-doc { grid-template-columns: 58px minmax(0, 1fr) auto; }
.dbx-docev { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; background: #e8eefc; color: #1f4fd1; border: 1px solid #c7d4f7; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
:root[data-theme="dark"] .dbx-docev { background: #22304f; color: #8fb0ff; border-color: #2d3d63; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbx-docev { background: #22304f; color: #8fb0ff; border-color: #2d3d63; } }
@container (min-width: 860px) { .dbx-doc { grid-template-columns: 58px minmax(0, 1.25fr) minmax(0, 1fr) auto; } }
@media (max-width: 760px) { .dbx-doc { grid-template-columns: 58px minmax(0, 1fr); } .dbx-docev { white-space: normal; } }
/* 0.231 Angebot oder Vertrag: Wahl des Kunden, Markierungen */
.dl-why-choice { margin: 6px 0 0; font-weight: 650; font-size: 1.05rem; }
.dl-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 560px; margin: 4px auto 0; }
.dl-choice form { margin: 0; display: flex; }
.dl-choice-b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: center; transition: border-color .12s, box-shadow .12s, transform .12s; }
.dl-choice-b b { font-size: 1.1rem; font-weight: 750; hyphens: manual; overflow-wrap: anywhere; }

.dl-choice-b svg { color: var(--muted); }
.dl-choice-b.v { border-color: var(--text); } .dl-choice-b.v svg { color: var(--text); }
.dl-choice-b:hover { border-color: #1f4fd1; box-shadow: 0 0 0 3px rgba(31,79,209,.15); transform: translateY(-1px); } .dl-choice-b:hover svg { color: #1f4fd1; }
.dl-upgrade p { margin: 0 0 10px; }
.dl-art { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.dl-art-pill { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--sunken); color: var(--text-2); }
.dl-art-pill.angebot { background: #fef3c7; color: #92400e; } .dl-art-pill.vertrag { background: #e3f3e9; color: #17663a; }
:root[data-theme="dark"] .dl-art-pill.angebot { background: #33270f; color: #f0b35a; } :root[data-theme="dark"] .dl-art-pill.vertrag { background: #14301e; color: #6fd296; }
.dl-artsel { display: flex; flex-direction: column; gap: 3px; margin-top: .4rem; } .dl-artsel select { max-width: 100%; }
.ds-gap.bank { border-style: dashed; }
.dx-art { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #fef3c7; color: #92400e; }
:root[data-theme="dark"] .dx-art { background: #33270f; color: #f0b35a; }
.dl-artrow { display: flex; gap: 6px; align-items: center; } .dl-artrow select { flex: 1; min-width: 0; }
/* 0.233 Wahl Angebot/Vertrag: schönere Karten, Unterzeilen ohne Silbentrennung */
.dl-choice { max-width: 600px; gap: 14px; }
.dl-choice-b { gap: 6px; padding: 20px 16px 16px; border-width: 1.5px; box-shadow: 0 1px 2px rgba(20,25,35,.05), 0 6px 18px -12px rgba(20,25,35,.25); }
.dl-choice-b.v { border-color: var(--line-2); }
.dl-choice-ic { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fef3c7; color: #92400e; margin-bottom: 4px; }
.dl-choice-b.v .dl-choice-ic { background: #e3f3e9; color: #17663a; }
.dl-choice-b .dl-choice-ic svg, .dl-choice-b.v .dl-choice-ic svg { color: inherit; }
.dl-choice-t { font-size: 1.12rem; font-weight: 750; hyphens: none; overflow-wrap: normal; }
.dl-choice-s { display: flex; flex-direction: column; gap: 1px; font-size: .9rem; color: var(--muted); line-height: 1.4; hyphens: none; }
.dl-choice-s b { color: var(--text); font-weight: 700; font-size: inherit; }
.dl-choice-b span { hyphens: none; }
.dl-choice-go { margin-top: 8px; font-size: .86rem; font-weight: 700; color: #1f4fd1; }
.dl-choice-b.on { border-color: #1f4fd1; box-shadow: 0 0 0 3px rgba(31,79,209,.15); }
.dl-chosen { margin: 2px 0 0; font-size: .9rem; color: var(--muted); } .dl-chosen b { color: var(--text); }
@media (max-width: 520px) {
  .dl-choice-b { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "ic t" "ic s" "ic go"; column-gap: 12px; row-gap: 2px; text-align: left; align-items: start; }
  .dl-choice-ic { grid-area: ic; margin: 0; } .dl-choice-t { grid-area: t; } .dl-choice-s { grid-area: s; padding-left: 0 !important; flex-basis: auto !important; } .dl-choice-go { grid-area: go; margin-top: 4px; }
}
@media (max-width: 520px) { .dl-choice { grid-template-columns: minmax(0, 1fr); } }
/* 0.234 Dokumenttitel auf der Begrüßung: hervorgehoben, aber nicht anklickbar wirkend */
.dl-doctitle { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 6px; text-align: center; max-width: 100%; }
.dl-doctitle b { font-size: 1.12rem; font-weight: 750; line-height: 1.35; color: var(--text); }
.dl-doctitle b::before, .dl-doctitle b::after { content: none; }
.dl-doctitle > span { font-size: .82rem; color: var(--muted); letter-spacing: .02em; } .dl-doctitle b * { color: inherit; font-size: inherit; font-weight: inherit; }
.dl-doctitle::before { content: ''; width: 36px; height: 3px; border-radius: 2px; background: #1f4fd1; opacity: .7; margin-bottom: 6px; }
/* 0.235 Wahl Angebot/Vertrag: Karte markieren, dann „Weiter“; die andere wird grau */
.dl-choice-f { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin: 0; }
.dl-choice-b { position: relative; cursor: pointer; user-select: none; }
.dl-choice-b input { position: absolute; opacity: 0; pointer-events: none; }
.dl-choice-ck { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); }
.dl-choice-b:has(input:checked) { border-color: #1f4fd1; box-shadow: 0 0 0 3px rgba(31,79,209,.18); }
.dl-choice-b:has(input:checked) .dl-choice-ck { border-color: #1f4fd1; background: #1f4fd1; box-shadow: inset 0 0 0 4px var(--surface); }
.dl-choice-b:has(input:focus-visible) { outline: 2px solid #1f4fd1; outline-offset: 2px; }
.dl-choice:has(input:checked) .dl-choice-b:not(:has(input:checked)) { opacity: .5; filter: grayscale(1); box-shadow: none; }
.dl-choice:has(input:checked) .dl-choice-b:not(:has(input:checked)):hover { opacity: .8; }
.dl-choice-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dl-choice-acts .btn { min-width: 140px; justify-content: center; }
.dl-choice-acts .btn:first-child { order: 2; } .dl-choice-acts .btn:last-child { order: 1; }
@media (max-width: 520px) { .dl-choice-acts { flex-direction: column; width: 100%; } .dl-choice-acts .btn { width: 100%; } .dl-choice-acts .btn:first-child { order: 1; } .dl-choice-acts .btn:last-child { order: 2; } .dl-choice-ck { top: 10px; right: 10px; } }
/* 0.236 Kundenlink-Kasten: alles zum Link im grauen Kasten, Felder nach Pflicht / freiwillig / Bankverbindung */
.dl-kform { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dl-kform .dl-linkrow { display: flex; flex-direction: column; gap: 8px; }
.dl-lr-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dl-kform .dl-artsel { margin: 0; } .dl-kform .ds-acts { margin: 0; }
.dl-fgrp { display: flex; flex-direction: column; gap: 6px; }
.dl-fgrp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.dl-fgrp-h .c { font-weight: 600; color: var(--muted); }
.dl-banknote { display: none; font-weight: 500; color: var(--muted); }
.dl-kform[data-art-mode="wahl"] .dl-banknote[data-m="wahl"], .dl-kform[data-art-mode="angebot"] .dl-banknote[data-m="angebot"], .dl-kform[data-art-mode="vertrag"] .dl-banknote[data-m="vertrag"] { display: inline; }
.dl-kform[data-art-mode="angebot"] .dl-fgrp.bank .dl-fieldpick { opacity: .45; }
.dl-kform[data-art-mode="angebot"] .dl-fgrp.bank .req { display: none; }
.dl-fgrp.bank { padding-top: 8px; border-top: 1px dashed var(--line); }
.ds-gap .req, .dl-kform .req { color: #b42323; font-weight: 700; margin-left: 2px; background: none; border: 0; padding: 0; }
.ds-gap.auto { border-style: dashed; color: var(--muted); }
@media (max-width: 520px) { .dl-artrow { flex-wrap: wrap; } .dl-artrow select { flex-basis: 100%; } }
.dx-art.vertrag { background: #e3f3e9; color: #17663a; } .dx-art.wahl { background: var(--sunken); color: var(--text-2); }
:root[data-theme="dark"] .dx-art.vertrag { background: #14301e; color: #6fd296; }
/* 0.238 Weg oben immer mittig – auch mit 3 Schritten (Angebot) */
.dl-way-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 150px); justify-content: center; }
.pl-units { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 0.241 Posteingang: Abrufstand */
.ingest-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.ingest-state svg { color: var(--ok); } .ingest-state b { color: var(--text-2); }
.ingest-state.bad { padding: 8px 12px; border-radius: 8px; background: var(--err-bg); color: var(--err); } .ingest-state.bad svg, .ingest-state.bad b { color: var(--err); }
/* 0.242 Posteingang: „Ticket verknüpfen / anlegen“ passt in die Spalte (breiter, darf zweizeilig umbrechen) */
@media (min-width: 901px) {
  .inbox-row:has(> .inbox-tkt), .inbox-head:has(> .inbox-tkt) { grid-template-columns: 28px 34px 70px minmax(110px, 170px) minmax(160px, 1fr) minmax(100px, 150px) minmax(90px, 130px) 158px 100px; }
  .inbox-row .row-ticket { white-space: normal; line-height: 1.2; border-radius: 12px; padding: .25rem .55rem; text-align: left; }
  .inbox-row .inbox-tkt { overflow: hidden; }
}
@media (min-width: 1600px) {
  .inbox-row:has(> .inbox-tkt), .inbox-head:has(> .inbox-tkt) { grid-template-columns: 28px 34px 70px minmax(130px, 190px) minmax(200px, 1fr) 170px 80px 160px 215px 110px; }
  .inbox-row .row-ticket { white-space: nowrap; border-radius: 999px; }
}
/* 0.242 Outlook-Ordner: Spalte „Ticket“ (verknüpfen / anlegen) */
@media (min-width: 901px) {
  .inbox-folder .inbox-row:has(> .inbox-tkt), .inbox-folder .inbox-head:has(> .inbox-tkt) { grid-template-columns: 28px 34px 84px minmax(150px, 230px) minmax(0, 1fr) 215px; column-gap: .8rem; }
  .inbox-folder .inbox-row > .inbox-mtime, .inbox-folder .inbox-row > .inbox-meta { display: none; }
}
@media (max-width: 900px) { /* Outlook-Ordner am Handy: Name, Zeit / Betreff / Anhang, Ticket */
  .inbox-folder .inbox-row:has(> .inbox-tkt) { grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "ico from att mt" "ico subj subj subj" "ico tkt tkt tkt"; row-gap: .15rem; }
  .inbox-folder .inbox-row > .inbox-ico { grid-area: ico; } .inbox-folder .inbox-row > .inbox-from { grid-area: from; min-width: 0; }
  .inbox-folder .inbox-row > .inbox-subj { grid-area: subj; } .inbox-folder .inbox-row > .inbox-att { grid-area: att; }
  .inbox-folder .inbox-row > .inbox-tkt { grid-area: tkt; justify-self: end; } .inbox-folder .inbox-row > .inbox-mtime { grid-area: mt; display: block; justify-self: end; }
  .inbox-folder .inbox-row > .inbox-meta, .inbox-folder .inbox-row > .inbox-date { display: none; }
  .inbox-folder .inbox-from small { display: none; }
}
@media (min-width: 901px) { .nav-version { display: none; } } /* 0.244: Version am PC nur oben rechts */
/* 0.245 Ticket aus Mail: erst wählen (verknüpfen / neu), eigene Zurück-Links, Frist-Knöpfe luftiger, Handwerker neu erfassen, Kurzfassung */
.container:has(.nt-back) > .back-link[data-back] { display: none; }
.nt-back { display: inline-flex; max-width: 760px; }
.container > .nt-back { margin-left: max(0px, calc((100% - 760px) / 2)); }
.nt-wahl { max-width: 760px; margin: 18px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nt-wahl-b { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.nt-wahl-b:hover, .nt-wahl-b:focus-visible { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); outline: none; text-decoration: none; }
.nt-wahl-b b { font-size: 17px; }
.nt-wahl-b > span:not(.nt-wahl-ic):not(.nt-wahl-go) { font-size: 14px; color: var(--muted); }
.nt-wahl-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #e8eefc; color: #1f4fd1; margin-bottom: 4px; }
.nt-wahl-go { margin-top: auto; padding-top: 8px; font-weight: 650; color: var(--link); font-size: 14px; }
@media (max-width: 640px) { .nt-wahl { grid-template-columns: 1fr; } .nt-wahl-b { padding: 16px; } }
.nt-link { max-width: 760px; margin: 14px auto 18px; }
.nt-link-alt { margin: 12px 0 0; color: var(--muted); }
.nt-due { max-width: none; display: block; }
.nt-due .due-row { max-width: 220px; margin-top: 4px; }
.nt-due .due-presets { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; max-width: 640px; }
.nt-due .due-presets button { padding: .5rem .3rem; font-size: .85rem; gap: 2px; }
.nt-due .due-presets button small { font-size: .74rem; }
@media (max-width: 640px) { .nt-due .due-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nt-due .due-row { max-width: none; } }
.ext-form { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 .8rem; border: 1px solid var(--line); border-radius: 10px; padding: .4rem .8rem .2rem; margin: .4rem 0 .6rem; }
.ext-form legend { font-size: 13px; font-weight: 700; padding: 0 .3rem; }
.ext-form .w6 { grid-column: span 6; } .ext-form .w3 { grid-column: span 3; } .ext-form .w2 { grid-column: span 2; } .ext-form .w1 { grid-column: span 1; }
@media (max-width: 640px) { .ext-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ext-form .w6, .ext-form .w3, .ext-form .w2 { grid-column: 1 / -1; } .ext-form .w1 { grid-column: span 1; } .ext-form .w1 + .w2 { grid-column: span 2; } }
.nt-simp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 6px; }
.nt-simp .muted { flex: 1 1 260px; }
/* 0.246 Einheiten-Auswahl in „Offene Angaben“ breiter; Kontakt bearbeiten mit Suche und „neu anlegen“ */
.tv-todo-a select.tv-unit-sel { min-width: 380px; max-width: 520px; }
@media (max-width: 760px) { .tv-todo-a select.tv-unit-sel { min-width: 0; width: 100%; max-width: none; } .tv-todo-a:has(.tv-unit-sel), .tv-todo-a:has(.tv-unit-sel) form { width: 100%; } }
.rep-search { display: flex; flex-direction: column; gap: 6px; }
.rep-picked { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--s-erledigt-bg); }
.rep-new { border: 1px dashed var(--line-2); border-radius: 10px; padding: 6px 10px; }
.rep-new summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--link); }
.rep-new[open] { padding-bottom: 8px; }
.rep-new .grid3, .rep-new .grid2 { grid-template-columns: 1fr; }
.rep-or { margin-top: 2px; }
.rep-direct { display: flex; flex-direction: column; gap: 8px; }
.rep-direct[hidden] { display: none; }

/* IDEE.Portal: Weg zurück zur Homepage im Kopf */
.public-head-end { display: flex; align-items: center; gap: .6rem; }
.public-home { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding: 0 .85rem; border: 1px solid #343842; border-radius: 99px; color: var(--header-ink); font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.public-home:hover, .public-home:focus-visible { background: var(--header-hover); text-decoration: none; }
@media (max-width: 420px) { .public-home-long { display: none; } .public-home { padding: 0 .7rem; } }

/* IDEE.Portal: Auswahl Mieter / Eigentümer im Formular */
.role-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; }
.role-opt { margin: 0; cursor: pointer; }
.role-opt input { position: absolute; opacity: 0; pointer-events: none; }
.role-opt > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; row-gap: .1rem; align-items: center; height: 100%; padding: .85rem 1rem; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .15s; }
.role-opt > span svg { grid-row: span 2; }
.role-opt strong { font-size: 1.02rem; color: var(--text); }
.role-opt small { color: var(--text-2); font-size: .86rem; font-weight: 400; }
.role-opt > span svg { color: var(--text); }
.role-opt:hover > span { border-color: var(--line-2); }
.role-opt input:checked + span { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.role-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.role-opt.field-missing > span { border-color: #d32f2f; }

/* IDEE.Portal: Allgemeine Anfrage – zuerst die passenden Wege (Portal, Angebot) */
.inq-ways { display: grid; gap: .6rem; margin: .4rem 0 .9rem; }
.inq-way { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color .15s; }
.inq-way::after { content: "→"; color: var(--muted); font-weight: 600; }
.inq-way:hover, .inq-way:focus-visible { border-color: var(--text); text-decoration: none; }
.inq-way > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); }
.inq-way strong { display: block; font-size: .98rem; }
.inq-way small { display: block; color: var(--text-2); font-size: .86rem; line-height: 1.4; margin-top: .1rem; }

/* Kundenseiten: Schrittanzeige nur schwarz-weiß. Erledigt und kommend grau, aktuell schwarz mit Pille „Sie sind dran“ (schwarz) bzw. „Wir sind dran“ (weiß) */
body.public.kunde .dl-way-steps li .dl-way-who { background: none; color: var(--muted); font-weight: 600; }
body.public.kunde .dl-way-steps li:not(.cur) .dl-way-t b { color: var(--muted); font-weight: 600; }
body.public.kunde .dl-way-steps li:not(.cur) .dl-way-n { background: var(--surface); border-color: var(--line-2); color: var(--muted); }
body.public.kunde .dl-way-steps li.done .dl-way-n { color: var(--text-2); border-color: var(--muted); }
body.public.kunde .dl-way-steps li.done:not(:last-child)::after { background: var(--muted); }
body.public.kunde .dl-way-steps li.cur .dl-way-n { background: #151515; border-color: #151515; color: #fff; box-shadow: 0 0 0 5px rgba(0,0,0,.1); }
body.public.kunde .dl-way-steps li.cur .dl-way-t b { color: #151515; font-weight: 700; }
body.public.kunde .dl-way-steps li.cur .dl-way-who, body.public.kunde .dl-way-pill { padding: 2px 10px; border: 1.5px solid #151515; background: #151515; color: #fff; font-weight: 700; }
body.public.kunde .dl-way-steps li.cur.w-wir .dl-way-who, body.public.kunde .dl-way-now.w-wir .dl-way-pill { background: #fff; color: #151515; }
body.public.kunde .dl-way-now b, body.public.kunde .dl-way-now.w-wir b, body.public.kunde .dl-way-now.w-fertig b { color: #151515; }
@media (max-width: 520px) { body.public.kunde .dl-way-steps li.cur .dl-way-n { box-shadow: 0 0 0 4px rgba(0,0,0,.1); } }
.inq-step { margin: .2rem 0 -.2rem; }
.inq-back { margin: 1rem 0 0; } .inq-back a { color: var(--text-2); font-weight: 600; }