/* ==========================================================================
   HDD Immobilien — Design-System v2 („Apple-Stil")
   Warme Palette statt Kaltgrau, Systemschrift (auf Apple-Geräten SF Pro),
   Scroll als Dramaturgie. Bilder liegen gemeinsam in ../assets/img/.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Farben */
  --ink:        #1D1D1F;   /* Apples Textschwarz — nie reines #000 für Text */
  --ink-2:      #6E6E73;
  --ink-3:      #86868B;
  --paper:      #FFFFFF;
  --grey:       #F5F5F7;   /* Apple-Grau */
  --warm:       #F3F1ED;   /* unser Abweichler: Bestand, Substanz */
  --stage:      #000000;   /* nur für die zwei dunklen Momente */
  --line:       rgba(0,0,0,0.10);
  --line-dark:  rgba(255,255,255,0.16);

  --accent:     #14523C;   /* Tannengrün */
  --accent-lt:  #4E9B79;   /* auf Schwarz lesbar */

  /* Schrift — auf macOS/iOS ist das San Francisco, ohne Request, ohne CDN */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Typo-Skala */
  --t-display: clamp(2.75rem, 1.2rem + 6.4vw, 5.5rem);
  --t-h1:      clamp(2.1rem, 1.2rem + 3.6vw, 3.75rem);
  --t-h2:      clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --t-sub:     clamp(1.15rem, 1rem + 0.7vw, 1.75rem);
  --t-body:    1.0625rem;   /* 17px — Apples Fließtextgröße */
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* Radien */
  --r-card:    18px;
  --r-media:   28px;
  --r-pill:    980px;       /* macht Apple wörtlich so */

  /* Maße */
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --maxw:      80rem;
  --nav-h:     3rem;
  --section:   clamp(5rem, 10vw, 10rem);

  /* Bewegung — eine Kurve für alles */
  --ease:      cubic-bezier(0.28, 0.11, 0.32, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.47;        /* Apples Body-Wert — der Grund für die Ruhe */
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* --- 3. Layout ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 56rem; }

.section { padding-block: var(--section); }
.section--grey  { background: var(--grey); }
.section--warm  { background: var(--warm); }
.section--stage { background: var(--stage); color: var(--grey); }

/* --- 4. Typografie ------------------------------------------------------- */

.display {
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
.h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
.h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; }

.sub {
  font-size: var(--t-sub);
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink-2);
  text-wrap: pretty;
}
.body { color: var(--ink-2); max-width: 40rem; text-wrap: pretty; }
.body + .body { margin-top: 1.1em; }

.eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);   /* 5,1:1 gegen Weiß — --ink-3 wären nur 3,6:1 */
}
.eyebrow--accent { color: var(--accent); }

.section--stage .sub,
.section--stage .body { color: rgba(245,245,247,0.66); }
.section--stage .eyebrow { color: rgba(245,245,247,0.5); }
.section--stage .eyebrow--accent { color: var(--accent-lt); }

/* Abschnittskopf */
.head { display: grid; gap: 0.9rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 46rem; }
.head--center { justify-items: center; text-align: center; margin-inline: auto; }

/* --- 5. Buttons & Links -------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease);
}
.pill:hover { background: #1A6449; transform: scale(1.03); }
.pill:active { transform: scale(0.98); }

.pill--ghost { background: transparent; border-color: rgba(0,0,0,0.22); color: var(--ink); }
.pill--ghost:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.35); }

.section--stage .pill--ghost { border-color: rgba(255,255,255,0.3); color: var(--grey); }
.section--stage .pill--ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Apple-Textlink mit Chevron */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--accent);
  font-size: var(--t-body);
  transition: opacity 0.2s var(--ease);
}
.tlink::after {
  content: "›";
  font-size: 1.25em;
  line-height: 1;
  transform: translateY(-0.06em);
  transition: transform 0.25s var(--ease);
}
.tlink:hover { text-decoration: underline; }
.tlink:hover::after { transform: translate(3px, -0.06em); }
.section--stage .tlink { color: var(--accent-lt); }

/* --- 6. Bildflächen ------------------------------------------------------
   Fehlt die Datei, blendet onerror das <img> aus und der Platzhalter
   darunter wird sichtbar. Datei in ../assets/img/ legen genügt.
   ------------------------------------------------------------------------ */

.media {
  position: relative;
  overflow: hidden;
  background: var(--warm);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-media);
}
.media--wide { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 4 / 5; }

