/* Mohana Postfach: ruhig, klar, wenige Farben. Tinte und Himmelblau aus mohana.de, Aufbau und Dichte
   angelehnt an ein ruhiges DM-Postfach. Hell und dunkel nach Systemeinstellung oder Wahl im Menü. */

@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: 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;
  --app: #f6f7f9;
  --grund: #ffffff;
  --flaeche: #f3f4f7;
  --flaeche-2: #eceef2;
  --linie: #e9ebef;
  --linie-stark: #d8dce3;
  --text: #131825;
  --text-2: #566a81;
  --text-3: #8b97a7;
  --tinte: #131825;
  --tinte-text: #ffffff;
  --akzent: #0a78c2;
  --akzent-hell: #06a1ef;
  --blase-ich: #0f6fc6;
  --blase-ich-text: #ffffff;
  --blase-sie: #f0f2f5;
  --warm: #e8743b;
  --warm-text: #b9541c;
  --ok: #2f9e5b;
  --pruefen: #fff1c2;
  --schatten: 0 1px 2px rgb(19 24 37 / .05), 0 12px 32px rgb(19 24 37 / .10);
  /* 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;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-marke: "Poppins", var(--schrift);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app: #0d1016; --grund: #12151c; --flaeche: #191d26; --flaeche-2: #222734; --linie: #232835; --linie-stark: #323a4b;
    --text: #e9edf3; --text-2: #9eabbd; --text-3: #6f7c8e; --tinte: #e9edf3; --tinte-text: #131825;
    --akzent: #5bbcf7; --akzent-hell: #3fb0f3; --blase-ich: #1c6cbd; --blase-ich-text: #ffffff; --blase-sie: #212633;
    --warm: #f28a52; --warm-text: #f5a274; --ok: #5cc98a; --pruefen: #4a3d12;
    --schatten: 0 1px 2px rgb(0 0 0 / .4), 0 14px 36px rgb(0 0 0 / .5);
    --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;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --app: #0d1016; --grund: #12151c; --flaeche: #191d26; --flaeche-2: #222734; --linie: #232835; --linie-stark: #323a4b;
  --text: #e9edf3; --text-2: #9eabbd; --text-3: #6f7c8e; --tinte: #e9edf3; --tinte-text: #131825;
  --akzent: #5bbcf7; --akzent-hell: #3fb0f3; --blase-ich: #1c6cbd; --blase-ich-text: #ffffff; --blase-sie: #212633;
  --warm: #f28a52; --warm-text: #f5a274; --ok: #5cc98a; --pruefen: #4a3d12;
  --schatten: 0 1px 2px rgb(0 0 0 / .4), 0 14px 36px rgb(0 0 0 / .5);
  --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;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--app); color: var(--text);
  font: 14.5px/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
a { color: var(--akzent); text-decoration: none; }
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: 8px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--schrift-marke); font-weight: 600; margin: 0; letter-spacing: -.015em; }
h1 { font-size: 24px; line-height: 1.2; }
h2 { font-size: 16px; }
h3 { font-size: 13.5px; }
p { margin: 0; }
.leise { color: var(--text-2); }
.klein { font-size: 12.5px; }
.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: 4px; opacity: .7; }
.mz { width: 22px; height: 22px; flex: none; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font: 500 11px/1 var(--schrift); color: var(--text-3); background: var(--grund); border: 1px solid var(--linie-stark); border-radius: 6px; }
mark.pruefen { background: var(--pruefen); color: inherit; border-radius: 4px; padding: 0 3px; }

#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); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--grund); color: var(--text); font-weight: 500; font-size: 13.5px;
  white-space: nowrap; text-decoration: none;
}
.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); }
.knopf.primaer:hover:not(:disabled) { background: var(--tinte); opacity: .88; }
.knopf.breit { width: 100%; }
.klein-knopf { height: 32px; padding: 0 13px; font-size: 13px; }
.klein-knopf .ic { width: 15px; height: 15px; }
.icon-knopf { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--text-2); flex: none; }
.icon-knopf:hover { background: var(--flaeche); color: var(--text); text-decoration: none; }
.text-knopf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 8px; color: var(--text-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.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: 3px; gap: 2px; background: var(--flaeche-2); border-radius: 10px; flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.umschalter::-webkit-scrollbar { display: none; }
.umschalter button { height: 28px; padding: 0 11px; border-radius: 8px; color: var(--text-2); font-weight: 500; font-size: 13px; white-space: nowrap; }
.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 1px 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 14px/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: 12.5px; }
.av-m { width: 46px; height: 46px; font-size: 15px; }
.av-l { width: 72px; height: 72px; font-size: 22px; }
.kz { position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; font: 600 9.5px/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: 6px; }
h2.mit-zeichen { gap: 10px; }

/* ---------- Seitenleiste ---------- */
.seitenleiste { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--app); border-right: 1px solid var(--linie); padding: 14px 12px 12px; gap: 14px; scrollbar-width: thin; }
.sl-kopf { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.sl-marke { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 600 17px/1 var(--schrift-marke); letter-spacing: -.01em; }
.sl-marke img { border-radius: 7px; }
.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: 6px; vertical-align: -2px; }
.konto-wahl button { display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; }
.sl-konten .sl-eintrag[aria-checked="true"] { background: var(--grund); color: var(--text); font-weight: 500; box-shadow: 0 0 0 1px 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: -10px; box-shadow: 0 0 0 2px var(--app); }
.konto-wahl .kz.klein { width: 18px; height: 18px; }
.sl-bereiche { display: grid; gap: 1px; }
.sl-bereiche a { display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 10px; border-radius: 9px; color: var(--text-2); font-size: 14px; font-weight: 500; }
.sl-bereiche a .ic { width: 17px; height: 17px; color: var(--text-3); }
.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 1px var(--linie), 0 1px 2px rgb(19 24 37 / .05); }
.sl-bereiche a.aktiv .ic { color: var(--text); }
.sl-filter { display: grid; gap: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.sl-teil { display: grid; gap: 1px; }
.sl-titel { font: 500 11.5px/1 var(--schrift-marke); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 0 10px 8px; }
.sl-eintrag { display: flex; align-items: center; gap: 9px; width: 100%; height: 31px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; text-align: left; }
.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 1px var(--linie); }
.sl-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-zahl { font-size: 12px; 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 .15s; }
.sl-gruppe.auf .sl-pfeil { transform: none; }
.sl-gruppenkopf { font-weight: 500; color: var(--text); }
.sl-tags { display: none; padding-left: 14px; }
.sl-gruppe.auf .sl-tags { display: grid; gap: 1px; }
.sl-tag { height: 29px; font-size: 13px; }
.sl-unten { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linie); }
.sl-hinter { display: none; }
.unten-nav { display: none; }

