@charset "UTF-8";
/* ==========================================================================
   Landingpage "Mein saisonales Kochbuch" – Design-System 3.0
   - Ü60: Basis 20px, Zeilenhöhe 1.6, Kontraste bis AAA, Ziele >= 56px
   - Kompaktere Flächen als v2
   - Kräftigere CTA-Buttons
   - Checkout-Struktur kompatibel zum Shopify-Formular der Bestandsseiten
   ========================================================================== */

/* -------------------------------------------------------------------------
   1) Altlasten aus style.css neutralisieren
   ------------------------------------------------------------------------- */
.btn-primary::before,
.btn-primary::after,
.btn::before,
.btn::after {
  content: none !important;
  display: none !important;
}

/* -------------------------------------------------------------------------
   2) Tokens
   ------------------------------------------------------------------------- */
:root {
  --ink: #14201e;
  --ink-soft: #2c3733;
  --brand: #0d5a52;
  --brand-dark: #08403a;
  --brand-tint: #eaf4f1;
  --brand-tint-2: #d7ebe6;
  --cta: #b4530e;
  --cta-dark: #8f410a;
  --cta-darker: #723409;
  --cream: #fdf6ec;
  --sand: #f6e9d7;
  --peach-tint: #fbe7d3;
  --peach-tint-2: #f6d5b3;
  --line: #e8ddc9;
  --line-strong: #d8c7a8;
  --white: #fff;
  --ok: #15713f;

  --f-head: "Red Hat Text", "Open Sans", Arial, sans-serif;
  --f-body: "Open Sans", Arial, Helvetica, sans-serif;

  --wrap: 1180px;
  --measure: 33em;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(20, 32, 30, 0.06), 0 3px 10px rgba(20, 32, 30, 0.05);
  --shadow-md: 0 2px 5px rgba(20, 32, 30, 0.07), 0 10px 26px rgba(20, 32, 30, 0.09);
}

/* -------------------------------------------------------------------------
   3) Basis
   ------------------------------------------------------------------------- */
html {
  /* 125 % von 16px = 20px. Prozent, damit die Browser-Schriftgröße
     respektiert wird und das eingebundene Formular mitskaliert. */
  font-size: 125%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (max-width: 600px) {
  html {
    font-size: 116%;
  }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
p {
  margin: 0 0 0.95em;
  max-width: var(--measure);
}
p:last-child {
  margin-bottom: 0;
}
.u-wide p,
.u-wide {
  max-width: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.55em;
  line-height: 1.28;
  letter-spacing: -0.015em;
}
h1,
h2 {
  text-wrap: balance;
}
h3,
h4 {
  text-wrap: pretty;
}
h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.5vw, 2.85rem);
  line-height: 1.22;
}
h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.05rem);
  line-height: 1.28;
}
h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.38rem);
  line-height: 1.35;
}
h4 {
  font-size: 1.1rem;
  line-height: 1.35;
}
a {
  color: var(--brand);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover {
  color: var(--brand-dark);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Bootstrap (fuer das eingebundene Bestellformular noetig) bringt eine eigene
   .lead-Regel mit (1.25rem/300). Die Klasse wird hier nur als neutrale
   Textauszeichnung verwendet – deshalb Basiswerte wiederherstellen. */
.lead {
  font-size: inherit;
  font-weight: inherit;
}

mark.hl {
  background: none;
  color: var(--cta-dark);
  font-weight: inherit;
  padding: 0;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* -------------------------------------------------------------------------
   4) Layout
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}
.wrap--narrow {
  max-width: 840px;
}
.sec {
  padding-block: clamp(1.9rem, 3.2vw, 3rem);
}
.sec--tight {
  padding-block: clamp(1.4rem, 2.4vw, 2.1rem);
}
.sec--cream {
  background: var(--cream);
}
.sec--sand {
  background: var(--sand);
}
.sec--tint {
  background: var(--brand-tint);
}
.sec--peach {
  background: linear-gradient(180deg, var(--peach-tint) 0%, var(--peach-tint-2) 100%);
}
.sec--brand {
  background: var(--brand);
  color: var(--white);
}
.sec--brand h2,
.sec--brand h3 {
  color: var(--white);
}
.sec--brand p {
  color: #e2eeeb;
}
.sec-head {
  max-width: 42rem;
  margin-top: clamp(0.6rem, 1.6vw, 1.1rem);
  margin-bottom: clamp(1.6rem, 2.8vw, 2.3rem);
}
.sec-head--center {
  margin-inline: auto;
  text-align: center;
}
.sec-head--center p {
  margin-inline: auto;
}
.sec-head p {
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.grid {
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.15rem);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   5) Eyebrow
   ------------------------------------------------------------------------- */
/* Kicker-Label statt Pill: klare Typografie mit kurzem Farbsteg statt Sticker-Optik –
   dadurch eindeutig als Rubrik lesbar und klar von Buttons/Badges unterschieden. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-head);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0.75em;
  box-shadow: none;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand);
  flex: 0 0 auto;
}
.eyebrow--warm {
  color: var(--cta-dark);
}
.eyebrow--warm::before,
.eyebrow--warm::after {
  background: var(--cta);
}
.eyebrow--onbrand {
  color: var(--white);
}
.eyebrow--onbrand::before,
.eyebrow--onbrand::after {
  background: var(--white);
}
.sec-head--center .eyebrow {
  justify-content: center;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   6) Buttons – kompakte Fläche, deutlich sichtbar
   ------------------------------------------------------------------------- */
.btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 60px;
  padding: 0.95em 1.6em;
  font-family: var(--f-head);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.btn2--primary {
  background: var(--cta);
  color: var(--white);
  box-shadow: 0 3px 0 var(--cta-dark), 0 6px 18px rgba(180, 83, 14, 0.3);
}
.btn2--primary:hover {
  background: var(--cta-dark);
  color: var(--white);
  box-shadow: 0 3px 0 var(--cta-darker), 0 8px 22px rgba(180, 83, 14, 0.34);
}
.btn2--primary:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--cta-dark), 0 3px 8px rgba(180, 83, 14, 0.25);
}
.btn2--primary::after {
  content: "\00BB";
  font-size: 1.05em;
  line-height: 1;
}
.btn2--ghost {
  background: var(--white);
  color: var(--brand-dark);
  border: 2px solid var(--line-strong);
  box-shadow: none;
}
.btn2--ghost:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.btn2--onbrand {
  background: var(--white);
  color: var(--brand-dark);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22), 0 8px 20px rgba(0, 0, 0, 0.18);
}
.btn2--onbrand:hover {
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.btn2--onbrand::after {
  content: "\00BB";
  font-size: 1.05em;
  line-height: 1;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
}
.btn-row--center {
  justify-content: center;
}
.btn-row--lg-top {
  margin-top: clamp(1.8rem, 3.2vw, 2.6rem);
}
.btn-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.7rem 0 0;
}
@media (max-width: 520px) {
  .btn2 {
    width: 100%;
    padding-inline: 1.2em;
  }
}

