/* ==========================================================================
   JuhlReal – juhlreal.webnova.at
   Ein einziges Stylesheet, mobile first. Keine Frameworks.
   ========================================================================== */

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

/* --- Tokens -------------------------------------------------------------- */
:root {
  --ink: #0b0b0b;
  --panel: #3a3a3a;
  --panel-soft: #444;
  --cream: #f7f4e8;
  --gold: #c6a75e;
  --gold-lo: #b0914a;
  --gold-hi: #ddc588;
  --white: #fff;
  --on-dark: #f3f1ea;
  --on-dark-mute: rgba(243, 241, 234, .72);
  --on-light: #1d1d1d;
  --on-light-mute: #5c5c5c;
  --line-dark: rgba(255, 255, 255, .14);
  --line-light: rgba(0, 0, 0, .1);

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;

  --shell: 1300px;
  --gut: clamp(1.25rem, 4vw, 3.25rem);
  --sec-y: clamp(4rem, 9vw, 8rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--on-dark);
  font: 400 clamp(.95rem, .35vw + .87rem, 1.0625rem)/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.14; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { width: min(100% - (var(--gut) * 2), var(--shell)); margin-inline: auto; }

.skip {
  position: fixed; inset-inline-start: 1rem; top: -6rem; z-index: 200;
  background: var(--gold); color: #14100a; padding: .7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/* --- Vorhang beim Aufruf -------------------------------------------------
   Kurz das Logo zeigen, dann den Blick auf die Seite freigeben. Zwei Dinge
   sind daran wichtig:

   1. Er nimmt sich SELBST weg – per CSS-Animation mit forwards. Läuft kein
      JavaScript oder bricht es ab, ist der Vorhang trotzdem nach gut einer
      Sekunde offen. Ein Vorhang, der an einem Skript hängt, ist ein schwarzer
      Bildschirm mit Fehlerpotenzial.
   2. JavaScript kann ihn nur FRÜHER öffnen (Klasse is-fertig, sobald die Seite
      geladen ist), nie länger stehen lassen.

   Wer im System weniger Bewegung eingestellt hat, sieht ihn gar nicht. */
.vorhang {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ink);
  animation: vorhangAuf .55s var(--ease) .95s forwards;
}
.vorhang__mitte { display: grid; justify-items: center; gap: 1.1rem; }
.vorhang__logo {
  width: clamp(150px, 34vw, 220px); height: auto;
  animation: vorhangLogo .8s var(--ease) both;
}
/* Ein goldener Strich zieht unter dem Logo durch – kurz, ruhig, kein Zappeln. */
.vorhang__linie {
  display: block; width: clamp(90px, 22vw, 150px); height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transform-origin: center;
  animation: vorhangLinie .75s var(--ease) .18s both;
}

@keyframes vorhangLogo {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes vorhangLinie {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes vorhangAuf {
  to { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-1.5rem); }
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: linear-gradient(135deg, var(--gold-hi), var(--gold-lo));
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.7em;
  background: var(--btn-bg);
  color: #191305;
  border: 0; border-radius: 999px;
  font: 600 .875rem/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  box-shadow: 0 6px 22px -12px rgba(198, 167, 94, .9);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 30px -14px rgba(198, 167, 94, .95); }
.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent; color: var(--on-dark);
  border: 1px solid var(--line-dark); box-shadow: none;
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); filter: none; }

.btn--light { background: var(--ink); color: var(--cream); box-shadow: none; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 96px;
}
.brand { flex: none; margin-inline-end: auto; display: flex; }
.brand img { width: clamp(118px, 11vw, 148px); height: auto; }

.mainnav { display: contents; }
.mainnav > ul {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
}
.mainnav a {
  text-decoration: none;
  font-size: .9375rem;
  color: var(--on-dark);
  padding: .4rem 0;
  position: relative;
  transition: color .2s var(--ease);
}
.mainnav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--gold);
  transition: right .3s var(--ease);
}
.mainnav a:hover, .mainnav a[aria-current] { color: var(--gold); }
.mainnav a:hover::after, .mainnav a[aria-current]::after { right: 0; }
.mainnav__cta { display: none; }

.header__cta { flex: none; }

