/* =========================================================
   knipsmi Version 7: nur für /gutschein/
   (Kicker in der H1, Text-Abschnitt «Warum», Anlässe mit zwei
   eingeklebten Abzügen, zwei Arten zu schenken, Gestalter ohne
   Angebotsteil darüber, Formular mit Aufruf, Bildausschnitte)
   ========================================================= */

/* ---------- Bildausschnitte ---------- */

.phero__frame img { object-position: 60% 50%; }
.gsend + .story .story__shot img { object-position: 55% 50%; }
.occ__shot--a img { object-position: 62% 50%; }
.occ__shot--b img { object-position: 50% 40%; }
[data-slug="mutter_wirbelt_kind_feld"] .shot__img { object-position: 50% 45%; }
[data-slug="vater_tochter_spass_schulter"] .shot__img { object-position: 50% 30%; }

/* ---------- Kicker in der H1 ---------- */

.phero__title .h2__kicker { margin-bottom: .9rem; }

/* ---------- Warum: Überschrift links, Text rechts ---------- */

.gwhy { padding-top: clamp(1rem, 3vw, 2.5rem); }
.gwhy__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.gwhy .h2 { max-width: 15ch; font-size: clamp(2.2rem, 3.9vw, 3.7rem); }
.gwhy .h2 em { display: block; }
.gwhy__body p { max-width: 34em; text-wrap: pretty; }
.gwhy__body p.gwhy__lead {
  font: 300 clamp(1.18rem, 1.5vw, 1.32rem)/1.6 var(--display);
  letter-spacing: -.005em;
  color: var(--espresso);
}
@media (min-width: 900px) {
  .gwhy__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .gwhy__body { padding-top: .4rem; }
}

/* ---------- Anlässe: zwei Abzüge und eine ruhige Liste ---------- */

.occ__grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.occ .h2 { font-size: clamp(2.2rem, 3.9vw, 3.7rem); }
.occ__side .sec__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.occ__photos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 3vw, 1.5rem);
  padding: .75rem .25rem 0;
}
.occ__shot {
  --tilt: -2deg;
  position: relative;
  margin: 0;
  padding: 7px;
  border-radius: 10px;
  background: #fffdf9;
  box-shadow: 0 26px 44px -30px rgba(96, 52, 26, .6), 0 1px 2px rgba(96, 52, 26, .12);
  rotate: var(--tilt);
}
.occ__shot--b { --tilt: 2.2deg; margin-top: clamp(1.25rem, 4vw, 2.5rem); }
.occ__shot img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
/* ein Streifen Klebeband */
.occ__shot::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -9px;
  left: 50%;
  width: 4.2rem;
  height: 1.15rem;
  margin-left: -2.1rem;
  rotate: calc(var(--tilt) * -1.8);
  background: rgba(255, 250, 243, .78);
  box-shadow: 0 1px 2px rgba(96, 52, 26, .14);
}
.occ__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(196, 85, 58, .2); }
.occ__item { padding: clamp(1.35rem, 2.4vw, 1.8rem) 0; border-bottom: 1px solid rgba(196, 85, 58, .2); }
.occ__title {
  margin: 0 0 .5rem;
  font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.25 var(--display);
  letter-spacing: -.02em;
  color: var(--espresso);
}
.occ__item p { margin: 0; max-width: 38em; color: var(--ink); text-wrap: pretty; }
.occ__item a {
  color: var(--poppy-ink);
  text-decoration: underline;
  text-decoration-color: rgba(214, 63, 40, .35);
  text-underline-offset: .18em;
  transition: text-decoration-color .3s;
}
.occ__item a:hover { text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .occ__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .occ__side { position: sticky; top: calc(var(--header) + 2rem); }
  .occ__photos { max-width: 30rem; }
}

/* ---------- Zwei Arten zu schenken ---------- */

.ways { padding-bottom: clamp(3rem, 6vw, 5rem); }
.ways__list { display: grid; gap: 1.25rem; }
.way {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 60% at 100% 0%, rgba(251, 230, 210, .75), rgba(255, 250, 243, 0) 62%),
    var(--card);
  box-shadow: var(--shadow-soft);
}
.way--main {
  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;
}
.way__tag { display: flex; align-items: baseline; gap: .3em; margin: 0 0 1rem; color: var(--espresso); }
.way__title {
  margin: 0 0 1rem;
  font: 300 clamp(1.75rem, 2.4vw, 2.3rem)/1.08 var(--display);
  letter-spacing: -.03em;
  color: var(--espresso);
  text-wrap: balance;
}
.way p { max-width: 36em; color: var(--ink); text-wrap: pretty; }
.way p:last-child { margin-bottom: 0; }
.way .way__soft { color: var(--ink-soft); }
.way__fmts { list-style: none; margin: .25rem 0 0; padding: 0; }
.way__fmts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .15rem 1rem;
  padding: .95rem 0;
  border-top: 1.5px dashed rgba(196, 85, 58, .32);
}
.way__fmt { font: 400 1.18rem/1.3 var(--display); letter-spacing: -.015em; color: var(--espresso); }
.way__ab { font: italic 400 1.02rem/1.3 var(--body); color: var(--poppy-ink); white-space: nowrap; }
.way__desc { grid-column: 1 / -1; font-size: .98rem; line-height: 1.55; color: var(--ink-soft); }
@media (min-width: 860px) {
  .ways__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 2rem); }
}

/* ---------- Gestalter: steht hier für sich (auf der Startseite unter den Angeboten) ---------- */

.giftsec { padding-bottom: clamp(5rem, 10vw, 9rem); }
.giftsec .gift { margin-top: 0; }
.giftsec .gift__title { margin-top: .5rem; }
.gift__next { max-width: 32em; margin: 0 0 1.4rem; font-size: 1.02rem; line-height: 1.65; color: var(--ink); text-wrap: pretty; }

/* ---------- Versand: Überschrift links, zwei Karten rechts ---------- */

.gsend__grid { display: grid; }
.gsend .h2 { font-size: clamp(2.2rem, 3.9vw, 3.7rem); }
@media (min-width: 640px) and (max-width: 899px) {
  .incl__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .gsend__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
  .gsend .sec__head { margin-bottom: 0; }
  .incl__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Ablauf: Knopf zum Einlösen ---------- */

.steps__act { margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 900px) { .steps__act { margin-top: clamp(1.5rem, 3vw, 2.5rem); } }

/* ---------- Formular: Aufruf links ---------- */

.contact__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(1rem, 2vw, 1.5rem); }
.contact .link-soft { color: var(--on-dark); }
.contact .link-soft:hover { color: var(--apricot); }