.aufklapp { position: relative; }
.ich-knopf { position: relative; display: flex; align-items: center; gap: 10px; border-radius: 10px; }
.menue.unten .ich-knopf { width: 100%; padding: 6px; }
.menue.unten .ich-knopf:hover { background: var(--flaeche-2); }
.ich-name { flex: 1; text-align: left; font-weight: 500; font-size: 14px; }
.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); }
.popover {
  position: absolute; z-index: 70; width: 300px; padding: 14px; border-radius: 16px;
  background: var(--grund); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.menue.unten .popover { left: 0; bottom: calc(100% + 8px); }
.menue.nur-schmal .popover { right: 0; top: calc(100% + 8px); }
.popover.rechts { right: 0; top: calc(100% + 6px); width: 220px; padding: 8px; }
.pop-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pop-titel { font-family: var(--schrift-marke); font-weight: 600; }
.pop-teil { padding: 12px 0; border-top: 1px solid var(--linie); }
.pop-label { font-size: 12px; color: var(--text-3); font-weight: 500; margin: 0 0 8px; }
.popover.rechts .pop-label { margin: 4px 8px 6px; }
.pop-aktionen { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--linie); }
.pop-zeile { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; text-align: left; }
.pop-zeile:hover { background: var(--flaeche); }
.pop-zeile .ic { width: 15px; height: 15px; color: var(--akzent); }
.quellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 240px; overflow: auto; font-size: 13px; }
.quellen li { display: flex; gap: 10px; align-items: flex-start; }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; margin-top: 7px; }
.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: 1px solid var(--linie); background: var(--grund); }
.liste-kopf { padding: 18px 16px 10px; display: grid; gap: 12px; border-bottom: 1px solid var(--linie); }
.sk-zeile { display: flex; align-items: center; gap: 10px; }
.sk-zeile h1 { margin-right: auto; }
.aktualisiert { white-space: nowrap; color: var(--text-3); font-size: 12px; }
.suche { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; 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: 14px; color: var(--text); }
.suche input::placeholder { color: var(--text-3); }
.tabs { gap: 18px; margin: 0 -16px -10px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.tabs button { position: relative; height: 38px; font: 500 14px/1 var(--schrift-marke); color: var(--text-3); white-space: nowrap; }
.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: 2px; background: var(--text); }
.aktive-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--flaeche); font-size: 12.5px; font-weight: 500; color: var(--text); }
.filter-chip .ic { width: 13px; height: 13px; color: var(--text-3); }
.filter-chip:hover { background: var(--flaeche-2); }
.filter-chip:hover .ic { color: var(--text); }

