/* Stella Mayer Fotografie · Farben und Schriften wie im Wedding Guide */
:root {
  --tinte: #23211F;
  --nacht: #1A1917;
  --papier: #FBF9F7;
  --taupe: #9A8F84;
  --sand: #DCD5CC;
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --rand: clamp(16px, 4vw, 56px);
  --sperr: .26em;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 300 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 300; margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--papier); padding: 8px 12px; }

/* Bausteine */
.kicker {
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 22px;
}
.titel {
  font: 300 clamp(32px, 4.6vw, 64px)/1.08 var(--serif);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.fliess { max-width: 34em; margin: 0 0 1.2em; }
.knopf {
  display: inline-block;
  font: 500 11px/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 28px;
  background: var(--tinte);
  color: var(--papier);
  border: 1px solid var(--tinte);
  transition: background .3s, color .3s;
}
.knopf:hover { background: transparent; color: var(--tinte); }
.knopf-hell { background: var(--papier); color: var(--tinte); border-color: var(--papier); }
.knopf-hell:hover { background: transparent; color: var(--papier); }
.knopf-linie { background: transparent; color: var(--tinte); }
.knopf-linie:hover { background: var(--tinte); color: var(--papier); }
.nr { font: 300 15px/1 var(--serif); color: var(--taupe); font-variant-numeric: oldstyle-nums; letter-spacing: .08em; }

/* Kopfzeile: hebt sich über Bildern und Papier ab */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--rand);
  color: #fff; mix-blend-mode: difference;
  pointer-events: none;
}
.kopf a, .kopf button { pointer-events: auto; }
.kopf { transition: background .4s, padding .4s; }
.kopf.fest {
  mix-blend-mode: normal; color: var(--tinte);
  background: rgba(251,249,247,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-top: 16px; padding-bottom: 16px;
  pointer-events: auto;
  box-shadow: 0 1px 0 var(--sand);
}
body.menue-offen .kopf { background: transparent; box-shadow: none; color: var(--papier); }
.marke {
  font: 400 15px/1 var(--serif);
  letter-spacing: var(--sperr);
  text-transform: uppercase;
  text-decoration: none;
}
.nav { display: none; gap: 34px; }
.nav a, .menue-knopf {
  font: 400 11px/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a { position: relative; padding: 6px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .35s; }
.nav a:hover::after { right: 0; }
.nav-cta { border: 1px solid currentColor; padding: 10px 16px !important; }
.nav-cta::after { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; }
  .menue-knopf { display: none; }
}

.menue {
  position: fixed; inset: 0; z-index: 40;
  background: var(--tinte); color: var(--papier);
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px var(--rand) 40px;
  opacity: 0; transition: opacity .35s;
}
.menue[hidden] { display: none; }
.menue:not(.offen) { pointer-events: none; }
.menue.offen { opacity: 1; }
.menue nav { display: flex; flex-direction: column; gap: 6px; }
.menue nav a {
  font: 300 clamp(30px, 9vw, 52px)/1.25 var(--serif);
  text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none;
  display: flex; align-items: baseline; gap: 18px;
}
.menue nav a span { font: 400 11px/1 var(--sans); letter-spacing: .2em; color: var(--taupe); }
.menue-fuss { margin-top: auto; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); }
.menue-fuss a { text-decoration: none; }

/* 1 · Start: Hochformat wächst aus dem Rahmen (Maße setzt main.js) */
.hero { position: relative; height: 260vh; background: var(--papier); }
.hero-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-bild { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; will-change: left, top, width, height; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); transform: scale(var(--z, 1.12)); transform-origin: 50% 50%; }
.hero-titel {
  position: absolute; inset: 0;
  font: 300 clamp(40px, 7.4vw, 124px)/1 var(--serif);
  text-transform: uppercase; letter-spacing: .08em;
  text-align: center; color: var(--tinte);
  pointer-events: none;
}
.hero-titel .zeile { position: absolute; left: 0; right: 0; display: block; will-change: transform, opacity; white-space: nowrap; }
.zeile-1 { top: var(--rahmen-t, 22%); transform: translateY(calc(-112% - var(--dy, 0px))); }
.zeile-2 { top: calc(100% - var(--rahmen-t, 22%)); transform: translateY(calc(8% + var(--dy, 0px))); }
.hero-ende {
  position: absolute; left: 0; right: 0; top: 0;
  padding: clamp(84px, 11vh, 130px) var(--rand) 0;
  text-align: center; color: var(--tinte);
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s, transform .6s;
  pointer-events: none;
}
.hero-ende.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.hero-ende .kicker { color: var(--tinte); }
.hero-satz {
  font: 300 clamp(26px, 3.4vw, 48px)/1.2 var(--serif);
  max-width: 19em; margin: 0 auto;
  text-shadow: 0 0 24px rgba(251,249,247,.9), 0 0 60px rgba(251,249,247,.6);
}
.hero-knopf { display: none; }
.hero-ende::before {
  content: ''; position: absolute; inset: 0 0 -30vh;
  background: linear-gradient(rgba(251,249,247,.5), rgba(251,249,247,0));
  z-index: -1;
}
.scroll-hinweis {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  margin: 0; font: 400 10px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--taupe);
  transition: opacity .4s;
}
.scroll-hinweis::after { content: ''; display: block; width: 1px; height: 34px; margin: 12px auto 0; background: var(--taupe); animation: tropfen 2s infinite; transform-origin: top; }
@keyframes tropfen { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 899px) {
  .hero-titel { font-size: clamp(30px, 9.6vw, 60px); --rahmen-t: 24%; }
}
/* Am Computer: Bildspalte rechts, Text links auf Papier */
@media (min-width: 900px) {
  .hero-ende {
    top: 0; bottom: 0; right: auto;
    width: calc(100vw - min(55vw, 66.7vh));
    padding: 0 clamp(40px, 6vw, 110px);
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    text-align: left;
  }
  .hero-ende::before { display: none; }
  .hero-satz { margin: 0 0 40px; max-width: 13em; font-size: clamp(34px, 3.6vw, 58px); text-shadow: none; }
  .hero-knopf { display: inline-block; }
}

