.szene{position:relative}
.buehne{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:clamp(3rem,8vh,6rem) 1.25rem;
}
.bild{width:min(60rem,100%);height:auto;display:block}
.animiert .bild{max-height:62vh;max-height:62svh}
.animiert .szene--haus .buehne{position:relative;padding-top:calc(var(--kopf-hoehe) + .5rem)}
.szene--haus .buehne{padding-bottom:clamp(1.5rem,4vh,2.5rem)}
.haus-titel{
  margin:0 0 -1rem;text-align:center;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);font-weight:400;
  color:var(--text-leise);letter-spacing:.01em;
}
.animiert .szene--haus .bild{
  max-height:min(62vh,100vh - 19.25rem);
  max-height:min(62svh,100svh - 19.25rem);
}
.deko{
  fill:none;stroke:var(--strich-still);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.obj rect,.obj circle,.obj polygon,.obj path,.obj line,.obj ellipse{
  fill:none;stroke:var(--signal);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  transition:stroke .45s ease,fill .45s ease;
}
.obj rect,.obj circle,.obj polygon,.obj ellipse{fill:var(--signal-hauch)}
.animiert .obj rect,.animiert .obj circle,.animiert .obj polygon,
.animiert .obj path,.animiert .obj line,.animiert .obj ellipse{stroke:var(--strich);fill:none}
.animiert .obj.an rect,.animiert .obj.an circle,.animiert .obj.an polygon,
.animiert .obj.an path,.animiert .obj.an line,.animiert .obj.an ellipse{stroke:var(--signal)}
.animiert .obj.an rect,.animiert .obj.an circle,
.animiert .obj.an polygon,.animiert .obj.an ellipse{fill:var(--signal-hauch)}
.birne-rot{color:var(--fest-rot)}
.birne-gelb{color:var(--signal)}
.birne-gruen{color:var(--fest-gruen)}
.birne-lila{color:var(--fest-lila)}
.obj .birne{fill:currentColor;stroke:currentColor;filter:drop-shadow(0 0 3px currentColor)}
.animiert .obj .birne{
  fill:currentColor;fill-opacity:0;stroke:var(--strich);filter:none;
  transform-box:fill-box;transform-origin:center;
  transition:stroke .25s ease,fill-opacity .25s ease,filter .25s ease;
}
.animiert .obj.an .birne{fill:currentColor;fill-opacity:1;stroke:currentColor;filter:drop-shadow(0 0 3px currentColor)}
.haus-dimmt .obj .birne{transition-duration:1.05s}
@media (prefers-reduced-motion:no-preference){
  .animiert .obj.an .birne-gelb{transition-delay:.165s}
  .animiert .obj.an .birne-gruen{transition-delay:.33s}
  .animiert .obj.an .birne-lila{transition-delay:.495s}
  .animiert .obj.an.neu .birne{animation:birne-feuer 2.1s ease-out both}
  .animiert .obj.an.neu .birne-gelb{animation-delay:.165s}
  .animiert .obj.an.neu .birne-gruen{animation-delay:.33s}
  .animiert .obj.an.neu .birne-lila{animation-delay:.495s}
}
@keyframes birne-feuer{
  0%{filter:none;transform:none}
  10%,54%,88%{
    filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 14px currentColor) brightness(1.35);
    transform:scale(1.3);
  }
  22%,46%,64%,82%,96%,100%{filter:drop-shadow(0 0 3px currentColor);transform:none}
}
.obj{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .animiert .obj.neu{animation:aufleuchten .7s cubic-bezier(.22,.9,.3,1)}
}
@keyframes aufleuchten{
  0%{transform:scale(1);filter:none}
  30%{
    transform:scale(1.22);
    filter:drop-shadow(0 0 2px var(--signal)) drop-shadow(0 0 9px var(--signal)) brightness(1.18);
  }
  100%{transform:scale(1);filter:none}
}
@media (hover:hover){
  .szene--haus .obj:hover{filter:drop-shadow(0 0 4px var(--signal));cursor:help}
  .animiert .szene--haus .obj:not(.an):hover{filter:drop-shadow(0 0 3px var(--text-leise))}
}
.obj rect.treffer,
.animiert .obj rect.treffer,
.animiert .obj.an rect.treffer{fill:transparent;stroke:none;pointer-events:all}
.tipp{
  position:fixed;z-index:60;pointer-events:none;
  transform:translate(-50%,-150%);
  background:var(--flaeche);color:var(--text);
  border:1px solid var(--signal);border-radius:999px;
  padding:.25rem .8rem;font-size:.9rem;line-height:1.4;white-space:nowrap;
  opacity:0;transition:opacity .15s ease;
}
.tipp.da{opacity:1}
.tipp-fest{position:absolute;z-index:5;transform:translate(-50%,-100%);opacity:1}
@media (prefers-reduced-motion:no-preference){
  .tipp-fest{animation:name-auf 2.6s ease both}
}
@keyframes name-auf{
  0%{opacity:0;transform:translate(-50%,-100%) translateY(6px)}
  18%{opacity:1;transform:translate(-50%,-100%)}
  70%{opacity:1;transform:translate(-50%,-100%)}
  100%{opacity:0;transform:translate(-50%,-100%)}
}
.zaehler{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  margin:0;text-align:center;
}
.zahl-feld{
  position:relative;display:block;
  font-size:clamp(2.2rem,1.4rem + 3vw,3.2rem);font-weight:700;
  color:var(--signal);font-variant-numeric:tabular-nums;
  line-height:1.1;height:1.1em;min-width:2.4ch;
}
.zahl,.zahl-alt{position:absolute;inset:0;display:block}
.zaehler-titel{
  color:var(--text-leise);font-size:.8rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.zahl-alt{opacity:0}
.zaehler .wort{color:var(--text-leise);display:block;min-height:1.6em}
@media (prefers-reduced-motion:no-preference){
  .animiert .zahl.rein{animation:zahl-rein .40s cubic-bezier(.22,.9,.3,1) .07s both}
  .animiert .zahl-alt.raus{animation:zahl-raus .30s cubic-bezier(.4,0,1,1)}
  .animiert .wort.rein{animation:wort-rein .42s ease-out}
}
@keyframes zahl-rein{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:none}}
@keyframes zahl-raus{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-.55em)}}
@keyframes wort-rein{from{opacity:.25}to{opacity:1}}
.haus-sofort .obj *{transition:none !important}
.haus-dimmt .obj rect,.haus-dimmt .obj circle,.haus-dimmt .obj polygon,
.haus-dimmt .obj path,.haus-dimmt .obj line,.haus-dimmt .obj ellipse{transition-duration:1.05s}
@media print{.zeitstrahl{display:none}}
.zeitstrahl{
  --zs-knauf:.6rem;
  display:flex;align-items:center;gap:.6rem;
  width:min(32rem,100%);margin-top:.25rem;
}
.zeitstrahl[hidden]{display:none}
.zs-knopf{width:2.5rem;height:2.5rem;color:var(--signal);border-color:var(--signal)}
.zs-knopf:hover{background:var(--signal-hauch);color:var(--signal);border-color:var(--signal)}
.zs-knopf svg{width:.8rem;height:.8rem}
.zs-ende{
  min-width:1.3em;text-align:center;
  color:var(--text-leise);font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.zs-bahn{position:relative;flex:1;display:flex;align-items:center;height:2.5rem}
.zs-skala{position:absolute;left:var(--zs-knauf);right:var(--zs-knauf);top:50%;height:0;pointer-events:none}
.zs-strich{
  position:absolute;left:calc(var(--i) * 100%);top:.55rem;
  width:1px;height:.3rem;background:var(--strich);
}
.zs-strich--lang{height:.5rem}
.zs-regler{
  -webkit-appearance:none;appearance:none;
  position:relative;width:100%;height:2.5rem;margin:0;
  background:transparent;cursor:pointer;
  scroll-margin-top:calc(var(--kopf-hoehe) + 1rem);
}
.zs-regler:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:999px}
.zs-regler::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg, var(--signal) 0 var(--wert,0%), var(--linie) var(--wert,0%) 100%);
}
.zs-regler::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:calc(2 * var(--zs-knauf));height:calc(2 * var(--zs-knauf));margin-top:calc(1.5px - var(--zs-knauf));
  border-radius:50%;background:var(--nacht);border:2px solid var(--signal);
}
.zs-regler::-moz-range-track{height:3px;border-radius:2px;background:var(--linie)}
.zs-regler::-moz-range-progress{height:3px;border-radius:2px;background:var(--signal)}
.zs-regler::-moz-range-thumb{
  width:calc(2 * var(--zs-knauf));height:calc(2 * var(--zs-knauf));box-sizing:border-box;
  border-radius:50%;background:var(--nacht);border:2px solid var(--signal);
}
.zs-aktiv .zs-regler::-webkit-slider-thumb{background:var(--signal);transform:scale(1.18)}
.zs-aktiv .zs-regler::-moz-range-thumb{background:var(--signal);transform:scale(1.18)}
@media (hover:hover){
  .zs-regler:hover::-webkit-slider-thumb{background:var(--signal);transform:scale(1.18)}
  .zs-regler:hover::-moz-range-thumb{background:var(--signal);transform:scale(1.18)}
}
@media (prefers-reduced-motion:no-preference){
  .zs-regler::-webkit-slider-thumb{transition:background-color .2s ease,transform .2s ease}
  .zs-regler::-moz-range-thumb{transition:background-color .2s ease,transform .2s ease}
}
@media (forced-colors:active){
  .zs-strich{background:CanvasText}
  .zs-regler::-webkit-slider-runnable-track{background:CanvasText}
  .zs-regler::-webkit-slider-thumb{background:Highlight}
  .zs-regler::-moz-range-thumb{background:Highlight}
}
.fragen-feld{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  width:min(56rem,100%);margin:0;padding:0;list-style:none;
}
.fragen-feld li{
  border:1px solid var(--linie);border-radius:999px;
  padding:.5rem 1rem;color:var(--text-leise);
  font-size:clamp(.85rem,.8rem + .25vw,1rem);line-height:1.35;
}
.animiert .fragen-feld li{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease,border-color .5s ease,color .5s ease;
}
.animiert .fragen-feld li.da{opacity:1;transform:none}
.animiert .fragen-feld li.frisch{border-color:var(--signal);color:var(--signal-hell)}
.animiert .szene--fragen.satt .fragen-feld li{color:var(--text-still);border-color:var(--flaeche)}
.fragen-schluss{
  margin:0;text-align:center;color:var(--text);
  font-size:clamp(1.1rem,1rem + 1vw,1.6rem);font-weight:600;
  min-height:2.4em;
}
.fragen-schluss .zeile{display:block}
.animiert .fragen-schluss{opacity:0;transition:opacity .6s ease}
.animiert .szene--fragen.satt .fragen-schluss{opacity:1}
@media print{.animiert .fragen-feld li,.animiert .fragen-schluss{opacity:1;transform:none}}
@media (max-width:600px){
  .fragen-feld{gap:.45rem}
  .fragen-feld li{padding:.4rem .8rem}
  .zaehler .wort{min-height:3.2em}
}
@media (max-height:520px){
  :root{--kopf-hoehe:3rem}
  .animiert .buehne{padding-top:3rem;padding-bottom:1rem}
  .animiert .bild,
  .animiert .szene--haus .bild{max-height:72vh;max-height:72svh}
}
@media (max-height:520px) and (min-width:34rem){
  .animiert .szene--haus .buehne{
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto 1fr;
    align-items:center;column-gap:1.5rem;row-gap:.6rem;
  }
  .animiert .szene--haus .haus-titel{grid-column:2;grid-row:1;align-self:end;margin:0}
  .animiert .szene--haus .bild{grid-column:1;grid-row:1 / span 3}
  .animiert .szene--haus .zaehler{grid-column:2;grid-row:2}
  .animiert .szene--haus .zeitstrahl{grid-column:2;grid-row:3;align-self:start;width:16rem}
}