/* K5 OPS / VEASY – Gestaltung (K5-Hausfarben Marine, Messing, Papier; Muster: Policenfuchs pf.css und assets_portal.css) */
@font-face{font-family:"Unbounded";src:url(/assets/fonts/Unbounded_wght_700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/Source_Sans_3_wght_400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/Source_Sans_3_wght_600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--marine:#0F2A44;--messing:#B95A1C;--messing-dunkel:#9C4A15;--papier:#FBF6F0;--schiefer:#4A5A6A;--linie:#E2DDD3;--feld:#D5CFC4}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--marine);font:400 17px/1.55 "Source Sans 3",system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration-color:var(--messing);text-underline-offset:3px}
a:hover{color:var(--messing)}
img{max-width:100%}
code{font-size:.92em;background:#fff;border:1px solid var(--linie);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.innen{max-width:1240px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Unbounded",system-ui,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .6em;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(22px,3.2vw,34px)}
h2{font-size:clamp(18px,2vw,22px)}
h3{font-size:15px;letter-spacing:.02em}
p{margin:0 0 1em}
.klein{font-size:14.5px;color:var(--schiefer)}
.inline{display:inline}
.rechts{text-align:right}
main{overflow-wrap:break-word}

/* Kopf mit Schriftzug VEASY */
.kopf{background:#fff;border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.marke{display:flex;flex-direction:column;text-decoration:none;min-width:0}
.marke:hover{color:var(--marine)}
.marke-zeile{display:flex;align-items:flex-start;gap:2px;padding-top:6px}
.marke-wort{font-family:"Unbounded",system-ui,sans-serif;font-weight:700;font-size:28px;letter-spacing:.06em;line-height:1;color:var(--marine)}
.marke-haken{margin-top:-6px;flex-shrink:0}
.marke-unter{font-size:12px;letter-spacing:.04em;color:var(--schiefer);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testbaum{flex-shrink:0;background:#FFE58A;color:#5a4300;border-radius:999px;padding:4px 14px;font-weight:600;font-size:14px;letter-spacing:.04em}

/* Navigation */
.omain{padding-top:24px;padding-bottom:56px;min-height:60vh}
.onav{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--linie)}
.onav a{font-weight:600;text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.onav a[aria-current]{border-bottom-color:var(--messing)}
.ower{margin-left:auto;color:var(--schiefer);font-size:15px}

/* Knöpfe */
.knopf{display:inline-block;background:var(--marine);color:#fff;text-decoration:none;padding:11px 20px;border-radius:8px;border:2px solid var(--marine);font:inherit;font-weight:600;cursor:pointer;line-height:1.2}
.knopf:hover{background:#163a5c;color:#fff}
.knopf-hell{background:transparent;color:var(--marine)}
.knopf-hell:hover{background:#fff;color:var(--marine)}
.knopf-messing{background:var(--messing);border-color:var(--messing);color:#fff}
.knopf-messing:hover{background:var(--messing-dunkel);border-color:var(--messing-dunkel)}
.klein-knopf{padding:6px 12px;font-size:14.5px}
.knopf:focus-visible,a:focus-visible{outline:3px solid rgba(185,90,28,.45);outline-offset:2px}

/* Meldungen */
.omeldung{background:#E8F4EA;border-left:4px solid #2E7D32;padding:10px 14px;border-radius:6px}
.ofehler{background:#FDECEA;border-left:4px solid #C62828;padding:10px 14px;border-radius:6px}

/* Karten und Raster */
.okarte{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:20px 22px;margin:0 0 18px;min-width:0}
.okarte h3{margin-top:0}
.oraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.oraster .okarte{margin:0}
.kartenkopf{color:var(--messing);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3em}
.okarte-unter{margin:12px 0 6px}
.odaten{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 14px;margin:12px 0}
.odaten dt{color:var(--schiefer)}
.odaten dd{margin:0;min-width:0}
.oabschnitt{margin-top:30px}
.omv{border-top:1px solid var(--linie);padding-top:12px;margin-top:12px}
.punkte{padding-left:1.1em;margin:0}
.oknoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.ochips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ochip{display:inline-block;padding:4px 12px;border:1px solid var(--linie);border-radius:20px;text-decoration:none;font-size:15px;background:#fff}
.ochip.aktiv{background:var(--marine);color:#fff;border-color:var(--marine)}
.ohinweis{border-left:4px solid var(--messing)}
.overweis{display:block;padding:8px 10px;word-break:break-all}

/* Status-Etiketten */
.ostatus{display:inline-block;padding:1px 10px;border-radius:20px;font-size:13.5px;font-weight:600;background:#EEF1F4;color:var(--marine);white-space:nowrap;font-family:"Source Sans 3",system-ui,sans-serif;letter-spacing:0;vertical-align:middle}
.st-neu{background:#FFE8D6;color:#8A3E0A}
.st-vorschlag{background:#FFF4C2;color:#6B5200}
.st-bestaetigt{background:#E8F4EA;color:#1B5E20}
.st-fehler{background:#FDECEA;color:#8E1C1C}
.st-aus{background:#EEF1F4;color:var(--schiefer)}

/* Tabellen – unter 760 px als Karten je Zeile, damit nichts seitlich überläuft */
.otabelle{width:100%;border-collapse:collapse;background:#fff;font-size:15.5px;border:1px solid var(--linie);border-radius:12px;overflow:hidden;margin:0 0 20px}
.otabelle th,.otabelle td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
.otabelle th{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--schiefer);background:#FDFBF8}
.otabelle th.rechts,.otabelle td.rechts{text-align:right;white-space:nowrap}
.otabelle tfoot td{font-weight:600;border-bottom:0}
.oaktionen form{display:flex;gap:6px;flex-wrap:wrap}

/* Formulare – einheitliche Felder wie in der überarbeiteten Policenfuchs-assets_portal.css */
.formular label{display:block;margin:0 0 14px;font-size:15px;font-weight:600;color:var(--marine)}
.formular label.wahl{font-weight:400;display:flex;gap:10px;align-items:flex-start}
.formular label.wahl input{margin-top:5px}
.formular input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.formular select,.formular textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--feld);border-radius:10px;font:inherit;font-size:16.5px;font-weight:400;background:#fff;color:var(--marine);transition:border-color .15s,box-shadow .15s;min-width:0}
.formular input[type=file]{padding:9px 12px;background:var(--papier)}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--messing);box-shadow:0 0 0 3px rgba(185,90,28,.18)}
.formular input[autocomplete=one-time-code]{font-size:26px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.ozeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.oupload .ozeile{grid-template-columns:200px minmax(0,1fr)}
.ovorschlag{display:block;font-weight:400;font-size:13px;color:var(--messing-dunkel);margin-top:1px}

/* Beleg: links Datei, rechts Formular */
.obeleg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.obeleg-links{position:sticky;top:12px}
.obeleg-datei{display:block;width:100%;height:82vh;border:1px solid var(--linie);border-radius:12px;background:#fff}
.obeleg-bild{display:block;width:100%;height:auto;border:1px solid var(--linie);border-radius:12px;background:#fff}
.oparser{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.oparser p{margin:0}
details summary{cursor:pointer;font-weight:600}
.orohtext{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.45;max-height:420px;overflow:auto;background:var(--papier);padding:10px;border-radius:8px;margin:10px 0 0}

/* Anmeldung, Einladung, zweiter Faktor: zentrierte Karte (.pauth wie Policenfuchs) */
.pauth-seite{display:flex;flex-direction:column;align-items:center;padding-top:52px;padding-bottom:72px}
.pauth{width:100%;max-width:460px;background:#fff;border:1px solid var(--linie);border-radius:18px;padding:34px 34px 28px;box-shadow:0 18px 44px rgba(15,42,68,.08)}
.pauth.breit{max-width:860px}
.pauth h1{font-size:28px;margin:0 0 8px}
.pauth-unter{color:var(--schiefer);font-size:16px;margin:0 0 22px}
.pauth .formular .knopf{display:block;width:100%;margin-top:20px;padding:14px 22px;border-radius:10px;font-size:17px}
.pauth .klein{margin:18px 0 0;line-height:1.5}
.pauth .ofehler,.pauth .omeldung{margin:0 0 18px;font-size:15px}
.praster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;align-items:center}
.pqr svg{display:block;width:220px;height:220px;max-width:100%;background:#fff;padding:8px;border:1px solid var(--linie);border-radius:10px}
.schritte{padding-left:1.2em;margin:0 0 16px}
.ofuss{padding:22px 24px;color:var(--schiefer);font-size:14px}
.ofuss-mitte{text-align:center}

@media (max-width:980px){
  .obeleg{grid-template-columns:1fr}
  .obeleg-links{position:static}
  .obeleg-datei{height:70vh}
}
@media (max-width:860px){
  .oraster,.praster{grid-template-columns:1fr}
  .ower{margin-left:0;width:100%}
}
@media (max-width:760px){
  .otabelle,.otabelle tbody,.otabelle tfoot,.otabelle tr,.otabelle td{display:block;width:100%}
  .otabelle thead{display:none}
  .otabelle{border:0;background:transparent}
  .otabelle tr{background:#fff;border:1px solid var(--linie);border-radius:12px;margin:0 0 10px;padding:6px 0}
  .otabelle td{border:0;padding:4px 14px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;text-align:left}
  .otabelle td.rechts{text-align:left;white-space:normal}
  .otabelle td[data-label]::before{content:attr(data-label);color:var(--schiefer);font-size:13px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
  .otabelle td:not([data-label]):empty{display:none}
  .otabelle tfoot td{display:block}
  .odaten{grid-template-columns:1fr;gap:0 0}
  .odaten dt{margin-top:8px}
  .ozeile,.oupload .ozeile{grid-template-columns:1fr}
}
@media (max-width:520px){
  .innen{padding:0 16px}
  .marke-wort{font-size:24px}
  .marke-unter{font-size:10.5px;white-space:normal}
  .pauth-seite{padding-top:26px}
  .pauth{padding:24px 18px 20px;border-radius:14px}
  .pauth h1{font-size:24px}
  .okarte{padding:16px}
  .pqr svg{width:200px;height:200px}
}

/* Phase 2: Abrechnungen, Zustellprotokoll, Mieterbereich */
.oguthaben{color:#1B5E20;font-weight:600;white-space:nowrap}
.onachzahlung{color:#B3261E;font-weight:600;white-space:nowrap}
.oergebnis{font-size:20px;margin:6px 0 4px}
.okontakt,.ozuordnung{margin:6px 0 10px}
.okontakt summary,.ozuordnung summary{font-size:14.5px;color:var(--messing-dunkel)}
.okontakt .formular,.ozuordnung .formular{margin-top:10px;padding:12px;border:1px solid var(--linie);border-radius:10px;background:var(--papier)}
.ozuordnung .formular label.wahl{font-size:14px;margin-bottom:6px}
.oposition h2{font-size:clamp(16px,1.8vw,19px);margin-bottom:.3em}
.obelegliste{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.obelegeintrag{border:1px solid var(--linie);border-radius:10px;padding:12px 14px;background:var(--papier);min-width:0}
.obelegeintrag .odaten{grid-template-columns:110px minmax(0,1fr);margin:0 0 10px;font-size:15px}
.okarte code,.odaten code{overflow-wrap:anywhere;word-break:break-all}
@media (max-width:760px){
  .obelegeintrag .odaten{grid-template-columns:92px minmax(0,1fr);gap:2px 10px}
  .obelegeintrag .odaten dt{margin-top:0}
}

/* Phase 3: Zählerstände, Wächter (Abrechnungsstand) */
.owkopf{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-bottom:4px}
.owkopf h2{margin:0}
.owaechter h3{margin:16px 0 6px}
.owaechter .punkte li{margin:0 0 6px}
.oampel{font-size:14px}
.oampelliste{list-style:none;padding:0;margin:10px 0 0}
.oampelliste li{padding:8px 0;border-bottom:1px solid var(--linie)}
.ohinweis-text{border-left:3px solid var(--messing);padding-left:10px}
.onav .ower a{font-weight:400;border-bottom:0}

/* Phase 4: Kundenbereich */
.kb-marke{gap:4px}
.kb-logo{display:block;height:42px;width:auto;max-width:min(260px,55vw)}
.kb-wort{font-size:24px}
.kb-kartenlogo{display:block;height:34px;width:auto;max-width:100%;margin:0 0 12px}
.kb-aktenkarte,.kb-ordnerkarte{display:block;text-decoration:none;color:inherit}
.kb-aktenkarte:hover,.kb-ordnerkarte:hover{border-color:var(--messing);color:inherit}
.kb-ablage{display:block;border:2px dashed var(--feld);border-radius:12px;padding:16px;background:var(--papier);font-weight:600}
.kb-ablage.kb-ueber{border-color:var(--messing);background:#fff}
.kb-auswahl{display:block;margin-top:6px;font-weight:400;overflow-wrap:anywhere}
.kb-dokliste{list-style:none;padding:0;margin:0}
.kb-dok{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--linie);border-radius:12px;padding:12px 16px;margin:0 0 10px}
.kb-dok>div:first-child{min-width:0;overflow-wrap:anywhere;flex:1 1 220px}
.kb-dok-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.kb-seiten{display:flex;flex-direction:column;gap:14px;align-items:center}
.kb-seitenbild{display:block;width:100%;max-width:900px;height:auto;border:1px solid var(--linie);border-radius:6px;background:#fff}
.kb-codeliste{columns:2;column-gap:28px;font-size:18px;margin:12px 0}
.kb-codeliste code{font-size:18px;letter-spacing:.08em}
.formular input.kb-code{font-size:22px;letter-spacing:.15em;text-align:center}
.kb-matrix td{min-width:0}
.kb-recht{font-size:14px;margin:0 0 2px!important}
.kb-umbenennen{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kb-umbenennen input{flex:1 1 140px;min-width:0;padding:6px 8px;border:1px solid var(--feld);border-radius:8px;font:inherit;font-size:14.5px}
.kb-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.kb-zeile label{flex:1 1 220px;margin:0}
.kb-datum{padding:5px 6px;border:1px solid var(--feld);border-radius:8px;font:inherit;font-size:14.5px;max-width:100%}
.kb-plzort{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px}
@media print{.kopf,.onav,.ofuss,.oknoepfe,[data-kb-drucken]{display:none!important}.kb-codeliste{columns:1}}

/* Phase 4b: Bereiche und Rollen */
.kopf-rechts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.kb-umschalter{white-space:nowrap}
.kb-bereichskarte h2{margin-top:0}
.kb-rolle{margin:0 4px 4px 0}
.kb-x{border:0;background:transparent;color:var(--schiefer);cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 4px}
.kb-x:hover{color:#B3261E}
.kb-rollenwahl{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.kb-rollenwahl select{padding:4px 6px;border:1px solid var(--feld);border-radius:8px;font:inherit;font-size:14.5px}

/* Phase 5: Datenraum – Indexnummern, eingerückter Ordnerbaum, Hinweis zur Protokollierung */
.dr-index{display:inline-block;min-width:2.6em;font-variant-numeric:tabular-nums;font-weight:600;color:var(--messing-dunkel)}
/* Einrückung nach Tiefe über Klassen dr-t0 … dr-t4 (Stilattribute sind durch die Inhaltsrichtlinie – CSP – gesperrt) */
.dr-einzug{display:inline-block;width:0}
.dr-t1.dr-ordner{margin-left:22px}.dr-t2.dr-ordner{margin-left:44px}.dr-t3.dr-ordner,.dr-t4.dr-ordner{margin-left:66px}
.dr-t1.dr-einzug{width:14px}.dr-t2.dr-einzug{width:28px}.dr-t3.dr-einzug{width:42px}.dr-t4.dr-einzug{width:56px}
.dr-hinweis{border-left:3px solid var(--messing);padding-left:10px}
.dr-text{white-space:normal;overflow-wrap:anywhere}
.dr-nda-text{max-height:60vh;overflow:auto;background:#fff}
.dr-toc .dr-ordnerzeile td{background:#f6f1e8;font-weight:600}
.okarte select{max-width:100%}
.kb-matrix select{min-width:0;max-width:100%;font-size:14px}
@media (max-width:760px){.dr-t1.dr-ordner{margin-left:10px}.dr-t2.dr-ordner{margin-left:20px}.dr-t3.dr-ordner,.dr-t4.dr-ordner{margin-left:30px}}
.dr-wahl{border:1px solid var(--linie);border-radius:12px;padding:10px 14px;margin:0 0 14px;background:#fff}
.dr-wahl legend{font-weight:600;padding:0 6px}

/* Phase 6: Signatur – Seitenvorschau mit Feldern, Zeichenfläche, getippte Unterschrift in Schreibschrift (Dancing Script, SIL Open Font License 1.1) */
@font-face{font-family:"Dancing Script";src:url(/assets/fonts/DancingScript-Variabel.ttf) format("truetype");font-display:swap}
[hidden]{display:none!important}
.sig-rahmen{position:relative;cursor:crosshair}
.sig-rahmen .kb-seitenbild{display:block;margin:0}
.sig-vorschau-seiten .sig-rahmen{margin:0 0 14px}
.sig-feld{position:absolute;border:2px dashed var(--messing);background:rgba(185,90,28,.12);font-size:11px;line-height:1.2;padding:1px 3px;overflow:hidden;color:var(--marine);pointer-events:none}
.sig-feld-datum,.sig-feld-ort{border-color:var(--schiefer);background:rgba(74,90,106,.10)}
.sig-feld-neu{border:2px solid var(--marine);background:rgba(15,42,68,.12)}
.sig-zahlen label{min-width:0}
.sig-canvas{display:block;width:100%;height:auto;aspect-ratio:3/1;background:#fff;border:1px dashed var(--feld);border-radius:10px;touch-action:none}
.sig-vorschau{font-family:"Dancing Script",cursive;font-size:clamp(30px,8vw,48px);margin:.2em 0;color:var(--marine);overflow-wrap:anywhere}
.sig-titel{margin-top:.4em}
.sig-seiten .kb-seitenbild{width:100%}
.sig-formular .knopf[disabled]{opacity:.45;cursor:not-allowed}
.sig-datenschutz h2{font-size:17px;margin-top:1.2em}
.sig-vorschau-seiten .sig-rahmen{max-width:900px;margin:0 auto 14px}
/* Phase 7: Nachrichten im Portal – Hinweis oben, ungelesene Fäden fett, Verlauf mit Seitenkennung, Gelesen-Vermerk */
.na-banner{background:#FFF3E8;border-left:4px solid var(--messing);padding:10px 14px;border-radius:6px;margin:0 0 12px;font-weight:600}
.na-banner a{text-decoration:none}
.na-banner a::after{content:" →"}
.na-zaehler{background:#EEF1F4;border-left-color:var(--marine)}
.na-ungelesen td,.na-ungelesen td a{font-weight:700}
.na-nachricht{border-left:4px solid var(--linie)}
.na-von-mitarbeiter{border-left-color:var(--marine)}
.na-von-extern{border-left-color:var(--messing)}
.na-eigen{background:#FFFCF8}
.na-anhaenge{margin:6px 0 0;padding-left:20px}
.na-anhaenge a{overflow-wrap:anywhere}
.na-lesestand{margin:8px 0 0}
.na-oeffentlich .ohinweis{margin:10px 0 0}
.na-verweis{white-space:normal}
@media (max-width:760px){.na-filter .ozeile{display:block}}

/* Phase 8: Fragebogen Vorsorge */
.vs-frage{margin:0 0 .2rem 0}
.vs-wahlen{display:flex;flex-direction:column;gap:.25rem;margin:.2rem 0 .9rem 0}
.vs-wahl{display:flex;align-items:flex-start;gap:.5rem;font-weight:400}
.vs-wahl input{margin-top:.25rem;width:auto}