/* =====================================================================
   Oberfläche V2 „Schiefer“ - Stilschicht über styles.css.
   Gilt nur unter html.v2 (Kennzeichen zyan_v2 im Browser, siehe v2.html
   und v2.js). Ohne die Klasse hat diese Datei keine Wirkung, die alte
   Oberfläche bleibt unangetastet.

   Aufbau:
     1) Farben und Schrift - Grau mit einem gedämpften Blau, Farbe nur für
        die Frist (Bernstein < 2 h, Rot überfällig). IBM Plex Sans/Mono.
     2) Bauteile, die in beiden Breiten gelten (Zeilen, Avatare, Gruppen,
        Fristen-Achse, Knöpfe, Karten, Anmeldung).
     3) Desktop ab 861px: Kopfleiste über die ganze Breite, Seitenleiste
        mit Lagen + Kanälen + Bereichen, Liste, Lesebereich. Das Seitenfeld
        bleibt der ausziehbare Rand aus styles.css (Hover).
     4) Handy bis 860px: Kopfleiste oben, Tab-Leiste unten wie bisher.
   ===================================================================== */

/* ---------- 1) Farben und Schrift ---------- */
html.v2 {
  --bg: #f5f6f7;
  --surface: #ffffff;
  --surface-2: #f0f1f3;
  --surface-hover: #eceef1;
  --border: #e3e5e9;
  --border-strong: #d0d3d9;
  --text: #17191c;
  --text-muted: #62676f;
  --text-faint: #8d929a;
  --accent: #5b6f99;
  --accent-strong: #44577f;
  --accent-tint: rgba(91, 111, 153, 0.13);
  --good: #2f7f5f;
  --good-tint: rgba(47, 127, 95, 0.12);
  --danger: #b8423d;
  --danger-tint: rgba(184, 66, 61, 0.12);
  --warn: #a8731a;
  --warn-tint: rgba(196, 140, 40, 0.16);
  --shadow: 0 1px 2px rgba(23, 25, 28, 0.05);
  --shadow-md: 0 6px 20px rgba(23, 25, 28, 0.08);
  --overlay-shadow: -8px 0 24px rgba(23, 25, 28, 0.08);
  --radius: 6px;
  --radius-sm: 5px;
  --fs-base: 13.5px;
  color-scheme: light;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  html.v2:not([data-theme="light"]) {
    --bg: #1a1c20;
    --surface: #1f2126;
    --surface-2: #26292f;
    --surface-hover: #2c2f36;
    --border: #2c2f36;
    --border-strong: #383c44;
    --text: #e8e8e5;
    --text-muted: #9b9ea4;
    --text-faint: #6f737b;
    --accent: #8a98b8;
    --accent-strong: #b7c2d9;
    --accent-tint: rgba(138, 152, 184, 0.18);
    --good: #7fb59a;
    --good-tint: rgba(127, 181, 154, 0.16);
    --danger: #d47070;
    --danger-tint: rgba(212, 112, 112, 0.16);
    --warn: #d4a24c;
    --warn-tint: rgba(212, 162, 76, 0.16);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --overlay-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
html.v2[data-theme="dark"] {
  --bg: #1a1c20;
  --surface: #1f2126;
  --surface-2: #26292f;
  --surface-hover: #2c2f36;
  --border: #2c2f36;
  --border-strong: #383c44;
  --text: #e8e8e5;
  --text-muted: #9b9ea4;
  --text-faint: #6f737b;
  --accent: #8a98b8;
  --accent-strong: #b7c2d9;
  --accent-tint: rgba(138, 152, 184, 0.18);
  --good: #7fb59a;
  --good-tint: rgba(127, 181, 154, 0.16);
  --danger: #d47070;
  --danger-tint: rgba(212, 112, 112, 0.16);
  --warn: #d4a24c;
  --warn-tint: rgba(212, 162, 76, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --overlay-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
html.v2[data-theme="light"] {
  --bg: #f5f6f7;
  --surface: #ffffff;
  --surface-2: #f0f1f3;
  --surface-hover: #eceef1;
  --border: #e3e5e9;
  --border-strong: #d0d3d9;
  --text: #17191c;
  --text-muted: #62676f;
  --text-faint: #8d929a;
  --accent: #5b6f99;
  --accent-strong: #44577f;
  --accent-tint: rgba(91, 111, 153, 0.13);
  --good: #2f7f5f;
  --good-tint: rgba(47, 127, 95, 0.12);
  --danger: #b8423d;
  --danger-tint: rgba(184, 66, 61, 0.12);
  --warn: #a8731a;
  --warn-tint: rgba(196, 140, 40, 0.16);
  --shadow: 0 1px 2px rgba(23, 25, 28, 0.05);
  --shadow-md: 0 6px 20px rgba(23, 25, 28, 0.08);
  --overlay-shadow: -8px 0 24px rgba(23, 25, 28, 0.08);
  color-scheme: light;
}
html.v2 body { font-family: inherit; background: var(--bg); }
html.v2 .v2-mono, html.v2 .ticket-time, html.v2 .v2-tick, html.v2 .v2-chip, html.v2 .v2-jetzt i,
html.v2 .topbar-stat strong, html.v2 .rail-item .count, html.v2 .v2-lage b {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
html.v2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html.v2 .mark { background: #f4f5f7; box-shadow: 0 0 0 1px rgba(23, 25, 28, 0.08); }

/* ---------- 2) Bauteile in beiden Breiten ---------- */
/* Knöpfe, Chips, Felder: gleiche Radien, kein Blau außer beim Hauptknopf. */
html.v2 .btn { font-weight: 600; border-radius: var(--radius); }
html.v2 .btn-primary { background: var(--accent); color: #fff; box-shadow: none; }
html.v2 .btn-primary:hover { background: var(--accent-strong); box-shadow: none; }
/* Der bestätigende Knopf einer Rückfrage vor etwas Unwiderruflichem
   (app-core.js::fragen(), 3gw). Muss hier stehen und nicht nur in
   styles.css: html.v2 .btn-primary hat dieselbe Gewichtung und kommt
   später - der Knopf wäre sonst blau wie jeder andere. */
html.v2 .btn-primary.danger { background: var(--danger); color: #fff; }
html.v2 .btn-primary.danger:hover { background: var(--danger); filter: brightness(0.92); }
html.v2 .btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
html.v2 .btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
html.v2 .chip { background: var(--surface); }
html.v2 .form-row input, html.v2 .form-row select, html.v2 .form-row textarea,
html.v2 .triage-toolbar-field select, html.v2 .search input {
  background: var(--surface); border-color: var(--border); border-radius: var(--radius);
}
html.v2 .form-row input:focus, html.v2 .form-row select:focus, html.v2 .form-row textarea:focus { border-color: var(--accent); background: var(--surface); }
html.v2 .switch { background: var(--border-strong); }
html.v2 .switch.on { background: var(--accent); }
html.v2 .avatar { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-strong); margin-top: 0; }
html.v2 .avatar.active { box-shadow: 0 0 0 2px var(--accent); }

/* Kanäle sind Kürzel, keine Farben: alle Abzeichen grau. */
html.v2 .badge, html.v2 .badge.kaufland, html.v2 .badge.ebay, html.v2 .badge.jtlshop, html.v2 .badge.kleinanzeigen,
html.v2 .badge.merkandi, html.v2 .badge.hood, html.v2 .badge.shopify {
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px;
}
html.v2 .status-pill.zu_bearbeiten { background: var(--accent-tint); color: var(--accent-strong); }
html.v2 .status-pill.warten { background: var(--surface-2); color: var(--text-muted); }

/* Kanalliste (Seitenleiste bzw. Chips auf dem Handy). */
html.v2 .rail-item { border-radius: var(--radius-sm); font-weight: 500; }
html.v2 .rail-item[hidden] { display: none; }
html.v2 .rail-item.active { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
html.v2 .rail-item .count { color: var(--text-faint); font-size: 11px; background: var(--surface-2); border-radius: 999px; padding: 0 7px; line-height: 18px; }
html.v2 .rail-item.active .count { background: transparent; color: var(--accent-strong); }
html.v2 .rail-gruppe { color: var(--text-faint); font-weight: 600; letter-spacing: 0.08em; }

/* Suchfeld als Zeile unter dem Listenkopf; die Sortier-Auswahl ersetzen die
   Schalter darunter. */
html.v2 .v2-suchzeile { display: flex; align-items: center; padding: 0 16px 8px; flex: none; }
html.v2 .v2-suchzeile .topbar-search { flex: 1 1 auto; min-width: 0; position: relative; display: flex; }
html.v2 .v2-suchzeile .search-toggle { position: absolute; left: 2px; top: 0; height: 34px; width: 30px; pointer-events: none; color: var(--text-faint); background: none; }
html.v2 .v2-suchzeile .topbar-search input,
html.v2 .v2-suchzeile .topbar-search:hover input,
html.v2 .v2-suchzeile .topbar-search.search-open input {
  width: 100%; flex: 1; opacity: 1; margin: 0; padding: 6px 12px 6px 32px; height: 34px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); transition: none;
}
html.v2 .v2-suchzeile .topbar-search input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
html.v2 .v2-segzeile { display: flex; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); flex: none; }
html.v2 .v2-seg { flex: 1; min-width: 0; display: flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
html.v2 .v2-seg button {
  flex: 1; min-width: 0; padding: 5px 6px; border: none; background: none; border-radius: 6px; font-family: inherit;
  font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.v2 .v2-seg button b { font-weight: 400; margin-left: 5px; color: var(--text-faint); font-size: 11.5px; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
html.v2 .v2-seg button:hover { color: var(--text); }
html.v2 .v2-seg button.on { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
html.v2[data-theme="dark"] .v2-seg button.on { background: var(--surface-hover); box-shadow: none; }

/* „Ungelesen“ schaltet zu und ab, es ist keine dritte Sortierung - deshalb
   steht es abgesetzt neben der Gruppe und nicht darin (Matteo, 21.09.2026:
   zwei Sortierungen im selben Listenkopf). Als Schalter gezeichnet: Rahmen
   statt Schiene, eingeschaltet in der Akzentfarbe. */
html.v2 .v2-seg-filter {
  flex: none; margin-left: 8px; padding: 6px 10px; font-family: inherit; font-size: 12.5px;
  color: var(--text-muted); background: none; border: 1px solid var(--border);
  border-radius: 8px; white-space: nowrap; cursor: pointer;
}
html.v2 .v2-seg-filter b { font-weight: 400; margin-left: 5px; color: var(--text-faint); font-size: 11.5px; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
html.v2 .v2-seg-filter:hover { color: var(--text); border-color: var(--border-strong); }
html.v2 .v2-seg-filter.on { background: var(--accent-tint); border-color: transparent; color: var(--accent-strong); font-weight: 500; }
html.v2 .v2-seg-filter.on b { color: var(--accent-strong); }

/* Listenzeile: Avatar links, Text rechts, eine Vorschauzeile. */
html.v2 .ticket { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 9px 16px; border-bottom: 1px solid var(--border); }
html.v2 .ticket:hover { background: var(--surface-hover); }
html.v2 .ticket.active { background: var(--accent-tint); }
html.v2 .ticket.active::before { display: none; }
html.v2 .v2-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none; margin-top: 1px;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
}
html.v2 .ticket.unread .v2-av { background: var(--accent-tint); color: var(--accent-strong); border-color: transparent; }
html.v2 .v2-body { min-width: 0; }
/* Auswahlkästchen liegt beim Überfahren mittig auf dem Avatar statt als
   leerer Platzhalter vor dem Namen. */
html.v2 .ticket-check { position: absolute; left: 25px; top: 19px; margin: 0; z-index: 2; }
/* Der helle Grund nur fürs LEERE Kästchen. Früher stand er in der Regel
   darüber und galt damit für alle - er wiegt schwerer als
   `.ticket-check.an` in styles.css und übermalte so auch das angehakte,
   Farbe und Häkchen inbegriffen: „2 ausgewählt“ stand in der Leiste, in
   der Liste war nichts angehakt (20.09.2026 beim Bau der Auswahl fürs
   Handy gefunden, betraf den Rechner genauso). */
html.v2 .ticket-check:not(.an) { background: var(--surface); }
html.v2 .ticket:hover .v2-av, html.v2 .ticket:has(.ticket-check.an) .v2-av { opacity: 0.3; }
html.v2 .ticket-top { gap: 6px; margin-bottom: 1px; }
html.v2 .ticket-dot { display: none; }
html.v2 .ticket-sender { font-size: var(--fs-base); color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html.v2 .ticket.unread .ticket-sender { font-weight: 700; }
/* Kanal-Logo (logos.js) statt Kürzel - klein neben dem Absender, in der
   Seitenleiste vor dem Kanalnamen. */
html.v2 .v2-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 15px; width: auto; min-width: 15px; max-width: 40px; }
html.v2 .v2-logo svg { height: 100%; width: auto; max-width: 40px; display: block; }
html.v2 .v2-logo-text { width: 15px; font-size: 10px; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border-radius: 4px; }
/* In der Seitenleiste ein festes Kästchen, damit die Namen bündig stehen. */
html.v2 .rail-item .v2-logo { width: 22px; min-width: 22px; max-width: 22px; height: 18px; margin-right: 2px; }
html.v2 .rail-item .v2-logo svg { width: 100%; height: 100%; max-width: none; }
/* Länderflagge je Marktplatz (v2.js::flaggeHtml): klein und dezent neben
   dem Kanal-Logo; ein zarter Innenrand, damit weiße Flächen (Polen,
   Finnland) nicht im Hintergrund verschwinden - ein Mittelgrau, das hell
   wie dunkel passt. */
html.v2 .v2-flagge { position: relative; display: inline-flex; flex: none; width: 15px; height: 10px; border-radius: 2px; overflow: hidden; vertical-align: middle; }
html.v2 .v2-flagge svg { width: 100%; height: 100%; display: block; }
html.v2 .v2-flagge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.5px rgba(128, 128, 128, 0.4); pointer-events: none; }
html.v2 .v2-flagge-text { width: auto; padding: 0 3px; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; line-height: 10px; color: var(--text-muted); background: var(--surface-2); }
html.v2 .detail-header h2 .v2-flagge { margin-left: 6px; width: 18px; height: 12px; }
html.v2 .ticket .ticket-time { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
html.v2 .ticket .ticket-time.v2-ok { color: var(--text-faint); }
html.v2 .ticket .ticket-time.v2-warn { color: var(--warn); font-weight: 600; }
html.v2 .ticket .ticket-time.v2-bad { color: var(--danger); font-weight: 600; }
html.v2 .ticket-subject { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 2px; }
html.v2 .ticket.unread .ticket-subject { color: var(--text); font-weight: 600; }
html.v2 .ticket-preview { font-size: var(--fs-sm); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .ticket-meta { gap: 6px; flex-wrap: wrap; }
html.v2 .ticket-meta .badge, html.v2 .ticket-meta .status-pill, html.v2 .ticket-meta .tw-frist { display: none; }

/* ---------------------------------------------------------------
   Ruhige Zeile (Matteo, 25.09.2026): In Ruhe stehen nur Name, Betreff,
   Quelle und Zeit da. Die Vorschau klappt beim Überfahren auf, der
   Kanal ist ein Farbstreifen am Rand statt Logo plus Flagge in der
   Zeile. Damit brechen die Namen nicht mehr ab, und der geöffnete
   Vorgang rechts bekommt das Gewicht.
   --------------------------------------------------------------- */
html.v2 .ticket { position: relative; }
html.v2 .ticket[data-kanal]::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--kanalfarbe, transparent);
}
/* Die Farben der Marktplätze, gedämpft - sie sollen die Zeile ordnen,
   nicht mit der Frist um Aufmerksamkeit streiten. */
html.v2 .ticket[data-kanal="kaufland"] { --kanalfarbe: #d94a42; }
html.v2 .ticket[data-kanal="ebay"] { --kanalfarbe: #6aa84f; }
html.v2 .ticket[data-kanal="amazon"] { --kanalfarbe: #dd9a3c; }
html.v2 .ticket[data-kanal="otto"] { --kanalfarbe: #c4504f; }
html.v2 .ticket[data-kanal="kleinanzeigen"] { --kanalfarbe: #4fa88a; }
html.v2 .ticket[data-kanal="hood"] { --kanalfarbe: #c47a3c; }
html.v2 .ticket[data-kanal="merkandi"] { --kanalfarbe: #5c7fbf; }
html.v2 .ticket[data-kanal="jtlshop"] { --kanalfarbe: #7a6cc4; }
html.v2 .ticket[data-kanal="telegram"] { --kanalfarbe: #4a9fd8; }
html.v2 .ticket[data-kanal="whatsapp"] { --kanalfarbe: #4aab6a; }
html.v2 .ticket[data-kanal="discord"] { --kanalfarbe: #6b74cf; }
html.v2 .ticket[data-kanal="gmail"], html.v2 .ticket[data-kanal="email"],
html.v2 .ticket[data-kanal="outlook"], html.v2 .ticket[data-kanal="gmx"],
html.v2 .ticket[data-kanal="icloud"] { --kanalfarbe: var(--border-strong); }

/* Der Kanal als Wort hinter dem Betreff - an die Stelle von Logo und Flagge. */
html.v2 .v2-quelle {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 400; margin-left: 7px; white-space: nowrap;
}
html.v2 .ticket.unread .v2-quelle { font-weight: 400; }
html.v2 .v2-quelle + .v2-flagge { margin-left: 5px; vertical-align: -1px; }

/* Die Vorschau wächst beim Überfahren aus der Zeile heraus (Entwurf 1:
   schieben, die Zeilen darunter rücken nach). Die Verzögerung steht nur
   im Hover-Zustand: Wer die Liste bloß überquert, um zum Vorgang zu
   kommen, löst nichts aus - beim Verlassen schließt sie ohne Warten. */
html.v2 .ticket-preview {
  max-height: 0; overflow: hidden;
  transition: max-height 0.16s ease;
}
html.v2 .ticket:hover .ticket-preview,
html.v2 .ticket:focus-within .ticket-preview {
  max-height: 24px; transition-delay: 0.2s;
}
/* Ausnahme: der Ausschnitt aus der Volltextsuche (3gy). Er steht dort,
   wo sonst die Vorschau liegt, ist aber keine Zugabe fürs Überfahren -
   er ist die Antwort auf „warum ist das ein Treffer" und muss deshalb
   im Ruhezustand sichtbar sein. */
html.v2 .ticket.mit-auszug .ticket-preview { max-height: 24px; transition-delay: 0s; }
/* „Kunde wartet 3 Tage" sagt dasselbe wie die Restzeit oben rechts -
   einmal reicht. Die Entwurfs-Pille daneben bleibt. */
html.v2 .ticket-meta .tw-wait { display: none; }
/* Ausnahme: das Zeichen für eine angefangene Antwort. Die Lage des Vorgangs
   steht in V2 schon in den Reitern darüber, ein halb geschriebener Text
   dagegen nirgends - und genau den vergisst man sonst. */
html.v2 .ticket-meta .status-pill.entwurf { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; font-size: 10.5px; }
/* Zweite Ausnahme: „im Verlauf“ (3gx). V2 blendet die Schilder in der Zeile
   bewusst aus - dieses hier erscheint nur bei aktiver Suche und ist dann
   die einzige Auskunft, warum der Vorgang gefunden wurde. */
html.v2 .ticket-meta .status-pill.treffer { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; font-size: 10.5px; }
html.v2 .ticket-meta .tw-wait { font-size: 11px; color: var(--text-faint); }
html.v2 .ticket-meta:empty { display: none; }
html.v2 .v2-gruppe {
  position: sticky; top: 0; z-index: 1; padding: 7px 16px 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); background: var(--surface); border-bottom: 1px solid var(--border);
}
html.v2 .v2-gruppe.bad { color: var(--danger); }
html.v2 .list-empty { color: var(--text-faint); }

/* Fristen-Achse: dünn, grau, Jetzt-Marke, ein Punkt je Vorgang. Kopfzeile
   mit Anzahl und Einklappen - eingeklappt bleibt nur die Kopfzeile. */
html.v2 .v2-achse { position: relative; height: 46px; margin: 0 16px; border-bottom: 1px solid var(--border); flex: none; }
html.v2 .v2-achse[hidden] { display: none; }
html.v2 .v2-achse.zu { height: 26px; }
html.v2 .v2-achse.zu .v2-achse-band { display: none; }
html.v2 .v2-achse-kopf { position: absolute; left: 0; right: 0; top: 0; height: 24px; z-index: 1; display: flex; align-items: center; gap: 6px; }
html.v2 .v2-achse-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
html.v2 .v2-achse-n { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 500; color: var(--text-faint); }
html.v2 .v2-achse-n.v2-warn { color: var(--warn); }
html.v2 .v2-achse-n.v2-bad { color: var(--danger); }
html.v2 .v2-achse-zu { margin-left: auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; border-radius: 5px; color: var(--text-faint); cursor: pointer; }
html.v2 .v2-achse-zu:hover { background: var(--surface-hover); color: var(--text); }
html.v2 .v2-achse-zu svg { transform: rotate(180deg); transition: transform 0.15s; }
html.v2 .v2-achse.zu .v2-achse-zu svg { transform: none; }
html.v2 .v2-achse-band { position: absolute; inset: 0; }
html.v2 .v2-linie { position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--border-strong); }
html.v2 .v2-tick { position: absolute; top: 31px; transform: translateX(-50%); font-size: 9.5px; color: var(--text-faint); white-space: nowrap; }
html.v2 .v2-jetzt { position: absolute; top: 21px; width: 1px; height: 13px; background: var(--text); transform: translateX(-50%); }
html.v2 .v2-jetzt i { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--text); }
html.v2 .v2-pkt {
  position: absolute; top: 23px; width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0;
  transform: translateX(-50%); background: var(--text-faint); cursor: pointer;
}
html.v2 .v2-pkt.v2-warn { background: var(--warn); }
html.v2 .v2-pkt.v2-bad { background: var(--danger); }
html.v2 .v2-pkt:hover { transform: translateX(-50%) scale(1.3); }
html.v2 .v2-pkt.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }

/* Lesebereich: Avatar neben dem Namen, Frist als Chip in der Werkzeugleiste. */
html.v2 .v2-av-gross { width: 40px; height: 40px; font-size: 13.5px; }
html.v2 .v2-chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; align-self: center; }
/* Nur der Frist-Chip in der Werkzeugleiste rutscht nach rechts - als
   Grundregel zog margin-left:auto auch die Chips der Firma-Profilkarte
   auseinander (Bug-Suche 26.09.2026). */
html.v2 .detail-actions .v2-chip { margin-left: auto; }
html.v2 .v2-chip.warn { background: var(--warn-tint); color: var(--warn); }
html.v2 .v2-chip.bad { background: var(--danger-tint); color: var(--danger); }
html.v2 .detail-header-main h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.005em; }
html.v2 .msg { background: var(--surface); border-color: var(--border); border-radius: 8px; }
html.v2 .msg.from-agent { background: var(--accent-tint); }
html.v2 .composer-box { border-radius: 8px; background: var(--surface); }
/* Antwortkasten: KI-Zeile oben, Textfeld, Fuß mit Werkzeugen und Senden. */
html.v2 .composer-box { border-radius: 10px; border-color: var(--border); background: var(--surface); }
html.v2 .composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
html.v2 .v2-ki { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
html.v2 .v2-ki-lbl { font-weight: 600; color: var(--text); white-space: nowrap; }
/* Die Info-Zeile darf kürzen, damit Pille und Knöpfe in einer Zeile bleiben. */
html.v2 .v2-ki small { color: var(--text-muted); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-ki-re .btn { white-space: nowrap; }
html.v2 .v2-ki-re { margin-left: auto; display: flex; gap: 4px; }
html.v2 .v2-ki-re .btn { border-color: var(--border); background: var(--surface-2); color: var(--text-muted); font-weight: 500; font-size: 12px; padding: 4px 9px; }
html.v2 .v2-ki-re .btn.accent { color: var(--accent-strong); }
html.v2 .v2-ki-re .btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
/* Antwortrichtungen (v2.js::richtungenZeile): kleine Chips unter der
   KI-Zeile, eingeklappt eine Pille in der KI-Zeile. */
html.v2 .v2-ri { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
html.v2 .v2-ri[hidden], html.v2 .v2-ri-pille[hidden] { display: none; }
html.v2 .v2-ri-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-right: 2px; }
html.v2 .v2-ri-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; max-width: 260px; }
html.v2 .v2-ri-chip span { overflow: hidden; text-overflow: ellipsis; }
html.v2 .v2-ri-chip svg, html.v2 .v2-ri-pille svg { width: 12px; height: 12px; fill: none; stroke: var(--accent-strong); stroke-width: 1.8; stroke-linejoin: round; flex: none; }
html.v2 .v2-ri-chip:hover { background: var(--surface-hover); }
html.v2 .v2-ri-chip.on { background: var(--accent-tint); border-color: transparent; color: var(--accent-strong); font-weight: 600; }
html.v2 .v2-ri-chip.eigene { border-style: dashed; color: var(--text-faint); }
html.v2 .v2-ri-chip.eigene svg { display: none; }
html.v2 .v2-ri-eingabe { height: 22px; border: 1px solid var(--accent); border-radius: 999px; padding: 0 9px; font: inherit; font-size: 11.5px; background: var(--surface); color: var(--text); width: 230px; outline: none; }
html.v2 .v2-ri-grund { color: var(--text-faint); font-size: 11px; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
/* Warum keine Richtungen kamen. Anders als der Grund (Beiwerk zu den Chips)
   ist das die einzige Information in der Zeile - sie bleibt auch auf dem
   Handy stehen und darf umbrechen. */
html.v2 .v2-ri-hinweis { color: var(--text-muted); font-size: 11.5px; margin-left: 4px; flex: 1; min-width: 0; }
html.v2 .v2-ri-zu { margin-left: auto; width: 22px; height: 22px; border: none; background: none; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; border-radius: 6px; padding: 0; }
html.v2 .v2-ri-zu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.v2 .v2-ri-zu:hover { background: var(--surface-hover); color: var(--text); }
html.v2 .v2-ri-pille { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
html.v2 .v2-ri-pille:hover { background: var(--surface-hover); color: var(--text); }
html.v2 .composer-bar { background: var(--surface); gap: 2px; padding: 6px 8px; }
html.v2 .composer-bar .tool-btn span { display: none; }
html.v2 .composer-bar .tool-btn { padding: 6px; }
html.v2 .composer-bar .tool-btn svg { width: 16px; height: 16px; }
html.v2 .composer-bar .signatur-wahl { margin-left: 6px; }
html.v2 .composer-bar .composer-row { margin: 0 10px 0 auto; min-width: 0; }
html.v2 .composer-bar .composer-row .composer-hint { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .composer-bar .composer-row .composer-kbd { margin-left: 8px; }
html.v2 .composer-bar .composer-actions { margin-left: 0; }
html.v2 .composer-bar .composer-actions .btn { padding: 6px 14px; }
html.v2 .related-ticket-link { background: var(--surface-2); color: var(--text-muted); }
html.v2 .related-ticket-link:hover { background: var(--accent-tint); color: var(--accent-strong); }

/* Kennzahlen: ein flacher Streifen, die Hauptzahl nur hervorgehoben, nicht gefüllt. */
html.v2 .topbar-stats { box-shadow: none; border: 1px solid var(--border); background: var(--surface); height: 30px; font-size: 12px; }
html.v2 .topbar-stat { padding: 0 10px; }
html.v2 .topbar-stat strong { font-size: 13px; font-weight: 600; }
html.v2 .topbar-stat-primary { background: var(--surface-2); color: var(--text-muted); border-right-color: var(--border); font-weight: 500; font-size: 12px; }
html.v2 .topbar-stat-primary strong { color: var(--text); font-size: 14px; }
html.v2 .topbar-stat-muted strong { font-size: 13px; }

/* Einstellungen, Kartei, Add-ons, Profil, Abläufe: gleiche Ruhe. */
html.v2 .simple-header h1 { font-size: 15px; }
html.v2 .settings-layout .rail, html.v2 .body .rail { background: var(--surface); }
html.v2 .feature-row .name { font-weight: 600; font-size: var(--fs-base); }
html.v2 .v2-schalter { border-top: 1px solid var(--border); margin-top: var(--sp-3); }
html.v2 .edge-handle { background: var(--surface-2); color: var(--text-muted); border-right: 1px solid var(--border); }
html.v2 .edge-handle:hover { background: var(--surface-hover); color: var(--text); }
html.v2 .edge-panel { background: var(--surface); }
html.v2 .edge-panel-section h3 { font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-faint); }
html.v2 .edge-panel-section h3 svg { color: var(--text-faint); }
html.v2 .edge-panel-section textarea { background: var(--surface); }
html.v2 .status-filter-btn { border-radius: var(--radius); }
html.v2 .status-filter-btn.active { background: var(--accent-tint); color: var(--accent-strong); }
html.v2 .auth-page { background: var(--bg); }
html.v2 .auth-card { background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-md); }
html.v2 .auth-tab { background: var(--surface); }
html.v2 .auth-tab.active { background: var(--accent-tint); color: var(--accent-strong); }
html.v2 .auth-brand-name { font-weight: 700; letter-spacing: 0.16em; }
html.v2 .app-toast { border-radius: var(--radius); }

/* ---------- Einstellungen → Abläufe als Flussdiagramm mit Seitenfenster (ablaeufe-v2.js) ---------- */
html.v2 .settings-body:has(.v2-ab) { max-width: none; padding: 0; display: flex; flex-direction: column; }
html.v2 .v2-ab { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; flex: 1 0 auto; min-height: 0; }
html.v2 .v2-ab > .conn-form-error { grid-column: 1 / -1; margin: 0; }
html.v2 .v2-ab > .conn-form-error:empty { display: none; }
html.v2 .v2-ab .spacer { flex: 1; }
html.v2 .v2-ab-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.v2 .v2-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
html.v2 .v2-chip.akz { background: var(--accent-tint); border-color: transparent; color: var(--accent-strong); }
html.v2 .v2-chip.warn { background: var(--warn-tint); border-color: transparent; color: var(--warn); }
/* Liste links */
html.v2 .v2-ab-liste { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
html.v2 .v2-ab-lk { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; }
html.v2 .v2-ab-lk h2 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
html.v2 .v2-ab-gruppe { padding: 10px 14px 4px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
html.v2 .v2-ab-leer { padding: 8px 14px; font-size: 12.5px; color: var(--text-muted); }
html.v2 .v2-ab-eintrag { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; border: none; background: none; text-align: left; font-family: inherit; color: var(--text); cursor: pointer; }
html.v2 .v2-ab-eintrag:hover { background: var(--surface-hover); }
html.v2 .v2-ab-eintrag.on { background: var(--accent-tint); }
html.v2 .v2-ab-eintrag .n { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-ab-eintrag .n small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
html.v2 .v2-ab-eintrag .b { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
html.v2 .v2-ab-eintrag .b.w { color: var(--warn); font-weight: 600; }
html.v2 .v2-ab-gruppe-inaktiv ~ .v2-ab-eintrag .n { color: var(--text-muted); }
html.v2 .v2-ab-vorlagen { margin-top: auto; padding: 10px 14px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
html.v2 .v2-ab-vorlagen h4 { margin: 0; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
html.v2 .v2-ab-vk { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
html.v2 .v2-ab-vk .n { font-weight: 600; font-size: 12.5px; }
html.v2 .v2-ab-vk .sub { font-size: 11.5px; color: var(--text-muted); }
html.v2 .v2-ab-vk select { flex: 1; min-width: 0; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
/* Kopf */
html.v2 .v2-ab-haupt { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
html.v2 .v2-ab-kopf { padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
html.v2 .v2-ab-name { margin: 0; font-size: 16px; font-weight: 600; }
html.v2 .v2-ab-kz { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
html.v2 .v2-ab-kz b { color: var(--text); font-weight: 600; }
html.v2 .v2-ab-kz .w, html.v2 .v2-ab-kz .w b { color: var(--warn); }
html.v2 .v2-ab-kz-leer { color: var(--text-faint); font-size: 12.5px; }
html.v2 .v2-ab-modus { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; flex: none; }
html.v2 .v2-ab-modus button { border: none; background: none; font-family: inherit; font-size: 12px; color: var(--text-muted); padding: 3px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
html.v2 .v2-ab-modus button.on { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
html.v2 .v2-ab-modus button:disabled { opacity: 0.45; cursor: not-allowed; }
html.v2[data-theme="dark"] .v2-ab-modus button.on { background: var(--surface-hover); box-shadow: none; }
html.v2 .v2-ab-aktiv { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
html.v2 .v2-ab-koerper { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
/* Flussdiagramm: Hauptpfad links, Zweige rechts, Pfeile in den Zwischenzeilen */
html.v2 .v2-ab-fluss { padding: 16px 20px 24px; min-width: 0; overflow: auto; display: grid; grid-template-columns: 250px 40px 250px; align-items: center; align-content: start; column-gap: 0; }
html.v2 .v2-ab-knoten { width: 250px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; text-align: left; font-family: inherit; color: var(--text); cursor: pointer; min-width: 0; }
html.v2 .v2-ab-knoten:hover { border-color: var(--border-strong); background: var(--surface-hover); }
html.v2 .v2-ab-knoten.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
html.v2 .v2-ab-knoten.aktiv { border-color: var(--warn); }
html.v2 .v2-ab-knoten.start { background: var(--surface-2); border-style: dashed; cursor: default; }
html.v2 .v2-ab-knoten.start:hover { border-color: var(--border); background: var(--surface-2); }
html.v2 .v2-ab-knoten .kz { display: flex; align-items: center; gap: 6px; min-width: 0; }
html.v2 .v2-ab-knoten .kz .nr { width: 18px; height: 18px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
html.v2 .v2-ab-knoten .kz b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.v2 .v2-ab-knoten .kz .live { margin-left: auto; font-size: 11px; color: var(--text-faint); white-space: nowrap; flex: none; }
html.v2 .v2-ab-knoten .kz .live.w { color: var(--warn); font-weight: 600; }
html.v2 .v2-ab-knoten .kt { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .v2-ab-knoten .kt.zweig { color: var(--text-faint); }
html.v2 .v2-ab-knoten .kt.zweig b { color: var(--text-muted); font-weight: 500; }
html.v2 .v2-ab-ki { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #6b3fbf; background: #efe6ff; border-radius: 999px; padding: 0 7px; height: 17px; white-space: nowrap; flex: none; }
html.v2[data-theme="dark"] .v2-ab-ki { background: rgba(160, 120, 230, 0.2); color: #c9b3f5; }
html.v2 .v2-typ { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); flex: none; }
html.v2 .v2-typ.bed { background: var(--warn-tint); color: var(--warn); border-color: transparent; }
html.v2 .v2-typ.nach { background: var(--accent-tint); color: var(--accent-strong); border-color: transparent; }
html.v2 .v2-typ.frei { background: var(--good-tint); color: var(--good); border-color: transparent; }
html.v2 .v2-typ.akt { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
html.v2 .v2-typ.ende { background: var(--text); color: var(--bg); border-color: transparent; }
html.v2 .v2-ab-pfeil { justify-self: center; width: 1px; height: 100%; min-height: 28px; background: var(--border-strong); position: relative; }
html.v2 .v2-ab-pfeil::after { content: ""; position: absolute; bottom: 0; left: -3.5px; border: 4px solid transparent; border-top: 6px solid var(--text-faint); }
html.v2 .v2-ab-pfeil span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 10.5px; color: var(--text-faint); background: var(--bg); padding: 0 3px; white-space: nowrap; }
html.v2 .v2-ab-quer { height: 1px; background: var(--border-strong); position: relative; align-self: center; }
html.v2 .v2-ab-quer::after { content: ""; position: absolute; right: 0; top: -3.5px; border: 4px solid transparent; border-left: 6px solid var(--text-faint); }
html.v2 .v2-ab-quer span { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-size: 10.5px; color: var(--warn); font-weight: 600; background: var(--bg); padding: 0 3px; }
html.v2 .v2-ab-quer.unklar span { color: var(--text-faint); }
/* Seitenfenster rechts */
html.v2 .v2-ab-panel { border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
html.v2 .v2-ab-panel .pk { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
html.v2 .v2-ab-panel .pk b { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-ab-panel .pk .zu { margin-left: auto; border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 16px; padding: 0 2px; }
html.v2 .v2-ab-panel .pb { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; min-height: 0; }
html.v2 .v2-ab-panel .pf { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.v2 .v2-ab-panel .pf .hint { flex: 1; }
html.v2 .v2-ab-panel .pf .conn-form-error { flex-basis: 100%; }
html.v2 .v2-ab-panel .hint { font-size: 11.5px; color: var(--text-faint); }
html.v2 .v2-ab-panel .leer { padding: 20px 16px; font-size: 12.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 10px; }
html.v2 .v2-ab-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
html.v2 .v2-ab-feld .hint { font-weight: 400; }
html.v2 .v2-ab-feld input, html.v2 .v2-ab-feld select, html.v2 .v2-ab-feld textarea { width: 100%; font-family: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
html.v2 .v2-ab-feld textarea { min-height: 96px; line-height: 1.45; resize: vertical; }
html.v2 .v2-ab-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
html.v2 .v2-ab-seg button { border: none; background: none; font-family: inherit; font-size: 12.5px; color: var(--text-muted); padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
html.v2 .v2-ab-seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
html.v2[data-theme="dark"] .v2-ab-seg button.on { background: var(--surface-hover); box-shadow: none; }
html.v2 .v2-ab-beispiel { border: 1px dashed #b9a3e6; border-radius: 8px; background: #f8f5ff; padding: 8px 10px; font-size: 12px; line-height: 1.45; white-space: pre-wrap; color: var(--text); }
html.v2[data-theme="dark"] .v2-ab-beispiel { background: rgba(160, 120, 230, 0.08); border-color: #7a5fb0; }
html.v2 .v2-ab-beispiel .bl { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b3fbf; margin-bottom: 4px; }
html.v2[data-theme="dark"] .v2-ab-beispiel .bl { color: #c9b3f5; }
html.v2 .v2-ab-beispiel .kunde { color: var(--text-faint); font-size: 11.5px; margin-top: 6px; }
html.v2 .v2-ab-werk { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
html.v2 .v2-ab-werk .btn.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
html.v2 .v2-ab-panel h4 { margin: 4px 0 0; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
html.v2 .v2-ab-hier .p { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0; border: none; background: none; font-family: inherit; font-size: 12.5px; color: var(--text); text-align: left; cursor: pointer; }
html.v2 .v2-ab-hier .p:hover .pn { text-decoration: underline; }
html.v2 .v2-ab-hier .p .av { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 9px; font-weight: 600; color: var(--text-muted); flex: none; }
html.v2 .v2-ab-hier .p .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-ab-hier .p .st { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
html.v2 .v2-ab-hier .p .st.w { color: var(--warn); font-weight: 600; }
html.v2 .v2-ab-hier .p .zeit { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
html.v2 .v2-ab-hier .p .zeit.bad { color: var(--danger); font-weight: 600; }
html.v2 .v2-ab-hier .p .zeit.warn { color: var(--warn); font-weight: 600; }
@media (max-width: 1100px) { html.v2 .v2-ab-koerper { grid-template-columns: 1fr; } html.v2 .v2-ab-panel { border-left: none; border-top: 1px solid var(--border); } }
@media (max-width: 860px) { html.v2 .v2-ab { grid-template-columns: 1fr; } html.v2 .v2-ab-liste { border-right: none; border-bottom: 1px solid var(--border); } html.v2 .v2-ab-fluss { padding: 12px; grid-template-columns: 1fr; } html.v2 .v2-ab-knoten { width: 100%; } html.v2 .v2-ab-quer { display: none; } html.v2 .v2-ab-kopf { padding: 12px; } }

/* ---------- Einstellungen → Firma als Profilkarte (firma-v2.js) ---------- */
html.v2 .v2-firma { display: flex; flex-direction: column; gap: 12px; }
html.v2 .v2-firma-profil { display: grid; grid-template-columns: auto minmax(0, 1fr) 250px; gap: 16px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
html.v2 .v2-firma-profil .tile-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; }
html.v2 .v2-firma-profil .tile { width: 56px; height: 56px; border-radius: 12px; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 18px; font-weight: 700; letter-spacing: 0.04em; border: none; padding: 0; overflow: hidden; font-family: inherit; }
html.v2 .v2-firma-profil button.tile { cursor: pointer; }
html.v2 .v2-firma-profil .tile.bild { background: var(--surface-2); border: 1px solid var(--border); }
html.v2 .v2-firma-profil .tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
html.v2 .v2-firma-profil .tile-aktionen { display: flex; gap: 8px; white-space: nowrap; }
html.v2 .v2-link { border: none; background: none; padding: 0; font: inherit; font-size: 11px; color: var(--accent-strong); cursor: pointer; }
html.v2 .v2-link:hover { text-decoration: underline; color: var(--text); }
html.v2 .v2-firma-profil .mitte { min-width: 0; }
html.v2 .v2-firma-profil .n { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-firma-profil .n .leer { color: var(--text-faint); font-weight: 500; }
html.v2 .v2-firma-profil .p { color: var(--text-muted); font-size: 12.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-firma-profil .chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
html.v2 .v2-firma-profil .voll { border-left: 1px solid var(--border); padding-left: 16px; }
html.v2 .v2-firma-profil .zahl { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
html.v2 .v2-firma-profil .zahl .mono { color: var(--text-muted); font-weight: 400; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; }
html.v2 .v2-firma-profil .balken { height: 6px; border-radius: 3px; background: var(--surface-2); margin: 8px 0; overflow: hidden; }
html.v2 .v2-firma-profil .balken i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.2s ease; }
html.v2 .v2-firma-profil .f { font-size: 12px; color: var(--warn); }
html.v2 .v2-firma-profil .f.gut { color: var(--good); }
html.v2 .v2-firma-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.v2 .v2-firma-karte { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html.v2 .v2-firma-karte .ak { display: flex; align-items: center; gap: 8px; }
html.v2 .v2-firma-karte h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
html.v2 .v2-firma-karte .ak .hint { margin-left: auto; font-size: 11.5px; color: var(--text-faint); text-align: right; }
html.v2 .v2-firma-karte .g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
html.v2 .v2-firma-karte .g .span-1 { grid-column: span 1; }
html.v2 .v2-firma-karte .g .span-2 { grid-column: span 2; }
html.v2 .v2-firma-karte .g .span-3 { grid-column: span 3; }
html.v2 .v2-firma-karte .g .span-4 { grid-column: span 4; }
html.v2 .v2-firma-karte .form-row { margin: 0; max-width: none; min-width: 0; }
html.v2 .v2-firma-karte .form-row input, html.v2 .v2-firma-karte .form-row select { width: 100%; }
html.v2 .v2-firma-karte .form-row select { min-width: 0; }
html.v2 .v2-firma-karte input.v2-fehlt, html.v2 .v2-firma-karte select.v2-fehlt { border-color: var(--warn); background-color: var(--warn-tint); }
html.v2 .v2-firma-karte input.v2-fehlt:focus, html.v2 .v2-firma-karte select.v2-fehlt:focus { border-color: var(--accent); background-color: var(--surface); }
/* Abweichende Lieferanschrift unter der Rechnungsanschrift. */
html.v2 .v2-firma-liefer { border-top: 1px dashed var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
html.v2 .v2-firma-liefer[hidden] { display: none; }
html.v2 .v2-firma-liefer .ak .v2-link { margin-left: auto; }
html.v2 .v2-firma-liefer > .hint { font-size: 11.5px; color: var(--text-faint); }
html.v2 .v2-firma-liefer-knopf { align-self: flex-start; }
html.v2 .v2-firma-liefer-knopf[hidden] { display: none; }
html.v2 .v2-firma-karte > .field-hint { margin: 0; }
html.v2 .v2-firma-vorschau { border-top: 1px solid var(--border); padding-top: 10px; }
html.v2 .v2-firma-vorschau .vt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
html.v2 .v2-firma-vorschau pre { margin: 0 0 4px; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; color: var(--text); }
html.v2 .v2-firma-vorschau .hint { font-size: 11.5px; color: var(--text-faint); }
html.v2 .v2-firma-vorschau .hint.warn { color: var(--warn); }
html.v2 .v2-firma-speichern { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 4px; }
@media (max-width: 1100px) {
  html.v2 .v2-firma-karten { grid-template-columns: 1fr; }
  html.v2 .v2-firma-profil { grid-template-columns: auto minmax(0, 1fr); }
  html.v2 .v2-firma-profil .voll { grid-column: 1 / -1; border-left: none; padding-left: 0; }
}

/* ---------- Einstellungen → Team als Personen + Detailfeld (team-v2.js) ---------- */
html.v2 .settings-body:has(.v2-team) { max-width: none; padding: 0; display: flex; flex-direction: column; }
/* #settingsContent sitzt als Block zwischen .settings-body und der Seite -
   ohne flex wächst er nicht mit, und unter Liste und Detail bleibt ein
   leerer Rest (Matteo, 17.09.: „füllt das Bild nicht aus“). */
html.v2 .settings-body:has(.v2-team) > #settingsContent, html.v2 .settings-body:has(.v2-ab) > #settingsContent { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
html.v2 .v2-team { display: grid; grid-template-columns: 250px minmax(0, 1fr); flex: 1 0 auto; }
html.v2 .v2-team .av2 { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--text-muted); flex: none; }
html.v2 .v2-team .av2.inh { background: var(--text); color: var(--bg); border-color: var(--text); }
html.v2 .v2-team .av2.gross { width: 44px; height: 44px; font-size: 14px; }
html.v2 .v2-team .av2.neu { border-style: dashed; font-size: 20px; }
html.v2 .v2-team .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; flex: none; }
html.v2 .v2-team .punkt.warn { background: var(--warn); }
html.v2 .v2-team .punkt.grau { background: var(--text-faint); }
html.v2 .v2-team .hint { font-size: 12px; color: var(--text-faint); }
html.v2 .v2-team .sub { font-size: 12.5px; color: var(--text-muted); }
html.v2 .v2-team h3 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
html.v2 .v2-team h4 { margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
html.v2 .v2-team-link { border: none; background: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--accent-strong); cursor: pointer; text-align: left; }
html.v2 .v2-team-liste { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
html.v2 .v2-team-liste .lk { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; }
html.v2 .v2-team-liste .lk h2 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
html.v2 .v2-team-liste .lk .btn.on { background: var(--accent-tint); color: var(--accent-strong); border-color: transparent; }
html.v2 .v2-team-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: none; background: none; text-align: left; font-family: inherit; color: var(--text); }
html.v2 .v2-team-person:hover { background: var(--surface-hover); }
html.v2 .v2-team-person.on { background: var(--accent-tint); }
html.v2 .v2-team-person .n { font-weight: 600; font-size: 13px; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-team-person .n small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
html.v2 .v2-team-person .du { height: 16px; font-size: 10px; padding: 0 6px; vertical-align: 1px; }
html.v2 .v2-team-leer { padding: 8px 14px; font-size: 12.5px; color: var(--text-muted); margin: 0; }
html.v2 .v2-team-offen { margin: 10px 14px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
html.v2 .v2-team-offen .o { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 0 8px; align-items: center; width: 100%; padding: 4px 0; border: none; background: none; text-align: left; font-family: inherit; color: var(--text); cursor: pointer; }
html.v2 .v2-team-offen .o .n { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-team-offen .o small { grid-column: 2; font-size: 11.5px; color: var(--text-muted); }
html.v2 .v2-team-plaetze { margin: auto 14px 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
html.v2 .v2-team-plaetze .balken { flex: 1; min-width: 60px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
html.v2 .v2-team-plaetze .balken i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
html.v2 .v2-team-plaetze b { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-weight: 500; font-size: 12px; }
html.v2 .v2-team-plaetze .v2-team-link { flex-basis: 100%; }
html.v2 .v2-team-detail { padding: 18px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0 18px; align-content: start; min-width: 0; }
html.v2 .v2-team-detail .dk { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
html.v2 .v2-team-detail .dk .min { min-width: 0; flex: 1; }
html.v2 .v2-team-detail .dk .n { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-team-detail .dk .e { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
html.v2 .v2-team-detail .dk .aktionen { display: flex; align-items: center; gap: 6px; flex: none; }
html.v2 .v2-team-detail .links { min-width: 0; }
html.v2 .v2-team-detail .rechts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html.v2 .v2-team-recht { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
html.v2 .v2-team-recht .t { flex: 1; min-width: 0; }
html.v2 .v2-team-recht .t b { display: block; font-size: 13px; font-weight: 600; }
html.v2 .v2-team-recht .t small { font-size: 11.5px; color: var(--text-muted); }
html.v2 .v2-team-alle { padding: 8px 0; }
html.v2 .v2-team-aufgabe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
html.v2 .v2-team-aufgabe select { font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
html.v2 .v2-team-aufgabe .hint { flex-basis: 100%; }
html.v2 .v2-team-karte { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 10px 12px; }
html.v2 .v2-team-kanal { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; }
html.v2 .v2-team-kanal .v2-logo { width: 22px; min-width: 22px; max-width: 22px; height: 16px; }
html.v2 .v2-team-kanal .v2-logo svg { width: 100%; height: 100%; max-width: none; }
html.v2 .v2-team-kanal .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-team-kanaele .hint { margin-top: 6px; }
html.v2 .v2-team-log { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
html.v2 .v2-team-log span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-faint); margin-right: 6px; }
html.v2 .v2-team-log .w { color: var(--warn); }
html.v2 .v2-team-detail .fuss { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 12px; }
html.v2 .v2-team-protokoll { grid-column: 1 / -1; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
html.v2 .v2-team-protokoll[hidden] { display: none; }
html.v2 .v2-team-protokoll .pk { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
html.v2 .v2-team-protokoll .pk h3 { margin: 0; }
html.v2 .v2-team-protokoll .pk .v2-team-link { margin-left: auto; }
html.v2 .v2-team-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 10px; }
html.v2 .v2-team-feld input { font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
html.v2 .v2-team-modus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
html.v2 .v2-team-ergebnis code { display: block; word-break: break-all; font-size: 11.5px; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; margin: 4px 0 6px; }
html.v2 .v2-team .switch { flex: none; }
/* Reiter in der Person: Rechte & Kanäle | Signaturen */
html.v2 .v2-team-tabs { grid-column: 1 / -1; display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: -6px 0 14px; }
html.v2 .v2-team-tabs button { border: none; background: none; font-family: inherit; padding: 6px 12px; font-size: 13px; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
html.v2 .v2-team-tabs button:hover { color: var(--text); }
html.v2 .v2-team-tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
/* Signatur je Kanal: Chips mit Punkt, Editor links, Vorschau rechts */
html.v2 .v2-sig { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
html.v2 .v2-sig-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.v2 .v2-sig-kopf h3 { margin: 0; }
html.v2 .v2-sig-chips { display: flex; gap: 6px; flex-wrap: wrap; }
html.v2 .v2-sig-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-family: inherit; font-size: 12.5px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
html.v2 .v2-sig-chip:hover { color: var(--text); }
html.v2 .v2-sig-chip .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
html.v2 .v2-sig-chip .pt.leer { background: transparent; border: 1px solid var(--text-faint); }
html.v2 .v2-sig-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
html.v2 .v2-sig-chip.on .pt { background: var(--bg); border-color: var(--bg); }
html.v2 .v2-sig-chip.aus { border-style: dashed; color: var(--text-faint); text-decoration: line-through; cursor: not-allowed; }
html.v2 .v2-sig-chip .v2-logo { width: 18px; min-width: 18px; max-width: 18px; height: 14px; }
html.v2 .v2-sig-chip .v2-logo svg { width: 100%; height: 100%; max-width: none; }
html.v2 .v2-sig-zwei { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
html.v2 .v2-sig-editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html.v2 .v2-sig-schalter { display: flex; align-items: center; gap: 10px; cursor: pointer; }
html.v2 .v2-sig-schalter .t { font-size: 13px; }
html.v2 .v2-sig-schalter .t b { display: block; font-weight: 600; }
html.v2 .v2-sig-schalter .t small { color: var(--text-faint); font-size: 11.5px; }
html.v2 .v2-sig-editor textarea { width: 100%; min-height: 150px; font-family: inherit; font-size: 13px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }
html.v2 .v2-sig-editor textarea:disabled { color: var(--text-muted); background: var(--surface-2); }
html.v2 .v2-sig-vorschau { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; min-width: 0; }
html.v2 .v2-sig-vorschau .vt { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; }
html.v2 .v2-sig-vorschau .mail { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
html.v2 .v2-sig-vorschau .chat { background: var(--accent-tint); color: var(--text); border-radius: 12px 12px 2px 12px; padding: 8px 10px; display: inline-block; white-space: pre-wrap; max-width: 90%; word-break: break-word; }
html.v2 .v2-sig-vorschau .html { white-space: normal; }
html.v2 .v2-sig-vorschau iframe.sig-rahmen { display: block; width: 100%; min-height: 120px; border: 1px solid var(--border); background: #fff; }
html.v2 .v2-sig-vorschau .leer { color: var(--text-faint); }
html.v2 .v2-sig .fuss { grid-column: auto; }
@media (max-width: 1100px) { html.v2 .v2-team-detail { grid-template-columns: 1fr; } html.v2 .v2-sig-zwei { grid-template-columns: 1fr; } }
@media (max-width: 860px) { html.v2 .v2-team { grid-template-columns: 1fr; } html.v2 .v2-team-liste { border-right: none; border-bottom: 1px solid var(--border); } html.v2 .v2-team-plaetze { margin-top: 10px; } html.v2 .v2-team-detail { padding: 14px 12px; } }

/* ---------- Einstellungen → KI-Assistent: Bereiche links, ein Bereich rechts (ki-v2.js) ---------- */
html.v2 .settings-body:has(.v2-kis) { max-width: none; padding: 0; display: flex; flex-direction: column; }
html.v2 .settings-body:has(.v2-kis) > #settingsContent { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
html.v2 .settings-body:has(.v2-kis) .settings-h2 { display: none; }
html.v2 #kiContent:has(.v2-kis) { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; text-align: left; }
html.v2 .v2-kis { display: grid; grid-template-columns: 240px minmax(0, 1fr); flex: 1 0 auto; min-height: 0; }
/* Bereichsliste links */
html.v2 .v2-kis-nav { background: var(--surface); border-right: 1px solid var(--border); padding: 0 10px 12px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
html.v2 .v2-kis-nav .nk { display: flex; align-items: center; gap: 8px; padding: 14px 4px 8px; }
html.v2 .v2-kis-nav .nk h2 { margin: 0; font-size: 14px; font-weight: 600; }
html.v2 .v2-kis-nav h3 { margin: 0; padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
html.v2 .v2-kis-bereich { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; border-radius: 7px; background: none; text-align: left; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; }
html.v2 .v2-kis-bereich:hover { background: var(--surface-hover); color: var(--text); }
html.v2 .v2-kis-bereich.on { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
html.v2 .v2-kis-bereich .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
html.v2 .v2-kis-bereich .pt.leer { background: transparent; border: 1px solid var(--text-faint); }
html.v2 .v2-kis-bereich .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-kis-bereich small { color: var(--text-faint); font-size: 11.5px; font-weight: 400; white-space: nowrap; }
html.v2 .v2-kis-status { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); }
html.v2 .v2-kis-status b { color: var(--text); font-weight: 600; }
html.v2 .v2-kis-status b.voll { color: var(--danger); }
html.v2 .v2-kis-status .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; margin-right: 6px; vertical-align: 0; }
html.v2 .v2-kis-status .punkt.warn { background: var(--warn); }
html.v2 .v2-kis-status .mini { display: block; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: 5px; }
html.v2 .v2-kis-status .mini i { display: block; height: 100%; background: var(--accent); }
/* Bereichsseite rechts */
html.v2 .v2-kis-inhalt { padding: 18px 28px 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 820px; }
html.v2 .v2-kis-hinweis:empty { display: none; }
html.v2 .v2-kis-hinweis .ai-hinweis { margin: 0 0 12px; }
html.v2 .v2-kis-seite { display: flex; flex-direction: column; gap: 0; }
html.v2 .v2-kis-seite[hidden] { display: none; }
html.v2 .v2-kis-seite .bk { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; margin-bottom: 4px; }
html.v2 .v2-kis-seite .bk h2 { margin: 0; font-size: 17px; font-weight: 600; }
html.v2 .v2-kis-seite .bk .sub { font-size: 12.5px; color: var(--text-muted); }
html.v2 .v2-kis-seite .felder { display: flex; flex-direction: column; }
html.v2 .v2-kis-seite .felder > .hint { font-size: 12.5px; color: var(--text-muted); }
html.v2 .v2-kis-seite .ki-gruppe { margin: 0; display: flex; flex-direction: column; }
html.v2 .v2-kis-seite .ki-gruppe > h3 { display: none; }
/* Feld: Beschriftung links mit Hilfetext darunter, Eingabe rechts. */
html.v2 .v2-kis-seite .ki-feld { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2px 18px; align-items: start; padding: 11px 0; margin: 0; max-width: none; border-top: 1px solid var(--border); }
html.v2 .v2-kis-seite .ki-feld:first-child { border-top: none; }
html.v2 .v2-kis-seite .ki-feld > label { grid-column: 1; grid-row: 1; margin: 0; padding-top: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
html.v2 .v2-kis-seite .ki-feld > .field-hint { grid-column: 1; grid-row: 2; margin: 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.35; }
html.v2 .v2-kis-seite .ki-feld > input, html.v2 .v2-kis-seite .ki-feld > select, html.v2 .v2-kis-seite .ki-feld > textarea, html.v2 .v2-kis-seite .ki-feld > .ki-chip-row, html.v2 .v2-kis-seite .ki-feld > .switch { grid-column: 2; grid-row: 1 / span 2; }
html.v2 .v2-kis-seite .ki-feld > input[type="number"] { width: 130px; }
html.v2 .v2-kis-seite .ki-feld > input[type="text"], html.v2 .v2-kis-seite .ki-feld > select { width: 100%; max-width: 440px; }
html.v2 .v2-kis-seite .ki-feld > textarea { width: 100%; min-height: 96px; }
html.v2 .v2-kis-seite .ki-feld > .switch { align-self: center; margin-top: 4px; }
html.v2 .v2-kis-seite .ki-feld > .ki-chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
html.v2 .v2-kis-seite .ki-override-section > h3, html.v2 .v2-kis-seite .ki-bausteine-section .section-head { display: none; }
html.v2 .v2-kis-seite .ki-override-section, html.v2 .v2-kis-seite .ki-bausteine-section { margin: 0; }
html.v2 .v2-kis-seite details.ki-vorschau { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
html.v2 .v2-kis-seite details.ki-vorschau summary { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
html.v2 .v2-kis-seite details.ki-vorschau pre { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; background: var(--surface-2); border-radius: 6px; padding: 8px 10px; }
html.v2 .v2-kis-seite .ki-einrichtungshilfe { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; gap: 8px 12px; }
html.v2 .v2-kis-seite .ki-temp-key { border: 1px dashed var(--danger); border-radius: 10px; padding: 12px 14px; margin: 0; }
/* Speichern-Zeile am Fuß der Bereichsseite */
html.v2 .v2-kis-speichern { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border); }
html.v2 .v2-kis-speichern .ki-budget { margin: 0 0 0 auto; }
html.v2 .v2-kis-speichern .conn-form-error { flex-basis: 100%; }
html.v2 .v2-kis-weiter { border: none; background: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--accent-strong); cursor: pointer; }
html.v2 .v2-kis-weiter:hover { text-decoration: underline; }
html.v2 .v2-kis-weiter[hidden] { display: none; }
html.v2 .v2-kis-seite:not([data-ki-gruppe]) .fuss { display: none; }
@media (max-width: 860px) {
  html.v2 .v2-kis { grid-template-columns: 1fr; }
  html.v2 .v2-kis-nav { border-right: none; border-bottom: 1px solid var(--border); }
  html.v2 .v2-kis-inhalt { padding: 14px 12px; }
  html.v2 .v2-kis-seite .ki-feld { grid-template-columns: 1fr; }
  html.v2 .v2-kis-seite .ki-feld > input, html.v2 .v2-kis-seite .ki-feld > select, html.v2 .v2-kis-seite .ki-feld > textarea, html.v2 .v2-kis-seite .ki-feld > .ki-chip-row, html.v2 .v2-kis-seite .ki-feld > .switch { grid-column: 1; grid-row: auto; }
}

/* ---------- Addon-Store: Katalog links, Addon rechts (addons-v2.js) ---------- */
html.v2 .settings-body.addons-body:has(.v2-ad) { max-width: none; padding: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.v2 .v2-ad { display: grid; grid-template-columns: 300px minmax(0, 1fr); flex: 1 0 auto; min-height: 0; }
html.v2 .v2-ad-liste { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
html.v2 .v2-ad-liste .lk { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; }
html.v2 .v2-ad-liste .lk h2 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
html.v2 .v2-ad-suche { margin: 0 14px 6px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); padding: 0 10px; height: 32px; }
html.v2 .v2-ad-suche svg { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
html.v2 .v2-ad-suche input { border: none; background: none; font-family: inherit; font-size: 13px; color: var(--text); flex: 1; min-width: 0; outline: none; padding: 0; }
html.v2 .v2-ad-gruppe { padding: 10px 14px 4px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
html.v2 .v2-ad-eintrag { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 14px; border: none; background: none; text-align: left; font-family: inherit; color: var(--text); cursor: pointer; }
html.v2 .v2-ad-eintrag:hover { background: var(--surface-hover); }
html.v2 .v2-ad-eintrag.on { background: var(--accent-tint); }
html.v2 .v2-ad-eintrag .n { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-ad-eintrag .n small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v2 .v2-ad-eintrag .re { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; font-weight: 600; white-space: nowrap; }
html.v2 .v2-ad-eintrag .re small { font-weight: 400; color: var(--text-faint); font-size: 11px; }
html.v2 .v2-ad-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); flex: none; }
html.v2 .v2-ad-ico svg { width: 16px; height: 16px; }
html.v2 .v2-ad-ico.on { background: var(--good-tint); border-color: transparent; color: var(--good); }
html.v2 .v2-ad-ico.gross { width: 48px; height: 48px; border-radius: 12px; }
html.v2 .v2-ad-ico.gross svg { width: 22px; height: 22px; }
html.v2 .v2-ad-leer { padding: 8px 14px; font-size: 12.5px; color: var(--text-muted); }
html.v2 .v2-ad-meine { margin-top: auto; padding: 10px 14px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
html.v2 .v2-ad-meine b { color: var(--text); }
html.v2 .v2-ad-detail { padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html.v2 .v2-ad-detail .dk { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
html.v2 .v2-ad-detail .dk .min { min-width: 0; flex: 1; }
html.v2 .v2-ad-detail .dk .n { font-size: 16px; font-weight: 600; }
html.v2 .v2-ad-detail .dk .e { font-size: 12.5px; color: var(--text-muted); display: block; margin-top: 3px; }
html.v2 .v2-ad-detail .dk .e .v2-chip { vertical-align: middle; margin-left: 2px; }
html.v2 .v2-ad-detail .dk .re { text-align: right; flex: none; }
html.v2 .v2-ad-detail .dk .re .p { font-size: 16px; font-weight: 600; white-space: nowrap; }
html.v2 .v2-ad-detail .dk .re .p small, html.v2 .v2-ad-eintrag .re .p small { font-weight: 400; color: var(--text-faint); font-size: 12px; }
html.v2 .v2-ad-detail .dk .re .hint { font-size: 11.5px; color: var(--text-faint); }
html.v2 .v2-ad-karten { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
html.v2 .v2-ad-karten .spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html.v2 .v2-ad-karte { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
html.v2 .v2-ad-karte h4 { margin: 0; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
html.v2 .v2-ad-karte .t { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
html.v2 .v2-ad-karte .hint { font-size: 11.5px; color: var(--text-faint); }
html.v2 .v2-ad-karte .btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
html.v2 .v2-ad-karte .addon-stepper-row { display: flex; align-items: center; gap: 12px; }
html.v2 .v2-ad-karte .zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.v2 .v2-chip.good { background: var(--good-tint); border-color: transparent; color: var(--good); }
@media (max-width: 1100px) { html.v2 .v2-ad-karten { grid-template-columns: 1fr; } }
@media (max-width: 860px) { html.v2 .v2-ad { grid-template-columns: 1fr; } html.v2 .v2-ad-liste { border-right: none; border-bottom: 1px solid var(--border); } html.v2 .v2-ad-detail { padding: 14px 12px; } }

/* Abo: Tarifkarten (profile.js::renderAboSection) - vier nebeneinander, der
   gebuchte hervorgehoben; Schrift und Chips wie die anderen Seiten. */
html.v2 .v2-tarife { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
html.v2 .v2-tarif { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
html.v2 .v2-tarif.on { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
html.v2 .v2-tarif .kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 20px; }
html.v2 .v2-tarif .n { font-size: 13px; font-weight: 600; }
html.v2 .v2-tarif .preis { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
html.v2 .v2-tarif .preis small { font-size: 11px; font-weight: 500; color: var(--text-faint); margin-left: 3px; letter-spacing: 0; }
html.v2 .v2-tarif .preis.anfrage { font-size: 15px; line-height: 33px; }
html.v2 .v2-tarif ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); flex: 1; }
html.v2 .v2-tarif ul li::before { content: "·"; margin-right: 6px; color: var(--text-faint); }
html.v2 .v2-tarif .btn { align-self: flex-start; margin-top: 4px; }
html.v2 .v2-tarife-hint { margin: 0 0 10px; }
html.v2 .v2-netto { font-weight: 400; color: var(--text-faint); }
/* Summe unter den Karten: Bezeichnung links, Wert rechts, eine Zeile je Posten. */
html.v2 #aboSection .order-field { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
html.v2 #aboSection .order-field .k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
html.v2 #aboSection .order-field + .btn-row { margin-top: 12px; }
@media (max-width: 960px) { html.v2 .v2-tarife { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 3) Desktop: Kopfleiste, Seitenleiste, Spalten ---------- */
@media (min-width: 861px) {
  html.v2 .shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); height: 100vh; }
  html.v2 .v2-kopf {
    grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: var(--sp-4);
    padding: 0 var(--sp-4); height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); min-width: 0;
  }
  html.v2 .v2-marke { display: flex; align-items: center; gap: 10px; width: 204px; flex: none; }
  html.v2 .v2-marke .mark { width: 26px; height: 26px; margin: 0; }
  html.v2 .v2-marke-name { font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--text); }
  html.v2 .v2-kopf-mitte { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
  html.v2 .v2-titel { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.v2 .v2-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); flex: none; min-width: 0; }
  html.v2 .v2-kopf-seite { display: flex; align-items: center; gap: var(--sp-2); }
  html.v2 .v2-kopf-seite:empty { display: none; }
  html.v2 .v2-kopf-konto { display: flex; align-items: center; gap: 2px; padding-left: var(--sp-3); border-left: 1px solid var(--border); }
  html.v2 .v2-kopf-konto .navbtn { width: 32px; height: 32px; }
  html.v2 .v2-kopf-konto .navbtn svg { width: 17px; height: 17px; }
  html.v2 .v2-kopf-konto .navbtn .navlabel { display: none; }
  html.v2 .v2-kopf-konto .avatar { width: 28px; height: 28px; font-size: 11px; margin-left: 4px; }
  html.v2 .v2-kopf-seite #refreshBtn { height: 32px; width: 32px; padding: 0; justify-content: center; font-size: 0; border-color: transparent; background: none; color: var(--text-muted); }
  html.v2 .v2-kopf-seite #refreshBtn:hover { background: var(--surface-hover); color: var(--text); }
  html.v2 .v2-kopf-seite #refreshBtn svg { width: 17px; height: 17px; }

  html.v2 .mainnav {
    grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch;
    padding: var(--sp-2) 10px var(--sp-3); gap: 0; overflow-y: auto; min-height: 0;
    background: var(--surface); border-right: 1px solid var(--border);
    /* Eigener Stapelbereich, damit das Muster unten (z-index: -1) hinter
       den Einträgen liegt, aber vor der Fläche der Leiste. Ohne ihn
       rutschte es ganz hinter den Hintergrund und wäre unsichtbar. */
    isolation: isolate;
  }

  /* Markenzeichen als geprägtes Muster (Matteo, 19.09.: „wie ein graviertes
     Muster“, Entwurf B). Das Z wiederholt sich als versetzte Kachel und
     blendet nach oben aus.

     Es hängt an den BEREICHSKNÖPFEN und wächst von deren Oberkante nach
     oben (`bottom: 100%`), nicht mehr am Fuß der ganzen Seitenleiste
     (Matteo, 21.09.2026: „siehst du das ist abgeschnitten wegen der
     Leiste unten“). Vorher lag es als Hintergrund der Leiste und lief
     hinter den Knöpfen weiter - deren deckende Fläche schnitt genau das
     kräftige Stück ab, sichtbar blieb nur der schon ausgeblendete Rest.
     So endet es von selbst an der richtigen Kante, egal wie viele Knöpfe
     die Leiste gerade hat.

     Das Ausblenden macht eine Maske und kein Verlauf in Flächenfarbe:
     damit gibt es keinen zweiten Farbwert, der zum Untergrund passen muss.

     Das SVG steht mit EINFACHEN Anführungszeichen in der Adresse - doppelte
     würden die url("…") aufbrechen, und die Raute der Farbe muss %23 sein.

     Nur am Rechner: Unter 861px wird aus .mainnav die Tab-Leiste am unteren
     Rand, dort wäre für ein Muster kein Platz (siehe unten). */
  html.v2 .v2-sb-nav::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 340px;
    z-index: -1; pointer-events: none;
    background-repeat: repeat; background-position: left bottom; background-size: 34px 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%230A1830' fill-opacity='0.16'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  }
  /* Dunkel: heller Ton statt dunklem, sonst bliebe das Muster unsichtbar.
     Beide Schaltwege - Systemeinstellung ohne Stempel am html-Element und
     die ausdrückliche Wahl über data-theme. */
  @media (prefers-color-scheme: dark) {
    html.v2:not([data-theme="light"]) .v2-sb-nav::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.13'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
  }
  html.v2[data-theme="dark"] .v2-sb-nav::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.13'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  html.v2 .v2-sb-kontext { display: flex; flex-direction: column; }
  html.v2 .v2-sb-kontext[hidden] { display: none; }
  html.v2 .v2-sb-abschnitt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: 10px 8px 4px; }
  /* Ohne Überschrift „Lagen“ - etwas Luft nach oben statt des Titels. */
  html.v2 .v2-sb-lagen { display: flex; flex-direction: column; gap: 1px; padding-top: 6px; }
  html.v2 .v2-lage {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; text-align: left;
    border: none; background: none; border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--fs-base); font-weight: 500;
  }
  html.v2 .v2-lage svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  html.v2 .v2-lage span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.v2 .v2-lage b { font-weight: 500; font-size: 11px; color: var(--text-faint); background: var(--surface-2); border-radius: 999px; padding: 0 7px; line-height: 18px; }
  html.v2 .v2-lage:hover { background: var(--surface-hover); color: var(--text); }
  html.v2 .v2-lage.active { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
  html.v2 .v2-lage.active b { background: transparent; color: var(--accent-strong); }
  html.v2 .v2-sb-kanaele { display: flex; flex-direction: column; }
  html.v2 .v2-sb-kanaele .rail-gruppe { padding: 8px 8px 3px; }
  html.v2 .v2-sb-kanaele .rail-item { padding: 5px 8px; font-size: var(--fs-base); }
  /* Deckende Fläche unter den Bereichsknöpfen: Das Prägemuster darunter
     läuft sonst durch die Beschriftungen und macht sie unruhig. So füllt
     es den freien Raum darüber und hört am Text auf. */
  /* Deckende Fläche unter den Bereichsknöpfen: Das Prägemuster darunter
     läuft sonst durch die Beschriftungen und macht sie unruhig. Die
     negativen Ränder holen die Fläche über das Innenmaß der Leiste
     hinaus, sonst schaute das Muster links und rechts daneben hervor. */
  html.v2 .v2-sb-nav {
    margin-top: auto; display: flex; flex-direction: column; gap: 1px;
    padding: var(--sp-3) 10px var(--sp-3); margin-left: -10px; margin-right: -10px;
    margin-bottom: calc(var(--sp-3) * -1);
    border-top: 1px solid var(--border); background: var(--surface);
    /* Bezugspunkt für das Prägemuster darüber (::before, siehe oben). */
    position: relative;
  }
  /* Die Knopfleiste steht auf JEDER Seite unten, nicht nur im Posteingang.
     Vorher zog sie ohne den Filterblock darüber (also überall außer im
     Posteingang) nach oben - dann wuchs das Prägemuster nach oben aus dem
     Bild heraus und war weg (Matteo, 27.09.2026: „z gravierung steht aber
     bisher nur auf der hauptseite posteingang"). Nebenbei hörte damit das
     Springen der Leiste beim Seitenwechsel auf. */
  html.v2 .v2-sb-nav .navbtn {
    width: 100%; height: auto; justify-content: flex-start; gap: 10px; padding: 7px 8px;
    font-size: var(--fs-base); font-weight: 500; color: var(--text-muted); border-radius: var(--radius-sm);
  }
  html.v2 .v2-sb-nav .navbtn:hover { background: var(--surface-hover); color: var(--text); }
  html.v2 .v2-sb-nav .navbtn.active { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
  html.v2 .v2-sb-nav .navbtn svg { width: 17px; height: 17px; }
  html.v2 .v2-sb-nav .navbtn .navlabel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.v2 .v2-sb-nav .navbtn .soon-dot { position: static; margin-left: auto; }

  html.v2 .page { grid-column: 2; grid-row: 2; height: auto; min-height: 0; }

  /* Posteingang: Topbar und Kanalspalte sind in Kopf und Seitenleiste
     aufgegangen. Die Kanalspur bleibt als 0px-Spur stehen (siehe Hinweis
     zu .rail-collapsed in styles.css: display:none würde die Spuren
     verschieben). */
  html.v2 .topbar { display: none; }
  html.v2 .inbox-body, html.v2 .inbox-body.rail-collapsed { grid-template-columns: 0 0 var(--inbox-list-w, 380px) 0 minmax(0, 1fr); }
  html.v2 .inbox-body .rail { visibility: hidden; width: 0; padding: 0; border: none; overflow: hidden; }
  html.v2 .inbox-body [data-resize="rail"] { visibility: hidden; }
  html.v2 #statusFilter { display: none; }
  html.v2 .list-col { background: var(--surface); }
  html.v2 .list-header { padding: 8px 16px; min-height: 44px; }
  html.v2 .list-header h1 { font-size: 14px; }
  html.v2 .list-header .sub { font-size: 11px; }
  html.v2 .bulk-bar { border-radius: var(--radius); }

  /* Lesebereich: Werkzeugleiste oben, darunter Avatar + Name/Betreff;
     rechts das Seitenfeld als feste Spalte. */
  html.v2 .detail-col { background: var(--bg); }
  html.v2 .detail-main { background: var(--bg); }
  html.v2 .detail-header {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "aktionen aktionen" "av main";
    gap: 10px 12px; padding: 8px 20px 12px; background: var(--surface); align-items: start;
  }
  html.v2 .detail-header .detail-actions { grid-area: aktionen; margin-left: 0; width: 100%; align-items: center; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  html.v2 .detail-header .v2-av-gross { grid-area: av; }
  html.v2 .detail-header .detail-header-main { grid-area: main; }
  /* Die Kartei setzt ihr Avatar selbst (kein .v2-av-gross wie im
     Posteingang) - ohne diese Zeile fiele es in die Auffangregel darunter
     und stünde als einzelner Kreis UNTER dem Namen statt daneben (3gn). */
  html.v2 .detail-header .kartei-avatar-wrap { grid-area: av; }
  html.v2 .detail-header .kartei-avatar { width: 40px; height: 40px; font-size: 14px; }
  html.v2 .detail-header > :not(.detail-actions):not(.v2-av-gross):not(.detail-header-main) { grid-column: 1 / -1; }
  html.v2 .thread { padding: 20px; gap: 16px; }
  html.v2 .composer { background: var(--surface); }

  /* Übrige Seiten: Titel steht in der Kopfleiste, die eigene Kopfzeile
     wird flacher; Inhalte auf heller Fläche. */
  html.v2 .simple-header { min-height: 46px; padding: var(--sp-2) 20px; background: var(--surface); }
  html.v2 .simple-header > h1 { display: none; }
  html.v2 .simple-header:not(:has(:not(h1))) { display: none; }
  html.v2 .settings-layout .rail { padding: var(--sp-3) 10px; }
  html.v2 .settings-body { padding: 20px 28px; }
  /* Einstellungen: die Reiterspalte wandert als Untermenü in die Seitenleiste
     unter „Einstellungen“ - spart die zweite Spalte, lässt sich einklappen
     (Matteo, 17.09.). */
  html.v2 .settings-layout:not(:has(> .rail)) { grid-template-columns: minmax(0, 1fr); }
  html.v2 .v2-sb-zeile { display: flex; align-items: center; gap: 2px; }
  html.v2 .v2-sb-zeile .navbtn { flex: 1; min-width: 0; }
  html.v2 .v2-sb-zu { display: none; width: 26px; height: 26px; border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; align-items: center; justify-content: center; flex: none; padding: 0; }
  html.v2 .v2-sb-zeile.mit .v2-sb-zu { display: inline-flex; }
  html.v2 .v2-sb-zu:hover { background: var(--surface-hover); color: var(--text); }
  html.v2 .v2-sb-zu svg { width: 14px; height: 14px; transform: rotate(180deg); transition: transform 0.15s; }
  html.v2 .v2-sb-zeile.zu .v2-sb-zu svg { transform: none; }
  html.v2 .v2-sb-einst { display: flex; flex-direction: column; padding: 2px 0 6px; }
  html.v2 .v2-sb-einst[hidden] { display: none; }
  html.v2 .v2-sb-einst .rail { border: none; background: none; padding: 0; gap: 1px; overflow: visible; }
  html.v2 .v2-sb-einst .rail-item { padding: 5px 8px 5px 35px; font-size: 13px; }
}

/* ---------- 4) Handy ---------- */
@media (max-width: 860px) {
  /* Auf dem Handy gibt es kein Überfahren - die Vorschau muss also
     dauerhaft dastehen. Damit die Zeile trotzdem nicht anschwillt,
     teilen Betreff und Vorschau sich EINE Zeile: der Betreff kräftig,
     die Vorschau blass dahinter („Rücksende-Etikett · Der Käufer
     wurde …"). Bei eBay, wo beide oft wörtlich dasselbe sagen, steht
     der Satz damit nur noch einmal da. (Matteo, 25.09.2026, Entwurf M2.) */
  html.v2 .v2-satz {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  html.v2 .v2-satz .ticket-subject,
  html.v2 .v2-satz .ticket-preview {
    display: inline; max-height: none; overflow: visible; margin: 0; transition: none;
  }
  html.v2 .v2-satz .ticket-preview::before { content: " · "; color: var(--text-faint); }
  /* Die Quelle steht hier nicht als Wort: Dafür ist die Zeile zu schmal,
     und der Farbstreifen am Rand sagt dasselbe. */
  html.v2 .v2-quelle { display: none; }

  html.v2 .shell { display: grid; grid-template-columns: 1fr; grid-template-rows: 48px minmax(0, 1fr); }
  html.v2 .v2-kopf {
    grid-row: 1; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); height: 48px;
    background: var(--surface); border-bottom: 1px solid var(--border); min-width: 0;
  }
  html.v2 .v2-marke { display: flex; align-items: center; gap: 8px; flex: none; }
  html.v2 .v2-marke .mark { width: 24px; height: 24px; margin: 0; }
  html.v2 .v2-marke-name { display: none; }
  html.v2 .v2-kopf-mitte { flex: 1; min-width: 0; display: flex; align-items: center; }
  html.v2 .v2-titel { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.v2 .v2-suchzeile { padding: 0 12px 8px; }
  html.v2 .v2-suchzeile .search-toggle { display: none; }
  html.v2 .v2-suchzeile .topbar-search input, html.v2 .v2-suchzeile .topbar-search.search-open input { padding-left: 10px; }
  html.v2 .v2-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
  html.v2 .v2-kopf-seite { display: flex; align-items: center; gap: 4px; }
  html.v2 .v2-kopf-seite .topbar-stats { display: none; }
  html.v2 .v2-kopf-seite #refreshBtn span, html.v2 .v2-kopf-seite #refreshBtn { font-size: 0; padding: 6px; }
  html.v2 .v2-kopf-seite #refreshBtn svg { width: 16px; height: 16px; }
  html.v2 .v2-kopf-konto { display: flex; align-items: center; gap: 0; }
  html.v2 .v2-kopf-konto .navbtn { width: 36px; height: 36px; padding: 0; flex: none; flex-direction: row; }
  html.v2 .v2-kopf-konto .navbtn .navlabel { display: none; }
  html.v2 .v2-kopf-konto .avatar { width: 28px; height: 28px; font-size: 11px; margin-left: 4px; }
  html.v2 .page { grid-row: 2; height: auto; min-height: 0; }
  html.v2 .topbar { display: none; }
  html.v2 .v2-sb-kontext { display: none; }
  html.v2 .v2-sb-nav { display: contents; }
  /* --- Das Z auf dem Handy (3hd, Entwurf „A": „Der Grund") ---------------
     Bis hierher stand hier: „Kein Prägemuster auf dem Handy, für ein Band
     darüber wäre kein Platz." Das stimmt für ein Band ÜBER der Leiste -
     nicht für die Leiste selbst. Matteo, 28.09.2026: das Monogramm soll ein
     wiederkehrendes Element sein.

     Es liegt deshalb an genau den zwei Flächen des Posteingangs, auf denen
     kein Text steht: in der Tab-Leiste unten und im Auslauf unter der
     letzten Zeile. Dieselbe Kachel, dieselbe Deckkraft (16 % hell / 13 %
     dunkel) und dieselbe Maske wie in der Seitenleiste am Rechner (3gk) -
     die Tab-Leiste IST dieselbe Leiste, nur umgeklappt.

     `.v2-sb-nav` bleibt hier `display: contents`, seine Box gibt es also
     gar nicht; die Kachel trägt die Leiste selbst (.mainnav). Das
     ausdrücklich, nicht als Nebenwirkung. */
  html.v2 .v2-sb-nav::before { display: none; content: none; }

  html.v2 .mainnav::before,
  html.v2 #ticketList::after {
    content: ""; pointer-events: none;
    background-repeat: repeat; background-position: left bottom; background-size: 34px 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%230A1830' fill-opacity='0.16'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  /* Die Leiste: stärkstes Muster am unteren Rand, wo unter den Beschriftungen
     Platz ist (auf dem iPhone zusätzlich der sichere Bereich), und nach oben
     ausgeblendet, damit die Symbole auf ruhigem Grund stehen. */
  html.v2 .mainnav::before {
    position: absolute; inset: 0; z-index: 0;
    /* Leiser als der Auslauf: Hier liegen vier Beschriftungen darüber, dort
       nichts. Dieselbe Staffelung wie im Rest von V2 - 16 % auf freier
       Fläche, 7 % unter Text (3hb, 3hc). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%230A1830' fill-opacity='0.07'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0.5) 40%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0.5) 40%, transparent 88%);
  }
  html.v2 .mainnav > * { position: relative; z-index: 1; }

  /* Der Auslauf: ein Feld NACH der letzten Zeile, nicht unter ihr. Es wächst
     in den freien Raum (deshalb hier die Spalte aus Flex-Boxen) und ist auch
     bei langer Liste noch 88 px hoch - wer bis ans Ende scrollt, sieht, dass
     es zu Ende ist. Heute hört die Liste einfach auf.
     Nach unten hin kräftiger: Dort trifft das Muster auf das der Leiste. */
  html.v2 #ticketList { display: flex; flex-direction: column; }
  html.v2 #ticketList > .ticket, html.v2 #ticketList > .v2-gruppe { flex: none; }
  html.v2 #ticketList::after {
    display: block; flex: 1 0 88px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 45%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 45%, #000 100%);
  }
  /* Kein Auslauf unter einem Leerzustand: Der füllt die Spalte selbst und
     sagt schon, dass hier nichts ist - zwei Aussagen wären eine zu viel. */
  html.v2 #ticketList:has(.list-empty)::after { display: none; }

  /* Dunkel: heller Ton statt dunklem, sonst bliebe das Muster unsichtbar -
     dieselben beiden Schaltwege wie bei der Seitenleiste. */
  @media (prefers-color-scheme: dark) {
    html.v2:not([data-theme="light"]) .mainnav::before,
    html.v2:not([data-theme="light"]) #ticketList::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.13'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    html.v2:not([data-theme="light"]) .mainnav::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
  }
  html.v2[data-theme="dark"] .mainnav::before,
  html.v2[data-theme="dark"] #ticketList::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.13'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  html.v2[data-theme="dark"] .mainnav::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
  html.v2 .body .detail-col { top: 0; }
  html.v2 .detail-header .v2-av-gross { display: none; }
  html.v2 .composer-bar .composer-row { display: none; }

  /* ---- Mobil-Runde (Matteo, 18.09.) ---- */
  /* Höhe nach dem sichtbaren Ausschnitt (dvh), nicht nach 100vh: auf dem
     iPhone ist 100vh höher als der Bildschirm mit Adressleiste - die Seite
     rutschte nach unten und stand nicht oben bündig. Das Dokument selbst
     scrollt nie (kein Gummiband); die Tab-Leiste (64px) liegt unter der
     Hülle, damit die letzte Zeile nicht hinter ihr verschwindet. */
  html.v2, html.v2 body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  html.v2 .shell { height: calc(100vh - 64px - env(safe-area-inset-bottom, 0px)); }
  @supports (height: 100dvh) { html.v2 .shell { height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px)); } }
  /* Tab-Leiste: nur die Bereiche - Pfeil und Untermenü der Einstellungen sind Desktop. */
  html.v2 .v2-sb-zeile { display: contents; }
  html.v2 .v2-sb-zu, html.v2 .v2-sb-einst { display: none !important; }
  /* Runterziehen: der Kreis liegt über der Liste statt sie zu verschieben;
     die Liste folgt nur beim Ziehen dem Finger, danach steht sie sofort
     wieder oben; am Ende kurz der Haken. */
  html.v2 .list-col { position: relative; }
  html.v2 .ptr { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
  html.v2 #ticketList { transition: transform 0.18s ease; }
  html.v2 #ticketList.ptr-zieht { transition: none; }
  html.v2 .ptr-kreis .ptr-haken { display: none; width: 16px; height: 16px; }
  html.v2 .ptr.fertig .ptr-kreis { color: var(--good); transform: none; opacity: 1; }
  html.v2 .ptr.fertig .ptr-kreis svg:first-child { display: none; }
  html.v2 .ptr.fertig .ptr-kreis .ptr-haken { display: block; }
  html.v2 #refreshBtn.laedt svg { animation: spin 0.7s linear infinite; }
  /* Seitentitel steht in der Kopfleiste - die eigene Überschrift darunter
     („Einstellungen“, „Addons“) war doppelt; wie am Desktop ausblenden. */
  html.v2 .simple-header > h1 { display: none; }
  html.v2 .simple-header:not(:has(:not(h1))) { display: none; }
  /* Kopf der Detailansicht: Name (mit Kartei-Pfeil) und Betreff über die
     volle Breite, darunter die Knöpfe in einer Reihe - vorher drängten die
     Knöpfe rechts den Pfeil allein in eine eigene Zeile. */
  html.v2 .detail-header { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px 12px; }
  html.v2 .detail-header .detail-header-main { flex: 1 1 100%; }
  html.v2 .detail-header .detail-actions { margin-left: 0; width: 100%; gap: 8px; align-items: center; }
  /* Antwortkasten: Richtungen in einer wischbaren Zeile, KI-Knöpfe nur als Symbol. */
  html.v2 .v2-ri { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-left: 12px; }
  html.v2 .v2-ri::-webkit-scrollbar { display: none; }
  html.v2 .v2-ri-grund { display: none; }
  html.v2 .v2-ri-zu { margin-left: 2px; }
  /* Vier Werkzeuge (Globus, Bankdaten, Büroklammer, Kamera) passen neben
     Signaturwahl und Senden-Knopf nicht mehr in eine 375-px-Zeile. Statt
     sie zu quetschen bricht die Leiste geordnet um: Werkzeuge oben über
     die volle Breite, darunter Signatur und Senden. Vorher rutschte nur
     der letzte Knopf allein in eine zweite Zeile, was zerfranst aussah. */
  html.v2 .composer-bar { flex-wrap: wrap; gap: 6px; padding-left: 8px; padding-right: 8px; }
  html.v2 .composer-bar .ai-row { flex: 1 0 100%; flex-wrap: nowrap; gap: 4px; }
  html.v2 .composer-bar .tool-btn { padding: 5px 7px; }
  html.v2 .composer-bar .signatur-wahl { margin-left: 0; }
  html.v2 .composer-bar .composer-actions { margin-left: auto; }
  /* Anhänge: eine wischbare Zeile statt Umbruch in die Höhe - der
     Antwortkasten hat auf dem Handy wenig Platz. */
  html.v2 .composer-anhaenge { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 12px 10px; }
  html.v2 .composer-anhaenge::-webkit-scrollbar { display: none; }
  html.v2 .anhang-chip { flex: none; max-width: 60vw; }
  html.v2 .v2-ki { padding-left: 12px; }
  html.v2 .v2-ki-re .btn span { display: none; }
  html.v2 .v2-ki-re .btn { padding: 5px 8px; }

  /* ---- Mobil-Runde 2 (Matteo, 18.09.) ---- */
  /* Einstellungen: Der Name der Unterseite steht schon in der Zurückleiste -
     die erste Überschrift darunter sagte dasselbe noch einmal und kostete
     eine ganze Zeile. Nur die erste: in Profil/Abo sind die weiteren
     .settings-h2 echte Abschnittstitel. */
  html.v2 #settingsContent > .settings-h2:first-child,
  html.v2 #settingsContent > div > .settings-h2:first-child { display: none; }

  /* Team hatte als einzige Seite keinen Handy-Umbruch und stand als
     250-px-Spalte neben dem Detail. */
  html.v2 .v2-team { grid-template-columns: 1fr; }
  html.v2 .v2-team-liste { border-right: none; border-bottom: 1px solid var(--border); }

  /* Untereinander statt nebeneinander heißt: Höhe nach Inhalt. Mit
     `flex: 1 0 auto` und voller Zeilenhöhe zog die (oft kurze oder leere)
     Liste einen bildschirmhohen weißen Block auf, bevor das Detail kam. */
  html.v2 .v2-ab, html.v2 .v2-kis, html.v2 .v2-ad, html.v2 .v2-team { flex: none; min-height: 0; }
  html.v2 .v2-ab { grid-template-rows: auto auto; }
  html.v2 .v2-ab-liste, html.v2 .v2-kis-liste, html.v2 .v2-ad-liste, html.v2 .v2-team-liste { overflow: visible; }

  /* Firma: Profilkopf und Kartenraster sind für drei bzw. zwei Spalten
     gebaut; auf 375 px stapeln, Felder höchstens zwei nebeneinander. */
  html.v2 .v2-firma-profil { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  html.v2 .v2-firma-profil .voll { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
  html.v2 .v2-firma-karten { grid-template-columns: 1fr; }
  html.v2 .v2-firma-karte .g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.v2 .v2-firma-karte .g .span-3, html.v2 .v2-firma-karte .g .span-4 { grid-column: span 2; }
  /* Der Hinweis lief rechtsbündig unter die Überschrift und zerfiel in
     zwei ausgefranste Zeilen. */
  html.v2 .v2-firma-karte .ak { flex-wrap: wrap; }
  html.v2 .v2-firma-karte .ak .hint { margin-left: 0; text-align: left; flex: 1 1 100%; }
  /* Die Kennzeichen („USt-IdNr. …“, „Straße fehlt“) erben vom Frist-Chip im
     Vorgangskopf ein `margin-left: auto` und wurden dadurch einzeln an den
     rechten Rand geschoben - auf der schmalen Spalte eine ausgefranste
     Treppe. Hier stehen sie in einer Reihe von links. */
  html.v2 .v2-firma-profil .chips .v2-chip { margin-left: 0; }
}

/* Touch-Geräte kennen kein Hover: Nach dem Antippen blieb die Hervorhebung
   auf der Karte kleben (Kaufland wirkte dauerhaft „ausgewählt“, mit weißem
   Rest um den Pfeil). Die Maus behält ihr Hover, dies gilt nur für Finger. */
@media (hover: none) {
  /* Nur der reine Hover fällt weg - was ausgewählt IST, behält seine Farbe. */
  html.v2 .conn-summary:hover, html.v2 .chevron-btn:hover,
  html.v2 .v2-ab-eintrag:not(.on):hover, html.v2 .v2-ad-eintrag:not(.on):hover,
  html.v2 .rail-item:not(.active):hover, html.v2 .ticket:not(.active):hover,
  html.v2 .navbtn:not(.active):hover { background: none; }
}

/* ---------- Profil / Auswertung (profil-v2.js, 3hb, Entwurf C1) ---------- */
/* Die vier Zahlen teilen sich EIN Feld, getrennt von Haarlinien statt von
   Lücken: Vier Kacheln lesen sich als vier Dinge, ein Feld als eine
   Aussage. */
html.v2 .v2-pr { display: flex; flex-direction: column; gap: 14px; padding-bottom: var(--sp-8); }
html.v2 .v2-pr-kopf .n { font-size: var(--fs-lg); font-weight: 600; }
html.v2 .v2-pr-kopf .e { font-size: var(--fs-sm); color: var(--text-faint); margin-top: 1px; }

html.v2 .v2-pr-feld {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Die Z-Gravur aus der Seitenleiste (3gk), hier nach links ausgeblendet:
   Die Zahlen stehen auf ruhigem Grund, die Textur trägt nur die rechte
   Flanke. Dieselbe Kachel, dieselbe Deckkraft - kein neues Mittel. */
html.v2 .v2-pr-feld::after,
html.v2 .v2-vb-werte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-repeat: repeat; background-size: 34px 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%230A1830' fill-opacity='0.07'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* Deutlich leiser als in der Seitenleiste (dort 16 %): Die steht auf
     einem schmalen Streifen, hier liegt sie unter Zahlen, die man lesen
     muss. Und die Maske gibt erst auf dem letzten Viertel nach. */
  -webkit-mask-image: linear-gradient(to left, #000 0, transparent 78%);
  mask-image: linear-gradient(to left, #000 0, transparent 78%);
}
html.v2 .v2-pr-zelle {
  position: relative; z-index: 1;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-right: 1px solid var(--border); min-width: 0;
}
html.v2 .v2-pr-zelle:last-child { border-right: none; }
html.v2 .v2-pr-wert {
  display: block; font-size: 28px; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
html.v2 .v2-pr-von { color: var(--text-faint); font-size: 18px; }
html.v2 .v2-pr-name {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); margin-top: 2px;
}
html.v2 .v2-pr-zusatz { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; }
html.v2 .v2-pr-zusatz.gut { color: var(--good); }
html.v2 .v2-pr-zusatz.warn { color: var(--warn); }

html.v2 .v2-pr-reihe { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; align-items: start; }
html.v2 .v2-pr-karte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow);
}
html.v2 .v2-pr-karte > h3 {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 var(--sp-3);
}
/* Die Marktplatzliste ist zum Nachschlagen da, nicht zum Arbeiten. */
html.v2 .v2-pr-karte.leise { background: none; border-style: dashed; box-shadow: none; }
/* Die alten Abschnittsüberschriften sind jetzt die Karten-Überschriften. */
html.v2 .v2-pr .settings-h2 { display: none; }
html.v2 .v2-pr .btn-row { margin-top: var(--sp-3); }
html.v2 .v2-pr .btn-row:first-of-type { margin-top: 0; }

@media (max-width: 980px) {
  html.v2 .v2-pr-feld { grid-template-columns: 1fr 1fr; }
  html.v2 .v2-pr-zelle:nth-child(2) { border-right: none; }
  html.v2 .v2-pr-zelle:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  html.v2 .v2-pr-reihe { grid-template-columns: 1fr; }
}

/* Dunkel: heller Ton statt dunklem, sonst bliebe die Gravur unsichtbar -
   dieselben beiden Schaltwege wie bei der Seitenleiste (3gk). */
@media (prefers-color-scheme: dark) {
  html.v2:not([data-theme="light"]) .v2-pr-feld::after,
  html.v2:not([data-theme="light"]) .v2-vb-werte::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
}
html.v2[data-theme="dark"] .v2-pr-feld::after,
html.v2[data-theme="dark"] .v2-vb-werte::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Zwei der vier alten Kennzahlkarten stehen jetzt oben im Feld - unten
   noch einmal, und dann auch noch mit einer anderen Zahl (oben der
   heutige Schnitt, unten der über alles), wäre schlimmer als gar nichts.
   Über CSS statt beim Umbau: renderAuswertung() zeichnet den Abschnitt
   bei jeder Aktualisierung neu, ein einmaliges Entfernen hielte nicht. */
html.v2 .v2-pr .analytics-card[data-kz="offen"],
html.v2 .v2-pr .analytics-card[data-kz="antwortzeit"] { display: none; }

/* ---------- Einstellungen → Verbindungen (verbindungen-v2.js, 3hc, „A") ----------
   Zwei Reiter wurden eine Spalte: links alles - was läuft und was man noch
   verbinden könnte -, rechts ein Feld für das Gewählte. Die Liste bleibt
   beim Wechseln stehen; vorher sprang das Kachelraster, weil eine
   aufgeklappte Karte über die volle Breite ging. */
html.v2 .v2-vb {
  display: grid; grid-template-columns: 290px minmax(0, 1fr);
  gap: 14px; align-items: start; padding-bottom: var(--sp-8);
}
html.v2 .v2-vb-liste {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}

/* Der Tarifstand sitzt über der Liste, nicht über der Seite (aus Entwurf C):
   Er sagt, wie viele Zeilen noch dazukommen dürfen. In 290 px ist für
   Rahmen und Schatten kein Platz - hier trägt ihn die Liste selbst. */
html.v2 .v2-vb-tarif {
  margin: 0; border: none; border-bottom: 1px solid var(--border);
  border-radius: 0; box-shadow: none; padding: 10px 14px; gap: 6px;
  background: var(--bg);
}
html.v2 .v2-vb-tarif .plan-text { font-size: 12.5px; }
html.v2 .v2-vb-tarif .plan-meter { width: 100%; flex: 1 0 100%; }

html.v2 .v2-vb-suche { padding: 8px 10px; border-bottom: 1px solid var(--border); }
html.v2 .v2-vb-suche input {
  width: 100%; height: 30px; padding: 0 9px; font: inherit; font-size: 12.5px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px;
}
html.v2 .v2-vb-suche input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

html.v2 .v2-vb-gruppe {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); padding: 13px 14px 5px;
}
html.v2 .v2-vb-gruppe.leise { font-weight: 400; padding-top: 10px; }
html.v2 .v2-vb-gzahl { font-weight: 400; }

html.v2 .v2-vb-zeile {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 14px; border: none; border-left: 2px solid transparent;
  background: none; text-align: left; font-family: inherit; color: var(--text);
  cursor: pointer;
}
html.v2 .v2-vb-zeile:hover { background: var(--surface-hover); }
html.v2 .v2-vb-zeile.gewaehlt { background: var(--accent-tint); border-left-color: var(--accent-strong); }
html.v2 .v2-vb-zeile.stumm .v2-vb-nam { color: var(--text-muted); }
html.v2 .v2-vb-liste .conn-logo { width: 22px; height: 22px; border-radius: 4px; flex: none; }
html.v2 .v2-vb-nam {
  flex: 1; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.v2 .v2-vb-rechts { display: flex; align-items: center; gap: 7px; flex: none; }
html.v2 .v2-vb-zahl {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
html.v2 .v2-vb-art { font-size: 11px; color: var(--text-faint); }
html.v2 .v2-vb-art.gesperrt { color: var(--warn); }
html.v2 .v2-vb-leerzeile { padding: 3px 14px 10px; font-size: 12.5px; color: var(--text-muted); }
html.v2 .v2-vb-notiz { margin: 10px 14px 12px; padding-top: 10px; font-size: 11.5px; }
/* Die Suche blendet Zeilen aus - [hidden] allein verlöre gegen das
   display:flex der Zeile, das später in derselben Datei steht. */
html.v2 .v2-vb-zeile[hidden], html.v2 .v2-vb-gruppe[hidden] { display: none; }

/* ---- Rechts: das gewählte Ding ---- */
html.v2 .v2-vb-feld { min-width: 0; }
html.v2 .v2-vb-leer {
  padding: 32px 18px; text-align: center; font-size: 13px; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Der Kopf der Karte trägt jetzt die zwei alltäglichen Handlungen; der
   große Knopf darum ist beim Umbau zu einem <span> geworden. */
html.v2 .v2-vb-feld .conn-summary-row { align-items: center; gap: 10px; padding: 4px 14px 4px 0; }
html.v2 .v2-vb-feld .conn-summary { flex: 1; min-width: 0; cursor: default; }
html.v2 .v2-vb-feld .conn-summary:hover { background: none; }
html.v2 .v2-vb-kopfknoepfe { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
/* Zeitpunkt und Anzahl stehen als eigene Zahlen direkt darunter - zweimal
   dieselbe Auskunft waere eine zu viel. Die Fehlerzeile bleibt. */
html.v2 .v2-vb-feld .conn-summary [data-abruf] { display: none; }
html.v2 .v2-vb-unter { display: block; font-size: 12.5px; color: var(--text-muted); }

/* Der Koerper der Karte ist meist leer - alles darin (Diagnose, Newsletter,
   Papierkorb, Loeschkasten, Bearbeiten) klappt erst auf Klick auf. Mit
   eigener Polsterung stuende dort ein leeres Band; jetzt tragen die Kinder
   ihren Abstand selbst und ein leerer Koerper hat keine Hoehe. */
html.v2 .v2-vb-feld .conn-body { padding: 0; border-top: none; }
html.v2 .v2-vb-feld .conn-body > * { margin: 14px; }
html.v2 .v2-vb-feld .conn-body > .conn-form-error:empty { margin: 0; }

/* Die drei Zahlen zur Verbindung teilen sich EIN Feld, getrennt von
   Haarlinien - dasselbe Mittel wie oben auf der Profilseite (3hb). */
html.v2 .v2-vb-werte {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
html.v2 .v2-vb-wert {
  position: relative; z-index: 1; min-width: 0;
  padding: 12px 16px; border-right: 1px solid var(--border);
}
html.v2 .v2-vb-wert:last-child { border-right: none; }
html.v2 .v2-vb-gross { display: block; font-size: 19px; font-weight: 600; line-height: 1.2; }
html.v2 .v2-vb-wname { font-size: 12px; color: var(--text-muted); }

/* Die leer gewordene Knopfreihe verschwindet, statt eine Lücke zu lassen. */
html.v2 .v2-vb-feld .conn-body > .btn-row:empty { display: none; }
html.v2 .v2-vb-fuss {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 11px 14px; border-top: 1px solid var(--border); background: var(--bg);
}
/* „Entfernen" steht für sich am anderen Ende - vorher sah es aus wie
   „Testen". */
html.v2 .v2-vb-fuss [data-remove] { margin-left: auto; }

/* Katalogeintrag: eigener Kopf. Der alte Klappkopf wird beim Umbau
   entfernt (verbindungen-v2.js), nicht ausgeblendet - er trüge Logo und
   Namen ein zweites Mal. */
/* Das Formular steht jetzt offen da; darin bleiben Teile absichtlich
   verborgen (der Absenden-Knopf eines Postfachs erscheint erst im zweiten
   Schritt). Deren display-Regel ist staerker als das nackte [hidden] - in
   der alten Ansicht fiel das nicht auf, weil der ganze Koerper zu war. */
html.v2 .v2-vb-feld [hidden] { display: none; }
html.v2 .v2-vb-katkopf {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--border);
}
html.v2 .v2-vb-kattext { flex: 1; min-width: 0; }
html.v2 .v2-vb-katname { display: block; font-size: 15px; font-weight: 600; }
html.v2 .v2-vb-kathinweis { display: block; font-size: 12.5px; color: var(--text-muted); }
html.v2 .v2-vb-katleer { padding: 14px; font-size: 13px; color: var(--text-muted); }
html.v2 .v2-vb-feld .add-row-body { padding: 14px; }
html.v2 .v2-vb-feld .add-row-static { padding: 14px; }

/* Auf dem Handy gehören die zwei Kopfknöpfe UNTER den Text, nicht
   daneben - sonst quetschen sie eine Fehlermeldung in eine schmale
   Spalte. styles.css macht das für die Fehlerkarte schon (860 px), meine
   stärkere Regel für .conn-summary hob es hier wieder auf. */
@media (max-width: 860px) {
  html.v2 .v2-vb-feld .conn-summary { flex: 1 1 100%; }
  html.v2 .v2-vb-kopfknoepfe { margin-left: 0; padding: 0 0 10px 14px; }
}

/* Schmal: Liste über das Feld, sonst bleiben für die Formulare keine
   250 px übrig. */
@media (max-width: 980px) {
  html.v2 .v2-vb { grid-template-columns: minmax(0, 1fr); }
  html.v2 .v2-vb-werte { grid-template-columns: 1fr; }
  html.v2 .v2-vb-wert { border-right: none; border-bottom: 1px solid var(--border); }
  html.v2 .v2-vb-wert:last-child { border-bottom: none; }
}

/* ---------- Cold Reaching (3he, Entwurf „B": die Kampagne als Feld) ----------
   Matteo nach drei Entwürfen: „finde B gut." Der Aufbau der Seite - drei
   Spalten - war richtig; falsch war, was in welcher stand. */

/* Die vier Zahlen teilen sich EIN Feld, getrennt von Haarlinien statt von
   Lücken. Dasselbe Mittel wie im Profil (3hb) und an einer Verbindung
   (3hc); vorher standen sie als vier Pillen in der Kopfzeile. */
html.v2 .coldreach-zahlenfeld {
  flex: none; position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
html.v2 .coldreach-zahlenfeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-repeat: repeat; background-size: 34px 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%230A1830' fill-opacity='0.07'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* Frueher aus als im Profil (dort 78 %): Dieses Feld ist ueber die ganze
     Breite gespannt, und die erste Zahl stuende sonst noch auf Textur. */
  -webkit-mask-image: linear-gradient(to left, #000 0, transparent 52%);
  mask-image: linear-gradient(to left, #000 0, transparent 52%);
}
html.v2 .coldreach-zelle {
  position: relative; z-index: 1; min-width: 0;
  padding: 11px var(--sp-5); border-right: 1px solid var(--border);
}
html.v2 .coldreach-zelle:last-child { border-right: none; }
html.v2 .coldreach-zelle .wert {
  display: block; font-size: 22px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
html.v2 .coldreach-zelle .name { font-size: var(--fs-sm); color: var(--text-muted); }
html.v2 .coldreach-zelle .zusatz { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
html.v2 .coldreach-zelle .zusatz.warn { color: var(--danger); }
/* Ohne Zahlenfeld braucht der Kartei-Knopf den Platz rechts selbst. */
html.v2 .coldreach-kartei-badge { margin-left: auto; }

/* Chips statt Auswahlfeld: Ein <select> versteckt, wie viele in welchem
   Zustand sind - und genau das ist hier die Frage. */
/* Etwas breiter als die 280 px der alten Spalte: Fuenf Zustandschips
   brachen sonst auf drei Zeilen um - genau der Grund, aus dem hier
   vorher ein Auswahlfeld stand. */
html.v2 .coldreach-columns { grid-template-columns: 320px minmax(340px, 1fr) 380px; }
html.v2 .coldreach-filter-tabs { flex-wrap: wrap; gap: 4px; }
html.v2 .coldreach-chip {
  font: inherit; font-size: var(--fs-xs); font-weight: 500; cursor: pointer;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
}
html.v2 .coldreach-chip:hover { background: var(--surface-hover); }
html.v2 .coldreach-chip.on { background: var(--accent-tint); border-color: transparent; color: var(--text); }
html.v2 .coldreach-chip .z { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; opacity: .7; }

/* Auswahl für den Massenversand (3he) */
html.v2 .coldreach-wahlleiste {
  flex: none; display: flex; align-items: center; gap: var(--sp-3);
  padding: 7px var(--sp-4); background: var(--accent-tint);
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
}
html.v2 .coldreach-wahlleiste[hidden] { display: none; }
html.v2 .coldreach-wahlzahl { font-weight: 600; }
html.v2 .coldreach-wahllink {
  margin-left: auto; border: none; background: none; padding: 0;
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  color: var(--accent-strong); cursor: pointer;
}
html.v2 .coldreach-kasten {
  width: 16px; height: 16px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface);
  display: grid; place-items: center; color: transparent;
}
html.v2 .coldreach-kasten svg { width: 11px; height: 11px; }
html.v2 .coldreach-kasten.an { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
/* Platzhalter, damit Name und Firma in jeder Zeile gleich weit einrücken -
   auch bei den Kontakten, die man nicht mehr auswählen kann. */
html.v2 .coldreach-kasten-platz { width: 16px; flex: none; }

/* Der Zustand als Farbe am linken Rand, nicht nur als graues Symbol:
   dieselbe Sprache wie die Kanalstreifen im Posteingang. */
html.v2 .coldreach-contact-row::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
}
html.v2 .coldreach-contact-row.zustand-beantwortet::after { background: var(--good); }
html.v2 .coldreach-contact-row.zustand-gesendet::after { background: var(--accent); }
html.v2 .coldreach-contact-row.zustand-bounced::after { background: var(--danger); }

/* Wer mitgeht, steht mit Namen da - nicht nur als Zahl im Knopf. */
html.v2 .coldreach-empf-zeile { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
html.v2 .coldreach-empf {
  font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
}
html.v2 .coldreach-empf-mehr { font-size: var(--fs-xs); color: var(--text-faint); }

/* Der fertige Brief in der rechten Spalte, vor dem Versand. */
html.v2 .coldreach-brief-label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
html.v2 .coldreach-thread-body .coldreach-banner-actions { margin-top: var(--sp-3); }

/* Das Nachrichtenfeld nimmt, was die Spalte übrig lässt - der Versandkasten
   klebt ohnehin unten (position: sticky in styles.css). */
html.v2 .coldreach-col-message .coldreach-body-row { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.v2 .coldreach-col-message .coldreach-body-row textarea.coldreach-message-textarea { flex: 1; }

@media (max-width: 980px) {
  html.v2 .coldreach-zahlenfeld { grid-template-columns: 1fr 1fr; }
  html.v2 .coldreach-zelle:nth-child(2) { border-right: none; }
  html.v2 .coldreach-zelle:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* Dunkel: heller Ton statt dunklem, sonst bliebe die Gravur unsichtbar. */
@media (prefers-color-scheme: dark) {
  html.v2:not([data-theme="light"]) .coldreach-zahlenfeld::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
}
html.v2[data-theme="dark"] .coldreach-zahlenfeld::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- Einstellungen → Allgemein (allgemein-v2.js, 3hf, „A") ----------
   Elf Einstellungen standen in einer Spalte, 958 px hoch, ohne eine einzige
   Zwischenüberschrift - zwischen „Zeitzone" und „Benachrichtigungen" lag
   dieselbe Haarlinie wie zwischen zwei Schaltern. Jetzt vier Karten nach
   Zuständigkeit, zwei nebeneinander, damit die rechte Hälfte nicht leer
   bleibt. Dasselbe Kartenraster wie auf der Firma-Seite. */
html.v2 .v2-ae {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: start; margin-bottom: var(--sp-6);
}
html.v2 .v2-ae-karte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  /* KEIN overflow: hidden - die Sprach- und Zeitzonenliste klappt als
     absolut gesetzte Liste auf und würde sonst an der Karte abgeschnitten. */
}
html.v2 .v2-ae-kopf {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
html.v2 .v2-ae-kopf h3 { margin: 0; font-size: 13px; font-weight: 600; }
html.v2 .v2-ae-kopf .sub { margin-left: auto; font-size: 12px; color: var(--text-faint); }
html.v2 .v2-ae-leib { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
html.v2 .v2-ae-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* In der Karte trägt jede Zeile ihren Abstand selbst - die Ränder und
   Polster, die sie in der langen Spalte brauchte, doppeln sich hier. */
html.v2 .v2-ae-leib .form-row { margin: 0; max-width: none; }
html.v2 .v2-ae-leib .feature-row {
  margin: 0; padding: 0; border: none; background: none; gap: 12px;
}
html.v2 .v2-ae-leib .feature-row + .feature-row,
html.v2 .v2-ae-leib .feature-row + .form-row {
  border-top: 1px solid var(--border); padding-top: 12px;
}
html.v2 .v2-ae-leib .field-hint { margin-top: 3px; }

/* Die Browser-Erlaubnis steht einmal oben statt dreimal untereinander. */
html.v2 .v2-ae-band {
  padding: 9px 11px; border-radius: 6px; background: var(--accent-tint);
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* Der Verbrauch bekommt eine Form: Eine Zahl allein sagt nicht, ob sie
   viel ist. Ab 80 % in Warnfarbe - dort wird es knapp. */
html.v2 .usage-balken {
  height: 6px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; margin-top: 7px; max-width: 320px;
}
html.v2 .usage-balken[hidden] { display: none; }
html.v2 .usage-balken i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
html.v2 .usage-balken.voll i { background: var(--warn); }

@media (max-width: 980px) {
  html.v2 .v2-ae { grid-template-columns: minmax(0, 1fr); }
  html.v2 .v2-ae-paar { grid-template-columns: 1fr; }
}

/* ---------- Funktionen & Kanäle (kanaele-v2.js, 3hg, Entwurf „A") ----------
   Sechzehn Schalter untereinander, 1.221 px hoch, und unter jedem derselbe
   Satz noch einmal. Jetzt zwei Karten: was angebunden ist, und der Rest
   eingeklappt darunter. */
html.v2 .v2-kn { display: flex; flex-direction: column; gap: 12px; padding-bottom: var(--sp-6); }

/* Der Hinweis stand als blasseste Zeile der Seite ganz oben - dabei ist
   „gilt für diesen Browser" das, was man wissen muss, bevor man schaltet. */
html.v2 .v2-kn-band {
  padding: 10px 12px; border-radius: 6px; background: var(--accent-tint);
  font-size: var(--fs-sm); color: var(--text-muted);
}

html.v2 .v2-kn-karte {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Das Z-Monogramm, Fassung 1 (Matteo, 28.09.2026: „mach Fassung 1"):
   dieselbe Kachel wie überall, aber 68 statt 34 px und 4 % statt 7 % -
   halb so dicht, halb so stark. Keine neue Form, eine weitere Stufe
   derselben Regel: je mehr Text darüberliegt, desto leiser und weiter
   auseinander. Diese Seite ist eine Liste aus Zeilen und hat keine freie
   Fläche, also die leiseste Stufe, die es bisher gibt. */
html.v2 .v2-kn-karte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-repeat: repeat; background-size: 68px 68px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%230A1830' fill-opacity='0.04'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to left, #000 0, transparent 60%);
  mask-image: linear-gradient(to left, #000 0, transparent 60%);
}

html.v2 .v2-kn-kopf {
  position: relative; z-index: 1; width: 100%;
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); background: none; border-left: none;
  border-right: none; border-top: none; text-align: left; font-family: inherit;
}
html.v2 .v2-kn-kopf h3 {
  margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
}
html.v2 .v2-kn-kopf .zn { font-size: var(--fs-xs); color: var(--text-faint); }
html.v2 .v2-kn-griffe { margin-left: auto; display: flex; gap: 4px; }
html.v2 .v2-kn-griffe button {
  font: inherit; font-size: var(--fs-xs); font-weight: 500; cursor: pointer;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
}
html.v2 .v2-kn-griffe button:hover { background: var(--surface-hover); color: var(--text); }

/* Der eingeklappte Block: sein Kopf ist der Schalter dafür. */
html.v2 .v2-kn-klapp { cursor: pointer; }
html.v2 .v2-kn-klapp .zn { margin-left: auto; }
html.v2 .v2-kn-klapp .pf { color: var(--text-faint); transition: transform 0.12s ease; }
html.v2 .v2-kn-klapp[aria-expanded="true"] .pf { transform: rotate(90deg); }
html.v2 .v2-kn-klapp[aria-expanded="false"] { border-bottom: none; }
html.v2 .v2-kn-leib[hidden] { display: none; }

/* Die Zeilen tragen ihren Abstand jetzt selbst - Rand und Polster aus der
   langen Spalte doppeln sich in der Karte. */
html.v2 .v2-kn-karte .feature-row {
  position: relative; z-index: 1; margin: 0; background: none;
  padding: 7px 14px; gap: 10px; border: none; border-top: 1px solid var(--border);
}
html.v2 .v2-kn-kopf + .feature-row, html.v2 .v2-kn-leib > .feature-row:first-child { border-top: none; }
html.v2 .v2-kn-karte .feature-row .name { font-size: var(--fs-sm); font-weight: 500; }
html.v2 .v2-kn-karte .feature-row .desc { font-size: var(--fs-xs); color: var(--text-faint); }
html.v2 .v2-kn-karte .conn-logo { width: 24px; height: 24px; border-radius: 5px; flex: none; }
/* Die Zahl, um die es geht: wie viele Vorgänge dieser Kanal gerade im
   Posteingang hat - also was der Schalter verschwinden lässt. */
html.v2 .v2-kn-zahl {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs); color: var(--text-faint);
  font-variant-numeric: tabular-nums; flex: none;
}
/* Ein Kanal ohne Anbindung ist blass - sein Schalter bewirkt ohnehin
   nichts, solange nichts hereinkommt. */
html.v2 .v2-kn-leib .feature-row .name { color: var(--text-muted); font-weight: 400; }
html.v2 .v2-kn-leer { position: relative; z-index: 1; padding: 12px 14px; font-size: var(--fs-sm); color: var(--text-muted); }

/* Dunkel: heller Ton statt dunklem, sonst bliebe die Kachel unsichtbar. */
@media (prefers-color-scheme: dark) {
  html.v2:not([data-theme="light"]) .v2-kn-karte::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.055'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
}
html.v2[data-theme="dark"] .v2-kn-karte::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='%23ffffff' fill-opacity='0.055'%3E%3Cg transform='scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3Cg transform='translate(17,17) scale(0.62)'%3E%3Cpath d='M6 7h18l-8 8H6Z'/%3E%3Cpath d='M16 17h10v8H8l8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- API-Schlüssel (schnittstelle.js, 3hh, Entwurf „A") ----------
   Die Seite ist klein und war ordentlich; was an ihr schiefgehen konnte,
   war nicht das Aussehen, sondern dass jemand den einen Wert verliert, den
   ZYAN nie wieder herausgibt. Deshalb steht der Klartext jetzt AN DER
   STELLE DES FORMULARS und geht erst auf ausdrückliche Bestätigung weg. */
html.v2 .v2-ap { display: flex; flex-direction: column; gap: 12px; max-width: 720px; padding-bottom: var(--sp-6); }
html.v2 .v2-ap-karte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
html.v2 .v2-ap-karte[hidden] { display: none; }
html.v2 .v2-ap-kopf { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
html.v2 .v2-ap-kopf h3 { margin: 0; font-size: 13px; font-weight: 600; }
html.v2 .v2-ap-kopf .zn { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); }
html.v2 .v2-ap-leib { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
html.v2 .v2-ap-leib .form-row { margin: 0; max-width: none; }
/* Name und Knopf in einer Zeile: Das Feld ist kurz, und der Knopf gehört
   daneben statt unter drei weitere Reihen. */
html.v2 .v2-ap-reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
html.v2 .v2-ap-haken { display: flex; gap: 18px; flex-wrap: wrap; }

html.v2 .v2-ap-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 10px 14px; border-top: 1px solid var(--border);
}
html.v2 .v2-ap-kopf + .v2-ap-zeile { border-top: none; }
html.v2 .v2-ap-name { font-size: var(--fs-sm); font-weight: 600; }
html.v2 .v2-ap-meta { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 1px; }
html.v2 .v2-ap-meta code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; }
html.v2 .v2-ap-rechte { margin-top: 5px; display: flex; gap: 4px; flex-wrap: wrap; }
/* Was ein Schlüssel darf, als Marken statt als Fließtext hinter dem
   Schlüsselanfang - vorher las man zweimal hin. */
html.v2 .v2-ap-chip {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good);
}
html.v2 .v2-ap-zeile.tot .v2-ap-name, html.v2 .v2-ap-zeile.tot .v2-ap-meta { color: var(--text-faint); }

html.v2 .v2-ap-klapp {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-faint);
}
html.v2 .v2-ap-link {
  margin-left: auto; border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 500; color: var(--accent-strong);
}

/* Der Klartext-Kasten: grün gerahmt, weil er das eine Mal ist. */
html.v2 .v2-ap-neu {
  border: 1px solid var(--good); border-radius: var(--radius); overflow: hidden;
  background: color-mix(in srgb, var(--good) 7%, var(--surface));
}
html.v2 .v2-ap-neu-kopf { padding: 11px 14px 0; font-size: var(--fs-sm); }
html.v2 .v2-ap-wert { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; }
html.v2 .v2-ap-wert code {
  flex: 1; min-width: 220px; height: 34px; display: flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--surface);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12.5px;
  overflow-x: auto; white-space: nowrap;
}
html.v2 .v2-ap-testergebnis { padding: 0 14px; font-size: var(--fs-xs); color: var(--text-muted); }
html.v2 .v2-ap-testergebnis:empty { display: none; }
html.v2 .v2-ap-testergebnis.gut { color: var(--good); }
html.v2 .v2-ap-testergebnis.schlecht { color: var(--danger); }
html.v2 .v2-ap-fuss {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; font-size: var(--fs-xs); color: var(--text-muted);
}
html.v2 .v2-ap-fuss .btn { margin-left: auto; }

/* Solange der Schlüssel dasteht, ist der Rest nicht dran. */
html.v2 .v2-ap-gedimmt { opacity: .4; pointer-events: none; }

@media (max-width: 720px) {
  html.v2 .v2-ap-reihe { grid-template-columns: 1fr; }
}