/* Mohana Postfach: ruhig, klar, wenige Farben. Grauer Rahmen, weiße Arbeitsfläche mit 16 px Rundung, Linien als
   Haarlinie (0,5 px), Text und Knöpfe in Tinte. Farbe nur für Stufen, Tags, Ungelesen-Zahl und Fenster-Uhr.
   Alles über die Variablen in :root; hell als Standard, dunkel nur nach Wahl im Menü (data-theme auf <html>). */

/* WOFF2 auf lateinische Zeichen gekürzt (rund 15 statt 140 KB je Schnitt), die volle OTF bleibt als Rückfall */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.woff2") format("woff2"), url("fonts/Poppins-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.woff2") format("woff2"), url("fonts/Poppins-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }

:root {
  /* Sichere Bereiche (Notch, Home-Leiste); im Mock mit standalone=1 fest gesetzt */
  --so: env(safe-area-inset-top, 0px); --su: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  color-scheme: light;
  /* Abstände nur aus dieser Skala (padding, margin, gap); 2 px nur für optische Feinausrichtung */
  --abst-2: 2px; --abst-4: 4px; --abst-8: 8px; --abst-12: 12px; --abst-16: 16px;
  --abst-20: 20px; --abst-24: 24px; --abst-32: 32px; --abst-48: 48px; --abst-64: 64px;
  /* Schriftgrößen: 11 Kleinstes, 12 bis 13 Nebeninfo, 14 Bedienung, 15 Fließtext und Blasen, 16 bis 30 Überschriften und Zahlen */
  --sg-11: 11px; --sg-12: 12px; --sg-13: 13px; --sg-14: 14px; --sg-15: 15px;
  --sg-16: 16px; --sg-20: 20px; --sg-24: 24px; --sg-30: 30px;
  /* Form: Haarlinie, Rundungen von klein nach groß (innen kleiner als außen), Schatten für Popover und Dialoge */
  --haar: .5px;
  --rund-mini: 4px;
  --rund-klein: 6px;
  --rund-mittel: 8px;
  --rund: 12px;                 /* Knöpfe, Felder, Zeilen, Karten */
  --rund-flaeche: 16px;         /* Arbeitsfläche am Laptop, Popover, Palette, schwebender Chat-Kopf */
  --rund-gross: 20px;           /* Blasen, Dialoge */
  --rund-blatt: 28px;           /* Blätter am Handy (Mehr, Lead-Karte) */
  --rund-voll: 999px;           /* Kapsel: Radius gleich halbe Höhe (Tags, schwebende Leisten und ihre Knöpfe) */
  --rahmen: 8px;
  /* Konzentrisch: innen = außen minus Abstand */
  --rund-in-flaeche: calc(var(--rund-flaeche) - var(--abst-8));
  --rund-in-blatt: calc(var(--rund-blatt) - var(--abst-16));
  --app: oklch(96.5% 0 0);
  --grund: #ffffff;
  --flaeche: oklch(97% 0 0);
  --flaeche-2: oklch(94.5% 0 0);
  --linie: oklch(92.2% 0 0);
  --linie-stark: oklch(87% 0 0);
  --text: oklch(14.5% 0 0);
  --text-2: oklch(42% 0 0);
  --text-3: oklch(51% 0 0); /* 51 statt 55,6 %: auf allen hellen Flächen mindestens 4,5:1 */
  --tinte: oklch(20.5% 0 0);
  --tinte-text: #ffffff;
  --akzent: #0a78c2;
  --akzent-hell: #06a1ef;
  --ungelesen: #0b6fd6; /* dunkler als vorher, damit Weiß darauf und Blau auf Weiß 4,5:1 schaffen */
  --ungelesen-grund: var(--ungelesen);
  --blase-ich: #0f6fc6;
  --blase-ich-text: #ffffff;
  --blase-sie: oklch(96% 0 0);
  --warm: #e8743b;
  --warm-text: #b9541c;
  --ok: #2f9e5b;
  --pruefen: #fff1c2;
  --schatten: 0 12px 24px #0000001a, 0 0 0 var(--haar) var(--linie-stark);
  --schatten-klein: 0 1px 2px #0000000f, 0 0 0 var(--haar) var(--linie-stark);
  /* Palette für Labels, Tags, Gruppen: heller Grund (g), kräftiger Text (t), Punkt (p) */
  --koralle-g: #fbe8e2; --koralle-t: #a3432b; --koralle-p: #e2704f;
  --sand-g: #f5ecdf; --sand-t: #7b5c2e; --sand-p: #c99a5b;
  --salbei-g: #e5f0e6; --salbei-t: #3d6a47; --salbei-p: #5fa06c;
  --meer-g: #e1eff9; --meer-t: #1d5e92; --meer-p: #2f8fd6;
  --lavendel-g: #ede9f7; --lavendel-t: #57499a; --lavendel-p: #8a78d0;
  --sonne-g: #fcf2d4; --sonne-t: #855f0c; --sonne-p: #e2ad1c;
  --grau-g: #eef0f3; --grau-t: #4f5b6b; --grau-p: #9aa5b3;
  /* Volle Stufe (v) für Bausteinflächen mit weißer Schrift (Automationen, Design 21.10.2026): Weiß darauf mindestens 4,96:1;
     g2 ist die Hover-Stufe zwischen g und p, der Text t darauf mindestens 4,69:1 */
  --koralle-v: oklch(56% 0.157 37); --sand-v: oklch(54.5% 0.107 66); --salbei-v: oklch(52% 0.109 152); --meer-v: oklch(52.5% 0.2 260);
  --lavendel-v: oklch(51% 0.168 287); --sonne-v: oklch(55% 0.115 78); --grau-v: oklch(50% 0.03 256);
  --koralle-g2: oklch(91.1% 0.036 39); --sand-g2: oklch(91.9% 0.03 76); --salbei-g2: oklch(90.8% 0.027 149); --meer-g2: oklch(90.4% 0.035 241);
  --lavendel-g2: oklch(90.3% 0.032 298); --sonne-g2: oklch(93.8% 0.059 91); --grau-g2: oklch(92.7% 0.006 255);
  --auf-farbe: oklch(100% 0 0);
  /* Automationen: Kopfband Cobalt zu Ocean mit Wellen in Rim und Sky (Mohana-Look), Flow-Fläche und Linien */
  --auto-band-1: oklch(35.7% 0.184 263); --auto-band-2: oklch(42.6% 0.197 263); --auto-band-3: oklch(49% 0.19 261);
  --auto-band-text: oklch(100% 0 0); --auto-band-leise: oklch(93.7% 0.031 253); --auto-band-tinte: oklch(35.7% 0.184 263);
  --auto-welle-1: oklch(80.2% 0.14 186); --auto-welle-2: oklch(73.1% 0.151 237);
  --auto-flaeche: oklch(96.2% 0.011 257); --auto-linie: oklch(58.8% 0.13 259);
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-marke: "Poppins", var(--schrift);

  /* ---------- Glas (nur schwebende Ebene: untere Leiste, Menüs, Palette, Hinweis, Chat-Kopf, Mehr-Blatt) ----------
     Füllungen aus der Kontrastrechnung im schlechtesten Fall (Glas über reinem Schwarz oder Weiß):
     normal 0,78 hält --text-2 bei 5,0:1, dicht 0,9 hält --text-2 bei 6,75:1 und --text-3 bei 4,58:1. */
  --glas-blur: 16px;
  --glas-saett: 170%;
  --glas-fuell: oklch(100% 0 0 / .78);
  --glas-fuell-dicht: oklch(100% 0 0 / .9);
  --glas-ersatz: oklch(99% 0 0);               /* ohne backdrop-filter oder mit Glas aus */
  --glas-text-3: var(--text-3);                /* Nebentext auf dichtem Glas, dunkel heller gesetzt */
  --glas-auswahl: oklch(0% 0 0 / 6%);          /* gleitende Auswahlkapsel in der unteren Leiste */
  --glas-kante: inset 0 0 0 var(--haar) oklch(0% 0 0 / 8%);
  --glas-glanz: inset 0 1px 0 oklch(100% 0 0 / 65%);
  --glas-schatten: 0 1px 2px oklch(30% .02 60 / 8%), 0 8px 24px oklch(30% .02 60 / 12%);
  --glas-schatten-voll: var(--glas-glanz), var(--glas-kante), var(--glas-schatten);
  --tinte-glas: oklch(20.5% 0 0 / .88);        /* dunkle Kapsel für Hinweise */
  --abdunkeln: oklch(15% .01 60 / .32);        /* hinter Blättern und Dialogen, ohne Unschärfe */

  /* ---------- Höhen (Schatten-Stufen) ---------- */
  --hoehe-1: var(--schatten-klein);            /* Arbeitsfläche, Karten */
  --hoehe-2: var(--glas-schatten-voll);        /* schwebende Leisten, Popover */
  --hoehe-3: 0 2px 4px oklch(30% .02 60 / 8%), 0 16px 40px oklch(30% .02 60 / 18%); /* Dialoge, Blätter */

  /* ---------- Bewegung ----------
     Feder nach Material (Dämpfung 0,9) als linear()-Kurve, ohne sichtbares Überschwingen. 90 % des Wegs sind nach
     rund 40 % der Dauer erreicht, bei 320 ms also nach rund 130 ms sichtbar am Ziel. */
  --feder: linear(0, .1, .295, .494, .659, .782, .868, .925, .96, .98, .992, .998, 1, 1.001, 1.002, 1.001, 1);
  --feder-schnell: 220ms;       /* Auswahlkapsel in der unteren Leiste, Schalter */
  --feder-mittel: 320ms;        /* Blätter, Schublade, Menüs aus dem Knopf */
  --kurve: cubic-bezier(.2, 0, 0, 1);          /* Farbe, Deckkraft, Pfeile */
  --kurve-rein: cubic-bezier(.05, .7, .1, 1);  /* Einblenden */
  --kurve-raus: cubic-bezier(.3, 0, .8, .15);  /* Ausblenden, kürzer als Einblenden */
  --dauer-1: 100ms;             /* Drücken */
  --dauer-2: 160ms;             /* Hover, Farbe, Pfeile, Hinweis aus */
  --dauer-3: 220ms;             /* Hinweis ein */

  /* ---------- Handy ---------- */
  --ziel: 44px;
  --leiste-h: 64px;             /* schwebende Kapsel unten */
  --leiste-abstand: 12px;       /* Kapsel zur Bildschirmkante */
  --chat-kopf-h: 58px;          /* schwebender Chat-Kopf, der Verlauf hält oben so viel frei */
  /* Platz, den Listen und Seiten unten frei halten, damit die letzte Zeile ganz über der Kapsel steht */
  --unten-platz: calc(max(var(--abst-8), var(--su)) + var(--leiste-h) + var(--abst-16));
}

/* Dunkel: eine Quelle. <html> trägt immer data-theme (index.html setzt light, themaSetzen light oder dark). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --app: oklch(12% 0 0); --grund: oklch(17.5% 0 0); --flaeche: oklch(21.5% 0 0); --flaeche-2: oklch(25.5% 0 0);
  --linie: oklch(100% 0 0 / 10%); --linie-stark: oklch(100% 0 0 / 17%);
  --text: oklch(97% 0 0); --text-2: oklch(80% 0 0); --text-3: oklch(66% 0 0); --tinte: oklch(92.2% 0 0); --tinte-text: oklch(20.5% 0 0);
  --akzent: #5bbcf7; --akzent-hell: #3fb0f3; --ungelesen: #3b9dff; --ungelesen-grund: #1c6cbd; --blase-ich: #1c6cbd; --blase-ich-text: #ffffff; --blase-sie: oklch(25% 0 0);
  --warm: #f28a52; --warm-text: #f5a274; --ok: #5cc98a; --pruefen: #4a3d12;
  --schatten: 0 12px 24px #00000066, 0 0 0 var(--haar) var(--linie-stark);
  --schatten-klein: 0 1px 2px #0000004d, 0 0 0 var(--haar) var(--linie-stark);
  --koralle-g: #3a2620; --koralle-t: #f3b4a0; --koralle-p: #ec8664;
  --sand-g: #352c20; --sand-t: #e6c79d; --sand-p: #d1a76c;
  --salbei-g: #1f3326; --salbei-t: #a9d6b3; --salbei-p: #6dba7c;
  --meer-g: #192d40; --meer-t: #9fcdf2; --meer-p: #4aa6ea;
  --lavendel-g: #2a2643; --lavendel-t: #c7bdf2; --lavendel-p: #9b8ae0;
  --sonne-g: #392f14; --sonne-t: #f1d48a; --sonne-p: #e9b934;
  --grau-g: #262b35; --grau-t: #b4bfcc; --grau-p: #7d8898;
  /* dunkel: volle Stufe 6 Punkte dunkler und ruhiger (Chroma 72 %), Weiß darauf mindestens 6,3:1 */
  --koralle-v: oklch(50% 0.113 37); --sand-v: oklch(48.5% 0.077 66); --salbei-v: oklch(46% 0.078 152); --meer-v: oklch(46.5% 0.144 260);
  --lavendel-v: oklch(45% 0.121 287); --sonne-v: oklch(49% 0.083 78); --grau-v: oklch(44% 0.022 256);
  --koralle-g2: oklch(34.9% 0.046 40); --sand-g2: oklch(36.1% 0.034 75); --salbei-g2: oklch(35.5% 0.047 153); --meer-g2: oklch(34.5% 0.055 245);
  --lavendel-g2: oklch(34.1% 0.062 290); --sonne-g2: oklch(37.7% 0.06 90); --grau-g2: oklch(33.2% 0.021 263);
  --auto-band-1: oklch(25.7% 0.125 264); --auto-band-2: oklch(34.1% 0.14 262); --auto-band-3: oklch(41% 0.15 261);
  --auto-flaeche: oklch(13.5% 0 0); --auto-linie: var(--meer-p);
  /* Glas dunkel: normal 0,84 hält --text-2 über Weiß bei 4,8:1; dicht 0,92 mit Nebentext 72 % bei 5,1:1 */
  --glas-fuell: oklch(26.9% 0 0 / .84);
  --glas-fuell-dicht: oklch(25% 0 0 / .92);
  --glas-ersatz: oklch(23% 0 0);
  --glas-text-3: oklch(72% 0 0);
  --glas-auswahl: oklch(100% 0 0 / 10%);
  --glas-kante: inset 0 0 0 var(--haar) oklch(100% 0 0 / 10%);
  --glas-glanz: inset 0 1px 0 oklch(100% 0 0 / 12%);
  --glas-schatten: 0 1px 2px #0000004d, 0 8px 24px #00000066;
  --tinte-glas: oklch(92% 0 0 / .9);
  --abdunkeln: oklch(0% 0 0 / .5);
  --hoehe-3: 0 2px 4px #0000004d, 0 16px 40px #00000080;
}

/* Bewegung reduziert: alle Dauern über die Tokens auf 0 (die harte Sperre weiter unten bleibt zusätzlich) */
@media (prefers-reduced-motion: reduce) {
  :root { --feder-schnell: 0ms; --feder-mittel: 0ms; --dauer-1: 0ms; --dauer-2: 0ms; --dauer-3: 0ms; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--app); color: var(--text);
  font: var(--sg-15)/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
a { color: var(--akzent); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; } }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; border-radius: var(--rund-mittel); }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--schrift-marke); font-weight: 600; margin: 0; letter-spacing: -.015em; }
h1 { font-size: var(--sg-24); line-height: 1.2; }
h2 { font-size: var(--sg-16); }
h3 { font-size: var(--sg-14); }
p { margin: 0; }
.leise { color: var(--text-2); }
.klein { font-size: var(--sg-13); }
.normal { font-weight: 400; font-family: var(--schrift); letter-spacing: 0; }
.warm-text { color: var(--warm-text); }
.ic { width: 18px; height: 18px; flex: none; }
.klein-ic { width: 12px; height: 12px; vertical-align: -1px; margin-left: var(--abst-4); opacity: .7; }
.mz { width: 22px; height: 22px; flex: none; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--abst-4); font: 500 var(--sg-11)/1 var(--schrift); color: var(--text-3); background: var(--grund); border: var(--haar) solid var(--linie-stark); border-radius: var(--rund-klein); }
mark.pruefen { background: var(--pruefen); color: inherit; border-radius: var(--rund-mini); padding: 0 var(--abst-2); }

