/* ============================================================
   MARIT BEENTJES — v2.1  ·  shared stylesheet
   Aesthetic: backstage collage editorial. Paper, ink, clay,
   grain, tape, handwriting, curves, movement.
   Type: Antonio (display caps) · Instrument Serif (italic accents)
         Newsreader (body) · Homemade Apple (handwriting)
   ============================================================ */

:root {
  --ink: oklch(24% 0.014 65);
  --ink-soft: oklch(34% 0.014 65);
  --paper: oklch(94.5% 0.021 88);
  --cream: oklch(97.2% 0.014 90);
  --clay: oklch(48% 0.125 38);
  --clay-deep: oklch(40% 0.115 38);
  --blush: oklch(88% 0.043 42);
  --blush-paper: oklch(93.5% 0.026 48);
  --line: color-mix(in oklab, var(--ink) 20%, transparent);
  --line-light: color-mix(in oklab, var(--cream) 26%, transparent);

  --serif: "Newsreader", Georgia, serif;
  --serif-display: "Instrument Serif", Georgia, serif;
  --condensed: "Antonio", "Arial Narrow", sans-serif;
  --hand: "Homemade Apple", cursive;

  --pad: clamp(20px, 5vw, 64px);
  --space-tight: 0.5rem;
  --space-mid: 1.5rem;
  --space-loose: clamp(2.5rem, 6vw, 4.5rem);
  --space-section: clamp(5rem, 6vw + 1.5rem, 8.5rem);
  --curve-h: clamp(48px, 8vw, 128px);

  --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --measure: 62ch;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

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

html {
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
  width: 100%;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* print grain over everything — kills the flat digital look */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: multiply;
}

body.menu-open { overflow: hidden; }

h1, h2, h3 { line-height: 1.1; margin: 0; font-weight: inherit; }
figure, blockquote, dl, dd { margin: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--clay); color: var(--cream); }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--pad);
  z-index: 400;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
}
.skip-link:focus { top: 12px; }

/* ---------- type roles ---------- */

.kicker {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
}

.display {
  font-family: var(--condensed);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
}

.serif-accent {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.prose { max-width: var(--measure); }

.lede {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.45;
  font-weight: 400;
}

.hand { font-family: var(--hand); font-weight: 400; }

/* handwritten margin note */
.note-hand {
  font-family: var(--hand);
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.9;
  color: var(--ink-soft);
  transform: rotate(-2deg);
  display: inline-block;
}
.note-hand .arrow {
  display: block;
  width: 42px;
  height: 30px;
  margin-top: 2px;
}
.note-hand .arrow path {
  fill: none;
  stroke: var(--clay);
  stroke-width: 2;
  stroke-linecap: round;
}

/* scribble underline — draws itself in when revealed */
.scrib {
  position: relative;
  white-space: nowrap;
}
.scrib svg {
  position: absolute;
  left: -3%;
  bottom: -0.18em;
  width: 106%;
  height: 0.32em;
  overflow: visible;
}
.scrib path {
  fill: none;
  stroke: var(--clay);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease) 0.45s;
}
.is-in .scrib path,
.scrib.is-in path { stroke-dashoffset: 0; }
html:not(.js) .scrib path { stroke-dashoffset: 0; }

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Auf grossen Screens haengt der Header sonst als einziges an den
     Raendern: an der Content-Spalte (1052px) ausrichten */
  padding: 16px max(var(--pad), calc((100% - 1180px) / 2));
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.is-solid {
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(8px);
}

.brand {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: 26px;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: inline-block;
  padding: 6px 0;
}
.brand small {
  display: block;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clay);
  margin-top: 3px;
}

.nav-desktop {
  display: none;
  /* stretch: alle Tabs so hoch wie der First-Dance-Tab (mit 'weddings'),
     damit die Hover-Striche auf EINER gemeinsamen Linie liegen */
  align-items: stretch;
  gap: clamp(20px, 3vw, 44px);
}

.nav-desktop a,
.nav-desktop button {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 2px;
  position: relative;
}

/* The First Dance: kleiner Handschrift-Zusatz unter dem Tab,
   gleiche Sprache wie 'Beentjes' unter dem Logo */
.nav-fd small,
.menu-fd small {
  display: block;
  font-family: var(--hand);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clay);
}
.nav-fd { padding-bottom: 0 !important; text-align: center; }
.nav-fd small {
  font-size: 10px;
  margin-top: -2px;
  transform: rotate(-2deg);
}
.menu-fd small {
  font-size: clamp(13px, 3vw, 16px);
  margin-top: 2px;
  transform: rotate(-1.5deg);
}

.nav-desktop a::after,
.nav-desktop button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px; /* gemeinsame Linie auf Hoehe von 'weddings' */
  height: 2px;
  background: var(--clay);
  transition: right 0.3s var(--ease);
}

@media (hover: hover) {
  .nav-desktop a:hover::after,
  .nav-desktop button:hover::after { right: 0; }
}

.nav-desktop a[aria-current="page"]::after,
.nav-desktop button[aria-expanded="true"]::after { right: 0; }

/* --- Sprachwahl (EN / DE / NL) --- */

