/* ==========================================================================
   Neubauprojekt Koppigen 2
   Design-System — Farben, Typografie, Sektionen, Animationen
   Breakpoints:  base < 768  |  md >= 768  |  lg >= 1201  |  xl >= 1728
   Root-Font:    4.2667vw    |  2vw        |  1.25vw      |  16px
   ========================================================================== */

/* ---------- Fonts ----------
   Switzer — Schweizer Grotesk, ITF Free Font Licence (kommerziell nutzbar).
   Eine Familie, Kontrast über Gewicht statt über Schriftmischung.        */
@font-face { font-family: Switzer; src: url(../fonts/switzer-300.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Switzer; src: url(../fonts/switzer-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Switzer; src: url(../fonts/switzer-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Switzer; src: url(../fonts/switzer-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Switzer; src: url(../fonts/switzer-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
img, video, svg, picture { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --bg-warm: #faf7f4;              /* leicht getönte Flächen auf Weiss */
  --bg-dark: #322622;
  --body: #715852;
  --dark-1: #49332c;
  --dark-2: #322622;
  --medium-1: #ae928a;
  --medium-2: #c8bbb0;
  /* Beschriftungen: auf hellem Grund dunkel genug (4.8:1), auf dunklem Grund hell */
  --label: #86685e;
  --accent: #a36752;
  --accent-light-1: #ebdcd0;
  --accent-light-2: #e3cdbb;
  --accent-light-3: #e3cdbb;
  --surface: #f4f0ec;
  --border-color: #e7e1db;
  --border-color-dark: rgba(113, 88, 82, 0.4);

  --banner-height: 3.5rem;
  --button-height: 2.5rem;
  --button-padding-x: 0.75rem;
  --button-padding-y: 0.78125rem;

  --stapelkarten-progress-bg: #dcd4cd;
  --stapelkarten-progress-fill: #ae928a;
  --stapel-zaehler-separator: #ebdcd0;
  --stapel-zaehler-number: #86685e;

  --ease-out: cubic-bezier(0, 0.3, 0.3, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --max-w: 1728px;
}

html {
  font-size: 4.2666666667vw;
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-family: Switzer, ui-sans-serif, system-ui, sans-serif;
}
@media (min-width: 48rem)     { html { font-size: 2vw; }    :root { --banner-height: 4.5rem; } }
@media (min-width: 75.063rem) { html { font-size: 1.25vw; } :root { --banner-height: 3.3333333333rem; --button-height: 2.037037037rem; --button-padding-x: .9259259259rem; --button-padding-y: .6481481481rem; } }
@media (min-width: 108rem)    { html { font-size: 16px; }   :root { --banner-height: 4.5rem; --button-height: 2.75rem; --button-padding-x: 1.25rem; --button-padding-y: .875rem; } }

body {
  color: var(--body);
  background-color: var(--bg);
  overflow-y: scroll;
  overflow-x: hidden;
}
body.is-scroll-disabled #app { overflow-y: hidden; position: fixed; top: 0; left: 0; right: 0; width: 100%; }

/* ==========================================================================
   Typografie — die Skala der Seite
   ========================================================================== */
.heading-xl, .heading-l, .heading-m, .heading-s,
.punkt-titel, .menue-kontakt-titel { font-family: Switzer, sans-serif; }

.heading-xl { font-weight: 600; font-size: 3.25rem; line-height: 1.0; letter-spacing: -.042em; }
.heading-l  { font-weight: 600; font-size: 2.25rem; line-height: 1.08; letter-spacing: -.035em; }
.heading-m  { font-weight: 600; font-size: 1.75rem; line-height: 1.14; letter-spacing: -.03em; }
.heading-s  { font-weight: 600; font-size: 1.375rem; line-height: 1.22; letter-spacing: -.025em; }
@media (min-width: 48rem) {
  .heading-xl { font-size: 5rem; line-height: 1.0; }
  .heading-l  { font-size: 2.7777777778rem; line-height: 1.08; }
  .heading-m  { font-size: 1.9444444444rem; line-height: 1.14; }
  .heading-s  { font-size: 1.3888888889rem; line-height: 1.22; }
}
@media (min-width: 75.063rem) {
  .heading-xl { font-size: 4.6296296296rem; line-height: 1.0; }
  .heading-l  { font-size: 2.7777777778rem; line-height: 1.08; }
  .heading-m  { font-size: 1.9444444444rem; line-height: 1.14; }
  .heading-s  { font-size: 1.3888888889rem; line-height: 1.22; }
}
@media (min-width: 108rem) {
  .heading-xl { font-size: 6.25rem; line-height: 1.0; }
  .heading-l  { font-size: 3.75rem; line-height: 1.08; }
  .heading-m  { font-size: 2.625rem; line-height: 1.14; }
  .heading-s  { font-size: 1.875rem; line-height: 1.22; }
}

.subheading-m, .subheading-s, .text-uppercase-spaced {
  font-family: Switzer, sans-serif;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.subheading-m { font-size: .6875rem; line-height: .9375rem; letter-spacing: .09em; }
.subheading-s { font-size: .5625rem; line-height: .6875rem; }
@media (min-width: 75.063rem) {
  .subheading-m { font-size: .5555555556rem; line-height: .7407407407rem; }
  .subheading-s { font-size: .462962963rem; line-height: .5555555556rem; }
}
@media (min-width: 108rem) {
  .subheading-m { font-size: .75rem; line-height: 1rem; }
  .subheading-s { font-size: .625rem; line-height: .75rem; }
}

.text-l { font-weight: 450; font-size: 1rem; line-height: 1.375rem; }
.text-m { font-weight: 450; font-size: .875rem; line-height: 1.25rem; }
.text-s { font-weight: 450; font-size: .8125rem; line-height: 1.125rem; }
@media (min-width: 75.063rem) {
  .text-l { font-size: .8333333333rem; line-height: 1.1574074074rem; }
  .text-m { font-size: .7407407407rem; line-height: 1.0185185185rem; }
  .text-s { font-size: .6481481481rem; line-height: .9259259259rem; }
}
@media (min-width: 108rem) {
  .text-l { font-size: 1.125rem; line-height: 1.5625rem; }
  .text-m { font-size: 1rem; line-height: 1.375rem; }
  .text-s { font-size: .875rem; line-height: 1.25rem; }
}
.punkt-titel { font-weight: 500; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.02em; }
@media (min-width: 108rem) { .punkt-titel { font-size: 1.375rem; line-height: 1.5rem; } }

.text-dark-1   { color: var(--dark-1); }
.text-medium-1 { color: var(--medium-1); }
.text-accent   { color: var(--accent); }
.text-accent-light-3 { color: var(--accent-light-3); }
.text-white    { color: #fff; }
.text-underline { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Gradient-Headings + Sweep-Fade ---------- */
.akzent-1 { color: var(--dark-2); padding-bottom: .06em; }
.akzent-2 { color: #fbf5f0; padding-bottom: .06em; }
.akzent-3 { color: #2b2523; padding-bottom: .06em; }

/* Der Signature-Effekt: Titel wischt beim Reinscrollen von unten ein.
   Umgesetzt über eine Maske statt über einen Textverlauf — dadurch ist der
   Ruhezustand eine volle, dunkle Schrift statt eines hellgrauen Verlaufs. */
.hat-einwisch { --einwisch: 0; }
.hat-einwisch > *:first-child { opacity: var(--einwisch); }
.hat-einwisch .akzent-1,
.hat-einwisch .akzent-2,
.hat-einwisch .akzent-3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-mask-image: linear-gradient(168deg, #000 0%, #000 44%, rgba(0,0,0,0) 76%);
          mask-image: linear-gradient(168deg, #000 0%, #000 44%, rgba(0,0,0,0) 76%);
  -webkit-mask-size: 100% 420%;
          mask-size: 100% 420%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0% calc(100% - var(--einwisch) * 100%);
          mask-position: 0% calc(100% - var(--einwisch) * 100%);
}
.hat-einwisch .akzent-1 { color: var(--dark-2); }
.hat-einwisch .akzent-3 { color: #2b2523; }
.hat-einwisch .akzent-2 { color: #fbf5f0; }

.titelkopf :first-child { margin-bottom: .5rem; color: var(--label); }
@media (min-width: 48rem)     { .titelkopf :first-child { margin-bottom: .75rem; } }
@media (min-width: 75.063rem) { .titelkopf :first-child { margin-bottom: .9259259259rem; } }
@media (min-width: 108rem)    { .titelkopf :first-child { margin-bottom: 1.25rem; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; white-space: nowrap;
  font-family: Switzer, sans-serif; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  font-size: .6875rem; line-height: .9375rem;
  padding: var(--button-padding-y) var(--button-padding-x);
  border: 0; border-radius: 6px;
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
@media (min-width: 75.063rem) { .btn { font-size: .6018518519rem; line-height: .7407407407rem; gap: .3703703704rem; } }
@media (min-width: 108rem)    { .btn { font-size: .8125rem; line-height: 1rem; gap: .5rem; } }

.btn-primary { background-color: #715852; color: #f4ebe4; box-shadow: inset 0 0 0 1px rgba(176,115,78,.4); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--dark-1); color: #fff; }
.btn-light { background-color: #f2e8e0; color: var(--dark-1); }
.btn-light:hover { background-color: var(--accent-light-2); }
.btn-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--body);
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.btn-icon:hover { color: var(--dark-1); background: var(--accent-light-2); }
.btn-icon svg { width: 1rem; }

/* ---------- Read-more-Link mit animierter Linie ---------- */
.read-more {
  --linie-von: #ae928a;
  --linie-bis: var(--border-color);
  --inhalt-deckkraft: 0;
  position: relative; display: flex; flex-direction: column; gap: .5rem; width: fit-content;
  padding-left: 1.25rem;
}
.read-more::before {
  content: ""; width: 1px; position: absolute; left: 0; top: 0; height: 100%;
  background-color: var(--linie-farbe, var(--linie-bis));
  transform: scaleY(var(--linien-mass, .02)); transform-origin: center top;
}
.read-more > * { opacity: var(--inhalt-deckkraft, 1); }
.read-more-label { color: var(--label); }
.read-more-link { color: var(--dark-1); display: inline-flex; align-items: baseline; gap: .5rem; }
.read-more-link .arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.read-more-link:hover .arrow { transform: translate(.25rem); }
@media (min-width: 75.063rem) { .read-more { padding-left: 1.8518518519rem; gap: .3703703704rem; } }
@media (min-width: 108rem)    { .read-more { padding-left: 2.5rem; gap: .5rem; } }

/* ==========================================================================
   Header / Banner
   ========================================================================== */
.banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-top: .375rem solid #ece5df;
  height: var(--banner-height);
  pointer-events: none;
}
@media (min-width: 75.063rem) { .banner { border-top-width: .2777777778rem; } }
@media (min-width: 108rem)    { .banner { border-top-width: .375rem; } }

.banner-content {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0 1.25rem; margin: 0 auto; max-width: var(--max-w);
  pointer-events: none; position: relative;
}
@media (min-width: 48rem)     { .banner-content { padding: 0 2rem; } }
@media (min-width: 75.063rem) { .banner-content { padding: 0 1.8518518519rem; } }
@media (min-width: 108rem)    { .banner-content { padding: 0 2.5rem; } }

.brand {
  position: absolute; top: 0; left: 50%; transform: translate(-50%);
  background-color: #ece5df;
  padding: .375rem 1.25rem .875rem;
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
  pointer-events: auto;
}
.brand::before, .brand::after {
  content: ""; position: absolute; top: 0; height: 10px; width: 1.5625rem;
  background-color: transparent; pointer-events: none;
}
.brand::before { border-top-left-radius: 10px; left: 100%; box-shadow: -10px 0 #ece5df; }
.brand::after  { border-top-right-radius: 10px; right: 100%; box-shadow: 10px 0 #ece5df; }
.brand-logo {
  display: block; white-space: nowrap;
  font-family: Switzer, sans-serif; font-weight: 600;
  color: var(--dark-2); text-align: center; line-height: 1;
}
.brand-logo .brand-mark { font-size: .8125rem; letter-spacing: .2em; display: block; }
.brand-logo .brand-sub {
  font-family: Switzer, sans-serif; font-weight: 500; text-transform: uppercase;
  font-size: .375rem; letter-spacing: .2em; color: var(--body); margin-top: .15rem; display: block;
}
@media (min-width: 48rem)     { .brand { padding: .625rem 2rem 1rem; }  .brand-logo .brand-mark { font-size: 1.35rem; } .brand-logo .brand-sub { font-size: .38rem; } }
@media (min-width: 75.063rem) { .brand { padding: .462962963rem 1.4814814815rem .7407407407rem; }  .brand-logo .brand-mark { font-size: 1rem; } .brand-logo .brand-sub { font-size: .2962962963rem; } }
@media (min-width: 108rem)    { .brand { padding: .625rem 2rem 1rem; }  .brand-logo .brand-mark { font-size: 1.35rem; } .brand-logo .brand-sub { font-size: .4rem; } }

.menue-knopf {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .75rem; border-radius: 6px; height: var(--button-height);
  margin-top: .625rem; pointer-events: auto;
  font-family: Switzer, sans-serif; font-weight: 500;
  letter-spacing: .04em; font-size: .6875rem; line-height: .625rem; text-transform: uppercase;
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out), transform .4s var(--ease-out);
}
@media (min-width: 48rem)     { .menue-knopf { margin-top: 1.125rem; margin-bottom: .5rem; } }
@media (min-width: 75.063rem) { .menue-knopf { margin-top: .8333333333rem; gap: .3703703704rem; padding: 0 .5555555556rem; font-size: .5092592593rem; line-height: .462962963rem; } }
@media (min-width: 108rem)    { .menue-knopf { margin-top: 1.125rem; gap: .5rem; padding: 0 .75rem; font-size: .6875rem; line-height: .625rem; } }

.banner.is-dark .menue-knopf {
  color: #f4ebe4; background: rgba(113,88,82,.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.banner.is-dark .menue-knopf:hover { color: #fff; background: rgba(113,88,82,.5); }
.banner.is-light .menue-knopf {
  color: var(--body); background: rgba(227,205,187,.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.banner.is-light .menue-knopf:hover { color: var(--dark-2); background: rgba(227,205,187,.5); }
.menue-knopf-strich { flex-shrink: 0; width: 1rem; }
.menue-knopf-strich:last-child { width: 1.125rem; }

/* ---------- Navigations-Overlay ---------- */
.menue {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg-dark);
  --label: #cbae9f; --dark-1: #f0e3d8; --body: #d5c8bf;
  display: grid; grid-template-columns: 1fr;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.menue.is-open { opacity: 1; visibility: visible; }
.menue-innen {
  max-width: var(--max-w); margin: 0 auto; width: 100%;
  padding: 5rem 1.25rem 2.5rem;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  align-content: start; overflow-y: auto;
}
@media (min-width: 75.063rem) {
  .menue-innen { grid-template-columns: 1fr 20rem; padding: 6.5rem 5.0925925926rem 3.7037037037rem; gap: 5rem; }
}
@media (min-width: 108rem) { .menue-innen { padding: 8.5rem 6.875rem 5rem; grid-template-columns: 1fr 26rem; } }

.menue-schliessen {
  position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2;
  color: var(--accent-light-2); width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  transition: background-color .3s var(--ease-out);
}
.menue-schliessen:hover { background: rgba(227,205,187,.15); }
.menue-lang { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.menue-lang a { color: rgba(227,205,187,.45); }
.menue-lang a.is-active { color: var(--accent-light-2); }
.menue-haupt { display: flex; flex-direction: column; gap: .25rem; }
.menue-haupt a {
  font-family: Switzer, sans-serif; font-weight: 400;
  font-size: 1.75rem; line-height: 1.35; letter-spacing: -.02em;
  color: transparent;
  background: linear-gradient(122deg, #fbf5f0 0%, #e0c7b4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .3s var(--ease-out);
}
.menue.is-open .menue-haupt a { opacity: 1; transform: none; }
.menue-haupt a:hover { filter: brightness(1.25); }
@media (min-width: 108rem) { .menue-haupt a { font-size: 2.625rem; } }
.menue-secondary { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 2rem; }
.menue-secondary a { color: rgba(227,205,187,.6); }
.menue-secondary a:hover { color: var(--accent-light-2); }
.menue-kontakt { border-top: 1px solid rgba(227,205,187,.2); padding-top: 1.5rem; }
.menue-kontakt-titel { color: var(--accent-light-3); margin-bottom: 1.25rem; font-size: 1.5rem; }
.menue-kontakt p { margin-bottom: 1.25rem; }
.menue-kontakt .label { display: block; color: var(--label); }
.menue-kontakt .name { display: block; color: var(--accent-light-2); }
.menue-kontakt a { color: rgba(227,205,187,.8); text-decoration: underline; text-underline-offset: .2em; display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.buehne { width: 100vw; position: relative; height: 85vh; max-height: 50.75rem; }
@media (min-width: 48rem) { .buehne { height: 100svh; max-height: none; } }

.buehne-rahmen { position: relative; width: 100%; height: 85vh; max-height: 50.75rem; overflow: hidden; }
@media (min-width: 48rem) { .buehne-rahmen { height: 100svh; max-height: none; } }
.buehne-medium { width: 100%; height: 100%; max-width: 100%; object-fit: cover; will-change: transform; }
.buehne-schleier {
  position: absolute; inset: 0;
  /* Weicher Schleier, damit die Schrift auf dem hellen Bild trägt. */
  background: radial-gradient(62% 62% at 50% 46%, rgba(20,13,10,.68), rgba(20,13,10,.06)),
              linear-gradient(180deg, rgba(20,13,10,.48) 0%, rgba(20,13,10,.1) 34%, rgba(20,13,10,.5) 100%);
  pointer-events: none;
}
.buehne-titelblock {
  position: absolute; inset: 0;
  padding: 0 1.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem; pointer-events: none;
}
@media (min-width: 48rem)  { .buehne-titelblock { padding: 0 4rem; gap: 1.5rem; } }
@media (min-width: 108rem) { .buehne-titelblock { gap: 2rem; } }
.buehne-titel {
  text-align: center; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
}
.buehne-untertitel {
  color: rgba(255,255,255,.94); text-align: center; text-wrap: balance;
  font-weight: 450; font-size: 1.0625rem; line-height: 1.4; letter-spacing: .01em;
  text-shadow: 0 1px 24px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(14px);
  animation: hero-unter .9s cubic-bezier(0,.3,.3,1) .95s forwards;
}
@media (min-width: 75.063rem) { .buehne-untertitel { font-size: 1.0185185185rem; } }
@media (min-width: 108rem)    { .buehne-untertitel { font-size: 1.375rem; } }
@keyframes hero-unter { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .buehne-untertitel { animation: none; opacity: 1; transform: none; }
}
.buehne-titel .reveal {
  display: block; text-align: center;
  color: #fff;
  padding-bottom: .06em;
  text-shadow: 0 2px 40px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
}
.buehne-titel[data-bewegung="zeilenweise"]:not([data-split-initialized]) { visibility: hidden; }
.menue-haupt a { color: #f0e2d6 !important; background: none !important; -webkit-text-fill-color: currentColor !important; }

.buehne-pfeil {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translate(-50%);
  display: flex; flex-direction: column; align-items: center;
  opacity: 1; transition: opacity .3s cubic-bezier(.25,.005,0,1);
}
.buehne[data-mit-promo] .buehne-pfeil { bottom: 3.75rem; }
@media (min-width: 48rem)     { .buehne[data-mit-promo] .buehne-pfeil { bottom: 5rem; } }
@media (min-width: 75.063rem) { .buehne[data-mit-promo] .buehne-pfeil { bottom: 4.6296296296rem; } }
@media (min-width: 108rem)    { .buehne[data-mit-promo] .buehne-pfeil { bottom: 6.25rem; } }
.buehne[data-is-scrolling="true"] .buehne-pfeil { opacity: 0; pointer-events: none; }
.buehne-pfeil-text { margin-bottom: .625rem; white-space: nowrap; color: rgba(252,248,244,.8); }
.buehne-pfeil-linie {
  width: 1px; height: 2.5rem; background-color: rgba(228,220,213,.8);
  position: relative; overflow: hidden;
}
@media (min-width: 75.063rem) { .buehne-pfeil-linie { height: 1.8518518519rem; } }
@media (min-width: 108rem)    { .buehne-pfeil-linie { height: 2.5rem; } }
.buehne-pfeil-lauf {
  position: absolute; top: -.75rem; width: 100%; height: 1.5rem;
  background-color: #fff;
  animation: scroll-indicator 3s cubic-bezier(.25,.005,0,1) infinite;
}
@keyframes scroll-indicator {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(3.25rem); opacity: 0; }
}

/* ---------- Hero-Promo-Karte ---------- */
.buehne-promo {
  position: relative; padding: 0 1.25rem;
  margin-top: -10rem; margin-bottom: -3.75rem; z-index: 6;
}
.buehne-promo-text {
  background: linear-gradient(118deg, #f7f1ec 0%, #ece5df 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border-radius: 8px 8px 0 0;
  padding: 2.5rem 1.25rem; gap: 1.25rem;
}
.buehne-promo-text .heading-m { color: var(--dark-1); }
.buehne-promo-text p { color: var(--body); max-width: 26rem; }
.buehne-promo-bild { position: relative; border-radius: 0 0 8px 8px; overflow: hidden; height: 17.5rem; }
.buehne-promo-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .buehne-promo {
    margin-top: -15rem; margin-bottom: -5.625rem; padding: 0 1.25rem;
    display: grid; grid-template-columns: 1fr 1fr; height: 20.125rem;
  }
  .buehne-promo-text { border-radius: 12px 0 0 12px; padding: 3.75rem 2rem; gap: 2rem; }
  .buehne-promo-bild { height: auto; border-radius: 0 12px 12px 0; }
}
@media (min-width: 75.063rem) {
  .buehne-promo {
    margin-top: -14.8148148148rem; margin-bottom: -5.5555555556rem; padding: 0;
    height: 18.6574074074rem; grid-template-columns: 25.2777777778rem 25.2777777778rem; justify-content: center;
  }
  .buehne-promo-text { padding: 3.7037037037rem 1.8518518519rem; gap: 1.8518518519rem; }
}
@media (min-width: 108rem) {
  .buehne-promo { height: 25.1875rem; margin-top: -20rem; margin-bottom: -7.5rem; grid-template-columns: 34.125rem 34.125rem; }
  .buehne-promo-text { padding: 5rem 2.5rem; gap: 2.5rem; }
}

/* ==========================================================================
   Scroll-Cards (klebende Spalte + Fortschrittslinie + wechselnder Text)
   ========================================================================== */
.stapelkarten { margin: 7.5rem auto; }
@media (min-width: 48rem)     { .stapelkarten { margin: 11.25rem auto; } }
@media (min-width: 75.063rem) { .stapelkarten { margin: 11.1111111111rem auto; } }
@media (min-width: 108rem)    { .stapelkarten { margin: 15rem auto; } }

.stapel-titel { margin-bottom: 3.75rem; padding: 0 1.25rem; }
.stapel-obertitel { margin-bottom: .5rem; }
.stapel-aktuell { display: none; }
.stapel-raum { display: flex; flex-direction: column; gap: 2.5rem; padding: 0 1.25rem; }
.stapel-karte { display: flex; flex-direction: column-reverse; gap: .75rem; }
.stapel-bild { width: 100%; aspect-ratio: 275/178; position: relative; border-radius: 8px; overflow: hidden; }
.stapel-bild img { width: 100%; height: 100%; object-fit: cover; }
.stapel-text { display: flex; flex-direction: column; gap: .5rem; position: relative; }
.stapel-zaehler { display: block; margin-bottom: .3703703704rem; }
.stapel-zaehler .number { color: var(--stapel-zaehler-number); }
.stapel-zaehler .separator { color: var(--stapel-zaehler-separator); }
.stapel-kartentitel { color: var(--body); }

@media (min-width: 75.063rem) {
  .stapelkarten {
    display: grid;
    grid-template-columns: 31.25rem 37.6851851852rem;
    gap: 4.212962963rem;
    align-items: start;
    padding-left: 5.0925925926rem; padding-right: 1.8518518519rem;
    max-width: var(--max-w);
  }
  .stapel-titel { padding: 0; margin-bottom: 3.7037037037rem; }
  .stapel-obertitel { margin-bottom: .9259259259rem; }
  .stapel-titelfeld {
    display: flex; flex-direction: column; justify-content: flex-start;
    height: calc(100vh - 5.5555555556rem * 2);
    position: sticky; top: 5.5555555556rem;
    width: 31.25rem;
  }
  .stapel-titelfeld::before {
    content: ""; position: absolute; width: 1px; height: 100%;
    background-color: var(--stapelkarten-progress-bg); top: 0; right: -2.037037037rem;
  }
  .stapel-titelfeld::after {
    content: ""; position: absolute; width: 1px; height: var(--progress, 0%);
    background-color: var(--stapelkarten-progress-fill); top: 0; right: -2.037037037rem;
    transition: height .8s var(--ease-io);
  }
  .stapel-aktuell {
    display: block; position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); opacity: 0; min-height: 8.3333333333rem;
  }
  .stapel-aktuell .stapel-text {
    position: absolute; bottom: 0; left: 0; right: 0; opacity: 0;
    transform: translateY(9.2592592593rem) translateZ(0);
    transition: opacity .8s var(--ease-io), transform .8s var(--ease-io);
    width: 18.3796296296rem; gap: .3703703704rem;
  }
  .stapel-aktuell .stapel-text.is-active { opacity: 1; transform: translateZ(0); }
  .stapel-aktuell .stapel-text.is-prev { opacity: 0; transform: translateY(-9.2592592593rem) translateZ(0); }
  .stapel-raum { gap: 3.7037037037rem; padding: 0; }
  .stapel-karte { flex-direction: row; align-items: flex-start; gap: .9259259259rem; padding: 0 !important; }
  .stapel-karte .stapel-text { display: none; }
  .stapel-bild { width: 37.6851851852rem; aspect-ratio: 814/525; border-radius: 12px; }
}
@media (min-width: 108rem) {
  .stapelkarten {
    grid-template-columns: 42.1875rem 50.875rem;
    gap: clamp(5.6875rem, -7.034rem + 11.779vw, 11.8125rem);
    padding-left: 6.875rem; padding-right: 2.5rem;
    max-width: clamp(108rem, 95.02rem + 12.019vw, 114.25rem);
  }
  .stapel-titelfeld { width: 42.1875rem; height: calc(100vh - 15rem); top: 7.5rem; }
  .stapel-titelfeld::before,
  .stapel-titelfeld::after { right: -2.75rem; }
  .stapel-titel { margin-bottom: 5rem; }
  .stapel-obertitel { margin-bottom: 1.25rem; }
  .stapel-aktuell { min-height: 11.25rem; bottom: 7.5rem; }
  .stapel-aktuell .stapel-text { transform: translateY(12.5rem) translateZ(0); width: 24.8125rem; gap: .5rem; }
  .stapel-aktuell .stapel-text.is-prev { transform: translateY(-12.5rem) translateZ(0); }
  .stapel-raum { gap: 5rem; }
  .stapel-karte { gap: 1.25rem; }
  .stapel-bild { width: 50.875rem; }
}

/* ==========================================================================
   Expanding Image — "Bleed"-Effekt via riesigem box-shadow
   ========================================================================== */
.wachsbild {
  --randlos-fortschritt: 0;
  --wachsbild-padding: 1.25rem;
  --wachsbild-aspect-ratio: 1 / 1;
  --randlos-radius: 8px;
  position: relative; opacity: 0; overflow: hidden;
}
.wachsbild[data-init="ready"] { opacity: 1; transition: opacity .3s cubic-bezier(0,.3,.3,1); }
.wachsbild::after {
  z-index: 1; content: ""; position: absolute;
  inset: 0 calc(var(--wachsbild-padding) * (1 - var(--randlos-fortschritt)));
  pointer-events: none;
  box-shadow: 0 0 0 9999px var(--bg);
  border-radius: calc(var(--randlos-radius) * (1 - var(--randlos-fortschritt)));
}
.wachsbild-inhalt { aspect-ratio: var(--wachsbild-aspect-ratio); overflow: hidden; position: relative; }
.wachsbild-inhalt img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: calc(var(--randlos-radius) * (1 - var(--randlos-fortschritt)));
}
@media (min-width: 48rem) {
  .wachsbild { --wachsbild-aspect-ratio: 380 / 241; --randlos-radius: 12px; }
}
@media (min-width: 75.063rem) { .wachsbild { --wachsbild-padding: 1.8518518519rem; } }
@media (min-width: 108rem)    { .wachsbild { --wachsbild-padding: 2.5rem; } }

/* ==========================================================================
   Architektur / Zitat / Kennzahlen
   ========================================================================== */
.titelbreite {
  padding: 0 1.25rem; margin: 0 auto 3.75rem;
}
@media (min-width: 48rem)     { .titelbreite { padding: 0 3.125rem; margin-bottom: 3rem; } }
@media (min-width: 75.063rem) { .titelbreite { padding: 0 5.0925925926rem; margin-bottom: 2.7777777778rem; max-width: var(--max-w); } }
@media (min-width: 108rem)    { .titelbreite { padding: 0 6.875rem; margin-bottom: 3.75rem; } }
.titelbreite h3 { max-width: 37.6851851852rem; }

.bautraeger-teil { margin: 7.5rem auto; }
@media (min-width: 48rem)     { .bautraeger-teil { margin: 11.25rem auto; } }
@media (min-width: 75.063rem) { .bautraeger-teil { margin: 11.1111111111rem auto; } }
@media (min-width: 108rem)    { .bautraeger-teil { margin: 15rem auto; } }

.quote-arguments {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 1.25rem;
  display: grid; grid-template-columns: 1fr; gap: 3.75rem;
}
@media (min-width: 48rem)     { .quote-arguments { padding: 0 3.125rem; } }
@media (min-width: 75.063rem) { .quote-arguments { padding: 0 5.0925925926rem; grid-template-columns: 1fr 1fr; gap: 5.0925925926rem; align-items: center; } }
@media (min-width: 108rem)    { .quote-arguments { padding: 0 6.875rem; gap: 6.875rem; } }

.quote { display: flex; flex-direction: column; gap: 1.5rem; }
.quote-mark { width: 2.5rem; color: var(--medium-1); }
.quote-text { color: var(--dark-1); }
.quote-text p + p { margin-top: 1rem; }
.quote-footer { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.quote-avatar { width: 4.5rem; height: 4.5rem; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-cite { display: flex; flex-direction: column; }
.quote-cite cite { font-style: normal; color: var(--dark-1); }
.quote-cite span { color: var(--label); }

.kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem 1.5rem; align-content: center; }
.kennzahlen > div {
  --linie-von: #ae928a; --linie-bis: var(--border-color); --inhalt-deckkraft: 0;
  position: relative; padding: 1.5rem .5rem 0;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  text-align: center;
}
/* Die Linie liegt waagrecht über der Kennzahl und wächst aus der Mitte —
   passend zur zentrierten Ausrichtung. */
.kennzahlen > div::before {
  content: ""; height: 1px; position: absolute; left: 0; right: 0; top: 0;
  background-color: var(--linie-farbe, var(--linie-bis));
  transform: scaleX(var(--linien-mass, .02)); transform-origin: center;
}
.kennzahlen > div > * { opacity: var(--inhalt-deckkraft, 1); }
.kennzahlen dd { font-weight: 600; font-size: 2.5rem; line-height: 1; letter-spacing: -.035em; color: var(--accent); margin: 0; font-variant-numeric: tabular-nums; }
.kennzahlen dt { color: var(--label); }
@media (min-width: 75.063rem) { .kennzahlen > div { padding-top: 1.8518518519rem; } .kennzahlen dd { font-size: 3.3333333333rem; } }
@media (min-width: 108rem)    { .kennzahlen > div { padding-top: 2.5rem; } .kennzahlen dd { font-size: 4.5rem; } }

/* ==========================================================================
   Animierte Zeitachse
   ========================================================================== */
.zeitachse {
  display: flex; flex-direction: column;
  max-width: var(--max-w); margin: 7.5rem auto;
  padding: 0 1.25rem; gap: 3.75rem;
}
/* Auf dem Handy passt der Titel nicht auf eine Zeile — dort darf er umbrechen,
   sonst schiebt er die ganze Seite seitlich raus. */
.einzeilig { white-space: normal; }
@media (min-width: 48rem) { .einzeilig { white-space: nowrap; } }
@media (min-width: 48rem)     { .zeitachse { padding: 0 5.3125rem; gap: 5.625rem; margin: 11.25rem auto; } }
@media (min-width: 75.063rem) { .zeitachse { padding: 0 5.0925925926rem; gap: 5.5555555556rem; margin: 11.1111111111rem auto; } }
@media (min-width: 108rem)    { .zeitachse { padding: 0 6.875rem; gap: 7.5rem; margin: 15rem auto; } }
.zeitachse-kopf { display: flex; flex-direction: column; gap: .5rem; }
.zeitachse-kopf-titel { color: var(--label); }
@media (min-width: 75.063rem) { .zeitachse-kopf { gap: .9259259259rem; width: 100%; max-width: 40rem; } }
@media (min-width: 108rem)    { .zeitachse-kopf { gap: 1.25rem; width: 100%; max-width: 54rem; } }

.zeitachse-raum { display: flex; position: relative; }
@media (min-width: 75.063rem) { .zeitachse-raum { width: 100%; } }
@media (min-width: 48rem) { .zeitachse-liste { width: 100%; }
  .zeitachse-punkt { flex: 1 1 0; min-width: 0; } }
.zeitachse-liste { position: relative; z-index: 1; display: flex; flex-direction: column; }
@media (min-width: 48rem) { .zeitachse-liste { flex-direction: row; align-items: flex-start; } }

.zeitachse-linien { position: absolute; z-index: 0; left: calc(50% - .5px); top: 0; bottom: 0; width: 1px; }
/* Die Linie sitzt unter dem zweizeiligen Datumsblock, nicht darin */
@media (min-width: 48rem)     { .zeitachse-linien { left: 0; right: 0; top: 3.9rem; bottom: auto; width: auto; height: 1px; } }
@media (min-width: 75.063rem) { .zeitachse-linien { inset: 3.7rem 0 auto; } }
@media (min-width: 108rem)    { .zeitachse-linien { inset: 4.6rem 0 auto; } }
.zeitachse-linie-rest {
  --linien-mass: 0; position: absolute; inset: 0;
  background-color: rgba(134,104,94,.35);
  transform: scaleY(var(--linien-mass, 0)); transform-origin: top;
}
.zeitachse-linie-voll {
  --linien-mass: 0; position: absolute; inset: 0 0 auto;
  background-color: var(--accent);
  height: calc(var(--fuellgrad, 0) * 1%);
  transform: scaleY(var(--linien-mass, 0)); transform-origin: top;
}
@media (min-width: 48rem) {
  .zeitachse-linie-rest { transform: scaleX(var(--linien-mass, 0)); transform-origin: left; }
  .zeitachse-linie-voll {
    inset: 0 auto 0 0; height: 100%; width: calc(var(--fuellgrad, 0) * 1%);
    transform: scaleX(var(--linien-mass, 0)); transform-origin: left;
  }
}
.zeitachse-punkt {
  --eintrag-deckkraft: 0;
  display: grid; gap: 2.5625rem; align-items: start;
  padding-bottom: 2.5rem; grid-template-columns: 1fr 1fr;
  opacity: var(--eintrag-deckkraft, 0);
}
@media (min-width: 48rem) {
  .zeitachse-punkt {
    grid-template-columns: 1fr; grid-template-rows: auto auto;
    padding-bottom: 0; padding-right: 1.25rem; gap: 1.5625rem;
  }
  .zeitachse-punkt:last-child { padding-right: 0; }
}
@media (min-width: 75.063rem) { .zeitachse-punkt { padding-right: 3.2407407407rem; gap: 1.8981481481rem; } }
@media (min-width: 108rem)    { .zeitachse-punkt { padding-right: 4.375rem; gap: 2.5625rem; } }
.zeitachse-datum-feld { display: flex; justify-content: flex-end; text-align: end; color: var(--label); }
@media (min-width: 48rem) { .zeitachse-datum-feld { justify-content: flex-start; text-align: start; } }
.zeitachse-datum { display: flex; flex-direction: column; }
.zeitachse-datum .month { font-family: Switzer, sans-serif; font-size: 1.5rem; line-height: 1.1; }
.zeitachse-datum .year { font-family: Switzer, sans-serif; font-size: 1.5rem; line-height: 1.1; }
@media (min-width: 108rem) { .zeitachse-datum .month, .zeitachse-datum .year { font-size: 1.875rem; } }
.zeitachse-eintrag-feld { display: flex; }
@media (min-width: 48rem)     { .zeitachse-eintrag-feld { text-align: start; width: auto; } }
@media (min-width: 75.063rem) { .zeitachse-eintrag-feld { width: auto; } }
@media (min-width: 108rem)    { .zeitachse-eintrag-feld { width: auto; } }
.zeitachse-eintrag { display: block; color: var(--dark-1); }
.zeitachse-punkt .dot { display: none; }

/* ==========================================================================
   Horizontal Scroll — gepinnte Sektion, die seitwärts fährt
   ========================================================================== */
.querlauf { position: relative; }
.querlauf .hs-sticky {
  position: sticky; top: 0;
  min-height: 100vh; height: 100svh; overflow: hidden;
  margin: -7.5rem 0; padding: 120px 50px;
  display: flex;
}
@media (min-width: 48rem) { .querlauf .hs-sticky { margin: -11.25rem 0; padding: 180px 85px; } }
@media (min-width: 75.063rem) { .querlauf .hs-sticky { margin: 0; padding: 89px 81px; } }
@media (min-width: 108rem) {
  .querlauf .hs-sticky {
    margin: 0; padding-top: 120px; padding-bottom: 120px;
    padding-right: 110px; padding-left: max(110px, (100vw - 1728px) / 2 + 110px);
  }
}
.querlauf .hs-track {
  display: flex; align-items: stretch; height: 100%; min-width: 0;
  will-change: transform; backface-visibility: hidden; gap: 1.25rem;
}
@media (min-width: 75.063rem) { .querlauf .hs-track { gap: .9259259259rem; } }
@media (min-width: 108rem)    { .querlauf .hs-track { gap: 1.25rem; } }
.querlauf .hs-text {
  width: 13.375rem; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: end;
  margin-right: 2rem; hyphens: auto;
}
@media (min-width: 48rem)     { .querlauf .hs-text { width: 15rem; margin-right: 4.0625rem; } }
@media (min-width: 75.063rem) { .querlauf .hs-text { width: 18.3796296296rem; margin-right: 3.2407407407rem; } }
@media (min-width: 108rem)    { .querlauf .hs-text { width: 24.8125rem; margin-right: 4.375rem; } }
.querlauf .hs-text h2 { margin-bottom: 1.25rem; }
.querlauf .hs-item { flex: 0 0 auto; height: 100%; display: block; position: relative; }
.querlauf .hs-item img {
  display: block; height: 100%; width: auto !important;
  object-fit: cover; border-radius: 8px;
}
@media (min-width: 48rem) { .querlauf .hs-item img { border-radius: 12px; } }

/* ==========================================================================
   Aussichts-Sektion (Etagen-Wechsler)
   ========================================================================== */
.panorama-section {
  max-width: var(--max-w); margin: 7.5rem auto; padding: 0 1.25rem;
}
@media (min-width: 48rem)     { .panorama-section { margin: 11.25rem auto; padding: 0 3.125rem; } }
@media (min-width: 75.063rem) { .panorama-section { margin: 11.1111111111rem auto; padding: 0 5.0925925926rem; } }
@media (min-width: 108rem)    { .panorama-section { margin: 15rem auto; padding: 0 6.875rem; } }
.panorama-section-heading { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2.5rem; }
@media (min-width: 108rem) { .panorama-section-heading { gap: 1.25rem; margin-bottom: 5rem; } }
.panorama-section-heading h3 { max-width: 37.6851851852rem; }
.panorama-canvas {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
@media (min-width: 48rem) { .panorama-canvas { border-radius: 12px; } }
.panorama-frame {
  position: absolute; inset: 0; opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out);
}
.panorama-frame.is-active { opacity: 1; transform: scale(1); }
.panorama-frame img { width: 100%; height: 100%; object-fit: cover; }
.panorama-canvas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
.panorama-controls {
  position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.panorama-controls-group-label { color: #fff; opacity: .8; }
.panorama-controls-group-buttons {
  display: flex; gap: 1px; border-radius: 6px; overflow: hidden;
  background: rgba(228,220,213,.35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.panorama-radio-label {
  padding: .5rem .875rem; cursor: pointer; color: var(--dark-1);
  background: rgba(228,220,213,.8);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.panorama-radio-label:hover { background: var(--accent-light-2); }
.panorama-radio input { position: absolute; opacity: 0; pointer-events: none; }
.panorama-radio input:checked + .panorama-radio-label { background: var(--body); color: var(--bg); }
.panorama-info-box {
  position: absolute; z-index: 2; right: 1.25rem; bottom: 1.25rem;
  display: flex; align-items: center; gap: .75rem;
}
.panorama-info-box a { color: #fff; display: inline-flex; align-items: center; gap: .5rem; }
.panorama-info-box a .arrow { transition: transform .3s var(--ease-out); }
.panorama-info-box a:hover .arrow { transform: translate(.25rem); }

/* ==========================================================================
   Zwei Bilder + Ausstattungsliste
   ========================================================================== */
.naturraum-teil { margin: 7.5rem auto; max-width: var(--max-w); }
@media (min-width: 48rem)     { .naturraum-teil { margin: 11.25rem auto; } }
@media (min-width: 75.063rem) { .naturraum-teil { margin: 11.1111111111rem auto; } }
@media (min-width: 108rem)    { .naturraum-teil { margin: 15rem auto; } }
.natur-intro { padding: 0 1.25rem; display: grid; gap: 1.25rem; }
.natur-intro--breit { grid-template-columns: 1fr; gap: 2rem; }
.natur-intro-texte { display: grid; gap: 1.75rem; }
/* Eigene Grösse: die Sektion trägt nur zwei Absätze, in der normalen
   Fliesstextgrösse wirken sie darin verloren. */
.natur-text { font-weight: 450; font-size: 1.0625rem; line-height: 1.6; color: var(--body); }
@media (min-width: 75.063rem) { .natur-text { font-size: 1.1111111111rem; } }
@media (min-width: 108rem)    { .natur-text { font-size: 1.25rem; } }
@media (min-width: 48rem) {
  .natur-intro-texte {
    grid-template-columns: minmax(0, 21rem) minmax(0, 21rem);
    justify-content: space-between; gap: 3rem;
  }
}
@media (min-width: 75.063rem) { .natur-intro-texte { grid-template-columns: minmax(0, 25.5rem) minmax(0, 25.5rem); } }
@media (min-width: 108rem)    { .natur-intro-texte { grid-template-columns: minmax(0, 34rem) minmax(0, 34rem); } }
@media (min-width: 48rem)     { .natur-intro { padding: 0 3.125rem; } }
@media (min-width: 75.063rem) { .natur-intro { padding: 0 5.0925925926rem; grid-template-columns: 27.2222222222rem 37.6851851852rem; justify-content: space-between; gap: 3.2407407407rem; align-items: baseline; }
.natur-intro--breit { grid-template-columns: 1fr; gap: 2.7777777778rem; } }
@media (min-width: 108rem)    { .natur-intro { padding: 0 6.875rem; grid-template-columns: 36.75rem 50.875rem; gap: 4.375rem; }
.natur-intro--breit { grid-template-columns: 1fr; gap: 3.5rem; } }
.bildpaar {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  padding: 0 1.25rem; margin-top: 3.75rem;
}
@media (min-width: 48rem)     { .bildpaar { grid-template-columns: 1fr 1fr; padding: 0 3.125rem; margin-top: 5.625rem; } }
@media (min-width: 75.063rem) { .bildpaar { padding: 0 5.0925925926rem; gap: .9259259259rem; margin-top: 5.5555555556rem; } }
@media (min-width: 108rem)    { .bildpaar { padding: 0 6.875rem; gap: 1.25rem; margin-top: 7.5rem; } }
.bildpaar figure { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 3/2; }
@media (min-width: 48rem) { .bildpaar figure { border-radius: 12px; } }
.bildpaar img { width: 100%; height: 100%; object-fit: cover; }

.merkmale {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 1.25rem;
  padding: 0 1.25rem; margin-top: 3.75rem;
}
@media (min-width: 48rem)     { .merkmale { grid-template-columns: repeat(3, 1fr); padding: 0 3.125rem; margin-top: 5.625rem; } }
@media (min-width: 75.063rem) { .merkmale { grid-template-columns: repeat(4, 11.9444444444rem); gap: 1.8518518519rem 4.1666666667rem; padding: 0 5.0925925926rem; margin-top: 5.5555555556rem; } }
@media (min-width: 108rem)    { .merkmale { grid-template-columns: repeat(4, 16.125rem); gap: 2.5rem 5.625rem; padding: 0 6.875rem; margin-top: 7.5rem; } }
.merkmal {
  --linie-von: #ae928a; --linie-bis: var(--border-color); --inhalt-deckkraft: 0;
  position: relative; display: flex; flex-direction: column;
  justify-content: space-between; padding-left: 1.25rem; gap: .5rem;
}
.merkmal::before {
  content: ""; width: 1px; position: absolute; left: 0; top: 0; height: 100%;
  background-color: var(--linie-farbe, var(--linie-bis));
  transform: scaleY(var(--linien-mass, .02)); transform-origin: center top;
}
.merkmal > * { opacity: var(--inhalt-deckkraft, 1); }
.merkmal dt { color: var(--label); }
.merkmal dd { margin: 0; color: var(--dark-1); }
@media (min-width: 75.063rem) { .merkmal { padding-left: 1.8518518519rem; gap: .3703703704rem; } }
@media (min-width: 108rem)    { .merkmal { padding-left: 2.5rem; gap: .5rem; } }

/* ==========================================================================
   Beratungstermin
   ========================================================================== */
.beratung {
  max-width: var(--max-w); margin: 7.5rem auto; padding: 0 1.25rem;
}
@media (min-width: 48rem)     { .beratung { margin: 11.25rem auto; padding: 0 3.125rem; } }
@media (min-width: 75.063rem) { .beratung { margin: 11.1111111111rem auto; padding: 0 5.0925925926rem; } }
@media (min-width: 108rem)    { .beratung { margin: 15rem auto; padding: 0 6.875rem; } }
.beratung-innen {
  background: linear-gradient(118deg, #f7f1ec 0%, #ece5df 100%);
  border-radius: 12px; overflow: hidden;
  display: grid; grid-template-columns: 1fr; align-items: center;
  padding: 2.5rem 1.5rem; gap: 2.5rem;
}
@media (min-width: 48rem)     { .beratung-innen { grid-template-columns: 1fr auto; padding: 3.5rem 3rem; gap: 3.5rem; } }
@media (min-width: 75.063rem) { .beratung-innen { padding: 4.0740740741rem 4.6296296296rem; gap: 5.0925925926rem; } }
@media (min-width: 108rem)    { .beratung-innen { padding: 5.5rem 6.25rem; gap: 6.875rem; } }
.beratung-inhalt {
  display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start;
}
@media (min-width: 48rem) { .beratung-inhalt { gap: 1.5rem; } }
.beratung-inhalt .heading-m { color: var(--dark-1); max-width: 24rem; }
.beratung-inhalt p { max-width: 32rem; }
.beratung-inhalt .btn { margin-top: .5rem; }

/* Beraterkarte — bewusst klein: ein Porträt in Plakatgrösse wirkt aufdringlich,
   ein Visitenkartenformat wirkt wie ein Ansprechpartner. */
.berater {
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
  padding-top: 1.5rem; border-top: 1px solid rgba(124, 96, 82, .18);
}
@media (min-width: 48rem) {
  .berater {
    padding: 0 0 0 3rem; border-top: 0; border-left: 1px solid rgba(124, 96, 82, .18);
    width: 15.5rem;
  }
}
@media (min-width: 108rem) { .berater { width: 19rem; padding-left: 4rem; } }
.berater-bild {
  width: 8rem; height: 10.5rem; object-fit: cover; object-position: 50% 20%;
  border-radius: 10px; display: block;
}
@media (min-width: 108rem) { .berater-bild { width: 9.5rem; height: 12.5rem; } }
.berater-daten { font-style: normal; display: flex; flex-direction: column; gap: .2rem; }
.berater-daten .role { color: var(--label); margin-bottom: .35rem; }
.berater-daten .name { color: var(--dark-1); font-weight: 600; }
.berater-daten a { color: var(--body); text-decoration: underline; text-underline-offset: .2em; }
.berater-daten a:hover { color: var(--accent); }

/* ==========================================================================
   Innenausbau-Sektion
   ========================================================================== */
.ausbau-teil { position: relative; margin: 7.5rem 0; }
@media (min-width: 48rem)     { .ausbau-teil { margin: 11.25rem 0; } }
@media (min-width: 75.063rem) { .ausbau-teil { margin: 11.1111111111rem 0; } }
@media (min-width: 108rem)    { .ausbau-teil { margin: 15rem 0; } }
.ausbau__schmuck { position: relative; }
.ausbau__schmuck::before,
.ausbau__schmuck::after {
  content: ""; position: absolute; width: 10.3125rem; aspect-ratio: 33/29;
  background: radial-gradient(closest-side, rgba(227,205,187,.75), rgba(227,205,187,0) 70%);
  filter: blur(6px); z-index: 0; pointer-events: none;
}
.ausbau__schmuck::before { top: -3.25rem; left: 5.1875rem; transform: rotate(-150deg); }
.ausbau__schmuck::after  { bottom: -5.3125rem; right: 3.875rem; transform: rotate(90deg); z-index: -1; }
@media (min-width: 108rem) {
  .ausbau__schmuck::before { left: calc(50vw - 33.75rem); top: -10.4375rem; width: 27.5rem; }
  .ausbau__schmuck::after  { right: calc(50vw - 8.75rem); bottom: -17.5625rem; width: 29.1875rem; }
}
.ausbau-kopf {
  position: relative; z-index: 1; max-width: var(--max-w);
  margin: 3.75rem auto; padding: 0 1.25rem;
  display: grid; grid-template-columns: 1fr; gap: 1.75rem;
}
@media (min-width: 48rem)     { .ausbau-kopf { margin: 5.625rem auto; padding: 0 3.125rem; } }
@media (min-width: 75.063rem) { .ausbau-kopf { margin: 5.5555555556rem auto; padding: 0 5.0925925926rem;
  grid-template-columns: 27.2222222222rem 37.6851851852rem; justify-content: space-between;
  gap: 3.2407407407rem; align-items: baseline; } }
@media (min-width: 108rem)    { .ausbau-kopf { margin: 7.5rem auto; padding: 0 6.875rem;
  grid-template-columns: 36.75rem 50.875rem; gap: 4.375rem; } }
.ausbau-text { display: flex; flex-direction: column; gap: 1.25rem; }
.ausbau__titel {
  display: flex; flex-direction: column; gap: .5rem;
}
@media (min-width: 48rem)     { .ausbau__titel { gap: .75rem; } }
@media (min-width: 75.063rem) { .ausbau__titel { gap: .9259259259rem; --titel-breite: 100%; } }
@media (min-width: 108rem)    { .ausbau__titel { gap: 1.25rem; --titel-breite: 100%; } }
.ausbau__titel h3 { width: var(--titel-breite, auto); }
.ausbau-teil .wachsbild { --wachsbild-aspect-ratio: 2 / 1; margin: 6.25rem 0 0; }
@media (min-width: 108rem) { .ausbau-teil .wachsbild { margin: 10rem 0 0; } }
.ausbau-punkte {
  max-width: var(--max-w); margin: 4rem auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 1.25rem; padding: 0 1.25rem;
}
@media (min-width: 48rem)     { .ausbau-punkte { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; margin-top: 5.625rem; padding: 0 3.125rem; } }
@media (min-width: 75.063rem) { .ausbau-punkte { grid-template-columns: repeat(4, 1fr); gap: 2.7777777778rem; margin-top: 5.5555555556rem; padding: 0 5.0925925926rem; } }
@media (min-width: 108rem)    { .ausbau-punkte { grid-template-columns: repeat(4, 1fr); gap: 3.75rem; margin-top: 7.5rem; padding: 0 6.875rem; } }
.ausbau-punkt {
  --linie-von: #ae928a; --linie-bis: var(--border-color); --inhalt-deckkraft: 0;
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding: 1.5rem .5rem 0; text-align: center;
}
.ausbau-punkt::before {
  content: ""; height: 1px; position: absolute; left: 0; right: 0; top: 0;
  background-color: var(--linie-farbe, var(--linie-bis));
  transform: scaleX(var(--linien-mass, .02)); transform-origin: center;
}
.ausbau-punkt > * { opacity: var(--inhalt-deckkraft, 1); }
.ausbau-punkt .num { color: var(--label); }
.ausbau-punkt h4 { color: var(--dark-1); }
@media (min-width: 75.063rem) { .ausbau-punkt { padding-top: 1.8518518519rem; } }
@media (min-width: 108rem)    { .ausbau-punkt { padding-top: 2.5rem; } }

/* ==========================================================================
   Quartier-Galerie mit Bleed-Hintergrund und Drag-Galerie
   ========================================================================== */
.lageteil { --randlos-fortschritt: 0; margin-top: 7.5rem; }
@media (min-width: 48rem)     { .lageteil { margin-top: 11.25rem; } }
@media (min-width: 75.063rem) { .lageteil { margin-top: 11.1111111111rem; } }
@media (min-width: 108rem)    { .lageteil { margin-top: 15rem; } }
.lageteil__grund { position: relative; width: 100%; }
.lageteil__grund::before {
  content: ""; position: absolute; z-index: 0;
  background: linear-gradient(118deg, #f8f3ef 0%, #eee7e1 100%);
  inset: calc(1.25rem * (1 - var(--randlos-fortschritt)));
  border-radius: calc(12px * (1 - var(--randlos-fortschritt)));
}
@media (min-width: 75.063rem) { .lageteil__grund::before { inset: calc(1.8518518519rem * (1 - var(--randlos-fortschritt))); } }
@media (min-width: 108rem)    { .lageteil__grund::before { inset: calc(2.5rem * (1 - var(--randlos-fortschritt))); } }
.lageteil__innen {
  position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: column; gap: 2.5rem;
  padding: 3.75rem 3.125rem;
}
@media (min-width: 48rem)     { .lageteil__innen { gap: 5rem; padding: 5.625rem 5.3125rem; } }
@media (min-width: 75.063rem) { .lageteil__innen { padding: 5.5555555556rem 3.2407407407rem; gap: 3.7037037037rem; } }
@media (min-width: 108rem)    { .lageteil__innen { padding: 7.5rem 4.375rem; gap: 5rem; } }
.lageteil__kopf { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 48rem) {
  .lageteil__kopf {
    display: grid; grid-template-columns: 20.5625rem 16.5rem;
    gap: 5.625rem 1.25rem; justify-content: space-between;
  }
}
@media (min-width: 75.063rem) { .lageteil__kopf { grid-template-columns: minmax(0, 29.1666666667rem) minmax(0, 31.0185185185rem); gap: 4.1666666667rem; } }
@media (min-width: 108rem)    { .lageteil__kopf { grid-template-columns: minmax(0, 39.375rem) minmax(0, 41.875rem); gap: 5.625rem; } }
.lageteil__titel { display: flex; flex-direction: column; gap: .75rem; }
.lageteil__text { display: flex; flex-direction: column; align-self: end; gap: 1.25rem; position: relative; padding-top: 2.25rem; }
.lageteil__text::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: var(--medium-2);
}
@media (min-width: 48rem) {
  .lageteil__text::before { left: -2.5rem; top: 0; width: 1px; height: 100%; }
}
@media (min-width: 75.063rem) { .lageteil__text { width: 100%; padding-top: 1.8518518519rem; gap: 1.4814814815rem; } .lageteil__text::before { left: -2.3148148148rem; } }
@media (min-width: 108rem)    { .lageteil__text { width: 100%; padding-top: 2.5rem; gap: 2rem; } .lageteil__text::before { left: -3.125rem; } }
.lageteil__cta { display: flex; flex-direction: column; gap: .25rem; }
.lageteil__cta .read-more-label { color: #8a4f3b !important; }
.lageteil__galerierahmen {
  overflow: hidden; touch-action: pan-y; user-select: none; position: relative;
  left: 50%; margin-left: -50vw; width: 100vw;
  cursor: grab;
}
.lageteil__galerierahmen.is-dragging { cursor: grabbing; }
.lageteil__galerie { display: flex; gap: 1.25rem; will-change: transform; }
.lageteil__bild {
  flex: 0 0 auto; width: 17.5rem; aspect-ratio: 3/2;
  border-radius: 8px; overflow: hidden;
}
@media (min-width: 48rem) { .lageteil__bild { width: 26rem; border-radius: 12px; } }
.lageteil__bild img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Drag-Cursor */
.zieh-zeiger {
  position: fixed; z-index: 60; top: 0; left: 0;
  width: 5.5rem; height: 5.5rem; border-radius: 999px;
  background: rgba(50,38,34,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #f4ebe4; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-out);
  font-family: Switzer, sans-serif; font-weight: 500;
  font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase;
}
.zieh-zeiger.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ==========================================================================
   Attika-Wohnungen (Tab-Sektion mit Vollbild-Hintergrund)
   ========================================================================== */
.bauweise {
  --bg-color: var(--bg-dark);
  --label: #cbae9f;
  --randlos-fortschritt: 0;
  position: relative;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: 100vh; min-height: 100svh;
  margin-top: 2.5rem;
  clip-path: inset(0);
}
.bauweise--kasten { --randabstand: 1.25rem; --randlos-radius: 8px; overflow: hidden; margin-top: 7.5rem; }
@media (min-width: 48rem)     { .bauweise--kasten { --randlos-radius: 12px; margin-top: 11.25rem; } }
@media (min-width: 75.063rem) { .bauweise--kasten { --randabstand: 1.8518518519rem; margin-top: 11.1111111111rem; } }
@media (min-width: 108rem)    { .bauweise--kasten { --randabstand: 2.5rem; margin-top: 15rem; } }
.bauweise--kasten::after {
  content: ""; position: absolute;
  inset: calc(var(--randabstand) * (1 - var(--randlos-fortschritt)));
  pointer-events: none;
  box-shadow: 0 0 0 9999px var(--bg);
  border-radius: calc(var(--randlos-radius) * (1 - var(--randlos-fortschritt)));
  z-index: 1;
}
.bauweise::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(38,28,25,.78), rgba(38,28,25,.9));
}
.bauweise-inhalt {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 3.75rem;
  min-height: 100vh; padding: 7.5rem 3.125rem;
  max-width: var(--max-w); margin: 0 auto;
}
@media (min-width: 48rem)     { .bauweise-inhalt { gap: 5.625rem; padding: 11.25rem 5.3125rem; } }
@media (min-width: 75.063rem) { .bauweise-inhalt { gap: 5.5555555556rem; padding: 11.1111111111rem 5.0925925926rem; align-items: center; justify-content: center; } }
@media (min-width: 108rem)    { .bauweise-inhalt { gap: 7.5rem; padding: 15rem 6.875rem; } }
.bauweise-titel { display: flex; flex-direction: column; justify-content: center; text-align: center; gap: .5rem; }
@media (min-width: 75.063rem) { .bauweise-titel { gap: .9259259259rem; width: 37.7314814815rem; margin: 0 auto; } }
@media (min-width: 108rem)    { .bauweise-titel { gap: 1.25rem; width: 50.9375rem; } }

.bauweise-karten { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 48rem)     { .bauweise-karten { gap: 3.75rem; } }
@media (min-width: 75.063rem) { .bauweise-karten { display: none; } }
.bauweise-karte { display: flex; flex-direction: column; gap: .75rem; }
.bauweise-karte-bild { width: 100%; overflow: hidden; aspect-ratio: 2/1; position: relative; border-radius: 8px; }
.bauweise-karte-bild::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(176,115,78,.4); pointer-events: none; z-index: 1;
}
.bauweise-karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.bauweise-karte-text { display: flex; flex-direction: column; gap: .5rem; }
.bauweise-karte-text h3 { color: var(--accent-light-3); }
.bauweise-karte-text p { color: #e8dad0; }

.bauweise-bedienung { display: none; }
@media (min-width: 75.063rem) {
  .bauweise-bedienung {
    display: grid; grid-template-columns: 37.6851851852rem 24.8125rem;
    gap: 5.0925925926rem; align-items: center; width: 100%;
    justify-content: center;
  }
}
@media (min-width: 108rem) { .bauweise-bedienung { grid-template-columns: 50.875rem 30rem; gap: 6.875rem; } }
.bauweise-bilder { position: relative; aspect-ratio: 2/1; border-radius: 12px; overflow: hidden; }
.bauweise-bild {
  position: absolute; inset: 0; opacity: 0;
  transform: scale(1.05);
  transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out);
}
.bauweise-bild.is-active { opacity: 1; transform: scale(1); }
.bauweise-bild img { width: 100%; height: 100%; object-fit: cover; }
.bauweise-bilder::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(176,115,78,.4);
}
.bauweise-liste { display: flex; flex-direction: column; gap: .9259259259rem; position: relative; }
@media (min-width: 108rem) { .bauweise-liste { gap: 1.25rem; } }
.bauweise-zeile { text-align: left; position: relative; }
.bauweise-zeile-titel {
  color: var(--h3-color, #b9917c); position: relative;
  transition: color .3s var(--ease-out);
}
.bauweise-zeile-titel::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  transform: translateY(-50%); margin-left: .9259259259rem;
  width: .5555555556rem; height: 1.0185185185rem; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75L10.75 10.75L0.75 20.75' stroke='%23e3cdbb' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  transition: opacity .3s var(--ease-out);
}
.bauweise-zeile:hover:not(.is-active) { --h3-color: #e3cdbb; }
.bauweise-zeile.is-active { --h3-color: #e3cdbb; }
.bauweise-zeile.is-active .bauweise-zeile-titel::after { opacity: 1; }
.bauweise-klappe { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.bauweise-klappe.show { grid-template-rows: 1fr; }
.bauweise-klappe > div { overflow: hidden; }
.bauweise-klappe p { padding-top: .5rem; color: #e8dad0; }
.bauweise-footer { display: flex; justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--bg-dark); color: #d5c8bf; margin-top: 7.5rem;
  --label: #cbae9f;                 /* auf dunklem Grund heller */
  --dark-1: #f0e3d8;                /* damit geerbte Regeln nicht ins Dunkle laufen */
  --body: #d5c8bf;
}
@media (min-width: 108rem) { .footer { margin-top: 15rem; } }
.footer-first {
  max-width: var(--max-w); margin: 0 auto;
  padding: 3.75rem 1.25rem; display: grid; grid-template-columns: 1fr; gap: 3.75rem;
}
@media (min-width: 48rem)     { .footer-first { padding: 5.625rem 3.125rem; grid-template-columns: 1fr 1fr; gap: 3.75rem 2.5rem; } }
@media (min-width: 75.063rem) { .footer-first { padding: 5.5555555556rem 5.0925925926rem; grid-template-columns: 1fr 1fr 1fr; gap: 3.7037037037rem; } }
@media (min-width: 108rem)    { .footer-first { padding: 7.5rem 6.875rem; gap: 5rem; } }
.footer-block-title { color: var(--accent-light-3); margin-bottom: 1.5rem; }

.kontaktkarte { display: flex; gap: 1rem; align-items: flex-start; padding-bottom: 1.5rem; }
.kontaktkarte + .kontaktkarte { border-top: 1px solid rgba(227,205,187,.15); padding-top: 1.5rem; }
.kontaktkarte-text { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.kontaktkarte-name { display: flex; flex-direction: column; }
.kontaktkarte-name .name { color: var(--accent-light-2); }
.kontaktkarte-name .role { color: var(--label); }
.kontaktkarte-wege { display: flex; flex-direction: column; gap: .25rem; }
.kontaktkarte-wege a { text-decoration: underline; text-underline-offset: .2em; }
.kontaktkarte-zeile { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.kontaktkarte-whatsapp { display: inline-flex; align-items: center; gap: .3rem; color: var(--medium-1); text-decoration: none !important; }
.kontaktkarte-whatsapp svg { width: .9rem; }
.kontaktkarte-image { width: 5rem; height: 5rem; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.kontaktkarte-image img { width: 100%; height: 100%; object-fit: cover; }

.kontaktformular { display: flex; flex-direction: column; gap: 1rem; }
.formular-feld { position: relative; }
.formular-feld input, .formular-feld textarea {
  width: 100%; background: transparent;
  border: 0; border-bottom: 1px solid rgba(227,205,187,.3);
  padding: 1.4rem 0 .5rem; color: var(--accent-light-1);
  transition: border-color .3s var(--ease-out);
  border-radius: 0;
}
.formular-feld textarea { resize: vertical; min-height: 4.5rem; }
.formular-feld input:focus, .formular-feld textarea:focus { outline: none; border-bottom-color: var(--accent-light-2); }
.formular-feld label {
  position: absolute; left: 0; top: 1.1rem; color: var(--label);
  pointer-events: none; transform-origin: left top;
  transition: transform .25s var(--ease-out), color .25s var(--ease-out);
  font-size: .875rem;
}
.formular-feld input:focus + label,
.formular-feld input:not(:placeholder-shown) + label,
.formular-feld textarea:focus + label,
.formular-feld textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.05rem) scale(.78); color: var(--medium-1);
}
.formular-haken { display: flex; gap: .625rem; align-items: flex-start; }
.formular-haken input { margin-top: .25rem; accent-color: #715852; width: 1rem; height: 1rem; flex-shrink: 0; }
.formular-haken label { color: #cfc2b8; }
.formular-hinweis { color: #b7a79d; }
.formular-hinweis a { text-decoration: underline; }
.kontaktformular .btn { align-self: flex-start; }
/* Rückmeldung nach dem Absenden. Eine blasse Zeile geht unter — die Meldung
   bekommt eine eigene Fläche, ein Häkchen und die Farbe, die man dafür
   erwartet. Grün auch auf dunklem Grund lesbar (7.5:1). */
.formular-erfolg, .formular-fehler {
  display: flex; gap: .625rem; align-items: flex-start;
  margin: .25rem 0; padding: .875rem 1rem;
  border-radius: 8px; border: 1px solid; font-weight: 500;
}
.formular-erfolg::before, .formular-fehler::before {
  flex-shrink: 0; font-weight: 700; line-height: 1.35;
}
.formular-erfolg::before { content: "✓"; }
.formular-fehler::before { content: "!"; }
.formular-erfolg {
  color: #7fd6a4; background: rgba(63, 168, 113, .14); border-color: rgba(127, 214, 164, .38);
}
.formular-fehler {
  color: #f0ad95; background: rgba(199, 91, 55, .14); border-color: rgba(240, 173, 149, .38);
}

/* Vor- und Nachname nebeneinander, sobald Platz da ist */
.formular-paar { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 30rem) { .formular-paar { grid-template-columns: 1fr 1fr; } }

/* Auswahlfelder wie die Eingabefelder: die Beschriftung sitzt dauerhaft oben,
   ein Auswahlfeld ist nie leer. */
.formular-feld--wahl select {
  width: 100%; background: transparent; appearance: none;
  border: 0; border-bottom: 1px solid rgba(227,205,187,.3);
  padding: 1.4rem 1.5rem .5rem 0; color: var(--accent-light-1);
  font: inherit; border-radius: 0; cursor: pointer;
  transition: border-color .3s var(--ease-out);
}
.formular-feld--wahl select:focus { outline: none; border-bottom-color: var(--accent-light-2); }
.formular-feld--wahl select option { color: #1c1512; background: #fff; }
.formular-feld--wahl label {
  transform: translateY(-1.05rem) scale(.78); color: var(--medium-1);
}
.formular-feld--wahl::after {
  content: ""; position: absolute; right: .25rem; bottom: 1.1rem; width: .45rem; height: .45rem;
  border-right: 1px solid var(--label); border-bottom: 1px solid var(--label);
  transform: rotate(45deg); pointer-events: none;
}

/* Honigtopf: für Menschen unsichtbar, für Bots ein einladendes Feld. */
.formular-falle {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Auf hellem Grund (Anfragedialog) */
.formular-dialog .formular-feld input,
.formular-dialog .formular-feld textarea,
.formular-dialog .formular-feld--wahl select { color: var(--dark-1); border-bottom-color: var(--border-color); }
.formular-dialog .formular-haken label { color: var(--body); }
.formular-dialog .formular-erfolg {
  color: #1f6b45; background: #e8f5ed; border-color: #b6ddc6;
}
.formular-dialog .formular-fehler {
  color: #8f3319; background: #fbeceb; border-color: #eec4bb;
}

/* ---------- Weitere Projekte (Karussell) ---------- */
.fuss-karussell {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 1.25rem 3.75rem;
}
@media (min-width: 48rem)     { .fuss-karussell { padding: 0 3.125rem 5.625rem; } }
@media (min-width: 75.063rem) { .fuss-karussell { padding: 0 5.0925925926rem 5.5555555556rem; } }
@media (min-width: 108rem)    { .fuss-karussell { padding: 0 6.875rem 7.5rem; } }
.fuss-karussell-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 2.5rem; }
.fuss-karussell-titel { color: var(--accent-light-3); max-width: 24rem; }
.fuss-karussell-knoepfe { display: flex; align-items: center; gap: .5rem; }
.karussell-knopf {
  width: 2.5rem; height: 2.5rem; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-light-2); border: 1px solid rgba(227,205,187,.3);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), opacity .3s;
}
.karussell-knopf:hover { background: rgba(227,205,187,.15); }
.karussell-knopf[disabled] { opacity: .35; cursor: default; }
.karussell-knopf svg { width: 1rem; }
.karussell-fortschritt { color: var(--medium-1); margin-left: .75rem; }
.fuss-karussell-fenster { overflow: hidden; }
.fuss-karussell-band { display: flex; gap: 1.25rem; transition: transform .6s var(--ease-io); will-change: transform; }
.fuss-karussell-card { flex: 0 0 auto; width: 17.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 48rem)  { .fuss-karussell-card { width: 21rem; } }
@media (min-width: 108rem) { .fuss-karussell-card { width: 26rem; } }
.fuss-karussell-card-image { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.fuss-karussell-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.fuss-karussell-card:hover .fuss-karussell-card-image img { transform: scale(1.05); }
.fuss-karussell-card-content { display: flex; flex-direction: column; gap: .625rem; align-items: flex-start; }
.fuss-karussell-card-content h3 { color: var(--accent-light-3); }
.fuss-karussell-card-content p { color: var(--medium-2); }

.footer-navigation {
  border-top: 1px solid rgba(227,205,187,.15);
  max-width: var(--max-w); margin: 0 auto;
  padding: 3.75rem 1.25rem;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 48rem)     { .footer-navigation { padding: 5.625rem 3.125rem; grid-template-columns: auto 1fr; gap: 3.75rem; } }
@media (min-width: 75.063rem) { .footer-navigation { padding: 5.5555555556rem 5.0925925926rem; } }
@media (min-width: 108rem)    { .footer-navigation { padding: 7.5rem 6.875rem; } }
.footer-brand { font-family: Switzer, sans-serif; color: var(--accent-light-3); }
.footer-brand .brand-mark { font-size: 1.75rem; letter-spacing: .16em; display: block; }
.footer-brand .brand-sub {
  font-family: Switzer, sans-serif; font-weight: 500; text-transform: uppercase;
  font-size: .55rem; letter-spacing: .22em; color: var(--medium-1); margin-top: .35rem; display: block;
}
.footer-navigation-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (min-width: 75.063rem) { .footer-navigation-lists { grid-template-columns: repeat(3, auto); justify-content: end; gap: 5rem; } }
.footer-navigation-list { display: flex; flex-direction: column; gap: .625rem; }
.footer-navigation-link--big { font-family: Switzer, sans-serif; font-size: 1.125rem; color: var(--medium-2); transition: color .3s var(--ease-out); }
.footer-navigation-link--small { color: #c3a595; transition: color .3s var(--ease-out); }
.footer-navigation-link:hover { color: var(--accent-light-2); }
.footer-bottom {
  border-top: 1px solid rgba(227,205,187,.18);
  max-width: var(--max-w); margin: 0 auto; padding: 1.5rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  color: #b9a89e;
}
@media (min-width: 48rem) { .footer-bottom { padding: 1.5rem 3.125rem; } }
@media (min-width: 108rem) { .footer-bottom { padding: 2rem 6.875rem; } }

/* ==========================================================================
   Kontakt-Modal + Promo-Popup
   ========================================================================== */
.formular-dialog {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(50,38,34,.65);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease-out), visibility .4s;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 1.25rem;
}
.formular-dialog.is-open { opacity: 1; visibility: visible; }
.formular-innen {
  background: var(--bg-warm); border-radius: 12px;
  max-width: 68rem; width: 100%; margin: auto;
  padding: 2.5rem 1.25rem; position: relative;
  transform: translateY(2rem); transition: transform .5s var(--ease-out);
}
.formular-dialog.is-open .formular-innen { transform: none; }
@media (min-width: 48rem)  { .formular-innen { padding: 3.75rem 3.125rem; } }
@media (min-width: 108rem) { .formular-innen { padding: 5rem; } }
.formular-schliessen {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.5rem; height: 2.5rem; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--body);
  transition: background-color .3s var(--ease-out);
}
.formular-schliessen:hover { background: var(--accent-light-1); }
.formular-raster { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 75.063rem) { .formular-raster { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.kontaktkarte-dialog { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid var(--border-color); }
.kontaktkarte-dialog .kontaktkarte-name .name { color: var(--dark-1); }
.kontaktkarte-dialog a { color: var(--body); }
.formular-dialog .formular-feld input, .formular-dialog .formular-feld textarea { border-bottom-color: var(--border-color); color: var(--dark-1); }
.formular-dialog .formular-feld input:focus, .formular-dialog .formular-feld textarea:focus { border-bottom-color: var(--medium-1); }
/* :not(), damit die Rückmeldungen unten ihre eigene Farbe behalten — sie
   tragen beide Klassen und wuerden sonst vom Fliesstext ueberschrieben. */
.formular-dialog .formular-haken label,
.formular-dialog .formular-hinweis:not(.formular-erfolg):not(.formular-fehler) { color: var(--body); }

.popup {
  position: fixed; z-index: 80; right: 1.25rem; bottom: 1.25rem;
  width: min(23rem, calc(100vw - 2.5rem));
  background: var(--bg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(50,38,34,.25);
  opacity: 0; transform: translateY(2rem); pointer-events: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.popup.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.popup.is-dismissed { opacity: 0 !important; transform: translateY(1rem) !important; pointer-events: none !important; }
.popup-image { aspect-ratio: 16/9; }
.popup-image img { width: 100%; height: 100%; object-fit: cover; }
.popup-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.popup-title { font-family: Switzer, sans-serif; font-size: 1.375rem; line-height: 1.2; color: var(--dark-1); }
.popup-close {
  position: absolute; top: .625rem; right: .625rem;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: rgba(50,38,34,.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Utilities ---------- */
.container-content { max-width: var(--max-w); margin: 0 auto; }
.nur-vorlesen {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sprunglink {
  position: absolute; top: -100%; left: 1rem; z-index: 200;
  background: var(--bg); color: var(--dark-1); padding: .75rem 1.25rem; border-radius: 6px;
}
.sprunglink:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hat-einwisch { --einwisch: 1; }
  .wachsbild { --randlos-fortschritt: 1; opacity: 1; }
  .lageteil, .bauweise { --randlos-fortschritt: 1; }
}