@charset "UTF-8";
/* Poppins Thin / ExtraLight for the hero title — ew_template declares only 300–700. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/googlefonts/poppins-v20-latin-100.woff2') format('woff2'),
       url('/googlefonts/poppins-v20-latin-100.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/googlefonts/poppins-v20-latin-200.woff2') format('woff2'),
       url('/googlefonts/poppins-v20-latin-200.woff') format('woff');
}
/**
 * Champagner-Abo landing page — Trello #2771 "Design Update Abo" (Version B).
 *
 * Styles for application/views/ew/abo/champagner_pakete_view.php. Linked
 * from that view (like style-new.css is from home_view_new.php) and scoped
 * under .abo-2026 so nothing leaks onto game_view.php, which still uses the
 * old .magazine-abo--landing rules in style.css. Also linked by the EU page
 * champagner_pakete_eu_view.php (Trello #2797: hero + cards, .abo-2026--eu)
 * and by landing pages with the element "Champagner Abo Karten" (#2796).
 *
 * Figma: file EK95qrGuDIaeeVZouU2k3A, page "Champagner Abo" (4771:5949),
 * frames "Champagner Abo" 5184:7048 / "– Mobile" 5178:7421 and the XMAS
 * pair 5184:7047 / 5035:6993. Every padding, gap and size below was taken
 * from the frames' layer geometry (1440 / 375 px); picture crops follow
 * Peter's LIESMICH (object-fit: cover + the given positions).
 *
 * Headings carry !important because style.css styles bare h1–h3 (weight 500,
 * uppercase h3) with rules that otherwise win on this page.
 *
 * Trello #2787 "Champagner Abo Mobile": hero height formula, 32px headings, 300px
 * swipe rows, left-aligned review link (phones) and the past editions as a scroll row.
 */

.abo-2026 {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #363636;
  background: #F5F3EF;
  overflow-x: clip;
  /* tokens from style-new.css (there scoped to .sp-home) so .sp-btn--* work here */
  --sp-text-primary: #363636;
  --sp-text-inverse: #ffffff;
  --sp-accent-primary: #FF6969;
  --sp-accent-primary-hover: #ff4d4d;
  --sp-accent-gold: #e3d4a9;
  --sp-accent-gold-hover: #d8c393;
  --sp-radius-lg: 30px;
  --sp-type-btn-lg: 18px;
  --sp-type-btn-md: 16px;
}
/* <source> inside a display:contents <picture> would become an empty grid cell */
.abo-2026 source { display: none; }
.abo-2026 img { max-width: 100%; }
.abo-2026 picture { display: contents; }
.abo-2026 a { text-decoration: none; }
.abo-2026 .abo-wrap {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1288px) {
  .abo-2026 .abo-wrap { padding: 0; }
}

/* ---- typography ------------------------------------------------------ */
.abo-2026 .abo-h2 {
  font-weight: 300 !important;
  font-size: 50px !important;
  line-height: 62px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #363636;
  margin: 0 0 40px;
}
.abo-2026 .abo-h2--center { text-align: center; }
.abo-2026 .abo-br-m { display: none; } /* #2787 (2): line break only on phones */
.abo-2026 .abo-lead {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.abo-2026 .sp-btn { text-decoration: none; }
.abo-2026 .abo-btn-dark {
  background-color: #363636;
  color: #ffffff;
}
.abo-2026 .abo-btn-dark:hover { background-color: #000000; color: #ffffff; }
.abo-2026 .abo-btn-outline {
  background: #ffffff;
  border: 1.5px solid #363636;
  color: #363636;
  font-weight: 600;
}
.abo-2026 .abo-btn-outline:hover { background: #363636; color: #ffffff; }
/* card buttons: big Abo card + Deluxe 234×49, gift cards 205×43 (Figma) */
.abo-2026 .abo-btn-big { padding: 14px 36px; font-size: 18px; line-height: 21px; }
.abo-2026 .abo-btn-gift { padding: 13px 30px; font-size: 16px; line-height: 17px; }

/* coral check mark + gold star (inline SVG, no extra requests) */
.abo-2026 .abo-check::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 14px;
  margin-right: 12px;
  vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M1.5 7.5l5 5L16.5 1.5' fill='none' stroke='%23FF6969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.abo-2026 .abo-stars { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: -2px; }
.abo-2026 .abo-stars img { width: 18px; height: 18px; }

/* ---- hero (840 × 1440) ------------------------------------------------ */
.abo-2026 .abo-hero {
  position: relative;
  height: 840px;
  color: #ffffff;
}
.abo-2026 .abo-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
@media (max-width: 1439px) {
  .abo-2026 .abo-hero__bg { object-position: 65% center; }
}
.abo-2026 .abo-hero .abo-wrap { position: relative; z-index: 1; height: 100%; }
.abo-2026 .abo-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 26px;
}
.abo-2026 .abo-hero__logo img { width: 200px; height: auto; }
.abo-2026 .abo-hero__shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0; /* #2784 Desktop 1: top edge level with the logo */
  color: #363636; /* round 1 (#1): black by default, red on hover; the arrow stays red (Figma) */
  font-size: 14px;
  font-weight: 600;
}
.abo-2026 .abo-hero__shop:hover { color: #FF6969; }
.abo-2026 .abo-hero__shop img { width: 16px; height: auto; }
.abo-2026 .abo-hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.abo-2026 .abo-hero__title {
  font-weight: 100 !important; /* #2784 Desktop 2 */
  font-size: 96px !important;
  line-height: .95 !important; /* #2784 Desktop 3 */
  letter-spacing: -1.7px !important;
  text-transform: uppercase !important;
  color: #ffffff;
  margin: 0 0 14px; /* #2784 Desktop 3 */
}
.abo-2026 .abo-hero__sub {
  font-size: 26px;
  line-height: 38px;
  font-weight: 400; /* #2784 Desktop 2, also mobile */
  max-width: 760px;
  margin: 0 0 24px; /* #2784 Desktop 3 */
}
.abo-2026 .abo-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  margin-top: 42px; /* #2784 Desktop 3: the text block is anchored from the bottom, this lifts "Abo wählen" and the text by 14px to the Figma position */
  padding: 30px 0 40px;
  font-size: 15px;
}
.abo-2026 .abo-hero__fact { display: inline-flex; align-items: center; }
.abo-2026 .abo-hero__badge {
  position: absolute;
  right: 0;
  bottom: -80px; /* round 1 (#3): Figma 160×160, half of it below the hero edge */
  width: 160px;
  z-index: 2;
}
.abo-2026 .abo-hero__badge img { width: 100%; height: auto; }

/* ---- brand statement (688: 120 top, row 568, 0 bottom) ---------------- */
.abo-2026 .abo-brand { padding: 120px 0 0; }
.abo-2026 .abo-brand__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  grid-template-areas: "head img" "text img";
  column-gap: 64px;
  align-items: start;
}
.abo-2026 .abo-brand__head { grid-area: head; margin-bottom: 30px; }
.abo-2026 .abo-brand__portrait {
  grid-area: img;
  width: 540px;
  height: 568px;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}
.abo-2026 .abo-brand__text { grid-area: text; }
.abo-2026 .abo-brand__sub {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  margin: 0 0 8px;
}
.abo-2026 .abo-brand__p { font-size: 16px; line-height: 26px; margin: 0 0 24px; }
.abo-2026 .abo-brand__sign { font-size: 16px; line-height: 26px; margin: 0; }
.abo-2026 .abo-brand__sign em {
  display: block;
  font-style: italic;
  font-size: 14px;
  line-height: 14px;
  margin-top: 4px;
  color: rgba(54, 54, 54, 0.7);
}

/* ---- "Was zu Ihnen nach Hause kommt" (796: 90 top, 706 row) ----------- */
.abo-2026 .abo-carousel { padding: 90px 0 0; container-type: inline-size; --abo-edge: max(20px, calc((100cqw - 1248px) / 2)); } /* round 1 (#4): wrapper edge for the scroll row, cqw like the homepage */
.abo-2026 .abo-carousel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.abo-2026 .abo-carousel__head .abo-h2 { margin: 0; }
.abo-2026 .abo-carousel__nav { display: flex; gap: 12px; flex-shrink: 0; }
/* round 1 (#4): native scroll-snap row like the homepage (.sp-row / .sp-row__track, style-new.css) */
.abo-2026 .abo-carousel__row {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--abo-edge);
}
.abo-2026 .abo-carousel__row::-webkit-scrollbar { display: none; }
.abo-2026 .abo-carousel__track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  margin: 0;
  padding: 0 var(--abo-edge);
}
.abo-2026 .abo-carousel__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.abo-2026 .abo-card { width: 400px; padding: 0; outline: none; }
.abo-2026 .abo-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.abo-2026 .abo-card__title {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 28px 0 10px;
}
.abo-2026 .abo-card__text { font-size: 16px; line-height: 26px; margin: 0; }
.abo-2026 .abo-card__text--mobile { display: none; }

/* ---- Abo-Optionen (1037: 90 top, cards 581, band 200, 0 bottom) ------- */
.abo-2026 .abo-options { padding: 90px 0 0; }
.abo-2026 .abo-options__title { text-align: center; }
.abo-2026 .abo-options__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 394px;
  gap: 32px;
  align-items: stretch;
}
.abo-2026 .abo-plan {
  background: #ffffff;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
}
.abo-2026 .abo-plan__img {
  display: block;
  width: 400px;
  height: 100%;
  min-height: 581px;
  object-fit: cover;
  object-position: center; /* round 1 (#5): the *_card files already carry the Figma crop */
}
.abo-2026 .abo-plan__body {
  padding: 28px 32px 32px 38px;
  display: flex;
  flex-direction: column;
}
.abo-2026 .abo-plan__name {
  font-size: 36px !important;
  font-weight: 300 !important;
  line-height: 43px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 8px;
}
.abo-2026 .abo-plan__term { margin: 0 0 16px; } /* round 1 (#6): "Selber genießen" like the gift term */
.abo-2026 .abo-plan__desc { font-size: 16px; line-height: 26px; margin: 0 0 20px; }
.abo-2026 .abo-plan__list { list-style: none; padding: 0; margin: 0 0 20px; }
.abo-2026 .abo-plan__list li {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  line-height: 23px;
  margin-bottom: 8px;
}
.abo-2026 .abo-plan__list li:last-child { margin-bottom: 0; }
.abo-2026 .abo-plan__list li.abo-check::before { flex-shrink: 0; margin-top: 4px; }
.abo-2026 .abo-plan__list a { color: inherit; text-decoration: underline; display: inline !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit; } /* round 1 (#8) */
.abo-2026 .abo-nowrap { white-space: nowrap; }
.abo-2026 .abo-plan__rating {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 25px;
  margin: 0;
}
.abo-2026 .abo-plan__rating .abo-stars { margin-right: 10px; }
.abo-2026 .abo-plan__rating .abo-stars img { width: 16px; height: 16px; }
.abo-2026 .abo-plan__foot,
.abo-2026 .abo-gift__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.abo-2026 .abo-plan__foot { margin-top: 0; padding-top: 24px; } /* round 1 (#16): price directly below the text */
.abo-2026 .abo-plan__foot .abo-price { font-weight: 400; line-height: 1; } /* round 2 (Bettina 2.11.): 600 was bolder than Figma; #2784 Desktop 6: line-height 1 */
.abo-2026 .abo-price {
  font-size: 40px;
  font-weight: 300;
  line-height: 43px;
  white-space: nowrap;
  margin: 0;
}
.abo-2026 .abo-price small {
  display: block;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 14px;
  color: rgba(54, 54, 54, 0.6);
  margin-top: 8px;
}
.abo-2026 .abo-plan__foot .abo-price small { margin-top: 2px; } /* #2784 Desktop 6 */
.abo-2026 .abo-price--inline small { display: inline; margin: 0 0 0 6px; font-size: 12px !important; }
.abo-2026 .abo-gift {
  background: #ffffff;
  padding: 24px 32px 23px;
}
.abo-2026 .abo-gift + .abo-gift { margin-top: 24px; }
.abo-2026 .abo-gift__name {
  font-size: 36px !important;
  font-weight: 300 !important;
  line-height: 43px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 10px;
}
.abo-2026 .abo-gift__term,
.abo-2026 .abo-plan__term {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.abo-2026 .abo-gift__term b { font-weight: 600; }
.abo-2026 .abo-plan__term { font-weight: 600; } /* round 2 (Bettina 2.11.): "SELBER GENIESSEN" in bold, same weight as "HALBES JAHR," */
.abo-2026 .abo-gift__desc { font-size: 14px; line-height: 22px; margin: 0; }
.abo-2026 .abo-gift .abo-price { font-size: 36px; line-height: 43px; }
.abo-2026 .abo-gift__foot { margin-top: 42px; }
/* round 1 (#16): in the two-column layout the gift column takes the big card's height and the
   price block absorbs the remaining space — a fourth text line (Xmas "Weihnachtskarton") shrinks
   the gap instead of stretching the cards (as in the Figma XMAS frame). */
@media (min-width: 1200px) {
  .abo-2026 .abo-options__gifts { display: flex; flex-direction: column; height: 0; min-height: 100%; }
  .abo-2026 .abo-options__gifts .abo-gift { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .abo-2026 .abo-options__gifts .abo-gift + .abo-gift { margin-top: 24px; }
  .abo-2026 .abo-options__gifts .abo-gift__foot { margin-top: auto; padding-top: 20px; }
}

/* Trello #2796 — the three cards as the landing-page element "Champagner Abo Karten"
   (landingpages/landing_template.php, no heading and no Deluxe band there). The cards are
   the Abo page's; only the section spacing differs: 15px on top, which with the 24px of the
   paragraph above gives the 39px a landing-page text element keeps to the next element, and
   100px below — both as measured around the picture the cards replace on /Lou/l-58/.
   Two classes so this also outranks the phone rule (.abo-2026 .abo-options, 28px 0 0). */
.abo-2026.abo-2026--embed .abo-options { padding: 15px 0 100px; }

/* Trello #2797 — /champagner/abo/eu-ausland/: the Abo page's hero, then directly the three cards,
   then the newsletter. Gaps as on the Abo page: hero → next section 120px, phones 72px (= .abo-brand),
   last section → newsletter 90px, phones 40px (= .abo-past). The centred H2 has to clear the badge
   that hangs below the hero (160px badge, 80px below, down to 576px; phones 96px, 48px below), so
   the 72px only start where the small badge does — at 768px a 72px gap put the H2 under the badge.
   Two classes so this outranks the phone rule (.abo-2026 .abo-options, 28px 0 0). */
.abo-2026.abo-2026--eu .abo-options { padding: 120px 0 90px; }
@media (max-width: 575.98px) {
  .abo-2026.abo-2026--eu .abo-options { padding: 72px 0 40px; }
}
/* The EU button label "Champagner Abo EU entdecken" (260px + 2 × 35px) needs a 330px text column,
   i.e. a 370px screen: below that narrower side padding (one line down to 341px, e.g. 360px Android
   phones), from 340px down the label wraps instead of running off the screen. Two classes on the wrapper so this outranks the
   phone rule further down (.abo-2026 .abo-hero__head .sp-btn, padding 10px 35px). */
@media (max-width: 369.98px) {
  .abo-2026.abo-2026--eu .abo-hero__head .sp-btn { padding-left: 20px; padding-right: 20px; max-width: 100%; white-space: normal; text-align: center; }
}

.abo-2026 .abo-deluxe {
  position: relative;
  background: #E3D4A9;
  margin-top: 64px;
  padding: 40px 32px;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.abo-2026 .abo-deluxe__grape {
  position: absolute;
  left: 160px;
  top: -52px;
  width: 72px;
  height: auto;
}
.abo-2026 .abo-deluxe__intro { text-align: center; flex: 0 0 317px; }
.abo-2026 .abo-deluxe__intro p { font-size: 16px; line-height: 26px; margin: 0 0 8px; }
.abo-2026 .abo-deluxe__name {
  font-size: 36px !important;
  font-weight: 300 !important;
  line-height: 43px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0;
}
.abo-2026 .abo-deluxe__divider { width: 1px; align-self: stretch; background: #363636; margin: 0 48px; } /* round 1 (#12): darker */
.abo-2026 .abo-deluxe__text { flex: 1 1 auto; font-size: 16px; line-height: 26px; margin: 13px 48px 0 0; max-width: 536px; }
.abo-2026 .abo-deluxe__buy { flex: 0 0 234px; margin-left: auto; text-align: center; } /* round 1 (#12) */
.abo-2026 .abo-deluxe__buy .abo-price { font-size: 36px; line-height: 43px; margin-bottom: 12px; }
.abo-2026 .abo-deluxe__buy .sp-btn { width: 234px; }

/* ---- testimonials partial (#2608): round 1 (#9, Bettina 31.10.) — slider, arrows, button and card layout as on live; only section padding and heading styled here */
.abo-2026 .testimonials-abo { padding: 90px 0 0 !important; }
.abo-2026 .testimonials-abo h2 {
  font-weight: 300 !important;
  font-size: 50px !important;
  line-height: 62px !important;
  letter-spacing: -1px !important;
  text-transform: none !important;
  margin: 0 0 40px !important; /* round 2 (Bettina 2.11.): heading-to-reviews gap 40px as in Figma (live had 88) */
}
/* round 2: the global .weine-champaigner row adds margin-bottom 80px under the heading — not on this page */
.abo-2026 .testimonials-abo .row.weine-champaigner { margin-bottom: 0; }

/* ---- Video-FAQ (490: 64 top, 0 bottom; tiles 395×240, gap 32) --------- */
.abo-2026 .abo-video { padding: 64px 0 0; container-type: inline-size; --abo-edge: max(20px, calc((100cqw - 1248px) / 2)); }
.abo-2026 .abo-video .abo-h2 { margin-bottom: 24px; }
/* #2784 Desktop 8 / Mobil 5: starts on the grid, bleeds to the browser edge; on phones the edge is 20px,
   i.e. margin: 0 -20px; padding: 0 20px; scroll-padding-left: 20px */
.abo-2026 .abo-video .lightbox-track {
  margin: 0 calc(-1 * var(--abo-edge));
  padding: 0 var(--abo-edge);
  scroll-padding-left: var(--abo-edge);
  scroll-behavior: auto;
  gap: 32px;
}
.abo-2026 .abo-video .lightbox-link {
  flex: 0 0 calc((100% - 64px) / 3);
  margin: 0;
  height: 240px;
  border-radius: 12px;
}
.abo-2026 .abo-video .lightbox-link .img-cover img { width: 100%; height: 100%; object-fit: cover; }
.abo-2026 .abo-video .heading-5 { font-size: 28px !important; line-height: 34px; font-weight: 600 !important; padding-bottom: 20px; }

/* ---- FAQ (70 top; left 420, right from x=556) ------------------------- */
.abo-2026 .abo-faq { padding: 70px 0 90px; }
.abo-2026 .abo-faq__grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}
.abo-2026 .abo-faq__intro .abo-h2 { margin-bottom: 24px; }
.abo-2026 .abo-faq__intro p { font-size: 18px; line-height: 29px; margin: 0; }
.abo-2026 .abo-faq__list, .abo-2026 .abo-faq__inner, .abo-2026 .abo-faq .faq-accordion-wrapper { margin: 0; padding: 0; max-width: none; } /* #2784 Desktop 9: up to the wrapper edge */
.abo-2026 .abo-faq .tab-section { gap: 34px; margin: 6px 0 24px; flex-wrap: wrap; }
.abo-2026 .abo-faq .tab-section .btn {
  padding: 0 0 4px !important;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent !important;
  color: #8C8C8A;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  box-shadow: none;
  margin: 0;
}
.abo-2026 .abo-faq .tab-section .btn.btn-white {
  color: #363636;
  border-bottom-color: #363636;
}
.abo-2026 .abo-faq .accordion-ew .card {
  border-bottom: 1px solid rgba(54, 54, 54, 0.15) !important;
  padding-bottom: 0;
}
.abo-2026 .abo-faq .accordion-ew .card:first-of-type { border-top: 1px solid rgba(54, 54, 54, 0.15); }
.abo-2026 .abo-faq .accordion-ew .card-header button {
  font-size: 22px;
  font-weight: 400;
  line-height: 27px;
  padding: 24px 48px 24px 0;
  white-space: normal;
  color: #363636;
}
.abo-2026 .abo-faq .accordion-ew .card-header button::after { top: 24px; }
.abo-2026 .abo-faq .accordion-ew .card-header h3 { margin: 0 !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-transform: none !important; letter-spacing: 0 !important; } /* round 1 (#11): H3 instead of H2, nothing visual changes */
.abo-2026 .abo-faq .accordion-ew .card-body { padding-top: 0; padding-bottom: 24px; }
.abo-2026 .abo-faq .accordion-ew .card-body p { font-size: 18px; line-height: 29px; margin: 0; }

/* ---- Bisherige Aussendungen (90 top, row of 395-px cards, note, 90 bottom) ----
   #2787 (5): scroll row like the Kundenstimmen — starts on the grid and runs out of the wrapper
   on the right, heading left with the two arrows on the heading line (the carousel head), no
   "+ weitere Aussendungen" button. The markup reuses .abo-carousel__head/__nav/__row/__track;
   only the card width (395 = Kundenstimmen card) and the gap (32) are set here. */
.abo-2026 .abo-past { padding: 90px 0 90px; position: relative; container-type: inline-size; --abo-edge: max(20px, calc((100cqw - 1248px) / 2)); }
.abo-2026 .abo-past__row .abo-carousel__track { gap: 32px; }
.abo-2026 .abo-past__card { background: #ffffff; padding: 24px 24px 24px; width: 395px; }
.abo-2026 .abo-past__img {
  height: 327px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abo-2026 .abo-past__img img { max-height: 100%; width: auto; }
.abo-2026 .abo-past__body { padding: 0; }
.abo-2026 .abo-past__title {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 16px 0 16px;
}
.abo-2026 .abo-past__wine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 16px;
  color: #707070;
  margin: 0 0 12px;
}
.abo-2026 .abo-past__wine:last-child { margin-bottom: 0; }
.abo-2026 .abo-past__wine a { color: #FF6969; font-size: 20px; line-height: 24px; flex-shrink: 0; }
.abo-2026 .abo-past__note { font-size: 14px; line-height: 22px; color: rgba(54, 54, 54, 0.6); margin: 40px 0 0; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1199px) {
  .abo-2026 .abo-h2 { font-size: 42px !important; line-height: 52px !important; }
  .abo-2026 .abo-hero__title { font-size: 76px !important; }
  .abo-2026 .abo-brand__grid { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 40px; }
  .abo-2026 .abo-brand__portrait { width: 420px; height: 480px; }
  /* review pass 2.11.: below 1200px the two-column grid squeezed the big card's text to ~210px (button overflowed) —
     one column instead: big card full width (image 400 + text), gift cards side by side, Deluxe band below */
  .abo-2026 .abo-options__grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .abo-2026 .abo-options__gifts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .abo-2026 .abo-options__gifts .abo-gift + .abo-gift { margin-top: 0; }
  .abo-2026 .abo-plan__name { white-space: normal; }
  .abo-2026 .abo-gift { padding: 24px 26px; }
  .abo-2026 .abo-deluxe { flex-wrap: wrap; gap: 24px; }
  .abo-2026 .abo-deluxe__intro { flex-basis: 240px; }
  .abo-2026 .abo-deluxe__divider { margin: 0 24px; }
  .abo-2026 .abo-deluxe__text { margin-right: 0; }
  .abo-2026 .abo-faq__grid { grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; }
}
@media (max-width: 991px) {
  .abo-2026 .abo-hero { height: 720px; }
  .abo-2026 .abo-hero__title { font-size: 60px !important; }
  .abo-2026 .abo-hero__sub { font-size: 20px; line-height: 30px; }
  .abo-2026 .abo-brand { padding: 72px 0 0; }
  .abo-2026 .abo-brand__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "img" "text";
  }
  .abo-2026 .abo-brand__portrait { width: 100%; height: 420px; margin-bottom: 24px; object-position: 50% 8%; } /* #2784 Mobil 2: head not cut */
  .abo-2026 .abo-options__grid { grid-template-columns: minmax(0, 1fr); }
  .abo-2026 .abo-plan { grid-template-columns: minmax(0, 1fr); }
  .abo-2026 .abo-plan__img { width: 100%; height: 420px; min-height: 0; }
  .abo-2026 .abo-deluxe { flex-wrap: wrap; }
  .abo-2026 .abo-deluxe__divider { display: none; }
  .abo-2026 .abo-deluxe__intro { flex-basis: 100%; text-align: left; }
  .abo-2026 .abo-deluxe__text { max-width: none; flex-basis: 100%; margin: 0; }
  .abo-2026 .abo-deluxe__buy { margin-left: 0; }
  .abo-2026 .abo-faq__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}
@media (max-width: 767px) {
  .abo-2026 .abo-video .lightbox-link { flex: 0 0 300px; height: 300px; }
}
@media (max-width: 575.98px) {
  /* #2787 (2): 32px Light as in Figma (was 30); letter-spacing -0.96px = Figma -3% — the mobile frame's auto-width
     heading boxes (297 "nach Hause kommt", 285 "Welches Abo passt") match Poppins Light 32px only with this spacing */
  .abo-2026 .abo-h2 { font-size: 32px !important; line-height: 38px !important; letter-spacing: -0.96px !important; margin-bottom: 28px; }
  /* #2787 (2): "auch die Newsletter-Überschrift" — the newsletter section follows this page (style.css: 28px, .font-weight-normal = 400) */
  .abo-2026 ~ .newsletter h2 { font-size: 32px !important; line-height: 38px !important; font-weight: 300 !important; letter-spacing: -0.96px !important; }
  .abo-2026 .abo-br-m { display: inline; }
  .abo-2026 .abo-lead { font-size: 14px; line-height: 22px; text-align: left; margin: 0 0 20px; }
  /* hero: header 20 top, text block, product in the picture, facts at the bottom */
  /* #2787 (1): the Karton's top edge sits 30px under the button on every phone (Figma: ca. 30). Button bottom = 343
     (one-line H1); the Karton edge is at 47.75% of the 1125×2400 picture, which is bottom-aligned (cover, center bottom).
     Picture as wide as the phone (>= 366px): Karton top = H - 0.5225 × 213.33vw  =>  H = 373px + 111.47vw; the surplus is
     cut from the grey wall at the top and the Karton grows with the width. Narrower phones scale the picture by height:
     H = 373 / 0.4775 = 781px. (#2784 had max(796px, 213.33vw): gap 39 at 375, 95 at 430.) */
  .abo-2026 .abo-hero { height: max(calc(373px + 111.47vw), 781px); }
  .abo-2026 .abo-hero__bg { object-position: center bottom; }
  .abo-2026 .abo-hero__top { padding-top: 20px; }
  .abo-2026 .abo-hero__logo img { width: 140px; }
  .abo-2026 .abo-hero__shop { margin-top: 8px; }
  .abo-2026 .abo-hero__head { text-align: center; margin-top: 24px; } /* round 1 (#12m): 10px more air between the button and the gift box */
  .abo-2026 .abo-hero__title { font-size: 36px !important; font-weight: 200 !important; line-height: 1 !important; letter-spacing: 0 !important; margin-bottom: 8px; }
  .abo-2026 .abo-hero__sub { font-size: 14px; line-height: 22px; max-width: 295px; margin: 0 auto 13px; }
  .abo-2026 .abo-hero__sub br { display: none; }
  .abo-2026 .abo-hero__head .sp-btn { font-size: 16px; padding: 10px 35px; line-height: 18px; }
  .abo-2026 .abo-hero__content { position: static; }
  .abo-2026 .abo-hero__facts {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 18px 0 32px;
    font-size: 14px;
    line-height: 16px;
  }
  .abo-2026 .abo-hero__facts .abo-hero__fact:first-child { margin-bottom: 7px; }
  .abo-2026 .abo-hero__facts .abo-stars img { width: 14px; height: 14px; }
  .abo-2026 .abo-hero__facts .abo-check::before { width: 16px; height: 13px; margin-right: 8px; }
  .abo-2026 .abo-hero__badge { width: 96px; right: 17px; bottom: -48px; }
  /* brand (875): 72 top, heading 76, photo 250, blocks, 0 bottom */
  .abo-2026 .abo-brand { padding: 72px 0 0; }
  .abo-2026 .abo-brand__head { margin-bottom: 20px; }
  .abo-2026 .abo-brand__head br { display: none; }
  .abo-2026 .abo-brand__portrait { height: auto; aspect-ratio: 335 / 250; margin-bottom: 20px; } /* #2784 Mobil 2: same crop on every phone width */
  .abo-2026 .abo-brand__sub { font-size: 14px !important; line-height: 19px !important; margin-bottom: 6px; }
  .abo-2026 .abo-brand__p { font-size: 14px; line-height: 22px; margin-bottom: 12px; }
  .abo-2026 .abo-brand__sign { font-size: 14px; line-height: 22px; }
  .abo-2026 .abo-brand__sign em { line-height: 16px; margin-top: 8px; }
  /* carousel (615): 40 top, heading 76, cards 300 + 19 + text, 24 bottom */
  .abo-2026 .abo-carousel { padding: 40px 0 24px; }
  .abo-2026 .abo-brand__sign em { line-height: 16px; }
  .abo-2026 .abo-carousel__head { margin-bottom: 28px; }
  .abo-2026 .abo-options .abo-h2 { max-width: 290px; margin-left: auto; margin-right: auto; } /* #2787 (2): "Welches Abo passt" = 285.4px at 32px; the carousel heading breaks with <br class="abo-br-m"> */
  .abo-2026 .abo-video .abo-h2 { max-width: 300px; }
  .abo-2026 .abo-carousel__nav { display: none; }
  .abo-2026 .abo-carousel__track { gap: 16px; }
  .abo-2026 .abo-card { width: 300px; padding: 0; }
  .abo-2026 .abo-card__img { width: 300px; }
  .abo-2026 .abo-card__title { font-size: 20px !important; line-height: 28px !important; margin: 19px 18px 6px 0; }
  .abo-2026 .abo-card__text { font-size: 14px; line-height: 22px; margin-right: 18px; }
  .abo-2026 .abo-card__text--desktop { display: none; }
  .abo-2026 .abo-card__text--mobile { display: block; }
  .abo-2026 .abo-video .heading-5 { font-size: 24px !important; line-height: 30px; }
  /* Abo-Optionen (1992): 28 top, cards 335 wide, 0 bottom */
  .abo-2026 .abo-options { padding: 28px 0 0; }
  .abo-2026 .abo-options__grid { gap: 16px; }
  .abo-2026 .abo-options__gifts { display: block; }
  .abo-2026 .abo-options__gifts .abo-gift + .abo-gift { margin-top: 16px; }
  .abo-2026 .abo-plan__img { height: 300px; object-position: 53% 47%; } /* full photo on phones (LIESMICH) */
  .abo-2026 .abo-plan__body { padding: 24px 20px 24px; }
  .abo-2026 .abo-plan__name { font-size: 24px !important; line-height: 29px !important; margin-bottom: 12px; }
  .abo-2026 .abo-plan__desc { font-size: 14px; line-height: 22px; margin-bottom: 12px; }
  .abo-2026 .abo-plan__list { margin-bottom: 12px; }
  .abo-2026 .abo-plan__list li { font-size: 14px; line-height: 22px; margin-bottom: 4px; }
  .abo-2026 .abo-plan__rating { white-space: nowrap; font-size: 13px; }
  .abo-2026 .abo-plan__rating .abo-stars img { width: 15px; height: 15px; }
  .abo-2026 .abo-plan__foot, .abo-2026 .abo-gift__foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .abo-2026 .abo-plan__foot { padding-top: 20px; }
  .abo-2026 .abo-plan__foot .abo-price, .abo-2026 .abo-gift__foot .abo-price { display: flex; align-items: baseline; gap: 10px; font-size: 40px; line-height: 42px; }
  .abo-2026 .abo-plan__foot .abo-price small, .abo-2026 .abo-gift__foot .abo-price small { margin: 0; }
  .abo-2026 .abo-plan__foot .sp-btn, .abo-2026 .abo-gift__foot .sp-btn, .abo-2026 .abo-deluxe__buy .sp-btn { width: 100%; padding: 11px 20px; line-height: 17px; font-size: 16px; }
  .abo-2026 .abo-gift { padding: 24px 20px 24px; }
  .abo-2026 .abo-gift + .abo-gift { margin-top: 16px; }
  .abo-2026 .abo-gift__name { font-size: 24px !important; line-height: 29px !important; margin-bottom: 10px; }
  .abo-2026 .abo-gift__term { font-size: 14px; line-height: 14px; }
  .abo-2026 .abo-gift__foot { margin-top: 20px; }
  .abo-2026 .abo-gift__foot .abo-price { font-size: 24px; line-height: 29px; }
  .abo-2026 .abo-deluxe { margin-top: 28px; padding: 32px 20px 24px; flex-direction: column; gap: 0; }
  .abo-2026 .abo-deluxe__grape { left: auto; right: 24px; top: -36px; width: 56px; }
  .abo-2026 .abo-deluxe__intro { flex-basis: auto; width: 100%; }
  .abo-2026 .abo-deluxe__intro p { font-size: 14px; line-height: 22px; margin-bottom: 8px; }
  .abo-2026 .abo-deluxe__name { font-size: 24px !important; line-height: 29px !important; }
  .abo-2026 .abo-deluxe__text { width: 100%; border-top: 1px solid rgba(54, 54, 54, 0.3); margin: 16px 0 0; padding-top: 16px; font-size: 14px; line-height: 22px; }
  .abo-2026 .abo-deluxe__buy { flex-basis: auto; width: 100%; margin-top: 28px; }
  .abo-2026 .abo-deluxe__buy { text-align: left; } /* #2784 Mobil 3 */
  .abo-2026 .abo-deluxe__buy .abo-price { font-size: 24px; line-height: 29px; margin-bottom: 16px; }
  .abo-2026 .abo-deluxe__name br { display: none; } /* #2784 Mobil 3 */
  .abo-2026 .abo-price--inline small { font-size: 14px !important; } /* #2784 Mobil 3 */
  /* testimonials (446): 40 top, heading 76 + 20, cards 280 + peek */
  .abo-2026 .testimonials-abo { padding: 40px 0 0 !important; }
  .abo-2026 .testimonials-abo .container { padding: 0 20px; }
  .abo-2026 .testimonials-abo .row { margin: 0; }
  .abo-2026 .testimonials-abo .row > div { padding: 0; }
  .abo-2026 .testimonials-abo h2 { font-size: 32px !important; line-height: 38px !important; letter-spacing: -0.96px !important; text-align: left !important; margin-bottom: 20px !important; max-width: 310px; } /* #2787 (2): 32px, spacing like .abo-h2 */
  /* #2787 (3)+(4), this page only: review cards 300px like the other rows (partial: 280); "Alle Bewertungen ansehen"
     left-aligned with heading and cards (partial: centred — the start page keeps that) */
  .abo-2026 .ts-review-slide { width: 300px; }
  .abo-2026 .ts-row__foot { justify-content: flex-start; }
  .abo-2026 .ts-row__all { margin: 0; }
  /* video (514): 40 top, heading 76 + 12, lead 66 + 20, tiles 300×300, 0 bottom */
  .abo-2026 .abo-video { padding: 40px 0 0; }
  .abo-2026 .abo-video .text-center { text-align: left !important; }
  .abo-2026 .abo-video .abo-h2 { margin-bottom: 12px; }
  .abo-2026 .abo-video .lightbox-track { gap: 16px; }
  .abo-2026 .abo-video .lightbox-link { flex: 0 0 300px; height: 300px; }
  .abo-2026 .abo-video .heading-5 { font-size: 24px !important; line-height: 30px; }
  /* FAQ (1407): 40 top, heading 76 + 20, intro 66 + 28, chips, rows 76 */
  .abo-2026 .abo-faq { padding: 40px 0 40px; }
  .abo-2026 .abo-faq__grid { row-gap: 28px; }
  .abo-2026 .abo-faq__intro .abo-h2 { margin-bottom: 20px; }
  .abo-2026 .abo-faq__intro p { font-size: 14px; line-height: 22px; }
  .abo-2026 .abo-faq .tab-section { gap: 26px; margin: 0 0 20px; }
  .abo-2026 .abo-faq .tab-section .btn { font-size: 14px; line-height: 18px; padding-bottom: 2px !important; }
  .abo-2026 .abo-faq .accordion-ew .card-header button { font-size: 17px; line-height: 22px; padding: 16px 44px 16px 0; }
  .abo-2026 .abo-faq .accordion-ew .card-header button::after { top: 16px; }
  .abo-2026 .abo-faq .accordion-ew .card-body p { font-size: 14px; line-height: 22px; }
  /* past editions: 40 top, heading 76 + 28 (carousel head), swipe row of 300-px cards — #2787 (3): the same width as
     the other rows (was 260; the row, the 16px gap and the hidden arrows come from the .abo-carousel__* rules above), 40 bottom */
  .abo-2026 .abo-past { padding: 40px 0 40px; }
  .abo-2026 .abo-past__row .abo-carousel__track { gap: 16px; } /* the desktop 32px rule above outranks the generic 16px track rule */
  .abo-2026 .abo-past__card { width: 300px; padding: 20px 20px 20px; }
  .abo-2026 .abo-past__img { height: 327px; }
  .abo-2026 .abo-past__title { font-size: 20px !important; line-height: 28px !important; margin: 12px 0 12px; }
  .abo-2026 .abo-past__wine { line-height: 22px; }
  .abo-2026 .abo-past__note { margin-top: 28px; }
  /* order popup: the two option tabs (min-content 186px each) overflowed the 357px modal by 17px */
  .abo-2026 #orderModal .selectable-option { padding-left: 8px; padding-right: 8px; }
  /* round 1 (Bettina 31.10.) */
  .abo-2026 .abo-hero__title, .abo-2026 .abo-hero__sub { color: #363636; } /* #12m: dark on the light image part */
  .abo-2026 .abo-plan__term { font-size: 14px; line-height: 14px; margin-bottom: 12px; } /* #6 */
  .abo-2026 .abo-video .abo-h2--center { text-align: left !important; } /* #15 */
}
/* #2787 (1): below 358.2px (H1 text 318.2 + 2×20) the H1 wraps to two lines, button bottom 379 → Karton top 409;
   the picture is always height-bound here: 409 / 0.4775 = 857px (#2784: 870 from 359.98 down) */
@media (max-width: 358.98px) {
  .abo-2026 .abo-hero { height: 857px; }
}