/* ---------- Glas: ein Baustein für die schwebende Ebene ----------
   .glas ist die normale Füllung (wenig Text: untere Kapsel), .glas.dicht die deckendere (Text: Menüs, Palette,
   Chat-Kopf, Mehr-Blatt). Popover, Palette und Chat-Kopf bekommen das Material über die Liste unten, weil ihr Markup
   an vielen Stellen entsteht. Nie auf Inhalt (Listen, Verlauf, Blasen, Karten), nie Glas auf Glas.
   Auf Glas ist --text-3 nicht sicher lesbar: normal wird es zu --text-2, dicht zu --glas-text-3.
   Rückfälle: ohne backdrop-filter, Glas aus (data-glas auf <html>, der einzige Weg in Safari), Transparenz reduziert,
   mehr Kontrast, erzwungene Farben. */
.glas { --g-fuell: var(--glas-fuell); --text-3: var(--text-2); }
.glas.dicht, .popover, .pl-karte, .chat-kopf { --g-fuell: var(--glas-fuell-dicht); --text-3: var(--glas-text-3); }
.glas, .popover, .pl-karte, .chat-kopf::before {
  background: var(--glas-ersatz); box-shadow: var(--glas-schatten-voll);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas, .popover, .pl-karte, .chat-kopf::before {
    background: var(--g-fuell);
    -webkit-backdrop-filter: blur(16px) saturate(170%); /* ausgeschrieben: Variablen im Präfix sind in Safari nicht belegt */
    backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-saett));
  }
}
:root[data-glas="aus"] .glas, :root[data-glas="aus"] .popover, :root[data-glas="aus"] .pl-karte, :root[data-glas="aus"] .chat-kopf::before {
  background: var(--glas-ersatz); -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  .glas, .popover, .pl-karte, .chat-kopf::before { background: var(--glas-ersatz); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glas, .popover, .pl-karte, .chat-kopf::before { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--text); }
}
@media (forced-colors: active) {
  .glas, .popover, .pl-karte, .chat-kopf::before { background: Canvas; border: 1px solid CanvasText; }
}

#app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
#app.laedt { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
#inhalt { min-width: 0; min-height: 0; overflow: auto; background: var(--grund); }
/* Grauer App-Rahmen, darin die weiße Arbeitsfläche mit 16 px Rundung (nur mit fester Seitenleiste) */
@media (min-width: 1024px) {
  #inhalt { margin: var(--rahmen) var(--rahmen) var(--rahmen) 0; border-radius: var(--rund-flaeche); box-shadow: var(--hoehe-1); }
  .seitenleiste { border-right: 0 !important; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abst-8);
  height: 36px; padding: 0 var(--abst-16); border-radius: var(--rund);
  border: var(--haar) solid var(--linie-stark); background: var(--grund); color: var(--text); font-weight: 500; font-size: var(--sg-14);
  white-space: nowrap; text-decoration: none;
}
@media (hover: hover) { .knopf:hover:not(:disabled) { background: var(--flaeche); text-decoration: none; } }
.knopf:disabled { opacity: .5; }
.knopf.primaer { background: var(--tinte); border-color: var(--tinte); color: var(--tinte-text); }
@media (hover: hover) { .knopf.primaer:hover:not(:disabled) { background: var(--tinte); opacity: .88; } }
.knopf.breit { width: 100%; }
.klein-knopf { height: 32px; padding: 0 var(--abst-12); font-size: var(--sg-13); }
.klein-knopf .ic { width: 15px; height: 15px; }
.icon-knopf { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--rund); color: var(--text-2); flex: none; }
@media (hover: hover) { .icon-knopf:hover { background: var(--flaeche); color: var(--text); text-decoration: none; } }
.text-knopf { display: inline-flex; align-items: center; gap: var(--abst-8); height: 30px; padding: 0 var(--abst-8); border-radius: var(--rund-mittel); color: var(--text-2); font-size: var(--sg-13); font-weight: 500; text-decoration: none; }
@media (hover: hover) { .text-knopf:hover:not(:disabled) { background: var(--flaeche); color: var(--text); text-decoration: none; } }
.text-knopf:disabled { opacity: .45; }
.text-knopf .ic { width: 15px; height: 15px; }

.umschalter { display: inline-flex; padding: var(--abst-2); gap: var(--abst-2); background: var(--flaeche-2); border-radius: var(--rund); flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.umschalter::-webkit-scrollbar { display: none; }
.umschalter button { height: 28px; padding: 0 var(--abst-12); border-radius: var(--rund-mittel); color: var(--text-2); font-weight: 500; font-size: var(--sg-13); white-space: nowrap; }
@media (hover: hover) { .umschalter button:hover { color: var(--text); } }
.umschalter button[aria-checked="true"] { background: var(--grund); color: var(--text); box-shadow: 0 1px 2px rgb(19 24 37 / .08), 0 0 0 var(--haar) var(--linie); }
.umschalter.breit { display: flex; }
.umschalter.breit button { flex: 1; }

/* ---------- Farben je Name: setzen --g, --t, --p für Avatar, Punkt, Chip ---------- */
.f-koralle, .t-koralle, .b-koralle, .c-koralle { --g: var(--koralle-g); --t: var(--koralle-t); --p: var(--koralle-p); }
.f-sand, .t-sand, .b-sand, .c-sand { --g: var(--sand-g); --t: var(--sand-t); --p: var(--sand-p); }
.f-salbei, .t-salbei, .b-salbei, .c-salbei { --g: var(--salbei-g); --t: var(--salbei-t); --p: var(--salbei-p); }
.f-meer, .t-meer, .b-meer, .c-meer { --g: var(--meer-g); --t: var(--meer-t); --p: var(--meer-p); }
.f-lavendel, .t-lavendel, .b-lavendel, .c-lavendel { --g: var(--lavendel-g); --t: var(--lavendel-t); --p: var(--lavendel-p); }
.f-sonne, .t-sonne, .b-sonne, .c-sonne { --g: var(--sonne-g); --t: var(--sonne-t); --p: var(--sonne-p); }
.f-grau, .t-grau, .b-grau, .c-grau { --g: var(--grau-g); --t: var(--grau-t); --p: var(--grau-p); }
.fp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--p, var(--text-3)); flex: none; }

/* ---------- Avatar und Account-Zeichen ---------- */
.av { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--g, var(--flaeche-2)); color: var(--t, var(--text-2)); font: 600 var(--sg-14)/1 var(--schrift-marke); letter-spacing: .01em; }
.av-i { pointer-events: none; }
.av > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av-s { width: 34px; height: 34px; font-size: var(--sg-13); }
.av-m { width: 46px; height: 46px; font-size: var(--sg-15); }
.av-l { width: 72px; height: 72px; font-size: var(--sg-24); }
.kz { position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font: 600 var(--sg-11)/1 var(--schrift-marke); overflow: hidden; }
.kz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-marcelacht { background: var(--tinte); color: var(--tinte-text); }
.kz-mohanatrips { background: var(--akzent-hell); color: #fff; }
.kz .mz { width: 13px; height: 13px; }
.av > .kz { position: absolute; right: -3px; bottom: -3px; box-shadow: 0 0 0 2px var(--grund); }
.av-l > .kz { width: 24px; height: 24px; right: -2px; bottom: -2px; }
.av-s > .kz { width: 15px; height: 15px; right: -3px; bottom: -3px; }
.kz.klein { width: 16px; height: 16px; }
.kz.gross { width: 26px; height: 26px; }
.mit-zeichen { display: inline-flex; align-items: center; gap: var(--abst-8); }
h2.mit-zeichen { gap: var(--abst-8); }

/* ---------- Seitenleiste ---------- */
.seitenleiste { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--app); border-right: var(--haar) solid var(--linie); padding: var(--abst-16) var(--abst-12) var(--abst-12); gap: var(--abst-16); scrollbar-width: thin; }
.sl-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--abst-2) var(--abst-4); }
.sl-marke { display: inline-flex; align-items: center; gap: var(--abst-8); color: var(--text); font: 600 var(--sg-16)/1 var(--schrift-marke); letter-spacing: -.01em; }
.sl-marke img { border-radius: var(--rund-mittel); }
@media (hover: hover) { .sl-marke:hover { text-decoration: none; } }
.sl-zu { display: none; }
.sl-thema { margin-left: auto; width: 32px; height: 32px; }
.sl-thema .ic { width: 17px; height: 17px; }
.umschalter button .ic { width: 14px; height: 14px; margin-right: var(--abst-8); vertical-align: -2px; }
.konto-wahl button { display: inline-flex; align-items: center; gap: var(--abst-8); padding: 0 var(--abst-8); }
.sl-konten .sl-eintrag[aria-checked="true"] { background: var(--grund); color: var(--text); font-weight: 500; box-shadow: 0 0 0 var(--haar) var(--linie); }
.sl-konten .kz.klein { width: 20px; height: 20px; }
.kz-paar { display: inline-flex; width: 30px; flex: none; }
.kz-paar .kz + .kz { margin-left: -8px; box-shadow: 0 0 0 2px var(--app); }
.konto-wahl .kz.klein { width: 18px; height: 18px; }
.sl-bereiche { display: grid; gap: var(--abst-2); }
.sl-bereiche a { display: flex; align-items: center; gap: var(--abst-12); height: 34px; padding: 0 var(--abst-8); border-radius: var(--rund); color: var(--text-2); font-size: var(--sg-14); font-weight: 500; }
.sl-bereiche a .ic { width: 17px; height: 17px; color: var(--text-3); }
@media (hover: hover) { .sl-bereiche a:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; } }
.sl-bereiche a.aktiv { background: var(--grund); color: var(--text); box-shadow: 0 0 0 var(--haar) var(--linie), 0 1px 2px rgb(19 24 37 / .05); }
.sl-bereiche a.aktiv .ic { color: var(--text); }
.sl-filter { display: grid; gap: var(--abst-16); padding-top: var(--abst-16); border-top: var(--haar) solid var(--linie); }
.sl-teil { display: grid; gap: var(--abst-2); }
.sl-titel { display: flex; align-items: center; gap: var(--abst-4); width: 100%; font: 500 var(--sg-12)/1 var(--schrift-marke); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 0 var(--abst-8) var(--abst-8); text-align: left; cursor: default; }
.sl-titel > .sl-pfeil, .sl-hinweis { display: none; }
/* Am Laptop klappen die Teile auf Klick auf und zu, auf dem Handy bleibt die Schublade offen */
@media (min-width: 1024px) {
  .sl-titel { cursor: pointer; min-height: 28px; padding-bottom: 0; border-radius: var(--rund-mittel); }
  @media (hover: hover) { .sl-titel:hover { color: var(--text); } }
  .sl-titel > .sl-pfeil { display: block; }
  .sl-teil.auf > .sl-titel > .sl-pfeil { transform: none; }
  .sl-hinweis { display: block; margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--sg-12)/1 var(--schrift); letter-spacing: 0; text-transform: none; color: var(--text-3); }
  .sl-filter .sl-teil:not(.auf) > :not(.sl-titel) { display: none; }
  .sl-teil.auf > .sl-titel { margin-bottom: var(--abst-4); }
  .sl-filter { gap: var(--abst-8); }
}
.sl-eintrag { display: flex; align-items: center; gap: var(--abst-8); width: 100%; height: 31px; padding: 0 var(--abst-8); border-radius: var(--rund-mittel); color: var(--text-2); font-size: var(--sg-14); text-align: left; }
@media (hover: hover) { .sl-eintrag:hover { background: var(--flaeche-2); color: var(--text); } }
.sl-eintrag[aria-pressed="true"] { background: var(--grund); color: var(--text); font-weight: 500; box-shadow: 0 0 0 var(--haar) var(--linie); }
.sl-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-zahl { font-size: var(--sg-12); color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.sl-pfeil { width: 14px; height: 14px; color: var(--text-3); transform: rotate(-90deg); transition: transform var(--dauer-2) var(--kurve); }
.sl-gruppe.auf .sl-pfeil { transform: none; }
.sl-gruppenkopf { font-weight: 500; color: var(--text); }
.sl-tags { display: none; padding-left: var(--abst-16); }
.sl-gruppe.auf .sl-tags { display: grid; gap: var(--abst-2); }
.sl-tag { height: 29px; font-size: var(--sg-13); }
.sl-unten { margin-top: auto; padding-top: var(--abst-8); border-top: var(--haar) solid var(--linie); }
.sl-hinter { display: none; }
.unten-nav, .unten-mehr { display: none; }
.sl-griff { display: none; }

.aufklapp { position: relative; }
.ich-knopf { position: relative; display: flex; align-items: center; gap: var(--abst-8); border-radius: var(--rund); }
.menue.unten .ich-knopf { width: 100%; padding: var(--abst-8); }
@media (hover: hover) { .menue.unten .ich-knopf:hover { background: var(--flaeche-2); } }
.ich-name { flex: 1; text-align: left; font-weight: 500; font-size: var(--sg-14); }
.ich-mehr { width: 16px; height: 16px; color: var(--text-3); }
.status-punkt { position: absolute; left: 31px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--app); }
.menue.nur-schmal .status-punkt { left: auto; right: -1px; top: -1px; }
.status-punkt.warn { background: var(--warm); }
/* Menüs: dichtes Glas (Baustein oben), Rundung der Fläche, Zeilen darin konzentrisch.
   Seltene Menüs (Konto, Übergeben, Ablauf starten) wachsen aus ihrem Knopf, häufige öffnen ohne Animation. */
.popover {
  position: absolute; z-index: 70; width: 300px; padding: var(--abst-16); border-radius: var(--rund-flaeche);
}
.menue.unten .popover { left: 0; bottom: calc(100% + 8px); transform-origin: left bottom; }
.menue.nur-schmal .popover { right: 0; top: calc(100% + 8px); transform-origin: right top; }
.popover.rechts { right: 0; top: calc(100% + 8px); width: 220px; padding: var(--abst-8); transform-origin: right top; }
.menue-pop, .uebernahme-pop, .ablauf-pop { animation: aus-knopf var(--feder-mittel) var(--feder) both; }
@keyframes aus-knopf { from { opacity: 0; transform: scale(.96); } }
@keyframes blatt-ein { from { transform: translateY(calc(100% + var(--abst-24))); } }
@keyframes dialog-ein { from { opacity: 0; transform: scale(.98); } }
@keyframes abdunkeln-ein { from { opacity: 0; } }
.pop-kopf { display: flex; align-items: center; gap: var(--abst-8); margin-bottom: var(--abst-12); }
.pop-titel { font-family: var(--schrift-marke); font-weight: 600; }
.pop-teil { padding: var(--abst-12) 0; border-top: var(--haar) solid var(--linie); }
.pop-label { font-size: var(--sg-12); color: var(--text-3); font-weight: 500; margin: 0 0 var(--abst-8); }
.pop-teil .umschalter + .umschalter { margin-top: var(--abst-8); }
.popover.rechts .pop-label { margin: var(--abst-4) var(--abst-8) var(--abst-8); }
.pop-aktionen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--abst-8); padding-top: var(--abst-12); border-top: var(--haar) solid var(--linie); }
.pop-zeile { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; padding: 0 var(--abst-8); border-radius: var(--rund-in-flaeche); text-align: left; }
@media (hover: hover) { .pop-zeile:hover { background: var(--flaeche); } }
.pop-zeile .ic { width: 15px; height: 15px; color: var(--text-2); }
.quellen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abst-8); max-height: 240px; overflow: auto; font-size: var(--sg-13); }
.quellen li { display: flex; gap: var(--abst-8); align-items: flex-start; }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; margin-top: var(--abst-8); }
.punkt.ok { background: var(--ok); }
.punkt.warn { background: var(--warm); }
.nur-schmal, .nur-ohne-leiste, .leiste-knopf { display: none !important; }

