/* ============================================================
   LIGHT-MODE · System-weite Ink-Reduktion (Opt-in)
   Aktiviert per `class="light-mode"` am <body> oder URL-Param
   ?mode=light. Adressiert die 5 Top-Hotspots aus INK-AUDIT.md:
   Web-Footer · Web-Hero · Anchor-Nav · Mega-Menu · pkg-card.dark.
   Inline-Sektionen in einzelnen Pages = Phase 2 (separat).
   Setzt components/footer.css, hero-team.css, breadcrumb.css,
   nav.css, sponsors.css und templates.css (.pkg-card) voraus.
   ============================================================ */

/* --- Web-Footer (auf jeder Page injected) --- */
.light-mode .web-footer {
  background: var(--paper);
  color: rgba(14,14,18,0.75);
}
.light-mode .web-footer .footer-halftone {
  background-image: radial-gradient(rgba(14,14,18,0.05) 1.2px, transparent 1.6px);
}
.light-mode .web-footer .footer-brand .crest .name { color: var(--ink); }
.light-mode .web-footer .footer-brand .brand-claim { color: var(--ink); }
.light-mode .web-footer .footer-brand .brand-address { color: rgba(14,14,18,0.75); }
.light-mode .web-footer .footer-brand .brand-address a { color: rgba(14,14,18,0.75); }
.light-mode .web-footer .footer-brand .brand-address strong { color: var(--ink) !important; }
.light-mode .web-footer .footer-brand .social-row a {
  background: rgba(14,14,18,0.08);
  color: var(--ink);
}
.light-mode .web-footer .footer-cols .col h4 { color: var(--ink); }
.light-mode .web-footer .footer-cols .col a { color: rgba(14,14,18,0.75); }
.light-mode .web-footer .footer-cols .col a:hover { color: var(--red); }
.light-mode .web-footer .footer-cols .col a.cta { color: white; }
/* Footer-Bottom auf Sand (warm off-white) */
.light-mode .web-footer .footer-bottom {
  background: var(--sand);
  color: rgba(14,14,18,0.55);
}
.light-mode .web-footer .footer-bottom .legal-links a { color: rgba(14,14,18,0.55); }
.light-mode .web-footer .footer-bottom .legal-links a:hover { color: var(--red); }
.light-mode .web-footer .footer-bottom .meta { color: rgba(14,14,18,0.45); }
.light-mode .web-footer .footer-bottom .meta a { color: rgba(14,14,18,0.45) !important; }

/* --- Web-Hero (.web-hero · Team-Page-Hero) --- */
.light-mode .web-hero {
  background: var(--paper);
  color: var(--ink);
}
.light-mode .web-hero .halftone-bg {
  background-image: radial-gradient(rgba(14,14,18,0.04) 1.2px, transparent 1.6px);
}
.light-mode .web-hero .text .eyebrow { color: rgba(14,14,18,0.55); }
.light-mode .web-hero .text h1 { color: var(--ink); }
.light-mode .web-hero .text p { color: rgba(14,14,18,0.75); }
.light-mode .web-hero .photo-strip .pose::after {
  background: linear-gradient(180deg, rgba(14,14,18,0) 50%, rgba(14,14,18,0.45) 100%);
}
.light-mode .web-hero .photo-strip .pose:nth-child(1)::before {
  background: linear-gradient(90deg, var(--paper) 0%, rgba(250,248,245,0) 30%);
}
.light-mode .web-hero .stats .stat {
  border-right-color: rgba(14,14,18,0.18);
}
.light-mode .web-hero .stats .stat .l { color: rgba(14,14,18,0.55); }

/* --- Anchor-Nav (sticky-Strip auf Pages mit data-sections) --- */
.light-mode .web-anchor-nav {
  background: white;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(14,14,18,0.08);
}
.light-mode .web-anchor-nav .label {
  border-right-color: rgba(14,14,18,0.18);
}
.light-mode .web-anchor-nav a {
  color: rgba(14,14,18,0.55);
}
.light-mode .web-anchor-nav a:hover { color: var(--ink); }
.light-mode .web-anchor-nav a.on { color: var(--ink); }

/* --- Mega-Menu Dropdowns --- */
.light-mode .web-nav .mega {
  background: white;
  color: var(--ink);
  box-shadow: 0 18px 36px rgba(14,14,18,0.12);
  border-top: 1px solid rgba(14,14,18,0.10);
}
.light-mode .web-nav .mega .head { color: var(--ink); border-bottom-color: rgba(14,14,18,0.10); }
.light-mode .web-nav .mega .head small { color: rgba(14,14,18,0.55); }
.light-mode .web-nav .mega a.sub:hover { background: var(--paper); }
.light-mode .web-nav .mega a.sub.on {
  background: linear-gradient(90deg, rgba(226,0,26,0.10) 0%, transparent 100%);
}
.light-mode .web-nav .mega a.sub .ico {
  background: var(--paper);
  color: var(--red);
  border: 1px solid rgba(14,14,18,0.10);
}
.light-mode .web-nav .mega a.sub:hover .ico {
  background: var(--red);
  color: white;
  border-color: var(--red);
}
.light-mode .web-nav .mega a.sub.on .ico {
  background: var(--red);
  color: white;
  border-color: var(--red);
}
.light-mode .web-nav .mega a.sub .text { color: var(--ink); }
.light-mode .web-nav .mega a.sub .text small { color: rgba(14,14,18,0.55); }
.light-mode .web-nav .mega .cta-row { border-top-color: rgba(14,14,18,0.10); }

/* --- spo-spotlight-card.variant-ink → Paper mit roter Border (Hauptsponsor) --- */
.light-mode .spo-spotlight-card.variant-ink {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--red);
}
.light-mode .spo-spotlight-card.variant-ink .label-light { color: rgba(14,14,18,0.65); }
.light-mode .spo-spotlight-card.variant-ink .heading { color: var(--ink); }
.light-mode .spo-spotlight-card.variant-ink .heading .r { color: var(--red); }
.light-mode .spo-spotlight-card.variant-ink p { color: rgba(14,14,18,0.75); }
.light-mode .spo-spotlight-card.variant-ink .num { color: var(--red); opacity: 0.12; }

/* --- pkg-card.dark → wird wie pkg-card.light --- */
.light-mode .pkg-card.dark {
  background: white;
  color: var(--ink);
  border: 1px solid rgba(14,14,18,0.10);
  box-shadow: 0 24px 48px rgba(14,14,18,0.08);
}
.light-mode .pkg-card.dark ul { color: #2A2A33; }
.light-mode .pkg-card.dark .pkg-note { background: var(--paper); color: #5b5853; }
.light-mode .pkg-card.dark .pkg-cta { background: var(--ink); }
.light-mode .pkg-card.outlined {
  background: white;
  color: var(--ink);
  border: 2px solid var(--red);
}
.light-mode .pkg-card.outlined ul { color: #2A2A33; }
.light-mode .pkg-card.outlined .pkg-note { background: var(--paper); color: #5b5853; }

/* --- Dark-Mode-Indikator (Anlass-Modus, nur sichtbar bei ?mode=dark) --- */
/* Light ist seit 30.05.2026 Default — siehe svw-shell.js Mode-Logik. */
body:not(.light-mode)::after {
  content: "Dark Mode · Anlass-Variante · ?mode=dark";
  position: fixed; bottom: 12px; right: 12px;
  background: var(--red); color: white;
  padding: 8px 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.32);
}