.media > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media__ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
}
.media__ph::before {
  content: "";
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.4;
}

/* Kennzeichnung für Visualisierungen — bei Renderings Pflicht, sonst
   entsteht der Eindruck, das Foto zeige den gebauten Zustand. */
.media__hinweis {
  position: absolute;
  z-index: 3;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.92);
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  pointer-events: none;
}

/* Auf dunklem Grund bleibt auch die leere Bildfläche dunkel */
.section--stage .media { background: #141414; }
.section--stage .media__ph { color: rgba(245,245,247,0.4); }

/* --- 7. Header ----------------------------------------------------------- */

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
/* Über dem dunklen Auftakt dunkelt die Leiste mit */
.nav-bar--dark {
  /* transluzent mit Blur — funktioniert, weil .stage-top unter die Leiste
     hochgezogen wird und dort echtes Schwarz bzw. das Foto liegt */
  background: rgba(0,0,0,0.55);
  border-bottom-color: rgba(255,255,255,0.12);
  color: var(--grey);
}
.nav-bar--dark .brand__sub { color: rgba(245,245,247,0.55); }
.nav-bar--dark .nav__link { color: rgba(245,245,247,0.7); }
.nav-bar--dark .nav__link:hover,
.nav-bar--dark .nav__link[aria-current="page"] { color: #fff; }
.nav-bar--dark .nav-toggle { color: rgba(245,245,247,0.7); }
.nav-bar { transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease); }

.nav-bar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 1.5rem; width: auto; }
/* Über dem dunklen Auftakt das schwarze Logo zu Weiß umkehren */
.nav-bar--dark .brand img { filter: brightness(0) invert(1); }

