/* ============================================================
   DAVE MEDIA — wedding.css
   Eigenes Editorial-Layout für hochzeiten.html (seit 25.10.).
   Baut auf redesign.css auf (Kopfzeile, Footer, Buttons, Glas,
   Platzhalter, Reveal-Klassen) und gilt nur mit body.theme-wedding.
   Idee: ruhig, hell, viel Luft, große Serifen, Bilder in wechselnder
   Größe, Kapitel statt Feature-Karten. Keine Icon-Kacheln, keine
   Akzentbalken, keine Gedankenstriche.
   Schriften: Bodoni Moda (SIL OFL, lokal) für alles Große,
   DM Sans für Fließtext und Kapitälchen.
   ============================================================ */

@font-face {
  font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('../assets/fonts/bodoni-moda/bodoni-moda-latin-wght-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../assets/fonts/bodoni-moda/bodoni-moda-latin-wght-normal.woff2') format('woff2');
}

/* === FARBWELT (hell) === */
/* wedding.css lädt nur auf der Hochzeitsseite: Wurzel dort hell statt dunkel */
html { background: #f7f1eb; }
body.theme-wedding {
  color-scheme: light;
  --bg:        #f7f1eb;
  --bg-2:      #f1e8e1;
  --panel:     rgba(255, 255, 255, 0.55);
  --panel-2:   rgba(255, 255, 255, 0.72);
  --panel-top: rgba(255, 255, 255, 0.86);
  --border:    rgba(74, 48, 54, 0.10);
  --border-strong: rgba(74, 48, 54, 0.18);
  --border-teal: rgba(185, 117, 125, 0.45);
  --teal:        #b9757d;   /* Rosé */
  --teal-bright: #9a5560;   /* dunkleres Rosé für Button-Text und Links */
  --teal-deep:   #f4e3e1;   /* Blush-Fläche */
  --teal-glow:   rgba(185, 117, 125, 0.22);
  --champ:       #e2c39a;   /* Champagner */
  --text:      #2b2125;
  --text-muted:#6a595e;
  --text-dim:  #8c7b80;
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.40));
  --glass-bg-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.60));
  --glass-border: rgba(74, 48, 54, 0.12);
  --glass-border-hover: rgba(185, 117, 125, 0.55);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(74, 48, 54, 0.04);
  --font-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --r-md: 18px;
  background: var(--bg); color: var(--text);
}

/* Hintergrund: Elfenbein, Rosé und Champagner, etwas kräftiger als im ersten Entwurf */
body.theme-wedding .bg {
  background:
    radial-gradient(ellipse 110% 85% at 50% 40%, transparent 50%, rgba(120, 85, 70, 0.10) 100%),
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(236, 200, 160, 0.55), transparent 62%),
    radial-gradient(ellipse 55% 45% at 88% 10%, rgba(221, 160, 168, 0.46), transparent 58%),
    radial-gradient(ellipse 60% 48% at 10% 90%, rgba(226, 185, 178, 0.48), transparent 62%),
    radial-gradient(ellipse 50% 40% at 92% 92%, rgba(236, 206, 170, 0.36), transparent 60%),
    linear-gradient(180deg, #f9f4ef 0%, #f6efe9 50%, #f1e8e1 100%);
}
body.theme-wedding .bg::after {
  background-image:
    linear-gradient(rgba(74, 48, 54, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 48, 54, 0.03) 1px, transparent 1px);
}

/* === TYPOGRAFIE === */
body.theme-wedding h1, body.theme-wedding h2, body.theme-wedding h3 {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; line-height: 1.06;
  /* Die ff-Ligatur des Bodoni-Subsets zeichnet fehlerhaft („Kaffee“): Ligaturen in Überschriften abschalten */
  font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'dlig' 0;
}
body.theme-wedding h1 em, body.theme-wedding h2 em, body.theme-wedding h3 em, body.theme-wedding .w-big em {
  font-style: italic; font-weight: 400; color: var(--teal);
}
body.theme-wedding .nav-logo-text, body.theme-wedding .mobile-menu a { font-family: 'Poppins', sans-serif; }