.liste { flex: 1; overflow-y: auto; padding: 6px 8px 24px; min-height: 0; scrollbar-width: thin; }
.liste.flach { overflow: visible; padding: 4px 0 0; margin: 0 -10px; }
.zeile { display: flex; align-items: flex-start; gap: 12px; padding: 11px 10px; border-radius: 14px; color: inherit; position: relative; }
.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: 1px; }
.zeile-mitte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.z1, .z2, .z3, .z4 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.z1 .name { flex: 1; min-width: 0; font: 500 14.5px/1.35 var(--schrift-marke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.z1 .zeit { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.z2 .vorschau { flex: 1; min-width: 0; color: var(--text-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile.offen .z2 .vorschau { color: var(--text); }
.zeile.offen .z1 .zeit { color: var(--akzent); font-weight: 500; }
.ungelesen { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-hell); flex: none; }
.z3 { margin-top: 5px; gap: 10px; overflow: hidden; }
.z4 { margin-top: 3px; font-size: 12.5px; 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: 5px; font-size: 12px; font-weight: 600; color: var(--t); white-space: nowrap; }
.label-chip.mini { font-size: 12px; }
.tag-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tag-mini .fp { width: 6px; height: 6px; }
.tag-mehr { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.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: 6px; margin: 6px 0; }
@keyframes puls { 50% { opacity: .5; } }
.mehr { text-align: center; padding: 14px; }

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

/* Chat */
.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--grund); }
.chat-kopf { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--linie); flex: none; }
.chat-kopf .zurueck { display: none; margin-left: -8px; }
.chat-titel { flex: 1; min-width: 0; }
.chat-titel .name { font: 600 15.5px/1.3 var(--schrift-marke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unter { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; color: var(--text-3); }
.chat-unter .trenn { opacity: .6; }
.chat-unter > * { flex: none; }
@media (max-width: 1599px) { .chat-kopf .nur-breit { display: none; } }
.chat-unter > .cu-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chat-aktionen { display: flex; align-items: center; gap: 2px; }
.kopf-uhr { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--flaeche); color: var(--text-2); font-size: 12.5px; font-weight: 500; margin-right: 4px; white-space: nowrap; }
.kopf-uhr .ic { width: 13px; height: 13px; }
.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: 8px 24px 16px; outline: none; scrollbar-width: thin; }
.verlauf-innen { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.trenner { align-self: center; margin: 22px 0 10px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.reihe { display: flex; flex-direction: column; margin-top: 2px; max-width: 78%; }
.reihe.erste { margin-top: 10px; }
.reihe.ich { align-self: flex-end; align-items: flex-end; }
.reihe.sie { align-self: flex-start; align-items: flex-start; }
.blase { padding: 8px 14px; border-radius: 20px; font-size: 14.5px; 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: 6px; }
.reihe.sie:not(.letzte) .blase { border-bottom-left-radius: 6px; }
.reihe.ich:not(.erste) .blase { border-top-right-radius: 6px; }
.reihe.ich:not(.letzte) .blase { border-bottom-right-radius: 6px; }
.blase.emoji { background: none !important; font-size: 34px; line-height: 1.15; padding: 2px 0; }
.b-zeit { font-size: 11px; color: var(--text-3); margin: 4px 6px 0; }
.anhang { display: flex; align-items: center; gap: 10px; color: inherit; min-width: 220px; text-decoration: none; padding: 2px 0; white-space: normal; }
a.anhang:hover { text-decoration: none; opacity: .85; }
.anhang > .ic:first-child { width: 34px; height: 34px; padding: 8px; 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: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anhang-link { font-size: 13px; font-weight: 500; }
.anhang-pfeil { width: 15px; height: 15px; opacity: .6; }
.abschrift { display: block; margin-top: 6px; }
.neu-hinweis { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--tinte); color: var(--tinte-text); font-size: 13px; font-weight: 500; box-shadow: var(--schatten); }
.neu-hinweis .ic { width: 15px; height: 15px; }

/* Antwortbereich */
.antwort { flex: none; padding: 10px 20px 14px; border-top: 1px solid var(--linie); display: grid; gap: 10px; container-type: inline-size; }
.antwort > * { width: 100%; max-width: 808px; margin: 0 auto; }
.vb-kopf { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.vb-schalter { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--schrift-marke); color: var(--text); height: 30px; }
.vb-pfeil { width: 15px; height: 15px; color: var(--text-3); transition: transform .15s; }
.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: 6px; vertical-align: 1px; animation: puls 1s ease-in-out infinite; }
.vorschlaege-block.zu .vb-koerper { display: none; }
.vb-koerper { margin-top: 4px; }
.vorschlaege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vorschlag { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linie); background: var(--grund); min-width: 0; transition: border-color .12s, background .12s; }
.vorschlag:hover { border-color: var(--linie-stark); background: var(--flaeche); }
.vorschlag kbd { flex: none; margin-top: 1px; }
.vorschlag.veraltet { opacity: .5; }
.v-inhalt { min-width: 0; display: grid; gap: 3px; }
.v-titel { font-size: 12px; color: var(--text-3); font-weight: 500; }
.v-text { font-size: 13px; line-height: 1.42; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vorschlag { padding: 9px 10px; gap: 8px; }
@container (max-width: 520px) {
  .vorschlaege { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; 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: 8px; }
.vorschlag.skelett i { display: block; height: 10px; width: 100%; border-radius: 5px; background: var(--flaeche-2); animation: puls 1.4s ease-in-out infinite; }
.vorschlag-hinweis { grid-column: 1 / -1; font-size: 13.5px; color: var(--text-2); padding: 10px 12px; border-radius: 12px; background: var(--flaeche); }
.vorschlag-hinweis .text-knopf { height: auto; padding: 0; color: var(--akzent); display: inline; font-size: inherit; }
.vorschlag-hinweis .text-knopf:hover { background: none; text-decoration: underline; }

.fenster-leiste { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px 14px; border-radius: 16px; 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: 6px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.fl-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 44px; }
.vorschau-blasen { font-size: 12px; color: var(--text-3); padding: 0 6px; }
.eingabe { position: relative; display: flex; align-items: flex-end; gap: 6px; }
.bs-knopf { width: 42px; height: 42px; border-radius: 50%; }
.bs-knopf[aria-expanded="true"] { background: var(--flaeche-2); color: var(--text); }
.eingabe textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--linie); border-radius: 22px; background: var(--grund); padding: 10px 16px; line-height: 1.45; font-size: 14.5px; max-height: 200px; outline: none; }
.eingabe textarea:focus { border-color: var(--linie-stark); box-shadow: 0 0 0 3px var(--flaeche); }
.eingabe textarea::placeholder { color: var(--text-3); }
.senden-knopf { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--tinte); color: var(--tinte-text); flex: none; }
.senden-knopf .ic { width: 18px; height: 18px; margin-left: -2px; }
.senden-knopf:disabled { opacity: .25; }
.senden-knopf.sendet { animation: puls 1s ease-in-out infinite; }
.antwort.ohne-senden .senden-knopf { display: none; }
.eingabe-info { padding: 0 8px; font-size: 11.5px; 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: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten); overflow: hidden; }
.bs-suche { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px; border-bottom: 1px 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: 14px; color: var(--text); }
.bs-hinweis { padding: 10px 14px 4px; flex: none; }
.bs-liste { overflow-y: auto; padding: 6px; }
.bs-gruppe + .bs-gruppe { margin-top: 6px; }
.bs-gruppenname { display: flex; align-items: center; gap: 7px; font: 500 12px/1 var(--schrift-marke); color: var(--text-3); padding: 10px 8px 6px; }
.bs-eintrag { display: grid; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; }
.bs-eintrag:hover, .bs-eintrag.gewaehlt { background: var(--flaeche); }
.bs-titel { font-size: 13.5px; font-weight: 500; }
.bs-text { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-leer { padding: 14px; }

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

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

.stufen { list-style: none; margin: 0; padding: 0; display: grid; }
.stufe { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.stufe:last-child { border-bottom: 0; }
.stufe-zahl { font: 600 34px/1 var(--schrift-marke); letter-spacing: -.025em; font-variant-numeric: tabular-nums; padding-top: 2px; }
.stufe-name { font: 500 15px/1.3 var(--schrift-marke); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.stufe-quote { font: 400 13px/1.3 var(--schrift); }
.stufe-bahn { height: 8px; border-radius: 4px; background: var(--flaeche-2); margin: 10px 0 8px; overflow: hidden; }
.stufe-bahn span { display: block; height: 100%; border-radius: 4px; background: var(--p, var(--blase-ich)); }
.fussnote { margin-top: 14px; color: var(--text-3); }
.zusatz-teil .kennzahl .quelle { font-size: 12px; }
.wochen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.wochen-chart svg { display: block; width: 100%; height: 72px; margin-top: 14px; }
.wochen-chart .balken { fill: var(--g, var(--flaeche-2)); }
.wochen-chart .balken.letzter { fill: var(--p, var(--blase-ich)); }
.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: 6px; color: var(--text-3); }

.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.tabelle th { font-weight: 500; font-size: 12.5px; color: var(--text-3); text-align: right; padding: 0 0 10px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle th button { display: inline-flex; align-items: center; color: inherit; font-weight: 500; }
.tabelle th button:hover { color: var(--text); }
.tabelle th[aria-sort="descending"], .tabelle th[aria-sort="ascending"] { color: var(--text); }
.tabelle td { padding: 13px 0 13px 12px; border-bottom: 1px solid var(--linie); text-align: right; vertical-align: middle; }
.tabelle .links { text-align: left; padding-left: 0; }
.tabelle td.zahl { font: 500 15px/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: 8px; 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: 12px; }

.auto-konten .abschnitt { padding-top: 24px; }
.auto-konten .abschnitt:first-child { padding-top: 0; }
.auto-konten h2 { margin-bottom: 16px; }
.auto-liste { list-style: none; margin: 0; padding: 0; }
.auto-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.auto-liste li:last-child { border-bottom: 0; }
.auto-liste .zahl { font: 500 14.5px/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(180px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.spalte { display: flex; flex-direction: column; min-height: 0; background: var(--app); border-radius: 16px; padding: 10px; border: 1px solid transparent; }
.spalte.ziel { border-color: var(--linie-stark); border-style: dashed; }
.spalte-kopf { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font: 500 14px/1.2 var(--schrift-marke); }
.spalte-zahl { margin-left: auto; font: 400 12.5px/1 var(--schrift); }
.spalte-karten { flex: 1; min-height: 60px; overflow-y: auto; display: grid; align-content: start; gap: 8px; }
.karte { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--grund); border: 1px solid var(--linie); color: var(--text); cursor: grab; }
.karte:hover { border-color: var(--linie-stark); text-decoration: none; }
.karte.zieht { opacity: .4; }
.karte-kopf { display: flex; align-items: center; gap: 9px; min-width: 0; }
.karte-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.karte-name { min-width: 0; font: 500 13.5px/1.3 var(--schrift-marke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte-wer .zeit { font-size: 11.5px; line-height: 1.3; }
.karte-text { font-size: 13px; 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: 12px; background: var(--flaeche-2); animation: puls 1.4s ease-in-out infinite; }
.spalte-leer { padding: 8px 6px; }

/* Tastenkürzel */
.overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgb(13 16 22 / .38); }
.overlay-karte { width: min(440px, 100%); max-height: 86dvh; overflow: auto; background: var(--grund); border-radius: 18px; padding: 18px 20px 20px; box-shadow: var(--schatten); }
.kuerzel { margin: 12px 0 0; display: grid; gap: 10px; }
.kuerzel div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; font-size: 13.5px; }
.kuerzel dt { display: flex; gap: 4px; 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: 24px; display: grid; place-items: center; }
.anmelde-form { width: 100%; max-width: 340px; display: grid; gap: 14px; }
.marke { display: flex; align-items: center; gap: 12px; font: 600 20px/1 var(--schrift-marke); }
.marke img { border-radius: 10px; }
.anmelde-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.anmelde-form input { height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linie-stark); background: var(--grund); font-size: 15px; color: var(--text); }
.formfehler { color: var(--warm-text); font-size: 13px; min-height: 1em; }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 100;
  padding: 10px 16px; border-radius: 12px; background: var(--tinte); color: var(--tinte-text); font-size: 13.5px; font-weight: 500;
  box-shadow: var(--schatten); transition: opacity .18s, transform .18s; max-width: calc(100vw - 32px);
}
#toast.zeigen { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 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: 0; right: 0; bottom: 0; width: min(380px, 100vw); z-index: 60;
    transform: translateX(100%); transition: transform .22s ease; box-shadow: var(--schatten);
  }
  .lead-pane.offen { transform: none; }
  .lead-pane .blatt-zu { display: inline-grid !important; position: absolute; right: -8px; top: -14px; }
  .blatt-hinter { position: fixed; inset: 0; background: rgb(13 16 22 / .32); 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 .22s ease; box-shadow: var(--schatten); }
  body.leiste-offen .seitenleiste { transform: none; }
  .sl-zu { display: inline-grid; }
  .sl-hinter { display: block; position: fixed; inset: 0; z-index: 75; background: rgb(13 16 22 / .32); }
  .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: 24px 28px 56px; }
}

