:root{
  --akzent:#1d4e6f;
  --grund:#ffffff; --flaeche:#f7f8fa; --karte:#ffffff;
  --linie:#e4e7ec; --tinte:#16202b; --grau:#6b7280; --sanft:#f2f4f7;
  --rot:#b42318; --gelb:#b54708; --gruen:#067647;
  --leiste:260px;
}
html[data-design="dunkel"]{
  --grund:#12161c; --flaeche:#171c24; --karte:#1b212a;
  --linie:#2a323d; --tinte:#e7ecf2; --grau:#98a2b3; --sanft:#222933;
  --rot:#f97066; --gelb:#fdb022; --gruen:#47cd89;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--grund);color:var(--tinte);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
.ik{flex:0 0 auto}
.logo{color:var(--akzent)}

/* ---------------------------------------------------------- Grundriss */
#huelle{display:flex;height:100vh}
#leiste{width:var(--leiste);flex:0 0 var(--leiste);background:var(--flaeche);
  border-right:1px solid var(--linie);display:flex;flex-direction:column;
  transition:width .18s ease,flex-basis .18s ease}
#haupt{flex:1;position:relative;min-width:0;background:var(--grund)}

/* eingeklappt */
body.schmal{--leiste:64px}
body.schmal #leiste .marke span,
body.schmal #leiste .zeile span,
body.schmal #leiste .rubrik,
body.schmal #leiste .marker,
body.schmal #leiste #chats,
body.schmal #leiste #suchfeld{display:none}
body.schmal #leiste .voll{padding:11px 0;justify-content:center}
body.schmal #leiste .voll em{display:none}
body.schmal .zeile{justify-content:center;padding:11px 0}
body.schmal .leiste-kopf{flex-direction:column;gap:10px}

/* ---------------------------------------------------------- Seitenleiste */
.leiste-kopf{display:flex;align-items:center;gap:8px;padding:14px 12px 10px}
.marke{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  flex:1;min-width:0}
.marke span{display:flex;flex-direction:column;min-width:0}
.marke b{font-size:15px;line-height:1.2}
.marke small{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--grau);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leiste-rollen{flex:1;overflow-y:auto;padding:0 12px}
.leiste-fuss{padding:10px 12px;border-top:1px solid var(--linie)}
.rubrik{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);
  margin:12px 6px 6px}
.zeile{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;
  border-radius:9px;text-align:left;color:var(--tinte);font-size:14.5px}
.zeile:hover{background:var(--sanft)}
.zeile .ik{color:var(--akzent);opacity:.85}
.zeile span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeile.aktiv{background:color-mix(in srgb,var(--akzent) 12%,transparent);font-weight:600}
/* Sortieren per Ziehen */
#apps .zeile{transition:transform .12s ease, opacity .12s ease}
#apps .zeile[draggable]{cursor:grab}
#apps .zeile.zieht{opacity:.4;cursor:grabbing}
#apps.sortiert .zeile:not(.zieht){transform:none}
.marker{font-size:10.5px;font-style:normal;color:var(--akzent);
  background:color-mix(in srgb,var(--akzent) 13%,transparent);
  padding:2px 7px;border-radius:20px;white-space:nowrap}
/* Zweite Stufe: alles, was nicht zu den eigenen Apps gehoert, tritt zurueck */
#links .zeile,
.leiste-fuss .zeile,
#chats .zeile{padding:8px 12px;font-size:13.5px;gap:10px}
#links .zeile{text-decoration:none}
#links .zeile .ik:last-child{color:var(--grau);opacity:.55}
body.schmal #links .zeile .ik:last-child{display:none}

/* Aktionsblock: oben und unten durch eine Linie abgesetzt */
.leiste-aktionen{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:12px 0;margin:14px 0}
.voll{display:flex;align-items:center;gap:12px;width:100%;
  background:none;color:var(--tinte);border-radius:9px;padding:11px 12px;font-weight:600;
  font-size:14.5px;margin-bottom:2px}
.voll:hover{background:var(--sanft);filter:none}
.voll .ik{color:var(--akzent);opacity:.85}
.voll span{flex:1;text-align:left}
#suchfeld{width:100%;padding:8px 10px;border:1px solid var(--linie);border-radius:8px;
  background:var(--karte);margin:4px 0 6px}
