/* ==========================================================================
   Fessler Monteurapartments – Bad Rappenau
   Stylesheet
   --------------------------------------------------------------------------
   01  Schriften
   02  Design-Tokens
   03  Reset & Basis
   04  Typografie
   05  Layout & Sektionen
   06  Buttons & Icons
   07  Bildflächen
   08  Navigation Desktop (fest, immer sichtbar)
   09  Navigation Mobil
   10  Hero
   11  Faktenleiste
   12  Unterkunft & Apartments
   13  Galerie & Lightbox
   14  Ausstattung
   15  Lage
   16  Verlässlichkeit
   17  FAQ
   18  Abschluss
   19  Footer
   20  Schwebender WhatsApp-Button
   21  Rechtstexte & 404
   22  Reveal-Animationen
   23  Reduzierte Bewegung & Print
   ========================================================================== */


/* 01  SCHRIFTEN =========================================================== */
/* Lokal ausgeliefert, kein Google-CDN. Anleitung: fonts/README.txt          */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}


/* 02  DESIGN-TOKENS ======================================================= */

:root {
  --graphit:      #1c212a;
  --tiefschwarz:  #10141b;
  --weiss:        #ffffff;
  --warmweiss:    #f7f6f2;
  --hellgrau:     #e8ebef;
  --grau:         #aeb4bf;
  --stein:        #d8d2c7;
  --orange:       #f4ad24;
  --orange-tief:  #d1900f;

  --bg:           var(--warmweiss);
  --bg-alt:       var(--weiss);
  --text:         var(--graphit);
  --text-leise:   #5b626e;
  --linie:        #dfe2e7;

  --text-hell:      #f4f5f7;
  --text-hell-leise:var(--grau);
  --linie-dunkel:   rgba(255, 255, 255, .13);

  --font-display: 'Space Grotesk', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --fs-xl:   clamp(2.1rem, 1.25rem + 3.1vw, 3.9rem);
  --fs-l:    clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem);
  --fs-m:    clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  --fs-body: clamp(1rem, .97rem + .16vw, 1.075rem);
  --fs-s:    .9375rem;
  --fs-xs:   .8125rem;
  --fs-mono: .75rem;

  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5rem;
  --sektion-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  --rail: 0px;
  --inhalt-max: 1240px;
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 3.25rem);
  --radius:   4px;
  --radius-m: 8px;

  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --kopf-h: 62px;   /* mobile Kopfzeile */
}

@media (min-width: 768px)  { :root { --rail: 122px; } }
@media (min-width: 1024px) { :root { --rail: 176px; } }


/* 03  RESET & BASIS ======================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}
@media (max-width: 767px) { html { scroll-padding-top: calc(var(--kopf-h) + 1rem); } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.ist-fixiert { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

a { color: inherit; text-decoration-color: rgba(28, 33, 42, .3); text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--orange); }

::selection { background: var(--orange); color: var(--graphit); }

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

.skip-link {
  position: fixed;
  top: -100px; left: var(--sp-2);
  z-index: 300;
  padding: .75rem 1.25rem;
  background: var(--graphit);
  color: var(--weiss);
  font-size: var(--fs-s);
  border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

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


/* 04  TYPOGRAFIE ========================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-m); letter-spacing: -.015em; line-height: 1.25; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.35; }

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

.lead {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-leise);
  max-width: 52ch;
}
h1 + .lead, h2 + .lead, h3 + .lead { margin-top: var(--sp-2); }
.dunkel .lead { color: var(--text-hell-leise); }

.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  font-family: var(--font-display);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 var(--sp-2);
}
.kicker::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--orange);
  flex: none;
}
.dunkel .kicker { color: var(--text-hell-leise); }
.nummer { color: var(--orange); font-variant-numeric: tabular-nums; }

.sektion-kopf { max-width: 60ch; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }


/* 05  LAYOUT & SEKTIONEN ================================================== */

.seite { padding-left: var(--rail); }

.container {
  width: 100%;
  max-width: var(--inhalt-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--breit { max-width: 1520px; }

section { position: relative; }
.sektion { padding-block: var(--sektion-y); }
.sektion--eng { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.dunkel { background: var(--graphit); color: var(--text-hell); }
.dunkel h2, .dunkel h3, .dunkel h4 { color: var(--text-hell); }
.dunkel a { text-decoration-color: rgba(255, 255, 255, .35); }
.tiefschwarz { background: var(--tiefschwarz); }


/* 06  BUTTONS & ICONS ===================================================== */

.btn {
  --btn-bg: var(--graphit);
  --btn-fg: var(--weiss);
  --btn-br: var(--graphit);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 54px;
  padding: .9rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-br);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.btn .icon { width: 20px; height: 20px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primar {
  --btn-bg: var(--orange);
  --btn-fg: var(--graphit);
  --btn-br: var(--orange);
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(244, 173, 36, .22);
}
.btn--primar:hover {
  --btn-bg: #ffbc3a; --btn-br: #ffbc3a;
  box-shadow: 0 14px 32px rgba(244, 173, 36, .3);
}
.btn--primar:active { box-shadow: 0 6px 16px rgba(244, 173, 36, .24); }

.btn--sekundar {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-br: rgba(28, 33, 42, .32);
}
.btn--sekundar:hover { --btn-bg: var(--graphit); --btn-fg: var(--weiss); --btn-br: var(--graphit); }

.btn--hell {
  --btn-bg: rgba(255, 255, 255, .04);
  --btn-fg: var(--weiss);
  --btn-br: rgba(255, 255, 255, .34);
}
.btn--hell:hover { --btn-bg: rgba(255, 255, 255, .14); --btn-br: rgba(255, 255, 255, .6); }

/* bewusst kompakt gehalten, damit beide Hero-Buttons nebeneinander passen */
.btn--gross { min-height: 60px; padding: 1rem 1.6rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn-gruppe { display: flex; flex-wrap: wrap; gap: .875rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  text-decoration: none;
  padding-block: .35rem;
}
.textlink .icon { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.textlink:hover .icon { transform: translateX(4px); }
.textlink__text {
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease);
}
.textlink:hover .textlink__text { background-size: 0 1px; }

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  flex: none;
}
.icon svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill svg { fill: currentColor; stroke: none; }


/* 07  BILDFLÄCHEN ========================================================= */

.media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  /* Feines Raster als Grundfläche – trägt die eingepasste Zeichnung und
     verschwindet vollständig, sobald ein Foto hinterlegt ist.           */
  background:
    linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px) 0 0 / 44px 100%,
    #1a1f28;
}
.media__img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }

.media__scene { width: 100%; height: 100%; display: block; }
.media__scene .bg  { fill: none; }
.media__scene .l   { fill: none; stroke: rgba(255, 255, 255, .17); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.media__scene .lf  { fill: rgba(255, 255, 255, .045); stroke: rgba(255, 255, 255, .17); stroke-width: 1.6; }
.media__scene .a   { fill: rgba(244, 173, 36, .16); stroke: none; }
.media__scene .as  { fill: none; stroke: rgba(244, 173, 36, .5); stroke-width: 1.6; stroke-linecap: round; }
.media__scene .dot { fill: var(--orange); }

/* Helle Umgebung: Zeichnung aufhellen statt abdunkeln */
.media--hell {
  background:
    linear-gradient(rgba(28, 33, 42, .05) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(28, 33, 42, .05) 1px, transparent 1px) 0 0 / 44px 100%,
    #e9ebef;
}
.media--hell .media__scene .l   { stroke: rgba(28, 33, 42, .26); }
.media--hell .media__scene .lf  { fill: rgba(28, 33, 42, .04); stroke: rgba(28, 33, 42, .26); }
.media--hell .media__scene .a   { fill: rgba(212, 145, 15, .2); }
.media--hell .media__scene .as  { stroke: rgba(196, 133, 12, .7); }
.media--hell .media__scene .dot { fill: var(--orange-tief); }

/* Maskenaufdeckung */
.media--reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease-out); }
.media--reveal.ist-sichtbar { clip-path: inset(0 0 0 0); }
.media--reveal > * { transform: scale(1.08); transition: transform 1.5s var(--ease-out); }
.media--reveal.ist-sichtbar > * { transform: scale(1); }


/* 08  NAVIGATION DESKTOP ==================================================
   Dauerhaft sichtbar, feste Breite, kein Ein- oder Ausklappen.          */

.rail { display: none; }

