/* =========================================================
   Ruhrmomente Photography – elegantes Scrapbook
   Farben: Natur · Grau · Beige · Grün
   ========================================================= */
:root {
  --paper: #faf8f3;
  --paper-2: #f3efe6;
  --beige: #e9e2d4;
  --beige-d: #d8cdb9;
  --linen: #e6e0d4;
  --olive: #767a4f;
  --olive-d: #5d6140;
  --olive-l: #a3a780;
  --sage: #c5c9ad;
  --grey: #8b8a84;
  --grey-l: #d6d5cf;
  --ink: #3d3e36;
  --cream: #fdfcf8;
  --silver: #cfd0cc;

  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow: 0 1px 1px rgba(40, 38, 30, .08), 0 6px 14px rgba(40, 38, 30, .12), 0 18px 40px rgba(40, 38, 30, .10);
  --shadow-lift: 0 2px 2px rgba(40, 38, 30, .08), 0 14px 28px rgba(40, 38, 30, .16), 0 34px 60px rgba(40, 38, 30, .14);

  /* Papierstruktur */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--linen) var(--grain);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--olive); color: #fff; padding: .5rem 1rem; }
.skip:focus { left: 8px; }
:focus-visible { outline: 1.5px dashed var(--olive); outline-offset: 4px; }
/* Überschriften bekommen beim Seitenwechsel den Fokus (für Screenreader) – ohne sichtbaren Rahmen */
h1:focus, h2:focus, h3:focus, [tabindex="-1"]:focus { outline: none; }

/* ---------- Typo ---------- */
.script { font-family: var(--script); font-weight: 400; line-height: 1.05; letter-spacing: 0; }
.caps { font-family: var(--serif); text-transform: uppercase; letter-spacing: .2em; font-weight: 500; font-size: .78rem; }
.italic { font-style: italic; }
.muted { color: var(--grey); }
.center { text-align: center; }

/* ---------- Seiten-Container ---------- */
#app { min-height: 100vh; }
.view { min-height: 100vh; }
.page {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper) var(--grain);
  box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 30px 80px rgba(60, 55, 40, .12);
  container-type: inline-size;
  overflow: hidden;
}

/* ---------- Übergänge zwischen Ansichten ---------- */
.view.is-leaving { animation: viewOut .45s var(--ease-io) forwards; pointer-events: none; }
@keyframes viewOut { to { opacity: 0; transform: translateY(-14px) scale(.99); filter: blur(3px); } }
.view.is-entering { animation: viewIn .7s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(18px); } }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--delay, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* Foto „entwickeln“ sich beim Erscheinen */
.develop img { filter: sepia(.5) brightness(1.35) contrast(.65) blur(2px); transition: filter 1.8s ease .2s; }
.develop.in img, .in .develop img { filter: none; }

/* ---------- Wachssiegel ---------- */
.seal { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)) drop-shadow(0 5px 8px rgba(0,0,0,.12)); }

/* ---------- Blumen ---------- */
.bouquet { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 4px rgba(50, 60, 30, .22)); }
.bouquet .sway { transform-box: view-box; transform-origin: 50% 47%; animation: sway 7s ease-in-out infinite alternate; }
.bouquet .trail { transform-box: view-box; transform-origin: 50% 47%; animation: trail 5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } }
@keyframes trail { from { transform: rotate(-3deg); } to { transform: rotate(3.5deg); } }

/* =========================================================
   1) INTRO – der Briefumschlag
   ========================================================= */
.intro {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 6vh 16px;
  background:
    radial-gradient(ellipse at 50% 40%, #fdfcf9 0%, var(--paper) 45%, var(--paper-2) 100%),
    var(--paper);
  overflow: hidden;
  perspective: 1400px;
}
.intro::before { content: ""; position: absolute; inset: 0; background: var(--grain); pointer-events: none; }
.intro__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 28px); width: min(620px, 100%); text-align: center; z-index: 2; }
.intro__kicker { color: var(--grey); animation: fadeUp 1s var(--ease) .2s both; }
.intro__names { font-size: clamp(2.8rem, 10vw, 4.6rem); color: var(--olive-d); margin: 0; animation: fadeUp 1.2s var(--ease) .35s both; }
.intro__hint { color: var(--grey); animation: fadeUp 1s var(--ease) 1.1s both, breathe 2.8s ease-in-out 2.1s infinite; }
.intro__skip { color: var(--grey); font-size: .72rem; text-decoration: none; border-bottom: 1px solid var(--grey-l); padding-bottom: 2px; animation: fadeUp 1s var(--ease) 1.3s both; }
.intro__skip:hover { color: var(--olive); border-color: var(--olive); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes breathe { 50% { opacity: .45; } }

.intro__env-wrap { width: 100%; animation: envIn 1.4s var(--ease) .5s both; }
@keyframes envIn { from { opacity: 0; transform: translateY(40px) rotate(-4deg) scale(.94); } }

/* fallende Schleierkraut-Blüten */
.petals { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.petal {
  position: absolute; top: -20px; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #ecebe0 70%);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  animation: fall var(--t) linear var(--dl) infinite;
  opacity: .9;
}
@keyframes fall {
  0% { transform: translate(0, -5vh) rotate(0); }
  50% { transform: translate(var(--dx), 50vh) rotate(180deg); }
  100% { transform: translate(calc(var(--dx) * -.5), 108vh) rotate(360deg); }
}

/* ---------- Umschlag (wiederverwendbar) ---------- */
.env {
  --env-c: #ebe4d6;
  --env-c2: #e3dbcb;
  --env-c3: #efe9dd;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.5;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  perspective: 1200px;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}
.env--green { --env-c: #7b7f53; --env-c2: #6f7349; --env-c3: #83875b; }
.env__back { position: absolute; inset: 0; background-color: var(--env-c2); border-radius: 3px; box-shadow: var(--shadow); }
.env__back, .flap-front, .flap-back, .pk { background-image: var(--env-paper, var(--grain)); background-size: var(--env-paper-size, auto); background-position: center; background-blend-mode: multiply; }
.env__liner { position: absolute; inset: 4% 4% 0; background: var(--env-liner, url(../assets/img/wiese.jpg)) center/cover; opacity: .9; }
.env__letter {
  position: absolute; left: 7%; right: 7%; top: 6%; height: 88%;
  background-color: var(--cream);
  background-image: var(--letter-paper, var(--grain));
  background-size: var(--letter-paper-size, auto);
  background-position: center;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 7%;
  text-align: center;
  transition: transform 1.1s var(--ease);
  z-index: 2;
}
.env__letter::before { content: ""; position: absolute; inset: 5%; border: 1px solid var(--sage); pointer-events: none; }
.env__letter .script { font-size: clamp(1.6rem, 6.5cqi, 3rem); color: var(--olive-d); }
.env__letter .caps { font-size: clamp(.55rem, 1.9cqi, .8rem); color: var(--grey); margin-top: .4em; }
.env { container-type: inline-size; }
.env__pocket { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pk { position: absolute; inset: 0; background-color: var(--env-c); }
.pk-l { clip-path: polygon(0 0, 50% 56%, 0 100%); }
.pk-r { clip-path: polygon(100% 0, 50% 56%, 100% 100%); }
.pk-b { background-color: var(--env-c3); clip-path: polygon(0 100%, 50% 50%, 100% 100%); }
.env__pocket { filter: drop-shadow(0 -1px 1px rgba(0,0,0,.06)); }
.env__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 60%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-io);
  z-index: 4;
}
.env__flap > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-front { background-color: var(--env-c3); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.flap-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.06)); }
.flap-back { transform: rotateX(180deg); clip-path: polygon(50% 0, 100% 100%, 0 100%); background-color: var(--env-c2); }
.flap-back::after { content: ""; position: absolute; inset: 5% 5% 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--env-liner, url(../assets/img/wiese.jpg)) center 70%/cover; transform: scaleY(-1); }
.flap-shadow { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 3; pointer-events: none; clip-path: polygon(0 0, 100% 0, 50% 100%); background: rgba(0,0,0,.08); filter: blur(4px); transform: translateY(3px); transition: opacity .4s; }
.env__seal { position: absolute; left: 50%; top: 60%; width: 17%; z-index: 5; transform: translate(-50%, -50%); transition: transform .5s var(--ease), opacity .5s; }
.env__monogram { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); z-index: 4; font-size: clamp(.55rem, 1.8cqi, .75rem); color: var(--grey); white-space: nowrap; }

.env:hover .env__seal, .env:focus-visible .env__seal { transform: translate(-50%, -50%) scale(1.07) rotate(-6deg); }
.intro .env:hover { animation: wiggle .6s ease; }
@keyframes wiggle { 30% { transform: rotate(-1.2deg); } 60% { transform: rotate(1deg); } }

/* Öffnen – Ablauf wird per Klassen gesteuert */
.env.is-unsealed .env__seal { animation: sealOff .7s var(--ease-io) forwards; }
@keyframes sealOff {
  30% { transform: translate(-50%, -50%) scale(1.15) rotate(-12deg); }
  100% { transform: translate(-50%, 40%) scale(.6) rotate(40deg); opacity: 0; }
}
.env.is-open .env__flap { transform: rotateX(180deg); }
.env.is-open .flap-shadow { opacity: 0; }
.env.is-flap-back .env__flap { z-index: 1; }
.env.is-out .env__letter { transform: translateY(-62%); }
.intro.is-leaving .intro__env-wrap { animation: envZoom 1.1s var(--ease-io) forwards; }
.intro.is-leaving .intro__kicker, .intro.is-leaving .intro__names, .intro.is-leaving .intro__hint, .intro.is-leaving .intro__skip { animation: fadeOut .5s forwards; }
@keyframes envZoom { to { transform: translateY(18vh) scale(2.6); opacity: 0; filter: blur(2px); } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* =========================================================
   2) START – die Scrapbook-Collage
   ========================================================= */
.collage {
  position: relative;
  width: 100%;
  --h: var(--dh, 280);
  height: calc(var(--h) * 1cqw);
}
.topline { position: absolute; left: 0; right: 0; top: 2.6cqw; text-align: center; z-index: 30; color: var(--grey); font-size: max(.62rem, 1.35cqw); }
.topline b { font-weight: 500; color: var(--olive-d); }

.piece {
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * 1cqw);
  width: calc(var(--w) * 1cqw);
  rotate: var(--r, 0deg);
  z-index: var(--z, 1);
  container-type: inline-size;
  opacity: 0;
  transition: translate .6s var(--ease), scale .6s var(--ease), filter .6s var(--ease), rotate .6s var(--ease);
}
.piece.in { opacity: 1; animation: drop 1.05s var(--ease) backwards; animation-delay: var(--delay, 0s); }
@keyframes drop {
  from { opacity: 0; translate: 0 -5cqw; rotate: calc(var(--r, 0deg) + 9deg); scale: 1.07; }
  60% { opacity: 1; }
}
@media (max-width: 640px) {
  .collage { --h: var(--mh, 480); }
  .hide-m { display: none; }
  .piece { left: calc(var(--mx, var(--x)) * 1cqw); top: calc(var(--my, var(--y)) * 1cqw); width: calc(var(--mw, var(--w)) * 1cqw); rotate: var(--mr, var(--r, 0deg)); }
  .piece.in { animation-name: dropM; }
  @keyframes dropM { from { opacity: 0; translate: 0 -5cqw; rotate: calc(var(--mr, var(--r, 0deg)) + 9deg); scale: 1.07; } 60% { opacity: 1; } }
}