/* Kapitälchen-Zeile (ersetzt die Pills auf dieser Seite) */
.w-eyebrow {
  display: inline-block;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-bright);
}
.w-small { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

/* === KOPFZEILE, MENÜS, GEMEINSAME TEILE auf Hell === */
body.theme-wedding .nav-logo img, body.theme-wedding .footer img { filter: brightness(0) opacity(0.82); }
body.theme-wedding .nav.scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.32));
  border-bottom: 1px solid rgba(74, 48, 54, 0.08);
  box-shadow: 0 12px 40px rgba(74, 48, 54, 0.08);
}
body.theme-wedding .nav-dropdown { background: rgba(255, 255, 255, 0.94); box-shadow: 0 24px 60px rgba(74, 48, 54, 0.16); }
body.theme-wedding .nav-dropdown a:hover { background: rgba(185, 117, 125, 0.08); }
body.theme-wedding .mobile-menu { background: rgba(247, 241, 235, 0.97); }
body.theme-wedding .btn-cta:hover { box-shadow: var(--glass-edge), 0 10px 28px rgba(74, 48, 54, 0.14); }
body.theme-wedding ::selection { background: var(--teal); color: #fff; }
body.theme-wedding .footer .stars { color: #c9a05a; }

/* Platzhalter auf Hell: Rosé-Streifen, weiße Fläche, Etikett mit weißer Schrift */
body.theme-wedding .ph {
  border-color: var(--border-teal);
  background:
    repeating-linear-gradient(45deg, rgba(185, 117, 125, 0.07) 0, rgba(185, 117, 125, 0.07) 12px, transparent 12px, transparent 24px),
    rgba(255, 255, 255, 0.5);
}
body.theme-wedding .ph::before { background: var(--teal); color: #fff; }
body.theme-wedding .ph-inline { background: rgba(185, 117, 125, 0.08); }

/* === SEITENRASTER === */
.w-section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.w-section--tight { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.w-head { max-width: 780px; margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }
.w-head h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); margin: 0.9rem 0 1rem; max-width: 20ch; }
.w-head p { max-width: 54ch; font-size: 1.02rem; }
.w-head p + p { margin-top: 0.85rem; }
.w-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.w-head--center h2, .w-head--center p { margin-left: auto; margin-right: auto; }

/* === HERO: Text links, zwei Bilder rechts in Magazin-Anordnung === */
.w-hero {
  position: relative;
  padding: calc(104px + 3vh) var(--pad-wide) clamp(3rem, 6vh, 5rem);
  min-height: 100svh;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 6vw, 110px); align-items: center;
}
.w-hero-text { max-width: 620px; }
.w-hero h1 {
  font-size: clamp(2.7rem, 5vw, 4.9rem); line-height: 1.0; margin: 1.3rem 0 1.7rem; max-width: 12ch;
}
.w-hero h1 .word { display: inline-block; }
.w-lead { font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.65; max-width: 44ch; color: var(--text-muted); }
.w-hero-actions { margin-top: 2.1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.w-note { font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.01em; }

.w-hero-visual { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 80vh; justify-self: end; }
.w-hero-main {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  box-shadow: 0 50px 110px rgba(74, 48, 54, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* Innenbild etwas höher als der Rahmen, damit es beim Scrollen leicht wandern kann (Tiefeneffekt) */
.w-hero-main > * { position: absolute; left: 0; right: 0; top: 0; bottom: -10%; height: auto; will-change: transform; }
.w-hero-main > img, .w-hero-main > video { object-fit: cover; width: 100%; height: 110%; }
.w-hero-small {
  position: absolute; left: -16%; bottom: 7%; width: 42%; aspect-ratio: 4 / 5;
  border-radius: 18px; overflow: hidden; background: var(--bg);
  box-shadow: 0 34px 80px rgba(74, 48, 54, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.w-hero-caption {
  position: absolute; left: -16%; bottom: calc(7% - 2.3rem);
  display: flex; gap: 10px; align-items: baseline; white-space: nowrap;
}
.w-hero-caption .w-small { font-size: 0.7rem; }
.reveal-hero-visual, .reveal-hero-eyebrow { opacity: 0; }
html:not(.js-loaded) .reveal-hero-visual, html:not(.js-loaded) .reveal-hero-eyebrow { opacity: 1; transform: none; }

/* === WORTBAND: Momente in Kursive, läuft leise durch === */
.w-strip {
  overflow: hidden; padding: clamp(1.6rem, 3vw, 2.6rem) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  display: flex; white-space: nowrap;
}
.w-strip-track {
  display: flex; align-items: baseline; flex-shrink: 0; min-width: 100%; justify-content: space-around;
  animation: wStrip 70s linear infinite;
}
.w-strip:hover .w-strip-track { animation-play-state: paused; }
.w-strip span {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem); color: var(--teal); padding: 0 clamp(1rem, 2vw, 1.8rem);
}
.w-strip span::after { content: '·'; margin-left: clamp(2rem, 4vw, 3.6rem); color: var(--champ); font-style: normal; }
@keyframes wStrip { to { transform: translateX(-100%); } }

/* === HALTUNG: große Serifenzeilen, Nebenspalte mit Signatur === */
.w-manifest { display: grid; grid-template-columns: minmax(220px, 1fr) 2.2fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.w-manifest-side p { font-size: 0.98rem; max-width: 34ch; margin-top: 1.1rem; }
.w-sign { display: block; margin-top: 0.9rem; font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--text); }
.w-big {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.55rem, 2.8vw, 2.5rem); line-height: 1.28; color: var(--text);
}
.w-line { display: block; opacity: 0; }
.w-line + .w-line { margin-top: 0.35em; }
html:not(.js-loaded) .w-line { opacity: 1; transform: none; }

/* === IHR TAG: Kapitel entlang einer Linie, die beim Scrollen wächst === */
.w-day { position: relative; margin-top: 1rem; }
.w-day-track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-strong); transform: translateX(-50%); }
.w-day-progress {
  position: absolute; inset: 0; transform-origin: top; transform: scaleY(0);
  background: linear-gradient(180deg, var(--teal), #d9a7ad); box-shadow: 0 0 14px var(--teal-glow);
}
.w-chapter {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 130px); align-items: center; padding: clamp(2.4rem, 4vw, 3.8rem) 0;
}
.w-chapter::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border-strong); transform: translate(-50%, -50%);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.w-chapter.is-on::before { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 6px var(--teal-glow); }
/* Bild und Text starten unsichtbar; GSAP lässt sie beim Scrollen herein- und beim Zurückscrollen wieder hinausgleiten */
html.js-loaded .w-chapter-media, html.js-loaded .w-chapter-body { opacity: 0; }
.w-chapter-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(74, 48, 54, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.w-chapter-body { max-width: 42ch; }
.w-chapter:nth-child(odd) .w-chapter-body { justify-self: start; }
.w-chapter:nth-child(even) .w-chapter-media { order: 2; }
.w-chapter:nth-child(even) .w-chapter-body { order: 1; justify-self: end; }
.w-chapter h3 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); margin: 0.55rem 0 0.9rem; }
.w-chapter p { font-size: 0.98rem; }

