:root {
  /* auf 4,5:1 gegen Weiß abgedunkelt (WCAG AA für CTA-Text und Inline-Links, Markenhue gehalten); vorher #0a95b3 ≈ 3,5:1 */
  --teal: #0a819c;
  --ink: #0e1518;
  --muted: #6a767b;
  --paper: #ffffff;
  --line: #e5e6e2;
  --gut: clamp(18px, 4.4vw, 84px);
  --nav: 96px;
  --footer-h: 52px;
}

* {
  box-sizing: border-box;
  margin: 0;
}

/* Nur für Screenreader & Suchmaschinen sichtbar (visuell ausgeblendet) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  /* Overscroll-/Rubber-Band-Bereich in Footer-Farbe statt Weiß
     (der weiße body deckt den Inhalt normal ab; Schwarz erscheint nur beim Überscrollen) */
  background: #000;
}

body {
  height: auto;
  min-height: 100%;
  /* body in Footer-Farbe: Safari nimmt für den unteren Overscroll die body-Farbe,
     Chrome die html-Farbe -> beide schwarz. Das weiße Seiten-Aussehen liefert der
     Inhalt (main / .hero / die Sektionen haben eigene helle Hintergründe). */
  background: #000;
  color: var(--ink);
  font-family: 'Open Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Inhaltsfläche deckt den schwarzen body ab; Schwarz bleibt nur im Overscroll
   (und hinter dem dunklen Footer / der mb-stage). */
main {
  background: var(--paper);
}

/* (Früher hatten start/web hier einen hellen body als Ausnahme — nicht mehr nötig,
   seit der Hero via eigenem Stacking-Context sein Weiß selbst liefert.) */

/* ---------- Navbar ---------- */
header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gut);
  background: rgba(255, 255, 255, .95);
  transition: background .5s ease;
}

.brand {
  display: block;
}

.brand img {
  display: block;
  width: 80px;
  height: 80px;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 40px);
}

.mainnav a {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
  font-size: 20px;
  line-height: 30px;
  text-decoration: none;
  color: #000;
  transition: color .5s ease;
  white-space: nowrap;
}

.mainnav a:hover {
  color: rgba(0, 0, 0, .7);
}

/* Dunkle Navbar, sobald die MacBook-Animation sie berührt */
header.nav-dark {
  background: #000;
}

header.nav-dark .mainnav a {
  color: #fff;
}

header.nav-dark .mainnav a:hover {
  color: rgba(255, 255, 255, .7);
}

header.nav-dark .burger span {
  background: #fff;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: transform .28s, opacity .2s, background .5s ease;
}

.burger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  /* Eigener Stacking-Context + heller Hintergrund: so liefert der Hero sein Weiß
     selbst und der body darf schwarz sein (Overscroll). Das z-index:-1-Foto (.media)
     liegt dann ÜBER diesem Hintergrund, der Mix-Blend-Headline blendet weiter gegen
     Weiß (links) und Foto (rechts) — gleiches Aussehen wie zuvor. */
  z-index: 0;
  background: var(--paper);
}

.media {
  position: absolute;
  top: var(--nav);
  bottom: 0;
  right: var(--gut);
  z-index: -1;
  width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.plate {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 1365;
}

.media .frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.media picture {
  display: contents;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.media .fx {
  display: none;
  width: 100%;
  height: 100%;
}

/* WebGL-Fluid-Hover nur auf echten Desktops — UND erst, wenn JS die Simulation
   erfolgreich gestartet hat (.fx-active auf .media). Fehlt three.js, ist WebGL
   nicht verfügbar, wirft der Renderer oder lädt die Textur nicht, bleibt das
   <img> als Fallback sichtbar statt eines leeren Canvas. */
@media (hover:hover) and (pointer:fine) and (min-width:861px) {
  .media.fx-active .fx {
    display: block;
  }

  .media.fx-active picture,
  .media.fx-active img {
    display: none;
  }
}

/* Intro-Wipe über dem Foto */
.media .frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  z-index: 2;
  transform-origin: right;
  transition: transform 1.1s cubic-bezier(.76, 0, .24, 1) .15s;
}

.reveal .media .frame::after {
  transform: scaleX(0);
}

.cap {
  position: absolute;
  right: 0;
  bottom: -26px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 1s ease .8s;
}

.reveal .cap {
  opacity: 1;
}

.cap .tick {
  color: var(--teal);
}

.cap .coord {
  margin-left: 16px;
}

/* KEIN z-index/transform hier — sonst isoliert er den mix-blend-mode der Headline */
.stage {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav) var(--gut) clamp(24px, 5vh, 64px);
  pointer-events: none;
}

.stage>* {
  pointer-events: auto;
}

.eyebrow {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: clamp(11px, 1vw, 13px);
  color: var(--teal);
  margin-bottom: 0;
  opacity: 0;
  transition: opacity .8s ease .1s;
}

.reveal .eyebrow {
  opacity: 1;
}

.eyebrow .pin {
  color: var(--muted);
}

/* Riesentypo mit Verrechnungsmodus difference: weiß über dunkel, schwarz über weiß */
h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.015em;
  font-size: clamp(56px, 11.4vw, 186px);
  margin: 0;
  color: #fff;
  mix-blend-mode: difference;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 .ln {
  display: block;
  overflow: hidden;
  margin-bottom: -.16em;
}

h1 .ln>span {
  display: inline-block;
  vertical-align: top;
  transform: translateY(110%);
}

.reveal h1 .ln>span {
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
}

.reveal h1 .ln:nth-child(1)>span {
  transition-delay: .18s
}

.reveal h1 .ln:nth-child(2)>span {
  transition-delay: .30s
}

.reveal h1 .ln:nth-child(3)>span {
  transition-delay: .42s
}

.ln.indent {
  padding-left: .4em;
}

/* "Creative" als Konturschrift (Glyphen-Metrik bleibt gleich) */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
}

/* Weiße Klon-Headline, auf den Bildbereich geklippt (nur Mobil) */
.h1-wrap {
  position: relative;
}

.h-clip {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: #fff !important;
  mix-blend-mode: normal !important;
}

