:root{
  color-scheme: only light;

  --bg:            #f5f5f7;
  --bg-deep:       #ffffff;
  --ink:           #1d1d1f;
  --ink-2:         #6e6e73;
  --ink-3:         #6e6e73;
  --line:          rgba(0,0,0,.10);
  --accent:        #1d1d1f;
  --accent-leise:  #6e6e73;
  --accent-hell:   rgba(255,255,255,.62);
  --signal:        #cc1317;
  --radius:        22px;
  --nav-h:         var(--kopf-h, 58px);
  --pad:           max(clamp(20px, 5vw, 80px),
                       env(safe-area-inset-left), env(safe-area-inset-right));

  --satz:          1400px;
  --pad-breit:     max(var(--pad), (100% - var(--satz)) / 2);

  --buehne-ar:     1.6;
  --buehne-hoehe:  100lvh;

  --f-display: clamp(44px, 9.5vw, 132px);
  --f-h2:      clamp(34px, 6.2vw, 80px);
  --f-h2-klein: clamp(26px, 3.6vw, 48px);
  --f-h3:      clamp(21px, 2.4vw, 32px);
  --f-body:    clamp(15px, 1.25vw, 19px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--kopf-schrift);
  font-size:var(--f-body);
  line-height:1.5;
  letter-spacing:var(--kopf-laufweite);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.04; }
p{ margin:0; }
p, li, dd, figcaption{ text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }


.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 22px;
  border-radius:999px;
  font-size:15px; font-weight:500; letter-spacing:-.01em;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn > svg{ margin-left:9px; opacity:.75; flex:0 0 auto; }
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:#000; transform:translateY(-1px); }
.btn--ghost{ background:rgba(255,255,255,.82); color:var(--ink); border:1px solid rgba(0,0,0,.16); }
.btn--ghost:hover{ background:#fff; transform:translateY(-1px); }
.btn--lg{ height:52px; padding:0 30px; font-size:17px; }
.btn[hidden]{ display:none; }
.btn--pfeil{ gap:10px; }
.btn--pfeil i{
  font-style:normal;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.btn--pfeil:hover i{ transform:translateX(4px); }

.ph{
  background:rgba(0,0,0,.05);
  border-bottom:1.5px dotted rgba(0,0,0,.42);
  border-radius:2px;
  padding:0 .12em;
}
.ph-bild{
  display:grid; place-items:center; gap:12px;
  width:100%; height:100%;
  color:var(--ink-3); font-size:12.5px; text-align:center;
}
.link-pfeil{
  display:inline-block; margin-top:22px;
  font-size:15px; color:var(--accent);
}
.link-pfeil:hover{ text-decoration:underline; }

.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:grid; align-content:center;
  padding:calc(var(--nav-h) + 6vh) var(--pad) 8vh;
  overflow:hidden;
  background:radial-gradient(115% 85% at 72% 15%, #ffffff 0%, #f3f3f5 48%, #e8e8ec 100%);
}
.hero__canvas{
  position:absolute; inset:0;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y pinch-zoom;
}
.hero__canvas.is-grabbing{ cursor:grabbing; }
.hero__canvas canvas{ display:block; width:100%; height:100%; }

.hero__text{
  position:relative; z-index:2;
  max-width:min(620px,52vw);
  pointer-events:none;
}
.hero__text a{ pointer-events:auto; }
.hero__auge{
  font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:22px;
}
.hero__text h1{
  font-size:clamp(38px,5.6vw,76px);
  font-weight:600; letter-spacing:-.035em;
}
.hero__text .hero__claim{ max-width:44ch; }
.hero__text .hero__cta{ margin-top:34px; }

.hero__hinweis{
  position:absolute; right:var(--pad); bottom:26px; z-index:2;
  font-size:12px; color:var(--ink-3);
}

.hero__hinweis,
.hero__drag{ opacity:0; transition:opacity .4s ease; }
html.hat-3d .hero__hinweis,
html.hat-3d .hero__drag{ opacity:1; }

@media (max-width:860px){
  .hero{
    align-content:end;
    min-height:100svh;
    padding-bottom:6vh;
  }
  .hero__text{ max-width:none; }
  .hero__hinweis{ left:var(--pad); right:auto; bottom:10px; }
}

.zahlen{
  background:var(--ink); color:#fff;
  padding:clamp(38px,6vh,64px) var(--pad-breit);
}
.zahlen__reihe{
  margin:0;
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
}
.zahlen__reihe dt{
  font-size:clamp(30px,3.4vw,46px); font-weight:600; letter-spacing:-.03em;
  margin-bottom:6px;
}
.zahlen__reihe dd{ margin:0; font-size:14px; color:rgba(255,255,255,.62); }
.zahlen .ph{
  background:rgba(255,255,255,.12);
  border-bottom-color:rgba(255,255,255,.45);
}

.abschnitt{
  padding:clamp(70px,11vh,150px) var(--pad-breit);
  background:var(--bg);
}
.abschnitt--hell{ background:var(--bg-deep); }
.abschnitt__kopf{
  margin:0 0 clamp(34px,5vh,60px);
  display:grid; gap:22px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end;
}
.abschnitt__kopf h2{ font-size:var(--f-h2); letter-spacing:-.04em; }
.abschnitt__kopf p{ color:var(--ink-2); max-width:48ch; }
.abschnitt__auge{
  font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:18px;
}
@media (max-width:860px){
  .abschnitt__kopf{ grid-template-columns:1fr; }
}

.produktGitter{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
}
.pkachel{
  position:relative;
  display:grid; gap:6px; align-content:start;
  padding:26px 26px 58px;
  min-height:230px;
  border-radius:var(--radius);
  background:linear-gradient(165deg,#f2f2f4,#e7e8eb);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.abschnitt--hell .pkachel{ background:linear-gradient(165deg,#f4f4f6,#e9eaee); }
.pkachel:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.08); }

.pkachel__bild{
  display:block; margin:-6px 0 14px;
  height:clamp(112px, 13vw, 150px);
}
.pkachel__bild img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  mix-blend-mode:multiply;
}
.pkachel__kopf{ display:flex; align-items:center; gap:9px; }
.pkachel__kopf b{ font-size:clamp(22px,2.2vw,29px); font-weight:600; letter-spacing:-.03em; }
.pkachel__marke{
  font-style:normal; font-size:10px; font-weight:500; letter-spacing:.04em;
  padding:3px 7px; border-radius:5px;
  background:rgba(0,0,0,.08); color:var(--ink-2);
}
.pkachel__kurz{ font-size:13px; font-weight:500; color:var(--ink); letter-spacing:.01em; }
.pkachel__claim{ margin-top:8px; font-size:15px; color:var(--ink-2); }
.pkachel__serie{
  margin-top:12px; font-size:12px; line-height:1.5; color:var(--ink-3);
}
.pkachel__pfeil{
  position:absolute; left:26px; bottom:24px;
  font-size:19px; color:var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.pkachel:hover .pkachel__pfeil{ transform:translateX(5px); }
.pkachel--bald{ opacity:.78; }

.weiter{
  margin-top:clamp(26px,3.6vh,46px);
  display:grid; gap:clamp(22px,3vw,46px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  padding:clamp(26px,3.2vw,42px);
  border-radius:var(--radius);
  color:var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.weiter:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.10); }
.weiter:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.weiter--dunkel{ background:var(--ink); color:#fff; }
.weiter--dunkel:hover{ box-shadow:0 16px 40px rgba(0,0,0,.24); }
.weiter--bilder{ background:linear-gradient(160deg,#f2f2f4,#e9eaee); }
@media (min-width:900px){
  .weiter{ grid-template-columns:minmax(0,1fr) minmax(0,auto); }
}

.weiter__auge{
  display:block; margin-bottom:14px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  opacity:.60;
}
.weiter__kopf{
  display:block;
  font-size:clamp(24px,2.7vw,36px); font-weight:600;
  letter-spacing:-.03em; line-height:1.1;
}
.weiter__lead{
  display:block; margin-top:14px; max-width:48ch;
  font-size:15px; line-height:1.55; opacity:.72;
}
.weiter__knopf{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(18px,2.4vh,26px);
  height:48px; padding:0 26px;
  border-radius:999px;
  font-size:16px; font-weight:500; white-space:nowrap;
  background:var(--ink); color:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.weiter--dunkel .weiter__knopf{ background:#fff; color:var(--ink); }
.weiter--dunkel > .weiter__knopf{ justify-self:start; }
@media (min-width:900px){
  .weiter--dunkel > .weiter__knopf{ margin-top:0; justify-self:end; }
}
.weiter__knopf i{
  font-style:normal;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.weiter:hover .weiter__knopf i{ transform:translateX(5px); }

.weiter__streifen{
  display:grid; grid-auto-flow:column; gap:10px;
  align-self:stretch; align-items:center;
}
.weiter__streifen img{
  display:block;
  width:clamp(96px,11vw,152px); height:clamp(120px,14vw,190px);
  object-fit:cover; object-position:center;
  border-radius:calc(var(--radius) * .62);
}
@media (max-width:899px){
  .weiter__streifen img{ width:100%; height:clamp(90px,22vw,140px); }
}
.kompetenz{
  display:grid; gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
}
.kompetenz article{ border-top:1px solid var(--line); padding-top:20px; }
.kompetenz__nr{
  display:block; margin-bottom:14px;
  font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--accent-leise);
}
.kompetenz h3{ font-size:clamp(18px,1.7vw,23px); margin-bottom:.5em; }
.kompetenz p{ color:var(--ink-2); font-size:15px; }
@media (min-width:560px){
  .kompetenz h3{ min-height:2lh; }
}

.ueber{
  display:grid; gap:clamp(30px,5vw,70px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.ueber__bild{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  background:linear-gradient(160deg,#f1f1f2,#e4e4e6);
  overflow:hidden;
}
.ueber__text h2{ font-size:clamp(28px,3.6vw,50px); letter-spacing:-.035em; margin-bottom:.6em; }
.ueber__text p{ color:var(--ink-2); margin-bottom:1em; }
.ueber__adresse{ font-size:14px; line-height:1.7; }
@media (max-width:860px){
  .ueber{ grid-template-columns:1fr; }
}

.abschnitt--dunkel{
  background:var(--ink);
  color:#fff;
}
.abschnitt--dunkel .abschnitt__auge{ color:var(--accent-hell); }
.infra{
  display:grid; gap:clamp(30px,5vw,70px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
}
.infra__text h2{ font-size:clamp(28px,3.6vw,50px); letter-spacing:-.035em; margin-bottom:.7em; }
.infra__text p{ color:rgba(255,255,255,.72); margin-bottom:1em; max-width:44ch; }
.infra__liste{
  margin:0; padding:0; list-style:none;
  display:grid;
}
.infra__liste li{
  display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline;
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:clamp(16px,1.5vw,19px); font-weight:500;
}
.infra__liste li:last-child{ border-bottom:1px solid rgba(255,255,255,.16); }
.infra__liste span{
  flex:1 1 200px;
  font-size:13.5px; font-weight:400; color:rgba(255,255,255,.6);
}
@media (max-width:860px){
  .infra{ grid-template-columns:1fr; }
}

.projekte{
  margin:0 0 clamp(46px,7vh,84px);
  display:grid;
}
.projekte > div{
  display:grid;
  grid-template-columns:minmax(0, 7.2rem) minmax(0, 1fr);
  gap:clamp(16px,3vw,44px);
  align-items:baseline;
  padding:clamp(17px,2.3vh,25px) 0;
  border-top:1px solid var(--line);
}
.projekte > div:last-child{ border-bottom:1px solid var(--line); }
.projekte dt{
  font-size:clamp(32px,3.9vw,54px); font-weight:600;
  letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.projekte dd{ margin:0; }
.projekte dd b{
  display:block; font-weight:600;
  font-size:clamp(17px,1.55vw,21px); letter-spacing:-.02em;
  margin-bottom:3px;
}
.projekte dd span{ color:var(--ink-3); font-size:14.5px; }
@media (max-width:560px){
  .projekte > div{ grid-template-columns:1fr; gap:6px; }
  .projekte dt{ text-align:left; }
}
.refs__mehr{ margin:clamp(26px,3.6vh,40px) 0 0; }

.refs{
  margin:0; padding:0; list-style:none;
  display:grid; gap:0;
  grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--line);
  position:relative;
}
.refs::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--line);
}
@media (max-width:1400px){ .refs{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:820px) { .refs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px) { .refs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.refs li{
  padding:20px 4px;
  border-bottom:1px solid var(--line);
  font-size:clamp(16px,1.5vw,20px); font-weight:500;
  letter-spacing:-.02em;
  color:var(--ink);
  -webkit-hyphens:auto; hyphens:auto;
  overflow-wrap:break-word;
}

.bald{
  min-height:100vh; min-height:100svh;
  display:grid; align-content:center; justify-items:start;
  gap:14px;
  padding:calc(var(--nav-h) + 10vh) var(--pad-breit) 12vh;
}
.bald__auge{
  font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}
.bald h1{ font-size:clamp(44px,8vw,104px); font-weight:600; letter-spacing:-.04em; }
.bald__kurz{ font-size:clamp(17px,1.8vw,22px); color:var(--ink-2); }
.bald__text{ max-width:52ch; color:var(--ink-2); margin-top:10px; }
.bald__text code{
  font-size:.92em; padding:1px 5px; border-radius:4px;
  background:rgba(0,0,0,.06);
}
.bald .cta__row{ margin-top:24px; justify-content:flex-start; }

.stage{
  position:relative;
  height:1638vh;
  background:var(--buehne-grund);
}
.stage__sticky{
  position:sticky; top:0;
  height:100vh; height:100lvh;
  overflow:hidden;
  background:var(--buehne-grund);
}
:root{
  --buehne-grund: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #f2f2f4 46%, #e9e9ec 100%);
}

.stage__canvas{
  position:absolute; inset:0;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y pinch-zoom;
}
.stage__canvas.is-grabbing{ cursor:grabbing; }
#gl{ display:block; width:100%; height:100%; }

.layer{
  position:absolute; inset:0;
  pointer-events:none;
}
.layer a,.layer button{ pointer-events:auto; }

.layer--hero,
.layer--look,
.layer--punkte{ opacity:0; }

.layer--hero{
  display:grid;
  grid-template-columns:1fr auto;
  align-content:end;
  gap:20px;
  padding:0 var(--pad) clamp(34px,6vh,68px);
}
.hero__title{ max-width:min(760px,64vw); }
.hero__serie{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:14px;
  text-wrap:wrap;
}
.code-ganz{ white-space:nowrap; }
.hero__title h1{
  font-size:var(--f-display);
  font-weight:600;
  letter-spacing:-.035em;
}
.hero__claim{
  margin-top:.55em;
  font-size:clamp(16px,1.7vw,23px); font-weight:500;
  color:var(--ink); max-width:34ch;
  letter-spacing:-.015em;
}
.hero__cta{ display:flex; gap:12px; align-self:end; }
@media (orientation:landscape) and (min-width:721px){
  .layer--hero::before{
    content:''; position:absolute; inset:0;
    background:var(--buehne-grund);
    -webkit-mask-image:radial-gradient(ellipse 62% 60% at 0% 100%, #000 48%, transparent 100%);
            mask-image:radial-gradient(ellipse 62% 60% at 0% 100%, #000 48%, transparent 100%);
    pointer-events:none;
  }
  .hero__title, .hero__cta{ position:relative; }
}
@media (orientation:landscape) and (min-width:721px) and (max-height:560px){
  .layer--hero::before{
    -webkit-mask-image:radial-gradient(ellipse 88% 98% at 0% 100%, #000 54%, transparent 100%);
            mask-image:radial-gradient(ellipse 88% 98% at 0% 100%, #000 54%, transparent 100%);
  }
}

.hero__hint{
  position:absolute; left:0; right:0; top:calc(var(--nav-h) + 22px);
  display:flex; justify-content:center; gap:22px;
  padding-left:288px;
  font-size:12px; color:var(--ink-3);
  height:32px; align-items:center;
}
@media (max-width:700px){
  .hero__hint{ padding-left:0; top:calc(var(--nav-h) + 62px); }
}
.drehhinweis{
  position:absolute; left:0; right:0; top:calc(var(--nav-h) + 22px);
  z-index:3; margin:0;
  display:flex; justify-content:center;
  pointer-events:none;
  opacity:0; transition:opacity .4s ease;
}
html.hat-3d .drehhinweis{ opacity:1; }
@media (max-height: 560px){
  .drehhinweis{ display:none; }
  .hero__hint{ padding-left:0; }
}
@media (orientation:landscape) and (max-height:500px){
  .hero__hint{ display:none; }
}
.hero__drag{
  display:inline-flex; align-items:center; gap:9px;
  height:32px; padding:0 14px 0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  color:var(--ink-2); font-size:12.5px; font-weight:500;
}
.dreh{ overflow:visible; }
.dreh__griff{ animation:drehGriff 2.6s cubic-bezier(.45,0,.35,1) infinite; }
.dreh__pfeil--l{ animation:drehPfeilL 2.6s cubic-bezier(.45,0,.35,1) infinite; }
.dreh__pfeil--r{ animation:drehPfeilR 2.6s cubic-bezier(.45,0,.35,1) infinite; }
@keyframes drehGriff{
   0%{ transform:translateX(0); }
  22%{ transform:translateX(-7px); }
  50%{ transform:translateX(0); }
  72%{ transform:translateX(7px); }
 100%{ transform:translateX(0); }
}
@keyframes drehPfeilL{
   0%,50%,100%{ opacity:.45; }
  22%{ opacity:1; }
}
@keyframes drehPfeilR{
   0%,50%,100%{ opacity:.45; }
  72%{ opacity:1; }
}
.ist-beantwortet .dreh__griff,
.ist-beantwortet .dreh__pfeil{ animation:none; }
.hero__scroll{ display:inline-flex; align-items:center; gap:7px; }
.hero__scroll i{
  width:1px; height:16px; background:currentColor; opacity:.5;
  animation:drop 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes drop{
  0%{ transform:translateY(-6px) scaleY(.4); opacity:0; }
  40%{ opacity:.7; }
  100%{ transform:translateY(7px) scaleY(1); opacity:0; }
}

@media (max-width:720px){
  .layer--hero{ grid-template-columns:1fr; align-content:end; }
  .hero__title{ max-width:none; }
  .hero__cta{ justify-content:flex-start; }
}

.layer--look{
  display:grid; align-content:start; justify-items:center;
  padding:clamp(90px,15vh,180px) var(--pad) 0;
}
.look__head{
  font-size:var(--f-h2);
  text-align:center;
  letter-spacing:-.04em;
}
@media (orientation:landscape) and (min-width:721px) and (max-height:940px){
  .layer--look::before{
    content:''; position:absolute; inset:0;
    background:var(--buehne-grund);
    -webkit-mask-image:radial-gradient(ellipse 46% 44% at 50% 0%, #000 52%, transparent 100%);
            mask-image:radial-gradient(ellipse 46% 44% at 50% 0%, #000 52%, transparent 100%);
    pointer-events:none;
  }
  .look__head{ position:relative; }
}
@media (orientation:landscape) and (min-width:721px) and (max-height:560px){
  .layer--look::before{
    -webkit-mask-image:radial-gradient(ellipse 50% 70% at 50% 0%, #000 56%, transparent 100%);
            mask-image:radial-gradient(ellipse 50% 70% at 50% 0%, #000 56%, transparent 100%);
  }
}

.layer--facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:0 var(--pad);
}
.layer--facts::before{
  content:'';
  position:absolute; inset:0;
  background:var(--buehne-grund);
  -webkit-mask-image:linear-gradient(90deg, transparent 40%, #000 64%);
          mask-image:linear-gradient(90deg, transparent 40%, #000 64%);
  opacity:var(--schleier, 0);
  pointer-events:none;
}
.facts{
  grid-column:2;
  justify-self:center;
  position:relative;
  min-height:270px;
  width:100%;
  max-width:510px;
}
.fact{
  position:absolute; inset:auto 0 auto 0;
  opacity:0;
  transform:translateY(18px);
}
.fact__idx{
  display:block; margin-bottom:14px;
  font-size:12px; font-weight:600; letter-spacing:.16em;
  color:var(--accent-leise);
}
.fact h3{ font-size:var(--f-h3); margin-bottom:.3em; }
.fact__sub{
  margin-bottom:.85em;
  font-size:clamp(13.5px,1vw,15.5px); font-weight:500;
  color:var(--ink); letter-spacing:-.005em;
}
.fact p{ color:var(--ink-2); font-size:clamp(15px,1.15vw,17px); }
.fact p.fact__sub{ color:var(--ink); }

@media (max-width:860px){
  .layer--facts{ grid-template-columns:1fr; align-items:end; padding-bottom:clamp(88px,8vh + 56px,136px); }
  .facts{ grid-column:1; max-width:none; min-height:230px; }
  .fact{ inset:auto 0 0 0; }
  .fact{ background:rgba(245,245,247,.94); border-radius:16px; padding:18px; }
  .layer--facts::before{ display:none; }
}

.stage__weiter{
  position:absolute; left:50%; z-index:3;
  bottom:calc(24px + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 22px;
  border:0; border-radius:999px;
  background:var(--ink);
  font:inherit; font-size:14.5px; font-weight:500; color:#fff;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.5);
  cursor:pointer;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%, 6px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), background .2s;
}
.stage__weiter.is-da{ opacity:1; visibility:visible; pointer-events:auto;
                      transform:translate(-50%, 0); }
.stage__weiter:hover{ background:#000; }
.stage__weiter svg{ opacity:.7; }

@media (max-width:860px){
  .stage__weiter{ bottom:calc(38px + env(safe-area-inset-bottom)); }
}

.dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(82px + env(safe-area-inset-bottom)); display:flex; gap:7px;
}
@media (max-width:860px){
  .dots{ bottom:calc(96px + env(safe-area-inset-bottom)); }
}
.dots i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(0,0,0,.18);
  transition:background .35s ease, transform .35s ease;
}
.dots i.is-on{ background:var(--ink); transform:scale(1.25); }

.stage--punkte{
  height:330vh;
}

.layer--punkte{ z-index:2; }

.punkt{
  position:absolute; left:0; top:0;
  margin:-17px 0 0 -13px;
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 14px 0 5px;
  border:0; border-radius:999px;
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
          backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px -12px rgba(0,0,0,.45);
  font:inherit; font-size:13.5px; font-weight:500; color:var(--ink);
  white-space:nowrap; cursor:pointer;
  pointer-events:auto;
  transition:background .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.punkt:hover{ background:#fff; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -12px rgba(0,0,0,.55); }
.punkt:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.punkt__nr{
  font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.punkt__ring{
  position:relative; flex:0 0 auto;
  width:16px; height:16px; border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 3px rgba(255,255,255,.85);
}
.punkt__ring::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--ink);
  animation:punktpuls 2.4s cubic-bezier(.3,0,.2,1) infinite;
}
.punkt:nth-of-type(2) .punkt__ring::after{ animation-delay:.18s; }
.punkt:nth-of-type(3) .punkt__ring::after{ animation-delay:.36s; }
.punkt:nth-of-type(4) .punkt__ring::after{ animation-delay:.54s; }
.punkt:nth-of-type(5) .punkt__ring::after{ animation-delay:.72s; }
.layer--punkte.ist-benutzt .punkt__ring::after{ animation:none; opacity:0; }
@keyframes punktpuls{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(2.5); opacity:0; }
  100%{ transform:scale(2.5); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .punkt__ring::after{ animation:none; opacity:.4; }
}
.punkt.ist-fort{ opacity:0; pointer-events:none; }
.punkt[disabled]{ opacity:0; pointer-events:none; }

@media (max-width:1100px){
  .punkt__name{ display:none; }
  .punkt:hover .punkt__name,
  .punkt:focus-visible .punkt__name{ display:inline; }
  .punkt{ padding-right:11px; }
}

.punkte__ruf{
  position:absolute; left:50%; translate:-50% 0;
  bottom:calc(26px + env(safe-area-inset-bottom));
  width:max-content; max-width:calc(100% - 2 * var(--pad));
  margin:0; padding:5px 13px; border-radius:999px;
  text-align:center;
  font-size:12.5px; color:var(--ink-2);
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
          backdrop-filter:blur(12px) saturate(1.3);
  transition:opacity .25s ease;
}
.stage.ist-offen .punkte__ruf{ opacity:0; }

.teiltafel{
  position:absolute; z-index:4;
  right:var(--pad); top:50%;
  width:min(430px, 40vw);
  max-height:calc(100svh - var(--nav-h) - 56px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:22px 26px 26px;
  border-radius:20px;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
          backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.35);
  opacity:0; transform:translate(16px,-50%);
  pointer-events:auto;
  transition:opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
.teiltafel.ist-da{ opacity:1; transform:translate(0,-50%); }
.teiltafel{ --tafel-unten:26px; }
.teiltafel::after{
  content:''; display:block; position:sticky; bottom:calc(-1 * var(--tafel-unten));
  height:48px; margin-top:-48px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom 8px / 14px 8px no-repeat,
             linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.97) 62%);
  pointer-events:none; opacity:0;
}
@media (orientation:landscape) and (max-height:500px){
  .teiltafel{ padding:14px 20px 20px; --tafel-unten:20px; }
  .teiltafel__zu{ height:32px; margin-bottom:10px; }
}
@supports (animation-timeline: scroll()){
  .teiltafel::after{ animation:tafelRest linear both; animation-timeline:scroll(nearest block); }
}
@keyframes tafelRest{ from{ opacity:1; } 90%{ opacity:1; } to{ opacity:0; } }
.teiltafel__zu{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 18px;
  height:38px; padding:0 18px;
  border:0; border-radius:999px;
  background:var(--ink); color:#fff;
  font:inherit; font-size:13.5px; font-weight:500; letter-spacing:-.01em;
  cursor:pointer;
  transition:background .25s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.teiltafel__zu svg{
  flex:0 0 auto;
  width:14px; height:14px; stroke-width:2;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.teiltafel__zu:hover{ background:#000; transform:translateY(-1px); }
.teiltafel__zu:hover svg{ transform:translateX(-3px); }
.teiltafel__zu:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.teiltafel .fact{ position:static; opacity:1; transform:none; }

@media (max-width: 860px) and (orientation: portrait), (max-aspect-ratio: 4/5){
  .teiltafel{
    right:var(--pad); left:var(--pad); top:auto;
    bottom:calc(20px + env(safe-area-inset-bottom));
    width:auto;
    max-height:56svh; overflow-y:auto; overscroll-behavior:contain;
    transform:translateY(18px);
  }
  .teiltafel.ist-da{ transform:none; }
}

html:not(.hat-3d) .layer--punkte{
  display:flex; flex-wrap:wrap; gap:8px;
  align-content:flex-end; justify-content:center; align-items:flex-end;
  padding:0 12px calc(58px + env(safe-area-inset-bottom));
}
html:not(.hat-3d) .layer--punkte .punkt{
  position:static; margin:0; height:36px; padding:0 13px 0 7px;
  opacity:1; pointer-events:auto;
}

@media (max-width: 860px) and (orientation: portrait), (max-aspect-ratio: 4/5){
  .layer--punkte{
    display:flex; flex-wrap:wrap; gap:8px;
    align-content:flex-end; justify-content:center; align-items:flex-end;
    padding:0 12px calc(58px + env(safe-area-inset-bottom));
  }
  .layer--punkte .punkt{
    position:static; margin:0;
    height:36px; padding:0 13px 0 7px;
    transform:none;
  }
  .layer--punkte .punkt.ist-fort{ opacity:1; pointer-events:auto; }
  .layer--punkte .punkt__name{ display:inline; }
  .punkte__ruf{ bottom:calc(24px + env(safe-area-inset-bottom)); }
  .stage.ist-offen .layer--punkte{ padding-bottom:calc(62svh + 8px); }
}

html .layer--punkte.ist-aus .punkt{ pointer-events:none; }

.buehne{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  aspect-ratio: var(--buehne-ar);
  width: min(100%, calc(var(--buehne-hoehe) * var(--buehne-ar)));
  height:auto;
  pointer-events:none;
}
.hero__canvas > canvas,
.stage__canvas > canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; }

@media (max-width:860px) and (orientation:portrait), (max-aspect-ratio:4/5){
  :root{ --buehne-ar: 0.6143; }
}

.standbild{
  position:absolute; inset:0;
  pointer-events:none;
}
@media (min-aspect-ratio: 8/5){
  .standbild{
    left:50%; right:auto;
    width:100vw;
    transform:translateX(-50%);
  }
}
.standbild.is-weg{ display:none; }
.standbild picture{ display:block; }
.standbild img{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
@media (max-width:860px) and (orientation:portrait), (max-aspect-ratio:4/5){
  .standbild img{
    inset:auto; left:50%; top:50%;
    width:calc(100% * 1260 / 860); height:auto;
    max-width:none;
    translate:-50% -50%;
    object-fit:fill;
  }
}

.abbild{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  object-fit:fill;
  pointer-events:none;
}
html.hat-abbild .standbild{ display:none; }

.standbild__chip{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}
.stage__canvas::after{
  content:'';
  position:absolute; left:0; top:0;
  height:2px; width:var(--lade, 0%);
  background:var(--ink);
  opacity:0;
  pointer-events:none;
  transition:width .2s linear, opacity .3s ease;
}
html.laedt-3d .stage__canvas::after{ opacity:.55; transition-delay:.6s, .6s; }

html.lade-ohne-mass.laedt-3d .stage__canvas::after{
  width:28%;
  animation:ladeWandern 1.4s ease-in-out infinite;
}
@keyframes ladeWandern{
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(357%); }
}
@media (prefers-reduced-motion: reduce){
  html.lade-ohne-mass.laedt-3d .stage__canvas::after{
    width:100%; animation:none; opacity:.3;
  }
}

.dreid-knopf{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  display:grid; gap:2px; justify-items:center;
  padding:11px 20px; border-radius:16px;
  background:var(--ink); color:#fff; border:0;
  font:inherit; cursor:pointer; pointer-events:auto;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.dreid-knopf:hover{ transform:translateX(-50%) translateY(-2px); }
.dreid-knopf span{ font-size:14px; font-weight:500; }
.dreid-knopf i{ font-style:normal; font-size:11px; opacity:.6; }
.dreid-hinweis{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-size:12px; color:var(--ink-3); pointer-events:none;
}

@media (max-width:860px) and (orientation:portrait), (max-aspect-ratio:4/5){
  .dreid-knopf,
  .dreid-hinweis{ top:calc(var(--nav-h) + 88px); bottom:auto; }
}
.stage:has(.layer--punkte:not(.ist-aus)) .dreid-knopf,
.stage:has(.layer--punkte:not(.ist-aus)) .dreid-hinweis{ top:calc(var(--nav-h) + 88px); bottom:auto; }
@media (orientation:landscape) and (max-height:500px){
  .dreid-knopf{ top:calc(var(--nav-h) + 12px); bottom:auto; left:auto; right:16px; transform:none; }
  .dreid-knopf:hover{ transform:translateY(-2px); }
}

.closer{
  background:var(--bg-deep);
  padding:clamp(70px,11vh,150px) 0 clamp(60px,9vh,120px);
  --pad-closer:max(var(--pad), (100% - 1400px) / 2);
}
.closer__head{
  font-size:var(--f-h2);
  padding-inline:var(--pad-closer);
  margin-bottom:clamp(34px,5vh,64px);
  letter-spacing:-.04em;
}
.closer__head:focus{ outline:none; }
.closer__head:focus-visible{
  outline:2px solid var(--accent); outline-offset:8px; border-radius:6px;
}
.closer__rail{
  display:flex; gap:22px;
  padding:0 var(--pad-closer) 12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad-closer);
}
.hat-schiene .closer__rail{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.hat-schiene .closer__rail::-webkit-scrollbar{ display:none; }

.schiene__nav{
  display:flex; justify-content:flex-end; gap:10px;
  margin-top:clamp(24px,3.2vh,42px);
  padding:0 var(--pad-closer,var(--pad));
}
.schiene__knopf{
  width:48px; height:48px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:#d2d2d7;
  color:var(--ink);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.schiene__knopf:hover{ background:#c4c4ca; }
.schiene__knopf:active{ background:#b6b6bd; transform:scale(.94); }
.schiene__knopf:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.schiene__knopf:disabled{
  cursor:default; color:#5c5c61; transform:none;
}
.schiene__knopf:disabled:hover{ background:#d2d2d7; }

@media (max-width:600px){
  .schiene__knopf{ width:44px; height:44px; }
}
.card{
  margin:0; flex:0 0 min(680px,82vw);
  scroll-snap-align:start;
}
.card__media{
  height:clamp(280px,44vh,520px);
  border-radius:var(--radius);
  display:grid; place-items:center;
  overflow:hidden;
}
.card__media--a{ background:linear-gradient(160deg,#f2f2f3,#e6e6e8); }
.card__media--b{ background:linear-gradient(160deg,#f1f1f3,#e3e3e6); }
.card__media--c{ background:linear-gradient(160deg,#f2f1ef,#e8e6e2); }
.card__media--d{ background:linear-gradient(160deg,#f0f1f2,#e4e5e7); }
.card__media--e{ background:linear-gradient(160deg,#f3f2f1,#e7e6e4); }
.card__ph{
  display:grid; place-items:center; gap:12px;
  color:var(--ink-3); font-size:12.5px; letter-spacing:.02em;
}
.card__ph svg{ width:76px; height:76px; stroke-width:1.1; opacity:.7; }
.card__foto{
  place-self:stretch;
  display:block;
  width:100%; height:100%;
  min-width:0; min-height:0;
  object-fit:cover; object-position:var(--lage, center);
}
.card__media > picture{ display:contents; }
@media (max-width:600px) and (orientation:portrait){
  .card__foto{ object-position:var(--lage-telefon, var(--lage, center)); }
}
.card figcaption{
  margin-top:22px;
  color:var(--ink-2);
  font-size:clamp(15px,1.2vw,18px);
  max-width:52ch;
}
.card figcaption b{ color:var(--ink); font-weight:600; }
.card figcaption p{ margin:0; }

@media (max-height:560px){
  .card__media{ height:clamp(120px, calc(100svh - 260px), 320px); }
  .card figcaption{ margin-top:14px; }
}
@media (max-height:560px) and (orientation:landscape){
  .card{
    flex-basis:min(760px, 88vw);
    display:grid; grid-template-columns:minmax(0, 46%) minmax(0, 1fr);
    column-gap:20px; align-items:start;
  }
  .card__media{ height:clamp(150px, calc(100svh - 150px), 320px); }
  .card figcaption{ margin-top:0; }
}
.card__idx{
  display:block; margin-bottom:10px;
  font-size:12px; font-weight:600; letter-spacing:.16em;
  color:var(--accent-leise);
  font-variant-numeric:tabular-nums;
}
.card__title{
  margin-bottom:.35em;
  font-size:clamp(19px,1.7vw,26px);
  color:var(--ink); letter-spacing:-.02em;
}

.specs{
  padding:clamp(70px,11vh,140px) var(--pad-breit);
  background:var(--bg);
}
.specs__head{ margin-bottom:clamp(28px,4vh,52px); }
.specs__head h2{ font-size:clamp(28px,3.6vw,48px); }
.specs__note{ margin-top:10px; font-size:13px; color:var(--ink-3); }
.specs__grid{
  margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  column-gap:clamp(24px,3.2vw,64px);
  row-gap:0;
  border-bottom:1px solid var(--line);
}
.specs__grid > div{
  display:grid; align-content:start; gap:5px;
  padding:16px 0 19px;
  border-top:1px solid var(--line);
}
@media (min-width:760px){
  .specs__grid.specs__grid--fest{
    grid-template-columns:repeat(var(--spalten-mitte, 2), minmax(0, 1fr));
  }
  .specs__grid.specs__grid--fest > .specs__breit{ grid-column:span var(--breit-mitte, 1); }
}
@media (min-width:1100px){
  .specs__grid.specs__grid--fest{
    grid-template-columns:repeat(var(--spalten, 4), minmax(0, 1fr));
  }
  .specs__grid.specs__grid--fest > .specs__breit{ grid-column:span var(--breit, 2); }
}
.specs__grid dt{ color:var(--ink-2); font-size:13px; line-height:1.35; }
.specs__grid dd{
  margin:0; font-weight:500; font-size:15px; line-height:1.45;
  text-align:left;
}

.db{
  display:grid; grid-template-columns:minmax(0, 1fr);
  column-gap:clamp(32px, 4.4vw, 72px); row-gap:clamp(28px, 4vh, 44px);
}
@media (min-width:1180px){
  .db{ grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; position:relative; }
  .db::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:1px; background:var(--line); pointer-events:none;
  }
}
.db__spalte{ display:grid; row-gap:clamp(26px, 3.6vh, 40px); align-content:start; }
.db__gruppe{ display:grid; row-gap:16px; }
.db__titel{
  display:flex; align-items:center; gap:16px;
  margin:0 0 2px;
  font-size:clamp(17px, 1.35vw, 20px); font-weight:700; letter-spacing:-.02em; line-height:1.2;
  color:var(--ink);
  white-space:nowrap;
}
.db__titel{ justify-content:center; text-align:center; }
.db__titel::before, .db__titel::after{ content:""; flex:1 1 0; height:1px; background:rgba(0,0,0,.22); }
.db__posten{ border-top:1px solid rgba(0,0,0,.42); }
.db__kopf{
  display:flex; align-items:baseline; gap:12px;
  margin:0; padding:8px 0 7px;
  border-bottom:1px solid var(--line);
  font-size:12px; color:var(--ink-3);
}
.db__nr{ flex:0 0 auto; min-width:2.2em; font-size:11px; opacity:.75; font-variant-numeric:tabular-nums; }
.db__art{
  flex:0 1 auto;
  padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.055);
  font-size:10.5px; letter-spacing:.04em; line-height:1.5; color:var(--ink-2);
}
.db__posten[data-art="std"] .db__art{ display:none; }
.db__zeilen > div[data-k="std"] dt{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.db__name{
  margin-left:auto; text-align:right;
  font-size:14px; font-weight:600; color:var(--ink);
}
.db__zeilen{ margin:0; }
.db__zeilen > div{
  display:flex; align-items:baseline; gap:12px;
  padding:7px 0;
  border-bottom:1px solid var(--line);
}
.db__posten:not(:last-child) .db__zeilen > div:last-child{ border-bottom:0; }
.db__zeilen dt{
  flex:0 0 auto;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
}
.db__zeilen dd{
  margin:0 0 0 auto; text-align:right;
  font-size:14px; line-height:1.45; color:var(--ink);
}
.db__name .db__zusatz{ font-weight:400; }
.db__zusatz{ font-size:13px; color:var(--ink-3); }
.db__zeilen dd .db__zusatz::before{ content:"· "; content:"· " / ""; }
@media (max-width:520px){
  .db__art{ display:none; }
  .db__zeilen > div{ flex-wrap:wrap; row-gap:2px; }
}

.specs__aktion{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.specs--db .specs__head{ text-align:center; margin-bottom:clamp(24px, 3.4vh, 40px); }
.specs--db{ padding-block:clamp(56px, 8vh, 100px); }
.specs--db .specs__aktion{ justify-content:center; }
@media (min-width:1180px){
  .db{ column-gap:clamp(32px, 4.4vw, 56px); }
  .db__spalte{ row-gap:26px; }
  .db__gruppe{ row-gap:10px; }
  .db__titel{ margin:0 0 6px; font-size:18px; }
  .db__kopf{ padding:6px 0 5px; line-height:1.35; }
  .db__zeilen > div{ padding:6px 0; }
  .db__zeilen dd{ line-height:1.4; }
  .specs--db{ padding-block:clamp(28px, 3.4vh, 64px); }
  .specs--db .specs__head{ margin-bottom:20px; }
  .specs--db .specs__note{ margin-top:8px; }
  .specs--db .specs__aktion{ margin-top:14px; }
}
.db{ column-gap:22px; row-gap:16px; }
.db__spalte{ row-gap:16px; }
.db__gruppe{ background:var(--bg-deep); border-radius:var(--radius); padding:20px 18px 6px; row-gap:0; }
.db__titel{ justify-content:flex-start; text-align:left; margin:0 0 6px; }
.db__titel::before, .db__titel::after{ display:none; }
.db__nr, .db__art{ display:none; }
.db__posten[data-art="ohne"] .db__art{
  display:block; order:2; margin-top:1px; padding:0; border-radius:0; background:none;
  font-size:12.5px; letter-spacing:0; line-height:1.4; color:var(--ink-3);
}
.db__posten{
  display:grid; grid-template-columns:minmax(0, 36%) minmax(0, 1fr); column-gap:28px; align-items:baseline;
  border-top:1px solid var(--line); padding:13px 0 12px;
}
.db__titel + .db__posten{ border-top:0; }
.db__kopf{ display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:0; padding:0; border:0; }
.db__name{ margin:0; text-align:left; font-size:14px; font-weight:500; line-height:1.45; color:var(--ink-2); }
.db__name .db__zusatz{ display:block; margin-top:1px; font-size:12.5px; font-weight:400; color:var(--ink-3); }
.db__zeilen > div{ display:block; padding:0; border:0; }
.db__zeilen > div + div{ margin-top:9px; }
.db__zeilen dt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.db__zeilen dd{ margin:0; text-align:left; font-size:14px; line-height:1.45; font-weight:500; color:var(--ink); }
.db__zeilen dd .db__zusatz{ display:block; margin-top:1px; font-size:12.5px; line-height:1.4; font-weight:400; color:var(--ink-3); }
.db__zeilen dd .db__zusatz::before{ content:none; }
.db__zeilen > div[data-k="opt2"] dd::before{ content:"oder "; font-weight:400; color:var(--ink-3); }
.db__zeilen > div[data-k="bsp"]:first-child dd::before{ content:"z. B. "; font-weight:400; color:var(--ink-3); }
.db__zeilen > div[data-k="optionen"] dd::before{ content:"optional "; font-weight:400; color:var(--ink-3); }
.specs--db:lang(en) .db__zeilen > div[data-k="opt2"] dd::before{ content:"or "; }
.specs--db:lang(en) .db__zeilen > div[data-k="bsp"]:first-child dd::before{ content:"e.g. "; }
@media (min-width:1180px){
  .db{ column-gap:22px; }
  .db::before{ display:none; }
  .db__spalte{ row-gap:22px; }
  .db__gruppe{ padding:24px 30px 10px; }
  .db{ display:block; columns:2; column-gap:22px; }
  .db__spalte{ display:contents; }
  .db__gruppe{ break-inside:avoid; margin-bottom:22px; }
  .db__titel{ margin:0 0 8px; font-size:19px; }
  .db__kopf{ padding:0; }
  .db__zeilen > div{ padding:0; }
  .db__zeilen dd{ line-height:1.45; }
}
@media (max-width:520px){
  .db__posten{ grid-template-columns:minmax(0, 1fr); row-gap:3px; }
}
.btn--pdf{
  height:54px; padding:0 26px 0 20px; gap:12px;
  font-size:16px; font-weight:600;
  background:var(--ink); color:#fff;
  box-shadow:0 14px 28px -16px rgba(0,0,0,.55);
}
.btn--pdf > svg{ margin-left:0; opacity:1; }
.btn--pdf .btn__pfeil{ opacity:.8; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.btn--pdf[href]:hover{ background:#000; transform:translateY(-1px); }
.btn--pdf[href]:hover .btn__pfeil{ transform:translateY(2px); }
.btn--pdf[aria-disabled="true"]{ cursor:default; }
.btn--pdf.btn--anfrage:hover .btn__pfeil{ transform:translateX(2px); }
.btn__folgt{
  padding:3px 9px;
  border-radius:999px; background:rgba(255,255,255,.16);
  font-size:11px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
@media (max-width:520px){
  .specs__aktion{ flex-direction:column; align-items:stretch; }
  .btn--pdf{
    justify-content:flex-start;
    height:auto; min-height:54px; padding-block:12px;
    white-space:normal; line-height:1.25; text-align:left;
  }
  .btn--pdf .btn__folgt{ flex:0 0 auto; }
  .btn--pdf .btn__folgt, .btn--pdf .btn__pfeil{ margin-left:auto; }
}

.db-wahl{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.db-variante{ display:flex; align-items:center; }
@media (max-width:520px){ .db-variante{ justify-content:center; } }
.db-variante__wahl{
  display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap;
  margin:0; padding:4px;
  border-radius:999px; background:#fff; border:1px solid var(--line);
}
.db-variante__wahl label{
  padding:6px 14px; border-radius:999px;
  font-size:13px; font-weight:500; color:var(--ink-2);
  cursor:pointer; transition:background .2s, color .2s;
}
#db-v-spd:checked ~ .specs__head label[data-v="spd"],
#db-v-so:checked  ~ .specs__head label[data-v="so"]{ background:var(--ink); color:#fff; }
#db-v-spd:focus-visible ~ .specs__head label[data-v="spd"],
#db-v-so:focus-visible  ~ .specs__head label[data-v="so"]{ outline:2px solid var(--ink); outline-offset:2px; }
#db-v-spd:checked ~ * [data-nur]:not([data-nur="spd"]),
#db-v-so:checked  ~ * [data-nur]:not([data-nur="so"]){ display:none; }

.cta{
  padding:clamp(80px,13vh,170px) var(--pad-breit);
  background:var(--bg-deep);
  text-align:center;
}
.cta h2{ font-size:var(--f-h2); letter-spacing:-.04em; text-wrap:balance; }
@media (max-width:600px){ .cta h2 br.cta__umbruch{ display:none; } }
.cta p{ margin:18px auto 34px; color:var(--ink-2); max-width:46ch; }
.cta__row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta__fuss{ margin-top:28px; font-size:13.5px; color:var(--ink-3); }

.kontakt{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(16px, 2vw, 26px);
  align-items:stretch;
  max-width:var(--satz);
  margin:6px auto 0;
  text-align:left;
}

.kontakt__ort{
  position:relative; display:block; overflow:hidden;
  border-radius:20px; border:1px solid var(--line);
  background:#f2f2f4;
  color:inherit; text-decoration:none;
  min-height:300px;
}
.kontakt__ort img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  position:absolute; inset:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.kontakt__ort:hover img{ transform:scale(1.035); }
@media (prefers-reduced-motion: reduce){
  .kontakt__ort img{ transition:none; }
  .kontakt__ort:hover img{ transform:none; }
}
.kontakt__ortBand{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:38px 22px 18px;
  background:linear-gradient(to top, rgba(255,255,255,.94) 38%, rgba(255,255,255,0));
}
.kontakt__ortText{ display:flex; flex-direction:column; font-size:14px; color:var(--ink-2); }
.kontakt__ortText b{ font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.kontakt__ortAuf{
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  padding-bottom:2px;
  font-size:13px; font-weight:500; color:var(--ink-3);
  transition:color .2s ease;
}
.kontakt__ort:hover .kontakt__ortAuf{ color:var(--ink); }
.kontakt__ort:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.kontakt__karte{
  display:flex; flex-direction:column;
  gap:22px;
  padding:clamp(22px, 2.4vw, 30px);
  border-radius:20px;
  background:var(--bg);
}
.kontakt__haupt{ align-self:flex-start; }

.kontakt__liste{ display:grid; gap:14px; margin:0 0 12px; }
.kontakt__liste > div{ display:grid; gap:2px; }
.kontakt__liste dt{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.kontakt__liste dd{
  margin:0; font-size:clamp(15px, 1.15vw, 17px); color:var(--ink);
}
.kontakt__liste a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.kontakt__liste a:hover{ border-bottom-color:var(--ink); }

.kontakt__sozial{
  margin-top:auto;
  padding-top:20px; border-top:1px solid var(--line);
}
.kontakt__sozialKopf{
  display:block; margin-bottom:12px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.kontakt__sozial ul{ display:flex; gap:8px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.kontakt__sozial a{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--bg-deep);
  color:var(--ink-2);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.kontakt__sozial a:hover{ background:var(--ink); color:#fff; }
.kontakt__sozial a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.cta p.kontakt__quelle{
  max-width:var(--satz); margin:22px auto 0;
  font-size:12px; line-height:1.5; color:var(--ink-3);
  text-align:left;
}
.kontakt__quelle a{ color:inherit; }

@media (max-width:820px){
  .kontakt{ grid-template-columns:1fr; }
  .kontakt__ort{ min-height:0; aspect-ratio:16/10; }
  .kontakt__ort img{ position:static; height:auto; aspect-ratio:16/10; }
  .cta p.kontakt__quelle{ text-align:center; }
}

@media (max-width:560px){
  .kontakt__ortBand{
    flex-direction:column; align-items:flex-start; gap:5px;
    padding:24px 18px 15px;
  }
  .kontakt__ort{ aspect-ratio:4/3; }
  .kontakt__ortAuf{ padding-bottom:0; }
}

.foot{
  padding:40px var(--pad-breit) 60px;
  background:var(--bg);
  border-top:1px solid var(--line);
  color:var(--ink-3);
  font-size:12.5px;
  display:grid; gap:20px; justify-items:start;
}
body:has(> main.anfrage--schmal){ display:flex; flex-direction:column; min-height:100vh; min-height:100svh; }
body:has(> main.anfrage--schmal) > main{ flex:1 0 auto; }
.foot__brand{
  color:var(--ink); font-weight:600; letter-spacing:.1em;
  padding:6px 0; margin:-6px 0;
}
.foot__brand:hover{ text-decoration:underline; text-underline-offset:.22em; }

.foot__recht{
  display:flex; flex-wrap:wrap; gap:0 22px;
  font-size:13.5px;
}
.foot__recht a{ color:var(--ink); text-decoration:underline; text-underline-offset:.18em; }
.foot__recht a:hover{ text-decoration-thickness:2px; }
.foot__recht a{ padding:10px 0; margin:-10px 0; }
.foot__hinweis{ font-size:12.5px; color:var(--ink-3); }

.datenblatt{
  padding:calc(var(--nav-h) + clamp(34px,5vh,64px)) var(--pad-breit) 0;
  background:var(--bg-deep);
}
.datenblatt__weg{
  margin:0 0 clamp(26px,3.6vh,40px);
  font-size:13px; color:var(--ink-3);
}
.datenblatt__weg a{
  color:var(--ink-2); text-decoration:underline; text-underline-offset:.18em;
  display:inline-block; padding:6px 0; margin:-6px 0;
}
.datenblatt__weg span{ margin:0 6px; }

.datenblatt__kopf{ max-width:46rem; margin:0 0 clamp(30px,4.4vh,48px); }
.datenblatt__kopf h1{ font-size:var(--f-h2); letter-spacing:-.04em; margin:0 0 20px; }
.datenblatt__lead{ color:var(--ink-2); }

.datenblatt__paar{
  display:grid;
  grid-template-columns:minmax(0,0.55fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);
  align-items:center;
  margin:0 0 clamp(40px,6vh,72px);
}
.datenblatt__paar .datenblatt__bild{
  margin:0;
  padding:clamp(18px,2.4vw,34px);
  border-radius:var(--radius);
  background:linear-gradient(165deg,#f4f4f6,#e9eaee);
}
.datenblatt__paar .datenblatt__bild img{
  max-height:clamp(320px,56vh,600px);
  background:none;
  border-radius:0;
}
.datenblatt__paar .datenblatt__satz{ margin:0; }
@media (max-width:760px){
  .datenblatt__paar{ grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vh,30px); }
  .datenblatt__paar .datenblatt__bild img{ max-height:clamp(280px,44vh,420px); }
}

.datenblatt.datenblatt--achse .datenblatt__kopf{
  margin-inline:auto; text-align:center; max-width:52rem;
}
.datenblatt.datenblatt--achse .datenblatt__kopf h1{ text-wrap:balance; }
.datenblatt.datenblatt--achse .datenblatt__lead{ max-width:40rem; margin-inline:auto; }
.datenblatt.datenblatt--achse .datenblatt__satz{
  margin-inline:auto; max-width:34ch;
  text-align:center; text-wrap:balance;
}

.vitrine{
  --kasten-h:clamp(360px,66vh,700px);
  --luft-oben:clamp(64px,15vh,180px);
  --blende:clamp(26px,5vh,56px);

  margin:0 calc(var(--pad-breit) * -1) clamp(30px,4.4vh,58px);
  padding:var(--luft-oben) var(--pad) 0;
  --luecke:clamp(34px,4.4vh,52px);
  display:grid; justify-items:center; gap:var(--luecke);
  position:relative;
  text-align:center;
  overflow:hidden;
  overflow:clip;
  -webkit-user-select:none; user-select:none;
}
@media (orientation:landscape) and (max-height:500px){
  .vitrine{
    --kasten-h:max(220px, calc(100svh - var(--nav-h) - 64px));
    --luft-oben:40px;
  }
}
.vitrine::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:calc(var(--luft-oben) - 4%); translate:-50% 0;
  width:min(720px,88%); height:calc(var(--kasten-h) + 12%);
  background:radial-gradient(52% 56% at 50% 46%,
             #eceef1 0%, rgba(236,238,241,.52) 48%, rgba(236,238,241,0) 76%);
}
@supports (mask-image: linear-gradient(#000,#000)) or (-webkit-mask-image: linear-gradient(#000,#000)){
  .vitrine{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--blende));
    mask-image:linear-gradient(180deg,transparent 0,#000 var(--blende));
  }
}

.vitrine__raum{
  position:relative; z-index:1;
  height:var(--kasten-h);
  aspect-ratio:var(--kasten-verh, 560 / 2490);
}

.vitrine__schatten{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:-2.4%; translate:-50% 0;
  width:186%; height:2.2%;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
             rgba(20,22,26,.30) 0%, rgba(20,22,26,0) 72%);
  transition:width .55s cubic-bezier(.22,.61,.24,1),
             opacity .55s cubic-bezier(.22,.61,.24,1);
  transition-delay:.16s;
}
.vitrine[data-zustand="offen"] .vitrine__schatten{ width:224%; opacity:.72; }

.vitrine__mass{
  position:absolute; z-index:0; margin:0;
  font-size:12px; letter-spacing:.07em;
  color:var(--ink-3); white-space:nowrap; pointer-events:none;
}
.vitrine__mass--hoch{
  top:50%; right:calc(100% + clamp(14px,2.4vw,34px));
  translate:0 -50%;
  writing-mode:vertical-rl; rotate:180deg;
}
.vitrine__mass--breit{
  top:calc(100% + clamp(10px,1.6vh,18px)); left:50%;
  translate:-50% 0;
}

.enthuellung{
  position:absolute; inset:0; z-index:1;
  display:block;
}
.enthuellung img.enthuellung__koerper,
.enthuellung img.enthuellung__deckel{
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  max-width:none; max-height:none;
  border-radius:0; background:none;
  object-fit:fill;
  display:block;
}
.enthuellung img.enthuellung__deckel{
  opacity:0;
  left:-2%; top:-2%; width:104%; height:104%;
}

.vitrine[data-zustand] .enthuellung img.enthuellung__deckel{
  opacity:1;
  translate:0 var(--zug,0px);
  transition:translate .52s cubic-bezier(.22,.61,.24,1),
             rotate    .52s cubic-bezier(.22,.61,.24,1),
             opacity   .30s linear;
  transition-delay:0s,0s,0s;
}
.vitrine[data-zustand].zieht .enthuellung img.enthuellung__deckel{
  transition:none;
}
.vitrine[data-zustand="offen"] .enthuellung img.enthuellung__deckel{
  translate:4% -132%;
  rotate:5.5deg;
  opacity:0;
  transition-delay:0s,0s,.24s;
  pointer-events:none;
}

.vitrine[data-zustand="zu"] .enthuellung img.enthuellung__deckel{
  cursor:grab;
  touch-action:pan-y;
}
.vitrine[data-zustand="zu"].zieht .enthuellung img.enthuellung__deckel{
  cursor:grabbing;
}

.vitrine__knopf{ z-index:2; }
.vitrine__knopf:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.vitrine__knopf svg{ margin:0 9px 0 0; opacity:.6; }
.vitrine[data-zustand="zu"]   .vitrine__wort--auf,
.vitrine[data-zustand="offen"] .vitrine__wort--zu{ display:none; }
.vitrine[data-zustand="offen"] .vitrine__knopf svg{ rotate:180deg; }

.vitrine__bei{
  margin:0; max-width:34rem;
  font-size:13.5px; line-height:1.5; color:var(--ink-3);
}


.vitrine__raum,
.vitrine__modell{ grid-row:1; grid-column:1; }

.vitrine__modell{
  --vorrat:.2;
  position:relative; z-index:1;
  width:min(100%, 720px);
  height:calc(var(--kasten-h) * (1 + 2 * var(--vorrat)));
  margin-block:calc(var(--kasten-h) * var(--vorrat) * -1);
  touch-action:pan-y;
  cursor:grab;
  visibility:hidden; opacity:0;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.vitrine__modell.is-grabbing{ cursor:grabbing; }

.vitrine__leinwand{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  opacity:0; transition:opacity .45s ease;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-composite:intersect;
}
.vitrine__modell.is-da .vitrine__leinwand{ opacity:1; }
@media (max-width:760px){
  .vitrine__modell{ width:calc(100% + 2 * var(--pad)); }
}

.vitrine__bezug{
  position:absolute; left:50%;
  top:calc(var(--vorrat) / (1 + 2 * var(--vorrat)) * 100%);
  height:calc(100% / (1 + 2 * var(--vorrat))); aspect-ratio:.42;
  translate:-50% 0;
  pointer-events:none;
}
.vitrine__bezug::after{
  content:''; position:absolute;
  left:50%; bottom:-2.4%; translate:-50% 0;
  width:calc(186% * (560 / 2490) / .42); height:2.2%;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
             rgba(20,22,26,.30) 0%, rgba(20,22,26,0) 72%);
}

.vitrine__modell::after{
  content:''; position:absolute; left:0; top:0;
  height:2px; width:var(--lade,0%);
  background:var(--ink); opacity:0;
  transition:width .2s linear, opacity .3s ease;
  pointer-events:none;
}
html.laedt-3d .vitrine[data-ansicht="modell"] .vitrine__modell::after{ opacity:.5; }
html.lade-ohne-mass.laedt-3d .vitrine[data-ansicht="modell"] .vitrine__modell::after{
  width:28%; animation:ladeWandern 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  html.lade-ohne-mass.laedt-3d .vitrine[data-ansicht="modell"] .vitrine__modell::after{
    width:100%; animation:none; opacity:.3;
  }
}

.vitrine__ansicht{
  position:relative; z-index:2;
  display:inline-flex; gap:2px; padding:3px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
}
.vitrine__ansicht[hidden]{ display:none; }
.vitrine__segment{
  -webkit-appearance:none; appearance:none;
  margin:0; border:0; border-radius:999px;
  padding:7px 16px;
  background:transparent; color:var(--ink-2);
  font:inherit; font-size:13.5px; font-weight:500; line-height:1.2;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.vitrine__segment:hover{ color:var(--ink); }
.vitrine__segment[aria-pressed="true"]{
  background:#fff; color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06);
}
.vitrine__segment:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.vitrine__dreh{ display:none; margin:0; font-size:13.5px; font-weight:500; color:var(--ink); }
.vitrine__bei-modell{ display:none; }

.vitrine[data-ansicht="modell"] .vitrine__modell{
  visibility:visible; opacity:1;
  transition:opacity .35s ease, visibility 0s;
}
.vitrine__raum{ transition:none; }
.vitrine[data-ansicht="modell"].modell-da .vitrine__raum{
  visibility:hidden; opacity:0;
  transition:opacity .3s ease .2s, visibility 0s linear .5s;
}
.vitrine[data-ansicht] .vitrine__knopf,
.vitrine[data-ansicht] .vitrine__dreh{
  grid-row:3; grid-column:1; align-self:center;
  margin-top:calc(14px - var(--luecke));
}
.vitrine[data-ansicht] .vitrine__dreh{ display:block; visibility:hidden; }

.vitrine[data-ansicht="modell"] .vitrine__knopf{ visibility:hidden; }
.vitrine[data-ansicht="modell"] .vitrine__dreh{ visibility:visible; }

.vitrine[data-ansicht="modell"] .vitrine__bei-foto{ display:none; }
.vitrine[data-ansicht="modell"] .vitrine__bei-modell{ display:inline; }

.vitrine__blick{
  grid-row:1; grid-column:1; align-self:start;
  position:relative; z-index:1;
  height:calc(var(--kasten-h) * var(--blick-h, 1));
  visibility:hidden; opacity:0;
  transition:opacity .3s ease .2s, visibility 0s linear .5s;
}
.vitrine__blick img{
  display:block; height:100%; width:auto; max-width:none;
}
.vitrine.vitrine--ansichten .vitrine__blick.ist-an{
  z-index:2; visibility:visible; opacity:1;
  transition:opacity .35s ease, visibility 0s;
}
.vitrine.vitrine--ansichten[data-ansicht]:not([data-ansicht="foto"]) .vitrine__raum{
  visibility:hidden; opacity:0;
  transition:opacity .3s ease .2s, visibility 0s linear .5s;
}
.vitrine.vitrine--ansichten[data-ansicht]:not([data-ansicht="foto"]) .vitrine__knopf,
.vitrine.vitrine--ansichten[data-ansicht]:not([data-ansicht="foto"]) .vitrine__punkte{
  visibility:hidden;
}
.vitrine__bei-blick{ display:none; }
.vitrine.vitrine--ansichten[data-ansicht]:not([data-ansicht="foto"]) .vitrine__bei-foto{ display:none; }
.vitrine.vitrine--ansichten .vitrine__bei-blick.ist-an{ display:inline; }

.vitrine.vitrine--frei .enthuellung img.enthuellung__koerper{
  border-radius:0;
  transition:opacity 0s;
}
.vitrine.vitrine--frei[data-zustand="zu"]:not(.zieht) .enthuellung img.enthuellung__koerper{
  opacity:0;
  transition:opacity 0s linear .52s;
}

@media (prefers-reduced-motion:reduce){
  .vitrine__modell, .vitrine__leinwand, .vitrine__raum, .vitrine__segment, .vitrine__blick{ transition:none; }
  .vitrine.vitrine--frei[data-zustand="zu"]:not(.zieht) .enthuellung img.enthuellung__koerper{
    transition-delay:.16s;
  }
}

@media (max-width:760px){
  .vitrine{ --kasten-h:clamp(320px,52vh,540px); --luft-oben:clamp(48px,11vh,120px); }
  .datenblatt.datenblatt--achse .datenblatt__satz{ text-align:left; max-width:none; }
}
@media (max-width:360px){
  .vitrine__mass--hoch{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .vitrine[data-zustand] .enthuellung img.enthuellung__deckel,
  .vitrine[data-zustand="offen"] .enthuellung img.enthuellung__deckel{
    translate:0; rotate:0deg;
    transition:opacity .16s linear;
    transition-delay:0s;
  }
  .vitrine__schatten{ transition:none; }
}

.vitrine__punkte{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  visibility:hidden;
}
.vitrine[data-zustand="offen"] .vitrine__punkte{ visibility:inherit; }
.vitrine[data-ansicht="modell"] .vitrine__punkte{ visibility:hidden; }

.vitrine__punkt .punkt{
  padding:0 14px 0 5px;
  -webkit-tap-highlight-color:transparent;
}
.vitrine__punkt .punkt__name{ display:inline; }
.vitrine__punkt--links .punkt{
  flex-direction:row-reverse;
  padding:0 5px 0 14px;
}
.vitrine__punkt.ist-an .punkt{
  background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -12px rgba(0,0,0,.55);
}

.vitrine[data-zustand="offen"] .vitrine__punkt .punkt{
  animation:punktAuf .5s cubic-bezier(.2,.7,.2,1) calc(.46s + var(--i) * 70ms) backwards;
}
@keyframes punktAuf{
  from{ opacity:0; translate:0 6px; }
  to  { opacity:1; translate:0 0; }
}
.vitrine__punkt .punkt__ring::after{ animation:none; opacity:0; }
.vitrine[data-zustand="offen"] .vitrine__punkt .punkt__ring::after{
  animation:punktpuls 2.4s cubic-bezier(.3,0,.2,1) calc(.9s + var(--i) * .18s) 3 backwards;
}
.vitrine[data-zustand] .vitrine__punkte.ist-benutzt .punkt__ring::after{ animation:none; opacity:0; }

.vitrine__tafel{
  position:absolute; z-index:3;
  box-sizing:border-box;
  width:280px;
  margin:0;
  padding:14px 16px 15px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
          backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 0 0 1px rgba(0,0,0,.07), 0 10px 30px rgba(0,0,0,.14);
  text-align:left;
  -webkit-user-select:text; user-select:text;
  pointer-events:auto;
  visibility:hidden; opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.7,.2,1), visibility 0s linear .24s;
}
.vitrine__punkt.ist-an .vitrine__tafel{
  visibility:inherit; opacity:1; transform:none;
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.vitrine__tafel-kopf{
  display:flex; align-items:baseline; gap:.5em;
  margin:0 0 5px;
  font-size:1.0625rem; font-weight:600; line-height:1.3; letter-spacing:-.01em;
  color:var(--ink);
}
.vitrine__tafel-nr{
  flex:none;
  font-size:11px; font-weight:600; letter-spacing:.1em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.vitrine__tafel-text{
  margin:0;
  font-size:.875rem; line-height:1.5; color:var(--ink-2);
}

@media (max-width:1099.98px){
  .vitrine__punkt{ display:contents; }
  .vitrine__punkt .punkt{ left:var(--x); top:var(--y); }
  .vitrine__punkt--links .punkt{
    margin:-17px 0 0 0;
    transform:translateX(calc(-100% + 13px));
  }
  .vitrine__tafel{
    --tafel-b:min(340px, 100vw - 2 * var(--pad));
    left:50%; width:var(--tafel-b); margin-left:calc(var(--tafel-b) / -2);
  }
  .vitrine__punkt--oben  .vitrine__tafel{ top:calc(var(--y) + 26px); }
  .vitrine__punkt--unten .vitrine__tafel{ bottom:calc(100% - var(--y) + 26px); }
  .vitrine__punkte.hat-tafel .vitrine__punkt:not(.ist-an) .punkt{
    opacity:0; pointer-events:none;
  }
}

@media (min-width:1100px){
  .vitrine__punkt{
    position:absolute; left:var(--x); top:var(--y);
    display:flex;
    margin:-17px 0 0 -13px;
  }
  .vitrine__punkt--links{
    margin:-17px 0 0 0;
    transform:translateX(calc(-100% + 13px));
  }
  .vitrine__punkt.ist-an{ z-index:1; }
  .vitrine__punkt .punkt{ position:relative; margin:0; }
  .vitrine__punkt--rechts .vitrine__tafel{ left:calc(100% + 12px); }
  .vitrine__punkt--links  .vitrine__tafel{ right:calc(100% + 12px); }
  .vitrine__punkt--oben   .vitrine__tafel{ top:0; }
  .vitrine__punkt--unten  .vitrine__tafel{ bottom:0; }
}

@media (max-width:479px){
  .vitrine__punkt .punkt__name{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .vitrine__punkt .punkt{ padding-right:11px; }
  .vitrine__punkt--links .punkt{ padding:0 5px 0 11px; }
}

@media (prefers-reduced-motion:reduce){
  .vitrine[data-zustand="offen"] .vitrine__punkt .punkt__ring::after{ animation:none; opacity:.4; }
  .vitrine__tafel{ transform:none; }
}

.modellschau[hidden]{ display:none; }
.modellschau{
  margin:0 calc(var(--pad-breit) * -1) clamp(26px,3.6vh,44px);
  padding:clamp(22px,3.2vh,42px) var(--pad) clamp(8px,1.2vh,16px);
  display:grid; justify-items:center; gap:clamp(12px,1.8vh,20px);
  text-align:center;
}
.modellschau h2{
  font-size:var(--f-h3); letter-spacing:-.03em;
  text-wrap:balance; max-width:22ch;
}
.modellschau__satz{
  margin:0; max-width:48ch;
  color:var(--ink-2);
}

.modellschau__feld{
  position:relative;
  width:calc(100% + var(--pad) * 2);
  margin-inline:calc(var(--pad) * -1);
  height:clamp(270px,36vh,430px);
  margin-top:clamp(2px,.6vh,8px);
  touch-action:pan-y;
  cursor:grab;
}
.modellschau__feld.is-grabbing{ cursor:grabbing; }
.modellschau__feld::after{
  content:''; position:absolute; left:0; top:0;
  height:2px; width:var(--lade,0%);
  background:var(--ink); opacity:0;
  transition:width .2s linear, opacity .3s ease;
  pointer-events:none;
}
html.laedt-3d .modellschau__feld::after{ opacity:.5; }

.modellschau__leinwand{
  position:relative; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .45s ease;
}
.modellschau__feld.is-da .modellschau__leinwand{ opacity:1; }

.modellschau__bei{
  margin:0; max-width:52ch;
  font-size:13.5px; line-height:1.5; color:var(--ink-2);
}

@media (max-width:760px){
  .modellschau__feld{ height:clamp(230px,30vh,340px); }
}

.modellbuehne{
  margin:0;
  display:grid; justify-items:center; gap:14px;
  text-align:center;
}
@media (scripting:none){ .modellbuehne{ display:none; } }

.modellbuehne__feld{
  position:relative;
  width:100%;
  height:clamp(340px, 64vh, 660px);
  touch-action:pan-y;
  cursor:grab;
}
.modellbuehne__feld.is-grabbing{ cursor:grabbing; }
.modellbuehne__bezug{
  position:absolute; left:50%; top:12%;
  height:72%; aspect-ratio:1.3;
  max-width:100%;
  translate:-50% 0;
  pointer-events:none;
}
.modellbuehne__bezug::after{
  content:''; position:absolute;
  left:50%; top:calc(50% + 63% * var(--skala-h, 1)); translate:-50% 0;
  width:calc(96% * var(--skala-b, 1)); height:5.5%;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
             rgba(20,22,26,.30) 0%, rgba(20,22,26,0) 72%);
  opacity:0; transition:top .35s ease, width .35s ease, opacity .45s ease;
}
.modellbuehne__leinwand{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  opacity:0; transition:opacity .45s ease;
}
.modellbuehne__feld.is-da .modellbuehne__leinwand,
.modellbuehne__feld.is-da .modellbuehne__bezug::after{ opacity:1; }
.modellbuehne__feld::after{
  content:''; position:absolute; left:0; top:0;
  height:2px; width:var(--lade,0%);
  background:var(--ink); opacity:0;
  transition:width .2s linear, opacity .3s ease;
  pointer-events:none;
}
html.laedt-3d .modellbuehne__feld::after{ opacity:.5; }
html.lade-ohne-mass.laedt-3d .modellbuehne__feld::after{
  width:28%; animation:ladeWandern 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  html.lade-ohne-mass.laedt-3d .modellbuehne__feld::after{ width:100%; animation:none; opacity:.3; }
  .modellbuehne__leinwand, .modellbuehne__bezug::after{ transition:none; }
}
.modellbuehne__dreh{ margin:0; font-size:13.5px; font-weight:500; color:var(--ink); }
.modellbuehne:not(:has(.modellbuehne__feld.is-da)) .modellbuehne__dreh{ visibility:hidden; }
.modellbuehne__feld:not(.is-da){ cursor:auto; }
.modellbuehne__ersatz{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  pointer-events:none;
}

.modellbuehne__groessen{
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:2px; padding:3px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
}
.modellbuehne__groessen[hidden]{ display:none; }
.modellbuehne__groesse{
  -webkit-appearance:none; appearance:none;
  margin:0; border:0; border-radius:999px;
  padding:7px 14px;
  background:transparent; color:var(--ink-2);
  font:inherit; font-size:13.5px; font-weight:500; line-height:1.2;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.modellbuehne__groesse:hover{ color:var(--ink); }
.modellbuehne__groesse[aria-pressed="true"]{
  background:#fff; color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06);
}
.modellbuehne__groesse:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (max-width:520px){
  .modellbuehne__groessen{ display:inline-grid; grid-template-columns:1fr 1fr; border-radius:18px; }
  .modellbuehne__groessen[hidden]{ display:none; }
}
@media (max-width:360px){
  .modellbuehne__groesse{ padding:7px 10px; }
}
.modellbuehne__feld.wechselt .modellbuehne__leinwand{ opacity:.45; }
.modellbuehne__bei{
  margin:0; max-width:52ch;
  font-size:13.5px; line-height:1.5; color:var(--ink-3);
}
@media (max-width:760px){
  .modellbuehne__feld{
    width:calc(100% + 2 * var(--pad));
    height:clamp(300px, 50vh, 460px);
  }
}

.datenblatt__satz{
  margin:0 0 clamp(40px,6vh,72px);
  max-width:44ch;
  font-size:clamp(21px,2.2vw,29px);
  line-height:1.35; letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}

.datenblatt__bild{
  margin:0 0 clamp(34px,5vh,60px);
  display:grid; gap:14px; justify-items:center;
}
.datenblatt__bild img{
  max-width:100%; max-height:clamp(280px, 46vh, 520px);
  width:auto; height:auto;
  border-radius:var(--radius);
  background:linear-gradient(165deg,#f4f4f6,#e9eaee);
}
.datenblatt__bild--schluss{ margin-top:clamp(10px,2vh,26px); }
.datenblatt__bild.datenblatt__bild--frei{ position:relative; }
.datenblatt__bild.datenblatt__bild--frei::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:44%; translate:-50% -50%;
  width:min(1100px,100%); height:118%;
  background:radial-gradient(50% 52% at 50% 50%,
             #eceef1 0%, rgba(236,238,241,.52) 48%, rgba(236,238,241,0) 76%);
}
.datenblatt__bild.datenblatt__bild--frei img{
  position:relative; z-index:1;
  max-height:clamp(240px,50vh,520px);
  background:none; border-radius:0;
}
.datenblatt__bild.datenblatt__bild--frei figcaption{ position:relative; z-index:1; }

.datenblatt__auf{
  margin:0 calc(var(--pad-breit) * -1) clamp(30px,4.6vh,56px);
  position:relative;
}
.datenblatt__auf img{
  display:block; width:100%;
  height:clamp(240px, 52vh, 620px);
  object-fit:cover; object-position:center 55%;
  background:var(--bg);
}
.datenblatt__bild.datenblatt__auf figcaption{
  margin:14px var(--pad-breit) 0;
  font-size:13.5px; color:var(--ink-3); max-width:46rem;
  text-align:left; justify-self:start;
}
@media (min-width:760px){
  .datenblatt__auf img{ border-radius:var(--radius); }
  .datenblatt__auf{ margin-left:0; margin-right:0; }
  .datenblatt__auf figcaption{ margin-left:0; margin-right:0; }
}

.datenblatt__ohne{
  display:grid; place-items:center;
  width:min(100%, 520px); height:clamp(200px, 30vh, 300px);
  border:1px dashed rgba(0,0,0,.18); border-radius:var(--radius);
  color:var(--ink-3); font-size:14px;
}
.datenblatt__bild figcaption{
  font-size:13.5px; color:var(--ink-3); text-align:center; max-width:42rem;
}

.schaltbild{
  --daten:#0071e3;
  --polster:clamp(14px, 2.4vw, 32px);
  width:min(100%, calc(380px + 2 * var(--polster)));
  padding:var(--polster);
  border-radius:var(--radius);
  background:var(--bg);
}
.schaltbild svg{ display:block; width:100%; height:auto; }
.schaltbild .schaltbild__quer{ display:none; }
@media (min-width:1100px){
  .schaltbild{ width:min(100%, 1100px); }
  .schaltbild .schaltbild__quer{ display:block; }
  .schaltbild .schaltbild__hoch{ display:none; }
}
.schaltbild text{ font-family:inherit; font-size:16px; fill:var(--ink); }
.schaltbild .sb-name { font-size:22px; font-weight:600; letter-spacing:-.02em; }
.schaltbild .sb-titel{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.schaltbild .sb-ein  { font-size:15px; font-weight:600; }
.schaltbild .sb-neben{ fill:var(--ink-2); }
.schaltbild .sb-klein{ font-size:14px; fill:var(--ink-2); }
.schaltbild .sb-kachel{ fill:#fff; }
.schaltbild .sb-gehaeuse{ fill:none; stroke:var(--ink); stroke-width:1.5; }
.schaltbild polyline, .schaltbild line{ fill:none; stroke-linejoin:round; }
.schaltbild .sb-strom{ stroke:var(--ink); stroke-width:1.75; }
.schaltbild .sb-daten{ stroke:var(--daten); stroke-width:2; }
.schaltbild .sb-mantel{ stroke:rgba(0,0,0,.09); stroke-width:22; }
.schaltbild .sb-stecker{ fill:var(--ink); }
.schaltbild .sb-punkt{ fill:var(--ink); }
.schaltbild .sb-punkt--daten{ fill:var(--daten); }

.datenblatt__luecke{
  max-width:46rem; margin:0 0 clamp(30px,4vh,44px);
  padding:16px 18px; border-radius:14px;
  background:var(--bg); border:1px solid var(--line);
  font-size:14px; line-height:1.6; color:var(--ink-2);
}
.datenblatt__luecke b{ color:var(--ink); }

.datenblatt__text{
  display:grid; gap:clamp(26px,3.6vh,44px);
  grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr));
  padding:clamp(40px,6vh,80px) 0;
  border-top:1px solid var(--line);
}
.datenblatt__text h2{ font-size:var(--f-h3); letter-spacing:-.03em; margin:0 0 10px; text-wrap:balance; }
.datenblatt__text p{ color:var(--ink-2); max-width:38rem; }

.datenblatt .specs{ border-top:1px solid var(--line); }


.datenblatt .closer{ margin-inline:calc(var(--pad-breit) * -1); }

.datenblatt.datenblatt--achse{
  --takt:clamp(56px, 8vh, 104px);
}

.datenblatt.datenblatt--achse .specs,
.datenblatt.datenblatt--achse .cta{ margin-inline:calc(var(--pad-breit) * -1); }
.datenblatt > .specs,
.datenblatt > .cta,
.datenblatt > .closer{ --pad-breit:max(var(--pad), (100vw - var(--satz)) / 2); }


.datenblatt.datenblatt--achse .modellschau{
  padding-inline:var(--pad-breit);
  justify-items:center;
  text-align:center;
}
.datenblatt.datenblatt--achse .modellschau__feld{
  width:calc(100% + var(--pad-breit) * 2);
  margin-inline:calc(var(--pad-breit) * -1);
}
.datenblatt.datenblatt--achse .modellschau h2{ max-width:26ch; }

.datenblatt.datenblatt--achse .datenblatt__kopf{
  margin-inline:auto; max-width:46rem; text-align:center;
}
.datenblatt.datenblatt--achse .datenblatt__kopf .datenblatt__lead{ margin-inline:auto; }
.datenblatt.datenblatt--achse > .datenblatt__satz{
  margin-inline:auto; max-width:34ch; text-align:center;
}

.datenblatt.datenblatt--achse .vitrine__bei{
  justify-self:center;
  text-align:center; margin-inline:auto; max-width:52ch; padding-inline:0;
}

.datenblatt.datenblatt--achse .cta{ text-align:center; }
.datenblatt.datenblatt--achse .cta p{ margin-inline:auto; }
.datenblatt.datenblatt--achse .cta__row{ justify-content:center; }

.datenblatt.datenblatt--achse .specs__head{ text-align:center; }
.datenblatt.datenblatt--achse .datenblatt__text > div{ text-align:left; }

.datenblatt.datenblatt--achse .modellschau h2{ font-size:var(--f-h2-klein); }

.datenblatt.datenblatt--achse > *{ margin-block:0 var(--takt); }
.datenblatt.datenblatt--achse > *:last-child{ margin-bottom:0; }
.datenblatt.datenblatt--achse > .ortband{ margin-block:0 var(--takt); }
.datenblatt.datenblatt--achse > .datenblatt__weg{ margin-bottom:clamp(18px,2.6vh,32px); }
.datenblatt.datenblatt--achse .specs,
.datenblatt.datenblatt--achse .cta{ padding-block:var(--takt); }
.datenblatt.datenblatt--achse .datenblatt__text{ padding-bottom:0; }
@media (min-width:760px){
  .datenblatt.datenblatt--achse .datenblatt__text{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.datenblatt.datenblatt--achse .abschnitt__auge:not(.ortband > *){
  margin:0 0 18px;
  font-size:12px;
  color:var(--accent);
}


.datenblatt.datenblatt--achse > .datenblatt__bild.datenblatt__buehne{ margin-bottom:var(--takt); }

.datenblatt.datenblatt--achse .closer{ padding-block:0; }

@media (min-width:760px){
  .datenblatt.datenblatt--achse .datenblatt__text > div:only-child{
    grid-column:1 / -1;
    display:block;
    max-width:40rem; margin-inline:auto;
    text-align:center;
  }
  .datenblatt.datenblatt--achse .datenblatt__text > div:only-child h2{ margin:0 0 10px; }
  .datenblatt.datenblatt--achse .datenblatt__text > div:only-child p{ margin-inline:auto; }
}


.datenblatt.datenblatt--achse .datenblatt__luecke{ margin-inline:auto; text-align:left; }

.datenblatt > .datenblatt__satz{
  margin-inline:auto; max-width:34ch;
  text-align:center; text-wrap:balance;
}

@media (min-width:760px){
  .datenblatt__text > div:only-child{
    display:grid; align-items:start;
    grid-template-columns:minmax(0,20rem) minmax(0,1fr);
    gap:clamp(24px,4vw,64px);
  }
  .datenblatt__text > div:only-child h2{ margin:0; text-wrap:balance; }
  .datenblatt__text > div:only-child p{ max-width:42rem; }
}

.enthuellung img.enthuellung__koerper{ border-radius:8px; }

.datenblatt__bild.datenblatt__buehne{
  display:grid; justify-items:center; align-content:center;
  gap:clamp(14px,2vh,26px);
  position:relative;
  text-align:center;
  background:none;
  border-radius:0;
  overflow:hidden;
  overflow:clip;
}
.datenblatt > .datenblatt__bild.datenblatt__buehne{
  margin:0 calc(var(--pad-breit) * -1) clamp(34px,5vh,64px);
  padding:clamp(24px,4vh,56px) var(--pad);
  min-height:82svh;
  background:var(--bg-deep);
}
.datenblatt > .datenblatt__bild.datenblatt__buehne::before{
  width:min(1500px,98%); height:min(78%,900px);
  background:radial-gradient(52% 56% at 50% 46%,
             #eceef1 0%, rgba(236,238,241,.52) 48%, rgba(236,238,241,0) 76%);
}
.datenblatt > .datenblatt__bild.datenblatt__buehne{ --schatten-h:clamp(18px,2.4vh,34px); --fuge:clamp(14px,2vh,26px); }
.datenblatt > .datenblatt__bild.datenblatt__buehne > img{ grid-row:1; }
.datenblatt > .datenblatt__bild.datenblatt__buehne > figcaption{ grid-row:3; }
.datenblatt > .datenblatt__bild.datenblatt__buehne::after{
  content:''; position:relative; z-index:0; pointer-events:none;
  grid-row:2; justify-self:center;
  margin-block:calc(-1 * (var(--fuge) + var(--schatten-h) / 2));
  width:min(520px,62%); height:var(--schatten-h);
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
             rgba(20,22,26,.30) 0%, rgba(20,22,26,0) 72%);
}

.datenblatt > .datenblatt__bild.datenblatt__buehne img{
  max-height:clamp(300px,64svh,780px);
}
.datenblatt__bild.datenblatt__buehne::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; translate:-50% -50%;
  width:min(1240px,96%); height:min(620px,104%);
  background:radial-gradient(54% 58% at 50% 50%,
             #eceef1 0%, rgba(236,238,241,.5) 46%, rgba(236,238,241,0) 75%);
}
.datenblatt__bild.datenblatt__buehne img{
  position:relative; z-index:1;
  width:auto; max-width:min(1180px,100%);
  height:auto; max-height:clamp(280px,60vh,680px);
  background:none; border-radius:0;
}
.datenblatt__bild.datenblatt__buehne figcaption{
  position:relative; z-index:1;
  max-width:46rem; margin-inline:auto;
}

.hat-buehne .datenblatt__bild.datenblatt__buehne img{
  animation:buehne-tritt-ein 1s cubic-bezier(.22,.61,.24,1) both;
  transform:perspective(1400px)
            rotateX(calc(var(--zy,0) * -1.2deg))
            rotateY(calc(var(--zx,0) * 1.8deg));
  transition:transform .4s cubic-bezier(.22,.61,.24,1);
}
.hat-buehne .datenblatt__bild.datenblatt__buehne::before{
  animation:buehne-licht 1.5s cubic-bezier(.22,.61,.24,1) both;
  translate:calc(-50% + var(--zx,0) * 26px) calc(-50% + var(--zy,0) * 13px);
  transition:translate .5s cubic-bezier(.22,.61,.24,1);
}
@keyframes buehne-tritt-ein{
  from{ opacity:0; translate:0 22px; scale:.984; }
  to  { opacity:1; translate:0 0;    scale:1;    }
}
@keyframes buehne-licht{
  from{ opacity:0; scale:.9; }
  35% { opacity:.35; }
  to  { opacity:1; scale:1; }
}
@media (prefers-reduced-motion:reduce){
  .hat-buehne .datenblatt__bild.datenblatt__buehne img,
  .hat-buehne .datenblatt__bild.datenblatt__buehne::before{
    animation:none; transition:none;
  }
  .hat-buehne .datenblatt__bild.datenblatt__buehne img{ transform:none; }
}

.datenblatt > .datenblatt__bild:not(.datenblatt__bild--schluss):not(.datenblatt__buehne) img{
  max-height:clamp(300px,56vh,660px);
}

.uebersicht{
  padding:calc(var(--nav-h) + clamp(50px,9vh,110px)) var(--pad-breit) 0;
  background:var(--bg-deep);
}
.uebersicht__kopf{ margin-bottom:clamp(44px,6.5vh,78px); }
.uebersicht__kopf h1{
  letter-spacing:-.04em; margin:0;
  font-size:clamp(34px, 4.6vw, 78px);
}
.uebersicht__lead{ color:var(--ink-2); max-width:48ch; }

.ort{ padding:clamp(30px,4.4vh,50px) 0; border-top:1px solid var(--line); }
.ort__kopf{ margin:0 0 clamp(22px,3vh,32px); max-width:44rem; }
.ort__kopf h2{ margin:0 0 8px; font-size:clamp(24px,2.6vw,34px); letter-spacing:-.03em; }
.ort__kopf p{ color:var(--ink-2); font-size:15px; }

.ortband{
  position:relative; isolation:isolate; overflow:hidden;
  max-width:none;
  margin:0 0 clamp(22px,3vh,32px);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(150px,17vw,280px);
  padding:clamp(22px,3vw,40px);
  border-radius:var(--radius);
  background:#0a1416;
  color:#fff;
}
.ortband__bild{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
}
.ortband::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
              rgba(6,14,16,0) 28%, rgba(6,14,16,.58) 76%, rgba(6,14,16,.82) 100%);
}
.ortband h2{
  margin:0 0 8px; letter-spacing:-.03em;
  color:#fff; font-size:clamp(26px,3vw,40px);
}
.ortband p{ margin:0; color:rgba(255,255,255,.78); font-size:15px; max-width:44rem; }
.ortband .abschnitt__auge{ color:rgba(255,255,255,.6); }
.ortband .abschnitt__auge,
.ortband h2{ text-shadow:0 1px 14px rgba(6,14,16,.55); }
@media (max-width:860px) and (orientation:portrait){
  .ortband::after{
    background:linear-gradient(180deg,
                rgba(6,14,16,.18) 0%, rgba(6,14,16,.62) 52%, rgba(6,14,16,.86) 100%);
  }
  .ortband .abschnitt__auge{ color:rgba(255,255,255,.78); }
}
.datenblatt .ortband{ margin:0 0 clamp(40px,6vh,72px); }
.ortraum{
  background:var(--bg-deep);
  padding:0 var(--pad-breit) clamp(60px,9vh,120px);
}
.ortraum .ortband{ margin:0; }
.ort__gitter{
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.ansicht{ display:none; }
@media (scripting:none){ .ansicht{ display:none !important; } }
.ansicht__knopf{
  appearance:none; background:none; border:0; padding:8px 2px;
  font:inherit; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); cursor:pointer;
  opacity:.62;
  transition:opacity .22s ease;
}
.ansicht__knopf[aria-pressed="true"]{ opacity:1; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.ansicht__knopf:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:3px; opacity:1;
}
.ansicht__knopf + .ansicht__knopf{
  margin-left:14px; padding-left:15px;
  border-left:1px solid rgba(17,17,19,.16);
}
.ort__gitter > .kasten__huelle:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (max-width:860px){
  .ort__gitter{ grid-template-columns:minmax(0,1fr); }
}

.kasten{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(16px,2vw,26px); align-items:center;
  padding:20px; border-radius:var(--radius);
  background:linear-gradient(165deg,#f4f4f6,#e9eaee);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.kasten:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.08); }
.kasten__bild{ display:block; height:118px; }
.kasten__bild img{
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:center;
  mix-blend-mode:multiply;
}
@media (hover:hover) and (pointer:fine){
  .kasten__bild{ overflow:hidden; overflow:clip; }
  .kasten__bild[style*="--vorschau"]:hover{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
                       linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
                       linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
            mask-composite:intersect;
  }
  .kasten__bild img{ transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  .kasten__bild[style*="--vorschau"]:hover img{ transform:scale(var(--vorschau)); }
}
@media (prefers-reduced-motion:reduce){
  .kasten__bild img{ transition:none; }
}

.kasten__ohne{
  display:grid; place-items:center; width:100%; height:100%;
  border:1px dashed rgba(0,0,0,.18); border-radius:12px;
  font-size:12px; color:var(--ink-3); text-align:center; padding:6px;
}
.kasten__text{ display:grid; gap:10px; align-content:center; }
.kasten__kopf{ display:grid; gap:6px; justify-items:start; }
.kasten__namen{ display:grid; gap:1px; }
.kasten__namen b{ font-size:clamp(19px,1.8vw,24px); font-weight:600; letter-spacing:-.03em; }
.kasten__namen i{ font-style:normal; font-size:12.5px; color:var(--ink-3); }

.kasten__werte{ display:grid; gap:2px; }
.kasten__wert{ font-size:13.5px; color:var(--ink-2); }
.kasten__wert b{ display:none; }

.kasten__marke{
  justify-self:start;
  font-style:normal; font-size:10.5px; font-weight:500; letter-spacing:.04em;
  padding:3px 8px; border-radius:5px;
  background:var(--ink); color:#fff;
}

.kasten__huelle{ container-type:inline-size; display:grid; }
@container (min-width:600px){
  .kasten{ grid-template-columns:minmax(0,190px) minmax(0,1fr); padding:26px; }
  .kasten__bild{ height:148px; }
  .kasten__text{ gap:16px; }
  .kasten__kopf{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    justify-content:space-between; gap:8px 18px;
  }
}
@container (min-width:600px){
  .kasten__werte{
    grid-auto-flow:column; grid-auto-columns:auto;
    gap:0 clamp(18px, 3cqi, 54px);
    padding-top:14px; border-top:1px solid rgba(0,0,0,.09);
  }
  .kasten__wert{ display:grid; gap:3px; align-content:start; }
  .kasten__wert:first-child{ white-space:nowrap; }
  .kasten__wert b{
    display:block;
    font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
    color:var(--ink-3);
  }
}

.vergleich{ padding:clamp(40px,6vh,80px) 0 clamp(20px,3vh,40px); border-top:1px solid var(--line); }
.vergleich__rahmen{
  overflow-x:auto;
  margin-inline:calc(var(--pad-breit) * -1);
}
@property --vergleich-blende{ syntax:'<length>'; inherits:false; initial-value:0px; }
@keyframes vergleich-blende{ from{ --vergleich-blende:64px; } 92%{ --vergleich-blende:64px; } to{ --vergleich-blende:0px; } }
@supports (animation-timeline: scroll()){
  .vergleich__rahmen{
    animation:vergleich-blende linear both;
    animation-timeline:scroll(self inline);
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--vergleich-blende)), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - var(--vergleich-blende)), transparent);
  }
}
.vergleich__tabelle th:first-child,
.vergleich__tabelle td:first-child{ padding-left:var(--pad-breit); }
.vergleich__tabelle tbody th + td,
.vergleich__tabelle thead th:first-child + th{ padding-left:18px; }
.vergleich__tabelle th:last-child,
.vergleich__tabelle td:last-child{ padding-right:var(--pad-breit); }
.vergleich__tabelle{
  border-collapse:separate; border-spacing:0;
  width:100%; min-width:max-content;
  font-size:14px;
}
.vergleich__tabelle th,
.vergleich__tabelle td{
  text-align:left; padding:14px 18px 14px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  white-space:nowrap;
}
.vergleich__tabelle thead th{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:10px;
}
.vergleich__tabelle tbody th{ font-weight:600; white-space:nowrap; }

.vergleich__tabelle tbody th,
.vergleich__tabelle thead th:first-child{
  position:sticky; left:0; z-index:1;
  background:var(--bg);
  padding-right:18px;
  box-shadow:1px 0 0 var(--line);
}
.vergleich__tabelle tbody th a{ display:inline-block; padding:6px 0; margin:-6px 0; }
.vergleich__tabelle tbody th a{ text-decoration:underline; text-underline-offset:.18em; }
.vergleich__tabelle tbody tr:hover td,
.vergleich__tabelle tbody tr:hover th{ background:var(--bg); }
.vergleich__tabelle td{ color:var(--ink-2); }

.sonder{ padding:clamp(40px,6vh,80px) 0 clamp(10px,2vh,26px); border-top:1px solid var(--line); }
@media (min-width:861px){
  .sonder .abschnitt__kopf h2{ font-size:clamp(34px,4.6vw,80px); }
}
.sonder__gitter{
  display:grid; gap:clamp(20px,2.6vw,34px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(26px,3.6vh,44px);
}
@media (min-width:600px){ .sonder__gitter{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .sonder__gitter{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.sonder__punkt{ border-top:1px solid var(--line); padding-top:16px; }
.sonder__punkt h3{
  margin:0 0 8px;
  font-size:clamp(17px,1.5vw,20px); font-weight:600; letter-spacing:-.02em;
}
.sonder__punkt p{ margin:0; color:var(--ink-2); font-size:15px; }

@media (max-width:560px){
  .kasten{ grid-template-columns:1fr; }
  .kasten__bild{ height:150px; }

  .ansicht{
    display:flex; align-items:baseline; justify-content:flex-end;
    margin:0 0 14px;
  }

  html.ist-liste .kasten{
    grid-template-columns:64px minmax(0,1fr);
    gap:14px; padding:12px; align-items:center;
  }
  html.ist-liste .kasten__bild{ height:64px; }
  html.ist-liste .kasten__ohne{ font-size:0; }
  html.ist-liste .kasten__text{ gap:5px; }
  html.ist-liste .kasten__kopf{
    display:flex; flex-wrap:wrap; align-items:baseline;
    gap:4px 8px;
  }
  html.ist-liste .kasten__namen b{ font-size:17px; }
  html.ist-liste .kasten__namen i{ font-size:11.5px; }
  html.ist-liste .kasten__marke{ font-size:9.5px; padding:2px 6px; }
  html.ist-liste .kasten__werte{
    display:flex; flex-wrap:wrap; gap:0 8px;
    font-size:12.5px; line-height:1.45;
  }
  html.ist-liste .kasten__wert:not(:last-child)::after{
    content:'·'; margin-left:8px; color:var(--ink-3);
  }
  html.ist-liste .kasten__marke{ margin-left:auto; }
  html.ist-liste .kasten__bild[style*="--vorschau"]{
    overflow:hidden; overflow:clip;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
                       linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
                       linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
            mask-composite:intersect;
  }
  html.ist-liste .kasten__bild[style*="--vorschau"] img{ transform:scale(calc(1 + (var(--vorschau) - 1) * .6)); }
}

.refseite{
  padding:calc(var(--nav-h) + clamp(50px,9vh,110px)) var(--pad-breit) 0;
  background:var(--bg-deep);
}

.globus{
  --globus-ueber:.38;
  position:relative;
  margin-bottom:clamp(32px,5vh,72px);
  text-align:center;
}
.globus__kopf{ position:relative; z-index:1; }
.globus__auge{ color:var(--accent); }
.globus h1{
  font-size:clamp(40px,6.6vw,96px);
  letter-spacing:-.05em; line-height:1;
  margin:16px 0 0;
}
.globus__zeile{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:clamp(22px,3vw,52px);
  max-width:58rem; margin:clamp(28px,4.4vh,52px) auto 0;
  text-align:left;
}
.globus__lead{
  margin:0; padding-right:clamp(22px,3vw,52px);
  border-right:1px solid var(--line);
  font-size:clamp(16px,1.3vw,20px); line-height:1.5; font-weight:500;
  color:var(--ink);
}
.globus__kenn{ margin:0; display:flex; align-items:baseline; gap:14px; white-space:nowrap; }
.globus__kenn span{ font-size:clamp(18px,1.7vw,26px); font-weight:700; letter-spacing:-.02em; }
.globus__kenn b{ font-size:clamp(44px,4.6vw,68px); font-weight:700; letter-spacing:-.045em; line-height:1; }

.globus__buehne{
  position:relative;
  padding:clamp(220px,21vw,360px) 0 clamp(120px,12vw,200px);
}
.globus__leinwand{
  position:absolute; z-index:0; top:0;
  left:calc(50% - 50vw); width:100vw;
  pointer-events:none;
}
.globus__leinwand canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.globus__karten{
  position:relative; z-index:1;
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);
  text-align:left;
}
.globus__karte{
  display:grid; grid-template-rows:auto auto auto; align-content:end;
  min-height:clamp(150px,13.5vw,210px);
  padding:clamp(18px,1.9vw,30px);
  border-radius:24px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
          backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 26px 60px -32px rgba(20,60,140,.38);
}
.globus__vor{ min-height:1.35em; font-size:clamp(14px,1.05vw,16px); font-weight:600; color:var(--ink-2); line-height:1.35; }
.globus__zahl{
  font-size:clamp(36px,3.7vw,58px); font-weight:700;
  letter-spacing:-.045em; line-height:1.08;
  font-variant-numeric:tabular-nums;
}
.globus__mehr{ font-weight:400; color:var(--ink-2); margin-right:.08em; }
.globus__nach{ margin-top:4px; font-size:clamp(15px,1.2vw,19px); font-weight:600; line-height:1.3; }

.nur-vorleser{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

@media (max-width:899px){
  .globus__karten{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .globus__buehne{ padding-top:clamp(180px,30vw,280px); }
}
@media (max-width:640px){
  .globus__zeile{ grid-template-columns:1fr; text-align:center; }
  .globus__lead{ padding:0; border:0; }
  .globus__kenn{ justify-content:center; }
  .globus__buehne{ padding:44vw 0 18vw; }
  .globus__karte{ min-height:0; padding:16px; border-radius:18px; }
  .globus__zahl{ font-size:clamp(28px,8.4vw,40px); }
  .globus__vor{ font-size:12.5px; }
  .globus__nach{ font-size:14px; }
}
@media print{
  .globus__leinwand{ display:none !important; }
  .globus__karte{ background:none; border:1px solid #ccc; box-shadow:none; }
}

.refseite__sprung{
  display:flex; flex-wrap:wrap; gap:10px 8px;
  margin:0 0 clamp(24px,3.4vh,40px);
}
.refseite__sprung a{
  display:inline-flex; align-items:center; min-height:38px;
  padding:0 15px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line);
  font-size:14px; color:var(--ink-2);
  transition:background .2s, color .2s, border-color .2s;
}
.refseite__sprung a:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }


.ref{
  display:grid;
  grid-template-columns:minmax(0, 15rem) minmax(0, 1fr);
  gap:clamp(20px,4vw,64px);
  padding:clamp(30px,4.4vh,46px) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:8px;
}
.ref__liste li[id]{ scroll-margin-top:68px; }
.ref h2{
  margin:0;
  font-size:clamp(22px,2.3vw,30px); letter-spacing:-.03em;
  position:sticky; top:calc(var(--nav-h) + 22px);
  align-self:start;
  transition:top .38s cubic-bezier(.22,1,.36,1);
}
html.kopf-weg .ref h2{ top:22px; }
.ref__bild{
  grid-column:1 / -1;
  width:100%; height:auto; aspect-ratio:5 / 1;
  object-fit:cover; object-position:center 58%;
  border-radius:var(--radius);
  margin-bottom:clamp(18px,2.6vh,30px);
  background:var(--bg);
}
.ref > picture{ display:contents; }
@media (max-width:860px) and (orientation:portrait), (max-aspect-ratio:4/5){
  .ref__bild{ aspect-ratio:16 / 9; }
}
.ref__liste{
  margin:0; padding:0; list-style:none;
  display:grid; gap:clamp(15px,2vh,22px);
}
.ref__liste li{
  display:grid; gap:3px;
  align-content:start;
}
.ref__liste b{
  font-weight:600; color:var(--ink);
  font-size:clamp(16px,1.35vw,18px); letter-spacing:-.015em;
}
.ref__liste span{ color:var(--ink-2); font-size:14.5px; line-height:1.5; }

@media (max-width:820px){
  .ref{ grid-template-columns:1fr; gap:18px; }
  .ref h2{ position:static; }
}

@media (min-width:1180px){
  .ref__liste{ grid-template-columns:1fr 1fr; gap:clamp(15px,2vh,22px) clamp(26px,3vw,52px); }


}

.anfrage{
  padding:calc(var(--nav-h) + clamp(44px,8vh,100px)) var(--pad-breit) clamp(60px,9vh,120px);
  background:var(--bg);
}
.anfrage__raster{
  display:grid;
  grid-template-columns:minmax(300px, .86fr) minmax(0, 1.14fr);
  grid-template-areas:"kopf spalte" "schiene spalte";
  grid-template-rows:auto 1fr;
  column-gap:clamp(34px, 4.5vw, 84px);
  row-gap:clamp(28px,4vh,44px);
  align-items:start;
}
.anfrage__raster > .anfrage__kopf{ grid-area:kopf; }
.anfrage__schiene{ grid-area:schiene; display:grid; gap:clamp(28px,4vh,44px); align-content:start; }

.anfrage__kopf{ margin:0 0 clamp(36px,5vh,58px); max-width:46rem; }
.anfrage__raster .anfrage__kopf{ margin-bottom:0; max-width:34rem; }
.anfrage__kopf h1{ font-size:var(--f-h2); letter-spacing:-.04em; margin:0 0 18px; }
.anfrage__raster .anfrage__kopf h1{ font-size:clamp(34px, 3.9vw, 58px); }
.anfrage__lead{ color:var(--ink-2); max-width:38rem; }
.anfrage__raster .anfrage__lead{ max-width:34rem; }
.anfrage__marke{
  margin-top:16px; font-size:13px; line-height:1.5; color:var(--ink-3);
  max-width:30rem;
}
.anfrage--schmal .cta__row{ margin-top:8px; justify-content:flex-start; }
.anfrage__nachsatz{ margin-top:clamp(30px,5vh,54px); color:var(--ink-3); font-size:14px; max-width:38rem; text-wrap:balance; }

.ablauf{
  list-style:none; margin:0; padding:0; max-width:34rem;
  border-top:1px solid var(--line);
}
.ablauf li{
  display:grid; grid-template-columns:auto 1fr;
  column-gap:16px; row-gap:3px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.ablauf__nr{
  grid-row:1 / span 2; padding-top:3px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.ablauf b{ font-size:15.5px; font-weight:600; color:var(--ink); }
.ablauf li > span:not(.ablauf__nr){ font-size:14px; line-height:1.55; color:var(--ink-2); }

.direkt{ max-width:34rem; }
.direkt__auge{
  display:block; margin-bottom:16px;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}

.anfrage__spalte{ grid-area:spalte; display:grid; gap:clamp(16px,2.2vh,24px); align-content:start; }

@media (max-width:1040px){
  .anfrage__raster{
    grid-template-columns:1fr;
    grid-template-areas:"kopf" "spalte" "schiene";
    grid-template-rows:none;
    gap:clamp(30px,5vh,48px);
  }
  .anfrage__schiene{ gap:clamp(30px,5vh,48px); }
}

.formular{ max-width:56rem; }

.formular--karte{
  max-width:none;
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:26px;
  padding:clamp(22px, 3vw, 44px);
  box-shadow:0 1px 2px rgba(0,0,0,.04),
             0 30px 60px -40px rgba(0,0,0,.30);
}
.formular--karte .formular__block:first-of-type{ border-top:0; }
.formular--karte .formular__block:last-of-type{ margin-bottom:clamp(24px,3.4vh,34px); }

.formular__block{
  border:0; margin:0 0 clamp(30px,4.5vh,50px); padding:0;
  border-top:1px solid var(--line);
}
.formular__block legend{
  padding:0; margin:0;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.formular__block > :not(legend):first-of-type{ margin-top:clamp(20px,3vh,30px); }

.formular__raster{
  display:grid; gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit, minmax(max(min(260px,100%), calc(50% - 30px)), 1fr));
}
.feld{ margin:0; display:grid; gap:8px; }
.feld--breit{ margin-top:clamp(16px,2.4vw,26px); }
.feld label{ font-size:14px; font-weight:500; color:var(--ink-2); }

.formular input,
.formular select,
.formular textarea{ scroll-margin-top:8px; }
.feld__pflicht{ color:var(--signal); }

.feld input, .feld select, .feld textarea{
  font:inherit; font-size:16px;
  color:var(--ink); background:#fff;
  border:1px solid rgba(0,0,0,.22); border-radius:12px;
  padding:0 14px; min-height:48px;
  width:100%; max-width:100%;
  transition:border-color .18s, box-shadow .18s;
  appearance:none; -webkit-appearance:none;
}
.feld textarea{ padding:13px 14px; min-height:0; resize:vertical; line-height:1.5; }
.feld input::placeholder, .feld textarea::placeholder{ color:#75757b; }
.feld input:hover, .feld select:hover, .feld textarea:hover{ border-color:rgba(0,0,0,.34); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(0,0,0,.12);
}
.feld input:user-invalid, .feld textarea:user-invalid{
  border-color:var(--signal);
  box-shadow:0 0 0 3px rgba(204,19,23,.12);
}
.feld select{
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}

.formular--karte .feld input,
.formular--karte .feld select,
.formular--karte .feld textarea{
  background-color:var(--bg);
  border-color:rgba(0,0,0,.07);
}
.formular--karte .feld input:hover,
.formular--karte .feld select:hover,
.formular--karte .feld textarea:hover{ border-color:rgba(0,0,0,.16); }

.formular--karte .feld input:focus-visible,
.formular--karte .feld select:focus-visible,
.formular--karte .feld textarea:focus-visible{
  background-color:var(--bg-deep);
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(0,0,0,.14);
}
.formular--karte .feld input:user-invalid,
.formular--karte .feld textarea:user-invalid{
  border-color:var(--signal);
  box-shadow:0 0 0 3px rgba(204,19,23,.12);
}

.formular__pflichthinweis{ margin:14px 0 0; font-size:13px; color:var(--ink-3); }

.formular__spur{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  margin:0 0 clamp(22px,3vh,30px);
  padding:12px 16px; border-radius:14px;
  background:var(--bg);
  font-size:14px; color:var(--ink-2);
}
.formular__spur[hidden]{ display:none; }
.formular__spurAuge{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.formular__spur b{ color:var(--ink); font-weight:600; font-size:15px; }
.formular__spur a{ margin-left:auto; text-decoration:underline; text-underline-offset:.18em; }

.formular__fuss{
  display:grid; gap:clamp(18px,2.6vh,26px);
  border-top:1px solid var(--line); padding-top:clamp(24px,3.4vh,34px);
  justify-items:start;
}
.formular__recht{ margin:0; font-size:13px; line-height:1.55; color:var(--ink-3); max-width:44rem; }
.formular__recht a{ color:var(--ink); text-decoration:underline; text-underline-offset:.18em; }

.formular__falle{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.meldung{ display:none; }
.meldung:target{
  display:block;
  margin:0;
  padding:18px 20px; border-radius:16px;
  font-size:15px; line-height:1.55;
}
.meldung b{ display:block; margin-bottom:4px; }
.meldung--fehler:target{
  background:rgba(204,19,23,.07);
  border:1px solid rgba(204,19,23,.30);
  color:var(--ink);
}
.meldung a{ color:var(--ink); text-decoration:underline; text-underline-offset:.18em; }

.anfrage__direkt{
  margin-top:clamp(48px,7vh,90px); padding-top:clamp(26px,3.6vh,38px);
  border-top:1px solid var(--line); max-width:46rem;
}
.anfrage__direkt h2{ font-size:var(--f-h3); margin:0 0 10px; }
.anfrage__direkt p{ color:var(--ink-2); line-height:1.7; }
.anfrage__direkt a{ color:var(--ink); text-decoration:underline; text-underline-offset:.18em; }

.nur-vorlesen{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.recht{
  max-width:none;
  padding:calc(var(--nav-h) + clamp(50px,9vh,110px)) var(--pad-breit) clamp(60px,9vh,120px);
  padding-inline:max(var(--pad-breit), calc((100% - 46rem) / 2));
  background:var(--bg-deep);
}
.recht > *{ max-width:46rem; }
.recht__auge{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px;
}
.recht h1{
  font-size:clamp(34px,5vw,64px); letter-spacing:-.035em;
  margin-bottom:clamp(24px,4vh,44px);
  -webkit-hyphens:auto; hyphens:auto;
  overflow-wrap:break-word;
}
.recht__vor{
  font-size:clamp(16px,1.35vw,20px); color:var(--ink-2);
  padding:22px 24px; margin-bottom:clamp(24px,4vh,44px);
  background:var(--bg); border-radius:var(--radius);
}
.recht__vor b{ color:var(--ink); font-weight:600; }
.recht h2{
  font-size:clamp(18px,1.7vw,24px); letter-spacing:-.02em;
  margin:clamp(30px,4.5vh,52px) 0 .5em;
}
.recht p{ color:var(--ink-2); margin-bottom:1em; line-height:1.62; text-wrap:wrap; }
.recht li{ text-wrap:wrap; }
.recht h2{ text-wrap:balance; }
.recht p b{ color:var(--ink); font-weight:600; }
.recht a{ color:var(--accent); text-decoration:underline; text-underline-offset:.18em; }
.recht a:hover{ text-decoration-thickness:2px; }
.recht__block{
  padding:16px 20px; margin-bottom:1.2em;
  border-left:2px solid var(--line);
  color:var(--ink) !important;
}
.recht__liste{
  margin:0 0 1.2em; padding-left:1.3em;
  color:var(--ink-2); line-height:1.62;
}
.recht__liste li{ margin-bottom:.35em; }
.recht code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; padding:.12em .18em;
  background:var(--bg); border-radius:5px; color:var(--ink);
}
.recht__stand{ font-size:13.5px; color:var(--ink-3); margin-top:2em; }
.recht .cta__row{ margin-top:clamp(36px,6vh,64px); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover, .pkachel:hover, .dreid-knopf:hover,
  .pkachel:hover .pkachel__pfeil,
  .weiter:hover, .weiter:hover .weiter__knopf i,
  .btn--pfeil:hover i,
  .schiene__knopf:active{ transform:none; }
  .dreh__griff, .dreh__pfeil{ animation:none; }
  .dreh__pfeil{ opacity:.75; }
  .dots i.is-on{ transform:none; }
}

@media (forced-colors: active){
  .schiene__knopf{
    border:1px solid ButtonBorder; background:ButtonFace; color:ButtonText;
  }
  .schiene__knopf:disabled{ color:GrayText; border-color:GrayText; }
  .dots i{ border:1px solid CanvasText; background:none; }
  .dots i.is-on{ background:CanvasText; forced-color-adjust:none; }
  .kasten, .card__media{
    border:1px solid CanvasText; background:none;
  }
  .ortband__bild{ display:none; }
  .ortband{ border:1px solid CanvasText; background:none; }
  .stage__weiter, .dreid-knopf{ border:1px solid ButtonBorder; background:ButtonFace; }
}

@media print{
  html{ scroll-behavior:auto; }
  body{ background:#fff; }
  .stage{ height:auto !important; background:none; }
  .stage__sticky{ position:static; height:auto; overflow:visible; background:none; }
  .stage__canvas, .standbild, .abbild, .buehne, .dots, .stage__weiter,
  .schiene__nav, .standbild__chip, .kopf, .hero__scroll,
  .layer--punkte, .drehhinweis, .punkte__ruf{ display:none !important; }
  .layer--hero::before, .layer--look::before{ display:none !important; }
  .vitrine__punkte{ display:none !important; }
  .layer{
    position:static !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    display:block; padding:0 var(--pad);
  }
  .facts{ max-width:none; }
  .teiltafel{
    display:block !important;
    position:static !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    background:none !important; padding:0; border:0;
  }
  .fact{
    display:block !important;
    position:static !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    background:none !important; padding:0; margin-bottom:1.2em;
    break-inside:avoid;
  }
  .ortband__bild{ display:none !important; }
  .ortband{ min-height:0; padding:0; color:#000; }
  .ortband h2{ color:#000; }
  .ortband p{ color:#333; }
  .btn--solid, .teiltafel__zu, .modell__text--voll, .pille--voll{
    background:none !important; color:#000 !important;
    border:1px solid #000 !important;
  }
  .closer__rail{ display:block; overflow:visible; padding-inline:var(--pad); }
  .card{ flex:none; max-width:none; margin-bottom:1.2em; break-inside:avoid; }
  .card__media{ height:auto; min-height:0; display:none; }
  .specs__grid > div{ break-inside:avoid; }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:.8em; color:#555; }
}