/* Kom21 v2 – Richtung „Schichtenmodell“ (Seed b0be9c1d). Modelltisch dunkel, Karton hell, Platten mit Kante, Acryl als aktive Lage. */
@font-face{font-family:Archivo;src:url(/fonts/archivo-75-112-wght500-700.woff2) format("woff2");font-weight:500 700;font-stretch:75% 112%;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/fonts/public-sans-sub-wght.woff2) format("woff2");font-weight:100 900;font-display:swap}
@property --p{syntax:"<number>";inherits:true;initial-value:0}
@property --lift{syntax:"<length>";inherits:true;initial-value:0px}

:root{
  --tisch:#101820; --tisch-2:#17232e; --tisch-3:#1f2e3b; --tisch-linie:#2a3a48; --licht:#e8eef3; --licht-2:#a3b3c1;
  --karton:#eef1f4; --platte:#ffffff; --kante:#c5cdd5; --kante-dunkel:#8e9aa6;
  --tusche:#15202a; --tusche-2:#4a5866; --linie:#cfd7de; --linie-fein:#e3e8ed; --feld-rand:#7d8a96;
  --acryl:#006fb7; --acryl-tief:#00528f; --acryl-licht:#4aa6ff; --acryl-hauch:#e3eef8;
  --platzhalter-rand:#b08a1e; --platzhalter-grund:#fffaf0; --platzhalter-text:#5b4a12;
  --rand:clamp(1rem,4vw,3.5rem); --mass:76rem; --text:42rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --schrift:"Public Sans",system-ui,sans-serif; --plan:Archivo,"Public Sans",sans-serif;
  --plattenschatten:0 30px 50px -30px rgba(21,32,42,.45);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem;scrollbar-color:var(--kante-dunkel) var(--karton);background:var(--tisch)}
body{caret-color:var(--acryl);font-family:var(--schrift);font-size:1.0625rem;line-height:1.6;color:var(--tusche);background:var(--karton)}
::selection{background:var(--acryl);color:#fff}
a{color:var(--acryl);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--acryl-tief);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--acryl);outline-offset:3px;border-radius:2px}
.dunkel :focus-visible,.kopf :focus-visible,.fuss :focus-visible{outline-color:var(--acryl-licht)}
img,svg,video{display:block;max-width:100%}
img{height:auto}
address{font-style:normal}
.zahl{font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--acryl);color:#fff;padding:.6rem 1rem;z-index:60;text-decoration:none}
.skip:focus{top:1rem;color:#fff}
.etikett,.kopfschrift{font:600 .8rem/1.25 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2)}

/* Überschriften: Archivo breit */
h1,h2,h3{font-family:var(--plan);font-weight:640;line-height:1.06;letter-spacing:-.025em;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,5.2vw,4.4rem);font-stretch:112%;letter-spacing:-.032em}
h2{font-size:clamp(1.75rem,3.4vw,2.7rem);font-stretch:108%}
h3{font-size:1.22rem;font-stretch:100%;letter-spacing:-.01em;line-height:1.2}
.lead{font-size:clamp(1.08rem,1.5vw,1.25rem);color:var(--tusche-2);max-width:38rem;text-wrap:pretty}
.text{max-width:var(--text)}
.text > * + *{margin-top:1rem}
.text h2{margin-top:3.2rem}
.text h3{margin-top:2.2rem}
.text ul,.text ol{padding-left:1.2rem}
.text li + li{margin-top:.35rem}
.quelle{font-size:.84rem;color:var(--tusche-2);margin-top:.7rem;line-height:1.45}