a.piece { text-decoration: none; color: inherit; cursor: pointer; }
a.piece:hover, a.piece:focus-visible { translate: 0 -1.2cqw; scale: 1.025; z-index: 25; }
a.piece:hover .shadowed, a.piece:focus-visible .shadowed { box-shadow: var(--shadow-lift); }
a.piece:hover .click, a.piece:focus-visible .click { letter-spacing: .32em; }
.click { transition: letter-spacing .5s var(--ease); display: inline-block; }
.piece.flower { pointer-events: none; }
.piece.deco:hover { rotate: calc(var(--r, 0deg) - 2deg); }

/* Polaroid */
.polaroid { background: #fdfdfb; padding: 5.5% 5.5% 17%; box-shadow: var(--shadow); position: relative; }
.polaroid img { width: 100%; aspect-ratio: var(--ar, .86); object-fit: cover; background: #ddd; }
.polaroid .cap { position: absolute; left: 0; right: 0; bottom: 3.5%; text-align: center; font-family: var(--script); font-size: 9cqi; color: var(--grey); line-height: 1; }
.tape { position: absolute; width: 34%; height: 11%; top: -5%; left: 33%; background: rgba(233, 226, 206, .78); box-shadow: 0 1px 2px rgba(0,0,0,.08); rotate: -4deg; z-index: 2;
  -webkit-mask: linear-gradient(90deg, transparent 0 2%, #000 2% 98%, transparent 98%), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px);
  -webkit-mask-composite: source-over;
  mask: linear-gradient(90deg, transparent 0 2%, #000 2% 98%, transparent 98%);
}

/* grüne Einladungskarte */
.invite { position: relative; aspect-ratio: 300 / 420; color: #eef0de; text-align: center; filter: drop-shadow(0 6px 10px rgba(40,40,20,.22)) drop-shadow(0 18px 30px rgba(40,40,20,.12)); }
.invite .card-bg, .notch .card-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.invite__body { position: absolute; inset: 14% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqi; }
.invite .caps { font-size: 4.2cqi; letter-spacing: .18em; line-height: 1.5; color: #e6e8d2; }
.invite .script { font-size: 14.5cqi; color: #f4f5e8; }
.invite .small { font-size: 3.6cqi; }

/* offener Umschlag mit Wiesen-Futter */
.env-open { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(40,38,30,.18)); }

/* Silbertablett + Ornamentkarte */
.tray { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(40,40,40,.22)); }
.tray-card { position: absolute; left: 50%; top: 50%; width: 56%; translate: -50% -52%; rotate: -4deg; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); transition: rotate .6s var(--ease), scale .6s var(--ease); }
a.piece:hover .tray-card { rotate: 0deg; scale: 1.04; }
.cartouche { width: 100%; height: auto; display: block; }
.tray-card__txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; container-type: inline-size; }
.tray-card__txt .script { font-size: 16cqi; color: #6f706b; }
.tray-card__txt .caps { font-size: 4.6cqi; color: #6f706b; margin-top: 4cqi; }

/* grüner RSVP-Umschlag */
.green-env { position: relative; aspect-ratio: 1.55; background: #7b7f53 var(--grain); box-shadow: var(--shadow); overflow: hidden; }
.green-env::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.1), transparent 50%, rgba(0,0,0,.12)); }
.green-env svg.flapline { position: absolute; inset: 0; width: 100%; height: 100%; }
.green-env__txt { position: absolute; left: 0; right: 0; top: 10%; text-align: center; color: #eef0de; }
.green-env__txt .script { font-size: 11cqi; }
.green-env__cta { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; color: #eef0de; font-size: 3.4cqi; }

/* Bogenkarte „Unsere Geschichte“ */
.arch { position: relative; aspect-ratio: 3 / 4; background: var(--cream) var(--grain); border-radius: 50cqi 50cqi 2cqi 2cqi; box-shadow: var(--shadow); text-align: center; color: #6f706b; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 10%; }
.arch::before { content: ""; position: absolute; inset: 4%; border: 1px solid var(--grey-l); border-radius: 46cqi 46cqi 1cqi 1cqi; pointer-events: none; }
.arch .script { font-size: 15cqi; }
.arch .caps { font-size: 4cqi; margin: 3cqi 0 4cqi; }
.arch .swans { width: 44%; color: #85867f; }

/* Namens-Anhänger */
.tag { position: relative; aspect-ratio: 1.3; background: var(--beige) var(--grain); box-shadow: var(--shadow); clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: 12%; text-align: center; color: var(--grey); }
.tag::before { content: ""; position: absolute; left: 6%; top: 50%; width: 6cqi; height: 6cqi; border-radius: 50%; background: var(--paper); translate: 0 -50%; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.tag .caps { font-size: 6cqi; }
.tag .script { font-size: 14cqi; color: var(--olive-d); }

/* Galerie-Stapel */
.stack { position: relative; aspect-ratio: 1.15; }
.stack .polaroid { position: absolute; width: 58%; transition: rotate .7s var(--ease), translate .7s var(--ease); }
.stack .polaroid:nth-child(1) { left: 2%; top: 8%; rotate: -10deg; }
.stack .polaroid:nth-child(2) { left: 38%; top: 4%; rotate: 8deg; }
.stack .polaroid:nth-child(3) { left: 20%; top: 12%; rotate: -1deg; }
a.piece:hover .stack .polaroid:nth-child(1), .album:hover .stack .polaroid:nth-child(1) { rotate: -16deg; translate: -6% 2%; }
a.piece:hover .stack .polaroid:nth-child(2), .album:hover .stack .polaroid:nth-child(2) { rotate: 14deg; translate: 7% 0; }
a.piece:hover .stack .polaroid:nth-child(3), .album:hover .stack .polaroid:nth-child(3) { translate: 0 -5%; }
.label-card { position: absolute; left: 50%; bottom: -8%; translate: -50% 0; width: 62%; aspect-ratio: 2.3; background: var(--cream) var(--grain); box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; justify-content: center; container-type: inline-size; z-index: 4; }
.label-card::before { content: ""; position: absolute; inset: 5%; border: 1px solid var(--sage); }
.label-card .script { font-size: 17cqi; color: var(--olive-d); }
.label-card .script.long { font-size: 12.5cqi; }  /* lange Titel wie „Herzensmenschen“ */
.label-card .caps { font-size: 5cqi; color: var(--grey); margin-top: 1cqi; }

.signature { position: absolute; left: 0; right: 0; text-align: center; color: #6f706b; }
.signature .caps { font-size: max(.7rem, 1.5cqw); }
.signature .script { font-size: max(2.6rem, 7cqw); color: var(--olive-d); margin: .1em 0; }

/* grünes Band (Footer) */
.band { position: relative; background: var(--olive) var(--grain); color: #eef0de; text-align: center; padding: clamp(40px, 7cqw, 70px) 16px clamp(34px, 6cqw, 60px); }
.band::before { content: ""; position: absolute; left: 3%; right: 3%; top: 12px; border-top: 1px solid rgba(238, 240, 222, .35); }
.stats { display: flex; justify-content: center; gap: clamp(14px, 5cqw, 50px); flex-wrap: wrap; }
.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 7cqw, 3.6rem); line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.stat span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.stats .sep { font-size: clamp(2rem, 6cqw, 3.2rem); line-height: 1; opacity: .6; align-self: flex-start; }
.band p { margin: 1.4em auto 0; max-width: 34em; }
.band a { color: #eef0de; }
.band .caps a { text-decoration: none; border-bottom: 1px solid rgba(238,240,222,.5); padding-bottom: 2px; }
.band .script { font-size: clamp(2.4rem, 7cqw, 3.4rem); color: #f4f5e8; margin: .2em 0; }
.band .flourish { color: rgba(238,240,222,.7); }

/* =========================================================
   Unterseiten
   ========================================================= */
.back { position: absolute; left: clamp(16px, 4cqw, 36px); top: clamp(16px, 3cqw, 28px); z-index: 20; text-decoration: none; color: var(--grey); font-size: .72rem; display: inline-flex; gap: .5em; align-items: center; transition: color .3s, gap .3s var(--ease); }
.back:hover { color: var(--olive-d); gap: .9em; }
.on-green .back, .back.light { color: rgba(238,240,222,.8); }
.on-green .back:hover, .back.light:hover { color: #fff; }
.home-seal { position: fixed; right: max(16px, calc(50vw - 450px + 18px)); top: 14px; width: 48px; z-index: 40; transition: transform .5s var(--ease); }
.home-seal:hover { transform: rotate(-12deg) scale(1.08); }

.sec { padding: 0 clamp(16px, 7cqw, 70px); }
.head { text-align: center; padding-top: clamp(70px, 11cqw, 110px); }
.head .script { font-size: clamp(3rem, 11cqw, 5.4rem); color: var(--olive-d); margin: 0; }
.head .caps { color: var(--grey); display: block; margin-top: .6em; }
.head p { max-width: 32em; margin: 1.1em auto 0; color: #5d5e56; }
.flourish { width: 180px; height: auto; margin: 1.4em auto; display: block; color: var(--olive-l); }

/* Banner mit Wiese („The Details“) */
.banner { position: relative; height: clamp(220px, 44cqw, 380px); overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: bannerIn 2.4s var(--ease) both; }
@keyframes bannerIn { from { transform: scale(1.25); filter: blur(4px); } }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,248,243,.1) 0%, rgba(250,248,243,.25) 50%, var(--paper) 100%); }
.banner .script { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; z-index: 2; font-size: clamp(3.2rem, 12cqw, 6rem); color: #fff; margin: 0; text-shadow: 0 2px 20px rgba(60, 60, 40, .35); animation: fadeUp 1.4s var(--ease) .4s both; }
.banner .back { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.3); }

/* ---------- Hochzeiten Übersicht ---------- */
.w-list { display: grid; gap: clamp(60px, 11cqw, 110px); padding: clamp(40px, 7cqw, 70px) 0 clamp(70px, 10cqw, 110px); }
.w-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; text-decoration: none; color: inherit; }
.w-item:nth-child(even) .w-photo { order: 2; }
.w-photo { position: relative; z-index: 2; rotate: -4deg; transition: rotate .7s var(--ease), translate .7s var(--ease); container-type: inline-size; }
.w-item:nth-child(even) .w-photo { rotate: 4deg; }
.w-item:hover .w-photo { rotate: 0deg; translate: 0 -8px; }
.w-card { position: relative; aspect-ratio: 300 / 380; margin-left: -12%; container-type: inline-size; filter: drop-shadow(0 6px 12px rgba(40,40,20,.14)); transition: translate .7s var(--ease); }
.w-item:nth-child(even) .w-card { margin-left: 0; margin-right: -12%; }
.w-item:hover .w-card { translate: 0 6px; }
.w-card__body { position: absolute; inset: 12% 14%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 3cqi; }
.w-card .script { font-size: 14cqi; color: var(--olive-d); }
.w-card .caps { font-size: 3.8cqi; color: var(--grey); }
.w-card p { font-size: max(.9rem, 5cqi); line-height: 1.45; margin: 0; font-style: italic; color: #5d5e56; }
.w-card .more { color: var(--olive-d); font-size: 3.8cqi; }
.w-item:hover .more .click { letter-spacing: .32em; }
.w-seal { position: absolute; width: 17%; right: -4%; bottom: -5%; z-index: 3; rotate: 12deg; }
.w-flower { position: absolute; width: 40%; left: -18%; top: -24%; z-index: 3; pointer-events: none; }
@media (max-width: 640px) {
  .w-item { grid-template-columns: 1fr; }
  .w-item:nth-child(even) .w-photo { order: 0; }
  .w-photo { width: 78%; justify-self: start; }
  .w-item:nth-child(even) .w-photo { justify-self: end; }
  .w-card, .w-item:nth-child(even) .w-card { margin: -7% 0 0 18%; width: 82%; }
  .w-item:nth-child(even) .w-card { margin: -7% 18% 0 0; }
}

/* ---------- Hochzeit Detail ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; margin: 2.2em auto 0; max-width: 640px; }
.facts .caps { color: var(--grey); font-size: .66rem; }
.facts div > div:last-child { font-size: 1.15rem; margin-top: .2em; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: 18px; } }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 5cqw, 44px) 16px; max-width: 620px; margin: 2.4em auto 0; text-align: center; }
@media (max-width: 520px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
.tl-item .icon { width: clamp(56px, 11cqw, 76px); height: auto; margin: 0 auto .4em; color: #5f605a; }
.tl-item .caps { font-size: .8rem; color: var(--ink); }
.tl-item .italic { color: var(--grey); display: block; }
.tl-item.in .icon path, .tl-item.in .icon circle, .tl-item.in .icon rect, .tl-item.in .icon ellipse { animation: draw 2.2s var(--ease) both; }
.tl-item .icon * { stroke-dasharray: 200; stroke-dashoffset: 0; }
@keyframes draw { from { stroke-dashoffset: 200; } }

/* Masonry-Galerie */
.masonry { columns: 3 220px; column-gap: clamp(14px, 2.4cqw, 24px); padding: 2.4em 0 1em; }
.m-item { break-inside: avoid; margin: 0 0 clamp(14px, 2.4cqw, 24px); background: #fdfdfb; padding: 4.5%; box-shadow: var(--shadow); cursor: zoom-in; rotate: var(--r, 0deg); transition: rotate .6s var(--ease), translate .6s var(--ease), box-shadow .6s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); border: 0; display: block; width: 100%; }
.m-item:hover, .m-item:focus-visible { rotate: 0deg; translate: 0 -5px; box-shadow: var(--shadow-lift); }
.m-item img { width: 100%; height: auto; }

.pager { display: flex; justify-content: space-between; gap: 16px; padding: 2em 0 3em; border-top: 1px solid var(--grey-l); margin-top: 2em; }
.pager a { text-decoration: none; color: var(--grey); transition: color .3s; }
.pager a:hover { color: var(--olive-d); }
.pager .script { display: block; font-size: 2rem; color: var(--olive-d); text-transform: none; letter-spacing: 0; }

/* ---------- Galerien Übersicht ---------- */
.albums { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(60px, 9cqw, 90px) clamp(20px, 5cqw, 50px); padding: clamp(50px, 8cqw, 80px) 0 clamp(80px, 10cqw, 110px); }
/* ungerade Anzahl: letztes Album mittig */
.album:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(10px, 2.5cqw, 25px)); }
@media (max-width: 560px) { .albums { grid-template-columns: 1fr; } .album:last-child:nth-child(odd) { width: auto; justify-self: stretch; } }
.album { text-decoration: none; color: inherit; container-type: inline-size; display: block; }
.album .stack { margin-bottom: 14%; }
.album .label-card { bottom: -16%; }

/* ---------- Unsere Geschichte (grün) ---------- */
.page.on-green { background: var(--olive) var(--grain); color: #eef0de; }
.story .head .script { color: #f4f5e8; }
.story .head .caps { color: rgba(238,240,222,.75); }
.frame { position: relative; width: min(78%, 440px); margin: clamp(26px, 5cqw, 44px) auto 0; aspect-ratio: 4 / 5; rotate: -2deg; container-type: inline-size; }
.frame .scallop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 20px rgba(20,24,10,.3)); }
.frame .photo { position: absolute; inset: 9%; overflow: hidden; background: #333; }
.frame .photo img { width: 100%; height: 100%; object-fit: cover; }
.frame .corner-flower { position: absolute; width: 42%; left: -20%; top: -9%; z-index: 3; }
.frame .corner-seal { position: absolute; width: 18%; right: -3%; bottom: 4%; z-index: 3; rotate: 14deg; }
.story-text { max-width: 36em; margin: clamp(40px, 7cqw, 64px) auto 0; text-align: center; }
.story-text .lead { font-size: clamp(1.35rem, 3.6cqw, 1.7rem); font-style: italic; line-height: 1.45; color: #f7f8ec; }
.story-text p { color: rgba(238,240,222,.9); }
.story .signature-inline { text-align: center; margin: 2em 0 0; }
.story .signature-inline .script { font-size: clamp(2.6rem, 8cqw, 3.6rem); color: #f4f5e8; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1em 2.2em; background: var(--olive); color: #f4f5e8; text-decoration: none; border: 0; cursor: pointer; letter-spacing: .22em; text-transform: uppercase; font-size: .78rem; font-weight: 500; transition: background .4s, letter-spacing .5s var(--ease), translate .4s var(--ease), box-shadow .4s; box-shadow: 0 6px 16px rgba(60,62,30,.2); }
.btn:hover { background: var(--olive-d); letter-spacing: .3em; translate: 0 -2px; }
.btn.light { background: #eef0de; color: var(--olive-d); }
.btn.light:hover { background: #fff; }
.story .cta { text-align: center; padding: 2.6em 0 4.5em; }

/* ---------- Kontakt ---------- */
.contact .head .seal-wrap { width: 84px; margin: 0 auto 10px; }
.form-wrap { max-width: 560px; margin: 0 auto; padding: 1.6em 0 4em; transition: opacity .6s, transform .8s var(--ease-io); }
.form-wrap.is-sending { opacity: 0; transform: translateY(40px) scale(.94); pointer-events: none; }
.field { margin: 0 0 1.7em; }
.field > label, .field > legend { display: block; font-style: italic; font-size: 1.12rem; margin-bottom: .45em; color: #55564e; padding: 0; }
.field .req { color: var(--olive); }
fieldset.field { border: 0; padding: 0; margin: 0 0 1.7em; min-width: 0; }
.input { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: #efece5; border: 0; border-bottom: 1px solid transparent; padding: .8em 1em; border-radius: 0; outline: none; transition: background .3s, border-color .3s, box-shadow .4s; appearance: none; -webkit-appearance: none; }
.input::placeholder { color: #a9a79e; font-style: italic; }
.input:hover { background: #ebe7df; }
.input:focus { background: #f6f4ef; border-bottom-color: var(--olive); box-shadow: 0 8px 18px -12px rgba(90,94,50,.5); }
textarea.input { min-height: 170px; resize: vertical; line-height: 1.55; }
input[type="date"].input { min-height: 3em; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: .55em; padding: .55em 1.1em; background: #efece5; cursor: pointer; transition: background .3s, color .3s, translate .3s var(--ease); font-size: 1rem; user-select: none; }
.chip span::before { content: ""; width: 11px; height: 11px; border: 1px solid var(--grey); border-radius: 50%; transition: background .3s, border-color .3s, box-shadow .3s; }
.chip span:hover { translate: 0 -2px; }
.chip input:checked + span { background: var(--olive); color: #f4f5e8; }
.chip input:checked + span::before { background: #f4f5e8; border-color: #f4f5e8; box-shadow: inset 0 0 0 2px var(--olive); }
.chip input:focus-visible + span { outline: 1.5px dashed var(--olive); outline-offset: 3px; }
.field.error .input, .field.error .chips { box-shadow: 0 0 0 1px #b58a6a; }
.err-msg { color: #9b6b4c; font-size: .92rem; font-style: italic; margin-top: .35em; display: none; }
.field.error .err-msg { display: block; animation: fadeUp .4s var(--ease); }
.field.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.submit { width: 100%; padding: 1.25em; font-size: .82rem; margin-top: .6em; }
.fine { text-align: center; color: var(--grey); font-size: .95rem; font-style: italic; margin-top: 1em; }

/* Versand-Animation */
.send-scene { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; }
.send-scene .env { width: min(420px, 84vw); animation: envIn .8s var(--ease) both; cursor: default; }
.send-scene .env__letter { transform: translateY(-120%); opacity: 0; }
.send-scene.s-drop .env__letter { transition: transform 1s var(--ease-io), opacity .3s; transform: translateY(0); opacity: 1; }
.send-scene .env__seal { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
.send-scene.s-seal .env__seal { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.send-scene.s-fly .env { animation: flyAway 1.1s var(--ease-io) forwards; }
@keyframes flyAway { 30% { transform: translateY(10px) rotate(-3deg); } 100% { transform: translate(60vw, -80vh) rotate(24deg) scale(.4); opacity: 0; } }

.thanks { text-align: center; padding: 3em 0 5em; max-width: 520px; margin: 0 auto; }
.thanks .script { font-size: clamp(3rem, 10cqw, 4.6rem); color: var(--olive-d); margin: 0; }
.thanks > * { animation: fadeUp 1s var(--ease) both; }
.thanks > *:nth-child(2) { animation-delay: .15s; } .thanks > *:nth-child(3) { animation-delay: .3s; } .thanks > *:nth-child(4) { animation-delay: .45s; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; background: rgba(38, 39, 30, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s var(--ease); }
.lightbox.open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; height: 100svh; padding: 5vh 0; }
.lb-stage img { max-width: 100%; max-height: 82vh; object-fit: contain; background: #fdfdfb; padding: 12px 12px 40px; box-shadow: 0 30px 80px rgba(0,0,0,.4); transition: opacity .35s, transform .45s var(--ease); }
.lb-stage img.swap { opacity: 0; transform: translateX(var(--sx, 30px)) rotate(var(--sr, 2deg)); }
.lb-count { color: rgba(238,240,222,.7); margin-top: 12px; letter-spacing: .22em; font-size: .72rem; }
.lightbox button { background: none; border: 0; color: #eef0de; font-size: 2.6rem; cursor: pointer; line-height: 1; opacity: .75; transition: opacity .3s, transform .3s; padding: 10px; }
.lightbox button:hover { opacity: 1; transform: scale(1.12); }
.lb-close { position: absolute; top: 10px; right: 14px; z-index: 2; }
/* Handy: Bild über die volle Breite, Pfeile unten */
@media (max-width: 600px) {
  .lightbox { grid-template-columns: 1fr; height: 100dvh; }
  .lb-stage { grid-column: 1; grid-row: 1; width: 100%; height: 100dvh; padding: 56px 14px 84px; box-sizing: border-box; }
  .lb-stage img { max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto; padding: 8px 8px 28px; }
  .lb-prev, .lb-next { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 2; }
  .lb-prev { left: 20px; } .lb-next { right: 20px; }
  .lb-close { top: calc(8px + env(safe-area-inset-top)); }
}

/* ---------- Eigene Bilder für Deko-Elemente ---------- */
img.own { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
img.own.fill, img.own.card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
img.own.card-bg { object-fit: fill; }
img.own.bouquet { transform-origin: 50% 55%; animation: sway 7s ease-in-out infinite alternate; }
img.own.extra { filter: drop-shadow(0 6px 10px rgba(40,38,30,.18)); }
img.own.env-open, img.own.tray { filter: drop-shadow(0 8px 14px rgba(40,38,30,.2)); }
.frame img.own.scallop { z-index: 2; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(20,24,10,.3)); }
.has-own { background: none !important; box-shadow: none !important; clip-path: none !important; border-radius: 0 !important; overflow: visible !important; }
.has-own::before { display: none !important; }
.has-own > :not(.own) { position: relative; z-index: 1; }
.green-env.has-own .green-env__txt, .green-env.has-own .green-env__cta { position: absolute; }
.has-own img.own.fill { filter: drop-shadow(0 6px 12px rgba(40,38,30,.18)); }

/* ---------- FAQ-Karteikarte (Collage) ---------- */
.faq-card { position: relative; aspect-ratio: 1.45; background-color: #fdfcf7;
  background-image: linear-gradient(90deg, transparent 13%, rgba(201,155,144,.45) 13%, rgba(201,155,144,.45) calc(13% + 1px), transparent calc(13% + 1px)),
    repeating-linear-gradient(180deg, transparent 0 calc(11% - 1px), rgba(143,163,196,.35) calc(11% - 1px) 11%), var(--grain);
  background-position: 0 0, 0 18%, 0 0; }
.faq-card .tape { top: -6%; left: 40%; width: 26%; height: 13%; rotate: 3deg; }
.faq-card__txt { position: absolute; inset: 14% 8% 10% 20%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; }
.faq-card .script { font-size: 12.5cqi; color: var(--olive-d); line-height: 1.1; }
.faq-card .q { font-size: 3.6cqi; color: var(--grey); }
.faq-card .click { font-size: 3.6cqi; color: var(--grey); margin-top: 2.5cqi; }
.faq-card__flower { position: absolute; right: 2%; bottom: 4%; width: 24%; rotate: 14deg; }
.pressed { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(40,50,30,.18)); }

/* ---------- FAQ-Seite ---------- */
.faq .head { position: relative; }
.faq-flowers { width: clamp(120px, 20cqw, 170px); margin: -10px auto -34px; pointer-events: none; }
.faq-list { max-width: 680px; margin: 0 auto; padding: 1.5em 0 1em; display: grid; gap: clamp(34px, 6cqw, 54px); }
.faq-group { display: grid; gap: 14px; }
.faq-group h2 { color: var(--olive); margin: 0 0 .4em; text-align: center; font-size: .78rem; }
.faq-item { background: #fdfcf7 var(--grain); box-shadow: var(--shadow); rotate: var(--r, 0deg); transition: rotate .6s var(--ease), box-shadow .6s var(--ease), translate .6s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); position: relative; }
.faq-item::before { content: ""; position: absolute; left: 2.2em; top: 0; bottom: 0; width: 1px; background: rgba(201,155,144,.4); pointer-events: none; }
.faq-item:hover, .faq-item.open { rotate: 0deg; box-shadow: var(--shadow-lift); }
.faq-item:hover { translate: 0 -2px; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; cursor: pointer; text-align: left; padding: 1.05em 1.2em 1.05em 3.1em; font-size: 1.2rem; font-weight: 500; color: var(--ink); }
.faq-plus { position: relative; flex: none; width: 26px; height: 26px; border: 1px solid var(--sage); border-radius: 50%; transition: transform .5s var(--ease), background .4s, border-color .4s; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: var(--olive); translate: -50% -50%; transition: rotate .5s var(--ease), background .4s; }
.faq-plus::after { rotate: 90deg; }
.faq-item.open .faq-plus { transform: rotate(135deg); background: var(--olive); border-color: var(--olive); }
.faq-item.open .faq-plus::before, .faq-item.open .faq-plus::after { background: #f4f5e8; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 1.4em 1.3em 3.1em; color: #55564e; opacity: 0; translate: 0 -8px; transition: opacity .5s var(--ease) .05s, translate .6s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a p { opacity: 1; translate: 0 0; }
.faq-cta { text-align: center; padding: 2.4em 0 4.5em; }
.faq-cta .pressed-wrap { width: 64px; margin: 0 auto .4em; rotate: -8deg; }
.faq-cta p { font-size: 1.25rem; margin: 0 0 1em; }

@media (max-width: 640px) {
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 10px; }
  .stats .sep { display: none; }
}

/* =========================================================
   EDLE MATERIAL-EBENE – Papier, Leinen, Prägung, Siegel
   (liegt über den Grundstilen; Texturen in assets/deko/)
   ========================================================= */
:root {
  --olive: #6f7650;
  --olive-d: #4d5337;
  --olive-l: #a2a784;
  --ink: #45463e;
  --grey: #8a8880;
  --tex-paper: url(../assets/deko/papier-elfenbein.jpg);
  --tex-linen: url(../assets/deko/leinen-beige.jpg);
  --tex-linen-green: url(../assets/deko/leinen-salbei.jpg);
  --shadow: 0 1px 1px rgba(40, 36, 26, .10), 0 6px 12px -2px rgba(40, 36, 26, .14), 0 22px 38px -10px rgba(40, 36, 26, .22);
  --shadow-lift: 0 2px 2px rgba(40, 36, 26, .10), 0 16px 26px -4px rgba(40, 36, 26, .20), 0 40px 60px -18px rgba(40, 36, 26, .28);
}
body { background: #e5dfd3 var(--tex-linen) 0 0 / 300px; color: var(--ink); }
.page { background: #faf8f2 var(--tex-paper) 0 0 / 520px; box-shadow: 0 0 0 1px rgba(60, 50, 30, .04), 0 2px 4px rgba(60, 50, 30, .06), 0 40px 90px rgba(60, 50, 30, .16); }
.page.on-green, .band { background: #6c734c var(--tex-linen-green) 0 0 / 260px; }
.band { box-shadow: inset 0 18px 30px -24px rgba(0, 0, 0, .35); }
.band::before { border-top-color: rgba(238, 240, 222, .28); }
.intro { background: radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%), #f6f3ec var(--tex-paper) 0 0 / 520px; }
.intro::before { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(80, 70, 50, .10) 100%); }

/* Typografie: feiner, mehr Luft */
.caps { letter-spacing: .26em; font-size: .7rem; font-weight: 500; }
.script { color: var(--olive-d); }
.head .script, .intro__names { color: #4d5337; }
.head p, .story-text p { font-size: 1.16rem; }

/* Siegel & Blumen als Bilder */
img.seal, .seal { filter: drop-shadow(0 1px 1px rgba(30, 30, 20, .30)) drop-shadow(0 6px 9px rgba(30, 30, 20, .18)); }
img.own.bouquet { filter: drop-shadow(0 5px 6px rgba(45, 50, 30, .18)) drop-shadow(0 16px 18px rgba(45, 50, 30, .10)); transform-origin: 50% 45%; }
img.own.pressed { filter: drop-shadow(0 2px 2px rgba(45, 50, 30, .18)); }
.home-seal { width: 58px; }
.env__seal { width: 19%; }

/* Umschlag aus gerenderten Lagen */
.env.has-img .env__back { background: none; border-radius: 2px; box-shadow: 0 2px 3px rgba(40, 35, 25, .10), 0 24px 44px -12px rgba(40, 35, 25, .30); overflow: hidden; }
.env-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.env.has-img .flap-front, .env.has-img .flap-back { clip-path: none; background: none; }
.env.has-img .flap-front::after, .env.has-img .flap-back::after { display: none; }
.env.has-img .flap-shadow { opacity: .55; }
.env.has-img .env__pocket { filter: drop-shadow(0 -1px 2px rgba(40, 35, 25, .10)); }
.env__letter::before { border-color: rgba(143, 150, 112, .45); inset: 5.5%; }
.env__letter::after { content: ""; position: absolute; inset: 7.5%; border: 1px solid rgba(143, 150, 112, .22); pointer-events: none; }
.env__letter .script { color: #4d5337; }

/* Grüne Einladungskarte – Schrift wie eingedruckt */
.invite .caps { color: #e6e8d3; letter-spacing: .24em; text-shadow: 0 -1px 0 rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .06); font-size: 3.9cqi; }
.invite .script { color: #f2f1e3; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(255, 255, 255, .05); font-size: 14cqi; }
.invite .small { font-size: 3.2cqi; opacity: .9; }
.invite__body { inset: 16% 13%; gap: 4.5cqi; }
.invite { filter: drop-shadow(0 2px 2px rgba(30, 32, 18, .22)) drop-shadow(0 18px 24px rgba(30, 32, 18, .20)); }

/* Karte auf dem Silbertablett */
.tray-card { width: 52%; translate: -50% -54%; rotate: -3deg; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .16)) drop-shadow(0 10px 14px rgba(0, 0, 0, .14)); }
.tray-card__txt .script, .tray-card__txt .caps { color: #6b6c64; text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .06); }
.tray-card__txt .script { font-size: 15cqi; }
img.own.tray { filter: drop-shadow(0 3px 3px rgba(30, 30, 30, .20)) drop-shadow(0 24px 30px rgba(30, 30, 30, .22)); }
img.own.env-open { filter: drop-shadow(0 2px 2px rgba(40, 35, 25, .14)) drop-shadow(0 18px 26px rgba(40, 35, 25, .20)); }

/* grüner Umschlag, Bogenkarte, Anhänger, Etikett, FAQ-Karte */
.green-env.has-own .green-env__txt, .green-env.has-own .green-env__cta { color: #eef0de; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); }
.green-env.has-own .green-env__txt { top: 9%; }
.has-own img.own.fill { filter: drop-shadow(0 2px 2px rgba(40, 36, 26, .16)) drop-shadow(0 16px 24px rgba(40, 36, 26, .18)); }
.arch.has-own { color: #75776e; }
.arch.has-own .script, .arch.has-own .caps { text-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
.arch.has-own .swans { color: #8e8f87; }
.tag.has-own { aspect-ratio: 1.36; padding-left: 16%; }
.tag.has-own .script { color: #5b604a; }
.tag.has-own .caps { color: #8a8474; }
.label-card.has-own .script { color: var(--olive-d); }
.faq-card.has-own .faq-card__txt { inset: 18% 8% 10% 19%; }
.faq-card.has-own .script { color: #4d5337; }
.w-card img.own.card-bg { filter: none; }
.w-card { filter: drop-shadow(0 2px 2px rgba(40, 36, 26, .12)) drop-shadow(0 16px 24px rgba(40, 36, 26, .16)); }

/* Fotos: Papierabzüge statt Plastik-Polaroids */
.polaroid, .m-item { background: #fcfbf7 var(--tex-paper) 0 0 / 300px; }
.polaroid { padding: 5% 5% 15%; }
.polaroid img, .m-item img { box-shadow: 0 0 0 1px rgba(40, 36, 26, .06); }
.polaroid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 30%, transparent 70%, rgba(0,0,0,.04)); }
.polaroid .cap { color: #8a8880; }

/* Pergament-Klebeband mit gerissenen Kanten */
.tape { background: linear-gradient(180deg, rgba(251, 249, 242, .78), rgba(238, 233, 220, .72)); box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 2%, 20% 6%, 100% 0, 97% 12%, 100% 25%, 96% 40%, 100% 55%, 97% 70%, 100% 85%, 96% 100%, 88% 92%, 80% 100%, 0 100%, 3% 88%, 0 75%, 4% 60%, 0 45%, 3% 30%, 0 18%); }

/* Spitzenrahmen: Foto liegt darunter */
.frame .photo { inset: 11%; }
.frame img.own.scallop { filter: drop-shadow(0 2px 2px rgba(20, 24, 10, .25)) drop-shadow(0 18px 30px rgba(20, 24, 10, .30)); }

/* Formular & Buttons */
.input { background: rgba(236, 232, 223, .75); }
.input:focus { background: rgba(250, 248, 243, .95); }
.btn { background: #6c734c var(--tex-linen-green) 0 0 / 200px; box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 8px 18px -6px rgba(50, 54, 28, .45); text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); }
.btn:hover { background-color: #5c6240; filter: brightness(.94); }
.btn.light { background: #f3f1e8 var(--tex-paper) 0 0 / 300px; color: var(--olive-d); text-shadow: none; }
.chip span { background: rgba(236, 232, 223, .8); }
.faq-item { background: #fcfbf6 var(--tex-paper) 0 0 / 400px; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .petals { display: none; }
}
.green-env.has-own .script { color: #f0f1e2; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .06); }
.band .script { color: #f4f5e8; }
.story .head .script, .story .signature-inline .script { color: #f4f5e8; }
.thanks .script { color: var(--olive-d); }

/* Video-Vorlage: Karte rechts auf der Silberplatte, Blumen in den Ecken */
.tray-card { left: 66%; top: 50%; width: 44%; translate: -50% -50%; rotate: 5deg; }
a.piece:hover .tray-card { rotate: 2deg; }
.tray-card__txt { padding: 0 12%; }
.tray-card__txt .script { font-size: 17cqi; line-height: 1.05; }
.tray-card__txt .caps { font-size: 5.2cqi; margin-top: 6cqi; }
.faq .head { position: relative; }
.faq-flowers { position: absolute; left: clamp(0px, 3cqw, 30px); top: clamp(20px, 4cqw, 40px); width: clamp(90px, 15cqw, 150px); margin: 0; rotate: -6deg; }
.w-flower { width: 30%; left: -12%; top: -18%; }
.frame .corner-flower { width: 34%; left: -16%; top: -6%; }
.faq-card__flower { width: 20%; right: 3%; bottom: -14%; rotate: 8deg; }
img.own.bouquet { animation-duration: 9s; }
.invite .script { font-size: 13cqi; }

/* =========================================================
   VIDEO-ANGLEICHUNG – hell, ruhig, Salbei, feine Serifen
   ========================================================= */
:root { --olive: #7a7f57; --olive-d: #565a44; --script-grey: #66685d; --band: #858a69; }
.caps { letter-spacing: .16em; }
.page { background: linear-gradient(rgba(251, 250, 247, .55), rgba(251, 250, 247, .55)), #fbfaf7 var(--tex-paper) 0 0 / 520px; }
.band, .page.on-green { background: linear-gradient(rgba(142, 147, 112, .55), rgba(142, 147, 112, .55)), var(--band) var(--tex-linen-green) 0 0 / 240px; box-shadow: none; }
.band::before { display: none; }
.head .script { color: var(--script-grey); }

/* Intro: schlicht wie im Video */
.intro { background: linear-gradient(rgba(250, 249, 246, .7), rgba(250, 249, 246, .7)), #f9f8f4 var(--tex-paper) 0 0 / 520px; }
.intro::before { display: none; }
.intro__inner { width: min(440px, 88vw); gap: clamp(10px, 2vh, 18px); }
.intro__kicker { font-size: .66rem; letter-spacing: .14em; color: #8a8980; }
.intro__names { font-size: clamp(3rem, 12vw, 4.4rem); color: #55584a; margin-bottom: clamp(6px, 2vh, 18px); }
.intro__env-wrap { width: 82%; }
.intro__hint { font-size: .62rem; letter-spacing: .14em; color: #8a8980; margin-top: clamp(8px, 2vh, 16px); }

/* Karten-Typo wie im Video: kompakte Versalien */
.invite .caps { letter-spacing: .1em; font-size: 4.4cqi; line-height: 1.35; }
.invite .script { font-size: 14.5cqi; }
.invite .small { font-size: 3.5cqi; }
.invite__body { inset: 17% 14%; gap: 5cqi; }
.green-env__cta { letter-spacing: .1em; font-size: 3.6cqi; }
.arch .caps, .tray-card__txt .caps, .label-card .caps, .faq-card .caps { letter-spacing: .1em; }

/* Schwanen-Karte */
.swan-card { position: relative; aspect-ratio: 760 / 820; container-type: inline-size; }
.swan-card .own.fill { object-fit: contain; filter: drop-shadow(0 2px 2px rgba(40, 36, 26, .14)) drop-shadow(0 14px 20px rgba(40, 36, 26, .16)); }
.swan-card__txt { position: absolute; left: 24%; right: 12%; top: 64%; text-align: center; font-size: 6.4cqi; letter-spacing: .1em; line-height: 1.25; color: #8b887e; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); z-index: 1; }

/* „Mit Liebe“ unter der Collage */
.sig { text-align: center; padding: clamp(24px, 5cqw, 50px) 16px clamp(40px, 7cqw, 70px); color: #6d6e66; }
.sig .caps { font-size: .7rem; }
.sig .script { font-size: clamp(2.8rem, 9cqw, 4.2rem); color: #55584a; margin: .1em 0 .15em; }

/* Band mit Countdown */
.band { padding: clamp(40px, 7cqw, 64px) 16px clamp(34px, 6cqw, 56px); }
.countdown { display: flex; justify-content: center; align-items: flex-start; gap: clamp(6px, 2.4cqw, 22px); color: #f5f5ea; }
.countdown .cd { display: flex; flex-direction: column; align-items: center; min-width: 2.2em; }
.countdown b { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 8cqw, 3.8rem); line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; }
.countdown b.tick { animation: tick .6s var(--ease); }
@keyframes tick { from { opacity: .2; transform: translateY(-6px); } }
.countdown span { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .6em; opacity: .9; }
.countdown .sep { font-size: clamp(2rem, 7cqw, 3.4rem); line-height: 1; opacity: .8; }
.cd-label { margin: 1.2em 0 0; font-size: .74rem; }
.band-contact { font-size: 1.05rem; margin: 1.6em auto 0; line-height: 1.5; }
.band-contact a { text-decoration: none; border-bottom: 1px solid rgba(245, 245, 234, .45); }
.band .script { margin: .2em 0 0; }
.band .caps + .script { margin-top: .1em; }
.band-back { margin-top: 1.8em; font-size: .72rem; }
.band-back a { border: 0 !important; }
@media (max-width: 640px) {
  .countdown { gap: 4px; }
  .countdown span { font-size: .48rem; letter-spacing: .08em; }
  .countdown .sep { font-size: 1.8rem; }
  .countdown b { font-size: 2rem; }
}

/* Anfrage-Seite wie „Kindly Reply“ */
.crest-wrap { width: 76px; margin: 0 auto 6px; color: #8b8a84; }
.crest { width: 100%; height: auto; display: block; }
.contact .head .script { font-size: clamp(3rem, 11cqw, 4.6rem); }
.contact .field > label, .contact .field > legend { font-weight: 600; font-style: italic; color: #3f4036; font-size: 1.14rem; }
.contact .input { background: transparent; border: 1px solid #c9c6bd; border-radius: 0; }
.contact .input:hover { background: rgba(255, 255, 255, .4); }
.contact .input:focus { background: rgba(255, 255, 255, .7); border-color: var(--olive); box-shadow: none; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: block; padding: .75em 1em; background: #e7e5de; font-style: italic; font-size: 1.05rem; cursor: pointer; transition: background .35s, color .35s, padding-left .45s var(--ease); }
.opt span:hover { background: #dedbd2; padding-left: 1.3em; }
.opt input:checked + span { background: #b3b797; color: #2f3127; }
.opt input:focus-visible + span { outline: 1.5px dashed var(--olive); outline-offset: 3px; }
.field.error .opts { box-shadow: 0 0 0 1px #b58a6a; }
.contact .submit { background: #e2e0d3; color: #3b3c33; border-radius: 6px; text-transform: none; letter-spacing: .02em; font: 600 1.2rem var(--serif); box-shadow: none; text-shadow: none; }
.contact .submit:hover { background: #d6d4c4; letter-spacing: .06em; filter: none; }

/* Hochzeit-Details wie „The Details“ */
.banner.painted { height: clamp(220px, 46cqw, 400px); }
.banner.painted img { filter: saturate(.9); }
.banner.painted::after { background: linear-gradient(180deg, rgba(250,249,246,0) 45%, rgba(250,249,246,.85) 88%, #fbfaf7 100%); }
.details { text-align: center; padding-bottom: 20px; }
.details .sub { font-size: clamp(2.6rem, 8cqw, 3.8rem); color: var(--script-grey); margin: clamp(40px, 8cqw, 70px) 0 .5em; }
.details .sub:first-child { margin-top: 10px; }
.d-block { margin: 1.2em 0; }
.d-block .caps { color: #8a8980; font-size: .68rem; }
.d-block p { margin: .25em 0 0; font-size: 1.12rem; color: #4d4e45; }
.d-intro { max-width: 32em; margin: 1.6em auto 0; font-size: 1.15rem; color: #5d5e56; }
.swatches { display: flex; justify-content: center; gap: clamp(8px, 2cqw, 16px); }
.swatches i { width: clamp(38px, 8cqw, 56px); aspect-ratio: 3 / 4.2; border-radius: 999px 999px 3px 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 6px 12px -6px rgba(40,36,26,.35); transition: translate .5s var(--ease); }
.swatches i:hover { translate: 0 -6px; }
.details .timeline { margin-top: 1em; }
.tl-item .icon { color: #6b6c64; }
.tl-item .caps { letter-spacing: .08em; }

/* Geschichte: helleres, flaches Salbei wie im Video */
.story .head .script { color: #f6f6ec; }
.story-text p { color: rgba(250, 250, 240, .92); }
.banner.painted h1.script { text-shadow: 0 2px 18px rgba(40, 45, 30, .55), 0 1px 3px rgba(40, 45, 30, .35); bottom: 26%; }
.banner.painted::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 70%, rgba(60, 66, 44, .28), transparent 65%); pointer-events: none; }
@media (max-width: 640px) { .home-seal { width: 42px; top: 10px; } }
.band .band-contact + .caps { margin-top: 1.8em; }

/* =========================================================
   PAPETERIE-ANGLEICHUNG: Logo, Tinte (Braun), Aquarellblumen
   ========================================================= */
:root { --ink: #5e4836; --ink-l: #8a715e; --script-grey: #5e4836; }
.head .script, .sig .script, .details .sub, .intro__names, .contact .head .script, .thanks .script { color: var(--ink); }
.logo { display: block; width: 100%; height: auto; user-select: none; }
.intro__logo { width: clamp(84px, 22vw, 118px); margin: 0 auto -4px; opacity: .92; animation: fadeUp 1.1s var(--ease) .1s both; }
.sig-logo { width: clamp(90px, 16cqw, 130px); margin: 12px auto 0; }
img.own.bouquet { filter: drop-shadow(0 3px 4px rgba(60, 50, 35, .12)); }

/* Footer */
.band { padding-top: clamp(34px, 6cqw, 56px); }
.band-logo { width: clamp(96px, 16cqw, 130px); margin: 0 auto 10px; }
.band-claim { margin: 10px 0 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.band-claim .caps { font-size: .72rem; opacity: .9; }
.band-claim .script { font-size: clamp(2rem, 6cqw, 2.8rem); color: #f7f6ec; margin: 0; }
.contact-rows { display: inline-grid; gap: 10px; text-align: left; margin: 0 auto; }
.c-row { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #f6f6ec; font-size: 1.12rem; letter-spacing: .06em; transition: translate .4s var(--ease); }
.c-row:hover { translate: 4px 0; }
.c-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: rgba(236, 232, 223, .92); color: #a86f64; }
.c-ic .icon { width: 26px; height: 26px; }
.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 26px 0 0; font-size: .7rem; }
.legal a { text-decoration: none; border-bottom: 1px solid rgba(245, 245, 234, .4); padding-bottom: 1px; }
.legal a:hover { border-color: #fff; }
.copy { font-size: .78rem; opacity: .7; margin: 14px 0 0; }

/* Preiskarte in der Collage */
.price-card { position: relative; aspect-ratio: 900 / 1140; container-type: inline-size; filter: drop-shadow(0 2px 2px rgba(40, 36, 26, .12)) drop-shadow(0 14px 22px rgba(40, 36, 26, .16)); }
.price-card__txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink); z-index: 1; }
.price-card__txt .caps { font-size: 4.6cqi; letter-spacing: .12em; color: var(--ink-l); }
.price-card__txt .script { font-size: 24cqi; margin: 2cqi 0 4cqi; color: var(--ink); }
.price-card__flower { position: absolute; width: 26%; right: -8%; top: -14%; rotate: 16deg; z-index: 2; filter: drop-shadow(0 3px 4px rgba(60, 50, 35, .15)); }

/* Preisseite */
.prices { position: relative; }
.sprenkel { position: absolute; width: clamp(140px, 30cqw, 280px); opacity: .55; pointer-events: none; }
.sp-l { left: -2%; top: 20px; }
.sp-r { right: -2%; bottom: 120px; rotate: 180deg; }
.prices .head { position: relative; }
.prices .head .caps { font-size: .9rem; letter-spacing: .12em; color: var(--ink); font-variant: small-caps; text-transform: none; font-weight: 600; }
.prices .head h1.script { font-size: clamp(3.2rem, 11cqw, 5.4rem); margin-top: .05em; }
.head-flower { position: absolute; width: clamp(70px, 14cqw, 130px); pointer-events: none; filter: drop-shadow(0 3px 4px rgba(60,50,35,.12)); }
.hf-l { left: 0; top: clamp(50px, 9cqw, 90px); rotate: -14deg; }
.hf-r { right: 2%; top: clamp(40px, 8cqw, 80px); rotate: 12deg; }
@media (max-width: 640px) { .head-flower { width: 60px; opacity: .8; } .hf-l { left: -10px; } .hf-r { right: -6px; } }
.prices .sub { text-align: center; font-size: clamp(2.6rem, 8cqw, 3.8rem); color: var(--ink); margin: clamp(46px, 8cqw, 76px) 0 .6em; }
.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: clamp(14px, 2.6cqw, 26px); align-items: center; }
.pkgs:has(> .pkg:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 66%; margin: 0 auto; }
@media (max-width: 720px) { .pkgs, .pkgs:has(> .pkg:nth-child(2):last-child) { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }
.pkg { position: relative; aspect-ratio: 900 / 1260; container-type: inline-size; filter: drop-shadow(0 2px 2px rgba(40,36,26,.12)) drop-shadow(0 16px 24px rgba(40,36,26,.16)); transition: translate .6s var(--ease), rotate .6s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }
.pkg:hover { translate: 0 -8px; }
.pkg:nth-child(1) { rotate: -2deg; } .pkg:nth-child(3) { rotate: 2deg; }
.pkg--featured { aspect-ratio: 900 / 1260; z-index: 2; scale: 1.06; }
.pkg .card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.pkg__body { position: absolute; inset: 13% 13% 11%; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); }
.pkg__body .caps { font-size: 4.6cqi; letter-spacing: .12em; color: var(--ink-l); }
.pkg__body h3 { font-size: 19cqi; margin: 1cqi 0 3cqi; font-weight: 400; color: var(--ink); }
.pkg__price { font-family: var(--serif); font-size: 9cqi; letter-spacing: .04em; font-variant: small-caps; padding: 1.5cqi 5cqi; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .9; }
.pkg ul { list-style: none; padding: 0; margin: 6cqi 0 0; font-style: italic; font-size: 5.6cqi; line-height: 1.5; }
.pkg li + li { margin-top: 1.6cqi; }
.pkg li::before { content: "·"; margin-right: .4em; opacity: .6; }
.pkg--featured .pkg__body, .pkg--featured .pkg__body .caps, .pkg--featured h3 { color: #f5f4e8; text-shadow: 0 -1px 0 rgba(0,0,0,.2); }
.pkg__seal { position: absolute; width: 20cqi; top: -12cqi; right: -8cqi; rotate: 12deg; }
.extras { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
.extra { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 18px; padding: 16px 22px; background: #fcfbf6 var(--tex-paper) 0 0 / 400px; box-shadow: var(--shadow); color: var(--ink); transition: translate .5s var(--ease), box-shadow .5s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }
.extra:hover { translate: 0 -3px; box-shadow: var(--shadow-lift); }
.extra__ic { width: 58px; height: 58px; display: grid; place-items: center; background: #ece7dd; color: #a86f64; }
.extra__ic .icon { width: 34px; height: 34px; }
.extra h4 { font-size: 2rem; margin: 0; font-weight: 400; }
.extra p { margin: 0; color: #6d6356; line-height: 1.4; }
.extra__price { font-size: .78rem; white-space: nowrap; color: var(--ink); }
@media (max-width: 520px) { .extra { grid-template-columns: 46px 1fr; } .extra__ic { width: 46px; height: 46px; } .extra__price { grid-column: 2; } }
.sessions { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 6cqw, 56px) clamp(18px, 4cqw, 40px); }
@media (max-width: 560px) { .sessions { grid-template-columns: 1fr; } }
.session { rotate: var(--r); container-type: inline-size; transition: rotate .6s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }
.session:hover { rotate: 0deg; }
.session__txt { text-align: center; color: var(--ink); margin-top: 12px; }
.session__txt h4 { font-size: 2.6rem; margin: 0; font-weight: 400; }
.session__txt p { margin: .2em auto .5em; max-width: 26em; color: #6d6356; }
.session__txt .caps { font-size: .78rem; }
.price-note { text-align: center; color: #7b7064; max-width: 34em; margin: clamp(40px, 7cqw, 64px) auto 0; }
.prices .cta { text-align: center; padding: 1.4em 0 3.4em; }
.prices .cta .ranke { width: 90px; margin: 0 auto 10px; rotate: 90deg; opacity: .8; }

/* Impressum / Datenschutz */
.legal-logo { width: 110px; margin: 0 auto 8px; }
.legal-body { max-width: 34em; margin: 1.6em auto 3.5em; text-align: center; color: #4f463c; }
.legal-body h3 { color: var(--ink-l); font-size: .72rem; margin: 2em 0 .4em; }
.legal-body p { margin: 0; line-height: 1.6; }
.legal-todo { background: #f3eee2; padding: 1em 1.2em; font-style: italic; margin-bottom: 1em !important; }
.price-card__flower { width: 13%; right: -2%; top: -22%; }
.pkg ul { font-size: 5cqi; margin-top: 5cqi; line-height: 1.4; }
.pkg__body h3 { font-size: 17cqi; }
.hf-r { right: -1%; top: clamp(80px, 12cqw, 120px); }
.band-logo img, .sig-logo img { filter: none; }
img.own.price-card__flower { width: 13%; right: -1%; top: -20%; position: absolute; }

/* Runde 7: grüne Tinte, schlichter Kontakt, weiße Aquarellblumen */
:root { --ink: #4d5337; --ink-l: #7d8263; --script-grey: #565a44; }
.extra__ic { color: var(--ink); background: #ebe9df; }
.band-claim { margin-top: 0; }
.contact-line { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; margin: 18px auto 4px; }
.c-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px clamp(16px, 4cqw, 34px); text-decoration: none; color: #f6f6ec; position: relative; transition: opacity .3s; }
.c-item + .c-item::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(246, 246, 236, .38); }
.c-item .caps { font-size: .6rem; letter-spacing: .22em; opacity: .75; }
.c-val { font-family: var(--serif); font-size: 1.14rem; font-style: italic; letter-spacing: .02em; border-bottom: 1px solid transparent; transition: border-color .4s; }
.c-item:hover .c-val { border-color: rgba(246, 246, 236, .6); }
@media (max-width: 560px) { .contact-line { flex-direction: column; gap: 10px; } .c-item + .c-item::before { display: none; } }
.band .flourish { margin: 16px auto 4px; }
.legal { margin-top: 18px; }
img.own.price-card__flower { width: 16%; right: -3%; top: -16%; }

/* Runde 9: eure Aquarellblumen, Rosenbogen, Sprenkel, FAQ-Karte */
.faq-card.has-own .faq-card__txt { inset: 16% 10% 12% 17%; align-items: flex-start; text-align: left; }
/* Karteikarte: Titel größer, luftiger und mit Abstand nach oben */
.faq-card .script, .faq-card.has-own .script { font-size: 13.5cqi; line-height: 1.22; margin-top: 4cqi; }
.faq-card .click { margin-top: 4cqi; }
.faq-card__flower { width: 22%; right: 2%; bottom: -8%; rotate: 6deg; }
img.own.splash { opacity: .78; filter: none; }
.splash-piece { pointer-events: none; }
.rose-frame { position: relative; width: min(84%, 460px); margin: clamp(20px, 4cqw, 36px) auto 0; aspect-ratio: 950 / 1400; }
.rose-photo { position: absolute; left: 18.6%; right: 24.2%; top: 17.2%; bottom: 22.5%; overflow: hidden; border-radius: 999px 999px 0 0 / 38% 38% 0 0; background: #ddd; }
.rose-photo img { width: 100%; height: 100%; object-fit: cover; }
.rose-wreath { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(30, 34, 20, .22)); }

/* Runde 10: Lesbarkeit Hochzeiten, Titel-Etikett statt Schrift auf dem Bild */
.banner--label { height: clamp(200px, 38cqw, 340px); }
.banner--label::after { background: linear-gradient(180deg, rgba(250,249,246,0) 55%, rgba(250,249,246,.6) 100%); }
.banner--label .back { color: #3f4330; background: rgba(251, 250, 246, .88); padding: 6px 12px; text-shadow: none; }
.banner-label { position: relative; z-index: 3; width: min(460px, 86%); margin: clamp(-70px, -9cqw, -44px) auto 0; padding: clamp(18px, 3.4cqw, 30px) 20px clamp(16px, 3cqw, 26px); text-align: center; background: #fbf9f3 var(--tex-paper) 0 0 / 400px; box-shadow: var(--shadow); }
.banner-label::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(122, 127, 87, .35); pointer-events: none; }
.banner-label h1.script { margin: 0; font-size: clamp(2.8rem, 9cqw, 4.4rem); color: #3f4330; line-height: 1.05; }
.banner-label .caps { display: block; color: #5d6147; font-size: .74rem; letter-spacing: .16em; }
/* dunklere Nebentexte auf Papier */
.details, .w-list, .sec .head p { color: #3f4035; }
.w-card .caps, .d-cover .caps, .details .caps, .pager .caps { color: #5d6147; }
.w-card p { color: #3f4035; }
.w-card .script { color: #3f4330; }
.head .caps { color: #5d6147; }
.d-intro { color: #3f4035; font-size: 1.22rem; max-width: 34em; margin: clamp(34px, 6cqw, 56px) auto 0; line-height: 1.6; }
.d-quote { margin: 2.2em auto 0; max-width: 30em; padding: 0 1em; border-left: 0; }
.d-quote p { font-size: 1.35rem; color: #3f4330; margin: 0 0 .4em; }
.d-cover { margin: 2.6em auto 0; max-width: 36em; }
.d-cover .caps { font-size: .72rem; }
.d-cover p { margin: .5em 0 0; font-style: italic; font-size: 1.12rem; color: #3f4035; }
.d-cover i { margin: 0 .6em; color: var(--olive-l); font-style: normal; }
.pager .script { color: #3f4330; }
.d-cover p { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; }
.d-cover span { white-space: nowrap; }

/* Karte im Intro-Umschlag: eure Papeterie „Lebe für all die Momente“ */
.env__letter--card { padding: 0; overflow: hidden; background: #fbfaf6; }
.env__letter--card::before, .env__letter--card::after { display: none; }
.letter-card { width: 100%; height: 100%; object-fit: cover; display: block; }
.env.is-out .env__letter--card { transform: translateY(-78%); }
.intro .intro__logo, .intro .intro__kicker, .intro .intro__names, .intro .intro__hint { transition: opacity .7s var(--ease), transform .9s var(--ease); }
.intro.letter-out .intro__logo, .intro.letter-out .intro__kicker, .intro.letter-out .intro__names, .intro.letter-out .intro__hint { opacity: 0; transform: translateY(-14px); animation: none; }
.env.is-out .env__letter--card { transform: translateY(-74%) scale(1.12); box-shadow: 0 10px 30px rgba(40, 36, 26, .18); transition: transform 1.3s var(--ease), box-shadow 1.3s; }

/* Runde 12 */
.contact-logo { width: clamp(96px, 16cqw, 128px); margin: 0 auto 4px; }
.faq .head { position: relative; }
.faq .sprenkel { width: clamp(120px, 24cqw, 220px); }
.faq .sp-l { left: -4%; top: 10px; }
.faq .sp-r { right: -4%; top: 60px; bottom: auto; }
.faq-cta { position: relative; }
/* Geschichte: Foto in der Bogenkarte wie in der Collage */
.story-card { position: relative; width: min(74%, 400px); margin: clamp(24px, 4cqw, 40px) auto 0; aspect-ratio: 900 / 1200; rotate: -1.5deg; filter: drop-shadow(0 2px 3px rgba(20, 24, 10, .18)) drop-shadow(0 20px 30px rgba(20, 24, 10, .25)); }
.story-card__paper { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-card__photo { position: absolute; left: 10%; right: 10%; top: 8%; bottom: 8%; overflow: hidden; border-radius: 999px 999px 2px 2px / 50% 50% 2px 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.story-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.story-card__flower { position: absolute; width: 44%; left: -20%; bottom: -6%; rotate: -18deg; filter: drop-shadow(0 4px 6px rgba(20, 24, 10, .25)); pointer-events: none; }
.story-card__seal { position: absolute; width: 17%; right: -4%; top: 12%; rotate: 12deg; }
.story-card__photo { border-radius: 50% 50% 3px 3px / 36% 36% 3px 3px; }
/* Geschichte: Zitat, Zwischenüberschriften & Fotoautomat-Streifen */
.story-quote { margin: 0 auto 1.2em; padding: 0 .5em; font-size: clamp(1.15rem, 3cqw, 1.4rem); font-style: italic; line-height: 1.55; color: #f7f8ec; quotes: none; }
.story-h { margin: 1.6em 0 .2em; font-size: clamp(2.2rem, 7cqw, 3rem); font-weight: 400; color: #f4f5e8; line-height: 1.1; }
.booth { position: relative; width: min(40%, 210px); margin: 2.6em auto 2.8em; padding: 7% 7% 0; background: #fbfaf6 var(--tex-paper, none) 0 0 / 300px; rotate: -3deg; container-type: inline-size;
  box-shadow: 0 2px 4px rgba(20, 24, 10, .2), 0 18px 34px rgba(20, 24, 10, .3); }
.booth .tape { top: -4%; height: 5%; left: 30%; width: 40%; }
.booth__frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 7%; background: #ddd; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.booth__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.booth__label { margin: -3% 0 0; padding: 0 0 8%; text-align: center; font-family: var(--script); font-size: max(13cqi, 15px); line-height: 1.1; color: #6f6e66; }
@media (max-width: 560px) { .booth { width: 56%; } }

/* =========================================================
   Runde 13 – Briefmarken-Extras · Briefpapier-Formular · Datumswähler
   ========================================================= */
/* Startseite: Strauß liegt hinter der Karte */
.piece.flower.behind { pointer-events: none; }

/* Extras: Briefmarken mit feiner Strichzeichnung */
.extra { grid-template-columns: 76px 1fr auto; }
.stamp-wrap { width: 72px; rotate: var(--r, -3deg); filter: drop-shadow(0 1px 1px rgba(40,38,30,.18)) drop-shadow(0 4px 6px rgba(40,38,30,.14)); transition: rotate .6s var(--ease); }
.extra:hover .stamp-wrap { rotate: 0deg; }
.stamp { width: 72px; height: 88px; padding: 3px; background: #fbf9f3;
  -webkit-mask: radial-gradient(circle 2.7px, #0000 96%, #000) -4px -4px / 8px 8px, linear-gradient(#000 0 0) content-box;
          mask: radial-gradient(circle 2.7px, #0000 96%, #000) -4px -4px / 8px 8px, linear-gradient(#000 0 0) content-box; }
.stamp__in { height: 100%; margin: 3px; height: calc(100% - 6px); display: grid; place-items: center; background: #eef0e3 var(--tex-paper) 0 0 / 260px; background-blend-mode: multiply; outline: 1px solid rgba(118,122,79,.45); outline-offset: -4px; color: var(--olive-d); }
.stamp .vig { width: 88%; height: auto; }
@media (max-width: 520px) { .extra { grid-template-columns: 60px 1fr; } .stamp-wrap { width: 56px; } .stamp { width: 56px; height: 72px; } }

/* Kontakt: Briefpapier */
.contact .form-wrap { position: relative; max-width: 640px; padding: 3.4em 0 4.5em; }
.letter-form { position: relative; z-index: 2; background: #fcfaf5 var(--tex-paper) 0 0 / 520px; padding: clamp(2.6em, 7cqw, 3.8em) clamp(1.4em, 7cqw, 3.6em) clamp(2.2em, 5cqw, 3em);
  box-shadow: 0 1px 1px rgba(40,38,30,.08), 0 10px 24px rgba(40,38,30,.10), 0 30px 60px rgba(40,38,30,.10); rotate: -.6deg; }
.letter-form::before, .letter-form::after { content: ''; position: absolute; pointer-events: none; border: 1px solid rgba(118,122,79,.38); }
.letter-form::before { inset: 14px; }
.letter-form::after { inset: 19px; border-color: rgba(118,122,79,.2); }
.letter-form > * { position: relative; z-index: 1; }
.letter-form__seal { position: absolute !important; width: 76px; left: 50%; top: -34px; translate: -50% 0; rotate: -8deg; filter: drop-shadow(0 4px 6px rgba(40,38,30,.25)); }
.letter-form__intro { text-align: center; color: #6d6c62; margin: .6em 0 2em; font-size: 1.1rem; }
.form-flower { position: absolute; z-index: 1; pointer-events: none; }
.form-flower--l { width: clamp(150px, 30cqw, 240px); left: -13%; top: 0; rotate: -24deg; }
.form-flower--r { width: clamp(150px, 30cqw, 250px); right: -14%; bottom: 3%; rotate: 160deg; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2em; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } .form-flower--l { left: -22%; } .form-flower--r { right: -24%; } }

.contact .field > label, .contact .field > legend { font: 500 .7rem var(--serif); text-transform: uppercase; letter-spacing: .24em; color: var(--olive-d); font-style: normal; margin-bottom: .2em; }
.contact .field .req { color: var(--olive-l); }
.contact .input { background: transparent; border: 0; border-bottom: 1px solid #c9c5b6; padding: .55em .1em; font-size: 1.2rem; font-style: italic; color: var(--ink); transition: border-color .4s, background-size .6s var(--ease);
  background-image: linear-gradient(var(--olive), var(--olive)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px; }
.contact .input:hover { background-color: transparent; border-bottom-color: #aeab98; }
.contact .input:focus, .contact .dp__btn[aria-expanded="true"] { background-color: transparent; background-size: 100% 1.5px; box-shadow: none; }
.contact .input::placeholder { color: #b3b0a5; }
.contact textarea.lined { min-height: 190px; border: 0; padding: 0 .1em; line-height: 2.2em; background: repeating-linear-gradient(transparent 0 calc(2.2em - 1px), #d6d2c4 calc(2.2em - 1px) 2.2em) 0 0 / 100% 2.2em local; resize: vertical; }
.contact textarea.lined:focus { background: repeating-linear-gradient(transparent 0 calc(2.2em - 1px), #b4b795 calc(2.2em - 1px) 2.2em) 0 0 / 100% 2.2em local; }
.field.error .input { box-shadow: none; border-bottom-color: #b58a6a; }

/* Event-Auswahl: feine Kärtchen mit Kreis */
.contact .opts { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: .5em; }
.contact .opt span { display: inline-flex; align-items: center; gap: .6em; padding: .45em 1.1em .45em .8em; background: rgba(255,255,255,.5); border: 1px solid #d3cfc0; border-radius: 999px; font-size: 1.05rem; transition: background .35s, border-color .35s, color .35s; }
.contact .opt span::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--olive-l); box-shadow: inset 0 0 0 2px #fcfaf5; transition: background .3s, border-color .3s; flex: none; }
.contact .opt span:hover { padding-left: .8em; background: #fff; border-color: #b9b69f; }
.contact .opt input:checked + span { background: #e6e8d6; border-color: var(--olive); color: #2f3127; }
.contact .opt input:checked + span::before { background: var(--olive); border-color: var(--olive); }
.field.error .opts { box-shadow: none; }
.field.error .opt span { border-color: #d4b39c; }

/* Datumswähler */
.dp { position: relative; }
.dp__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.dp__val { font-style: italic; font-size: 1.2rem; }
.dp__val.is-empty { color: #b3b0a5; }
.dp__chev { width: 9px; height: 9px; border-right: 1px solid var(--olive); border-bottom: 1px solid var(--olive); rotate: 45deg; translate: 0 -3px; margin-right: 6px; transition: rotate .4s var(--ease), translate .4s var(--ease); }
.dp__btn[aria-expanded="true"] .dp__chev { rotate: 225deg; translate: 0 2px; }
.dp__pop { position: absolute; z-index: 30; top: calc(100% + 10px); left: 0; width: min(340px, 100%); padding: 18px 18px 14px; background: #fcfaf5 var(--tex-paper) 0 0 / 420px;
  box-shadow: 0 2px 3px rgba(40,38,30,.08), 0 18px 40px rgba(40,38,30,.18); opacity: 0; translate: 0 -8px; transition: opacity .25s, translate .35s var(--ease); }
.dp__pop::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(118,122,79,.3); pointer-events: none; }
.dp__pop.is-open { opacity: 1; translate: 0 0; }
.dp__head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp__title { display: flex; align-items: baseline; gap: .5em; }
.dp__title .script { font-size: 2rem; line-height: 1; color: var(--ink); }
.dp__title .caps { color: var(--olive-d); }
.dp__nav { width: 34px; height: 34px; border: 0; background: none; font: 400 1.7rem/1 var(--serif); color: var(--olive-d); cursor: pointer; border-radius: 50%; transition: background .3s; }
.dp__nav:hover:not(:disabled) { background: #eceee0; }
.dp__nav:disabled { opacity: .25; cursor: default; }
.dp__wd, .dp__grid { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.dp__wd { font-size: .62rem; color: var(--grey); padding: 6px 0; border-bottom: 1px solid #e3dfd2; margin-bottom: 6px; }
.dp__grid { gap: 2px; }
.dp__day { aspect-ratio: 1; border: 0; background: none; border-radius: 50%; font: 1.02rem var(--serif); color: var(--ink); cursor: pointer; transition: background .25s, color .25s; }
.dp__day.is-sat { color: var(--olive-d); font-style: italic; }
.dp__day:hover:not(:disabled) { background: #e8eadb; }
.dp__day.is-today { box-shadow: inset 0 0 0 1px var(--olive-l); }
.dp__day.is-sel { background: var(--olive); color: #f5f5ea; font-style: normal; }
.dp__day:disabled { color: #cbc8bd; cursor: default; }
.dp__day:focus-visible, .dp__nav:focus-visible { outline: 1.5px dashed var(--olive); outline-offset: 1px; }
.dp__open { position: relative; display: block; margin: 10px auto 2px; border: 0; background: none; color: #6d6c62; font-size: 1rem; cursor: pointer; border-bottom: 1px solid transparent; padding: 2px 0; }
.dp__open:hover { color: var(--olive-d); border-bottom-color: var(--olive-l); }

/* Abschluss */
.letter-form__foot { text-align: center; margin-top: 2.2em; }
.contact .letter-form .submit { width: auto; padding: 1.15em 2.6em; font: 500 .74rem var(--serif); letter-spacing: .24em; text-transform: uppercase; color: #f4f5e8; background: #6c734c var(--tex-linen-green) 0 0 / 200px; border-radius: 0; box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 8px 18px -6px rgba(50,54,28,.45); text-shadow: 0 -1px 0 rgba(0,0,0,.25); }
.contact .letter-form .submit:hover { background-color: #5c6240; letter-spacing: .3em; }
.letter-form__sig { font-size: 2.2rem; color: var(--ink); margin-top: .5em; rotate: -3deg; }
.letter-form .fine { margin-top: 1.2em; }
.letter-form > .field:has(.dp) { z-index: 6; }

/* =========================================================
   Galerie (Runde 14): eigene Spalten statt CSS-columns
   ========================================================= */
.masonry { columns: auto; display: flex; align-items: flex-start; gap: clamp(14px, 2.4cqw, 24px); padding: 2.4em 0 1em; }
.masonry[data-cols="0"] { display: grid; grid-template-columns: repeat(3, 1fr); }
.m-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(14px, 2.4cqw, 24px); }
.m-item { margin: 0; break-inside: auto; padding: 4.5%; }
.m-frame { display: block; position: relative; aspect-ratio: var(--ar, 4 / 5); overflow: hidden;
  background: var(--pc, #e6e2d7) var(--ph, none) center / cover no-repeat; }
.m-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.m-frame img.is-loaded { opacity: 1; }
.m-item.develop img, .m-item img { filter: none; }
@media (max-width: 560px) { .masonry, .m-col { gap: 12px; } .m-item { padding: 5%; } }
.polaroid img { height: auto; }

/* FAQ: Einleitung */
.faq-intro { max-width: 34em; margin: 1.4em auto 0; font-size: 1.12rem; line-height: 1.65; color: #4a4b42; }

/* Preise: Leistungslisten & Foto-Briefmarken */
.mini-list { list-style: none; padding: 0; margin: .5em 0 0; font-size: .95rem; line-height: 1.45; color: #5d5a50; }
.mini-list li::before { content: "·"; margin-right: .45em; opacity: .6; }
.session__txt .mini-list { margin: .3em auto .8em; max-width: 24em; }
.extra { align-items: start; }
.extra__price { align-self: center; }
.stamp--photo .stamp__in { overflow: hidden; }
.stamp--photo .stamp__in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sessions .session:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(9px, 2cqw, 20px)); }
@media (max-width: 560px) { .sessions .session:last-child:nth-child(odd) { width: auto; justify-self: stretch; } }

/* Kontakt: Leistungen ankreuzen */
.field--services .hint { margin: .1em 0 .6em; font-size: .98rem; color: #7a776c; }
.opt-group + .opt-group { margin-top: .9em; }
.opt-group__label { font-size: .72rem; letter-spacing: .16em; color: #7f7c70; }
.contact .opt input[type="checkbox"] + span::before { border-radius: 3px; }
.contact .opt input[type="checkbox"]:checked + span::before { background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23fcfaf5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: none; }
.field--herz[hidden] { display: none; }
.field--herz.in { animation: herzIn .5s var(--ease) both; }
@keyframes herzIn { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* Hochzeit: Hinweis unter „Ein paar Herzensmomente“ */
.d-note { max-width: 34em; margin: -.4em auto 1.6em; text-align: center; font-size: 1.02rem; line-height: 1.55; color: #6d6a5f; }
.banner-label h1.script.long { font-size: clamp(2.3rem, 7cqw, 3.5rem); margin-bottom: .15em; }

/* ---------- AGB ---------- */
.agb-intro { max-width: 34em; margin: 1.2em auto 0; font-size: 1.12rem; line-height: 1.65; color: #4f463c; }
.agb-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 42em; margin: 2em auto 0; }
.agb-toc a { text-decoration: none; color: #4f463c; font-size: .98rem; padding: .35em .9em; border: 1px solid #d8d3c3; border-radius: 999px; background: rgba(255,255,255,.45); transition: background .3s, border-color .3s; }
.agb-toc a:hover { background: #fff; border-color: var(--olive-l); }
.agb-num { font-size: .72rem; letter-spacing: .12em; color: var(--olive); margin-right: .25em; }
.agb-body { max-width: 38em; margin: 2.4em auto 3.5em; text-align: left; }
.agb-sec { padding: 1.6em 0 .4em; border-top: 1px solid rgba(118,122,79,.25); scroll-margin-top: 48px; }
.agb-sec:first-child { border-top: 0; }
.agb-sec h2 { display: flex; flex-direction: column; align-items: center; gap: .1em; margin: 0 0 .7em; text-align: center; font-weight: 400; }
.agb-sec h2 .caps { font-size: .72rem; letter-spacing: .2em; color: var(--olive); }
.agb-sec h2 .script { font-size: clamp(2rem, 6cqw, 2.6rem); color: var(--ink); line-height: 1.1; }
.agb-sec ol { margin: 0; padding-left: 1.4em; color: #4f463c; line-height: 1.65; font-size: 1.06rem; }
.agb-sec li + li { margin-top: .6em; }
.agb-sec li::marker { color: var(--olive); font-size: .9em; }
@media (max-width: 560px) { .agb-toc a { font-size: .9rem; } .agb-sec ol { font-size: 1rem; } }

/* ---------- Filme ---------- */
.film-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 7cqw, 70px) clamp(20px, 4cqw, 40px); max-width: 860px; margin: clamp(40px, 7cqw, 70px) auto 0; }
.film { rotate: var(--r, 0deg); transition: rotate .6s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); container-type: inline-size; }
.film:hover { rotate: 0deg; }
.film--hero { grid-column: 1 / -1; }
.film__frame { position: relative; background: #fcfbf7 var(--tex-paper, none) 0 0 / 300px; padding: 3.2%; box-shadow: var(--shadow); }
.film--hero .film__frame { padding: 2.2%; }
.film__frame .tape { top: -3.5%; left: 40%; width: 20%; height: 7%; }
.film__screen { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #1d1e18; overflow: hidden; cursor: pointer; }
.film__screen.is-static { cursor: default; }
.film__poster, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.film__screen:not(.is-playing)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,14,0) 45%, rgba(20,20,14,.35)); transition: background .5s; }
.film__play { position: absolute; left: 50%; top: 50%; width: clamp(54px, 13cqi, 88px); translate: -50% -50%; z-index: 2; transition: scale .5s var(--ease); }
.film__play svg, .film-pola__play svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.film__play circle, .film-pola__play circle { fill: rgba(252, 251, 247, .88); stroke: rgba(118,122,79,.5); stroke-width: 1; }
.film__play path, .film-pola__play path { fill: var(--olive-d); }
.film__screen:hover .film__play { scale: 1.1; }
.film--soon .film__play { opacity: .8; }
.film--soon .film__poster { filter: saturate(.8) brightness(.85); }
.film__dur { position: absolute; right: 10px; bottom: 8px; z-index: 2; color: #fcfbf7; font-size: .7rem; letter-spacing: .14em; }
.film__txt { text-align: center; margin-top: 1.1em; color: var(--ink); }
.film__txt .caps { font-size: .72rem; letter-spacing: .16em; color: #6d6a5f; }
.film__txt h2 { margin: .05em 0 .1em; font-weight: 400; font-size: clamp(2.2rem, 7cqi, 3.2rem); line-height: 1.1; }
.film--hero .film__txt h2 { font-size: clamp(2.6rem, 6cqi, 4rem); }
.film__txt p { max-width: 30em; margin: 0 auto; color: #5d5a50; }
.film-cta { text-align: center; padding: clamp(50px, 8cqw, 80px) 0 clamp(60px, 9cqw, 90px); }
.film-cta .caps { font-size: .74rem; letter-spacing: .16em; color: var(--olive); }
.film-cta .italic { font-size: 1.3rem; margin: .3em 0 1.1em; color: var(--ink); }
.film-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn.light-outline { background: transparent; color: var(--olive-d); box-shadow: inset 0 0 0 1px var(--olive-l); }
.btn.light-outline:hover { background: #fff; }
@media (max-width: 640px) { .film-list { grid-template-columns: 1fr; } .film { rotate: 0deg; } }
/* Startseite: Polaroid als Filmeingang */
.film-pola { position: relative; }
.film-pola__play { position: absolute; left: 50%; top: 43%; width: 24%; translate: -50% -50%; z-index: 3; transition: scale .5s var(--ease); pointer-events: none; }
a.piece:hover .film-pola__play { scale: 1.12; }
/* Preise: Link zu den Filmen */
.extra__more { display: inline-block; margin-top: .6em; font-size: .72rem; letter-spacing: .14em; color: var(--olive-d); text-decoration: none; border-bottom: 1px solid var(--olive-l); }
.extra__more:hover { border-color: var(--olive-d); }

/* Umschlag: Ebenen immer in fester Reihenfolge zeichnen (kein 3D-Sortieren des ganzen Umschlags,
   sonst kann die Karte beim Wackeln/Öffnen kurz durch Tasche oder Klappe „durchscheinen“).
   Nur die Klappe selbst bleibt 3D. */
.env { transform-style: flat; isolation: isolate; }
.env__back { z-index: 1; }
/* Intro: Umschlag erst zeigen, wenn alle Lagen geladen sind */
.intro .env.has-img { opacity: 0; transition: opacity .6s var(--ease); }
.intro .env.has-img.is-ready { opacity: 1; }

/* Filme: alle Filmfenster gleich groß, untereinander */
.film-list { grid-template-columns: 1fr; max-width: 760px; }
.film { rotate: 0deg; }
.film__frame, .film--hero .film__frame { padding: 2.2%; }
.film__txt h2, .film--hero .film__txt h2 { font-size: clamp(2.6rem, 6cqi, 4rem); }
.film__more { display: inline-block; margin-top: .8em; font-size: .72rem; letter-spacing: .14em; color: var(--olive-d); text-decoration: none; border-bottom: 1px solid var(--olive-l); }
.film__more:hover { border-color: var(--olive-d); }

/* Filme: Code-Sperre */
.film--lock .film__screen { cursor: default; }
.film--lock .film__poster { filter: blur(14px) saturate(.75) brightness(.8); transform: scale(1.08); }
.film-lock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 6%; text-align: center; }
.film-lock__seal { width: clamp(56px, 11cqi, 84px); margin-bottom: 2px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.film-lock label { color: #fbf9f2; font-size: .74rem; letter-spacing: .22em; }
.film-lock__row { display: flex; gap: 8px; width: min(100%, 360px); }
.film-lock .input { flex: 1; min-width: 0; text-align: center; letter-spacing: .35em; font-size: 1.15rem; background: rgba(252, 251, 247, .94); }
.film-lock .btn { padding: .9em 1.4em; }
.film-lock .btn:disabled { opacity: .7; cursor: wait; }
.film-lock__msg { min-height: 1.3em; margin: 0; color: #fbf9f2; font-size: 1rem; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.film-lock.shake { animation: shake .45s; }
@media (max-width: 480px) { .film-lock__row { flex-direction: column; } .film-lock__seal { display: none; } }