.lang-pick {
  display: flex;
  align-items: center;
}
.nav-desktop .lang-pick { margin-left: clamp(0px, 0.8vw, 12px); }
.lang-pick button {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 4px 8px;
  color: var(--ink-soft);
  opacity: 0.66;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.lang-pick button::after { content: none; } /* kein Nav-Hover-Strich */
.lang-pick button + button { border-left: 1px solid var(--line); }
.lang-pick button:hover { opacity: 1; }
.lang-pick button[aria-current="true"] {
  color: var(--clay);
  opacity: 1;
  font-weight: 600;
}

.menu-overlay .lang-pick { margin-top: 36px; }
.menu-overlay .lang-pick button {
  font-size: 15px;
  padding: 6px 14px;
  color: var(--cream);
  opacity: 0.55;
}
.menu-overlay .lang-pick button + button { border-left: 1px solid var(--line-light); }
.menu-overlay .lang-pick button[aria-current="true"] {
  color: var(--blush);
  opacity: 1;
}
.menu-overlay .lang-pick button:first-child { padding-left: 0; }

.nav-services-btn .arrow {
  display: inline-block;
  margin-left: 7px;
  font-size: 11px;
  transition: transform 0.3s var(--ease);
}
.nav-services-btn[aria-expanded="true"] .arrow { transform: rotate(180deg); }

/* --- desktop services panel --- */

.services-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 85;
  padding: calc(76px + 24px) var(--pad) 40px;
  background: var(--cream);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.services-panel.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.services-panel-grid {
  /* 6 Halbspalten, jeder Link spannt 2 — ergibt exakt die alte
     Dreierreihe, aber die untere Zweierreihe laesst sich zentrieren */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px clamp(24px, 4vw, 64px);
  max-width: 1180px;
  margin-inline: auto;
}
.services-panel-link { grid-column: span 2; }
.services-panel-link:nth-child(4) { grid-column: 2 / span 2; }

.services-panel-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--condensed);
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 21px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease);
}
.services-panel-link .n {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--clay);
}
@media (hover: hover) {
  .services-panel-link:hover { color: var(--clay); }
}

/* --- mobile toggle + overlay --- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 4px;
}
.nav-toggle .bars {
  display: inline-block;
  width: 22px;
  height: 12px;
  position: relative;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after { bottom: 0; }
body.menu-open .nav-toggle .bars::before { transform: translateY(5px) rotate(45deg); }
body.menu-open .nav-toggle .bars::after { transform: translateY(-5px) rotate(-45deg); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--cream);
  overflow-y: auto;
  padding: 110px var(--pad) 48px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s var(--ease);
}

body.menu-open .site-header {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--cream);
}
body.menu-open .brand small { color: var(--blush); }

.menu-overlay nav { display: grid; gap: 4px; max-width: 640px; }

.menu-main-link {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: clamp(34px, 9vw, 56px);
  text-transform: uppercase;
  line-height: 1.05;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-light);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.menu-group-label {
  margin: 34px 0 6px;
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blush);
}

.menu-sub-link {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: clamp(22px, 6vw, 32px);
  text-transform: uppercase;
  line-height: 1.15;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-light);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.menu-sub-link .n {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--blush);
}

.menu-overlay .menu-contact {
  margin-top: 40px;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 17px;
  color: var(--blush);
}
.menu-overlay .menu-contact a {
  color: var(--cream);
  border-bottom: 1px solid var(--line-light);
  padding-bottom: 2px;
}

@media (min-width: 900px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .menu-overlay { display: none; }
}
@media (max-width: 899.98px) {
  .services-panel { display: none; }
}

/* ============================================================
   SHARED LAYOUT
   ============================================================ */

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

main { display: block; }

/* one rhythm for the whole page: every section boundary gets the same gap.
   Component rules may override deliberately (.booking + .pagenav). */
main > * + * { margin-top: var(--space-section); }

.frame {
  overflow: hidden;
  background: color-mix(in oklab, var(--ink) 8%, var(--paper));
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

.caption {
  margin-top: 10px;
  font-family: var(--condensed);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- curve section transitions (the approved multi-bump paths) --- */
.has-curve { position: relative; }
.curve {
  position: absolute;
  inset: auto 0 100% 0;
  margin-bottom: -1px;
  display: block;
  width: 100%;
  height: var(--curve-h);
  pointer-events: none;
}
/* Wellen-Unterkante: gleiche Kurve, 180 Grad gedreht, haengt unter der Sektion */
.curve-out {
  inset: 100% 0 auto 0;
  margin-top: -1px;
  margin-bottom: 0;
  transform: scale(-1, -1);
}
/* die Folgesektion macht der Welle Platz, wie beim Footer
   (main-Prefix: muss .about-teaser { margin-top } schlagen) */
main > .services-index + * { margin-top: calc(var(--space-section) + var(--curve-h)); }

/* --- snapshot --- */
.snap {
  --r: -2deg;
  position: relative;
  background: var(--cream);
  padding: clamp(8px, 1.1vw, 13px);
  padding-bottom: clamp(10px, 1.4vw, 16px);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--ink) 14%, transparent),
    0 18px 34px -26px color-mix(in oklab, var(--ink) 60%, transparent);
  transform: rotate(var(--r));
}
.snap .frame { background: color-mix(in oklab, var(--ink) 6%, var(--cream)); }
.snap figcaption {
  padding: 10px 4px 2px;
  font-family: var(--hand);
  font-size: clamp(12px, 1.5vw, 15px);
  color: var(--ink-soft);
}