/* -------------------------------------------------------------------------
   7) Check-Listen
   ------------------------------------------------------------------------- */
.ticks {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  max-width: var(--measure);
}
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.5em;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 0.78rem no-repeat;
}
.ticks li:last-child {
  margin-bottom: 0;
}
.ticks--sm li {
  font-size: 0.92rem;
  margin-bottom: 0.4em;
}

/* -------------------------------------------------------------------------
   8) Seitenkopf – zweizeilig, komplett statisch

   Aufbau von oben nach unten:
     a) .sitehead__rating  Google-Bewertungen (Trustindex-Widget), weiss
     b) .sitehead__main    Marke | Servicedaten | Angebots-Button

   Kein header.js mehr: der Kopf wird hier ausgeliefert, damit er genau
   EINMAL erscheint. Alle Farben kommen aus den Tokens, dadurch faerbt sich
   der Kopf in jeder Variante automatisch passend ein.

   Die zuvor oben liegende Aktionsleiste (.sitehead__signal) wurde auf
   Wunsch entfernt.
   ------------------------------------------------------------------------- */
.sitehead {
  position: relative;
  z-index: 5;
}

/* a) Bewertungsleiste ------------------------------------------------- */
.sitehead__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-block: 0.35rem;
  background: var(--white);
}
.sitehead__rating .ti-widget {
  margin: 0 !important;
}

/* c) Servicezeile ----------------------------------------------------- */
.sitehead__main {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.sitehead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1rem;
  padding-block: 0.6rem;
}

/* Markenblock */
.sitehead__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  text-decoration: none;
}
.sitehead__word {
  display: block;
  padding-block: 0.12em;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--f-head);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sitehead__word b {
  font-weight: 800;
  color: var(--brand);
}
.sitehead__by {
  display: block;
  text-align: center;
}
.sitehead__by img {
  display: block;
  width: 74px;
  height: auto;
}
.sitehead__by span {
  display: block;
  margin-top: 0.1em;
  font-size: 0.53rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: lowercase;
}

/* Servicedaten */
.sitehead__service {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.85rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.sitehead__service a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.sitehead__service a:hover {
  color: var(--brand);
  text-decoration: underline;
}
/* Am Desktop soll die Servicezeile einzeilig bleiben. */
/* Erst ab 1200px ist wirklich Platz fuer die einzeilige Servicezeile.
   Darunter darf sie umbrechen - sonst schiebt sie den Button aus dem
   Viewport (fiel beim Test mit 1024px / iPad quer auf). */
@media (min-width: 1200px) {
  .sitehead__service .hours {
    white-space: nowrap;
  }
}
.sitehead__service svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand);
}

/* Angebots-Button: bewusst in Markengruen, damit der orange Haupt-CTA
   im Hero der staerkste Reiz auf der Seite bleibt. */
