/* Oberflaeche: Seitenleiste links, klebende Kopfzeile, Arbeitsbereich.
   Alle Farben kommen aus marken.css. Hier steht nur, wie die Flaechen
   zueinander liegen. Rahmen nach Parlier, Handy zuerst gedacht (390 px). */

/* ------------------------------------------------------------ Startzustand */

.start { position: fixed; inset: 0; display: grid; place-items: center; background: var(--grund); z-index: 100; }
.start-punkt {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--linie-stark); border-top-color: var(--akzent);
  animation: dreht .8s linear infinite;
}
@keyframes dreht { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- Anmeldung */

.oeffentlich { min-height: 100vh; min-height: 100dvh; }
.anmeldung {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; align-content: center; gap: var(--r4);
  padding: var(--r5) var(--r4);
  background:
    radial-gradient(700px 420px at 50% -8%, var(--akzent-schleier), transparent 70%);
}
.anmeldung-karte {
  width: 100%; max-width: 420px;
  padding: var(--r6) var(--r5);
  box-shadow: var(--schatten-hebung), 0 0 0 1px var(--linie-zart);
}
.oeffentlich > .anmeldung-karte { margin: 20vh auto 0; display: grid; gap: var(--r3); }
.anmeldung-formular { display: grid; gap: var(--r4); }
.anmeldung-formular h1 { font-size: 26px; margin-bottom: var(--r1); }
.anmeldung-marke { display: flex; align-items: center; gap: var(--r3); margin-bottom: var(--r2); }
.anmeldung-marke img { display: block; flex: none; }
.anmeldung-marke > span { display: grid; line-height: 1.25; }
.anmeldung-marke strong { font-size: 16px; letter-spacing: -.01em; }
.anmeldung-marke .leise { font-size: 12.5px; }
.anmeldung-fehler {
  margin: 0; padding: var(--r3); border-radius: var(--rad-s);
  background: var(--fehler-bg); color: var(--fehler-text); font-size: 14px;
}
.anmeldung-fuss { text-align: center; }
.anmeldung .feld { min-height: 48px; font-size: 16px; }
.textknopf {
  justify-self: center; border: 0; background: none; padding: var(--r2);
  font: inherit; font-size: 14px; color: var(--akzent-text); cursor: pointer; border-radius: var(--rad-s);
}
.textknopf:hover { text-decoration: underline; }
.erfolg-zeichen {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--erfolg-bg); position: relative;
}
.erfolg-zeichen::after {
  content: ""; position: absolute; left: 15px; top: 11px; width: 9px; height: 17px;
  border: solid var(--erfolg-text); border-width: 0 3px 3px 0; transform: rotate(45deg);
}

.faktor-schritte { margin: 0; padding-left: var(--r5); display: grid; gap: var(--r3); }
.faktor-schritte p { margin: 0 0 var(--r2); font-size: 14.5px; }
.faktor-schluessel-zeile { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; }
.faktor-schluessel {
  width: min(100%, 24ch); padding: var(--r2) var(--r3);
  border: 1px solid var(--linie); border-radius: var(--rad-s);
  background: var(--flaeche-versenkt); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14.5px; letter-spacing: .04em; line-height: 1.6;
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.faktor-link { display: inline-block; padding: var(--r2) 0; font-size: 14px; }
.faktor-code { font-size: 22px !important; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Huelle */

.huelle { min-height: 100vh; min-height: 100dvh; }
.spalte { min-width: 0; padding-left: var(--leiste-breite); display: flex; flex-direction: column; }

.leiste {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  width: var(--leiste-breite);
  display: flex; flex-direction: column;
  background: var(--leiste-verlauf); color: var(--leiste-text);
  border-right: 1px solid var(--leiste-linie);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.leiste-marke {
  display: flex; align-items: center; gap: var(--r3);
  min-height: var(--kopf-hoehe); padding: var(--r3) var(--r4) var(--r3) 20px;
  border-bottom: 1px solid var(--leiste-linie);
}
.marke-zeichen { display: block; flex: none; }
.leiste-marke-name { display: block; color: #fff; font-weight: 650; font-size: 15.5px; letter-spacing: -.01em; }
.leiste-marke-zusatz { display: block; color: var(--leiste-leise); font-size: 12px; }

.leiste-nav { flex: 1; overflow-y: auto; padding: var(--r3) var(--r2); display: grid; gap: 2px; align-content: start; }
.nav-punkt {
  display: flex; align-items: center; gap: var(--r3);
  min-height: 40px; padding: 0 var(--r3); border-radius: var(--rad-s);
  color: var(--leiste-text); font-size: 14.5px; font-weight: 500; text-decoration: none;
  transition: background .14s, color .14s;
}
.nav-punkt:hover { background: var(--leiste-hover); text-decoration: none; }
.nav-punkt svg { flex: none; opacity: .7; }
.nav-punkt.aktiv { background: var(--leiste-aktiv-bg); color: #fff; box-shadow: inset 3px 0 0 var(--leiste-aktiv-kante); }
.nav-punkt.aktiv svg { opacity: 1; color: var(--ov-orange); }
.nav-extern { margin-left: auto; display: flex; opacity: .6; }
.nav-punkt:focus-visible { outline: 2px solid var(--ov-orange); outline-offset: -2px; }

.leiste-fuss { border-top: 1px solid var(--leiste-linie); padding: var(--r2); }
.leiste-person {
  display: flex; align-items: center; gap: var(--r3); width: 100%;
  padding: var(--r2) var(--r3); border: 0; border-radius: var(--rad-s);
  background: transparent; color: var(--leiste-text); font: inherit; text-align: left; cursor: pointer;
}
.leiste-person:hover { background: var(--leiste-hover); }
.leiste-person:focus-visible { outline: 2px solid var(--ov-orange); outline-offset: -2px; }
.leiste-person-kreis, .konto-kreis, .person-kreis {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--ov-orange); color: var(--ov-schwarz); font-size: 12px; font-weight: 700;
}
.leiste-person-text { min-width: 0; }
.leiste-person-name { display: block; color: #fff; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste-person-rolle { display: block; color: var(--leiste-leise); font-size: 12px; }

/* --------------------------------------------------------------- Kopfzeile */

.kopf {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--r3);
  min-height: var(--kopf-hoehe); padding: env(safe-area-inset-top, 0px) var(--r5) 0;
  box-shadow: var(--glas-kante), 0 1px 0 var(--linie-zart);
}
.kopf-titel { font-size: 17px; font-weight: 650; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: var(--r2); min-width: 0; }
.kopf-menue { padding: 0 var(--r2); min-height: 40px; }
.nur-schmal { display: none; }

.umschalter {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--flaeche-versenkt); border: 1px solid var(--linie); border-radius: 999px;
}
.umschalter-punkt {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 var(--r3); border-radius: 999px;
  color: var(--text-weich); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.umschalter-punkt:hover { text-decoration: none; color: var(--text); }
.umschalter-punkt.aktiv { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.umschalter-punkt.aktiv svg { color: var(--akzent); }

/* ---------------------------------------------------------- Arbeitsbereich */

.arbeitsbereich { width: 100%; max-width: 1360px; margin: 0 auto; padding: var(--r5); padding-bottom: var(--r8); min-width: 0; }
.arbeitsbereich:focus { outline: none; }

.seiten-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r4); flex-wrap: wrap; margin-bottom: var(--r5); }
.seiten-kopf h2 { margin-bottom: 2px; }

.abschnitt { display: grid; gap: var(--r3); margin-bottom: var(--r6); }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); min-height: 32px; }
.abschnitt-kopf h3 { font-size: 15px; }

.fehler-block { padding: var(--r5); border-radius: var(--rad); background: var(--fehler-bg); color: var(--fehler-text); }
.laden { display: grid; gap: var(--r3); padding: var(--r5); }
.laden-balken {
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--flaeche-versenkt), var(--flaeche-hover), var(--flaeche-versenkt));
  background-size: 300% 100%; animation: wandert 1.4s ease-in-out infinite;
}
@keyframes wandert { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.leer-zeichen {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: var(--r1);
  background: var(--akzent-hell); position: relative;
}
.leer-zeichen::after {
  content: ""; position: absolute; inset: 13px; border-radius: 50%;
  border: 2.5px solid var(--akzent);
}

.feld-hinweis { margin-top: var(--r1); font-size: 12.5px; color: var(--text-leise); }
.feld-klein { min-height: 32px; padding: 4px var(--r2); font-size: 13px; width: auto; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  padding: 0 var(--r3); border-radius: var(--rad-s);
  background: var(--flaeche-versenkt); font-size: 13px; max-width: 100%;
}
.chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.link-knopf svg { opacity: .6; }
.trenner { color: var(--text-leise); opacity: .6; }
.warn { color: var(--warnung-text); font-weight: 600; }

/* ---------------------------------------------------------------- Kunden */

.kunden-layout {
  display: grid; gap: var(--r5); align-items: start;
  grid-template-columns: 300px minmax(0, 1fr);
}
.kunden-liste {
  position: sticky; top: calc(var(--kopf-hoehe) + var(--r4));
  max-height: calc(100vh - var(--kopf-hoehe) - var(--r4) * 2);
  max-height: calc(100dvh - var(--kopf-hoehe) - var(--r4) * 2);
  display: flex; flex-direction: column; overflow: hidden;
}
.kunden-liste-kopf { padding: var(--r3); border-bottom: 1px solid var(--linie-zart); display: grid; gap: var(--r2); }
.suche { position: relative; }
.suche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-leise); pointer-events: none; }
.suche-feld { padding-left: 36px; background: var(--flaeche-sanft); }
.kunden-liste-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); }
.filter-knopf.ist-aktiv { color: var(--akzent-text); }
.filter-bereich { display: grid; gap: var(--r2); padding-top: var(--r1); }
.schalter { display: flex; align-items: center; gap: var(--r2); margin: 0; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; min-height: 36px; }
.schalter input { width: 18px; height: 18px; accent-color: var(--ov-orange); margin: 0; }
.kunden-listen-inhalt { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.kunden-zeilen { list-style: none; margin: 0; padding: var(--r1); display: grid; gap: 1px; }
.kunde-zeile {
  display: grid; gap: 4px; padding: var(--r3); border-radius: var(--rad-s);
  color: var(--text); text-decoration: none; position: relative;
}
.kunde-zeile:hover { background: var(--flaeche-hover); text-decoration: none; }
.kunde-zeile.aktiv { background: var(--flaeche-aktiv); }
.kunde-zeile.aktiv::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--akzent); }
.kunde-zeile:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: -2px; }
.kunde-zeile-kopf { display: flex; align-items: center; gap: var(--r2); min-width: 0; }
.kunde-zeile-name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.kunde-zeile-unter { display: flex; align-items: center; gap: var(--r2); font-size: 12.5px; color: var(--text-leise); }
.kunde-zeile-id { font-variant-numeric: tabular-nums; }
.kunde-zeile-leistungen { display: flex; gap: 4px; flex-wrap: wrap; }
.kunde-zeile-leistungen .abzeichen { font-size: 11px; padding: 0 7px; font-weight: 550; }
.zaehl-marke {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--fehler-bg); color: var(--fehler-text);
}
.liste-zaehler { margin: 0; }
.kunden-liste-knoepfe { display: inline-flex; align-items: center; gap: 2px; }
.kunden-griff { display: none; }
@media (min-width: 761px) {
  .kunden-layout[data-liste="zu"] { grid-template-columns: 44px minmax(0, 1fr); }
  .kunden-layout[data-liste="zu"] .kunden-liste { display: none; }
  .kunden-layout[data-liste="zu"] .kunden-griff {
    display: flex; flex-direction: column; align-items: center; gap: var(--r2);
    position: sticky; top: calc(var(--kopf-hoehe) + var(--r4));
    width: 44px; padding: var(--r3) 0; border: 1px solid var(--linie); border-radius: var(--rad);
    background: var(--flaeche); color: var(--text-weich); cursor: pointer; font: inherit;
  }
  .kunden-layout[data-liste="zu"] .kunden-griff:hover { color: var(--text); background: var(--flaeche-hover); }
  .kunden-griff-text { writing-mode: vertical-rl; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
}

.kunden-akte { min-width: 0; }
.akte-leer { display: grid; min-height: 360px; place-items: center; border: 1.5px dashed var(--linie); border-radius: var(--rad); }
.zurueck.nur-schmal-akte { display: none; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--r3); font-size: 14px; color: var(--text-weich); min-height: 36px; }
.zurueck:hover { color: var(--text); text-decoration: none; }

.akte-kopf { display: grid; gap: var(--r3); margin-bottom: var(--r4); }
.akte-kopf-zeile { display: flex; align-items: flex-start; gap: var(--r3); }
.akte-kopf-text { flex: 1; min-width: 0; }
.akte-kopf h2 { font-size: 26px; overflow-wrap: anywhere; }
.akte-meta { display: flex; gap: 6px; flex-wrap: wrap; color: var(--text-leise); font-size: 13.5px; margin-top: 4px; }
.akte-kopf-aktionen { display: flex; gap: var(--r2); flex: none; }
.akte-kennzeichen { display: flex; align-items: center; gap: var(--r2) var(--r4); flex-wrap: wrap; font-size: 13.5px; }
.akte-person strong { font-weight: 600; }
.akte-links { display: flex; gap: var(--r2); flex-wrap: wrap; }

/* 26.10.2026: die Reiter brechen um statt seitlich zu scrollen. Mit
   verstecktem Scrollbalken lag "Kunden-Hub" auf schmaleren Bildschirmen
   unsichtbar rechts außerhalb und ließ sich nicht erreichen. */
.reiter { display: flex; flex-wrap: wrap; gap: 0 var(--r1); border-bottom: 1px solid var(--linie); margin-bottom: var(--r5); }
.reiter-knopf {
  appearance: none; border: 0; background: transparent; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-leise);
  padding: var(--r3) var(--r3); margin-bottom: -1px; border-bottom: 2px solid transparent; cursor: pointer;
}
.reiter-knopf:hover { color: var(--text); }
.reiter-knopf[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent); }
.reiter-knopf:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: -2px; border-radius: 6px 6px 0 0; }

/* Projekte als Kacheln. Das ist die eine Stelle, an der Karten nebeneinander
   stehen duerfen: jede Kachel ist ein eigenes Projekt mit eigener Phase. */
.projekt-kacheln { display: grid; gap: var(--r3); grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.projekt-kachel {
  display: grid; gap: var(--r2); align-content: start;
  padding: var(--r4); border-radius: var(--rad);
  background: var(--flaeche); box-shadow: var(--schatten-hebung);
  border-top: 3px solid transparent; color: var(--text); min-width: 0;
  /* Mien 09.11.2026: ohne feste Spalte drückten Phase und Verantwortlich die Karte breiter, rechts wurde abgeschnitten */
  grid-template-columns: minmax(0, 1fr);
}
.projekt-kachel.ist-warnung { border-top-color: var(--warnung); }
.projekt-kachel-link { text-decoration: none; transition: transform .14s, box-shadow .14s; }
.projekt-kachel-link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--schatten-hebung), 0 0 0 1px var(--linie); }
.projekt-kachel-kopf { display: flex; align-items: flex-start; gap: var(--r2); min-width: 0; }
.projekt-kachel-kopf > .leistung-punkt { margin-top: 6px; }
.projekt-kachel-kopf h4 { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; font-size: 15px; }
.projekt-leistung { font-size: 13.5px; color: var(--text-weich); font-weight: 550; }
.projekt-tage { font-size: 12.5px; color: var(--text-leise); }
.projekt-daten { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--r3); font-size: 13px; }
.projekt-daten dt { color: var(--text-leise); }
.projekt-daten dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.projekt-briefing {
  font-size: 13.5px; color: var(--text-weich); white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  padding-top: var(--r2); border-top: 1px solid var(--linie-zart);
}
.projekt-aktionen { display: flex; gap: var(--r2); flex-wrap: wrap; padding-top: var(--r2); border-top: 1px solid var(--linie-zart); }
.projekt-aktionen { flex-wrap: nowrap; align-items: center; }
.projekt-aktionen > select { flex: 1 1 0; min-width: 0; width: auto; }
.projekt-mitglieder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--r2); }
.projekt-mitglieder .mit-bild { display: inline-flex; align-items: center; gap: 6px; }
.mitglieder-wahl { display: grid; gap: 2px; max-height: 50vh; overflow: auto; }
.mitglied-wahl { display: flex; align-items: center; gap: var(--r2); padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.mitglied-wahl:hover { background: var(--flaeche-tief, rgba(0,0,0,.04)); }
.mitglied-wahl > span:nth-of-type(2) { flex: 1; }
.projekt-weiter { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--akzent-text); }

