/* ============================================================
   TV SCHWEIZ — Dark Premium Design System
   tv-schweiz.ch | v1.0.0
   ============================================================ */

:root {
  --bg:             #0a0a0f;
  --surface:        #13131a;
  --surface-2:      #1c1c26;
  --primary:        #e8003d;
  --primary-hover:  #c5002f;
  --primary-glow:   rgba(232,0,61,0.20);
  --text:           #ffffff;
  --text-muted:     #9ca3af;
  --text-dim:       #6b7280;
  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.15);
  --header-h:       70px;
  --max-w:          1200px;
  --r-sm:           4px;
  --r-md:           8px;
  --r-lg:           16px;
  --font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-card:    0 4px 24px rgba(0,0,0,0.50);
  --shadow-primary: 0 4px 20px rgba(232,0,61,0.35);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--header-h);
}

/* ── HEADER ──────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
  background: rgba(10,10,15,0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  background: rgba(10,10,15,0.97);
  border-color: var(--border-strong);
}

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

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 12px;
}

.logo-icon {
  width: 34px;
  height: 34px;
  background: var(--primary);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.logo-text {
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.logo-text strong { font-weight: 700; }

/* Nav */
.main-nav { margin-left: auto; }

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.main-nav a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--text);
  background: rgba(255,255,255,0.07);
}

.main-nav a.active { color: var(--primary); }

/* CTA button in header */
.btn-cta {
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: var(--r-sm);
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 12px;
}

.btn-cta:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-primary);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 60px 24px 32px;
  margin-top: 96px;
}

.footer-inner { max-width: var(--max-w); margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
}

.footer-brand .logo { margin-bottom: 14px; }

.footer-brand p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 250px;
}

.footer-col h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 11px; }

.footer-col a {
  text-decoration: none;
  font-size: 14px;
  color: var(--text-dim);
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--text); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p { font-size: 13px; color: var(--text-dim); }

.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

.footer-legal a {
  text-decoration: none;
  font-size: 13px;
  color: var(--text-dim);
  transition: color 0.2s;
}

.footer-legal a:hover { color: var(--text); }

/* ── GLOBAL BUTTONS ──────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 30px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  line-height: 1;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* ── UTILITY ─────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 80px 0; }

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  line-height: 1.2;
  font-weight: 700;
}

a { color: var(--primary); }

img { max-width: 100%; height: auto; display: block; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .main-nav, .btn-cta { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 900px) {
  .main-nav.open {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(10,10,15,0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 20px;
    overflow-y: auto;
  }

  .main-nav.open ul {
    flex-direction: column;
    gap: 4px;
  }

  .main-nav.open li { border-bottom: 1px solid var(--border); }

  .main-nav.open a {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
  }

  .main-nav.open .nav-cta-mobile {
    display: block;
    margin-top: 20px;
    text-align: center;
  }
}

/* hide mobile CTA on desktop — overridden by .main-nav.open rule above */
.nav-cta-mobile { display: none; }

@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .btn { padding: 12px 24px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════
   PAGE-SPECIFIC STYLES — index.php (tv-schweiz.ch)
══════════════════════════════════════════════════════════ */

/* ── Shared utilities ────────────────────────────────────── */
.btn-lg   { padding: 15px 36px; font-size: 16px; }
.btn-block{ display: flex; width: 100%; justify-content: center; }
.text-link{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--primary); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: opacity .2s;
}
.text-link:hover { opacity: .75; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header h2 {
  font-size: clamp(24px, 3vw, 38px);
  margin-bottom: 12px;
}
.section-header p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
}

/* ── S1 · HERO ───────────────────────────────────────────── */
.hero {
  padding: 80px 0 60px;
  background: var(--bg);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-text h1 {
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 18px;
  color: var(--text);
}

.hero-tagline {
  font-size: 15px;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 20px;
}

.hero-lead {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.stat strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.stat span {
  font-size: 13px;
  color: var(--text-dim);
}

.hero-image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-image-badge {
  position: absolute;
  bottom: 16px; left: 16px;
  background: rgba(10,10,15,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.badge-dot {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ── S2 · WAS IST IPTV ───────────────────────────────────── */
.was-ist-section { background: var(--surface); }

.was-ist-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}

.was-ist-content h3 {
  font-size: 18px;
  margin: 28px 0 10px;
  color: var(--text);
}
.was-ist-content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.was-ist-content .text-link { margin-top: 24px; }

.was-ist-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.info-card-icon { font-size: 22px; margin-bottom: 8px; }
.info-card h4   { font-size: 15px; margin-bottom: 6px; color: var(--text); }
.info-card p    { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0; }

/* ── S3 · PAKETE ─────────────────────────────────────────── */
.pricing-section { background: var(--bg); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color .2s;
}
.pricing-card:hover { border-color: var(--border-strong); }

.pricing-card--featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-primary);
  position: relative;
}

.pricing-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.pricing-label--hot { color: var(--primary); }

.pricing-period {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.pricing-price {
  margin-bottom: 6px;
}
.pricing-price strong {
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -1px;
}
.pricing-price span {
  font-size: 15px;
  color: var(--text-dim);
}
.pricing-save {
  font-size: 13px;
  color: #22c55e;
  font-weight: 600;
  margin-bottom: 20px;
}
.pricing-features {
  list-style: none;
  flex: 1;
  margin-bottom: 24px;
}
.pricing-features li {
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-features li::before {
  content: '✓';
  color: #22c55e;
  font-weight: 700;
  flex-shrink: 0;
}
.pricing-note {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  max-width: 680px;
  margin: 0 auto 24px;
  line-height: 1.7;
}
.pricing-cta-wrap { text-align: center; }

/* ── S4 · SENDERLISTE ────────────────────────────────────── */
.sender-section { background: var(--surface); }

.sender-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.sender-cat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px 28px 24px;
}
.sender-cat h3 {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sender-cat-flag { font-size: 20px; flex-shrink: 0; }
.sender-cat p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}
.sender-cat--sport { grid-column: 1 / -1; }
.sender-sport-img {
  width: 100%;
  border-radius: var(--r-md);
  margin-top: 20px;
  max-height: 320px;
  object-fit: cover;
}
.sender-cta { text-align: center; }

/* ── S5 · VOD ────────────────────────────────────────────── */
.vod-section { background: var(--bg); }

.vod-intro-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}
.vod-intro-text h3 {
  font-size: 17px;
  color: var(--text);
  margin: 24px 0 8px;
}
.vod-intro-text p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
}
.vod-intro-image img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.poster-showcase { overflow: hidden; }
.poster-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.poster-row img {
  flex-shrink: 0;
  width: 150px;
  height: 225px;
  object-fit: cover;
  border-radius: var(--r-md);
  transition: transform .25s, box-shadow .25s;
}
.poster-row img:hover {
  transform: scale(1.06) translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
.poster-more {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-dim);
}

/* ── S6 · SPORT ──────────────────────────────────────────── */
.sport-section { background: var(--surface); }

.sport-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.sport-text h3 {
  font-size: 17px;
  color: var(--text);
  margin: 24px 0 8px;
}
.sport-text p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
}
.sport-images { display: flex; flex-direction: column; gap: 20px; }
.sport-img-wrap {
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow-card);
}
.sport-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s;
}
.sport-img-wrap:hover img { transform: scale(1.03); }
.sport-img-wrap figcaption {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
}

/* ── S7 · USPs ───────────────────────────────────────────── */
.usp-section { background: var(--bg); }

.usp-layout {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 64px;
  align-items: center;
}
.usp-image img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.usp-content h2 {
  font-size: clamp(22px, 2.8vw, 34px);
  margin-bottom: 12px;
}
.usp-lead {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.usp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.usp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 20px;
  transition: border-color .2s, transform .2s;
}
.usp-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.usp-icon    { font-size: 24px; margin-bottom: 10px; }
.usp-card h4 { font-size: 15px; color: var(--text); margin-bottom: 8px; }
.usp-card p  { font-size: 13px; color: var(--text-dim); line-height: 1.65; margin: 0; }

/* ── S8 · GERÄTE ─────────────────────────────────────────── */
.device-section { background: var(--surface); }

.device-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.device-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 14px;
  text-align: center;
  transition: border-color .2s;
}
.device-card:hover { border-color: var(--border-strong); }
.device-icon { font-size: 28px; margin-bottom: 10px; }
.device-card h4 { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.device-card p  { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0; }
.device-note {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.device-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── S8b · STEPS ─────────────────────────────────────────── */
.steps-section { background: var(--bg); }

.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin: 0 auto 24px;
}
.step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }
.step-num {
  width: 44px; height: 44px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--shadow-primary);
}
.step-body h3  { font-size: 17px; color: var(--text); margin-bottom: 8px; }
.step-body p   { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin: 0; }
.steps-note {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
}

/* ── S9 · VERGLEICH ──────────────────────────────────────── */
.compare-section { background: var(--surface); }

.table-wrap {
  overflow-x: auto;
  margin-bottom: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table thead th {
  padding: 14px 20px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
}
.compare-table th.col-highlight,
.compare-table td.col-highlight {
  background: rgba(232,0,61,.06);
  color: var(--text);
  font-weight: 600;
}
.compare-table thead th.col-highlight { color: var(--primary); }
.compare-table tbody td {
  padding: 13px 20px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: rgba(255,255,255,.02); }

.compare-analysis {
  max-width: 820px;
  margin: 0 auto 32px;
}
.compare-analysis p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  text-align: center;
}
.compare-cta { text-align: center; }

/* ── S10 · REVIEWS ───────────────────────────────────────── */
.review-section { background: var(--bg); }

.review-aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}
.review-score {
  font-size: 64px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.review-score-detail .stars {
  font-size: 24px;
  color: #facc15;
  letter-spacing: 2px;
}
.review-score-detail p {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 4px;
}

.review-banner-img {
  width: 100%;
  border-radius: var(--r-lg);
  margin-bottom: 40px;
  max-height: 380px;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-stars { font-size: 16px; color: #facc15; letter-spacing: 2px; }
.review-card blockquote {
  margin: 0;
  flex: 1;
}
.review-card blockquote p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  font-style: italic;
  margin: 0;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.review-author strong { font-size: 14px; color: var(--text); }
.review-author span   { font-size: 13px; color: var(--text-dim); }
.review-cta { text-align: center; }

/* ── S11 · FAQ ───────────────────────────────────────────── */
.faq-section { background: var(--surface); }

.faq-list {
  max-width: 800px;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .2s;
}
.faq-item[open],
.faq-item:hover { border-color: var(--border-strong); }
.faq-item[open]  { border-color: var(--primary); }

.faq-q {
  padding: 18px 24px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform .25s;
}
.faq-item[open] .faq-q::after {
  transform: rotate(45deg);
  color: var(--primary);
}
.faq-a {
  padding: 0 24px 20px;
  border-top: 1px solid var(--border);
}
.faq-a p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 14px 0 0;
}
.faq-cta { text-align: center; }

/* ── S12 · BOTTOM CTA ────────────────────────────────────── */
.bottom-cta-section {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(232,0,61,.07) 100%);
  border-top: 1px solid var(--border);
}
.bottom-cta-inner {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 60px;
  align-items: center;
}
.bottom-cta-text h2 {
  font-size: clamp(24px, 3vw, 38px);
  margin-bottom: 16px;
  line-height: 1.2;
}
.bottom-cta-text p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 560px;
}
.bottom-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.trust-badges {
  list-style: none;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.trust-badges li {
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.trust-badges li span { color: #22c55e; font-weight: 700; }
.bottom-cta-image img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — index.php sections
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .device-grid { grid-template-columns: repeat(3, 1fr); }
  .usp-layout  { grid-template-columns: 1fr; }
  .usp-image   { display: none; }
}

@media (max-width: 900px) {
  .hero-inner        { grid-template-columns: 1fr; }
  .hero-image        { display: none; }
  .was-ist-grid      { grid-template-columns: 1fr; }
  .was-ist-aside     { grid-template-columns: 1fr 1fr; display: grid; }
  .pricing-grid      { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .sender-grid       { grid-template-columns: 1fr; }
  .sender-cat--sport { grid-column: 1; }
  .vod-intro-grid    { grid-template-columns: 1fr; }
  .vod-intro-image   { display: none; }
  .sport-layout      { grid-template-columns: 1fr; }
  .sport-images      { grid-template-columns: 1fr 1fr; display: grid; flex-direction: unset; }
  .usp-grid          { grid-template-columns: 1fr 1fr; }
  .review-grid       { grid-template-columns: 1fr 1fr; }
  .bottom-cta-inner  { grid-template-columns: 1fr; }
  .bottom-cta-image  { display: none; }
}

@media (max-width: 600px) {
  .hero-stats        { gap: 20px; }
  .was-ist-aside     { grid-template-columns: 1fr; }
  .device-grid       { grid-template-columns: repeat(2, 1fr); }
  .usp-grid          { grid-template-columns: 1fr; }
  .review-grid       { grid-template-columns: 1fr; }
  .sport-images      { grid-template-columns: 1fr; }
  .bottom-cta-actions{ flex-direction: column; }
  .trust-badges      { gap: 12px; }
  .review-aggregate  { flex-direction: column; text-align: center; }
}


/* ══════════════════════════════════════════════════════════
   PAGE-SPECIFIC STYLES — senderliste.php
══════════════════════════════════════════════════════════ */

/* ── SL · HERO VARIANT ───────────────────────────────────── */
.sl-hero .hero-text h1 { max-width: 540px; }

/* Summary Box */
.sl-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 24px 0 28px;
}
.sl-summary-item {
  background: var(--surface);
  padding: 16px 12px;
  text-align: center;
}
.sl-summary-item strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.sl-summary-item span {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  display: block;
}

/* ── SL · CATEGORIES ─────────────────────────────────────── */
.sl-categories-section { background: var(--surface); }

.sl-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

.sl-cat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.sl-cat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.sl-cat-card--featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-card);
}
.sl-cat-card--featured:hover { border-color: var(--primary-hover); }

.sl-cat-badge {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.sl-cat-icon {
  font-size: 36px;
  margin-bottom: 16px;
  line-height: 1;
}

.sl-cat-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.sl-cat-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px !important;
}

.sl-cat-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

.sl-cat-body {
  max-width: 860px;
  margin: 0 auto 56px;
}
.sl-cat-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
}

.sl-cat-figure {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.sl-cat-figure img { width: 100%; height: auto; display: block; }
.sl-cat-figure figcaption {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 13px;
  padding: 10px 20px;
  text-align: center;
}

/* ── RESPONSIVE — senderliste ────────────────────────────── */
@media (max-width: 900px) {
  .sl-summary  { grid-template-columns: repeat(2, 1fr); }
  .sl-cat-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 480px) {
  .sl-summary-item strong { font-size: 17px; }
}

/* ── SL · SCHWEIZER SENDER (S3) ──────────────────────────── */
.sl-ch-section  { background: var(--bg); }
.sl-int-section { background: var(--surface); }

.sl-geo-block {
  max-width: 860px;
  margin: 0 auto 48px;
}
.sl-geo-block p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
}

/* Channel table */
.sl-table-wrap {
  overflow-x: auto;
  margin-bottom: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.sl-table thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.sl-table th {
  padding: 13px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.sl-table tbody tr {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.15s;
}
.sl-table tbody tr:last-child { border-bottom: none; }
.sl-table tbody tr:hover      { background: var(--surface-2); }
.sl-table td {
  padding: 11px 16px;
  color: var(--text-muted);
}
.sl-table td:first-child { color: var(--text); font-weight: 500; }

.sl-quality {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.sl-quality.fhd { background: rgba(232,0,61,0.12); color: var(--primary); }
.sl-quality.hd  { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.sl-quality.uhd { background: rgba(34,197,94,0.12);  color: #22c55e; }

/* DACH Box */
.sl-dach-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  margin-bottom: 48px;
}
.sl-dach-box h3 {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 8px;
}
.sl-dach-box > p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.sl-dach-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.sl-dach-tags span {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
}

/* Shared section figure */
.sl-section-figure {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-top: 8px;
}
.sl-section-figure img       { width: 100%; height: auto; display: block; }
.sl-section-figure figcaption {
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 13px;
  padding: 10px 20px;
  text-align: center;
}

/* ── SL · INTERNATIONAL / BALKAN (S4) ───────────────────── */
.sl-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.sl-lang-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  transition: border-color 0.2s;
}
.sl-lang-card:hover { border-color: var(--border-strong); }
.sl-lang-card--highlight {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.sl-lang-flag {
  font-size: 24px;
  display: block;
  margin-bottom: 12px;
}
.sl-lang-card strong {
  display: block;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 6px;
}
.sl-lang-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px !important;
}
.sl-lang-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Balkan detail box */
.sl-balkan-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px;
  margin-bottom: 48px;
}
.sl-balkan-box h3 {
  font-size: 20px;
  color: var(--text);
  margin-bottom: 28px;
}
.sl-balkan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.sl-balkan-country h4 {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
}
.sl-balkan-country ul  { list-style: none; padding: 0; }
.sl-balkan-country li  {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.sl-balkan-country li:last-child { border-bottom: none; }

/* ── RESPONSIVE — S3/S4 ─────────────────────────────────── */
@media (max-width: 900px) {
  .sl-lang-grid   { grid-template-columns: repeat(2, 1fr); }
  .sl-balkan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sl-lang-grid   { grid-template-columns: 1fr; }
  .sl-balkan-grid { grid-template-columns: 1fr; }
  .sl-dach-box    { padding: 24px 20px; }
  .sl-balkan-box  { padding: 24px 20px; }
}

/* ── SL · SPORT (S5) ─────────────────────────────────────── */
.sl-sport-section { background: var(--bg); }

.sl-sport-table   { margin-bottom: 48px; }

.sl-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(232,0,61,0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.sl-sport-fig-main { margin-bottom: 0; }

/* ── SL · VOD (S6) ───────────────────────────────────────── */
.sl-vod-section { background: var(--surface); }

.sl-genre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.sl-genre-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.sl-genre-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.sl-genre-card--wide { grid-column: span 2; }

.sl-genre-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}
.sl-genre-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.sl-genre-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 !important;
}

/* Poster row */
.sl-poster-wrap { margin-top: 8px; }

.sl-poster-title {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 24px;
}
.sl-poster-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sl-poster-row::-webkit-scrollbar       { height: 4px; }
.sl-poster-row::-webkit-scrollbar-track { background: transparent; }
.sl-poster-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.sl-poster-item {
  flex: 0 0 160px;
  text-align: center;
}
.sl-poster-item img {
  width: 160px;
  height: 240px;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
  transition: transform 0.2s;
}
.sl-poster-item:hover img { transform: scale(1.03); }
.sl-poster-item p {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 8px;
  line-height: 1.3;
}

/* ── SL · 4K ULTRA HD (S7) ───────────────────────────────── */
.sl-4k-section { background: var(--bg); }

.sl-quality-table { margin-bottom: 48px; }

.sl-row-featured { background: rgba(232,0,61,0.06) !important; }
.sl-row-featured td { color: var(--text) !important; }

.sl-check-yes {
  font-size: 15px;
  font-weight: 700;
  color: #22c55e;
}
.sl-check-no {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dim);
}

/* ── RESPONSIVE — S5 / S6 / S7 ──────────────────────────── */
@media (max-width: 900px) {
  .sl-genre-grid        { grid-template-columns: repeat(2, 1fr); }
  .sl-genre-card--wide  { grid-column: span 1; }
  .sl-poster-item       { flex: 0 0 130px; }
  .sl-poster-item img   { width: 130px; height: 195px; }
}
@media (max-width: 600px) {
  .sl-genre-grid  { grid-template-columns: repeat(2, 1fr); }
  .sl-poster-item { flex: 0 0 110px; }
  .sl-poster-item img { width: 110px; height: 165px; }
}

/* ── SL · EPG & CATCH-UP (S8) ───────────────────────────── */
.sl-epg-section { background: var(--surface); }
.sl-section-figure--top { margin-bottom: 40px; }
.sl-epg-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.sl-epg-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
}
.sl-epg-col h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.sl-epg-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sl-epg-features li {
  font-size: 15px;
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
}
.sl-epg-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
@media (max-width: 768px) {
  .sl-epg-box { grid-template-columns: 1fr; }
}

/* ── SL · ANBIETER VERGLEICH (S9) ───────────────────────── */
.sl-compare-section { background: var(--bg); }
.sl-col-winner-head {
  color: var(--primary) !important;
  background: rgba(232, 0, 61, 0.08) !important;
}
.sl-col-winner {
  color: #fff;
  background: rgba(232, 0, 61, 0.06);
}
.sl-inline-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  display: inline;
}
.sl-inline-link:hover { text-decoration: underline; }

/* ── SL · GERÄTE (S10) ──────────────────────────────────── */
.sl-devices-section { background: var(--surface); }
.sl-device-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 40px 0 48px;
}
.sl-device-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 16px 24px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.sl-device-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
}
.sl-device-icon {
  font-size: 40px;
  margin-bottom: 14px;
  display: block;
}
.sl-device-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.sl-device-card p {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}
@media (max-width: 900px) {
  .sl-device-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .sl-device-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── SL · MINI-PREISE (S11) ─────────────────────────────── */
.sl-pricing-section { background: var(--bg); }
.sl-mini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.sl-mini-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  position: relative;
  transition: border-color 0.2s;
}
.sl-mini-card:hover { border-color: var(--border-strong); }
.sl-mini-card--featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-card);
}
.sl-mini-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.sl-mini-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 10px;
}
.sl-mini-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.sl-mini-price strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}
.sl-mini-price span {
  font-size: 12px;
  color: var(--text-dim);
}
.sl-mini-per {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 16px;
}
.sl-mini-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-mini-features li {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
  text-align: left;
}
.sl-mini-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}
.btn-sm {
  font-size: 13px;
  padding: 9px 18px;
  width: 100%;
  margin-top: auto;
}
.sl-pricing-note {
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
}
@media (max-width: 1024px) {
  .sl-mini-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .sl-mini-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .sl-mini-grid { grid-template-columns: 1fr; }
}

/* ── SL · FAQ (S12) ─────────────────────────────────────── */
.sl-faq-section { background: var(--surface); }
.sl-faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sl-faq-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s;
}
.sl-faq-item[open] { border-color: var(--primary); }
.sl-faq-q {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
}
.sl-faq-q::-webkit-details-marker { display: none; }
.sl-faq-q::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.25s;
}
.sl-faq-item[open] .sl-faq-q::after {
  transform: rotate(45deg);
}
.sl-faq-a {
  padding: 0 24px 20px;
}
.sl-faq-a p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

/* ── SL · SCHLUSS-CTA-BANNER ────────────────────────────── */
.sl-cta-banner {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 80px 0;
}
.sl-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.sl-cta-text h2 {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
}
.sl-cta-text p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}
.sl-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.sl-cta-figure {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.sl-cta-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.sl-cta-figure figcaption {
  font-size: 12px;
  color: var(--text-dim);
  padding: 10px 14px;
  background: var(--surface);
  text-align: center;
}
@media (max-width: 900px) {
  .sl-cta-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sl-cta-figure { order: -1; }
}
@media (max-width: 560px) {
  .sl-cta-banner { padding: 60px 0; }
  .sl-cta-actions { flex-direction: column; }
  .sl-cta-actions .btn { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE SENDERLISTE — MOBILE-FIRST KOMPLETTPATCH
   Priorität: Handy. Breakpoints: 768 / 640 / 480 / 360
══════════════════════════════════════════════════════════ */

/* ── 768px — Tablet ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Section-Abstände */
  .section               { padding: 56px 0; }
  .hero                  { padding: 48px 0 36px; }
  .section-header        { margin-bottom: 36px; }

  /* Senderliste-Blöcke */
  .sl-geo-block          { margin-bottom: 36px; }
  .sl-cat-body           { margin-bottom: 36px; }
  .sl-section-figure--top { margin-bottom: 28px; }
  .sl-epg-box            { margin-top: 28px; }
  .sl-balkan-box         { padding: 28px 24px; }
  .sl-dach-box           { padding: 28px 24px; }

  /* Vergleichstabelle: Scroll-Hint */
  .sl-table-wrap         { position: relative; -webkit-overflow-scrolling: touch; }
}

/* ── 640px — Grosses Handy ─────────────────────────────── */
@media (max-width: 640px) {
  /* Hero-Buttons: stapeln */
  .hero-actions          { flex-direction: column; gap: 10px; }
  .hero-actions .btn     { width: 100%; text-align: center; }
  .hero-stats            { gap: 16px; }

  /* Breite Genre-Karten: kein span auf Handy */
  .sl-genre-card--wide   { grid-column: span 1; }

  /* Device-Karten */
  .sl-device-card h3     { font-size: 14px; }
  .sl-device-card p      { font-size: 12px; }

  /* EPG Box */
  .sl-epg-col            { padding: 24px 20px; }
  .sl-epg-col h3         { font-size: 16px; margin-bottom: 14px; }

  /* FAQ */
  .sl-faq-q              { padding: 18px 20px; }
  .sl-faq-a              { padding: 0 20px 18px; }

  /* Mini-Pricing Note */
  .sl-pricing-note       { font-size: 14px; }

  /* CTA Banner */
  .sl-cta-text h2        { font-size: 28px; }
  .sl-cta-text p         { font-size: 15px; margin-bottom: 24px; }
  .sl-cta-figure         { order: -1; }
}

/* ── 480px — Kleines Handy ─────────────────────────────── */
@media (max-width: 480px) {
  /* Container enger */
  .container             { padding: 0 16px; }

  /* Globale Abstände */
  .section               { padding: 40px 0; }
  .hero                  { padding: 32px 0 24px; }
  .section-header        { margin-bottom: 24px; }
  .section-header p      { font-size: 15px; }

  /* Hero-Inhalt */
  .hero-tagline          { font-size: 13px; }
  .hero-lead             { font-size: 15px; line-height: 1.65; }
  .sl-summary            { grid-template-columns: repeat(2, 1fr); }
  .sl-summary-item       { padding: 12px 8px; }
  .sl-summary-item strong { font-size: 16px; }
  .sl-summary-item span  { font-size: 11px; }

  /* GEO-Absätze */
  .sl-geo-block          { margin-bottom: 24px; }
  .sl-geo-block p        { font-size: 15px; line-height: 1.7; }

  /* Tabellen */
  .sl-table              { font-size: 12px; }
  .sl-table th,
  .sl-table td           { padding: 8px 10px; }
  .sl-quality            { font-size: 10px; padding: 2px 5px; }
  .sl-live-badge         { font-size: 11px; padding: 3px 8px; }
  .sl-check-yes,
  .sl-check-no           { font-size: 13px; }

  /* Kategorie-Karten */
  .sl-cat-card           { padding: 24px 20px; }
  .sl-cat-icon           { font-size: 28px; margin-bottom: 12px; }
  .sl-cat-card h3        { font-size: 17px; }
  .sl-cat-grid           { max-width: 100%; }

  /* DACH / Balkan Boxen */
  .sl-dach-box,
  .sl-balkan-box         { padding: 20px 16px; }
  .sl-balkan-box h3      { font-size: 17px; margin-bottom: 20px; }
  .sl-dach-tags span     { font-size: 12px; padding: 5px 10px; }

  /* Sprach-Karten */
  .sl-lang-card          { padding: 18px 16px; }
  .sl-lang-flag          { font-size: 20px; }

  /* Genre-Grid: 1-spaltig */
  .sl-genre-grid         { grid-template-columns: 1fr; gap: 12px; }
  .sl-genre-card         { padding: 18px 16px; }
  .sl-genre-icon         { font-size: 26px; margin-bottom: 8px; }
  .sl-genre-card h3      { font-size: 14px; }
  .sl-genre-count        { font-size: 13px; }

  /* Poster */
  .sl-poster-title       { font-size: 15px; margin-bottom: 16px; }
  .sl-poster-item        { flex: 0 0 100px; }
  .sl-poster-item img    { width: 100px; height: 150px; }

  /* EPG Box */
  .sl-epg-box            { gap: 16px; }
  .sl-epg-col            { padding: 18px 16px; }
  .sl-epg-features li    { font-size: 13px; }

  /* Vergleich-Tabelle: kompakter */
  .sl-col-winner-head    { min-width: 80px; }
  .sl-compare-section .sl-table th { font-size: 11px; padding: 8px 8px; }
  .sl-compare-section .sl-table td { font-size: 12px; padding: 8px 8px; }

  /* Geräte-Grid */
  .sl-device-card        { padding: 18px 12px 14px; }
  .sl-device-icon        { font-size: 32px; margin-bottom: 10px; }
  .sl-device-card h3     { font-size: 13px; }

  /* Mini-Pricing */
  .sl-mini-card          { padding: 28px 16px 18px; }
  .sl-mini-name          { font-size: 14px; margin: 10px 0 8px; }
  .sl-mini-price strong  { font-size: 18px; }
  .sl-mini-features li   { font-size: 12px; }
  .btn-sm                { font-size: 12px; padding: 8px 14px; }

  /* FAQ */
  .sl-faq-list           { gap: 8px; }
  .sl-faq-q              { padding: 15px 18px; font-size: 14px; }
  .sl-faq-q::after       { font-size: 19px; }
  .sl-faq-a              { padding: 0 18px 15px; }
  .sl-faq-a p            { font-size: 14px; }

  /* CTA Banner */
  .sl-cta-banner         { padding: 40px 0; }
  .sl-cta-text h2        { font-size: 24px; margin-bottom: 12px; }
  .sl-cta-text p         { margin-bottom: 20px; }
  .sl-cta-figure figcaption { font-size: 11px; }

  /* Section-Figuren */
  .sl-section-figure     { border-radius: var(--r-md); }
  .sl-section-figure figcaption { font-size: 12px; padding: 8px 14px; }
}

/* ── 360px — Sehr kleines Handy ────────────────────────── */
@media (max-width: 360px) {
  .container             { padding: 0 12px; }
  .sl-summary-item strong { font-size: 14px; }
  .sl-summary-item span  { font-size: 10px; }
  .sl-device-grid        { grid-template-columns: 1fr; }
  .sl-device-card        { padding: 16px; text-align: left; display: flex; align-items: center; gap: 12px; }
  .sl-device-icon        { font-size: 28px; margin-bottom: 0; flex-shrink: 0; }
  .sl-mini-badge         { font-size: 10px; padding: 2px 10px; top: -10px; }
  .sl-faq-q              { padding: 13px 14px; font-size: 13px; }
  .sl-genre-grid         { gap: 8px; }
  .sl-balkan-grid        { grid-template-columns: 1fr 1fr; }
  .hero-tagline          { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   IPTV-ABO PAGE — S1 HERO + S2 PRICING CARDS
   Classes: .abo-hero .abo-stats .abo-trust-chips
            .abo-pricing-section .abo-pricing-grid .abo-card etc.
   Mobile-first: written desktop → then overrides at 900/768/640/480/360
═══════════════════════════════════════════════════════════════ */

/* ── S1 Hero ─────────────────────────────────────────────── */
.abo-hero .hero-tagline {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.abo-hero h1 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.abo-hero .hero-lead {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 640px;
  margin-bottom: 32px;
}

/* Stats grid 2×2 */
.abo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--surface);
}

.abo-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.abo-stat-item:last-child { border-right: none; }

.abo-stat-item strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 4px;
}
.abo-stat-item span {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Trust chips */
.abo-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.abo-trust-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(232,0,61,0.10);
  border: 1px solid rgba(232,0,61,0.25);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #f87171;
  white-space: nowrap;
}

/* Hero image badge */
.abo-hero-image {
  position: relative;
}
.abo-hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: var(--shadow-card);
}
.hero-image-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: rgba(10,10,15,0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.60);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* ── S2 Pricing Section ──────────────────────────────────── */
.abo-pricing-section { background: var(--surface); }

.abo-geo-block {
  max-width: 820px;
  margin: 0 auto 48px;
}
.abo-geo-block p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  text-align: center;
}
.abo-inline-link {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,0,61,0.35);
  transition: border-color 0.2s;
}
.abo-inline-link:hover { border-color: var(--primary); }