.sitehead__cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.62em 1.35em;
  font-family: var(--f-head);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  background: var(--brand);
  border-radius: 999px;
  text-decoration: none;
}
.sitehead__cta:hover {
  background: var(--brand-dark);
  color: var(--white);
}

@media (max-width: 900px) {
  .sitehead__in {
    flex-wrap: wrap;
  }
  .sitehead__service {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem 1.1rem;
    font-size: 0.78rem;
  }
}
@media (max-width: 620px) {
  .sitehead__in {
    gap: 0.45rem 0.6rem;
    padding-block: 0.5rem;
  }
  .sitehead__brand {
    gap: 0.45rem;
  }
  .sitehead__service {
    gap: 0.2rem 0.9rem;
    font-size: 0.76rem;
  }
  .sitehead__service .hours {
    display: none;
  }
  .sitehead__word {
    font-size: 0.8rem;
  }
  .sitehead__by img {
    width: 54px;
  }
  .sitehead__cta {
    padding: 0.52em 0.9em;
    font-size: 0.78rem;
  }
}
@media (max-width: 360px) {
  .sitehead__word {
    display: none;
  }
  /* Sehr schmale Geraete: die E-Mail-Adresse darf umbrechen, sonst
     erzwingt sie einen horizontalen Scrollbalken. */
  .sitehead__service {
    font-size: 0.72rem;
  }
  .sitehead__service a {
    white-space: normal;
    word-break: break-all;
  }
}

/* USP-Leiste: Saisonal/Regional-Versprechen direkt unter der Kopfzeile,
   damit das entscheidende Nutzenversprechen sofort sichtbar ist. */
.usp-strip {
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 100%);
}
.usp-strip__in {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.9rem;
  padding-block: 0.55rem;
}
.usp-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.usp-strip__item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: #ffcf9e;
}
@media (max-width: 780px) {
  .usp-strip__item {
    white-space: normal;
  }
}
@media (max-width: 560px) {
  .usp-strip__in {
    justify-content: flex-start;
    gap: 0.35rem 1.1rem;
  }
  .usp-strip__item {
    font-size: 0.83rem;
  }
}

/* -------------------------------------------------------------------------
   9) Hero – auf einen Bildschirm ausgelegt.
      Mobile-Reihenfolge: Headline -> Bild -> Nutzen/CTA
   ------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(168deg, var(--peach-tint) 0%, var(--cream) 38%, var(--brand-tint) 86%, var(--brand-tint-2) 100%);
  padding-block: clamp(1.5rem, 2.8vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  column-gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
}
.hero__body {
  display: flex;
  flex-direction: column;
}
.hero__title {
  margin-bottom: 0.3em;
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.45rem);
  line-height: 1.16;
}
.hero__sub {
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 32em;
  margin-bottom: 0.55em;
}
.hero .ticks {
  margin-bottom: 0.7em;
}
.hero .ticks--sm li {
  margin-bottom: 0.25em;
}
.hero__body .btn-row {
  margin-top: 0.2rem;
}
.btn2--lg {
  min-height: 58px;
  padding-inline: 2.1em;
  font-size: 1rem;
}
.microtrust--line {
  margin-top: 0.6rem;
}
.hero__secondary {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero__secondary:hover {
  color: var(--brand-dark);
}
.hero__social {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.hero__stars {
  display: inline-flex;
  gap: 0.1em;
  flex: 0 0 auto;
  color: var(--cta);
}
.hero__stars svg {
  width: 15px;
  height: 15px;
}
.hero__social strong {
  color: var(--ink);
}

.hero__art {
  position: relative;
  text-align: center;
}
.hero__packshot {
  position: relative;
  display: inline-block;
  max-width: 300px;
}
.hero__packshot img {
  width: 100%;
  filter: drop-shadow(0 14px 24px rgba(20, 32, 30, 0.24));
}

/* Kompakte Preisangabe unter dem Buch – ruhige Karte statt rotiertem Sticker-Kreis. */
.pricetag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin-top: 0.9rem;
  padding: 0.65em 1.3em;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1.5px solid var(--cta);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  font-family: var(--f-head);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pricetag:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.pricetag__old {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.pricetag__free {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cta-dark);
  letter-spacing: 0.01em;
}

/* Reservierungs-Hinweis als schlichter Text statt Countdown-Grafik – zaehlt
   taeglich bis Mitternacht runter und startet danach automatisch neu. */
