/* My Art Wedding — shared stylesheet for DE/EN/BG one-pagers
   Design: black, minimalist, luxury-fashion editorial (Dior / Hugo Boss / YSL register).
   No framework, no unused CSS — kept intentionally small for performance. */

:root {
  --color-bg: #0a0a0a;
  --color-bg-alt: #121212;
  --color-text: #f3efe6;
  --color-text-soft: #9a948a;
  --color-accent: #c9a95c;
  --color-accent-soft: rgba(201, 169, 92, 0.12);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-white: #ffffff;
  --color-black: #000000;

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --section-pad: clamp(4rem, 8vw, 7rem);
  --radius: 1px;
  --header-h: 66px;
}

* {
  box-sizing: border-box;
}

html {
  /* Instant jump for in-page nav links (Über mich, Portfolio, Preise, Kontakt) —
     Milen wants clicking these to feel like opening a fresh page, not a scroll animation. */
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Full-bleed breakout: lets large editorial photos span the full viewport
   width regardless of the containing .container's max-width. */
.bleed,
.hero-video {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Soft fade transition between the OnePager and the individual wedding story
   pages (/hochzeiten/<slug>/) — any link tagged .js-fade-nav fades the body
   out before navigating (see main.js), so moving between pages feels like
   staying "in the page" rather than a hard reload. */
body {
  transition: opacity 0.28s ease;
}

body.is-fading-out {
  opacity: 0;
}

/* --- Preloader / splash screen --- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}

.preloader-inner {
  text-align: center;
}

.preloader-logo {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--color-white);
  letter-spacing: 0.04em;
}

.preloader-by {
  display: block;
  text-align: left;
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: none;
  color: var(--color-accent);
}

.preloader-hidden {
  opacity: 0;
  pointer-events: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: 0.005em;
  color: var(--color-white);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1rem; color: var(--color-text-soft); font-weight: 300; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 1rem;
}

.section {
  padding: var(--section-pad) 0;
}

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

.section-head {
  max-width: 680px;
  margin: 0 0 3rem;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- Header / Nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: transform 0.3s ease;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
}

.logo-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.logo-inner {
  display: flex;
  flex-direction: column;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-white);
}

.header-by {
  display: none;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: none;
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  gap: 2.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  transition: color 0.2s ease;
  /* Cancel the trailing letter-spacing gap after the last character —
     otherwise a centered box (e.g. the mobile menu items) looks visually
     shifted left, since the invisible trailing space isn't matched on
     the left side. */
  margin-right: -0.15em;
  /* Multi-word labels (e.g. "Über mich") must never wrap in the mobile
     menu — a wrapped 2-line label defaults to left-aligned lines, which
     visibly breaks the centered layout even though the single-line items
     are centered correctly. text-align:center is a belt-and-braces
     fallback in case it wraps anyway on a very narrow screen. */
  white-space: nowrap;
  text-align: center;
}

.nav-links a:hover {
  color: var(--color-accent);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.lang-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
}

.lang-switch {
  display: flex;
  gap: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.lang-switch a {
  padding: 0.2rem 0.5rem;
  text-decoration: none;
  color: var(--color-text-soft);
  border-radius: var(--radius);
}

.lang-switch a[aria-current="true"] {
  color: var(--color-accent);
  font-weight: 600;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.4rem;
  cursor: pointer;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 0.9rem 2.1rem;
  background: var(--color-accent);
  color: var(--color-black);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  background: transparent;
  color: var(--color-accent);
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}

.btn-outline:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

/* --- Hero --- */
.hero {
  padding: 0 0 var(--section-pad);
}

.hero-inner {
  max-width: 760px;
  margin-top: clamp(3rem, 7vw, 5rem);
}

.hero h1 {
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: 1.05rem;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: 3.5rem;
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
  color: var(--color-text-soft);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-video {
  aspect-ratio: 16/9;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Stats bar: below the hero, before About. 3 headline numbers (years
   experience / weddings / countries) that count up from 0 when the section
   scrolls into view (see the dedicated IntersectionObserver in main.js) —
   a small "something is happening" moment right after the hero, before the
   more text-heavy About section. Numbers are real, confirmed figures, not
   placeholders — see project memory before changing them. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

.stat-number {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.01em;
}

.stat-label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

@media (max-width: 600px) {
  .stats-grid {
    gap: 1rem;
  }
  .stat-number {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }
}

/* --- About --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-photo {
  aspect-ratio: 4/5;
  background: #000;
  border: 10px solid #000;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0;
  overflow: hidden;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.about-photo.about-photo-gold {
  background: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

/* --- Destinations: world map + travel list --- */
.destinations-title .accent-line {
  color: var(--color-accent);
}

.destinations-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: start;
}

.world-map {
  position: relative;
  line-height: 0;
}

.world-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

.wm-country {
  fill: #2b2822;
  stroke: var(--color-bg);
  stroke-width: 0.6;
  transition: fill 0.25s ease;
}

.wm-dot {
  fill: var(--color-accent);
  filter: drop-shadow(0 0 6px rgba(201, 169, 92, 0.65));
}

.destinations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
  column-gap: 1.5rem;
  align-items: center;
}

.destinations-list li {
  padding: 0.56rem 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
}

@media (max-width: 860px) {
  .destinations-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .destinations-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
  }

  .destinations-list li {
    border-bottom: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    background: var(--color-bg-alt);
  }
}

/* --- Portfolio: 2-shape mosaic gallery with lightbox ---
   Only two tile shapes exist on purpose: .g-tall (portrait, 1 col × 2 rows)
   and .g-wide (landscape, 2 cols × 1 row). The HTML repeats a fixed 4-tile
   block — tall, tall, wide, wide — because that block always tiles a
   perfect rectangle with zero gaps: two talls fill a 2-col×2-row area, and
   two stacked wides fill the next 2-col×2-row area, on both the 4-column
   desktop grid and the 2-column mobile grid. Keep that block order when
   adding/removing tiles so the mosaic edge stays clean.
   Every tile is a real <button> so it's keyboard-operable and opens the
   lightbox below.
   Deliberately no visible caption text on the tiles themselves — this grid is
   photos only. Each button still carries data-caption/aria-label (used by the
   lightbox and for accessibility), it's just not rendered on the tile.
   To swap in a real photo later: add an <img> inside the tile's .gallery-ph
   span and set the button's data-full="/path/to/photo.jpg" — the lightbox
   picks it up automatically and shows the full image instead of the empty
   placeholder box. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 4px;
  margin-top: 2.5rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.25s ease;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}

.gallery-item.g-wide { grid-column: span 2; }
.gallery-item.g-tall { grid-row: span 2; }

.gallery-ph {
  position: absolute;
  inset: 0;
}

.gallery-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }
  /* .g-wide already spans 2 columns from the base rule above, which is the
     full grid width here too — the [tall,tall,wide,wide] block tiles
     cleanly on 2 columns exactly as it does on 4, no override needed. */
}

