/* Arbeitsplatz — ruhig, monochrom, hell + dunkel (Stefan 15./16.10.2026).
   Keine Emojis, nur Linien-Icons; eine Akzentfarbe nur für „neu" und das Aktive; Kalenderfarben als kleine Punkte.
   Klickbarer Text statt Knöpfe (Fläche erst beim Überfahren); echte Knöpfe nur für die Hauptaktion.
   Raster: Gespräch | Kontextleiste · Inhalt · Rand. Bewegung: 3 Dauern, 2 Federkurven, Richtung (BAUPLAN). */

:root {
  /* Farben */
  --bg: #f5f5f3;
  --flaeche: #ffffff;
  --flaeche-2: #efefec;
  --aufgabe: #d98a80;   /* Aufgaben in der Tagesleiste: sanftes Rötlich (21.10.2026) */
  --blase-cali: var(--flaeche);          /* Calis Sprechblase: die helle Fläche, ohne Rahmen */
  --cali: var(--akzent);                 /* Calis Farbe (Empfänger-Chip) */
  --claude: #c2643f;                     /* Claudes Farbe: warm, gedämpft (Chip, Blase) */
  --hover: rgba(20, 20, 30, 0.045);
  --linie: #e4e4e0;
  --text: #1c1c1e;
  --text-2: #5d5d63;
  --text-3: #8d8d93;
  --akzent: #2f6fd6;
  --akzent-zart: rgba(47, 111, 214, 0.10);
  --gut: #3f9b6e;          /* nur Zustände im Protokoll */
  --schlecht: #c5533f;
  --schatten: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
  --auf-akzent: #ffffff;                 /* Schrift auf Akzentfläche */
  --haupt-bg: var(--text); --haupt-text: var(--bg);           /* echte Hauptaktion */
  --meldung-bg: var(--text); --meldung-text: var(--bg); --meldung-kante: none; --meldung-aktion: color-mix(in srgb, var(--bg) 70%, var(--akzent));
  --fett: 600; --titel-fett: 620;        /* im Dunkeln eine halbe Stufe leichter (helle Schrift wirkt dicker) */
  /* Form */
  --rund: 12px;
  --rund-klein: 8px;
  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Inter", "Cantarell", "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "DejaVu Sans Mono", monospace;
  /* Raster */
  --breite-gespraech: 340px;
  --breite-leiste: 196px;
  --rand: clamp(20px, 3.2vw, 56px);
  /* Lesebreite: FESTE Länge (rem = Grundschrift des Browsers), für alle Elemente gleich (04.11.2026). Vorher 70ch — ch ist die
     Zeichenbreite der EIGENEN Schrift jedes Elements: Mailtext (15,5 px) 690 px, Antwortfeld (15 px) 668 px, Kopfzeilen 601 px.
     Beim Scrollen schauten darum rechts neben dem klebenden Antwortfeld die letzten Buchstaben der Mail durch. 43rem ≈ der
     bisherige Mailtext, der Fließtext bleibt also, wie er war. */
  --lesebreite: 43rem;
  /* Bewegung: drei Dauern, zwei Kurven (Feder aus gedämpfter Schwingung berechnet, 0,5 % bzw. 8 % Überschwingen) */
  --kurz: 120ms;
  --mittel: 260ms;
  --lang: 380ms;
  --feder: linear(0, 0.0464, 0.1533, 0.2851, 0.4196, 0.5444, 0.653, 0.7434, 0.8159, 0.8722, 0.9147, 0.9458, 0.9678, 0.9829, 0.9928, 0.999, 1.0026, 1.0044, 1.005, 1.0049, 1.0045, 1.0038, 1.0031, 1.0025, 1);
  --feder-knopf: linear(0, 0.0885, 0.2853, 0.5112, 0.717, 0.8783, 0.9886, 1.0524, 1.0798, 1.0823, 1.0704, 1.0524, 1.0338, 1.0179, 1.0061, 0.9985, 0.9944, 0.9931, 0.9934, 0.9947, 0.9962, 0.9977, 0.9989, 0.9998, 1);
  --raus: cubic-bezier(.4, 0, 1, 1);
  --sanft: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.23 0.008 264); --flaeche: oklch(0.272 0.010 262); --flaeche-2: oklch(0.305 0.012 262);
    --hover: oklch(1 0 0 / 0.045); --linie: oklch(0.33 0.012 262);
    --claude: oklch(0.72 0.11 45);
    --text: oklch(0.89 0.004 265); --text-2: oklch(0.73 0.009 265); --text-3: oklch(0.61 0.013 262);
    --akzent: oklch(0.74 0.095 258); --akzent-zart: oklch(0.74 0.095 258 / 0.14); --gut: oklch(0.72 0.09 160); --schlecht: oklch(0.70 0.11 35);
    /* Kühles Blaugrau (Ton 264) wie die klassische Ansicht — warm kippte ins Braune (Stefan 16.10.); Höhe = hellere Fläche + Lichtkante */
    --schatten: 0 0 0 1px oklch(1 0 0 / 0.045), 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 12px 32px oklch(0 0 0 / 0.32);
    --auf-akzent: oklch(0.2 0.01 258);
    --haupt-bg: oklch(0.83 0.006 264); --haupt-text: oklch(0.2 0.008 264);
    --meldung-bg: oklch(0.33 0.012 262); --meldung-text: var(--text); --meldung-kante: 0 0 0 1px oklch(1 0 0 / 0.06), 0 12px 32px oklch(0 0 0 / 0.4);
    --fett: 560; --titel-fett: 580; --meldung-aktion: var(--akzent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: oklch(0.23 0.008 264); --flaeche: oklch(0.272 0.010 262); --flaeche-2: oklch(0.305 0.012 262);
  --hover: oklch(1 0 0 / 0.045); --linie: oklch(0.33 0.012 262);
  --claude: oklch(0.72 0.11 45);
  --text: oklch(0.89 0.004 265); --text-2: oklch(0.73 0.009 265); --text-3: oklch(0.61 0.013 262);
  --akzent: oklch(0.74 0.095 258); --akzent-zart: oklch(0.74 0.095 258 / 0.14); --gut: oklch(0.72 0.09 160); --schlecht: oklch(0.70 0.11 35);
  /* Kühles Blaugrau (Ton 264) wie die klassische Ansicht — warm kippte ins Braune (Stefan 16.10.); Höhe = hellere Fläche + Lichtkante */
  --schatten: 0 0 0 1px oklch(1 0 0 / 0.045), 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 12px 32px oklch(0 0 0 / 0.32);
  --auf-akzent: oklch(0.2 0.01 258);
  --haupt-bg: oklch(0.83 0.006 264); --haupt-text: oklch(0.2 0.008 264);
  --meldung-bg: oklch(0.33 0.012 262); --meldung-text: var(--text); --meldung-kante: 0 0 0 1px oklch(1 0 0 / 0.06), 0 12px 32px oklch(0 0 0 / 0.4);
  --fett: 560; --titel-fett: 580; --meldung-aktion: var(--akzent);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--schrift); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }
svg.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
svg.ic.klein { width: 15px; height: 15px; }
svg.ic.kanal { color: var(--text-3); }

/* ── Bedienelemente ────────────────────────────────────
   Alles Klickbare gibt beim Drücken minimal nach und federt zurück — spürbar, nie verspielt. */
.tk, .zeile-e, .kl-e, .anzeiger, .abschnitt, .m-kopf, .monat .tag {
  transition: background-color var(--kurz) ease, color var(--kurz) ease, box-shadow var(--mittel) var(--sanft), transform var(--lang) var(--feder-knopf);
}
.tk:active, .zeile-e:active, .kl-e:active, .anzeiger:active, .abschnitt:active, .m-kopf:active, .monat .tag:active {
  transform: scale(.98); transition-duration: 70ms;
}
/* klickbarer Text: Fläche erst beim Überfahren */
.tk { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 0; border-radius: var(--rund-klein); background: transparent; color: var(--text-2); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.tk:hover { background: var(--hover); color: var(--text); }
.tk.aktiv { color: var(--akzent); }
.tk-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tk-icon { padding: 7px; }
.tk.unsichtbar { visibility: hidden; }
/* die EINE Hauptaktion einer Ansicht */
.tk.haupt { background: var(--haupt-bg); color: var(--haupt-text); padding: 7px 14px; font-weight: 500; }
.tk.haupt:hover { background: color-mix(in srgb, var(--haupt-bg) 86%, var(--akzent)); color: var(--haupt-text); }

/* ── Gerüst ─────────────────────────────────────────── */
.ap { display: grid; grid-template-columns: var(--breite-gespraech) 1fr; height: 100vh; height: 100dvh; }
.gespraech { display: flex; flex-direction: column; border-right: 1px solid var(--linie); background: var(--bg); min-height: 0; }
.buehne { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ── Gespräch links ─────────────────────────────────── */
.verlauf { flex: 1; overflow-y: auto; padding: 22px 18px 8px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
/* Sprechblasen (19.10.2026, Stefan: „minimalistisch, wie meine", Stand der Technik recherchiert): beide Seiten als leise
   Blase — Stefan rechts auf der grauen Fläche, Cali links auf der hellen; kein Rahmen, kein Schatten, keine Köpfe, keine
   Namen. Die Ecke zur eigenen Seite ist kleiner (verankert). Knöpfe als Chips UNTER der Blase. Was vorbei ist
   (beantwortete Frage, erledigter Schritt), tritt auf eine blasse Zeile zurück; Systemhinweise ohne Blase.
   Luft: zwischen zwei Zügen derselben Seite eng, beim Sprecherwechsel mehr. */
.verlauf { gap: 6px; }
.zug { max-width: 86%; font-size: 14px; line-height: 1.5; padding: 8px 13px; animation: rein var(--mittel) var(--feder) both; overflow-wrap: anywhere; }
.zug.wechsel { margin-top: 10px; }
.zug.ich { align-self: flex-end; background: var(--flaeche-2); border-radius: 18px 18px 6px 18px; }
/* Suche und Befehl (28.10.2026): keine Nachricht an Cali — leise Zeile rechts ohne Blase, die Suche mit Lupe */
.zug.ich.kurz { background: none; color: var(--text-3); font-size: 13px; padding: 0 4px; display: flex; align-items: center; gap: 5px; }
.zug.ich.suche::before { content: ''; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM15.3 15.3L20 20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM15.3 15.3L20 20'/%3E%3C/svg%3E") center / contain no-repeat; }
.zug.cali { align-self: flex-start; color: var(--text); background: var(--blase-cali); border-radius: 18px 18px 18px 6px; }
.zug.claude { align-self: flex-start; color: var(--text); background: color-mix(in srgb, var(--claude) 9%, var(--flaeche)); border-radius: 18px 18px 18px 6px; }
.zug.claude.freigabe { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--claude) 35%, transparent); }
.zug.claude.denkt { color: var(--text-2); }
/* Stand je Werkzeug (Harness E5): grau, ohne Rahmen — läuft mit Punkten, fertig blass mit Haken */
.staende { display: grid; gap: 3px; margin-top: 2px; }
.stand { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.stand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand.fertig { color: var(--text-3); }
.stand.fertig .stand-text::before { content: "✓ "; }
.stand.fehler { color: var(--text-3); }
.schritte { margin: 2px 0 0 2px; font-size: 12.5px; color: var(--text-3); }
.schritte summary { cursor: pointer; list-style: none; }
.schritte summary::-webkit-details-marker { display: none; }
.schritte summary::before { content: "▸ "; }
.schritte[open] summary::before { content: "▾ "; }
.schritte ol { margin: 4px 0 2px; padding-left: 20px; display: grid; gap: 2px; }
.schritte li.fehler { text-decoration: line-through; }
.zug.claude .punkte i { background: var(--claude); opacity: .7; }
.lesetext p { margin: 0; } .lesetext p + p, .lesetext ul + p, .lesetext ol + p { margin-top: 10px; }
.lesetext p + ul, .lesetext p + ol { margin-top: 3px; }   /* „WhatsApp:" und die Punkte darunter gehören zusammen */
.lesetext ul, .lesetext ol { margin: 0; padding-left: 18px; } .lesetext li + li { margin-top: 2px; }
.lesetext .lt-titel, .lesetext .lt-ueber { font-weight: var(--fett); }
.lesetext code { font-family: var(--mono); font-size: 12.5px; background: color-mix(in srgb, var(--text) 7%, transparent); padding: 0 4px; border-radius: 4px; }
.lesetext pre { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.zug.system { align-self: flex-start; color: var(--text-3); font-size: 12.5px; padding: 0 4px; }
.zug.vorbei { color: var(--text-3); background: transparent; padding: 0 4px; font-size: 13px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--kurz); }
.zug.vorbei .zug-text { white-space: inherit; }
.zug.vorbei:hover, .zug.vorbei:focus-within { white-space: normal; color: var(--text-2); }
.zug.cali.denkt { padding: 11px 14px; }
.punkte { display: inline-flex; gap: 4px; }
.punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: tippen 1.2s ease-in-out infinite; }
.punkte i:nth-child(2) { animation-delay: .15s; } .punkte i:nth-child(3) { animation-delay: .3s; }
.zug-knoepfe { align-self: flex-start; margin: 2px 0 2px 2px; }
.zug-text { all: unset; cursor: pointer; line-height: 1.5; }
.zug-text:hover { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.zug-text:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
.zug-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.zug-k { min-height: 30px; padding: 0 13px; border: 0; border-radius: 15px; background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.zug-k:hover { background: color-mix(in srgb, var(--flaeche-2) 80%, var(--text-3)); }
.zug-k.haupt { background: var(--haupt-bg); color: var(--haupt-text); }
/* Plan (E4): eine Karte mit Schritten — grau, ohne Rahmen; abgewählt = durchgestrichen und blass */
.plan-kopf { margin: 0 0 4px; color: var(--text-2); font-size: 13px; }
.plan-schritte { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.plan-s { all: unset; cursor: pointer; line-height: 1.45; }
.plan-s:hover:not(:disabled) { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.plan-s:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.plan-s.ohne { color: var(--text-3); text-decoration: line-through; }
.plan-s:disabled { cursor: default; }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } }

.befehl { position: relative; padding: 10px 14px 12px; }
.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 4px 6px 4px 10px; box-shadow: var(--schatten); transition: border-color var(--kurz); }
.zeile:focus-within { border-color: color-mix(in srgb, var(--akzent) 55%, var(--linie)); }
.kontext[hidden] { display: none; }
.kontext { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }
/* Chips: Befehl (Akzent), Person (ruhig, mit Symbol), Kanal (Symbol in Kanalfarbe) — entstehen per Tab */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; line-height: 1.3; padding: 3px 8px; border-radius: 7px; white-space: nowrap;
  color: var(--akzent); background: var(--akzent-zart); animation: rein var(--mittel) var(--feder-knopf) both; }
.chip-person, .chip-kanal { color: var(--text); background: var(--flaeche-2); }
/* Empfänger: in der Farbe dessen, an den es geht */
.chip-an { font-weight: 550; }
.chip-an.an-cali { color: var(--cali); background: color-mix(in srgb, var(--cali) 12%, transparent); }
.chip-an.an-claude { color: var(--claude); background: color-mix(in srgb, var(--claude) 13%, transparent); }
.chip svg.ic { width: 13px; height: 13px; color: var(--text-2); }
/* Markierung rechts (markierung.js): der Text, um den es im Auftrag geht */
.chip-markierung { color: var(--text); background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.chip-markierung svg.ic { color: var(--akzent); }
.vorschlaege li .kanaele { display: inline-flex; gap: 3px; color: var(--text-3); }
.vorschlaege li .kanaele svg.ic { width: 13px; height: 13px; }
.feld { position: relative; flex: 1; min-width: 0; }
.feld input, .geist { display: block; width: 100%; padding: 8px 2px; border: 0; background: transparent; font-size: 15px; letter-spacing: normal; white-space: pre; overflow: hidden; }
.feld input { position: relative; z-index: 1; outline: none; }
.feld input::placeholder { color: var(--text-3); }
.geist { position: absolute; inset: 0; color: var(--text-3); pointer-events: none; }
.geist .verdeckt { color: transparent; }
kbd { white-space: nowrap; font: 11px var(--mono); border: 1px solid var(--linie); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--flaeche); color: var(--text-2); }

/* Vorschläge OBERHALB des Feldes, der beste unten direkt am Feld */
.vorschlaege { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 6px); margin: 0; padding: 4px; list-style: none;
  display: flex; flex-direction: column-reverse; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten); transform-origin: bottom center; animation: auf var(--mittel) var(--feder) both; z-index: 5; max-height: 50vh; overflow-y: auto; }