.reserve-line {
  margin: 0.7rem 0 0;
  font-size: 0.98rem;
  color: var(--brand-dark);
}
.reserve-line strong {
  font-family: var(--f-head);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--cta-dark);
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    row-gap: 0.6rem;
  }
  /* Bild soll mobil direkt nach der Headline erscheinen statt am Ende:
     .hero__body wird "aufgelöst", damit seine Kinder als eigene Grid-Items
     einzeln einsortiert werden können. */
  .hero__body {
    display: contents;
  }
  .hero__body > .eyebrow {
    order: 1;
  }
  .hero__body > .hero__title {
    order: 2;
  }
  .hero__art {
    order: 3;
    margin-block: 0.1rem;
  }
  .hero__body > .hero__sub {
    order: 4;
  }
  .hero__body > .ticks {
    order: 5;
  }
  .hero__body > .btn-row {
    order: 6;
  }
  .hero__body > .hero__secondary {
    order: 7;
  }
  .hero__body > .microtrust {
    order: 8;
  }
  .hero__body > .hero__social {
    order: 9;
  }
  .hero__packshot {
    max-width: 200px;
  }
  .hero__sub {
    max-width: none;
  }
  .btn2--lg {
    min-height: 60px;
  }
}

/* Flache Laptop-Displays: Hero straffen, damit der komplette Hero
   inklusive Vertrauenszeile ohne Scrollen sichtbar bleibt. */
@media (min-width: 901px) and (max-height: 820px) {
  .hero {
    padding-block: 0.7rem 0.8rem;
  }
  .hero__title {
    font-size: 1.9rem;
    margin-bottom: 0.3em;
  }
  .hero__packshot {
    max-width: 220px;
  }
  .hero__sub {
    margin-bottom: 0.6em;
  }
  .hero__body .ticks {
    margin-bottom: 0.6em;
  }
  .hero__body .ticks li {
    margin-bottom: 0.35em;
  }
  .hero__body .btn-row {
    margin-top: 0.5rem;
  }
}

/* -------------------------------------------------------------------------
   10) Karten
   ------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 1.7vw, 1.35rem);
}
.card--raised {
  box-shadow: var(--shadow-sm);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 0;
  max-width: none;
}
.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--brand);
  color: var(--white);
  margin-bottom: 0.8rem;
}
.card__icon svg {
  width: 22px;
  height: 22px;
}
.who {
  border-top: 3px solid var(--brand);
}
.who--c {
  border-top-color: var(--cta);
}
.who--c .card__icon {
  background: var(--cta);
}

/* -------------------------------------------------------------------------
   11) Brieftext
   ------------------------------------------------------------------------- */
.letter {
  max-width: 36rem;
}
.letter p {
  max-width: none;
}
.letter .lead {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.quotebox {
  margin: 1.1rem 0;
  padding: 0.9rem 1.2rem;
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}
.quotebox p {
  margin-bottom: 0.3em;
}
.quotebox p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   11b) Brief als eigenständige Karte – mit Absender oben, Signatur unten
   ------------------------------------------------------------------------- */
.letter-card {
  max-width: 780px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(1.3rem, 3vw, 2.4rem);
  position: relative;
  overflow: hidden;
}
/* dezenter Farbstreifen als Briefkopf */
.letter-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 55%, var(--cta) 55%, var(--cta) 100%);
}
.letter-card__from {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}
.letter-card__from img {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.letter-card__who {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--ink);
}
.letter-card__role {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.letter-card p {
  max-width: none;
}
.letter-card .lead {
  font-size: 1.02rem;
  font-weight: 600;
}
.letter-card__sign {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.letter-card__sign img {
  width: 180px;
  opacity: 0.9;
}
.letter-card__sign span {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   11c) Saisonalität als USP – vier Jahreszeiten
   ------------------------------------------------------------------------- */
.season {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.15rem);
}
@media (max-width: 880px) {
  .season {
    grid-template-columns: 1fr;
  }
}
.season__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 1.7vw, 1.35rem);
  box-shadow: var(--shadow-sm);
}
.season__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--brand);
  color: var(--white);
  margin-bottom: 0.8rem;
}
.season__icon svg {
  width: 22px;
  height: 22px;
}
.season__item h3 {
  margin-bottom: 0.35em;
}
.season__item p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.season-sec {
  position: relative;
}
.season-sec__in {
  position: relative;
}
.season__icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin: 0 auto clamp(1.6rem, 2.8vw, 2.1rem);
  padding: 0;
  list-style: none;
}
.season__icons-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-head);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.season__icons-badge {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--white);
  outline: 2px solid transparent;
}
.season__icons-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.season__icons-item--spring .season__icons-badge {
  outline-color: #d8a800;
}
.season__icons-item--summer .season__icons-badge {
  outline-color: var(--brand);
}
.season__icons-item--autumn .season__icons-badge {
  outline-color: var(--cta);
}
.season__icons-item--winter .season__icons-badge {
  outline-color: #3579a8;
}
@media (max-width: 480px) {
  .season__icons-badge {
    width: 52px;
    height: 52px;
  }
}

/* -------------------------------------------------------------------------
   11d) Ratgeber-Vorstellung mit Produktbild
   ------------------------------------------------------------------------- */