/* ---------- Postfach: Liste, Chat, Lead-Karte ---------- */
.postfach { display: grid; grid-template-columns: 344px minmax(0, 1fr) 304px; height: 100%; min-height: 0; }
.liste-pane { display: flex; flex-direction: column; min-height: 0; border-right: var(--haar) solid var(--linie); background: var(--grund); }
.liste-kopf { padding: var(--abst-16) var(--abst-16) var(--abst-8); display: grid; gap: var(--abst-12); }
.sk-zeile { display: flex; align-items: center; gap: var(--abst-8); }
.sk-zeile h1 { margin-right: auto; }
.aktualisiert { white-space: nowrap; color: var(--text-3); font-size: var(--sg-12); }
.suche { display: flex; align-items: center; gap: var(--abst-8); height: 38px; padding: 0 var(--abst-12); border-radius: var(--rund); background: var(--flaeche); color: var(--text-3); border: 1px solid transparent; }
.suche:focus-within { border-color: var(--linie-stark); background: var(--grund); }
.suche .ic { width: 16px; height: 16px; }
.suche input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; font-size: var(--sg-14); color: var(--text); }
.suche input::placeholder { color: var(--text-3); }
.tabs { gap: var(--abst-16); margin: 0 -16px -8px; padding: 0 var(--abst-16); overflow-x: auto; scrollbar-width: none; }
.tabs button { position: relative; height: 38px; font: 500 var(--sg-14)/1 var(--schrift-marke); color: var(--text-3); white-space: nowrap; }
@media (hover: hover) { .tabs button:hover { color: var(--text); } }
.tabs button[aria-selected="true"] { color: var(--text); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--rund-mini); background: var(--text); }
/* Offen, Geschlossen, Alle: ruhiger Segment-Schalter wie in Mochi */
.status-wahl { display: flex; gap: var(--abst-2); padding: var(--abst-2); border-radius: var(--rund); background: var(--flaeche); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.status-wahl::-webkit-scrollbar { display: none; }
.status-wahl button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--abst-4); height: 30px; padding: 0 var(--abst-8); border-radius: var(--rund-mittel); font: 500 var(--sg-13)/1 var(--schrift-marke); color: var(--text-3); white-space: nowrap; }
@media (hover: hover) { .status-wahl button:hover { color: var(--text); } }
.status-wahl button[aria-selected="true"] { background: var(--grund); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.sw-zahl { font-size: var(--sg-12); font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.status-wahl button[aria-selected="true"] .sw-zahl { color: var(--text-2); }
/* Wahl-Menüs aus einem Knopf (Account und Status am Handy, app.js wahlMenue): Zeilen mit Haken, ohne Animation */
.wahl-menue { display: none; }
.wahl-pop { padding: var(--abst-8); }
.wahl-pop .pop-zeile { gap: var(--abst-12); justify-content: flex-start; min-height: var(--ziel); height: auto; }
.wahl-pop .pz-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--abst-8); white-space: nowrap; }
.wahl-pop .pz-text > span:not(.kz):not(.kz-paar):not(.sw-zahl) { overflow: hidden; text-overflow: ellipsis; }
.wahl-pop .pop-zeile .ic { color: var(--text); }
.wahl-pop .pop-zeile[aria-checked="true"] { font-weight: 500; }
.status-knopf[hidden] { display: none; }
.status-knopf { border: var(--haar) solid var(--linie-stark); }
.aktive-filter { display: flex; flex-wrap: wrap; gap: var(--abst-8); align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: var(--abst-8); height: 28px; padding: 0 var(--abst-8) 0 var(--abst-8); border-radius: var(--rund-voll); background: var(--flaeche); font-size: var(--sg-13); font-weight: 500; color: var(--text); }
.filter-chip .ic { width: 13px; height: 13px; color: var(--text-3); }
@media (hover: hover) { .filter-chip:hover { background: var(--flaeche-2); } }
@media (hover: hover) { .filter-chip:hover .ic { color: var(--text); } }

.liste { flex: 1; overflow-y: auto; padding: var(--abst-8) var(--abst-8) var(--abst-24); min-height: 0; scrollbar-width: thin; }
/* Scroll-Kante statt Trennlinie unter dem Listenkopf: ein weicher Verlauf oben in der Liste, nur wenn der Inhalt
   gescrollt ist (Klasse kante-oben aus kanteBeobachten in app.js, ohne Unschärfe). Mit reduzierter Bewegung erscheint
   und verschwindet er ohne Übergang (Dauer-Tokens auf 0 und die harte Sperre unten). */
.liste:not(.flach)::before {
  content: ""; display: block; position: sticky; top: 0; z-index: 2; height: var(--abst-16);
  margin: calc(-1 * var(--abst-8)) calc(-1 * var(--abst-8)); pointer-events: none;
  background: linear-gradient(var(--grund), transparent);
  opacity: 0; transition: opacity var(--dauer-2) var(--kurve);
}
.liste.kante-oben:not(.flach)::before { opacity: 1; }
.liste.flach { overflow: visible; padding: var(--abst-4) 0 0; margin: 0 -8px; }
.zeile { display: flex; align-items: flex-start; gap: var(--abst-12); padding: var(--abst-12) var(--abst-8); border-radius: var(--rund); color: inherit; position: relative; }
@media (hover: hover) { .zeile:hover { background: var(--flaeche); text-decoration: none; } }
.zeile.aktiv { background: var(--flaeche-2); }
.zeile.cursor:not(.aktiv) { box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.zeile .av { margin-top: var(--abst-2); }
.zeile-mitte { flex: 1; min-width: 0; display: grid; gap: var(--abst-2); }
.z1, .z2, .z3, .z4 { display: flex; align-items: center; gap: var(--abst-8); min-width: 0; }
.z1 .name { flex: 1; min-width: 0; font: 500 var(--sg-15)/1.35 var(--schrift-marke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.z1 .zeit { font-size: var(--sg-12); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.z2 .vorschau { flex: 1; min-width: 0; color: var(--text-2); font-size: var(--sg-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile.offen .z2 .vorschau { color: var(--text); }
.zeile.offen .z1 .zeit { color: var(--text-2); }
.zeile.neu .z1 .zeit { color: var(--ungelesen); font-weight: 500; }
.zeile.neu .z1 .name { font-weight: 600; }
/* unbeantwortet: leiser grauer Punkt; ungelesen (gemeinsam im Team): blaue Zahl */
.unbeantwortet { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); opacity: .55; flex: none; }
.ungelesen-zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--abst-4); border-radius: var(--rund-voll); background: var(--ungelesen-grund); color: #fff; font: 600 var(--sg-11)/1 var(--schrift); font-variant-numeric: tabular-nums; flex: none; }
.sw-zahl.blau { color: var(--ungelesen); }
/* Eine Zeile: ein Tag wird mit … gekürzt; passt er auch gekürzt nicht, rutscht er in die versteckte zweite Zeile statt halb abgeschnitten zu sein */
.z3 { margin-top: var(--abst-4); gap: var(--abst-8) var(--abst-8); flex-wrap: wrap; max-height: 22px; overflow: hidden; }
.z4 { margin-top: var(--abst-2); font-size: var(--sg-13); color: var(--text-3); }
.z4 .grund { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-chip { display: inline-flex; align-items: center; gap: var(--abst-4); font-size: var(--sg-12); font-weight: 500; color: var(--text); white-space: nowrap; }
/* Stufen-Symbol: kleines farbiges Quadrat mit weißem Linien-Symbol */
.stufe-symbol { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: var(--rund-mini); background: var(--p, var(--text-3)); color: #fff; flex: none; }
.stufe-symbol .ic { width: 11px; height: 11px; stroke-width: 2.2; }
.stufe-symbol.gross { width: 18px; height: 18px; }
.stufe-symbol.gross .ic { width: 12px; height: 12px; }
.quelle-chip { display: inline-flex; align-items: center; gap: var(--abst-4); font-size: var(--sg-12); color: var(--text-3); white-space: nowrap; }
.quelle-chip .ic { width: 12px; height: 12px; }
/* Ring in der Stufenfarbe um das Profilbild */
.ring { display: inline-grid; flex: none; border-radius: 50%; padding: var(--abst-2); box-shadow: inset 0 0 0 1.5px var(--p); margin: -2px; }
.label-chip.mini { font-size: var(--sg-12); }
/* Tags teilen sich den Rest der Zeile (höchstens so breit wie ihr Text), gekürzt mit …, nie schmaler als 46 px */
.tag-mini { display: inline-flex; align-items: center; gap: var(--abst-4); font-size: var(--sg-12); color: var(--text-2); white-space: nowrap; flex: 1 1 0; min-width: 46px; max-width: max-content; overflow: hidden; }
.tag-mini .fp { flex: none; }
.tag-mini .tm-text { min-width: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.tag-mini .fp { width: 6px; height: 6px; }
.tag-mehr { font-size: var(--sg-12); color: var(--text-3); white-space: nowrap; flex: none; }
.hitze { width: 6px; height: 6px; border-radius: 50%; background: var(--warm); flex: none; opacity: .7; }
.hitze.h3 { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 18%, transparent); }
.uhr-klein { display: inline-grid; place-items: center; color: var(--text-3); }
.uhr-klein .ic { width: 13px; height: 13px; }
.zeile.skelett .av, .zeile.skelett i { background: var(--flaeche-2); animation: puls 1.4s ease-in-out infinite; }
.zeile.skelett i { display: block; height: 11px; border-radius: var(--rund-klein); margin: var(--abst-8) 0; }
@keyframes puls { 50% { opacity: .5; } }
.mehr { text-align: center; padding: var(--abst-16); }

.leer { display: grid; place-items: center; align-content: center; gap: var(--abst-8); text-align: center; padding: 48px var(--abst-24); height: 100%; }
.gross-leer { color: var(--text-2); }
.leer-logo { border-radius: var(--rund); margin-bottom: var(--abst-8); opacity: .95; }
.tasten { line-height: 2.2; }
.tasten kbd { margin: 0 var(--abst-2); }

/* Chat */
.chat-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--grund); }
/* Chat-Kopf schwebt als dichte Glas-Kapsel über dem Verlauf, der darunter durchläuft (wie in Nachrichten).
   Das Glas liegt auf ::before, damit die Menüs im Kopf die Seite verwischen und nicht nur den Kopf. */
.chat-kopf {
  position: absolute; z-index: 5; top: var(--abst-8); left: var(--abst-12); right: var(--abst-12);
  display: flex; align-items: center; gap: var(--abst-12); height: var(--chat-kopf-h); padding: 0 var(--abst-12); border-radius: var(--rund-voll);
}
.chat-kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.chat-kopf .zurueck { display: none; margin-left: -8px; }
/* Mindestbreite für die längste Stufe ("Kein Interesse"): die Stufe steht vorn in der Unterzeile und wird nie abgeschnitten */
.chat-titel { flex: 1; min-width: 112px; }
.chat-titel .name { font: 600 var(--sg-16)/1.3 var(--schrift-marke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Unterzeile: jedes Teil steht ganz da oder rutscht in die versteckte zweite Zeile, nie halb abgeschnitten.
   Das erste Teil (die Stufe) passt immer, dafür sorgt die Mindestbreite von .chat-titel. */
.chat-unter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abst-12) var(--abst-8); max-height: 20px; white-space: nowrap; overflow: hidden; color: var(--text-3); }
.chat-unter > .cu-teil { display: inline-flex; align-items: center; gap: var(--abst-8); flex: none; }
.chat-unter > .cu-teil + .cu-teil::before { content: "·"; opacity: .6; }
@media (max-width: 1599px) { .chat-kopf .nur-breit { display: none; } }
.cu-uhr.knapp { color: var(--sonne-t); }
/* Wird es eng, gibt zuerst die Fenster-Uhr nach (nie die Stufe) */
.chat-aktionen { display: flex; align-items: center; gap: var(--abst-2); min-width: 0; }
.kopf-uhr { display: inline-flex; align-items: center; gap: var(--abst-4); height: 28px; padding: 0 var(--abst-8); border-radius: var(--rund-voll); background: var(--flaeche); color: var(--text-2); font-size: var(--sg-13); font-weight: 500; margin-right: var(--abst-4); white-space: nowrap; min-width: 0; overflow: hidden; }
.kopf-uhr .ic { width: 13px; height: 13px; flex: none; }
.kopf-uhr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Unter 1600 px: Schließen nur als Symbol, unter 1360 px das Instagram-Profil nur in der Lead-Karte (Platz für die Stufe) */
@media (max-width: 1599px) { .status-knopf .sk-text { display: none; } .status-knopf { border: 0; } }
@media (max-width: 1359px) { .chat-kopf .ig-link { display: none !important; } }
/* Lese-Hinweis: eigene ruhige Zeile unter der letzten Nachricht */
.gelesen-zeile { align-self: flex-end; margin: var(--abst-8) var(--abst-2) 0; color: var(--text-3); text-align: right; overflow-wrap: anywhere; }
.kopf-uhr.knapp { background: var(--sonne-g); color: var(--sonne-t); }
.lead-knopf { display: none !important; }

.verlauf-rahmen { position: relative; flex: 1; min-height: 0; display: flex; }
.verlauf { flex: 1; overflow-y: auto; padding: calc(var(--chat-kopf-h) + var(--abst-16)) var(--abst-24) var(--abst-16); scroll-padding-top: calc(var(--chat-kopf-h) + var(--abst-16)); outline: none; scrollbar-width: thin; }
.verlauf-innen { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.trenner { align-self: center; margin: var(--abst-24) 0 var(--abst-8); font-size: var(--sg-12); font-weight: 500; color: var(--text-3); }
.reihe { display: flex; flex-direction: column; margin-top: var(--abst-2); max-width: 78%; }
.reihe.erste { margin-top: var(--abst-8); }
.reihe.ich { align-self: flex-end; align-items: flex-end; }
.reihe.sie { align-self: flex-start; align-items: flex-start; }
.blase { padding: var(--abst-8) var(--abst-16); border-radius: var(--rund-gross); font-size: var(--sg-15); line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.reihe.sie .blase { background: var(--blase-sie); color: var(--text); }
.reihe.ich .blase { background: var(--blase-ich); color: var(--blase-ich-text); }
.reihe.ich .blase a { color: inherit; text-decoration: underline; }
.reihe.sie:not(.erste) .blase { border-top-left-radius: var(--rund-klein); }
.reihe.sie:not(.letzte) .blase { border-bottom-left-radius: var(--rund-klein); }
.reihe.ich:not(.erste) .blase { border-top-right-radius: var(--rund-klein); }
.reihe.ich:not(.letzte) .blase { border-bottom-right-radius: var(--rund-klein); }
.blase.emoji { background: none !important; font-size: var(--sg-30); line-height: 1.15; padding: var(--abst-2) 0; }
.b-zeit { font-size: var(--sg-11); color: var(--text-3); margin: var(--abst-4) var(--abst-8) 0; font-variant-numeric: tabular-nums; }
.anhang { display: flex; align-items: center; gap: var(--abst-8); color: inherit; min-width: 220px; text-decoration: none; padding: var(--abst-2) 0; white-space: normal; }
@media (hover: hover) { a.anhang:hover { text-decoration: none; opacity: .85; } }
.anhang > .ic:first-child { width: 34px; height: 34px; padding: var(--abst-8); border-radius: 50%; background: var(--grund); color: var(--text-2); }
.reihe.ich .anhang > .ic:first-child { background: rgb(255 255 255 / .18); color: inherit; }
.anhang-text { flex: 1; min-width: 0; display: grid; }
.anhang-titel { font-weight: 500; }
.anhang-unter { font-size: var(--sg-12); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anhang-link { font-size: var(--sg-13); font-weight: 500; }
.anhang-pfeil { width: 15px; height: 15px; opacity: .6; }
.abschrift { display: block; margin-top: var(--abst-8); }
.blase .medium-link { display: block; line-height: 0; }
.blase .medium { display: block; max-width: min(280px, 100%); max-height: 360px; width: auto; height: auto; border-radius: var(--rund-12); background: var(--grund); object-fit: cover; }
.blase .medium-audio { display: block; width: 260px; max-width: 100%; height: 40px; }
.medium-titel { display: flex; align-items: center; gap: var(--abst-4); font-size: var(--sg-12); opacity: .75; margin-bottom: var(--abst-4); }
.medium-titel .ic { width: 14px; height: 14px; }
.medium-hinweis { display: block; margin-top: var(--abst-4); font-size: var(--sg-12); opacity: .7; }
/* Scroll-Kante über der Eingabe statt Trennlinie: sichtbar, solange unten noch Verlauf kommt (kante-unten) */
.verlauf-rahmen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--abst-16); pointer-events: none;
  background: linear-gradient(transparent, var(--grund)); opacity: 0; transition: opacity var(--dauer-2) var(--kurve);
}
.verlauf-rahmen.kante-unten::after { opacity: 1; }
.neu-hinweis { z-index: 2; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--abst-8); height: 32px; padding: 0 var(--abst-16); border-radius: var(--rund-voll); background: var(--tinte); color: var(--tinte-text); font-size: var(--sg-13); font-weight: 500; box-shadow: var(--glas-schatten); }
.neu-hinweis .ic { width: 15px; height: 15px; }

/* Antwortbereich */
.antwort { flex: none; padding: var(--abst-8) var(--abst-20) var(--abst-16); display: grid; gap: var(--abst-8); container-type: inline-size; }
.antwort > * { width: 100%; max-width: 808px; margin: 0 auto; }
.vb-kopf { display: flex; align-items: center; gap: var(--abst-8); min-height: 30px; }
.vb-schalter { display: inline-flex; align-items: center; gap: var(--abst-8); font: 500 var(--sg-13)/1 var(--schrift-marke); color: var(--text); height: 30px; }
.vb-pfeil { width: 15px; height: 15px; color: var(--text-3); transition: transform var(--dauer-2) var(--kurve); }
.vorschlaege-block.zu .vb-pfeil { transform: rotate(-90deg); }
.vb-meta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
.lade-punkt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent-hell); margin-right: var(--abst-8); vertical-align: 1px; animation: puls 1s ease-in-out infinite; }
.vorschlaege-block.zu .vb-koerper { display: none; }
.vb-koerper { margin-top: var(--abst-4); }
.vorschlaege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abst-8); }
.vorschlag { display: flex; gap: var(--abst-8); align-items: flex-start; text-align: left; padding: var(--abst-8) var(--abst-12); border-radius: var(--rund); border: var(--haar) solid var(--linie); background: var(--grund); min-width: 0; transition: border-color .12s, background .12s; }
@media (hover: hover) { .vorschlag:hover { border-color: var(--linie-stark); background: var(--flaeche); } }
.vorschlag kbd { flex: none; margin-top: var(--abst-2); }
.vorschlag.veraltet { opacity: .5; }
.v-inhalt { min-width: 0; display: grid; gap: var(--abst-2); }
.v-titel { font-size: var(--sg-12); color: var(--text-3); font-weight: 500; }
.v-text { font-size: var(--sg-13); line-height: 1.42; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vorschlag { padding: var(--abst-8) var(--abst-8); gap: var(--abst-8); }
@container (max-width: 520px) {
  .vorschlaege { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--abst-8); scrollbar-width: none; }
  .vorschlaege::-webkit-scrollbar { display: none; }
  .vorschlag { flex: 0 0 82%; scroll-snap-align: start; }
  .vorschlag-hinweis { flex: 1 0 100%; }
}
.v-text span { display: block; }
.vorschlag.skelett { flex-direction: column; gap: var(--abst-8); }
.vorschlag.skelett i { display: block; height: 10px; width: 100%; border-radius: var(--rund-mini); background: var(--flaeche-2); animation: puls 1.4s ease-in-out infinite; }
.vorschlag-hinweis { grid-column: 1 / -1; font-size: var(--sg-14); color: var(--text-2); padding: var(--abst-8) var(--abst-12); border-radius: var(--rund); background: var(--flaeche); }
.vorschlag-hinweis .text-knopf { height: auto; padding: 0; color: var(--akzent); display: inline; font-size: inherit; }
@media (hover: hover) { .vorschlag-hinweis .text-knopf:hover { background: none; text-decoration: underline; } }

