/* =======================================================================
   Version 3 — „Das Bauer-Haus"
   Hero: gezeichnetes Torgauer Giebelhaus. Die Fenster leuchten, solange
   das Büro geöffnet ist (html[data-buero] aus oeffnungszeiten.js), das
   Türschild wechselt zwischen „Geöffnet" und „Geschlossen", am Himmel
   steht Sonne oder Mond. Dazu Aktenregal und Fächer-Tätigkeitsbereiche.
   ======================================================================= */

/* ─── Hero ──────────────────────────────────────────────────────────── */
.v3-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#EAF0F5 0%,#F6F8FA 62%,#fff 100%);
  min-height:min(100svh,1040px);display:flex;flex-direction:column;
}
html[data-buero="zu"] .v3-hero,html[data-buero="feiertag"] .v3-hero{background:linear-gradient(180deg,#DCE4EC 0%,#EEF2F5 62%,#fff 100%)}
.v3-hero-grid{flex:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(24px,4vw,72px);align-items:center;
  max-width:1480px;width:100%;margin-inline:auto;padding:clamp(48px,6vh,88px) var(--pad) clamp(20px,3vh,40px)}
.v3-marke{width:min(460px,80vw)}
.v3-marke img{width:100%;height:auto}
.v3-gruss{font-size:clamp(34px,3.4vw,54px);line-height:1.08;color:var(--text);margin-top:clamp(20px,3vh,34px);max-width:none}
.v3-status-karte{margin-top:clamp(20px,3vh,32px);background:#fff;border:1px solid var(--line);border-left:4px solid var(--blau);padding:20px 22px;box-shadow:0 18px 44px rgba(15,47,66,.08);max-width:520px}
.v3-zeile{margin-top:22px}
.v3-zeile .fakten{flex-direction:row;flex-wrap:wrap;gap:12px 28px}
.v3-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vh,34px)}

.v3-bild{position:relative;align-self:end}
.haus{width:100%;height:auto;max-height:min(78vh,820px);margin-inline:auto;overflow:visible}
.haus .giebel,.haus .fassade{fill:url(#fassade);stroke:var(--blau);stroke-width:2.2;stroke-linejoin:round}
.haus .voluten circle{fill:#fff;stroke:var(--blau);stroke-width:2}
.haus .spitze{stroke:var(--blau);stroke-width:2.4;stroke-linecap:round;fill:none}
.haus .spitze-k{fill:var(--messing)}
.haus .okulus{fill:var(--hell);stroke:var(--blau);stroke-width:2}
.haus .gesims{stroke:var(--blau);stroke-width:3;fill:none}
.haus .lisene{stroke:var(--wappen);stroke-width:6;opacity:.25}
.haus .fenster path:first-child,.haus .fenster rect{fill:#CFDAE4;stroke:var(--blau);stroke-width:2;transition:fill 1.2s var(--ease)}
.haus .fenster .sprosse{stroke:var(--blau);stroke-width:1.6;fill:none}
.haus .schein-gruppe{opacity:0;transition:opacity 1.4s var(--ease)}
.haus .tuer-rahmen{fill:none;stroke:var(--blau);stroke-width:4}
.haus .tuer-innen{fill:#F6D58E}
.haus .tuer-fluegel{fill:var(--blau);stroke:var(--blau-dd);stroke-width:1.5;transition:transform 1.2s var(--ease-sanft);transform-box:fill-box}
.haus .tuer-fluegel{transform-origin:left center}
.haus .tuer-fluegel.rechts{transform-origin:right center}
.haus .schluss{fill:var(--blau)}
.haus .hausnr{font-family:var(--serif);font-size:18px;font-weight:600;fill:var(--blau)}
.haus .schild-notar rect{fill:#fff;stroke:var(--blau);stroke-width:2}
.haus .schild-notar text{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.2em;fill:var(--blau)}
.haus .laterne path{stroke:var(--blau-dd);stroke-width:2;fill:none}
.haus .laterne rect{fill:#E7EDF2;stroke:var(--blau-dd);stroke-width:1.6;transition:fill 1s}
.haus .schild-tuer rect{fill:#fff;stroke:var(--blau-dd);stroke-width:1.4}
.haus .schild-tuer .kordel{fill:none;stroke:var(--blau-dd);stroke-width:1.2}
.haus .schild-tuer text{font-family:var(--sans);font-size:7.2px;font-weight:700;letter-spacing:.04em}
.haus .t-offen{fill:#2C6E49;opacity:0}
.haus .t-zu{fill:#9C4450}
.haus .kuebel path{fill:var(--wappen)}
.haus .kuebel circle{fill:#8FA9BD}
.haus .boden{stroke:var(--blau);stroke-width:2.4;stroke-linecap:round}
.haus .bodenschatten{fill:rgba(15,47,66,.10)}
.haus .sonne{fill:#F4D48C;opacity:0;transition:opacity 1.2s}
.haus .mond{fill:#fff;stroke:var(--mittel);stroke-width:1.5;opacity:1;transition:opacity 1.2s}
/* geöffnet */
html[data-buero="offen"] .haus .fenster path:first-child,html[data-buero="offen"] .haus .fenster rect{fill:#F6D58E}
html[data-buero="offen"] .haus .schein-gruppe{opacity:1}
html[data-buero="offen"] .haus .tuer-fluegel{transform:scaleX(.18)}
html[data-buero="offen"] .haus .laterne rect{fill:#F6D58E}
html[data-buero="offen"] .haus .t-offen{opacity:1}
html[data-buero="offen"] .haus .t-zu{opacity:0}
html[data-buero="offen"] .haus .sonne{opacity:1}
html[data-buero="offen"] .haus .mond{opacity:0}
.haus .schein-gruppe ellipse{animation:flackern 5s ease-in-out infinite}
@keyframes flackern{0%,100%{opacity:1}50%{opacity:.8}}

.v3-leiste{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1480px;width:100%;margin-inline:auto;padding:0 var(--pad) clamp(20px,3vh,36px)}
.v3-leiste a{display:flex;flex-direction:column;gap:4px;padding:16px 18px 14px;border-top:2px solid var(--mittel);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);transition:border-color .3s,background .3s}
.v3-leiste a span{font-family:var(--serif);font-size:15px;letter-spacing:0;color:var(--wappen);font-weight:500}
.v3-leiste a:hover,.v3-leiste a:focus-visible{border-color:var(--blau);background:rgba(255,255,255,.7)}

/* ─── Über den Notar ────────────────────────────────────────────────── */
.v3-notar{background:#fff}
.v3-notar-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,96px);align-items:start}
.v3-portrait{position:sticky;top:calc(var(--kopf-h) + 24px);border-radius:48% 48% 6px 6px / 30% 30% 6px 6px;overflow:hidden;aspect-ratio:1103/1500;background:#58595b;box-shadow:0 40px 80px rgba(15,47,66,.18)}
.v3-portrait img{width:100%;height:100%;object-fit:cover}
.v3-lauf{list-style:none;position:relative;margin-top:8px}
.v3-lauf::before{content:"";position:absolute;left:131px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--blau),var(--mittel))}
.v3-lauf li{position:relative;display:grid;grid-template-columns:118px 1fr;gap:28px;padding:12px 0;font-size:15.5px;line-height:1.6}
.v3-lauf li::before{content:"";position:absolute;left:125px;top:20px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--blau)}
.v3-lauf .jahr{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--blau);text-align:right;line-height:1.3}
.v3-lauf li.neu::before{background:var(--licht);border-color:var(--messing);box-shadow:0 0 0 6px rgba(235,203,143,.35)}
.v3-lauf li.neu .station{font-weight:600;color:var(--blau)}
.v3-hobbys{margin-top:30px;font-size:15px;color:var(--text-soft)}
.v3-hobbys strong{color:var(--blau);margin-right:8px}

/* Aktenregal */
.v3-regal-wrap{margin-top:clamp(56px,7vw,110px)}
.v3-regal-titel{font-size:clamp(30px,3.2vw,44px);text-align:center;margin-bottom:clamp(26px,3vw,40px)}
.regal{list-style:none;display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,1.2vw,18px);min-height:330px;padding-inline:10px}
.ordner{
  position:relative;display:flex;align-items:flex-end;height:320px;padding:0;text-align:left;
  transform:translateY(0);transition:transform .45s var(--ease-sanft);
}
.ordner .ruecken{
  position:relative;width:clamp(58px,6.4vw,84px);height:100%;border-radius:4px 4px 2px 2px;
  background:linear-gradient(90deg,var(--blau-d) 0%,var(--blau) 30%,var(--blau) 70%,var(--blau-d) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 20px rgba(15,47,66,.2);
  display:flex;justify-content:center;
}
.ordner:nth-child(n) .ruecken{filter:hue-rotate(calc(var(--i) * 4deg)) brightness(calc(1 - var(--i) * .03))}
.ordner .ruecken::before{content:"";position:absolute;left:50%;bottom:28px;width:26px;height:26px;margin-left:-13px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(15,47,66,.35)}
.ordner .etikett{
  margin-top:26px;writing-mode:vertical-rl;transform:rotate(180deg);background:#FBFAF6;color:var(--blau-dd);
  font-family:var(--serif);font-size:clamp(15px,1.3vw,18px);font-weight:600;padding:12px 7px;height:226px;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(15,47,66,.12);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.ordner .info{
  position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,8px);width:230px;
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(15,47,66,.16);padding:14px 16px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;text-align:center;z-index:3;
}
.ordner .info strong{display:block;font-family:var(--serif);font-size:22px;color:var(--blau);line-height:1.15}
.ordner .info span{font-size:13.5px;color:var(--text-soft)}
.ordner:hover,.ordner:focus-visible,.ordner[aria-expanded="true"]{transform:translateY(-26px)}
.ordner:hover .info,.ordner:focus-visible .info,.ordner[aria-expanded="true"] .info{opacity:1;transform:translate(-50%,0)}
.regal-brett{height:18px;max-width:900px;margin:0 auto;background:linear-gradient(180deg,#C9B28E,#A88C63);border-radius:2px;box-shadow:0 14px 24px rgba(0,0,0,.15)}

/* ─── Tätigkeitsbereiche als Fächer ─────────────────────────────────── */
.v3-bereiche{background:linear-gradient(180deg,var(--hell-2),#fff)}
.v3-bereiche-kopf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.v3-bereiche-kopf .section-title{margin-bottom:0}
.v3-kontakt{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.faecher{display:flex;gap:10px;height:clamp(520px,68vh,680px)}
.fach{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:6px;background:var(--blau-dd);isolation:isolate;transition:flex .7s var(--ease-sanft)}
.fach.offen{flex:5.2}
.fach-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(.55) contrast(1.05);transition:filter .7s,transform 1.2s var(--ease)}
.fach::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,47,66,.35) 0%,rgba(15,47,66,.82) 60%,rgba(15,47,66,.94) 100%);transition:background .7s}
.fach.offen .fach-bild{filter:none;transform:scale(1.03)}
.fach.offen::after{background:linear-gradient(90deg,rgba(15,47,66,.95) 0%,rgba(15,47,66,.82) 45%,rgba(15,47,66,.25) 100%)}
.fach-titel button{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;padding:22px 18px;color:#fff;text-align:left;width:100%}
.fach-titel .nr{font-family:var(--serif);font-size:18px;opacity:.75}
.fach-titel .name{font-family:var(--serif);font-size:clamp(22px,1.9vw,30px);font-weight:500;line-height:1.1;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;transition:font-size .5s}
.fach.offen .fach-titel button{position:relative;inset:auto;height:auto;padding:clamp(26px,3vw,44px) clamp(26px,3vw,44px) 0;justify-content:flex-start;pointer-events:none}
.fach.offen .fach-titel .name{writing-mode:horizontal-tb;transform:none;white-space:normal;font-size:clamp(34px,3.2vw,48px)}
.fach-inhalt{position:absolute;opacity:0;visibility:hidden;transition:opacity .4s}
.fach.offen .fach-inhalt{position:relative;opacity:1;visibility:visible;transition:opacity .6s .35s}
.fach-innen{padding:14px clamp(26px,3vw,44px) clamp(26px,3vw,44px);color:#fff;max-width:560px}
.fach-innen small{display:block;font-size:13px;opacity:.8;margin-bottom:12px}
.fach-innen .liste li{font-size:15px}
.fach-innen .liste li::before{border-color:var(--licht)}
.fach-innen .dl-liste{margin-top:22px}
.fach-innen .dl-knopf{background:#fff}
.dl-liste{display:flex;flex-direction:column;gap:9px}
.dl-knopf{
  position:relative;display:flex;align-items:center;gap:14px;background:var(--hell);color:var(--blau);
  padding:13px 16px;font-size:14px;font-weight:600;line-height:1.35;overflow:hidden;isolation:isolate;
  transition:color .5s cubic-bezier(.33,1,.68,1),transform .5s cubic-bezier(.33,1,.68,1);
}
.dl-knopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--licht);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.33,1,.68,1)}
.dl-knopf:hover,.dl-knopf:focus-visible{color:var(--blau-dd);transform:translateX(3px)}
.dl-knopf:hover::before,.dl-knopf:focus-visible::before{transform:none}
.dl-knopf > svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dl-knopf > span:not(.pfeil){flex:1}
.dl-knopf small{display:inline-block;margin-left:8px;font-size:10.5px;letter-spacing:.12em;padding:2px 6px;border:1px solid currentColor;opacity:.7;vertical-align:1px}
.liste{list-style:none;display:flex;flex-direction:column;gap:8px}
.liste li{position:relative;padding-left:22px;line-height:1.55}
.liste li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width:1280px){ .v3-leiste{grid-template-columns:repeat(5,minmax(0,1fr))} .v3-leiste a{font-size:12px;padding-inline:12px} }
@media (max-width:1024px){
  .v3-hero{padding-top:var(--kopf-h);min-height:0}
  .v3-hero-grid{grid-template-columns:1fr;padding-top:32px}
  .v3-bild{order:-1;max-width:560px;width:100%;margin-inline:auto}
  .haus{max-height:none}
  .v3-marke{display:none}
  .v3-gruss{margin-top:0}
  .v3-leiste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v3-notar-grid{grid-template-columns:1fr}
  .v3-portrait{position:relative;top:0;max-width:520px;width:100%;margin-inline:auto}
  .v3-bereiche-kopf{grid-template-columns:1fr}
  .faecher{flex-direction:column;height:auto}
  .fach{flex:none!important;min-height:92px}
  .fach-titel button{position:relative;padding:24px 22px;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;min-height:92px}
  .fach-titel .name{writing-mode:horizontal-tb;transform:none;white-space:normal;font-size:26px}
  .fach.offen .fach-titel button{padding:26px 22px 0}
  .fach.offen::after{background:linear-gradient(180deg,rgba(15,47,66,.75) 0%,rgba(15,47,66,.92) 100%)}
  .fach-inhalt{display:none}
  .fach.offen .fach-inhalt{display:block}
  .fach-innen{padding:14px 22px 26px;max-width:none}
}
@media (max-width:760px){
  .regal{min-height:250px;overflow-x:auto;justify-content:flex-start;padding:60px 10px 0;scroll-snap-type:x mandatory}
  .regal li{scroll-snap-align:center}
  .ordner{height:230px}
  .ordner .etikett{height:140px;font-size:15px}
  .ordner .info{width:200px}
  .v3-lauf::before{left:9px}
  .v3-lauf li{grid-template-columns:1fr;gap:2px;padding-left:34px}
  .v3-lauf li::before{left:3px;top:17px}
  .v3-lauf .jahr{text-align:left;font-size:18px}
  .v3-zeile .fakten{flex-direction:column}
  .v3-leiste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3-leiste a:last-child{grid-column:1/-1}
}
@media (max-width:520px){
  .v3-knoepfe .btn{width:100%}
  .fach-titel .name,.fach.offen .fach-titel .name{font-size:24px}
}
@media (prefers-reduced-motion:reduce){ .haus .schein-gruppe ellipse{animation:none} }
html[data-motion="off"] .haus .schein-gruppe ellipse{animation:none}

/* ─── Villa August-Bebel-Straße 15 (ersetzt das Giebelhaus-Piktogramm) ── */
.haus .dach{fill:#4A515B}
.haus .dach-kante{stroke:#2F353C;stroke-width:3}
.haus .dach-rand{fill:none;stroke:#4A515B;stroke-width:18;stroke-linejoin:round;stroke-linecap:round}
.haus .ortgang{fill:none;stroke:#6E2F33;stroke-width:6;stroke-linejoin:round}
.haus .konsole{fill:#6E2F33;stroke:#6E2F33;stroke-width:1.5;stroke-linejoin:round}
.haus .schornstein{fill:#D9C08C;stroke:#A88C5E;stroke-width:1.5}
.haus .schiefer{fill:#56657A;stroke:#3F4A5A;stroke-width:1.5}
.haus .fachwerk-feld{fill:#FBF7EF}
.haus .balken{stroke:#6E3B2E;stroke-width:4.5;fill:none;stroke-linecap:square}
.haus .umrahmung{fill:#fff;stroke:var(--blau);stroke-width:2}
.haus .umrahmung-linie{fill:none;stroke:var(--blau);stroke-width:1.4;opacity:.55}
.haus .zier{fill:#fff;stroke:var(--blau);stroke-width:1.6}
.haus .sockel{fill:#E4E9EE;stroke:var(--blau);stroke-width:1.2;opacity:.9}
.haus .kupfer{fill:url(#kupfer);stroke:#5E8C7E;stroke-width:1.6;stroke-linejoin:round}
.haus .spitze{stroke:#5E8C7E}
.haus .spitze-k{fill:#6E9C8E}
.haus .stufen{fill:#C9D0D6;stroke:#8E9AA5;stroke-width:1}
.haus .hausnr-schild rect{fill:#fff;stroke:var(--blau-dd);stroke-width:1.2}
.haus .hausnr{font-family:var(--sans);font-size:10px;font-weight:700;fill:var(--blau-dd)}
.haus .schild-notar rect{fill:#E9D9A8;stroke:#B1722F;stroke-width:1.4}
.haus .schild-notar text{font-size:5.6px;letter-spacing:.12em;fill:#6E4A1C}
.haus .kuebel circle{fill:#9DB59A}
.haus .kupfer-linie{fill:none;stroke:#5E8C7E;stroke-width:1.1;opacity:.6}

/* ─── Straßenansicht der Villa (Turm, Walmdach, Erker, Zwerchgiebel) ─── */
.haus .ziegel{fill:url(#ziegel);stroke:#5A3429;stroke-width:1.5;stroke-linejoin:round}
.haus .schieferdach{fill:url(#schiefer-m);stroke:#3A414B;stroke-width:1.5;stroke-linejoin:round}
.haus .rinne{stroke:#3A414B;stroke-width:3.5;stroke-linecap:round}
.haus .zier-linie{stroke:var(--blau);stroke-width:1.2;opacity:.45;fill:none}
.haus .kellerfenster rect{fill:#CFD8E0;stroke:var(--blau);stroke-width:1.2}
.haus .baum-dunkel{fill:#6F8F78;opacity:.75}
.haus .schild-gold rect{fill:#D9B85C;stroke:#A8862F;stroke-width:1.2}
.haus .wappen-gold{fill:#F2D46A;stroke:#1E1E1E;stroke-width:.9}
.haus .wappen-streifen{stroke:#1E1E1E;stroke-width:1.6}
.haus .wappen-kranz{stroke:#2E8B57;stroke-width:2.4;stroke-linecap:round}
.haus .schild-gold text{font-family:var(--sans);font-size:6px;font-weight:700;letter-spacing:.12em;fill:#3A2A0C}

/* ─── Linienfassung (wie Fassung 1): nur blaue Linien auf hellen Flächen ─ */
.haus-linie .ziegel,.haus-linie .schieferdach{stroke:var(--blau);stroke-width:2.2}
.haus-linie .kupfer{fill:url(#kupfer);stroke:var(--blau);stroke-width:2}
.haus-linie .kupfer-linie{stroke:var(--blau);opacity:.45}
.haus-linie .rinne{stroke:var(--blau);stroke-width:2.6}
.haus-linie .dach-rand{stroke:var(--blau);stroke-width:3;fill:none}
.haus-linie .ortgang{stroke:var(--blau);stroke-width:2;opacity:.6}
.haus-linie .konsole{fill:#fff;stroke:var(--blau);stroke-width:1.6}
.haus-linie .balken{stroke:var(--blau);stroke-width:2.6}
.haus-linie .fachwerk-feld{fill:#fff}
.haus-linie .sockel{fill:#F2F5F8;stroke:var(--blau);stroke-width:1.4;opacity:1}
.haus-linie .kellerfenster rect{fill:#fff}
.haus-linie .stufen{fill:#fff;stroke:var(--blau);stroke-width:1.4}
.haus-linie .schild-silber rect{fill:#E6EAEE;stroke:#8C99A5;stroke-width:1.4}
.haus-linie .schild-silber .wappen-linie{fill:#fff;stroke:var(--blau);stroke-width:1}
.haus-linie .schild-silber .wappen-streifen{stroke:var(--blau);stroke-width:1.6}
.haus-linie .schild-silber .wappen-kranz{stroke:var(--wappen);stroke-width:2.2;stroke-linecap:round;opacity:.7}
.haus-linie .schild-silber text{font-family:var(--sans);font-size:6.4px;font-weight:700;letter-spacing:.12em;fill:var(--blau)}

/* ─── Feinschliff V3-Haus: immer Abendstimmung, Mond statt Sonne ───────
   Das Haus bleibt unverändert (keine leuchtenden Fenster, kein Schein).
   Nur Türschild und Tür zeigen den Stand. Außerhalb der Öffnungszeiten
   sinkt der Mond von oben rechts neben das Haus und nimmt vom Voll- zum
   Sichelmond ab; während der Öffnungszeiten ist er nicht zu sehen.      */
.haus-linie .sonne{display:none}
html[data-buero="offen"] .haus-linie .fenster path:first-child,
html[data-buero="offen"] .haus-linie .fenster rect,
html[data-buero="offen"] .haus-linie .fenster circle{fill:#CFDAE4}
html[data-buero="offen"] .haus-linie .laterne rect{fill:#E7EDF2}
.haus-linie .fenster circle{fill:#CFDAE4;stroke:var(--blau);stroke-width:2}
.haus-linie .lisene-linie{stroke:var(--blau);stroke-width:1.4;opacity:.5;fill:none}
/* Erker: blaues Dach mit Relief */
.haus-linie .kupfer{fill:var(--blau);stroke:var(--blau-dd);stroke-width:1.8}
.haus-linie .kupfer-licht{fill:#fff;opacity:.16}
.haus-linie .kupfer-linie{stroke:#fff;opacity:.35;stroke-width:1.2}
.haus-linie .spitze-erker{stroke:var(--blau-dd);stroke-width:2;stroke-linecap:round}
.haus-linie .spitze-erker-k{fill:var(--blau-dd)}
/* Mond */
.haus-linie .mond{display:none}
.haus-linie .mond-scheibe{fill:#fff;stroke:#9FB6C7;stroke-width:1.6}
.haus-linie .mond-hof{fill:#fff;opacity:.35}
.haus-linie .mond-gruppe{transition:opacity .8s var(--ease)}
html[data-buero="offen"] .haus-linie .mond-gruppe{opacity:0}
html[data-buero="zu"] .haus-linie .mond-gruppe,html[data-buero="feiertag"] .haus-linie .mond-gruppe{animation:mondSinkt 2.4s cubic-bezier(.22,1,.36,1) both}
html[data-buero="zu"] .haus-linie .mond-schatten,html[data-buero="feiertag"] .haus-linie .mond-schatten{animation:mondNimmtAb 2.6s cubic-bezier(.45,0,.2,1) 1.9s both}
.haus-linie .mond-schatten{transform:translate(22px,-11px)}
@keyframes mondSinkt{from{transform:translateY(-200px);opacity:0}25%{opacity:1}to{transform:none;opacity:1}}
@keyframes mondNimmtAb{from{transform:translate(104px,-12px)}to{transform:translate(22px,-11px)}}
@media (prefers-reduced-motion:reduce){.haus-linie .mond-gruppe,.haus-linie .mond-schatten{animation:none!important}}
html[data-motion="off"] .haus-linie .mond-gruppe,html[data-motion="off"] .haus-linie .mond-schatten{animation:none!important}
.haus-linie .gardine{fill:#fff;stroke:var(--blau);stroke-width:1.3;opacity:.95}
.haus-linie .gardine-falte{stroke:var(--blau);stroke-width:.9;opacity:.35;fill:none}

/* ═══ Überarbeitung 28.09.2026 ═══════════════════════════════════════════ */
.v3-gruss{font-size:clamp(28px,2.6vw,42px);max-width:22ch}
.v3-bild{position:relative}
/* Fachwerk kräftiger */
.haus-linie .balken{stroke:var(--blau);stroke-width:4.2;stroke-linecap:square;stroke-linejoin:miter}
.haus-linie .balken-fein{stroke:var(--blau);stroke-width:2.4;fill:none}
.haus-linie .fachwerk-feld{fill:#F7F9FB;stroke:var(--blau);stroke-width:1.2}
/* große Tür */
.haus-linie .tuer-linie{stroke:var(--blau-dd);stroke-width:1.2;fill:none;opacity:.6}
.haus-linie .schild-gross rect{fill:#fff;stroke:var(--blau-dd);stroke-width:1.6}
.haus-linie .schild-gross text{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.1em}
.haus-linie .schild-gross .kordel{stroke-width:1.5}
/* Schein nur, wenn das Licht eingeschaltet ist (Klick auf den Mond) */
html .haus.haus-linie .schein-gruppe{opacity:0;transition:opacity 1.2s var(--ease)}
html .haus.haus-linie.licht .schein-gruppe{opacity:1}
html .haus.haus-linie.licht .fenster rect,html .haus.haus-linie.licht .fenster path:first-child,html .haus.haus-linie.licht .fenster circle{fill:#F6D58E}
html .haus.haus-linie.licht .laterne rect{fill:#F6D58E}
.haus-linie .fenster rect,.haus-linie .fenster path:first-child,.haus-linie .fenster circle{transition:fill 1s var(--ease)}
/* Mond: größer, fliegt über das Haus und bleibt oben rechts stehen */
.haus-linie .mond-gruppe{cursor:pointer;outline:none}
.haus-linie .mond-gruppe:focus-visible .mond-hof{stroke:var(--blau);stroke-width:3;opacity:.9}
.haus-linie .mond-gruppe:hover .mond-hof{opacity:.6}
.haus-linie .mond-schatten{transform:translate(28px,-14px)}
html[data-buero="zu"] .haus-linie .mond-gruppe,html[data-buero="feiertag"] .haus-linie .mond-gruppe{animation:mondFlug 3.2s cubic-bezier(.33,.1,.25,1) both}
html[data-buero="zu"] .haus-linie .mond-schatten,html[data-buero="feiertag"] .haus-linie .mond-schatten{animation:mondNimmtAb2 2.6s cubic-bezier(.45,0,.2,1) 2.6s both}
@keyframes mondFlug{
  0%{transform:translate(-820px,260px);opacity:0}
  12%{opacity:1}
  40%{transform:translate(-520px,-10px)}
  70%{transform:translate(-220px,-40px)}
  100%{transform:none;opacity:1}}
@keyframes mondNimmtAb2{from{transform:translate(128px,-14px)}to{transform:translate(28px,-14px)}}
/* Vorschau-Knopf Tag/Nacht */
.tag-nacht{position:absolute;right:0;bottom:6%;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px rgba(15,47,66,.14);display:grid;place-items:center;color:var(--blau);transition:background .2s,transform .2s}
.tag-nacht:hover,.tag-nacht:focus-visible{transform:translateY(-2px);background:var(--hell)}
.tag-nacht svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.tag-nacht .tn-sonne{opacity:0}
html[data-buero="offen"] .tag-nacht .tn-sonne{opacity:1}
html[data-buero="offen"] .tag-nacht .tn-mond{opacity:0}
/* Leiste: abgestuftes Blau, markant, mit Bewegung */
.v3-leiste{gap:8px;padding-bottom:clamp(22px,3.4vh,40px)}
.v3-leiste a{position:relative;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:20px 20px;border:0;border-radius:6px;color:#fff;font-size:13px;
  background:color-mix(in srgb,var(--blau-dd) calc(100% - var(--s) * 18%),#5E93B2);box-shadow:0 10px 24px rgba(15,47,66,.14);
  transition:transform .35s var(--ease-sanft),box-shadow .35s,filter .3s}
.v3-leiste a:hover,.v3-leiste a:focus-visible{transform:translateY(-5px);box-shadow:0 18px 36px rgba(15,47,66,.26);filter:brightness(1.12);background:color-mix(in srgb,var(--blau-dd) calc(100% - var(--s) * 18%),#5E93B2)}
.v3-leiste a .pfeil{color:var(--licht)}
@supports not (background:color-mix(in srgb,red 50%,blue)){ .v3-leiste a{background:var(--blau)} }
/* Porträt: gerade Oberkante, größer */
.v3-notar-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.v3-portrait{border-radius:4px;aspect-ratio:4/4.6}
.v3-portrait img{object-position:50% 20%}
/* Aktenregal größer */
.regal{min-height:430px}
.ordner{height:400px}
.ordner .ruecken{width:clamp(78px,7.4vw,104px)}
.ordner .etikett{height:290px;font-size:clamp(20px,1.7vw,25px);padding:16px 10px}
.ordner .info{width:250px}
.regal-brett{max-width:1000px}
/* Fächer: römische Ziffern, feine Striche statt Kreise, neue Download-Knöpfe */
.fach-titel .nr{font-family:var(--serif);font-style:italic;font-size:22px;letter-spacing:.06em;color:var(--licht);opacity:1;display:inline-flex;align-items:center;gap:10px}
.fach-titel .nr::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.fach:not(.offen) .fach-titel .nr::after{display:none}
.fach-innen .liste li{padding-left:24px}
.fach-innen .liste li::before{border:0;border-radius:0;width:12px;height:1.5px;background:var(--licht);top:.78em;left:0}
.dl3-liste{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.dl3{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 12px 10px 10px;border-radius:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;transition:background .3s,border-color .3s,transform .3s}
.dl3-marke{display:grid;place-items:center;width:42px;height:48px;border-radius:4px;background:#fff;color:var(--blau);font-size:10.5px;font-weight:800;letter-spacing:.08em;
  clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%)}
.dl3-text{display:flex;flex-direction:column;min-width:0}
.dl3-titel{font-size:14.5px;font-weight:600;line-height:1.3;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.dl3-unter{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:2px}
.dl3-pfeil{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);transition:background .3s,color .3s}
.dl3-pfeil svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dl3:hover,.dl3:focus-visible{background:#fff;color:var(--blau);transform:translateX(3px)}
.dl3:hover .dl3-marke,.dl3:focus-visible .dl3-marke{background:var(--blau);color:#fff}
.dl3:hover .dl3-pfeil,.dl3:focus-visible .dl3-pfeil{background:var(--blau);color:#fff;border-color:var(--blau)}
@media (max-width:1024px){ .v3-notar-grid{grid-template-columns:1fr} .v3-leiste a{padding:16px} }
@media (max-width:760px){
  .ordner{height:300px}.regal{min-height:330px}.ordner .etikett{height:210px;font-size:19px}.ordner .ruecken{width:72px}
  .tag-nacht{width:40px;height:40px;bottom:2%}
}

/* ═══ Nachschliff 28.09. (2) ═══════════════════════════════════════════ */
.v3-hero{min-height:100vh;min-height:100svh}
/* Ortgangbrett und Knaggen */
.haus-linie .ortbrett{fill:#fff;stroke:var(--blau);stroke-width:2.2;stroke-linejoin:round}
.haus-linie .ortbrett-linie{fill:none;stroke:var(--blau);stroke-width:1;opacity:.45}
.haus-linie .knagge{fill:#fff;stroke:var(--blau);stroke-width:1.8;stroke-linejoin:round}
.haus-linie .hausnr{font-size:13px}
.haus-linie .schild-silber text{font-size:8.5px}
/* Sonne: steigt hinter dem Haus auf, Farbe wie der Mond */
.haus-linie .sonne-scheibe{fill:#fff;stroke:#9FB6C7;stroke-width:1.8}
.haus-linie .sonne-hof{fill:#fff;opacity:.4}
.haus-linie .sonne-strahlen path{stroke:#9FB6C7;stroke-width:2.2;stroke-linecap:round}
.haus-linie .sonne-gruppe{opacity:0;transform:translateY(560px);transition:opacity .6s}
html[data-buero="offen"] .haus-linie .sonne-gruppe{animation:sonneSteigt 3.4s cubic-bezier(.22,.8,.3,1) both}
html[data-buero="offen"] .haus-linie .sonne-strahlen{animation:strahlenDrehen 60s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes sonneSteigt{from{transform:translateY(560px);opacity:1}to{transform:none;opacity:1}}
@keyframes strahlenDrehen{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ html[data-buero="offen"] .haus-linie .sonne-gruppe{animation:none;transform:none;opacity:1} .haus-linie .sonne-strahlen{animation:none!important} }
html[data-motion="off"][data-buero="offen"] .haus-linie .sonne-gruppe{animation:none;transform:none;opacity:1}
/* Leiste: wieder mit Strich oben, Felder hell abgestuft unterlegt */
.v3-leiste a{border-radius:0;box-shadow:none;border-top:2px solid var(--blau);color:var(--blau);font-size:13px;padding:18px 18px 16px;
  background:color-mix(in srgb,var(--hell) calc(100% - var(--s) * 20%),#fff)}
.v3-leiste a:hover,.v3-leiste a:focus-visible{transform:translateY(-3px);filter:none;box-shadow:0 12px 26px rgba(15,47,66,.12);border-top-width:4px;padding-top:16px;
  background:color-mix(in srgb,var(--mittel) calc(100% - var(--s) * 16%),#fff)}
.v3-leiste a .pfeil{color:var(--blau)}
@supports not (background:color-mix(in srgb,red 50%,blue)){ .v3-leiste a{background:var(--hell)} }
/* Hero mittig statt unten ausgerichtet, Begrüßung zweizeilig */
.v3-hero{justify-content:center}
.v3-hero-grid{flex:0 1 auto;align-items:center;margin-block:auto}
.v3-bild{align-self:center}
.v3-gruss span{display:block}
.v3-gruss{max-width:none}

/* ═══ 28.09. (3) ═══ */
/* Hero: Inhalt + Leiste gemeinsam mittig, Leiste direkt unter dem Haus */
.v3-hero{justify-content:center;padding-block:clamp(20px,4vh,48px)}
.v3-hero-grid{margin-block:0;padding-bottom:clamp(8px,2vh,20px)}
.v3-leiste{margin-top:0;padding-bottom:0}
/* Anschrift links, Telefon und E-Mail rechts untereinander */
.v3-zeile .fakten{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:6px 36px;justify-content:start}
.v3-zeile .fakt:first-child{grid-row:1/span 2}
/* Werdegang: Laufpunkt */
.v3-lauf-wrap{position:relative}
.v3-lauf li.leuchtet .station{color:var(--blau);font-weight:700}
.v3-lauf li.leuchtet::before{background:var(--licht);border-color:var(--messing);box-shadow:0 0 0 8px rgba(235,203,143,.35)}
.v3-kontakt{margin-top:18px}
@media (max-width:760px){ .v3-zeile .fakten{grid-template-columns:1fr} .v3-zeile .fakt:first-child{grid-row:auto} }
/* 28.09. (4): Verlauf immer wie abends; Inhalt wieder unten ausgerichtet; Leiste kontrastreicher und höher */
.v3-hero,html[data-buero="offen"] .v3-hero,html[data-buero="zu"] .v3-hero,html[data-buero="feiertag"] .v3-hero{background:linear-gradient(180deg,#DCE4EC 0%,#EEF2F5 62%,#fff 100%)}
.v3-hero{justify-content:flex-start;padding-block:0}
.v3-hero-grid{flex:1;margin-block:0;padding-bottom:0}
.v3-leiste{margin-top:clamp(36px,6vh,64px);padding-bottom:clamp(36px,6vh,64px)}
.v3-leiste a{min-height:66px;padding:22px 20px 20px;align-items:center;color:var(--blau);
  background:color-mix(in srgb,var(--mittel) calc(100% - var(--s) * 14%),#fff);border-top:2px solid var(--blau)}
.v3-leiste a:hover,.v3-leiste a:focus-visible{background:var(--blau);color:#fff;border-top-color:var(--blau-dd);border-top-width:2px;padding-top:22px;transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,47,66,.22)}
.v3-leiste a:hover .pfeil,.v3-leiste a:focus-visible .pfeil{color:#fff}
@supports not (background:color-mix(in srgb,red 50%,blue)){ .v3-leiste a{background:var(--mittel)} }