/* ── Grid ── */
.abo-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
  padding-top: 22px;
  align-items: center;
}
.abo-pricing-grid--bottom {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  padding-top: 22px;
}

/* ── Card base ── */
.abo-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
}
.abo-card:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-7px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Top accent glow line */
.abo-card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 60%; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  border-radius: 0 0 2px 2px;
}
.abo-card--featured::before {
  width: 85%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 12px var(--primary);
}
.abo-card--family::before {
  width: 85%; height: 3px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  box-shadow: 0 0 10px rgba(34,197,94,0.60);
}

/* ── Featured card (Premium) ── */
.abo-card--featured {
  border-color: rgba(232,0,61,0.42);
  background: linear-gradient(160deg, rgba(232,0,61,0.10) 0%, rgba(232,0,61,0.03) 45%, var(--surface-2) 100%);
  box-shadow:
    0 0 0 1px rgba(232,0,61,0.22),
    0 10px 44px rgba(232,0,61,0.14),
    inset 0 1px 0 rgba(232,0,61,0.14);
  transform: scale(1.04);
  z-index: 2;
}
.abo-card--featured:hover {
  border-color: rgba(232,0,61,0.68);
  transform: scale(1.04) translateY(-7px);
  box-shadow:
    0 0 0 1px rgba(232,0,61,0.55),
    0 22px 64px rgba(232,0,61,0.22),
    inset 0 1px 0 rgba(232,0,61,0.20);
}

/* ── Family card ── */
.abo-card--family {
  border-color: rgba(34,197,94,0.28);
  background: linear-gradient(160deg, rgba(34,197,94,0.07) 0%, var(--surface-2) 55%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(34,197,94,0.07);
}
.abo-card--family:hover {
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(34,197,94,0.28);
}

/* ── Badge ── */
.abo-card-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 3px 14px rgba(232,0,61,0.50);
  z-index: 3;
}
.abo-card-badge--green {
  background: #16a34a;
  box-shadow: 0 3px 14px rgba(34,197,94,0.45);
}

/* ── Card top ── */
.abo-card-top { margin-bottom: 20px; }

/* ── Label pill ── */
.abo-card-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 10px;
  background: rgba(255,255,255,0.05);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.09);
}
.abo-card-label--hot {
  color: var(--primary);
  background: rgba(232,0,61,0.09);
  border-color: rgba(232,0,61,0.24);
}

/* ── Card name ── */
.abo-card-name {
  font-size: 23px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

/* ── Price ── */
.abo-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.abo-card-price strong {
  font-size: 42px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
}
.abo-card--featured .abo-card-price strong {
  color: var(--primary);
  text-shadow: 0 0 40px rgba(232,0,61,0.35);
}
.abo-card-price span {
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 500;
}
.abo-card-monthly {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}
.abo-card-monthly--hot { color: rgba(232,0,61,0.85); font-weight: 500; }
.abo-card-monthly--green { color: rgba(34,197,94,0.85); font-weight: 500; }
.abo-card-monthly span { font-weight: 700; }

/* ── Feature list with divider ── */
.abo-card-features {
  list-style: none;
  padding: 18px 0 0;
  margin: 0 0 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.abo-card-features li {
  font-size: 13.5px;
  color: var(--text-muted);
  padding-left: 26px;
  position: relative;
  line-height: 1.4;
}
.abo-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  font-weight: 900;
  font-size: 9px;
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  color: var(--text-dim);
}
.abo-card--featured .abo-card-features li::before {
  color: var(--primary);
  background: rgba(232,0,61,0.12);
}
.abo-card--family .abo-card-features li::before {
  color: #22c55e;
  background: rgba(34,197,94,0.12);
}

/* ── CTA button ── */
.abo-card .btn {
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-md);
  margin-top: auto;
  letter-spacing: 0.01em;
}
.abo-card--featured .btn {
  box-shadow: 0 4px 20px rgba(232,0,61,0.38);
  transition: box-shadow 0.25s, transform 0.25s;
}
.abo-card--featured .btn:hover {
  box-shadow: 0 10px 32px rgba(232,0,61,0.55);
  transform: translateY(-1px);
}
.abo-card--family .btn.btn-ghost {
  border-color: rgba(34,197,94,0.38);
  color: rgba(34,197,94,0.90);
}
.abo-card--family .btn.btn-ghost:hover {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.65);
  color: #22c55e;
}

/* ── Pricing note ── */
.abo-pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin: 36px auto 0;
  line-height: 1.7;
  max-width: 700px;
}
.abo-pricing-note strong { color: var(--text-muted); }

/* ── Section figure (Bild 2) ── */
.abo-section-figure {
  margin: 44px auto 0;
  max-width: 960px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.abo-section-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.abo-section-figure figcaption {
  padding: 10px 18px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  background: var(--surface);
}


/* ── Responsive: 900px — Tablet ─────────────────────────── */
@media (max-width: 900px) {
  /* hero-inner already collapses at 900px via global CSS */
  /* hero-image already display:none at 900px via global CSS */

  .abo-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .abo-stat-item:nth-child(2) { border-right: none; }
  .abo-stat-item:nth-child(3) { border-top: 1px solid var(--border); }
  .abo-stat-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }

  .abo-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
  .abo-pricing-grid > .abo-card:first-child {
    grid-column: span 2;
    max-width: 420px;
    justify-self: center;
    width: 100%;
  }
  .abo-pricing-grid--bottom {
    grid-template-columns: repeat(2, 1fr);
    justify-content: unset;
  }
  /* keep featured card scale on tablet */
}

/* ── 768px — Tablet small ────────────────────────────────── */
@media (max-width: 768px) {
  .abo-hero h1 { font-size: 28px; }
  .abo-hero .hero-lead { font-size: 15px; }

  .abo-stats { margin-bottom: 24px; }
  .abo-stat-item strong { font-size: 19px; }

  .abo-trust-chips span { font-size: 11px; padding: 4px 12px; }

  .abo-geo-block p { font-size: 15px; }

  .abo-pricing-grid,
  .abo-pricing-grid--bottom {
    grid-template-columns: 1fr;
    justify-content: unset;
  }
  .abo-pricing-grid > .abo-card:first-child {
    grid-column: span 1;
    max-width: 100%;
    justify-self: unset;
  }
  /* reset scale on single-column layout */
  .abo-card--featured {
    transform: none;
  }
  .abo-card--featured:hover {
    transform: translateY(-7px);
  }

  .abo-card-price strong { font-size: 32px; }
  .abo-card-name { font-size: 20px; }
}

/* ── 640px — Telefon ─────────────────────────────────────── */
@media (max-width: 640px) {
  .abo-hero .hero-actions { flex-direction: column; gap: 10px; }
  .abo-hero .hero-actions .btn { width: 100%; text-align: center; }

  .abo-stats {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 20px;
  }
  .abo-stat-item { padding: 14px 10px; }
  .abo-stat-item strong { font-size: 17px; }

  .abo-trust-chips { gap: 6px; }

  .abo-card { padding: 24px 18px 20px; }
  .abo-card-price strong { font-size: 30px; }
}

/* ── 480px — Kleines Telefon ────────────────────────────── */
@media (max-width: 480px) {
  .abo-hero h1 { font-size: 24px; }
  .abo-hero .hero-lead { font-size: 14px; }

  .abo-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .abo-stat-item strong { font-size: 16px; }
  .abo-stat-item span { font-size: 10px; }

  .abo-trust-chips span { font-size: 10px; padding: 4px 10px; }

  .abo-card { padding: 22px 16px 18px; }
  .abo-card-price strong { font-size: 28px; }
  .abo-card-name { font-size: 18px; }
  .abo-card-features li { font-size: 13px; }

  .abo-pricing-note { font-size: 12px; }
}

/* ── 360px — Sehr kleines Telefon ──────────────────────── */
@media (max-width: 360px) {
  .abo-hero h1 { font-size: 22px; }

  .abo-stats { border-radius: var(--r-sm); }
  .abo-stat-item { padding: 12px 8px; }
  .abo-stat-item strong { font-size: 15px; }

  .abo-trust-chips span { font-size: 10px; padding: 3px 9px; }

  .abo-card { padding: 20px 14px 16px; }
  .abo-card-price strong { font-size: 24px; }
  .abo-card-features { gap: 7px; }
  .abo-card-features li { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   IPTV-ABO — S3 VERGLEICHSTABELLE + S4 FEATURE-GRID
   Classes: .abo-compare-* .abo-feature-*
   Mobile-first + horizontal scroll for table on small screens
═══════════════════════════════════════════════════════════════ */

/* ── S3 Compare Section ──────────────────────────────────── */
.abo-compare-section { background: var(--bg); }

/* Geo block variant — left-aligned text for readability */
.abo-geo-block--left p  { text-align: left; }
.abo-geo-block--center p { text-align: center; }

/* Table wrapper — horizontal scroll on mobile */
.abo-compare-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-bottom: 36px;
}

/* Scrollbar styling */
.abo-compare-wrap::-webkit-scrollbar { height: 4px; }
.abo-compare-wrap::-webkit-scrollbar-track { background: var(--surface); }
.abo-compare-wrap::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }

.abo-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--surface);
}

/* Header row */
.abo-compare-table thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}
.abo-compare-table th {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.abo-compare-feature-col {
  text-align: left !important;
  width: 180px;
  min-width: 140px;
}

/* Featured column header */
.abo-compare-th--featured {
  background: rgba(232,0,61,0.10) !important;
  color: var(--primary) !important;
  border-left: 1px solid rgba(232,0,61,0.30);
  border-right: 1px solid rgba(232,0,61,0.30);
}
.abo-compare-star { font-size: 11px; margin-left: 3px; }

/* Body rows */
.abo-compare-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.abo-compare-table tbody tr:last-child { border-bottom: none; }
.abo-compare-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.abo-compare-row--alt { background: rgba(255,255,255,0.015); }
.abo-compare-row--alt:hover { background: rgba(255,255,255,0.03) !important; }

.abo-compare-table td {
  padding: 13px 16px;
  color: var(--text-muted);
  text-align: center;
  vertical-align: middle;
  font-size: 13.5px;
}

.abo-compare-label {
  text-align: left !important;
  font-weight: 600;
  color: var(--text) !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* Featured column cells */
.abo-compare-td--featured {
  background: rgba(232,0,61,0.06) !important;
  color: var(--text) !important;
  border-left: 1px solid rgba(232,0,61,0.20);
  border-right: 1px solid rgba(232,0,61,0.20);
}
.abo-compare-td--featured strong { color: var(--primary); }

/* Check / Cross icons */
.abo-check {
  color: #22c55e;
  font-size: 16px;
  font-weight: 700;
}
.abo-cross {
  color: var(--text-dim);
  font-size: 18px;
  font-weight: 300;
}

/* Tfoot buttons */
.abo-compare-table tfoot td {
  padding: 14px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border-strong);
}
.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--r-sm);
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}


/* ── S4 Feature Section ──────────────────────────────────── */
.abo-feature-section { background: var(--surface); }

/* Feature grid — 3 columns */
.abo-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0;
}

/* Feature card */
.abo-feature-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: border-color 0.25s, transform 0.25s;
}
.abo-feature-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

/* Highlighted card (Sport) */
.abo-feature-card--highlight {
  border-color: rgba(232,0,61,0.30);
  background: linear-gradient(160deg, rgba(232,0,61,0.05) 0%, var(--surface-2) 60%);
}
.abo-feature-card--highlight:hover { border-color: rgba(232,0,61,0.60); }

.abo-feature-icon {
  font-size: 36px;
  margin-bottom: 14px;
  display: block;
  line-height: 1;
}

.abo-feature-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.3;
}

.abo-feature-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* Second geo block below grid */
.abo-geo-block--center {
  max-width: 820px;
  margin: 0 auto 44px;
}


/* ── Responsive S3 + S4 — 900px (Tablet) ────────────────── */
@media (max-width: 900px) {
  .abo-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Highlight card (Sport) spans 2 cols to stay balanced */
  .abo-feature-card--highlight {
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 16px;
    align-items: start;
  }
  .abo-feature-card--highlight .abo-feature-icon {
    grid-row: span 2;
    margin-bottom: 0;
    font-size: 40px;
    margin-top: 4px;
  }
  .abo-feature-card--highlight .abo-feature-title { margin-bottom: 6px; }
}

/* ── 768px (Tablet small) ────────────────────────────────── */
@media (max-width: 768px) {
  .abo-compare-table { font-size: 13px; }
  .abo-compare-table th,
  .abo-compare-table td { padding: 11px 12px; }
  .abo-compare-feature-col { width: 130px; min-width: 110px; }

  .abo-feature-card { padding: 22px 18px; }
  .abo-feature-icon { font-size: 30px; }
  .abo-feature-title { font-size: 15px; }
  .abo-feature-desc { font-size: 13px; }
}

/* ── 640px (Telefon) ─────────────────────────────────────── */
@media (max-width: 640px) {
  .abo-feature-grid {
    grid-template-columns: 1fr;
  }
  .abo-feature-card--highlight {
    grid-column: span 1;
    display: block;
  }
  .abo-feature-card--highlight .abo-feature-icon {
    font-size: 36px;
    margin-bottom: 14px;
    margin-top: 0;
  }
  .abo-feature-card { padding: 20px 16px; }

  .abo-compare-table { font-size: 12px; min-width: 520px; }
  .abo-compare-table th,
  .abo-compare-table td { padding: 10px 10px; }
}

/* ── 480px (Kleines Telefon) ─────────────────────────────── */
@media (max-width: 480px) {
  .abo-compare-table { min-width: 480px; }
  .abo-compare-feature-col { width: 110px; min-width: 100px; font-size: 11px !important; }
  .abo-compare-table th { font-size: 11px; padding: 9px 8px; }
  .abo-compare-table td { font-size: 12px; padding: 9px 8px; }
  .btn-sm { padding: 6px 10px; font-size: 11px; }

  .abo-feature-icon { font-size: 28px; }
  .abo-feature-title { font-size: 14px; }
  .abo-feature-desc { font-size: 12.5px; }
}

/* ── 360px (Sehr kleines Telefon) ───────────────────────── */
@media (max-width: 360px) {
  .abo-compare-table { min-width: 440px; }
  .abo-compare-feature-col { width: 90px; min-width: 80px; }
  .abo-compare-table th { font-size: 10px; padding: 8px 6px; }
  .abo-compare-table td { font-size: 11px; padding: 8px 6px; }
  .btn-sm { padding: 5px 8px; font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   IPTV-ABO — S5 SPORT + S6 VOD + S7 GERÄTE
   Classes: .abo-sport-* .abo-vod-* .abo-device-*
            .abo-bild-pair .abo-genre-* .abo-poster-*
═══════════════════════════════════════════════════════════════ */

/* ── Gemeinsam: Bild-Paar ────────────────────────────────── */
.abo-bild-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
.abo-bild-item {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 0;
}
.abo-bild-item img {
  width: 100%;
  height: auto;
  display: block;
}
.abo-bild-item figcaption {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface);
  text-align: center;
}


/* ── S5 Sport ────────────────────────────────────────────── */
.abo-sport-section { background: var(--surface); }

/* Liga-Chips */
.abo-sport-leagues {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0;
  justify-content: center;
}
.abo-sport-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.abo-sport-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.abo-sport-chip--live {
  border-color: rgba(232,0,61,0.35);
  color: var(--text);
  background: rgba(232,0,61,0.06);
}
.abo-sport-chip--live::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}


/* ── S6 VOD ──────────────────────────────────────────────── */
.abo-vod-section { background: var(--bg); }

/* Genre Grid — 3 cols */
.abo-genre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 40px 0;
}
.abo-genre-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.25s, transform 0.25s;
}
.abo-genre-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.abo-genre-card--highlight {
  border-color: rgba(232,0,61,0.25);
  background: linear-gradient(140deg, rgba(232,0,61,0.05) 0%, var(--surface-2) 60%);
}
.abo-genre-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}
.abo-genre-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.abo-genre-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.03em;
}
.abo-genre-card p {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

/* Film-Poster-Reihe */
.abo-poster-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 36px 0;
}
.abo-poster-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 2/3;
  display: flex;
  align-items: flex-end;
}
.abo-poster-inner {
  width: 100%;
  padding: 12px 10px;
  background: linear-gradient(to top, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.40) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.abo-poster-inner strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.abo-poster-inner span {
  font-size: 10px;
  color: var(--text-dim);
}
.abo-poster-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.abo-poster-item { position: relative; }

/* Poster backgrounds — dark gradient variants */
.abo-poster-item:nth-child(1) { background: linear-gradient(160deg, #1a0a0a 0%, #2d1a00 100%); }
.abo-poster-item:nth-child(2) { background: linear-gradient(160deg, #0a0a1a 0%, #1a0d2d 100%); }
.abo-poster-item:nth-child(3) { background: linear-gradient(160deg, #0a0a0a 0%, #1a1a0a 100%); }
.abo-poster-item:nth-child(4) { background: linear-gradient(160deg, #0a0d1a 0%, #0d1a0a 100%); }
.abo-poster-item:nth-child(5) { background: linear-gradient(160deg, #0a1a1a 0%, #0a0a2d 100%); }
.abo-poster-item--more {
  background: rgba(232,0,61,0.08) !important;
  border-color: rgba(232,0,61,0.30) !important;
  justify-content: center;
  align-items: center;
}
.abo-poster-item--more .abo-poster-inner {
  background: transparent;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
}
.abo-poster-item--more strong {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
}
.abo-poster-item--more span { font-size: 11px !important; color: var(--text-muted) !important; }
.abo-poster-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,0,61,0.35);
  transition: border-color 0.2s;
}
.abo-poster-cta:hover { border-color: var(--primary); }


/* ── S7 Geräte ───────────────────────────────────────────── */
.abo-device-section { background: var(--surface); }

/* Device Grid — 5 cards (3+2 layout) */
.abo-device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 40px 0 24px;
}
/* Last 2 cards centered on row 2 */
.abo-device-grid > .abo-device-card:nth-child(4),
.abo-device-grid > .abo-device-card:nth-child(5) {
  grid-column: auto;
}
/* 3+2 centering trick */
.abo-device-grid::after {
  content: '';
  grid-column: span 1;
}

.abo-device-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px 20px;
  transition: border-color 0.25s, transform 0.25s;
}
.abo-device-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.abo-device-card--highlight {
  border-color: rgba(232,0,61,0.30);
  background: linear-gradient(140deg, rgba(232,0,61,0.05) 0%, var(--surface-2) 60%);
}
.abo-device-card--highlight:hover { border-color: var(--primary); }

.abo-device-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}
.abo-device-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.abo-device-apps {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.abo-device-apps li {
  font-size: 12.5px;
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
}
.abo-device-apps li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
.abo-device-method {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  text-align: center;
  letter-spacing: 0.03em;
}

.abo-device-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 44px;
}


/* ── Responsive S5+S6+S7 — 900px (Tablet) ───────────────── */
@media (max-width: 900px) {
  /* Bild-Paar: bleibt 2-col bis 640px */

  /* Genre Grid */
  .abo-genre-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .abo-genre-card--highlight {
    grid-column: span 2;
  }

  /* Poster Row */
  .abo-poster-row {
    grid-template-columns: repeat(4, 1fr);
  }
  /* +mehr card stays visible */

  /* Device Grid */
  .abo-device-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .abo-device-grid::after { display: none; }
  .abo-device-grid > .abo-device-card:nth-child(5) {
    grid-column: span 2;
    max-width: 420px;
    justify-self: center;
    width: 100%;
  }
}

/* ── 768px ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .abo-sport-chip { font-size: 12px; padding: 6px 14px; }

  .abo-genre-card { padding: 18px 16px; }
  .abo-genre-icon { font-size: 24px; }
  .abo-genre-name { font-size: 14px; }

  .abo-poster-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .abo-device-card { padding: 20px 16px 18px; }
  .abo-device-name { font-size: 15px; }
}

/* ── 640px (Telefon) ─────────────────────────────────────── */
@media (max-width: 640px) {
  /* Bild-Paar: 1-col */
  .abo-bild-pair { grid-template-columns: 1fr; gap: 14px; }

  .abo-sport-leagues { gap: 7px; }
  .abo-sport-chip { font-size: 11px; padding: 6px 12px; }

  .abo-genre-grid { grid-template-columns: 1fr; }
  .abo-genre-card--highlight { grid-column: span 1; }

  .abo-poster-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .abo-device-grid { grid-template-columns: 1fr; }
  .abo-device-grid > .abo-device-card:nth-child(5) {
    grid-column: span 1;
    max-width: 100%;
    justify-self: unset;
  }
}

/* ── 480px ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .abo-sport-chip { font-size: 10px; padding: 5px 10px; }

  .abo-genre-card { padding: 16px 14px; gap: 4px; }
  .abo-genre-icon { font-size: 22px; }
  .abo-genre-name { font-size: 13px; }
  .abo-genre-count { font-size: 11px; }
  .abo-genre-card p { font-size: 12px; }

  .abo-poster-row { grid-template-columns: repeat(2, 1fr); }
  .abo-poster-inner strong { font-size: 11px; }
  .abo-poster-inner span { font-size: 9px; }

  .abo-device-icon { font-size: 26px; }
  .abo-device-name { font-size: 14px; }
  .abo-device-apps li { font-size: 12px; }
  .abo-device-method { font-size: 10px; }
}

/* ── 360px ───────────────────────────────────────────────── */
@media (max-width: 360px) {
  .abo-sport-chip { font-size: 10px; padding: 4px 9px; }
  .abo-poster-row { gap: 6px; }
  .abo-genre-card { padding: 14px 12px; }
  .abo-device-card { padding: 16px 14px 14px; }
}


/* ═══════════════════════════════════════════════════════════════
   IPTV-ABO — S8 REVIEWS + S9 AKTIVIERUNG + S10 VERGLEICH
   Classes: .abo-reviews-* .abo-steps-* .abo-compare-vs-*
═══════════════════════════════════════════════════════════════ */

/* ── S8 Reviews ──────────────────────────────────────────── */
.abo-reviews-section { background: var(--surface); }

/* AggregateRating header bar */
.abo-rating-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 16px 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.abo-rating-score {
  display: flex;
  align-items: center;
  gap: 10px;
}
.abo-rating-score strong {
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.abo-rating-score .abo-rating-stars {
  font-size: 22px;
  color: #f59e0b;
  letter-spacing: 2px;
}
.abo-rating-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.abo-rating-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.abo-trustpilot-link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,0,61,0.35);
  transition: border-color 0.2s;
  align-self: flex-start;
}
.abo-trustpilot-link:hover { border-color: var(--primary); }

/* Review Grid — 2×2 */
.abo-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.abo-review-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.25s;
}
.abo-review-card:hover { border-color: var(--border-strong); }

.abo-review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.abo-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.abo-review-header > div:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.abo-review-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.abo-review-location {
  font-size: 11px;
  color: var(--text-dim);
}
.abo-review-header .abo-review-stars {
  font-size: 14px;
  color: #f59e0b;
  letter-spacing: 1px;
  margin-left: auto;
}

.abo-review-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
  font-style: italic;
}

.abo-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.abo-review-package {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  background: rgba(232,0,61,0.10);
  color: var(--primary);
  border: 1px solid rgba(232,0,61,0.25);
  border-radius: 12px;
  padding: 2px 10px;
}
.abo-review-date {
  font-size: 11px;
  color: var(--text-dim);
}

/* Reviews CTA */
.abo-reviews-cta {
  text-align: center;
  margin-bottom: 40px;
}


/* ── S9 Schritte ─────────────────────────────────────────── */
.abo-steps-section { background: var(--bg); }

.abo-steps-list {
  list-style: none;
  padding: 0;
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  counter-reset: steps;
}

.abo-step-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.abo-step-num {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-primary);
  position: relative;
}
/* Vertical connector line */
.abo-step-item:not(:last-child) .abo-step-num::after {
  content: '';
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 28px - 52px);
  background: rgba(232,0,61,0.25);
  /* Height dynamically filled by gap of parent */
}

.abo-step-content {
  flex: 1;
  padding-top: 8px;
}
.abo-step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.3;
}
.abo-step-desc {
  font-size: 14px;
  line-height: 1.70;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* Payment badges */
.abo-step-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.abo-step-badges span {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Speed highlight */
.abo-step-highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.30);
  border-radius: var(--r-md);
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.abo-step-highlight strong { color: #22c55e; }
.abo-step-highlight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

.abo-step-link-row { margin: 0; }


/* ── S10 Vergleich Anbieter ──────────────────────────────── */
.abo-compare-vs-section { background: var(--surface); }

/* Table wrapper — horizontal scroll on mobile */
.abo-compare-vs-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-bottom: 36px;
}
.abo-compare-vs-wrap::-webkit-scrollbar { height: 4px; }
.abo-compare-vs-wrap::-webkit-scrollbar-track { background: var(--surface); }
.abo-compare-vs-wrap::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }

.abo-compare-vs-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--surface);
}

.abo-compare-vs-table thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}
.abo-compare-vs-table th {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  position: relative;
}
.abo-vs-feature-col {
  text-align: left !important;
  width: 160px;
  min-width: 130px;
}

/* Winner column */
.abo-vs-th--winner {
  background: rgba(232,0,61,0.10) !important;
  color: var(--primary) !important;
  border-left: 2px solid var(--primary);
  border-right: 1px solid rgba(232,0,61,0.30);
}
.abo-vs-winner-badge {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #22c55e;
  letter-spacing: 0.06em;
  margin-top: 3px;
  text-transform: uppercase;
}

.abo-compare-vs-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.abo-compare-vs-table tbody tr:last-child { border-bottom: none; }
.abo-compare-vs-table tbody tr:hover { background: rgba(255,255,255,0.02); }

.abo-compare-vs-table td {
  padding: 13px 18px;
  color: var(--text-muted);
  text-align: center;
  font-size: 13.5px;
  vertical-align: middle;
}
.abo-vs-label {
  text-align: left !important;
  font-weight: 600;
  color: var(--text) !important;
  font-size: 13px !important;
}
.abo-vs-td--winner {
  background: rgba(232,0,61,0.06) !important;
  color: var(--text) !important;
  border-left: 2px solid var(--primary);
  border-right: 1px solid rgba(232,0,61,0.20);
}
.abo-vs-td--winner strong { color: var(--primary); }

.abo-compare-vs-table tfoot td {
  padding: 14px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--border-strong);
  text-align: center;
}


/* ── Responsive S8+S9+S10 — 900px ───────────────────────── */
@media (max-width: 900px) {
  .abo-review-grid { grid-template-columns: 1fr 1fr; }

  .abo-compare-vs-table { min-width: 500px; }
  .abo-compare-vs-table th,
  .abo-compare-vs-table td { padding: 11px 14px; }
}

/* ── 768px ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .abo-rating-header { gap: 12px; padding: 14px 18px; }
  .abo-rating-score strong { font-size: 28px; }
  .abo-rating-score .abo-rating-stars { font-size: 18px; }

  .abo-review-card { padding: 18px 18px 14px; }
  .abo-review-body { font-size: 13px; }

  .abo-step-num { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
  .abo-step-title { font-size: 16px; }
  .abo-step-desc { font-size: 13.5px; }
}

/* ── 640px (Telefon) ─────────────────────────────────────── */
@media (max-width: 640px) {
  .abo-rating-header { flex-direction: column; align-items: flex-start; gap: 8px; }

  .abo-review-grid { grid-template-columns: 1fr; }

  .abo-step-item { gap: 16px; }
  .abo-step-num { width: 40px; height: 40px; min-width: 40px; font-size: 16px; }
  .abo-step-content { padding-top: 6px; }
  .abo-step-title { font-size: 15px; }

  .abo-compare-vs-table { min-width: 460px; font-size: 13px; }
  .abo-compare-vs-table th,
  .abo-compare-vs-table td { padding: 10px 10px; }
}