/* Die Chatliste tritt leicht zurueck — die Apps darueber sind wichtiger */
#chats{opacity:.85}
#chats .zeile:hover,#chats .zeile.aktiv{opacity:1}
.monat{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);
  margin:14px 6px 4px}
.chatzeile{position:relative}
.chatzeile .weg{opacity:0;padding:2px;border-radius:6px}
.chatzeile:hover .weg{opacity:.55}
.chatzeile .weg:hover{opacity:1;color:var(--rot)}
.icon{display:inline-flex;padding:7px;border-radius:8px;color:var(--grau)}
.icon:hover{background:var(--sanft);color:var(--tinte)}

/* ---------------------------------------------------------- Hauptbereich */
#kopf{position:absolute;inset:0 0 auto 0;height:56px;display:flex;align-items:center;
  justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--linie);
  background:var(--grund);z-index:3}
.kopf-titel{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px;
  min-width:0;overflow:hidden}
#kopf-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kopf{gap:12px}
#ansicht{position:absolute;inset:56px 0 0 0;overflow-y:auto;padding:26px 24px 130px}
.mitte{max-width:820px;margin:0 auto}

/* ---------------------------------------------------------- Chatleiste */
#leistenform{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none;
  padding:0 24px max(12px, env(safe-area-inset-bottom))}
#chatleiste,#chipreihe{max-width:896px;margin:0 auto;pointer-events:auto}
#chipreihe{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.chip{display:flex;align-items:center;gap:7px;background:var(--karte);
  border:1px solid var(--linie);border-radius:20px;padding:5px 11px;font-size:12.5px;
  box-shadow:0 1px 3px rgba(16,24,40,.05)}
.chip .ik{color:var(--akzent)}
.chip button{color:var(--grau);display:flex}
.chip.laedt{color:var(--grau)}
#chatleiste{background:var(--karte);border:1px solid var(--linie);border-radius:24px;
  padding:8px;box-shadow:0 4px 20px rgba(16,24,40,.07);
  display:flex;flex-direction:column;gap:6px}
#chatleiste:focus-within{border-color:color-mix(in srgb,var(--akzent) 45%,var(--linie))}
#chatleiste.drueber{border-color:var(--akzent);border-style:dashed;
  background:color-mix(in srgb,var(--akzent) 5%,var(--karte))}
/* 16px ist Pflicht: darunter zoomt iOS Safari beim Antippen automatisch hinein,
   und die Seite wird anschliessend breiter als der Bildschirm. */
#eingabe{width:100%;border:0;background:none;resize:none;outline:none;
  max-height:220px;line-height:1.5;padding:8px 10px 0;font-size:16px}
#eingabe::placeholder{color:var(--grau);opacity:1}
.leisten-knoepfe{display:flex;align-items:center;gap:6px;margin-top:4px}
.fueller{flex:1}
/* Plus und Mikro bewusst groesser als Senden: werden mit dem Daumen getroffen. */
.icon.gross{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;padding:0;border-radius:50%;color:var(--tinte)}
.icon.gross:hover{background:var(--sanft)}
.rund{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--akzent);color:#fff;flex:0 0 auto}
@media (min-width:768px){ .rund{width:36px;height:36px} }
.rund:disabled{opacity:.35;cursor:default}
.rund:not(:disabled):hover{filter:brightness(1.1)}

/* Aufnahmezeile: ersetzt die Knopfzeile, waehrend diktiert wird */
#hoermodus{display:flex;align-items:center;gap:10px;padding:4px}
.kreisleise{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--linie);color:var(--grau);flex:0 0 auto}
.kreisleise:hover{background:var(--sanft);color:var(--tinte)}
#pegel{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:30px}
#pegel i{width:3px;height:3px;border-radius:2px;background:var(--akzent);
  transition:height .07s linear}
#verarbeitet{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--grau);font-size:14px}

/* ---------------------------------------------------------- Chatverlauf */
.nachricht{max-width:820px;margin:0 auto 22px;display:flex;gap:11px;align-items:flex-start}
.nachricht.ich{justify-content:flex-end}
/* fit-content, damit kurze Nachrichten nicht auf eine zu schmale Breite
   gerechnet und dann am Rand abgeschnitten werden */