/* Desktop-Pendant zu .h-clip: solide, scharfe Headline-Kopie über der weißen Zone
   links der Bildkante (crisp statt Difference-Blend-Treppchen). Der Klon wird nur auf
   Blend-Seiten (nicht .mp-page) per JS erzeugt und via clipSolid() auf den weißen
   Bereich geclippt; über dem Bild bleibt die adaptive Blend-Headline sichtbar. */
.h-solid {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ink) !important;
  mix-blend-mode: normal !important;
}

/* Konturschrift (z. B. "Creative" auf start.html) in der soliden Kopie dunkel umranden
   statt weiß — sonst wäre der weiße Stroke auf dem weißen Grund unsichtbar. */
.h-solid .outline {
  -webkit-text-stroke-color: var(--ink);
  text-stroke-color: var(--ink);
}

@media (min-width:861px) {
  .h-solid {
    display: block;
  }
}

.lower {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
  max-width: 560px;
  margin-top: 3.1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease .55s, transform 1s cubic-bezier(.16, 1, .3, 1) .55s;
}

.reveal .lower {
  opacity: 1;
  transform: none;
}

/* web.html-Hero: Subline und CTA nebeneinander, solange sie neben dem Hero-Bild
   (rechts, 50vw breit) Platz haben; sonst bricht der CTA per flex-wrap darunter. Die
   Max-Breite endet knapp vor der linken Bildkante (50vw − beidseitiges --gut − 16px),
   damit der CTA nie ins Bild ragt. */
@media (min-width:861px) {
  .lower-inline {
    max-width: calc(50vw - 2 * var(--gut) - 16px);
    /* CTA vertikal zur (mehrzeiligen) Subline zentrieren, statt unten bündig */
    align-items: center;
  }
}

.sub {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 32ch;
}

/* zusammenhängende Begriffe (z. B. Ortsname) nie umbrechen */
.nowrap {
  white-space: nowrap;
}

.cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(13px, 1.2vw, 15px);
  text-decoration: none;
  color: #fff;
  background: var(--teal);
  white-space: nowrap;
  padding: 15px 26px;
  transition: .25s;
}

.cta:hover {
  background: #0b7f99;
}

.cta-arrow {
  width: 14px;
  height: 14px;
  transition: transform .25s;
}

.cta:hover .cta-arrow {
  transform: translateY(3px);
}

/* Leiser Sekundär-Link für die sofort-Bereiten */
.cta-soft {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 14px);
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}

.cta-soft:hover {
  color: var(--ink);
}

.cta-soft-arrow {
  width: 13px;
  height: 13px;
  transition: transform .25s;
}

.cta-soft:hover .cta-soft-arrow {
  transform: translateX(3px);
}

.vlabel {
  position: absolute;
  right: 18px;
  top: 50%;
  z-index: 25;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 1s ease .7s;
}

.reveal .vlabel {
  opacity: 1;
}

.vlabel .ln2 {
  width: 30px;
  height: 1px;
  background: var(--muted);
}

/* ---------- Mobile: Bild oben, Typo überlagert die Bildunterkante ---------- */
@media (max-width:860px) {
  :root {
    --nav: 80px;
  }

  .brand img {
    width: 64px;
    height: 64px;
  }

  .burger {
    display: flex;
    position: relative;
    z-index: 43;
  }

  /* Off-Canvas-Panel: fährt von rechts herein */
  .mainnav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(82vw, 360px);
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-left: 1px solid var(--line);
    padding: calc(var(--nav) + 16px) clamp(28px, 7vw, 44px) 40px;
    transform: translateX(100%);
    pointer-events: none;
    visibility: hidden;
    transition: transform .42s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .42s;
    z-index: 41;
  }

  .mainnav.open {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform .42s cubic-bezier(.16, 1, .3, 1);
    box-shadow: -24px 0 70px rgba(0, 0, 0, .22);
  }

  .mainnav a {
    font-size: 26px;
    padding: 12px 0;
  }

  header.nav-dark .mainnav {
    background: rgba(0, 0, 0, .96);
    border-left-color: rgba(255, 255, 255, .14);
  }

  /* abgedunkelter Hintergrund hinter dem Panel */
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .42s ease;
  }

  .nav-scrim.show {
    opacity: 1;
    pointer-events: auto;
  }

  .hero {
    min-height: 0;
    padding-top: var(--nav);
  }

  .media {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: 100%;
    display: block;
    transform: none !important;
  }

  .plate {
    aspect-ratio: 5 / 4;
  }

  .cap {
    display: none;
  }

  .stage {
    position: relative;
    min-height: 0;
    height: auto;
    display: block;
    padding: 0 var(--gut) 24px;
    transform: none !important;
    margin-top: -12svh;
  }

  .eyebrow {
    margin-top: 0;
    margin-bottom: .4rem;
    color: #fff;
    mix-blend-mode: normal;
    font-size: 10px;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .eyebrow .pin {
    display: none;
  }

  h1 {
    font-size: clamp(46px, 13.4vw, 84px);
    color: var(--ink);
    mix-blend-mode: normal;
  }

  .outline {
    color: inherit;
    -webkit-text-stroke: 0;
    text-stroke: 0;
  }

  .h-clip {
    display: block;
  }

  .ln.indent {
    padding-left: .5em;
  }

  /* nur der CTA zentriert (Eyebrow + Headline bleiben linksbündig) */
  .lower {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 100%;
    margin-top: 1.4rem;
  }

  .vlabel {
    display: none;
  }
}

/* Sehr schmale Geräte: Eyebrow etwas kleiner/enger halten */
@media (max-width:359px) {
  .eyebrow {
    font-size: 9px;
    letter-spacing: .07em;
  }
}

/* ---------- Services ---------- */
/* ---------- Philosophie (Brücke Hero -> Services) — zentriertes Statement ---------- */
.philosophy {
  background: var(--paper);
  /* Desktop: oberer Abstand etwas reduziert (Statement rückt nach oben, näher an den Hero);
     unterer Abstand bleibt. Mobile ist unter @media (max-width:860px) separat gesetzt. */
  padding: clamp(60px, 11vh, 140px) var(--gut) clamp(80px, 15vh, 190px);
  text-align: center;
  scroll-margin-top: var(--nav);
}