/* ── 480px ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .abo-rating-score strong { font-size: 24px; }
  .abo-rating-score .abo-rating-stars { font-size: 16px; }
  .abo-rating-count { font-size: 13px; }

  .abo-review-card { padding: 16px 14px 12px; gap: 10px; }
  .abo-review-avatar { width: 34px; height: 34px; font-size: 14px; }
  .abo-review-author { font-size: 13px; }
  .abo-review-body { font-size: 12.5px; }

  .abo-compare-vs-table { min-width: 420px; font-size: 12px; }
  .abo-compare-vs-table th { font-size: 12px; padding: 9px 8px; }
  .abo-compare-vs-table td { padding: 9px 8px; }
  .btn-sm { padding: 7px 12px; font-size: 11px; }
}

/* ── 360px ───────────────────────────────────────────────── */
@media (max-width: 360px) {
  .abo-step-num { width: 36px; height: 36px; min-width: 36px; font-size: 15px; }
  .abo-step-title { font-size: 14px; }
  .abo-review-card { padding: 14px 12px 10px; }
  .abo-compare-vs-table { min-width: 380px; }
  .abo-vs-feature-col { width: 100px; min-width: 90px; }
}


/* ═══════════════════════════════════════════════════════════════
   IPTV-ABO — S11 FAQ ACCORDION + S12 CTA BANNER
   Classes: .abo-faq-* .abo-cta-*
═══════════════════════════════════════════════════════════════ */

/* ── S11 FAQ ─────────────────────────────────────────────── */
.abo-faq-section { background: var(--surface); }

.abo-faq-list {
  max-width: 820px;
  margin: 0 auto 44px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.abo-faq-item {
  border-bottom: 1px solid var(--border);
}
.abo-faq-item:first-child {
  border-top: 1px solid var(--border);
}

/* Summary (question row) */
.abo-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.abo-faq-q::-webkit-details-marker { display: none; }
.abo-faq-q::marker { display: none; }
.abo-faq-q:hover { background: rgba(255,255,255,0.03); }

.abo-faq-item[open] > .abo-faq-q {
  background: rgba(232,0,61,0.04);
  border-bottom: 1px solid rgba(232,0,61,0.15);
}

.abo-faq-q-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}

/* +/− icon */
.abo-faq-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.25s;
  position: relative;
}
.abo-faq-icon::before,
.abo-faq-icon::after {
  content: '';
  position: absolute;
  background: var(--text-muted);
  border-radius: 2px;
  transition: background 0.2s, opacity 0.2s, transform 0.25s;
}
.abo-faq-icon::before { width: 12px; height: 2px; }
.abo-faq-icon::after  { width: 2px; height: 12px; }

.abo-faq-item[open] .abo-faq-icon {
  background: var(--primary);
  border-color: var(--primary);
  transform: rotate(45deg);
}
.abo-faq-item[open] .abo-faq-icon::before,
.abo-faq-item[open] .abo-faq-icon::after { background: #fff; }

/* Answer */
.abo-faq-a {
  padding: 0 20px 18px 20px;
}
.abo-faq-a p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--text-muted);
  margin: 0;
}


/* ── S12 CTA Banner ──────────────────────────────────────── */
.abo-cta-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: var(--bg);
}

/* Background image + dark overlay */
.abo-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.abo-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  opacity: 0.35;
}
.abo-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,10,15,0.88) 0%,
    rgba(10,10,15,0.72) 50%,
    rgba(10,10,15,0.88) 100%
  );
}

/* Content layer */
.abo-cta-inner {
  position: relative;
  z-index: 1;
}
.abo-cta-content {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}

.abo-cta-tagline {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.abo-cta-section h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 18px;
}

.abo-cta-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* Trust badges row */
.abo-cta-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.abo-cta-trust span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* CTA buttons */
.abo-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.abo-cta-actions .btn {
  min-width: 220px;
}

/* Pricing note */
.abo-cta-note {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   FINALES RESPONSIVE-AUDIT — S11 + S12 + globale Korrekturen
   768px / 640px / 480px / 360px
═══════════════════════════════════════════════════════════════ */

/* ── 768px ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* S11 FAQ */
  .abo-faq-q { padding: 16px 16px; }
  .abo-faq-q-text { font-size: 14px; }
  .abo-faq-a { padding: 0 16px 16px; }
  .abo-faq-a p { font-size: 13.5px; }

  /* S12 CTA */
  .abo-cta-section { padding: 72px 0; }
  .abo-cta-desc { font-size: 15px; }
  .abo-cta-actions .btn { min-width: 180px; }
}

/* ── 640px ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* S11 */
  .abo-faq-q { padding: 14px 14px; gap: 12px; }
  .abo-faq-q-text { font-size: 13.5px; }
  .abo-faq-icon { width: 24px; height: 24px; min-width: 24px; }
  .abo-faq-icon::before { width: 10px; }
  .abo-faq-icon::after  { height: 10px; }
  .abo-faq-a { padding: 0 14px 14px; }
  .abo-faq-a p { font-size: 13px; }

  /* S12 */
  .abo-cta-section { padding: 56px 0; }
  .abo-cta-trust span { font-size: 11px; padding: 5px 11px; }
  .abo-cta-actions { flex-direction: column; align-items: center; gap: 12px; }
  .abo-cta-actions .btn { width: 100%; max-width: 360px; text-align: center; }
  .abo-cta-desc { font-size: 14px; }
}

/* ── 480px ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* S11 */
  .abo-faq-q { padding: 13px 12px; }
  .abo-faq-q-text { font-size: 13px; }
  .abo-faq-a { padding: 0 12px 13px; }
  .abo-faq-a p { font-size: 12.5px; }

  /* S12 */
  .abo-cta-section { padding: 48px 0; }
  .abo-cta-section h2 { font-size: 24px; }
  .abo-cta-desc { font-size: 13.5px; margin-bottom: 20px; }
  .abo-cta-trust span { font-size: 10.5px; padding: 4px 10px; }
  .abo-cta-note { font-size: 11px; }
  .abo-cta-actions .btn { min-width: unset; font-size: 14px; padding: 13px 18px; }
}

/* ── 360px ───────────────────────────────────────────────── */
@media (max-width: 360px) {
  .abo-faq-q { padding: 12px 10px; gap: 10px; }
  .abo-faq-q-text { font-size: 12.5px; }
  .abo-faq-a p { font-size: 12px; }

  .abo-cta-section { padding: 40px 0; }
  .abo-cta-section h2 { font-size: 22px; }
  .abo-cta-desc { font-size: 13px; }
  .abo-cta-trust { gap: 6px; }
  .abo-cta-trust span { font-size: 10px; padding: 3px 8px; }
}


/* ══════════════════════════════════════════════════════════════
   IPTV-BOX — /iptv-box/ (Nav: Geräte)
   Phase 1: Hero (S1) + GEO Intro (S2)
   Prefix: .box-*
   ══════════════════════════════════════════════════════════════ */

/* ── S1 · Hero ──────────────────────────────────────────────── */
.box-hero { background: var(--bg); }

.box-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 28px 0;
}
.box-stat-item {
  background: var(--surface);
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.18s;
}
.box-stat-item:hover { background: rgba(232,0,61,0.04); }
.box-stat-item strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.box-stat-item span {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.box-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.box-trust-chips span {
  font-size: 12px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 6px 16px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.box-trust-chips span:hover {
  background: rgba(232,0,61,0.08);
  border-color: rgba(232,0,61,0.30);
}

/* ── S2 · GEO Intro ─────────────────────────────────────────── */
.box-geo-section { background: var(--surface); }

.box-geo-inner {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 48px;
  align-items: start;
}

.box-geo-h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.box-geo-block p {
  font-size: 16.5px;
  line-height: 1.78;
  color: rgba(255,255,255,0.72);
}

.box-geo-quick {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: var(--r-lg);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px);
}

.box-geo-quick h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
}

.box-quick-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.box-quick-list a {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.box-quick-list a:hover {
  background: rgba(232,0,61,0.07);
  border-left-color: var(--primary);
  color: var(--text);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .box-stats { grid-template-columns: repeat(2, 1fr); }
  .box-geo-inner { grid-template-columns: 1fr; gap: 32px; }
  .box-geo-quick { position: static; }
}

@media (max-width: 640px) {
  .box-trust-chips span { font-size: 11px; padding: 4px 12px; }
  .box-geo-h2 { font-size: 19px; }
}

@media (max-width: 480px) {
  .box-trust-chips { gap: 6px; }
  .box-trust-chips span { font-size: 10.5px; padding: 4px 10px; }
  .box-stat-item strong { font-size: 16px; }
  .box-stat-item span { font-size: 10px; }
}

@media (max-width: 360px) {
  .box-geo-h2 { font-size: 17px; }
  .box-geo-block p { font-size: 14.5px; }
}


/* ══════════════════════════════════════════════════════════════
   IPTV-BOX Phase 2: S3 Smart TV + S4 Fire TV Stick
   Classes: .box-device-* .box-steps .box-table .box-tip-box
            .box-lifestyle-* .box-section-header
   ══════════════════════════════════════════════════════════════ */

/* ── Section Header (shared S3/S4) ──────────────────────── */
.box-section-header {
  text-align: center;
  margin-bottom: 52px;
}
.box-section-header::before {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin: 0 auto 20px;
}
.box-section-header h2 {
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  line-height: 1.2;
}
.box-section-header p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Device Section Backgrounds ─────────────────────────── */
.box-device-section { background: var(--bg); }
.box-device-section.alt { background: var(--surface); }

/* ── Two-column layout ───────────────────────────────────── */
.box-device-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 48px;
}
.box-device-inner--reverse { direction: rtl; }
.box-device-inner--reverse > * { direction: ltr; }

.box-device-lead {
  font-size: 16.5px;
  line-height: 1.78;
  color: rgba(255,255,255,0.72);
  margin-bottom: 32px;
}

/* ── Numbered Steps ─────────────────────────────────────── */
.box-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.box-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.18s, background 0.18s;
}
.box-step:hover {
  background: rgba(232,0,61,0.04);
  border-color: rgba(232,0,61,0.22);
}
.box-step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(232,0,61,0.35);
  margin-top: 1px;
}
.box-step-body { flex: 1; }
.box-step-body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.box-step-body span {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.box-step-body code {
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  color: var(--primary);
  background: rgba(232,0,61,0.10);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ── Device Image ────────────────────────────────────────── */
.box-device-image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65);
}
.box-device-image img { width: 100%; height: auto; display: block; }
.box-device-image-badge {
  position: absolute;
  bottom: 14px; left: 14px;
  background: rgba(10,10,15,0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ── Comparison Table ────────────────────────────────────── */
.box-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.box-compare-wrap::-webkit-scrollbar { height: 4px; }
.box-compare-wrap::-webkit-scrollbar-track { background: var(--surface-2); }
.box-compare-wrap::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }
.box-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
.box-table th {
  background: var(--surface-2);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.box-table td {
  padding: 13px 18px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.45;
}
.box-table tr:last-child td { border-bottom: none; }
.box-table tbody tr:hover td { background: rgba(255,255,255,0.025); }
.box-table .check { color: #22c55e; font-weight: 700; }
.box-table .cross { color: var(--text-dim); }
.box-table .highlight td { background: rgba(232,0,61,0.05); }
.box-table .highlight td:first-child { border-left: 2px solid var(--primary); }

/* ── Tip Box ─────────────────────────────────────────────── */
.box-tip-box {
  background: linear-gradient(135deg, rgba(232,0,61,0.06) 0%, rgba(28,28,38,0.8) 100%);
  border: 1px solid rgba(232,0,61,0.20);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin-top: 12px;
}
.box-tip-box p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}
.box-tip-box strong { color: var(--text); }

/* ── S3 Lifestyle Row (second image + text) ──────────────── */
.box-lifestyle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}
.box-lifestyle-image {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,0.55);
}
.box-lifestyle-image img { width: 100%; height: auto; display: block; }
.box-lifestyle-text h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.box-lifestyle-text p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .box-device-inner { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .box-device-inner--reverse { direction: ltr; }
  .box-section-header { margin-bottom: 32px; }
  .box-lifestyle-row { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .box-table th, .box-table td { padding: 10px 12px; font-size: 12.5px; }
}
@media (max-width: 640px) {
  .box-section-header h2 { font-size: 20px; }
  .box-section-header p { font-size: 15px; }
  .box-device-lead { font-size: 15px; }
  .box-step-body strong { font-size: 13.5px; }
  .box-step-body span { font-size: 13px; }
  .box-lifestyle-text h3 { font-size: 18px; }
}
@media (max-width: 480px) {
  .box-step { padding: 10px 12px; gap: 12px; }
  .box-step-num { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 10px rgba(232,0,61,0.25); }
  .box-compare-wrap { border-radius: var(--r-md); }
  .box-table th, .box-table td { padding: 9px 10px; font-size: 12px; }
}
@media (max-width: 360px) {
  .box-step { padding: 9px 10px; gap: 10px; }
  .box-section-header h2 { font-size: 18px; }
  .box-step-body strong { font-size: 13px; }
  .box-tip-box p { font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════════
   IPTV-BOX Phase 3: S5 MAG Box Model Cards
   S6 & S7 reuse Phase-2 classes (box-device-inner, box-table,
   box-steps, box-tip-box, box-compare-wrap)
   ══════════════════════════════════════════════════════════════ */

/* ── S5 Model Cards Grid ─────────────────────────────────── */
.box-models-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.box-model-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.box-model-card:hover {
  border-color: rgba(232,0,61,0.35);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.40);
}
.box-model-card--alt {
  border-color: rgba(255,255,255,0.12);
}
.box-model-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 10px;
}
.box-model-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.box-model-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 10px;
  line-height: 1;
}
.box-model-desc {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 16px;
}
.box-model-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.box-model-badge--rec {
  background: rgba(232,0,61,0.14);
  color: var(--primary);
  border: 1px solid rgba(232,0,61,0.28);
}
.box-model-badge--prem {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.box-model-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.box-model-features li {
  font-size: 13.5px;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
.box-model-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: 700;
  font-size: 12px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .box-models-grid { grid-template-columns: 1fr; gap: 16px; }
  .box-model-card { padding: 20px; }
  .box-model-name { font-size: 16px; }
  .box-model-price { font-size: 20px; }
}
@media (max-width: 360px) {
  .box-model-desc { font-size: 13px; }
  .box-model-features li { font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════════
   IPTV-BOX Phase 4: S8 Method Cards + S9 App Stars + Rec Grid
   ══════════════════════════════════════════════════════════════ */

/* ── S8 Method Cards (M3U vs Xtream Codes) ───────────────── */
.box-method-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.box-method-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color 0.20s, box-shadow 0.20s;
}
.box-method-card:hover { border-color: rgba(255,255,255,0.18); }
.box-method-card--rec {
  border-color: rgba(232,0,61,0.30);
  box-shadow: 0 0 0 1px rgba(232,0,61,0.10) inset,
              0 8px 32px rgba(232,0,61,0.08);
}
.box-method-card--rec:hover { border-color: rgba(232,0,61,0.50); }
.box-method-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.box-method-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.box-method-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.box-method-tag--rec {
  background: rgba(232,0,61,0.14);
  color: var(--primary);
  border-color: rgba(232,0,61,0.28);
}
.box-method-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 14px;
}
.box-method-desc code {
  font-family: 'Courier New', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  padding: 1px 4px;
  word-break: break-all;
}
.box-method-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.box-method-list li {
  font-size: 13.5px;
  color: var(--text-muted);
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}
.box-method-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.1;
}
.box-method-card--rec .box-method-list li::before { content: "✓"; font-size: 12px; color: #22c55e; }
.box-method-best {
  font-size: 12.5px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
  line-height: 1.5;
}
.box-method-best strong { color: var(--text-muted); }

/* ── S9 Stars + Rec Grid ─────────────────────────────────── */
.box-stars {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.box-rec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.box-rec-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.box-rec-device {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.box-rec-app {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .box-method-cards { grid-template-columns: 1fr; }
  .box-rec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .box-method-card { padding: 20px; }
  .box-method-title { font-size: 15px; }
  .box-rec-device { font-size: 11px; }
  .box-rec-app { font-size: 13px; }
}
@media (max-width: 480px) {
  .box-method-desc { font-size: 12.5px; }
  .box-method-list li { font-size: 13px; }
}
@media (max-width: 360px) {
  .box-method-title { font-size: 14px; }
  .box-stars { font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════════
   IPTV-BOX Phase 5: S10 Film-Showcase + S11 Compat + S12 Reviews
   Classes: .box-genre-* .box-poster-* .box-compat-* .box-review-*
   ══════════════════════════════════════════════════════════════ */

/* ── S10 · Genre Chips ───────────────────────────────────────── */
.box-genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.box-genre-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(232,0,61,0.08);
  border: 1px solid rgba(232,0,61,0.20);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.box-genre-chip:hover {
  background: rgba(232,0,61,0.16);
  border-color: rgba(232,0,61,0.40);
  color: var(--text);
}

/* ── S10 · Poster Strip ──────────────────────────────────────── */
.box-poster-strip {
  list-style: none;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 24px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
}

.box-poster-strip::-webkit-scrollbar { height: 4px; }
.box-poster-strip::-webkit-scrollbar-track { background: transparent; }
.box-poster-strip::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.box-poster-item {
  flex: 0 0 140px;
  min-height: 200px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}

.box-poster-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--poster-accent, var(--primary));
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.box-poster-item:hover {
  border-color: var(--poster-accent, var(--primary));
  transform: translateY(-3px);
}

.box-poster-genre {
  font-size: 10px;
  font-weight: 700;
  color: var(--poster-accent, var(--primary));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.box-poster-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.box-poster-year {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

/* ── S11 · Compat Table Lead ─────────────────────────────────── */
.box-compat-lead {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 820px;
  margin: 0 auto 32px;
  text-align: center;
}

.box-table--compat { min-width: 660px; }
.box-table--compat th,
.box-table--compat td { padding: 11px 10px; font-size: 13.5px; }

.box-table--compat th:first-child,
.box-table--compat td:first-child { min-width: 190px; }

/* ── S12 · Review Cards ──────────────────────────────────────── */
.box-review-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.box-review-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.box-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.box-review-header .box-stars { font-size: 14px; }

.box-review-device {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(232,0,61,0.08);
  border: 1px solid rgba(232,0,61,0.15);
  border-radius: 12px;
  padding: 3px 10px;
  white-space: nowrap;
}

.box-review-text p {
  font-size: 14px;
  line-height: 1.68;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

.box-review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.box-review-meta strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}

.box-review-meta span {
  font-size: 12px;
  color: var(--text-dim);
}

/* ── Phase 5 Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .box-poster-item { flex: 0 0 120px; min-height: 175px; }
  .box-poster-title { font-size: 13px; }
  .box-compat-lead { text-align: left; }
}

@media (max-width: 640px) {
  .box-genre-chip { font-size: 12px; padding: 5px 12px; }
  .box-poster-item { flex: 0 0 110px; min-height: 165px; }
  .box-compat-lead { font-size: 15px; }
  .box-table--compat th,
  .box-table--compat td { padding: 10px 8px; font-size: 13px; }
  .box-table--compat th:first-child,
  .box-table--compat td:first-child { min-width: 140px; }
}

@media (max-width: 480px) {
  .box-review-card { padding: 16px; }
  .box-review-text p { font-size: 13.5px; }
  .box-review-device { font-size: 10px; padding: 2px 8px; }
  .box-genre-chips { gap: 6px; }
  .box-genre-chip { font-size: 11.5px; padding: 4px 10px; }
  .box-poster-item { flex: 0 0 105px; min-height: 155px; padding: 12px 10px; }
}

@media (max-width: 360px) {
  .box-poster-item { flex: 0 0 95px; min-height: 145px; }
  .box-poster-title { font-size: 12.5px; }
  .box-review-text p { font-size: 13px; }
  .box-review-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .box-compat-lead { font-size: 14.5px; }
}


/* ══════════════════════════════════════════════════════════════
   IPTV-BOX Phase 6: S13 FAQ Accordion + S14 CTA
   Classes: .box-faq-inner .box-faq-list .box-faq-item
            .box-faq-q .box-faq-q-text .box-faq-icon
            .box-faq-a .box-faq-sidebar
   S14 CTA reuses existing .abo-cta-* classes
   ══════════════════════════════════════════════════════════════ */

/* ── S13 · FAQ Inner Layout ──────────────────────────────────── */
.box-faq-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}

.box-faq-sidebar {
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px);
}

/* ── S13 · FAQ List ──────────────────────────────────────────── */
.box-faq-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 8px;
}

.box-faq-item {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.box-faq-item:last-child { border-bottom: none; }

.box-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
  min-height: 56px;
}

.box-faq-q::-webkit-details-marker { display: none; }
.box-faq-q::marker { display: none; }
.box-faq-q:hover { background: rgba(255,255,255,0.03); }

.box-faq-item[open] > .box-faq-q {
  background: rgba(232,0,61,0.04);
  border-bottom: 1px solid rgba(232,0,61,0.15);
}

.box-faq-q-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}

/* +/− toggle icon */
.box-faq-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.25s;
  position: relative;
}

.box-faq-icon::before,
.box-faq-icon::after {
  content: '';
  position: absolute;
  background: var(--text-muted);
  border-radius: 2px;
  transition: background 0.2s, opacity 0.2s, transform 0.25s;
}

.box-faq-icon::before { width: 12px; height: 2px; }
.box-faq-icon::after  { width: 2px; height: 12px; }

.box-faq-item[open] .box-faq-icon {
  background: var(--primary);
  border-color: var(--primary);
  transform: rotate(45deg);
}

.box-faq-item[open] .box-faq-icon::before,
.box-faq-item[open] .box-faq-icon::after { background: #fff; }

/* Answer */
.box-faq-a {
  padding: 0 20px 18px 20px;
}

.box-faq-a p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--text-muted);
  margin: 0;
}

/* ── S13 · Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .box-faq-inner { grid-template-columns: 1fr; gap: 32px; }
  .box-faq-sidebar { position: static; }
}

@media (max-width: 768px) {
  .box-faq-q { padding: 16px 16px; }
  .box-faq-q-text { font-size: 14px; }
  .box-faq-a { padding: 0 16px 16px; }
  .box-faq-a p { font-size: 13.5px; }
}

@media (max-width: 640px) {
  .box-faq-q { padding: 14px 14px; gap: 12px; min-height: 50px; }
  .box-faq-q-text { font-size: 13.5px; }
  .box-faq-icon { width: 24px; height: 24px; min-width: 24px; }
  .box-faq-icon::before { width: 10px; }
  .box-faq-icon::after  { height: 10px; }
  .box-faq-a { padding: 0 14px 14px; }
  .box-faq-a p { font-size: 13px; }
}

@media (max-width: 480px) {
  .box-faq-q { padding: 13px 12px; }
  .box-faq-q-text { font-size: 13px; }
  .box-faq-a { padding: 0 12px 13px; }
  .box-faq-a p { font-size: 12.5px; }
}

@media (max-width: 360px) {
  .box-faq-q { padding: 12px 10px; gap: 10px; }
  .box-faq-q-text { font-size: 12.5px; }
  .box-faq-a p { font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════════
   IPTV-BOX — RESPONSIVE FINALE: Lücken S1–S14 schliessen
   768px / 640px / 480px / 360px
   ══════════════════════════════════════════════════════════════ */

/* ── 768px (Tablet) ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* S2: geo block text */
  .box-geo-block p { font-size: 15px; }
  /* S10: poster strip gap */
  .box-poster-strip { gap: 10px; padding: 20px 0 8px; }
  /* S11: compat lead */
  .box-compat-lead { font-size: 15px; }
  /* S12: review card */
  .box-review-card { padding: 18px; }
  /* S14 CTA (abo-cta reuse) */
  .abo-cta-section { padding: 72px 0; }
  .abo-cta-desc { font-size: 15px; }
  .abo-cta-actions .btn { min-width: 180px; }
}

/* ── 640px (Large Mobile) ───────────────────────────────────── */
@media (max-width: 640px) {
  /* S1: hero trust chips */
  .box-trust-chips span { font-size: 11px; padding: 4px 12px; }
  /* S1: hero stats */
  .box-stat-item { padding: 12px 10px; }
  /* S2: quick nav */
  .box-geo-h2 { font-size: 19px; }
  .box-quick-list a { padding: 7px 10px; font-size: 13.5px; }
  /* S14 CTA */
  .abo-cta-section { padding: 56px 0; }
  .abo-cta-trust span { font-size: 11px; padding: 5px 11px; }
  .abo-cta-actions { flex-direction: column; align-items: center; gap: 12px; }
  .abo-cta-actions .btn { width: 100%; max-width: 360px; text-align: center; }
  .abo-cta-desc { font-size: 14px; }
}

/* ── 480px (Mobile) ─────────────────────────────────────────── */
@media (max-width: 480px) {
  /* S1: hero buttons stack */
  .box-hero .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .box-hero .btn { text-align: center; }
  /* S1: hero trust chips */
  .box-trust-chips { gap: 6px; }
  .box-trust-chips span { font-size: 10.5px; padding: 4px 10px; }
  /* S1: hero stats */
  .box-stat-item strong { font-size: 16px; }
  .box-stat-item span { font-size: 10px; }
  /* S2: geo */
  .box-geo-h2 { font-size: 17px; }
  .box-geo-block p { font-size: 14.5px; }
  /* Tip box */
  .box-tip-box { padding: 13px 14px; }
  .box-tip-box p { font-size: 13px; }
  /* S14 CTA */
  .abo-cta-section { padding: 48px 0; }
  .abo-cta-section h2 { font-size: 24px; }
  .abo-cta-desc { font-size: 13.5px; margin-bottom: 20px; }
  .abo-cta-trust span { font-size: 10.5px; padding: 4px 10px; }
  .abo-cta-note { font-size: 11px; }
  .abo-cta-actions .btn { min-width: unset; font-size: 14px; padding: 13px 18px; }
}

/* ── 360px (Small Mobile) ───────────────────────────────────── */
@media (max-width: 360px) {
  /* S1 */
  .box-stat-item { padding: 11px 8px; }
  .box-stat-item strong { font-size: 15px; }
  /* S2 */
  .box-geo-block p { font-size: 14px; }
  /* S3–S14 section headers */
  .box-section-header h2 { font-size: 17px; }
  .box-section-header p { font-size: 14px; }
  /* Tip box */
  .box-tip-box p { font-size: 12.5px; }
  /* S14 CTA */
  .abo-cta-section { padding: 40px 0; }
  .abo-cta-section h2 { font-size: 22px; }
  .abo-cta-desc { font-size: 13px; }
  .abo-cta-trust { gap: 6px; }
  .abo-cta-trust span { font-size: 10px; padding: 3px 8px; }
}


/* ════════════════════════════════════════════════════════════
   ANL-* PREFIX — iptv-apps.php (Anleitungen / IPTV Apps)
   Phase 1: S1 Hero + S2 GEO Block
════════════════════════════════════════════════════════════ */

/* S1 · Hero */
.anl-hero { background: var(--bg); }

/* Stats bar (O02) */
.anl-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 28px 0;
}
.anl-stat-item {
  background: var(--surface);
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.18s;
}
.anl-stat-item:hover { background: rgba(232,0,61,0.04); }
.anl-stat-item strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.anl-stat-item span {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Trust chips */
.anl-trust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.anl-trust-chips span {
  font-size: 12px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 6px 16px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.anl-trust-chips span:hover {
  background: rgba(232,0,61,0.08);
  border-color: rgba(232,0,61,0.30);
}

/* Hero image */
.anl-hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
}

/* S2 · GEO Section */
.anl-geo-section { background: var(--surface); }
.anl-geo-inner {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 48px;
  align-items: start;
}
.anl-geo-h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.anl-geo-block p {
  font-size: 16.5px;
  line-height: 1.78;
  color: rgba(255,255,255,0.72);
  margin: 0;
}

/* Quick nav (sticky sidebar) */
.anl-geo-quick {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  border-radius: var(--r-lg);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px);
}
.anl-geo-quick h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
}
.anl-quick-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
}
.anl-quick-list a {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.anl-quick-list a:hover {
  background: rgba(232,0,61,0.07);
  border-left-color: var(--primary);
  color: var(--text);
}

/* ── ANL Responsive ─────────────────────────────────────── */
/* 900px — Tablet */
@media (max-width: 900px) {
  .anl-stats { grid-template-columns: repeat(2, 1fr); }
  .anl-geo-inner { grid-template-columns: 1fr; gap: 32px; }
  .anl-geo-quick { position: static; }
}

/* 640px — Large Mobile */
@media (max-width: 640px) {
  .anl-trust-chips span { font-size: 11px; padding: 4px 12px; }
  .anl-geo-h2 { font-size: 19px; }
  .anl-geo-block p { font-size: 15px; }
  .anl-stat-item { padding: 14px 10px; }
}

/* 480px — Mobile */
@media (max-width: 480px) {
  .anl-trust-chips { gap: 6px; }
  .anl-trust-chips span { font-size: 10.5px; padding: 4px 10px; }
  .anl-stat-item strong { font-size: 16px; }
  .anl-stat-item span { font-size: 10px; }
  .anl-hero .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .anl-hero .btn { text-align: center; }
}

/* 360px — Small Mobile */
@media (max-width: 360px) {
  .anl-geo-h2 { font-size: 17px; }
  .anl-geo-block p { font-size: 14.5px; }
  .anl-stat-item { padding: 11px 8px; }
  .anl-stat-item strong { font-size: 15px; }
}


/* ════════════════════════════════════════════════════════════
   ANL-* Phase 2: S3 Smarters Pro + S4 Smart TV
════════════════════════════════════════════════════════════ */

/* Guide sections */
.anl-guide-section { background: var(--bg); }
.anl-guide-section.alt { background: var(--surface); }

/* Section header */
.anl-section-header {
  text-align: center;
  margin-bottom: 52px;
  position: relative;
  padding-top: 20px;
}
.anl-section-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}
.anl-section-header h2 {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.anl-section-header p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* 2-col guide layout */
.anl-guide-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 40px;
}
.anl-guide-inner--reverse .anl-guide-image { order: -1; }

