/* ============================================================
   MODERN.CSS — Sanfte Modernisierung des gesamten Auftritts
   Lädt NACH style.css und ergänzt/überschreibt gezielt.
   Farbwelt bleibt unverändert (Navy / Ozean / Gold / Sand).

   Wichtig: Es wird bewusst KEIN blur()-Filter auf Text-Elemente
   angewendet — nur Transparenz und Position werden animiert,
   damit die Schrift jederzeit pixelscharf bleibt.
   ============================================================ */

/* === SCROLL-FORTSCHRITTSBALKEN === */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  z-index: 2000;
}

/* === HEADER: etwas mehr Glas, feine Goldlinie === */
.header {
  background: rgba(253,251,249,0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.45), transparent);
}

/* === HERO (Startseite): sanfter Ken-Burns-Zoom + Wellenkante === */
.hero-overlay {
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Der alte weiche Verlauf weicht der Wellenkante */
.hero::after { display: none; }

.hero-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}

.hero-wave svg { width: 100%; height: 100px; display: block; }

.hero-wave .wave-back {
  fill: var(--bg);
  opacity: 0.45;
  animation: waveDrift 11s ease-in-out infinite alternate;
}

.hero-wave .wave-front {
  fill: var(--bg);
  animation: waveDrift 15s ease-in-out infinite alternate-reverse;
}

@keyframes waveDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-34px); }
}

/* Hero-Text: zeilenweiser Masken-Reveal (nur Position + Deckkraft, kein Blur) */
.hero-content { animation: none; }

.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.line-mask > span { display: inline-block; }

.stagger {
  opacity: 0;
  transform: translateY(110%);
  animation: riseIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-sub.stagger, .hero-loc.stagger, .s5.stagger {
  transform: translateY(22px);
}

.s1 { animation-delay: 0.1s; }
.s2 { animation-delay: 0.3s; }
.s3 { animation-delay: 0.45s; }
.s4 { animation-delay: 0.7s; }
.s5 { animation-delay: 0.9s; }

@keyframes riseIn {
  to { opacity: 1; transform: translateY(0); }
}

.hero-scroll { bottom: 140px; }

/* === UNTERSEITEN: sanfter Einstieg des Seitenkopfs === */
.page-hero .label,
.page-hero h1 {
  opacity: 0;
  transform: translateY(22px);
  animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.page-hero h1 { animation-delay: 0.15s; }

/* === SCROLL-REVEAL-SYSTEM ===
   Die Klassen werden per JavaScript (effects.js) vergeben.
   Ohne JavaScript bleibt daher alles sofort sichtbar.
   Animiert werden ausschließlich Deckkraft und Position. */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Gestaffelte Verzögerungen */
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }

/* Unterseiten: derselbe Effekt, nur eine Spur ruhiger als auf der Startseite */
body.is-subpage .reveal {
  transform: translateY(24px);
  transition-duration: 0.7s;
}

body.is-subpage .reveal.visible { transform: none; }

/* Galerie: Eine ganze Bildzeile erscheint als Einheit — kein Versatz zwischen
   den Bildern, nur ein kurzer, weicher Auftritt. Die Aufmerksamkeit soll den
   Motiven gelten, nicht der Bewegung. Klasse wird von effects.js vergeben. */
.reveal-row {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-row.visible {
  opacity: 1;
  transform: none;
}

/* === INTRO (Startseite): Zahlen-Leiste + dezenter Goldrahmen === */
.stats-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 26px 0 28px;
  padding: 18px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* min-width: 0 erlaubt der Spalte, unter die Breite ihres Inhalts zu
   schrumpfen — sonst schiebt der längste Text die Leiste auf schmalen
   Geräten über die Seitenbreite hinaus. */
.stat { text-align: center; flex: 1; min-width: 0; }

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.1;
  white-space: nowrap;
}

/* Zusatz hinter der Kennzahl, z. B. „+ 1 Kleinkind" — bewusst kleiner gesetzt,
   damit die eigentliche Zahl die Leiste weiterhin trägt.
   Auf schmalen Schirmen rückt er als Ganzes unter die Zahl (siehe Media
   Query weiter unten): „Kleinkind" ist deutlich breiter als das frühere
   „Baby" und sprengte sonst bei 375 px die Seitenbreite. */
.stat-num-add {
  font-family: var(--font-body);
  font-size: 0.5em;
  font-weight: 600;
  color: var(--text-light);
  margin-left: 6px;
}

.stat-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 2px;
}

