/* Kontor — Designsystem v3 „Chrom & Glas“.
   EIN Look für alle: helles Glas in Schwarz-Weiß über Chrom-Kugeln. Die Grundwerte (Farben, Glas, Schatten)
   und alle Glas-Regeln stehen gebündelt im Block „Chrom & Glas“ am Ende dieser Datei.
   Prinzipien: ruhige Flächen, klare Hierarchie, eine Akzentfarbe, weiche Tiefe, schnelle Bewegung. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --akzent: #2f6bff;
  --akzent-text: #ffffff;
  --akzent-weich: color-mix(in srgb, var(--akzent) 10%, transparent);
  --akzent-mittel: color-mix(in srgb, var(--akzent) 20%, transparent);
  --akzent-stark: color-mix(in srgb, var(--akzent) 86%, #000);
  --akzent-zart: color-mix(in srgb, var(--akzent) 5%, var(--karte));
  /* Mac/iPhone behalten Helvetica Neue, Windows/Linux bekommen Inter statt Arial (Datei liegt bei, wird nur dort geladen) */
  --schrift: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --papier-schrift: Helvetica, Arial, "Liberation Sans", "Nimbus Sans", sans-serif;
  --r-s: 8px; --r: 10px; --r-m: 12px; --r-l: 16px; --r-xl: 22px;
  --ok: #12a150; --ok-weich: rgba(18, 161, 80, .12);
  --warn: #c27803; --warn-weich: rgba(194, 120, 3, .12);
  --fehler: #e5383b; --fehler-weich: rgba(229, 56, 59, .1);
  --info: #3b82f6; --info-weich: rgba(59, 130, 246, .11);
  --lila: #7c3aed; --lila-weich: rgba(124, 58, 237, .11);
  --tempo: 160ms cubic-bezier(.2, .8, .2, 1);
  --tempo-lang: 320ms cubic-bezier(.2, .8, .2, 1);
  --nav-b: 252px;
  --kopf-h: 60px;
  color-scheme: light;
}


/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--schrift); font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--hg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  letter-spacing: -0.003em;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -.022em; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: 19px; }
h3 { font-size: 15px; font-weight: 620; letter-spacing: -.012em; }
p { margin: 0 0 .6em; }
::selection { background: var(--akzent-mittel); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linie-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Gerüst ---------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.nav {
  position: fixed; inset: 0 auto 0 0; width: var(--nav-b); padding: 14px 12px; display: flex; flex-direction: column; gap: 1px;
  background: var(--nav); color: var(--nav-text); border-right: 1px solid var(--nav-rand); z-index: 30; overflow-y: auto;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.nav-marke { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; min-height: 52px; border-radius: 10px; }
.nav-marke img { max-height: 30px; max-width: 168px; object-fit: contain; }
.nav-marke .zeichen { width: 30px; height: 30px; border-radius: 9px; background: var(--akzent); color: var(--akzent-text); display: grid; place-items: center; font-weight: 750; font-size: 14px; flex: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.nav-marke .name { font-weight: 650; font-size: 14.5px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-marke .name.firmen-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; font-size: clamp(12.5px, 1vw + 4px, 14.5px); }
.nav-marke .unter { font-size: 11.5px; opacity: .55; }
.nav-marke.mit-name { flex-direction: column; align-items: flex-start; gap: 4px; }
.nav-gruppe { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .45; padding: 14px 10px 6px; }
.nav a.punkt {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; color: inherit; font-weight: 520; font-size: 14px;
  transition: background var(--tempo), color var(--tempo); position: relative; text-decoration: none !important; flex: none;
}
.nav a.punkt:hover { background: color-mix(in srgb, var(--nav-text) 6%, transparent); }
.nav a.punkt.aktiv { background: color-mix(in srgb, var(--nav-text) 8%, transparent); font-weight: 620; }
.nav a.punkt.aktiv::before { content: none; }
.nav a.punkt.aktiv svg { color: var(--akzent); opacity: 1; }
.nav a.punkt svg { width: 18px; height: 18px; flex: none; opacity: .72; }
.nav .abstand { flex: 1; min-height: 12px; }
.nav .zahl, .zahl-punkt { margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--fehler); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.agent-status { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 6px 0; border-radius: 12px; background: color-mix(in srgb, var(--nav-text) 4%, transparent); border: 1px solid var(--nav-rand); cursor: pointer; text-decoration: none !important; color: inherit; transition: background var(--tempo); flex: none; }
.agent-status:hover { background: color-mix(in srgb, var(--nav-text) 7%, transparent); }
.agent-status .avatar { width: 30px; height: 30px; font-size: 14px; }
.agent-status .zustand { font-size: 11.5px; opacity: .65; display: flex; align-items: center; gap: 5px; }
.agent-status .zustand i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.agent-status .zustand i.aus { background: var(--leise-2); box-shadow: none; }
.nav-fuss { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; flex: none; }
.nav-fuss:hover { background: color-mix(in srgb, var(--nav-text) 6%, transparent); }

.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--akzent-weich); color: var(--akzent); display: grid; place-items: center; font-weight: 650; font-size: 12px; flex: none; letter-spacing: 0; }
.avatar.agent { background: linear-gradient(150deg, color-mix(in srgb, var(--akzent) 78%, #fff) 0%, var(--akzent) 55%, color-mix(in srgb, var(--akzent) 80%, #000) 100%); color: var(--akzent-text, #fff); font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12), 0 2px 6px -2px color-mix(in srgb, var(--akzent) 60%, transparent); }
.avatar.agent .agent-glyph { width: 56%; height: 56%; display: block; }
.avatar.agent .monogramm { font-weight: 680; font-size: .95em; letter-spacing: -.02em; line-height: 1; }
.symbol-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.symbol-wahl button { width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--linie-2); background: var(--karte); display: grid; place-items: center; cursor: pointer; padding: 0; transition: all var(--tempo); }
.symbol-wahl button .avatar { width: 32px; height: 32px; border-radius: 10px; }
.symbol-wahl button.an { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.avatar.eckig { border-radius: 10px; }
/* Agent-Foto (public/js/agent-foto.js): ersetzt das Symbol überall, wo der Agent auftaucht */
.avatar:has(> .agent-foto) { background: #e8e8ec; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px -2px rgba(0,0,0,.22); }
.avatar > .agent-foto { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; user-select: none; -webkit-user-drag: none; }
.agent-portraet { border-radius: 50%; flex: none; }
button.avatar.agent-foto-knopf { border: 0; padding: 0; cursor: pointer; font: inherit; }
button.avatar.agent-foto-knopf:disabled { cursor: default; }
button.avatar.agent-foto-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.agent-portraet:has(> .agent-foto) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.7), 0 14px 32px -14px rgba(0,0,0,.35); }
.agent-foto-wahl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.agent-foto-bild { position: relative; display: grid; justify-items: center; gap: 10px; }
.agent-foto-bild.laeuft .agent-portraet { animation: puls 1.6s ease-in-out infinite; }
.agent-foto-lauf { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--leise); }
.agent-foto-rechts { display: grid; gap: 12px; min-width: 0; }
.agent-foto-rechts .knopf-gruppe { gap: 8px; }
.agent-foto-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-foto-vorschlaege .chip.wahl { height: auto; min-height: 30px; padding: 5px 11px; font-size: 12.5px; white-space: normal; text-align: left; line-height: 1.35; border-radius: 15px; }
.agent-foto-weg, .agent-foto-rechts > p { margin: 0; }
.agent-foto-meldung { padding: 8px 11px; border-radius: 10px; background: var(--karte-2); color: var(--text-2); }
.agent-foto-meldung.fehler { background: var(--fehler-weich); color: var(--fehler); font-weight: 550; }
.agent-foto-meldung.warn { background: var(--warn-weich); color: var(--warn); }
.agent-foto-meldung.ok { background: var(--ok-weich); color: var(--ok); }
.agent-foto-shooting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linie); background: color-mix(in srgb, var(--karte) 70%, transparent); font-size: 13px; color: var(--text-2); }
.agent-foto-shooting > span { display: inline-flex; gap: 6px; align-items: flex-start; flex: 1 1 240px; }
.agent-foto-shooting svg { flex: none; margin-top: 2px; color: var(--ok); }
.agent-foto-ki { margin: 0; font-size: 11.5px; color: var(--leise-2, var(--leise)); }
.agent-foto-wahl.kompakt { gap: 16px; }
@media (max-width: 640px) {
  .agent-foto-wahl { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .agent-foto-bild { justify-self: center; }
}

.inhalt { flex: 1; margin-left: var(--nav-b); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 25; height: var(--kopf-h); display: flex; align-items: center; gap: 12px; padding: 0 32px;
  background: color-mix(in srgb, var(--hg) 80%, transparent); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid transparent; transition: border-color var(--tempo);
}
.topbar.mit-linie { border-bottom-color: var(--linie); }
.suchfeld { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; min-width: 260px; max-width: 460px; flex: 1; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie-2); color: var(--leise); cursor: text; box-shadow: var(--schatten-s); transition: border-color var(--tempo); }
.suchfeld:hover { border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie-2)); }
.suchfeld svg { width: 16px; height: 16px; }
.suchfeld .text { flex: 1; font-size: 13.5px; }
.taste { font-family: var(--schrift); font-size: 11px; font-weight: 600; color: var(--leise); border: 1px solid var(--linie-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; line-height: 17px; background: var(--karte-2); }
.topbar .rechtsbuendig { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ansicht { flex: 1; padding: 22px 32px 64px; }
.ansicht > * { animation: einblenden 200ms ease; }
.inhalt.voll .ansicht { padding: 0; }
.inhalt.voll .topbar { display: none; }
.seite { max-width: 1240px; margin: 0 auto; }
.seiten-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.seiten-kopf .unter { color: var(--leise); margin-top: 4px; font-size: 14px; }
.tabbar { display: none; }

/* ---------- Flächen ---------- */
.karte {
  background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--r-l); box-shadow: var(--schatten); padding: 20px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.karte.flach { box-shadow: none; background: var(--karte-2); }
.karte.klick { cursor: pointer; transition: transform var(--tempo), box-shadow var(--tempo), border-color var(--tempo); }
.karte.klick:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: color-mix(in srgb, var(--akzent) 22%, var(--karte-rand)); }
.karte h3 { margin-bottom: 10px; }
.karten-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; min-height: 28px; }
.karten-kopf h3 { margin: 0; }
.raster { display: grid; gap: 16px; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster.auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.spalte { display: flex; flex-direction: column; gap: 16px; }
.zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zeile.ende { justify-content: flex-end; }
.zeile.zwischen { justify-content: space-between; }
.leise { color: var(--leise); }
.klein { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: .92em; }
.fett { font-weight: 620; }
.rechts { text-align: right; }
.zahlen { font-variant-numeric: tabular-nums; }
.trenner { height: 1px; background: var(--linie); margin: 14px 0; border: 0; }
.versteckt { display: none !important; }

.kennzahl { padding: 18px 20px; position: relative; overflow: hidden; text-decoration: none !important; color: inherit; display: block; }
.kennzahl .titel { font-size: 12.5px; color: var(--leise); font-weight: 560; display: flex; align-items: center; gap: 7px; }
.kennzahl .titel svg { width: 15px; height: 15px; }
.kennzahl .wert { font-size: 26px; font-weight: 680; letter-spacing: -.03em; margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kennzahl .neben { font-size: 12.5px; color: var(--leise); margin-top: 4px; }
.kennzahl.warnung .wert { color: var(--fehler); }
.kennzahl .funkel { position: absolute; right: 16px; bottom: 14px; opacity: .85; }
.kennzahl:has(.funkel) .neben { padding-right: 96px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--linie-2); background: var(--karte); color: var(--text); font-weight: 560; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background var(--tempo), border-color var(--tempo), transform 90ms, box-shadow var(--tempo), color var(--tempo); text-decoration: none !important; box-shadow: var(--schatten-s); user-select: none;
}
.knopf:hover { background: var(--karte-2); border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.knopf:active { transform: scale(.97); }
.knopf:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.knopf svg { width: 16px; height: 16px; flex: none; }
.knopf.haupt { background: var(--akzent); border-color: transparent; color: var(--akzent-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.08), 0 6px 16px -6px color-mix(in srgb, var(--akzent) 60%, transparent); }
.knopf.haupt:hover { background: var(--akzent-stark); }
.knopf.geist { background: transparent; border-color: transparent; box-shadow: none; }
.knopf.geist:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.knopf.gefahr { color: var(--fehler); }
.knopf.gefahr.haupt { background: var(--fehler); color: #fff; box-shadow: none; }
.knopf.klein { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 5px; }
.knopf.klein svg { width: 15px; height: 15px; }
.knopf.gross { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.knopf.rund { width: 36px; padding: 0; }
.knopf.rund.klein { width: 30px; }
.knopf-gruppe { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.knopf .lader { width: 14px; height: 14px; border-width: 2px; }

/* ---------- Formulare ---------- */
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld > span, .feld > label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.feld .hilfe { font-size: 12px; color: var(--leise); font-weight: 400; line-height: 1.45; }
/* Meldung direkt am Feld (Prüfung im Browser oder vom Server) */
.feld-fehler { display: block; font-size: 12.5px; font-weight: 550; color: var(--fehler); line-height: 1.4; }
.fehlerhaft input:not([type=checkbox]), .fehlerhaft select, .fehlerhaft textarea, .fehlerhaft .tage-wahl { border-color: var(--fehler) !important; box-shadow: 0 0 0 3px var(--fehler-weich) !important; }
.dialog-fehler { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--fehler-weich); color: var(--fehler); font-size: 13.5px; font-weight: 550; }
.dialog-fehler[hidden] { display: none; }
.eingabe, .feld input:not([type=checkbox]):not([type=radio]):not([type=color]), .feld select, .feld textarea, select.eingabe, textarea.eingabe {
  width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linie-2); background: var(--eingabe);
  transition: border-color var(--tempo), box-shadow var(--tempo); outline: none; font-size: 14px;
}
.feld textarea, textarea.eingabe { height: auto; min-height: 84px; padding: 9px 12px; resize: vertical; line-height: 1.5; }
.eingabe::placeholder, .feld input::placeholder, .feld textarea::placeholder { color: var(--leise-2); }
.eingabe:focus, .feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.formular { display: grid; gap: 14px; }
.formular.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formular .breit { grid-column: 1 / -1; }
.feld.schmal input { max-width: 160px; }
/* Einstellungen → Belege: Nummernkreise — Name über den Feldern, Felder im üblichen Stil */
.nummernkreise { display: grid; gap: 14px; }
.nummernkreis-felder { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; margin-top: 6px; }
@media (min-width: 861px) { .nummernkreis { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: end; } .nummernkreis > .fett { padding-bottom: 12px; } .nummernkreis-felder { margin-top: 0; } }
.port-zeile { gap: 10px !important; }
/* Hinweis-Kasten (z. B. Zustand des Postfachs) */
.hinweis-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; margin-bottom: 16px; background: var(--karte-2); border: 1px solid var(--linie); font-size: 14px; }
.hinweis-box > svg { flex: none; margin-top: 2px; }
.hinweis-box.fehler { background: var(--fehler-weich); border-color: transparent; } .hinweis-box.fehler > svg { color: var(--fehler); }
.hinweis-box.ok { background: var(--ok-weich); border-color: transparent; } .hinweis-box.ok > svg { color: var(--ok); }
details.erklaerung > summary, details.erweitert > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); min-height: 32px; }
details.erklaerung > p { margin-top: 8px; }
details.erweitert[open] > summary { margin-bottom: 10px; }
.schalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; }
.schalter input { appearance: none; width: 36px; height: 21px; border-radius: 11px; background: var(--linie-2); position: relative; cursor: pointer; transition: background var(--tempo); flex: none; margin: 0; }
.schalter input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--tempo); }
.schalter input:checked { background: var(--ok); }
.schalter input:checked::after { transform: translateX(15px); }
.schalter input:disabled { opacity: .6; }
.suche { position: relative; }
.suche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--leise); pointer-events: none; }
.suche input { padding-left: 36px !important; }