/* --- choreographed word reveal --- */
.js [data-words] .w {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.js [data-words] .wi {
  display: inline-block;
  transform: translateY(118%);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-words].is-in .wi,
.js .is-in [data-words] .wi { transform: none; }

/* reveal-on-scroll (JS-gated so no-JS users see everything) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.js [data-reveal][data-words] {
  transform: none;
  opacity: 1;
}

/* ============================================================
   HOME — HERO
   ============================================================ */

.hero {
  min-height: min(100svh, 860px);
  position: relative;
  display: grid;
  align-content: end;
  padding: 110px var(--pad) 0;
  overflow: clip;
}

.hero-inner {
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
  position: relative;
}

.hero-mark { position: relative; z-index: 1; margin: 0; }

.hero-mark .thisis {
  position: relative;
  font-family: var(--hand);
  font-size: clamp(20px, 3.6vw, 40px);
  color: var(--clay);
  display: inline-block;
  margin: 0 0 -0.5em 0.3em;
  transform: rotate(-3deg);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.7s ease 0.75s;
}
.hero-mark .thisis svg {
  position: absolute;
  inset: -38% -14%;
  width: 128%;
  height: 176%;
  overflow: visible;
}
.hero-mark .thisis svg path {
  fill: none;
  stroke: var(--clay);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease) 1s;
}
.ready .hero-mark .thisis { opacity: 1; }
.ready .hero-mark .thisis svg path { stroke-dashoffset: 0; }
html:not(.js) .hero-mark .thisis { opacity: 1; }
html:not(.js) .hero-mark .thisis svg path { stroke-dashoffset: 0; }

.hero-mark .name {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: clamp(104px, 29vw, 25rem);
  line-height: 0.84;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  display: block;
  overflow: clip;
  padding-bottom: 0.04em;
}
.hero-mark .ltr {
  display: inline-block;
}
.js .hero-mark .ltr {
  transform: translateY(112%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 75ms + 120ms);
}
.js .ready .hero-mark .ltr { transform: none; }

.hero-photo {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: clamp(120px, 22vh, 210px);
  width: min(34vw, 420px);
  --r: 2.4deg;
}
.hero-photo .frame { aspect-ratio: 3 / 4; }
.js .hero-photo {
  opacity: 0;
  transform: rotate(calc(var(--r) + 3deg)) translateY(34px);
  transition: opacity 0.9s ease 0.5s, transform 0.9s var(--ease) 0.5s;
}
.js .ready .hero-photo {
  opacity: 1;
  transform: rotate(var(--r));
}

.hero-note {
  position: absolute;
  z-index: 2;
  right: calc(min(34vw, 420px) + clamp(24px, 4vw, 56px));
  bottom: clamp(150px, 26vh, 260px);
  text-align: right;
}
.hero-note .arrow { margin-left: auto; transform: scaleX(-1); }

.hero-under {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-mid);
  align-items: end;
  padding-block: clamp(18px, 3vh, 28px) 0; /* unten regelt der Sektionsabstand */
  margin-top: clamp(18px, 3vh, 30px);
  background: var(--paper);
}


.hero-intro { max-width: 46ch; }

@media (min-width: 900px) {
  /* Intro links unter dem Namen: rechts steht das Foto ohnehin bis zur
     Linie, und die naechste Sektion setzt links an — so entsteht unter
     der Linie kein leeres Halbfeld. */
  .hero-under { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-intro { grid-column: 1; }
}

/* Foto steht erst neben dem Namen, wenn wirklich Platz ist. Darunter
   stapelt es — vorher lag die Grenze bei 900px, und zwischen 900 und
   1200 schob sich das Bild ueber das T und die Handschrift-Notiz. */
@media (max-width: 1199.98px) {
  .hero { align-content: start; }
  .hero-photo {
    position: static;
    width: min(72%, 340px);
    margin: -4vw 4vw 26px auto;
  }
  .js .hero-photo { transition-delay: 0.35s, 0.35s; }
  .hero-note {
    position: relative; /* ueber der Fotokante, wie eine Anmerkung auf dem Bild */
    inset: auto; /* absolute Offsets der Basisregel neutralisieren */
    z-index: 2;
    text-align: left;
    margin: 10px 0 12px;
  }
  .hero-note .arrow { display: none; }
}

@media (min-width: 1200px) {
  /* Name so gross, dass er vollstaendig links vom Foto steht.
     29vw lief zwangslaeufig darunter. */
  .hero-mark .name { font-size: clamp(180px, 17vw, 15rem); }

  /* Name mittig neben dem Foto statt unten gestapelt — sonst klafft
     ueber dem Namen ein leeres Feld */
  .hero { align-content: stretch; }
  .hero-inner { display: grid; grid-template-rows: 1fr auto; }
  .hero-mark { align-self: center; }

  /* Notiz in die Luecke zwischen Name und Foto, leicht ueber dem Namen */
  .hero-note {
    top: calc(50% - 150px);
    bottom: auto;
  }
}

/* ============================================================
   HOME — MANIFESTO
   ============================================================ */

.manifesto {
  margin-top: var(--space-section);
  position: relative;
  z-index: 2; /* photo-stack overlaps the next section's curve */
}

.manifesto-quote {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(2rem, 1.2rem + 3.8vw, 4.2rem);
  line-height: 1.16;
  max-width: 21ch;
}
.manifesto-quote .caps {
  font-family: var(--condensed);
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.manifesto-body {
  margin-top: var(--space-loose);
  display: grid;
  gap: var(--space-mid);
}
@media (min-width: 900px) {
  .manifesto-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 6vw, 96px);
  }
  .manifesto-body .prose { margin-top: 3rem; }
}