.phil-statement {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(21px, 2.7vw, 40px);
  line-height: 1.34;
  color: var(--muted);
  max-width: 960px;
  margin: 0 auto;
}

/* hervorgehobene Schlüsselwörter: dunkler + kräftiger */
.phil-statement .hl {
  color: var(--ink);
  font-weight: 600;
}

/* wichtige Wörter (nur diese .mark-Spans): handgezeichneter Sketch-Unterstrich (Teal),
   per JS als einzelner Pfad gezeichnet. nowrap, damit der Strich nicht bricht. */
.phil-statement .mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  /* keine Farb-Hervorhebung – die Wörter erben das muted des Fließtexts,
     hervorgehoben wird nur durch den Unterstrich */
}

/* statischer Fallback-Strich (ohne JS / reduced-motion) – ein Pfad, keine Naht */
.phil-statement .mark:not(.has-sketch)::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: -0.13em;
  height: 0.3em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1,6%20C20,3.4%2035,8.2%2050,5.2%20C66,2.2%2082,8%2099,5'%20fill='none'%20stroke='%230a819c'%20stroke-width='2.4'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  pointer-events: none;
}

/* gezeichneter Strich (mit JS): SVG-Pfad, wird per stroke-dashoffset links->rechts gezeichnet */
.phil-statement .mark-sketch {
  position: absolute;
  left: -0.06em;
  width: calc(100% + 0.12em);
  bottom: -0.13em;
  height: 0.34em;
  overflow: visible;
  pointer-events: none;
}

@media (max-width:860px) {
  .philosophy {
    padding: clamp(56px, 10vh, 110px) var(--gut);
    text-align: left;
  }
}

/* ---------- Prinzipien-Band (web.html): schmaler Keyword-Streifen ---------- */
.principles {
  list-style: none;
  margin: 0;
  padding: clamp(26px, 5vh, 54px) var(--gut);
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 22px) clamp(20px, 3.4vw, 48px);
}

.principles li {
  display: flex;
  align-items: center;
  gap: .7em;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(12px, 1.05vw, 15px);
  color: var(--ink);
  white-space: nowrap;
}

.principles li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

@media (max-width:860px) {
  /* Auf den Matterport-Landingpages die Keyword-Liste mobil ausblenden
     (web.html behält sie über die Regeln unten). */
  .mp-page .principles,
  .principles.hide-mobile {
    display: none;
  }

  .principles {
    justify-content: flex-start;
    gap: 10px clamp(16px, 4vw, 28px);
  }

  .principles li {
    font-size: 12px;
    letter-spacing: .08em;
  }
}

.services {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 9vh, 120px) 0 clamp(40px, 7vh, 90px);
  scroll-margin-top: var(--nav);
}

.svc-head {
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  padding-top: 14px;
}

.svc-head .lbl {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 13px;
}

/* svc-head nur auf Desktop */
@media (max-width:860px) {
  .services {
    padding-top: clamp(14px, 2.2vh, 26px);  /* weniger Weißraum nach dem Hero-CTA */
  }

  .svc-head {
    display: none;
  }
}

.svc-marquee {
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink);
  margin-top: 6px;
  padding-bottom: clamp(6px, 0.9vw, 16px);
}

.svc-marquee .track {
  display: inline-block;
  animation: svcscroll 28s linear infinite;
}

.svc-marquee span {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(46px, 9vw, 150px);
  line-height: 1.06;
  letter-spacing: -.01em;
  padding: 0 .12em;
}

/* Mobile: Laufband oben + unten von einer Linie gerahmt, mit optisch gleichem
   Abstand zur Schrift (Font sitzt ~8px höher im Zeilenkasten -> oben weniger,
   unten mehr Padding). Steht bewusst NACH der .svc-marquee-Basis. */
@media (max-width:860px) {
  .svc-marquee {
    border-top: 1px solid var(--ink);
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 22px;
  }
}

@keyframes svcscroll {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(calc(-1 * var(--shift, 50%)))
  }
}

.svc-row {
  display: grid;
  grid-template-columns: 110px minmax(220px, 1.1fr) 1.4fr 80px;
  align-items: start;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(28px, 4vw, 46px) var(--gut);
  border-bottom: 1px solid var(--line);
  transition: background .25s;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Nicht verlinkte Service-Boxen (web.html) nicht als klickbar darstellen */
.svc-row:not(a) {
  cursor: default;
}

.svc-row:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

a.svc-row:hover {
  background: #fafafa;
}

.svc-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2vw, 30px);
  color: var(--ink);
}

.svc-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: none;
  line-height: 1;
  font-size: clamp(30px, 3.4vw, 52px);
  letter-spacing: -.01em;
}

.svc-desc {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: #374046;
}

.svc-desc a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 149, 179, .35);
  transition: border-color .2s;
}

.svc-desc a:hover {
  border-bottom-color: var(--teal);
}

.svc-desc .svc-list {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--muted);
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.7;
}