/* Guide lead paragraph */
.anl-guide-lead {
  font-size: 16.5px;
  line-height: 1.78;
  color: rgba(255,255,255,0.72);
  margin-bottom: 28px;
}

/* Steps (O06) */
.anl-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.anl-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color 0.18s, background 0.18s;
}
.anl-step:hover {
  border-color: rgba(232,0,61,0.40);
  background: rgba(232,0,61,0.04);
}
.anl-step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(232,0,61,0.35);
}
.anl-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.anl-step-body strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.anl-step-body span {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Guide image */
.anl-guide-image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
}
.anl-guide-image img {
  width: 100%;
  height: auto;
  display: block;
}
.anl-guide-image-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Table (O03) */
.anl-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin: 0 0 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--surface);
}
.anl-compare-wrap::-webkit-scrollbar { height: 5px; }
.anl-compare-wrap::-webkit-scrollbar-track { background: var(--surface); }
.anl-compare-wrap::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
.anl-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
}
.anl-table thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.anl-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.anl-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
  vertical-align: middle;
}
.anl-table tbody tr:last-child td { border-bottom: none; }
.anl-table tbody tr.highlight { background: rgba(232,0,61,0.04); }
.anl-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.anl-table .check { color: #22c55e; font-weight: 600; }
.anl-table .cross { color: var(--text-dim); }

/* Tip box */
.anl-tip-box {
  background: linear-gradient(135deg, rgba(232,0,61,0.06) 0%, rgba(232,0,61,0.02) 100%);
  border: 1px solid rgba(232,0,61,0.15);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 16px;
}
.anl-tip-box p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin: 0;
}
.anl-tip-box strong { color: var(--text); }

/* ── ANL Phase 2 Responsive ─────────────────────────── */
@media (max-width: 900px) {
  .anl-guide-inner { grid-template-columns: 1fr; gap: 32px; }
  .anl-guide-inner--reverse .anl-guide-image { order: 0; }
  .anl-section-header { margin-bottom: 36px; }
}
@media (max-width: 768px) {
  .anl-section-header h2 { font-size: 22px; }
  .anl-section-header p { font-size: 14.5px; }
  .anl-guide-lead { font-size: 15.5px; }
}
@media (max-width: 640px) {
  .anl-section-header { margin-bottom: 28px; padding-top: 16px; }
  .anl-guide-lead { font-size: 15px; }
  .anl-step { padding: 12px 14px; gap: 12px; }
  .anl-step-body strong { font-size: 14px; }
  .anl-step-body span { font-size: 13.5px; }
  .anl-guide-image-badge { font-size: 11px; padding: 5px 12px; }
}
@media (max-width: 480px) {
  .anl-section-header h2 { font-size: 20px; }
  .anl-step { padding: 10px 12px; gap: 10px; }
  .anl-step-num { width: 28px; height: 28px; font-size: 12px; }
  .anl-step-body strong { font-size: 13.5px; }
  .anl-step-body span { font-size: 13px; }
  .anl-tip-box { padding: 13px 14px; }
  .anl-tip-box p { font-size: 13px; }
  .anl-guide-image-badge { font-size: 10.5px; padding: 4px 10px; bottom: 10px; left: 10px; }
}
@media (max-width: 360px) {
  .anl-section-header h2 { font-size: 18px; }
  .anl-guide-lead { font-size: 14.5px; }
  .anl-step-num { width: 26px; height: 26px; font-size: 11px; }
  .anl-tip-box p { font-size: 12.5px; }
}


/* ════════════════════════════════════════════════════════════
   ANL-* Phase 3: S5 Fire TV Stick + S6 M3U/Xtream
════════════════════════════════════════════════════════════ */

/* S5 · Model Recommendation Row */
.anl-model-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.anl-model-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  text-align: center;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.anl-model-chip:hover {
  border-color: rgba(232,0,61,0.35);
  transform: translateY(-2px);
  background: rgba(232,0,61,0.04);
}
.anl-model-chip h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.3;
}
.anl-model-price {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.1;
}
.anl-model-feat {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* S6 · Method Cards (2 cols) */
.anl-method-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0 0;
}
.anl-method-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.anl-method-card--rec {
  border-color: rgba(232,0,61,0.30);
  box-shadow: 0 0 24px rgba(232,0,61,0.07);
}
.anl-method-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.anl-method-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.anl-method-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.10);
}
.anl-method-tag--rec {
  background: rgba(232,0,61,0.14);
  color: var(--primary);
  border-color: rgba(232,0,61,0.30);
}
.anl-method-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin: 0;
}
.anl-method-desc code {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-muted);
}
.anl-method-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.anl-method-list li {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.anl-method-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
}
.anl-method-when {
  font-size: 12.5px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  line-height: 1.55;
}
.anl-method-when strong {
  display: block;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── ANL Phase 3 Responsive ─────────────────────────── */
@media (max-width: 900px) {
  .anl-model-row { gap: 12px; }
}
@media (max-width: 640px) {
  .anl-model-row { grid-template-columns: 1fr; gap: 10px; }
  .anl-model-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 12px;
    padding: 16px 18px;
  }
  .anl-model-chip h4 { margin: 0; }
  .anl-model-feat { text-align: right; }
  .anl-method-cards { grid-template-columns: 1fr; gap: 16px; }
  .anl-method-card { padding: 20px; }
}
@media (max-width: 480px) {
  .anl-model-price { font-size: 20px; }
  .anl-method-title { font-size: 15px; }
  .anl-method-card { padding: 16px; gap: 12px; }
  .anl-method-list li { font-size: 13px; }
}
@media (max-width: 360px) {
  .anl-model-price { font-size: 18px; }
  .anl-method-card { padding: 14px; gap: 10px; }
  .anl-method-desc { font-size: 13.5px; }
}


/* ════════════════════════════════════════════════════════════
   ANL-* Phase 4: S7 Android/iPhone + S8 MAG Box + S9 PC/Mac
════════════════════════════════════════════════════════════ */

/* S7 · Two-column Steps (Android | iPhone) */
.anl-steps-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 32px 0 24px;
}
.anl-steps-dual-col h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

/* S9 · Three-column Method Cards */
.anl-method-cards--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
}
.anl-method-card--compact {
  padding: 20px;
  gap: 14px;
}
.anl-method-card--compact .anl-steps {
  gap: 10px;
  margin-bottom: 0;
}
.anl-method-card--compact .anl-step {
  padding: 9px 12px;
  gap: 10px;
}
.anl-method-card--compact .anl-step-num {
  width: 26px;
  height: 26px;
  font-size: 12px;
  box-shadow: 0 0 12px rgba(232,0,61,0.28);
}
.anl-method-card--compact .anl-step-body strong {
  font-size: 13.5px;
}
.anl-method-card--compact .anl-step-body span {
  font-size: 13px;
}

/* ── ANL Phase 4 Responsive ─────────────────────────── */
@media (max-width: 900px) {
  .anl-method-cards--3 { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .anl-steps-dual { grid-template-columns: 1fr; gap: 24px; }
  .anl-method-cards--3 { grid-template-columns: 1fr; }
  .anl-method-card--compact { padding: 16px; }
}
@media (max-width: 480px) {
  .anl-steps-dual { gap: 20px; margin: 24px 0 16px; }
  .anl-method-card--compact { padding: 14px; gap: 12px; }
  .anl-method-card--compact .anl-step { padding: 8px 10px; gap: 9px; }
  .anl-method-card--compact .anl-step-num { width: 24px; height: 24px; font-size: 11px; }
}
@media (max-width: 360px) {
  .anl-steps-dual-col h3 { font-size: 11px; }
  .anl-method-card--compact .anl-step-body strong { font-size: 13px; }
  .anl-method-card--compact .anl-step-body span { font-size: 12.5px; }
}

/* ============================================================
   ANL PHASE 5 — S10 Fehlerbehebung + S11 Optimierung
   ============================================================ */

/* S10 · Problem-Solution Grid */
.anl-trouble-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 32px 0 0;
}
.anl-trouble-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 20px;
  align-items: start;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  transition: border-color 0.18s;
}
.anl-trouble-card:hover {
  border-color: rgba(232, 0, 61, 0.30);
}
.anl-trouble-problem {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  padding-left: 26px;
  position: relative;
}
.anl-trouble-problem::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(232, 0, 61, 0.15);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anl-trouble-solution {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}
.anl-trouble-solution strong {
  color: var(--text);
}
.anl-trouble-solution a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.anl-trouble-solution a:hover { text-decoration: underline; }

/* S10 bottom support link */
.anl-support-link {
  text-align: center;
  margin-top: 30px;
  font-size: 15px;
  color: var(--text-muted);
}
.anl-support-link a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.anl-support-link a:hover { text-decoration: underline; }

/* S11 · Tip Cards */
.anl-tip-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 32px 0 0;
}
.anl-tip-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  padding: 16px 20px;
  transition: background 0.18s;
}
.anl-tip-card:hover {
  background: rgba(232, 0, 61, 0.04);
}
.anl-tip-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(232, 0, 61, 0.35);
}
.anl-tip-body {}
.anl-tip-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.35;
}
.anl-tip-body p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Phase 5 Responsive ──────────────────────────────────── */
@media (max-width: 800px) {
  .anl-trouble-card { grid-template-columns: 180px 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .anl-trouble-card { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .anl-tip-card { gap: 12px; padding: 14px 16px; }
  .anl-tip-number { width: 30px; height: 30px; font-size: 13px; }
  .anl-tip-body h3 { font-size: 14px; }
}
@media (max-width: 360px) {
  .anl-trouble-problem { font-size: 13px; }
  .anl-trouble-solution { font-size: 13px; }
  .anl-tip-body h3 { font-size: 13px; }
  .anl-tip-body p { font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════════
   ANL PHASE 6 — S12 Erfahrungen + S13 FAQ + S14 CTA
   Comprehensive Responsive Finale: 768 / 640 / 480 / 360
   S12 reuses .box-review-* | S13 reuses .box-faq-*
   S14 reuses .abo-cta-* | Kein neues CSS nötig für Blöcke
   ══════════════════════════════════════════════════════════════ */

/* ── 768px — Tablet ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* S4/S6: method cards → 1 col bereits früher als 640px */
  .anl-method-cards { grid-template-columns: 1fr; gap: 14px; }
  /* S13: FAQ inner → 1 col (box-faq-inner already covers 900px) */
  .box-device-lead { font-size: 15.5px; }
}

/* ── 640px — Large Mobile ───────────────────────────────────── */
@media (max-width: 640px) {
  /* S12: review cards tighter on mobile */
  .box-review-card { padding: 15px; }
  .box-review-text p { font-size: 13.5px; }
  /* S14 CTA responsive (abo-cta-* rules from iptv-box already cover this) */
}

/* ── 480px — Mobile ─────────────────────────────────────────── */
@media (max-width: 480px) {
  /* S12: review header wraps on small screens */
  .box-review-header { flex-wrap: wrap; gap: 6px; }
  .box-review-device { font-size: 10.5px; padding: 2px 8px; }
  /* S11: tip cards tighter padding */
  .anl-tip-card { padding: 12px 14px; }
  .anl-trouble-card { padding: 13px 14px; }
}

/* ── 360px — Small Mobile ───────────────────────────────────── */
@media (max-width: 360px) {
  /* Override Phase 2: H2 → 17px (was 18px) */
  .anl-section-header h2 { font-size: 17px; }
  /* S12 */
  .box-review-text p { font-size: 13px; }
  .box-review-meta strong { font-size: 12.5px; }
  .box-review-meta span { font-size: 11.5px; }
  /* S13 FAQ */
  .box-device-lead { font-size: 14px; }
}


/* ══════════════════════════════════════════════════════════════
   ANL MODERN REFRESH — Visual Enhancement Layer
   Pure CSS overrides · Keine HTML-Änderungen · 2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Section backgrounds — subtile Glut hinter jedem Header ── */
.anl-guide-section {
  background-image: radial-gradient(
    ellipse 90% 45% at 50% 0%,
    rgba(232, 0, 61, 0.038) 0%,
    transparent 65%
  );
}
.anl-guide-section.alt {
  background-image: radial-gradient(
    ellipse 90% 45% at 50% 100%,
    rgba(232, 0, 61, 0.028) 0%,
    transparent 65%
  );
}

/* ── 2. Section header — breitere Linie + Glow ────────────────── */
.anl-section-header::before {
  width: 72px;
  background: linear-gradient(90deg, var(--primary) 0%, rgba(232, 0, 61, 0.35) 100%);
  box-shadow: 0 0 16px rgba(232, 0, 61, 0.55);
}
.anl-section-header h2 {
  background: linear-gradient(135deg, #ffffff 60%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.anl-section-header p {
  font-size: 15.5px;
}

/* ── 3. Guide image — tieferer Schatten + roter Rand-Glow ─────── */
.anl-guide-image {
  box-shadow:
    0 16px 56px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(232, 0, 61, 0.10),
    0 0 40px rgba(232, 0, 61, 0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.anl-guide-image:hover {
  box-shadow:
    0 20px 64px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(232, 0, 61, 0.18),
    0 0 48px rgba(232, 0, 61, 0.10);
  transform: translateY(-2px);
}
/* Gradient scrim inside image */
.anl-guide-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 15, 0.30) 0%,
    transparent 45%
  );
  pointer-events: none;
}

/* ── 4. Steps — linke Akzentlinie + sanftes Slide beim Hover ──── */
.anl-step {
  border-left: 3px solid transparent;
  padding-left: 13px;
  transition: border-color 0.2s ease, background 0.2s ease,
              transform 0.18s ease, box-shadow 0.2s ease;
}
.anl-step:hover {
  border-left-color: var(--primary);
  background: rgba(232, 0, 61, 0.05);
  transform: translateX(3px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
}

/* ── 5. Step-Nummer — stärkerer Glow ─────────────────────────── */
.anl-step-num {
  box-shadow:
    0 0 22px rgba(232, 0, 61, 0.50),
    0 2px 8px rgba(0, 0, 0, 0.50);
}

/* ── 6. Stats bar — Hover-Gradient + roter Box-Shadow innen ────── */
.anl-stat-item {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.anl-stat-item:hover {
  background: linear-gradient(160deg, rgba(232,0,61,0.08) 0%, var(--surface) 100%);
  box-shadow: inset 0 -2px 0 var(--primary);
}
.anl-stat-item strong {
  font-size: 24px;
  letter-spacing: -0.03em;
}

/* ── 7. Trouble cards — Lift + Glow auf Hover ────────────────── */
.anl-trouble-card {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s, background 0.2s;
}
.anl-trouble-card:hover {
  border-color: rgba(232, 0, 61, 0.32);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(232, 0, 61, 0.12);
  transform: translateY(-1px);
  background: rgba(232, 0, 61, 0.025);
}
.anl-trouble-problem {
  font-weight: 700;
  line-height: 1.35;
}

/* ── 8. Tip cards — stärkerer Glow auf Nummer + Hover-Glow ────── */
.anl-tip-number {
  box-shadow:
    0 0 24px rgba(232, 0, 61, 0.50),
    0 2px 10px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.anl-tip-card:hover .anl-tip-number {
  box-shadow:
    0 0 32px rgba(232, 0, 61, 0.70),
    0 2px 10px rgba(0, 0, 0, 0.45);
  transform: scale(1.08);
}
.anl-tip-card {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.anl-tip-card:hover {
  background: rgba(232, 0, 61, 0.05);
  box-shadow: -4px 0 0 0 var(--primary), 0 4px 22px rgba(0, 0, 0, 0.35);
}

/* ── 9. Review cards (S12) — Gradient + Lift ─────────────────── */
#anl-erfahrungen .box-review-card {
  background: linear-gradient(
    140deg,
    rgba(232, 0, 61, 0.05) 0%,
    var(--surface-2) 100%
  );
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}
#anl-erfahrungen .box-review-card:hover {
  border-color: rgba(232, 0, 61, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
#anl-erfahrungen .box-stars {
  filter: drop-shadow(0 0 6px rgba(255, 190, 0, 0.5));
}

/* ── 10. Quick-Nav sidebar — aktiver State + bessere Hover ──── */
.anl-quick-list a:hover {
  background: linear-gradient(90deg, rgba(232,0,61,0.10) 0%, transparent 100%);
  border-left-color: var(--primary);
  color: var(--text);
  padding-left: 14px;
  transition: padding-left 0.18s ease;
}
.anl-geo-quick {
  box-shadow: 0 0 0 1px rgba(232, 0, 61, 0.12), 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ── 11. Guide-image badge — schärferes Glas ─────────────────── */
.anl-guide-image-badge {
  background: rgba(8, 8, 14, 0.88);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  font-size: 12.5px;
  gap: 7px;
}

/* ── 12. FAQ item — offener State mit Glow ───────────────────── */
.box-faq-item[open] > .box-faq-q {
  border-bottom: 1px solid rgba(232, 0, 61, 0.20);
  box-shadow: inset 0 0 0 1000px rgba(232, 0, 61, 0.04);
}

/* ── 13. CTA BG-Overlay — wärmerer Gradient ─────────────────── */
.abo-cta-overlay {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 15, 0.88) 0%,
    rgba(10, 10, 15, 0.74) 50%,
    rgba(10, 10, 15, 0.82) 100%
  );
}

/* ── 14. prefers-reduced-motion: alle Transitionen aus ──────── */
@media (prefers-reduced-motion: reduce) {
  .anl-guide-image,
  .anl-guide-image:hover,
  .anl-step,
  .anl-step:hover,
  .anl-trouble-card,
  .anl-trouble-card:hover,
  .anl-tip-card,
  .anl-tip-number,
  #anl-erfahrungen .box-review-card {
    transform: none !important;
    transition: background 0.01s, border-color 0.01s !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ERFAHRUNGEN — /erfahrungen/
   Phase 1: Hero (S1) + Summary Box (S2) + Methodik (S3)
   Prefix: .erf-*
   ══════════════════════════════════════════════════════════════ */

/* ── S1 · Hero ──────────────────────────────────────────────── */
.erf-hero { background: var(--bg); }

/* Rating Badge — above fold, Trust Signal (CORE-EEAT T) */
.erf-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(232,0,61,0.08);
  border: 1px solid rgba(232,0,61,0.22);
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.3;
}

.erf-rating-badge strong {
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Direct Answer Box — GEO C02 */
.erf-direct-answer {
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 22px;
  margin: 20px 0;
}

.erf-direct-answer p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

/* Trust Chips */
.erf-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.erf-trust-chips span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* Mobile: hero image sichtbar auf erf-Seite */
@media (max-width: 900px) {
  .erf-hero .hero-image { display: block; }
  .erf-hero .hero-inner { gap: 32px; }
  .erf-hero .hero-image img { max-height: 280px; object-fit: cover; }
}

/* ── S2 · Summary Box ───────────────────────────────────────── */
.erf-summary-section { background: var(--surface); }

.erf-summary-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}

.erf-summary-box {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 32px;
}

.erf-summary-box h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 22px;
  padding-left: 16px;
  border-left: 3px solid var(--primary);
  line-height: 1.3;
}

.erf-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.erf-summary-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  transition: border-color 0.18s;
}

.erf-summary-list li:hover { border-color: rgba(232,0,61,0.25); }

.erf-summary-list li::before {
  content: '\2713';
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}

.erf-summary-list strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.erf-summary-list span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── S3 · Methodik ──────────────────────────────────────────── */
.erf-methodik-section { background: var(--bg); }

.erf-methodik-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: start;
  margin-bottom: 44px;
}

.erf-methodik-intro {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--text-muted);
  margin: 0;
}

/* Data Table — GEO O03 */
.erf-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.erf-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}

.erf-data-table caption {
  font-size: 11px;
  color: var(--text-dim);
  text-align: left;
  padding: 0 0 8px;
  caption-side: top;
}

.erf-data-table thead th {
  background: var(--primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  text-align: left;
}

.erf-data-table tbody tr {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.15s;
}

.erf-data-table tbody tr:nth-child(even) { background: var(--surface-2); }
.erf-data-table tbody tr:last-child { border-bottom: none; }
.erf-data-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.erf-data-table tbody td {
  padding: 13px 16px;
  color: var(--text-muted);
  line-height: 1.5;
  vertical-align: middle;
}

.erf-data-table tbody td:first-child {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.erf-td-note {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}

/* Section image — reused S2, S3 + folgende Phasen */
.erf-section-image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.erf-section-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.erf-section-image-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(10,10,15,0.85);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-md);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── ERF Phase 1 Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .erf-summary-inner  { grid-template-columns: 1fr; gap: 28px; }
  .erf-methodik-inner { grid-template-columns: 1fr; gap: 24px; }
  .erf-methodik-inner > .erf-section-image { order: -1; }
}

@media (max-width: 768px) {
  .erf-summary-box { padding: 24px; }
  .erf-summary-box h2 { font-size: 18px; margin-bottom: 18px; }
  .erf-summary-list li { padding: 10px 12px; }
  .erf-data-table tbody td,
  .erf-data-table thead th { padding: 11px 12px; }
}

@media (max-width: 640px) {
  .erf-rating-badge { font-size: 13px; padding: 7px 14px; gap: 8px; }
  .erf-rating-badge strong { font-size: 18px; }
  .erf-direct-answer { padding: 14px 16px; }
  .erf-direct-answer p { font-size: 14px; }
  .erf-trust-chips span { font-size: 11px; padding: 4px 10px; }
  .erf-summary-box { padding: 18px 16px; }
  .erf-summary-box h2 { font-size: 16px; margin-bottom: 14px; }
  .erf-summary-list li { padding: 9px 10px; gap: 8px; }
  .erf-summary-list strong { font-size: 12.5px; }
  .erf-summary-list span { font-size: 12.5px; }
  .erf-methodik-intro { font-size: 14.5px; }
  .erf-data-table { font-size: 13px; min-width: 440px; }
  .erf-data-table thead th { font-size: 11px; padding: 10px 10px; }
  .erf-data-table tbody td { padding: 10px 10px; }
}

@media (max-width: 480px) {
  .erf-summary-box { padding: 16px 14px; }
  .erf-summary-list { gap: 8px; }
  .erf-summary-list li { padding: 8px 10px; gap: 8px; }
  .erf-data-table { min-width: 380px; }
  .erf-data-table tbody td { padding: 9px 8px; font-size: 12.5px; }
  .erf-section-image-badge { font-size: 11px; padding: 6px 10px; }
}

@media (max-width: 360px) {
  .erf-rating-badge { font-size: 12px; padding: 6px 12px; gap: 7px; }
  .erf-rating-badge strong { font-size: 16px; }
  .erf-direct-answer { padding: 12px 14px; }
  .erf-direct-answer p { font-size: 13.5px; }
  .erf-summary-box h2 { font-size: 15px; }
  .erf-summary-list strong { font-size: 12px; }
  .erf-summary-list span { font-size: 12px; }
  .erf-methodik-intro { font-size: 14px; }
  .erf-data-table { min-width: 360px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════
   Phase 2 — erfahrungen.php · S4 Bildqualität + S5 Apps + S6 Bewertungen
   ═══════════════════════════════════════════════════════ */

/* S4 · Uptime Stats Row */
.erf-uptime-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.erf-uptime-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.erf-uptime-stat strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.erf-uptime-stat span {
  font-size: 12px;
  color: var(--text-muted);
}

/* S5 · App Erfahrungen */
.erf-apps-inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}
.erf-apps-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.erf-app-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  transition: border-color 0.2s;
}
.erf-app-card:hover {
  border-color: var(--border-strong);
}
.erf-app-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.erf-app-icon-box {
  width: 42px;
  height: 42px;
  background: rgba(232,0,61,0.10);
  border: 1px solid rgba(232,0,61,0.22);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.erf-app-card-header > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.erf-app-card-header strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.erf-app-rating {
  font-size: 12px;
  color: #f59e0b;
}
.erf-app-card > p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 14px;
}
.erf-app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.erf-app-tags span {
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
}
.erf-apps-cta-text {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* S6 · Bewertungen — AggregateRating + Review Cards */
.erf-aggregate-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 36px;
  margin-bottom: 48px;
}
.erf-aggregate-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.erf-aggregate-score > strong {
  font-size: 52px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}