/* overlapping photo pair */
.photo-stack {
  position: relative;
  margin-top: var(--space-loose);
  margin-bottom: clamp(48px, 6vw, 80px); /* room for the overlapping small snap */
}
.photo-stack .big {
  width: min(100%, 820px);
  --r: -1.2deg;
}
.photo-stack .big .frame { aspect-ratio: 3 / 2; max-height: 560px; }
.photo-stack .small {
  position: absolute;
  right: clamp(0px, 4vw, 60px);
  bottom: clamp(-56px, -4vw, -30px);
  width: clamp(150px, 26vw, 300px);
  --r: 3.2deg;
  z-index: 2;
}
.photo-stack .small .frame { aspect-ratio: 3 / 4; }
@media (max-width: 899.98px) {
  /* kein Platz zum seitlichen Versetzen -> das kleine Bild rutscht nach unten,
     sodass es die grosse Aufnahme nur noch leicht ueberlappt */
  .photo-stack { --sw: min(44vw, 200px); margin-bottom: calc(var(--sw) * 1.42 + 16px); }
  .photo-stack .small {
    right: 6px;
    bottom: calc(55px - var(--sw) * 1.42);
    width: var(--sw);
  }
}

/* ============================================================
   HOME — SERVICES INDEX
   ============================================================ */

.services-index {
  margin-top: var(--space-section);
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--space-loose);
}
.services-index .curve { color: var(--ink); }
.services-index .kicker { color: var(--blush); }

.services-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: var(--space-mid);
}
.services-head h2 {
  font-size: clamp(44px, 8vw, 104px);
}
.services-head h2 .serif-accent { color: var(--blush); }
.services-head .note {
  font-family: var(--hand);
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--blush);
  transform: rotate(-2deg);
}

.index-list { position: relative; }

.index-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "img title" "img meta";
  align-items: center;
  column-gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(14px, 2.4vw, 24px);
  border-top: 1px solid var(--line-light);
  position: relative;
}
.index-row:last-child { border-bottom: 1px solid var(--line-light); }

.index-snap {
  grid-area: img;
  width: clamp(54px, 7vw, 86px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 3px solid var(--cream);
  transform: rotate(var(--r, -3deg));
  box-shadow: 0 8px 18px -10px oklch(0% 0 0 / 0.55);
}
.index-row:nth-child(even) .index-snap { --r: 2.4deg; }


.index-row .t {
  grid-area: title;
  font-family: var(--condensed);
  font-weight: 600;
  font-size: clamp(36px, 7.2vw, 84px);
  line-height: 0.96;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
}
.index-row .t .fd {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.index-row .d {
  grid-area: meta;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
  color: color-mix(in oklab, var(--cream) 62%, var(--ink));
  margin-top: 4px;
}

@media (hover: hover) and (min-width: 900px) {
  .index-row:hover .t {
    transform: translateX(16px);
    color: var(--blush);
    filter: url(#warp); /* feTurbulence-Displacement: Buchstaben wellen sich wie verzogener Druck */
  }
}

/* programme style at desktop: title left, blurb right on the same baseline */
@media (min-width: 1100px) {
  .index-row {
    grid-template-areas: "img title meta";
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 36ch);
    align-items: baseline;
  }
  .index-row .d { text-align: left; margin-top: 0; }
}


/* ============================================================
   HOME — NAMES POSTER
   ============================================================ */

.names {
  margin-top: var(--space-section);
}

.names-head { max-width: var(--measure); }

.poster {
  margin-top: clamp(1.5rem, 2.5vw, 2.75rem);
  line-height: 1.12;
  max-width: 100%;
}
.poster .l {
  display: block;
  overflow-wrap: break-word; /* nur Notbremse — Namen brechen an Leerzeichen */
}
.poster .solid {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: clamp(26px, 4.2vw, 58px);
  text-transform: uppercase;
  letter-spacing: 0;
}
.poster .script {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(26px, 4vw, 56px);
  color: var(--clay);
  margin-block: -0.06em;
}
.poster .outline {
  font-family: var(--condensed);
  font-weight: 700;
  font-size: clamp(26px, 4.2vw, 58px);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ink);
}
@supports not (-webkit-text-stroke: 2px black) {
  .poster .outline { color: var(--ink-soft); }
}
.poster .ind { margin-left: clamp(20px, 6vw, 110px); }
.poster .ind2 { margin-left: clamp(10px, 3vw, 54px); }
.poster .etc {
  font-family: var(--hand);
  font-size: clamp(14px, 2vw, 19px);
  color: var(--ink-soft);
  display: inline-block;
  transform: rotate(-2.5deg);
  margin: 14px 0 0 6px;
}
.poster .star {
  color: var(--clay);
  font-size: 0.35em;
  vertical-align: 0.9em;
  padding-inline: 0.3em;
  -webkit-text-stroke: 0;
}

/* Lineup-Streuung auf ALLEN Breiten: die Zeilen springen wie auf einem
   Festivalplakat ueber die volle Spaltenbreite (rechte Anker inklusive).
   Kindzaehlung inkl. der Sterne: 1 RW, 2 star, 3 Anastacia, 4 Tokio,
   5 star, 6 Ehrlich, 7 Mercedes, 8 star, 9 Tommy, 10 Mandana, 11 star,
   12 Cleverfit, 13 Moovv, 14 etc */
.poster .l { width: fit-content; }
.poster .l:nth-child(1)  { margin-left: 0; }
.poster .l:nth-child(3)  { margin-left: auto; margin-right: 10%; }
.poster .l:nth-child(4)  { margin-left: 16%; }
.poster .l:nth-child(6)  { margin-left: auto; margin-right: 0; }
.poster .l:nth-child(7)  { margin-left: 7%; }
.poster .l:nth-child(9)  { margin-left: auto; margin-right: 14%; }
.poster .l:nth-child(10) { margin-left: 0; }
.poster .l:nth-child(12) { margin-left: auto; margin-right: 5%; }
.poster .l:nth-child(13) { margin-left: 30%; }
.poster .star:nth-child(2)  { margin-left: 34%; }
.poster .star:nth-child(5)  { margin-left: 8%; }
.poster .star:nth-child(8)  { margin-left: 44%; }
.poster .star:nth-child(11) { margin-left: 30%; }
.poster .etc { display: block; width: fit-content; margin-left: auto; margin-right: 0; }

@media (min-width: 900px) {
  .poster { line-height: 1.05; }
  .poster .solid,
  .poster .outline { font-size: clamp(40px, 4.6vw, 74px); }
  .poster .script { font-size: clamp(38px, 4.2vw, 66px); }
}

/* mobil: Luft zwischen den Namen — steht bewusst NACH .script/.ind,
   sonst gewinnt deren margin-block */
@media (max-width: 899.98px) {
  .poster .l { margin-top: 12px; }
  .poster .script { margin-block: 12px 0; }
  .poster .l:first-child { margin-top: 0; }
  .poster .etc { margin-top: 16px; }
}

/* ============================================================
   HOME — ABOUT TEASER
   ============================================================ */

.about-teaser {
  margin-top: var(--space-section);
  display: grid;
  gap: var(--space-loose);
  align-items: center;
}
@media (min-width: 900px) {
  .about-teaser {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 7vw, 110px);
  }
}