@media (min-width: 768px) {
  .rail {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: var(--rail);
    padding: clamp(1.25rem, 2.4vh, 2.25rem) 0;
    background: var(--tiefschwarz);
    border-right: 1px solid var(--linie-dunkel);
    color: var(--text-hell);
  }

  /* Kopf der Leiste: Signet mit Wortmarke darunter */
  .rail__marke {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--orange);
    text-decoration: none;
    flex: none;
    padding-inline: .5rem;
  }
  /* Firmenlogo, freigestellt für dunkle Flächen */
  /* Das Logo ist ein breites Band (1216 x 478), deshalb mehr Breite
     als beim alten, fast quadratischen Zeichen. */
  .rail__logo {
    width: min(150px, 92%);
    height: auto;
    transition: opacity .25s var(--ease);
  }
  .rail__marke:hover .rail__logo { opacity: .82; }

  .rail__liste {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(.35rem, 1.4vh, 1.1rem);
    padding-inline: clamp(.75rem, 1.4vw, 1.35rem);
  }

  .rail__link {
    display: block;
    padding: .3rem 0 .55rem;
    text-decoration: none;
    color: var(--text-hell-leise);
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease), border-color .45s var(--ease);
  }
  .rail__nr {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, .9rem + .3vw, 1.3rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1.1;
    transition: color .3s var(--ease);
  }
  .rail__label {
    display: block;
    margin-top: .1rem;
    font-family: var(--font-text);
    font-size: clamp(.75rem, .68rem + .16vw, .8375rem);
    line-height: 1.3;
  }
  .rail__link:hover { color: var(--text-hell); }
  .rail__link:hover .rail__nr { color: var(--weiss); }

  .rail__link.ist-aktiv {
    color: var(--orange);
    border-bottom-color: var(--orange);
  }
  .rail__link.ist-aktiv .rail__nr { color: var(--orange); }

  /* Unterer Abschluss: nutzbarer Kontaktweg statt dekorativer Linie */
  .rail__fuss {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    padding-inline: clamp(.6rem, 1vw, 1rem);
  }
  .rail__wa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    width: 100%;
    padding: .7rem .4rem .6rem;
    background: var(--orange);
    color: var(--graphit);
    border-radius: var(--radius);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    transition: background-color .3s var(--ease), transform .3s var(--ease);
  }
  .rail__wa:hover { background: #ffbc3a; transform: translateY(-2px); }
  .rail__wa .icon { width: 22px; height: 22px; }

  .rail__tel {
    font-family: var(--font-display);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    color: var(--text-hell-leise);
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
    transition: color .25s var(--ease);
  }
  .rail__tel:hover { color: var(--orange); }

  /* Wortmarke der Domain als ruhiger Abschluss der Leiste */
  .rail__domain {
    display: grid;
    justify-items: center;
    gap: .18rem;
    width: 100%;
    margin-top: .3rem;
    text-align: center;
  }
  .rail__domain-linie {
    width: 26px;
    height: 2px;
    background: var(--orange);
    border-radius: 2px;
    margin-bottom: .5rem;
  }
  .rail__domain-1 {
    font-family: var(--font-display);
    font-size: .5625rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-hell-leise);
    line-height: 1.2;
  }
  .rail__domain-2 {
    font-family: var(--font-display);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .42);
    line-height: 1.25;
  }
}

/* Flache Bildschirme: schmaler Fuss, damit alles Platz behält */
@media (min-width: 768px) and (max-height: 780px) {
  .rail__domain-1 { display: none; }
  .rail__domain-linie { margin-bottom: .3rem; }
  .rail__fuss { gap: .55rem; }
}

/* Kompaktere Leiste auf Tablets – bleibt vollständig lesbar */
@media (min-width: 768px) and (max-width: 1023px) {
  .rail__label { font-size: .72rem; }
  .rail__marke .icon { width: 28px; height: 28px; }
}


/* 09  NAVIGATION MOBIL ==================================================== */

.mkopf {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 120;
  height: var(--kopf-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--gutter);
  background: rgba(16, 20, 27, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie-dunkel);
  color: var(--text-hell);
}
.mkopf__marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 500;
}
.mkopf__marke .icon { width: 24px; height: 24px; color: var(--orange); }
.mkopf__logo { height: 40px; width: auto; }
.mkopf__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: 0 .9rem;
  background: var(--orange);
  color: var(--graphit);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
}
.mkopf__cta .icon { width: 18px; height: 18px; }

/* Dauerhaft sichtbare Abschnittsleiste am unteren Rand.
   Jeder Eintrag zeigt Nummer und Beschriftung; die Leiste lässt sich
   seitlich schieben und führt den aktiven Abschnitt automatisch mit. */
.mnav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 120;
  background: rgba(16, 20, 27, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie-dunkel);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mnav__liste {
  display: flex;
  gap: .4rem;
  padding: .5rem var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.mnav__liste::-webkit-scrollbar { display: none; }

.mnav__pille {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  align-items: baseline;
  gap: .45rem;
  min-height: 40px;
  padding: .55rem .85rem;
  border: 1px solid var(--linie-dunkel);
  border-radius: 100px;
  background: rgba(255, 255, 255, .04);
  color: var(--text-hell-leise);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.mnav__nr {
  font-family: var(--font-display);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--orange);
}
.mnav__label {
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.mnav__pille.ist-aktiv {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--graphit);
}
.mnav__pille.ist-aktiv .mnav__nr { color: rgba(28, 33, 42, .65); }

@media (min-width: 768px) {
  .mkopf, .mnav { display: none; }
}


/* 10  HERO ================================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--tiefschwarz);
  color: var(--text-hell);
  padding-block: calc(var(--kopf-h) + 2.5rem) 3.5rem;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg .media { height: 100%; border-radius: 0; }
.hero__bg .media__scene { height: 100%; }

/* Sehr langsames Heranfahren des Hintergrundbilds. Das Bild bleibt in
   Bewegung, ohne dass die Bewegung bewusst auffällt.                   */
.hero__bg .media__img {
  height: 100%;
  transform-origin: 62% 55%;
  animation: hero-drift 34s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -1%, 0); }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(16, 20, 27, .97) 0%,
      rgba(16, 20, 27, .9)  22%,
      rgba(16, 20, 27, .62) 46%,
      rgba(16, 20, 27, .5)  62%,
      rgba(16, 20, 27, .72) 100%),
    linear-gradient(180deg,
      rgba(16, 20, 27, .55) 0%,
      rgba(16, 20, 27, .12) 34%,
      rgba(16, 20, 27, .78) 100%);
}

/* Der Text liegt immer über der Collage – so wird auf schmalen Laptops
   nie ein Button von einem Bild überdeckt.                              */
.hero__inner { position: relative; z-index: 3; }
.hero__text { max-width: 34rem; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--weiss);
}
.hero__eyebrow .icon { width: 20px; height: 20px; color: var(--orange); }

.hero__titel {
  font-family: var(--font-display);
  /* Auf die längste Zeile abgestimmt („Flexibel für jeden Einsatz.“),
     damit sie auf dem Desktop nicht in die Bildcollage läuft.         */
  font-size: clamp(2rem, .3rem + 2.85vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  margin: 0;
  color: var(--weiss);
}
/* Die Zeile ist für die Aufdeck-Animation beschnitten. Innenabstand und
   gleich grosser negativer Aussenabstand geben Versalien und Unterlängen
   Luft, ohne die Zeilenabstände zu verändern.                          */
.hero__titel .zeile {
  display: block;
  overflow: hidden;
  padding: .14em 0 .16em;
  margin: -.14em 0 -.16em;
}
.hero__titel .zeile > span { display: block; }
.hero__titel .akzent { color: var(--orange); }
/* Die hervorgehobene Zusatzzeile steht bewusst etwas kleiner, damit der
   Block kompakt bleibt und auch auf dem Handy einzeilig passt.        */
.hero__titel .zeile--zusatz {
  font-size: .66em;
  letter-spacing: -.02em;
  margin-top: .3em;
}

.hero__lead {
  margin-top: var(--sp-3);
  margin-bottom: 0;
  max-width: 33rem;
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  line-height: 1.6;
  color: #d5d9e0;
}

/* Kennzahlenreihe – ohne Karten, nur Abstand und feine Trennlinien */
.hero__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero__fakt {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  /* knapp gehalten, damit alle vier Angaben in eine Reihe passen */
  padding-right: clamp(.7rem, 1.1vw, 1.15rem);
  margin-right: clamp(.7rem, 1.1vw, 1.15rem);
  border-right: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--weiss);
}
.hero__fakt:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__fakt .icon { width: 26px; height: 26px; color: var(--orange); }