.svc-icon {
  justify-self: end;
  width: 64px;
  height: 64px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.svc-icon svg {
  width: 26px;
  height: 26px;
}

a.svc-row:hover .svc-icon {
  background: var(--ink);
  color: #fff;
}

@media (max-width:860px) {
  .svc-row {
    grid-template-columns: 48px 1fr;
    grid-template-areas: "num title" "desc desc";
    gap: 6px 14px;
  }

  .svc-num {
    grid-area: num;
  }

  .svc-titlewrap {
    grid-area: title;
  }

  .svc-desc {
    grid-area: desc;
    margin-top: 14px;
  }

  .svc-icon {
    display: none;
  }

  .svc-title {
    font-size: clamp(26px, 7vw, 38px);
  }
}

/* ---------- MacBook-Scroll-Animation ---------- */
.mb-stage {
  position: relative;
  z-index: 1;
  background: #000;
  height: 240vh;
}

/* Desktop: Animation rechts, Text/CTA links daneben; unten Platz für den schmalen Footer */
.mb-pin {
  position: sticky;
  top: 0;
  height: calc(100svh - var(--footer-h));
  height: calc(100vh - var(--footer-h));
  background: #000;
  padding: var(--nav) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;  /* seitlichen Überstand der breiteren Frames wegschneiden */
}

.canvas-mb {
  display: block;
  width: auto;
  height: calc(100vh - var(--nav) - var(--footer-h));
  /* kein max-width: Breite darf den Viewport überragen, .mb-pin clippt seitlich */
}

/* Desktop: CTA mittig unter dem zentrierten MacBook, im unteren schwarzen Band */
.mb-copy {
  position: absolute;
  left: 50%;
  /* CTA auf dem weißen Leeraum des Screens (~59 % der Frame-Höhe). Animation ist
     höhenbasiert -> Canvas reicht exakt von --nav bis zur Pin-Unterkante. */
  top: calc(var(--nav) + 0.59 * (100vh - var(--nav) - var(--footer-h)));
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* Headline ist visuell Teil des Screen-Renderings im MacBook; hier nur als
   Section-Überschrift für Screenreader & Suchmaschinen erhalten. */
.mb-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mb-cta {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(13px, 1.2vw, 15px);
  text-decoration: none;
  color: #fff;
  background: var(--teal);
  padding: 15px 28px;
}

.mb-cta:hover {
  background: #0b7f99;
}

/* Scroll-Hinweis – sichtbar am Anfang der Sektion, blendet beim Weiterscrollen
   aus (per GSAP), lange bevor der CTA erscheint.
   Desktop: vertikales Seitenlabel wie im Hero (.vlabel). */
.mb-hint {
  position: absolute;
  right: 18px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  pointer-events: none;
}

.mb-hint-line {
  width: 30px;
  height: 1px;
  background: currentColor;
}

.mb-hint-chevron {
  display: none;
}

@keyframes mb-hint-bob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(5px); opacity: 1; }
}

@media (max-width:860px) {
  /* Scrollstrecke mobil kürzer als Desktop (240vh) */
  .mb-stage {
    height: 170vh;
  }

  /* full-bleed: Canvas füllt den ganzen Viewport, hinter die Navbar */
  .mb-pin {
    display: block;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  /* dvh = identische Einheit wie der Pin -> kein schwarzer Streifen darunter */
  .canvas-mb {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    object-position: center;
    max-width: none;
    max-height: none;
    margin: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mb-copy {
    position: absolute;
    left: 0;
    right: 0;
    top: 80%;  /* CTA unter dem Mac, auf dem Boden (~80 % der Frame-Höhe) */
    bottom: auto;
    transform: translateY(-50%);
    max-width: 100%;
    align-items: center;
    padding: 0 var(--gut);
    margin-top: 0;
    z-index: 2;
  }

  /* .mb-text bleibt display:none (Basis): Schriftzug ist jetzt auch mobil im Screen-Rendering */

  /* Scroll-Hinweis mobil: unten zentriert mit Chevron (statt Seitenlabel) */
  .mb-hint {
    right: auto;
    top: auto;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    transform-origin: center;
    flex-direction: column;
    gap: 7px;
    letter-spacing: .24em;
  }

  .mb-hint-line {
    display: none;
  }

  .mb-hint-label {
    padding-left: .24em;  /* optisch zentrieren trotz Letter-Spacing */
  }

  .mb-hint-chevron {
    display: block;
    width: 16px;
    height: 16px;
    animation: mb-hint-bob 1.8s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation: none !important;
  }

  .media .frame::after,
  .eyebrow,
  .lower,
  .vlabel,
  .cap,
  h1 .ln>span {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .media .frame::after {
    transform: scaleX(0) !important;
  }

  .vlabel {
    transform: translateY(-50%) rotate(90deg) !important;
  }
}

/* ---------- Footer (Desktop: schmale, fixierte Einzeile; erscheint mit der MacBook-Section) ---------- */
.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  height: var(--footer-h);
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  background: #000;
  color: #fff;
  transform: translateY(100%);
  transition: transform .4s ease;
}

.site-footer.show {
  transform: none;
}

.ft-inner {
  display: flex;
  align-items: center;
  order: 2;
  margin-left: auto;
}

.ft-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ft-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: color .25s;
}

.ft-social svg {
  width: 20px;
  height: 20px;
}

.ft-social a:hover {
  color: var(--teal);
}

.ft-base {
  order: 1;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .04em;
}

.ft-legal a {
  color: #fff;
  text-decoration: none;
  transition: color .2s;
}

.ft-legal a:hover {
  color: var(--teal);
}

.ft-legal .sep {
  color: rgba(255, 255, 255, .4);
  margin: 0 8px;
}

/* Mobile: gleiche schmale, fixierte Leiste wie Desktop – fährt mit der
   MacBook-Section hoch. Minimalistisch: nur Social + Rechtslinks, kein Copyright. */
@media (max-width:860px) {
  .site-footer {
    height: 46px;
    gap: 14px;
  }

  .ft-social {
    gap: 8px;
  }

  .ft-social svg {
    width: 22px;
    height: 22px;
  }

  .ft-base {
    gap: 16px;
    font-size: 12px;
  }
}

/* ---------- About-Seite (about.html): editoriales Long-Form-Layout ---------- */
/* body bleibt schwarz (Overscroll); der main-Wrapper deckt den Inhalt weiß ab */
.about-page {
  background: #000;
}

/* Footer hier als normaler Block am Seitenende (statt fixierter Slim-Bar).
   Gilt auch für die Galerie-Startseite (index.html, .gallery-page). */
.about-page .site-footer,
.gallery-page .site-footer {
  position: static;
  transform: none;
  height: auto;
  padding: clamp(30px, 5vh, 60px) var(--gut);
}

/* Masthead: Text links, Portrait rechts */
.about-hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--nav) + clamp(36px, 7vh, 84px)) var(--gut) clamp(30px, 5vh, 60px);
  display: grid;
  grid-template-columns: auto max-content;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}

.about-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: clamp(11px, 1vw, 13px);
  color: var(--teal);
}

.about-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.015em;
  font-size: clamp(46px, 7.5vw, 104px);
  margin: .14em 0 0;
  color: var(--ink);
  mix-blend-mode: normal;  /* Basis-h1 setzt difference (für den Hero) — hier zurücksetzen */
}