.nachricht.ich .blase{background:var(--akzent);color:#fff;border-radius:18px;
  padding:11px 17px;width:fit-content;max-width:100%;white-space:pre-wrap;
  overflow-wrap:anywhere}
.nachricht.agent .strang{max-width:82%}
.nachricht.agent .blase{white-space:pre-wrap;background:var(--karte);
  border:1px solid var(--linie);border-radius:14px;padding:11px 16px}
.kopf-kreis{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--sanft);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--grau);
  margin-top:3px}
.marke-kreis{background:color-mix(in srgb,var(--akzent) 12%,transparent)}
.marke-kreis .logo{width:17px;height:17px}
.nachfuss{display:flex;align-items:center;gap:12px;margin:6px 0 0 4px;
  font-size:12px;color:var(--grau)}
.ichspalte{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  max-width:78%;min-width:0}

/* Anhang in der Nachricht: Karte mit aufklappbarem erkanntem Inhalt */
.anhangkarte{background:var(--karte);border:1px solid var(--linie);border-radius:12px;
  width:100%;max-width:420px}
.anhangkarte summary{display:flex;align-items:center;gap:10px;padding:11px 13px;
  cursor:pointer;list-style:none}
.anhangkarte summary::-webkit-details-marker{display:none}
.anhangkarte summary .ik{color:var(--akzent)}
.anhangname{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13.5px}
.anhangname i{font-style:normal;font-size:11.5px;color:var(--grau)}
.anhangkarte em{font-style:normal;font-size:12px;color:var(--akzent)}
.anhangkarte[open] em::after{content:"·"}
.anhangkarte pre{margin:0;padding:0 13px 13px;max-height:220px;overflow:auto;
  white-space:pre-wrap;font-size:12px;color:var(--grau);
  font-family:ui-monospace,Consolas,monospace}
.chip.laedt i{width:5px;height:5px;border-radius:50%;background:var(--grau);
  display:inline-block;animation:huepf 1.1s infinite}
.minik{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--grau);
  padding:2px 0}
.minik:hover{color:var(--akzent)}
.dreht{width:13px;height:13px;border:1.8px solid color-mix(in srgb,var(--akzent) 30%,transparent);
  border-top-color:var(--akzent);border-radius:50%;animation:kreisel .8s linear infinite}
@keyframes kreisel{to{transform:rotate(360deg)}}
/* Formatierte Antwort */
.nachricht.agent .blase p{margin:0 0 10px}
.nachricht.agent .blase p:last-child{margin-bottom:0}
.nachricht.agent .blase h3{font-size:16px;margin:16px 0 8px}
.nachricht.agent .blase h4,.nachricht.agent .blase h5{font-size:14.5px;margin:14px 0 6px}
.nachricht.agent .blase :is(h3,h4,h5):first-child{margin-top:0}
.nachricht.agent .blase ul,.nachricht.agent .blase ol{margin:0 0 10px;padding-left:22px}
.nachricht.agent .blase li{margin-bottom:4px}
.nachricht.agent .blase code{background:var(--sanft);padding:1px 5px;border-radius:4px;
  font-size:13px;font-family:ui-monospace,Consolas,monospace}
.nachricht.agent .blase hr{border:0;border-top:1px solid var(--linie);margin:14px 0}
.nachricht.agent .blase ul ul,.nachricht.agent .blase ul ol,
.nachricht.agent .blase ol ul,.nachricht.agent .blase ol ol{margin:4px 0 0}
.nachricht.agent .blase blockquote{margin:0 0 10px;padding-left:12px;
  border-left:3px solid var(--linie);color:var(--grau)}
/* Breite Tabellen scrollen in sich selbst, statt die Chatspalte zu sprengen */
.tabellenrolle{margin:10px 0;overflow-x:auto;border:1px solid var(--linie);border-radius:8px}
.tabellenrolle table{min-width:100%;border-collapse:collapse;font-size:12.5px}
.tabellenrolle th{background:var(--sanft);padding:7px 12px;text-align:left;
  font-weight:600;border-bottom:1px solid var(--linie);white-space:nowrap}
.tabellenrolle td{padding:7px 12px;border-bottom:1px solid var(--linie)}
.tabellenrolle tr:last-child td{border-bottom:0}

