/* ==========================================================
   GLOBAL STYLES — iptv-kaufen.ch
   Design System: Stripe-inspired
   ========================================================== */

/* ---- CSS Custom Properties ---- */
:root {
  /* ── Declare light-only scheme — blocks Samsung Force Dark Mode ── */
  color-scheme: only light;

  --purple:        #533afd;
  --purple-hover:  #4434d4;
  --purple-light:  #b9b9f9;
  --purple-sub:    rgba(83,58,253,0.06);
  --navy:          #061b31;
  --brand-dark:    #1c1e54;
  --label:         #273951;
  --slate:         #64748d;
  --border:        #e5edf5;
  --white:         #ffffff;
  --ruby:          #ea2261;
  --magenta:       #f96bee;
  --success:       #15be53;
  --success-bg:    rgba(21,190,83,0.15);
  --success-text:  #108c3d;
  --success-border:rgba(21,190,83,0.35);

  --shadow-std:  rgba(50,50,93,0.25) 0px 30px 45px -30px,
                 rgba(0,0,0,0.10) 0px 18px 36px -18px;
  --shadow-amb:  rgba(23,23,23,0.08) 0px 15px 35px 0px;
  --shadow-sm:   rgba(23,23,23,0.06) 0px 3px 6px;
  --shadow-top:  rgba(0,55,112,0.06) 0px 2px 8px;

  --font:        'Inter', 'sohne-var', -apple-system, BlinkMacSystemFont,
                 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-mono:   'SourceCodePro', 'SFMono-Regular', 'Fira Mono', monospace;

  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  8px;

  --max-w:  1080px;
  --header-h: 64px;

  /* Semantic aliases */
  --ink:           #061b31;   /* = --navy, dark text on light bg */
  --primary:       #533afd;   /* = --purple */
  --primary-light: #b9b9f9;   /* = --purple-light */
  --section-alt-bg: #f4f7fb;
}

/* ---- Reset ---- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* Chrome/Samsung/Safari */
  -moz-text-size-adjust:    100%;   /* Firefox Android */
  text-size-adjust:         100%;   /* standard (future-proof) */
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font);
  font-weight: 300;
  font-feature-settings: "ss01";
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: clip;
  max-width: 100vw;
  width: 100%;
  position: relative;
  padding-top: var(--header-h);
  /* Prevent Samsung Internet font-boost on body subtree */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust:    100%;
  text-size-adjust:         100%;
}

body.nav-active { overflow: hidden; }

a {
  color: var(--purple);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--purple-hover); }

/* ── Inline contextual links (Phase 3 internal linking) ── */
.inline-link {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-color: rgba(83, 58, 253, 0.40);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: color 0.15s, text-decoration-color 0.15s, text-decoration-thickness 0.15s;
}
.inline-link:hover {
  color: var(--purple-hover);
  text-decoration-color: var(--purple-hover);
  text-decoration-thickness: 2px;
}

ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* ---- Typography Utilities ---- */
.text-display {
  font-family: var(--font);
  font-size: 3rem;          /* 48px */
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.96px;
  font-feature-settings: "ss01";
  color: var(--navy);
}
.text-hero {
  font-family: var(--font);
  font-size: 3.5rem;        /* 56px */
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -1.4px;
  font-feature-settings: "ss01";
  color: var(--navy);
}
.text-section {
  font-family: var(--font);
  font-size: 2rem;          /* 32px */
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.64px;
  font-feature-settings: "ss01";
  color: var(--navy);
}
.text-sub {
  font-family: var(--font);
  font-size: 1.375rem;      /* 22px */
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.22px;
  font-feature-settings: "ss01";
  color: var(--navy);
}
.text-body-lg {
  font-size: 1.125rem;      /* 18px */
  font-weight: 300;
  line-height: 1.55;
  font-feature-settings: "ss01";
  color: var(--slate);
}
.text-body {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.55;
  font-feature-settings: "ss01";
  color: var(--slate);
}

/* ---- Layout Utilities ---- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 80px 0; }
.section-alt  { background: var(--section-alt-bg); }
.section-dark {
  background: var(--brand-dark);
  color: rgba(255,255,255,0.80);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--purple);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--purple-hover);
  color: var(--white);
  box-shadow: rgba(83,58,253,0.35) 0px 4px 12px;
}
.btn-ghost {
  background: transparent;
  color: var(--purple);
  border: 1px solid var(--purple-light);
}
.btn-ghost:hover {
  background: var(--purple-sub);
  color: var(--purple);
}
.btn-lg {
  padding: 12px 28px;
  font-size: 1.0625rem;
}

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-std);
  padding: 24px;
}
.card:hover {
  box-shadow: var(--shadow-std), var(--shadow-amb);
}

/* ---- Badges ---- */
.badge-success {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 300;
  font-feature-settings: "ss01";
}

/* ================================================================
   HEADER
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  height: var(--header-h);
  border-bottom: 1px solid rgba(83,58,253,0.28);
  box-shadow: 0 1px 0 rgba(83,58,253,0.12), 0 4px 24px rgba(0,0,0,0.40);
}
/* backdrop-filter on ::before — prevents it from creating a fixed-position containing block */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 22, 0.88);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  z-index: 0;
}

.header-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Brand */
.nav-brand { flex-shrink: 0; text-decoration: none; }
.brand-wordmark {
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.3px;
}
.brand-dot { color: #a78bfa; }

/* Nav — no longer a flex child of header-inner; desktop positioning via media query below */
.nav-main { min-width: 0; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  overflow: visible;
}

.nav-link {
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.68);
  padding: 6px 10px;
  border-radius: var(--r-md);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  display: block;
}
.nav-link:hover { background: rgba(83,58,253,0.16); color: #c4b5fd; }
.nav-link.active { color: #c4b5fd; font-weight: 500; }

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.site-header .btn-primary {
  box-shadow: 0 0 18px rgba(83,58,253,0.40), 0 2px 8px rgba(0,0,0,0.30);
  letter-spacing: 0.01em;
}
.site-header .btn-primary:hover {
  box-shadow: 0 0 26px rgba(83,58,253,0.55), 0 4px 12px rgba(0,0,0,0.35);
}

/* Hamburger button */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s;
}
.hamburger:hover { background: rgba(83,58,253,0.18); border-color: rgba(83,58,253,0.4); }
.hb-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: rgba(255,255,255,0.80);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Hamburger → X when open */
.hamburger[aria-expanded="true"] .hb-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hb-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hb-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background: var(--brand-dark);
  color: rgba(255,255,255,0.70);
}

/* Top section */
.footer-top {
  padding: 64px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}

/* Brand column */
.footer-logo { display: inline-block; margin-bottom: 12px; }
.footer-logo .brand-wordmark { color: var(--white); font-size: 1.0625rem; }

.footer-tagline {
  font-size: 0.875rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.50);
  line-height: 1.65;
  margin-bottom: 24px;
}

.footer-cta { font-size: 0.875rem; padding: 8px 16px; }

/* Nav grid */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-col-heading {
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-col ul li + li { margin-top: 10px; }
.footer-col ul a {
  font-size: 0.875rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.65);
  transition: color 0.15s;
}
.footer-col ul a:hover { color: var(--white); }

/* Bottom bar */
.footer-bottom {
  padding: 20px 0;
}

.footer-bottom-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: 0.8125rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.30);
}

.footer-legal-nav {
  display: flex;
  gap: 20px;
}
.footer-legal-nav a {
  font-size: 0.8125rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.35);
  transition: color 0.15s;
}
.footer-legal-nav a:hover { color: rgba(255,255,255,0.75); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .nav-link { padding: 6px 8px; font-size: 0.8125rem; }
  .footer-inner { grid-template-columns: 220px 1fr; gap: 40px; }
}

/* Mobile nav footer — hidden on desktop */
.nav-mob-footer { display: none; }

/* ── Desktop: nav is a sibling of header — overlay at same position ── */
@media (min-width: 821px) {
  .nav-main {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-w);
    height: var(--header-h);
    z-index: 10001;
    pointer-events: none;
    display: flex;
    align-items: center;
    padding: 0 24px;
  }
  .nav-main .nav-list {
    pointer-events: auto;
    flex: 1;
    padding-left: 155px;
  }
}

/* iOS-safe scroll lock: position:fixed preserves scroll pos via JS top offset */
body.nav-active {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

/* ── Mobile nav breakpoint ── */
@media (max-width: 820px) {
  .hamburger { display: flex; }

  /* Full-screen slide overlay — independent of header stacking context */
  .nav-main {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(4, 6, 20, 0.97);
    /* No backdrop-filter here — header already blurs; double blur causes performance issues */
    padding: calc(var(--header-h) + 20px) 0 48px;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.28s;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999;
    border-left: 2px solid rgba(83,58,253,0.35);
    box-shadow: inset 0 1px 0 rgba(83,58,253,0.25);
  }
  .nav-main.nav-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
  }

  /* Nav list — spaced, padded */
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 16px;
  }

  /* Nav links — generous touch targets, arrow indicators */
  .nav-link {
    font-size: 1.0625rem;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    padding: 15px 18px;
    border-radius: 10px;
    border-bottom: none;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-link::after {
    content: "›";
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.30;
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
  }
  .nav-link:hover {
    background: rgba(83,58,253,0.16);
    color: #c4b5fd;
  }
  .nav-link:hover::after { opacity: 0.85; transform: translateX(3px); }
  .nav-link.active {
    background: rgba(83,58,253,0.13);
    color: #c4b5fd;
    font-weight: 500;
  }
  .nav-link.active::after { opacity: 0.9; color: #c4b5fd; }

  /* Mobile-only CTA footer */
  .nav-mob-footer {
    display: block;
    padding: 20px 16px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .nav-mob-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px 20px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 0 22px rgba(83,58,253,0.45);
    transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  }
  .nav-mob-cta:hover {
    background: var(--purple-hover);
    transform: translateY(-1px);
    box-shadow: 0 0 30px rgba(83,58,253,0.60);
  }
  .nav-mob-note {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.38);
    margin-top: 10px;
    font-family: var(--font);
  }

  /* Hamburger — active state highlight */
  .hamburger[aria-expanded="true"] {
    background: rgba(83,58,253,0.22);
    border-color: rgba(83,58,253,0.50);
  }

  /* Footer layout on mobile */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* Small mobile */
@media (max-width: 480px) {
  .footer-nav { grid-template-columns: 1fr; }
  .header-inner { padding: 0 16px; gap: 10px; }
  /* Hide header CTA — only hamburger visible on 480px */
  .header-actions .btn { display: none; }
  .container { padding: 0 16px; }
  .section { padding: 56px 0; }
  .text-hero  { font-size: 2.25rem; letter-spacing: -0.64px; }
  .text-display { font-size: 2rem; letter-spacing: -0.48px; }
  .text-section { font-size: 1.625rem; letter-spacing: -0.4px; }
}

/* ================================================================
   HOME PAGE — HERO
   ================================================================ */
.hero {
  position: relative;
  padding: 140px 0 120px;
  background: #08080f;
  border-bottom: none;
  overflow: hidden;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-inner {
  max-width: 720px;
  text-align: center;
}
.hero-badge {
  margin-bottom: 24px;
}
.hero-headline {
  font-family: var(--font);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -1.4px;
  font-feature-settings: "ss01";
  color: var(--white);
  margin-bottom: 24px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.hero-sub {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.65;
  font-feature-settings: "ss01";
  color: var(--slate);
  max-width: 580px;
  margin: 0 auto 36px;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 0.8125rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.72);
}
.trust-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ================================================================
   HERO SLIDESHOW
   Crossfade background — 6 images × 5 s visible = 30 s cycle
   Negative delay on :nth-child(1) → instant visible on page load
   ================================================================ */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  animation: hero-slide-fade 30s linear infinite !important;
  will-change: opacity;
}
.hero-slide:nth-child(1) { animation-delay: -1s  !important; }
.hero-slide:nth-child(2) { animation-delay:  4s  !important; }
.hero-slide:nth-child(3) { animation-delay:  9s  !important; }
.hero-slide:nth-child(4) { animation-delay:  14s !important; }
.hero-slide:nth-child(5) { animation-delay:  19s !important; }
.hero-slide:nth-child(6) { animation-delay:  24s !important; }

@keyframes hero-slide-fade {
  0%, 16.66%, 100% { opacity: 0; }
  2%, 14.66%       { opacity: 1; }
}

/* Gradient overlay — sits above slides, below text */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.60) 40%,
    rgba(0,0,0,0.88) 100%
  );
  pointer-events: none;
}

/* All containers inside hero sit above overlay */
.hero > .container {
  position: relative;
  z-index: 3;
}

/* definition-box on dark background */
.hero .definition-box {
  background: rgba(83,58,253,0.18);
  border-left-color: rgba(140,120,255,0.75);
}
.hero .definition-box p {
  color: rgba(255,255,255,0.9);
}

/* ghost button on dark background → white outline */
.hero .btn-ghost {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.38);
}
.hero .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-color: rgba(255,255,255,0.65);
  box-shadow: none;
}

/* ================================================================
   FEATURES
   ================================================================ */
.features-intro {
  max-width: 560px;
  margin: 16px auto 56px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  padding: 28px 24px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-std), var(--shadow-amb);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.feature-icon--purple {
  background: rgba(83,58,253,0.08);
  border: 1px solid rgba(83,58,253,0.12);
}
.feature-card .text-sub {
  margin-bottom: 10px;
}

/* ================================================================
   PRICING
   ================================================================ */
.pricing-title { color: var(--white); }
.pricing-sub {
  color: rgba(255,255,255,0.60);
  max-width: 520px;
  margin: 16px auto 56px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.pricing-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.pricing-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.pricing-card--featured {
  background: var(--white);
  border-color: transparent;
  box-shadow: var(--shadow-std);
  margin-top: -12px;
  padding-top: 44px;
}
.pricing-card--featured .pricing-plan,
.pricing-card--featured .pricing-price,
.pricing-card--featured .pricing-period,
.pricing-card--featured .pricing-features li {
  color: var(--navy) !important;
}
.pricing-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--purple);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.pricing-badge--subtle {
  background: rgba(83,58,253,0.12);
  color: var(--purple-light);
}
.pricing-card--featured .pricing-badge--subtle {
  background: rgba(83,58,253,0.10);
  color: var(--purple);
}
.pricing-plan {
  font-size: 0.875rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pricing-price {
  display: flex;
  align-items: flex-start;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1;
}
.price-currency {
  font-size: 1rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  margin-top: 8px;
  margin-right: 4px;
  color: inherit;
}
.price-amount {
  font-size: 3rem;
  font-weight: 300;
  font-feature-settings: "tnum";
  letter-spacing: -1px;
  color: inherit;
}
.price-cents {
  font-size: 1.25rem;
  font-weight: 300;
  font-feature-settings: "tnum";
  margin-top: 10px;
  color: inherit;
}
.pricing-period {
  font-size: 0.8125rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px;
}
.pricing-features {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-features li {
  font-size: 0.875rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.75);
  padding-left: 18px;
  position: relative;
}
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-size: 0.75rem;
}
.pricing-btn { width: 100%; justify-content: center; }
.pricing-card--featured .btn-ghost {
  border-color: var(--purple-light);
  color: var(--purple);
}
.pricing-note {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.35);
  margin-top: 40px;
}

/* ================================================================
   VOD SECTION
   ================================================================ */
.vod-intro {
  max-width: 580px;
  margin: 16px 0 40px;
}
.vod-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}
.vod-item {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 2/3;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
.vod-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-std);
}
.vod-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vod-placeholder {
  background: var(--border);
}
.vod-placeholder-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e5edf5 25%, #f0f4f8 50%, #e5edf5 75%);
  background-size: 200% 200%;
  animation: shimmer 1.8s ease infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.vod-cta-wrap { text-align: center; }

/* ================================================================
   CTA BANNER
   ================================================================ */
.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ================================================================
   UTILITY
   ================================================================ */
.text-center { text-align: center; }

/* ================================================================
   RESPONSIVE — HOME PAGE
   ================================================================ */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .vod-grid      { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 820px) {
  .hero { padding: 80px 0 72px; min-height: 70vh; }
  .hero-headline { font-size: 2.5rem; letter-spacing: -0.8px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid  { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .pricing-card--featured { margin-top: 0; }
  .vod-grid { grid-template-columns: repeat(3, 1fr); }
  .cta-banner-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hero { min-height: 60vh; }
  .hero-headline { font-size: 2rem; letter-spacing: -0.5px; }
  .hero-actions  { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .features-grid { grid-template-columns: 1fr; }
  .vod-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-trust { flex-direction: column; gap: 8px; }
}

/* ================================================================
   DEFINITION BOX — GEO Quotable (CORE-EEAT C02 + C10)
   ================================================================ */
.definition-box {
  border-left: 3px solid var(--purple);
  background: rgba(83,58,253,0.04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 24px 20px 28px;
  margin: 32px 0;
}
.definition-box p {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  font-feature-settings: "ss01";
  color: var(--navy);
}
.definition-box cite {
  display: block;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--slate);
  margin-top: 10px;
}

/* ================================================================
   SECTION IMAGE — visual separator
   ================================================================ */
.section-image {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 48px 0;
  box-shadow: var(--shadow-std);
  line-height: 0;
}
.section-image img {
  width: 100%;
  height: auto;
  display: block;
}
.section-image--half   { max-width: 560px; }
.section-image--center { margin-left: auto; margin-right: auto; }

/* ================================================================
   COMPARISON TABLE — IPTV vs Kabel vs Satellit (O03)
   ================================================================ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin: 32px 0;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-feature-settings: "ss01";
  white-space: nowrap;
}
.comparison-table thead th {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white);
  padding: 13px 16px;
  background: var(--navy);
  text-align: left;
}
.comparison-table tbody td {
  padding: 13px 16px;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:nth-child(even) td {
  background: rgba(229,237,245,0.30);
}
.comparison-table td.col-iptv {
  background: rgba(83,58,253,0.05) !important;
  font-weight: 400;
  color: var(--purple);
}
.comparison-table td.col-check {
  color: var(--success-text);
  font-weight: 400;
}

/* ================================================================
   FEATURES GRID — extensions
   ================================================================ */
.features-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
.feature-card .feature-desc {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--slate);
  font-feature-settings: "ss01";
}

/* ================================================================
   SENDERLISTE GRID
   ================================================================ */
.senderliste-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0;
}
.sender-category {
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.sender-category:hover {
  box-shadow: var(--shadow-amb);
  transform: translateY(-2px);
}
.sender-category-icon {
  font-size: 1.75rem;
  margin-bottom: 14px;
  display: block;
  line-height: 1;
}
.sender-category h3 {
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  letter-spacing: -0.2px;
  color: var(--navy);
  margin-bottom: 10px;
}
.sender-category p {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--slate);
  font-feature-settings: "ss01";
}

/* ================================================================
   PRICING OVERVIEW — index.php (annual plans — minimal)
   ================================================================ */
.pricing-overview-wrap { margin: 48px 0; }
.pricing-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pricing-overview-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 16px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.pricing-overview-card:hover {
  box-shadow: var(--shadow-amb);
  transform: translateY(-3px);
  border-color: var(--purple-light);
}
.pricing-overview-card--featured {
  border-color: var(--purple);
  box-shadow: var(--shadow-std);
  padding-top: 40px;
}
.pricing-overview-card--featured:hover {
  border-color: var(--purple);
  box-shadow: var(--shadow-std), var(--shadow-amb);
}
.pricing-overview-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--purple);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.pricing-overview-name {
  display: block;
  font-size: 0.625rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 14px;
}
.pricing-overview-price {
  font-size: 1.875rem;
  font-weight: 300;
  font-feature-settings: "tnum";
  letter-spacing: -0.5px;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-overview-currency {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--navy);
  vertical-align: top;
  line-height: 2;
}
.pricing-overview-period {
  display: block;
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--slate);
  margin-bottom: 14px;
}
.pricing-overview-devices {
  display: block;
  font-size: 0.8125rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: var(--label);
  margin-bottom: 18px;
}
.pricing-overview-card .btn {
  width: 100%;
  font-size: 0.8125rem;
  padding: 8px 10px;
}

/* ================================================================
   VOD WALL — Tri-Strip Infinite Cinema
   ================================================================ */