.stat-divider {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.5), transparent);
}

/* Versetzter Goldrahmen hinter dem Intro-Bild
   z-index: 0 öffnet einen eigenen Stapelkontext. Ohne ihn rutscht der Rahmen
   (z-index: -1) hinter den Hintergrund der Sektion, sobald die Reveal-Animation
   ihren transform wieder aufhebt — der Rahmen wäre dann nach kurzer Zeit weg. */
.frame-deco {
  overflow: visible;
  z-index: 0;
}

.frame-deco::before {
  content: '';
  position: absolute;
  top: -14px; right: -14px;
  width: 100%; height: 100%;
  border: 1.5px solid rgba(201,168,76,0.5);
  border-radius: var(--radius);
  z-index: -1;
}

.frame-deco img { border-radius: var(--radius); }
.frame-deco .image-badge { z-index: 2; }

/* === BILDBAND (Mosaik, Startseite) === */
.mosaic-section {
  padding: 96px 0 110px;
  background: var(--bg);
  overflow: hidden;
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.mosaic-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow);
}

.mosaic-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mosaic-item:hover img { transform: scale(1.05); }

.mosaic-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 18px 14px;
  background: linear-gradient(to top, rgba(15,28,48,0.72), transparent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.04em;
}

/* Jedes zweite Bild sitzt leicht versetzt */
.mosaic-item:nth-child(even) { transform: translateY(34px); }
.mosaic-item:nth-child(even).reveal { transform: translateY(86px); }
.mosaic-item:nth-child(even).reveal.visible { transform: translateY(34px); }

/* === FEATURES: ruhiger Akzent statt Glitzer === */
.features-section {
  position: relative;
  overflow: hidden;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.glow-a {
  top: -140px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(201,168,76,0.10), transparent 65%);
}

.feature-card:hover .feature-icon {
  background: rgba(201,168,76,0.14);
  color: var(--gold-deep);
  transform: translateY(-2px);
}

.feature-icon { transition: all var(--transition); }

/* === PREIS-TEASER: ruhige Farbflächen, kein Lichtstreif === */
.price-teaser::before { display: none; }

.teaser-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.blob-a {
  top: -120px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(201,168,76,0.14), transparent 65%);
}

.blob-b {
  bottom: -160px; left: -100px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(74,138,181,0.18), transparent 65%);
}

.price-mini-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.price-mini-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,201,122,0.55);
}

.price-mini-card.highlight:hover { border-color: var(--gold-light); }

/* === DANKE-SEITE: sanfter Einstieg === */
.thx-box {
  opacity: 0;
  transform: translateY(26px);
  animation: riseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic-item:nth-child(even),
  .mosaic-item:nth-child(even).reveal.visible { transform: translateY(0); }
  .mosaic-item:nth-child(even).reveal { transform: translateY(38px); }
}

@media (max-width: 560px) {
  .stats-row { padding: 14px 12px; gap: 10px; }
  .stat-num { font-size: 26px; }
  /* Der Zusatz („+ 1 Kleinkind") passt neben der Zahl nicht mehr in die
     Spalte und rückt deshalb geschlossen darunter. white-space: normal ist
     nur das Ventil für sehr schmale Geräte (um 320 px): Dort darf er auf zwei
     Zeilen umbrechen, statt die Leiste über die Seitenbreite zu schieben. */
  .stat-num-add { display: block; margin-left: 0; margin-top: 2px; white-space: normal; }
  .stat-label { font-size: 10px; letter-spacing: 0.08em; }
  .hero-wave svg { height: 60px; }
  .hero-scroll { bottom: 110px; }
  .mosaic { gap: 12px; }
}