.about-lead {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
  color: #2c3338;
  max-width: 48ch;
  margin-top: clamp(18px, 2.5vh, 28px);
}

.about-jump {
  margin-top: clamp(20px, 3vh, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
}

.about-jump a {
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .6em;
}

.about-jump a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

.about-jump a:hover {
  color: var(--teal);
}

.about-portrait {
  max-width: 280px;
  justify-self: start;
}

.about-portrait img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Lesespalte */
.about-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gut) clamp(50px, 8vh, 100px);
}

.about-pillar {
  border-top: 1px solid var(--ink);
  padding-top: clamp(18px, 3vh, 30px);
  margin-top: clamp(48px, 8vh, 90px);
  scroll-margin-top: var(--nav);
}

.about-pillar:first-of-type {
  margin-top: clamp(20px, 4vh, 44px);
}

.about-kick {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--muted);
}

.about-kick .n {
  color: var(--teal);
  margin-right: .5em;
}

.about-body h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: none;
  line-height: 1.02;
  letter-spacing: -.01em;
  font-size: clamp(34px, 4.6vw, 60px);
  margin-top: .22em;
  color: var(--ink);
}

.about-body h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: none;
  line-height: 1.1;
  letter-spacing: -.005em;
  font-size: clamp(22px, 2.6vw, 30px);
  margin-top: clamp(40px, 6vh, 66px);
  color: var(--ink);
}

.about-body p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.72;
  color: #2c3338;
  margin-top: 1.05em;
}

.about-body p a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 149, 179, .35);
  transition: border-color .2s;
}

.about-body p a:hover {
  border-bottom-color: var(--teal);
}

.about-fig {
  margin: clamp(30px, 5vh, 52px) 0 0;
}

.about-fig img {
  width: 100%;
  height: auto;
  display: block;
}

.about-fig figcaption {
  margin-top: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--muted);
}

.about-fig figcaption a {
  color: var(--teal);
  text-decoration: none;
}

/* Abschluss-CTA */
.about-end {
  text-align: center;
  padding: clamp(44px, 8vh, 100px) var(--gut) clamp(50px, 9vh, 110px);
  border-top: 1px solid var(--line);
}

@media (max-width:860px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: clamp(12px, 2.5vh, 18px);
    padding-top: calc(var(--nav) + 22px);
  }

  .about-portrait {
    order: -1;
    max-width: 150px;
    justify-self: start;
  }
}

/* ---------- Subpages: Impressum / Datenschutz / Kontakt ---------- */
/* Sticky-Footer: bei wenig Inhalt füllt main den Rest, der Footer sitzt unten.
   Die fixe Navbar + Scrim liegen position:fixed -> nicht im Flex-Fluss. */
.subpage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.subpage main {
  flex: 1 0 auto;
}

/* Footer als normaler Block am Seitenende (wie about/galerie) */
.subpage .site-footer {
  position: static;
  transform: none;
  height: auto;
  flex: none;
  padding: clamp(30px, 5vh, 60px) var(--gut);
}

/* Titelkopf */
.page-head {
  max-width: 980px;
  margin: 0 auto;
  padding: calc(var(--nav) + clamp(40px, 8vh, 90px)) var(--gut) clamp(18px, 3vh, 34px);
}

.page-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  mix-blend-mode: normal;
  font-size: clamp(40px, 6vw, 86px);
  margin: .14em 0 0;
}

/* Lesespalte für Rechtstexte */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gut) clamp(56px, 9vh, 110px);
  font-family: 'Open Sans', sans-serif;
}

.legal h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  margin-top: clamp(36px, 5vh, 56px);
}

.legal h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--ink);
  margin-top: clamp(22px, 3vh, 30px);
}

.legal p {
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.72;
  color: #2c3338;
  margin-top: 1em;
}

.legal ul {
  list-style: disc;
  padding-left: 1.3em;
  margin-top: 1em;
}

/* Definitions-Listen (inline list-style:none) ohne Einzug/Punkte */
.legal ul[style*="none"] {
  padding-left: 0;
}

.legal li {
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: #2c3338;
  margin-top: .5em;
}

.legal li>h3 {
  margin-top: clamp(20px, 2.6vh, 28px);
}

.legal a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 149, 179, .35);
}

.legal a:hover {
  border-bottom-color: var(--teal);
}

.legal iframe {
  max-width: 100%;
  margin-top: 1.2em;
}

/* CTA-Button in .legal (danke/fehler): weiße Schrift behalten, kein Link-Unterstrich
   (sonst überschreibt die spezifischere .legal a-Regel die .cta-Farbe -> unsichtbar) */
.legal a.cta {
  color: #fff;
  border-bottom: 0;
}

/* Abstand über dem Zurück-CTA (danke/fehler) */
.legal .cta-back {
  margin-top: clamp(40px, 6vh, 56px);
}

/* Fehlerseite: Kontakt-Fallback klar gestapelt & gut antippbar (Farbe/Unterstrich erbt von .legal a) */
.error-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55em;
  margin-top: 1.2em;
}

.error-contact a {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 22px);
  white-space: nowrap;
}

/* Kontakt: NAP-Block + Formular */
.contact-meta {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.contact-meta .lbl {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  color: var(--teal);
  margin-bottom: 8px;
}

.contact-meta p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: #2c3338;
}

.contact-meta a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 149, 179, .4);
}

.contact-meta a:hover {
  color: var(--teal);
}

.cform {
  max-width: 820px;
  margin: clamp(36px, 6vh, 60px) auto 0;
  padding: 0 var(--gut) clamp(56px, 9vh, 110px);
}

.cform .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.cform .field {
  display: flex;
  flex-direction: column;
}

.cform .field.full {
  grid-column: 1 / -1;
}