.vod-wall {
  background: #08080f;
  padding: 80px 0;
  overflow: hidden;
  position: relative;
  perspective: 1200px;
  perspective-origin: 50% 40%;
}
.vod-wall-header {
  max-width: var(--max-w);
  margin: 0 auto 48px;
  padding: 0 24px;
}
.vod-wall-title {
  font-family: var(--font);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.64px;
  font-feature-settings: "ss01";
  color: var(--white);
  margin-bottom: 16px;
}
.vod-wall-sub {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.65;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.60);
  max-width: 560px;
}
.vod-strips {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 48px;
  transform-style: preserve-3d;
}
.vod-strip {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
  transform-style: preserve-3d;
  animation-timing-function: linear !important;
}

/* Alternating 3D tilt via CSS Individual rotate property
   (composes with transform animation — no conflict) */
.vod-strip--left {
  rotate: y -3deg;
  animation: vod-scroll-left  40s linear infinite,
             vod-float-a       7s ease-in-out infinite;
}
.vod-strip--right {
  rotate: y 3deg;
  animation: vod-scroll-right 35s linear infinite,
             vod-float-b       9s ease-in-out infinite;
}
.vod-strip--left2 {
  rotate: y -2deg;
  animation: vod-scroll-left  47s linear infinite,
             vod-float-a       6s ease-in-out 2s infinite;
}
.vod-strip:hover { animation-play-state: paused; }

/* Horizontal scroll */
@keyframes vod-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes vod-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Organic floating — CSS Individual translate property
   composes with transform independently, no keyframe conflict */
@keyframes vod-float-a {
  0%, 100% { translate: 0 0px;   }
  50%       { translate: 0 -10px; }
}
@keyframes vod-float-b {
  0%, 100% { translate: 0 -5px;  }
  50%       { translate: 0  9px;  }
}

/* ---- Poster base ---- */
.vod-poster {
  flex-shrink: 0;
  width: 110px;
  height: 165px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.4s ease;
}

/* Breaking the grid — offset heights cycle every lcm(2,3,5)=30 posters */
.vod-poster:nth-child(2n)  { height: 182px; }
.vod-poster:nth-child(3n)  { height: 148px; margin-top: 14px; }
.vod-poster:nth-child(5n)  { height: 192px; margin-top: -14px; }

.vod-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Neon glass sheen — top highlight (::before) */
.vod-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to bottom,
    rgba(80,140,255,0.24) 0%,
    rgba(60,100,255,0.10) 42%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Dark bottom vignette (::after) */
.vod-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(5,5,15,0.92) 0%,
    rgba(5,5,15,0.50) 40%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.vod-poster-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 8px 10px;
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: rgba(255,255,255,0.95);
  z-index: 2;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.80);
  line-height: 1.3;
}

/* Magnetic Glow hover — forward thrust */
.vod-poster:hover {
  transform: translateZ(50px) scale(1.15) translateY(-10px);
  box-shadow:
    0 0  30px rgba(30,120,255,0.65),
    0 0  65px rgba(30,120,255,0.22),
    0 28px 55px rgba(0,0,0,0.80);
  z-index: 20;
}
.vod-poster:hover::before { opacity: 1; }
.vod-poster:hover::after  { opacity: 1; }
.vod-poster:hover img     { transform: scale(1.08); }
.vod-poster:hover .vod-poster-title {
  transform: translateY(0);
  opacity: 1;
}

/* VOD footer */
.vod-wall-footer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.vod-wall-footer p {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  font-feature-settings: "ss01";
  max-width: 640px;
  margin-bottom: 24px;
}
.vod-wall-footer .btn-ghost {
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.80);
}
.vod-wall-footer .btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
}

/* ================================================================
   SETUP STEPS — 3-Schritt Einrichtung
   ================================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 48px 0;
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 52px;
  left: calc(33.333% + 12px);
  right: calc(33.333% + 12px);
  height: 1px;
  background: var(--border);
  pointer-events: none;
}
.step-item {
  padding: 32px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.step-item:hover {
  box-shadow: var(--shadow-amb);
  transform: translateY(-2px);
}
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 300;
  font-feature-settings: "tnum";
  margin-bottom: 20px;
  flex-shrink: 0;
  box-shadow: rgba(83,58,253,0.35) 0px 4px 12px;
}
.step-item h3 {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.3;
}
.step-item p {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--slate);
  font-feature-settings: "ss01";
}

/* ================================================================
   DEVICES TABLE
   ================================================================ */
.devices-table {
  width: 100%;
  border-collapse: collapse;
  font-feature-settings: "ss01";
}
.devices-table thead th {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  background: rgba(229,237,245,0.40);
  white-space: nowrap;
}
.devices-table tbody td {
  padding: 14px 16px;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.devices-table tbody tr:last-child td { border-bottom: none; }
.devices-table tbody tr:hover td { background: rgba(83,58,253,0.02); }
.devices-table td:first-child { font-weight: 400; }
.devices-table .td-easy   { color: var(--success-text); font-weight: 400; }
.devices-table .td-medium { color: var(--label); }

/* Dark-section adaptations — devices table (Section 8) */
.section-dark .table-wrap {
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
.section-dark .devices-table thead th {
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border-bottom-color: rgba(255,255,255,0.15);
}
.section-dark .devices-table tbody td {
  color: rgba(255,255,255,0.85);
  border-bottom-color: rgba(255,255,255,0.09);
}
.section-dark .devices-table tbody tr:hover td { background: rgba(83,58,253,0.15); }
.section-dark .devices-table .td-easy   { color: #4ade80; }
.section-dark .devices-table .td-medium { color: rgba(255,255,255,0.65); }
/* Feature card descriptions in dark sections */
.section-dark .feature-card .feature-desc { color: rgba(255,255,255,0.65); }

/* ================================================================
   LEGAL SECTION — Legalität
   ================================================================ */
.legal-section {
  background: rgba(229,237,245,0.25);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 48px;
  margin: 48px 0;
}
.legal-section h2 {
  font-family: var(--font);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.64px;
  font-feature-settings: "ss01";
  color: var(--navy);
  margin-bottom: 20px;
}
.legal-section h3 {
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: var(--navy);
  margin: 28px 0 10px;
}
.legal-section p {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--slate);
  font-feature-settings: "ss01";
  margin-bottom: 16px;
}
.legal-highlight {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 16px 20px;
  margin: 28px 0;
}
.legal-highlight p {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--navy);
  line-height: 1.65;
  margin-bottom: 0;
}

/* ================================================================
   REVIEWS — 2×2 grid + Aggregate Rating
   ================================================================ */
.aggregate-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.agg-score {
  font-family: var(--font);
  font-size: 3.5rem;
  font-weight: 300;
  font-feature-settings: "tnum";
  letter-spacing: -1.4px;
  color: var(--navy);
  line-height: 1;
}
.agg-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agg-stars {
  display: flex;
  gap: 3px;
  color: #f59e0b;
  font-size: 1.25rem;
  line-height: 1;
}
.agg-label {
  font-size: 0.875rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: var(--slate);
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.review-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.review-card:hover {
  box-shadow: var(--shadow-amb);
  transform: translateY(-2px);
}
.review-stars {
  display: flex;
  gap: 3px;
  color: #f59e0b;
  font-size: 0.9375rem;
  margin-bottom: 14px;
  line-height: 1;
}
.review-body {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  line-height: 1.7;
  color: var(--label);
  margin-bottom: 20px;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple-sub);
  border: 1px solid rgba(83,58,253,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: var(--purple);
}
.review-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: var(--navy);
}
.review-location {
  display: block;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--slate);
}

/* ================================================================
   FAQ ACCORDION — WCAG 2.1 (aria-expanded + grid animation)
   ================================================================ */
.accordion {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 32px 0;
}
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: none; }

.accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  background: var(--white);
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
  font-family: inherit;
  transition: background 0.15s;
}
.accordion-btn:hover           { background: rgba(229,237,245,0.50); }
.accordion-btn:focus-visible   { outline: 2px solid var(--purple); outline-offset: -2px; }
.accordion-btn[aria-expanded="true"] {
  background: rgba(83,58,253,0.03);
  border-bottom: 1px solid var(--border);
}

.accordion-question {
  flex: 1;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: var(--navy);
  line-height: 1.45;
}

.accordion-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--purple-sub);
  border: 1px solid rgba(83,58,253,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.accordion-icon::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--purple);
  border-bottom: 1.5px solid var(--purple);
  transform: rotate(45deg) translate(-1px,-2px);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.2s;
}
.accordion-btn[aria-expanded="true"] .accordion-icon {
  background: var(--purple);
  border-color: var(--purple);
}
.accordion-btn[aria-expanded="true"] .accordion-icon::after {
  border-color: var(--white);
  transform: rotate(-135deg) translate(-1px,-2px);
}

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4,0,0.2,1);
  background: var(--white);
}
.accordion-body.is-open { grid-template-rows: 1fr; }

.accordion-body-inner {
  overflow: hidden;
  padding: 0 24px;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--slate);
  font-feature-settings: "ss01";
}
.accordion-body.is-open .accordion-body-inner { padding: 6px 24px 24px; }
.accordion-body-inner a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.accordion-body-inner a:hover { color: var(--purple-hover); }

/* ================================================================
   SUMMARY BOX — O02 GEO (snapshot for AI citation)
   ================================================================ */
.summary-box {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  background: var(--white);
  box-shadow: var(--shadow-std);
  margin: 48px 0;
  overflow: hidden;
}
.summary-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple) 0%, var(--magenta) 100%);
}
.summary-box-title {
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 400;
  font-feature-settings: "ss01";
  color: var(--navy);
  margin-bottom: 24px;
}
.summary-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 40px;
  margin-bottom: 32px;
}
.summary-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 300;
  font-feature-settings: "ss01";
  color: var(--label);
  line-height: 1.5;
}
.summary-list li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--success-text);
  font-size: 0.9375rem;
  font-weight: 600;
}
.summary-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ================================================================
   RESPONSIVE — NEW SECTIONS
   ================================================================ */

@media (max-width: 1024px) {
  .pricing-overview          { grid-template-columns: repeat(3, 1fr); }
  .steps-grid                { gap: 20px; }
  .steps-grid::before        { display: none; }
  .legal-section             { padding: 36px; }
  .summary-box               { padding: 28px 32px; }
  .summary-list              { gap: 10px 28px; }
  .devices-table td,
  .devices-table th          { padding: 11px 12px; }
  .vod-poster                { width: 100px; height: 150px; }
  .vod-poster:nth-child(2n) { height: 165px; }
  .vod-poster:nth-child(3n) { height: 132px; margin-top: 12px; }
  .vod-poster:nth-child(5n) { height: 172px; margin-top: -12px; }
}

@media (max-width: 820px) {
  .senderliste-grid          { grid-template-columns: 1fr; }
  .pricing-overview          { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pricing-overview-card--featured { grid-column: span 2; }
  .steps-grid                { grid-template-columns: 1fr; }
  .review-grid               { grid-template-columns: 1fr; }
  .summary-list              { grid-template-columns: 1fr; }
  .summary-box               { padding: 24px; }
  .legal-section             { padding: 28px 24px; }
  .aggregate-rating          { gap: 14px; }
  .agg-score                 { font-size: 2.5rem; }
  .vod-poster                { width: 90px; height: 135px; }
  .vod-poster:nth-child(2n) { height: 148px; }
  .vod-poster:nth-child(3n) { height: 118px; margin-top: 10px; }
  .vod-poster:nth-child(5n) { height: 155px; margin-top: -10px; }
  .vod-strips                { gap: 10px; }
  .section-image             { margin: 32px 0; }
  .accordion-btn             { padding: 16px 20px; }
  .accordion-body-inner,
  .accordion-body.is-open .accordion-body-inner { padding: 0 20px; }
  .accordion-body.is-open .accordion-body-inner { padding: 4px 20px 20px; }
  .vod-wall-title            { font-size: 1.625rem; }
  .vod-wall                  { padding: 60px 0; }
  .pricing-overview-wrap     { margin: 32px 0; }
}

@media (max-width: 480px) {
  .pricing-overview          { grid-template-columns: 1fr; gap: 12px; }
  .pricing-overview-card--featured { grid-column: span 1; }
  .senderliste-grid          { gap: 14px; }
  .sender-category           { padding: 20px 18px; }
  .legal-section             { padding: 20px 18px; }
  .summary-box               { padding: 20px 18px; }
  .summary-list              { gap: 10px 0; }
  .review-grid               { gap: 14px; }
  .review-card               { padding: 20px 18px; }
  .accordion-btn             { padding: 14px 16px; }
  .accordion-body-inner,
  .accordion-body.is-open .accordion-body-inner { padding: 0 16px; }
  .accordion-body.is-open .accordion-body-inner { padding: 4px 16px 18px; }
  .vod-wall                  { padding: 48px 0; perspective: none; }
  .vod-wall-title            { font-size: 1.375rem; }
  .vod-wall-header           { margin-bottom: 28px; }
  .vod-strips                { gap: 8px; margin-bottom: 32px; }
  .vod-poster                { width: 80px; height: 120px; }
  .vod-poster:nth-child(2n),
  .vod-poster:nth-child(3n),
  .vod-poster:nth-child(5n) { height: 120px; margin-top: 0; }
  .vod-strip--left,
  .vod-strip--right,
  .vod-strip--left2          { rotate: none; }
  .steps-grid                { gap: 12px; }
  .step-item                 { padding: 24px 18px; }
  .section-image             { margin: 24px 0; }
  .definition-box            { padding: 16px 18px 16px 20px; }
  .hero                      { padding: 56px 0 48px; }
  .pricing-overview-wrap     { margin: 24px auto; max-width: 420px; }
  .pricing-overview          { grid-template-columns: 1fr; gap: 12px; }
  .pricing-overview-card     { padding: 24px 20px; }
  .pricing-overview-card .btn { font-size: 0.9375rem; padding: 10px 14px; }
}

/* prefers-reduced-motion block removed — animations run for all users */

/* ================================================================
   MOBILE APP-LIKE: Devices table → Cards (< 768px)
   CSS-only transformation — HTML untouched, WCAG preserved
   ================================================================ */
@media (max-width: 768px) {

  /* Strip the table-wrap box — cards handle their own borders */
  .section-dark .table-wrap {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 16px 0;
    overflow-x: visible;
  }

  /* Table → block stack */
  .section-dark .devices-table,
  .section-dark .devices-table tbody { display: block; }

  /* Hide header row */
  .section-dark .devices-table thead { display: none; }

  /* Each row = a card */
  .section-dark .devices-table tr {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 10px;
    gap: 0;
  }
  .section-dark .devices-table tr:last-child { margin-bottom: 0; }

  /* All cells → block, kill table styles */
  .section-dark .devices-table td {
    display: block;
    border: none;
    padding: 0;
    white-space: normal;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
    background: transparent !important;
  }

  /* Col 1 — App name */
  .section-dark .devices-table td:first-child {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
  }

  /* Col 2 — Device */
  .section-dark .devices-table td:nth-child(2) {
    color: rgba(255,255,255,0.50);
    font-size: 0.8125rem;
    margin-bottom: 4px;
  }

  /* Col 3 — Feature — reinforce colour overrides */
  .section-dark .devices-table .td-easy   { color: #4ade80; }
  .section-dark .devices-table .td-medium { color: rgba(255,255,255,0.65); }
}

/* ================================================================
   MOBILE APP-LIKE: Section / container containment
   Catches any element breaking out of bounds
   ================================================================ */
@media (max-width: 820px) {
  .section     { overflow: clip; }
  .vod-wall    { overflow: clip; }
  .table-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ================================================================
   SENDER PAGE — Sticky Section Navigation
   ================================================================ */
.sender-sticky-nav {
  position: sticky;
  top: 64px;
  z-index: 80;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sender-sticky-nav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 max(24px, calc((100% - 1200px) / 2));
  max-width: 100%;
}
.sender-sticky-nav-inner::-webkit-scrollbar { display: none; }
.sender-nav-link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.sender-nav-link:hover { color: var(--primary); }
.sender-nav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.sender-nav-link .snl-icon {
  font-size: 1rem;
  line-height: 1;
}

/* ================================================================
   SENDER PAGE — Channel Category Cards
   ================================================================ */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0;
}
.channel-grid--2col { grid-template-columns: repeat(2, 1fr); }
.channel-grid--4col { grid-template-columns: repeat(4, 1fr); }

.channel-category-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 24px 22px 20px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.channel-category-card:hover {
  box-shadow: 0 8px 24px rgba(83,58,253,0.10);
  transform: translateY(-2px);
}
.channel-category-card.card-dark {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.channel-category-card.card-dark:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(83,58,253,0.20);
}

.channel-card-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
}
.channel-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.card-dark .channel-card-title { color: #fff; }
.channel-card-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--slate);
  margin: 0 0 16px;
}
.card-dark .channel-card-desc { color: rgba(255,255,255,0.65); }
.channel-count {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(83,58,253,0.08);
  border-radius: 20px;
  padding: 4px 12px;
}
.card-dark .channel-count {
  background: rgba(83,58,253,0.25);
  color: #a89cff;
}

/* Badges */
.channel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.channel-badge--hd   { background: rgba(59,130,246,0.12); color: #3b82f6; }
.channel-badge--4k   { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.channel-badge--epg  { background: rgba(16,185,129,0.12); color: #10b981; }
.channel-badge--live { background: rgba(239,68,68,0.12);  color: #ef4444; }
.channel-badge--ppv  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.channel-badge--247  { background: rgba(83,58,253,0.10);  color: var(--primary); }

/* ================================================================
   SENDER PAGE — Sport Section
   ================================================================ */
.sport-section {
  background: linear-gradient(135deg, #0a0a1a 0%, #0f0f2e 50%, #080818 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sport-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(83,58,253,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.sport-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0;
}
.sport-tile {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
  cursor: default;
}
.sport-tile:hover {
  background: rgba(83,58,253,0.20);
  border-color: rgba(83,58,253,0.45);
  transform: translateY(-3px);
}
.sport-tile-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
.sport-tile-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  display: block;
  margin-bottom: 6px;
}
.sport-tile-spec {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
  display: block;
}

/* ================================================================
   SENDER PAGE — Tech Callout
   ================================================================ */
.sender-tech-callout {
  background: linear-gradient(135deg, rgba(83,58,253,0.08) 0%, rgba(83,58,253,0.04) 100%);
  border: 1px solid rgba(83,58,253,0.20);
  border-radius: 16px;
  padding: 32px 36px;
  margin: 32px 0;
}
.sender-tech-callout-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}
.sender-tech-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.sender-tech-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--slate);
  line-height: 1.55;
}
.sender-tech-list li::before {
  content: '✓';
  flex-shrink: 0;
  color: var(--primary);
  font-weight: 700;
  margin-top: 1px;
}

/* Trust Badges row — sender hero */
.sender-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 32px;
}
.sender-trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  background: var(--white);
  border: 1px solid rgba(83,58,253,0.18);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(83,58,253,0.07);
}
.stb-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.stb-body { display: flex; flex-direction: column; gap: 2px; }
.stb-title { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.stb-sub   { font-size: 0.8125rem; color: var(--slate); }

@media (max-width: 820px) {
  .sender-trust-badges { gap: 10px; }
  .sender-trust-badge  { flex: 1 1 calc(50% - 6px); padding: 12px 14px; }
}
@media (max-width: 480px) {
  .sender-trust-badge  { flex: 1 1 100%; }
}

/* Hero section for sender.php — dark with bg image overlay */
.sender-hero {
  position: relative;
  background: #08080f;
  overflow: hidden;
  padding: 110px 0 90px;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ================================================================
   SENDER HERO — Crossfade Slideshow
   3 Bilder × 5 s sichtbar = 15 s Zyklus (identisches Muster wie index.php)
   ================================================================ */
.sender-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sender-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  animation: sender-slide-fade 15s linear infinite;
  will-change: opacity;
}
.sender-hero-slide:nth-child(1) { animation-delay: -1s; }
.sender-hero-slide:nth-child(2) { animation-delay:  4s; }
.sender-hero-slide:nth-child(3) { animation-delay:  9s; }

@keyframes sender-slide-fade {
  0%, 33.33%, 100% { opacity: 0; }
  2%, 31.33%       { opacity: 1; }
}

/* Reduzierte Bewegung — Barrierefreiheit (WCAG 2.1) */
@media (prefers-reduced-motion: reduce) {
  .sender-hero-slide              { animation: none; opacity: 0; }
  .sender-hero-slide:nth-child(1) { opacity: 1; }
}

/* ================================================================
   MOBILE HERO FIX — Zoom-Problem lösen
   ----------------------------------------------------------------
   Problem: object-fit:cover + portrait-Viewport + landscape-Bild
   → Bild wird 2.5× vergrößert (Berechnung: 528px/211px = 2.5×)

   Lösung: .sender-hero-slides auf natürliche 16:9-Höhe begrenzen
     56.25vw = (9÷16) × Viewport-Breite = exakte Originalhöhe → kein Zoom
   ================================================================ */
@media (max-width: 820px) {
  /* Bildcontainer: nur so hoch wie das Bild nativ ist */
  .sender-hero-slides {
    bottom: auto;
    height: 56.25vw;     /* 16:9 — bei 375px = 211px; kein Zoom */
  }
  .sender-hero-slide {
    object-position: center center;
  }
  /* Overlay: oben hell (Bild sichtbar), unten solid-dark (Text lesbar) */
  .sender-hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.40) 0%,
      rgba(0,0,0,0.30) 20%,
      rgba(8,8,15,0.88) 55%,
      rgba(8,8,15,1.00) 85%
    );
  }
}

