/* ─────────────────────────────────────────────────────────────
   THEME.CSS – HELL-MODUS (BRIGHT MODE) FÜR DIE GANZE WEBSITE
   ─────────────────────────────────────────────────────────────
   Das DUNKLE Design ist (und bleibt) die normale Seite: style.css,
   header.css, glow-page.css und die <style>-Blöcke der einzelnen Seiten.
   Diese Datei verändert es NICHT – jede Regel hier beginnt mit
   html[data-theme="light"] und greift deshalb nur, wenn der Besucher im
   Footer auf den Hell/Dunkel-Button gedrückt hat (siehe theme.js; der
   Standard ist immer Dunkel).

   Aufbau
     1.  Farb-Variablen des Hell-Modus
     2.  Grundlagen (Hintergrund, Text, Links, Formulare, Buttons)
     3.  Seitenkopf, Zurück-Link, Infoblöcke, rechtliche Seiten
     4.  Karten, Slider, Poster
     5.  Fotografie: Raster, Kacheln, Grossansicht (Lightbox)
     6.  Header (+ Startseite: transparenter Header über dem Video)
     7.  Footer + Hell/Dunkel-Button
     8.  Hinweisseiten (404 / Coming Soon)
     9.  Einzelne Seiten (Startseite, Über mich, Projekte, Fotografie,
         RUN/Color Grading/BTS, Video-Hero-Seiten, URBNVIBE, Musik, LEGO,
         Sitemap)

   Wichtig beim Ergänzen: Die dunklen Regeln nutzen teils !important oder
   ID-Selektoren – dann braucht die Hell-Regel dasselbe (!important bzw.
   ebenfalls die ID), sonst gewinnt die dunkle.
   ───────────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════
   WEICHER WECHSEL ZWISCHEN DUNKEL UND HELL (siehe theme.js)
   ═════════════════════════════════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.55s;
  animation-timing-function: ease-in-out;
}

/* Ersatz ohne View-Transition-Unterstützung: Farben blenden kurz über. */
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition:
    background-color 0.55s ease,
    color 0.55s ease,
    border-color 0.55s ease,
    fill 0.55s ease,
    stroke 0.55s ease,
    box-shadow 0.55s ease !important;
}


/* ═════════════════════════════════════════════════════════════
   0. HINWEIS-FENSTER VOR DEM WECHSEL ZUM HELLEN DESIGN (theme.js)
   Erscheint nur im Dunkel-Modus und ist deshalb selbst dunkel gehalten
   (kleine Karte, wie die übrigen dunklen Flächen der Seite).
   ═════════════════════════════════════════════════════════════ */
.theme-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.theme-dialog-backdrop.is-open {
  opacity: 1;
}

.theme-dialog {
  width: 100%;
  max-width: 340px;
  padding: 22px 22px 18px;
  color: #cbc8c8;
  background: #16181d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s ease;
}

.theme-dialog-backdrop.is-open .theme-dialog {
  transform: none;
}

.theme-dialog-title {
  margin: 0 0 8px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
}

.theme-dialog-text {
  margin: 0 0 18px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.9rem;
  line-height: 1.55;
  color: #b4b4b8;
}

.theme-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.theme-dialog-btn {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 16px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #cbc8c8;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.theme-dialog-btn:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .theme-dialog-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
    outline: none;
  }
}

.theme-dialog-btn--primary {
  color: #0d0d0d;
  background: #ffffff;
  border-color: #ffffff;
}

.theme-dialog-btn--primary:focus-visible {
  color: #0d0d0d;
  background: #e5e5e5;
  border-color: #e5e5e5;
}

@media (hover: hover) and (pointer: fine) {
  .theme-dialog-btn--primary:hover {
    color: #0d0d0d;
    background: #e5e5e5;
    border-color: #e5e5e5;
  }
}


/* ═════════════════════════════════════════════════════════════
   1. FARB-VARIABLEN
   ═════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  color-scheme: light;

  /* Flächen */
  --lt-bg: #fbfaf5;
  --lt-surface: #f2f0e9;
  --lt-surface-2: #e4e1d8;

  /* Text: stark / Fliesstext / gedämpft */
  --lt-text: #25231f;
  --lt-text-2: #4d4a43;
  --lt-text-3: #78746a;

  /* Linien */
  --lt-line: rgba(37, 35, 31, 0.14);
  --lt-line-soft: rgba(37, 35, 31, 0.08);
  --lt-line-strong: rgba(37, 35, 31, 0.38);

  /* Akzentfarben (--accent-blue/-violet) bleiben im Hell-Modus bewusst
     UNVERÄNDERT wie im Dunkel-Modus: Sie bilden die Verläufe (YouTube-Icon
     beim Hover, Skill-Balken, Timeline, Formular-Fokus). Wo sie als TEXT auf
     Hell zu blass wären, steht unten je eine eigene dunklere Textfarbe. */

  /* Header-Variablen aus header.css */
  --header-surface: #fbfaf5;
  --header-surface-mobile: #f6f4ee;
  --nav-text-idle: rgba(37, 35, 31, 0.55);
  --nav-text-active: #11100d;
  --nav-backdrop-bg: rgba(251, 250, 245, 0.62);

  /* Header-Elemente, die im Dunkel-Modus fest weiss/weiss-transparent
     sind (Hamburger, Rahmen der Sprachwahl, Trennlinien …). Eigene
     Variablen, damit die Startseite sie über dem Video wieder auf Weiss
     stellen kann (siehe Abschnitt 6). */
  --hdr-fg: #25231f;
  --hdr-line: rgba(37, 35, 31, 0.16);
  --hdr-line-strong: rgba(37, 35, 31, 0.4);
  --hdr-hover-bg: rgba(37, 35, 31, 0.07);
  --hdr-divider: rgba(37, 35, 31, 0.12);
}