.fenster-leiste { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--abst-8) var(--abst-12); padding: var(--abst-12) var(--abst-16); border-radius: var(--rund); background: var(--flaeche); }
.fl-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grund); color: var(--text-2); flex: none; }
.stufe-manychat .fl-icon { background: var(--lavendel-g); color: var(--lavendel-t); }
.fl-icon .ic { width: 16px; height: 16px; }
.fl-text { flex: 1 1 calc(100% - 44px); min-width: 0; margin: var(--abst-8) 0 0; font-size: var(--sg-14); color: var(--text-2); line-height: 1.45; }
/* Knöpfe beginnen unter dem Text: Symbolbreite plus Abstand */
.fl-aktionen { display: flex; flex-wrap: wrap; gap: var(--abst-8); margin-left: calc(32px + var(--abst-12)); }
.vorschau-blasen { font-size: var(--sg-12); color: var(--text-3); padding: 0 var(--abst-8); }
.eingabe { position: relative; display: flex; align-items: flex-end; gap: var(--abst-8); }
.bs-knopf { width: var(--ziel); height: var(--ziel); border-radius: var(--rund-voll); }
.bs-knopf[aria-expanded="true"] { background: var(--flaeche-2); color: var(--text); }
/* Eingabefeld als Kapsel (44 px, Radius halbe Höhe), ab der zweiten Zeile die Rundung der Blasen; Senden ist die
   einzige getönte Aktion (Blau der eigenen Blase), leer wird es ein ruhiger grauer Kreis */
.eingabe textarea {
  flex: 1; min-width: 0; min-height: var(--ziel); resize: none; border: var(--haar) solid var(--linie-stark); border-radius: calc(var(--ziel) / 2);
  background: var(--grund); padding: calc((var(--ziel) - 1lh) / 2 - var(--haar)) var(--abst-16); line-height: 1.45; font-size: var(--sg-15); max-height: 200px; outline: none;
  transition: border-radius var(--dauer-2) var(--kurve);
}
.eingabe textarea.mehrzeilig { border-radius: var(--rund-gross); }
.eingabe textarea:focus { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--flaeche-2); }
.eingabe textarea::placeholder { color: var(--text-3); }
.senden-knopf { display: grid; place-items: center; width: var(--ziel); height: var(--ziel); border-radius: var(--rund-voll); background: var(--blase-ich); color: var(--blase-ich-text); flex: none; transition: background var(--dauer-2) var(--kurve), transform var(--dauer-1) var(--kurve); }
.senden-knopf .ic { width: 18px; height: 18px; margin-left: -2px; }
.senden-knopf:disabled { background: var(--flaeche-2); color: var(--text-3); }
.senden-knopf:active:not(:disabled) { transform: scale(.97); }
.senden-knopf.sendet { animation: puls 1s ease-in-out infinite; }
.antwort.ohne-senden .senden-knopf { display: none; }
.eingabe-info { padding: 0 var(--abst-8); font-size: var(--sg-12); color: var(--text-3); }
.eingabe-info:empty { display: none; }

/* Bausteine-Bibliothek über dem Eingabefeld */
.bs-panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 40; max-height: min(400px, 56dvh); display: flex; flex-direction: column; background: var(--grund); border: var(--haar) solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); overflow: hidden; }
.bs-suche { display: flex; align-items: center; gap: var(--abst-8); padding: 0 var(--abst-16); height: 46px; border-bottom: var(--haar) solid var(--linie); color: var(--text-3); flex: none; }
.bs-suche .ic { width: 16px; height: 16px; }
.bs-suche input { flex: 1; border: 0; background: none; outline: none; font-size: var(--sg-14); color: var(--text); }
.bs-hinweis { padding: var(--abst-8) var(--abst-16) var(--abst-4); flex: none; }
.bs-liste { overflow-y: auto; padding: var(--abst-8); }
.bs-gruppe + .bs-gruppe { margin-top: var(--abst-8); }
.bs-gruppenname { display: flex; align-items: center; gap: var(--abst-8); font: 500 var(--sg-12)/1 var(--schrift-marke); color: var(--text-3); padding: var(--abst-8) var(--abst-8) var(--abst-8); }
.bs-eintrag { display: grid; gap: var(--abst-2); width: 100%; text-align: left; padding: var(--abst-8) var(--abst-8); border-radius: var(--rund); }
.bs-eintrag.gewaehlt { background: var(--flaeche); }
@media (hover: hover) { .bs-eintrag:hover { background: var(--flaeche); } }
.bs-titel { font-size: var(--sg-14); font-weight: 500; }
.bs-text { font-size: var(--sg-13); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-leer { padding: var(--abst-16); }

/* Lead-Karte */
.lead-pane { border-left: var(--haar) solid var(--linie); background: var(--grund); overflow-y: auto; padding: var(--abst-24) var(--abst-20) var(--abst-32); min-height: 0; scrollbar-width: thin; }
.lead-pane:empty { padding: 0; }
.blatt-griff, .blatt-zu { display: none !important; }
.lead-kopf { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--abst-2); padding-bottom: var(--abst-16); }
.lead-kopf .av { margin-bottom: var(--abst-8); }
.lead-name { font: 600 var(--sg-16)/1.3 var(--schrift-marke); }
.lead-grund { margin-top: var(--abst-8); font-size: var(--sg-13); color: var(--text-2); line-height: 1.45; }
.lead-teil { border-top: var(--haar) solid var(--linie); padding: var(--abst-16) 0; }
.lead-teil h3 { margin-bottom: var(--abst-8); }
.lead-teil dl { margin: 0; display: grid; gap: var(--abst-8); }
.kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--abst-8); font-size: var(--sg-14); }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.label-wahl { display: flex; flex-wrap: wrap; gap: var(--abst-8); }
.label-option { display: inline-flex; align-items: center; gap: var(--abst-8); height: 28px; padding: 0 var(--abst-8); border-radius: var(--rund-voll); border: var(--haar) solid var(--linie); font-size: var(--sg-13); font-weight: 500; color: var(--text-2); }
@media (hover: hover) { .label-option:hover { border-color: var(--linie-stark); color: var(--text); } }
.label-option[aria-checked="true"] { background: var(--flaeche-2); color: var(--text); border-color: var(--linie-stark); }
.tag-liste { display: flex; flex-wrap: wrap; gap: var(--abst-8); }
.tag-chip { display: inline-flex; align-items: center; gap: var(--abst-8); min-height: 26px; padding: var(--abst-2) var(--abst-4) var(--abst-2) var(--abst-8); border-radius: var(--rund-mittel); background: var(--g); color: var(--t); font-size: var(--sg-13); font-weight: 500; max-width: 100%; }
.tag-chip > span:not(.fp) { overflow-wrap: anywhere; }
.tag-chip:not(:has(.tag-weg)) { padding-right: var(--abst-8); }
.tag-weg { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--rund-klein); color: inherit; opacity: .55; }
@media (hover: hover) { .tag-weg:hover { opacity: 1; background: rgb(0 0 0 / .06); } }
.tag-weg .ic { width: 12px; height: 12px; }
.tag-plus { margin: var(--abst-8) 0 0 -8px; }
.tag-suche { margin-top: var(--abst-8); border: var(--haar) solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.tag-suche input { width: 100%; height: 36px; padding: 0 var(--abst-12); border: 0; border-bottom: var(--haar) solid var(--linie); background: var(--grund); outline: none; font-size: var(--sg-14); color: var(--text); }
.tag-treffer { max-height: 200px; overflow-y: auto; padding: var(--abst-4); }
.tag-treffer p { padding: var(--abst-8); }
.tag-treffer-zeile { display: flex; align-items: center; gap: var(--abst-8); width: 100%; padding: var(--abst-8) var(--abst-8); border-radius: var(--rund-mittel); font-size: var(--sg-13); text-align: left; }
@media (hover: hover) { .tag-treffer-zeile:hover { background: var(--flaeche); } }
.bestaetigen { margin-top: var(--abst-8); padding: var(--abst-12); border-radius: var(--rund); background: var(--flaeche); display: grid; gap: var(--abst-8); font-size: var(--sg-14); }
.bestaetigen div { display: flex; gap: var(--abst-8); justify-content: flex-end; }
.unter-titel { font-size: var(--sg-12); color: var(--text-3); font-weight: 500; margin: var(--abst-16) 0 var(--abst-8); }
.lead-teil .text-knopf:not(.tag-plus) { margin: var(--abst-8) 0 0 -8px; }
.reisen, .notizen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abst-8); font-size: var(--sg-14); }
.notizen li { padding: var(--abst-8) var(--abst-12); border-radius: var(--rund); background: var(--sonne-g); }
.r-name { font-weight: 500; }
.einstieg { font-size: var(--sg-14); }

/* ---------- Seiten ---------- */
.seite { max-width: 920px; margin: 0 auto; padding: var(--abst-32) var(--abst-48) var(--abst-64); }
.seite.breit { max-width: 1120px; }
.seite.voll { max-width: none; height: 100%; display: flex; flex-direction: column; padding: var(--abst-24) var(--abst-24) var(--abst-20); }
.seite-kopf { display: grid; gap: var(--abst-8); margin-bottom: var(--abst-24); }
.seite-kopf h1 { font-size: var(--sg-24); }
.seite-kopf > p { max-width: 640px; }
.sk-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abst-8); margin-top: var(--abst-12); }
.sk-werkzeuge:empty { display: none; }
.zr-eigen { display: flex; gap: var(--abst-8); font-size: var(--sg-13); color: var(--text-2); }
.zr-eigen input { height: 32px; padding: 0 var(--abst-8); border: var(--haar) solid var(--linie-stark); border-radius: var(--rund-mittel); background: var(--grund); color: var(--text); }
.abschnitt { padding: var(--abst-24) 0; border-top: var(--haar) solid var(--linie); }
.abschnitt:first-of-type { border-top: 0; padding-top: 0; }
.abschnitt > h2 { margin-bottom: var(--abst-16); }
.quelle { color: var(--text-3); margin-top: var(--abst-4); line-height: 1.45; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--abst-24) var(--abst-24); margin-bottom: var(--abst-8); }
.kennzahl { min-width: 0; }
.kz-zahl { font: 600 var(--sg-30)/1.1 var(--schrift-marke); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.kz-zahl.leer { font-size: var(--sg-15); font-weight: 500; color: var(--text-3); letter-spacing: 0; padding: var(--abst-8) 0 var(--abst-4); }
.kz-name { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; font-size: var(--sg-14); color: var(--text-2); margin-top: var(--abst-4); }
.kennzahlen + .quelle { margin-bottom: var(--abst-24); }
.nf-gruppe { padding: var(--abst-24) 0 var(--abst-8); border-top: var(--haar) solid var(--linie); }
.nf-gruppe h2 { display: flex; align-items: center; gap: var(--abst-8); margin-bottom: var(--abst-2); }
.nf-leer { padding: var(--abst-8) var(--abst-8) var(--abst-4); }

.stufen { list-style: none; margin: 0; padding: 0; display: grid; }
.stufe { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--abst-20); align-items: start; padding: var(--abst-16) 0; border-bottom: var(--haar) solid var(--linie); }
.stufe:last-child { border-bottom: 0; }
.stufe-zahl { font: 600 var(--sg-30)/1 var(--schrift-marke); letter-spacing: -.025em; font-variant-numeric: tabular-nums; padding-top: var(--abst-2); }
.stufe-name { font: 500 var(--sg-15)/1.3 var(--schrift-marke); display: flex; flex-wrap: wrap; gap: var(--abst-4) var(--abst-12); align-items: baseline; }
.stufe-quote { font: 400 var(--sg-13)/1.3 var(--schrift); }
.stufe-bahn { height: 8px; border-radius: var(--rund-mini); background: var(--flaeche-2); margin: var(--abst-8) 0 var(--abst-8); overflow: hidden; }
.stufe-bahn span { display: block; height: 100%; border-radius: var(--rund-mini); background: var(--p, var(--blase-ich)); }
.fussnote { margin-top: var(--abst-16); color: var(--text-3); }
.zusatz-teil .kennzahl .quelle { font-size: var(--sg-12); }
.wochen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abst-32); }
.wochen-chart svg { display: block; width: 100%; height: 72px; margin-top: var(--abst-16); }
.wochen-chart .balken { fill: var(--g, var(--flaeche-2)); }
.wochen-chart .balken.letzter { fill: var(--p, var(--blase-ich)); }
@media (hover: hover) { .wochen-chart g:hover .balken { fill: var(--p); } }
.wochen-chart .treffer { fill: transparent; }
.wochen-chart .grundlinie { stroke: var(--linie-stark); stroke-width: 1; }
.wc-achse { display: flex; justify-content: space-between; margin-top: var(--abst-8); color: var(--text-3); }

.tabelle { width: 100%; border-collapse: collapse; font-size: var(--sg-14); margin-top: var(--abst-8); }
.tabelle th { font-weight: 500; font-size: var(--sg-13); color: var(--text-3); text-align: right; padding: 0 0 var(--abst-8) var(--abst-12); border-bottom: var(--haar) solid var(--linie); white-space: nowrap; }
.tabelle th button { display: inline-flex; align-items: center; color: inherit; font-weight: 500; }
@media (hover: hover) { .tabelle th button:hover { color: var(--text); } }
.tabelle th[aria-sort="descending"], .tabelle th[aria-sort="ascending"] { color: var(--text); }
.tabelle td { padding: var(--abst-12) 0 var(--abst-12) var(--abst-12); border-bottom: var(--haar) solid var(--linie); text-align: right; vertical-align: middle; }
.tabelle .links { text-align: left; padding-left: 0; }
.tabelle td.zahl { font: 500 var(--sg-15)/1 var(--schrift-marke); font-variant-numeric: tabular-nums; }
.tabelle td.zahl.stark { color: var(--salbei-t); }
.reel-link { display: inline-flex; align-items: center; gap: var(--abst-8); color: var(--text); }
.reel-link .ic { width: 16px; height: 16px; color: var(--text-3); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--sg-12); }

