/* =====================================================================
   Zeugberg Real Estate – Website-Styles
   Jeder Abschnitt (.zs) enthält eine Desktop-Fläche (.zd, 1440 Design-px)
   und eine Mobil-Fläche (.zm, 402 Design-px). Beide werden per zoom exakt
   auf die Fensterbreite skaliert (--scale, gesetzt im <head>).
   ===================================================================== */


/* FK Roman Standard – lizenziert (Florian Karsten, Desktop+Web), Webdateien unverändert */
@font-face { font-family: "FK Roman Standard"; font-weight: 400; font-style: normal; src: url("../fonts/FKRomanStandard-Regular.woff2") format("woff2"), url("../fonts/FKRomanStandard-Regular.woff") format("woff"); }
@font-face { font-family: "FK Roman Standard"; font-weight: 500; font-style: normal; src: url("../fonts/FKRomanStandard-Medium.woff2") format("woff2"), url("../fonts/FKRomanStandard-Medium.woff") format("woff"); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #fff; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; }

html, body { overflow-x: clip; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover { object-fit: cover; pointer-events: none; }

/* Fonts */
.r  { font-family: "FK Roman Standard", "Iowan Old Style", Georgia, serif; font-weight: 400; }
.rm { font-family: "FK Roman Standard", "Iowan Old Style", Georgia, serif; font-weight: 500; }
.h  { font-family: "neue-haas-grotesk-text", "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; line-height: normal; }
.hm { font-family: "neue-haas-grotesk-text", "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; line-height: normal; }
/* Figma: 84.39 % der Font-Metrik (FK Roman: 1.28em) */
.lh { line-height: calc(0.8438999938964844 * 1.28); }
.nw { white-space: nowrap; }
.tc { text-align: center; }
.tr { text-align: right; }
.cx { transform: translateX(-50%); }
.rx { transform: translateX(-100%); }

/* Trennlinien als Border: wird beim Skalieren auf ganze Pixel gerundet → überall gleich dünn */
.line { height: 0; border-top: 1px solid; }
.line-w { border-color: #fff; }
.line-g { border-color: #949494; }

/* Footer-Balken: jeder Balken wischt von links herein und nach rechts wieder hinaus (clip-path, kein Aufpoppen) */
.bar img { width: 100%; height: 100%; }
.f-link { text-decoration: none; }                     /* Footer-Menü ohne Unterstreichung */

@keyframes c551 { 0%, 1.667% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 23.333%, 50% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 76.667%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c552 { 0%, 0% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 21.667%, 48.333% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 75%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c553 { 0%, 3.333% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 25%, 51.667% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 78.333%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c554 { 0%, 5% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 26.667%, 53.333% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 80%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c555 { 0%, 6.667% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 28.333%, 55% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 81.667%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c556 { 0%, 8.333% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 30%, 56.667% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 83.333%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c557 { 0%, 10% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 31.667%, 58.333% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 85%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c558 { 0%, 11.667% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 33.333%, 60% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 86.667%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c559 { 0%, 13.333% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 35%, 61.667% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 88.333%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c560 { 0%, 15% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 36.667%, 63.333% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 90%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c561 { 0%, 16.667% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 38.333%, 65% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 91.667%, 100% { clip-path: inset(0 0 0 100%); } }
@keyframes c562 { 0%, 18.333% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.65,0,0.35,1); } 40%, 66.667% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45,0,0.55,1); } 93.333%, 100% { clip-path: inset(0 0 0 100%); } }

/* Buttons + Hover (Figma 22:457: orange Streifen, gestaffelt links → rechts) */
.btn { display: block; text-decoration: none; cursor: pointer; overflow: hidden; }
.btn-label { position: absolute; transition: color .3s cubic-bezier(0.65,0,0.35,1) .15s; }
.btn-fx { position: absolute; inset: 0; display: flex; pointer-events: none; }
.btn-fx i { flex: 1 1 0; height: 100%; background: #e75431; transform: scaleX(0); transform-origin: left center;
  transition: transform .65s cubic-bezier(0.65,0,0.35,1); transition-delay: calc((var(--n) - 1 - var(--i)) * var(--step, 33.33ms) / 2); }
@media (hover: hover) { .btn:hover .btn-fx i, .btn:focus-visible .btn-fx i { transform: scaleX(1.02); transition-delay: calc(var(--i) * var(--step, 33.33ms)); } }
@media (hover: hover) { .btn:hover .btn-label, .btn:focus-visible .btn-label { color: #fff !important; } }
.btn-arrow { position: absolute; width: 14px; height: 14px; overflow: hidden; }
.btn-arrow img { transition: filter .3s cubic-bezier(0.65,0,0.35,1) .15s; }
@media (hover: hover) { .btn:hover .btn-arrow img, .btn:focus-visible .btn-arrow img { filter: invert(1) brightness(2); } }
.btn:focus-visible { outline: 1px solid #e75431; outline-offset: 2px; }
/* iOS-Datenerkennung: keine blauen Links in Kontaktdaten */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; }
a[href^="tel:"], a[href^="mailto:"], .page a[target="_blank"]:not(.ext-u) { text-decoration: none; }
/* Klick: Wisch-Animation im Schnelldurchlauf, danach Sprung */
.btn.is-pressed .btn-fx i { transform: scaleX(1.02); transition-duration: .38s; transition-delay: calc(var(--i) * var(--step, 33.33ms) / 2); }
.btn.is-pressed .btn-label { color: #fff !important; transition-delay: .1s; }
.btn.is-pressed .btn-arrow img { filter: invert(1) brightness(2); }

/* Team: Scroll hebt nacheinander eine Person hervor, Hover überschreibt das */
.team-row { display: block; z-index: 1; text-decoration: none; color: #777169; transition: color .4s cubic-bezier(0.65,0,0.35,1); }
.team-row.is-active { color: #000; }
@media (hover: hover) { .team-row:hover, .team-row:focus-visible { color: #fff; background: #e75431; outline: none; } }
.team-name, .team-role { position: absolute; white-space: nowrap; transition: transform .5s cubic-bezier(0.65,0,0.35,1) .1s; }
.team-plus { position: absolute; right: 100%; padding-right: .3em; opacity: 0; transition: opacity .4s cubic-bezier(0.65,0,0.35,1) .2s; }
@media (hover: hover) { .team-row:hover .team-name, .team-row:focus-visible .team-name { transform: translateX(24px); } }
@media (hover: hover) { .team-row:hover .team-role, .team-row:focus-visible .team-role { transform: translateX(-24px); } }
@media (hover: hover) { .team-row:hover .team-plus, .team-row:focus-visible .team-plus { opacity: 1; } }
.team-photo { z-index: 2; }
.team-photo img { opacity: 0; transition: opacity .5s cubic-bezier(0.65,0,0.35,1); }
.team-photo img.is-active { opacity: 1; }

/* Ladeseite */
/* absolut statt fixed: Safari (iOS 26) übernimmt sonst die Farbe fixer Elemente am unteren Rand für die Glas-Leiste */
#loader { position: absolute; top: 0; left: 0; width: 100%; height: calc(100vh + 300px); height: calc(100lvh + 300px); z-index: 1000; padding-bottom: 300px; background: #000; display: flex; align-items: center; justify-content: center; transition: opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.1s; }
/* Logo sitzt im Video 93,5px (von 2248) links der Mitte → um genau diesen Anteil nach rechts schieben */
#loader video { width: min(30vw, 480px); height: auto; display: block; transform: translateX(4.159%); }
#loader img { width: min(30vw, 480px); height: auto; display: block; transform: translateX(4.159%); }  /* WebP-Fallback, gleiche Lage wie Video */
#loader.done { opacity: 0; visibility: hidden; }
/* Übergang in zwei Stufen: erst das Logo, dann löst sich das Schwarz weich auf */
#loader video, #loader img { transition: opacity .5s cubic-bezier(.4,0,.2,1); }
#loader.fading video, #loader.fading img { opacity: 0; }
html.loading, html.loading body { overflow: hidden; }
/* Referenzen: beige Karte beim Hover */
/* Gestapelte Karten (wie harkcap.com/about-us) */
.stack-sticky { position: sticky; top: 0; width: 1440px; }
.stack-sticky > p, .stack-card > p { position: absolute; }
.stack-card { position: absolute; background: #fff; transform-origin: 50% 0; will-change: transform; }
.stack-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
/* Menü: Hover orange + leicht angehoben, "Über uns" klappt auf */
.nav-link { position: absolute; font-size: 12px; color: #fff; text-decoration: none; translate: 0 0;
  transition: color .3s cubic-bezier(0.65,0,0.35,1), translate .3s cubic-bezier(0.65,0,0.35,1); }
.nav-link::after { content: ""; position: absolute; inset: -16px -14px; }            /* größere Klickfläche */
html { scrollbar-gutter: stable; }
.svc-link { display: block; z-index: 2; cursor: pointer; }
html.lenis.lenis-stopped:not(.lenis-autoToggle) { overflow: hidden; }                 /* hidden statt clip, damit der Platz der Scrollleiste bleibt */                                                     /* Scrollleiste reserviert: nichts verrutscht, wenn Scrollen gestoppt wird */
@media (hover: hover) { .nav-link:hover, .nav-link:focus-visible, .nav-drop:hover > .nav-link { color: #e75431; translate: 0 -3px; outline: none; } }
.nav-drop { position: absolute; width: 0; height: 0; }
.nav-drop::before { content: ""; position: absolute; left: -40px; top: -10px; width: 90px; height: 40px; } /* Hover-Fläche */
/* Dreieck wie Figma-Polygon (6,06 × 3,75 in 7 × 5 Box), Farbe = Textfarbe */
.nav-caret { position: absolute; width: 7px; height: 5px; color: #fff; transform: rotate(180deg); translate: 0 0;
  transition: transform .3s cubic-bezier(0.65,0,0.35,1), translate .3s cubic-bezier(0.65,0,0.35,1), color .3s cubic-bezier(0.65,0,0.35,1); }
.nav-caret::before { content: ""; position: absolute; left: .469px; top: 0; border-left: 3.031px solid transparent; border-right: 3.031px solid transparent; border-bottom: 3.75px solid currentColor; }
@media (hover: hover) { .nav-drop:hover .nav-caret, .nav-drop:focus-within .nav-caret { transform: rotate(0deg); translate: 0 -3px; color: #e75431; } }
.nav-menu { position: absolute; top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s cubic-bezier(0.65,0,0.35,1), transform .3s cubic-bezier(0.65,0,0.35,1), visibility 0s linear .3s; }
.nav-menu .nav-link { position: relative; }
@media (hover: hover) { .nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.anchor { width: 1px; height: 1px; pointer-events: none; }
/* Menü-Button: runter scrollen → weg, hoch scrollen → kommt wieder; Farbe im Kontrast zum Abschnitt darunter */
/* Ganz oben über dem Bild: nur die drei weißen Striche, ohne Fläche und ohne "Menü" */
.m-svc-link { position: absolute; inset: 0; z-index: 2; }
.m-svc > p, .m-svc > div, .m-card > p, .m-ref > p, .m-stack-card > p, .m-stack-card > .m-svc-line { position: absolute; }
.m-svc { background: #fff; will-change: transform, opacity; }
.m-svc-line, .m-svc-end { position: absolute; height: 0; border-top: 1px solid #949494; }
.m-carousel { display: flex; gap: var(--gap); padding: 0 var(--pad); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.m-carousel::-webkit-scrollbar { display: none; }
.m-carousel::after { content: ""; flex: 0 0 1px; }
.m-card { position: relative; flex: 0 0 278px; height: 354px; scroll-snap-align: start; background: #f0eeec; }
.m-card-icon { position: absolute; left: 26px; top: 30px; width: 38px; height: 38px; }
.m-ref { position: relative; flex: 0 0 275px; height: 330px; scroll-snap-align: start; text-decoration: none; }
.m-ref-arrow { position: absolute; left: 216.474px; top: 0; width: 14px; height: 14px; }
.m-ref-arrow img { width: 14.25px; height: 8.4px; margin-top: 2.8px; filter: invert(1) brightness(2); }
.m-arrows button { position: absolute; top: 0; width: 11.25px; height: 23.92px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  transition: opacity .3s, translate .3s cubic-bezier(0.65,0,0.35,1); }
.m-arrows button::after { content: ""; position: absolute; inset: -12px -10px; }
.m-arrows button:disabled { opacity: .3; cursor: default; }
.m-arrows button svg { display: block; }
  background: url("../img/m/team-arrow.svg") center / 100% 100% no-repeat; }
.m-tp { position: absolute; inset: 0; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.m-tp img { transform: translateZ(0); }
.m-tp { transform: translate3d(0,336px,0); transition: transform .8s cubic-bezier(0.65,0,0.35,1); }
.m-tp.is-in, .m-tp:first-child { transform: translate3d(0,0,0); }
.m-tp .stack-shade { transition: opacity .8s cubic-bezier(0.65,0,0.35,1); }
.m-tp.is-covered .stack-shade { opacity: .55; }
.m-stack-card { position: sticky; top: calc(84px + var(--k) * 14px); height: 437px; margin-bottom: 40px; transform-origin: 50% 0; will-change: transform; }
/* Schwarz liegt auf einer inneren Ebene: Safari (iOS 26) übernimmt sonst die Hintergrundfarbe sticky Elemente am Rand für seine Leiste */
.m-stack-bg { position: absolute; inset: 0; background: #fff; }
.m-stack-card:last-child { margin-bottom: 0; }
.m-bar { height: 36.7981px; overflow: hidden; }
.m-bar i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); will-change: transform;
  animation: mbarIn 5s linear infinite backwards; }
.m-bar b { display: block; height: 100%; background: #e75431; transform-origin: right center; will-change: transform;
  animation: mbarOut 5s linear infinite backwards; }
.m-flink { text-decoration: none; }
.m-tm { view-timeline: --tm block; }
.m-tm-pin { position: sticky; top: min(47px, calc(100svh / var(--scale, 1) - 791px)); height: 775px; }   /* bei kleinen Bildschirmen höher anhalten, damit das Foto ganz sichtbar bleibt */
.m-tm-pin > p { position: absolute; }
.m-tm-photo { overflow: hidden; }
.m-tm-img { will-change: transform; }
.m-tm-img:not(:first-child) { transform: translateY(100%); }
@supports (animation-timeline: --tm) {
  .m-tm-img, .m-tm-name { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --tm; animation-range: contain 0% contain 100%; }
}
@keyframes mbarIn{0%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:scaleX(0)}18%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes mbarOut{0%{transform:scaleX(1)}50%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:scaleX(1)}68%{transform:scaleX(0)}100%{transform:scaleX(0)}}

/* Mobiles Menü: orange Balken fahren zeitversetzt von links nach rechts rein, dann gleitet der Text ein */
.m-menu { position: fixed; left: 0; top: 0; z-index: 900; width: 402px; height: calc(var(--vh, 100vh) / var(--scale, 1)); zoom: var(--scale, 1);
  visibility: hidden; pointer-events: none; }
.m-menu > * { position: absolute; }
.m-menu.is-open { visibility: visible; pointer-events: auto; }
.m-menu.is-closing { visibility: visible; }
.m-menu-stripes { inset: 0; display: flex; }
.m-menu-stripes i { flex: 1 1 0; height: 100%; background: #e75431; transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(0.65,0,0.35,1); transition-delay: calc(var(--i) * 32ms); }
.m-menu.is-open .m-menu-stripes i { transform: scaleX(1.03); }
/* Variante Zeilen: Balken in Zeilenhöhe (wie Menüpunkte), jede Zeile fährt leicht versetzt von links rein */
.m-menu.is-rows .m-menu-stripes { flex-direction: column; }
.m-menu.is-rows .m-menu-stripes i { width: 100%; height: auto; flex: 1 1 0; margin-top: -1px; transition-delay: calc(var(--i) * 40ms); }
.m-menu.is-rows.is-closing .m-menu-stripes i { transition-delay: calc(120ms + var(--i) * 30ms); }
.m-menu.is-closing .m-menu-stripes i { transform-origin: right center; transform: scaleX(0); transition-duration: .5s; transition-delay: calc(120ms + var(--i) * 24ms); }
.m-menu-in { opacity: 0; translate: 0 14px; transition: opacity .45s cubic-bezier(0.65,0,0.35,1), translate .6s cubic-bezier(0.22,1,0.36,1); }
.m-menu.is-open .m-menu-in { opacity: 1; translate: 0 0; transition-delay: calc(560ms + var(--d) * 60ms); }
.m-menu.is-closing .m-menu-in, .m-menu.is-closing .m-menu-link span { transition-duration: .2s; transition-delay: 0s; }
.m-close { padding: 0; border: 0; background: none; cursor: pointer; }
.m-close::after { content: ""; position: absolute; inset: -16px; }
.m-menu-links { display: flex; flex-direction: column; }
.m-menu-link { display: block; overflow: hidden; font-size: 36px; line-height: 1.4; color: #f0eeec; text-decoration: none; }
.m-menu-link span { display: block; translate: 0 105%; opacity: 0; transition: translate .7s cubic-bezier(0.22,1,0.36,1), opacity .4s cubic-bezier(0.65,0,0.35,1); }
.m-menu.is-open .m-menu-link span { translate: 0 0; opacity: 1; transition-delay: calc(560ms + var(--d) * 70ms); }
.m-menu.is-closing .m-menu-link span { opacity: 0; translate: 0 0; }
/* hero-fill */
/* Seitenwechsel aus dem mobilen Menü: Orange bleibt stehen, neue Seite lädt darunter, dann wischen die Balken raus */
html.zb-enter .m-menu { visibility: visible; background: #e75431; }
.m-menu.is-instant, .m-menu.is-instant * { transition: none !important; }
.m-menu.is-bare .m-menu-in, .m-menu.is-bare .m-menu-link span,
.m-menu.is-leaving .m-menu-in, .m-menu.is-leaving .m-menu-link span { opacity: 0 !important; transition: opacity .2s cubic-bezier(0.65,0,0.35,1) !important; }
/* Seitenübergang: orange Streifen fahren über die Seite, neue Seite startet orange und die Streifen wischen raus */
.pt { position: fixed; inset: 0; z-index: 2000; pointer-events: none; display: flex; flex-direction: column; visibility: hidden; }
.pt i { flex: 1 1 0; margin-top: -1px; background: #e75431; transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(.65,0,.35,1); transition-delay: calc(var(--i) * 30ms); }
.pt.is-in { visibility: visible; pointer-events: auto; }
.pt.is-in i { transform: scaleX(1.02); }
.pt.is-out { visibility: visible; }
.pt.is-out i { transform-origin: right center; transform: scaleX(0); transition-duration: .55s; transition-delay: calc(60ms + var(--i) * 28ms); }
.pt.is-instant i, .pt.is-instant .pt-logo { transition: none !important; }
/* Logo nur kurz, solange alles orange ist */
.pt-logo { position: absolute; left: 50%; top: 50%; width: clamp(150px, 15vw, 260px); height: auto; translate: -50% -50%; opacity: 0;
  transition: opacity .2s cubic-bezier(.65,0,.35,1); }
.pt.is-in .pt-logo { opacity: 1; transition-delay: calc(.45s + var(--n, 16) * 30ms); }
.pt.is-out .pt-logo { opacity: 0; transition-duration: .15s; }
html.zb-pt-enter::after { content: ""; position: fixed; inset: 0; z-index: 2001;
  background: #e75431 url("../img/logo.svg") center / clamp(150px, 15vw, 260px) auto no-repeat; }

/* ===================== Abschnitte ===================== */
.zs { position: relative; }
.zd, .zm { position: relative; zoom: var(--scale, 1); overflow: clip; }
.zd { width: 1440px; }
.zm { width: 402px; display: none; }
.zd > *, .zm > *, .abs { position: absolute; }
.zd p, .zm p { overflow-wrap: break-word; word-break: break-word; font-style: normal; }
.zd img, .zm img { display: block; max-width: none; }
.zb-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-width: 767px) {
  .zd { display: none; }
  .zm { display: block; }
  .m-menu { display: block; }
  #loader video, #loader img { width: min(62vw, 300px); }
}
/* Mobil im Textfluss: längere Texte schieben den Rest nach unten, Abstände bleiben fest */
.zm > .fl { position: relative; }
.fl > * { position: relative; }
.fl-tile { height: 81px; }
.fl-tile > .btn { position: absolute; }
.zbg { overflow: clip; }

/* Header liegt über dem ersten Abschnitt */
.zh { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 50; }
.zh > .zd, .zh > .zm { height: 0; overflow: visible; }
.nav { left: 720px; top: 71px; display: flex; gap: 59px; transform: translateX(-50%); }   /* drei Punkte als Gruppe mittig auf der Seite */
.nav .nav-link { position: relative; }
.logo-link { display: block; }

/* Buttons: Breite wächst mit dem Text, Mindestbreite wie Figma */
.btn-a { display: flex; align-items: center; justify-content: center; padding: 0 14px; }
.btn-a .btn-label { position: relative; font-size: 12px; line-height: normal; }
.btn-a.cx.is-pressed, .btn-a.rx.is-pressed { }

/* Footer-Balken (Desktop) */
.bar { top: 0; height: 36px; animation-duration: 7s; animation-timing-function: linear; animation-iteration-count: infinite; }
#b551 { animation-name: c551; } #b552 { animation-name: c552; } #b553 { animation-name: c553; }
#b554 { animation-name: c554; } #b555 { animation-name: c555; } #b556 { animation-name: c556; }
#b557 { animation-name: c557; } #b558 { animation-name: c558; } #b559 { animation-name: c559; }
#b560 { animation-name: c560; } #b561 { animation-name: c561; } #b562 { animation-name: c562; }
.ext-u { color: inherit; text-decoration: underline; text-decoration-skip-ink: none; text-underline-position: from-font; text-decoration-thickness: from-font; }

/* Mobiler Menü-Button */
.m-burger { padding: 0; border: 0; background: none; cursor: pointer; }
.m-hero-burger::after { content: ""; position: absolute; inset: -16px; }
.m-pill-wrap { display: none; position: fixed; left: 0; top: 0; z-index: 60; width: 402px; height: 0; zoom: var(--scale, 1); }
@media (max-width: 767px) { .m-pill-wrap { display: block; } }
.m-pill { position: absolute !important; background: #fff; color: #000; translate: 0 -80px;
  transition: translate .45s cubic-bezier(0.65,0,0.35,1), background-color .35s cubic-bezier(0.65,0,0.35,1), color .35s cubic-bezier(0.65,0,0.35,1); }
.m-pill.is-visible { translate: 0 0; }
.m-pill.is-dark { background: #000; color: #fff; }
.m-pill span { transition: opacity .3s cubic-bezier(0.65,0,0.35,1); }
.m-burger::after { content: ""; position: absolute; inset: -16px; }

/* Intro-/Ansatz-Karten */
.a-card { background: #f0eeec; }
.a-card > * { position: absolute; }

/* Team Startseite mobil: Name + Position wechseln mit dem Foto */
.m-tm-name { display: flex; justify-content: space-between; align-items: baseline; text-decoration: none; opacity: 0; }
.m-tm-n0 { opacity: 1; }
.m-team-plus { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -0.4px;
  background: url("../img/m/team-arrow.svg") center / 100% 100% no-repeat; }

/* Expertise-Liste mobil (Textfluss) */
.m-svc { position: relative; padding: 43px 0 5px; }
.m-svc > p { position: relative; }
.m-svc-t { margin-left: 34px; width: 335px; font-size: 15px; color: #000; }
.m-svc-d { margin: 44.8px 0 0 33px; width: 296px; font-size: 14px; color: #000; }
.m-svc-n { margin: 60.4px 33px 0 0; height: 95px; text-align: right; font-size: 80px; line-height: 1.08; color: #000; }
.m-svc .m-svc-line, .m-svc-endbox .m-svc-line { left: 33px; top: 0; width: 336px; }
/* Zeilen bleiben oben zurück und verblassen – per Scroll-Animation im Browser (wie site.js lines(): 0,55 × Weg, max. 230 px, weg nach 250 px) */
@supports (animation-timeline: view()) {
  .svc-native .m-svc { animation: svcLag linear both; animation-timeline: view(block 70px 0px); animation-range: exit-crossing 0% exit-crossing 418px; }
}
@keyframes svcLag { 0% { transform: none; opacity: 1; } 59.81% { opacity: 0; } 100% { transform: translate3d(0, 230px, 0); opacity: 0; } }
.m-svc-endbox { position: relative; z-index: 1; height: 249px; background: #fff; }
.m-svc-endbox > .btn { position: absolute; }

/* Datenbasiert mobil */
.m-stack { position: relative; }
.m-stack-card > p { position: absolute; }

/* Seitenübergang (mobil): Logo aus dem Theme */
@media (min-width: 768px) { html.zb-pt-enter::after { display: none; } }
.m-tm-pin > a { position: absolute; }

/* ===================== Expertise-Seite ===================== */
.x-row { background: #fff; will-change: transform; }
.x-row > p { position: absolute; }
.x-row > .x-mid { top: 50%; translate: 0 -50%; }       /* Titel und Text vertikal mittig in der Zeile */
.x-line { position: absolute; left: 0; top: 0; width: 100%; border-top: 1px solid #949494; }
.x-endbox { z-index: 2; background: #fff; }                 /* unter der Liste: Einträge tauchen beim Scrollen dahinter ab */
/* Grüner Block hält mit etwas Weiß oben an und reicht bis zum unteren Fensterrand; danach folgt der Footer */
.x-ans { background: transparent; }
.x-ans-pin { position: sticky; top: 0; height: 643px; background: #2E3D30; display: flex; align-items: center; }
.x-ans-inner { position: relative; flex: none; width: 1440px; height: 603px; }
.x-ans-inner > p { position: absolute; }
.x-ans-item { position: absolute; left: 92px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 20px; color: #f0eeec;
  opacity: .43; transition: opacity .5s cubic-bezier(.65,0,.35,1); text-align: left; white-space: nowrap; }
.x-ans-item.is-active, .x-ans-item:hover { opacity: 1; }
.x-ans-text { opacity: 0; translate: 0 12px; transition: opacity .5s cubic-bezier(.65,0,.35,1), translate .6s cubic-bezier(.22,1,.36,1); }
.x-ans-text.is-active { opacity: 1; translate: 0 0; transition-delay: .15s; }

/* Mobil im Textfluss (Unterseiten) */
.msec { padding: 80px 33px; }
.manchor { position: absolute; left: 0; top: -40px; width: 0; height: 0; }
.mlbl { font-size: 16px; color: #35332f; }
.mh2 { margin-top: 25px; font-size: 40px; color: #000; }
.mh32 { font-size: 32px; }
.mx-list { margin-top: 66px; }
.mx-row { position: relative; padding: 43px 0 6px; background: #fff; will-change: transform; }
.mx-line { position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid #949494; }
.mx-end { position: relative; display: block; }
.mx-t { font-size: 15px; color: #000; padding-left: 1px; }
.mx-d { margin-top: 45px; width: 296px; font-size: 14px; color: #000; }
.mx-n { margin-top: 60px; text-align: right; font-size: 80px; line-height: 1.08; color: #000; }
.mx-ans { background: #2E3D30; }
/* Ansatz ohne Texte: nur die vier Phasen, steht ruhig */
.x-ans-static { position: absolute; background: #2E3D30; }
.x-ans-static > p, .x-ans-static > .btn { position: absolute; }
.x-ans-static .x-ans-item { cursor: default; }
.mx-ans-static { background: #2E3D30; padding: 60px 33px; }
.mx-ans-static .mlbl { color: #f0eeec; }
.mx-ans-static .mh2 { color: #fff; }
.mx-ans-static .mx-item { cursor: default; }
.mx-ans-pin { position: sticky; top: 0; padding: 60px 33px; }
.mx-ans .mlbl { color: #f0eeec; }
.mx-ans .mh2 { color: #fff; }
.mx-ans-line { margin-top: 40px; border-top: 1px solid #949494; }
.mx-items { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mx-item { padding: 0; border: 0; background: none; font-size: 20px; line-height: 1.3; color: #f0eeec; opacity: .43; text-align: left;
  transition: opacity .5s cubic-bezier(.65,0,.35,1); }
.mx-item.is-active { opacity: 1; }
.mx-texts { margin-top: 30px; display: grid; }
.mx-texts > p { grid-area: 1 / 1; font-size: 16px; color: #f0eeec; opacity: 0; translate: 0 10px;
  transition: opacity .5s cubic-bezier(.65,0,.35,1), translate .6s cubic-bezier(.22,1,.36,1); }
.mx-texts > p.is-active { opacity: 1; translate: 0 0; transition-delay: .15s; }

/* ===================== Team-Seite ===================== */
.t-person { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.t-person > span { position: absolute; }
.t-photo { left: 0; top: 0; width: 328px; height: 352px; overflow: hidden; background: #f0eeec; }
.t-photo img { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.t-name { left: 0; top: 376px; font-size: 24px; line-height: 1.3; color: #000; }
.t-role { left: 0; top: 411px; font-size: 16px; color: #000; }
.t-arrow { left: 313px; top: 385px; width: 14px; height: 14px; transition: translate .5s cubic-bezier(.65,0,.35,1); }
@media (hover: hover) {
  .t-person:not(.is-empty):hover .t-photo img { transform: scale(1.04); }
  .t-person:not(.is-empty):hover .t-arrow { translate: 5px 0; }
}
.t-person.is-empty { cursor: default; }
.t-modal { position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.41); visibility: hidden; opacity: 0;
  transition: opacity .45s cubic-bezier(.65,0,.35,1), visibility 0s linear .45s; }
.t-modal.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.t-box { position: absolute; left: 50%; top: 50%; width: 875px; height: 535px; zoom: var(--scale, 1);
  translate: -50% calc(-50% + 24px); transition: translate .7s cubic-bezier(.22,1,.36,1); }
.t-modal.is-open .t-box { translate: -50% -50%; }
.t-box > * { position: absolute; }
.t-box-photo { left: 0; top: 0; width: 409px; height: 535px; overflow: hidden; background: #f0eeec; }
.t-box-panel { left: 409px; top: 0; width: 466px; height: 535px; background: #e75431; clip-path: inset(0 100% 0 0);
  transition: clip-path .75s cubic-bezier(.65,0,.35,1); }
.t-modal.is-open .t-box-panel { clip-path: inset(0 0 0 0); transition-delay: .1s; }
.t-box-panel > p { position: absolute; left: 72px; color: #f0eeec; opacity: 0; translate: 0 10px;
  transition: opacity .5s cubic-bezier(.65,0,.35,1), translate .7s cubic-bezier(.22,1,.36,1); }
.t-modal.is-open .t-box-panel > p { opacity: 1; translate: 0 0; transition-delay: .45s; }
.t-box-name { top: 143px; width: 360px; font-size: 24px; line-height: 1.3; }
.t-box-role { top: 181px; font-size: 16px; }
.t-box-bio { top: 266px; width: 322px; font-size: 16px; }   /* rechts derselbe Abstand wie links (72px) */
.t-close { right: 31px; top: 30px; width: 11px; height: 11px; padding: 0; border: 0; background: none; cursor: pointer; }
.t-close::after { content: ""; position: absolute; inset: -14px; }
.t-close svg { display: block; }
.mt-list { margin-top: 52px; }
.mt-person { position: relative; display: block; width: 336px; margin-top: 57px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.mt-list .mt-person:first-child { margin-top: 0; }
.mt-person > span { position: relative; display: block; }
.mt-person > .t-arrow { position: absolute; left: auto; right: 0; top: 387px; width: 14px; height: 14px; }
.mt-photo { width: 336px; height: 336px; overflow: hidden; background: #f0eeec; }
.mt-name { margin-top: 42px; font-size: 24px; line-height: 1.3; color: #000; }
.mt-role { margin-top: 4px; font-size: 16px; color: #000; }
.mt-person.is-empty { cursor: default; }
.mt-h2b { margin-top: 80px; }
@media (max-width: 767px) {
  .t-modal { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .t-box { position: relative; left: auto; top: auto; width: 336px; height: auto; margin: 60px auto; translate: 0 24px; }
  .t-modal.is-open .t-box { translate: 0 0; }
  .t-box > .t-box-photo, .t-box > .t-box-panel { position: relative; left: auto; top: auto; }
  .t-box-photo { width: 336px; height: 336px; }
  .t-box-panel { width: 336px; height: auto; padding: 51px 26px 44px; clip-path: inset(0 0 100% 0); }
  .t-box-panel > p { position: static; }
  .t-box-name { width: auto; }
  .t-box-role { margin-top: 7px; }
  .t-box-bio { margin-top: 54px; width: 290px; }
  .t-box-bio:empty { display: none; }
  .t-close { right: 20px; top: 20px; z-index: 2; }
  .t-close::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: rgba(0,0,0,.28); }
  .t-close svg { position: relative; }
}

/* ===================== Unternehmen-Seite ===================== */
.q-box { transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; color: #000; text-align: center; }
.q-box p { position: relative; line-height: 1.08; }
.l-card { background: #f0eeec; overflow: hidden; }
.l-card > * { position: absolute; }
.l-body > p { position: absolute; }
.l-body { transition: transform .8s cubic-bezier(.65,0,.35,1); }
.l-card.is-open .l-body { transform: translateY(calc(-1 * var(--shift, 0px))); }
.l-desc.is-measuring { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.l-mask { left: 0; right: 0; bottom: 0; top: var(--bar-top, 354px); background: #f0eeec; z-index: 1; }
.l-more { right: 39px; top: calc(var(--bar-top, 354px) - var(--lh, 16px)); height: var(--lh, 16px); z-index: 1;
  padding-left: 22px; font-size: 12px; color: #000; background: linear-gradient(90deg, rgba(240,238,236,0), #f0eeec 20px);
  opacity: 0; transition: opacity .35s ease .45s; pointer-events: none; }
.l-card.has-more .l-more { opacity: 1; }
.l-card.has-more.is-open .l-more { opacity: 0; transition-delay: 0s; transition-duration: .2s; }
.ml-card { position: relative; flex: 0 0 278px; height: 354px; scroll-snap-align: start; background: #f0eeec; }
.ml-card > * { position: absolute; }
.ml-body { left: 26px; bottom: 29px; width: 223px; }
.ml-body > p { position: relative; }
.loc-block { position: absolute; left: 0; top: 0; width: 273px; height: 127px; background: #000; overflow: hidden;
  transition: transform .8s cubic-bezier(.65,0,.35,1); }
.loc-fill { position: absolute; inset: 0; background: #e75431; transform: scaleX(0); transform-origin: left center; }
.loc.is-running .loc-fill { animation: locFill 6s linear forwards; }
.loc.is-paused .loc-fill { animation-play-state: paused; }
@keyframes locFill { to { transform: scaleX(1); } }
.loc-item { position: absolute; top: 0; width: 273px; height: 127px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: #000;
  transition: color .5s cubic-bezier(.65,0,.35,1) .25s; }
.loc-item.is-active { color: #fff; }
.loc-item > span { position: absolute; left: 26px; }
.loc-city { top: 29px; font-size: 24px; line-height: 1.08; }
.loc-addr { top: 68px; font-size: 15px; line-height: 1.08; white-space: nowrap; }
.loc-img { overflow: hidden; background: #f0eeec; }
.loc-pic { position: absolute; inset: 0; opacity: 0; transition: opacity .9s cubic-bezier(.65,0,.35,1); }
.loc-pic.is-active { opacity: 1; }
.loc-shade { position: absolute; inset: 0; background: rgba(0,0,0,.06); pointer-events: none; }
.loc-m .loc-block, .loc-m .loc-item { width: 336px; }
/* Einblenden wie blackstone.com (20px, 0,8s) + rollende Ziffern */
.rv { opacity: 0; translate: 0 20px; transition: opacity .8s cubic-bezier(.25,.46,.45,.94), translate .8s cubic-bezier(.25,.46,.45,.94);
  transition-delay: calc(var(--rd, 0) * 110ms); }
.rv.in { opacity: 1; translate: 0 0; }
.odo { display: inline-block; height: 1lh; overflow: hidden; vertical-align: top; }
.odo-col { display: flex; flex-direction: column; transition: transform 1.8s cubic-bezier(.16,1,.3,1); transition-delay: calc(120ms + var(--i) * 110ms); }
.rv-num.in .odo-col { transform: translateY(calc(var(--d) * -1lh)); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; transition: none; } .odo-col { transition: none; } }
.editor-styles-wrapper .rv { opacity: 1; translate: none; }

/* Buttons im Textfluss (unter Texten, deren Länge sich ändern kann) */
.fl-abs { position: absolute; }
.fl-abs > * { position: relative; }
.zb-flowbtn { position: relative; height: 35px; }
.zb-flowbtn > .btn { position: relative; display: inline-flex; left: 0 !important; top: 0 !important; }
.stack-sticky > .fl-abs, .x-ans-inner > .btn { position: absolute; }
.mx-ans-pin .zb-flowbtn { display: block; }

/* Sprachumschalter DE / EN: aktive Sprache weiß, andere im Braungrau */
.zb-lang { display: flex; gap: .35em; color: #777169; line-height: normal; white-space: nowrap; }
.zb-lang a { color: #777169; text-decoration: none; transition: color .2s; }
.zb-lang a:hover, .zb-lang a:focus-visible { color: #fff; }
.zb-lang .is-current { color: #fff; }
/* Hinweis auf die andere Sprache (nur wenn die Browsersprache nicht passt), verschwindet beim Scrollen */
.zb-lang-hint { position: fixed; left: 24px; bottom: 24px; z-index: 80; display: flex; align-items: center; height: 35px; background: #e75431; color: #fff;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px;
  translate: 0 calc(100% + 40px); transition: translate .6s cubic-bezier(.65,0,.35,1); }
.zb-lang-hint[hidden] { display: none; }
.zb-lang-hint.is-in { translate: 0 0; }
.zb-lang-hint a { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px 0 14px; color: #fff; text-decoration: none; }
.zb-lang-hint-x { width: 32px; height: 100%; padding: 0; border: 0; border-left: 1px solid rgba(255,255,255,.35); background: none; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }

/* ===================== Kontakt ===================== */
/* Mobil: „Kontakt“ statt Menü-Strichen; der mitlaufende Button heißt ebenfalls „Kontakt“ */
.m-hero-burger { transform: translateX(-100%); white-space: nowrap; line-height: normal; }
.m-pill { display: flex; align-items: center; padding: 0 14px; transform: translateX(-100%); white-space: nowrap; }
/* Mobil: Menü zeigt die Kontaktdaten */
.zb-cm p { position: relative; font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #fff; }
.zb-cm a { color: inherit; text-decoration: none; }
/* Firma – kleiner Abstand – Tel./Mail – kleiner Abstand – Adresse 1 – etwas kleiner – Adresse 2 – LinkedIn */
.zb-cm .zb-cm-gap { margin-top: 20px; }
.zb-cm .zb-cm-k { display: inline-block; width: 52px; }
.zb-cm .zb-cm-adr { margin-top: 12px; }
.zb-cm .zb-cm-gap + .zb-cm-adr, .zb-cm p + .zb-cm-adr { margin-top: 20px; }
.zb-cm .zb-cm-adr p { line-height: 21px; }
/* Desktop-Kontakt: Positionen nach Figma 122:2, Schrift nach Seitenregeln */
.zb-ca { position: absolute; display: grid; grid-template-columns: minmax(130px, max-content) max-content; column-gap: 24px; row-gap: 12px; }
.zb-ca p { position: relative; margin: 0; font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 29px; color: #fff; }
.zb-ca a { color: inherit; text-decoration: none; }
.zb-ca .zb-ca-gap { margin-top: 30px; }
.zb-ca .zb-ca-gap2 { margin-top: -4px; }
.zb-ca .zb-ca-gap3 { margin-top: 25px; grid-column: 1 / -1; }
/* Desktop: orange Fläche rechts, klappt auf wie das Profil-Fenster */
.zb-contact { position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.41); visibility: hidden; opacity: 0;
  transition: opacity .45s cubic-bezier(.65,0,.35,1), visibility 0s linear .45s; }
.zb-contact.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.zb-contact-panel { position: absolute; top: 0; right: 0; height: 100%; width: calc(563px * var(--scale, 1)); background: #e75431;
  clip-path: inset(0 0 0 100%); transition: clip-path .75s cubic-bezier(.65,0,.35,1); }
.zb-contact.is-open .zb-contact-panel { clip-path: inset(0 0 0 0); transition-delay: .05s; }
.zb-contact-in { position: relative; width: 563px; zoom: var(--scale, 1); }
.zb-contact-in > * { position: absolute; color: #fff; opacity: 0; translate: 0 10px;
  transition: opacity .5s cubic-bezier(.65,0,.35,1), translate .7s cubic-bezier(.22,1,.36,1); }
.zb-contact.is-open .zb-contact-in > * { opacity: 1; translate: 0 0; transition-delay: .45s; }
.zb-contact-in a { text-decoration: none; }
.zb-contact-in a:hover { text-decoration: underline; text-underline-position: from-font; }
.zb-contact-x { right: 31px; top: 30px; width: 11px; height: 11px; padding: 0; border: 0; background: none; cursor: pointer; }
.zb-contact-x::after { content: ""; position: absolute; inset: -14px; }
.zb-contact-x svg { display: block; }
@media (max-width: 767px) { .zb-contact { display: none; } }

/* Sprachumschalter im orangen Menü: inaktiv in hellem Grau mit genug Kontrast */
.m-menu .zb-lang, .m-menu .zb-lang a { color: rgba(255,255,255,.62); }
.m-menu .zb-lang .is-current, .m-menu .zb-lang a:hover { color: #fff; }