/* === FOTOS & FILM: zarte Rosé- und Champagner-Bänder, engerer Rhythmus ===
   Beide Abschnitte bekommen dieselbe Farbsprache wie die Anfrage-Fläche,
   nur leiser; die Abstände sind gestrafft, damit kein toter Raum entsteht. */
#tag { padding-bottom: clamp(2.8rem, 5vw, 4.5rem); }
#fotos {
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.2rem, 6.5vw, 5.5rem);
  background:
    radial-gradient(ellipse 58% 52% at 10% 12%, rgba(221, 160, 168, 0.26), transparent 62%),
    radial-gradient(ellipse 52% 58% at 92% 74%, rgba(236, 206, 170, 0.30), transparent 62%);
}
#fotos .w-head { margin-bottom: 1.5rem; }
#filme {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  background:
    radial-gradient(ellipse 60% 55% at 88% 8%, rgba(221, 160, 168, 0.22), transparent 60%),
    radial-gradient(ellipse 50% 48% at 6% 80%, rgba(236, 206, 170, 0.26), transparent 62%);
}
#filme .w-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* === FOTOS: Einleitung in einer ruhigen Spalte, dann Editorial-Collage === */
.w-photo-intro { max-width: 62ch; }
.w-photo-intro p { font-size: 0.98rem; }
.w-photo-intro p + p { margin-top: 1rem; }
/* Die Collage liegt auf einem weichen Blush-Feld wie ein aufgeschlagenes Album */
.w-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 30px); margin-top: clamp(2rem, 4vw, 3.2rem); align-items: start;
  padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: 30px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(185, 117, 125, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 30px 80px rgba(74, 48, 54, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.w-gallery-item {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(74, 48, 54, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* Mittlere Spalte sitzt tiefer, wie ein aufgeschlagenes Album */
.w-gallery-item:nth-child(3n+2) { margin-top: clamp(34px, 5vw, 76px); }
.w-ratio-34 { aspect-ratio: 3 / 4; }
.w-ratio-45 { aspect-ratio: 4 / 5; }
.w-ratio-43 { aspect-ratio: 4 / 3; }
html.js-loaded .w-gallery-item { opacity: 0; }

/* === FILME: ein großes Bild, dann das Zitat === */
/* 16:9 wie das Video selbst: keine Seitenflaechen, kein Beschnitt (Vorgabe Niko, 02.11.) */
.w-feature { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px rgba(74, 48, 54, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.6); }
.w-films { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.w-film { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(74, 48, 54, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.6); }
.w-media { position: relative; transition: transform 0.9s var(--ease); }
.w-film-wrap:hover .w-media, .w-feature-wrap:hover .w-media { transform: scale(1.015); }
/* Platzhaltertext in den Filmflächen unten, damit die Abspielfläche in der Mitte frei bleibt */
.w-feature > .ph, .w-film > .ph { justify-content: flex-end; padding-bottom: clamp(1rem, 3vw, 2rem); }
/* Abspielknopf etwas über der Mitte, damit die Beschriftung unten frei bleibt */
.w-play { position: absolute; inset: 0 0 18% 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.w-play span {
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 14px 34px rgba(74, 48, 54, 0.18);
  color: var(--teal-bright); transition: transform 0.5s var(--ease), background 0.4s;
}
.w-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.w-film-wrap:hover .w-play span, .w-feature-wrap:hover .w-play span { transform: scale(1.06); background: var(--glass-bg-hover); }
.w-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; padding: 0 4px; }
.w-caption-name { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--text); }
.w-feature-wrap .w-caption-name { font-size: 1.6rem; }

.w-feature-note { margin-top: 14px; padding: 0 4px; max-width: 72ch; }

.w-quote { max-width: 880px; margin: clamp(4rem, 8vw, 6.5rem) auto 0; text-align: center; }
.w-quote p {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.55; color: var(--text);
}
.w-quote footer { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.w-quote footer strong { font-family: var(--font-body); font-weight: 500; font-size: 0.98rem; color: var(--text); }

/* === STIMMEN: zwei Bewertungen, Haarlinien statt Kästen === */
.w-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); max-width: 1120px; }
.w-review { border-top: 1px solid var(--border-strong); padding-top: 1.6rem; }
.w-stars { color: #c9a05a; letter-spacing: 0.22em; font-size: 0.85rem; }
.w-review-lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.35; margin: 0.9rem 0 1rem; color: var(--text);
}
.w-review p:not(.w-review-lead) { font-size: 0.95rem; }
.w-review footer { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 4px; }
.w-review footer strong { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--text); }

/* === DER WEG: fünf Schritte in einer Zeile, Serifenziffern, Haarlinie ===
   Letzte Spalte etwas breiter, damit „Bearbeitung & Auslieferung“ einzeilig bleibt
   und alle Texte auf derselben Ebene beginnen (Vorgabe Niko, 27.10.) */
.w-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr; gap: clamp(18px, 2.4vw, 34px); padding-top: 2.2rem; }
.w-steps-track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border-strong); }
.w-steps-progress { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--teal-bright), var(--teal)); box-shadow: 0 0 12px var(--teal-glow); }
html.js-loaded .w-step { opacity: 0; }
html:not(.js-loaded) .w-steps-progress { transform: none; }
.w-step-num { font-family: var(--font-serif); font-weight: 400; font-size: 2.7rem; line-height: 1; color: var(--teal); }
/* Überschriften fett und einzeilig: kräftige Kopfzeile, alle Texte beginnen auf derselben Ebene */
.w-step h3 { font-size: clamp(1.05rem, 1.25vw, 1.32rem); font-weight: 650; margin: 1.1rem 0 0.55rem; line-height: 1.2; white-space: nowrap; }
.w-step p { font-size: 0.92rem; }