@media (max-width: 480px) {
  /* Kleinste Smartphones: gleiche Verhältnisformel */
  .sender-hero-slides { height: 56.25vw; }
}

/* Dark gradient overlay — sits above slides, below text */
.sender-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.62) 40%,
    rgba(0,0,0,0.90) 100%
  );
  pointer-events: none;
}

/* Content sits above overlay */
.sender-hero > .container {
  position: relative;
  z-index: 3;
}

/* Text & element color overrides for dark hero */
.sender-hero .section-headline {
  color: var(--white);
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.sender-hero .section-sub {
  color: rgba(255,255,255,0.82);
}
.sender-hero p[style*="color:var(--slate)"],
.sender-hero p[style*="color: var(--slate)"] {
  color: rgba(255,255,255,0.78) !important;
}
.sender-hero .direct-answer-box {
  background: rgba(83,58,253,0.20);
  border-left-color: rgba(140,120,255,0.80);
}
.sender-hero .direct-answer-box p,
.sender-hero .direct-answer-box .dab-label {
  color: rgba(255,255,255,0.92);
}
.sender-hero .sender-trust-badge {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.sender-hero .stb-title { color: var(--white); }
.sender-hero .stb-sub   { color: rgba(255,255,255,0.65); }
.sender-hero .sender-stat-bar {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
.sender-hero .sender-stat-value { color: var(--white); }
.sender-hero .sender-stat-label { color: rgba(255,255,255,0.62); }
.sender-hero .trust-item        { color: rgba(255,255,255,0.70); }
.sender-hero .trust-bar         { border-color: transparent; }

.sender-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
.sender-stat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.sender-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sender-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.sender-stat-label {
  font-size: 0.8125rem;
  color: var(--slate);
}

/* Sport Tech Box — dark section variant */
.sport-tech-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(83,58,253,0.35);
  border-radius: 16px;
  padding: 28px 32px;
  margin: 36px 0;
}
.sport-tech-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sport-tech-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sport-tech-specs li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stspec-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #a89cff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stspec-value {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.80);
  line-height: 1.55;
}

@media (max-width: 820px) {
  .sport-tech-specs { grid-template-columns: 1fr; gap: 14px; }
  .sport-tech-box   { padding: 22px 18px; }
}

/* ================================================================
   SECTION 7 — INTERNATIONALE SENDER: intl-grid + compare-table
   ================================================================ */
.intl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.intl-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px 22px;
  transition: border-color 0.25s, background 0.25s;
}
.intl-card:hover {
  border-color: rgba(83,58,253,0.55);
  background: rgba(83,58,253,0.1);
}
.intl-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.intl-card-flag {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.intl-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.3;
}
.intl-card-count {
  font-size: 0.8125rem;
  color: #a78bfa;
  font-weight: 500;
}
.intl-card-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin: 0 0 14px;
}
.intl-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Comparison tables (Section 7 + Section 8) */
.intl-compare-wrapper {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 28px 28px 24px;
}
.intl-compare-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.intl-compare-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  margin: 0 0 20px;
  line-height: 1.65;
}
.intl-compare-note {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  margin: 12px 0 0;
  line-height: 1.6;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.compare-table th,
.compare-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
}
.compare-table thead th {
  background: rgba(83,58,253,0.15);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}
.compare-table tbody td {
  color: rgba(255,255,255,0.75);
}
.compare-table tbody tr:hover td {
  background: rgba(255,255,255,0.04);
}
.compare-table .col-iptv {
  background: rgba(83,58,253,0.12);
  color: #c4b5fd;
  font-weight: 500;
}
.compare-table thead .col-iptv {
  background: rgba(83,58,253,0.35);
  color: #fff;
}
.compare-table .col-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 2px;
}
.compare-table .val-yes   { color: #4ade80; }
.compare-table .val-no    { color: rgba(255,255,255,0.35); }
.compare-table .val-partial { color: #fbbf24; }
.compare-footer-row td {
  background: rgba(255,255,255,0.05);
  font-weight: 600;
  border-top: 2px solid rgba(255,255,255,0.15);
  color: #fff !important;
}
.compare-footer-row .col-iptv {
  background: rgba(83,58,253,0.25) !important;
  color: #a78bfa !important;
}

/* Section 8 tech tables (light background) */
.section:not(.section-dark) .compare-table th,
.section:not(.section-dark) .compare-table td {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.section:not(.section-dark) .compare-table thead th {
  background: rgba(83,58,253,0.08);
  color: #1e1b4b;
}
.section:not(.section-dark) .compare-table tbody td {
  color: #374151;
}
.section:not(.section-dark) .compare-table .col-iptv {
  background: rgba(83,58,253,0.07);
  color: #4c1d95;
}
.section:not(.section-dark) .compare-table thead .col-iptv {
  background: rgba(83,58,253,0.18);
  color: #1e1b4b;
}
.section:not(.section-dark) .compare-table .val-yes   { color: #16a34a; }
.section:not(.section-dark) .compare-table .val-no    { color: #9ca3af; }
.section:not(.section-dark) .compare-table .val-partial { color: #d97706; }
.section:not(.section-dark) .compare-footer-row td    { color: #111827 !important; background: rgba(0,0,0,0.04); }
.section:not(.section-dark) .compare-footer-row .col-iptv { background: rgba(83,58,253,0.12) !important; color: #4c1d95 !important; }

/* ================================================================
   SECTION 8 — TECHNISCHER TIEFBLICK
   ================================================================ */
.tech-section-h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0 0 4px;
  line-height: 1.4;
}
.tech-section-intro {
  font-size: 0.9375rem;
  color: var(--text-secondary, #374151);
  line-height: 1.75;
  margin: 0;
  max-width: 820px;
}
.tech-note {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.65;
  background: rgba(83,58,253,0.05);
  border-left: 3px solid rgba(83,58,253,0.35);
  padding: 10px 16px;
  border-radius: 0 8px 8px 0;
}

/* Anti-Freeze deep-dive cards */
.tech-deep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.tech-deep-card {
  background: #f8f7ff;
  border: 1px solid rgba(83,58,253,0.12);
  border-radius: 14px;
  padding: 22px 20px;
}
.tech-deep-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1e1b4b;
  margin: 0 0 10px;
  line-height: 1.4;
}
.tech-deep-text {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.75;
  margin: 0;
}

/* Uptime stats */
.uptime-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.uptime-stat-card {
  background: linear-gradient(135deg, rgba(83,58,253,0.07) 0%, rgba(83,58,253,0.02) 100%);
  border: 1px solid rgba(83,58,253,0.18);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}
.uptime-stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #5338fd;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}
.uptime-stat-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e1b4b;
  margin-bottom: 10px;
}
.uptime-stat-detail {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.65;
  margin: 0;
}

/* ================================================================
   SECTION 12 — FINAL SUMMARY BOX (O02 GEO) & CTA
   ================================================================ */
.final-summary-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 36px 40px;
}
.fsb-label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #a78bfa;
  margin: 0 0 14px;
}
.fsb-intro {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.78;
  margin: 0 0 24px;
}
.fsb-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
.fsb-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
}
.fsb-check {
  color: #4ade80;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.fsb-closing {
  font-size: 1rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
}

.final-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.final-cta-block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ================================================================
   SECTION 9 — VOD & MEDIATHEK
   ================================================================ */
.vod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.vod-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s, background 0.25s;
}
.vod-card:hover {
  border-color: rgba(83,58,253,0.5);
  background: rgba(83,58,253,0.1);
}
.vod-icon {
  font-size: 2rem;
  line-height: 1;
}
.vod-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}
.vod-card-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}
.vod-count {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #a78bfa;
}

/* VOD-Paket-Callout */
.vod-paket-callout {
  background: rgba(83,58,253,0.15);
  border: 1px solid rgba(83,58,253,0.3);
  border-radius: 16px;
  padding: 24px 28px;
  margin-top: 32px;
}
.vod-paket-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
}
.vod-paket-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.vod-paket-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}
.vod-paket-item.vod-paket-featured {
  background: rgba(83,58,253,0.25);
  border-color: rgba(83,58,253,0.5);
}
.vp-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vp-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}
.vp-count {
  font-size: 1rem;
  font-weight: 800;
  color: #c4b5fd;
}
.vp-quality {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}

/* direct-answer-box dark variant */
.dab-dark {
  background: rgba(83,58,253,0.12);
  border-color: rgba(83,58,253,0.35);
}
.dab-dark .dab-label {
  color: rgba(255,255,255,0.5);
}

/* ================================================================
   SECTION 10 — PAKETVERGLEICH (Content-fokussiert)
   ================================================================ */
.paket-table-wrapper {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0,0,0,0.08);
}
.paket-table thead th {
  white-space: nowrap;
  font-size: 0.8125rem;
}
.paket-table td:first-child {
  white-space: nowrap;
  font-size: 0.875rem;
}

/* Paket Summary Cards */
.paket-summary {
  background: #f8f7ff;
  border: 1px solid rgba(83,58,253,0.12);
  border-radius: 16px;
  padding: 28px;
}
.paket-summary-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e1b4b;
  margin: 0 0 20px;
  line-height: 1.4;
}
.paket-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.paket-summary-card {
  background: #fff;
  border: 1px solid rgba(83,58,253,0.1);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.paket-summary-card.paket-summary-featured {
  border-color: rgba(83,58,253,0.4);
  background: rgba(83,58,253,0.05);
  box-shadow: 0 0 0 2px rgba(83,58,253,0.15);
}
.psc-icon {
  font-size: 1.5rem;
}
.psc-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1e1b4b;
  margin: 0;
}
.psc-rec {
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* ================================================================
   SENDER PAGE — Responsive Breakpoints
   ================================================================ */
@media (max-width: 1024px) {
  .channel-grid        { grid-template-columns: repeat(2, 1fr); }
  .channel-grid--4col  { grid-template-columns: repeat(2, 1fr); }
  .sport-tiles-grid    { grid-template-columns: repeat(2, 1fr); }
  .sender-tech-list    { grid-template-columns: 1fr; }
  .tech-deep-grid      { grid-template-columns: 1fr; }
  .uptime-grid         { grid-template-columns: repeat(3, 1fr); }
  .vod-grid            { grid-template-columns: repeat(2, 1fr); }
  .vod-paket-grid      { grid-template-columns: repeat(2, 1fr); }
  .paket-summary-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .sender-sticky-nav { top: 56px; }
  .sender-sticky-nav-inner { padding: 0 16px; }
  .sender-nav-link { padding: 12px 14px; font-size: 0.8125rem; }
  /* Hero: padding-top = Abstand bis H1 sichtbar IM Bildbereich (56.25vw); min-height: auto */
  .sender-hero { padding: 56px 0 60px; min-height: auto; }
  .sender-stat-bar { gap: 16px 20px; padding: 18px 20px; }
  .sender-stat-value { font-size: 1.25rem; }
  .sender-tech-callout { padding: 24px 20px; }
  .channel-grid--2col  { grid-template-columns: 1fr; }
  .intl-grid           { grid-template-columns: 1fr; }
  .intl-compare-wrapper { padding: 20px 16px; }
  .uptime-grid         { grid-template-columns: 1fr; gap: 12px; }
  .uptime-stat-card    { padding: 18px 16px; }
  .uptime-stat-number  { font-size: 1.625rem; }
  .vod-grid            { grid-template-columns: 1fr; }
  .vod-paket-callout   { padding: 20px 16px; }
  .paket-summary       { padding: 20px 16px; }
  .paket-summary-grid  { grid-template-columns: repeat(2, 1fr); }
  .final-summary-box   { padding: 24px 20px; }
  .fsb-checklist       { grid-template-columns: 1fr; gap: 8px; }
  .final-img-grid      { grid-template-columns: 1fr; gap: 14px; }
  .final-cta-block     { flex-direction: column; gap: 12px; }
  .final-cta-block .btn { width: 100%; max-width: 360px; }
}

@media (max-width: 480px) {
  .sender-hero         { padding: 48px 0 48px; }
  .channel-grid        { grid-template-columns: 1fr; }
  .channel-grid--4col  { grid-template-columns: repeat(2, 1fr); }
  .sport-tiles-grid    { grid-template-columns: repeat(2, 1fr); }
  .sport-tile          { padding: 16px 12px; }
  .sport-tile-icon     { font-size: 1.5rem; }
  .sender-stat-bar     { flex-direction: column; gap: 12px; }
  .channel-category-card { padding: 20px 18px 16px; }
  .compare-table th,
  .compare-table td    { padding: 8px 10px; font-size: 0.8125rem; }
  .tech-deep-card      { padding: 16px 14px; }
  .intl-card           { padding: 18px 16px; }
  .vod-card            { padding: 18px 14px; }
  .vod-paket-grid      { grid-template-columns: repeat(2, 1fr); }
  .paket-summary-grid  { grid-template-columns: 1fr; }
  .paket-table td:first-child { white-space: normal; }
}

/* ================================================================
   PREISE.PHP — Complete Component Styles
   §3 Pricing Cards · §5 VOD Bars · §6 Why-Grid
   §8 Profile-Grid · §9 Pay-Steps
   ================================================================ */

/* =========================================
   §3 — PRICING CARDS
   ========================================= */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 40px 0 0;
  align-items: stretch;
}

.pc-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 2px 8px rgba(6,27,49,0.05);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.pc-card:hover {
  box-shadow: 0 8px 28px rgba(6,27,49,0.10);
  transform: translateY(-3px);
}

/* PREMIUM — Featured */
.pc-card--featured {
  border-color: var(--purple);
  border-width: 2px;
  box-shadow: 0 6px 32px rgba(83,58,253,0.20);
}
.pc-card--featured:hover {
  box-shadow: 0 12px 40px rgba(83,58,253,0.30);
  transform: translateY(-4px);
}

/* FAMILY — Best value per device */
.pc-card--value {
  border-color: #16a34a;
  border-width: 2px;
}
.pc-card--value:hover {
  box-shadow: 0 8px 28px rgba(22,163,74,0.18);
}

/* Badge chip */
.pc-badge {
  display: block;
  height: 24px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 0 10px;
  line-height: 24px;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-badge--popular {
  background: rgba(83,58,253,0.10);
  color: var(--purple);
}
.pc-badge--value {
  background: rgba(22,163,74,0.10);
  color: #16a34a;
}

/* Card text elements */
.pc-name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.pc-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.04em;
}
.pc-price .pc-period {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--slate);
  letter-spacing: 0;
}
.pc-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* Feature list */
.pc-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.pc-features li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.045);
  font-size: 0.8125rem;
  color: var(--slate);
  line-height: 1.45;
}
.pc-features li:last-child { border-bottom: none; }

/* Full-width card button */
.btn-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
  border: 1.5px solid var(--purple-light);
  background: transparent;
  color: var(--purple);
}
.btn-pc:hover {
  background: var(--purple-sub);
  color: var(--purple);
  box-shadow: none;
}
.pc-card--featured .btn-pc {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}
.pc-card--featured .btn-pc:hover {
  background: var(--purple-hover);
  color: var(--white);
  box-shadow: rgba(83,58,253,0.35) 0px 4px 12px;
}

/* =========================================
   §5 — VOD PROGRESS BARS
   ========================================= */
.vod-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 40px;
}
.vod-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 82px;
  align-items: center;
  gap: 14px;
}
.vod-bar-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}
.vod-bar-track {
  height: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.vod-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
}
.vod-bar-fill--standard { background: rgba(255,255,255,0.38); }
.vod-bar-fill--premium  { background: var(--purple); }
.vod-bar-fill--family   { background: #2563eb; }
.vod-bar-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgba(255,255,255,0.62);
  text-align: right;
  white-space: nowrap;
}

/* =========================================
   §6 — WHY GRID
   ========================================= */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px 0 32px;
}
.why-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: 0 2px 8px rgba(6,27,49,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
}
.why-card:hover {
  box-shadow: 0 8px 24px rgba(83,58,253,0.09);
  transform: translateY(-2px);
}

/* =========================================
   §8 — PROFILE GRID
   ========================================= */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 36px 0 32px;
}
.profile-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: 0 2px 8px rgba(6,27,49,0.05);
  transition: box-shadow 0.2s, transform 0.2s;
}
.profile-card:hover {
  box-shadow: 0 8px 24px rgba(6,27,49,0.10);
  transform: translateY(-2px);
}
.profile-icon {
  font-size: 2.25rem;
  margin-bottom: 14px;
  display: block;
  line-height: 1;
}
.profile-plan {
  display: inline-block;
  background: rgba(83,58,253,0.08);
  color: var(--purple);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.profile-price {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--ink);
  margin-top: 8px;
  letter-spacing: -0.02em;
}

/* =========================================
   §9 — PAY STEPS
   ========================================= */
.pay-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px 0 32px;
}
.pay-step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 22px 26px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(6,27,49,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
}
.pay-step:hover {
  box-shadow: 0 8px 24px rgba(83,58,253,0.09);
  transform: translateY(-2px);
}
.pay-step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-size: 1.375rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 4px 16px rgba(83,58,253,0.30);
}

/* =========================================
   RESPONSIVE — Mobile-First Breakpoints
   ========================================= */

/* Large tablet / small laptop → 3 pricing cols */
@media (max-width: 1200px) {
  .pc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet landscape → 2 pricing cols + stack others */
@media (max-width: 860px) {
  .pc-grid    { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pc-price   { font-size: 1.5rem; }
  .pc-name    { font-size: 0.875rem; }
  .why-grid   { grid-template-columns: 1fr; gap: 16px; }
  .pay-steps  { grid-template-columns: 1fr; gap: 16px; }
  .vod-bar-row { grid-template-columns: 88px 1fr 70px; gap: 10px; }
  .vod-bar-label { font-size: 0.8125rem; }
}

/* Mobile portrait → 1 col everything */
@media (max-width: 540px) {
  .pc-grid      { grid-template-columns: 1fr; gap: 14px; }
  .pc-card      { padding: 22px 16px 20px; }
  .pc-price     { font-size: 1.625rem; }
  .profile-grid { grid-template-columns: 1fr; gap: 14px; }
  .profile-card { padding: 24px 18px; }
  .pay-step     { padding: 24px 16px 20px; }
  .vod-bar-row  { grid-template-columns: 76px 1fr 62px; gap: 8px; }
  .vod-bar-label { font-size: 0.75rem; }
  .vod-bar-count { font-size: 0.75rem; }
  .why-card     { padding: 22px 18px; }
}

/* ================================================================
   PREISE LUXURY — Dark Premium Visual Upgrade
   §3 Glassmorphism · §6 Shimmer · §8 Hover Lines · §9 Pulse
   Scroll Reveal · Floating PREMIUM card · Gold accent
   ================================================================ */

/* -----------------------------------------------
   §3 — Dark luxury background for pricing section
   ----------------------------------------------- */
#pakete {
  background: linear-gradient(160deg, #06060e 0%, #0c0c1a 45%, #080811 100%);
  position: relative;
  overflow: hidden;
}

/* Dot-grid overlay */
#pakete::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(83,58,253,0.16) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

/* Ambient purple blob top-center */
#pakete::after {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 420px;
  background: radial-gradient(ellipse at center,
    rgba(83,58,253,0.22) 0%,
    rgba(83,58,253,0.06) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#pakete > .container { position: relative; z-index: 2; }

/* Dark text overrides */
#pakete .section-headline { color: var(--white) !important; }
#pakete p.section-sub     { color: rgba(255,255,255,0.65) !important; }
#pakete > .container > p  { color: rgba(255,255,255,0.55) !important; }
#pakete a.btn-primary:not(.btn-pc) { color: var(--white); }

/* ---- Glassmorphism cards ---- */
#pakete .pc-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 4px 24px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.07);
  transition: background 0.3s, border-color 0.3s,
              box-shadow 0.3s, transform 0.3s;
}
@supports (backdrop-filter: blur(1px)) {
  #pakete .pc-card {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}
#pakete .pc-card:hover {
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 10px 44px rgba(0,0,0,0.55),
              0 0 0 1px rgba(83,58,253,0.22),
              inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-5px);
}

/* Card text on dark bg */
#pakete .pc-name         { color: rgba(255,255,255,0.96); }
#pakete .pc-price        { color: var(--white); }
#pakete .pc-period       { color: rgba(255,255,255,0.48); }
#pakete .pc-divider      { border-top-color: rgba(255,255,255,0.08); }
#pakete .pc-features li  { color: rgba(255,255,255,0.72);
                            border-bottom-color: rgba(255,255,255,0.07); }