/* Chips & Status */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--karte-2); color: var(--text-2); border: 1px solid var(--linie); white-space: nowrap; }
.chip.wahl { cursor: pointer; height: 34px; padding: 0 13px; border-radius: 17px; font-size: 13.5px; font-weight: 540; transition: all var(--tempo); background: var(--karte); }
.chip.wahl:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie-2)); }
.chip.wahl.an { background: var(--text); color: var(--hg); border-color: transparent; }
.chip.entwurf { background: var(--warn-weich); color: var(--warn); border-color: transparent; }
.chip.final, .chip.versendet { background: var(--info-weich); color: var(--info); border-color: transparent; }
.chip.bezahlt, .chip.angenommen, .chip.ok { background: var(--ok-weich); color: var(--ok); border-color: transparent; }
.chip.teilbezahlt { background: var(--ok-weich); color: var(--ok); border-color: transparent; opacity: .85; }
.chip.storniert, .chip.abgelehnt { background: var(--fehler-weich); color: var(--fehler); border-color: transparent; }
.chip.ueberfaellig { background: var(--fehler-weich); color: var(--fehler); border-color: transparent; font-weight: 650; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.status-anfrage { background: color-mix(in srgb, var(--leise) 14%, transparent) !important; color: var(--text-2) !important; border-color: transparent !important; }
.status-angebot { background: var(--warn-weich) !important; color: var(--warn) !important; border-color: transparent !important; }
.status-auftrag { background: var(--info-weich) !important; color: var(--info) !important; border-color: transparent !important; }
.status-laeuft { background: var(--lila-weich) !important; color: var(--lila) !important; border-color: transparent !important; }
.status-abgeschlossen { background: var(--ok-weich) !important; color: var(--ok) !important; border-color: transparent !important; }
.status-archiviert { background: color-mix(in srgb, var(--leise) 10%, transparent) !important; color: var(--leise) !important; border-color: transparent !important; }

/* Reiter (Segmente) */
.reiter { display: inline-flex; gap: 2px; padding: 3px; background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 10px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button { border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 8px; font-weight: 560; font-size: 13.5px; color: var(--leise); cursor: pointer; white-space: nowrap; transition: all var(--tempo); display: inline-flex; align-items: center; gap: 6px; }
.reiter button svg { width: 15px; height: 15px; }
.reiter button:hover { color: var(--text); }
.reiter button.an { background: var(--karte); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 1px 1px rgba(15,23,42,.04); }
.reiter .anz { font-size: 11.5px; color: var(--leise); font-weight: 600; }

/* Listen & Tabellen */
.liste { display: flex; flex-direction: column; }
.liste .eintrag { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background var(--tempo); min-height: 52px; text-decoration: none !important; color: inherit; }
.liste .eintrag:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.liste .eintrag + .eintrag { box-shadow: 0 -1px 0 var(--linie); }
.liste .eintrag:hover + .eintrag, .liste .eintrag + .eintrag:hover { box-shadow: none; }
.liste .eintrag .haupt:not(.knopf) { flex: 1; min-width: 0; }
.liste .eintrag .titel { font-weight: 580; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .eintrag .neben { font-size: 12.5px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.team-liste select.eingabe { width: auto; min-height: 36px; flex: none; }
.eintrag-aktionen { display: flex; align-items: center; gap: 6px; flex: none; }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tabelle th { text-align: left; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--leise); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 11px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr.klick { cursor: pointer; }
.tabelle tr.klick:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.leer { text-align: center; padding: 48px 20px; color: var(--leise); }
.leer .bild { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--akzent-weich); color: var(--akzent); display: grid; place-items: center; }
.leer .bild svg { width: 26px; height: 26px; }
.leer h3 { color: var(--text); margin-bottom: 6px; font-size: 16px; }
.leer p { max-width: 420px; margin: 0 auto 16px; }

/* ---------- Dialoge, Meldungen, Menüs ---------- */
.schleier { position: fixed; inset: 0; background: rgba(10, 14, 24, .36); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 100; display: grid; place-items: center; padding: 20px; animation: einblenden 140ms ease; }
.dialog { width: min(540px, 100%); max-height: calc(100dvh - 40px); overflow: auto; background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--r-xl); box-shadow: var(--schatten-hoch); padding: 24px; animation: hochzoomen 200ms cubic-bezier(.2, .9, .3, 1.1); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.dialog.breit { width: min(820px, 100%); }
.dialog.sehr-breit { width: min(1080px, 100%); }
.dialog h2 { margin-bottom: 6px; font-size: 18px; }
.dialog .knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.toasts { position: fixed; bottom: 22px; right: 92px; display: flex; flex-direction: column; gap: 8px; z-index: 300; pointer-events: none; width: min(420px, calc(100% - 32px)); align-items: flex-end; }
.toast { pointer-events: auto; background: #111827; color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); font-size: 13.5px; font-weight: 500; animation: hochzoomen 200ms ease; display: flex; gap: 9px; align-items: center; max-width: 100%; }
.toast svg { flex: none; }
.toast.fehler svg { color: #fca5a5; }
.toast.ok svg { color: #86efac; }
.toast button { margin-left: 6px; border: 0; background: rgba(255,255,255,.14); color: #fff; height: 26px; padding: 0 10px; border-radius: 7px; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.menue { position: fixed; z-index: 150; min-width: 220px; background: var(--karte); border: 1px solid var(--karte-rand); border-radius: 12px; box-shadow: var(--schatten-hoch); padding: 5px; animation: hochzoomen 120ms ease; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.menue button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; height: 34px; padding: 0 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.menue button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.menue button svg { width: 16px; height: 16px; opacity: .7; }
.menue .trenner { margin: 4px 0; }
@keyframes einblenden { from { opacity: 0; } }
@keyframes hoch { from { opacity: 0; transform: translateY(8px); } }
@keyframes hochzoomen { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes schimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.lader { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--akzent-mittel); border-top-color: var(--akzent); animation: drehen .7s linear infinite; display: inline-block; flex: none; }
.lade-seite { display: grid; place-items: center; min-height: 40vh; }
.platzhalter { background: linear-gradient(90deg, var(--karte-2) 0, color-mix(in srgb, var(--text) 6%, var(--karte-2)) 50%, var(--karte-2) 100%); background-size: 800px 100%; animation: schimmer 1.3s linear infinite; border-radius: 10px; }

/* Befehlspalette (⌘K) */
.palette-schleier { position: fixed; inset: 0; z-index: 120; background: rgba(10, 14, 24, .28); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: einblenden 120ms ease; }
.palette { width: min(640px, 100%); background: var(--karte); border: 1px solid var(--karte-rand); border-radius: 16px; box-shadow: var(--schatten-hoch); overflow: hidden; animation: hochzoomen 160ms ease; backdrop-filter: var(--blur); }
.palette .eingabe-zeile { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--linie); }
.palette .eingabe-zeile svg { width: 18px; height: 18px; color: var(--leise); }
.palette input { flex: 1; border: 0; outline: 0; background: transparent; height: 56px; font-size: 16px; }
.palette .treffer { max-height: 52vh; overflow: auto; padding: 6px; }
.palette .gruppe { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--leise); padding: 10px 12px 4px; }
.palette .treffer button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; text-align: left; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.palette .treffer button .neben { margin-left: auto; color: var(--leise); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.palette .treffer button svg { width: 17px; height: 17px; color: var(--leise); flex: none; }
.palette-zu { display: none; border: 0; background: transparent; color: var(--akzent); font: inherit; font-size: 15px; font-weight: 560; cursor: pointer; padding: 8px 0 8px 6px; flex: none; }
.palette .treffer button.an { background: var(--akzent-weich); }
.palette .treffer button.an svg { color: var(--akzent); }
.palette .leer-text { padding: 22px 16px; text-align: center; color: var(--leise); font-size: 13.5px; }
.palette .fuss { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--linie); font-size: 12px; color: var(--leise); align-items: center; }
/* Handy/Touch: keine Tastatur-Hinweise, dafür ein sichtbarer „Abbrechen"-Knopf */
@media (hover: none), (max-width: 860px) { .palette-zu { display: block; } .palette .fuss { display: none; } .palette .treffer button .neben .taste { display: none; } }

/* ---------- Anmeldung ---------- */
.vorhang { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.vorhang::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(600px 400px at 30% 20%, var(--akzent-weich), transparent 60%), radial-gradient(500px 420px at 75% 80%, rgba(40, 40, 46, .10), transparent 60%); pointer-events: none; }
.anmelde-karte { width: min(400px, 100%); padding: 32px; position: relative; }
.anmelde-karte .marke { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 24px; text-align: center; }
.anmelde-karte .marke img { max-height: 52px; max-width: 220px; }
.anmelde-karte .zeichen-gross { width: 56px; height: 56px; border-radius: 16px; background: var(--akzent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--akzent) 70%, transparent); }

/* ---------- Onboarding ---------- */
.onb { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--hg); }
.onb-links { display: flex; flex-direction: column; min-height: 100dvh; padding: 28px clamp(24px, 4vw, 64px); }
.onb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.onb-kopf .marke { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.onb-schritte { display: flex; gap: 6px; }
.onb-schritte i { width: 22px; height: 4px; border-radius: 2px; background: var(--linie-2); transition: all var(--tempo-lang); }
.onb-schritte i.an { background: var(--akzent); width: 34px; }
.onb-schritte i.fertig { background: color-mix(in srgb, var(--akzent) 45%, transparent); }
.onb-schritt-text { display: none; font-size: 13px; font-weight: 600; color: var(--leise); white-space: nowrap; }
.onb-kopf .knopf { flex: none; }
.branche-eigen { max-width: 240px; height: 34px !important; }
.onb-buehne { flex: 1; display: flex; align-items: stretch; padding: clamp(24px, 7vh, 72px) 0 8px; }
.onb-karte { width: 100%; max-width: 560px; animation: hoch 300ms cubic-bezier(.2, .9, .3, 1.05); display: flex; flex-direction: column; }
.onb-karte > .onb-fuss { margin-top: auto; padding-top: 30px; }
.onb-karte .schritt-nr { font-size: 12.5px; font-weight: 650; color: var(--akzent); letter-spacing: .02em; margin-bottom: 10px; }
.onb-karte h1 { font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.035em; margin-bottom: 10px; line-height: 1.1; }
.onb-karte .lead { font-size: 16px; color: var(--text-2); margin-bottom: 26px; line-height: 1.55; }
.onb-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 12px; }
.onb-rechts { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 16%, var(--hg)), color-mix(in srgb, var(--akzent) 4%, var(--hg)) 60%, var(--hg-2)); border-left: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; padding: 40px; transition: background var(--tempo-lang); }
.onb-rechts::after { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 360px at 80% 10%, rgba(255,255,255,.5), transparent 60%); pointer-events: none; }
.onb-rechts .bildunterschrift { position: absolute; left: 40px; bottom: 30px; font-size: 12.5px; color: var(--leise); z-index: 2; display: flex; align-items: center; gap: 8px; }
.onb-rechts .bildunterschrift i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.vorschau-app { width: min(640px, 100%); aspect-ratio: 16 / 11; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15,23,42,.08); display: grid; grid-template-columns: 29% 1fr; position: relative; z-index: 1; transition: all var(--tempo-lang); transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.vorschau-app * { transition: background var(--tempo-lang), color var(--tempo-lang), border-color var(--tempo-lang); }
.vorschau-app .va-nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.vorschau-app .va-marke { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 11px; padding: 2px 4px 12px; min-height: 32px; overflow: hidden; white-space: nowrap; }
.vorschau-app .va-marke img { max-height: 20px; max-width: 120px; object-fit: contain; }
.vorschau-app .va-marke b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; color: #fff; flex: none; }
.vorschau-app .va-punkt { height: 22px; border-radius: 6px; display: flex; align-items: center; gap: 6px; padding: 0 7px; font-size: 10px; font-weight: 520; white-space: nowrap; }
.vorschau-app .va-punkt svg { flex: none; opacity: .75; }
.vorschau-app .va-frage b svg, .vorschau-app .va-antwort b svg { width: 60%; height: 60%; }
.vorschau-app .va-inhalt { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.vorschau-app .va-gruss { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.vorschau-app .va-frage { height: 32px; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 10px; flex: none; }
.vorschau-app .va-frage b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; flex: none; }
.vorschau-app .va-todo { border-radius: 10px; padding: 9px 10px 4px; font-size: 9.5px; flex: none; }
.vorschau-app .va-todo-kopf { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; }
.vorschau-app .va-todo-kopf strong { font-size: 12px; letter-spacing: -.01em; }
.vorschau-app .va-todo-zeile { display: flex; gap: 8px; align-items: center; padding: 6px 0; line-height: 1.3; font-weight: 550; }
.vorschau-app .va-todo-zeile i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid; flex: none; }
.vorschau-app .va-todo-zeile small { display: block; font-size: 8.5px; font-weight: 450; }
.vorschau-app .va-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.vorschau-app .va-kachel { border-radius: 10px; padding: 9px; font-size: 9px; }
.vorschau-app .va-kachel strong { display: block; font-size: 14px; margin-top: 3px; letter-spacing: -.02em; }
.vorschau-app .va-chat { border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 7px; font-size: 9.5px; flex: 1; min-height: 0; overflow: hidden; }
.vorschau-app .va-blase { align-self: flex-end; padding: 6px 9px; border-radius: 10px 10px 3px 10px; max-width: 78%; line-height: 1.4; }
.vorschau-app .va-antwort { display: flex; gap: 6px; align-items: flex-start; max-width: 88%; line-height: 1.45; }
.vorschau-app .va-antwort b { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 9px; color: #fff; }
.onb-rechts .papier-mini { position: absolute; right: 5%; bottom: 7%; width: 38%; z-index: 0; box-shadow: 0 30px 70px -25px rgba(15,23,42,.5), 0 0 0 1px rgba(15,23,42,.06); border-radius: 3px; overflow: hidden; transform: rotate(3deg); background: #fff; transition: all var(--tempo-lang); }
.onb-rechts .papier-mini svg { display: block; width: 100%; height: auto; }

.wahl-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.wahl-karten.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl-karten.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wahl-karte { position: relative; border: 1.5px solid var(--linie-2); border-radius: 14px; padding: 14px 16px; cursor: pointer; background: var(--karte); transition: border-color var(--tempo), box-shadow var(--tempo), transform var(--tempo); text-align: left; width: 100%; }
.wahl-karte:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie-2)); }
.wahl-karte.an { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.wahl-karte.an::after { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wahl-karte .titel { font-weight: 620; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; padding-right: 22px; }
.wahl-karte .text { font-size: 13px; color: var(--leise); line-height: 1.45; }
.wahl-karte .marke-empf { position: absolute; top: -9px; left: 14px; background: var(--akzent); color: var(--akzent-text); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: .02em; }
.wahl-karte.klein-karte { padding: 10px; }
.wahl-karte.klein-karte .titel { font-size: 13px; padding-right: 0; justify-content: center; }
.wahl-karte.klein-karte.an::after { top: 8px; right: 8px; width: 16px; height: 16px; background-size: 10px; }
.theme-vorschau { height: 72px; border-radius: 9px; margin-bottom: 8px; overflow: hidden; position: relative; border: 1px solid var(--linie); }
.theme-vorschau .tv-nav { position: absolute; inset: 0 auto 0 0; width: 30%; }
.theme-vorschau .tv-karte { position: absolute; border-radius: 5px; }
.farben { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.farbe { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--karte); box-shadow: 0 0 0 1px var(--linie-2); cursor: pointer; transition: transform var(--tempo), box-shadow var(--tempo); }
.farbe:hover { transform: scale(1.08); }
.farbe.an { box-shadow: 0 0 0 2px var(--text); }
.ablage { border: 1.5px dashed var(--linie-2); border-radius: 16px; padding: 26px; text-align: center; cursor: pointer; transition: border-color var(--tempo), background var(--tempo); background: var(--karte); }
.ablage:hover, .ablage.drueber { border-color: var(--akzent); background: var(--akzent-zart); }
.ablage .ico-rund { width: 44px; height: 44px; border-radius: 12px; background: var(--akzent-weich); color: var(--akzent); display: grid; place-items: center; margin: 0 auto 10px; }
.ablage svg { width: 22px; height: 22px; }
.datei-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.datei-chips .chip { height: 28px; padding: 0 4px 0 10px; border-radius: 8px; font-weight: 520; }
.datei-chips .chip button { border: 0; background: transparent; color: var(--leise); cursor: pointer; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }
.datei-chips .chip button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.geraete-code { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .14em; padding: 16px 22px; border-radius: 14px; background: var(--karte-2); border: 1px solid var(--linie); text-align: center; user-select: all; }
.aufbau-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.aufbau-liste .schritt { display: flex; align-items: center; gap: 12px; font-size: 14.5px; animation: hoch 260ms ease; }
.aufbau-liste .schritt .ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-weich); color: var(--ok); flex: none; }
.aufbau-liste .schritt .ico svg { width: 14px; height: 14px; }
.aufbau-liste .schritt.laeuft .ico { background: var(--akzent-weich); color: var(--akzent); }
.aufbau-liste .schritt.laeuft .ico svg { animation: drehen 1s linear infinite; }
.aufbau-liste .schritt.offen { color: var(--leise); }
.aufbau-liste .schritt.offen .ico { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--leise-2); }
.aufbau-orb { width: 72px; height: 72px; border-radius: 50%; margin: 0 0 22px; background: conic-gradient(from 0deg, var(--akzent), #ff8a5c, #8b5cf6, var(--akzent)); animation: drehen 3s linear infinite; position: relative; }
.aufbau-orb::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--hg); }
.aufbau-orb.fertig { animation: none; background: var(--ok); }
.aufbau-orb .orb-haken { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; color: var(--ok); opacity: 0; transition: opacity var(--tempo); }
.aufbau-orb.fertig .orb-haken { opacity: 1; }
.zusammenfassung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.zusammenfassung .z { border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; background: var(--karte); }
.zusammenfassung .z .k { font-size: 12px; color: var(--leise); }
.zusammenfassung .z .w { font-weight: 620; margin-top: 2px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Chat ---------- */
.chat-rahmen { display: grid; grid-template-columns: 290px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.chat-liste { border-right: 1px solid var(--linie); display: flex; flex-direction: column; min-height: 0; background: color-mix(in srgb, var(--karte) 60%, transparent); backdrop-filter: var(--blur); }
.chat-liste .kopf { padding: 16px 14px 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-liste .kopf h2 { font-size: 17px; }
.chat-liste .suche { margin: 0 12px 6px; }
.chat-liste .suche input { width: 100%; height: 34px; border-radius: 9px; border: 1px solid var(--linie-2); background: var(--eingabe); font-size: 13.5px; outline: none; }
.chat-liste .eintraege { overflow: auto; padding: 0 8px 16px; flex: 1; }
.chat-liste .gruppe { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--leise); padding: 12px 10px 4px; }
.chat-eintrag { padding: 9px 10px; border-radius: 10px; cursor: pointer; display: flex; gap: 10px; align-items: center; transition: background var(--tempo); }
.chat-eintrag:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.chat-eintrag.an { background: var(--akzent-weich); }
.chat-eintrag .avatar { width: 30px; height: 30px; font-size: 13px; }
.chat-eintrag .titel { font-weight: 580; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-eintrag .neben { font-size: 12px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-eintrag .laeuft-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); animation: puls 1.2s infinite; flex: none; }
.chat-haupt { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-kopf { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--linie); height: 60px; flex: none; background: color-mix(in srgb, var(--hg) 75%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.chat-verlauf { flex: 1; overflow: auto; padding: 26px 22px 12px; }
.chat-spalte { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.nachricht { display: flex; gap: 12px; animation: hoch 200ms ease; }
.nachricht.ich { justify-content: flex-end; }
.nachricht .blase { max-width: min(600px, 85%); padding: 10px 14px; border-radius: 18px 18px 5px 18px; background: var(--akzent); color: var(--akzent-text); white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--akzent) 70%, transparent); }
.nachricht .zeit { font-size: 11px; color: var(--leise-2); margin-top: 4px; }
.nachricht.agent .avatar { width: 30px; height: 30px; font-size: 14px; margin-top: 1px; }
.nachricht.agent .koerper { flex: 1; min-width: 0; }
.nachricht.agent .text { line-height: 1.62; word-wrap: break-word; font-size: 14.5px; }
.nachricht.agent .text p { margin: 0 0 .7em; }
.nachricht.agent .text p:last-child { margin-bottom: 0; }
.nachricht.agent .text ul, .nachricht.agent .text ol { margin: .2em 0 .8em; padding-left: 1.3em; }
.nachricht.agent .text li { margin: .2em 0; }
.nachricht.agent .text code { font-family: var(--mono); font-size: .88em; background: var(--karte-2); border: 1px solid var(--linie); padding: 1px 5px; border-radius: 5px; }
.nachricht.agent .text h4 { font-size: 14.5px; margin: .9em 0 .3em; }
.nachricht.agent .text table { border-collapse: collapse; margin: .4em 0 .9em; font-size: 13.5px; width: 100%; }
.nachricht.agent .text th, .nachricht.agent .text td { border-bottom: 1px solid var(--linie); padding: 6px 8px; text-align: left; }
.nachricht.agent .text th { font-weight: 620; color: var(--text-2); }
.nachricht .aktionen { display: flex; gap: 2px; margin-top: 6px; opacity: 0; transition: opacity var(--tempo); }
.nachricht:hover .aktionen { opacity: 1; }
.nachricht .aktionen button { border: 0; background: transparent; color: var(--leise); height: 26px; padding: 0 7px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.nachricht .aktionen button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.nachricht .aktionen svg { width: 14px; height: 14px; }
.nachricht .anhaenge { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 6px; }
.nachricht .anhaenge img { width: 120px; height: 90px; object-fit: cover; border-radius: 12px; border: 1px solid var(--linie); display: block; }
.nachricht.ereignis { justify-content: center; }
.nachricht.ereignis .hinweis { font-size: 12.5px; color: var(--leise); background: var(--karte-2); border: 1px solid var(--linie); padding: 6px 12px; border-radius: 10px; max-width: 90%; text-align: center; }
.nachricht.ereignis.fehler .hinweis { color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 30%, transparent); background: var(--fehler-weich); }
.schritte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.schritt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); background: var(--karte-2); border: 1px solid var(--linie); height: 24px; padding: 0 9px 0 7px; border-radius: 12px; }
.schritt-chip svg { width: 13px; height: 13px; color: var(--ok); }
.schritt-chip.fehler svg { color: var(--fehler); }
.schritt-chip.laeuft { color: var(--akzent); border-color: color-mix(in srgb, var(--akzent) 30%, var(--linie)); background: var(--akzent-zart); }
.schritt-chip.laeuft svg { color: var(--akzent); animation: drehen 1s linear infinite; }
.chat-karte { margin-top: 10px; border: 1px solid var(--linie-2); border-radius: 14px; padding: 12px 14px; background: var(--karte); display: flex; gap: 12px; align-items: center; box-shadow: var(--schatten); text-decoration: none !important; color: inherit; flex-wrap: wrap; }
a.chat-karte:hover { border-color: color-mix(in srgb, var(--akzent) 35%, var(--linie-2)); }
.chat-karte .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--akzent-weich); color: var(--akzent); display: grid; place-items: center; flex: none; }
.chat-karte .ico svg { width: 19px; height: 19px; }
.chat-karte .haupt { flex: 1; min-width: 160px; }
.chat-karte.frage { flex-direction: column; align-items: stretch; border-color: color-mix(in srgb, var(--akzent) 35%, transparent); background: var(--akzent-zart); }
.chat-karte.frage .frage-text { font-weight: 600; }
.chat-karte.frage .frage-kopf { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--akzent); }
.chat-karte.frage .optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.chat-karte.frage .optionen .knopf { justify-content: center; white-space: normal; text-align: center; min-height: 38px; height: auto; padding: 8px 12px; }
.chat-karte.frage .optionen .knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.chat-karte.freigabe { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 5%, var(--karte)); }
.chat-karte.freigabe .ico { background: var(--warn-weich); color: var(--warn); }
.tippen { display: inline-flex; gap: 4px; padding: 6px 0; }
.tippen i { width: 6px; height: 6px; border-radius: 50%; background: var(--leise); animation: puls 1.2s infinite; }
.tippen i:nth-child(2) { animation-delay: .15s; } .tippen i:nth-child(3) { animation-delay: .3s; }
.cursor > :last-child::after { content: ""; display: inline-block; width: 7px; height: 15px; background: var(--akzent); border-radius: 2px; margin-left: 2px; vertical-align: -2px; animation: puls 1s infinite; }
.eingabe-bereich { padding: 8px 22px 16px; flex: none; }
.eingabe-bereich .spalte-in { max-width: 780px; margin: 0 auto; }
.komponist { display: flex; align-items: flex-end; gap: 6px; background: var(--karte); border: 1px solid var(--linie-2); border-radius: 18px; padding: 6px; box-shadow: var(--schatten); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: border-color var(--tempo), box-shadow var(--tempo); }
.komponist:focus-within { border-color: color-mix(in srgb, var(--akzent) 55%, var(--linie-2)); box-shadow: 0 0 0 3px var(--akzent-weich), var(--schatten); }
.komponist textarea { flex: 1; border: 0; background: transparent; resize: none; outline: none; padding: 8px 6px; max-height: 220px; min-height: 38px; line-height: 1.45; font-size: 15px; }
.komponist .knopf.rund { width: 38px; height: 38px; border-radius: 12px; }
.komponist .knopf.geist.rund { color: var(--leise); }
.komponist .knopf.aufnahme { color: #fff !important; background: var(--fehler) !important; animation: puls 1.4s infinite; }
.hinweis-zeile { font-size: 11.5px; color: var(--leise-2); text-align: center; margin-top: 8px; }
.vorschlaege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; max-width: 620px; margin-left: auto; margin-right: auto; }
.vorschlaege button { border: 1px solid var(--linie-2); background: var(--karte); border-radius: 14px; padding: 12px 14px; cursor: pointer; font-size: 13.5px; text-align: left; line-height: 1.4; transition: all var(--tempo); box-shadow: var(--schatten-s); display: flex; gap: 10px; align-items: flex-start; }
.vorschlaege button svg { width: 17px; height: 17px; color: var(--akzent); flex: none; margin-top: 1px; }
.vorschlaege button:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie-2)); transform: translateY(-1px); }
.chat-start { text-align: center; padding: 9vh 10px 20px; }
.chat-start .avatar { width: 56px; height: 56px; font-size: 26px; margin: 0 auto 16px; border-radius: 18px; }
.chat-start h2 { font-size: 22px; letter-spacing: -.03em; }

