/* =========================================================
   knipsmi – Version 6
   Basis 5A (warmes Papier, Espresso, Mohnrot/Aprikose),
   Schrift 5C, Galerie 5B, Angebote 5C-5, Ablauf & Footer 5C-3
   ========================================================= */

@font-face { font-family: "M PLUS Rounded 1c"; src: url("fonts/mplus-rounded-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("fonts/mplus-rounded-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("fonts/mplus-rounded-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Farben (5A) */
  --paper: #f8f0e5;
  --paper-2: #f0e3d1;
  --card: #fffaf3;
  --espresso: #2a1b15;
  --espresso-2: #3a271f;
  --espresso-3: #1d130e;
  --ink: #36261e;
  --ink-soft: #6a5245;
  --line: #e6d6c3;
  --line-2: #dcc6ae;
  --apricot: #f2a56d;
  --apricot-soft: #f7d7b9;
  --apricot-pale: #fbe6d2;
  --apricot-glow: rgba(242, 165, 109, .45);
  --poppy: #d63f28;
  --poppy-ink: #b3301d;
  --rust: #c4553a;
  --on-dark: #f8f0e5;
  --on-dark-soft: #dcc8b6;

  /* Schriften (5C) */
  --display: "M PLUS Rounded 1c", "Nunito", "Helvetica Neue", Arial, sans-serif;
  --body: "Nunito", "Helvetica Neue", Arial, sans-serif;

  /* Raster & Formen */
  --pad: max(clamp(1.25rem, 4.6vw, 4.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max: 1360px;
  --header: 72px;
  --r: 22px;
  --r-sm: 16px;
  --r-lg: clamp(28px, 4vw, 44px);
  --shadow-soft: 0 34px 60px -44px rgba(96, 52, 26, .42), 0 1px 3px rgba(96, 52, 26, .05);
  --shadow-img: 0 40px 80px -52px rgba(96, 52, 26, .55);

  --ease: cubic-bezier(.65, 0, .2, 1);
  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --soft: cubic-bezier(.4, 0, .2, 1);
  --focus-in: cubic-bezier(.3, .1, .2, 1);
}

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

/* eigene Farbe für Seite und Überscroll-Fläche: keine fremden Streifen unter Safaris Toolbar */
html {
  background-color: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 8px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.75 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

html[data-layer="menu"] { background-color: var(--espresso); }
html[data-layer="lb"] { background-color: var(--espresso-3); }

/* feines Papierkorn – haptisch, kaum sichtbar; ragt über den Bildschirm hinaus,
   damit es auch unter einer ein- und ausfahrenden Toolbar lückenlos liegt */
body::after {
  content: "";
  position: fixed;
  inset: -50vh 0;
  z-index: 300;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* ohne Spezifität: das Formular (form.css) setzt seine eigenen Abstände */
:where(p) { margin: 0 0 1.05em; }
h1, h2, h3 { margin: 0; font-weight: 300; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--apricot-soft); color: var(--espresso); }

:focus-visible {
  outline: 2px solid var(--poppy-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 1rem; top: -4rem;
  z-index: 400;
  padding: .8rem 1.2rem;
  background: var(--espresso);
  color: var(--paper);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: top .2s;
}
.skip:focus { top: 1rem; }

.wrap {
  width: min(100% - 2 * var(--pad), var(--max));
  margin-inline: auto;
}

/* ---------- Typo-Bausteine ---------- */

/* Kicker: eine kurze, kursive Zeile – wie von Hand dazugeschrieben */
.kicker {
  display: block;
  align-self: flex-start;
  margin: 0;
  font: italic 400 clamp(1.08rem, 1.25vw, 1.22rem)/1.3 var(--body);
  letter-spacing: 0;
  color: var(--poppy-ink);
}
.kicker--light { color: var(--apricot); }

/* kleine Beschriftungen, leise und kursiv */
.label {
  display: block;
  margin: 0 0 .5rem;
  font: italic 400 1rem/1.3 var(--body);
  color: var(--poppy-ink);
}

.h2 {
  font: 300 clamp(2.35rem, 5.4vw, 4.9rem)/1.04 var(--display);
  letter-spacing: -.035em;
  color: var(--espresso);
  text-wrap: balance;
}
.h2 em, .about__lead em, .quote em, .foot__claim em, .top__navfoot em, .gift__title em {
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
}
.h2 em { color: var(--poppy-ink); }
/* Kicker als erste Zeile einer Überschrift (Leistung und Ort stehen so im Titel), Abstand wie zuvor im Kopf */
.h2__kicker { margin-bottom: 1.25rem; }

/* ---------- Buttons ---------- */

/* Buttons: weich gerundet wie die Schrift, Espresso mit einem Hauch Licht von oben,
   ein Wort kursiv gesetzt – beim Darüberfahren steigt warmes Licht von unten auf */
.btn {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  padding: 1.02em 1.9em 1.1em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #3e2a21 0%, var(--espresso) 62%);
  color: var(--on-dark);
  font: 400 1.06rem/1.2 var(--display);
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, .16),
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 16px 28px -18px rgba(42, 27, 21, .7);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), color .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn em {
  font: italic 400 1.06em/1 var(--body);
  letter-spacing: 0;
  color: var(--apricot-soft);
  transition: color .4s;
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 55%;
  width: 130%;
  aspect-ratio: 2.4 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 165, 109, .5), rgba(242, 165, 109, .16) 55%, rgba(242, 165, 109, 0));
  opacity: 0;
  transform: translate(-50%, 18%) scale(.7);
  transition: opacity .6s ease, transform .9s var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 214, .2),
      inset 0 -2px 0 rgba(0, 0, 0, .16),
      0 20px 34px -18px rgba(120, 52, 26, .6);
  }
  .btn:hover::before { opacity: 1; transform: translate(-50%, -8%) scale(1); }
  .btn:hover em { color: #ffe6cf; }
}
.btn:active { transform: translateY(0) scale(.98); }
.btn--small { padding: .8em 1.4em .86em; font-size: .95rem; }

/* ---------- Header ---------- */

.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: calc(var(--header) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .5s, box-shadow .5s;
}
.top.is-scrolled {
  background: rgba(248, 240, 229, .95);
  box-shadow: 0 1px 0 rgba(42, 27, 21, .08);
}
.top__inner {
  width: min(100% - 2 * var(--pad), var(--max));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.top__logo { display: block; flex: none; position: relative; z-index: 2; border-radius: 4px; transition: opacity .4s; }
.top__logo img { width: 112px; height: auto; }
.top__cta { margin-left: auto; }

.top__nav ul { list-style: none; margin: 0; padding: 0; }
.top__nav a { position: relative; text-decoration: none; }
.top__navfoot { display: none; }

.top__menu {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .15rem .55rem .6rem;
  border: 0;
  background: none;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  color: var(--ink);
  transition: color .4s;
}
.top__menu-icon,
.top__menu-icon::before {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s var(--ease), width .4s var(--ease);
}
.top__menu-icon { position: relative; transform: translateY(-3.5px); }
.top__menu-icon::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; }
.top__menu[aria-expanded="true"] { color: var(--on-dark); }
.top__menu[aria-expanded="true"] .top__menu-icon { transform: rotate(45deg); }
.top__menu[aria-expanded="true"] .top__menu-icon::before { width: 22px; top: 0; transform: rotate(-90deg); }

/* mit den Seiten-Links braucht die Leiste mehr Platz: das Menü klappt bis 1199 px auf */
@media (max-width: 1199px) {
  .top__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header) + env(safe-area-inset-top, 0px) + 2rem) var(--pad) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(120% 60% at 90% 0%, rgba(242, 165, 109, .2), rgba(242, 165, 109, 0) 60%),
      var(--espresso);
    /* die Fläche reicht nach unten und oben weiter als der Bildschirm (Safari-Toolbar, Überscrollen) */
    box-shadow: 0 50vh 0 0 var(--espresso), 0 -50vh 0 0 var(--espresso);
    color: var(--on-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, visibility 0s .55s;
  }
  .top.is-open .top__nav {
    opacity: 1;
    visibility: visible;
    transition: opacity .55s ease, visibility 0s;
  }
  .top.is-open { background: transparent; box-shadow: none; }
  .top.is-open .top__logo { opacity: 0; }
  .top__nav a {
    display: inline-block;
    padding: .12em 0;
    font: 300 clamp(2rem, 8.4vw, 3.4rem)/1.12 var(--display);
    letter-spacing: -.035em;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(14px);
    transition: opacity .7s ease, filter .9s ease, transform .9s var(--ease-out), color .25s;
  }
  .top.is-open .top__nav a { opacity: 1; filter: blur(0); transform: none; }
  .top.is-open .top__nav li:nth-child(1) a { transition-delay: .1s; }
  .top.is-open .top__nav li:nth-child(2) a { transition-delay: .17s; }
  .top.is-open .top__nav li:nth-child(3) a { transition-delay: .24s; }
  .top.is-open .top__nav li:nth-child(4) a { transition-delay: .31s; }
  .top.is-open .top__nav li:nth-child(5) a { transition-delay: .38s; }
  .top.is-open .top__nav li:nth-child(6) a { transition-delay: .45s; }
  .top.is-open .top__nav li:nth-child(7) a { transition-delay: .52s; }
  .top__nav a:hover, .top__nav a[aria-current="true"], .top__nav a[aria-current="page"] { color: var(--apricot); }
  .top__navfoot {
    display: block;
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(248, 240, 229, .16);
    font: 300 1.3rem/1.3 var(--display);
    letter-spacing: -.01em;
    color: var(--on-dark-soft);
    opacity: 0;
    transition: opacity .8s ease .45s;
  }
  .top__navfoot em { color: var(--apricot); }
  .top.is-open .top__navfoot { opacity: 1; }
}

@media (max-width: 519px) {
  .top__cta { display: none; }
  .top__menu { margin-left: auto; }
}

@media (min-width: 900px) {
  :root { --header: 84px; }
  .top__logo img { width: 126px; }
}

@media (min-width: 1200px) {
  .top__menu { display: none; }
  .top__nav-contact { display: none; }
  .top__nav { margin-left: auto; }
  .top__nav ul { display: flex; gap: .2rem; }
  .top__cta { margin-left: .8rem; }
  .top__nav a {
    display: inline-block;
    padding: .55rem .8rem;
    font-size: .98rem;
    color: var(--ink);
    transition: color .3s;
  }
  .top__nav a::after {
    content: "";
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .32rem;
    height: 1.5px;
    border-radius: 2px;
    background: var(--apricot);
    transform: scaleX(0);
    transition: transform .5s var(--ease-out);
  }
  .top__nav a:hover { color: var(--espresso); }
  .top__nav a:hover::after,
  .top__nav a[aria-current="true"]::after,
  .top__nav a[aria-current="page"]::after { transform: scaleX(1); }
  .top__nav a[aria-current="page"] { color: var(--espresso); }
}

/* ---------- Hero ---------- */

.hero {
  width: min(100% - 2 * var(--pad), var(--max));
  margin-inline: auto;
  padding: calc(var(--header) + clamp(1rem, 4vw, 2.5rem)) 0 clamp(3.5rem, 8vw, 6rem);
  display: grid;
  gap: 2.25rem;
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; }

.hero__title {
  margin: 0;
  font: 300 clamp(3.1rem, 15vw, 6.6rem)/.98 var(--display);
  letter-spacing: -.05em;
  color: var(--espresso);
}
/* der Kicker steht als erste Zeile in der H1 (Leistung und Ort), sieht aber aus wie vorher */
.hero__kicker { margin-bottom: 1.1rem; }
.hero__line { display: block; }
.hero__line > span { display: inline-block; }
.hero__line:nth-child(3),
.hero__line:nth-child(5) { padding-left: .58em; }