.burger {
  display: none;
  width: 46px; height: 46px; flex: none;
  background: transparent; border: 1px solid var(--line-dark); border-radius: 12px;
  padding: 0; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 1.5px; margin: 4px auto;
  background: var(--on-dark); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .header__inner { min-height: 72px; }
  .header__cta { display: none; }
  .burger { display: block; }
  .mainnav {
    display: block;
    position: fixed; inset: 72px 0 auto;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    padding: 1rem var(--gut) 2rem;
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform .38s var(--ease), visibility .38s;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .mainnav.is-open { transform: translateY(0); visibility: visible; }
  .mainnav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mainnav > ul a {
    display: block; padding: .95rem .25rem; font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .mainnav a::after { display: none; }
  .mainnav__cta { display: inline-flex; margin-top: 1.5rem; }
}

/* --- Section-Bausteine --------------------------------------------------- */
.section { padding-block: var(--sec-y); position: relative; }
.section--dark { background: var(--panel); color: var(--on-dark); }
.section--black { background: var(--ink); color: var(--on-dark); }
.section--cream { background: var(--cream); color: var(--on-light); }
.section--cream .sec-head__watermark { color: rgba(0, 0, 0, .045); }

.sec-head {
  position: relative;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  /* Bezugsgröße für das Wasserzeichen darunter. */
  container-type: inline-size;
}
.sec-head__label {
  display: inline-block;
  font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
/* Das blasse Wasserzeichen hinter der Überschrift.
   Es steht in einer Zeile und darf nicht abgeschnitten werden – ein früheres
   overflow:clip hat "ERFAHRUNGEN" auf breiten Schirmen die letzten Buchstaben
   gekostet. Es darf aber auch nicht über den rechten Rand hinausragen; auf dem
   Handy tat es das um rund 46 px, was nur body{overflow-x:hidden} verdeckte.
   Beides zugleich geht nur, wenn die Schriftgröße von der VERFÜGBAREN Breite
   abhängt statt vom Fenster: 13cqi ist knapp unter dem, was das längste Wort
   ("Erfahrungen", 11 Zeichen) in dieser Schrift gerade noch füllt.
   Die vw-Zeile davor ist der Rückfall für Browser ohne Container-Einheiten. */
.sec-head__watermark {
  position: absolute; left: -.06em; top: -.55em;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.25rem, 11vw, 7.5rem);
  font-size: clamp(2.25rem, 13cqi, 7.5rem);
  max-width: 100%;
  line-height: 1;
  color: rgba(255, 255, 255, .05);
  text-transform: uppercase;
  pointer-events: none; user-select: none; white-space: nowrap;
  z-index: 0;
}
.sec-head__title {
  position: relative; z-index: 1;
  font-size: clamp(1.9rem, 4vw, 3.05rem);
  max-width: 22ch;
}
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__watermark { left: 50%; transform: translateX(-50%); }
.sec-head--center .sec-head__title { margin-inline: auto; }
.sec-head__lead { position: relative; z-index: 1; margin-top: 1.25rem; max-width: 62ch; color: var(--on-dark-mute); }
.section--cream .sec-head__lead { color: var(--on-light-mute); }

/* --- Hero ----------------------------------------------------------------
   Die Bühne läuft randlos über die volle Breite: kein Schalenrand, keine
   abgerundeten Ecken. Der Text bleibt trotzdem auf demselben Raster wie die
   Abschnitte darunter – dafür sorgt der Innenabstand in .hero__inner, nicht
   eine Breitenbegrenzung. Sonst stünde die Überschrift am Bildschirmrand und
   liefe gegenüber dem Rest der Seite aus der Flucht. */
.hero {
  background: var(--ink);
  padding: 0;
  /* Linke Textkante und die Bedienelemente stehen auf breiten Schirmen in der
     Flucht der Schale, sonst am normalen Seitenabstand. Der Prozentwert wird
     erst dort aufgelöst, wo er benutzt wird – und dort ist die Bezugsbreite
     jedes Mal die volle Bühnenbreite. */
  --hero-rand: max(var(--gut), calc((100% - var(--shell)) / 2));
}
.hero > .shell { width: 100%; max-width: none; margin-inline: 0; }
.hero__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(78vh, 720px);
  display: grid;
}
@media (max-width: 700px) { .hero__stage { min-height: 76vh; } }

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }

.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 8s linear;
}
.hero__slide.is-active .hero__img { transform: scale(1); }
.hero__slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(9, 9, 9, .78) 0%, rgba(9, 9, 9, .45) 45%, rgba(9, 9, 9, .2) 100%);
}