.about-teaser .snap {
  width: min(100%, 440px);
  --r: -2.2deg;
}
.about-teaser .snap .frame { aspect-ratio: 3 / 4; max-height: 600px; }

.about-teaser h2 {
  font-size: clamp(40px, 7vw, 88px);
  margin-bottom: var(--space-mid);
}

/* arrow link */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-mid);
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  min-height: 44px;
  position: relative;
}
.arrow-link .line {
  display: inline-block;
  width: 44px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.3s var(--ease);
}
.arrow-link .line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3.5px;
  border: solid currentColor;
  border-width: 1px 1px 0 0;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
}
@media (hover: hover) {
  .arrow-link:hover .line { width: 64px; }
}

/* ============================================================
   FOOTER / CONTACT
   ============================================================ */

.site-footer {
  margin-top: calc(var(--space-section) + var(--curve-h) * 0.5); /* Welle braucht eigenen Raum */
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-loose) 0 40px;
}
.site-footer .curve { color: var(--ink); }

.footer-eyebrow { color: var(--blush); }

.footer-big {
  margin-top: var(--space-mid);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(2rem, 1.2rem + 4.2vw, 4.6rem);
  line-height: 1.12;
  max-width: 18ch;
}
.footer-big .caps {
  font-family: var(--condensed);
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
}

.footer-mail {
  display: inline-block;
  margin-top: var(--space-loose);
  font-family: var(--condensed);
  font-weight: 600;
  font-size: clamp(20px, 4.4vw, 44px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--clay);
  padding-bottom: 6px;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease);
}
@media (hover: hover) {
  .footer-mail:hover { color: var(--blush); }
}