.leistung-punkt, .phase-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--neutral); }
.leistung-atv { background: #E8631A; }
.leistung-meta { background: #3B6FD8; }
.leistung-google { background: #2E9A63; }
.leistung-mag { background: #8B5CF6; }
.leistung-webseite { background: #0E9AA5; }
.leistung-seo { background: #C98A00; }
.leistung-grafik { background: #D9468F; }
.leistung-video { background: #B4412B; }
.leistung-social { background: #5B8DEF; }
.leistung-beratung { background: #6B665F; }
.leistung-kaltakquise { background: #4F5BD5; }
.leistung-linkedin { background: #0A66C2; }
.leistung-sonstiges { background: #A09A92; }
.phase-neu { background: var(--neutral); }
.phase-onboarding { background: var(--info); }
.phase-produktion { background: var(--ov-orange); }
.phase-freigabe { background: var(--warnung); }
.phase-live { background: var(--erfolg); }
.phase-abgeschlossen { background: var(--text-leise); opacity: .5; }

/* Aufgaben: eine Flaeche, Zeilen durch Haarlinien getrennt. */
.aufgaben-liste { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.aufgabe { display: flex; align-items: flex-start; gap: var(--r3); padding: var(--r3) var(--r4); transition: opacity .3s, background .3s; }
.aufgabe + .aufgabe { border-top: 1px solid var(--linie-zart); }
.aufgabe-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.aufgabe-titel { font-weight: 550; overflow-wrap: anywhere; }
.aufgabe-unter { display: flex; gap: var(--r3); flex-wrap: wrap; font-size: 13px; color: var(--text-leise); }
.aufgabe-unter a { color: var(--text-weich); font-weight: 550; }
.aufgabe-beschreibung { font-size: 13px; color: var(--text-weich); white-space: pre-line; overflow-wrap: anywhere; }
.haken {
  flex: none; width: 26px; height: 26px; margin-top: -1px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.8px solid var(--linie-stark); background: var(--flaeche); color: transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.haken:hover { border-color: var(--erfolg); color: var(--erfolg); }
.haken:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.haken-voll, .ist-erledigt .haken { background: var(--erfolg); border-color: var(--erfolg); color: #fff; }
.aufgabe.ist-erledigt { opacity: .45; }
.aufgabe.ist-erledigt .aufgabe-titel { text-decoration: line-through; }
.aufgabe.ist-fertig { align-items: center; }
.aufgabe.ist-fertig .aufgabe-titel { text-decoration: line-through; color: var(--text-leise); }

.aufgaben-gruppen { display: grid; gap: var(--r5); }
.aufgaben-gruppe { display: grid; gap: var(--r2); }
.gerade-erledigt { margin-top: var(--r5); }
.gruppe-titel { display: flex; align-items: center; gap: var(--r2); font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); }
.gruppe-zahl { font-variant-numeric: tabular-nums; padding: 0 7px; border-radius: 999px; background: var(--flaeche-versenkt); font-size: 12px; letter-spacing: 0; }
.gruppe-ueberfaellig .gruppe-titel { color: var(--fehler-text); }
.gruppe-ueberfaellig .gruppe-zahl { background: var(--fehler-bg); }
.gruppe-heute .gruppe-titel { color: var(--akzent-text); }

.trello > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--r3); flex-wrap: wrap;
  padding: var(--r4); font-weight: 600; border-radius: var(--rad);
}
.trello > summary::-webkit-details-marker { display: none; }
.trello > summary::before {
  content: ""; width: 8px; height: 8px; flex: none; align-self: center;
  border: solid var(--text-leise); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s;
}
.trello[open] > summary::before { transform: rotate(45deg); }
.trello > summary:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: -2px; }
.trello-inhalt { border-top: 1px solid var(--linie-zart); padding: var(--r4) var(--r5); display: grid; gap: var(--r4); }
.trello-meta { font-size: 13px; }
.trello-block h5 { font-size: 12.5px; font-weight: 600; color: var(--text-leise); margin: 0 0 var(--r2); }
.trello-text { white-space: pre-line; overflow-wrap: anywhere; color: var(--text-weich); }
.trello-liste { display: grid; gap: var(--r2); padding-left: 1.1em; }
.trello-liste li { overflow-wrap: anywhere; }
.trello-checkliste { display: grid; gap: var(--r2); }
.trello-checkliste + .trello-checkliste { margin-top: var(--r3); }

/* Verlauf als ruhige Zeitleiste */
.verlauf-ansicht { display: grid; gap: var(--r5); }
.verlauf-form { padding: var(--r4); display: grid; gap: var(--r3); }
.verlauf-form-kopf { display: flex; gap: var(--r3); align-items: flex-end; flex-wrap: wrap; }
.verlauf-form-kopf .feld-gruppe { flex: 1 1 200px; min-width: 0; }
.verlauf-form-fuss { display: flex; justify-content: flex-end; }
.segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--rad-s); background: var(--flaeche-versenkt); }
.segment-knopf {
  border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-weich); padding: 0 var(--r3); min-height: 34px; border-radius: 8px; cursor: pointer;
}
.segment-knopf[aria-checked="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.segment-knopf:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: 1px; }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; }
.verlauf-eintrag { display: flex; gap: var(--r3); position: relative; padding-bottom: var(--r4); }
.verlauf-eintrag::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 1px; background: var(--linie); }
.verlauf-eintrag:last-child::before { display: none; }
.verlauf-zeichen {
  flex: none; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); color: var(--text-weich);
}
.typ-system .verlauf-zeichen { background: var(--flaeche-versenkt); color: var(--text-leise); }
.typ-datei .verlauf-zeichen { color: var(--akzent-text); }
.verlauf-koerper { flex: 1; min-width: 0; display: grid; gap: 4px; padding-top: 5px; }
.verlauf-kopf { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; font-size: 13.5px; }
.verlauf-text { white-space: pre-line; overflow-wrap: anywhere; color: var(--text-weich); }
.typ-system .verlauf-text { font-size: 13.5px; }
.typ-kommentar .verlauf-text {
  background: var(--flaeche); padding: var(--r3) var(--r4); border-radius: 4px var(--rad) var(--rad) var(--rad);
  box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart); color: var(--text);
}

.stammdaten { display: grid; gap: var(--r4); }
.steckbrief { margin: 0; padding: var(--r2) var(--r5); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 var(--r5); }
.steckbrief > div { padding: var(--r3) 0; border-bottom: 1px solid var(--linie-zart); min-width: 0; }
.steckbrief dt { font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); }
.steckbrief dd { margin: 2px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.notizen { padding: var(--r4) var(--r5); display: grid; gap: var(--r2); }
.notizen p { white-space: pre-line; overflow-wrap: anywhere; color: var(--text-weich); }

/* ---------------------------------------------------------------- Kanban */

.kanban-filter { display: flex; gap: var(--r2); flex-wrap: wrap; }
.kanban-filter .feld-gruppe { width: 190px; }
.kanban-hinweis { margin-top: 2px; }
/* Nur dieser Rahmen scrollt quer, die Seite selbst nie. */
.kanban-rahmen {
  overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 calc(var(--r5) * -1); padding: 2px var(--r5) var(--r4);
  scroll-snap-type: x proximity; scroll-padding: var(--r5);
}
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--r3); min-width: min-content; align-items: stretch; min-height: max(320px, calc(100dvh - 300px)); }
.kanban > .laden, .kanban > .fehler-block { grid-column: 1 / -1; min-width: 300px; }
.kanban-spalte {
  scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--flaeche-versenkt); border-radius: var(--rad); padding: var(--r2);
  box-shadow: inset 0 0 0 1px var(--linie-zart); transition: box-shadow .12s, background .12s;
  min-height: 180px;
}
.kanban-spalte.ist-ziel { background: var(--akzent-hell); box-shadow: inset 0 0 0 2px var(--akzent); }
.kanban-spalte-kopf { display: flex; align-items: center; gap: var(--r2); padding: var(--r2) var(--r2) var(--r3); }
.kanban-spalte-kopf h3 { font-size: 14px; flex: 1; }
.kanban-zahl { font-size: 12px; font-weight: 650; color: var(--text-leise); font-variant-numeric: tabular-nums; background: var(--flaeche); border-radius: 999px; padding: 0 8px; }
/* Jede Spalte hoechstens etwa zehn Karten hoch oder so hoch wie das Fenster,
   darin scrollt sie selbst. Der Kopf mit der Zahl bleibt stehen. */
.kanban-karten {
  display: grid; gap: var(--r2); align-content: start; flex: 1; min-height: 60px;
  max-height: min(1040px, calc(100dvh - 330px)); overflow-y: auto; overscroll-behavior-y: contain;
  margin: 0 calc(var(--r2) * -1); padding: 2px var(--r2) var(--r2); scrollbar-width: thin;
}
.kanban-halt { display: grid; gap: 2px; padding: 6px var(--r2); border-radius: 8px; background: var(--warnung-bg); color: var(--warnung-text); font-size: 12.5px; }
.kanban-halt-seit { font-weight: 650; }
.kanban-halt-grund { color: var(--text-weich); overflow-wrap: anywhere; }
.phase-on_hold { background: var(--warnung); }
.feiert { animation: feiert .9s ease-out; }
@keyframes feiert {
  0% { box-shadow: 0 0 0 0 rgba(46, 154, 99, .55); }
  60% { box-shadow: 0 0 0 10px rgba(46, 154, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 154, 99, 0); }
}
.kanban-karten:not(:has(.kanban-karte))::after {
  content: "Keine Projekte"; display: grid; place-items: center; min-height: 72px;
  border: 1.5px dashed var(--linie); border-radius: var(--rad-s); color: var(--text-leise); font-size: 13px;
}
.kanban-karte {
  display: grid; gap: 6px; padding: var(--r3); border-radius: var(--rad-s);
  background: var(--flaeche); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart);
  cursor: pointer; position: relative; border-left: 3px solid transparent;
  transition: box-shadow .14s, transform .14s, opacity .14s;
}
.kanban-karte:hover { box-shadow: var(--schatten-hebung), 0 0 0 1px var(--linie); }
.kanban-karte:focus-visible { outline: none; box-shadow: var(--fokus-ring), 0 0 0 1px var(--fokus-kante); }
.kanban-karte.ziehbar { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.kanban-karte.ist-warnung { border-left-color: var(--warnung); }
.kanban-karte.wird-gezogen { opacity: .35; }
.kanban-karte.ist-gelandet { animation: landet .5s ease-out; }
@keyframes landet { from { box-shadow: 0 0 0 3px var(--akzent); } to { box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart); } }
.kanban-karte-kopf { display: flex; align-items: flex-start; gap: var(--r2); }
.kanban-kunde { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; overflow-wrap: anywhere; line-height: 1.3; }
.kanban-verschieben {
  flex: none; width: 28px; height: 28px; margin: -4px -4px 0 0; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-leise); cursor: pointer;
}
.kanban-verschieben:hover { background: var(--flaeche-hover); color: var(--text); }
.kanban-verschieben:focus-visible { outline: 2px solid var(--fokus-kante); }
.kanban-karte-mitte { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; flex-wrap: wrap; }
.kanban-leistung { font-weight: 550; color: var(--text-weich); }
.kanban-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kanban-karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); font-size: 12.5px; color: var(--text-leise); }
.kanban-person { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kanban-tage { white-space: nowrap; }
.kanban-geist {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; margin: 0;
  box-shadow: var(--schatten-zug); opacity: .96; cursor: grabbing;
}
body.zieht, body.zieht * { cursor: grabbing !important; }

/* ---------------------------------------------------------------- Team */

/* Team (12.10.2026): Raster, damit Name und Mail immer Platz haben. */
.personen { list-style: none; margin: 0; padding: 0; }
.person {
  display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center;
  gap: var(--r2) var(--r4); padding: var(--r3) var(--r4);
}
.person + .person { border-top: 1px solid var(--linie-zart); }
.person.ist-inaktiv { opacity: .6; }
.person-kreis { background: var(--flaeche-versenkt); color: var(--text-weich); }
.person-text { min-width: 0; display: grid; gap: 2px; }
.person-name { font-weight: 600; overflow-wrap: anywhere; }
.person-mail { display: flex; align-items: center; gap: var(--r2); min-width: 0; font-size: 14px; color: var(--text-weich); }
.person-mail-text { overflow-wrap: anywhere; user-select: all; }
.person-kopieren {
  flex: none; font: inherit; font-size: 12px; color: var(--akzent-text); background: none; border: 0; padding: 2px 4px;
  border-radius: 6px; cursor: pointer;
}
.person-kopieren:hover { background: var(--flaeche-hover); }
.person-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.person-info { font-size: 12.5px; color: var(--text-leise); padding: 2px 8px; border-radius: 999px; background: var(--flaeche-versenkt); }
.person-hinweis { background: transparent; box-shadow: inset 0 0 0 1px var(--linie-zart); }
.person-knoepfe { display: flex; align-items: center; gap: var(--r2); justify-content: flex-end; }
.person-menue { position: relative; }
.person-menue > summary { list-style: none; min-width: 36px; justify-content: center; font-size: 18px; line-height: 1; }
.person-menue > summary::-webkit-details-marker { display: none; }
.person-menue-liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 250px; display: grid; padding: 6px;
  background: var(--flaeche); border-radius: var(--rad-s); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-karte), 0 12px 32px rgba(0, 0, 0, .14);
}
.person-menue-punkt {
  font: inherit; font-size: 14px; text-align: left; color: var(--text); background: none; border: 0; padding: 9px 10px;
  border-radius: 8px; cursor: pointer; min-height: 38px;
}
.person-menue-punkt:hover, .person-menue-punkt:focus-visible { background: var(--flaeche-hover); outline: none; }
.person-menue-punkt.ist-gefahr { color: var(--fehler); font-weight: 600; }
.person-menue-linie { border: 0; border-top: 1px solid var(--linie-zart); margin: 6px 4px; }
.zugang-zeile { padding: var(--r2) 0; }
.zugang-schluessel {
  width: 100%; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
  overflow-wrap: anywhere; word-break: break-all; margin-bottom: var(--r2);
}
.deaktiviert { margin-top: var(--r5); }
.deaktiviert > summary { cursor: pointer; color: var(--text-leise); font-weight: 600; font-size: 14px; padding: var(--r2) 0; margin-bottom: var(--r2); }

/* ------------------------------------------------------- Freelancer-Start */

.start-kopf { margin: var(--r3) 0 var(--r6); display: grid; gap: var(--r1); }
.start-kopf h2 { font-size: 28px; }
.akademie-karte {
  display: flex; align-items: center; gap: var(--r4); flex-wrap: wrap;
  padding: var(--r5); border-radius: var(--rad);
  background: var(--ov-schwarz); color: #F2F0ED;
  background-image: radial-gradient(420px 200px at 100% 0%, rgba(232,99,26,.35), transparent 70%);
}
.akademie-karte > div { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.akademie-karte .leise { color: #B9B3AB; }
.akademie-zeichen { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ov-orange); color: var(--ov-schwarz); flex: none; }
.akademie-karte .knopf { background: #fff; color: #141414; border-color: transparent; }
.akademie-karte .knopf:hover { background: #F2F0ED; }

/* ---------------------------------------------------------------- Dialog */

dialog.dialog {
  margin: auto; width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--rad-l); color: var(--text);
  background: var(--glas-fuellung);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-kante), var(--glas-wurf);
}
dialog.dialog-breit { width: min(760px, calc(100vw - 24px)); }
dialog.dialog[open] { display: flex; flex-direction: column; animation: dialog-auf .18s ease-out; }
dialog.dialog > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
@keyframes dialog-auf { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
dialog.dialog::backdrop { background: var(--schleier); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf, dialog.dialog { background: var(--glas-deckend); }
}
.dialog-kopf { display: flex; align-items: center; gap: var(--r3); padding: var(--r4) var(--r3) var(--r4) var(--r5); border-bottom: 1px solid var(--linie-zart); }
.dialog-kopf h3 { flex: 1; min-width: 0; font-size: 17px; }
.dialog-x { font-size: 22px; min-height: 36px; width: 36px; padding: 0; line-height: 1; }
.dialog-inhalt { padding: var(--r5); overflow-y: auto; min-height: 0; flex: 1; }
.dialog-fuss { display: flex; justify-content: flex-end; gap: var(--r2); flex-wrap: wrap; padding: var(--r4) var(--r5); border-top: 1px solid var(--linie-zart); }
.dialog-fehler { margin: 0 0 var(--r4); padding: var(--r3); border-radius: var(--rad-s); background: var(--fehler-bg); color: var(--fehler-text); font-size: 14px; }
.verlauf-form .dialog-fehler { margin: 0; }

.formular-raster { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.formular-raster .voll { grid-column: 1 / -1; }
.wahl-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.wahl-gruppe legend { padding: 0; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-leise); }
.wahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: var(--r2); margin-top: var(--r2); }
.wahl {
  display: flex; align-items: center; gap: var(--r2); margin: 0; min-height: 42px; padding: 0 var(--r3);
  border: 1px solid var(--linie); border-radius: var(--rad-s); background: var(--flaeche);
  font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer;
}
.wahl:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.wahl input { width: 17px; height: 17px; accent-color: var(--ov-orange); margin: 0; flex: none; }
.wahl-gruppe > .wahl + .wahl { margin-top: var(--r2); }

/* --------------------------------------------------------- Info-Knopf (i) */

.feld-label-zeile { display: flex; align-items: center; gap: 6px; }
.info-knopf {
  flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linie-stark); background: var(--flaeche-versenkt); color: var(--text-leise);
  font-size: 11px; font-style: italic; font-family: Georgia, serif; line-height: 1; cursor: pointer;
}
.info-knopf:hover { background: var(--flaeche-hover); color: var(--text); }
.info-knopf[aria-expanded="true"] { background: var(--akzent-hell); color: var(--akzent-text); border-color: transparent; }
.info-text { background: var(--flaeche-versenkt); border-radius: var(--rad-s); padding: var(--r2) var(--r3); margin-top: var(--r1); }

/* ----------------------------------------------------- Gefuehrter Assistent */

.wizard-abschluss-hinweis { margin: 0; padding: var(--r3) var(--r5) 0; }

.assistent-schritte {
  display: flex; gap: var(--r2); flex-wrap: wrap; padding: var(--r3) var(--r5);
  border-bottom: 1px solid var(--linie-zart);
}
.assistent-schritt {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-leise);
}
.assistent-schritt-zahl {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--flaeche-versenkt); font-size: 11px; font-weight: 600;
}
.assistent-schritt[data-aktiv="ja"] { color: var(--text); font-weight: 600; }
.assistent-schritt[data-aktiv="ja"] .assistent-schritt-zahl { background: var(--knopf-haupt-bg); color: var(--knopf-haupt-text); }
.assistent-schritt[data-erledigt="ja"] .assistent-schritt-zahl { background: var(--erfolg-bg); color: var(--erfolg-text); }

.ja-nein-frage { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); flex-wrap: wrap; }
.ja-nein-frage > p { margin: 0; font-weight: 550; }

.zeilen-liste { display: grid; gap: var(--r3); margin-top: var(--r3); }
.zeile-reihe {
  display: grid; gap: var(--r3); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); align-items: end;
  padding: var(--r3); border: 1px solid var(--linie-zart); border-radius: var(--rad-s); background: var(--flaeche-versenkt);
}

.verknuepfung-block { display: grid; gap: var(--r3); padding: var(--r4); border: 1px solid var(--linie-zart); border-radius: var(--rad-s); }
.verknuepfung-block + .verknuepfung-block { margin-top: var(--r4); }
.verknuepfung-block > h4 { margin: 0; font-size: 14px; }

.treffer-liste { list-style: none; margin: var(--r3) 0 0; padding: 0; display: grid; gap: var(--r2); }
.treffer-zeile {
  display: flex; align-items: center; gap: var(--r3); padding: var(--r2) var(--r3);
  border: 1px solid var(--linie); border-radius: var(--rad-s); cursor: pointer; background: var(--flaeche);
}
.treffer-zeile:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.treffer-zeile input { width: 17px; height: 17px; accent-color: var(--ov-orange); flex: none; }
.treffer-zeile span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.stammdaten-abschnitt { margin-top: var(--r4); padding: var(--r4); }
.stammdaten-zeile { display: flex; align-items: center; gap: var(--r3); padding: var(--r2) 0; }
.stammdaten-zeile + .stammdaten-zeile { border-top: 1px solid var(--linie-zart); }
.stammdaten-zeile-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.stammdaten-zeile-text strong { font-size: 14.5px; }

.konto { display: grid; gap: var(--r4); }
.konto-kopf { display: flex; align-items: center; gap: var(--r3); }
.konto-kreis { width: 42px; height: 42px; font-size: 14px; }
.geraete { display: grid; gap: var(--r2); justify-items: start; }
.geraete-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r1); overflow-wrap: anywhere; }

/* ------------------------------------------------------------- Meldungen */

.meldungen {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 95;
  bottom: calc(var(--r4) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--r2);
  width: min(500px, calc(100vw - 2 * var(--r4))); pointer-events: none;
}
.meldung {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--r3);
  padding: var(--r3) var(--r4); border-radius: var(--rad-s); color: var(--text); font-size: 14.5px;
  border-left: 3px solid var(--neutral); animation: meldung-auf .18s ease-out;
}
.meldung-fehler { border-left-color: var(--fehler); }
.meldung-hinweis { border-left-color: var(--erfolg); }
.meldung-warnung { border-left-color: var(--warnung); }
.meldung-text { flex: 1; min-width: 0; }
.meldung-zu { flex: none; border: 0; background: transparent; color: var(--text-leise); font: inherit; font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; }
.meldung-geht { opacity: 0; transition: opacity .16s; }
@keyframes meldung-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Schmal */

.schleier { position: fixed; inset: 0; z-index: 50; background: var(--schleier); }

@media (max-width: 1100px) {
  .kunden-layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--r4); }
}

@media (max-width: 900px) {
  .spalte { padding-left: 0; }
  .leiste { transform: translateX(-100%); transition: transform .2s ease, visibility .2s; box-shadow: var(--schatten-schwebe); visibility: hidden; }
  .huelle[data-schublade="offen"] .leiste { transform: none; visibility: visible; }
  .nur-schmal { display: inline-flex; }
  .nur-breit { display: none; }
  .kopf { padding-left: var(--r2); padding-right: var(--r4); gap: var(--r2); }
  .arbeitsbereich { padding: var(--r4); padding-bottom: var(--r8); }
  .kanban-rahmen { margin: 0 calc(var(--r4) * -1); padding: 2px var(--r4) var(--r4); scroll-padding: var(--r4); }
  /* Der Titel steht am Handy schon in der Kopfzeile. */
  .seiten-kopf > div > h2:first-child { display: none; }
}

/* Liste und Akte nacheinander */
@media (max-width: 760px) {
  .kunden-layout { grid-template-columns: minmax(0, 1fr); }
  .kunden-layout[data-akte="ja"] .kunden-liste { display: none; }
  .kunden-layout[data-akte="nein"] .kunden-akte { display: none; }
  .kunden-liste { position: static; max-height: none; }
  .kunden-listen-inhalt { overflow: visible; }
  .zurueck.nur-schmal-akte { display: inline-flex; }
  .akte-kopf h2 { font-size: 23px; }
  .akte-kopf-zeile { flex-wrap: wrap; }
  .kanban { grid-auto-columns: minmax(272px, 82vw); }
  .kanban-filter { width: 100%; }
  .kanban-filter .feld-gruppe { flex: 1 1 140px; width: auto; }
  .seiten-kopf { align-items: stretch; }
  .person { grid-template-columns: 40px minmax(0, 1fr); }
  .person-chips, .person-knoepfe { grid-column: 2; justify-content: flex-start; }
  .person-knoepfe { flex-wrap: wrap; }
  .person-knoepfe > .knopf { flex: 1 1 auto; }
  .dialog-fuss .knopf { flex: 1 1 auto; }
  .umschalter-punkt span { display: none; }
  .umschalter-punkt { padding: 0 10px; }
  .steckbrief { padding: var(--r2) var(--r4); }
}

@media (prefers-reduced-motion: reduce) {
  .leiste { transition: none; }
}
.trello > summary .leise { font-weight: 400; }

/* Waehrend eines Zugs darf der Browser die Geste nicht als Scrollen deuten.
   Vorher bleibt touch-action frei, sonst liesse sich das Brett am Handy
   nicht mehr wischen; die Sperre davor uebernimmt touchmove in kanban.js. */
body.zieht, body.zieht .kanban-rahmen, .kanban-karte.wird-gezogen { touch-action: none; }

/* Am Handy nehmen leere Spalten nur einen schmalen Streifen ein. Sie bleiben
   Ziel beim Ziehen. */
@media (max-width: 760px) {
  .kanban { display: flex; align-items: stretch; }
  .kanban-spalte { flex: 0 0 min(82vw, 300px); }
  .kanban-spalte.ist-leer { flex-basis: 128px; }
  .kanban-spalte.ist-leer .kanban-karten::after { content: "Leer"; min-height: 56px; }
  .kanban-spalte.ist-leer .kanban-spalte-kopf h3 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.haken-aus { cursor: default; border-style: dashed; opacity: .5; }
.haken-aus:hover { border-color: var(--linie-stark); }
.aufgabe-person { color: var(--text-weich); font-weight: 550; }
.mitglieder { list-style: none; margin: var(--r2) 0 0; padding: 0; overflow: hidden; }
.mitglied { display: flex; align-items: center; gap: var(--r3); padding: var(--r2) var(--r3); }
.mitglied + .mitglied { border-top: 1px solid var(--linie-zart); }
.mitglied-name { flex: 1; min-width: 0; font-weight: 550; }
.mitglieder-titel { font-size: 12.5px; font-weight: 600; color: var(--text-leise); }

/* Übersicht: zwei Leisten, darunter anordbare Kästen */
.ue-leiste-block { margin-bottom: var(--r5); }
.ue-leiste-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3); margin: 0 2px var(--r2); }
.ue-leiste-kopf h3 { font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-weich); margin: 0; }
.ue-leiste-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.ue-leiste-link:hover { color: var(--text); }
.ue-leiste { display: grid; gap: 0; padding: 0; overflow: hidden; }
.ue-leiste-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ue-leiste-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ue-leiste-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ue-leiste-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ue-leiste-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ue-kachel {
  position: relative; display: grid; align-content: start; gap: 2px; min-width: 0;
  padding: var(--r4) var(--r4) var(--r4) var(--r5); border: 0; border-left: 1px solid var(--linie-zart);
  background: var(--flaeche); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background .14s;
}
.ue-kachel:first-child { border-left: 0; }
.ue-kachel:hover { background: var(--flaeche-hover); text-decoration: none; }
.ue-kachel:focus-visible { outline: none; box-shadow: inset var(--fokus-ring); }
.ue-kachel-zahl { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.01em; }
.ue-kachel-name { font-size: 13px; color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ue-kachel.ist-null .ue-kachel-zahl { color: var(--text-leise); font-weight: 600; }
.ue-kachel-fehler .ue-kachel-zahl { color: var(--fehler-text); }
.ue-kachel-warnung .ue-kachel-zahl { color: var(--warnung-text); }
.ue-kachel-fehler::before, .ue-kachel-warnung::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; }
.ue-kachel-fehler::before { background: var(--fehler); }
.ue-kachel-warnung::before { background: var(--warnung); }
.ue-ph-freigabe .ue-kachel-zahl { color: var(--warnung-text); }
.ue-ziel { background: linear-gradient(180deg, var(--erfolg-bg) 0%, var(--flaeche) 100%); }
.ue-ziel .ue-kachel-zahl { color: var(--erfolg-text); }
.ue-ziel-marke {
  position: absolute; top: var(--r3); right: var(--r3); display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 6px; border-radius: 999px; background: var(--erfolg-bg); color: var(--erfolg-text);
  font-size: 11.5px; font-weight: 650; box-shadow: 0 0 0 1px color-mix(in srgb, var(--erfolg) 30%, transparent);
}
.ue-ziel-anteil { display: grid; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--erfolg-text); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ue-ziel-balken { display: block; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--erfolg) 16%, transparent); overflow: hidden; }
.ue-ziel-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--erfolg); }