.erf-aggregate-score .box-stars {
  font-size: 20px;
  color: #f59e0b;
  letter-spacing: 2px;
}
.erf-aggregate-score > span {
  font-size: 13px;
  color: var(--text-muted);
}
.erf-aggregate-breakdown {
  flex: 1;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.erf-rating-bar {
  display: grid;
  grid-template-columns: 32px 1fr 36px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.erf-bar-track {
  height: 7px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.erf-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
}
.erf-bar-fill.erf-bar-low {
  background: rgba(255,255,255,0.15);
}
.erf-bewertungen-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
}
.erf-review-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── ERF Phase 2 Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .erf-apps-inner        { grid-template-columns: 1fr; gap: 32px; }
  .erf-bewertungen-inner { grid-template-columns: 1fr; gap: 32px; }
  .erf-aggregate-badge   { flex-direction: column; gap: 24px; padding: 24px 20px; }
  .erf-aggregate-breakdown { max-width: 100%; }
  .erf-uptime-stats      { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .erf-uptime-stat strong       { font-size: 20px; }
  .erf-aggregate-score > strong { font-size: 44px; }
  .erf-app-card                 { padding: 16px; }
  .erf-aggregate-badge          { padding: 20px 18px; }
}
@media (max-width: 640px) {
  .erf-uptime-stats             { gap: 12px; }
  .erf-uptime-stat              { padding: 14px 12px; }
  .erf-uptime-stat strong       { font-size: 18px; }
  .erf-aggregate-score > strong { font-size: 38px; }
  .erf-aggregate-badge          { padding: 18px 14px; }
}
@media (max-width: 480px) {
  .erf-uptime-stats             { gap: 10px; }
  .erf-uptime-stat              { padding: 12px 10px; }
  .erf-uptime-stat strong       { font-size: 16px; }
  .erf-aggregate-score > strong { font-size: 34px; }
  .erf-aggregate-badge          { gap: 18px; padding: 16px 12px; }
  .erf-app-card                 { padding: 14px; }
}
@media (max-width: 360px) {
  .erf-uptime-stat strong       { font-size: 15px; }
  .erf-app-card-header          { gap: 10px; }
  .erf-app-icon-box             { width: 36px; height: 36px; font-size: 11px; }
  .erf-aggregate-score > strong { font-size: 30px; }
}

/* ═══════════════════════════════════════════════════════
   Phase 3 — erfahrungen.php · S7 Vergleich + S8 Preise + S9 Support
   ═══════════════════════════════════════════════════════ */

/* S7 · Vergleichstabelle — TV Schweiz Spalte hervorheben */
.erf-compare-table { min-width: 620px; }
.erf-compare-table thead { background: var(--surface-2); }
.erf-compare-table thead th { color: var(--text-muted); font-size: 13px; }
.erf-compare-table thead th.erf-col-best {
  background: var(--primary);
  color: #fff;
}
.erf-compare-table td.erf-col-best {
  background: rgba(232,0,61,0.05);
}
.erf-td-check  { color: #22c55e; font-weight: 600; }
.erf-td-partial { color: #f59e0b; font-weight: 600; }
.erf-td-cross  { color: var(--text-dim); }
.erf-vergleich-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.6;
}

/* S8 · Preisleistung — 4 Abo-Cards */
.erf-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}
.erf-pricing-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.erf-pricing-card.erf-pricing-best {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
}
.erf-pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.4px;
}
.erf-pricing-header strong {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.erf-pricing-price {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.erf-pricing-price > strong {
  font-size: 28px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}
.erf-pricing-price > span {
  font-size: 13px;
  color: var(--text-muted);
}
.erf-pricing-price > small {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 4px;
}
.erf-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.erf-pricing-features li {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
  line-height: 1.4;
}
.erf-pricing-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
.erf-pricing-card .btn {
  text-align: center;
  display: block;
  font-size: 13px;
  padding: 10px 16px;
}
.erf-pricing-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.65;
}

/* ── ERF Phase 3 Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .erf-pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
  .erf-pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .erf-pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .erf-pricing-card { padding: 24px 16px 20px; }
  .erf-pricing-price > strong { font-size: 24px; }
}
@media (max-width: 480px) {
  .erf-pricing-card { padding: 22px 14px 18px; gap: 14px; }
}
@media (max-width: 360px) {
  .erf-pricing-price > strong { font-size: 22px; }
  .erf-pricing-header strong  { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════
   Phase 4 — erfahrungen.php · S10 Pros/Cons + S11 Zielgruppe + S12 Fazit
   ═══════════════════════════════════════════════════════ */

/* S10 · Vor-/Nachteile */
.erf-proscons-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.erf-pros-col,
.erf-cons-col {
  border-radius: 16px;
  padding: 28px 24px;
}
.erf-pros-col {
  background: rgba(34,197,94,0.05);
  border: 1px solid rgba(34,197,94,0.18);
}
.erf-cons-col {
  background: rgba(245,158,11,0.05);
  border: 1px solid rgba(245,158,11,0.18);
}
.erf-proscons-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.erf-proscons-header strong {
  font-size: 16px;
  font-weight: 800;
}
.erf-pros-col .erf-proscons-header strong { color: #22c55e; }
.erf-cons-col .erf-proscons-header strong { color: #f59e0b; }
.erf-proscons-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.erf-pros-col .erf-proscons-icon { background: rgba(34,197,94,0.14); color: #22c55e; }
.erf-cons-col .erf-proscons-icon { background: rgba(245,158,11,0.14); color: #f59e0b; }
.erf-proscons-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.erf-proscons-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}
.erf-proscons-item::before {
  font-size: 14px;
  font-weight: 800;
  padding-top: 1px;
}
.erf-pros-item::before { content: '\2713'; color: #22c55e; }
.erf-cons-item::before { content: '\2212'; color: #f59e0b; }
.erf-proscons-item > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.erf-proscons-item > span strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.erf-proscons-item > span {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* S11 · Zielgruppe Cards */
.erf-zielgruppe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.erf-zielgruppe-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}
.erf-zielgruppe-card:hover { border-color: var(--border-strong); }
.erf-zg-icon-box {
  width: 46px;
  height: 46px;
  background: rgba(232,0,61,0.10);
  border: 1px solid rgba(232,0,61,0.20);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  flex-shrink: 0;
}
.erf-zg-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.erf-zielgruppe-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}
.erf-zielgruppe-card .abo-inline-link { font-size: 13px; }

/* S12 · Fazit — Verdict + Rating */
.erf-fazit-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}
.erf-fazit-verdict {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.erf-fazit-verdict h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.erf-fazit-verdict > p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}
.erf-verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,0,61,0.08);
  border: 1px solid rgba(232,0,61,0.22);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  width: fit-content;
  line-height: 1.4;
}
.erf-fazit-rating-box {
  background: var(--surface-2);
  border: 1px solid var(--primary);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-primary);
  position: sticky;
  top: 20px;
}
.erf-fazit-score {
  font-size: 64px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}
.erf-fazit-rating-box .box-stars {
  font-size: 22px;
  color: #f59e0b;
  letter-spacing: 3px;
}
.erf-fazit-label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* S12 · Second Summary Box (GEO O02) */
.erf-fazit-summary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0 14px 14px 0;
  padding: 28px 32px;
}
.erf-fazit-summary > h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 18px;
}
.erf-fazit-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.erf-fazit-summary-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
}
.erf-fazit-summary-list li::before {
  content: '\2713';
  color: var(--primary);
  font-weight: 700;
  padding-top: 2px;
}
.erf-fazit-cta {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── ERF Phase 4 Responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .erf-zielgruppe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .erf-fazit-inner       { grid-template-columns: 1fr; gap: 28px; }
  .erf-fazit-rating-box  { position: static; }
  .erf-fazit-score       { font-size: 52px; }
}
@media (max-width: 768px) {
  .erf-proscons-inner    { grid-template-columns: 1fr; gap: 18px; }
  .erf-pros-col,
  .erf-cons-col          { padding: 22px 18px; }
  .erf-fazit-summary     { padding: 22px 20px; }
  .erf-fazit-verdict h3  { font-size: 17px; }
}
@media (max-width: 640px) {
  .erf-zielgruppe-grid   { grid-template-columns: 1fr; gap: 12px; }
  .erf-zielgruppe-card   { padding: 18px 16px; }
  .erf-fazit-summary     { padding: 18px 16px; }
  .erf-fazit-verdict > p { font-size: 14px; }
}
@media (max-width: 480px) {
  .erf-pros-col,
  .erf-cons-col          { padding: 18px 14px; }
  .erf-fazit-score       { font-size: 44px; }
  .erf-fazit-cta         { flex-direction: column; }
  .erf-fazit-cta .btn    { text-align: center; }
}
@media (max-width: 360px) {
  .erf-proscons-item > span { font-size: 13px; }
  .erf-proscons-item > span strong { font-size: 13px; }
  .erf-fazit-score       { font-size: 38px; }
  .erf-verdict-badge     { font-size: 12.5px; padding: 9px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 5 / Final CSS — erfahrungen.php · Global Responsive Cleanup
   Breakpoints: 768 / 640 / 480 / 360 + prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── prefers-reduced-motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .erf-app-card,
  .erf-zielgruppe-card,
  .erf-bar-fill,
  .box-faq-item,
  .erf-pricing-card,
  .erf-section-image,
  .btn { transition: none !important; animation: none !important; }
}

/* ── Final 768px ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .anl-section-header h2   { font-size: 20px; }
  .anl-section-header p    { font-size: 14px; }
  .erf-methodik-intro      { font-size: 15px; }
  .erf-vergleich-note      { font-size: 12px; }
  .erf-apps-cta-text       { font-size: 14px; }
}

/* ── Final 640px ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .anl-section-header h2   { font-size: 18px; }
  .erf-apps-cta-text       { font-size: 13.5px; }
  .erf-methodik-intro      { font-size: 14.5px; }
  .erf-vergleich-note      { font-size: 12px; }
}

/* ── Final 480px ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .anl-section-header h2   { font-size: 17px; }
  .anl-section-header p    { font-size: 13.5px; }
  .erf-direct-answer       { padding: 13px 14px; }
  .erf-trust-chips span    { font-size: 10.5px; padding: 4px 9px; }
  .erf-methodik-intro      { font-size: 14px; }
  .abo-cta-trust span      { font-size: 12px; }
}

/* ── Final 360px ────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .anl-section-header h2   { font-size: 15.5px; line-height: 1.3; }
  .anl-section-header p    { font-size: 13px; }
  .erf-methodik-intro      { font-size: 13.5px; }
  .erf-section-image-badge { font-size: 10.5px; padding: 5px 9px; }
  .erf-vergleich-note      { font-size: 11px; }
  .erf-fazit-summary > h3  { font-size: 14px; }
  .erf-fazit-summary-list li { font-size: 13px; }
  .erf-zg-title            { font-size: 14px; }
  .erf-zielgruppe-card p   { font-size: 13px; }
  .erf-direct-answer       { padding: 12px 12px; }
  .abo-cta-trust span      { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ERFAHRUNGEN — Luxury Refinements
   Pure CSS overrides — keine HTML-Änderungen — 21 Verfeinerungen — 2026
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero — Ambient Orbs (floating light) ───────────────────────── */
.erf-hero {
  position: relative;
  overflow: hidden;
}
.erf-hero::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,0,61,0.11) 0%, transparent 68%);
  top: -240px; right: -180px;
  pointer-events: none;
  animation: erf-orb 14s ease-in-out infinite alternate;
}
.erf-hero::after {
  content: '';
  position: absolute;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,0,61,0.07) 0%, transparent 68%);
  bottom: -120px; left: -100px;
  pointer-events: none;
  animation: erf-orb 18s ease-in-out infinite alternate-reverse;
}
@keyframes erf-orb {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(22px,16px) scale(1.06); }
}

/* ── 2. Rating Badge — pulsing border glow + gradient score ────────── */
.erf-rating-badge {
  box-shadow:
    0 0 0 1px rgba(232,0,61,0.22),
    0 0 26px rgba(232,0,61,0.16),
    0 4px 18px rgba(0,0,0,0.45);
  animation: erf-badge-pulse 3.5s ease-in-out infinite;
}
@keyframes erf-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232,0,61,0.22), 0 0 26px rgba(232,0,61,0.16), 0 4px 18px rgba(0,0,0,0.45); }
  50%       { box-shadow: 0 0 0 1px rgba(232,0,61,0.38), 0 0 40px rgba(232,0,61,0.30), 0 4px 18px rgba(0,0,0,0.45); }
}
.erf-rating-badge strong {
  background: linear-gradient(135deg, #fff 55%, rgba(232,0,61,0.88) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 3. Direct Answer Box — glass + top shimmer line ───────────────── */
.erf-direct-answer {
  position: relative;
  box-shadow:
    inset 0 0 0 1000px rgba(232,0,61,0.025),
    0 0 0 1px rgba(232,0,61,0.10),
    0 6px 24px rgba(0,0,0,0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.erf-direct-answer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--primary) 0%, rgba(232,0,61,0.30) 60%, transparent 100%);
  opacity: 0.65;
}

/* ── 4. Trust Chips — hover glow + lift ────────────────────────────── */
.erf-trust-chips span {
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.15s ease;
}
.erf-trust-chips span:hover {
  background: rgba(232,0,61,0.14);
  color: var(--text);
  box-shadow: 0 0 14px rgba(232,0,61,0.28);
  transform: translateY(-1px);
  border-color: rgba(232,0,61,0.30);
}

/* ── 5. Hero Image — deep shadow + hover lift + scrim ──────────────── */
.erf-hero .hero-image img {
  box-shadow:
    0 20px 64px rgba(0,0,0,0.68),
    0 0 0 1px rgba(232,0,61,0.08),
    0 0 48px rgba(232,0,61,0.06);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  border-radius: var(--r-md);
  will-change: transform;
}
.erf-hero .hero-image img:hover {
  box-shadow:
    0 28px 80px rgba(0,0,0,0.72),
    0 0 0 1px rgba(232,0,61,0.18),
    0 0 64px rgba(232,0,61,0.13);
  transform: translateY(-4px);
}
.erf-hero .hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,15,0.30) 0%, transparent 42%);
  pointer-events: none;
  border-radius: var(--r-md);
}

/* ── 6. Section Images — hover shadow upgrade + gradient scrim ─────── */
.erf-section-image img {
  box-shadow:
    0 14px 48px rgba(0,0,0,0.58),
    0 0 0 1px rgba(232,0,61,0.07);
  transition: box-shadow 0.32s ease, transform 0.32s ease;
  will-change: transform;
}
.erf-section-image img:hover {
  box-shadow:
    0 22px 68px rgba(0,0,0,0.65),
    0 0 0 1px rgba(232,0,61,0.17),
    0 0 52px rgba(232,0,61,0.10);
  transform: translateY(-3px);
}
.erf-section-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,15,0.26) 0%, transparent 42%);
  pointer-events: none;
  border-radius: var(--r-lg);
}

/* ── 7. Summary Box — gradient bg + top accent line ────────────────── */
.erf-summary-box {
  background: linear-gradient(155deg, rgba(232,0,61,0.055) 0%, var(--surface-2) 52%);
  box-shadow: 0 0 0 1px rgba(232,0,61,0.09), 0 10px 44px rgba(0,0,0,0.38);
  position: relative;
}
.erf-summary-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--primary), rgba(232,0,61,0.25), transparent);
}
.erf-summary-list li {
  transition: background 0.18s ease, padding-left 0.16s ease;
  border-radius: var(--r-sm);
}
.erf-summary-list li:hover {
  background: rgba(232,0,61,0.045);
  padding-left: 4px;
}

/* ── 8. Uptime Stats — hover gradient + gradient stat numbers ──────── */
.erf-uptime-stat {
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.2s ease;
}
.erf-uptime-stat:hover {
  background: linear-gradient(155deg, rgba(232,0,61,0.10) 0%, var(--surface-2) 100%);
  box-shadow: 0 0 0 1px rgba(232,0,61,0.16), 0 6px 26px rgba(0,0,0,0.42);
  transform: translateY(-2px);
}
.erf-uptime-stat strong {
  background: linear-gradient(135deg, #ffffff 45%, rgba(232,0,61,0.82) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 9. App Cards — full hover + icon box glow ─────────────────────── */
.erf-app-card {
  transition: border-color 0.22s ease, box-shadow 0.22s ease,
              transform 0.20s ease, background 0.22s ease;
}
.erf-app-card:hover {
  border-color: rgba(232,0,61,0.30);
  box-shadow: 0 10px 40px rgba(0,0,0,0.52), 0 0 0 1px rgba(232,0,61,0.12);
  transform: translateY(-3px);
  background: linear-gradient(160deg, rgba(232,0,61,0.05) 0%, var(--surface-2) 100%);
}
.erf-app-icon-box {
  box-shadow: 0 0 14px rgba(232,0,61,0.28), 0 2px 8px rgba(0,0,0,0.38);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.erf-app-card:hover .erf-app-icon-box {
  box-shadow: 0 0 24px rgba(232,0,61,0.48), 0 2px 8px rgba(0,0,0,0.38);
  transform: scale(1.08);
}
.erf-app-rating {
  filter: drop-shadow(0 0 5px rgba(245,158,11,0.50));
}

/* ── 10. Review Cards (S6) — gradient bg + hover lift + star glow ──── */
#erf-bewertungen .box-review-card {
  background: linear-gradient(148deg, rgba(232,0,61,0.048) 0%, var(--surface-2) 100%);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.2s ease;
}
#erf-bewertungen .box-review-card:hover {
  border-color: rgba(232,0,61,0.28);
  box-shadow: 0 10px 44px rgba(0,0,0,0.52);
  transform: translateY(-3px);
}
#erf-bewertungen .box-stars {
  filter: drop-shadow(0 0 7px rgba(255,190,0,0.55));
}

/* ── 11. Aggregate Badge — glow border + big-score gradient ────────── */
.erf-aggregate-badge {
  box-shadow:
    0 0 0 1px rgba(232,0,61,0.12),
    0 0 32px rgba(232,0,61,0.09),
    0 10px 40px rgba(0,0,0,0.42);
}
.erf-aggregate-score > strong {
  background: linear-gradient(135deg, #fff 40%, rgba(232,0,61,0.88) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.erf-aggregate-score .box-stars {
  filter: drop-shadow(0 0 8px rgba(255,190,0,0.55));
}

/* ── 12. Rating Bars — shimmer on fill (skip low bars) ─────────────── */
.erf-bar-fill:not(.erf-bar-low) {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(232,0,61,0.38);
}
.erf-bar-fill:not(.erf-bar-low)::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  animation: erf-shimmer 2.6s ease-in-out infinite;
}
@keyframes erf-shimmer {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(280%); }
}

/* ── 13. Compare Table — row hover + check glow + col-best shine ────── */
.erf-compare-table tbody tr {
  transition: background 0.16s ease;
}
.erf-compare-table tbody tr:hover {
  background: rgba(232,0,61,0.035);
}
.erf-td-check {
  text-shadow: 0 0 10px rgba(34,197,94,0.62);
}
.erf-compare-table thead th.erf-col-best {
  box-shadow: 0 0 24px rgba(232,0,61,0.45);
}

/* ── 14. Pricing Cards — hover lift + best-card pulse + badge glow ──── */
.erf-pricing-card {
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.2s ease;
}
.erf-pricing-card:hover:not(.erf-pricing-best) {
  border-color: rgba(232,0,61,0.24);
  box-shadow: 0 10px 42px rgba(0,0,0,0.52);
  transform: translateY(-3px);
}
.erf-pricing-card.erf-pricing-best {
  animation: erf-best-glow 4.2s ease-in-out infinite;
}
@keyframes erf-best-glow {
  0%, 100% { box-shadow: var(--shadow-primary); }
  50%       { box-shadow: 0 6px 36px rgba(232,0,61,0.52), 0 0 68px rgba(232,0,61,0.16); }
}
.erf-pricing-badge {
  box-shadow: 0 0 20px rgba(232,0,61,0.58), 0 2px 8px rgba(0,0,0,0.40);
  letter-spacing: 0.5px;
}
.erf-pricing-features li::before {
  text-shadow: 0 0 8px rgba(34,197,94,0.52);
}

/* ── 15. Pros / Cons — hover flash + pseudo-icon glows ─────────────── */
.erf-proscons-item {
  transition: background 0.18s ease, padding-left 0.15s ease;
  border-radius: var(--r-sm);
}
.erf-proscons-item:hover {
  background: rgba(255,255,255,0.025);
  padding-left: 4px;
}
.erf-pros-item::before {
  text-shadow: 0 0 10px rgba(34,197,94,0.68);
}
.erf-cons-item::before {
  text-shadow: 0 0 10px rgba(245,158,11,0.58);
}

/* ── 16. Zielgruppe Cards — hover lift + icon box glow ─────────────── */
.erf-zielgruppe-card {
  transition: border-color 0.22s ease, box-shadow 0.22s ease,
              transform 0.20s ease, background 0.22s ease;
}
.erf-zielgruppe-card:hover {
  border-color: rgba(232,0,61,0.28);
  box-shadow: 0 12px 44px rgba(0,0,0,0.52), 0 0 0 1px rgba(232,0,61,0.10);
  transform: translateY(-5px);
  background: linear-gradient(155deg, rgba(232,0,61,0.07) 0%, var(--surface-2) 100%);
}
.erf-zg-icon-box {
  box-shadow: 0 0 18px rgba(232,0,61,0.34), 0 2px 8px rgba(0,0,0,0.42);
  transition: box-shadow 0.25s ease, transform 0.22s ease;
}
.erf-zielgruppe-card:hover .erf-zg-icon-box {
  box-shadow: 0 0 30px rgba(232,0,61,0.58), 0 2px 8px rgba(0,0,0,0.42);
  transform: scale(1.10);
}

/* ── 17. Fazit Rating Box — slow pulse + gradient score ────────────── */
.erf-fazit-rating-box {
  animation: erf-fazit-pulse 4.5s ease-in-out infinite;
}
@keyframes erf-fazit-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232,0,61,0.26), 0 8px 32px rgba(0,0,0,0.42); }
  50%       { box-shadow: 0 0 0 1px rgba(232,0,61,0.44), 0 8px 52px rgba(232,0,61,0.16), 0 0 72px rgba(232,0,61,0.08); }
}
.erf-fazit-score {
  background: linear-gradient(135deg, #ffffff 40%, rgba(232,0,61,0.90) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.erf-verdict-badge {
  box-shadow: 0 0 18px rgba(232,0,61,0.44);
}

/* ── 18. Fazit Summary Box — subtle glow border + check glow ───────── */
.erf-fazit-summary {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.055), 0 8px 36px rgba(0,0,0,0.38);
  position: relative;
}
.erf-fazit-summary::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--primary), rgba(232,0,61,0.20));
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.erf-fazit-summary-list li::before {
  text-shadow: 0 0 10px rgba(34,197,94,0.58);
}

/* ── 19. FAQ — open glow state + tip-box glass ──────────────────────── */
#erf-faq .box-faq-item[open] > .box-faq-q {
  border-bottom: 1px solid rgba(232,0,61,0.22);
  box-shadow: inset 0 0 0 1000px rgba(232,0,61,0.04);
}
#erf-faq .box-tip-box {
  background: linear-gradient(135deg, rgba(232,0,61,0.07) 0%, rgba(28,28,38,0.82) 100%);
  box-shadow: 0 0 0 1px rgba(232,0,61,0.13), 0 6px 24px rgba(0,0,0,0.32);
}

/* ── 20. Section ambient radial glut ───────────────────────────────── */
#erf-methodik,
#erf-apps,
#erf-vergleich,
#erf-vorteile,
#erf-fazit,
#erf-faq {
  background-image: radial-gradient(
    ellipse 86% 44% at 50% 0%,
    rgba(232,0,61,0.036) 0%,
    transparent 66%
  );
}
#erf-bildqualitaet,
#erf-bewertungen,
#erf-preise,
#erf-support,
#erf-zielgruppe {
  background-image: radial-gradient(
    ellipse 80% 38% at 50% 100%,
    rgba(232,0,61,0.028) 0%,
    transparent 66%
  );
}

/* ── 21. prefers-reduced-motion: alle Animationen deaktivieren ──────── */
@media (prefers-reduced-motion: reduce) {
  .erf-hero::before,
  .erf-hero::after               { animation: none !important; }
  .erf-rating-badge              { animation: none !important; }
  .erf-bar-fill:not(.erf-bar-low)::after { animation: none !important; }
  .erf-pricing-card.erf-pricing-best { animation: none !important; }
  .erf-fazit-rating-box          { animation: none !important; }

  .erf-hero .hero-image img,
  .erf-section-image img,
  .erf-app-card,
  .erf-app-icon-box,
  .erf-uptime-stat,
  .erf-zielgruppe-card,
  .erf-zg-icon-box,
  #erf-bewertungen .box-review-card,
  .erf-pricing-card              { transform: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   PAGE-SPECIFIC STYLES — faq.php (tv-schweiz.ch/faq/)
   Phase 2: S1 Hero · S2 Direct Answer · S3 Was ist IPTV
══════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────── */
.faq-breadcrumb {
  padding: 12px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-dim);
}

.breadcrumb-list a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb-list a:hover { color: var(--primary); }
.breadcrumb-list [aria-current="page"] { color: var(--text); }

/* ── S1 · Hero ──────────────────────────────────────────── */
.faq-hero { background: var(--bg); }

.faq-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(232,0,61,0.08);
  border: 1px solid rgba(232,0,61,0.22);
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.3;
}

.faq-rating-badge strong {
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.faq-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.faq-trust-chips span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .faq-hero .hero-image        { display: block; }
  .faq-hero .hero-inner        { gap: 32px; }
  .faq-hero .hero-image img    { max-height: 280px; object-fit: cover; }
}

/* ── S2 · Direct Answer Box ─────────────────────────────── */
.faq-direct-answer-section {
  background: var(--surface);
  padding: 64px 0;
}

.faq-da-inner {
  max-width: 860px;
  margin: 0 auto;
}

.faq-da-box {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 36px 40px;
  position: relative;
}

.faq-da-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
  margin-bottom: 12px;
}

.faq-da-box h2 {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.25;
}

.faq-da-box > p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.faq-da-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.faq-da-fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.faq-da-fact strong {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
}

.faq-da-fact span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* ── S3 · Was ist IPTV ──────────────────────────────────── */
.faq-was-ist-section { background: var(--bg); }

.faq-definition-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 26px 32px;
  margin: 0 auto 36px;
  max-width: 860px;
}

.faq-def-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
  margin-bottom: 10px;
}

.faq-definition-box p:last-child {
  font-size: 16px;
  font-style: italic;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}

.faq-was-ist-text {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 860px;
  margin: 0 auto 40px;
}

.faq-was-ist-text p + p { margin-top: 16px; }

.faq-was-ist-text a.abo-inline-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}
.faq-was-ist-text a.abo-inline-link:hover { opacity: 0.75; }

/* Comparison Table — GEO O03 */
.faq-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto 44px;
  max-width: 860px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.faq-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 540px;
}

.faq-compare-table thead th {
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
}

.faq-compare-table thead th:first-child {
  border-right: 1px solid var(--border);
  color: var(--text-dim);
}

.faq-compare-table thead th.faq-th-best {
  background: rgba(232,0,61,0.08);
  border-top: 2px solid var(--primary);
  color: var(--primary);
}

.faq-compare-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.faq-compare-table tbody tr:last-child { border-bottom: none; }
.faq-compare-table tbody tr:hover { background: rgba(255,255,255,0.02); }

.faq-compare-table tbody td {
  padding: 13px 18px;
  color: var(--text-muted);
  font-size: 14px;
  vertical-align: middle;
}

.faq-compare-table tbody td:first-child {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
}

.faq-compare-table tbody td.faq-td-best {
  background: rgba(232,0,61,0.03);
  color: var(--text);
  font-weight: 500;
}

.faq-td-check { color: #22c55e; font-weight: 700; }
.faq-td-cross { color: var(--text-dim); }

/* Stat Chips */
.faq-stat-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.faq-stat-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 20px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}

.faq-stat-chip:hover {
  border-color: rgba(232,0,61,0.30);
  transform: translateY(-2px);
}

.faq-stat-chip strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
  margin-bottom: 5px;
  line-height: 1.1;
}

.faq-stat-chip span {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Phase 2 Responsive — Mobile-First ──────────────────── */
@media (max-width: 900px) {
  .faq-da-facts   { grid-template-columns: repeat(2, 1fr); }
  .faq-stat-chips { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .faq-direct-answer-section { padding: 48px 0; }
  .faq-da-box  { padding: 28px 24px; }
  .faq-da-box h2 { font-size: 20px; }
  .faq-da-box > p { font-size: 15px; }
  .faq-definition-box { padding: 20px 22px; }
  .faq-stat-chip { padding: 18px 16px; }
  .faq-stat-chip strong { font-size: 22px; }
}

@media (max-width: 640px) {
  .faq-rating-badge         { font-size: 13px; padding: 7px 14px; gap: 8px; }
  .faq-rating-badge strong  { font-size: 18px; }
  .faq-trust-chips span     { font-size: 11px; padding: 4px 10px; }
  .faq-da-box               { padding: 22px 18px; }
  .faq-da-facts             { grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 18px; }
  .faq-da-fact strong       { font-size: 10px; }
  .faq-da-fact span         { font-size: 13px; }
  .faq-definition-box       { padding: 16px 18px; }
  .faq-definition-box p:last-child { font-size: 15px; }
  .faq-was-ist-text         { font-size: 14.5px; }
  .faq-stat-chips           { grid-template-columns: 1fr 1fr; gap: 12px; }
  .faq-stat-chip            { padding: 16px 14px; }
  .faq-stat-chip strong     { font-size: 20px; }
  .faq-stat-chip span       { font-size: 12px; }
}

@media (max-width: 480px) {
  .faq-da-box               { padding: 18px 14px; }
  .faq-da-facts             { grid-template-columns: 1fr 1fr; gap: 10px; }
  .faq-definition-box       { padding: 14px 14px; }
  .faq-compare-table        { font-size: 13px; min-width: 460px; }
  .faq-compare-table thead th  { padding: 11px 12px; font-size: 11px; }
  .faq-compare-table tbody td  { padding: 11px 12px; font-size: 13px; }
  .faq-stat-chip strong     { font-size: 19px; }
}

@media (max-width: 360px) {
  .faq-da-facts             { grid-template-columns: 1fr; }
  .faq-stat-chips           { grid-template-columns: 1fr 1fr; gap: 8px; }
  .faq-compare-table        { min-width: 400px; }
  .faq-trust-chips span     { font-size: 10.5px; padding: 4px 9px; }
  .faq-stat-chip            { padding: 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-stat-chip            { transform: none !important; transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   FAQ Phase 3 — S4 Gesetz + S5 Legale Anbieter
   ══════════════════════════════════════════════════════════════ */

/* ── S4 · Gesetz & Recht ─────────────────────────────────────── */
.faq-gesetz-section { background: var(--bg); }

.faq-gesetz-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}

.faq-gesetz-text p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.faq-gesetz-text p strong { color: var(--text); }

/* GEO O02: Summary Box — legales IPTV Schweiz Kriterien */
.faq-law-box {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 4px solid #22c55e;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 24px 28px;
  margin-top: 8px;
}

.faq-law-box-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.faq-law-criteria {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 0;
}

.faq-law-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
}

.faq-law-item::before {
  content: '✓';
  color: #22c55e;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.faq-law-item strong { color: var(--text); }

.faq-law-note {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.faq-law-note a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.faq-law-note a:hover { text-decoration: underline; }

/* Section image — reused by S4 + S5 */
.faq-section-image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  align-self: start;
}

.faq-section-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  transition: transform 0.4s ease;
}

.faq-section-image:hover img { transform: scale(1.02); }

.faq-section-image-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(10, 10, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-md);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.faq-section-image-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  flex-shrink: 0;
}

/* ── S5 · Legale Anbieter ────────────────────────────────────── */
.faq-anbieter-section { background: var(--surface); }

.faq-anbieter-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: center;
  margin-bottom: 48px;
}

.faq-anbieter-text p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.faq-anbieter-text p:last-child { margin-bottom: 0; }
.faq-anbieter-text strong { color: var(--text); }

/* Legal vs Illegal Comparison Table — GEO O03 */
.faq-anbieter-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-bottom: 28px;
}

.faq-anbieter-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 540px;
}

.faq-anbieter-table thead th {
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
}

.faq-anbieter-table thead th:first-child {
  background: var(--surface-2);
  color: var(--text-dim);
  border-right: 1px solid var(--border);
  min-width: 130px;
}

.faq-anbieter-table thead .faq-th-legal {
  background: rgba(34, 197, 94, 0.06);
  border-top: 2px solid #22c55e;
  color: #22c55e;
}

.faq-anbieter-table thead .faq-th-illegal {
  background: rgba(232, 0, 61, 0.04);
  border-top: 2px solid rgba(232, 0, 61, 0.40);
  color: rgba(232, 0, 61, 0.75);
}

.faq-anbieter-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.faq-anbieter-table tbody tr:last-child { border-bottom: none; }
.faq-anbieter-table tbody tr:hover      { background: rgba(255, 255, 255, 0.02); }

.faq-anbieter-table tbody td {
  padding: 13px 18px;
  font-size: 14px;
  color: var(--text-muted);
  vertical-align: middle;
}

.faq-anbieter-table tbody td:first-child {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}

.faq-anbieter-table tbody td.faq-cell-legal {
  background: rgba(34, 197, 94, 0.04);
  color: var(--text);
}

.faq-anbieter-table tbody td.faq-cell-illegal {
  color: var(--text-dim);
}

.faq-tag-legal  { color: #22c55e; font-weight: 700; margin-right: 4px; }
.faq-tag-illegal { color: rgba(232, 0, 61, 0.75); font-weight: 700; margin-right: 4px; }

.faq-anbieter-note {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  margin: 0;
}

.faq-anbieter-note a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.faq-anbieter-note a:hover { text-decoration: underline; }

/* ── Phase 3 Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .faq-gesetz-inner   { grid-template-columns: 1fr; gap: 32px; }
  .faq-anbieter-inner { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
  /* image stacks above text on mobile for S4 */
  .faq-gesetz-inner .faq-section-image { order: -1; max-width: 480px; }
}

@media (max-width: 768px) {
  .faq-law-box        { padding: 20px 20px; }
  .faq-law-box-title  { font-size: 14.5px; }
}