.footer-meta {
  margin-top: var(--space-loose);
  padding-top: var(--space-mid);
  border-top: 1px solid var(--line-light);
  display: grid;
  gap: var(--space-mid);
  font-size: 0.95rem;
  color: color-mix(in oklab, var(--cream) 72%, var(--ink));
}
.footer-meta a {
  border-bottom: 1px solid var(--line-light);
  padding-bottom: 1px;
  transition: color 0.25s var(--ease);
}
@media (hover: hover) {
  .footer-meta a:hover { color: var(--blush); }
}
.footer-meta .col .h {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 8px;
}
@media (min-width: 720px) {
  .footer-meta { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 719.98px) {
  .footer-meta {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
    font-size: 0.85rem;
  }
  .footer-meta .col .h { margin-bottom: 5px; }
  .footer-meta .col:last-child { grid-column: 1 / -1; text-align: center; } /* BASED mittig */
}

.footer-sign {
  margin-top: var(--space-loose);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.footer-sign .hand {
  font-size: clamp(22px, 4vw, 34px);
  color: var(--blush);
  transform: rotate(-2deg);
}
.footer-sign .tiny {
  font-family: var(--condensed);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 55%, var(--ink));
}

/* ============================================================
   SUBPAGES — shared page scaffold
   ============================================================ */

.page-head {
  padding-top: clamp(120px, 18vh, 180px);
  position: relative;
}
@media (max-width: 899.98px) {
  .page-head { padding-top: 92px; } /* Header ist fixed (~66px) + Luft */
}

.page-head .crumb {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.page-head .crumb .n { color: var(--clay); }
.page-head .crumb a { border-bottom: 1px solid var(--line); padding-bottom: 1px; }
@media (hover: hover) {
  .page-head .crumb a:hover { color: var(--clay); }
}

.page-title {
  margin-top: 18px;
  font-size: clamp(58px, 13.5vw, 176px);
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
}

.page-title .serif-accent { font-weight: 400; }

.page-lede {
  margin-top: var(--space-loose);
  display: grid;
  gap: var(--space-mid);
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .page-lede {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
}

/* ruled list (repertoire / fields) */
.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--condensed);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  align-self: start;
}
.rule-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.rule-list li::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  background: var(--clay);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12,2.8 C12.5,8 11.6,16 12.2,21.2'/%3E%3Cpath d='M3.6,7.6 C9,10.2 15,13.8 20.6,16.6'/%3E%3Cpath d='M20.2,7 C15,10 8.8,13.6 3.4,16.9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12,2.8 C12.5,8 11.6,16 12.2,21.2'/%3E%3Cpath d='M3.6,7.6 C9,10.2 15,13.8 20.6,16.6'/%3E%3Cpath d='M20.2,7 C15,10 8.8,13.6 3.4,16.9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.rule-list-mobile { display: none; }
@media (max-width: 899.98px) {
  .page-lede .lede-aside { display: none; }
  .rule-list-mobile { display: block; }
  .rule-list { border-top: 0; }
  .rule-list li {
    display: inline;
    padding: 0;
    border-bottom: 0;
  }
  .rule-list li::after { content: " \2733  "; font-size: 10px; }
  .rule-list li:last-child::after { content: none; }
}

.rule-list-title {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 10px;
}

/* editorial split: text + taped image */
.split {
  margin-top: var(--space-section);
  display: grid;
  gap: var(--space-loose);
  align-items: start;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 7vw, 110px);
  }
  .split.flip .split-media { order: -1; }
  /* lead/media/rest: auf Desktop bleibt der Text eine Spalte,
     auf Mobile fliesst das Bild zwischen die Absaetze */
  .split.has-lead {
    grid-template-areas: "lead media" "rest media";
    grid-template-rows: auto 1fr; /* Ueberschusshoehe in Row 2, nicht zwischen die Absaetze */
    row-gap: var(--space-mid);
  }
  .split.has-lead .split-lead { grid-area: lead; }
  .split.has-lead .split-rest { grid-area: rest; }
  .split.has-lead .split-media { grid-area: media; }
}

.split-media { --r: 1.8deg; }
.split.flip .split-media { --r: -2.2deg; }
.split-media .frame { aspect-ratio: 3 / 4; max-height: 640px; }
.split-media.landscape .frame { aspect-ratio: 3 / 2; max-height: 560px; }
.split-media.offset { margin-top: clamp(0px, 5vw, 64px); }
/* Gegenrichtung: Bild nach OBEN ziehen, wo der Text kurz ist und
   sonst zu viel Leere bleibt (Wunsch aus den Notizen) */
@media (min-width: 900px) {
  .split-media.lift { margin-top: clamp(-48px, -3vw, -16px); }
  .split-media.lift-more { margin-top: clamp(-130px, -8vw, -60px); }
}

.duo {
  margin-top: var(--space-section);
  display: grid;
  gap: clamp(28px, 5vw, 56px);
}
@media (min-width: 720px) {
  .duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
  .duo > :last-child { margin-top: clamp(32px, 8vw, 110px); }
  /* duo-up: ganze Reihe hoch, das linke Bild deutlich weiter —
     fuellt die leere Spalte unter kurzen Split-Texten */
  .duo.duo-up { margin-top: calc(var(--space-section) - clamp(140px, 12.5vw, 250px)); }
  .duo.duo-up > :first-child { margin-top: clamp(-80px, -3.5vw, -40px); }
  .duo.duo-up > :last-child { margin-top: clamp(32px, 5vw, 102px); } /* Abstand rechts = Abstand links */
}
.duo .snap:first-child { --r: -1.6deg; }
.duo .snap:last-child { --r: 2.6deg; }
.duo .frame {
  aspect-ratio: 3 / 4;
  /* width explizit: verhindert den Transfer-Shrink, wenn die
     Hoehenbremse greift — sonst schrumpft der Rahmen und die
     Karte bekommt einen Leerrand. Stattdessen sanft croppen. */
  width: 100%;
  max-height: 640px;
}
/* Querformat-Fotos im Duo: Rahmen folgt dem Bildformat, sonst
   schrumpft er auf Transfer-Breite und die Karte bekommt Leerrand */
.duo .snap.landscape .frame { aspect-ratio: 4 / 3; max-height: none; }

/* pull-quote */
.pull {
  margin: var(--space-section) auto 0;
  max-width: 26ch;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3.2rem);
  line-height: 1.2;
  text-align: center;
  position: relative;
  padding-top: 30px;
}
.pull::before {
  /* handgezeichneter Asterisk statt Unicode-Stern — als Maske,
     damit er die Akzentfarbe mitmacht */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%) rotate(-8deg);
  background: var(--clay);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12,2.8 C12.5,8 11.6,16 12.2,21.2'/%3E%3Cpath d='M3.6,7.6 C9,10.2 15,13.8 20.6,16.6'/%3E%3Cpath d='M20.2,7 C15,10 8.8,13.6 3.4,16.9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12,2.8 C12.5,8 11.6,16 12.2,21.2'/%3E%3Cpath d='M3.6,7.6 C9,10.2 15,13.8 20.6,16.6'/%3E%3Cpath d='M20.2,7 C15,10 8.8,13.6 3.4,16.9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* body sections on subpages */
