/* Schrift liegt im Ordner fonts/ auf dem eigenen Webspace, ohne Verbindung zu Google (DSGVO) */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/montserrat-200.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800.woff2") format("woff2"); }

/* Layout: eine Marke, drei Stimmungen. Tiefschwarz = Start/Business, Waldgrün = persönlich, Off-White = Hochzeit.
   Farben wechseln pro Seite und pro Abschnitt über die Klassen .m-black / .m-green / .m-light.
   Bewusst eigenes Farbschema (CI), unabhängig vom Hell/Dunkel-Modus des Betrachters. */
:root {
  --tiefschwarz: #121212;
  --waldgruen: #1F2D29;
  --offwhite: #F2EFE9;
  --kupfer: #DB8C52;
  --kupfer-dunkel: #C8733B;
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --bg: var(--tiefschwarz);
  --fg: var(--offwhite);
  --muted: rgba(242, 239, 233, .64);
  --line: rgba(242, 239, 233, .14);
  --panel: var(--tiefschwarz);
  --accent: var(--kupfer);
  color-scheme: dark;
}
.m-black { --bg: var(--tiefschwarz); --fg: var(--offwhite); --muted: rgba(242,239,233,.64); --line: rgba(242,239,233,.14); --panel: var(--tiefschwarz); --accent: var(--kupfer); color-scheme: dark; }
.m-green { --bg: var(--waldgruen); --fg: var(--offwhite); --muted: rgba(242,239,233,.68); --line: rgba(242,239,233,.16); --panel: var(--tiefschwarz); --accent: var(--kupfer); color-scheme: dark; }
.m-light { --bg: var(--offwhite); --fg: var(--waldgruen); --muted: rgba(31,45,41,.68); --line: rgba(31,45,41,.16); --panel: rgba(31,45,41,.07); --accent: var(--kupfer-dunkel); color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}
/* Sicherheitsnetz: die Seite lässt sich nie seitlich verschieben, auch wenn ein Element minimal zu breit wird.
   „clip“ statt „hidden“, damit die klebenden Karten am Handy (position: sticky) weiter funktionieren */
html, body { overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.band { background: var(--bg); color: var(--fg); }
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) {
  .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}
.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { border-top: 1px solid var(--line); }
.band.section + .band.section:not(.same) { border-top: 0; }

/* Typografie */
.label { font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; }
.display { font-weight: 200; font-size: clamp(2.6rem, 5.5vw + 1rem, 5rem); line-height: 1.05; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.display b, .h2 b { font-weight: 800; }
.h2 { font-weight: 200; font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem); line-height: 1.12; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.h3 { font-weight: 800; font-size: 1.3rem; line-height: 1.25; margin: 0; }
.lead { font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem); color: var(--muted); max-width: 38em; margin: 0; }
p { margin: 0; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 .8125rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  padding: 18px 26px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--fg); color: var(--fg); background: transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn.primary { background: var(--kupfer); border-color: var(--kupfer); color: var(--tiefschwarz); }
.btn.primary:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.link { font-weight: 500; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
.link span { transition: transform .2s; }
.link:hover span { transform: translateX(4px); }
#preisliste { scroll-margin-top: 76px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.link { background: none; border: 0; padding: 0; color: var(--fg); font-family: var(--font); cursor: pointer; }

/* Header */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); transition: background-color .4s; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.logo { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.logo .r { color: var(--accent); }
.logo .fv { font-weight: 200; margin-left: 6px; letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding-block: 6px; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg); }
.nav .btn { padding: 13px 18px; color: var(--fg); border-bottom: 1px solid var(--fg); }
.nav .btn:hover { color: var(--bg); }
.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--fg); font: 500 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; padding: 12px 14px; cursor: pointer; }
@media (max-width: 960px) { .logo .fv { display: none; } }
@media (max-width: 820px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 76px; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
  .nav.open { display: flex; }
  .nav a { padding-block: 16px; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); }
  .nav .btn { margin-top: 16px; justify-content: center; }
}