/* 2 · Haltung Wort für Wort */
.moment { padding: clamp(110px, 18vw, 240px) var(--rand); }
.moment-text {
  margin: 0 auto; max-width: 17em;
  font: 300 clamp(30px, 4.4vw, 66px)/1.22 var(--serif);
  text-align: center; text-wrap: balance;
}
.moment-text .w { opacity: .16; transition: opacity .25s; }
.moment-text .w.an { opacity: 1; }

/* 3 · Ein ganzer Tag */
.tag { background: var(--tinte); color: var(--papier); }
.tag .kicker { color: var(--taupe); }
.tag-kopf { padding: clamp(90px, 12vw, 160px) var(--rand) 50px; max-width: 900px; }
.tag-intro { max-width: 32em; color: var(--sand); margin: 0; }
.tag-sticky { position: relative; }
.tag-uhr { display: none; }
.tag-spur {
  list-style: none; margin: 0; padding: 0 var(--rand) 90px;
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.tag-spur::-webkit-scrollbar { display: none; }
.tag-spur li { flex: 0 0 auto; width: min(76vw, 420px); scroll-snap-align: center; }
.tag-spur img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #2d2a27; }
.tag-spur p { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--sand); max-width: 26em; }
.tag-spur time { display: block; font: 500 11px/1 var(--sans); letter-spacing: .3em; color: var(--taupe); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .tag-pin { position: relative; }
  .tag-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
  .tag-spur { overflow: visible; padding: 0 0 0 calc(var(--rand) + 34vw); gap: 4vw; will-change: transform; align-items: center; }
  .tag-spur li { width: auto; }
  .tag-spur img { height: 64vh; width: auto; aspect-ratio: 2 / 3; }
  .tag-spur p { max-width: calc(64vh * 2 / 3); }
  .tag-sticky::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
    width: calc(var(--rand) + 30vw);
    background: linear-gradient(90deg, var(--tinte) 78%, rgba(35,33,31,0));
  }
  .tag-uhr {
    display: block; position: absolute; left: var(--rand); top: 50%; transform: translateY(-50%);
    font: 300 clamp(70px, 9vw, 150px)/1 var(--serif);
    letter-spacing: .04em; color: var(--papier);
    font-variant-numeric: lining-nums tabular-nums;
    z-index: 2;
  }
  .tag-uhr::after { content: 'Uhr'; display: block; margin-top: 18px; font: 500 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--taupe); }
}

/* Überschriften in halben Spalten etwas kleiner */
@media (min-width: 900px) {
  .spalte-text .titel, .ich-text .titel, .anfrage .titel, .stimmen .titel, .fragen-kopf .titel, .ablauf .titel { font-size: clamp(32px, 3.3vw, 52px); }
}

/* 4 · Zwei Welten */
.welten { display: flex; flex-direction: column; }
.welt { position: relative; display: block; height: 88vh; overflow: hidden; color: var(--papier); text-decoration: none; }
.welt img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.welt::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(rgba(20,18,16,0), rgba(20,18,16,.55)); }
.welt-text { position: absolute; left: var(--rand); bottom: clamp(30px, 6vw, 70px); z-index: 1; }
.welt-text .kicker { color: var(--papier); margin-bottom: 12px; }
.welt-titel { display: block; font: 300 clamp(44px, 6vw, 96px)/1 var(--serif); text-transform: uppercase; letter-spacing: .1em; }
.welt-titel::after { content: '→'; font-family: var(--sans); font-size: .32em; margin-left: .6em; vertical-align: middle; transition: margin .4s; }
.welt:hover img { transform: scale(1.04); }
.welt:hover .welt-titel::after { margin-left: 1em; }
@media (min-width: 900px) {
  .welten { flex-direction: row; height: 100vh; }
  .welt { height: auto; flex: 1; transition: flex .8s cubic-bezier(.2,.7,.2,1); }
  .welten:hover .welt { flex: .8; }
  .welten .welt:hover { flex: 1.25; }
}

