/* 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;}
.kopf{background:var(--marine); color:#fff; padding:14px 22px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.wortmarke em{font-family:Georgia,serif; font-style:italic; font-weight:400;}
.wortmarke b{color:var(--gold);}
.wortmarke span{letter-spacing:.25em; font-size:12px; margin-left:8px;}
.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 */
.kopfnav{display:flex; gap:8px; align-items:center;}
.kopfnav a{color:#fff; text-decoration:none; font-size:13px; border:1px solid rgba(255,255,255,.35);
  border-radius:8px; padding:6px 10px;}
.kopfnav a:hover{border-color:var(--gold);}
.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;}
.kopf{background:linear-gradient(90deg,#1F2C3D,#2C3E54);}
.kopfmarke{display:flex; align-items:center; gap:12px;}
.wortmarke{font-family:Georgia,serif; font-size:19px;}
.wortmarke em{font-style:italic; font-weight:400;}
.produktzeile{font-size:9px; letter-spacing:.4em; color:#D9BE85;}
.ks.atmet{animation:at 5s ease-in-out infinite;}
@keyframes at{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.ks.atmet{animation:none;}}
.kopfperson{color:#C9D2DE; font-size:13px; margin-right:6px;}
.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;}
}
.kundenzeile{color:#D9BE85; letter-spacing:0.5px; text-transform:none; font-weight:400;}