/* ---------- Handy: Liste und Chat als zwei Ansichten ---------- */
@media (max-width: 759px) {
  #app { display: flex; flex-direction: column; }
  #inhalt { flex: 1; padding-bottom: calc(60px + var(--su)); }
  .nur-schmal { display: block !important; }
  .nur-breit { display: none !important; }
  .unten-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 0 2px var(--su); height: calc(60px + var(--su));
    border-top: 1px solid var(--linie); background: var(--grund);
  }
  .unten-nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-3); font-size: 10px; font-weight: 500; }
  .unten-nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .unten-nav a .ic { width: 20px; height: 20px; }
  .unten-nav a.aktiv { color: var(--text); }
  .unten-nav a:hover { text-decoration: none; }
  body.chat-offen .unten-nav { display: none; }
  body.chat-offen #inhalt { padding-bottom: 0; }

  .postfach { display: block; height: 100%; }
  .liste-pane { height: 100%; border-right: 0; }
  .liste-kopf { padding: 12px 16px 10px; gap: 10px; }
  .liste-kopf h1 { font-size: 24px; }
  .konto-wahl.nur-ohne-leiste { display: flex !important; }
  .konto-wahl.nur-ohne-leiste button { flex: 1; justify-content: center; }
  .liste { padding: 4px 6px 16px; }
  .zeile { padding: 10px; }
  .chat-pane { display: none; }
  body.chat-offen .liste-pane { display: none; }
  body.chat-offen .chat-pane { display: flex; height: 100%; }
  .chat-kopf { height: 58px; padding: 0 6px 0 10px; gap: 10px; }
  .chat-kopf .zurueck { display: inline-grid; margin-left: 0; }
  .chat-unter > :nth-child(n+4) { display: none; }
  .kopf-uhr { padding: 0 8px; margin-right: 0; }
  .verlauf { padding: 4px 12px 12px; }
  .reihe { max-width: 84%; }
  .antwort { padding: 8px 12px calc(10px + var(--su)); gap: 8px; }
  .vorschlaege { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -12px; padding: 0 12px 2px; 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; }
  .bs-knopf { width: 38px; height: 42px; }
  .fenster-leiste { padding: 12px; gap: 10px; }
  .fl-aktionen { width: 100%; margin-left: 0; }
  .fl-aktionen > * { flex: 1; }
  .lead-pane {
    top: auto; left: 0; right: 0; width: auto; max-height: 86dvh; border-radius: 20px 20px 0 0; border-left: 0;
    transform: translateY(100%); padding: 10px 20px calc(24px + var(--su));
  }
  .lead-pane.offen { transform: none; }
  .blatt-griff { display: block !important; width: 40px; height: 4px; border-radius: 2px; background: var(--linie-stark); margin: 0 auto 14px; }
  .lead-pane .blatt-zu { top: -6px; right: -10px; }

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

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