/* ---- PREMIUM — Gold luxury treatment ---- */
#pakete .pc-card--featured {
  background: rgba(201,168,76,0.06);
  border-color: rgba(201,168,76,0.52);
  border-width: 1.5px;
  box-shadow: 0 0 48px rgba(201,168,76,0.16),
              0 10px 44px rgba(83,58,253,0.28),
              0 22px 64px rgba(0,0,0,0.52),
              inset 0 1px 0 rgba(201,168,76,0.22);
  animation: luxury-float 5s ease-in-out infinite;
}
#pakete .pc-card--featured:hover {
  border-color: rgba(201,168,76,0.80);
  box-shadow: 0 0 70px rgba(201,168,76,0.24),
              0 14px 56px rgba(83,58,253,0.36),
              0 26px 72px rgba(0,0,0,0.56);
  transform: translateY(-9px);
  animation-play-state: paused;
}
#pakete .pc-badge--popular {
  background: linear-gradient(120deg, rgba(201,168,76,0.28), rgba(212,182,90,0.16));
  color: #e2c068;
  border: 1px solid rgba(201,168,76,0.42);
}
#pakete .pc-card--featured .pc-name { color: #f0d080; }

/* ---- FAMILY — Green glass ---- */
#pakete .pc-card--value {
  background: rgba(22,163,74,0.05);
  border-color: rgba(22,163,74,0.42);
}
#pakete .pc-card--value:hover {
  border-color: rgba(22,163,74,0.72);
  box-shadow: 0 0 32px rgba(22,163,74,0.14),
              0 10px 40px rgba(0,0,0,0.48);
}
#pakete .pc-badge--value {
  background: rgba(22,163,74,0.20);
  color: #4ade80;
  border: 1px solid rgba(22,163,74,0.35);
}

/* ---- Buttons inside dark section ---- */
#pakete .btn-pc {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.80);
}
#pakete .btn-pc:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.36);
  color: var(--white);
}
#pakete .pc-card--featured .btn-pc {
  background: linear-gradient(135deg, #c9a84c 0%, #e2c068 100%);
  border-color: transparent;
  color: #06060e;
  font-weight: 700;
  letter-spacing: 0.01em;
}
#pakete .pc-card--featured .btn-pc:hover {
  background: linear-gradient(135deg, #dbb95a 0%, #f0cc72 100%);
  box-shadow: 0 4px 20px rgba(201,168,76,0.45);
}
#pakete .btn-primary.btn-lg {
  background: var(--purple);
  color: var(--white);
}

/* Float animation for PREMIUM */
@keyframes luxury-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* -----------------------------------------------
   §6 — Shimmer top-border on why-cards
   ----------------------------------------------- */
#guenstig .why-card {
  position: relative;
  overflow: hidden;
}
#guenstig .why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--purple) 0%,
    #8b5cf6 40%,
    #c084fc 60%,
    var(--purple) 100%);
  background-size: 200% 100%;
  animation: shimmer-gradient 3.5s linear infinite;
}
@keyframes shimmer-gradient {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -----------------------------------------------
   §8 — Profile cards: bottom-sweep hover line
   ----------------------------------------------- */
#empfehlung .profile-card {
  position: relative;
  overflow: hidden;
}
#empfehlung .profile-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: -100%; right: 100%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
  transition: left 0.4s ease, right 0.4s ease;
}
#empfehlung .profile-card:hover::after {
  left: 0; right: 0;
}

/* -----------------------------------------------
   §9 — Pay steps: pulsing glow ring on numbers
   ----------------------------------------------- */
#zahlung .pay-step-num {
  box-shadow: 0 0 0 8px rgba(83,58,253,0.10),
              0 4px 18px rgba(83,58,253,0.38);
  position: relative;
}
#zahlung .pay-step-num::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(83,58,253,0.30);
  animation: pulse-ring 2.4s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  60%       { transform: scale(1.22); opacity: 0;   }
}

/* -----------------------------------------------
   SCROLL REVEAL — luxury-reveal / stagger
   ----------------------------------------------- */
.luxury-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.70s cubic-bezier(0.22,1,0.36,1),
              transform 0.70s cubic-bezier(0.22,1,0.36,1);
}
.luxury-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.luxury-reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.luxury-reveal-stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.04s; }
.luxury-reveal-stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.10s; }
.luxury-reveal-stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.16s; }
.luxury-reveal-stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.22s; }
.luxury-reveal-stagger.is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.28s; }

@media (prefers-reduced-motion: reduce) {
  #pakete .pc-card--featured { animation: none; }
  #zahlung .pay-step-num::after { animation: none; }
  #guenstig .why-card::before { animation: none; }
  .luxury-reveal,
  .luxury-reveal-stagger > * {
    opacity: 1; transform: none; transition: none;
  }
}

/* ================================================================
   GERÄTE PAGE — geraete.php CSS
   Dark Hero + §3 Device Tabs + §4 App Matrix + §5 Smart TV
   ================================================================ */

/* Hero: identische Architektur wie preise-hero / sender-hero */
.geraete-hero {
  padding: 110px 0 90px;
  min-height: 78vh;
}
@media (max-width: 820px) {
  .geraete-hero { padding: 80px 0 64px; min-height: auto; }
}
@media (max-width: 480px) {
  .geraete-hero { padding: 56px 0 48px; }
}

/* Trust Bar — Gerät-Icons etwas enger */
.geraete-hero .trust-bar {
  gap: 10px;
  flex-wrap: wrap;
}
.geraete-hero .trust-item {
  font-size: 0.78rem;
  padding: 5px 10px;
}

/* -----------------------------------------------
   §3 — CSS-only Device Tab System
   Mobile-first: alle Panels sichtbar und gestapelt
   Desktop ≥ 768px: Radio-Tab-Verhalten aktiv
   ----------------------------------------------- */

/* Radio inputs: always off-screen */
.dt-r {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Tab grid — mobile: horizontaler Scroll */
.device-tab-grid {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.device-tab-grid::-webkit-scrollbar { display: none; }

/* Tab label tile */
.device-tab-label {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 14px 10px;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.10);
  background: var(--white);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
  min-width: 88px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.device-tab-label:hover {
  border-color: var(--primary);
  background: rgba(83,58,253,0.04);
}
.dtl-icon { font-size: 1.5rem; line-height: 1; }
.dtl-name { font-size: 0.75rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.dtl-badge {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(83,58,253,0.08);
  border-radius: 6px;
  padding: 2px 6px;
}

/* Device panels — mobile: all visible and stacked */
.device-panels-wrap { margin-top: 8px; }
.device-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 16px;
  border: 1.5px solid rgba(0,0,0,0.08);
  background: var(--white);
}
.device-panel:last-child { margin-bottom: 0; }

.dp-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.dp-text p { font-size: 0.9rem; line-height: 1.75; color: var(--slate); margin: 0; }
.dp-badges {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dpb {
  font-size: 0.775rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
}
.dpb--yes     { color: #16a34a; background: rgba(22,163,74,0.08);   border-color: rgba(22,163,74,0.25); }
.dpb--partial { color: #d97706; background: rgba(217,119,6,0.08);  border-color: rgba(217,119,6,0.25); }
.dpb--no      { color: var(--slate); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); }

/* Desktop ≥ 768px: activate tab behavior */
@media (min-width: 768px) {
  .device-tab-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow-x: visible;
    gap: 10px;
  }

  /* Hide all panels by default */
  .device-panel { display: none; }

  /* Show the checked panel as 2-col layout */
  #dt-1:checked ~ .device-panels-wrap .dp-1,
  #dt-2:checked ~ .device-panels-wrap .dp-2,
  #dt-3:checked ~ .device-panels-wrap .dp-3,
  #dt-4:checked ~ .device-panels-wrap .dp-4,
  #dt-5:checked ~ .device-panels-wrap .dp-5,
  #dt-6:checked ~ .device-panels-wrap .dp-6,
  #dt-7:checked ~ .device-panels-wrap .dp-7 {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 36px;
    align-items: start;
    margin-bottom: 0;
    animation: panel-in 0.28s cubic-bezier(0.22,1,0.36,1) both;
  }

  /* Active label style */
  #dt-1:checked ~ .device-tab-grid label[for="dt-1"],
  #dt-2:checked ~ .device-tab-grid label[for="dt-2"],
  #dt-3:checked ~ .device-tab-grid label[for="dt-3"],
  #dt-4:checked ~ .device-tab-grid label[for="dt-4"],
  #dt-5:checked ~ .device-tab-grid label[for="dt-5"],
  #dt-6:checked ~ .device-tab-grid label[for="dt-6"],
  #dt-7:checked ~ .device-tab-grid label[for="dt-7"] {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(83,58,253,0.28);
  }
  #dt-1:checked ~ .device-tab-grid label[for="dt-1"] .dtl-name,
  #dt-2:checked ~ .device-tab-grid label[for="dt-2"] .dtl-name,
  #dt-3:checked ~ .device-tab-grid label[for="dt-3"] .dtl-name,
  #dt-4:checked ~ .device-tab-grid label[for="dt-4"] .dtl-name,
  #dt-5:checked ~ .device-tab-grid label[for="dt-5"] .dtl-name,
  #dt-6:checked ~ .device-tab-grid label[for="dt-6"] .dtl-name,
  #dt-7:checked ~ .device-tab-grid label[for="dt-7"] .dtl-name { color: #fff; }
  #dt-1:checked ~ .device-tab-grid label[for="dt-1"] .dtl-badge,
  #dt-2:checked ~ .device-tab-grid label[for="dt-2"] .dtl-badge,
  #dt-3:checked ~ .device-tab-grid label[for="dt-3"] .dtl-badge,
  #dt-4:checked ~ .device-tab-grid label[for="dt-4"] .dtl-badge,
  #dt-5:checked ~ .device-tab-grid label[for="dt-5"] .dtl-badge,
  #dt-6:checked ~ .device-tab-grid label[for="dt-6"] .dtl-badge,
  #dt-7:checked ~ .device-tab-grid label[for="dt-7"] .dtl-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
  }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tablet 768–1099: 4-col tab grid (wraps) */
@media (min-width: 768px) and (max-width: 1099px) {
  .device-tab-grid { grid-template-columns: repeat(4, 1fr); }
  #dt-1:checked ~ .device-panels-wrap .dp-1,
  #dt-2:checked ~ .device-panels-wrap .dp-2,
  #dt-3:checked ~ .device-panels-wrap .dp-3,
  #dt-4:checked ~ .device-panels-wrap .dp-4,
  #dt-5:checked ~ .device-panels-wrap .dp-5,
  #dt-6:checked ~ .device-panels-wrap .dp-6,
  #dt-7:checked ~ .device-panels-wrap .dp-7 {
    grid-template-columns: 1fr;
  }
}

/* Section image break */
.section-img-break { margin: 0; }

/* -----------------------------------------------
   §4 — App Matrix Table
   ----------------------------------------------- */
.app-matrix .compare-table th,
.app-matrix .compare-table td {
  text-align: center;
  font-size: 0.875rem;
}
.app-matrix .compare-table td:first-child,
.app-matrix .compare-table th:first-child {
  text-align: left;
  min-width: 160px;
}
.am-yes     { color: #16a34a; font-weight: 700; font-size: 1rem; }
.am-partial { color: #d97706; font-weight: 700; font-size: 1rem; }
.am-no      { color: #94a3b8; font-size: 1rem; }

/* -----------------------------------------------
   §5 — Smart TV Badges
   ----------------------------------------------- */
.smart-tv-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(83,58,253,0.10);
  color: var(--primary);
  border: 1px solid rgba(83,58,253,0.20);
  margin-bottom: 2px;
}
.smart-tv-badge--lg      { background: rgba(193,43,43,0.08); color: #c12b2b; border-color: rgba(193,43,43,0.20); }
.smart-tv-badge--android { background: rgba(22,163,74,0.08); color: #16a34a; border-color: rgba(22,163,74,0.22); }

.compat-badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cb {
  font-size: 0.775rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
}
.cb--yes { color: #16a34a; background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.25); }

/* -----------------------------------------------
   Reduced Motion: disable panel-in animation
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .device-panel { animation: none; }
  @keyframes panel-in { from { opacity:1; transform:none; } }
}

/* ===============================================================
   §6 — IPTV Box Kaufen Schweiz — Box Compare Grid
   =============================================================== */
.box-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 36px 0;
}
@media (min-width: 700px) {
  .box-compare-grid { grid-template-columns: repeat(3, 1fr); }
}

.box-compare-card {
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 28px 22px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 0.25s, transform 0.25s;
}
.box-compare-card:hover {
  box-shadow: 0 8px 40px rgba(83,58,253,0.12);
  transform: translateY(-3px);
}
.box-compare-card--featured {
  border-color: var(--purple);
  box-shadow: 0 4px 32px rgba(83,58,253,0.16);
}

/* Badge chip */
.bcc-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
  min-height: 22px;
}
.bcc-badge--primary  { background: rgba(83,58,253,0.10); color: var(--purple); border: 1px solid rgba(83,58,253,0.22); }
.bcc-badge--gold     { background: rgba(218,165,32,0.12); color: #b8860b; border: 1px solid rgba(218,165,32,0.30); }
.bcc-badge--green    { background: rgba(21,190,83,0.10); color: var(--success-text); border: 1px solid rgba(21,190,83,0.28); }
.bcc-badge--empty    { background: transparent; border: none; color: transparent; pointer-events: none; }

.bcc-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1;
}
.bcc-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.bcc-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 10px 0 4px;
}
.bcc-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
}
.bcc-qual {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slate);
  background: rgba(100,116,141,0.10);
  border-radius: 6px;
  padding: 2px 8px;
}

.bcc-specs {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.bcc-specs li {
  font-size: 0.85rem;
  color: var(--slate);
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.bcc-specs li:last-child { border-bottom: none; }

.bcc-fazit {
  margin-top: 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--purple);
  background: rgba(83,58,253,0.06);
  border-radius: 10px;
  padding: 10px 14px;
  line-height: 1.5;
}

/* Sunrise Box callout */
.sunrise-box-callout {
  margin: 32px 0 0;
  background: rgba(234,34,97,0.06);
  border: 1.5px solid rgba(234,34,97,0.22);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.sunrise-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.sunrise-box-callout h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #c12b2b;
  margin-bottom: 6px;
}
.sunrise-box-callout p {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
}

/* ===============================================================
   §7 — Einsparungs-Rechner (Savings Box)
   =============================================================== */
.savings-box {
  background: linear-gradient(135deg, #061b31 0%, #0e1f3a 100%);
  border-radius: 18px;
  padding: 32px 28px;
  margin: 36px 0 0;
  color: #fff;
}
.savings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.savings-header h3 {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.savings-header-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.savings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .savings-grid { grid-template-columns: repeat(3, 1fr); }
}

.savings-item {
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
}
.savings-item--bad  { background: rgba(234,34,97,0.15); border: 1px solid rgba(234,34,97,0.25); }
.savings-item--good { background: rgba(83,58,253,0.18); border: 1px solid rgba(83,58,253,0.30); }
.savings-item--best { background: rgba(21,190,83,0.15); border: 1px solid rgba(21,190,83,0.28); }

.savings-item-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}
.savings-item-amount {
  font-size: 1.625rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 2px;
}
.savings-item-desc {
  font-size: 0.775rem;
  opacity: 0.70;
  line-height: 1.4;
}

.savings-note {
  margin-top: 20px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 16px;
}

/* -----------------------------------------------
   §7 — Table Best Row Highlight
   ----------------------------------------------- */
.geraete-row-best td {
  background: rgba(83,58,253,0.06) !important;
  font-weight: 600;
}
.geraete-row-best td:first-child {
  border-left: 3px solid var(--purple);
}
.row-best-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--purple);
  color: #fff;
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}

/* ===============================================================
   §9 — Setup Stepper
   =============================================================== */
.setup-stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 36px 0;
  counter-reset: setup-step;
}
.setup-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 20px;
  align-items: flex-start;
  padding-bottom: 32px;
  position: relative;
}
.setup-step:last-child { padding-bottom: 0; }

/* Vertical connector line — explicit .stepper-line element */
.stepper-line {
  position: absolute;
  left: 27px;
  top: 56px;
  width: 2px;
  height: calc(100% - 24px);
  background: linear-gradient(to bottom, rgba(83,58,253,0.35) 0%, rgba(83,58,253,0.08) 100%);
  pointer-events: none;
}
/* Legacy pseudo-element fallback (last step has no .stepper-line, belt+suspenders) */
.setup-step:not(:last-child) .ss-number::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 56px;
  width: 2px;
  height: calc(100% - 24px);
  background: linear-gradient(to bottom, rgba(83,58,253,0.35) 0%, rgba(83,58,253,0.08) 100%);
}

.ss-number {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 1.375rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(83,58,253,0.30);
  counter-increment: setup-step;
}
.ss-number::before {
  content: counter(setup-step);
}

.ss-content {
  padding-top: 10px;
}
.ss-content h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.ss-content p {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.7;
  margin: 0;
}
.ss-content .ss-app-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ss-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: var(--white);
  color: var(--ink);
}

/* ===============================================================
   §11 — Final CTA Images Grid (geraete-specific)
   =============================================================== */
.geraete-final-img-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 36px 0 32px;
}
@media (min-width: 700px) {
  .geraete-final-img-grid { grid-template-columns: 1fr 1fr; }
}
.geraete-final-img-grid img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

/* ===============================================================
   Reduced Motion — Phase 3/4 elements
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
  .box-compare-card { transition: none; }
  .box-compare-card:hover { transform: none; }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║   CREATIVE LAYER — Swiss Digital Luxury                     ║
   ║   Micro-interactions · Mesh Gradients · Glassmorphism       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 1. Scroll Progress Bar ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #533afd 0%, #f96bee 50%, #15be53 100%);
  background-size: 200% 100%;
  animation: progress-shimmer 3s linear infinite;
  transition: width 0.08s linear;
  border-radius: 0 2px 2px 0;
}
@keyframes progress-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── 2. Mesh Gradient Orbs (Hero) ── */
.geo-mesh-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.geo-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.22;
  animation: orb-drift 10s ease-in-out infinite alternate;
}
.geo-orb--1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, #533afd 0%, transparent 68%);
  top: -140px; left: -100px;
  animation-duration: 12s;
}
.geo-orb--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #f96bee 0%, transparent 68%);
  top: 30%; right: -80px;
  animation-duration: 9s;
  animation-delay: -4s;
}
.geo-orb--3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, #15be53 0%, transparent 68%);
  bottom: -80px; left: 38%;
  animation-duration: 11s;
  animation-delay: -7s;
}
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(28px, -36px) scale(1.10); }
}

/* ── 3. Gradient Animated Text ── */
.text-gradient-animate {
  background: linear-gradient(120deg, #533afd 0%, #f96bee 40%, #533afd 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-flow 5s ease-in-out infinite;
}
@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ── 4. Animated Gradient Border (Featured Card) ── */
.box-compare-card--featured {
  position: relative;
  isolation: isolate;
}
.box-compare-card--featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(
    var(--anim-angle, 0deg),
    #533afd, #f96bee, #15be53, #533afd
  );
  background-size: 300% 300%;
  animation: border-gradient-spin 4s linear infinite;
  z-index: -1;
}
.box-compare-card--featured::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 16px;
  background: var(--white);
  z-index: -1;
}
@keyframes border-gradient-spin {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── 5. Tilt Card — 3D Micro-interaction ── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
  cursor: default;
}
.tilt-card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.16) 0%,
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 10;
}
.tilt-card:hover .tilt-card-shine { opacity: 1; }

/* ── 6. CTA Button Ripple ── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple .ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  transform: scale(0);
  animation: ripple-expand 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ── 7. Trust Badge Pulse ── */