.ue-raster-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); margin: var(--r2) 2px var(--r3); }
.ue-raster-kopf p { margin: 0; }
.ue-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r4); align-items: start; }
.ue-block {
  display: grid; grid-template-rows: auto; gap: var(--r2); padding: var(--r4) var(--r4) var(--r3) var(--r4); min-width: 0;
  scroll-margin-top: calc(var(--kopf-hoehe) + var(--r4));
}
.ue-block.ue-fehler { box-shadow: inset 3px 0 0 var(--fehler), var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.ue-block.ue-warnung { box-shadow: inset 3px 0 0 var(--warnung), var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.ue-block.blinkt { animation: ue-blinkt 1.6s ease-out; }
@keyframes ue-blinkt { 0%, 30% { outline: 2px solid var(--ov-orange); outline-offset: 2px; } 100% { outline: 2px solid transparent; outline-offset: 6px; } }
.ue-block.wird-gezogen { position: relative; z-index: 20; box-shadow: var(--schatten-schwebe), 0 0 0 1px var(--linie); cursor: grabbing; opacity: .97; }
.ue-kopf { display: flex; align-items: center; gap: var(--r2); }
.ue-kopf h3 { flex: 1; min-width: 0; font-size: 16px; margin: 0; }
.ue-kopf h3:focus { outline: none; }
.ue-griff {
  display: inline-grid; place-items: center; width: 28px; height: 32px; margin-left: -6px; padding: 0;
  border: 0; border-radius: var(--rad-s); background: transparent; color: var(--text-leise);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background .14s, color .14s, transform .14s;
}
.ue-griff:hover { background: var(--flaeche-hover); color: var(--text); }
.ue-griff:focus-visible { outline: none; box-shadow: var(--fokus-ring); color: var(--text); }
.ue-griff.haelt { background: var(--flaeche-aktiv); color: var(--ov-orange); transform: scale(1.12); transition-duration: .28s; }
.wird-gezogen .ue-griff { cursor: grabbing; color: var(--ov-orange); }
body.zieht-kasten { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.ue-unterzeile { margin: -4px 0 0 28px; }
.ue-liste {
  list-style: none; margin: 0 calc(var(--r2) * -1); padding: 0 var(--r2); display: grid;
  max-height: min(600px, 72vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.ue-zeile { display: flex; align-items: flex-start; gap: var(--r3); padding: 10px 6px; margin: 0 -6px; border-top: 1px solid var(--linie-zart); border-radius: var(--rad-s); transition: opacity .35s, transform .35s, background .14s; }
.ue-zeile:first-child { border-top-color: transparent; }
.ue-aufgabe, .ue-klickbar { cursor: pointer; }
.ue-aufgabe:hover, .ue-klickbar:hover { background: var(--flaeche-hover); }
.ue-zeile.ist-erledigt { opacity: .45; }
.ue-zeile.ist-erledigt .ue-titel { text-decoration: line-through; }
.ue-zeile.geht { opacity: 0; transform: translateX(16px); }
.ue-text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.ue-titel { font-weight: 600; overflow-wrap: anywhere; }
.ue-titel-knopf { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.ue-titel-knopf:hover span:last-child { text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 3px; }
.ue-titel-knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); border-radius: 4px; }
.ue-eintrag { font-weight: 500; }
.ue-unter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--text-leise); }
.ue-unter > span { display: inline-flex; align-items: center; gap: 4px; }
.ue-kunde { color: var(--text-weich); font-weight: 550; }
.leise-kursiv { font-style: italic; }
.ue-symbol { color: var(--text-leise); padding-top: 3px; }
.ue-leer { padding: var(--r2) 0 var(--r3); margin: 0; }
.ue-mehr { margin: 0; padding-top: var(--r2); border-top: 1px solid var(--linie-zart); text-align: center; }
.ue-zuweisen { margin-top: 6px; width: min(100%, 260px); }
.schloss { display: inline-flex; align-self: center; color: var(--ov-orange); flex: none; }
.aufgabe-titel { display: inline-flex; align-items: baseline; gap: 6px; }
.aufgabe.hervorgehoben { background: color-mix(in srgb, var(--ov-orange) 9%, transparent); box-shadow: inset 3px 0 0 var(--ov-orange); animation: ue-hervor 2.4s ease-out; }
@keyframes ue-hervor { 0% { background: color-mix(in srgb, var(--ov-orange) 28%, transparent); } 100% { background: color-mix(in srgb, var(--ov-orange) 9%, transparent); } }

@media (max-width: 1100px) {
  .ue-leiste-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ue-leiste-6 .ue-kachel:nth-child(4) { border-left: 0; }
  .ue-leiste-6 .ue-kachel:nth-child(n+4) { border-top: 1px solid var(--linie-zart); }
}
@media (max-width: 760px) {
  .ue-raster { grid-template-columns: minmax(0, 1fr); }
  .ue-leiste-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ue-leiste-4 .ue-kachel:nth-child(3) { border-left: 0; }
  .ue-leiste-4 .ue-kachel:nth-child(n+3) { border-top: 1px solid var(--linie-zart); }
  .ue-ziel-marke span, .ue-ziel-zusatz { display: none; }
  .ue-ziel-marke { padding: 2px; top: var(--r2); right: var(--r2); }
  .ue-kachel { padding: var(--r3) var(--r3) var(--r3) var(--r4); }
  .ue-kachel-zahl { font-size: 24px; }
  .ue-liste { max-height: min(520px, 64vh); }
  .ue-griff { width: 36px; height: 36px; }
}

/* Aufgabenfenster */
.af { display: grid; gap: var(--r5); }
.af .formular-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .af .formular-raster { grid-template-columns: minmax(0, 1fr); } }
.af-kontext { display: grid; gap: 6px; padding: var(--r3) var(--r4); border-radius: var(--rad-s); background: var(--flaeche-versenkt); }
.af-kontext-zeile { display: flex; gap: var(--r3); align-items: baseline; min-width: 0; }
.af-kontext-name { flex: none; width: 64px; font-size: 12.5px; color: var(--text-leise); }
.af-kontext-zeile > :last-child { min-width: 0; overflow-wrap: anywhere; }
.af-kennzeichen { display: flex; flex-wrap: wrap; gap: var(--r2); }
.af-kennzeichen:empty { display: none; }
.af-privat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--flaeche-aktiv); color: var(--akzent-text); font-size: 12.5px; font-weight: 600; }
dialog.aufgabe-fenster { width: min(680px, calc(100vw - 24px)); }
.aufgabe-klickbar { cursor: pointer; }
.aufgabe-klickbar:hover { background: var(--flaeche-hover); }
.dialog-zusatz { display: flex; gap: var(--r2); flex-wrap: wrap; margin-right: auto; }
@media (max-width: 760px) {
  .dialog-zusatz { width: 100%; margin-right: 0; }
  .dialog-zusatz .knopf { flex: 1 1 auto; }
}

/* Kundenakte als Fenster über der Übersicht */
dialog.akte-fenster {
  margin: auto; width: min(1120px, calc(100vw - 48px)); height: calc(100dvh - 64px); max-height: none; max-width: none;
  padding: 0; border: 0; border-radius: var(--rad-l); color: var(--text); background: var(--grund);
  box-shadow: var(--schatten-schwebe), 0 0 0 1px var(--linie);
}
dialog.akte-fenster[open] { display: flex; flex-direction: column; animation: akte-auf .22s cubic-bezier(.2, .8, .2, 1); }
dialog.akte-fenster::backdrop { background: var(--schleier); -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9); }
@keyframes akte-auf { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.akte-fenster-leiste {
  display: flex; align-items: center; gap: var(--r2); padding: var(--r2) var(--r3) var(--r2) var(--r5);
  border-bottom: 1px solid var(--linie-zart); background: var(--flaeche);
}
.akte-fenster-titel { flex: 1; display: inline-flex; align-items: center; gap: var(--r2); font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }
.akte-fenster-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--r5) var(--r6) var(--r7); }
body:has(dialog.akte-fenster[open]) { overflow: hidden; }
@media (max-width: 760px) {
  dialog.akte-fenster { width: 100vw; height: 100dvh; border-radius: 0; }
  .akte-fenster-inhalt { padding: var(--r4) var(--r4) var(--r7); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.akte-fenster[open], .ue-block.blinkt, .aufgabe.hervorgehoben { animation: none; }
  .ue-zeile { transition: none; }
}

/* Berichte (Akte und Übersicht) */
.berichte-ansicht { display: grid; gap: var(--r5); }
.berichte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); }
.bericht.ist-auffaellig { box-shadow: inset 3px 0 0 var(--warnung), var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.bericht > summary {
  list-style: none; cursor: pointer; display: grid; gap: 4px; padding: var(--r4); border-radius: var(--rad);
}
.bericht > summary::-webkit-details-marker { display: none; }
.bericht > summary:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: -2px; }
.bericht-titel { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; overflow-wrap: anywhere; }
.bericht-zusammenfassung { margin-top: var(--r1); white-space: pre-line; overflow-wrap: anywhere; color: var(--text-weich); }
.bericht-mehr { color: var(--akzent-text); }
.bericht[open] .bericht-mehr { display: none; }
.bericht-inhalt { border-top: 1px solid var(--linie-zart); padding: var(--r4); }
.bericht-text {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  max-height: 70vh; overflow: auto; background: var(--flaeche-versenkt); border-radius: var(--rad-s); padding: var(--r3);
}
.konten-liste { list-style: none; margin: 0 0 var(--r3); padding: var(--r2) var(--r4); display: grid; }
.konto-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); padding: var(--r2) 0; overflow-wrap: anywhere; }
.konto-zeile + .konto-zeile { border-top: 1px solid var(--linie-zart); }
.konto-form { padding: var(--r4); display: grid; gap: var(--r3); }
.konto-form-felder { display: flex; gap: var(--r3); flex-wrap: wrap; align-items: flex-start; }
.konto-form-felder .feld-gruppe { flex: 1 1 180px; min-width: 0; }
.ue-berichte { padding: var(--r4); margin-bottom: var(--r5); display: grid; gap: var(--r3); box-shadow: inset 3px 0 0 var(--warnung), var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.ue-konten-block > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ue-konten { margin-top: var(--r2); }
.ue-konten .feld-klein { width: min(100%, 220px); }
@media (max-width: 760px) {
  .ue-konten .ue-zeile { flex-wrap: wrap; }
}

/* ------------------------------------------------------------- Kunden-Hub */

.hub-karte { padding: var(--r4); display: grid; gap: var(--r3); }
.hub-schalter .feld-hinweis { margin: 0 0 0 calc(18px + var(--r2)); }
.hub-kontakt-name { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; overflow-wrap: anywhere; }
.hub-link { display: grid; gap: var(--r3); }
.hub-link-zeile { display: flex; gap: var(--r2); align-items: center; }
.hub-link-zeile .feld { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.hub-link-hinweis { margin: 0; padding: var(--r3); border-radius: var(--rad-s); background: var(--akzent-hell); font-weight: 500; }
.verlauf-form-fuss:has(.verlauf-kunde) { justify-content: space-between; align-items: flex-start; gap: var(--r3); flex-wrap: wrap; }
.verlauf-kunde .feld-hinweis { margin-top: 0; }

.inhalte-liste { list-style: none; margin: 0; padding: var(--r2) var(--r4); display: grid; }
.inhalte-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); padding: var(--r3) 0; }
.inhalte-zeile + .inhalte-zeile { border-top: 1px solid var(--linie-zart); }
.inhalte-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.inhalte-titel { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; overflow-wrap: anywhere; }
.inhalte-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inhalte-aktionen { display: flex; gap: var(--r2); flex-wrap: wrap; justify-content: flex-end; }
.video-ansehen { display: grid; gap: var(--r2); min-width: 0; }
.video-ansehen-spieler { display: block; width: 100%; max-height: 70vh; border-radius: 10px; background: #000; }
@media (max-width: 760px) {
  .inhalte-zeile, .stammdaten-zeile { flex-wrap: wrap; }
  .hub-link-zeile { flex-direction: column; align-items: stretch; }
}
.verlauf-freigabe { margin-left: auto; }

/* ------------------------------------------------------- Wiedereinstieg */

.we-jarvis { margin: 0 0 var(--r3); font-size: 13.5px; }
.we-satz {
  margin: 0 0 var(--r5); padding: var(--r3) var(--r4); border-radius: var(--rad-s);
  background: var(--flaeche); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart);
  font-size: 15.5px; font-weight: 550;
}
.we-spalte { display: grid; gap: var(--r3); min-width: 0; padding: var(--r3); border-radius: var(--rad); background: var(--flaeche-versenkt); margin-bottom: var(--r5); }
.we-spalte-kopf { display: flex; align-items: center; gap: var(--r2); padding: 0 var(--r1); }
.we-spalte-kopf h3 { font-size: 15px; flex: 1; }
.we-wartet .we-spalte-kopf h3 { color: var(--akzent-text); }
.we-karten, .we-raster { display: grid; gap: var(--r3); }
.we-raster { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin-top: var(--r3); }
.we-leer { margin: 0; padding: var(--r3) var(--r1); }
.we-karte {
  display: grid; gap: var(--r2); min-width: 0; padding: var(--r4); border-radius: var(--rad-s);
  background: var(--flaeche); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart);
  border-top: 3px solid transparent;
}
.we-karte.we-dringend { border-top-color: var(--akzent); }
.we-titel { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.we-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-leise); }
.we-kunde { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-weich); min-width: 0; overflow-wrap: anywhere; }
a.we-kunde { color: var(--akzent-text); }
.we-stand, .we-weiter { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.we-von-dir {
  margin: 0; padding: var(--r2) var(--r3); border-radius: 8px; font-size: 14px; line-height: 1.5;
  background: var(--akzent-hell); color: var(--text); border-left: 3px solid var(--akzent); overflow-wrap: anywhere;
}
.we-detail-knopf {
  justify-self: start; border: 0; background: none; padding: 4px 0; margin: 0;
  font-size: 13px; font-weight: 600; color: var(--akzent-text); cursor: pointer; min-height: 28px;
}
.we-detail-knopf:hover { text-decoration: underline; }
.we-detail { display: grid; gap: var(--r2); }

/* Eingeklappte Abschnitte: Laeuft, Fertig, Eingeschlafen. Nur die Kopfzeile
   mit Name und Anzahl ist immer zu sehen, der Inhalt erst nach dem Klick. */
.we-klappbar { margin-bottom: var(--r4); }
.we-klappbar > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--r2);
  font-weight: 600; color: var(--text-weich); padding: var(--r2) var(--r1); min-height: 36px;
}
.we-klappbar > summary::-webkit-details-marker { display: none; }
.we-klappbar > summary::before { content: '\25B8'; font-size: 12px; transition: transform .15s ease; }
.we-klappbar[open] > summary::before { transform: rotate(90deg); }
.we-zeilen { display: grid; gap: 1px; padding: 0 var(--r1) var(--r2); }
.we-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3); padding: var(--r2); border-radius: 8px; min-width: 0; }
.we-zeile:hover { background: var(--flaeche-hover); }
.we-zeile-titel { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.we-zeile-zeit { white-space: nowrap; font-size: 12.5px; color: var(--text-leise); }
.we-eingeschlafen .we-karte { opacity: .82; }
.we-rueck-liste { list-style: none; margin: 0; padding: var(--r1) var(--r4); }
.we-rueck-zeile { display: grid; gap: 4px; padding: var(--r3) 0; border-bottom: 1px solid var(--linie-zart); min-width: 0; }
.we-rueck-zeile:last-child { border-bottom: 0; }
.we-rueck-thema { font-size: 14.5px; overflow-wrap: anywhere; }
.we-rueck-fehlt { margin: 0; font-size: 14px; color: var(--text-weich); overflow-wrap: anywhere; }
.we-rueck-link { font-size: 13.5px; font-weight: 600; justify-self: start; }
.we-rueck-pfad { font-size: 12.5px; color: var(--text-leise); overflow-wrap: anywhere; word-break: break-all; }

/* Was der Kunde gerade von uns sieht: eine Karte, zwei Listen, orange Kante
   als Zeichen, dass das hier nach draussen geht. */
.kundensicht { padding: var(--r5); margin-bottom: var(--r6); display: grid; gap: var(--r4); border-top: 3px solid var(--akzent); }
.kundensicht-kopf h3 { font-size: 18px; margin-bottom: 2px; }
.kundensicht-spalten { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.kundensicht-block { display: grid; gap: var(--r2); align-content: start; padding: var(--r4); border-radius: var(--rad-s); background: var(--flaeche-sanft); box-shadow: inset 0 0 0 1px var(--linie-zart); min-width: 0; }
.kundensicht-brauchen { background: var(--akzent-hell); box-shadow: inset 0 0 0 1px var(--akzent-schleier); }
.kundensicht-block-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); flex-wrap: wrap; }
.kundensicht-block-kopf h4 { display: flex; align-items: center; gap: var(--r2); font-size: 15px; }
.zahl-pille { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--flaeche); color: var(--text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px var(--linie); }
.kundensicht-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.kundensicht-eintrag { display: flex; gap: var(--r3); align-items: flex-start; padding: var(--r3) 0; flex-wrap: wrap; }
.kundensicht-eintrag + .kundensicht-eintrag { border-top: 1px solid var(--linie-zart); }
.kundensicht-kreis { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--akzent); }
.kundensicht-symbol { flex: none; color: var(--text-leise); margin-top: 2px; }
.kundensicht-text { flex: 1; min-width: min(200px, 100%); display: grid; gap: 3px; overflow-wrap: anywhere; }
.kundensicht-hinweis { font-size: 13.5px; color: var(--text-weich); white-space: pre-line; }
.kundensicht-meta { display: flex; gap: var(--r3); flex-wrap: wrap; font-size: 12.5px; color: var(--text-leise); }
.kundensicht-meta .frist { color: var(--akzent-text); font-weight: 600; }
.kundensicht-knoepfe { display: flex; gap: var(--r1); flex-wrap: wrap; margin-left: auto; }
.kundensicht-leer { font-size: 13.5px; color: var(--text-leise); padding: var(--r2) 0; }
.kundensicht-fuss { display: flex; align-items: center; justify-content: flex-end; gap: var(--r3); flex-wrap: wrap; padding-top: var(--r3); border-top: 1px solid var(--linie-zart); }
.vorlagen { display: grid; gap: var(--r2); }
.vorlagen-titel { font-size: 12.5px; font-weight: 600; color: var(--text-leise); }
.vorlagen-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.vorlage-knopf { border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.vorlage-knopf:hover { border-color: var(--akzent); color: var(--akzent-text); }
.vorlage-knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); border-color: var(--fokus-kante); }

/* ---------------------------------------------------------------- Postfach */

.nav-zahl { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--ov-orange); color: var(--ov-schwarz); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.nav-zahl[hidden] { display: none; }
.postfach-filter { display: flex; gap: var(--r3); flex-wrap: wrap; margin-bottom: var(--r4); }
.postfach-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--r4); align-items: start; }
.postfach-liste { list-style: none; margin: 0; padding: 0; overflow: hidden; }
/* Block 18: etwa zehn Mails sichtbar, darin scrollen statt die Seite endlos lang. */
.postfach-liste { position: relative; max-height: min(78vh, 900px); overflow-y: auto; overscroll-behavior: contain; }
.postfach-liste > li + li { border-top: 1px solid var(--linie-zart); }
.postfach-zeile { display: grid; gap: 2px; width: 100%; padding: var(--r3) var(--r4); border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.postfach-zeile:hover { background: var(--flaeche-hover); }
.postfach-zeile.aktiv { background: var(--flaeche-versenkt); box-shadow: inset 3px 0 0 var(--ov-orange); }
.postfach-zeile:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: -2px; }
.postfach-zeile-kopf { display: flex; justify-content: space-between; gap: var(--r3); min-width: 0; }
.postfach-absender, .postfach-betreff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.postfach-unter { display: flex; gap: var(--r3); flex-wrap: wrap; font-size: 13px; color: var(--text-leise); }
.postfach-detail { padding: var(--r4); min-width: 0; }
.postfach-mail { display: grid; gap: var(--r4); min-width: 0; }
.postfach-detail-kopf { display: grid; gap: 2px; min-width: 0; }
.postfach-detail-kopf h3, .postfach-von { margin: 0; overflow-wrap: anywhere; }
.postfach-detail-kopf p { margin: 0; overflow-wrap: anywhere; }
.postfach-antwort { display: grid; gap: var(--r3); min-width: 0; }
.postfach-original { display: grid; gap: var(--r1); justify-items: start; min-width: 0; }
.postfach-original p { margin: 0; }
.postfach-schnell { display: flex; gap: var(--r3); align-items: center; flex-wrap: wrap; min-width: 0; }
.postfach-schnell .leise { overflow-wrap: anywhere; }
.postfach-alle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.postfach-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r3); }
.postfach-zeile-feld { display: flex; gap: var(--r2); align-items: center; min-width: 0; }
.postfach-zeile-feld .feld { flex: 1; min-width: 0; }
.postfach-aktionen { display: flex; gap: var(--r2); flex-wrap: wrap; }
.postfach-anhaenge h4 { margin: 0 0 var(--r2); font-size: 14px; }
.postfach-anhaenge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r1); }
.postfach-anhaenge a, .postfach-anhaenge li > span:first-child { display: inline-flex; gap: var(--r2); align-items: center; overflow-wrap: anywhere; }
.postfach-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.55; padding: var(--r4); border-radius: var(--rad-s); background: var(--flaeche-versenkt); max-height: 70vh; overflow: auto; }
.akte-mails { padding: var(--r4); display: grid; gap: var(--r2); }
.akte-mails h3 { margin: 0; font-size: 15px; }
.akte-mails ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r1); }
.akte-mails li { display: flex; gap: var(--r3); align-items: baseline; flex-wrap: wrap; }
.ue-postfach { padding: var(--r4); margin-bottom: var(--r5); display: flex; gap: var(--r4); align-items: center; flex-wrap: wrap; }
.ue-postfach h3 { margin: 0; }
.ue-postfach-zahl { display: inline-flex; gap: var(--r2); align-items: baseline; }
.ue-postfach-zahl strong { font-size: 20px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .postfach-raster { grid-template-columns: minmax(0, 1fr); }
  .postfach-felder { grid-template-columns: minmax(0, 1fr); }
  .postfach-liste { max-height: 60vh; }
}

/* =============================================================== Block 10
   Gestaltung: mehr Kontrast und Tiefe, Phasenfarben, Kennzahl-Kacheln,
   Logo und Themenumschalter. Steht bewusst am Ende und ueberstimmt die
   aelteren Regeln, damit die Grundordnung oben lesbar bleibt. */

/* Phasenfarbe als Variable: jede Stelle mit Phase setzt --ph und --ph-hauch. */
.spalte-neu, .karte-phase-neu, .kachel-phase-neu, .ue-ph-neu { --ph: var(--phase-neu); --ph-hauch: var(--phase-neu-hauch); }
.spalte-onboarding, .karte-phase-onboarding, .kachel-phase-onboarding, .ue-ph-onboarding { --ph: var(--phase-onboarding); --ph-hauch: var(--phase-onboarding-hauch); }
.spalte-produktion, .karte-phase-produktion, .kachel-phase-produktion, .ue-ph-produktion { --ph: var(--phase-produktion); --ph-hauch: var(--phase-produktion-hauch); }
.spalte-freigabe, .karte-phase-freigabe, .kachel-phase-freigabe, .ue-ph-freigabe { --ph: var(--phase-freigabe); --ph-hauch: var(--phase-freigabe-hauch); }
.spalte-live, .karte-phase-live, .kachel-phase-live, .ue-ph-live { --ph: var(--phase-live); --ph-hauch: var(--phase-live-hauch); }
.spalte-abgeschlossen, .karte-phase-abgeschlossen, .kachel-phase-abgeschlossen, .ue-ph-abgeschlossen { --ph: var(--phase-abgeschlossen); --ph-hauch: var(--phase-abgeschlossen-hauch); }
.spalte-on_hold, .kanban-karte.ist-on-hold, .projekt-kachel.ist-on-hold, .ue-ph-on_hold { --ph: var(--phase-on_hold); --ph-hauch: var(--phase-on_hold-hauch); }

.phase-neu { background: var(--phase-neu); }
.phase-onboarding { background: var(--phase-onboarding); }
.phase-produktion { background: var(--phase-produktion); }
.phase-freigabe { background: var(--phase-freigabe); }
.phase-live { background: var(--phase-live); }
.phase-abgeschlossen { background: var(--phase-abgeschlossen); opacity: 1; }
.phase-on_hold { background: var(--phase-on_hold); }