/* === FAQ: Haarlinien statt Kästen, Fragen in Serife === */
.w-faq .faq-list { max-width: 860px; margin: 0; gap: 0; }
.w-faq .faq-item { background: transparent; border: 0; border-top: 1px solid var(--border-strong); border-radius: 0; overflow: hidden; }
.w-faq .faq-item:last-child { border-bottom: 1px solid var(--border-strong); }
.w-faq .faq-question { padding: 1.35rem 0; font-family: var(--font-serif); font-size: clamp(1.15rem, 1.6vw, 1.42rem); font-weight: 400; line-height: 1.25; }
.w-faq .faq-question:hover { color: var(--teal-bright); }
.w-faq .faq-plus::before, .w-faq .faq-plus::after { height: 1.5px; }
.w-faq .faq-plus::after { width: 1.5px; height: 18px; }
.w-faq .faq-answer-inner { padding: 0 0 1.5rem; max-width: 64ch; font-size: 0.98rem; }
.w-faq .faq-item.active .faq-answer { max-height: 420px; }

/* === ANFRAGE: weiche Rosé-Fläche, große Serife, Glas-Button === */
.w-cta {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 30px; padding: clamp(3.2rem, 6.5vw, 6rem) clamp(1.6rem, 5vw, 5rem);
  background:
    radial-gradient(ellipse 70% 110% at 50% -10%, rgba(185, 117, 125, 0.28), transparent 65%),
    radial-gradient(ellipse 55% 65% at 92% 105%, rgba(236, 206, 170, 0.55), transparent 60%),
    radial-gradient(ellipse 45% 55% at 5% 100%, rgba(221, 160, 168, 0.30), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 46px 110px rgba(74, 48, 54, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.w-cta h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); margin: 0.9rem auto 1.1rem; max-width: 24ch; }
.w-cta p { max-width: 50ch; margin: 0 auto 2.2rem; font-size: 1.04rem; }
.w-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.w-cta .btn-cta { padding: 14px 26px; font-size: 1rem; }
.w-link { font-size: 0.9rem; color: var(--teal-bright); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(154, 85, 96, 0.45); transition: text-decoration-color 0.3s; }
.w-link:hover { text-decoration-color: currentColor; }

/* === BEWEGUNG AUS === */
@media (prefers-reduced-motion: reduce) {
  .w-strip-track { animation: none; }
  html.js-loaded .w-gallery-item { opacity: 1 !important; transform: none !important; }
  html.js-loaded .w-chapter-media, html.js-loaded .w-chapter-body { opacity: 1 !important; transform: none !important; }
  .w-day-progress { transform: none !important; }
  .w-line, .reveal-hero-visual, .reveal-hero-eyebrow, html.js-loaded .w-step { opacity: 1 !important; transform: none !important; }
  .w-steps-progress { transform: none !important; }
}

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .w-steps { grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; }
}
/* Zwischen 901 und 1300px ragt das kleine Hero-Bild sonst in die Textspalte:
   es rueckt hier weiter unter das grosse Bild (Hinweis Niko, 31.10.) */