@media (max-width: 640px) {
  .faq-gesetz-text p        { font-size: 14.5px; }
  .faq-anbieter-text p      { font-size: 14.5px; }
  .faq-law-item             { font-size: 13.5px; }
  .faq-law-box              { padding: 16px 16px; }
  .faq-anbieter-table       { font-size: 13px; min-width: 460px; }
  .faq-anbieter-table thead th { padding: 11px 12px; font-size: 11px; }
  .faq-anbieter-table tbody td { padding: 11px 12px; font-size: 13px; }
  .faq-section-image-badge  { font-size: 11px; padding: 6px 10px; }
}

@media (max-width: 480px) {
  .faq-law-box-title        { font-size: 14px; }
  .faq-anbieter-table       { min-width: 380px; }
  .faq-anbieter-table tbody td:first-child { white-space: normal; }
}

@media (max-width: 360px) {
  .faq-law-item             { font-size: 13px; gap: 8px; }
  .faq-anbieter-table       { min-width: 340px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-section-image img    { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   FAQ Phase 4 — S6 Einrichten + S7 Smarters Pro + S8 Account
   ══════════════════════════════════════════════════════════════ */

/* ── S6 · IPTV Einrichten ─────────────────────────────────────── */
.faq-einrichten-section { background: var(--bg); }

.faq-einrichten-intro {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 760px;
  margin-bottom: 36px;
}

.faq-einrichten-intro strong { color: var(--text); }

/* Platform Tab Bar */
.faq-platform-tabs { margin-bottom: 48px; }

.faq-et-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 28px;
  scrollbar-width: none;
}

.faq-et-bar::-webkit-scrollbar { display: none; }

.faq-et-tab {
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.faq-et-tab:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
}

.faq-et-tab--active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.faq-et-tab--active:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}

/* Tab Panels */
.faq-et-panel { display: none; }
.faq-et-panel--active { display: block; }

.faq-et-subtitle {
  font-size: 13.5px;
  color: var(--text-dim);
  margin-bottom: 28px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.faq-et-subtitle strong { color: var(--text-muted); }

/* Numbered Steps */
.faq-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.faq-step:last-child { border-bottom: none; }

.faq-step-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  min-width: 42px;
  flex-shrink: 0;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.faq-step-body { flex: 1; min-width: 0; }

.faq-step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}

.faq-step-body p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

.faq-step-body p strong { color: var(--text); }

.faq-step-body p a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.faq-step-body p a:hover { text-decoration: underline; }

/* 2 Images below tabs */
.faq-einrichten-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}

.faq-einrichten-img-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.faq-einrichten-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
}

.faq-einrichten-img-label {
  display: block;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ── S7 · IPTV Smarters Pro ───────────────────────────────────── */
.faq-smarters-section { background: var(--surface); }

.faq-smarters-inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}

.faq-smarters-text p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0;
}

.faq-smarters-text p strong { color: var(--text); }

/* App Comparison Table */
.faq-app-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.faq-app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.faq-app-table thead th {
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-dim);
}

.faq-app-table thead th:first-child {
  min-width: 160px;
  border-right: 1px solid var(--border);
}

.faq-app-table thead .faq-app-th-smarters {
  background: rgba(232, 0, 61, 0.06);
  border-top: 2px solid var(--primary);
  color: var(--primary);
}

.faq-app-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.faq-app-table tbody tr:last-child { border-bottom: none; }
.faq-app-table tbody tr:hover      { background: rgba(255,255,255,0.02); }

.faq-app-table tbody td {
  padding: 11px 16px;
  font-size: 14px;
  color: var(--text-muted);
  vertical-align: middle;
}

.faq-app-table tbody td:first-child {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}

.faq-app-td-smarters  { background: rgba(232, 0, 61, 0.04); }

.faq-app-check { color: #22c55e; font-weight: 700; font-size: 15px; }
.faq-app-cross { color: var(--text-dim); font-size: 15px; }

.faq-smarters-note {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
}

.faq-smarters-note a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.faq-smarters-note a:hover { text-decoration: underline; }

/* ── S8 · IPTV Account Kaufen ─────────────────────────────────── */
.faq-account-section { background: var(--bg); }

.faq-account-intro {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 820px;
  margin-bottom: 36px;
}

.faq-account-intro strong { color: var(--text); }

/* Pricing Table */
.faq-pricing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-bottom: 36px;
}

.faq-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 620px;
}

.faq-pricing-table thead th {
  padding: 14px 16px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-dim);
}

.faq-pricing-table thead th:first-child {
  text-align: left;
  min-width: 160px;
  border-right: 1px solid var(--border);
}

.faq-pricing-table thead .faq-pt-col-featured {
  background: rgba(34, 197, 94, 0.07);
  border-top: 2px solid #22c55e;
  color: #22c55e;
}

.faq-pricing-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.faq-pricing-table tbody tr:last-child { border-bottom: none; }
.faq-pricing-table tbody tr:hover      { background: rgba(255,255,255,0.02); }

.faq-pricing-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  vertical-align: middle;
}

.faq-pricing-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}

.faq-pricing-table tbody .faq-pt-col-featured {
  background: rgba(34, 197, 94, 0.04);
  color: var(--text);
  font-weight: 600;
}

.faq-pt-price-row td { font-size: 15px; font-weight: 700; color: var(--text); }
.faq-pt-price-row .faq-pt-col-featured { color: #22c55e; }

.faq-pt-muted  { font-size: 12.5px; color: var(--text-dim); font-weight: 400; }
.faq-pt-check  { color: #22c55e; font-weight: 700; font-size: 15px; }
.faq-pt-cross  { color: var(--text-dim); font-size: 15px; }

/* CTA below pricing table */
.faq-account-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.faq-account-cta-note {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

/* ── Phase 4 Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .faq-smarters-inner      { grid-template-columns: 1fr; gap: 32px; }
  .faq-einrichten-images   { gap: 14px; }
}

@media (max-width: 768px) {
  .faq-einrichten-intro    { font-size: 14.5px; }
  .faq-account-intro       { font-size: 14.5px; }
  .faq-step-num            { font-size: 24px; min-width: 36px; }
  .faq-step-title          { font-size: 14.5px; }
  .faq-step-body p         { font-size: 14px; }
}

@media (max-width: 640px) {
  .faq-einrichten-images   { grid-template-columns: 1fr; }
  .faq-et-tab              { padding: 9px 16px; font-size: 13.5px; }
  .faq-app-table           { min-width: 480px; font-size: 13px; }
  .faq-app-table thead th  { padding: 10px 12px; font-size: 11px; }
  .faq-app-table tbody td  { padding: 10px 12px; font-size: 13px; }
  .faq-pricing-table       { min-width: 500px; font-size: 13px; }
  .faq-pricing-table thead th { padding: 11px 12px; font-size: 11px; }
  .faq-pricing-table tbody td { padding: 11px 12px; font-size: 13px; }
  .faq-account-cta         { flex-direction: column; align-items: stretch; }
  .faq-account-cta .btn    { text-align: center; }
}

@media (max-width: 480px) {
  .faq-step                { gap: 14px; padding: 16px 0; }
  .faq-step-num            { font-size: 22px; min-width: 32px; }
  .faq-app-table           { min-width: 400px; }
  .faq-app-table tbody td:first-child { white-space: normal; }
  .faq-pricing-table       { min-width: 420px; }
  .faq-pricing-table tbody td:first-child { white-space: normal; }
}

@media (max-width: 360px) {
  .faq-et-tab              { padding: 8px 12px; font-size: 13px; }
  .faq-step-num            { font-size: 20px; min-width: 28px; }
  .faq-app-table           { min-width: 360px; font-size: 12.5px; }
  .faq-pricing-table       { min-width: 360px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-et-tab              { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   FAQ Phase 5 — S9 Accordion + Sidebar + Full Responsive
   ══════════════════════════════════════════════════════════════ */

/* ── S9 · FAQ Accordion Section ──────────────────────────────── */
.faq-accordion-section { background: var(--surface); }

.faq-accordion-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

/* Accordion list column */
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Text span inside <summary class="faq-q"> — pushes ::after to right */
.faq-q-text { flex: 1; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.faq-accordion-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-sidebar-img-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.faq-sidebar-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.faq-sidebar-img-wrap:hover img { transform: scale(1.03); }

.faq-sidebar-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(10, 10, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-md);
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Stats chips below image */
.faq-sidebar-trust {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 12px;
}

.faq-sidebar-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.faq-sidebar-stat strong {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.faq-sidebar-stat span {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.2;
}

/* CTA button full-width in sidebar */
.faq-sidebar-cta {
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* ── Full Responsive — S9 + Global FAQ Page ──────────────────── */

/* 900px: collapse sidebar to row */
@media (max-width: 900px) {
  .faq-accordion-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .faq-accordion-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .faq-sidebar-img-wrap { grid-column: 1 / -1; }
  .faq-sidebar-cta      { grid-column: 1 / -1; }
}

/* 768px: section header + general */
@media (max-width: 768px) {
  .faq-sidebar-trust         { padding: 14px 10px; gap: 8px; }
  .faq-sidebar-stat strong   { font-size: 14px; }
  .faq-sidebar-stat span     { font-size: 10px; }
  /* global anl-section-header H2 */
  .anl-section-header h2,
  .anl-section-header .anl-s2-h2,
  [id$="-h2"]                { font-size: clamp(18px, 3.5vw, 26px); }
}

/* 640px: accordion items + sidebar stack */
@media (max-width: 640px) {
  .faq-accordion-sidebar     { grid-template-columns: 1fr; }
  .faq-sidebar-img-wrap,
  .faq-sidebar-cta           { grid-column: auto; }
  /* accordion items */
  .faq-accordion-list .faq-item .faq-q  { padding: 14px 16px; font-size: 14px; }
  .faq-accordion-list .faq-item .faq-a  { padding: 0 16px 15px; }
  .faq-accordion-list .faq-item .faq-a p { font-size: 13.5px; }
  .faq-sidebar-badge         { font-size: 11px; padding: 5px 9px; }
}

/* 480px */
@media (max-width: 480px) {
  .faq-sidebar-trust         { padding: 12px 10px; }
  .faq-sidebar-stat strong   { font-size: 13.5px; }
  .faq-accordion-list .faq-item .faq-q  { padding: 13px 14px; font-size: 13.5px; }
  .faq-accordion-list .faq-item .faq-a p { font-size: 13px; }
}

/* 360px */
@media (max-width: 360px) {
  .faq-sidebar-trust         { grid-template-columns: 1fr 1fr; }
  .faq-sidebar-stat:last-child { grid-column: 1 / -1; }
  .faq-accordion-list .faq-item .faq-q  { padding: 12px 12px; font-size: 13px; }
  .faq-q-text                { font-size: 13px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-sidebar-img-wrap img  { transition: none !important; }
  .faq-item                  { transition: none !important; }
  .faq-q::after              { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   FAQ Phase 6 — S10 Sport + S11 VOD + Luxury CSS
   Gradient H2 · Orbs · Pulse CTA · Hover Lift
   ══════════════════════════════════════════════════════════════ */

/* ── Luxury Keyframes ──────────────────────────────────────── */
@keyframes faq-orb {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(22px, 16px) scale(1.07); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes faq-orb-2 {
  0%   { transform: translate(0, 0) scale(1.04); }
  50%  { transform: translate(-18px, -12px) scale(1); }
  100% { transform: translate(0, 0) scale(1.04); }
}
@keyframes faq-cta-pulse {
  0%,100% { box-shadow: 0 4px 24px rgba(232,0,61,0.35), 0 0 0 rgba(232,0,61,0); }
  50%      { box-shadow: 0 6px 40px rgba(232,0,61,0.60), 0 0 80px rgba(232,0,61,0.14); }
}

/* ── Gradient H2 (Luxury — both S10 + S11) ─────────────────── */
.faq-gradient-h2 {
  background: linear-gradient(135deg, #fff 52%, rgba(232,0,61,0.82) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Fallback for browsers without background-clip text */
@supports not (-webkit-background-clip: text) {
  .faq-gradient-h2 { color: var(--text); }
}

/* ── Pulse on CTA primary btn inside #faq-jetzt-kaufen ─────── */
#faq-jetzt-kaufen .btn-primary {
  animation: faq-cta-pulse 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #faq-jetzt-kaufen .btn-primary { animation: none; }
}


/* ── S10 · Live Sport Section ───────────────────────────────── */
.faq-sport-section {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Luxury orbs */
.faq-sport-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.faq-sport-orb--1 {
  width: 520px; height: 520px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(232,0,61,0.10) 0%, transparent 68%);
  animation: faq-orb 9s ease-in-out infinite;
}
.faq-sport-orb--2 {
  width: 420px; height: 420px;
  bottom: -140px; right: -80px;
  background: radial-gradient(circle, rgba(232,0,61,0.07) 0%, transparent 65%);
  animation: faq-orb-2 11s ease-in-out infinite;
}
.faq-sport-section .container { position: relative; z-index: 1; }

.faq-sport-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

.faq-sport-text p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.faq-sport-note {
  font-size: 14.5px !important;
  margin-top: 20px !important;
}

/* Sport Table (GEO O03) */
.faq-sport-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.faq-sport-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 480px;
}

.faq-sport-table thead {
  background: var(--surface-2);
}

.faq-sport-table th {
  padding: 13px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}

.faq-sport-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.18s;
}

.faq-sport-table tbody tr:last-child { border-bottom: none; }

.faq-sport-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.faq-sport-table td {
  padding: 12px 16px;
  color: var(--text-dim);
  vertical-align: middle;
}

.faq-sport-ok {
  color: #22c55e;
  font-weight: 700;
  white-space: nowrap;
}

/* Sport image container */
.faq-sport-image {
  position: sticky;
  top: 90px;
}


/* ── S11 · VOD Section ──────────────────────────────────────── */
.faq-vod-section {
  background: var(--surface);
}

.faq-vod-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

.faq-vod-text p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 24px;
}

.faq-vod-note {
  font-size: 14.5px !important;
  margin-top: 20px !important;
}

/* VOD Category Grid */
.faq-vod-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0;
}

.faq-vod-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.faq-vod-cat:hover {
  transform: translateY(-4px);
  border-color: rgba(232,0,61,0.35);
  box-shadow: 0 8px 32px rgba(232,0,61,0.10);
}

.faq-vod-cat-icon {
  font-size: 26px;
  line-height: 1;
}

.faq-vod-cat strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.faq-vod-cat span {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
}


/* ── Responsive Phase 6 ─────────────────────────────────────── */

/* 1024px: tighten columns */
@media (max-width: 1024px) {
  .faq-sport-inner,
  .faq-vod-inner {
    grid-template-columns: 1fr 300px;
    gap: 36px;
  }
}

/* 900px: single column */
@media (max-width: 900px) {
  .faq-sport-inner,
  .faq-vod-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .faq-sport-image { position: static; }
  .faq-vod-categories { grid-template-columns: repeat(3, 1fr); }
}

/* 768px */
@media (max-width: 768px) {
  .faq-sport-text p,
  .faq-vod-text p   { font-size: 15px; }
  .faq-sport-table  { font-size: 14px; }
  .faq-vod-categories { gap: 10px; }
  .faq-vod-cat      { padding: 14px 10px; }
  .faq-vod-cat-icon { font-size: 22px; }
  .faq-vod-cat strong { font-size: 13px; }
}

/* 640px: 2-col VOD categories */
@media (max-width: 640px) {
  .faq-vod-categories { grid-template-columns: repeat(2, 1fr); }
  .faq-sport-table  { min-width: 420px; }
}

/* 480px */
@media (max-width: 480px) {
  .faq-sport-table  { min-width: 360px; font-size: 13px; }
  .faq-sport-table th,
  .faq-sport-table td { padding: 10px 12px; }
  .faq-vod-categories { gap: 8px; }
  .faq-vod-cat      { padding: 12px 8px; }
  .faq-orb-sport-1, .faq-sport-orb--1 { display: none; }
}

/* 360px */
@media (max-width: 360px) {
  .faq-sport-table  { font-size: 12.5px; }
  .faq-vod-cat strong { font-size: 12.5px; }
  .faq-vod-cat span { font-size: 11.5px; }
  .faq-vod-categories { grid-template-columns: 1fr 1fr; }
}

/* Reduced motion Phase 6 */
@media (prefers-reduced-motion: reduce) {
  .faq-sport-orb    { animation: none !important; }
  .faq-vod-cat      { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   /fragen/ — FAQ Häufige Fragen Page
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
.frg-hero { background: var(--bg); padding-top: 32px; }

.frg-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.frg-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,0,61,0.10);
  border: 1px solid rgba(232,0,61,0.22);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.frg-hero h1 {
  font-size: clamp(26px, 4.5vw, 46px);
  font-weight: 900;
  line-height: 1.18;
  color: var(--text);
  max-width: 720px;
}

.frg-hero-accent { color: var(--primary); }

.frg-hero-desc {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--text-dim);
  max-width: 680px;
  margin-top: 8px;
}

.frg-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.frg-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.frg-stat strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.frg-stat span {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}


/* ── Accordion Section ─────────────────────────────────────── */
.frg-accordion-section { background: var(--surface); }

.frg-acc-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

/* Accordion list */
.frg-acc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.frg-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.frg-item[open] {
  border-color: rgba(232,0,61,0.30);
  box-shadow: 0 4px 24px rgba(232,0,61,0.08);
}

.frg-q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  transition: background 0.18s;
}

.frg-q::-webkit-details-marker { display: none; }
.frg-q::marker { display: none; }

.frg-q:hover { background: rgba(255,255,255,0.03); }

.frg-q-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  background: rgba(232,0,61,0.12);
  color: var(--primary);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.frg-q-text { flex: 1; }

.frg-q-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  color: var(--text-muted);
}

.frg-q-icon::before,
.frg-q-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.frg-q-icon::before { width: 12px; height: 2px; top: 9px; left: 4px; }
.frg-q-icon::after  { width: 2px; height: 12px; top: 4px; left: 9px; }

details[open] .frg-q-icon::after { transform: rotate(90deg); opacity: 0; }

.frg-a {
  padding: 0 20px 18px 64px;
}

.frg-a p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-dim);
  margin: 0;
}


/* ── Sidebar ───────────────────────────────────────────────── */
.frg-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.frg-sidebar-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px 20px;
}

.frg-sidebar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

.frg-sidebar-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}

.frg-sidebar-card > p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.frg-sidebar-trust {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.frg-sidebar-trust span {
  font-size: 13px;
  color: var(--text-dim);
}

.frg-sidebar-cta {
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

/* Sidebar quick links */
.frg-sidebar-links {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}

.frg-sidebar-links h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.frg-sidebar-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.frg-sidebar-links a {
  font-size: 13.5px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.18s;
  display: block;
}

.frg-sidebar-links a:hover { color: var(--primary); }


/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .frg-acc-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .frg-sidebar { position: static; }
  .frg-hero-stats { gap: 20px; }
}

@media (max-width: 768px) {
  .frg-hero h1       { font-size: clamp(22px, 5vw, 32px); }
  .frg-hero-desc     { font-size: 15.5px; }
  .frg-stat strong   { font-size: 18px; }
  .frg-q             { font-size: 14.5px; padding: 16px 16px; gap: 12px; }
  .frg-a             { padding: 0 16px 16px 58px; }
}

@media (max-width: 640px) {
  .frg-hero-stats    { gap: 16px; }
  .frg-q             { font-size: 14px; }
  .frg-a             { padding: 0 14px 14px 52px; }
  .frg-sidebar-card  { padding: 20px 16px; }
}

@media (max-width: 480px) {
  .frg-q             { font-size: 13.5px; gap: 10px; }
  .frg-q-num         { min-width: 26px; height: 26px; font-size: 12px; }
  .frg-a p           { font-size: 13.5px; }
  .frg-hero-stats    { gap: 14px; }
  .frg-stat strong   { font-size: 17px; }
}

@media (max-width: 360px) {
  .frg-q             { font-size: 13px; }
  .frg-hero-stats    { gap: 10px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .frg-item          { transition: none !important; }
  .frg-q             { transition: none !important; }
  .frg-q-icon::after { transition: none !important; }
}

/* ── Summary Box (GEO: O02) ────────────────────────────── */
.frg-summary-section { background: var(--bg); padding-top: 0; padding-bottom: 0; }

.frg-summary-box {
  background: var(--surface);
  border: 1px solid rgba(232,0,61,.20);
  border-radius: var(--r-xl);
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
}

.frg-summary-box::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(232,0,61,.10) 0%, transparent 70%);
  pointer-events: none;
}

.frg-sum-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 20px;
}

.frg-sum-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

.frg-sum-list li {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.55;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.frg-sum-list strong { color: var(--text); }

.frg-sum-check {
  color: var(--primary);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.frg-sum-cta { display: inline-flex; margin-top: 4px; }

@media (max-width: 768px) {
  .frg-sum-list        { grid-template-columns: 1fr; gap: 10px; }
  .frg-summary-box     { padding: 24px 20px; }
}

@media (max-width: 480px) {
  .frg-sum-list li     { font-size: 13.5px; }
}


/* ── Package Table (GEO: O03) ───────────────────────────── */
.frg-pkgtable-section { background: var(--surface-2); }

.frg-pkg-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.frg-pkg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 560px;
}

.frg-pkg-table th {
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.frg-pkg-table td {
  padding: 14px 20px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}

.frg-pkg-table tbody tr:last-child td { border-bottom: none; }

.frg-pkg-table tbody tr:hover { background: rgba(255,255,255,.02); }

.frg-pkg-featured td {
  background: rgba(232,0,61,.07);
  color: var(--text);
}

.frg-pkg-featured td:first-child { color: var(--primary); }

.frg-pkg-note {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .frg-pkg-table th,
  .frg-pkg-table td { padding: 12px 14px; font-size: 13.5px; }
}


/* ── Category headings on image breaks (GEO: O01/O08) ───── */
.frg-cat-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 12px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.frg-cat-heading::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}


/* ── Image break banners inside accordion ───────────────── */
.frg-img-break {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}

.frg-break-fig {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(232,0,61,.15);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.frg-break-fig img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.frg-break-fig:hover img { transform: scale(1.025); }

.frg-break-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 24px 16px;
  background: linear-gradient(transparent, rgba(10,10,15,.82));
  color: rgba(255,255,255,.92);
  font-size: .84rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .025em;
}

@media (max-width: 640px) {
  .frg-break-fig img { height: 180px; }
  .frg-break-cap     { font-size: .8rem; padding: 12px 16px 12px; }
}

@media (max-width: 360px) {
  .frg-break-fig img { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .frg-break-fig img     { transition: none !important; }
  .frg-break-fig:hover img { transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   /kontakt/ — Contact & Support Page
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
.knt-hero {
  background: var(--bg);
  padding-top: 32px;
  position: relative;
  overflow: hidden;
}

.knt-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.knt-orb--1 {
  width: 640px; height: 640px;
  top: -220px; right: -160px;
  background: radial-gradient(circle, rgba(232,0,61,.09) 0%, transparent 70%);
  animation: knt-orb1 14s ease-in-out infinite;
}

.knt-orb--2 {
  width: 420px; height: 420px;
  bottom: -120px; left: -80px;
  background: radial-gradient(circle, rgba(232,0,61,.05) 0%, transparent 70%);
  animation: knt-orb2 18s ease-in-out infinite;
}

@keyframes knt-orb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-28px,28px)} }
@keyframes knt-orb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-20px)} }

.knt-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.knt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(232,0,61,.09);
  border: 1px solid rgba(232,0,61,.22);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: .02em;
  margin-bottom: 22px;
}

.knt-hero h1 {
  font-size: clamp(26px, 4.5vw, 48px);
  font-weight: 900;
  line-height: 1.16;
  color: var(--text);
  margin-bottom: 22px;
}

.knt-hero-accent {
  background: linear-gradient(90deg, var(--primary) 0%, #ff4d6d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.knt-hero-desc {
  font-size: 16.5px;
  line-height: 1.74;
  color: var(--text-dim);
  max-width: 680px;
  margin-bottom: 36px;
}

.knt-hero-desc a { color: var(--primary); text-decoration: none; }
.knt-hero-desc a:hover { text-decoration: underline; }

.knt-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}

.knt-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.knt-stat strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.knt-stat span {
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 600;
}


/* ── Contact Cards ─────────────────────────────────────────── */
.knt-cards-section { background: var(--surface-2); }

.knt-cards {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}

.knt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}

.knt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 52px rgba(0,0,0,.38);
}

.knt-card--wa {
  border-color: rgba(232,0,61,.30);
  background: linear-gradient(145deg, rgba(232,0,61,.065) 0%, var(--surface) 55%);
  box-shadow: 0 0 48px rgba(232,0,61,.07);
}

.knt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.knt-card-ico {
  width: 54px; height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.knt-card-ico--wa {
  background: rgba(37,211,102,.12);
  color: #25d366;
  border: 1px solid rgba(37,211,102,.25);
}

.knt-card-ico--mail {
  background: rgba(232,0,61,.10);
  color: var(--primary);
  border: 1px solid rgba(232,0,61,.20);
  font-size: 22px;
}

.knt-card-ico--faq {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 26px;
}

.knt-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 11px;
  border-radius: 999px;
}

.knt-badge--red {
  background: var(--primary);
  color: #fff;
}

.knt-badge--dim {
  background: rgba(255,255,255,.07);
  color: var(--text-muted);
}

.knt-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.knt-card-num {
  margin-bottom: 20px;
}

.knt-card-num a {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: .01em;
}

.knt-card-num a:hover { text-decoration: underline; }

.knt-card-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.knt-feat {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.knt-feat li {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.knt-help-links {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.knt-help-links a {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .18s;
}

.knt-help-links a:hover { color: var(--primary); }

.knt-card-btn {
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}


/* ── Info Section (Image + Availability) ───────────────────── */
.knt-info-section { background: var(--bg); }

.knt-info-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.knt-info-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 0;
}

.knt-info-img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.knt-info-img:hover img { transform: scale(1.025); }

.knt-info-content h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.25;
}

.knt-info-content > p {
  font-size: 15.5px;
  color: var(--text-dim);
  line-height: 1.74;
  margin-bottom: 28px;
}

.knt-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}

.knt-trust-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.knt-trust-item strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

.knt-trust-item span {
  font-size: 12px;
  color: var(--text-muted);
}

.knt-avail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 28px;
}

.knt-avail-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}

.knt-avail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13.5px;
  color: var(--text-dim);
  gap: 12px;
}

.knt-avail-row:last-child { border-bottom: none; }

.knt-avail-val {
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-size: 13px;
}


/* ── Mini FAQ Section ──────────────────────────────────────── */
.knt-faq-section { background: var(--surface-2); }

.knt-faq-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}


/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .knt-cards { grid-template-columns: 1fr 1fr; }
  .knt-card--help { grid-column: span 2; }
}

@media (max-width: 900px) {
  .knt-info-inner     { grid-template-columns: 1fr; gap: 36px; }
  .knt-info-img img   { height: 280px; }
  .knt-faq-inner      { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .knt-cards          { grid-template-columns: 1fr; }
  .knt-card--help     { grid-column: span 1; }
  .knt-hero h1        { font-size: clamp(22px, 5vw, 32px); }
  .knt-stats          { gap: 20px; }
  .knt-stat strong    { font-size: 19px; }
  .knt-trust-grid     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .knt-card           { padding: 24px 20px 20px; }
  .knt-stats          { gap: 14px; }
  .knt-avail-row      { font-size: 12.5px; }
  .knt-avail-val      { font-size: 12px; }
  .knt-hero-desc      { font-size: 15.5px; }
}

@media (max-width: 380px) {
  .knt-trust-grid     { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .knt-orb            { animation: none !important; }
  .knt-card           { transition: none !important; }
  .knt-info-img img   { transition: none !important; }
  .knt-info-img:hover img { transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   /agb/ — Allgemeine Geschäftsbedingungen
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
.agb-hero {
  background: var(--bg);
  padding-top: 32px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--border);
}

.agb-hero-inner { max-width: 760px; }

.agb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .02em;
  margin-bottom: 20px;
}

.agb-hero h1 {
  font-size: clamp(24px, 3.8vw, 40px);
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 16px;
}

.agb-hero-sub {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-dim);
  max-width: 660px;
  margin-bottom: 20px;
}

.agb-hero-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  padding-bottom: 40px;
}

.agb-hero-meta a { color: var(--primary); text-decoration: none; }
.agb-hero-meta a:hover { text-decoration: underline; }


/* ── Layout ────────────────────────────────────────────────── */
.agb-main { background: var(--bg); }

.agb-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}


/* ── Table of Contents ─────────────────────────────────────── */
.agb-toc {
  position: sticky;
  top: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px 20px;
}

.agb-toc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.agb-toc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agb-toc-list a {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 7px;
  transition: background .15s, color .15s;
  line-height: 1.45;
}

.agb-toc-list a:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}

.agb-toc-contact {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.agb-toc-contact p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 600;
}


/* ── Content Sections ──────────────────────────────────────── */
.agb-content { display: flex; flex-direction: column; gap: 0; }

.agb-section {
  padding: 36px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.agb-section:last-of-type { border-bottom: none; }

.agb-section--highlight {
  background: rgba(232,0,61,.03);
  border: 1px solid rgba(232,0,61,.12);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  margin: 8px 0;
}

.agb-section h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1.3;
}

.agb-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(232,0,61,.10);
  border: 1px solid rgba(232,0,61,.18);
  border-radius: 6px;
  padding: 3px 9px;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.agb-section p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.agb-section p:last-child { margin-bottom: 0; }

.agb-section p a { color: var(--primary); text-decoration: none; }
.agb-section p a:hover { text-decoration: underline; }


/* ── Lists ─────────────────────────────────────────────────── */
.agb-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agb-list li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
  padding-left: 20px;
  position: relative;
}

.agb-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.agb-list a { color: var(--primary); text-decoration: none; }
.agb-list a:hover { text-decoration: underline; }