.vorschlaege[hidden] { display: none; }
.vorschlaege li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--rund-klein); cursor: pointer; min-width: 0; transition: background-color var(--kurz); }
.vorschlaege li .haupt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vorschlaege li .neben { margin-left: auto; color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.vorschlaege li.aktiv { background: var(--akzent-zart); }
.vorschlaege li svg.ic { color: var(--text-3); width: 16px; height: 16px; }
@keyframes auf { from { opacity: 0; transform: translateY(6px) scale(.985); } }

/* ── Bühne ──────────────────────────────────────────── */
.buehne-kopf { display: flex; align-items: center; gap: 6px; padding: 12px var(--rand) 0 calc(var(--rand) - 10px); min-height: 54px; }
.pfad { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; font-size: 13px; color: var(--text-3); overflow: hidden; white-space: nowrap; }
.pfad .tk { max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.tastenhilfe { position: relative; }
/* Tastenhilfe (27.10.2026): öffnet beim Überfahren/Fokus, unter dem i rechtsbündig; der obere Innenrand überbrückt den Spalt */
.th-tafel { display: none; position: absolute; right: -6px; top: 100%; z-index: 40; padding-top: 6px; width: min(1000px, calc(100vw - 32px)); }
.tastenhilfe:hover .th-tafel, .tastenhilfe:focus-within .th-tafel { display: block; }
.th-innen { background: var(--flaeche); border-radius: var(--rund); box-shadow: var(--schatten), 0 0 0 1px var(--linie); padding: 14px 18px 16px;
  max-height: min(86vh, 820px); overflow-y: auto; animation: ab var(--mittel) var(--feder) both; }
.th-kopf { margin: 0 0 2px; font-weight: var(--fett); font-size: 13.5px; color: var(--text); }
.th-kopf span { font-weight: 400; color: var(--text-3); font-size: 12.5px; margin-left: 8px; }
.th-spalten { columns: 3 290px; column-gap: 32px; }
.th-gruppe { break-inside: avoid; padding-top: 10px; }
.th-gruppe h3 { margin: 0 0 6px; font-size: 11.5px; font-weight: var(--fett); color: var(--text-3); letter-spacing: .02em; }
.th-gruppe dl { margin: 0; }
.th-zeile { display: grid; grid-template-columns: 9.8em 1fr; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 12.5px; }
.th-zeile dt { margin: 0; }
.th-zeile dd { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.th-taste { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; }
.th-kombi { display: inline-flex; gap: 3px; }
.th-oder { font-size: 11px; color: var(--text-3); }
.pfad .trenner { color: var(--text-3); padding: 0 1px; }
.pfad .jetzt { color: var(--text); padding: 5px 6px; overflow: hidden; text-overflow: ellipsis; }

.fokus { flex: 1; overflow-y: auto; outline: none; scrollbar-width: thin; scrollbar-gutter: stable; }

/* Raster jeder Ansicht: Kontextleiste · Inhalt · Rand */
.ansicht { display: grid; grid-template-columns: var(--breite-leiste) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px);
  padding: 4px var(--rand) 64px; max-width: 1480px; }
.karte { min-width: 0; max-width: 1040px; }
.kontextleiste { position: sticky; top: 0; align-self: start; padding-top: 74px; display: flex; flex-direction: column; gap: 18px; }
.kontextleiste.leer { padding: 0; }
.kl-gruppe { display: flex; flex-direction: column; gap: 1px; }
.kl-titel { margin: 0 0 4px 10px; font-size: 11.5px; font-weight: var(--fett); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.kl-e { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--rund-klein); background: transparent; color: var(--text-2); text-align: left; font-size: 14px; }
.kl-e:hover { background: var(--hover); color: var(--text); }
.kl-e.aktiv { color: var(--text); background: var(--hover); font-weight: 550; }
.kl-e.aus { color: var(--text-3); }
.kl-e.aus .fpunkt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--f, var(--text-3)); }
.kl-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-n { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kl-e.aktiv .kl-n { color: var(--akzent); }

/* Kartenkopf: Titel links, Aktionen immer rechts */
.k-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 12px 0 22px; min-height: 58px; }
.k-titel { min-width: 0; }
.k-titel h1 { margin: 0 0 3px; font-size: 27px; font-weight: var(--titel-fett); letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.k-titel h1 .jahr { color: var(--text-3); font-weight: 400; }
.k-titel .unter { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-3); font-size: 13.5px; }
.k-rechts { display: flex; align-items: center; gap: 2px; }
.karte h2 { font-size: 12px; font-weight: var(--fett); color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; margin: 30px 0 8px; }
.leer { color: var(--text-3); padding: 10px 0; }
.leise { color: var(--text-3) !important; }

/* Grundform Zeile — luftig, Haarlinien statt Kästen */
.zeilen { display: flex; flex-direction: column; }
.zeile-e { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: baseline; gap: 1px 12px; padding: 12px 12px 12px 4px; margin: 0 -12px 0 -4px;
  background: none; border: 0; border-bottom: 1px solid var(--linie); text-align: left; width: calc(100% + 16px); border-radius: var(--rund-klein); }
.zeilen > .zeile-e:last-child { border-bottom-color: transparent; }
.zeile-e[role="button"] { cursor: pointer; }
.zeile-e[role="button"]:hover { background: var(--hover); border-bottom-color: transparent; }
.zeile-e:focus { outline: none; }
.zeile-e[role="button"]:focus-visible:not(.gewaehlt) { outline: 2px solid var(--akzent); outline-offset: -2px; }
.zeile-e.statisch { cursor: default; }
.zeile-e .punkt { width: 7px; height: 7px; border-radius: 50%; align-self: center; justify-self: center; transform: scale(0);
  transition: transform var(--lang) var(--feder-knopf), background-color var(--mittel); }
