/* Bereich „Bewertung" – Skalen (ScaleSpectrum, ScaleNormAxis). Gemeinsames steht in
   assessment.css, die Ampelfarben (.as-c-… → --as-c) ebenfalls.

   Eine Skala ist eine Rangfolge – sie wird als zusammenhängendes Spektrum gezeichnet:
   Kacheln dicht an dicht, links die beste Stufe, darunter die Schiene im Farbverlauf.
   Bewegung trägt Bedeutung: Die gewählte Stufe hebt sich, der Schieber gleitet an ihre
   Stelle, die anderen treten zurück. Wer weniger Bewegung eingestellt hat, bekommt die
   Zustände ohne Übergänge (ganz unten). */

/* ===================================================================== Spektrum */
:where(.as-sc-step) { --as-c: var(--text-dim); }

.as-sc {
    display: flex; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%;
    --sc-radius: 7px;
}
.as-sc-body {
    position: relative; flex: 1 1 auto; min-width: 0;
    /* Je Stufe höchstens so breit, dass „i.O. / n.i.O.“ nicht zu zwei Plakaten wird. */
    max-width: calc(var(--n) * 104px);
}
.as-sc.display .as-sc-body { max-width: max(260px, calc(var(--n) * 58px)); }

.as-sc-track { display: flex; gap: 3px; min-width: 0; padding-top: 6px; margin-top: -6px; }

/* Die Kachel: der Knopf selbst bleibt ohne transform – sonst würde er zum Bezugsrahmen
   der Einzelheiten (.as-sc-tip), die unter dem ganzen Spektrum stehen sollen. Bewegt
   wird die Fläche darin. */
.as-sc-step {
    flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
    display: flex; outline: none;
    /* Das Einblenden liegt am Knopf, nicht an der Fläche: Die Fläche wechselt beim Wählen
       ihre Animation, und ein Wechsel zurück spielte das Einblenden noch einmal ab. */
    animation: as-sc-in .42s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 32ms);
}
button.as-sc-step { cursor: pointer; }
button.as-sc-step:disabled { cursor: default; }

.as-sc-face {
    position: relative; flex: 1; min-width: 0; min-height: 46px; padding: 5px 4px 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border-radius: 3px; border: 1px solid color-mix(in srgb, var(--as-c) 42%, var(--line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--as-c) 22%, transparent), color-mix(in srgb, var(--as-c) 9%, transparent)),
        var(--panel-inset);
    color: var(--text);
    transition: transform .22s cubic-bezier(.2, .9, .3, 1.25), background .18s, border-color .18s,
                box-shadow .22s, opacity .2s, filter .2s;
}
.as-sc-step:first-child .as-sc-face { border-radius: var(--sc-radius) 3px 3px var(--sc-radius); }
.as-sc-step:last-child .as-sc-face { border-radius: 3px var(--sc-radius) var(--sc-radius) 3px; }
.as-sc-step:only-child .as-sc-face { border-radius: var(--sc-radius); }

