/* BrickPlan.AI Kern · Seite "So funktioniert der Kern" (Klemmbaustein-Stil). Baut auf den Tokens in app.css auf. */
:root {
  --lego-red: #c91a09; --lego-yellow: #f2cd37; --lego-blue: #0055bf; --lego-green: #237841; --lego-purple: #6b3fa0;
  --lego-gray: #a0a5a9; --lego-dark: #1b2a34; --lego-orange: #fe8a18; --lego-white: #f4f4f4;
  --k-stud: rgba(255,255,255,.35); --k-stud-shadow: rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) { :root { --k-stud: rgba(255,255,255,.22); --k-stud-shadow: rgba(0,0,0,.4); } }

.k-top .brand strong { white-space: nowrap; }
.k-banner { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 16px;
  background: var(--lego-yellow); color: #3a2f00; font-size: var(--fs-sm); border-bottom: 1px solid #d9b62a; }
.k-banner strong { text-transform: uppercase; letter-spacing: .06em; }
.k-main { max-width: 1280px; margin: 0 auto; padding: var(--gap); display: flex; flex-direction: column; gap: var(--gap); }
.k-main section[hidden] { display: none; }
.k-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 16px 0; max-width: 1280px; margin: 0 auto; }
.k-tabs .brick { font-weight: 650; }
.k-tabs .brick[aria-selected=true] { outline: 3px solid var(--text); outline-offset: 2px; }
.k-intro { font-size: 1.02rem; max-width: 70ch; margin: 0 0 6px; }
.k-sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 10px; }

/* Stein-Element: Noppenreihe oben per Hintergrundbild, leichter 3D-Rand */
.brick { --c: var(--lego-red); --t: #fff; position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 9px;
  padding: 11px 16px 10px; border: 0; border-radius: 4px; background: var(--c); color: var(--t); cursor: pointer; font: inherit;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .12s; text-align: left; }
.brick::before { content: ""; position: absolute; left: 10px; right: 10px; top: -8px; height: 9px;
  background-image: radial-gradient(ellipse 6px 4px at 8px 5px, var(--c) 5.5px, transparent 6px); background-size: 18px 9px;
  background-repeat: repeat-x; filter: brightness(1.18); }
