/* GENERIERT aus build/client/*.css von build/client-bundle.mjs — nicht hier editieren. */
/* ---- build/client/p8-licht.css ---- */
/* Eine Welt mit langsamem Licht (Paket P8). Farben nur über Site-Tokens; Beobachter-Paar --beob-a (Stadt) / --beob-b (du). */
.p8-sl .p8-sl__wahl { display: grid; gap: .25rem; margin-top: .6rem; }
.p8-sl .p8-sl__lbl { margin: .55rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.p8-sl .p8-seg { margin-top: .2rem; }
.p8-sl .srt-seg__btn { min-height: 44px; transition: background-color .2s ease-out, color .2s ease-out, scale .15s ease-out; }
.p8-sl .srt-seg__btn:active, .p8-sl .srt-btn:active, .p8-db button:active { scale: .97; }
.p8-sl__buehne { position: relative; }
.p8-sl .p8-sl__canvas { height: 300px; touch-action: pan-y; cursor: grab; outline-offset: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--beob-a) 12%, var(--surface-2)), var(--surface-2) 70%); }
.p8-sl__canvas:active { cursor: grabbing; }
.p8-sl__canvas:focus-visible { outline: 3px solid var(--accent); }
.p8-sl__nojs { position: absolute; inset: 1rem 1rem auto; margin: 0; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); font-size: .92rem; color: var(--ink-soft); }
.p8-sl--js .p8-sl__nojs { display: none; }
.p8-sl__legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.p8-sl__lg::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: -.05rem; }
.p8-sl__lg--a::before { background: var(--beob-a); }
.p8-sl__lg--b::before { background: var(--beob-b); }
.p8-sl__kbd { margin-top: .5rem; }
.p8-sl .srt-btn { min-height: 44px; transition: border-color .2s ease-out, color .2s ease-out, background-color .2s ease-out, scale .15s ease-out; }
.p8-sl .srt-btn svg { width: 14px; height: 14px; }
.p8-sl__play[aria-pressed="true"] { background: var(--beob-b-soft); border-color: var(--beob-b); color: var(--ink); }
.p8-sl__play .p8-ic-play, .p8-sl__play .p8-ic-pause { transition: opacity .2s ease-out, transform .25s ease-out; transform-origin: 8px 8px; }
.p8-sl__play .p8-ic-pause { opacity: 0; transform: scale(.6) rotate(-90deg); }
.p8-sl__play[aria-pressed="true"] .p8-ic-play { opacity: 0; transform: scale(.6) rotate(90deg); }
.p8-sl__play[aria-pressed="true"] .p8-ic-pause { opacity: 1; transform: none; }

