/* Keg Exchange · 3D-Reinigungssimulator auf der Reinigungsseite
   (de werkzeug-reinigung, en tool-keg-cleaning, fr outil-nettoyage-des-futs,
   es herramienta-lavado-del-barril, nl tool-keg-reiniging, pl narzedzie-mycie-kega).
   Nur hier eingebunden. Gestaltung und Farben kommen aus den Seitentokens
   (--line, --brand, --fm, --stage), die Masse aus der bisherigen SVG-Buehne. */

/* Die 3D-Ansicht braucht mehr Breite als die alte Zeichnung in ihrer festen Spalte. */
.app{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}
@media(max-width:940px){.app{grid-template-columns:1fr}}

.ks-stage{position:relative;width:100%;aspect-ratio:4/5;max-height:74vh;min-height:360px;
  border-radius:12px;overflow:hidden;background:radial-gradient(72% 72% at 36% 42%,#1f2a34,#0b0f13 76%)}
.ks-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ks-stage #ks-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease}

/* Lupe: Ausschnitt am Rohrende, vom Renderer in diesen Rahmen gezeichnet */
.ks-lupe{position:absolute;border:1.5px solid rgba(255,255,255,.28);box-shadow:0 0 0 6px rgba(11,15,19,.5);
  border-radius:6px;pointer-events:none}
.ks-gap{position:absolute;font-family:var(--fm);font-size:.82rem;font-weight:600;color:#ff6b78;
  transform:translate(10px,-50%);pointer-events:none;text-shadow:0 1px 6px #000;font-variant-numeric:tabular-nums}

/* Beschriftungen neben dem Fass, mit Fuehrungslinie zum Bauteil */
.ks-tag{position:absolute;font-family:var(--fm);font-size:.68rem;line-height:1.2;letter-spacing:.04em;
  color:#e3e9ef;white-space:nowrap;pointer-events:none;transform:translate(12px,-50%);
  text-shadow:0 1px 4px #000;opacity:0;transition:opacity .4s}
.ks-tag::before{content:"";position:absolute;left:-12px;top:50%;width:8px;height:1px;background:var(--brand)}
.ks-tag.left{transform:translate(calc(-100% - 12px),-50%)}
.ks-tag.left::before{left:auto;right:-12px}
.ks-tagln{position:absolute;height:1px;background:rgba(245,180,0,.85);transform-origin:0 50%;
  pointer-events:none;opacity:0;transition:opacity .4s;box-shadow:0 0 3px rgba(0,0,0,.6)}
.ks-tagln::before{content:"";position:absolute;left:-3px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--brand)}
@media(max-width:600px){.ks-tag,.ks-tagln{display:none}}

/* Das aktive Medium wird in der Legende hervorgehoben */
.medchip{padding:3px 8px;border-radius:999px;border:1px solid transparent;transition:background .25s,border-color .25s}
.medchip.on{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}

@media(prefers-reduced-motion:reduce){
  .ks-tag,.ks-tagln,.ks-stage #ks-poster,.medchip{transition:none}
}

/* ---- Steigrohrseite (de werkzeug-steigrohr-animation, en tool-spear-length,
   fr/es analog, nl tool-stijgbuislengte, pl narzedzie-dlugosc-rurki-fittingu) ----
   Dieselbe Buehne, nur breiter: beim Zapfen stehen Theke, CO2-Flasche und Glas neben dem Fass. */
.svgbox .ks-stage{flex:1 1 auto;min-width:0}
.ks-stage--wide{aspect-ratio:16/11;max-height:68vh;min-height:300px}
@media(max-width:600px){.ks-stage--wide{aspect-ratio:1/1;min-height:300px}}
.ks-lupe span{position:absolute;left:0;top:calc(100% + 9px);font-family:var(--fm);font-size:.62rem;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#aab6c2;white-space:nowrap}
.ks-gap.warn{color:#f0b429}
/* Massangabe in zwei Zeilen: Nennmass neutral, der Wert mit aufgesetztem Kopf farbig */
.ks-gap{max-width:min(172px,44%)}
.ks-gap b{display:block;font-weight:600;color:#e3e9ef;white-space:nowrap}
.ks-gap i{display:block;margin-top:2px;font-style:normal;font-weight:600;font-size:.74rem;
  line-height:1.25;color:#ff6b78}
.ks-gap.warn i{color:#f0b429}
.ks-gap.warn b{color:#e3e9ef}
/* Lage des Fasses und Hinweis auf die Waschschatten, beide drehen nicht mit */
.ks-or,.ks-shadowlab{position:absolute;left:14px;margin:0;font-family:var(--fm);font-size:.64rem;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;pointer-events:none;max-width:62%}
.ks-or{top:12px;color:#93a1ae}
.ks-shadowlab{bottom:12px;color:#f0b429}
/* Restbier an der Bodentasse */
.ks-tag.crit{color:#ff8b94}
.ks-tag.crit::before{background:#ff6b78}