.cform label {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.cform input,
.cform textarea {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .2s;
}

.cform input:focus,
.cform textarea:focus {
  outline: none;
  border-color: var(--teal);
}

.cform textarea {
  resize: vertical;
}

.cform .actions {
  margin-top: clamp(20px, 3vh, 28px);
}

.cform .cta {
  border: 0;
  cursor: pointer;
}

@media (max-width:860px) {
  .contact-meta {
    grid-template-columns: 1fr;
  }

  .cform .grid {
    grid-template-columns: 1fr;
  }
}

/* Honeypot-Feld (Spamschutz): offscreen, für Menschen unsichtbar */
.cform .hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Formular-Fehlermeldung */
.cform-error {
  max-width: 820px;
  margin: clamp(20px, 3vh, 28px) auto 0;
  padding: 0 var(--gut);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  color: #c0392b;
}

/* Objektart-Dropdown im Anfrageformular (gleiche Optik wie input/textarea) */
.cform select {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a767b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.cform select:focus {
  outline: none;
  border-color: var(--teal);
}

/* Deutlicher Tastatur-Fokus (WCAG 2.4.7) zusätzlich zur Randfarbe */
.cform input:focus-visible,
.cform textarea:focus-visible,
.cform select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Pflichtfeld-Markierung und Formular-/Datenschutz-Hinweis */
.field .req {
  color: #c0392b;
}

/* Skip-Link: springt zum Hauptinhalt, nur bei Tastatur-Fokus sichtbar */
.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 1000;
  padding: .6rem 1rem;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--teal);
  border-radius: .4rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Einheitliche, sichtbare Tastatur-Fokus-Baseline (WCAG 2.4.7) für alle interaktiven Elemente */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Programmatisch fokussierte Container (z. B. Skip-Link-Ziel <main>) ohne störenden Rahmen */
[tabindex="-1"]:focus {
  outline: none;
}

.form-note {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.form-note a {
  color: var(--teal);
  border-bottom: 1px solid rgba(10, 149, 179, .35);
}

/* ============================================================
   Matterport (matterport.html + Ad-Landingpages)
   Baut auf dem bestehenden Designsystem auf; verwendet
   .hero/.media/.stage, .philosophy, .principles, .services/.svc-row
   und .cform unverändert wieder. Neu sind nur die .mp-*-Bausteine.
   ============================================================ */

/* Lange Conversion-Seite: Footer als statischer Block am Seitenende
   (statt der fixierten Slim-Bar, die sonst die MacBook-Section einblendet) */
.mp-page {
  background: #000;
}

.mp-page .site-footer {
  position: static;
  transform: none;
  height: auto;
  padding: clamp(30px, 5vh, 60px) var(--gut);
}

/* Hero-Variante: echtes Rundgang-Standbild (3:2, formatfüllend) statt Portrait.
   Kein #fx-Canvas im Markup -> kein WebGL, nur das ruhige Bild + Intro-Wipe. */
.mp-media .plate {
  aspect-ratio: 3 / 2;
}

.mp-media img {
  object-fit: cover;
}

/* Matterport-Heroes: Headline solide statt Difference-Blend.
   Der Blend zwingt den Text auf eine komposite Ebene mit Graustufen-AA, was bei
   großer Typo stufige Kanten ("Treppchen") erzeugt. Solide Schrift rendert crisp.
   Headline sitzt links über weißem Hero-Grund, das Bild liegt rechts -> dunkel lesbar. */
.mp-page h1 {
  mix-blend-mode: normal;
  color: var(--ink);
}

/* Hero auf Desktop: Headline soll nicht ins Bild laufen.
   Bild + Headline etwas verkleinern und die Headline-Spalte links halten,
   damit auch lange Wörter (z. B. AUSSTELLUNGEN.) vor dem Bild enden. */
@media (min-width:861px) {
  .mp-page .media {
    width: 42vw;
  }

  .mp-page h1 {
    font-size: clamp(42px, 6.3vw, 150px);
  }

  /* Mehr Luft zwischen Eyebrow und Headline – wichtig für Umlaut-Oberlängen
     (Ä/Ö/Ü) der ersten Zeile, die sonst dicht am Eyebrow sitzen. */
  .mp-page .eyebrow {
    margin-bottom: .5em;
  }

  /* Oberlängen der Umlaute der ersten Headline-Zeile nicht abschneiden */
  .mp-page h1 .ln:first-child {
    padding-top: .14em;
  }
}

/* Ultrawide (ab >1920px, v. a. 4K): Headline (links) und Hero-Bild (rechts) nicht
   auseinanderdriften lassen – beide Seiten symmetrisch einrücken, damit der Weißraum
   in der Mitte schrumpft. Bis 1920px bleibt das Layout unverändert. */
@media (min-width:1921px) {
  .mp-page .stage {
    padding-left: clamp(84px, 6vw, 340px);
  }

  .mp-page .media {
    right: clamp(84px, 6vw, 340px);
  }
}

/* Subline und CTA stehen im Matterport-Hero immer untereinander (nie nebeneinander),
   linksbündig wie Eyebrow und Headline – auf allen Breiten. */
.mp-page .lower {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
}

/* Hero auf Mobile: keine Überlagerung von Headline und Bild.
   Bild steht oben, darunter Eyebrow + Headline + Sub + CTAs als ruhiger Block. */
@media (max-width:860px) {
  /* Stage nicht mehr ins Bild ziehen, sondern darunter setzen */
  .mp-page .stage {
    margin-top: clamp(20px, 4vh, 34px);
  }

  /* Weißen Headline-Klon (Overlay übers Bild) nicht mehr nötig */
  .mp-page .h-clip {
    display: none;
  }

  /* Eyebrow steht jetzt auf Weiß statt über dem Bild */
  .mp-page .eyebrow {
    color: var(--teal);
  }

  /* Headline an die Viewport-Breite anpassen, damit auch lange Wörter
     (AUSSTELLUNGEN., UNSCHEINBAREN) bis hinunter zu 320px nicht über den Rand laufen */
  .mp-page h1 {
    font-size: clamp(28px, 9vw, 58px);
  }
}

/* ---------- Sektions-Gerüst ---------- */
.mp-section {
  background: var(--paper);
  padding: clamp(56px, 10vh, 130px) var(--gut);
  scroll-margin-top: var(--nav);
}

.mp-section.alt {
  background: #fafafa;
}

.mp-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.mp-head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 6vh, 64px);
  text-align: center;
}

.mp-head.left {
  margin-left: 0;
  text-align: left;
}

.mp-kick {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--muted);
}