/* 5 · Hochzeiten */
.hochzeiten { display: grid; }
.spalte-bild img { width: 100%; height: 100%; object-fit: cover; }
.spalte-bild { height: 90vh; }
.spalte-text { padding: clamp(70px, 9vw, 140px) var(--rand); }
.zahl { display: flex; gap: 24px; align-items: center; margin: 56px 0; padding: 30px 0; border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); }
.zahl-wert { font: 300 clamp(68px, 8vw, 120px)/1 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap; }
.zahl-text { font-size: 15px; color: #5c554e; max-width: 22em; }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.punkte li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--sand); }
.punkte .nr { padding-top: 5px; }
.punkte h3 { font: 500 12px/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 6px; }
.punkte p { margin: 0; font-size: 15.5px; color: #5c554e; }
@media (min-width: 900px) {
  .hochzeiten { grid-template-columns: 1fr 1fr; align-items: start; }
  .spalte-bild { position: sticky; top: 0; height: 100vh; }
  .spalte-text { padding-left: clamp(40px, 6vw, 110px); padding-top: 18vh; }
}

/* 6 · Band */
.band { position: relative; height: 92vh; overflow: hidden; }
.band img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 60%; transform: translateY(var(--py, 0)); will-change: transform; }
.band::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(rgba(20,18,16,0), rgba(20,18,16,.6)); }
.band-text {
  position: absolute; left: 0; right: 0; bottom: clamp(40px, 9vh, 100px); z-index: 1;
  margin: 0; padding: 0 var(--rand); text-align: center;
  font: 300 clamp(32px, 5vw, 80px)/1.1 var(--serif);
  text-transform: uppercase; letter-spacing: .1em; color: var(--papier);
}

