@view-transition{navigation:auto}
::view-transition-old(tuer),::view-transition-new(tuer){animation:none;mix-blend-mode:normal}
::view-transition-group(tuer){animation-duration:.01s}
::view-transition-old(root){animation-duration:.25s}
::view-transition-new(root){animation-duration:.25s}

.tuer-blatt{position:fixed;inset:0;z-index:190;background:var(--wolke,#f5f7fa);opacity:0;pointer-events:none}
.tuer-overlay{position:fixed;z-index:200;overflow:hidden;view-transition-name:tuer;
  --laufen:stillstand;--ankunft:stillstand}
.tuer-overlay svg{display:block;width:100%;height:100%}
html.tuer-los .kopf,html.tuer-los .saaltext,html.tuer-los .boden,html.tuer-los .halt,html.tuer-los .entwurf,
html.tuer-los .rufleiste,html.tuer-los .weg:not(.tuer-aktiv){opacity:0;transition:opacity .3s ease-out}
html.tuer-los .tuer-aktiv .band{visibility:hidden}
html.tuer-los .tuer-aktiv .schild{opacity:0;transition:opacity .2s ease-out}
@media (prefers-reduced-motion:reduce){
  .tuer-overlay,.tuer-blatt{display:none}
}

.hero--zeichnung{position:relative;overflow:hidden;background:var(--papier);
  min-height:calc(100svh - var(--oben,96px));display:flex;flex-direction:column;justify-content:flex-start}
.hero-zeichnung{position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:min(100vw,170svh);aspect-ratio:2/1;view-transition-name:tuer;pointer-events:none}
.hero-zeichnung svg{display:block;width:100%;height:100%}
.hero-zeichnung .m-mob{display:none}
.hero-text{position:relative;z-index:2;width:100%;padding-top:clamp(1.6rem,6vh,3.6rem);padding-bottom:1.5rem}
.hero-blatt{max-width:36rem;background:rgba(245,247,250,.95);
  border-left:3px solid var(--stahl);padding:1.35rem 1.6rem 1.5rem;box-shadow:0 12px 40px rgba(36,41,51,.08)}
.hero--zeichnung h1{font-size:clamp(1.8rem,min(3.9vw,6.5svh),3.3rem);margin-top:.35rem}

@media (max-height:700px){.hero--zeichnung .lede{display:none}.hero-blatt{padding:1rem 1.2rem 1.1rem}.hero-text{padding-top:1rem}
  .hero--zeichnung .claim{font-size:1.05rem;margin-top:.35rem}.hero-knoepfe{margin-top:.8rem}}
.hero--zeichnung .claim{font-family:'Cambay',sans-serif;font-weight:700;font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--stahl);margin-top:.55rem}
.hero--zeichnung .claim em{font-style:normal;color:var(--nacht)}
.hero--zeichnung .lede{margin-top:.8rem;font-size:.98rem;color:var(--tinte-dim);max-width:52ch}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;margin-top:1.1rem}
.hero-knoepfe .cta{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.1rem;background:var(--nacht);color:var(--ink);text-decoration:none;font-weight:700;border-radius:var(--knopf-rund,999px)}
.hero-knoepfe .cta:hover{background:var(--stahl-tief)}
.hero-knoepfe .tel{font-weight:700;color:var(--nacht);text-decoration:none;font-size:1.05rem}
html.js .hero-text{animation:hero-text-ein .55s ease-out .18s both}
@keyframes hero-text-ein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.js .hero-text{animation:none}}

.hero--zeichnung .halt{position:absolute;right:1rem;top:1rem;left:auto;bottom:auto;z-index:3;display:inline-flex;
  font:500 .78rem/1 'DM Sans',sans-serif;color:var(--tinte-dim);background:var(--weiss);border:1px solid var(--rand);
  border-radius:2rem;padding:.55rem .95rem;cursor:pointer;align-items:center;gap:.45rem;min-height:44px}