/* ---------------------------------------------------- Logo und Kopfzeile */
.leiste-marke { gap: var(--r3); padding-left: 22px; }
.marke-logo { display: block; width: 104px; height: auto; flex: none; }
.leiste-marke-zusatz {
  padding-left: var(--r3); border-left: 1px solid rgba(255, 255, 255, .16);
  color: var(--ov-orange); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.marke-bild { display: block; flex: none; }
.marke-bild img { display: block; width: 104px; height: auto; }
.logo-fuer-dunkel { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .logo-fuer-hell { display: none !important; }
  :root:not([data-theme="hell"]) .logo-fuer-dunkel { display: block !important; }
}
:root[data-theme="dunkel"] .logo-fuer-hell { display: none !important; }
:root[data-theme="dunkel"] .logo-fuer-dunkel { display: block !important; }
.anmeldung-marke { gap: var(--r4); padding-bottom: var(--r4); margin-bottom: var(--r3); border-bottom: 1px solid var(--linie-zart); }
.anmeldung-marke > span:last-child { padding-left: var(--r4); border-left: 1px solid var(--linie); }
.anmeldung-marke strong { font-size: 17px; }

.kopf-thema { flex: none; }
.thema-umschalter {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--flaeche-versenkt); border: 1px solid var(--linie); border-radius: 999px;
}
.thema-knopf {
  width: 32px; height: 30px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center;
  background: transparent; color: var(--text-leise); cursor: pointer; transition: background .14s, color .14s;
}
.thema-knopf:hover { color: var(--text); }
.thema-knopf[aria-checked="true"] { background: var(--flaeche); color: var(--akzent-text); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.thema-knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); }

/* ---------------------------------------------------------- Grundflaechen */
.seiten-kopf h2 { font-size: 27px; }
.abschnitt-kopf h3 { display: flex; align-items: center; gap: var(--r2); }
.abschnitt-kopf h3::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--akzent); flex: none; }
.ue-leiste-kopf h3 { display: flex; align-items: center; gap: var(--r2); color: var(--text-weich); }
.ue-leiste-kopf h3::before { content: ""; width: 4px; height: 13px; border-radius: 2px; background: var(--akzent); }
.reiter { border-bottom-color: var(--linie); }
.reiter-knopf[aria-selected="true"] { color: var(--text); }

/* ------------------------------------------------------ Kennzahl-Kacheln */
.ue-leiste.karte { background: transparent; box-shadow: none; overflow: visible; gap: var(--r3); }
.ue-leiste-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ue-leiste > .ue-kachel:nth-child(n) {
  border: 0; border-radius: 14px; background: var(--flaeche);
  box-shadow: var(--schatten-hebung), 0 0 0 1px var(--linie-karte);
  padding: var(--r4) var(--r4) var(--r3) var(--r4); min-height: 96px; overflow: hidden;
  transition: transform .14s, box-shadow .14s;
}
.ue-leiste > a.ue-kachel:hover { transform: translateY(-1px); box-shadow: var(--schatten-hebung), 0 0 0 1px var(--linie); background: var(--flaeche); }
.ue-kachel-zahl { font-size: 32px; letter-spacing: -.02em; }
.ue-kachel-name { font-size: 13.5px; color: var(--text-weich); font-weight: 550; }
.ue-leiste > .ue-kachel[class*="ue-ph-"] { box-shadow: inset 0 3px 0 var(--ph), var(--schatten-hebung), 0 0 0 1px var(--linie-karte); }
.ue-leiste > .ue-kachel[class*="ue-ph-"] .ue-kachel-name::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ph); vertical-align: 1px;
}
.ue-ph-freigabe .ue-kachel-zahl { color: var(--text); }
.ue-leiste > .ue-kachel.ue-ziel { background: linear-gradient(180deg, var(--phase-live-hauch) 0%, var(--flaeche) 100%); }
.ue-kachel-fehler::before, .ue-kachel-warnung::before { top: 0; bottom: 0; width: 4px; border-radius: 0; }
.ue-kachel.ist-null .ue-kachel-zahl { color: var(--text-leise); }

.ue-kopf-rechts { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.ue-erledigt {
  display: inline-flex; align-items: center; gap: var(--r2); min-height: 40px; padding: 4px var(--r4) 4px 6px;
  border-radius: 999px; background: var(--flaeche); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-karte);
  font-size: 14px; color: var(--text-weich);
}
.ue-erledigt strong { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.ue-erledigt-zeichen { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-bg); color: var(--text-leise); }
.ue-erledigt.hat-erledigt .ue-erledigt-zeichen { background: var(--erfolg); color: #fff; }

/* ----------------------------------------------------------------- Kanban */
.kanban { grid-auto-columns: minmax(250px, 1fr); }
.kanban-spalte { background: color-mix(in srgb, var(--flaeche-versenkt) 78%, transparent); box-shadow: inset 0 0 0 1px var(--linie-zart); }
.kanban-spalte-kopf {
  margin: -2px -2px var(--r2); padding: 10px var(--r3); border-radius: 12px;
  background: var(--ph-hauch); box-shadow: inset 0 3px 0 var(--ph);
}
.kanban-spalte-kopf h3 { font-size: 14.5px; }
.kanban-zahl { color: var(--text); background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie-zart); }
.kanban-karte { border-left: 4px solid var(--ph, transparent); box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-karte); }
.kanban-karte:hover { transform: translateY(-1px); }
.kanban-halt { background: var(--phase-on_hold-hauch); color: var(--phase-on_hold-text); }
.kanban-halt-grund { color: var(--text-weich); }
.kanban-karte .phasen-fortschritt { margin-top: 2px; }
.kanban-karte .phasen-schritt { height: 3px; }

/* ------------------------------------------------- Fortschritt je Projekt */
.phasen-fortschritt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.phasen-schritt { height: 5px; border-radius: 999px; background: var(--flaeche-versenkt); box-shadow: inset 0 0 0 1px var(--linie-zart); }
.phasen-schritt.ist-erreicht { box-shadow: none; background: var(--ph, var(--akzent)); }

.projekt-kachel { position: relative; overflow: hidden; border-top: 0; padding-left: calc(var(--r4) + 4px); box-shadow: var(--schatten-hebung), 0 0 0 1px var(--linie-karte); }
.projekt-kachel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ph, transparent); }
.projekt-kachel.ist-warnung::before { background: var(--warnung); }
.projekt-halt { font-size: 12.5px; padding: 6px var(--r2); border-radius: 8px; background: var(--phase-on_hold-hauch); color: var(--phase-on_hold-text); font-weight: 550; overflow-wrap: anywhere; }

/* --------------------------------------------------------- Kleine Freude */
.haken.feiert { animation: haken-pop .45s ease-out, feiert .9s ease-out; background: var(--erfolg); border-color: var(--erfolg); color: #fff; }
@keyframes haken-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.kanban-karte.feiert { animation: feiert-live 1.1s ease-out; }
@keyframes feiert-live {
  0% { box-shadow: 0 0 0 0 rgba(46, 154, 99, .6), var(--schatten-karte); transform: scale(1); }
  30% { transform: scale(1.03); }
  100% { box-shadow: 0 0 0 16px rgba(46, 154, 99, 0), var(--schatten-karte); transform: scale(1); }
}

/* ------------------------------------------------------------------ Schmal */
@media (max-width: 1280px) {
  .ue-leiste-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ue-leiste-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ue-leiste-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ue-leiste-7, .ue-leiste-5, .ue-leiste-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ue-leiste.karte { gap: var(--r2); }
  .ue-kachel-zahl { font-size: 26px; }
  .ue-leiste > .ue-kachel:nth-child(n) { min-height: 84px; padding: var(--r3); }
  .thema-knopf { width: 34px; height: 32px; }
  .thema-knopf[aria-checked="false"] { display: none; }
  .thema-umschalter { padding: 2px; }
  .kopf { gap: var(--r2); padding-left: var(--r3); padding-right: var(--r3); }
  .ue-kopf-rechts { width: 100%; }
}

/* ------------------------------------------------ Block 12: Kundenphasen */
.kundenphase-plakette { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--ph, var(--neutral)) 14%, transparent); box-shadow: inset 3px 0 0 var(--ph, var(--neutral)); }
.kundenphase-plakette strong { font-weight: 650; padding-right: 6px; }
.kundenphase-wahl { width: auto; min-width: 0; font-weight: 600; background-color: var(--flaeche); }

/* Kanban: Umschalter Kunden | Projekte, Filterzeile, Kunden-Brett */
.kanban-ansicht .umschalter-punkt { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.kanban-ansicht .umschalter-punkt.aktiv { background: var(--flaeche); }
.kanban-ansicht .umschalter-punkt span { display: inline; }
.kanban-filter { align-items: flex-end; margin: calc(var(--r3) * -1) 0 var(--r4); }
.kanban-nur-meine { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 13.5px; cursor: pointer; }
.kanban-phase-filter:empty { display: none; }
.kanban-phase-filter { margin: calc(var(--r2) * -1) 0 var(--r3); }
.kanban-kunden { display: flex; align-items: stretch; }
.kanban-kunden .kanban-spalte { flex: 1 0 250px; min-width: 0; }
.kanban-kunden .kanban-spalte-kopf .phase-punkt { background: var(--ph); }
.kanban-kunden .kanban-karten:not(:has(.kanban-karte))::after { content: "Keine Kunden"; }
.kanban-klappen { border: 0; background: none; color: var(--text-leise); cursor: pointer; padding: 4px; border-radius: 8px; display: inline-grid; place-items: center; }
.kanban-klappen:hover { background: var(--flaeche-hover); color: var(--text); }
.kanban-klappen svg { transition: transform .15s; transform: rotate(180deg); }
.kanban-kunden .kanban-spalte.ist-eingeklappt { flex: 0 0 64px; }
.kanban-spalte.ist-eingeklappt .kanban-karten { display: none; }
.kanban-spalte.ist-eingeklappt .kanban-spalte-kopf { flex-direction: column; align-items: center; gap: var(--r2); padding: var(--r3) 4px; }
.kanban-spalte.ist-eingeklappt .kanban-spalte-kopf h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; white-space: nowrap; }
.kanban-spalte.ist-eingeklappt .kanban-klappen svg { transform: none; }
.kunden-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kunden-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 12px; font-weight: 550; color: var(--text-weich); background: var(--ph-hauch, var(--flaeche-versenkt)); }
.kunden-chip .phase-punkt { width: 7px; height: 7px; }
.kunden-chip.ist-on-hold { background: var(--phase-on_hold-hauch); color: var(--phase-on_hold-text); }
.kunden-chip-halt { font-weight: 650; }
.kanban-wahl { font: inherit; font-size: 12.5px; min-width: 0; max-width: 62%; padding: 2px 4px; border-radius: 8px;
  border: 1px solid var(--linie-zart); background: var(--flaeche); color: var(--text-weich); cursor: pointer; }
.kanban-wahl.ist-leer { color: var(--warnung-text); border-color: var(--warnung); }
.kanban-aufgaben { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kanban-karte-fuss:has(.kanban-wahl) { flex-wrap: wrap; row-gap: 4px; }
.kanban-karte { min-width: 0; }
@media (max-width: 760px) {
  .kanban-kunden .kanban-spalte { flex: 0 0 min(82vw, 300px); }
  .kanban-kunden .kanban-spalte.ist-leer { flex-basis: 128px; }
  .kanban-kunden .kanban-spalte.ist-eingeklappt { flex-basis: 56px; }
  .kanban-filter { margin-top: 0; }
}

/* Übersicht: Leiste Kundenphasen (neun Kacheln, Farbe je Phase ueber --ph) */
.ue-leiste-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.ue-leiste > .ue-kachel.ue-kph { box-shadow: inset 0 3px 0 var(--ph), var(--schatten-hebung), 0 0 0 1px var(--linie-karte); }
.ue-leiste > .ue-kachel.ue-kph .ue-kachel-name { white-space: normal; line-height: 1.25; }
.ue-leiste > .ue-kachel.ue-kph .ue-kachel-name::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ph); vertical-align: 1px;
}
@media (max-width: 1600px) { .ue-leiste-9 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ue-leiste-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Block 11: Projektarten in der Hub-Bibliothek, Inhalte je Kunde, Zugang */
.projektarten { border: 0; margin: 0; padding: 0; display: grid; gap: var(--r2); min-width: 0; }
.projektarten legend { font-size: 13px; font-weight: 600; margin-bottom: var(--r1); }
.projektarten-liste { display: grid; gap: 0 var(--r3); grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.projektart input:disabled + span { color: var(--text-leise); }
.hub-inhalt-status { font-size: 13px; color: var(--text-weich); }
.hub-inhalt-status.bekommt { color: var(--text); font-weight: 500; }
.hub-inhalt-wahl { display: flex; gap: var(--r2); flex-wrap: wrap; justify-content: flex-end; }
.hub-zugang-text { white-space: pre-line; }

/* Block 13: ruhige Aufgabenkacheln, Prioritaet, Personenkreis */
.aufgaben-liste.ruhig { display: grid; gap: 6px; overflow: visible; }
.aufgaben-liste.ruhig > .aufgabe.kachel {
  position: relative; align-items: center; gap: var(--r3); padding: 12px var(--r4) 12px 14px;
  border: 1px solid var(--linie-karte); border-radius: var(--rad-s); background: var(--flaeche);
  box-shadow: var(--schatten-karte);
}
.aufgaben-liste.ruhig > .aufgabe.kachel + .aufgabe.kachel { border-top: 1px solid var(--linie-karte); }
.aufgaben-liste.ruhig > .aufgabe.kachel:nth-child(even) { background: var(--flaeche-sanft); }
.aufgaben-liste.ruhig > .aufgabe-klickbar:hover { background: var(--flaeche-aktiv); }
.aufgabe.kachel .aufgabe-titel { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.aufgabe.kachel .aufgabe-beschreibung { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.aufgabe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12.5px; color: var(--text-leise); }
.aufgabe-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.aufgabe-meta a { color: var(--text-weich); font-weight: 550; }
.aufgabe-meta .warn { color: var(--fehler-text); font-weight: 600; }
.meta-punkt { color: var(--linie-stark); }
.meta-wiederholung { font-style: italic; }
.jfd-wiederholung { margin: -4px 0 0; }
.haken.haken-gross { width: 32px; height: 32px; margin-top: 0; }
.aufgabe.prio-hoch::before, .ue-zeile.prio-hoch::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--akzent);
}
.ue-zeile.prio-hoch { position: relative; }
.aufgabe.prio-niedrig .aufgabe-titel { font-weight: 500; color: var(--text-weich); }
.prio-zeichen { display: inline-flex; color: var(--akzent-text); margin-right: 2px; }
.af-prio { display: inline-flex; align-items: center; gap: 4px; color: var(--akzent-text); font-weight: 600; font-size: 13px; }
.af-dell-agent { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--r2); }
details.aufgaben-gruppe > summary { list-style: none; cursor: pointer; padding: 4px 0; border-radius: var(--rad-s); }
details.aufgaben-gruppe > summary::-webkit-details-marker { display: none; }
details.aufgaben-gruppe > summary:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.gruppe-pfeil { display: inline-flex; transition: transform .15s; }
details.aufgaben-gruppe[open] > summary .gruppe-pfeil { transform: rotate(90deg); }
.gruppe-wichtig .gruppe-titel { color: var(--akzent-text); }
.gruppe-wichtig .gruppe-zahl { background: var(--akzent-hell); }
.prio-wahl { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--flaeche-versenkt); }
.prio-knopf {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-weich); font: inherit; font-size: 13.5px; cursor: pointer;
}
.prio-knopf[aria-checked="true"] { background: var(--flaeche); color: var(--text); font-weight: 600; box-shadow: var(--schatten-karte); }
.prio-knopf-hoch[aria-checked="true"] { background: var(--akzent); color: #fff; }
.prio-knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.feld-beschriftung { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.person-bild {
  flex: none; width: var(--kreis-groesse, 26px); height: var(--kreis-groesse, 26px); border-radius: 50%;
  display: inline-grid; place-items: center; overflow: hidden;
  background: var(--kreis-farbe, var(--neutral)); color: #fff; font-size: calc(var(--kreis-groesse, 26px) * .38); font-weight: 700; letter-spacing: .02em;
}
.person-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .aufgaben-liste.ruhig > .aufgabe.kachel { padding: 10px 12px; }
  .aufgabe.kachel .aufgabe-titel { font-size: 15px; }
}

/* Block 13 C: Schaetzung, Dauer nach dem Abhaken, Auslastung */
.schaetzung-wahl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.schaetzung-knopf { min-width: 36px; font-size: 17px; line-height: 1; }
.schaetzung-wert { min-width: 64px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.aufwand-frage { flex-direction: column; align-items: stretch; gap: 8px; border-left-color: var(--akzent); max-width: min(560px, calc(100vw - 24px)); }
.aufwand-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); }
.aufwand-zurueck { margin-left: auto; }
.aufwand-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.aufwand-mehr { display: flex; align-items: center; gap: 6px; }
.aufwand-mehr .feld { width: 90px; }
.jfd-rundgang-zeilen { margin: 4px 0 8px; padding-left: 18px; display: grid; gap: 2px; }
.aufwand-bericht { width: 100%; resize: vertical; min-height: 44px; }
.aufwand-dauer { display: flex; flex-direction: column; gap: 10px; }
.aufwand-dauer .aufwand-knoepfe .knopf { min-height: 40px; min-width: 64px; }
.aufwand-knoepfe .knopf[aria-pressed="true"] { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.verschiebe-grund { display: grid; gap: .75rem; }
.verschiebe-grund-knoepfe { flex-wrap: wrap; }
.verschiebe-grund-knoepfe .knopf[aria-pressed="true"] { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.verschiebe-von { display: grid; gap: .25rem; }
.verschiebe-von[hidden] { display: none; }
.aufwand-minuten { display: flex; align-items: center; gap: 6px; }
.aufwand-minuten .feld { width: 100px; }
.last-woche { display: grid; grid-template-columns: minmax(70px, 1fr) auto; align-items: center; gap: 2px 10px; min-width: 190px; }
.last-woche.ist-ungeplant { grid-template-columns: minmax(0, 1fr); }
.last-spur { display: block; height: 8px; border-radius: 999px; background: var(--flaeche-versenkt); overflow: hidden; }
.last-fuellung { display: block; height: 100%; border-radius: 999px; background: var(--erfolg); }
.last-gelb .last-fuellung { background: var(--warnung); }
.last-rot .last-fuellung { background: var(--fehler); }
.last-rot .last-text strong { color: var(--fehler-text); }
.last-text { font-size: 13px; white-space: nowrap; }
.last-satz { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; white-space: normal; }
.last-ampel { font-size: 12px; font-weight: 600; }
.last-gruen .last-ampel { color: var(--erfolg-text); }
.last-gelb .last-ampel { color: var(--warnung-text); }
.last-rot .last-ampel { color: var(--fehler-text); }
.last-erklaerung { margin: 0 0 var(--r3); }
.last-person { display: inline-flex; align-items: center; gap: 8px; }
.last-team-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r3); margin-bottom: var(--r3); }
.last-team { padding: var(--r3) var(--r4); border-radius: var(--rad-s); background: var(--erfolg-bg); color: var(--erfolg-text); }
.last-team.hat-luecke { background: var(--fehler-bg); color: var(--fehler-text); }
.last-team p { margin: 4px 0 0; color: var(--text); }
.last-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.last-zeile { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: start; gap: var(--r3); font-size: 13.5px; }
.last-zeile .last-person span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-aussage { margin: var(--r3) 0 0; }
.ue-leiste-paar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--r4); align-items: start; }
.ue-leiste-paar > .ue-leiste-block { margin-bottom: 0; }
.ue-leiste-paar { margin-bottom: var(--r5); }
.ue-auslastung-karte { padding: var(--r4); }
.art-werte { gap: 8px; }
.art-werte .feld { width: 84px; display: inline-block; }
@media (max-width: 1100px) { .ue-leiste-paar { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .last-team-raster { grid-template-columns: minmax(0, 1fr); }
  .last-zeile { grid-template-columns: minmax(0, 1fr); }
  .last-woche { min-width: 0; }
}

/* Block 13 D: Profilbilder */
.konto-profilbild { display: flex; align-items: center; gap: var(--r3); padding: var(--r3) 0; border-top: 1px solid var(--linie-zart); }
.konto-profilbild p { margin: 2px 0 6px; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.kanban-person-mit-bild { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.kanban-bild:empty { display: none; }
.postfach-zustaendig { display: flex; align-items: center; gap: 8px; }
.postfach-zustaendig .feld { flex: 1; min-width: 0; }
.postfach-bild:empty { display: none; }
dd.mit-bild { display: flex; align-items: center; gap: 6px; }
.akte-person { display: inline-flex; align-items: center; gap: 6px; }
.leiste-person-kreis .person-bild { width: 32px; height: 32px; }

/* Block 13 E: Mitarbeitersicht */
.ansicht-balken {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap;
  padding: 10px var(--r4); background: var(--phase-on_hold); color: #fff; font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.ansicht-balken-text { flex: 1; min-width: 0; }
.ansicht-balken .knopf { background: #fff; color: #2B1D40; border-color: transparent; }

/* Block 13 F: Mein Zugang fuer Claude Code */
.zugang-selbst { display: grid; gap: 6px; padding: var(--r3) 0 0; border-top: 1px solid var(--linie-zart); }
.zugang-selbst-inhalt { display: grid; gap: 8px; }
.zugang-selbst-inhalt p { margin: 0; }
.zugang-selbst-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zugang-selbst-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: var(--rad-s); background: var(--flaeche-sanft); }

/* Block 17 C: Abwesenheiten */
.ue-abwesend { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--warnung-bg); color: var(--warnung-text); }
.ue-abwesend-heute { margin: 4px 0 0; }
.ue-umverteilen { margin-bottom: var(--r4); }
.abw-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.abw-liste li { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); }
.abw-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r3); }
@media (max-width: 600px) { .abw-form { grid-template-columns: minmax(0, 1fr); } }

/* Block 17 D: Berichte mit Handlungsempfehlung */
.bericht-kopf { display: grid; gap: 2px; margin-bottom: var(--r3); }
.bericht-tun { padding: var(--r3) var(--r4); border-radius: var(--rad-s); background: var(--flaeche-versenkt); margin-bottom: var(--r3); }
.bericht-tun ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bericht-tun li { display: flex; gap: 8px; align-items: baseline; line-height: 1.45; }
.bericht-stufe { flex: none; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--flaeche); }
.stufe-rot .bericht-stufe { background: var(--fehler-bg); color: var(--fehler-text); }
.stufe-gelb .bericht-stufe { background: var(--warnung-bg); color: var(--warnung-text); }
.stufe-chance .bericht-stufe { background: var(--erfolg-bg); color: var(--erfolg-text); }
.bericht-mehr-block > summary { cursor: pointer; margin-top: var(--r2); }
article.bericht { padding: var(--r4); }
article.bericht .bericht-zusammenfassung { color: var(--text); margin: 0 0 var(--r2); }
article.bericht .bericht-inhalt { padding: var(--r3) 0 0; }

/* Block 17 E: Onboarding starten */
.ob-start { display: flex; align-items: center; justify-content: space-between; gap: var(--r4); flex-wrap: wrap; padding: var(--r4); }
.ob-ablauf { display: grid; gap: var(--r3); }
.ob-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-zeile { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: var(--r2); padding: 6px var(--r2); border-radius: var(--rad-s); }
.ob-zeile.ist-aktuell { background: var(--flaeche-versenkt); font-weight: 600; }
.ob-haken { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--linie-stark); font-size: 12px; }
.ob-erledigt .ob-haken, .ob-schon_da .ob-haken { background: var(--erfolg-bg); color: var(--erfolg-text); border-color: transparent; }
.ob-uebersprungen .ob-titel { color: var(--text-weich); text-decoration: line-through; }
.ob-schritt { display: grid; gap: var(--r2); padding: var(--r3); border: 1px solid var(--linie-zart); border-radius: var(--rad-s); }
.ob-wahl { display: flex; align-items: center; gap: var(--r2); }
.ob-vorschau pre { max-height: 40vh; }

