/* Current Spot · Dunkelfassung der Seiten der Bauart applefam (/apple*, /premium*), 04.10.2026.
   Der Worker hängt diese Datei als letztes Stylesheet in den <head>. Jede Regel beginnt mit
   html[data-theme="dark"], die helle Fassung bleibt dadurch unverändert.
   Palette wie die neuen Seiten (site.css): Grund #000, abgesetzt #111113, Karten #1c1c1e,
   Linien rgba(255,255,255,.12), Schrift #f5f5f7 / #c7c7cc / #98989d, Links #5FD9EC. */

/* Variablen umdefinieren. --brand-deep färbt Links, Dachzeilen und Symbole, deshalb hier helles Cyan.
   Wo es als Fläche dient (Hover der Knöpfe), steht dunkle Schrift darauf. */
html[data-theme="dark"] {
  color-scheme: dark;
  --brand-deep: #5FD9EC;
  --ink: #f5f5f7;
  --ink-soft: #c7c7cc;
  --ink-mute: #98989d;
  --ink-faint: #8e8e93;
  --paper: #000;
  --paper-soft: #111113;
  --paper-edge: #111113;
  --night-card: #1c1c1e;
  --night-line: rgba(255, 255, 255, .12);
}

/* Kopfzeile: gläserne Leiste dunkel, Umschalter Apple / Wear OS wie in den neuen Seiten. */
html[data-theme="dark"] .nav-wrap {
  background: rgba(18, 18, 20, .78);
  border-bottom-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .platform-switch { background: rgba(118, 118, 128, .24); }
html[data-theme="dark"] .platform-switch a { color: var(--ink-soft); }
html[data-theme="dark"] .platform-switch a.active { background: #636366; color: var(--ink); }

/* Primärknöpfe bleiben Markenblau, aber mit schwarzer Schrift (7,7 : 1 statt 2,7 : 1 bei Weiß).
   Beim Überfahren greift --brand-deep, also helles Cyan, ebenfalls mit schwarzer Schrift. */
html[data-theme="dark"] .install-btn,
html[data-theme="dark"] .btn-primary-blue { color: #000; }

/* Verlaufsschrift in Überschriften: auf Schwarz heller auslaufen lassen, wie in Siri und Privatsphäre.
   Nur background-image, damit background-clip: text erhalten bleibt. */
html[data-theme="dark"] h1.hero-title em,
html[data-theme="dark"] h2.section-title em {
  background-image: linear-gradient(135deg, var(--brand), #60d5ff);
}
html[data-theme="dark"] .hero .proof .sep { background: rgba(255, 255, 255, .2); }

/* Weiße Karten und Pillen werden dunkelgraue Karten mit heller Haarlinie. */
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .product-section.dark .feature-card,
html[data-theme="dark"] .compat-card,
html[data-theme="dark"] .early-status,
html[data-theme="dark"] .also-pill {
  background: #1c1c1e;
  border-color: rgba(255, 255, 255, .12);
}

/* Häufige Fragen: fest weißer Abschnitt, Trennlinien hell. */
html[data-theme="dark"] .faq-section { background: var(--paper); }
html[data-theme="dark"] .faq-item { border-bottom-color: rgba(255, 255, 255, .12); }

/* Schwarze Abschnitte, die an schwarze Nachbarn stoßen, bekommen oben eine Haarlinie (ohne Höhenänderung). */
html[data-theme="dark"] .siri-section,
html[data-theme="dark"] .privacy-section,
html[data-theme="dark"] .final-cta,
html[data-theme="dark"] body > footer { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* Schlussaufruf: in Hell ein schwarzer Block, im Dunkeln hebt ihn ein schwacher Markenschein von unten ab. */
html[data-theme="dark"] .final-cta {
  background: radial-gradient(60% 90% at 50% 100%, rgba(0, 169, 224, .16), transparent 70%), var(--night);
}

/* ── Premium-Vergleich (pm-*) ── */
html[data-theme="dark"] .pm-section { border-top-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .pm-col {
  background: #1c1c1e;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
html[data-theme="dark"] .pm-col.premium {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 18px 50px rgba(0, 169, 224, .18);
}
html[data-theme="dark"] .pm-col li { border-top-color: rgba(255, 255, 255, .1); }

/* Kennzeichen und Haken: helles Blau und Grün mit schwarzer Schrift; „Gratis“ als grüne Schrift auf dunkler Tönung. */
html[data-theme="dark"] .pm-tag.free { background: rgba(74, 222, 128, .14); color: #4ade80; }
html[data-theme="dark"] .pm-tag.prem { background: linear-gradient(135deg, #00A9E0, #5FD9EC); color: #000; }
html[data-theme="dark"] .pm-ck { color: #000; }
html[data-theme="dark"] .pm-prem .pm-ck { background: linear-gradient(135deg, #00A9E0, #5FD9EC); }

html[data-theme="dark"] .pm-xdev { border-color: rgba(255, 255, 255, .2); }
html[data-theme="dark"] .pm-price { border-color: rgba(255, 255, 255, .14); }
/* Tönung der Jahreskarte nur .08, sonst fällt die graue Kleinschrift (.u) unter 4,5 : 1. */
html[data-theme="dark"] .pm-price.best { border-color: var(--brand); background: rgba(0, 169, 224, .08); }
html[data-theme="dark"] .pm-price .save { color: #000; }