.badge-pulse {
  animation: badge-glow-pulse 3s ease-in-out infinite;
}
@keyframes badge-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(83, 58, 253, 0); }
  50%       { box-shadow: 0 0 0 7px rgba(83, 58, 253, 0.14); }
}

/* ── 8. Geometric Dot Grid Layer ── */
.geo-dot-bg {
  position: relative;
  overflow: hidden;
}
.geo-dot-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(83, 58, 253, 0.055) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}
.geo-dot-bg > .container {
  position: relative;
  z-index: 1;
}

/* ── 9. Savings Amount Glow ── */
.savings-item--result .si-amount--big {
  text-shadow:
    0 0 18px rgba(21, 190, 83, 0.55),
    0 0 40px rgba(21, 190, 83, 0.25);
  animation: savings-pulse 2.5s ease-in-out infinite;
}
@keyframes savings-pulse {
  0%, 100% { text-shadow: 0 0 18px rgba(21,190,83,0.50), 0 0 38px rgba(21,190,83,0.20); }
  50%       { text-shadow: 0 0 28px rgba(21,190,83,0.80), 0 0 56px rgba(21,190,83,0.40); }
}

/* ── 10. Stepper Number Pulse ── */
.ss-number {
  animation: stepper-glow 3s ease-in-out infinite;
}
@keyframes stepper-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(83,58,253,0.32); }
  50%       { box-shadow: 0 4px 28px rgba(83,58,253,0.60), 0 0 0 5px rgba(83,58,253,0.12); }
}

/* ── 11. Hero Trust-Item Float ── */
.trust-item-float {
  animation: trust-bob 4s ease-in-out infinite alternate;
}
.trust-item-float:nth-child(1) { animation-delay:  0.0s; }
.trust-item-float:nth-child(2) { animation-delay: -0.6s; }
.trust-item-float:nth-child(3) { animation-delay: -1.2s; }
.trust-item-float:nth-child(4) { animation-delay: -1.8s; }
.trust-item-float:nth-child(5) { animation-delay: -2.4s; }
.trust-item-float:nth-child(6) { animation-delay: -3.0s; }
.trust-item-float:nth-child(7) { animation-delay: -3.6s; }
@keyframes trust-bob {
  from { transform: translateY(0px);   }
  to   { transform: translateY(-6px);  }
}

/* ── 12. Device Tab Label Shimmer on Hover ── */
.device-tab-label {
  overflow: hidden;
}
.device-tab-label::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 45%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.13),
    transparent
  );
  transition: left 0.45s ease;
  pointer-events: none;
}
.device-tab-label:hover::after { left: 160%; }

/* ── 13. Count-up Highlight ── */
.count-up-val {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── 14. Glassmorphism for dark-section cards ── */
.glass-dark-card {
  background: rgba(6, 27, 49, 0.55) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(83, 58, 253, 0.28) !important;
}

/* ── 15. Profile Card Hover Lift ── */
.profile-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(83, 58, 253, 0.14), 0 4px 16px rgba(0,0,0,0.06);
}

/* ── Reduced Motion Override ── */
@media (prefers-reduced-motion: reduce) {
  .geo-orb,
  .text-gradient-animate,
  .ss-number,
  .trust-item-float,
  .badge-pulse,
  .savings-item--result .si-amount--big,
  .scroll-progress-fill { animation: none; }
  .tilt-card { transition: none; }
  .profile-card { transition: none; }
  .device-tab-label::after { display: none; }
}

/* ================================================================
   anleitungen.php — Phase 1 CSS
   Classes: .anleitungen-hero · .anl-hero-kicker (alias)
            .anl-quick-steps · .anl-step-card · .anl-step-num
            .anl-step-icon · .anl-step-title · .anl-step-body
            .anl-device-tabs · .anl-device-tab · .anl-time-chip
            .anl-device-selector-wrap · .anl-selector-label
   ================================================================ */

/* Hero — identical architecture to .geraete-hero / .preise-hero */
.anleitungen-hero {
  padding: 110px 0 90px;
  min-height: 78vh;
}
.anleitungen-hero .trust-bar  { gap: 10px; flex-wrap: wrap; }
.anleitungen-hero .trust-item { font-size: 0.78rem; padding: 5px 10px; }

/* Quick Steps — 3-column grid */
.anl-quick-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.anl-step-card {
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  padding: 28px 22px 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(6,27,49,0.04);
  transition: box-shadow 0.25s, transform 0.25s;
  position: relative;
}
.anl-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(83,58,253,0.10);
}
.anl-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 4px 14px rgba(83,58,253,0.30);
}
.anl-step-icon {
  font-size: 2rem;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}
.anl-step-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.anl-step-body {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.7;
  margin: 0;
}
.anl-step-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Device Tabs — hero anchors + §2 selector buttons */
.anl-device-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0 0;
}
.anl-device-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1.5px solid rgba(83,58,253,0.30);
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  line-height: 1;
}
.anl-device-tab:hover,
.anl-device-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(83,58,253,0.25);
}

/* Hero dark-background variant */
.anleitungen-hero .anl-device-tabs { margin: 20px 0; }
.anleitungen-hero .anl-device-tab  {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.05);
}
.anleitungen-hero .anl-device-tab:hover,
.anleitungen-hero .anl-device-tab.active {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.75);
  color: #fff;
}

/* Device selector section */
.anl-device-selector-wrap { margin: 32px 0 0; }
.anl-selector-label {
  font-size: 0.9rem;
  color: var(--slate);
  margin: 0 0 12px;
}
.anl-device-tabs--bar { gap: 10px; }

/* Time Estimate Chip */
.anl-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(83,58,253,0.08);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 14px;
  border: 1px solid rgba(83,58,253,0.12);
}

/* Mobile-First Responsive — anleitungen Phase 1 */
@media (max-width: 820px) {
  .anleitungen-hero         { padding: 80px 0 64px; min-height: auto; }
  .anl-quick-steps          { grid-template-columns: 1fr; gap: 16px; }
  .anl-device-tabs          { overflow-x: auto; flex-wrap: nowrap;
                               padding-bottom: 6px;
                               -webkit-overflow-scrolling: touch; }
  .anl-device-tab           { white-space: nowrap; flex-shrink: 0; }
  .anl-device-tabs--bar     { gap: 8px; }
}
@media (max-width: 480px) {
  .anleitungen-hero         { padding: 56px 0 48px; }
  .anl-device-tab           { padding: 7px 13px; font-size: 0.8125rem; }
  .anl-step-card            { padding: 22px 16px 20px; }
}

/* ==========================================================
   ANLEITUNGEN — Phase 2: Platform Tabs, App Badges, Note Box
   ========================================================== */

/* Platform Tab Group */
.anl-platform-tabs {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(83,58,253,0.2);
  width: fit-content;
  margin-bottom: 28px;
}

/* Individual Tab Button */
.anl-platform-tab {
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  border: none;
  border-right: 1.5px solid rgba(83,58,253,0.2);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.anl-platform-tab:last-child { border-right: 0; }
.anl-platform-tab:hover { background: rgba(83,58,253,0.06); }
.anl-platform-tab.active { background: var(--primary); color: #fff; }

/* Tab Panel */
.anl-platform-panel  { display: none; }
.anl-platform-panel.is-active { display: block; }

/* App Store Badges Row */
.anl-app-store-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}

/* App Store Badge Button */
.anl-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
  border: none;
}
.anl-badge-btn:hover { opacity: 0.82; }

/* Hinweis-Box */
.anl-note-box {
  background: rgba(83,58,253,0.06);
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Section Image */
.anl-section-img {
  border-radius: 16px;
  width: 100%;
  max-width: 820px;
  height: auto;
  display: block;
  margin: 28px 0;
}

/* Mobile Responsive — Phase 2 */
@media (max-width: 820px) {
  .anl-platform-tabs { width: 100%; }
  .anl-platform-tab  { padding: 9px 16px; font-size: 0.85rem; flex: 1; text-align: center; }
  .anl-app-store-badges { gap: 10px; }
  .anl-badge-btn     { padding: 10px 16px; font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .anl-platform-tabs { flex-direction: column; border-radius: 10px; }
  .anl-platform-tab  { border-right: 0; border-bottom: 1.5px solid rgba(83,58,253,0.2); }
  .anl-platform-tab:last-child { border-bottom: 0; }
  .anl-app-store-badges { flex-direction: column; }
  .anl-badge-btn     { justify-content: center; }
}

/* ==========================================================
   ANLEITUNGEN — Phase 3: Dark-Section Overrides + §5/§6/§7
   ========================================================== */

/* ── Section-dark overrides for Platform Tabs ── */
.section-dark .anl-platform-tabs {
  border-color: rgba(255,255,255,0.15);
}
.section-dark .anl-platform-tab {
  color: #a89fff;
  border-right-color: rgba(255,255,255,0.15);
}
.section-dark .anl-platform-tab.active {
  background: var(--primary);
  color: #fff;
  border-right-color: var(--primary);
}
.section-dark .anl-platform-tab:hover:not(.active) {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* ── Section-dark overrides for Note Box ── */
.section-dark .anl-note-box {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--primary-light);
  color: rgba(255,255,255,0.80);
}

/* ── Section-dark overrides for Setup Stepper ── */
.section-dark .ss-content h3 { color: rgba(255,255,255,0.95); }
.section-dark .ss-content p  { color: rgba(255,255,255,0.70); }
.section-dark .stepper-line  {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.04) 100%
  );
}
.section-dark .setup-step:not(:last-child) .ss-number::after {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.04) 100%
  );
}

/* ── Section-dark override for Time Chip (used inline — fallback) ── */
.section-dark .anl-time-chip {
  background: rgba(255,255,255,0.10);
  color: #c4b5fd;
  border-color: rgba(196,181,253,0.25);
}

/* ── App Matrix Table ── */
.app-matrix {
  border-radius: 14px;
  overflow: hidden;
}
.app-matrix .compare-table th,
.app-matrix .compare-table td {
  text-align: center;
  font-size: 0.875rem;
}
.app-matrix .compare-table td:first-child,
.app-matrix .compare-table th:first-child {
  text-align: left;
  min-width: 150px;
}

/* ── Image pair grid ── */
.anl-img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
  max-width: 820px;
}
.anl-img-pair img {
  border-radius: 14px;
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* ── Mobile Responsive — Phase 3 ── */
@media (max-width: 820px) {
  .anl-img-pair              { grid-template-columns: 1fr; gap: 14px; }
  .anl-img-pair img          { height: 200px; }
  .app-matrix .compare-table td,
  .app-matrix .compare-table th { font-size: 0.8125rem; padding: 8px 10px; }
  .section-dark .anl-platform-tabs { width: 100%; }
}
@media (max-width: 480px) {
  .section-dark .anl-platform-tabs { flex-direction: column; }
  .section-dark .anl-platform-tab  { border-right: 0; border-bottom: 1.5px solid rgba(255,255,255,0.15); }
  .section-dark .anl-platform-tab:last-child { border-bottom: 0; }
  .anl-img-pair img          { height: 170px; }
}

/* ==========================================================
   ANLEITUNGEN — Phase 4: Troubleshooting · Why · FAQ · CTA
   ========================================================== */

/* ── §8 Trouble Grid ── */
.anl-trouble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 28px;
}

.anl-trouble-card {
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  padding: 22px 20px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.anl-trouble-card:hover {
  box-shadow: 0 6px 20px rgba(83,58,253,0.09);
  transform: translateY(-2px);
}

.anl-trouble-icon  { font-size: 1.625rem; margin-bottom: 10px; line-height: 1; }
.anl-trouble-title { font-weight: 700; font-size: 0.9375rem; margin-bottom: 8px; color: var(--ink); line-height: 1.35; }
.anl-trouble-text  { font-size: 0.875rem; color: var(--slate); line-height: 1.65; margin: 0; }

/* ── §9 Why — uses existing .why-grid / .why-card from preise.php ── */
/* geo-dot-bg already defined; no new selectors needed */

/* ── §10 FAQ — uses existing .accordion classes (geraete/preise/sender) ── */
/* No new CSS needed — accordion CSS at line ~1662 */

/* ── §11 Final CTA — uses existing .final-summary-box / .fsb-* ── */
/* No new CSS needed — final-summary CSS at line ~2733 */

/* ── Mobile Responsive — Phase 4 ── */
@media (max-width: 820px) {
  .anl-trouble-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .anl-trouble-grid { grid-template-columns: 1fr; }
  .anl-trouble-card { padding: 18px 16px; }
}

/* ================================================================
   ANLEITUNGEN — CREATIVE LAYER 2026
   Swiss Digital Aurora · Glassmorphism · Cinematic Micro-animations
   Author: Claude (Full Creative Freedom)
   ================================================================ */

/* ─────────────────────────────────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────────────────────────────── */

@keyframes anlGlowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(83,58,253,0.38), 0 0 36px rgba(83,58,253,0.14); }
  50%       { box-shadow: 0 0 30px rgba(83,58,253,0.58), 0 0 60px rgba(83,58,253,0.24); }
}
@keyframes anlShimmer {
  0%   { background-position: -250% center; }
  100% { background-position:  250% center; }
}
@keyframes anlFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes anlFadeLeft {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes anlOrbDrift1 {
  0%, 100% { transform: translate(0px, 0px)    scale(1);    }
  33%       { transform: translate(45px, -35px) scale(1.08); }
  66%       { transform: translate(-22px, 25px) scale(0.96); }
}
@keyframes anlOrbDrift2 {
  0%, 100% { transform: translate(0px, 0px)     scale(1);    }
  33%       { transform: translate(-55px, 38px)  scale(0.90); }
  66%       { transform: translate(34px, -48px)  scale(1.14); }
}
@keyframes anlOrbDrift3 {
  0%, 100% { transform: translate(0px, 0px)   scale(1);    }
  50%       { transform: translate(65px, 62px) scale(1.18); }
}
@keyframes anlBtnShine {
  0%, 55%, 100% { left: -110%; }
  75%            { left:  145%; }
}
@keyframes anlBorderFlow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes anlCounterIn {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes anlFloat {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-7px); }
}

/* ─────────────────────────────────────────────────────────────────
   HERO — Aurora Orbs  (enhanced animation)
───────────────────────────────────────────────────────────────── */
.geo-orb--1 { animation: anlOrbDrift1 20s ease-in-out infinite; }
.geo-orb--2 { animation: anlOrbDrift2 26s ease-in-out infinite; }
.geo-orb--3 { animation: anlOrbDrift3 32s ease-in-out infinite; }