/* Zum Ende springen */
#runterknopf{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;background:var(--karte);color:var(--tinte);
  border:1px solid var(--linie);box-shadow:0 3px 12px rgba(16,24,40,.14);
  display:flex;align-items:center;justify-content:center}
#runterknopf:hover{background:var(--sanft)}

/* Kurze Antwort, die ueber der Chatleiste schwebt */
#schwebe{max-width:896px;margin:0 auto 10px;pointer-events:auto;
  background:var(--karte);border:1px solid var(--linie);border-radius:14px;
  padding:12px 16px;font-size:14px;box-shadow:0 4px 16px rgba(16,24,40,.1);
  width:fit-content;animation:auftauchen .18s ease}
@keyframes auftauchen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Ablage: Kacheln und Wegleiste */
.wegleiste{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.krumen{flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;
  min-width:0}
.krumen button{display:inline-flex;align-items:center;gap:6px;color:var(--akzent);
  padding:3px 6px;border-radius:6px}
.krumen button:hover{background:var(--sanft)}
.krumen button:last-child{color:var(--tinte);font-weight:600}
.krumen span{color:var(--grau)}
.raster{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.kachel{display:flex;flex-direction:column;align-items:center;gap:7px;padding:18px 10px;
  border:1px solid transparent;border-radius:12px;text-align:center}
.kachel:hover{background:var(--sanft);border-color:var(--linie)}
.kachel .ik{color:var(--akzent)}
.kachel b{font-size:13px;font-weight:500;overflow-wrap:anywhere;line-height:1.35}
.kachel i{font-style:normal;font-size:11.5px;color:var(--grau)}
.ordnerkachel b{font-weight:600}

/* Originaldokument im Fenster */
.dokknopf{display:inline-flex;align-items:center;gap:8px;padding:0;text-align:left;
  color:var(--tinte);font-size:inherit;overflow-wrap:anywhere}
.dokknopf:hover{color:var(--akzent);text-decoration:underline}
.dokknopf .ik{color:var(--akzent)}
#dokfenster{position:fixed;inset:0;z-index:22;display:flex;align-items:center;
  justify-content:center;padding:28px}
.dok-karte{background:var(--karte);border-radius:14px;width:100%;max-width:980px;
  height:88vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(16,24,40,.3)}
.dok-kopf{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--linie)}
.dok-kopf b{flex:1;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dok-kopf .knopf{margin:0;text-decoration:none}
.dok-inhalt{flex:1;background:var(--sanft)}
.dok-inhalt iframe{width:100%;height:100%;border:0}
@media (max-width:700px){ #dokfenster{padding:10px} .dok-karte{height:92vh} }

/* To-dos */
.todozeile{display:flex;align-items:center;gap:12px;padding:12px 4px;
  border-bottom:1px solid var(--linie);font-size:14.5px}
.todozeile:last-child{border-bottom:0}
.todotext{flex:1;overflow-wrap:anywhere}
.tododatum{font-size:12px;color:var(--grau);white-space:nowrap}
.todozeile .icon{opacity:0;padding:5px}
.todozeile:hover .icon{opacity:.5}
.todozeile .icon:hover{opacity:1;color:var(--rot)}
.todozeile.erledigt .todotext{text-decoration:line-through;color:var(--grau)}
.kaestchen{flex:0 0 auto;width:19px;height:19px;border-radius:5px;
  border:1.7px solid var(--linie);display:flex;align-items:center;
  justify-content:center;color:transparent}
.kaestchen:hover{border-color:var(--akzent)}
.kaestchen.an{background:var(--gruen);border-color:var(--gruen);color:#fff}
.todozaehler{font-size:12.5px;color:var(--grau);margin:12px 4px 0}

/* Posteingang */
.postzeile{padding:14px 2px;border-bottom:1px solid var(--linie)}
.postzeile:last-child{border-bottom:0}
.postkopf{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--grau)}
.postvon{font-weight:600;color:var(--tinte);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.postdatum{flex:0 0 auto}
.postbetreff{font-size:14.5px;margin:3px 0 2px}
.postvorschau{font-size:13px;color:var(--grau);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-bottom:8px}
.anhangzeile{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px}
.anhangzeile .ik{color:var(--akzent)}
.anhangzeile span{flex:1;display:flex;flex-direction:column;min-width:0}
.anhangzeile i{font-style:normal;font-size:11.5px;color:var(--grau)}
.anhangzeile .knopf{margin:0}
.anhangbereich:not(:empty){border-top:1px solid var(--linie);margin-top:8px}
.sendekarte{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.sendekarte input{flex:1;min-width:200px}

.chip small{color:var(--grau);font-size:11.5px}
.tippt{display:inline-flex;gap:4px;align-items:center;color:var(--grau);font-size:13.5px}
.tippt i{width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:huepf 1.1s infinite}
.tippt i:nth-child(2){animation-delay:.15s}
.tippt i:nth-child(3){animation-delay:.3s}
@keyframes huepf{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .dreht,.tippt i{animation:none} }
.leerchat{text-align:center;padding-top:16vh;color:var(--grau)}
.leerchat .logo{width:52px;height:52px}
.leerchat h2{color:var(--tinte);font-size:21px;margin:14px 0 4px}

/* ---------------------------------------------------------- Berichte */
h1{font-size:22px;margin:0 0 6px}
h2{font-size:15px;margin:30px 0 10px}
p.hinweis{color:var(--grau);margin:0 0 22px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:20px}
.zone{display:block;border:2px dashed var(--linie);border-radius:12px;background:var(--karte);
  padding:40px 24px;text-align:center;cursor:pointer;transition:.15s}
.zone:hover,.zone.drueber{border-color:var(--akzent);
  background:color-mix(in srgb,var(--akzent) 5%,var(--karte))}
.zone b{display:block;font-size:16px;margin-bottom:5px}
.zone i{font-style:normal;color:var(--grau);font-size:13.5px}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;padding:10px 6px;border-bottom:1px solid var(--linie);font-size:14px}
th{font-size:12px;color:var(--grau);font-weight:600}
tr:last-child td{border-bottom:0}
.zustand{font-size:12px;padding:3px 10px;border-radius:20px;white-space:nowrap}
/* Laufende Verarbeitung: Kreisel in der Akzentfarbe, damit sofort sichtbar ist,
   dass etwas passiert -- ohne das laedt man aus Unsicherheit ein zweites Mal. */
.laeuft{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--akzent)}
.wartet,.liest,.schreibt{background:color-mix(in srgb,var(--gelb) 15%,transparent);color:var(--gelb)}
.fertig{background:color-mix(in srgb,var(--gruen) 15%,transparent);color:var(--gruen)}
.fehler{background:color-mix(in srgb,var(--rot) 14%,transparent);color:var(--rot)}
.leer{color:var(--grau);padding:24px 0;text-align:center}
a{color:var(--akzent)}
.knopf{display:inline-flex;align-items:center;gap:7px;background:var(--akzent);color:#fff;
  border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600}
.knopf:hover{filter:brightness(1.1)}
.knopf.leise{background:none;color:var(--tinte);border:1px solid var(--linie)}
.knopf.leise:hover{background:var(--sanft);filter:none}
.knopf.klein{padding:6px 11px;font-size:12.5px;margin-top:10px}
.knopf.klein .ik{color:var(--akzent)}

/* Aktentabelle: Stand links heranrücken, Aktionen mit Beschriftung */
.aktentabelle td:first-child,.aktentabelle th:first-child{width:36%}
.standspalte{width:20%}
.aktenspalte,.berichtspalte{overflow-wrap:anywhere}
.berichtspalte{width:32%;color:var(--grau)}
.leer-zelle{color:var(--grau);font-size:13px;font-style:italic}
.berichtspalte .marker{margin-left:6px}
.aktenspalte .ik,.berichtspalte .ik{color:var(--akzent);vertical-align:-2px}
.tatenspalte{text-align:right;white-space:nowrap}
.tatenspalte .knopf{margin:2px 0 2px 6px;padding:8px 13px;font-size:13px;
  text-decoration:none;vertical-align:middle}
.tatenspalte .knopf.nur-symbol{padding:8px 10px}
.tatenspalte .knopf.nur-symbol:hover{color:var(--rot)}
/* Auf dem Handy wird aus jeder Tabellenzeile ein Block, sonst laufen die
   Knoepfe aus der Karte heraus. Beschriftungen bleiben sichtbar. */
@media (max-width:700px){
  .aktentabelle,.aktentabelle tbody,.aktentabelle tr,.aktentabelle td{display:block;width:auto}
  .aktentabelle thead{display:none}
  .aktentabelle tr{padding:14px 0;border-bottom:1px solid var(--linie)}
  .aktentabelle tr:last-child{border-bottom:0}
  .aktentabelle td{border:0;padding:0}
  .aktentabelle td:first-child{font-weight:600;overflow-wrap:anywhere;margin-bottom:8px}
  .standspalte{margin-bottom:10px}
  .tatenspalte{display:flex;gap:8px;text-align:left;white-space:normal}
  .tatenspalte .knopf{margin:0;flex:1 1 0;justify-content:center;padding:10px 8px}
  .tatenspalte .knopf.nur-symbol{flex:0 0 auto;padding:10px 12px}
}
.warnung{background:color-mix(in srgb,var(--gelb) 12%,transparent);
  border-left:3px solid var(--gelb);padding:11px 15px;border-radius:0 8px 8px 0;
  font-size:13.5px;margin-bottom:20px}
.bericht{white-space:pre-wrap;background:var(--karte);border:1px solid var(--linie);
  border-radius:12px;padding:28px 32px;font-size:15px}

/* ---------------------------------------------------------- Panels */
#schleier{position:fixed;inset:0;background:rgba(16,24,40,.34);z-index:20;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#ueberlagerung{position:fixed;inset:0;z-index:21;display:flex;align-items:center;
  justify-content:center;padding:24px;pointer-events:none}
/* [hidden] muss gewinnen, sonst bleibt das Panel als weisse Flaeche stehen */
[hidden]{display:none!important}
#panel{background:var(--karte);border-radius:16px;width:100%;max-width:600px;
  max-height:86vh;overflow-y:auto;box-shadow:0 20px 60px rgba(16,24,40,.28);
  pointer-events:auto;padding:26px 28px}
