/* ==========================================================================
   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;
  }
  .rail__marke .icon { width: 32px; height: 32px; }
  .rail__marke .icon svg { stroke-width: 1.4; }
  .rail__marke-text { display: grid; justify-items: center; gap: .1rem; text-align: center; }
  .rail__marke-oben {
    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__marke-unten {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text-hell);
    line-height: 1.1;
  }
  .rail__marke:hover .rail__marke-unten { color: var(--orange); }

  .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__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; }

  /* Alle drei Bilder im gleichen Format – vorher standen sie wegen
     unterschiedlicher Seitenverhältnisse auf verschiedenen Höhen.   */
  .hero__collage {
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: var(--sp-3);
  }
  .collage__kueche,
  .collage__bad,
  .collage__aussen { aspect-ratio: 3 / 4; }
  .collage__bild .media {
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(6, 9, 13, .4);
  }

  .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; }

/* --- 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  UNTERKUNFT ========================================================== */

.objekt__layout {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .objekt__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: start;
  }
}

.objekt__bilder {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.6rem, .3rem + 1vw, 1rem);
}
.objekt__bild--gross { grid-column: 1 / span 6; aspect-ratio: 16 / 11; }
.objekt__bild--hoch  { grid-column: 1 / span 4; aspect-ratio: 4 / 3; }
.objekt__bild--klein { grid-column: 5 / span 2; aspect-ratio: 3 / 4; }
.objekt__bild .media { height: 100%; }

.objekt__seite { position: relative; }
@media (min-width: 900px) {
  .objekt__seite { position: sticky; top: 3rem; }
}
.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; }

.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); }

/* Weitere Merkmale, kompakt als Marken */
.ausstattung__weitere { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ausstattung__weitere-titel {
  font-family: var(--font-display);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--sp-2);
}
.marken { display: flex; flex-wrap: wrap; gap: .5rem; }
.marke {
  padding: .4rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 100px;
  background: var(--bg-alt);
  font-size: var(--fs-xs);
  color: var(--text-leise);
}


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

.preise { background: var(--bg-alt); }
.preise__grid {
  display: grid;
  gap: clamp(1rem, .7rem + 1.2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .preise__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .preise__grid { grid-template-columns: repeat(3, 1fr); } }

.preis {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  transition: border-color .35s var(--ease), transform .4s var(--ease-out);
}
.preis:hover { transform: translateY(-3px); }
.preis--betont {
  border-color: rgba(244, 173, 36, .55);
  box-shadow: 0 14px 34px rgba(28, 33, 42, .08);
}
.preis__titel { font-size: 1.15rem; }
.preis__untertitel {
  margin: .2rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange-tief);
}
.preis__betrag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45rem;
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.preis__einheit {
  font-family: var(--font-text);
  font-size: var(--fs-s);
  font-weight: 400;
  color: var(--text-leise);
}
.preis__zeilen {
  display: grid;
  gap: .5rem;
  margin: var(--sp-3) 0 var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linie);
}
.preis__zeilen li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--fs-s);
  color: var(--text-leise);
}
.preis__zeilen li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 1px;
  background: var(--orange);
}
.preis .btn { margin-top: auto; }

.preise__hinweis {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-leise);
  max-width: 74ch;
}


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

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

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

/* Abstrahierte Karte */
.lkarte {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--graphit);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.lkarte::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 42px 42px;
}
.lkarte__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lkarte__linie {
  fill: none;
  stroke: rgba(255, 255, 255, .2);
  stroke-width: .6;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.lkarte.ist-sichtbar .lkarte__linie { stroke-dashoffset: 0; }
.lkarte__linie--verkehr    { stroke: rgba(244, 173, 36, .6); transition-delay: .1s; }
.lkarte__linie--versorgung { transition-delay: .25s; }
.lkarte__linie--arbeit     { stroke: rgba(244, 173, 36, .3); transition-delay: .4s; }
.lkarte__linie--freizeit   { transition-delay: .5s; }

.lkarte__punkt {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 0 0 4px rgba(244, 173, 36, .18);
  transition: transform .5s var(--ease-out);
}
.lkarte.ist-sichtbar .lkarte__punkt { transform: translate(-50%, -50%) scale(1); }

.lkarte__zentrum {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  z-index: 2;
}
.lkarte__puls {
  position: absolute;
  width: 100px; height: 100px;
  border: 1px solid rgba(244, 173, 36, .4);
  border-radius: 50%;
  animation: puls 3.6s var(--ease) infinite;
}
.lkarte__puls:nth-child(2) { animation-delay: 1.2s; }
@keyframes puls {
  0%   { transform: scale(.42); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: scale(1.55); opacity: 0; }
}
.lkarte__marke {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: .3rem;
  padding: .9rem 1.15rem;
  background: var(--orange);
  color: var(--graphit);
  border-radius: var(--radius);
}
.lkarte__marke .icon { width: 20px; height: 20px; }
.lkarte__marke span {
  font-family: var(--font-display);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

/* 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); }
.trust__aktion { margin-top: var(--sp-4); }


/* 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__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__reihe { display: grid; gap: var(--sp-2); }
@media (min-width: 560px) { .anfrage__reihe { grid-template-columns: 1fr 1fr; } }

.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; }
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 */
@media (max-width: 559px) {
  .anfrage { align-items: flex-end; padding: 0; }
  .anfrage__fenster {
    width: 100%;
    max-height: 92svh;
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(3%);
  }
  .anfrage__fuss { flex-direction: column-reverse; }
  .anfrage__fuss .btn { width: 100%; }
}


/* 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__linie { stroke-dashoffset: 0; }
  .lkarte__punkt { transform: translate(-50%, -50%) scale(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; }
}