/* ---------- Gemeinsame Formularteile ---------- */
.feld { width: 100%; min-width: 0; border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--grund); padding: 8px 11px; font-size: 14px; 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 8px; border-radius: 999px; background: var(--g); color: var(--t); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.ruhig-hinweis { margin: 0 0 20px; padding: 10px 14px; border-radius: 12px; background: var(--flaeche); color: var(--text-2); font-size: 13.5px; }
.umschalter label { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; color: var(--text-2); font-weight: 500; font-size: 13px; 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 1px var(--linie); }
.umschalter label:has(input:focus-visible) { outline: 2px solid var(--akzent); }
.umschalter.klein { flex-wrap: wrap; }
.f-zeile { display: grid; gap: 6px; margin-bottom: 16px; }
.f-zeile > span:first-child { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.f-zeile small, .f-haken small { display: block; font-size: 12px; line-height: 1.4; }
.f-zeile.kurz .feld { width: 110px; }
.mit-einheit { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.f-haken { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 14px; cursor: pointer; }
.f-haken input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--tinte); flex: none; }
.haken-reihe { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.haken-reihe .f-haken { margin-bottom: 0; }
.form-fehler { margin: 0 0 12px; color: var(--koralle-t); font-size: 13.5px; }
.form-knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; 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: 999px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie-stark); transition: background .15s; }
.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 .15s; }
.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: 4px 0 8px; color: var(--text); font-size: 14px; font-weight: 500; }
.reiter-zeile { display: flex; gap: 22px; border-bottom: 1px solid var(--linie); margin: -8px 0 24px; }
.reiter-zeile a { padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; font-size: 14px; 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: 12px; margin-bottom: 16px; }
.datei-knopf { cursor: pointer; }
.sk-werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.unten-mehr { display: none; }