.hero__aktionen { margin-top: var(--sp-4); }

/* --- Hero auf dem Smartphone -------------------------------------------
   Auf schmalen Geräten sitzen die Kennzahlen in einem festen Zweierraster
   statt in einer umbrechenden Reihe. Dadurch entsteht keine angebrochene
   letzte Zeile mehr und die Blöcke stehen sauber untereinander.       */
@media (max-width: 767px) {
  .hero {
    padding-block: calc(var(--kopf-h) + 2rem) 2.5rem;
  }
  .hero__text { max-width: none; }

  .hero__eyebrow { margin-bottom: var(--sp-2); font-size: .875rem; }
  .hero__eyebrow .icon { width: 18px; height: 18px; }

  .hero__titel { line-height: 1.12; }
  .hero__lead {
    margin-top: var(--sp-2);
    max-width: none;
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero__fakten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: var(--sp-3);
    padding-top: 0;
    border-top: 0;
  }
  .hero__fakt {
    gap: .4rem;
    margin: 0;
    padding: .95rem 0 .95rem .9rem;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .875rem;
  }
  .hero__fakt:nth-child(2n + 1) { padding-left: 0; padding-right: .9rem; }
  .hero__fakt:nth-child(2n)     { border-left: 1px solid rgba(255, 255, 255, .16); }
  .hero__fakt:last-child        { padding-right: 0; }
  .hero__fakt .icon { width: 22px; height: 22px; }

  .hero__aktionen { margin-top: var(--sp-3); gap: .6rem; }
  .hero__aktionen .btn { width: 100%; min-height: 54px; font-size: 1rem; }

  /* Die dreispaltige Collage wird weiter unten ausgeblendet – dort, wo
     ihre Grundregeln stehen. Auf dem Smartphone übernimmt das Laufband. */

  .siegel { width: 84px; bottom: .6rem; right: .6rem; }
}

/* Sehr schmale Geräte: Kennzahlen einspaltig, sonst wird es gedrängt */
@media (max-width: 359px) {
  .hero__fakten { grid-template-columns: 1fr; }
  .hero__fakt,
  .hero__fakt:nth-child(2n + 1) { padding-inline: 0; border-left: 0; }
}

.hero__hinweis {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-hell-leise);
}

/* --- Collage ------------------------------------------------------------ */
.hero__collage {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: .6rem;
  margin-top: var(--sp-4);
}
.collage__bild { position: relative; }
.collage__bild .media {
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(6, 9, 13, .55);
}
.collage__kueche  { aspect-ratio: 4 / 5; }
.collage__bad     { aspect-ratio: 3 / 5; }
.collage__aussen  { aspect-ratio: 3 / 5; }

/* --- Laufband (nur Smartphone) ------------------------------------------
   Die Bilderreihe steht zweimal hintereinander in der Spur. Die Spur
   wandert um genau eine Reihenbreite nach links und springt dann zurück –
   für das Auge ein durchgehender Lauf. Das Seitenverhältnis entspricht
   dem der Aufnahmen (3000 x 2100), deshalb wird nichts angeschnitten.  */
.hero__band { display: none; }

@media (max-width: 767px) {
  /* Die Collage würde die querformatigen Aufnahmen auf schmale
     Hochformate beschneiden – auf dem Smartphone läuft stattdessen
     das Band. Die Regel steht bewusst nach den Collage-Grundregeln. */
  .hero__collage { display: none; }

  .hero__band {
    display: block;
    position: relative;
    z-index: 3;
    margin-top: var(--sp-3);
    overflow: hidden;
    /* weiches Auslaufen an beiden Rändern statt harter Schnittkante */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }

  .band__spur {
    display: flex;
    width: max-content;
    animation: band-lauf 48s linear infinite;
  }
  .hero__band:active .band__spur { animation-play-state: paused; }

  .band__bild {
    flex: none;
    width: min(62vw, 280px);
    aspect-ratio: 10 / 7;
    /* Abstand als Aussenabstand, damit beide Hälften exakt gleich breit
       sind und der Rücksprung nicht sichtbar wird.                    */
    margin-right: .5rem;
  }
  .band__bild .media {
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(6, 9, 13, .45);
  }

  @keyframes band-lauf {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  /* Ohne Bewegung: dieselbe Reihe, dafür zum Wischen */
  @media (prefers-reduced-motion: reduce) {
    .hero__band {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .hero__band::-webkit-scrollbar { display: none; }
    .band__spur { animation: none; }
    .band__bild { scroll-snap-align: center; }
  }
}

/* --- Siegel ------------------------------------------------------------- */
.siegel {
  position: absolute;
  top: clamp(.75rem, 2.5vh, 2.5rem);
  right: clamp(.75rem, 2.5vw, 3rem);
  width: clamp(96px, 11vw, 168px);
  aspect-ratio: 1;
  z-index: 3;
  pointer-events: none;
}
.siegel__scheibe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(13, 17, 24, .74);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.siegel__ring {
  position: absolute;
  inset: 0;
  animation: siegel-dreh 46s linear infinite;
}
.siegel__ring text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, .66);
}
@keyframes siegel-dreh { to { transform: rotate(360deg); } }

.siegel__mitte {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .1em;
  font-family: var(--font-display);
  font-size: clamp(.6rem, .42rem + .48vw, .85rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--weiss);
}
.siegel__mitte .akzent { color: var(--orange); }

/* Auf dem Smartphone würde das Siegel unter der festen Kopfzeile liegen –
   dort sitzt es stattdessen unten rechts über der Bildreihe.            */
@media (max-width: 767px) {
  .siegel {
    top: auto;
    bottom: .75rem;
    right: .75rem;
    width: 92px;
  }
}

/* --- Scroll-Hinweis ----------------------------------------------------- */
/* Mittig unter dem Hero-Inhalt: Beschriftung über einer feinen Spur, in
   der ein oranger Strich langsam nach unten wandert.                   */
.hero__scroll {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--text-hell-leise);
  z-index: 3;
  transition: color .3s var(--ease);
}
.hero__scroll:hover { color: var(--weiss); }
.hero__scroll-text {
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding-left: .26em;   /* gleicht die Sperrung am rechten Rand aus */
}
.hero__scroll-spur {
  position: relative;
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.hero__scroll-punkt {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10px;
  background: var(--orange);
  animation: scroll-lauf 2.6s var(--ease) infinite;
}
@keyframes scroll-lauf {
  0%        { transform: translateY(-100%); opacity: 0; }
  20%, 65%  { opacity: 1; }
  100%      { transform: translateY(260%); opacity: 0; }
}

/* --- Hero ab Tablet ----------------------------------------------------- */
@media (min-width: 768px) {
  .hero { padding-block: 4rem; }
  .hero__collage { grid-template-columns: 1.3fr 1fr 1fr; gap: .75rem; }
}

/* --- Hero auf dem Desktop: Collage als überlagerte Ebene ----------------- */
@media (min-width: 1024px) {
  /* Hero und Kennzahlenleiste füllen zusammen exakt eine Bildschirmhöhe.
     Die tatsächliche Höhe der Leiste misst js/main.js und legt sie unter
     --fakten-h ab; der Wert hier ist nur der Rückfall ohne JavaScript.  */
  .hero {
    min-height: max(500px, calc(100svh - var(--fakten-h, 190px)));
    display: flex;
    align-items: center;
    padding-block: 3.25rem;
  }
  .hero__inner { width: 100%; }
  /* breit genug, damit beide Buttons in einer Reihe stehen, und schmal
     genug, dass die Überschrift nicht in die Collage läuft              */
  .hero__text { max-width: min(56%, 44rem); }
  .hero__scroll { display: flex; }

  .hero__collage {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 46%;
    display: block;
    margin: 0;
    z-index: 2;
    pointer-events: none;
  }
  .collage__bild { position: absolute; }
  .collage__bild .media { border-radius: 12px; }

  .collage__aussen {
    left: 50.5%;
    right: 0;
    top: 0;
    bottom: 0;
    aspect-ratio: auto;
  }
  .collage__aussen .media { border-radius: 0; box-shadow: none; }
  .collage__aussen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(16, 20, 27, .5), rgba(16, 20, 27, .1));
  }

  .collage__kueche {
    left: 0;
    width: 60%;
    top: 6%;
    height: 48%;
    aspect-ratio: auto;
    z-index: 2;
  }
  .collage__bad {
    left: 11%;
    width: 41%;
    top: 47%;
    height: 36%;
    aspect-ratio: auto;
    z-index: 3;
  }
  .collage__kueche .media,
  .collage__bad .media {
    outline: 1px solid rgba(255, 255, 255, .22);
    outline-offset: -1px;
  }
}

