/*
 * Bauträger-Vorlage: Section-spezifisches CSS.
 * Hier kommen pro Sektion die CSS-Regeln rein, die in der originalen site.css an
 * Webflow-Node-IDs hingen (z.B. #w-node-fbc6e23b-...). Durch die Umwandlung zu
 * Klassen können Sektionen mehrfach pro Seite vorkommen.
 * Quellen-Zeilen aus site.css pro Block dokumentiert.
 */

/* =========================================================
 * header37_intro — "sektion-2 / header37_component" aus Master-index.html
 * Original in site.css:
 *   Desktop (23105–23122): grid-auto-flow column, 7 Zeilen, 2 Spalten
 *   <=991px (23204–23221): einspaltig gestackt
 * ========================================================= */

.header37__item-image-1 {
  grid-area: span 4 / span 1 / span 4 / span 1;
  place-self: stretch end;
}

.header37__item-content-1 {
  grid-area: span 3 / span 1 / span 3 / span 1;
  justify-self: end;
}

.header37__item-content-2 {
  grid-area: span 3 / span 1 / span 3 / span 1;
  justify-self: start;
}

.header37__item-image-2 {
  grid-area: span 4 / span 1 / span 4 / span 1;
}

@media screen and (max-width: 991px) {
  .header37__item-image-1 {
    grid-row: span 1 / span 1;
  }

  .header37__item-content-1 {
    grid-row: span 1 / span 1;
    place-self: auto start;
  }

  .header37__item-content-2 {
    grid-area: 1 / 1 / 2 / 2;
    justify-self: start;
  }

  .header37__item-image-2 {
    grid-row: span 1 / span 1;
  }
}

/* =========================================================
 * portfolio6_block — Hover-Effekte (CSS-Nachbau der Webflow-IX2-Animationen)
 * Webflow steuert Hover-Interactions über ein separates JS-Runtime. Wir
 * bilden die Kern-Effekte per CSS-Transitions nach — leicht, ohne Laufzeit.
 * ========================================================= */

/* Image-Wrapper begrenzen, damit scale() nicht überläuft. */
.portfolio6_image-wrapper {
  overflow: hidden;
}