.guide {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: clamp(1.3rem, 3vw, 2.6rem);
  align-items: start;
}
@media (max-width: 880px) {
  .guide {
    grid-template-columns: 1fr;
  }
}
.guide__art {
  position: sticky;
  top: 16px;
  text-align: center;
}
.guide__art img {
  width: min(100%, 260px);
  margin-inline: auto;
  border-radius: 4px;
  filter: drop-shadow(0 12px 22px rgba(20, 32, 30, 0.2));
}
.guide__cap {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: none;
}
@media (max-width: 880px) {
  .guide__art {
    position: static;
  }
  .guide__art img {
    width: min(62%, 200px);
  }
}

/* Bildunterschrift-Link einheitlich */
.caplink {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--brand);
  font-weight: 600;
  max-width: none;
}
.caplink:hover {
  color: var(--brand-dark);
}

/* -------------------------------------------------------------------------
   12) Buchinhalt – Bild oben ausgerichtet, kein Höhenversatz
   ------------------------------------------------------------------------- */
.includes {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
@media (max-width: 880px) {
  .includes {
    grid-template-columns: 1fr;
  }
}
.includes__art {
  position: sticky;
  top: 16px;
  text-align: center;
}
.includes__art img {
  width: min(100%, 230px);
  margin-inline: auto;
  filter: drop-shadow(0 10px 20px rgba(20, 32, 30, 0.18));
}
.includes__cap {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: none;
}
@media (max-width: 880px) {
  .includes__art {
    position: static;
  }
  .includes__art img {
    width: min(58%, 180px);
  }
}
.chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.chapters li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}
.chapters .num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  border-radius: 7px;
  background: var(--brand-tint-2);
  color: var(--brand-dark);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.8rem;
}
.chapters .title {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.15em;
}
.chapters .txt {
  margin: 0;
  max-width: none;
  font-size: 0.94rem;
}
.chapters .ref {
  display: block;
  margin-top: 0.1em;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   13) Vergleich
   ------------------------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 1.8vw, 1.2rem);
}
@media (max-width: 760px) {
  .compare {
    grid-template-columns: 1fr;
  }
}
.compare__col {
  border-radius: var(--radius);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border: 1px solid var(--line);
  background: var(--white);
}
.compare__col--now {
  background: #f6f4ef;
}
.compare__col--then {
  border-color: var(--brand-tint-2);
  box-shadow: var(--shadow-sm);
}
.compare__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.compare__col--now .compare__label {
  background: #e8e3d8;
  color: #5b5346;
}
.compare__col--then .compare__label {
  background: var(--brand-tint-2);
  color: var(--brand-dark);
}
.compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.compare__list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.65em;
  font-size: 0.94rem;
}
.compare__list li:last-child {
  margin-bottom: 0;
}
.compare__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.5;
}
.compare__col--now .compare__list li::before {
  content: "\2013";
  color: #6b6255;
}
.compare__col--then .compare__list li::before {
  content: "\2013";
  color: var(--brand);
}

/* -------------------------------------------------------------------------
   14) Autor
   ------------------------------------------------------------------------- */
.author {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
@media (max-width: 780px) {
  .author {
    grid-template-columns: 1fr;
  }
}
.author__photo {
  width: 168px;
  border-radius: 50%;
  border: 5px solid var(--white);
  box-shadow: var(--shadow-md);
  margin-inline: auto;
}
.author__meta {
  text-align: center;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
  max-width: none;
}
.author__meta strong {
  display: block;
  color: var(--ink);
  font-size: 0.88rem;
}
.author__sig {
  width: 190px;
  margin-top: 1rem;
  opacity: 0.9;
}
.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0;
}
.facts li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35em 0.9em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.disclaimer {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 44rem;
}
.disclaimer.center {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   16f) Wiederholter Zwischen-CTA ("Recap") – kompakt, variierter Text,
   immer mit derselben klaren Angebotszeile.
   ------------------------------------------------------------------------- */
.recap h3 {
  max-width: 34em;
  margin-inline: auto;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
}
.recap .ticks {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  margin: 0.9rem auto 1.1rem;
}
.recap__offer {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.recap__offer.center {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   15) Nutzerstimme
   ------------------------------------------------------------------------- */
.voice {
  background: var(--white);
  border: 1px solid var(--brand-tint-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
  max-width: 720px;
  margin-inline: auto;
}
.voice__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.7rem;
  color: var(--cta);
}
.voice__stars svg {
  width: 18px;
  height: 18px;
}
.voice__quote {
  font-family: var(--f-head);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  line-height: 1.42;
  color: var(--ink);
  margin: 0 0 1rem;
  max-width: none;
}
.voice__by {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.voice__initials {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.85rem;
}
.voice__name {
  font-weight: 700;
  line-height: 1.25;
  font-size: 0.95rem;
}
.voice__role {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.voice__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
}
.voice__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Karussell für mehrere Erfahrungsberichte */
.voice-carousel {
  max-width: 720px;
  margin-inline: auto;
}
.voice-carousel__viewport {
  overflow: hidden;
  padding: 4px;
  margin: -4px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.voice-carousel__viewport:active {
  cursor: grabbing;
}
.voice-carousel__track {
  display: flex;
  gap: 28px;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.voice-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
}
.voice-carousel__slide .voice {
  max-width: none;
  margin-inline: 0;
}
.voice-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.1rem;
}
.voice-carousel__arrow {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--brand-dark);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.voice-carousel__arrow:hover {
  background: var(--sand);
}
.voice-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.voice-carousel__dot {
  width: 14px;
  height: 14px;
  padding: 10px;
  background-clip: content-box;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
}
.voice-carousel__dot.is-active {
  background: var(--brand);
}

/* -------------------------------------------------------------------------
   16) Leistungsübersicht – adaptiert von der NVP-Landingpage
   ------------------------------------------------------------------------- */
.offer {
  display: grid;
  gap: 0.9rem;
  max-width: 820px;
  margin-inline: auto;
}
.offer__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1rem, 1.8vw, 1.35rem);
}
.offer__check {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.offer__check svg {
  width: 22px;
  height: 22px;
}
.offer__item--bonus .offer__check {
  background: var(--cta);
}
.offer__body h3 {
  margin: 0 0 0.3em;
}
/* Produkttitel verlinkt, sieht aber wie eine Überschrift aus */
.offer__body h3 a,
.letter-card p a em {
  color: inherit;
  text-decoration-color: var(--brand-tint-2);
}
.offer__body h3 a:hover,
.letter-card p a:hover em {
  color: var(--brand-dark);
  text-decoration-color: currentColor;
}
.offer__tag {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--brand-tint-2);
  border-radius: 999px;
  padding: 0.28em 0.75em;
  margin-bottom: 0.6em;
}
.offer__item--bonus .offer__tag {
  color: var(--cta-dark);
  background: #f7e3d1;
}
.offer__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offer__body li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.35em;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.offer__body li:last-child {
  margin-bottom: 0;
}
.offer__body li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   16b) Nutzen-Zeile in den Zielgruppen-Karten
   ------------------------------------------------------------------------- */
.who__gain-label {
  display: block;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--f-head);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
  margin-bottom: 0.25rem;
}
.who--c .who__gain-label {
  color: var(--cta);
}
.who__gain {
  display: block;
  font-family: var(--f-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-dark);
}
.who--c .who__gain {
  color: var(--cta-dark);
}
.who__list {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink);
}
.who__list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.3em;
}
.who__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--cta);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   16c) Einwand-Block ("Aber ich habe doch gar keinen Diabetes.")
   ------------------------------------------------------------------------- */
.objection {
  max-width: 780px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--cta);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.objection__q {
  font-family: var(--f-head);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.6em;
  max-width: none;
}
.objection__a {
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 0.7em;
  max-width: none;
}
.objection p {
  max-width: none;
  font-size: 0.94rem;
}
.objection__push {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--brand-tint);
  border-radius: var(--radius-sm);
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-dark);
  max-width: none;
}

/* -------------------------------------------------------------------------
   16d) Themenbereiche des Ratgeberdienstes
   ------------------------------------------------------------------------- */
.topics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.15rem);
}
@media (max-width: 820px) {
  .topics {
    grid-template-columns: 1fr;
  }
}
.topic {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(0.95rem, 1.6vw, 1.25rem);
}
.topic__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--brand-tint-2);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic__icon svg {
  width: 21px;
  height: 21px;
}
.topic h3 {
  margin: 0 0 0.3em;
  font-size: 1rem;
}
.topic p {
  margin: 0;
  max-width: none;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   16e) Mikro-Argumente unter der Handlungsaufforderung
   ------------------------------------------------------------------------- */
.microtrust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0.8rem 0 0;
  padding: 0;
}
.microtrust li {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.microtrust li::before {
  content: "\2713";
  color: var(--ok);
  font-weight: 700;
}
.btn-row--center + .microtrust {
  justify-content: center;
}
.sec--brand .microtrust li {
  color: #d7e8e4;
}
.sec--brand .microtrust li::before {
  color: #9fd9c4;
}

/* -------------------------------------------------------------------------
   17) Garantiebox
   ------------------------------------------------------------------------- */
.risk {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  max-width: 820px;
  margin-inline: auto;
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-2);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}
.risk__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.risk__icon svg {
  width: 24px;
  height: 24px;
}
.risk h3 {
  margin: 0 0 0.3em;
}
.risk p {
  margin: 0;
  max-width: none;
  font-size: 0.94rem;
}

/* -------------------------------------------------------------------------
   18) FAQ
   ------------------------------------------------------------------------- */
.faq {
  max-width: 820px;
  margin-inline: auto;
  border-top: 1px solid var(--line-strong);
}
.faq__item {
  border-bottom: 1px solid var(--line-strong);
}
.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 60px;
  padding: 0.95rem 0.2rem;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  font-family: var(--f-head);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq__btn:hover {
  color: var(--brand-dark);
}
.faq__sign {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-tint-2);
  transition: background-color 0.2s ease;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--brand-dark);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq__item.is-open .faq__sign {
  background: var(--brand);
}
.faq__item.is-open .faq__sign::before,
.faq__item.is-open .faq__sign::after {
  background: var(--white);
}
.faq__item.is-open .faq__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
.faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.faq__item.is-open .faq__panel {
  max-height: 1400px;
}
.faq__inner {
  padding: 0 0.2rem 1.2rem;
}
.faq__inner p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin-bottom: 0.7em;
  max-width: none;
}
.faq__inner p:last-child {
  margin-bottom: 0;
}
.faq__toggleall {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 0.6rem;
  padding: 0.3em 0;
  background: none;
  border: 0;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   19) Schritte
   ------------------------------------------------------------------------- */
.steps {
  list-style: none;
  counter-reset: s;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.8vw, 1.3rem);
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.8rem);
  padding: 0;
}
@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
}
.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 3rem;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps h4 {
  margin: 0.15em 0 0.15em;
}
.steps p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: none;
}

/* -------------------------------------------------------------------------
   20) Bestellbereich

   Aufgabenteilung (geprueft gegen formular-shopify.css):
   - RECHTE SPALTE (.checkout-summary-column, #konditionen, #benefits,
     .benefit-item*, .reviews-*) gestaltet ausschliesslich formular-shopify.css.
     Hier bewusst KEINE eigenen Regeln – sonst bricht das Haus-Layout.
   - FELDER (.form-control) und ABSENDE-BUTTON (.btn-primary) kommen dort NICHT
     vor; die liefert Bootstrap in Rohform. Deshalb werden nur sie hier
     Ue60-gerecht und in CTA-Farbe nachgezogen.
   ------------------------------------------------------------------------- */
.checkout {
  background: var(--cream);
}

/* Unsere globale Typografie darf nicht in den Bestellbereich hineinregieren –
   das Haus-Stylesheet rechnet mit Bootstrap-Grundwerten. */
#bestell p {
  max-width: none;
}

/* Eingebundenes Formular Ue60-gerecht: nur die linke Spalte */
.checkout-form-column label,
.checkout-form-column .form-label {
  display: inline-block;
  margin-bottom: 0.3em;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.checkout-form-column .form-control,
.checkout-form-column .form-select,
.checkout-form-column input[type="text"],
.checkout-form-column input[type="email"],
.checkout-form-column input[type="tel"],
.checkout-form-column input[type="number"],
.checkout-form-column input[type="date"],
.checkout-form-column select,
.checkout-form-column textarea {
  width: 100%;
  min-height: 54px;
  padding: 0.55em 0.75em;
  font-family: var(--f-body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.checkout-form-column .form-control:focus,
.checkout-form-column input:focus,
.checkout-form-column select:focus,
.checkout-form-column textarea:focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand-tint-2);
  outline-offset: 1px;
}
.checkout-form-column input[type="checkbox"],
.checkout-form-column input[type="radio"] {
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
}

/* Absende-Button des Formulars in der CTA-Farbe der Seite.
   formular-shopify.css definiert .btn-primary nicht – ohne diese Regel
   bliebe der Button im Bootstrap-Blau bzw. im Gruen der alten style.css. */
.btn-primary,
.checkout-form-column .btn,
.checkout-form-column button[type="submit"],
.checkout-form-column input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0.9em 2em !important;
  font-family: var(--f-head) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  color: var(--white) !important;
  text-shadow: none !important;
  background: var(--cta) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 3px 0 var(--cta-dark), 0 6px 18px rgba(180, 83, 14, 0.3) !important;
  cursor: pointer;
}
.btn-primary:hover,
.checkout-form-column .btn:hover,
.checkout-form-column button[type="submit"]:hover,
.checkout-form-column input[type="submit"]:hover {
  background: var(--cta-dark) !important;
  color: var(--white) !important;
}
@media (max-width: 560px) {
  .checkout-form-column .btn,
  .checkout-form-column button[type="submit"],
  .checkout-form-column input[type="submit"] {
    width: 100%;
  }
}

/* Absende-Button horizontal zentrieren.
   Erster Versuch (text-align:center auf #orderform) hat nicht gereicht –
   offensichtlich sitzt der Button in formular-shopify.css (extern, nicht in
   diesem Export enthalten) in einem Flex- oder Grid-Container, auf den
   text-align keinen Einfluss hat. Daher hier robuster direkt am Button:
   display:flex macht ihn zur block-artigen Box, width:max-content verhindert
   das Strecken auf volle Spaltenbreite (Flex-/Grid-Stretch), margin:auto
   zentriert ihn dann unabhaengig vom Layout-Modus des Elterncontainers. */
.checkout-form-column .btn,
.checkout-form-column button[type="submit"],
.checkout-form-column input[type="submit"] {
  display: flex !important;
  width: max-content !important;
  margin: 0 auto !important;
}
#orderform {
  text-align: center;
}

/* -------------------------------------------------------------------------
   21) Footer / Impressum
   ------------------------------------------------------------------------- */
.foot {
  background: #16211f;
  color: #c8d2cf;
  font-size: 0.8rem;
  line-height: 1.55;
  padding-block: 2rem 1.4rem;
}
.foot a {
  color: #e2edea;
  text-decoration: none;
}
.foot a:hover {
  color: var(--white);
  text-decoration: underline;
}
.foot p {
  max-width: none;
  margin-bottom: 0.5em;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 780px) {
  .foot__grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}
.foot__title {
  font-family: var(--f-head);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.6em;
}
.foot__logo {
  height: 30px;
  width: auto;
  margin-bottom: 0.8rem;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.foot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.foot__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 30px;
}
.foot__list svg {
  width: 15px;
  height: 15px;
  opacity: 0.8;
  flex: 0 0 15px;
}
.foot__legal {
  padding-top: 1.2rem;
  font-size: 0.82rem;
  color: #a4b0ac;
}
.foot__legal p {
  margin-bottom: 0.45em;
}

/* -------------------------------------------------------------------------
   22) Sticky CTA
   ------------------------------------------------------------------------- */
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--white);
  border-top: 2px solid var(--cta);
  box-shadow: 0 -4px 16px rgba(20, 32, 30, 0.12);
  transform: translateY(105%);
  transition: transform 0.28s ease;
}
.sticky.is-visible {
  transform: translateY(0);
}
.sticky__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 20px;
  max-width: var(--wrap);
  margin-inline: auto;
}
.sticky__txt {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  max-width: none;
}
.sticky__txt span {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.sticky .btn2 {
  min-height: 52px;
  padding: 0.65em 1.4em;
  font-size: 0.85rem;
  white-space: nowrap;
  width: auto;
}
@media (max-width: 620px) {
  .sticky__txt {
    display: none;
  }
  .sticky__in {
    padding: 0.5rem 14px;
  }
  .sticky .btn2 {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   23) Hinweis beim Verlassen – kompakt, ohne Scrollen
   ------------------------------------------------------------------------- */
.leave {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(11, 20, 19, 0.6);
}
.leave.is-open {
  display: flex;
}
.leave__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 94vh;
  overflow: auto;
  background: var(--white);
  border-radius: var(--radius);
  border-top: 5px solid var(--cta);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
.leave__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 0;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.leave__close:focus,
.leave__close:focus-visible {
  outline: 2px solid var(--line-strong) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}
.leave__close:hover {
  background: var(--sand);
  color: var(--ink);
}
.leave__grid {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 1rem;
  align-items: start;
}
.leave__imgs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 116px;
}
.leave__imgs img {
  filter: drop-shadow(0 6px 12px rgba(20, 32, 30, 0.2));
}
.leave__imgs > a:first-child img {
  width: 116px;
}
.leave__imgs-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0.15rem 0;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-family: var(--f-head);
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}
.leave__imgs-guide {
  display: block;
}
.leave__imgs-guide img {
  width: 116px;
  border-radius: 4px;
}
.leave h3 {
  margin: 0 0 0.35em;
  font-size: 1.1rem;
  padding-right: 2rem;
}
.leave__lead {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 0.7em;
  max-width: none;
}
.leave .ticks {
  margin-bottom: 0;
}
.leave .ticks li {
  font-size: 0.85rem;
  margin-bottom: 0.3em;
  padding-left: 1.6rem;
}
.leave .ticks li::before {
  width: 1.1rem;
  height: 1.1rem;
  background-size: 0.68rem;
  top: 0.22em;
}
.leave__price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0.7rem 0 0;
  font-family: var(--f-head);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-dark);
}
.leave__price s {
  color: var(--ink-soft);
  font-weight: 400;
}
.leave__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  text-align: center;
}
.leave__actions .btn2 {
  min-height: 54px;
  font-size: 0.9rem;
  padding: 0.8em 1.5em;
}
.leave__dismiss {
  background: none;
  border: 0;
  padding: 0.6em 0.2em;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.leave__dismiss:hover {
  color: var(--ink);
}
@media (max-width: 520px) {
  .leave__grid {
    grid-template-columns: 84px 1fr;
    gap: 0.8rem;
  }
  .leave__imgs {
    width: 84px;
  }
  .leave__imgs > a:first-child img {
    width: 84px;
  }
  .leave__imgs-plus {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
  }
  .leave__imgs-guide img {
    width: 84px;
  }
  .leave__actions .btn2 {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   24) Helfer
   ------------------------------------------------------------------------- */
.center {
  text-align: center;
}
.center p,
.center .ticks {
  margin-inline: auto;
}
.mt-0 {
  margin-top: 0;
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 1200;
  background: var(--white);
  padding: 0.8em 1.2em;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .faq__panel,
  .sticky {
    transition: none;
  }
}
@media print {
  .sticky,
  .leave {
    display: none !important;
  }
}