/* Justified Gallery variant — Milen wants every photo (horizontal and
   vertical) shown uncropped, with a genuinely clean top/bottom edge on the
   gallery. Added as an extra .gallery-justified class on top of
   .gallery-grid rather than changing the base rules, so the fixed-cell/
   cropped version keeps working unchanged wherever this class isn't added
   yet (currently DE only, per his "only touch German for now" instruction —
   EN/BG still use the plain .gallery-grid above until he asks to roll this
   out to them too).
   History: a column-based masonry (previous attempt, real aspect ratios,
   no cropping) could still end with columns of uneven length, leaving
   empty background space at the bottom of the shorter ones. Replaced with
   a row-based "Justified Gallery" layout instead — the technique used by
   Flickr/500px/Getty for exactly this: photos are grouped into rows by
   js/main.js, each row scaled (via inline width/height per item) so the
   row's photos add up to exactly the container's full width at a shared
   row height. Rows stack with no leftover space anywhere, so the "gap"
   failure mode structurally can't happen — there are no columns of
   different lengths any more. These rules just lay out the JS-built rows;
   the actual per-photo width/height is computed and set inline by the JS. */
.gallery-grid.gallery-justified {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gallery-justified .justified-row {
  display: flex;
  gap: 4px;
}

.gallery-justified .gallery-item {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
}

.gallery-justified .gallery-ph {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-justified .gallery-ph img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "View all" control below the homepage mosaic — links to the dedicated,
   per-language full-gallery page (js-fade-nav for a smooth transition). */
.gallery-more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* --- Lightbox: opens on any .gallery-item click, see main.js --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(10, 10, 10, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-stage {
  position: relative;
  width: min(90vw, 900px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Adaptive display: the photo itself always shows uncropped
   (object-fit: contain). For landscape photos, that leaves empty space
   above/below on a tall mobile screen — instead of plain black bars,
   .lightbox-backdrop shows a softly blurred, darkened crop of the SAME
   photo filling the frame behind it, so it reads as an intentional,
   premium presentation rather than an empty gap. Portrait photos already
   fill most of the frame, so the backdrop just stays hidden (opacity 0)
   for them — see main.js, which toggles .is-active based on the loaded
   image's natural orientation. */
.lightbox-photo-frame {
  position: relative;
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius);
  transition: aspect-ratio 0.2s ease;
}

/* Landscape photos get a landscape-shaped frame so the image itself fills
   most of it (only a thin blurred band top/bottom, not a half-empty box). */
.lightbox-photo-frame.is-landscape {
  aspect-ratio: 4/3;
}

@media (max-width: 860px) {
  .lightbox-photo-frame {
    max-height: 78vh;
    aspect-ratio: 3/4;
  }

  .lightbox-photo-frame.is-landscape {
    aspect-ratio: 16/10;
  }
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.55);
  transform: scale(1.15);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-backdrop.is-active {
  opacity: 1;
}

.lightbox-ph {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-ph span {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.lightbox-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.lightbox-caption {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  border-color: var(--color-accent);
}

.lightbox-close { top: -56px; right: 0; }
.lightbox-prev { left: -56px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: -56px; top: 50%; transform: translateY(-50%); }

@media (max-width: 860px) {
  .lightbox-close { top: -50px; right: 0; }
  .lightbox-prev { left: 0; top: auto; bottom: -56px; transform: none; }
  .lightbox-next { right: 0; top: auto; bottom: -56px; transform: none; }
}

/* --- Geschichten / Stories: horizontally scrollable carousel of teaser
   cards linking out to the individual wedding story pages
   (/hochzeiten/<slug>/) — this is the only way those pages are discoverable
   from the OnePager, since they sit outside the single-page nav/anchor
   structure. Built as a scroll-snap carousel (not a static grid) because the
   target is 10-20+ weddings over time, not just 3 — a fixed grid would grow
   the homepage taller with every wedding added; a carousel stays a constant
   height and scales indefinitely. .stories-nav buttons (prev/next arrows,
   see main.js) scroll it by one card width each; it's also natively
   swipeable/draggable on touch and trackpads with no JS needed for that
   part. */
.stories-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.stories-nav {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.stories-nav:hover {
  border-color: var(--color-accent);
}

.stories-grid {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.stories-grid::-webkit-scrollbar {
  display: none;
}

.story-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border);
  transition: border-color 0.25s ease;
}

a.story-card:hover {
  border-color: var(--color-accent);
}

.story-card-ph {
  aspect-ratio: 4/5;
  background: var(--color-bg-alt);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
}

.story-card-ph span {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.story-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.story-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
}

.story-card-meta {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.story-card-soon {
  opacity: 0.5;
}

@media (max-width: 860px) {
  .story-card {
    flex: 0 0 240px;
  }
}

/* --- Individual wedding story pages (/hochzeiten/<slug>/) ---
   Single-language (DE) template for now — see project memory. Duplicate this
   folder for each new wedding; reuses .gallery-grid/.lightbox for its photos. */
.wedding-hero {
  aspect-ratio: 21/9;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-end;
}

.wedding-hero-inner {
  padding-bottom: 2.5rem;
}

.wedding-hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 0.5rem;
}

.wedding-hero-meta {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0.75rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color 0.25s ease;
}

.back-link:hover {
  color: var(--color-accent);
}

.back-link-wrap {
  padding: 1.5rem 0;
}

.wedding-story-text {
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .wedding-hero {
    aspect-ratio: 4/5;
  }
}

/* --- Pricing / Flip Tiles --- */
.pricing-gate-wrap {
  position: relative;
}

.pricing-locked-content {
  filter: blur(9px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.pricing-unlocked .pricing-locked-content {
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}

.pricing-gate-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.3s ease;
}

.pricing-unlocked .pricing-gate-overlay {
  display: none;
}

.gate-box {
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.gate-label {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.gate-box h3 {
  margin-bottom: 1.5rem;
}

.gate-field {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.gate-field input {
  flex: 1;
  min-width: 180px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.gate-field input:focus {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.gate-hint {
  display: block;
  margin-top: 1rem;
  font-size: 0.7rem;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.flip-card {
  aspect-ratio: 3/4;
  perspective: 1200px;
  cursor: pointer;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card:hover .flip-inner,
.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

/* Touch / no-hover devices (incl. touch laptops wider than 860px): disable the
   hover-flip that can never fire and rely on tap-to-flip (.flipped, set in JS). */
@media (hover: none) {
  .flip-card:hover .flip-inner {
    transform: none;
  }
  .flip-card.flipped .flip-inner {
    transform: rotateY(180deg);
  }
  .flip-tap-hint {
    display: block;
  }
  .flip-card.flipped .flip-tap-hint {
    display: none;
  }
}

.flip-f, .flip-b {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.flip-f {
  background: var(--color-bg-alt);
  justify-content: flex-end;
}

.flip-b {
  background: #161616;
  border-color: rgba(201, 169, 92, 0.35);
  transform: rotateY(180deg);
  justify-content: center;
}

.flip-f::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}

.flip-card:hover .flip-f::before {
  transform: scaleX(1);
}

.flip-ft {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-white);
  margin-bottom: 0.4rem;
}

.flip-fd {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  line-height: 1.7;
}

.flip-tap-hint {
  display: none;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 0.75rem;
}

.flip-bl {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.flip-bt {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.flip-bd {
  font-size: 0.82rem;
  color: var(--color-text-soft);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.flip-bl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.flip-bl-list li {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.flip-bl-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-top: 0.5em;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* --- Pricing groups (Fotografie / Film) + add-ons + worldwide note --- */
.pricing-intro {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-group + .pricing-group {
  margin-top: 3.5rem;
}

.pricing-group-head {
  text-align: center;
  margin-bottom: 1.75rem;
}

.pricing-group-head .eyebrow {
  margin-bottom: 0.5rem;
}

.pricing-group-note {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  max-width: 520px;
  margin: 0 auto;
}

.pricing-addons {
  margin-top: 3.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 2.25rem;
}

.pricing-addons .eyebrow {
  text-align: center;
  margin-bottom: 1.5rem;
}

.addon-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.addon-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  padding: 1.4rem 1.6rem;
}

.addon-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.addon-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-white);
}

.addon-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-accent);
  white-space: nowrap;
}

.addon-desc {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  line-height: 1.7;
  margin: 0.5rem 0 0;
}

.pricing-worldwide {
  max-width: 640px;
  margin: 3.5rem auto 0;
  text-align: center;
}

.pricing-worldwide .eyebrow {
  margin-bottom: 0.75rem;
}

.pricing-worldwide p {
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

/* --- Testimonials --- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem 1.9rem;
  background: var(--color-bg-alt);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Cards beyond the visible count, hidden until "show more" (see main.js). */
.testimonial-card.is-collapsed {
  display: none;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

.testimonial-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 2.4rem;
  line-height: 0.1;
  margin-bottom: 0.9rem;
}

.testimonial-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.testimonial-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--color-white);
}

.testimonial-loc {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--color-text-soft);
}

/* Placeholder cards — clearly marked, dashed border, until real quotes land. */
.testimonial-card.is-placeholder {
  border-style: dashed;
}

.testimonial-card.is-placeholder .testimonial-quote,
.testimonial-card.is-placeholder .testimonial-meta {
  font-style: italic;
  color: var(--color-text-soft);
}

.testimonial-card.is-placeholder .testimonial-quote::before {
  opacity: 0.5;
}

.testimonials-more-wrap {
  text-align: center;
  margin-top: 2.5rem;
}

.testimonials-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.testimonials-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- FAQ --- */
.faq-list {
  max-width: 780px;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0;
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-white);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-accent);
  margin-left: 1rem;
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin-top: 1rem;
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-field label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--color-text-soft);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.contact-details {
  font-size: 0.9rem;
}

.contact-details dt {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-top: 1.75rem;
}

.contact-details dt:first-child {
  margin-top: 0;
}

.contact-details dd {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--color-text);
}

.contact-details dd a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.contact-details dd a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0;
  font-size: 0.75rem;
  color: var(--color-text-soft);
  letter-spacing: 0.03em;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  text-decoration: none;
  color: var(--color-text-soft);
}

.footer-links a:hover {
  color: var(--color-accent);
}

/* --- Reveal-on-scroll (progressive enhancement, no layout dependency) --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 860px) {
  /* Mobile header, three tiers: logo + "by Milen Lesemann" byline stacked
     and centered on top (echoing the splash screen); hamburger centered on
     the row below; language switcher collapsed to the current language,
     pinned to the right, expanding into a small dropdown on tap. */
  .nav {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .logo-wrap {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* The inner block shrink-wraps to its widest child (the logo) and is
     centered as a whole by .logo-wrap above; align-items:flex-start then
     lines the byline up flush with the logo's left edge — same treatment
     as the splash screen's "by Milen Lesemann" line. */
  .logo-inner {
    align-items: flex-start;
    gap: 0.2rem;
  }

  .logo {
    font-size: clamp(1.5rem, 6.5vw, 1.9rem);
    letter-spacing: 0.04em;
  }

  .header-by { display: block; }

  .nav-right {
    order: 2;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
  }

  .nav-toggle {
    display: block;
    font-size: 1.8rem;
  }

  .lang-wrap {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .lang-toggle { display: inline-block; }

  .lang-switch {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.6rem;
    flex-direction: column;
    gap: 0.3rem;
    background: rgba(18, 18, 18, 0.98);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.5rem;
    min-width: 3.6rem;
  }

  .lang-wrap.is-open .lang-switch { display: flex; }

  .lang-switch a[aria-current="true"] { display: none; }

  .nav-links {
    order: 3;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    display: none;
  }

  .nav-links.is-open { display: flex; }

  .site-header.header-hidden { transform: translateY(-100%); }

  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-photo { order: -1; }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  /* No horizontal hero video on mobile: becomes portrait. */
  .hero-video {
    aspect-ratio: 4/5;
  }

  /* Hero video crop shifted ~30% further right on the source frame (mobile
     only) so the couple — positioned right-of-center in the source footage —
     reads as centered in the narrower portrait crop, instead of nearly
     cropped off at the right edge with excess empty sky on the left. */
  .hero-video video {
    object-position: 80% center;
  }

  .flip-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .flip-card {
    aspect-ratio: unset;
    min-height: 430px;
  }

  .flip-card:hover .flip-inner {
    transform: none;
  }

  .flip-card.flipped .flip-inner {
    transform: rotateY(180deg) !important;
  }

  .flip-tap-hint {
    display: block;
  }

  .flip-card.flipped .flip-tap-hint {
    display: none;
  }

  .gate-box {
    padding: 2rem 1.5rem;
  }

  .gate-field {
    flex-direction: column;
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Dev-only Web/Mobile preview toggle (JS-gated to localhost, never ships to production visitors) --- */
.dev-preview-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  gap: 4px;
  background: #000;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.dev-preview-toggle button {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.dev-preview-toggle button.active {
  background: var(--color-accent);
  color: #000;
}

.dev-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}

.dev-preview-overlay.is-active {
  display: flex;
}

.dev-preview-frame {
  width: 375px;
  height: 812px;
  max-height: 92vh;
  border: 10px solid #1a1a1a;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
}

.dev-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ============================================================
   2026-07 Design-Politur (Fable-Review):
   Story-Cover, Hero-Overlay, Sticky-CTA (mobil), Galerie-Hover,
   Formular-Fokus, Sektions-Ornament. Alle Regeln opt-in bzw.
   rein additiv — Rückbau = diesen Block entfernen.
   ============================================================ */

/* --- Sektions-Ornament: feine Goldlinie über jedem Sektionskopf --- */
.section-head::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), rgba(201, 169, 92, 0.2));
  margin-bottom: 1.15rem;
}

.section-head.center::before {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, rgba(201, 169, 92, 0.15), var(--color-accent), rgba(201, 169, 92, 0.15));
}

/* --- Story-Karten: echte Cover-Fotos + elegante "Demnächst"-Teaser --- */
.story-card-ph {
  position: relative;
  overflow: hidden;
}

.story-card-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Verlauf hinter dem Orts-Label, damit es auf Fotos lesbar bleibt */
.story-card-ph.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, 0.75) 100%);
}

.story-card-ph span {
  position: relative;
  z-index: 2;
}

.story-card-ph.has-img span {
  color: var(--color-text);
}

a.story-card:hover .story-card-ph img {
  transform: scale(1.05);
}

/* "Demnächst"-Teaser: entsättigt + stark abgedunkelt */
.story-card-soon .story-card-ph img {
  filter: grayscale(1) brightness(0.4);
}

/* --- Hero-Overlay: Headline liegt auf dem Video (opt-in Klasse) --- */
.hero-overlay {
  position: relative;
}

.hero-overlay .hero-video {
  position: relative;
  aspect-ratio: auto;
  height: calc(100vh - var(--header-h));
  min-height: 540px;
  max-height: 940px;
  border-bottom: none;
}

.hero-overlay .hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 35%, rgba(10, 10, 10, 0.3) 62%, rgba(10, 10, 10, 0.94) 100%);
}

