/* GENERIERT aus build/client/*.css von build/client-bundle.mjs — nicht hier editieren. */
/* ---- build/client/p5-photo.css ---- */
/* Photoeffekt mit Helligkeit (Paket P5, client/p5-photo.js). Farben nur über Site-Tokens; die Lichtfarbe setzt das Skript
   als --p5-licht (Spektralfarbe der gewählten Frequenz), --p5-hell = Deckkraft des Strahls. Gold = Licht und Erkenntnis. */
.p5-photo__buehne {
  position: relative; margin-top: 1rem; aspect-ratio: 640 / 300; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, var(--accent)), color-mix(in srgb, var(--ink) 82%, var(--accent)));
  border: 1px solid var(--line); --p5-hell: .44;
}
/* Elektronen: hell auf der dunklen Bühne, deutlich anders als jede Lichtfarbe */
.p5-photo { --p5-elektron: #e9f0ff; }
[data-theme="dark"] .p5-photo { --p5-elektron: #f4f7fb; }
[data-theme="dark"] .p5-photo__buehne { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 85%, var(--accent))); }
.p5-photo__szene, .p5-photo__teilchen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.p5-photo__strahl { fill: var(--p5-licht); opacity: var(--p5-hell); transition: fill .3s ease, opacity .3s ease; }
.is-unsichtbar .p5-photo__strahl { fill: transparent; stroke: var(--p5-licht); stroke-width: 2; stroke-dasharray: 6 6; opacity: calc(var(--p5-hell) + .25); }
.p5-photo__lampe rect { fill: color-mix(in srgb, var(--bg) 20%, #6b6f78); }
.p5-photo__birne { fill: var(--p5-licht); transition: fill .3s ease; }
.p5-photo__lbl { fill: color-mix(in srgb, var(--bg) 82%, transparent); font: 600 14px var(--font-sans); }
[data-theme="dark"] .p5-photo__lbl { fill: var(--ink-soft); }
.p5-photo__platte { fill: #9aa3ad; stroke: #c7cdd4; stroke-width: 1.5; transition: fill .35s ease; }
.p5-photo__buehne.is-funke .p5-photo__platte { animation: p5-funke 900ms ease-out; }
@keyframes p5-funke { 0% { fill: #9aa3ad; } 25% { fill: var(--gold); } 100% { fill: #9aa3ad; } }

.p5-photo__regler { margin-top: 1rem; }
.p5-photo__regler input[type="range"] { height: 44px; }
/* Wert immer in eigener Zeile: sonst springt die Beschriftung beim Ziehen zwischen ein und zwei Zeilen */
.p5-photo__regler .field { flex-basis: 100%; }
.p5-photo__regler .range-val { display: block; min-height: 1.5em; }
@media (max-width: 560px) { .p5-photo__regler .range-val { min-height: 3em; } }

/* Energieskala: Füllung = Energie eines Lichtquants, Marke = Austrittsarbeit (Beschriftung darunter), Überschuss = Bewegungsenergie (Akzent) */
.p5-photo__skala { margin-top: 1rem; padding-bottom: 1.5rem; }
.p5-photo__skala-t { font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 .7rem; }
.p5-photo__bahn { position: relative; height: 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.p5-photo__fuell { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: color-mix(in srgb, var(--gold) 55%, var(--surface-2)); transition: width .25s ease-out; }
.p5-photo__uber { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 0 999px 999px 0; transition: width .25s ease-out; }
.p5-photo.is-ueber .p5-photo__fuell { background: var(--gold); }
.p5-photo__marke { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); }
.p5-photo__marke span { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .74rem; font-weight: 600; color: var(--ink-soft); }

.p5-photo__werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.p5-photo__werte .result-box { margin-top: 0; }
.p5-photo__werte .big { font-variant-numeric: tabular-nums; transition: color .25s ease; }
.p5-photo.is-ueber [data-p5-rate], .p5-photo.is-ueber [data-p5-kin] { color: var(--accent-ink); }
.p5-photo:not(.is-ueber) [data-p5-rate], .p5-photo:not(.is-ueber) [data-p5-kin] { color: var(--ink-faint); }
@media (max-width: 640px) { .p5-photo__werte { grid-template-columns: 1fr; } }
.range-val[data-p5-fval], .range-val[data-p5-hellval] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .p5-photo__strahl, .p5-photo__birne, .p5-photo__platte, .p5-photo__fuell, .p5-photo__uber { transition: opacity .15s linear; }
  .p5-photo__buehne.is-funke .p5-photo__platte { animation: none; }
}