/* Kleinere Laptops: Collage schmaler, damit die Textspalte Platz behält */
@media (min-width: 1024px) and (max-width: 1399px) {
  .hero__collage { width: 40%; }
  .hero__text { max-width: min(58%, 40rem); }
}

@media (min-width: 1500px) {
  .hero__collage { width: 44%; }
  .hero__text { max-width: min(54%, 46rem); }
}

/* Flache Bildschirme: Hero muss auch bei 700 px Höhe funktionieren */
@media (min-width: 1024px) and (max-height: 1000px) {
  .hero { padding-block: 2.25rem; min-height: max(420px, calc(100svh - var(--fakten-h, 170px))); }
  .hero__titel { font-size: clamp(2.1rem, .4rem + 2.7vw, 3.1rem); }
  .hero__lead { margin-top: var(--sp-2); font-size: 1rem; }
  .hero__fakten { margin-top: var(--sp-3); padding-top: var(--sp-2); }
  .hero__fakt .icon { width: 22px; height: 22px; }
  .hero__aktionen { margin-top: var(--sp-3); }
  .btn--gross { min-height: 52px; padding: .8rem 1.5rem; font-size: var(--fs-s); }
  .hero__scroll { display: none; }
  .siegel { width: clamp(90px, 8.5vw, 120px); }
}


/* 11  FAKTENLEISTE ======================================================== */

.fakten { background: var(--tiefschwarz); color: var(--text-hell); }
/* Feste Spaltenzahl, damit die sechs Kennzahlen auf dem Desktop in einer
   Reihe stehen und vollständig ins erste Bild passen.                   */
.fakten__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .fakten__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .fakten__grid { grid-template-columns: repeat(6, 1fr); } }
.fakten__item {
  position: relative;
  padding: clamp(1.35rem, 1rem + 1.8vw, 2.25rem) clamp(1rem, .5rem + 1.4vw, 1.75rem);
  border-right: 1px solid var(--linie-dunkel);
  border-bottom: 1px solid var(--linie-dunkel);
}
.fakten__item::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--orange);
  transition: width .7s var(--ease-out);
}
.fakten__item.ist-sichtbar::after { width: 40px; }
.fakten__icon { width: 23px; height: 23px; color: var(--orange); margin-bottom: .85rem; }
.fakten__wert {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.fakten__label { display: block; margin-top: .25rem; font-size: var(--fs-s); }
.fakten__note { display: block; margin-top: .05rem; font-size: var(--fs-xs); color: var(--text-hell-leise); }


/* 12  ÜBERBLICK =========================================================== */

.objekt__layout {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .objekt__layout {
    /* Bildbereich bewusst schmaler als die Übersichtstabelle, damit er
       nicht dominiert und beide Spalten auf ähnlicher Höhe enden.      */
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
  }
}

/* --- Kompakte Galerie mit Wohnungsreitern ------------------------------- */

.objekt__galerie { display: grid; gap: clamp(.75rem, .5rem + .8vw, 1.1rem); }

.wtabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
}
@media (max-width: 559px) { .wtabs { grid-template-columns: repeat(2, 1fr); } }

.wtab {
  min-height: 42px;
  padding: .5rem .6rem;
  background: var(--bg-alt);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--text-leise);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.wtab:hover { border-color: rgba(244, 173, 36, .6); color: var(--text); }
.wtab.ist-aktiv {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--graphit);
  font-weight: 700;
}

/* Der Reiter für die gesamte Unterkunft liegt als breite Leiste über den
   vier Wohnungsreitern und ist dadurch klar als Oberpunkt erkennbar. */
.wtab--gesamt {
  grid-column: 1 / -1;
  min-height: 48px;
  font-size: 1rem;
  letter-spacing: .01em;
}

.wgalerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, .3rem + .7vw, .8rem);
  opacity: 1;
  transition: opacity .22s var(--ease);
}
.wgalerie.ist-wechselt { opacity: 0; }

.wbild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--hellgrau);
}
.wbild--gross { grid-column: 1 / span 2; aspect-ratio: 16 / 9; }
.wbild--klein { aspect-ratio: 16 / 10; }
.wbild .media { height: 100%; border-radius: 0; }
.wbild .media__img { height: 100%; object-fit: cover; }

/* Fläche, solange für diese Wohnung noch keine Aufnahme vorliegt */
.wbild__leer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem;
  text-align: center;
  background:
    linear-gradient(rgba(28, 33, 42, .045) 1px, transparent 1px) 0 0 / 100% 30px,
    linear-gradient(90deg, rgba(28, 33, 42, .045) 1px, transparent 1px) 0 0 / 30px 100%,
    var(--hellgrau);
  color: var(--text-leise);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.wbild__leer .icon { width: 22px; height: 22px; opacity: .45; }
.wbild--klein .wbild__leer { font-size: .6875rem; }
.wbild--klein .wbild__leer .icon { width: 18px; height: 18px; }

.objekt__seite { position: relative; }
@media (min-width: 900px) {
  .objekt__seite { position: sticky; top: 3rem; }
}
/* Lage im Haus als kleine Auszeichnung neben der Überschrift, damit sie
   beim Umschalten der Wohnung sofort auffällt. */
.objekt__etage {
  display: inline-block;
  vertical-align: middle;
  margin-left: .6rem;
  padding: .3em .7em;
  background: rgba(244, 173, 36, .16);
  border: 1px solid rgba(244, 173, 36, .5);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--orange-tief);
  white-space: nowrap;
}

.objekt__text {
  margin-top: var(--sp-2);
  color: var(--text-leise);
  font-size: var(--fs-s);
  max-width: 42ch;
}

.objekt__specs {
  border-top: 1px solid var(--linie);
  margin: var(--sp-3) 0 0;
}
.objekt__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: var(--fs-s);
}
.objekt__spec dt { color: var(--text-leise); }
.objekt__spec dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  text-align: right;
}
.objekt__aktion { margin-top: var(--sp-3); }

/* Vier Merkmalskarten unterhalb des Layouts */
.highlights {
  display: grid;
  gap: 1px;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background: var(--linie);
  border-block: 1px solid var(--linie);
}
@media (min-width: 640px)  { .highlights { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .highlights { grid-template-columns: repeat(4, 1fr); } }

.highlight {
  background: var(--bg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.1rem) clamp(1.25rem, 1rem + 1vw, 1.6rem);
  transition: background-color .4s var(--ease);
}
.highlight:hover { background: var(--bg-alt); }
.highlight__icon {
  width: 26px; height: 26px;
  color: var(--graphit);
  margin-bottom: 1rem;
  transition: color .35s var(--ease), transform .45s var(--ease-out);
}
.highlight:hover .highlight__icon { color: var(--orange-tief); transform: translateY(-3px); }
.highlight h3 { margin-bottom: .4rem; font-size: 1.0625rem; }
.highlight p { font-size: var(--fs-s); color: var(--text-leise); }


/* 13  GALERIE & LIGHTBOX ================================================== */

.galerie { background: var(--graphit); color: var(--text-hell); overflow: hidden; }

.galerie__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.galerie__steuerung { display: flex; align-items: center; gap: .5rem; }

.gknopf {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--linie-dunkel);
  border-radius: 50%;
  color: var(--text-hell);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.gknopf:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: var(--graphit); }
.gknopf:disabled { opacity: .3; cursor: default; }
.gknopf .icon { width: 19px; height: 19px; }
.gknopf--autoplay .icon--pause { display: none; }
.gknopf--autoplay.laeuft .icon--pause { display: flex; }
.gknopf--autoplay.laeuft .icon--play { display: none; }

/* Filter nach Wohnung */
.galerie__filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--sp-3);
}
.gfilter {
  padding: .5rem 1rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--linie-dunkel);
  border-radius: 100px;
  color: var(--text-hell-leise);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.gfilter:hover { color: var(--text-hell); border-color: rgba(255, 255, 255, .32); }
.gfilter.ist-aktiv {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--graphit);
}

