/* =========================================================
   Farbexperiment: Weiss / Gelb / Neongelb / Anthrazit
   Gelb traegt die Praxisbeispiele; Neon markiert und aktiviert.
   Lesegrund, Textfarbe und Akzent sind bewusst getrennte Rollen.
   Produktansichten, Fotos, Layout und Inhalte bleiben unveraendert.
   ========================================================= */
:root {
  --scheme-yellow: #fdf170;
  --scheme-neon: #e8ff3f;
  --scheme-black: #231f20;
  --bg: #231f20;
  --text: #f7f7f2;
  --accent: var(--scheme-neon);
  --muted: #b7b7ae;
  --border: rgb(247 247 242 / 16%);
  --rahmen-gestrichelt: rgb(247 247 242 / 42%);
  --quote: rgb(247 247 242 / 15%);
  --paper: #2d2a2b;
  --surface: var(--paper);
  --marker: var(--scheme-neon);
  --marker-strength: 42%;
  --scheme-panel: #302d2e;
  --scheme-panel-hover: #3c383a;
  --scheme-ink: var(--text);
  --scheme-muted: #c2beb9;
  --scheme-feature: var(--scheme-panel);   /* anthrazit wie die kleinen Kacheln */
  --scheme-feature-hover: var(--scheme-feature);
  --scheme-project: #2e2b2c;
  --scheme-project-hover: #3b3836;
  --scheme-project-ink: #fafaf7;
  --scheme-project-muted: #d2d0c9;
  --scheme-questions: var(--scheme-panel);
}

:root[data-theme="light"] {
  /* W2: reines Weiss, neutrale Grautoene, Gelb als einziger Akzent */
  --bg: #fff;
  --text: #222;
  --accent: #222;
  --muted: #6e6e6e;
  --border: rgb(0 0 0 / 10%);
  --rahmen-gestrichelt: rgb(0 0 0 / 35%);
  --quote: rgb(0 0 0 / 10%);
  --paper: #fff;
  --marker: var(--scheme-yellow);
  --marker-strength: 100%;
  --scheme-panel: #f4f4f2;
  --scheme-panel-hover: #ebebe7;
  --scheme-ink: #222;
  --scheme-muted: #5e5e5e;
  --scheme-feature: #f4f4f2;
  --scheme-feature-hover: #f4f4f2;
  --scheme-project: #f4f4f2;
  --scheme-project-hover: #ebebe7;
  --scheme-project-ink: #222;
  --scheme-project-muted: #5e5e5e;
  --scheme-questions: #fefbe2;
}

/* Ruhige weisse Leseflaechen statt einer durchgehend gelben Seite. */
:root[data-theme] .site-header,
:root[data-theme] .theme-switch,
:root[data-theme] .lang-switch {
  background: var(--bg);
}

:root[data-theme="light"] .site-header,
:root[data-theme="light"] .theme-switch,
:root[data-theme="light"] .lang-switch {
  background: var(--paper);
}

:root[data-theme] .experiences {
  --xp-muted: var(--muted);
}

/* Die grossen Praxisbeispiele tragen Gelb; kleine Stationskacheln
   und Querverweise bleiben neutral. Alle Praxisbeispiele sind gleichwertig. */
:root[data-theme] .stations,
:root[data-theme] .projekt-liste,
:root[data-theme] .projekt-grid {
  --station-surface: var(--scheme-panel);
  --station-hover: var(--scheme-panel-hover);
  --station-ink: var(--scheme-ink);
  --station-muted: var(--scheme-muted);
}

:root[data-theme] .station--featured,
:root[data-theme] .projekt-kachel {
  --station-surface: var(--scheme-feature);
  --station-hover: var(--scheme-feature-hover);
}

/* Private Projekte bilden den anthrazitfarbenen Gegenpol.
   Die Produkt-Screenshots behalten ihre eigenen Farben. */
:root[data-theme] .station--alle-projekte {
  --station-surface: var(--scheme-project);
  --station-hover: var(--scheme-project-hover);
  --station-ink: var(--scheme-project-ink);
  --station-muted: var(--scheme-project-muted);
}

