/* IntraPush — Marke Marine #1F2C3D, Gold #C2A15C (Bauordnung §3) */
:root{
  --marine:#1F2C3D; --gold:#C2A15C; --papier:#F7F8FA; --karte:#FFFFFF;
  --text:#1F2C3D; --gedaempft:#64748B; --linie:#D9DEE2;
  --gruen:#15715F; --bernstein:#A45C00; --rot:#A64038;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--papier); color:var(--text);
  font-family:-apple-system,"Segoe UI",Inter,Arial,sans-serif; font-size:15px; line-height:1.5;}
/* Der Modulkopf ist seit 0.25.0 der Suite-Kopf (Baustein in grund.html, Standard §4);
   die Regeln des alten <header class="kopf"> sind entfallen. */
.inhalt{max-width:860px; margin:0 auto; padding:24px 18px 40px;}
.fuss{max-width:860px; margin:0 auto; padding:14px 18px 28px; color:var(--gedaempft); font-size:12px;}
.karte{background:var(--karte); border:1px solid var(--linie); border-radius:12px;
  padding:20px; margin-bottom:16px;}
.karte.meldung{border:2px solid var(--gold);}
h1{font-size:22px; font-weight:600; margin:0 0 6px;}
p.hinweis{color:var(--gedaempft); margin:0 0 14px;}
label{display:block; font-size:13px; color:var(--gedaempft); margin:12px 0 4px;}
input{font:inherit; width:100%; padding:10px 12px; border:1px solid var(--linie);
  border-radius:8px; background:#fff;}
input:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}
button{font:inherit; background:var(--marine); color:#fff; border:none; border-radius:8px;
  padding:10px 16px; margin-top:14px; cursor:pointer;}
