/* Musterprojekt (musterprojekt.html): verfremdeter Situationsplan.
   Variante und Ansicht schalten ohne Skript: Radio-Knöpfe + :has(). Ohne :has() bleibt Variante A sichtbar. */
:root{--mp-warn:#A23B2B}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--mp-warn:#E59A8B} }
:root[data-theme="dark"]{--mp-warn:#E59A8B}

/* Kopf */
.mp-hero{padding:64px 0 72px}
@media (min-width:900px){ .mp-hero{padding:96px 0 88px} }
.mp-kicker{font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-ink)}
.mp-hero h1{margin-top:20px; max-width:14ch}
.mp-hero .lede{margin-top:26px; max-width:42rem}
.mp-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.mp-chips li{font-size:14px; line-height:1.3; border:1px solid var(--line); border-radius:999px; padding:6px 13px; color:var(--muted); background:var(--white)}
.mp-chips li.mark{color:var(--ink); border-color:var(--accent)}
.mp-hero .hero-actions{margin-top:36px}
.mp-kpis{display:grid; margin:64px 0 0; border-top:1px solid var(--line)}
@media (min-width:820px){ .mp-kpis{grid-template-columns:repeat(3,1fr)} }
.mp-kpi{display:flex; flex-direction:column; gap:12px; padding:24px 0; border-bottom:1px solid var(--line)}
@media (min-width:820px){ .mp-kpi{padding:28px 32px 4px 0; border-bottom:0} .mp-kpi + .mp-kpi{padding-left:32px; border-left:1px solid var(--line)} }
.mp-kpi dt{font-size:15.5px; color:var(--muted)}
.mp-kpi dd{margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px}
.mp-kpi .v{display:inline-flex; align-items:baseline; gap:8px; font-family:"Newsreader",Georgia,serif; font-size:2.6rem; line-height:1; font-variation-settings:"opsz" 72}
.mp-kpi .v small{font-family:"Public Sans","Helvetica Neue",Arial,sans-serif; font-size:13px; font-weight:600; letter-spacing:0.06em; color:var(--muted)}
.mp-kpi .v.a{color:var(--muted)}
.mp-kpi .v.b{color:var(--accent-ink)}
.mp-kpi .unit{font-size:1.4rem}
.mp-kpi .to{color:var(--accent); font-size:1.4rem}
.mp-note{margin-top:20px; font-size:14px; color:var(--muted)}

/* Vergleich */
.mp-viewer{margin-top:8px}
.mp-bar{display:flex; flex-wrap:wrap; align-items:center; gap:14px 36px; margin-bottom:20px}
.mp-seg{display:flex; align-items:center; flex-wrap:wrap; margin:0; padding:0; border:0; min-width:0}
.mp-seg legend{float:left; padding:0; margin:0 14px 0 0; font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}
.mp-seg input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.mp-seg label{cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border:1px solid var(--line); background:var(--white); color:var(--ink); font-size:15px; font-weight:600}
.mp-seg label span{font-weight:400; color:var(--muted)}
.mp-seg input + label{border-radius:4px 0 0 4px}
.mp-seg label + input + label{margin-left:-1px; border-radius:0 4px 4px 0}
.mp-seg input:checked + label{background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg)}
.mp-seg input:checked + label span{color:inherit}
.mp-seg input:focus-visible + label{outline:3px solid var(--accent); outline-offset:2px; position:relative; z-index:1}
.mp-stage{display:grid; gap:28px; align-items:start}
@media (min-width:1040px){ .mp-stage{grid-template-columns:minmax(0,1fr) 330px; gap:32px} }
.mp-figure{margin:0; min-width:0}
.mp-scroll{background:#F7F7F5; border:1px solid var(--line); border-radius:6px; overflow:auto; overscroll-behavior-x:contain}
.mp-plan{display:block; width:100%; height:auto; min-width:560px}
.mp-hint{display:none; margin-top:8px; font-size:13.5px; color:var(--muted)}
@media (max-width:620px){ .mp-hint{display:block} }
.mp-figure figcaption{margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--muted); max-width:46rem}
.mp-legend{margin-top:18px; display:flex; flex-direction:column; gap:10px}
.mp-legend ul{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14.5px; color:var(--ink)}
.mp-legend li{display:flex; align-items:center; gap:9px}
.mp-legend .sw{flex:none; width:16px; height:16px; border-radius:3px; border:1px solid transparent}
.mp-legend .dia{flex:none; width:12px; height:12px; margin:0 2px; transform:rotate(45deg); border:2px solid transparent}
.sw-cone{background:#BCE5E0; border-color:#1E6E68}
.sw-pub{background:#D9A59A}
.sw-nb{background:#CFC08E}
.sw-bld{background:#5E686A}
.sw-veg{background:#A9C79A; border-color:#5F8A4E}
.sw-sec{background:repeating-linear-gradient(45deg, #1E6E68 0 1.2px, #F7F7F5 1.2px 5px); border-color:#9CC9C3}
.sw-ide{background:#1E6E68}
.sw-rec{background:#57AFA5}
.sw-obs{background:#A9DCD5}
.sw-det{background:#DCEFEC; border-color:#A9DCD5}
.dia.ok{background:#1E6E68}
.dia.miss{background:#FFFFFF; border-color:#525E5C}
.dia.bad{background:#B3412F}
.dia.free{background:#8A9395}

/* Plan: helles Papier in beiden Farbschemen, wie die Situationspläne auf der Gemeindeseite */
.mp-plan .paper{fill:#F7F7F5}
.mp-plan .p-own{fill:#FFFFFF}
.mp-plan .p-nb{fill:#EEF0EE}
.mp-plan .p-pub{fill:#E1E4E2}
.mp-plan .p-own,.mp-plan .p-nb,.mp-plan .p-pub{stroke:#B7BDBB; stroke-width:1; vector-effect:non-scaling-stroke}
.mp-plan .cones{fill:#8FD3CC; opacity:0.62}
.mp-plan .hits{opacity:0.92}
.mp-plan .hit-pub{fill:#D9A59A}
.mp-plan .hit-nb{fill:#CFC08E}
.mp-plan .cone-lines path{fill:none; stroke:#1E6E68; stroke-width:1.4; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.mp-plan .zones{opacity:0.88}
.mp-plan .z-det{fill:#DCEFEC}
.mp-plan .z-obs{fill:#A9DCD5}
.mp-plan .z-rec{fill:#57AFA5}
.mp-plan .z-ide{fill:#1E6E68}
.mp-plan .sec{fill:url(#mp-hatch)}
.mp-plan .hatch{stroke:#1E6E68; stroke-width:1.3; opacity:0.55}
.mp-plan .bld{fill:#9AA2A3}
.mp-plan .bld-own{fill:#5E686A}
.mp-plan .o-veg{fill:#A9C79A; stroke:#5F8A4E; stroke-width:1; stroke-dasharray:3 2; vector-effect:non-scaling-stroke}
.mp-plan .o-wall{fill:#3F4A4C}
.mp-plan .cam{fill:#171D1F; stroke:#FFFFFF; stroke-width:2.5}
.mp-plan .poi{stroke:#FFFFFF; stroke-width:2; stroke-linejoin:round}
.mp-plan .poi.a-ok,.mp-viewer:has(#mp-b:checked) .mp-plan .poi.b-ok{fill:#1E6E68; stroke:#FFFFFF}
.mp-plan .poi.a-miss,.mp-viewer:has(#mp-b:checked) .mp-plan .poi.b-miss{fill:#FFFFFF; stroke:#525E5C}
.mp-plan .poi.a-bad,.mp-viewer:has(#mp-b:checked) .mp-plan .poi.b-bad{fill:#B3412F; stroke:#FFFFFF}
.mp-plan .poi.a-free,.mp-viewer:has(#mp-b:checked) .mp-plan .poi.b-free{fill:#8A9395; stroke:#FFFFFF}
.mp-plan text{font-family:"Public Sans","Helvetica Neue",Arial,sans-serif; paint-order:stroke fill; stroke:#FFFFFF; stroke-width:3.2px; stroke-linejoin:round}
.mp-plan .lbl-area{font-size:15px; font-style:italic; fill:#525E5C}
.mp-plan .lbl-poi{font-size:14px; font-weight:500; fill:#171D1F}
.mp-plan .lbl-cam{font-size:15px; font-weight:700; fill:#171D1F}
.mp-plan .lbl-bld{font-size:15px; font-weight:600; fill:#FFFFFF; stroke:none}
.mp-plan .scale-bg{fill:#FFFFFF; fill-opacity:0.88; stroke:#D6DAD8}
.mp-plan .scale path,.mp-plan .north{fill:none; stroke:#171D1F; stroke-width:1.4}
.mp-plan .scale text{font-size:12px; fill:#525E5C; stroke:none}
.mp-plan .north-l{font-size:12px; font-weight:700; fill:#171D1F; stroke:none}
.mp-plan .frame{fill:none; stroke:#B7BDBB}

/* Umschalten */
.mp-plan .vb,.mp-plan .lyr-dori{display:none}
.mp-viewer:has(#mp-b:checked) .mp-plan .va{display:none}
.mp-viewer:has(#mp-b:checked) .mp-plan .vb{display:inline}
.mp-viewer:has(#mp-dori:checked) .mp-plan .lyr-recht{display:none}
.mp-viewer:has(#mp-dori:checked) .mp-plan .lyr-dori{display:inline}
.mp-panel.vb,.mp-legend .lg-dori{display:none}
.mp-viewer:has(#mp-b:checked) .mp-panel.va{display:none}
.mp-viewer:has(#mp-b:checked) .mp-panel.vb{display:block}
.mp-viewer:has(#mp-dori:checked) .mp-legend .lg-recht{display:none}
.mp-viewer:has(#mp-dori:checked) .mp-legend .lg-dori{display:flex}

/* Seitenleiste je Variante */
.mp-panel{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:6px; padding:26px 24px 18px}
.mp-panel h3{font-size:1.45rem}
.mp-panel > p{color:var(--muted); font-size:15.5px; margin-top:10px}
.mp-panel h4{margin:24px 0 6px; font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}
.mp-list li{display:flex; flex-direction:column; gap:2px; padding:10px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.45}
.mp-list b{font-weight:600}
.mp-list span{color:var(--muted)}
.mp-list .st{font-weight:600}
.st-ok{color:var(--accent-ink)}
.st-bad{color:var(--mp-warn)}
.st-miss,.st-free{color:var(--muted)}

/* Bericht */
.mp-report{display:grid; gap:36px 72px}
@media (min-width:900px){ .mp-report{grid-template-columns:0.95fr 1.05fr; align-items:start} }
.mp-report .lede{max-width:34rem; margin-top:22px}
.mp-pages{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 18px; margin-top:56px}
@media (min-width:640px){ .mp-pages{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1040px){ .mp-pages{grid-template-columns:repeat(6,1fr)} }
.mp-page{margin:0; display:flex; flex-direction:column; gap:12px}
.mp-page .sheet{position:relative; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:#FFFFFF; box-shadow:0 10px 24px rgba(23,29,31,0.08)}
.mp-page img{width:100%; height:auto}
.mp-page .lock{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:#263033; color:#FFFFFF; font-size:12.5px; font-weight:600; line-height:1; padding:7px 11px; border-radius:999px; white-space:nowrap}
.mp-page figcaption{font-size:14px; line-height:1.4; display:flex; flex-direction:column; gap:2px}
.mp-page figcaption b{font-weight:600}
.mp-page figcaption span{color:var(--muted)}
.mp-pages-note{margin-top:28px; font-size:14.5px; color:var(--muted); max-width:46rem}
.mp-honest{margin-top:72px}