.agb-list--warning li::before { content: '✕'; font-size: 11px; top: 3px; }
.agb-list--warning li { color: rgba(255,255,255,.55); }


/* ── Table ─────────────────────────────────────────────────── */
.agb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.agb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 480px;
}

.agb-table th {
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.agb-table td {
  padding: 12px 18px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}

.agb-table tbody tr:last-child td { border-bottom: none; }
.agb-table tbody tr:hover { background: rgba(255,255,255,.02); }


/* ── Footer Elements ───────────────────────────────────────── */
.agb-last-updated {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  margin-top: 20px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.agb-related {
  padding: 32px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.agb-related-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}

.agb-related-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.agb-related-link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text-dim);
  text-decoration: none;
  transition: border-color .18s, color .18s;
}

.agb-related-link:hover {
  border-color: rgba(232,0,61,.30);
  color: var(--text);
}


/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .agb-layout { grid-template-columns: 1fr; gap: 32px; }
  .agb-toc    { position: static; }
  .agb-toc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
}

@media (max-width: 640px) {
  .agb-section--highlight { padding: 24px 20px; }
  .agb-section h2         { font-size: 17px; }
  .agb-section p,
  .agb-list li            { font-size: 14px; }
  .agb-related-links      { grid-template-columns: 1fr; }
  .agb-toc-list           { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .agb-hero h1  { font-size: clamp(21px, 5vw, 28px); }
  .agb-hero-meta{ flex-direction: column; gap: 6px; }
}


/* ── Datenschutz contact box ───────────────────────────────── */
.dst-contact-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin: 12px 0 18px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-dim);
}

.dst-contact-box strong { color: var(--text); }
.dst-contact-box a { color: var(--primary); text-decoration: none; }
.dst-contact-box a:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════
   /impressum/ — Impressum Page
   ══════════════════════════════════════════════════════════════ */

.imp-cards-section { background: var(--surface-2); }

.imp-section-title {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 28px;
}

.imp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.imp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .22s ease, box-shadow .22s ease;
}

.imp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
}

.imp-card--action {
  border-color: rgba(232,0,61,.22);
  background: linear-gradient(145deg, rgba(232,0,61,.055) 0%, var(--surface) 55%);
}

.imp-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.imp-card-ico {
  width: 44px; height: 44px;
  background: rgba(232,0,61,.09);
  border: 1px solid rgba(232,0,61,.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.imp-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* Definition list */
.imp-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  font-size: 13.5px;
  flex: 1;
}

.imp-dl dt {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-top: 2px;
  white-space: nowrap;
}

.imp-dl dd {
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
}

.imp-dl dd a { color: var(--primary); text-decoration: none; }
.imp-dl dd a:hover { text-decoration: underline; }

.imp-card-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.72;
  margin-bottom: 20px;
  flex: 1;
}

/* Legal sections (reuse agb-section, add minor tweak) */
.imp-legal-inner { max-width: 860px; }

.imp-art { border-bottom: 1px solid rgba(255,255,255,.05); padding: 32px 0; }
.imp-art:last-of-type { border-bottom: none; }
.imp-art h2 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }

/* Responsive */
@media (max-width: 900px) {
  .imp-cards { grid-template-columns: 1fr 1fr; }
  .imp-card--action { grid-column: span 2; }
}

@media (max-width: 600px) {
  .imp-cards { grid-template-columns: 1fr; }
  .imp-card--action { grid-column: span 1; }
  .imp-dl { grid-template-columns: 1fr; gap: 4px 0; }
  .imp-dl dt { margin-top: 10px; }
  .imp-dl dt:first-child { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .imp-card { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════
   PBELT — Animierter Film-Poster-Karussell (Poster Belt)
══════════════════════════════════════════════════════════ */

.pbelt-section {
  padding: 72px 0 56px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

/* Ambient glow orbs in background */
.pbelt-section::before,
.pbelt-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.pbelt-section::before {
  width: 600px;
  height: 600px;
  top: 50%;
  left: -10%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(232,0,61,.09) 0%, transparent 68%);
  animation: pbelt-orb-pulse 6s ease-in-out infinite alternate;
}
.pbelt-section::after {
  width: 500px;
  height: 500px;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(232,0,61,.07) 0%, transparent 68%);
  animation: pbelt-orb-pulse 8s ease-in-out infinite alternate-reverse;
}

@keyframes pbelt-orb-pulse {
  from { opacity: .5; transform: translateY(-50%) scale(.9); }
  to   { opacity: 1;  transform: translateY(-50%) scale(1.15); }
}

.pbelt-header,
.pbelt-wrap,
.pbelt-cta { position: relative; z-index: 1; }

.pbelt-header {
  text-align: center;
  margin-bottom: 44px;
  padding: 0 20px;
}

.pbelt-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 12px;
}

.pbelt-title {
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 800;
  background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,.5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 14px;
  line-height: 1.2;
}

.pbelt-sub {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Track wrapper — clips overflow and fades edges */
.pbelt-wrap {
  overflow: hidden;
  margin-bottom: 16px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Pause horizontal scroll on hover */
.pbelt-wrap:hover .pbelt-track { animation-play-state: paused; }

/* Scrolling track */
.pbelt-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  padding: 14px 0 18px;
}

.pbelt-track--left  { animation: pbelt-scroll-left  38s linear infinite; }
.pbelt-track--right { animation: pbelt-scroll-right 44s linear infinite; }

/* ── Poster images ──────────────────────────────────────── */
.pbelt-track img {
  width: 130px;
  height: 195px;
  object-fit: cover;
  border-radius: var(--r-md);
  flex-shrink: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
  transition: filter .3s ease, box-shadow .3s ease;
  display: block;
  animation: pbelt-float 3.8s ease-in-out infinite;
}

/* Staggered float delays per poster */
.pbelt-track img:nth-child(2n)  { animation-delay: -.9s;  animation-duration: 4.3s; }
.pbelt-track img:nth-child(3n)  { animation-delay: -1.8s; animation-duration: 3.5s; }
.pbelt-track img:nth-child(4n)  { animation-delay: -2.7s; animation-duration: 5.0s; }
.pbelt-track img:nth-child(5n)  { animation-delay: -3.6s; animation-duration: 4.0s; }
.pbelt-track img:nth-child(6n)  { animation-delay: -.4s;  animation-duration: 4.7s; }
.pbelt-track img:nth-child(7n)  { animation-delay: -1.3s; animation-duration: 3.9s; }
.pbelt-track img:nth-child(8n)  { animation-delay: -2.2s; animation-duration: 4.5s; }
.pbelt-track img:nth-child(9n)  { animation-delay: -3.1s; animation-duration: 3.6s; }

/* Hover: red glow without breaking float animation */
.pbelt-track img:hover {
  filter: brightness(1.18) drop-shadow(0 0 18px rgba(232,0,61,.7)) drop-shadow(0 6px 12px rgba(232,0,61,.4));
  box-shadow: 0 16px 44px rgba(232,0,61,.5);
  position: relative;
  z-index: 4;
}

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes pbelt-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

@keyframes pbelt-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  40%       { transform: translateY(-11px) rotate(.4deg); }
  70%       { transform: translateY(-5px) rotate(-.2deg); }
}

/* CTA */
.pbelt-cta {
  text-align: center;
  margin-top: 44px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .pbelt-section { padding: 48px 0 40px; }
  .pbelt-header  { margin-bottom: 32px; }
  .pbelt-track img { width: 100px; height: 150px; }
  .pbelt-track { gap: 10px; padding: 10px 0 14px; }
  .pbelt-track--left  { animation-duration: 28s; }
  .pbelt-track--right { animation-duration: 32s; }
}

@media (max-width: 480px) {
  .pbelt-track img { width: 80px; height: 120px; }
  .pbelt-track { gap: 8px; padding: 8px 0 12px; }
  .pbelt-track--left  { animation-duration: 20s; }
  .pbelt-track--right { animation-duration: 24s; }
}

@media (prefers-reduced-motion: reduce) {
  .pbelt-track,
  .pbelt-track img,
  .pbelt-section::before,
  .pbelt-section::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG — tv-schweiz.ch/blog/
   Phase 2: Breadcrumb · Meta Bar · Hero · Direct Answer · §1 · §2
   Mobile-first priority (phone > tablet > desktop)
   ═══════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────────── */
.blog-breadcrumb {
  padding: 12px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* ── Author Meta Bar ────────────────────────────────────────── */
.blog-meta-bar {
  background: var(--bg);
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

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

.blog-author-badge {
  display: flex;
  align-items: center;
  gap: 11px;
}

.blog-author-avatar {
  width: 38px;
  height: 38px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.blog-author-badge strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.blog-author-badge span {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
}

.blog-meta-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
  flex-wrap: wrap;
}

/* ── Hero ───────────────────────────────────────────────────── */
.blog-hero { background: var(--bg); }

.blog-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(232,0,61,0.08);
  border: 1px solid rgba(232,0,61,0.22);
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.3;
}

.blog-rating-badge strong {
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.blog-hero-lead { margin-bottom: 28px; }

.blog-trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.blog-trust-chips span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* ── Direct Answer Box (GEO C02) ────────────────────────────── */
.blog-da-section {
  background: var(--surface);
  padding: 56px 0;
}

.blog-da-inner {
  max-width: 860px;
  margin: 0 auto;
}

.blog-da-box {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 36px 40px;
}

.blog-da-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
  margin-bottom: 12px;
}

.blog-da-box h2 {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.25;
}

.blog-da-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.blog-da-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.blog-da-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-da-fact strong {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.blog-da-fact span {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  line-height: 1.3;
}

/* ── §1 Definition Section ──────────────────────────────────── */
.blog-def-section { background: var(--bg); }

.blog-def-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}

.blog-definition-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 22px 28px;
  margin-bottom: 24px;
}

.blog-def-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
  margin-bottom: 10px;
}

.blog-definition-box p:last-child {
  font-size: 15.5px;
  font-style: italic;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}

.blog-body-text {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.blog-body-text:last-of-type { margin-bottom: 0; }

.blog-inline-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}
.blog-inline-link:hover { opacity: 0.75; }

/* Stat Row — E01 Original Data */
.blog-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.blog-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 10px;
  transition: border-color 0.2s;
}

.blog-stat-item:hover { border-color: rgba(232,0,61,0.30); }

.blog-stat-item strong {
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.blog-stat-item span {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

/* Image column */
.blog-def-image { position: relative; }

.blog-def-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 16px 56px rgba(0,0,0,0.55);
}

.blog-img-caption {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

/* ── §2 Comparison Section ──────────────────────────────────── */
.blog-compare-section { background: var(--surface); }

.blog-compare-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}

/* GEO O03: Comparison Table */
.blog-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.blog-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 460px;
}

.blog-compare-table thead th {
  background: var(--surface-2);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 13px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
}

.blog-compare-table thead th:first-child {
  border-right: 1px solid var(--border);
  color: var(--text-dim);
}

.blog-compare-table thead th.blog-th-best {
  background: rgba(232,0,61,0.08);
  border-top: 2px solid var(--primary);
  color: var(--primary);
}

.blog-compare-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.blog-compare-table tbody tr:last-child { border-bottom: none; }
.blog-compare-table tbody tr:hover { background: rgba(255,255,255,0.02); }

.blog-compare-table tbody td {
  padding: 11px 15px;
  color: var(--text-muted);
  font-size: 13.5px;
  vertical-align: middle;
}

.blog-compare-table tbody td:first-child {
  font-weight: 600;
  color: var(--text);
  font-size: 12.5px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}

.blog-compare-table tbody td.blog-td-best {
  background: rgba(232,0,61,0.03);
  color: var(--text);
  font-weight: 500;
}

.blog-td-check { color: #22c55e; font-weight: 700; }
.blog-td-cross { color: #ef4444; font-weight: 600; }

/* Savings Box — E01 Original Data */
.blog-savings-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid #22c55e;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 24px;
}

.blog-savings-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #22c55e;
  margin-bottom: 10px;
}

.blog-savings-box p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
}

.blog-savings-highlight {
  color: #22c55e;
  font-weight: 800;
  font-size: 16px;
}

/* Compare image column */
.blog-compare-image { position: relative; }

.blog-compare-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 16px 56px rgba(0,0,0,0.55);
  margin-bottom: 16px;
}

/* Highlight card below compare image */
.blog-compare-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.blog-compare-card-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.blog-compare-card strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.blog-compare-card span {
  font-size: 12.5px;
  color: var(--text-dim);
}

/* ── Responsive — Tablet (≤900px) ──────────────────────────── */
@media (max-width: 900px) {

  /* Hero */
  .blog-hero .hero-inner     { gap: 36px; }
  .blog-hero .hero-image img { max-height: 280px; object-fit: cover; }

  /* §1 Definition */
  .blog-def-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-def-image           { order: -1; }
  .blog-def-image img       { max-height: 260px; object-fit: cover; }
  .blog-stat-row            { grid-template-columns: repeat(2, 1fr); }

  /* §2 Compare */
  .blog-compare-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-compare-image       { order: -1; }
  .blog-compare-image img   { max-height: 220px; object-fit: cover; }

}

/* ── Responsive — Mobile (≤600px) ──────────────────────────── */
@media (max-width: 600px) {

  .blog-da-box              { padding: 24px 18px; }
  .blog-da-facts            { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .blog-da-section          { padding: 40px 0; }

  .blog-meta-info           { font-size: 12px; gap: 8px; }

  .blog-stat-row            { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .blog-stat-item           { padding: 14px 8px; }

  .blog-trust-chips span    { font-size: 11px; padding: 4px 10px; }

  .blog-savings-box         { padding: 16px 18px; }

}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blog-stat-item { transition: none; }
  .blog-inline-link { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG Phase 3 — §3 Sender/EPG  +  §4 Live-Sport
   ═══════════════════════════════════════════════════════════════ */

/* ── §3 Live TV / Sender ────────────────────────────────────── */
.blog-sender-section { background: var(--bg); }

.blog-sender-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}

/* EPG Definition Box — C10 GEO */
.blog-epg-def-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 26px;
  margin-bottom: 22px;
}

.blog-epg-def-box p:last-child {
  font-size: 15px;
  font-style: italic;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}

/* Senderkategorien Grid */
.blog-channel-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0 26px;
}

.blog-channel-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color 0.2s, transform 0.2s;
}

.blog-channel-cat:hover {
  border-color: rgba(232,0,61,0.28);
  transform: translateY(-1px);
}

.blog-cat-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.blog-channel-cat strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 2px;
}

.blog-channel-cat span {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.3;
}

/* EPG Feature Box */
.blog-epg-box {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  margin-bottom: 22px;
}

.blog-epg-box-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--primary);
  margin-bottom: 16px;
}

.blog-epg-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-epg-feats li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.blog-feat-check {
  width: 20px;
  height: 20px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.30);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #22c55e;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.blog-epg-feats strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 2px;
}

.blog-epg-feats span {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Sender image + Live stat box */
.blog-sender-image { position: relative; }

.blog-sender-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 16px 56px rgba(0,0,0,0.55);
  margin-bottom: 14px;
}

.blog-live-stat-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
}

.blog-live-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.blog-live-stat strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.blog-live-stat span {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

.blog-live-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── §4 Live-Sport ──────────────────────────────────────────── */
.blog-sport-section { background: var(--surface); }

/* 3-Bilder Magazin-Grid */
.blog-sport-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  margin-bottom: 48px;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.blog-sport-img-main {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

.blog-sport-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 340px;
  display: block;
  transition: transform 0.4s ease;
}

.blog-sport-img-main:hover img { transform: scale(1.03); }

.blog-sport-img-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-sport-img-sm {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  flex: 1;
}

.blog-sport-img-sm:first-child { border-radius: 0 var(--r-lg) 0 0; }
.blog-sport-img-sm:last-child  { border-radius: 0 0 var(--r-lg) 0; }

.blog-sport-img-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 162px;
  display: block;
  transition: transform 0.4s ease;
}

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

/* LIVE badge — overlaid on sport images */
.blog-sport-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(10,10,15,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.blog-sport-badge--main {
  padding: 7px 18px;
  font-size: 13.5px;
}

.blog-live-dot {
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 1.6s ease-in-out infinite;
}

/* Sport Content */
.blog-sport-content { max-width: 960px; margin: 0 auto; }

/* Ligen Grid */
.blog-leagues-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 28px 0 32px;
}

.blog-league-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 16px;
  transition: border-color 0.2s, background 0.2s;
}

.blog-league-item:hover {
  border-color: rgba(232,0,61,0.28);
  background: rgba(232,0,61,0.03);
}

.blog-league-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.blog-league-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 2px;
}

.blog-league-item span {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
}

/* Sport CTA Box */
.blog-sport-cta-box {
  background: linear-gradient(135deg, rgba(232,0,61,0.08) 0%, rgba(232,0,61,0.03) 100%);
  border: 1px solid rgba(232,0,61,0.22);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.blog-sport-cta-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.blog-sport-cta-text strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.blog-sport-cta-text span {
  font-size: 14px;
  color: var(--text-muted);
}

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

/* ── Responsive §3 + §4 — Tablet (≤900px) ──────────────────── */
@media (max-width: 900px) {

  /* §3 */
  .blog-sender-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-sender-image { order: -1; }
  .blog-sender-image img { max-height: 240px; object-fit: cover; }

  /* §4 sport grid — stack vertically */
  .blog-sport-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .blog-sport-img-main { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .blog-sport-img-main img { min-height: 220px; }
  .blog-sport-img-col {
    flex-direction: row;
    gap: 8px;
  }
  .blog-sport-img-sm:first-child { border-radius: 0 0 0 var(--r-lg); }
  .blog-sport-img-sm:last-child  { border-radius: 0 0 var(--r-lg) 0; }
  .blog-sport-img-sm img { min-height: 140px; }

  .blog-leagues-grid { grid-template-columns: 1fr; gap: 8px; }

  .blog-sport-cta-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 22px;
  }
}

/* ── Responsive §3 + §4 — Mobile (≤600px) ──────────────────── */
@media (max-width: 600px) {

  .blog-channel-cats { grid-template-columns: 1fr; gap: 8px; }

  .blog-live-stat-box { padding: 13px 14px; }
  .blog-live-stat strong { font-size: 14px; }

  /* Sport grid mobile: all images full width */
  .blog-sport-grid { gap: 6px; margin-bottom: 32px; }
  .blog-sport-img-col { flex-direction: column; }
  .blog-sport-img-sm:first-child { border-radius: 0; }
  .blog-sport-img-sm:last-child  { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .blog-sport-img-sm img { min-height: 160px; }

  .blog-sport-cta-text strong { font-size: 15px; }
  .blog-sport-cta-actions { width: 100%; }
  .blog-sport-cta-actions .btn { flex: 1; text-align: center; }

  .blog-leagues-grid { gap: 7px; }
  .blog-league-item  { padding: 11px 13px; }

}

/* ── Reduced Motion §3 + §4 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blog-sport-img-main img,
  .blog-sport-img-sm img  { transition: none; }
  .blog-live-dot          { animation: none; }
  .blog-channel-cat,
  .blog-league-item       { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   BLOG PHASE 4 — §5 VOD + §6 GERÄTE / EINRICHTUNG
   ═══════════════════════════════════════════════════════════════ */

/* Shared: image caption under blog images */
.blog-img-caption {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 10px 0 0;
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

/* ── §5 VOD — 280.000+ Filme & Serien ───────────────────────── */
.blog-vod-section { background: var(--bg); }

.blog-vod-layout {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 52px;
  align-items: start;
  margin-top: 44px;
}

/* VOD Definition Box (GEO C10) */
.blog-vod-def-box {
  background: rgba(232,0,61,0.06);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 22px;
  margin-bottom: 24px;
}

.blog-vod-def-box p:first-of-type { margin: 0; }

.blog-vod-def-box p:last-of-type {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
  margin: 6px 0 0;
}

/* VOD Kategorien — O07 Bullet Points as Cards */
.blog-vod-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 24px 0;
}

.blog-vod-cat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 15px;
  transition: border-color 0.2s, background 0.2s;
}

.blog-vod-cat:hover {
  border-color: rgba(232,0,61,0.28);
  background: rgba(232,0,61,0.03);
}

.blog-vod-cat-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.blog-vod-cat strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.25;
}

.blog-vod-cat span {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Language chips */
.blog-vod-langs-wrap {
  margin: 20px 0 0;
}

.blog-vod-langs-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}

.blog-vod-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-vod-lang {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* VOD Stats Row (E01) */
.blog-vod-stats {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 24px;
}

.blog-vod-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  gap: 3px;
  border-right: 1px solid var(--border);
}

.blog-vod-stat:last-child { border-right: none; }

.blog-vod-stat strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.blog-vod-stat span {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
  text-align: center;
}

/* VOD Images Column */
.blog-vod-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
}

.blog-vod-img-wrap img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 16px 56px rgba(0,0,0,0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.blog-vod-img-wrap:hover img {
  transform: translateY(-3px);
  box-shadow: 0 22px 64px rgba(0,0,0,0.65);
}

/* ── §6 GERÄTE & EINRICHTUNG ─────────────────────────────────── */
.blog-setup-section { background: var(--surface); }

.blog-setup-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 52px;
  align-items: start;
  margin-top: 44px;
}

/* Setup Definition Box (GEO C10) */
.blog-setup-def-box {
  background: rgba(232,0,61,0.06);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 22px;
  margin-bottom: 28px;
}

.blog-setup-def-box p:first-of-type { margin: 0; }

.blog-setup-def-box p:last-of-type {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
  margin: 6px 0 0;
}

/* Steps header */
.blog-setup-steps-header {
  margin-bottom: 16px;
}

/* GEO O06: Numbered Setup Steps */
.blog-setup-steps {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-setup-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: border-color 0.2s;
}

.blog-setup-step:hover { border-color: rgba(232,0,61,0.28); }

.blog-step-num {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.blog-step-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.blog-step-content strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.blog-step-content span {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Devices Grid */
.blog-devices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.blog-device-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 15px;
  transition: border-color 0.2s, background 0.2s;
}

.blog-device-item:hover {
  border-color: rgba(232,0,61,0.25);
  background: rgba(232,0,61,0.03);
}

.blog-device-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.blog-device-item strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.25;
}

.blog-device-item span {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.3;
}

/* /iptv-apps/ + /iptv-box/ Link Cards (Rule 12) */
.blog-setup-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-setup-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.blog-setup-link-card:hover {
  border-color: rgba(232,0,61,0.38);
  background: rgba(232,0,61,0.04);
  transform: translateX(3px);
}

.blog-setup-link-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.blog-setup-link-card > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.blog-setup-link-card strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.blog-setup-link-card span {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

.blog-setup-link-arrow {
  font-size: 22px;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s;
}

.blog-setup-link-card:hover .blog-setup-link-arrow { transform: translateX(3px); }

/* Setup Images Column */
.blog-setup-images {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
}

.blog-setup-img-wrap img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 16px 56px rgba(0,0,0,0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.blog-setup-img-wrap:hover img {
  transform: translateY(-3px);
  box-shadow: 0 22px 64px rgba(0,0,0,0.65);
}

/* ── Responsive §5 + §6 — Tablet (≤900px) ───────────────────── */
@media (max-width: 900px) {

  /* §5 VOD */
  .blog-vod-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-vod-images {
    position: static;
    flex-direction: row;
    gap: 14px;
  }
  .blog-vod-img-wrap { flex: 1; }

  /* §6 Setup */
  .blog-setup-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-setup-images {
    position: static;
    flex-direction: row;
    gap: 14px;
    order: -1;
  }
  .blog-setup-img-wrap { flex: 1; }

  .blog-devices-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── Responsive §5 + §6 — Mobile (≤600px) ───────────────────── */
@media (max-width: 600px) {

  /* §5 VOD */
  .blog-vod-cats { grid-template-columns: 1fr; gap: 8px; }
  .blog-vod-images { flex-direction: column; }
  .blog-vod-stats { flex-wrap: wrap; }
  .blog-vod-stat { flex: 0 0 calc(50% - 0.5px); border-bottom: 1px solid var(--border); }
  .blog-vod-stat:nth-child(n+3) { border-bottom: none; }
  .blog-vod-stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .blog-vod-stat:nth-child(even) { border-right: none; }
  .blog-vod-stat strong { font-size: 15px; }

  /* §6 Setup */
  .blog-setup-step { padding: 14px 14px; gap: 12px; }
  .blog-step-num { width: 30px; height: 30px; min-width: 30px; font-size: 13px; }
  .blog-step-content strong { font-size: 13.5px; }
  .blog-step-content span   { font-size: 12.5px; }

  .blog-devices-grid { grid-template-columns: 1fr; gap: 7px; }
  .blog-setup-images { flex-direction: column; }

  .blog-setup-link-card { padding: 13px 14px; gap: 12px; }
  .blog-setup-link-card strong { font-size: 13px; }
  .blog-setup-link-card:hover { transform: none; }
}

/* ── Reduced Motion §5 + §6 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blog-vod-img-wrap img,
  .blog-setup-img-wrap img    { transition: none; }
  .blog-vod-cat,
  .blog-device-item,
  .blog-setup-step            { transition: none; }
  .blog-setup-link-card,
  .blog-setup-link-arrow      { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   BLOG PHASE 5 — §7 PREISÜBERSICHT + §8 FAQ ACCORDION
   ═══════════════════════════════════════════════════════════════ */

/* ── §7 PREISÜBERSICHT — 4 Pakete (O03 GEO) ─────────────────── */
.blog-price-section { background: var(--bg); }

/* 4-column pricing grid */
.blog-price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
  align-items: start;
}

/* Pricing Card */
.blog-price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: border-color 0.22s, box-shadow 0.22s;
}

.blog-price-card:hover {
  border-color: rgba(232,0,61,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Featured card (PREMIUM) */
.blog-price-card--featured {
  border-color: var(--primary);
  background: linear-gradient(170deg, rgba(232,0,61,0.07) 0%, var(--surface) 60%);
  box-shadow: 0 4px 24px rgba(232,0,61,0.15);
}

.blog-price-card--featured:hover {
  box-shadow: 0 10px 40px rgba(232,0,61,0.22);
}

/* "★ Beliebtestes" badge */
.blog-price-popular {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* Package name badge */
.blog-price-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.blog-price-badge--featured { color: var(--primary); }

/* Price amount */
.blog-price-amount {
  font-size: 30px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}

.blog-price-amount span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* Per-month line */
.blog-price-monthly {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 20px;
  font-weight: 400;
}

/* Feature list */
.blog-price-feats {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.blog-price-feats li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  padding-left: 22px;
  position: relative;
}

.blog-price-feats li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  font-weight: 700;
}

.feat-yes { color: var(--text); }
.feat-yes::before { content: '✓'; color: #22c55e; }

.feat-no { color: var(--text-dim); opacity: 0.6; }
.feat-no::before { content: '✗'; color: var(--text-dim); }

/* Trust Row: guarantee box + image side by side */
.blog-price-trust-row {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 48px;
  align-items: center;
  margin-top: 44px;
}

/* Guarantee box */
.blog-price-trust-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 32px;
}

.blog-price-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.blog-price-guarantee-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.blog-price-guarantee strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.3;
}

.blog-price-guarantee span {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Payment / trust chips */
.blog-price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-price-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* Price section image */
.blog-price-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 16px 56px rgba(0,0,0,0.5);
  transition: transform 0.35s ease;
}

.blog-price-image:hover img { transform: translateY(-3px); }

/* ── §8 FAQ ACCORDION — GEO C09 ─────────────────────────────── */
.blog-faq-section { background: var(--surface); }

.blog-faq-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}

/* FAQ Accordion container */
.blog-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual FAQ item (<details>) */
.blog-faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s;
}

.blog-faq-item[open] {
  border-color: rgba(232,0,61,0.35);
}

/* Summary (click trigger) */
.blog-faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s;
}

.blog-faq-question::-webkit-details-marker { display: none; }

.blog-faq-item:hover > .blog-faq-question { background: rgba(232,0,61,0.04); }

/* FAQ number chip */
.blog-faq-q-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}

.blog-faq-item[open] .blog-faq-q-num {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Question text */
.blog-faq-q-text {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

/* Chevron arrow */
.blog-faq-chevron {
  font-size: 20px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.22s ease, color 0.18s;
  line-height: 1;
}

.blog-faq-item[open] .blog-faq-chevron {
  transform: rotate(90deg);
  color: var(--primary);
}

/* Answer panel */
.blog-faq-answer {
  padding: 0 18px 18px 60px;
}

.blog-faq-answer p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
}

/* "Alle Fragen" link row */
.blog-faq-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
}

.blog-faq-more-arrow { color: var(--primary); font-weight: 700; }

/* FAQ image column */
.blog-faq-image {
  position: sticky;
  top: 100px;
}

.blog-faq-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 16px 56px rgba(0,0,0,0.5);
}

/* ── Responsive §7 + §8 — Tablet (≤900px) ───────────────────── */
@media (max-width: 900px) {

  /* §7 Pricing — 2x2 grid */
  .blog-price-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .blog-price-card { padding: 24px 18px 20px; }

  .blog-price-trust-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .blog-price-image { max-width: 480px; }

  /* §8 FAQ — single column */
  .blog-faq-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-faq-image {
    position: static;
    order: -1;
    max-width: 440px;
    margin: 0 auto;
  }
}

/* ── Responsive §7 + §8 — Mobile (≤600px) ───────────────────── */
@media (max-width: 600px) {

  /* §7 Pricing — single column */
  .blog-price-grid { grid-template-columns: 1fr; gap: 12px; }
  .blog-price-amount { font-size: 26px; }

  .blog-price-trust-box { padding: 22px 18px; }
  .blog-price-guarantee { gap: 12px; }
  .blog-price-guarantee-icon { font-size: 26px; }
  .blog-price-guarantee strong { font-size: 14.5px; }

  /* §8 FAQ */
  .blog-faq-question { padding: 14px 14px; gap: 10px; }
  .blog-faq-q-num { width: 24px; height: 24px; min-width: 24px; font-size: 10.5px; }
  .blog-faq-q-text { font-size: 13.5px; }
  .blog-faq-answer { padding: 0 14px 16px 48px; }
  .blog-faq-answer p { font-size: 13px; }
  .blog-faq-more { flex-wrap: wrap; }

  /* Featured card spacing */
  .blog-price-card--featured { margin-top: 14px; }
}