/* ---------- Belege: Papier ---------- */
.beleg-leiste { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 0 20px; height: 60px; background: color-mix(in srgb, var(--hg) 82%, transparent); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--linie); }
.beleg-leiste .titel { font-weight: 650; display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.beleg-leiste .titel-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.beleg-leiste .titel .chip { flex-shrink: 0; }
.beleg-leiste > .knopf { flex-shrink: 0; }
@media (max-width: 1280px) { .beleg-leiste .nur-breit { display: none; } }
.beleg-leiste .gespeichert { font-size: 12.5px; color: var(--leise); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.beleg-leiste .betrag { font-weight: 680; font-variant-numeric: tabular-nums; margin-right: 6px; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }
.papier-buehne { padding: 32px 16px 120px; display: flex; justify-content: center; }
.papier {
  width: 210mm; min-height: 297mm; background: #fff; color: #111; border-radius: 4px; position: relative; font-family: var(--papier-schrift); font-size: 9.5pt; line-height: 1.32; color-scheme: light; letter-spacing: 0;
  padding: 13mm 20mm 20mm 25mm; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04), 0 30px 60px -20px rgba(15,23,42,.25);
}
.papier .p-kopf { display: flex; justify-content: flex-end; min-height: 32mm; align-items: flex-start; }
.papier .p-kopf.links { justify-content: flex-start; }
.papier .p-kopf img { max-height: 24mm; max-width: 55mm; object-fit: contain; }
.papier .p-kopf .firmenname { font-size: 15pt; font-weight: bold; }
.papier .p-adresszeile { font-size: 6.8pt; color: #6b6b6b; border-bottom: .15mm solid #cfcfcf; width: 85mm; padding-bottom: .5mm; }
.papier .p-oben { display: flex; justify-content: space-between; gap: 10mm; margin-top: 2.6mm; min-height: 50mm; }
.papier .p-anschrift { width: 85mm; font-size: 10pt; line-height: 4.6mm; position: relative; }
.papier .p-info { width: 65mm; font-size: 8.6pt; }
.papier .p-info .z { display: flex; justify-content: space-between; gap: 4mm; line-height: 4.4mm; align-items: center; }
.papier .p-info .z > span:first-child { color: #6b6b6b; font-size: 8.2pt; white-space: nowrap; }
.papier .p-titel { font-size: 15pt; font-weight: bold; margin: 2mm 0 1.6mm; display: flex; align-items: baseline; gap: 3mm; }
.papier .p-titel .entwurf { font-size: 8pt; color: #c2410c; letter-spacing: .04em; }
.papier .papier-feld { border: 0; background: transparent; width: 100%; padding: 0; margin: 0; font: inherit; color: inherit; outline: none; border-radius: 2px; resize: none; overflow: hidden; display: block; height: auto; transition: background 120ms, box-shadow 120ms; letter-spacing: 0; }
.papier .papier-feld:hover { background: rgba(47, 107, 255, .05); }
.papier .papier-feld:focus { background: rgba(47, 107, 255, .07); box-shadow: 0 0 0 2px rgba(47, 107, 255, .28); }
.papier .papier-feld::placeholder { color: #c4c4c4; }
.papier .p-anschrift:hover .kunde-knopf, .papier .p-anschrift.ohne-kunde .kunde-knopf { opacity: 1; }
.papier .kunde-knopf { opacity: 0; transition: opacity 120ms; z-index: 2; position: absolute; right: 0; top: -1mm; font-family: var(--schrift); font-size: 12px; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid #dcdfe6; background: #fff; color: #334155; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.05); letter-spacing: 0; }
.papier .kunde-knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.papier .kunde-knopf svg { width: 14px; height: 14px; }
.papier .p-betreff { font-weight: bold; font-size: 10pt; }
.papier .p-einleitung { margin: 2.5mm 0 3mm; }
.papier table.p-tab { width: 100%; border-collapse: collapse; margin-top: 3mm; table-layout: fixed; }
.papier .p-tab thead th { font-size: 8pt; font-weight: bold; color: #333; text-align: left; padding: 1.6mm 1.2mm; background: var(--papier-band, #eef3ff); }
.papier .p-tab thead th:first-child { border-radius: .8mm 0 0 .8mm; }
.papier .p-tab th.r, .papier .p-tab td.r { text-align: right; }
.papier .p-tab td { vertical-align: top; padding: 1.4mm 1mm; font-size: 9pt; }
.papier .p-tab tr.pos:hover td, .papier .p-tab tr.pos:focus-within td { background: #f6f8ff; }
.papier .p-tab tr.ziehen-ueber td { box-shadow: inset 0 2px 0 var(--akzent); }
.papier .p-tab tr.zieht td { opacity: .4; }
.papier .p-tab tr.titel td { font-weight: bold; font-size: 10pt; padding-top: 3mm; border-bottom: .2mm solid #e6e6e6; }
.papier .p-tab tr.titelsumme td { font-weight: bold; font-size: 8.6pt; padding-bottom: 3mm; }
.papier .p-tab tr.titelsumme td.r { border-top: .2mm solid #bdbdbd; }
.papier .p-tab .kurz { font-weight: bold; font-size: 9pt; }
.papier .p-tab .lang { font-size: 8.2pt; color: #4a4a4a; margin-top: .5mm; }
.papier .p-tab .zusatz { font-size: 7.8pt; color: #6b6b6b; font-style: italic; }
.papier .p-tab input.papier-feld.r { text-align: right; }
.papier .p-tab .zeilen-werkzeug { position: absolute; right: -13mm; top: 0; display: none; flex-direction: column; gap: 3px; font-family: var(--schrift); }
.papier .p-tab tr:hover .zeilen-werkzeug, .papier .p-tab tr:focus-within .zeilen-werkzeug { display: flex; }
.papier .p-tab td.wz { position: relative; width: 0; padding: 0; }
.zeilen-werkzeug button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e5ea; background: #fff; color: #475569; cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.zeilen-werkzeug button:hover { color: var(--akzent); border-color: var(--akzent); }
.zeilen-werkzeug button svg { width: 15px; height: 15px; }
.zeilen-werkzeug .griff { cursor: grab; }
.papier .p-neu { display: flex; gap: 6px; margin: 4mm 0 2mm; flex-wrap: wrap; font-family: var(--schrift); font-size: 13px; letter-spacing: 0; }
.papier .p-neu .knopf { height: 30px; font-size: 12.5px; border-style: dashed; background: #fff; color: #334155; border-color: #d4d8df; box-shadow: none; }
.papier .p-neu .knopf:hover { border-color: var(--akzent); color: var(--akzent); border-style: solid; }
.papier .p-neu .tastenhinweis { margin-left: auto; color: #94a3b8; font-size: 11.5px; align-self: center; }
/* Anlegen-Knöpfe links, „Agent füllt aus“ bewusst rechts abgesetzt (bricht er um, steht er rechts statt als Waise links) */
.papier .p-neu .knopf { padding: 0 9px; gap: 5px; }
.papier .p-neu .p-neu-agent { margin-left: auto; }
.papier .p-neu .tastenhinweis { flex-basis: 100%; text-align: right; }
.papier .p-summen { margin-left: auto; width: 80mm; margin-top: 4mm; font-size: 9pt; }
.papier .p-summen .z { display: flex; justify-content: space-between; line-height: 4.8mm; color: #333; align-items: center; }
.papier .p-summen .gesamt { background: var(--papier-band, #eef3ff); font-weight: bold; font-size: 10pt; color: #111; padding: 1.2mm 1mm 1.2mm 2mm; margin: 1mm 0 1.5mm -2mm; border-radius: .8mm; line-height: 4.8mm; }
.papier .p-summen .zahlbetrag { font-weight: bold; font-size: 10pt; color: #111; border-top: .2mm solid #9e9e9e; padding-top: 1mm; }
.papier .p-summen .eingabe-mini { width: 11mm; display: inline-block; text-align: right; border-bottom: 1px dashed #c8c8c8; }
.papier .p-text { margin-top: 4mm; }
.papier .p-fuss { position: absolute; left: 25mm; right: 20mm; bottom: 8mm; border-top: .2mm solid #d9d9d9; padding-top: 2mm; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; font-size: 6.8pt; color: #6b6b6b; line-height: 3.2mm; }
.papier .falz { position: absolute; left: 3.5mm; width: 4mm; border-top: .15mm solid #bbb; }
.papier.gesperrt .papier-feld { pointer-events: none; }
.papier .p-hinweis-fett { font-weight: bold; font-size: 8.6pt; margin-top: 2mm; }
.papier .bedingungen { font-family: var(--schrift); font-size: 12px; color: #64748b; margin: 3mm 0 1mm; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 9px; padding: 7px 11px; letter-spacing: 0; }
.papier .bedingungen select.papier-feld, .papier .bedingungen input.papier-feld { display: inline-block; width: auto; border-bottom: 1px dashed #c8c8c8; color: #0f172a; }
.papier .bedingungen label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.papier .datum-feld { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; cursor: pointer; border-radius: 2px; padding: 0 1px; }
.papier .datum-feld:hover { background: rgba(47, 107, 255, .05); }
.papier .datum-feld input[type=date] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.papier .datum-feld input[type=date]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vorschlag-liste { position: absolute; z-index: 40; background: var(--karte); border: 1px solid var(--karte-rand); border-radius: 12px; box-shadow: var(--schatten-hoch); padding: 5px; min-width: 380px; max-width: 520px; font-family: var(--schrift); font-size: 13px; color: var(--text); animation: hochzoomen 120ms ease; letter-spacing: 0; }
.vorschlag-liste button { display: flex; width: 100%; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: inherit; }
.vorschlag-liste button.an, .vorschlag-liste button:hover { background: var(--akzent-weich); }
.vorschlag-liste button .text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschlag-liste button .preis { font-variant-numeric: tabular-nums; color: var(--leise); white-space: nowrap; }
.vorschlag-liste .kopfzeile { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--leise); padding: 6px 10px 3px; }
.vorschau-seiten { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 10px 0; }
.vorschau-seiten svg { width: min(100%, 794px); height: auto; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); border-radius: 2px; }

.katalog-treffer { max-height: 52vh; overflow: auto; margin-top: 12px; }

/* ---------- Projekte ---------- */
.projekt-karte { display: flex; flex-direction: column; gap: 10px; min-height: 150px; }
.projekt-karte .kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.projekt-karte .name { font-weight: 640; font-size: 15.5px; line-height: 1.3; letter-spacing: -.015em; }
.projekt-karte .fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: var(--leise); font-size: 12.5px; gap: 10px; }
.balken { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; display: flex; }
.balken i { height: 100%; background: var(--akzent); display: block; transition: width var(--tempo-lang); }
.balken i.zwei { background: var(--ok); }
.board { display: grid; grid-template-columns: repeat(5, minmax(184px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.board-spalte { background: color-mix(in srgb, var(--text) 3.5%, transparent); border-radius: 14px; padding: 8px; min-height: 180px; transition: background var(--tempo), box-shadow var(--tempo); }
.board-spalte.drueber { background: var(--akzent-weich); box-shadow: inset 0 0 0 2px var(--akzent-mittel); }
.board-spalte .kopf { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; font-weight: 620; font-size: 13.5px; }
.board-spalte .kopf .anz { color: var(--leise); font-weight: 520; }
.board-spalte .kopf .summe { margin-left: auto; color: var(--leise); font-weight: 520; font-size: 12px; font-variant-numeric: tabular-nums; }
.board-karte { background: var(--karte); border: 1px solid var(--karte-rand); border-radius: 11px; padding: 11px 12px; margin-bottom: 8px; box-shadow: var(--schatten-s); cursor: grab; transition: box-shadow var(--tempo), transform var(--tempo); text-decoration: none !important; color: inherit; display: block; }
.board-karte:hover { box-shadow: var(--schatten); transform: translateY(-1px); }
.board-karte.zieht { opacity: .45; }
.board-karte .name { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.board-karte .neben { font-size: 12px; color: var(--leise); margin-top: 3px; }
.board-karte .unten { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: 12px; color: var(--leise); }
.zeitleiste { display: flex; flex-direction: column; gap: 14px; }
.zeitleiste .z { display: flex; gap: 12px; }
.zeitleiste .z .pkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); margin-top: 7px; flex: none; box-shadow: 0 0 0 3px var(--akzent-weich); }
.zeitleiste .z .wer { font-size: 12px; color: var(--leise); margin-top: 1px; }

/* Dateien */
.datei-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.datei-kachel { border: 1px solid var(--karte-rand); border-radius: 12px; overflow: hidden; background: var(--karte); cursor: pointer; display: flex; flex-direction: column; transition: box-shadow var(--tempo), transform var(--tempo); }
.datei-kachel:hover { box-shadow: var(--schatten); transform: translateY(-1px); }
.datei-kachel .bild { height: 104px; background: var(--karte-2); display: grid; place-items: center; overflow: hidden; color: var(--leise); }
.datei-kachel .bild img { width: 100%; height: 100%; object-fit: cover; }
.datei-kachel .bild svg { width: 28px; height: 28px; }
.datei-kachel .name { font-size: 12.5px; font-weight: 560; padding: 8px 10px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datei-kachel { position: relative; }
.datei-kachel .datei-menue { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; background: rgba(255,255,255,.88); box-shadow: var(--schatten-s); opacity: 0; transition: opacity var(--tempo); }
.datei-kachel:hover .datei-menue, .datei-kachel .datei-menue:focus-visible { opacity: 1; }
@media (hover: none) { .datei-kachel .datei-menue { opacity: 1; } }

/* Postfach */
.postfach { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
.mail-text { white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.6; max-height: 60vh; overflow: auto; }

/* Fortschritt / Ring / Checkliste */
.ring { --wert: 0; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--akzent) calc(var(--wert) * 1%), color-mix(in srgb, var(--text) 8%, transparent) 0); display: grid; place-items: center; flex: none; }
.ring span { width: 36px; height: 36px; border-radius: 50%; background: var(--karte); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.checkliste { display: flex; flex-direction: column; }
.checkliste .punkt { display: flex; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 10px; text-decoration: none !important; color: inherit; transition: background var(--tempo); cursor: pointer; }
.checkliste .punkt:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.checkliste .haken { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linie-2); display: grid; place-items: center; flex: none; color: transparent; }
.checkliste .punkt.erledigt .haken { background: var(--ok); border-color: var(--ok); color: #fff; }
.checkliste .punkt.erledigt .titel { color: var(--leise); text-decoration: line-through; }
.checkliste .haken svg { width: 13px; height: 13px; }
.checkliste .titel { font-weight: 560; }
.checkliste .neben { font-size: 12.5px; color: var(--leise); }

/* Briefing */
.briefing { position: relative; overflow: hidden; }
.briefing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 220px at 0% 0%, var(--akzent-weich), transparent 70%); pointer-events: none; }
.briefing > * { position: relative; }

/* Rundgang */
.tour-loch { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .48), 0 0 0 2px color-mix(in srgb, var(--akzent) 70%, #fff); transition: all 320ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; z-index: 200; }
.tour-blase { position: fixed; z-index: 201; width: min(340px, calc(100vw - 32px)); background: var(--karte); border: 1px solid var(--karte-rand); border-radius: 16px; box-shadow: var(--schatten-hoch); padding: 18px; animation: hochzoomen 200ms ease; transition: top 320ms, left 320ms; }
.tour-blase .schritt-nr { font-size: 12px; font-weight: 650; color: var(--akzent); margin-bottom: 6px; }
.tour-blase h3 { font-size: 16px; margin-bottom: 6px; }
.tour-blase p { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

/* Code-Blöcke */
pre.code { background: #0d1117; color: #e6edf3; padding: 14px 16px; border-radius: 12px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre; border: 1px solid rgba(255,255,255,.06); }
.anleitung h2 { margin: 30px 0 10px; }
.anleitung h3 { margin: 18px 0 6px; }
.anleitung p, .anleitung li { color: var(--text-2); line-height: 1.65; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onb { grid-template-columns: minmax(0, 1fr); }
  .onb-rechts { display: none; }
}
@media (max-width: 860px) {
  body { font-size: 15.5px; }
  .nav { display: none; }
  .inhalt { margin-left: 0; }
  /* Handy-Kopfzeile: Suche (Befehlspalette) und „+ Neu" wie auf dem Desktop, kompakt */
  .topbar { height: auto; min-height: 56px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; gap: 8px; }
  .topbar .suchfeld { min-width: 0; max-width: none; height: 40px; border-radius: 999px; padding: 0 14px; }
  .topbar .suchfeld .taste { display: none; }
  .topbar .suchfeld .text { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .rechtsbuendig { margin-left: 0; }
  .topbar .knopf.rund { width: 40px; height: 40px; }
  .topbar .freigaben-knopf .knopf-text { display: none; }
  .ansicht { padding: 16px 16px calc(156px + env(safe-area-inset-bottom)); } /* Tab-Leiste + Chat-Knopf darüber */
  .inhalt.voll .ansicht { padding: 0 0 calc(72px + env(safe-area-inset-bottom)); }
  h1 { font-size: 25px; }
  .tabbar {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 40; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--nav) 88%, transparent); color: var(--nav-text); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid var(--nav-rand);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: inherit; font-size: 10.5px; font-weight: 600; border-radius: 12px; opacity: .6; text-decoration: none !important; position: relative; }
  .tabbar a.aktiv { opacity: 1; color: var(--akzent); }
  .tabbar a svg { width: 23px; height: 23px; }
  .tabbar .zahl { position: absolute; top: 1px; right: 22%; min-width: 17px; height: 17px; border-radius: 9px; background: var(--fehler); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0 4px; font-weight: 700; }
  .raster.zwei, .raster.drei, .formular.zwei { grid-template-columns: minmax(0, 1fr); }
  .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wahl-karten.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl { padding: 14px; } .kennzahl .wert { font-size: 20px; }
  .karte { padding: 16px; border-radius: 16px; }
  .knopf { height: 42px; }
  .knopf.klein { height: 36px; }
  .eingabe, .feld input:not([type=checkbox]):not([type=radio]):not([type=color]), .feld select { height: 44px; font-size: 16px; }
  .chat-rahmen { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 68px - env(safe-area-inset-bottom)); }
  .chat-rahmen.mit-chat .chat-liste { display: none; }
  .chat-rahmen:not(.mit-chat) .chat-haupt { display: none; }
  .chat-kopf { padding: 0 10px; height: 54px; }
  .chat-verlauf { padding: 16px 12px 8px; }
  .eingabe-bereich { padding: 6px 10px 10px; }
  .komponist textarea { font-size: 16px; }
  .vorschlaege { grid-template-columns: minmax(0, 1fr); }
  .nachricht .blase { max-width: 88%; }
  .nachricht .aktionen { opacity: 1; }
  .onb-links { padding: 18px 18px 24px; }
  .onb-karte h1 { font-size: 27px; overflow-wrap: anywhere; }
  /* Kopf passt aufs Handy: statt 7 Balken „Schritt x von 7“ */
  .onb-kopf { gap: 10px; }
  .onb-kopf .marke { gap: 8px; min-width: 0; }
  .onb-kopf .marke > .leise, .onb-schritte { display: none; }
  .onb-schritt-text { display: block; margin-left: auto; }
  .onb-karte { max-width: 100%; min-width: 0; }
  .onb-karte > .onb-fuss { flex-wrap: nowrap; gap: 8px; }
  .onb-karte > .onb-fuss > .zeile.onb-fuss-knoepfe { flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; gap: 8px; min-width: 0; }
  .onb-fuss-knoepfe .knopf { flex: 1 1 auto; justify-content: center; }
  .onb-fuss .knopf.gross { padding: 0 16px; height: 48px; }
  .onb-fuss .onb-zurueck { width: 44px; min-width: 44px; padding: 0; justify-content: center; flex: none; }
  .onb-fuss .onb-zurueck .knopf-text { display: none; }
  .branche-eigen { max-width: 100%; height: 44px !important; }
  /* Tippflächen mind. 40 × 40 */
  .farbe, .farbe-eigen { width: 40px; height: 40px; }
  .datei-chips .chip { height: 40px; }
  .datei-chips .chip button { width: 36px; height: 36px; }
  .nummernkreis-felder { grid-template-columns: minmax(0, 1fr) 110px; }
  .team-liste .eintrag { flex-wrap: wrap; }
  .team-liste .eintrag .haupt { flex-basis: calc(100% - 60px); }
  .team-liste select.eingabe { margin-left: 48px; flex: 1 1 auto; }
  .routinen-liste .eintrag { flex-wrap: wrap; }
  .routinen-liste .eintrag .haupt { flex-basis: calc(100% - 60px); }
  .routinen-liste .eintrag-aktionen { margin-left: 48px; }
  .zusammenfassung { grid-template-columns: minmax(0, 1fr); }
  .postfach { grid-template-columns: minmax(0, 1fr); }
  .dialog { padding: 20px; }
  .schleier { align-items: end; padding: 0; }
  .schleier .dialog { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); animation: hoch 220ms ease; }
  .palette-schleier { padding: 8px; align-items: flex-start; }
  .beleg-leiste { padding: 0 10px; gap: 6px; height: 56px; }
  .beleg-leiste .gespeichert { display: none; }
  .papier-buehne { padding: 10px 0 140px; overflow-x: hidden; }
  .board { grid-template-columns: repeat(5, minmax(78vw, 1fr)); scroll-snap-type: x mandatory; }
  .board-spalte { scroll-snap-align: start; }
  /* Papier → Kartenansicht (gleiche Daten, große Tippflächen) */
  .papier { width: 100%; min-height: 0; padding: 18px 16px; border-radius: 0; box-shadow: none; font-size: 15px; font-family: var(--schrift); }
  .papier .p-kopf, .papier .p-adresszeile, .papier .p-fuss, .papier .falz, .papier .p-band { display: none; }
  .papier .p-oben { flex-direction: column; gap: 14px; min-height: 0; margin-top: 0; }
  .papier .p-anschrift, .papier .p-info { width: 100%; font-size: 15px; line-height: 1.5; }
  .papier .kunde-knopf { position: static; margin-bottom: 8px; height: 36px; font-size: 14px; }
  .papier .p-info .z > span:first-child { font-size: 14px; }
  .papier .p-titel { font-size: 21px; }
  .papier table.p-tab, .papier table.p-tab tbody, .papier table.p-tab tr, .papier table.p-tab td { display: block; width: 100% !important; }
  .papier table.p-tab thead, .papier table.p-tab colgroup { display: none; }
  .papier .p-tab tr.pos { border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; }
  .papier .p-tab tr.pos td { padding: 0; font-size: 15px; }
  .papier .p-tab tr.pos td.c-nr { grid-column: 1 / -1; font-size: 12px !important; color: #6b6b6b !important; }
  .papier .p-tab tr.pos td.c-text { grid-column: 1 / -1; }
  .papier .p-tab tr.pos td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: #6b6b6b; margin-bottom: 2px; }
  .papier .p-tab tr.pos td.c-gp { grid-column: 1 / -1; text-align: right; font-weight: 650; }
  .papier .p-tab .papier-feld { border: 1px solid #e3e3e3 !important; border-radius: 9px; padding: 8px 10px; min-height: 42px; background: #fff; }
  .papier .p-tab .kurz { font-size: 15px; } .papier .p-tab .lang { font-size: 14px; }
  .papier .p-tab .zeilen-werkzeug { display: flex !important; position: static; flex-direction: row; justify-content: flex-end; }
  .papier .p-tab td.wz { grid-column: 1 / -1; width: auto; }
  .papier .p-tab tr.titel, .papier .p-tab tr.text, .papier .p-tab tr.titelsumme { margin: 8px 0; }
  .papier .p-summen { width: 100%; font-size: 15px; }
  .papier .p-summen .z, .papier .p-summen .gesamt { line-height: 1.8; }
  .papier .p-neu .knopf { height: 42px; font-size: 14.5px; flex: 1; }
  .papier .p-neu .tastenhinweis { display: none; }
  .vorschlag-liste { min-width: 0; left: 8px !important; right: 8px; max-width: none; }
  .tabelle.mobil-karten thead { display: none; }
  .tabelle.mobil-karten tr { display: grid; grid-template-columns: 1fr auto; padding: 10px 4px; border-bottom: 1px solid var(--linie); }
  .tabelle.mobil-karten td { border: 0; padding: 2px 6px; }
  .tabelle.mobil-karten td.mobil-aus { display: none; }
}
@media (max-width: 700px) { .nur-breit { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
@media print {
  .nav, .tabbar, .topbar, .beleg-leiste, .p-neu, .zeilen-werkzeug, .bedingungen { display: none !important; }
  .inhalt { margin: 0; }
}

/* Bedingungen unter dem Papier-Inhalt (werden nicht gedruckt) */
.papier .p-bedingungen { font-family: var(--schrift); font-size: 12.5px; color: #666; margin: 3mm 0 1mm; display: flex; gap: 4mm; flex-wrap: wrap; align-items: center; background: #fafafa; border: 1px dashed #e2e2e2; border-radius: 8px; padding: 6px 10px; }
.papier .p-bedingungen .leise { color: #999; font-size: 11.5px; }

/* Chat: Bilder, Fußzeile, Aktionen, Diktat */
.nachricht .bild-anhaenge { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 6px; }
.nachricht .bild-anhaenge img { width: 168px; height: 126px; object-fit: cover; border-radius: 14px; border: 1px solid var(--linie); display: block; background: var(--karte-2); }
.nachricht .nachricht-fuss { font-size: 11px; color: var(--leise-2); margin-top: 4px; opacity: 0; transition: opacity var(--tempo); }
.nachricht:hover .nachricht-fuss { opacity: 1; }
.nachricht-aktionen { display: flex; align-items: center; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity var(--tempo); font-size: 11px; color: var(--leise-2); }
.nachricht:hover .nachricht-aktionen, .nachricht-aktionen:focus-within { opacity: 1; }
.nachricht-aktionen button { border: 0; background: transparent; color: var(--leise); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; display: inline-grid; place-items: center; }
.nachricht-aktionen button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.nachricht-aktionen button.ok { color: var(--ok); }
@media (hover: none) { .nachricht-aktionen, .nachricht .nachricht-fuss { opacity: 1; } }
.komponist .mikro.an { color: #fff; background: var(--fehler); animation: mikroPuls 1.4s infinite; }
@keyframes mikroPuls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fehler) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.datei-chips .chip img.mini { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.eingabe-bereich .drueber .komponist { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }
.komponist textarea:disabled { cursor: not-allowed; }
/* Lange Platzhalter (z. B. „Erst eine KI verbinden …") nicht halb abgeschnitten in die zweite Zeile laufen lassen */
.komponist textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Produktzeichen „Kontor" (unabhängig von Firma und Agent) */
.kontor-marke { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; background: linear-gradient(150deg, #3a3a44, #111114); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px -3px rgba(0,0,0,.35); }
.kontor-marke svg { fill: none; stroke: currentColor; stroke-width: 2.2; }
.kontor-marke.gross { width: 56px; height: 56px; border-radius: 16px; }

/* Abhaken (Aufgaben) */
.abhaken { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--linie-2); background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; color: transparent; transition: all var(--tempo); }
.abhaken:hover { border-color: var(--ok); color: var(--ok); }
.abhaken.an { background: var(--ok); border-color: var(--ok); color: #fff; }
.abhaken svg { stroke-width: 2.6; }
.chip.projekt-chip { text-decoration: none; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.chip.projekt-chip:hover { border-color: var(--akzent); color: var(--akzent); text-decoration: none; }
.titel.umbruch { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aufgabe-neu { display: flex; gap: 8px; align-items: center; padding: 10px; margin-bottom: 16px; }
.aufgabe-neu .eingabe:first-child { flex: 1; min-width: 0; }
.aufgabe-neu select { width: auto; max-width: 220px; }
@media (max-width: 700px) {
  .aufgabe-neu { flex-wrap: wrap; }
  .aufgabe-neu .eingabe:first-child { flex-basis: 100%; }
  .aufgabe-neu select { flex: 1; max-width: none; }
  .chip.projekt-chip { display: none; }
}

/* Einheitliche Auswahlfelder (statt nackter Browser-Selects) */
.feld select, select.eingabe, .seite select:not(.papier-feld), .dialog select:not(.papier-feld) {
  appearance: none; -webkit-appearance: none; height: 38px; padding: 0 34px 0 12px; border-radius: 10px; border: 1px solid var(--linie-2); background-color: var(--eingabe);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; outline: none; font-size: 14px;
}
.seite select:not(.papier-feld):focus, .dialog select:not(.papier-feld):focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.papier select.papier-feld { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right center / 12px; padding-right: 14px; cursor: pointer; }
/* Aufklappen (statt Browser-Dreieck) */
details > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--tempo); }
details[open] > summary::before { transform: rotate(90deg); }
/* Nummern in Inter mit gleich breiten Ziffern statt Schreibmaschinenschrift */
.mono { font-family: inherit; font-variant-numeric: normal; font-size: .94em; letter-spacing: 0; color: var(--text-2); }   /* Belegnummern: Inter-Tabellenziffern machen „RE - 2026 - 005“ zu weit */

.papier input[list]::-webkit-calendar-picker-indicator { display: none !important; }
.papier td[data-label="Einheit"] input { padding-left: 1.5mm; padding-right: 0; text-overflow: clip; }

.freigaben-knopf { color: var(--warn) !important; border-color: color-mix(in srgb, var(--warn) 40%, var(--linie-2)) !important; }
/* Reiter auf schmalen Bildschirmen: waagrecht scrollen mit Kanten-Verlauf */
.reiter-rahmen { position: relative; max-width: 100%; min-width: 0; }
@media (max-width: 700px) {
  .reiter-rahmen { flex-basis: 100%; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .reiter-rahmen .reiter { padding-right: 28px; }
  .filterleiste > select { flex: 1; }
  /* Belegliste als einheitliche Karte: Beleg | Betrag, darunter Kunde, darunter Status */
  .tabelle.mobil-karten tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .tabelle.mobil-karten td.c-beleg { grid-column: 1; grid-row: 1; }
  .tabelle.mobil-karten td.c-betrag { grid-column: 2; grid-row: 1; text-align: right; font-weight: 650; }
  .tabelle.mobil-karten td.c-kunde { grid-column: 1 / -1; grid-row: 2; }
  .tabelle.mobil-karten td.c-status { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 700px) {
  body { letter-spacing: -0.008em; }
  .nachricht.agent .text { line-height: 1.5; font-size: 15px; }
  .nachricht .blase { line-height: 1.42; }
}

.projekt-gruppe { margin-bottom: 22px; }
.projekt-gruppe h3 { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 14px; }
.projekt-gruppe .punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 700px) {
  .seiten-kopf { flex-wrap: nowrap; align-items: center; margin-bottom: 16px; }
  .seiten-kopf h1 { font-size: 24px; }
  .seiten-kopf .unter { display: none; }
  .seiten-kopf > .knopf, .seiten-kopf > .zeile > .knopf { height: 38px; padding: 0 12px; font-size: 14px; flex: none; }
  /* Detail-Köpfe (Projekt, Kunde): Name über die volle Breite und umbrechend, Knöpfe in einer Reihe darunter */
  .seiten-kopf.kopf-umbruch { flex-wrap: wrap; align-items: flex-start; row-gap: 12px; }
  .seiten-kopf.kopf-umbruch > .kopf-text { flex: 1 1 100%; }
  .seiten-kopf.kopf-umbruch h1 { overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; }
  .seiten-kopf.kopf-umbruch > .kopf-knoepfe { flex: 1 1 100%; flex-wrap: nowrap; gap: 8px; }
  .seiten-kopf.kopf-umbruch > .kopf-knoepfe > select { flex: 1 1 auto; min-width: 0; width: auto !important; height: 38px; min-height: 38px !important; }
  .seiten-kopf.kopf-umbruch > .kopf-knoepfe > .knopf.voll-breit { flex: 1 1 auto; min-width: 0; padding: 0 8px; justify-content: center; }
  .seiten-kopf.kopf-umbruch > .kopf-knoepfe > .knopf.voll-breit:not(.haupt) svg { display: none; }
}

.papier:not(.gesperrt) .zahlungstext { cursor: pointer; border-radius: 3px; }
.papier:not(.gesperrt) .zahlungstext:hover { background: rgba(47, 107, 255, .05); }
.papier .p-neu .tastenhinweis { opacity: 0; transition: opacity var(--tempo); }
.papier:focus-within .p-neu .tastenhinweis { opacity: 1; }
@media (max-width: 700px) {
  .beleg-leiste .nebenaktion, .beleg-leiste .betrag, .beleg-leiste .titel .chip:not(:first-of-type) { display: none !important; }
  .beleg-leiste .titel { font-size: 15px; }
  .beleg-leiste .titel .chip { font-size: 11px; height: 20px; }
}

.papier .plz-ort { display: flex; gap: .98mm; }
.papier .plz-ort .plz { flex: none; }
.papier .einzeilig { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; max-width: 40mm; margin-left: auto; line-height: 3.7mm; text-align: right; }
.papier .p-info .z { align-items: baseline; }
.papier .anschrift-leer { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 2mm; padding: 12px 14px; border: 1.5px dashed #c9cfdb; border-radius: 10px; background: #fafbfd; cursor: pointer; font-family: var(--schrift); color: #334155; transition: all 120ms; }
.papier .anschrift-leer:hover { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 5%, #fff); }
.papier .anschrift-leer .ico { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--akzent) 12%, #fff); color: var(--akzent); display: grid; place-items: center; flex: none; }
.papier .anschrift-leer b { font-size: 13.5px; } .papier .anschrift-leer small { font-size: 12px; color: #64748b; }
.papier .anschrift-tippen { border: 0; background: none; color: #64748b; font-family: var(--schrift); font-size: 12px; margin-top: 6px; cursor: pointer; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) {
  .papier .p-info .z { line-height: 1.55; padding: 3px 0; border-bottom: 1px solid #f1f1f1; }
  .papier .p-info { margin-bottom: 10px; }
  .papier .einzeilig { max-width: 60vw; }
}

.nur-schmal { display: none; }
@media (max-width: 700px) {
  .nur-schmal { display: inline; }
  .tabelle.mobil-karten td.c-kunde { grid-column: 1; grid-row: 2; min-width: 0; }
  .tabelle.mobil-karten td.c-status { grid-column: 2; grid-row: 2; text-align: right; align-self: center; }
  .tabelle.mobil-karten td.c-kunde .leise { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.chip.projekt-chip { display: inline-flex; min-width: 0; flex-shrink: 1; }
.chip.projekt-chip svg { flex: none; }
.chip.projekt-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wahl-karte { display: flex; flex-direction: column; justify-content: flex-start; }
.wahl-karte .verbunden-punkt { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; }
.wahl-karte.an .verbunden-punkt { display: none; }
.wahl-karte .verbunden-punkt svg { stroke-width: 3; }
.schluessel-chip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--karte-2); border: 1px solid var(--linie); font-size: 13.5px; }
.schluessel-chip .mono { color: var(--leise); }
.schluessel-chip .knopf { margin-left: auto; }

.agent-nachricht { margin-top: 14px; border: 1px solid var(--linie); background: var(--karte); border-radius: 14px; padding: 12px 14px; max-height: 260px; overflow: auto; }
.agent-nachricht .kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; }
.agent-nachricht .avatar { width: 24px; height: 24px; font-size: 11px; }
.agent-nachricht .text { font-size: 14px; line-height: 1.55; }

.tour-blase::before { content: ''; position: absolute; width: 12px; height: 12px; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(-45deg); }
.tour-blase[data-seite="rechts"]::before { left: -7px; top: calc(var(--pfeil) - 6px); }
.tour-blase[data-seite="unten"]::before { top: -7px; left: calc(var(--pfeil) - 6px); transform: rotate(45deg); }
.tour-blase[data-seite="oben"]::before { bottom: -7px; left: calc(var(--pfeil) - 6px); transform: rotate(225deg); }

.passwort-feld { position: relative; }
.passwort-feld input { padding-right: 42px !important; }
.passwort-feld .auge-knopf { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: var(--leise); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.passwort-feld .auge-knopf:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }

/* Toasts nie über dem Chat-Knopf oder einer Speichern-Leiste: Desktop links neben dem Knopf, Handy über Tab-Leiste und Knopf */
body:has(.speicher-leiste) .toasts { bottom: 96px; }
@media (max-width: 860px) { .toasts, body:has(.speicher-leiste) .toasts { right: 16px; left: 16px; width: auto; bottom: calc(154px + env(safe-area-inset-bottom)); align-items: center; } body.im-editor .toasts { bottom: calc(90px + env(safe-area-inset-bottom)); } }

.ideen-leiste { margin-top: 12px; gap: 6px; padding-left: 58px; }
@media (max-width: 700px) {
  .ideen-leiste { padding-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .ideen-leiste::-webkit-scrollbar { display: none; }
  .ideen-leiste .chip { flex: none; }
  .kennzahl .titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .kennzahl .neben { font-size: 12px; }
  .kennzahl:has(.funkel) .neben { padding-right: 0; }
  .kennzahl .funkel { display: none; }
}

@media (max-width: 700px) {
  .chip.projekt-chip { display: none !important; }
  .seiten-kopf:has(.reiter) { flex-wrap: wrap; }
}
/* Knöpfe in langen Dialogen bleiben sichtbar */
.dialog .knoepfe { position: sticky; bottom: -24px; margin: 22px -24px -24px; padding: 14px 24px 20px; background: linear-gradient(to bottom, transparent, var(--karte) 30%); z-index: 2; }
@media (max-width: 700px) { .dialog .knoepfe { margin: 18px -20px calc(-20px - env(safe-area-inset-bottom)); padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); bottom: calc(-20px - env(safe-area-inset-bottom)); } }


/* Belegvorlagen in der Maske — Werte kommen aus shared/beleg-vorlagen.mjs (wie in der PDF) */
.papier .p-tab thead th { background: var(--papier-band); color: var(--kopf-text, #333); border-bottom: var(--kopf-linie, 0); }
.papier .p-tab tr.pos.gerade td { background: var(--zebra); }
.papier .p-tab tr.pos td { border-bottom: var(--zeilen-linie, 0); }
.papier .p-titel { color: var(--titel-farbe, #111); }
.papier .p-summen .gesamt { background: var(--gesamt-hg); color: var(--gesamt-text, #111); border-top: var(--gesamt-linie, 0); border-bottom: var(--gesamt-linie, 0); }
.papier[data-vorlage="minimal"] .p-summen .gesamt { border-bottom-width: .2mm; }
.vorlagen-wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vorlagen-wahl .vorlage { border: 1.5px solid var(--linie-2); border-radius: 16px; padding: 10px 10px 12px; background: var(--karte); cursor: pointer; text-align: left; transition: all var(--tempo); color: inherit; font: inherit; }
.vorlagen-wahl .vorlage:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie-2)); transform: translateY(-2px); }
.vorlagen-wahl .vorlage.an { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.vorlagen-wahl .blatt { aspect-ratio: 210 / 297; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 20px -10px rgba(15,23,42,.35); background: #fff; }
.vorlagen-wahl .blatt svg { width: 100%; height: 100%; display: block; }
.vorlagen-wahl .name { font-weight: 650; font-size: 13.5px; margin-top: 9px; }
.vorlagen-wahl .text { font-size: 11.5px; color: var(--leise); line-height: 1.35; margin-top: 2px; }
@media (max-width: 700px) { .vorlagen-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Feinschliff Runde 3 ---- */
.board-karte .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board-karte .unten .fett { color: var(--text-2); font-variant-numeric: tabular-nums; }
.seiten-kopf { align-items: center; min-height: 44px; }
/* Auf Touch-Geräten keine „hängenden" Hover-Flächen */
@media (hover: none) {
  .tabelle tr:hover td, .tabelle tr.klick:hover td, .eintrag:hover, .chat-eintrag:hover, .knopf:hover, .karte.klick:hover, .board-karte:hover { background: inherit; transform: none; }
  .tabelle tr.klick:active td, .eintrag:active { background: color-mix(in srgb, var(--text) 5%, transparent); }
}
.seite:has(.speicher-leiste) { padding-bottom: 40px; }
/* Katalogvorschläge deckend */
.vorschlag-liste { background: #fff !important; box-shadow: 0 18px 40px -12px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.08) !important; backdrop-filter: none !important; }
/* Cockpit auf dem Handy: Hinweise in einer Zeile, Zeilen mit Knopf umbrechen */
@media (max-width: 700px) {
  .lage-leiste { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .lage-leiste::-webkit-scrollbar { display: none; }
  .lage-leiste .chip { flex: none; }
  .eintrag:has(> .knopf) { flex-wrap: wrap; }
  .eintrag:has(> .knopf) .haupt:not(.knopf) { flex: 1 1 calc(100% - 60px); }
  /* Freigabe-Karte: Titel über die volle Breite lesbar, Knöpfe darunter */
  .eintrag.freigabe-eintrag { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .eintrag.freigabe-eintrag > .haupt { flex: 1 1 100%; }
  .eintrag.freigabe-eintrag .titel { white-space: normal; overflow-wrap: anywhere; }
  .eintrag.freigabe-eintrag .neben { white-space: normal; }
  .eintrag.freigabe-eintrag > .knopf-gruppe { flex: 1 1 100%; display: flex; flex-wrap: nowrap; }
  .eintrag.freigabe-eintrag > .knopf-gruppe > .knopf { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .eintrag:has(> .knopf) .rechts { margin-left: 46px; }
  .eintrag:has(> .knopf) > .knopf { margin-left: auto; }
  .projekt-karte { min-height: 0 !important; }
}

.beleg-fuss-mobil { display: none; }
@media (max-width: 860px) {
  body.im-editor .tabbar { display: none !important; }
  body.im-editor .ansicht { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .beleg-fuss-mobil { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 20px; background: color-mix(in srgb, var(--karte) 88%, transparent); border: 1px solid var(--karte-rand); box-shadow: var(--schatten-hoch); backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); }
  .beleg-fuss-mobil .fett { font-size: 17px; }
  .beleg-fuss-mobil .gespeichert { font-size: 12px; color: var(--leise); }
  .papier .p-tab tr.pos td, .papier .p-tab tr.pos:hover td, .papier .p-tab tr.pos:focus-within td, .papier .p-tab tr.pos.gerade td { background: transparent !important; border-bottom: 0 !important; }
}

.dialog { position: relative; }
.dialog > h2 { padding-right: 36px; }
.dialog > p.leise { margin-bottom: 18px; }
.dialog-zu { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--leise); display: grid; place-items: center; cursor: pointer; z-index: 3; }
.dialog-zu:hover { background: color-mix(in srgb, var(--text) 11%, transparent); color: var(--text); }

.onb-karte > .onb-fuss { position: sticky; bottom: 0; z-index: 5; margin-left: -12px; margin-right: -12px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--hg) 88%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-top: 1px solid var(--linie); }
.onb-karte > .onb-fuss .zeile { flex-wrap: nowrap; }
.onb-fuss .zeile { justify-content: flex-end; }
.onb-karte h1 { letter-spacing: -.026em; }
.symbol-wahl { flex-wrap: nowrap; gap: 6px; }
.symbol-wahl button { width: 42px; height: 42px; }
.farbe-eigen { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--karte); box-shadow: 0 0 0 1px var(--linie-2); padding: 0; cursor: pointer; background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); overflow: hidden; }
.farbe-eigen::-webkit-color-swatch-wrapper { padding: 0; } .farbe-eigen::-webkit-color-swatch { border: 0; border-radius: 50%; }
.onb-rechts { align-items: flex-start; padding-top: max(40px, 7vh); }
.onb-rechts .vorschau-app { z-index: 2; }
.onb-rechts .papier-mini { right: 4%; bottom: 3%; width: min(30%, 34vh); }

.nav a.punkt { white-space: nowrap; }


.vorlagen-wahl .vorlage { position: relative; }
.vorlagen-wahl .empfehlung { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--akzent); color: var(--akzent-text); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--akzent) 70%, transparent); }



/* Briefköpfe der Belegvorlagen (Maße wie in der PDF) */
.papier .p-kopf { position: relative; }
.papier .p-kopf .firmenname { font-size: 15pt; font-weight: bold; color: var(--firmenname, #111); line-height: 1.32; }
.papier .p-kopf .kopf-zeile { font-size: 8pt; color: #6b6b6b; margin-top: 1.2mm; }
.papier .p-kopf.mitte { justify-content: center; text-align: center; }
.papier .p-kopf.mitte img { max-height: 22mm; }
.papier .p-kopf.mitte::after { content: ""; position: absolute; left: 0; right: 0; top: 25mm; border-top: .3mm solid var(--kopf-linie-farbe, #ddd); }
.papier .p-kopf.rechts { justify-content: flex-end; text-align: right; }
.papier .p-kopf.links { justify-content: flex-start; }
.papier .p-kopf.rechts .kopf-text, .papier .p-kopf.links .kopf-text { padding-top: 6mm; }
.papier .p-kopf.mitte .kopf-text { padding-top: 6mm; }
.papier .p-kopf.band { margin: -13mm -20mm 11mm -25mm; min-height: 0; height: 34mm; padding: 0 20mm 0 25mm; background: var(--kopf-band); color: var(--kopf-band-text); display: flex; align-items: center; justify-content: space-between; border-radius: 4px 4px 0 0; }
.papier .p-kopf.band .firmenname, .papier .p-kopf.band .kopf-zeile { color: inherit; }
.papier .p-kopf.band .logo-kachel { background: #fff; border-radius: 2mm; padding: 3mm; display: grid; place-items: center; }
.papier .p-kopf.band .logo-kachel img { max-height: 18mm; max-width: 48mm; display: block; }
.papier .p-kopf.klein { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.papier .p-kopf.klein img { max-height: 11mm; max-width: 40mm; }
.papier .p-kopf.klein .firmenname { font-size: 11pt; padding-top: 3.5mm; }
.papier .p-kopf.klein .kopf-zeile { font-size: 7.5pt; margin-top: 2mm; }
@media (max-width: 860px) {
  .papier .p-kopf, .papier .p-kopf.band { display: flex !important; margin: -18px -16px 16px; height: auto; min-height: 0; padding: 14px 16px; border-radius: 0; }
  .papier .p-kopf:not(.band) { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #eee; justify-content: flex-start; text-align: left; }
  .papier .p-kopf:not(.band) img { max-height: 34px !important; }
  .papier .p-kopf::after { display: none; }
  .papier .p-kopf .kopf-text { padding-top: 0 !important; }
  .papier .p-kopf.band .logo-kachel img { max-height: 34px; }
  .papier .p-kopf.band .firmenname { font-size: 17px; } .papier .p-kopf.band .kopf-zeile { font-size: 12px; }
}

.logo-vorschau { max-height: 56px; max-width: 240px; background: #fff; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linie); }
.logo-leer { height: 56px; padding: 0 16px; border-radius: 12px; border: 1.5px dashed var(--linie-2); display: grid; place-items: center; color: var(--leise); font-size: 13px; }
.farbe.logo-farbe { position: relative; }
.farbe.logo-farbe::after { content: "Logo"; position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-size: 9.5px; color: var(--leise); font-weight: 600; }

.farben { row-gap: 18px; }

/* Runde 4 */
.nav-marke img { max-height: 40px; max-width: 100%; }
.board-spalte .kopf .summe { white-space: nowrap; }
.projekt-karte .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip.neutral { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.toasts { width: min(460px, calc(100% - 32px)); }
.toast { line-height: 1.35; }
@media (max-width: 860px) {
  .papier.gesperrt .p-tab .papier-feld { border-color: transparent !important; background: transparent !important; padding-left: 0; padding-right: 0; min-height: 0; }
}

/* Mikrofon */
.mikro.an { color: #fff !important; background: var(--fehler) !important; animation: mikroPuls 1.4s infinite; }
.mikro.arbeitet { opacity: .6; }
.mikro.arbeitet svg { animation: puls 1s infinite; }
.mikro-zeit { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fehler); font-weight: 600; align-self: center; }
.chip.gespraech { color: var(--akzent); background: var(--akzent-weich); border-color: transparent; }

/* Morgen-Briefing */
.morgen-briefing { border-left: 3px solid var(--akzent); }
.morgen-briefing .sonne { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #b45309; background: linear-gradient(150deg, #fff4d6, #ffe2a8); box-shadow: inset 0 1px 0 #fff; }
.morgen-briefing .briefing-text { font-size: 14.5px; line-height: 1.6; }
.morgen-briefing .briefing-text ul, .morgen-briefing .briefing-text ol { margin: .2em 0; padding-left: 1.3em; }
.morgen-briefing .lader-zeile { display: flex; gap: 10px; align-items: center; }

/* Onboarding: KI-Blöcke, E-Mail */
.ki-block { border: 1px solid var(--linie); background: color-mix(in srgb, var(--karte) 70%, transparent); border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.ki-block-kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
details.ki-block > summary.ki-block-kopf { cursor: pointer; list-style: none; margin-bottom: 0; display: flex; }
details.ki-block > summary.ki-block-kopf::before { display: none; }
details.ki-block > summary.ki-block-kopf::-webkit-details-marker { display: none; }
details.ki-block[open] > summary.ki-block-kopf { margin-bottom: 12px; }
details.ki-block > summary.ki-block-kopf::after { content: "›"; margin-left: auto; font-size: 20px; color: var(--leise); transition: transform var(--tempo); }
details.ki-block[open] > summary.ki-block-kopf::after { transform: rotate(90deg); }
details.erklaerung { margin: 4px 2px 14px; }
.ki-block-kopf .nr { width: 26px; height: 26px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.erkannt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--ok-weich); color: var(--text); font-size: 13.5px; }
.erkannt svg { color: var(--ok); }
.erkannt .leise { flex-basis: 100%; }
details.technik { border: 1px dashed var(--linie-2); border-radius: 12px; padding: 10px 12px; }
details.technik[open] .formular { margin-top: 12px; }
.test-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 14px; }
.test-zeile.ok svg { color: var(--ok); } .test-zeile.fehler svg { color: var(--fehler); }
.test-zeile .leise { flex-basis: 100%; padding-left: 23px; }
.aufbau-liste .schritt.offen .text { color: var(--leise); }
.aufbau-liste.ruhig .schritt { animation: none; }   /* Fortschritt: nur beim ersten Zeichnen einblenden, nicht bei jeder Abfrage */
.notfall-karte { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.notfall-karte > div { flex: 1 1 260px; }

.blitz-schritte { display: grid; gap: 10px; }
.blitz-schritte > div { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.blitz-schritte b { width: 24px; height: 24px; border-radius: 50%; background: var(--akzent-weich); color: var(--akzent); display: grid; place-items: center; flex: none; font-size: 12.5px; }

/* ===== Chat überall: schwebender Knopf + Fenster ===== */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: transparent; box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--akzent) 70%, transparent), 0 2px 6px rgba(0,0,0,.12); transition: transform var(--tempo); }
.chat-fab:hover { transform: translateY(-2px) scale(1.04); }
.chat-fab .avatar { width: 56px; height: 56px; border-radius: 50%; font-size: 22px; }
.chat-fenster { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: min(440px, calc(100vw - 36px)); height: min(680px, calc(100dvh - 36px)); display: none; flex-direction: column; overflow: hidden;
  background: color-mix(in srgb, var(--karte) 94%, transparent); border: 1px solid var(--karte-rand); border-radius: 24px; box-shadow: var(--schatten-hoch); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); animation: hochzoomen 180ms ease; }
.chat-fenster.offen { display: flex; }
.fenster-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--linie); flex: none; }
.fenster-kopf .avatar { width: 32px; height: 32px; }
.fenster-bezug { margin-top: 2px; min-height: 18px; }
.bezug-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 12px; font-weight: 600; color: var(--akzent); background: var(--akzent-weich); border-radius: 7px; padding: 1px 4px 1px 7px; }
.bezug-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bezug-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; padding: 0; }
.bezug-chip button:hover { background: color-mix(in srgb, var(--akzent) 18%, transparent); }
.fenster-inhalt { flex: 1; min-height: 0; display: flex; }
.chat-rahmen.im-fenster { display: flex; height: 100%; width: 100%; grid-template-columns: none; }
.chat-rahmen.im-fenster .chat-liste { display: none !important; }
.chat-rahmen.im-fenster .chat-haupt { display: flex !important; flex: 1; min-width: 0; height: 100%; }
.chat-rahmen.im-fenster .chat-kopf { display: none !important; }
.chat-rahmen.im-fenster .chat-verlauf { padding: 14px 14px 8px; }
.chat-rahmen.im-fenster .eingabe-bereich { padding: 8px 10px 10px; }
.chat-rahmen.im-fenster .chat-start { padding: 24px 6px 10px; }
.chat-rahmen.im-fenster .chat-start h2 { font-size: 18px; }
.chat-rahmen.im-fenster .vorschlaege { grid-template-columns: 1fr; }
.chat-rahmen.im-fenster .nachricht .blase { max-width: 90%; }
@media (max-width: 860px) {
  .chat-fenster { inset: 0; width: 100%; height: 100dvh; border-radius: 0; right: 0; bottom: 0; }
}

@keyframes auffrischen { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 55%, transparent), 0 30px 60px -20px rgba(15,23,42,.25); } 100% { box-shadow: 0 0 0 14px transparent, 0 30px 60px -20px rgba(15,23,42,.25); } }
.papier.aufgefrischt { animation: auffrischen 900ms ease-out; }

@media (min-width: 1500px) { body.chat-fenster-offen .papier-buehne { justify-content: flex-start; padding-left: max(16px, calc((100vw - var(--nav-b) - 210mm - 470px) / 2)); } }

/* Schrift: Helvetica (Standard), Inter oder Systemschrift — Einstellungen → Design */
:root, [data-schrift="helvetica"] { --schrift: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif; }
[data-schrift="helvetica"] body { letter-spacing: -.006em; }   /* Inter (Windows/Linux) läuft bei Textgrößen sonst zu weit, Helvetica Neue verträgt es */
[data-schrift="helvetica"] h1, [data-schrift="helvetica"] .onb-karte h1 { letter-spacing: -.02em; }
.sprech-pille { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #111827; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); }
.sprech-pille i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: mikroPuls 1.2s infinite; }
.sprech-pille.arbeitet i { background: #a5b4fc; animation: puls 1s infinite; }
body.chat-fenster-offen .toasts { right: 480px; } @media (max-width: 860px) { body.chat-fenster-offen .toasts { right: 16px; bottom: 90px; } }

/* ===== Mein Cockpit: Tagesplanung ===== */
.cockpit-plan { max-width: 1240px; }   /* gleiche Spalte wie alle Seiten und die Kopfzeile */
.cockpit-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cockpit-zahlen .cockpit-zahl { padding: 14px 16px; text-decoration: none !important; color: inherit; transition: border-color var(--tempo), transform var(--tempo); }
.cockpit-zahlen .cockpit-zahl:hover { border-color: color-mix(in srgb, var(--akzent) 35%, var(--linie-2)); }
.cockpit-zahlen .cockpit-zahl .wert { font-size: 20px; }
.cockpit-zahlen .cockpit-zahl.warnung .wert { color: var(--fehler); }
.cockpit-zahlen .cockpit-zahl .neben { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .cockpit-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .cockpit-zahlen { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding: 2px 16px 4px 0; scroll-snap-type: x proximity; gap: 10px; }
  .cockpit-zahlen::-webkit-scrollbar { display: none; }
  .cockpit-zahlen .cockpit-zahl { flex: 0 0 auto; min-width: 150px; max-width: 200px; padding: 12px 14px; scroll-snap-align: start; }
  .cockpit-zahlen .cockpit-zahl .wert { font-size: 17px; }
}
.plan-raster { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: start; margin-top: 16px; }
.plan-haupt { padding: 20px 22px; min-height: 420px; }
.plan-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.plan-kopf h2 { font-size: 22px; letter-spacing: -.02em; }
.plan-liste { display: flex; flex-direction: column; }
.plan-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--linie); border-radius: 8px; transition: opacity .25s, transform .25s, background var(--tempo); cursor: grab; }
.plan-zeile:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.plan-zeile.weg { opacity: 0; transform: translateX(16px); }
.plan-zeile.zieht { opacity: .4; }
.plan-zeile.neu { animation: neuAufleuchten 1.6s ease; }
@keyframes neuAufleuchten { 0% { background: var(--akzent-weich); } 100% { background: transparent; } }
.plan-zeile .haupt { flex: 1; min-width: 0; cursor: pointer; }
.plan-zeile .titel { font-weight: 560; font-size: 15px; }
.plan-zeile .neben { font-size: 12.5px; color: var(--leise); }
.plan-leer { display: flex; align-items: center; gap: 10px; color: var(--leise); padding: 28px 6px; }
.plan-leer svg { color: var(--ok); }
.plan-neu { margin-top: 12px; }
.plan-neu .eingabe { background: transparent; border-style: dashed; }
.plan-rechts { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 6px; }
.plan-titel { padding: 0 4px 4px; }
.plan-spalte { display: flex; flex-direction: column; gap: 6px; }
.plan-ablage { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--karte-rand); background: var(--karte); color: var(--text); font: inherit; font-weight: 560; cursor: pointer; box-shadow: var(--schatten-s); transition: all var(--tempo); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.plan-ablage:hover { border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie-2)); }
.plan-ablage.an { background: var(--akzent); color: var(--akzent-text); border-color: transparent; }
.plan-ablage.drueber { outline: 2px dashed var(--akzent); outline-offset: 2px; }
.plan-ablage .anz { font-size: 12px; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 8%, transparent); padding: 0 6px; }
.plan-ablage.an .anz { background: rgba(255,255,255,.25); }
.plan-ablage .anz.warn { background: var(--fehler); color: #fff; }
@media (max-width: 860px) {
  .plan-raster { grid-template-columns: minmax(0, 1fr); }
  .plan-rechts { position: static; order: -1; }
  .plan-spalte { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .plan-ablage { flex: none; height: 38px; gap: 8px; }
  .plan-titel { display: none; }
}
/* Frist per Tipp: auf Touch-Geräten statt Ziehen ein Kalender-Knopf je Zeile */
.plan-zeile .plan-frist { flex: none; opacity: 0; transition: opacity var(--tempo); }
.plan-zeile:hover .plan-frist, .plan-zeile .plan-frist:focus-visible { opacity: 1; }
@media (hover: none) { .plan-zeile .plan-frist { opacity: 1; } .plan-zeile { cursor: default; } }
/* Aktionen rechtsbündig als Gruppe: Ordner bzw. Aktionsknopf („Verbinden“) jeder Zeile enden an derselben Kante */
.plan-zeile .plan-aktionen { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
@media (max-width: 860px) {
  /* Handy/Tablet hochkant: höchstens EIN Symbol je Aufgabe. Mit Projekt bleibt der Ordner (sonst nicht erreichbar);
     die Frist setzt man dann über die Zeile (Dialog „Fällig“). Unterzeile einzeilig statt drei Zeilen. */
  .plan-zeile:has(.plan-ordner) .plan-frist { display: none; }
  .plan-zeile { gap: 10px; }
  .plan-zeile .neben { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
}
.nummern-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.nummer-kachel { padding: 16px 18px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* Bezeichnung einzeilig: so stehen die Nummern aller Kacheln auf einer Höhe; Knopf immer unten */
.nummer-kachel .nummer-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nummer-kachel > .knopf { margin-top: auto !important; padding-top: 0; }
.nummer-kachel > .nummer-zuletzt { margin-bottom: 8px; }
@media (min-width: 1100px) { .nummern-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .nummern-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nummer-kachel { padding: 14px; } .nummer-kachel .nummer-naechste { font-size: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .nummer-kachel > .knopf { margin-left: -8px; } }
.nummer-naechste { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }

/* Onboarding: Morgen-Briefing-Adresse im Schritt E-Mail */
.briefing-wahl { padding: 14px 16px; }
.sonne-klein { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #b45309; background: linear-gradient(150deg, #fff4d6, #ffe2a8); box-shadow: inset 0 1px 0 #fff; }

/* Wochentage-Auswahl (Routinen) */
.tage-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.tage-wahl button { min-width: 44px; height: 36px; border-radius: 10px; border: 1px solid var(--linie); background: var(--eingabe); font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.tage-wahl button.an { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text, #fff); }


/* =====================================================================
   Ein Look für alle (21.10.): helles Glas in Schwarz-Weiß, deutlich
   transparenter; Farbe gibt es nur im Kontor-Logo (Orange).
   ===================================================================== */
.kontor-logo { display: inline-grid; place-items: center; flex: none; }
.kontor-logo svg { display: block; }
.kontor-marke { background: linear-gradient(180deg, #ff7a1a, #ff4d00); box-shadow: 0 6px 16px -7px rgba(255, 77, 0, .6); }
.nav-marke { gap: 11px; }
.nav-marke .name { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.nav-marke .unter { font-size: 11.5px; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anmelde-karte .marke .kontor-logo { margin-bottom: 4px; }
.onb-kopf .marke { display: flex; align-items: center; gap: 10px; }

.onb-rechts { background: transparent; }
/* Wortmarke: KONTOR in Versalien, Helvetica, schwarz (wie die Wortmarke der Präsentation) */
.wortmarke-k { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; color: #000; }
.nav-marke .name.wortmarke-k { font-size: 17px; font-weight: 800; letter-spacing: 0; }
.kontor-logo { object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
.nav-marke .kontor-logo { width: 38px; height: 38px; margin: -3px -2px -3px -4px; }
.onb-kopf .marke .wortmarke-k { font-size: 17px; }
.vorschau-app .va-marke .wortmarke-k { font-size: 11px; }

/* ---- Bildschirmaufnahme ---- */
/* Aufnahme-Leiste: Stil steckt in public/js/werkbank-aufnahme.js (eigenständig, auch in anderen Apps) */
.auf-rec { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; display: inline-block; margin-right: 2px; }
.auf-karte { display: grid; gap: 12px; }
.auf-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.auf-liste { display: grid; gap: 6px; }
.auf-eintrag { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linie); background: var(--karte-2, rgba(255,255,255,.4)); cursor: pointer; }
.auf-eintrag:hover { background: var(--karte); }
.auf-eintrag.statisch { cursor: default; }
.auf-eintrag .auf-symbol { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 0, 0, .05); flex: none; }
.auf-eintrag .auf-text { flex: 1; min-width: 0; display: grid; }
.auf-eintrag .auf-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auf-eintrag .auf-text small { color: var(--leise); font-size: 12px; }
.auf-dreh { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: aufdreh .8s linear infinite; vertical-align: -1px; margin-right: 6px; }
@keyframes aufdreh { to { transform: rotate(360deg); } }
.auf-detail { display: grid; gap: 14px; }
.auf-bilder { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.auf-bilder button { flex: none; border: 0; padding: 0; background: none; cursor: zoom-in; display: grid; gap: 3px; text-align: left; font: inherit; color: var(--leise); }
.auf-bilder img { width: 148px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); display: block; }
.auf-bilder small { font-size: 11px; font-variant-numeric: tabular-nums; }
.auf-auftrag { font: 13px/1.55 ui-monospace, Menlo, monospace; min-height: 300px; resize: vertical; width: 100%; }
.auf-mitschrift summary { cursor: pointer; color: var(--leise); font-size: 13px; }
.auf-mitschrift p { margin: 6px 0; font-size: 13.5px; }
.auf-gross { position: fixed; inset: 0; z-index: 1300; background: rgba(10, 10, 12, .82); display: grid; place-items: center; padding: 28px; cursor: zoom-out; }
.auf-gross img { max-width: 100%; max-height: 88vh; border-radius: 10px; box-shadow: 0 30px 80px -30px #000; }
.auf-gross span { color: rgba(255, 255, 255, .7); font-size: 13px; margin-top: 8px; }
.auf-ablauf { white-space: pre-wrap; font: 13px/1.55 ui-monospace, Menlo, monospace; max-height: 60vh; overflow: auto; margin: 0; }
.reiter.klein button { height: 30px; font-size: 12.5px; padding: 0 10px; }
.chip.gefahr { background: color-mix(in srgb, var(--gefahr, #d92d20) 12%, transparent); color: var(--gefahr, #d92d20); border-color: transparent; }
.fehler-text { color: var(--gefahr, #d92d20); font-size: 13.5px; margin: 0; }
/* Seitenleiste: Logo bzw. Name der Firma (persönliche App) */
.nav-marke .firmen-logo { max-height: 36px; max-width: 190px; object-fit: contain; object-position: left center; }
.nav-marke .firmen-name { font-weight: 750; font-size: 16.5px; letter-spacing: -.015em; line-height: 1.2; white-space: normal; }
.vorschau-app .va-marke img { max-height: 22px; max-width: 120px; object-fit: contain; }

/* Eingebettet als Arbeitsfläche im Chat (main.js EINGEBETTET): nur die Ansicht, keine Leiste/Tabbar/Topbar */
html.eingebettet .nav, html.eingebettet .tabbar, html.eingebettet .topbar, html.eingebettet .chat-fab, html.eingebettet .chat-fenster { display: none !important; }
html.eingebettet .inhalt { margin-left: 0 !important; }
html.eingebettet body { padding-bottom: 0 !important; }
html.eingebettet .seite { padding-top: 18px; }

/* ── Arbeitsfläche im Chat (chat-arbeitsflaeche.js): das Erstellte neben dem Gespräch ansehen und bearbeiten ── */
.arbeitsflaeche { display: none; position: relative; flex-direction: column; min-width: 0; min-height: 0; background: var(--hinter, #f4f5f7); border-left: 1px solid var(--linie); }
.chat-rahmen.mit-flaeche .arbeitsflaeche { display: flex; }
.af-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linie); background: color-mix(in srgb, var(--karte) 85%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); min-height: 54px; flex: none; }
.af-titel { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-knoepfe { display: flex; gap: 6px; align-items: center; flex: none; }
.af-inhalt { flex: 1; min-height: 0; position: relative; }
.af-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--hinter, #f4f5f7); }
.af-griff { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 3; touch-action: none; }
.af-griff:hover { background: color-mix(in srgb, var(--akzent) 25%, transparent); }
.af-leiste, .af-zurueck { display: none !important; }
.af-stand { font-size: 12.5px; color: var(--leise); padding: 0 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-eingabe { display: flex; gap: 8px; align-items: center; }
.af-eingabe input { flex: 1; min-width: 0; height: 42px; border-radius: 21px; border: 1px solid var(--linie-2); background: var(--eingabe); padding: 0 16px; font-size: 16px; outline: none; }
@media (min-width: 1101px) {
  .chat-rahmen.mit-flaeche:not(.im-fenster) { grid-template-columns: minmax(340px, 1fr) var(--af-b, minmax(440px, 1.45fr)); }
  .chat-rahmen.mit-flaeche:not(.im-fenster) .chat-liste { display: none; }
}
@media (max-width: 1100px) {
  .chat-rahmen.mit-flaeche .arbeitsflaeche { position: fixed; inset: 0; z-index: 90; border-left: 0; }
  .af-griff { display: none; }
  .af-zurueck { display: inline-flex !important; }
  .af-leiste { display: block !important; flex: none; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); background: color-mix(in srgb, var(--karte) 92%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
  .af-kopf { padding-top: max(10px, env(safe-area-inset-top)); }
}

/* Karten: klickbar, Aufgabe abhaken, Bilder */
.chat-karte.klickbar { cursor: pointer; transition: border-color .15s, transform .15s; }
.chat-karte.klickbar:hover { border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie-2)); }
.chat-karte.klickbar:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.chat-karte.aufgabe .ico { background: transparent; }
.chat-karte.aufgabe .ico input { width: 22px; height: 22px; accent-color: var(--akzent); cursor: pointer; }
.chat-karte.aufgabe.erledigt .haupt .fett { text-decoration: line-through; color: var(--leise); }
.chat-karte.bild-karte { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; max-width: 420px; }
.chat-karte.bild-karte .zeile { gap: 8px; padding: 0 4px 2px; }
.bild-oeffnen { border: 0; padding: 0; background: none; cursor: zoom-in; display: block; border-radius: 12px; overflow: hidden; }
.chat-karte.bild-karte img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.nachricht .bild-anhang { position: relative; }
.nachricht .bild-anhang .bild-markieren { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(17,17,17,.72); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.nachricht .bild-anhang:hover .bild-markieren, .nachricht .bild-anhang:focus-within .bild-markieren { opacity: 1; }
@media (hover: none) { .nachricht .bild-anhang .bild-markieren { opacity: 1; } }

/* Einzeichnen (einzeichnen.js) */
.ez-schleier { position: fixed; inset: 0; z-index: 95; background: rgba(12,12,14,.94); display: flex; flex-direction: column; color: #fff; }
.ez-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid rgba(255,255,255,.1); }
.ez-titel { font-weight: 650; margin-right: 6px; }
.ez-werkzeuge, .ez-farben { display: flex; gap: 4px; align-items: center; }
.ez-knopf { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.ez-knopf.an { background: #fff; color: #111; }
.ez-farbe { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.ez-farbe.an { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.ez-buehne { flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px; overflow: auto; }
.ez-flaeche { max-width: 100%; max-height: calc(100dvh - 110px); touch-action: none; cursor: crosshair; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; }
@media (max-width: 700px) { .ez-knopf span { display: none; } .ez-kopf { gap: 6px; padding: 8px; } .ez-titel { width: 100%; } }
html.eingebettet .nicht-eingebettet { display: none !important; }
.af-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px; background: #1a1a1d; }
.af-bild[hidden], .af-rahmen[hidden] { display: none; }

/* Belegmaske (Komplett-Test 22.10.2026): ungültige Zahlen, Abschlag-Unterzeile, Pflichthinweise */
.papier-feld.ungueltig { outline: 2px solid var(--fehler, #c0392b); outline-offset: -2px; background: color-mix(in srgb, var(--fehler, #c0392b) 8%, transparent); }
.p-summen .z.unterzeile, .z.unterzeile { font-size: .82em; color: var(--leise); margin-top: -2px; }
.p-hinweis-klein { font-size: .86em; color: var(--leise); margin-top: 8px; }
.z.versteckt { display: none; }

/* Chat: eigene Nachricht — die Spalte begrenzt die Breite, die Blase füllt sie (sonst bricht kurzer Text Wort für Wort um) */
.nachricht.ich .ich-spalte { max-width: min(600px, 85%); min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.nachricht.ich .ich-spalte .blase { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 860px) { .nachricht.ich .ich-spalte { max-width: 88%; } }
.chat-rahmen.im-fenster .nachricht.ich .ich-spalte { max-width: 90%; }
/* Chat: Markdown — Tabellen scrollen waagrecht statt die Spalte zu sprengen, Zitate, Code, Trennlinie */
.nachricht.agent .text .tabelle-rahmen { overflow-x: auto; margin: .4em 0 .9em; border: 1px solid var(--linie); border-radius: 10px; }
.nachricht.agent .text .tabelle-rahmen table { margin: 0; }
.nachricht.agent .text .md-tabelle th { background: var(--karte-2); white-space: nowrap; }
.nachricht.agent .text .md-tabelle tr:last-child td { border-bottom: 0; }
.nachricht.agent .text .md-tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nachricht.agent .text blockquote { margin: .3em 0 .8em; padding: 6px 12px; border-left: 3px solid var(--akzent); background: var(--karte-2); border-radius: 0 8px 8px 0; color: var(--text-2); }
.nachricht.agent .text pre { margin: .3em 0 .8em; padding: 10px 12px; background: var(--karte-2); border: 1px solid var(--linie); border-radius: 8px; overflow-x: auto; }
.nachricht.agent .text pre code { border: 0; padding: 0; background: none; white-space: pre; }
.nachricht.agent .text hr { border: 0; border-top: 1px solid var(--linie); margin: .9em 0; }
.nachricht.agent .text a { color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; }
.nachricht.agent .text li.aufgabe-punkt { list-style: none; margin-left: -1.1em; }
/* Rückfrage beantwortet */
.chat-karte.frage.beantwortet { opacity: .75; }
.chat-karte.frage.beantwortet .optionen .knopf.gewaehlt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); opacity: 1; }
.chat-karte.frage .antwort { font-size: 13px; color: var(--text-2); margin-top: 4px; }
/* Mail-Karte: Vorschau des Textes */
.chat-karte .mail-vorschau { margin-top: 6px; font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; max-height: 5.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
/* Chatliste: wartende Freigaben, Archiv */
.chat-eintrag .freigabe-punkt { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 650; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 1px 7px; }
.chat-liste .archiv-umschalter { margin: 6px 12px 10px; font-size: 12.5px; }
.nachricht.ereignis .erneut { margin-top: 6px; }
/* Tippflächen am Handy: Haken-Kreis größer greifbar (Optik bleibt), Segment-Reiter 40 px */
.abhaken { position: relative; }
.abhaken::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
@media (hover: none), (max-width: 860px) { .reiter button { height: 38px; } }
/* Glas-Dialoge: ein Dialog über einem anderen (oder über dem Chat-Knopf) darf nicht durchscheinen */
body:has(.schleier) .chat-fab { visibility: hidden; }
/* Offene Rechnungen am Handy: Zahlung/Mahnen als eigene Zeile unter der Karte (vorher ausgeblendet) */
@media (max-width: 860px) {
  .tabelle.mobil-karten td.c-aktionen { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-start; padding-top: 8px; }
  .tabelle.mobil-karten td.c-aktionen:empty { display: none; }
  .tabelle.mobil-karten td.c-aktionen .knopf { height: 38px; flex: 1; max-width: 180px; justify-content: center; }
}
/* Strg+J neben einem Beleg auf mittleren Bildschirmen: das Blatt rückt nach links und wird etwas kleiner, statt unter dem Chatfenster zu liegen */
@media (min-width: 1360px) and (max-width: 1499px) {
  body.chat-fenster-offen .papier-buehne { justify-content: flex-start; padding-right: 470px; padding-left: 16px; }
  body.chat-fenster-offen .papier { zoom: .8; }
}
/* Im Chat liegen Meldungen über dem Eingabefeld, nicht auf dem Senden-Knopf */
body:has(.chat-rahmen:not(.im-fenster) .komponist) .toasts { bottom: 112px; }
@media (max-width: 860px) { body:has(.chat-rahmen:not(.im-fenster) .komponist) .toasts { bottom: calc(150px + env(safe-area-inset-bottom)); } }
/* Handy-Belegfuß: blickdicht (kein Text scheint durch), Betrag und Stand in einer Zeile, schmal: Vorschau nur als Symbol */
@media (max-width: 860px) {
  .beleg-fuss-mobil .zahlen, .beleg-fuss-mobil .gespeichert { white-space: nowrap; }
  .beleg-fuss-mobil > div:first-child { min-width: 0; }
  body.im-editor .papier-buehne, .papier-buehne { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) { .beleg-fuss-mobil .fuss-wort { display: none; } .beleg-fuss-mobil .knopf { padding: 0 12px; } .beleg-fuss-mobil .fett { font-size: 16px; } }
/* Routinen am Handy: Aktionen unter den Text statt ihn zusammenzudrücken */
@media (max-width: 520px) {
  .routinen-liste .eintrag { flex-wrap: wrap; }
  .routinen-liste .eintrag .haupt { flex: 1 1 calc(100% - 52px); min-width: 0; }
  .routinen-liste .eintrag .titel, .routinen-liste .eintrag .neben { white-space: normal; overflow: visible; text-overflow: clip; }
  .routinen-liste .eintrag-aktionen { width: 100%; justify-content: flex-end; padding-left: 46px; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  body.chat-fenster-offen:has(.papier) .chat-fenster { width: 400px; }
  body.chat-fenster-offen .papier-buehne { justify-content: flex-start; padding-right: 420px; padding-left: 12px; }
  body.chat-fenster-offen .papier { zoom: .72; }
}
/* Feldfehler immer rot (die Feldbeschriftung .feld > span ist sonst stärker) */
.feld > span.feld-fehler, .feld span.feld-fehler, label.feld > .feld-fehler { color: var(--fehler); font-weight: 550; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
/* Löschen & Co. bleiben rot — auch im Glas-/Nacht-Stil, der den Hauptknopf sonst schwarz färbt */
[data-theme] .knopf.gefahr.haupt, .dialog .knopf.gefahr.haupt { background: var(--fehler) !important; color: #fff !important; border-color: var(--fehler) !important; }
/* Tablet hochkant (bis 860 px): Kopfdaten wie am Handy — je Zeile Bezeichnung + Wert, Trennlinie, kein Versatz bei Umbruch */
@media (max-width: 860px) {
  .papier .p-info .z { line-height: 1.5; padding: 4px 0; border-bottom: 1px solid #f1f1f1; align-items: flex-start; }
  .papier .p-info .z > span:last-child { text-align: right; }
  .papier .p-info { margin-bottom: 10px; }
}
@media (max-width: 860px) {
  .routinen-liste .eintrag-aktionen { box-sizing: border-box; max-width: 100%; }
}
@media (max-width: 520px) { .routinen-liste .eintrag-aktionen { margin-left: 0; padding-left: 0; width: 100%; } }
.nummernkreis .hilfe { white-space: nowrap; }
.board-spalte .kopf .summe, .board-spalte .unten .fett, .projekt-kachel .zahlen { white-space: nowrap; }
/* Handy/Tablet: Projektname im Belegkopf vollständig (kein Abschneiden nach zwei Zeilen), normale Zeilenhöhe */
@media (max-width: 860px) { .papier .p-info .einzeilig { -webkit-line-clamp: unset; display: block; max-width: 62vw; line-height: 1.4; overflow: visible; } }
/* Aufnahme-Leiste (Stil in public/js/werkbank-aufnahme.js, oben): unter den Dialogen der App */
:root { --auf-leiste-z: 96; }
/* Feinschliff Handy/Tablet (Endabnahme) */
.zurueck-link { display: inline-flex; align-items: center; min-height: 36px; padding-right: 10px; }
@media (max-width: 860px) {
  .mail-leiste { flex-wrap: nowrap !important; gap: 8px; }
  .mail-leiste .knopf { flex: 1; justify-content: center; white-space: nowrap; padding: 0 10px; }
  .auf-eintrag { flex-wrap: wrap; row-gap: 4px; }
  .auf-eintrag .auf-text { flex: 1 1 calc(100% - 48px); min-width: 0; }
  .auf-eintrag .auf-text b { white-space: normal; }
  .datei-kachel .datei-menue { min-width: 40px; min-height: 40px; }
}
@media (max-width: 1100px) { .arbeitsflaeche.mit-ansicht .af-knoepfe { display: none; } }   /* die eingebettete Maske hat ihre eigenen Knöpfe (PDF, Senden …) */
body:has(.schleier) .toasts { bottom: auto; top: calc(14px + env(safe-area-inset-top)); }   /* Meldungen nicht über Dialogtext */


/* =====================================================================
   Chrom & Glas — der eine Look von Kontor (gebündelt 22./23.10.2026).
   Vorher stand der Glas-Block viermal mit verschiedenen Deckungen in der
   Datei (gleiche Karten wirkten je nach Lage verschieden grau). Jetzt gilt
   NUR dieser Block. Die Deckung ist so gewählt, dass Text überall WCAG AA
   erreicht (auch über der dunklen Kugelkante) und die Chrom-Kugeln trotzdem
   als weiche Tiefe durch die Scheiben schimmern.
   ===================================================================== */
:root {
  --hg: #f0f0f2; --hg-2: #e8e8eb;
  /* Scheiben: Karte .58, Nebenfläche .44, Seitenleiste .40, Eingabe .78 — darunter verliert Text über der Kugel AA */
  --karte: rgba(255, 255, 255, .58); --karte-2: rgba(255, 255, 255, .44); --karte-rand: rgba(255, 255, 255, .72);
  --nav: rgba(255, 255, 255, .42); --nav-text: #0c0c0e; --nav-rand: rgba(255, 255, 255, .72);
  --eingabe: rgba(255, 255, 255, .78);
  --blur: blur(40px) saturate(160%) brightness(1.04);
  /* Text: Schwarz, Graphit, Grau — „leise“ hält 4,5:1 auch auf der dunkelsten Scheibe */
  --text: #0c0c0e; --text-2: #2b2b30; --leise: #55555c; --leise-2: #616168;
  --linie: rgba(0, 0, 0, .07); --linie-2: rgba(0, 0, 0, .12);
  /* Kanten von Bedienelementen (Felder, Schalter, Haken) ≥ 3:1 (WCAG 1.4.11) — Apples Systemgrau */
  --feld-rand: #86868b; --feld-rand-hover: #6e6e73;
  --fokus: #1d1d1f; --fokus-ring: 0 0 0 3px rgba(29, 29, 31, .16);
  /* Statusfarben: helle Töne nur für Punkte und Hintergründe, Text immer in der dunklen Variante */
  --ok-text: #0a6a32; --info-text: #1d4ed8; --fehler-text: #b3261e; --warn-text: #7f5200; --lila-text: #6d28d9;
  /* Rot auch als Fläche/Schrift überall dunkel genug (Weiß darauf 6:1, als Text auf Glas ≥ 4,5:1) */
  --fehler: #c62828; --fehler-weich: rgba(198, 40, 40, .1);
  --glas-kante: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .22);
  --schatten-s: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(10, 12, 20, .06);
  --schatten: var(--glas-kante), 0 1px 1px rgba(0, 0, 0, .04), 0 10px 24px -14px rgba(10, 12, 20, .30), 0 30px 60px -32px rgba(10, 12, 20, .30);
  --schatten-hoch: var(--glas-kante), 0 18px 40px -20px rgba(10, 12, 20, .35), 0 50px 100px -40px rgba(10, 12, 20, .45);
  --h-steuer: 38px;
  color-scheme: light;
}

/* ---- Bildfläche: Weiß, Silber, weiches Graphit und zwei Chrom-Kugeln ---- */
body {
  background-color: #e6e7ea;
  background-image:
    radial-gradient(46vw 40vw at -6% -12%, rgba(255, 255, 255, 1), transparent 66%),
    radial-gradient(30vw 26vw at 30% 8%, rgba(214, 226, 246, .7), transparent 70%),
    radial-gradient(40vw 34vw at 104% -6%, rgba(150, 154, 166, .6), transparent 68%),
    radial-gradient(34vw 30vw at 78% 52%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(44vw 38vw at 96% 110%, rgba(38, 40, 48, .34), transparent 70%),
    radial-gradient(36vw 30vw at 8% 108%, rgba(120, 124, 136, .45), transparent 70%),
    radial-gradient(26vw 22vw at 52% 104%, rgba(246, 232, 216, .8), transparent 70%),
    linear-gradient(155deg, #f5f5f6 0%, #e1e3e8 46%, #cfd2d9 100%);
  background-attachment: fixed;
  font-feature-settings: "cv11", "ss01", "ss03";   /* wirkt nur bei Inter (Windows/Linux), Helvetica ignoriert es */
}
/* ein schräger Lichtstreifen wie auf poliertem Metall — leise, fest im Raum */
body::before {
  content: ""; position: fixed; inset: -20vh -20vw; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, 0) 54%, transparent 60%, rgba(255, 255, 255, .25) 72%, transparent 78%);
}
/* Chrom-Kugeln: große rechts oben in der Ecke (über den Kennzahlen, nicht hinter freiem Text), kleine unten halb
   im Bild hinter den Karten, warmes Licht unten. Glanzpunkt, Silber, dunkler Ring, heller Randreflex. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; filter: blur(1.5px);
  background:
    radial-gradient(circle at 92.5% 0.5%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, .9) 1.4vw, transparent 2.8vw),
    radial-gradient(circle at 96% 6%, rgba(236, 238, 243, .95) 0, rgba(178, 183, 195, .72) 7vw, rgba(96, 100, 112, .4) 12.5vw, rgba(70, 74, 86, .3) 14.4vw, rgba(255, 255, 255, .6) 15.3vw, rgba(255, 255, 255, 0) 16.4vw),
    radial-gradient(circle at 31% 92%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .8) 1vw, transparent 2vw),
    radial-gradient(circle at 34% 97%, rgba(232, 235, 241, .9) 0, rgba(170, 176, 190, .55) 6vw, rgba(96, 100, 112, .3) 10vw, rgba(255, 255, 255, .5) 11vw, rgba(255, 255, 255, 0) 12vw),
    radial-gradient(circle at 66% 106%, rgba(252, 240, 226, .9) 0, rgba(220, 205, 188, .45) 6vw, rgba(200, 190, 178, 0) 12vw);
}
@media (max-width: 860px) {
  /* Handy: große Kugel unten rechts (nicht hinter der Chat-Begrüßung), kleine links halb im Bild */
  body::after {
    background:
      radial-gradient(circle at 82% 70%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, .85) 10px, transparent 22px),
      radial-gradient(circle at 90% 76%, rgba(236, 238, 243, .95) 0, rgba(178, 183, 195, .66) 64px, rgba(96, 100, 112, .36) 118px, rgba(70, 74, 86, .28) 134px, rgba(255, 255, 255, .55) 142px, rgba(255, 255, 255, 0) 152px),
      radial-gradient(circle at -4% 40%, rgba(232, 235, 241, .9) 0, rgba(170, 176, 190, .5) 46px, rgba(96, 100, 112, .28) 80px, rgba(255, 255, 255, .45) 88px, rgba(255, 255, 255, 0) 96px);
  }
}

/* ---- Schrift & Zahlen ---- */
.wert, .zahl, td.zahl, .nummer-naechste, .betrag { font-variant-numeric: tabular-nums; }
::placeholder { color: var(--leise-2); opacity: 1; }
.papier .papier-feld::placeholder { color: #767676; font-style: italic; }

/* ---- Fokus: überall sichtbar (WCAG 2.4.7), Graphit statt Akzent-Hauch ---- */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
.reiter button:focus-visible { border-radius: 8px; outline-offset: 1px; }
.tabelle tr.klick:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; border-radius: 8px; }
.tabelle tr.klick:focus-visible td { background: rgba(255, 255, 255, .5); }

/* ---- Grundbausteine: Höhenraster 38 px (Knopf, Feld, Auswahl, Reiter) ---- */
.knopf { height: var(--h-steuer); }
.knopf.rund { width: var(--h-steuer); }
.reiter { height: var(--h-steuer); align-items: center; }
.reiter button { height: 32px; }

/* ---- Navigation (Seitenleiste) ---- */
.nav { background: var(--nav); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.nav-gruppe { opacity: 1; color: var(--leise); }
.nav-marke .unter { opacity: 1; color: var(--leise); }
.nav a.punkt.aktiv svg { color: var(--text); }
.agent-status .zustand { opacity: 1; color: var(--leise); }
.agent-status .zustand i.warn { background: #d99a06; box-shadow: 0 0 0 3px rgba(217, 154, 6, .22); }
.agent-status .zustand i.fehler { background: var(--fehler); box-shadow: 0 0 0 3px var(--fehler-weich); }
.agent-status .zustand i.ok { background: var(--ok); }
.agent-status .zustand i.aus { background: #a1a1a6; box-shadow: none; }
/* Benutzerzeile ist ein echter Knopf (Tastatur, Vorleser) */
button.nav-fuss { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.nav .zahl, .zahl-punkt, .tabbar .zahl { background: var(--fehler-text); }
@media (min-width: 861px) {
  :root { --nav-b: 268px; }
  .nav { inset: 10px auto 10px 10px; width: calc(var(--nav-b) - 18px); border-radius: 24px; border: 1px solid transparent; box-shadow: var(--schatten); }
  .nav a.punkt.aktiv { background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(10, 12, 20, .35); }
  .agent-status { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .78); box-shadow: var(--schatten-s); }
}

/* ---- Kopfzeile: schwebende Glas-Pillen, Inhalt läuft weich darunter; bündig mit der Inhaltsspalte ---- */
.topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent !important; }
.topbar::before {
  content: ""; position: absolute; inset: 0 0 -18px 0; z-index: -1; pointer-events: none;
  /* deckend genug, dass gescrollter Text nicht lesbar unter Suche und „+“ durchläuft; unten weich auslaufend */
  background: linear-gradient(to bottom, rgba(238, 239, 242, .96) 0%, rgba(238, 239, 242, .9) 66%, rgba(238, 239, 242, 0) 100%);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.suchfeld, .topbar .knopf, .topbar .knopf.geist { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; box-shadow: var(--schatten); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); }
.suchfeld:hover { border-color: rgba(0, 0, 0, .14); }
button.suchfeld { font: inherit; color: var(--leise); text-align: left; cursor: pointer; }
.suchfeld .text { color: var(--leise); }
.topbar .knopf.rund { width: 40px; height: 40px; border-radius: 50%; }
@media (min-width: 861px) {
  .topbar { padding-top: 6px; padding-inline: max(32px, calc((100% - 1240px) / 2)); }
  .suchfeld { height: var(--h-steuer); padding: 0 16px; }
  /* Kopf-„+“ und Suche im selben 38-px-Raster wie alle Knöpfe der Seite (Touch behält 44 px) */
  .topbar .knopf.rund { width: var(--h-steuer); height: var(--h-steuer); }
}

/* ---- Flächen: Glas mit Glanz von oben und Lichtkante ---- */
.karte { background: var(--karte); border-radius: 22px; border-color: transparent; position: relative; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.karte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 60% at 20% -10%, rgba(255, 255, 255, .6), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 30%);
}
/* Lichtkante: Verlaufsrand oben links hell, unten rechts fast unsichtbar — macht die Scheibe dreidimensional */
:is(.karte, .nav, .board-spalte, .komponist, .chat-karte, .kennzahl, .beleg-leiste, .suchfeld)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .35) 28%, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
:is(.board-spalte, .komponist, .chat-karte, .suchfeld) { position: relative; }
.karte > h3 { font-size: 16px; font-weight: 650; }
.karte > h3:has(+ p.leise) { margin-bottom: 4px; }
.karte > h3 + p.leise { margin-bottom: 18px; }
.board-spalte { background: rgba(255, 255, 255, .42); border: 1px solid transparent; border-radius: 20px; min-height: 60vh; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.board-spalte .kopf .summe { font-size: 12.5px; color: var(--leise); }
.board-karte { background: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .9); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 18px -12px rgba(10, 12, 20, .35); }
.ring span, .tour-blase { background: #fff; }
.seiten-kopf .unter { font-size: 14px; color: var(--leise); margin-top: 6px; }
/* Anleitung und Profil: gleiche Seitenbreite und linke Kante wie alle Seiten, die Lesespalte steckt im Inneren */
.seite.anleitung > :not(.seiten-kopf) { max-width: 780px; }
.profil-spalte { max-width: 820px; }
.profil-wer { margin: 4px 0 18px; }
.profil-wer h2 { font-size: 21px; }
.profil-wer .unter { color: var(--leise); font-size: 14px; margin-top: 2px; }
.anleitung p, .anleitung li { max-width: 68ch; }
.anleitung > :first-child, .anleitung > .seiten-kopf:first-child { margin-top: 0; }

/* ---- Knöpfe: Glas-Pillen, Hauptknopf aus poliertem Graphit-Chrom ---- */
.knopf { background: rgba(255, 255, 255, .62); border-color: rgba(0, 0, 0, .10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px -8px rgba(10, 12, 20, .35); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); }
.knopf:hover { background: rgba(255, 255, 255, .85); border-color: rgba(0, 0, 0, .16); }
.knopf.geist { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.knopf.geist:hover { background: rgba(0, 0, 0, .05); }
.knopf.haupt {
  background: linear-gradient(180deg, #55565c 0%, #2a2b30 38%, #121216 62%, #24252a 100%); border-color: rgba(0, 0, 0, .55); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 1px 1px rgba(0, 0, 0, .2), 0 10px 22px -10px rgba(0, 0, 0, .6);
}
.knopf.haupt:hover { background: linear-gradient(180deg, #66676d 0%, #333439 38%, #18181c 62%, #2c2d32 100%); }
.knopf.haupt:focus-visible { outline-offset: 3px; }
.knopf.gefahr:not(.haupt) { color: var(--fehler-text); }
.chip.wahl, .reiter { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .8); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); }
.chip.wahl.an { background: #1d1d1f; color: #fff; border-color: transparent; }
.reiter button { color: var(--leise); }
.reiter button.an { background: rgba(255, 255, 255, .95); color: var(--text); box-shadow: inset 0 1px 0 #fff, 0 2px 8px -3px rgba(20, 30, 70, .2); }
.reiter .anz { color: var(--leise); }

/* ---- Eingaben: vertieftes Glas mit klarer Kante (3:1) und sichtbarem Fokus ---- */
.eingabe, .feld input:not([type=checkbox]):not([type=radio]):not([type=color]), .feld select, .feld textarea, select.eingabe, textarea.eingabe, .seite select:not(.papier-feld), .dialog select:not(.papier-feld) {
  background-color: var(--eingabe); border: 1px solid var(--feld-rand); box-shadow: inset 0 1px 2px rgba(10, 12, 20, .06);
}
/* Felder frei auf der Bildfläche (Filterleisten) liegen über dunklerem Grund: dort die kräftigere Kante */
:is(.eingabe, .seite select:not(.papier-feld), .suche input):not(.karte *, .dialog *, .menue *, .palette *, .chat-liste *):not(:focus, :hover) { border-color: #6e6e73; }
.eingabe:hover, .feld input:not([type=checkbox]):not([type=radio]):not([type=color]):hover, .feld select:hover, .feld textarea:hover, .seite select:not(.papier-feld):hover, .dialog select:not(.papier-feld):hover { border-color: var(--feld-rand-hover); }
.eingabe:focus, .feld input:not([type=checkbox]):not([type=radio]):not([type=color]):focus, .feld select:focus, .feld textarea:focus, .seite select:not(.papier-feld):focus, .dialog select:not(.papier-feld):focus {
  border-color: var(--fokus); background-color: rgba(255, 255, 255, .95); box-shadow: var(--fokus-ring); outline: none;
}
.fehlerhaft :is(input:not([type=checkbox]), select, textarea) { border-color: var(--fehler-text) !important; }
.plan-neu .eingabe { background-color: rgba(255, 255, 255, .45); border-style: dashed; }
.chat-liste .suche input { border-color: var(--feld-rand); }
.chat-liste .suche input:focus { border-color: var(--fokus); box-shadow: var(--fokus-ring); }
.komponist:focus-within { border-color: var(--fokus); box-shadow: var(--fokus-ring), var(--schatten); }
/* Schalter und Haken: Kontur 3:1 */
.schalter input { background: #8e8e93; }
.schalter input:checked { background: var(--ok-text); }
.schalter input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.abhaken { border-color: var(--feld-rand); }
.feld input[type=number], .feld input[inputmode=decimal], .feld input[inputmode=numeric], .feld.kurz input { max-width: 160px; }
/* Nummernkreise: Name | Format | Startnummer, Hinweis „Als Nächstes“ unter dem Feld statt über die Karte hinaus */
.nummernkreis .hilfe { white-space: normal; }
@media (min-width: 861px) {
  .nummernkreis { grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
  .nummernkreis > .fett { padding-top: 33px; padding-bottom: 0; }
  .nummernkreis-felder { grid-template-columns: minmax(0, 1fr) 190px; align-items: start; }
}

/* ---- Chips & Status: Text in der dunklen Variante (≥ 4,5:1) ---- */
.chip { color: var(--text-2); }
.chip.entwurf, .status-angebot { color: var(--warn-text) !important; }
.chip.final, .chip.versendet, .status-auftrag { color: var(--info-text) !important; }
.chip.bezahlt, .chip.angenommen, .chip.ok, .chip.teilbezahlt, .status-abgeschlossen { color: var(--ok-text) !important; }
.chip.teilbezahlt { opacity: 1; }
.chip.storniert, .chip.abgelehnt, .chip.ueberfaellig, .chip.gefahr { color: var(--fehler-text) !important; }
.status-laeuft { color: var(--lila-text) !important; }
.status-archiviert { color: var(--leise) !important; }
.cockpit-zahlen .cockpit-zahl.warnung .wert, .kennzahl.warnung .wert, .kennzahl .wert.rot, .plan-zeile .neben.rot, .feld-fehler, .fehler-text, .mikro-zeit { color: var(--fehler-text); }
.dialog-fehler, .nachricht.ereignis.fehler .hinweis { color: var(--fehler-text); }
.freigaben-knopf { color: var(--warn-text) !important; }
.chat-eintrag .freigabe-punkt { color: #7a4a00; }
.papier .p-titel .entwurf { color: #b23c00; }

/* ---- Dialoge, Palette, Menüs, Meldungen ---- */
.schleier { background: rgba(10, 10, 12, .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dialog, .palette { position: relative; background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .85); border-radius: 26px; box-shadow: var(--schatten-hoch); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); }
.palette { background: rgba(255, 255, 255, .95); }
.schleier ~ .schleier .dialog, .schleier .schleier .dialog { background: rgba(255, 255, 255, .97); }
.dialog { padding: 28px; }
.dialog h2 { font-size: 19px; margin-bottom: 18px; }
.dialog > h2:has(+ p.leise) { margin-bottom: 6px; }
.dialog > p.leise { margin-bottom: 18px; }
.dialog :not(.formular) > .feld + .feld { margin-top: 14px; }
.dialog-zu { top: 18px; right: 18px; color: var(--leise); }
/* Knopfleiste bleibt sichtbar; gleiche Deckung wie der Dialog — kein heller Balken über dem Glas */
/* Knopfleiste bleibt als feste Fußfläche sichtbar: gleiche Deckung wie der Dialog, Inhalt (z. B. Beleg-Papier) läuft verschwommen darunter */
.dialog .knoepfe { bottom: -28px; margin: 24px -28px -28px; padding: 14px 28px 22px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 0 0 26px 26px; }
.menue { background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .85); border-radius: 16px; box-shadow: var(--schatten-hoch); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.menue button:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.menue button svg { opacity: .8; }
.toast { background: rgba(29, 29, 31, .92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 16px 40px -12px rgba(0, 0, 0, .45); }
.toast button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sprech-pille { background: rgba(29, 29, 31, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ---- Tabellen & Listen ---- */
.tabelle tr:hover td { background: rgba(255, 255, 255, .4); }
/* Offene Rechnungen: Aktionen in fester Spalte, „Zahlung“ steht in jeder Zeile an derselben Stelle */
@media (min-width: 861px) { .tabelle td.c-aktionen { width: 210px; text-align: left !important; } }
.tabelle th { color: var(--leise); }

/* ---- Chat ---- */
.chat-fenster { background: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .9); backdrop-filter: blur(40px) saturate(170%); -webkit-backdrop-filter: blur(40px) saturate(170%); }
.chat-rahmen:not(.im-fenster) .chat-start { width: fit-content; max-width: min(640px, 100%); margin: 7vh auto 0; padding: 28px 32px; border-radius: 22px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--schatten); }
.nachricht .zeit, .hinweis-zeile, .nachricht .nachricht-fuss, .nachricht-aktionen { color: var(--leise); }
@media (min-width: 861px) {
  .chat-kopf { margin: 10px 14px 0; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .6); box-shadow: var(--schatten); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); }
  .chat-liste { background: rgba(255, 255, 255, .45); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); margin: 10px 0; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .6); height: calc(100dvh - 20px); }
}
@media (max-width: 860px) {
  .chat-rahmen:not(.im-fenster) .chat-start { margin-top: 4vh; padding: 24px 20px; }
}

/* ---- Belege ---- */
@media (min-width: 861px) {
  .beleg-leiste { margin: 10px 14px 0; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .62); box-shadow: var(--schatten); top: 10px; }
}
.papier { box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .04), 0 40px 80px -30px rgba(0, 0, 0, .35); }
/* Zieh-Griff nur mit Maus — per Touch wirkungslos */
@media (hover: none) { .zeilen-werkzeug .griff { display: none; } }

/* ---- Cockpit ---- */
.kennzahl { background: var(--karte); container-type: inline-size; }
/* Beträge bleiben auf einer Zeile („12.660,00 €“ ohne verwaistes €), die Schrift passt sich der Kachel an */
.kennzahl .wert { white-space: nowrap; font-size: min(26px, 14.5cqi); }
.plan-titel { color: var(--text-2); }   /* steht frei auf der Bildfläche, nicht auf Glas */
.plan-ablage { background: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .8); }
/* „Heute“ ist gewählt, aber kein zweiter Hauptknopf: hell mit Graphit-Rand */
.plan-ablage.an { background: rgba(255, 255, 255, .92); color: var(--text); border: 1.5px solid #1d1d1f; box-shadow: var(--schatten-s); }
.plan-ablage.an .anz { background: rgba(0, 0, 0, .08); }
.plan-ablage .anz.warn { background: var(--fehler-text); color: #fff; }
@media (max-width: 860px) {
  /* Kennzahlen am Handy als 2×2: alles auf einen Blick */
  .cockpit-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-right: 0; padding: 0; gap: 10px; scroll-snap-type: none; }
  .cockpit-zahlen .cockpit-zahl { min-width: 0; max-width: none; padding: 12px 13px; }
  .cockpit-zahlen .cockpit-zahl .wert { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Speichern: überall dieselbe schwebende Pille rechts unten ---- */
.speicher-leiste { position: sticky; bottom: 16px; z-index: 5; width: fit-content; max-width: 100%; margin: 18px 0 0 auto; padding: 6px; gap: 8px; flex-wrap: wrap; justify-content: flex-end; border-radius: 999px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--schatten-hoch); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); pointer-events: auto; }
.speicher-leiste .knopf { border-radius: 999px; box-shadow: none; }
.speicher-leiste .knopf.haupt { padding: 0 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 14px -8px rgba(0, 0, 0, .5); }
.speicher-leiste[hidden] { display: none !important; }
body:has(.speicher-leiste) .toasts { bottom: 96px; }

/* ---- Chat-Knopf (FAB): nirgends mehr fest im Bild. Er lag am Desktop über Tabellenzeilen, Vorlagen und Speichern,
   und der Agent war dreifach da. Am Desktop öffnen die Agent-Karte in der Seitenleiste, „Bruno“ im Menü und Strg/⌘ J
   den Chat, am Handy der erste Reiter unten. ---- */
.chat-fab { display: none !important; }
body.im-editor .chat-fab { display: none; }
@media (max-width: 860px) {
  .chat-fab { display: none !important; }     /* der Agent ist der erste Reiter unten */
  .ansicht { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .speicher-leiste { bottom: calc(84px + env(safe-area-inset-bottom)); margin-right: 0; }
  .toasts, body:has(.speicher-leiste) .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:has(.speicher-leiste:not([hidden])) .toasts { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .speicher-leiste { width: auto; margin-left: 0; border-radius: 22px; }
  .speicher-leiste .knopf { flex: 1 1 auto; height: 46px; }
}

/* ---- Handy: Tab-Leiste, Kopfzeile, Fußleisten ---- */
@media (max-width: 860px) {
  .tabbar { inset: auto 12px calc(10px + env(safe-area-inset-bottom)) 12px; border-radius: 30px; padding: 6px; border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .86); box-shadow: var(--schatten-hoch); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
  .tabbar a { opacity: 1; color: var(--leise); }
  .tabbar a.aktiv { color: var(--text); background: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 2px 8px -4px rgba(10, 12, 20, .3); }
  .beleg-fuss-mobil { background: rgba(255, 255, 255, .97); border-color: rgba(255, 255, 255, .9); }
  /* Kopfzeile ohne harte Kante: Glas, das nach unten weich ausläuft */
  .topbar::before { inset: 0 0 -22px 0; background: linear-gradient(to bottom, rgba(238, 239, 242, .96) 0%, rgba(238, 239, 242, .88) 70%, rgba(238, 239, 242, 0) 100%); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  /* Waagrecht scrollende Reiter laufen am Rand weich aus statt hart abzubrechen */
  .reiter-rahmen { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .reiter-rahmen .reiter { padding-right: 32px; }
  /* Offene Tastatur: schwebende Leisten weg, damit das Feld sichtbar bleibt */
  body:has(input:focus, textarea:focus, select:focus) :is(.tabbar, .chat-fab, .speicher-leiste, .beleg-fuss-mobil) { display: none !important; }
  .dialog { background: rgba(255, 255, 255, .97); padding: 22px 20px; }
  .dialog .knoepfe { bottom: calc(-20px - env(safe-area-inset-bottom)); margin: 18px -20px calc(-20px - env(safe-area-inset-bottom)); padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-radius: 0; }
}
@media (max-width: 700px) {
  /* Menüs als Blatt am unteren Rand: große Einträge, mit dem Daumen erreichbar */
  .menue { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: 70dvh; overflow: auto; border-radius: 18px; padding: 6px; animation: hoch 200ms ease; }
  .menue button { min-height: 48px; font-size: 16px; }
  /* abgedunkelter Hintergrund wie bei einem Blatt (Klick daneben schließt) */
  .menue { background: rgba(255, 255, 255, .97); box-shadow: 0 0 0 100vmax rgba(10, 10, 12, .22), var(--schatten-hoch); }
}
@media (max-width: 860px) {
  /* PLZ und Ort nebeneinander (1 : 2), alle anderen Felder volle Breite */
  .formular:has(> .feld :is(input[name=plz], input[name$=".plz"], input[placeholder=PLZ])):has(> .feld :is(input[name=ort], input[name$=".ort"], input[placeholder=Ort])) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .formular:has(> .feld :is(input[name=plz], input[name$=".plz"], input[placeholder=PLZ])):has(> .feld :is(input[name=ort], input[name$=".ort"], input[placeholder=Ort])) > :not(:has(input[name=plz], input[name$=".plz"], input[placeholder=PLZ], input[name=ort], input[name$=".ort"], input[placeholder=Ort])) { grid-column: 1 / -1; }
  .formular :is(input[name=plz], input[name$=".plz"], input[placeholder=PLZ]) { max-width: none; }
}

/* ---- Tippflächen auf Touch-Geräten ≥ 44 px ---- */
@media (pointer: coarse) {
  .knopf, .knopf.klein, .reiter button, .plan-ablage, .menue button, label.schalter, .zurueck-link { min-height: 44px; }
  .knopf.rund, .knopf.klein.rund, .knopf.geist.rund { min-width: 44px; min-height: 44px; }
  .reiter { height: auto; }
  .abhaken { position: relative; }
  .abhaken::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
  .papier .p-anschrift .papier-feld, .papier .p-info .papier-feld, .papier .p-betreff { min-height: 32px; padding: 4px 0; }
  .nummer-kachel a { display: inline-block; padding: 12px 0; }
}

/* ---- Einrichtung, Anmeldung, Onboarding (Grundgerüst) ---- */
.anmelde-karte .marke { justify-content: center; align-items: center; }
.anmelde-karte .marke > * { margin-inline: auto; }
.vorhang .anmelde-karte .marke .kontor-logo { width: 72px !important; height: 72px !important; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18)) drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
.onb-karte h1 { font-size: clamp(28px, 2.4vw, 34px); text-wrap: balance; }
.onb-karte > .onb-fuss { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; background: rgba(240, 240, 242, .88); }
.onb-rechts .bildunterschrift { color: var(--leise); }

/* =====================================================================
   Runde 2 (Design-Prüfung B2): mittlere Breiten, ruhigeres Glas, Kopfzeile
   ===================================================================== */

/* ---- Glas an Knöpfen und Kacheln: deckend genug, dass gleiche Bausteine überall gleich aussehen ----
   Mit .62 wirkte ein Knopf über der Kugel grau („deaktiviert“), daneben weiß. */
.knopf:not(.haupt):not(.geist) { background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); }
.knopf:not(.haupt):not(.geist):hover { background: rgba(255, 255, 255, .97); }
.kennzahl, .cockpit-zahlen .cockpit-zahl, .nummer-kachel { background: rgba(255, 255, 255, .78); }
.board-spalte { background: rgba(255, 255, 255, .6); }

/* Kleine Zahlenfelder (USt., Fristen, Gebühren) dicht nebeneinander statt in zwei sehr breiten Spalten */
.formular.zahlen-raster { grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); }
.formular.zahlen-raster > .breit { grid-column: 1 / -1; }
@media (max-width: 700px) { .formular.zahlen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Befehlspalette am Handy: Eingabe darf schrumpfen, „Abbrechen“ nie */
.palette .eingabe-zeile input { min-width: 0; }
.palette-zu { flex: none; padding-inline: 12px; white-space: nowrap; }

/* „Zum Inhalt springen“: erster Tab-Halt, nur bei Tastaturfokus sichtbar */
.sprung { position: fixed; left: -999px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: 12px; background: #1d1d1f; color: #fff !important; font-weight: 600; text-decoration: none !important; box-shadow: var(--schatten-hoch); }
.sprung:focus { left: 16px; outline: 2px solid #fff; outline-offset: 2px; }
.ansicht h1[tabindex="-1"]:focus, .ansicht[tabindex="-1"]:focus { outline: none; }

/* Reiter-Verlauf beidseitig, wenn links etwas verborgen ist; am Ende rechts kein Verlauf mehr (Klassen setzt ui.js) */
@media (max-width: 860px) {
  .reiter-rahmen.links-mehr { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 32px), transparent); }
  .reiter-rahmen.links-mehr.am-ende { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px); mask-image: linear-gradient(to right, transparent, #000 44px); }
  .reiter-rahmen.am-ende:not(.links-mehr) { -webkit-mask-image: none; mask-image: none; }
}

/* Projekt: Telefon/E-Mail des Kunden als erkennbare Links, lange Adressen brechen statt an den Kartenrand zu stoßen */
.kontakt-link { color: var(--info-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--info-text) 35%, transparent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.kontakt-link:hover { text-decoration-color: currentColor; }
/* Neue Notiz: Feld volle Breite, „Notiz speichern“ darunter rechts */
.notiz-neu { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.notiz-neu textarea { width: 100%; }
/* Dateinamen zweizeilig statt abgeschnitten: die unterscheidende Nummer am Ende bleibt lesbar */
.datei-kachel .name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.3; min-height: calc(2 * 1.3em + 10px); }

/* Chat im Vollbild (Desktop): Eingabe genauso breit wie die Kopfleiste (gleiche Kanten), Startkarte optisch mittig */
@media (min-width: 861px) {
  .chat-rahmen:not(.im-fenster) .eingabe-bereich { padding: 8px 14px 14px; }
  .chat-rahmen:not(.im-fenster) .eingabe-bereich .spalte-in { max-width: none; }
  .chat-rahmen:not(.im-fenster) .chat-start { margin-top: 18vh; }
}

/* Leerzustände: kein einzelnes Wort allein in der letzten Zeile */
.leer p { text-wrap: pretty; }

/* Firmenlogo in der Seitenleiste: breite, flache Logos dürfen die ganze Leistenbreite nutzen (vorher max. 168 × 30 px,
   dann war der Name kaum lesbar); mindestens 28 px hoch, solange die Breite reicht */
.nav-marke img { max-width: 100%; max-height: 40px; min-height: 28px; height: auto; object-fit: contain; object-position: left center; }

/* Offene Rechnungen: Guthaben der Kunden als eigener Abschnitt über der Liste */
.erstatten-karte { margin-bottom: 18px; padding: 18px 8px 8px; }
.erstatten-karte > .karten-kopf { padding: 0 12px 4px; }

/* ---- Mittlere Breite (iPad quer, kleine Laptops, 861–1199 px): Seitenleiste als Symbolleiste ----
   Mit 268 px Leiste blieben bei 1024 px nur 750 px für Tabellen und Papier (lief rechts raus). Die Leiste zeigt
   nur Symbole; mit Maus/Tastatur klappt sie beim Darüberfahren als Glas über den Inhalt auf (Texte bleiben im DOM,
   Vorleser lesen sie weiter). */
@media (min-width: 861px) and (max-width: 1199px) {
  :root { --nav-b: 92px; }
  .nav { width: 72px; padding: 12px 10px; align-items: stretch; overflow-x: hidden; transition: width var(--tempo-lang), box-shadow var(--tempo); }
  .nav a.punkt { font-size: 0; gap: 0; justify-content: center; padding: 0; height: 40px; }
  .nav a.punkt svg { width: 20px; height: 20px; }
  .nav a.punkt .zahl { position: absolute; top: 2px; right: 4px; margin: 0; font-size: 10px; min-width: 16px; height: 16px; padding: 0 4px; }
  .nav-gruppe { font-size: 0; padding: 0; height: 1px; margin: 10px 12px; background: var(--linie-2); }
  .nav-marke { padding: 4px 0 12px; justify-content: center; min-height: 48px; }
  .nav-marke img, .nav-marke .firmen-logo { max-width: 48px; max-height: 36px; min-height: 0; object-fit: contain; object-position: center; }
  .nav-marke.mit-name .name.firmen-name { display: none; }
  .nav-marke .name.firmen-name { display: block; font-size: 0; text-align: center; }
  .nav-marke .name.firmen-name::first-letter { font-size: 20px; font-weight: 750; }
  .agent-status { justify-content: center; padding: 8px 0; }
  .agent-status > :not(.avatar), .nav-fuss > :not(.avatar) { display: none; }
  .nav-fuss { justify-content: center; padding: 8px 0; }
  .ansicht { padding-inline: 24px; }
  .topbar { padding-inline: 24px; }
}
@media (min-width: 861px) and (max-width: 1199px) and (hover: hover) {
  .nav:is(:hover, :focus-within) { width: 250px; padding: 14px 12px; align-items: stretch; box-shadow: var(--schatten-hoch); background: rgba(255, 255, 255, .9); transition-delay: 120ms; }
  .nav:is(:hover, :focus-within) a.punkt { font-size: 14px; gap: 10px; justify-content: flex-start; padding: 0 10px; height: 34px; }
  .nav:is(:hover, :focus-within) a.punkt .zahl { position: static; margin-left: auto; }
  .nav:is(:hover, :focus-within) .nav-gruppe { font-size: 11px; padding: 14px 10px 6px; height: auto; margin: 0; background: none; }
  .nav:is(:hover, :focus-within) .nav-marke { padding: 6px 8px 14px; justify-content: flex-start; }
  .nav:is(:hover, :focus-within) .nav-marke :is(img, .firmen-logo) { max-width: 100%; max-height: 40px; object-position: left center; }
  .nav:is(:hover, :focus-within) .nav-marke .name.firmen-name { display: -webkit-box; font-size: 14px; text-align: left; }
  .nav:is(:hover, :focus-within) .nav-marke.mit-name .name.firmen-name { display: -webkit-box; }
  .nav:is(:hover, :focus-within) .agent-status { justify-content: flex-start; padding: 10px; }
  .nav:is(:hover, :focus-within) :is(.agent-status, .nav-fuss) > :not(.avatar) { display: revert; }
  .nav:is(:hover, :focus-within) .nav-fuss { justify-content: flex-start; padding: 8px; }
}
/* Tabellen laufen nie aus der Seite: ist der Platz zu knapp, scrollt nur die Tabelle in ihrer Karte */
.karte:has(> .tabelle) { overflow-x: auto; }
@media (min-width: 861px) and (max-width: 1199px) {
  /* Aktionsspalte nicht fest 210 px breit, Knöpfe untereinander statt nebeneinander */
  .tabelle td.c-aktionen { width: auto; white-space: normal !important; }
  .tabelle td.c-aktionen .knopf { margin: 2px 0; }
  .tabelle { font-size: 13px; }
  .tabelle td, .tabelle th { padding-inline: 9px; }
}

/* ---- Beleg-Maske: Papier passt sich an (Faktor --papier-passt setzt beleg.js aus der Bühnenbreite) ---- */
@media (min-width: 861px) {
  .papier { zoom: var(--papier-passt, 1); }
}
/* Der Titel ist wichtiger als „Gespeichert“/„festgeschrieben seit …“: die Nebentexte geben zuerst Platz ab (nie Überlappen),
   unter 1200 px bleibt vom Speicherstand nur der Haken */
.beleg-leiste .titel-text { flex-shrink: 0; }
.beleg-leiste .titel { overflow: hidden; }
.beleg-leiste > :is(.gespeichert, span.leise) { min-width: 0; flex-shrink: 100; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storniert-durch { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1199px) { .beleg-leiste .gespeichert .stand-wort { display: none; } }

/* Weniger Transparenz gewünscht (Systemeinstellung): deckende Flächen, keine Kugeln */
@media (prefers-reduced-transparency: reduce) {
  :root { --karte: #ffffff; --karte-2: #f6f7f9; --nav: #fbfbfc; --eingabe: #fff; --blur: none; }
  body::before, body::after, .karte::before { display: none; }
}

/* ===== Projektstatus: Block „Stand“ in der Projekt-Akte + Chat-Karte (Paket PROJEKTSTATUS, public/js/projektstatus.js) ===== */
.ps-stand { margin-bottom: 18px; }
.ps-stand .karten-kopf { margin-bottom: 8px; }
.ps-kopf-rechts { gap: 10px; flex-wrap: nowrap; }
.ps-meta { white-space: nowrap; }
.ps-kurz { font-size: 15.5px; line-height: 1.55; color: var(--text); margin: 0 0 14px; white-space: pre-wrap; max-width: 78ch; }
.ps-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 28px; margin-bottom: 6px; }
.ps-titel { font-size: 12px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--leise); margin: 4px 0 4px; }
.ps-punkte { list-style: none; margin: 0; padding: 0; }
.ps-punkt { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--linie); }
.ps-punkt:last-child { border-bottom: 0; }
.ps-punkt-text { flex: 1; min-width: 0; line-height: 1.4; padding: 6px 0; }
.ps-abhaken { flex: none; width: 44px; height: 44px; margin-left: -10px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: transparent; border-radius: 50%; }
.ps-abhaken::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--feld-rand); }
.ps-abhaken { position: relative; }
.ps-abhaken svg { position: relative; }
.ps-abhaken:hover, .ps-abhaken:focus-visible { color: var(--ok); }
.ps-abhaken:hover::before, .ps-abhaken:focus-visible::before { border-color: var(--ok); background: var(--ok-weich); }
.ps-punkt-zeichen { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--leise-2); margin: 0 6px 0 2px; }
.ps-risiko-zeichen { flex: none; width: 26px; display: grid; place-items: center; color: var(--warn-text); }
.ps-datum { flex: none; }
.ps-fuss { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
.ps-quellen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-quelle { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; min-height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--linie-2); background: var(--karte-2); color: var(--text-2); font: inherit; font-size: 12.5px; }
.ps-quelle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.ps-quelle { cursor: pointer; }
button.ps-quelle:hover { border-color: var(--feld-rand); color: var(--text); }
.ps-neu { background: var(--lila-weich); color: var(--lila-text); border-color: transparent; }
button.chip.ps-neu { cursor: pointer; height: 30px; border-radius: 15px; padding: 0 11px; }
.ps-neu-liste { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ps-neu-zeile { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--linie); }
.ps-neu-zeile > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-neu-zeile svg { color: var(--leise); flex: none; }
.ps-verlauf { margin-top: 10px; }
.ps-verlauf > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--leise); font-size: 13.5px; list-style: none; }
.ps-verlauf > summary::-webkit-details-marker { display: none; }
.ps-verlauf[open] > summary { color: var(--text); }
.ps-zeitleiste { list-style: none; margin: 4px 0 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 12px; }
.ps-v { display: flex; gap: 12px; align-items: flex-start; }
.ps-v-pkt { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--text-2); }
.ps-v-pkt.agent { background: var(--akzent); }
.ps-v-pkt.roh { width: 20px; height: 20px; margin: 0 -5px 0 -5px; display: grid; place-items: center; background: var(--karte-2); border: 1px solid var(--linie-2); color: var(--leise); }
.ps-v-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ps-v-kopf { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.ps-v-alt summary { cursor: pointer; color: var(--leise); }
.ps-v-alt ul { margin: 4px 0 0 18px; padding: 0; }
/* Leer: ruhig, zeigt woraus sich der Stand füllt */
.ps-leer { display: flex; align-items: center; gap: 18px; padding: 6px 0 4px; flex-wrap: wrap; }
.ps-leer-quellen { display: flex; gap: 6px; }
.ps-leer-punkt { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--karte-2); border: 1px solid var(--linie); color: var(--leise-2); }
.ps-leer-linien { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 7px; }
.ps-leer-linien span { display: block; height: 8px; border-radius: 4px; background: var(--linie); }
.ps-leer-linien span:nth-child(2) { width: 82%; }
.ps-leer-linien span:nth-child(3) { width: 56%; }
.ps-leer-titel { flex-basis: 100%; font-size: 14px; color: var(--text-2); }
/* Chat-Karte */
.chat-karte.ps-karte { align-items: flex-start; }
.ps-karte-text { margin-top: 6px; line-height: 1.45; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ps-karte-punkte { margin: 6px 0 0 18px; padding: 0; font-size: 13.5px; line-height: 1.45; }
.ps-karte-risiko { margin-top: 6px; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--warn-text); }
@media (max-width: 640px) {
  .ps-kurz { font-size: 15px; }
  .ps-spalten { grid-template-columns: minmax(0, 1fr); }
  .ps-leer-linien { min-width: 0; }
}
button.ps-neu-zeile { width: 100%; border: 0; border-bottom: 1px solid var(--linie); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 44px; padding: 0; }
button.ps-neu-zeile:hover > span:first-of-type { text-decoration: underline; }
@media (pointer: coarse) { .ps-stand .karten-kopf .knopf { min-height: 44px; min-width: 44px; } .ps-quelle { min-height: 36px; } }
/* ---------- Paket SPRACHE: Live sprechen (public/js/live-sprache.js) ---------- */
.live-huelle { position: relative; display: none; }
.live-huelle.bereit { display: inline-flex; }
.komponist .knopf.live-weg { display: none; }
.komponist .knopf.live-knopf { background: var(--text); color: #fff; border-color: transparent; }
.komponist .knopf.live-knopf:hover { background: color-mix(in srgb, var(--text) 82%, #fff); }
.komponist .knopf.live-knopf.fehler { background: var(--fehler); }
.live-hinweis { position: absolute; right: 0; bottom: calc(100% + 10px); width: max-content; max-width: min(320px, 80vw); padding: 9px 12px; border-radius: 12px;
  background: var(--karte); border: 1px solid color-mix(in srgb, var(--fehler) 45%, var(--linie-2)); color: var(--text); font-size: 13px; line-height: 1.4; box-shadow: var(--schatten-hoch, var(--schatten)); z-index: 5; white-space: normal; }
.live-hinweis[hidden] { display: none; }
.live-schleier { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--hg, #f4f5f7) 72%, transparent); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  animation: liveRein 220ms cubic-bezier(.2, .8, .2, 1); }
.live-schleier.weg { opacity: 0; transition: opacity 200ms; }
@keyframes liveRein { from { opacity: 0; } to { opacity: 1; } }
.live-buehne { width: min(560px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.live-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 4px 0; }
.live-kopf .fett { font-size: 17px; }
.live-zustand { color: var(--leise); font-size: 13.5px; min-height: 20px; }
.live-uhr { font-variant-numeric: tabular-nums; color: var(--leise); font-size: 14px; padding-top: 2px; }
.live-uhr.knapp { color: var(--fehler); font-weight: 650; }
.live-kugel { --pegel: 0; align-self: center; flex: none; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; margin: 8px 0 4px;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #d9dce1 22%, #6b7078 58%, #1d1f23 100%);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.55), inset 0 -10px 30px rgba(0,0,0,.35), inset 0 8px 18px rgba(255,255,255,.55);
  transform: scale(calc(1 + var(--pegel) * .16)); transition: transform 90ms linear; }
.live-kugel::after { content: ''; position: absolute; width: 168px; height: 168px; border-radius: 50%; box-shadow: 0 0 0 calc(var(--pegel) * 26px) color-mix(in srgb, var(--text) 8%, transparent); transition: box-shadow 90ms linear; pointer-events: none; }
.live-kugel { position: relative; }
.live-kugel.hoert { background: radial-gradient(circle at 34% 28%, #ffffff 0%, #e4e6ea 26%, #8a9099 60%, #2a2d33 100%); }
.live-kern { font-size: 34px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.live-mitschrift { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 18px;
  background: var(--karte); border: 1px solid var(--linie-2); box-shadow: var(--schatten); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.live-mitschrift:empty::before { content: 'Sag einfach, worum es geht.'; color: var(--leise); margin: auto; font-size: 14px; }
.live-zeile { display: flex; flex-direction: column; gap: 2px; max-width: 88%; }
.live-zeile.du { align-self: flex-end; align-items: flex-end; }
.live-zeile .live-wer { font-size: 11.5px; color: var(--leise); font-weight: 600; }
.live-zeile .live-text { font-size: 15px; line-height: 1.45; }
.live-zeile.du .live-text { background: var(--karte-2); padding: 7px 11px; border-radius: 14px 14px 4px 14px; }
.live-zeile.laeuft .live-text::after { content: '▍'; opacity: .45; }
.live-karte { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linie-2); background: var(--karte-2); font-size: 13.5px; }
.live-karte svg { flex: none; color: var(--leise); }
.live-karte > span:not(.live-karte-knoepfe) { flex: 1 1 180px; min-width: 0; }
.live-karte.freigabe { border-color: color-mix(in srgb, var(--warn) 45%, var(--linie-2)); background: var(--warn-weich); }
.live-karte-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.live-karte-knoepfe .knopf { min-height: 44px; min-width: 96px; }
.live-fuss { display: flex; justify-content: center; gap: 12px; padding-bottom: env(safe-area-inset-bottom); }
.live-fuss .knopf { height: 52px; min-width: 132px; border-radius: 26px; font-size: 15px; }
.live-fuss .knopf svg { width: 18px; height: 18px; }
.live-schleier .live-fuss .knopf.live-stumm.an { background: var(--text); color: #fff; }
.live-schleier .live-fuss .knopf.live-ende { background: var(--fehler); color: #fff; border-color: transparent; }
.live-schleier .live-fuss .knopf.live-ende:hover { background: color-mix(in srgb, var(--fehler) 85%, #000); }
body.live-an { overflow: hidden; }
@media (max-width: 860px) {
  .live-schleier { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .live-buehne { height: 100%; }
  .live-kugel, .live-kugel::after { width: 128px; height: 128px; }
  .live-fuss .knopf { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .live-kugel { transform: none; transition: none; } .live-schleier { animation: none; } }
/* ===== Paket wege: Weg-Wahl der Einrichtung, „Bereich ist aus“, Einstellungen → Bereiche, anderes Gerät ===== */
.weg-karten { display: grid; gap: 12px; margin-top: 18px; }
.weg-karte { min-height: 112px; padding: 18px 20px; gap: 4px; }
.weg-karte .weg-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--flaeche-2, rgba(0,0,0,.05)); margin-bottom: 8px; }
.weg-karte .titel { font-size: 17px; }
.weg-karte .text { font-size: 14px; }
.weg-karte:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.weg-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.weg-zeile .chip { display: inline-flex; align-items: center; gap: 6px; }
.weg-zeile .knopf { min-height: 32px; }
.onb-kopf .onb-geraet { min-height: 36px; }
.geraet-box .eingabe { width: 100%; font-size: 13px; }
.geraet-qr { display: grid; place-items: center; padding: 8px; background: #fff; border-radius: 14px; }
.bereich-aus .leer { padding: 40px 16px; }
.bereich-aus .leer p { max-width: 460px; margin-left: auto; margin-right: auto; }
.bereiche-liste { display: flex; flex-direction: column; }
.bereich-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linie); min-height: 56px; }
.bereich-zeile:first-child { border-top: 0; }
.bereich-zeile .haupt { flex: 1; min-width: 0; }
.bereich-zeile .bereich-ico { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--flaeche-2, rgba(0,0,0,.05)); }
.bereich-zeile .knopf { flex: none; }
.bereich-zeile .schalter { flex: none; min-height: 44px; display: inline-flex; align-items: center; }
.weg-wahl-einst { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .weg-wahl-einst { grid-template-columns: 1fr; } }
.werkstatt-anmelden .zeile { flex-wrap: wrap; }
/* =====================================================================================================================
   Baustil-Bausteine (public/js/ui.js, BAUSTIL.md) – infoTipp, werkzeugLeiste, vollbildAuswahl, platzhalter, mitMikro,
   galerie/fotoRaster, pdfVollbild, ziehen, vorabPruefung. Nur hier ändern, dann gilt es überall.
   ===================================================================================================================== */
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* infoTipp: kleines ⓘ, Tippfläche 44 px über ein unsichtbares Polster */
.info-tipp-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.info-tipp { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--leise); background: transparent; color: var(--leise); font: 700 12px/1 Georgia, "Times New Roman", serif; font-style: italic; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.info-tipp::before { content: ""; position: absolute; inset: -12px; }
.info-tipp:hover, .info-tipp[aria-expanded="true"] { color: var(--text); border-color: var(--text); }
.info-tipp-blase { position: absolute; z-index: 160; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(320px, calc(100vw - 32px)); background: #111216; color: #fff; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 450; line-height: 1.45; box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); white-space: normal; text-align: left; animation: hochzoomen 120ms ease; }
.info-tipp-blase[hidden] { display: none; }
@media (max-width: 700px) { .info-tipp-blase { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); transform: none; max-width: none; width: auto; } }

/* werkzeugLeiste: eine Reihe, Hauptaktion zuerst, ⋯ am Ende */
.werkzeug-leiste { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.werkzeug-leiste .knopf { flex: none; }
.werkzeug-mehr { width: 36px; padding: 0; }
@media (hover: none), (max-width: 860px) {
  .werkzeug-leiste .knopf, .werkzeug-mehr { height: 44px; min-width: 44px; }
}
@media (max-width: 700px) {
  /* Am Handy nur Symbole für Nebenaktionen, die Hauptaktion behält ihren Text */
  .werkzeug-leiste .knopf:not(.haupt):has(svg) .knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .werkzeug-leiste .knopf:not(.haupt):has(svg) { width: 44px; padding: 0; }
}

/* vollbildAuswahl: Suche oben, Treffer darunter, am Handy Vollbild */
.dialog.vollbild-auswahl { width: min(520px, 100%); padding: 18px 18px 10px; display: flex; flex-direction: column; }
.vollbild-auswahl-inhalt { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.vollbild-suche { width: 100%; height: 46px; font-size: 16px; border-radius: 12px; padding: 0 14px; border: 1px solid var(--feld-rand); background: var(--eingabe); color: var(--text); }
.vollbild-treffer { overflow: auto; max-height: min(60vh, 520px); display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px 8px; }
.vollbild-zeile { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: 15px; }
.vollbild-zeile:hover, .vollbild-zeile.aktiv { background: color-mix(in srgb, var(--text) 7%, transparent); }
.vollbild-zeile.frei { color: var(--text); font-weight: 600; border-top: 1px solid var(--linie); border-radius: 0 0 10px 10px; }
.vollbild-zeile svg { flex: none; color: var(--leise); }
.vz-text { display: flex; flex-direction: column; min-width: 0; }
.vz-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-unter { font-size: 13px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vollbild-leer { padding: 24px 12px; text-align: center; color: var(--leise); display: grid; place-items: center; }
@media (max-width: 860px) {
  .schleier:has(> .dialog.vollbild-auswahl) { padding: 0; place-items: stretch; }
  .dialog.vollbild-auswahl { width: 100%; max-height: none; height: 100dvh; border-radius: 0; padding: calc(14px + env(safe-area-inset-top)) 14px 0; }
  .dialog.vollbild-auswahl .vollbild-treffer { max-height: none; flex: 1; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* platzhalter in Endhöhe + Ladefehler mit „Erneut laden“ */
.platzhalter-block { display: flex; flex-direction: column; gap: 14px; padding: 14px 4px; }
.platzhalter-zeile { height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--karte-2) 0, color-mix(in srgb, var(--text) 7%, var(--karte-2)) 50%, var(--karte-2) 100%); background-size: 800px 100%; animation: schimmer 1.3s linear infinite; }
.lade-fehler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px; border-radius: 12px; background: var(--fehler-weich); color: var(--fehler-text); font-weight: 500; }
.lade-fehler .knopf { margin-left: auto; }

/* mitMikro: Mikrofon im Feld rechts */
.mit-mikro { position: relative; display: block; }
.mit-mikro > input, .mit-mikro > textarea { width: 100%; padding-right: 46px; }
.mit-mikro > .mikro { position: absolute; right: 4px; top: 4px; }
.mit-mikro > .mikro-zeit { position: absolute; right: 44px; top: 10px; }
@media (hover: none), (max-width: 860px) { .mit-mikro > .mikro { width: 40px; height: 40px; } .mit-mikro > input, .mit-mikro > textarea { padding-right: 50px; } }

/* fotoRaster + galerie: Kacheln wie in der Foto-App, Vollbild dunkel */
.foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 3px; border-radius: 12px; overflow: hidden; }
@media (max-width: 700px) { .foto-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } }
.foto-kachel { aspect-ratio: 1; border: 0; padding: 0; background: var(--karte-2); cursor: zoom-in; overflow: hidden; }
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--tempo); }
.foto-kachel:hover img { transform: scale(1.03); }
html.galerie-offen, html.galerie-offen body { overflow: hidden; }
.galerie, .pdf-vollbild { position: fixed; inset: 0; z-index: 400; background: #0b0b0d; color: #fff; display: flex; flex-direction: column; animation: einblenden 140ms ease; }
.galerie-kopf { display: flex; align-items: center; gap: 6px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; flex: none; }
.galerie-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; font-size: 14px; }
.galerie-zahl { font-weight: 600; }
.galerie-name { color: rgba(255,255,255,.78); font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-vollbild .galerie-name { color: #fff; font-size: 14px; font-weight: 600; }
.galerie-knopf { width: 44px; height: 44px; border: 0; border-radius: 22px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.galerie-knopf:hover, .galerie-knopf:focus-visible { background: rgba(255,255,255,.14); }
.galerie-knopf svg { width: 22px; height: 22px; }
.galerie-buehne { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; user-select: none; }
.galerie-bild { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 220ms cubic-bezier(.2,.8,.2,1); cursor: zoom-in; }
.galerie-bild.zoom { transform: scale(2.2); cursor: zoom-out; }
.galerie-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 24px; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.galerie-pfeil.links { left: 12px; } .galerie-pfeil.rechts { right: 12px; }
.galerie-pfeil:disabled { opacity: 0; pointer-events: none; }
@media (hover: none) { .galerie-pfeil { display: none; } }
.pdf-vollbild-flaeche { flex: 1; min-height: 0; background: #2a2a2e; }
.pdf-vollbild-rahmen { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.pdf-vollbild-ersatz { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #fff; }
.pdf-vollbild-ersatz .knopf { min-width: 220px; }
@media (max-width: 860px) { .dialog.vollbild-auswahl { background: var(--hg); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ziehen: Griff mit 44er Tippfläche, Platzhalter in Elementgröße */
.griff { width: 32px; height: 44px; border: 0; background: transparent; color: var(--leise); display: grid; place-items: center; cursor: grab; touch-action: none; border-radius: 8px; flex: none; }
.griff:hover, .griff:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.griff svg { width: 18px; height: 18px; }
.wird-gezogen { position: relative; z-index: 20; box-shadow: var(--schatten-hoch); background: var(--karte); border-radius: 12px; opacity: .96; pointer-events: none; }
.zieh-platz { border: 2px dashed var(--linie-2); border-radius: 12px; box-sizing: border-box; }
.ziehbar.zieht { user-select: none; }

/* vorabPruefung: Prüfliste mit Zeichen, offene Punkte zuerst sichtbar */
.pruef-liste { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 4px; }
.pruef-punkt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 10px; }
.pruef-punkt.offen { background: var(--fehler-weich); }
.pruef-punkt.warnung { background: var(--warn-weich); }
.pruef-zeichen { width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.pruef-punkt.ok .pruef-zeichen { background: var(--ok-weich); color: var(--ok-text); }
.pruef-punkt.offen .pruef-zeichen { background: var(--fehler); color: #fff; }
.pruef-punkt.warnung .pruef-zeichen { background: var(--warn); color: #fff; }
.pruef-text { flex: 1; min-width: 0; }
.pruef-punkt .knopf { flex: none; }

/* Tippflächen auf Touch-Geräten (Grundsatz 4): Knöpfe, Felder, Auswahl, Navigation und Aufklapper mindestens 44 px.
   Gefunden mit `npm run pruefen:oberflaeche`; das Papier der Belegmaske folgt bewusst den PDF-Maßen. */
@media (hover: none) {
  :root { --h-steuer: 44px; }
  .eingabe:not(textarea), .feld input:not([type=checkbox]):not([type=radio]):not([type=color]), .feld select, select.eingabe,
  .seite select:not(.papier-feld), .dialog select:not(.papier-feld) { height: 44px; min-height: 44px; }
  .nav a.punkt { min-height: 44px; }
  .topbar .suchfeld { height: 44px; }
  details > summary { min-height: 44px; }
  .knopf { min-width: 44px; }
  a.kontakt-ziel { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Integration Welle 5: kurze Reiter (z. B. „LV“) und Zieh-Griffe am Touch mindestens 44 px breit */
@media (pointer: coarse) {
  .reiter button { min-width: 44px; justify-content: center; }
  .griff { width: 44px; }
  .seiten-kopf.kopf-umbruch > .kopf-knoepfe > select, .kopf-knoepfe select.eingabe { height: 44px; min-height: 44px !important; }
}
/* Projekt-Akte am Handy: drei Reiter + „Mehr“ passen ohne Scrollen – kein Kanten-Verlauf */
.reiter-rahmen.mit-mehr { -webkit-mask-image: none; mask-image: none; }
.reiter-rahmen.mit-mehr .reiter { padding-right: 3px; }

/* ---------- PDF einzeichnen (w10): Seitenbilder in der Arbeitsfläche, Seitenwahl ---------- */
.af-seiten { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #1a1a1d; padding: 12px 10px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.af-seiten[hidden] { display: none; }
.af-seite { margin: 0; width: 100%; max-width: 900px; }
.af-seite img { display: block; width: 100%; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.35); min-height: 120px; }
.af-seite figcaption { color: rgba(255,255,255,.7); font-size: 12px; text-align: center; margin-top: 6px; }
.af-seiten-hinweis { margin: auto; max-width: 420px; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; line-height: 1.45; }
.pz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; max-height: min(64vh, 640px); overflow-y: auto; padding: 4px; }
.pz-seite { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--linie-2); background: var(--karte); border-radius: 10px; padding: 8px; cursor: pointer; font: inherit; color: inherit; min-height: 44px; }
.pz-seite:hover, .pz-seite:focus-visible { border-color: var(--text); }
.pz-seite img { width: 100%; aspect-ratio: 1 / 1.414; object-fit: contain; background: #fff; border-radius: 4px; }
.pz-seite span { font-size: 13px; }
/* Werkstatt am Handy liegt sehr weit oben – das Einzeichnen darüber, Dialoge (Text im Bild) noch darüber */
@media (max-width: 860px) { body.ws-voll .ez-schleier, body.ws-geteilt .ez-schleier, body.ws-klein .ez-schleier { z-index: 169; } }

/* Ein ChatGPT-Konto, zwei Anmeldungen (public/js/ein-konto.js) */
.ein-konto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-top: 12px; border-radius: 14px; border: 1px solid var(--linie-2, var(--linie)); background: var(--karte-2, var(--karte)); }
.ein-konto > .knopf, .ein-konto > .wb-knopf { min-height: 44px; }
.ein-konto-text { flex: 1 1 220px; min-width: 0; }
.ein-konto-text .fett { display: flex; align-items: center; gap: 6px; }
.ein-konto-code { display: grid; gap: 10px; width: 100%; justify-items: start; }
.ein-konto-code .geraete-code { font-size: 24px; padding: 10px 16px; }
.ein-konto-knoepfe { gap: 8px; flex-wrap: wrap; }
.ein-konto-knoepfe .knopf, .ein-konto-knoepfe .wb-knopf { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.ein-konto-fertig { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ein-konto-fertig svg { color: var(--ok, #16a34a); }
.ein-konto.dunkel { background: #121215; border-color: #2a2a30; color: #f2f2f7; margin: 10px 0 0; }
.ein-konto.dunkel .geraete-code { background: #0c0c0e; border-color: #3a3a40; color: #fff; }
.ein-konto.dunkel .leise { color: #a1a1aa; }
.ein-konto-hinweis { display: inline-flex; align-items: center; gap: 4px; }
.ein-konto > .knopf, .ein-konto > .wb-knopf { white-space: normal; text-align: left; max-width: 100%; height: auto; padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 560px) { .ein-konto > .knopf, .ein-konto > .wb-knopf { width: 100%; justify-content: center; text-align: center; } }
/* w12: Reiter nie zusammendrücken (sonst laufen die Texte am Handy ineinander) – lieber waagrecht scrollen */
.reiter > button { flex-shrink: 0; }
/* w12: schmale Seitenleiste (861–1199 px, z. B. Tablet quer): unten nur das Kürzel – Name und Rolle liefen sonst Buchstabe
   für Buchstabe aus der Leiste (der Link hat display:flex im Element, die alte Regel griff nicht); Abmelden steht im Profil */
@media (min-width: 861px) and (max-width: 1199px) {
  .nav-fuss > a { justify-content: center; padding: 8px 0 !important; }
  .nav-fuss > a > :not(.avatar) { display: none; }
}
@media (min-width: 861px) and (max-width: 1199px) and (hover: hover) {
  .nav:is(:hover, :focus-within) .nav-fuss > a { justify-content: flex-start; padding: 8px 4px 8px 8px !important; }
  .nav:is(:hover, :focus-within) .nav-fuss > a > :not(.avatar) { display: revert; }
}