.as-sc-code { font-family: var(--font-mono); font-size: 15px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.as-sc-label {
    max-width: 100%; font-size: 10.5px; line-height: 1.15; color: var(--text-dim); text-align: center;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.as-sc.display .as-sc-face { min-height: 34px; padding: 3px 3px 4px; }
.as-sc.display .as-sc-code { font-size: 13px; }
.as-sc.display .as-sc-label { display: none; }

/* ! oder Stift als Plakette über der Ecke der Kachel – außerhalb, damit sie auch bei
   schmalen Kacheln kein Kürzel verdeckt. */
.as-sc-mark {
    position: absolute; top: -6px; right: -5px; z-index: 1;
    display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
    font-family: var(--font-ui); font-size: 10px; font-weight: 800; line-height: 1;
    color: var(--text-dim); background: var(--panel-raised); border: 1px solid var(--line-strong);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.as-sc-mark.issue { color: #fff; background: var(--fault); border-color: var(--panel); }
.as-sc-pencil { width: 9px; height: 9px; fill: currentColor; flex: none; }
.as-sc-flag .as-sc-pencil { margin-right: 3px; vertical-align: -1px; }

/* Überfahren: Die Kachel hebt sich in ihrer Farbe, die anderen treten zurück. */
.as-sc-track:hover .as-sc-step:not(:hover) .as-sc-face { opacity: .62; filter: saturate(.75); }
.as-sc-step:hover .as-sc-face,
.as-sc-step:focus-visible .as-sc-face {
    transform: translateY(-3px);
    border-color: var(--as-c);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--as-c) 34%, transparent), color-mix(in srgb, var(--as-c) 16%, transparent)),
        var(--panel-inset);
    box-shadow: 0 10px 20px -12px var(--as-c), 0 0 0 1px color-mix(in srgb, var(--as-c) 40%, transparent);
    z-index: 1;
}
.as-sc-step:focus-visible .as-sc-face { outline: 2px solid var(--accent); outline-offset: 2px; }
button.as-sc-step:active:not(:disabled) .as-sc-face { transform: translateY(-1px) scale(.97); transition-duration: .06s; }

/* Gewählt: volle Farbe, etwas größer, mit einem Lichtring, der einmal ausläuft. */
.as-sc.has-sel .as-sc-step:not(.on) .as-sc-face { opacity: .78; }
.as-sc.has-sel .as-sc-track:hover .as-sc-step:not(.on):hover .as-sc-face { opacity: 1; }
.as-sc-step.on .as-sc-face {
    border-color: var(--as-c); color: #fff; opacity: 1; filter: none; z-index: 2;
    background: linear-gradient(180deg, color-mix(in srgb, var(--as-c) 88%, #fff), var(--as-c));
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 26px -10px var(--as-c), 0 0 0 2px var(--panel), 0 0 0 3px var(--as-c);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    animation: as-sc-pop .45s cubic-bezier(.2, .9, .3, 1.4), as-sc-ring .7s ease-out;
}
.as-sc-step.on .as-sc-label { color: rgba(255, 255, 255, .9); }
.as-sc-step.on .as-sc-mark { color: var(--as-c); background: #fff; }
.as-sc-step.on.as-c-neutral .as-sc-face { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.as-sc.disabled .as-sc-step:not(.on) .as-sc-face { opacity: .55; }
.as-sc.disabled .as-sc-step:hover .as-sc-face { transform: none; }

/* Die Schiene: Farbverlauf der Stufen, die Themenzone schraffiert, der Schieber. */
.as-sc-rail {
    position: relative; height: 6px; margin-top: 8px; border-radius: 3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 25%, transparent);
    animation: as-sc-rail .6s cubic-bezier(.2, .8, .2, 1) backwards;
    transform-origin: left center;
}
.as-sc-zone {
    position: absolute; top: -3px; bottom: -3px; right: 0; border-radius: 0 4px 4px 0;
    border-left: 2px solid var(--fault);
    background: repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--panel) 62%, transparent) 3px 5px);
}
.as-sc-thumb {
    position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    background: var(--as-c); border: 3px solid var(--panel);
    box-shadow: 0 0 0 1px var(--as-c), 0 0 14px 2px color-mix(in srgb, var(--as-c) 60%, transparent);
    transition: left .45s cubic-bezier(.3, 1.45, .45, 1), background .3s, box-shadow .3s;
    animation: as-sc-thumb-in .35s cubic-bezier(.2, .9, .3, 1.4);
}

/* Die Zeile darunter: im Ruhezustand die gewählte Stufe (oder die Leserichtung), beim
   Überfahren die Einzelheiten der Stufe unter dem Zeiger. Feste Höhe – sonst hüpfte
   das Layout bei jedem Wechsel. */
.as-sc-caption { position: relative; min-height: 26px; margin-top: 6px; }
.as-sc-cap-default, .as-sc-tip {
    display: flex; align-items: center; min-height: 24px; min-width: 0;
    font-size: 11.5px; color: var(--text-dim); transition: opacity .16s, transform .16s;
}
.as-sc-tip {
    position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
    opacity: 0; transform: translateY(3px); pointer-events: none; z-index: 3;
    background: var(--panel); white-space: nowrap; overflow: hidden;
}
.as-sc-step:hover .as-sc-tip, .as-sc-step:focus-visible .as-sc-tip { opacity: 1; transform: none; }
.as-sc-body:has(.as-sc-step:hover, .as-sc-step:focus-visible) .as-sc-cap-default { opacity: 0; }

.as-sc-detail { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.as-sc-detail > b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.as-sc-detail .as-answer { min-height: 20px; font-weight: 700; }
.as-sc-norm { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; }
.as-sc-norm-bar { width: 46px; height: 4px; border-radius: 2px; background: var(--panel-inset); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.as-sc-norm-bar > span { display: block; height: 100%; background: var(--as-c); border-radius: 2px; }
.as-sc-flag { font-size: 10.5px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--line-strong); color: var(--text-dim); }
.as-sc-flag.issue { border-color: color-mix(in srgb, var(--fault) 55%, transparent); color: var(--fault); }

.as-sc-ends { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.as-sc-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.as-sc-legend-zone {
    width: 18px; height: 8px; border-radius: 2px; border-left: 2px solid var(--fault);
    background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--fault) 55%, transparent) 0 3px, transparent 3px 5px);
}