/* ─────────────────────────────────────────────────────────────────
   HERO KICKER — Glass Badge with Shimmer
───────────────────────────────────────────────────────────────── */
.anl-hero-kicker {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 7px 18px;
  border-radius: 99px;
  background: rgba(83,58,253,0.22);
  border: 1px solid rgba(167,139,250,0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: rgba(255,255,255,0.92);
  margin-bottom: 22px;
}
.anl-hero-kicker::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  background-size: 250% auto;
  animation: anlShimmer 3.5s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────
   SCROLL PROGRESS BAR — Rainbow Gradient
───────────────────────────────────────────────────────────────── */
.scroll-progress-fill {
  background: linear-gradient(90deg,
    #533afd 0%, #a78bfa 40%, #f472b6 70%, #533afd 100%);
  background-size: 250% auto;
  animation: anlShimmer 5s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────
   DEVICE TABS — Aurora Active + Hover
───────────────────────────────────────────────────────────────── */
.anl-device-tab {
  position: relative;
  overflow: hidden;
  transition: background 0.28s ease, color 0.28s ease,
              box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.anl-device-tab:hover,
.anl-device-tab.active {
  background: linear-gradient(135deg, #533afd 0%, #7c3aed 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(83,58,253,0.42), 0 0 0 1px rgba(167,139,250,0.30);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────
   DIRECT ANSWER BOX — Aurora Top Border
───────────────────────────────────────────────────────────────── */
.direct-answer-box {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(83,58,253,0.16);
  box-shadow: 0 4px 28px rgba(83,58,253,0.07),
              inset 0 1px 0 rgba(255,255,255,0.92);
}
.direct-answer-box::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    #533afd, #a78bfa, #f472b6, #a78bfa, #533afd);
  background-size: 300% auto;
  animation: anlShimmer 6s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────
   QUICK STEP CARDS — Glassmorphism + Gradient Crown
───────────────────────────────────────────────────────────────── */
.anl-step-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 4px 24px rgba(6,27,49,0.07), 0 1px 4px rgba(6,27,49,0.04);
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.32s ease;
}
.anl-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #533afd, #a78bfa, #f472b6, #a78bfa, #533afd);
  background-size: 250% auto;
  animation: anlShimmer 5s linear infinite;
}
.anl-step-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 20px 52px rgba(83,58,253,0.16), 0 4px 12px rgba(6,27,49,0.08);
}

/* ─────────────────────────────────────────────────────────────────
   STEP NUMBER BADGE — Gradient Glow
───────────────────────────────────────────────────────────────── */
.anl-step-num {
  background: linear-gradient(135deg, #533afd 0%, #7c3aed 100%);
  box-shadow: 0 4px 18px rgba(83,58,253,0.50);
  animation: anlGlowPulse 4s ease-in-out infinite;
  transition: transform 0.25s ease;
}
.anl-step-card:hover .anl-step-num { transform: scale(1.12) rotate(-5deg); }

/* ─────────────────────────────────────────────────────────────────
   TIME CHIP — Shimmer + Glass
───────────────────────────────────────────────────────────────── */
.anl-time-chip {
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(83,58,253,0.12);
}
.anl-time-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(83,58,253,0.10), transparent);
  background-size: 250% auto;
  animation: anlShimmer 4s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────
   PLATFORM TABS — Gradient Active, Glass Border
───────────────────────────────────────────────────────────────── */
.anl-platform-tabs {
  box-shadow: 0 2px 14px rgba(83,58,253,0.14),
              0 0 0 1px rgba(83,58,253,0.08);
}
.anl-platform-tab {
  transition: background 0.26s ease, color 0.26s ease, box-shadow 0.26s ease;
}
.anl-platform-tab.active {
  background: linear-gradient(135deg, #533afd 0%, #7c3aed 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.anl-platform-tab:hover:not(.active) {
  background: rgba(83,58,253,0.07);
}

/* ─────────────────────────────────────────────────────────────────
   PLATFORM PANEL — Fade-up Entrance
───────────────────────────────────────────────────────────────── */
.anl-platform-panel.is-active {
  animation: anlFadeUp 0.42s cubic-bezier(0.16,1,0.3,1) both;
}

/* ─────────────────────────────────────────────────────────────────
   SETUP STEPPER — Neon Numbers, Animated Line
───────────────────────────────────────────────────────────────── */
.ss-number {
  background: linear-gradient(135deg, #533afd 0%, #7c3aed 100%);
  box-shadow: 0 4px 22px rgba(83,58,253,0.42), 0 0 0 4px rgba(83,58,253,0.12);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.28s ease;
}
.setup-step:hover .ss-number {
  transform: scale(1.10);
  box-shadow: 0 6px 32px rgba(83,58,253,0.56), 0 0 0 6px rgba(83,58,253,0.18);
}
.ss-content h3 { transition: color 0.22s ease; }
.setup-step:hover .ss-content h3 { color: var(--primary); }

.stepper-line {
  background: linear-gradient(to bottom,
    rgba(83,58,253,0.50) 0%,
    rgba(167,139,250,0.15) 100%);
}
.section-dark .stepper-line {
  background: linear-gradient(to bottom,
    rgba(167,139,250,0.40) 0%,
    rgba(167,139,250,0.06) 100%);
}

/* ─────────────────────────────────────────────────────────────────
   APP STORE BADGES — Dark Glassmorphism
───────────────────────────────────────────────────────────────── */
.section-dark .anl-badge-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  opacity: 1;
  transition: background 0.26s, transform 0.26s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.26s;
}
.section-dark .anl-badge-btn:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   NOTE BOX — Gradient Left Border + Glow
───────────────────────────────────────────────────────────────── */
.anl-note-box {
  border-left: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 16px rgba(83,58,253,0.08);
  padding-left: 24px;
}
.anl-note-box::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #533afd, #a78bfa, #f472b6);
  border-radius: 99px 0 0 99px;
}

/* ─────────────────────────────────────────────────────────────────
   TROUBLE CARDS — Accent Glow on Hover
───────────────────────────────────────────────────────────────── */
.anl-trouble-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow  0.32s ease;
}
.anl-trouble-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(83,58,253,0.04) 0%, rgba(167,139,250,0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.anl-trouble-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #533afd, #7c3aed);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.34s cubic-bezier(0.16,1,0.3,1);
}
.anl-trouble-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(83,58,253,0.13), 0 2px 8px rgba(0,0,0,0.05); }
.anl-trouble-card:hover::before { opacity: 1; }
.anl-trouble-card:hover::after  { transform: scaleY(1); }

.anl-trouble-icon {
  display: inline-block;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.anl-trouble-card:hover .anl-trouble-icon { transform: scale(1.30) rotate(-8deg); }

/* ─────────────────────────────────────────────────────────────────
   WHY CARDS — Shimmer Crown + Float
───────────────────────────────────────────────────────────────── */
.why-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow  0.32s ease;
}
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #533afd, #a78bfa, #f472b6, #a78bfa, #533afd);
  background-size: 250% auto;
  animation: anlShimmer 5s linear infinite;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.why-card:hover { transform: translateY(-8px); box-shadow: 0 22px 52px rgba(83,58,253,0.14), 0 4px 12px rgba(0,0,0,0.06); }
.why-card:hover::before { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────
   ACCORDION — Gradient Expand State
───────────────────────────────────────────────────────────────── */
.accordion-btn {
  position: relative;
  overflow: hidden;
  transition: background 0.26s ease, color 0.26s ease;
}
.accordion-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent, rgba(83,58,253,0.04), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.accordion-btn:hover::after { opacity: 1; }
.accordion-btn[aria-expanded="true"] {
  background: linear-gradient(90deg,
    rgba(83,58,253,0.07) 0%,
    rgba(83,58,253,0.02) 100%);
  color: var(--primary);
}

/* ─────────────────────────────────────────────────────────────────
   FINAL SUMMARY BOX — Glass + Radial Glow
───────────────────────────────────────────────────────────────── */
.final-summary-box {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.final-summary-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(167,139,250,0.65) 50%, transparent 100%);
}
.final-summary-box::after {
  content: '';
  position: absolute;
  inset: -60%;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(83,58,253,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.final-summary-box > * { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────────
   FINAL CTA BUTTON — Shine Sweep
───────────────────────────────────────────────────────────────── */
.final-cta-block .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #533afd 0%, #7c3aed 60%, #533afd 100%);
  background-size: 200% auto;
  box-shadow: 0 5px 28px rgba(83,58,253,0.50), 0 1px 4px rgba(83,58,253,0.30);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.28s ease,
              background-position 0.5s ease;
}
.final-cta-block .btn-primary::before {
  content: '';
  position: absolute;
  top: -10%; left: -110%;
  width: 65%;
  height: 120%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: anlBtnShine 3.5s ease-in-out infinite;
}
.final-cta-block .btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 40px rgba(83,58,253,0.60), 0 2px 8px rgba(83,58,253,0.30);
  background-position: 100% center;
}

/* ─────────────────────────────────────────────────────────────────
   SECTION IMAGES — Cinematic Hover
───────────────────────────────────────────────────────────────── */
.anl-section-img {
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.5s ease;
  box-shadow: 0 8px 32px rgba(6,27,49,0.12);
}
.anl-section-img:hover {
  transform: scale(1.015) translateY(-4px);
  box-shadow: 0 20px 56px rgba(83,58,253,0.18), 0 4px 16px rgba(6,27,49,0.10);
}

/* ─────────────────────────────────────────────────────────────────
   SCROLL-REVEAL CLASSES (injected via JS)
───────────────────────────────────────────────────────────────── */
.anl-cr {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.68s cubic-bezier(0.16,1,0.3,1),
    transform 0.68s cubic-bezier(0.16,1,0.3,1);
}
.anl-cr.visible        { opacity: 1; transform: translateY(0); }
.anl-cr-left           { opacity: 0; transform: translateX(-24px);
  transition: opacity 0.68s cubic-bezier(0.16,1,0.3,1),
              transform 0.68s cubic-bezier(0.16,1,0.3,1); }
.anl-cr-left.visible   { opacity: 1; transform: translateX(0); }
.anl-cr-scale          { opacity: 0; transform: scale(0.92);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.34,1.56,0.64,1); }
.anl-cr-scale.visible  { opacity: 1; transform: scale(1); }

/* Stagger */
.anl-d1 { transition-delay: 0.06s; }
.anl-d2 { transition-delay: 0.13s; }
.anl-d3 { transition-delay: 0.20s; }
.anl-d4 { transition-delay: 0.27s; }
.anl-d5 { transition-delay: 0.34s; }
.anl-d6 { transition-delay: 0.41s; }

/* ─────────────────────────────────────────────────────────────────
   SECTION PROGRESS NAV — Fixed Sidebar Dots
───────────────────────────────────────────────────────────────── */
.anl-prog-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 88;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.anl-prog-nav.show {
  opacity: 1;
  pointer-events: auto;
}
.anl-pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(83,58,253,0.22);
  border: 1.5px solid rgba(83,58,253,0.38);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
              background 0.25s ease,
              box-shadow 0.25s ease;
  position: relative;
}
.anl-pdot:hover  { transform: scale(1.7); }
.anl-pdot.on {
  background: var(--primary);
  box-shadow: 0 0 10px rgba(83,58,253,0.65);
  transform: scale(1.35);
}
.anl-pdot::after {
  content: attr(data-tip);
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(6,27,49,0.88);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.anl-pdot:hover::after { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────
   ANIMATED COUNTER (rating / reviews)
───────────────────────────────────────────────────────────────── */
.anl-count {
  display: inline-block;
  animation: anlCounterIn 0.55s cubic-bezier(0.16,1,0.3,1) both;
}

/* ─────────────────────────────────────────────────────────────────
   COMPARE TABLE — Hover Color Wash
───────────────────────────────────────────────────────────────── */
.compare-table tbody tr {
  transition: background 0.2s ease;
}
.app-matrix .compare-table tbody tr:hover td {
  background: rgba(83,58,253,0.07) !important;
}
.section:not(.section-dark) .compare-table tbody tr:hover td {
  background: rgba(83,58,253,0.05) !important;
}

/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION — Respect user preferences
───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .geo-orb--1, .geo-orb--2, .geo-orb--3,
  .anl-step-num,
  .anl-hero-kicker::before,
  .anl-step-card::before,
  .direct-answer-box::after,
  .scroll-progress-fill,
  .anl-time-chip::before,
  .why-card::before,
  .final-cta-block .btn-primary::before { animation: none !important; }
  .anl-cr, .anl-cr-left, .anl-cr-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .anl-platform-panel.is-active { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE — Hide Progress Nav
───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .anl-prog-nav { display: none; }
  .anl-step-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .final-summary-box { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   CREATIVE LAYER R2 — Custom Cursor · Canvas Particles · 3D Tilt
   H2 Glow Reveal · Stepper Line Draw · Aurora Device Tabs
   2026 · iptv-kaufen.ch/anleitungen
═══════════════════════════════════════════════════════════════════ */

/* ── Custom Cursor DOM elements (added to <html> by JS on pointer dev.) */
.anl-has-cursor * { cursor: none !important; }

.anl-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%,
    rgba(167,139,250,0.98) 0%,
    rgba(83,58,253,0.72) 52%,
    transparent 100%);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width .16s ease, height .16s ease,
              background .18s ease, opacity .2s ease;
  mix-blend-mode: screen;
  will-change: left, top;
}
.anl-cursor-ring {
  position: fixed;
  left: 0; top: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(83,58,253,0.42);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width .22s ease, height .22s ease, border-color .2s ease;
}
.anl-cursor.is-hover {
  width: 22px; height: 22px;
  background: radial-gradient(circle at 38% 38%,
    rgba(244,114,182,0.98) 0%,
    rgba(167,139,250,0.72) 52%,
    transparent 100%);
}
.anl-cursor-ring.is-hover   { width: 54px; height: 54px; border-color: rgba(167,139,250,0.68); }
.anl-cursor.is-down         { transform: translate(-50%,-50%) scale(0.62); }
.anl-cursor-ring.is-down    { transform: translate(-50%,-50%) scale(0.78); }

/* ── Hero Canvas ────────────────────────────────────────────────────── */
#anl-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.50;
}

/* ── H2 Section-Entry Glow ──────────────────────────────────────────── */
@keyframes anlH2Glow {
  0%   { text-shadow: none; }
  38%  { text-shadow: 0 0 28px rgba(83,58,253,0.32), 0 0 8px rgba(167,139,250,0.18); }
  100% { text-shadow: none; }
}
.anl-h2-glow { animation: anlH2Glow 1.5s cubic-bezier(0.16,1,0.3,1) both; }

/* ── Stepper Line Draw ──────────────────────────────────────────────── */
@keyframes anlLineDraw {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.setup-step.anl-step-visible .stepper-line {
  animation: anlLineDraw 0.62s cubic-bezier(0.16,1,0.3,1) 0.28s both;
  transform-origin: top center;
}

/* ── Setup Step Number Pop on reveal ───────────────────────────────── */
@keyframes anlNumRing {
  0%   { box-shadow: 0 0 0 0 rgba(83,58,253,0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(83,58,253,0); }
  100% { box-shadow: 0 0 0 0 rgba(83,58,253,0); }
}
.setup-step.anl-step-visible .ss-number {
  animation: anlNumRing 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}

/* ── Quick Step Cards — subtle vertical connector ────────────────── */
@media (min-width: 769px) {
  .anl-quick-steps {
    position: relative;
  }
  .anl-quick-steps::before {
    content: '';
    position: absolute;
    top: 54px; bottom: 54px; left: 50%;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent,
      rgba(83,58,253,0.14) 20%,
      rgba(83,58,253,0.14) 80%,
      transparent);
    pointer-events: none;
  }
}

/* ── Device Tab Glow Ring (hover + active) ──────────────────────── */
.anl-device-tab {
  position: relative;
  isolation: isolate;
}
.anl-device-tab::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) padding-box,
    linear-gradient(135deg, rgba(83,58,253,0), rgba(167,139,250,0)) border-box;
  transition: background .28s ease;
  pointer-events: none;
}
.anl-device-tab:hover::after,
.anl-device-tab.active::after {
  background:
    linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) padding-box,
    linear-gradient(135deg, rgba(83,58,253,0.7) 0%, rgba(244,114,182,0.6) 100%) border-box;
}

/* ── Note Box hover depth ───────────────────────────────────────── */
.anl-note-box { transition: box-shadow .28s ease, transform .28s ease; }
.anl-note-box:hover {
  box-shadow: 0 7px 30px rgba(83,58,253,0.14), 0 2px 8px rgba(0,0,0,0.04);
  transform: translateX(3px);
}

/* ── Compare Table col-iptv column glow ─────────────────────────── */
.compare-table .col-iptv {
  position: relative;
}
.compare-table .col-iptv::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(83,58,253,0.06) 0%, rgba(83,58,253,0.03) 100%);
  pointer-events: none;
}

