/* ==========================================================================
   IMMO.EXPERT — Immo Expert GmbH, Zeltingen-Rachtig
   Design-System 1:1 nach Vorlage doerfert-immobilien.de
   Farbwerte, Section-Spacing und Animations-Timings aus dem Original übernommen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — lokal gehostet (DSGVO: keine Requests an Google-Server)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens — Farbschema 1:1 aus doerfert-immobilien.de ausgelesen
   -------------------------------------------------------------------------- */
:root {
  /* Farben */
  --gold:        #E0AB38;   /* Akzentfarbe (Original: rgb(224,171,56)) */
  --gold-dark:   #C08F26;   /* Hover-Abstufung */
  --gold-ink:    #886416;   /* Gold fuer kleine Schrift auf hellem Grund:
                               gleicher Farbton, abgedunkelt bis 5,4:1 —
                               das helle Gold traegt dort nur 2,1:1 */
  --gold-soft:   rgba(224, 171, 56, .12);
  --black:       #000000;
  --ink:         #0A0E18;   /* Footer / dunkle Flächen (rgb(10,14,24)) */
  --dark:        #2E3033;   /* Sekundäre Dunkelfläche (rgb(46,48,51)) */
  --gray:        #595959;   /* Fließtext (rgb(89,89,89)) */
  --slate:       #5B6172;   /* Meta-Text (rgb(91,97,114)) */
  --line:        #E9EBEF;   /* Trennlinien / helle Flächen (rgb(233,235,239)) */
  --off:         #F2F5F9;   /* Off-White Sektionen — sichtbar vom Weiss abgesetzt */
  --white:       #FFFFFF;
  --overlay:     rgba(0, 0, 0, .62);  /* Hero-Overlay wie im Original */

  /* Section-Spacing — Werte 1:1 aus der :root des Originals */
  --s-desktop: 76px;
  --s-laptop:  64px;
  --s-tablet:  44px;
  --s-mobile:  32px;
  --section-y: var(--s-desktop);

  /* Layout */
  --content:   800px;   /* wp content-size */
  --wide:     1148px;   /* 1100px Inhalt + 2×24px Padding = Inhaltsbreite der
                           Vorlage; bei 1440px Fenster beginnt der Text wie dort
                           exakt bei x=170 */
  --gutter:     24px;   /* wp block-gap */

  /* Typo */
  --f-head: 'Jost', 'Helvetica Neue', Helvetica, sans-serif;
  --f-body: 'Montserrat', Helvetica, Arial, sans-serif;

  /* Animations-Timings 1:1 aus dem Original */
  --t-btn:    background .3s, border .3s, border-radius .3s, box-shadow .3s, transform .4s;
  --t-link:   color .3s;
  --t-base:   .35s;
  --ease:     cubic-bezier(.25, .46, .45, .94);
  /* Scroll-Bewegung: exakt die Kurve der Vorlage. Sie startet sehr träge und
     läuft mit minimalem Überschwingen aus — dadurch folgt das Bild dem Scroll
     weich nach, statt starr daran zu kleben. */
  --t-scroll: transform 1s cubic-bezier(0, .33, .07, 1.03);

  --header-h: 93px;   /* Höhe der Vorlage */
}

/* --------------------------------------------------------------------------
   3. Reset & Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--gray);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  text-wrap: balance;
  font-family: var(--f-head);
  color: var(--black);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .45em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 200; }
h2 { font-size: clamp(1.7rem, 2.5vw, 2.35rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 400; }
h4 { font-size: 1.15rem; font-weight: 500; }

p { margin: 0 0 1.4em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: var(--t-link); }
a:hover { color: var(--gold); }

ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--black);
  color: var(--white);
  padding: 14px 22px;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Layout-Helfer
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: var(--content); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--dark  { background: var(--ink);  color: rgba(255,255,255,.84); }
.section--deep  { background: var(--dark); color: rgba(255,255,255,.84); }
.section--light { background: var(--line); }
.section--off   { background: var(--off); }

.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 {
  color: var(--white);
}

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Eyebrow — kleine goldene Label-Zeile über den Überschriften */
.eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .65rem;
  line-height: 1.6;
}
/* Auf dunklem Grund traegt Gold 9,2:1 — dort bleibt es die Akzentfarbe. */
.section--dark .eyebrow,
.section--deep .eyebrow,
.parallax__content .eyebrow,
.feature-band .eyebrow,
.hero .eyebrow,
.tourhero .eyebrow,
.pagehero .eyebrow { color: var(--gold); }

.lead {
  font-size: 1.06rem;
  line-height: 1.72;
}

.rule {
  width: 54px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.5rem;
}
.rule--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Buttons — rechteckig, Timing 1:1 aus dem Original
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  /* Maße 1:1 aus der Vorlage: Padding 10/30px, 15px, Gewicht 400, ungesperrt,
     2px Rahmen — deutlich schlanker als übliche CTA-Buttons. */
  padding: 10px 30px;        /* ergibt 39px Höhe wie in der Vorlage;
                                auf Mobil greift weiter unten mehr Padding */
  border: 2px solid transparent;
  border-radius: 10px;       /* Radius der Vorlage */
  background: var(--black);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  line-height: 1;            /* ergibt exakt die 39px Buttonhöhe der Vorlage */
  cursor: pointer;
  transition: var(--t-btn), color .3s;
  text-align: center;
}
.btn:hover {
  background: var(--gold);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--black);
}
.btn--ghost:hover { background: var(--black); border-color: var(--black); color: var(--white); }

/* Weiße Variante für den Hero: heller Grund, dunkle Schrift. Beim Hover
   leert sich die Fläche und nur der weiße Rahmen bleibt — bleibt über dem
   Video ruhig und lesbar, ohne einen Farbakzent einzuführen. */
.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.btn--light:hover {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
}
.btn--outline-light:hover { background: var(--white); border-color: var(--white); color: var(--black); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;      /* Abstand der Vorlage */
}
.btn-row--center { justify-content: center; }

/* Textlink mit goldenem Pfeil */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--black);
}
.arrow-link::after {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  transition: width var(--t-base) var(--ease);
}
.arrow-link:hover { color: var(--gold); }
.arrow-link:hover::after { width: 40px; }

/* --------------------------------------------------------------------------
   6. Header / Navigation
   -------------------------------------------------------------------------- */
/* Wie in der Vorlage: dauerhaft fixiert und vollständig transparent — der
   Header ändert dort beim Scrollen weder Höhe noch Hintergrund noch Farbe.
   Werte 1:1 übernommen: 93px hoch, 15px Innenabstand, z-index 999. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding-block: 15px;
  background: transparent;
  transition: background .35s, box-shadow .35s, backdrop-filter .35s,
              height .4s var(--ease);
}

/* Über dem Hero exakt wie die Vorlage: transparent, weiße Schrift, 93px.
   Sobald darunter helle Sektionen liegen, wechselt der Header auf Weiß —
   die Vorlage lässt ihn dort transparent, wodurch die weiße Navigation auf
   weißem Grund verschwindet. Alle Maße und Schriftwerte bleiben unverändert,
   nur Hintergrund, Schriftfarbe und Höhe wechseln. */
/* Beim Scrollen bleibt der Header transparent, legt aber einen dunklen,
   leicht weichgezeichneten Schleier darunter. Logo und Navigation bleiben
   dadurch durchgehend weiß — der Inhalt schimmert weiter durch. */
.header.is-stuck {
  height: 74px;
  background: rgba(10, 14, 24, .82);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .09);
}
.header.is-stuck .brand img { height: 46px; }   /* Logo bleibt weiß */

/* Läuft ein Rundgang, ist der Header dauerhaft deckend — unabhängig vom
   Scrollstand. Der Anbieter setzt sein Logo links oben ins eingebettete
   Fenster, genau dorthin, wo unseres steht. Mit einer deckenden Leiste
   verschwindet es beim Scrollen dahinter, statt sich damit zu überlagern. */