/* Platzhalter-Rahmen für Fotos und Videos */
.frame { position: relative; background: var(--panel); border: 1px solid var(--line); aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; }
.frame.portrait { aspect-ratio: 4 / 5; }
.frame.square { aspect-ratio: 1 / 1; }
.frame.tall { aspect-ratio: 9 / 16; }
.frame .tag { position: absolute; top: 16px; left: 16px; font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.frame .sig { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.frame .sig::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; }
.frame .play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border: 1px solid var(--fg); border-radius: 50%; display: grid; place-items: center; opacity: .85; }
.frame .play::after { content: ""; border-left: 14px solid var(--fg); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
/* Standbilder in den Rahmen: Bild füllt die Fläche, flache Abdunkelung für lesbare Schrift */
.frame img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.frame:has(.poster) { --fg: var(--offwhite); border-color: transparent; }
.frame:has(.poster)::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,.22); }
.frame .play, .frame .sig { z-index: 1; }
.frame.portrait img.poster { object-position: 50% 20%; }
/* Porträt bei Über mich: hochformatiger, damit Kopf und verschränkte Arme ganz drauf sind */
.about .frame.portrait { aspect-ratio: 2 / 3; }
.about .frame.portrait img.poster { object-position: 50% 85%; }
/* Porträt: beim Darüberfahren mit der Maus langsamer Zoom, die Abdunkelung verschwindet */
.about .frame.portrait img.poster { transition: transform 1.8s cubic-bezier(.2,.6,.2,1); }
.about .frame.portrait::after { transition: opacity .9s ease; }
@media (hover: hover) and (pointer: fine) {
  .about .frame.portrait:hover img.poster { transform: scale(1.05); }
  .about .frame.portrait:hover::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .about .frame.portrait img.poster { transition: none; transform: none !important; } }
.featured .frames.one { grid-template-columns: 1fr; }
/* Filme: Klick auf den Rahmen spielt das Video mit Ton im Rahmen ab */
.frame[data-video] { cursor: pointer; }
.frame[data-video]:hover .play { opacity: 1; }
.frame[data-video]:focus-visible { outline: 1px solid var(--kupfer); outline-offset: 3px; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--tiefschwarz); z-index: 2; }
.frame.playing::after, .frame.playing .play, .frame.playing .sig { display: none; }

/* Seiten */
.page[hidden] { display: none; }

/* Start: Hero */
.hero { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px); display: grid; gap: 40px; }
.hero-text { display: grid; gap: 28px; }
.hero .frame { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .hero .frame { aspect-ratio: 16 / 9; } }

/* Start: Showreel vollflächig */
/* Kopfleiste liegt durchsichtig über dem Video und wird beim Scrollen wieder schwarz */
body.on-reel .header { background: transparent; border-bottom-color: rgba(242,239,233,.14); }
body.on-reel .header:has(.nav.open) { background: var(--bg); }
/* Am Handy über dem Showreel: „Menü“-Knopf kupfern hinterlegt, damit er auf dem Video gut sichtbar ist */
.menu-btn { transition: background-color .4s, border-color .4s, color .4s; }
body.on-reel .menu-btn { background: var(--kupfer); border-color: var(--kupfer); color: var(--tiefschwarz); font-weight: 800; }
body.on-reel::before { background: transparent; }
.reel { position: relative; margin-top: -77px; min-height: calc(100svh - env(safe-area-inset-top, 0px)); display: flex; align-items: flex-end; overflow: hidden; background: var(--tiefschwarz); color: var(--offwhite); }
.reel-media, .reel-media video, .reel-media img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bis das Showreel da ist: Waldgrün, damit die Video-Fläche hinter der Kopfleiste sichtbar ist. Das Video deckt sie später ganz ab. */
.reel-media { background: var(--waldgruen); }
.reel:not(:has(video, img)) .reel-shade { display: none; }
.reel-tag { position: absolute; top: 101px; right: max(16px, env(safe-area-inset-right, 0px)); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(242,239,233,.45); text-align: right; max-width: 60%; }
.reel-shade { position: absolute; inset: 0; background: rgba(18,18,18,.38); }
.reel-content { position: relative; width: 100%; padding-block: 80px clamp(40px, 6vw, 72px); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.reel-content .hero-text { max-width: 760px; }
.reel .label { color: rgba(242,239,233,.72); }
.reel .lead { color: rgba(242,239,233,.8); }
.reel-sig { color: rgba(242,239,233,.72); }

/* Fließende Wellen (WebGL) oben auf Business, Portfolio und Kontakt. Waldgrün mit Kupferschimmer */
.wave-hero { position: relative; overflow: hidden; background: var(--tiefschwarz); color: var(--offwhite); min-height: clamp(340px, 52vh, 560px); display: flex; align-items: flex-end; }
.wave-hero canvas.waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wave-hero::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,.18); }
.wave-hero > .wrap { position: relative; z-index: 1; width: 100%; }
.wave-hero .label { color: rgba(242,239,233,.72); }
.wave-hero .lead { color: rgba(242,239,233,.82); }
.wave-hero.light { background: var(--bg); color: var(--fg); }
.wave-hero.light::after { display: none; }
.wave-hero.light .label, .wave-hero.light .lead { color: var(--muted); }
/* Weicher Übergang: die Wellen laufen unten in die Seitenfarbe aus, statt hart abzubrechen */
.wave-hero.fade, .wave-bg { background: var(--bg); }
.wave-hero.fade > .wrap { padding-bottom: clamp(88px, 11vw, 150px); }
.wave-hero.fade canvas.waves, .wave-hero.fade::after, .wave-bg canvas.waves, .wave-bg::after { -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); mask-image: linear-gradient(to bottom, #000 50%, transparent); }
/* Über mich: Wellen hinter dem ganzen Bereich mit Porträt und Text */
.wave-bg { position: relative; overflow: hidden; }
.wave-bg canvas.waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wave-bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,.22); }
.wave-bg > .wrap { position: relative; z-index: 1; }
.wave-bg .lead { color: rgba(242,239,233,.84); }
.wave-bg .muted { color: rgba(242,239,233,.74); }
/* Wellen auch in den zwei Feldern unter dem Showreel, jeweils in der Farbe der Seite dahinter */
.door { position: relative; overflow: hidden; }
.door > canvas.waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.door > :not(canvas) { position: relative; z-index: 1; }

