/* ==== DARK VARIANTE (nur Overrides – HTML/JS bleibt) ==== */

/* Grundpalette dunkel */
:root{
  --ic-ink:#e9f1ff;                 /* Primärtext hell */
  --ic-ink-soft:#c7d2e8;            /* Sekundärtext */
  --ic-muted:#9bb0c9;               /* Muted */
  --ic-surface:#0e121a;             /* Card-BG dunkel */
  --ic-surface-2:#111725;           /* Verlauf/Layer */
  --ic-border:rgba(255,255,255,.06);
  --ic-chip: rgba(255,255,255,.08);
  --ic-brand: var(--brand,#31a8ff);
  --ic-brand2: var(--brand-2,#7c5cff);
}

/* Card: dark glass + dezente Kante */
.ic-plan{
  color:var(--ic-ink);
  background:
    linear-gradient(180deg, rgba(17,23,37,.92), rgba(11,15,24,.92)),
    radial-gradient(120% 120% at 0% 0%, rgba(49,168,255,.08), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(124,92,255,.08), transparent 55%);
  border:1px solid var(--ic-border);
  backdrop-filter:saturate(115%) blur(6px);
  -webkit-backdrop-filter:saturate(115%) blur(6px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* Featured: Glow-Rahmen */
.ic-plan.ic-plan--featured{ transform:translateY(-4px) }
.ic-plan.ic-plan--featured::before{
  content:""; position:absolute; inset:-1.5px; z-index:-1; border-radius:16px;
  background:linear-gradient(135deg, var(--ic-brand), var(--ic-brand2));
  filter:blur(.6px); opacity:.9;
}

/* Header dunkel, Akzentstreifen bleibt */
.ic-plan__title{ font-size:1rem; letter-spacing:.2px; color:var(--ic-ink) }
.ic-plan__tagline{ font-size:.85rem; color:var(--ic-ink-soft) }
.ic-plan__badge{
  background:rgba(49,168,255,.12);
  color:#bcd8ff;
  border:1px solid rgba(49,168,255,.25);
}

/* Preisblock: dunkle Pille */
.ic-plan__price{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ic-price__currency{ font-size:1rem; opacity:.85; color:var(--ic-ink-soft) }
.ic-price__value{ font-size:2rem; font-weight:900; letter-spacing:.1px; color:#fff }
.ic-price__period{ font-size:.85rem; color:var(--ic-ink-soft) }
.ic-price__hint,.ic-billed-note{ color:#a9bad3 }

/* CTA: leuchtet auf dunkel */
.ic-plan__cta{
  height:44px; border-radius:11px; font-size:.95rem; font-weight:800;
  background: linear-gradient(135deg, var(--ic-brand), var(--ic-brand2));
  color:#fff; border:1px solid transparent;
  box-shadow: 0 14px 30px rgba(49,168,255,.28);
}
.ic-plan__cta:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(49,168,255,.38) }

/* Untertitel/Hinweise */
.ic-subtitle{
  margin:8px 0 4px; font-size:.78rem; letter-spacing:.35px;
  color:#9bb0c9; text-transform:uppercase;
}
.ic-note{
  font-size:.85rem; color:#9bb0c9;
  border-top:1px dashed rgba(255,255,255,.08); padding-top:8px;
}

/* Featureliste: helle Checks & ruhiger Text */
.ic-features{ gap:8px }
.ic-features li{
  font-size:.92rem; line-height:1.28; color:#d7e2f7;
  padding-left:32px;
}
.ic-features li::before{
  width:20px; height:20px; left:6px; top:2px; border-radius:50%;
  background: linear-gradient(135deg, var(--ic-brand), var(--ic-brand2));
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9.2 16.2l-3.4-3.4 1.4-1.4 2 2 5-5 1.4 1.4z"/></svg>') center/16px 16px no-repeat;
          mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9.2 16.2l-3.4-3.4 1.4-1.4 2 2 5-5 1.4 1.4z"/></svg>') center/16px 16px no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}

/* Mittlere (featured) Karte: weiße Checks für maximalen Kontrast */
.ic-plan--featured .ic-features li::before{
  background:#fff !important;
  filter: drop-shadow(0 0 1px rgba(14,27,52,.55)) drop-shadow(0 2px 6px rgba(14,27,52,.25));
}

/* Grid & Spacing dezent */
.ic-pricing{ padding: clamp(24px, 4vw, 56px) 12px }
.ic-pricing__inner{ gap:16px }
@media (min-width:900px){ .ic-plan{ padding:20px } }

/* Header-Leiste links bleibt sichtbar auf dunkel */
.ic-plan__head::before{
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
  opacity: .9;
}

/* Abschnittstitel (falls verwendet) auf dunkel */
.section-title{
  color:#e9f1ff; text-align:center; margin: 6px 0 18px;
  font-weight:900; letter-spacing:.3px;
}

/* Header-Panel wirklich komplett transparent machen */
.ic-plan__head{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Falls ein Pseudo-Overlay existiert */
.ic-plan__head::after{ content: none !important; }

/* Auch Kinder-Elemente dürfen kein eigenes BG haben */
.ic-plan__title,
.ic-plan__tagline,
.ic-plan__badge{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}