.hero--zeichnung .halt:hover{color:var(--nacht);border-color:var(--stahl)}
html:not(.js) .hero--zeichnung .halt{display:none}
@media (prefers-reduced-motion:reduce){.hero--zeichnung .halt{display:none}}
.halt-zeichen{width:10px;height:10px;background:currentColor;
  clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.ruht .halt-zeichen{clip-path:polygon(0 0,100% 50%,0 100%)}

@media (min-width:761px){.kopf .marke{flex:none}}

@media (max-width:760px){
  .hero--zeichnung{min-height:calc(100svh - var(--oben,88px))}
  .hero-zeichnung{width:100vw;aspect-ratio:auto;height:46svh}
  .hero-zeichnung .m-desk{display:none}
  .hero-zeichnung .m-mob{display:block}
  .hero-text{padding-top:1.2rem}
  .hero-blatt{max-width:none;padding:1.1rem 1.2rem 1.2rem;background:rgba(245,247,250,.92)}
  .hero--zeichnung h1{font-size:clamp(1.7rem,7vw,2.3rem)}
  .hero--zeichnung .lede{display:none}

  .hero--zeichnung .halt{top:auto;right:auto;bottom:5.4rem;left:.6rem;translate:none;min-height:44px;font-size:.72rem;padding:.5rem .8rem}
}

.cta{border-radius:var(--knopf-rund,999px)}

@media (max-width:760px){html[data-final="blatt"] .hero--zeichnung .hero-text{padding-bottom:calc(46svh + 1rem)}}

body:has(footer.boden) .boden .heike{padding-right:0}
@media (min-width:761px){
  body:has(footer.boden) .boden{padding-inline:calc(clamp(1rem,3.4vw,2.6rem) + 10.5rem)}
  body:has(footer.boden) .boden nav a{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px}
  body:has(footer.boden) .fuss-zeile{flex-basis:auto}

  @media (min-height:721px){ body:has(footer.boden) footer.boden{min-height:58px;box-sizing:border-box} }

  body:has(footer.boden) .boden nav a:focus-visible{outline-offset:-3px}

  button.heike.heike--weiche{bottom:calc((var(--fuss-h,81px) - 49px) / 2)}
  body:has(footer.boden) .halt{right:auto;left:1.15rem;bottom:calc((var(--fuss-h,81px) - 44px) / 2)}

  body:has(footer.boden){position:relative}
  button.heike.heike--weiche,body:has(footer.boden) .halt{position:absolute}
}
@media (max-width:760px){
  body:has(footer.boden) .boden{padding-bottom:.5rem}
  body:has(footer.boden) .fuss-zeile{width:100%;row-gap:1.1rem}
  body:has(footer.boden) .fuss-zeile nav{flex-basis:100%;justify-content:center;gap:1.1rem}
  body:has(footer.boden) .boden nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;margin-block:-8px 0}
  body:has(footer.boden) .fuss-zeile .halt{margin-right:auto}
  body:has(footer.boden){position:relative}
  button.heike.heike--weiche{position:absolute;bottom:calc(52px + 1.25rem)}
}
@media (min-width:761px) and (max-width:1090px){
  button.heike.heike--weiche{bottom:calc((var(--fuss-h,111px) - 49px) / 2)}
  body:has(footer.boden) .halt{bottom:calc((var(--fuss-h,111px) - 44px) / 2)}
}

.bildnachweis{padding-bottom:2rem;margin-top:-.6rem;font-size:.78rem;line-height:1.55;color:#5c6573}

button.heike{position:fixed;right:1.15rem;bottom:1.25rem;z-index:65;display:flex;align-items:center;gap:.55rem;background:#242933;
  color:#f2f5f9;font-family:inherit;font-weight:700;font-size:.98rem;border:0;padding:.66rem 1.15rem;cursor:pointer;
  box-shadow:0 8px 24px rgba(28,33,41,.35)}
button.heike img{width:30px;height:auto}button.heike[disabled]{cursor:default;opacity:.92}

p.heike{padding-right:8.5rem}