/* Block 17 H: Erste Hilfe, Reiterzahlen, Postfach-Kopf */
.kopf-hilfe { display: flex; align-items: center; }
.hilfe-knopf { width: 32px; height: 32px; padding: 0; border-radius: 999px; font-weight: 700; border: 1px solid var(--linie); }
.hilfe-text { margin: 0; line-height: 1.6; max-width: 60ch; }
.reiter-zahl { margin-left: 6px; font-size: 12px; color: var(--text-weich); font-weight: 500; }
.reiter-zahl.ist-null { opacity: .55; }
.postfach-detail-oben { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--r4); flex-wrap: wrap; }
.postfach-detail-oben > header { flex: 1 1 260px; min-width: 0; }
.postfach-detail-oben .postfach-antwort { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--r2); margin: 0; }
.postfach-detail-oben .postfach-original { display: flex; flex-direction: column; align-items: flex-end; }
@media (max-width: 600px) { .postfach-detail-oben .postfach-antwort, .postfach-detail-oben .postfach-original { align-items: flex-start; } }

/* Block 17 G: KI-Zusammenfassung */
.postfach-kurz { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.postfach-kurz-karte { padding: var(--r3) var(--r4); border-radius: var(--rad-s); background: var(--akzent-bg, var(--flaeche-versenkt)); border-left: 3px solid var(--akzent, var(--linie-stark)); }
.postfach-kurz-karte .abschnitt-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--r2); }
.postfach-kurz-text { margin: 6px 0 0; white-space: pre-line; line-height: 1.5; }
.postfach-kurz-karte .abschnitt-kopf strong { white-space: nowrap; }

/* Block 19: Jourfixe-Vorbereitung */
.jf-kopf { align-items: flex-start; gap: var(--r3); flex-wrap: wrap; }
.jf-personen { display: grid; gap: var(--r4); }
.jf-person { padding: var(--r4); display: grid; gap: var(--r3); min-width: 0; }
.jf-person-warn { box-shadow: inset 3px 0 0 var(--fehler), var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.jf-person-kopf { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.jf-person-name { flex: 1 1 200px; min-width: 0; }
.jf-person-name h4 { font-size: 16px; margin: 0; }
.jf-person-name p { margin: 2px 0 0; }
.jf-zahlen { display: flex; gap: var(--r2); flex-wrap: wrap; }
.jf-zahl { display: grid; justify-items: center; min-width: 76px; padding: 6px var(--r2); border-radius: var(--rad-s); background: var(--flaeche-versenkt); font-size: 12px; color: var(--text-weich); }
.jf-zahl strong { font-size: 20px; line-height: 1.1; color: var(--text); }
.jf-zahl.jf-gelb strong { color: var(--warnung-text); }
.jf-zahl.jf-rot { background: var(--fehler-bg); }
.jf-zahl.jf-rot strong { color: var(--fehler-text); }
.jf-aufgaben { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); }
.jf-aufgabe { display: grid; gap: var(--r2); padding: var(--r3); border-radius: var(--rad-s); background: var(--flaeche-versenkt); min-width: 0; }
.jf-aufgabe.jf-verschleppt { box-shadow: inset 3px 0 0 var(--fehler); }
.jf-aufgabe-kopf { display: flex; justify-content: space-between; gap: var(--r2); flex-wrap: wrap; }
.jf-aufgabe-titel { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.jf-aufgabe-titel strong { overflow-wrap: anywhere; }
.jf-marken { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.jf-marke { font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.jf-marke.jf-rot { background: var(--fehler-bg); color: var(--fehler-text); }
.jf-marke.jf-gelb { background: var(--warnung-bg); color: var(--warnung-text); }
.jf-marke.jf-leise { background: var(--neutral-bg); color: var(--neutral-text); }
.jf-ki { display: grid; gap: 2px; padding: var(--r2) var(--r3); border-radius: 8px; background: var(--flaeche); border-left: 3px solid var(--akzent); }
.jf-ki-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
.jf-ki-text { margin: 0; line-height: 1.5; }
.jf-details > summary { cursor: pointer; font-size: 13.5px; color: var(--text-weich); min-height: 32px; display: flex; align-items: center; }
.jf-beschreibung { white-space: pre-line; margin: var(--r2) 0; }
.jf-verlauf { margin: var(--r2) 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.jf-verlauf li { display: grid; gap: 1px; }
.jf-verlauf li.jf-kommentar span:last-child { font-style: italic; }
.jf-aktionen { display: flex; flex-wrap: wrap; gap: var(--r2); align-items: center; }
.jf-aktion { display: flex; gap: 6px; align-items: center; min-width: 0; }
.jf-aktion-breit { flex: 1 1 100%; }
.jf-feld { min-height: 40px; width: auto; max-width: 100%; min-width: 0; }
.jf-vorschlag-felder .jf-feld { width: 100%; }
.jf-personen, .jf-slack, .jf-erledigt { min-width: 0; max-width: 100%; }
.jf-kommentar-feld { flex: 1 1 auto; min-width: 0; resize: vertical; min-height: 40px; }
.jf-knopf { min-height: 40px; white-space: nowrap; }
.jf-erledigt-gruppen { display: grid; gap: var(--r3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); padding: 0 var(--r1) var(--r2); }
.jf-erledigt-gruppe h4 { font-size: 14px; margin: 0 0 6px; }
.jf-erledigt-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jf-erledigt-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--r2); align-items: baseline; cursor: pointer; }
.jf-erledigt-zeile input { width: 20px; height: 20px; }
.jf-erledigt-zeile .leise { grid-column: 2; }
.jf-erledigt-zeile:has(input:checked) > span:first-of-type { text-decoration: line-through; color: var(--text-leise); }
.jf-slack { padding: var(--r4); }
.jf-schalter { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.jf-vorschlaege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); }
.jf-vorschlag { display: grid; gap: var(--r2); padding: var(--r3); border-radius: var(--rad-s); background: var(--flaeche-versenkt); min-width: 0; }
.jf-auszug { margin: 0; overflow-wrap: anywhere; }
.jf-vorschlag-felder { display: grid; gap: var(--r2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
@media (max-width: 760px) {
  .jf-aktion { flex: 1 1 100%; }
  .jf-aktion .jf-feld { flex: 1 1 0; width: 0; }
  .jf-zahl { min-width: 64px; }
}

/* Vorschläge vom System: Phasenwechsel im Jourfixe */
.pv-wechsel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); min-width: 0; }
.pv-phase { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: 999px; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; background: var(--neutral-bg); color: var(--neutral-text); }
.pv-nach { background: var(--erfolg-bg); color: var(--erfolg-text); }
.pv-pfeil { display: inline-flex; color: var(--text-leise); flex: 0 0 auto; }
.pv-grund { margin: 0; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.pv-wirkung { margin: 0; overflow-wrap: anywhere; }
.pv-zeichen { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--akzent); color: #fff; }
.pv-zeichen-hinweis { background: var(--warnung-bg); color: var(--warnung-text); }
.pv-karte .jfd-titel { margin-top: 2px; }
.jfd-ergebnis.pv-ergebnis-still { background: var(--neutral-bg); color: var(--neutral-text); }
.pv-akte { min-height: 44px; text-decoration: none; }
.pv-zeile-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--r2); min-width: 0; }
.pv-zeile-titel { display: grid; min-width: 0; overflow-wrap: anywhere; }
.pv-zeile .jf-knopf { white-space: normal; }
@media (max-width: 760px) {
  .pv-zeile .jf-aktionen > * { flex: 1 1 100%; justify-content: center; min-height: 48px; }
}

/* Freigabe für den Kunden mit Bestätigungssatz */
.freigabe { display: grid; gap: var(--r3); }
.freigabe-kopf { margin: 0; font-weight: 600; }
.freigabe-vorschau { display: grid; gap: var(--r2); padding: var(--r3); border-radius: var(--rad-s); background: var(--flaeche-versenkt); max-height: 34dvh; overflow-y: auto; }
.freigabe-vorschau p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.freigabe-erklaerung { display: grid; gap: 6px; margin: 0; padding: var(--r4); border-radius: var(--rad-s); background: var(--fehler-bg); color: var(--fehler-text); border-left: 5px solid var(--fehler); line-height: 1.5; }
.freigabe-erklaerung p { margin: 0; font-weight: 700; font-size: 15.5px; }
.freigabe-achtung { display: flex; align-items: center; gap: var(--r2); font-size: 19px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .03em; }
.freigabe-zeichen { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--fehler); color: #fff; font-size: 18px; font-weight: 800; }
.freigabe-eingabe { display: grid; gap: 6px; }

/* Jourfixe-Durchgang: eine Aufgabe je Ansicht */
.jf-kopf-knoepfe { display: flex; gap: var(--r2); flex-wrap: wrap; }
dialog.jfd {
  margin: auto; width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible;
}
dialog.jfd:focus, dialog.jfd:focus-visible { outline: none; }
dialog.jfd::backdrop { background: var(--schleier); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.jfd[open] { animation: dialog-auf .18s ease-out; }
.jfd-inhalt { display: grid; gap: var(--r3); max-height: calc(100dvh - 24px); grid-template-rows: auto minmax(0, 1fr); }
.jfd-kopf { display: grid; gap: var(--r2); padding: 0 var(--r1); color: #fff; }
.jfd-kopf .leise { color: rgba(255,255,255,.8); }
.jfd-kopf .knopf { color: #fff; }
.jfd-kopf-zeile { display: flex; align-items: center; gap: var(--r3); }
.jfd-kopf-zeile .leise { flex: 1; }
.jfd-im-plan, .jf-im-plan { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; margin-top: 4px; }
.jf-grund { text-transform: none; }
/* Mien 30.10.2026: Feld "Verteilung" im Kopf des Durchgangs */
.jfd-kopf-zeile { flex-wrap: wrap; row-gap: var(--r1); }
.jfd-verteilung-knopf.ist-an { background: rgba(255,255,255,.18); }
.jfd-verteilung {
  display: grid; gap: var(--r2); padding: var(--r3) var(--r4); border-radius: var(--rad-l);
  background: var(--flaeche); color: var(--text); box-shadow: 0 16px 40px rgba(0,0,0,.24), 0 0 0 1px var(--linie-zart);
  max-height: min(52dvh, 460px); overflow-y: auto; overscroll-behavior: contain; animation: dialog-auf .15s ease-out;
}
.jfd-kopf .jfd-verteilung .leise { color: var(--text-weich); }
.jfd-kopf .jfd-verteilung .knopf { color: var(--text); }
.jfd-vt-satz { margin: 0; }
.jfd-vt-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--r2) var(--r5); }
.jfd-vt-gruppe { min-width: 0; }
.jfd-vt-gruppe h4 { margin: 0 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-weich); }
.jfd-vt-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; }
.jfd-vt-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name zahl knopf" "balken balken knopf";
  align-items: center; column-gap: var(--r2); row-gap: 3px; padding: 6px 0; border-top: 1px solid var(--linie-zart); font-size: 14px;
}
.jfd-vt-gruppe li:first-child { border-top: 0; }
.jfd-vt-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.jfd-vt-zahl { grid-area: zahl; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-weich); }
.jfd-vt-balken { grid-area: balken; height: 4px; border-radius: 999px; background: var(--linie-zart); overflow: hidden; }
.jfd-vt-balken span { display: block; height: 100%; border-radius: 999px; background: var(--akzent); }
.jfd-vt-weg { grid-area: balken; }
.jfd-vt-knopf { grid-area: knopf; }
.jfd-vt-knopf .knopf { min-height: 32px; }
.jfd-vt-leer { opacity: .55; }
.jfd-balken { height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.jfd-balken span { display: block; height: 100%; border-radius: 999px; background: var(--akzent); transition: width .25s ease; }
.jfd-karte {
  display: grid; gap: var(--r3); align-content: start; padding: var(--r5); border-radius: var(--rad-l);
  background: var(--flaeche); box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px var(--linie-zart);
  overflow-y: auto; min-width: 0; animation: jfd-rein .22s ease-out;
}
@keyframes jfd-rein { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jfd-karte, dialog.jfd[open] { animation: none; } }
.jfd-person { display: flex; align-items: center; gap: var(--r3); }
.jfd-person > div { display: grid; min-width: 0; }
.jfd-titel { font-size: clamp(20px, 3.4vw, 26px); line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.jfd-faellig { margin: 0; color: var(--text-weich); }
.jfd-kommentar-zeile { display: flex; gap: var(--r2); align-items: stretch; }
.jfd-kommentar { flex: 1 1 auto; min-width: 0; min-height: 64px; resize: vertical; }
.jfd-mikro { flex: 0 0 auto; min-height: 48px; max-width: 150px; white-space: normal; text-align: left; line-height: 1.2; }
.jfd-mikro.ist-an { background: var(--fehler-bg); color: var(--fehler-text); border-color: transparent; }
.jfd-status { margin: 0; min-height: 0; }
.jfd-status:empty { display: none; }
.jfd-status.jfd-fehler { color: var(--fehler-text); }
.jfd-aktionen { display: grid; gap: var(--r2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.jfd-gross { min-height: 52px; font-size: 15.5px; font-weight: 600; justify-content: center; }
.jfd-erledigt { background: var(--erfolg); border-color: var(--erfolg); color: #fff; }
.jfd-erledigt:hover { filter: brightness(1.06); }
.jfd-heute { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.jfd-heute:hover { filter: brightness(1.06); }
.jfd-person > strong { font-size: 15px; }
.jfd-haengt { display: grid; gap: 6px; }
.jfd-chips { display: flex; flex-wrap: wrap; gap: var(--r2); }
.jfd-chip { min-height: 44px; border-radius: 999px; padding: 0 var(--r3) 0 var(--r2); gap: 6px; font-weight: 600; }
.jfd-chip:not(:has(.person-bild)) { padding: 0 var(--r4); }
.jfd-neben-feld { display: grid; gap: 4px; min-width: 0; }
.jfd-feld { min-height: 44px; width: 100%; min-width: 0; }
.jfd-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); flex-wrap: wrap; padding-top: var(--r2); border-top: 1px solid var(--linie-zart); }
.jfd-ergebnis { margin: 0; padding: var(--r3); border-radius: var(--rad-s); background: var(--erfolg-bg); color: var(--erfolg-text); font-weight: 600; }
.jfd-ende { justify-items: center; text-align: center; padding-block: var(--r6, 40px); }
.jfd-ende h3 { margin: 0; font-size: 22px; }
.jfd-ende p { margin: 0; max-width: 46ch; }
.jfd-ende .jfd-fuss { width: 100%; justify-content: center; }
/* Claude-Modus (Mien 02.11.2026): nur lesen, Zurück und Weiter nebeneinander. */
.jfd-claude-satz { margin: 0; color: rgba(255,255,255,.85); }
.jfd-claude-knoepfe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.jf-claude-schalter { margin-top: var(--r1); }
.jf-claude-satz { margin: 0 0 var(--r3); padding: var(--r2) var(--r3); border-radius: 10px; background: var(--flaeche-versenkt); border: 1px solid var(--linie-zart); }
.jfd-ende-haken { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--erfolg-bg); color: var(--erfolg-text); }
@media (max-width: 760px) {
  .jfd-karte { padding: var(--r4); }
  .jfd-tasten { display: none; }
  .jfd-mikro { max-width: 110px; }
}

/* Block 20 E: Meetings und Medien in der Akte */
.meetings-liste { display: grid; gap: var(--r3); }
.meeting { display: grid; gap: var(--r3); min-width: 0; padding: var(--r4); }
.meeting-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--r2); align-items: flex-start; }
.meeting-kopf p { margin: 2px 0 0; }
.meeting-status { margin: 0; font-size: 13.5px; color: var(--text-weich); }
.meeting-status.ist-warnung { padding: 8px 12px; border-radius: var(--rad-s); background: var(--warnung-bg); color: var(--warnung-text); }
.meeting-zusammenfassung { display: grid; gap: var(--r3); padding: var(--r3) var(--r4); border-radius: var(--rad-s); background: var(--flaeche-versenkt); }
.meeting-punkte ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.45; }
.meeting-vorschlaege { display: grid; gap: var(--r2); }
.meeting-nachreichen { display: grid; gap: var(--r2); }
.meeting-nachreichen[open] { gap: var(--r2); }

/* Block 20 F: Antworten in Overview und Mails als Chat in der Akte */
.postfach-overview-antwort { display: grid; gap: var(--r2); padding: var(--r3) var(--r4); border-radius: var(--rad-s); background: var(--flaeche-versenkt); min-width: 0; }
.postfach-overview-felder { display: grid; gap: var(--r2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.postfach-overview-antwort textarea { width: 100%; min-height: 140px; }
.postfach-antworten-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.postfach-kundenfilter-zeile { margin: calc(-1 * var(--r2)) 0 var(--r2); }
.postfach-kundenfilter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); margin-bottom: var(--r2); }
.postfach-kundenfilter .feld { max-width: 320px; }
.postfach-gesperrt p { margin: 4px 0 0; }
.postfach-vorschlag { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--rad-s); border: 1px dashed var(--linie); }
.postfach-vorschlag p { margin: 0; }
.mail-chat { display: grid; gap: var(--r3); }
.mail-chat-antwort { display: grid; gap: var(--r2); padding: var(--r4); }
.mail-chat-antwort > p { margin: 0; }
.mail-chat-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--r2); max-height: 62vh; overflow-y: auto; }
.mail-chat-eintrag { display: flex; }
.mail-chat-eintrag.ist-aus { justify-content: flex-end; }
.mail-chat-blase { max-width: min(78%, 640px); min-width: 0; padding: 10px 14px; border-radius: 14px; background: var(--flaeche); box-shadow: var(--schatten-karte); display: grid; gap: 4px; }
.ist-ein .mail-chat-blase { border-bottom-left-radius: 4px; }
.ist-aus .mail-chat-blase { border-bottom-right-radius: 4px; background: var(--akzent-hell); }
.mail-chat-blase p { margin: 0; }
.mail-chat-betreff { font-weight: 600; }
.mail-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
@media (max-width: 640px) { .mail-chat-blase { max-width: 92%; } }

/* Block 20 G: Knopf "umsetzen" je Empfehlung, Stand des Auftrags */
.bericht-tun li { flex-wrap: wrap; }
.bericht-empfehlung-text { flex: 1 1 220px; min-width: 0; }
.bericht-umsetzen { margin-left: auto; }
.bericht-auftrag { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Zwei Stufen: Vorschlag mit Vorher/Nachher, Meldung und Kundentext stehen in voller Breite unter der Empfehlung */
.bericht-vorschlag, .bericht-kundentext, .bericht-meldung { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.bericht-meldung { margin: 0; color: var(--text-weich); white-space: pre-line; }
.bericht-vorschlag, .bericht-kundentext { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: var(--r3); border-radius: var(--rad-s); background: var(--flaeche); border: 1px solid var(--linie-zart); }
.bericht-vorschlag p, .bericht-kundentext p { margin: 0; }
.bericht-vorschlag-tabelle { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.bericht-vorschlag-tabelle th, .bericht-vorschlag-tabelle td { text-align: left; vertical-align: top; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--linie-zart); overflow-wrap: anywhere; }
.bericht-vorschlag-tabelle th { font-weight: 600; font-size: 11.5px; color: var(--text-weich); }
.bericht-vorschlag-tabelle th:first-child { width: 44%; }
.bericht-vorschlag-knoepfe, .bericht-kundentext-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bericht-kundentext-kopf { justify-content: space-between; }
.bericht-kundentext-text { white-space: pre-line; }
/* ------------------------------------------------------------ Rückblick */
.rb { margin-bottom: var(--r5); padding: 0; box-shadow: inset 3px 0 0 var(--erfolg), var(--schatten-karte), 0 0 0 1px var(--linie-zart); }
.rb-kopf { display: flex; align-items: center; gap: var(--r3); padding: var(--r3) var(--r4); cursor: pointer; list-style: none; min-height: 52px; }
.rb-kopf::-webkit-details-marker { display: none; }
.rb-zeichen { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--erfolg); color: #fff; }
.rb-kopf-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.rb-kopf-zeile { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-pfeil { color: var(--text-leise); transform: rotate(90deg); transition: transform .2s; display: grid; }
.rb[open] > .rb-kopf .rb-pfeil { transform: rotate(-90deg); }
.rb-inhalt { display: grid; gap: var(--r4); padding: 0 var(--r4) var(--r4); transition: opacity .2s; }
.rb-inhalt.laedt { opacity: .55; }
.rb-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2) var(--r3); }
.rb-steuerung > select.feld { width: auto; min-width: 0; max-width: 100%; }
.rb-eigen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--r2); }
.rb-eigen[hidden] { display: none; }
.rb-eigen .feld { width: auto; }
.rb-umfang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--flaeche-versenkt); margin-left: auto; }
.rb-umfang-knopf { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--text-leise); padding: 5px 12px; min-height: 30px; border-radius: 999px; cursor: pointer; }
.rb-umfang-knopf.aktiv { background: var(--flaeche); color: var(--text); font-weight: 600; box-shadow: var(--schatten-karte); }
.rb-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r3); }
.rb-zahl { display: grid; gap: 2px; padding: var(--r3); border-radius: var(--rad-s); background: var(--flaeche-sanft); box-shadow: inset 0 0 0 1px var(--linie-zart); min-width: 0; }
.rb-zahl strong { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rb-zahl span { font-size: 13px; color: var(--text-leise); overflow-wrap: anywhere; }
.rb-zahl.hervor { background: var(--erfolg-bg); box-shadow: none; }
.rb-zahl.hervor strong { color: var(--erfolg-text); }
.rb-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-weich); white-space: pre-line; max-width: 72ch; overflow-wrap: anywhere; }
.rb-herkunft { margin: calc(-1 * var(--r3)) 0 0; }
.rb-ziel { display: grid; gap: var(--r2); padding: var(--r3); border-radius: var(--rad-s); background: var(--flaeche-sanft); box-shadow: inset 0 0 0 1px var(--linie-zart); }
.rb-ziel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r3); flex-wrap: wrap; }
.rb-ziel-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rb-ziel-stand { font-variant-numeric: tabular-nums; font-weight: 600; }
.rb-ziel-balken { height: 10px; border-radius: 999px; background: var(--flaeche-versenkt); overflow: hidden; }
.rb-ziel-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--akzent); transition: width .6s ease-out; }
.rb-ziel-balken.geschafft > span { background: var(--erfolg); }
.rb-ziel-satz { margin: 0; }
.rb-ziel > .knopf { justify-self: start; }
.rb-ziel-eingabe { display: grid; gap: 4px; }
.rb-ziel-feld { width: 120px; }
.rb-ziel-knoepfe { display: flex; flex-wrap: wrap; gap: var(--r2); }
.rb-phasen h4, .rb-tag-kopf { margin: 0 0 var(--r2); font-size: 13px; font-weight: 600; color: var(--text-leise); }
.rb-phasen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rb-phase { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--r2); }
.rb-phase-ziel { font-size: 12.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--flaeche-versenkt); color: var(--text-weich); }
.rb-phase-ziel.live { background: var(--erfolg-bg); color: var(--erfolg-text); }
.rb-liste-block > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--akzent-text); min-height: 32px; display: flex; align-items: center; }
.rb-liste { display: grid; gap: var(--r4); margin-top: var(--r3); max-height: min(70vh, 720px); overflow-y: auto; }
.rb-tag-kopf { display: flex; justify-content: space-between; text-transform: none; }
.rb-haken { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--erfolg-bg); color: var(--erfolg-text); }
.rb-kunde-knopf { font: inherit; font-size: 13px; color: var(--akzent-text); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.rb-kunde-knopf:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .rb-umfang { margin-left: 0; }
  .rb-zahl strong { font-size: 22px; }
  .rb-text { font-size: 15px; }
  .rb-eigen { width: 100%; }
}