.hero__einfach {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1em .38em;
  margin: clamp(1.3rem, 3vw, 2rem) 0 clamp(1.6rem, 3.2vw, 2.4rem);
  font: 300 clamp(1.4rem, 2.1vw, 1.9rem)/1.2 var(--display);
  letter-spacing: -.02em;
  color: var(--ink-soft);
}
.snap {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 .08em;
  font: italic 300 1.55em/1.1 var(--body);
  letter-spacing: -.02em;
  color: var(--poppy-ink);
  white-space: nowrap;
  transition: width .7s var(--ease);
}
/* ein weicher Lichtfleck unter dem Wort */
.snap::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.35em;
  right: -.35em;
  top: 12%;
  bottom: -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 205, 168, .95), rgba(248, 240, 229, 0));
  opacity: .9;
  transition: opacity .8s ease, transform .9s var(--ease-out);
}
.snap.is-soft::before { opacity: .35; transform: scale(.8, .6); }
.snap__word {
  display: inline-block;
  transition: opacity .55s ease, filter .9s ease, transform .9s var(--ease-out);
}
.snap__word.is-out { opacity: 0; filter: blur(9px); transform: translateY(-.06em); transition-duration: .45s, .45s, .45s; }
.snap__word.is-pre { opacity: 0; filter: blur(12px); transform: translateY(.08em); transition: none; }

.hero__visual { position: relative; z-index: 0; }
/* warmes Licht hinter dem Bild */
.hero__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -8% -6% 12%;
  border-radius: 40%;
  background: radial-gradient(closest-side, rgba(242, 165, 109, .38), rgba(248, 240, 229, 0));
  filter: blur(14px);
}
.hero__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: calc(var(--r) + 4px);
  background: var(--paper-2);
  box-shadow: var(--shadow-img);
  isolation: isolate;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero__img:nth-child(1) { object-position: 66% 50%; }
.hero__img:nth-child(2) { object-position: 46% 50%; }
.hero__img:nth-child(3) { object-position: 30% 50%; }
html:not(.js) .hero__img:not(:first-child) { display: none; }
/* aus der Unschärfe ins Licht (für jeden Wechsel) */
.js .hero__img {
  opacity: 0;
  filter: blur(18px) brightness(1.18) saturate(.88);
  transform: scale(1.06);
}
/* das erste Bild ist das LCP-Element: ab dem ersten Bild sichtbar und scharf, es setzt sich nur sanft */
html.js:not(.is-loaded) .hero__img.is-active {
  z-index: 2;
  opacity: 1;
  filter: none;
  transform: scale(1.06);
}
.is-loaded .hero__img.is-active {
  z-index: 2;
  opacity: 1;
  filter: blur(0) brightness(1) saturate(1);
  transform: scale(1);
  transition: opacity 1s ease, filter 1.9s var(--focus-in), transform 3s var(--ease-out);
}
.is-loaded .hero__img.is-prev {
  z-index: 1;
  opacity: 0;
  filter: blur(10px) brightness(1.12);
  transform: scale(1.01);
  transition: opacity 1.2s ease .2s, filter 1.1s ease;
}

.hero__caption {
  display: flex;
  justify-content: flex-end;
  gap: .3em;
  margin: 1rem 0 0;
  font: 600 .72rem/1 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__count { color: var(--poppy-ink); }

/* Hero-Einstieg: die H1 (samt Kicker) ist ab dem ersten Bild sichtbar und gleitet nur an ihren Platz,
   «Einfach …» und der Knopf kommen weiterhin weich aus der Unschärfe */
.js .hero__line > span,
.js .hero__kicker {
  transform: translateY(.2em);
}
.js .hero__einfach,
.js .hero__cta,
.js .hero__caption {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(.2em);
}
.is-loaded .hero__line > span,
.is-loaded .hero__kicker,
.is-loaded .hero__einfach,
.is-loaded .hero__cta,
.is-loaded .hero__caption {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 1.1s ease, filter 1.5s var(--focus-in), transform 1.5s var(--ease-out);
}
.is-loaded .hero__kicker { transition-delay: .08s; }
.is-loaded .hero__line:nth-child(2) > span { transition-delay: .18s; }
.is-loaded .hero__line:nth-child(3) > span { transition-delay: .3s; }
.is-loaded .hero__line:nth-child(4) > span { transition-delay: .42s; }
.is-loaded .hero__line:nth-child(5) > span { transition-delay: .54s; }
.is-loaded .hero__einfach { transition-delay: .76s; }
.is-loaded .hero__cta { transition-delay: .9s; }
.is-loaded .hero__caption { transition-delay: 1.3s; }
.is-loaded .hero__cta:hover { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s; }

@media (max-width: 519px) {
  .hero { gap: 2rem; padding-top: calc(var(--header) + .75rem); }
  .hero__frame { aspect-ratio: 5 / 6; }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5.5rem);
    min-height: min(100svh, 1000px);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
  }
  .hero__title { font-size: clamp(4.6rem, 8.6vw, 8.6rem); }
  .hero__frame {
    aspect-ratio: auto;
    height: clamp(520px, calc(100svh - var(--header) - 7rem), 820px);
  }
}

/* ---------- Über uns ---------- */

.about { padding: clamp(5rem, 11vw, 10rem) 0 clamp(4.5rem, 9vw, 8rem); }
.about__head { display: flex; flex-direction: column; gap: 1.25rem; }
.about__lead {
  max-width: 22ch;
  margin: clamp(1.6rem, 3.2vw, 2.6rem) 0 clamp(3rem, 6vw, 5.5rem);
  font: 300 clamp(1.7rem, 3.4vw, 3.05rem)/1.2 var(--display);
  letter-spacing: -.025em;
  color: var(--espresso);
  text-wrap: balance;
}
.about__lead em { color: var(--poppy-ink); }

.about__grid { display: grid; gap: 2.5rem; }
.about__figure { margin: 0; }
.about__shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: var(--shadow-img);
  --blur: 0;
}
.about__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  filter: blur(calc(var(--blur) * 1px)) brightness(calc(1 + var(--blur) * .012));
  transform: scale(calc(1.02 + var(--blur) * .004));
}
.about__figure figcaption {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-top: 1rem;
  font: italic 400 1rem/1.3 var(--body);
  color: var(--ink-soft);
}
.about__figure figcaption::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--line-2);
}
.about__body p { max-width: 34em; text-wrap: pretty; }
.about__body p:first-child {
  font: 300 clamp(1.18rem, 1.5vw, 1.32rem)/1.6 var(--display);
  letter-spacing: -.005em;
  color: var(--espresso);
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 5.5vw, 6rem);
    align-items: center;
  }
  .about__lead { margin-left: auto; margin-right: 4%; }
  .about__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .about__head .kicker { order: 2; margin-bottom: 1rem; }
  .about__shot { aspect-ratio: 5 / 4; }
}

/* Angebote: eins nach dem anderen wird scharf (5C-5) */
.offers {
  list-style: none;
  margin: clamp(4.5rem, 9vw, 8rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .05em 0;
  font: 300 clamp(1.75rem, 4.4vw, 4rem)/1.25 var(--display);
  letter-spacing: -.035em;
  color: var(--espresso);
}
.offers li {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: opacity .9s ease, filter 1.1s ease, color .9s ease;
}
.offers li:not(:last-child) { margin-right: .62em; }
/* die Angebote führen zu ihren Seiten, sehen aber aus wie zuvor */
.offers a {
  position: relative;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.offers a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  height: 2px;
  border-radius: 2px;
  background: var(--apricot);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ease-out);
}
.offers a:hover::after,
.offers a:focus-visible::after { transform: scaleX(1); }
.offers.is-wandering li { opacity: .42; filter: blur(1.6px); }
.offers.is-wandering li.is-clear { opacity: 1; filter: blur(0); }

/* ---------- Zitat ---------- */

.quote {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--espresso);
  color: var(--on-dark);
  padding: clamp(5.5rem, 13vw, 11rem) 0;
}
.quote__fig {
  --q: 0;
  position: relative;
  z-index: 0;
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(1rem, 4vw, 3rem) clamp(0rem, 4vw, 3.5rem);
}
/* das Licht geht auf, während die Worte scharf werden */
.quote__glow {
  position: absolute;
  z-index: -1;
  left: 45%;
  top: 50%;
  width: min(130vw, 1300px);
  aspect-ratio: 2.1 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 165, 109, .22), rgba(242, 165, 109, .08) 50%, rgba(42, 27, 21, 0) 100%);
  opacity: calc(.15 + var(--q) * .85);
  transform: translate(-50%, -50%) scale(calc(.7 + var(--q) * .3));
  pointer-events: none;
}
.quote__text { margin: 0; }
.quote__text p {
  margin: 0;
  font: 300 clamp(2rem, 5.2vw, 4.8rem)/1.14 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.quote__text em { color: var(--apricot); }
.quote .qm {
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  color: var(--apricot);
}
.w {
  display: inline-block;
  transition: opacity 1s ease, filter 1.2s ease;
}
.js .w { opacity: .18; filter: blur(8px); }
.js .w.is-sharp { opacity: 1; filter: blur(0); }

/* ---------- Ablauf (5C-3, in 5A-Farben) ---------- */

.steps {
  position: relative;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(251, 230, 210, .9), rgba(247, 215, 185, 0)),
    var(--apricot-soft);
  padding: clamp(5rem, 10vw, 9rem) 0;
}
.steps__head { display: flex; flex-direction: column; gap: 1.25rem; max-width: 46rem; }
.steps__intro { margin: .25rem 0 0; font-size: 1.15rem; line-height: 1.7; max-width: 31em; color: var(--ink); }

.steps__list {
  --sg: 4.75rem;
  position: relative;
  list-style: none;
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sg);
  align-items: start;
}

/* drei weiche Flächen, wie von Hand hingelegt */
.step {
  position: relative;
  padding: clamp(1.75rem, 2.6vw, 2.4rem) clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.9rem, 2.8vw, 2.6rem);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid rgba(255, 250, 243, .7);
  box-shadow: var(--shadow-soft);
  transition: opacity 1s ease, filter 1.3s var(--focus-in), transform 1.3s var(--ease-out);
}
.js .step:not(.is-on) { opacity: 0; filter: blur(10px); transform: translateY(18px); }
/* der dritte Schritt: hier passiert der Moment, das Licht ist am wärmsten */
.step--warm {
  background:
    radial-gradient(85% 70% at 100% 0%, rgba(247, 205, 168, .8), rgba(251, 230, 210, .3) 55%, rgba(255, 250, 243, 0) 80%),
    var(--card);
}
.step__when {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin: 0 0 1.1rem;
  font: italic 300 clamp(2rem, 2.9vw, 2.6rem)/1.05 var(--body);
  letter-spacing: -.02em;
  color: var(--poppy-ink);
}
.step__when::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.35em;
  right: -.35em;
  top: 18%;
  bottom: -12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 210, 178, .85), rgba(251, 230, 210, 0));
}
.step__title {
  margin-bottom: .6rem;
  font: 500 clamp(1.3rem, 1.9vw, 1.6rem)/1.2 var(--display);
  letter-spacing: -.02em;
  color: var(--espresso);
}
.step p { margin: 0; max-width: 30em; }
.step .step__when { margin: 0 0 1.1rem; }