.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
  min-height: inherit;
  width: 100%;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  padding-inline: var(--hero-rand);
}
.hero__eyebrow {
  font-size: .75rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 1.1rem;
}
/* Schrift, Zeilenabstand und Außenabstand stehen hier ausdrücklich, weil der
   Titel auf Folie 1 ein <h1> ist und auf Folie 2 und 3 ein <p>. Ohne diese
   Zeilen bekäme das <p> Montserrat mit dem Fließtext-Zeilenabstand 1,75 und
   1,1em Abstand nach unten – drei Folien, drei verschiedene Titel. */
.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  font-size: clamp(2.1rem, 6.2vw, 4.25rem);
  font-variant: small-caps;
  letter-spacing: .005em;
  color: #fff;
  text-wrap: balance;
  max-width: 17ch;
}
.hero__text { margin-top: 1.4rem; margin-bottom: 0; max-width: 44ch; color: rgba(255, 255, 255, .82); }
.hero__actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__dots {
  position: absolute; z-index: 3; left: var(--hero-rand); bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; gap: .55rem;
}
.hero__dots button {
  width: 30px; height: 4px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, .3);
  transition: background .3s var(--ease), width .3s var(--ease);
}
.hero__dots button[aria-current="true"] { background: var(--gold); width: 46px; }

.hero__scroll {
  position: absolute; z-index: 3; right: var(--hero-rand); bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .7); text-decoration: none;
}
.hero__scroll svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 640px) { .hero__scroll { display: none; } }

/* --- Claim-Band ---------------------------------------------------------- */
.claim {
  background: var(--ink);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.claim p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.1vw, 2.35rem);
  line-height: 1.35;
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
  color: var(--on-dark);
}

/* --- Über ---------------------------------------------------------------- */
.about__intro { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .about__intro { grid-template-columns: minmax(0, 1fr) auto; } }
.about__intro p { max-width: 46ch; color: var(--on-dark-mute); }

.about__images { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 760px) { .about__images { grid-template-columns: 1fr 1fr; } }
.about__images img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-md);
  border-bottom-left-radius: clamp(30px, 5vw, 64px);
}
.about__images img:nth-child(2) { border-bottom-left-radius: var(--r-md); border-top-right-radius: clamp(30px, 5vw, 64px); }

.about__statement {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 820px) { .about__statement { grid-template-columns: minmax(0, 1fr) 260px; } }
.about__statement h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.28;
}
.about__statement strong { font-weight: 700; }
.about__portrait {
  width: min(260px, 62vw); aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: radial-gradient(circle at 50% 30%, #6b5525, #1a1a1a 72%);
  justify-self: center;
}

.pillars {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar__icon { width: 58px; height: 58px; object-fit: contain; margin-bottom: 1.4rem; }
.pillar h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; margin-bottom: .7rem; }
.pillar p { color: var(--on-dark-mute); font-size: .9375rem; }

/* --- Assets-Liste -------------------------------------------------------- */
.assets {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.assets h3 { font-size: clamp(1.35rem, 2.6vw, 2rem); margin-bottom: 1.75rem; }
.assets ul { display: grid; gap: .85rem 2.5rem; }
@media (min-width: 640px) { .assets ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .assets ul { grid-template-columns: repeat(3, 1fr); } }
.assets li {
  position: relative; padding-inline-start: 1.5rem;
  color: var(--on-dark-mute); font-size: .9375rem;
}
.assets li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .72em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}

/* --- Testimonials -------------------------------------------------------- */
.testi__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 980px) { .testi__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); } }

