@media (prefers-color-scheme: dark) {
  :root {
    /* ── Dark Backgrounds ───────────────────────────────────────────── */
    --bg-page:        #16181D;
    --bg-surface:     #1F2229;
    --bg-card:        #252830;
    --border:         #363840;
    --border-strong:  #4A4D58;

    /* ── Dark Text ──────────────────────────────────────────────────── */
    --text-primary:   #E4E5E8;
    --text-secondary: #9093A0;
    --text-muted:     #5A5D6A;

    /* ── Links bleiben Markenfarben, leicht aufgehellt ──────────────── */
    --link:           #C4154F;
    --link-hover:     #E01C5E;

    /* ── Brand Colors im Dark Mode leicht angepasst ─────────────────── */
    --at-blue:        #2A91E8;
    --at-dark-blue:   #1A7DC8;
    --at-red:         #C4154F;
    --at-dark-red:    #E01C5E;
    --at-white:       #16181D;   /* für Elemente die "white bg" erwarten */

    /* ── Neutrals invertiert ────────────────────────────────────────── */
    --at-black-90:    #E4E5E8;
    --at-black-60:    #9093A0;
    --at-black-30:    #5A5D6A;
    --at-black-15:    #363840;
    --at-black-05:    #1F2229;
  }

  /* Nav und Footer explizit abdunkeln */
  nav.main,
  .topbar,
  footer {
    background: var(--bg-page);
    border-color: var(--border);
  }

  /* Plan-Cards: Featured bleibt dunkel, normale Cards Dark */
  .plan {
    background: var(--bg-card);
    color: var(--text-primary);
  }
  .plan.featured {
    background: #252830;
    border: 1px solid var(--at-blue);
  }

  /* Tabelle */
  .compare-tbl thead {
    background: #252830;
  }

  /* FAQ */
  .faq-list,
  .table-frame {
    background: var(--bg-card);
    border-color: var(--border);
  }
}