body.tour-laeuft .header {
  background: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .09);
}

/* Anders als der Inhalt läuft der Header in der Vorlage über die volle
   Fensterbreite (Logo dort bei x=15) — dadurch hat die Navigation genug Platz. */
.header__inner {
  width: 100%;
  max-width: none;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Logohöhe 63px wie in der Vorlage; das Logo steht dort immer auf dunklem
   Grund und wird deshalb durchgehend weiß ausgegeben. */
.brand img {
  height: 63px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: height .4s var(--ease), filter .4s var(--ease);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 25px; }  /* Abstand der Vorlage */
.nav__item { position: relative; }

/* Vorlage: Montserrat 14px / 500, weiß, keine Versalien, keine Laufweite */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: normal;
  line-height: 1.4;      /* nicht die 1.8 des Fließtexts erben */
  padding-block: 8px;
  transition: color .3s;
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--gold); }

.nav__link[aria-expanded]::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s;
}
.nav__item.is-open > .nav__link::after { transform: rotate(-135deg) translateY(-2px); }

/* Dropdown */
.nav__sub {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 248px;
  background: var(--white);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__item:hover > .nav__sub,
.nav__item.is-open > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Vorlage: Untermenü-Einträge 13px / 500 in #595959 */
.nav__sub a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
}
.nav__sub a:hover { color: var(--gold); background: var(--off); }
.nav__sub .count { color: var(--slate); font-size: .74rem; opacity: .7; }

/* Vorlage: Telefonnummer in Gold, 16px / 400, ohne Sperrung */
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--gold);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  white-space: nowrap;
}
.nav__phone:hover { color: var(--gold-dark); }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 120;
}
.burger span {
  position: absolute;
  left: 10px;
  width: 24px; height: 1.5px;
  background: var(--white);
  transition: transform .35s var(--ease), opacity .25s, background .3s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
body.nav-open .burger span { background: var(--black); }
body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero — Vollbild-Slideshow mit Ken-Burns, Overlay & fadeInUp-Text
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* nicht clippen — das Partner-Siegel ragt bewusst unten heraus */
  overflow: visible;
  background: var(--black);
}
.hero--compact { min-height: 62vh; }

/* Der Hintergrund clippt selbst, damit Video und Overlay nicht überstehen */
.hero__bg { position: absolute; inset: 0; overflow: hidden; }

/* Hintergrundvideo — ohne Zusatzeffekt, die Vorlage animiert den Hero-Hintergrund
   ebenfalls nicht. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bild-Slideshow als Fallback, falls kein Video hinterlegt ist */
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
/* Overlay: flacher Schwarzton wie in der Vorlage, zusätzlich ein vertikaler
   Verlauf — das Drohnenvideo ist deutlich heller als ein Sonnenuntergangsbild
   und braucht mehr Abdunklung, damit der weiße Text sicher lesbar bleibt. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Deutlich heller als zuvor — das Moseltal soll sonnendurchflutet wirken.
     Die Abdunklung sitzt nur noch dort, wo sie gebraucht wird: oben hinter der
     Navigation, unten hinter den Buttons, und ein weicher Kern hinter der
     Headline. Die Bildmitte bleibt weitgehend offen. */
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%,
      rgba(0, 0, 0, .38) 0%,
      rgba(0, 0, 0, .10) 70%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, .52) 0%,
      rgba(0, 0, 0, .10) 30%,
      rgba(0, 0, 0, .10) 66%,
      rgba(0, 0, 0, .48) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  padding: calc(var(--header-h) + 40px) 24px 90px;
  color: var(--white);
}
.hero__inner .eyebrow { color: var(--gold); }

/* Werte der Vorlage: 72px, Zeilenhöhe 1,2, ohne Sperrung und ohne Schatten.
   Gewicht 300 statt 400, weil Jost kompakter baut als das freight-neo-pro
   des Originals und bei 400 zu massiv wirkt. */
.hero h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 5vw, 72px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: normal;
  /* Weicher Schatten, damit die Schrift auch über hellen Bildstellen trägt —
     nötig, seit das Overlay bewusst heller ist. */
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
  /* Schmales Satzmaß wie in der Vorlage (dort 502px bei 72px Schrift) —
     die Headline bricht dadurch in zwei kurze Zeilen statt breit zu laufen. */
  max-width: 7.2em;
  margin: 0 auto 1.7rem;
}

/* Slider-Dots (nur für den Bild-Fallback) */
.hero__dots {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero__dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .3s, transform .3s, border-color .3s;
}
.hero__dots button.is-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.3);
}

/* ---------------------------------------------------------------------------
   Partner-Siegel rechts unten im Hero — Platzierung wie in der Vorlage
   (dort absolut positioniert mit right:0 an der Hero-Unterkante).
   --------------------------------------------------------------------------- */
/* DEKRA-Siegel, vollständig innerhalb des Heros rechts unten.
   Hochformat — deshalb wird über die Höhe skaliert, nicht über die Breite. */
.hero__badge {
  position: absolute;
  right: 24px;
  bottom: 30px;
  z-index: 3;
  display: block;
  height: 152px;
  transition-duration: .3s;
  transition-property: transform;
}
.hero__badge:hover { transform: scale(1.06); }
.hero__badge img { height: 100%; width: auto; }

/* Der Überhang schrumpft mit dem Fenster mit — sonst reicht das Siegel in die
   Galerie hinein, sobald der Sektionsabstand kleiner wird. */
@media (max-width: 1200px) {
  .hero__badge { height: 126px; bottom: 26px; }
}
@media (max-width: 900px) {
  .hero__badge { height: 104px; bottom: 22px; }
}
@media (max-width: 600px) {
  .hero__badge { height: 84px; bottom: 18px; right: 16px; }
}

/* Seiten-Hero (Unterseiten) */
.pagehero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 56vh;
  background: var(--ink) center/cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
.pagehero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Oben kräftiger abgedunkelt: der Header ist dauerhaft transparent, seine
     weiße Navigation muss auch über hellen Motiven lesbar bleiben. */
  background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.44) 52%, rgba(0,0,0,.66) 100%);
}
.pagehero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding: 0 24px 62px;
}
.pagehero h1 { color: var(--white); margin-bottom: .2em; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  margin-bottom: 1.3rem;
}
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb li + li::before { content: '/'; margin-right: .6em; opacity: .5; }
.breadcrumb li { display: inline-flex; }

/* --------------------------------------------------------------------------
   8. Grid-Systeme
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--gap-lg { gap: 46px; }

/* Spaltenverhältnis der Vorlage: Text 420px, Medien 600px, Abstand 80px.
   Bewusst asymmetrisch — der Text läuft schmaler, die Bilder bekommen Raum. */
.split {
  display: grid;
  grid-template-columns: 8fr 9fr;
  gap: 64px;
  align-items: center;
}
.split--media-right .split__media { order: 2; }

/* --------------------------------------------------------------------------
   9. Medien mit Zoom-Reveal (Original: transition filter .8s, transform .8s)
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--line);
}
.media img { width: 100%; display: block; }
.media--tall   { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
.media--wide   { aspect-ratio: 16 / 10; }
.media--tall img, .media--square img, .media--wide img {
  height: 100%;
  object-fit: cover;
}

/* Gold-Rahmen-Akzent wie im Original */
.media--framed { position: relative; }
.media--framed::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, .38);
  pointer-events: none;
}

/* Hover-Grow — Werte 1:1 aus der Vorlage (.elementor-animation-grow):
   transition-duration .3s, transition-property transform, :hover scale(1.1) */
.grow img {
  transition-duration: .3s;
  transition-property: transform;
}
.grow:hover img { transform: scale(1.1); }

/* --------------------------------------------------------------------------
   10. Scroll-Animationen — Timings 1:1 aus dem Original
   -------------------------------------------------------------------------- */

