/* ============================================================
   BLITZREICH — PRO EDITION
   Hell · Warm-Weiß / Tinte / Gold · Fraunces + Jost
   ============================================================ */

/* Lokal gehostete Variable Fonts statt Google Fonts CDN -- vermeidet die
   IP-Übermittlung an Google beim Laden externer Schriftarten (DSGVO-Risiko,
   siehe LG München I, 2022). Je eine @font-face-Regel pro Stil deckt per
   Gewichts-Bereich alle benötigten Schnitte ab (Variable-Font-Dateien). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/fraunces-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/jost-normal.woff2") format("woff2");
}

:root {
  --bg:          #FBF9F5;
  --paper:       #FFFFFF;
  --sand:        #F2EDE4;
  --ink:         #201C16;
  --ink-soft:    #6C6459;
  --gold:        #C9A66B;   /* dekorativ */
  --gold-deep:   #8A6D3F;   /* Text auf hellem Grund (AA) */
  --gold-bright: #E9C87E;   /* Blitz/Stern */
  --line:        rgba(32, 28, 22, .12);
  --line-strong: rgba(32, 28, 22, .28);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Jost", "Segoe UI", system-ui, sans-serif;
  --ease:  cubic-bezier(.16, 1, .3, 1);
  --bar-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: italic; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ---------- Typografie ---------- */
.kicker {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.h2 em { color: var(--gold-deep); font-weight: 400; }

.sec-head { max-width: 680px; margin: 0 auto 3.2rem; text-align: center; }
.sec-head__sub { color: var(--ink-soft); margin-top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 2rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}
.btn:active { transform: scale(.97); }
.btn--gold {
  background: var(--gold-deep);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(138, 109, 63, .6);
}
.btn--gold:hover { background: var(--ink); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: var(--bg); min-height: 44px; padding: .5rem 1.5rem; }
.btn--ink:hover { background: var(--gold-deep); }
.btn--line { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--line:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn--big { padding: 1rem 2.8rem; font-size: .88rem; }

/* Blitz-Sweep beim Hover */
.btn--flash { position: relative; overflow: hidden; }
.btn--flash::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  transition: left .5s var(--ease);
}
.btn--flash:hover::after { left: 120%; }

.link-arrow {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
}
.link-arrow span { transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--gold-deep); }
.link-arrow:hover span { transform: translateX(5px); }