/* ── Trust Bar item entrance shimmer ──────────────────────────────── */
@keyframes anlTrustIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.trust-item-float {
  animation: anlTrustIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.trust-item-float:nth-child(1) { animation-delay: 0.08s; }
.trust-item-float:nth-child(2) { animation-delay: 0.16s; }
.trust-item-float:nth-child(3) { animation-delay: 0.24s; }
.trust-item-float:nth-child(4) { animation-delay: 0.32s; }
.trust-item-float:nth-child(5) { animation-delay: 0.40s; }
.trust-item-float:nth-child(6) { animation-delay: 0.48s; }
.trust-item-float:nth-child(7) { animation-delay: 0.56s; }

/* ── AggregateRating stars shimmer sweep ───────────────────────── */
@keyframes anlStarShimmer {
  0%   { filter: brightness(1)   drop-shadow(0 0 0 rgba(251,191,36,0)); }
  45%  { filter: brightness(1.35) drop-shadow(0 0 6px rgba(251,191,36,0.55)); }
  100% { filter: brightness(1)   drop-shadow(0 0 0 rgba(251,191,36,0)); }
}
.rating-stars {
  display: inline-block;
  animation: anlStarShimmer 3.5s ease-in-out infinite;
  animation-delay: 2s;
}

/* ── Scroll Progress Bar — Rainbow animation ──────────────────────── */
@keyframes anlRainbowShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.scroll-progress-fill {
  background: linear-gradient(90deg,
    #533afd, #7c3aed, #ec4899, #f59e0b, #10b981, #06b6d4, #533afd) !important;
  background-size: 350% 350% !important;
  animation: anlRainbowShift 7s ease infinite !important;
}

/* ─── Reduced Motion — R2 override ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anl-cursor, .anl-cursor-ring,
  #anl-hero-canvas { display: none !important; }
  .anl-h2-glow,
  .setup-step.anl-step-visible .stepper-line,
  .setup-step.anl-step-visible .ss-number,
  .trust-item-float,
  .rating-stars,
  .scroll-progress-fill { animation: none !important; }
}

/* ─── Mobile — R2 overrides ────────────────────────────────────────── */
@media (max-width: 768px) {
  #anl-hero-canvas { display: none; }
  .anl-cursor, .anl-cursor-ring { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIX — anleitungen.php / global hero
   Eliminates horizontal scroll on all viewport widths ≤ 640px
   Affects: .section-headline · .anl-hero-kicker · .container
            .direct-answer-box · .btn-lg · trust-bar
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Overflow lock — belt + suspenders ──────────────────────── */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: clip;   max-width: 100%; }

/* ── 2. Section Headline — base: responsive + wrapping ─────────── */
.section-headline {
  overflow-wrap: break-word;
  word-break:    break-word;
  hyphens:       auto;
  -webkit-hyphens: auto;
  max-width:     100%;
  box-sizing:    border-box;
}

/* ── 3. Hero Kicker — allow wrap at any width ───────────────────── */
.anl-hero-kicker,
.sender-hero-kicker {
  max-width:        100%;
  box-sizing:       border-box;
  overflow-wrap:    break-word;
  word-break:       break-word;
}

/* ── 4. Direct Answer Box — prevent content overflow ───────────── */
.direct-answer-box {
  overflow-wrap: break-word;
  word-break:    break-word;
  max-width:     100%;
  box-sizing:    border-box;
}

/* ── 5. Mobile ≤ 640px ──────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Kicker: collapse to block + full-wrap */
  .anl-hero-kicker,
  .sender-hero-kicker {
    display:        block;
    white-space:    normal;
    font-size:      0.72rem;
    letter-spacing: 0.025em;
    padding:        5px 14px;
    text-align:     center;
    line-height:    1.55;
  }

  /* H1/H2 headline: clamp between 24px and 32px */
  .section-headline {
    font-size:      clamp(1.5rem, calc(3.5vw + 0.75rem), 2rem);
    line-height:    1.18;
    letter-spacing: -0.2px;
  }

  /* Override any inline max-width on hero headlines */
  .anleitungen-hero .section-headline,
  .sender-hero      .section-headline,
  .preise-hero      .section-headline {
    max-width: 100% !important;
  }

  /* Container: guaranteed lateral padding */
  .container {
    padding-left:  20px;
    padding-right: 20px;
  }
}

/* ── 6. Mobile ≤ 480px ──────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Headline: tighter floor at very small widths */
  .section-headline {
    font-size:      clamp(1.375rem, calc(3vw + 0.75rem), 1.875rem);
    line-height:    1.20;
    letter-spacing: -0.15px;
  }

  /* Kicker: even tighter font */
  .anl-hero-kicker,
  .sender-hero-kicker { font-size: 0.68rem; padding: 5px 10px; }

  /* Buttons: allow text wrap so they don't push viewport */
  .btn-lg {
    white-space:    normal;
    text-align:     center;
    line-height:    1.35;
    padding-top:    11px;
    padding-bottom: 11px;
  }

  /* Trust bar: tighter stacking */
  .trust-bar {
    gap:             5px 8px;
    flex-wrap:       wrap;
    justify-content: center;
  }
  .trust-item { font-size: 0.72rem; padding: 4px 9px; }
}

/* ── 7. Very small screens ≤ 360px ─────────────────────────────── */
@media (max-width: 360px) {

  .section-headline {
    font-size:   1.375rem;   /* hard floor at 22px */
    line-height: 1.22;
  }

  .container { padding-left: 14px; padding-right: 14px; }

  /* Stack hero CTA buttons */
  .hero-actions {
    flex-direction: column;
    align-items:    stretch;
    gap:            8px;
  }
  .hero-actions .btn {
    width:     100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ANLEITUNGEN — COMPREHENSIVE MOBILE RESPONSIVE FIX  (2026-05)
   Fixes: overflow · phantom gaps · broken tables · clipped buttons
   Overrides all earlier partial rules via CSS cascade position.
   CONTENT UNTOUCHED — CSS visual layer only.
═══════════════════════════════════════════════════════════════════ */

/* ── 0. German long-word wrapping — global paragraph fix ────────── */
p, li, td, th, caption, figcaption, label, span {
  word-wrap:       break-word;
  overflow-wrap:   break-word;
  hyphens:         auto;
  -webkit-hyphens: auto;
}

/* ── 1. Table-wrap: display:block + min readable width ──────────── */
.table-wrap,
.app-matrix {
  display:    block;
  width:      100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.table-wrap  .compare-table,
.table-wrap  .comparison-table,
.app-matrix  .compare-table {
  min-width: 520px;  /* keeps rows readable; wrapper scrolls */
}

/* ── 2. Breakpoint ≤ 820px — primary mobile fix ─────────────────── */
@media (max-width: 820px) {

  /* 2a. H1 + H2 — clamp per spec, no overflow */
  .section-headline,
  h1.section-headline,
  h2.section-headline {
    font-size:      clamp(1.5rem, 7vw, 2.2rem) !important;
    line-height:    1.18 !important;
    letter-spacing: -0.2px !important;
    word-break:     break-word;
    overflow-wrap:  break-word;
    max-width:      100% !important;
    hyphens:        auto;
    -webkit-hyphens: auto;
  }

  /* 2b. Kill min-height: vh — causes giant white gaps on mobile */
  .section          { min-height: auto !important; }
  .anleitungen-hero,
  .sender-hero,
  .preise-hero      { min-height: auto !important; }

  /* 2c. Section vertical padding — max 30px (exclude heros) */
  .section:not(.anleitungen-hero):not(.sender-hero):not(.preise-hero) {
    padding-top:    30px;
    padding-bottom: 30px;
  }

  /* 2d. Hero padding: comfortable but not 110px */
  .anleitungen-hero { padding-top: 56px; padding-bottom: 44px; }

  /* 2e. Container: guaranteed 15px horizontal padding */
  .container {
    padding-left:  15px !important;
    padding-right: 15px !important;
    box-sizing:    border-box;
  }

  /* 2f. All CTA buttons — full width, stacked, centered text */
  .btn-primary.btn-lg,
  .btn-ghost.btn-lg {
    display:         flex;
    width:           100%;
    max-width:       100%;
    justify-content: center;
    white-space:     normal;
    text-align:      center;
    box-sizing:      border-box;
  }

  /* 2g. Button rows: stack vertically */
  .hero-actions,
  .final-cta-block {
    flex-direction: column;
    align-items:    stretch;
    gap:            10px;
    width:          100%;
  }
  .hero-actions .btn,
  .final-cta-block .btn {
    width:           100%;
    max-width:       100%;
    justify-content: center;
  }

  /* 2h. Setup stepper: narrower number column */
  .setup-step {
    grid-template-columns: 44px 1fr;
    gap: 0 14px;
  }
  .ss-number {
    width:     44px;
    height:    44px;
    font-size: 1.125rem;
    flex-shrink: 0;
  }
  .stepper-line { left: 21px; }
  .setup-step:not(:last-child) .ss-number::after { left: 21px; }

  /* 2i. Trouble grid: 2-column (already set, reinforced) */
  .anl-trouble-grid { grid-template-columns: repeat(2, 1fr); }

  /* 2j. Direct answer box: tighter on mobile */
  .direct-answer-box { padding: 16px 14px; }

  /* 2k. Why-grid, profile-grid, pay-steps: single column */
  .why-grid     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .profile-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pay-steps    { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* 2l. App-matrix table: scrollable */
  .app-matrix {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  /* 2m. Section-sub: clamp for readability */
  .section-sub {
    font-size:   clamp(0.9375rem, 3.5vw, 1.0625rem) !important;
    line-height: 1.60;
  }
}

/* ── 3. Breakpoint ≤ 480px — small phone ────────────────────────── */
@media (max-width: 480px) {

  /* Even tighter H1/H2 */
  .section-headline,
  h1.section-headline,
  h2.section-headline {
    font-size: clamp(1.375rem, 6.5vw, 1.875rem) !important;
    line-height: 1.20 !important;
  }

  /* Section padding floor: 28px */
  .section:not(.anleitungen-hero):not(.sender-hero):not(.preise-hero) {
    padding-top:    28px;
    padding-bottom: 28px;
  }
  .anleitungen-hero { padding-top: 44px; padding-bottom: 32px; }

  /* Trouble cards: single column */
  .anl-trouble-grid { grid-template-columns: 1fr !important; }
  .anl-trouble-card { padding: 16px 14px; }

  /* Platform tabs: vertical stack (already done, reinforce) */
  .anl-platform-tabs { width: 100%; }

  /* Img pairs: stacked */
  .anl-img-pair { grid-template-columns: 1fr !important; gap: 12px !important; }
  .anl-img-pair img { height: auto !important; max-height: 220px; object-fit: cover; }

  /* Final summary checklist: single column */
  .fsb-checklist { grid-template-columns: 1fr !important; gap: 8px !important; }
  .final-img-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Trust badges: single column */
  .sender-trust-badges { flex-direction: column; gap: 10px; }
  .sender-trust-badge  { width: 100%; }
}

/* ── 4. Breakpoint ≤ 380px — very small (iPhone SE etc.) ────────── */
@media (max-width: 380px) {

  .section-headline,
  h1.section-headline,
  h2.section-headline {
    font-size: 1.375rem !important;  /* hard floor: 22px */
  }

  .container {
    padding-left:  12px !important;
    padding-right: 12px !important;
  }

  .section:not(.anleitungen-hero):not(.sender-hero):not(.preise-hero) {
    padding-top:    24px;
    padding-bottom: 24px;
  }
  .anleitungen-hero { padding-top: 36px; padding-bottom: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SAMSUNG HIGH-DPI FIX — Galaxy A-series · Retina · AMOLED screens
   Root cause: Samsung Internet font-boost + high devicePixelRatio
   These rules override with maximum specificity via cascade position.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Kill font-boost on EVERY element (Samsung Internet 14+) ── */
* {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust:    100%;
  text-size-adjust:         100%;
}

/* ── 2. Viewport containment — no element widens past screen ────── */
html, body, .container, .section, main, article, aside {
  max-width:  100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ── 3. Heading values in rem/vw — no hard px allowed ──────────── */
/*    (clamp already uses rem+vw — this reinforces the cascade)     */
@media (max-width: 820px) {
  .section-headline,
  h1.section-headline,
  h2.section-headline {
    font-size:        clamp(1.5rem, 7vw, 2.2rem) !important;
    line-height:      1.18 !important;
    letter-spacing:   -0.02em;              /* em = relative, not px */
    word-break:       break-word;
    overflow-wrap:    break-word;
    max-width:        100%;
  }

  /* Sub-headings h3 — also rem-based */
  h3, .anl-step-title, .anl-trouble-title, .why-card h3, .profile-card h3 {
    font-size:     clamp(1rem, 4.5vw, 1.25rem);
    line-height:   1.30;
    word-break:    break-word;
    overflow-wrap: break-word;
  }
}

/* ── 4. Tables — table-layout:auto inside overflow scroll ────────── */
/*    auto = browser computes column widths from content (safe)      */
.table-wrap  .compare-table,
.table-wrap  .comparison-table,
.app-matrix  .compare-table,
.paket-table-wrapper .paket-table {
  table-layout: auto;
  width:        100%;
}

/* ── 5. Prevent any fixed-width element from forcing a scrollbar ── */
@media (max-width: 820px) {
  img, video, iframe, canvas, svg {
    max-width:  100% !important;
    height:     auto;
    box-sizing: border-box;
  }

  /* Inline styles that set explicit widths can cause overflow */
  .geo-orb--1, .geo-orb--2, .geo-orb--3 {
    max-width: none;   /* orbs use transform positioning, not layout flow */
  }
}

/* ── 6. Samsung Galaxy — target high-DPR with media query ────────── */
@media (max-width: 820px) and (-webkit-min-device-pixel-ratio: 2),
       (max-width: 820px) and (min-resolution: 192dpi) {

  /* Force font-size to compute from rem (logical px, DPR-independent) */
  html { font-size: 16px; }   /* pin root — prevents DPR scaling ripple */

  /* Hero kicker: explicit rem on high-DPI */
  .anl-hero-kicker,
  .sender-hero-kicker {
    font-size:   0.75rem;
    line-height: 1.5;
  }

  /* Section-sub text: rem-clamped */
  .section-sub {
    font-size: clamp(0.9375rem, 3.5vw, 1.0625rem) !important;
  }

  /* Container: absolute safe padding for Galaxy viewport */
  .container {
    padding-left:  15px !important;
    padding-right: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SAMSUNG FORCE-DARK FIX — Galaxy A-series / Samsung Internet / One UI
   Problem: Samsung browser forcibly inverts colors → text = invisible
   Solution: explicit hex colors + forced-color-adjust: none + meta
   Affects: .anl-step-card · .accordion-* · .anl-trouble-card · body
   CONTENT UNTOUCHED — CSS visual layer only.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Global: opt-out of any forced color scheme ──────────────── */
html, body {
  color-scheme:         only light;
  forced-color-adjust:  none;
  -webkit-forced-color-adjust: none;
}

/* ── 2. Step Cards (§2 Quick Steps) — explicit hex, no inheritance ─ */
.anl-step-card {
  background-color:    #ffffff !important;
  color:               #061b31 !important;
  forced-color-adjust: none;
  -webkit-forced-color-adjust: none;
  color-scheme:        only light;
}
.anl-step-title {
  color:               #061b31 !important;
  background-color:    transparent !important;
}
.anl-step-body {
  color:               #64748d !important;
  background-color:    transparent !important;
}
.anl-step-num {
  background-color:    #533afd !important;
  color:               #ffffff !important;
  forced-color-adjust: none;
}
.anl-step-icon {
  color:               inherit !important;
  opacity:             1 !important;
}

/* ── 3. FAQ Accordion — explicit hex on every sub-element ──────── */
.accordion {
  background-color:    #ffffff !important;
  color:               #061b31 !important;
  color-scheme:        only light;
  forced-color-adjust: none;
  -webkit-forced-color-adjust: none;
}
.accordion-item {
  background-color:    #ffffff !important;
  border-color:        #e5edf5 !important;
}
.accordion-btn {
  background-color:    #ffffff !important;
  color:               #061b31 !important;
  opacity:             1 !important;
  visibility:          visible !important;
  forced-color-adjust: none;
  -webkit-forced-color-adjust: none;
}
.accordion-btn[aria-expanded="true"] {
  background-color:    rgba(83,58,253,0.04) !important;
  color:               #061b31 !important;
}
.accordion-question {
  color:               #061b31 !important;
  background-color:    transparent !important;
  opacity:             1 !important;
}
.accordion-body {
  background-color:    #ffffff !important;
  color:               #64748d !important;
  forced-color-adjust: none;
}
.accordion-body.is-open {
  display:             grid !important;
  visibility:          visible !important;
  opacity:             1 !important;
  grid-template-rows:  1fr !important;
}
.accordion-body-inner {
  color:               #64748d !important;
  background-color:    transparent !important;
  visibility:          visible !important;
  opacity:             1 !important;
}
.accordion-body.is-open .accordion-body-inner {
  display:             block !important;
  visibility:          visible !important;
  opacity:             1 !important;
  color:               #64748d !important;
}
.accordion-body-inner a {
  color:               #533afd !important;
}
.accordion-body-inner strong {
  color:               #061b31 !important;
}
.accordion-icon {
  background-color:    rgba(83,58,253,0.07) !important;
  border-color:        rgba(83,58,253,0.18) !important;
  forced-color-adjust: none;
}
.accordion-icon::after {
  border-color:        #533afd !important;
}
.accordion-btn[aria-expanded="true"] .accordion-icon {
  background-color:    #533afd !important;
}
.accordion-btn[aria-expanded="true"] .accordion-icon::after {
  border-color:        #ffffff !important;
}

/* ── 4. Trouble Cards (§8 Troubleshooting) ─────────────────────── */
.anl-trouble-card {
  background-color:    #ffffff !important;
  color:               #061b31 !important;
  forced-color-adjust: none;
  color-scheme:        only light;
}
.anl-trouble-title { color: #061b31 !important; }
.anl-trouble-text  { color: #64748d !important; }

/* ── 5. Why Cards (§9) ──────────────────────────────────────────── */
.why-card {
  background-color:    #ffffff !important;
  color:               #061b31 !important;
  forced-color-adjust: none;
  color-scheme:        only light;
}
.why-card h3 { color: #061b31 !important; }
.why-card p  { color: #64748d !important; }

/* ── 6. Section-alt background sections ─────────────────────────── */
.section-alt {
  background-color:    #f4f7fb !important;
  color-scheme:        only light;
}

/* ── 7. Body & general text — anti-inversion ────────────────────── */
body {
  background-color:    #ffffff !important;
  color:               #64748d !important;
  color-scheme:        only light;
}

/* ── 8. Override forced-colors (Windows High Contrast / Android) ── */
@media (forced-colors: active) {
  .anl-step-card,
  .accordion-btn,
  .accordion-body,
  .accordion-body-inner,
  .anl-trouble-card,
  .why-card {
    forced-color-adjust: none;
    background-color:    #ffffff !important;
    color:               #061b31 !important;
  }
}

/* ── 9. Prevent dark-mode inversion on Samsung prefers-color-scheme ─ */
@media (prefers-color-scheme: dark) {
  html, body,
  .anl-step-card,
  .accordion, .accordion-item, .accordion-btn, .accordion-body,
  .accordion-body-inner, .accordion-question,
  .anl-trouble-card, .why-card, .section-alt {
    color-scheme:        only light;
    forced-color-adjust: none;
    -webkit-forced-color-adjust: none;
  }
  /* Re-assert explicit colors even inside prefers-color-scheme:dark */
  .anl-step-card       { background-color: #ffffff !important; color: #061b31 !important; }
  .accordion-btn       { background-color: #ffffff !important; color: #061b31 !important; }
  .accordion-question  { color: #061b31 !important; }
  .accordion-body-inner { color: #64748d !important; background-color: #ffffff !important; }
  .anl-trouble-card    { background-color: #ffffff !important; color: #061b31 !important; }
  .why-card            { background-color: #ffffff !important; color: #061b31 !important; }
  body                 { background-color: #ffffff !important; color: #64748d !important; }
}

/* ================================================================
   BEWERTUNGEN.PHP — Phase 1 CSS
   §1 Hero + §2 Rating Visual
   Mobile-First: all grids collapse to 1 col at ≤480px
   ================================================================ */

/* ── §1 Hero ─────────────────────────────────────────────── */
.bew-hero {
  position: relative;
  background: #08080f;
  overflow: hidden;
  padding: 110px 0 90px;
  min-height: 76vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bew-hero > .container {
  position: relative;
  z-index: 3;
}

.bew-hero-kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(83, 58, 253, 0.22);
  border: 1px solid rgba(83, 58, 253, 0.35);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 20px;
  white-space: normal;
  word-break: break-word;
}

/* ── §2 Rating Box ───────────────────────────────────────── */
.bew-rating-box {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  background: #ffffff;
  border: 1px solid #e5edf5;
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: rgba(50, 50, 93, 0.12) 0px 8px 32px -8px,
              rgba(0, 0, 0, 0.06) 0px 4px 12px -4px;
  margin-top: 32px;
}

.bew-rating-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
  flex-shrink: 0;
}

.bew-rating-score {
  font-size: 4.5rem;
  font-weight: 800;
  color: #533afd;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.bew-stars {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}

.bew-rating-count {
  font-size: 0.8125rem;
  color: #64748d;
  margin-top: 8px;
  text-align: center;
}

.bew-rating-recommend {
  font-size: 0.8125rem;
  color: #64748d;
  margin-top: 6px;
  text-align: center;
}

.bew-recommend-num {
  font-size: 1rem;
  font-weight: 700;
  color: #15be53;
}

/* ── Rating Bars ─────────────────────────────────────────── */
.bew-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

.bew-bar-row {
  display: grid;
  grid-template-columns: 44px 1fr 32px;
  align-items: center;
  gap: 10px;
}

.bew-bar-label {
  text-align: right;
}

.bew-bar-stars {
  font-size: 0.8125rem;
  color: #64748d;
  font-weight: 600;
  white-space: nowrap;
}

.bew-bar-track {
  height: 10px;
  border-radius: 8px;
  background: #f1f5f9;
  overflow: hidden;
}

.bew-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.bew-bar-fill--primary   { background: #533afd; }
.bew-bar-fill--secondary { background: #a78bfa; }
.bew-bar-fill--neutral   { background: #cbd5e1; }

.bew-bar-count {
  font-size: 0.8125rem;
  color: #64748d;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Category Scores ─────────────────────────────────────── */
.bew-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.bew-cat {
  text-align: center;
  padding: 22px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5edf5;
  box-shadow: rgba(23, 23, 23, 0.06) 0px 3px 8px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.bew-cat:hover {
  box-shadow: rgba(83, 58, 253, 0.12) 0px 8px 24px -4px;
  transform: translateY(-2px);
}

.bew-cat-score {
  font-size: 2rem;
  font-weight: 800;
  color: #533afd;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bew-cat-stars {
  font-size: 0.75rem;
  color: #533afd;
  margin-top: 4px;
  letter-spacing: 1px;
}

.bew-cat-label {
  font-size: 0.8125rem;
  color: #64748d;
  margin-top: 6px;
  font-weight: 500;
}

/* ── Intro Text ──────────────────────────────────────────── */
.bew-intro-text p {
  font-size: 1rem;
  color: #64748d;
  line-height: 1.7;
  max-width: 820px;
}

/* ================================================================
   BEWERTUNGEN.PHP — Responsive (Mobile-First)
   ================================================================ */

@media (max-width: 1024px) {
  .bew-cats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .bew-hero {
    padding: 80px 0 60px;
    min-height: auto !important;
  }
  .bew-rating-box {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px 20px;
  }
  .bew-rating-left {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-width: unset;
  }
  .bew-rating-score { font-size: 3rem; }
  .bew-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 640px) {
  .bew-hero {
    padding: 60px 0 48px;
  }
  .bew-hero-kicker {
    font-size: 0.75rem;
    padding: 5px 12px;
  }
  .bew-rating-box { padding: 20px 16px; }
  .bew-rating-left {
    flex-wrap: wrap;
    justify-content: center;
  }
  .bew-rating-count,
  .bew-rating-recommend { text-align: center; }
}

@media (max-width: 480px) {
  .bew-hero { padding: 48px 0 40px; }
  .bew-rating-score { font-size: 2.5rem; }
  .bew-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bew-cat { padding: 16px 10px; }
  .bew-cat-score { font-size: 1.5rem; }
  .bew-bar-row { grid-template-columns: 40px 1fr 28px; gap: 8px; }
}

/* ================================================================
   BEWERTUNGEN.PHP — Phase 2 CSS
   §3 Reviews Grid + §4 Paket Experience + §5 Device Experience
   ================================================================ */

/* ── §3 Reviews Grid ─────────────────────────────────────── */
.bew-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.bew-card {
  border-radius: 14px;
  padding: 24px 22px;
  background: #ffffff;
  border: 1px solid #e5edf5;
  box-shadow: rgba(23, 23, 23, 0.06) 0px 4px 12px;
  transition: box-shadow 0.2s, transform 0.18s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bew-card:hover {
  box-shadow: rgba(83, 58, 253, 0.12) 0px 8px 28px -4px;
  transform: translateY(-2px);
}
.bew-card--four-star {
  border-color: #e5edf5;
}

.bew-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bew-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #533afd;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  forced-color-adjust: none;
}
.bew-avatar--slate {
  background: #64748d;
}

.bew-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #061b31;
  line-height: 1.2;
}
.bew-date {
  font-size: 0.78rem;
  color: #64748d;
}

.bew-pkg {
  display: inline-block;
  background: rgba(83, 58, 253, 0.1);
  color: #533afd;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: auto;
  white-space: nowrap;
}
.bew-pkg--std {
  background: rgba(100, 116, 141, 0.1);
  color: #64748d;
}

.bew-card-stars {
  font-size: 0.9rem;
}
.bew-star-filled {
  color: #533afd;
  letter-spacing: 1px;
}
.bew-star-empty {
  color: #cbd5e1;
  letter-spacing: 1px;
}

.bew-text {
  font-size: 0.9rem;
  color: #64748d;
  line-height: 1.65;
  flex: 1;
}

.bew-inline-link {
  color: #533afd;
  text-decoration: none;
  font-weight: 600;
}
.bew-inline-link:hover {
  text-decoration: underline;
}

.bew-outro-text {
  font-size: 1rem;
  color: #64748d;
  line-height: 1.7;
  max-width: 820px;
}

/* ── §4 Paket Experience ─────────────────────────────────── */
.pe-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
  align-items: start;
}

.pe-card {
  border-radius: 14px;
  padding: 24px 18px;
  border: 1.5px solid #e5edf5;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s, transform 0.18s;
}
.pe-card:hover {
  box-shadow: rgba(50, 50, 93, 0.1) 0px 8px 24px -4px;
  transform: translateY(-2px);
}

.pe-card--featured {
  border-color: #533afd;
  box-shadow: rgba(83, 58, 253, 0.15) 0px 4px 28px -4px;
}
.pe-card--value {
  border-color: #15be53;
}

.pe-badge-top {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #533afd;
  color: #ffffff;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 10px;
  align-self: flex-start;
}
.pe-badge-top--green {
  background: #108c3d;
}

.pe-pkg-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #061b31;
  margin-bottom: 4px;
}

.pe-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: #061b31;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.pe-price-period {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #64748d;
}

.pe-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.pe-stars {
  color: #533afd;
  font-size: 0.8125rem;
  letter-spacing: 1px;
}
.pe-rating-num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #533afd;
}

.pe-divider {
  height: 1px;
  background: #e5edf5;
  margin: 12px 0;
}

.pe-quotes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.pe-quote {
  margin: 0;
  padding: 0;
}
.pe-quote p {
  font-size: 0.8125rem;
  color: #64748d;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 2px;
}
.pe-quote cite {
  font-size: 0.75rem;
  color: #a0aec0;
  font-style: normal;
}

/* ── §5 Device Experience ────────────────────────────────── */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.dev-card {
  padding: 32px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.dev-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(167, 139, 250, 0.4);
}

.dev-icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
  display: block;
}

.dev-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
}

.dev-subtitle {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 14px;
}

.dev-body {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0 0 16px;
}

.dev-app-tag {
  display: inline-block;
  background: rgba(83, 58, 253, 0.25);
  color: #a78bfa;
  border: 1px solid rgba(83, 58, 253, 0.3);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Direct Answer Box Dark Variant ─────────────────────── */
.direct-answer-box--dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}
.direct-answer-box--dark .dab-label {
  color: #a78bfa;
}
.direct-answer-box--dark p {
  color: rgba(255, 255, 255, 0.82);
}

/* ── CTA Row ─────────────────────────────────────────────── */
.bew-cta-row {
  margin-top: 28px;
  text-align: center;
}

/* ================================================================
   Phase 2 — Mobile Responsive
   ================================================================ */

@media (max-width: 1280px) {
  .pe-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .pe-grid { grid-template-columns: repeat(2, 1fr); }
  .dev-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .bew-grid { grid-template-columns: 1fr; }
  .dev-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .pe-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pe-card { padding: 18px 14px; }
  .pe-price { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .pe-grid { grid-template-columns: 1fr; }
  .bew-card { padding: 18px 16px; }
  .bew-card-header { flex-wrap: wrap; }
  .bew-pkg { margin-left: 0; }
  .dev-card { padding: 24px 18px; }
}

/* ================================================================
   BEWERTUNGEN.PHP — Phase 3 CSS
   §6 Vergleich + §7 Trust + §8 Long Reviews
   ================================================================ */

/* ── §6 Savings Box ──────────────────────────────────────── */
.savings-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, rgba(83,58,253,0.07) 0%, rgba(83,58,253,0.03) 100%);
  border: 1.5px solid rgba(83, 58, 253, 0.2);
  border-radius: 12px;
  padding: 22px 24px;
}

.savings-box-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.savings-box-body {
  font-size: 0.9375rem;
  color: #061b31;
  line-height: 1.65;
}

/* ── §7 Trust Pillars ────────────────────────────────────── */
.trust-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0;
}

.trust-pillar {
  text-align: center;
  padding: 32px 24px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5edf5;
  box-shadow: rgba(23, 23, 23, 0.06) 0px 4px 16px;
  transition: box-shadow 0.2s, transform 0.18s;
}
.trust-pillar:hover {
  box-shadow: rgba(83, 58, 253, 0.1) 0px 8px 28px -4px;
  transform: translateY(-2px);
}

.trust-pillar-icon {
  font-size: 2.25rem;
  margin-bottom: 14px;
  display: block;
}

.trust-pillar-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #061b31;
  margin: 0 0 4px;
}

.trust-pillar-sub {
  font-size: 0.8125rem;
  color: #533afd;
  font-weight: 600;
  margin: 0 0 14px;
}

.trust-pillar-body {
  font-size: 0.875rem;
  color: #64748d;
  line-height: 1.65;
  margin: 0;
}

/* ── §7 Customer Blockquote ──────────────────────────────── */
.bew-blockquote {
  margin: 36px 0 0;
  padding: 32px 36px;
  background: #f8f9ff;
  border-left: 4px solid #533afd;
  border-radius: 0 12px 12px 0;
  position: relative;
}
.bew-blockquote::before {
  content: '\201C';
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 4rem;
  color: rgba(83, 58, 253, 0.15);
  line-height: 1;
  font-weight: 800;
}

.bew-blockquote-text {
  font-size: 1.0625rem;
  color: #273951;
  line-height: 1.7;
  font-style: italic;
  margin: 0 0 16px;
  padding-left: 8px;
}

.bew-blockquote-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
}

.bew-blockquote-stars {
  color: #533afd;
  font-size: 0.9375rem;
  letter-spacing: 1px;
}

.bew-blockquote-footer cite {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  color: #273951;
}

/* ── §7 Rating Banner ────────────────────────────────────── */
.rating-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, #533afd 0%, #2e2b8c 100%);
  color: #ffffff;
  text-align: center;
  padding: 28px 32px;
  border-radius: 16px;
  margin-top: 32px;
  box-shadow: rgba(83, 58, 253, 0.35) 0px 8px 32px -8px;
}

.rating-banner-score {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.rating-banner-sep {
  font-size: 1.25rem;
  opacity: 0.5;
}

.rating-banner-text {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.92;
}

/* ── §8 Long Review Blocks ───────────────────────────────── */
.lr-block {
  background: #ffffff;
  border-radius: 14px;
  padding: 32px 28px;
  border-left: 4px solid #533afd;
  border-top: 1px solid #e5edf5;
  border-right: 1px solid #e5edf5;
  border-bottom: 1px solid #e5edf5;
  margin-bottom: 20px;
  box-shadow: rgba(23, 23, 23, 0.05) 0px 4px 16px;
  transition: box-shadow 0.2s;
}
.lr-block:hover {
  box-shadow: rgba(83, 58, 253, 0.1) 0px 8px 28px -4px;
}

.lr-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.lr-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #533afd;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
  forced-color-adjust: none;
}
.lr-avatar--slate {
  background: #64748d;
}

.lr-author-name {
  font-size: 1rem;
  font-weight: 700;
  color: #061b31;
  display: block;
  margin-bottom: 4px;
}

.lr-author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lr-stars {
  color: #533afd;
  font-size: 0.875rem;
  letter-spacing: 1px;
}

.lr-pkg {
  display: inline-block;
  background: rgba(83, 58, 253, 0.1);
  color: #533afd;
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 0.73rem;
  font-weight: 700;
}

.lr-date {
  font-size: 0.78rem;
  color: #64748d;
}

.lr-body {
  font-size: 0.9375rem;
  color: #64748d;
  line-height: 1.75;
  margin: 0;
}

/* ================================================================
   Phase 3 — Mobile Responsive
   ================================================================ */

@media (max-width: 820px) {
  .trust-pillars { grid-template-columns: 1fr; gap: 16px; }
  .bew-blockquote { padding: 24px 20px; }
  .bew-blockquote::before { font-size: 3rem; top: 8px; left: 14px; }
  .rating-banner { flex-direction: column; gap: 6px; padding: 22px 20px; }
  .rating-banner-score { font-size: 1.5rem; }
  .rating-banner-sep { display: none; }
  .lr-block { padding: 24px 20px; }
  .savings-box { flex-direction: column; gap: 10px; }
}

@media (max-width: 640px) {
  .trust-pillar { padding: 24px 18px; }
  .lr-author { flex-wrap: wrap; }
  .lr-author-meta { gap: 6px; }
}

@media (max-width: 480px) {
  .bew-blockquote { padding: 20px 16px; border-radius: 0 8px 8px 0; }
  .bew-blockquote-text { font-size: 0.9375rem; }
  .lr-block { padding: 20px 16px; }
  .savings-box { padding: 18px 16px; }
}

/* ==========================================================
   BLOG ARCHIVE — blog.php
   ========================================================== */

/* ── Hero ─────────────────────────────────────────────────── */
.blog-archive-hero {
  background: var(--navy);
  padding: 80px 0 68px;
  text-align: center;
}

.blog-archive-hero-kicker {
  display: inline-block;
  background: rgba(83,58,253,0.22);
  border: 1px solid rgba(83,58,253,0.35);
  border-radius: 100px;
  padding: 5px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--purple-light);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.blog-archive-title {
  font-size: 2.875rem;
  font-weight: 700;
  letter-spacing: -0.92px;
  color: #ffffff;
  line-height: 1.08;
  margin-bottom: 14px;
}

.blog-archive-sub {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.62);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.blog-breadcrumb {
  margin-bottom: 28px;
}

.blog-breadcrumb-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
}

.blog-breadcrumb-list a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.blog-breadcrumb-list a:hover { color: var(--purple-light); }

/* ── Section label divider ────────────────────────────────── */
.blog-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.blog-section-label-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.blog-section-label-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}

/* ── Featured article card ────────────────────────────────── */
.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-std);
  margin-bottom: 60px;
  text-decoration: none;
}

.blog-featured-img-wrap {
  position: relative;
  overflow: hidden;
  height: 440px;
}

.blog-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-featured:hover .blog-featured-img { transform: scale(1.04); }

.blog-featured-cat {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
  z-index: 2;
}

.blog-featured-body {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--slate);
  margin-bottom: 18px;
}

.blog-featured-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--slate);
  flex-shrink: 0;
}

.blog-featured-title {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.52px;
  color: var(--ink);
  line-height: 1.22;
  margin-bottom: 16px;
}

.blog-featured-excerpt {
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.68;
  margin-bottom: 30px;
}

.blog-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: gap 0.2s;
}
.blog-featured-cta:hover { gap: 11px; color: var(--primary); }

.blog-featured-cta-arrow { transition: transform 0.2s; flex-shrink: 0; }
.blog-featured-cta:hover .blog-featured-cta-arrow { transform: translateX(3px); }

/* ── Grid header ──────────────────────────────────────────── */
.blog-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.blog-grid-title {
  margin: 0;
}

/* ── Category filter pills ────────────────────────────────── */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-cat-pill {
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1.5px solid var(--border);
  color: var(--slate);
  background: transparent;
  line-height: 1.4;
  user-select: none;
}

.blog-cat-pill--active {
  border-color: var(--primary);
  background: var(--purple-sub);
  color: var(--primary);
  font-weight: 600;
}

/* ── Article card grid ────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-amb);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s, box-shadow 0.22s;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-std);
}

.blog-card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 210px;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.blog-card:hover .blog-card-img { transform: scale(1.06); }

.blog-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  z-index: 2;
}

.blog-card-body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--slate);
  margin-bottom: 10px;
}

.blog-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 10px;
}

.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--primary); }

.blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.62;
  flex: 1;
  margin-bottom: 18px;
}

.blog-card-cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.blog-card-cta:hover { color: var(--purple-hover); }

/* ── Coming-soon placeholder card ────────────────────────── */
.blog-card--soon {
  border: 2px dashed var(--border);
  box-shadow: none;
  background: rgba(244,247,251,0.6);
}

.blog-card--soon:hover { transform: none; box-shadow: none; }

.blog-card-soon-inner {
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 260px;
}

.blog-card-soon-icon { font-size: 1.875rem; opacity: 0.35; }

.blog-card-soon-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: 0.6;
}

.blog-card-soon-sub {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.45;
  line-height: 1.35;
}

/* ── CTA strip ────────────────────────────────────────────── */
.blog-cta-strip { padding: 64px 0; }

.blog-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.blog-cta-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.56px;
  color: #ffffff;
  margin-bottom: 8px;
}

.blog-cta-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
}

.blog-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── Mobile Responsive ────────────────────────────────────── */
@media (max-width: 1024px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-img-wrap { height: 320px; }
  .blog-featured-body { padding: 36px 32px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid-header { flex-direction: column; align-items: flex-start; }
  .blog-cta-inner { flex-direction: column; text-align: center; }
  .blog-cta-actions { justify-content: center; }
}

@media (max-width: 640px) {
  .blog-archive-title { font-size: 2.125rem; }
  .blog-archive-hero { padding: 56px 0 48px; }
  .blog-featured-title { font-size: 1.375rem; }
  .blog-featured-body { padding: 28px 24px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-cats { gap: 6px; }
  .blog-cat-pill { font-size: 0.8125rem; padding: 5px 13px; }
  .blog-cta-title { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .blog-archive-hero { padding: 44px 0 36px; }
  .blog-featured-img-wrap { height: 240px; }
  .blog-grid-header { gap: 10px; }
}

/* ==========================================================
   BLOG ARTICLE PAGE — blog/iptv-schweiz-legal.php
   ========================================================== */

/* ── Article hero ─────────────────────────────────────────── */
.blog-post-hero {
  background: var(--navy);
  padding: 64px 0 52px;
  text-align: center;
}

.blog-post-cat-badge {
  display: inline-block;
  background: rgba(83,58,253,0.22);
  border: 1px solid rgba(83,58,253,0.35);
  border-radius: 100px;
  padding: 5px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: 20px;
}

.blog-post-title {
  font-size: 2.625rem;
  font-weight: 700;
  letter-spacing: -0.84px;
  color: #ffffff;
  line-height: 1.12;
  margin-bottom: 8px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.blog-post-title-sub {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: rgba(255,255,255,0.72);
  margin-top: 6px;
}

.blog-post-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  margin-top: 18px;
}

.blog-post-author { color: rgba(255,255,255,0.65); font-weight: 500; }

.blog-post-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

/* ── Featured image ───────────────────────────────────────── */
.blog-post-featured-img-wrap {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  background: var(--navy);
}

.blog-post-featured-img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* ── Article body container ───────────────────────────────── */
.blog-post-container {
  max-width: 820px;
  margin: 0 auto;
}

/* ── GEO-citability passage ───────────────────────────────── */
.blog-post-geo {
  background: var(--section-alt-bg);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: 20px 22px;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--slate);
  margin: 24px 0;
}

/* ── Inline images ────────────────────────────────────────── */
.blog-post-img-wrap {
  margin: 32px 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-amb);
}

.blog-post-img-wrap--dark {
  margin: 32px auto;
  max-width: 760px;
  border-radius: 16px;
}

.blog-post-img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-post-img--rounded { border-radius: 16px; }

.blog-post-img-caption {
  background: rgba(0,0,0,0.04);
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--slate);
  text-align: center;
  line-height: 1.45;
}

/* ── Risk comparison grid ─────────────────────────────────── */
.risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}

.risk-col {
  border-radius: 14px;
  padding: 28px 24px;
  border: 1.5px solid var(--border);
}

.risk-col--bad  { border-color: rgba(234,34,97,0.25); background: rgba(234,34,97,0.03); }
.risk-col--good { border-color: rgba(21,190,83,0.3);  background: rgba(21,190,83,0.04); }

.risk-col-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--ink);
  line-height: 1.3;
}

.risk-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.risk-list li {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.6;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.risk-list li:last-child { border-bottom: none; padding-bottom: 0; }
.risk-list strong { color: var(--ink); }

/* ── GEO finale passage (dark section) ───────────────────── */
.blog-post-geo-passage {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}

.blog-post-geo-passage p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
}

.blog-post-cta { padding: 72px 0; }

/* ── Mobile Responsive ────────────────────────────────────── */
@media (max-width: 1024px) {
  .blog-post-title { font-size: 2.25rem; }
  .blog-post-title-sub { font-size: 1.25rem; }
}

@media (max-width: 820px) {
  .blog-post-container { padding: 0 4px; }
  .risk-grid { grid-template-columns: 1fr; }
  .blog-post-geo { padding: 16px 18px; }
}

@media (max-width: 640px) {
  .blog-post-hero { padding: 48px 0 40px; }
  .blog-post-title { font-size: 1.875rem; }
  .blog-post-title-sub { font-size: 1.125rem; }
  .blog-post-featured-img-wrap { max-height: 320px; }
  .blog-post-featured-img { max-height: 320px; }
  .blog-post-img-wrap { border-radius: 10px; }
}

@media (max-width: 480px) {
  .blog-post-hero { padding: 36px 0 32px; }
  .blog-post-title { font-size: 1.625rem; letter-spacing: -0.4px; }
  .risk-col { padding: 20px 16px; }
  .blog-post-cta { padding: 52px 0; }
}

/* ================================================================
   CONTACT PAGE — kontakt.php
   ================================================================ */

/* ── Hero ── */
.contact-hero { padding: 100px 0 80px; }
.contact-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.contact-hero-sub {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.72);
  max-width: 480px;
  margin-bottom: 32px;
  line-height: 1.6;
}