/* Einblendung exakt wie in der Vorlage: animate.css-„fadeInUp" — das Element
   kommt um seine eigene Höhe von unten herein, 0,75s, ease.
   Die Vorlage animiert bewusst nur sehr wenige Elemente (auf der Startseite
   genau drei: Headline und die beiden Hero-Buttons). Alles andere erscheint
   ohne Effekt — deshalb wird [data-reveal] hier sparsam gesetzt. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: none; }
}

/* Vor dem Eintritt unsichtbar (entspricht .elementor-invisible) */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}
[data-reveal].is-in {
  animation: fadeInUp .75s ease both;
  animation-delay: var(--delay, 0ms);
}

/* Sanftere Variante für Inhaltsblöcke: gleiche Dauer, aber nur ein kurzer Weg
   statt der vollen Elementhöhe — dadurch wirkt die Seite ruhig statt hektisch. */
@keyframes fadeInUpSoft {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
[data-reveal="soft"].is-in {
  animation: fadeInUpSoft .8s var(--ease) both;
  animation-delay: var(--delay, 0ms);
}

/* ---------------------------------------------------------------------------
   Bildergalerie mit scrollgekoppeltem Versatz — der Effekt aus der Vorlage
   direkt unter dem Hero: zwei Spalten nebeneinander, die beim Scrollen
   unterschiedlich schnell mitwandern (dort Speed 2 und 4) und dadurch
   leicht gegeneinander verschoben werden.
   --------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;              /* Abstand wie in der Vorlage */
  align-items: start;
}
.gallery__col {
  display: grid;
  gap: 20px;
  transition: var(--t-scroll);
}
/* Zweite Spalte startet etwas höher — in der Vorlage sind es 10px Versatz.
   Klein gehalten, weil der Versatz vom Platz zehrt, den die Spalte beim
   Hochwandern braucht. */
.gallery__col:nth-child(2) { margin-top: -10px; }

/* Zusätzlicher Innenabstand, damit die Spalten bei kräftiger Scroll-Bewegung
   (bis zu 88px) nicht in die Nachbarsektionen ragen. */
.section--gallery {
  padding-top: calc(var(--section-y) + 60px);
  padding-bottom: calc(var(--section-y) + 60px);
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  background: var(--line);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: .3s;
  transition-property: transform;
}
.gallery figure:hover img { transform: scale(1.1); }

.gallery figure:nth-child(odd)  { aspect-ratio: 4 / 5; }
.gallery figure:nth-child(even) { aspect-ratio: 1 / 1; }

@media (max-width: 600px) {
  .gallery { gap: 14px; }
  .gallery__col { gap: 14px; }
  .gallery__col:nth-child(2) { margin-top: 0; }
  /* Auf kleinen Displays keine Scroll-Verschiebung — dort stört sie nur */
  .gallery__col { transform: none !important; }
}

/* Parallax-Container (Vorlage: Elementor Motion-Effects, translateY) */
.parallax {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.parallax__bg {
  position: absolute;
  inset: -6% 0;   /* Reserve für den Bewegungsweg, damit keine Kante auftaucht */
  background-size: cover;
  background-position: center;
  transition: var(--t-scroll);
}
/* Abdunklung kräftig genug, damit weißer Text auch über hellen Motiven trägt */
.parallax__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .30) 100%),
    rgba(0, 0, 0, .88);
}
.parallax__content { position: relative; z-index: 2; }
.parallax__content p { color: rgba(255, 255, 255, .86); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; animation: none; }
}

/* --------------------------------------------------------------------------
   10b. Wege — anklickbare Einstiegskacheln auf der Startseite
   Ersetzen den Fliesstext ueber dem Foto: der Besucher sieht auf einem Blick,
   was es gibt, und jede Kachel ist selbst der Weg dorthin.
   -------------------------------------------------------------------------- */
.wege {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.weg {
  display: flex;
  flex-direction: column;
  padding: 32px 26px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.weg:hover,
.weg:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .08);
}
.weg__icon {
  display: block;
  width: 40px; height: 40px;
  margin-bottom: 20px;
  color: var(--gold-ink);
}
.weg__icon svg { width: 100%; height: 100%; stroke-width: 1.1; }
.weg h3 {
  font-size: 1.14rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: .45rem;
}
.weg p {
  font-size: .89rem;
  margin: 0 0 1.5rem;
  color: var(--gray);
}
/* Der Verweis sitzt unten, damit die vier Kacheln unten auf einer Linie enden */
.weg__mehr {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: auto;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.weg__mehr svg {
  width: 15px; height: 15px;
  transition: transform .3s var(--ease);
}
.weg:hover .weg__mehr svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .wege { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wege { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   11. Leistungssäulen / Feature-Karten
   -------------------------------------------------------------------------- */
.pillar {
  position: relative;
  background: var(--white);
  padding: 46px 38px 42px;
  height: 100%;
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}
.pillar:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .09);
  border-color: transparent;
}
.pillar::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.pillar:hover::before { transform: scaleX(1); }

.pillar__icon {
  width: 52px; height: 52px;
  margin-bottom: 26px;
  color: var(--gold);
}
.pillar__icon svg { width: 100%; height: 100%; stroke-width: 1; }
.pillar h3 { margin-bottom: .55em; }
.pillar p  { font-size: .94rem; margin-bottom: 0; }

.pillar__num {
  font-family: var(--f-head);
  font-size: .82rem;
  letter-spacing: .16em;
  color: var(--gold-ink);
  display: block;
  margin-bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
   12. Zahlen-Counter
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; padding: 20px 12px; }
.stat__num {
  font-family: var(--f-head);
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  font-weight: 200;
  line-height: 1;
  color: var(--gold);
  display: block;
  margin-bottom: .35em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  line-height: 1.7;
}
.section--light .stat__label { color: var(--slate); }

/* --------------------------------------------------------------------------
   13. Immobilien-Karten
   -------------------------------------------------------------------------- */
.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.prop {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.prop:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(0, 0, 0, .12); }

.prop__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}
.prop__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.prop:hover .prop__media img { transform: scale(1.07); }

.prop__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  background: var(--gold);
  color: var(--black);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 14px;
}
.prop__badge--sold { background: var(--black); color: var(--white); }

.prop__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 26px 26px;
}
.prop__loc {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .9rem;
}
.prop__title {
  font-family: var(--f-head);
  font-size: 1.18rem;
  font-weight: 400;
  color: var(--black);
  line-height: 1.35;
  margin: 0 0 1.1rem;
  /* Platz fuer zwei Zeilen reservieren, damit kurze Titel die darunter
     liegenden Angaben nicht nach oben ziehen */
  min-height: calc(2 * 1.35em);
}
.prop__nr { margin-top: auto; }
.prop__price {
  font-family: var(--f-head);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--black);
  margin-bottom: 1.2rem;
}
.prop__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--slate);
}
.prop__facts span { display: inline-flex; align-items: center; gap: .45em; }
.prop__facts svg { width: 15px; height: 15px; color: var(--gold); flex: 0 0 auto; }
.prop__nr { font-size: .78rem; color: var(--gray); margin-bottom: .6rem; }

/* --------------------------------------------------------------------------
   14. Suchfilter
   -------------------------------------------------------------------------- */
.filter {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .07);
  padding: 34px 32px;
}
.filter__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}
.field input,
.field select,
.field textarea {
  font-family: var(--f-body);
  font-size: .92rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23595959' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px;
  padding-right: 40px;
}

/* --------------------------------------------------------------------------
   15. Formulare
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form__row--3 { grid-template-columns: 90px 1fr 1fr; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .86rem;
  line-height: 1.7;
}
.check input {
  width: 18px; height: 18px;
  margin-top: 4px;
  flex: 0 0 auto;
  accent-color: var(--gold);
}
.check a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.check a:hover { color: var(--gold); }

.form__note { font-size: .78rem; color: var(--slate); }
.req { color: var(--gold); }

.form__status {
  padding: 16px 20px;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  font-size: .9rem;
  color: var(--black);
}

/* --------------------------------------------------------------------------
   16. Zitat / Philosophie
   -------------------------------------------------------------------------- */