/* Start: Weiche Business / Hochzeit */
.split { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.door { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(32px, 5vw, 64px); text-decoration: none; min-height: 420px; background: var(--bg); color: var(--fg); }
.door .h2 { font-size: clamp(2rem, 2.4vw + 1rem, 2.8rem); }
/* Die zwei Felder: „Für Unternehmen“ / „Für Brautpaare“ groß, damit sofort klar ist, wohin es geht */
.door-title { font-weight: 200; font-size: clamp(2.6rem, 3.6vw + 1rem, 4.4rem); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.door-title b { font-weight: 800; display: block; }
.door-claim { margin: 0; font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem); color: var(--muted); }
/* Echter Knopf in jedem Feld, damit man sofort sieht, dass man klicken kann (auch am Handy ohne Maus) */
.door-btn { align-self: flex-start; }
.door-btn span { transition: transform .2s; }
.door:hover .door-btn, .door:focus-visible .door-btn { background: var(--fg); color: var(--bg); }
.door:hover .door-btn span { transform: translateX(6px); }
@media (max-width: 600px) { .door-btn { align-self: stretch; justify-content: center; } }
/* Am Handy (ohne Maus): das Feld in der Bildschirmmitte wird beim Scrollen hervorgehoben (Klasse .is-active per Skript) */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .door > canvas.waves { transition: transform 1.4s cubic-bezier(.2,.6,.2,1), filter .8s ease; transform: scale(1.02); }
  .door.is-active > canvas.waves { transform: scale(1.12); filter: brightness(1.3) saturate(1.1); }
  .door::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease;
    background: radial-gradient(70% 60% at 50% 45%, rgba(242,239,233,.2), transparent 70%); }
  .door.m-light::after { background: radial-gradient(70% 60% at 50% 45%, rgba(219,140,82,.24), transparent 70%); }
  .door.is-active::after { opacity: 1; }
  .door { transition: filter .8s ease, opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
  .split.has-active .door:not(.is-active) { filter: brightness(.75) saturate(.85); }
  .door-btn { transition: background-color .5s, color .5s; }
  .door.is-active .door-btn { background: var(--fg); color: var(--bg); }
  .door.is-active .door-btn span { transform: translateX(6px); }
}
/* Am Handy: die zwei Felder stapeln sich wie Karten. „Für Unternehmen“ bleibt stehen, „Für Brautpaare“ schiebt sich darüber.
   Die hintere Karte zoomt per Skript leicht zurück und wird dunkler (Inline-Stil). Kein Schatten, nur eine 1-px-Linie */