/* ── Contact Cards ── */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}
.contact-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-amb);
}
.contact-card--wa { border-color: rgba(37,211,102,0.45); }
.contact-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card-icon--email { background: rgba(83,58,253,0.09); color: var(--primary); }
.contact-card-icon--wa    { background: rgba(37,211,102,0.12); color: #16a34a; }
.contact-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.contact-card-value {
  font-size: 0.9375rem;
  color: var(--slate);
  margin-bottom: 12px;
  font-weight: 500;
  word-break: break-all;
}
.contact-card-desc {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: 24px;
}
.contact-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.contact-card-link:active { transform: scale(0.97); }
.contact-card-link--email { background: var(--primary); color: var(--white); }
.contact-card-link--email:hover { background: var(--purple-hover); }
.contact-card-link--wa    { background: #25d366; color: var(--white); }
.contact-card-link--wa:hover { background: #1db954; }

/* ── Contact Form ── */
.contact-form-wrap {
  max-width: 660px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 20px;
  padding: 48px 44px;
  box-shadow: var(--shadow-amb);
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form .form-group { margin-bottom: 20px; }
.contact-form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.contact-form label .required { color: var(--ruby); margin-left: 2px; }
.contact-form .form-control {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.9375rem;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.5;
}
.contact-form .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(83,58,253,0.12);
}
.contact-form .form-control::placeholder { color: var(--slate); opacity: 0.6; }
textarea.form-control { resize: vertical; min-height: 130px; }

/* Custom select */
.select-wrap { position: relative; }
.select-wrap select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate);
  pointer-events: none;
  display: flex;
}

.form-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font);
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-top: 4px;
}
.form-submit-btn:hover  { background: var(--purple-hover); }
.form-submit-btn:active { transform: scale(0.98); }

.form-privacy-note {
  font-size: 0.75rem;
  color: var(--slate);
  text-align: center;
  margin-top: 14px;
  opacity: 0.75;
}

/* Status messages */
.contact-success {
  background: var(--success-bg);
  border: 1.5px solid var(--success-border);
  border-radius: 12px;
  padding: 20px 24px;
  color: var(--success-text);
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 1.6;
}
.contact-error {
  background: #fef2f2;
  border: 1.5px solid rgba(239,68,68,0.35);
  border-radius: 12px;
  padding: 20px 24px;
  color: #b91c1c;
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 1.6;
}

/* ── Response Banner ── */
.response-banner { padding: 80px 0 88px; }
.response-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(83,58,253,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--primary-light);
}
.response-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
  text-align: center;
}
.response-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin: 0 auto 32px;
  text-align: center;
  line-height: 1.7;
}
.response-stats {
  display: flex;
  justify-content: center;
  gap: 52px;
  flex-wrap: wrap;
}
.response-stat { text-align: center; }
.response-stat-num {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.response-stat-label {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
  margin-top: 5px;
}

/* ── Mobile ── */
@media (max-width: 820px) {
  .contact-form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .contact-hero        { padding: 72px 0 56px; }
  .contact-cards       { grid-template-columns: 1fr; }
  .contact-card        { padding: 28px 24px; }
  .contact-form-wrap   { padding: 28px 20px; }
  .response-banner     { padding: 60px 0 64px; }
  .response-stats      { gap: 28px; }
  .response-stat-num   { font-size: 1.5rem; }
}

/* ── Mobile Table Scroll Fix ── */
/* Ensure min-widths so tables actually overflow wrappers on small screens */
.data-table  { min-width: 560px; }
.paket-table { min-width: 600px; }

@media (max-width: 820px) {
  /* Force all table wrappers scrollable — belt + suspenders */
  .table-wrap,
  .table-scroll,
  .paket-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
  }
  .table-wrap:active,
  .table-scroll:active,
  .paket-table-wrapper:active { cursor: grabbing; }

  /* Scroll hint pill — subtle visual cue below scrollable tables */
  .table-wrap::after,
  .paket-table-wrapper::after {
    content: '\2190\00A0\00A0scrollen\00A0\00A0\2192';
    display: block;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: rgba(83,58,253,0.55);
    padding: 7px 0 3px;
    font-weight: 500;
    pointer-events: none;
  }
}

/* ── Floating CTA Button ── */
.fab-cta {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  background: var(--purple);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(83,58,253,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.fab-cta:hover,
.fab-cta:focus-visible {
  background: #3f27e0;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(83,58,253,0.55);
  color: #fff;
  text-decoration: none;
}
@media (max-width: 480px) {
  .fab-cta {
    bottom: 16px;
    left: 16px;
    padding: 11px 18px;
    font-size: 0.875rem;
  }
}

/* ── Payment Trust Badges ── */
.pay-trust{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.pay-trust-lbl{font-size:.72rem;color:rgba(255,255,255,.38);white-space:nowrap;margin-right:2px}
.pay-trust-lock{color:rgba(255,255,255,.28);flex-shrink:0}
.pay-b{display:inline-flex;align-items:center;justify-content:center;height:28px;border-radius:5px;padding:0 9px;font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1;user-select:none;flex-shrink:0}
.pay-b--visa{background:#1a1f71;color:#fff;font-style:italic;font-size:14px;letter-spacing:-.5px;min-width:46px}
.pay-b--mc{background:#fff;min-width:46px;gap:0;padding:0 4px}
.mc-l,.mc-r{display:block;width:17px;height:17px;border-radius:50%;flex-shrink:0}
.mc-l{background:#eb001b}
.mc-r{background:#f79e1b;margin-left:-7px}
.pay-b--paypal{background:#fff;min-width:52px;gap:0;font-size:12px}
.pp-1{color:#009cde}
.pp-2{color:#003087}
.pay-b--twint{background:#0050aa;color:#fff;letter-spacing:1px;font-size:10px;min-width:46px}
.pay-b--pf{background:#f7c814;color:#1a1a1a;font-size:7.5px;text-align:center;line-height:1.3;height:32px;padding:0 7px;min-width:54px}
/* Footer pay row */
.footer-pay-row{border-top:1px solid rgba(255,255,255,.06);padding:14px 0}
.footer-pay-row .footer-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
/* Author EEAT Box */
.author-box{display:flex;align-items:flex-start;gap:16px;background:rgba(83,58,253,.06);border:1px solid rgba(83,58,253,.18);border-radius:14px;padding:20px 22px;margin:0 0 32px}
.author-avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%;overflow:hidden;background:rgba(83,58,253,.12);display:flex;align-items:center;justify-content:center}
.author-avatar svg{width:48px;height:48px}
.author-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.author-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);font-weight:600}
.author-name{font-size:.9375rem;font-weight:700;color:rgba(255,255,255,.9)}
.author-title{font-size:.8125rem;color:#a89eff}
.author-blurb{font-size:.8375rem;color:rgba(255,255,255,.5);line-height:1.6;margin:4px 0 0}
.author-updated{display:flex;align-items:center;gap:5px;font-size:.73rem;color:rgba(255,255,255,.28);white-space:nowrap;margin-top:6px;flex-shrink:0}
@media(max-width:580px){.author-box{flex-wrap:wrap}.author-updated{width:100%}}