/* Pfeile auf allen Kacheln in derselben Farbe wie die Kachelschrift */
:root[data-theme] .sidekick-card__arrow { color: inherit; }

:root[data-theme] .sidekick-card,
:root[data-theme] .sidekick-card--one:hover,
:root[data-theme] .sidekick-card--one:focus-visible,
:root[data-theme] .sidekick-card--three:hover,
:root[data-theme] .sidekick-card--three:focus-visible,
:root[data-theme] .sidekick-card--four:hover,
:root[data-theme] .sidekick-card--four:focus-visible {
  --sidekick-surface: var(--scheme-project);
  --sidekick-hover: var(--scheme-project-hover);
  --accent: var(--scheme-neon);
  color: var(--scheme-project-ink);
}

:root[data-theme] .sidekick-card__content > p:last-child {
  color: var(--scheme-project-muted);
}

:root[data-theme] .sidekick-card:focus-visible {
  outline: 2px solid var(--scheme-neon);
  outline-offset: -3px;
}

/* Hero und Fliesstext verwenden denselben klaren Neon-Textmarker.
   Im Dark Mode bleibt die Fuellung dezent fuer hellen Text. */
:root[data-theme] .mark,
:root[data-theme] .lead-hero__statement .hl {
  background-image: linear-gradient(
    transparent 58%,
    color-mix(in srgb, var(--marker) var(--marker-strength), transparent) 58%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Beide Links im Hero (Sag Hallo, LinkedIn) und der LinkedIn-Link auf
   Kontakt einheitlich mit Marker */
:root[data-theme] :is(.lead-hero__links, .kontakt-intro) .arrow-link {
  color: var(--text);
  background-image: linear-gradient(
    transparent 64%,
    color-mix(in srgb, var(--marker) var(--marker-strength), transparent) 64%
  );
}

:root[data-theme] .prose h1.case-titel::after {
  background: var(--scheme-neon);
}

:root[data-theme] .case-ergebnis {
  background: transparent;
}

:root[data-theme] .case-fragen li {
  background: var(--scheme-questions);
  border-color: var(--border);
}

/* Neon ist ein Hintergrund-/Zustandsakzent, keine gelbe Leseschrift
   auf Weiss. Aktive Symbole und Buttontexte bleiben anthrazitfarben. */
:root[data-theme] .nav a.is-active {
  text-decoration: underline;
  text-decoration-color: var(--scheme-neon);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

:root[data-theme] .theme-switch__thumb {
  background: var(--scheme-neon);
}

:root[data-theme="light"] .theme-switch__ico--sun,
:root[data-theme="dark"] .theme-switch__ico--moon {
  color: var(--scheme-black);
}

:root[data-theme] .lang-switch span {
  opacity: .74;
}

:root[data-theme][lang="de"] .lang-switch .lang-de,
:root[data-theme][lang="en"] .lang-switch .lang-en {
  opacity: 1;
  color: var(--scheme-black);
  background: var(--scheme-neon);
}

:root[data-theme] .btn,
:root[data-theme] .compose__send {
  color: var(--scheme-black);
  background: var(--scheme-neon);
  border-color: var(--scheme-black);
}

:root[data-theme] .compose__send {
  box-shadow: inset 0 0 0 1px var(--scheme-black);
}

:root[data-theme] .btn:hover,
:root[data-theme] .compose__send:hover {
  color: var(--scheme-black);
  background: var(--scheme-yellow);
  opacity: 1;
}

:root[data-theme] :is(.nav a, .theme-switch, .lang-switch, .btn, .compose__send, .arrow-link):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

::selection {
  color: var(--scheme-black);
  background: var(--scheme-neon);
}

/* The current About page uses a dark watch display in both themes. */
:root[data-theme] .hero-clock {
  --hc-display-accent: var(--scheme-neon);
}

/* W2 im hellen Modus: Gelb statt Neon fuer Marker, Schalter, Buttons und
   Unterstriche. Pfeile auf hellen Kacheln bleiben anthrazitfarben. */
:root[data-theme="light"] .station--alle-projekte .station__arrow,
:root[data-theme="light"] .sidekick-card,
:root[data-theme="light"] .sidekick-card:is(:hover, :focus-visible) {
  --accent: var(--text);
  --sidekick-hover: var(--scheme-project);
}
:root[data-theme="light"] .prose h1.case-titel::after,
:root[data-theme="light"] .theme-switch__thumb { background: var(--scheme-yellow); }
:root[data-theme="light"] .nav a.is-active { text-decoration-color: var(--scheme-yellow); }
:root[data-theme="light"][lang="de"] .lang-switch .lang-de,
:root[data-theme="light"][lang="en"] .lang-switch .lang-en,
:root[data-theme="light"] .btn,
:root[data-theme="light"] .compose__send { background: var(--scheme-yellow); }
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .compose__send:hover { background: #f7e948; }
:root[data-theme="light"] ::selection { background: var(--scheme-yellow); }
:root[data-theme="light"] .sidekick-card:focus-visible { outline-color: var(--text); }
/* Lebenslauf-Band: ein kraeftigeres Gelb, damit sich die Schichten abheben */
:root[data-theme="light"] .cv-strahl { --accent: #e0bf00; }
:root[data-theme="light"] .cv-strahl__namen > span,
:root[data-theme="light"] .cv-strahl__namen > a,
:root[data-theme="light"] .cv-strahl__namen > span.ist-dunkel { color: rgb(34 34 34 / 72%); }

/* Hover in beiden Modi: Grosse Kacheln mit Titel behalten ihre Flaeche,
   der Titel bekommt den Textmarker (hell Gelb, dunkel Neon wie im
   Fliesstext). Kleine Kacheln und die Liste der weiteren Praxisbeispiele
   werden nur etwas dunkler (hell) bzw. heller (dunkel). */
:root[data-theme="dark"] .sidekick-card:is(:hover, :focus-visible) {
  --sidekick-hover: var(--scheme-project);
}
:root[data-theme] .station-ticker__item:is(:hover, :focus-visible) .station-ticker__titel {
  text-decoration: none;
}
:root[data-theme] .station-ticker__item:is(:hover, :focus-visible) .station-ticker__titel > span,
:root[data-theme] .projekt-kachel:is(:hover, :focus-visible) .projekt-kachel__titel > span,
:root[data-theme] .sidekick-card:is(:hover, :focus-visible) .sidekick-card__content h2 {
  --kachel-marker: color-mix(in srgb, var(--marker) var(--marker-strength), transparent);
  background-image: linear-gradient(transparent 62%, var(--kachel-marker) 62%, var(--kachel-marker) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:root[data-theme] .sidekick-card__content h2 { width: fit-content; }

/* Grafiken in den Case Studies (Beteiligte bei Audi, Feedback-Kugel bei BMW,
   Vergleichsregler bei Audi) im hellen Modus gelb wie Neon im Dunkelmodus;
   Schrift auf gelben Flaechen bleibt anthrazit. */
:root[data-theme="light"] .beteiligte { --accent: #e0bf00; }
:root[data-theme="light"] :is(.ff, .audi-compare) { --accent: var(--scheme-yellow); }
/* Duenne Linien brauchen auf Weiss ein kraeftigeres Gelb */
:root[data-theme="light"] .ff .ff-link { stroke: #e0bf00; }
:root[data-theme="light"] .prose .beteiligte__ich { background: var(--scheme-yellow); color: var(--text); }
:root[data-theme="light"] .beteiligte__knoten.ist-aktiv strong { color: var(--text); }
:root[data-theme="light"] .ff { --ff-oncore: var(--text); }
:root[data-theme="light"] .beteiligte-beispiel__wer {
  background-image: linear-gradient(transparent 58%, color-mix(in srgb, var(--marker) var(--marker-strength), transparent) 58%);
}