/* handgezeichnete Pfeile, die sich beim Scrollen zeichnen */
.step__arrow {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--rust);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.step__arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(.5, 0, .3, 1) .35s;
}
.step__arrow .step__tip { transition-duration: .35s; transition-delay: 1.25s; }
.js .step:not(.is-on) .step__arrow path { stroke-dashoffset: 1; }
.step__arrow--x { display: none; }
.step__arrow--y {
  top: calc(100% + .4rem);
  left: clamp(1.75rem, 8vw, 3rem);
  height: calc(var(--sg) - .8rem);
  width: calc((var(--sg) - .8rem) * .58);
}
.step:nth-child(2) { margin-left: clamp(.9rem, 5vw, 2.5rem); }
.step:nth-child(2) .step__arrow--y { left: clamp(2.25rem, 12vw, 4.5rem); transform: scaleX(-1); }

@media (min-width: 900px) {
  .steps__list {
    --sg: clamp(4.75rem, 7.4vw, 7.5rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .step:nth-child(2) { margin: 3.5rem 0 0; }
  .step:nth-child(3) { margin-top: 7rem; }
  .step__arrow--y { display: none; }
  .step__arrow--x {
    display: block;
    left: calc(100% + .25rem);
    top: 2.4rem;
    width: calc(var(--sg) - .5rem);
    height: calc((var(--sg) - .5rem) * .58);
  }
}

/* ---------- Portfolio (5B) ---------- */

.gallery { padding: clamp(5rem, 10vw, 9rem) 0; }
.gallery__head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.gallery__grid {
  --g: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g);
}
.shot { min-width: 0; }
.shot--a, .shot--b, .shot--e, .shot--h { grid-column: span 2; }
.shot--a { aspect-ratio: 4 / 5; }
.shot--b, .shot--e, .shot--h { aspect-ratio: 3 / 2; }
.shot--c, .shot--d, .shot--f, .shot--g { aspect-ratio: 4 / 5; }

.shot__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--apricot-soft);
  cursor: zoom-in;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
}
.shot__btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot--a img { object-position: 50% 30%; }
.shot--b img { object-position: 36% 42%; }
.shot--c img { object-position: 40% 50%; }
.shot--d img { object-position: 58% 50%; }
.shot--e img { object-position: 50% 45%; }
.shot--f img { object-position: 55% 50%; }
.shot--g img { object-position: 45% 50%; }
.shot--h img { object-position: 48% 40%; }
.shot__img { transition: transform 1.6s var(--ease-out), filter .8s var(--soft); }
.shot__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(60, 30, 14, .38), rgba(60, 30, 14, 0) 45%);
  opacity: 0;
  transition: opacity .6s var(--soft);
}
.shot__hint {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  padding: .5em 1em;
  border-radius: 999px;
  background: rgba(255, 250, 243, .94);
  color: var(--espresso);
  font: 600 .8rem/1 var(--body);
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--soft), transform .6s var(--ease-out);
}
@media (hover: hover) {
  .shot__btn:hover .shot__img { transform: scale(1.04); filter: saturate(1.06) brightness(1.03); }
  .shot__btn:hover::after { opacity: 1; }
  .shot__btn:hover .shot__hint { opacity: 1; transform: none; }
}
.shot__btn:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
.shot__btn:focus-visible .shot__hint { opacity: 1; transform: none; }

/* Erscheinen: aus der Unschärfe ins Licht */
.shot__btn .pull__soft {
  z-index: 1;
  filter: blur(20px) saturate(1.2) brightness(1.08);
  transform: scale(1.15);
  opacity: 0;
  pointer-events: none;
}
.shot.is-pending .shot__btn { opacity: 0; transform: translateY(26px) scale(.985); }
.shot.is-pending .pull__soft { opacity: 1; }
.shot.is-pending .shot__img { transform: scale(1.08); }
.shot.is-in .shot__btn {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--soft), transform 1.4s var(--ease-out);
}
.shot.is-in .pull__soft { opacity: 0; transition: opacity 1.6s var(--soft) .35s; }
.shot.is-in .shot__img { transform: none; transition: transform 2.2s var(--ease-out); }

@media (min-width: 760px) {
  .gallery__grid {
    --g: clamp(10px, 1.25vw, 18px);
    --u: calc((min(100vw - 2 * var(--pad), var(--max)) - 11 * var(--g)) / 12 * .56);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: var(--u);
  }
  .shot { aspect-ratio: auto !important; }
  .shot__btn { border-radius: var(--r); }
  .shot__btn:focus-visible { border-radius: var(--r); }
  .shot--a { grid-column: 1 / 5;  grid-row: 1 / 13; }
  .shot--b { grid-column: 5 / 13; grid-row: 1 / 8; }
  .shot--c { grid-column: 5 / 9;  grid-row: 8 / 13; }
  .shot--d { grid-column: 9 / 13; grid-row: 8 / 13; }
  .shot--e { grid-column: 1 / 8;  grid-row: 13 / 21; }
  .shot--f { grid-column: 8 / 13; grid-row: 13 / 21; }
  .shot--g { grid-column: 1 / 6;  grid-row: 21 / 29; }
  .shot--h { grid-column: 6 / 13; grid-row: 21 / 29; }
}

/* ---------- Angebote & Preise: Karten zum Anfassen ---------- */

html:not(.js) .js-only { display: none !important; }

.prices { padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(5rem, 10vw, 9rem); }
.prices__head { display: flex; flex-direction: column; gap: 1.25rem; max-width: 50rem; }
.prices__intro {
  margin: .25rem 0 0;
  max-width: 34em;
  font: 300 clamp(1.15rem, 1.5vw, 1.3rem)/1.6 var(--display);
  letter-spacing: -.005em;
  color: var(--espresso);
}
.deck__hint {
  margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
  font: italic 400 1.05rem/1.45 var(--body);
  color: var(--ink-soft);
}

/* der Tisch, auf dem die Karten liegen */
.deck {
  --tr: 26px;
  --notch: 11px;
  --stub: 6.4rem;
  --fp: clamp(1.4rem, 2.1vw, 1.8rem);
  position: relative;
  margin-top: 1rem;
}

.tcard {
  --rot: 0deg;
  --tx: 0px;
  --ty: 0px;
  --sc: 1;
  --lift: 0px;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  translate: var(--tx) calc(var(--ty) + var(--lift));
  rotate: var(--rot);
  scale: var(--sc);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition:
    translate .8s var(--ease-out),
    rotate .9s var(--ease-out),
    scale .8s var(--ease-out),
    transform .6s var(--ease-out),
    opacity .9s ease;
  -webkit-tap-highlight-color: transparent;
}
.js .tcard { cursor: pointer; }
.js .tcard:not(.is-on) { opacity: 0; --lift: 3.5rem; rotate: calc(var(--rot) * 2.6); }

.tcard__inner {
  position: relative;
  flex: 1;
  display: grid;
  border-radius: var(--tr);
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.3, .1, .12, 1);
  box-shadow: 0 34px 48px -38px rgba(96, 52, 26, .6), 0 3px 8px -2px rgba(96, 52, 26, .08);
}
.tcard.is-flipped .tcard__inner { transform: rotateY(180deg); }
.tcard.is-peek:not(.is-flipped) .tcard__inner { animation: tcard-peek 1.5s var(--ease) both; }
@keyframes tcard-peek {
  0%, 100% { transform: none; }
  45% { transform: rotateY(-26deg); }
}

/* Papier mit Kerben auf Höhe der Perforation */
.tcard__face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--fp) var(--fp) 0;
  border-radius: var(--tr);
  background:
    radial-gradient(110% 60% at 100% 0%, rgba(251, 230, 210, .75), rgba(255, 250, 243, 0) 62%),
    var(--card);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-mask:
    radial-gradient(circle at 0 calc(100% - var(--stub)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--stub)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 calc(100% - var(--stub)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--stub)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
}
.tcard__back {
  transform: rotateY(180deg);
  background:
    radial-gradient(100% 55% at 0% 100%, rgba(247, 215, 185, .55), rgba(255, 250, 243, 0) 60%),
    var(--card);
}
.tcard__back:focus { outline: none; }
.tcard--main .tcard__back {
  background:
    radial-gradient(100% 55% at 0% 100%, rgba(247, 205, 168, .7), rgba(255, 250, 243, 0) 62%),
    radial-gradient(90% 50% at 100% 0%, rgba(251, 230, 210, .9), rgba(255, 250, 243, 0) 60%),
    var(--card);
}

/* das Herzstück: warmes Aprikosenpapier */
.tcard--main .tcard__front {
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(253, 236, 220, .95), rgba(253, 236, 220, 0) 65%),
    radial-gradient(80% 50% at 0% 100%, rgba(242, 165, 109, .28), rgba(242, 165, 109, 0) 70%),
    #f8d9bd;
}

.tcard__when {
  margin: 0 0 .45rem;
  font: italic 400 1.02rem/1.38 var(--body);
  color: var(--poppy-ink);
  text-wrap: balance;
}
.tcard__name {
  margin: 0 0 1rem;
  font: 300 clamp(2.05rem, 2.5vw, 2.55rem)/1.02 var(--display);
  letter-spacing: -.035em;
  color: var(--espresso);
}
.tcard__story {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.66;
  color: var(--ink);
  text-wrap: pretty;
}
.tcard__back .tcard__when {
  margin-bottom: 1.05rem;
  font: 300 1.45rem/1.15 var(--display);
  letter-spacing: -.025em;
  color: var(--espresso);
}
.tcard__label {
  margin: 0 0 .2rem;
  font: italic 400 1.02rem/1.35 var(--body);
  color: var(--poppy-ink);
}
.tcard__text {
  margin: 0 0 1.05rem;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.tcard__text--soft { font-size: .93rem; color: var(--ink-soft); }

/* der Abriss: Preis und Umdrehen */
.tcard__stub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: var(--stub);
  margin-top: auto;
  flex: none;
}
.tcard__stub { container-type: inline-size; }
/* schmale Karte: «Was dabei ist» wird ein runder Knopf, der Name bleibt für Screenreader */
@container (max-width: 265px) {
  .tcard__turn:not(.tcard__turn--back) { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .tcard__turn:not(.tcard__turn--back) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .tcard__turn svg { width: 22px; height: 22px; }
}
.tcard__stub::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--notch) + 7px - var(--fp));
  right: calc(var(--notch) + 7px - var(--fp));
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 7px, rgba(220, 198, 174, 0) 7px 13px);
}
.tcard--main .tcard__front .tcard__stub::before {
  background: repeating-linear-gradient(90deg, rgba(196, 85, 58, .35) 0 7px, rgba(196, 85, 58, 0) 7px 13px);
}
.tcard__price {
  display: flex;
  align-items: baseline;
  gap: .3em;
  margin: 0;
  color: var(--espresso);
  white-space: nowrap;
}
.tcard__ab { font: italic 400 1.1rem/1 var(--body); color: var(--poppy-ink); }
.tcard__cur { font: 600 .7rem/1 var(--body); letter-spacing: .14em; color: var(--ink-soft); }
.tcard__num { font: 300 clamp(2.2rem, 2.6vw, 2.6rem)/1 var(--display); letter-spacing: -.045em; }

.tcard__turn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  padding: .5em .7em .55em 1em;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 250, 243, .65);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--espresso);
  font: italic 400 .98rem/1.1 var(--body);
  cursor: pointer;
  transition: background-color .35s, box-shadow .35s, color .3s;
}
.tcard--main .tcard__front .tcard__turn { background: rgba(255, 250, 243, .8); box-shadow: none; }
.tcard__turn svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--rust);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .7s var(--ease-out);
}
.tcard__turn--back { width: 46px; height: 46px; padding: 0; justify-content: center; }
.tcard__turn--back svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .tcard__turn:hover, .tcard:hover .tcard__front .tcard__turn { background: var(--card); box-shadow: inset 0 0 0 1px var(--apricot); }
  .tcard__turn:hover svg, .tcard:hover .tcard__front .tcard__turn svg { transform: rotate(-40deg); }
  .tcard__turn--back:hover svg { transform: rotate(40deg); }
}
.tcard__stub .btn--small { padding-inline: 1.25em; }