.quote {
  font-family: var(--f-head);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 200;
  line-height: 1.35;
  color: var(--white);
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.quote cite {
  display: block;
  margin-top: 2rem;
  font-family: var(--f-body);
  font-size: .78rem;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   17. Kontakt-/Personen-Karte
   -------------------------------------------------------------------------- */
.person {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 48px;
  align-items: start;
}
.person__badge { text-align: center; }

/* Quadratisches Porträt mit Business-Hintergrund, exakt so hoch wie die
   Zertifikatssiegel daneben (124px) — Kundenwunsch. */
.person__photo {
  aspect-ratio: 1 / 1;
  background: var(--white);
  overflow: hidden;
  margin-bottom: 22px;
}
.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.person__name {
  font-family: var(--f-head);
  font-size: 1.15rem;
  color: var(--black);
  margin-bottom: .2rem;
}
.person__role {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Vita: Portraet links, Text rechts. Beide oben buendig — vorher hing das
   Portraet mitten in der Siegelreihe und die Zeile wirkte zusammengewuerfelt. */
.person.person--einspaltig { grid-template-columns: 1fr; }

.vita {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 48px;
  align-items: start;
}
.vita__portrait { margin: 0; }
.vita__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}
.vita__portrait figcaption {
  margin-top: 14px;
  font-family: var(--f-head);
  font-size: 1.05rem;
  color: var(--black);
}
.vita__portrait figcaption span {
  display: block;
  margin-top: 4px;
  font-family: var(--f-body);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}
.vita__text > h3:first-child { margin-top: -.25em; }

/* Zertifizierungs-Siegel — gleich grosse Felder statt einer Reihe aus drei
   verschiedenen Formaten. Jedes Bild sitzt in einem Kaestchen fester Hoehe,
   dadurch stehen Ober- und Unterkante der Reihe sauber auf einer Linie. */
.seals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 46px 0 2.4rem;
  border: 1px solid var(--line);
  background: var(--white);
}
.seal {
  margin: 0;
  padding: 28px 22px;
  text-align: center;
}
.seal + .seal { border-left: 1px solid var(--line); }
.seal__bild {
  display: grid;
  place-items: center;
  height: 96px;
  margin-bottom: 18px;
}
.seal__bild img {
  max-height: 96px;
  max-width: 100%;
  width: auto;
  height: auto;
  transition: transform .3s;
}
/* Querformatige Wortmarke niedriger halten, sonst dominiert sie die Reihe */
.seal--breit .seal__bild img { max-height: 62px; }
.seal:hover .seal__bild img { transform: scale(1.05); }
.seal figcaption {
  font-family: var(--f-head);
  font-size: .98rem;
  color: var(--black);
  line-height: 1.35;
}
.seal figcaption span {
  display: block;
  margin-top: 7px;
  font-family: var(--f-body);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--slate);
}

@media (max-width: 860px) {
  .vita { grid-template-columns: 1fr; gap: 26px; }
  .vita__portrait { max-width: 200px; }
  .seals { grid-template-columns: 1fr; }
  .seal + .seal { border-left: 0; border-top: 1px solid var(--line); }
}

.creds { display: grid; gap: 12px; margin: 0 0 2rem; }
.creds li {
  position: relative;
  padding-left: 26px;
  font-size: .92rem;
}
/* Wenn die Merkmalsliste Verweise enthaelt (Fehlerseite), sollen sie auch wie
   Verweise aussehen — sonst klickt niemand darauf. */
.creds a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: var(--line);
  transition: color .25s, text-decoration-color .25s;
}
.creds a:hover { color: var(--gold); text-decoration-color: var(--gold); }

.creds li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 12px; height: 1.5px;
  background: var(--gold);
}

/* Kontakt-Datenliste */
.contact-list { display: grid; gap: 22px; }
.contact-list__item { display: flex; gap: 18px; align-items: flex-start; }
.contact-list__icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--gold);
}
.contact-list__icon svg { width: 18px; height: 18px; }
.contact-list__label {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: .2rem;
}
.contact-list__value { color: var(--black); font-size: 1rem; }
.contact-list__value a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   18. CTA-Band
   -------------------------------------------------------------------------- */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  background: var(--gold);
  color: var(--black);
  padding: 52px 56px;
}
.cta-band h2 { margin: 0; color: var(--black); font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.cta-band p  { margin: .6rem 0 0; color: rgba(0, 0, 0, .72); }
.cta-band .btn { background: var(--black); color: var(--white); }
.cta-band .btn:hover { background: var(--white); color: var(--black); }

/* --------------------------------------------------------------------------
   19. Portal-Logos
   -------------------------------------------------------------------------- */
.portals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 56px;
}
.portal {
  font-family: var(--f-head);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--slate);
  opacity: .55;
  filter: grayscale(1);
  transition: opacity .35s, color .35s, transform .35s var(--ease);
}
.portal:hover { opacity: 1; color: var(--black); transform: translateY(-3px); }


/* ---------------------------------------------------------------------------
   Leistungs-Band — Darstellung wie auf der bisherigen immo.expert-Seite:
   vollflächiges Foto, dunkel überlagert, darauf große Icons und weißer Text.
   Deutlich präsenter als weiße Textkarten.
   --------------------------------------------------------------------------- */
.feature-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, .82);
}
.feature-band__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Bild bleibt beim Scrollen stehen, der Inhalt zieht darüber hinweg.
     `fixed` bezieht sich auf das Fenster — deshalb kein Bewegungsspielraum
     über inset nötig und keine Transform-Animation. */
  background-attachment: fixed;
}

/* Touch-Geräte: iOS Safari setzt background-attachment:fixed nicht korrekt um
   (Ruckeln, falscher Ausschnitt). Dort scrollt das Bild normal mit. */
@media (max-width: 1024px), (hover: none) {
  .feature-band__bg {
    background-attachment: scroll;
    background-position: center;
  }
}
.feature-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10, 14, 24, .90), rgba(10, 14, 24, .94));
}
.feature-band > .container { position: relative; z-index: 2; }
.feature-band h2 { color: var(--white); }

.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  text-align: center;
}
.features--3 { grid-template-columns: repeat(3, 1fr); }

.feature__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 24px;
  color: var(--gold);
}
.feature__icon svg { width: 100%; height: 100%; stroke-width: .9; }

.feature h3 {
  color: var(--white);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 400;
  margin-bottom: .7em;
}
.feature p {
  color: rgba(255, 255, 255, .86);
  font-size: .96rem;
  margin: 0;
}

@media (max-width: 900px) {
  .features, .features--3 { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .feature__icon { width: 56px; height: 56px; margin-bottom: 18px; }
}
@media (max-width: 600px) {
  .features, .features--3 { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   Referenzen — vermittelte Objekte mit Bild und Ort
   --------------------------------------------------------------------------- */
.refs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.ref {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ref:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(0, 0, 0, .12); }

.ref__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}
.ref__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: .3s;
  transition-property: transform;
}
.ref:hover .ref__media img { transform: scale(1.06); }

.ref__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--black);
  color: var(--white);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.ref__body { padding: 22px 22px 24px; }