/* „nicht bewertbar“ steht abseits: Es ist keine Stufe der Rangfolge. */
.as-sc-na {
    flex: none; align-self: flex-start; min-height: 46px; padding: 0 14px; border-radius: var(--sc-radius);
    display: inline-flex; align-items: center; border: 1px dashed var(--line-strong);
    background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, transform .2s;
}
button.as-sc-na { cursor: pointer; }
button.as-sc-na:hover:not(:disabled) { border-color: var(--text-dim); color: var(--text); }
.as-sc-na.on { border-style: solid; border-color: var(--text-dim); background: var(--text-dim); color: var(--panel); animation: as-sc-pop .4s cubic-bezier(.2, .9, .3, 1.4); }
.as-sc.display .as-sc-na { min-height: 34px; font-size: 11px; padding: 0 10px; cursor: help; }
button.as-sc-na:disabled:not(.on) { opacity: .55; cursor: default; }

/* ---------- Schmal: für Tabellenzellen und Auswahllisten ---------- */
.as-sc.compact { display: inline-flex; vertical-align: middle; }
.as-sc.compact .as-sc-track { gap: 2px; }
.as-sc.compact .as-sc-step { flex: none; cursor: help; }
.as-sc.compact .as-sc-face {
    min-height: 20px; min-width: 20px; padding: 0 5px 2px; border-width: 0 0 2px; border-color: var(--as-c);
    border-radius: 2px;
}
.as-sc.compact .as-sc-step:first-child .as-sc-face { border-radius: 5px 2px 2px 5px; }
.as-sc.compact .as-sc-step:last-child .as-sc-face { border-radius: 2px 5px 5px 2px; }
.as-sc.compact .as-sc-code { font-size: 10.5px; font-weight: 600; }
.as-sc.compact .as-sc-step:hover .as-sc-face { transform: translateY(-2px) scale(1.12); box-shadow: 0 6px 12px -6px var(--as-c); }
/* Die Grenze zur Themenzone als Kerbe zwischen zwei Kacheln. */
.as-sc.compact .as-sc-step.cut { margin-left: 4px; position: relative; }
.as-sc.compact .as-sc-step.cut::before {
    content: ""; position: absolute; left: -4px; top: 2px; bottom: 2px; width: 2px; border-radius: 1px;
    background: var(--fault); opacity: .7;
}

@media (max-width: 900px) {
    .as-sc-label { display: none; }
    .as-sc { flex-wrap: wrap; }
    .as-sc-body { flex-basis: 100%; max-width: none; }
    .as-sc-face { min-height: 42px; }
    .as-sc-code { font-size: 14px; }
    .as-sc-na { min-height: 34px; }
    .as-sc-detail .as-sc-flag { display: none; }
}

@keyframes as-sc-in { from { opacity: 0; transform: translateY(6px) scale(.92); } }
@keyframes as-sc-pop {
    0% { transform: translateY(-1px) scale(.94); }
    60% { transform: translateY(-4px) scale(1.1); }
    100% { transform: translateY(-3px) scale(1.06); }
}
@keyframes as-sc-ring {
    0% { box-shadow: 0 12px 26px -10px var(--as-c), 0 0 0 2px var(--panel), 0 0 0 3px var(--as-c), 0 0 0 3px color-mix(in srgb, var(--as-c) 55%, transparent); }
    100% { box-shadow: 0 12px 26px -10px var(--as-c), 0 0 0 2px var(--panel), 0 0 0 3px var(--as-c), 0 0 0 14px transparent; }
}
@keyframes as-sna-in { from { opacity: 0; translate: 0 6px; } }
@keyframes as-sc-rail { from { transform: scaleX(0); opacity: 0; } }
@keyframes as-sc-thumb-in { from { transform: scale(0); } }