.strecke {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline-start: var(--gutter);
  padding-bottom: 1.25rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.strecke::-webkit-scrollbar { display: none; }

.strecke__item {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  width: 78vw;
  max-width: 420px;
  opacity: .5;
  transition: opacity .5s var(--ease);
}
.strecke__item[data-size='wide']   { aspect-ratio: 4 / 3; }
.strecke__item[data-size='tall']   { aspect-ratio: 3 / 4; }
.strecke__item[data-size='square'] { aspect-ratio: 1; }
.strecke__item.ist-aktiv { opacity: 1; }
.strecke__item .media { height: 100%; transition: transform .6s var(--ease-out); }

@media (min-width: 720px) {
  .strecke__item { width: 34vw; max-width: 460px; }
  .strecke__item[data-size='wide'] { width: 46vw; max-width: 600px; }
  .strecke__item.ist-aktiv .media { transform: scale(1.02); }
}

.strecke__lupe {
  position: absolute;
  top: .75rem; right: .75rem;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: rgba(16, 20, 27, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  color: var(--weiss);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s var(--ease), transform .35s var(--ease-out);
}
.strecke__lupe .icon { width: 17px; height: 17px; }
.strecke__item:hover .strecke__lupe,
.strecke__item:focus-visible .strecke__lupe { opacity: 1; transform: none; }

.strecke__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.75rem 1rem .9rem;
  background: linear-gradient(to top, rgba(12, 16, 22, .9), transparent);
  color: var(--weiss);
  border-radius: 0 0 var(--radius) var(--radius);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.strecke__item.ist-aktiv .strecke__meta,
.strecke__item:hover .strecke__meta,
.strecke__item:focus-visible .strecke__meta { opacity: 1; }
.strecke__kategorie {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .15rem;
}
.strecke__caption { font-size: var(--fs-s); line-height: 1.4; }

.galerie__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
}
.galerie__zaehler {
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--text-hell-leise);
  flex: none;
  margin: 0;
}
.galerie__zaehler b { color: var(--orange); font-weight: 500; }
.fortschritt {
  position: relative;
  flex: 1 1 160px;
  height: 2px;
  background: var(--linie-dunkel);
  overflow: hidden;
}
.fortschritt__balken {
  position: absolute;
  inset-block: 0; left: 0;
  width: 12%;
  background: var(--orange);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.galerie__hinweis { font-size: var(--fs-xs); color: var(--text-hell-leise); flex: none; margin: 0; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(8, 11, 16, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-hell);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.ist-offen { opacity: 1; visibility: visible; }
.lightbox__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--linie-dunkel);
}
.lightbox__zaehler {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.lightbox__zaehler b { color: var(--orange); font-weight: 500; }
.lightbox__buehne {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, .5rem + 2vw, 2.5rem);
  min-height: 0;
}
.lightbox__figur {
  max-width: min(1160px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}
.lightbox__figur .media { width: min(88vw, 1100px); aspect-ratio: 4 / 3; max-height: 70vh; }
.lightbox__figur .media__img { max-height: 70vh; width: auto; margin-inline: auto; object-fit: contain; }
.lightbox__caption { text-align: center; font-size: var(--fs-s); color: var(--text-hell-leise); }
.lightbox__caption b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .25rem;
}
.lightbox__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--linie-dunkel);
  border-radius: 50%;
  color: var(--text-hell);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lightbox__pfeil:hover { background: var(--orange); color: var(--graphit); border-color: var(--orange); }
.lightbox__pfeil--zurueck { left: max(.75rem, 2vw); }
.lightbox__pfeil--vor { right: max(.75rem, 2vw); }
.lightbox__pfeil .icon { width: 20px; height: 20px; }
.lightbox__miniaturen {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .85rem var(--gutter) calc(.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linie-dunkel);
}
.lightbox__mini {
  flex: none;
  width: 74px;
  aspect-ratio: 4 / 3;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  opacity: .5;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__mini.ist-aktiv { opacity: 1; border-color: var(--orange); }
.lightbox__mini .media { height: 100%; border-radius: 0; }
@media (max-width: 640px) {
  .lightbox__pfeil { width: 44px; height: 44px; }
  .lightbox__miniaturen { display: none; }
}


/* 14  AUSSTATTUNG ========================================================= */

/* Feste Spaltenzahlen statt auto-fit: bei zwölf Einträgen geht das Raster
   dadurch auf jeder Stufe glatt auf und es bleibt keine leere Kachel. */
.ausstattung__grid {
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  grid-template-columns: 1fr;
}
@media (min-width: 480px)  { .ausstattung__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px)  { .ausstattung__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .ausstattung__grid { grid-template-columns: repeat(4, 1fr); } }
.merkmal {
  position: relative;
  background: var(--bg);
  padding: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
  overflow: hidden;
  transition: background-color .35s var(--ease);
}
.merkmal::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 0;
  background: var(--orange);
  transition: height .45s var(--ease-out);
}
.merkmal:hover { background: var(--bg-alt); }
.merkmal:hover::before { height: 100%; }
.merkmal__kopf { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.merkmal__icon { width: 22px; height: 22px; color: var(--graphit); transition: color .35s var(--ease); }
.merkmal:hover .merkmal__icon { color: var(--orange-tief); }
.merkmal__titel { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; }
.merkmal p { font-size: var(--fs-s); color: var(--text-leise); }

.ausstattung__hinweis { margin-top: var(--sp-3); font-size: var(--fs-s); color: var(--text-leise); }

/* 14b PREISE ============================================================== */

.preise { background: var(--bg-alt); }

.preisblock {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
}
@media (min-width: 860px) {
  .preisblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.preisblock__betrag {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--graphit);
}
.preisblock__einheit {
  margin: .35rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-s);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange-tief);
}
.preisblock__hinweis {
  margin: var(--sp-3) 0 var(--sp-3);
  font-size: var(--fs-s);
  color: var(--text-leise);
  max-width: 44ch;
}

.preisblock__punkte {
  display: grid;
  gap: .7rem;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linie);
}
@media (min-width: 860px) {
  .preisblock__punkte { padding-top: 0; padding-left: clamp(1.5rem, 2vw, 2.5rem); border-top: 0; border-left: 1px solid var(--linie); }
}
.preisblock__punkte li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--fs-s);
  color: var(--text-leise);
}
.preisblock__punkte .icon { width: 17px; height: 17px; margin-top: .2rem; color: var(--orange-tief); }


/* 15  LAGE ================================================================ */

.lage { background: var(--bg-alt); }

.lage__layout { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); }

/* Regionskarte.
   Das Bild ist 1448 × 1086, also exakt 4:3 – die Fläche hat dasselbe
   Verhältnis, damit nichts beschnitten wird und die Überlagerungen unten
   genau sitzen.                                                        */
.lkarte {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--graphit);
}
.lkarte__bild { height: 100%; border-radius: 0; }
.lkarte__bild .media__img { height: 100%; }

/* Die Arme laufen beim Einblenden vom Standort nach außen. Jede Linie
   trägt pathLength="1", deshalb reicht ein gemeinsamer Strichwert.     */
.lkarte__arme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lkarte__arm {
  fill: none;
  stroke: rgba(244, 173, 36, .7);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out),
              stroke .3s var(--ease), stroke-width .3s var(--ease);
}
.lkarte.ist-sichtbar .lkarte__arm { stroke-dashoffset: 0; }

.lkarte__ziel {
  fill: var(--orange);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.lkarte.ist-sichtbar .lkarte__ziel { opacity: 1; }

/* Kachel in der Liste angetippt oder überfahren: Arm hervorheben */
.lkarte__arm.ist-aktiv { stroke: rgba(244, 173, 36, 1); stroke-width: 8; }
.lkarte__ziel.ist-aktiv { fill: #fff; }

/* Ringe über der Standortmarkierung – sie liegen auf dem Punkt, den die
   Grafik selbst schon andeutet (48,3 % / 51,6 % der Bildfläche).       */
.lkarte__puls {
  position: absolute;
  left: 48.3%;
  top: 51.6%;
  width: 26%;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 173, 36, .5);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: puls 4.4s var(--ease) infinite;
}
.lkarte__puls:nth-of-type(2) { animation-delay: 2.2s; }
@keyframes puls {
  0%   { transform: translate(-50%, -50%) scale(.35); opacity: 0; }
  30%  { opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

/* Umgebungsbild unter der Karte – bewusst klein gehalten */
.lage__bild { margin-top: clamp(.6rem, .3rem + 1vw, 1rem); aspect-ratio: 16 / 10; }

.lage__hinweis {
  margin: .75rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-leise);
}

/* Entfernungen als ruhige Liste neben der Karte */
.lage__rechts h3 { margin-bottom: var(--sp-2); }
.wege { border-top: 1px solid var(--linie); }
.weg {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem .25rem;
  border-bottom: 1px solid var(--linie);
  transition: padding-left .35s var(--ease);
}
.weg:hover { padding-left: .7rem; }
.weg__icon {
  width: 22px; height: 22px;
  flex: none;
  color: var(--text-leise);
  transition: color .3s var(--ease);
}
.weg:hover .weg__icon { color: var(--orange-tief); }
.weg__titel {
  flex: 1;
  min-width: 0;
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}
.weg__zahlen {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex: none;
  margin: 0;
  text-align: right;
}
.weg__wert {
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--graphit);
  white-space: nowrap;
}
.weg__zusatz {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
  padding-left: .5rem;
  border-left: 1px solid var(--linie);
  min-width: 5ch;
  white-space: nowrap;
}

.lage__note { margin-top: var(--sp-3); font-size: var(--fs-xs); line-height: 1.55; color: var(--text-leise); max-width: 68ch; }
.lage__rechts .btn-gruppe { margin-top: var(--sp-3); }

/* Desktop: Karte und Bild links, Entfernungen rechts */
@media (min-width: 980px) {
  .lage__layout {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 3vw, 3.5rem);
    align-items: start;
  }
  .lage__links { position: sticky; top: 3rem; }
}