.testi__track { position: relative; }
.testi__item {
  display: none;
}
.testi__item.is-active { display: block; animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.testi__stars { display: flex; gap: .2rem; margin-bottom: 1.25rem; color: var(--gold); }
.testi__stars svg { width: 17px; height: 17px; fill: currentColor; }
.testi__quote {
  font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.75;
  color: var(--on-dark);
}
.testi__person { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.testi__person img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; background: #222; }
.testi__person h3 { font-family: var(--serif); font-size: 1.0625rem; }
.testi__person p { font-size: .84rem; color: var(--on-dark-mute); margin: .15rem 0 0; }

.testi__nav { display: flex; gap: .5rem; margin-top: 2.25rem; }
.testi__nav button {
  width: 34px; height: 3px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, .22);
  transition: background .3s var(--ease);
}
.testi__nav button[aria-current="true"] { background: var(--gold); }

/* Die zwei Bilder rechts neben den Kundenstimmen — Aufbau wie auf juhlreal.com:
   das kleinere überlappt das größere unten rechts. Beide werden in ihrem
   eigenen Seitenverhältnis gezeigt und NICHT beschnitten; ihre runden Ecken
   stecken als Transparenz im Bild. Ein erzwungenes 4:3 mit object-fit hatte
   beide angeschnitten und die Ecken schwarz gefüllt. Größer als 437 bzw.
   330 px gibt es die Vorlagen nicht, deshalb bleibt max-width bei der
   natürlichen Breite: hochskaliert wären sie unscharf. */
.testi__media {
  position: relative;
  display: inline-block;
  padding-inline-end: 85px;
  padding-bottom: 65px;
}
.testi__media img:first-child { width: 100%; max-width: 437px; height: auto; }

/* Das kleinere Bild schwebt – dieselbe Bewegung wie auf juhlreal.com
   (dort Klasse "jump": 7 s, 30 px, ab 40 % wieder zurück). Rein dekorativ,
   deshalb darf sie dauerhaft laufen; auf schmalen Schirmen steht sie still,
   weil das Bild dort im Fluss sitzt statt überzulappen. */
.testi__media img:last-child {
  position: absolute; inset-inline-end: 0; bottom: 0;
  width: 75%; max-width: 330px; height: auto;
  animation: jump 7s linear infinite;
  will-change: transform;
}
@keyframes jump {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}
@media (max-width: 979px) {
  .testi__media { display: block; padding-inline-end: 0; padding-bottom: 0; }
  .testi__media img:first-child { max-width: 100%; }
  .testi__media img:last-child {
    position: static; width: 100%; max-width: 100%;
    margin-top: 1.5rem; animation: none;
  }
}

/* --- CTA-Band ------------------------------------------------------------ */
.cta { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.cta__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8, 8, 8, .9) 5%, rgba(8, 8, 8, .55) 60%, rgba(8, 8, 8, .35) 100%);
}
.cta .sec-head__title { max-width: 18ch; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--ink); padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer__claim {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  line-height: 1.4; text-align: center;
  max-width: 26ch; margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: var(--on-dark);
}
.footer__card {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 820px) {
  .footer__card { grid-template-columns: 1.4fr 1.1fr .8fr; }
  .footer__bar { grid-column: 1 / -1; }
}
.footer__col--brand img { width: 150px; margin-bottom: 1.25rem; }
.footer__col--brand p { color: var(--on-dark-mute); font-size: .9rem; max-width: 34ch; }
.footer__col h2 { font-size: 1.2rem; margin-bottom: 1.25rem; }
.footer__contact li { display: flex; gap: .8rem; margin-bottom: 1rem; font-size: .9rem; color: var(--on-dark-mute); line-height: 1.6; }
.footer__contact svg { width: 20px; height: 20px; flex: none; margin-top: .2em; fill: none; stroke: var(--gold); stroke-width: 1.4; }
.footer__contact a { text-decoration: none; transition: color .2s var(--ease); }
.footer__contact a:hover { color: var(--gold); }
.footer__links li { margin-bottom: .55rem; }
.footer__links a {
  text-decoration: none; font-size: .9rem; color: var(--on-dark-mute);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.footer__links a::before { content: '›'; color: var(--gold); }
.footer__links a:hover { color: var(--gold); gap: .7rem; }
.footer__bar {
  border-top: 1px solid var(--line-dark); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: var(--on-dark-mute);
}
.footer__bar p { margin: 0; }
.footer__bar a { text-decoration: none; }
.footer__bar a:hover, .footer__bar .linkbtn:hover { color: var(--gold); }

/* Als Knopf gebaut, weil er einen Dialog öffnet – sehen und verhalten muss er
   sich aber wie die Links daneben. Ohne diese Angleichung stach er in der
   Fußzeile mit Unterstreichung und eigener Größe heraus. */
.linkbtn {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: none;
  transition: color .2s var(--ease);
}

/* --- Innenseiten-Kopf ---------------------------------------------------- */
.page-hero {
  background: var(--panel);
  padding-block: clamp(3rem, 8vw, 6rem);
  text-align: center;
}
.page-hero__crumbs {
  display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--on-dark-mute); margin-bottom: 1rem;
}
.page-hero__crumbs a { text-decoration: none; }
.page-hero__crumbs a:hover { color: var(--gold); }
.page-hero__crumbs li::after { content: '·'; margin-inline-start: .5rem; color: var(--gold); }
.page-hero__crumbs li:last-child::after { content: none; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.page-hero__lead { margin: 1.25rem auto 0; max-width: 58ch; color: var(--on-dark-mute); }

/* --- Formulare ----------------------------------------------------------- */
.formsec { position: relative; isolation: isolate; background: var(--panel); overflow: hidden; }
.formsec__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.formsec::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(12, 12, 12, .82), rgba(12, 12, 12, .6));
}
.formsec__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) {
  /* Formular links, Karte rechts – wie auf juhlreal.com. "stretch", damit die
     Karte exakt so hoch wird wie die Formularkarte daneben. */
  .formsec__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); align-items: stretch; }
  .formsec__grid .mapbox { height: 100%; }
  .formsec__grid .mapbox iframe { height: 100%; }
}
/* Im Raster bringt die Karte ihren eigenen Abstand nicht mit. */
.formsec__grid .mapbox { margin-top: 0; }