/* 7 · Familie */
.familie { padding: clamp(90px, 12vw, 170px) 0 clamp(70px, 8vw, 120px); }
.familie-kopf { padding: 0 var(--rand); max-width: 980px; margin-bottom: 60px; }
.familie-reihe { display: grid; gap: 50px; }
.karte-bild { position: relative; overflow: hidden; }
.karte-bild img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.karte:hover .karte-bild img { transform: scale(1.04); }
.karte-bild::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(rgba(20,18,16,0), rgba(20,18,16,.5)); }
.karte h3 { position: absolute; left: 24px; bottom: 22px; z-index: 1; color: var(--papier); font: 300 clamp(30px, 3vw, 44px)/1 var(--serif); text-transform: uppercase; letter-spacing: .14em; }
.karte p { padding: 0 var(--rand); margin: 20px 0 0; font-size: 15.5px; color: #5c554e; max-width: 30em; }
.familie-fuss { padding: 0 var(--rand); margin: 60px auto 0; max-width: 40em; text-align: center; font: 300 clamp(20px, 2vw, 26px)/1.45 var(--serif); }
@media (min-width: 900px) {
  .familie-reihe { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .karte p { padding: 0 24px; }
  .karte:nth-child(2) { margin-top: 90px; }
}

/* 8 · Über mich */
.ich { display: grid; background: #F3EFEA; }
.ich-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.ich-bild { height: 92vh; }
.ich-text { padding: clamp(70px, 9vw, 140px) var(--rand); }
.ich-schnappschuesse { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ich-schnappschuesse img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ich-schnappschuesse span { display: block; margin-top: 8px; font: 400 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
@media (min-width: 900px) {
  .ich { grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .ich-bild { height: auto; min-height: 100vh; }
  .ich-text { align-self: center; padding-left: clamp(40px, 6vw, 110px); }
}
@media (max-width: 520px) {
  .ich-schnappschuesse { grid-template-columns: repeat(2, 1fr); }
}

/* 9 · Ablauf */
.ablauf { position: relative; color: var(--papier); overflow: hidden; min-height: 100vh; display: flex; align-items: flex-end; }
.ablauf-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ablauf::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(20,18,16,.15) 0%, rgba(20,18,16,.35) 40%, rgba(20,18,16,.82) 100%); z-index: 1; }
.ablauf-inhalt { position: relative; z-index: 2; padding: 40vh var(--rand) clamp(50px, 7vw, 100px); width: 100%; }
.ablauf .kicker { color: var(--sand); }
.schritte { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 28px; }
.schritte li { border-top: 1px solid rgba(251,249,247,.4); padding-top: 18px; }
.schritte .nr { color: var(--sand); }
.schritte h3 { font: 500 12px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; margin: 12px 0 8px; }
.schritte p { margin: 0; font-size: 15px; color: rgba(251,249,247,.85); }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(5, 1fr); gap: 28px; } }

/* 10 · Stimmen */
.stimmen { display: grid; }
.stimmen-bild { height: 70vh; }
.stimmen-bild img { width: 100%; height: 100%; object-fit: cover; }
.stimmen-text { padding: clamp(70px, 9vw, 140px) var(--rand); display: flex; flex-direction: column; justify-content: center; }
.zitate { display: grid; }
.zitat { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; pointer-events: none; }
.zitat.aktiv { opacity: 1; transform: none; pointer-events: auto; }
.zitat blockquote { margin: 0; font: 300 clamp(26px, 2.9vw, 42px)/1.3 var(--serif); }
.zitat blockquote::before { content: '„'; }
.zitat blockquote::after { content: '“'; }
.zitat figcaption { margin-top: 26px; font: 500 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--taupe); }
.zitat-steuer { display: flex; align-items: center; gap: 22px; margin-top: 46px; font: 400 12px/1 var(--sans); letter-spacing: .2em; color: var(--taupe); }
.zitat-steuer button { width: 46px; height: 46px; border: 1px solid var(--sand); border-radius: 50%; font-size: 16px; color: var(--tinte); transition: background .3s; }
.zitat-steuer button:hover { background: var(--sand); }
@media (min-width: 900px) {
  .stimmen { grid-template-columns: 5fr 7fr; min-height: 90vh; }
  .stimmen-bild { height: auto; }
  .stimmen-text { padding-left: clamp(40px, 7vw, 130px); }
}

/* 11 · Fragen */
.fragen { padding: clamp(90px, 12vw, 170px) var(--rand); display: grid; gap: 40px; border-top: 1px solid var(--sand); }
.fragen-liste details { border-bottom: 1px solid var(--sand); }
.fragen-liste details:first-child { border-top: 1px solid var(--sand); }
.fragen-liste summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 24px 0;
  font: 400 clamp(19px, 1.7vw, 23px)/1.35 var(--serif);
}
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: '+'; font: 300 22px/1 var(--sans); color: var(--taupe); transition: transform .3s; flex: none; }
.fragen-liste details[open] summary::after { transform: rotate(45deg); }
.fragen-liste details p { margin: 0 0 26px; max-width: 38em; color: #5c554e; font-size: 16px; }
@media (min-width: 900px) {
  .fragen { grid-template-columns: 5fr 7fr; gap: 6vw; }
  .fragen-kopf { position: sticky; top: 120px; align-self: start; }
}

/* 12 · Anfrage */
.anfrage { display: grid; background: var(--tinte); color: var(--papier); }
.anfrage-bild { position: relative; height: 60vh; }
.anfrage-bild img { width: 100%; height: 100%; object-fit: cover; }
.anfrage-bildtext {
  position: absolute; left: var(--rand); right: var(--rand); bottom: 30px; margin: 0;
  font: 300 clamp(36px, 5vw, 80px)/1.05 var(--serif); text-transform: uppercase; letter-spacing: .08em;
  text-shadow: 0 0 40px rgba(0,0,0,.35);
}
.anfrage-form { padding: clamp(60px, 8vw, 120px) var(--rand); display: flex; flex-direction: column; justify-content: center; }
.anfrage .kicker { color: var(--taupe); }
.fortschritt { height: 1px; background: rgba(251,249,247,.18); margin-bottom: 44px; }
.fortschritt span { display: block; height: 100%; width: 16.6%; background: var(--papier); transition: width .5s; }
.schritt { border: 0; margin: 0; padding: 0; display: none; min-width: 0; }
.schritt.aktiv { display: block; animation: rein .5s; }
@keyframes rein { from { opacity: 0; transform: translateX(16px); } }
.schritt legend { font: 300 clamp(28px, 3vw, 44px)/1.2 var(--serif); padding: 0; margin-bottom: 30px; }
.wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.wahl p { width: 100%; margin: 0 0 4px; font-size: 14px; color: var(--sand); }
.wahl-klein { margin-bottom: 30px; }
.wahl label { cursor: pointer; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl span { display: inline-block; padding: 14px 20px; border: 1px solid rgba(251,249,247,.35); font: 400 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s; }
.wahl label:hover span { border-color: var(--papier); }
.wahl input:checked + span { background: var(--papier); color: var(--tinte); border-color: var(--papier); }
.wahl input:focus-visible + span { outline: 2px solid var(--taupe); outline-offset: 2px; }
.namen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.namen input { flex: 1 1 200px; }
.namen .und { font: 300 34px/1 var(--serif); color: var(--taupe); }
.anfrage input[type=text], .anfrage input[type=email], .anfrage input[type=tel], .anfrage input[type=date], .anfrage textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(251,249,247,.35);
  color: var(--papier); font: 300 20px/1.4 var(--sans); padding: 10px 0; border-radius: 0;
  color-scheme: dark;
}
.anfrage textarea { resize: vertical; font-size: 17px; }
.anfrage input:focus, .anfrage textarea:focus { outline: none; border-bottom-color: var(--papier); }
.anfrage ::placeholder { color: rgba(251,249,247,.38); }
.feld { display: block; margin-bottom: 26px; }
.feld span { display: block; font: 500 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--sand); margin: -12px 0 26px; }
.hinweis { font-size: 13px; color: var(--taupe); margin: 18px 0 0; max-width: 34em; }
.zusammenfassung { white-space: pre-wrap; font: 300 15px/1.7 var(--sans); color: var(--sand); background: rgba(251,249,247,.05); padding: 20px 22px; margin: 0 0 26px; border-left: 1px solid var(--taupe); }
.senden { display: flex; flex-wrap: wrap; gap: 12px; }
.anfrage .knopf { background: var(--papier); color: var(--tinte); border-color: var(--papier); }
.anfrage .knopf:hover { background: transparent; color: var(--papier); }
.anfrage .knopf-linie { background: transparent; color: var(--papier); }
.anfrage .knopf-linie:hover { background: var(--papier); color: var(--tinte); }
.fehler { min-height: 1.5em; color: #E3B9A8; font-size: 14px; margin: 18px 0 0; }
.form-steuer { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.zurueck { font: 400 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--sand); visibility: hidden; }
.zurueck.sichtbar { visibility: visible; }
[data-nur].versteckt { display: none !important; }
@media (min-width: 900px) {
  .anfrage { grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .anfrage-bild { height: auto; }
  .anfrage-bild img { position: sticky; top: 0; height: 100vh; }
}

/* Fuß */
.fuss { background: var(--nacht); color: var(--sand); padding: clamp(80px, 10vw, 140px) var(--rand) 40px; }
.fuss-gross { margin: 0 0 60px; font: 300 clamp(60px, 13vw, 220px)/.9 var(--serif); text-transform: uppercase; letter-spacing: .06em; color: var(--papier); }
.fuss-spalten { display: grid; gap: 24px; font-size: 14px; letter-spacing: .04em; border-top: 1px solid rgba(220,213,204,.2); padding-top: 28px; }
.fuss-spalten p { margin: 0; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--papier); }
@media (min-width: 700px) { .fuss-spalten { grid-template-columns: repeat(3, 1fr); } }

/* Sanftes Einblenden beim Scrollen */
.einblenden { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.einblenden.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; }
  .hero-buehne { position: relative; }
  .hero-bild img { transform: none !important; }
  .hero-titel { display: none; }
  .hero-ende { opacity: 1; transform: none; pointer-events: auto; }
  .scroll-hinweis { display: none; }
  .moment-text .w { opacity: 1; }
  .einblenden { opacity: 1; transform: none; }
  * { transition: none !important; animation: none !important; }
}