.auto-konten .abschnitt { padding-top: var(--abst-24); }
.auto-konten .abschnitt:first-child { padding-top: 0; }
.auto-konten h2 { margin-bottom: var(--abst-16); }
.auto-liste { list-style: none; margin: 0; padding: 0; }
.auto-liste li { display: flex; justify-content: space-between; gap: var(--abst-16); padding: var(--abst-12) 0; border-bottom: var(--haar) solid var(--linie); font-size: var(--sg-14); }
.auto-liste li:last-child { border-bottom: 0; }
.auto-liste .zahl { font: 500 var(--sg-15)/1.4 var(--schrift-marke); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pipeline-Board */
.board { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--abst-16); overflow-x: auto; padding-bottom: var(--abst-8); }
.spalte { display: flex; flex-direction: column; min-height: 0; background: var(--app); border-radius: var(--rund-gross); padding: var(--abst-8); border: 1px solid transparent; }
.spalte.ziel { border-color: var(--linie-stark); border-style: dashed; }
.spalte-kopf { display: flex; align-items: center; gap: var(--abst-8); padding: var(--abst-4) var(--abst-8) var(--abst-8); font: 500 var(--sg-14)/1.2 var(--schrift-marke); }
.spalte-zahl { margin-left: auto; font: 400 var(--sg-13)/1 var(--schrift); }
.spalte-karten { flex: 1; min-height: 60px; overflow-y: auto; display: grid; align-content: start; gap: var(--abst-8); }
.karte { display: grid; gap: var(--abst-8); padding: var(--abst-12); border-radius: calc(var(--rund-gross) - var(--abst-8)); background: var(--grund); box-shadow: var(--hoehe-1); color: var(--text); cursor: grab; }
@media (hover: hover) { .karte:hover { box-shadow: 0 1px 2px #0000000f, 0 0 0 1px var(--linie-stark); text-decoration: none; } }
.karte.zieht { opacity: .4; }
.karte-kopf { display: flex; align-items: center; gap: var(--abst-8); min-width: 0; }
.karte-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.karte-name { min-width: 0; font: 500 var(--sg-14)/1.3 var(--schrift-marke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte-wer .zeit { font-size: var(--sg-12); line-height: 1.3; }
.karte-text { font-size: var(--sg-13); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.karte .z4 { margin: 0; }
.karte-platz.skelett { height: 84px; border-radius: calc(var(--rund-gross) - var(--abst-8)); background: var(--flaeche-2); animation: puls 1.4s ease-in-out infinite; }
.spalte-leer { padding: var(--abst-8) var(--abst-8); }

/* Tastenkürzel */
/* Dialoge: deckend über der Abdunklung, Rundung der Dialoge, Höhe 3; ein nur über Deckkraft und scale(.98).
   Am Handy sitzen sie als Blatt unten in der Daumenzone. */
.overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--abst-16); background: var(--abdunkeln); animation: abdunkeln-ein var(--dauer-2) var(--kurve-rein); }
.overlay-karte { width: min(440px, 100%); max-height: 86dvh; overflow: auto; overscroll-behavior: contain; background: var(--grund); border-radius: var(--rund-gross); padding: var(--abst-20) var(--abst-24) var(--abst-24); box-shadow: var(--hoehe-3); animation: dialog-ein var(--dauer-3) var(--kurve-rein); }
.overlay-karte > .sk-zeile .icon-knopf { margin: calc(-1 * var(--abst-8)) calc(-1 * var(--abst-8)) calc(-1 * var(--abst-8)) 0; }
/* Am Handy: Dialoge als Blatt unten in der Daumenzone, eingerückt mit der Blatt-Rundung */
@media (max-width: 759px) {
  .overlay { place-items: end center; padding: var(--abst-8); padding-bottom: max(var(--abst-8), env(safe-area-inset-bottom)); }
  .overlay-karte { width: 100%; max-height: calc(100dvh - var(--abst-48)); border-radius: var(--rund-blatt); padding: var(--abst-24) var(--abst-24) var(--abst-24); animation: blatt-ein var(--dauer-3) var(--kurve-rein); }
}
.kuerzel { margin: var(--abst-12) 0 0; display: grid; gap: var(--abst-8); }
.kuerzel div { display: grid; grid-template-columns: 120px 1fr; gap: var(--abst-12); align-items: center; font-size: var(--sg-14); }
.kuerzel dt { display: flex; gap: var(--abst-4); flex-wrap: wrap; }
.kuerzel dd { margin: 0; color: var(--text-2); }

/* ---------- Anmeldung, Toast ---------- */
body.anmeldung #app { display: flex; align-items: center; justify-content: center; }
.anmelden { width: 100%; padding: var(--abst-24); display: grid; place-items: center; }
.anmelde-form { width: 100%; max-width: 340px; display: grid; gap: var(--abst-16); }
.marke { display: flex; align-items: center; gap: var(--abst-12); font: 600 var(--sg-20)/1 var(--schrift-marke); }
.marke img { border-radius: var(--rund); }
.anmelde-form label { display: grid; gap: var(--abst-8); font-size: var(--sg-13); font-weight: 500; color: var(--text-2); }
.anmelde-form input { height: 42px; padding: 0 var(--abst-16); border-radius: var(--rund); border: var(--haar) solid var(--linie-stark); background: var(--grund); font-size: var(--sg-15); color: var(--text); }
.formfehler { color: var(--warm-text); font-size: var(--sg-13); min-height: 1em; }
/* Hinweis unten: dunkle Glas-Kapsel ("Tinte"), ein mit --dauer-3, aus kürzer mit --dauer-2 */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 100;
  min-height: 40px; display: flex; align-items: center; width: max-content;
  padding: var(--abst-8) var(--abst-20); border-radius: var(--rund-voll); background: var(--tinte); color: var(--tinte-text); font-size: var(--sg-14); font-weight: 500;
  box-shadow: var(--glas-schatten); transition: opacity var(--dauer-2) var(--kurve-raus), transform var(--dauer-2) var(--kurve-raus); max-width: calc(100vw - 32px);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #toast { background: var(--tinte-glas); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-saett)); }
  :root[data-glas="aus"] #toast { background: var(--tinte); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) { #toast { background: var(--tinte); -webkit-backdrop-filter: none; backdrop-filter: none; } }
#toast.zeigen { opacity: 1; transform: translate(-50%, 0); transition-duration: var(--dauer-3); transition-timing-function: var(--kurve-rein); }
#toast.mit-aktion { gap: var(--abst-12); padding: var(--abst-4) var(--abst-4) var(--abst-4) var(--abst-20); }
#toast.mit-aktion.zeigen { pointer-events: auto; }
.toast-aktion { flex: none; min-height: 40px; padding: 0 var(--abst-16); border-radius: var(--rund-voll); color: inherit; font-weight: 600; background: rgb(255 255 255 / .14); }
:root[data-theme="dark"] .toast-aktion { background: rgb(0 0 0 / .1); }
@media (hover: hover) { .toast-aktion:hover { background: rgb(255 255 255 / .24); } }
/* Nachricht wartet noch auf das Senden (Rückgängig-Fenster) */
.reihe.wartet .blase { opacity: .55; }

/* ---------- Lead-Karte als Seitenblatt ---------- */
@media (max-width: 1359px) {
  .postfach { grid-template-columns: 328px minmax(0, 1fr); }
  .lead-knopf { display: inline-grid !important; }
  .lead-pane {
    position: fixed; top: var(--rahmen); right: var(--rahmen); bottom: var(--rahmen); width: min(380px, calc(100vw - 2 * var(--rahmen))); z-index: 60;
    border-left: 0; border-radius: var(--rund-flaeche); box-shadow: var(--hoehe-3);
    transform: translateX(calc(100% + var(--rahmen) + var(--abst-24))); transition: transform var(--feder-mittel) var(--feder), visibility 0s linear var(--feder-mittel);
    visibility: hidden;
  }
  /* Offen sichtbar; zu verschwindet es nach dem Wegschieben aus Tab-Reihenfolge und Vorlesen */
  .lead-pane.offen { transform: none; visibility: visible; transition: transform var(--feder-mittel) var(--feder); }
  .lead-pane .blatt-zu { display: inline-grid !important; position: absolute; right: -8px; top: -14px; }
  .blatt-hinter { position: fixed; inset: 0; background: var(--abdunkeln); z-index: 55; }
}
@media (max-width: 1199px) {
  #app { grid-template-columns: 224px minmax(0, 1fr); }
  .postfach { grid-template-columns: 300px minmax(0, 1fr); }
  .ig-link span { display: none; }
}

/* ---------- Ohne feste Seitenleiste: Leiste als Schublade ---------- */
@media (max-width: 1023px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); z-index: 80; transform: translateX(-100%); transition: transform var(--feder-mittel) var(--feder), visibility 0s linear var(--feder-mittel); box-shadow: var(--hoehe-3); visibility: hidden; }
  /* Zu ist die Schublade unsichtbar und damit aus der Tab-Reihenfolge */
  body.leiste-offen .seitenleiste { transform: none; visibility: visible; transition: transform var(--feder-mittel) var(--feder); }
  .sl-zu { display: inline-grid; }
  .sl-hinter { display: block; position: fixed; inset: 0; z-index: 75; background: var(--abdunkeln); }
  .sl-hinter[hidden] { display: none; }
  .nur-ohne-leiste { display: flex !important; }
  .tabs.nur-ohne-leiste { display: flex !important; }
  .leiste-knopf { display: inline-grid !important; margin-left: -8px; }
  .seite { padding: var(--abst-24) var(--abst-24) var(--abst-48); }
}

/* ---------- Handy: Liste und Chat als zwei Ansichten ---------- */
@media (max-width: 759px) {
  #app { display: flex; flex-direction: column; }
  /* Inhalt läuft unter der schwebenden Kapsel durch: kein Abstand am Behälter, sondern unten in Liste und Seite */
  #inhalt { flex: 1; }
  .nur-schmal { display: block !important; }
  .nur-breit { display: none !important; }
  /* Untere Leiste: schwebende Glas-Kapsel in der Daumenzone, vier Ziele plus Mehr, Auswahl als innere Kapsel,
     die per transform zum neuen Ziel gleitet (Index über :has, kein Skript) */
  .unten-nav {
    display: flex; position: fixed; z-index: 30;
    left: calc(var(--leiste-abstand) + var(--sl)); right: calc(var(--leiste-abstand) + var(--sr)); bottom: max(var(--abst-8), var(--su));
    height: var(--leiste-h); padding: var(--abst-4); border-radius: var(--rund-voll);
  }
  .unten-nav a, .unten-mehr { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abst-2); border-radius: var(--rund-voll); color: var(--text-3); font-size: var(--sg-11); font-weight: 500; transition: color var(--dauer-2) var(--kurve); }
  .unten-nav a span, .unten-mehr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .unten-nav a .ic, .unten-mehr .ic { width: 20px; height: 20px; }
  .unten-nav a.aktiv, .unten-mehr.aktiv { color: var(--text); }
  @media (hover: hover) { .unten-nav a:hover { text-decoration: none; } }
  .unten-nav :focus-visible { outline-offset: -2px; border-radius: var(--rund-voll); }
  .un-auswahl {
    position: absolute; z-index: 0; top: var(--abst-4); bottom: var(--abst-4); left: var(--abst-4); width: calc((100% - var(--abst-8)) / 5);
    border-radius: var(--rund-voll); background: var(--glas-auswahl); pointer-events: none;
    transform: translateX(calc(100% * var(--un-i, 0))); transition: transform var(--feder-schnell) var(--feder);
  }
  .unten-nav:has(> :nth-child(2).aktiv) .un-auswahl { --un-i: 1; }
  .unten-nav:has(> :nth-child(3).aktiv) .un-auswahl { --un-i: 2; }
  .unten-nav:has(> :nth-child(4).aktiv) .un-auswahl { --un-i: 3; }
  .unten-nav:has(> :nth-child(5).aktiv) .un-auswahl { --un-i: 4; }
  .unten-nav:not(:has(> .aktiv)) .un-auswahl { opacity: 0; }
  body.chat-offen .unten-nav { display: none; }
  .liste:not(.flach) { padding-bottom: var(--unten-platz) !important; scroll-padding-bottom: var(--unten-platz); }
  .seite, .seite.breit, .seite.voll { padding-bottom: var(--unten-platz) !important; }

  /* Mehr: Blatt von unten statt Schublade von links, mit Greifer, Schließen, Esc, Zurück und Wischen nach unten.
     Dichtes Glas direkt am Blatt; das Konto-Menü unten entfällt hier (es steht in jedem Seitenkopf), damit kein
     festes Menü in einer Glasfläche hängt und kein Glas auf Glas liegt. */
  .seitenleiste {
    top: auto; left: var(--abst-8); right: var(--abst-8); bottom: max(var(--abst-8), var(--su)); width: auto;
    max-height: calc(100% - var(--so) - var(--abst-48)); border-radius: var(--rund-blatt);
    padding: 0 var(--abst-16) var(--abst-16); gap: var(--abst-12);
    transform: translateY(calc(100% + var(--abst-24))); box-shadow: var(--hoehe-3); overscroll-behavior: contain;
    background: var(--glas-ersatz); --text-3: var(--glas-text-3);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .seitenleiste { background: var(--glas-fuell-dicht); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(var(--glas-blur)) saturate(var(--glas-saett)); }
  }
  :root[data-glas="aus"] .seitenleiste { background: var(--glas-ersatz); -webkit-backdrop-filter: none; backdrop-filter: none; }
  @media (prefers-reduced-transparency: reduce) { .seitenleiste { background: var(--glas-ersatz); -webkit-backdrop-filter: none; backdrop-filter: none; } }
  @media (prefers-contrast: more) { .seitenleiste { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--text); } }
  body.leiste-offen .seitenleiste { transform: translateY(var(--blatt-y, 0px)); }
  .seitenleiste.zieht { transition: none !important; }
  .sl-griff { display: block; position: relative; flex: none; height: var(--abst-24); margin: 0 calc(-1 * var(--abst-16)); touch-action: none; cursor: grab; }
  .sl-griff::before { content: ""; position: absolute; left: calc(50% - 18px); top: var(--abst-8); width: 36px; height: 5px; border-radius: var(--rund-voll); background: var(--linie-stark); }
  .sl-kopf { margin-top: calc(-1 * var(--abst-8)); touch-action: none; }
  .seitenleiste .sl-unten { display: none; }
  .sl-bereiche a { border-radius: var(--rund-in-blatt); }

  .postfach { display: block; height: 100%; }
  .liste-pane { height: 100%; border-right: 0; }
  /* Kopf der Liste in drei Zeilen: Titel ist die Status-Wahl (Offen, Geschlossen, Alle) mit Account-Knopf daneben,
     darunter die Suche, darunter die Ansichten. Das Segment für den Status und die Account-Zeile entfallen. */
  .liste-kopf { padding: var(--abst-8) var(--abst-16) var(--abst-4); gap: var(--abst-8); }
  .liste-kopf .lk-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .liste-kopf .status-wahl, .liste-kopf .aktualisiert { display: none; }
  .konto-wahl.nur-ohne-leiste { display: flex !important; }
  .konto-wahl.nur-ohne-leiste button { flex: 1; justify-content: center; }
  .konto-wahl.nur-tablet { display: none !important; }
  .wahl-menue { display: block; position: relative; flex: none; }
  .status-menue { flex: 0 1 auto; min-width: 0; margin-right: auto; }
  .status-titel {
    display: inline-flex; align-items: center; gap: var(--abst-8); max-width: 100%; min-height: var(--ziel); padding: 0 var(--abst-8);
    border-radius: var(--rund); color: var(--text); font: 600 var(--sg-24)/1.2 var(--schrift-marke); letter-spacing: -.015em; white-space: nowrap;
  }
  .status-titel .st-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .status-titel .sw-zahl { font: 500 var(--sg-15)/1 var(--schrift); color: var(--text-3); letter-spacing: 0; }
  .status-titel .st-pfeil { width: 18px; height: 18px; color: var(--text-3); flex: none; }
  .status-titel[aria-expanded="true"] { background: var(--flaeche); }
  .status-menue .wahl-pop { left: 0; top: calc(100% + var(--abst-4)); width: 248px; transform-origin: left top; }
  .konto-knopf .kz.gross { width: 26px; height: 26px; }
  .konto-knopf .kz-paar { width: 34px; }
  .konto-knopf .kz-paar .kz { width: 22px; height: 22px; }
  .konto-knopf .kz-paar .kz + .kz { margin-left: calc(-1 * var(--abst-8)); box-shadow: 0 0 0 2px var(--grund); }
  .wahl-pop .kz-paar { width: 30px; }
  .wahl-pop .kz-paar .kz + .kz { box-shadow: 0 0 0 2px var(--grund); }
  .liste-kopf .sk-zeile { gap: 0; }
  .liste-kopf .leiste-knopf { margin-right: var(--abst-4); }
  .liste-kopf .tabs { margin-bottom: 0; }
  .liste { padding: var(--abst-4) var(--abst-8) var(--abst-16); }
  .zeile { padding: var(--abst-8); }
  .chat-pane { display: none; }
  body.chat-offen .liste-pane { display: none; }
  body.chat-offen .chat-pane { display: flex; height: 100%; }
  .chat-kopf { top: 0; left: 0; right: 0; border-radius: 0; padding: 0 var(--abst-8) 0 var(--abst-8); gap: var(--abst-8); }
  .chat-kopf::before { box-shadow: var(--glas-schatten); }
  .chat-kopf .zurueck { display: inline-grid; margin-left: 0; }
  /* Unterzeile am Handy: Stufe und Fenster-Uhr (baut chatKopfZeigen), die Uhr steht dann nicht bei den Knöpfen.
     Das Bild im Kopf entfällt, damit Name, Stufe und Uhr Platz haben (in der Liste und Lead-Karte ist es da). */
  .chat-kopf .kopf-uhr { display: none !important; }
  .chat-kopf > .av { display: none; }
  .chat-aktionen .icon-knopf { width: 36px; }
  /* Platz für den Namen: das Instagram-Profil steht auf dem Handy in der Lead-Karte */
  .chat-kopf .ig-link { display: none !important; }
  .kopf-uhr { padding: 0 var(--abst-8); margin-right: 0; }
  .verlauf { padding: calc(var(--chat-kopf-h) + var(--abst-8)) var(--abst-12) var(--abst-12); scroll-padding-top: calc(var(--chat-kopf-h) + var(--abst-8)); }
  .reihe { max-width: 84%; }
  .antwort { padding: var(--abst-8) var(--abst-12) calc(var(--abst-8) + var(--su)); gap: var(--abst-8); }
  .vorschlaege { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--abst-8); margin: 0 -12px; padding: 0 var(--abst-12) var(--abst-2); scrollbar-width: none; }
  .vorschlaege::-webkit-scrollbar { display: none; }
  .vorschlag { flex: 0 0 84%; scroll-snap-align: start; }
  .vorschlag-hinweis { flex: 1 0 100%; }
  .v-text { -webkit-line-clamp: 3; }
  .fenster-leiste { padding: var(--abst-12); gap: var(--abst-8); }
  .fl-aktionen { width: 100%; margin-left: 0; }
  .fl-aktionen > * { flex: 1; }
  /* Lead-Karte (und Call-Karte unten bei Calls): eingerücktes Blatt von unten mit der Rundung der Blätter, deckend
     (viel Text), Greifer oben, Schließen sichtbar; gleiche Form wie das Mehr-Blatt */
  .lead-pane {
    top: auto; left: calc(var(--abst-8) + var(--sl)); right: calc(var(--abst-8) + var(--sr)); bottom: max(var(--abst-8), var(--su)); width: auto;
    max-height: calc(100% - var(--so) - var(--abst-48)); border-radius: var(--rund-blatt); border: 0; box-shadow: var(--hoehe-3); overscroll-behavior: contain;
    padding: 0 var(--abst-20) var(--abst-24);
  }
  .lead-pane { transform: translateY(calc(100% + var(--abst-24))); }
  .lead-pane.offen { transform: none; }
  .blatt-griff { display: block !important; position: sticky; top: 0; z-index: 3; height: var(--abst-24); margin: 0 calc(-1 * var(--abst-20)) var(--abst-8); background: var(--grund); }
  .blatt-griff::before { content: ""; position: absolute; left: calc(50% - 18px); top: var(--abst-8); width: 36px; height: 5px; border-radius: var(--rund-voll); background: var(--linie-stark); }
  .lead-pane .blatt-zu { top: -6px; right: -10px; }

  .seite, .seite.breit, .seite.voll { padding: var(--abst-12) var(--abst-16) var(--abst-32); }
  .seite.voll { height: auto; }
  .seite-kopf { margin-bottom: var(--abst-20); }
  .seite-kopf h1 { font-size: var(--sg-24); }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abst-16) var(--abst-16); }
  .kz-zahl { font-size: var(--sg-24); }
  .stufe { grid-template-columns: 1fr; gap: var(--abst-8); }
  .stufe-zahl { font-size: var(--sg-24); }
  .wochen-raster { grid-template-columns: 1fr; gap: var(--abst-24); }
  .tabelle { font-size: var(--sg-14); }
  .tabelle th, .tabelle td { padding-left: var(--abst-8); }
  .board { grid-auto-columns: 82vw; gap: var(--abst-12); scroll-snap-type: x mandatory; align-items: start; margin: 0 -16px; padding: 0 var(--abst-16) var(--abst-8); scroll-padding: 0 var(--abst-16); }
  .spalte { scroll-snap-align: start; }
  .spalte-karten { overflow: visible; }
  .menue.nur-schmal .popover { width: min(300px, calc(100vw - 32px)); }
}