/* ---------- Topbar ---------- */
.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  transition: background-color .4s ease, box-shadow .4s ease;
}
.bar--scrolled {
  background: rgba(251, 249, 245, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.bar__logo {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: auto;
}
.bar__logo em { color: var(--gold-deep); }
.bar__nav { display: flex; gap: 2rem; }
.bar__nav a {
  position: relative;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .5rem 0;
}
.bar__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: .2rem;
  width: 100%; height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.bar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Hamburger-Button — nur auf Mobile sichtbar */
.bar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 4px;
}
.bar__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .3s var(--ease), opacity .2s ease;
}
.bar--nav-open .bar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bar--nav-open .bar__burger span:nth-child(2) { opacity: 0; }
.bar--nav-open .bar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .bar { gap: 1rem; }
  .bar__burger { display: flex; }
  .bar__nav {
    display: none;
    position: absolute;
    top: var(--bar-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(251, 249, 245, .98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -18px rgba(32, 28, 22, .25);
    padding: .5rem 0 1rem;
  }
  .bar--nav-open .bar__nav { display: flex; }
  .bar__nav a {
    padding: .9rem clamp(1.2rem, 4vw, 3rem);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .bar__nav a::after { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: min(88svh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: calc(var(--bar-h) + 1.5rem) clamp(1.2rem, 4vw, 3rem) 1.75rem;
  max-width: 1400px;
  margin-inline: auto;
}
.hero__h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  /* Fraunces wird bei großen Größen sonst sehr "wonky" (Display-Formen) --
     ohne optisches Sizing bleiben die Buchstaben ruhiger/konventioneller */
  font-optical-sizing: none;
  /* "Hochzeitsfotograf" ist als einzelnes Wort bei dieser Schriftgröße breiter
     als die 460px-Spalte -- ohne Trennung läuft es unsichtbar über den Rand
     hinaus (overflow:visible zeigt das nicht in scrollWidth-Checks!). Mit
     hyphens:auto trennt der Browser sprachkorrekt ("Hoch-zeits-fo-to-graf"),
     break-word ist die Absicherung falls Trennung mal nicht greift. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.hero__h1 span { display: block; }
.hero__h1 em { color: var(--gold-deep); font-weight: 500; letter-spacing: -.005em; }
.hero__sub {
  margin-top: 1.5rem;
  color: var(--ink-soft);
  max-width: 44ch;
}
.hero__actions {
  margin-top: 2.2rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

/* ---------- Szene (Kamera + Paar + Polaroids) ---------- */
.scene {
  position: relative;
  background: var(--sand);
  border-radius: 10px;
  padding: clamp(1rem, 2.5vw, 2rem);
  box-shadow: inset 0 0 0 1px var(--line);
}
.scene__stage {
  position: relative;
  aspect-ratio: 6 / 5;
  overflow: hidden;
}
.scene__ground {
  position: absolute;
  left: 6%; right: 6%; bottom: 7%;
  height: 2px;
  background: var(--line-strong);
}
.scene__figure {
  position: absolute;
  bottom: 7%;
  width: auto;
  filter: drop-shadow(0 16px 14px rgba(32, 28, 22, .16));
}
.scene__figure--couple {
  /* Anchor von 25% auf 30% verschoben -- schafft den nötigen Zusatz-Freiraum
     für die größere Höhe unten (Desktop 56%->67%), ohne dass die Figur links
     aus der Bühne oder rechts in den Fotografen hineinläuft. */
  left: 30%;
  height: 67%;
  /* Seitenverhältnis der BREITESTEN der 10 Zyklus-Posen (Pose 3, fast quadratisch)
     -- dadurch werden mit object-fit:contain ALLE Posen (auch die schmaleren)
     an der HÖHE ausgerichtet statt an der Breite, sehen also alle etwa gleich
     groß aus (nur die Breite variiert leicht je nach Pose, nie die Höhe). */
  aspect-ratio: 1009 / 991;
  transform: translateX(-50%);
  filter: none;
}
.scene__pose {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  width: 100%;
  /* Die 10 Posen-Bilder haben stark unterschiedliche eigene Seitenverhältnisse
     (0.51 bis 1.02) -- mit object-fit:contain skaliert JEDE Pose sicher in die
     vom Wrapper (.scene__figure--couple) vorgegebene Box, statt mit width:auto
     ihr eigenes Seitenverhältnis durchzusetzen und dadurch bei breiteren Posen
     seitlich über die Bühne hinauszuragen (Grund für das Abschneiden). */
  object-fit: contain;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1s ease;
  filter: drop-shadow(0 16px 14px rgba(32, 28, 22, .16));
  pointer-events: none;
}
.scene__pose.is-active { opacity: 1; }
.scene__photog-wrap {
  position: absolute;
  left: 79%;
  bottom: 7%;
  height: 66%;
  aspect-ratio: 594 / 901;
  /* Bild ist bereits nach links ausgerichtet fotografiert -- blickt direkt zum Brautpaar, keine Spiegelung nötig */
  transform: translateX(-50%);
}
.scene__figure--photog {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 14px rgba(32, 28, 22, .16));
}
.scene__flash {
  position: absolute;
  top: 12%;
  left: 84%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--gold-bright) 45%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.no-anim .scene__flash { display: none; }
.petal {
  position: absolute;
  top: 0; left: 0;
  width: 13px;
  height: 9px;
  border-radius: 100% 6px 100% 6px;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  z-index: 3;
}
.no-anim .petal { display: none; }
.scene__caption {
  text-align: center;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: .4rem;
}
.scene__caption em {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--gold-deep);
}
.scene__stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.polaroid {
  position: absolute;
  width: clamp(96px, 15%, 150px);
  background: #fff;
  padding: 6px 6px 20px;
  box-shadow: 0 14px 30px -12px rgba(32, 28, 22, .45);
  border-radius: 2px;
  will-change: transform;
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* goldenes Klebeband — die Fotos „hängen" in der Ecke */
.polaroid::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 34px;
  height: 13px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(201, 166, 107, .5);
  border-radius: 1px;
}

/* Weißer Blitz über allem */
.flashout {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--bar-h) + 2rem); }
  .scene { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 720px) {
  /* 4 statt 6 Polaroids -- dafür deutlich größer (+5% ggü. vorheriger Version) */
  .polaroid { width: clamp(109px, 28%, 147px); }
  /* Bühne deutlich höher als am Desktop (6/5) -- sonst landen die Polaroids
     visuell auf Kopfhöhe von Brautpaar/Fotograf statt klar darüber.
     WICHTIG: da die Figuren über height:% (der Stage-Höhe) skaliert werden
     und ihre Breite an einem fixen Bild-Seitenverhältnis hängt, macht eine
     höhere Bühne sie bei gleichbleibendem height:% automatisch auch BREITER
     -- das schneidet sie links/rechts an (overflow:hidden). Deshalb hier
     zusätzlich height:% so weit reduziert, dass die absolute Bildgröße
     (in px) etwa gleich bleibt wie am Desktop, nur mit mehr Luft drumherum. */
  .scene__stage { aspect-ratio: 11 / 15; }
  /* Wrapper-Seitenverhältnis ist jetzt auf die BREITESTE Pose kalibriert (siehe
     .scene__figure--couple oben) -- die Höhe muss deshalb kleiner sein als beim
     alten, schmaleren Verhältnis, sonst würde die breiteste Pose seitlich über
     den Bühnenrand hinauslaufen. Mit Sicherheitsabstand zum Rand berechnet.
     Couple + Fotograf konkurrieren hier um dieselbe begrenzte Breite -- beide
     können nicht gleichzeitig maximal groß sein, ohne sich zu berühren. */
  /* +20% ggü. dem ursprünglichen 39% -- dafür reichte der Platz zum Fotografen
     nicht mehr aus, deshalb wandert der Anchor von 30% auf 33.5% (dichter an
     den linken Bühnenrand) UND der Fotograf wird kleiner, um Raum für das
     größere Brautpaar zu schaffen (User-Entscheidung: Brautpaar-Größe hat
     Vorrang, siehe Feedback). 27% wirkte aber zu winzig -- Fotograf-Anchor
     von 79% auf 83% verschoben (nutzt die Luft zum rechten Bühnenrand aus)
     und dadurch wieder auf 35% vergrößert, weiterhin mit Sicherheitsabstand
     zum Brautpaar UND zum Rand (siehe scene__pose-Berechnung). */
  .scene__figure--couple { left: 33.5%; height: 47%; }
  /* +5% auf Smartphone (User-Wunsch) ggü. den 35% oben im Desktop-Abschnitt */
  .scene__photog-wrap { left: 83%; height: 36.75%; }
}