/* ═════════════════════════════════════════════════════════════
   2. GRUNDLAGEN
   ═════════════════════════════════════════════════════════════ */
html[data-theme="light"],
html[data-theme="light"] body {
  background-color: var(--lt-bg);
  color: var(--lt-text);
}

/* Hero auf der Startseite: liegt über dem Video – Text bleibt wie im
   Dunkel-Modus hell (Titel erbt sonst die dunkle Seitenfarbe). */
html[data-theme="light"] .hero {
  color: #cbc8c8;
}

/* Überschriften/Titel, die im Dunkel-Modus fest weiss sind */
html[data-theme="light"] .projects-title,
html[data-theme="light"] .section-title-left,
html[data-theme="light"] .poster-title,
html[data-theme="light"] .poster-info-single .poster-title {
  color: var(--lt-text);
}

html[data-theme="light"] .poster-meta,
html[data-theme="light"] .poster-info-single .poster-meta,
html[data-theme="light"] .sort-label {
  color: var(--lt-text-3);
}

html[data-theme="light"] .bg-dark {
  background-color: var(--lt-surface);
}

/* Links in der Akzentfarbe ("Alle Projekte ansehen", "Mehr über mich") */
html[data-theme="light"] .see-all-link {
  color: #0066cc;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .see-all-link:hover {
    color: #004a99;
  }
}

/* ─── Kontaktformular ─── */
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea {
  background-color: var(--lt-surface);
  border-color: var(--lt-line);
  color: var(--lt-text);
}

html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder {
  color: var(--lt-text-3);
}

