/* HVI Eigentümerportal — eine Datei für alles Aussehen.
   Farben aus dem ERP (style.css) und dem Briefkopf, damit Portal, ERP und Briefe erkennbar
   zusammengehören. Keine eingebetteten style-Attribute: Die Sicherheitsrichtlinie verbietet sie,
   und das ist gewollt. */
:root{
  --grund:#f4f6f9; --panel:#fff; --ink:#1f2733; --muted:#6b7683; --line:#e4e8ee;
  --brand:#14547f; --brand-dunkel:#0f3f60; --hell:#9aafc0; --chip:#eef3f8;
  --ok:#2f7d4f; --ok-hell:#e6f2ea; --warn:#b06a00; --warn-hell:#fbf1dc; --rot:#b23b3b; --rot-hell:#f8e6e6;
  --blau-hell:#e3edf6; --grau-hell:#eef0f4; color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--grund);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid #8fb3d6;outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3,h4{text-wrap:balance}
.nur-mobil{display:none}

/* ---------- Rahmen ---------- */
.rahmen{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.seitenleiste{background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;overflow:auto}
.marke{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;text-decoration:none;color:inherit}
.marke-zeichen{width:36px;height:36px;flex:none}
.marke-zeichen img{width:36px;height:36px;display:block}
.marke-text{line-height:1.15}
.marke-text b{display:block;font-size:14px;color:var(--brand)}
.marke-text span{font-size:12px;color:var(--muted)}
.nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:14.5px;color:var(--ink);text-decoration:none}
.nav svg{width:19px;height:19px;flex:none;stroke:currentColor}
.nav:hover{background:var(--chip)}
.nav.aktiv{background:var(--brand);color:#fff}
.nav .zahl{margin-left:auto;font-size:11.5px;font-weight:700;background:var(--warn);color:#fff;border-radius:20px;padding:0 7px}
.nav-trenn{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:14px 11px 4px}
.nav.klein{font-size:13.5px;padding:6px 11px}
.ich{margin-top:auto;border-top:1px solid var(--line);padding:12px 8px 0;font-size:13px;display:grid;gap:6px}
.ich b{display:block}
.ich span{color:var(--muted);font-size:12px}
.ich form{margin:0}
.inhalt{padding:24px 32px 48px;min-width:0;max-width:1180px}
.kopfleiste{display:none}
.unterleiste{display:none}

@media (max-width:820px){
  .rahmen{grid-template-columns:1fr}
  .seitenleiste{display:none}
  .nur-mobil{display:initial}
  .kopfleiste{display:flex;align-items:center;gap:10px;background:var(--panel);border-bottom:1px solid var(--line);padding:10px 16px;position:sticky;top:0;z-index:20}
  .kopfleiste .marke{padding:0}
  .kopfleiste .ich-kreis{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--chip);color:var(--brand);display:grid;place-items:center;font-size:13px;font-weight:700;text-decoration:none}
  .inhalt{padding:16px 16px 96px}
  .unterleiste{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:6px 4px calc(8px + env(safe-area-inset-bottom));z-index:20}
  .unterleiste a{display:grid;justify-items:center;gap:2px;font-size:10.5px;color:var(--muted);text-decoration:none;padding:4px 0;position:relative}
  .unterleiste svg{width:23px;height:23px;stroke:currentColor}
  .unterleiste a.aktiv{color:var(--brand);font-weight:600}
  .unterleiste .punkt{position:absolute;top:0;left:calc(50% + 7px);min-width:16px;height:16px;border-radius:9px;background:var(--warn);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--panel);padding:0 3px}
}

/* ---------- Grundbausteine ---------- */
.titel h1{font-size:25px;margin:0;letter-spacing:-.01em}
.titel p{margin:3px 0 0;color:var(--muted);font-size:14px}
.block{display:grid;gap:10px;margin-top:24px}
.block-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.block-kopf h2{margin:0;font-size:16px}
.block-kopf > span{color:var(--muted);font-size:13px}
.rechts{margin-left:auto}
.karte{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.liste{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.zeile:first-child{border-top:0}
a.zeile:hover{background:#fafbfd}
.zeile b{display:block;font-size:14.5px;font-weight:600}
.zeile small{display:block;color:var(--muted);font-size:13px}
.leer{padding:14px 16px;color:var(--muted);font-size:14px}
.hinweis{font-size:13px;color:var(--muted);margin:0}
.pille{font-size:11.5px;font-weight:700;border-radius:20px;padding:2px 9px;white-space:nowrap;background:var(--chip);color:var(--brand);display:inline-block}
.pille.ok{background:var(--ok-hell);color:var(--ok)}
.pille.warn{background:var(--warn-hell);color:var(--warn)}
.pille.rot{background:var(--rot-hell);color:var(--rot)}
.pille.grau{background:var(--grau-hell);color:#5b6675}
.geprueft{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ok)}
.geprueft svg{width:14px;height:14px;flex:none}
.nicht-geprueft{color:var(--warn)}
.knopf{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:9px;padding:8px 14px;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.knopf:hover{background:var(--brand-dunkel)}
.knopf.leise{background:var(--panel);color:var(--brand)}
.knopf.leise:hover{background:var(--chip)}
.knopf.gruen{background:var(--ok);border-color:var(--ok)}
.knopf.weg{background:var(--panel);color:var(--rot);border-color:#e9c4c4}
.knopf.klein{padding:4px 10px;font-size:13px}
.reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.meldung{background:var(--ok-hell);color:var(--ok);border-radius:10px;padding:10px 14px;font-weight:600;font-size:14px;margin-bottom:14px}
.meldung.fehler{background:var(--rot-hell);color:var(--rot)}
form.inline{display:inline;margin:0}

.filter{display:flex;gap:6px;flex-wrap:wrap}
.filter a,.filter button{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:4px 12px;font-size:13px;color:var(--ink);text-decoration:none;cursor:pointer}
.filter a.an,.filter button.an{background:var(--ink);border-color:var(--ink);color:#fff}
.filter small{opacity:.65;margin-left:3px}

.zurueck-leiste{position:sticky;top:0;z-index:10;background:var(--grund);display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:8px;margin:-8px 0 6px}
@media (max-width:820px){.zurueck-leiste{top:57px}}
.zurueck{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px 0 10px;border:1px solid #bccbda;background:var(--panel);border-radius:10px;color:var(--brand);font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 1px 2px rgba(20,30,50,.08)}
.zurueck:hover{background:var(--chip);border-color:var(--brand)}
.zurueck svg{width:20px;height:20px;stroke:currentColor}
.pfad{font-size:13.5px;color:var(--muted)}
.pfad b{color:var(--ink);font-weight:600}

/* ---------- Anmeldung ---------- */
.anmelden-seite{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.anmelden{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:grid;gap:14px}
.anmelden h1{font-size:21px;margin:0}
.anmelden p{margin:0;color:var(--muted);font-size:14px}
.feld{display:grid;gap:5px}
.feld label{font-size:12.5px;font-weight:600;color:var(--muted)}
.feld input,.feld select,.feld textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:15px;background:var(--panel)}
.feld textarea{min-height:110px;resize:vertical}
.code-eingabe{font-size:26px!important;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.anmelden .knopf{justify-content:center}

/* ---------- Start ---------- */
.warten{background:var(--panel);border:1px solid #ecd7ad;border-radius:12px;padding:13px 16px 14px 20px;display:grid;gap:8px;position:relative;overflow:hidden;color:inherit;text-decoration:none}
.warten::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--warn)}
.warten b{font-size:15px}
.warten p{margin:0;font-size:13.5px;color:var(--muted)}
.warten.ruhig{border-color:#bfdcc8}
.warten.ruhig::before{background:var(--ok)}
.konto-gesamt{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;background:var(--brand);color:#fff;border-radius:12px;padding:14px 16px}
.konto-gesamt span{color:#cfe0ee;font-size:13px}
.konto-gesamt b{font-size:26px;letter-spacing:-.01em}
.konto-gesamt .geprueft{color:#bfe6cc;margin-left:auto}
.konto-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.konto-zeile:first-child{border-top:0}
.konto-zeile:hover{background:#fafbfd}
.konto-zeile b{display:block;font-size:15px}
.konto-zeile small{display:block;color:var(--muted);font-size:12.5px}
.konto-zeile .wert{text-align:right}
.konto-zeile .wert b{font-size:17px}
.konto-zeile svg{width:18px;height:18px;stroke:var(--hell)}
.neu-zeile{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 16px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.neu-zeile:first-child{border-top:0}
a.neu-zeile:hover{background:#fafbfd}
.neu-zeile .tag{font-size:12.5px;color:var(--muted);padding-top:2px}
.neu-zeile b{display:block;font-size:14.5px;font-weight:600}
.neu-zeile small{display:block;color:var(--muted);font-size:13px}
@media (max-width:820px){
  .konto-gesamt b{font-size:22px}
  .konto-gesamt .geprueft{margin-left:0}
  .neu-zeile{grid-template-columns:52px minmax(0,1fr)}
  .neu-zeile .pille{grid-column:2;justify-self:start}
}

/* ---------- Objekte ---------- */
.objekte{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.obj{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:8px;color:inherit;text-decoration:none}
.obj:hover{border-color:#b9c9d8}
.obj b{font-size:15.5px}
.obj small{color:var(--muted);font-size:12.5px}
.obj-zahlen{display:grid;grid-template-columns:1fr auto;gap:3px 12px;font-size:13.5px}
.obj-zahlen span{color:var(--muted)}
.obj-zahlen strong{font-weight:600;text-align:right}
.obj-fuss{display:flex;gap:6px;flex-wrap:wrap}

.reiter{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-top:14px;scrollbar-width:none}
.reiter a{padding:9px 12px;font-size:14.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.reiter a.an{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.zeitraum{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-top:14px}
.zeitraum form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.zr-label{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.zeitraum input[type=date]{border:1px solid var(--line);border-radius:8px;padding:3px 6px;font-size:13px}
.zr-text{margin-left:auto;font-size:13px;font-weight:600}

.kette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.summen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.summe{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 15px;display:grid;gap:2px;align-content:start}
.summe span{font-size:12.5px;color:var(--muted)}
.summe b{font-size:20px;letter-spacing:-.01em}
.summe small{font-size:12.5px;color:var(--muted)}
.summe.haupt{background:var(--brand);border-color:var(--brand);color:#fff}
.summe.haupt span,.summe.haupt small{color:#cfe0ee}
.summe.haupt .geprueft{color:#bfe6cc}
@media (max-width:820px){.kette,.summen{grid-template-columns:1fr 1fr}.summe b{font-size:17px}}

.tab-rahmen{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;white-space:nowrap}
td small{display:block;color:var(--muted);font-size:12.5px}
tr.summe-zeile td{font-weight:700;background:#fafbfd}
tr.achtung td{background:#fffaf0}
@media (max-width:820px){table{font-size:13px}th,td{padding:7px 8px}.breit-nur{display:none}}

.konto-kopf{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13.5px}
.konto-kopf span{color:var(--muted)}
.konto-kopf b{color:var(--ink);font-weight:600}
.suche{display:flex;gap:8px}
.suche input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:var(--panel)}
.ums{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:9px 16px;border-top:1px solid var(--line)}
.ums:first-child{border-top:0}
.ums .tag{font-size:12.5px;color:var(--muted);padding-top:2px}
.ums b{font-size:14px;font-weight:600;display:block;overflow-wrap:anywhere}
.ums small{display:block;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.ums .kat{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.ums .betrag{text-align:right;white-space:nowrap;font-weight:600}
.ums .betrag small{font-weight:400}
.ums .plus{color:var(--ok)}
.ums.ohne{background:#fffaf0}
@media (max-width:820px){.ums{grid-template-columns:48px minmax(0,1fr)}.ums .betrag{grid-column:2;text-align:left}}

.fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fakten div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.fakten span{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:820px){.fakten{grid-template-columns:1fr 1fr}}

.dok{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.dok:first-child{border-top:0}
a.dok:hover{background:#fafbfd}
.dok b{font-size:14px;font-weight:600;display:block;overflow-wrap:anywhere}
.dok small{color:var(--muted);font-size:12.5px}
.pdf{width:30px;height:36px;border-radius:5px;background:var(--rot-hell);color:var(--rot);font-size:9px;font-weight:800;display:grid;place-items:end center;padding-bottom:5px}
.gruppe-titel{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
.hochladen{display:grid;gap:8px;border:1.5px dashed #b8c3cf;border-radius:10px;padding:12px 14px;background:var(--panel)}
.hochladen input[type=file]{font-size:13px;max-width:100%}

/* ---------- Vorgänge ---------- */
.vg-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vg-kachel{display:grid;gap:1px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px 11px 18px;position:relative;overflow:hidden;color:inherit;text-decoration:none}
.vg-kachel::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--hell)}
.vg-kachel b{font-size:24px;line-height:1.1}
.vg-kachel span{font-size:14px;font-weight:600}
.vg-kachel small{font-size:12px;color:var(--muted)}
.vg-kachel.an{border-color:var(--brand);box-shadow:0 0 0 2px #cfe0ee}
.k-sie::before{background:var(--warn)} .k-hvi::before{background:var(--brand)} .k-dritte::before{background:#8b97ab} .k-fertig::before{background:var(--ok)}
@media (max-width:820px){.vg-kacheln{grid-template-columns:1fr 1fr}.vg-kachel b{font-size:20px}}
.werkzeug{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.werkzeug form{display:flex;gap:6px;align-items:center;margin:0}
.werkzeug select{border:1px solid var(--line);border-radius:9px;padding:5px 8px;background:var(--panel);font-size:13.5px;max-width:100%}
.gruppe-kopf{margin:10px 0 0;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;gap:6px;align-items:center}
.gruppe-kopf small{background:var(--chip);color:var(--brand);border-radius:20px;padding:0 7px;font-size:11.5px;letter-spacing:0}
.gruppe-kopf.g-sie{color:var(--warn)}
.vg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 16px 13px 20px;display:grid;gap:7px;position:relative;overflow:hidden;color:inherit;text-decoration:none}
.vg:hover{border-color:#b9c9d8}
.vg::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--line)}
.vg.b-sie{border-color:#ecd7ad} .vg.b-sie::before{background:var(--warn)}
.vg.b-hvi::before{background:var(--brand)} .vg.b-dritte::before{background:#8b97ab} .vg.b-fertig::before{background:var(--ok)}
.vg-kopf{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.vg-nr{font-size:12.5px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.vg-kopf b{font-size:15px}
.vg-meta{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.vg-meta b{color:var(--ink);font-weight:600}
.vg-unten{display:flex;gap:6px;flex-wrap:wrap}
.vg-letzt{font-size:13.5px}
.bei{font-size:12px;font-weight:700;border-radius:20px;padding:2px 9px}
.bei.b-sie{background:var(--warn-hell);color:var(--warn)} .bei.b-hvi{background:var(--blau-hell);color:var(--brand)} .bei.b-dritte{background:var(--grau-hell);color:#4f5a68}
.neu-marke{font-size:10.5px;font-weight:700;color:#fff;background:var(--brand);border-radius:20px;padding:0 7px;text-transform:uppercase;letter-spacing:.04em}

.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vier div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.vier span{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:820px){.vier{grid-template-columns:1fr 1fr}}
.strahl{list-style:none;margin:0;padding:0}
.strahl li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px}
.strahl li::before{content:"";position:absolute;left:8px;top:18px;bottom:0;width:2px;background:var(--line)}
.strahl li:last-child::before{display:none}
.strahl .pkt{width:18px;height:18px;border-radius:50%;background:var(--panel);border:3px solid var(--hell);margin-top:2px}
.strahl li.sie .pkt{border-color:var(--brand)}
.strahl-kopf{font-size:12.5px;color:var(--muted)}
.strahl-kopf b{color:var(--ink)}
.strahl-text{font-size:14px;margin-top:2px;white-space:pre-line;overflow-wrap:anywhere}
.anhaenge{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.anhang{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:12.5px;background:var(--panel);color:inherit;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.anhang:hover{border-color:var(--brand)}
.freigabe{background:var(--panel);border:1px solid #ecd7ad;border-radius:12px;padding:16px;display:grid;gap:12px}
.freigabe.entschieden{border-color:#bfdcc8}
.freigabe-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.freigabe-zahlen div{background:var(--grund);border-radius:9px;padding:8px 12px}
.freigabe-zahlen span{display:block;font-size:11.5px;color:var(--muted)}
.freigabe-zahlen b{font-size:17px}
@media (max-width:820px){.freigabe-zahlen{grid-template-columns:1fr}}
.rechtlich{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin:0}
details.aufklapp summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:14px}

.arten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.arten label{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:18px 1fr;gap:2px 8px;cursor:pointer}
.arten input{margin:3px 0 0}
.arten b{font-size:14px}
.arten small{grid-column:2;font-size:12px;color:var(--muted)}
.arten label:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px #cfe0ee}
@media (max-width:820px){.arten{grid-template-columns:1fr}}

.einst{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 16px;border-top:1px solid var(--line)}
.einst:first-child{border-top:0}
.einst b{font-size:14px;font-weight:600;display:block}
.einst small{font-size:12.5px;color:var(--muted)}
.schalter{position:relative;width:46px;height:28px;border-radius:28px;border:0;background:#cfd6df;padding:0;cursor:pointer}
.schalter::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.schalter.an{background:var(--ok)}
.schalter.an::after{left:22px}
@media (prefers-reduced-motion:reduce){.schalter::after{transition:none}}
.fehlerseite{max-width:520px;margin:12vh auto;padding:0 16px;display:grid;gap:12px}

.formular{display:grid;gap:12px;margin:0}

/* Das Rasterkind darf schmaler werden als sein Inhalt — sonst schiebt eine lange Zeile
   die ganze Seite auf dem Handy seitlich aus dem Bild. */
.rahmen > div{min-width:0}
.konto-kopf b,.titel p{overflow-wrap:anywhere}


/* Gespräch als Chat, gespiegelt aus Sicht des Eigentümers (17.09.2026). Seine Beiträge rechts in
   Petrol — dieselbe Farbe, die das ERP für das Portal benutzt —, unsere links neutral. */
.chat{display:flex;flex-direction:column;gap:10px}
.chat-reihe{display:flex}
.chat-reihe.sie{justify-content:flex-end}
.chat-blase{max-width:82%;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:9px 12px;
  box-shadow:inset 3px 0 0 #8b97ab}
.chat-reihe.sie .chat-blase{background:#e5f2f2;border-color:#9ccaca;box-shadow:inset -3px 0 0 #2f6f73}
.chat-blase.leise{box-shadow:none;color:var(--muted)}
.chat-kopf{display:flex;gap:10px;align-items:baseline;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.chat-kopf b{color:var(--ink);font-weight:600}
.chat-kopf span{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.chat-betreff{font-weight:650;margin-top:3px}
.chat-text{font-size:14.5px;margin-top:2px;white-space:pre-line;overflow-wrap:anywhere}
@media (max-width:560px){.chat-blase{max-width:94%}}