/* ------------------------------------------------------- Jourfixe-Modus */
.kopf-jourfixe { display: flex; align-items: center; flex: none; }
.jourfixe-knopf { gap: 6px; }
.jourfixe-knopf.ist-an { background: var(--erfolg-bg); color: var(--erfolg-text); border-color: transparent; font-weight: 600; }
.jourfixe-band {
  position: sticky; top: 0; z-index: 59; display: flex; align-items: center; justify-content: center; gap: var(--r2); flex-wrap: wrap;
  padding: 6px var(--r4); background: var(--erfolg-bg); color: var(--erfolg-text); font-size: 13.5px; font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--linie-zart);
}
.jourfixe-band .knopf { min-height: 28px; color: var(--erfolg-text); }
/* Am Handy teilt niemand den Bildschirm im Meeting: der Knopf fehlt dort,
   ist der Modus an, beendet ihn das Band oben. */
@media (max-width: 760px) {
  .kopf-jourfixe { display: none; }
}

/* Team: mittlere Breite, Chips unter den Namen. */
@media (min-width: 761px) and (max-width: 1100px) {
  .person { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .person-chips { grid-column: 2; grid-row: 2; }
  .person-knoepfe { grid-column: 3; grid-row: 1 / span 2; }
}

/* Verlauf der Kundenakte: scrollt im Kasten fester Höhe (Muster wie
   .postfach-liste, Block 18), darüber Suche und Trefferzahl. Dasselbe für die
   erledigten Aufgaben. Am Handy höchstens gut zwei Drittel des Bildschirms. */
.verlauf-bereich { display: grid; gap: var(--r3); min-width: 0; }
.verlauf-suche { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.verlauf-suche .feld { flex: 1 1 240px; min-width: 0; }
.verlauf-zahl { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.verlauf-kasten {
  list-style: none; margin: 0; position: relative; min-width: 0;
  max-height: min(70vh, 760px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin;
  padding: var(--r4); border-radius: var(--rad); background: var(--flaeche-sanft); box-shadow: inset 0 0 0 1px var(--linie-zart);
}
.verlauf-kasten:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: 2px; }
.verlauf-kasten.verlauf { align-content: start; }
.verlauf-kasten.verlauf > .verlauf-eintrag:last-child { padding-bottom: 0; }
.abzeichen-trello { background: var(--info-bg); color: var(--info-text); font-size: 11px; padding: 0 7px; }
.aus-trello .verlauf-zeichen { background: var(--flaeche-versenkt); color: var(--text-leise); }
.erledigt-block > summary .leise { font-weight: 400; }
.erledigt-liste { display: grid; gap: var(--r3); align-content: start; }
.erledigt-zeile { display: flex; gap: var(--r3); align-items: flex-start; min-width: 0; }
.erledigt-haken { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--erfolg-bg); color: var(--erfolg-text); margin-top: 1px; }
.erledigt-koerper { flex: 1; min-width: 0; display: grid; gap: 2px; }
.erledigt-titel { overflow-wrap: anywhere; }
.erledigt-meta { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; }
.erledigt-notiz { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .verlauf-kasten { max-height: 66vh; padding: var(--r3); }
  .verlauf-suche .feld { flex-basis: 100%; }
}

/* Mailverlauf (16.10.2026): Schnellansicht, Beantwortet, Dateien des Kunden */
.postfach-eintrag { position: relative; }
.postfach-eintrag .postfach-zeile { padding-right: 52px; }
.schnell-knopf {
  display: inline-flex; align-items: center; gap: 3px; min-height: 30px; min-width: 30px; justify-content: center;
  padding: 3px 7px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--text-weich); font: inherit; font-size: 12px; cursor: pointer;
}
.schnell-knopf:hover, .schnell-knopf[aria-expanded="true"] { background: var(--akzent-hell); color: var(--akzent-text); border-color: transparent; }
.schnell-knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.schnell-zahl { font-variant-numeric: tabular-nums; font-weight: 600; }
.postfach-schnell-knopf { position: absolute; right: var(--r3); top: 50%; transform: translateY(-50%); }
/* Jourfixe 19.10.2026: Haken links an jeder Mail, Suche über der Liste */
.postfach-eintrag .postfach-zeile { padding-left: 46px; }
.postfach-haken { position: absolute; left: var(--r3); top: calc(var(--r3) + 1px); z-index: 1; }
.postfach-eintrag.ist-erledigt .postfach-zeile { opacity: .6; }
.postfach-suche { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.postfach-beantwortet { display: inline-flex; align-items: center; gap: 4px; color: var(--erfolg-text); font-size: 12.5px; margin: 0; }
.postfach-verlauf-zeile { margin: 6px 0 0; }
.postfach-verlauf-zeile .knopf { display: inline-flex; align-items: center; gap: 6px; }

.schnell-fenster {
  position: fixed; z-index: 92; display: grid; grid-template-rows: auto minmax(0, 1fr);
  max-height: min(78vh, 720px); border-radius: var(--rad); background: var(--flaeche);
  box-shadow: var(--schatten-schwebe), 0 0 0 1px var(--linie-karte); overflow: hidden;
}
.schnell-fenster:focus { outline: none; }
.schnell-fenster.ist-blatt { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh; border-radius: 16px 16px 0 0; }
.schnell-schleier { z-index: 91; }
.schnell-kopf { display: flex; align-items: flex-start; gap: var(--r2); padding: var(--r3) var(--r3) var(--r2) var(--r4); border-bottom: 1px solid var(--linie-zart); }
.schnell-kopf-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.schnell-titel { overflow-wrap: anywhere; line-height: 1.3; }
.schnell-zu { border: 0; background: transparent; color: var(--text-leise); padding: 6px; border-radius: 8px; cursor: pointer; min-width: 32px; min-height: 32px; }
.schnell-zu:hover { background: var(--flaeche-hover); color: var(--text); }
.schnell-inhalt { overflow-y: auto; overscroll-behavior: contain; padding: var(--r3) var(--r4) var(--r4); display: grid; gap: var(--r3); align-content: start; }
.schnell-ki { display: grid; gap: 6px; padding: var(--r3); border-radius: var(--rad-s); background: var(--flaeche-sanft); border-left: 3px solid var(--akzent); }
.schnell-ki p { margin: 0; }
.schnell-ki-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--r2); }
.schnell-ki-worum { line-height: 1.45; }
.schnell-themen { display: flex; flex-wrap: wrap; gap: 4px; }
.schnell-thema { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--flaeche-versenkt); color: var(--text-weich); }
.schnell-ki-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r2); }
.schnell-ki-gruppe ul { margin: 2px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.4; }
.schnell-ki-titel { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.ist-geklaert .schnell-ki-titel { color: var(--erfolg-text); }
.ist-offen .schnell-ki-titel { color: var(--warnung-text); }
.schnell-seiten { display: flex; justify-content: space-between; margin: 0 2px -6px; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.schnell-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--r2); }
.schnell-eintrag { display: flex; }
.schnell-eintrag.ist-aus { justify-content: flex-end; }
.schnell-blase { max-width: 86%; min-width: 0; padding: 8px 12px; border-radius: 14px; background: var(--flaeche-versenkt); display: grid; gap: 4px; }
.ist-ein .schnell-blase { border-bottom-left-radius: 4px; }
.ist-aus .schnell-blase { border-bottom-right-radius: 4px; background: var(--akzent-hell); }
.schnell-blase p { margin: 0; }
.schnell-wer { overflow-wrap: anywhere; }
.schnell-punkte { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.4; }
.schnell-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.45; }
.schnell-blase details summary { cursor: pointer; color: var(--text-leise); }
.schnell-blase details .schnell-text { margin-top: 4px; max-height: 40vh; overflow: auto; }
.schnell-anhaenge { display: flex; flex-wrap: wrap; gap: 4px; }
.schnell-anhang { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); overflow-wrap: anywhere; }
.schnell-anhang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.schnell-fuss { display: flex; justify-content: flex-end; }
.mail-chat-fuss { display: flex; align-items: center; gap: var(--r2); justify-content: space-between; }
@media (max-width: 700px) {
  .schnell-ki-raster { grid-template-columns: minmax(0, 1fr); }
  .schnell-blase { max-width: 92%; }
}

.kunden-dateien-liste { list-style: none; margin: 0; padding: 0; }
.kunden-dateien-liste > li + li { border-top: 1px solid var(--linie-zart); }
.kunden-datei { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--r3); padding: var(--r3) var(--r4); align-items: center; }
.kunden-datei-name { display: inline-flex; align-items: center; gap: var(--r2); min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.kunden-datei-info { grid-column: 1; }
.kunden-datei-mail { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: var(--r2); max-width: 280px; min-width: 0; }
.kunden-datei-mail a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 640px) {
  .kunden-datei { grid-template-columns: minmax(0, 1fr); }
  .kunden-datei-mail { grid-column: 1; grid-row: auto; max-width: 100%; }
}

/* Mailversand (16.10.2026): Schreibfenster, Vorschau, Signaturen */
dialog.mail-schreib-dialog { width: min(880px, calc(100vw - 24px)); }
.mail-schreiben { display: grid; gap: var(--r3); min-width: 0; }
.mail-felder { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--r2) var(--r3); align-items: center; }
.mail-felder > label { color: var(--text-leise); }
.mail-cc { display: flex; gap: var(--r3); align-items: center; min-width: 0; }
.mail-cc .feld { flex: 1; min-width: 0; }
.mail-alle { white-space: nowrap; }
.mail-reiter { justify-self: start; }
.mail-schreib-bereich, .mail-vorschau-bereich { display: grid; gap: var(--r2); min-width: 0; }
.mail-schreib-bereich[hidden], .mail-vorschau-bereich[hidden] { display: none; }
.mail-werkzeug-zeile { display: flex; gap: var(--r2); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mail-werkzeuge { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; padding: 3px; border: 1px solid var(--linie); border-radius: var(--rad-s); background: var(--flaeche); }
.mail-werkzeug { min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.mail-werkzeug:hover { background: var(--flaeche-hover); }
.mail-werkzeug:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.mail-werkzeug-trenner { width: 1px; height: 18px; margin: 0 4px; background: var(--linie); }
.mail-editor {
  min-height: 240px; max-height: 52vh; overflow-y: auto; padding: 14px 16px;
  border: 1px solid var(--linie-stark); border-radius: var(--rad-s); background: #fff; color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55;
  overflow-wrap: anywhere; cursor: text;
}
.mail-editor:focus { outline: none; box-shadow: var(--fokus-ring); border-color: var(--akzent); }
.mail-editor p { margin: 0; }
.mail-editor ul, .mail-editor ol { margin: 4px 0 8px 0; padding-left: 24px; }
.mail-editor li { margin: 0 0 4px 0; }
.mail-editor a { color: #c2410c; text-decoration: underline; }
.mail-signatur-zeile { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap; }
.mail-signatur-zeile .feld { width: auto; min-width: 200px; max-width: 100%; }
.mail-vorschau-kopf { display: flex; gap: var(--r3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mail-vorschau-rahmen { display: block; width: 100%; height: 56vh; margin: 0 auto; border: 1px solid var(--linie); border-radius: var(--rad-s); background: #fff; transition: width .2s ease; }
.mail-vorschau-rahmen.ist-handy { width: min(375px, 100%); }
.mail-versand-satz { margin: 0; }
.mail-fuss-knoepfe { display: flex; gap: var(--r2); flex-wrap: wrap; align-items: center; }
.postfach-mailprogramm-link { color: var(--text-leise); text-decoration: underline; }
.mail-chat-neu { margin-top: var(--r3); flex-wrap: wrap; }
.konto-signaturen, .konto-dell-agent { display: grid; gap: 4px; justify-items: start; }
.mail-sig-verwaltung { display: grid; gap: var(--r3); }
.mail-sig-liste { display: grid; gap: var(--r3); }
.mail-sig-karte { display: grid; gap: var(--r2); padding: var(--r3); border: 1px solid var(--linie); border-radius: var(--rad-s); background: var(--flaeche); min-width: 0; }
.mail-sig-kopf { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap; }
.mail-sig-kopf .knopf-reihe { margin-left: auto; }
.mail-signatur-vorschau { width: 100%; height: 240px; border: 1px solid var(--linie-zart); border-radius: 8px; background: #fff; }
.mail-sig-leer { display: grid; gap: var(--r2); justify-items: start; }
.mail-sig-formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r2) var(--r3); }
.mail-sig-formular > :nth-last-child(-n+2) { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .mail-felder { grid-template-columns: minmax(0, 1fr); }
  .mail-cc { flex-wrap: wrap; }
  .mail-sig-formular { grid-template-columns: minmax(0, 1fr); }
  .mail-editor { min-height: 200px; }
}

/* Block 21 A1: Beschreibung gekürzt mit „Mehr anzeigen“, Textfeld wächst mit */
.beschreibung-block { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; max-width: 100%; }
.beschreibung-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.beschreibung-text.ist-gekuerzt { display: -webkit-box; -webkit-line-clamp: var(--zeilen, 3); line-clamp: var(--zeilen, 3); -webkit-box-orient: vertical; overflow: hidden; }
.beschreibung-mehr {
  background: none; border: 0; padding: 4px 0; min-height: 28px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--akzent-text);
}
.beschreibung-mehr:hover { text-decoration: underline; }
.beschreibung-mehr[hidden] { display: none; }
.aufgabe.kachel .beschreibung-block .aufgabe-beschreibung { display: block; -webkit-line-clamp: unset; }
.aufgabe.kachel .beschreibung-block .aufgabe-beschreibung.ist-gekuerzt { display: -webkit-box; -webkit-line-clamp: var(--zeilen, 2); }
textarea.feld-waechst { field-sizing: content; min-height: 5.5em; max-height: 70vh; resize: vertical; overflow-y: auto; }
.af-beschreibung-lesen { display: flex; flex-direction: column; gap: 4px; padding: var(--r2) var(--r3); border: 1px solid var(--linie-zart); border-radius: 10px; background: var(--flaeche-sanft); }
.af-beschreibung-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); }
.af-beschreibung-kopf label { margin: 0; }

/* Block 21 A2: Mit Claude erledigen */
.claude-fenster { display: flex; flex-direction: column; gap: var(--r2); min-width: 0; }
.claude-prompt { width: 100%; min-height: 16em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; resize: vertical; }
.claude-knoepfe { display: flex; gap: var(--r2); flex-wrap: wrap; }
.claude-skill { margin: 0; font-weight: 600; }
.claude-status:empty { display: none; }

/* Block 21 B: Offen in Slack */
.so-liste { display: flex; flex-direction: column; gap: var(--r3); padding: 0; margin: var(--r3) 0 0; }
.so-eintrag { display: flex; flex-direction: column; gap: var(--r2); padding: var(--r3) var(--r4, 18px); min-width: 0; }
.so-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.so-kurz { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.so-vermutung { margin: 0; font-style: italic; }
.so-knoepfe { display: flex; flex-wrap: wrap; gap: var(--r2); }

/* Block 21 C: Verlauf anzeigen auf Vorschlagskarten */
.pv-verlauf > summary { color: var(--akzent-text); font-weight: 600; font-size: 13px; cursor: pointer; }
.pv-ereignisse > ol:not(.ek-liste) > li { display: flex; gap: var(--r2); flex-wrap: wrap; }

/* Block 21 D: Nachricht an den Kunden über Walter */
.walter-fenster { display: flex; flex-direction: column; gap: var(--r2); min-width: 0; }
.walter-beschriftung { font-weight: 600; font-size: 13.5px; margin-top: var(--r2); }
.walter-text { min-height: 8em; }
.walter-warnung { color: var(--warnung-text); margin: 0; }
.jfd-walter { align-self: flex-start; margin-top: calc(var(--r2) * -1); }

/* Jourfixe 19.10.2026: Herkunft und Verschiebungen im Aufgabenfenster */
.af-herkunft { color: var(--text-weich); overflow-wrap: anywhere; }
.af-verschoben summary { cursor: pointer; color: var(--text-weich); }
.af-verschoben-oft summary { color: var(--warnung-text); font-weight: 600; }
.af-verschoben-liste { margin: 4px 0 0; padding-left: 18px; color: var(--text-weich); }
.af-umhaengen { margin-top: 2px; }
.af-umhaengen-felder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: var(--r2); align-items: center; }
@media (max-width: 640px) { .af-umhaengen-felder { grid-template-columns: minmax(0, 1fr); } }

/* Jourfixe 19.10.2026: Zähler je Kunde im Durchgang */
.jfd-kunde-zeile { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jfd-kunde-zaehler { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent-text); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 20px; }
.jfd-kunde-letzte { background: var(--flaeche-versenkt); color: var(--text-weich); }

/* Jourfixe 19.10.2026: Vertriebs-To-do in der eigenen Liste */
.marke-vertrieb { display: inline-block; padding: 0 6px; border-radius: 999px; border: 1px solid var(--linie); color: var(--text-weich); font-size: 11.5px; font-weight: 600; line-height: 18px; }

/* Jourfixe 19.10.2026: Drive-Ordner als Zeichen am Kundennamen */
.akte-titel-zeile { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; min-width: 0; }
.drive-knopf { display: inline-flex; align-items: center; gap: 6px; }
.drive-fehlt svg { opacity: .45; filter: grayscale(1); }
.marke-neu { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent-text); font-size: 11px; font-weight: 650; line-height: 17px; vertical-align: 1px; }

/* Jourfixe 19.10.2026: feste Farbe je Person */
.person-marke { display: inline-block; padding: 0 7px; border: 1.5px solid var(--pf); border-radius: 999px; color: var(--pf); font-weight: 650; line-height: 18px; }
.farb-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.farb-feld { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--flaeche); background: var(--pf); box-shadow: 0 0 0 1px var(--linie); cursor: pointer; padding: 0; }
.farb-feld[aria-checked="true"] { box-shadow: 0 0 0 2px var(--text); }
.farb-feld:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.konto-farbe { display: grid; gap: 2px; margin-top: var(--r3); }

/* Jourfixe 19.10.2026: Kunden, die im Durchgang nicht vorkamen */
.jfd-nicht-besprochen { text-align: left; margin: var(--r3) 0; padding: var(--r3) var(--r4); border-radius: var(--rad-s); background: var(--flaeche-versenkt); }
.jfd-nicht-besprochen summary { cursor: pointer; font-weight: 600; }
.jfd-nicht-besprochen ul { margin: 6px 0 0; padding-left: 18px; columns: 2 220px; }
.jfd-nicht-besprochen a { color: var(--akzent-text); font-weight: 600; }

/* 19.10.2026: ehrliche Erledigt-Zahlen */
.ue-erledigt-text { display: inline-grid; line-height: 1.25; }
.ue-erledigt-zusatz { font-size: 11.5px; color: var(--text-leise); font-weight: 400; }
.rb-zusatz { margin-top: -4px; }
.rb-art { color: var(--text-leise); font-style: italic; }