/* Demo-Hinweis */
.hinweis{background:#fff8e0;border-bottom:1px solid #ecd9a0;font-size:.85rem;text-align:center;padding:.5rem 1rem;color:#4d3e0c;position:relative;z-index:31}

/* Kopfzeile: Kante des Modelltischs */
.kopf{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--tisch) 93%,transparent);backdrop-filter:saturate(1.3) blur(12px);color:var(--licht);border-bottom:1px solid var(--tisch-linie)}
.kopf-in{max-width:calc(var(--mass) + 2*var(--rand));margin:auto;padding:.75rem var(--rand);display:flex;align-items:center;gap:1.6rem;position:relative}
.marke{display:flex;align-items:center;text-decoration:none;flex:none;color:var(--licht)}
.marke svg{width:124px;height:auto}
.nav-wrap{margin-left:auto}
.nav{display:flex;gap:1.4rem;list-style:none;padding:0;align-items:center}
.nav a{color:var(--licht-2);text-decoration:none;font-size:.95rem;padding:.4rem 0;position:relative;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acryl-licht);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--licht)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--licht);font-weight:600}
.menue-knopf{display:none}
.knopf{display:inline-flex;align-items:center;gap:.55rem;font:600 .97rem/1 var(--schrift);padding:.9rem 1.25rem;border-radius:3px;text-decoration:none;border:0;cursor:pointer;transition:background-color .25s,color .25s,box-shadow .35s var(--ease),transform .35s var(--ease)}
.knopf:hover{text-decoration:none}
.knopf svg{width:16px;height:16px;flex:none}
.knopf-voll{background:var(--acryl);color:#fff;box-shadow:inset 0 -2px 0 var(--acryl-tief)}
.knopf-voll:hover{background:var(--acryl-tief);color:#fff;box-shadow:inset 0 -2px 0 #003a66,0 10px 24px -12px rgba(0,111,183,.8);transform:translateY(-1px)}
.knopf-linie{color:var(--tusche);background:transparent;box-shadow:inset 0 0 0 1px var(--feld-rand)}
.knopf-linie:hover{box-shadow:inset 0 0 0 1px var(--acryl);color:var(--acryl)}
.dunkel .knopf-linie{color:var(--licht);box-shadow:inset 0 0 0 1px #4d6274}
.dunkel .knopf-linie:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--acryl-licht)}
.knopf-hell{background:#fff;color:var(--acryl-tief)}
.knopf-hell:hover{background:var(--acryl-hauch);color:var(--acryl-tief)}
.kopf .knopf{padding:.72rem 1rem}

/* Dunkle Bühne (Modelltisch) */
.dunkel{background:var(--tisch);color:var(--licht);position:relative}
.dunkel .lead,.dunkel p{color:var(--licht-2)}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel b,.dunkel strong{color:var(--licht)}
.dunkel a:not(.knopf){color:var(--acryl-licht)}
.dunkel a:not(.knopf):hover{color:#8cc6ff}
.dunkel .quelle,.dunkel .etikett,.dunkel .kopfschrift{color:var(--licht-2)}
.tischlicht{background:radial-gradient(110% 80% at 72% 38%,#1c2b38 0,var(--tisch) 62%)}
/* Schnittkante: Übergang vom Tisch auf den Karton, 6 px Plattenkante */
.schnitt{position:relative}
.schnitt::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:#0a1016;z-index:2}

/* Abschnitte */
.blatt{position:relative;max-width:calc(var(--mass) + 2*var(--rand));margin:auto;padding:clamp(3.8rem,8.5vw,7rem) var(--rand)}
.blatt + .blatt{padding-top:0}
.vollbreit{max-width:none;padding-left:0;padding-right:0}
.innen{max-width:calc(var(--mass) + 2*var(--rand));margin:auto;padding-left:var(--rand);padding-right:var(--rand)}
.dunkel.blatt,.dunkel .blatt{padding-top:clamp(3.8rem,8.5vw,7rem)}
.blattkopf{height:0;margin:0}

/* Platte: weißer Karton mit sichtbarer Kante */
.platte{background:var(--platte);border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.dunkel .platte{border-bottom-color:#0a1016;box-shadow:0 34px 60px -30px #000}

/* Seitenkopf der Unterseiten: Tisch mit Lagenmarke */
.kopfblatt{padding-top:clamp(2.8rem,6vw,4.8rem);padding-bottom:clamp(3rem,6vw,4.8rem)}
.seitenkopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.seitenkopf h1{margin-bottom:1.1rem;font-size:clamp(2.1rem,4.4vw,3.7rem)}
.seitenkopf .massband{margin-top:2rem}
.kopf-zusatz .randkasten{background:var(--tisch-2);border:1px solid var(--tisch-linie);color:var(--licht)}
.kopf-zusatz .randkasten small{color:var(--licht-2)}
.kopf-zusatz .randkasten a{color:var(--acryl-licht)}
.kopf-zusatz .randkasten p,.kopf-zusatz .randkasten li{color:var(--licht)}

/* Lagenmarke: Seitenplan als Plattenstapel, aktuelle Seite ist die beleuchtete Acrylplatte */
.lagenmarke{position:relative;justify-self:center;width:min(100%,25rem);aspect-ratio:1.15;perspective:1400px}
.lagenmarke .stapel{position:absolute;inset:8% 6% 6% 4%;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-36deg)}
.lagenmarke .lp{position:absolute;inset:18% 12%;background:#d9e0e6;transform:translateZ(calc(var(--i)*22px));box-shadow:0 0 0 1px rgba(10,16,22,.35)}
.lagenmarke .lp::after{content:"";position:absolute;left:0;right:0;top:100%;height:5px;background:#5b6a77;transform:rotateX(-90deg);transform-origin:top}
.lagenmarke .lp:nth-child(odd){background:#c7d0d8}
.lagenmarke .lp.ist{background:rgba(0,111,183,.30);box-shadow:0 0 0 1.5px var(--acryl-licht),0 0 34px rgba(74,166,255,.45);transform:translateZ(calc(var(--i)*22px + 34px)) translateX(18%)}
.lagenmarke .lp.ist::after{background:var(--acryl)}
.lagenmarke .lp-name{position:absolute;right:0;bottom:4%;font:600 .78rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--acryl-licht);display:flex;align-items:center;gap:.6rem}
.lagenmarke .lp-name::before{content:"";width:2.4rem;height:1px;background:currentColor}

/* Unterseiten-Raster */
.unter-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.randspalte{position:sticky;top:6.5rem;display:grid;gap:1.5rem}
.randkasten{background:var(--platte);border-bottom:4px solid var(--kante);padding:1.25rem 1.35rem;box-shadow:0 18px 34px -26px rgba(21,32,42,.4)}
.randkasten small{display:block;font:600 .8rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2);margin-bottom:.6rem}
.randkasten ul{list-style:none;padding:0;display:grid;gap:.45rem;font-size:.95rem}
.randkasten .knopf{margin-top:1rem}

/* Platzhalter: leerer Plattenplatz, gelb markiert */
.platzhalter{border:1.5px dashed var(--platzhalter-rand);background:var(--platzhalter-grund);color:var(--platzhalter-text);padding:1rem 1.15rem;font-size:.95rem;max-width:var(--text)}
.platzhalter b{font:700 .8rem/1.2 var(--plan);font-stretch:80%;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:.25rem}
.platzhalter-inline{display:inline-block;border:1px dashed var(--platzhalter-rand);background:var(--platzhalter-grund);color:var(--platzhalter-text);font:600 .8rem/1.4 var(--plan);font-stretch:85%;letter-spacing:.03em;padding:.05rem .4rem}
.dunkel .platzhalter{background:#2b2612;color:#f3e3a6;border-color:#c9a43a}

/* Startseite: Modelltisch */
.start{min-height:min(100svh - 4.4rem,58rem);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(5rem,9vw,7rem)}
.start h1{margin:0 0 1.4rem;max-width:11ch}
.start .lead{margin-bottom:2.2rem;max-width:34rem}
.aktionen{display:flex;flex-wrap:wrap;gap:.8rem}
.start-fakten{position:absolute;left:var(--rand);right:var(--rand);bottom:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;border-top:1px solid var(--tisch-linie);padding-top:.9rem;font:600 .8rem/1.35 var(--plan);font-stretch:80%;letter-spacing:.07em;text-transform:uppercase;color:var(--licht-2)}
.start-fakten b{display:block;font:640 1.05rem/1.2 var(--plan);font-stretch:100%;letter-spacing:0;text-transform:none;color:var(--licht)}
.start-wrap{max-width:calc(var(--mass) + 2*var(--rand));margin:auto;padding:0 var(--rand);position:relative}

/* Vergleich Karte/Luftbild (Vorher/Nachher) */
.vergleich-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.kartenblatt{position:relative;container-type:inline-size;background:var(--platte);padding:12px;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.rahmen{position:relative;aspect-ratio:1.6;overflow:hidden;touch-action:pan-y;background:#dfe5ea}
.bild{position:absolute;inset:0}
.rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rahmen .oben img{clip-path:inset(0 0 0 var(--x,50%))}
.schieber,.griff{display:none}
.js .schieber{display:block}.js .griff{display:block}
.schieber{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.griff{position:absolute;top:0;bottom:0;left:var(--x,50%);width:0;z-index:2;pointer-events:none}
.griff::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 .5px rgba(21,32,42,.4)}
.griff span{position:absolute;top:50%;left:0;translate:-50% -50%;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(21,32,42,.35);display:grid;place-items:center;transition:scale .3s var(--ease)}
.griff svg{width:18px;height:18px;color:var(--acryl)}
.schieber:focus-visible + .griff span{outline:3px solid var(--acryl);outline-offset:3px}
.schieber:hover + .griff span{scale:1.08}
.kartenblatt .etikett{position:absolute;bottom:12px;z-index:2;background:rgba(255,255,255,.95);color:var(--tusche);padding:.42rem .58rem;pointer-events:none}
.kartenblatt .etikett.l{left:12px}.kartenblatt .etikett.r{right:12px}
.nordpfeil{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(21,32,42,.3))}
.plankopf{display:grid;grid-template-columns:1.25fr 1.15fr 1.5fr .8fr;margin-top:14px;font-size:.82rem;border-top:1px solid var(--linie)}
.plankopf > div{white-space:nowrap;padding:.55rem .7rem .2rem;border-left:1px solid var(--linie-fein)}
.plankopf > div:first-child{border-left:0;padding-left:0}
.plankopf small{display:block;font:600 .8rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2)}
.massstab{display:flex;align-items:center;gap:.4rem}
.massstab i{display:inline-block;height:6px;width:calc(100cqw * 200 / 1201);border:1px solid var(--tusche);background:linear-gradient(90deg,var(--tusche) 50%,#fff 50%)}

/* Fachschalen-Legende: Lagen, die aktive leuchtet */
.fach-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.legende{list-style:none;padding:0;columns:2;column-gap:1.6rem;margin-top:1.8rem}
.legende li{break-inside:avoid}
.legende a{box-sizing:border-box;width:100%;display:grid;grid-template-columns:24px 1fr;gap:.7rem;align-items:center;padding:.5rem .55rem;color:var(--tusche-2);text-decoration:none;transition:color .25s,background-color .25s,box-shadow .25s;font-size:.96rem;line-height:1.3;min-height:44px}
.legende a:hover{color:var(--tusche);background:var(--platte)}
.legende a[aria-pressed="true"]{color:var(--tusche);background:var(--acryl-hauch);box-shadow:inset 0 0 0 1.5px var(--acryl)}
.legende a[aria-pressed="true"] span{font-weight:600}
.legende svg{width:22px;height:14px;opacity:.55;transition:opacity .25s;color:var(--acryl)}
.legende a:hover svg,.legende a[aria-pressed="true"] svg{opacity:1}
.fach-detail{background:var(--platte);padding:clamp(1.2rem,2.6vw,2rem);border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten);view-transition-name:fachdetail;min-height:26rem;position:relative}

.fach-detail h3{font-size:1.5rem;margin:0 0 .35rem;font-stretch:106%}
.fach-detail .kopfschrift{display:block;margin-bottom:.8rem}
.fach-detail p{color:var(--tusche-2);max-width:36rem}
.fach-detail figure{margin-top:1.2rem}
.fach-detail figure img{width:100%;aspect-ratio:1.6;object-fit:cover;outline:1px solid var(--linie)}
.fach-detail .weiter{display:inline-block;margin-top:1rem;font-weight:600}
::view-transition-old(fachdetail),::view-transition-new(fachdetail){animation-duration:.4s;animation-timing-function:var(--ease)}

/* Maßkette: Vorgehen */
.masskette{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:1.4rem}
.masskette::before{content:"";position:absolute;left:0;right:0;top:2.1rem;height:2px;background:var(--acryl);transform-origin:0 50%}
.abschnitt{position:relative;padding:0 1.4rem 0 0}
.abschnitt::before{content:"";position:absolute;left:0;top:1.5rem;width:2px;height:1.3rem;background:var(--acryl)}
.abschnitt:last-child::after{content:"";position:absolute;right:0;top:1.5rem;width:2px;height:1.3rem;background:var(--acryl)}
.masswert{font:640 1.15rem/1 var(--plan);font-stretch:96%;color:var(--acryl);padding-left:.7rem;height:1.6rem;display:flex;align-items:end;font-variant-numeric:tabular-nums}
.abschnitt h3{margin:1.5rem 0 .5rem;padding-left:.7rem}
.abschnitt p{font-size:.96rem;color:var(--tusche-2);padding-left:.7rem;max-width:18rem}

/* Planverzeichnis */
.verzeichnis{width:100%;border-collapse:collapse;font-size:.96rem;background:var(--platte);border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.verzeichnis caption{text-align:left}
.verzeichnis th{font:600 .8rem/1 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2);text-align:left;padding:1rem .9rem .8rem;border-bottom:1px solid var(--tusche)}
.verzeichnis td,.verzeichnis tbody th{padding:.9rem .9rem;border-bottom:1px solid var(--linie-fein);vertical-align:top}
.verzeichnis tbody th{font:600 .96rem/1.5 var(--schrift);letter-spacing:0;text-transform:none;color:var(--tusche);white-space:nowrap}
.verzeichnis tbody tr{transition:background-color .25s}
.verzeichnis tbody tr:hover{background:var(--acryl-hauch)}

/* Referenzen */
.ref-liste{list-style:none;padding:0;display:grid;gap:0;margin-top:1rem}
.ref{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1rem,3vw,3rem);padding:1.7rem 0;border-top:1px solid var(--linie)}
.ref:last-child{border-bottom:1px solid var(--linie)}
.ref h2{font-size:1.35rem;font-stretch:100%;letter-spacing:-.01em}
.ref dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;margin-top:.7rem;font-size:.9rem}
.ref dt{font:600 .8rem/1.9 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2)}
.ref .absatz + .absatz{margin-top:.7rem}
.ref .absatz{color:var(--tusche-2);max-width:44rem}

/* Fachschalen-Seite */
.fach-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.4rem,4vw,3.8rem) clamp(1.5rem,3vw,2.6rem);list-style:none;padding:0}
.fach-karte{scroll-margin-top:6.5rem}
.fach-karte figure{background:var(--platte);padding:10px;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.fach-karte figure:hover{transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--acryl),0 36px 56px -30px rgba(0,82,143,.5)}
.fach-karte figure a{display:block}
.fach-karte figure img{width:100%;aspect-ratio:1.6;object-fit:cover;outline:1px solid var(--linie-fein)}
.fach-karte .kopfzeile{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.fach-karte .kopfzeile svg{width:22px;height:14px;color:var(--acryl)}
.fach-karte .kopfschrift{display:block;margin-bottom:.8rem}
.fach-karte p{color:var(--tusche-2);margin-top:.9rem}
.fach-karte figcaption{font-size:.82rem;color:var(--tusche-2);margin-top:.5rem}
.fach-ohne{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.8rem 1.2rem;margin-top:1.2rem}
.fach-ohne li{display:grid;grid-template-columns:22px 1fr;gap:.7rem;align-items:center;padding:.8rem .9rem;border:1.5px dashed var(--platzhalter-rand);background:var(--platzhalter-grund)}
.fach-ohne svg{width:22px;height:14px;color:var(--acryl)}

/* Listen */
.punktliste{position:relative;list-style:none;padding:0!important;display:grid;gap:0;max-width:var(--text)}
.punktliste li{display:grid;grid-template-columns:2.6rem 1fr;padding:.75rem 0;border-top:1px solid var(--linie)}
.punktliste li + li{margin-top:0!important}
.punktliste li:last-child{border-bottom:1px solid var(--linie)}
.punktliste .z{font:640 .86rem/1.85 var(--plan);font-stretch:90%;color:var(--acryl)}
.formate{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0!important;margin-top:1rem}
.formate li{font:640 .84rem/1 var(--plan);font-stretch:88%;letter-spacing:.04em;padding:.55rem .7rem;background:var(--platte);border-bottom:3px solid var(--kante);margin:0!important}
.schlagworte{display:flex;flex-wrap:wrap;gap:.4rem .45rem;list-style:none;padding:0!important;margin-top:.8rem}
.schlagworte li{font-size:.88rem;background:var(--platte);color:var(--tusche);padding:.3rem .6rem;border-bottom:2px solid var(--kante);margin:0!important}

/* Zeitachse (Über uns, Start): drei gleich gebaute Marken, Abstände proportional zu den Jahren */
.zeitachse{position:relative;margin-top:2.6rem}
.zeitachse ol{list-style:none;padding:0;display:grid;grid-template-columns:minmax(11rem,4fr) minmax(13rem,23fr) minmax(15rem,auto);position:relative}
.zeitachse ol::before{content:"";position:absolute;left:0;right:0;top:2.35rem;height:2px;background:var(--acryl);transform-origin:0 50%}
.zeitachse li{position:relative;padding-top:3.2rem;padding-right:1.4rem;max-width:17rem}
.zeitachse li::before{content:"";position:absolute;left:0;top:1.85rem;width:2px;height:1.1rem;background:var(--acryl)}
.zeitachse li:last-child{text-align:right;padding-right:0;justify-self:end}
.zeitachse li:last-child::before{left:auto;right:0}
.zeitachse .jahr{position:absolute;top:0;font:640 1.6rem/1 var(--plan);font-stretch:104%;color:var(--acryl)}
.zeitachse li:last-child .jahr{right:0}
.zeitachse b{display:block;font-weight:600;line-height:1.35}
.zeitachse p{color:var(--tusche-2);font-size:.95rem;margin-top:.3rem}

/* Kontakt: Acrylplatte in Kom21-Blau */
.kontakt{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);background:var(--acryl);color:#fff;border-bottom:6px solid var(--acryl-tief);box-shadow:0 40px 70px -36px rgba(0,82,143,.75);position:relative;overflow:hidden}
.kontakt::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 40%);pointer-events:none}
.kontakt > div{padding:clamp(1.5rem,3vw,2.4rem);position:relative}
.kontakt > div + div{border-left:1px solid rgba(255,255,255,.28)}
.kontakt h2{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.9rem}
.kontakt p{color:#eef5fb;max-width:30rem}
.kontakt small{display:block;font:600 .8rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:#d7e8f7;margin-bottom:.5rem}
.kontakt a:not(.knopf){color:#fff}
.kontakt a.gross{font:640 1.4rem/1.2 var(--plan);font-stretch:100%;text-decoration:none}
.kontakt a.gross:hover{text-decoration:underline}
.kontakt .knopf-hell{margin-top:1.5rem}
.kontakt :focus-visible{outline-color:#fff}

/* Formular */
.formular{display:grid;gap:1.1rem;background:var(--platte);border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten);padding:clamp(1.3rem,3vw,2.2rem)}
.formular fieldset{border:0;padding:0;display:grid;gap:1.1rem;min-width:0}
.formular legend{font:600 .8rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2);margin-bottom:.4rem;padding:0}
.feld{display:grid;gap:.35rem}
.feld label{font-weight:600;font-size:.95rem}
.feld .pflicht{color:var(--tusche-2);font-weight:400;font-size:.85rem}
.feld input,.feld textarea{font:inherit;font-size:1rem;color:var(--tusche);background:#fff;border:1px solid var(--feld-rand);border-radius:2px;padding:.7rem .8rem;width:100%}
.feld textarea{min-height:9rem;resize:vertical}
.feld input:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--acryl);outline-offset:1px;border-color:var(--acryl)}
.feld [aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.check{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.92rem;color:var(--tusche-2)}
.check input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--acryl)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular[aria-disabled="true"] .feld input,.formular[aria-disabled="true"] .feld textarea{background:#f1f3f5}
.meldung{padding:.9rem 1.1rem;border:1px solid #b9d3ea;background:var(--acryl-hauch)}
.meldung.fehler{border-color:#e3a49f;background:#fdecea;color:#5c1410}

/* Lagekarte Kontakt */
.lagekarte{position:relative;background:var(--platte);padding:10px;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.lagekarte .rahmen{aspect-ratio:1.5}
.lagekarte svg.marke-ort{position:absolute;left:50%;top:50%;width:46px;height:46px;translate:-50% -88%;z-index:2;filter:drop-shadow(0 3px 6px rgba(21,32,42,.45))}

/* Fußzeile: Tisch */
.fuss{background:var(--tisch);color:var(--licht-2);border-top:6px solid #0a1016}
.fuss-in{max-width:calc(var(--mass) + 2*var(--rand));margin:auto;padding:3rem var(--rand) 3rem;display:grid;grid-template-columns:1.2fr 1fr 1.7fr;gap:2.4rem;font-size:.86rem}
.fuss h2{font:600 .8rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--licht-2);margin-bottom:.7rem}
.fuss ul{list-style:none;padding:0;display:grid;gap:.3rem}
.fuss a{color:var(--licht)}
.fuss a:hover{color:#fff}
.fuss .claim{font:600 1rem/1.3 var(--plan);font-stretch:96%;color:var(--licht);margin-top:1rem}
.fuss .marke svg{width:112px;margin-bottom:1rem}

/* Abstands-Helfer (CSP ohne 'unsafe-inline') */
.o0{margin-top:0!important}.o09{margin-top:.9rem}.o1{margin-top:1rem}.o15{margin-top:1.5rem}.o2{margin-top:2rem}.o25{margin-top:2.5rem}.o4{margin-top:4rem}
.u1{margin-bottom:1rem}.u2{margin-bottom:2rem}.u25{margin-bottom:2.5rem}.b40{max-width:40rem}.fs125{font-size:1.25rem}.fw6{font-weight:600}
address a{display:inline-block;padding:.3rem 0;min-height:24px}
.fuss ul a{display:inline-block;padding:.2rem 0}

/* Mobil */
@media (max-width:1080px){
  .js .nav{display:none}
  .nav{flex-wrap:wrap;gap:.2rem 1rem}
  .js .nav.offen{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--tisch);border-bottom:6px solid #0a1016;padding:.5rem var(--rand) 1rem;box-shadow:0 26px 40px -24px #000}
  .js .nav.offen a{display:block;padding:.85rem 0;border-bottom:1px solid var(--tisch-linie)}
  .js .nav.offen a::after{display:none}
  .js .menue-knopf{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;font:600 .95rem var(--schrift);padding:.6rem .85rem;cursor:pointer;background:none;border:1px solid #4d6274;border-radius:3px;color:var(--licht);min-height:44px}
  .kopf .knopf-voll{display:none}
  .kopf-in{flex-wrap:wrap;column-gap:0}
  .js .nav-wrap{margin-left:0}
}
@media (max-width:900px){
  .start,.fach-raster,.seitenkopf,.unter-raster,.vergleich-raster{grid-template-columns:minmax(0,1fr)}
  .start{min-height:0;padding-bottom:8rem}
  .randspalte{position:static}
  .lagenmarke{width:min(70%,17rem);justify-self:start;margin-top:-.5rem}
  .masskette{grid-template-columns:1fr 1fr;row-gap:2.4rem}
  .masskette::before{display:none}
  .abschnitt::after{content:"";position:absolute;left:0;right:1.4rem;top:2.1rem;height:2px;background:var(--acryl)}
  .kontakt{grid-template-columns:1fr 1fr}
  .kontakt > div:first-child{grid-column:1/-1}
  .kontakt > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.28)}
  .kontakt > div:nth-child(3){border-left:1px solid rgba(255,255,255,.28)}
  .fuss-in{grid-template-columns:1fr 1fr}
  .fuss-in > :last-child{grid-column:1/-1}
  .plankopf{grid-template-columns:1fr 1fr}
  .plankopf > div:nth-child(3){border-left:0;padding-left:0}
  .plankopf > div:nth-child(n+3){border-top:1px solid var(--linie-fein)}
  .fach-liste{grid-template-columns:1fr}
  .ref{grid-template-columns:1fr}
}
@media (max-width:560px){
  .legende{columns:1}
  .verzeichnis .land{display:none}   /* mobil: Auftraggeber und Leistung (Einwohner entfallen seit 01.11.2026) */
  .verzeichnis tbody th{white-space:normal}
  .kontakt,.fuss-in,.feld-reihe{grid-template-columns:1fr}
  .kontakt > div:nth-child(3){border-left:0}
  .masskette{grid-template-columns:1fr}
  .plankopf{font-size:.78rem}
  .marke svg{width:108px}
  .start-fakten{position:static;margin-top:2.6rem}
  .start{padding-bottom:2.4rem}
  .zeitachse ol{grid-template-columns:1fr;row-gap:1.4rem}
  .zeitachse ol::before{display:none}
  .zeitachse li:last-child{text-align:left;justify-self:start}
  .zeitachse li:last-child::before{left:0;right:auto}
  .zeitachse li:last-child .jahr{right:auto}
}
@media print{
  .kopf,.hinweis,.schieber,.griff,.skip,.menue-knopf,video,.lagenmarke{display:none!important}
  body,.dunkel,.fuss{background:#fff!important;color:#000!important}
  .dunkel *{color:#000!important}
  body{font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}
.logo-text{font-family:var(--plan);font-stretch:82%;font-weight:620}
.lagenmarke .i0{--i:0}.lagenmarke .i1{--i:1}.lagenmarke .i2{--i:2}.lagenmarke .i3{--i:3}.lagenmarke .i4{--i:4}.lagenmarke .i5{--i:5}.lagenmarke .i6{--i:6}.lagenmarke .i7{--i:7}

/* Startseite: Modell (Video der Ebenen-Explosion oder Plattenstapel als Ersatz) */
.modell{position:relative;aspect-ratio:16/11;width:100%}
.modell video,.modell .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modell .poster{position:absolute;inset:0}
.modell-stapel{position:absolute;inset:0;perspective:1800px}
.modell-stapel .ml{position:absolute;left:9%;top:30%;width:74%;aspect-ratio:1.6;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-34deg) translateZ(calc(var(--i)*var(--abstand,64px)))}
.modell-stapel .ml img{width:100%;height:100%;object-fit:cover;display:block}
.modell-stapel .ml::after{content:"";position:absolute;left:0;right:0;top:100%;height:7px;background:#0a1016;transform:rotateX(-90deg);transform-origin:top}
.modell-stapel .ml.m0{--i:0;box-shadow:0 40px 70px -20px #000}.modell-stapel .ml.m1{--i:1}.modell-stapel .ml.m2{--i:2}
.modell-stapel .ml.m3{--i:3.35;background:rgba(0,111,183,.16);box-shadow:0 0 0 1.5px var(--acryl-licht),0 0 44px rgba(74,166,255,.38)}
.modell-stapel .ml.m3::after{background:var(--acryl)}
.modell-stapel .ml svg{width:100%;height:100%}
.modell-etiketten{position:absolute;right:0;top:0;bottom:0;list-style:none;padding:0;pointer-events:none}
.modell-etiketten li{position:absolute;right:0;display:flex;align-items:center;gap:.6rem;white-space:nowrap;font:600 .8rem/1 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--licht-2);transition:color .5s var(--ease)}
.modell-etiketten li::before{content:"";width:2.6rem;height:1px;background:#4d6274;transition:background-color .5s var(--ease)}
.modell-etiketten .e4{top:12%}.modell-etiketten .e3{top:33%}.modell-etiketten .e2{top:49%}.modell-etiketten .e1{top:65%}
.modell-etiketten li.an{color:var(--licht)}
.modell-etiketten li.an::before{background:var(--licht-2)}
.modell-etiketten li.e4.an{color:var(--acryl-licht)}
.modell-etiketten li.e4.an::before{background:var(--acryl-licht)}
.modell-steuerung{position:absolute;left:0;bottom:0;z-index:3;display:none;align-items:center;gap:.5rem;font:600 .82rem/1 var(--schrift);color:var(--licht);background:rgba(16,24,32,.82);border:1px solid #4d6274;border-radius:3px;padding:.55rem .75rem;min-height:40px;cursor:pointer}
.modell-steuerung svg{width:14px;height:14px}
.modell.hat-video .modell-steuerung{display:inline-flex}
.modell-steuerung:hover{border-color:var(--acryl-licht)}
.modell-quelle{position:absolute;left:0;right:0;bottom:-2.6rem;font-size:.74rem;color:var(--licht-2);text-align:right}
@media (max-width:900px){.modell{margin-top:1rem}.modell-quelle{position:static;margin-top:.6rem;text-align:left}}
.modell video{opacity:0;transition:opacity .5s var(--ease)}.modell.spielt video{opacity:1}
:root{--schrift-text:var(--schrift);--schrift-plan:var(--plan)}
.kanal-raster{display:grid;gap:2.4rem}.kanal-raster > div:first-child{max-width:44rem}
/* Feinschliff Runde 1 */
h1{hyphens:manual}
.start h1{font-size:clamp(2.3rem,4.6vw,4.1rem);max-width:12.5ch}
.modell-quelle{bottom:-3.2rem;font-size:.72rem;text-align:left;line-height:1.4}
.digital-spalte{display:grid;gap:2.4rem;align-content:start}
.kennwerte{display:grid;grid-template-columns:repeat(3,auto);gap:.2rem 1.2rem;margin-top:1.2rem;padding-top:.8rem;border-top:1px solid var(--tusche);justify-content:start}
.kennwerte dt{font:600 .8rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2)}
.kennwerte dd{font:640 .98rem/1.3 var(--plan);font-stretch:92%;color:var(--acryl)}
@media (max-width:560px){.kennwerte{grid-template-columns:1fr 1fr}}

/* Blender-Filme: das Modell steht als helle Grundplatte auf dem Tisch */
.film{position:relative}
.film-buehne{position:relative;aspect-ratio:16/10;background:#f6f8fa;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten);overflow:hidden}
.dunkel .film-buehne{border-bottom-color:#0a1016;box-shadow:0 40px 70px -30px #000,0 0 0 1px rgba(255,255,255,.06)}
.film-buehne img,.film-buehne video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-buehne video{opacity:0;transition:opacity .6s var(--ease)}
.film.spielt video{opacity:1}
.film-knopf{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:.5rem;font:600 .86rem/1 var(--schrift);color:var(--tusche);background:rgba(255,255,255,.94);border:1px solid var(--feld-rand);border-radius:3px;padding:.6rem .85rem;min-height:44px;cursor:pointer}
.film-knopf[hidden]{display:none!important}
.film-knopf svg{width:14px;height:14px}
.film-knopf .i-play,.film.pausiert .film-knopf .i-pause{display:none}
.film.pausiert .film-knopf .i-play{display:block}
.film-knopf:hover{border-color:var(--acryl);color:var(--acryl-tief)}
.film figcaption{margin-top:.8rem}
.start .film{align-self:center}
@media print{.film video,.film-knopf{display:none!important}}
.film-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:900px){.film-raster{grid-template-columns:1fr}}
/* Druck: hell, Umbrüche ordnen (Codex R1 C5) */
@media print{
  .df,.df *{background:#fff!important;color:#000!important;box-shadow:none!important;print-color-adjust:economy!important;-webkit-print-color-adjust:economy!important}
  .platte,.fach-karte,.kontakt,.randkasten,.ref,.verzeichnis tr,figure,.film,.ks-kanalschnitt{break-inside:avoid}
  h2,h3{break-after:avoid}
  thead{display:table-header-group}
  .kontakt{background:#fff!important;color:#000!important;border:1px solid #000}
  .kontakt *{color:#000!important}
}
.eckdaten li{padding-left:1rem;position:relative}.eckdaten li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--acryl)}
.film-tabelle{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}
.film-tabelle caption{text-align:left;font:600 .8rem/1.3 var(--plan);font-stretch:80%;letter-spacing:.07em;text-transform:uppercase;color:var(--licht-2);margin-bottom:.4rem}
.film-tabelle th,.film-tabelle td{text-align:left;padding:.4rem .6rem .4rem 0;border-top:1px solid var(--tisch-linie);color:var(--licht)}
.film-tabelle thead th{color:var(--licht-2);font-weight:600;font-size:.8rem}
.film-tabelle tbody th{color:var(--acryl-licht)}
/* Finish-Review Runde 1 */
h1{overflow-wrap:normal}
.punktliste .z.punkt::before{content:"";display:inline-block;width:7px;height:7px;background:var(--acryl);translate:0 -.1em}
/* Kastentitel in Satzschreibung statt Versal-Etikett */
.randkasten small,.formular legend{font:640 1.02rem/1.25 var(--plan);font-stretch:96%;letter-spacing:-.005em;text-transform:none;color:var(--tusche)}
.kopf-zusatz .randkasten small{color:var(--licht)}
@media (max-width:900px){.plankopf{font-size:.82rem}}
@media (max-width:560px){.plankopf{font-size:.82rem}}
/* Lagenmarke: Platten mit Kante und Schatten, eigene Lage deutlich abgehoben */
.lagenmarke .lp{box-shadow:0 0 0 1px rgba(10,16,22,.35),0 18px 26px -14px rgba(0,0,0,.65)}
.lagenmarke .lp::before{content:"";position:absolute;top:0;bottom:0;left:100%;width:5px;background:#3d4a56;transform:rotateY(90deg);transform-origin:left}
.lagenmarke .lp.ist{background:rgba(0,111,183,.42);transform:translateZ(calc(var(--i)*22px + 46px)) translateX(26%);box-shadow:0 0 0 2px var(--acryl-licht),0 0 46px rgba(74,166,255,.55),inset 0 0 30px rgba(140,198,255,.45)}
.lagenmarke .lp.ist::before{background:#0a4f8c}
.lagenmarke .lp-name{display:none}
/* Finish-Review Verdict 1: Lagenmarke bleibt in ihrer Fläche, mobil eigener Bereich unter dem Text */
.lagenmarke{overflow:hidden;contain:paint}
.lagenmarke .lp.ist{transform:translateZ(calc(var(--i)*22px + 30px)) translateX(30%)}
@media (max-width:900px){
  .lagenmarke{width:min(100%,19rem);aspect-ratio:1.5;margin:1.6rem 0 0;justify-self:start}
  .lagenmarke .stapel{inset:4% 22% 8% 4%}
}
.zeitachse ol{grid-template-columns:minmax(15rem,4fr) minmax(15rem,23fr) minmax(15rem,auto)}
.zeitachse li{width:15rem;max-width:none}
@media (max-width:900px){
  .zeitachse ol{grid-template-columns:1fr;row-gap:1.4rem}
  .zeitachse ol::before{display:none}
  .zeitachse li:last-child{text-align:left;justify-self:start}
  .zeitachse li:last-child::before{left:0;right:auto}
  .zeitachse li:last-child .jahr{right:auto}
}
/* Lagenmarke: nicht beschneiden, Platz nach oben für die abgehobene Lage */
.lagenmarke{overflow:visible;contain:layout}
@media (max-width:900px){.lagenmarke{aspect-ratio:1.25;padding-top:0}.lagenmarke .stapel{inset:20% 24% 6% 6%}}
.starttisch{background:#10181e}

/* Startseite: dunkle Fassung des Ebenen-Films liegt direkt auf dem Tisch. Etiketten als eigene Spalte links vom Film
   (ragen nicht ins Bild); der leere linke Bildrand des Films (18 %) wird beschnitten, die Führungslinien enden an den Passkreuzen. */
.film.mit-etiketten{display:grid;grid-template-columns:7.2rem minmax(0,1fr)}
.film.mit-etiketten > figcaption,.film.mit-etiketten > :not(.film-etiketten):not(.film-buehne){grid-column:1/-1}
.film.mit-etiketten .film-buehne{background:#10181e;border-bottom:0;box-shadow:none;aspect-ratio:1.312}
.film.mit-etiketten .film-buehne img,.film.mit-etiketten .film-buehne video{object-position:100% 50%}
.film-etiketten{position:relative;list-style:none;padding:0;margin:0;pointer-events:none}
.film-etiketten li{position:absolute;left:0;right:0;display:flex;align-items:center;gap:.45rem;translate:0 -50%;white-space:nowrap;font:600 .8rem/1 var(--plan);font-stretch:80%;letter-spacing:.06em;text-transform:uppercase;color:#6d8091;transition:color .45s var(--ease)}
.film-etiketten li b{font-weight:640;letter-spacing:0}
.film-etiketten li::after{content:"";flex:1;min-width:.5rem;height:1px;background:currentColor;opacity:.6}
.film-etiketten li.an{color:var(--licht)}
.film-etiketten li.l0.an{color:var(--acryl-licht)}
.film-etiketten .l0{top:26.1%}.film-etiketten .l1{top:35.5%}.film-etiketten .l2{top:44.1%}.film-etiketten .l3{top:52.9%}.film-etiketten .l4{top:61.3%}
@media (max-width:900px){
  .film.mit-etiketten{display:flex;flex-direction:column}
  .film.mit-etiketten .film-buehne{order:1}
  .film-etiketten{order:2;display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin-top:.8rem}
  .film-etiketten li{position:static;translate:none}
  .film-etiketten li::after{display:none}
  .film.mit-etiketten > figcaption{order:3}
}
/* Finish-Review (frisch): Startfilm enger beschnitten, Kanal-Spalte, Maßkette ohne Wert über der Überschrift */
.film.mit-etiketten .film-buehne{aspect-ratio:1.09}
.film.mit-etiketten .film-buehne img,.film.mit-etiketten .film-buehne video{object-position:56% 50%}
.kanal-raster > .film-raster{max-width:none}
@media (max-width:700px){
  .ks-kanalschnitt .ks-zeichenplatte{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ks-kanalschnitt .ks-zeichenplatte .ks-grafik{min-width:680px}
}
.masskette::before{top:0}
.abschnitt{display:flex;flex-direction:column;padding-top:1.3rem}
.abschnitt::before,.abschnitt:last-child::after{top:-.55rem}
.abschnitt h3{order:1;margin:0 0 .35rem}
.abschnitt .masswert{order:2;height:auto;margin-bottom:.5rem;padding-left:.7rem}
.abschnitt p{order:3}
@media (max-width:900px){.abschnitt::after{top:0}}
/* Finish-Review (frisch) Runde 2 */
.kanal-raster > .film-raster:first-child{max-width:none}
.film.mit-etiketten .film-knopf{right:0;bottom:0;background:rgba(16,24,30,.9);color:var(--licht);border-color:#4d6274}
.film.mit-etiketten .film-knopf:hover{border-color:var(--acryl-licht);color:#fff}
/* Lagenmarke: die eigene Lage wird über den Stapel gehoben, an ihrer Stelle bleibt eine Lücke */
.lagenmarke .lp.ist{transform:translateZ(214px) translateX(8%)}
@media (max-width:900px){
  .lagenmarke{margin-top:3.2rem}
  .lagenmarke .lp{transform:translateZ(calc(var(--i)*14px))}
  .lagenmarke .lp.ist{transform:translateZ(118px) translateX(6%)}
}
@media (min-width:901px){h2{hyphens:manual}}

/* Original-Logo (01.11.2026): unverändert auf weißem Feld, als Schild auf dem Modelltisch */
.marke{display:flex;flex-direction:column;align-items:flex-start;gap:.32rem;text-decoration:none}
.marke .logo{display:block;width:auto;height:30px;box-shadow:0 3px 0 -1px var(--kante-dunkel),0 10px 18px -10px rgba(0,0,0,.7)}
.marke-claim{font:500 .8rem/1 var(--plan);font-stretch:92%;letter-spacing:.01em;color:var(--licht-2);white-space:nowrap}
.marke:hover .marke-claim{color:var(--licht)}
.typenschild{margin-top:2.4rem;display:inline-block}
.typenschild .logo{display:block;width:min(19rem,80vw);height:auto;border-bottom:5px solid #c5cdd5;box-shadow:0 26px 40px -24px #000}
.fuss .logo{width:auto;height:34px;margin-bottom:1rem;border-bottom:4px solid #2a3a48}
@media (max-width:560px){.marke .logo{height:26px}.marke-claim{font-size:.8rem}}
@media (max-width:380px){.marke-claim{display:none}}
/* Claim als Kern: in der Faktenleiste des Modelltischs, gleichrangig mit dem Logo im Kopf */
.start-fakten{align-items:flex-end}
.start-claim{font:640 1.3rem/1.2 var(--plan);font-stretch:100%;letter-spacing:-.01em;text-transform:none;color:var(--licht);margin-right:auto;display:flex;align-items:center;gap:.7rem}
.start-claim::before{content:"";width:.7rem;height:.7rem;background:var(--acryl);flex:none}
.marke .logo{height:34px}
@media (max-width:560px){.start-claim{width:100%;font-size:1.15rem}.marke .logo{height:28px}}
.start .start-claim{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--tisch-linie);font-size:1.2rem}
.dunkel .start-claim{color:var(--licht)}

/* Lagenmarke nach Menüposition (01.11.2026, Wunsch Kom21): die obersten n Lagen steigen um --hub auf, die eigene Lage ist die Acrylplatte,
   die Grundplatte (i0) bleibt liegen. Ohne Menüeintrag ruht der Stapel. Bewegung in bewegung.css (nur no-preference). */
.lagenmarke{--schritt:22px;--hub:64px}
.lagenmarke .lp{transform:translateZ(calc(var(--i)*var(--schritt)))}
.lagenmarke .lp.hoch{transform:translateZ(calc(var(--i)*var(--schritt) + var(--hub)))}
.lagenmarke .lp.ist{transform:translateZ(calc(var(--i)*var(--schritt) + var(--hub)));background:rgba(0,111,183,.42);box-shadow:0 0 0 2px var(--acryl-licht),0 0 46px rgba(74,166,255,.55),inset 0 0 30px rgba(140,198,255,.45)}
.lagenmarke .lp.grund{background:#1a2731;box-shadow:0 0 0 1px #3f5466,0 26px 34px -18px rgba(0,0,0,.85)}
.lagenmarke .lp.grund::after{background:#0d151b}
.lagenmarke .lp.grund::before{background:#0a1116}
@media (max-width:900px){.lagenmarke{--schritt:14px;--hub:46px}}
/* ==========================================================================
   Bewegung „Schichtenmodell“ (v2, 01.11.2026)
   Grundsatz: CSS-Grundzustand = fertiger Endzustand. Bewegung nur an Datenszenen
   (Lagen heben ab, Punkte fallen an ihre Koordinate, Linien werden gezogen).
   - Scroll-Zeitleiste: unter @supports (animation-timeline:view()) + no-preference.
   - Fallback: js-klasse.js setzt .sz-io, bewegung.js setzt .ist-da (IntersectionObserver).
   - Reduced motion, Druck, ohne JS: alles statisch sichtbar.
   Langform-Eigenschaften (animation-name/-timeline/-range), weil der CSS-Minifier Kurzwerte zerstört.
   ========================================================================== */

@keyframes abheben{from{transform:rotateX(56deg) rotateZ(-34deg) translateZ(0)}}
@keyframes anleuchten{from{color:#5f7282}}
@keyframes anleuchten-strich{from{background-color:#2a3a48;opacity:.4}}
@keyframes aufsteigen{from{transform:translateZ(calc(var(--i)*var(--schritt)))}}
@keyframes lage-anleuchten{from{background-color:#d9e0e6;box-shadow:0 0 0 1px rgba(10,16,22,.35),0 18px 26px -14px rgba(0,0,0,.65)}}
@keyframes heraus{from{transform:translateZ(calc(var(--i)*22px)) translateX(0);background:#d9e0e6;box-shadow:0 0 0 1px rgba(10,16,22,.35)}}
@keyframes auf{from{opacity:0;translate:0 14px}}
@keyframes linie-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes strich{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fallen{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:translateY(0)}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@keyframes scan{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes scan-aus{0%,85%{opacity:1}100%{opacity:0}}
@keyframes lage-landen{from{--lift:300px;opacity:0}to{--lift:0px;opacity:1}}
@keyframes stapel-registrieren{from{--p:.85}to{--p:.12}}
@keyframes ebene-aktiv{from{color:var(--tusche-2)}to{color:var(--acryl)}}
@keyframes ort-fallen{from{opacity:0;transform:translateY(-40px) scale(.6)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* Startseite: Lagen heben nacheinander vom Gelände ab, Etiketten leuchten mit (Ersatz ohne Video) */
  .modell-stapel .ml{animation-name:abheben;animation-duration:1.5s;animation-timing-function:var(--ease);animation-fill-mode:both}
  .modell-stapel .m1{animation-delay:.35s}.modell-stapel .m2{animation-delay:.7s}.modell-stapel .m3{animation-delay:1.05s;animation-duration:1.7s}
  .modell:not(.hat-video) .modell-etiketten li{animation-name:anleuchten;animation-duration:.8s;animation-fill-mode:both}
  .modell:not(.hat-video) .modell-etiketten li::before{animation-name:anleuchten-strich;animation-duration:.8s;animation-fill-mode:both}
  .modell:not(.hat-video) .e1,.modell:not(.hat-video) .e1::before{animation-delay:.3s}
  .modell:not(.hat-video) .e2,.modell:not(.hat-video) .e2::before{animation-delay:.8s}
  .modell:not(.hat-video) .e3,.modell:not(.hat-video) .e3::before{animation-delay:1.15s}
  .modell:not(.hat-video) .e4,.modell:not(.hat-video) .e4::before{animation-delay:1.7s}
  .start h1,.start .lead,.start .aktionen{animation-name:auf;animation-duration:1s;animation-timing-function:var(--ease);animation-fill-mode:both}
  .start .lead{animation-delay:.12s}.start .aktionen{animation-delay:.24s}

  /* Unterseiten: die Lagen bis zum aktuellen Menüpunkt steigen von oben nach unten gestaffelt auf, die eigene Lage leuchtet danach auf (max. 1,8 s, einmalig) */
  .lagenmarke .lp.hoch{animation-name:aufsteigen;animation-duration:.9s;animation-delay:calc(.25s + (7 - var(--i)) * 90ms);animation-timing-function:var(--ease);animation-fill-mode:both}
  .lagenmarke .lp.ist{animation-name:aufsteigen,lage-anleuchten;animation-duration:.9s,.6s;animation-delay:calc(.25s + (7 - var(--i)) * 90ms),calc(.65s + (7 - var(--i)) * 90ms);animation-timing-function:var(--ease),ease-out;animation-fill-mode:both,both}
  .kopfblatt h1,.kopfblatt .lead,.kopfblatt .kopf-zusatz{animation-name:auf;animation-duration:.9s;animation-timing-function:var(--ease);animation-fill-mode:both}
  .kopfblatt .lead{animation-delay:.1s}.kopfblatt .kopf-zusatz{animation-delay:.2s}

  @supports (animation-timeline:view()){
    /* Maßkette und Zeitachse: Maßlinie wird gezogen */
    .masskette::before,.zeitachse ol::before{animation-name:linie-x;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 30% cover 50%}

    /* Referenzkarte: Orte fallen an ihre Koordinate, in der Reihenfolge der Liste */
    .refkarte{view-timeline-name:--refkarte}
    .refkarte .ort{animation-name:ort-fallen;animation-timing-function:var(--ease);animation-fill-mode:both;animation-timeline:--refkarte;animation-range:entry calc(40% + var(--n)*3%) cover calc(30% + var(--n)*2.5%)}
    .refkarte .sitz-ring{animation-name:einblenden;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--refkarte;animation-range:entry 20% entry 60%}

    /* Digitalisierung: Scanlinie fährt, Vektoren zeichnen sich */
    .digital{view-timeline-name:--digital}
    .digital-scan{animation-name:scan,scan-aus;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--digital;animation-range:cover 18% cover 58%}
    .digital-weg{animation-name:strich;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--digital}
    .digital-weg.g1{animation-range:cover 18% cover 38%}.digital-weg.g2{animation-range:cover 28% cover 48%}.digital-weg.g3{animation-range:cover 38% cover 58%}

    /* Baumkataster: Bäume fallen wellenweise West → Ost */
    .welle{animation-name:fallen;animation-timing-function:var(--ease);animation-fill-mode:both;animation-timeline:--baumkataster}
    .w1{animation-range:cover 12% cover 20%}.w2{animation-range:cover 20% cover 28%}.w3{animation-range:cover 28% cover 36%}
    .w4{animation-range:cover 36% cover 44%}.w5{animation-range:cover 44% cover 52%}.w6{animation-range:cover 52% cover 60%}
    .baum-etiketten :is(rect,text){animation-name:einblenden;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--baumkataster;animation-range:cover 66% cover 72%}
    .baum-etikett line,.baum-massstab path{animation-name:strich;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--baumkataster}
    .baum-etikett line{animation-range:cover 60% cover 66%}
    .baum-massstab path{animation-range:cover 10% cover 22%}
    .zeile{animation-name:einblenden;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--baumkataster}
    .z1{animation-range:cover 12% cover 20%}.z2{animation-range:cover 20% cover 28%}.z3{animation-range:cover 28% cover 36%}
    .z4{animation-range:cover 36% cover 44%}.z5{animation-range:cover 44% cover 52%}.z6{animation-range:cover 52% cover 60%}

    /* Ebenen (WebGIS): Lagen landen nacheinander, danach registriert sich der Stapel */
    @media (min-width:901px) and (min-height:721px){
      .ebenen-lauf{view-timeline-name:--ebenen;animation-name:stapel-registrieren;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ebenen;animation-range:contain 68% contain 92%}
      .lage:nth-child(n+2){animation-name:lage-landen;animation-timing-function:var(--ease);animation-fill-mode:both;animation-timeline:--ebenen}
      .lage:nth-child(2){animation-range:contain 4% contain 22%}
      .lage:nth-child(3){animation-range:contain 24% contain 42%}
      .lage:nth-child(4){animation-range:contain 44% contain 62%}
      .ebenen-liste li .z{animation-name:ebene-aktiv;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ebenen}
      .ebenen-liste li:nth-child(4) .z{animation-range:contain 0% contain 4%}
      .ebenen-liste li:nth-child(3) .z{animation-range:contain 4% contain 22%}
      .ebenen-liste li:nth-child(2) .z{animation-range:contain 24% contain 42%}
      .ebenen-liste li:nth-child(1) .z{animation-range:contain 44% contain 62%}
    }
    @media (max-width:900px),(max-height:720px){
      .stapel-wrap{view-timeline-name:--ebenen}
      .lage:nth-child(n+2){animation-name:lage-landen;animation-timing-function:var(--ease);animation-fill-mode:both;animation-timeline:--ebenen}
      .lage:nth-child(2){animation-range:entry 30% cover 40%}
      .lage:nth-child(3){animation-range:entry 60% cover 48%}
      .lage:nth-child(4){animation-range:entry 90% cover 56%}
    }
  }

  /* Fallback ohne Scroll-Zeitleiste: einmalig beim Eintritt (.ist-da) */
  @supports not (animation-timeline:view()){
    .sz-io :is(.masskette,.zeitachse ol)::before{transform:scaleX(0);transition:transform 1.2s var(--ease)}
    .sz-io :is(.masskette,.zeitachse ol).ist-da::before{transform:scaleX(1)}
    .sz-io .refkarte .ort{transition:opacity .6s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--n)*60ms)}
    .sz-io .refkarte:not(.ist-da) .ort{opacity:0;transform:translateY(-40px) scale(.6)}
    .sz-io .digital-scan{transition:transform 1.6s var(--ease),opacity .4s 1.6s}
    .sz-io .digital:not(.ist-da) .digital-scan{transform:translateX(0);opacity:1}
    .sz-io .digital.ist-da .digital-scan{transform:translateX(100%);opacity:0}
    .sz-io .digital-weg{transition:stroke-dashoffset 1.3s var(--ease)}
    .sz-io .digital-weg.g2{transition-delay:.35s}.sz-io .digital-weg.g3{transition-delay:.7s}
    .sz-io .digital:not(.ist-da) .digital-weg{stroke-dashoffset:1}
    .sz-io .baumkataster .welle{transition:transform .5s var(--ease),opacity .5s var(--ease)}
    .sz-io .baumkataster:not(.ist-da) .welle{opacity:0;transform:translateY(-26px)}
    .sz-io .baumkataster .baum-etiketten,.sz-io .baumkataster .zeile{transition:opacity .5s var(--ease)}
    .sz-io .baumkataster:not(.ist-da) .baum-etiketten,.sz-io .baumkataster:not(.ist-da) .zeile{opacity:0}
    .sz-io .baumkataster .w2,.sz-io .baumkataster .z2{transition-delay:.08s}.sz-io .baumkataster .w3,.sz-io .baumkataster .z3{transition-delay:.16s}
    .sz-io .baumkataster .w4,.sz-io .baumkataster .z4{transition-delay:.24s}.sz-io .baumkataster .w5,.sz-io .baumkataster .z5{transition-delay:.32s}
    .sz-io .baumkataster .w6,.sz-io .baumkataster .z6{transition-delay:.4s}.sz-io .baumkataster .baum-etiketten{transition-delay:.52s}
    .sz-io .ebenen-lauf{transition:--p 1.2s var(--ease) 2.1s}
    .sz-io .ebenen-lauf:not(.ist-da){--p:.85}
    .sz-io .ebenen-lauf.ist-da{--p:.12}
    .sz-io .lage:nth-child(n+2){transition:--lift 1s var(--ease),opacity .6s var(--ease)}
    .sz-io .lage:nth-child(3){transition-delay:.6s}.sz-io .lage:nth-child(4){transition-delay:1.2s}
    .sz-io .ebenen-lauf:not(.ist-da) .lage:nth-child(n+2){--lift:300px;opacity:0}
  }
}

/* ---- Baumkataster (Szene) ---- */
.baumkataster{position:relative;view-timeline-name:--baumkataster;view-timeline-axis:block}
.baumkataster-lauf{height:200vh}
.baumkataster-buehne{position:sticky;top:4.4rem;height:calc(100svh - 4.4rem);display:grid;align-items:center;overflow:hidden}
.baumkataster-blatt{width:100%;max-width:calc(var(--mass) + 2*var(--rand));margin:auto;padding:clamp(2rem,5vh,4rem) var(--rand)}
.baumkataster-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.baumkataster-text h2{margin-bottom:1rem;font-size:clamp(1.6rem,2.6vw,2.3rem)}
.baumkataster-text .lead{font-size:1.02rem}
.baumtabelle{width:100%;margin-top:1.5rem;border-collapse:collapse;font-size:.88rem}
.baumtabelle caption{text-align:left;color:var(--tusche-2);font-size:.8rem;margin-bottom:.45rem}
.baumtabelle th,.baumtabelle td{padding:.4rem .45rem .4rem 0;border-top:1px solid var(--linie-fein);text-align:left}
.baumtabelle thead th{font:600 .8rem/1.2 var(--plan);font-stretch:78%;letter-spacing:.08em;text-transform:uppercase;color:var(--tusche-2);border-top:1px solid var(--tusche)}
.baumtabelle tbody th{font-weight:600;color:var(--acryl)}
.baumtabelle td:last-child,.baumtabelle thead th:last-child{text-align:right;white-space:nowrap}
.baumkarte{position:relative;background:var(--platte);padding:10px;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.baumkarte picture,.baumkarte img{width:100%;aspect-ratio:1.6}
.baumkarte img{object-fit:cover}
.baum-overlay{position:absolute;inset:10px;width:calc(100% - 20px);height:auto;aspect-ratio:1.6;overflow:visible}
.welle circle{fill:var(--acryl);stroke:#fff;stroke-width:1.6;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.baum-etikett line{stroke:var(--acryl);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1}
.baum-massstab path{stroke-dasharray:1;fill:none;stroke:var(--tusche);stroke-width:1.2;vector-effect:non-scaling-stroke}
.baum-etikett rect,.baum-massstab rect{fill:rgba(255,255,255,.95);stroke:var(--tusche);stroke-width:.7}
.baum-etikett text,.baum-massstab text{font:600 11px var(--plan);font-stretch:85%;letter-spacing:.3px;fill:var(--tusche)}
.baumkarte figcaption{margin-top:.7rem}
@supports not (animation-timeline:view()){.baumkataster-lauf{height:auto}.baumkataster-buehne{position:relative;top:0;height:auto;overflow:visible}}
@media (max-width:900px),(max-height:880px){
  .baumkataster-lauf{height:auto}.baumkataster-buehne{position:relative;top:0;height:auto;overflow:visible}
  .baumkataster-blatt{padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
}
@media (max-width:900px){.baumkataster-raster{grid-template-columns:1fr}.baumkarte{max-width:46rem}}
@media (max-width:560px){.baumtabelle{font-size:.8rem}.baum-etikett text{font-size:10px}}

/* ---- Ebenen-Stapel (WebGIS) ---- */
.ebenen-lauf{height:220vh;position:relative;--p:.85;timeline-scope:--ebenen}
.ebenen-buehne{position:sticky;top:4.4rem;height:calc(100svh - 4.4rem);display:grid;grid-template-columns:5fr 7fr;align-items:center;gap:clamp(2rem,5vw,4rem);max-width:calc(var(--mass) + 2*var(--rand));margin:auto;padding:0 var(--rand);overflow:hidden}
.ebenen-text h2{margin-bottom:1rem}
.ebenen-liste{list-style:none;padding:0;margin-top:1.8rem;display:grid;gap:.15rem}
.ebenen-liste li{display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline;padding:.65rem 0;border-top:1px solid var(--linie);color:var(--tusche-2)}
.ebenen-liste li b{color:var(--tusche);font-weight:600}
.ebenen-liste .z{font:640 .86rem var(--plan);font-stretch:90%;color:var(--acryl)}
.stapel-wrap{perspective:1700px;display:grid;place-items:center}
.stapel-wrap .stapel{position:relative;width:min(100%,580px);aspect-ratio:1.6;transform-style:preserve-3d;transform:translateY(calc(var(--p)*48px)) rotateX(calc(var(--p)*52deg)) rotateZ(calc(var(--p)*-30deg)) scale(calc(1 - var(--p)*.14))}
.lage{position:absolute;inset:0;transform:translateZ(calc(var(--p)*var(--i)*64px + var(--lift)));background:#fff;box-shadow:0 0 0 1px rgba(21,32,42,.25),0 12px 22px -14px rgba(21,32,42,.4)}
.lage img{width:100%;height:100%;object-fit:cover}
.lage.fach{background:rgba(0,111,183,.08);box-shadow:0 0 0 1.5px var(--acryl),0 0 30px rgba(0,111,183,.25)}
.lage.fach svg{width:100%;height:100%}
.lage:nth-child(1){--i:0}.lage:nth-child(2){--i:1}.lage:nth-child(3){--i:2}.lage:nth-child(4){--i:3}
.stapel-notiz{font-size:.8rem;color:var(--tusche-2);margin-top:1rem}
@supports not (animation-timeline:view()){.ebenen-lauf{height:auto}.ebenen-buehne{position:relative;height:auto;padding:clamp(3.5rem,8vw,6rem) var(--rand)}}
@media (max-height:720px){.ebenen-lauf{height:auto}.ebenen-buehne{position:relative;top:0;height:auto;padding:clamp(3.5rem,8vw,6rem) var(--rand)}}
@media (max-width:900px){
  .ebenen-lauf{height:auto}
  .ebenen-buehne{position:relative;top:0;height:auto;grid-template-columns:1fr;padding:clamp(3.5rem,8vw,6rem) var(--rand)}
  .stapel-wrap .stapel{--p:.85!important;width:78%;margin:2.5rem 0 3.5rem 6%}
}

/* ---- Digitalisierung (Daten) ---- */
.digital-bild{position:relative;overflow:hidden;aspect-ratio:1.6}
.digital-karte{position:relative;background:var(--platte);padding:10px;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.digital-karte img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;filter:grayscale(1) contrast(.9)}
.digital-netz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.digital-weg{fill:none;stroke:var(--acryl);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.digital-scan{position:absolute;inset:0;pointer-events:none;opacity:0}
.digital-scan::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--acryl);box-shadow:0 0 0 6px rgba(0,111,183,.14)}
.digital-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (min-width:901px){.digital-raster > .digital{position:sticky;top:6.5rem}}
@media (max-width:900px){.digital-raster{grid-template-columns:minmax(0,1fr)}}

/* ---- Referenzkarte ---- */
.refkarte{position:relative}
.refkarte svg{width:100%;height:auto}
.refkarte .land{fill:#1b2833;stroke:#3a4c5c;stroke-width:1;vector-effect:non-scaling-stroke}
.refkarte .land.by,.refkarte .land.bw,.refkarte .land.he{fill:#22384a;stroke:#5a7a94}
.refkarte .ort{transform-box:fill-box;transform-origin:50% 100%}
.refkarte .ort circle{fill:var(--acryl-licht);stroke:var(--tisch);stroke-width:2;vector-effect:non-scaling-stroke}
.refkarte .ort text,.refkarte .sitz text{font:600 23px var(--plan);font-stretch:82%;fill:var(--licht);paint-order:stroke;stroke:var(--tisch);stroke-width:4px;stroke-linejoin:round}
.refkarte .sitz rect{fill:#fff}
.refkarte .sitz-ring{fill:none;stroke:var(--acryl-licht);stroke-width:1.5;vector-effect:non-scaling-stroke}
.refkarte-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:900px){.refkarte-raster{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html{scroll-behavior:auto}
  .baumkataster-lauf,.ebenen-lauf{height:auto}
  .baumkataster-buehne,.ebenen-buehne{position:relative;top:0;height:auto;overflow:visible}
  .ebenen-buehne{padding:clamp(3.5rem,8vw,6rem) var(--rand)}
  .lage{--lift:0px}
  .digital-scan{display:none}
}
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sz-io *,.sz-io *::before,.sz-io *::after{opacity:1!important;translate:none!important;clip-path:none!important}
  .baumkataster-lauf,.ebenen-lauf{height:auto}.baumkataster-buehne,.ebenen-buehne{position:relative;height:auto}
  .lage{--lift:0px!important;opacity:1!important}
  .digital-scan{display:none}
  .digital-weg{stroke-dashoffset:0!important}
}
.refkarte .n0{--n:0}.refkarte .n1{--n:1}.refkarte .n2{--n:2}.refkarte .n3{--n:3}.refkarte .n4{--n:4}.refkarte .n5{--n:5}.refkarte .n6{--n:6}.refkarte .n7{--n:7}.refkarte .n8{--n:8}.refkarte .n9{--n:9}.refkarte .n10{--n:10}.refkarte .n11{--n:11}.refkarte .n12{--n:12}.refkarte .n13{--n:13}.refkarte .n14{--n:14}.refkarte .n15{--n:15}.refkarte .n16{--n:16}.refkarte .n17{--n:17}

/* ---- Passpunkte (Georeferenzierung) ---- */
.passpunkte{background:var(--platte);padding:10px;border-bottom:6px solid var(--kante);box-shadow:var(--plattenschatten)}
.pp-feld{position:relative;aspect-ratio:1.6;overflow:hidden;background:#dfe5ea}
.pp-feld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-scan{position:absolute;inset:0;opacity:.72;mix-blend-mode:multiply;transform-origin:50% 50%}
.pp-scan img{filter:grayscale(1) contrast(1.15)}
.pp-punkte{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pp circle{fill:none;stroke:var(--acryl);stroke-width:1.6;vector-effect:non-scaling-stroke}
.pp path{stroke:var(--acryl);stroke-width:1.2;vector-effect:non-scaling-stroke}
@keyframes einrasten{from{transform:perspective(900px) rotateZ(-5deg) rotateX(9deg) skewX(4deg) scale(.86) translate(-3%,4%)}to{transform:none}}
@keyframes pp-zeigen{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:none}}
.pp{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .passpunkte{view-timeline-name:--pp}
    .pp-scan{animation-name:einrasten;animation-timing-function:var(--ease);animation-fill-mode:both;animation-timeline:--pp;animation-range:cover 30% cover 62%}
    .pp{animation-name:pp-zeigen;animation-timing-function:var(--ease);animation-fill-mode:both;animation-timeline:--pp}
    .p1{animation-range:cover 12% cover 20%}.p2{animation-range:cover 16% cover 24%}.p3{animation-range:cover 20% cover 28%}.p4{animation-range:cover 24% cover 32%}
  }
  @supports not (animation-timeline:view()){
    .sz-io .pp-scan{transition:transform 1.6s var(--ease) .6s}
    .sz-io .passpunkte:not(.ist-da) .pp-scan{transform:perspective(900px) rotateZ(-5deg) rotateX(9deg) skewX(4deg) scale(.86) translate(-3%,4%)}
    .sz-io .pp{transition:opacity .5s var(--ease),transform .5s var(--ease)}
    .sz-io .passpunkte:not(.ist-da) .pp{opacity:0;transform:scale(2.4)}
  }
}
.refkarte .fuehrung{fill:none;stroke:var(--licht-2);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.8}
/* Referenzkarte: Nummern und Legende nur mobil, dort ersetzen sie die SVG-Namen */
.refkarte .ort .nr-txt{display:none}
.refkarte-legende{display:none}
@media (max-width:560px){
  .refkarte .ort .name{display:none}
  .refkarte .ort .nr-txt{display:block;font-size:46px}
  .refkarte .ort circle{r:11px}
  .refkarte-legende{display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem;margin-top:.8rem;padding-left:1.6rem;font-size:.92rem;color:var(--licht)}
  .refkarte-legende li::marker{color:var(--acryl-licht);font-weight:600}
}