* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:root { --grün: #3cffa0; --rot: #ff4d5e; --gelb: #ffc93c; --hell: #e8ecef; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
html { background: #050607; }
body { background: #050607; color: #f2f4f5; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
.app { max-width: 560px; margin: 0 auto; padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); }

.ttl { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.logo { font: 800 24px system-ui, sans-serif; letter-spacing: -.02em; }
.punkt { color: var(--grün); }
.offen-zaehler { font: 500 11px var(--mono); color: #6d757c; letter-spacing: .02em; }

.puls-linie { display: block; width: 100%; height: 54px; margin: 2px 0 10px; overflow: visible; }
.puls-linie polyline { stroke: url(#puls-verlauf); }
.puls-linie .puls-punkt { fill: var(--grün); }
.puls-linie stop { stop-color: var(--grün); }
.puls-linie.fehler stop { stop-color: var(--rot); }
.puls-linie.fehler .puls-punkt { fill: var(--rot); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { font: 600 11.5px system-ui, sans-serif; padding: 6px 11px; border-radius: 999px; background: transparent; color: #7c848b; border: 1px solid #22272b; }
.chip.on { color: #050607; background: var(--grün); border-color: var(--grün); }
.chip.pause { color: var(--gelb); border-color: #3a3216; }

.huelle { position: relative; margin-bottom: 9px; }
.karte { display: block; border-radius: 14px; padding: 12px 13px; background: #0c0e10; border: 1px solid #1a1e21; position: relative; }
.huelle .karte { margin-bottom: 0; }
.z1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 500 11px var(--mono); letter-spacing: .02em; color: #6d757c; margin-bottom: 4px; text-transform: uppercase; }
.z2 { font: 600 14.5px/1.3 system-ui, sans-serif; margin-bottom: 3px; overflow-wrap: anywhere; }
.z3 { font: 400 12.5px/1.35 system-ui, sans-serif; color: #8a9299; overflow-wrap: anywhere; }
.wartet .z2 { color: var(--grün); }
.fehler .z2 { color: var(--rot); }
.fertig .z2 { color: var(--hell); }
.kontingent .z2 { color: var(--gelb); }
.zahl { font: 700 10.5px var(--mono); padding: 2px 7px; border-radius: 999px; background: #13261f; color: var(--grün); }
.huelle .erledigt-knopf { position: absolute; right: 10px; bottom: 9px; font: 600 11px system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; background: transparent; color: var(--grün); border: 1px solid #22272b; cursor: pointer; }
.huelle .karte.mit-knopf { padding-bottom: 38px; }

.leer { text-align: center; color: #6d757c; font: 500 13px var(--mono); padding: 22px 0; }
.detail-text { white-space: pre-wrap; margin: 8px 0 12px; }
.detail-aktionen { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.taste { display: inline-block; font: 600 13px system-ui, sans-serif; padding: 10px 16px; border-radius: 12px; background: #0c0e10; color: var(--grün); border: 1px solid #22272b; cursor: pointer; }
.taste.voll { background: var(--grün); color: #050607; border-color: var(--grün); }
.zurueck { display: inline-block; margin-bottom: 10px; font: 500 11px var(--mono); color: #6d757c; letter-spacing: .02em; }

.login input { width: 100%; margin: 6px 0 10px; padding: 11px 12px; border-radius: 10px; background: #050607; color: #f2f4f5; border: 1px solid #22272b; font: 400 16px system-ui, sans-serif; }
.login input:focus { outline: 1px solid var(--grün); border-color: var(--grün); }
.login-meldung { color: var(--rot); font: 500 12.5px/1.35 system-ui, sans-serif; margin-bottom: 10px; }

.pause-leiste { position: fixed; left: 0; right: 0; bottom: 0; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)); pointer-events: none; background: linear-gradient(to bottom, rgba(5, 6, 7, 0), #050607 22px); }
.pause-leiste > * { max-width: 528px; margin: 0 auto; pointer-events: auto; }
.pause-zeile { display: flex; gap: 8px; }
.knopf { flex: 1; height: 46px; border-radius: 14px; background: #0c0e10; border: 1px solid #22272b; color: var(--grün); font: 600 13.5px system-ui, sans-serif; cursor: pointer; }
.knopf.klein { flex: none; width: 52px; }
.pause-menue { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 8px; border-radius: 14px; background: #0c0e10; border: 1px solid #22272b; }
.pause-menue .knopf { flex: none; height: 42px; }
.knopf:focus-visible, .taste:focus-visible, .chip:focus-visible, .erledigt-knopf:focus-visible, .karte:focus-visible { outline: 2px solid var(--grün); outline-offset: 2px; }

.ttl-rechts { display: flex; align-items: center; gap: 10px; }
.alle-erledigt { font: 600 11px system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; background: transparent; color: var(--grün); border: 1px solid #22272b; cursor: pointer; }
.app { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

.prio-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--hell); vertical-align: 1px; }
.wartet .prio-punkt { background: var(--grün); } .fehler .prio-punkt { background: var(--rot); } .kontingent .prio-punkt { background: var(--gelb); }
.karte.gelesen { opacity: .62; }
.karte.leise { opacity: .72; } .karte.leise.gelesen { opacity: .5; }
.karte.leise .z2 { color: #8a9299; }
.huelle { overflow: hidden; border-radius: 14px; touch-action: pan-y; }
.huelle::before { content: "✓ Erledigt"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 12px var(--mono); color: var(--grün); opacity: var(--wisch, 0); background: #0d2a20; }
.karte.wischt { transition: none; user-select: none; }
.huelle .karte { transition: transform .18s ease; }

.toast { position: fixed; left: 0; right: 0; bottom: calc(150px + env(safe-area-inset-bottom)); max-width: 528px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #13261f; border: 1px solid #1f4a38; color: var(--hell); font: 600 13px system-ui, sans-serif; z-index: 5; }
.toast-knopf { background: transparent; color: var(--grün); border: 1px solid #1f4a38; border-radius: 999px; padding: 5px 12px; font: 600 12px system-ui, sans-serif; cursor: pointer; }

.feld { width: 100%; padding: 11px 12px; border-radius: 12px; background: #050607; color: #f2f4f5; border: 1px solid #22272b; font: 400 16px system-ui, sans-serif; }
.feld:focus { outline: 1px solid var(--grün); border-color: var(--grün); }
textarea.feld { resize: vertical; margin-bottom: 8px; }
.aktion { margin-bottom: 4px; width: 100%; }
.aktion-eingabe { display: flex; flex-direction: column; gap: 8px; }
.aktion-eingabe .taste { align-self: flex-start; }
.taste:disabled { opacity: .45; cursor: default; }
.aktion-fehler { color: var(--rot); font: 500 12.5px/1.35 system-ui, sans-serif; margin: 6px 0; }

.formular-kopf { margin-bottom: 10px; }
.formular-zustand { margin-bottom: 9px; }
.karte.frage { margin-bottom: 12px; min-width: 0; }
.karte.frage legend { padding: 0; }
fieldset.karte.frage { margin-inline: 0; }
.tippflaechen { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.tipp { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; min-height: 54px; padding: 12px 14px; border-radius: 14px; background: #050607; border: 1px solid #22272b; color: var(--hell); font: 500 14.5px/1.3 system-ui, sans-serif; cursor: pointer; }
.tipp.an { border-color: var(--grün); background: #0d2a20; color: var(--grün); }
.tipp-text { overflow-wrap: anywhere; }
.marke { flex: none; font: 700 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #13261f; color: var(--grün); }
.taste.senden { width: 100%; text-align: center; padding: 14px 16px; font-size: 15px; }

.pause-leiste > * { margin-bottom: 8px; }
.pause-leiste .pause-zeile { margin-bottom: 0; }
.knopf:disabled { opacity: .4; cursor: default; }
.leiste-status { padding: 6px 12px; border-radius: 12px; background: #0c0e10; border: 1px solid #22272b; color: var(--grün); font: 500 12px var(--mono); }
.leiste-status.fehler-text { color: var(--rot); }
.menue-text { color: #8a9299; font: 400 12.5px/1.35 system-ui, sans-serif; padding: 2px 4px; }
.pause-menue .feld { height: 42px; }
.pause-menue .knopf:disabled { opacity: .4; }
.karte { -webkit-user-drag: none; }

/* ---------- v3: Verbindung, Kontaktliste, Raum, Profil, Login ---------- */
.verbindung { position: sticky; top: 0; z-index: 8; text-align: center; padding: 6px 12px; background: #1a1708; color: var(--gelb); font: 600 11.5px var(--mono); letter-spacing: .02em; border-bottom: 1px solid #3a3216; }
.verbindung.rot { background: #2a0d12; color: var(--rot); border-color: #4a1a22; }

.kontakte { display: flex; flex-direction: column; }
.kontakt { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid #12161a; }
.kontakt:focus-visible { outline: 2px solid var(--grün); outline-offset: 2px; border-radius: 10px; }
.avatar { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 17px system-ui, sans-serif; }
.avatar.gross { width: 88px; height: 88px; font-size: 34px; }
.avatar-bild { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar .online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--grün); border: 2px solid #050607; }
.kontakt-mitte { flex: 1; min-width: 0; }
.kontakt-name { display: flex; align-items: center; gap: 7px; }
.kontakt .name { font: 700 15.5px system-ui, sans-serif; }
.tag { font: 500 9.5px var(--mono); letter-spacing: .03em; color: #6d757c; border: 1px solid #22272b; border-radius: 999px; padding: 1px 7px; }
.kontakt-vorschau { font: 400 13px/1.3 system-ui, sans-serif; color: #8a9299; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.kontakt-status { font: 500 10.5px var(--mono); margin-top: 2px; color: #6d757c; }
.kontakt-status.gruen, .raum-status-zeile.gruen { color: var(--grün); }
.kontakt-status.rot, .raum-status-zeile.rot { color: var(--rot); }
.kontakt-status.gelb, .raum-status-zeile.gelb { color: var(--gelb); }
.kontakt-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kontakt-zeit { font: 500 11px var(--mono); color: #6d757c; }
.badge { min-width: 22px; text-align: center; font: 700 11px var(--mono); padding: 2px 7px; border-radius: 999px; background: #15181b; color: #6d757c; }
.badge.an { background: var(--grün); color: #050607; }
.alle-meldungen { display: inline-block; margin-top: 16px; font: 500 11px var(--mono); color: #6d757c; letter-spacing: .02em; }

.raum-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.raum-zurueck { font: 400 30px/1 system-ui, sans-serif; color: var(--grün); padding: 0 8px 4px 0; }
.raum-profil { display: flex; align-items: center; gap: 10px; min-width: 0; }
.raum-kopf-text { display: flex; flex-direction: column; min-width: 0; }
.raum-name { font: 700 16px system-ui, sans-serif; }
.raum-status-zeile { font: 500 11px var(--mono); color: #6d757c; }
.verlauf { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.tag-trenner { align-self: center; font: 500 10.5px var(--mono); letter-spacing: .06em; color: #6d757c; margin: 6px 0; }
.zeile { display: flex; flex-direction: column; max-width: 88%; gap: 3px; }
.zeile.aus { align-self: flex-end; align-items: flex-end; }
.zeile.ein { align-self: flex-start; align-items: flex-start; }
.zeile.karte-zeile { align-self: stretch; max-width: 100%; }
.zeile.system { align-self: center; font: 500 11px var(--mono); color: #6d757c; text-align: center; }
.blase { padding: 9px 13px; border-radius: 16px; font: 400 14.5px/1.4 system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.blase.aus { background: #0d2a20; border-bottom-right-radius: 5px; }
.blase.ein { background: #15181b; border-bottom-left-radius: 5px; }
.meta { font: 500 10.5px var(--mono); color: #6d757c; }
.meta-gruen { color: var(--grün); font-weight: 700; }
.klein { font: 500 10.5px var(--mono); letter-spacing: .04em; color: #6d757c; }
.blase.karte-blase { background: #0c0e10; border: 1px solid #22272b; border-radius: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 200px; }
.karte-titel { font: 700 15px system-ui, sans-serif; color: var(--grün); }
.pille-knopf { display: inline-block; font: 600 12px system-ui, sans-serif; padding: 6px 14px; border-radius: 999px; background: transparent; color: var(--grün); border: 1px solid #22272b; cursor: pointer; }
.pille-knopf.grau { color: var(--hell); }
.pille-knopf:disabled { opacity: .4; cursor: default; }
.pille-knopf:focus-visible, .sende-knopf:focus-visible, .befehl:focus-visible, .lauf-stopp:focus-visible, .aelter-knopf:focus-visible { outline: 2px solid var(--grün); outline-offset: 2px; }
.aelter-knopf { align-self: center; background: transparent; border: 1px solid #22272b; color: #8a9299; border-radius: 999px; padding: 6px 14px; font: 500 11px var(--mono); cursor: pointer; }

.lauf { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lauf-pille { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px dashed #1f6b4a; font: 700 12px var(--mono); color: var(--grün); }
.lauf-pille.rot { border-color: #6b1f2a; color: var(--rot); }
.lauf-punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: atmen 1.4s ease-in-out infinite; }
.lauf-trenner { width: 1px; height: 12px; background: #22272b; }
.lauf-stopp { background: transparent; border: 0; color: var(--rot); font: 700 12px var(--mono); cursor: pointer; padding: 0 2px; }
.lauf-schritte { display: flex; gap: 5px; font: 500 10px var(--mono); color: #4a5157; }
.lauf-schritt.fertig { color: #6d757c; } .lauf-schritt.an { color: var(--grün); }
.lauf-ende { font: 600 11px var(--mono); }
.lauf-ende.rot { color: var(--rot); }
@keyframes atmen { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lauf-punkt { animation: none; } }

.raum-leiste { position: fixed; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(5, 6, 7, 0), #050607 16px); }
.raum-leiste > * { max-width: 528px; margin: 0 auto 6px; }
.raum-form { display: flex; align-items: flex-end; gap: 8px; border-top: 1px solid #12161a; padding-top: 8px; }
.raum-text { flex: 1; resize: none; overflow-y: hidden; line-height: 22px; min-height: 46px; max-height: 164px; border-radius: 16px; padding: 11px 14px; }
.sende-knopf { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--grün); color: #050607; border: 0; font: 800 20px system-ui, sans-serif; cursor: pointer; }
.sende-knopf:disabled { opacity: .35; cursor: default; }
.hinweis-klein { font: 400 10.5px var(--mono); color: #4a5157; text-align: center; margin-top: 6px; }
.fenster-text { font: 500 11px var(--mono); color: var(--grün); text-align: center; }
.befehle { display: flex; flex-direction: column; border: 1px solid #22272b; border-radius: 14px; background: #0c0e10; overflow: hidden; }
.befehl { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 9px 13px; background: transparent; border: 0; border-bottom: 1px solid #12161a; color: var(--hell); cursor: pointer; }
.befehl:last-child { border-bottom: 0; }
.befehl-name { font: 700 13px var(--mono); color: var(--grün); }
.befehl-hilfe { font: 400 12px system-ui, sans-serif; color: #8a9299; }
.nur-lesen { text-align: center; font: 500 12px var(--mono); color: #6d757c; border: 1px solid #22272b; border-radius: 14px; padding: 12px 14px; }
body[data-ansicht="raum"] .app { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
body[data-ansicht="raum"] .ttl, body[data-ansicht="raum"] .puls-linie, body[data-ansicht="profil"] .ttl, body[data-ansicht="profil"] .puls-linie { display: none; }

.profil-mitte { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 14px 0; }
.profil-name { font: 800 22px system-ui, sans-serif; }
.profil-knoepfe { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.profil-werte { margin-bottom: 16px; }
.profil-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 12px 2px; border-bottom: 1px solid #12161a; font: 400 14px system-ui, sans-serif; }
.profil-wert { font: 500 12px var(--mono); color: #8a9299; }

.login-kopf { text-align: center; margin: 28px 0 22px; }
.login-logo { font: 800 44px system-ui, sans-serif; letter-spacing: -.03em; }
.login-zeile { font: 400 13px system-ui, sans-serif; color: #6d757c; margin-top: 6px; }
.login .taste.senden { margin-top: 2px; }

/* ---------- Verlauf-Anzeige (docs/vertrag-verlauf.md § 4) ---------- */
.vl-block { align-self: stretch; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; min-width: 0; max-width: 100%; }
.vl-liste { display: flex; flex-direction: column; gap: 4px; }
.vl-gedanken-kopf { align-self: flex-start; background: transparent; border: 0; padding: 2px 0; color: #8a9299; font: 500 11.5px var(--mono); cursor: pointer; }
.vl-gedanken-liste { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 4px 10px; border-left: 2px solid #22272b; }
.vl-gedanke { font: italic 400 12.5px/1.4 system-ui, sans-serif; color: #8a9299; white-space: pre-wrap; overflow-wrap: anywhere; }
.vl-werkzeug { border-radius: 10px; background: #0c0e10; border: 1px solid #1a1e21; border-left: 3px solid #22272b; overflow: hidden; }
.vl-werkzeug.vl-fehler { border-left-color: var(--rot); }
.vl-werkzeug.vl-laeuft { border-left-color: var(--grün); }
.vl-wz-kopf { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; background: transparent; border: 0; color: var(--hell); text-align: left; cursor: pointer; }
.vl-wz-kopf:disabled { cursor: default; }
.vl-sym { flex: none; font-size: 13px; }
.vl-wz-text { flex: 1; min-width: 0; display: flex; gap: 6px; font: 500 11.5px var(--mono); white-space: nowrap; overflow: hidden; }
.vl-name { flex: none; color: var(--grün); font-weight: 700; }
.vl-fehler .vl-name { color: var(--rot); }
.vl-vorschau { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #8a9299; }
.vl-dauer { flex: none; font: 500 10.5px var(--mono); color: #6d757c; }
.vl-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--grün); animation: atmen 1.4s ease-in-out infinite; }
.vl-ergebnis { margin: 0; padding: 8px 10px; border-top: 1px solid #1a1e21; background: #050607; color: #b6bcc1; font: 400 11.5px/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.vl-text { font: 400 12px/1.4 system-ui, sans-serif; color: #6d757c; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 2px; }
.vl-agent { font: 500 11.5px var(--mono); color: #8a9299; padding: 2px; overflow-wrap: anywhere; }
.vl-mehr { align-self: flex-start; background: transparent; border: 1px solid #22272b; color: var(--grün); border-radius: 999px; padding: 5px 12px; font: 600 11.5px var(--mono); cursor: pointer; }
.vl-wz-kopf:focus-visible, .vl-gedanken-kopf:focus-visible, .vl-mehr:focus-visible { outline: 2px solid var(--grün); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vl-punkt { animation: none; } }