/* Uhren und Werte */
.p8-sl__uhren { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.p8-sl__uhr { padding: .6rem .9rem; border-radius: 12px; border: 1px solid; display: grid; gap: .1rem; }
.p8-sl__uhr span { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.p8-sl__uhr b { font-family: var(--font-display); font-size: clamp(1.1rem, 3.6vw, 1.5rem); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.p8-sl__uhr--a { background: var(--beob-a-soft); border-color: color-mix(in srgb, var(--beob-a) 45%, transparent); }
.p8-sl__uhr--b { background: var(--beob-b-soft); border-color: color-mix(in srgb, var(--beob-b) 45%, transparent); }
.p8-sl__werte .big { font-variant-numeric: tabular-nums; }
.p8-sl[data-p8-modus="rad"] .p8-sl__werte .result-box:nth-child(2) { background: var(--beob-a-soft); border-color: color-mix(in srgb, var(--beob-a) 30%, transparent); }
.p8-sl[data-p8-modus="stadt"] .p8-sl__werte .result-box:nth-child(2) { background: var(--beob-b-soft); border-color: color-mix(in srgb, var(--beob-b) 30%, transparent); }
.p8-sl__werte .result-box { transition: background-color .3s ease-out, border-color .3s ease-out; }

/* Aufträge */
.p8-sl__auftraege { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; }
.p8-sl__auftrag { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .9rem; border-radius: 12px; border: 1px dashed var(--line-strong); font-size: .93rem; color: var(--ink-soft);
  transition: background-color .35s ease-out, border-color .35s ease-out, color .35s ease-out, box-shadow .35s ease-out; }
.p8-sl__auftrag svg { flex: none; margin-top: .1rem; color: var(--ink-faint); }
.p8-sl__auftrag .p8-ic-ok { opacity: 0; }
.p8-sl__auftrag--ok { border-style: solid; border-color: var(--gold); background: var(--gold-soft); color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent); }
.p8-sl__auftrag--ok svg { color: var(--gold); }
.p8-sl__auftrag--ok svg circle:last-of-type { opacity: 0; }
.p8-sl__auftrag--ok .p8-ic-ok { opacity: 1; stroke-dasharray: 16; stroke-dashoffset: 16; animation: p8-haken .35s .1s ease-out forwards; }
@keyframes p8-haken { to { stroke-dashoffset: 0; } }

/* Sehen */
.p8-sl__sehen { margin-bottom: 0; }
.p8-sl__spek { width: 100%; height: auto; display: block; margin-top: .4rem; overflow: visible; }
.p8-sl__spek-grund { fill: var(--surface-2); stroke: var(--line); }
.p8-sl__spek-txt { font: 600 9px var(--font-sans, Inter, system-ui, sans-serif); fill: var(--ink-soft); }
.p8-sl__spek-ruhe { stroke: var(--ink-faint); stroke-dasharray: 2 2; }
.p8-sl__mk { stroke: var(--surface); stroke-width: 1; }
.p8-sl__mk--v { fill: var(--accent); }
.p8-sl__mk--h { fill: var(--beob-b); }
.p8-sl__spek g { transition: transform .3s ease-out; }
.p8-sl__farben { display: grid; gap: .3rem; margin-top: .6rem; font-size: .93rem; }
.p8-sl__farben p { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.p8-sl__farben [data-p8-vorn], .p8-sl__farben [data-p8-hinten] { font-variant-numeric: tabular-nums; }
.p8-sl__swatch { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; transition: background-color .3s ease-out; }
.p8-sl__swatch--aus { background: repeating-linear-gradient(45deg, var(--surface-2) 0 3px, var(--line) 3px 5px) !important; }
.p8-sl__aberr { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: .8rem; align-items: center; margin-top: .8rem; }
.p8-sl__aberr p { margin: 0; font-size: .93rem; }
.p8-sl__aberr-svg { width: 100%; height: auto; }
.p8-sl__ab-grund { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p8-sl__ab-echt { stroke: var(--beob-a); stroke-width: 2; stroke-dasharray: 4 4; }
.p8-sl__ab-lampe { fill: var(--beob-a); }
.p8-sl__ab-sicht { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.p8-sl__ab-bogen { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.p8-sl__ab-du { fill: var(--beob-b); }

@media (max-width: 560px) {
  .p8-sl .p8-sl__canvas { height: 270px; }
  .p8-sl .srt-seg__btn { font-size: .85rem; padding: .45rem .7rem; }
  .p8-sl .p8-sl__knoepfe { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
  .p8-sl__knoepfe .srt-btn { justify-content: center; padding-inline: .5rem; grid-column: span 2; }
  .p8-sl__knoepfe [data-p8-step], .p8-sl__knoepfe [data-p8-reset] { grid-column: span 3; }
  .p8-sl .p8-sl__werte { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .p8-sl__werte .result-box { margin-top: .6rem; padding: .7rem .8rem; }
  .p8-sl__werte .result-box:last-child { grid-column: 1 / -1; }
  .p8-sl__werte .big { font-size: 1.35rem; }
  .p8-sl__werte .sub { font-size: .8rem; }
  .p8-sl__aberr { grid-template-columns: 1fr; }
  .p8-sl__aberr-svg { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .p8-sl *, .p8-sl *::before { transition-duration: .12s !important; }
  .p8-sl__play .p8-ic-play, .p8-sl__play .p8-ic-pause { transform: none !important; }
  .p8-sl__auftrag--ok .p8-ic-ok { animation: none; stroke-dashoffset: 0; }
}
.p8-sl__mk-ic { width: .7rem; height: .7rem; flex: none; }
.p8-sl .srt-field { margin-top: 1.1rem; }