/* Drücken fühlbar machen: kurz einsinken, ohne Layout zu bewegen */
.knopf, .icon-knopf, .text-knopf { transition: transform var(--dauer-1) var(--kurve); }
.knopf:active:not(:disabled), .icon-knopf:active:not(:disabled), .text-knopf:active:not(:disabled) { transform: scale(.97); }
/* Beim Filterwechsel bleibt die alte Liste kurz gedimmt stehen; Platzhalter erst, wenn es länger als 300 ms dauert */
.liste.laedt-gleich { opacity: .55; transition: opacity 120ms ease-out; }
/* Lange Listen: Zeilen außerhalb des Bildschirms zeichnet der Browser erst beim Hinscrollen */
.liste > .zeile { content-visibility: auto; contain-intrinsic-size: auto 76px; }

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

/* ---------- Gemeinsame Formularteile ---------- */
.feld { width: 100%; min-width: 0; border: var(--haar) solid var(--linie-stark); border-radius: var(--rund); background: var(--grund); padding: var(--abst-8) var(--abst-12); font-size: var(--sg-14); line-height: 1.4; outline: none; }
.feld:focus { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--flaeche); }
.feld::placeholder { color: var(--text-3); }
textarea.feld { resize: vertical; }
.raum { flex: 1; }
.normal { font-weight: 400; }
.status-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--abst-8); border-radius: var(--rund-voll); background: var(--g); color: var(--t); font-size: var(--sg-12); font-weight: 500; white-space: nowrap; }
.ruhig-hinweis { margin: 0 0 var(--abst-20); padding: var(--abst-8) var(--abst-16); border-radius: var(--rund); background: var(--flaeche); color: var(--text-2); font-size: var(--sg-14); }
.umschalter label { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 var(--abst-12); border-radius: var(--rund-mittel); color: var(--text-2); font-weight: 500; font-size: var(--sg-13); white-space: nowrap; cursor: pointer; }
.umschalter label input { position: absolute; opacity: 0; pointer-events: none; }
.umschalter label:has(input:checked) { background: var(--grund); color: var(--text); box-shadow: 0 1px 2px rgb(19 24 37 / .08), 0 0 0 var(--haar) var(--linie); }
.umschalter label:has(input:focus-visible) { outline: 2px solid var(--akzent); }
.umschalter.klein { flex-wrap: wrap; }
.f-zeile { display: grid; gap: var(--abst-8); margin-bottom: var(--abst-16); }
.f-zeile > span:first-child { font-size: var(--sg-13); font-weight: 500; color: var(--text-2); }
.f-zeile small, .f-haken small { display: block; font-size: var(--sg-12); line-height: 1.4; }
.f-zeile.kurz .feld { width: 110px; }
.mit-einheit { display: inline-flex; align-items: center; gap: var(--abst-8); color: var(--text-2); font-size: var(--sg-13); }
.f-haken { display: flex; align-items: flex-start; gap: var(--abst-8); margin-bottom: var(--abst-12); font-size: var(--sg-14); cursor: pointer; }
.f-haken input { margin-top: var(--abst-2); width: 16px; height: 16px; accent-color: var(--tinte); flex: none; }
.haken-reihe { display: flex; flex-wrap: wrap; gap: var(--abst-4) var(--abst-16); }
.haken-reihe .f-haken { margin-bottom: 0; }
.form-fehler { margin: 0 0 var(--abst-12); color: var(--koralle-t); font-size: var(--sg-14); }
.form-knoepfe { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; }
.schalter { display: inline-flex; align-items: center; gap: var(--abst-8); cursor: pointer; font-size: var(--sg-13); color: var(--text-2); flex: none; }
.schalter input { position: absolute; opacity: 0; pointer-events: none; }
.schalter-bahn { position: relative; width: 34px; height: 20px; border-radius: var(--rund-voll); background: var(--flaeche-2); box-shadow: inset 0 0 0 var(--haar) var(--linie-stark); transition: background var(--dauer-2) var(--kurve); }
.schalter-bahn::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--grund); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform var(--feder-schnell) var(--feder); }
.schalter input:checked + .schalter-bahn { background: var(--salbei-p); box-shadow: none; }
.schalter input:checked + .schalter-bahn::after { transform: translateX(14px); }
.schalter input:focus-visible + .schalter-bahn { outline: 2px solid var(--akzent); outline-offset: 2px; }
.schalter.gesperrt { cursor: not-allowed; opacity: .5; }
.f-schalter { margin: var(--abst-4) 0 var(--abst-8); color: var(--text); font-size: var(--sg-14); font-weight: 500; }
.reiter-zeile { display: flex; gap: var(--abst-24); border-bottom: var(--haar) solid var(--linie); margin: -8px 0 var(--abst-24); }
.reiter-zeile a { padding: var(--abst-8) 0; margin-bottom: -2px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; font-size: var(--sg-14); text-decoration: none; }
.reiter-zeile a[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abst-12); margin-bottom: var(--abst-16); }
.datei-knopf { cursor: pointer; }
.sk-werkzeuge { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; }

/* ---------- Reisen ---------- */
.reisen-liste { display: grid; gap: var(--abst-20); margin-top: var(--abst-16); }
.reise { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: var(--haar) solid var(--linie); border-radius: var(--rund-flaeche); overflow: hidden; background: var(--grund); }
.reise-bild { position: relative; background: var(--flaeche); min-height: 180px; }
.reise-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reise-ersatz { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.reise-ersatz .ic { width: 36px; height: 36px; }
.reise-inhalt { padding: var(--abst-16) var(--abst-24) var(--abst-16); min-width: 0; }
.reise-kopf { display: flex; justify-content: space-between; gap: var(--abst-12); align-items: flex-start; }
.reise-kopf h2 { font-size: var(--sg-20); }
.reise-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abst-4) var(--abst-8); margin-top: var(--abst-4); font-size: var(--sg-14); }
.reise-meta .klein-ic { margin: 0 var(--abst-2) 0 0; }
.reise-meta .trenn { opacity: .6; }
.reise-link { flex: none; }
.reise-kurz { margin: var(--abst-8) 0 0; color: var(--text-2); font-size: var(--sg-14); }
.reise-hinweis { display: flex; gap: var(--abst-8); align-items: flex-start; margin: var(--abst-12) 0 0; padding: var(--abst-8) var(--abst-12); border-radius: var(--rund); background: var(--sonne-g); color: var(--sonne-t); font-size: var(--sg-13); }
.reise-hinweis .klein-ic { margin: var(--abst-2) 0 0; opacity: 1; flex: none; }
.termine { display: grid; margin-top: var(--abst-16); }
.termin { padding: var(--abst-12) 0; border-top: var(--haar) solid var(--linie); display: grid; gap: var(--abst-8); }
.termin-kopf { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; font-size: var(--sg-14); }
.termin-datum { display: inline-flex; align-items: center; gap: var(--abst-8); font-weight: 500; }
.termin-datum .klein-ic { margin: 0; }
.belegung { display: grid; grid-template-columns: minmax(120px, 260px) auto; align-items: center; gap: var(--abst-12); font-size: var(--sg-13); color: var(--text-2); }
.beleg-balken { height: 8px; border-radius: var(--rund-voll); background: var(--flaeche-2); overflow: hidden; }
.beleg-balken i { display: block; height: 100%; border-radius: var(--rund-voll); background: var(--p); }
.beleg-text strong { color: var(--text); font-weight: 600; }
.hosts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--abst-8) var(--abst-8); font-size: var(--sg-14); }
.hosts-titel { width: 44px; }
.host { display: inline-flex; align-items: center; gap: var(--abst-4); height: 26px; padding: 0 var(--abst-8); border-radius: var(--rund-voll); background: var(--flaeche); }
.host a { display: inline-flex; color: var(--text-2); }
.host .klein-ic { margin: 0; width: 13px; height: 13px; }
.hosts .text-knopf { height: 26px; }
.hosts-editor { flex: 1 1 100%; display: grid; gap: var(--abst-8); }
.hosts-zeilen { display: grid; gap: var(--abst-8); }
.host-zeile { display: grid; grid-template-columns: 1fr 1fr 36px; gap: var(--abst-8); }
.hosts-aktionen { display: flex; align-items: center; gap: var(--abst-8); }
.reise-anfragen { margin: var(--abst-8) 0 0; }
.reise-anfragen strong { color: var(--text); font-weight: 600; }
.reise.entwurf { grid-template-columns: 1fr; }
.reise.entwurf .reise-bild { display: none; }
.entwuerfe { margin-top: var(--abst-24); }
.entwuerfe summary { display: inline-flex; align-items: center; gap: var(--abst-8); cursor: pointer; list-style: none; font: 600 var(--sg-15)/1.3 var(--schrift-marke); }
.entwuerfe summary::-webkit-details-marker { display: none; }
.entwuerfe summary .klein-ic { margin: 0; transform: rotate(-90deg); transition: transform var(--dauer-2) var(--kurve); }
.entwuerfe[open] summary .klein-ic { transform: none; }

/* ---------- Eigene Automationen ---------- */
.hauptschalter { display: flex; gap: var(--abst-16); align-items: flex-start; padding: var(--abst-16) var(--abst-16); border-radius: var(--rund); background: var(--flaeche); border: var(--haar) solid var(--linie); margin-bottom: var(--abst-16); }
.hauptschalter strong { font: 600 var(--sg-15)/1.4 var(--schrift-marke); }
.hauptschalter p { margin: var(--abst-2) 0 0; }
.hs-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grund); color: var(--text-2); flex: none; }
.hs-icon .ic { width: 15px; height: 15px; }
.hauptschalter.an { background: var(--salbei-g); border-color: transparent; }
.hauptschalter.an .hs-icon { color: var(--salbei-t); }
.auto-status { display: grid; gap: var(--abst-8); margin-bottom: var(--abst-24); padding: 0 var(--abst-2); }
.as-zeile { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; font-size: var(--sg-14); }
.as-zeile .ok { color: var(--salbei-t); }
.as-zeile .ok .klein-ic { margin: 0 var(--abst-2) 0 0; opacity: 1; }
.regeln { display: grid; gap: var(--abst-12); }
.regel { border: var(--haar) solid var(--linie); border-radius: var(--rund); padding: var(--abst-16) var(--abst-16); display: grid; gap: var(--abst-8); }
.regel-kopf { display: flex; gap: var(--abst-12); align-items: flex-start; justify-content: space-between; }
.regel-titel { min-width: 0; }
.regel-titel h3 { font-size: var(--sg-15); }
.regel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abst-2) var(--abst-8); margin-top: var(--abst-4); }
.regel-meta .trenn { opacity: .6; }
.wort { display: inline-flex; padding: var(--abst-2) var(--abst-8); border-radius: var(--rund-klein); background: var(--flaeche); color: var(--text-2); font-size: var(--sg-12); }
.regel-aktionen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abst-8); font-size: var(--sg-14); }
.regel-aktionen li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--abst-8); }
.regel-aktionen li > span:last-child { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.regel-knoepfe { display: flex; gap: var(--abst-8); align-items: center; }
.regel .leise.klein { margin: 0; }
.probe { margin-top: var(--abst-4); padding: var(--abst-12) var(--abst-16); border-radius: var(--rund); background: var(--app); display: grid; gap: var(--abst-8); }
.probe p { margin: 0; }
.probe-kopf { display: flex; align-items: center; gap: var(--abst-8); }
.treffer { list-style: none; margin: var(--abst-8) 0 0; padding: 0; display: grid; gap: var(--abst-8); }
.treffer > li { padding: var(--abst-8) var(--abst-12); border-radius: var(--rund); background: var(--grund); border: var(--haar) solid var(--linie); display: grid; gap: var(--abst-8); }
.treffer > li.eigen { opacity: .6; }
.treffer-wer { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; font-size: var(--sg-14); }
.treffer-text { font-size: var(--sg-14); }
.treffer-aktionen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abst-4); font-size: var(--sg-13); }
.treffer-aktionen li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--abst-8); }
.ta-art { color: var(--text-2); }
.treffer-aktionen li.gesperrt .ta-text { color: var(--text-3); }
.ta-grund { display: block; font-size: var(--sg-12); color: var(--text-3); }
.regel-form { border: var(--haar) solid var(--linie-stark); border-radius: var(--rund); padding: var(--abst-16) var(--abst-16) var(--abst-16); margin-bottom: var(--abst-12); background: var(--grund); }
.regel-form h3 { font-size: var(--sg-15); margin-bottom: var(--abst-16); }
.varianten { display: grid; gap: var(--abst-8); }
.variante { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: var(--abst-8); }
.protokoll td { padding-top: var(--abst-8); padding-bottom: var(--abst-8); }