.mp-kick .n {
  color: var(--teal);
  margin-right: .5em;
}

.mp-h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: none;
  line-height: 1.04;
  letter-spacing: -.01em;
  font-size: clamp(32px, 4.4vw, 56px);
  color: var(--ink);
  margin-top: .16em;
}

.mp-lead {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.6;
  color: #2c3338;
  margin-top: 1.1em;
}

.mp-head:not(.left) .mp-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 60ch;
}

/* ---------- Nutzen: verdichtete Vorteils-Kacheln ---------- */
.mp-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.mp-benefit {
  background: var(--paper);
  padding: clamp(24px, 3.2vw, 44px);
}

.mp-benefit .num {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  color: var(--teal);
  font-size: 14px;
  letter-spacing: .1em;
}

.mp-benefit h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.12;
  color: var(--ink);
  margin-top: .5em;
}

.mp-benefit p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.62;
  color: #374046;
  margin-top: .7em;
}

@media (max-width:720px) {
  .mp-benefits {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pro3-Technik: Video + Text ---------- */
.mp-pro3 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.mp-pro3 .media-col {
  margin: 0;
}

.mp-pro3 video {
  width: 100%;
  height: auto;
  display: block;
  background: #0e1518;
}

.mp-pro3 p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.68;
  color: #374046;
  margin-top: 1.1em;
}

.mp-pro3 p strong {
  font-weight: 600;
  color: var(--ink);
}

.mp-pro3 a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 149, 179, .35);
}

@media (max-width:860px) {
  .mp-pro3 {
    grid-template-columns: 1fr;
    gap: clamp(22px, 5vw, 36px);
  }
}

/* ---------- Beispiele: Feature + Karten-Raster ---------- */
.mp-feature {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.mp-feature .ph,
.mp-card .ph {
  overflow: hidden;
  position: relative;
}

.mp-feature img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.mp-feature:hover img {
  transform: scale(1.03);
}

.mp-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px 0;
}

.mp-cap .t {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 24px);
  color: var(--ink);
}

.mp-cap .go {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--teal);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

.mp-feature:hover .mp-cap .go,
.mp-card:hover .mp-cap .go {
  color: #0b7f99;
}

.mp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}

.mp-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mp-card img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.mp-card:hover img {
  transform: scale(1.04);
}

.mp-card .mp-cap {
  padding-top: 12px;
}

.mp-card .mp-cap .t {
  font-size: clamp(16px, 1.4vw, 20px);
}

@media (max-width:620px) {
  .mp-cards {
    grid-template-columns: 1fr;
  }
}

/* "Auch für …"-Hinweis unter den Beispielen */
.mp-also {
  margin-top: clamp(28px, 4vh, 48px);
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--muted);
}

.mp-also strong {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Preise ---------- */
.mp-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.mp-price {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 32px);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.mp-price.feat {
  border-color: var(--ink);
}

.mp-price .size {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  color: var(--muted);
}

.mp-price .amount {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1;
  color: var(--ink);
  margin: .32em 0 .1em;
}

.mp-price ul {
  list-style: none;
  padding: 0;
  margin: clamp(14px, 2vh, 22px) 0 0;
}

.mp-price li {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #374046;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.mp-fine {
  max-width: 760px;
  margin: clamp(28px, 4vh, 44px) auto 0;
}

.mp-fine p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.62;
  color: var(--muted);
  margin-top: .7em;
}

@media (max-width:720px) {
  .mp-pricing {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ: natives <details>-Accordion (kein JS nötig) ---------- */
.mp-faq {
  max-width: 860px;
  margin: 0 auto;
}

.mp-faq details {
  border-bottom: 1px solid var(--line);
}

.mp-faq details:first-of-type {
  border-top: 1px solid var(--line);
}

.mp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(16px, 2vw, 22px) 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.3;
  color: var(--ink);
  transition: color .2s;
}

.mp-faq summary::-webkit-details-marker {
  display: none;
}

.mp-faq summary:hover {
  color: var(--teal);
}

.mp-faq summary .ic {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: .15em;
}

.mp-faq summary .ic::before,
.mp-faq summary .ic::after {
  content: "";
  position: absolute;
  background: var(--teal);
}

.mp-faq summary .ic::before {
  top: 10px;
  left: 2px;
  right: 2px;
  height: 2px;
}

.mp-faq summary .ic::after {
  left: 10px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  transition: transform .25s ease;
}

.mp-faq details[open] summary .ic::after {
  transform: scaleY(0);
}

.mp-faq .ans {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.72;
  color: #374046;
  max-width: 72ch;
  padding: 0 40px clamp(18px, 2.2vw, 26px) 0;
}

.mp-faq .ans strong {
  font-weight: 600;
  color: var(--ink);
}

.mp-faq .ans a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 149, 179, .35);
}

/* Aufzählungs-/Preislisten in FAQ-Antworten: Bezeichnung links, Wert (fett) rechts */
.mp-faq .ans ul {
  list-style: none;
  margin: 1em 0;
  padding: 0;
  max-width: 360px;
}

.mp-faq .ans li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.mp-faq .ans li:last-child {
  border-bottom: 0;
}

/* ---------- Anfrage-Sektion ---------- */
.mp-anfrage {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 9vh, 110px);
  scroll-margin-top: var(--nav);
}

.mp-anfrage .cform {
  margin-top: clamp(28px, 4vh, 48px);
}

/* sekundärer Hinweis (Telefon / Newsletter) unter dem Formular */
.mp-secondary {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(8px, 2vh, 18px) var(--gut) 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--muted);
}

.mp-secondary a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 149, 179, .4);
}

.mp-secondary a:hover {
  color: var(--teal);
}

