/* ── Schicht 3b: Komponenten-Overrides „Heller Editorial" ─────────────
   Greift NUR unter [data-theme="hell-editorial"]. Höhere Spezifität als
   die Basis-Selektoren → unabhängig von der Ladereihenfolge robust.
   Zweck: was sich mit reinen Token-Vars nicht lösen lässt (hartkodierte
   rgba(255,255,255,…)-Werte aus dem Dark-Theme, invertierte Papier-
   Sektion, Sektions-Rhythmus, Papier-Textur, Theme-Switcher).
   ─────────────────────────────────────────────────────────────────── */

/* ── Papier-Textur: feine warme Körnung auf dem Creme-Grund ───────── */
[data-theme="hell-editorial"] body {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ── Header: helles Glas beim Scrollen ────────────────────────────── */
[data-theme="hell-editorial"] .header.scrolled {
  background: rgba(246, 241, 231, 0.85);
  box-shadow: 0 1px 0 rgba(34, 32, 28, 0.06), 0 8px 28px -16px rgba(34, 32, 28, 0.22);
}

/* ── Sektions-Rhythmus: warme Panels tragen die weißen Karten ─────── */
[data-theme="hell-editorial"] .zt-seminare,
[data-theme="hell-editorial"] .team-teaser,
[data-theme="hell-editorial"] .reviews-section,
[data-theme="hell-editorial"] .faq-section {
  background: var(--color-surface-2);
}

/* ── Karten: weiches Aufliegen statt harter Schatten ──────────────── */
[data-theme="hell-editorial"] .card {
  box-shadow: var(--shadow-card);
}
[data-theme="hell-editorial"] .card:hover {
  box-shadow: var(--shadow-large);
  border-color: rgba(168, 82, 26, 0.32);
}
/* Weißer Sheen verpufft auf Weiß → dezenter warmer Schimmer */
[data-theme="hell-editorial"] .card::before {
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(34, 32, 28, 0.025) 50%,
    transparent 60%
  );
}

/* ── Seminar-Card: Chips/Preis (Dark-rgba war unsichtbar auf Hell) ── */
[data-theme="hell-editorial"] .seminar-card__meta-item {
  background: var(--color-surface-2);
  color: var(--color-text-soft);
}
[data-theme="hell-editorial"] .seminar-card__price {
  background: rgba(168, 82, 26, 0.10);
  color: var(--color-accent);
}

/* ── FAQ: Hover-Tönung dunkel statt weiß ──────────────────────────── */
[data-theme="hell-editorial"] .faq-item {
  background: var(--color-bg);
}
[data-theme="hell-editorial"] .faq-item__question:hover {
  background: rgba(34, 32, 28, 0.03);
}

/* ── Invertierte Papier-/Zitat-Sektion: heller Lesetext darauf ────── */
[data-theme="hell-editorial"] .section-paper,
[data-theme="hell-editorial"] .pull-quote {
  --color-text-soft: #B8AFA2;            /* 7.5:1 auf #22201C */
  --color-border:    rgba(255, 255, 255, 0.12);
}

/* ── Partner-Ticker: Verlaufskanten + Logo-Filter aufs Helle ──────── */
[data-theme="hell-editorial"] .partner-streifen .ticker-wrap::before {
  background: linear-gradient(to right, var(--color-surface), transparent);
}
[data-theme="hell-editorial"] .partner-streifen .ticker-wrap::after {
  background: linear-gradient(to left, var(--color-surface), transparent);
}
/* Reviews-Band: Sektion liegt im Hellen auf --color-surface-2 → Verlaufskanten anpassen */
[data-theme="hell-editorial"] .reviews-ticker-wrap::before {
  background: linear-gradient(to right, var(--color-surface-2), transparent);
}
[data-theme="hell-editorial"] .reviews-ticker-wrap::after {
  background: linear-gradient(to left, var(--color-surface-2), transparent);
}
[data-theme="hell-editorial"] .ticker-item img {
  filter: grayscale(1) opacity(0.5);
}
[data-theme="hell-editorial"] .ticker-item img:hover {
  filter: grayscale(0) opacity(1);
}

/* ── Hero-Portrait-Glow weicher (Tageslicht) ──────────────────────── */
[data-theme="hell-editorial"] .hero__img-wrap::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(194, 97, 31, 0.14) 0%, transparent 70%);
}

/* ── Bildungsscheck-Box: warmer, ruhiger Wash ─────────────────────── */
[data-theme="hell-editorial"] .bildungsscheck-box {
  background: linear-gradient(135deg, rgba(168, 82, 26, 0.08), rgba(126, 88, 54, 0.05));
  border-color: rgba(168, 82, 26, 0.25);
}

/* ════════════════════════════════════════════════════════════════════
   Theme-Switcher (Hell/Dunkel) — Button im Header + Mobile-Menü
   ════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 0.35rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-soft);
  background: transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background var(--transition-fast), transform var(--transition-fast);
}
.theme-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Icon-Logik: Dunkel → Sonne (schaltet auf Hell) · Hell → Mond (schaltet auf Dunkel)
   Spezifität bewusst gleich (0,1,0): NICHT ".theme-toggle svg" nutzen, sonst
   gewinnt die Sammel-Regel und beide Icons erscheinen. */
.theme-toggle__moon { display: none; }
.theme-toggle__sun  { display: block; }
[data-theme="hell-editorial"] .theme-toggle__sun  { display: none; }
[data-theme="hell-editorial"] .theme-toggle__moon { display: block; }

/* Mobile-Variante: Zeile im Vollbild-Menü statt runder Knopf */
.mobile-theme-toggle {
  width: auto;
  height: auto;
  margin: 1rem 0 0;
  padding: 1rem 0;
  gap: 0.85rem;
  justify-content: flex-start;
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.mobile-theme-toggle:hover {
  transform: none;
  color: var(--color-accent);
  border-color: var(--color-border);
}
.mobile-theme-toggle svg { width: 22px; height: 22px; }