/* ==========================================================================
   Kernwerk – Design „Kacheln“ (ab 0.2.4)
   Schmale dunkle Symbolleiste, Inhalte als abgerundete Kacheln auf kühlem Grau,
   ein Akzent (Violett) für Hauptaktionen, Links und „jetzt wichtig“.
   Schrift: Plus Jakarta Sans (lokal eingebunden, kein Abruf bei Google, SIL OFL).
   Klassennamen sind die der bisherigen Programme – Templates bleiben gültig.
   ========================================================================== */

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

:root {
  /* Grundpalette */
  --paper: #eceef3;
  --surface: #ffffff;
  --surface-2: #f3f4f8;
  --ink: #1b1d29;
  --ink-2: #555a70;
  --ink-3: #767b92;
  --line: #e7e9f0;
  --line-strong: #d3d6e0;
  --navy: #1b1d29;          /* Symbolleiste, dunkle Kacheln */
  --navy-deep: #12131c;
  --rail-2: #2d3042;        /* aktiver Punkt in der Leiste */
  --rail-ink: #a9adc2;
  --blue: #4a3be0;          /* Links, aktive Zustände */
  --blue-soft: #ecebff;
  --accent: #5b4bff;        /* Hauptknöpfe, Fortschritt, „jetzt“ */
  --accent-deep: #4a3be0;
  --accent-ink: #ffffff;
  --signal: var(--accent);
  --signal-ink: var(--accent-ink);
  --signal-soft: #ecebff;
  --ok: #0b7550;   --ok-soft: #dcf4ea;
  --warn: #8f5200; --warn-soft: #ffefd6; --warn-line: #f0a43a;
  --bad: #b4232a;  --bad-soft: #ffe8e8; --bad-fill: #ff5c5c;
  --sheet: #fbfcfe;         /* Zeichenfläche (Netzwerkplan bleibt immer hell) */

  /* Namen aus den bisherigen Programmen (Templates nutzen sie inline) */
  --canvas: var(--paper);
  --card: var(--surface);
  --rule: var(--line);
  --brand: var(--blue);
  --brand-2: var(--navy);
  --brand-soft: var(--blue-soft);
  --teal: #0f8b8d;
  --red: var(--bad);   --red-soft: var(--bad-soft);
  --amber: var(--warn-line); --amber-soft: var(--warn-soft);
  --green: var(--ok);  --green-soft: var(--ok-soft);

  --r-s: 9px;
  --r: 12px;
  --r-l: 18px;
  --radius: var(--r-l);
  --shadow: 0 1px 2px rgba(27, 29, 41, 0.04);
  --shadow-pop: 0 18px 50px rgba(27, 29, 41, 0.22);
  --nav-w: 84px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1017; --surface: #1a1c27; --surface-2: #232634;
    --ink: #eceef6; --ink-2: #aeb2c7; --ink-3: #8a8fa8;
    --line: #2a2d3c; --line-strong: #3a3e52;
    --navy: #07080d; --navy-deep: #000; --rail-2: #262938;
    --blue: #aea6ff; --blue-soft: #2a2752;
    --accent: #7b6dff; --accent-deep: #6a5cf5;
    --signal-soft: #2a2752;
    --ok: #4cc59f; --ok-soft: #123a30;
    --warn: #f0b35a; --warn-soft: #3d2c10; --warn-line: #f0b35a;
    --bad: #ff8a80; --bad-soft: #3f1a1a; --bad-fill: #ff6b6b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font: 15px/1.55 var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--signal); color: var(--signal-ink); }

/* ---------- Seitenleiste ---------- */
.side {
  position: fixed; inset: 0 auto 0 0; width: var(--nav-w); z-index: 20;
  padding: 18px 12px 14px; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; gap: 1px; overflow-y: auto;
}
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: #fff; text-decoration: none; }
.side .brand .logo, .brand-solo .logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 750; font-size: 1rem; 
  box-shadow: inset 0 -3px 0 var(--signal);
}
.side .brand b { display: block; font-weight: 700;  line-height: 1.1; font-size: 1.02rem; }
.side .brand small { display: block; font-size: 0.75rem; opacity: 0.68; font-weight: 500; }
.side .group { font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.5); padding: 14px 12px 4px; letter-spacing: 0.01em; }
.side a:not(.brand) {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--r);
  color: rgba(255, 255, 255, 0.78); font-weight: 500; font-size: 0.94rem; text-decoration: none;
}
.side a:not(.brand):hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.side a.on { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; font-weight: 600; }
.side a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side .badge { background: var(--signal); color: var(--signal-ink); }
.side .who { margin-top: auto; padding: 14px 12px 2px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.85rem; display: flex; flex-direction: column; gap: 1px; }
.side .who span { font-weight: 600; }
.side .who small { color: rgba(255, 255, 255, 0.62); }
.side .who a, .side .who button.link { color: #fff; text-decoration: underline; text-underline-offset: 3px; padding: 0; display: inline; font-weight: 500; }
.side .who a:hover, .side .who button.link:hover { background: none; }
.side .who form { margin: 4px 0; }
.side .who .version { font-size: 0.72rem; margin-top: 6px; }

/* Mandanten-Umschalter (Cockpit) und Kunden-Kopf im Portal */
.switcher { display: flex; flex-direction: column; gap: 3px; margin: -6px 0 6px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.switcher form { display: contents; }
.mandant {
  display: grid; grid-template-columns: 10px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  text-align: left; width: 100%; padding: 7px 10px; border-radius: var(--r); border: 1px solid transparent;
  background: none; color: rgba(255, 255, 255, 0.7); font-weight: 500; height: auto;
}
.mandant i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.mandant span { font-size: 0.9rem; color: #fff; font-weight: 600; line-height: 1.25; }
.mandant small { font-size: 0.74rem; color: rgba(255, 255, 255, 0.6); }
button.mandant { cursor: pointer; }
button.mandant:hover { background: rgba(255, 255, 255, 0.08); }
.mandant.on { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); }

/* ---------- Hauptbereich ---------- */
main.with-nav { margin-left: var(--nav-w); padding: 26px 40px 80px; max-width: calc(var(--nav-w) + 1220px); }
main.with-nav.plan { max-width: none; }
main.solo { min-height: 100vh; padding: 56px 20px; display: flex; justify-content: center; align-items: flex-start; background: var(--navy); }
main.solo > .card, main.solo > .portal-page > .card { box-shadow: var(--shadow-pop); border: 0; }

/* ---------- Schrift ---------- */
h1 { font-size: 1.7rem; font-weight: 680;  letter-spacing: -0.015em; margin: 0 0 4px; line-height: 1.18; }
h2 { font-size: 1.06rem; font-weight: 650; margin: 0 0 12px; line-height: 1.3; }
h3 { font-size: 0.94rem; font-weight: 650; margin: 18px 0 8px; }
p { margin: 0 0 12px; max-width: 74ch; }
small { font-size: 0.84rem; }
.muted { color: var(--ink-2); }
.hint { margin-top: 12px; font-size: 0.88rem; color: var(--ink-2); }
.pre { white-space: pre-wrap; }
header.page { margin-bottom: 22px; }
header.page h1 + p, header.page p.muted { margin-top: 2px; }
section { margin-bottom: 24px; }
.error { color: var(--bad); font-weight: 600; }
.notice { padding: 12px 16px; border-radius: var(--r); background: var(--blue-soft); color: var(--blue); font-weight: 500; border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent); }
.warn { padding: 12px 16px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-weight: 500; border: 1px solid color-mix(in srgb, var(--warn-line) 35%, transparent); }
small.note { color: var(--warn); }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---------- Kopf einer Übersicht ---------- */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.hero h1 { margin-bottom: 2px; font-size: 2rem; }
.hero p { margin: 0; }

/* ---------- Kacheln ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
.tile { background: var(--surface); padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); border-right: 1px solid var(--line); position: relative; text-decoration: none; }
.tile:last-child { border-right: 0; }
a.tile:hover { background: var(--surface-2); text-decoration: none; }
.tile .n { font-size: 1.85rem; font-weight: 720;  letter-spacing: -0.02em; line-height: 1.1; }
.tile .l { color: var(--ink-2); font-size: 0.86rem; }
.tile.red .n { color: var(--bad); }
.tile.amber .n { color: var(--warn); }
.tile.green .n { color: var(--ok); }
.tile.brand .n { color: var(--blue); }
.tile.red::before, .tile.amber::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bad); }
.tile.amber::before { background: var(--warn-line); }
/* Hinweis-Kachel über die ganze Breite */
.wide-tile { display: flex; flex-direction: row; align-items: center; gap: 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: 14px 18px; }
.wide-tile .n { font-size: 1.6rem; min-width: 1.4em; text-align: center; }
.wide-tile .l { font-size: 0.93rem; max-width: 90ch; color: var(--ink); }
.wide-tile.amber { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-line) 40%, transparent); }
.wide-tile.red { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.wide-tile.brand { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }
.wide-tile::before { display: none; }
/* Kacheln als Ordner (Tickets) */
.tiles.folders .tile { box-shadow: inset 4px 0 0 var(--c, var(--line)); }
.tiles.folders .tile.on { background: var(--blue-soft); }
.tiles.folders .tile .n { font-size: 1.5rem; }
.tiles.folders .tile .n small { font-size: 0.7rem; vertical-align: middle; margin-left: 6px; }

/* Fortschritt (Einrichtung) */
.progress { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px 22px; box-shadow: var(--shadow); margin-bottom: 24px; }
.progress .bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 10px 0 12px; }
.progress .bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.progress ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px 20px; font-size: 0.9rem; }
.progress li { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
.progress li.ok { color: var(--ink); }
.progress li .tick { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; font-size: 0.68rem; }
.progress li.ok .tick { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ---------- Fristenliste: die Ampel ist die Information ---------- */
h2.overdue { color: var(--bad); }
h2.soon { color: var(--warn); }
h2.upcoming { color: var(--ok); }
h2.later { color: var(--ink-2); }
.items { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
.item { display: grid; grid-template-columns: 4px 104px 1fr auto auto; gap: 0 18px; align-items: start; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item .dot { width: 4px; height: 100%; min-height: 22px; border-radius: 0 3px 3px 0; background: var(--line); }
.item.overdue .dot { background: var(--bad); }
.item.soon .dot { background: var(--warn-line); }
.item.upcoming .dot { background: var(--ok); }
.item .date { white-space: nowrap; font-weight: 650; }
.item .body { display: flex; flex-direction: column; min-width: 0; }
.item .body small { color: var(--ink-2); max-width: 72ch; }
.item .body small.law { font-size: 0.78rem; color: var(--ink-3); }
.item .left { white-space: nowrap; font-size: 0.8rem; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.item.overdue .left { background: var(--bad-soft); color: var(--bad); }
.item.soon .left { background: var(--warn-soft); color: var(--warn); }
.item.upcoming .left { background: var(--ok-soft); color: var(--ok); }
.item .actions { display: flex; gap: 12px; }
.items.dim { opacity: 0.65; }

/* ---------- Karten, Tabellen ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; box-shadow: var(--shadow); overflow-x: auto; }
.card.narrow { width: 100%; max-width: 420px; }
.card > h2:first-child { margin-top: 0; }
.card h2 .more { float: right; font-size: 0.84rem; font-weight: 550; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-bottom: 18px; }
.two > .card, .two > section { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: 0.78rem; color: var(--ink-3); font-weight: 600; background: var(--surface); white-space: nowrap; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
table td small, table td .muted { font-size: 0.84rem; }
.card table { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.card table th { background: transparent; padding-top: 0; }
.card th, .card td { padding-left: 10px; padding-right: 10px; }
td code { font-size: 0.82em; padding: 1px 5px; }
.card table td:first-child, .card table th:first-child { padding-left: 0; }
.card table td:last-child, .card table th:last-child { padding-right: 0; }
.card table tbody tr:hover td { background: transparent; }
tr.dim { opacity: 0.55; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 7px 22px; margin: 0; }
dl.facts dt { color: var(--ink-2); }
dl.facts dd { margin: 0; }
dl.facts dd.strong { font-weight: 700; color: var(--ink); }

/* ---------- Formulare ---------- */
label { display: flex; flex-direction: column; gap: 5px; font-size: 0.84rem; font-weight: 550; color: var(--ink-2); }
input, select, textarea {
  font: inherit; font-size: 0.95rem; color: var(--ink); padding: 8px 11px; min-height: 38px;
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface);
}
textarea { line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
input[type=checkbox], input[type=radio] { min-height: 0; width: 17px; height: 17px; accent-color: var(--accent); padding: 0; }
input[type=file] { padding: 6px; background: var(--surface-2); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: var(--r-s); padding: 5px 10px; margin-right: 10px; cursor: pointer; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.grid .wide { grid-column: 1 / -1; }
.grid > div { grid-column: 1 / -1; }
label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); grid-column: 1 / -1; font-weight: 450; font-size: 0.93rem; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.inline { display: inline; }
form.inline button { padding: 0; }

/* ---------- Knöpfe ---------- */
button, .button {
  font: inherit; font-size: 0.93rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 15px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
button:hover, .button:hover { border-color: var(--ink-3); text-decoration: none; background: var(--surface); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover, .button.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.primary, :root:not([data-theme="light"]) .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
}
button.link { border: 0; background: none; padding: 0; min-height: 0; color: var(--blue); font-weight: 550; display: inline; }
button.link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
button.link.danger, a.danger, .danger { color: var(--bad); }
.hero .button, header.page > .button { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.hero .button:hover, header.page > .button:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------- Kleine Marken ---------- */
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
.pill.green { background: var(--ok-soft); color: var(--ok); }
.pill.amber { background: var(--warn-soft); color: var(--warn); }
.pill.red { background: var(--bad-soft); color: var(--bad); }
.pill.brand { background: var(--blue-soft); color: var(--blue); }
.badge { display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--signal-ink); background: var(--signal); border-radius: 999px; padding: 1px 8px; margin-left: auto; }
.dot-c { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--blue)); margin-right: 8px; vertical-align: middle; }
code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; color: var(--ink); }
code.url { display: block; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-s); word-break: break-all; font-size: 0.86rem; }
pre { font-family: var(--mono); font-size: 0.85rem; background: #141c42; color: #e6eaf8; padding: 14px 16px; border-radius: var(--r); overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }
.qr svg { width: 210px; height: 210px; margin: 8px auto 12px; display: block; background: #fff; border-radius: var(--r); padding: 6px; }

/* ---------- Reiter / Monate / Chips ---------- */
.months, .chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; background: var(--surface-2); padding: 4px; border-radius: var(--r); width: fit-content; max-width: 100%; }
.month, .chips a { padding: 5px 12px; border-radius: 7px; color: var(--ink-2); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.month:hover, .chips a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); text-decoration: none; }
.month.on, .chips a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.month.locked:not(.on) { color: var(--ok); }
.month.empty { opacity: 0.45; }
.month.inbox b { background: var(--signal); color: var(--signal-ink); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.months.years { margin-bottom: 8px; }
header.page nav.chips { margin: 8px 0 10px; }
.tags a { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 0.76rem; font-weight: 600; margin: 0 4px 4px 0; }

/* ---------- Suche oben ---------- */
.topsearch { display: flex; gap: 10px; margin-bottom: 22px; }
.topsearch input { flex: 1; max-width: 560px; padding-left: 36px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%237c86a6' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }

/* ---------- Belege / Vorschau ---------- */
.drop { border: 2px dashed var(--line-strong); box-shadow: none; background: var(--surface); }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.preview iframe, .preview img { width: 100%; height: 640px; border: 0; border-radius: var(--r); background: var(--surface-2); object-fit: contain; }
.preview img { height: auto; max-height: 640px; }

/* ---------- Bank, Personal, TOM ---------- */
table.bank td { vertical-align: top; }
tr.tx.offen td:first-child, tr.tx.fehlt td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
tr.tx.zugeordnet td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.tx.kein_beleg td:first-child { box-shadow: inset 3px 0 0 var(--line-strong); }
td.pos { color: var(--ok); font-weight: 650; }
td.neg { font-weight: 650; }
table.payroll td, table.payroll th { padding: 8px 6px; font-size: 0.88rem; }
table.tomtab td { padding: 6px 8px; font-size: 0.9rem; }
table.tomtab td.lvl { width: 18px; font-size: 1rem; color: var(--warn); }
table.tomtab td.state { width: 460px; white-space: nowrap; }
table.tomtab td.state select { width: 130px; }
table.tomtab td.state input[type=text], table.tomtab td.state input:not([type]) { width: 190px; }
table.tomtab td.state input[type=date] { width: 130px; }
tr.tom.umgesetzt td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.tom.geplant td:first-child { box-shadow: inset 3px 0 0 var(--warn-line); }
tr.tom.nicht { opacity: 0.5; }

/* ---------- Zugänge (aufklappbar) ---------- */
details.auth { margin-bottom: 10px; padding: 0; }
details.auth summary { cursor: pointer; padding: 14px 20px; display: flex; gap: 20px; align-items: baseline; list-style: none; }
details.auth summary::-webkit-details-marker { display: none; }
details.auth summary .name { font-weight: 650; min-width: 260px; }
details.auth[open] summary { border-bottom: 1px solid var(--line); }
details.auth form, details.auth dl { padding: 18px 20px; }
details.inline-edit summary { cursor: pointer; color: var(--blue); list-style: none; font-weight: 550; }
details.inline-edit summary::-webkit-details-marker { display: none; }
details.inline-edit[open] { background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; display: block; min-width: 420px; }
details.inline-edit[open] summary { font-weight: 650; }
.rights { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); }
.rights label.check { grid-column: auto; font-size: 0.9rem; }
.rights label.check b { font-weight: 650; }

/* ---------- Kundenportal ---------- */
.portal-box { background: var(--navy); color: #fff; border-radius: var(--r-l); padding: 20px 22px; box-shadow: var(--shadow); border-top: 4px solid var(--signal); }
.portal-box h2 { color: #fff; margin-bottom: 6px; }
.portal-box p { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; }
.portal-box a, .portal-box summary { color: #fff; }
.portal-box code.url { background: rgba(255, 255, 255, 0.12); color: #fff; margin: 10px 0 14px; }
.portal-box .button, .portal-box button { border-color: rgba(255, 255, 255, 0.5); color: #fff; background: transparent; }
.portal-box .button:hover, .portal-box button:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.portal-page { width: 100%; max-width: 720px; }
.portal-page .brand-line { color: rgba(255, 255, 255, 0.82); font-weight: 600; margin-bottom: 10px; }
.brand-solo { display: flex; align-items: center; gap: 10px; font-weight: 700;  font-size: 1.05rem; color: var(--ink); margin-bottom: 14px; }
.brand-solo .logo { background: var(--navy); }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.choice a { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: 20px 22px; color: var(--ink); box-shadow: inset 0 4px 0 var(--blue), var(--shadow); text-decoration: none; }
.choice a.order { box-shadow: inset 0 4px 0 var(--warn-line), var(--shadow); }
.choice a.files { box-shadow: inset 0 4px 0 var(--teal), var(--shadow); }
.choice a:hover { border-color: var(--line-strong); text-decoration: none; }
.choice a b { font-size: 1.08rem; font-weight: 650; }
.choice a span { color: var(--ink-2); font-size: 0.9rem; }

/* Ticketarten zur Auswahl */
.types { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 4px; }
.type-card { position: relative; display: flex; flex-direction: column; gap: 5px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: inset 0 4px 0 var(--c); border-radius: var(--r-l); padding: 16px 18px; cursor: pointer; color: var(--ink); font-weight: 400; }
.type-card input { position: absolute; opacity: 0; }
.type-card:has(input:checked) { border-color: var(--c); box-shadow: inset 0 4px 0 var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.type-card .tc-head { display: flex; flex-direction: column; }
.type-card .tc-head b { font-size: 1.04rem; font-weight: 650; }
.type-card .tc-head small { color: var(--c); font-weight: 650; font-size: 0.8rem; }
.type-card .tc-desc { color: var(--ink-2); font-size: 0.87rem; }
.type-card .tc-hint { color: var(--warn); font-size: 0.85rem; font-weight: 650; }

/* Ordner-Liste */
.folder-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.folder-list a, .folder-list .folder-chip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 11px; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink); font-size: 0.86rem; font-weight: 550; text-decoration: none; }
.folder-list .dot-c { margin-right: 6px; }
.folder-list a b { margin-left: 6px; background: var(--surface); border-radius: 999px; padding: 0 7px; font-size: 0.76rem; }
.folder-list a:hover { background: var(--blue-soft); text-decoration: none; }
.quota { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 6px 0 12px; }
.quota i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

/* ---------- Runbooks (Markdown) ---------- */
.md { max-width: 76ch; line-height: 1.65; }
.md h1 { font-size: 1.35rem; margin-top: 22px; } .md h2 { font-size: 1.12rem; margin-top: 22px; } .md h3 { margin-top: 18px; }
.md table { box-shadow: none; margin: 12px 0; }
.md th { background: var(--surface-2); }
.md blockquote { border-left: 3px solid var(--signal); background: var(--signal-soft); margin: 12px 0; padding: 8px 16px; border-radius: 0 var(--r-s) var(--r-s) 0; }
.md img { max-width: 100%; border-radius: var(--r); }
.md-help { font-size: 0.84rem; color: var(--ink-2); margin-top: 10px; }
textarea.code { font-family: var(--mono); font-size: 0.88rem; min-height: 420px; }

/* ---------- Netzwerkplan (Zeichenfläche bleibt hell) ---------- */
.plan-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.plan-bar .seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r); padding: 3px; gap: 2px; }
.plan-bar .seg button { border: 0; border-radius: 7px; min-height: 30px; padding: 0 12px; color: var(--ink-2); background: none; font-weight: 600; }
.plan-bar .seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.plan-bar select, .plan-bar input { min-height: 34px; padding: 5px 10px; }
.plan-bar .sp { flex: 1; }
.plan-wrap { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.plan-wrap svg { display: block; width: 100%; height: auto; background: var(--sheet); user-select: none; touch-action: none; }
.plan-wrap svg.connect { cursor: crosshair; }
.plan-hint { position: absolute; left: 14px; bottom: 10px; font-size: 0.8rem; color: #4b5579; background: rgba(255, 255, 255, 0.9); padding: 3px 10px; border-radius: 999px; pointer-events: none; }
.plan-side { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.plan-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; }
.plan-legend li { display: flex; align-items: center; gap: 8px; }
.plan-legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.plan-legend .ln { width: 28px; height: 0; border-top: 3px solid var(--ink-2); flex: none; }
.plan-legend .ln.wifi { border-top-style: dashed; }
.plan-legend .ln.wan { border-top-width: 4px; border-top-color: var(--blue); }
.plan-legend .ln.vpn { border-top-style: dotted; border-top-color: var(--teal); }
.plan-legend .ln.usb { border-top-color: var(--warn-line); }
#linkpanel { display: none; }
#linkpanel.on { display: block; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1000px) {
  .split, .plan-side { grid-template-columns: 1fr; }
  .preview iframe { height: 480px; }
}
@media (max-width: 900px) {
  table.tomtab td.state { white-space: normal; width: auto; }
}
@media (max-width: 860px) {
  .side {
    position: sticky; top: 0; inset: auto; width: auto; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center;
    gap: 2px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .side::-webkit-scrollbar { display: none; }
  .side .brand { padding: 0 8px 0 2px; flex: none; }
  .side .brand b, .side .brand small, .side .group, .switcher { display: none; }
  .side a:not(.brand) { flex: none; flex-direction: column; gap: 2px; padding: 6px 9px; font-size: 0.68rem; }
  .side a svg { width: 20px; height: 20px; }
  .side .who { margin: 0 0 0 6px; border: 0; padding: 0 6px; flex: none; white-space: nowrap; }
  .side .who > span, .side .who small { display: none; }
  .side .who form { margin: 0; }
  main.with-nav { margin: 0; padding: 18px 16px 60px; }
  main.solo { padding: 28px 14px; }
  h1, .hero h1 { font-size: 1.4rem; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { border-bottom: 1px solid var(--line); }
  .tile:nth-child(2n) { border-right: 0; }
  .item { grid-template-columns: 4px 1fr; padding-right: 14px; }
  .item .date, .item .body, .item .left, .item .actions { grid-column: 2; }
  .item .left { justify-self: start; margin-top: 4px; }
  .grid { grid-template-columns: 1fr; }
  .two { grid-template-columns: minmax(0, 1fr); }
  details.auth summary { flex-direction: column; gap: 4px; }
  details.inline-edit[open] { min-width: 0; }
  table { display: block; overflow-x: auto; }
  .card table { display: table; }
  .card { padding: 16px; overflow-x: auto; }
  th, td { padding: 9px 10px; }
}

/* ---------- Druck ---------- */
@media print {
  body, main.with-nav { background: #fff; }
  .side, .topsearch, .plan-bar, .plan-legend, header.page p.row, .plan-hint, .hero .button { display: none !important; }
  main.with-nav { margin: 0; padding: 0; max-width: none; }
  .card, table, .items, .tiles, .plan-wrap { box-shadow: none; }
}

/* ==========================================================================
   Kernwerk-Bausteine
   ========================================================================== */

/* Menüpunkte, die mit einer späteren Version kommen */
.side .soon { display: flex; align-items: center; gap: 11px; padding: 7px 12px; border-radius: var(--r); color: rgba(255, 255, 255, 0.42); font-size: 0.92rem; cursor: default; }
.side .soon svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side .soon em { margin-left: auto; font-style: normal; font-size: 0.7rem; font-weight: 650; padding: 0 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.55); }

/* Meldung nach einer Aktion */
.flash { padding: 11px 16px; border-radius: var(--r); margin-bottom: 18px; font-weight: 550; border: 1px solid; }
.flash.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.flash.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }

/* Anmeldung, Einrichtung */
.card.login h1, .card.setup h1 { margin-bottom: 6px; }
.card.setup { width: 100%; max-width: 640px; box-shadow: var(--shadow-pop); border: 0; }
.code-input { font-size: 1.35rem; letter-spacing: 0.3em; text-align: center; max-width: 220px; font-variant-numeric: tabular-nums; }

/* Fahrplan */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.roadmap li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; padding: 9px 10px; border-radius: var(--r); }
.roadmap li b {  font-size: 1.02rem; color: var(--ink-3); }
.roadmap li.jetzt { background: var(--signal-soft); }
.roadmap li.jetzt b { color: var(--signal-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .roadmap li.jetzt b { color: var(--signal); } }

/* Zwei-Faktor einrichten */
.setup-2fa { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
@media (max-width: 700px) { .setup-2fa { grid-template-columns: 1fr; } }

/* Aufklappbare Karten: Aktionen unten */
details.auth .actions-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-l) var(--r-l); }
details.auth summary .grow-right { margin-left: auto; font-size: 0.86rem; }
details.auth summary .name { min-width: 0; flex: 0 1 auto; }
details.auth summary { flex-wrap: wrap; align-items: center; }
fieldset.rights { margin: 0; grid-column: 1 / -1; }
fieldset.rights legend { padding: 0 4px; }
.logo-preview { max-height: 46px; max-width: 200px; background: #fff; padding: 4px 8px; border-radius: var(--r-s); border: 1px solid var(--line); }

/* Update */
pre.changelog { white-space: pre-wrap; max-height: 360px; overflow-y: auto; }
.card.ready { box-shadow: inset 4px 0 0 var(--signal), var(--shadow); }

/* Protokoll */
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filterbar input[type=search] { min-width: 220px; }
table.protokoll td { padding-top: 8px; padding-bottom: 8px; }
table.protokoll tr.st-fehler td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.protokoll tr.st-warnung td:first-child { box-shadow: inset 3px 0 0 var(--warn-line); }
.pager { margin-top: 12px; justify-content: center; }
.small { font-size: 0.85rem; }

/* Formulare in schmalen Karten nie breiter als die Karte */
.grid > *, .stack > *, .row > label { min-width: 0; }
.grid label > input:not([type=checkbox]):not([type=radio]):not([type=color]), .grid label > select, .grid label > textarea,
.stack label > input:not([type=checkbox]):not([type=radio]), .stack label > select, .stack label > textarea { width: 100%; }
input[type=color] { padding: 3px; height: 38px; }
.mandant i { border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.tile .n.wort { font-size: 1.25rem; line-height: 1.6; }
@media (max-width: 860px) { .side .soon { display: none; } }

/* Admin wie in Kundenwerk: aufklappbare Einträge innerhalb einer Karte */
.card details.auth { margin: 0 -20px; border-top: 1px solid var(--line); border-radius: 0; }
.card details.auth:last-of-type { margin-bottom: 4px; }
.card details.auth summary { padding: 13px 20px; }
.card details.auth[open] { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.card details.auth form.grid { padding: 16px 20px 20px; }
.card details.auth .actions-bar { border-radius: 0; }
.card > p.muted + details.auth { margin-top: 10px; }
summary.link-summary { cursor: pointer; color: var(--blue); font-weight: 550; margin: 6px 0; }
.inline-label { flex-direction: row; align-items: center; gap: 8px; }
.card > table { margin-top: 14px; border: 0; box-shadow: none; }

/* ==========================================================================
   Kompakt (0.1.2) – weniger Luft, alles Wichtige auf einen Blick,
   gleiche Bedienung auf Telefon, Tablet, Laptop und großem Bildschirm.
   ========================================================================== */
:root { --nav-w: 212px; }
html { font-size: 14px; line-height: 1.5; }
main.with-nav { padding: 18px 26px 56px; max-width: calc(var(--nav-w) + 1100px); }
header.page { margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1rem; margin-bottom: 8px; }
section { margin-bottom: 14px; }
.card { padding: 14px 16px; border-radius: var(--r); }
.card + .card, .card + section, section + .card { margin-top: 10px; }
th, td { padding: 7px 10px; }
.card th, .card td { padding-left: 8px; padding-right: 8px; }
input, select, textarea { min-height: 34px; padding: 6px 10px; font-size: 0.93rem; }
input[type=color] { height: 34px; }
button, .button { min-height: 34px; padding: 0 13px; font-size: 0.9rem; }
.btn-s { min-height: 30px; padding: 0 11px; font-size: 0.86rem; }
.grid { gap: 10px 14px; }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid .wide2 { grid-column: span 2; }
.flash { padding: 8px 12px; margin-bottom: 12px; }
.warn, .notice { padding: 8px 12px; }
.hint { margin-top: 8px; font-size: 0.84rem; }
.mt { margin-top: 10px; }
.pad { padding: 12px 16px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; }
.side { padding: 14px 10px 12px; }
.side .brand { padding: 2px 8px 12px; }
.side .group { padding: 10px 10px 3px; }
.side a:not(.brand) { padding: 6px 10px; font-size: 0.9rem; gap: 9px; }
.side a svg { width: 17px; height: 17px; }
.tiles { margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tile { padding: 10px 14px; }
.tile .n { font-size: 1.45rem; }
.tile .l { font-size: 0.8rem; }
dl.facts { gap: 4px 16px; font-size: 0.92rem; }
table.dicht td { padding-top: 6px; padding-bottom: 6px; }
table.dicht tr.dim td { color: var(--ink-3); }
pre.changelog { max-height: 260px; overflow: auto; background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-s); font: 0.8rem/1.45 var(--mono); white-space: pre-wrap; margin: 6px 0 0; }

/* Aufklappkarten: zu = eine Zeile mit Status, auf = Inhalt */
details.card.fold { padding: 0; margin-bottom: 8px; overflow: visible; }
details.card.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 16px; }
details.card.fold > summary::-webkit-details-marker { display: none; }
details.card.fold > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-right: 4px; flex: none; transition: transform .15s; }
details.card.fold[open] > summary::before { transform: rotate(45deg); }
details.card.fold > summary h2 { margin: 0 6px 0 0; font-size: 0.98rem; }
details.card.fold > summary:hover { background: var(--surface-2); border-radius: var(--r); }
details.card.fold[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
details.card.fold > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.card.fold > :not(summary):first-of-type, details.card.fold > summary + * { margin-top: 12px; }
details.card.fold > :last-child { margin-bottom: 14px; }
details.card.fold > details.auth { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; border-top: 0; border-bottom: 1px solid var(--line); }
details.card.fold > details.auth:last-child { border-bottom: 0; }
details.card.fold details.auth summary { padding: 9px 16px; gap: 8px; }
details.card.fold details.auth form.grid, details.card.fold details.auth .actions-bar { padding: 12px 16px; }
details.card.fold.ready { box-shadow: inset 4px 0 0 var(--signal), var(--shadow); }
section.card.fold-static { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px 11px 31px; margin-bottom: 8px; }
section.card.fold-static h2 { margin: 0 6px 0 0; font-size: 0.98rem; }
.grow-right { margin-left: auto; }
img.logo-preview { max-height: 36px; max-width: 160px; }

/* Große Bildschirme: etwas mehr Breite nutzen, Schrift bleibt ruhig */
@media (min-width: 1600px) { main.with-nav { max-width: calc(var(--nav-w) + 1280px); } }
/* Tablet */
@media (max-width: 1100px) { .grid.g3 { grid-template-columns: 1fr 1fr; } }
/* Telefon */
@media (max-width: 860px) {
  main.with-nav { padding: 12px 10px 48px; }
  .grid.g3, .grid { grid-template-columns: 1fr; }
  .grid .wide2 { grid-column: auto; }
  details.card.fold > summary { padding: 10px 12px; }
  details.card.fold > :not(summary) { margin-left: 12px; margin-right: 12px; }
  details.card.fold details.auth summary { padding: 9px 12px; flex-direction: row; }
  details.card.fold details.auth form.grid, details.card.fold details.auth .actions-bar { padding: 10px 12px; }
  section.card.fold-static { padding: 10px 12px; }
  dl.facts { grid-template-columns: 1fr; gap: 0; }
  dl.facts dt { margin-top: 6px; font-size: 0.8rem; }
  .card table.dicht td { display: table-cell; }
  table.protokoll td:first-child { white-space: normal; }
  .side a:not(.brand) { padding: 5px 8px; }
  h1 { font-size: 1.25rem; }
}
ul.checkliste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; font-size: 0.88rem; }
ul.checkliste li { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
ul.checkliste li.ok { color: var(--ink-3); }
ul.checkliste .tick { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; font-size: 0.62rem; }
ul.checkliste li.ok .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
section.card.fold-list { padding: 0; overflow: hidden; }
section.card.fold-list > details.auth { margin: 0; border-bottom: 1px solid var(--line); }
section.card.fold-list > details.auth:last-child { border-bottom: 0; }
section.card.fold-list details.auth summary { padding: 9px 16px; gap: 8px; }
section.card.fold-list details.auth form.grid, section.card.fold-list details.auth .actions-bar { padding: 12px 16px; }
section.card.fold-list details.auth .actions-bar { border-radius: 0; }
@media (max-width: 860px) { section.card.fold-list details.auth summary { padding: 9px 12px; flex-direction: row; } }
@media (max-width: 860px) {
  table.liste-mobil, table.liste-mobil tbody { display: block; }
  table.liste-mobil tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  table.liste-mobil tr:last-child { border-bottom: 0; }
  table.liste-mobil td { display: block; border: 0; padding: 0 !important; white-space: normal; }
  table.liste-mobil td.wer { margin-left: auto; }
}
details.card.fold > table { width: calc(100% - 32px); }
@media (max-width: 860px) { details.card.fold > table { width: calc(100% - 24px); } }
/* Mandanten-Umschalter knapp: eine Zeile je Firma */
.switcher { gap: 1px; margin: -4px 0 4px; padding-bottom: 8px; }
.mandant { padding: 5px 10px; grid-template-rows: auto; }
.mandant small { display: none; }
.mandant i { grid-row: 1; }
.mandant span { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Aufklappzeilen innerhalb von Karten bekommen denselben Pfeil */
details.card.fold details.auth > summary::before, section.card.fold-list details.auth > summary::before {
  content: ""; width: 6px; height: 6px; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(-45deg); flex: none; transition: transform .15s; }
details.card.fold details.auth[open] > summary::before, section.card.fold-list details.auth[open] > summary::before { transform: rotate(45deg); }
table.protokoll.dicht td:nth-child(-n+2) { width: 1%; white-space: nowrap; padding-right: 16px; }

/* ==========================================================================
   0.2 – Kunden, Betreuung, Portal (kompakt, alle Bildschirme)
   ========================================================================== */
.mono { font-family: var(--mono); font-size: 0.92em; }
.klein { font-size: 0.84rem; }
.stapel { display: flex; flex-direction: column; gap: 10px; }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.zwei.breit-links { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
.zwei > .card, .zwei > section { margin: 0; }
.zwei aside > * + * { margin-top: 10px; }
.grid .wide3 { grid-column: 1 / -1; }
.filter { margin-bottom: 10px; }
.filter input[name=q] { flex: 1 1 200px; min-width: 0; }
.filter select { max-width: 220px; }
form.inline { display: inline; }
.notiz { white-space: pre-wrap; background: var(--surface-2); border-radius: var(--r-s); padding: 8px 10px; font-size: 0.9rem; margin-top: 10px; }
.vortext { white-space: pre-wrap; overflow-wrap: anywhere; }
code.schluessel { display: block; margin-top: 6px; padding: 8px 10px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-s); overflow-wrap: anywhere; user-select: all; }
ol.schritte { margin: 0 0 10px 18px; padding: 0; font-size: 0.9rem; }
.liste-kopf { padding: 9px 16px; font-weight: 650; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.person { margin: 0 0 8px; }
.dot-c { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: 1px; }
dl.facts.eng { grid-template-columns: 1fr; gap: 0; }
dl.facts.eng dt { margin-top: 8px; font-size: 0.78rem; }
dl.facts.eng dt:first-child { margin-top: 0; }
a.button.ghost, .button.ghost { background: transparent; }
a.button { display: inline-flex; align-items: center; text-decoration: none; }

/* Suche in der Seitenleiste */
.nav-suche { display: flex; align-items: center; gap: 6px; margin: 0 2px 6px; padding: 0 9px; border-radius: var(--r-s); background: rgba(255, 255, 255, 0.1); }
.nav-suche svg { width: 15px; height: 15px; stroke: rgba(255, 255, 255, 0.7); fill: none; stroke-width: 2; flex: none; }
.nav-suche input { background: transparent; border: 0; color: #fff; min-height: 30px; padding: 0; width: 100%; font-size: 0.88rem; }
.nav-suche input::placeholder { color: rgba(255, 255, 255, 0.6); }
.nav-suche input:focus { outline: none; }
.nav-suche:focus-within { background: rgba(255, 255, 255, 0.18); }
.side a.nav-suche-mobil { display: none; }

/* Reiter (Kundenseite, Tickets) */
nav.reiter { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 0 0 12px; }
nav.reiter::-webkit-scrollbar { display: none; }
nav.reiter a { flex: none; padding: 7px 11px; color: var(--ink-2); font-weight: 550; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; }
nav.reiter a:hover { color: var(--ink); }
nav.reiter a.on { color: var(--navy); border-bottom-color: var(--navy); }
nav.reiter .zahl { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); font-size: 0.74rem; text-align: center; color: var(--ink-2); }
.kunde-kopf h1 { margin-right: 4px; }

/* Ticketlisten: Priorität als Rand */
table.tickets tr.prio-kritisch td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.tickets tr.prio-hoch td:first-child { box-shadow: inset 3px 0 0 var(--warn-line); }
table.tickets tr.st-erledigt { opacity: 0.65; }
.verlauf .eintrag { border-top: 1px solid var(--line); padding: 9px 0; }
.verlauf .eintrag:first-of-type { border-top: 0; }
.verlauf .eintrag .kopf { font-size: 0.85rem; margin-bottom: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.verlauf .eintrag.e-status { color: var(--ink-3); font-size: 0.86rem; padding: 5px 0; }
.verlauf .eintrag.e-status .vortext { display: inline; }
.verlauf .eintrag.e-kunde { background: var(--signal-soft); margin: 0 -16px; padding: 9px 16px; }
.verlauf .eintrag.e-antwort .vortext { border-left: 3px solid var(--blue); padding-left: 9px; }
form.antwort { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-s); overflow: hidden; align-self: flex-start; }
.seg label, .seg button { flex-direction: row; align-items: center; gap: 6px; padding: 5px 10px; margin: 0; border: 0; border-radius: 0; min-height: 30px; font-size: 0.86rem; color: var(--ink); cursor: pointer; }
.seg label + label, .seg button + button { border-left: 1px solid var(--line-strong); }
.seg label:has(input:checked), .seg button.on { background: var(--blue-soft); color: var(--navy); font-weight: 650; }
.seg input { margin: 0; }

/* Markdown (Runbooks) */
.markdown h1, .markdown h2, .markdown h3 { margin: 14px 0 6px; }
.markdown h1:first-child, .markdown h2:first-child { margin-top: 0; }
.markdown pre { background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-s); overflow-x: auto; }
.markdown code { font-family: var(--mono); font-size: 0.9em; }
.markdown table { width: auto; }
.markdown img { max-width: 100%; }

/* Netzwerkplan */
.plan-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.plan-leiste input { min-width: 0; width: 210px; }
.plan-flaeche { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 10px; align-items: start; }
.plan-blatt { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.plan-blatt svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.plan-seite .card { margin: 0 0 10px; }
.plan-legende ul { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; display: grid; gap: 4px; }
.plan-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.plan-legende .ln { display: inline-block; width: 26px; height: 0; border-top: 2.5px solid #4a5378; margin-right: 6px; vertical-align: 3px; }
.plan-legende .ln.wifi { border-top-style: dashed; } .plan-legende .ln.wan { border-top: 4px solid #1d2b8f; }
.plan-legende .ln.vpn { border-top: 3px dotted #0f8b7d; } .plan-legende .ln.usb { border-color: #d98a00; }
#linkpanel { display: none; } #linkpanel.on { display: flex; flex-direction: column; gap: 8px; }
@media print { .side, .plan-leiste, .plan-seite, header.page a { display: none !important; } main.with-nav { margin: 0; padding: 0; max-width: none; } .plan-flaeche { display: block; } }

/* Kundenportal */
body.portal { background: var(--paper); }
.p-kopf { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 10px 20px; background: var(--navy); color: #fff; }
.p-marke { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.p-marke .logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--navy); font-weight: 800; box-shadow: inset 0 -3px 0 var(--signal); }
.p-marke b { display: block; line-height: 1.1; }
.p-marke small { display: block; font-size: 0.75rem; opacity: 0.75; }
.p-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.p-nav::-webkit-scrollbar { display: none; }
.p-nav a { color: rgba(255, 255, 255, 0.85); padding: 6px 10px; border-radius: var(--r-s); white-space: nowrap; text-decoration: none; font-size: 0.9rem; }
.p-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.p-nav a.on { background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600; }
.p-ab button.link { color: #fff; }
.p-inhalt { max-width: 880px; margin: 0 auto; padding: 18px 16px 48px; }
.p-inhalt h1 { margin-bottom: 8px; }
.p-titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; }
.p-titel h1 { margin: 0; }
.p-schmal { max-width: 420px; margin: 24px auto; }
.p-fuss { text-align: center; color: var(--ink-3); font-size: 0.8rem; padding: 0 16px 24px; }
.p-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 14px 0; }
.p-kachel { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.p-kachel:hover { border-color: var(--navy); text-decoration: none; }
.p-kachel span { color: var(--ink-2); font-size: 0.86rem; }
fieldset.arten { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
fieldset.arten legend { font-size: 0.84rem; font-weight: 550; color: var(--ink-2); margin-bottom: 4px; }
label.art-wahl { flex-direction: row; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--r-s); cursor: pointer; font-weight: 450; color: var(--ink); }
label.art-wahl:has(input:checked) { background: var(--blue-soft); border-color: var(--navy); border-left-color: var(--c); }
label.art-wahl input { margin-top: 3px; }

@media (max-width: 1100px) { .plan-flaeche { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .zwei, .zwei.breit-links { grid-template-columns: minmax(0, 1fr); }
  .nav-suche { display: none; }
  .side a.nav-suche-mobil { display: flex; }
  .nur-breit { display: none !important; }
  .filter select { max-width: none; flex: 1 1 140px; }
  .p-kopf { padding: 8px 12px; }
  .p-nav { order: 3; flex-basis: 100%; }
  .p-ab { margin-left: auto; }
  .verlauf .eintrag.e-kunde { margin: 0 -12px; padding: 9px 12px; }
  .plan-leiste input { width: 100%; }
}

section.card.fold-list > table, details.card.fold > table { margin-top: 0; }
section.card.fold-list table td:first-child { padding-left: 16px; }
section.card.fold-list table td:last-child { padding-right: 16px; }
@media (max-width: 860px) { section.card.fold-list table.liste-mobil tr { padding-left: 12px; padding-right: 12px; } section.card.fold-list table td:first-child { padding-left: 0; } }
p.zahlen { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 8px; }
p.zahlen span { background: var(--surface-2); border-radius: 999px; padding: 2px 10px; font-size: 0.84rem; color: var(--ink-2); white-space: nowrap; }
p.zahlen b { color: var(--ink); }
ul.hinweise { margin: 0 0 8px; padding: 8px 12px 8px 28px; background: var(--warn-soft); border-radius: var(--r-s); font-size: 0.86rem; color: var(--warn); }
ul.hinweise li + li { margin-top: 4px; }

/* 0.2.1 – Version überall sichtbar, Update-Verlauf */
.side .brand .ver { font-weight: 600; font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); vertical-align: 2px; margin-left: 2px; }
.side .who a.version { text-decoration: none; color: rgba(255, 255, 255, 0.62); font-weight: 500; }
.side .who a.version:hover { color: #fff; }
.solo-fuss { text-align: center; color: var(--ink-3); font-size: 0.78rem; margin: 18px 0 0; }
.p-fuss .ver-fuss { white-space: nowrap; }
.update-box { border: 1px solid var(--line); border-left: 4px solid var(--signal); border-radius: var(--r-s); padding: 10px 14px; background: var(--surface); }
.update-sprung { font-size: 1.15rem; margin: 0 0 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
details.aenderung { border-top: 1px solid var(--line); padding: 6px 0; }
details.aenderung > summary { cursor: pointer; font-size: 0.9rem; }
details.aenderung .markdown { margin-top: 4px; }
details.aenderung .markdown ul { margin: 4px 0 4px 18px; padding: 0; }
details.aenderung .markdown li { margin: 2px 0; }
details.aenderung .markdown p { margin: 4px 0; }
table.verlauf-tab tr.vs-zurückgerollt td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.verlauf-tab details.aenderung { border: 0; padding: 2px 0 0; }
@media (max-width: 860px) { .side .brand .ver { display: none; } }
table.pakete tr.luecke td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.pakete input[type=checkbox] { vertical-align: -2px; margin-right: 4px; }


/* ==========================================================================
   Design „Kacheln“ (0.2.4): Symbolleiste, Kacheln ohne Rahmen, Bento auf „Heute“
   ========================================================================== */
html { font-size: 15px; letter-spacing: -0.003em; }
h1 { font-weight: 800; letter-spacing: -0.025em; }
h2 { font-weight: 700; letter-spacing: -0.01em; }

/* Symbolleiste (ab 861 px) */
@media (min-width: 861px) {
  .side { inset: 12px auto 12px 12px; width: 60px; padding: 12px 8px 10px; border-radius: var(--r-l); align-items: center; gap: 3px; overflow: visible; background: var(--navy); }
  .side .brand { padding: 0 0 10px; }
  .side .brand .logo, .brand-solo .logo { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); box-shadow: none; font-weight: 800; }
  .side .brand > span:last-child { display: none; }
  .side .group { width: 26px; height: 1px; padding: 0; margin: 7px 0; background: rgba(255, 255, 255, 0.14); font-size: 0; overflow: hidden; }
  .side a:not(.brand) { position: relative; width: 44px; height: 42px; padding: 0; justify-content: center; border-radius: var(--r); color: var(--rail-ink); flex: none; }
  .side a:not(.brand):hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
  .side a.on { background: var(--rail-2) !important; }
  .side a svg { width: 19px; height: 19px; }
  .side a:not(.brand) > span, .switcher .mandant span {
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 30;
    background: var(--navy); color: #fff; padding: 5px 10px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity .12s;
  }
  .side a:not(.brand):hover > span, .side a:not(.brand):focus-visible > span, .switcher .mandant:hover span, .switcher .mandant:focus-visible span { opacity: 1; }
  .nav-suche { display: none; }
  .side a.nav-suche-mobil { display: flex; margin-bottom: 4px; }
  .switcher { margin: 0 0 6px; padding: 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); align-items: center; gap: 4px; }
  .switcher .mandant { position: relative; display: flex; width: 44px; height: 34px; padding: 0; justify-content: center; border-radius: var(--r); }
  .switcher .mandant small { display: none; }
  .switcher .mandant i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 0.72rem; font-weight: 800; color: #fff; box-shadow: none; opacity: .55; }
  .switcher .mandant.on i { opacity: 1; box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px #fff; }
  .switcher .mandant.on { background: none; border-color: transparent; }
  .side .who { margin-top: auto; border: 0; padding: 8px 0 0; align-items: center; gap: 6px; }
  .side .who > span, .side .who > small { display: none; }
  .side .who form { margin: 0; }
  .side .who .avatar { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--rail-2); color: #fff; font-size: 0.74rem; font-weight: 700; text-decoration: none; }
  .side .who button.abmelden { display: grid; place-items: center; width: 34px; height: 30px; color: var(--rail-ink); text-decoration: none; border-radius: 9px; }
  .side .who button.abmelden:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
  .side .who button.abmelden svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .side .who button.abmelden span { display: none; }
  .side .who .version { font-size: 0.66rem; margin: 2px 0 0; color: var(--rail-ink); text-decoration: none; }
  main.with-nav { margin-left: 84px; padding: 16px 22px 56px 12px; max-width: calc(84px + 1260px); }
  .side .soon { display: none; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .side { gap: 1px; padding-top: 8px; }
  .side a:not(.brand) { height: 36px; }
  .side .group { margin: 4px 0; }
  .side .brand { padding-bottom: 6px; }
  .side .brand .logo { width: 32px; height: 32px; }
}
@media (min-width: 1600px) { main.with-nav { max-width: calc(84px + 1400px); } }

/* Leiste auf dem Handy: oben, dunkel, gerundet */
@media (max-width: 860px) {
  .side { margin: 8px 8px 0; border-radius: var(--r-l); top: 8px; background: var(--navy); }
  .side .brand .logo { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); box-shadow: none; }
  .side a:not(.brand) { border-radius: 10px; color: var(--rail-ink); }
  .side a.on { background: var(--rail-2) !important; }
  .side .who .avatar, .side .who button.abmelden svg { display: none; }
  .side .who button.abmelden span { display: inline; }
  main.with-nav { padding: 12px 10px 48px; }
}

/* Karten und Tabellen: weiß auf Grau, ohne Rahmen */
.card, table, .items, .progress, .wide-tile { border-color: transparent; box-shadow: var(--shadow); }
.card table { border: 0; }
details.card.fold > summary:hover { border-radius: var(--r-l); }
details.card.fold[open] > summary { border-radius: var(--r-l) var(--r-l) 0 0; border-bottom-color: var(--line); }
details.card.fold { margin-bottom: 12px; }
section.card.fold-static { margin-bottom: 12px; }
button, .button { border-radius: var(--r); }
input, select, textarea { border-radius: var(--r-s); background: var(--surface); }
.notice { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.warn { border-color: transparent; }
.pill.brand { background: var(--blue-soft); color: var(--blue); }

/* Kennzahl-Kacheln: einzelne Kacheln mit Abstand */
.tiles { gap: 12px; background: transparent; border: 0; box-shadow: none; overflow: visible; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tile { border-radius: var(--r-l); border: 0 !important; padding: 13px 16px; box-shadow: var(--shadow); }
.tile::before { display: none !important; }
.tile .n { font-weight: 800; font-size: 1.75rem; letter-spacing: -0.03em; }
.tile .n.wort { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 8px; min-height: 1.6em; }
.tile .l { order: -1; font-size: 0.8rem; color: var(--ink-2); }
.tile.dunkel { background: var(--navy); color: #fff; }
.tile.dunkel .l { color: #b9bdd1; }
a.tile.dunkel:hover { background: var(--navy-deep); }
.tile .zusatz { display: inline-block; margin-left: 8px; vertical-align: 5px; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bad-fill); color: #1b1d29; letter-spacing: 0; }
@media (max-width: 860px) { .tile { border-bottom: 0; } }

/* Startseite „Heute“: Kopf, Bento-Raster */
.heute-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 14px; }
.heute-kopf .datum { color: var(--ink-2); font-size: 0.82rem; display: block; }
.heute-kopf h1 { margin: 0; font-size: 1.5rem; }
.heute-kopf .suche { margin-left: auto; flex: 0 1 320px; position: relative; }
.heute-kopf .suche input { width: 100%; height: 40px; border: 0; border-radius: var(--r); padding-left: 38px; box-shadow: var(--shadow); }
.heute-kopf .suche svg { position: absolute; left: 13px; top: 12px; width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 2; stroke-linecap: round; }
.heute-kopf .button { height: 40px; }
.heute-kopf .button.primary { padding: 0 16px; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bento-haupt { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bento-seite { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bento details.card.fold, .bento section.card, .bento .card { margin: 0; }
.bento .tiles { margin: 0; }
@media (max-width: 1100px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento-haupt { grid-column: auto; } .heute-kopf .suche { flex-basis: 100%; order: 3; margin-left: 0; } }
.kachel { background: var(--surface); border-radius: var(--r-l); padding: 14px 16px; box-shadow: var(--shadow); }
.kachel > h2 { font-size: 0.96rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.kachel > h2 a { margin-left: auto; font-size: 0.84rem; font-weight: 600; }
.kachel.akzent { background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; gap: 14px; }
.kachel.akzent a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kachel.akzent h2 { margin: 0; }
.kachel.akzent svg.ring { width: 56px; height: 56px; flex: none; }
.kachel .zeilen { display: flex; flex-direction: column; gap: 7px; font-size: 0.9rem; }
.kachel .zeilen > div, .kachel .zeilen > a { display: flex; justify-content: space-between; gap: 10px; color: var(--ink); text-decoration: none; }
.kachel .zeilen > a:hover b { text-decoration: underline; }
.kachel .zeilen span { color: var(--ink-2); }
.kachel .zeilen b.gut { color: var(--ok); } .kachel .zeilen b.mittel { color: var(--warn); } .kachel .zeilen b.schlecht { color: var(--bad); }
.kachel ul.checkliste { margin: 10px 0 0; }
.kachel .verlauf-kurz { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; color: var(--ink-2); }
.kachel .verlauf-kurz b { color: var(--ink); font-weight: 650; margin-right: 4px; }
.kachel .verlauf-kurz li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ticketliste auf „Heute“: Nummer als farbiges Quadrat */
.t-liste { display: flex; flex-direction: column; }
.t-liste a.t { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.t-liste a.t + a.t { box-shadow: 0 -1px 0 var(--line); }
.t-liste a.t:hover { background: var(--surface-2); }
.t-liste a.t.prio-kritisch { background: var(--bad-soft); box-shadow: none; }
.t-liste a.t.prio-kritisch + a.t { box-shadow: none; }
.t-liste .nr { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; background: var(--blue-soft); color: var(--blue); }
.t-liste .prio-kritisch .nr { background: var(--bad-fill); color: #1b1d29; }
.t-liste .prio-hoch .nr { background: var(--warn-soft); color: var(--warn); }
.t-liste .text { flex: 1; min-width: 0; }
.t-liste .text b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-liste .text small { display: block; color: var(--ink-2); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-liste .wann { color: var(--ink-2); font-size: 0.8rem; white-space: nowrap; text-align: right; }
.t-liste .wann .pill { margin-bottom: 2px; }

/* Anmeldeseiten */
main.solo { background: var(--paper); }
main.solo > .card, main.solo > .portal-page > .card { box-shadow: 0 1px 2px rgba(27,29,41,.05), 0 20px 50px rgba(27,29,41,.10); }
.brand-solo .logo { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; display: grid; place-items: center; box-shadow: none; }

/* Kundenportal: Kopf dunkel, Kacheln wie im Team */
.p-marke .logo { background: var(--accent); color: #fff; box-shadow: none; border-radius: 10px; }
.portal-box { border-top: 0; }
nav.reiter a.on { color: var(--blue); border-bottom-color: var(--accent); }
.seg label:has(input:checked), .seg button.on { color: var(--blue); }
.p-kachel:hover { border-color: var(--accent); }
.kachel.einr { padding: 0; overflow: hidden; }
.kachel.einr > summary { list-style: none; cursor: pointer; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.kachel.einr > summary::-webkit-details-marker { display: none; }
.kachel.einr > summary h2 { margin: 0; font-size: 0.96rem; }
.kachel.einr > summary small { display: block; opacity: .9; font-size: 0.8rem; line-height: 1.35; }
.kachel.einr svg.ring { width: 54px; height: 54px; flex: none; }
.kachel.einr ul.checkliste { grid-template-columns: 1fr; margin: 0; padding: 12px 16px; }
.bento section, .bento details, section.kachel { margin-bottom: 0; }
.tiles + .bento { margin-top: -10px; }
@media (min-width: 861px) { .side .who .version .vw { display: none; } }

/* ---------- Zeiterfassung (0.3) ---------- */
fieldset.contents { display: contents; border: 0; margin: 0; padding: 0; }
.seg a { padding: 5px 12px; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); text-decoration: none; min-height: 30px; display: inline-flex; align-items: center; }
.seg a + a { border-left: 1px solid var(--line-strong); }
.seg a.on { background: var(--blue-soft); color: var(--blue); }
.seg.klein button { min-height: 26px; padding: 2px 8px; font-size: 0.78rem; background: var(--surface); }
.zeit-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.zeit-nav .zeitraum { font-size: 1rem; min-width: 11em; text-align: center; }
.zeit-nav .button { min-width: 34px; padding: 0 8px; }
.zeit-nav form.filter select { min-height: 32px; padding: 4px 8px; font-size: 0.86rem; max-width: 13em; }
.bento .kachel.tag > h2 a { color: var(--ink); }
.z-liste { display: flex; flex-direction: column; }
.z-liste a.z { display: flex; align-items: center; gap: 12px; padding: 7px 10px; margin: 0 -10px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.z-liste a.z + a.z { box-shadow: 0 -1px 0 var(--line); }
.z-liste a.z:hover { background: var(--surface-2); }
.z-liste .zeit { width: 46px; flex: none; font-weight: 700; font-size: 0.86rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.z-liste .zeit small { display: block; font-weight: 500; color: var(--ink-3); font-size: 0.76rem; }
.z-liste .text { flex: 1; min-width: 0; }
.z-liste .text b { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-liste .text small { display: block; color: var(--ink-2); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-liste .dauer { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.z-liste .dauer small { display: block; font-weight: 500; color: var(--ink-3); font-size: 0.74rem; }
.z-liste a.z.abgerechnet .dauer small { color: var(--ok); }
.z-liste a.z.storniert { opacity: 0.5; text-decoration: line-through; }
.z-liste a.z.artikel .zeit { font-size: 0.72rem; color: var(--blue); font-weight: 700; }
.lineal { --n: 13; }
.lineal .skala { display: grid; grid-template-columns: repeat(var(--n), 1fr) 0; font-size: 0.7rem; color: var(--ink-3); margin-bottom: 4px; }
.lineal .bahn { position: relative; height: 42px; border-radius: 10px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 calc(100% / var(--n) - 1px), var(--line) calc(100% / var(--n) - 1px) calc(100% / var(--n))); }
.lineal .balken { position: absolute; top: 5px; bottom: 5px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0 6px; overflow: hidden; white-space: nowrap; display: flex; align-items: center; text-decoration: none; min-width: 6px; }
.lineal .balken.la-vor_ort { background: var(--accent); }
.lineal .balken.la-fernwartung { background: #0f8b8d; }
.lineal .balken.la-telefon { background: #c26a00; }
.lineal .balken.la-intern { background: var(--ink-3); }
.lineal .balken span { overflow: hidden; text-overflow: ellipsis; }
.uhr-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bad-fill); margin-right: 8px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad-fill) 25%, transparent); animation: puls 1.6s infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bad-fill) 0%, transparent); } }
section.uhr-laeuft { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.kachel.stoppuhr.laeuft { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.uhr-anzeige { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kachel.stoppuhr form.stack { gap: 8px; }
.kachel.stoppuhr select, .kachel.stoppuhr input { width: 100%; }
.zeitfelder { display: flex; gap: 8px; align-items: flex-end; }
.zeitfelder label { flex: 1; }
.zeit-form textarea { min-height: 70px; }
.abr-kunde > summary input[type=checkbox] { margin-right: 2px; }
table.abr-posten tr.fehler td { background: var(--bad-soft); }
table.abr-posten small.aenderung { color: var(--ok); }
label.check.vorschlag { display: inline-flex; margin-top: 2px; font-size: 0.84rem; color: var(--warn); font-weight: 600; }
table.positionen { margin-top: 8px; }
table.positionen th { padding-top: 6px; }
.vorschlag-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; box-shadow: inset 0 0 0 2px var(--warn-line), var(--shadow); }
ol.schritte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.tarif { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tarif.dim { opacity: 0.6; }
table.saetze { margin: 6px 0 0; }
table.saetze td { padding: 4px 8px 4px 0; border: 0; }
.regel-form h3 { margin: 16px 0 6px; }
.regel-form select[multiple] { min-height: 92px; }
@media (max-width: 860px) {
  .zeit-nav form.filter { width: 100%; margin-left: 0; }
  .zeit-nav form.filter select { flex: 1 1 40%; max-width: none; }
  .zeitfelder { flex-wrap: wrap; }
}
.kachel.tag > h2 a { margin-left: 0; font-size: 0.96rem; font-weight: 700; }
@media (max-width: 860px) { .zeit-nav .zeitraum { min-width: 0; flex: 1; } .zeit-nav .seg { order: -1; } }
[hidden] { display: none !important; }
table.positionen td.num { white-space: nowrap; } @media (max-width: 860px) { table.positionen th:nth-child(4), table.positionen td:nth-child(4) { display: none; } }
/* Kleiner Kalender in „Zeiten“ */
.kachel.kal > h2 { display: flex; align-items: center; gap: 6px; }
.kachel.kal > h2 a { margin-left: 0; }
.kachel.kal .kal-titel { flex: 1; text-align: center; font-size: 0.95rem; }
.kachel.kal .button.btn-s { min-height: 28px; min-width: 30px; padding: 0 8px; }
.kal-raster { display: grid; grid-template-columns: 26px repeat(7, minmax(0, 1fr)); gap: 3px; font-variant-numeric: tabular-nums; }
.kal-raster .wt, .kal-raster span.kw { font-size: 0.7rem; color: var(--ink-3); text-align: center; font-weight: 600; padding-bottom: 2px; }
.kal-raster a.kw { font-size: 0.68rem; color: var(--ink-3); display: grid; place-items: center; text-decoration: none; border-radius: 6px; }
.kal-raster a.kw:hover { background: var(--surface-2); color: var(--ink); }
.kal-raster a.tag { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 32px; border-radius: 9px; font-size: 0.84rem; font-weight: 600;
  color: var(--ink); text-decoration: none; background: var(--surface-2); }
.kal-raster a.tag:hover { box-shadow: inset 0 0 0 2px var(--accent); text-decoration: none; }
.kal-raster a.tag.frei { color: var(--ink-3); background: transparent; }
.kal-raster a.tag.aus { opacity: 0.35; }
.kal-raster a.tag i { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.kal-raster a.tag.s1 { background: var(--blue-soft); }
.kal-raster a.tag.s2 { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.kal-raster a.tag.s3 { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); }
.kal-raster a.tag.heute { box-shadow: inset 0 0 0 2px var(--ink); }
.kal-raster a.tag.an { background: var(--accent); color: #fff; }
.kal-raster a.tag.an i { background: #fff; }
.kal-fuss { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: 0.82rem; color: var(--ink-2); }
@media (max-width: 1100px) {
  .zeit-bento .bento-seite { display: contents; }
  .zeit-bento .kachel.kal { order: -1; }
  .zeit-bento .bento-seite > section:not(.kal) { order: 2; }
}
/* Rechnungsversand */
.versand-liste { display: flex; flex-direction: column; }
.versand-liste form.vz { display: grid; grid-template-columns: minmax(10em, 1.4fr) 8.5em minmax(10em, 1.4fr) auto auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.versand-liste form.vz.fehlt { grid-template-columns: minmax(10em, 1.4fr) minmax(0, 2fr) auto auto; }
.versand-liste .vk { display: flex; flex-direction: column; min-width: 0; }
.versand-liste .vk b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.versand-liste input { min-height: 32px; padding: 4px 8px; font-size: 0.86rem; width: 100%; }
.versand-liste .vakt { justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }
.versand-liste .vfehler { grid-column: 1 / -1; }
.versand-liste form.vz.gesendet .vk b::after { content: " ✓"; color: var(--ok); }
form.nicht-zugeordnet select { max-width: 16em; }
@media (max-width: 860px) {
  .versand-liste form.vz, .versand-liste form.vz.fehlt { grid-template-columns: 1fr 1fr; }
  .versand-liste .vk, .versand-liste .van, .versand-liste .vakt { grid-column: 1 / -1; }
  .versand-liste .vakt { justify-content: flex-start; flex-wrap: wrap; }
}
.vorschau-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kachel.tag > h2 input[type=checkbox] { width: 18px; height: 18px; margin: 0 2px 0 0; }
/* Tage markieren und durchgehen */
.kal-modus { margin: 0 0 8px; gap: 8px; }
.kal-modus .klein { font-size: 0.78rem; }
.kal-raster.markier-modus a.tag { cursor: copy; }
.kal-raster a.tag.markiert { background: var(--accent) !important; color: #fff; box-shadow: none; }
.kal-raster a.tag.markiert i { background: #fff; }
.kal-raster a.tag.ok::after { content: "✓"; position: absolute; top: 1px; right: 4px; font-size: 0.6rem; color: var(--ok); font-weight: 800; }
.kal-raster a.tag.markiert.ok::after { color: #fff; }
.kal-auswahl { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; }
.kachel.durchgehen > h2 a { margin-left: auto; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chips a { display: inline-flex; flex-direction: column; align-items: center; padding: 5px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink);
  font-size: 0.8rem; font-weight: 700; text-decoration: none; line-height: 1.2; }
.tag-chips a small { font-weight: 500; color: var(--ink-2); font-size: 0.72rem; }
.tag-chips a.leer { background: var(--warn-soft); }
.tag-chips a.ok { background: var(--ok-soft); }
.tag-chips a.ok::before { content: "✓ "; color: var(--ok); }
.kachel.tag.leer { box-shadow: inset 0 0 0 2px var(--warn-line), var(--shadow); }
.kachel.tag.geprueft { box-shadow: inset 4px 0 0 var(--ok), var(--shadow); }
.kachel.tag .tag-akt { gap: 8px; }
.kachel.tag .tag-akt .button, .kachel.tag .tag-akt button { min-height: 28px; font-size: 0.8rem; }
.kachel.tag .tag-akt button.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.kachel.tag p.leer-text { margin: 0; font-size: 0.86rem; }
.kachel.tag { scroll-margin-top: 12px; }
.stammdaten-bento .kachel form.grid { margin: 0; }
.ap-kurz { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ap-kurz:last-child { border-bottom: 0; }
table.preise td, table.preise th { padding: 6px 8px; }
table.preise input { min-height: 30px; padding: 3px 8px; font-size: 0.86rem; }
table.preise tr.eigen td:first-child b::after { content: " · eigener Preis"; font-weight: 500; color: var(--accent); font-size: 0.78rem; }

/* ---------- Zwei Seiten in der Leiste: Betrieb | Firma (0.4) ---------- */
body.seite-firma { --accent: #0e9f8e; --accent-deep: #0b8577; --rail-2: #173b3c; --blue: #0b7d70; --blue-soft: #dff4f1; --signal-soft: #dff4f1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.seite-firma { --accent: #22b8a5; --accent-deep: #1aa392; --rail-2: #16312f; --blue: #6fd9c9; --blue-soft: #123a36; --signal-soft: #123a36; }
}
.seiten { display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 15px; background: rgba(255, 255, 255, 0.06); margin: 0 0 8px; }
.side a.seite { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 44px; height: 44px; padding: 0;
  border-radius: 11px; color: var(--rail-ink); text-decoration: none; }
.side a.seite em { font-style: normal; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.01em; }
.side a.seite svg { width: 17px; height: 17px; }
.side a.seite:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.side a.seite.on { color: #fff; background: #5b4bff !important; }
.side a.seite.firma.on { background: #0e9f8e !important; }
.punkte { display: contents; }
@media (min-width: 861px) and (max-height: 980px) {
  .side { gap: 1px; padding-top: 8px; }
  .side a:not(.brand):not(.seite) { height: 36px; }
  .side .group { margin: 4px 0; }
  .side a.seite { height: 40px; }
  .switcher .mandant { height: 30px; }
}
@media (max-width: 860px) {
  .side { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
  .side .brand { order: 0; }
  .seiten { flex-direction: row; margin: 0 auto 0 4px; padding: 3px; order: 1; }
  .side a.seite { flex-direction: row; width: auto; height: 34px; padding: 0 12px; gap: 6px; }
  .side a.seite em { font-size: 0.82rem; }
  .side a.seite svg { width: 16px; height: 16px; }
  .side .who { order: 2; flex-direction: row; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; }
  .side .who .version { display: none; }
  .side .who .avatar { display: grid !important; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rail-2); color: #fff; font-size: .72rem; font-weight: 700; text-decoration: none; padding: 0; }
  .side .who button.abmelden span { display: none !important; }
  .side .who button.abmelden svg { display: block !important; width: 18px; height: 18px; stroke: var(--rail-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .side .who button.abmelden { padding: 6px; }
  .punkte { order: 3; display: flex; flex-basis: 100%; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); }
  .punkte::-webkit-scrollbar { display: none; }
  .punkte .switcher { display: flex; flex-direction: row; gap: 4px; flex: none; align-items: center; padding: 0 6px 0 0; margin: 0 4px 0 0; border: 0; border-right: 1px solid rgba(255, 255, 255, .14); }
  .punkte .switcher .mandant { display: flex; align-items: center; background: none; border: 0; padding: 4px; border-radius: 9px; }
  .punkte .switcher .mandant.on { background: var(--rail-2); }
  .punkte .switcher .mandant i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: var(--c); opacity: .6; }
  .punkte .switcher .mandant.on i { opacity: 1; }
  .punkte .switcher .mandant span, .punkte .switcher .mandant small { display: none; }
}

/* Firma (0.4) */
.items.flach { box-shadow: none; border: 0; border-radius: 0; }
.kachel .items.flach .item { padding-right: 0; }
.item .actions form { display: inline; margin: 0; }
.behoerden details.card.fold > summary a { margin-left: auto; font-size: 0.86rem; }
.items.kurz .body small:not(.law) { display: none; }
.items.kurz .body small.law { display: none; }

/* ---------- Zeiterfassung fürs Handy (/m, 0.4.1) ---------- */
body.mobil { background: var(--paper); margin: 0; padding-bottom: env(safe-area-inset-bottom); }
.m-kopf { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--navy); color: #fff; }
.m-kopf .logo { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; text-decoration: none; flex: none; }
.m-kopf b { display: block; font-size: 1rem; line-height: 1.15; }
.m-kopf small { display: block; font-size: 0.74rem; color: var(--rail-ink); }
.m-kopf .m-link { margin-left: auto; color: #fff; font-size: 0.85rem; font-weight: 600; text-decoration: none; padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.1); }
.m-inhalt { max-width: 560px; margin: 0 auto; padding: 12px 12px 40px; display: flex; flex-direction: column; gap: 12px; }
.m-karte { background: var(--surface); border-radius: var(--r-l); padding: 14px; box-shadow: var(--shadow); }
.m-karte h2 { margin: 0 0 10px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.m-karte > summary { list-style: none; cursor: pointer; }
.m-karte > summary::-webkit-details-marker { display: none; }
.m-karte > summary h2 { margin: 0; }
.m-karte > summary h2::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--ink-2); }
.m-karte[open] > summary h2 { margin-bottom: 10px; }
.m-karte[open] > summary h2::after { content: "–"; }
.mobil input, .mobil select, .mobil textarea { font-size: 16px; min-height: 44px; width: 100%; box-sizing: border-box; }
.mobil textarea { min-height: 70px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chips label { margin: 0; }
.m-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.m-chips span, .m-chips button { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 0.9rem; border: 0; cursor: pointer; }
.m-chips input:checked + span, .m-chips button.on { background: var(--accent); color: #fff; }
.m-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.m-chips.klein button { min-height: 34px; padding: 0 11px; font-size: 0.85rem; }
.m-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-reihe label { margin: 0; font-size: 0.8rem; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }
.m-schalter { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.m-schalter label.check { margin: 0; min-height: 36px; }
.m-schalter label.check input { width: auto; min-height: 0; }
.m-knopf { width: 100%; min-height: 52px; font-size: 1.05rem; font-weight: 700; border-radius: 14px; }
.m-uhr { border: 2px solid var(--accent); }
.m-uhr-kopf { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.88rem; }
.m-zeit { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.m-mitte { text-align: center; margin: 8px 0 0; }
.m-summe { margin-left: auto; font-variant-numeric: tabular-nums; }
.m-liste { list-style: none; margin: 0; padding: 0; }
.m-liste li + li { border-top: 1px solid var(--line); }
.m-liste a { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; color: var(--ink); text-decoration: none; }
.m-liste small { display: block; color: var(--ink-2); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-was { min-width: 0; }
.m-von { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-dauer-w { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.m-fuss { margin: 10px 0 0; font-size: 0.88rem; color: var(--ink-2); }
.m-ver { text-align: center; font-size: 0.75rem; color: var(--ink-3, #8a8fa3); }
.mobil .flash { margin: 0; }
.handy-qr > summary { list-style: none; cursor: pointer; }
.handy-qr > summary::-webkit-details-marker { display: none; }
.handy-qr > summary h2 { margin: 0; }
.handy-qr[open] > summary h2 { margin-bottom: 8px; }
.handy-qr .qr svg { width: 160px; height: 160px; display: block; background: #fff; border-radius: 8px; }
.beleg-ansicht { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.beleg-ansicht .vorschau { padding: 8px; }
.beleg-ansicht .vorschau iframe, .beleg-ansicht .vorschau img { width: 100%; height: 72vh; border: 0; border-radius: var(--r); background: var(--surface-2); object-fit: contain; display: block; }
.beleg-ansicht .vorschau p { margin: 6px 4px 0; }
.belegtext { max-height: 260px; overflow: auto; font-size: 0.78rem; white-space: pre-wrap; background: var(--surface-2); padding: 8px; border-radius: var(--r-s); }
.ablegen input[type=file] { flex: 1; min-width: 14em; }
table.matrix td, table.matrix th { padding: 6px 6px; }
table.matrix .pill { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .beleg-ansicht { grid-template-columns: 1fr; } .beleg-ansicht .vorschau iframe, .beleg-ansicht .vorschau img { height: 52vh; } }
.m-beleg .m-knopf { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink); text-decoration: none; cursor: pointer; }
/* Bank (0.4.2) */
table.bank td.pos { color: var(--ok); font-weight: 650; }
table.bank tr.tx.fehlt td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.bank tr.tx.offen td:first-child { box-shadow: inset 3px 0 0 var(--warn-line); }
.bank-aktionen { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bank-aktionen form.row { gap: 6px; flex-wrap: nowrap; }
.bank-aktionen select, .bank-aktionen input { min-width: 0; flex: 1; max-width: 22em; }
.deckblatt-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
form.inline { display: inline; }
@media (max-width: 860px) { .bank-aktionen form.row { flex-wrap: wrap; } .bank-aktionen select, .bank-aktionen input { max-width: none; } }
/* Leiste am PC scrollbar, wenn das Fenster niedrig ist (0.4.3); Beschriftung beim Drüberfahren als eigenes Schild außerhalb der Leiste */
@media (min-width: 861px) {
  .side { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
  .side::-webkit-scrollbar { width: 4px; }
  .side a:not(.brand) > span, .switcher .mandant span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 1; padding: 0; box-shadow: none; }
  .side a.seite > em { display: block; }
}
.leisten-schild { position: fixed; z-index: 60; background: var(--navy); color: #fff; padding: 5px 10px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  white-space: nowrap; box-shadow: var(--shadow-pop); pointer-events: none; opacity: 0; transform: translateY(-50%); transition: opacity .12s; }
.leisten-schild.an { opacity: 1; }
@media (max-width: 860px) { .leisten-schild { display: none; } }
/* Offene Rechnungen (0.4.4) */
table.rechnungen tr.ueber td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
details.re-mehr { display: inline-block; position: relative; margin-left: 6px; }
details.re-mehr > summary { list-style: none; cursor: pointer; color: var(--blue); font-size: 0.88rem; }
details.re-mehr > summary::-webkit-details-marker { display: none; }
.re-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; width: min(360px, 86vw); background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--shadow-pop); padding: 12px; white-space: normal; }
.symbol-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.symbol-wahl label { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--r-l); cursor: pointer; text-align: center;
  font-size: 0.78rem; font-weight: 600; color: var(--ink-2); border: 2px solid transparent; margin: 0; }
.symbol-wahl label:hover { background: var(--surface-2); }
.symbol-wahl label.on { border-color: var(--accent); color: var(--ink); background: var(--blue-soft); }
.symbol-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.symbol-wahl img { border-radius: 15px; box-shadow: var(--shadow); }
.symbol-wahl input:focus-visible + img { outline: 2px solid var(--accent); outline-offset: 3px; }
.symbol-wahl form { margin: 0; }
.symbol-wahl button { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--r-l);
  cursor: pointer; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); border: 2px solid transparent; }
.symbol-wahl button:hover { background: var(--surface-2); }
.symbol-wahl button.on { border-color: var(--accent); color: var(--ink); background: var(--blue-soft); }
.symbol-wahl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.p-marke img.logo-bild { width: 34px; height: 34px; border-radius: 9px; display: block; }