/* ── Reduced Motion §7 + §8 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blog-price-card,
  .blog-price-image img     { transition: none; }
  .blog-faq-item,
  .blog-faq-chevron,
  .blog-faq-q-num,
  .blog-faq-question        { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   BLOG PHASE 6 — §9 SUMMARY BOX (O02) + FAZIT + CTA
   ═══════════════════════════════════════════════════════════════ */

/* ── §9 Final Section ────────────────────────────────────────── */
.blog-final-section {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Subtle red radial glow at the bottom — closing drama */
.blog-final-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 55% at 50% 110%,
    rgba(232,0,61,0.09) 0%,
    transparent 68%
  );
  pointer-events: none;
}

.blog-final-layout {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.blog-final-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── O02 GEO: Summary Box ────────────────────────────────────── */
/* speakable cssSelector: .blog-summary-box (→ JSON-LD Schema)   */
.blog-summary-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-bottom: 28px;
}

.blog-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.blog-summary-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.blog-summary-header strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

/* Summary checklist */
.blog-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.blog-summary-list li {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}

.blog-summary-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #22c55e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

/* ── Fazit Heading + Text ────────────────────────────────────── */
.blog-fazit-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 13px;
}

.blog-fazit-text {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.8;
  margin: 0 0 28px;
}

/* ── 2× CTA Buttons Row ──────────────────────────────────────── */
.blog-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Right: Final Image ──────────────────────────────────────── */
.blog-final-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 20px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,0,61,0.08);
  transition: transform 0.38s ease, box-shadow 0.38s ease;
}

.blog-final-image:hover img {
  transform: translateY(-4px);
  box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(232,0,61,0.14);
}

/* ── Responsive §9 — Tablet (≤900px) ────────────────────────── */
@media (max-width: 900px) {
  .blog-final-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-final-image {
    order: -1;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ── Responsive §9 — Mobile (≤600px) ────────────────────────── */
@media (max-width: 600px) {
  .blog-summary-box  { padding: 20px 18px; }
  .blog-summary-header strong { font-size: 13.5px; }
  .blog-summary-list li { font-size: 13px; }

  .blog-fazit-title  { font-size: 18px; }
  .blog-fazit-text   { font-size: 13.5px; }

  .blog-cta-row { flex-direction: column; align-items: stretch; }
  .blog-cta-row .btn { text-align: center; justify-content: center; width: 100%; }
}

/* ── Reduced Motion §9 ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blog-final-image img { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   BLOG — VOLLSTÄNDIGE KLASSEN-REFERENZ (finale Ergänzungen)
   Fehlende @keyframe + globale Blog-Utilities
   ═══════════════════════════════════════════════════════════════ */

/* pulse-dot animation (used: §4 .blog-live-dot) */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* Shared section separator line above blog sections */
.blog-section-divider {
  width: 48px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin: 0 auto 10px;
}

/* Shared: bold inline keyword highlight */
.blog-keyword { color: var(--primary); font-weight: 700; }

/* Shared: small label above definition boxes */
.blog-def-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 8px;
}

/* Shared: generic body text used across all sections */
.blog-body-text {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.8;
  margin: 0 0 16px;
}

/* Shared: inline text link inside paragraphs */
.blog-inline-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.18s;
}
.blog-inline-link:hover { opacity: 0.78; }

/* ═══════════════════════════════════════════════════════════════
   BLOG — LUXURY MODERN ENHANCEMENT
   Glassmorphism · Gradient Text · Ambient Orbs · Micro-Animations
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes shimmer-slide {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(16px, -20px) scale(1.08); }
}
@keyframes price-pulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(232,0,61,0.15), 0 0 0 1px var(--primary); }
  50%       { box-shadow: 0 8px 48px rgba(232,0,61,0.35), 0 0 0 1px #ff1a4a; }
}
@keyframes btn-shine {
  0%   { left: -120%; }
  100% { left: 200%;  }
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes check-glow {
  0%, 100% { text-shadow: 0 0 6px rgba(34,197,94,0.4); }
  50%       { text-shadow: 0 0 14px rgba(34,197,94,0.8); }
}

/* ── Gradient text on blog section H2s ──────────────────────── */
.blog-sender-section   .anl-section-header h2,
.blog-sport-section    .anl-section-header h2,
.blog-vod-section      .anl-section-header h2,
.blog-setup-section    .anl-section-header h2,
.blog-price-section    .anl-section-header h2,
.blog-faq-section      .anl-section-header h2,
.blog-final-section    .blog-fazit-title {
  background: linear-gradient(125deg, #ffffff 0%, #f8f8f8 40%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Ambient floating orb — hero right ──────────────────────── */
.blog-hero {
  position: relative;
  overflow: hidden;
}
.blog-hero::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,0,61,0.11) 0%, transparent 68%);
  top: -80px;
  right: -120px;
  pointer-events: none;
  filter: blur(50px);
  animation: orb-float 9s ease-in-out infinite;
  z-index: 0;
}

/* ── Ambient orb — VOD section ───────────────────────────────── */
.blog-vod-section {
  position: relative;
  overflow: hidden;
}
.blog-vod-section::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,0,61,0.08) 0%, transparent 70%);
  top: -60px;
  right: -100px;
  pointer-events: none;
  filter: blur(55px);
  animation: orb-float 11s ease-in-out infinite reverse;
  z-index: 0;
}
.blog-vod-layout { position: relative; z-index: 1; }

/* ── Glassmorphism on definition boxes ───────────────────────── */
.blog-vod-def-box,
.blog-setup-def-box {
  background: rgba(19,19,26,0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left-color: var(--primary);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Glass on DA (Direct Answer) Box ────────────────────────── */
.blog-da-box {
  position: relative;
  overflow: hidden;
}
.blog-da-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(232,0,61,0.08) 0%,
    transparent 60%);
  pointer-events: none;
}

/* ── Summary Box: animated shimmer top border ────────────────── */
.blog-summary-box {
  border-top: none;
  position: relative;
}
.blog-summary-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    #ff4069       30%,
    #ff003e       60%,
    var(--primary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  animation: shimmer-slide 3s linear infinite;
}
.blog-summary-list li::before {
  animation: check-glow 2.8s ease-in-out infinite;
}

/* ── Featured Pricing Card: pulse glow ───────────────────────── */
.blog-price-card--featured {
  animation: price-pulse 2.8s ease-in-out infinite;
}

/* ── CTA Primary Button: shine sweep ────────────────────────── */
.blog-cta-row .btn-primary,
.blog-price-card--featured .btn-primary {
  position: relative;
  overflow: hidden;
}
.blog-cta-row .btn-primary::after,
.blog-price-card--featured .btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.14) 50%,
    transparent 100%
  );
  animation: btn-shine 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* ── FAQ Accordion: fade-in answer + num glow on open ────────── */
.blog-faq-answer {
  animation: faq-open 0.22s ease forwards;
}
.blog-faq-item[open] .blog-faq-q-num {
  box-shadow: 0 0 14px rgba(232,0,61,0.45);
}
.blog-faq-item[open] {
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(232,0,61,0.2);
}

/* ── Category cards: lift + glow on hover ────────────────────── */
.blog-vod-cat,
.blog-device-item {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s;
}
.blog-vod-cat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(232,0,61,0.22);
}
.blog-device-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.3), 0 0 0 1px rgba(232,0,61,0.18);
}

/* ── Setup steps: left-side red accent glow on hover ─────────── */
.blog-setup-step {
  transition: box-shadow 0.2s, border-color 0.2s;
}
.blog-setup-step:hover {
  border-color: rgba(232,0,61,0.4);
  box-shadow: inset 3px 0 0 var(--primary), 0 6px 18px rgba(0,0,0,0.25);
}

/* ── Numbered step circle: inner glow pulse ─────────────────── */
.blog-step-num {
  box-shadow: 0 0 0 0 rgba(232,0,61,0);
  transition: box-shadow 0.3s;
}
.blog-setup-step:hover .blog-step-num {
  box-shadow: 0 0 16px rgba(232,0,61,0.5);
}

/* ── Language chips hover glow ───────────────────────────────── */
.blog-vod-lang {
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  cursor: default;
}
.blog-vod-lang:hover {
  background: rgba(232,0,61,0.12);
  border-color: rgba(232,0,61,0.45);
  color: #fff;
  box-shadow: 0 0 10px rgba(232,0,61,0.18);
}

/* ── Payment chips hover ─────────────────────────────────────── */
.blog-price-chip {
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: default;
}
.blog-price-chip:hover {
  background: rgba(232,0,61,0.1);
  border-color: rgba(232,0,61,0.35);
  color: #fff;
}

/* ── Price trust box: glass upgrade ─────────────────────────── */
.blog-price-trust-box {
  background: rgba(19,19,26,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Sport LIVE badge: deeper glass ──────────────────────────── */
.blog-sport-badge {
  background: rgba(10,10,15,0.88);
  box-shadow: 0 2px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ── Pricing cards: lift on hover ────────────────────────────── */
.blog-price-card {
  transition: transform 0.24s ease, border-color 0.22s, box-shadow 0.24s;
}
.blog-price-card:hover {
  transform: translateY(-4px);
}
.blog-price-card--featured:hover {
  transform: translateY(-6px);
}

/* ── FAQ image: subtle lift on hover ─────────────────────────── */
.blog-faq-image img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.blog-faq-image:hover img {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(232,0,61,0.1);
}

/* ── Setup link cards: gradient hover ────────────────────────── */
.blog-setup-link-card:hover {
  background: linear-gradient(
    135deg,
    rgba(232,0,61,0.07) 0%,
    rgba(232,0,61,0.02) 100%
  );
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* ── Final section: stronger ambient glow ────────────────────── */
.blog-final-section::before {
  background: radial-gradient(
    ellipse 90% 60% at 50% 110%,
    rgba(232,0,61,0.13) 0%,
    transparent 65%
  );
}

/* ── VOD stats: hover glow on individual stat ────────────────── */
.blog-vod-stat {
  transition: background 0.2s;
}
.blog-vod-stat:hover {
  background: rgba(232,0,61,0.05);
}

/* ── League items: left accent on hover ──────────────────────── */
.blog-league-item {
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.blog-league-item:hover {
  box-shadow: inset 3px 0 0 var(--primary);
}

/* ── Reduced Motion: alle Animationen deaktivieren ───────────── */
@media (prefers-reduced-motion: reduce) {
  .blog-hero::after,
  .blog-vod-section::after         { animation: none; opacity: 0.4; }
  .blog-price-card--featured        { animation: none; }
  .blog-summary-box::before         { animation: none; }
  .blog-summary-list li::before     { animation: none; }
  .blog-cta-row .btn-primary::after,
  .blog-price-card--featured .btn-primary::after { animation: none; display: none; }
  .blog-faq-answer                  { animation: none; }
  .blog-vod-cat,
  .blog-device-item,
  .blog-price-card                  { transition: border-color 0.2s; transform: none !important; }
  .blog-setup-step:hover            { box-shadow: inset 3px 0 0 var(--primary); transform: none; }
  .blog-faq-image img               { transition: none; transform: none !important; }
}

/* ── Responsive completeness — all blog sections ─────────────── */
/* Ensures no horizontal overflow on very small screens          */
@media (max-width: 400px) {
  .blog-vod-stats    { flex-direction: column; }
  .blog-vod-stat     { border-right: none; border-bottom: 1px solid var(--border); }
  .blog-vod-stat:last-child { border-bottom: none; }

  .blog-price-amount { font-size: 22px; }

  .blog-faq-q-text   { font-size: 13px; }
  .blog-faq-answer   { padding: 0 12px 14px 42px; }

  .blog-cta-row .btn { font-size: 14px; padding: 13px 18px; }
}


/* ============================================================
   BLOG INDEX PAGE — .blogi-* classes
   Mobile-first | Breakpoints: 900px, 600px, 400px
   Design: matches luxury dark system (--primary, --bg, --surface)
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────── */
.blogi-hero {
  padding: 64px 0 48px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.blogi-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 360px;
  background: radial-gradient(ellipse at center, rgba(232,0,61,0.13) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.blogi-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.blogi-hero-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin: 0 0 14px;
}
.blogi-hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #fff 30%, rgba(232,0,61,0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.blogi-hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .blogi-hero::before {
    animation: orb-float 8s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blogi-hero::before { animation: none; }
}

/* ── Section spacing ─────────────────────────────────────── */
.blogi-section { padding: 0 0 72px; }

/* ── Category Filters ────────────────────────────────────── */
.blogi-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.blogi-filter {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  font-family: inherit;
}
.blogi-filter:hover {
  background: rgba(232,0,61,0.1);
  border-color: rgba(232,0,61,0.3);
  color: var(--primary);
  transform: translateY(-1px);
}
.blogi-filter--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.blogi-filter--active:hover {
  background: #c0002e;
  border-color: #c0002e;
  color: #fff;
  transform: translateY(-1px);
}

/* ── Articles Grid ───────────────────────────────────────── */
.blogi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .blogi-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .blogi-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Article Card ────────────────────────────────────────── */
.blogi-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.blogi-card:not(.blogi-card--soon):hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.45);
  border-color: rgba(232,0,61,0.3);
}
@media (prefers-reduced-motion: reduce) {
  .blogi-card { transition: none; }
  .blogi-card:not(.blogi-card--soon):hover { transform: none; }
}

/* Coming soon state */
.blogi-card--soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Card image */
.blogi-card-img-link { display: block; flex-shrink: 0; }
.blogi-card-img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}
.blogi-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blogi-card:not(.blogi-card--soon):hover .blogi-card-img-wrap img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .blogi-card-img-wrap img { transition: none; }
  .blogi-card:not(.blogi-card--soon):hover .blogi-card-img-wrap img { transform: none; }
}

/* Category badge on image */
.blogi-card-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}
.blogi-card-category--soon {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}

/* Card body */
.blogi-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Tags */
.blogi-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.blogi-tag {
  background: rgba(232,0,61,0.1);
  color: var(--primary);
  border: 1px solid rgba(232,0,61,0.2);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Article title */
.blogi-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}
.blogi-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.blogi-card-title a:hover { color: var(--primary); }
.blogi-card-title--muted { color: var(--text-muted); }

/* Excerpt */
.blogi-card-excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blogi-card-excerpt--muted { opacity: 0.65; }

/* Meta row */
.blogi-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  margin-top: auto;
}
.blogi-meta-sep { opacity: 0.35; }
.blogi-meta-date { opacity: 0.85; }

/* CTA button */
.blogi-card-cta {
  align-self: flex-start;
  font-size: 0.875rem;
  padding: 10px 22px;
  margin-top: 4px;
}
.blogi-card-cta--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── CTA Strip ───────────────────────────────────────────── */
.blogi-cta-strip {
  background: var(--surface);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 44px 0;
}
.blogi-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.blogi-cta-title {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
}
.blogi-cta-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}
.blogi-cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .blogi-cta-inner { flex-direction: column; align-items: flex-start; }
  .blogi-cta-btns { width: 100%; }
  .blogi-cta-btns .btn { flex: 1; text-align: center; }
}
@media (max-width: 400px) {
  .blogi-card-body { padding: 16px; }
  .blogi-hero { padding: 48px 0 36px; }
}

/* END BLOG INDEX CSS */


/* ============================================================
   BLOG SPORT SCHWEIZ — Phase 6 CSS
   blog-sport-schweiz.php — tv-schweiz.ch/blog-sport-schweiz/
   New classes: Liga Karten | Sender Layout | Qual | Tables |
                Badges | Price | Setup Steps | VOD | FAQ | CTA
   Design: Luxury Dark — #0a0a0f / #e8003d / glassmorphism
   Mobile-first — breakpoints: 480 / 768 / 1024 / 1200
   ============================================================ */

/* ── Shared Utilities ─────────────────────────────────────── */
.blog-section-figure {
  margin: 2.5rem 0;
  border-radius: 12px;
  overflow: hidden;
}
.blog-section-figure img { width: 100%; height: auto; display: block; }

.blog-section-link {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  font-size: .9rem;
  color: var(--text-muted);
}
.blog-section-link a { color: var(--primary); text-decoration: none; }
.blog-section-link a:hover { text-decoration: underline; }

/* ── §2 Liga Karten ───────────────────────────────────────── */
.blog-liga-section { background: var(--bg); }

.blog-liga-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.5rem 0;
}
@media (min-width: 640px) {
  .blog-liga-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .blog-liga-grid { grid-template-columns: repeat(3, 1fr); }
}

.blog-liga-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: border-color .25s, transform .25s;
}
.blog-liga-card:hover {
  border-color: rgba(232,0,61,.4);
  transform: translateY(-2px);
}

.blog-liga-card-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: .1rem;
}

.blog-liga-card-body { flex: 1; min-width: 0; }

.blog-liga-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .5rem;
  line-height: 1.3;
}

.blog-liga-card-desc {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 .75rem;
}

.blog-liga-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.blog-liga-card-tags span {
  display: inline-block;
  padding: .2rem .55rem;
  background: rgba(232,0,61,.12);
  border: 1px solid rgba(232,0,61,.25);
  border-radius: 999px;
  font-size: .72rem;
  color: #e8003d;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.blog-liga-images-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}
@media (min-width: 768px) {
  .blog-liga-images-row { grid-template-columns: repeat(2, 1fr); }
}
.blog-liga-img-item { margin: 0; }
.blog-liga-img-item img { width: 100%; height: auto; border-radius: 10px; display: block; }
.blog-liga-img-item figcaption { font-size: .8rem; color: var(--text-muted); margin-top: .5rem; padding: 0 .25rem; }

/* ── §3 Sender Layout ─────────────────────────────────────── */
.blog-sender-section { background: var(--surface); }

.blog-sender-img-wrap { margin-top: 2rem; }
.blog-sender-img-wrap figure { margin: 0; }
.blog-sender-img-wrap img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* ── §4 Qualität Layout ───────────────────────────────────── */
.blog-qual-section { background: var(--bg); }

.blog-qual-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .blog-qual-layout { grid-template-columns: 3fr 2fr; }
}

.blog-qual-content { min-width: 0; }

.blog-qual-img-wrap { margin-top: 0; }
.blog-qual-img-wrap figure { margin: 0; }
.blog-qual-img-wrap img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* ── Tables ───────────────────────────────────────────────── */
.blog-table-caption {
  caption-side: top;
  font-size: .78rem;
  color: var(--text-muted);
  text-align: left;
  padding: 0 0 .75rem;
  font-style: italic;
}

.blog-table-note {
  font-size: .8rem;
  color: var(--text-muted);
  margin: .75rem 0 0;
  line-height: 1.5;
}
.blog-table-note a { color: var(--primary); text-decoration: none; }
.blog-table-note a:hover { text-decoration: underline; }

.blog-table-row--highlight td {
  background: rgba(232,0,61,.06);
}
.blog-table-row--highlight td strong { color: #fff; }

.blog-table-row--winner td {
  background: rgba(232,0,61,.12);
  color: #fff;
}
.blog-table-row--winner td:first-child strong { color: var(--primary); }

.blog-table--compare th { white-space: nowrap; }
.blog-table--compare td:nth-child(2),
.blog-table--compare td:nth-child(3) { font-weight: 600; text-align: center; }

/* ── Badges ───────────────────────────────────────────────── */
.blog-badge {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.blog-badge--hd {
  background: rgba(59,130,246,.15);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,.3);
}
.blog-badge--yes {
  background: rgba(16,185,129,.12);
  color: #34d399;
  border: 1px solid rgba(16,185,129,.25);
}

/* ── §5 Price Savings + Features ─────────────────────────── */
.blog-price-savings {
  margin: .5rem 0 1rem;
  padding: .4rem .75rem;
  background: rgba(232,0,61,.12);
  border: 1px solid rgba(232,0,61,.3);
  border-radius: 8px;
  font-size: .82rem;
  color: #fca5a5;
  text-align: center;
}
.blog-price-savings strong { color: #f87171; font-weight: 700; }

.blog-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.blog-price-features li {
  padding-left: 1.25em;
  position: relative;
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.blog-price-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ── §6 Setup Steps ───────────────────────────────────────── */
.blog-setup-section { background: var(--surface); }

.blog-setup-steps-list,
.blog-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.blog-step-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.blog-step-content { flex: 1; min-width: 0; }
.blog-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .4rem;
}
.blog-step-desc {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.blog-step-desc a { color: var(--primary); text-decoration: none; }
.blog-step-desc a:hover { text-decoration: underline; }

.blog-setup-tip {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(232,0,61,.07);
  border: 1px solid rgba(232,0,61,.25);
  border-radius: 12px;
}
.blog-setup-tip-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 .5rem;
}
.blog-setup-tip p:last-child {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── §7 VOD Features ──────────────────────────────────────── */
.blog-vod-section { background: var(--bg); }

.blog-vod-features {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.75rem 0;
}

.blog-vod-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  transition: border-color .2s;
}
.blog-vod-feature:hover { border-color: rgba(232,0,61,.3); }

.blog-vod-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: .15rem;
}

.blog-vod-feature strong {
  display: block;
  font-size: .925rem;
  color: #fff;
  margin-bottom: .25rem;
}
.blog-vod-feature p {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── §8 FAQ Number + Icon ─────────────────────────────────── */
.blog-faq-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: .5rem;
  vertical-align: middle;
}

.blog-faq-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}
.blog-faq-icon::before,
.blog-faq-icon::after {
  content: '';
  position: absolute;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.blog-faq-icon::before { width: 12px; height: 2px; top: 9px; left: 4px; }
.blog-faq-icon::after  { width: 2px; height: 12px; top: 4px; left: 9px; }

details[open] .blog-faq-icon::after { opacity: 0; transform: rotate(90deg); }

/* ── §9 Summary Label ─────────────────────────────────────── */
.blog-summary-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 .75rem;
}

/* ── §9 Final CTA Block ───────────────────────────────────── */
.blog-final-cta {
  margin-top: 3rem;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(232,0,61,.2);
}

.blog-final-cta-img { margin: 0; }
.blog-final-cta-img img { width: 100%; height: auto; display: block; }
.blog-final-cta-img figcaption { padding: .5rem 1.5rem; font-size: .78rem; color: var(--text-muted); }

.blog-final-cta-content {
  padding: 2rem 1.5rem;
  text-align: center;
}
.blog-final-cta-content h3 {
  font-size: 1.35rem;
  color: #fff;
  margin: 0 0 .5rem;
}
.blog-final-cta-content > p:first-of-type {
  font-size: .875rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

.blog-final-cta-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.blog-final-cta-sub {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0;
}
.blog-final-cta-sub a { color: var(--primary); text-decoration: none; }
.blog-final-cta-sub a:hover { text-decoration: underline; }

/* ── Responsive: mobile-first overrides ───────────────────── */
@media (max-width: 640px) {
  .blog-liga-card { flex-direction: column; gap: .75rem; }
  .blog-liga-card-icon { font-size: 1.5rem; }
  .blog-step-item { gap: .875rem; }
  .blog-final-cta-content { padding: 1.5rem 1rem; }
  .blog-final-cta-actions { flex-direction: column; align-items: stretch; }
  .blog-final-cta-actions .btn { text-align: center; }
}

@media (min-width: 768px) {
  .blog-sender-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    align-items: start;
  }
  .blog-sender-img-wrap { margin-top: 0; }
  .blog-vod-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    align-items: start;
  }
  .blog-vod-img-wrap { margin-top: 0; }
  .blog-faq-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    align-items: start;
  }
  .blog-faq-img-wrap { margin-top: 0; }
  .blog-setup-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    align-items: start;
  }
  .blog-setup-img-wrap { margin-top: 0; }
}

@media (min-width: 1024px) {
  .blog-final-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .blog-final-cta-content { text-align: left; }
  .blog-final-cta-actions { justify-content: flex-start; }
}

/* END BLOG SPORT SCHWEIZ CSS */

/* ============================================================
   BLOG SCHWEIZER SENDER CSS
   blog-schweizer-sender.php — Phase 6
   Mobile-first | 400px | 600px | 900px
   Luxury: gradient · glassmorphism · ambient orbs
   prefers-reduced-motion: fully compliant
============================================================ */

/* ── §9 Summary Section: ambient orbs + gradient H2 ─────── */
.blog-summary-section {
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.blog-summary-section::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,0,61,0.09) 0%, transparent 68%);
  top: -80px;
  right: -100px;
  pointer-events: none;
  filter: blur(58px);
  animation: orb-float 12s ease-in-out infinite;
  z-index: 0;
}
.blog-summary-section::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,0,61,0.06) 0%, transparent 70%);
  bottom: -60px;
  left: -80px;
  pointer-events: none;
  filter: blur(52px);
  animation: orb-float 15s ease-in-out infinite reverse;
  z-index: 0;
}
.blog-summary-section > * { position: relative; z-index: 1; }
.blog-summary-section .anl-section-header h2 {
  background: linear-gradient(125deg, #ffffff 0%, #f8f8f8 40%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Summary Box: Title (gradient) + Lead ────────────────── */
.blog-summary-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  background: linear-gradient(130deg, #ffffff 0%, #ffccd6 55%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: shimmer-slide 4s linear infinite;
}

.blog-summary-lead {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

/* ── Trust Badge Row ──────────────────────────────────────── */
.blog-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.blog-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
}

.blog-trust-icon {
  color: #22c55e;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  animation: check-glow 2.8s ease-in-out infinite;
}

/* ── Fazit Body — glassmorphism card ─────────────────────── */
.blog-fazit-body {
  margin-top: 26px;
  padding: 20px 22px;
  background: rgba(19,19,26,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232,0,61,0.18);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
}

.blog-fazit-h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}

.blog-fazit-body p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 10px;
}
.blog-fazit-body p:last-child { margin-bottom: 0; }

/* ── §9 Final CTA in Summary context ─────────────────────── */
.blog-summary-section .blog-final-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.blog-cta-main {
  flex: 1 1 240px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* shine sweep on primary CTA */
.blog-cta-main::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 50%,
    transparent 100%
  );
  animation: btn-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}

.blog-cta-secondary {
  min-width: 160px;
  text-align: center;
}

/* ── §8 FAQ: List container + Image wrap ─────────────────── */
.blog-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.blog-faq-img-wrap {
  width: 100%;
  margin-top: 1.75rem;
  flex-shrink: 0;
}

.blog-faq-img-wrap > figure {
  margin: 0;
}

.blog-faq-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  transition: transform 0.4s ease;
}

.blog-faq-img-wrap figcaption {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 4px 0;
}

/* ── §7 VOD: Content wrapper ─────────────────────────────── */
.blog-vod-content {
  flex: 1;
  min-width: 0;
}

/* ── Ambient orb — FAQ section ───────────────────────────── */
.blog-faq-section {
  position: relative;
  overflow: hidden;
}
.blog-faq-section::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,0,61,0.07) 0%, transparent 68%);
  bottom: -60px;
  left: -80px;
  pointer-events: none;
  filter: blur(50px);
  animation: orb-float 13s ease-in-out infinite;
  z-index: 0;
}
.blog-faq-section > * { position: relative; z-index: 1; }

/* ── prefers-reduced-motion: disable all Blog-3 animations ─ */
@media (prefers-reduced-motion: reduce) {
  .blog-summary-title           { animation: none; }
  .blog-trust-icon              { animation: none; }
  .blog-cta-main::after         { animation: none; }
  .blog-summary-section::before,
  .blog-summary-section::after  { animation: none; opacity: 0.5; }
  .blog-faq-section::before     { animation: none; opacity: 0.4; }
  .blog-faq-img-wrap img        { transition: none; }
}

/* ── Mobile-first: 400px ─────────────────────────────────── */
@media (min-width: 400px) {
  .blog-summary-title   { font-size: 23px; }
  .blog-trust-item      { font-size: 13px; }
  .blog-fazit-h3        { font-size: 16.5px; }
  .blog-fazit-body      { padding: 22px 24px; }
}

/* ── Tablet: 600px ───────────────────────────────────────── */
@media (min-width: 600px) {
  .blog-summary-title   { font-size: 26px; letter-spacing: -0.03em; }
  .blog-summary-lead    { font-size: 15px; }
  .blog-trust-row       { gap: 10px 22px; }
  .blog-trust-item      { font-size: 13.5px; }
  .blog-fazit-body      { padding: 24px 26px; }
  .blog-fazit-h3        { font-size: 17px; }
  .blog-fazit-body p    { font-size: 14px; }
  .blog-cta-main        { flex: 0 0 auto; min-width: 260px; }
  .blog-summary-section .blog-final-cta { justify-content: flex-start; }
}

/* ── Desktop: 900px ──────────────────────────────────────── */
@media (min-width: 900px) {
  .blog-summary-title   { font-size: 30px; }
  .blog-summary-lead    { font-size: 15.5px; }
  .blog-faq-layout      {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2.5rem;
    align-items: start;
  }
  .blog-faq-img-wrap    { margin-top: 0; }
  .blog-faq-img-wrap:hover img { transform: scale(1.015); }
  .blog-vod-layout      {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2.5rem;
    align-items: start;
  }
  .blog-vod-img-wrap    { margin-top: 0; }
  .blog-fazit-body      { padding: 28px 30px; }
  .blog-fazit-h3        { font-size: 18px; }
  .blog-fazit-body p    { font-size: 14.5px; }
}

/* END BLOG SCHWEIZER SENDER CSS */