/* Verweis auf die andere Seite */
.weiter-seite { display: grid; text-decoration: none; background: #F3EFEA; }
.weiter-seite img { width: 100%; height: 80vh; object-fit: cover; }
.weiter-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(60px, 8vw, 120px) var(--rand); }
.weiter-titel { font: 300 clamp(32px, 3.6vw, 56px)/1.1 var(--serif); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 24px; }
.weiter-link { font: 500 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; margin-top: 10px; transition: letter-spacing .4s; }
.weiter-seite:hover .weiter-link { letter-spacing: .36em; }
@media (min-width: 900px) {
  .weiter-seite { grid-template-columns: 2fr 3fr; }
  .weiter-seite img { height: 100%; min-height: 80vh; }
  .weiter-text { padding-left: clamp(40px, 7vw, 130px); }
}

/* Familienseite: zwei Bilder nebeneinander */
.paar-bilder { display: grid; gap: 6px; padding: 0; margin: 0; }
.paar-bilder figure { margin: 0; }
.paar-bilder img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
@media (min-width: 700px) { .paar-bilder { grid-template-columns: 1fr 1fr; } }
.familie-fuss { padding: clamp(70px, 9vw, 130px) var(--rand); margin: 0 auto; max-width: 40em; text-align: center; font: 300 clamp(24px, 2.6vw, 36px)/1.35 var(--serif); }