html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form textarea:focus {
  background-image: linear-gradient(#fffefa, #fffefa), var(--accent-gradient);
  box-shadow: 0 0 12px rgba(111, 95, 208, 0.16);
}

html[data-theme="light"] .contact-form-status.is-success {
  color: #1c7a3d;
  background: rgba(40, 167, 90, 0.12);
  border-color: rgba(40, 167, 90, 0.35);
}

html[data-theme="light"] .contact-form-status.is-error {
  color: #b3261e;
  background: rgba(214, 70, 70, 0.1);
  border-color: rgba(214, 70, 70, 0.35);
}

html[data-theme="light"] .contact-form-status.is-sending {
  color: var(--lt-text-3);
  background: rgba(37, 35, 31, 0.04);
  border-color: var(--lt-line-soft);
}

/* ─── Pillen-Buttons (.btn, Formular-Button): dunkle Linie/Schrift auf Hell,
       beim Hover dunkel gefüllt – spiegelbildlich zum Dunkel-Modus ─── */
html[data-theme="light"] .btn,
html[data-theme="light"] .contact-form button,
html[data-theme="light"] .contact-form input[type="submit"] {
  background-color: rgba(37, 35, 31, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(37, 35, 31, 0.35) !important;
  color: var(--lt-text) !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .btn:hover,
  html[data-theme="light"] .contact-form button:hover,
  html[data-theme="light"] .contact-form input[type="submit"]:hover {
    background: #25231f !important;
    background-color: #25231f !important;
    background-image: none !important;
    border-color: #25231f !important;
    color: #ffffff !important;
  }
}

html[data-theme="light"] .btn:active,
html[data-theme="light"] .contact-form button:active,
html[data-theme="light"] .contact-form input[type="submit"]:active {
  background-color: rgba(37, 35, 31, 0.85) !important;
}

/* "Scrollen"-Hinweise MITTEN auf der Seite (nicht der am Video-Hero) */
html[data-theme="light"] .scroll-down-btn--inline {
  color: var(--lt-text-3);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .scroll-down-btn--inline:hover {
    color: var(--lt-text);
  }
}


/* ═════════════════════════════════════════════════════════════
   3. SEITENKOPF, ZURÜCK-LINK, INFOBLÖCKE, RECHTLICHES
   ═════════════════════════════════════════════════════════════ */
html[data-theme="light"] .project-header .tagline {
  color: var(--lt-text-2);
}

html[data-theme="light"] .page-rule {
  background: var(--lt-line);
}

/* "← Fotografie" / "← Wildlife" … über dem Seitentitel */
html[data-theme="light"] .foto-motiv-back {
  color: var(--lt-text-3);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .foto-motiv-back:hover {
    color: var(--lt-text);
  }
}

html[data-theme="light"] .back-btn {
  color: var(--lt-text-3);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .back-btn:hover {
    color: var(--lt-text);
  }
}

html[data-theme="light"] .grading-section {
  border-top-color: var(--lt-line);
}

html[data-theme="light"] .info-content p {
  color: var(--lt-text-2);
}

html[data-theme="light"] .info-content-link {
  color: var(--lt-text);
  border-bottom-color: var(--lt-line-strong);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .info-content-link:hover {
    border-color: var(--lt-text);
  }
}

/* Die kleinen Icons bei "Das Projekt & die Umsetzung" sind im Dunkel-Modus
   per Filter weiss gefärbt (run.html/about.html) – im Hell-Modus schwarz. */
html[data-theme="light"] .info-icons .info-icon {
  filter: brightness(0) !important;
  opacity: 0.8 !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .info-icons:hover .info-icon,
  html[data-theme="light"] .info-icon:hover {
    filter: brightness(0) !important;
    opacity: 0.8 !important;
  }
}

html[data-theme="light"] .heading-violet {
  color: #6f5fd0;
}

html[data-theme="light"] .intro-kicker {
  color: #0a64c8;
}

/* Einzelne Texte haben die helle Dunkel-Modus-Farbe direkt im style-Attribut
   (z.B. Untertitel bei "Color Grading" auf run.html) – nur !important
   schlägt Inline-Styles. */
html[data-theme="light"] [style*="color: #cccccc"] {
  color: var(--lt-text-2) !important;
}

/* Impressum / Datenschutz */
html[data-theme="light"] .legal-content h2 {
  color: var(--lt-text);
}

html[data-theme="light"] .legal-content p,
html[data-theme="light"] .legal-content li {
  color: var(--lt-text-2);
}


/* ═════════════════════════════════════════════════════════════
   4. KARTEN, SLIDER, POSTER
   (Schrift/Verläufe AUF den Bildern bleiben bewusst weiss/dunkel –
    das Bild bestimmt dort den Kontrast, nicht der Seitenmodus.)
   ═════════════════════════════════════════════════════════════ */
html[data-theme="light"] .apple-card {
  box-shadow: 0 20px 40px rgba(37, 35, 31, 0.22);
}

html[data-theme="light"] .poster-img-wrapper {
  box-shadow: 0 8px 20px rgba(37, 35, 31, 0.16);
  border-color: var(--lt-line-soft);
}

html[data-theme="light"] .apple-slider-dots .dot {
  background-color: rgba(37, 35, 31, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .apple-slider-dots .dot:hover {
    background-color: rgba(37, 35, 31, 0.4);
  }
}

html[data-theme="light"] .apple-slider-dots .dot.active {
  background-color: var(--lt-text);
}

/* Über-mich-Bereich (Startseite + über mich): Foto läuft links in die helle
   Seite aus, damit der dunkle Text gut lesbar ist (Spiegelbild des dunklen
   Schatten-Verlaufs im Dunkel-Modus). */
html[data-theme="light"] .about-overlay {
  background: linear-gradient(to right,
      rgba(251, 250, 245, 0.97) 0%,
      rgba(251, 250, 245, 0.92) 28%,
      rgba(251, 250, 245, 0.76) 44%,
      rgba(251, 250, 245, 0.4) 58%,
      transparent 70%);
}

@media (max-width: 640px) {
  html[data-theme="light"] .about-overlay {
    background: linear-gradient(to right,
        rgba(251, 250, 245, 0.96) 0%,
        rgba(251, 250, 245, 0.88) 30%,
        rgba(251, 250, 245, 0.6) 50%,
        transparent 68%);
  }
}

html[data-theme="light"] .about-text {
  color: var(--lt-text-2);
}

html[data-theme="light"] .about-text .section-title,
html[data-theme="light"] .about-text .hl {
  color: var(--lt-text);
}

/* Fehlerseite: grosse "404" */
html[data-theme="light"] .error-code {
  color: var(--lt-text);
  opacity: 0.12;
}

html[data-theme="light"] .error-container h1 {
  color: var(--lt-text);
}

html[data-theme="light"] .error-container p {
  color: var(--lt-text-2);
}


/* ═════════════════════════════════════════════════════════════
   5. FOTOGRAFIE: RASTER, KACHELN, GROSSANSICHT
   ═════════════════════════════════════════════════════════════ */
html[data-theme="light"] .photo-grid-item {
  background: var(--lt-surface-2);
}

/* Grossansicht: heller Hintergrund, dunkle Bedienelemente */
html[data-theme="light"] .photo-lightbox {
  background-color: rgba(251, 250, 245, 0.97);
}

html[data-theme="light"] .photo-lightbox-slide img {
  box-shadow: 0 0 30px rgba(37, 35, 31, 0.22);
}

html[data-theme="light"] .lightbox-nav-btn {
  background: rgba(251, 250, 245, 0.82);
  border-color: rgba(37, 35, 31, 0.2);
  color: var(--lt-text);
  box-shadow: 0 6px 20px rgba(37, 35, 31, 0.16);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .lightbox-nav-btn:hover {
    background: rgba(37, 35, 31, 0.08);
    border-color: rgba(37, 35, 31, 0.4);
  }
}

html[data-theme="light"] .lightbox-thumb {
  border-color: rgba(37, 35, 31, 0.2);
  background: var(--lt-surface-2);
}

html[data-theme="light"] .lightbox-thumb.active {
  border-color: var(--lt-text);
}


/* ═════════════════════════════════════════════════════════════
   6. HEADER
   ═════════════════════════════════════════════════════════════ */
html[data-theme="light"] .navbar,
html[data-theme="light"] .second-navbar {
  border-bottom-color: rgba(37, 35, 31, 0.07);
}

/* Main + Second Header bleiben auch hell EIN System ohne Trennlinie. */
html[data-theme="light"] body.has-second-header .navbar {
  border-bottom-color: transparent;
}

html[data-theme="light"] .mobile-back-arrow,
html[data-theme="light"] .mobile-nav-link,
html[data-theme="light"] .nav-search-toggle--mobile {
  color: var(--hdr-fg);
}

html[data-theme="light"] .mobile-nav-link:active {
  color: var(--nav-text-active);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .mobile-nav-link:hover {
    color: var(--nav-text-active);
  }
}

html[data-theme="light"] .hamburger span {
  background-color: var(--hdr-fg);
}

html[data-theme="light"] .mobile-social .social-icon {
  color: var(--hdr-fg);
  border-color: var(--hdr-fg);
}

/* YouTube-Icon: beim Hover füllt der Blau/Violett-Verlauf den Kreis – das
   Icon bleibt dann weiss (sonst schwarz auf Verlauf). */
html[data-theme="light"] .social-icon:focus-visible {
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .social-icon:hover,
  html[data-theme="light"] .mobile-social .social-icon:hover {
    color: #ffffff;
  }
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .mobile-social .social-icon:hover {
    border-color: transparent;
  }
}

html[data-theme="light"] .nav-lang-toggle {
  border-color: var(--hdr-line);
}

html[data-theme="light"] .nav-lang-toggle:focus-visible,
html[data-theme="light"] .nav-lang-toggle[aria-expanded="true"],
html[data-theme="light"] .nav-lang-option:focus-visible {
  border-color: var(--hdr-line-strong);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .nav-lang-toggle:hover,
  html[data-theme="light"] .nav-lang-option:hover {
    border-color: var(--hdr-line-strong);
  }
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .nav-search-clear:hover {
    background-color: var(--hdr-hover-bg);
  }
}

html[data-theme="light"] .nav-search-divider,
html[data-theme="light"] .mobile-search-divider {
  background-color: var(--hdr-divider);
}

html[data-theme="light"] .nav-search-result {
  border-bottom-color: var(--lt-line-soft);
}

html[data-theme="light"] .nav-search-result-category {
  color: rgba(37, 35, 31, 0.4);
}

html[data-theme="light"] .mobile-nav-link--emphasize {
  border-bottom-color: var(--lt-line);
}

html[data-theme="light"] .mobile-second-nav {
  border-top-color: var(--lt-line);
}

/* Sprachbuttons (Footer + Mobile-Menü) */
html[data-theme="light"] .lang-switcher-btn {
  border-color: rgba(37, 35, 31, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .lang-switcher-btn:hover {
    border-color: rgba(37, 35, 31, 0.45);
  }
}

html[data-theme="light"] .lang-switcher-btn.is-active {
  color: #ffffff;
  background-color: #25231f;
  border-color: #25231f;
}

/* ─── STARTSEITE: TRANSPARENTER HEADER ÜBER DEM HERO-VIDEO ───
   Über dem (immer dunklen) Video braucht der Header weisse Schrift wie im
   Dunkel-Modus. theme.js setzt .header-on-light, sobald der Hero-Bereich
   weggescrollt ist – dann bekommt der Header eine helle, leicht milchige
   Fläche mit dunkler Schrift. Bei geöffnetem Untermenü/Suche/Mobile-Menü
   (deckende helle Fläche) gilt immer die dunkle Schrift. */
html[data-theme="light"] body.transparent-header:not(.header-on-light):not(.menu-open) .header-group:not(.has-open-panel) {
  --nav-text-idle: rgba(255, 255, 255, 0.55);
  --nav-text-active: #ffffff;
  --hdr-fg: #ffffff;
  --hdr-line: rgba(255, 255, 255, 0.15);
  --hdr-line-strong: rgba(255, 255, 255, 0.4);
  --hdr-hover-bg: rgba(255, 255, 255, 0.1);
  --hdr-divider: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] body.transparent-header.header-on-light .header-group:not(.has-open-panel) .navbar {
  background-color: rgba(251, 250, 245, 0.82) !important;
  background: rgba(251, 250, 245, 0.82) !important;
  border-bottom-color: rgba(37, 35, 31, 0.07) !important;
}


/* ─── RUN: HEADER WÄHREND DES TRAILERS DUNKEL (nur Hell-Modus) ───
   run.html setzt html.trailer-dark, solange der Trailer oben läuft und noch
   nicht weggescrollt ist. Nur der Header nimmt die dunklen Werte an und
   blendet beim Zurückwechseln weich über – die Seite selbst wird nicht
   umgeschaltet. */
html[data-theme="light"] .navbar {
  transition: border-color 0.25s ease, background-color 0.45s ease;
}

html[data-theme="light"] .second-navbar {
  transition: opacity 0.2s ease, height 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-bottom-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.45s ease;
}

html[data-theme="light"].trailer-dark body:not(.menu-open) .header-group {
  --header-surface: #101217;
  --nav-text-idle: rgba(255, 255, 255, 0.55);
  --nav-text-active: #ffffff;
  --hdr-fg: #ffffff;
  --hdr-line: rgba(255, 255, 255, 0.15);
  --hdr-line-strong: rgba(255, 255, 255, 0.4);
  --hdr-hover-bg: rgba(255, 255, 255, 0.1);
  --hdr-divider: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"].trailer-dark body:not(.menu-open) .navbar,
html[data-theme="light"].trailer-dark body:not(.menu-open) .second-navbar {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}


/* ═════════════════════════════════════════════════════════════
   7. FOOTER
   ═════════════════════════════════════════════════════════════ */
html[data-theme="light"] .site-footer {
  background: #e8e5dd;
  border-top-color: var(--lt-line-soft);
  color: var(--lt-text-3);
}

html[data-theme="light"] .site-footer .footer-col h3 {
  color: var(--lt-text);
}

html[data-theme="light"] .site-footer .footer-col a,
html[data-theme="light"] .site-footer .footer-legal a,
html[data-theme="light"] .site-footer .footer-meta {
  color: var(--lt-text-3);
}

html[data-theme="light"] .site-footer .footer-col a:focus-visible,
html[data-theme="light"] .site-footer .footer-legal a:focus-visible {
  color: var(--lt-text);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .site-footer .footer-col a:hover,
  html[data-theme="light"] .site-footer .footer-legal a:hover {
    color: var(--lt-text);
  }
}

html[data-theme="light"] .site-footer .footer-sep {
  background: rgba(37, 35, 31, 0.28);
}

/* Hell/Dunkel-Button: Rahmen/Icon kommen aus den Header-Variablen
   (--nav-text-idle/-active) und sind im Hell-Modus bereits dunkel. */

/* ═════════════════════════════════════════════════════════════
   8. HINWEISSEITEN (404.html / comingsoon.html)
   ═════════════════════════════════════════════════════════════ */
html[data-theme="light"] body.glow-page {
  color: var(--lt-text);
  background:
    radial-gradient(circle at 25% 35%,
      rgba(125, 45, 190, 0.2) 0%,
      rgba(125, 45, 190, 0.08) 25%,
      transparent 55%),
    radial-gradient(circle at 75% 65%,
      rgba(70, 170, 255, 0.26) 0%,
      rgba(70, 170, 255, 0.1) 25%,
      transparent 55%),
    #fbfaf5 !important;
  background-attachment: fixed !important;
}

html[data-theme="light"] body.glow-page::before {
  background: rgba(130, 45, 200, 0.14);
}

html[data-theme="light"] body.glow-page::after {
  background: rgba(70, 175, 255, 0.2);
}

html[data-theme="light"] .coming-soon h1 {
  color: var(--lt-text) !important;
}

html[data-theme="light"] .coming-soon p {
  color: var(--lt-text-2) !important;
}

html[data-theme="light"] .coming-soon .coming-soon-back {
  color: var(--lt-text-3);
  border-color: rgba(37, 35, 31, 0.2);
}

html[data-theme="light"] .coming-soon .coming-soon-back:focus-visible {
  color: var(--lt-text);
  border-color: rgba(37, 35, 31, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .coming-soon .coming-soon-back:hover {
    color: var(--lt-text);
    border-color: rgba(37, 35, 31, 0.5);
  }
}


/* ═════════════════════════════════════════════════════════════
   9. EINZELNE SEITEN
   ═════════════════════════════════════════════════════════════ */

/* ─── ÜBER MICH (about.html) ─── */
/* Die Seite färbt <html> und <main> dunkel ein (Lücke unter dem Header
   schliessen) – hell bekommen sie die normale Seitenfarbe; die Abschnitte
   mit .bg-dark bleiben weiss und wechseln so wie im Dunkel-Modus ab. */
html[data-theme="light"] main:has(> #about-intro) {
  background-color: var(--lt-bg);
}

html[data-theme="light"] #about-intro .about-overlay {
  background: linear-gradient(to right,
      rgba(251, 250, 245, 0.97) 0%,
      rgba(251, 250, 245, 0.92) 28%,
      rgba(251, 250, 245, 0.76) 44%,
      rgba(251, 250, 245, 0.4) 58%,
      transparent 70%);
}

html[data-theme="light"] .skill-name,
html[data-theme="light"] .adobe-skill-name,
html[data-theme="light"] .media-card-title {
  color: var(--lt-text);
}

html[data-theme="light"] .skill-bar {
  background: rgba(37, 35, 31, 0.08);
}

html[data-theme="light"] .adobe-skills-title {
  color: #7a74a0;
}

html[data-theme="light"] .adobe-ring-bg {
  stroke: rgba(37, 35, 31, 0.09);
}

html[data-theme="light"] .timeline::before {
  background: linear-gradient(to bottom,
      transparent,
      rgba(37, 35, 31, 0.16) 6%,
      rgba(37, 35, 31, 0.16) 94%,
      transparent);
}

html[data-theme="light"] .timeline-marker {
  background: #8a84ad;
  box-shadow: 0 0 0 4px var(--lt-bg);
}

html[data-theme="light"] .timeline-content p {
  color: var(--lt-text-2);
}

html[data-theme="light"] .timeline-note {
  color: var(--lt-text-3);
}

html[data-theme="light"] .media-card-visual {
  background:
    linear-gradient(var(--ph-angle),
      rgba(74, 168, 255, 0.08) 0%,
      rgba(139, 123, 216, 0.08) 100%),
    #e4e1d8;
  border-color: var(--lt-line-soft);
}

html[data-theme="light"] .media-card-links .see-all-link {
  background: rgba(37, 35, 31, 0.04);
  border-color: var(--lt-line);
}

/* ─── PROJEKTE (projekte.html) ─── */
html[data-theme="light"] .custom-select {
  background: rgba(37, 35, 31, 0.05);
  color: var(--lt-text);
  border-color: var(--lt-line);
}

html[data-theme="light"] .custom-select:focus-visible {
  border-color: rgba(37, 35, 31, 0.3);
  background: rgba(37, 35, 31, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .custom-select:hover {
    border-color: rgba(37, 35, 31, 0.3);
    background: rgba(37, 35, 31, 0.08);
  }
}

html[data-theme="light"] .custom-select option {
  background-color: #fffefa;
  color: var(--lt-text);
}

/* ─── FOTOGRAFIE (fotografie.html): Bild blendet unten in die Seite aus ─── */
html[data-theme="light"] .foto-cover {
  background: var(--lt-bg);
}

html[data-theme="light"] .foto-cover-title {
  color: var(--lt-text);
}

html[data-theme="light"] .foto-cover-desc {
  color: var(--lt-text-2);
}

html[data-theme="light"] .foto-cover:focus-visible .foto-cover-btn {
  border-color: var(--lt-text);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .foto-cover:hover .foto-cover-btn {
    border-color: var(--lt-text);
  }
}

/* ─── BEHIND THE SCENES (bts.html) ─── */
html[data-theme="light"] .bts-back-link {
  color: var(--lt-text-3);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .bts-back-link:hover {
    color: var(--lt-text);
  }
}

/* ─── COLOR GRADING (run.html, colorgrading.html) ─── */
html[data-theme="light"] .grading-label-top {
  color: var(--lt-text-3);
}

html[data-theme="light"] .grading-slider {
  border-color: var(--lt-line-soft);
}

html[data-theme="light"] .grading-example-thumb {
  border-color: rgba(37, 35, 31, 0.15);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .grading-example-thumb:hover {
    border-color: rgba(37, 35, 31, 0.45);
  }
}

html[data-theme="light"] .grading-example-thumb.active {
  border-color: var(--lt-text);
}

/* ─── VIDEO-HERO-SEITEN (RUN, Drohne, URBNVIBE, Musik, LEGO) ───
   Oben liegt ein Vollbild-Video/-Bild (bleibt dunkel, weisse Hinweise
   darauf); beim Scrollen blendet es in die Seitenfarbe aus. Im Hell-Modus
   ist das die helle Seitenfarbe, danach steht dunkle Schrift darauf. */
html[data-theme="light"] .bg-video-overlay {
  background: var(--lt-bg);
}

/* Die Hero-Fläche selbst bleibt wie im Dunkel-Modus schwarz – so sieht der
   Anfang der Seite (Video/Standbild + weisse Hinweise) in beiden Modi gleich
   aus, auch solange das Video noch lädt. */
html[data-theme="light"] .bg-video-container {
  background-color: #0d0d0d;
}

/* ─── URBNVIBE (urbnvibe.html) ─── */
html[data-theme="light"] .urbnvibe-intro,
html[data-theme="light"] .urbnvibe-info,
html[data-theme="light"] .urbnvibe-info-label,
html[data-theme="light"] .urbnvibe-intro h2,
html[data-theme="light"] .urbnvibe-info h2,
html[data-theme="light"] .urbnvibe-creatives-info h2 {
  color: var(--lt-text);
}

html[data-theme="light"] .urbnvibe-intro p,
html[data-theme="light"] .urbnvibe-info-description {
  color: var(--lt-text-2);
}

html[data-theme="light"] .urbnvibe-flyer-grid img {
  box-shadow: 0 15px 40px rgba(37, 35, 31, 0.18);
}

/* ─── MUSIK (musik.html) ─── */
/* Titel hat einen Text-Verlauf (weiss → grau) mit durchsichtiger Füllung –
   nur das Bild des Verlaufs tauschen, nicht den Shorthand (der würde
   background-clip: text zurücksetzen). */
html[data-theme="light"] .musik-intro h1 {
  background-image: linear-gradient(90deg, #25231f, #77777d);
}

html[data-theme="light"] .musik-intro-highlights {
  border-top-color: var(--lt-line);
}

html[data-theme="light"] .intro-highlight-value {
  color: var(--lt-text);
}

/* Song-Titel (Text-Verlauf) und Hintergrund-Glow pro Song:
   Gleiche Farbtöne wie im Dunkel-Modus, nur satter/dunkler, damit sie auf
   der hellen Seite lesbar bleiben (Pastell, Gelb, Hellblau wären auf Hell
   kaum zu sehen); der Glow ist kräftiger, weil er auf Hell sonst
   verschwindet. Keine Karten/Rahmen – die Seite bleibt wie im Dunkel-Modus
   aufgebaut. */
html[data-theme="light"] .musik-section.themed-bg::before {
  opacity: 0.5;
  filter: blur(120px) saturate(1.35);
}

html[data-theme="light"] .theme-starwars .gradient-title {
  background-image: linear-gradient(90deg, #0a9bc4, #0aa874, #3bb8d4, #0a9bc4) !important;
}

html[data-theme="light"] .theme-inception .gradient-title {
  background-image: linear-gradient(90deg, #d90f0f, #1a3fd6, #d90f0f) !important;
}

html[data-theme="light"] .theme-interstellar .gradient-title {
  background-image: linear-gradient(90deg, #7b2ff7, #5a14c9, #9a5ce0, #7b2ff7) !important;
}

html[data-theme="light"] .theme-pirates .gradient-title {
  background-image: linear-gradient(90deg, #e0640f, #d42a0f, #f08a2e, #e0640f) !important;
}

html[data-theme="light"] .theme-avengers .gradient-title {
  background-image: linear-gradient(90deg, #d60f0f, #e03a0a, #c80000, #d60f0f) !important;
}

html[data-theme="light"] .theme-topgun .gradient-title {
  background-image: linear-gradient(90deg, #b87d00, #9c6400, #d19a10, #b87d00) !important;
}

html[data-theme="light"] .theme-victory .gradient-title {
  background-image: linear-gradient(90deg, #2f7fd8, #1f4fd6, #2a8fe0, #2f7fd8) !important;
}

html[data-theme="light"] .theme-wildflower .gradient-title {
  background-image: linear-gradient(90deg, #a45be0, #8a3fd0, #b878f0, #a45be0) !important;
}

html[data-theme="light"] .theme-notimetodie .gradient-title {
  background-image: linear-gradient(90deg, #c8202e, #6a0000, #e05060, #c8202e) !important;
}

html[data-theme="light"] .theme-experience .gradient-title {
  background-image: linear-gradient(90deg, #3f9d2a, #a8861a, #6aa83a, #3f9d2a) !important;
}

html[data-theme="light"] .theme-sadnessandsorrow .gradient-title {
  background-image: linear-gradient(90deg, #4f6d8f, #3a5a82, #7088a8, #4f6d8f) !important;
}

html[data-theme="light"] .theme-f1 .gradient-title {
  background-image: linear-gradient(90deg, #d96000, #c08000, #d0a000, #d96000) !important;
}

html[data-theme="light"] .theme-remember .gradient-title {
  background-image: linear-gradient(90deg, #d98010, #b0450a, #e0a040, #d98010) !important;
}

html[data-theme="light"] .theme-mandalorian .gradient-title {
  background-image: linear-gradient(90deg, #546e7a, #a85e14, #78909c, #546e7a) !important;
}

html[data-theme="light"] .theme-bohemianrhapsody .gradient-title {
  background-image: linear-gradient(90deg, #7a3fb8, #b8901a, #d0a830, #7a3fb8) !important;
}

/* ─── LEGO (lego.html) ───
   Der "dunkle" Bereich oben (Sektion 01) wird hell; der weisse Bereich
   darunter (Sektion 02) und der gelbe Header sind schon in beiden Modi
   gleich. Die LEGO-Regeln sind durchgehend !important – hier ebenso. */
html[data-theme="light"] .lego-dark-wrapper {
  color: var(--lt-text) !important;
}

html[data-theme="light"] .lego-dark-wrapper .lego-info-label {
  color: #b38600 !important;
}

html[data-theme="light"] .lego-dark-wrapper .lego-info-description {
  color: var(--lt-text-2) !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] body.lego-family-studio .lego-channel-btn:hover {
    background: rgb(234, 51, 35) !important;
    background-color: rgb(234, 51, 35) !important;
    border-color: rgb(234, 51, 35) !important;
    color: #ffffff !important;
  }
}

/* LEGO-Footer: im Dunkel-Modus fest dunkel mit weisser Schrift – im
   Hell-Modus hell mit dunkler Schrift (Hover bleibt LEGO-Rot). */
html[data-theme="light"] body.lego-family-studio .site-footer,
html[data-theme="light"] body.lego-family-studio footer {
  background-color: #e8e5dd !important;
  background: #e8e5dd !important;
  color: var(--lt-text) !important;
}

html[data-theme="light"] body.lego-family-studio .site-footer p,
html[data-theme="light"] body.lego-family-studio .site-footer span,
html[data-theme="light"] body.lego-family-studio .site-footer div {
  color: var(--lt-text-2) !important;
}

html[data-theme="light"] body.lego-family-studio .site-footer .footer-col h3 {
  color: var(--lt-text) !important;
}

html[data-theme="light"] body.lego-family-studio .site-footer a,
html[data-theme="light"] body.lego-family-studio .site-footer a:link,
html[data-theme="light"] body.lego-family-studio .site-footer a:visited,
html[data-theme="light"] body.lego-family-studio footer a,
html[data-theme="light"] body.lego-family-studio footer a:link,
html[data-theme="light"] body.lego-family-studio footer a:visited {
  color: var(--lt-text) !important;
}

html[data-theme="light"] body.lego-family-studio .site-footer a:focus,
html[data-theme="light"] body.lego-family-studio .site-footer a:active,
html[data-theme="light"] body.lego-family-studio footer a:focus,
html[data-theme="light"] body.lego-family-studio footer a:active {
  color: #E30613 !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] body.lego-family-studio .site-footer a:hover,
  html[data-theme="light"] body.lego-family-studio footer a:hover {
    color: #E30613 !important;
  }
}

html[data-theme="light"] body.lego-family-studio .site-footer .footer-sep {
  background: rgba(37, 35, 31, 0.3) !important;
}

html[data-theme="light"] body.lego-family-studio .site-footer .social-icon,
html[data-theme="light"] body.lego-family-studio .site-footer .social-icon:link,
html[data-theme="light"] body.lego-family-studio .site-footer .social-icon:visited {
  border: 1px solid var(--lt-text) !important;
  color: var(--lt-text) !important;
}

html[data-theme="light"] body.lego-family-studio .site-footer .social-icon i,
html[data-theme="light"] body.lego-family-studio .site-footer .social-icon * {
  color: var(--lt-text) !important;
  fill: var(--lt-text) !important;
}

html[data-theme="light"] body.lego-family-studio .site-footer .social-icon:focus,
html[data-theme="light"] body.lego-family-studio .site-footer .social-icon:active {
  background-color: #E30613 !important;
  background: #E30613 !important;
  border-color: #E30613 !important;
  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] body.lego-family-studio .site-footer .social-icon:hover {
    background-color: #E30613 !important;
    background: #E30613 !important;
    border-color: #E30613 !important;
    color: #ffffff !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] body.lego-family-studio .site-footer .social-icon:hover i,
  html[data-theme="light"] body.lego-family-studio .site-footer .social-icon:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
}

/* ─── SITEMAP (sitemap.html) ─── */
html[data-theme="light"] .sitemap-divider {
  background: var(--lt-line);
}

html[data-theme="light"] .sitemap-group h2 {
  color: var(--lt-text);
}

html[data-theme="light"] #sitemap-page a {
  color: var(--lt-text-3);
}

html[data-theme="light"] #sitemap-page a.sitemap-lead {
  color: var(--lt-text-2);
}

html[data-theme="light"] #sitemap-page a:focus-visible,
html[data-theme="light"] #sitemap-page a.sitemap-lead:focus-visible {
  color: var(--lt-text);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] #sitemap-page a:hover,
  html[data-theme="light"] #sitemap-page a.sitemap-lead:hover {
    color: var(--lt-text);
  }
}