/* ---- Desktop: auf dem Tisch ausgelegt, «Ein Nachmittag» vorne ---- */
@media (min-width: 900px) {
  .deck {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
    column-gap: clamp(.25rem, .8vw, .75rem);
    align-items: stretch;
    max-width: 78rem;
    margin-inline: auto;
    padding: 2.5rem clamp(0rem, 2vw, 2rem) 3.5rem;
  }
  .tcard--a { --rot: -3.2deg; --tx: .5rem; --ty: 1.5rem; }
  .tcard--b { --sc: 1.04; --ty: -.5rem; z-index: 2; }
  .tcard--c { --rot: 2.6deg; --tx: -.5rem; --ty: 2.1rem; }
  .tcard.is-flipped { z-index: 3; }
  .tcard.is-top { z-index: 4; }
  .tcard:hover, .tcard:focus-within { z-index: 5; }
  .tcard.is-flipped, .tcard:focus-within { rotate: calc(var(--rot) * .3); }
  @media (hover: hover) {
    .tcard:hover { --lift: -1rem; rotate: calc(var(--rot) * .3); }
    .tcard:hover .tcard__inner { box-shadow: 0 50px 60px -40px rgba(96, 52, 26, .55), 0 4px 10px -2px rgba(96, 52, 26, .08); }
  }
  .tcard.is-tilting { transition: translate .8s var(--ease-out), rotate .9s var(--ease-out), scale .8s var(--ease-out), transform .18s linear, opacity .9s ease; }
  .deck__nav { display: none; }
}