/* Familienseite: Ablauf auf Papier */
.fam-ablauf { padding: clamp(90px, 12vw, 170px) var(--rand); background: #F3EFEA; }
.fam-ablauf .schritte li { border-top-color: var(--sand); }
.fam-ablauf .schritte .nr { color: var(--taupe); }
.fam-ablauf .schritte p { color: #5c554e; }
@media (min-width: 900px) { .fam-ablauf .schritte { grid-template-columns: repeat(4, 1fr); } }
.fliess.klein { font-size: 15px; color: #5c554e; margin-top: 34px; }

/* Startbild mit Gesicht oben (Familie): Text am Handy unten auf dunklem Grund */
@media (max-width: 899px) {
  .hero-unten .hero-ende { top: auto; bottom: 0; padding: 0 var(--rand) clamp(40px, 8vh, 80px); color: var(--papier); }
  .hero-unten .hero-ende .kicker { color: var(--papier); }
  .hero-unten .hero-satz { text-shadow: 0 0 30px rgba(0,0,0,.35); }
  .hero-unten .hero-ende::before { inset: -30vh 0 0; background: linear-gradient(rgba(20,18,16,0), rgba(20,18,16,.7)); }
}

/* ===== Bildausschnitte: Bilder zeigen sich möglichst im ganzen Format =====
   Hochformat-Spalten bekommen am Computer genau die Breite, die zur Bildschirmhöhe passt,
   am Handy stehen die Bilder in ihrem natürlichen Seitenverhältnis. */
@media (max-width: 899px) {
  .spalte-bild, .stimmen-bild, .ich-bild { height: auto; }
  .spalte-bild img, .stimmen-bild img, .ich-bild img { height: auto; aspect-ratio: auto; }
  .anfrage-bild { height: auto; }
  .anfrage-bild img { height: auto; }
  .weiter-seite img { height: auto; }
}
@media (min-width: 900px) {
  .hochzeiten { grid-template-columns: min(50vw, 66.7vh) 1fr; }
  .stimmen { grid-template-columns: min(46vw, 66.7vh) 1fr; min-height: 100vh; }
  .stimmen-bild img { height: 100vh; position: sticky; top: 0; }
  .anfrage { grid-template-columns: min(50vw, 70.7vh) 1fr; }
  .weiter-seite { grid-template-columns: min(42vw, 62.6vh) 1fr; }
  .weiter-seite img { height: auto; min-height: 0; }
}

/* Band: ganzes Querformat, Text unten im abgedunkelten Bereich */
.band { height: auto; }
.band img { height: auto; transform: none; aspect-ratio: auto; }

/* Ablauf: Bild in voller Höhe daneben statt randlos beschnitten */
.ablauf { display: grid; background: var(--tinte); min-height: 0; align-items: stretch; }
.ablauf::before { display: none; }
.ablauf-bild { position: static; width: 100%; height: auto; }
.ablauf-inhalt { padding: clamp(60px, 8vw, 120px) var(--rand); align-self: center; }
@media (min-width: 900px) {
  .ablauf { grid-template-columns: min(50vw, 70.7vh) 1fr; }
  .ablauf-bild { height: 100vh; position: sticky; top: 0; object-fit: cover; }
  .ablauf-inhalt { padding-left: clamp(40px, 6vw, 110px); }
  .ablauf .schritte { grid-template-columns: 1fr 1fr; gap: 30px 40px; }
}

/* Kurzes Über mich auf der Startseite */
.kurz-ich { display: grid; gap: 40px; padding: 0 var(--rand) clamp(90px, 12vw, 170px); align-items: center; }
.kurz-ich-bild { margin: 0; }
.kurz-ich-bild img { width: 100%; height: auto; }
.kurz-ich .knopf { margin-top: 18px; }
@media (min-width: 900px) {
  .kurz-ich { grid-template-columns: min(34vw, 52vh) 1fr; gap: clamp(50px, 7vw, 120px); padding-left: clamp(40px, 8vw, 140px); padding-right: clamp(40px, 8vw, 140px); }
}
@media (max-width: 899px) { .kurz-ich-bild { max-width: 420px; } }

/* Über-mich-Seite */
.ich-start { display: grid; }
.ich-start-bild { margin: 0; }
.ich-start-bild img { width: 100%; height: auto; }
.ich-start-text { padding: clamp(60px, 8vw, 120px) var(--rand); align-self: center; }
@media (min-width: 900px) {
  .ich-start { grid-template-columns: min(50vw, 66.7vh) 1fr; min-height: 100vh; }
  .ich-start-bild img { height: 100vh; width: 100%; object-fit: cover; }
  .ich-start-text { padding-left: clamp(40px, 6vw, 110px); padding-top: 100px; }
}
.schnapp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: clamp(60px, 8vw, 120px) var(--rand); align-items: start; background: #F3EFEA; }
.schnapp figure { margin: 0; }
.schnapp img { width: 100%; height: auto; }
.schnapp figcaption { margin-top: 10px; font: 400 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
@media (min-width: 900px) {
  .schnapp { display: flex; justify-content: center; gap: 14px; }
  .schnapp img { height: min(56vh, 520px); width: auto; }
}
.werte { display: grid; gap: 40px; padding: clamp(90px, 12vw, 170px) var(--rand); align-items: center; }
.werte-bild { margin: 0; }
.werte-bild img { width: 100%; height: auto; }
@media (min-width: 900px) {
  .werte { grid-template-columns: 1fr min(36vw, 56vh); gap: clamp(50px, 7vw, 120px); padding-left: clamp(40px, 8vw, 140px); padding-right: clamp(40px, 8vw, 140px); }
}
.ich-ende { display: grid; gap: 40px; align-items: center; padding: 0 var(--rand) clamp(90px, 12vw, 170px); }
.ich-ende img { width: min(70vw, 340px); height: auto; }
.ich-ende-satz { font: 300 clamp(32px, 4vw, 60px)/1.15 var(--serif); margin: 0 0 30px; max-width: 12em; }
@media (min-width: 900px) { .ich-ende { grid-template-columns: auto 1fr; gap: clamp(50px, 7vw, 120px); padding-left: clamp(40px, 8vw, 140px); } }

/* ===== Feinschliff Typografie (06.10.2026) ===== */
body {
  font-size: 16px; line-height: 1.75; letter-spacing: .012em;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga';
  font-kerning: normal;
}
.fliess, .punkte p, .karte p, .fragen-liste details p { color: #4a4540; }
.titel {
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.16;
  letter-spacing: .16em;
  margin-bottom: 30px;
}
@media (min-width: 900px) {
  .spalte-text .titel, .ich-text .titel, .anfrage .titel, .stimmen .titel, .fragen-kopf .titel,
  .ablauf .titel, .kurz-ich .titel, .ich-start .titel, .werte .titel { font-size: clamp(28px, 2.8vw, 44px); }
}
.kicker { letter-spacing: .34em; font-size: 10.5px; }
.hero-satz, .zitat blockquote, .ich-ende-satz, .familie-fuss { letter-spacing: .005em; }

/* Haltungs-Satz: kleiner, ruhiger, mit feiner Linie */
.moment { padding: clamp(100px, 14vw, 200px) var(--rand); }
.moment::before {
  content: ''; display: block; width: 1px; height: 64px; margin: 0 auto 46px;
  background: var(--sand);
}
.moment-text {
  max-width: 21em;
  font: 300 clamp(22px, 2.3vw, 34px)/1.55 var(--serif);
  letter-spacing: .01em;
  color: var(--tinte);
}
.moment-text .w { opacity: .14; transition: opacity .5s ease; }
.moment-text .w.an { opacity: 1; }

/* ===== Ein ganzer Tag: Uhr links als Zählwerk, kleinere Bilder (06.10.2026) ===== */
.tag-pin { position: relative; }
.tag-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.tag-spur { overflow: visible; scroll-snap-type: none; padding: 0 0 0 var(--rand); gap: 28px; will-change: transform; align-items: flex-start; }
.tag-spur li { width: auto; }
.tag-spur img { height: 44vh; height: 44svh; width: auto; aspect-ratio: 2 / 3; }
.tag-spur p { max-width: calc(44svh * 2 / 3); margin-top: 14px; font-size: 14px; }
.tag-spur time { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tag-uhr {
  display: block; position: static; transform: none;
  padding: 0 var(--rand); margin-bottom: 26px;
  font: 300 clamp(64px, 18vw, 96px)/1 var(--serif);
  letter-spacing: .02em; color: var(--papier);
  font-variant-numeric: lining-nums tabular-nums;
}
.tag-uhr::after { content: 'Uhr'; display: block; margin-top: 12px; font: 500 10.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--taupe); }
.uhr-stelle { display: inline-block; position: relative; overflow: hidden; height: 1.05em; vertical-align: top; }
.uhr-stelle > span { display: block; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.uhr-stelle > span + span { position: absolute; left: 0; top: 0; }
.uhr-punkt { display: inline-block; vertical-align: top; }
@media (min-width: 900px) {
  .tag-sticky { flex-direction: row; align-items: center; }
  .tag-spur { padding-left: calc(var(--rand) + 30vw); gap: 3.4vw; }
  .tag-spur img { height: 52vh; }
  .tag-spur p { max-width: calc(52vh * 2 / 3); font-size: 15px; }
  .tag-uhr {
    position: absolute; left: var(--rand); top: 50%; transform: translateY(-50%);
    padding: 0; margin: 0; z-index: 2;
    font-size: clamp(90px, 10.5vw, 170px);
  }
  .tag-uhr::after { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tag-sticky { position: relative; height: auto; padding: 40px 0 90px; }
  .tag-spur { overflow-x: auto; padding-left: var(--rand) !important; }
  .tag-sticky::before { display: none; }
  .tag-uhr { position: static !important; transform: none !important; margin-bottom: 26px !important; padding: 0 var(--rand) !important; }
}

/* ===== Über-mich-Seite, neu (06.10.2026): große Bilder, Text im Bild ===== */
.ueber-start { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--tinte); }
.ueber-start-bilder { display: grid; height: 100%; gap: 3px; }
.ueber-start-bilder img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ueber-start-bilder img:not(:first-child) { display: none; }
.ueber-start::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(rgba(20,18,16,0), rgba(20,18,16,.72)); }
.ueber-start-text { position: absolute; left: var(--rand); right: var(--rand); bottom: clamp(40px, 9vh, 100px); z-index: 1; color: var(--papier); }
.ueber-start-text .kicker { color: var(--sand); }
.ueber-start-text h1 { font: 300 clamp(40px, 7vw, 116px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: .08em; max-width: 12em; }
@media (min-width: 900px) {
  .ueber-start-bilder { grid-template-columns: repeat(3, 1fr); }
  .ueber-start-bilder img:not(:first-child) { display: block; }
}

.ueber-geschichte { padding: clamp(100px, 14vw, 200px) var(--rand); max-width: 1080px; margin: 0 auto; }
.ueber-geschichte p { margin: 0 0 1.1em; font: 300 clamp(22px, 2.3vw, 34px)/1.5 var(--serif); letter-spacing: .005em; }
.ueber-geschichte p + p { color: var(--taupe); }

.ueber-wand { columns: 2; column-gap: 4px; padding: 0; }
.ueber-wand figure { margin: 0 0 4px; break-inside: avoid; }
.ueber-wand img { width: 100%; height: auto; }
@media (min-width: 900px) { .ueber-wand { columns: 4; } }

.ueber-werte { display: grid; background: var(--tinte); color: var(--papier); margin-top: 4px; }
.ueber-werte-bild { margin: 0; }
.ueber-werte-bild img { width: 100%; height: auto; }
.ueber-werte-text { padding: clamp(70px, 9vw, 140px) var(--rand); align-self: center; }
.ueber-werte .kicker { color: var(--taupe); }
.ueber-werte .fliess { color: var(--sand); }
@media (min-width: 900px) {
  .ueber-werte { grid-template-columns: min(50vw, 66.7vh) 1fr; }
  .ueber-werte-bild img { height: 100vh; object-fit: cover; position: sticky; top: 0; }
  .ueber-werte-text { padding-left: clamp(40px, 7vw, 130px); padding-right: clamp(40px, 7vw, 130px); }
}

.ueber-ende { display: grid; }
.ueber-ende img { width: 100%; height: auto; }
.ueber-ende-text { padding: clamp(70px, 9vw, 140px) var(--rand); align-self: center; }
.ueber-ende-satz { font: 300 clamp(34px, 4.6vw, 72px)/1.1 var(--serif); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 40px; max-width: 10em; }
@media (min-width: 900px) {
  .ueber-ende { grid-template-columns: 1fr min(50vw, 66.7vh); }
  .ueber-ende img { grid-column: 2; grid-row: 1; height: 100vh; object-fit: cover; }
  .ueber-ende-text { grid-column: 1; grid-row: 1; padding-left: clamp(40px, 8vw, 140px); }
}
.ueber-start::before { content: ''; position: absolute; inset: 0 0 auto; height: 140px; z-index: 1; background: linear-gradient(rgba(20,18,16,.45), rgba(20,18,16,0)); pointer-events: none; }

/* Startseite: längerer Satz, klein, gesperrt und in Versalien */
.hero-satz-klar {
  font: 400 clamp(11px, 3.1vw, 12.5px)/2.1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; text-wrap: balance;
  max-width: 30em;
}
@media (min-width: 900px) {
  .hero-satz-klar { max-width: 34em; font-size: clamp(12px, .85vw, 13.5px); }
}

/* Ein ganzer Tag: Querformate behalten ihr Format, damit niemand angeschnitten wird */
.tag-spur li.quer img { aspect-ratio: 3 / 2; }
.tag-spur li.quer p { max-width: 26em; }
/* Ohne echte Uhrzeiten (Originale fehlen) wird die Uhr ausgeblendet */
.ohne-zeit .tag-uhr { display: none !important; }
.ohne-zeit .tag-sticky::before { display: none; }
@media (min-width: 900px) {
  .ohne-zeit .tag-spur { padding-left: var(--rand); }
}
.ohne-zeit .zeit-satz { display: none; }