/* Beispiel-Feature in kompakter Breite — kleine 600px-Branchenbilder nicht hochskalieren */
.mp-feature.compact {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.mp-feature.compact img {
  aspect-ratio: 3 / 2;
}

/* Playbutton als CSS-Overlay (Opt-in via .play). So kann der Beispiel-Thumbnail
   dieselbe Hero-Bilddatei wiederverwenden (aus dem Cache) statt eine zweite,
   fast identische Datei mit eingebranntem Button zu laden. */
.mp-feature.compact.play .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(64px, 20%, 152px);
  aspect-ratio: 1 / 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .95;
  pointer-events: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

.mp-feature.compact.play:hover .ph::after {
  transform: scale(1.07);
  opacity: 1;
}

/* Branchen-Verzeichnis (Hub): kompaktes Link-Raster zu allen Branchen-LPs */
.mp-dir {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* Linien zeichnen die Zellen selbst (border-right/-bottom); Container nur
     oben + links rahmen. So bleibt eine unvollständige letzte Reihe einfach
     leer (Seitenhintergrund) statt grau hinterlegt. */
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.mp-dir a {
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(16px, 1.6vw, 20px) clamp(18px, 1.8vw, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 18px);
  transition: background .2s, color .2s;
}

.mp-dir a:hover {
  background: #fafafa;
  color: var(--teal);
}

.mp-dir a .ar {
  color: var(--teal);
  flex: none;
}

@media (max-width:760px) {
  .mp-dir {
    grid-template-columns: 1fr;
  }
}

/* Variante A: Eyebrow IST die Breadcrumb. Trail (teal-Link › ink-Seite) plus
   ein klar abgesetzter, gedämpfter Standort nach dem Mittelpunkt. */

/* Font-Size + Letter-Spacing der Breadcrumb identisch zum Kicker (.hero-kick)
   halten. Font-Size erbt bereits clamp(11px,1vw,13px) aus .eyebrow; hier nur das
   Letter-Spacing vom .eyebrow-Default (.34em) auf den Kicker-Wert (.2em, = .mp-kick)
   angleichen — so teilen sich Breadcrumb, Hero-Kicker und Sektions-Kicker ein Token. */
.eyebrow-crumb {
  letter-spacing: .2em;
}

.eyebrow-crumb a {
  color: var(--teal);
  text-decoration: none;
  transition: color .2s;
}

.eyebrow-crumb a:hover {
  color: var(--ink);
}

/* Trenner und Standort gedämpft, der Trail selbst bleibt durchgehend teal
   (aktuelle Seite erbt die Eyebrow-Farbe) — nur zwei Töne, ruhiges Bild. */
.eyebrow-crumb .crumb-sep {
  color: var(--muted);
  margin: 0 .5em;
}

/* Standort gedämpft, etwas Luft zum Trail (".pin" ist bereits muted) */
.eyebrow-crumb .pin {
  margin-left: .3em;
}

/* Mobile: langer Trail darf umbrechen statt überzulaufen
   (Standort bleibt wie gehabt über ".pin{display:none}" ausgeblendet) */
@media (max-width:860px) {
  .eyebrow-crumb {
    white-space: normal;
  }
}

/* Hero-Format-Label zwischen H1 und Subline (Test: automotive.html) — benennt
   das Format explizit above the fold. Es sitzt an der alten Subline-Position
   (3.1rem unter der H1); die Subline rückt eng darunter, sodass Kicker + Subline
   als Einheit lesen. Ink-Farbe + →-Marker heben es dezent hervor. */
.hero-kick {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: clamp(11px, 1vw, 13px);
  color: var(--ink);
  margin: 3.1rem 0 0;
  opacity: 0;
  transition: opacity .9s ease .5s;
}

/* greift nur, wenn ein Kicker vorangeht — andere Hero-Seiten bleiben bei 3.1rem */
.hero-kick + .lower {
  margin-top: 1.1rem;
}

.reveal .hero-kick {
  opacity: 1;
}

.hero-kick .n {
  color: var(--teal);
  margin-right: .6em;
}

/* Mobile-Feinschliff Hero-LP:
   - H1 pro Seite über --h1vw skalierbar (Default 13.4vw = unverändert). So kann
     jede Seite bis an ihre längste Zeile ausgereizt werden, ohne andere zu brechen.
   - Kicker schmaler gesetzt, damit "· Matterport Pro3" bei 360px nicht überläuft.
   - Gleichmäßige SICHTBARE vertikale Abstände Breadcrumb -> H1 -> Kicker -> Subline
     über --hero-gap. Die Elemente haben unterschiedliche Zeilenbox-Leadings; die
     px-/em-Offsets rechnen diese heraus, sodass die Glyphen-Abstände gleich groß sind:
       H1     : -.19em  (grosses Leading über den Versalien; skaliert mit der Schrift)
       Kicker : +4px   (H1-Grundlinie sitzt etwas über ihrer Boxkante)
       Subline: -9px   (Kicker-Unterlänge + Subline-Leading addieren ~9px). */
@media (max-width:860px) {
  .mp-page {
    --hero-gap: 13px;
  }

  .mp-page h1 {
    font-size: clamp(46px, var(--h1vw, 13.4vw), 84px);
  }

  /* Abstands-Kompensation + Breadcrumb-Angleichung nur auf Seiten MIT Kicker */
  .mp-page:has(.hero-kick) h1 {
    margin-top: calc(var(--hero-gap) - .19em);
  }

  /* Breadcrumb mobil auf Kicker-Werte anheben: 11px / .07em (statt 10px / .1em,
     bzw. 9px bei <=359px). Überschreibt per höherer Spezifität beide .eyebrow-Regeln. */
  .mp-page:has(.hero-kick) .eyebrow-crumb {
    margin-bottom: 0;
    font-size: 11px;
    letter-spacing: .07em;
  }

  .mp-page .hero-kick {
    margin-top: calc(var(--hero-gap) + 4px);
    letter-spacing: .07em;
    font-size: 11px;
  }

  .mp-page .hero-kick + .lower {
    margin-top: calc(var(--hero-gap) - 9px);
  }
}

/* Related-Branchen-Modul (unten in den LPs) — etwas ruhiger als eine volle Sektion */
.mp-related {
  border-top: 1px solid var(--line);
}

/* Kontextuelle Fließtext-Links in den Matterport-Texten (teal, dezenter Unterstrich) */
.mp-benefit p a,
.mp-lead a,
.mp-also a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 149, 179, .35);
  transition: border-color .2s;
}

.mp-benefit p a:hover,
.mp-lead a:hover,
.mp-also a:hover {
  border-bottom-color: var(--teal);
}