.panel-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:6px}
.panel-kopf h2{margin:0;font-size:19px;display:flex;align-items:center;gap:9px}
.panel-kopf h2 .ik{color:var(--akzent)}
.panel-unter{color:var(--grau);font-size:13.5px;margin:0 0 20px}
.eintrag{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--linie);
  border-radius:11px;padding:14px 15px;margin-bottom:10px}
.eintrag b{display:block;font-size:14.5px;margin-bottom:2px}
.eintrag p{margin:0;font-size:13px;color:var(--grau)}
.eintrag .zahl{margin-left:auto;color:var(--grau);font-size:13px}
.reiter{display:flex;gap:20px;border-bottom:1px solid var(--linie);margin:16px 0 20px}
.reiter button{padding:9px 0;border-bottom:2px solid transparent;color:var(--grau);
  font-size:14px}
.reiter button.aktiv{color:var(--akzent);border-color:var(--akzent);font-weight:600}
label.feld{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],select{width:100%;padding:10px 12px;
  border:1px solid var(--linie);border-radius:9px;background:var(--grund)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--akzent)}
.balken{height:7px;background:var(--sanft);border-radius:20px;overflow:hidden;margin:6px 0 18px}
.balken i{display:block;height:100%;background:var(--akzent);border-radius:20px;
  transition:width .3s}