.formcard {
  background: var(--white); color: var(--on-light);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8);
}
.formcard h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.25; margin-bottom: 1.75rem; }

.field { margin-bottom: .9rem; position: relative; }
.field label {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: #4a4a4a; margin-bottom: .35rem;
}
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .9375rem;
  padding: .85rem 1rem;
  color: var(--on-light);
  background: #fff;
  border: 1px solid #d9d5c8; border-radius: 999px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { border-radius: var(--r-sm); min-height: 122px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; padding-inline-end: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198, 167, 94, .18); outline: none;
}
.field--row { display: grid; gap: .9rem; }
@media (min-width: 520px) { .field--row { grid-template-columns: 1fr 1fr; } }

.check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1rem; font-size: .82rem; line-height: 1.55; color: #4a4a4a; }
.check input { width: 18px; height: 18px; flex: none; margin-top: .18em; accent-color: var(--gold-lo); }

.form__note { font-size: .78rem; color: #6a6a6a; margin-top: 1rem; }

/* Aufzählung in der Teaser-Karte zur Immobilienverrentung. */
.vr-teaser__punkte { margin-top: 1.5rem; display: grid; gap: .7rem; }
.vr-teaser__punkte li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .92rem; line-height: 1.55; color: var(--on-light);
}
.vr-teaser__punkte li::before {
  content: ''; flex: none; margin-top: .28em;
  width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0914a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Rechen-Captcha ------------------------------------------------------
   Sieht aus wie ein Kontrollkästchen, ist aber ein Knopf: Der Klick startet
   die Rechenaufgabe, die der Browser fuer den Spamschutz loesen muss. */
.captcha {
  display: flex; align-items: center; gap: .85rem;
  margin: .25rem 0 1.25rem;
  padding: .9rem 1.1rem;
  border: 1px solid #d9d5c8; border-radius: var(--r-sm);
  background: #faf8f2;
}
.captcha__box {
  position: relative; flex: none;
  width: 26px; height: 26px; padding: 0;
  border: 2px solid #bdb7a4; border-radius: 6px;
  background: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.captcha__box:hover:not(:disabled) { border-color: var(--gold); }
.captcha__box:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.captcha__box:disabled { cursor: default; }

.captcha__tick {
  width: 17px; height: 17px;
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.captcha__spin {
  position: absolute;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .18); border-top-color: var(--gold-lo);
  opacity: 0;
}

.captcha[data-state="laeuft"] .captcha__spin { opacity: 1; animation: captchaDreh .8s linear infinite; }
.captcha[data-state="fertig"] .captcha__box { background: #1f7a3d; border-color: #1f7a3d; }
.captcha[data-state="fertig"] .captcha__tick { opacity: 1; transform: none; }
.captcha[data-state="fehler"] .captcha__box { border-color: #b3261e; }

@keyframes captchaDreh { to { transform: rotate(360deg); } }

.captcha__text { display: block; line-height: 1.4; }
.captcha__label { display: block; font-size: .875rem; font-weight: 600; color: #3a3a3a; }
.captcha__note { display: block; font-size: .72rem; color: #67624f; margin-top: .15rem; }
.captcha[data-state="fehler"] .captcha__label { color: #b3261e; }

.form__status { margin-top: 1rem; font-size: .88rem; font-weight: 600; }
.form__status[data-state="error"] { color: #b3261e; }
.form__status[data-state="ok"] { color: #1f7a3d; }

.formsec__copy h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 1.25rem; }
.formsec__copy p { color: rgba(255, 255, 255, .84); }
.formsec__copy strong { color: #fff; }
.formsec__hint {
  margin-top: 1.5rem; padding: 1.1rem 1.25rem;
  border-inline-start: 3px solid var(--gold);
  background: rgba(255, 255, 255, .06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .9rem;
}

/* --- Kontaktkarten ------------------------------------------------------- */
.contact-cards { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 760px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
/* Der Hover ist der von juhlreal.com übernommen: Die Kachel bekommt einen
   weichen Schatten, ihr Rand verschwindet, und der Kreis um das Symbol füllt
   sich – dort mit Creme, hier passend mit Gold, das Symbol wird dunkel. */
.contact-card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--ink); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md); padding: 1.5rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 15px 30px -10px rgba(198, 167, 94, .38);
}
.contact-card__icon {
  width: 52px; height: 52px; flex: none;
  border: 1px solid var(--line-dark); border-radius: 50%;
  display: grid; place-items: center;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.contact-card__icon svg {
  width: 22px; height: 22px; fill: none; stroke: var(--on-dark); stroke-width: 1.4;
  transition: stroke .4s var(--ease);
}
.contact-card:hover .contact-card__icon { background: var(--gold); border-color: var(--gold); }
.contact-card:hover .contact-card__icon svg { stroke: var(--ink); }
.contact-card h2 { font-size: 1.1rem; margin-bottom: .4rem; }
.contact-card p, .contact-card a { font-size: .9rem; color: var(--on-dark-mute); text-decoration: none; line-height: 1.6; }
.contact-card a:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .contact-card:hover { transform: none; }
}

/* --- Rechtstexte --------------------------------------------------------- */
.legal { background: var(--panel); }
.legal__inner { max-width: 78ch; }
.legal__inner h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  margin: 2.5rem 0 .9rem;
  scroll-margin-top: 100px;
}
.legal__inner h3 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
.legal__inner h2:first-child { margin-top: 0; }
.legal__inner p, .legal__inner li { color: var(--on-dark-mute); }
.legal__inner a { color: var(--gold); overflow-wrap: anywhere; }
.legal__inner ul { margin: 0 0 1.1em; padding-inline-start: 1.25rem; }
.legal__inner li { list-style: disc; margin-bottom: .4rem; }
.legal__inner dl { margin: 0 0 1.1em; }
.legal__inner dt { font-weight: 600; color: var(--on-dark); margin-top: .8rem; }
.legal__inner dd { margin: 0; color: var(--on-dark-mute); }
.legal__toc {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark);
  border-radius: var(--r-md); padding: 1.5rem; margin-bottom: 2.5rem;
}
.legal__toc h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
.legal__toc li { list-style: none; margin-bottom: .4rem; }
.legal__toc a { font-size: .9rem; }
.legal__quelle {
  margin-top: 3rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
  font-size: .78rem; color: rgba(243, 241, 234, .5);
}
.legal__inner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: rgba(255, 255, 255, .07);
  padding: .1em .4em; border-radius: 4px;
}

/* --- 404 ----------------------------------------------------------------- */
.nf { background: var(--panel); text-align: center; padding-block: clamp(5rem, 14vw, 10rem); }
.nf h1 { font-size: clamp(3.5rem, 12vw, 8rem); color: var(--gold); }
.nf p { color: var(--on-dark-mute); margin: 1rem auto 2rem; max-width: 44ch; }

/* --- Karte + Content-Blocker --------------------------------------------- */
/* Die Karte steht als Karte auf der Seite. Solange keine Einwilligung vorliegt,
   liegt der Blocker darüber – der iframe wird erst dann überhaupt erzeugt, es
   geht also vorher keine Verbindung zu Google. */
/* Karte und Blocker liegen in derselben Rasterzelle uebereinander. Dadurch
   bestimmt der Blocker die Hoehe, solange er sichtbar ist – auf dem Handy
   waere er sonst aus einer fest gesetzten Kartenhoehe herausgelaufen. */
.mapbox {
  display: grid;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #1b1b1b;
  min-height: clamp(280px, 42vw, 460px);
}
.mapbox iframe {
  grid-area: 1 / 1;
  display: block; width: 100%;
  height: clamp(280px, 42vw, 460px);
  border: 0;
  filter: grayscale(.25) contrast(1.05);
}

.blocker {
  grid-area: 1 / 1; z-index: 1;
  display: grid; place-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  background:
    linear-gradient(160deg, rgba(11, 11, 11, .94), rgba(30, 30, 30, .94)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 12px, transparent 12px 24px);
}
.blocker[hidden] { display: none; }
.blocker__inner { max-width: 46ch; }
.blocker__icon {
  width: 40px; height: 40px; margin: 0 auto .9rem;
  fill: none; stroke: var(--gold); stroke-width: 1.3;
}
.blocker__inner h2 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: .7rem; }
.blocker__inner p { color: var(--on-dark-mute); font-size: .9rem; }
.blocker__inner a { color: var(--gold); }
.blocker__actions { margin: 1.5rem 0 0; }
.blocker__merken {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.1rem; font-size: .78rem; color: var(--on-dark-mute); cursor: pointer;
}
.blocker__merken input { width: 16px; height: 16px; accent-color: var(--gold-lo); }

/* --- WebNova-Brandbar ---------------------------------------------------
   Übernommen aus dem CMS (renderBranding + site-gps2you.css), nur die Farben
   auf diese Seite gezogen. Der Name WebNova steht als SVG-Wortmarke da, nie
   als getippter Text. */
.g2-brandbar { font-family: var(--sans); }

.g2-brandbar--website { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .08); }
.g2-brandbar__link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; color: rgba(243, 241, 234, .55); font-size: 12.5px; text-decoration: none;
  transition: color 140ms;
}
.g2-brandbar__link:hover { color: var(--gold); }
.g2-brandbar__link img { height: 14px; width: auto; opacity: .85; }

.g2-brandbar--marketing {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 6%; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .08);
}
.g2-brandbar__left { display: flex; align-items: center; gap: 14px; }
.g2-brandbar__left img { height: 22px; width: auto; }
.g2-brandbar__left p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--on-dark-mute); }
.g2-brandbar__left b { color: var(--on-dark); }
.g2-brandbar__cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
  border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--on-dark);
  font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background 140ms;
}
.g2-brandbar__cta:hover { background: rgba(198, 167, 94, .3); }
.g2-brandbar[hidden] { display: none; }