.page-body {
  margin-top: var(--space-section);
}
.page-body .prose { margin-inline: auto; }
@media (min-width: 900px) {
  .page-body .prose { margin-inline: 0 auto; padding-left: clamp(0px, 10vw, 160px); }
}

/* booking CTA strip on service pages */
.booking {
  margin-top: var(--space-section);
  width: min(100% - 2 * var(--pad), 1052px); /* line ends with the content, matches .index-row / .footer-meta */
  margin-inline: auto;
  border-top: 1px solid var(--line);
  padding-block: var(--space-loose);
}
.booking .wrap { padding-inline: 0; text-align: center; }
.booking .kicker { display: block; }
.booking-mail {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--condensed);
  font-weight: 600;
  font-size: clamp(22px, 5.2vw, 54px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-bottom: 2px solid var(--clay);
  padding-bottom: 5px;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease);
}
@media (hover: hover) {
  .booking-mail:hover { color: var(--clay); }
}
.booking .aside {
  margin-top: 16px;
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--ink-soft);
}

/* prev / next pagination */
.pagenav {
  display: grid;
  border-top: 1px solid var(--line);
  margin-top: var(--space-section);
  width: min(100% - 2 * var(--pad), 1052px); /* gleiche Spalte wie .booking */
  margin-inline: auto;
}
.pagenav a {
  padding: clamp(24px, 4vw, 44px) 0;
  display: grid;
  gap: 6px;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
@media (min-width: 720px) {
  .pagenav a:first-child { padding-right: clamp(16px, 2vw, 28px); }
  .pagenav a + a { padding-left: clamp(16px, 2vw, 28px); }
}
.pagenav .label {
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay);
}
.pagenav .title {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: clamp(26px, 5.5vw, 54px);
  text-transform: uppercase;
  line-height: 1;
}
.pagenav a + a { border-top: 1px solid var(--line); }
@media (min-width: 720px) {
  .pagenav { grid-template-columns: 1fr 1fr; }
  .pagenav a + a { border-top: 0; border-left: 1px solid var(--line); text-align: right; justify-items: end; }
}
@media (hover: hover) {
  .pagenav a:hover { background: var(--ink); color: var(--cream); }
  .pagenav a:hover .label { color: var(--blush); }
}
/* pagenav sits directly on booking + footer — kill double gaps/rules */
.pagenav + .site-footer,
.booking + .pagenav { margin-top: 0; border-top: 0; }
.pagenav { margin-bottom: 0; }
.pagenav + .site-footer .curve,
.booking + .site-footer .curve { display: none; }

/* "coming soon" slot (choreo reel / first dance film) */
.soon {
  margin-top: var(--space-section);
  position: relative;
}
.soon .snap { --r: -1deg; }
.soon .frame {
  aspect-ratio: 16 / 9;
  max-height: 600px;
  position: relative;
}
.soon .frame img { filter: saturate(0.85); }
.soon .soon-tag {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  background: color-mix(in oklab, var(--ink) 38%, transparent);
  color: var(--cream);
}
.soon .soon-tag .big {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: clamp(26px, 5vw, 52px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.soon .soon-tag .hand {
  font-size: clamp(15px, 2.4vw, 22px);
  color: var(--blush);
  transform: rotate(-2deg);
}

/* ============================================================
   ABOUT page specifics
   ============================================================ */

.about-facts {
  display: grid;
  gap: 2px;
  font-family: var(--condensed);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  align-self: start;
}
.about-facts div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.about-facts dt { color: var(--clay); font-weight: 500; }
.about-facts dd { margin: 0; text-align: right; }

/* ============================================================
   THE FIRST DANCE theme
   ============================================================ */

body.theme-fd {
  background: var(--blush-paper);
}
body.theme-fd .site-header.is-solid {
  background: color-mix(in oklab, var(--blush-paper) 94%, transparent);
}
body.theme-fd .page-title {
  font-family: var(--serif-display);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  font-size: clamp(52px, 11.5vw, 150px);
}
body.theme-fd .byline {
  margin-top: 10px;
  font-family: var(--hand);
  font-size: clamp(16px, 2.6vw, 24px);
  color: var(--clay);
}
body.theme-fd .snap { background: var(--cream); }

/* ============================================================
   MOTION DISCIPLINE
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-words] .wi { transform: none; }
  .js .hero-mark .ltr { transform: none; }
  .hero-mark .thisis { opacity: 1; }
  .hero-mark .thisis svg path { stroke-dashoffset: 0; }
  .scrib path { stroke-dashoffset: 0; }
  .js .hero-photo { opacity: 1; transform: none; }
  .index-preview { display: none !important; }
}

/* ============================================================
   THE FIRST DANCE — Film mit Ton
   Doc: "Das Video bitte mit Musik wenn man auf den TheFirstDance
   drückt". Browser blockieren Autoplay mit Ton, deshalb Poster +
   expliziter Klick — der zählt als User-Geste und erlaubt Ton.
   ============================================================ */

.fd-play {
  display: block;
  position: relative;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.fd-play img,
.fd-film video {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.fd-play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--ink) 22%, transparent);
  transition: background 240ms var(--ease);
}

.fd-play-btn {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: clamp(64px, 9vw, 96px);
  aspect-ratio: 1;
  border: 1px solid var(--cream);
  border-radius: 50%;
  color: var(--cream);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  padding-inline-start: 0.2em;
  transition: transform 260ms var(--ease);
}

.fd-play-label {
  position: absolute;
  inset-block-end: clamp(14px, 2.4vw, 28px);
  inset-inline-start: clamp(14px, 2.4vw, 28px);
  z-index: 1;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--cream);
}

