.sp-rule{background:var(--color-accent);transform-origin:0;width:clamp(5rem,16vw,10rem);height:3px;display:block;position:relative}.sp-rule:after{content:"";background:var(--color-ink);width:8px;height:8px;position:absolute;top:-2.5px;right:-1px}@media (prefers-reduced-motion:no-preference){.sp-rule{animation:.8s cubic-bezier(.22,1,.36,1) .55s forwards rule-x;transform:scaleX(0)}}.sp-kbd{vertical-align:middle;border:1px solid var(--color-line);background:var(--color-paper);min-width:1.7rem;height:1.7rem;font-family:var(--font-mono);letter-spacing:.05em;border-bottom-width:2px;justify-content:center;align-items:center;padding-inline:.4rem;font-size:.6875rem;display:inline-flex}.sp-kbd+.sp-kbd{margin-left:.3rem}.sp-wurzel{--sp-grund:var(--color-surface);--sp-linie:var(--color-line);--sp-tinte:var(--color-ink);--sp-akzent:var(--color-accent);--sp-gedaempft:var(--color-ink-soft);aspect-ratio:4/3;background:var(--sp-grund);border:1px solid var(--color-line);width:100%;box-shadow:var(--shadow-card);user-select:none;position:relative;overflow:hidden}@media (width>=768px){.sp-wurzel{aspect-ratio:16/9}}.sp-wurzel:focus-visible,.sp-leinwand:focus-visible{outline-offset:-3px}.sp-wurzel:after{content:"";z-index:4;height:2px;width:calc(var(--sp-fortschritt,0) * 100%);background:var(--color-accent);pointer-events:none;position:absolute;bottom:0;left:0}.sp-leinwand{z-index:1;width:100%;height:100%;display:block;position:absolute;inset:0}.sp-ohne-js{text-align:center;align-content:center;justify-items:center;padding:clamp(1rem,5vw,2.5rem);display:grid;position:absolute;inset:0}.sp-hud{z-index:2;pointer-events:none;flex-wrap:wrap;gap:.4rem;padding:.6rem;display:flex;position:absolute;top:0;left:0;right:0}.sp-hud-feld{border:1px solid var(--color-line);background:color-mix(in srgb, var(--color-surface) 92%, transparent);align-items:baseline;gap:.5rem;padding:.3rem .55rem;display:flex}.sp-hud-label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-soft);font-size:.625rem;font-weight:500}.sp-hud-wert{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-ink);font-size:.8125rem;font-weight:500}.sp-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sp-hinweis{inset-inline:.75rem;z-index:3;border:1px solid var(--color-line);background:color-mix(in srgb, var(--color-surface) 90%, transparent);width:fit-content;max-width:100%;font-family:var(--font-mono);letter-spacing:.08em;text-align:center;color:var(--color-ink-soft);pointer-events:none;margin-inline:auto;padding:.3rem .6rem;font-size:.6875rem;position:absolute;bottom:.6rem}@media (pointer:coarse){.sp-hinweis{bottom:4.4rem}}.sp-touch{inset-inline:0;z-index:5;pointer-events:none;align-items:stretch;gap:.5rem;padding:.65rem;display:none;position:absolute;bottom:0}@media (pointer:coarse){.sp-touch{display:flex}}.sp-touch-taste:last-child{margin-left:auto}.sp-touch-taste{pointer-events:auto;appearance:none;border:1px solid var(--color-ink-soft);background:color-mix(in srgb, var(--color-surface) 78%, transparent);min-width:3rem;min-height:3rem;color:var(--color-ink);font-family:var(--font-mono);cursor:pointer;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;padding:.4rem .9rem;font-size:1rem;font-weight:500;display:inline-flex}.sp-touch-taste:active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.sp-tafel,.sp-ende{color:var(--color-paper);background-color:#13213bf5;background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);background-position:-1px -1px;background-size:56px 56px;flex-direction:column;align-items:center;padding:clamp(.9rem,3.5vw,2.25rem);display:flex;position:absolute;inset:0;overflow-y:auto}.sp-tafel{z-index:6;gap:.8rem}.sp-ende{z-index:7;text-align:center;gap:1rem}.sp-tafel:before,.sp-tafel:after,.sp-ende:before,.sp-ende:after{content:"";flex:1 1 0;min-height:0}.sp-tafel>*,.sp-ende>*{flex:none;max-width:34rem}.sp-tafel>*{width:100%}.sp-tafel :focus-visible,.sp-ende :focus-visible{outline-color:var(--color-accent-bright)}.sp-tafel-frage{color:var(--color-paper);font-size:.9375rem;font-weight:500;line-height:1.55}.sp-tafel-code{border:1px solid var(--color-line-dark);font-family:var(--font-mono);tab-size:2;background:#09101e8c;padding-block:.55rem;font-size:.8125rem;line-height:1.7;overflow-x:auto}.sp-tafel-zeile{white-space:pre;text-align:left;color:#f4f5f3eb;width:100%;padding:.1rem .85rem;display:block}.sp-tafel-wahl{appearance:none;width:100%;min-height:2.75rem;color:var(--color-paper);font-family:var(--font-mono);text-align:left;cursor:pointer;touch-action:manipulation;background:0 0;border:1px solid #fff6;padding:.6rem .85rem;font-size:.8125rem;line-height:1.5;display:block}.sp-tafel-wahl:hover{border-color:var(--color-accent-bright);color:var(--color-accent-bright);background:#e2525c14}:where(:not(.sp-tafel))>.sp-tafel-wahl+.sp-tafel-wahl{margin-top:.4rem}.sp-tafel-hinweis{border-left:2px solid var(--color-accent-bright);text-align:left;color:#f4f5f3d9;padding-left:.8rem;font-size:.875rem;line-height:1.6}.sp-tafel-inhalt{flex-direction:column;gap:.8rem;display:flex}.sp-tafel-kopf{border-bottom:1px solid var(--color-line-dark);justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.6rem;display:flex}.sp-tafel-nr{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-bright);font-size:.625rem;font-weight:500}.sp-tafel-wahl>.sp-tafel-nr{letter-spacing:0;text-transform:none;color:#f4f5f3bf;border:1px solid #ffffff4d;justify-content:center;align-items:center;min-width:1.35rem;margin-right:.6rem;padding-block:.05rem;font-size:.6875rem;display:inline-flex}.sp-tafel-zu{min-height:2.25rem;color:var(--color-paper);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:none;background:0 0;border:1px solid #fff6;padding:.35rem .85rem;font-size:.6875rem}.sp-tafel-zu:hover{border-color:var(--color-accent-bright);color:var(--color-accent-bright);background:0 0}.sp-tafel-luecke{color:var(--color-accent-bright);border-bottom:1px solid var(--color-accent-bright)}.sp-tafel-optionen{flex-direction:column;gap:.4rem;display:flex}.sp-tafel-optionen>.sp-tafel-wahl+.sp-tafel-wahl{margin-top:0}.sp-tafel-fuss{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.6rem;display:flex}.sp-tafel-fuss:empty{display:none}.sp-tafel-wahl{padding-right:2.6rem;position:relative}.sp-tafel-wahl:after{font-family:var(--font-mono);font-size:.875rem;line-height:1;position:absolute;top:50%;right:.85rem;transform:translateY(-50%)}.sp-richtig{border-color:var(--color-paper);background:var(--color-paper);color:var(--color-ink)}.sp-richtig>.sp-tafel-nr{color:#13213bb3;border-color:#13213b59}.sp-richtig:after{content:"✓"}.sp-falsch{border-color:var(--color-accent-bright);color:var(--color-accent-bright);background:#e2525c1a}.sp-falsch:after{content:"×"}.sp-gewaehlt{border-color:var(--color-paper);background:#ffffff14}.sp-gewaehlt[data-rang]:after{content:attr(data-rang);background:var(--color-paper);min-width:1.35rem;height:1.35rem;color:var(--color-ink);justify-content:center;align-items:center;font-size:.6875rem;font-weight:500;display:inline-flex}.sp-richtig[data-rang]:after{content:"✓";color:inherit;background:0 0}.sp-richtig:hover,.sp-falsch:hover,.sp-gewaehlt:hover{color:inherit}.sp-richtig:hover{border-color:var(--color-paper);background:var(--color-paper)}.sp-falsch:hover{border-color:var(--color-accent-bright);background:#e2525c1a}.sp-titel{font-family:var(--font-display);letter-spacing:-.01em;color:var(--color-paper);font-size:clamp(1.15rem,3.5vw,1.5rem);font-weight:700}.sp-ende-text{color:#f4f5f3d9;font-size:.9375rem;line-height:1.6}.sp-knopf{appearance:none;background:var(--color-accent);min-height:2.75rem;color:var(--color-accent-ink);font-family:var(--font-sans);cursor:pointer;box-shadow:var(--shadow-card);touch-action:manipulation;border:0;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.5rem;font-size:.9375rem;font-weight:500;display:inline-flex}.sp-knopf:hover{background:var(--color-accent-deep)}@media (prefers-reduced-motion:no-preference){.sp-wurzel:after{transition:width .45s cubic-bezier(.22,1,.36,1)}.sp-tafel,.sp-ende{animation:.3s both sp-einblenden}.sp-tafel-wahl{transition:border-color .2s,color .2s,background-color .2s}.sp-knopf{transition:background-color .2s,box-shadow .2s}.sp-touch-taste{transition:background-color .15s,border-color .15s,color .15s}}@keyframes sp-einblenden{0%{opacity:0}to{opacity:1}}