/* ---------- Reisen ---------- */
.reisen-liste { display: grid; gap: 20px; margin-top: 16px; }
.reise { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1px solid var(--linie); border-radius: 18px; 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: 18px 22px 16px; min-width: 0; }
.reise-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.reise-kopf h2 { font-size: 19px; }
.reise-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: 13.5px; }
.reise-meta .klein-ic { margin: 0 3px 0 0; }
.reise-meta .trenn { opacity: .6; }
.reise-link { flex: none; }
.reise-kurz { margin: 10px 0 0; color: var(--text-2); font-size: 14px; }
.reise-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--sonne-g); color: var(--sonne-t); font-size: 13px; }
.reise-hinweis .klein-ic { margin: 3px 0 0; opacity: 1; flex: none; }
.termine { display: grid; margin-top: 14px; }
.termin { padding: 12px 0; border-top: 1px solid var(--linie); display: grid; gap: 9px; }
.termin-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.termin-datum { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.termin-datum .klein-ic { margin: 0; }
.belegung { display: grid; grid-template-columns: minmax(120px, 260px) auto; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); }
.beleg-balken { height: 8px; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.beleg-balken i { display: block; height: 100%; border-radius: 999px; background: var(--p); }
.beleg-text strong { color: var(--text); font-weight: 600; }
.hosts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; }
.hosts-titel { width: 44px; }
.host { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; 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: 8px; }
.hosts-zeilen { display: grid; gap: 6px; }
.host-zeile { display: grid; grid-template-columns: 1fr 1fr 36px; gap: 6px; }
.hosts-aktionen { display: flex; align-items: center; gap: 8px; }
.reise-anfragen { margin: 10px 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: 28px; }
.entwuerfe summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font: 600 15px/1.3 var(--schrift-marke); }
.entwuerfe summary::-webkit-details-marker { display: none; }
.entwuerfe summary .klein-ic { margin: 0; transform: rotate(-90deg); transition: transform .15s; }
.entwuerfe[open] summary .klein-ic { transform: none; }