@media (hover: hover) {
  .fd-play:hover::after { background: color-mix(in oklab, var(--ink) 8%, transparent); }
  .fd-play:hover .fd-play-btn { transform: scale(1.08); }
}

.fd-play:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 4px;
}

/* Film noch nicht geliefert: Button trägt kein data-src */
.fd-play[data-src=""] { cursor: default; }
.fd-play[data-src=""] .fd-play-btn { opacity: 0.45; }
.fd-play[data-src=""] .fd-play-label::after {
  content: " — coming soon";
  font-family: var(--hand);
  text-transform: none;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fd-play::after,
  .fd-play-btn { transition: none; }
}

/* ============================================================
   TEXTBLOCK MIT MARGINALIE
   Loest zwei Punkte auf einmal: die rechte Haelfte war leer,
   und lange Absaetze wirkten abgeladen. Zwischentitel geben
   Struktur, die Marginalie gibt der rechten Spalte Arbeit.
   ============================================================ */

.textblock {
  margin-top: var(--space-section);
  display: grid;
  gap: var(--space-mid);
}
@media (min-width: 900px) {
  .textblock {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.55fr);
    /* Zeilenabstand klein halten — der grosse Wert ist NUR Spaltenabstand,
       sonst klafft zwischen Ueberschrift und Text ein Loch */
    gap: var(--space-mid) clamp(40px, 6vw, 110px);
    align-items: start;
  }
}

.textblock > h2 {
  grid-column: 1;
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-mid);
}

.textblock .prose { grid-column: 1; }

.marg {
  align-self: start;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-family: var(--condensed);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .marg { margin-top: 0.55rem; }
}
.marg.marg-plain { border-top: 0; padding-top: 0; }
.marg dl { display: grid; gap: 2px; margin: 0; }
.marg .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.marg dt { color: var(--clay); font-weight: 500; flex: 0 0 auto; }
.marg dd { margin: 0; text-align: right; }
.marg .note-hand { margin-top: 14px; text-transform: none; letter-spacing: 0; }

/* Namensliste in der Marginalie (Marken, Artists) */
.marg .names-col { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; }
.marg .names-col span { padding-block: 2px; border-bottom: 1px solid var(--line); }

/* ============================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   ============================================================ */

.legal { margin-top: var(--space-loose); max-width: 70ch; }
.legal h2 {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: var(--space-loose);
  margin-bottom: 0.6em;
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: 1em; }
.legal .todo {
  display: inline-block;
  background: color-mix(in oklab, var(--clay) 14%, transparent);
  border-bottom: 1px solid var(--clay);
  padding: 1px 6px;
  font-family: var(--condensed);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-deep);
}

/* ============================================================
   FOOTER — Korrektur
   Vorher stand alles untereinander linksbündig, die rechte Hälfte
   blieb leer und die Abstände dazwischen wuchsen mit dem Schirm.
   Jetzt: Satz links, Adresse rechts auf gleicher Höhe, Meta darunter
   über die volle Breite.
   ============================================================ */

@media (min-width: 900px) {
  .site-footer .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas:
      "eyebrow mail"
      "big     mail"
      "meta    meta"
      "sign    sign";
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .site-footer .footer-eyebrow { grid-area: eyebrow; }
  .site-footer .footer-big     { grid-area: big; max-width: 16ch; }
  .site-footer .footer-mail    { grid-area: mail; align-self: end; margin-top: 0; }
  .site-footer .footer-meta    { grid-area: meta; }
  .site-footer .footer-sign    { grid-area: sign; }

  /* die Adresse sitzt auf der Grundlinie des Satzes, nicht darunter */
  .site-footer .footer-mail { justify-self: start; margin-bottom: 0.4rem; }
}

/* Abstände im Footer waren an --space-loose gehängt und liefen auf
   großen Schirmen auseinander */
.footer-meta { margin-top: clamp(2.5rem, 4vw, 3.75rem); }
.footer-sign { margin-top: clamp(2rem, 3vw, 3rem); }
.footer-mail { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.footer-big  { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); }
.footer-mail { font-size: clamp(19px, 2.6vw, 34px); }

/* First Dance: the supplied film opens the wedding page. */
.fd-opening {
  width: 100%;
  background: #171513;
}
.fd-opening .fd-play img,
.fd-opening video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 78svh;
  object-fit: contain;
}
.fd-opening { margin-top: 90px; }
.fd-opening .fd-play img { object-fit: cover; }
.fd-opening + .page-head { padding-top: clamp(40px, 7vw, 90px); }
@media (max-width: 899.98px) {
  .fd-opening { margin-top: 76px; }
}