.portfolio6_image1 {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.portfolio6_item-link:hover .portfolio6_image1 {
  transform: scale(1.05);
}

/* Plus-Icon: master setzt wrapper-plus auf width:100% height:100%, aber in
   .icon-embed-small (flex column, align-items:center) stretcht es nicht in die
   Höhe. Explizit 2rem setzen damit das + die volle Box füllt. */
.project_wrapper_right_col .icon-embed-small {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
}
.project_wrapper_right_col .wrapper-plus {
  width: 2rem;
  height: 2rem;
  transition: transform 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Plus-Rotation beim Auto-Loop: -180° (rollt beim Ausfahren). Collapse
   reversed die Rotation automatisch — symmetrische Transition. */
.project_wrapper_right_col.animated.is-expanded .wrapper-plus {
  transform: rotate(-180deg);
}

/* Plus-Inner: eigener Transform-Layer für Hover — entkoppelt vom Auto-Loop.
   Erbt Größe/Zentrierung vom Parent-wrapper-plus via absolute inset:0, so
   dass die plus-strich-Kinder im Zentrum bleiben. */
.project_wrapper_right_col .plus-inner {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 400ms ease-out;
}
.portfolio6_item-link:hover .project_wrapper_right_col .plus-inner {
  transform: rotate(90deg);
}

/* Auto-Loop-Animation: .project_wrapper_right_col.animated pendelt im 7s-Takt
   zwischen 2rem (nur Plus) und 11rem (+ "Klicken für mehr Infos"-SVG). Der
   State wird vom React-Component via .is-expanded-Klasse gesetzt (gesteuert
   durch IntersectionObserver + setInterval). */
.project_wrapper_right_col.animated {
  width: 2rem;
  transition: width 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.project_wrapper_right_col.animated.is-expanded {
  width: 11rem;
}

/* "Klicken für mehr Infos"-SVG: beim Expand fade-in mit Verzögerung (Text kommt
   nach dem Breiten-Schub). Beim Collapse fade-out zuerst. Fade-Dauer 1s —
   beim Expand startet er spät damit die 2s-Breiten-Animation Vorrang hat. */
.text-klicken-mehr-infos-2.deutsch,
.text-klicken-mehr-infos-2.english {
  opacity: 0;
  transition: opacity 1500ms ease-out;
}
.project_wrapper_right_col.animated.is-expanded .text-klicken-mehr-infos-2.deutsch,
.project_wrapper_right_col.animated.is-expanded .text-klicken-mehr-infos-2.english {
  opacity: 1;
  transition: opacity 1500ms ease-out 500ms;
}

/* div-block-19 hält das SVG — verhindert Umbruch während der Expand-Animation. */
.project_wrapper_right_col .div-block-19 {
  white-space: nowrap;
}

/* =========================================================
 * footer1_component — Defensive Color-Scope + Bugfixes
 *
 * Defensive: alle Kinder erben die Footer-Text-Farbe. Spezifische
 * Klassen wie .text-color-accent-element haben eigene color und greifen
 * dank hoeherer Spezifitaet trotzdem. Fix-Grund: Browser-UA setzt <a>
 * auf eine eigene color, und Elemente wie .footer1_credit-text haben
 * in der Webflow-CSS keine color-Rule — ohne diesen Override fallen
 * sie auf den (unpassenden) body-Default zurueck.
 *
 * Border-Fix: Projekt nutzt Tailwind, dessen `.border` utility macht
 * border-width: 1px auf allen 4 Seiten. Webflow-HTML verwendet aber
 * dieselbe Klasse fuer "border-top only" (Trennlinie ueber der Bottom-
 * Bar). Kollision ausgelegt: wir nullen alle Seiten und setzen nur oben.
 * ========================================================= */

.footer1_component,
.footer1_component * {
  color: inherit;
}

.footer1_component {
  color: var(--color-variables--footer-text);
}

.footer1_component .padding-top.padding-medium.border {
  border: 0;
  border-top: 1px solid var(--color-variables--footer-text);
  border-radius: 2px;
}

/* Navbar: gleicher Scope-Trick. */
.navbar9_component,
.navbar9_component * {
  color: inherit;
}

.navbar9_component {
  color: var(--color-variables--navbar-text);
}

/* =========================================================
 * navbar9 — Mobile-Menu-Toggle (Client-Component-gesteuert, keine Webflow-JS)
 *
 * Desktop (>=992px): Menu immer sichtbar, Burger versteckt.
 * Mobile (<992px): Menu unter der Navbar als Overlay, standardmaessig versteckt,
 * wird via .is-open (von React-State gesetzt) eingeblendet.
 * ========================================================= */

/* Burger-Button: auf Desktop weg, auf Mobile als 40x40 Flex-Container. */
.navbar9_component .navbar9_menu-button {
  display: none;
}

@media (max-width: 991px) {
  .navbar9_component .navbar9_menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Menu standardmaessig ausblenden, bei is-open als Overlay zeigen. */
  .navbar9_component .navbar9_menu {
    display: none;
  }

  .navbar9_component .navbar9_menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: var(--color-variables--navbar-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 1001;
  }

  /* Menu-Left-Liste als vertikaler Stack im Overlay. */
  .navbar9_component .navbar9_menu.is-open .navbar9_menu-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
  }

  .navbar9_component .navbar9_menu.is-open .flexbox-navbar-link {
    padding: 0.5rem 0;
  }

  /* Chevrons nur auf Mobile anzeigen (Desktop-CSS versteckt sie normal). */
  .navbar9_component .navbar9_menu.is-open .chevron-nav-menu-mobile {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
  }
}

/* Burger-Icon: 3 Striche → X (bei is-open).
 * Eigene Klassen statt Webflow-Marken (menu-icon1_line-*) damit Master-CSS
 * die Linien nicht mit width:4px;height:0 zurücksetzt. */
.burger-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 18px;
  color: currentColor;
}
.burger-icon_bar {
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition:
    transform 300ms ease,
    opacity 200ms ease,
    top 300ms ease;
}
.burger-icon_bar--top    { top: 0; }
.burger-icon_bar--middle { top: 8px; }
.burger-icon_bar--bottom { top: 16px; }

.navbar9_menu-button.is-open .burger-icon_bar--top {
  top: 8px;
  transform: rotate(45deg);
}
.navbar9_menu-button.is-open .burger-icon_bar--middle {
  opacity: 0;
}
.navbar9_menu-button.is-open .burger-icon_bar--bottom {
  top: 8px;
  transform: rotate(-45deg);
}

/* =========================================================
 * hero_slider_5 — Button-Reset fuer Slider-Controls
 *
 * Webflow-CSS positioniert .w-slider-arrow-left/right (volle Hoehe, Seitenrand),
 * .slide-nav (unten rechts: inset: auto 0% 7rem) und .w-slider-dot (Farben,
 * Transition) bereits korrekt — aber nur wenn keine Browser-UA-<button>-Defaults
 * dazwischenpfuschen. Wir resetten die defensiven button-Styles im Scope.
 * ========================================================= */

.sektion-hero button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/* Slider-Arrows: SVG im inneren Container zentriert mittels flex. */
.sektion-hero .w-slider-arrow-left,
.sektion-hero .w-slider-arrow-right {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.sektion-hero .w-slider-arrow-left svg,
.sektion-hero .w-slider-arrow-right svg {
  width: 1rem;
  height: 2rem;
}

/* Arrows enger zusammen:
   1. left-arrow von right:7rem → right:6rem (Buttons stoßen bündig aneinander).
   2. padding im Arrow erhöhen (3rem → 4rem), damit die SVGs je 1rem weiter zur
      inneren (mittigen) Button-Seite rutschen. Hover-padding entsprechend
      angepasst (2rem → 3rem), damit der Webflow-Hover-Shift erhalten bleibt. */
/* Nur auf Tablet/Desktop (>=768px): Arrows enger zusammen. Auf Mobile (<768px)
   greift Vlow's Original-Layout (left-arrow bei left:0, right-arrow bei right:0,
   beide bottom:2rem). Ohne diese Kapselung wird auf Mobile der left-arrow in
   den Off-Screen-Bereich geschoben. */
@media (min-width: 768px) {
  .sektion-hero .left-arrow {
    inset: auto 6rem 10rem auto;
    padding-left: 2.5rem;
  }
  .sektion-hero .left-arrow:hover {
    padding-left: 1.5rem;
  }
  .sektion-hero .right-arrow {
    padding-right: 2.5rem;
  }
  .sektion-hero .right-arrow:hover {
    padding-right: 1.5rem;
  }
}

/* Dots: Webflow-Defaults werden von unserem Button-Reset geschluckt (margin:0,
   border:0). Wir setzen Shape, Abstand und Hintergrund hier explizit — die
   hoehere Selektor-Spezifitaet gewinnt ueber den generischen button-Reset. */
.sektion-hero .w-slider-dot {
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: background-color 200ms;
}

.sektion-hero .w-slider-dot.w-active {
  background-color: #fff;
}

/* =========================================================
 * ImmobilienFinder5 — Form-Wrapper + Step-Transitions
 * Das Form-Wrapper-Styling stammt aus dem Vlow-Custom-Embed (User-Input).
 * Steps sind Single-Child der Form; wir blenden einfach per Rendering
 * (nicht via .step.visible-Klasse wie im Webflow-Script).
 * ========================================================= */

.wrapper-filter-neu .form-wrapper {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Step als flex-column: Ueberschrift + Nachricht + Options + Weiter-Button
   untereinander, alle horizontal zentriert. Der Weiter-Button liegt NEBEN
   dem .options-Container — er soll NICHT die gleiche Breite wie die
   Checkboxes haben. */
.wrapper-filter-neu .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* Options-Container: alle Checkboxes gleich breit via flex-stretch. */
.wrapper-filter-neu .options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

/* Checkbox braucht position:relative fuer das absolut-positionierte Check-Icon. */
.wrapper-filter-neu .checkbox-button {
  position: relative;
}

/* Kicker-Label über dem Step-Heading: "✨ Interaktiver Wohnungsfinder".
   Weißer Tag-Style auf dem beigen Finder-BG. */
.wrapper-filter-neu .finder-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--color-variables--wohnungsfinder-text, #fff);
  opacity: 0.9;
  margin-bottom: 0.25rem;
}
.wrapper-filter-neu .finder-kicker svg {
  flex: 0 0 auto;
}

/* =========================================================
 * ProjektHero — <header class="section_header projekt-seite">
 *
 * Regeln 1:1 aus Vlow-site.css (vlow.shared.b569b734f.css) uebernommen,
 * nur die fuer das ProjektHero relevanten Selektoren. Gradient-Overlay
 * + Hero-Slideshow-Container + Content-Layout.
 * ========================================================= */

.section_header.projekt-seite {
  color: var(--_primitives---colors--white, #fff);
  position: relative;
  overflow: hidden;
}

/* Schwarzer Fallback-Layer ganz hinten (wirkt wenn kein Bild geladen). */
.section_header.projekt-seite .bg-black {
  z-index: 0;
  background-color: var(--basis--primary-color_farbe-1, #000);
  background-image: linear-gradient(#0003, #0003);
  position: absolute;
  inset: 0%;
}

/* Gradient-Ausblendung: Container mit dem Hero-Bild drin, das per mask-image
   von links transparent nach rechts voll sichtbar geblendet wird. Dadurch
   scheint links die beige .bg-black-Unterlage durch → weicher Farbverlauf
   von Primary-Color (links) zum Bild (rechts).
   mask-Regel stammt aus inline <style> der Vlow-Projekt-Detailseite — die
   externe site.css hat nur die Basis-Regel ohne Maske. */
.section_header.projekt-seite .gradient-ausblendung-neu {
  z-index: 2;
  background-image: linear-gradient(#00000080, #00000080);
  width: 80%;
  position: absolute;
  inset: 0% 0% 0% auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%);
  mask-image: linear-gradient(to right, transparent 0%, black 50%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: block;
}

.section_header.projekt-seite .hero-slideshow-container-neu {
  position: absolute;
  inset: 0%;
}

/* Hero-Slideshow: alle Bilder nebeneinander, aktive mit Ken-Burns-Zoom.
   Regeln 1:1 aus <style>-Inline-Block der Vlow-Projekt-Detailseite. */
.section_header.projekt-seite .hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
  transition: opacity 1s ease;
}

.section_header.projekt-seite .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section_header.projekt-seite .hero-slide.active {
  opacity: 1;
  z-index: 1;
  animation: heroZoomLeft 15s ease forwards;
  transform: scale(1.1) translateX(5%);
}

@keyframes heroZoomLeft {
  from {
    transform: scale(1) translateX(0);
  }
  to {
    transform: scale(1.1) translateX(5%);
  }
}

/* =========================================================
 * Projekt-Detail „helle" Sektionen (ProjektStats8, ProjektBeschreibung).
 *
 * Unsere WebflowTokens definieren color-scheme-2 als weißer BG + Primary-Text
 * (für Vlow ist Primary beige). Das sieht in anderen Kontexten (Portfolio etc.)
 * gut aus, ist aber für Kennzahlen/Fliesstext zu hell — User möchte dort
 * schwarzen Text. Wir scopen den Override gezielt auf .sektion-projekt-hell,
 * damit andere color-scheme-2-Sektionen (Portfolio6Block, Wohneinheiten)
 * ihren gewünschten Look behalten.
 * ========================================================= */
.sektion-projekt-hell,
.sektion-projekt-hell h1,
.sektion-projekt-hell h2,
.sektion-projekt-hell h3,
.sektion-projekt-hell h4,
.sektion-projekt-hell h5,
.sektion-projekt-hell h6,
.sektion-projekt-hell p,
.sektion-projekt-hell li,
.sektion-projekt-hell .stats8_number,
.sektion-projekt-hell .heading-style-h6-3 {
  color: #000;
}

/* Ausnahme: Der Wohnungsfinder sitzt in der hellen Sektion, hat aber seinen
   eigenen beigen BG mit weißem Text. Hell-Override hier wieder auf Finder-Farbe
   zurückstellen. */
.sektion-projekt-hell .wrapper-filter-neu .heading-color-wohnungsfinder,
.sektion-projekt-hell .wrapper-filter-neu h3.heading-color-wohnungsfinder,
.sektion-projekt-hell .wrapper-filter-neu .finder-kicker {
  color: var(--color-variables--wohnungsfinder-text, #fff);
}

/* Ausnahme: Card-Titel-Overlay (.portfolio_title_wrapper) liegt auf dem
   dunklen Gradient über dem Card-Bild → Inhalt bleibt weiß, auch wenn die
   Section insgesamt sektion-projekt-hell (schwarzer Text) ist. */
.sektion-projekt-hell .portfolio_title_wrapper,
.sektion-projekt-hell .portfolio_title_wrapper h3,
.sektion-projekt-hell .portfolio_title_wrapper .text-color-white,
.sektion-projekt-hell .text-verkauft-vermietet {
  color: #fff;
}

/* stats8_list: Spaltenzahl per CSS-Variable damit Mobile-Media-Query sie
   überschreiben kann (Inline-Style würde jede Media-Query schlagen). */
.sektion-projekt-hell .stats8_list {
  grid-template-columns: repeat(var(--stats8-cols, 3), 1fr);
}
@media (max-width: 767px) {
  .sektion-projekt-hell .stats8_list {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
}

/* Vertikale Trennlinie links von jeder Kennzahl (stats8_item-2).
   Vlow-CSS hat diese Regel, wir laden site.css aber nur teilweise — daher
   hier explizit. Farbe kommt aus Tenant-Primary (beige bei Vlow). */
.sektion-projekt-hell .stats8_item-2 {
  border-left: 1px solid var(--basis--primary-color_farbe-1, #b5a38f);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-left: 2rem;
}

/* Listen-Bullets in Vlow sind Diamant-Outlines in Primary-Color, bei Webflow
   per JS-Injection pro <li>. Wir ersetzen das mit CSS-only: default-Bullet weg,
   ::before-Pseudo-Element mit SVG als mask-image. So nimmt der Bullet
   automatisch die Tenant-Primary-Farbe an (aktuell beige bei Vlow), und es
   laeuft kein Client-JS. */
.sektion-projekt-hell ul,
.sektion-projekt-hell .w-richtext ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.sektion-projekt-hell ul li,
.sektion-projekt-hell .w-richtext ul li {
  position: relative;
  padding-left: 1.4em;
}
.sektion-projekt-hell ul li::before,
.sektion-projekt-hell .w-richtext ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.85em;
  height: 0.85em;
  background-color: var(--basis--primary-color_farbe-1, #b5a38f);
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7.28354%201.41421L1.41406%207.28369L7.28354%2013.1532L13.153%207.28369L7.28354%201.41421Z%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7.28354%201.41421L1.41406%207.28369L7.28354%2013.1532L13.153%207.28369L7.28354%201.41421Z%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* stats56_component — 2-Spalten-Grid: Text links, Kachel-Grid rechts.
   1:1 aus Vlow's site.css. */
.sektion-projekt-hell .stats56_content {
  column-gap: 5rem;
  row-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}

/* Fakten-Kachelgrid (rechts): eine Kachel pro Zeile. */
.sektion-projekt-hell .stats_projekt_item-list {
  column-gap: 1rem;
  row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: grid;
}

/* Einzelne Fakten-Kachel: Bild als BG, Primary-Gradient + dezente Abdunklung
   darueber, weisser Text. border: 0 killt den Border aus Master-site.css. */
.sektion-projekt-hell .stats32_item-3 {
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 8rem;
  padding: 1.5rem 2rem;
  display: flex;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  /* Diagonaler Dunkel-Gradient wird ueber .projekt_kachel_bg_overlay
     erzeugt — hier nicht noetig. */
  background-image: none;
}

.sektion-projekt-hell .stats32_item-3.projekt {
  /* Element-BG = Primary (Fallback wenn kein Bild geladen ist),
     Text weiss. */
  background-color: var(--color-variables--color-scheme-1-bg, #b5a38f);
  color: var(--basis--secondary-color_farbe-2, #ffffff);
}

/* Text auf den Kacheln ist explizit weiss (Kacheln sind beige, nicht weiss
   wie der Rest der Sektion) — ueberschreibt den .sektion-projekt-hell
   schwarz-Default. */
.sektion-projekt-hell .stats32_item-3.projekt,
.sektion-projekt-hell .stats32_item-3.projekt p,
.sektion-projekt-hell .stats32_item-3.projekt .heading-style-h4-13 {
  color: var(--basis--secondary-color_farbe-2, #ffffff);
}

.sektion-projekt-hell .heading-style-h4-13 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Content-Layer obendrueber, BG-Bild darunter, Overlay dazwischen. */
.sektion-projekt-hell .stats32_item-content {
  z-index: 2;
  position: relative;
}

/* Overlay 1:1 wie in Vlow-site.css:
   - background-color: 15% schwarz → dezente Gesamt-Abdunklung auch rechts
   - background-image: linear-gradient Primary 26% → transparent (fade links→rechts)
   - opacity: 0.9 → alles zusammen etwas transparenter, damit das Bild
     dezent durchscheint. */
.sektion-projekt-hell .projekt_kachel_bg_overlay {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(
    90deg,
    var(--basis--primary-color_farbe-1, #b5a38f) 26%,
    transparent
  );
  opacity: 0.9;
  position: absolute;
  inset: 0;
}

.sektion-projekt-hell .projekt_kachel_bg_image {
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* z-index-2 Helper (Vlow nutzt inline): Text/Content ueber Overlay. */
.sektion-projekt-hell .z-index-2 {
  position: relative;
  z-index: 2;
}

/* Heading-style fuer h3 in der Beschreibung (Highlights-Ueberschrift).
   Browser-Default-Margin killen, damit der Abstand nur ueber die
   .margin-top-Utility-Klasse am Wrapper kommt (nicht additiv). */
.sektion-projekt-hell .heading-style-h5-6 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0;
}

/* Mobile: Text + Kacheln untereinander. (Kachel-Grid ist ohnehin 1-spaltig.) */
@media screen and (max-width: 991px) {
  .sektion-projekt-hell .stats56_content {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}

/* =========================================================
 * Gallery20 — Drag-Slider + Vollbild-Lightbox
 * Vorlage: Vlow tresdorf.html (gallery20_component, w-slider, w-lightbox)
 * ========================================================= */

.section_gallery20 {
  /* site.css setzt .section_gallery20 auf Color-Scheme-1 (beige). Innerhalb
     von .sektion-projekt-hell wollen wir den hellen Scheme-2-BG behalten. */
  background-color: transparent;
}

.gallery20_component {
  position: relative;
  overflow: hidden;
}

/* Slider-Viewport matched Vlow aspect-ratio 3/2. Mobile etwas flacher. */
.gallery20_component > .slider {
  aspect-ratio: 3 / 2;
  width: 100%;
  overflow: hidden;
  border-radius: 0.25rem;
}
.gallery20_component > .slider > .mask {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.gallery20_component .gallery20_track {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Slide = Button-Wrapper (Click-Target für Lightbox). Button-Reset, keine
   Border/Background, Cursor = zoom-in. Ohne diesen Override bekämen wir den
   Browser-Button-Default (Grau + Border). */
.gallery20_component .slide.lightbox-link-neu {
  flex: 0 0 100%;
  min-width: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  /* Override site.css: .lightbox-link-neu hat aspect-ratio 3/2 + width 100%.
     Im Slider brauchen wir 100% Breite aber die Höhe kommt vom Track. */
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  display: block;
  color: inherit;
  font: inherit;
}
.gallery20_component .slide.lightbox-link-neu:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* Override site.css (pointer-events:none): ohne das käme der Click nie am
   Button-Wrapper an, weil das <img> den Pointer schluckt. Wir wollen den
   Click am Button — also pointer-events auf dem Button auto lassen, Bild
   kann ruhig "none" sein. Aber `aspect-ratio: 16/9` aus site.css muss raus,
   sonst wird das Bild zu niedrig. */
.gallery20_component .gallery20_image_outsideofslider {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: auto;
  /* pointer-events bleibt none aus site.css — Click landet am Button-Slide,
     der darüber liegt (richtige semantische Richtung). */
}

/* ---------- Pfeile (Vlow: 64x64, stroke-width 1) ---------- */

.gallery20_component .arrow-slider {
  position: absolute;
  top: 50%;
  bottom: auto;
  /* site.css .w-slider-arrow-left/right setzt inset:0 + margin:auto, was
     mit top:50% den Button auf ca. 75% runterdrückt. margin:0 explizit. */
  margin: 0;
  transform: translateY(-50%);
  z-index: 5;
  width: 4rem;
  height: 4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms;
}
.gallery20_component .arrow-slider:hover {
  background: rgba(0, 0, 0, 0.55);
}
.gallery20_component .w-slider-arrow-left {
  left: 1.5rem;
  right: auto;
}
.gallery20_component .w-slider-arrow-right {
  right: 1.5rem;
  left: auto;
}
.gallery20_component .arrow-slider svg {
  width: 2.25rem;
  height: 2.25rem;
}

/* ---------- Dots unten (Vlow .gallery20_slide-nav.weiss) ---------- */

.gallery20_component .gallery20_slide-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 24px 1rem;
  /* Gradient wie Vlow: transparent nach leicht dunkel — macht Dots sichtbar. */
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25));
  pointer-events: none;
}
.gallery20_component .gallery20_slide-nav .w-slider-dot {
  pointer-events: auto;
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    transform 200ms ease;
}
.gallery20_component .gallery20_slide-nav .w-slider-dot:hover {
  background-color: rgba(255, 255, 255, 0.75);
}
.gallery20_component .gallery20_slide-nav .w-slider-dot.w-active {
  background-color: #fff;
  transform: scale(1.2);
}

/* ---------- "Klicken für Vollbild"-Hint (Pill, unten rechts) ---------- */

.gallery20_component .wrapper-anklicken-vollbild-galerie {
  position: absolute;
  inset: auto 1rem 1rem auto; /* überschreibt site.css absolute inset:-4rem 0 */
  padding-left: 0; /* site.css setzt 33% */
  z-index: 6;
  color: #fff;
  pointer-events: none;
  display: flex;
  width: auto;
}
.gallery20_component .image-klicken-fuer-vollbild-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;
  backdrop-filter: blur(4px);
  color: #fff;
  line-height: 1;
}
.gallery20_component .image-klicken-fuer-vollbild-hint svg {
  flex: 0 0 auto;
}

/* ---------- Lightbox (Webflow w-lightbox Style) ---------- */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: grid;
  /* Topbar ist absolut positioniert (über dem Stage), damit das Bild den
   * vollen vertikalen Raum nutzen kann und top/bottom-Abstand symmetrisch
   * wirkt. */
  grid-template-rows: 1fr auto;
  animation: lightbox-fade-in 200ms ease;
  overflow: hidden;
  cursor: zoom-out;
}
.lightbox-overlay .lightbox-image,
.lightbox-overlay .lightbox-topbar,
.lightbox-overlay .lightbox-thumbs,
.lightbox-overlay .lightbox-arrow {
  cursor: default;
}
.lightbox-overlay .lightbox-arrow,
.lightbox-overlay .lightbox-close,
.lightbox-overlay .lightbox-thumb {
  cursor: pointer;
}

@keyframes lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Topbar mit Counter links und Close rechts.
 * Absolut über dem Stage, nimmt keine Grid-Höhe ein. */
.lightbox-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  color: #fff;
}
.lightbox-counter {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.lightbox-close {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-stage {
  grid-row: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  /* Stage ist nur der Viewport — der Track darunter rutscht horizontal. */
}

.lightbox-track {
  display: flex;
  width: 100%;
  height: 100%;
  /* transform wird inline gesetzt (index + swipeDelta) */
  will-change: transform;
}

.lightbox-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Vertikales Padding ähnlich der Topbar-Höhe, damit das Bild auch ohne
   * Thumbnails nicht den unteren Bildschirmrand berührt. */
  padding: 1.5rem 5rem;
}

/* Wrapper um das Bild — füllt den Slide-Viewport komplett (block-level mit
 * expliziten Dimensionen), damit % max-height am inneren <img> sauber
 * greift. Bild wird per `object-fit: contain` proportional eingepasst. */
.lightbox-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: auto;
  display: block;
}

/* Bildunterschrift als Overlay am unteren Bildrand mit Fade-Gradient
 * von transparent zu schwarz. Sitzt IM wrapper, also klebt sie am
 * tatsächlichen Bild-Rand (nicht am Slide-Viewport). */
.lightbox-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4rem 1.5rem 1.25rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
  color: #fff;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 500;
  /* Explizite line-height — wrapper hat `line-height: 0` (Whitespace-Fix),
   * das darf nicht auf den Text hier vererben. */
  line-height: 1.4;
  pointer-events: none;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms;
}
.lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.2);
}
.lightbox-arrow-left {
  left: 1rem;
}
.lightbox-arrow-right {
  right: 1rem;
}
.lightbox-arrow svg {
  width: 1.75rem;
  height: 1.75rem;
}

.lightbox-thumbs {
  grid-row: 2;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  max-width: 100%;
  padding: 0 0.5rem 0.5rem;
  scrollbar-width: thin;
  /* Thumbs horizontal zentrieren. `justify-content` zentriert nur wenn
     alle thumbs zusammen schmaler als der container sind; bei breiter
     (overflow) startet der scroll am Anfang. `margin: auto` fallback für
     schmale Liste. */
  justify-content: center;
}
.lightbox-thumbs::-webkit-scrollbar {
  height: 6px;
}
.lightbox-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.lightbox-thumb {
  flex: 0 0 auto;
  width: 9rem;
  height: 6rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition:
    opacity 200ms,
    border-color 200ms;
}
.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lightbox-thumb:hover {
  opacity: 0.85;
}
.lightbox-thumb.is-active {
  opacity: 1;
  border-color: #fff;
}

/* Mobile-Anpassungen */
@media screen and (max-width: 767px) {
  .gallery20_component > .slider {
    aspect-ratio: 4 / 3;
  }
  .gallery20_component .arrow-slider svg {
    width: 1.75rem;
    height: 1.75rem;
  }
  .gallery20_component .w-slider-arrow-left {
    left: 0.5rem;
  }
  .gallery20_component .w-slider-arrow-right {
    right: 0.5rem;
  }
  .gallery20_component .gallery20_slide-nav {
    padding: 14px 0.5rem;
    gap: 8px;
  }
  .gallery20_component .gallery20_slide-nav .w-slider-dot {
    width: 8px;
    height: 8px;
  }
  .gallery20_component .wrapper-anklicken-vollbild-galerie {
    inset: auto 0.5rem 0.5rem auto;
  }

  .lightbox-arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
  .lightbox-arrow-left {
    left: 0.25rem;
  }
  .lightbox-arrow-right {
    right: 0.25rem;
  }
  .lightbox-thumb {
    width: 5rem;
    height: 3.5rem;
  }
  .lightbox-slide {
    padding: 0 0.5rem;
  }
  .gallery20_component .arrow-slider {
    width: 3rem;
    height: 3rem;
  }
}

/* =========================================================
 * ProjektTimeline — „Lage & Infrastruktur" mit Auto-Animation
 * ========================================================= */

/* Mask-Icons für die Entfernungs-Kategorien. Vlow liefert diese Regeln
   als Inline-<style>-Block im tresdorf.html-Head aus; unsere Master-site.css
   hat sie NICHT. Ohne mask-size/repeat/position wird das SVG bei seiner
   intrinsischen Größe dargestellt und rechts abgeschnitten. */
.cms-icon-mask,
.dynamic-cms-icon {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Master setzt .outer-wrapper-car auf position:absolute ohne left/top,
   Browser defaultet auf 0/0 → Auto klebt am linken Rand. Laut Vlow-Referenz
   sitzt das Auto in der horizontalen MITTE der Section, genau über der
   Progress-Line (die labels stehen links davon, die Entfernungs-Werte rechts).
   Auto-Breite 15rem → left:calc(50% - 7.5rem). */
.section-projekt-timeline .outer-wrapper-car {
  left: calc(50% - 7.5rem);
  top: 0;
}

/* =========================================================
 * ProjektKarte — Click-to-activate Overlay
 * ========================================================= */

.section-projekt-karte .karte-aktivieren-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5rem;
  color: inherit;
  font: inherit;
  /* Overlay liegt über iframe und fängt alle Maus/Scroll-Events ab.
     Visuell nur ein dezenter Hinweis-Pill am unteren Rand, sonst unsichtbar. */
}
.section-projekt-karte .karte-aktivieren-overlay span {
  display: inline-block;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: background 200ms;
}
.section-projekt-karte .karte-aktivieren-overlay:hover span {
  background: rgba(0, 0, 0, 0.8);
}

/* =========================================================
 * ProjektLage — Sticky Eyecatcher + LageSlider (links)
 * Vorlage: Vlow tresdorf.html, Section mit .layout73_background-image-wrapper-2
 * + .wrapper-content-lage.
 * ========================================================= */

/* Dunklerer Tint zusätzlich zum master-gradient damit der Text auf dem
   Eyecatcher-Bild gut lesbar ist. Master-CSS setzt schon linear-gradient
   00000080 darauf; wir lassen das. */
.section-lage {
  /* color-scheme-1 setzt BG auf Tenant-Primary (beige). Wenn das Eyecatcher-
     Bild per Scroll-Fade opacity senkt, kommt der section-BG durch. User-
     Wunsch: weiß, damit der schwarze Text besseren Kontrast bekommt. */
  background-color: #fff;
  position: relative;
}

/* Der Content-Wrapper sollte nicht mit der Page-Width-Limitierung
   konkurrieren — master-CSS hat's richtig (sticky, min-height 150svh). */

/* ---------- LageSlider (links in der Grid) ---------- */

.layout1_image-wrapper-2 {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
}

/* master setzt .slider.large { aspect-ratio: 1 } + .slider { width: 100% } —
   das diktiert die Höhe. Wir ergänzen nur position/overflow für Arrow-Anker. */
.layout1_image-wrapper-2 .slider.large {
  position: relative;
  overflow: hidden;
}
.layout1_image-wrapper-2 .mask-3.lage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.layout1_image-wrapper-2 .lage_slider_track {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Slide = Button-Wrapper (Click → Lightbox). Button-Reset wie bei Gallery20. */
.layout1_image-wrapper-2 .slide.lightbox-lage {
  flex: 0 0 100%;
  min-width: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  /* master setzt .lightbox-lage auf aspect-ratio:1 + width:100% (Standalone-
     Anchor), im Slider brauchen wir aber die Track-Dimensionen. */
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  display: block;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.layout1_image-wrapper-2 .slide.lightbox-lage:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}
.layout1_image-wrapper-2 .layout1_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: auto; /* master setzt 1:1, im Button passt es sich an */
  /* pointer-events none: Clicks landen am Button-Wrapper (gleicher Trick wie
     Gallery20 — site.css .layout1_image hat evtl. andere Defaults, wir setzen
     pointer-events:none auf img, damit der button-click zuverlässig feuert). */
  pointer-events: none;
}

/* ---------- Arrows (gleich wie Gallery20: inset:0+margin:auto-Fix) ---------- */

.layout1_image-wrapper-2 .arrow-slider {
  position: absolute;
  top: 50%;
  bottom: auto;
  margin: 0; /* Override master inset:0 + margin:auto */
  transform: translateY(-50%);
  z-index: 5;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms;
}
.layout1_image-wrapper-2 .arrow-slider:hover {
  background: rgba(0, 0, 0, 0.6);
}
.layout1_image-wrapper-2 .w-slider-arrow-left {
  left: 1rem;
  right: auto;
}
.layout1_image-wrapper-2 .w-slider-arrow-right {
  right: 1rem;
  left: auto;
}
.layout1_image-wrapper-2 .arrow-slider svg {
  width: 2rem;
  height: 2rem;
}

/* ---------- Dots unten (gleiche Optik wie Gallery20) ---------- */

.layout1_image-wrapper-2 .gallery20_slide-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px 1rem;
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.layout1_image-wrapper-2 .gallery20_slide-nav .w-slider-dot {
  pointer-events: auto;
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    transform 200ms ease;
}
.layout1_image-wrapper-2 .gallery20_slide-nav .w-slider-dot:hover {
  background-color: rgba(255, 255, 255, 0.75);
}
.layout1_image-wrapper-2 .gallery20_slide-nav .w-slider-dot.w-active {
  background-color: #fff;
  transform: scale(1.2);
}

/* ---------- Content-Column rechts (H2, Text, Button) ---------- */

/* Der Lage-Text steht auf dem faden Eyecatcher-Bild (via Scroll-Fade der
   BG-Opacity wird's am Ende fast weiß). User-Wunsch: Schriftfarbe schwarz,
   damit in allen Scroll-States gut lesbar. Überschreibt color-scheme-1
   Default (weiß). */
.section-lage .layout1_content-left,
.section-lage .layout1_content-left h1,
.section-lage .layout1_content-left h2,
.section-lage .layout1_content-left h3,
.section-lage .layout1_content-left h4,
.section-lage .layout1_content-left p,
.section-lage .layout1_content-left strong,
.section-lage .layout1_content-left .text-rich-text {
  color: #000;
}

/* w-richtext Absätze bekommen evtl. Body-Defaults mit hohem margin; wir
   normalisieren. */
.section-lage .layout1_content-left .text-rich-text p {
  margin-top: 0;
}
.section-lage .layout1_content-left .text-rich-text p + p {
  margin-top: 1rem;
}

/* Opacity-Glättung macht JS per rAF-Lerp (siehe ProjektLage). CSS-Transition
   ist hier kontraproduktiv — sie würde sich mit dem Lerp überlagern. */

/* Mobile: kleinerer Abstand, Arrows + Dots proportional kleiner. */
@media screen and (max-width: 767px) {
  .layout1_image-wrapper-2 .arrow-slider {
    width: 2.5rem;
    height: 2.5rem;
  }
  .layout1_image-wrapper-2 .arrow-slider svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .layout1_image-wrapper-2 .w-slider-arrow-left {
    left: 0.5rem;
  }
  .layout1_image-wrapper-2 .w-slider-arrow-right {
    right: 0.5rem;
  }
  .layout1_image-wrapper-2 .gallery20_slide-nav {
    padding: 14px 0.5rem;
    gap: 8px;
  }
  .layout1_image-wrapper-2 .gallery20_slide-nav .w-slider-dot {
    width: 8px;
    height: 8px;
  }
}

/* Content-Wrapper: flex-column, min-height, gibt dem Hero die Bildschirm-Hoehe. */
.section_header.projekt-seite .header5_content-3 {
  z-index: 1;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  height: calc(100svh - 4.5rem);
  min-height: 46rem;
  max-height: none;
  display: flex;
  position: relative;
  overflow: visible;
}

.section_header.projekt-seite .header5_content-3.version-aktuelle-projekte {
  height: 70svh;
  min-height: 50rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Tags (mieten/kaufen, Baustatus). */
.section_header.projekt-seite .portfolio_tags_wrapper {
  position: absolute;
  inset: 0% 0% auto;
}
.section_header.projekt-seite .portfolio_tags_wrapper.position-static {
  position: static;
}
.section_header.projekt-seite .portfolio6_tag-list {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
  display: flex;
}
.section_header.projekt-seite .tag.tag-1 {
  column-gap: 0.4rem;
  row-gap: 0.4rem;
  background-color: var(--color-variables--tag-1-bg, #fff);
  color: var(--color-variables--tag-1-text, #000);
}
.section_header.projekt-seite .tag.tag-2 {
  background-color: var(--color-variables--tag-2-bg, rgba(255, 255, 255, 0.15));
  color: var(--color-variables--tag-2-text, #fff);
}
.section_header.projekt-seite .text-with-icon.no-padding.tag.tag-2 {
  background-color: var(--color-variables--tag-2-bg, rgba(255, 255, 255, 0.15));
  color: var(--color-variables--tag-2-text, #fff);
  display: flex;
}
.section_header.projekt-seite .icon-embed-xxsmall-6 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: flex;
}

/* Orts-Zeile unter H1. */
.section_header.projekt-seite .wrapper-projekt-hero-icons {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  color: var(--_primitives---colors--white, #fff);
  flex-flow: column;
  display: flex;
}

/* Exposé-Button-Hover-Border. */
.section_header.projekt-seite .button-hover-wrapper-2 {
  position: relative;
}
.section_header.projekt-seite .div-hover-border-2 {
  z-index: 0;
  border: 2px solid transparent;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  position: absolute;
  inset: -8px 0% 0% -8px;
  pointer-events: none;
}
.section_header.projekt-seite .div-hover-border-2._6px {
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
}

/* Mobile-Varianten wie in Vlow. */
@media screen and (max-width: 991px) {
  .section_header.projekt-seite .header5_content-3.version-aktuelle-projekte {
    height: auto;
    min-height: auto;
    max-height: none;
    padding-top: 0;
    padding-bottom: 2rem;
  }
  .section_header.projekt-seite .button-hover-wrapper-2 {
    order: -1;
  }
}

@media screen and (max-width: 767px) {
  .section_header.projekt-seite .gradient-ausblendung-neu {
    width: 100%;
    height: 100%;
    max-height: 60%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%);
    mask-image: linear-gradient(to top, transparent 0%, black 50%);
  }
  .section_header.projekt-seite .header5_content-3 {
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    height: calc(100svh - 4rem);
    min-height: 35rem;
    padding-bottom: 5rem;
    overflow: hidden;
  }
  .section_header.projekt-seite .header5_content-3.version-aktuelle-projekte {
    height: calc(90svh - 4rem);
    min-height: 35rem;
    max-height: 60rem;
    position: relative;
  }
  .section_header.projekt-seite .portfolio6_tag-list {
    justify-content: flex-start;
    align-items: center;
  }
  /* Wenn der Tag-Wrapper den `.center`-Modifier hat (Projekt-Hero), bleibt
     er auch auf Mobile zentriert — wie in Vlow-Vorlage. */
  .section_header.projekt-seite .portfolio6_tag-list.center {
    justify-content: center;
  }
  .section_header.projekt-seite .padding-section-large.mobile-hero-padding-bottom {
    padding-bottom: 2rem;
  }
}

/* =========================================================
 * Wohneinheit-Detailseite (section_blog-post-header3-2)
 * =========================================================
 * Master site.css hat nur das Grid-Skelett via #w-node-...-0403e807
 * IDs (Webflow Collection-Page-spezifisch). Da unsere IDs nicht
 * matchen, ersetzen wir die ID-Selektoren hier durch Klassen —
 * gleiches visuelles Layout, ohne Master-CSS anzufassen.
 */

/* Grund-BG für die Einheit-Seite kommt aus den fixed-positioned
 * Layern .bg-wohneinheit-color + .bg-wohneinheit-image, die die
 * Page-Komponente selbst rendert (Vlow-Original: Body-Level).
 * Master site.css setzt .section_blog-post-header3-2.bg-transparent
 * bereits auf background: transparent — keine zusätzlichen Overrides. */
.section_blog-post-header3-2 {
  padding-top: 6rem; /* Navbar-Abstand */
  position: relative;
}
.section_blog-post-header3-2 .padding-top-wohneinheit {
  padding-top: 0;
  padding-bottom: 5rem;
}

/* 2-Spalten-Layout: links eine Flex-Column mit allem Content
 * (Titel + Beschreibung + Button), rechts der Slider.
 *
 * Spalten sind gleich breit (1fr 1fr) wie in Vlow. Das Bild darin
 * wird horizontal zentriert und per max-height gecappt — die Pfeile
 * sitzen dann an den Spaltenrändern (nicht am Bildrand), das ergibt
 * den Vlow-typischen Abstand zwischen Bild und Pfeilen. */
.einheit-hero-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 5rem;
  grid-row-gap: 0;
  align-items: start;
}
.einheit-hero-grid__left {
  display: flex;
  flex-direction: column;
}
.einheit-hero-grid__right {
  position: relative;
  align-self: start;
  width: 100%;
}

/* Mobile: Spalten zusammenklappen, Reihenfolge Titel → Grundriss
 * → Beschreibung → CTA. */
@media screen and (max-width: 991px) {
  .einheit-hero-grid {
    grid-template-columns: 1fr;
  }
  .einheit-hero-grid__left {
    display: contents; /* children werden direkte grid items, damit wir mit order umsortieren können */
  }
  .einheit-hero-grid__title {
    order: -9999;
  }
  .einheit-hero-grid__right {
    order: -1;
  }
  .einheit-hero-grid__desc {
    order: 9999;
  }
  .einheit-hero-grid__cta {
    order: -2;
  }
}

/* Grundrisse-Slider — Master site.css setzt auf mehreren Ebenen feste
 * Höhen/aspect-ratio:
 *   .w-slider        { height: 300px }
 *   .w-slider-mask   { height: 100% }
 *   .w-slide         { height: 100% }
 *   .slider-4        { aspect-ratio: 1; max-height: 35rem; display: flex }
 *   .grundriss_item  { aspect-ratio: 1; max-height: 100%; display: flex }
 *   .grundriss_image { aspect-ratio: 1; height: 100%; max-height: 100% }
 *   .margin-bottom.margin-xsmall.height-100 { height: 85% }
 *
 * Alle diese Regeln haben Spezifität 0,1,0 bzw. 0,2,0 — unsere
 * `.slider-4 .*`-Selektoren würden normalerweise gewinnen, aber der
 * Mix aus mehreren überlappenden Master-Regeln + inline-styles am Track
 * hat sich als fragil erwiesen (Container blieb quadratisch ~600px,
 * Bild floss nach oben, darunter leerer Raum). Deshalb hier bewusst
 * mit `!important` die Höhen/aspect-ratio-Hacks killen — nur für diese
 * Dimensions-Properties, sonst bleibt das Layout normal cascadeable. */
.slider-4 {
  position: relative;
  /* Wichtig: overflow visible am äußersten Slider-Container, damit der
   * „ANKLICKEN FÜR VOLLBILD"-Hint (absolut positioniert mit
   * inset: -2rem 0% auto via Master) nicht abgeschnitten wird. Das
   * horizontale Überlaufen der Slides hält `.collection-list` zurück. */
  overflow: visible;
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: none !important;
  /* padding-top: Platz für den "ANKLICKEN FÜR VOLLBILD"-Hint, damit er
   * NICHT mit dem Grundriss-Bild überlappt. Hint ist 46px hoch, sitzt
   * per Master bei inset: -2rem 0% auto → reicht 14px ins slider-4
   * hinein. Mit 3rem Oberkante bleibt ~34px sichtbare Gap.
   *
   * padding-bottom: Platz für Pfeile + Dots (sitzen absolut) + optional
   * sichtbare Bildunterschrift (sitzt im Slide-Flow unter dem Bild und
   * nimmt den Raum zwischen Bild und Pfeilen ein, wenn vorhanden). */
  padding-top: 3rem;
  padding-bottom: 4.5rem;
  display: block;
  width: 100%;
}
/* Wenn mindestens ein Slide eine Bildunterschrift hat, mehr Platz unten:
 * Caption sitzt im Flow unter dem Bild (margin-top 0.75rem + ~1.3em line-height),
 * darunter brauchen wir weiterhin Raum für Pfeile + Dots. */
.slider-4:has(.team12_title-wrapper) {
  padding-bottom: 6rem;
}
.slider-4 > .collection-list {
  /* Master .collection-list { aspect-ratio: 1; display: flex } — das macht
   * die Mask quadratisch (600x600) und bläht den Slider unnötig auf. */
  aspect-ratio: auto !important;
  height: auto !important;
  width: 100%;
  display: block;
  overflow: hidden;
}
.slider-4 .grundriss_item {
  aspect-ratio: auto !important;
  height: auto !important;
  max-height: none !important;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; /* Bild horizontal in der Spalte zentrieren */
  /* Gap zwischen Bild und optionaler Bildunterschrift. Wenn Caption
   * vorhanden, sitzt sie im Flow unter dem Bild — dank padding-bottom
   * am slider-4 entsteht kein Konflikt mit den (absolut positionierten)
   * Pfeilen/Dots darunter. */
  gap: 0.75rem;
}
.slider-4 .grundriss_image {
  aspect-ratio: auto !important;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  /* Cap Bildhöhe — gilt auch für Hochformat-Grundrisse (Portrait A4):
   * object-fit: contain skaliert proportional, max-height verhindert
   * dass der Slider auf 800px+ aufbläht. */
  max-height: 24rem;
  object-fit: contain;
  display: block;
  overflow: visible;
}

/* Track: horizontale Flex-Row für Swipe ohne Key-Remount beim Slide-Wechsel. */
.grundriss_slider_track {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
}
.grundriss_slider_track > .grundriss_item {
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
}
.grundriss_slider_track > .grundriss_item .grundriss_image {
  pointer-events: none;
}

/* Pfeile sitzen absolut am unteren Rand des slider-4, innerhalb der
 * padding-bottom-Zone. Master hat `.arrow-slider-alt { inset: auto 0 50px 0 }`
 * — unsere Regeln überschreiben das mit einer kompakteren Position. */
.slider-4 .w-slider-arrow-left,
.slider-4 .w-slider-arrow-right {
  position: absolute;
  bottom: 0.75rem;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  top: auto;
  background: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  z-index: 3;
}
.slider-4 .w-slider-arrow-left {
  left: 0;
  right: auto;
}
.slider-4 .w-slider-arrow-right {
  right: 0;
  left: auto;
}
.slider-4 .w-slider-arrow-left svg,
.slider-4 .w-slider-arrow-right svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}
.slider-4 .w-slider-arrow-left:hover,
.slider-4 .w-slider-arrow-right:hover {
  color: var(--color-variables--accent-elements, currentColor);
}

/* Dots (Navigations-Punkte) unten zentriert. Vlow rendert an dieser
 * Stelle nur ein leeres `<a class="w-slider-nav">`, das Webflow-JS mit
 * Dots füllen würde — wir rendern sie direkt im JSX. */
.slider-4 .grundriss_slide-nav {
  position: absolute;
  left: 0;
  right: 0;
  /* Dots auf vertikaler Mitte der Pfeile: Pfeil 3rem hoch bei bottom
   * 0.75rem → Pfeil-Mitte bei bottom 2.25rem. Dots sind 8px hoch, also
   * Mitte bei bottom ≈ 2rem. */
  bottom: 2rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  z-index: 2;
  pointer-events: auto;
}
.slider-4 .grundriss_slide-nav .w-slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.slider-4 .grundriss_slide-nav .w-slider-dot:hover {
  background: rgba(255, 255, 255, 0.75);
}
.slider-4 .grundriss_slide-nav .w-slider-dot.w-active {
  background: #fff;
  transform: scale(1.2);
}

/* Bildunterschrift unter dem Grundriss (aus ImageValue.bildunterschrift).
 * Master definiert `.team12_title-wrapper`/`.alt-tag-text` nicht mit
 * Styles, darum hier. */
.slider-4 .grundriss_item .team12_title-wrapper {
  /* Gap zum Bild kommt von `.slider-4 .grundriss_item { gap: 0.75rem }`,
   * kein zusätzlicher margin-top nötig. */
  margin-top: 0;
  text-align: center;
  color: currentColor;
}
.slider-4 .grundriss_item .alt-tag-text {
  font-size: 0.95rem;
  line-height: 1.3;
  opacity: 0.85;
}

/* Fallback wenn keine Grundrisse vorhanden sind. */
.grundriss-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-height: 35rem;
  margin: 0 auto;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Zurück-Button mit animiertem Doppelpfeil — CSS-Nachbau des Vlow-Lottie
 * (vgl. ZurueckButton.tsx). Zwei Chevrons `<` `<` die rhythmisch nach
 * links wandern, versetzt um eine halbe Periode, Loop. */
/* Fließband-Animation: beide Pfeile laufen dieselbe Bahn (von rechts
 * nach links), Pfeil B mit einer halben Periode Versatz — so taucht
 * kontinuierlich ein neuer Pfeil rechts auf, läuft durch, verschwindet
 * links. Nie alle gleichzeitig unsichtbar. */
.zurueck-arrow-anim {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1rem;
  overflow: hidden;
  color: currentColor;
}
.zurueck-arrow-chevron {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  animation: zurueck-arrow-conveyor 2.4s linear infinite;
  opacity: 0;
}
.zurueck-arrow-anim__a {
  animation-delay: 0s;
}
.zurueck-arrow-anim__b {
  animation-delay: 1.2s;
}
@keyframes zurueck-arrow-conveyor {
  0% {
    transform: translateX(10px);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(-10px);
    opacity: 0;
  }
}

.zurueck-button-flex .breadcrumb-link-eigenprojekte,
.zurueck-button-flex .breadcrumb-link {
  color: inherit;
  text-decoration: none;
}
.zurueck-button-flex .breadcrumb-link-eigenprojekte:hover,
.zurueck-button-flex .breadcrumb-link:hover {
  text-decoration: none;
}

/* Master site.css hat `.lottie-animation-2 { transform: rotate(90deg) }`,
 * weil Vlow's Original-Lottie vertikal ausgerichtet war und 90° gedreht
 * wurde. Wir nutzen die Klasse nicht mehr, aber falls sie nochmal
 * irgendwo auftaucht, Rotation hier neutralisieren. */
.zurueck-button-flex .lottie-animation-2 {
  transform: none;
}

/* Wenn jemand weniger Motion will: Pfeile sanft stehen lassen. */
@media (prefers-reduced-motion: reduce) {
  .zurueck-arrow-chevron {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .zurueck-arrow-anim__b {
    display: none;
  }
}

/* Tag-Liste "more-gap" — größerer Abstand zwischen den Meta-Items. */
.portfolio6_tag-list.more-gap {
  column-gap: 1.25rem;
  row-gap: 0.5rem;
}

/* Tag-5 (Kategorie-Tag): Master definiert die Grundform; die Farbe
 * kommt per inline style (background-color aus tag.farbe). Nur den
 * Border wegnehmen, Master hat border: 1px #eee eingebaut. */
.section_blog-post-header3-2 .tag-5.bg-cms {
  border: 0;
}

/* =========================================================
 * Über-uns Sektionen — fehlende Klassen aus aktueller vlow.shared.css
 * (die wir lokal nicht 1:1 spiegeln, additive Ergänzung).
 * =========================================================
 */

/* Master site.css hat `.bg-brighter { background-color: #ffffff08 }` — auf
 * weißem BG nicht sichtbar. Vlow nutzt mittlerweile schwarz mit 5% Alpha,
 * was den Karten ein subtiles Tönungs-Overlay gibt. */
.bg-brighter {
  background-color: #0000000d !important;
}

/* Layout3 — 2 Bilder nebeneinander im Image-Wrapper. */
.layout3_image-wrapper.grid-2-images {
  display: grid;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

/* Team4 — featured-Profil-Wrapper: 2-Spalten-Grid auf Desktop, 1-Spalte
 * mobile (Robert + Michaela nebeneinander statt gestapelt). */
.team_wrapper_gf {
  display: grid;
  grid-column-gap: 7rem;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}
@media (max-width: 767px) {
  .team_wrapper_gf {
    grid-template-columns: 1fr;
  }
}

/* Team4 — featured-Profil-Card (Bild + Bio darunter, einspaltig). */
.layout3_content.team,
.layout3_content.team._2 {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-row-gap: 1.5rem;
}

/* Layout423 — Hover-Animation. Vlow nutzt Webflow IX2-JS (das wir nicht
 * einbinden), wir bauen das per CSS-Transition nach:
 *   - Default: beide Cards 50% breit, nur Headlines sichtbar, Overlay
 *     transparent.
 *   - Hover:   gehoverte Card wird auf ~60% breit (andere schrumpft),
 *     Body-Text fährt von unten ein und nimmt die volle Card-Breite ein,
 *     Overlay dunkelt das Image ab.
 */
.layout423_card {
  transition: width 0.4s ease;
}
.layout423_row:hover .layout423_card {
  width: 40%;
}
.layout423_row:hover .layout423_card:hover {
  width: 60%;
}
/* Card-Content-Box hat die Breite einer pre-hover Card (~35rem) — auch
 * im Default-State, damit beim Hover nichts umspringt. Master hat 19rem. */
.layout423_card-content {
  max-width: 35rem !important;
}
.layout423_card-content-bottom {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    max-height 0.4s ease,
    transform 0.4s ease;
}
.layout423_card:hover .layout423_card-content-bottom {
  opacity: 1;
  max-height: 30rem;
  transform: translateY(0);
}
.layout423_overlay {
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.4s ease;
}
.layout423_card:hover .layout423_overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Über-uns- + Referenzen-Seite: Vlow rendert beide Subpages mit weißem
 * BG + schwarzem Text, unabhängig von color-scheme-1/2. Wir scoped-
 * überschreiben hier für diese Seiten, ohne globale Tokens zu
 * beeinflussen. */
.page-ueber-uns,
.page-referenzen {
  --color-variables--color-scheme-1-bg: #fff;
  --color-variables--color-scheme-1-text: #000;
  --color-variables--color-scheme-2-bg: #fff;
  --color-variables--color-scheme-2-text: #000;
}
/* Auf der Über-uns-Seite alle Texte auf schwarz zwingen — die `section_team4`
 * und `section_layout423` setzen color via ungültige relume-Variablen, die
 * auf beige zurückfallen. Wir overriden mit pauschalem schwarz, ausser
 * innerhalb `.text-color-white` (Layout423-Cards, SubpageHeader-H1) und
 * innerhalb `.color-scheme-cta` (CTA51 mit BG-Image bleibt weiß). */
.page-ueber-uns,
.page-referenzen,
.page-ueber-uns h1, .page-referenzen h1,
.page-ueber-uns h2, .page-referenzen h2,
.page-ueber-uns h3, .page-referenzen h3,
.page-ueber-uns h4, .page-referenzen h4,
.page-ueber-uns h5, .page-referenzen h5,
.page-ueber-uns h6, .page-referenzen h6,
.page-ueber-uns p, .page-referenzen p,
.page-ueber-uns div, .page-referenzen div,
.page-ueber-uns span, .page-referenzen span,
.page-ueber-uns strong, .page-referenzen strong,
.page-ueber-uns a, .page-referenzen a {
  color: #000;
}
.page-ueber-uns .text-color-white,
.page-ueber-uns .text-color-white *,
.page-referenzen .text-color-white,
.page-referenzen .text-color-white *,
.page-ueber-uns .color-scheme-cta,
.page-referenzen .color-scheme-cta,
.page-ueber-uns .color-scheme-cta h1, .page-referenzen .color-scheme-cta h1,
.page-ueber-uns .color-scheme-cta h2, .page-referenzen .color-scheme-cta h2,
.page-ueber-uns .color-scheme-cta h3, .page-referenzen .color-scheme-cta h3,
.page-ueber-uns .color-scheme-cta h4, .page-referenzen .color-scheme-cta h4,
.page-ueber-uns .color-scheme-cta p, .page-referenzen .color-scheme-cta p,
.page-ueber-uns .color-scheme-cta div, .page-referenzen .color-scheme-cta div,
.page-ueber-uns .color-scheme-cta strong, .page-referenzen .color-scheme-cta strong,
.page-ueber-uns .color-scheme-cta span, .page-referenzen .color-scheme-cta span,
.page-referenzen .arrow-slider,
.page-referenzen .w-slider-arrow-left,
.page-referenzen .w-slider-arrow-right,
.page-referenzen .w-slider-dot,
.page-referenzen .gallery20_slide-nav,
.page-referenzen .wrapper-anklicken-vollbild-galerie,
.page-referenzen .wrapper-anklicken-vollbild-galerie *,
.page-referenzen .image-klicken-fuer-vollbild,
.page-referenzen .image-klicken-fuer-vollbild *,
.page-referenzen .wrapper-images-anklicken-fuer-vollbild,
.page-referenzen .wrapper-images-anklicken-fuer-vollbild *,
.page-ueber-uns .arrow-slider,
.page-ueber-uns .w-slider-arrow-left,
.page-ueber-uns .w-slider-arrow-right,
.page-ueber-uns .w-slider-dot,
.page-ueber-uns .gallery20_slide-nav,
.page-ueber-uns .wrapper-anklicken-vollbild-galerie,
.page-ueber-uns .wrapper-anklicken-vollbild-galerie *,
.page-ueber-uns .image-klicken-fuer-vollbild,
.page-ueber-uns .image-klicken-fuer-vollbild *,
.page-ueber-uns .wrapper-images-anklicken-fuer-vollbild,
.page-ueber-uns .wrapper-images-anklicken-fuer-vollbild * {
  color: #fff;
}
/* CTA-Button bleibt im normalen Token-Color (cta-button-text) — der ist
 * pro Tenant via WebflowTokens definiert und soll NICHT auf weiß
 * gezwungen werden. */
.page-ueber-uns .color-scheme-cta .button,
.page-referenzen .color-scheme-cta .button {
  color: var(--color-variables--cta-button-text);
}

/* Referenz-Detail Eckdaten-Liste (Bullet-Liste mit Diamant-Icon links). */
.referenz-eckdaten-liste,
.referenz-eckdaten-richtext ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}
.referenz-eckdaten-item,
.referenz-eckdaten-richtext li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.75rem;
}
/* RichText-Liste: Diamant als ::before Pseudo-Element vor jedem <li>.
 * Farbe: Primary-Akzent-Farbe (beige bei Vlow). */
.referenz-eckdaten-richtext li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 14px;
  height: 14px;
  background: var(--basis--primary-color_farbe-1);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'><path d='M7.28354 1.41421L1.41406 7.28369L7.28354 13.1532L13.153 7.28369L7.28354 1.41421Z' stroke='black' stroke-width='2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'><path d='M7.28354 1.41421L1.41406 7.28369L7.28354 13.1532L13.153 7.28369L7.28354 1.41421Z' stroke='black' stroke-width='2'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.referenz-eckdaten-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 0;
}
.referenz-eckdaten-icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
  color: var(--basis--primary-color_farbe-1);
}

/* "Anklicken für Vollbild" Hint-Overlay über dem Grundriss-Slider. */
.wrapper-images-anklicken-fuer-vollbild {
  pointer-events: none;
  animation: anklicken-fuer-vollbild-bounce 6s ease-in-out infinite;
  will-change: transform;
}
.wrapper-images-anklicken-fuer-vollbild .image-klicken-fuer-vollbild {
  color: rgba(255, 255, 255, 0.75);
}

@keyframes anklicken-fuer-vollbild-bounce {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .wrapper-images-anklicken-fuer-vollbild {
    animation: none;
  }
}

/* =========================================================
 * Kontakt-, Impressum- und Datenschutz-Subpages.
 *
 * Vlow rendert auch diese Seiten mit weißem BG + schwarzem Text
 * (color-scheme-2 → über Tokens überschrieben). Pattern wie bei
 * .page-ueber-uns / .page-referenzen.
 * ========================================================= */
.page-kontakt,
.page-rechtstext {
  --color-variables--color-scheme-1-bg: #fff;
  --color-variables--color-scheme-1-text: #000;
  --color-variables--color-scheme-2-bg: #fff;
  --color-variables--color-scheme-2-text: #000;
}
.page-kontakt,
.page-rechtstext,
.page-kontakt h1, .page-rechtstext h1,
.page-kontakt h2, .page-rechtstext h2,
.page-kontakt h3, .page-rechtstext h3,
.page-kontakt h4, .page-rechtstext h4,
.page-kontakt h5, .page-rechtstext h5,
.page-kontakt h6, .page-rechtstext h6,
.page-kontakt p, .page-rechtstext p,
.page-kontakt div, .page-rechtstext div,
.page-kontakt span, .page-rechtstext span,
.page-kontakt strong, .page-rechtstext strong,
.page-kontakt a, .page-rechtstext a {
  color: #000;
}
/* Hero-H1 + Overlay-Texte sollen weiß bleiben (SubpageHeader). */
.page-kontakt .text-color-white,
.page-kontakt .text-color-white *,
.page-rechtstext .text-color-white,
.page-rechtstext .text-color-white * {
  color: #fff;
}

/* Contact7 ohne Formular: Grid auf 1 Spalte zentriert reduzieren. */
.contact7_content.contact7_no-form {
  grid-template-columns: 1fr;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
 * KontaktFormular — 1:1 Vlow-Design (Underline-Inputs).
 * ========================================================= */
.kontakt-formular {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.kontakt-formular_heading {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.kontakt-formular_field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.kontakt-formular_field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: currentColor;
}
.kontakt-formular_field input,
.kontakt-formular_field textarea {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: 1rem;
  color: currentColor;
  width: 100%;
  outline: none;
  resize: vertical;
}
.kontakt-formular_field input::placeholder,
.kontakt-formular_field textarea::placeholder {
  color: currentColor;
  opacity: 0.45;
}
.kontakt-formular_field input:focus,
.kontakt-formular_field textarea:focus {
  border-bottom-color: var(--basis--primary-color_farbe-1);
}
.kontakt-formular_consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.kontakt-formular_consent input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--basis--primary-color_farbe-1);
  cursor: pointer;
}
.kontakt-formular_consent a {
  color: currentColor;
  text-decoration: underline;
}
.kontakt-formular_consent a:hover {
  text-decoration: none;
}

.kontakt-formular_error {
  padding: 0.6rem 0.8rem;
  border: 1px solid #c44;
  background: #fee;
  color: #900;
  font-size: 0.9rem;
  border-radius: 4px;
}
.kontakt-formular_submit {
  display: inline-block;
  padding: 1rem 1.5rem;
  background: var(--basis--primary-color_farbe-1);
  color: var(--basis--secondary-color_farbe-2);
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.kontakt-formular_submit:hover { opacity: 0.85; }
.kontakt-formular_submit:disabled { opacity: 0.5; cursor: progress; }
.kontakt-formular_dank {
  padding: 1rem 0;
}
.kontakt-formular_dank h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.kontakt-formular_dank p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.kontakt-formular_dank-button {
  margin-top: 1rem;
}

/* =========================================================
 * KontaktFormular Popup-Variante.
 * ========================================================= */
.kontakt-popup_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}
.kontakt-popup_panel {
  position: relative;
  background: #fff;
  color: #000;
  width: 100%;
  max-width: 540px;
  padding: 3rem 2.5rem 2.5rem;
  margin: auto;
  border-radius: 4px;
}
.kontakt-popup_close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #000;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.kontakt-popup_logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.kontakt-popup_logo img {
  max-height: 60px;
  width: auto;
}

/* Popup-Inhalt darf NIE von Page-Color-Overrides (page-ueber-uns,
 * color-scheme-cta etc.) auf Weiß gezogen werden — Panel ist immer weiß
 * mit schwarzem Text. Reicht weil Portal in document.body rendered. */
.kontakt-popup_panel,
.kontakt-popup_panel *,
.kontakt-popup_panel label,
.kontakt-popup_panel input,
.kontakt-popup_panel textarea,
.kontakt-popup_panel strong {
  color: #000;
}
.kontakt-popup_panel .kontakt-formular_submit,
.kontakt-popup_panel .kontakt-formular_submit * {
  color: var(--basis--secondary-color_farbe-2, #fff);
}
.kontakt-popup_panel .kontakt-formular_field input,
.kontakt-popup_panel .kontakt-formular_field textarea {
  border-bottom-color: #000;
}

/* Rechtstext-Listen: Tailwind-Preflight setzt ul/ol auf list-style: none —
 * für die Datenschutz-/Impressums-RichText brauchen wir wieder Bullets. */
.text-rich-text-rechtstext ul {
  list-style: disc outside;
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem 0;
}
.text-rich-text-rechtstext ol {
  list-style: decimal outside;
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem 0;
}
.text-rich-text-rechtstext li {
  margin-bottom: 0.4rem;
}

/* Datenschutz-Sub-Headings: nur die Top-Level (1.–6.) sind H2.
 * 2.x / 3.x sind H3, 3.4.x sind H4. Tailwind-Preflight resettet
 * Browser-Defaults, also explizit Größen setzen damit die Hierarchie
 * sichtbar wird. */
.text-rich-text-rechtstext h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem 0;
  line-height: 1.3;
}
.text-rich-text-rechtstext h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.2rem 0 0.4rem 0;
  line-height: 1.3;
}

/* =========================================================
 * section_team12-3 — Stats-Grid
 * =========================================================
 * Master hat bereits:
 *   .section_team12-3.bg-transparent → background: transparent
 *   .stats_wohneinheit_item_list → grid 4-col
 *   .stats32_item-4.wohneinheit → BG primary + color primary-text
 *
 * Unsere einzigen Overrides: Responsive-Grid und min-height, damit
 * leere/kurze Items nicht kollabieren.
 */
.section_team12-3 .stats32_item-4.wohneinheit {
  min-height: 6rem;
  border: 0;
}
/* Wert-Heading: nicht umbrechen + bei Bedarf etwas verkleinern, damit
   "€ 745.000,-" auch in schmalen Tiles in einer Zeile bleibt. */
.section_team12-3 .stats32_item-4 .heading-style-h3-10 {
  white-space: nowrap;
  font-size: clamp(1.6rem, 2.2vw, 2.5rem);
}
/* Master setzt .icon-we-kacheln-2 auf opacity 0.05 — zu unsichtbar.
   Wir bleiben dezent, aber sichtbar. */
.section_team12-3 .stats32_item-4 .icon-we-kacheln-2 {
  opacity: 0.2;
}
.section_team12-3 .stats32_item-4 p {
  margin: 0;
}
@media screen and (max-width: 991px) {
  .section_team12-3 .stats_wohneinheit_item_list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 479px) {
  .section_team12-3 .stats_wohneinheit_item_list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * section_blog34 — Ähnliche Einheiten (Scroll-Snap-Karussell)
 * ========================================================= */
.section-einheit-aehnliche {
  background-color: transparent;
  color: #fff;
}
.section-einheit-aehnliche .blog34_list-wrapper {
  position: relative;
}
.section-einheit-aehnliche .wohnungs-inhalt {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.section-einheit-aehnliche .wohnungs-inhalt::-webkit-scrollbar {
  display: none;
}
/* Während aktiv gezogen wird: Snap aus, smoothing aus, sonst „schwimmt" der
   Slider hinter dem Cursor her. */
.section-einheit-aehnliche .wohnungs-inhalt.active {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}
/* Verhindert Ghosting + ungewollte Selektion beim Ziehen. */
.section-einheit-aehnliche .aehnliche-card-wrapper {
  flex: 0 0 45%;
  scroll-snap-align: start;
  -webkit-user-select: none;
  user-select: none;
}
.section-einheit-aehnliche .aehnliche-card-wrapper img {
  pointer-events: none;
  -webkit-user-drag: none;
}
@media screen and (max-width: 767px) {
  .section-einheit-aehnliche .aehnliche-card-wrapper {
    flex: 0 0 85%;
  }
}
/* Nur 1 Vorschlag → zentriert. */
.section-einheit-aehnliche .wohnungs-inhalt.only-one {
  justify-content: center;
}
/* Fade-Masken: rechts wenn ganz links, links wenn ganz rechts, beidseitig
   in der Mitte. Wird per JS gesetzt, je nach Scroll-Position. */
.section-einheit-aehnliche .wohnungs-inhalt.scroll-fade-right {
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
}
.section-einheit-aehnliche .wohnungs-inhalt.scroll-fade-both {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.section-einheit-aehnliche .wohnungs-inhalt.scroll-fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
}

.section-zurueck-button {
  background-color: transparent;
}
.section-zurueck-button .zurueck-button-flex.align-center {
  justify-content: center;
}

/* Einheit-Hero: h3 (Unterüberschrift) — Master hat dafür keine
 * Größenregel, wir setzen eine minimal. Farbe kommt aus color-scheme. */
.section_blog-post-header3-2 h3.heading-style-h5-6 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

/* =========================================================
 * Exposé-Multi-Step-Formular (Popup + Steps).
 * Pattern angelehnt an .kontakt-popup_*, eigenes Styling für die
 * Step-/Choice-/Tel-Komponenten.
 * ========================================================= */

/* ---------- Popup-Container ---------- */
.expose-popup_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}
.expose-popup_panel {
  position: relative;
  background: #fff;
  color: #000;
  width: 100%;
  max-width: 760px;
  /* Logo soll näher am oberen Rand sitzen → padding-top schmal,
     der nach unten gewonnene Platz wandert ins Logo (margin-bottom). */
  padding: 2rem 2.5rem 2.5rem;
  margin: auto;
  border-radius: 4px;
}
.expose-popup_close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #000;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  z-index: 2;
}
.expose-popup_logo {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}
.expose-popup_logo img {
  max-height: 60px;
  width: auto;
}

/* Force-Reset gegen Page-Color-Overrides (analog Kontakt-Popup). */
.expose-popup_panel,
.expose-popup_panel *,
.expose-popup_panel label,
.expose-popup_panel input,
.expose-popup_panel textarea,
.expose-popup_panel button,
.expose-popup_panel strong {
  color: #000;
}

/* ---------- Form-Container + Progress ---------- */
.expose-form {
  position: relative;
}
.expose-progress {
  position: absolute;
  top: -1.75rem;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.expose-progress_bar {
  height: 100%;
  background: var(--basis--primary-color_farbe-2, #c9a96e);
  transition: width 0.3s ease;
}

/* ---------- Step-Shell ---------- */
.expose-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.expose-step_back-button {
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem 0.25rem 0;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: color 0.15s ease;
  margin-bottom: -0.5rem;
}
.expose-step_back-button:hover {
  color: var(--basis--primary-color_farbe-2, #c9a96e);
}
.expose-step_question-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.expose-step_arrow {
  color: var(--basis--primary-color_farbe-2, #c9a96e);
  font-weight: 600;
}
.expose-step_number {
  color: var(--basis--primary-color_farbe-2, #c9a96e);
  font-weight: 600;
  font-size: 0.9rem;
}
.expose-step_question {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
  min-width: 100%;
}
@media (min-width: 600px) {
  .expose-step_question { min-width: 0; }
}
.expose-step_description {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.7);
}
.expose-step_field {
  margin-top: 0.5rem;
}
.expose-step_footer {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
}
.expose-step_footer kbd {
  background: rgba(0, 0, 0, 0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.85em;
}
.expose-step_progress-text {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.expose-step_error {
  margin-top: 0.4rem;
  color: #b00020;
  font-size: 0.9rem;
}
.expose-step_next-button {
  align-self: flex-start;
  margin-top: 0.75rem;
  background: var(--basis--primary-color_farbe-2, #c9a96e);
  color: var(--basis--secondary-color_farbe-2, #fff) !important;
  border: none;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.expose-step_next-button:hover { opacity: 0.9; }
.expose-step_next-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Choice (Single-Select A/B/C/D) ---------- */
.expose-choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.expose-choice-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  padding: 0.85rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.expose-choice-button:hover,
.expose-choice-button:focus-visible {
  border-color: var(--basis--primary-color_farbe-2, #c9a96e);
  background: rgba(201, 169, 110, 0.06);
  outline: none;
}
.expose-choice-button.is-selected {
  border-color: var(--basis--primary-color_farbe-2, #c9a96e);
  background: rgba(201, 169, 110, 0.12);
}
.expose-choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.expose-choice-button.is-selected .expose-choice-letter,
.expose-choice-button:hover .expose-choice-letter {
  border-color: var(--basis--primary-color_farbe-2, #c9a96e);
  background: var(--basis--primary-color_farbe-2, #c9a96e);
  color: var(--basis--secondary-color_farbe-2, #fff) !important;
}
.expose-choice-label { flex: 1; }

/* ---------- Text-Inputs ---------- */
.expose-text-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  padding: 0.5rem 0;
  font-size: 1.25rem;
  background: transparent;
  outline: none;
  transition: border-color 0.2s ease;
}
.expose-text-input:focus {
  border-color: var(--basis--primary-color_farbe-2, #c9a96e);
}
.expose-text-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
  font-size: 1rem;
}

/* ---------- Telefon-Step (Country + Tel + Picker) ---------- */
.expose-tel-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 0.25rem;
}
.expose-tel-row:focus-within {
  border-bottom-color: var(--basis--primary-color_farbe-2, #c9a96e);
}
.expose-tel-country-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 3px;
}
.expose-tel-country-button:hover {
  background: rgba(0, 0, 0, 0.04);
}
.expose-tel-flag { font-size: 1.3rem; line-height: 1; }
.expose-tel-dial { font-weight: 500; }
.expose-tel-caret { font-size: 0.7rem; opacity: 0.6; }
.expose-tel-input {
  flex: 1;
  border: none;
  padding: 0.5rem 0;
  font-size: 1.25rem;
  background: transparent;
  outline: none;
}
.expose-tel-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
  font-size: 1rem;
}
.expose-tel-picker {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(360px, 100%);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  z-index: 10;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
.expose-tel-picker-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  outline: none;
}
.expose-tel-picker-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  max-height: 260px;
}
.expose-tel-picker-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.5rem 0.85rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.expose-tel-picker-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.expose-tel-picker-item.is-selected {
  background: rgba(201, 169, 110, 0.12);
}
.expose-tel-picker-name { flex: 1; }
.expose-tel-picker-dial { color: rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; }
.expose-tel-picker-empty {
  padding: 0.75rem 0.85rem;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.9rem;
}

/* ---------- Intro (Step 0) — kombinierte Timeline ---------- */
.expose-intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.expose-intro_heading {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
/* Timeline: vertikale Liste, jedes Item hat ein Icon links + Text rechts.
   Verbindender Strich läuft durch alle Items hindurch (::before auf der
   <ol>), Icon hat weißen Hintergrund + z-index, damit der Strich
   visuell unterbrochen wirkt zwischen den Items. */
.expose-intro_timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  color: var(--basis--primary-color_farbe-2, #c9a96e);
}
.expose-intro_timeline::before {
  content: "";
  position: absolute;
  left: 1.5rem;       /* zentriert auf Icon-Mitte (Icon = 3rem breit) */
  top: 1.75rem;
  bottom: 1.75rem;
  width: 2px;
  background: currentColor;
  opacity: 0.3;
}
.expose-intro_timeline-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: start;
  position: relative;
}
.expose-intro_timeline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background: #fff;
  position: relative;
  z-index: 1;
}
.expose-intro_timeline-icon svg {
  width: 100%;
  height: 100%;
}
.expose-intro_timeline-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #000;
}
.expose-intro_timeline-title {
  font-weight: 600;
  color: #000;
}
.expose-intro_timeline-body {
  color: rgba(0, 0, 0, 0.75);
}
.expose-intro_assurance {
  margin: 0.5rem 0 1rem;
  font-size: 0.95rem;
}
.expose-intro_start-button {
  background: var(--basis--primary-color_farbe-2, #c9a96e);
  color: var(--basis--secondary-color_farbe-2, #fff) !important;
  border: none;
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.expose-intro_start-button:hover { opacity: 0.92; }
.expose-intro_dauer {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.5);
}

/* ---------- Thank-You ---------- */
.expose-thank-you {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  padding: 1rem 0;
}
.expose-thank-you_heading {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
}
.expose-thank-you_body {
  font-size: 1rem;
  line-height: 1.55;
}
.expose-thank-you_body p {
  margin: 0 0 0.6rem;
}
.expose-thank-you_button {
  align-self: center;
  margin-top: 0.5rem;
  background: var(--basis--primary-color_farbe-2, #c9a96e);
  color: var(--basis--secondary-color_farbe-2, #fff) !important;
  border: none;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
}

/* =========================================================
 * Automatische Silbentrennung für lange Wörter im Deutschen.
 * <html lang="de"> ist gesetzt → Browser trennt nach DE-Regeln.
 * Greift auf alle Headings + RichText-Body — verhindert dass
 * Wörter wie "Handwerksqualität" über den Container hinauslaufen.
 * Für H1-Headings besonders wichtig, weil die meist groß rendern.
 * ========================================================= */
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h2-15,
.heading-style-h3-tab, .heading-style-h5-6,
.text-rich-text, .w-richtext {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* =========================================================
 * Cookie-Banner — 1:1 Vlow-Design.
 * Full-width bar am unteren Viewport-Rand mit Tenant-Primary-BG
 * (color-scheme-1), weißem Text, weißen outline-Buttons.
 * Render via Portal in document.body, nicht in CSS-Cascade gefangen.
 * ========================================================= */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9998;
  background: var(--color-variables--color-scheme-1-bg, #b5a38f);
  color: var(--color-variables--color-scheme-1-text, #fff);
  padding: 1.5rem 2rem;
  pointer-events: auto;
  animation: cookie-banner-slide 350ms ease;
  font-family: inherit;
}
.cookie-banner__panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 84rem;
  margin-left: auto;
  margin-right: auto;
}
.cookie-banner__text {
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.5;
}
.cookie-banner__text h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: inherit;
}
.cookie-banner__text p {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: inherit;
}
.cookie-banner__text p:last-child { margin-bottom: 0; }
.cookie-banner__text a {
  color: inherit;
  text-decoration: underline;
}
.cookie-banner__scroll-hint {
  display: none; /* Nur auf Mobile sichtbar — siehe Media-Query */
  font-size: 0.85rem;
  font-weight: 700;
  color: inherit;
  margin-top: 0.5rem;
}

/* Buttons — outlined-white auf primary-bg, uppercase. */
.cookie-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: none;
  align-items: stretch;
}
.cookie-banner__btn {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-variables--bright-button-bg, #fff);
  color: var(--color-variables--bright-button-bg, #fff);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s, opacity 0.2s;
}
.cookie-banner__btn:hover {
  filter: brightness(1.1);
}
/* DSGVO-Best-Practice + Vlow-Vorlage: alle drei Optionen gleich gestaltet,
   keine visuelle Hierarchie zwischen Akzeptieren/Ablehnen/Anpassen. Kein
   Dark-Pattern. */

/* Customize-Mode — Kategorien-Toggles. */
.cookie-banner__categories {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding: 0.75rem 0;
  margin: 0.75rem 0;
  opacity: 0.95;
}
.cookie-banner__category {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
}
.cookie-banner__category.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cookie-banner__category input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-variables--bright-button-bg, #fff);
}
.cookie-banner__category strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: inherit;
}
.cookie-banner__category span {
  display: block;
  font-size: 0.78rem;
  color: inherit;
  opacity: 0.85;
  margin-top: 0.1rem;
  line-height: 1.45;
}

@keyframes cookie-banner-slide {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
}

/* Mobile: Text oben (scrollbar bei zu langem Text), Buttons darunter
   horizontal nebeneinander. 1:1 Vlow-Verhalten. */
@media (max-width: 991px) {
  .cookie-banner {
    padding: 1.25rem 1.5rem;
  }
  .cookie-banner__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .cookie-banner__text {
    max-height: 100px;
    overflow-y: auto;
    padding-right: 0.5rem;
    scrollbar-width: thin;
  }
  .cookie-banner__text::-webkit-scrollbar { width: 4px; }
  .cookie-banner__text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
  }
  .cookie-banner__scroll-hint {
    display: inline-block;
  }
  .cookie-banner__actions {
    flex-direction: column;
    width: 100%;
    margin-top: 1rem;
    justify-content: stretch;
    gap: 0.6rem;
  }
  .cookie-banner__btn {
    width: 100%;
    padding: 0.6rem 1rem;
  }
}

/* =========================================================
 * Mobile Floating-Button — Sticky „Exposé anfordern" am unteren
 * Viewport-Rand auf Projekt- und Wohneinheit-Detailseiten.
 *
 * Desktop (>767px): komplett versteckt.
 * Mobile (≤767px): fixed unten, slide-In/Out via translateY +
 * is-hidden-Modifier. Default sichtbar → wird per IntersectionObserver
 * versteckt sobald Hero oder CTA-Section im Viewport ist.
 * ========================================================= */
.wrapper-mobile-floating-button.styling-wrapper-mobile-floating-button {
  display: none;
}

@media (max-width: 767px) {
  .wrapper-mobile-floating-button.styling-wrapper-mobile-floating-button {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.65));
    transform: translateY(0);
    transition: transform 350ms ease;
    will-change: transform;
  }
  .wrapper-mobile-floating-button.styling-wrapper-mobile-floating-button.is-hidden {
    transform: translateY(120%);
    pointer-events: none;
  }
  .wrapper-mobile-floating-button.styling-wrapper-mobile-floating-button .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wrapper-mobile-floating-button.styling-wrapper-mobile-floating-button {
    transition: none;
  }
}

/* =========================================================
 * CardPlusColumn — Mobile-Fix
 *
 * Auf kleinen Screens ist .project_wrapper_right_col.animated in site.css
 * auf position:absolute (bottom-right) gesetzt. Das nimmt das Element aus
 * dem Flex-Flow → beim Expand (11rem) überlagert der Text den Karten-Titel.
 * Fix: position zurück auf static setzen, damit das Element wieder im Flex-
 * Flow ist. Die linke Spalte bekommt min-width:0 damit sie beim Expand
 * komprimiert wird (Text truncated) statt überschrieben.
 * ========================================================= */
@media screen and (max-width: 767px) {
  /* In-flow statt absolute → der Expand schiebt den Titel nach links statt
     ihn zu überlagern. */
  .project_wrapper_right_col.animated {
    position: static !important;
    flex-shrink: 0;
  }
  /* Kompaktere Größen: Expanded-Breite, Wrapper + Text-SVG verkleinert. */
  .project_wrapper_right_col.animated.is-expanded {
    width: 7rem;
  }
  .project_wrapper_right_col .wrapper-plus-mit-hinweis {
    width: 7rem;
    grid-column-gap: 0.4rem;
    grid-row-gap: 0.4rem;
  }
  .project_wrapper_right_col .text-klicken-mehr-infos-2 {
    width: 4rem;
  }
  /* Titel-Spalte kann komprimiert werden. */
  .project_title_wrapper_left_col {
    min-width: 0;
    overflow: hidden;
  }
  .project_title_wrapper_left_col .heading-style-h5,
  .project_title_wrapper_left_col h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}