@media (max-width: 52rem) { .brand img { height: 1.3rem; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
  font-size: var(--t-micro);
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 500; }

.nav__pill {
  font-size: var(--t-micro);
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  transition: background 0.2s var(--ease);
}
.nav__pill:hover { background: #1A6449; }

.nav-toggle {
  margin-left: auto;
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  font-size: var(--t-micro);
  color: var(--ink-2);
}

@media (max-width: 52rem) {
  /* Tippziele auf mindestens 44 px bringen — Fingerkuppe statt Mauszeiger.
     Negative Margins halten dabei das Layout an Ort und Stelle. */
  .nav-toggle { display: block; padding: 0.85rem 0.6rem; margin-right: -0.6rem; }
  .tlink { padding-block: 0.6rem; margin-block: -0.6rem; }
  .foot__col a { padding-block: 0.35rem; }
  /* Vollflächiges, deckend weißes Menü — kein Durchscheinen der Seite */
  .nav {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: var(--paper);
    margin-left: 0;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 2rem; }
  .nav__list li { border-top: 1px solid var(--line); }
  .nav__list li:first-child { border-top: 0; }   /* sonst steht oben ein Strich */
  .nav__link { display: block; padding-block: 1rem; font-size: 1.35rem; letter-spacing: -0.02em; }
  .nav__pill { display: inline-block; margin-top: 1.25rem; font-size: var(--t-body); padding: 0.75rem 1.4rem; }

  /* Im geöffneten Menü immer dunkle Schrift — auch wenn die Leiste wegen
     eines dunklen Seitenkopfs auf nav-bar--dark steht. Sonst stünde
     weiße Schrift auf weißem Grund. Genau das war der Fehler. */
  .nav-bar--dark .nav[data-open="true"] .nav__link { color: var(--ink-2); }
  .nav-bar--dark .nav[data-open="true"] .nav__link:hover,
  .nav-bar--dark .nav[data-open="true"] .nav__link[aria-current="page"] { color: var(--ink); }

  /* Bei offenem Menü wird auch die Leiste hell, sonst schneidet ein
     schwarzer Balken die weiße Fläche ab. */
  .nav-bar--offen,
  .nav-bar--offen.nav-bar--dark {
    background: var(--paper);
    border-bottom-color: var(--line);
    color: var(--ink);
    /* WICHTIG: backdrop-filter macht die Leiste zum Bezugsrahmen für
       position:fixed. Das Menü würde sich dann an der 48 px hohen Leiste
       ausrichten statt am Viewport und hätte Höhe 0. Bei offenem Menü ist
       die Leiste ohnehin deckend, der Blur also entbehrlich. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-bar--offen .brand img { filter: none; }
  .nav-bar--offen .nav-toggle { color: var(--ink); }
}

/* --- 8. Hero ------------------------------------------------------------- */

/* Der dunkle Auftakt läuft unter die Navileiste durch, damit deren Blur
   etwas Dunkles zum Durchscheinen hat statt des weißen Bodys darüber. */
.stage-top {
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
}

.hero {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(4.5rem, 12vh, 9rem) clamp(3rem, 8vh, 5.5rem);
}
.hero__inner { display: grid; gap: 1.5rem; justify-items: center; }

.hero__title { display: grid; }
.hero__line { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .hero__line, .hero__eyebrow, .hero__sub, .hero__cta {
    opacity: 0;
    transform: translateY(24px);
    animation: rise 1s var(--ease) forwards;
  }
  .hero__eyebrow { animation-delay: 0.05s; }
  .hero__line:nth-child(1) { animation-delay: 0.15s; }
  .hero__line:nth-child(2) { animation-delay: 0.25s; }
  .hero__line:nth-child(3) { animation-delay: 0.35s; }
  .hero__sub { animation-delay: 0.5s; }
  .hero__cta { animation-delay: 0.6s; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* --- 9. Zoom-Sequenz -----------------------------------------------------
   Bild startet eingerückt und öffnet sich beim Scrollen auf Vollbild.
   JS setzt --i von 1 (klein) auf 0 (Vollbild). Ohne JS bleibt das
   gerahmte Bild stehen — sieht ebenfalls sauber aus.
   ------------------------------------------------------------------------ */

.zoom { height: 185vh; position: relative; }
.zoom__sticky {
  --i: 1;   /* 1 = eingerücktes Bild, 0 = Vollbild */
  --j: 0;   /* zweiter Beat: Bildunterschrift, läuft nach dem Öffnen */
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.zoom__frame {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  clip-path: inset(
    calc(var(--i) * 17vh) calc(var(--i) * 23vw)
    round calc(var(--i) * var(--r-media))
  );
}
.zoom__frame > img { transform: scale(calc(1 + var(--i) * 0.12)); }

.zoom__caption {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: clamp(2rem, 6vh, 4rem);
  text-align: center;
  color: #fff;
  padding-inline: var(--gutter);
  text-shadow: 0 1px 24px rgba(0,0,0,0.55);
  /* steigt erst auf, wenn das Bild offen ist — füllt die Reststrecke */
  opacity: var(--j);
  transform: translateY(calc((1 - var(--j)) * 22px));
}

@media (max-width: 52rem) {
  .zoom { height: 165vh; }
  .zoom__frame { clip-path: inset(calc(var(--i) * 22vh) calc(var(--i) * 8vw) round calc(var(--i) * var(--r-media))); }
}

/* --- 10. Szenen (Sticky-Statements) --------------------------------------
   Sticky-Bühne über einer Spur aus drei Schritten. IntersectionObserver
   schaltet die aktive Aussage.
   ------------------------------------------------------------------------ */

.scenes { display: grid; }
.scenes__sticky, .scenes__track { grid-area: 1 / 1; }

.scenes__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}
/* Alle Tafeln liegen in derselben Grid-Zelle: sie überlagern sich wie
   vorher, aber die Bühne wird so hoch wie die längste. Eine feste
   min-height konnte der mitwachsenden Schriftgröße nicht folgen — genau
   dadurch lief der Text über die Fortschrittsstriche. */
.scenes__stage { display: grid; }

.scene {
  grid-area: 1 / 1;
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 22ch;
  opacity: 0;
  transform: translateY(20px);
  /* abgehende Aussage blendet schneller aus als die neue ein — sonst
     überlagern sich beide sichtbar in der Mitte des Übergangs */
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.scene.is-active {
  opacity: 1;
  transform: none;
  transition-duration: 0.75s;
  transition-delay: 0.1s;
}

.scenes__dots { display: flex; gap: 0.5rem; }
.scenes__dot {
  width: 26px; height: 3px; border-radius: 2px;
  background: rgba(0,0,0,0.15);
  transition: background 0.4s var(--ease);
}
.scenes__dot.is-active { background: var(--accent); }

.scenes__track { display: grid; }
.scenes__step { height: 100vh; }


/* --- 11. Bento-Raster ---------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.bento__card {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  display: grid;
  align-content: space-between;
  gap: 1.5rem;
  min-height: 12rem;
}
.bento__card--dark { background: var(--ink); color: var(--grey); }
.bento__card--dark .eyebrow { color: rgba(245,245,247,0.55); }
.bento__card--dark .body { color: rgba(245,245,247,0.7); }
.bento__card--accent { background: var(--accent); color: #fff; }
.bento__card--accent .eyebrow { color: rgba(255,255,255,0.65); }
.bento__card--accent .body { color: rgba(255,255,255,0.8); }

/* Zahl und Text als ein Block unten — das Weiß steht dann bewusst oben,
   statt die Zahl mitten in der Kachel schweben zu lassen */
.bento__group { display: grid; gap: 0.4rem; }
.bento__group .body { margin-top: 1.1rem; }

.bento__a { grid-column: span 2; grid-row: span 2; }
.bento__b { grid-column: span 1; }
.bento__c { grid-column: span 1; }
.bento__d { grid-column: span 2; }

.bento__num {
  font-size: clamp(2.75rem, 1.5rem + 4vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bento__label { font-size: var(--t-small); color: var(--ink-2); }
.bento__card--dark .bento__label,
.bento__card--accent .bento__label { color: inherit; opacity: 0.7; }

@media (max-width: 60rem) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__a { grid-column: span 2; grid-row: span 1; }
  .bento__d { grid-column: span 2; }
}
@media (max-width: 34rem) {
  .bento { grid-template-columns: 1fr; }
  .bento__a, .bento__b, .bento__c, .bento__d { grid-column: span 1; }
}

/* --- 12. Objekt-Galerie (horizontaler Snap) ------------------------------ */

.gallery { position: relative; }
.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.gallery__nav { display: flex; gap: 0.5rem; }
.gallery__btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.06);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.gallery__btn:hover { background: rgba(0,0,0,0.12); }
.gallery__btn[disabled] { opacity: 0.3; cursor: default; }

.gallery__track {
  display: flex;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);   /* siehe .hscroll__sticky */
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Kacheln dürfen bis an den Bildschirmrand laufen */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: 0.5rem;
}
.gallery__track::-webkit-scrollbar { display: none; }

@media (max-width: 52rem) {
  .gallery__btn { width: 44px; height: 44px; }
}

.objekt {
  flex: 0 0 auto;
  width: min(30rem, 78vw);
  scroll-snap-align: start;
  display: grid;
  gap: 1rem;
}
.objekt .media { transition: transform 0.6s var(--ease); }
.objekt:hover .media { transform: scale(1.012); }

.objekt__bar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; }
.objekt__name { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; }
.objekt__meta { font-size: var(--t-small); color: var(--ink-2); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-micro);
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.06);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag--frei { background: rgba(20,82,60,0.1); color: var(--accent); }
.tag--bau  { background: rgba(154,98,18,0.12); color: #8A5A11; }

/* --- 12b. Objekt-Hero (Vollbild mit Namen darüber) ----------------------- */

.hero-obj {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(86vh, 880px);
  color: #fff;
  margin-top: calc(var(--nav-h) * -1);
}
.hero-obj .media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: #141414;
}
.hero-obj .media__ph { color: rgba(245,245,247,0.4); }
/* Verlauf, damit Text über jedem Foto lesbar bleibt */
.hero-obj .media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 42%, rgba(0,0,0,0.55) 100%);
}
.hero-obj__inner {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-obj .eyebrow { color: rgba(255,255,255,0.75); }
.hero-obj__crumb { color: rgba(255,255,255,0.7); font-size: var(--t-small); }
.hero-obj__crumb a:hover { color: #fff; text-decoration: underline; }

/* --- 12c. Sticky Anfrage-Leiste ------------------------------------------ */

.subbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease);
}
.subbar.is-visible { transform: none; }
.subbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
}
.subbar__text { display: grid; gap: 0.1rem; min-width: 0; }
.subbar__name { font-weight: 600; letter-spacing: -0.02em; }
.subbar__meta { font-size: var(--t-small); color: var(--ink-2); }
.subbar__cta { margin-left: auto; flex: none; }

@media (max-width: 34rem) {
  .subbar__meta { display: none; }
  .subbar__cta { padding-inline: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .subbar { transition: none; }
}

/* --- 12d. Rundgang: stehende Bildunterschrift, laufende Bilder ----------- */

.tour {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.tour__side {
  position: sticky;
  top: calc(var(--nav-h) + 3rem);
  display: grid;
  gap: 1.5rem;
}
.tour__stage { display: grid; }   /* Stapelung wie bei .scenes__stage */
.tour__cap {
  grid-area: 1 / 1;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.tour__cap.is-active { opacity: 1; transform: none; transition-duration: 0.7s; transition-delay: 0.08s; }
.tour__num { font-size: var(--t-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tour__media { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

@media (max-width: 60rem) {
  .tour { grid-template-columns: 1fr; gap: 2rem; }
  .tour__side { position: static; }
  .tour__stage { display: grid; gap: 1.5rem; }
  .tour__cap { grid-area: auto; opacity: 1; transform: none; }
}

/* --- 12e. Datenblatt ------------------------------------------------------ */

.specs {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.4vw, 2rem);
}
.specs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.specs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.specs > div:first-child { padding-top: 0; }
.specs dt { color: var(--ink-2); font-size: var(--t-small); }
.specs dd { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* Auf dem Handy untereinander statt rechtsbündig — sonst bricht jeder
   längere Wert in eine schmale Spalte und wird zur Wortschlange. */
@media (max-width: 40rem) {
  .specs > div { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .specs dd { text-align: left; }
}

/* --- 12f. Formular -------------------------------------------------------- */

.form { display: grid; gap: 1rem; }
.f-field { display: grid; gap: 0.4rem; }
.f-field > label { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); }
.f-field input,
.f-field select,
.f-field textarea {
  width: 100%;
  background: var(--grey);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  appearance: none;
}
.f-field textarea { min-height: 7.5rem; resize: vertical; }
.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--accent);
}
.f-field input::placeholder, .f-field textarea::placeholder { color: var(--ink-3); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 40rem) { .f-row { grid-template-columns: 1fr; } }

.f-check {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: var(--t-small); color: var(--ink-2);
  margin-top: 0.25rem;
}
.f-check input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--accent); flex: none; }
.f-note { font-size: var(--t-small); color: var(--ink-3); }
.f-status {
  border-radius: 12px;
  background: var(--grey);
  padding: 0.9rem 1.1rem;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.f-status[hidden] { display: none; }

/* --- 12g. Parallaxe in Bildflächen ---------------------------------------
   Das Bild bewegt sich langsamer als der Scroll. Leicht überskaliert,
   damit an den Kanten nichts frei läuft.
   ------------------------------------------------------------------------ */

[data-parallax] > img {
  transform: translate3d(0, var(--py, 0%), 0) scale(1.1);
  will-change: transform;
}

/* --- 12h. Text, der sich beim Scrollen aufhellt --------------------------
   Der Absatz steht gedimmt da, Wort für Wort schaltet er auf volle Farbe.
   ------------------------------------------------------------------------ */

.lighten {
  font-size: var(--t-h2);
  line-height: 1.28;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink-3);
  max-width: 22ch;
  text-wrap: pretty;
}
.lighten .lw { transition: color 0.4s var(--ease); }
.lighten .lw.is-on { color: var(--ink); }

.section--stage .lighten { color: rgba(245,245,247,0.26); }
.section--stage .lighten .lw.is-on { color: var(--grey); }

/* --- 12i. Stapelkarten (rein per sticky) ---------------------------------
   Jede Karte bleibt etwas tiefer stehen als die vorige, die nächste
   schiebt sich darüber.
   ------------------------------------------------------------------------ */

.stack-cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.stack-card {
  position: sticky;
  top: calc(var(--nav-h) + 2rem + var(--n) * 1.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  display: grid;
  gap: 1rem;
  min-height: 15rem;
  align-content: start;
}
.section--grey .stack-card { background: var(--paper); border-color: transparent; }
.section--stage .stack-card {
  background: #111113;
  border-color: rgba(255,255,255,0.1);
}
.stack-card__n {
  font-size: var(--t-small);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.section--stage .stack-card__n { color: rgba(245,245,247,0.45); }

@media (max-width: 52rem) {
  .stack-card { position: static; min-height: 0; }
}

/* --- 12j. Waagerechte Scroll-Bühne ---------------------------------------
   Die Reihe wandert seitwärts, während man senkrecht scrollt.
   ------------------------------------------------------------------------ */

.hscroll { position: relative; }
.hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hscroll__row {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--gutter);
  will-change: transform;
}
.hscroll__intro {
  flex: 0 0 auto;
  width: min(26rem, 70vw);
  display: grid;
  gap: 1rem;
  align-content: center;
  padding-right: clamp(1rem, 3vw, 3rem);
}

/* Auf schmalen Geräten: normales Wischen statt Scroll-Kopplung */
@media (max-width: 60rem) {
  .hscroll { height: auto !important; }
  .hscroll__sticky {
    position: static; height: auto; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    /* ohne scroll-padding rastet der Browser beim Laden auf die Kachelkante
       und frisst damit genau den Innenabstand auf */
    scroll-padding-inline: var(--gutter);
  }
  .hscroll__sticky::-webkit-scrollbar { display: none; }
  .hscroll__row { transform: none !important; padding-block: 1rem; }
  .hscroll__row > * { scroll-snap-align: start; }
  .hscroll__intro { width: min(22rem, 78vw); }
}

/* --- 13. Footer ---------------------------------------------------------- */

.foot { background: var(--grey); padding-block: 3rem 2rem; font-size: var(--t-small); }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.foot__col { display: grid; gap: 0.55rem; align-content: start; }
.foot__logo { height: 1.8rem; width: auto; margin-bottom: 0.35rem; }
.foot__col a, .foot__col p { color: var(--ink-2); }
.foot__col a:hover { color: var(--ink); text-decoration: underline; }
.foot__title { color: var(--ink) !important; font-weight: 600; }
.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.25rem;
  color: var(--ink-2);
  font-size: var(--t-micro);
}
@media (max-width: 52rem) { .foot__grid { grid-template-columns: repeat(2, 1fr); } }

/* --- 13b. Fließtextseiten (Impressum, Datenschutz) ----------------------- */

.prose { max-width: 44rem; }
.prose h2 {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 2.75rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); margin-top: 0.85rem; text-wrap: pretty; }
.prose ul { margin-top: 0.85rem; display: grid; gap: 0.4rem; color: var(--ink-2); }
.prose li { padding-left: 1.15rem; position: relative; }
.prose li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration: underline; }

.hinweis {
  background: var(--grey);
  border-left: 3px solid #C99A2E;
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-bottom: 2.5rem;
}
.hinweis { display: none; }

/* --- 13c. Einwilligungsbanner --------------------------------------------
   Ablehnen und Zustimmen sind bewusst gleichwertig gestaltet — keine
   hervorgehobene Zustimmung, kein Nudging.
   ------------------------------------------------------------------------ */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  display: grid;
  justify-items: center;
}
.consent[hidden] { display: none; }