/* ---- Mobile: ein Stapel zum Durchwischen ---- */
@media (max-width: 899px) {
  .deck {
    --cw: min(80vw, 23rem);
    display: flex;
    gap: .85rem;
    margin-inline: calc(-1 * var(--pad));
    padding: 1.6rem calc((100vw - var(--cw)) / 2) 3.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .deck::-webkit-scrollbar { display: none; }
  .tcard {
    --rot: calc(var(--off, 0) * 3.2deg);
    --ty: calc(var(--aoff, 0) * 1.1rem);
    --sc: calc(1 - var(--aoff, 0) * .05);
    flex: 0 0 var(--cw);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: translate .35s var(--ease-out), rotate .35s var(--ease-out), scale .35s var(--ease-out), transform .5s var(--ease-out), opacity .9s ease;
  }
  .js .tcard:not(.is-on) { --lift: 2rem; }
  .tcard:active { --lift: -.25rem; }
  .tcard__inner { box-shadow: 0 26px 34px -28px rgba(96, 52, 26, .55), 0 2px 6px -2px rgba(96, 52, 26, .08); }
  .tcard__story { font-size: 1.05rem; }
  .tcard__text--soft { font-size: .9rem; }
  .tcard__num { font-size: 2.05rem; }
  .tcard__turn { padding: .5em .6em .55em .85em; font-size: .94rem; }
  .tcard__stub .btn--small { padding-inline: .95em; font-size: .9rem; white-space: nowrap; }
  .deck__nav {
    display: flex;
    justify-content: center;
    gap: .25rem;
    margin-top: -.6rem;
  }
  .deck__nav button {
    padding: 14px 5px;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .deck__nav i {
    display: block;
    width: 22px;
    height: 4px;
    border-radius: 4px;
    background: var(--line-2);
    transition: width .5s var(--ease-out), background-color .4s;
  }
  .deck__nav [aria-current="true"] i { width: 38px; background: var(--rust); }
}
@media (max-width: 380px) {
  .deck { --fp: 1.15rem; --stub: 6rem; }
  .tcard__turn { font-size: .9rem; }
  .tcard__num { font-size: 1.85rem; }
}

/* ohne JavaScript: beide Seiten untereinander */
html:not(.js) .tcard__inner { display: block; }
html:not(.js) .tcard__back { transform: none; margin-top: .75rem; }

/* Gut zu wissen */
.notes {
  display: grid;
  gap: 1.75rem clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.note p:last-child { margin: 0; font-size: .98rem; line-height: 1.65; color: var(--ink-soft); }
@media (min-width: 860px) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Gutschein: live beschriftet ---------- */
.gift {
  position: relative;
  display: grid;
  grid-template-areas: "text" "stage" "form" "end";
  gap: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding: clamp(2rem, 5vw, 4.25rem) clamp(1.35rem, 5vw, 4.5rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(247, 205, 168, .75), rgba(247, 205, 168, 0) 70%),
    var(--paper-2);
  overflow: hidden;
  overflow: clip;
}
.gift__text { grid-area: text; display: flex; flex-direction: column; align-items: flex-start; }
.gift__title {
  margin: .7rem 0 1.1rem;
  font: 300 clamp(2.2rem, 4.4vw, 3.8rem)/1.05 var(--display);
  letter-spacing: -.035em;
  color: var(--espresso);
}
.gift__title em { color: var(--poppy-ink); }
.gift__lead { max-width: 30em; margin: 0; font-size: 1.08rem; line-height: 1.7; color: var(--ink); }
.gift__end { grid-area: end; }
.gift__fine { max-width: 32em; margin: 1.4rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.gift__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.5rem;
}

/* Personalisieren */
.gift__form { grid-area: form; display: grid; gap: 1.5rem; min-width: 0; }
.gf__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.gf__field { min-width: 0; }
.gf__label {
  display: block;
  margin: 0 0 .4rem;
  padding: 0;
  font: italic 400 1.06rem/1.3 var(--body);
  color: var(--poppy-ink);
}
.gf__label--mini { font-size: .95rem; color: var(--ink-soft); }
.gf__input {
  width: 100%;
  min-height: 52px;
  padding: .7rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--card);
  font: 400 1.06rem/1.3 var(--body);
  color: var(--espresso);
  transition: border-color .3s, box-shadow .3s;
  -webkit-appearance: none;
  appearance: none;
}
.gf__input::placeholder { color: #a08877; font-style: italic; }
.gf__input:focus { outline: none; border-color: var(--apricot); box-shadow: 0 0 0 4px rgba(242, 165, 109, .28); }
.gf__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.gf__seg {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 250, 243, .55);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.gf__seg label, .gf__chips label:has(> input[type="radio"]) { position: relative; display: block; }
.gf__seg input, .gf__chips label > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.gf__seg span {
  display: block;
  padding: .62em 1.2em .66em;
  border-radius: 999px;
  font: 400 .98rem/1.2 var(--body);
  color: var(--ink-soft);
  transition: background-color .35s, color .3s, box-shadow .35s;
  pointer-events: none;
}
.gf__seg input:checked + span {
  background: var(--espresso);
  color: var(--on-dark);
  box-shadow: 0 8px 16px -10px rgba(42, 27, 21, .7);
}
@media (hover: hover) {
  .gf__seg label:hover input:not(:checked) + span { color: var(--espresso); }
  .gf__chips label:hover > input:not(:checked) + span { box-shadow: inset 0 0 0 1px var(--apricot); }
}
.gf__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.gf__chips label > span {
  display: block;
  min-height: 44px;
  padding: .66em 1.1em .7em;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 400 1rem/1.2 var(--body);
  color: var(--ink);
  transition: background-color .3s, box-shadow .3s, color .3s;
  pointer-events: none;
}
.gf__chips label > input:checked + span {
  background: var(--apricot-soft);
  box-shadow: inset 0 0 0 1.5px var(--apricot);
  color: var(--espresso);
}
.gf__seg input:focus-visible + span,
.gf__chips label > input:focus-visible + span { outline: 2px solid var(--poppy-ink); outline-offset: 2px; }
/* «frei …» verwandelt sich direkt in ein Feld «CHF ___» */
.gf__own { position: relative; display: flex; }
.gf__own-box { display: none; }
.gf__own.is-on .gf__own-pick span { display: none; }
.gf__own.is-on .gf__own-pick { position: absolute; inset: 0; pointer-events: none; }
.gf__own.is-on .gf__own-box {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  min-height: 44px;
  padding: .5em .9em .5em 1.05em;
  border-radius: 999px;
  background: var(--apricot-soft);
  box-shadow: inset 0 0 0 1.5px var(--apricot);
  animation: gf-open .45s var(--ease-out);
}
.gf__own.is-on:has(.gf__own-in[aria-invalid="true"]) .gf__own-box { box-shadow: inset 0 0 0 1.5px var(--poppy-ink); }
@keyframes gf-open { from { opacity: .4; transform: scale(.94); } }
.gf__own-cur { font: 600 .74rem/1 var(--body); letter-spacing: .14em; color: var(--ink-soft); cursor: text; }
.gf__own-in {
  width: 4.6em;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1.5px solid rgba(196, 85, 58, .45);
  border-radius: 0;
  background: transparent;
  font: 400 16px/1.3 var(--display);
  font-size: max(16px, 1.05rem);
  color: var(--espresso);
  -webkit-appearance: none;
  appearance: none;
}
.gf__own-in::placeholder { color: #a08877; font: italic 400 1em/1.3 var(--body); }
.gf__own-in:focus { outline: none; border-bottom-color: var(--poppy-ink); }
.gf__own.is-on:has(.gf__own-in:focus-visible) .gf__own-box,
.gf__own.is-on:has(input[type="radio"]:focus-visible) .gf__own-box { outline: 2px solid var(--poppy-ink); outline-offset: 2px; }
.gf__hint { margin: .7rem 0 0 .2rem; font: italic 400 .95rem/1.4 var(--body); color: var(--ink-soft); transition: color .3s; }
.gf__hint.is-warn { color: var(--poppy-ink); }

/* die Bühne: ein echtes Couvert.
   Ruhezustand = Rückseite: obere Lasche aufgeklappt (Futter sichtbar), die Karte steckt in der Öffnung
   zwischen Innenwand und den Seitenlaschen, darüber die untere Lasche. Zugeklebt und umgedreht = Vorderseite
   mit Absender, Briefmarke, Poststempel und Adresse. */
.gift__stage {
  --paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --paper-fib: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .22' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .32 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --lining: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23c4553a' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 15.6c-2.6-2.1-4.6-3.8-4.6-5.9a2.3 2.3 0 0 1 4.6-.7 2.3 2.3 0 0 1 4.6.7c0 2.1-2 3.8-4.6 5.9Z'/%3E%3Cpath d='M33 37.6c-2.6-2.1-4.6-3.8-4.6-5.9a2.3 2.3 0 0 1 4.6-.7 2.3 2.3 0 0 1 4.6.7c0 2.1-2 3.8-4.6 5.9Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 7.5cqi 7.5cqi,
    repeating-linear-gradient(135deg, rgba(196, 85, 58, .12) 0 1px, rgba(196, 85, 58, 0) 1px 1.9cqi),
    #f8dcc0;
  --env-paper: #f8e8d3;
  --env-shade: #f1d9bd;
  /* Masse des Couverts (Rückseite und Vorderseite gleich gross) */
  --ew: 94cqi;
  --eh: 58.8cqi;
  --flap: 34cqi;
  grid-area: stage;
  justify-self: center;
  width: min(100%, 30rem);
  container-type: inline-size;
}
.env {
  position: relative;
  height: 106cqi;
  perspective: 170cqi;
}
.env__body {
  position: absolute;
  left: 3cqi;
  top: 44cqi;
  width: var(--ew);
  height: var(--eh);
  rotate: .8deg;
  transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.5, 0, .5, 1);
}
.env__back,
.env__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* die verdeckte Seite wird genau in der Mitte der Drehung ausgeblendet
   (zuverlässiger als backface-visibility allein, v.a. in Safari) */
.env__back { transform: translateZ(0); transition: visibility 0s .475s; }
.env__face { transform: rotateY(180deg); visibility: hidden; transition: visibility 0s .47s, opacity .6s ease .2s, translate .8s var(--ease-out); }
.gift__stage[data-env="closed"] .env__back { visibility: hidden; transition: visibility 0s 2.225s; }
.gift__stage[data-env="closed"] .env__face { visibility: visible; transition: visibility 0s 2.225s; }

/* Innenwand: die Innenseite der Vorderwand, gefüttert wie die Lasche, oben etwas im Schatten */
.env__wall {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 1.2cqi 1.2cqi 1.8cqi 1.4cqi;
  background:
    linear-gradient(180deg, rgba(110, 50, 25, .22), rgba(110, 50, 25, .06) 30%, rgba(110, 50, 25, 0) 50%),
    var(--lining);
  box-shadow:
    0 2px 3px rgba(96, 52, 26, .1),
    0 22px 30px -16px rgba(96, 52, 26, .42),
    0 46px 60px -40px rgba(96, 52, 26, .35);
}

/* obere Lasche: am oberen Rand angeschlagen; offen zeigt sie ihr Futter, zu ihr Papier */
.env__flap {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--flap);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: perspective(120cqi) rotateX(0deg);
}
.env__flap-in,
.env__flap-out {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.env__flap-in::before,
.env__flap-out::before,
.env__lining {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 100%, 3% 95%, 45.5% 5%, 47.5% 1.6%, 50% 0, 52.5% 1.6%, 54.5% 5%, 97% 95%, 100% 100%);
}
.env__flap-in { filter: drop-shadow(0 -1px 1.5px rgba(96, 52, 26, .16)); }
.env__flap-in::before { background: var(--paper-tex), linear-gradient(0deg, #ecd3b4, var(--env-paper) 60%); }
/* das Futter ist vom Papierrand etwas eingerückt, unten am Falz im Schatten */
.env__lining {
  inset: 3.4cqi 6cqi 0;
  background: linear-gradient(0deg, rgba(110, 50, 25, .2), rgba(110, 50, 25, 0) 26%), var(--lining);
}
/* Aussenseite: zugeklappt liegt die Spitze unten, mit weichem Schatten auf den Laschen darunter */
.env__flap-out {
  transform: rotateY(180deg);
  filter: drop-shadow(0 1.2cqi 1cqi rgba(96, 52, 26, .18)) drop-shadow(0 .2cqi .2cqi rgba(96, 52, 26, .14));
}
.env__flap-out::before {
  background:
    var(--paper-tex),
    linear-gradient(180deg, rgba(150, 95, 55, .12), rgba(150, 95, 55, 0) 25%),
    linear-gradient(180deg, var(--env-paper), var(--env-shade));
}

/* die Tasche: eine glatte, ruhige Papierfläche; oben die Öffnung mit einem sanften Daumenausschnitt,
   ein feiner Schatten fällt von ihrer Kante auf die Karte und ins Futter */
.env__pocket {
  position: absolute;
  z-index: 3;
  inset: 0;
  filter: drop-shadow(0 -.3cqi .5cqi rgba(96, 52, 26, .2)) drop-shadow(0 -.08cqi .1cqi rgba(96, 52, 26, .12));
  pointer-events: none;
}
.env__pocket i {
  position: absolute;
  inset: 0;
  border-radius: 1.2cqi 1.2cqi 1.8cqi 1.4cqi;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, .55), rgba(255, 252, 246, 0) 9%),
    radial-gradient(130% 90% at 20% 0%, rgba(255, 250, 243, .55), rgba(255, 250, 243, 0) 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(150, 90, 50, .1), rgba(150, 90, 50, 0) 60%),
    var(--paper-tex),
    var(--paper-fib),
    linear-gradient(180deg, var(--env-paper), var(--env-shade));
  -webkit-mask: radial-gradient(23cqi 7.4cqi at 50% 0, #0000 calc(100% - .4px), #000 100%);
  mask: radial-gradient(23cqi 7.4cqi at 50% 0, #0000 calc(100% - .4px), #000 100%);
}

/* «Für Anna» – nur vorne als Adresse */
.env__addr {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 1.6cqi;
  margin: 0;
  color: #4a2f24;
}
.env__for { flex: none; font: italic 400 4cqi/1 var(--body); opacity: .75; }
.env__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: .12em .04em .05em;
  font: italic 300 8.2cqi/1.15 var(--body);
  letter-spacing: -.01em;
  transition: opacity .4s ease;
}
.env__name.is-empty { opacity: .4; }
.env__name .ch { display: inline-block; white-space: pre; animation: gc-ink .8s var(--focus-in) both; }
/* ein Bleistiftstrich unter dem Namen, nicht ganz gerade */
.env__addr--front::after {
  content: "";
  position: absolute;
  left: 7cqi;
  right: 0;
  bottom: -1.2cqi;
  height: 1.4cqi;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6c30-1.6 62-2 96-1.2s70 1.6 102-.4' fill='none' stroke='%237a5a48' stroke-opacity='.4' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Herz-Sticker: gibt es erst beim Zukleben – er wird auf die Spitze der zugeklappten Lasche gedrückt */
.env__seal {
  position: absolute;
  z-index: 9;
  left: calc(50% - 3.8cqi);
  top: calc(var(--flap) - 4.4cqi);
  display: grid;
  place-items: center;
  width: 7.6cqi;
  height: 7.6cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffaf3, #f6e7d4 70%);
  box-shadow: 0 .25cqi .4cqi rgba(96, 52, 26, .3), inset 0 0 0 .35cqi rgba(196, 85, 58, .25);
  rotate: -6deg;
  scale: .4;
  opacity: 0;
}
.env__seal svg { width: 4.6cqi; height: 4.6cqi; fill: var(--poppy-ink); opacity: .85; }

/* Vorderseite */
.env__face {
  overflow: hidden;
  border-radius: 1.4cqi 1.2cqi 1.4cqi 1.8cqi;
  background:
    var(--paper-tex),
    var(--paper-fib),
    radial-gradient(120% 90% at 82% 0%, rgba(255, 250, 243, .7), rgba(255, 250, 243, 0) 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(150, 90, 50, .12), rgba(150, 90, 50, 0) 60%),
    linear-gradient(180deg, var(--env-paper), var(--env-shade));
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 246, .9),
    inset 0 -1px 2px rgba(120, 70, 40, .12),
    0 2px 3px rgba(96, 52, 26, .1),
    0 22px 30px -16px rgba(96, 52, 26, .42);
}
.env__sender { position: absolute; left: 6cqi; top: 6cqi; width: 15cqi; height: auto; opacity: .8; }
.env__addr--front { left: 26cqi; top: 33cqi; width: 54cqi; rotate: -2deg; }

/* Briefmarke mit gezacktem Rand und einem Foto aus dem Bestand */
.env__stamp {
  --s: 2.2cqi;
  position: absolute;
  right: 6cqi;
  top: 5.4cqi;
  display: flex;
  flex-direction: column;
  width: calc(var(--s) * 6);
  height: calc(var(--s) * 7);
  padding: calc(var(--s) * .62) calc(var(--s) * .62) calc(var(--s) * .5);
  background: #fffaf4;
  rotate: 3deg;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle, #0000 calc(var(--s) * .3), #000 calc(var(--s) * .3 + .5px)) calc(var(--s) * -.5) calc(var(--s) * -.5) / var(--s) var(--s);
  mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle, #0000 calc(var(--s) * .3), #000 calc(var(--s) * .3 + .5px)) calc(var(--s) * -.5) calc(var(--s) * -.5) / var(--s) var(--s);
}
.env__stamp img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 34% 50%;
  filter: saturate(.92) sepia(.08);
}
.env__stamp i {
  display: block;
  margin-top: .5cqi;
  font: 600 1.35cqi/1 var(--body);
  font-style: normal;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  color: var(--poppy-ink);
}
/* Poststempel: Ring mit Ort und Datum links, die Wellen entwerten die Marke */
.env__pm {
  position: absolute;
  left: 61cqi;
  top: 7.6cqi;
  width: 40cqi;
  height: auto;
  overflow: visible;
  rotate: -6deg;
  color: #3c2b33;
  opacity: .55;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.env__pm text { fill: currentColor; font-family: var(--body); }
.env__pm-city { font-size: 6.6px; font-weight: 600; letter-spacing: 1.1px; }
.env__pm-date { font-size: 8.6px; font-weight: 600; letter-spacing: .6px; }

/* die Karte: halb herausgezogen, ihr unteres Ende steckt in der Tasche */
.gcard {
  position: absolute;
  z-index: 2;
  left: 10cqi;
  top: -33cqi;
  width: 74cqi;
  rotate: -3deg;
  translate: 0 0;
  scale: 1;
  transform: translateY(0);
  filter: drop-shadow(0 10px 14px rgba(96, 52, 26, .2)) drop-shadow(0 1px 2px rgba(96, 52, 26, .1));
  container-type: inline-size;
}
.gift__stage .gcard__paper {
  translate: 0 var(--pull, 0cqi);
  transition: translate .8s var(--ease-out);
}
.js .gift__stage:not(.is-in) .gcard__paper { --pull: 22cqi; }
.gift__stage.is-in .gcard__paper { transition: translate 1.5s cubic-bezier(.2, .7, .15, 1); }

/* der Brief ist selbst der Schalter: eine unsichtbare Fläche darüber, beim Darüberfahren hebt er sich leicht */
.gift__stage { position: relative; }
.env { translate: 0 0; transition: translate .5s var(--ease-out); }
.env__hit {
  position: absolute;
  z-index: 6;
  left: 3cqi;
  top: 14cqi;
  width: 94cqi;
  height: 90cqi;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3cqi;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.env__hit:focus-visible { outline: 2px solid var(--poppy-ink); outline-offset: 4px; }
@media (hover: hover) {
  .gift__stage:has(.env__hit:hover) .env { translate: 0 -1.4cqi; }
}
.gift__stage:has(.env__hit:active) .env { translate: 0 -.6cqi; transition-duration: .15s; }
.gift__stage[data-way="pdf"] .env__hit { display: none; }

/* ---- Zukleben: Karte hinein → Lasche zu → Herz aufdrücken → umdrehen ----
   Öffnen läuft rückwärts: zurückdrehen → Herz weg → Lasche auf → Karte heraus */
.gcard { transition: transform .55s var(--ease) 1.85s, translate 1s var(--ease-out) .55s, rotate 1s var(--ease-out) .55s, scale 1s var(--ease-out) .55s; }
.env__flap { transition: transform .7s cubic-bezier(.5, 0, .25, 1) 1.1s, z-index 0s 1.8s; }
.env__seal { transition: scale .2s ease-in .85s, opacity .2s ease .85s; }
.env__body { transition-delay: 0s; }

.gift__stage[data-env="closed"] .gcard { transform: translateY(37cqi); transition: transform .55s var(--ease) 0s; }
.gift__stage[data-env="closed"] .env__flap {
  z-index: 7;
  transform: perspective(120cqi) rotateX(-180deg);
  transition: transform .7s cubic-bezier(.5, 0, .25, 1) .5s, z-index 0s .5s;
}
.gift__stage[data-env="closed"] .env__seal {
  scale: 1;
  opacity: 1;
  /* aufgedrückt: kommt etwas zu gross und federt nach */
  transition: scale .5s cubic-bezier(.3, 1.8, .55, 1) 1.22s, opacity .15s ease 1.22s;
}
.gift__stage[data-env="closed"] .env__body {
  transform: rotateY(180deg);
  transition: transform .95s cubic-bezier(.5, 0, .5, 1) 1.75s;
}

/* ---- «Sofort als PDF»: die Karte liegt frei, das Couvert verschwindet ---- */
.env__wall, .env__pocket, .env__flap-in, .env__flap-out {
  transition: opacity .6s ease .2s, translate .8s var(--ease-out);
}
.gift__stage[data-way="pdf"] .env__body { transform: none; transition: transform .5s var(--ease); }
.gift__stage[data-way="pdf"] .gcard {
  translate: 0 17cqi;
  rotate: 0deg;
  scale: 1.12;
  transform: none;
  transition: translate .95s var(--ease-out), rotate .95s var(--ease-out), scale .95s var(--ease-out), transform .5s;
}
.gift__stage[data-way="pdf"] .env__flap { transform: perspective(120cqi) rotateX(0deg); z-index: 0; transition: transform .4s, z-index 0s; }
.gift__stage[data-way="pdf"] :is(.env__wall, .env__pocket, .env__flap-in, .env__flap-out, .env__face) {
  opacity: 0;
  translate: 0 24cqi;
  transition: translate .8s var(--ease) .45s, opacity .6s ease .55s;
}

/* Hinweis unter dem Couvert: zwei leise, kursive Zeilen untereinander */
.gift__envbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  margin-top: .6rem;
  text-align: center;
}
.gift__envbar .gift__way-note { margin: 0; }
.gift__envhint {
  margin: 0;
  font: italic 400 .92rem/1.4 var(--body);
  color: var(--ink-soft);
  opacity: .8;
  transition: opacity .5s ease;
}
.gift__stage:is([data-env="closed"], [data-way="pdf"]) .gift__envhint { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }

.gcard__paper {
  --px: 67%;
  --gn: 2.6cqi;
  position: relative;
  display: grid;
  grid-template-columns: var(--px) 1fr;
  aspect-ratio: 1.56;
  border-radius: 3cqi;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(251, 230, 210, .85), rgba(255, 250, 243, 0) 70%),
    var(--card);
  -webkit-mask:
    radial-gradient(circle at var(--px) 0, #0000 var(--gn), #000 calc(var(--gn) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--px) 100%, #0000 var(--gn), #000 calc(var(--gn) + .5px)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--px) 0, #0000 var(--gn), #000 calc(var(--gn) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--px) 100%, #0000 var(--gn), #000 calc(var(--gn) + .5px)) bottom / 100% 51% no-repeat;
}
.gcard p { margin: 0; }
.gcard__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6cqi 4.5cqi 5cqi 6cqi;
}
.gcard__kind {
  margin-bottom: 3.4cqi !important;
  font: 300 7.4cqi/1 var(--display);
  letter-spacing: -.04em;
  color: var(--espresso);
}
.gcard__row {
  display: flex;
  align-items: baseline;
  gap: 1.8cqi;
  padding-bottom: .9cqi;
  border-bottom: 1px solid var(--line-2);
}
.gcard__row--from { margin-top: 3.2cqi !important; }
.gcard__pre { flex: none; font: italic 400 3.3cqi/1 var(--body); color: var(--ink-soft); }
.gcard__hand {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: .1em .05em 0;
  font: italic 300 var(--hs, 7.6cqi)/1.15 var(--body);
  letter-spacing: -.01em;
  color: var(--poppy-ink);
  transition: opacity .4s ease;
}
.gcard__from { --hs: 5.6cqi; color: var(--espresso); }
.gcard__hand.is-empty { opacity: .36; }
.gcard__hand .ch { display: inline-block; white-space: pre; animation: gc-ink .7s var(--focus-in) both; }
@keyframes gc-ink {
  from { opacity: 0; filter: blur(3px); transform: translateY(.12em); }
}
.gcard__date {
  margin-top: auto !important;
  font: italic 400 2.6cqi/1.3 var(--body);
  color: var(--ink-soft);
}
.gcard__stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqi;
  min-width: 0;
  padding: 5cqi 3cqi;
  text-align: center;
}
.gcard__stub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4.5cqi;
  bottom: 4.5cqi;
  width: 1.5px;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 1.6cqi, rgba(220, 198, 174, 0) 1.6cqi 3cqi);
}
.gcard__logo { order: -1; width: 15cqi; height: auto; margin-bottom: auto; opacity: .9; }
.gcard__type { font: italic 400 3.1cqi/1.2 var(--body); color: var(--poppy-ink); }
.gcard__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .2em .6cqi;
  margin-bottom: auto !important;
  color: var(--espresso);
}
.gcard__cur { font: 600 2.2cqi/1 var(--body); letter-spacing: .14em; color: var(--ink-soft); }
.gcard__num { font: 300 9cqi/1 var(--display); letter-spacing: -.045em; }
.gcard__fmt { display: block; width: 100%; font: 400 4.4cqi/1.12 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.gcard__ab { display: block; width: 100%; margin-top: 1cqi; font: italic 400 3cqi/1.2 var(--body); color: var(--ink-soft); }
.gcard.is-bump .gcard__value { animation: gc-bump .7s var(--ease-out); }
@keyframes gc-bump {
  from { opacity: .2; filter: blur(4px); transform: scale(.94); }
}
/* Handy: die Karte reist beim Tippen klein mit – auf einem ruhigen Blatt unter dem Header */
.gmini {
  position: fixed;
  z-index: 45;
  left: 50%;
  top: calc(var(--vvt, var(--header)) + .55rem);
  width: min(14.5rem, 62vw);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -14px) scale(.96);
  transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s .5s;
  pointer-events: none;
}
.gmini.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s;
}
/* was darunter liegt, verschwindet sauber dahinter statt halb verdeckt zu werden */
.gmini::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -.6rem;
  bottom: -.75rem;
  width: 100vw;
  transform: translateX(-50%);
  background: rgba(240, 227, 209, .98);
  box-shadow: 0 10px 18px -12px rgba(96, 52, 26, .35);
}
.gmini__cap {
  display: block;
  margin: 0 0 .3rem .2rem;
  font: italic 400 .88rem/1.2 var(--body);
  color: var(--poppy-ink);
}
.gmini .gcard {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  rotate: -1deg;
  translate: none;
  scale: 1;
  transform: none;
  filter: drop-shadow(0 8px 12px rgba(96, 52, 26, .24)) drop-shadow(0 1px 2px rgba(96, 52, 26, .1));
  transition: none;
}
@media (min-width: 960px) { .gmini { display: none; } }

