/* GENERIERT aus build/client/*.css von build/client-bundle.mjs — nicht hier editieren. */
/* ---- build/client/p7-labs.css ---- */
/* Paket P7: Kern-Waage, Eddingtons Leuchttisch, „Was das Gummituch verschweigt“, hörbare Lichtuhr.
   Farben nur über Theme-Variablen (hell und dunkel). Gold = Licht und Energie. Bewegung 150–350 ms (Waage 600 ms,
   weil ein Balken nachschwingt), bei prefers-reduced-motion nur kurze Überblendungen. */
.p7-lab .p7-lead { margin-top: .4rem; }
.p7-lab .p7-hinweis, .p7-lab .p7-schritt { margin-top: .7rem; font-size: .95rem; color: var(--ink-soft); }
.p7-lab .p7-schritt { font-weight: 600; color: var(--ink); }
.p7-lab .p7-bedeutung, .p7-tuch .p7-fazit { margin-top: 1rem; }
.p7-lab h4, .p7-tuch h4 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 .3rem; color: var(--ink); }
.p7-btn:active, .p7k-teil:active, .p7t-chip:active, .p7-klang:active { scale: .97; }
.p7-btn { transition: border-color .2s, color .2s, background-color .2s, opacity .2s; }
.p7-btn:disabled { opacity: .45; cursor: not-allowed; }
.p7-btn:focus-visible, .p7k-teil:focus-visible, .p7t-chip:focus-visible, .p7-klang:focus-visible,
.p7t-ecl:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.p7-rechnung { margin-top: 1.2rem; }
.p7-rechenweg { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .92rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.p7-lab .result-box .big, .p7-tuch .result-box .big { font-variant-numeric: tabular-nums; }
.p7-lab .result-box .big small { font-family: var(--font-sans); font-size: .9rem; font-weight: 600; color: var(--ink-soft); }

/* ---------------- 1 · Kern-Waage ---------------- */
.p7k-svg { display: block; width: 100%; height: auto; margin-top: 1rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface-2)), var(--surface-2)); overflow: visible; }
.p7k-fuss, .p7k-saeule { fill: var(--line-strong); }
.p7k-skala { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.p7k-skala-mitte { stroke: var(--ink-faint); stroke-width: 2; }
.p7k-arm { stroke: var(--ink-soft); stroke-width: 6; stroke-linecap: round; }
.p7k-zeiger { stroke: var(--ink-soft); stroke-width: 2.5; stroke-linecap: round; }
.p7k-haken { fill: var(--ink-soft); }
.p7k-achse { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 3; }
.p7k-faden { fill: none; stroke: var(--ink-faint); stroke-width: 1.4; }
.p7k-teller { fill: color-mix(in srgb, var(--ink-faint) 30%, var(--surface)); stroke: var(--ink-faint); stroke-width: 1.5; }
.p7k-lbl { font: 600 13px var(--font-sans); fill: var(--ink-soft); }
.p7k-svg text, .p7t-svg text, .p7u-uhren text, .p7u-weg text { text-rendering: geometricPrecision; letter-spacing: 0; }
.p7k-balken, .p7k-schale { transform-box: view-box; transition: transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.p7k-balken { transform-origin: 300px 70px; }
.p7k-tk circle { stroke: var(--surface); stroke-width: 2; }
.p7k-tk text { font: 700 16px var(--font-sans); fill: var(--surface); pointer-events: none; }
.p7k-tk--p circle { fill: var(--accent); }
.p7k-tk--n circle { fill: var(--ink-soft); }
/* rechte Schale: Plätze erscheinen von oben, beim Verschmelzen rücken sie zum Kern zusammen */
[data-p7k-slot] { transform-box: view-box; opacity: 0; transform: translate(0, -46px); transition: transform .35s cubic-bezier(.2, .8, .3, 1.2), opacity .25s; }
[data-p7k-slot].is-da { opacity: 1; transform: none; }
.p7k-schale--r.is-kern [data-p7k-slot] { transform: translate(var(--kx), var(--ky)); transition-duration: .45s; }
.p7k-zone { fill: transparent; stroke: transparent; stroke-width: 2; stroke-dasharray: 6 6; transition: stroke .2s, fill .2s; }
.p7k-schale--r.is-ziel .p7k-zone { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.p7k-blitz { fill: none; stroke: var(--gold); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.p7k-energie { font: 700 14px var(--font-sans); fill: var(--gold); opacity: 0; transition: opacity .35s .25s, transform .5s .25s; transform: translateY(10px); }
.p7k-schale--r.is-kern .p7k-energie { opacity: 1; transform: none; }
.p7k-schale--r.is-kern .p7k-blitz { animation: p7k-blitz .9s .2s ease-out both; }
@keyframes p7k-blitz { 0% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.2); } }
.p7k-tray { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .9rem; }
.p7k-tray__lbl { font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-right: .2rem; }
.p7k-teil { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: var(--shadow-sm); display: inline-grid; place-items: center;
  font: 700 1.05rem var(--font-sans); color: var(--surface); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: opacity .25s, transform .25s, scale .15s; }
.p7k-teil--p { background: var(--accent); }
.p7k-teil--n { background: var(--ink-soft); }
.p7k-teil.is-weg { opacity: .18; transform: scale(.8); cursor: default; }
.p7k-geist { position: fixed; z-index: 200; margin: -24px 0 0 -24px; pointer-events: none; cursor: grabbing; box-shadow: var(--shadow-lg); }
.p7k-out { margin-top: .4rem; }
/* Kennzahl samt Einheit nie umbrechen („u“ allein in der Zeile, Sichtprüfung 06.11.2026) */
.p7k-out .big { font-size: clamp(1.05rem, 2.6vw, 1.45rem); white-space: nowrap; }
.p7k-diff { transition: background-color .35s, border-color .35s; }
.p7k.is-kern .p7k-diff { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.p7k.is-kern .p7k-diff .big { color: var(--gold); }
.p7k-tee { margin-top: 1.4rem; padding-top: .2rem; border-top: 1px solid var(--line); }

/* ---------------- 2 · Leuchttisch ----------------
   Der Leuchttisch leuchtet auch im dunklen Thema hell (wie ein echter): Glas, Sterne und Schilder deshalb mit festen,
   auf hellem Grund lesbaren Farben (Werte von --accent / --gold / --ink des hellen Themas). */
.p7t-svg { display: block; width: 100%; height: auto; margin-top: 1rem; border-radius: var(--radius); }
.p7t-tisch { fill: color-mix(in srgb, var(--gold-soft) 55%, #fffdf6); stroke: var(--line-strong); }
[data-theme="dark"] .p7t-tisch { fill: #ddd4bd; }
.p7t-glas { stroke-width: 1.5; }
.p7t-glas--nacht { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: color-mix(in srgb, var(--accent) 45%, transparent); }
.p7t-glas--ecl { fill: color-mix(in srgb, #b9871f 9%, transparent); stroke: #b9871f; stroke-dasharray: 7 5; }
.p7t-ring { fill: none; stroke: #2f5fd0; stroke-width: 1.8; }
.p7t-ring--fern { stroke-opacity: .8; }
.p7t-punkt { fill: #a06d0c; }
.p7t-korona { fill: color-mix(in srgb, #b9871f 22%, transparent); }
.p7t-mond { fill: #1c1b19; }
.p7t-nr { font: 700 12px var(--font-sans); fill: #234aa8; }
.p7t-schild { font: 600 12px var(--font-sans); fill: #4a4742; }
.p7t-schild--ecl { fill: #7d5a10; }
.p7t-ecl { cursor: grab; touch-action: none; outline: none; }
.p7t-ecl.is-gleiten { transition: transform .32s cubic-bezier(.2, .8, .3, 1.15); }
.p7t-ecl.is-zug { cursor: grabbing; }
.p7t.is-fest .p7t-ecl { cursor: default; touch-action: auto; }
.p7t-ecl:focus-visible .p7t-glas--ecl { stroke-width: 3; stroke-dasharray: none; }
.p7t-hit { fill: transparent; pointer-events: none; cursor: pointer; }
.p7t.is-fest .p7t-hit { pointer-events: all; }
.p7t-wahl { fill: none; stroke: #2f5fd0; stroke-width: 2.5; opacity: 0; transition: opacity .25s, cx .3s, cy .3s; }
.p7t.has-wahl .p7t-wahl { opacity: 1; }
.p7t-chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.p7t-chip:disabled { opacity: .45; cursor: not-allowed; }
.p7t-lesen { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.p7t-lupe-box { margin: 0; flex: none; text-align: center; }
.p7t-lupe-box figcaption { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .2rem; }
.p7t-lupe { width: 112px; height: 112px; display: block; }
.p7t-lupe__rand { fill: color-mix(in srgb, var(--gold-soft) 55%, #fffdf6); stroke: var(--line-strong); stroke-width: .6; }
.p7t-lupe .p7t-ring { stroke-width: .9; }
.p7t-lupe .p7t-punkt { transition: cx .3s, cy .3s; }
.p7t-lupe__radial { stroke: #4a4742; stroke-width: .35; stroke-dasharray: 1 1; }
.p7t-lupe__pfeil { stroke: #a06d0c; stroke-width: .7; }
.p7t-lesung { margin: 0; font-size: .95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.p7t-skala { margin-top: 1.2rem; }
.p7t-du__dot { background: var(--gold) !important; opacity: 0; transition: left .45s cubic-bezier(.2, .8, .3, 1.15), opacity .3s; }
.p7t.has-du .p7t-du__dot { opacity: 1; }
.p7t-du .art-scale__lbl strong { color: var(--gold); }
.p7t.is-feier .p7t-du__dot { animation: p7t-glanz 1.1s ease-out; }
@keyframes p7t-glanz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.p7t-ergebnis { margin-top: .9rem; font-weight: 600; color: var(--ink); min-height: 1.5em; }
.p7t-ergebnis.is-fertig { color: var(--gold); }
@media (max-width: 560px) { .p7t-lupe { width: 92px; height: 92px; } .p7t-lesen { gap: .7rem; } }

/* ---------------- 3 · Was das Gummituch verschweigt ---------------- */
.p7-tuch { margin-top: 1.4rem; }
.p7-tuch > summary { font-size: 1.02rem; }
.p7u-erde-status { margin-top: .6rem; font-size: .95rem; color: var(--ink-soft); min-height: 1.5em; }
.p7u-uhren, .p7u-weg { display: block; width: 100%; max-width: 520px; height: auto; margin-top: .8rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); }
.p7u-boden { stroke: var(--ink-faint); stroke-width: 2; }
.p7u-hoehe { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; }
.p7u-blatt { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 2; }
.p7u-striche { stroke: var(--ink-faint); stroke-width: 1.4; }
.p7u-zeiger { stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; }
.p7u-mitte { fill: var(--ink-soft); }
.p7u-lbl, .p7u-tl, .p7u-al, .p7u-still { font: 600 11px var(--font-sans); fill: var(--ink-soft); }
.p7u-still { fill: var(--ink-faint); font-weight: 500; }
.p7u-achse { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }
.p7u-tick { stroke: var(--ink-faint); stroke-width: 1.2; }
.p7u-optimum { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .55; }
.p7u-bogen { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; transition: stroke .3s, stroke-width .3s; }
.p7u-weg.is-max .p7u-bogen { stroke: var(--gold); stroke-width: 3.4; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 60%, transparent)); }
.p7u-ball { fill: var(--accent-ink); }
.p7u-weg.is-max .p7u-ball { fill: var(--gold); }
.p7u-meter { height: 8px; margin-top: .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.p7u-meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s ease-out, background-color .3s; }
.p7-tuch.is-max .p7u-meter span { background: var(--gold); }
.p7-tuch.is-max .p7u-gewinn { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.p7-tuch.is-max .p7u-gewinn .big { color: var(--gold); }
.p7u-gewinn { transition: background-color .3s, border-color .3s; }

/* ---------------- 4 · Ton-Knopf an der Lichtuhr ---------------- */
.p7-klang-host { position: relative; }
.p7-klang-host > .widget-tag, .p7-klang-host > h3 { padding-right: 52px; }
.p7-klang { position: absolute; top: clamp(.9rem, 2.4vw, 1.5rem); right: clamp(.9rem, 2.4vw, 1.5rem); width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s, scale .15s; }
.p7-klang:hover { border-color: var(--accent); color: var(--accent-ink); }
.p7-klang.is-an { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.p7-klang svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.p7-klang__box { fill: currentColor; fill-opacity: .15; }
.p7-klang__wellen, .p7-klang__aus { transform-box: fill-box; transform-origin: left center; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .3, 1.3); }
.p7-klang__wellen { opacity: 0; transform: scale(.4) rotate(-20deg); }
.p7-klang__aus { opacity: 1; transform: none; transform-origin: center; }
.p7-klang.is-an .p7-klang__wellen { opacity: 1; transform: none; }
.p7-klang.is-an .p7-klang__aus { opacity: 0; transform: scale(.3) rotate(90deg); }
.p7-klang__hint { position: absolute; top: calc(clamp(.9rem, 2.4vw, 1.5rem) + 50px); right: clamp(.9rem, 2.4vw, 1.5rem); max-width: 70%;
  padding: .3rem .65rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .8rem; color: var(--ink-soft);
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.p7-klang__hint.is-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .p7k-balken, .p7k-schale, [data-p7k-slot], .p7t-ecl.is-gleiten, .p7t-wahl, .p7t-du__dot, .p7t-lupe .p7t-punkt, .p7u-meter span,
  .p7-klang__wellen, .p7-klang__aus { transition: opacity .15s; }
  [data-p7k-slot], .p7k-schale--r.is-kern [data-p7k-slot] { transform: none; }
  .p7k-schale--r.is-kern [data-p7k-slot] { transform: translate(var(--kx), var(--ky)); }
  .p7k-schale--r.is-kern .p7k-blitz, .p7t.is-feier .p7t-du__dot { animation: none; }
  .p7k-energie { transform: none; }
}