@media (hover: none) and (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .split { overflow: visible; }
  .split .door { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); min-height: calc(100svh - 128px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); justify-content: center; }
  .split .door:first-child { z-index: 1; transform-origin: 50% 0; }
  .split .door + .door { z-index: 2; border-top: 1px solid rgba(31,45,41,.16); }
  /* Ruhezonen: jede Karte bleibt eine Weile voll stehen, auch wenn man schnell scrollt */
  .split .door + .door { margin-top: 30svh; }
  .split::after { content: ""; display: block; height: 25svh; }
  .split.has-active .door:not(.is-active) { filter: none; }
}
.door:hover .link span { transform: translateX(4px); }
.door ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--muted); }
.door li { display: flex; gap: 12px; align-items: baseline; }
.door li::before { content: ""; width: 14px; height: 1px; background: currentColor; flex: none; transform: translateY(-4px); }
/* Die zwei Felder reagieren auf die Maus: Wellen zoomen heran und werden heller, ein Lichtschein folgt der Maus,
   das andere Feld tritt etwas zurück. Nur am Computer, nicht bei „Bewegung reduzieren“ */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .door > canvas.waves { transition: transform 1.4s cubic-bezier(.2,.6,.2,1), filter .7s ease; transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.02); }
  .door:hover > canvas.waves { transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.1); filter: brightness(1.3) saturate(1.1); }
  .door::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(242,239,233,.24), transparent 65%); }
  .door.m-light::after { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(219,140,82,.28), transparent 65%); }
  .door:hover::after { opacity: 1; }
  .door { transition: filter .6s ease, opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
  .split:has(.door:hover) .door:not(:hover) { filter: brightness(.72) saturate(.85); }
  /* Das ganze Feld zoomt leicht heran (wie das Porträt bei Über mich), der Rand bleibt dabei sauber abgeschnitten */
  .split { overflow: hidden; }
  .split .door:hover { transform: scale(1.035); z-index: 2; }
  .door .h2, .door-title, .door ul { transition: transform .8s cubic-bezier(.2,.6,.2,1); }
  .door:hover .h2, .door:hover .door-title { transform: translateY(-4px); }
  .door:hover .link span { transform: translateX(8px); }
}

/* Vertrauen */
.trust { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 800px) { .trust { grid-template-columns: 1fr; } }
.quote { font-weight: 200; font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem); line-height: 1.3; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
/* Augenzwinkernde Nachricht an den Bräutigam auf der Hochzeitsseite, Anrede in der Akzentfarbe */
.groom-note { font-weight: 200; font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem); line-height: 1.25; letter-spacing: -.01em; margin: 0; max-width: 24em; text-wrap: balance; }
.groom-note .to { color: var(--accent); font-weight: 800; }
/* Porträt bei Über mich: am Handy dreht es sich beim Antippen wie eine Karte um, hinten steht Rafaels Satz */
.flip-inner { position: absolute; inset: 0; }
.flip-front { position: absolute; inset: 0; }
.flip-back, .flip-hint { display: none; }
.flip.can-flip { perspective: 1400px; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flip.can-flip::after { display: none; }
.can-flip .flip-inner { transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.can-flip.flipped .flip-inner { transform: rotateY(180deg); }
.can-flip .flip-front, .can-flip .flip-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.can-flip .flip-front::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,.22); }
.can-flip .flip-back { display: flex; position: absolute; inset: 0; transform: rotateY(180deg); flex-direction: column; justify-content: center; gap: 24px; padding: 32px 28px; background: var(--tiefschwarz); color: var(--offwhite); border: 1px solid rgba(242,239,233,.16); }
.flip-quote { margin: 0; font-weight: 200; font-size: 1.6rem; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.flip-back .signature { color: var(--kupfer); }
.can-flip .flip-hint { display: grid; place-items: center; position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border: 1px solid rgba(242,239,233,.6); border-radius: 50%; color: var(--offwhite); font-size: 1rem; line-height: 1; }
/* Über mich: Wort unter der Maus leuchtet kurz kupferfarben auf und verblasst wieder (nur mit Maus) */
[data-hover-words] .w { transition: color 1.4s ease; }
[data-hover-words] .w.lit { color: var(--kupfer); transition: color .1s; }
/* Sanftes Einblenden beim Scrollen (Klasse wird per Skript gesetzt, ohne Skript ist alles sofort sichtbar) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* Markierter Text in Kupfer statt Standard-Blau */
::selection { background: var(--kupfer); color: var(--tiefschwarz); }
/* Weicher Seitenübergang beim Klick auf eine andere Unterseite: Inhalt blendet über wie ein Schnitt,
   Kopfleiste und Handy-Balken bleiben stehen. Browser ohne diese Funktion wechseln einfach normal */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .header { view-transition-name: kopf; }
  .quickbar { view-transition-name: schnellkontakt; }
  ::view-transition-old(root) { animation: .28s ease both seite-raus; }
  ::view-transition-new(root) { animation: .45s cubic-bezier(.2,.6,.2,1) .08s both seite-rein; }
  ::view-transition-group(kopf), ::view-transition-group(schnellkontakt) { animation-duration: .4s; }
}
@keyframes seite-raus { to { opacity: 0; } }
@keyframes seite-rein { from { opacity: 0; transform: translateY(12px); } }
.section.groom { padding-block: clamp(36px, 5vw, 64px); }
.logos { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logos div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); aspect-ratio: 3 / 2; display: grid; place-items: center; font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* CTA-Band */
.cta { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
@media (max-width: 800px) { .cta { grid-template-columns: 1fr; align-items: start; } }

/* Business: Leistungen */
.services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.service { padding: 36px 32px 40px 0; display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.service + .service { padding-left: 32px; border-left: 1px solid var(--line); }
@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; }
  .service, .service + .service { padding: 32px 0; border-left: 0; }
}
.service ul, .featured ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--muted); font-size: 1rem; }
.service li, .featured li { display: flex; gap: 12px; align-items: baseline; }
.service li::before, .featured li::before { content: ""; width: 12px; height: 1px; background: currentColor; flex: none; transform: translateY(-4px); }
/* Business-Leistungen im Fokus (Handy: Bildschirmmitte beim Scrollen, Computer: Maus darüber), wie die Hochzeitspakete:
   Kupferlinie zeichnet sich oben, Listenpunkte gleiten versetzt herein, „Ergebnis“ kupfern, die anderen Leistungen treten zurück */