.consent__box {
  width: min(46rem, 100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  box-shadow: 0 12px 40px rgba(0,0,0,0.16);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 1rem;
}
.consent__text { font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.consent__text strong { color: var(--ink); font-weight: 600; }
.consent__text a { color: var(--accent); text-decoration: underline; }

.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent__actions .pill { flex: 1 1 12rem; }   /* beide gleich groß */

@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-auf 0.45s var(--ease) both; }
  @keyframes consent-auf { from { opacity: 0; transform: translateY(16px); } }
}

/* --- 14. Einblenden ------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: 0.08s; }
  .reveal[data-delay="2"] { transition-delay: 0.16s; }
  .reveal[data-delay="3"] { transition-delay: 0.24s; }
}

/* --- 15. Offene Platzhalter --------------------------------------------- */

/* Platzhalter-Markierung ist standardmäßig UNSICHTBAR. Die Klasse bleibt im
   Markup stehen, damit die Stellen auffindbar bleiben — die vollständige
   Liste steht in OFFEN.md. Sichtbar machen mit ?todo=1 an der URL. */
[data-todo] .todo {
  box-shadow: inset 0 -0.12em 0 rgba(201, 154, 46, 0.7);
}
[data-todo] .hinweis { display: block; }


/* --- 16. Bewegung reduziert --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zoom { height: auto; padding: 0 var(--gutter); }
  .zoom__sticky { position: static; height: auto; overflow: visible; }
  .zoom__frame {
    position: relative; inset: auto;
    aspect-ratio: 16 / 9;
    clip-path: none;
    border-radius: var(--r-media);
  }
  .zoom__frame > img { transform: none; }
  .zoom__caption {
    position: static; color: var(--ink); text-shadow: none; margin-top: 1rem;
    opacity: 1; transform: none;
  }
  .scenes__sticky { position: static; height: auto; padding-block: var(--section); }
  .scenes__stage { display: grid; gap: 2rem; }
  .scene { grid-area: auto; opacity: 1; transform: none; }
  .scenes__track, .scenes__dots { display: none; }
  .gallery__track { scroll-behavior: auto; }
}