.zeile-e.neu .punkt { background: var(--f, var(--akzent)); transform: scale(1); }   /* Kontofarbe; gelesen → Punkt schrumpft weich weg */
.zeile-e .wer, .zeile-e .was { transition: color var(--mittel); }
/* Auswahl (↑↓ oder Maus): k / u / Entf wirken auf diese Zeile */
.zeilen > .zeile-e.gewaehlt { background: var(--hover); border-bottom-color: transparent; }
/* breite Zeile: Personenbild statt Punkt (Kontakte, Personen in der Suche) */
.zeile-e.breit { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding-left: 8px; }
.zeile-e.breit .p-bild { grid-row: 1 / span 2; }
.zeile-e.breit .was { font-size: 13.5px; }
.zeile-e .wer { display: inline-flex; align-items: center; gap: 7px; font-weight: 450; min-width: 0; }
.zeile-e .wer-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile-e.neu .wer { font-weight: var(--fett); }
.zeile-e.eigen .wer { color: var(--text-2); }
.zeile-e .wann { color: var(--text-3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Rechte Spalte: [Aktionen][Zeit] — Aktionen nur beim Überfahren/Auswählen, die Zeit bleibt stehen (Mails wie Aufgaben) */
.zeile-e .rechts { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.z-aktionen { display: inline-flex; align-items: center; gap: 0; align-self: center; margin: -8px 0; opacity: 0; pointer-events: none;
  transform: translateX(4px); transition: opacity var(--kurz), transform var(--kurz) var(--feder-knopf, ease); }
.zeile-e:hover .z-aktionen, .zeile-e.gewaehlt:hover .z-aktionen, .zeile-e:focus-within .z-aktionen { opacity: 1; pointer-events: auto; transform: none; }
.z-aktionen .tk { padding: 4px 8px; font-size: 12.5px; color: var(--text-2); }
.z-aktionen .z-knopf { padding: 5px; color: var(--text-3); }
.z-aktionen .tk:hover { color: var(--text); }
@media (hover: none) and (pointer: coarse) { .z-aktionen { opacity: 1; pointer-events: auto; transform: none; } }
.zeile-e .was { grid-column: 2 / 4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.zeile-e .auszug { grid-column: 2 / 4; color: var(--text-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile-e .marke { font-size: 11.5px; color: var(--text-3); font-weight: 400; white-space: nowrap; }

/* Start */
.lage .karte, .ansicht.lage { max-width: 1240px; }
.ansicht.lage { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-inline: auto; }   /* mittig mit Rand statt leerer Seitenleiste; Leiste in einer Zeile (01.11.2026) */
.tage { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 48px; }
.abschnitt { display: inline-block; background: none; border: 0; padding: 4px 8px; margin: 6px 0 4px -8px; border-radius: var(--rund-klein); font-size: 12px; font-weight: var(--fett); color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; }
.abschnitt:hover { color: var(--text); background: var(--hover); }
.termine { display: flex; flex-direction: column; }
.termin { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; align-items: baseline; border-bottom: 1px solid var(--linie); }
.termine > .termin:last-child { border-bottom: 0; }
.termine.gross .termin { padding: 14px 0; }
.termin .zeit { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13.5px; }
.termin .titel { display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 10px; align-items: baseline; overflow: hidden; }
.termin .titel .fpunkt { align-self: center; }
.termin .titel .tt { overflow: hidden; text-overflow: ellipsis; }
.termin .kal { grid-column: 2; font-size: 12px; color: var(--text-3); }
.termin .t-quelle { all: unset; grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); cursor: pointer; }
.termin .t-quelle:hover, .termin .t-quelle:focus-visible { color: var(--text-2); }
.termin.vorbei { opacity: .45; }
.fpunkt { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--f, var(--text-3)); display: inline-block; }
/* Kanäle in der Leiste: das Symbol trägt die Kanalfarbe (WhatsApp blau, Business Ackerguide, Matrix PH) — sonst neutral */
.kl-e.getoent svg.ic { color: var(--f); stroke: var(--f); }
/* Dunkelmodus: Farben einen Hauch zurücknehmen, damit nichts leuchtet */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fpunkt, :root:not([data-theme="light"]) .zeile-e.neu .punkt, :root:not([data-theme="light"]) .m-beitrag.neu .punkt, :root:not([data-theme="light"]) .kl-e.getoent svg.ic { filter: saturate(.85) brightness(1.18); } }
:root[data-theme="dark"] .fpunkt, :root[data-theme="dark"] .zeile-e.neu .punkt, :root[data-theme="dark"] .m-beitrag.neu .punkt, :root[data-theme="dark"] .kl-e.getoent svg.ic { filter: saturate(.85) brightness(1.18); }
.leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 40px; }
.anzeiger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: transparent; border: 1px solid var(--linie); color: var(--text-2); }
.anzeiger:hover { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); border-color: transparent; }
.anzeiger .n { font-weight: var(--fett); font-variant-numeric: tabular-nums; color: var(--text); }
.anzeiger.neu .n { color: var(--akzent); }
.anzeiger .name { font-size: 13.5px; }