.haken{flex:0 0 auto;width:21px;height:21px;border-radius:50%;border:1.6px solid var(--linie);
  display:flex;align-items:center;justify-content:center;color:transparent;margin-top:1px}
.eintrag.erledigt .haken{background:var(--gruen);border-color:var(--gruen);color:#fff}
.eintrag.erledigt b{text-decoration:line-through;color:var(--grau)}
.wer{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--grau);
  background:var(--sanft);padding:2px 7px;border-radius:20px;margin-left:8px;
  vertical-align:middle}
/* ---------------------------------------------------------- Befehlspalette */
#palette{position:fixed;inset:0;z-index:22;display:flex;align-items:flex-start;
  justify-content:center;padding:14vh 24px 24px;pointer-events:none}
.pal-karte{background:var(--karte);border-radius:14px;width:100%;max-width:576px;
  box-shadow:0 20px 60px rgba(16,24,40,.3);pointer-events:auto;overflow:hidden}
.pal-kopf{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--linie)}
.pal-kopf .ik{color:var(--grau)}
#pal-eingabe{flex:1;border:0;background:none;outline:none;font-size:15px}
#pal-liste{max-height:52vh;overflow-y:auto;padding:8px}
.pal-rubrik{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);
  margin:10px 10px 4px}
.pal-zeile{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;
  border-radius:9px;text-align:left;font-size:14px}