/* 16  VERLÄSSLICHKEIT ===================================================== */

.trust { background: var(--tiefschwarz); color: var(--text-hell); }
.trust__kopf { max-width: 60ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.trust__grid {
  display: grid;
  gap: 1px;
  background: var(--linie-dunkel);
  border-block: 1px solid var(--linie-dunkel);
}
@media (min-width: 620px)  { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trust__grid { grid-template-columns: repeat(3, 1fr); } }
.trust__punkt {
  background: var(--tiefschwarz);
  padding: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
  transition: background-color .35s var(--ease);
}
.trust__punkt:hover { background: #171d26; }
.trust__punkt .icon { width: 22px; height: 22px; color: var(--orange); margin-bottom: .85rem; }
.trust__punkt h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.trust__punkt p { font-size: var(--fs-s); color: var(--text-hell-leise); }


/* 17  FAQ ================================================================= */

.faq__liste { border-top: 1px solid var(--linie); max-width: 62rem; }
.faq__item { border-bottom: 1px solid var(--linie); }
.faq__frage {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem .25rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.22rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--text);
  transition: color .3s var(--ease);
}
.faq__frage:hover { color: var(--orange-tief); }
.faq__zeichen { flex: none; position: relative; width: 20px; height: 20px; margin-top: .3rem; }
.faq__zeichen::before,
.faq__zeichen::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease-out), opacity .3s var(--ease);
}
.faq__zeichen::before { width: 16px; height: 1.5px; }
.faq__zeichen::after  { width: 1.5px; height: 16px; }
.faq__frage[aria-expanded='true'] { color: var(--text); }
.faq__frage[aria-expanded='true'] .faq__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq__antwort > div { overflow: hidden; }
.faq__item.ist-offen .faq__antwort { grid-template-rows: 1fr; }
.faq__antwort p { padding: 0 3rem 1.5rem .25rem; color: var(--text-leise); max-width: 68ch; }


/* 18  ABSCHLUSS =========================================================== */

.abschluss {
  position: relative;
  background: var(--tiefschwarz);
  color: var(--text-hell);
  overflow: hidden;
  isolation: isolate;
}
.abschluss__bg { position: absolute; inset: 0; z-index: -2; }
.abschluss__bg .media { height: 100%; border-radius: 0; }
.abschluss::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(16, 20, 27, .95), rgba(16, 20, 27, .7)),
    radial-gradient(80% 60% at 82% 22%, rgba(244, 173, 36, .13), transparent 62%);
}
.abschluss__inner { max-width: 44rem; padding-block: clamp(4.5rem, 3rem + 7vw, 9rem); }
.abschluss__text {
  margin-top: var(--sp-3);
  color: var(--text-hell-leise);
  font-size: clamp(1rem, .97rem + .4vw, 1.18rem);
  max-width: 40rem;
}
.abschluss .btn-gruppe { margin-top: var(--sp-4); }
.abschluss__hinweis {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-hell-leise);
}
.abschluss__hinweis::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: punkt-puls 2.8s var(--ease) infinite;
}
@keyframes punkt-puls {
  0%   { box-shadow: 0 0 0 0 rgba(244, 173, 36, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(244, 173, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 173, 36, 0); }
}


/* 19  FOOTER ============================================================== */

.footer {
  background: var(--graphit);
  color: var(--text-hell);
  border-top: 1px solid var(--linie-dunkel);
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { .footer { padding-bottom: 0; } }

.footer__oben { display: grid; gap: var(--sp-4); padding-block: clamp(3rem, 2rem + 4vw, 4.5rem); }
@media (min-width: 720px)  { .footer__oben { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1080px) { .footer__oben { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }

.footer__marke {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: var(--sp-2);
}
.footer__marke .icon { width: 28px; height: 28px; color: var(--orange); }
.footer__logo { width: 190px; height: auto; }
.footer__text { font-size: var(--fs-s); color: var(--text-hell-leise); max-width: 36ch; }

.footer__titel {
  font-family: var(--font-display);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-hell-leise);
  margin-bottom: var(--sp-2);
}
.footer__liste { display: grid; gap: .55rem; }
.footer__liste a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-s);
  color: var(--text-hell);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.footer__liste a:hover { color: var(--orange); }
.footer__liste .icon { width: 17px; height: 17px; }
.footer__adresse { font-style: normal; font-size: var(--fs-s); color: var(--text-hell-leise); line-height: 1.7; }

.footer__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: 1.5rem;
  border-top: 1px solid var(--linie-dunkel);
  font-size: var(--fs-xs);
  color: var(--text-hell-leise);
}
.footer__unten p { margin: 0; }
.footer__unten nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__unten a { text-decoration: none; }
.footer__unten a:hover { color: var(--orange); }


/* 20  SCHWEBENDER WHATSAPP-BUTTON ========================================= */

.wa-float {
  position: fixed;
  right: max(1rem, 2.5vw);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 52px;
  padding: 0 1.1rem;
  background: var(--orange);
  color: var(--graphit);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(10, 14, 20, .35);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease-out), background-color .3s var(--ease);
}
.wa-float.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { background: #ffbc3a; }
.wa-float .icon { width: 22px; height: 22px; }
.wa-float__text { display: none; }
/* Auf dem Smartphone übernimmt der Knopf in der Kopfzeile diese Aufgabe –
   der schwebende Button würde die Abschnittsleiste verdecken.          */
@media (max-width: 767px) { .wa-float { display: none; } }
@media (min-width: 768px) { .wa-float { bottom: max(1.75rem, 3vh); } .wa-float__text { display: inline; } }


/* 20b WHATSAPP-ANFRAGE (Formularfenster) ================================== */

.anfrage {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, .4rem + 1.6vw, 2rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.anfrage.ist-offen { opacity: 1; visibility: visible; }

.anfrage__hinter {
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 16, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.anfrage__fenster {
  position: relative;
  width: min(100%, 40rem);
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--graphit);
  color: var(--text-hell);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius-m);
  box-shadow: 0 30px 80px rgba(6, 9, 13, .55);
  transform: translateY(14px) scale(.985);
  transition: transform .4s var(--ease-out);
}
.anfrage.ist-offen .anfrage__fenster { transform: none; }

.anfrage__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border-bottom: 1px solid var(--linie-dunkel);
}
.anfrage__titel {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}
.anfrage__untertitel {
  margin: .55rem 0 0;
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--text-hell-leise);
  max-width: 46ch;
}
.anfrage__schliessen {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  color: var(--text-hell);
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.anfrage__schliessen:hover { background: rgba(255, 255, 255, .14); }
.anfrage__schliessen .icon { width: 17px; height: 17px; }

.anfrage__form {
  display: grid;
  gap: var(--sp-2);
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
}
.anfrage__felder { display: grid; gap: var(--sp-2); }
.anfrage__reihe  { display: grid; gap: var(--sp-2); }
@media (min-width: 560px) { .anfrage__reihe { grid-template-columns: 1fr 1fr; } }

/* Anreise und Abreise stehen auf dem Smartphone bewusst untereinander.
   Nebeneinander waren sie zu eng: Datumsfelder bringen je nach Gerät
   und eingestellter Schriftgröße eine eigene Mindestbreite mit und
   schoben sich dann übereinander. Volle Breite ist verlässlich.

   Personenzahl und Wohnung teilen sich weiterhin eine Zeile. Beide
   Feldarten lassen sich zuverlässig verkleinern, und die Spalten sind
   ungleich, weil die eine Eingabe einstellig ist und die andere Texte
   wie „Wohnung 2 – 8 Betten“ trägt. */
@media (min-width: 340px) and (max-width: 559px) {
  .anfrage__reihe--wahl {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .6rem;
    /* „Anzahl der Personen“ bricht in der schmalen Spalte um. Ohne
       diese Zeile stünden die beiden Eingabefelder versetzt. */
    align-items: end;
  }
}

.feld { display: grid; gap: .4rem; min-width: 0; }
.feld__label {
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--text-hell);
}
.feld__optional {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-hell-leise);
  margin-left: .35rem;
}
.feld__eingabe {
  width: 100%;
  min-height: 50px;
  padding: .7rem .85rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  color: var(--text-hell);
  font-family: var(--font-text);
  font-size: 1rem;          /* verhindert das Hineinzoomen auf iOS */
  line-height: 1.4;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.feld__eingabe--gross { min-height: 90px; resize: vertical; }
.feld__eingabe:hover { border-color: rgba(255, 255, 255, .28); }
.feld__eingabe:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-color: transparent;
  background: rgba(255, 255, 255, .08);
}
.feld__eingabe::placeholder { color: rgba(255, 255, 255, .38); }
/* Kalender- und Zahlenfelder in dunkler Umgebung lesbar halten */
.feld__eingabe::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }

/* Datumsfelder auf iOS
   Ohne appearance: none behält Safari das native Bedienelement mit
   eigener Mindestbreite. Das Feld ignoriert dann seine Spalte und
   schiebt sich über das Nachbarfeld. */
input[type="date"].feld__eingabe {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  /* iOS setzt sonst eine eigene Höhe aus der Schriftgröße */
  height: auto;
}
input[type="date"].feld__eingabe::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
input[type="date"].feld__eingabe::-webkit-datetime-edit { padding: 0; }
select.feld__eingabe { appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeb4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
}
select.feld__eingabe option { background: var(--graphit); color: var(--text-hell); }

.feld__eingabe.ist-fehlerhaft { border-color: #e2564a; background: rgba(226, 86, 74, .1); }
.feld__fehler {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: #ff9a90;
  min-height: 0;
}
.feld__fehler:empty { display: none; }

.anfrage__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: var(--sp-2);
}
.anfrage__fuss .btn { flex: 1 1 auto; }
.anfrage__fuss .btn--sekundar {
  --btn-fg: var(--text-hell);
  --btn-br: rgba(255, 255, 255, .3);
}
.anfrage__fuss .btn--sekundar:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-fg: var(--weiss); }

.anfrage__notiz {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-hell-leise);
}

/* Auf dem Smartphone als Blatt am unteren Rand.
   Vorher lief das gesamte Fenster als ein Block – die Überschrift wanderte
   beim Scrollen weg und der Absendeknopf stand ausserhalb des Bildschirms.
   Jetzt stehen Kopf und Fuss fest, dazwischen scrollt nur das Formular. */
@media (max-width: 559px) {
  .anfrage { align-items: flex-end; padding: 0; }

  .anfrage__fenster {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* dvh berücksichtigt die ein- und ausfahrende Browserleiste */
    max-height: 100dvh;
    height: 100dvh;
    overflow: hidden;              /* gescrollt wird nur das Formular */
    border-radius: 0;
    border: 0;
    transform: translateY(2%);
  }

  .anfrage__kopf {
    flex: none;
    padding: 1rem var(--gutter);
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  }
  .anfrage__titel { font-size: 1.15rem; }
  .anfrage__untertitel { margin-top: .35rem; font-size: var(--fs-xs); }

  .anfrage__form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
    padding: 0;
  }
  .anfrage__felder {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: 1.1rem var(--gutter) 1.25rem;
  }

  /* min-width: 0 ist bei Datumsfeldern nötig – sonst behalten sie ihre
     innere Mindestbreite und sprengen die zweispaltige Reihe.        */
  .feld__eingabe {
    min-height: 48px;
    min-width: 0;
    width: 100%;
    padding: .7rem .8rem;
  }
  .feld__eingabe--gross { min-height: 72px; }

  /* Das Auswahlfeld braucht rechts Platz für den Pfeil, sonst schneidet
     er den längsten Eintrag an. */
  select.feld__eingabe {
    padding-right: 2.1rem;
    font-size: .9375rem;
    text-overflow: ellipsis;
  }

  /* Beide Schaltflächen in einer Zeile – zwei volle Reihen würden vom
     ohnehin knappen Platz auf dem Handy zu viel wegnehmen. Durch
     row-reverse steht der Absendeknopf rechts.                       */
  .anfrage__fuss {
    flex: none;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .5rem;
    margin: 0;
    padding: .8rem var(--gutter);
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: var(--graphit);
    border-top: 1px solid var(--linie-dunkel);
    box-shadow: 0 -12px 24px rgba(6, 9, 13, .35);
  }
  /* Ohne Umbruch behält der lange Absendetext seine volle Breite und
     schiebt „Abbrechen“ aus dem Bild. Deshalb darf hier umbrochen
     werden, und beide Schaltflächen dürfen schrumpfen.              */
  .anfrage__fuss .btn {
    min-height: 52px;
    min-width: 0;
    width: auto;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    padding-inline: .9rem;
    font-size: .9375rem;
  }
  .anfrage__fuss .btn--primar   { flex: 1 1 auto; }
  .anfrage__fuss .btn--sekundar { flex: 0 1 auto; }
}

/* Sehr schmale Geräte: etwas weniger Seitenabstand im Anfragefenster,
   damit die zweispaltigen Reihen nicht gedrängt wirken. */
@media (max-width: 379px) {
  .anfrage__kopf,
  .anfrage__felder,
  .anfrage__fuss { padding-inline: 1rem; }
}


/* 21  RECHTSTEXTE & 404 =================================================== */

.rechts-kopf {
  background: var(--graphit);
  color: var(--text-hell);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 3.5rem);
}
.rechts-kopf .kicker { color: var(--text-hell-leise); }
.rechts-kopf h1 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.028em; margin: 0; }
.rechts-kopf .zurueck {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  color: var(--text-hell-leise);
  text-decoration: none;
}
.rechts-kopf .zurueck:hover { color: var(--orange); }
.rechts-kopf .zurueck .icon { width: 17px; height: 17px; }

.prosa { max-width: 68ch; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.prosa h2 {
  font-size: clamp(1.3rem, 1.15rem + .8vw, 1.7rem);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linie);
}
.prosa h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prosa h3 { font-size: 1.0625rem; margin-top: var(--sp-3); margin-bottom: .5rem; }
.prosa p, .prosa li { color: var(--text-leise); }
.prosa ul { list-style: none; display: grid; gap: .45rem; margin: 0 0 1em; }
.prosa ul li { position: relative; padding-left: 1.35rem; }
.prosa ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 7px; height: 1px;
  background: var(--orange);
}
.prosa address { font-style: normal; color: var(--text-leise); line-height: 1.8; }

/* 404 – bewusst schlicht: nur Hinweis und zwei Wege zurück */
.fehler {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--graphit);
  color: var(--text-hell);
}
/* breit genug, dass beide Buttons nebeneinander stehen */
.fehler__inner {
  max-width: 39rem;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
.fehler__nr {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-hell-leise);
}
.fehler__nr::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--orange);
  flex: none;
}
.fehler h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.15;
  margin: 0;
}
.fehler__text {
  margin: var(--sp-2) 0 0;
  color: var(--text-hell-leise);
  max-width: 42ch;
}
.fehler .btn-gruppe { margin-top: var(--sp-4); }



/* 22  REVEAL-ANIMATIONEN ================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--verzug, 0) * 80ms);
}
[data-reveal].ist-sichtbar { opacity: 1; transform: none; }
/* etwas mehr als 100 %, damit die Zeile auch hinter dem Innenabstand
   der Maske vollständig verschwindet                                  */
[data-reveal='zeile'] { transform: translateY(130%); transition-duration: .9s; }
[data-reveal='links'] { transform: translateX(-24px); }