/* ---------- Audios ---------- */
.aufnahme-platz:empty { display: none; }
.aufnahme { margin-bottom: var(--abst-24); padding: var(--abst-16) var(--abst-16); border-radius: var(--rund); border: var(--haar) solid var(--linie-stark); background: var(--grund); }
.aufnahme p { margin: 0 0 var(--abst-8); }
.aufnahme.laeuft { display: flex; align-items: center; gap: var(--abst-12); }
.rec-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--koralle-p); animation: puls 1.2s ease-in-out infinite; flex: none; }
.rec-zeit { font: 600 var(--sg-15)/1 var(--schrift-marke); font-variant-numeric: tabular-nums; min-width: 40px; }
.pegel { flex: 1; display: flex; align-items: center; gap: var(--abst-2); height: 32px; min-width: 0; }
.pegel i { flex: 1; height: 100%; border-radius: var(--rund-mini); background: var(--text-3); transform: scaleY(.08); transform-origin: center; transition: transform .06s linear; }
.aufnahme.pruefen audio { width: 100%; margin-bottom: var(--abst-12); }
.aufnahme-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--abst-16); }
.aufnahme-felder .f-zeile:last-child { grid-column: 1 / -1; }
.audio-gruppe { margin-bottom: var(--abst-24); }
.audio-gruppe h2 { margin-bottom: var(--abst-8); }
/* minmax(0, 1fr): die Spalte wächst nicht über den Bildschirm, die Mitte kürzt statt die Knöpfe hinauszuschieben */
.audio-liste { display: grid; grid-template-columns: minmax(0, 1fr); }
.audio-zeile { min-width: 0; display: flex; align-items: center; gap: var(--abst-12); padding: var(--abst-8) 0; border-bottom: var(--haar) solid var(--linie); }
.audio-zeile.bearbeiten .feld { flex: 1; }
.spiel-knopf { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--flaeche); color: var(--text); flex: none; }
.spiel-knopf .ic { width: 14px; height: 14px; margin-left: var(--abst-2); }
.spiel-knopf.spielt { background: var(--tinte); color: var(--tinte-text); }
.spiel-knopf.spielt .ic { margin-left: 0; }
.audio-mitte { flex: 1; min-width: 0; }
.audio-titel { font-weight: 500; font-size: var(--sg-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-meta { display: flex; align-items: center; gap: var(--abst-8); margin-top: var(--abst-2); }
.kz-reihe { display: inline-flex; gap: var(--abst-2); }
.audio-fortschritt { height: 2px; margin-top: var(--abst-8); border-radius: var(--rund-mini); background: var(--flaeche-2); overflow: hidden; }
.audio-fortschritt i { display: block; height: 100%; width: 0; background: var(--text-2); }
.audio-aktionen { display: inline-flex; align-items: center; }
.audio-aktionen .loeschen-platz { display: inline-flex; align-items: center; gap: var(--abst-8); }
.au-panel .audio-zeile { padding: var(--abst-8) var(--abst-16); border-bottom: 0; }
@media (hover: hover) { .au-panel .audio-zeile:hover { background: var(--flaeche); } }
.au-liste { overflow-y: auto; padding-bottom: var(--abst-8); }
.au-leer { padding: var(--abst-16); }
.au-meldung { margin: var(--abst-8) var(--abst-12); padding: var(--abst-8) var(--abst-12); border-radius: var(--rund); background: var(--flaeche); font-size: var(--sg-14); }
.au-meldung p { margin: 0; }
.au-meldung p + p { margin-top: var(--abst-4); }
.au-meldung a { display: inline-flex; align-items: center; gap: var(--abst-4); font-weight: 500; }
.au-meldung .klein-ic { margin: 0; }
.au-knopf { margin-left: -8px; }

/* ---------- Notizen ---------- */
.notiz-teil .notizen { margin-bottom: var(--abst-8); }
.notiz-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: var(--abst-4); }
.notiz-fuss .text-knopf { height: 22px; padding: 0 var(--abst-4); }
.notiz-neu { display: grid; gap: var(--abst-8); justify-items: end; }
.notiz-neu .feld { font-size: var(--sg-14); }

@media (max-width: 1023px) {
  .reise { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .reise { grid-template-columns: 1fr; }
  .reise-bild { min-height: 0; aspect-ratio: 16 / 8; }
  .reise-inhalt { padding: var(--abst-16) var(--abst-16); }
  .belegung { grid-template-columns: 1fr; gap: var(--abst-8); }
  .host-zeile { grid-template-columns: 1fr 36px; }
  .host-zeile input:nth-child(2) { grid-row: 2; }
  .regel-kopf { flex-wrap: wrap; }
  .regel-aktionen li, .treffer-aktionen li { grid-template-columns: 1fr; gap: 0; }
  .aufnahme-felder { grid-template-columns: 1fr; }
  /* Audios: Knöpfe treffen 44 px (Grundregel unten), dafür etwas engere Abstände; Bearbeiten bricht in zwei Zeilen um */
  .audio-zeile { gap: var(--abst-8); }
  .audio-zeile.bearbeiten { flex-wrap: wrap; }
  .audio-zeile.bearbeiten .feld { flex: 1 1 100%; min-height: var(--ziel); }
  .audio-zeile.bearbeiten .klein-knopf { flex: 1; }
  /* Löschen bestätigen: Herunterladen und Bearbeiten treten zurück, damit der Titel lesbar bleibt */
  .audio-aktionen:has([data-audio-ja]) > .icon-knopf { display: none; }
  .reiter-zeile { margin-top: 0; }
  .as-zeile { flex-direction: column; align-items: flex-start; gap: var(--abst-2); }
  .au-panel .audio-zeile { gap: var(--abst-8); padding: var(--abst-8) var(--abst-8); }
  .au-senden { width: 36px; padding: 0; }
  .au-senden span { display: none; }
  .au-senden .klein-ic { margin: 0; width: 15px; height: 15px; opacity: 1; }
}

/* ---------- App aufs Handy (PWA) ---------- */
#app { padding-left: var(--sl); padding-right: var(--sr); }
#toast { bottom: calc(24px + var(--su)); }
/* Am Handy sitzt der Hinweis über der schwebenden Kapsel */
@media (max-width: 759px) { body:not(.chat-offen) #toast { bottom: calc(var(--unten-platz) - var(--abst-8)); } }
.push-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--abst-8); margin-top: var(--abst-8); }
.push-fuss .leise { line-height: 1.4; }
.push-fuss .text-knopf { flex: none; }
.push-fuss .text-knopf:disabled { opacity: .4; }
.install-hinweis {
  position: fixed; z-index: 90; left: 12px; right: 12px; bottom: var(--unten-platz);
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--abst-12); align-items: start;
  padding: var(--abst-16) var(--abst-8) var(--abst-16) var(--abst-16); border-radius: var(--rund); background: var(--grund); border: var(--haar) solid var(--linie); box-shadow: var(--schatten);
}
.install-hinweis img { border-radius: var(--rund); border: var(--haar) solid var(--linie); }
.install-hinweis strong { display: block; font-size: var(--sg-14); font-weight: 600; margin-bottom: var(--abst-4); }
.install-hinweis ol { margin: 0 0 var(--abst-8); padding-left: var(--abst-16); font-size: var(--sg-14); line-height: 1.55; }
.install-hinweis .ih-teilen .ic { width: 15px; height: 15px; vertical-align: -2px; color: var(--akzent); }
.install-hinweis .icon-knopf { margin: -8px -2px 0 0; }
@media (min-width: 760px) { .install-hinweis { left: auto; right: 20px; bottom: 20px; width: 360px; } }
body.chat-offen .install-hinweis { display: none; }

/* Keine Zoom-Sprünge auf Touch-Geräten: Eingabefelder mit mindestens 16 px */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: var(--sg-16) !important; }
}

@media (max-width: 759px) {
  html, body { overflow: hidden; }
  #app { height: var(--app-h, 100dvh); padding-top: var(--so); }
  .seitenleiste { padding-top: calc(var(--abst-16) + var(--so)); padding-bottom: calc(var(--abst-12) + var(--su)); }
  /* Tastatur offen: keine Abstände für die Home-Leiste, Leiste unten weg */
  body.tastatur-offen .antwort { padding-bottom: var(--abst-8); }
  body.tastatur-offen .unten-nav, body.tastatur-offen .install-hinweis { display: none; }
  body.tastatur-offen #inhalt { padding-bottom: 0; }
}

/* Mock mit standalone=1: iPhone-Ansicht vom Home-Bildschirm (Statusleiste, Home-Leiste) für Belege */
html[data-geraet="iphone"] { --so: 47px; --su: 34px; }
html[data-geraet="iphone"] body::before {
  content: "9:41"; box-sizing: border-box; position: fixed; z-index: 200; top: 0; left: 0; right: 0; height: 47px; padding: 15px 0 0 46px;
  font: 600 16px/1 -apple-system, var(--schrift); color: var(--text); background: var(--grund); pointer-events: none;
}
html[data-geraet="iphone"] body::after {
  content: ""; position: fixed; z-index: 200; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px;
  border-radius: 3px; background: var(--text); pointer-events: none;
}