/* Mail über die ganze Bühne — Text mit Lesebreite */
.m-ganz { padding-bottom: 8px; }
.m-daraus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -14px 0 24px; font-size: 13px; color: var(--text-3); max-width: var(--lesebreite); }
.m-daraus-etikett { margin-right: 4px; }
.m-daraus-ding { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: var(--flaeche-2); color: var(--text-2); cursor: pointer; }
.m-daraus-ding:hover, .m-daraus-ding:focus-visible { color: var(--text); }
.m-daraus-ding.erledigt { text-decoration: line-through; text-decoration-color: var(--text-3); }
.m-daraus-wann { color: var(--text-3); font-variant-numeric: tabular-nums; }
.m-koerper .m-daraus { margin: 0 0 14px; }
.m-kopfzeilen { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0 0 26px; font-size: 13.5px; color: var(--text-2); max-width: var(--lesebreite); }
.m-kopfzeilen dt { color: var(--text-3); }
.m-kopfzeilen dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.m-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: 15.5px; max-width: var(--lesebreite); }
.laedt .m-text { color: var(--text-3); }
.b-mehr { margin: 14px 0 0 -9px; color: var(--text-3); font-size: 13px; }
.b-rest { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--linie); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; max-width: var(--lesebreite); animation: rein var(--mittel) var(--feder) both; }
.b-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
/* Anhänge inline: PDF-Seiten untereinander, ohne Rahmen/Programmfenster — nur ein Hauch Schatten trennt Seite und Grund */
.anhang-inline { margin: 34px 0 0; max-width: 860px; }
.anhang-inline figcaption { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.anhang-inline.zu figcaption { margin-bottom: 0; }
.anhang-kopf { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 8px 4px 4px; margin-left: -4px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.anhang-kopf:hover { background: var(--hover); color: var(--text); }
.anhang-kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.anhang-pfeil { transform: rotate(90deg); transition: transform .15s ease; }
.anhang-inline.zu .anhang-pfeil { transform: none; }
@media (prefers-reduced-motion: reduce) { .anhang-pfeil { transition: none; } }
.pdf { display: flex; flex-direction: column; gap: 18px; }
.pdf-seite { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 22px rgba(0,0,0,.07); }
.pdf-platz { aspect-ratio: 595 / 842; max-width: 860px; border-radius: 6px; background: var(--flaeche); }
.bild-inline { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.b-anhang { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linie); color: var(--text-2); font-size: 13px; }
.b-anhang .gr { color: var(--text-3); font-size: 12px; }
a.b-anhang { text-decoration: none; cursor: pointer; transition: background var(--kurz), color var(--kurz); }
a.b-anhang:hover { background: var(--hover); color: var(--text); }
a.b-anhang:focus-visible, .anhang-laden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.anhang-laden { margin-left: auto; display: inline-flex; padding: 4px; border-radius: 6px; color: var(--text-3); }
.anhang-laden:hover { background: var(--hover); color: var(--text); }

.m-aelter { margin-top: 40px; padding-left: 24px; max-width: calc(var(--lesebreite) + 120px); }
.m-aelter h2 { margin-left: -24px; }
.m-aelter.danach { margin: 4px 0 36px; }   /* Neueres über der geöffneten Mail (Zeitleiste, neueste oben) */
/* aufgeklappte frühere Mail: dieselben Aktionen wie oben, rechts über dem Text */
.m-aktionen { display: flex; justify-content: flex-end; align-items: center; gap: 2px; margin: 0 0 6px; }
.m-beitrag { border-bottom: 1px solid var(--linie); }
.m-beitrag:last-child { border-bottom: 0; }
.m-kopf { display: grid; grid-template-columns: 12px max-content minmax(0, auto) minmax(0, 1fr) auto; align-items: baseline; gap: 10px; width: calc(100% + 12px);
  margin-left: -6px; padding: 10px 8px 10px 6px; background: none; border: 0; border-radius: var(--rund-klein); text-align: left; }
.m-kopf:hover { background: var(--hover); }
.m-beitrag .punkt { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.m-beitrag.neu .punkt { background: var(--f, var(--akzent)); }
.m-wer { font-weight: 500; white-space: nowrap; }
.m-beitrag.ich .m-wer { color: var(--text-2); }
.m-an { color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.m-vorschau { color: var(--text-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-beitrag.offen .m-vorschau { visibility: hidden; }
.m-koerper { padding: 2px 0 20px 22px; animation: rein var(--mittel) var(--feder) both; }

/* ── Chat: Gegenüber links, Stefan rechts. Kopf + Eingabe stehen, der Verlauf scrollt in sich ── */
.ansicht.chat-k { height: 100%; box-sizing: border-box; padding-bottom: 18px; grid-template-rows: minmax(0, 1fr); }
.chat-k > .karte { display: flex; flex-direction: column; min-height: 0; max-width: 900px; }
.chat-rumpf { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.c-verlauf { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  /* nur senkrecht abschotten: `overscroll-behavior: contain` (beide Richtungen) schluckte über dem Chat die Zurück-Geste
     des Touchpads (zwei Finger seitlich = Verlauf zurück), Stefan 31.10.2026 */
  overscroll-behavior-y: contain;
  margin: 0 -12px; padding: 0 12px; mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.c-anfang { text-align: center; font-size: 12px; color: var(--text-3); min-height: 18px; padding: 14px 0 4px; }
.verlaufs-reihe { display: flex; flex-direction: column; padding-bottom: 10px; }
.tagestrenner { align-self: center; font-size: 12px; color: var(--text-3); margin: 22px 0 8px; letter-spacing: .02em; }
.beitrag { display: flex; flex-direction: column; align-items: flex-start; max-width: min(76%, 620px); margin-top: 10px; }
.beitrag.folge { margin-top: 2px; }
.beitrag.ich { align-self: flex-end; align-items: flex-end; }
.b-von { font-size: 12px; color: var(--text-3); margin: 0 13px 3px; }
.b-zeile { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.beitrag.ich .b-zeile { flex-direction: row-reverse; }
.b-blase { padding: 8px 13px; border-radius: 18px; background: var(--flaeche); white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.5; min-width: 0; transition: background-color var(--mittel), box-shadow var(--mittel); }
.beitrag.ich .b-blase { background: var(--akzent-zart); }
/* Gruppe: die Ecken zur Nachbarnachricht werden enger — eine Gruppe liest sich als Einheit */
.beitrag:not(.ich).folge .b-blase { border-top-left-radius: 6px; }
.beitrag:not(.ich):not(.ende) .b-blase { border-bottom-left-radius: 6px; }
.beitrag.ich.folge .b-blase { border-top-right-radius: 6px; }
.beitrag.ich:not(.ende) .b-blase { border-bottom-right-radius: 6px; }
.b-blase a { color: var(--akzent); text-decoration: none; overflow-wrap: anywhere; }
.b-blase a:hover { text-decoration: underline; }
/* Links in Mail- und Chattext (js/links.js, 04.11.2026): EIN Stil — Akzentfarbe, Ziel leise daneben, Täuschung markiert */
.link { color: var(--akzent); text-decoration: none; overflow-wrap: anywhere; }
.link:hover, .link:focus-visible { text-decoration: underline; }
.link-ziel { margin-left: 5px; font-size: .82em; color: var(--text-3); }
.link.verdaechtig { color: var(--schlecht); text-decoration: underline wavy; text-underline-offset: 3px; }
.b-blase.nur-medium { padding: 4px; background: transparent; }
.beitrag.ich .b-blase.nur-medium { background: transparent; }
.b-weg { color: var(--text-3); font-style: italic; }
.b-zeit { font-size: 11px; color: var(--text-3); margin: 3px 13px 0; font-variant-numeric: tabular-nums; }
.b-zeit .tk { font-size: 11px; padding: 0 4px; }
.b-zeit.gelesen { color: var(--text-2); transition: color var(--mittel); }
.beitrag.ausstehend .b-blase { opacity: .72; }
.beitrag.fehler .b-blase { box-shadow: inset 0 0 0 1px var(--schlecht); }
.beitrag.leuchtet .b-blase { animation: leuchten 1.2s var(--feder) both; }
@keyframes leuchten { 0%, 40% { box-shadow: 0 0 0 3px var(--akzent-zart); } 100% { box-shadow: 0 0 0 3px transparent; } }
.beitrag:last-child:not(.ausstehend) { animation: rein var(--mittel) var(--feder) both; }
/* Antworten: nur beim Überfahren, neben der Blase (wie die Zeilen-Aktionen) */
.b-aktionen { opacity: 0; transition: opacity var(--kurz); flex: 0 0 auto; }
.beitrag:hover .b-aktionen, .b-aktionen:focus-within { opacity: 1; }
.b-aktionen .z-knopf { padding: 5px; color: var(--text-3); }
@media (hover: none) and (pointer: coarse) { .b-aktionen { opacity: 1; } }
/* Zitat über einer Antwort: feine Linie, gedämpft */
.b-zitat { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; text-align: left; background: none; border: 0;
  border-left: 2px solid var(--linie); padding: 1px 0 1px 9px; margin: 2px 0 6px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.beitrag.ich .b-zitat { border-left-color: var(--akzent); }
.bz-von { font-weight: var(--fett); font-size: 12px; }
.bz-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
/* Medien */
.b-bild { display: block; width: fit-content; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; overflow: hidden; max-width: 100%; }
.b-bild img { display: block; max-width: min(320px, 100%); max-height: 360px; width: auto; height: auto; object-fit: cover; border-radius: 14px; background: var(--flaeche-2); }
.b-bild + .b-text { display: block; margin-top: 6px; }
/* Bild mit Unterschrift: die Blase ist so breit wie das Bild */
.b-blase.mit-bild { padding: 4px 4px 8px; width: fit-content; }
.b-blase.mit-bild .b-bild img { max-width: 320px; }
.b-blase.mit-bild .b-text { width: 0; min-width: 100%; padding: 0 9px; box-sizing: border-box; }
.b-video { display: block; max-width: min(360px, 100%); max-height: 360px; border-radius: 14px; background: #000; }
.b-audio { display: block; width: 260px; max-width: 100%; height: 36px; }
.b-datei { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; padding: 2px 0; }
.b-blase a.b-datei { color: var(--text); }
.b-datei:hover .bd-name { text-decoration: underline; }
.bd-gr { color: var(--text-3); font-size: 12px; }
.b-reaktionen { display: flex; gap: 4px; margin: -6px 10px 0; position: relative; }
.b-r { font-size: 12px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--bg); box-shadow: 0 0 0 1px var(--linie); }
.b-r.ich { box-shadow: 0 0 0 1px var(--akzent); }
.b-rn { margin-left: 3px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.b-hinweis { align-self: center; font-size: 12px; color: var(--text-3); margin: 10px 0; max-width: 70%; text-align: center; white-space: pre-wrap; }
.c-gross { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, .72); cursor: zoom-out;
  animation: rein var(--mittel) var(--feder) both; }
.c-gross img { max-width: 92vw; max-height: 92vh; border-radius: 10px; }
/* Eingabe: schlicht, eine Zeile, wächst mit */
.c-schreiben { flex: 0 0 auto; padding-top: 10px; border-top: 1px solid var(--linie); }
.c-antwort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 0 2px 8px; animation: rein var(--kurz) var(--feder) both; }
.ca-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-zeile { display: flex; align-items: flex-end; gap: 10px; }
.c-zeile textarea { flex: 1; resize: none; border: 0; outline: none; background: var(--flaeche); color: var(--text); font: inherit; line-height: 1.5;
  padding: 9px 14px; border-radius: 18px; max-height: 220px; box-shadow: 0 0 0 1px var(--linie); transition: box-shadow var(--kurz); }
.c-zeile textarea:focus { box-shadow: 0 0 0 1px var(--akzent); }
.c-senden { transition: opacity var(--kurz); }
.c-senden:disabled { opacity: .35; pointer-events: none; }
/* ── Smileys, Reaktionen, Bearbeiten/Löschen, „schreibt …" (16.10.) ── */
.c-schreiben { position: relative; }
.c-smiley.aktiv { color: var(--text); }
.smiley-wahl { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: min(352px, 100%); max-height: 340px; display: flex; flex-direction: column;
  background: var(--flaeche); border-radius: 14px; box-shadow: var(--schatten), 0 0 0 1px var(--linie); padding: 10px; gap: 8px; animation: auf var(--mittel) var(--feder) both; }
.sw-suche { font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg); border: 0; border-radius: 9px; padding: 7px 11px; outline: none; box-shadow: 0 0 0 1px var(--linie); }
.sw-suche:focus { box-shadow: 0 0 0 1px var(--akzent); }
.sw-gruppen { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
.sw-gruppen .tk { font-size: 12px; padding: 3px 8px; white-space: nowrap; }
.sw-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; overflow-y: auto; scrollbar-width: thin; min-height: 0; }
.sw-z, .rl-z { font-size: 21px; line-height: 1; padding: 6px 0; background: none; border: 0; border-radius: 8px; cursor: pointer;
  transition: background-color var(--kurz), transform var(--kurz) var(--feder-knopf); }
.sw-z:hover, .rl-z:hover { background: var(--hover); transform: scale(1.12); }
.sw-z:active, .rl-z:active { transform: scale(.92); }
.b-aktionen { position: relative; display: inline-flex; align-items: center; }
.b-aktionen.offen { opacity: 1; }
.b-leiste { position: absolute; bottom: calc(100% + 4px); z-index: 15; }
.beitrag:not(.ich) .b-leiste { left: 0; }
.beitrag.ich .b-leiste { right: 0; }
.reaktions-leiste { display: inline-flex; align-items: center; gap: 0; padding: 3px 4px; border-radius: 999px; background: var(--flaeche);
  box-shadow: var(--schatten), 0 0 0 1px var(--linie); animation: auf var(--kurz) var(--feder) both; white-space: nowrap; }
.rl-z { padding: 5px 6px; font-size: 20px; }
.b-leiste .smiley-wahl { position: static; width: 320px; max-height: 300px; }
/* Häufig benutzte Smileys: immer die erste Reihe der Auswahl */
.sw-oft { display: flex; flex-wrap: wrap; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); flex: 0 0 auto; }
/* Vorschläge beim Tippen (:lach) — ruhige Reihe am Feld; Chat darüber, Mail darunter */
.sm-reihe { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; display: flex; gap: 2px; padding: 4px; border-radius: 12px;
  background: var(--flaeche); box-shadow: var(--schatten); animation: rein var(--kurz) var(--feder) both; }
.sm-z { font-size: 20px; line-height: 1; padding: 5px 6px; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.sm-z:hover, .sm-z.aktiv { background: var(--akzent-zart); }
.s-textfeld { position: relative; }
.s-textfeld .sm-reihe { bottom: auto; top: calc(100% - 2px); }
.s-fuss { position: relative; }
.s-fuss .smiley-wahl { bottom: calc(100% + 8px); }
.b-frage { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; animation: rein var(--kurz) var(--feder) both; }
.b-frage .tk { font-size: 12.5px; padding: 3px 7px; }
.b-frage .tk:first-of-type { color: var(--schlecht); }
button.b-r { font: inherit; font-size: 12px; cursor: pointer; border: 0; color: inherit; transition: transform var(--kurz) var(--feder-knopf), box-shadow var(--kurz); }
button.b-r:hover { transform: scale(1.08); }
.c-tippt { align-self: flex-start; font-size: 12.5px; color: var(--text-3); margin: 10px 13px 2px; display: inline-flex; align-items: baseline; gap: 4px; animation: rein var(--mittel) var(--feder) both; }
.c-tippt .pkt { display: inline-flex; gap: 3px; }
.c-tippt .pkt i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: tippen 1.2s ease-in-out infinite; }
.c-tippt .pkt i:nth-child(2) { animation-delay: .15s; } .c-tippt .pkt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* Sprachnachricht: Mikro statt „Senden" bei leerem Feld; während der Aufnahme eine ruhige Zeile mit Zeit */
.c-mikro { align-self: flex-end; margin-bottom: 3px; color: var(--text-2); }
.c-mikro:hover { color: var(--text); }
.c-aufnahme { align-items: center; min-height: 42px; animation: rein var(--kurz) var(--feder) both; }
.ca-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--schlecht); animation: aufnahme 1.4s ease-in-out infinite; flex: 0 0 auto; margin-left: 6px; }
@keyframes aufnahme { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.ca-zeit { font-variant-numeric: tabular-nums; font-weight: var(--fett); min-width: 34px; }
.ca-platz { flex: 1; }

/* Anhängen: Büroklammer, Leiste mit dem Angehängten über dem Feld, Ziehen = sanfter Rahmen */
.c-anhang { align-self: flex-end; margin-bottom: 3px; color: var(--text-3); }
.c-anhang:hover { color: var(--text); }
.c-dateien { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 10px; }
.c-datei { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 4px 4px 4px 6px; border-radius: 12px;
  background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); font-size: 13px; animation: auf var(--mittel) var(--feder) both; }
.c-datei img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.cd-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-datei .z-knopf { padding: 4px; color: var(--text-3); }
.chat-rumpf { position: relative; }
.chat-rumpf::after { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--akzent); background: var(--akzent-zart);
  opacity: 0; pointer-events: none; transition: opacity var(--kurz); }
.chat-rumpf.zieht::after { opacity: 1; }
.beitrag.ausstehend .b-bild img { opacity: .8; }
@media (max-width: 1180px) { .ansicht.chat-k { grid-template-rows: auto minmax(0, 1fr); } }

/* Monat — luftig, ohne Gitter */
.monat-k .karte { max-width: none; }
.monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.monat .wt { font-size: 11.5px; font-weight: var(--fett); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 0 10px 8px; }
.monat .wt.we { color: color-mix(in srgb, var(--text-3) 60%, transparent); }
.monat .tag { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 118px; min-width: 0; padding: 8px 8px 10px;
  border: 0; border-radius: 14px; background: transparent; text-align: left; }
.monat .tag:hover { background: var(--flaeche); box-shadow: var(--schatten); }
.monat .tag.fremd { opacity: .38; }
.monat .tag.vorbei:not(.heute) .eintraege { opacity: .55; }
.monat .tag .nr { font-size: 13px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; margin: -2px 0 0 -2px; }
.monat .tag.we .nr { color: var(--text-3); }
.monat .tag.heute { background: var(--flaeche); box-shadow: var(--schatten); }
.monat .tag.heute .nr { background: var(--akzent); color: var(--auf-akzent); font-weight: var(--fett); }
.monat .eintraege { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.monat .ein { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--text); }
.monat .ein .tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.monat .ein .z { color: var(--text-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.monat .ein.ganz { padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--f, var(--text-3)) 16%, transparent); }
.monat .weitere { font-size: 11.5px; color: var(--text-3); padding-left: 2px; }

/* Kopf-Aktionen: feiner Trenner zwischen Antworten-Gruppe und Gelesen/Papierkorb */
.k-trenner { width: 1px; height: 18px; background: var(--linie); margin: 0 6px; }

/* ── Schreibfeld (E3b, 18.10.2026): OBEN über der offenen Mail, ohne Kasten, bleibt beim Scrollen stehen ── */
.schreiben { position: sticky; top: 0; z-index: 4; background: var(--bg); margin: 0 0 22px; padding: 2px 0 14px; border-bottom: 1px solid var(--linie);
  max-width: var(--lesebreite); max-height: 60vh; overflow-y: auto; scrollbar-width: thin; }
.s-kopf { display: flex; align-items: center; gap: 12px; }
.s-kopf .s-zeile { flex: 1; border-bottom: 0; min-width: 0; }
.s-kopf .s-etikett { flex: 0 0 auto; }
.s-kopf .s-vorschlaege { left: 0; }
.s-kopf-rechts { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.s-trenner { color: var(--text-3); }
.s-konto { font: inherit; color: var(--text-3); background: transparent; border: 0; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.s-konto:hover, .s-konto:focus-visible { background: var(--hover); color: var(--text-2); }
.s-zeile { position: relative; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linie); padding: 5px 0; min-height: 40px; }
.s-etikett { flex: 0 0 52px; color: var(--text-3); font-size: 13px; }
.s-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.s-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 10px; border-radius: 999px; background: var(--flaeche-2); font-size: 13.5px; animation: rein var(--mittel) var(--feder-knopf) both; }
.s-chip-weg { display: inline-grid; place-items: center; border: 0; background: none; padding: 3px; color: var(--text-3); border-radius: 50%; }
.s-chip-weg:hover { background: var(--hover); color: var(--text); }
.s-chip-weg svg.ic { width: 12px; height: 12px; }
.s-eingabe { flex: 1; min-width: 140px; border: 0; outline: 0; background: transparent; padding: 5px 2px; font-size: 14.5px; }
.s-betreff { font-weight: 500; }
.s-mehr { font-size: 13px; color: var(--text-3); padding: 3px 6px; }
.s-vorschlaege { position: absolute; left: 60px; right: 0; top: calc(100% + 2px); z-index: 6; margin: 0; padding: 4px; list-style: none; display: flex; flex-direction: column;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); transform-origin: top center; animation: ab var(--mittel) var(--feder) both; }
@keyframes ab { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.s-vorschlaege li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--rund-klein); cursor: pointer; min-width: 0; transition: background-color var(--kurz); }
.s-vorschlaege li.aktiv { background: var(--akzent-zart); }
.s-vorschlaege li svg.ic { color: var(--text-3); }
.s-vorschlaege .haupt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-vorschlaege .neben { margin-left: auto; color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.s-text { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; font: 15.5px/1.65 var(--schrift); padding: 16px 0 8px; min-height: 140px; color: var(--text); }
.s-text::placeholder { color: var(--text-3); }
/* Calis Entwurf (18.10.2026): Spiegel-Ebene HINTER dem durchsichtigen Feld — gleiche Schrift, gleicher Abstand, damit
   Geisttext und Hinterlegung genau unter dem Text liegen */
.s-textfeld { position: relative; }
.s-spiegel { position: absolute; inset: 0; padding: 16px 0 8px; font: 15.5px/1.65 var(--schrift); white-space: pre-wrap; overflow-wrap: break-word;
  color: transparent; pointer-events: none; }
.s-textfeld .s-text { position: relative; }
.s-spiegel mark { color: transparent; border-radius: 3px; }
/* Markierungen (25.10.2026, js/marken.js): der Text bleibt sauber, die Markierung liegt darunter. Lücke = grau wie ein Feld
   (Tab/Klick wählt sie ganz, Strg+V ersetzt), Annahme = gepunktet unterstrichen (nichts tun = übernommen), Änderung = zart. */
.s-spiegel .s-luecke { background: var(--flaeche-2); box-shadow: 0 0 0 2px var(--flaeche-2); }
.s-spiegel .s-annahme { background: none; text-decoration: underline dotted var(--text-3); text-underline-offset: 4px; }
.s-spiegel .s-aenderung { background: var(--akzent-zart); }
/* ↶ vorher: über dem geänderten Satz, in dem die Schreibmarke steht — grau, ohne Rahmen */
.s-zurueck { position: absolute; z-index: 2; border: 0; border-radius: 6px; padding: 2px 8px; font: 12px/1.6 var(--schrift); color: var(--text-2); background: var(--flaeche-2); cursor: pointer; }
.s-zurueck:hover { color: var(--text); }
.s-geist { color: var(--text-3); }
/* Mail-Liste: Stand von Calis Entwurf — dezent hinter dem Namen */
.cali-z { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: -1px; }
.cali-z.arbeitet { width: 9px; height: 9px; border: 1.5px solid var(--text-3); border-top-color: transparent; border-radius: 50%; animation: kreisel 1.1s linear infinite; }
.cali-z.bereit { color: var(--akzent); }
.warnung-z { margin-left: 6px; font-size: 11.5px; font-weight: var(--fett); color: var(--schlecht); white-space: nowrap; }
@keyframes kreisel { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cali-z.arbeitet { animation: none; border-top-color: var(--text-3); opacity: .6; } }
.s-signatur { white-space: pre-wrap; color: var(--text-3); font-size: 13.5px; margin: 0 0 6px; }
.s-anhaenge { margin-top: 6px; }
.s-anhang { cursor: pointer; background: transparent; }
.s-anhang.aus { opacity: .45; }
.s-meldung { font-size: 13.5px; color: var(--text-2); margin: 10px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-meldung.fehler { color: var(--schlecht); }
.s-fuss { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tk.s-leise { color: var(--text-3); font-size: 13px; }
.tk.s-leise.aktiv { color: var(--text-2); }
/* „Woher?": welche Angabe des Entwurfs aus welcher Quelle stammt */
.s-woher { list-style: none; margin: 8px 0 0; padding: 8px 12px; border-radius: var(--rund); background: var(--flaeche-2); font-size: 13px; display: grid; gap: 4px; }
.s-woher li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
.s-angabe { color: var(--text-2); }
.s-zitat { color: var(--text-3); font-style: italic; overflow-wrap: anywhere; }
.s-hinweis { font-size: 11.5px; color: var(--text-3); margin-right: 8px; }
.s-platz { flex: 1; }
/* Senden mit Pfeil (später senden): ein Knopf, rechts abgeteilt; der Pfeil öffnet nur das Menü */
.s-senden { position: relative; display: inline-flex; }
.s-senden .s-senden-haupt { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.s-senden .s-senden-pfeil { padding: 7px 8px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; }
.s-senden-menue { position: fixed; z-index: 60; min-width: 280px; display: flex; flex-direction: column; padding: 6px;
  background: var(--flaeche); border-radius: 12px; box-shadow: var(--schatten), 0 0 0 1px var(--linie); animation: auf var(--kurz) var(--feder) both; }
.s-sm-eintrag { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 8px 10px; border: 0; border-radius: var(--rund-klein);
  background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.s-sm-eintrag:hover, .s-sm-eintrag:focus-visible { background: var(--hover); outline: none; }
.s-sm-eintrag:disabled { color: var(--text-3); cursor: default; }
.s-sm-neben { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.s-sm-datum { display: flex; gap: 6px; padding: 6px 4px 4px; }
.s-sm-datum input { flex: 1; font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg); border: 0; border-radius: 8px; padding: 6px 9px; box-shadow: 0 0 0 1px var(--linie); }
.s-sm-datum input:focus { outline: none; box-shadow: 0 0 0 1px var(--akzent); }
.g-aktionen { grid-column: 2 / -1; display: flex; gap: 4px; margin-top: 4px; }
.s-datei { cursor: pointer; }
.tk.haupt.sendet { opacity: .7; cursor: default; }
.tk.haupt:disabled { cursor: default; }

/* ── Entwurf links: neuer Termin / neue Aufgabe (23.10.2026, Eingabe immer links) — ohne Rahmen, Felder direkt beschreibbar ── */
.n-entwurf { align-self: stretch; margin: 6px 0 2px; padding: 12px 14px 10px; border-radius: 14px; background: var(--flaeche-2);
  display: flex; flex-direction: column; gap: 2px; font-size: 14px; animation: rein var(--mittel) var(--feder) both; }
.n-entwurf.live { opacity: .85; }
.e-kopf { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12.5px; color: var(--text-3); }
.e-kopf .e-wo { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.n-entwurf input, .n-entwurf textarea { all: unset; box-sizing: border-box; width: 100%; min-width: 0; color: var(--text); font: inherit; line-height: 1.45; cursor: text; }
.n-entwurf input::placeholder, .n-entwurf textarea::placeholder { color: var(--text-3); }
.e-titel { font-size: 16px !important; font-weight: 600; padding: 2px 0 6px; }
.e-feld { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 3px 0; }
.e-etikett { font-size: 12.5px; color: var(--text-3); }
.e-notiz textarea { resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; color: var(--text-2); }
/* beim Ergänzen: was aus der Mail neu dazukommt — ein feiner Punkt am Etikett, sonst nichts */
.e-feld.neu .e-etikett::after { content: ' •'; color: var(--akzent); }
.e-titel.neu { box-shadow: inset 2px 0 0 var(--akzent); padding-left: 8px; }
.e-gelesen { margin: 0 0 2px 56px; font-size: 12.5px; color: var(--text-3); }
.e-warn { color: var(--text-2); }
.e-fehler { margin: 4px 0 0; font-size: 13px; color: var(--schlecht); }
.e-leise { all: unset; cursor: pointer; font-size: 12.5px; color: var(--text-3); }
.e-leise:hover, .e-leise:focus-visible { color: var(--text); }
.e-plus { align-self: flex-start; padding: 3px 0; }
.e-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 6px 0 0; }
.e-punkt { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 20px; font-size: 12.5px; color: var(--text-2); }
.e-punkt .fpunkt { opacity: .45; transition: opacity var(--kurz), transform var(--kurz); }
.e-punkt:hover .fpunkt, .e-punkt.an .fpunkt { opacity: 1; transform: scale(1.25); }
.e-quelle { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--text-3); min-width: 0; }
.e-quelle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-quelle:hover, .e-quelle:focus-visible { color: var(--text-2); }
.e-fuss { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.n-entwurf.fertig { flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; color: var(--gut); font-weight: 500; }
.n-entwurf.fertig svg.ic { animation: auf var(--lang) var(--feder-knopf) both; }
.n-entwurf.fertig .e-leise { margin-left: auto; font-weight: 400; }

/* Aufgaben: feiner Kreis zum Abhaken (füllt sich mit Feder), Verschieben erscheint beim Überfahren */
.zeile-e.aufgabe { position: relative; cursor: default; }
.zeile-e.aufgabe:hover, .zeilen > .zeile-e.aufgabe.gewaehlt { background: var(--hover); border-bottom-color: transparent; }
.haken-knopf { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-3); background: transparent; padding: 0; display: grid; place-items: center;
  align-self: center; justify-self: center; color: transparent; transition: border-color var(--kurz), background-color var(--mittel), transform var(--lang) var(--feder-knopf); }
.haken-knopf svg.ic { width: 12px; height: 12px; stroke-width: 2.2; transform: scale(.4); transition: transform var(--lang) var(--feder-knopf); }
.haken-knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.haken-knopf:hover svg.ic { transform: scale(.8); }
.haken-knopf:active { transform: scale(.9); }
.zeile-e.neu .haken-knopf { border-color: var(--akzent); }
.zeile-e.aufgabe.erledigt .haken-knopf { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.zeile-e.aufgabe.erledigt .haken-knopf svg.ic { transform: scale(1); }
.zeile-e.aufgabe .wer-t { transition: color var(--mittel); text-decoration: line-through transparent; transition: text-decoration-color var(--mittel), color var(--mittel); }
.zeile-e.aufgabe.erledigt .wer-t { color: var(--text-3); text-decoration-color: var(--text-3); }

/* ── Suchbühne (16.10.): Person oben, darunter nur, was passt; das Ziel (Enter) leise hervorgehoben ── */
.suche-k .karte { max-width: 860px; }
.s-enter { display: inline-flex; align-items: center; gap: 6px; }
.s-enter kbd { font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; box-shadow: 0 0 0 1px var(--linie); color: var(--text-2); }
.s-person { padding: 14px 0 10px; border-bottom: 1px solid var(--linie); animation: rein var(--mittel) var(--feder) both; }
.s-person + .s-person { padding-top: 16px; }
.s-person-kopf { display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 4px 8px 4px 0; margin-left: -2px; border-radius: 12px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.s-person-kopf:hover .s-name { text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 4px; }
.s-name-block { display: flex; flex-direction: column; min-width: 0; }
.s-name { font-size: 18px; font-weight: var(--fett); }
.s-unter { font-size: 13px; color: var(--text-3); }
.s-wege { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 10px 0 0 64px; }
.s-weg { text-decoration: none; }
.tk.ziel, .s-weg.ziel { background: var(--akzent-zart); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 40%, transparent); }
.s-person.ziel .s-name { color: var(--akzent); }
.zeilen > .zeile-e.treffer.ziel { background: var(--akzent-zart); border-bottom-color: transparent; }
.s-fpunkt { transform: scale(1) !important; background: var(--f, var(--text-3)) !important; width: 6px; height: 6px; }
.s-block { animation: rein var(--mittel) var(--feder) both; }
.s-hinweis { margin: 8px 0 0 64px; font-size: 13px; }

/* ── Kontakte + Personenkarte (16.10.) ── */
.p-bild { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto;
  background: var(--flaeche-2); color: var(--text-2); font-size: 12.5px; font-weight: var(--fett); letter-spacing: .02em; }
.p-bild.gross { width: 56px; height: 56px; font-size: 19px; }
.p-wege { display: inline-flex; gap: 6px; color: var(--text-3); }
.p-weg.whatsapp { color: #0082C9; } .p-weg.whatsappbiz { color: #D3A967; } .p-weg.matrix { color: #E5928C; }
.p-kopf { display: flex; align-items: center; gap: 18px; }
.p-kopf .k-kopf { flex: 1; min-width: 0; }
.p-tel a.wer-t { color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.p-tel a.wer-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.zeile-e.p-tel:hover .z-aktionen { opacity: 1; pointer-events: auto; transform: none; }
.p-gehoert { margin: 10px 0 18px 74px; animation: rein var(--mittel) var(--feder) both; }
.p-gehoert-feld { font: inherit; font-size: 14.5px; width: min(420px, 100%); color: var(--text); background: var(--flaeche); border: 0; border-radius: 10px; padding: 9px 13px;
  box-shadow: 0 0 0 1px var(--linie); outline: none; margin-bottom: 6px; }
.p-gehoert-feld:focus { box-shadow: 0 0 0 1px var(--akzent); }
.p-frage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-2); margin: 4px 0; }
.p-notiz { white-space: pre-wrap; color: var(--text-2); line-height: 1.55; margin: 0; }
.kontakte-k .karte, .kontakt-k .karte { max-width: 820px; }

/* ── Verschlüsselung ── */
.krypto-k .karte { max-width: 640px; }
.krypto-form { display: flex; flex-direction: column; gap: 16px; }
.krypto-form p { margin: 0; color: var(--text-2); line-height: 1.55; }
.krypto-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.krypto-form input { font: inherit; font-size: 15px; color: var(--text); background: var(--flaeche); border: 0; border-radius: 10px; padding: 10px 13px;
  box-shadow: 0 0 0 1px var(--linie); outline: none; transition: box-shadow var(--kurz); }
.krypto-form input:focus { box-shadow: 0 0 0 1px var(--akzent); }
/* verdeckt, aber KEIN Passwortfeld — sonst füllen Passwort-Manager das gespeicherte Passwort ein (16.10.) */
.krypto-form input.verdeckt { -webkit-text-security: disc; text-security: disc; font-family: ui-monospace, monospace; letter-spacing: .04em; }

/* ── Protokoll (log) ─────────────────────────────────── */
.protokoll .karte { max-width: 1100px; }
.p-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); margin-right: 9px; flex: 0 0 auto; }
.p-punkt.gut { background: var(--gut); }
.p-punkt.schlecht { background: var(--schlecht); }
.p-zeile { grid-template-columns: 14px minmax(0, 1fr) auto; }
.p-zeile .p-punkt { margin: 0; justify-self: center; align-self: center; }
.p-fehler { color: var(--schlecht) !important; white-space: normal !important; }
.p-aktionen { grid-column: 2 / 4; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0 0 -9px; font-size: 13px; }
.p-zaehler { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
/* Ausfall-Bericht (system.js): Ursache groß, geprüfte Punkte als leise Liste */
.ausfall .a-ursache { font-size: 17px; line-height: 1.5; margin: 4px 0 10px; }
.a-punkte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.a-punkte li { padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.a-punkte li:last-child { border-bottom: 0; }
.v-schritte { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.v-schritt { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--flaeche-2, color-mix(in srgb, var(--linie) 35%, transparent)); }
.v-verlauf li { font-size: 13.5px; }
.p-tabelle { display: flex; flex-direction: column; }
.p-reihe { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2px 18px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.p-reihe:last-child { border-bottom: 0; }
.p-reihe > :nth-child(n+3) { grid-column: 2; font-size: 13px; }
.p-name { display: flex; align-items: center; font-weight: 500; }
.p-log { display: flex; flex-direction: column; font: 12.5px/1.55 var(--mono); }
.p-log-z { display: grid; grid-template-columns: 120px 190px minmax(0, 1fr); gap: 12px; padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--linie) 60%, transparent); }
.p-log-z.error .p-text { color: var(--schlecht); }
.p-log-z.warn .p-text { color: var(--text); }
.p-zeit, .p-quelle { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-text { overflow-wrap: anywhere; color: var(--text-2); }

/* Hinweis */
.hinweis { color: var(--text-2); margin-top: 70px; max-width: var(--lesebreite); }
.vorschlag-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0 -9px; }

/* Hinweis unten — leise Rückmeldung, optional mit „Rückgängig" */
.meldung { position: fixed; left: calc(var(--breite-gespraech) + (100vw - var(--breite-gespraech)) / 2); bottom: 26px; transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; background: var(--meldung-bg); color: var(--meldung-text); box-shadow: var(--meldung-kante); padding: 9px 16px; border-radius: 999px; font-size: 13.5px;
  box-shadow: var(--schatten); transition: opacity var(--mittel) ease, transform var(--lang) var(--feder); z-index: 20; }
.meldung.da { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.m-aktion { background: none; border: 0; padding: 0; color: var(--meldung-aktion); font-weight: var(--fett); font-size: 13.5px; }
.m-aktion:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Übergänge: js/bewegung.js (Web Animations + FLIP, die Seite bleibt dabei bedienbar) ── */
.abbild { contain: layout paint; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ── Schmaler: Leiste wird zur Chip-Reihe; Handy: Bühne voll, Eingabe unten ── */
@media (max-width: 1180px) {
  .ansicht { grid-template-columns: minmax(0, 1fr); }
  .kontextleiste { position: static; padding-top: 4px; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; order: 2; }
  .kontextleiste.leer { display: none; }
  .ansicht > .karte { order: 1; }
  .ansicht > .kontextleiste { order: 0; margin-bottom: 4px; }
  .kl-gruppe { flex-direction: row; flex-wrap: wrap; gap: 2px; align-items: center; }
  .kl-titel { display: none; }
  .kl-e { width: auto; padding: 4px 9px; font-size: 13px; }
}
@media (max-width: 760px) {
  :root { --rand: 14px; }
  .ap { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .gespraech { order: 2; border-right: 0; border-top: 1px solid var(--linie); }
  .verlauf { display: none; }
  .buehne-kopf { padding-top: 8px; }
  .monat .tag { min-height: 64px; }
  .monat .ein .z { display: none; }
  .tipp { display: none; }
  .zeile-e .marke { display: none; }
  .k-titel h1 { font-size: 23px; }
  .meldung { left: 50%; bottom: 90px; }
}

/* ── Aufgaben (19.10.2026 neu: Karten statt Zeilen, Entwurf „Aufgaben neu") ──────────────────────────────────── */
.ansicht.aufgaben-ansicht { grid-template-columns: minmax(0, 1fr); }
.aufgaben-ansicht .karte { max-width: 960px; }
.a-reiter { display: flex; gap: 3px; background: var(--flaeche-2); padding: 3px; border-radius: 11px; }
.a-reiter-e { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; padding: 6px 13px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.a-reiter-e.aktiv { background: var(--flaeche); color: var(--text); font-weight: 560; }
.a-reiter-e:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.a-flaeche { display: flex; flex-direction: column; gap: 12px; }
.a-flaeche.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 14px; }
.a-karte { position: relative; background: var(--flaeche); border-radius: 18px; padding: 16px 18px 17px; display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: box-shadow var(--kurz), transform var(--kurz) var(--sanft); outline: none; }
.a-karte:hover, .a-flaeche > .a-karte.gewaehlt { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
.a-karte:focus-visible { box-shadow: 0 0 0 2px var(--akzent); }
.a-karte.gross { padding: 24px 26px; border-radius: 22px; gap: 12px; }
.a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--text-2); min-height: 22px; }
.a-naechstes { font-weight: 600; color: var(--text); }
.a-liste { display: inline-flex; align-items: center; gap: 6px; }
.a-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--f, var(--text-3)); flex: none; }
.a-frist.spaet, .a-pille.spaet { color: var(--schlecht); font-weight: 560; }
/* Aktionen beim Überfahren: fest in der Ecke, nichts verschiebt sich (sonst traf ein Klick in die Mitte „Morgen") */
.a-aktionen { position: absolute; top: 10px; right: 10px; display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--flaeche);
  opacity: 0; pointer-events: none; transition: opacity var(--kurz); }
.a-karte:hover .a-aktionen, .a-karte:focus-within .a-aktionen, .a-flaeche > .a-karte.gewaehlt .a-aktionen { opacity: 1; pointer-events: auto; }
.a-titel { display: flex; align-items: flex-start; gap: 10px; }
.a-titel .haken-knopf { margin-top: 2px; flex: none; }
.a-titel-t { font-size: 15.5px; font-weight: 600; line-height: 1.38; }
.a-karte.gross .a-titel-t { font-size: 21px; font-weight: 620; line-height: 1.3; letter-spacing: -0.005em; }
.a-karte.gross .a-titel .haken-knopf { width: 22px; height: 22px; margin-top: 4px; }
.a-karte.erledigt .haken-knopf { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.a-karte.erledigt .haken-knopf svg.ic { transform: scale(1); }
.a-karte.erledigt .a-titel-t { text-decoration: line-through; color: var(--text-3); }
.a-quelle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.a-karte.gross .a-quelle { align-self: flex-start; background: var(--flaeche-2); padding: 5px 11px; border-radius: 9px; }
.a-notiz { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.a-ohne { margin-top: 26px; }
.a-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.a-chip { display: inline-flex; align-items: stretch; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; }
.a-chip-t { all: unset; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13.5px; cursor: pointer; max-width: 320px; }
.a-chip-t:hover { background: var(--hover); }
.a-chip-heute { border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; padding: 0 11px; cursor: pointer; box-shadow: inset 1px 0 0 var(--linie); }
.a-chip-heute:hover { color: var(--akzent); background: var(--akzent-zart); }
.a-chip-t:focus-visible, .a-chip-heute:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.a-chip-mehr { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; padding: 8px 12px; cursor: pointer; border-radius: 12px; }
.a-spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; align-items: start; }
.a-spalte h2 { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
.a-spalte .a-n { color: var(--text-3); font-weight: 400; }
.a-spalte .a-karte { padding: 13px 15px; gap: 6px; }
.a-spalte .a-titel-t { font-size: 14.5px; font-weight: 560; }
.a-spalte .a-meta:empty, .a-spalte .a-meta:not(:has(> :not(.a-aktionen))) { display: none; }
/* eine Aufgabe auf der Bühne */
.a-eine-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.a-pille { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9px; background: var(--flaeche); font-size: 13px; color: var(--text-2); }
.a-eine .k-kopf { margin-top: 8px; }
.a-eine .k-kopf h1 { font-size: 26px; line-height: 1.25; }
.a-frist-feld { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.a-frist-feld input { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--text); }
.a-abschnitt { margin-top: 26px; }
.a-abschnitt h2 { margin-top: 0; }
.a-notiz-voll { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.a-mail { background: var(--flaeche); border-radius: 18px; padding: 16px 18px; }
.a-mail-kopf { all: unset; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); cursor: pointer; width: 100%; }
.a-mail-kopf strong { color: var(--text); font-weight: 600; }
.a-mail-kopf:hover span { text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.a-mail-kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
.a-mail-wann { margin-left: auto; color: var(--text-3); font-size: 12.5px; }
.a-mail-auszug { margin: 10px 0 0; font-size: 14px; line-height: 1.55; }
.a-mail .b-anhaenge { margin-top: 12px; }

/* ── Dein Tag (tagesplan.js, 20.10.2026 Tagesritual): Startseite und Aufgaben · Heute ── */
.tagesplan { display: flex; flex-direction: column; gap: 28px; margin-top: 6px; }
.t-leiste { display: flex; flex-direction: column; gap: 9px; }
.t-stunden { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.t-bahn { position: relative; height: 44px; border-radius: 12px; background: var(--flaeche-2); overflow: hidden; }
.t-termin { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--akzent) 22%, transparent); }
.t-block { position: absolute; top: 7px; bottom: 7px; border-radius: 7px; background: color-mix(in srgb, var(--aufgabe) 42%, transparent); }   /* Aufgaben sanft rötlich, Termine blau */
.t-block.naechstes { background: color-mix(in srgb, var(--aufgabe) 78%, transparent); }
.t-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--schlecht); }
.t-schilder { position: relative; margin-top: -2px; }
.t-schilder.leer { position: static; font-size: 13px; }
.t-schild { position: absolute; max-width: 24%; padding-left: 7px; border-left: 2px solid color-mix(in srgb, var(--f, var(--akzent)) 55%, transparent);
  font-size: 12.5px; line-height: 1.35; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-schild.rechts { padding: 0 7px 0 0; border-left: 0; border-right: 2px solid color-mix(in srgb, var(--f, var(--akzent)) 55%, transparent); text-align: right; }
.t-schild strong { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.t-schild span { overflow: hidden; text-overflow: ellipsis; }
.t-ganztags { display: flex; flex-wrap: wrap; gap: 6px; }
.t-ganztags span { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--akzent) 14%, transparent); color: var(--text-2); }
/* morgen: dieselbe Leiste, ruhiger */
.t-morgen { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; }
.t-morgen .abschnitt { align-self: flex-start; margin-bottom: 0; }
.t-morgen h2 { margin: 0; }
.t-leiste.klein .t-bahn, .t-leiste.klein .t-bahn.planbar { height: 22px; border-radius: 8px; }
.t-leiste.klein .t-bahn.planbar .t-block { top: 3px; bottom: 3px; border-radius: 5px; }
.t-leiste.morgen .t-termin { background: color-mix(in srgb, var(--akzent) 16%, transparent); }
/* „stimmt nicht" an Calis Antworten (Harness E3): leise, ohne Rahmen — da, wenn man es braucht */
.zug-rueck { margin: 2px 0 6px; font-size: 12px; }
.zug-rueck-k { all: unset; cursor: pointer; color: var(--text-3); }
.zug-rueck-k:hover, .zug-rueck-k:focus-visible { color: var(--text-2); text-decoration: underline; }
/* Fahrzeiten (Kategorie „Fahrzeit", 24.10.2026): da, aber leiser als die Termine selbst — überall gleich */
.t-termin.fahrzeit, .t-leiste.morgen .t-termin.fahrzeit { background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.t-schild.fahrzeit { color: var(--text-3); border-color: color-mix(in srgb, var(--f, var(--akzent)) 25%, transparent); }
.t-schild.fahrzeit strong { color: var(--text-3); font-weight: 500; }
.termin.fahrzeit, .termin.fahrzeit .zeit, .monat .ein.fahrzeit { color: var(--text-3); }
.termin.fahrzeit .fpunkt, .monat .ein.fahrzeit .fpunkt { opacity: .4; }
.t-leiste.morgen .t-schild { font-size: 12px; line-height: 22px; }
.t-abschnitt h2 { margin-top: 0; }
.t-geschafft ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.t-geschafft li { font-size: 14px; color: var(--text-3); text-decoration: line-through; }

/* Planen in Dein Tag (21.10.2026): Aufgaben aus dem Vorrat an ihre Uhrzeit ziehen, am Rand länger/kürzer — ruhig wie der Rest */
.t-bahn.planbar { height: 52px; touch-action: pan-y; }
.t-bahn.ziel { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--akzent) 45%, transparent); }
.t-bahn .t-block { display: flex; justify-content: space-between; min-width: 6px; cursor: grab; touch-action: none; overflow: hidden; }
.t-bahn.planbar .t-block { top: 8px; bottom: 8px; }
.t-griff { flex: none; width: 8px; align-self: stretch; cursor: ew-resize; position: relative; }
/* die Griffe zeigen sich nur beim Überfahren: ein feiner heller Strich am Rand, wo man anfasst */
.t-griff::after { content: ''; position: absolute; top: 25%; bottom: 25%; width: 2px; border-radius: 2px; background: var(--flaeche); opacity: 0; transition: opacity .12s; }
.t-griff.links::after { left: 2px; } .t-griff.rechts::after { right: 2px; }
.t-block:hover .t-griff::after, .t-termin:hover .t-griff::after, .t-griff:hover::after { opacity: .9; }
.t-block:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.t-block.zieht { cursor: grabbing; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); z-index: 2; }
.t-schild.aufgabe { border-color: color-mix(in srgb, var(--aufgabe) 70%, transparent); }
/* Abhaken in der Leiste (21.10.2026): ein kleiner Kreis vor der Beschriftung, NUR beim Überfahren */
.t-haken { position: absolute; width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--aufgabe) 85%, transparent);
  background: var(--bg); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .12s; }
.t-haken.zeigt, .t-haken:focus-visible { opacity: 1; pointer-events: auto; }
.t-haken:hover { background: color-mix(in srgb, var(--aufgabe) 45%, var(--bg)); }
.t-haken:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.t-ohne { margin: -14px 0 0; font-size: 13px; }
.t-ohne .t-leise { font-size: 13px; }
/* morgen: Aufgaben blass beschriftet; in der schmalen Leiste nur beim Überfahren, schwebend unter den Terminen */
.t-schild.blass { opacity: .7; font-size: 11.5px; }
.t-schild.schwebt { z-index: 4; max-width: 45%; background: var(--bg); padding-right: 6px; }
.t-schilder-leer { position: absolute; left: 0; top: 0; font-size: 13px; line-height: 22px; }
.t-schild-name { display: block; margin: 1px 0 4px; color: var(--text); }
.t-schild-name.umbenennbar { cursor: text; }
.t-bahn .t-termin[role=button]:focus-visible, .t-bahn .t-termin.entwurf:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.t-schild.aufgabe span { color: var(--text-2); }
.t-block.vorschau { opacity: .75; }
.t-block.raus { opacity: .35; }
.tagesplan.zieht, .tagesplan.zieht * { cursor: grabbing; user-select: none; }
.t-vorrat { display: flex; flex-direction: column; gap: 12px; margin-top: -10px; }
.t-vorrat-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--text-3); }
.t-vorrat-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.t-chip { flex: 0 1 auto; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px;
  background: var(--flaeche); cursor: grab; touch-action: none; user-select: none; }