.brick:hover { transform: translateY(-2px); box-shadow: inset 0 -4px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.18), 0 6px 12px rgba(0,0,0,.22); }
.brick:active { transform: translateY(1px); }
.brick:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.brick.yellow { --c: var(--lego-yellow); --t: #2b2300; } .brick.blue { --c: var(--lego-blue); } .brick.green { --c: var(--lego-green); }
.brick.red { --c: var(--lego-red); } .brick.purple { --c: var(--lego-purple); } .brick.gray { --c: var(--lego-gray); --t: #16191c; }
.brick.dark { --c: var(--lego-dark); } .brick.white { --c: var(--lego-white); --t: #1b1f24; } .brick.orange { --c: var(--lego-orange); --t: #2b1500; }
.brick.small { padding: 7px 12px 6px; font-size: var(--fs-sm); margin-top: 7px; }
.brick.small::before { top: -6px; height: 7px; background-size: 14px 7px; background-image: radial-gradient(ellipse 4.5px 3px at 6px 4px, var(--c) 4px, transparent 4.5px); left: 7px; right: 7px; }
.brick.active { outline: 3px solid var(--text); outline-offset: 2px; }
.brick[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* Ueberblick: Modulreihe + Datenfluss */
.k-flow { position: relative; padding: 18px 8px 10px; }
.k-row { display: flex; flex-wrap: wrap; gap: 14px 10px; align-items: flex-end; }
.k-row .brick { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 128px; }
.k-row .brick .id { font-size: .68rem; opacity: .8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.k-row .arrow { color: var(--muted); font-size: 1.1rem; align-self: center; padding-bottom: 4px; }
.k-token { position: absolute; width: 34px; height: 24px; border-radius: 4px; background: var(--lego-orange); pointer-events: none;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.3); z-index: 3; display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; color: #2b1500; transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1), transform .25s; opacity: 0; }
.k-token.on { opacity: 1; }
.k-token::before { content: ""; position: absolute; left: 5px; right: 5px; top: -6px; height: 7px;
  background-image: radial-gradient(ellipse 4.5px 3px at 6px 4px, var(--lego-orange) 4px, transparent 4.5px); background-size: 12px 7px; background-repeat: repeat-x; filter: brightness(1.15); }
.k-flowbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.k-flowcap { min-height: 1.4em; font-size: var(--fs-sm); color: var(--muted); flex: 1 1 260px; }
.k-modcard { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 12px; }
.k-modcard[hidden] { display: none; }
.k-modcard .full { grid-column: 1 / -1; }
.k-modcard h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.k-modcard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: var(--fs-sm); }
.k-modcard dt { color: var(--muted); } .k-modcard dd { margin: 0; }
.k-modcard code { font-size: .8rem; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
.k-modcard ul { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-sm); }
@media (max-width: 760px) { .k-modcard { grid-template-columns: 1fr; } }

/* Spielmodus */
.k-score { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.k-score .st { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.k-score .st.done { background: var(--lego-green); color: #fff; border-color: var(--lego-green); }
.k-score .st.fail { background: var(--lego-red); color: #fff; border-color: var(--lego-red); }
.k-score .st.cur { outline: 2px solid var(--focus); }
.k-score .pts { margin-left: auto; font-weight: 700; }
.k-fmts { display: flex; flex-wrap: wrap; gap: 12px 10px; margin: 6px 0 10px; }
.k-fmts .brick { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 110px; }
.k-fmts .brick small { opacity: .85; font-weight: 400; font-size: .72rem; }
.k-fmthint { min-height: 1.3em; font-size: var(--fs-sm); color: var(--muted); margin: 0 0 8px; }
.k-game { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .k-game { grid-template-columns: 1fr; } }
.k-game .timeline { max-height: 60vh; }
.k-station { min-height: 240px; }
.k-station h3 { margin: 0 0 4px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k-station .badge { margin-left: auto; }
.k-station p { margin: 6px 0; font-size: var(--fs-sm); }
.k-station .lead { font-size: var(--fs); }
.k-ctl { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; margin: 10px 0; font-size: var(--fs-sm); }
.k-ctl input[type=range] { width: 100%; accent-color: var(--lego-red); }
.k-ctl output { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 5ch; text-align: right; }
.k-result { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); font-size: var(--fs-sm); margin: 8px 0; }
.k-result strong { font-size: 1rem; }
.k-result.ok { border-color: var(--ok); } .k-result.warn { border-color: var(--warn); } .k-result.bad { border-color: var(--err); }
.k-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.k-quiz { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.k-quiz .brick.right { --c: var(--lego-green); } .k-quiz .brick.wrong { --c: var(--lego-gray); --t: #16191c; }
.k-svg { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.k-svg text { font-family: var(--font); fill: var(--text); }
.k-svg .muted { fill: var(--muted); }
.k-bar { height: 16px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; position: relative; }
.k-bar > span { display: block; height: 100%; background: var(--lego-green); transition: width .3s; }
.k-bar.over > span { background: var(--lego-red); }
.k-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.k-ampel { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 8px 0; }
.k-ampel .row { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-sm); background: var(--surface-2); }
.k-ampel .row.pending { opacity: .55; }
.k-ampel .val { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.k-final { text-align: center; padding: 18px 10px; }
.k-final h3 { font-size: 1.5rem; margin: 6px 0; justify-content: center; }
.k-final .tower { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 90px; margin: 10px 0; }
.k-final .tower span { width: 36px; border-radius: 3px; animation: rise .5s both; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22); }
@keyframes rise { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.k-palette { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; align-items: flex-end; }
.k-wall { width: 100%; height: auto; display: block; }
.k-wall rect.lower { fill: var(--lego-gray); stroke: rgba(0,0,0,.35); }
.k-wall rect.upper { fill: var(--lego-red); stroke: rgba(0,0,0,.35); }
.k-wall rect.kern { fill: var(--lego-blue); stroke: rgba(0,0,0,.35); }
.k-wall rect.empty { fill: none; stroke: var(--muted); stroke-dasharray: 3 3; }
.k-wall .joint { stroke: var(--lego-red); stroke-width: 3; }
.k-wall .joint.ok { stroke: var(--lego-green); }
.k-wall circle { fill: rgba(255,255,255,.4); }

/* 3D-Vorfuehrung */
.k-3d-wrap { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--viewer-bg); height: clamp(320px, 60vh, 720px); border: 1px solid var(--border); }
.k-3d { position: absolute; inset: 0; } .k-3d canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.k-3d-empty { position: absolute; inset: 0; display: grid; place-content: center; color: var(--muted); text-align: center; padding: 20px; }
.k-3d-empty[hidden] { display: none; }
.k-3d-hud { position: absolute; left: 10px; top: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-sm); box-shadow: var(--shadow); pointer-events: none; max-width: min(300px, calc(100% - 20px)); }
.k-3d-hud strong { display: block; }
.k-3d-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 10px; }
@media (max-width: 700px) { .k-3d-ctl { grid-template-columns: 1fr; } }
.k-3d-ctl .range { flex: none; }
.k-3d-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 900px) { .k-3d-side { grid-template-columns: 1fr; } }
.k-3d-side .timeline { max-height: 320px; }
.k-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.k-steps li { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: start; padding: 5px 4px; border-bottom: 1px solid var(--border); }
.k-steps .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); margin-top: 5px; }
.k-steps .detail { color: var(--muted); }

/* Glossar */
.k-gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.k-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.k-table th, .k-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.k-table th { color: var(--muted); font-weight: 600; }
.k-table td.num, .k-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-terms dt { font-weight: 650; margin-top: 8px; } .k-terms dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.k-kbd { font-size: .75rem; color: var(--muted); }
kbd { font: .75rem ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface-2); }
.k-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .k-token { transition: none; } .k-final .tower span { animation: none; } }

/* ---------------------------------------------------------------- 5 Alle Funktionen (kern-funktionen.js, kern-stage.js; 05.10.) */
.k-row .brick .k-new { position: absolute; right: -6px; top: -14px; background: var(--lego-orange); color: #2b1500; font-size: .6rem; font-weight: 700;
  padding: 1px 5px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.k-fn-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 0; }
.k-fn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--gap); }
.k-fn { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 80px; }
.k-fn.soon { border-style: dashed; }
.k-fn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k-fn-head .brick { margin-top: 4px; min-width: 34px; justify-content: center; }
.k-fn-head h3 { margin: 0; font-size: 1.02rem; flex: 1 1 160px; }
.k-fn-badge { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.k-fn-badge.neu { background: var(--lego-orange); border-color: #d9700c; color: #2b1500; }
.k-fn-badge.soon { background: transparent; border-style: dashed; color: var(--warn); border-color: var(--warn); }
.k-fn-prev { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--viewer-bg); border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; }
.k-fn-prev[data-prev=stage], .k-pv-slot { cursor: pointer; }
.k-fn-prev > img.k-snap, .k-pv-slot > img.k-snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-fn-ph { position: absolute; inset: auto 0 0 0; padding: 6px 10px; font-size: .74rem; color: var(--muted); text-align: center; }
.live > .k-fn-ph, .live > img.k-snap { display: none; }
.k-stage { position: absolute; inset: 0; }
.k-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.k-stage-cap { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 3px 8px; font-size: .74rem; box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-stage-cap[hidden] { display: none; }
.k-fn-what { margin: 0; font-size: var(--fs-sm); }
.k-fn-how { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: var(--fs-sm); }
.k-fn-how dt { font-weight: 600; white-space: nowrap; } .k-fn-how dd { margin: 0; color: var(--muted); }
@media (max-width: 420px) { .k-fn-how { grid-template-columns: 1fr; } .k-fn-how dd { margin-bottom: 4px; } .k-fn-how dt { white-space: normal; } }
.k-fn .k-actions { margin-top: auto; padding-top: 4px; }
.k-fn .msg { margin: 0; }
/* Vorschau-Bausteine */
.k-pv-cap { position: absolute; left: 8px; right: 8px; bottom: 6px; font-size: .74rem; color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-radius: 6px; padding: 2px 6px; min-height: 1.3em; }
.k-pv-cap:empty { display: none; }
.k-pv-tag { position: absolute; right: 8px; top: 6px; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); z-index: 1; }
.k-pv-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 8px 30px; height: 100%; box-sizing: border-box; }
.k-pv-thumbs figure { margin: 0; position: relative; border-radius: 6px; overflow: hidden; border: 2px solid transparent; background: var(--surface); transition: border-color .3s, transform .3s; min-height: 0; }
.k-pv-thumbs figure.on { border-color: var(--lego-orange); transform: scale(1.04); z-index: 1; }
.k-pv-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-pv-thumbs figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: .62rem; font-weight: 650; text-align: center; background: rgba(0,0,0,.55); color: #fff; padding: 1px 2px; }
.k-pv-dwg { display: grid; place-items: center; height: 100%; font-weight: 800; color: var(--lego-blue); }
.k-pv-files { list-style: none; margin: 0; padding: 22px 10px 30px; display: flex; flex-direction: column; gap: 4px; font-size: .78rem; }
.k-pv-files li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
.k-pv-files .nm { font-family: ui-monospace, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-pv-files .role { padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); opacity: .35; transition: opacity .3s, background .3s; white-space: nowrap; }
.k-pv-files li.set .role { opacity: 1; color: #fff; background: var(--lego-blue); }
.k-pv-files li.set .role.r2, .k-pv-files li.set .role.r3 { background: var(--lego-purple); } .k-pv-files li.set .role.r4 { background: var(--lego-red); }
.k-pv-files li.set .role.r5 { background: var(--lego-gray); color: #16191c; }
.k-pv-plan { border: 0; background: transparent; height: calc(100% - 44px); margin-bottom: 30px; }
.k-pv-plan .plan { fill: none; stroke: var(--text); stroke-width: 2.5; }
.k-pv-plan .cell { fill: var(--lego-red); opacity: .85; animation: rise .25s both; }
.k-pv-plan .noise { stroke: var(--muted); fill: none; stroke-width: 1; transition: opacity .5s; } .k-pv-plan .noise text { fill: var(--muted); stroke: none; font-size: 9px; }
.k-pv-plan .bar rect { fill: var(--text); } .k-pv-plan .bar rect.w { fill: var(--surface); stroke: var(--text); } .k-pv-plan .bar text { font-size: 8px; fill: var(--muted); }
.k-pv-plan .bar.on rect { fill: var(--lego-orange); }
.k-pv-mass { margin: 8px; width: calc(100% - 16px); background: var(--surface); border-radius: 6px; }
.k-pv-mass tr { animation: rise .4s both; }
.k-pv-bar { display: inline-block; min-width: 64px; padding: 1px 4px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--lego-green) 45%, transparent) var(--w), transparent var(--w)); }
.k-pv-bar.over { background: linear-gradient(90deg, color-mix(in srgb, var(--lego-red) 45%, transparent) var(--w), transparent var(--w)); }
.k-pv-keys { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; padding: 4px 8px 28px; }
.k-pv-keys kbd { transition: background .2s, transform .2s; } .k-pv-keys kbd.on { background: var(--lego-orange); color: #2b1500; transform: translateY(1px); }
.k-fn-prev .k-svg { border: 0; background: transparent; }
.k-fn-prev .studs circle { fill: color-mix(in srgb, var(--muted) 25%, transparent); }
.k-fn-prev .sel rect { fill: var(--lego-red); stroke: var(--lego-orange); stroke-width: 3; }
.k-fn-prev .sel { transition: transform .35s, opacity .35s; } .k-fn-prev .sel .lift { font-size: 10px; fill: var(--text); }
.k-pv-q { margin: 10px 10px 4px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.k-pv-parts { list-style: none; margin: 0 10px; padding: 0; font-size: .76rem; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: hidden; }
.k-pv-parts li { animation: rise .3s both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-pv-parts code { font-size: .72rem; background: var(--surface); padding: 0 4px; border-radius: 4px; }
.k-fn-prev[data-prev=catalog] > .muted { padding: 0 10px 28px; font-size: .7rem; }
.k-fn-prev[data-prev=catalog] { justify-content: flex-start; }
.k-pv-cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 100%; padding: 4px; box-sizing: border-box; }
.k-pv-pane { position: relative; border-radius: 6px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.k-pv-pane > img { width: 100%; height: 100%; object-fit: contain; }
.k-pv-ptitle { position: absolute; left: 4px; top: 4px; z-index: 2; font-size: .62rem; font-weight: 650; background: var(--surface); border-radius: 4px; padding: 0 4px; }
.k-pv-slot { position: absolute; inset: 0; }
.k-pv-slot .k-stage-cap { display: none; }
.k-pv-sb .plate { fill: color-mix(in srgb, var(--lego-green) 25%, var(--surface)); }
.k-pv-sb .pb { stroke: rgba(0,0,0,.35); animation: rise .25s both; }
.k-pv-sb .ghost { fill: none; stroke-width: 3; stroke-dasharray: 5 3; transition: all .3s; } .k-pv-sb .ghost.ok { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 20%, transparent); }
.k-pv-sb .ghost.bad { stroke: var(--err); fill: color-mix(in srgb, var(--err) 20%, transparent); } .k-pv-sb .ghost.float { stroke: var(--lego-orange); fill: color-mix(in srgb, var(--lego-orange) 25%, transparent); }
.k-pv-sb .ghost.hidden { opacity: 0; }
.k-fn-prev[data-prev=chat] { justify-content: flex-start; padding: 8px; gap: 6px; aspect-ratio: auto; min-height: 230px; }
.k-pv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.k-pv-chips .chip { font: inherit; font-size: .72rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 2px 8px; cursor: pointer; }
.k-pv-chips .chip:hover { border-color: var(--lego-purple); }
.k-pv-chatform { display: flex; gap: 6px; } .k-pv-chatform input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.k-pv-chat { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.k-pv-chat .you { align-self: flex-end; background: var(--lego-purple); color: #fff; border-radius: 10px 10px 2px 10px; padding: 4px 10px; max-width: 85%; }
.k-pv-chat .bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 10px 10px 10px 2px; padding: 4px 10px; max-width: 92%; animation: rise .3s both; }
.k-pv-chat .bot ul { margin: 2px 0 0; padding-left: 16px; } .k-pv-chat .warn { color: var(--warn); margin: 2px 0 0; }
.k-fn-prev[data-prev=exports] { justify-content: flex-start; }
.k-pv-ldr { margin: 8px 8px 4px; padding: 6px 8px; border-radius: 6px; background: #1b2a34; color: #cfe3ff; font-size: .66rem; line-height: 1.35; height: 9.6em; overflow: hidden; white-space: pre; }
.k-pv-csv { margin: 0 8px 8px; width: calc(100% - 16px); font-size: .7rem; background: var(--surface); border-radius: 6px; }
.k-pv-csv td, .k-pv-csv th { padding: 2px 6px; }
.k-fn-prev[data-prev=gate] { justify-content: flex-start; padding: 6px 8px 34px; aspect-ratio: auto; min-height: 220px; }
.k-fn-prev[data-prev=gate] .k-ampel { margin: 0; gap: 3px; } .k-fn-prev[data-prev=gate] .k-ampel .row { padding: 2px 6px; font-size: .7rem; }
.k-pv-wall .wa { fill: var(--lego-gray); } .k-pv-wall .wb { fill: color-mix(in srgb, var(--lego-gray) 80%, #fff); }
.k-pv-wall .win { fill: #9fd3ff; stroke: var(--lego-white); stroke-width: 2; transition: x .3s; } .k-pv-wall .win.noted { fill: var(--lego-orange); }
.k-pv-noted { font-size: .74rem; color: var(--lego-orange); font-weight: 650; min-width: 7ch; }
.k-pv-rerun.on { background: var(--lego-green); color: #fff; }
/* Alle Demos */
.k-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
.k-demo { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.k-demo > img, .k-demo > .thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; background: var(--border); }
.k-demo-body { min-width: 0; } .k-demo-body p { margin: 4px 0; }
.k-demo-head { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.k-demo .k-actions { margin-top: 4px; }
@media (max-width: 480px) { .k-demo { grid-template-columns: 1fr; } .k-demo > img, .k-demo > .thumb { width: 100%; height: 140px; } .k-pv-thumbs { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .k-pv-plan .cell, .k-pv-mass tr, .k-pv-parts li, .k-pv-sb .pb, .k-pv-chat .bot { animation: none; } }

/* Showroom oben in Tab 5 (kern-showroom.js, 05.10.): Plan waehlen -> Funktion ansehen */
.k-show { display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--lego-orange); }
.k-show .k-show-step { margin: 6px 0 0; font-size: 1rem; }
.k-show-stufen { display: grid; gap: 10px; }
.k-show-stufe h4 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.k-show-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 8px; }
.k-show-tile { display: flex; flex-direction: column; gap: 4px; padding: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.k-show-tile:hover { border-color: var(--lego-orange); transform: translateY(-1px); }
.k-show-tile:focus-visible { outline: 3px solid var(--lego-yellow, #f2cd37); outline-offset: 2px; }
.k-show-tile.sel { border: 2px solid var(--lego-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lego-orange) 25%, transparent); }
.k-show-tile img, .k-show-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 5px; border: 1px solid var(--border); }
.k-show-name { font-weight: 650; font-size: .82rem; line-height: 1.25; }
.k-show-meta { font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.k-show-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.k-show-dot.ready { background: var(--ok); } .k-show-dot.running { background: var(--lego-orange); animation: k-show-blink 1s infinite alternate; }
.k-show-dot.error { background: var(--lego-red); }
@keyframes k-show-blink { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .k-show-dot.running { animation: none; } .k-show-tile { transition: none; } }
.k-show-detail { padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--lego-orange) 8%, var(--surface)); }
.k-show-detail p { margin: 2px 0; }
.k-show-limit { color: var(--warn); }
.k-show-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.k-show-group h4 { margin: 0 0 6px; font-size: .85rem; }
.k-show-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.k-show-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.k-show-left, .k-show-right, .k-show-stufe, .k-show-stufen { min-width: 0; }
.k-show-right { position: sticky; top: 72px; max-height: calc(100vh - 84px); overflow: auto; display: flex; flex-direction: column; gap: 8px;
  padding-left: 16px; border-left: 1px solid var(--border); }
.k-show-right .k-show-groups { grid-template-columns: 1fr; }
.k-show-warn { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--warn); color: #fff; font-weight: 700; font-size: .65rem; }
@media (max-width: 900px) {
  .k-show-body { grid-template-columns: 1fr; }
  .k-show-right { position: static; max-height: none; overflow: visible; padding-left: 0; border-left: 0; }
  .k-show-right .k-show-groups { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .k-show-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 136px; overflow-x: auto;
    scroll-snap-type: x proximity; padding-bottom: 6px; overscroll-behavior-x: contain; }
  .k-show-tile { scroll-snap-align: start; }
}

/* Demo-Bereich (05.10. spaet): eingebettete App links gross, Gebaeude und Funktionen rechts */
.k-show .k-show-body { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.k-show-framewrap { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.k-show-frame { display: block; width: 100%; height: clamp(520px, 80vh, 980px); border: 0; background: var(--surface); }
.k-show-info { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.k-show-info .k-actions { margin: 0; }
.k-show .k-show-right { max-height: clamp(520px, 86vh, 1040px); }
.k-show .k-show-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); }
@media (max-width: 1000px) {
  .k-show .k-show-body { grid-template-columns: 1fr; }
  .k-show .k-show-right { max-height: none; }
  .k-show-frame { height: clamp(460px, 72vh, 760px); }
}

/* ---------------------------------------------------------------- Demo-Bereich 07.10.: Sprungleiste, Galerie, Umrechnung */
.k-fn-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.k-fn-nav a { font-size: var(--fs-sm); text-decoration: none; color: var(--text); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.k-fn-nav a:hover, .k-fn-nav a:focus-visible { border-color: var(--lego-orange); }
.k-fn-nav strong { font-size: var(--fs-sm); margin-right: 4px; }

/* Galerie: Set-Karten wie Architektur-Verpackungen */
.k-gal { display: flex; flex-direction: column; gap: 12px; border-top: 6px solid var(--lego-dark); }
.k-gal-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.k-gal-tools .seg { flex-wrap: wrap; }
.k-gal-feat { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.k-gal-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.k-gal-3d, .k-um-3d { position: relative; aspect-ratio: 4 / 3; max-height: 72vh; width: 100%; border-radius: 10px; overflow: hidden; background: var(--viewer-bg); border: 1px solid var(--border); }
.k-um-3d.small { aspect-ratio: 16 / 9; }
.k-gal-3d > img.k-snap, .k-um-3d > img.k-snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-gal-3d > .k-fn-ph, .k-um-3d > .k-fn-ph { inset: 0; display: grid; place-content: center; font-size: var(--fs-sm); }
.k-gal-views { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.k-gal-views .brick { margin-top: 6px; }
.k-gal-ex { flex: 1 1 160px; }
.k-gal-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.k-gal-boxhead { background: var(--lego-dark); color: #fff; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.k-gal-boxhead h3 { margin: 0; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem); line-height: 1.2; }
.k-gal-boxhead .setnr { font-size: .74rem; letter-spacing: .08em; opacity: .8; font-variant-numeric: tabular-nums; }
.k-gal-big { display: flex; align-items: baseline; gap: 8px; }
.k-gal-big .n { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lego-red); line-height: 1; }
.k-gal-big .l { color: var(--muted); font-size: var(--fs-sm); }
.k-gal-plan { margin: 0; } .k-gal-plan img { width: 100%; max-height: 260px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--border); }
.k-gal-tiertab tr.on td { font-weight: 650; background: color-mix(in srgb, var(--lego-orange) 10%, transparent); }
.linkish { border: 0; background: none; padding: 0; color: var(--focus); cursor: pointer; font: inherit; text-decoration: underline; }
.k-gal-cmp h4 { margin: 6px 0 4px; }
.k-gal-scale { position: relative; height: 66px; margin: 26px 8px 4px; border-top: 3px solid var(--border); }
.k-gal-scale .mk { position: absolute; top: -9px; width: 2px; height: 16px; background: var(--muted); }
.k-gal-scale .mk.ours { background: var(--lego-orange); width: 4px; margin-left: -1px; }
.k-gal-scale .mk.on { background: var(--lego-red); height: 22px; top: -12px; }
.k-gal-scale .mk .tx { position: absolute; top: 18px; left: 50%; transform: translateX(-50%) rotate(-28deg); transform-origin: top center; white-space: nowrap; font-size: .66rem; color: var(--muted); }
.k-gal-scale .mk.dn .tx { top: -30px; }
.k-gal-scale .mk.ours .tx { color: var(--text); font-weight: 650; }
.k-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.k-gal-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.07); transition: transform .15s, box-shadow .15s, border-color .15s; content-visibility: auto; contain-intrinsic-size: 300px; }
.k-gal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.k-gal-card.sel { border: 2px solid var(--lego-orange); }
.k-gal-open { display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.k-gal-open:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.k-gal-band { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 9px; background: var(--lego-dark); color: #fff; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; }
.k-gal-card.g-demo .k-gal-band { background: #23415e; } .k-gal-card.g-historisch .k-gal-band { background: #3d2f52; }
.k-gal-card.g-schloss .k-gal-band, .k-gal-card.inwork .k-gal-band { background: #3b3f45; } .k-gal-card.g-beispiel .k-gal-band { background: #5a3a12; }
.k-gal-band .setnr { font-variant-numeric: tabular-nums; font-weight: 700; }
.k-gal-img { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(180deg, #f7f8fa 0%, #e6eaef 100%); display: grid; place-items: center; overflow: hidden; }
@media (prefers-color-scheme: dark) { .k-gal-img { background: linear-gradient(180deg, #2a3038 0%, #1c2128 100%); } }
.k-gal-img > img:first-child { width: 100%; height: 100%; object-fit: contain; }
.k-gal-art { width: 70%; height: auto; opacity: .9; }
.k-gal-inset { position: absolute; left: 6px; bottom: 6px; width: 30%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); background: #fff; }
.k-gal-count { position: absolute; right: 6px; bottom: 6px; background: var(--lego-yellow); color: #2b2300; border-radius: 4px; padding: 2px 7px; font-size: .72rem; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.k-gal-count strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.k-gal-ribbon { position: absolute; top: 12px; right: -34px; transform: rotate(35deg); background: var(--lego-orange); color: #2b1500; padding: 3px 40px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.k-gal-name { padding: 8px 10px 2px; font-weight: 700; font-size: .92rem; line-height: 1.25; }
.k-gal-meta { padding: 0 10px 8px; font-size: .72rem; color: var(--muted); }
.k-gal-red { color: var(--err); }
.k-gal-tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); margin-top: auto; }
.k-gal-tier { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 5px 2px; border: 0; border-right: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.k-gal-tier:last-child { border-right: 0; }
.k-gal-tier .t { font-size: .64rem; color: var(--muted); } .k-gal-tier .p { font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.k-gal-tier.on { background: color-mix(in srgb, var(--lego-orange) 22%, var(--surface)); }
.k-gal-tier.on .t { color: var(--text); }
.k-gal-tier[disabled] { opacity: .4; cursor: default; }
.k-gal-card.inwork { opacity: .82; } .k-gal-card.inwork .k-gal-open { cursor: default; }
.k-gal-inworktxt { margin: 0; padding: 0 10px 10px; }
@media (max-width: 900px) { .k-gal-feat { grid-template-columns: 1fr; } .k-gal-3d { aspect-ratio: 1 / 1; } }
@media (max-width: 520px) { .k-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .k-gal-name { font-size: .82rem; } .k-gal-band .brandline { display: none; } }
@media (prefers-reduced-motion: reduce) { .k-gal-card { transition: none; } }

/* Umrechnung: Schritte, Darstellung, Zahlen */
.k-um { display: flex; flex-direction: column; gap: 10px; border-top: 6px solid var(--lego-orange); }
.k-um-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.k-um-sel { max-width: min(100%, 340px); padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.k-um-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.k-um-kpi { display: flex; flex-direction: column; padding: 6px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.k-um-kpi .v { font-weight: 750; font-variant-numeric: tabular-nums; font-size: 1.02rem; overflow-wrap: break-word; }
.k-um-kpi .l { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.k-um-kpi.ok .v { color: var(--ok); } .k-um-kpi.bad .v { color: var(--err); }
.k-um-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; counter-reset: s; }
.k-um-step { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer; font: inherit; position: relative; transition: background .2s, border-color .2s; }
.k-um-step .n { display: inline-grid; place-items: center; width: 24px; height: 18px; border-radius: 3px; background: var(--lego-gray); color: #16191c; font-weight: 750; font-size: .74rem;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.k-um-step .tx { font-size: .68rem; line-height: 1.15; text-align: center; overflow-wrap: break-word; }
.k-um-step.done .n { background: var(--lego-yellow); }
.k-um-step.on { border-color: var(--lego-orange); background: color-mix(in srgb, var(--lego-orange) 14%, var(--surface)); }
.k-um-step.on .n { background: var(--lego-orange); color: #2b1500; }
.k-um-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.k-um-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.k-um-ctl .brick { margin-top: 6px; }
.k-um-range { flex: 1 1 200px; }
.k-um-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 16px; align-items: start; min-height: 320px; }
.k-um-vis { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.k-um-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.k-um-info h3 { margin: 0; } .k-um-info h4 { margin: 8px 0 2px; font-size: .86rem; }
.k-um-desc { margin: 0; font-size: var(--fs-sm); }
.k-um-wait { display: flex; gap: 10px; align-items: center; padding: 40px 10px; justify-content: center; color: var(--muted); }
.k-um-spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--lego-orange); animation: k-um-rot 0.9s linear infinite; }
@keyframes k-um-rot { to { transform: rotate(360deg); } }
.k-um-fig { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.k-um-plan { width: 100%; max-height: 62vh; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--border); }
.k-um-plancmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; align-items: start; }
.k-um-plancmp > :only-child { grid-column: 1 / -1; }
.k-um-mini img { width: 100%; border-radius: 6px; border: 1px solid var(--border); background: #fff; }
.k-um-planimg { width: 100%; height: auto; max-height: 62vh; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); }
.k-um-planimg .sv { stroke: #5b4a2e; stroke-linejoin: round; }
.k-um-planimg .sa { fill: #cfe5bf; opacity: .55; } .k-um-planimg .sa.pool, .k-um-planimg .sa.water { fill: #8ccbe8; }
.k-um-planimg .sp { fill: none; stroke: #c9c2b4; stroke-linecap: round; opacity: .8; }
.k-um-planimg .so { fill: #4f8f3a; opacity: .55; }
.k-um-planimg .sw { stroke: #7d8590; stroke-linecap: square; }
.k-um-planimg .so2 { stroke-linecap: butt; } .k-um-planimg .so2.w { stroke: #2b7bd6; } .k-um-planimg .so2.d { stroke: #8b5e34; }
.k-um-planimg .sr { fill: rgba(240,138,36,.06); stroke: rgba(240,138,36,.6); stroke-dasharray: 4 3; }
.k-um-planimg .st { fill: var(--text); opacity: .75; font-family: system-ui, sans-serif; }
.k-um-l { opacity: 0; transition: opacity .55s; } .k-um-l.on { opacity: 1; }
.k-um-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.k-um-chips .chip, .k-um .chip { font: inherit; font-size: .74rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.k-um .chip.on { background: var(--lego-dark); color: #fff; border-color: var(--lego-dark); }
.k-um-scale { width: 100%; height: auto; max-height: 60vh; background: #fff; border-radius: 8px; border: 1px solid var(--border); }
.k-um-grid line { stroke: rgba(0,0,0,.09); stroke-width: .04; }
.k-um-outl polygon { fill: none; stroke: #c91a09; stroke-width: .16; stroke-linejoin: round; }
.k-um-dim line { stroke: #0055bf; stroke-width: .14; } .k-um-dim text { font-size: 1.1px; fill: #0055bf; font-weight: 700; font-family: system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: .25px; }
.k-um-formula { margin: 0; font-variant-numeric: tabular-nums; font-weight: 650; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--lego-yellow) 30%, var(--surface)); }
.k-um-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: var(--fs-sm); }
.k-um-facts dt { color: var(--muted); } .k-um-facts dd { margin: 0; overflow-wrap: break-word; }
.k-um-table { font-size: .76rem; } .k-um-table td, .k-um-table th { padding: 2px 5px; }
.k-um-canvaswrap { position: relative; width: 100%; display: grid; place-items: center; background: repeating-conic-gradient(rgba(127,127,127,.08) 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 8px; border: 1px solid var(--border); }
.k-um-canvas { width: 100%; height: auto; max-height: 62vh; object-fit: contain; image-rendering: pixelated; }
.k-um-canvas.pk { image-rendering: auto; }
.k-um-canvaswrap .k-um-3d { aspect-ratio: 4 / 3; border: 0; }
.k-um-cap { margin: 0; font-variant-numeric: tabular-nums; }
.k-um-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .72rem; color: var(--muted); }
.k-um-lg { display: inline-flex; align-items: center; gap: 4px; }
.k-um-lg .sw, .k-um-type .sw, .k-um-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid rgba(0,0,0,.2); vertical-align: middle; }
.k-um-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.k-um-types { display: flex; flex-direction: column; gap: 2px; font-size: .74rem; }
.k-um-type code { font-size: .72rem; }
.k-um-specials { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.k-um-special { display: grid; grid-template-columns: 40px 1fr auto; gap: 6px; align-items: center; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  font-size: .72rem; animation: k-um-in .4s both; }
.k-um-special .ct { font-weight: 700; font-variant-numeric: tabular-nums; }
.k-um-icon { width: 40px; height: 34px; }
@keyframes k-um-in { from { opacity: 0; transform: translateY(6px); } }
.k-um-bars { display: flex; flex-direction: column; gap: 3px; }
.k-um-bar { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr auto; gap: 6px; align-items: center; font-size: .72rem; }
.k-um-bar .b { height: 10px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.k-um-bar .b span { display: block; height: 100%; transition: width .6s; }
.k-um-bar .v { font-variant-numeric: tabular-nums; }
.k-um-gate .row { transition: opacity .3s; }
.k-um-gatesum { margin: 0; font-weight: 650; } .k-um-gatesum.ok { color: var(--ok); } .k-um-gatesum.bad { color: var(--err); }
.k-um-steplist { margin: 0; padding-left: 20px; max-height: 260px; overflow: auto; }
@media (max-width: 1000px) { .k-um-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .k-um-body { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .k-um-step .tx { font-size: .6rem; } .k-um-plancmp { grid-template-columns: 1fr; } .k-um-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .k-um-l, .k-um-step, .k-um-bar .b span { transition: none; } .k-um-special { animation: none; } .k-um-spin { animation: none; } }
/* neue Funktionskarten 07.10. (Szene) */
.k-fn-badge.szene { background: color-mix(in srgb, var(--lego-blue) 16%, var(--surface)); color: var(--lego-blue); border-color: color-mix(in srgb, var(--lego-blue) 40%, transparent); }
@media (prefers-color-scheme: dark) { .k-fn-badge.szene { color: #8db7ff; } }
.k-pv-pdf { width: 92%; } .k-pv-pdf .pw rect { fill: var(--muted); opacity: .6; }
.k-pv-pdf .arc, .k-pv-pdf .leaf { fill: none; stroke: var(--lego-red); stroke-width: 2.5; opacity: .15; transition: opacity .4s; }
.k-pv-pdf .rad line { stroke: var(--lego-blue); stroke-width: 2; } .k-pv-pdf .rad text, .k-pv-pdf .note { font-size: 11px; fill: var(--lego-blue); font-weight: 700; }
.k-pv-pdf .rad, .k-pv-pdf .note { opacity: 0; transition: opacity .4s; } .k-pv-pdf .on { opacity: 1; }
.k-pv-flow { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; gap: 6px; align-items: center; width: 100%; padding: 0 8px 30px; font-size: .7rem; }
.k-pv-flow ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.k-pv-flow li, .k-pv-scene { padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); opacity: .3; transition: opacity .35s, border-color .35s; }
.k-pv-flow li.on, .k-pv-scene.on { opacity: 1; border-color: var(--lego-purple); }
.k-pv-scene { display: flex; flex-direction: column; gap: 2px; } .k-pv-edit { color: var(--lego-orange); font-weight: 650; }
.k-pv-flow .arr { color: var(--muted); font-size: 1rem; }
.k-fn-prev[data-prev=korpus] .k-um-bars, .k-fn-prev[data-prev=bricklink] .k-pv-parts { width: 92%; }
.k-fn-prev[data-prev=bricklink] { justify-content: flex-start; padding-top: 8px; }
@media (max-width: 520px) { .k-pv-flow { grid-template-columns: 1fr; } .k-pv-flow .arr { display: none; } }
.k-gal-sec { grid-column: 1 / -1; margin: 6px 0 0; font-size: .9rem; padding-bottom: 4px; border-bottom: 2px solid var(--border); }
.k-gal-sec.ref { margin-top: 18px; border-bottom-style: dashed; color: var(--muted); }
.k-gal-prov { align-self: flex-start; margin: 0 10px 4px; font-size: .64rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.k-gal-prov.ki { border-color: var(--lego-purple); color: var(--lego-purple); }
.k-gal-prov.ref { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--warn) 18%, transparent) 0 6px, transparent 6px 12px); border-color: var(--warn); color: var(--text); font-weight: 650; }
.k-um-facts dd .k-gal-prov { margin: 0 4px 0 0; display: inline-block; }
.k-um-wissen { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; background: color-mix(in srgb, var(--lego-purple) 6%, var(--surface)); }
.k-um-rules { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .76rem; }
.k-um-rules .code { display: inline-block; min-width: 2.6em; padding: 0 4px; border-radius: 3px; background: var(--lego-purple); color: #fff; font-weight: 700; font-size: .68rem; text-align: center; }
.k-um-rules li.learned .code { background: var(--ok); }
.k-um-rules .ex { margin-left: 3em; overflow-wrap: break-word; }
.k-scroll { max-width: 100%; overflow-x: auto; }
.k-um-pick { min-width: 0; max-width: 100%; }
.k-um-pick label { display: flex; gap: 6px; align-items: center; max-width: 100%; min-width: 0; }
.k-um-sel { flex: 1 1 auto; min-width: 0; }
.k-um-vis > .range, .k-um-vis .range, .k-gal-views .range { flex: 0 0 auto; }
.k-gal-views .k-gal-ex { flex: 1 1 160px; }
.k-um-facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.k-um-facts dt { max-width: 18ch; }
.k-gal-card > .k-gal-open > .k-gal-red, .k-gal-open .k-gal-red { padding: 0 10px 8px; font-size: .72rem; }
/* Kennzahl-Listen: Werte nie zeichenweise umbrechen */
.k-um-facts dd, .k-fn dd { min-width: 12ch; overflow-wrap: break-word; word-break: normal; }
.k-um-step .tx { hyphens: auto; -webkit-hyphens: auto; }
.k-um-steplist { padding-left: 2.4em; }
.k-um-type .sw { margin-right: 4px; }
@media (max-width: 520px) { .k-um-step { padding: 5px 1px; } .k-um-step .tx { font-size: .56rem; } }

/* ---------------------------------------------------------------- Vorschauvideo "So funktioniert's in 15 Sekunden"
   (kern-video.js). Die Buehne ist immer dunkel (Kino), unabhaengig vom Seitenthema. */
.k-vid { --vid-ink: #eaf4ff; --vid-dim: rgba(234,244,255,.62); --vid-acc: #59c2ff; --vid-acc2: #ffb547; --vid-glass: rgba(10,18,30,.55);
  --vid-line: rgba(140,200,255,.22); --vid-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  border-top: 6px solid var(--lego-red); display: flex; flex-direction: column; gap: 10px; }
.k-vid-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; isolation: isolate; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 60%, #14243a 0%, #09111d 55%, #020409 100%); color: var(--vid-ink);
  box-shadow: 0 18px 50px -18px rgba(3,10,25,.65), inset 0 0 0 1px rgba(255,255,255,.06); outline-offset: 3px; user-select: none; -webkit-user-select: none; }
.k-vid-stage:fullscreen { border-radius: 0; aspect-ratio: auto; }
@media (max-width: 560px) { .k-vid-stage:not(.film) { aspect-ratio: 4 / 3.6; } }
.k-vid-gl, .k-vid-gl > canvas, .k-vid-film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.k-vid-film { object-fit: contain; background: #02050a; }
.k-vid-stage.film .k-vid-hud, .k-vid-stage.film .k-vid-sub { display: none; }
.k-vid-stage.film .k-vid-poster { background: transparent; }
.k-vid-stage.film .k-vid-poster > :not(.k-vid-big) { display: none; }

/* Plakat */
.k-vid-poster { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 16px;
  background: radial-gradient(70% 60% at 50% 45%, rgba(89,194,255,.16), transparent 70%), radial-gradient(120% 90% at 50% 60%, #14243a 0%, #09111d 55%, #020409 100%);
  transition: opacity .5s ease, visibility .5s; }
.k-vid-poster.off { opacity: 0; visibility: hidden; pointer-events: none; }
.k-vid-poster strong { font-size: clamp(1.15rem, .9rem + 1.6vw, 2.1rem); letter-spacing: -.01em; font-weight: 750; }
.k-vid-poster > span:not(.k-vid-poster-logo) { color: var(--vid-dim); font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; }
.k-vid-poster-logo, .k-vid-mark { width: 46px; height: 30px; border-radius: 5px; background: var(--lego-red); position: relative;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 8px 24px rgba(201,26,9,.45); }
.k-vid-poster-logo::before, .k-vid-poster-logo::after, .k-vid-mark::before, .k-vid-mark::after { content: ""; position: absolute; top: -7px; width: 12px; height: 8px; border-radius: 3px 3px 1px 1px; background: inherit; box-shadow: inset 0 2px 0 rgba(255,255,255,.25); }
.k-vid-poster-logo::before, .k-vid-mark::before { left: 7px; } .k-vid-poster-logo::after, .k-vid-mark::after { right: 7px; }
.k-vid-big { margin-top: 6px; width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); cursor: pointer; color: #fff; display: grid; place-items: center;
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .25s cubic-bezier(.2,.8,.2,1.2), background .2s; }
.k-vid-big:hover { transform: scale(1.07); background: rgba(255,255,255,.18); } .k-vid-big:active { transform: scale(.96); }
.k-vid-big .k-vid-ico { width: 30px; height: 30px; margin-left: 4px; }
.k-vid-msg { position: absolute; left: 16px; right: 16px; bottom: 64px; z-index: 5; margin: 0; text-align: center; font-size: var(--fs-sm); color: #ffd2cc; }
.k-vid-msg:empty { display: none; }

/* HUD */
.k-vid-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--vid-mono); }
.k-vid-hud > * { position: absolute; }
.k-vid-top { left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; align-items: center; }
.k-vid-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--vid-glass); border: 1px solid var(--vid-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: clamp(.64rem, .58rem + .25vw, .78rem); letter-spacing: .14em; text-transform: uppercase; }
.k-vid-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vid-acc); box-shadow: 0 0 10px var(--vid-acc); animation: k-vid-blink 1.6s infinite; }
@keyframes k-vid-blink { 50% { opacity: .35; } }
.k-vid-tc { font-size: .72rem; color: var(--vid-dim); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.k-vid-upload { left: 50%; bottom: 18%; transform: translateX(-50%); display: grid; gap: 10px; justify-items: center; width: min(420px, 82%); }
.k-vid-drop { display: grid; gap: 2px; text-align: center; transition: opacity .3s; }
.k-vid-drop strong { font-family: var(--font); font-size: clamp(.9rem, .8rem + .6vw, 1.25rem); font-weight: 650; letter-spacing: -.005em; }
.k-vid-drop span { font-size: .68rem; color: var(--vid-dim); letter-spacing: .1em; }
.k-vid-upload.done .k-vid-drop { opacity: 0; }
.k-vid-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; width: 100%;
  padding: 9px 12px; border-radius: 12px; background: var(--vid-glass); border: 1px solid var(--vid-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .72rem; }
.k-vid-file .ext { grid-row: 1 / 3; padding: 6px 7px; border-radius: 6px; background: var(--vid-acc); color: #021627; font-weight: 800; letter-spacing: .04em; }
.k-vid-file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-vid-file .st { color: var(--vid-dim); font-variant-numeric: tabular-nums; }
.k-vid-upload.done .k-vid-file .st { color: #7cf0c8; }
.k-vid-prog { grid-column: 2 / 4; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.k-vid-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--vid-acc), #7cf0c8); box-shadow: 0 0 12px var(--vid-acc); }
.k-vid-analyse { right: 16px; top: 56px; display: grid; gap: 6px; }
.k-vid-num { display: grid; grid-template-columns: 3.2ch auto; gap: 8px; align-items: baseline; padding: 4px 10px; border-left: 2px solid var(--vid-acc); background: linear-gradient(90deg, rgba(89,194,255,.14), transparent); }
.k-vid-num b { font-size: clamp(.9rem, .8rem + .5vw, 1.2rem); text-align: right; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 12px rgba(89,194,255,.8); }
.k-vid-num span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vid-dim); }
.k-vid-legend { right: 16px; top: 56px; display: grid; gap: 5px; padding: 10px 12px; border-radius: 12px; background: var(--vid-glass); border: 1px solid var(--vid-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .66rem; letter-spacing: .06em; }
.k-vid-leg { display: flex; align-items: center; gap: 9px; }
.k-vid-leg i { width: 26px; height: 0; border-top: 2px solid var(--c); box-shadow: 0 0 6px var(--c); }
.k-vid-leg.wand i { border-top-width: 4px; } .k-vid-leg.innen i { border-top-width: 2.5px; } .k-vid-leg.oeffnung i { border-top-width: 5px; width: 12px; }
.k-vid-leg.achse i { border-top: 1px dashed var(--c); } .k-vid-leg.mass i { border-top-width: 1px; } .k-vid-leg.garten i { border-top: 1px dashed var(--c); }
.k-vid-scale { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--vid-line); color: var(--vid-dim); }
.k-vid-facts { left: 16px; top: 56px; display: grid; gap: 4px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.k-vid-facts span { padding: 3px 9px; border-left: 2px solid var(--vid-acc2); background: linear-gradient(90deg, rgba(255,181,71,.16), transparent); }
.k-vid-counter { right: 16px; top: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.k-vid-counter b { display: block; font-size: clamp(1.2rem, 1rem + 1.2vw, 2rem); font-weight: 700; color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.k-vid-counter span { font-size: .7rem; color: var(--vid-dim); letter-spacing: .1em; }
.k-vid-logo { left: 0; right: 0; bottom: 17%; display: grid; justify-items: center; gap: 6px; text-align: center; font-family: var(--font); }
.k-vid-logo strong { font-size: clamp(1.5rem, 1rem + 2.8vw, 3.1rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.55); }
.k-vid-logo strong em { font-style: normal; color: var(--lego-red); }
.k-vid-logo .tag { font-size: clamp(.7rem, .62rem + .4vw, .95rem); letter-spacing: .22em; text-transform: uppercase; color: var(--vid-ink); opacity: .85; }
.k-vid-logo .stats { font-family: var(--vid-mono); font-size: .68rem; letter-spacing: .1em; color: var(--vid-dim); }
.k-vid-logo .k-vid-mark { margin-bottom: 8px; }
.k-vid-flash { inset: 0; background: radial-gradient(60% 60% at 50% 55%, rgba(170,225,255,.9), rgba(89,194,255,.1) 60%, transparent 80%); mix-blend-mode: screen; }
.k-vid-sub { position: absolute; z-index: 3; left: 50%; bottom: 62px; transform: translate(-50%, 6px); margin: 0; max-width: min(88%, 760px); padding: 6px 14px; border-radius: 8px;
  background: rgba(2,6,12,.58); color: #fff; font-size: clamp(.82rem, .74rem + .45vw, 1.12rem); line-height: 1.35; text-align: center; letter-spacing: .005em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.k-vid-sub.on { opacity: 1; transform: translate(-50%, 0); }
.k-vid-sub:empty { display: none; }

/* Steuerleiste */
.k-vid-ctl { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 22px 10px 8px;
  background: linear-gradient(0deg, rgba(2,5,10,.78), rgba(2,5,10,0)); transition: opacity .35s ease, transform .35s ease; cursor: default; }
.k-vid-stage.playing:not(:hover):not(:focus-within) .k-vid-ctl { opacity: 0; transform: translateY(6px); }
@media (hover: none) { .k-vid-stage.playing .k-vid-ctl { opacity: 1; transform: none; } }
.k-vid-btn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; transition: background .15s, transform .12s; }
.k-vid-btn:hover { background: rgba(255,255,255,.12); } .k-vid-btn:active { transform: scale(.92); }
.k-vid-btn[aria-pressed="true"] { color: var(--vid-acc); }
.k-vid-btn[hidden] { display: none; }
.k-vid-ico { width: 20px; height: 20px; }
.k-vid-bar { position: relative; flex: 1; min-width: 60px; height: 36px; display: flex; align-items: center; }
.k-vid-seek { --p: 0%; width: 100%; height: 4px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.k-vid-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--vid-acc) var(--p), rgba(255,255,255,.22) var(--p)); }
.k-vid-seek::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--vid-acc) var(--p), rgba(255,255,255,.22) var(--p)); }
.k-vid-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(89,194,255,.3); transition: transform .15s; }
.k-vid-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(89,194,255,.3); }
.k-vid-seek:hover::-webkit-slider-thumb { transform: scale(1.2); }
.k-vid-marks { position: absolute; left: 7px; right: 7px; top: 50%; height: 4px; transform: translateY(-50%); pointer-events: none; }
.k-vid-marks i { position: absolute; top: 0; width: 2px; height: 4px; background: rgba(2,5,10,.9); }
.k-vid-time { flex: none; font: .72rem var(--vid-mono); color: var(--vid-dim); font-variant-numeric: tabular-nums; padding: 0 4px; white-space: nowrap; }
@media (max-width: 420px) { .k-vid-time { display: none; } .k-vid-btn { width: 32px; height: 32px; } .k-vid-sub { bottom: 54px; } }
/* Kapitel unter dem Video */
.k-vid-chapters { display: flex; gap: 4px; }
.k-vid-chap { min-width: 0; padding: 6px 6px 4px; border: 0; border-top: 3px solid var(--border); background: transparent; color: var(--muted); font-size: var(--fs-sm); text-align: left;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s, border-color .2s; }
.k-vid-chap .n { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; opacity: .7; }
.k-vid-chap:hover { color: var(--text); } .k-vid-chap.on { color: var(--text); border-top-color: var(--lego-red); }
@media (max-width: 560px) { .k-vid-chap { font-size: .7rem; padding: 6px 2px 2px; } .k-vid-chap .n { display: none; }
  .k-vid-analyse, .k-vid-legend { transform: scale(.82); transform-origin: top right; } .k-vid-facts { transform: scale(.85); transform-origin: top left; } }
@media (max-width: 400px) { .k-vid-legend .k-vid-leg:nth-child(n+4) { display: none; } }
.k-vid-meta { margin: 0; }
/* Aufnahme (tools/video_render.mjs, ?bpvideo=aufnahme): nur die Buehne, bildschirmfuellend, ohne Steuerung */
html.k-vid-aufnahme, html.k-vid-aufnahme body { overflow: hidden; }
html.k-vid-aufnahme .k-vid-stage { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
html.k-vid-aufnahme .k-vid-ctl, html.k-vid-aufnahme .k-vid-poster { display: none; }
html.k-vid-aufnahme .k-vid-sub { transition: none; bottom: 6%; max-width: 86%; font-size: clamp(1.2rem, 1.7vw, 2.2rem); padding: .3em .8em; border-radius: .4em; }
html.k-vid-aufnahme .k-vid-hud { zoom: 1.55; }             /* HUD fuer 1080p lesbar wie im Kartenformat */
html.k-vid-aufnahme .k-vid-chip::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .k-vid-chip::before { animation: none; } .k-vid-sub, .k-vid-poster, .k-vid-ctl { transition: none; } }
/* Einzelseite /kern-video.html */
body.k-vid-page { background: #05080e; color: #eaf4ff; min-height: 100vh; display: grid; place-items: center; }
.k-vid-solo { width: min(1200px, 100%); padding: 16px; }
.k-vid-solo .k-vid { background: transparent; border: 0; box-shadow: none; padding: 0; --text: #eaf4ff; --muted: #9fb0c4; --border: #26313f; }