/* --- Cookie-Hinweis ------------------------------------------------------ */
/* Gleicher Aufbau wie auf den übrigen WebNova-Seiten (gleichwertige Knöpfe,
   Einstellungen mit Kategorien), aber in der Optik dieser Seite: dunkle Karte,
   Gold als Akzent, Playfair in den Überschriften. */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 120;
  padding: clamp(.75rem, 2vw, 1.5rem);
}
.consent[hidden] { display: none; }
.consent__card {
  max-width: 44rem; margin: 0 auto;
  max-height: 84vh; overflow-y: auto;
  background: var(--ink); color: var(--on-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .9);
}
.consent__card h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-bottom: .7rem; }
.consent__card h2::after {
  content: ''; display: block;
  width: 46px; height: 2px; margin-top: .7rem;
  background: var(--gold);
}
.consent__card > * > p { font-size: .875rem; line-height: 1.75; color: var(--on-dark-mute); }
.consent__card a { color: var(--gold); }

.consent__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-top: 1.5rem;
}
.consent__actions .linkbtn { font-size: .82rem; font-weight: 600; color: var(--on-dark-mute); }
.consent__actions .linkbtn:hover { color: var(--gold); }

.consent__cat {
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  padding: 1rem 1.1rem; margin-top: 1rem;
}
.consent__cathead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent__cathead h3 { font-family: var(--sans); font-size: .9375rem; font-weight: 700; }
.consent__cathead > div > p {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-lo); margin: .25rem 0 0;
}
.consent__cat ul {
  margin: .9rem 0 0; padding: .9rem 0 0;
  border-top: 1px solid var(--line-dark);
}
.consent__cat li { font-size: .8125rem; line-height: 1.65; color: var(--on-dark-mute); }
.consent__cat li + li { margin-top: .9rem; }
.consent__cat li strong { color: var(--on-dark); }
.consent__cat li p { margin: .2rem 0 0; }
.consent__meta { font-size: .74rem; color: rgba(243, 241, 234, .5); }