@media (prefers-reduced-motion: no-preference) {
  .service { position: relative; transition: opacity .7s ease; }
  .service::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--accent); transition: width .9s cubic-bezier(.2,.6,.2,1); }
  .service li, .service .h3 { transition: transform .6s cubic-bezier(.2,.6,.2,1), color .6s ease; }
  .service .result strong { transition: color .6s ease; }
  .service.is-focus::before { width: 100%; }
  .service.is-focus .h3 { transform: translateX(4px); }
  .service.is-focus li { color: var(--fg); transform: translateX(6px); }
  .service.is-focus li:nth-child(1) { transition-delay: .05s; }
  .service.is-focus li:nth-child(2) { transition-delay: .12s; }
  .service.is-focus li:nth-child(3) { transition-delay: .19s; }
  .service.is-focus .result strong { color: var(--accent); }
  .services.has-focus .service:not(.is-focus) { opacity: .45; }
}
.result { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1rem; }
.result strong { font-weight: 800; }

/* Business: Übersicht aller Leistungen gleich oben, ein Klick springt zur jeweiligen Leistung weiter unten */
.svc-nav { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(242,239,233,.22); margin-top: 8px; }
.svc-nav a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 16px 18px 0; text-decoration: none; font-weight: 800; font-size: .9375rem; border-bottom: 1px solid rgba(242,239,233,.22); transition: color .2s; min-width: 0; }
.svc-nav a + a { padding-left: 16px; border-left: 1px solid rgba(242,239,233,.22); }
.svc-nav a::after { content: "↓"; font-weight: 400; font-size: 1.1rem; color: var(--kupfer); transition: transform .2s; }
.svc-nav a:hover { color: var(--kupfer); }
.svc-nav a:hover::after { transform: translateY(3px); }
@media (max-width: 900px) { .svc-nav { grid-template-columns: 1fr 1fr; } .svc-nav a:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 520px) { .svc-nav { grid-template-columns: 1fr; } .svc-nav a { padding-block: 14px; } .svc-nav a + a { padding-left: 0; border-left: 0; } }
#employer-branding { scroll-margin-top: 76px; }
.service { scroll-margin-top: 112px; }

.featured { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 5vw, 64px); }
@media (max-width: 900px) { .featured { grid-template-columns: 1fr; } }
.featured .frames { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }

/* Ablauf (echte Reihenfolge, daher nummeriert) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); border-top: 1px solid var(--line); counter-reset: step; }
.steps li { padding: 28px 24px 0 0; display: flex; flex-direction: column; gap: 10px; counter-increment: step; min-width: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); font-size: .8125rem; font-weight: 500; letter-spacing: .16em; color: var(--accent); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 12px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .steps li { padding-top: 20px; } .steps li + li { border-top: 1px solid var(--line); } }

.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }

/* Hochzeit: Pakete */
.packages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .packages { grid-template-columns: 1fr; } }
.pkg { border: 1px solid var(--line); padding: 32px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pkg.best { background: var(--waldgruen); color: var(--offwhite); border-color: var(--waldgruen); --muted: rgba(242,239,233,.7); --line: rgba(242,239,233,.18); --accent: var(--kupfer); }
.pkg ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--muted); font-size: 1rem; }
.pkg li { display: flex; gap: 12px; align-items: baseline; }
.pkg li::before { content: ""; width: 12px; height: 1px; background: currentColor; flex: none; transform: translateY(-4px); }
.price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.price strong { font-weight: 800; font-size: 1.25rem; }
/* Hochzeitspakete: das Paket im Fokus (Handy: Bildschirmmitte beim Scrollen, Computer: Maus darüber) wird hervorgehoben.
   Kupferlinie zeichnet sich oben, Rahmen kupfern, Listenpunkte gleiten nacheinander herein, das andere Paket tritt zurück */