.ref__ort {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .7rem;
}
.ref__titel {
  font-family: var(--f-head);
  font-size: 1.06rem;
  font-weight: 400;
  color: var(--black);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 900px) { .refs { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 600px) { .refs { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Partnerlogos — echte Logodateien, sonst schlichte Wortmarke
   --------------------------------------------------------------------------- */
.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 56px;
}
.partner {
  display: inline-flex;
  align-items: center;
  height: 52px;
  font-family: var(--f-head);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--slate);
  transition: color .35s, transform .35s var(--ease), filter .35s;
}
.partner img {
  height: 52px;
  width: auto;
  filter: grayscale(.35);
  transition: filter .35s;
}
.partner:hover { color: var(--black); transform: translateY(-3px); }
.partner:hover img { filter: grayscale(0); }

@media (max-width: 600px) {
  .partners { gap: 20px 32px; }
  .partner { height: 40px; font-size: 1rem; }
  .partner img { height: 40px; }
}

/* --------------------------------------------------------------------------
   20. Akkordeon (FAQ / Rechtstexte)
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-head);
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--black);
  transition: color .3s;
}
.acc__btn:hover { color: var(--gold); }
.acc__icon {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  position: relative;
}
.acc__icon::before,
.acc__icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  transition: transform .35s var(--ease);
}
.acc__icon::before { inset: 7px 0 auto 0; height: 1.5px; }
.acc__icon::after  { inset: 0 7px auto 7px; width: 1.5px; height: 16px; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: scaleY(0); }

.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height .4s var(--ease);
}
.acc__inner { padding: 0 0 26px; font-size: .94rem; }
.acc__inner h4 { margin-top: 1.6em; }
.acc__inner h4:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .75);
  padding-block: 82px 0;
  font-size: .9rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 62px;
}
.footer__logo {
  height: 42px;
  width: auto;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.footer h4 {
  color: var(--white);
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.footer a { color: rgba(255, 255, 255, .75); }
.footer a:hover { color: var(--gold); }
.footer__links { display: grid; gap: 12px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem;
  color: rgba(255, 255, 255, .45);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.socials { display: flex; gap: 12px; margin-top: 22px; }
.socials a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: border-color .3s, background .3s, color .3s, transform .3s var(--ease);
}
.socials a:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--black);
  transform: translateY(-3px);
}
.socials svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   22. Floating Call-Button
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 15px 24px;
  background: var(--gold);
  color: var(--black);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s,
              background .3s, color .3s;
}
.fab.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fab:hover { background: var(--black); color: var(--white); }
.fab svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   23. Cookie-Banner
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  background: var(--white);
  box-shadow: 0 -6px 40px rgba(0, 0, 0, .18);
  padding: 30px 0;
  transform: translateY(100%);
  transition: transform .5s var(--ease);
}
.cookie.is-open { transform: translateY(0); }
.cookie__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;
}
.cookie h4 { margin-bottom: .5rem; color: var(--black); }
.cookie p { font-size: .86rem; margin: 0; }
.cookie .btn-row { flex-wrap: nowrap; }
.cookie .btn { padding: 14px 26px; font-size: .72rem; }

/* Einzugsgebiet-Streifen auf der Startseite */
.gebiet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 34px 38px;
  border: 1px solid var(--line);
  background: var(--off);
}
.gebiet h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: .4rem; }
.gebiet p  { margin: 0; max-width: 560px; font-size: .93rem; }
.gebiet .btn { flex: 0 0 auto; }

@media (max-width: 760px) {
  .gebiet { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}

/* Honigtopf: für Menschen unsichtbar, für einfache Bots verlockend.
   Bewusst nicht display:none — manche Bots ignorieren ausgeblendete Felder. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rundgang als Auftakt der Objektseite.

   Anders als auf der Rundgang-Seite steht der Inhalt hier unten links statt
   mittig — wie bei allen anderen Unterseiten. Ein vierzeiliger Objekttitel,
   zentriert in der Bildmitte, drängt sich sonst in die Navigation und liest
   sich wie ein Plakat statt wie eine Immobilie. */
.tourhero--objekt { height: min(70svh, 660px); min-height: 430px; }

.tourhero--objekt .tourhero__gate {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  /* oben Platz für den Header, damit nichts mit der Navigation kollidiert */
  padding: calc(var(--header-h) + 20px) 24px 48px;
  background: linear-gradient(rgba(6, 8, 15, .30) 0%, rgba(6, 8, 15, .34) 40%, rgba(6, 8, 15, .80) 100%);
}
/* Eine Hülle statt einer Breitenregel auf allen Kindern — sonst zieht sich
   auch der Knopf über die volle Zeile. */
.tourhero--objekt .tourhero__inhalt {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
}
/* Objekttitel kommen aus Propstack und sind oft lang — kleinere Stufe und
   eine harte Breitengrenze halten sie bei zwei bis drei Zeilen. */
.tourhero--objekt .tourhero__gate h1 {
  font-size: clamp(1.4rem, 2.4vw, 2.05rem);
  font-weight: 300;
  line-height: 1.25;
  /* Objekttitel aus Propstack sind oft 80 Zeichen und länger. 34 Zeichen je
     Zeile ergeben zwei bis drei Zeilen — darunter wird es ein Absatz. */
  max-width: 34ch;
  margin: .5rem 0 .4rem;
  text-wrap: balance;
}
.tourhero--objekt .tourhero__gate .tour__meta { color: var(--gold); }
.tourhero--objekt .tourhero__start { margin-top: 1.4rem; }
.tourhero--objekt .tourhero__fine {
  max-width: 42ch;
  margin-top: .9rem;
  font-size: .7rem;
}

@media (max-width: 700px) {
  .tourhero--objekt { height: min(66svh, 540px); min-height: 400px; }
  .tourhero--objekt .tourhero__gate { padding-bottom: 34px; }
  .tourhero--objekt .tourhero__gate h1 { max-width: none; }
}

/* Objektbeschreibung: vier Abschnitte im Akkordeon statt einer Textwand.
   Der erste Abschnitt steht offen — das erledigt die Regel unten, bevor das
   Skript je einen Klick gesehen hat. */
.acc__item.is-offen .acc__panel { height: auto; }

/* Die Beschreibung steht in einem eigenen Kasten. Ohne Rahmen schwimmt sie
   auf der Seite und man sieht nicht, dass die Zeilen zusammengehören. */
.acc--objekt {
  border: 1px solid var(--line);
  background: var(--white);
}
.acc--objekt .acc__item { border-bottom: 1px solid var(--line); }
.acc--objekt .acc__item:last-child { border-bottom: 0; }

/* Der ganze Kopf ist die Schaltfläche, nicht nur der Text: breite Klickfläche,
   sichtbare Reaktion beim Überfahren. */
.acc--objekt .acc__btn {
  padding: 20px 24px;
  transition: color .3s, background .3s;
}
.acc--objekt .acc__btn:hover,
.acc--objekt .acc__btn:focus-visible { background: var(--off); }
.acc--objekt .acc__btn[aria-expanded="true"] { color: var(--gold-ink); }

/* Der offene Abschnitt hebt sich ab */
.acc--objekt .acc__item.is-offen,
.acc--objekt .acc__item:has(.acc__btn[aria-expanded="true"]) { background: var(--off); }

.acc__inhalt { padding: 0 24px 28px; }
.acc__inhalt p { margin-bottom: 1.1em; }
.acc__inhalt h4 {
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 1.9em 0 .8em;
}
.acc__inhalt h4:first-child { margin-top: 0; }

/* Aufzählungen: zweispaltig, wenn genug Platz ist — 40 Merkmale untereinander
   sind sonst eine Kolonne ohne Ende. */
.objekt__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0 36px;
  margin: 0 0 1.4em;
}
.objekt__liste li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: .93rem;
  line-height: 1.55;
}
.objekt__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: .78em;
  width: 8px; height: 1.5px;
  background: var(--gold);
}

/* Rechtliche Hinweise leiser setzen — sie gehören dazu, aber nicht nach vorn */
.objekt__kleingedruckt p { font-size: .84rem; color: var(--slate); }

/* Der Steuerungshinweis liegt in der Bildmitte — genau dort, wo Matterport
   seinen eigenen Abspielknopf zeigt. Zwei Bedienelemente übereinander. Auf den
   Objektseiten rückt er deshalb nach unten rechts. */
.tourhero--objekt .tourhero__guard::after {
  left: auto; top: auto;
  right: 20px; bottom: 20px;
  transform: none;
  font-size: .68rem;
}