/* ===================================================================== Normwert-Achse */
.as-sna { --t: 18px; user-select: none; }
.as-sna-stage { position: relative; height: 98px; }
.as-sna-pins { position: absolute; left: 0; right: 0; top: 0; height: 58px; pointer-events: none; }
/* Der Fuß des Fähnchens steht genau über der Mitte des Reglergriffs. */
.as-sna-pin {
    position: absolute; bottom: 0; left: calc(var(--t) / 2 + (100% - var(--t)) * var(--p));
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 2px 6px 3px; border-radius: 5px; min-width: 26px;
    background: color-mix(in srgb, var(--as-c) 18%, var(--panel)); border: 1px solid var(--as-c);
    font-family: var(--font-mono); line-height: 1.1; white-space: nowrap;
    transition: left .12s ease-out; animation: as-sna-in .4s cubic-bezier(.2, .8, .2, 1) backwards;
}
.as-sna-pin::after {
    content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 10px; background: var(--as-c);
}
.as-sna-pin.alt { bottom: 28px; }
.as-sna-pin.alt::after { height: 38px; }
.as-sna-pin b { font-size: 11.5px; color: var(--text); }
.as-sna-pin small { font-size: 9.5px; color: var(--text-dim); }

.as-sna-axis {
    position: absolute; left: calc(var(--t) / 2); right: calc(var(--t) / 2); top: 70px; height: 8px; border-radius: 4px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 25%, transparent);
    animation: as-sc-rail .6s cubic-bezier(.2, .8, .2, 1) backwards; transform-origin: left center;
}
.as-sna-tick { position: absolute; top: 10px; left: calc(100% * var(--p)); transform: translateX(-50%); }
.as-sna-tick::before { content: ""; position: absolute; top: -12px; left: 50%; width: 1px; height: 4px; background: var(--line-strong); }
.as-sna-tick span { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); white-space: nowrap; }
.as-sna-tick.first { transform: translateX(calc(var(--t) / -2)); }
.as-sna-tick.last { transform: translateX(calc(-100% + var(--t) / 2)); }
.as-sna-tick.first::before { left: calc(var(--t) / 2); }
.as-sna-tick.last::before { left: auto; right: calc(var(--t) / 2); }

/* Die Regler liegen übereinander auf der Achse; nur die Griffe nehmen die Maus an. */
.as-sna-range {
    position: absolute; left: 0; right: 0; top: 65px; width: 100%; height: var(--t); margin: 0;
    -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; outline: none;
}
.as-sna-range::-webkit-slider-runnable-track { background: transparent; height: var(--t); }
.as-sna-range::-moz-range-track { background: transparent; height: var(--t); }
.as-sna-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
    width: var(--t); height: var(--t); border-radius: 50%;
    background: var(--as-c); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--as-c), 0 2px 6px rgba(0, 0, 0, .35);
    transition: transform .15s, box-shadow .15s;
}
.as-sna-range::-moz-range-thumb {
    pointer-events: auto; cursor: grab; width: var(--t); height: var(--t); border-radius: 50%; box-sizing: border-box;
    background: var(--as-c); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--as-c), 0 2px 6px rgba(0, 0, 0, .35);
    transition: transform .15s, box-shadow .15s;
}
.as-sna-range:hover::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 1px var(--as-c), 0 0 12px 2px color-mix(in srgb, var(--as-c) 60%, transparent); }
.as-sna-range:hover::-moz-range-thumb { transform: scale(1.18); box-shadow: 0 0 0 1px var(--as-c), 0 0 12px 2px color-mix(in srgb, var(--as-c) 60%, transparent); }
.as-sna-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.3); }
.as-sna-range:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.3); }
.as-sna-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--as-c), 0 0 0 4px var(--accent); }
.as-sna-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--as-c), 0 0 0 4px var(--accent); }
.as-sna-range:active, .as-sna-range:focus-visible { z-index: 2; }
.as-sna.locked .as-sna-range::-webkit-slider-thumb { cursor: default; }
.as-sna.locked .as-sna-range::-moz-range-thumb { cursor: default; }
/* Schmal tragen nur die Enden eine Beschriftung – sonst stößt „schlechtestmöglich“ an die 25. */
@media (max-width: 760px) { .as-sna-tick:not(.first):not(.last) span { display: none; } }


/* ===================================================================== Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
    .as-sc-step, .as-sc-face, .as-sc-rail, .as-sc-thumb, .as-sna-pin, .as-sna-axis, .as-sc-na.on { animation: none !important; }
    .as-sc-face, .as-sc-thumb, .as-sna-pin { transition-duration: 0s !important; }
}