/* ---------- Eigene Automationen ---------- */
.hauptschalter { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); margin-bottom: 14px; }
.hauptschalter strong { font: 600 14.5px/1.4 var(--schrift-marke); }
.hauptschalter p { margin: 2px 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: 6px; margin-bottom: 28px; padding: 0 2px; }
.as-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.as-zeile .ok { color: var(--salbei-t); }
.as-zeile .ok .klein-ic { margin: 0 2px 0 0; opacity: 1; }
.regeln { display: grid; gap: 12px; }
.regel { border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; }
.regel-kopf { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.regel-titel { min-width: 0; }
.regel-titel h3 { font-size: 15px; }
.regel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin-top: 4px; }
.regel-meta .trenn { opacity: .6; }
.wort { display: inline-flex; padding: 1px 7px; border-radius: 6px; background: var(--flaeche); color: var(--text-2); font-size: 12px; }
.regel-aktionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.regel-aktionen li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.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: 6px; align-items: center; }
.regel .leise.klein { margin: 0; }
.probe { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--app); display: grid; gap: 6px; }
.probe p { margin: 0; }
.probe-kopf { display: flex; align-items: center; gap: 10px; }
.treffer { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.treffer > li { padding: 10px 12px; border-radius: 10px; background: var(--grund); border: 1px solid var(--linie); display: grid; gap: 6px; }
.treffer > li.eigen { opacity: .6; }
.treffer-wer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.treffer-text { font-size: 14px; }
.treffer-aktionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.treffer-aktionen li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.ta-art { color: var(--text-2); }
.treffer-aktionen li.gesperrt .ta-text { color: var(--text-3); }
.ta-grund { display: block; font-size: 12px; color: var(--text-3); }
.regel-form { border: 1px solid var(--linie-stark); border-radius: 16px; padding: 18px 18px 14px; margin-bottom: 12px; background: var(--grund); }
.regel-form h3 { font-size: 15px; margin-bottom: 14px; }
.varianten { display: grid; gap: 6px; }
.variante { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; }
.protokoll td { padding-top: 10px; padding-bottom: 10px; }

/* ---------- Audios ---------- */
.aufnahme-platz:empty { display: none; }
.aufnahme { margin-bottom: 24px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linie-stark); background: var(--grund); }
.aufnahme p { margin: 0 0 10px; }
.aufnahme.laeuft { display: flex; align-items: center; gap: 12px; }
.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 15px/1 var(--schrift-marke); font-variant-numeric: tabular-nums; min-width: 40px; }
.pegel { flex: 1; display: flex; align-items: center; gap: 3px; height: 32px; min-width: 0; }
.pegel i { flex: 1; height: 100%; border-radius: 2px; background: var(--text-3); transform: scaleY(.08); transform-origin: center; transition: transform .06s linear; }
.aufnahme.pruefen audio { width: 100%; margin-bottom: 12px; }
.aufnahme-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.aufnahme-felder .f-zeile:last-child { grid-column: 1 / -1; }
.audio-gruppe { margin-bottom: 26px; }
.audio-gruppe h2 { margin-bottom: 8px; }
.audio-liste { display: grid; }
.audio-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px 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: 2px; }
.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: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.kz-reihe { display: inline-flex; gap: 2px; }
.audio-fortschritt { height: 2px; margin-top: 6px; border-radius: 2px; 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: 6px; }
.au-panel .audio-zeile { padding: 8px 14px; border-bottom: 0; }
.au-panel .audio-zeile:hover { background: var(--flaeche); }
.au-liste { overflow-y: auto; padding-bottom: 6px; }
.au-leer { padding: 14px; }
.au-meldung { margin: 6px 12px; padding: 10px 12px; border-radius: 10px; background: var(--flaeche); font-size: 13.5px; }
.au-meldung p { margin: 0; }
.au-meldung p + p { margin-top: 4px; }
.au-meldung a { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.au-meldung .klein-ic { margin: 0; }
.au-knopf { margin-left: -6px; }

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

@media (max-width: 1023px) {
  .reise { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .unten-mehr { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-3); font-size: 10px; font-weight: 500; }
  .unten-mehr .ic { width: 20px; height: 20px; }
  .unten-mehr.aktiv { color: var(--text); }
  .reise { grid-template-columns: 1fr; }
  .reise-bild { min-height: 0; aspect-ratio: 16 / 8; }
  .reise-inhalt { padding: 14px 16px; }
  .belegung { grid-template-columns: 1fr; gap: 6px; }
  .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; }
  .audio-aktionen .icon-knopf { width: 32px; }
  .reiter-zeile { margin-top: 0; }
  .as-zeile { flex-direction: column; align-items: flex-start; gap: 2px; }
  .au-panel .audio-zeile { gap: 8px; padding: 8px 10px; }
  .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)); }
.push-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.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: calc(72px + var(--su));
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 14px 10px 14px 14px; border-radius: 16px; background: var(--grund); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.install-hinweis img { border-radius: 10px; border: 1px solid var(--linie); }
.install-hinweis strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.install-hinweis ol { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; line-height: 1.55; }
.install-hinweis .ih-teilen .ic { width: 15px; height: 15px; vertical-align: -2px; color: var(--akzent); }
.install-hinweis .icon-knopf { margin: -6px -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: 16px !important; }
}

@media (max-width: 759px) {
  html, body { overflow: hidden; }
  #app { height: var(--app-h, 100dvh); padding-top: var(--so); }
  .seitenleiste { padding-top: calc(14px + var(--so)); padding-bottom: calc(12px + var(--su)); }
  .lead-pane { max-height: calc(86dvh - var(--so)); }
  /* Tastatur offen: keine Abstände für die Home-Leiste, Leiste unten weg */
  body.tastatur-offen .antwort { padding-bottom: 10px; }
  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;
}