.t-chip:hover { background: var(--hover); }
.t-chip:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.t-chip.weg { opacity: .35; }
.t-chip-t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-chip-m { font-size: 12px; color: var(--text-3); }
.t-chip-m.spaet { color: var(--schlecht); }
.t-leise { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13px; color: var(--text-3); cursor: pointer; }
.t-leise:hover { color: var(--text); }
.t-leise:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.t-planen { margin-top: -12px; display: flex; }
/* Termine in der Leiste (21.10.2026): eigene Einzeltermine ziehbar; Doppelklick + halten zieht einen neuen auf */
.t-bahn .t-termin.ziehbar { display: flex; justify-content: space-between; cursor: grab; touch-action: none; }
.t-bahn .t-termin.ziehbar:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.t-termin.zieht { cursor: grabbing; z-index: 2; background: color-mix(in srgb, var(--akzent) 32%, transparent); }
.t-termin.entwurf { background: color-mix(in srgb, var(--akzent) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--akzent); z-index: 2; }
.t-termin.neu { opacity: .7; }
.t-termin.raus { opacity: .35; }
.t-schild.entwurf { max-width: 30%; z-index: 3; }
.t-schild-fuss { display: flex; align-items: center; gap: 12px; }
.t-entfernen { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--text-3); cursor: pointer; }
.t-entfernen:hover { color: var(--schlecht); }
.t-entfernen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 3px; }
.t-schild-titel { display: block; width: 100%; min-width: 150px; border: 0; padding: 0; margin: 1px 0 4px; background: transparent; font: inherit;
  font-size: 13px; color: var(--text); outline: 0; caret-color: var(--akzent); }