.gift__way-note {
  margin: .4rem 0 0;
  text-align: center;
  font: italic 400 1rem/1.4 var(--body);
  color: var(--ink-soft);
}

@media (min-width: 960px) {
  .gift {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5.2fr);
    grid-template-areas: "text stage" "form stage" "end stage";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    row-gap: 2.25rem;
  }
  .gift__stage { align-self: center; }
}
@media (max-width: 959px) {
  .gift { gap: 1.6rem; }
  .gift__stage { width: min(100%, 22rem); }
  .gift__form { gap: 1.25rem; }
}
@media (max-width: 420px) {
  .gf__seg span { padding-inline: .95em; font-size: .95rem; }
}

/* ---------- Kontakt ---------- */

.contact {
  position: relative;
  background: var(--espresso);
  color: var(--on-dark);
  padding: clamp(5rem, 10vw, 9rem) 0;
  overflow: hidden;
  overflow: clip;
}
.contact::before {
  content: "";
  position: absolute;
  right: -20%;
  top: -10%;
  width: 80vw;
  max-width: 1100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 165, 109, .12), rgba(42, 27, 21, 0));
  pointer-events: none;
}
.contact__grid { position: relative; display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.contact__text { display: flex; flex-direction: column; align-items: flex-start; }
.contact__text p { color: var(--on-dark-soft); max-width: 32em; }
.contact__title { margin: 0 0 1.75rem; color: var(--on-dark); font-size: clamp(2.5rem, 4.8vw, 4.4rem); }
.contact__title em { display: block; color: var(--apricot); }
.contact__text .contact__lead {
  color: var(--on-dark);
  font: 300 clamp(1.25rem, 1.7vw, 1.45rem)/1.5 var(--display);
  letter-spacing: -.01em;
}
.region {
  margin-top: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(248, 240, 229, .16);
}
.contact__text .region__label {
  margin-bottom: .6rem;
  font: italic 400 1.12rem/1.3 var(--body);
  color: var(--apricot);
}
.contact__text .region__far {
  font: italic 400 1.2rem/1.45 var(--body);
  color: var(--on-dark);
}
.contact__links {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
}
.contact__links a {
  font: 400 1.15rem/1.3 var(--display);
  letter-spacing: -.01em;
  color: var(--on-dark);
  text-decoration: none;
  background: linear-gradient(var(--apricot), var(--apricot)) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: .2em;
  transition: color .3s, background-size .5s var(--ease-out);
}
.contact__links a:hover { color: var(--apricot); background-size: 40% 1.5px; }
.contact :focus-visible { outline-color: var(--apricot); }

@media (min-width: 1000px) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 6.5rem);
    align-items: start;
  }
  .contact__text { position: sticky; top: calc(var(--header) + 2rem); }
}

.contact__formwrap { position: relative; }
/* Ansage beim Moduswechsel (Gutschein/Angebot): sichtbar ist die Karte im Formular selbst */
.contact__pick {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Formular: Angebot und Gutschein als Karten im Schritt 1 ---------- */
.kf .kf-progress__bars i.is-skip { display: none; }
.kf--gift :is(.kf-chips, #kf-occ-hint, [data-kf-reveal="other"], [data-kf-alt]) { display: none !important; }

.kf-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background:
    linear-gradient(var(--apricot), var(--apricot)) 0 calc(100% - .55em) / 100% 1.5px no-repeat;
  font: italic 400 1rem/1.3 var(--body);
  color: var(--espresso);
  cursor: pointer;
  transition: color .3s, background-size .5s var(--ease-out);
}
.kf-link--soft { color: var(--ink-soft); background-image: linear-gradient(var(--line-2), var(--line-2)); }
@media (hover: hover) {
  .kf-link:hover { color: var(--poppy-ink); background-size: 40% 1.5px; }
}
.kf-alt { margin-top: 1.1rem !important; }

/* Gutschein im Formular */
.kf-gift { display: grid; gap: 1.1rem; margin-top: 1.1rem; }
.kf-gift[hidden], .kf-pick[hidden] { display: none; }
.kf-gift__card {
  justify-self: center;
  width: min(100%, 21rem);
  padding: .4rem .2rem .9rem;
}
.kf-gift__card .gcard,
.kf-sum__giftcard .gcard {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  rotate: -1.6deg;
  translate: none;
  scale: 1;
  transform: none;
  filter: drop-shadow(0 12px 16px rgba(96, 52, 26, .22)) drop-shadow(0 1px 2px rgba(96, 52, 26, .1));
  transition: none;
}
.kf-gift__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.kf-gift__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1.4rem; }