/* --------------------------------------------------------------------------
   23a. Objektdetailseite
   -------------------------------------------------------------------------- */
.objekt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: start;
  margin-top: 30px;
}

/* Die Bildspalte bleibt stehen, während man rechts die Daten liest. Sonst
   entsteht unter dem Bild eine leere Fläche von über tausend Pixeln. */
.objekt__medien { position: sticky; top: calc(var(--header-h) + 20px); }

.objekt__bild {
  position: relative;
  overflow: hidden;
  background: var(--line);
}
.objekt__bild img { display: block; width: 100%; height: auto; }

/* Miniaturen: füllen die Spalte und liegen da, wo man sie sucht */
.objekt__mini-reihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.objekt__mini {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  opacity: .62;
  transition: opacity .3s var(--ease), outline-color .3s;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.objekt__mini img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.objekt__mini:hover { opacity: 1; }
.objekt__mini.is-aktiv { opacity: 1; outline-color: var(--gold); }
.objekt__mini:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Hinweis auf den Rundgang, direkt unter den Bildern */
.objekt__tourhinweis {
  display: flex;
  align-items: baseline;
  gap: .7em;
  margin-top: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: var(--off);
  font-size: .9rem;
  color: var(--gray);
}
.objekt__tourhinweis span {
  font-family: var(--f-head);
  font-size: 1rem;
  color: var(--black);
}
.objekt__tourhinweis:hover {
  border-color: var(--gold);
  color: var(--gold-ink);
}

.objekt__text h1 { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.objekt__preis {
  font-family: var(--f-head);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 300;
  color: var(--black);
  margin: 0 0 1.6rem;
}

/* Dreizehn Angaben untereinander ergeben einen Turm. Zweispaltig gelesen
   passen sie auf einen Blick. */
.objekt__text .fakten {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.objekt__text .fakten > div { border-top: 1px solid var(--line); }
.objekt__text .fakten > div:nth-child(-n+2) { border-top: 0; }
.objekt__text .fakten > div:nth-child(odd) { border-right: 1px solid var(--line); }

/* Brotkrume auf hellem Grund — die Grundfassung ist für Fotohintergründe */
.breadcrumb--dunkel li,
.breadcrumb--dunkel a { color: var(--slate); }
.breadcrumb--dunkel a:hover { color: var(--gold-ink); }
.breadcrumb--dunkel li + li::before { color: var(--line); }

/* Objektkarte als Ganzes anklickbar */
a.prop { color: inherit; display: flex; }
a.prop:hover { color: inherit; }
a.prop:hover .prop__title { color: var(--gold-ink); }
a.prop:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 1024px) {
  .objekt { gap: 38px; }
  .objekt__text .fakten { grid-template-columns: 1fr; }
  .objekt__text .fakten > div { border-top: 1px solid var(--line); border-right: 0; }
  .objekt__text .fakten > div:first-child { border-top: 0; }
}
@media (max-width: 860px) {
  .objekt { grid-template-columns: 1fr; gap: 30px; }
  .objekt__medien { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .objekt__medien { position: static; }
}

/* --------------------------------------------------------------------------
   23b. Ortsseiten — Faktenkasten, Ortslisten
   -------------------------------------------------------------------------- */
.fakten {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--off);
}
.fakten > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px 24px;
}
.fakten > div + div { border-top: 1px solid var(--line); }
.fakten dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.fakten dd {
  margin: 0;
  font-family: var(--f-head);
  font-size: 1.02rem;
  color: var(--black);
  line-height: 1.4;
}

/* Ortslisten: mehrspaltig, damit 49 Eintraege nicht zur Bandwurmliste werden */
.orte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 28px;
}
.orte li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.orte a {
  font-family: var(--f-head);
  font-size: 1.02rem;
  color: var(--black);
}
.orte a:hover { color: var(--gold-ink); }
.orte span {
  flex: 0 0 auto;
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--slate);
}

.ortgruppe + .ortgruppe { margin-top: 58px; }
.ortgruppe h2 { margin-bottom: .3em; }
.ortgruppe > p {
  max-width: 620px;
  margin-bottom: 1.8rem;
}

@media (max-width: 700px) {
  .orte { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   24. Sonstiges
   -------------------------------------------------------------------------- */
.notice {
  border-left: 2px solid var(--gold);
  background: var(--off);
  padding: 22px 26px;
  font-size: .9rem;
}

.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; font-size: 1.2rem; }
.prose ul { margin: 0 0 1.4em; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .68em;
  width: 10px; height: 1.5px;
  background: var(--gold);
}
.prose a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   25. Responsive — Breakpoints analog zum Original (Laptop/Tablet/Mobile)
   -------------------------------------------------------------------------- */
/* Die Navigation nutzt bei 1440px die volle Breite aus — darunter schrittweise
   enger stellen, damit sie nicht über den Rand läuft. */
@media (max-width: 1400px) {
  .nav__list { gap: 18px; }
}

@media (max-width: 1200px) {
  :root { --section-y: var(--s-laptop); }
  .nav__list { gap: 15px; }
  .nav__link { font-size: 13px; }
  .nav__phone { font-size: 14px; }
}

@media (max-width: 1024px) {
  .filter__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .split { gap: 44px; }
  .person { grid-template-columns: 220px 1fr; gap: 34px; }
}

@media (max-width: 900px) {
  :root { --section-y: var(--s-tablet); --header-h: 74px; }

  .burger { display: block; }

  /* Logo über dem Vollbild-Menü halten und dort nie invertiert darstellen
     (das Menü hat weißen Grund — invertiert wäre es unsichtbar). */
  .brand { position: relative; z-index: 120; }
  .brand img { height: 48px; }
  /* Im geöffneten Vollbild-Menü steht das Logo auf Weiß — dort nicht invertieren. */
  body.nav-open .header .brand img { filter: none; }

  .nav {
    position: fixed;
    inset: 0;
    background: var(--white);
    padding: calc(var(--header-h) + 24px) 24px 40px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link {
    color: var(--black) !important;
    justify-content: space-between;
    font-size: 1.05rem;
    padding: 17px 0;
    font-family: var(--f-head);
  }
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    padding: 0 0 12px;
    min-width: 0;
    display: none;
  }
  .nav__item.is-open > .nav__sub { display: block; }
  .nav__sub a { padding: 10px 0 10px 18px; }
  .nav__phone { margin-top: 26px; font-size: 1.05rem; }

  .grid--3, .grid--4, .props, .stats { grid-template-columns: repeat(2, 1fr); }
  .split, .split--media-right .split__media { grid-template-columns: 1fr; order: 0; }
  .split { gap: 34px; }
  .person { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 32px; }
  .cookie__inner { grid-template-columns: 1fr; gap: 20px; }
  .hero__dots { display: none; }
  .filter__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  :root { --section-y: var(--s-mobile); }
  body { font-size: 15px; }

  .container { padding-inline: 20px; }
  .grid--2, .grid--3, .grid--4, .props, .stats, .filter__grid,
  .form__row, .form__row--3 { grid-template-columns: 1fr; }

  .btn { width: 100%; padding: 14px 26px; }
  .btn-row { flex-direction: column; }
  .cookie .btn-row { flex-direction: column; }

  .hero { min-height: 90svh; }
  .hero__inner { padding-bottom: 70px; }
  .pagehero { min-height: 46vh; }
  .pagehero__inner { padding-bottom: 40px; }

  .pillar { padding: 34px 26px; }
  .filter { padding: 26px 20px; }
  .cta-band { padding: 34px 24px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
  .fab { right: 16px; bottom: 16px; padding: 13px 18px; }
  .portals { gap: 18px 32px; }
  .portal { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .footer, .fab, .cookie, .hero__dots { display: none !important; }
  [data-reveal] { opacity: 1 !important; animation: none !important; }
  body { color: #000; }
}

/* ===========================================================================
   27. 360°-RUNDGÄNGE — eigene Seite
   Hell wie der Rest der Website. Gold bleibt Messfarbe: Sucher-Ecken,
   Hilfslinien, Raummarker — nur jetzt auf hellem Grund.
   =========================================================================== */

.tour__meta {
  display: block;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
/* Gold traegt nur auf dunklem Grund genug Kontrast — dort bleibt es. */
.tourhero .tour__meta,
.stage .tour__meta { color: var(--gold); }

/* ---------------------------------------------------------------- Panorama */
.pano {
  position: relative;
  height: min(78svh, 680px);
  overflow: hidden;
  background: var(--line);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.pano.is-grabbing { cursor: grabbing; }

.pano__img {
  position: absolute;
  top: 50%;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateY(-50%);
  will-change: transform;
  pointer-events: none;
}

/* Sucher-Ecken — Bildausschnitt wie im Messgerät */
.pano__frame { position: absolute; inset: 28px; pointer-events: none; z-index: 2; }
.pano__frame span {
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid rgba(224, 171, 56, .85);
}
.pano__frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.pano__frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.pano__frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.pano__frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Nur so viel Abdunklung, wie die weiße Schrift zum Lesen braucht —
   die Bildmitte bleibt offen, das Motiv hell. */
.pano__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 50% at 50% 48%,
      rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .20) 72%, rgba(0, 0, 0, .04) 100%),
    linear-gradient(rgba(6, 8, 15, .52), rgba(6, 8, 15, .14) 42%, rgba(6, 8, 15, .58));
}

.pano__inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}
.pano__inner h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  font-weight: 200;
  line-height: 1.1;
  max-width: 12em;
  margin: 0 0 1rem;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .6);
}
.pano__inner p {
  max-width: 30em;
  color: rgba(255, 255, 255, .92);
  margin: 0;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .55);
}
.pano__inner .tour__meta { text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }

.pano__hint {
  position: absolute;
  left: 50%; bottom: 30px;
  z-index: 4;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.pano.is-used .pano__hint { opacity: 0; transform: translate(-50%, 10px); }
.pano__hint i {
  width: 30px; height: 1px; background: rgba(255,255,255,.6); display: block; position: relative;
}
.pano__hint i::after {
  content: ''; position: absolute; top: -2px; left: 0;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  animation: panoHint 2.6s var(--ease) infinite;
}
@keyframes panoHint { 0%,100% { left: 0 } 50% { left: 25px } }

.pano__bar {
  position: absolute;
  left: 28px; right: 28px; bottom: 12px;
  height: 2px; z-index: 4;
  background: rgba(255, 255, 255, .3);
}
.pano__bar b {
  display: block; height: 100%; width: 30%;
  background: var(--gold);
  transition: transform .1s linear;
  transform-origin: left;
}

/* ------------------------------------------------------------- Grundriss */
.plan { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.plan svg { width: 100%; height: auto; overflow: visible; }
.plan__draw   { fill: none; stroke: var(--slate); stroke-width: 2; opacity: .55; }
.plan__accent { fill: none; stroke: var(--gold); stroke-width: 2.4; }
.plan__dim    { stroke: var(--gold); stroke-width: 1; opacity: .8; }
.plan__label {
  fill: var(--slate); font-family: var(--f-body); font-size: 11px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.plan__dot { fill: var(--gold); }

.plan [data-draw] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.plan.is-in [data-draw] {
  animation: planDraw 1.5s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes planDraw { to { stroke-dashoffset: 0; } }
.plan .plan__dot, .plan .plan__label { opacity: 0; }
.plan.is-in .plan__dot, .plan.is-in .plan__label {
  animation: planFade .6s var(--ease) forwards;
  animation-delay: 1.1s;
}
@keyframes planFade { to { opacity: 1; } }

/* --------------------------------------------------------- Ablauf-Schritte */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; counter-reset: s; }
.step {
  position: relative;
  padding: 34px 30px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 0, 0, .08); }
.step::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  display: block;
  font-family: var(--f-head);
  font-size: .82rem;
  letter-spacing: .16em;
  color: var(--gold-ink);
  margin-bottom: 1.3rem;
}
.step h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: .6em; color: var(--black); }
.step p  { font-size: .93rem; margin: 0; }

/* Variante ohne Nummer — für die Merkmalsliste neben dem Text */
.steps--plain { counter-reset: none; }
.steps--plain .step::before { content: none; }

/* ------------------------------------------------- Einbettung mit Zustimmung */
.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--off);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px;
}
.embed__note { max-width: 34em; }
.embed__note p { font-size: .92rem; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .plan { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .pano { height: min(64svh, 520px); }
  .pano__frame { inset: 16px; }
  .pano__bar { left: 16px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pano__hint i::after { animation: none; }
  .plan [data-draw] { stroke-dashoffset: 0; }
  .plan .plan__dot, .plan .plan__label { opacity: 1; }
}

/* --- Dunkle Bühne: für Panorama-Umfeld, Live-Tour und Blaupause -----------
   Kein flaches Schwarz, sondern Tiefe durch einen weichen Lichtkern. */
.stage {
  position: relative;
  background: var(--ink);
  color: rgba(255, 255, 255, .74);
  overflow: hidden;
}
.stage::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(ellipse 55% 60% at 50% 38%,
    rgba(224, 171, 56, .10) 0%, rgba(224, 171, 56, .03) 45%, transparent 72%);
  pointer-events: none;
}
.stage > .container { position: relative; z-index: 1; }
.stage h2, .stage h3 { color: var(--white); }
.stage .rule { background: var(--gold); }

/* Live-Tour — randlos, so groß wie möglich */
.tourbox {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 82svh;
  background: #06080f;
  border: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px;
  overflow: hidden;
}
.tourbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tourbox__note { max-width: 34em; position: relative; z-index: 2; }
.tourbox__note p { color: rgba(255, 255, 255, .74); font-size: .92rem; }
/* Standbild dahinter, leicht unscharf — man ahnt, was kommt */
.tourbox__peek {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  filter: blur(6px) saturate(.8);
  opacity: .35;
  transform: scale(1.06);
}
.tourbox__peek::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 15, .55);
}

/* Blaupause: Grundriss auf tiefem Grund, Linien in Gold */
.stage .plan__draw   { stroke: rgba(255, 255, 255, .38); }
.stage .plan__accent { stroke: var(--gold); }
.stage .plan__label  { fill: rgba(255, 255, 255, .78); }
.stage .steps .step {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
}
.stage .steps .step::before { color: var(--gold); }
.stage .steps .step h3 { color: var(--white); }
.stage .steps .step p  { color: rgba(255, 255, 255, .7); }
.stage .steps .step:hover { box-shadow: none; }

@media (max-width: 900px) {
  .tourbox { aspect-ratio: 4 / 3; }
}

/* --- Rundgang als Hero ---------------------------------------------------
   Das Standbild liegt gedimmt darunter, darüber Überschrift und Hinweis.
   Bei der ersten Berührung wird der Rundgang geladen und die Ebene blendet
   weg. Der Iframe ist Cross-Origin — Mausbewegungen darin sind für uns
   unsichtbar, deshalb liegt die Ebene davor und übergibt die Steuerung. */
.tourhero {
  position: relative;
  height: min(88svh, 900px);
  min-height: 540px;
  overflow: hidden;
  background: #06080f;
}
.tourhero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }

/* Auf den Objektseiten liegt der Header durchsichtig über dem Rundgang. Beide
   setzen ihr Logo links oben ab — Matterport seins im eingebetteten Fenster,
   wir unseres im Header. Sie lagen übereinander.
   Der Rundgang beginnt deshalb unterhalb des Headers, und der Header bekommt
   für die Zeit eine eigene Fläche. Dann sind es zwei Ebenen statt eines
   Durcheinanders. */
.tourhero--objekt.is-live iframe {
  top: var(--header-h);
  height: calc(100% - var(--header-h));
}
.tourhero--objekt.is-live::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 2;
  background: var(--ink);
}
/* Die Bedienhilfe sitzt im sichtbaren Teil, nicht unter dem Header */
.tourhero--objekt.is-live .tourhero__guard { top: var(--header-h); }