@media (min-width: 901px) and (max-width: 1300px) {
  .w-hero-small, .w-hero-caption { left: -2%; }
}
@media (max-width: 900px) {
  .w-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 112px; gap: 3.5rem; align-items: start; }
  .w-hero-text { max-width: 640px; }
  .w-hero h1 { max-width: none; }
  .w-hero-visual { aspect-ratio: 4 / 5; max-height: none; max-width: 560px; justify-self: start; margin-bottom: 3rem; }
  .w-hero-small { left: auto; right: -4%; bottom: -9%; width: 40%; }
  .w-hero-caption { left: 4px; right: auto; bottom: -2.4rem; }
  .w-manifest { grid-template-columns: 1fr; gap: 1.8rem; }
  .w-reviews { grid-template-columns: 1fr; }
  .w-day-track { left: 5px; transform: none; }
  .w-chapter { grid-template-columns: 1fr; gap: 1.4rem; padding: 2.2rem 0 2.2rem 2rem; }
  .w-chapter::before { left: 5px; top: 1.9rem; transform: translate(-50%, 0); }
  .w-chapter:nth-child(even) .w-chapter-media { order: 1; }
  .w-chapter:nth-child(even) .w-chapter-body { order: 2; justify-self: start; }
  .w-chapter-body { max-width: none; }
  .w-films { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .w-hero h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .w-steps { grid-template-columns: 1fr 1fr; }
  /* Fünf Schritte in zwei Spalten: der letzte Schritt schließt über die volle Breite ab */
  .w-steps .w-step:last-child { grid-column: 1 / -1; }
  .w-gallery { grid-template-columns: 1fr 1fr; padding: 0.9rem; border-radius: 22px; }
  /* Mobil einheitlich Hochformat, sonst sind die Querformat-Kacheln zu niedrig für die Beschriftung */
  .w-gallery .w-gallery-item { aspect-ratio: 3 / 4; }
  .w-gallery-item:nth-child(3n+2) { margin-top: 0; }
  .w-gallery-item:nth-child(even) { margin-top: clamp(20px, 6vw, 40px); }
  .w-caption { flex-direction: column; gap: 2px; }
  .w-cta { border-radius: 22px; }
}
@media (max-width: 420px) {
  .w-steps { grid-template-columns: 1fr; }
}

/* Hochzeitsfilm: Rahmen ist 16:9 wie das Video, Flaeche nur als
   Ladehintergrund im Elfenbein der Seite */
.w-feature .video-embed { background: #f7f1eb; }

/* HO-9 (Braeutigam zu Pferd): Kopf sitzt an der Bildoberkante, der 3:4-Rahmen
   wuerde ihn beim mittigen Beschnitt kappen; Ausschnitt oben verankern */
.w-pos-top { object-position: 50% 0; }