/* Angebot im Formular: drei kleine Karten zur Wahl, die gewählte steht vorne */
.kf-pick { display: grid; gap: .65rem; margin: 1.1rem 0 1.4rem; }
.kf-pick__list { display: grid; gap: .5rem; }
.kf-pick__opt { position: relative; display: block; }
.kf-pick__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kf-pick__card,
.kf-sum__pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .4rem .95rem;
  padding: .55rem 1rem .55rem .55rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--kf-line);
  transition: background-color .35s, box-shadow .35s, transform .5s var(--ease-out);
  pointer-events: none;
}
.kf-pick__pic {
  display: block;
  width: 4.4rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 11px;
  background: var(--apricot-soft);
  transition: width .5s var(--ease-out);
}
.kf-pick__pic img { width: 100%; height: 100%; object-fit: cover; }
.kf-pick__txt { display: flex; flex-direction: column; min-width: 0; }
.kf-pick__name { font: 400 1.12rem/1.2 var(--display); letter-spacing: -.015em; color: var(--espresso); }
.kf-pick__when { margin-top: .15rem; font: italic 400 .92rem/1.35 var(--body); color: var(--ink-soft); }
.kf-pick__price { font: italic 400 .98rem/1.2 var(--body); color: var(--poppy-ink); white-space: nowrap; }
.kf-pick__opt input:not(:checked) + .kf-pick__card .kf-pick__when { display: none; }
.kf-pick__opt input:not(:checked) + .kf-pick__card .kf-pick__pic { width: 3rem; }
.kf-pick__opt input:checked + .kf-pick__card {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(253, 236, 220, .95), rgba(253, 236, 220, 0) 70%),
    #fbe3cd;
  box-shadow: inset 0 0 0 1.5px var(--apricot), 0 12px 20px -16px rgba(96, 52, 26, .55);
  transform: rotate(-.6deg);
}
.kf-pick__opt input:checked + .kf-pick__card .kf-pick__pic { width: 5.6rem; }
@media (hover: hover) {
  .kf-pick__opt:hover input:not(:checked) + .kf-pick__card { box-shadow: inset 0 0 0 1px var(--apricot); }
}
.kf-pick__opt input:focus-visible + .kf-pick__card { outline: 2px solid var(--poppy-ink); outline-offset: 3px; }
.kf-pick > .kf-link { justify-self: start; }

/* kommt von oben ins Formular: legt sich sanft hin */
.kf-gift.is-arriving .kf-gift__card,
.kf-pick.is-arriving .kf-pick__opt:has(:checked) {
  animation: kf-arrive 1s cubic-bezier(.2, .8, .25, 1) .45s both;
}
@keyframes kf-arrive {
  from { opacity: 0; transform: translateY(-2.2rem) rotate(-6deg) scale(.94); filter: blur(4px); }
}

/* Übersicht */
.kf-sum__gift { display: grid; gap: .9rem; justify-items: center; margin-bottom: .2rem; }
.kf-sum__giftcard { width: min(100%, 17rem); }
.kf-sum__gifttxt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .2rem 1rem;
  width: 100%;
  padding: .8rem 1.1rem;
  border: 1px solid var(--kf-line);
  border-radius: 16px;
  background: #fff;
}
.kf-sum__pick { pointer-events: auto; }
.kf-sum__pick .kf-pick__pic { width: 4.8rem; }
.kf-sum__pick .kf-sum__label { margin-bottom: .15rem; }
.kf-sum__gift .kf-sum__edit,
.kf-sum__pick .kf-sum__edit { grid-row: auto; font: italic 400 .95rem/1.3 var(--body); color: var(--kf-warm); }
.kf-sum__gifttxt .kf-sum__edit { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 599px) {
  .kf-gift__fields { grid-template-columns: 1fr; gap: .2rem; }
  .kf-pick__card { grid-template-columns: auto minmax(0, 1fr); gap: .1rem .8rem; padding-right: .9rem; }
  .kf-pick__card .kf-pick__pic { grid-row: 1 / span 2; }
  .kf-pick__price { grid-column: 2; font-size: .92rem; }
  .kf-pick__opt input:checked + .kf-pick__card .kf-pick__pic { width: 4.6rem; }
  .kf-sum__pick { grid-template-columns: auto minmax(0, 1fr); gap: .3rem .75rem; padding-right: .8rem; }
  .kf-sum__pick .kf-sum__edit { grid-column: 2; justify-self: start; min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-gift.is-arriving .kf-gift__card,
  .kf-pick.is-arriving .kf-pick__opt:has(:checked) { animation: none; }
}

/* Formular-Baustein (form.css) – nur über seine Variablen an 5A angepasst */
.contact .kf {
  --kf-card: var(--card);
  --kf-field: #f7eee3;
  --kf-field-hover: #f3e7d9;
  --kf-espresso: var(--espresso);
  --kf-ink: var(--ink);
  --kf-soft: var(--ink-soft);
  --kf-placeholder: #957d6e;
  --kf-line: var(--line);
  --kf-line-2: var(--line-2);
  --kf-apricot: var(--apricot);
  --kf-apricot-soft: #fbe3cd;
  --kf-apricot-line: #efbb91;
  --kf-glow: var(--apricot-glow);
  --kf-poppy: var(--poppy);
  --kf-accent: var(--poppy-ink);
  --kf-warm: #8f5c45;
  --kf-ok: #3d6b4c;
  --kf-font-display: var(--display);
  --kf-font-body: var(--body);
  --kf-radius: var(--r-lg);
}
.contact .kf-progress__text { font: italic 400 .98rem/1 var(--body); letter-spacing: 0; text-transform: none; }
.contact .kf-sum__label { font: italic 400 .98rem/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--poppy-ink); }

/* ---------- Footer: die letzte Seite im Album ---------- */

.foot {
  --tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 24' preserveAspectRatio='none'%3E%3Cpath d='M0 10.0 9 8.7 16 10.3 25 7.8 33 9.2 39 10.0 45 8.0 53 9.9 61 10.2 70 8.9 76 8.4 82 10.5 90 8.8 95 6.9 104 6.6 110 6.5 115 6.5 121 8.9 127 10.8 134 9.9 140 10.1 146 8.4 152 10.8 160 9.8 167 9.3 173 8.1 180 7.1 189 7.5 198 8.5 205 6.5 212 8.2 220 9.2 226 9.1 232 6.8 237 9.1 244 10.9 249 11.2 257 10.5 266 12.2 274 9.9 280 10.5 286 8.5 292 10.8 300 10.0 307 12.0 314 13.0 319 13.0 326 13.0 331 12.7 336 11.1 345 11.7 351 10.9 360 8.8 367 7.8 372 8.4 379 11.0 385 12.1 390 13.0 399 13.0 404 11.6 413 10.8 420 10.6 428 8.7 433 10.3 440 12.1 446 13.0 455 13.0 463 11.0 471 10.3 476 12.1 483 10.2 492 12.1 501 11.8 509 12.8 520 10V24H0Z'/%3E%3C/svg%3E");
  position: relative;
  z-index: 1;
  overflow: hidden;
  overflow: clip;
  margin-top: -20px;
  /* die Seite ist an der oberen Kante leicht ausgerissen und liegt auf dem dunklen Kontaktteil */
  background:
    linear-gradient(180deg, #ecdcc6 0, #f3e7d6 22px, var(--paper) 90px),
    var(--paper);
  -webkit-mask: var(--tear) 0 0 / 520px 22px repeat-x, linear-gradient(#000 0 0) 0 21px / 100% calc(100% - 21px) no-repeat;
  mask: var(--tear) 0 0 / 520px 22px repeat-x, linear-gradient(#000 0 0) 0 21px / 100% calc(100% - 21px) no-repeat;
  padding: clamp(3rem, 5.5vw, 4.5rem) 0 calc(1.1rem + env(safe-area-inset-bottom, 0px));
}
/* das Licht geht unten noch einmal auf */
.foot::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -38%;
  width: min(150vw, 1400px);
  aspect-ratio: 2.2 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 165, 109, .42), rgba(247, 215, 185, .3) 50%, rgba(248, 240, 229, 0));
  transform: translateX(-50%);
  pointer-events: none;
}
.foot .wrap { position: relative; z-index: 1; }

/* ein paar eingeklebte Abzüge und ein Gruss */
.foot__page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}
.foot__album {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  padding: 1rem 0 0;
}
.foot__snap {
  --t: -4deg;
  --y: 0px;
  position: relative;
  z-index: 1;
  flex: none;
  margin: 0 -.55rem;
  padding: 6px;
  border-radius: 5px;
  background: #fffdf9;
  box-shadow: 0 16px 24px -16px rgba(96, 52, 26, .55), 0 1px 2px rgba(96, 52, 26, .14);
  rotate: var(--t);
  translate: 0 var(--y);
  transition: rotate .7s var(--ease-out), translate .7s var(--ease-out), scale .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.foot__snap img {
  display: block;
  width: auto;
  height: clamp(4.4rem, 6.4vw, 6.4rem);
  border-radius: 2px;
  filter: saturate(.94) sepia(.05);
}
/* ein Streifen Klebeband oben */
.foot__snap::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 50%;
  width: 3.6rem;
  height: 1rem;
  margin-left: -1.8rem;
  rotate: calc(var(--t) * -1.4);
  background: rgba(251, 230, 210, .8);
  box-shadow: 0 1px 2px rgba(96, 52, 26, .1);
}
.foot__snap:nth-child(1) { --t: -5deg; --y: 6px; }
.foot__snap:nth-child(2) { --t: 3.5deg; --y: -8px; }
.foot__snap:nth-child(3) { --t: -1.8deg; --y: 2px; z-index: 2; }
.foot__snap:nth-child(4) { --t: 4.5deg; --y: -4px; }
.foot__snap:nth-child(5) { --t: -3deg; --y: 8px; }
.foot__snap:nth-child(2)::before, .foot__snap:nth-child(4)::before { background: rgba(255, 250, 243, .72); }
@media (hover: hover) {
  .foot__snap:hover {
    z-index: 3;
    rotate: calc(var(--t) * .25);
    translate: 0 calc(var(--y) - 10px);
    scale: 1.05;
    box-shadow: 0 26px 30px -18px rgba(96, 52, 26, .55), 0 1px 2px rgba(96, 52, 26, .14);
  }
}
.foot__note { text-align: center; }
.foot__hello {
  margin: 0;
  font: italic 300 clamp(1.65rem, 3vw, 2.4rem)/1.1 var(--body);
  letter-spacing: -.02em;
  color: var(--espresso);
  text-wrap: balance;
}
.foot__bye {
  margin: .4rem 0 0;
  font: italic 400 clamp(.98rem, 1.2vw, 1.08rem)/1.45 var(--body);
  color: var(--ink-soft);
  text-wrap: balance;
}