button.neben{background:#fff; color:var(--text); border:1px solid var(--linie);}
button:hover{opacity:.92;}
table{width:100%; border-collapse:collapse; font-size:14px;}
th{font-size:12px; color:var(--gedaempft); text-align:left; padding:8px 10px;
  border-bottom:1px solid var(--linie); font-weight:500;}
td{padding:8px 10px; border-bottom:1px solid var(--linie); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.pille{display:inline-block; border-radius:99px; padding:2px 10px; font-size:12px;}
.pille.gruen{background:#D8EEE8; color:var(--gruen);}
.pille.rot{background:#F6DCDA; color:var(--rot);}
.pille.grau{background:#EEF2F4; color:var(--gedaempft);}
.leer{color:var(--gedaempft); padding:26px 0; text-align:center;}
nav.leiste{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
nav.leiste a{color:var(--marine); text-decoration:none; border:1px solid var(--linie);
  background:#fff; border-radius:8px; padding:7px 12px; font-size:13px;}
nav.leiste a:hover{border-color:var(--gold);}
form.zeile{display:inline;}
.fehler{background:#F6DCDA; color:var(--rot); border-radius:8px; padding:10px 12px; margin-bottom:12px;}

/* Portal — WhatsApp-Bild: links Chats, Mitte Gespräch */
.portal{display:flex; gap:14px; align-items:stretch; max-width:1200px; margin:0 auto;
  min-height:calc(100vh - 160px);}
.inhalt:has(.portal){max-width:1240px;}
.chatspalte{flex:0 0 290px; background:var(--karte); border:1px solid var(--linie);
  border-radius:12px; display:flex; flex-direction:column; overflow:hidden;}
.spaltenkopf{display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--linie);}
.spaltenkopf input{flex:1;}
.neumenue{position:relative;}
.neumenue button{margin-top:0; padding:9px 12px;}
#neu-menue{position:absolute; right:0; top:44px; background:var(--karte); border:1px solid var(--linie);
  border-radius:10px; box-shadow:0 6px 20px rgba(31,44,61,.15); z-index:10; min-width:210px;}
#neu-menue a{display:block; padding:10px 14px; color:var(--text); text-decoration:none; font-size:14px;}
#neu-menue a:hover{background:var(--papier);}
.chatliste2{overflow-y:auto; flex:1;}
.chatitem{display:flex; gap:10px; padding:10px 12px; text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--papier); align-items:center;}
.chatitem:hover{background:var(--papier);}
.chatitem.gewaehlt{background:#EDF2F7;}
.chatkreis{width:36px; height:36px; border-radius:99px; background:var(--papier); color:var(--gedaempft);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex:none;
  border:1px solid var(--linie);}
.chatkreis.gruppe{background:var(--marine); color:#fff; border-color:var(--marine);}
.chattext{min-width:0;}
.chattext b{display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chattext small{display:block; color:var(--gedaempft); font-size:12px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
.gespraech{flex:1; min-width:0; display:flex; flex-direction:column;}
.gespraechskopf{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:12px 16px; margin-bottom:10px;}
.gespraechskopf h1{font-size:18px; margin:0;}
.klickbar{cursor:pointer;}
.verlauf{flex:1; overflow-y:auto; padding:6px 4px; display:flex; flex-direction:column; gap:8px;
  max-height:55vh;}
.trenner{align-self:center; background:#EEF2F4; color:var(--gedaempft); border-radius:99px;
  padding:4px 14px; font-size:12px; margin:4px 0;}
.blase{position:relative; background:var(--karte); border:1px solid var(--linie); border-radius:12px;
  padding:8px 12px; max-width:72%; align-self:flex-start; cursor:pointer;}
.blase.eigene{align-self:flex-end; background:#E9F0F7; border-color:#CBD9E6;}
.blase.geloescht{color:var(--gedaempft); font-style:italic; cursor:default;}
.blase .von{display:block; font-size:12px; color:var(--gold); font-weight:600;}
.blase .zitat{display:block; border-left:3px solid var(--gold); background:var(--papier);
  border-radius:6px; padding:5px 8px; font-size:12px; color:var(--gedaempft); margin:4px 0;}
.blase .wl{display:block; font-size:11px; color:var(--gedaempft); font-style:italic;}
.blase .text{white-space:pre-wrap; word-break:break-word;}
.blase .zeit{display:block; text-align:right; font-size:10px; color:var(--gedaempft); margin-top:2px;}
.reaktionen{display:block; margin-top:4px;}
.reaktionen span{display:inline-block; background:var(--papier); border:1px solid var(--linie);
  border-radius:99px; padding:1px 8px; font-size:12px; margin-right:4px;}
.aktionsblatt{position:relative; margin-top:8px; padding-top:8px; border-top:1px dashed var(--linie);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; cursor:default;}
.aktionsblatt button{margin-top:0; padding:6px 10px; font-size:13px;}
.btnselect{font:inherit; padding:8px 10px; border:1px solid var(--linie); border-radius:8px; background:#fff;}
.eingabezeile{background:var(--karte); border:1px solid var(--linie); border-radius:12px;
  padding:10px 12px; margin-top:10px;}
.eingabeflex{display:flex; gap:8px;}
.eingabeflex input{flex:1;}
.eingabeflex button{margin-top:0;}
#antwortzeile{display:flex; justify-content:space-between; gap:8px; align-items:center;
  background:var(--papier); border-left:3px solid var(--gold); border-radius:6px;
  padding:6px 10px; font-size:12px; color:var(--gedaempft); margin-bottom:8px;}
#antwortzeile button{margin-top:0; padding:2px 8px;}
.wahlliste{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.wahl{display:flex; gap:6px; align-items:center; border:1px solid var(--linie); border-radius:8px;
  padding:7px 10px; font-size:14px; color:var(--text); cursor:pointer;}
.wahl input{width:auto;}
.leerbuehne{text-align:center; padding:60px 20px;}
@media (max-width:820px){
  .portal{flex-direction:column;}
  .chatspalte{flex:none; max-height:40vh;}
}
.ruecklink{color:var(--gedaempft); font-size:13px; text-decoration:none; margin-top:14px; display:inline-block;}
.ruecklink:hover{color:var(--marine); text-decoration:underline;}

/* ===== Fassung 0.2.1 — WhatsApp-Bild nach Klickdummy (eingefrorene Oberflächen-Vorgabe) ===== */
body{background:#ECEEF1;}
.portal{background:#fff; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.14); overflow:hidden; gap:0;}
.einstellleiste{width:78px; flex:none; background:#16202E; display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:4px;}
.einstellleiste a{width:66px; border-radius:11px; color:#8FA0B5; font-size:17px; padding:8px 0 6px;
  display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; text-align:center;}
.einstellleiste a small{font-size:8px; letter-spacing:.03em; font-weight:600;}
.einstellleiste a:hover{background:#243347; color:#fff;}
.einstellleiste .unten{margin-top:auto;}
.chatspalte{border-radius:0; border:none; border-right:1px solid var(--linie); flex-basis:300px;}
.spaltenkopf{display:flex; align-items:center; justify-content:space-between; padding:16px 14px 8px; border-bottom:none;}
.spaltenkopf h2{font-size:17px; margin:0;}
.stift{background:transparent; border:none; font-size:16px; color:#54606F; padding:4px 8px; border-radius:8px; margin-top:0;}
.stift:hover{background:#F5F6F9;}
.suchzeile{margin:2px 12px 10px;}
.suchzeile input{width:100%; border:none; background:#F5F6F9; border-radius:9px; padding:8px 12px; font-size:12.5px;}
.chatitem{border-bottom:none; padding:9px 10px; border-radius:11px; margin:0 6px;}
.chatitem.gewaehlt{background:#EEF1F6;}
.chatkreis{width:42px; height:42px; color:#fff; border:none; font-size:12px; font-weight:700;}
.chatkreis.klein{width:40px; height:40px; font-size:12px; display:flex; align-items:center; justify-content:center; border-radius:99px; color:#fff; flex:none;}
.chatoben{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.chatoben b{font-weight:600; font-size:13.5px;}
.chatzeit{font-size:10px; color:#9AA1AC; flex:none;}
.spaltenfuss{display:flex; border-top:1px solid var(--linie); background:#fff;}
.spaltenfuss a, .spaltenfuss span{flex:1; text-align:center; padding:11px 0 13px; font-size:11.5px;
  color:#7B8494; font-weight:600; text-decoration:none;}
.spaltenfuss .aktiv{color:var(--marine);}
.gespraech{padding:0; display:flex; flex-direction:column; background:#EFEAE2;}
.gespraechskopf{border-radius:0; border:none; border-bottom:1px solid var(--linie); margin-bottom:0; padding:10px 16px; align-items:center; background:#fff;}
.kopfmitte{flex:1; min-width:0; cursor:default;}
#gruppenkopf{cursor:pointer;}
.kopfmitte .kn{font-weight:700; font-size:14px; color:#111;}
.mitgliederzeile{font-size:11px; color:#7B8494; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kopfsymbol{background:transparent; border:none; font-size:16px; padding:5px 7px; border-radius:8px; opacity:.35; margin-top:0;}
.kopfsymbol.an{opacity:1;}
.kopfsymbol:hover{background:#F5F6F9;}
.verlauf{max-height:none; padding:16px 6%;
  background:#EFEAE2 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" opacity="0.05"><circle cx="14" cy="16" r="2.2" fill="%231F2C3D"/><circle cx="58" cy="40" r="2.2" fill="%231F2C3D"/><circle cx="30" cy="72" r="2.2" fill="%231F2C3D"/></svg>');}
.tagpille{background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.08); color:#54606F; font-weight:600; border-radius:9px;}
.tagpille.beitritt{background:#FBF8F0; border:1px solid var(--gold);}
.tagpille.system{font-weight:400;}
.nreihe{display:flex; align-items:flex-end; gap:7px; max-width:86%; align-self:flex-start;}
.nreihe.ich{align-self:flex-end;}
.avk{width:28px; height:28px; border-radius:99px; color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:9.5px; font-weight:700; flex:none; margin-bottom:2px;}
.blase{border:none; box-shadow:0 1px 2px rgba(0,0,0,.05); border-radius:10px; max-width:100%; align-self:auto; padding:9px 12px; font-size:13px;}
.nreihe:not(.ich) .blase{border-top-left-radius:2px;}
.nreihe.ich .blase{border-top-right-radius:2px; background:#EFE6D3; border:none;}
.blase .abs{display:block; font-size:10.5px; font-weight:700; margin-bottom:2px;}
.blase .mz{display:block; font-size:9px; color:#9AA1AC; text-align:right; margin-top:3px;}
.blase .mz b{color:var(--gold);}
.blase.geloescht{background:#fff;}
.eingabezeile{border-radius:0; border:none; border-top:1px solid var(--linie); margin-top:0; background:#F0F2F5;}
.eingabeflex input{border:none; background:#fff; border-radius:9px; padding:10px 13px; font-size:13.5px;}
.emkn{border:none; background:transparent; font-size:18px; padding:4px 6px;}
#emojileiste{display:flex; gap:2px; flex-wrap:wrap; padding:4px 0 8px;}
#emojileiste[hidden]{display:none;}
#emojileiste .emoji{background:transparent; border:none; font-size:19px; padding:2px 4px; margin-top:0;}
.gespraech .karte{margin:14px 16px;}
.gespraech .fehler{margin:14px 16px 0;}
#gruppeninfo{margin:14px 16px 0;}
.leerbuehne{background:transparent; border:none;}

/* ===== Fassung 0.2.2 — Ansicht-Schalter (Desktop | App) und App-Layout ===== */
.schalter{display:flex; background:rgba(255,255,255,.12); border-radius:10px; padding:3px; margin-right:8px;}
.schalter button{background:transparent; color:#C9D2DE; font-size:12px; font-weight:600;
  padding:7px 14px; border-radius:8px; border:none; margin-top:0;}
.schalter button.an{background:var(--gold); color:var(--marine);}
.portal.modus-app{max-width:420px; min-height:calc(100vh - 170px);}
.modus-app .chatspalte{flex:1 1 auto; border-right:none;}
.modus-app .gespraech{border-radius:16px;}
.modus-app .verlauf{padding:14px 4%;}
.modus-app .nreihe{max-width:92%;}
.zurueckpfeil{font-size:22px; line-height:1; text-decoration:none; color:var(--marine);
  padding:2px 10px 4px 4px; flex:none;}
.appzurueck{margin:14px 16px 0; display:inline-block;}

/* ===== Fassung 0.3.0 — ✦-Assistent (ruht, bis ein KI-Zugang konfiguriert ist) ===== */
.kipanel{margin:14px 16px 0; border:1.5px solid var(--gold); background:#FFFDF8;}
.kipanel h2{font-size:14px; margin:0 0 8px; color:var(--marine);}
.kitext{white-space:pre-wrap; font-size:13.5px; margin:0;}
a.kopfsymbol{text-decoration:none; display:inline-block; color:var(--gold); font-weight:700;}

/* ===== Fassung 0.4.0 — M3 Wissen und Dokumente ===== */
textarea{font:inherit; width:100%; padding:10px 12px; border:1px solid var(--linie);
  border-radius:8px; background:#fff; resize:vertical;}
textarea:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}
.dokkarte{display:flex; gap:9px; align-items:center; background:#fff; border:1px solid var(--linie);
  border-radius:8px; padding:8px 10px; margin:4px 0; max-width:100%;}
.nreihe.ich .dokkarte{background:#FBF6EA;}
.doksymbol{width:36px; height:36px; border-radius:8px; background:var(--marine); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; flex:none;}
.doktext{min-width:0; flex:1;}
.doktext b{font-weight:600; font-size:12.5px; display:block; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.doktext small{display:block; color:#7B8494; font-size:10.5px;}
.laden{background:#F5F6F9; border:1px solid var(--linie); border-radius:8px; font-size:11px;
  padding:6px 10px; font-weight:600; color:var(--marine); text-decoration:none; flex:none;}
.laden:hover{border-color:var(--gold);}
.bildvorschau{max-width:260px; max-height:220px; border-radius:8px; display:block; margin:4px 0;}
#anhangzeile{display:flex; justify-content:space-between; gap:8px; align-items:center;
  background:var(--papier); border-left:3px solid var(--marine); border-radius:6px;
  padding:6px 10px; font-size:12px; color:var(--gedaempft); margin-bottom:8px;}
#anhangzeile[hidden]{display:none;}
#anhangzeile button{margin-top:0; padding:2px 8px;}
label.emkn{cursor:pointer; padding:8px 6px;}
.wissenliste{display:flex; flex-direction:column; gap:12px;}
.wisseneintrag{border:1px solid var(--linie); border-radius:12px; padding:12px 14px; background:#fff;}
.wissenkopf{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.wissenkopf b{font-size:14.5px;}
.wissentext{white-space:pre-wrap; margin:8px 0 0; font-size:13.5px;}
.wissenfuss{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px;}

/* ===== Fassung 0.5.0 — Echtzeit, Lesehaken, Zähler, Suche ===== */
.chatunten{display:flex; justify-content:space-between; align-items:center; gap:6px;}
.chatunten small{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.zaehler{background:var(--gold); color:var(--marine); border-radius:9px; font-size:9.5px;
  font-weight:700; padding:1px 6px; flex:none;}
a.wisseneintrag{display:block; text-decoration:none; color:var(--text);}
a.wisseneintrag.treffer:hover{border-color:var(--gold);}

/* ===== Fassung 0.5.1 — Gruppe anlegen mit Personen-Neuanlage ===== */
.neuperson{display:grid; grid-template-columns:1.2fr 1.4fr .7fr .9fr; gap:6px; margin-bottom:6px;}
.neuperson input, .neuperson select{margin:0;}
@media (max-width:820px){ .neuperson{grid-template-columns:1fr 1fr;} }
#person-dazu{margin-top:4px;}

/* ===== Fassung 0.6.0 — Meldekarte auf der Gruppen-Seite ===== */
.meldekarte2{margin:14px 16px 0; border:1.5px solid var(--gold); background:#FFFDF8;}
.meldekarte2 .mkkopf{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px;}
.meldekarte2 .mkkopf b{color:var(--marine); font-size:13.5px;}
.meldekarte2 .eingabeflex button[type="submit"]{margin-top:0;}

/* ===== Fassung 0.7.0 — PWA + Meldekarte überall ===== */
.mkring{display:inline-block; width:13px; height:13px; border:2.5px solid var(--gold);
  border-radius:50%; vertical-align:-2px; margin-right:2px;}
.belegknopf{position:relative;}
.belegzeile{display:flex; gap:8px; align-items:center; margin-top:6px;}
.belegzeile[hidden]{display:none;}
.wegknopf{background:none; border:none; cursor:pointer; color:var(--gedaempft);
  font-size:13px; padding:2px 6px; margin:0;}
.wegknopf:hover{color:var(--marine);}
.einrichtung{margin:10px 12px 0; border:1.5px solid var(--gold); border-radius:12px;
  background:#FFFDF8; padding:10px 12px; font-size:13px;}
.einrichtung[hidden]{display:none;}
.einrichtung .mkkopf{display:flex; justify-content:space-between; align-items:baseline;}
.einrichtung .mkkopf b{color:var(--marine); font-size:13px;}
.einrichtung #hinweis-installieren{margin-top:6px;}
.einrichtung #hinweis-mitteilungen{margin-top:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.einrichtung #hinweis-mitteilungen[hidden]{display:none;}
.einrichtung button.neben{margin-top:0;}
.antwortknoepfe{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.antwortknoepfe form{margin:0; display:inline;}
.antwortknoepfe button{margin-top:0;}

/* ===== Fassung 0.7.1 — App-Ansicht im WhatsApp-Bild ===== */
/* Schmal (Handy): eine Spalte — Liste ODER Gespräch, mit ‹-Pfeil zurück. */
@media (max-width:899px){
  .modus-app.mit-inhalt .chatspalte{display:none;}
  .modus-app:not(.mit-inhalt) .gespraech{display:none;}
}
/* Breit (Tablet/Rechner): links die Namen, in der Mitte groß der Chat — wie WhatsApp. */
@media (min-width:900px){
  .portal.modus-app{max-width:1160px; display:flex;}
  .modus-app .chatspalte{flex:0 0 340px; border-right:1px solid var(--linie);}
  .modus-app .gespraech{flex:1 1 auto;}
  .modus-app .zurueckpfeil, .modus-app .appzurueck{display:none;}
}

/* ===== Fassung 0.8.0 — Klickwahl + Meldekarte-Vollausbau ===== */
.klickwahl{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:6px 0 10px;}
.kachel{border:1px solid var(--linie); background:#fff; border-radius:16px;
  padding:5px 12px; font-size:12.5px; cursor:pointer; color:var(--text);}
.kachel:hover{border-color:var(--gold); background:#FFFDF8;}
.kachel.zahnrad{padding:5px 9px; color:var(--gedaempft);}
.kwneu{display:inline-flex; gap:6px; align-items:center;}
.kwneu[hidden]{display:none;}
.kwneu input{margin:0; padding:5px 10px; font-size:12.5px; width:200px;}
.kwneu button{margin-top:0; padding:5px 10px; font-size:12.5px;}
tr.markiert td{background:#FFF7E6; border-top:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);}

/* ===== Fassung 0.8.1 — Aktionsblatt kompakt (eine Symbolzeile) ===== */
.aktionszeile{display:flex; gap:4px; align-items:center; flex-wrap:wrap;}
.aktionszeile .zeile{display:inline-flex; gap:4px; margin:0;}
.aktionsblatt .aksym{margin-top:0; padding:4px 9px; font-size:14px; line-height:1.2;
  border:1px solid var(--linie); background:#fff; border-radius:8px; cursor:pointer;}
.aktionsblatt .aksym:hover{border-color:var(--gold); background:#FFFDF8;}
.aktionsblatt .aksym.klein{font-size:12px;}
.weiterleitenzeile{display:flex; gap:6px; align-items:center; margin-top:6px;}
.weiterleitenzeile[hidden]{display:none;}
.weiterleitenzeile select{margin:0;}
.weiterleitenzeile button{margin-top:0; padding:5px 10px; font-size:12.5px;}

/* ===== Fassung 0.26.0 — Standard Erscheinungsbild (22.08.2026): das eine Original-Logo =====
   Die nachgezeichnete Kreisschleife (Fassung 0.8.2) ist abgelöst. Die folgenden Regeln sind
   WÖRTLICH aus AAA_SummitGO_Standards/standard-referenz/logo/erscheinungsbild.css übernommen;
   geändert wird nur dort. Die Bilder liegen unter app/static/logo/ (Kopie des Referenzpakets). */
/* SummitGO Erscheinungsbild — Bildschirm-Bausteine (Standard 22.08.2026).
   1:1 uebernehmen. Bilder liegen unter /static/logo/ (aus standard-referenz/logo/).
   Groessen und Abstaende im Verhaeltnis des Original-Logos (Schleife 600 : Strich 380 :
   Schriftzug 260 : Modulzeile 70), Bezug Schleife = 48 px im Kopf. */

/* --- Wort-Bild-Marke im Suite-Kopf --- */
.sgo-marke{display:flex;align-items:center;text-decoration:none;color:inherit}
.sgo-marke .sgo-schleife{width:48px;height:48px;display:block}
.sgo-marke .sgo-strich{width:1px;height:30px;background:#8A9BB0;margin:0 10px}
.sgo-marke .sgo-text{display:flex;flex-direction:column;gap:4px}
.sgo-marke .sgo-schriftzug{height:21px;width:auto;display:block}
.sgo-marke .sgo-modulname{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;
  font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;color:#C3CDD8;padding-left:1px;white-space:nowrap}

/* --- Marke auf hellem Grund (Anmeldeseite hell, Druck, Mail-Vorschau): dunkle Bilder einsetzen --- */
.sgo-marke.hell .sgo-strich{background:#9AA3AE}
.sgo-marke.hell .sgo-modulname{color:#6B6B6B}

/* --- Denkanzeige: die Original-Schleife, still oder bei der Arbeit --- */
.sgo-denk{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto}
.sgo-denk img{width:100%;height:100%;display:block}
@keyframes sgo-dreh{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes sgo-atmen{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(194,161,92,0))}
  50%{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(194,161,92,.55))}}
.sgo-denk.arbeitet{animation:sgo-atmen 2.6s ease-in-out infinite}
.sgo-denk.arbeitet img{animation:sgo-dreh 7s linear infinite}
.sgo-denk.klein{width:34px;height:34px}
@media (prefers-reduced-motion:reduce){.sgo-denk.arbeitet,.sgo-denk.arbeitet img{animation:none}}
/* Einbau im Modul (nicht Teil des Standards): die Schleife steht im Meldekarten-Kopf in der
   Textzeile und in der Warte-Blase des Hilfe-Fensters — dort als Zeilenelement. */
.meldekarte2 .mkkopf .sgo-denk{display:inline-grid; vertical-align:middle; margin-right:4px;}
.hilfeblase.arbeitet .sgo-denk{display:inline-grid; vertical-align:middle; margin-right:6px;}
.denkanzeige{position:fixed; inset:0; background:rgba(246,246,241,.88); display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:14px; z-index:99;}
.denkanzeige.an{display:flex;}
.denkanzeige p{font-size:15px; color:var(--marine); font-weight:500;}

/* ===== Fassung 0.8.3 — Doc-Befunde: Verlauf endet unten, Aktionsblatt zu ===== */
/* [hidden] muss IMMER gewinnen — display:flex der Grundregel hatte es übersteuert. */
.aktionsblatt[hidden]{display:none;}

/* ===== Fassung 0.9.0 — Haftleiste, Meldefeld mehrzeilig, eigenes Druckblatt ===== */
.meldekarte2 textarea{flex:1; min-width:0; resize:none; overflow:hidden; min-height:38px;
  font:inherit; padding:9px 12px; border:1px solid var(--linie); border-radius:8px; margin:0;}
.haftleiste{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--marine);
  color:#fff; display:flex; gap:14px; align-items:center; justify-content:center;
  padding:10px 16px; flex-wrap:wrap; box-shadow:0 -8px 24px rgba(0,0,0,.18); font-size:14px;}
.haftleiste button{margin:0; background:var(--gold); color:var(--marine); font-weight:700;
  border:none; border-radius:8px; padding:9px 18px; cursor:pointer;}
.haftleiste button:hover{filter:brightness(1.05);}
body:has(.haftleiste) .fuss{padding-bottom:64px;}

/* ===== Fassung 0.9.1 — Wissen im Chat-Muster ===== */
.wissenkopf h1{font-size:19px;}
.spaltenkopf a.stift{text-decoration:none; font-size:15px; color:var(--text);
  border:1px solid var(--linie); border-radius:8px; padding:4px 9px;}
.spaltenkopf a.stift:hover{border-color:var(--gold);}

/* ===== Fassung 0.10.0 — Meldekarte als Schaltzentrale ===== */
.planliste{margin:10px 0 14px; padding-left:22px; display:flex; flex-direction:column; gap:8px;}
.planliste li{font-size:14.5px;}
.planliste li.gedimmt{opacity:.55;}

/* ===== Fassung 0.10.1 — Gruppe auflösen ===== */
.rotrand{border-color:#B0413E; color:#B0413E;}
.rotrand:hover{background:#FDF3F2;}

/* ===== Fassung 0.10.2 — Eingabezeile immer im Bild (Doc-Befund) ===== */
/* Feste Fensterhöhe statt Mitwachsen: nur der Verlauf rollt innen — die
   Eingabezeile steht immer unten im Bild, Öffnen landet bei der neuesten Nachricht. */
.portal{height:calc(100vh - 160px);}
.portal.modus-app{height:calc(100vh - 170px);}
.gespraech{overflow-y:auto;}
.chatspalte .chatliste2{overflow-y:auto; flex:1;}

/* ===== Fassung 0.11.1 — Weiche, Wissens-Vorschau, ⓘ-Einzelheiten ===== */
.wissenbild{max-width:100%; border:1px solid var(--linie); border-radius:10px; margin-top:10px;}
.wissenpdf{width:100%; height:480px; border:1px solid var(--linie); border-radius:10px; margin-top:10px;}

/* ===== Fassung 0.12.0 — ⚙ Gruppen-Verwaltung in der Seitenleiste ===== */
.chatzeile{position:relative;}
.chatzeile .chatitem{display:flex; padding-right:34px;}
.zahnrad-chat{position:absolute; right:8px; top:50%; transform:translateY(-50%);
  text-decoration:none; color:var(--gedaempft); font-size:15px; padding:6px;
  border-radius:8px; opacity:.65;}
.zahnrad-chat:hover{background:#F1F3F6; color:var(--marine); opacity:1;}

/* ===== Fassung 0.13.0 — Stammdaten-Rubrik mit Konvolut-Import ===== */
.reiterleiste{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; border-bottom:1px solid var(--linie); padding-bottom:10px;}
.reiter{text-decoration:none; color:var(--text); padding:6px 14px; border-radius:16px;
  border:1px solid var(--linie); font-size:13.5px;}
.reiter.an{background:var(--marine); color:#fff; border-color:var(--marine);}
.reiter:hover:not(.an){border-color:var(--gold);}
tr.gedimmt td{opacity:.55;}
.meldekarte2 input[type="file"]{border:1px dashed var(--gold); border-radius:8px; padding:10px; background:#fff;}

/* ===== Fassung 0.14.1 — Großansicht + Zeichen-Erklärung ===== */
.bildvorschau{cursor:zoom-in;}
.aktionslegende{margin-top:6px; font-size:11px;}
.grossansicht{position:fixed; inset:0; background:rgba(23,37,56,.93); z-index:120;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
.grossansicht[hidden]{display:none;}

/* Die Lupe (Doc, 28.08.2026): Das Bild wurde vorher auf den Bildschirm
   EINGEPASST — bei einem breiten Dienstplan hieß das: alles drauf, nichts
   lesbar. Jetzt ist die Fläche ein Rollfeld, in dem das Bild wachsen darf. */
.gross-feld{width:92vw; height:78vh; overflow:auto; border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); background:#0F1B2A;
  display:flex; align-items:center; justify-content:center;
  /* Am Handy bleibt das Aufziehen mit zwei Fingern die gewohnte Bewegung. */
  touch-action:pinch-zoom;}
.gross-feld.zieht{cursor:grabbing;}
#gross-bild{max-width:100%; max-height:100%; border-radius:10px; cursor:zoom-in;}
/* Vergrößert: nicht mehr einpassen, sondern über den Rand hinauswachsen lassen —
   erst dann hat das Rollfeld etwas zu rollen. */
#gross-bild.gezoomt{max-width:none; max-height:none; border-radius:0; cursor:grab;
  align-self:flex-start; margin:auto;}

.gross-leiste{display:flex; align-items:center; gap:12px; color:#E9ECF0; font-size:13.5px;}
.gross-leiste button{background:rgba(255,255,255,.12); border:none; color:#fff;
  font-size:17px; line-height:1; cursor:pointer; padding:6px 11px; border-radius:7px;}
.gross-leiste button:hover{background:rgba(255,255,255,.22);}
#gross-stufe{min-width:82px; text-align:center; color:#AEBED0;}
.gross-zu{background:transparent !important; font-size:20px !important;}
#gross-laden{color:#E9ECF0; font-size:13.5px;}
.gross-hilfe{color:#8C9CB0; font-size:12px; margin:0;}
@media (max-width:899px){
  .gross-feld{width:96vw; height:74vh;}
  .gross-hilfe{display:none;}      /* am Handy macht man das, statt es zu lesen */
}

/* ===== Fassung 0.15.0 — Hilfe & Kontakt (Rückmeldung an SummitGO) ===== */
.fuss a{color:var(--gedaempft); text-decoration:underline;}
.fuss a:hover{color:var(--marine);}
.rueckueberblendung{position:fixed; inset:0; background:rgba(23,37,56,.55); z-index:110;
  display:flex; align-items:center; justify-content:center; padding:16px;}
.rueckueberblendung[hidden]{display:none;}
.rueckkarte{max-width:560px; width:100%; max-height:88vh; overflow-y:auto;}
.rueckkarte .mkkopf{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.rueckkarte .mkkopf b{color:var(--marine); font-size:14px;}
.rueckkarte textarea{width:100%; box-sizing:border-box; resize:vertical; min-height:96px;}
.rueckzeile{display:flex; align-items:center; gap:6px; margin:6px 0;}
.rueckwahl{display:block; margin:6px 0; font-size:13.5px; cursor:pointer;}
.rueckwahl input{width:auto; padding:0; margin-right:6px; vertical-align:middle;}
.rueckkarte #rueck-nummer{width:100%; box-sizing:border-box; margin:4px 0;}
.rueckfuss{margin-top:10px; text-align:right;}

/* ===== Fassung 0.16.0 — Hilfe-Chat (Stufe 1 vor der Rückmeldung) ===== */
.hilfe-verlauf{max-height:44vh; min-height:120px; overflow-y:auto; display:flex;
  flex-direction:column; gap:8px; padding:6px 2px; margin-bottom:8px;}
.hilfeblase{max-width:85%; border-radius:12px; padding:8px 12px; font-size:13.5px;
  line-height:1.45; white-space:pre-wrap;}
.hilfeblase.ki{background:#F4F5F7; color:var(--text); align-self:flex-start;
  border:1px solid #E3E7EB;}
.hilfeblase.mensch{background:var(--marine); color:#fff; align-self:flex-end;}
.hilfeblase.arbeitet{color:var(--gedaempft); font-style:italic;}
.hilfeblase .hinweis{margin-top:6px; font-size:11.5px;}
.hilfeblase.mensch .hinweis{color:#C9D3DE;}
#hilfe-teil .eingabeflex{display:flex; gap:6px; align-items:flex-end;}
#hilfe-teil textarea{flex:1; resize:none; min-height:38px;}

/* ===== Fassung 0.16.1 — 🛟 Hilfe fest in der Kopfzeile (Doc, 10.08.); seit 0.25.0 im
   Platz sgo-hilfe des Suite-Kopfs, Markup unverändert ===== */
.kopfhilfe{color:#fff; text-decoration:none; font-size:13px; border:1px solid rgba(194,161,92,.65);
  border-radius:8px; padding:7px 12px; white-space:nowrap;}
.kopfhilfe:hover{border-color:var(--gold); background:rgba(194,161,92,.12);}

/* ===== Fassung 0.16.2 — Weitergeben-Verweis im Suite-Kleid statt Browserblau ===== */
.rueckfuss a{color:var(--gedaempft); text-decoration:underline; text-underline-offset:3px;}
.rueckfuss a:hover{color:var(--marine);}

/* ===== Fassung 0.16.3 — Handy-Feinschliff (Doc-Befunde iPhone, 10.08.) =====
   Am Handy: der Ansicht-Schalter ist dort sinnlos, das 🛟 sitzt in der Fußleiste —
   beide modul-eigenen Teile des Suite-Kopfs bleiben am Handy ausgeblendet; keine
   Fußzeile. Die Portal-Höhe am Handy: siehe Fassung 0.25.0 am Ende. */
@media (max-width:700px){
  .sgo-kopf .sgo-schalter{display:none;}
  .kopfhilfe{display:none;}
  .inhalt{padding:10px 10px 12px;}
  .fuss{display:none;}
}
@supports (height:100dvh){
  .portal{height:calc(100dvh - 160px);}
  .portal.modus-app{height:calc(100dvh - 170px);}
}

/* Der alte 40vh-Deckel (Spalten-Stapelung der Desktop-Ansicht auf schmalen
   Fenstern) gilt NICHT für die App-Ansicht: dort füllt die eine sichtbare
   Spalte die ganze Höhe — wie bei WhatsApp (Doc-Befund weiße Hälfte, 10.08.). */
@media (max-width:899px){
  .modus-app .chatspalte{flex:1 1 auto; max-height:none;}
}

/* Die unsichtbare Verlaufs-Grafik (SVG-Definitionen) erzeugte als Inline-Element
   eine Leerzeile über dem Kopf — als Block mit Höhe 0 ist sie wirklich unsichtbar. */
body > svg[aria-hidden]{display:block; height:0;}

/* Lehre 0.8.3, erneut bestätigt: zu JEDER display-Regel gehört das [hidden]-Gegenstück. */
#antwortzeile[hidden]{display:none;}
/* Am Handy wie WhatsApp: keine Fußnote unter der Eingabezeile. */
@media (max-width:700px){
  .eingabezeile > small.hinweis{display:none;}
}

/* ===== Fassung 0.16.4 — Handy noch näher an WhatsApp (Doc, 11.08.) =====
   Bilder im Chat: volle Blasenbreite statt Briefmarke. (Die schlanke Kopfzeile
   am Handy ist seit 0.25.0 der Suite-Kopf selbst; er bricht in zwei Reihen um.) */
@media (max-width:700px){
  .bildvorschau{max-width:100%; max-height:45vh;}
  .modus-app .nreihe{max-width:88%;}
}

/* ===== Fassung 0.16.5 — Handy randlos wie WhatsApp (Doc, 11.08.) =====
   Keine schwebende Karte mehr: Liste und Gespräch reichen von Kante zu Kante,
   der Bildschirm gehört dem Inhalt. */
@media (max-width:700px){
  .inhalt{padding:0; max-width:none;}
  .inhalt:has(.portal){max-width:none;}
  .portal, .portal.modus-app{max-width:none; border-radius:0; box-shadow:none; gap:0;}
  .chatspalte, .modus-app .chatspalte{border-radius:0; border:none;}
  .modus-app .gespraech{border-radius:0;}
  .spaltenkopf{padding:12px 14px 6px;}
  .suchzeile{margin:2px 12px 8px;}
  .gespraechskopf{border-radius:0;}
  .einrichtung{margin:0 12px 8px;}
}

/* Datums- und Systemzeilen wie bei WhatsApp: kleine Pille in der Mitte,
   nicht als Balken über die ganze Breite. */
.tagpille{align-self:center; max-width:88%; width:auto; text-align:center;
  padding:4px 12px; font-size:12px;}

/* ===== Fassung 0.16.6 — Sicherheitsabstände der installierten App (Doc, 11.08.) =====
   Im Vollbild liegt die iPhone-Statusleiste (Uhrzeit, Empfang) ÜBER der Seite:
   Kopf und Fußleiste rücken um die Systemabstände ein. */
header.sgo-kopf, header.anmeldekopf{padding-top:calc(9px + env(safe-area-inset-top));}
.spaltenfuss{padding-bottom:calc(6px + env(safe-area-inset-bottom));}
@media (max-width:700px){
  .eingabezeile{padding-bottom:calc(10px + env(safe-area-inset-bottom));}
}


/* Zweiter Riegel: Auf schmalen Bildschirmen hat die dunkle Verwaltungsleiste
   nichts zu suchen — auch dann nicht, wenn die Geräte-Erkennung danebenliegt. */
@media (max-width:700px){
  .einstellleiste{display:none;}
}

/* In der Schiene bleibt die Fußleiste erreichbar — senkrecht und knapp,
   damit Wissen, Geräte und Hilfe auch im Chat einen Fingertipp entfernt sind. */
@media (max-width:899px){
}

/* ===== Fassung 0.19.2 — Chatliste kompakt (Doc am Klickdummy: „genau so") =====
   Alles untereinander: Bild links 42, Name 13,5 mit Uhrzeit rechts, darunter die
   ersten Wörter einzeilig. Zeilenhöhe rund 56 Punkte — mehr Chats im Bild. */
@media (max-width:899px){
  .modus-app .chatliste2 .chatitem{gap:11px; align-items:center; padding:9px 12px;
    margin:0; border-radius:0;}
  .modus-app .chatliste2 .chatkreis{width:42px; height:42px; font-size:12px;}
  .modus-app .chatliste2 .chattext{flex:1; min-width:0;}
  .modus-app .chatliste2 .chatoben b{font-size:13.5px;}
  .modus-app .chatliste2 .chatzeit{font-size:11px;}
  .modus-app .chatliste2 .chatunten{align-items:center; margin-top:2px;}
  .modus-app .chatliste2 .chattext small{font-size:12.5px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;}
  .modus-app .chatliste2 .zaehler{min-width:19px; height:19px; border-radius:99px;
    font-size:11px; display:flex; align-items:center; justify-content:center; flex:none;}
  .modus-app .spaltenkopf h2{font-size:20px;}
  .modus-app .spaltenkopf{padding:12px 12px 6px;}
}

/* Chats ohne Vorschautext (reine Systemmeldung, leere Gruppe) sollen keine
   Leerzeile aufreißen — die Zeile schrumpft dann auf Name und Uhrzeit. */
@media (max-width:899px){
}

/* Die Trennlinie richtet sich nach dem Bild, nicht nach der Textmenge —
   sonst rutscht sie bei kurzen Zeilen nach oben und hinterlässt eine Lücke. */
@media (max-width:899px){
}

/* Chatkopf am Handy schlank wie bei WhatsApp: eine Zeile Name, darunter klein
   die Mitgliederzahl — der Name bricht nicht mehr um. */
@media (max-width:700px){
  .gespraechskopf{padding:7px 10px; gap:8px;}
  .gespraechskopf .chatkreis.klein{width:36px; height:36px; font-size:11px;}
  .gespraechskopf .kopfmitte{min-width:0; flex:1;}
  .gespraechskopf .kn{font-size:15px; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis;}
  .gespraechskopf .mitgliederzeile{font-size:11.5px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;}
  .gespraechskopf .kopfsymbol{padding:4px 6px;}
  .zurueckpfeil{padding:2px 4px 4px 0;}
}

/* ===== Fassung 0.21.0 — Hilfe und Kontakt nach Punkt 28 (Nachträge 2–4):
   Kopfbalken mit Rettungsring und feiner Linie, Zweispalter mit der Liste der
   eigenen Anfragen und der Meldetafel links, rechts der gewählte Inhalt. ===== */
.hkkarte{max-width:860px;}
/* hidden muss auch gegen display:block-Klassen gewinnen (Bestätigungszeilen). */
.hkkarte [hidden]{display:none !important;}
.hkkopf{display:flex; align-items:center; gap:10px; border-bottom:1px solid #E3E7EB;
  padding-bottom:8px; margin-bottom:10px; flex-wrap:wrap;}
.hkkopf b{color:var(--marine); font-size:14.5px; white-space:nowrap;}
.hkkopf .hkmodul{color:var(--gedaempft); font-weight:400;}
.hktrenner{width:1px; align-self:stretch; background:#E3E7EB;}
.hkknopf{background:#fff; border:1px solid #D5DBE1; border-radius:8px; padding:5px 12px;
  font-size:12.5px; cursor:pointer; color:var(--text);}
.hkknopf.aktiv{background:var(--marine); border-color:var(--marine); color:#fff;}
.hkrechts{margin-left:auto;}
.hkzwei{display:grid; grid-template-columns:230px 1fr; gap:14px; min-height:280px;}
.hkliste{border-right:1px solid #E3E7EB; padding-right:12px; display:flex;
  flex-direction:column; gap:6px; align-items:stretch;}
.hkliste #hk-neu{width:100%;}
.hkeintrag{display:block; border:1px solid #E3E7EB; border-radius:8px; padding:7px 9px;
  font-size:12.5px; text-decoration:none; color:var(--text); background:#fff;}
.hkeintrag:hover{border-color:var(--gold);}
.hkeintrag b{margin-right:6px;}
.hkeintrag .pille{float:right;}
.hkbetreff{color:var(--gedaempft); font-size:12px; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hkvorgaenge{display:flex; flex-direction:column; gap:6px; overflow-y:auto; max-height:46vh;}
.hkinhalt{min-width:0;}
.hkteil textarea{width:100%; box-sizing:border-box;}
#hk-schreiben input[type="text"], #rueck-betreff{width:100%; box-sizing:border-box; margin:0 0 6px;}
#hk-faden .eingabeflex{display:flex; gap:6px; align-items:flex-end;}
#hk-faden .eingabeflex textarea{flex:1; resize:none; min-height:38px;}
.hkzusage{align-self:center; text-align:center;}
.hkmeldung{border:1px solid #E3E7EB; border-radius:10px; padding:9px 12px; margin:8px 0;
  background:#fff;}
.hkmeldung p{margin:6px 0; font-size:13.5px; white-space:pre-wrap;}
.hkmeldungskopf{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.hkmeldungskopf .hinweis{margin-left:auto;}
.hkbegruendung{border-left:3px solid var(--gold); padding-left:8px; color:var(--gedaempft);}
.hkmeldungsfuss{text-align:right;}
.hkart.aktiv, .hkmeldungsfuss .neben.aktiv{background:var(--marine); color:#fff;
  border-color:var(--marine);}
#hk-arten{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px;}
@media (max-width:700px){
  .hkzwei{grid-template-columns:1fr; min-height:0;}
  .hkliste{border-right:none; padding-right:0; border-bottom:1px solid #E3E7EB;
    padding-bottom:8px;}
  .hkvorgaenge{max-height:22vh;}
}

/* ===== Fassung 0.25.0 — Suite-Kopf nach §4 (Standard Portal und Modulleiste, 22.08.2026) =====
   Der Kopf selbst kommt 1:1 aus dem Baustein (grund.html). Hier nur, was das Modul
   darum herum braucht:
   1. Marken-Zeile der Seiten ohne Benutzer (Anmeldungs-Standard §2: dieselbe Wortmarke
      wie in der Anwendung, daneben der Modulname) — gleiche Farben und Schriften wie
      der Suite-Kopf, sonst nichts.
   2. Portal-Höhe am Handy: nicht mehr „Fenster minus feste Kopfhöhe" — der Suite-Kopf
      bricht im schmalen Fenster in zwei Reihen um, eine feste Zahl wäre wieder falsch
      (Prüfbefund 18.08.: Fußleiste aus dem Bild). Die Seite wird zur Spalte, das
      Portal nimmt den Rest. */
.anmeldekopf{background:#17324F;color:#fff;padding:9px 14px;display:flex;align-items:center;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;}
/* Marke in der Marken-Zeile: Regeln aus erscheinungsbild.css (sgo-marke … sgo-modulname), siehe oben */
@media print{.anmeldekopf{display:none;}}
@media (max-width:700px){
  body:has(.portal){display:flex; flex-direction:column; height:100vh;}
  .inhalt:has(.portal){flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
  .portal, .portal.modus-app{flex:1 1 auto; height:auto; min-height:0;}
}
@supports (height:100dvh){
  @media (max-width:700px){
    body:has(.portal){height:100dvh;}
  }
}

/* ===== Fassung 0.30.0 — KI-Vollmacht: Sprechprobe, rote Leiste für Beenden/Sperren (Standard 22.08.2026 §2.5, §5.5) ===== */
.sprechprobe{margin:10px 0 6px; padding:8px 12px; background:var(--papier); border-left:3px solid var(--gold);
  border-radius:6px; font-size:14px;}
.haftleiste.rot{background:var(--rot);}
.haftleiste.rot button{background:#fff; color:var(--rot);}
.meldekarte2 .belegzeile .anhangliste{display:inline-flex; flex-wrap:wrap; gap:6px; margin-right:6px;}
.meldekarte2 .belegzeile .anhangliste span{display:inline-block; background:var(--papier); border:1px solid var(--linie);
  border-radius:6px; padding:1px 7px;}

/* Meldekarte, zweiter Durchgang (KI-Vollmacht §13, 22.08.2026): die Einladung über der
   Karte (§13.1) bleibt stehen, auch wenn der Platzhalter beim Tippen verschwindet;
   der Satzspeicher (§13.2) nutzt die Kacheln der Klickwahl. */
.mkeinladung{margin:14px 16px -8px; font-size:13px; color:var(--gedaempft);}
.mkeinladung b{color:var(--marine); font-weight:600;}
.meldekarte2 .klickwahl{margin:8px 0 0;}
.meldekarte2 .klickwahl .kachel{max-width:100%; white-space:normal; text-align:left;}
.ernte{margin-top:8px;}
.ernte button{font-size:12.5px;}

/* Versandlage — die Warnung der Verwaltung, wenn keine E-Post hinausgeht
   (Befund 2 der Prebeta-Musterung 25.08.2026). Bernstein statt Rot: Es ist eine
   Störung, kein Datenverlust, und Rot ist in dieser Oberfläche für das Beenden
   reserviert. Sie spannt sich über beide Spalten und trägt keinen Wegklick-Knopf. */
.versandwarnung{grid-column:1/-1; background:#FBF6EA; border:1px solid #C2A15C;
  color:#5A4A28; border-radius:8px; padding:11px 14px; margin:0 0 10px;
  font-size:14px; line-height:1.5;}
.versandwarnung .hinweis{display:block; margin-top:5px; color:#5A4A28; font-size:13px;}

/* Die eingeklappte Meldekarte in der App-Ansicht (Doc, 28.08.2026).
   Eine goldene Zeile statt eines Drittels des Bildschirms; Antippen faltet auf.
   Am Rechner greift nichts davon — dort trägt die Einladung kein .mkfalte. */
.mkeinladung.mkfalte{display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1.5px solid var(--gold); background:#FFFDF8; border-radius:10px;
  padding:9px 12px; margin:14px 16px 0;}
.mkeinladung.mkfalte b{flex:1; font-size:13.5px; line-height:1.35;}
.mkeinladung.mkfalte .mkfaltepfeil{color:var(--gold); transition:transform .15s;}
.mkeinladung.mkfalte.offen{border-bottom-left-radius:0; border-bottom-right-radius:0;
  border-bottom-color:transparent; margin-bottom:0;}
.mkeinladung.mkfalte.offen + .meldekarte2{border-top-left-radius:0; border-top-right-radius:0;
  margin-top:0;}
.mkeinladung.mkfalte .mkfaltewort{color:var(--gedaempft); font-size:12.5px; white-space:nowrap;}
.mkeinladung.mkfalte .mkfaltepfeil{font-size:15px; transform:rotate(0deg);}
.mkeinladung.mkfalte:not(.offen) .mkfaltepfeil{transform:rotate(180deg);}
.mkeinladung.mkfalte:hover{background:#FFF9EC;}

/* Die Erklärzeile unter dem Nachrichtenfeld: dreimal gelesen, jeden Tag im Weg
   (Doc, 28.08.2026). Der Abgrenzungssatz zum PVS bleibt stehen — er ist
   Pflichtenheft-Ergänzung 7 und kein Bedienhinweis. */
.chathinweise{display:flex; gap:8px; align-items:flex-start;}
.chathinweise .wegknopf{flex:0 0 auto; margin-left:auto;}

/* Der Einwand der Meldekarte (Befund 3 der Musterung, 25.08.2026): Er stand
   schon im Programm, nur zeigte ihn keine Vorlage an. Er gehört ÜBER die Karte
   — wer eine Datei anhängt und nichts geschieht, sieht sonst wieder nichts. */
.fehler.mkfehler{margin:14px 16px 0;}

/* Handy-Feinschliff (Doc, 28.08.2026: „viel zu groß und zu volumig").
   Nichts wird gelöscht — es tritt nur dort zurück, wo der Platz der Nachricht
   gehört. Am Rechner bleibt alles unverändert stehen. */
@media (max-width:899px){
  /* Fassung, Meilenstein, Umgebung, Beispieldaten-Vermerk: Betriebsangaben.
     Datenschutz und Rettungsring bleiben — die braucht der Mensch. */
  .fusstechnik{display:none;}
  .fuss{font-size:11.5px; padding:8px 12px;}
  /* Der Kopf trägt am Handy Marke, Ansichtsschalter, Hilfe, Person, Suite —
     das umbricht auf drei Zeilen. Enger setzen, nichts weglassen. */
  .sgo-kopf{padding:7px 10px; gap:8px;}
  .sgo-kopf .sgo-modulname{font-size:11px;}
  /* Die Erklärzeile unter dem Nachrichtenfeld: der Abgrenzungssatz zum PVS
     bleibt (Pflichtenheft-Ergänzung 7), aber leiser. */
  .gespraech .hinweis, .chathinweise{font-size:11.5px; line-height:1.35;}
}

/* Die Meldekarte tritt am HANDY zurück (Doc, 28.08.2026: „Ich habe kein Problem,
   wenn die KI-Nutzung in der Handynutzung wegfällt. Das finde ich sogar besser.")

   Geschnitten wird am schmalen Bildschirm, NICHT an der App-Ansicht: Die
   App-Ansicht ist auch die Ansicht der MFA am Rechner. Sie dort zu entfernen
   hätte Docs Entscheidung vom 09.08.2026 nebenbei zurückgenommen — „die Tür ist
   abgeschafft, auch die Mitarbeiterin hat die Karte". Zwei bestehende Prüfungen
   haben genau das gemeldet.

   Am Telefon bleibt: schreiben, diktieren (Mikrofon im Nachrichtenfeld),
   anhängen, suchen, Wissen lesen, der Rettungsring. */
@media (max-width:899px){
  .mkeinladung, .meldekarte2, .mkfehler{display:none;}
}

/* Die Beleg-Bilanz — der Satz unmittelbar ueber der Vorschau, wenn ein Anhang
   liegengeblieben ist (Entscheidung Doc, 28.08.2026: "alle module").

   Bernstein wie die Versandlage: eine Stoerung, kein Datenverlust; Rot ist fuer
   das Beenden reserviert. Sie steht als eigenes Band ausserhalb der Karte, damit
   sie beim Ueberfliegen zwischen Meldekarte und Vorschau nicht untergeht — und
   sie traegt bewusst KEIN .mkfehler, verschwindet also am Handy nicht mit der
   Karte. */
.belegbilanz{background:#FBF6EA; border:1.5px solid var(--bernstein);
  color:#5A4A28; border-radius:10px; padding:12px 14px; margin:0 0 16px;
  font-size:14.5px; line-height:1.5;}
.belegbilanz b{display:block; margin-bottom:3px; color:var(--bernstein);}
.belegbilanz .hinweis{display:block; margin-top:5px; color:#5A4A28; font-size:13px;}

/* Zuletzt Gesagtes hinter dem Pfeil neben dem Meldefeld (§13.2, neu gefasst
   28.08.2026 — Doc: "Gruen muss weg").

   Bewusst KEINE Kacheln: Gruen steht in dieser Oberflaeche nur noch fuer
   selbst hinterlegte Standardsaetze. Was zuletzt gesagt wurde, ist eine Liste,
   und eine Liste sieht aus wie eine Liste. */
.satzpfeil{position:relative; display:flex;}
.satzliste{position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:280px;
  max-width:min(440px,80vw); max-height:320px; overflow-y:auto; background:var(--karte);
  border:1px solid var(--linie); border-radius:10px; box-shadow:0 8px 24px rgba(31,44,61,.16);
  padding:6px;}
.satzlistenkopf{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gedaempft); padding:6px 10px 4px;}
.satzzeile{display:block; width:100%; text-align:left; background:none; border:0;
  font:inherit; color:var(--text); padding:8px 10px; border-radius:7px; cursor:pointer;
  white-space:normal; line-height:1.35;}
.satzzeile:hover, .satzzeile:focus{background:var(--papier);}

/* Die Hilfe-Wege tragen ihr Ergebnis im Namen (Doc, 29.08.2026). Die zweite
   Zeile nennt, was zurückkommt — sie ist Teil des Knopfes, nicht Fließtext
   daneben: Ein Knopf, den man erst nach dem Erklärtext versteht, ist der
   falsche Knopf. */
.hkliste button small, .hkliste .hkeintrag small{display:block; font-weight:400;
  font-size:11.5px; line-height:1.3; margin-top:3px; opacity:.72;}
.hkliste button{text-align:left;}

/* „Was Ihre Praxis fragt" — die Auswertung der Themen, nur für die Verwaltung
   (Doc, 29.08.2026; Standard Hilfe und Kontakt, 12.08.2026). Themen und Zahlen,
   nie ein Wortlaut. Der Balken macht aus einer Liste einen Blick. */
.hkauswertung{margin-top:14px; padding-top:12px; border-top:1px solid var(--linie);}
.hkauswertung > b{display:block; font-size:12.5px; margin-bottom:8px;}
.hkauswertung .hinweis{display:block; margin-top:8px; font-size:11px;}
.hkthema{display:grid; grid-template-columns:1fr 54px 22px; align-items:center;
  gap:8px; margin-bottom:5px; font-size:12px;}
.hkthemaname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hkthemabalken{background:#EDEFF1; border-radius:3px; height:7px; overflow:hidden;}
.hkthemabalken i{display:block; height:100%; background:var(--gold); border-radius:3px;}
.hkthemazahl{text-align:right; color:var(--gedaempft); font-variant-numeric:tabular-nums;}