.pal-zeile span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-zeile .ik{color:var(--akzent);opacity:.85}
.pal-zeile kbd{font:inherit;font-size:11.5px;color:var(--grau);background:var(--sanft);
  padding:2px 7px;border-radius:5px}
.pal-zeile kbd.zeit{background:none;padding:0}
.pal-zeile:hover,.pal-zeile.vorwahl{background:color-mix(in srgb,var(--akzent) 10%,transparent)}

.farbreihe{display:flex;align-items:center;gap:10px;margin-top:8px}
.farbreihe input[type=color]{width:38px;height:38px;padding:0;border:1px solid var(--linie);
  border-radius:9px;background:none;cursor:pointer}
.farbtupfen{width:26px;height:26px;padding:0;border-radius:50%;
  border:2px solid transparent;box-shadow:0 0 0 1px var(--linie) inset;cursor:pointer}
.farbtupfen:hover{transform:scale(1.12)}
.farbtupfen.aktiv{border-color:var(--tinte);box-shadow:none}
.knopf.whatsapp{background:color-mix(in srgb,#25d366 18%,transparent);color:#128c3e;
  font-weight:600}
.knopf.whatsapp:hover{background:color-mix(in srgb,#25d366 28%,transparent);filter:none}
html[data-design="dunkel"] .knopf.whatsapp{color:#5be584}
.paar button{gap:7px}
.paar button .ik{opacity:.9}
.paar{display:flex;gap:8px}
.paar button{flex:1;border:1px solid var(--linie);border-radius:9px;padding:9px;
  display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px}
.paar button.aktiv{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.meldung{background:color-mix(in srgb,var(--gruen) 12%,transparent);color:var(--gruen);
  padding:9px 13px;border-radius:8px;font-size:13.5px;margin-bottom:14px}
.mitzeile{display:flex;align-items:center;gap:10px;border:1px solid var(--linie);
  border-radius:9px;padding:10px 12px;margin-bottom:8px;font-size:14px}
.mitzeile .rolle{margin-left:auto;font-size:11px;background:var(--sanft);color:var(--grau);
  padding:3px 9px;border-radius:20px}

.burger{display:none}

@media (max-width:900px){
  .burger{display:inline-flex;margin-left:-6px}
  /* Seitenleiste faehrt als Schublade ueber den Inhalt */
  #leiste{position:absolute;z-index:30;height:100%;width:min(78vw,300px);
    flex-basis:min(78vw,300px);transform:translateX(-100%);
    box-shadow:0 0 40px rgba(16,24,40,.22);transition:transform .2s ease}
  body.leiste-auf #leiste{transform:none}
  /* eingeklappt gilt nur am Schreibtisch */
  body.schmal #leiste .marke span,
  body.schmal #leiste .zeile span,
  body.schmal #leiste .rubrik,
  body.schmal #leiste .marker,
  body.schmal #leiste #chats{display:revert}
  body.schmal #leiste .voll{padding:8px 9px;justify-content:flex-start}
  body.schmal .zeile{justify-content:flex-start;padding:8px 9px}
  body.schmal .leiste-kopf{flex-direction:row}
  #klappen .ik{display:none}
  #klappen::before{content:"✕";font-size:19px;line-height:1;color:var(--grau)}
  #ansicht{padding:20px 14px 150px}
  #leistenform{padding:0 12px max(12px, env(safe-area-inset-bottom))}
  #panel{max-height:82vh;padding:22px 20px}
  .nachricht.agent .strang{max-width:100%}
  .icon.gross{width:48px;height:48px}
  /* alle Felder auf 16px, sonst zoomt iOS beim Antippen */
  input[type=text],input[type=email],input[type=password],select,#pal-eingabe{font-size:16px}
}