/* Standbild — solange gedimmt, wie noch nichts geladen ist */
.tourhero__still {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  filter: grayscale(.55) brightness(.62) blur(1px);
  transform: scale(1.03);
  transition: filter 1.1s var(--ease), transform 1.4s var(--ease), opacity .8s var(--ease);
}
.tourhero.is-live .tourhero__still { opacity: 0; filter: none; transform: scale(1); }

.tourhero__gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  background: linear-gradient(rgba(6, 8, 15, .42), rgba(6, 8, 15, .18) 45%, rgba(6, 8, 15, .60));
  cursor: pointer;
  transition: opacity .8s var(--ease);
}
.tourhero.is-live .tourhero__gate { opacity: 0; pointer-events: none; }

.tourhero__gate h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  font-weight: 200;
  line-height: 1.1;
  max-width: 12em;
  margin: 1.4rem 0 1rem;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .6);
}
.tourhero__gate p {
  max-width: 30em;
  color: rgba(255, 255, 255, .9);
  margin: 0 0 2rem;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .55);
}
.tourhero__gate .tour__meta { text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }

/* Datenschutzhinweis klein unter dem Knopf */
.tourhero__fine {
  margin-top: 1.1rem;
  font-size: .72rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
  max-width: 30em;
}

/* Pulsierender Ring am Startknopf — einziges bewegtes Element hier */
.tourhero__start { position: relative; }
.tourhero__start::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 12px;
  animation: tourPulse 2.8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes tourPulse {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.12); }
  100% { opacity: 0;  transform: scale(1.12); }
}

@media (max-width: 900px) {
  .tourhero { height: min(80svh, 640px); min-height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .tourhero__start::after { animation: none; }
  .tourhero__still, .tourhero__gate { transition-duration: .001ms; }
}

/* --- Scroll-Schutz über dem Rundgang --------------------------------------
   Ein Iframe auf fremder Domain verschluckt das Mausrad — man will scrollen
   und zoomt stattdessen. Diese durchsichtige Ebene liegt darüber und gibt das
   Rad wieder an die Seite. Ein Klick übergibt die Steuerung an den Rundgang,
   beim Verlassen stellt sie sich von selbst wieder scharf. */
.tourhero__guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  cursor: pointer;
}
.tourhero.is-live.is-locked .tourhero__guard { display: block; }

.tourhero__guard::after {
  content: 'Zum Steuern klicken';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(6, 8, 15, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.tourhero__guard:hover::after { opacity: 1; }

/* Ausstieg nach unten — immer erreichbar, auch wenn der Rundgang aktiv ist */
.tourhero__next {
  position: absolute;
  left: 50%; bottom: 18px;
  z-index: 5;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(6, 8, 15, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s, background .3s, transform .3s var(--ease);
}
.tourhero.is-live .tourhero__next { opacity: 1; visibility: visible; }
.tourhero__next:hover { background: rgba(6, 8, 15, .8); transform: translateX(-50%) translateY(-2px); }
.tourhero__next svg { width: 13px; height: 13px; }

@media (max-width: 600px) {
  .tourhero__next { font-size: .62rem; padding: 8px 14px; bottom: 12px; }
}

/* --- Pfad: Wegstrecke, die beim Scrollen mitwaechst ------------------------
   Eine Linie laeuft mittig nach unten und verbindet die Stationen. Wie weit
   sie gezeichnet ist, haengt am Scrollstand: das Skript setzt --fortschritt
   (0 bis 1), die Hoehe der goldenen Linie folgt daraus. Erreichte Stationen
   schalten auf .is-erreicht. Ohne Skript bleibt der graue Strang stehen und
   alle Stationen sind voll sichtbar — der Inhalt haengt nicht an der Animation.
   --------------------------------------------------------------------------- */
.pfad {
  --spur: 2px;
  --punkt: 14px;
  --einzug: 64px;
  position: relative;
  margin-inline: auto;
  max-width: 660px;
}

/* Grauer Grundstrang. Die weichen Enden verhindern, dass die Linie oben und
   unten hart abgeschnitten wirkt — sie laeuft ueber die volle Hoehe. */
.pfad__spur {
  position: absolute;
  top: 0; bottom: 0; left: 7px;
  width: var(--spur);
  background: var(--line);
  -webkit-mask-image: linear-gradient(transparent, #000 46px, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(transparent, #000 46px, #000 calc(100% - 46px), transparent);
}
.pfad__linie {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--fortschritt, 0) * 100%);
  background: var(--gold);
  /* Kurze Nachlaufzeit: die Linie folgt dem Scrollen weich statt zu springen */
  transition: height .12s linear;
}

.pfad__stationen { list-style: none; margin: 0; padding: 0; }

.pfad__station {
  position: relative;
  padding: 15px 0 15px 44px;
}
.pfad__karte { text-align: left; }

/* Vor dem Erreichen zuruecknehmen — aber nur, wenn das Skript laeuft */
.pfad.is-bereit .pfad__karte {
  opacity: .85;
  transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.pfad.is-bereit .is-erreicht .pfad__karte { opacity: 1; transform: none; }

.pfad__nr {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .3rem;
}
.pfad__karte h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  font-weight: 400;
  color: var(--black);
  margin-bottom: .3em;
}
.pfad__karte p { font-size: .93rem; margin: 0; }

.pfad__punkt {
  position: absolute;
  top: calc(22px - var(--punkt) / 2);
  left: 1px;
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.is-erreicht .pfad__punkt {
  border-color: var(--gold);
  background: var(--gold);
  transform: scale(1.3);
}

/* Auf dunklem Grund (Rundgang-Seite) */
.pfad--dunkel .pfad__spur { background: rgba(255, 255, 255, .16); }
.pfad--dunkel .pfad__punkt { background: var(--ink); border-color: rgba(255, 255, 255, .28); }
.pfad--dunkel .is-erreicht .pfad__punkt { background: var(--gold); border-color: var(--gold); }
.pfad--dunkel .pfad__nr { color: var(--gold); }
.pfad--dunkel .pfad__karte h3 { color: var(--white); }
.pfad--dunkel .pfad__karte p { color: rgba(255, 255, 255, .72); }

/* Schmale Ansicht: Linie nach links, alles einspaltig */
@media (max-width: 860px) {
  .pfad__station { padding-left: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .pfad.is-bereit .pfad__karte { opacity: 1; transform: none; transition: none; }
  .pfad__linie { transition: none; }
}

/* --- Räume im Grundriss ----------------------------------------------------
   Jeder Raum ist eine eigene Fläche, die auf den Mauszeiger reagiert. Die
   Wandlinien liegen darüber, nehmen aber keine Zeigerereignisse an — sonst
   würde die Hervorhebung beim Überfahren einer Linie flackern. */
.plan__draw, .plan__accent, .plan__dim { pointer-events: none; }

.room { cursor: default; }
.room__hit {
  fill: transparent;
  transition: fill .35s var(--ease);
}
.room:hover .room__hit,
.room:focus-visible .room__hit { fill: rgba(224, 171, 56, .12); }

.room .plan__label,
.room .plan__dot {
  transition: fill .35s var(--ease), transform .35s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}
.room:hover .plan__label,
.room:focus-visible .plan__label { fill: var(--gold); }
.room:hover .plan__dot,
.room:focus-visible .plan__dot { transform: scale(1.5); }

.room:focus { outline: none; }
.room:focus-visible .room__hit { stroke: var(--gold); stroke-width: 1.5; }

/* Maßangabe gehört zu keinem Raum und bleibt unverändert */
.plan__label--dim { fill: var(--gold) !important; }

@media (prefers-reduced-motion: reduce) {
  .room__hit, .room .plan__label, .room .plan__dot { transition-duration: .001ms; }
}