/* Maßnahmen-CRM — Gestaltung wie im Prototyp.
   Bauplan: prototyp/Liste.basis.html (Grundlage, Seitenleiste), prototyp/geruest.py (Seitengerüst, Handy),
   prototyp/menue.py (Fenster). KONZEPT 7, 7b, 7c. */

@font-face{font-family:"Source Sans 3";src:url("/fonts/source-sans-3-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* ---------- Grundlage ---------- */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;background:#F4F4F8;font-family:"Source Sans 3",system-ui,sans-serif;color:#1F2937}
a{color:#2C2B80}a:hover{color:#242370}
.rahmen{display:flex;min-height:100vh}
.main{flex-grow:1;min-width:0;padding:24px 32px}
.seite{max-width:1400px;margin:0 auto}

/* ---------- Seitenleiste ---------- */
.sidebar{position:sticky;top:0;z-index:30;height:100vh;width:64px;flex-shrink:0;background:#2C2B80;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.sidebar .logo{padding:16px 0 12px;display:flex;justify-content:center}
.sidebar .logo img{width:32px;height:32px;display:block}
.sidebar > nav{flex-grow:1;padding:8px 0;overflow-y:auto;overflow-x:hidden;width:100%;display:flex;justify-content:center}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.nav-link{display:flex;align-items:center;justify-content:center;width:48px;height:36px;border-radius:8px;color:rgba(255,255,255,0.7);border-left:3px solid transparent;box-sizing:border-box;text-decoration:none}
.nav-link:hover{background:rgba(255,255,255,0.1);color:#fff}
.nav-link.active{background:rgba(255,255,255,0.1);color:#fff;border-left-color:#FF433E}
.sep{width:48px;height:0;margin:8px 0;border-top:1px solid rgba(255,255,255,0.1)}
.sep-orange{border-top-color:#FF433E}
.side-btn{width:48px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:0;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.7);cursor:pointer}
.side-btn:hover{color:#fff}
.mn-burger{display:none}
.profile-menu{position:relative;width:100%;display:flex;justify-content:center;padding:12px 0;border-top:1px solid rgba(255,255,255,0.1)}
.profile-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:2px solid rgba(255,255,255,0.15);background:#FF433E;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0}
.profile-avatar:hover{border-color:rgba(255,255,255,0.5)}
.flyout{position:absolute;left:100%;bottom:12px;margin-left:8px;display:flex;gap:4px;padding:6px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,0.06);box-shadow:0 6px 20px rgba(0,0,0,0.18);opacity:0;pointer-events:none;transform:translateX(-4px);transition:opacity 150ms ease,transform 150ms ease;z-index:50;white-space:nowrap}
.profile-menu:hover > .flyout,.profile-menu:focus-within > .flyout{opacity:1;pointer-events:auto;transform:translateX(0)}
.profile-item{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:0;background:none;padding:0;color:#2C2B80;text-decoration:none;cursor:pointer}
.profile-item:hover{background:rgba(44,43,128,0.10)}
.profile-item.logout:hover{background:rgba(255,67,62,0.12);color:#FF433E}

/* ---------- Knöpfe, Felder ---------- */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;min-height:40px;border-radius:8px;border:0;background:#2C2B80;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;box-sizing:border-box}
.btn-primary:hover{background:#242370}
a.btn-primary,a.btn-primary:hover{color:#fff}
.btn-ghost{display:inline-flex;align-items:center;padding:8px 16px;min-height:40px;border-radius:8px;border:1px solid #D1D5DB;background:#fff;color:#374151;font:inherit;font-size:14px;cursor:pointer}
.btn-ghost:hover{background:#F9FAFB}
.btn-klein{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:8px;border:1px solid #D1D5DB;background:#fff;color:#374151;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.btn-klein:hover{background:#F9FAFB}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:14px;font-weight:500;color:#374151}
.inp{box-sizing:border-box;width:100%;padding:8px 12px;border-radius:8px;border:1px solid #D1D5DB;background:#fff;color:#111827;font:inherit;font-size:14px;min-height:40px}
.inp:focus{outline:none;border-color:#2C2B80;box-shadow:0 0 0 1px #2C2B80}

/* ---------- Seitengerüst: Kopf → Reiter → Filterzeile → Liste (KONZEPT 7c) ---------- */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:44px;margin:0 0 12px}
.kopf h1{margin:0;font-size:24px;font-weight:700;color:#111827}
.kopf-knoepfe{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reiterzeile{display:flex;flex-wrap:wrap;gap:0 24px;border-bottom:1px solid #E5E7EB;margin:0 0 16px;padding:0}
.reiter{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 0;margin:0 0 -1px;border:0;border-bottom:2px solid transparent;background:none;color:#6B7280;font:inherit;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box}
.reiter:hover{color:#111827}
.reiter.an,.reiter.an:hover{border-bottom-color:#2C2B80;color:#2C2B80;font-weight:600}
.reiter .zahl{display:inline-flex;min-width:20px;justify-content:center;padding:0 6px;border-radius:999px;background:#F3F4F6;color:#6B7280;font-size:12px;font-weight:600}
.reiter.an .zahl{background:#EEEEF9;color:#2C2B80}
.gr-mehr{position:relative;display:inline-flex}
.gr-mehr > summary{list-style:none}
.gr-mehr > summary::-webkit-details-marker{display:none}
.gr-mehr > summary svg{margin-left:-4px}
.gr-mehr-panel{position:absolute;top:100%;right:0;z-index:40;margin-top:4px;min-width:220px;padding:6px;background:#fff;border:1px solid #E5E7EB;border-radius:10px;box-shadow:0 10px 25px -5px rgba(0,0,0,0.15);display:flex;flex-direction:column;gap:2px}
.gr-mehr-panel .reiter{display:block;width:100%;padding:8px 12px;margin:0;border:0;border-radius:6px;color:#374151}
.gr-mehr-panel .reiter:hover{background:#F4F4F8;color:#111827}
.gr-mehr-panel .reiter.an{background:#EEEEF9;color:#2C2B80;border:0}
.ls-leiste{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:36px;margin:0 0 12px}
.ls-such,.ls-sel,.ls-knopf{box-sizing:border-box;height:36px;min-height:36px;border-radius:8px;border:1px solid #E5E7EB;background:#fff;font:inherit;font-size:13px;color:#374151}
.ls-such{width:auto;flex:1 1 140px;max-width:260px;min-width:0;padding:6px 12px}
.ls-sel{width:auto;flex:1 1 96px;max-width:172px;min-width:0;padding:6px 8px;cursor:pointer;text-overflow:ellipsis}
.ls-such:hover,.ls-sel:hover,.ls-knopf:hover{border-color:#C9CCD3}
.ls-such:focus,.ls-sel:focus,.ls-knopf:focus{outline:none;border-color:#2C2B80;box-shadow:0 0 0 1px #2C2B80}
.ls-info{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin:0 0 0 auto;height:36px;font-size:13px;color:#6B7280;white-space:nowrap}
.ls-zurueck{background:none;border:0;padding:0;font:inherit;font-weight:500;color:#2C2B80;cursor:pointer}
.ls-zurueck:hover{text-decoration:underline}
.tbl-wrap{overflow-x:auto;background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;text-align:left}
.tbl thead tr:first-child{background:#F9FAFB}
.tbl th{padding:12px;font-size:12px;font-weight:600;color:#6B7280;white-space:normal;vertical-align:bottom}
.tbl td{padding:14px 12px;color:#6B7280;white-space:normal}
.tbl th:first-child,.tbl td:first-child{padding-left:20px}
.tbl tbody tr{border-bottom:1px solid #F3F4F6;background:#fff}
.tbl tbody tr:nth-child(even){background:#FCFCFD}
.tbl tbody tr:hover{background:#EEEEF9}
.tbl td.leer{padding:32px;text-align:center;color:#9CA3AF}
@media (max-width:1100px){.tbl th,.tbl td{padding-left:6px;padding-right:6px}.tbl{font-size:13px}}

/* ---------- Detailseite, Meldungen, Formulare (Bauplan geruest.detailkopf, bau_verwaltung.py) ---------- */
.brot{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;min-width:0;margin:0 0 8px;font-size:14px;color:#6B7280;overflow-wrap:anywhere}
.brot a{color:#2C2B80;text-decoration:none}
.brot a:hover{text-decoration:underline}
.kopf.kopf-detail{align-items:flex-end;margin:0 0 16px}
.kopf-titel{display:flex;flex-direction:column;gap:6px;min-width:0}
.kopf-zeile{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.kopf-info{margin:0;font-size:14px;color:#6B7280;overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.pill-gruen{background:#DCFCE7;color:#166534}
.pill-grau{background:#F3F4F6;color:#374151}
.pill-blau{background:#EEEEF9;color:#1C1C60}
.rolle-pill{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;background:#EEEEF9;color:#1C1C60;margin:0 4px 2px 0}
.text-rot{color:#B32E2C;font-size:13px}
.name-link{font-weight:600;color:#2C2B80;text-decoration:none}
.name-link:hover{color:#242370;text-decoration:underline}
.zeile-klein{display:block;font-size:12px;color:#6B7280}
.meldung{margin:0 0 16px;padding:10px 14px;border-radius:8px;background:#DCFCE7;color:#166534;font-size:14px}
.meldung-fehler{background:#FFF0EF;color:#B32E2C}
.meldung-gelb{background:#FEF3C7;color:#92400E}
.karte{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}
.karte-form{display:flex;flex-direction:column;gap:16px;padding:20px;margin:0 0 20px}
.karte-titel{margin:0;font-size:16px;font-weight:700;color:#111827}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.form-fuss{display:flex;justify-content:flex-end;gap:8px}
.knopf-form{display:inline-flex;margin:0}
.inp:disabled{background:#F9FAFB;color:#6B7280}
.rollen{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.rollen legend{float:left;margin-right:8px;font-size:14px;font-weight:600;color:#111827}
.chk-reihe{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px;border-radius:8px;font-size:14px;color:#111827;cursor:pointer}
.chk-reihe:hover{background:#F4F4F8}
.chk-reihe:has(input:disabled){cursor:default}
.haken{width:18px;height:18px;accent-color:#2C2B80;margin:0}
.chk-hinweis{font-size:12px;color:#6B7280}
.frage{margin:0 0 16px;padding:16px;border:1px solid #D1D5DB;border-radius:12px;background:#fff;box-shadow:0 10px 25px -5px rgba(0,0,0,0.15)}
.frage-titel{font-weight:600;color:#111827;margin-bottom:4px}
.frage-text{font-size:14px;color:#374151;margin-bottom:12px}
.frage-knoepfe{display:flex;justify-content:flex-end;gap:8px}
a.btn-ghost{text-decoration:none;box-sizing:border-box}
.such-zeile{display:flex;gap:8px;max-width:560px}
.treffer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.treffer li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #F3F4F6;font-size:14px;color:#111827}
.leer-text{margin:0;color:#6B7280;font-size:14px}
.ls-form{display:contents}
.ls-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Anmeldeseite ---------- */
body.anmelden{min-height:100vh;display:grid;place-items:center}
.anm-karte{background:#fff;border-radius:12px;padding:40px 48px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.08);width:360px;max-width:calc(100vw - 32px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:20px}
.anm-karte img{width:220px;height:auto}
.anm-karte h1{font-size:22px;color:#2C2B80;margin:0}
.anm-karte .meldung{margin:0;width:100%;box-sizing:border-box}
.anm-knopf{justify-content:center;width:100%;gap:10px}

/* ---------- Fenster (Hilfe) ---------- */
.mn-dlg{width:640px;max-width:calc(100vw - 32px);max-height:calc(100vh - 96px);margin:48px auto auto;box-sizing:border-box;padding:20px;border:0;border-radius:12px;box-shadow:0 20px 40px -10px rgba(0,0,0,0.3);font-family:inherit;font-size:14px;color:#374151}
.mn-dlg::backdrop{background:rgba(17,24,39,0.45)}
.mn-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.mn-titel{font-size:18px;font-weight:700;color:#111827}
.mn-lbl{display:block;margin:0 0 4px;font-size:13px;font-weight:500;color:#374151}
.mn-inp{display:block;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:1px solid #D1D5DB;border-radius:8px;background:#fff;font:inherit;font-size:14px;color:#111827}
.hilfe-abschnitt h2{margin:16px 0 8px;font-size:17px;font-weight:700;color:#111827}
.hilfe-abschnitt p{margin:0 0 10px;line-height:1.5}

/* ---------- Handy (unter 640 px): Seitenleiste wird Kopfleiste, Menü hinter ☰, Tabellen werden Karten ---------- */
@media (max-width:640px){
.rahmen{flex-direction:column}
.main{padding:16px}
.seite{min-width:0}
.sidebar{position:sticky;top:0;width:100%;height:auto;flex-direction:row;align-items:center;padding:0 4px;gap:2px}
.sidebar .logo{padding:8px 6px}
.sidebar .logo img{width:28px;height:28px}
.sidebar .mn-burger{display:flex;order:99;width:38px;margin-right:4px}
.sidebar .mn-burger[aria-expanded="true"]{background:rgba(255,255,255,0.15);color:#fff}
.sidebar > nav{display:none;position:absolute;top:100%;left:0;right:0;width:auto;max-height:calc(100vh - 56px);overflow-y:auto;padding:8px 12px 12px;background:#2C2B80;box-shadow:0 10px 15px -3px rgba(0,0,0,0.25);box-sizing:border-box}
.sidebar:has(.mn-burger[aria-expanded="true"]) > nav{display:block}
.sidebar .nav-list{align-items:stretch;gap:2px}
.sidebar .nav-link{width:100%;height:44px;justify-content:flex-start;gap:14px;padding:0 12px;font-size:15px;font-weight:500}
.sidebar .nav-link::after{content:attr(title)}
.sidebar .sep{width:auto;margin:6px 12px}
.sidebar .profile-menu{width:auto;margin-left:auto;padding:6px 4px;border-top:0}
.sidebar .profile-avatar{width:34px;height:34px}
.sidebar .flyout{top:100%;bottom:auto;left:auto;right:0;margin:6px 0 0;transform:translateY(-4px)}

.raster-3{grid-template-columns:minmax(0,1fr)}
.kopf.kopf-detail{align-items:flex-start}
.treffer li{flex-direction:column;align-items:flex-start}
.anm-karte{padding:32px 24px}

.reiterzeile:has(.gr-mehr){position:relative}
.reiterzeile .gr-mehr{position:static}
.reiterzeile .gr-mehr-panel{left:0;right:0;min-width:0}

.tbl-wrap:has(> table.m-karten){overflow:visible;background:none;box-shadow:none;border-radius:0}
table.m-karten{display:block;width:100%;border:0;background:none}
table.m-karten > thead{display:none}
table.m-karten > tbody{display:block}
table.m-karten > tbody > tr{display:flex;flex-direction:column;position:relative;margin:0 0 8px;padding:10px 14px;background:#fff;border:1px solid #E5E7EB;border-radius:10px}
table.m-karten > tbody > tr:hover{background:#fff}
table.m-karten > tbody > tr > td{display:block;position:relative;box-sizing:border-box;min-height:22px;padding:3px 0 3px 38%;border:0;text-align:left;white-space:normal;font-size:14px;overflow-wrap:anywhere}
table.m-karten > tbody > tr > td::before{content:attr(data-label);position:absolute;left:0;top:3px;width:35%;font-size:12px;line-height:20px;font-weight:500;color:#6B7280;overflow-wrap:anywhere}
table.m-karten > tbody > tr > td[data-m="titel"]{order:-1;padding:0 0 6px;font-size:15px}
table.m-karten > tbody > tr > td[data-m]::before,table.m-karten > tbody > tr > td.leer::before{content:none}
table.m-karten > tbody > tr > td.leer{padding:8px 0;text-align:center}
}

/* Rechte (#4, Bauplan prototyp/verwaltung.py CSS / NUR_LESEN, zugriff.gesperrt) */
.nur-lesen-hinweis{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:16px;border-radius:10px;background:#FEF3C7;color:#92400E;font-size:14px}
.nur-lesen form.karte-form :is(input:not([type=hidden]),select,textarea,button[type=submit]){pointer-events:none;opacity:.55}
.kein-zugriff{max-width:460px;padding:24px}
.kein-zugriff p{margin:0 0 16px;font-size:14px;color:#374151}

/* Zugriffsrechte (Bauplan prototyp/bau_verwaltung.py, v109/v110 ruhig, v141 Handy) */
.mx-wrap{overflow-x:auto}
.mx{border-collapse:separate;border-spacing:0;font-size:13px;width:100%}
.mx th,.mx td{padding:6px 4px;border-bottom:1px solid #F3F4F6;text-align:center;background:#fff}
.mx thead th{position:sticky;top:0;z-index:2;background:#F9FAFB;font-size:12px;font-weight:600;color:#6B7280}
.mx thead th[scope=colgroup]{color:#111827;font-size:13px}
.mx abbr{text-decoration:none;cursor:help}
.mx th.bz{text-align:left;padding-left:16px;font-weight:500;color:#111827;white-space:normal;min-width:180px}
.mx th.bz.haupt{font-weight:700}
.mx .erst{border-left:2px solid #E5E7EB}
.mx tbody tr:hover th,.mx tbody tr:hover td{background:#F4F4F8}
.mx .haken{-webkit-appearance:none;appearance:none;position:relative;display:inline-block;vertical-align:middle;width:16px;height:16px;margin:0;border:1px solid #CDD1D8;border-radius:4px;background:#fff;cursor:pointer;opacity:1}
.mx .haken:hover{border-color:#8F8FD0}
.mx .haken:checked{border-color:#A9A9E1;background:#EEEEF9}
.mx .haken:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #2C2B80;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mx .haken.geerbt{border-color:#E5E7EB}
.mx .haken.geerbt:checked{border-color:#E2E2F3;background:#F7F7FC}
.mx .haken.geerbt:checked::after{border-color:#AFAFD6}
.mx .haken:disabled{cursor:default}
.mx .haken:disabled:not(:checked){border-color:#E5E7EB;background:#FAFAFB}
.mx .haken:focus-visible{outline:2px solid #2C2B80;outline-offset:2px}
.mx-form.warte .haken{pointer-events:none}
.mx-leg{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:10px 4px 0;font-size:12px;color:#6B7280}
.mx-leg span{display:inline-flex;align-items:center;gap:6px}
.mx-leg i{position:relative;display:inline-block;width:14px;height:14px;box-sizing:border-box;border:1px solid #A9A9E1;border-radius:4px;background:#EEEEF9}
.mx-leg i::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;border:solid #2C2B80;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mx-leg i.g{border-color:#E2E2F3;background:#F7F7FC}
.mx-leg i.g::after{border-color:#AFAFD6}
.mx-rollen{display:none}
@media (max-width:640px){
.mx-rollen{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.mx-r{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid #E5E7EB;border-radius:999px;background:#fff;font-size:13px;font-weight:500;color:#374151;text-decoration:none}
.mx-r.an{border-color:#A9A9E1;background:#EEEEF9;color:#2C2B80;font-weight:600}
.mx .mx-aus{display:none}
.mx th.bz{min-width:0;padding-left:10px}
.mx th,.mx td{padding-left:2px;padding-right:2px}
.mx thead th{font-size:11px}
.mx .erst{border-left:0}
}