/* Jourfixe 19.10.2026: Kunden-Schnellansicht rechts im Durchgang */
dialog.jfd.mit-seite { width: min(1120px, calc(100vw - 24px)); }
.jfd-mit-seite { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--r3); min-height: 0; }
.jfd-mit-seite > .jfd-karte { max-height: calc(100dvh - 110px); }
.jfd-seite { display: grid; gap: var(--r2); align-content: start; padding: var(--r4); border-radius: var(--rad-l); background: var(--flaeche); box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 1px var(--linie-zart); overflow-y: auto; max-height: calc(100dvh - 110px); min-width: 0; }
.jfd-seite h4 { margin: var(--r2) 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
.jfd-seite-kopf { display: grid; gap: 2px; }
.jfd-seite-kopf strong { font-size: 17px; }
.jfd-seite-links { display: flex; gap: var(--r2); flex-wrap: wrap; margin-top: 4px; }
.jfd-seite-liste { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
.jfd-seite-verlauf li { display: grid; }
.jfd-seite-knopf { justify-self: start; }
@media (max-width: 900px) {
  .jfd-mit-seite { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; max-height: calc(100dvh - 110px); }
  .jfd-mit-seite > .jfd-karte, .jfd-seite { max-height: none; overflow: visible; }
}
.postfach-kurztitel { font-size: 13px; font-weight: 650; color: var(--akzent-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Eingänge (22.10.2026) */
.eg-schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.eg-rahmen { overflow-x: auto; }
.eg-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.eg-tabelle th, .eg-tabelle td { padding: 9px 10px; text-align: left; vertical-align: middle; border-top: 1px solid var(--linie-zart); }
.eg-tabelle thead th { border-top: 0; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); white-space: nowrap; }
.eg-zeile { cursor: pointer; }
.eg-zeile:hover, .eg-zeile:focus-visible { background: var(--flaeche-hover); outline: none; }
.eg-zeile.ist-test td { color: var(--text-leise); }
.eg-zeile.ist-test td:not(:last-child) { opacity: .7; }
.eg-felder { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.eg-felder dt { color: var(--text-leise); }
.eg-felder dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.eg-roh { margin-top: 16px; }
.eg-abschnitt { margin-top: 18px; }
.eg-abschnitt h3, .eg-abschnitt h4 { font-size: 15px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--linie); }
.eg-roh summary { cursor: pointer; margin-bottom: 8px; }
.eg-unterschrift { margin: 0 0 16px; }
.eg-unterschrift img { max-width: 320px; width: 100%; height: auto; background: #fff; border: 1px solid var(--linie); border-radius: var(--rad-s); }
.anfordern-kopf { display: grid; gap: 6px; margin-bottom: 12px; }
.anfordern-kopf p { margin: 0; }
.anfordern-kopf code { overflow-wrap: anywhere; }
.anfordern-hinweis { padding: 10px 12px; border-radius: var(--rad-s); background: var(--flaeche-hover); margin: 0 0 12px; }

/* Zahnrad neben Aktionen: Vorlagen der Kundentexte (22.10.2026) */
.knopf-zahnrad { width: 32px; padding: 0; flex: 0 0 auto; }
.ob-schritt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); }
dialog.dialog-vorlage { width: min(1180px, calc(100vw - 24px)); }
.vorlage-fenster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r4); align-items: start; }
.vorlage-spalte { display: grid; gap: var(--r3); min-width: 0; }
.vorlage-rechts { position: sticky; top: 0; }
.vorlage-text { font-family: inherit; line-height: 1.5; resize: vertical; }
.vorlage-schalter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3); }
.vorlage-schalter select { width: auto; }
.vorlage-meldungen p { margin: 0 0 6px; }
.vorlage-hinweis { padding: 6px 10px; border-radius: var(--rad-s); background: var(--warnung-bg); color: var(--warnung-text); }
.vorlage-teil p { margin: 0 0 4px; }
.vorlage-teil pre { max-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.vorlage-hilfe summary { cursor: pointer; font-weight: 600; }
.vorlage-platzhalter { list-style: none; margin: var(--r2) 0 0; padding: 0; display: grid; gap: 6px; }
.vorlage-platzhalter li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vorlage-platzhalter .knopf { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 900px) {
  .vorlage-fenster { grid-template-columns: minmax(0, 1fr); }
  .vorlage-rechts { position: static; }
}

/* Projekt-Checklisten (23.10.2026): Fortschritt, Sperre, Unteraufgaben, Zahnrad-Fenster */
.meta-fortschritt { display: inline-flex; align-items: center; gap: 6px; }
.fortschritt-balken { display: inline-block; width: 46px; height: 6px; border-radius: 999px; background: var(--flaeche-versenkt); overflow: hidden; position: relative; }
.fortschritt-balken::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--anteil, 0%); background: var(--erfolg); border-radius: inherit; }
.meta-wartet { display: inline-flex; align-items: center; gap: 4px; color: var(--warnung-text); }
.haken-gesperrt { cursor: not-allowed; border-style: dashed; color: var(--text-leise); display: inline-flex; align-items: center; justify-content: center; }
.hauptaufgabe-gruppe { list-style: none; display: grid; gap: 4px; }
.hauptaufgabe-gruppe > .aufgaben-liste { margin: 0; padding: 0; }
.unteraufgaben { margin-left: 28px; border-left: 2px solid var(--linie-zart); padding-left: 10px; }
.unteraufgaben > summary { cursor: pointer; color: var(--text-weich); padding: 4px 0; }
.unteraufgaben-liste { margin-top: 4px; }
.checklisten-liste { display: grid; gap: 8px; }
.checkliste-karte { display: grid; gap: 4px; }
.checkliste-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.checkliste-kopf .knopf { margin-left: auto; }
.checkliste-vorschau { background: var(--flaeche-versenkt); border-radius: var(--rad-s); padding: 10px 12px; }
.checkliste-vorschau-liste { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 2px; }
.feld-mit-knopf { display: flex; gap: 6px; align-items: center; }
.feld-mit-knopf .feld { flex: 1; min-width: 0; }
.vorlagen-uebersicht { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.vorlagen-uebersicht li { display: flex; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid var(--linie-zart); padding-top: 8px; }
.cl-editor-fenster { display: grid; gap: 10px; }
.cl-editor { display: grid; gap: 14px; }
.cl-abschnitt { border: 1px solid var(--linie-zart); border-radius: var(--rad-s); padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.cl-abschnitt legend { font-weight: 700; padding: 0 4px; }
.cl-schritt { border-top: 1px solid var(--linie-zart); padding-top: 6px; }
.cl-schritt > summary { cursor: pointer; font-size: 14px; }
.cl-schritt[open] > summary { font-weight: 600; margin-bottom: 8px; }
.cl-vorgaenger { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 4px 12px; max-height: 220px; overflow: auto; padding: 6px; background: var(--flaeche-versenkt); border-radius: var(--rad-s); }
.af-zusammenhang { display: grid; gap: 6px; }
.af-kontext-block { align-items: start; flex-wrap: wrap; }
.af-verknuepft { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; flex: 1 1 100%; }
.af-verknuepft li { display: flex; align-items: center; gap: 6px; }
.af-verknuepft li.ist-erledigt .knopf-link { text-decoration: line-through; color: var(--text-leise); }
.punkt-offen { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--linie-stark); display: inline-block; }
.knopf-link { background: none; border: 0; padding: 0; color: var(--akzent-text); cursor: pointer; text-align: left; font: inherit; }
.knopf-link:hover { text-decoration: underline; }

/* Letzter Stand (Jourfixe 26.10.2026) */
.ls-kopf { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; }
.ls-kopf .jf-ki-label { margin-right: auto; }
.ls-knoepfe { display: flex; gap: var(--r2); flex-wrap: wrap; margin-top: var(--r1, 4px); }
.ls-block textarea { width: 100%; }
.jfd-mail-aufgabe { margin: 0; }
.jf-kunden-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.jf-kunde { padding: var(--r2) var(--r3); display: grid; gap: var(--r1, 4px); }
.jf-kunde-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); }
.jf-kunde-kopf a { margin-right: auto; }
.jf-kunde-aufgaben ul, .jfd-weggelegt ul { margin: var(--r1, 4px) 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.jf-kunde-stand { margin: 2px 0 0; }

/* Ereignis-Karten und Kurz gesagt (Jourfixe 26.10.2026) */
.ek-liste { list-style: none; margin: var(--r2) 0 0; padding: 0; display: grid; gap: var(--r2); }
.ek-liste > li.ek-karte, .pv-ereignisse .ek-liste > li.ek-karte { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--flaeche); border: 1px solid var(--linie-karte); box-shadow: var(--schatten-karte); border-left: 3px solid var(--ek-farbe, var(--text-leise)); border-radius: 10px; padding: 8px 12px; gap: 2px; }
.ek-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r2); }
.ek-datum { font-size: 11.5px; color: var(--text-leise); }
.ek-art { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ek-farbe, var(--text-leise)); }
.ek-text { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.ek-text-voll { white-space: pre-line; }
.ek-mehr { justify-self: start; margin-top: 4px; padding: 0; background: none; border: 0; font: inherit; font-size: .85em; font-weight: 600; color: var(--akzent-text); cursor: pointer; }
.ek-mehr:hover { text-decoration: underline; }
.ek-erledigt { --ek-farbe: var(--erfolg); }
.ek-phase { --ek-farbe: var(--phase-freigabe); }
.ek-kommentar { --ek-farbe: var(--akzent); }
.ek-mail, .ek-slack { --ek-farbe: var(--info); }
.kg-punkte { margin: 2px 0 0; padding-left: 1.1em; display: grid; gap: 3px; line-height: 1.4; }
.kg-block { margin-bottom: var(--r2); }

/* Andere Wege für Kunden-Mails (26.10.2026) */
.mw-rahmen { margin-top: var(--r3); padding-top: var(--r2); border-top: 1px solid var(--linie-zart); display: grid; gap: var(--r2); }
.mw-block { display: grid; gap: var(--r2); }
.mw-leiste { display: flex; flex-wrap: wrap; gap: var(--r2); align-items: center; }
.mw-status { margin: 0; min-height: 1em; }
.mw-text { width: 100%; }
.vorlage-test { margin-top: var(--r3); display: grid; gap: var(--r2); }
.wa-blase { background: #dcf8c6; color: #111; border-radius: 10px 10px 10px 2px; padding: 10px 12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-blase { background: #005c4b; color: #f2f2f2; } }
:root[data-theme="dark"] .wa-blase { background: #005c4b; color: #f2f2f2; }

/* Kundenakte entschlackt (26.10.2026) */
.projekt-menue { position: relative; display: inline-block; }
.projekt-menue > summary { list-style: none; cursor: pointer; min-width: 34px; justify-content: center; font-weight: 700; }
.projekt-menue > summary::-webkit-details-marker { display: none; }
.projekt-menue-liste { position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); min-width: 190px; display: grid; gap: 2px; padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie-karte); border-radius: 10px; box-shadow: var(--schatten-schwebe); }
.projekt-menue-liste .knopf { justify-content: flex-start; width: 100%; }
.projekte-ruhend { margin-top: var(--r3); padding: var(--r2) var(--r3); }
.projekte-ruhend > summary { cursor: pointer; font-weight: 600; }
.projekte-ruhend-liste { list-style: none; margin: var(--r2) 0 0; padding: 0; display: grid; gap: var(--r2); }
.projekt-ruhend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); }
.projekt-kachel:has(.projekt-menue[open]) { overflow: visible; z-index: 5; }
.projekt-menue > summary { display: inline-flex; align-items: center; }

/* Kundenakte 26.10.2026: Erklärzeile oben im Reiter, Filter im Verlauf,
   Herkunft und Notiz bei Dateien. */
.reiter-erklaerung { margin: 0 0 var(--r4); color: var(--text-leise); font-size: 14px; line-height: 1.5; max-width: 70ch; }
.verlauf-erklaerung { margin: 0 0 var(--r3); max-width: 70ch; }
.verlauf-filter { margin-bottom: var(--r3); flex-wrap: wrap; width: fit-content; max-width: 100%; }
.typ-ereignis .verlauf-text { margin-top: 2px; }
.kunden-datei-herkunft { display: block; }
.kunden-datei-notiz { display: block; margin-top: 2px; white-space: pre-wrap; }
.kunden-datei-notiz-leer { font-style: italic; }
.kunden-dateien-hochladen { display: grid; gap: var(--r2); margin-bottom: var(--r4); padding: var(--r4); }
.kunden-dateien-hochladen p { margin: 0; }
.kunden-dateien-hochladen .knopf-reihe { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap; }

/* Zugangsdaten in der Akte (26.10.2026) */
.zugang-zeile { flex-wrap: wrap; }
.zugang-passwort { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .04em; }
.zugang-passwort.ist-offen { background: var(--flaeche-hover); padding: 1px 6px; border-radius: 6px; user-select: all; }
.postfach-erledigt-notiz { display: block; color: var(--text-weich, inherit); white-space: pre-line; overflow-wrap: anywhere; }
.mail-grund-schnell { flex-wrap: wrap; gap: 8px; }
.wochenbericht-text { white-space: pre-line; overflow-wrap: anywhere; }
.af-kommentare { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.af-kommentar-bereich { display: grid; gap: 6px; }
.aufgabe-start { color: var(--akzent-text); font-weight: 600; }
/* 29.10.2026: Onboarding-Angaben beim Kunden (Überblick) */
.ob-angaben { display: grid; gap: 10px; }
.ob-angabe > summary { cursor: pointer; padding: 2px 0; }
.ob-angabe[open] > summary { margin-bottom: 4px; }
.ob-formular { display: inline-flex; align-items: center; gap: 4px; }

/* Onboarding-Einstellungen (29.10.2026) */
.ob-einstellungen { margin-bottom: 24px; }
.ob-schalter { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 14px; }
.ob-schalter input { margin-top: 4px; }
.ob-editor { display: grid; gap: 14px; }
.ob-schritt { display: grid; gap: 10px; padding: 14px; }
.ob-schritt-titel { flex: 1 1 260px; font-weight: 600; }
.ob-felder { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ob-feld { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--linie, rgba(127,127,127,.25)); border-radius: 10px; }
.ob-feld-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-feld-reihe > .feld { flex: 1 1 220px; min-width: 0; }
.ob-feld-fuss > select.feld { flex: 0 1 260px; }
.ob-pflicht { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.ob-versionen ol { padding-left: 18px; display: grid; gap: 4px; }
.ob-vorschau { display: grid; gap: 14px; }
.ob-v-schritt { padding: 14px; display: grid; gap: 10px; }
.ob-v-frage { font-weight: 600; margin: 0; }
.ob-v-pflicht { color: #FF6A00; }
.ob-v-wahl { display: grid; gap: 4px; }
.ob-v-info { border-left: 3px solid #FF6A00; padding-left: 10px; }
.jfd-onboarding { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.jfd-onboarding-zeile { padding: 10px; border: 1px solid var(--linie, rgba(127,127,127,.25)); border-radius: 10px; }

/* Empfänger-Dialog (29.10.2026) */
.ew { display: grid; gap: 8px; margin: 6px 0 10px; }
.ew-block { display: grid; gap: 4px; }
.ew-haken { display: flex; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
.ew-reihe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ew-frei { flex: 1 1 200px; min-width: 0; }
.ew-vorschau { margin: 4px 0; overflow-wrap: anywhere; }
.mail-empfaenger { margin: 6px 0; }

/* Einstellungen als Kacheln (30.10.2026) */
.einstellung-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--r3, 14px); }
.einstellung-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 18px; cursor: pointer; border: 1px solid var(--linie, rgba(127,127,127,.25)); background: var(--karte, transparent); color: inherit; font: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.einstellung-kachel:hover, .einstellung-kachel:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.einstellung-symbol { opacity: .8; }
.einstellung-stand { margin-top: auto; padding-top: 6px; }
dialog.einstellung-fenster { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog.einstellung-fenster[open] { display: flex; flex-direction: column; }
dialog.einstellung-fenster::backdrop { background: var(--schleier); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.einstellung-inhalt { overflow: auto; padding: 0 var(--r4, 18px) var(--r4, 18px); min-height: 0; }
@media (max-width: 47.5em) {
  dialog.einstellung-fenster { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
}

/* Team für Kundengruppen: ruhiges Raster statt Einzelkarten (30.10.2026) */
.kg-satz { margin: 0 0 var(--r4); max-width: 72ch; }
.kg-raster { display: grid; border-top: 1px solid var(--linie-zart); }
.kg-zeile { display: grid; grid-template-columns: minmax(150px, 200px) 220px minmax(140px, 1fr) minmax(160px, 1fr) minmax(110px, .8fr) minmax(110px, auto); align-items: center; gap: var(--r3); padding: var(--r2) var(--r1); border-bottom: 1px solid var(--linie-zart); }
.kg-kopf { font-size: 12px; font-weight: 600; color: var(--text-leise); text-transform: none; padding-top: var(--r2); padding-bottom: var(--r2); }
.kg-name { font-weight: 600; overflow-wrap: anywhere; }
.kg-tel, .kg-name-feld { width: 100%; min-width: 0; }
.kg-schalter { min-height: 32px; }
.kg-nur-schmal { display: none; }
.kg-status { display: inline-flex; align-items: center; gap: 4px; color: var(--erfolg-text); justify-self: end; white-space: nowrap; }
.kg-status.kg-fehler { color: var(--fehler-text); white-space: normal; }
.kg-ende { display: flex; align-items: center; gap: var(--r2); justify-content: flex-end; }
.kg-zwischen { margin: var(--r5) 0 var(--r2); font-size: 14px; }
.kg-neu { border-bottom: 0; }
.einstellung-inhalt .ob-einstellungen.karte { box-shadow: none; border: 0; background: none; padding: 0; }
@media (max-width: 47.5em) {
  .kg-zeile { grid-template-columns: 1fr 1fr; gap: var(--r2); }
  .kg-kopf { display: none; }
  .kg-nur-schmal { display: inline; }
  .kg-zeile > .kg-status, .kg-zeile > .kg-ende { grid-column: 1 / -1; justify-self: start; }
}

/* Einstellungs-Fenster aufgeräumt (30.10.2026) */
dialog.einstellung-fenster { padding: 0; overflow: hidden; }
.einstellung-kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: var(--r3); padding: var(--r4) var(--r5); border-bottom: 1px solid var(--linie-zart); background: var(--glas-deckend, var(--flaeche)); }
.einstellung-kopf-text { flex: 1; min-width: 0; }
.einstellung-kopf-text h3 { margin: 0 0 2px; font-size: 18px; }
.einstellung-kopf-text p { margin: 0; }
.einstellung-zu { flex: none; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
dialog.einstellung-fenster .einstellung-inhalt { flex: 1; overflow: auto; padding: var(--r5); overscroll-behavior: contain; }
.einstellung-inhalt .seiten-kopf h2 { display: none; }
.einstellung-inhalt .seiten-kopf { margin-top: 0; }
.ew-bereich { display: grid; gap: var(--r4); }
.ew-bereich > * { margin: 0; }
.kt-gruppe { display: grid; gap: var(--r2); }
.kt-gruppe-titel { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-leise); text-transform: uppercase; }
.kt-liste { display: grid; border: 1px solid var(--linie-zart); border-radius: var(--rad); overflow: hidden; }
.kt-zeile { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--r3); padding: var(--r3) var(--r4); background: none; border: 0; border-bottom: 1px solid var(--linie-zart); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kt-zeile:last-child { border-bottom: 0; }
.kt-zeile:hover, .kt-zeile:focus-visible { background: var(--flaeche-hover); }
.kt-symbol { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--flaeche-sanft); }
.kt-wa { color: #1a9e55; }
.kt-mail { color: var(--akzent-text); }
.kt-text { display: grid; gap: 2px; min-width: 0; }
.kt-vorschau { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-rechts { display: flex; align-items: center; gap: var(--r2); }
.kt-knopf { pointer-events: none; }
.kt-hilfe summary { cursor: pointer; font-weight: 500; }
.kt-platzhalter { list-style: none; padding: 0; margin: var(--r2) 0 0; display: grid; gap: 4px; }
@media (max-width: 47.5em) {
  .kt-zeile { grid-template-columns: 36px minmax(0, 1fr); }
  .kt-rechts { grid-column: 2; flex-wrap: wrap; }
  .einstellung-kopf { padding: var(--r3) var(--r4); }
  dialog.einstellung-fenster .einstellung-inhalt { padding: var(--r4); }
}
.ob-schalter > span { display: grid; gap: 2px; }
.ob-schalter { padding: var(--r3) var(--r4); border: 1px solid var(--linie-zart); border-radius: var(--rad); }
.kg-neu > .knopf { justify-self: start; }
/* KI-Funktionen (Mien 30.10.2026): Kachel in den Einstellungen */
.kf-haupt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--r3); padding: var(--r4); border: 1px solid var(--linie-zart); border-radius: var(--rad); background: var(--flaeche-sanft); }
.kf-haupt.ist-aus { border-color: var(--ov-orange); }
.kf-liste { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--linie-zart); border-radius: var(--rad); overflow: hidden; }
.kf-liste.ist-gedaempft { opacity: .55; }
.kf-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--r3); padding: var(--r3) var(--r4); border-bottom: 1px solid var(--linie-zart); }
.kf-zeile:last-child { border-bottom: 0; }
.kf-text { display: grid; gap: 2px; min-width: 0; }
.kf-text > * { overflow-wrap: anywhere; }
.kf-schalter { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: var(--linie, rgba(127,127,127,.35)); cursor: pointer; transition: background .15s ease; }
.kf-schalter::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.kf-schalter:checked { background: var(--ov-orange); }
.kf-schalter:checked::after { transform: translateX(18px); }
.kf-schalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kf-schalter:disabled { opacity: .5; cursor: progress; }
.kf-verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

/* Eigene Formulare (30.10.2026) in den Einstellungen, Onboarding-Formulare */
.ef-bereich { display: grid; gap: 10px; padding-top: var(--r3); border-top: 1px solid var(--linie-zart); }
.ef-bereich .vorlagen-uebersicht li.ist-archiviert strong { color: var(--text-leise, inherit); }
.ef-bereich .vorlagen-uebersicht li > div { min-width: 0; display: grid; gap: 2px; }
.ef-bereich .vorlagen-uebersicht a { overflow-wrap: anywhere; }
.ef-meta { display: grid; gap: 10px; }
.ef-zeile { display: grid; gap: 4px; }
.ef-zeile > span:first-child { font-weight: 600; font-size: .92em; }
.ef-leistungen { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ef-kundentext { display: grid; gap: 8px; }
.ef-kundentext > summary { cursor: pointer; font-weight: 600; }
.ef-vorschau { white-space: pre-wrap; max-height: 260px; overflow: auto; }
.ob-baustein { background: var(--flaeche-zart, rgba(127,127,127,.06)); }

/* Jourfixe 02.11.2026: Links im Verlauf blau und anklickbar */
.verlauf-link { color: #1b5fd1; text-decoration: underline; text-underline-offset: 2px; }
.verlauf-link:hover { color: #123f8f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .verlauf-link { color: #7fb0ff; }
  :root:not([data-theme="hell"]) .verlauf-link:hover { color: #a9c9ff; }
}
:root[data-theme="dunkel"] .verlauf-link { color: #7fb0ff; }
:root[data-theme="dunkel"] .verlauf-link:hover { color: #a9c9ff; }

/* Jourfixe 02.11.2026: Filter Ueberfaellig in der Akte */
.aufgaben-filter { margin: 0 0 10px; }

/* Klickbar sieht klickbar aus (Mien 06.11.2026). Eine Regel fuer das ganze Tool:
   1. Hauptaktion: schwarzer Knopf (knopf-haupt), je Bereich hoechstens einer.
   2. Weitere Aktion: Knopf mit eigener getoenter Flaeche und Rahmen, damit er
      sich von der weissen Karte abhebt (vorher weiss auf weiss).
   3. Kleine Textaktion (knopf-still, knopf-link, Kundenname): Aktionsfarbe wie
      jeder Link, beim Drueberfahren eine leichte Flaeche.
   4. Reine Anzeigen (Status, Beschriftung): kein Rahmen, keine Aktionsfarbe,
      kein Zeiger. Neutrale Status stehen als Text mit Punkt, nicht als Pille. */
:root {
  --knopf-zweit-bg: #F2EDE5;
  --knopf-zweit-hover: #E9E2D7;
  --knopf-zweit-kante: rgba(40, 30, 20, .24);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --knopf-zweit-bg: rgba(255, 255, 255, .08);
    --knopf-zweit-hover: rgba(255, 255, 255, .13);
    --knopf-zweit-kante: rgba(255, 255, 255, .22);
  }
}
:root[data-theme="dunkel"] {
  --knopf-zweit-bg: rgba(255, 255, 255, .08);
  --knopf-zweit-hover: rgba(255, 255, 255, .13);
  --knopf-zweit-kante: rgba(255, 255, 255, .22);
}
.knopf:not(.knopf-haupt):not(.knopf-still):not(.knopf-gefahr) {
  background: var(--knopf-zweit-bg); border-color: var(--knopf-zweit-kante);
  box-shadow: 0 1px 0 rgba(20, 20, 20, .05);
}
.knopf:not(.knopf-haupt):not(.knopf-still):not(.knopf-gefahr):hover { background: var(--knopf-zweit-hover); }
.knopf-still { color: var(--akzent-text); }
.knopf-still:hover { background: var(--akzent-hell); color: var(--akzent-text); }
.knopf-still.dialog-x { color: var(--text-weich); }
.knopf-still.dialog-x:hover { background: var(--flaeche-hover); color: var(--text); }
.knopf-link { font-weight: 600; }
.kunde-link {
  color: var(--akzent-text); cursor: pointer; font-weight: inherit;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px;
}
.kunde-link:hover { text-decoration-color: currentColor; }
.abzeichen { cursor: default; user-select: none; }
.abzeichen:not([class*="abzeichen-"]) { background: transparent; padding-left: 2px; padding-right: 2px; }
.abzeichen:not([class*="abzeichen-"])::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex: none;
}
.kunde-zeile-leistungen .abzeichen:not([class*="abzeichen-"]) { background: var(--neutral-bg); padding: 0 7px; }
.kunde-zeile-leistungen .abzeichen:not([class*="abzeichen-"])::before { display: none; }
.abschnitt-leer { margin: 0; padding: 2px 0; }

/* Mail-Ansicht im Postfach (06.11.2026): Kopf, eine Aktionsleiste, Auswege */
.postfach-aktionsleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r2); }
.postfach-aktionsleiste .postfach-alle { margin: 0 var(--r2) 0 0; display: inline-flex; align-items: center; gap: 4px; }
.postfach-auswege { margin-top: calc(-1 * var(--r2)); display: flex; flex-wrap: wrap; gap: 0 4px; }
.postfach-auswege a { color: var(--akzent-text); }
.postfach-akte-link { white-space: nowrap; font-weight: 600; font-size: 13.5px; }
.postfach-entwuerfe { padding: var(--r3) var(--r4); margin-bottom: var(--r3); display: grid; gap: var(--r1); }
.postfach-entwuerfe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.postfach-unter .kunde-link { font-weight: 600; }
.mail-herkunft {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--r3); padding: var(--r2) var(--r3);
  border-radius: var(--rad-s); background: var(--akzent-hell); color: var(--text);
}

/* Verlauf der Kundenakte: Mails und lange Inhalte aufklappbar (Mien 06.11.2026) */
.ek-aufklapp, .ek-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.verlauf-kopf { flex-wrap: wrap; min-width: 0; }
.verlauf-kopf .abzeichen { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verlauf-aufklapp { gap: 2px; }
.verlauf-vorschau { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verlauf-voll { white-space: pre-line; overflow-wrap: anywhere; color: var(--text-weich); margin-top: 4px; }
.verlauf-mail { display: grid; gap: var(--r3, 10px); margin-top: 6px; padding: var(--r4, 14px); border-radius: var(--rad-s); background: var(--flaeche-versenkt); }
.verlauf-mail-kopf { display: grid; gap: 2px; margin: 0; }
.verlauf-mail-kopf > div { display: flex; gap: 8px; }
.verlauf-mail-kopf dt { min-width: 3.5em; color: var(--text-leise, inherit); opacity: .75; }
.verlauf-mail-kopf dd { margin: 0; overflow-wrap: anywhere; }
.verlauf-mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.55; }
.verlauf-mail-anhaenge { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.verlauf-mail-anhaenge a { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------ Kundenakte in zwei Spalten
   Mien 06.11.2026, Vorlage Prototyp Variante D. Links Kopf mit Eckdaten,
   Bereichsknöpfe und Überblick, rechts eine eigene, scrollende Spalte mit
   allen Reitern; die Reiterleiste bleibt oben stehen. Ob zwei Spalten,
   entscheidet die Breite der Akte selbst (kunde.js, ZWEI_SPALTEN_AB), damit
   es auch mit aufgeklappter Kundenliste passt. */
.arbeitsbereich:has(.akte-zwei) { max-width: 1680px; }
.akte-zwei { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: var(--r5); align-items: start; }
.akte-links { min-width: 0; }
.akte-links > .akte-kopf { margin-bottom: var(--r3); }
.akte-flaeche > .jf-ki { margin-bottom: var(--r4); }
.akte-flaeche > .jf-ki + .jf-ki { margin-top: calc(var(--r2) * -1); }

.akte-eckdaten-block { display: grid; gap: 2px; margin-top: 4px; }
.akte-eckdaten { margin-top: 0; gap: 2px 0; font-size: 13px; align-items: center; }
.akte-eckdaten > * { white-space: nowrap; }
.akte-eckdaten > *:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--text-leise); display: inline-block; }
.akte-eckdaten a { color: var(--text-weich); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 2px; }
.akte-eckdaten a:hover { color: var(--akzent-text); text-decoration-color: currentColor; }
.akte-ansprech { color: var(--text); font-weight: 600; }
.akte-fehlt { font-style: italic; }

.akte-bereiche { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--r4); }
.akte-bereich-knopf {
  appearance: none; border: 0; font: inherit; cursor: pointer; color: var(--text-weich);
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px;
  font-size: 13px; font-weight: 600; border-radius: 9px; background: var(--flaeche);
  box-shadow: var(--schatten-karte), 0 0 0 1px var(--linie-zart); transition: background .15s, box-shadow .15s, color .15s;
}
.akte-bereich-knopf svg { color: var(--akzent); flex: none; }
.akte-bereich-knopf .reiter-zahl { margin-left: 0; font-size: 11.5px; }
.akte-bereich-knopf:hover { color: var(--text); background: var(--flaeche-aktiv); }
.akte-bereich-knopf[aria-pressed="true"] { color: var(--text); background: var(--flaeche-aktiv); box-shadow: 0 0 0 1.5px var(--akzent); }
.akte-bereich-knopf:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: 2px; }
.akte-bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--r2); flex-wrap: wrap; padding-bottom: var(--r3); margin-bottom: var(--r4); border-bottom: 1px solid var(--linie); }
.akte-bereich-kopf h3 { display: flex; align-items: center; gap: var(--r2); font-size: 16px; margin: 0; }
.akte-bereich-kopf h3 svg { color: var(--akzent); }
.akte-bereich-kopf .knopf { display: inline-flex; align-items: center; gap: 4px; }