.t-schild-titel::placeholder { color: var(--text-3); }
.t-punkte { display: flex; gap: 7px; }
.t-punkt { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--f); cursor: pointer; }
.t-punkt.an { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text-3); }
.t-punkt:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.t-geist { position: fixed; z-index: 50; transform: translate(-50%, -130%); pointer-events: none; max-width: 260px; padding: 7px 12px;
  border-radius: 10px; background: var(--flaeche); box-shadow: 0 4px 18px rgba(0, 0, 0, .14); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tagesritual auf der Bühne (tagesplan.js TagRitual) ── */
.ansicht.ritual-ansicht { grid-template-columns: minmax(0, 1fr); }   /* ohne Seitenleiste, wie Aufgaben */
.ritual { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 22px; }
.r-titel { margin: 0; font-size: 30px; font-weight: 640; letter-spacing: -0.01em; }
.r-karte { background: var(--flaeche); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ritual .r-karte-t { margin: 0; font-size: 18px; font-weight: 620; text-transform: none; letter-spacing: 0; color: var(--text); }
.r-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.r-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.r-geschafft { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.r-morgen { border: 1.5px dashed var(--linie); border-radius: 20px; padding: 18px 22px; }
.ritual .r-morgen h2 { margin: 0 0 6px; }
.r-morgen p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.tk:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ── Personenakte (personen.js Kontakt, 20.10.2026) + „wer zuletzt" in jeder Gesprächszeile ── */
.p-wege { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.zeile-e.vorbei .wer, .zeile-e.vorbei .wann { color: var(--text-3); }
.zuletzt { color: var(--text-2); }
.zuletzt.eigen { color: var(--text-3); }

/* ── Zeitleiste (zeitleiste.js): Datum | feine graue Linie mit dezenten Punkten | Betreff + Zusammenhang — ohne Rahmen ── */
.zl-rahmen { margin-top: 10px; }
.zl-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.zl-abschnitt { margin: 18px 0 10px; }
.zl { position: relative; display: flex; flex-direction: column; gap: 22px; }
.zl::before { content: ''; position: absolute; left: 77px; top: 6px; bottom: 6px; width: 1px; background: var(--linie); }   /* die eine Linie */
.zl-e { position: relative; display: grid; grid-template-columns: 64px 26px minmax(0, 1fr); align-items: start; }
.zl-e.pause { margin-top: 26px; }                                   /* nach längerer Ruhe mehr Platz */
.zl-wann { display: flex; flex-direction: column; align-items: flex-end; padding-top: 1px; line-height: 1.3; }
.zl-datum { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zl-uhr { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.zl-punkt { justify-self: center; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 4px var(--bg); position: relative; z-index: 1; }
.zl-e.neu .zl-punkt { background: var(--akzent); }
.zl-was { min-width: 0; }
.zl-e { cursor: pointer; border-radius: 10px; }
.zl-e:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.zl-titel { display: block; max-width: 100%; font-size: 14px; line-height: 1.35; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-e:hover .zl-titel { color: var(--akzent); }
.zl-e:hover .zl-punkt { background: var(--akzent); }
.zl-e.neu .zl-titel { font-weight: 600; }
.zl-meta { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-3); }
.zl-bezug { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.zl-bezug:hover { color: var(--text-2); text-decoration: underline; }
.zl-bezug:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.zl-mehr { margin: 18px 0 0 90px; }
.zl-e.leuchtet .zl-titel { animation: zl-leuchten 1.4s ease; }
@keyframes zl-leuchten { 0%, 40% { color: var(--akzent); } 100% { color: var(--text); } }
@media (prefers-reduced-motion: reduce) { .zl-e.leuchtet .zl-titel { animation: none; color: var(--akzent); } }

/* gemeinsame Akte (mehrere Personen) */
.s-gemeinsam { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; margin: 4px 0 10px; border: 0; border-radius: 16px;
  background: var(--flaeche); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.s-gemeinsam:hover { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
.s-gemeinsam.ziel { box-shadow: 0 0 0 2px var(--akzent-zart); }
.s-gemeinsam-bilder { display: inline-flex; }
.s-gemeinsam-bilder > * + * { margin-left: -10px; }
.s-gemeinsam-bilder > * { box-shadow: 0 0 0 2px var(--bg); border-radius: 50%; }
/* Prüffälle (Harness E3): wie das Protokoll, ein Feld für „was wäre richtig gewesen" */
.pf-erwartung { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 13px; padding: 4px 8px; border: 0; border-radius: 8px;
  background: var(--flaeche-2); color: var(--text); }

/* Angefangene Entwürfe (26.10.2026): in der Mail-Zeile statt des Betreffs, auf dem Start als Stapel — grau, ohne Rahmen */
.entwurf-satz { color: var(--text); }   /* inline: die Zeile kürzt mit „…" wie jede andere */
.entwurf-satz .ic { color: var(--text-3); vertical-align: -2px; margin-right: 5px; }
.angefangen { margin: 6px 0 18px; }
.angefangen-kopf { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px 6px 4px 0;
  font-size: 13px; color: var(--text-2); cursor: pointer; border-radius: var(--rund-klein); }
.angefangen-kopf:hover { color: var(--text); }
.angefangen-kopf[aria-expanded="false"] .anhang-pfeil { transform: none; }
.entwurf-symbol { color: var(--text-3); align-self: center; margin-right: 2px; }

/* PDF ausfüllen (26.10.2026, formular.js): Seitenbild + Felder genau darüber; Schrift wächst mit der Seite (11 pt auf 595 pt) */
.anhang-ausfuellen { margin-left: auto; font-size: 13px; padding: 3px 8px; }
.anhang-ausfuellen + .anhang-laden { margin-left: 0; }
.formular .fm-seite { position: relative; container-type: inline-size; max-width: var(--lesebreite); margin: 0 0 18px; background: #fff;
  box-shadow: 0 0 0 1px var(--linie); border-radius: 4px; overflow: hidden; cursor: text; }
.formular .fm-seite img { display: block; width: 100%; height: 100%; user-select: none; }
.formular .fm-feld { position: absolute; box-sizing: border-box; margin: 0; padding: 0 0.6cqw; border: 0; border-radius: 2px;
  background: color-mix(in srgb, var(--akzent) 9%, transparent); color: #0d1a59; font: 1.85cqw/1.2 Helvetica, Arial, sans-serif; outline: none; }
.formular .fm-feld:focus { background: color-mix(in srgb, var(--akzent) 16%, transparent); box-shadow: 0 0 0 1px var(--akzent); }
.formular textarea.fm-feld { resize: none; padding-top: 0.3cqw; }
.formular .fm-kaestchen { display: grid; place-items: center; cursor: pointer; font-size: 2.2cqw; line-height: 1; }
.formular .fm-unterschrift { display: grid; place-items: center; color: #8890a8; font-size: 1.6cqw; cursor: default; }
.formular .fm-text { position: absolute; margin: 0; padding: 0; border: 0; background: transparent; color: #0d1a59; resize: none; overflow: hidden;
  font: 1.85cqw/1.2 Helvetica, Arial, sans-serif; outline: 1px dashed transparent; min-width: 2ch; field-sizing: content; }
.formular .fm-text:focus { outline-color: color-mix(in srgb, var(--akzent) 60%, transparent); }

/* Stift (26.10.2026, BAUPLAN-pdf.md Etappe 2): Striche liegen über allem, fangen aber nichts ab (die Seite nimmt den Stift) */
.formular .fm-striche { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: #0d1a59; }
.formular .fm-unterschrift { cursor: pointer; border: 0; }
.formular.setzen .fm-seite { cursor: crosshair; }
.formular .fm-hinweis { max-width: var(--lesebreite); margin: 0 0 12px; color: var(--text-2); font-size: 14px; }
.formular .fm-hinweis .tk { padding: 2px 6px; }
.formular .fm-zeichnen { max-width: var(--lesebreite); margin: 0 0 18px; padding: 14px 16px; border-radius: 8px; background: var(--hover); }
.formular .fm-zeichnen p { margin: 0 0 10px; color: var(--text-2); font-size: 14px; }
.formular .fm-zeichenfeld { display: block; width: 100%; aspect-ratio: 3 / 1; background: #fff; border-radius: 4px; touch-action: none; cursor: crosshair; fill: #0d1a59; }
.formular .fm-linie { stroke: #c4c8d4; stroke-width: 1.5; }
.formular .fm-zeichnen-knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* Stift schwebt über der Seite: ein Punkt statt Textcursor, auch über Feldern */
.formular .fm-seite.stift, .formular .fm-seite.stift * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='2' fill='%230d1a59'/%3E%3C/svg%3E") 4 4, crosshair; }
/* Überschrift = Dateiname der fertigen PDF: sieht aus wie der Titel, ist direkt beschreibbar */
.formular .fm-name { display: inline-flex; align-items: baseline; max-width: 100%; }
.formular .fm-name input { font: inherit; color: inherit; letter-spacing: inherit; background: transparent; border: 0; padding: 0; margin: 0;
  outline: none; min-width: 3ch; max-width: 100%; field-sizing: content; border-radius: 3px; }
.formular .fm-name input:hover, .formular .fm-name input:focus { background: var(--hover); }
.formular .fm-endung { color: var(--text-3); }
.formular .fm-feld:not(:focus) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 22%, transparent); }

/* Was rechnet der KI-PC (26.10.2026, kipc.js): leise Zeile links über den Tastenhinweisen — nur solange im Hintergrund gerechnet wird */
.kipc-zeile { display: flex; align-items: baseline; gap: 7px; width: 100%; margin: 0 0 6px; padding: 4px 6px; border: 0; border-radius: var(--rund-klein);
  background: transparent; color: var(--text-3); font-size: 12.5px; line-height: 1.35; text-align: left; cursor: pointer; }
.kipc-zeile:hover { background: var(--hover); color: var(--text-2); }
.kipc-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: kipc-atmen 2.4s ease-in-out infinite; transform: translateY(-1px); }
.kipc-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@keyframes kipc-atmen { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .kipc-punkt { animation: none; } }
.kipc .kipc-regel { margin: 10px 0 0; font-size: 13px; }

/* ── Notizen (31.10.2026, js/notiz.js): das Journal auf der Bühne. Links die Gliederung (Kontextleiste), der Editor füllt
   die Karte und rollt in sich (lange Dokumente, siehe werkzeuge/editor). Er lebt im Shadow DOM; Farben und Schrift reichen
   als Variablen hinein (--blau heißt dort der Akzent, Grundlage ist Colis Editor). ── */
.ansicht.notiz-k { --blau: var(--akzent); height: 100%; box-sizing: border-box; padding-bottom: 0; grid-template-rows: minmax(0, 1fr); }
.notiz-k > .karte { display: flex; flex-direction: column; min-height: 0; max-width: var(--lesebreite); }
.notiz-k .kontextleiste { max-height: 100%; overflow-y: auto; scrollbar-width: thin; box-sizing: border-box; padding-bottom: 24px; }
.notiz-editor { flex: 1; min-height: 0; }
/* ohne Überschrift (01.11.2026, Stefan: „Notizen" steht schon im Pfad): nur eine schmale Zeile mit Status + PDF, rechts */
.notiz-oben { display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-height: 34px; margin: 6px 0 4px; }
.notiz-oben .unter { color: var(--text-3); font-size: 13px; }
/* mittig und leise (01.11.2026): Text in Lesebreite in der Mitte der Bühne, Lesezeichen blass im linken Rand */
.ansicht.notiz-k { grid-template-columns: minmax(0, 1fr); max-width: none; container-type: inline-size; }
.ansicht.notiz-k > .kontextleiste.leer { display: none; }
.notiz-k > .karte { position: relative; width: 100%; margin-inline: auto; }
.notiz-marken { position: absolute; top: 46px; right: calc(100% + 32px); width: 150px; max-height: calc(100% - 70px); overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 1px; opacity: .35; transition: opacity .2s ease; }
.notiz-marken:hover, .notiz-marken:focus-within { opacity: 1; }
.notiz-marken-knopf { display: inline-flex; }
.notiz-marken-knopf.an .tk { background: var(--hover); color: var(--text); }
@container (max-width: 960px) {   /* Liste (150 px + 32 px) darf in den Innenabstand der Bühne ragen */
  .notiz-marken { --als-liste: 1; opacity: 1; right: 0; top: 40px; width: 240px; z-index: 5; padding: 6px; border-radius: 10px; background: var(--flaeche); box-shadow: var(--schatten); }
}

/* PDF = Druck des Browsers: nur das fertig gesetzte Blatt (#druck, js/notiz.js), A4 */
#druck { display: none; }
@media print {
  @page { size: A4; margin: 18mm 17mm; }
  body > *:not(#druck) { display: none !important; }
  body { background: #fff !important; }
  #druck { display: block; color: #111; font: 11pt/1.5 var(--schrift); }
  #druck .druck-kopf { color: #777; font-size: 9pt; text-align: right; margin-bottom: 8mm; }
  #druck h1 { font-size: 18pt; margin: 0 0 4mm; } #druck h2 { font-size: 14pt; margin: 6mm 0 2mm; } #druck h3 { font-size: 12pt; margin: 5mm 0 2mm; }
  #druck p, #druck ul, #druck ol, #druck pre, #druck table, #druck blockquote { margin: 0 0 3mm; }
  #druck blockquote { border-left: 2px solid #bbb; padding-left: 4mm; color: #444; }
  #druck pre { white-space: pre-wrap; font: 9.5pt/1.4 var(--mono); background: #f4f4f4; padding: 3mm; }
  #druck code { font-family: var(--mono); font-size: .92em; }
  #druck table { border-collapse: collapse; } #druck th, #druck td { border: 1px solid #ccc; padding: 1.5mm 3mm; text-align: left; vertical-align: top; }
  #druck .aufgabe { display: block; } #druck .aufgabe.erledigt { color: #777; text-decoration: line-through; }
  #druck figure { margin: 0 0 4mm; } #druck img { max-width: 100%; max-height: 120mm; } #druck figcaption { color: #666; font-size: 9pt; }
  #druck h1, #druck h2, #druck h3 { break-after: avoid; } #druck figure, #druck tr, #druck pre { break-inside: avoid; }
}

/* Zeiterfassung Ackerguide (js/stempel.js): ganz unten links, so leise wie die Tastenzeile. Ein kleiner Schalter, die Zeit
   nur, wenn heute schon etwas gestempelt ist */
.stempel { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 0; padding: 2px 4px; border-radius: 6px;
  font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.stempel:hover, .stempel:focus-visible { background: var(--hover); color: var(--text-2); }
.stempel-schalter { position: relative; flex: none; width: 20px; height: 11px; border-radius: 6px; background: var(--linie); transition: background var(--kurz); }
.stempel-schalter::after { content: ''; position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--flaeche); transition: transform var(--kurz); }
.stempel.an { color: var(--text-2); }
.stempel.an .stempel-schalter { background: var(--gut); }
.stempel.an .stempel-schalter::after { transform: translateX(9px); }
.stempel.laeuft { opacity: .55; cursor: progress; }
.stempel-zeit { font-variant-numeric: tabular-nums; }

/* Besprechungs-Mitschrift (11.11.2026, js/mitschrift.js): roter Punkt solange aufgenommen wird, Live-Zeilen ruhig untereinander */
.ms-punkt { display: inline-block; width: 10px; height: 10px; margin-right: 9px; border-radius: 50%; background: #d93025; vertical-align: 2px;
  animation: kipc-atmen 2.4s ease-in-out infinite; }
.ms-hinweis { margin: -4px 0 12px; }
.ms-zeilen { max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.ms-zeile { display: grid; grid-template-columns: 3.2em 5.5em 1fr; gap: 10px; align-items: baseline; line-height: 1.45; }
.ms-zeit { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: .86em; }
.ms-wer { color: var(--text-2); font-weight: 600; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-zeile.ich .ms-wer { color: var(--text-3); }
@media (max-width: 560px) { .ms-zeile { grid-template-columns: 3em 1fr; } .ms-text { grid-column: 1 / -1; } }