/* 23  REDUZIERTE BEWEGUNG & PRINT ========================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .media--reveal { clip-path: none !important; }
  .media--reveal > * { transform: none !important; }
  .strecke { scroll-behavior: auto; }
  .strecke__item { opacity: 1; }
  .lkarte__arm { stroke-dashoffset: 0; }
  .lkarte__ziel { opacity: 1; }
  .lkarte__puls { display: none; }
  .siegel__ring { animation: none; }
  .hero__scroll-punkt { animation: none; opacity: 1; }
  .hero__bg .media__img { animation: none; transform: none; }
}

@media print {
  .rail, .mkopf, .mnav, .wa-float, .galerie__steuerung, .lightbox,
  .hero__scroll, .siegel { display: none !important; }
  body { background: #fff; color: #000; }
  .seite { padding-left: 0; }
  .dunkel, .hero, .galerie, .trust, .abschluss, .footer, .fakten,
  .tiefschwarz { background: #fff !important; color: #000 !important; }
  .hero::after, .abschluss::after { display: none; }
  .faq__antwort { grid-template-rows: 1fr !important; }
}


/* 24  STANDORTAUSWAHL (Startseite) ========================================
   Eigene Einstiegsseite vor den Standortseiten. Sie hat bewusst keine
   Seitenleiste: Es gibt nur eine Entscheidung zu treffen.
   ========================================================================= */

.seite--auswahl .seite { padding-left: 0; }

.auswahl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  /* flex-start plus margin-block: auto am Inhalt zentriert, solange Platz
     ist, schneidet aber nichts ab, sobald der Inhalt hoeher wird als der
     Bildschirm. align-items: center wuerde oben abschneiden. */
  align-items: flex-start;
  background: var(--tiefschwarz);
  color: var(--text-hell);
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
}

/* Grossflaechiges Foto, stark abgedunkelt – es traegt die Stimmung,
   lesen muss man darauf nichts. */
.auswahl__bg { position: absolute; inset: 0; z-index: -2; }
.auswahl__bg .media { height: 100%; border-radius: 0; }
.auswahl__bg .media__img { height: 100%; }
.auswahl::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(16, 20, 27, .82) 0%, rgba(16, 20, 27, .93) 55%,
                            rgba(16, 20, 27, .97) 100%);
}

.auswahl__inner { position: relative; z-index: 1; margin-block: auto; }

.auswahl__kopf { max-width: 46rem; }
.auswahl__logo {
  width: min(206px, 58%);
  height: auto;
  margin-bottom: clamp(1.1rem, .8rem + 1.2vw, 1.6rem);
}
.auswahl__titel {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, .9rem + 2.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  margin: 0;
}
.auswahl__titel .zeile { display: block; }
.auswahl__titel .akzent { color: var(--orange); }
.auswahl__lead {
  margin: var(--sp-2) 0 0;
  max-width: 42rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.6;
  color: var(--text-hell-leise);
}

/* --- Die beiden Standortkarten ------------------------------------------ */
.standorte {
  display: grid;
  gap: clamp(1rem, .7rem + 1.4vw, 1.75rem);
  margin-top: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
}
@media (min-width: 860px) { .standorte { grid-template-columns: 1fr 1fr; } }

/* Die ganze Karte ist der Link. */
.standort {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius-m);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .4s var(--ease-out), border-color .35s var(--ease),
              background-color .35s var(--ease), box-shadow .4s var(--ease);
}
.standort:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(244, 173, 36, .55);
  box-shadow: 0 22px 50px rgba(6, 9, 13, .5);
}
.standort:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Flach genug, dass beide Karten samt Text auf einen Bildschirm passen. */
.standort__bild { position: relative; display: block; aspect-ratio: 16 / 10; max-height: 270px; }
.standort__bild .media { height: 100%; border-radius: 0; }

.standort__marke {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .35em .75em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.standort__marke--frei { background: rgba(244, 173, 36, .92); color: var(--graphit); }
.standort__marke--bald {
  background: rgba(16, 20, 27, .78);
  color: var(--text-hell);
  border: 1px solid rgba(255, 255, 255, .28);
}

.standort__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .75rem;
  padding: clamp(1.15rem, .9rem + 1vw, 1.6rem);
}
.standort__ort {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
}
.standort__text { font-size: var(--fs-s); line-height: 1.6; color: var(--text-hell-leise); }

.standort__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  padding-top: .75rem;
  border-top: 1px solid var(--linie-dunkel);
  font-size: var(--fs-s);
  color: var(--text-hell-leise);
}
.standort__zahlen b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--weiss);
}
.standort__zahlen--offen { font-style: italic; }

/* Kurze Merkmalsliste – nur bestaetigte Angaben, keine Werbefloskeln. */
.standort__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .15rem;
}
.standort__merkmale span {
  padding: .3em .7em;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--linie-dunkel);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text-hell-leise);
}

.standort__notiz {
  font-size: var(--fs-xs);
  color: var(--text-hell-leise);
}

.standort__mehr {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--orange);
}
.standort__mehr .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.standort:hover .standort__mehr .icon { transform: translateX(4px); }

/* --- Drei kurze Punkte unter den Karten --------------------------------- */
.auswahl__punkte {
  display: grid;
  gap: .75rem 1.5rem;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-s);
  color: var(--text-hell-leise);
}
@media (min-width: 720px) { .auswahl__punkte { grid-template-columns: repeat(3, auto); justify-content: start; } }
.auswahl__punkte li { display: flex; align-items: center; gap: .6rem; }
.auswahl__punkte .icon { width: 20px; height: 20px; color: var(--orange); flex: none; }

/* --- Feste Standortleiste unten, nur Smartphone ------------------------- */
.onav { display: none; }

@media (max-width: 767px) {
  .onav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    gap: .5rem;
    padding: .5rem var(--gutter);
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 20, 27, .95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--linie-dunkel);
  }
  .onav__pille {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    padding: .4rem .7rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--linie-dunkel);
    border-radius: 999px;
    color: var(--text-hell);
    text-decoration: none;
    text-align: center;
  }
  .onav__nr {
    font-family: var(--font-display);
    font-size: .625rem;
    letter-spacing: .08em;
    color: var(--orange);
  }
  .onav__label {
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Die Leiste darf den Footer nicht verdecken – der Abstand haengt am
     Element, das den Footer einschliesst. Nur Seiten mit Leiste. */
  .seite--onav .seite { padding-bottom: 82px; }
}

/* --- Standortseite in Vorbereitung -------------------------------------- */
.auswahl--einzeln { align-items: flex-start; padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.auswahl--einzeln .zurueck { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.auswahl--einzeln .kicker { color: var(--text-hell-leise); }
.auswahl--einzeln .kicker .nummer { color: var(--orange); }

.nb-stand {
  margin-top: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  max-width: 46rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius-m);
}
.nb-stand__titel {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 var(--sp-2);
}
.nb-stand__liste { margin: 0; display: grid; }
.nb-stand__liste > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--linie-dunkel);
  font-size: var(--fs-s);
}
.nb-stand__liste dt { color: var(--text-hell-leise); }
.nb-stand__liste dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--weiss);
  text-align: right;
}
/* Offene Angaben sind bewusst als offen gekennzeichnet und nicht geraten. */
.nb-stand__liste dd.ist-offen {
  font-family: var(--font-text);
  font-weight: 400;
  font-style: italic;
  color: var(--text-hell-leise);
}

.nb-stand__aktion { margin-top: var(--sp-3); }
.nb-stand__notiz {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-hell-leise);
}

.onav__pille--aktiv {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--graphit);
}
.onav__pille--aktiv .onav__nr { color: var(--graphit); }

/* --- Verpflegungsautomat (Abschnitt 04) --------------------------------- */
.automat {
  display: grid;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  align-items: center;
  margin-top: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--bg-alt);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
}
@media (min-width: 760px) {
  /* Hochformat links, Text rechts – das Bild bleibt dadurch vollständig
     sichtbar und muss nicht auf Querformat beschnitten werden. */
  .automat { grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); }
}
.automat__bild { aspect-ratio: 3 / 4; border-radius: var(--radius-m); }
.automat__kicker {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange-tief);
}
.automat__text h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.65rem); margin: 0; }
.automat__text > p { margin: var(--sp-2) 0 0; color: var(--text-leise); font-size: var(--fs-s); line-height: 1.65; max-width: 52ch; }
.automat__liste {
  display: grid;
  gap: .55rem 1.5rem;
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-s);
}
@media (min-width: 560px) { .automat__liste { grid-template-columns: 1fr 1fr; } }
.automat__liste li { display: flex; align-items: center; gap: .6rem; }
.automat__liste .icon { width: 20px; height: 20px; color: var(--orange-tief); flex: none; }