/* Rechte Spalte: steht beim Scrollen der Seite, scrollt in sich. */
.akte-rechts {
  position: sticky; top: calc(var(--kopf-hoehe) + var(--r4));
  height: calc(100vh - var(--kopf-hoehe) - var(--r4) * 2);
  height: calc(100dvh - var(--kopf-hoehe) - var(--r4) * 2);
  min-height: 460px; min-width: 0; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.akte-rechts-kopf { flex: none; padding: var(--r1) var(--r3) 0; border-bottom: 1px solid var(--linie-zart); background: var(--flaeche); position: relative; z-index: 3; }
.akte-rechts-kopf .reiter { margin: 0; border-bottom: 0; gap: 0 2px; }
.akte-rechts-kopf .reiter-knopf { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 10px 8px; }
.akte-rechts-kopf .reiter-knopf svg { opacity: .7; flex: none; }
.akte-rechts-kopf .reiter-knopf[aria-selected="true"] svg { color: var(--akzent); opacity: 1; }
.akte-rechts-kopf .reiter-zahl { margin-left: 0; }
.akte-rechts-koerper { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--r3) var(--r4) var(--r5); }
.akte-rechts-koerper .abschnitt:last-child { margin-bottom: 0; }

/* Reiter, die nicht passen, unter "Mehr". */
.akte-reiter-mehr { flex-wrap: nowrap; position: relative; min-width: 0; }
.akte-reiter-mehr .reiter-knopf { flex: none; }
.akte-reiter-mehr .reiter-knopf[hidden] { display: none; }
.akte-mehr { position: relative; flex: none; margin-left: auto; }
.akte-mehr[hidden] { display: none; }
.akte-mehr > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.akte-mehr > summary::-webkit-details-marker { display: none; }
.akte-mehr > summary svg { transform: rotate(90deg); transition: transform .15s; }
.akte-mehr[open] > summary svg { transform: rotate(-90deg); }
.akte-mehr-liste {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 240px;
  display: grid; padding: 6px; border-radius: var(--rad); background: var(--flaeche);
  box-shadow: var(--schatten-schwebe), 0 0 0 1px var(--linie);
}
.akte-mehr-punkt {
  appearance: none; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-weich);
  display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.akte-mehr-punkt:hover { background: var(--flaeche-hover); color: var(--text); }
.akte-mehr-punkt.ist-gewaehlt { background: var(--flaeche-aktiv); color: var(--text); }
.akte-mehr-punkt .reiter-zahl { margin-left: auto; }
.akte-mehr-punkt svg { color: var(--akzent); }

/* Verlauf in der rechten Spalte: ohne eigenen Kasten (die Spalte scrollt),
   Filter und Suche rasten oben ein. */
.akte-rechts .verlauf-kasten { max-height: none; overflow: visible; padding: var(--r3) 0 0; background: none; box-shadow: none; border-radius: 0; }
.verlauf-steuerung { display: grid; gap: var(--r3); min-width: 0; }
.akte-rechts .verlauf-steuerung { position: sticky; top: calc(var(--r3) * -1); z-index: 2; gap: var(--r2); background: var(--flaeche); padding: var(--r2) 0; border-bottom: 1px solid var(--linie-zart); }
.akte-rechts .verlauf-kunde .feld-hinweis { display: none; }
.akte-rechts .verlauf-filter { display: flex; width: 100%; }
.akte-rechts .verlauf-filter .segment-knopf { flex: 1 1 auto; padding: 0 4px; font-size: 12.5px; min-height: 30px; }
.verlauf-kasten.verlauf { grid-template-columns: minmax(0, 1fr); }
.verlauf-kasten .verlauf-koerper { grid-template-columns: minmax(0, 1fr); }
.akte-rechts .verlauf-ansicht { display: grid; gap: var(--r3); }
.akte-rechts .verlauf-form { padding: var(--r3); gap: var(--r2); }
.akte-rechts .verlauf-form textarea { min-height: 64px; height: 64px; resize: vertical; }
.akte-rechts .verlauf-form:focus-within textarea { height: 110px; }
.akte-rechts .verlauf-erklaerung { display: none; }

/* Einspaltig (schmal, Fenster): die Reiterleiste rastet oben ein. */
.akte > .reiter, .akte-fenster-inhalt > .reiter { position: sticky; top: var(--kopf-hoehe); z-index: 4; background: var(--grund); padding-top: var(--r1); }
.akte-fenster-inhalt > .reiter { top: calc(var(--r5) * -1); }
@media (width <= 760px) { .akte > .reiter, .akte-fenster-inhalt > .reiter { position: static; } }

/* Zwei Spalten: in den Spalten nur senkrecht scrollen, nie waagerecht
   (Mien 06.11.2026). Alles bricht um oder wird gekürzt. */
.akte-links, .akte-rechts-koerper { overflow-wrap: anywhere; }
.akte-rechts-koerper { overflow-x: clip; }
.akte-zwei .abschnitt, .akte-zwei .verlauf-bereich, .akte-zwei .verlauf-ansicht, .akte-zwei .ek-aufklapp, .akte-zwei .ek-inhalt,
.akte-zwei .reiter-inhalt, .akte-zwei .ueberblick, .akte-zwei .akte-flaeche, .akte-zwei .akte-bereich { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.akte-zwei .abschnitt-kopf, .akte-zwei .verlauf-kopf, .akte-zwei .knopf-reihe, .akte-zwei .verlauf-suche, .akte-zwei .verlauf-form-kopf { flex-wrap: wrap; }
.akte-zwei .abschnitt-kopf > *, .akte-zwei .verlauf-kopf > *, .akte-zwei .knopf-reihe > * { min-width: 0; }
.akte-zwei .verlauf-kopf .abzeichen { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akte-zwei .verlauf-vorschau { max-width: 100%; }
.akte-zwei .knopf { max-width: 100%; }
.akte-rechts .verlauf-filter { flex-wrap: wrap; }
.akte-zwei .stammdaten-zeile, .akte-zwei .akte-kennzeichen, .akte-zwei .akte-titel-zeile { flex-wrap: wrap; }
.akte-zwei .stammdaten-zeile > * { min-width: 0; }
.akte-rechts .verlauf-suche .feld { flex: 1 1 160px; }
.akte-rechts-koerper { font-size: 14px; }

/* Bewertungsmotor in Einrichten & Anfordern (Mien 06.11.2026) */
.motoren-zeilen { display: contents; }
.motor-zugang { display: block; overflow-wrap: anywhere; margin-top: 2px; }
.motor-zugang code { font-size: 12.5px; }
.motor-pausiert { color: var(--warnung-text); font-weight: 600; }

/* Einrichten & Anfordern kompakt (Mien 06.11.2026): Text bekommt die Breite,
   Knöpfe rechts daneben oder, wenn der Platz fehlt, in einer zweiten Zeile. */
.einr-ansicht .einr-gruppe { margin-top: var(--r4); }
.einr-ansicht .einr-gruppe .abschnitt-kopf { margin-bottom: var(--r2); }
.einr-karte.stammdaten-abschnitt { margin-top: 0; padding: var(--r1) var(--r4); }
.einr-karte > .einr-rahmen, .einr-karte > .motoren-zeilen { display: contents; }
.einr-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--r3); padding: 10px 0; }
.einr-karte .einr-zeile { border-top: 1px solid var(--linie-zart); }
.einr-karte > .einr-zeile:first-child { border-top: 0; }
.akte-zwei .einr-zeile > * { min-width: 0; }
.einr-text { flex: 1 1 240px; min-width: 0; display: grid; gap: 1px; }
.einr-text strong { font-size: 14.5px; }
.einr-info { overflow-wrap: anywhere; }
.einr-info[title] { cursor: help; }
.einr-dezent { color: var(--text-weich); font-style: italic; }
.einr-knoepfe { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.einr-unten { flex: 1 1 100%; min-width: 0; }
.einr-unten:empty, .einr-unten:has(> .einr-status:empty) { display: none; }
.einr-status { margin: 0; }
.einr-aufklapp > summary { font-size: 13px; }
.einr-aufklapp .feld { margin-top: var(--r2); }
.einr-menue-liste { left: auto; right: 0; }
.einr-karte:has(.einr-menue[open]) { overflow: visible; }
.motor-pin { font-variant-numeric: tabular-nums; }

/* Mien 09.11.2026: wer das To-do angelegt hat, unten im Fenster und im Jourfixe sichtbar */
.af-verlauf { display: grid; gap: 6px; padding: var(--r3) var(--r4); border-top: 1px solid var(--linie, rgba(127,127,127,.25)); }
.af-verlauf-titel { font-size: 12.5px; font-weight: 600; color: var(--text-leise); }
.jfd-angelegt { margin: 0; }

/* Mien 09.11.2026: Projekt-Übersicht (erst einmal BEG-Wachstum) */
.pu-titel-knopf { all: unset; cursor: pointer; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--text-leise); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pu-titel-knopf:hover, .pu-titel-knopf:focus-visible { color: var(--akzent); text-decoration-color: var(--akzent); }
.pu-aufklapper { border-top: 1px solid var(--linie-zart); padding-top: var(--r2); }
.pu-aufklapper > summary { cursor: pointer; font-size: 13px; color: var(--text-weich); }
.pu-aufklapp-inhalt { display: grid; gap: var(--r2); padding-top: var(--r2); }
.pu-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pu-links li { display: grid; min-width: 0; font-size: 13.5px; }
.pu-links a { overflow-wrap: anywhere; }
.pu { display: grid; gap: var(--r4); }
.pu-briefing { margin: 0; color: var(--text-weich); }
.pu-teil { display: grid; gap: var(--r2); }
.pu-teil h4 { margin: 0; font-size: 14px; }
.pu-teil > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.pu-aufgaben { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pu-aufgabe { display: grid; gap: 2px; width: 100%; text-align: left; padding: var(--r2) var(--r3); border: 1px solid var(--linie-zart); border-radius: var(--rad-s); background: var(--flaeche, transparent); color: inherit; font: inherit; cursor: pointer; }
.pu-aufgabe:hover { border-color: var(--akzent); }
.pu-aufgabe.ist-erledigt strong { text-decoration: line-through; color: var(--text-weich); }
.pu-verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); max-height: 360px; overflow-y: auto; }
.pu-verlauf-text { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 13.5px; }

/* WhatsApp im Postfach und in der Akte (Ticketsystem Stufe 1, 09.11.2026) */
.postfach-bereiche-leiste { margin-bottom: var(--r3); }
.wa-verlauf { list-style: none; margin: var(--r3) 0 0; padding: var(--r3); display: flex; flex-direction: column; gap: var(--r2); max-height: min(70vh, 820px); overflow-y: auto; overscroll-behavior: contain; background: var(--flaeche-versenkt); border-radius: var(--rad-s); }
.wa-akte .wa-verlauf { margin: 0; }
.wa-tag { align-self: center; padding: 2px var(--r3); border-radius: 999px; background: var(--flaeche); color: var(--text-leise); font-size: .78rem; box-shadow: 0 0 0 1px var(--linie-zart); }
.wa-gruppe-name { font-weight: 600; }
.wa-blase { display: grid; gap: 4px; max-width: min(78%, 560px); padding: var(--r2) var(--r3); border-radius: 10px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie-zart); overflow-wrap: anywhere; }
.wa-ein { align-self: flex-start; border-top-left-radius: 2px; }
.wa-aus { align-self: flex-end; border-top-right-radius: 2px; background: var(--erfolg-bg); }
.wa-autor { font-weight: 600; color: var(--text-weich); }
.wa-text { margin: 0; white-space: pre-wrap; }
.wa-zeit { justify-self: end; }
.wa-audio { width: min(300px, 100%); }
.wa-bild { display: block; max-width: 100%; max-height: 320px; border-radius: 6px; }
.wa-video { max-width: 100%; max-height: 320px; border-radius: 6px; }
.wa-beschreibung, .wa-abschrift p { margin: 0; }
.wa-abschrift summary { cursor: pointer; color: var(--akzent-text); font-size: .85rem; }
.wa-abschrift p { padding-top: 4px; white-space: pre-wrap; }
.wa-datei { display: inline-flex; gap: 6px; align-items: center; }
.auswahl-liste { display: grid; gap: var(--r2); margin: var(--r3) 0; }
.auswahl-zeile { display: flex; gap: var(--r3); align-items: flex-start; padding: var(--r3); border-radius: var(--rad-s); box-shadow: 0 0 0 1px var(--linie-zart); cursor: pointer; }
.auswahl-zeile:has(input:checked) { box-shadow: 0 0 0 2px var(--ov-orange); }
@media (max-width: 600px) { .wa-blase { max-width: 92%; } }

/* =============================================================== Anfragen
   Ticketsystem Stufe 2 (Mien 09.11.2026): Liste, Kanban, eine Anfrage
   zweispaltig, Themenfarben über --thema. */
.an-liste { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.an-liste > li + li { border-top: 1px solid var(--linie-zart); }
.an-zeile { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto 64px 28px; gap: var(--r3); align-items: center; width: 100%; padding: var(--r3) var(--r4); border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.an-zeile:hover { background: var(--flaeche-hover); }
.an-zeile:focus-visible, .an-karte:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: -2px; }
.an-erledigt .an-titel { color: var(--text-leise); font-weight: 500; }
.an-haupt { display: grid; gap: 2px; min-width: 0; }
.an-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.an-unter { display: flex; gap: var(--r3); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.an-marken { display: flex; gap: var(--r2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.an-warte { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-kanal { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--flaeche-versenkt); color: var(--text-leise); vertical-align: middle; }
.an-kanal-whatsapp { color: #25a35a; }
.an-thema { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--thema) 14%, transparent); color: var(--text); white-space: nowrap; }
.an-thema::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--thema); }
.an-person { display: inline-flex; justify-content: flex-end; }
.an-person-leer { font-size: 12px; }
.an-kanban-huelle { display: grid; gap: var(--r3); overflow-x: auto; }
.an-kanban { min-height: 360px; }
.an-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); align-content: start; }
.an-karte { display: grid; gap: 6px; width: 100%; padding: var(--r3); border: 0; font: inherit; color: inherit; text-align: left; cursor: grab; }
.an-karte .an-titel { white-space: normal; }
.an-karte-kopf, .an-karte-fuss { display: flex; align-items: center; gap: var(--r2); min-width: 0; }
.an-karte-kopf .an-warte, .an-karte-fuss .an-person { margin-left: auto; }
.an-herkunft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.an-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--r4); align-items: center; margin-bottom: var(--r4); }
.an-kopf-titel h2 { margin: 2px 0 0; overflow-wrap: anywhere; }
.an-kopf-titel p { margin: 0; display: flex; align-items: center; gap: 4px; }
.an-kopf .jf-aktionen { display: flex; align-items: center; gap: var(--r2); }
.an-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--r4); align-items: start; }
.an-verlauf { padding: var(--r4); min-width: 0; display: grid; gap: var(--r3); }
.an-verlauf .wa-verlauf { margin: 0; }
.wa-fremd { opacity: .45; }
.wa-start { background: var(--ov-orange); color: #fff; box-shadow: none; }
.an-mails { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); max-height: min(70vh, 820px); overflow-y: auto; }
.an-mail { display: grid; gap: 4px; padding: var(--r3); border-radius: var(--rad-s); box-shadow: 0 0 0 1px var(--linie-zart); }
.an-mail-aus { background: var(--flaeche-versenkt); margin-left: var(--r5, 32px); }
.an-fremd { opacity: .5; }
.an-mail-kopf { display: flex; justify-content: space-between; gap: var(--r3); }
.an-mail p { margin: 0; }
.an-mail-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.an-antwort { display: flex; gap: var(--r3); align-items: center; flex-wrap: wrap; padding-top: var(--r3); border-top: 1px solid var(--linie-zart); }
.an-antwort p { margin: 0; flex: 1 1 260px; }
.an-seite { display: grid; gap: var(--r3); min-width: 0; }
.an-block { padding: var(--r4); display: grid; gap: var(--r3); }
.an-block p, .an-block h4 { margin: 0; }
.an-block-titel { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.an-eigenschaft { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--r3); align-items: center; }
.an-fakten { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px var(--r3); margin: 0; }
.an-fakten dd { margin: 0; overflow-wrap: anywhere; }
.an-historie { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); max-height: 320px; overflow-y: auto; }
.an-historie-zeit { display: block; font-size: 12px; }
.an-themen-liste { list-style: none; margin: var(--r3) 0; padding: 0; display: grid; gap: var(--r2); }
.an-themen-liste li { display: flex; align-items: center; gap: var(--r3); }
.an-themen-liste li .knopf { margin-left: auto; }
.feld-stapel { display: grid; gap: var(--r3); }
.an-farben { display: flex; gap: var(--r2); flex-wrap: wrap; }
.an-farbe { position: relative; cursor: pointer; }
.an-farbe input { position: absolute; opacity: 0; }
.an-farbe span { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--thema); }
.an-farbe input:checked + span { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--thema); }
.an-farbe input:focus-visible + span { outline: 2px solid var(--fokus-kante); outline-offset: 3px; }
@media (max-width: 900px) {
  .an-raster { grid-template-columns: minmax(0, 1fr); }
  .an-kopf { grid-template-columns: minmax(0, 1fr); }
  .an-zeile { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .an-zeile .an-nummer, .an-zeile .an-marken { display: none; }
}

/* Bereiche (Mien 10.11.2026): Umschalter wie Slack-Workspaces, Verwaltung */
.bereiche-umschalter {
  display: grid; gap: 2px; padding-bottom: var(--r2); margin-bottom: var(--r2);
  border-bottom: 1px solid var(--leiste-linie);
}
.bereich-link {
  display: flex; align-items: center; gap: var(--r3);
  min-height: 34px; padding: 0 var(--r3); border-radius: var(--rad-s);
  color: var(--leiste-leise); font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.bereich-link:hover { background: var(--leiste-hover); color: var(--leiste-text); text-decoration: none; }
.bereich-link.aktiv { color: #fff; }
.bereich-link:focus-visible { outline: 2px solid var(--ov-orange); outline-offset: -2px; }
.bereich-kuerzel {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px;
  background: rgba(255, 255, 255, .1); color: inherit; font-size: 11.5px; font-weight: 700;
}
.bereich-link.aktiv .bereich-kuerzel { background: var(--ov-orange); color: var(--ov-schwarz); }
.leiste-marke.ist-bereich .leiste-marke-zusatz { padding-left: 0; border-left: 0; font-size: 13px; letter-spacing: .08em; }
.eigene-einstellungen { display: grid; gap: var(--r4); }
.eigene-einstellungen-karte { display: grid; gap: var(--r4); max-width: 560px; }
.bereiche-karte { display: grid; gap: var(--r3); margin-bottom: var(--r4); }
.bereiche-karte h3 { margin: 0; }
.bereiche-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.bereich-zeile, .mitglied-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--r3);
  padding: var(--r2) 0; border-top: 1px solid var(--linie);
}
.bereich-zeile:first-child, .mitglied-zeile:first-child { border-top: 0; }
.bereiche-karte .bereich-kuerzel { width: 32px; height: 32px; border-radius: 8px; background: var(--flaeche-versenkt); }
.bereich-zeile.ist-offen .bereich-kuerzel { background: var(--ov-orange); color: var(--ov-schwarz); }
.bereich-zeile-text { min-width: 0; display: grid; }
.bereich-zeile-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }