/* ============================================================
   Telekom DCB Landing Pages – Components Stylesheet
   ============================================================
   Komponenten-Library, portiert aus dem Greyt-Webdesign-Katalog
   und in Vanilla-CSS übersetzt mit Telekom-Tokens aus base.css.

   Reihenfolge (siehe docs/component-inventory.md):
     1. Header (Floating Pill Navigation)
     2. Hero (Brand) + Hero (Streaming, Co-Branded)
     3. Stats-Bar (Big Number Cards)
     4. Feature-Grid (3-Col Pillars + 6-Card Bordered)
     5. Tabs (Pills + Card-Inhalt)
     6. Process (Numbered Grid horizontal)
     7. Content + Image Alternating
     8. Logo-Marquee (Infinite-Scroll mit Edge-Fade)
     9. Comparison-Table
    10. FAQ (2-Col Bordered Accordion)
    11. CTA-Banner (Subtle + Card-Split)
    12. Sticky Mobile CTA
    13. Footer
   ============================================================ */

/* ============================================================
   0. BUTTON HOVER REFINEMENTS (Kontrast auf dunklem BG)
   ============================================================ */

/* Ghost-Buttons in dunklen Sektionen (z.B. Streaming-Hero) */
.hero--cobrand .btn--ghost,
.section--dark .btn--ghost {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.25);
}

.hero--cobrand .btn--ghost:hover,
.hero--cobrand .btn--ghost:focus-visible,
.section--dark .btn--ghost:hover,
.section--dark .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
  box-shadow: none;
}

/* Header-Pill-CTA: Greyt-Hover (#b5b9c8, greyt.de) */
.btn--pill-magenta:hover,
.btn--pill-magenta:focus-visible {
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: var(--color-black);
  box-shadow: none;
  transform: none;
}

/* ============================================================
   1. HEADER — Floating Pill Navigation
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  padding-block: 0;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-block-end: 1px solid var(--on-dark-border);
  box-shadow: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.site-header__logo {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text-dark);
  font-weight: var(--font-weight-bold);
}

/* Logo wie telekom.de: Magenta-Quadrat über die volle Header-Höhe */
.site-header__logo svg,
.site-header__logo img {
  height: 64px;
  width: auto;
}

.site-header__nav {
  display: none;
  flex: 1;
  justify-content: center;
  gap: var(--space-1);
}

.site-header__nav a {
  padding: 0.5rem 0.875rem;
  border-radius: var(--pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
}

.site-header__cta {
  margin-inline-start: auto;
}

.site-header__menu-toggle {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-text-dark);
}

.site-header__menu-toggle svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 901px) {
  .site-header__nav { display: flex; }
  .site-header__menu-toggle { display: none; }
}

/* Mobile Header: CTA-Pill zugunsten des Burger-Buttons ausblenden, CTA ist im Drawer */
@media (max-width: 900px) {
  .site-header__cta { display: none; }
}

/* Co-Brand-Lockup (Greyt × Telekom) im Funnel-Header der Partner-LP.
   Monochrom weiß auf dunklem Header (Greyt-Look): beide Logos per
   Filter weiß gesetzt, das Magenta lebt nur im Hero-Element. */
.cobrand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cobrand-lockup__greyt {
  font-weight: var(--font-weight-extrabold, 800);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  letter-spacing: -0.03em;
  color: var(--color-text-dark);
  line-height: 1;
  display: flex;
  align-items: center;
}

.cobrand-lockup__greyt span { color: var(--color-white); }

/* Greyt-Wortmarke als SVG: Höhe an die Telekom-Marke angeglichen */
.cobrand-lockup__greyt img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }

.cobrand-lockup__x {
  color: var(--on-dark-muted);
  font-size: 1.15rem;
  font-weight: var(--font-weight-regular, 400);
}

.cobrand-lockup__tk {
  display: flex;
  align-items: center;
}

.cobrand-lockup__tk img {
  height: 38px;
  width: auto;
  display: block;
  /* Monochrom: Magenta-Quadrat wird graues Tile, weißes T bleibt sichtbar */
  filter: grayscale(1) brightness(1.4);
}

@media (max-width: 480px) {
  .cobrand-lockup__greyt { font-size: 1.2rem; }
  .cobrand-lockup__greyt img { height: 26px; }
  .cobrand-lockup__tk img { height: 32px; }
}

/* Footer ist dunkel: Greyt-Wortmarke hell setzen, sonst unsichtbar */
.site-footer .cobrand-lockup__greyt { color: var(--color-white); }
.site-footer .cobrand-lockup__greyt img { filter: brightness(0) invert(1); }
.site-footer .cobrand-lockup__greyt img { height: 34px; }
.site-footer .cobrand-lockup { margin-bottom: var(--space-4); }

/* Co-Branded Header (Streaming-LP, dark theme) */
.site-header--cobrand {
  background: var(--color-netflix-black);
  color: var(--color-white);
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}

.site-header--cobrand .site-header__logo {
  color: var(--color-white);
}

.site-header__cobrand-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header__cobrand-x {
  font-size: var(--font-size-lg);
  color: var(--color-gray-400);
  font-weight: var(--font-weight-light);
}

.site-header__cobrand-row svg,
.site-header__cobrand-row img {
  height: 24px;
  width: auto;
}

/* Mobile Drawer (geöffnet via JS) */
.site-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-white);
  padding: var(--space-6) var(--section-padding-x);
  transform: translateY(-100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
}

.site-mobile-drawer[aria-hidden="false"] {
  transform: translateY(0);
}

.site-mobile-drawer__close {
  position: absolute;
  top: var(--space-4);
  right: var(--section-padding-x);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-mobile-drawer__nav {
  margin-block-start: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-mobile-drawer__nav a {
  display: block;
  padding: var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  border-block-end: 1px solid var(--color-gray-100);
  text-decoration: none;
}

/* ============================================================
   2. HERO — Brand & Co-Branded Variants
   ============================================================ */

.hero {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1rem + 3vw, 5rem);
  position: relative;
  overflow: hidden;
}

.hero--brand {
  background: var(--gradient-primary-subtle);
}

.hero__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

/* Brand-Hero: Side-by-side Layout (Text links, Visual rechts) */
.hero--brand .hero__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
  text-align: left;
}

@media (min-width: 901px) {
  .hero--brand .hero__container {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 1rem + 4vw, 6rem);
  }
}

.hero--brand .hero__text { display: flex; flex-direction: column; gap: var(--space-4); }

.hero--brand .hero__title { max-width: 560px; }
.hero--brand .hero__subtitle { margin-inline: 0; max-width: 560px; }
.hero--brand .hero__actions { justify-content: flex-start; margin-bottom: 0; }

.hero--brand .hero__visual {
  margin-inline: 0;
  max-width: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero--brand .hero__visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(420px, 55vh, 600px);
  filter: drop-shadow(0 18px 48px rgba(0, 0, 0, 0.18));
}

/* Photo-Variante: Bild als gerundete Container-Box mit cover */
.hero--brand .hero__visual--photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  overflow: visible;
  position: relative;
}

.hero--brand .hero__visual--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-2xl);
  filter: none;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.25);
}

.hero--brand .hero__visual--photo .hero__stoerer {
  top: -16px;
  right: -16px;
  bottom: auto;
}

.hero--brand .hero__stoerer {
  bottom: auto;
  top: 6%;
  right: -2%;
  width: clamp(108px, 12vw, 148px);
  height: clamp(108px, 12vw, 148px);
}

@media (max-width: 900px) {
  .hero--brand .hero__visual { order: -1; }
  .hero--brand .hero__visual img { max-height: 460px; }
  .hero--brand .hero__stoerer {
    top: auto;
    bottom: 4%;
    right: 4%;
  }
}

.hero__eyebrow {
  margin-bottom: var(--space-3);
}

.hero__title {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tighter);
  margin-bottom: var(--space-4);
  color: var(--color-text-dark);
}

.hero__title .accent {
  color: var(--color-magenta);
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-body);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: var(--line-height-snug);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.hero__visual {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero__visual img,
.hero__visual picture {
  width: 100%;
  height: auto;
  display: block;
}

/* Stoerer / Aktion-Badge auf Hero-Visual */
.hero__stoerer {
  position: absolute;
  bottom: 12%;
  right: 8%;
  width: clamp(96px, 14vw, 140px);
  height: clamp(96px, 14vw, 140px);
  background: var(--color-magenta);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
  transform: rotate(-6deg);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25));
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  animation: stoerer-pulse 2.5s ease-in-out infinite;
}

.hero__stoerer-big { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.hero__stoerer-small { font-size: clamp(0.6875rem, 1vw, 0.875rem); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); margin-top: 0.125rem; }

@keyframes stoerer-pulse {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(-6deg) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__stoerer { animation: none; }
}

/* Co-Branded Hero (Streaming-LP) */
.hero--cobrand {
  background: var(--gradient-netflix);
  color: var(--color-white);
  text-align: left;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

.hero--cobrand .hero__container {
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.hero--cobrand .hero__title {
  color: var(--color-white);
  font-size: var(--font-size-display);
}

.hero--cobrand .hero__title .accent { color: var(--color-netflix-red); }

.hero--cobrand .hero__subtitle {
  color: var(--color-gray-200);
  margin-inline: 0;
}

.hero--cobrand .hero__actions { justify-content: flex-start; }

.hero--cobrand .hero__visual {
  border-radius: var(--radius-xl);
  overflow: visible;
  box-shadow: 0 24px 80px rgba(229, 9, 20, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
  position: relative;
  aspect-ratio: 4 / 3;
}

.hero--cobrand .hero__visual img,
.hero--cobrand .hero__visual picture {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-xl);
}

/* Cashback-Stör als runder Pin auf dem Streaming-Photo */
.hero__stoerer--cobrand {
  position: absolute;
  top: auto;
  bottom: -18px;
  right: -18px;
  width: clamp(110px, 13vw, 150px);
  height: clamp(110px, 13vw, 150px);
  background: var(--color-magenta);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
  transform: rotate(-6deg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(226, 0, 116, 0.18);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  animation: stoerer-pulse 2.5s ease-in-out infinite;
  z-index: 2;
}

.hero__stoerer--cobrand .hero__stoerer-big { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 800; }
.hero__stoerer--cobrand .hero__stoerer-small { font-size: clamp(0.6875rem, 0.95vw, 0.8125rem); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.125rem; }
.hero__stoerer--cobrand .hero__stoerer-tiny { font-size: clamp(0.625rem, 0.85vw, 0.75rem); color: rgba(255, 255, 255, 0.85); margin-top: 0.125rem; letter-spacing: 0.08em; }

@media (max-width: 900px) {
  .hero__stoerer--cobrand { bottom: -12px; right: -8px; }
}

@media (min-width: 901px) {
  .hero--cobrand .hero__container {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   2b. HERO BLEED — Variante B (Bild in Container, Text-Overlay bottom-left)
   ============================================================ */

.hero-switcher {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--section-padding-x) 0;
  font-size: var(--font-size-sm);
}

@media (max-width: 480px) {
  .hero-switcher { gap: 0.375rem; }
  .hero-switcher__label { width: 100%; margin-bottom: 0.25rem; margin-right: 0; }
  .hero-switcher__btn { padding: 0.4rem 0.75rem; font-size: var(--font-size-xs); }
}

.hero-switcher__label {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  font-size: var(--font-size-eyebrow);
  margin-right: var(--space-2);
}

.hero-switcher__btn {
  padding: 0.5rem 1rem;
  background: var(--color-white);
  color: var(--color-text-body);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--pill);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hero-switcher__btn:hover {
  border-color: var(--color-magenta-light);
  color: var(--color-magenta);
}

.hero-switcher__btn.is-active {
  background: var(--color-magenta);
  color: var(--color-white);
  border-color: var(--color-magenta-dark);
}

.hero__variant[hidden] { display: none !important; }

/* Variant B Container (Magnific-Style: contained box, not full-bleed) */
.hero--brand-bleed {
  padding-block: var(--space-4) clamp(2rem, 1rem + 3vw, 4rem);
}

.hero-bleed {
  position: relative;
  max-width: var(--container-max);
  width: calc(100% - 2 * var(--section-padding-x));
  margin-inline: auto;
  margin-block: var(--space-3);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: var(--color-dark);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.hero-bleed__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}

.hero-bleed__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.05) 70%, transparent 100%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.hero-bleed__text {
  position: absolute;
  bottom: clamp(1.5rem, 3vw, 3rem);
  left: clamp(1.25rem, 3vw, 3rem);
  right: clamp(1.25rem, 3vw, 3rem);
  max-width: 620px;
  color: var(--color-white);
  z-index: 2;
}

.hero-bleed__eyebrow {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-2);
}

.hero-bleed__title {
  color: var(--color-white);
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3.5rem);
  line-height: 1.05;
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.hero-bleed__title .accent {
  color: var(--color-magenta-light);
}

.hero-bleed__subtitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  margin-bottom: var(--space-5);
  max-width: 520px;
}

.hero-bleed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-bleed__stoerer {
  position: absolute;
  top: clamp(1rem, 3vw, 2.5rem);
  right: clamp(1rem, 3vw, 2.5rem);
  width: clamp(96px, 11vw, 132px);
  height: clamp(96px, 11vw, 132px);
  background: var(--color-magenta);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  transform: rotate(-6deg);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 0 4px rgba(226,0,116,0.18);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  animation: stoerer-pulse 2.5s ease-in-out infinite;
  z-index: 3;
}

@media (max-width: 600px) {
  .hero-bleed { aspect-ratio: 4 / 5; }
  .hero-bleed__bg { object-position: 60% 30%; }
  .hero-bleed__overlay {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.78) 100%);
  }
  .hero-bleed__text { right: 1rem; left: 1rem; bottom: 1.25rem; }
  .hero-bleed__title { font-size: 1.875rem; }
}

/* ============================================================
   3. STATS — Big Number Cards
   ============================================================ */

.stats {
  padding-block: var(--section-padding-y);
  background: var(--color-white);
}

.stats__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.stats__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.stats__header h2 {
  margin-bottom: var(--space-3);
}

.stats__header p {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-2);
  text-align: center;
}

.stat-card__eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stat-card__value {
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-magenta);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-tight);
}

.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  line-height: var(--line-height-snug);
}

/* Variant: dark cards mit icons */
.stats--dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.stats--dark .stats__header p,
.stats--dark .stat-card__label { color: var(--color-gray-300); }

.stats--dark .stat-card { padding: var(--space-6); background: var(--color-gray-900); border-radius: var(--radius-lg); }

.stats--dark .stat-card__value { color: var(--color-white); }

/* ============================================================
   4. FEATURE GRID — 3-Col Pillars & 6-Card Bordered
   ============================================================ */

.feature-grid {
  padding-block: var(--section-padding-y);
}

.feature-grid--bg-light { background: transparent; }

.feature-grid__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.feature-grid__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.feature-grid__header .eyebrow { color: var(--color-magenta); }

.feature-grid__header h2 { margin-bottom: var(--space-3); }

.feature-grid__header p { color: var(--color-text-body); font-size: var(--font-size-lg); }

.feature-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .feature-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 901px) {
  .feature-grid__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid__grid--6-bordered { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-magenta-light);
  color: var(--color-magenta);
  flex-shrink: 0;
}

.feature-card__icon svg { width: 24px; height: 24px; }

.feature-card__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.feature-card__text {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: var(--line-height-snug);
}

/* Bordered Variant (6-Card Trust-Grid) */
.feature-card--bordered {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.feature-card--bordered:hover {
  border-color: var(--color-magenta-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* Numbered Pillar Variant (Was-ist-DCB-Sektion) */
.feature-card--numbered {
  padding-inline-start: var(--space-6);
  border-inline-start: 3px solid var(--color-magenta);
}

.feature-card--numbered .feature-card__num {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-magenta);
}

/* ============================================================
   5. TABS — Pills + Card-Inhalt (für Use-Case-Tabs)
   ============================================================ */

.tabs {
  padding-block: var(--section-padding-y);
}

.tabs__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.tabs__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

/* Greyt-Pill-Tabs (greyt.de c-pill-button): Outline inaktiv,
   weiß gefüllt aktiv, uppercase */
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  background: transparent;
  color: var(--color-text-body);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--pill);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow);
}

.tabs__tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border-color: var(--color-white);
}

.tabs__tab[aria-selected="true"] {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.tabs__tab svg { width: 18px; height: 18px; }

.tabs__panels {
  background: var(--surface-raised);
  border: 1px solid var(--on-dark-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.tabs__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .tabs__panel { grid-template-columns: 1fr 1fr; align-items: center; }
}

.tabs__panel[hidden] { display: none; }

.tabs__panel-text { display: flex; flex-direction: column; gap: var(--space-3); }

.tabs__panel-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.tabs__panel-description {
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
}

.tabs__panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: var(--space-2);
}

.tabs__panel-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text-body);
}

.tabs__panel-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.25rem;
  background-color: var(--color-white);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.tabs__panel-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

.tabs__panel-logos img,
.tabs__panel-logos svg {
  height: 28px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(20%);
  transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.tabs__panel-logos img:hover,
.tabs__panel-logos svg:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.tabs__panel-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--surface-card-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs__panel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Bei portrait-Phone-Mockups: contain + dunkle Box, damit Frame ganz sichtbar bleibt */
.tabs__panel-image--phone {
  aspect-ratio: 4 / 3;
  background: var(--color-gray-50);
  padding: var(--space-3);
}

.tabs__panel-image--phone img {
  width: auto;
  max-width: 60%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   6. PROCESS — Numbered Grid (3-Step horizontal mit Linien)
   ============================================================ */

.process {
  padding-block: var(--section-padding-spacious);
  background: transparent;
}

.process__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.process__header { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--space-12); }

.process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
}

@media (min-width: 768px) {
  .process__steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

  /* Verbindungslinien zwischen Steps */
  .process__steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      var(--border-color-strong) 0,
      var(--border-color-strong) 6px,
      transparent 6px,
      transparent 12px
    );
    z-index: 0;
  }
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  position: relative;
  z-index: 1;
}

.process-step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 0 0 6px var(--surface-page);
  flex-shrink: 0;
}

.process-step__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.process-step__text {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: var(--line-height-snug);
  max-width: 320px;
}

/* ============================================================
   7. CONTENT IMAGE — Alternating (Bild ↔ Text)
   ============================================================ */

.content-image {
  padding-block: var(--section-padding-y);
}

.content-image__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.content-image__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.content-image__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 901px) {
  .content-image__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  .content-image__row--reverse .content-image__media {
    grid-column: 2;
    grid-row: 1;
  }
  .content-image__row--reverse .content-image__text {
    grid-column: 1;
    grid-row: 1;
  }
}

.content-image__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.content-image__media img,
.content-image__media picture {
  display: block;
  width: 100%;
  height: auto;
}

.content-image__text { display: flex; flex-direction: column; gap: var(--space-4); }

.content-image__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  line-height: var(--line-height-heading);
}

.content-image__lead { font-size: var(--font-size-lg); color: var(--color-text-body); }

.content-image__list { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-2); }

.content-image__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-body);
}

.content-image__list li::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><circle cx='12' cy='12' r='12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><circle cx='12' cy='12' r='12'/></svg>") no-repeat center / contain;
  background: var(--color-white);
}

/* ============================================================
   7b. FLOW TILES — 3-Spalter Live-Beispiel (Discovery → Checkout → Rechnung)
   ============================================================ */

.flow-tiles {
  padding-block: var(--section-padding-y);
}

.flow-tiles__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.flow-tiles__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.flow-tiles__header h2 { margin-bottom: var(--space-3); }
.flow-tiles__lead { color: var(--color-text-body); font-size: var(--font-size-lg); }

.flow-tiles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .flow-tiles__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.flow-tile {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.flow-tile:hover {
  border-color: var(--color-magenta-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.flow-tile__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #fff5fa 0%, #ffe5f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4) 0;
  overflow: hidden;
}

.flow-tile__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.flow-tile__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.flow-tile__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.flow-tile__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-block: var(--space-1) var(--space-1);
}

.flow-tile__text {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: var(--line-height-snug);
}

/* ============================================================
   8. LOGO MARQUEE — Infinite-Scroll mit Edge-Fade
   ============================================================ */

.marquee {
  padding-block: clamp(2rem, 1.5rem + 1.5vw, 4rem);
  background: var(--color-white);
  border-block: 1px solid var(--color-gray-100);
  overflow: hidden;
}

.marquee__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.marquee__header p {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.marquee__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Edge-Fade-Mask (links + rechts) */
  -webkit-mask: linear-gradient(90deg, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-12);
  animation: marquee-scroll 40s linear infinite;
}


@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__viewport { overflow-x: auto; }
}

.marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  opacity: 0.7;
  filter: grayscale(60%);
  transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.marquee__item:hover { opacity: 1; filter: grayscale(0%); }

.marquee__item img,
.marquee__item svg {
  height: 100%;
  width: auto;
  max-width: 160px;
  display: block;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__foot {
  text-align: center;
  margin-top: var(--space-6);
  padding-inline: var(--section-padding-x);
  font-size: var(--font-size-eyebrow);
  color: var(--color-text-muted);
}

/* ============================================================
   MOBILE UX-REFINEMENTS (Partner-LP + Greyt-Variante)
   - Visual zuerst: Bild über Text in allen Bild-Text-Sektionen
   - Tabs-Nav horizontal wischbar statt umbrechen (6 Segmente)
   - Bild + Text als Paar erkennbar: enger Spalten-Gap, klare Sektion-Trennung
   ============================================================ */
@media (max-width: 900px) {
  /* Bild zuerst: Hero und Content-Image-Reihen (Asset, Proof, Was-Greyt-macht) */
  .hero--split__media { order: -1; }
  .content-image__media { order: -1; }
  /* Bild und Text gehören zusammen: engerer Gap innerhalb der Spalte,
     die Trennung zur nächsten Reihe/Sektion kommt aus der größeren row+row-Marge. */
  .content-image__row { gap: var(--space-4); }

  /* Tabs-Nav: eine Zeile, horizontal wischbar; erste Kachel bündig zum Panel
     (innerhalb des Container-Paddings, kein Full-Bleed -> kein Scroll-Versatz). */
  .tabs__nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs__nav::-webkit-scrollbar { display: none; }
  .tabs__tab { flex: 0 0 auto; }
}

@media (max-width: 767px) {
  /* Tab-Panel ist einspaltig: Bild zuerst */
  .tabs__panel-image { order: -1; }
}

/* ============================================================
   9. COMPARISON TABLE — DCB vs. Kreditkarte vs. PayPal
   ============================================================ */

.comparison {
  position: relative;
  z-index: 2;
  padding-block: var(--section-padding-y);
}

.comparison__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.comparison__header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.comparison__table-wrap {
  overflow-x: visible;
  overflow-y: visible;
  padding-block: 28px; /* Raum für die überstehende Spotlight-Spalte */
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  /* Mobil: horizontale Scrollbarkeit für die Tabelle erhalten */
  .comparison__table-wrap { overflow-x: auto; }
}

.comparison__canvas {
  position: relative;
  min-width: 100%;
  width: max-content;
  background: var(--surface-light);
  border-radius: var(--radius-xl);
  /* Border via box-shadow statt border – sauberer auf gerundeten Ecken (kein Subpixel-Artefakt) */
  box-shadow: 0 0 0 1px var(--color-gray-200);
  /* Weiß-Insel: Text-Tokens lokal auf Light-Werte scopen */
  --color-text-dark: var(--on-light-heading);
  --color-text-body: var(--on-light-body);
  --color-text-muted: var(--on-light-muted);
  color: var(--on-light-body);
}

/* Floating „Per Handyrechnung"-Spalte, von JS positioniert */
/* Animierbarer Winkel für den Kometen-Schweif */
@property --comet-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.comparison__spotlight {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  padding: 0;
  border-radius: 18px 18px clamp(40px, 6vw, 72px) clamp(40px, 6vw, 72px);
  /* Kein weißer Default-Border (würde gegen den weißen Page-Hintergrund wie eine
     Lücke wirken). Stattdessen ein dezenter schwarzer Box-Shadow für saubere
     Tiefe um die Spalte. Komet-Trail läuft direkt am Magenta-Edge. */
  background: transparent;
  box-shadow: 0 0 32px 2px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.comparison.is-spotlight .comparison__spotlight { opacity: 1; }
.comparison__spotlight-inner {
  display: block;
  width: 100%;
  height: 100%;
  /* Voller Magenta-Farbton, 80% Opacity — Glow tritt durch die Transparenz stärker hervor */
  background: rgba(226, 0, 116, 0.8);
  border-radius: inherit;
}
/* Komet-Streifen: 4px-Ring (per Border-Mask), stärkerer Glow mit weißem Hot-Spot-Kern
   wie ein Lichtschwert / Webflow-Loader-Effekt */
.comparison__spotlight-comet {
  --comet-angle: 0deg;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  background:
    conic-gradient(
      from var(--comet-angle),
      transparent 0%,
      transparent 46%,
      rgba(255, 0, 122, 0.12) 54%,
      rgba(255, 0, 122, 0.35) 64%,
      rgba(255, 0, 122, 0.75) 74%,
      rgba(255, 51, 153, 1) 82%,
      rgba(255, 153, 204, 1) 86%,
      rgba(255, 230, 240, 1) 88.5%,
      #ffffff 89.5%,
      rgba(255, 230, 240, 1) 90.5%,
      rgba(255, 153, 204, 1) 92%,
      rgba(255, 102, 184, 0.85) 94%,
      rgba(255, 0, 122, 0.35) 97%,
      transparent 100%
    );
  /* Border-Mask-Trick: nur der 4px-Ring (padding) bleibt sichtbar, Innenfläche transparent */
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
          mask-composite: exclude;
  /* Stärkerer Glow ausschließlich entlang des sichtbaren Komet-Streifens —
     vierstufig mit weißem Kern für Lichtschwert-Look */
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 8px rgba(255, 51, 153, 1))
    drop-shadow(0 0 20px rgba(255, 0, 122, 0.9))
    drop-shadow(0 0 40px rgba(255, 26, 140, 0.6));
  animation: comet-spin 5.5s linear infinite;
}
@keyframes comet-spin {
  to { --comet-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .comparison__spotlight-comet { animation: none; opacity: 0; }
}

.comparison__table {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: transparent;
}

.comparison__table th,
.comparison__table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-block-end: 1px solid var(--color-gray-100);
  font-size: var(--font-size-base);
  vertical-align: middle;
}

.comparison__table thead th {
  background: var(--color-gray-50);
  color: var(--color-text-muted);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

/* Linke Beschriftungsspalte scrollt mit (kein Sticky):
   gesamte Tabelle wird horizontal frei scrollbar. */
.comparison__table thead th:first-child,
.comparison__table th[scope="row"] {
  background: var(--color-white);
}

.comparison__table th[scope="col"].is-highlight {
  background: var(--color-magenta);
  color: var(--color-white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.comparison__table th[scope="row"] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

.comparison__table td.is-highlight {
  background: var(--color-magenta-light);
  font-weight: var(--font-weight-semibold);
  color: var(--color-magenta-darker);
}

.comparison__table tr:last-child td,
.comparison__table tr:last-child th { border-block-end: none; }

/* Spotlight-Modus: Spalte transparent, Inhalt weiß auf der Pink-Fläche */
.comparison.is-spotlight .comparison__table th[scope="col"].is-highlight,
.comparison.is-spotlight .comparison__table td.is-highlight {
  background: transparent;
  color: var(--color-white);
  border-radius: 0;
  border-block-end-color: rgba(255,255,255,0.18);
}
.comparison.is-spotlight .comparison__table th[scope="col"].is-highlight {
  color: var(--color-white);
}
.comparison.is-spotlight .comparison__table tr:last-child td.is-highlight { border-block-end: none; }
.comparison.is-spotlight .comparison__table td.is-highlight .comparison__check,
.comparison.is-spotlight .comparison__table td.is-highlight .comparison__cross {
  background: rgba(255,255,255,0.22);
  color: var(--color-white);
}

/* Border-Radius an den Eck-Zellen, sodass der Canvas-Radius sichtbar wird */
.comparison__table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-xl); }
.comparison__table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-xl); }
.comparison__table tbody tr:last-child th:first-child { border-bottom-left-radius: var(--radius-xl); }
.comparison__table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-xl); }

/* Desktop: Nicht-Highlight-Zellen transparent, damit der Komet-Glow seitlich
   nicht von Zellen-Hintergründen abgedeckt wird */
@media (min-width: 769px) {
  .comparison.is-spotlight .comparison__table thead th:not(.is-highlight),
  .comparison.is-spotlight .comparison__table th[scope="row"],
  .comparison.is-spotlight .comparison__table td:not(.is-highlight) {
    background: transparent;
  }
}

.comparison__check, .comparison__cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.comparison__check { background: var(--color-success-bg); color: var(--color-success); }
.comparison__cross { background: var(--color-error-bg); color: var(--color-error); }

.comparison__check svg, .comparison__cross svg { width: 16px; height: 16px; }

/* ============================================================
   10. FAQ — 2-Col Bordered Accordion
   ============================================================ */

.faq {
  padding-block: var(--section-padding-spacious);
  background: transparent;
}

.faq--plain { background: var(--color-white); }

.faq__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.faq__header { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--space-10); }

/* 2 Spalten als getrennte Flex-Container — beim Öffnen links wächst NUR die linke
   Spalte, rechts bleibt komplett unberührt. Echte Entkopplung. */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
}
@media (min-width: 901px) {
  .faq__grid--2col { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); }
}
.faq__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: start;
}
.faq__item { display: block; }

.faq__item {
  background: var(--surface-raised);
  border: 1px solid var(--on-dark-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-slow), box-shadow var(--transition-fast);
}

.faq__item:hover { border-color: var(--border-color-strong); }

.faq__item[open] {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: var(--shadow-sm);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  font-size: var(--font-size-base);
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-white);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>") no-repeat center / contain;
  transition: transform var(--transition-fast);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

/* Smooth Akkordeon via max-height — JS animiert mit konkretem scrollHeight-Wert,
   weil <details> native CSS-Transitions auf Open/Close nicht zuverlässig zulässt.
   Default = 0, [open] ohne inline-style = none (statisches Endergebnis offen).
   Während der Animation hat das inline maxHeight Vorrang. */
.faq__item-body {
  display: block;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: max-height;
}
.faq__item[open] .faq__item-body { max-height: none; }
.faq__item-body-inner {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
}

.faq__cta {
  margin-block-start: var(--space-8);
  text-align: center;
}

/* ============================================================
   11. CTA BANNER — Subtle (Always-On Hinweis) + Card-Split
   ============================================================ */

.cta-banner {
  padding-block: var(--section-padding-y);
  position: relative;
  overflow: hidden;
}

/* Das EINE dunkle Fokus-Band pro Seite (Hugo/Webflow-Pattern) */
.cta-banner--subtle {
  background: var(--gradient-dark);
  color: var(--color-white);
  padding-block: var(--section-padding-spacious);
}
.cta-banner--subtle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glow-magenta-strong);
  pointer-events: none;
  z-index: 0;
}
.cta-banner--subtle .cta-banner__title { color: var(--color-white); }
.cta-banner--subtle .cta-banner__text { color: rgba(255,255,255,0.78); }
.cta-banner--subtle .cta-banner__eyebrow { color: var(--color-white); }

.cta-banner__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
  text-align: center;
}

.cta-banner__eyebrow { color: var(--color-magenta); margin-bottom: var(--space-3); }

.cta-banner__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-ultra);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-dark);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
}

.cta-banner__title .accent { color: var(--color-magenta); }

.cta-banner__text { font-size: var(--font-size-lg); color: var(--color-text-body); margin-bottom: var(--space-6); }

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
/* Mobile: beide CTA-Buttons nebeneinander, füllen zusammen die volle Breite */
@media (max-width: 700px) {
  .cta-banner__actions { flex-wrap: nowrap; width: 100%; }
  .cta-banner__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.7rem; font-size: 0.85rem; justify-content: center; text-align: center; white-space: nowrap; }
}

/* CTA Card-Split (Support) – ruhige Neutral-Sektion, kein Pink */
.cta-banner--card-split { background: var(--color-bg-soft); }
.cta-banner--card-split .cta-banner__title { color: var(--color-text-dark); }
.cta-banner--card-split .cta-banner__text { color: var(--color-text-body); }

.cta-banner--card-split .cta-banner__container {
  max-width: var(--container-max);
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

@media (min-width: 901px) {
  .cta-banner--card-split .cta-banner__container {
    grid-template-columns: 1.2fr 1fr;
    padding: var(--space-12);
  }
}

.cta-banner__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--color-gray-100);
}

.cta-banner__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 25%;
}

.cta-banner--card-split .cta-banner__actions { justify-content: flex-start; }

/* ============================================================
   12. STICKY MOBILE CTA — Mobile-only, schwebend
   ============================================================ */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  border-block-start: 1px solid var(--on-dark-border);
  transform: translateY(0);
  transition: transform var(--transition-base);
}

.sticky-cta[aria-hidden="true"] { transform: translateY(120%); pointer-events: none; }

.sticky-cta .btn { width: 100%; }

@media (min-width: 768px) {
  /* Sticky-CTA nur Mobile/Tablet */
  .sticky-cta { display: none; }
}

/* ============================================================
   13. FOOTER — Minimaler Multi-Spalten-Footer
   ============================================================ */

.site-footer {
  padding-block: var(--space-12) var(--space-8);
  background: var(--surface-deep);
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
}

.site-footer__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block-end: var(--space-8);
  border-block-end: 1px solid rgba(255,255,255,0.08);
}

@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  /* Funnel-Footer: nur Brand + Hilfe → zwei Spalten */
  .site-footer--funnel .site-footer__top { grid-template-columns: 2fr 1fr; }
}

/* Funnel-Header (Streaming/App-Store): keine Nav, CTA bleibt auch mobil sichtbar */
@media (max-width: 900px) {
  .site-header--funnel .site-header__cta { display: inline-flex; }
}
/* Ohne Nav hat ein sticky Header keinen Wert -> statisch, scrollt mit weg */
.site-header--funnel { position: static; }

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__brand p { color: var(--color-gray-400); max-width: 320px; line-height: var(--line-height-snug); }

.site-footer__col h4 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-semibold);
}

.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__col a {
  color: var(--color-gray-300);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer__col a:hover { color: var(--color-white); }

.site-footer__bottom {
  padding-block-start: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__bottom-links a {
  color: var(--color-gray-400);
  text-decoration: none;
}

.site-footer__bottom-links a:hover { color: var(--color-white); }

.site-footer__cobrand-note {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-gray-900);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  line-height: var(--line-height-snug);
}

/* ============================================================
   ELEVATED EDITORIAL COMPONENTS (append-only, non-breaking)
   ------------------------------------------------------------
   Best-in-Class B2C. Verwendet Tokens/Utilities aus base.css
   Sektion 9. Bestehende Komponenten bleiben unverändert.
   ============================================================ */

/* --- Editorialer Section-Header (Eyebrow + Display + knappe Lede) --- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-editorial);
}
.section-head--center { align-items: center; text-align: center; }
.section-head__title {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); /* 30–48px */
  line-height: 1.1;
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-ultra);
  color: var(--color-text-dark);
  text-wrap: balance;
  max-width: 22ch;
}
.section-head--center .section-head__title { margin-inline: auto; }
.section-head--wide .section-head__title { max-width: 30ch; }
.section-head__title .accent { color: var(--color-magenta); }
.section-head .lede { margin: 0; max-width: 46ch; }
.section-head--center .lede { margin-inline: auto; }

/* --- Editorialer Hero --- */
.hero--editorial {
  position: relative;
  padding-block: var(--section-padding-spacious);
  overflow: clip;
}
.hero--editorial .hero__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-editorial);
  align-items: center;
}
@media (min-width: 901px) {
  .hero--editorial .hero__container { grid-template-columns: 1.05fr 0.95fr; }
}
.hero--editorial .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-magenta);
  margin-bottom: var(--space-5);
}
.hero--editorial .hero__eyebrow::before {
  content: "";
  width: 2em;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.hero--editorial .hero__title {
  font-size: var(--font-size-display-xl);
  line-height: 0.98;
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-ultra);
  color: var(--color-text-dark);
  text-wrap: balance;
}
.hero--editorial .hero__title .accent { color: var(--color-magenta); }
.hero--editorial .hero__subtitle {
  margin-top: var(--space-6);
  font-size: var(--font-size-xl);
  line-height: 1.4;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  max-width: 46ch;
  text-wrap: pretty;
}
.hero--editorial .hero__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.hero--editorial .hero__visual {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 5;
}
.hero--editorial .hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  pointer-events: none;
}
@media (min-width: 901px) { .hero--editorial .hero__visual { aspect-ratio: 5 / 6; } }
.hero--editorial .hero__visual img,
.hero--editorial .hero__visual picture { width: 100%; height: 100%; object-fit: cover; }
.hero--editorial.hero--dark { background: var(--gradient-dark); color: var(--color-white); }
.hero--editorial.hero--dark .hero__title { color: var(--color-white); }
.hero--editorial.hero--dark .hero__subtitle { color: rgba(255,255,255,0.74); }
.hero--editorial.hero--dark .btn--light { background: var(--color-white); color: var(--color-text-dark); }

/* Pay-Moment-Stoerer auf dem Hero-Visual */
.hero--editorial .hero__stoerer {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.75rem);
  bottom: clamp(0.75rem, 2vw, 1.75rem);
  width: clamp(86px, 9vw, 132px);
  aspect-ratio: 1;
  padding: 0.5rem;
  transform: rotate(-7deg);
}

/* ============================================================
   HERO --lead : full-bleed Editorial-Hero (Revolut/Decagon-Stil)
   Bildbühne + Overlay-Copy unten links + Vorteils-Leiste (Wise)
   ============================================================ */
.hero--lead {
  display: flex;
  flex-direction: column;
  background: #110d18;
  padding-block: 0;
}
.hero--lead .hero__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(500px, 78vh, 800px);
  overflow: clip;
  isolation: isolate;
}
.hero--lead .hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero--lead .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 38%;
}
.hero--lead .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(108deg, rgba(10,7,15,0.90) 0%, rgba(10,7,15,0.62) 34%, rgba(10,7,15,0.16) 66%, rgba(10,7,15,0) 100%),
    linear-gradient(0deg, rgba(10,7,15,0.58) 0%, rgba(10,7,15,0) 46%),
    radial-gradient(80% 70% at 14% 96%, rgba(var(--color-magenta-rgb),0.20) 0%, rgba(var(--color-magenta-rgb),0) 60%);
}
.hero--lead .hero__container {
  width: 100%;
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
}
.hero--lead .hero__copy { max-width: 40rem; }
.hero--lead .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-magenta-on-dark);
  margin-bottom: var(--space-5);
}
.hero--lead .hero__eyebrow::before {
  content: "";
  width: 2.25em;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.hero--lead .hero__title {
  font-size: var(--font-size-display-xl);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-wrap: balance;
}
.hero--lead .hero__title .accent { color: var(--color-white); }
.hero--lead .hero__subtitle {
  margin-top: var(--space-6);
  font-size: var(--font-size-xl);
  line-height: 1.42;
  font-weight: var(--font-weight-regular);
  color: rgba(255,255,255,0.82);
  max-width: 38ch;
  text-wrap: pretty;
}
.hero--lead .hero__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.hero--lead .hero__actions .btn svg { width: 1.1em; height: 1.1em; }

/* Vorteils-Leiste direkt unter dem Bild (Wise-Stil) */
.hero--lead .hero__bar {
  background: var(--color-white);
  border-block-end: 1px solid var(--color-gray-200);
}
.hero--lead .hero__bar-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: clamp(1.25rem, 3vw, 2rem);
}
.hero__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.hero__benefit:not(:last-child) { border-block-end: 1px solid var(--color-gray-200); }
.hero__benefit svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-magenta);
}
.hero__benefit b {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-dark);
  letter-spacing: -0.01em;
}
.hero__benefit span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--color-text-body);
}
@media (min-width: 768px) {
  .hero--lead .hero__bar-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
    padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  }
  .hero__benefit { padding-block: var(--space-2); }
  .hero__benefit:not(:last-child) { border-block-end: 0; }
  .hero--lead .hero__bar-inner .hero__benefit:not(:first-child) {
    border-inline-start: 1px solid var(--color-gray-200);
    padding-inline-start: clamp(1.5rem, 3.5vw, 3rem);
  }
}
@media (min-width: 901px) {
  .hero--lead .hero__media img { object-position: 60% 36%; }
  .hero--lead .hero__copy { max-width: 44rem; }
}

/* Sekundär-CTA auf dunklem Bild */
.btn--ghost-light {
  background: rgba(255,255,255,0.04);
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(2px);
}
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  background: rgba(255,255,255,0.14);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* ============================================================
   HERO --split : Variante B – grauer CI-Container, Copy links,
   rotierende Key-Visuals rechts, überlappende Frosted-Bar
   ============================================================ */
/* Full-bleed: Sektion weiß, das GRAU sitzt nur auf dem Panel und
   endet exakt an dessen Unterkante – damit die Bar 50/50 grau/weiß
   überlappen kann. Startet direkt unter dem Header, keine Rundung. */
.hero--split {
  background: var(--surface-page);
  padding-block: 0;
  overflow: visible;          /* globales .hero overflow:hidden aufheben – sonst Bar/Chip-Schatten geklippt */
}
.hero--split__wrap {
  position: relative;
  /* Raum für die untere Hälfte der überlappenden Bar (auf Weiß) */
  padding-bottom: clamp(2.5rem, 3.6vw, 3.5rem);
}
.hero--split__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface-deep);
  isolation: isolate;
}
@media (min-width: 901px) {
  /* exakt 50/50: Bildspalte endet genau in der Viewport-Mitte */
  .hero--split__panel { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.hero--split__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* linke Kante exakt auf Site-Container ausgerichtet (wie Header) */
  padding-inline-start: max(var(--section-padding-x), calc((100vw - var(--container-max)) / 2 + var(--section-padding-x)));
  padding-inline-end: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.hero--split__copy .hero__eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: var(--space-4);
}
.hero--split__copy .hero__title {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-semibold);
  color: var(--on-dark-heading);
  text-wrap: balance;
}
/* Akzent-Wort in der Headline: dezent abgesetzt, monochrom (Greyt) */
.hero--split__copy .hero__title .accent { color: var(--on-dark-muted); }
.hero--split__copy .hero__subtitle {
  margin: var(--space-6) 0 0;          /* margin-inline:0 → linksbündig zur Headline */
  font-size: var(--font-size-base);
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  max-width: 46ch;
}
/* Checks: inline in einer Reihe, linksbündig zur Headline, größer */
.hero__checks {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-3) var(--space-6);
}
.hero__checks li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  white-space: nowrap;
}
.hero__checks svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-white);
}
.hero--split__copy .hero__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.hero--split__copy .hero__actions .btn svg { width: 1.1em; height: 1.1em; }
/* Mobile: beide Hero-CTAs nebeneinander, füllen zusammen die volle Breite */
@media (max-width: 700px) {
  .hero--split__copy .hero__actions { flex-wrap: nowrap; gap: var(--space-2); width: 100%; align-self: stretch; }
  .hero--split__copy .hero__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.6rem; font-size: 0.8rem; letter-spacing: 0; justify-content: center; text-align: center; white-space: nowrap; }
  .hero--split__copy .hero__actions .btn svg { display: none; }
}

/* Cashback-Sticker im Hero-Bild-Layer (R1-C-4, iteriert):
   runder „Komoot-Style"-Störer oben links auf dem Bild,
   leicht überstehend zum hellen Hintergrund der linken Spalte. */
.hero__sticker {
  position: absolute;
  z-index: 4;
  top: clamp(1.2rem, 3vw, 2.4rem);
  left: clamp(-1.5rem, -1.5vw, -0.75rem);
  width: clamp(120px, 13vw, 168px);
  height: clamp(120px, 13vw, 168px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  background: var(--color-magenta);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  box-shadow: 0 12px 32px rgba(226, 0, 116, 0.32), 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: rotate(-7deg);
  transition: transform 0.25s var(--ease-editorial), box-shadow 0.25s var(--ease-editorial);
  cursor: pointer;
}
.hero__sticker:hover,
.hero__sticker:focus-visible {
  transform: rotate(-7deg) scale(1.05);
  box-shadow: 0 16px 40px rgba(226, 0, 116, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
}
.hero__sticker-amount {
  font-size: clamp(0.7rem, 1vw, 0.82rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero__sticker-amount b {
  display: block;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 0.15rem;
}
.hero__sticker-label {
  font-size: clamp(0.62rem, 0.8vw, 0.72rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-top: 0.35rem;
  padding: 0 0.4rem;
}
@media (max-width: 900px) {
  .hero__sticker {
    top: 0.6rem;
    left: 0.6rem;
    width: 110px;
    height: 110px;
    transform: rotate(-6deg);
  }
  .hero__sticker:hover,
  .hero__sticker:focus-visible {
    transform: rotate(-6deg) scale(1.05);
  }
}
@media (max-width: 480px) {
  .hero__sticker {
    width: 96px;
    height: 96px;
  }
  .hero__sticker-amount b {
    font-size: 1.3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sticker,
  .hero__sticker:hover,
  .hero__sticker:focus-visible {
    transition: none;
  }
}

/* Rechte Seite: Key-Visual randlos bis zur rechten Viewport-Kante,
   volle Höhe, Wechsel als horizontaler Wipe von rechts */
.hero--split__media {
  position: relative;
  /* overflow ist visible, weil der .hero__sticker (R1-C-4) leicht
     über die linke Bild-Kante in die helle Copy-Spalte ragt.
     Die Slide-Wipe-Animation nutzt clip-path, nicht overflow,
     deswegen ist das visuell sicher. */
  overflow: visible;
  min-height: clamp(240px, 40vw, 420px);
  background: var(--surface-raised);
}
.hero--split__media > .hero--split__slide {
  /* slides müssen ihren eigenen Bild-Bereich clippen, weil
     der media-Container jetzt overflow:visible hat */
  clip-path: inset(0 0 0 0);
}
@media (min-width: 901px) {
  .hero--split__media { min-height: 100%; }
}
.hero--split__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  opacity: 0;
}
.hero--split__slide.is-active {
  opacity: 1;
  z-index: 1;
  clip-path: inset(0 0 0 0);
}
/* Neues Bild „überschwemmt" von rechts (Wipe-Parallax) */
.hero--split__slide.is-entering {
  opacity: 1;
  z-index: 3;
  clip-path: inset(0 0 0 100%);
  transform: scale(1.06);
}
.hero--split__slide.is-in {
  transition: clip-path 0.95s cubic-bezier(0.76, 0, 0.24, 1),
              transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .hero--split__slide.is-in { transition: opacity 0.2s linear; }
  .hero--split__slide.is-entering { transform: none; }
}

/* Überlappende Frosted-Glass-Bar: fit-content, 50% auf Grau / 50% auf
   Weiß. margin-top zieht die obere Hälfte über die Panel-Unterkante,
   die wrap-padding-bottom trägt die untere Hälfte auf Weiß. */
.hero__bar--float {
  position: relative;
  z-index: 3;
  width: calc(100% - 2 * var(--section-padding-x));
  max-width: var(--container-max);
  margin-inline: auto;
  /* tiefer gesetzt: mehr Abstand zu den CTA-Buttons */
  margin-top: clamp(-2.25rem, -2.4vw, -1.75rem);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.75rem, 3vw, 3rem);
  background: transparent;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.hero__bar--float .hero__benefit { flex: 1 1 0; min-width: 0; }
/* Frost-Layer als ::before, damit backdrop-filter NICHT die Chips
   (deren box-shadow) hart an der Bar-Rundung beschneidet */
.hero__bar--float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
.hero__bar--float .hero__benefit {
  padding-block: 0;
  border: 0;
  gap: var(--space-4);
  align-items: center;
}
.hero__bar--float .hero__benefit:not(:first-child) {
  border-inline-start: 1px solid var(--color-gray-200);
  padding-inline-start: clamp(1.5rem, 3vw, 3rem);
}
/* Icon-Chip: quadratisch, leicht gerundet, WEISSER Grund, PINK-Icon,
   kein Border, weicher neutraler Schatten (nicht beschnitten) */
.hero__bar--float .hero__benefit svg {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: 0 6px 18px rgba(16, 12, 24, 0.12);
  color: var(--color-magenta);
  overflow: visible;
}
@media (max-width: 760px) {
  .hero__bar--float {
    width: auto;
    max-width: none;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
  }
  .hero__bar--float .hero__benefit:not(:first-child) {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--color-gray-200);
    padding-block-start: var(--space-4);
  }
}

/* ============================================================
   HOWTO : Sticky-Scrollytelling – Phone links klebt, 3 Steps
   rechts scrollen, Screen wechselt pro Step. Mobile: gestapelt.
   ============================================================ */
.howto {
  background: var(--color-white);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  overflow: visible;
}
.howto__head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.howto__head .eyebrow { justify-content: center; }
/* Titel hat globale max-width + margin:0 -> Box selbst zentrieren,
   sonst zentriert der Text nur innerhalb einer links sitzenden Box */
.howto__head .section-head__title,
.howto__head .eyebrow { margin-inline: auto; }
.howto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 901px) {
  .howto__grid {
    grid-template-columns: 0.82fr 1fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }
}

/* Linke Spalte: sticky Phone */
.howto__media { display: none; }
@media (min-width: 901px) {
  /* Sticky-Container: flacher Cash-App-Grauton, abgerundet,
     KEIN Border, KEIN Box-Shadow, KEIN Sheen */
  .howto__media {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: clamp(80px, 11vh, 128px);
    align-self: start;
    padding: clamp(1.5rem, 2.6vw, 2.75rem);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    /* exakter Cash-App-Grauton von cash.app/bank: rgb(246,246,246) */
    background: #f6f6f6;
  }
  /* Phone-Container: feste quadratische Größe, damit der graue
     Sticky-Container bei jedem Schritt identisch hoch und breit bleibt.
     Portrait-Phones (Schritte 2-4) sitzen vertikal voll mit Whitespace
     links/rechts, Landscape-Duo (Schritt 1) horizontal voll mit
     Whitespace oben/unten. Kein dynamischer Aspect-Ratio-Switch mehr. */
  .howto__phone {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    height: min(60vh, 520px);
    aspect-ratio: 1 / 1;
  }
  .howto__screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.55s var(--ease-editorial);
  }
  .howto__screen.is-active { opacity: 1; }
  /* Duo-Layer: landscape composite mit iOS + Android nebeneinander.
     Wird im quadratischen Container automatisch zentriert dargestellt. */
  .howto__screen--duo {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .howto__screen--duo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}

/* Rechte Spalte: Steps */
.howto__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.howto__step-img {
  display: block;
  width: min(62%, 300px);
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-5);
}
/* Setup-Schritt (landscape iOS+Android-Duo) braucht mehr Breite auf Mobile */
.howto__step-img--landscape {
  width: min(96%, 480px);
  box-shadow: 0 12px 32px rgba(16, 12, 24, 0.08);
  background: #f6f6f6;
  padding: 1rem 0.6rem;
}
/* Nummer inline mit dem Step-Titel (eine Reihe, nicht übereinander) */
.howto__step-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.howto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--pill);
  background: var(--color-magenta);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}
.howto__step-title {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
  margin: 0;
}
.howto__step-text {
  font-size: var(--font-size-lg);
  line-height: 1.55;
  color: var(--color-text-body);
  max-width: 46ch;
}
@media (min-width: 901px) {
  /* Step-Img nur mobil – desktop zeigt das sticky Phone */
  .howto__step-img { display: none; }
  .howto__step {
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.32;
    transition: opacity 0.4s var(--ease-editorial);
  }
  .howto__step.is-active { opacity: 1; }
  /* Alle Steps gleich hoch (58vh), damit der letzte Step auch
     in die Viewport-Mitte scrollen kann. Der vorherige
     `last-child { min-height: 46vh }`-Override hat verhindert,
     dass Step 4 voll aktiv wird, weil sein step-head nicht weit
     genug nach oben kommt. */
}
@media (max-width: 900px) {
  .howto__step { padding-block: var(--space-6); }
  .howto__step + .howto__step { border-top: 1px solid var(--color-gray-200); padding-top: var(--space-10); }
}
@media (prefers-reduced-motion: reduce) {
  .howto__screen { transition: none; }
  .howto__step { transition: none; opacity: 1; }
}

/* ============================================================
   BENTO : „Warum Magenta Pay" – full-bleed Grau-Band, nur oben
   gerundet. Grid 60/40 + 3x33 (quadratisch), echte Partner-Logos.
   ============================================================ */
.bento {
  background: var(--color-white);
  padding-top: clamp(2rem, 3vw, 4rem);
  padding-bottom: 0;
}
.bento__panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0 0;
  padding-block: clamp(2.5rem, 5vw, 5.5rem);
  background: #ececec;
  color: var(--color-text-dark);
}
.bento__head {
  max-width: 760px;
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.bento__eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-magenta-text);
  margin: 0 0 var(--space-4);
}
.bento__title {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0;
}
.bento__lead {
  margin: var(--space-4) 0 0;
  max-width: 56ch;
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: var(--color-text-body);
}
.bento__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
@media (min-width: 901px) {
  .bento__grid { grid-template-columns: repeat(12, 1fr); }
  .bento__card--wide { grid-column: span 7; }
  .bento__card--marquee { grid-column: span 5; }
  .bento__grid > .bento__card:nth-child(n+3) { grid-column: span 4; aspect-ratio: 1 / 1; }
  .bento__grid > .bento__card--bill,
  .bento__grid > .bento__card--trust { aspect-ratio: auto; }
  .bento__card--wide,
  .bento__card--marquee { min-height: clamp(420px, 34vw, 560px); }
}
/* Mid-Breakpoint: zwischen 901 und 1200 ist 1:1 zu eng für Trust/Stats/Bill-
   Cards — Inhalt wird unten abgeschnitten. Aspect-ratio lockern, Cards
   wachsen mit ihrem Content. */
@media (min-width: 901px) and (max-width: 1199px) {
  .bento__grid > .bento__card:nth-child(n+3) {
    aspect-ratio: auto;
    min-height: clamp(320px, 36vw, 420px);
  }
}

.bento__card {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 22px);
  min-height: 240px;
  display: flex;
}

/* Media-Karten: Bild full-bleed + Scrim + Text unten */
.bento__card--media .bento__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bento__card--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(7,5,11,0.88) 0%, rgba(7,5,11,0.42) 46%, rgba(7,5,11,0.04) 100%);
}
.bento__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.25rem, 2vw, 2rem);
}
.bento__card--media .bento__card-title { color: var(--color-white); }
.bento__card--media .bento__card-text { color: rgba(255,255,255,0.82); }
.bento__card-title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
  color: var(--color-text-dark);
  margin: 0;
}
.bento__card-text {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-body);
  max-width: 40ch;
}

/* Marquee-Karte: PINK Magenta-Band mit coolem Gradient */
.bento__card--marquee {
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--color-white);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(150deg, #ff1f93 0%, var(--color-magenta) 45%, #a8005a 100%);
}
.bento__card--marquee .bento__card-title { color: var(--color-white); }
.bento__card--marquee .bento__card-text {
  color: rgba(255,255,255,0.88);
  margin: var(--space-2) 0 var(--space-6);
}

/* Secure-Liste auf Bild (weiß auf Scrim) */
.bento__lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-magenta);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.bento__lock svg { width: 22px; height: 22px; }
.bento__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bento__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
}
.bento__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--color-magenta-on-dark);
}

/* Telekom-Logo-Chip im Overlay (pinkes Logo auf weißem Chip) */
.bento__logo {
  width: clamp(52px, 5.5vw, 68px);
  height: auto;
  padding: 8px;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(7,5,11,0.28);
  margin-bottom: var(--space-3);
}

/* Stat-Cycler: gläserne Chip, Zahlen wechseln diagonal */
.statcycle {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(76px, 8vw, 94px);
  margin-top: var(--space-4);
}
.statcycle__item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: clamp(0.85rem, 1.4vw, 1.1rem) clamp(1rem, 1.8vw, 1.4rem);
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  opacity: 0;
  transform: translate(18px, 14px) scale(0.98);
  transition: opacity 0.6s var(--ease-editorial), transform 0.6s var(--ease-editorial);
  pointer-events: none;
}
.statcycle__item.is-active {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.statcycle__item b {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-white);
}
.statcycle__item i {
  font-style: normal;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  color: rgba(255,255,255,0.82);
}
@media (prefers-reduced-motion: reduce) {
  .statcycle__item { transition: opacity 0.25s linear; transform: none; }
}

/* Logo-Wall (eigene Klassen, KEINE Kollision mit .marquee Legacy):
   gleichmäßige weiße Quadrat-Boxen auf Pink, endlos & ruckelfrei.
   Nahtlos durch feste Tile-Margin + 2x dupliziertem Inhalt -> -50%. */
.bento__card--marquee .bento__card-title { margin-bottom: var(--space-2); }
.lwall {
  --lwall-gap: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--lwall-gap);
  margin-top: var(--space-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* horizontal clippen (Marquee), aber vertikal sichtbar lassen, damit Tile-Schatten nicht abgeschnitten werden */
.lwall__row { overflow-x: clip; overflow-y: visible; }
.lwall__track {
  display: flex;
  width: max-content;
  animation: lwall-scroll 40s linear infinite;
  will-change: transform;
}
.lwall__row--rev .lwall__track { animation-direction: reverse; }
.lwall__row:nth-child(3) .lwall__track { animation-duration: 50s; }
@keyframes lwall-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.lwall__tile {
  flex: 0 0 auto;
  width: clamp(78px, 8.5vw, 104px);
  height: clamp(78px, 8.5vw, 104px);
  margin-inline-end: var(--lwall-gap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 18px;
}
.lwall__tile img {
  width: 68%;
  height: 56%;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .lwall__track { animation: none; flex-wrap: wrap; width: auto; }
  .lwall { -webkit-mask-image: none; mask-image: none; }
  .lwall__row { overflow: visible; }
}
/* App-/Game-Icon-Wand: echte App-Icons als volle, abgerundete Kacheln (kein weisser Tile-Hintergrund) */
.lwall--apps .lwall__tile { background: transparent; border-radius: 0; }
.lwall--apps .lwall__tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 22.5%; box-shadow: 0 6px 18px rgba(16,12,24,0.16); }

/* ============================================================
   CASES LOGO-WALL (B2B-Partner-LP): 3 Reihen auf dunklem Grund,
   App-Store-Logo-Stil (weisse Kacheln) gemischt mit Kategorie-Tags
   (Magenta-Icon + Label). Laeuft dauerhaft, kein Hover-Stopp.
   ============================================================ */
.logowall {
  padding-block: var(--section-padding-y);
  background: linear-gradient(160deg, var(--color-magenta) 0%, var(--color-magenta-dark) 100%);
  overflow: hidden;
}
.logowall__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-10);
  padding-inline: var(--section-padding-x);
}
.logowall__header .eyebrow { color: rgba(255, 255, 255, 0.85); }
.logowall__title {
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
}

/* Cases-Variante: auto-breite Kacheln (laengliche Logos bleiben laenglich),
   gemischt Logo-Kachel + Tag-Kachel, weisse Kacheln auf dunklem Grund. */
.lwall--cases { margin-top: 0; }
.lwall--cases .lwall__track { gap: 0; }
.lwall--cases .lwall__row:nth-child(2) .lwall__track { animation-duration: 46s; }
.lwall--cases .lwall__tile {
  width: auto;
  height: clamp(58px, 6vw, 74px);
  margin-inline-end: var(--space-4);
  padding-inline: clamp(1rem, 1.8vw, 1.6rem);
  gap: 0.6rem;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.lwall--cases .lwall__tile img {
  width: auto;
  height: clamp(28px, 2.8vw, 38px);
  max-width: 150px;
  object-fit: contain;
}
/* Tag-Kachel: Magenta-Icon (leicht abgerundet) + Label in der weissen Kachel */
.lwall__tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--color-magenta);
  color: var(--color-white);
  flex: 0 0 auto;
}
.lwall__tag-icon svg { width: 20px; height: 20px; }
.lwall__tag-label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  white-space: nowrap;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  padding-inline-end: 0.15rem;
}

/* Showcase-Karte „In Sekunden": Copy + Mockup-Collage */
.bento__card--show {
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--color-white);
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(var(--color-magenta-rgb),0.22) 0%, rgba(var(--color-magenta-rgb),0) 55%),
    var(--gradient-dark);
  overflow: hidden;
}
.bento__card--show .bento__card-title { color: var(--color-white); }
.bento__card--show .bento__card-text { color: rgba(255,255,255,0.80); }
/* Headline + Text zentriert, vertikal oben */
.show__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}
.show__copy .bento__card-text { max-width: 46ch; }
/* Abstand Text -> Mockups kompakt halten, nicht space-between */
.bento__card--show { justify-content: flex-start; }

/* ============================================================
   Pay-Stage: 3 echte iPhone-Mockups, gestaffelt von unten rein
   (Mitte zuerst, dann links, dann rechts), Animation einmalig
   per IntersectionObserver getriggert (siehe scripts.js).
   Phones bleiben permanent in Position, kein Loop. Mockups
   sind groß und unten überlappend, eng zueinander, knapper
   Abstand zum Headline-Block oben.
   ============================================================ */
/* Stage ist Flex-Item in der Card (column-Layout) und nimmt mit
   flex:1 1 auto den Rest des Card-Vertikal-Raums ein — dadurch
   sitzt der untere Stage-Rand IMMER bündig am Card-Bottom-Edge
   (über negativen margin-bottom out of padding gezogen). Top-Margin
   var(--space-2) + Card-Gap var(--space-4) = 24px Abstand zum Text,
   identisch zur Marquee-Card rechts. Side-Margin: -Card-Padding
   für Full-Bleed. min-height verhindert Kollaps wenn der Bento-Grid
   die Card eng macht. */
.pay-stage {
  position: relative;
  flex: 1 1 auto;
  /* min-height matched die Phone-Height (Phone-Width * 2.013 + Air),
     damit das Mid-Phone (translateY 0, bottom -20) NICHT oben abgeschnitten
     wird. Bei Phone-Width max 210 = Height 423, Stage min 440 = passt. */
  /* Stage-Min-Height match die Phone-Height bei Max-Width 210
     (210 * 2.013 = ~423 → Stage min 420 + 20px bottom-offset des
     Phones lässt Phone-Top ~17px Air haben, kein Clipping). */
  min-height: clamp(310px, 28vw, 403px);
  /* Top-Margin var(--space-4) + Card-Gap var(--space-4) = 32px,
     identisch zum gemessenen Abstand in der Marquee-Card rechts
     zwischen „direkt per Handyrechnung" und der ersten Logo-Reihe. */
  margin: var(--space-4) calc(-1 * clamp(1.75rem, 3vw, 2.75rem)) calc(-1 * clamp(1.75rem, 3vw, 2.75rem));
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 80%;
}
.pay-phone {
  position: absolute;
  /* Phone-Bottom-Edge sitzt direkt am Stage-Bottom (= Card-Bottom).
     Negativer Wert zieht das Phone leicht unter die Card-Edge, sodass
     der untere Phone-Frame minimal abschneidet (Stack-Look). */
  bottom: -20px;
  width: clamp(150px, 15vw, 210px);
  height: auto;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
  /* Initial: gone-state. Wird durch .pay-stage--play animiert. */
  transform: var(--gone-transform);
  opacity: 0;
  filter: blur(14px);
}
.pay-phone--mid {
  left: 50%;
  z-index: 3;
  --rest-transform: translateX(-50%) translateY(0);
  --gone-transform: translateX(-50%) translateY(140%);
}
.pay-phone--left {
  left: 25%;
  z-index: 2;
  --rest-transform: translateX(-50%) rotate(-10deg) translateY(12%);
  --gone-transform: translateX(-50%) rotate(-10deg) translateY(150%);
}
.pay-phone--right {
  left: 75%;
  z-index: 2;
  --rest-transform: translateX(-50%) rotate(10deg) translateY(12%);
  --gone-transform: translateX(-50%) rotate(10deg) translateY(150%);
}

/* Animation wird gestartet, sobald die Stage in den Viewport scrollt
   (JS toggelt .pay-stage--play). Mit fill-mode: forwards bleibt der
   End-Zustand permanent — kein Reset, kein Loop. */
.pay-stage--play .pay-phone {
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.pay-stage--play .pay-phone--mid {
  animation-name: pay-in-mid;
  animation-delay: 0s;
}
.pay-stage--play .pay-phone--left {
  animation-name: pay-in-left;
  animation-delay: 0.4s;
}
.pay-stage--play .pay-phone--right {
  animation-name: pay-in-right;
  animation-delay: 0.7s;
}

@keyframes pay-in-mid {
  from { transform: var(--gone-transform); opacity: 0; filter: blur(14px); }
  to   { transform: var(--rest-transform); opacity: 1; filter: blur(0); }
}
@keyframes pay-in-left {
  from { transform: var(--gone-transform); opacity: 0; filter: blur(14px); }
  to   { transform: var(--rest-transform); opacity: 1; filter: blur(0); }
}
@keyframes pay-in-right {
  from { transform: var(--gone-transform); opacity: 0; filter: blur(14px); }
  to   { transform: var(--rest-transform); opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pay-phone {
    transform: var(--rest-transform);
    opacity: 1;
    filter: none;
    animation: none !important;
  }
}
/* 3 Step-Mockups: volle Breite, aufgefächert, unten leicht angeschnitten */
.show__steps {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.75rem, 2.4vw, 2rem);
  width: 100%;
  margin-top: clamp(0.5rem, 1.6vw, 1.25rem);
  margin-bottom: clamp(-4.5rem, -7.5vw, -7.5rem);
}
.fstep {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.fstep--a { transform: rotate(-6deg) translateY(52px); }
.fstep--b { transform: translateY(26px); z-index: 2; }
.fstep--c { transform: rotate(6deg) translateY(52px); }
/* iPhone-Frame: Titanium-Look, abgerundeter Body, Side-Buttons als Pseudo-Elemente */
.fstep__phone {
  position: relative;
  width: clamp(108px, 13.8vw, 200px);
  aspect-ratio: 9 / 19.5;
  padding: clamp(5px, 0.6vw, 8px);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 12%),
    linear-gradient(155deg, #2c2733 0%, #14101b 48%, #1c1824 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 0 2.5px #0d0a13,
    0 22px 44px rgba(7,5,11,0.55),
    0 6px 14px rgba(7,5,11,0.32);
}
/* Power-Button rechts */
.fstep__phone::before {
  content: "";
  position: absolute;
  right: -1.5px;
  top: 32%;
  width: 2px;
  height: 14%;
  background: linear-gradient(90deg, #1a1620, #2a2330);
  border-radius: 1.5px;
}
/* Lautstärke-Tasten links */
.fstep__phone::after {
  content: "";
  position: absolute;
  left: -1.5px;
  top: 22%;
  width: 2px;
  height: 9%;
  background: linear-gradient(90deg, #2a2330, #1a1620);
  border-radius: 1.5px;
  box-shadow:
    0 calc(2vw + 14px) 0 0 #1d1825,
    0 calc(4.2vw + 30px) 0 0 #1d1825;
}
/* Dynamic Island */
.fstep__notch {
  position: absolute;
  top: clamp(8px, 1.2vw, 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: clamp(11px, 1.8vw, 16px);
  border-radius: 999px;
  background: #000;
  z-index: 2;
}
.fstep__screen {
  --fz: clamp(6px, 0.62vw, 9px);
  width: 100%;
  height: 100%;
  border-radius: clamp(16px, 2vw, 26px);
  background: var(--color-white);
  padding: 9px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
/* Status-Bar */
.fstep__sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12px;
}
.fstep__sb i {
  font-style: normal;
  font-size: var(--fz);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
}
.fstep__sbic {
  width: 26px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-gray-300);
  -webkit-mask: radial-gradient(circle 1.6px at 3px 50%, #000 96%, #0000) 0/5px 100% repeat-x;
          mask: radial-gradient(circle 1.6px at 3px 50%, #000 96%, #0000) 0/5px 100% repeat-x;
}
/* Screen-Titel */
.fstep__title {
  font-size: calc(var(--fz) + 3px);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
  margin-top: 2px;
}
/* Produkt-Zeile (Schritt 1) */
.fstep__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--color-gray-200);
  border-radius: 9px;
}
.fstep__thumb {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(140deg, #ff4da3 0%, var(--color-magenta) 60%, #b8005d 100%);
}
.fstep__itxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fstep__itxt em {
  font-style: normal;
  font-size: var(--fz);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}
.fstep__itxt u {
  text-decoration: none;
  font-size: calc(var(--fz) - 0.5px);
  color: var(--color-text-muted);
}
.fstep__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  font-size: var(--fz);
  color: var(--color-text-body);
}
.fstep__sum b {
  font-size: calc(var(--fz) + 4px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}
.fstep__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 8px 0;
  border-radius: 999px;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: var(--fz);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}
/* Zahlart-Zeilen (Schritt 2) */
.fstep__pay {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 7px;
  border: 1px solid var(--color-gray-200);
  border-radius: 9px;
  font-size: var(--fz);
  color: var(--color-text-dark);
}
.fstep__pay em { font-style: normal; font-weight: var(--font-weight-semibold); margin-right: auto; }
.fstep__pico {
  flex: 0 0 auto;
  width: 18px;
  height: 13px;
  border-radius: 3px;
  background: var(--color-gray-300);
}
.fstep__pico--tk { background: var(--color-magenta); }
.fstep__radio {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1.5px solid var(--color-gray-300);
}
.fstep__radio--on {
  border-color: var(--color-magenta);
  background:
    radial-gradient(circle 3px at 50% 50%, var(--color-magenta) 96%, #0000);
}
.fstep__pay--on {
  border-color: var(--color-magenta);
  background: rgba(var(--color-magenta-rgb), 0.07);
}
/* Erfolg (Schritt 3) */
.fstep__screen--ok { justify-content: flex-start; }
.fstep__okwrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.fstep__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(140deg, #ff4da3 0%, var(--color-magenta) 60%, #b8005d 100%);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgba(var(--color-magenta-rgb), 0.4);
}
.fstep__check svg { width: 54%; height: 54%; }
.fstep__ok-txt {
  font-size: calc(var(--fz) + 3px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}
.fstep__ok-sub {
  font-size: var(--fz);
  color: var(--color-text-muted);
}
.fstep__cap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(0.62rem, 0.95vw, 0.8rem);
  font-weight: var(--font-weight-semibold);
  color: rgba(255,255,255,0.78);
}
.fstep__cap i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  color: var(--color-white);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .fstep--a, .fstep--b, .fstep--c { transform: none; }
}

/* Karte 5: Telekom-Rechnungs-Mockup statt Hintergrundbild (Platzhalter-Basis) */
.bento__card--bill {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  background: #f6f6f6;
}
/* Spacing manuell, weil die Zacken-Pseudoelemente 10px überstehen
   und sonst den Gap vor der Headline visuell auffressen */
.bento__card--bill .billwrap { margin-bottom: calc(var(--space-4) + 10px); }
.bento__card--bill .bento__card-title { margin: 0 0 var(--space-4); }
.bento__card--bill .bento__card-text { margin: 0; }
/* Heller Grau-Untergrund: scheint nur durch die Zacken-Kerben */
.billwrap { position: relative; }
/* Beleg = weißes Rechteck + weiße Zacken-Pseudos oben/unten;
   Grau nur in den V-Lücken zwischen den weißen Spitzen. Drop-Shadow folgt der gezackten Silhouette. */
.billmock {
  --zigW: 16px;
  --zigH: 10px;
  position: relative;
  background: var(--color-white);
  padding: clamp(1rem, 1.8vw, 1.4rem) clamp(0.95rem, 1.8vw, 1.25rem);
  font-size: clamp(0.66rem, 1vw, 0.82rem);
}
.billmock::before,
.billmock::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--zigH);
  background-color: #f6f6f6;
}
/* Oben: weiße Dreiecke mit Spitze nach OBEN (raus aus der Rechnung), grau nur in den V-Lücken */
.billmock::before {
  top: calc(-1 * var(--zigH));
  background-image:
    conic-gradient(from 135deg at top, #ffffff 25%, transparent 0);
  background-size: var(--zigW) var(--zigH);
  background-repeat: repeat-x;
  background-position: 0 0;
}
/* Unten: gespiegelt – weiße Dreiecke mit Spitze nach UNTEN (raus aus der Rechnung) */
.billmock::after {
  bottom: calc(-1 * var(--zigH));
  background-image:
    conic-gradient(from -45deg at bottom, #ffffff 25%, transparent 0);
  background-size: var(--zigW) var(--zigH);
  background-repeat: repeat-x;
  background-position: 0 100%;
}
.billmock__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-gray-200);
}
.billmock__logo { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; }
.billmock__head-meta { display: flex; flex-direction: column; line-height: 1.25; }
.billmock__head-meta b { color: var(--color-text-dark); font-weight: var(--font-weight-bold); }
.billmock__head-meta i { font-style: normal; color: var(--color-text-muted); font-size: 0.9em; }
.billmock__lines {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.billmock__lines li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--color-text-body);
}
.billmock__lines li b { color: var(--color-text-dark); font-weight: var(--font-weight-bold); }
.billmock__grouphead {
  margin-top: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: rgba(var(--color-magenta-rgb), 0.08);
  justify-content: flex-start !important;
}
.billmock__grouphead img { width: 16px; height: 16px; border-radius: 4px; }
.billmock__grouphead span {
  font-weight: var(--font-weight-bold);
  color: var(--color-magenta-text);
}
.billmock__sub {
  padding-left: 0.65rem;
  border-left: 2px solid rgba(var(--color-magenta-rgb), 0.35);
  margin-left: 0.5rem;
}
.billmock__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-gray-200);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}
.billmock__total b { color: var(--color-magenta-text); }

/* Bill-Mockup: Stagger-Reveal beim In-View (einmalig) — Rechnungsrahmen bleibt
   sichtbar, die vier Posten faden gestaffelt rein mit leichtem Slide-Up. */
.billmock__anim {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease-editorial), transform 0.55s var(--ease-editorial);
}
.bill-stagger.is-visible .billmock__anim[data-bill-step="1"] { transition-delay: 0.20s; }
.bill-stagger.is-visible .billmock__anim[data-bill-step="2"] { transition-delay: 0.40s; }
.bill-stagger.is-visible .billmock__anim[data-bill-step="3"] { transition-delay: 0.60s; }
.bill-stagger.is-visible .billmock__anim[data-bill-step="4"] { transition-delay: 0.85s; }
.bill-stagger.is-visible .billmock__anim {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .billmock__anim { opacity: 1; transform: none; transition: none; }
}

/* Karte 4: weiße Karte, gerahmtes Foto wie das Rechnungs-Mockup */
.bento__card--trust {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-4);
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  background: var(--color-white);
}
/* Sicherheits-Icon + Telekom-Logo, left-aligned nebeneinander */
.trustlogos {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-3);
}
.trustlogos__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6.5vw, 72px);
  aspect-ratio: 1;
  border-radius: 14px;
  /* Animation: Loop alle 8s, gestaffelter Auftritt – siehe Keyframes unten */
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}
.trustlogos__badge--lock {
  color: var(--color-white);
  background:
    radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(150deg, #ff1f93 0%, var(--color-magenta) 48%, #a8005a 100%);
  animation-name: trustlogos-lock;
}
.trustlogos__badge--lock svg { width: 54%; height: 54%; }
/* Telekom-Logo ohne Container, nur leicht abgerundet, gleiche Größe */
.trustlogos__badge--tk {
  overflow: hidden;
  animation-name: trustlogos-tk;
}
.trustlogos__badge--tk img { width: 100%; height: 100%; object-fit: contain; }

/* Telekom-Logo: erscheint zuerst an der LINKEN Position (wo später das Schloss sitzt)
   mit Blur-In + Scale-In, gleitet dann nach rechts an seinen finalen Platz,
   hält ~4s gemeinsam mit dem Schloss, fadet dann aus */
@keyframes trustlogos-tk {
  0%, 2.5% { opacity: 0; transform: translateX(calc(-100% - var(--space-3))) scale(0.5); filter: blur(8px); }
  15%      { opacity: 1; transform: translateX(calc(-100% - var(--space-3))) scale(1); filter: blur(0); }
  30%      { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  87.5%    { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  95%, 100%{ opacity: 0; transform: translateX(0) scale(0.92); filter: blur(0); }
}
/* Schloss-Icon: kommt nach dem Telekom-Slide an seine Position (links) mit Blur-In + Scale-In */
@keyframes trustlogos-lock {
  0%, 25%  { opacity: 0; transform: scale(0.5); filter: blur(8px); }
  37.5%    { opacity: 1; transform: scale(1); filter: blur(0); }
  87.5%    { opacity: 1; transform: scale(1); filter: blur(0); }
  95%, 100%{ opacity: 0; transform: scale(0.92); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .trustlogos__badge { animation: none; opacity: 1; transform: none; filter: none; }
}
.bento__card--trust .bento__card-title { color: var(--color-text-dark); }
.bento__card--trust .bento__card-text {
  color: var(--color-text-body);
  margin: 0;
}
.bento__card-title--inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.bento__card--trust .bento__lock {
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 9px;
  flex: 0 0 auto;
}
.bento__card--trust .bento__lock svg { width: 18px; height: 18px; }
.bento__card--trust .bento__feats { margin-top: 0; gap: var(--space-2); }
.bento__card--trust .bento__feats li {
  color: var(--color-text-dark);
  font-size: var(--font-size-xs);
  gap: var(--space-2);
}
.bento__card--trust .bento__feats svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  background: rgba(var(--color-magenta-rgb), 0.10);
  color: var(--color-magenta);
}

/* Feature-Zeilen (Sicher & transparent) statt schlichter Liste */
.bento__feats {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bento__feats li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}
.bento__feats svg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  color: var(--color-white);
}

/* Absender-Chip (wie eine Checkout-Bezahlzeile) */
.sender {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(0.7rem, 1.4vw, 1rem);
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 28px rgba(7,5,11,0.35);
  margin-bottom: var(--space-4);
}
.sender__logo { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto; }
.sender__meta { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.sender__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sender__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}
.sender__check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--color-magenta);
}

/* ============================================================
   PARTNERS : Kategorien + Intro-Block + Partner-Tiles mit
   ausklappbarer Einrichtungs-Anleitung (scoped, kollisionsfrei)
   ============================================================ */
.partners {
  position: relative;
  z-index: 2;
  background: var(--color-white);
  border-radius: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0 0;
  /* Negatives margin-top: Section überlappt das graue Bento-Panel darüber,
     der weiße Top-Radius wird über dem Grau optisch sichtbar */
  margin-top: calc(-1 * clamp(20px, 3vw, 44px));
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}
.partners__head {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.partners__head .eyebrow { justify-content: center; }
.partners__head .section-head__title,
.partners__head .eyebrow { margin-inline: auto; }
.partners__lead {
  margin: var(--space-4) auto 0;
  max-width: 58ch;
  font-size: var(--font-size-lg);
  line-height: 1.55;
  color: var(--color-text-body);
}
/* Sticky Tab-Leiste: nur die Pill-Gruppe ist weiß, fit-content, leicht gerundet */
.partners__tabbar {
  position: sticky;
  top: 64px; /* Höhe site-header__inner */
  z-index: 30;
  display: flex;
  justify-content: center;
  padding-block: clamp(0.85rem, 2vw, 1.35rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.partners__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
  padding: 0.4rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(16, 12, 24, 0.06);
}
.partners__tab {
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-body);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.partners__tab:hover { border-color: var(--color-magenta); color: var(--color-magenta); }
.partners__tab.is-active {
  background: var(--color-magenta);
  border-color: var(--color-magenta);
  color: var(--color-white);
}
/* Ein grauer, allseitig gerundeter Container je Tab: Intro + Tiles gehören zusammen */
.partners__panel {
  background: #f6f6f6;
  border-radius: clamp(20px, 3vw, 44px);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.25rem);
}
.partners__panel[hidden] { display: none; }

/* Intro je Kategorie (im grauen Panel, ohne eigene Fläche) */
.partners__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (min-width: 901px) {
  .partners__intro { grid-template-columns: 1fr 1.05fr; }
}
.partners__intro-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
  margin: 0 0 var(--space-3);
}
.partners__intro-desc {
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0 0 var(--space-4);
  max-width: 48ch;
}
.partners__intro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.partners__intro-list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}
.partners__intro-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--color-magenta);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.partners__intro-media img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.partners__intro-media--phone {
  display: flex;
  justify-content: center;
}
.partners__intro-media--phone img {
  width: auto;
  max-height: 360px;
  object-fit: contain;
}

/* Partner-Tiles */
.partners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 600px) { .partners__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .partners__grid { grid-template-columns: repeat(3, 1fr); } }
.pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(16, 12, 24, 0.05);
  position: relative;
}
.pcard__top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #fbfbfb; /* heller als bg-soft, da Panel jetzt grau ist */
  border-bottom: 1px solid var(--color-gray-200);
}

/* Cashback-Badge oben rechts auf Karten mit aktiver Aktion (R1-C-4) */
.pcard__badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem 0.25rem 0.35rem;
  background: var(--color-magenta);
  color: #fff;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--pill);
  box-shadow: 0 2px 8px rgba(226, 0, 116, 0.25);
  line-height: 1;
}
.pcard__badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.pcard__badge--cashback {
  background: var(--color-magenta);
}
@media (max-width: 480px) {
  .pcard__badge { font-size: 0.68rem; padding: 0.22rem 0.5rem 0.22rem 0.3rem; }
}
.pcard__logo { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.pcard__logo img {
  height: clamp(28px, 3.4vw, 40px);
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
}
.pcard__logo--duo img { height: clamp(32px, 3.4vw, 44px); }
.pcard__logo--duo img + img {
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-gray-200);
}
.pcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.75rem) clamp(0.85rem, 1.5vw, 1.1rem);
  flex: 1 1 auto;
}
.pcard__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--color-text-dark);
  margin: 0;
}
.pcard__desc {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-body);
  margin: 0 0 var(--space-4);
  min-height: 3em; /* ~2 Zeilen, Buttons bündig über alle Karten */
}
/* Primär-Button: „Weiter zu …" (Pink, Text weiß) */
.pcard__cta {
  width: 100%;
  margin-top: auto;
  padding: 0.7rem 1.1rem;
  font-size: var(--font-size-sm);
}
.pcard__cta svg { width: 15px; height: 15px; }
/* „So richtest du das ein" als reiner Textlink, klappt smooth aus */
.pcard__setup {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.4rem;
  margin-top: var(--space-2);
  padding: 0.2rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-magenta-text);
  cursor: pointer;
}
.pcard__setup:hover { color: var(--color-magenta-dark); }
.pcard__setup svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.pcard__setup-info { width: 16px; height: 16px; flex: 0 0 auto; transition: none; }
.pcard__setup[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.pcard__steps {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.pcard__steps.is-open { grid-template-rows: 1fr; }
.pcard__steps-inner { overflow: hidden; }
.pcard__steplist {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-4) 0 0.2rem;
  border-top: 1px solid var(--color-gray-200);
  counter-reset: pstep;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pcard__steplist li {
  counter-increment: pstep;
  position: relative;
  min-height: 1.6rem; /* Zahlen-Badge nie abgeschnitten */
  display: flex;
  align-items: center;
  padding-left: 2.25rem;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-body);
}
.pcard__steplist li::before {
  content: counter(pstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .pcard__steps { transition: none; }
  .pcard__setup svg { transition: none; }
}
.partners__note {
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Verifizierungs-Flag: dezenter Stern-Tag auf Karten mit noch zu prüfendem Bezahlweg */
.pcard__verify-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin-left: 0.4em;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--color-magenta);
  border-radius: var(--pill);
  font-size: 0.66rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-magenta);
  background: rgba(226, 0, 116, 0.06);
  vertical-align: middle;
}
.partners__verify-note {
  margin: clamp(1.5rem, 2.5vw, 2.25rem) auto 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.partners__verify-note .pcard__verify-flag {
  margin-left: 0;
  padding: 0.05rem 0.4rem;
}

/* --- Partner-Wall: ruhiges Wordmark-Raster (Stripe-Stil) --- */
.partner-wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--space-12);
}
@media (min-width: 768px) { .partner-wall { grid-template-columns: 1fr 1fr; } }
.partner-wall__group { display: flex; flex-direction: column; gap: var(--space-5); }
.partner-wall__label {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-magenta);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}
.partner-wall__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-6);
}
@media (min-width: 481px) { .partner-wall__grid { grid-template-columns: repeat(3, 1fr); } }
.partner-wall__item {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  letter-spacing: -0.01em;
  transition: color var(--transition-base);
}
.partner-wall__item:hover { color: var(--color-magenta); }

/* --- Pay-Moment-Story-Block: image-led (show, then explain) --- */
.paymoment {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-editorial);
  align-items: center;
}
@media (min-width: 901px) {
  .paymoment { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 1rem + 6vw, 7rem); }
  .paymoment--reverse .paymoment__media { order: 2; }
}
.paymoment__media {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-xl);
}
.paymoment__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(16,12,24,0.06);
  pointer-events: none;
}
.paymoment__media img { width: 100%; height: 100%; object-fit: cover; }
/* Geräte-Screenshots: ganzes Display zeigen, ruhiger Hintergrund */
.paymoment__media--device {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--color-magenta-rgb),0.10) 0%, rgba(var(--color-magenta-rgb),0) 60%),
    var(--color-bg-soft);
}
.paymoment__media--device img { object-fit: contain; padding: clamp(1.25rem, 3vw, 2.75rem) 0; }
@media (min-width: 901px) { .paymoment__media--device { aspect-ratio: 4 / 4.4; } }
.paymoment__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-magenta);
  margin-bottom: var(--space-4);
}
.paymoment__eyebrow::before { content:""; width:2em; height:2px; background:currentColor; border-radius:2px; }
.paymoment__eyebrow--nomark { gap: 0; }
.paymoment__eyebrow--nomark::before { display: none; }
.paymoment__title {
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem); /* 30–52px */
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-ultra);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.paymoment__title .accent { color: var(--color-magenta); }
.paymoment__text {
  font-size: var(--font-size-xl);
  color: var(--color-text-body);
  line-height: 1.45;
  max-width: 44ch;
}

/* --- Edge-/Vorteils-Karten: premium (Icon, Akzent, Tiefe) --- */
.edges { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .edges { grid-template-columns: repeat(3, 1fr); } }
.edge-card {
  position: relative;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.edge-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow);
}
.edge-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.edge-card:hover::before { transform: scaleX(1); }
.edge-card__icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-magenta-light);
  color: var(--color-magenta);
}
.edge-card__icon svg { width: 28px; height: 28px; }
.edge-card__num {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-ultra);
  color: var(--color-magenta);
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.edge-card__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
}
.edge-card__text { color: var(--color-text-body); font-size: var(--font-size-base); line-height: 1.5; }

/* --- Premium-Override für bestehende bordered Feature-Cards --- */
.feature-card--bordered {
  box-shadow: var(--shadow-card);
  border-color: var(--border-color);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.feature-card--bordered:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-color);
}
.feature-card--bordered .feature-card__title { font-weight: var(--font-weight-extrabold); }

/* --- Stats: riesige, schwere Zahlen --- */
.stat-card__value {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5rem);
  font-weight: var(--font-weight-ultra);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-text-dark);
}
.section--dark .stat-card__value { color: var(--color-white); }
.stat-card__eyebrow {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-magenta);
}

/* ============== Partner-Card Setup-Button v2 (Popup + Subpage) ============== */
.pcard__setup--popup,
.pcard__setup--page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
  padding: 0.7rem 1.1rem;
  border: 1.5px solid var(--color-magenta);
  border-radius: var(--pill);
  background: transparent;
  color: var(--color-magenta);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.pcard__setup--popup:hover,
.pcard__setup--page:hover {
  background: var(--color-magenta);
  color: var(--color-white);
}
.pcard__setup--popup:focus-visible,
.pcard__setup--page:focus-visible {
  outline: 3px solid var(--color-magenta);
  outline-offset: 2px;
}
.pcard__setup--popup .pcard__setup-label,
.pcard__setup--page .pcard__setup-label { letter-spacing: 0.01em; }
.pcard__setup--popup .pcard__setup-action,
.pcard__setup--page .pcard__setup-action {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform var(--transition-base);
}
.pcard__setup--popup:hover .pcard__setup-action { transform: rotate(90deg); }
.pcard__setup--page:hover .pcard__setup-action { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .pcard__setup--popup .pcard__setup-action,
  .pcard__setup--page .pcard__setup-action { transition: none; }
}

/* ============== Tutorial-Modal (Stripe-Stil Bottom-Sheet) ============== */
.tutorial-modal {
  width: min(1200px, calc(100vw - 24px));
  max-width: 1200px;
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--color-white);
  overflow: hidden;
  box-shadow: 0 -18px 72px rgba(20, 14, 32, 0.22);
}
.tutorial-modal::backdrop {
  background: rgba(12, 8, 24, 0.46);
  backdrop-filter: blur(6px);
}
.tutorial-modal[open] {
  animation: tutorial-modal-in 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tutorial-modal[open]::backdrop {
  animation: tutorial-backdrop-in 240ms ease-out;
}
@keyframes tutorial-modal-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes tutorial-backdrop-in {
  from { background: rgba(12, 8, 24, 0); }
  to   { background: rgba(12, 8, 24, 0.46); }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-modal[open],
  .tutorial-modal[open]::backdrop { animation: none; }
}

.tutorial-modal__shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tutorial-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) clamp(1rem, 2vw, 2rem);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-gray-100);
}
.tutorial-modal__brand {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  min-width: 0;
}
.tutorial-modal__brand img {
  width: auto;
  height: 56px;
  align-self: center;
  object-fit: contain;
  flex: 0 0 auto;
}
.tutorial-modal__brand-text { display: flex; flex-direction: column; min-width: 0; }
.tutorial-modal__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-magenta);
}
.tutorial-modal__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tutorial-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.tutorial-modal__close:hover { background: var(--color-text-dark); color: var(--color-white); transform: rotate(90deg); }
.tutorial-modal__close:focus-visible { outline: 3px solid var(--color-magenta); outline-offset: 2px; }
.tutorial-modal__close svg { width: 18px; height: 18px; }

.tutorial-modal__body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(2rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 3rem) clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) {
  /* Auf Mobile aus dem Grid raus: TOC, dann Content sauber sequenziell.
     Mit display:grid hat das hidden Desktop-TOC Auto-Placement-Probleme
     verursacht und TOC + Content lagen visuell in derselben Row. */
  .tutorial-modal__body {
    display: block;
    padding: var(--space-5) var(--space-4) var(--space-8);
  }
  .tutorial-modal__body > .tutorial-toc--mobile { margin-bottom: var(--space-5); }
}

/* ============== Shared Tutorial-TOC + Content (Modal + Anleitungs-Seite) ============== */
.tutorial-toc {
  position: sticky;
  top: var(--space-4);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tutorial-toc__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.tutorial-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--color-gray-200);
}
.tutorial-toc__item a {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.tutorial-toc__item a:hover { color: var(--color-text-dark); }
.tutorial-toc__item.is-active a {
  color: var(--color-magenta);
  border-left-color: var(--color-magenta);
  font-weight: var(--font-weight-bold);
}

.tutorial-toc--mobile { display: none; }
@media (max-width: 900px) {
  .tutorial-toc--desktop { display: none; }
  .tutorial-toc--mobile {
    display: block;
    position: relative;
    top: 0;
    padding: 0;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    overflow: hidden;
  }
  .tutorial-toc--mobile summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tutorial-toc--mobile summary::-webkit-details-marker { display: none; }
  .tutorial-toc--mobile summary::after {
    content: "";
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-base);
  }
  .tutorial-toc--mobile[open] summary::after { transform: rotate(-135deg) translateY(2px); }
  .tutorial-toc--mobile .tutorial-toc__list {
    border-left: 0;
    padding: 0 var(--space-4) var(--space-3);
  }
  .tutorial-toc--mobile .tutorial-toc__item a {
    border-left: 0;
    padding: var(--space-2) 0;
    margin-left: 0;
  }
  .tutorial-toc--mobile .tutorial-toc__item.is-active a { border-left: 0; }
}

.tutorial-content {
  max-width: 760px;
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-text-body);
  min-width: 0;
}
.tutorial-content__partner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.875rem, 1.2vw, 1.25rem) clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 18px rgba(20, 14, 32, 0.06);
}
.tutorial-content__partner-badge img {
  height: clamp(28px, 3vw, 40px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.tutorial-content__partner-badge--duo { gap: var(--space-4); }
.tutorial-content__partner-badge--duo img + img {
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-gray-200);
}
.tutorial-content > section { scroll-margin-top: 96px; }
.tutorial-content > section + section {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-100);
}
.tutorial-content h2 {
  font-size: clamp(1.4rem, 1rem + 1vw, 1.75rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-dark);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tutorial-content__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.tutorial-content h3 {
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: var(--space-6) 0 var(--space-2);
}
.tutorial-content p { margin: 0 0 var(--space-4); }
.tutorial-content ol {
  margin: 0 0 var(--space-4);
  padding-left: 0;
  list-style: none;
  counter-reset: tut;
}
.tutorial-content ol > li {
  counter-increment: tut;
  position: relative;
  padding: 0 0 var(--space-4) 2.75rem;
}
.tutorial-content ol > li::before {
  content: counter(tut);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--color-gray-100);
  color: var(--color-text-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tutorial-content strong { color: var(--color-text-dark); font-weight: var(--font-weight-bold); }
.tutorial-content u { text-decoration-color: var(--color-magenta); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.tutorial-content .tutorial-hint {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
  background: #fff0f7;
  border-left: 3px solid var(--color-magenta);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.tutorial-content .tutorial-hint b { color: var(--color-text-dark); }
.tutorial-content kbd {
  display: inline-block;
  padding: 0.05em 0.4em;
  border-radius: 6px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  font-family: inherit;
  font-size: 0.92em;
  color: var(--color-text-dark);
  font-weight: var(--font-weight-bold);
}

.tutorial-mock {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin: var(--space-3) 0 var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  overflow: hidden;
  border: 1px solid var(--color-gray-100);
}
.tutorial-mock img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tutorial-mock--inline { max-width: 220px; float: right; margin: 0 0 var(--space-4) var(--space-5); }
@media (max-width: 600px) {
  .tutorial-mock--inline { float: none; margin: var(--space-3) 0; max-width: 100%; }
}
.tutorial-mocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.tutorial-mocks .tutorial-mock { margin: 0; max-width: 100%; }
.tutorial-mock__cap {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

/* ============== Action-Slider (Aktuelle Aktionen) ============== */
.action-slider-section {
  padding: clamp(3rem, 4vw + 1rem, 6rem) 0;
}
.action-slider-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.action-slider-section__title {
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-dark);
  margin: 0;
}
.action-slider-section__eyebrow {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-magenta);
  margin-bottom: var(--space-3);
}
.action-slider-section__intro {
  max-width: 38rem;
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  margin: 0;
}
.action-slider {
  position: relative;
  display: block;
}
.action-slider__viewport {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: 0 18px 60px rgba(20, 14, 32, 0.10);
  background: var(--color-white);
}
.action-slider__track {
  display: flex;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.action-slider__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
}
.action-slider__media {
  position: relative;
  overflow: hidden;
}
.action-slider__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.action-slider__copy {
  padding: clamp(1.5rem, 2vw + 1rem, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.action-slider__partner-logo {
  display: flex;
  align-items: center;
  height: 36px;
  margin-bottom: var(--space-2);
}
.action-slider__partner-logo img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.action-slider__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-magenta);
  margin: 0;
}
.action-slider__title {
  font-size: clamp(1.375rem, 0.8rem + 1.4vw, 2.125rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.15;
}
.action-slider__text {
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0;
}
.action-slider__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.action-slider__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
  white-space: nowrap;
}
.action-slider__cta svg { width: 15px; height: 15px; flex: 0 0 auto; }

.action-slider__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text-dark);
  border: 0;
  box-shadow: 0 6px 24px rgba(20, 14, 32, 0.14);
  cursor: pointer;
  transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.action-slider__nav:hover { background: var(--color-text-dark); color: var(--color-white); transform: translateY(-2px); }
.action-slider__nav:focus-visible { outline: 3px solid var(--color-magenta); outline-offset: 2px; }
.action-slider__nav svg { width: 18px; height: 18px; }

.action-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.action-slider__dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: #cdcdcd;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-base), width var(--transition-base);
}
.action-slider__dot:focus-visible { outline: 2px solid var(--color-magenta); outline-offset: 3px; }
.action-slider__dot.is-active { background: var(--color-magenta); width: 28px; }

.action-slider__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.action-slider__controls .action-slider__dots { margin-top: 0; }
.action-slider__nav--side { display: none; }

@media (max-width: 900px) {
  .action-slider__slide { grid-template-columns: 1fr; min-height: auto; }
  .action-slider__media { aspect-ratio: 16 / 10; }
  .action-slider__copy { padding: clamp(1.25rem, 4vw, 2rem); min-width: 0; }
  .action-slider__nav { width: 40px; height: 40px; }
  .action-slider__cta {
    width: 100%;
    align-self: stretch;
    justify-content: center;
    white-space: normal;
  }
  .action-slider__cta svg { flex: 0 0 auto; }
  /* Overflow-Hidden Bug: viewport darf nicht den CTA-Border-Schatten beschneiden */
  .action-slider__viewport { overflow: hidden; }
  .action-slider__title { word-break: break-word; hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .action-slider__track { transition: none; }
  .action-slider__nav { transition: none; }
}

/* ============================================================
   ERKLÄRVIDEO-SEKTION (.videohint) + Click-to-load-Embed (.video-embed)
   DSGVO: YouTube (nocookie) lädt erst beim Klick (initVideoEmbed).
   ============================================================ */
.videohint { padding-block: var(--section-padding-y); background: var(--color-white); }
.videohint__head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--space-8); }
.videohint__head .section-head__title, .videohint__head .eyebrow { margin-inline: auto; }
.videohint__lead { color: var(--color-text-body); font-size: var(--font-size-lg); margin-top: var(--space-3); }

/* OS-Umschalter (iOS / Android) – gleiche Optik wie der Store-Switcher */
.videohint__switch {
  display: inline-flex; gap: 8px; padding: 8px; margin-top: var(--space-6);
  background: var(--color-gray-100); border: 1px solid var(--color-gray-200, rgba(0,0,0,0.08));
  border-radius: var(--pill, 999px);
}
.videohint__seg {
  padding: 0.65rem 1.5rem; border: 0; background: none; cursor: pointer;
  border-radius: var(--pill, 999px); font-family: inherit; font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold); color: var(--color-text-body);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.videohint__seg:hover { color: var(--color-text-dark); }
.videohint__seg.is-active { background: var(--color-magenta); color: #fff; box-shadow: 0 2px 6px rgba(226,0,116,0.22); }

/* Video-Facade: 16:9, Poster mit Scrim + frostiger Play-Button */
.video-embed { max-width: 880px; margin-inline: auto; }
.video-embed__poster {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; padding: 0; cursor: pointer; overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 22px); background: var(--color-gray-100);
  box-shadow: 0 18px 50px rgba(16,12,24,0.16);
}
.video-embed__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-embed__poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(7,5,11,0.55) 0%, rgba(7,5,11,0.18) 45%, rgba(7,5,11,0.28) 100%);
}
.video-embed__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(64px, 8vw, 88px); height: clamp(64px, 8vw, 88px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 1;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.7); box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.video-embed__poster:hover .video-embed__play { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,0.32); }
/* Play-Dreieck optisch zentriert (Schwerpunkt eines nach rechts zeigenden Dreiecks liegt nur minimal links der Box-Mitte) */
.video-embed__play svg { width: 40%; height: 40%; fill: #fff; transform: translateX(2%); }
.video-embed__badge {
  position: absolute; left: clamp(0.9rem, 2vw, 1.4rem); bottom: clamp(0.9rem, 2vw, 1.4rem); z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: var(--pill, 999px);
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: var(--font-size-xs, 0.8rem); font-weight: var(--font-weight-bold);
}
.video-embed__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: clamp(16px, 1.6vw, 22px); overflow: hidden; box-shadow: 0 18px 50px rgba(16,12,24,0.16); }
.video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__consent { margin: var(--space-3) auto 0; text-align: center; font-size: var(--font-size-xs, 0.8rem); color: var(--color-text-muted); max-width: 52ch; }
@media (prefers-reduced-motion: reduce) { .video-embed__poster:hover .video-embed__play { transform: translate(-50%, -50%); } }

/* ============================================================
   REDEEM – Voucher-Einlöse-Sektion (Consumer)
   Zentrierte Karte mit hervorgehobenem Code-Feld (per QR vorbefüllt),
   E-Mail + Mobilfunknummer, Consent, Submit, Success-State.
   Selbst-enthalten (eigene Feld-/Check-/Trust-Styles), damit die
   Seite nur base.css + components.css braucht.
   ============================================================ */
.redeem { padding-block: var(--section-padding-spacious); }
.redeem__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}
.redeem__head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-8); }
.redeem__head .eyebrow,
.redeem__head .hero__eyebrow {
  display: inline-block;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-magenta-text);
  margin-bottom: var(--space-3);
}
.redeem__head h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--color-text-dark);
  text-wrap: balance;
}
.redeem__head p { margin-top: var(--space-3); color: var(--color-text-body); font-size: var(--font-size-lg); }

.redeem__card {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200, rgba(0,0,0,0.08));
  border-radius: var(--radius-xl, 24px);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 18px 50px rgba(16,12,24,0.09);
}

/* Code-Feld: hervorgehoben, da es das Herzstück ist */
.redeem__codefield label { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); margin-bottom: var(--space-2); color: var(--color-text-dark); }
.redeem__code {
  width: 100%;
  padding: 1rem 1.1rem;
  font-size: 1.35rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  font-family: inherit;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-magenta-darker, var(--color-magenta-dark));
  border: 2px dashed var(--color-magenta);
  border-radius: var(--radius-md, 12px);
  background: var(--color-magenta-light);
  min-height: 56px;
}
.redeem__code::placeholder { color: var(--color-magenta); opacity: 0.55; letter-spacing: 0.12em; font-weight: var(--font-weight-semibold); }
.redeem__code:focus-visible { outline: 2px solid var(--color-magenta); outline-offset: 2px; }
/* Vorbefüllt-Zustand (per ?code= aus dem QR) */
.redeem__code.is-prefilled { border-style: solid; background: var(--color-white); }
.redeem__prefill-note {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success, #00a14b);
}
.redeem__prefill-note svg { width: 18px; height: 18px; flex: 0 0 auto; }
.redeem__prefill-note.is-shown { display: inline-flex; }

.redeem__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.redeem__divider::before,
.redeem__divider::after { content: ''; flex: 1; height: 1px; background: var(--color-gray-200); }

/* Felder (selbst-enthalten, scoped) */
.redeem .field { margin-bottom: var(--space-4); }
.redeem .field-row { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3); }
.redeem .field label { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); margin-bottom: var(--space-2); color: var(--color-text-dark); }
.redeem .field input[type="text"],
.redeem .field input[type="email"],
.redeem .field input[type="tel"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--font-size-base);
  font-family: inherit;
  border: 1px solid var(--color-gray-300, rgba(0,0,0,0.2));
  border-radius: var(--radius-md, 12px);
  background: var(--color-white);
  color: var(--color-text-dark);
  min-height: 48px;
}
.redeem .field input:focus-visible { outline: 2px solid var(--color-magenta); outline-offset: 1px; border-color: var(--color-magenta); }
.redeem .field input[aria-invalid="true"] { border-color: #c8102e; }
.redeem .field__error { display: block; color: #c8102e; font-size: var(--font-size-sm); margin-top: 4px; min-height: 1em; }

.redeem .check { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-2); margin-bottom: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-body); cursor: pointer; }
.redeem .check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-magenta); }
.redeem .check a { color: var(--color-magenta); text-decoration: underline; }

.redeem__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.redeem__submit { justify-content: center; min-height: 54px; margin-top: var(--space-3); }
.redeem__success {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md, 12px);
  background: var(--color-success-bg, #eaf7ef);
  color: var(--color-text-dark);
  font-weight: var(--font-weight-semibold);
}
.redeem__success b { color: var(--color-success, #00a14b); }

.redeem .trust-row { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-gray-200, rgba(0,0,0,0.08)); }
.redeem .trust-row span { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-xs, 0.8rem); color: var(--color-text-muted); }
.redeem .trust-row svg { width: 16px; height: 16px; color: var(--color-magenta); flex: 0 0 auto; }