.consent__switch {
  position: relative; flex: none;
  width: 44px; height: 24px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .2);
  transition: background .25s var(--ease);
}
.consent__switch > span {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transition: transform .25s var(--ease);
}
.consent__switch.is-on { background: var(--gold); }
.consent__switch.is-on > span { transform: translateX(20px); }
.consent__switch.is-locked { opacity: .55; cursor: not-allowed; }
.consent__switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Der Keks-Knopf ist die Zweitschiene zum Footer-Link – zurückhaltend, damit er
   nicht dauerhaft über dem Inhalt klebt. */
.consent-fab {
  position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: 110;
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark); border-radius: 50%;
  background: rgba(11, 11, 11, .88); color: var(--gold); cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: .55;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.consent-fab[hidden] { display: none; }
.consent-fab:hover { opacity: 1; transform: translateY(-2px); }
.consent-fab svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Auftritt der ersten Bildschirmseite ---------------------------------
   Der Vorhang geht nach knapp einer Sekunde auf; direkt danach setzt sich der
   Hero zusammen. Das laeuft NUR auf der ersten Folie und nur beim Laden – die
   Folien danach wechseln weiter ruhig ueber die Deckkraft, sonst zuckte die
   Seite alle sieben Sekunden. */
@keyframes heroAuf {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.hero__slide:first-child .hero__eyebrow  { animation: heroAuf .8s var(--ease) 1.05s both; }
.hero__slide:first-child .hero__title    { animation: heroAuf .8s var(--ease) 1.15s both; }
.hero__slide:first-child .hero__text     { animation: heroAuf .8s var(--ease) 1.27s both; }
.hero__slide:first-child .hero__actions  { animation: heroAuf .8s var(--ease) 1.39s both; }
.hero__dots                              { animation: heroAuf .8s var(--ease) 1.5s both; }
.hero__scroll                            { animation: heroAuf .8s var(--ease) 1.6s both; }

/* Der Hinweis zum Scrollen atmet leicht – er ist das einzige, was sich auf der
   ersten Bildschirmseite dauerhaft bewegt, und zeigt, dass es weitergeht. */
@keyframes scrollWink {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.hero__scroll svg { animation: scrollWink 2.4s var(--ease) 2.4s infinite; }

/* Die Kopfleiste faehrt mit dem Vorhang herein. */
.site-header { animation: heroAuf .7s var(--ease) .95s both; }

/* Dieselbe Staffelung auf den Unterseiten. Deren Kopf steht immer im
   Sichtfenster, greift also nie die Scroll-Einblendung ab – ohne das hier
   waere nach dem Vorhang schlagartig alles da. */
.page-hero nav                  { animation: heroAuf .7s var(--ease) 1.05s both; }
.page-hero .sec-head__label     { animation: heroAuf .7s var(--ease) 1.15s both; }
.page-hero h1                   { animation: heroAuf .8s var(--ease) 1.25s both; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide:first-child .hero__eyebrow, .hero__slide:first-child .hero__title,
  .hero__slide:first-child .hero__text, .hero__slide:first-child .hero__actions,
  .hero__dots, .hero__scroll, .site-header,
  .page-hero nav, .page-hero .sec-head__label, .page-hero h1 { animation: none; }
  .hero__scroll svg { animation: none; }
}

/* --- Scroll-Reveal -------------------------------------------------------
   Der Ausgangszustand ist SICHTBAR. Versteckt wird ausschließlich per JS und
   nur, wenn das Element wirklich unterhalb des Sichtfensters liegt (Klasse
   "vorbereitet"). Ohne JavaScript, bei einem Fehler oder bei
   prefers-reduced-motion steht der Inhalt einfach da.

   Vorher stand hier .reveal { opacity: 0 } – dann hängt die halbe Seite an
   einem gelungenen Skriptlauf. Genau daraus sind bei Hofer Türen zwei
   Reklamationen entstanden („die Fotos laden nicht"). */
.reveal.vorbereitet { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-verzug, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .vorhang { display: none; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal.vorbereitet { opacity: 1; transform: none; }
  .hero__img { transform: none; }
}