.foot__sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.foot__logo { width: 118px; margin-bottom: .85rem; }
.foot__claim {
  margin: 0 0 .3rem;
  font: 300 clamp(1.25rem, 2vw, 1.6rem)/1.25 var(--display);
  letter-spacing: -.025em;
  color: var(--espresso);
}
.foot__claim em { color: var(--poppy-ink); }
.foot__desc { margin: 0; max-width: 24em; font-size: .98rem; line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }
.foot__links {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem clamp(2.25rem, 5vw, 3.5rem);
}
.foot__links li { display: flex; flex-direction: column; align-items: center; }
.foot__links .label { margin-bottom: .25rem; }
/* handgezogene Unterstreichung: gerade in Ruhe, beim Darüberfahren schwingt sie sich ein */
.foot__links a {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2c9-3.6 17-3.4 25-.6s16 3.2 24 .2 17-3.4 25-.4 16 3 24 .2 14-2.4 20-1' fill='none' stroke='%23c4553a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  font: 400 1.15rem/1.3 var(--display);
  letter-spacing: -.01em;
  color: var(--espresso);
  text-decoration: none;
  padding-bottom: .35em;
  background:
    var(--wave) 0 100% / 0% .42em no-repeat,
    linear-gradient(var(--apricot), var(--apricot)) 100% calc(100% - .14em) / 100% 1.5px no-repeat;
  transition: background-size .6s var(--ease-out), color .3s;
}
.foot__links a:hover {
  color: var(--poppy-ink);
  background-size: 100% .42em, 0% 1.5px;
}
.foot__places {
  max-width: 30em;
  margin: 1.1rem 0 0;
  font: italic 400 .95rem/1.5 var(--body);
  color: var(--ink-soft);
  text-wrap: balance;
}
.foot__top {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  margin-top: .2rem;
  padding: .3em .9em;
  border-radius: 999px;
  font: italic 400 .98rem/1 var(--body);
  color: var(--espresso);
  text-decoration: none;
  transition: color .3s, background-color .3s;
}
.foot__top svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: var(--rust);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--ease-out);
}
.foot__top:hover { color: var(--poppy-ink); background: rgba(255, 250, 243, .7); }
.foot__top:hover svg { transform: translateY(-3px); }
.foot :focus-visible { outline: 2px solid var(--poppy-ink); outline-offset: 4px; border-radius: 6px; }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: clamp(1.6rem, 3vw, 2.25rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(42, 27, 21, .12);
  font-size: .9rem;
  color: var(--ink-soft);
}
.foot__bottom p { margin: 0; }
/* Credit: dezent, aber gut lesbar */
.foot__credit {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .3s;
}
.foot__credit svg { height: 18px; width: auto; color: var(--ink); transition: color .3s; }
.foot__credit:hover, .foot__credit:hover svg { color: var(--espresso); }
.foot__where { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 1000px) {
  /* breit: Abzüge links, Gruss rechts daneben */
  .foot__page { flex-direction: row; justify-content: center; gap: clamp(2.5rem, 5vw, 5rem); }
  .foot__note { text-align: left; max-width: 22rem; }
  .foot__hello { font-size: clamp(2rem, 2.6vw, 2.5rem); }
}
@media (min-width: 900px) {
  /* Logo, Claim, Links, Orte und «Nach oben» teilen sich eine enge Zone in drei Spalten */
  .foot__sign {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr);
    grid-template-areas:
      "logo  links where"
      "claim links where"
      "desc  links where";
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
    justify-items: start;
    text-align: left;
  }
  .foot__logo { grid-area: logo; margin-bottom: .7rem; }
  .foot__claim { grid-area: claim; }
  .foot__desc { grid-area: desc; }
  .foot__links { grid-area: links; align-self: center; margin: 0; justify-content: flex-start; }
  .foot__links li { align-items: flex-start; }
  .foot__where { grid-area: where; align-self: center; align-items: flex-start; }
  .foot__places { margin: 0; max-width: 21em; }
  .foot__top { margin: .35rem 0 -.55rem -.9em; }
}
@media (max-width: 599px) {
  /* Handy: links gesetzt, «Nach oben» rechts neben dem Logo */
  .foot__page { align-items: flex-start; }
  .foot__album { align-self: flex-start; margin-left: .3rem; padding-top: .6rem; }
  .foot__note { text-align: left; }
  .foot__sign {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo top" "claim claim" "desc desc" "links links" "places places";
    align-items: center;
    justify-items: start;
    text-align: left;
  }
  .foot__where { display: contents; }
  .foot__logo { grid-area: logo; margin: 0; }
  .foot__top { grid-area: top; margin: 0 -.9em 0 0; }
  .foot__claim { grid-area: claim; margin-top: .35rem; }
  .foot__desc { grid-area: desc; }
  .foot__links { grid-area: links; margin-top: 1rem; justify-content: flex-start; gap: .75rem 2.5rem; }
  .foot__links li { align-items: flex-start; }
  .foot__places { grid-area: places; margin-top: .9rem; }
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 1.4rem; text-align: left; }
  .foot__credit { margin-bottom: -.4rem; }
  .foot__snap:nth-child(3), .foot__snap:nth-child(5) { display: none; }
  .foot__snap { margin: 0 -.3rem; padding: 4px; }
  .foot__snap img { height: 4.4rem; }
  .foot__snap::before { top: -6px; width: 2.8rem; height: .8rem; margin-left: -1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .foot__snap:hover { rotate: var(--t); translate: 0 var(--y); scale: 1; }
  .foot__top:hover svg { transform: none; }
}

/* ---------- Lightbox (5B) ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(120, 70, 40, .35), rgba(120, 70, 40, 0) 70%),
    var(--espresso-3);
  box-shadow: 0 50vh 0 0 var(--espresso-3), 0 -50vh 0 0 var(--espresso-3);
  color: var(--on-dark);
  opacity: 0;
  transition: opacity .5s var(--soft);
  touch-action: pan-y;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: calc(4.75rem + env(safe-area-inset-top, 0px)) clamp(.75rem, 7vw, 7rem) calc(7rem + env(safe-area-inset-bottom, 0px));
}
.lb__frame {
  position: relative;
  margin: 0;
  width: var(--lw, auto);
  height: var(--lh, auto);
  overflow: hidden;
  border-radius: var(--r-sm);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
  opacity: 0;
  filter: blur(16px);
  transform: scale(.96);
  transition: opacity .7s var(--soft), filter 1s var(--soft), transform 1s var(--ease-out);
}
.lb.is-open .lb__frame { opacity: 1; filter: blur(0); transform: none; }
.lb__frame.is-drag { transition: none; }
.lb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s var(--soft), filter .9s var(--soft), transform .9s var(--ease-out);
}
.lb__img.is-pre { opacity: 0; filter: blur(16px); transform: scale(1.03); transition: none; }
.lb__img.is-leave { opacity: 0; filter: blur(10px); transition: opacity .25s var(--soft), filter .25s var(--soft); }
.lb__meta {
  position: absolute;
  left: 50%;
  bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  width: min(40rem, 100% - 9rem);
  transform: translateX(-50%);
  text-align: center;
}
.lb__count {
  margin: 0 0 .45rem;
  font: 600 .74rem/1 var(--body);
  letter-spacing: .18em;
  color: var(--on-dark-soft);
}
.lb__i { color: var(--apricot); }
.lb__cap {
  margin: 0;
  font: italic 300 1.05rem/1.4 var(--body);
  text-wrap: balance;
  color: var(--on-dark);
  opacity: .9;
  transition: opacity .4s var(--soft);
}
.lb__cap.is-pre { opacity: 0; }
.lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1.5px solid rgba(248, 240, 229, .35);
  border-radius: 50%;
  background: rgba(29, 19, 14, .35);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s, transform .45s var(--ease-out);
}
.lb__btn:hover { background: var(--apricot); border-color: var(--apricot); color: var(--espresso-3); }
.lb__btn:active { transform: scale(.92); }
.lb__btn:focus-visible { outline-color: var(--apricot); }
.lb__close { top: calc(1rem + env(safe-area-inset-top, 0px)); right: max(1rem, env(safe-area-inset-right, 0px)); }
.lb__close span, .lb__close span::after {
  position: absolute;
  width: 18px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.lb__close span::after { content: ""; transform: rotate(90deg); left: 0; top: 0; }
.lb__prev, .lb__next { bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
.lb__prev { left: 1rem; }
.lb__next { right: 1rem; }
.lb__prev span, .lb__next span {
  width: 10px;
  height: 10px;
  border-left: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  border-radius: 0 0 0 2px;
}
.lb__prev span { transform: translateX(2px) rotate(45deg); }
.lb__next span { transform: translateX(-2px) rotate(-135deg); }
@media (min-width: 760px) {
  .lb__stage { padding-bottom: 6.5rem; }
  .lb__prev, .lb__next { top: 50%; bottom: auto; margin-top: -26px; }
  .lb__prev { left: 1.5rem; }
  .lb__next { right: 1.5rem; }
  .lb__close { top: 1.5rem; right: 1.5rem; }
  .lb__meta { bottom: 1.9rem; }
}

/* ---------- Scroll-Reveals: weich scharf werden ---------- */

.js [data-reveal] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px);
  transition: opacity 1.1s ease, filter 1.4s var(--focus-in), transform 1.4s var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; filter: blur(0); transform: none; }

/* Sicherheitsnetz: lädt script.js nicht (es setzt sofort .fx), erscheint alles nach 3 s trotzdem */
@keyframes knipsmi-reveal { to { opacity: 1; filter: none; transform: none; } }
@keyframes knipsmi-show { to { opacity: 1; } }
html.js:not(.fx) :is([data-reveal], .hero__einfach, .hero__cta, .step, .w) { animation: knipsmi-reveal .8s ease 3s forwards; }
html.js:not(.fx) .tcard { animation: knipsmi-show .8s ease 3s forwards; }
html.js:not(.fx) .step__arrow path { stroke-dashoffset: 0; }

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal],
  .js .hero__line > span, .js .hero__kicker, .js .hero__einfach, .js .hero__cta, .js .hero__caption,
  .js .w, .js .step, .offers li, .top__nav a {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .js .hero__img.is-active { opacity: 1; filter: none !important; transform: none !important; }
  .about__shot img, .shot__img, .lb__frame, .lb__img { filter: none !important; transform: none !important; }
  .pull__soft { display: none !important; }
  .shot.is-pending .shot__btn { opacity: 1; transform: none; }
  .js .step .step__arrow path { stroke-dashoffset: 0 !important; }
  /* Karten: kein Drehen im Raum, die Rückseite blendet einfach über */
  .tcard, .js .tcard:not(.is-on) { opacity: 1; transform: none !important; translate: var(--tx) var(--ty) !important; rotate: var(--rot) !important; }
  .tcard__inner, .tcard.is-flipped .tcard__inner { transform: none !important; animation: none !important; }
  .js .tcard__back { transform: none; opacity: 0; visibility: hidden; }
  .js .tcard.is-flipped .tcard__back { opacity: 1; visibility: visible; }
  .js .tcard.is-flipped .tcard__front { opacity: 0; visibility: hidden; }
  .gcard__hand .ch, .env__name .ch, .gcard.is-bump .gcard__value { animation: none !important; }
  .gift__stage .gcard__paper { --pull: 0cqi !important; }
  .gift__stage .env { translate: none !important; }
  /* Couvert: ohne Klappen und Drehen – offen zeigt die Rückseite, zu direkt die Vorderseite */
  .env__seal { animation: none !important; }
  .env__body, .gift__stage[data-env="closed"] .env__body { transform: none !important; }
  .gift__stage[data-env="closed"] .env__back { visibility: hidden; }
  .env__face { transform: none; visibility: hidden; }
  .gift__stage[data-env="closed"]:not([data-way="pdf"]) .env__face { visibility: visible; }
}

/* ---------- Footer: alle Seiten und Rechtliches (Version 7) ---------- */

.foot__nav { margin-top: clamp(1.5rem, 3vw, 2.1rem); }
.foot__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem clamp(1.4rem, 2.6vw, 2.4rem);
  font: 400 1rem/1.4 var(--display);
  letter-spacing: -.005em;
}
.foot__nav a {
  display: inline-block;
  padding: .3rem 0;
  color: var(--espresso);
  text-decoration: none;
  border-radius: 4px;
  transition: color .3s;
}
.foot__nav a:hover { color: var(--poppy-ink); }
.foot__nav a[aria-current="page"] { color: var(--poppy-ink); }
.foot__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.4rem;
}
.foot__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(106, 82, 69, .35);
  text-underline-offset: .2em;
  transition: color .3s, text-decoration-color .3s;
}
.foot__legal a:hover { color: var(--espresso); text-decoration-color: var(--apricot); }
.foot__legal a[aria-current="page"] { color: var(--espresso); }
@media (max-width: 599px) {
  .foot__nav { margin-top: 1.25rem; }
  .foot__nav ul { justify-content: flex-start; gap: 0 1.2rem; font-size: .98rem; }
  .foot__bottom { margin-top: 1rem; }
  .foot__legal { margin: .1rem 0 -.5rem; }
  .foot__legal a { min-height: 40px; }
}