.hero-overlay .hero-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.75rem, 5vh, 4rem);
  z-index: 2;
  margin-top: 0;
}

.hero-overlay .hero-inner h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  margin-bottom: 1.1rem;
}

.hero-overlay .hero-sub {
  font-size: 0.98rem;
}

.hero-overlay .hero-actions {
  margin-top: 1.75rem;
}

@media (max-width: 860px) {
  .hero-overlay .hero-video {
    height: calc(100svh - 60px);
    min-height: 480px;
    aspect-ratio: auto;
  }

  .hero-overlay .hero-inner h1 {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  }

  /* Mobil: Sub-Text ausblenden, damit der Overlay-Block kompakt bleibt
     und Eyebrow + Headline im dunklen unteren Bilddrittel sitzen. */
  .hero-overlay .hero-sub {
    display: none;
  }

  .hero-overlay .hero-actions {
    margin-top: 1.25rem;
  }
}

/* --- Galerie: sanfter Zoom + Aufhellung beim Hover --- */
.gallery-ph img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.7s ease;
}

.gallery-item:hover .gallery-ph img,
.gallery-item:focus-visible .gallery-ph img {
  transform: scale(1.045);
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-ph img,
  .story-card-ph img {
    transition: none;
  }
}

/* --- Lightbox-Zähler ("12 / 61") nutzt die vorhandene Caption-Zeile --- */
.lightbox-caption {
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
}

/* --- Formulare: goldener Fokus statt harter Outline --- */
.form-field input:focus,
.form-field textarea:focus,
.gate-field input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 92, 0.16);
}

/* --- Kontakt: persönliche Antwortzeit-Notiz unter der Überschrift --- */
.contact-note {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  margin: -0.75rem 0 2rem;
}

/* --- Sticky "Termin anfragen"-Button, nur mobil --- */
.mobile-cta {
  display: none;
}

@media (max-width: 860px) {
  .mobile-cta {
    display: inline-flex;
    position: fixed;
    bottom: calc(1.1rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 880; /* unter Lightbox (900) und Preloader (1000) */
    background: var(--color-accent);
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.95rem 2rem;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .mobile-cta.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
  }
}