/* ---------- Content ---------- */
.content-inhalt { display: grid; gap: var(--abst-32); }
.content-inhalt > .quelle { margin-top: -12px; }
.kette { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: start; gap: 0 var(--abst-4); padding: var(--abst-24) var(--abst-24); border: var(--haar) solid var(--linie); border-radius: var(--rund-flaeche); background: var(--grund); }
.kette-zelle { display: grid; gap: var(--abst-4); min-width: 0; }
.kette-zelle .kz-zahl { font-size: var(--sg-30); }
.kette-titel { font-size: var(--sg-14); font-weight: 600; color: var(--text); }
.kette-pfeil { align-self: center; margin-top: -24px; color: var(--text-3); display: grid; place-items: center; }
.kette-pfeil .ic { width: 16px; height: 16px; }
.delta { display: inline-flex; align-items: center; gap: var(--abst-2); font-size: var(--sg-13); font-weight: 500; white-space: nowrap; color: var(--text-3); }
.delta .ic { width: 12px; height: 12px; }
.delta.auf { color: color-mix(in srgb, #2f8f5b 82%, var(--text)); }
.delta.ab { color: color-mix(in srgb, #c2453a 78%, var(--text)); }
.delta .leise { font-weight: 400; }
.ct-teil { display: grid; gap: var(--abst-12); min-width: 0; }
.ct-teil .abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abst-12); flex-wrap: wrap; }

.ct-tabelle { border: var(--haar) solid var(--linie); border-radius: var(--rund-flaeche); overflow: hidden; background: var(--grund); }
.ct-zeile { display: grid; grid-template-columns: minmax(230px, 1.9fr) repeat(6, minmax(0, 1fr)); align-items: center; gap: var(--abst-12); padding: var(--abst-12) var(--abst-16); border-top: var(--haar) solid var(--linie); }
.ct-kopf { border-top: 0; padding-top: var(--abst-8); padding-bottom: var(--abst-8); font-size: var(--sg-12); font-weight: 500; color: var(--text-3); background: var(--app); }
.ct-gruppe .ct-zeile[data-ct-account] { cursor: pointer; }
@media (hover: hover) { .ct-gruppe .ct-zeile[data-ct-account]:hover { background: var(--app); } }
.ct-name { display: flex; align-items: center; gap: var(--abst-8); min-width: 0; }
.ct-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-auf { width: 14px; height: 14px; color: var(--text-3); transform: rotate(-90deg); transition: transform var(--dauer-2) var(--kurve); }
.ct-gruppe.offen .ct-auf { transform: none; }
.ct-pf { display: inline-flex; gap: var(--abst-2); color: var(--text-3); margin-left: auto; }
.ct-pf .ic { width: 14px; height: 14px; }
.ct-wert { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abst-2) var(--abst-8); min-width: 0; font-variant-numeric: tabular-nums; }
.ct-wert b { font-size: var(--sg-16); font-weight: 600; }
.ct-unter { background: var(--app); padding-top: var(--abst-8); padding-bottom: var(--abst-8); }
.ct-unter .ct-name { padding-left: var(--abst-24); color: var(--text-2); }
.ct-unter .ct-titel { font-weight: 500; }
.ct-unter .ct-wert b { font-size: var(--sg-14); font-weight: 500; }
.ct-pf-ic { width: 16px; height: 16px; color: var(--text-3); }

.heatmap { display: grid; gap: var(--abst-16); padding: var(--abst-16) var(--abst-20); border: var(--haar) solid var(--linie); border-radius: var(--rund-flaeche); background: var(--grund); }
.hm-kopf { display: flex; align-items: baseline; gap: var(--abst-12); margin-bottom: var(--abst-8); }
.hm-name { font-weight: 600; }
.hm-reihe { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; align-items: center; gap: var(--abst-8); margin-top: var(--abst-4); }
.hm-label { font-size: var(--sg-12); color: var(--text-3); }
.hm-summe { font-size: var(--sg-13); color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.hm-zellen { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: var(--abst-2); max-width: 620px; }
.hm-zelle { display: inline-block; aspect-ratio: 1; min-width: 0; border-radius: var(--rund-mini); background: var(--flaeche); }
.hm-posts .hm-zelle.s1, .hm-legende .hm-zelle.s1 { background: color-mix(in srgb, #1f6fc5 22%, var(--grund)); }
.hm-posts .hm-zelle.s2, .hm-legende .hm-zelle.s2 { background: color-mix(in srgb, #1f6fc5 45%, var(--grund)); }
.hm-posts .hm-zelle.s3, .hm-legende .hm-zelle.s3 { background: color-mix(in srgb, #1f6fc5 70%, var(--grund)); }
.hm-posts .hm-zelle.s4, .hm-legende .hm-zelle.s4 { background: #1f6fc5; }
.hm-komm .hm-zelle.s1 { background: color-mix(in srgb, #4f9a6e 22%, var(--grund)); }
.hm-komm .hm-zelle.s2 { background: color-mix(in srgb, #4f9a6e 45%, var(--grund)); }
.hm-komm .hm-zelle.s3 { background: color-mix(in srgb, #4f9a6e 70%, var(--grund)); }
.hm-komm .hm-zelle.s4 { background: #4f9a6e; }
.hm-zelle.markiert { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #d9734e 60%, transparent); }
.hm-fuss { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: var(--abst-8); }
.hm-daten { display: flex; justify-content: space-between; max-width: 620px; }
.hm-legende { grid-column: 2; }
.hm-legende { display: inline-flex; align-items: center; gap: var(--abst-4); }
.hm-legende .hm-zelle { width: 11px; height: 11px; }

.ct-filter { flex-wrap: wrap; }
.ct-posts { list-style: none; margin: 0; padding: 0; border: var(--haar) solid var(--linie); border-radius: var(--rund-flaeche); background: var(--grund); overflow: hidden; }
.ct-post { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--abst-12); padding: var(--abst-12) var(--abst-16); border-top: var(--haar) solid var(--linie); }
.ct-post:first-child { border-top: 0; }
.ct-post-pf { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--rund-mittel); background: var(--flaeche); color: var(--text-2); }
.ct-post-pf .ic { width: 16px; height: 16px; }
.ct-post-titel { display: flex; align-items: center; gap: var(--abst-8); font-weight: 500; min-width: 0; }
.ct-post-titel a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-post-zahlen { display: flex; align-items: center; gap: var(--abst-16); font-size: var(--sg-13); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pk { display: inline-flex; align-items: center; gap: var(--abst-4); white-space: nowrap; }
.pk .ic { width: 15px; height: 15px; color: var(--text-3); }
.pk b { font-weight: 600; color: var(--text); }
.pk .leise { font-size: var(--sg-12); }
.pk-wort { font-size: var(--sg-12); color: var(--text-3); }
a.pk-link { color: inherit; padding: var(--abst-2) var(--abst-8); margin: -2px -8px; border-radius: var(--rund-klein); }
@media (hover: hover) { a.pk-link:hover { background: var(--flaeche); text-decoration: none; } }
.ct-mehr { justify-self: start; }

@media (max-width: 1199px) {
  .ct-post { grid-template-columns: 28px minmax(0, 1fr); }
  .ct-post-zahlen { grid-column: 2; flex-wrap: wrap; gap: var(--abst-8) var(--abst-16); }
}
@media (max-width: 1023px) {
  .ct-kopf { display: none; }
  .ct-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abst-12) var(--abst-16); }
  .ct-zeile .ct-name { grid-column: 1 / -1; }
  .ct-wert { display: grid; gap: var(--abst-2); }
  .ct-wert::before { content: attr(data-l); font-size: var(--sg-12); color: var(--text-3); }
}
@media (max-width: 759px) {
  .content-inhalt { gap: var(--abst-24); }
  .kette { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--abst-16) var(--abst-16); padding: var(--abst-16); }
  .kette-pfeil { display: none; }
  .kette-zelle .kz-zahl { font-size: var(--sg-24); }
  .hm-reihe { grid-template-columns: minmax(0, 1fr) 40px; gap: var(--abst-4) var(--abst-8); }
  .hm-label { grid-column: 1 / -1; }
  .hm-zellen { gap: var(--abst-2); }
  .hm-fuss { grid-template-columns: minmax(0, 1fr); gap: var(--abst-8); }
  .hm-fuss > :first-child { display: none; }
  .hm-legende { grid-column: 1; flex-wrap: wrap; }
  .hm-daten { max-width: none; }
  .ct-zeile { align-items: start; }
  .heatmap { padding: var(--abst-16); }
  .ct-post { padding: var(--abst-12); }
  .ct-filter { background: none; padding: 0; gap: var(--abst-12) var(--abst-8); }
  .ct-filter button { height: 32px; border: var(--haar) solid var(--linie); border-radius: var(--rund-voll); background: var(--grund); }
  .ct-filter button[aria-checked="true"] { background: var(--flaeche-2); border-color: var(--linie-stark); box-shadow: none; }
}

/* ---------- Calls ---------- */
.calls-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abst-12); margin: -8px 0 var(--abst-24); }
.wer-filter { display: flex; gap: var(--abst-8); flex-wrap: wrap; }
.wer-chip { display: inline-flex; align-items: center; gap: var(--abst-8); height: 32px; padding: 0 var(--abst-12); border-radius: var(--rund-voll); border: var(--haar) solid var(--linie); color: var(--text-2); font-size: var(--sg-13); font-weight: 500; background: var(--grund); }
.wer-chip[aria-pressed="true"] { border-color: var(--linie-stark); background: var(--flaeche-2); color: var(--text); }
.calls-inhalt { display: grid; gap: var(--abst-24); }
.call-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abst-16); padding: var(--abst-16) var(--abst-24); border: var(--haar) solid var(--linie); border-radius: var(--rund-flaeche); background: var(--grund); }
.call-zahlen .kz-zahl { font-size: var(--sg-30); }
.call-zahlen > div { display: grid; gap: var(--abst-2); align-content: start; }
.call-liste { display: grid; border: var(--haar) solid var(--linie); border-radius: var(--rund-flaeche); background: var(--grund); overflow: hidden; }
.call-tag { display: grid; gap: var(--abst-8); }
.call-tag .unter-titel { margin: 0; }
.call-zeile { display: grid; grid-template-columns: 64px 46px minmax(0, 1fr) auto; align-items: center; gap: var(--abst-16); padding: var(--abst-12) var(--abst-16); text-align: left; border-top: var(--haar) solid var(--linie); width: 100%; }
.call-zeile:first-child { border-top: 0; }
@media (hover: hover) { .call-zeile:hover { background: var(--app); } }
.call-zeile.aktiv { background: var(--flaeche); }
.call-zeit { display: grid; line-height: 1.2; }
.call-zeit b { font: 600 var(--sg-20)/1.1 var(--schrift-marke); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.call-mitte { display: grid; min-width: 0; }
.call-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-unter { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-wer { display: inline-flex; align-items: center; gap: var(--abst-8); font-size: var(--sg-13); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.call-rechts { display: flex; align-items: center; gap: var(--abst-8); justify-self: end; }
.call-zeile.vorbei .call-zeit b { color: var(--text-3); }
.call-zeile.s-abgesagt .call-zeit b, .call-zeile.s-abgesagt .call-name { text-decoration: line-through; color: var(--text-3); }
.call-zeile.s-abgesagt .call-av { opacity: .45; filter: grayscale(1); }
.call-zeile.s-abgesagt .call-unter, .call-zeile.s-abgesagt .call-wer { color: var(--text-3); }
.call-zeile.s-verschoben .call-zeit b { text-decoration: line-through; color: var(--text-3); }
.call-zeile.s-verschoben .call-av { opacity: .6; }
.leer-zeile { padding: var(--abst-16) 0; }

/* Call-Karte: deckendes Blatt, im grauen Rahmen eingerückt und gerundet wie die Arbeitsfläche; am Handy Blatt von unten */
.call-karte {
  position: fixed; top: var(--rahmen); right: var(--rahmen); bottom: var(--rahmen); width: min(420px, calc(100vw - 2 * var(--rahmen))); z-index: 60;
  overflow-y: auto; overscroll-behavior: contain; background: var(--grund); border-radius: var(--rund-flaeche); box-shadow: var(--hoehe-3);
  padding: var(--abst-24) var(--abst-24) var(--abst-32); scrollbar-width: thin;
}
.call-hinter { position: fixed; inset: 0; z-index: 55; background: var(--abdunkeln); }
.ck-kopf { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--abst-4); padding-bottom: var(--abst-16); }
.ck-kopf .av { margin-bottom: var(--abst-8); }
.ck-zu { position: absolute; right: -8px; top: -8px; }
.ck-meta { display: flex; gap: var(--abst-8); align-items: center; margin-top: var(--abst-8); }
.ck-chat { margin-top: var(--abst-12); display: inline-flex; gap: var(--abst-8); align-items: center; }
.ck-formular { display: grid; gap: var(--abst-2); margin: 0; }
.ck-formular dt { font-size: var(--sg-12); color: var(--text-3); margin-top: var(--abst-8); }
.ck-formular dt:first-child { margin-top: 0; }
.ck-formular dd { margin: 0; }
.call-dms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abst-8); }
.call-dms li { display: grid; gap: var(--abst-2); padding: var(--abst-8) var(--abst-12); border-radius: var(--rund); background: var(--flaeche); max-width: 92%; }
.call-dms li.ich { justify-self: end; background: color-mix(in srgb, var(--akzent) 12%, var(--grund)); }
.naechster-call { display: inline-flex; align-items: center; gap: var(--abst-8); margin-top: var(--abst-8); padding: var(--abst-8) var(--abst-12); border-radius: var(--rund-voll); background: var(--flaeche); color: var(--text); font-size: var(--sg-13); }
.naechster-call .ic { width: 15px; height: 15px; color: var(--text-2); }
@media (hover: hover) { .naechster-call:hover { text-decoration: none; background: var(--flaeche-2); } }
.naechster-call-platz:empty { display: none; }

@media (min-width: 1360px) {
  /* Breit: Karte als eigene Fläche rechts neben der Arbeitsfläche, beide im grauen Rahmen (keine Abdunklung) */
  body.call-offen #inhalt { margin-right: calc(420px + 2 * var(--rahmen)); }
  .call-karte { box-shadow: var(--hoehe-1); }
  .call-hinter { display: none !important; }
}
@media (max-width: 759px) {
  .calls-werkzeuge { margin-top: -8px; }
  .calls-werkzeuge .umschalter { width: 100%; }
  .calls-werkzeuge .umschalter button { flex: 1; padding: 0 var(--abst-8); }
  .call-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--abst-16); gap: var(--abst-16); }
  .call-zahlen > :nth-child(3) { grid-column: 1 / -1; }
  .call-zahlen .kz-zahl { font-size: var(--sg-24); }
  .call-zeile { grid-template-columns: 50px 40px minmax(0, 1fr); gap: var(--abst-4) var(--abst-8); padding: var(--abst-12); align-items: start; }
  .call-zeit b { font-size: var(--sg-16); }
  .call-zeit .bis { display: none; }
  .call-zeile .call-av .av { width: 40px; height: 40px; }
  .call-rechts { grid-column: 3; justify-self: start; }
  .call-zahlen .kette-titel { font-size: var(--sg-13); }
  .call-karte {
    top: auto; left: calc(var(--abst-8) + var(--sl)); right: calc(var(--abst-8) + var(--sr)); bottom: max(var(--abst-8), var(--su)); width: auto;
    max-height: calc(100% - var(--so) - var(--abst-48)); border-radius: var(--rund-blatt); padding: 0 var(--abst-20) var(--abst-24);
    animation: blatt-ein var(--feder-mittel) var(--feder) both;
  }}
.ct-aus .ct-aus-text { grid-column: 2 / -1; }
.ct-auf-platz { width: 14px; flex: none; }
.ct-aus .ct-titel { color: var(--text-2); }
@media (max-width: 1023px) { .ct-aus .ct-aus-text { grid-column: 1 / -1; } }
.call-hinweis { margin-top: -16px; }
.ck-vorschlag { margin-top: var(--abst-8); font-size: var(--sg-13); }

/* ---------- Tippflächen am Handy: mindestens 44 x 44 px ----------
   Wo die Grafik nicht wachsen soll, wächst nur die Trefferfläche (::before, unsichtbar, mittig über dem Knopf). */
@media (max-width: 759px) {
  :root { --ziel: 44px; }
  .icon-knopf, .bs-knopf, .senden-knopf { min-width: var(--ziel); min-height: var(--ziel); }
  .knopf, .klein-knopf { min-height: var(--ziel); }
  .ich-knopf { min-width: var(--ziel); min-height: var(--ziel); justify-content: center; }
  .menue.nur-schmal .status-punkt { right: var(--abst-4); top: var(--abst-4); }
  /* Chat-Kopf: fünf Knöpfe zu 44 px, dafür ohne Rand links und mit kleinerem Abstand */
  .chat-kopf { padding: 0 var(--abst-4) 0 0; gap: var(--abst-4); }
  .chat-kopf .icon-knopf, .chat-kopf .text-knopf { height: var(--ziel); min-width: var(--ziel); justify-content: center; }
  .chat-aktionen { gap: 0; }
  .vb-kopf { min-height: var(--ziel); }
  .vb-schalter, .vb-kopf .neu-knopf { height: var(--ziel); }
  .suche { height: var(--ziel); }
  .status-wahl button { height: var(--ziel); }
  /* Heiß, Nachfassen, Unbeantwortet, Alle: Polsterung statt Lücke, damit auch kurze Wörter 44 px breit treffen */
  .tabs { gap: 0; padding: 0 var(--abst-8); }
  .tabs button { height: var(--ziel); min-width: var(--ziel); padding: 0 var(--abst-8); }
  .tabs button[aria-selected="true"]::after { left: var(--abst-8); right: var(--abst-8); }
  /* Konto-Schalter: Grafik bleibt flach, die Trefferfläche ist 44 px hoch */
  .umschalter { overflow: visible; }
  .umschalter button, .umschalter label { position: relative; }
  .sl-marke { min-height: var(--ziel); }
  /* Kleine Knöpfe und Links in den Inhalten (Teil D2): sichtbar bleiben sie klein, getroffen wird 44 x 44 */
  .umschalter button::before, .umschalter label::before, .filter-chip::before, .tag-weg::before,
  .text-knopf::before, .wer-chip::before, .naechster-call::before, a.pk-link::before, .host a::before, .ct-post-titel a::before,
  .entwuerfe summary::before, .kv dd a::before, .ck-vorschlag a::before, .einstieg a::before,
  .spiel-knopf::before, .tabelle th button::before, a.reel-link::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--ziel)); height: max(100%, var(--ziel)); transform: translate(-50%, -50%);
  }
  .filter-chip, .tag-weg, .text-knopf, .wer-chip, .naechster-call, a.pk-link, .host a, .entwuerfe summary, .kv dd a, .ck-vorschlag a, .einstieg a,
  .spiel-knopf, .tabelle th button, a.reel-link { position: relative; }
  /* Post-Titel kürzt mit …, sein overflow würde die Trefferfläche abschneiden: sie hängt darum an der Titelzeile */
  .ct-post-titel { position: relative; }
  /* Anhänge in Blasen (Reel, Datei) mindestens 44 px hoch */
  .anhang { min-height: var(--ziel); }
  /* Zeilen in Lead- und Call-Karte gleichmäßig mindestens 36 px plus 8 px Abstand: Links darin treffen 44 px,
     ohne die Nachbarzeile zu überdecken */
  .kv { min-height: 36px; align-items: center; }
  /* Kennzahlen unter einem Post: Abstand, damit Titel-Link und Zahlen-Link sich nicht überdecken */
  .ct-post { row-gap: var(--abst-16); }
  .hosts { row-gap: var(--abst-16); }
  .lead-pane .label-option { height: var(--ziel); padding: 0 var(--abst-12); }
  .lead-pane .klein-knopf, .lead-pane .zf-fuss .text-knopf, .lead-pane .label-grund .text-knopf, .lead-teil .text-knopf { height: var(--ziel); }
  .grund-dialog .gd-grund { min-height: var(--ziel); }
  .grund-dialog .gd-knoepfe .knopf { height: var(--ziel); }
  /* Schublade: Bereiche und Filter als volle Zeilen */
  .sl-bereiche a, .sl-eintrag, .sl-tag { height: var(--ziel); }
  .sl-titel { min-height: var(--ziel); align-items: center; padding-bottom: 0; }
  /* Menüs: Schalter und Knöpfe als volle Tippflächen */
  .popover .umschalter button, .popover .text-knopf, .popover .klein-knopf { min-height: var(--ziel); }
  .menue.unten .ich-knopf { min-height: var(--ziel); }
}

/* ---------- Keine Verbindung: dezente Leiste oben (netz.js) ---------- */
.netz-leiste {
  position: fixed; z-index: 95; top: calc(var(--so) + var(--abst-8)); left: var(--abst-16); right: var(--abst-16); width: fit-content; margin: 0 auto;
  display: flex; align-items: center; gap: var(--abst-8);
  padding: var(--abst-8) var(--abst-16); border-radius: var(--rund-voll); background: var(--sonne-g); color: var(--sonne-t);
  font-size: var(--sg-13); font-weight: 500; line-height: 1.35; box-shadow: var(--schatten-klein); animation: netz-ein 180ms ease-out;
}
.netz-leiste .ic { width: 15px; height: 15px; flex: none; }
@keyframes netz-ein { from { opacity: 0; } }

/* ---------- Gesehen und Reaktionen aus dem Webhook (messaging_seen, message_reactions) ---------- */
/* Gesehen unter unserer letzten Nachricht, wie in Instagram: leiser Text rechts unter der Uhrzeit */
.b-gesehen { font-size: var(--sg-11); color: var(--text-3); margin: var(--abst-2) var(--abst-8) 0; font-variant-numeric: tabular-nums; }
/* Reaktion der Person: kleines Emoji, das unten an der Blase hängt */
.reaktionen { display: inline-flex; gap: var(--abst-2); margin: calc(-1 * var(--abst-8)) var(--abst-8) 0; padding: var(--abst-2) var(--abst-4);
  border-radius: var(--rund-voll); background: var(--grund); box-shadow: 0 0 0 2px var(--grund), var(--schatten-klein);
  font-size: var(--sg-13); line-height: 1; position: relative; z-index: 1; }
.reaktion { display: inline-block; }
/* Liste und To-do: gelesen, nicht geantwortet */
.gesehen-marke { flex: none; font-size: var(--sg-11); color: var(--text-3); margin-left: var(--abst-4); white-space: nowrap; }