@media (prefers-reduced-motion: no-preference) {
  .pkg { position: relative; transition: transform .7s cubic-bezier(.2,.6,.2,1), opacity .7s ease, border-color .6s ease, background-color .6s ease; }
  .pkg::before { content: ""; position: absolute; top: -1px; left: -1px; height: 2px; width: 0; background: var(--accent); transition: width .9s cubic-bezier(.2,.6,.2,1); }
  .pkg li { transition: transform .6s cubic-bezier(.2,.6,.2,1), color .6s ease; }
  .pkg .price .link span { transition: transform .3s ease; }
  .pkg.is-focus { border-color: var(--accent); background: rgba(255,255,255,.35); transform: translateY(-6px) scale(1.02); }
  .pkg.is-focus::before { width: calc(100% + 2px); }
  .pkg.is-focus li { color: var(--fg); }
  .pkg.is-focus li:nth-child(1) { transform: translateX(6px); transition-delay: .05s; }
  .pkg.is-focus li:nth-child(2) { transform: translateX(6px); transition-delay: .12s; }
  .pkg.is-focus li:nth-child(3) { transform: translateX(6px); transition-delay: .19s; }
  .pkg.is-focus li:nth-child(4) { transform: translateX(6px); transition-delay: .26s; }
  .pkg.is-focus li:nth-child(5) { transform: translateX(6px); transition-delay: .33s; }
  .pkg.is-focus .price .link { color: var(--accent); }
  .pkg.is-focus .price .link span { transform: translateX(6px); }
  .packages.has-focus .pkg:not(.is-focus) { opacity: .55; transform: scale(.97); }
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; font-weight: 800; font-size: 1.125rem; display: flex; justify-content: space-between; gap: 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 200; font-size: 1.6rem; line-height: 1; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 24px; color: var(--muted); max-width: 40em; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* Portfolio-Filter */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 .75rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; padding: 12px 16px; background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.chip[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.pf-item[hidden] { display: none; }

/* Über mich */
.about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.facts div { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; min-width: 0; }
.facts dt { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-weight: 800; }

/* Kontakt */
.contact { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
/* Formulare dürfen nie breiter als der Bildschirm werden (sonst kann man am Handy seitlich wischen).
   Raster-Spalten und Eingabefelder dürfen schmaler werden als ihr Inhalt, z. B. das Datumsfeld */
.contact > *, .two-col > *, form, .row > *, .field { min-width: 0; }
form, fieldset { grid-template-columns: minmax(0, 1fr); }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
form { display: grid; gap: 24px; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 24px; min-width: 0; }
fieldset[hidden] { display: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 18px; text-align: center; cursor: pointer; font-weight: 800; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.seg input:checked + label { background: var(--fg); color: var(--bg); }
.seg input:focus-visible + label { outline: 1px solid var(--accent); outline-offset: -4px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.5 var(--font); color: var(--fg); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; border-radius: 0; width: 100%;
}
.field select option { color: #121212; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--muted); }
.check input { margin-top: 4px; accent-color: var(--kupfer); flex: none; }
.check > span { flex: 1; min-width: 0; }
.status { border: 1px solid var(--line); padding: 20px; }
.side { display: grid; gap: 0; border-top: 1px solid var(--line); }
.side > div { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.side .value { font-weight: 800; font-size: 1.125rem; user-select: all; }
.book { background: var(--tiefschwarz); padding: 32px; display: grid; gap: 16px; margin-bottom: 32px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .footer .wrap { grid-template-columns: 1fr; } }
.footer nav { display: grid; gap: 10px; align-content: start; }
.footer nav a { text-decoration: none; color: var(--muted); font-size: .9375rem; }
.footer nav a:hover { color: var(--fg); }
/* Am Handy: fester Balken unten mit Anrufen und WhatsApp */
.quickbar { display: none; }
@media (max-width: 820px) {
  .quickbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--tiefschwarz); border-top: 1px solid rgba(242,239,233,.16); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .quickbar a { display: flex; align-items: center; justify-content: center; height: 52px; font: 800 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--offwhite); text-decoration: none; }
  .quickbar a + a { border-left: 1px solid rgba(242,239,233,.16); color: var(--kupfer); }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  /* Showreel endet über dem Balken, damit nichts verdeckt wird; kleine Links bekommen mehr Fläche zum Antippen */
  .reel { min-height: calc(100svh - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)); }
  .price .link, .head-row .link { display: inline-block; padding-block: 12px; }
}
.wa-link { color: var(--fg); font-weight: 500; text-underline-offset: 4px; }
/* WhatsApp- und Telefon-Symbol, einfarbig in Schriftfarbe bzw. Kupfer */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; margin-right: .45em; }
.quickbar a .ico { width: 18px; height: 18px; margin-right: 10px; }
.signature { display: flex; align-items: center; gap: 12px; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.signature::before { content: ""; width: 24px; height: 1px; background: currentColor; }

/* Impressum */
.legal { max-width: 46em; display: grid; gap: 28px; }
.legal dl { display: grid; grid-template-columns: 14em 1fr; border-top: 1px solid var(--line); margin: 0; }
.legal dt, .legal dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.legal dt { color: var(--muted); font-size: .9375rem; }
.legal dd { font-weight: 500; }
@media (max-width: 600px) { .legal dl { grid-template-columns: 1fr; } .legal dt { border-bottom: 0; padding-bottom: 0; } }
/* Listen auf den Rechtsseiten (AGB): Striche statt Punkte, wie überall auf der Seite */
.legal ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: var(--muted); }
.legal li { display: flex; gap: 12px; align-items: baseline; }
.legal li::before { content: ""; width: 12px; height: 1px; background: currentColor; flex: none; transform: translateY(-4px); }
.draft-note { border-left: 1px solid var(--accent); padding-left: 16px; color: var(--muted); font-size: .9375rem; }

/* ============ HANDY ============
   Eigene Gestaltung für schmale Bildschirme: ruhigere Abstände, passende Schriftgrößen,
   alles einspaltig, Knöpfe über die ganze Breite (leichter zu treffen) */
@media (max-width: 600px) {
  .section { padding-block: 56px; }
  .hero { padding-block: 40px 32px; gap: 28px; }
  .hero-text { gap: 18px; }
  .head-row { margin-bottom: 24px; }

  .display { font-size: 2.35rem; line-height: 1.08; }
  .reel .display { font-size: 2.75rem; }
  .h2 { font-size: 1.75rem; }
  .door .h2 { font-size: 1.9rem; }
  .door-title { font-size: 2.6rem; }
  .lead { font-size: 1.0625rem; line-height: 1.55; }
  .label { font-size: .6875rem; letter-spacing: .14em; }
  .quote, .groom-note { font-size: 1.45rem; }
  .faq summary { font-size: 1rem; padding: 20px 0; }

  .btns .btn { flex: 1 1 100%; justify-content: center; }

  .reel-content { padding-block: 64px 28px; gap: 20px; }
  .door { min-height: 0; gap: 28px; padding: 44px 16px; }

  .wave-hero { min-height: 300px; }
  .wave-hero.fade > .wrap { padding-bottom: 64px; }

  .grid-3, .steps, .featured .frames { grid-template-columns: 1fr; }
  .grid-3 { gap: 12px; }
  .steps li { padding: 20px 0 4px; }
  .pkg { padding: 24px 20px; }
  .frame .play { width: 52px; height: 52px; }
  .facts div { padding: 16px 12px 16px 0; }
}