/* === TABLET HOCHFORMAT (z. B. iPad): Preis-Teaser linksbündig ===
   Unter 900 px klappt der Teaser auf eine Spalte um; die Preisboxen bleiben
   dabei mittig, während Text und Button linksbündig stehen. Auf dem Tablet
   im Hochformat ist die Spalte breit genug, dass dieser Versatz auffällt —
   deshalb starten die Boxen hier auf derselben Kante wie der Button.
   Auf dem Handy (unter 560 px) stehen die Boxen ohnehin untereinander. */
@media (orientation: portrait) and (min-width: 561px) and (max-width: 900px) {
  .price-teaser-cards { justify-content: flex-start; }
}

/* === FLACHE QUERFORMAT-VIEWPORTS (z. B. iPad quer) ===
   Der Hero ist 100vh hoch, der Scroll-Hinweis hängt an dessen Unterkante.
   Bei geringer Bauhöhe wandert der mittig zentrierte Textblock so weit nach
   unten, dass der Button in den goldenen Streifen läuft. Statt fester Werte
   skalieren Textblock und Hinweis hier mit der Viewport-Höhe mit — dadurch
   bleibt zwischen Button und Streifen auf jeder Bauhöhe Luft, und der
   Streifen endet oberhalb der Verlaufskante des Heros. */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 820px) {
  .hero-content {
    padding-top: clamp(56px, 10vh, 100px);
    padding-bottom: clamp(24px, 5vh, 60px);
  }

  .hero-title {
    font-size: clamp(38px, 9vh, 72px);
    margin-bottom: clamp(10px, 2.4vh, 24px);
  }

  .hero-sub { margin-bottom: clamp(10px, 2.4vh, 20px); }
  .hero-loc { margin-bottom: clamp(18px, 4vh, 40px); }

  .hero-scroll { bottom: clamp(88px, 17vh, 140px); }
  .hero-scroll span { height: clamp(26px, 5vh, 50px); }
}

/* Unter etwa 500 px Bauhöhe (Handy quer) füllt der Textblock den Hero
   vollständig aus — dort gibt es keinen Platz mehr für den Hinweis. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-scroll { display: none; }
}

/* === REDUZIERTE BEWEGUNG: Effekte respektvoll abschalten === */
@media (prefers-reduced-motion: reduce) {
  /* .hero-scroll span (style.css) lief bisher als einzige Animation
     durchgehend weiter und ignorierte die Systemeinstellung. */
  .hero-overlay,
  .hero-wave .wave-back,
  .hero-wave .wave-front,
  .hero-scroll span { animation: none; }

  .stagger,
  .page-hero .label,
  .page-hero h1,
  .thx-box {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .reveal,
  .reveal-row {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .faq-chevron { transition: none; }

  .mosaic-item:nth-child(even).reveal { transform: translateY(34px); }
}

/* === BARRIEREFREIHEIT ==================================================
   Beide Bausteine sind im Normalzustand unsichtbar und aendern das
   Erscheinungsbild der Seite nicht: Der Sprunglink liegt ausserhalb des
   Bildschirms, bis er per Tabulator angesteuert wird, und der Fokusrahmen
   erscheint dank :focus-visible nur bei Tastaturbedienung, nie beim Klicken
   oder Tippen. ===================================================== */

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
  color: var(--white);
}

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

/* Auf den dunklen Flaechen traegt das Blau zu wenig - dort heller Rahmen */
.hero :focus-visible,
.page-hero :focus-visible,
.footer :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--gold-light);
}