/* Volltreffer! — Ablauf: Splash → Intro → Spiel
   Alles, was zum Ablauf gehört, steht hier und nicht in splash.css. Damit bleibt
   splash.css genau die Datei aus dem Export und kann jederzeit durch eine neue
   ersetzt werden, ohne dass hier etwas nachgezogen werden muss. */

/* splash.css setzt html,body auf #0d2233. Das Spiel ist aber durchsichtig
   angelegt, damit die Seite als iframe die Hintergrundfarbe von außen bekommt —
   deshalb hier zurückgenommen. Der Splash bringt seine Farbe in .splash selbst
   mit und deckt die Fläche ohnehin voll ab. */
html, body { background: transparent; }

/* --- Die drei Ebenen -----------------------------------------------------
   Sie liegen übereinander, nicht hintereinander: die Spielebene lädt schon
   während der Splash zu sehen ist. Sichtbar ist immer nur eine. */

#ebene-splash, #ebene-film {
  position: fixed; inset: 0;
  z-index: 20;
  opacity: 1;
  transition: opacity 520ms ease;
}

/* Ausgeblendet wird über die Deckkraft, danach nimmt visibility es aus dem
   Weg — display:none ginge nicht, das überspränge die Überblendung. */
#ebene-splash.weg, #ebene-film.weg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* KEIN Hintergrund. Der Film liegt beim Intro über dem Standbild und blendet
   darüber ein — ein schwarzer Hintergrund blendete dann als Erstes mit hoch,
   und man sah das Bild verdunkeln, bevor der Film da war. Genau das war zu
   sehen.

   Gefahrlos, weil #film mit object-fit:cover die ganze Ebene ausfüllt: der
   Hintergrund war ohnehin nur vor dem ersten Filmbild sichtbar. Bei den beiden
   späteren Filmen liegt dort die Schwarzblende, es bleibt also schwarz. */
#ebene-film { background: transparent; z-index: 21; }

/* Die Schwarzblende zwischen Splash und dem "wer beginnt"-Film. Sie liegt über
   allem außer dem Film selbst und ist normalerweise durchlässig. Langsam
   hinein, schnell wieder heraus: das Abblenden soll man sehen, das Aufblenden
   nicht abwarten müssen. */
#ebene-schwarz {
  position: fixed; inset: 0;
  z-index: 22;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease-in;
}
#ebene-schwarz.da { opacity: 1; }
#ebene-schwarz.raus { transition: opacity 350ms ease-out; }

/* Die Spielebene ist am Anfang unsichtbar und nicht bedienbar: sonst finge ein
   Klick durch den Splash hindurch schon an, Steine zu werfen.
   inset:0 ist Pflicht und keine Zier: die Leinwand steht auf height:100%, und
   ohne feste Höhe des Elternteils fiele sie auf null zusammen. */
#ebene-spiel {
  position: fixed; inset: 0;
  opacity: 0;
  transition: opacity 620ms ease;
  pointer-events: none;
}
#ebene-spiel.da { opacity: 1; pointer-events: auto; }

/* Die Fehlermeldung deckt alles zu, auch den Splash — sonst stünde eine
   unlesbare Szene hinter einem hübschen Titelbild und niemand wüsste, warum. */
#error { z-index: 60; }

/* --- Die Leinwand an der Stelle des Standbilds -------------------------
   Im Entwurf war .game__board ein <img> mit object-fit: contain. Hier ist es
   die laufende Leinwand. Sie bekommt dieselbe Klasse und damit dieselbe Lage,
   aber object-fit greift bei einer Leinwand nicht: sie zeichnet selbst in
   voller Größe. Deshalb hier ausdrücklich die Fläche, und die Atmung aus dem
   Entwurf muss weg — eine pulsierende Deckkraft über 60 Bildern je Sekunde
   wäre Arbeit für nichts. */
canvas.game__board {
  display: block;
  width: 100%; height: 100%;
  animation: none;
  touch-action: none;
  cursor: grab;
}
canvas.game__board.dragging { cursor: grabbing; }

/* Das Spielfeld liegt unter allem, was die Anzeige darüberlegt. Ohne eigene
   Ebene läge die Leinwand über den Plättchen — sie steht als Erstes im Markup,
   und ohne z-index gewinnt bei gleichem Rang das spätere Element. */
/* z-index 1, nicht 0: das Feuerwerk liegt auf 0 und soll DAHINTER bleiben. */
.game__board { z-index: 1; }
.game__title, .plate, .turn-bar, .controls { z-index: 5; }

/* Die Statusleiste trägt jetzt echte Meldungen; bei "Treffer" und "versenkt"
   färbt sie sich, damit man den Ausgang eines Wurfs auch ohne Lesen sieht. */
.turn-bar__text.ist-treffer { color: #ffb27a; }
.turn-bar__meldung { font-weight: 800; }

/* Ist die Partie aus, hört das Plättchen auf zu wippen — sonst sähe es aus,
   als wäre noch jemand am Zug. */
.game.aus .plate.is-active { animation: none; }
.game.aus .plate__stone { display: none; }

/* "Neue Partie" im Einstellungsfeld. Der Entwurf hatte dafür keinen Platz;
   der Knopf übernimmt die Formensprache der Segmentschalter. */
.settings__neu {
  margin-top: 4px;
  padding: 12px 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.settings__neu:hover { background: rgba(255, 255, 255, .28); }
.settings__neu:active { transform: translateY(1px); }

/* Die Anzeige ist stumm, solange nicht gespielt wird: vor dem Startknopf
   stünden sonst zwei Plättchen mit Nullen hinter dem Titelbild. */
#ebene-spiel:not(.da) .plate__stone { display: none; }

/* --- Splash: der Ladehinweis --------------------------------------------
   Der Startknopf bleibt sichtbar, wird aber matt, solange die Objekte laden.
   So sieht man, dass etwas passiert, ohne dass die Gestaltung springt. */
.start-btn[disabled] { cursor: progress; filter: grayscale(.55) brightness(.8); }
.start-btn[disabled]:hover { filter: grayscale(.55) brightness(.8); }

#splash-laden {
  min-height: 1.4em;
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 2px 6px rgba(6, 26, 42, .6);
}

/* --- Die Filme ----------------------------------------------------------- */

/* Vollflächig: der Film füllt das Fenster ganz aus und wird dafür an der
   längeren Seite beschnitten. Mit "contain" blieben schwarze Balken stehen,
   sobald das Seitenverhältnis des Fensters nicht zu dem des Films passt —
   die Filme sind 1920 × 1280, also 3:2, und kaum ein Fenster ist das.
   Der Preis ist bekannt und gewollt: bei einem sehr breiten Fenster
   verschwindet oben und unten etwas. */
#film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Ebenfalls durchsichtig, aus demselben Grund — sonst blendete statt Schwarz
     eben dieses Dunkelblau über das Standbild. */
  background: transparent;
}

#film-skip {
  position: absolute; right: clamp(14px, 3vw, 40px); bottom: clamp(14px, 4vh, 40px);
  z-index: 2;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: #f1f7fb;
  background: rgba(8, 22, 38, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 180ms ease, border-color 180ms ease;
}
#film-skip:hover { background: rgba(20, 52, 80, .8); border-color: rgba(255, 255, 255, .5); }
#film-skip:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 3px; }

/* Der Ton-Knopf sitzt links neben "Überspringen" und sieht aus wie er */
#film-ton {
  position: absolute; left: clamp(14px, 3vw, 40px); bottom: clamp(14px, 4vh, 40px);
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: #f1f7fb;
  background: rgba(8, 22, 38, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 180ms ease, border-color 180ms ease;
}
#film-ton[hidden] { display: none; }
#film-ton svg { width: 16px; height: 16px; }
#film-ton:hover { background: rgba(20, 52, 80, .8); border-color: rgba(255, 255, 255, .5); }

@media (prefers-reduced-motion: reduce) {
  #ebene-splash, #ebene-film, #ebene-spiel, #ebene-schwarz { transition: none; }
}

/* --- Die Version im Titelbild -------------------------------------------
   Klein, mittig unten, zurückhaltend. Sie soll auffindbar sein, ohne die
   Gestaltung zu stören — deshalb liegt sie unter der Zeile mit den Spielern
   und wird erst beim Darüberfahren deutlich. */
#splash-version {
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center;
  font: 400 10px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  pointer-events: none;   /* nur der Link selbst ist anklickbar */
}
#splash-version a {
  pointer-events: auto;
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(6, 26, 42, .8);
  transition: color 180ms ease;
}
#splash-version a:hover { color: rgba(255, 255, 255, .9); text-decoration: underline; }

/* ======================================================================
   Nachbesserungen am Spielbildschirm

   Sie stehen hier und nicht in spiel.css: das ist unverändert der Export
   und soll es bleiben, damit eine neue Ausfuhr ihn ersetzen kann, ohne
   dass hier etwas verlorengeht. Beides sind Fehler, die man nur in
   verschiedenen Fenstergrößen sieht.
   ====================================================================== */

/* --- Der Titel saß nicht mittig ---------------------------------------
   .game__title steht auf left:50% und wird mit transform: translateX(-50%)
   zurückgeholt. Die Schwebe-Animation setzt aber ihrerseits transform —
   und ein transform ersetzt das andere vollständig, es addiert sich nicht.
   Damit war die Zentrierung weg, sobald die Animation lief: der Titel
   hing um seine halbe Breite nach rechts versetzt. Gemessen 82 px bei
   164 px Titelbreite, also exakt die Hälfte.

   Die Kur ist, die Verschiebung in jedes Bild der Animation mitzunehmen —
   aber unter EIGENEM NAMEN. "title-float" heißt auch die Animation des
   Splash-Titels in splash.css, und der steht in einem Flex-Feld und braucht
   gar keine Verschiebung. Wer den gemeinsamen Namen überschreibt, verschiebt
   ihn mit: genau das ist beim ersten Anlauf passiert, der Splash-Titel rutschte
   um seine halbe Breite nach links. Zwei Titel, zwei Animationen. */
@keyframes titel-schwebt-mittig {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
.game__title { animation-name: titel-schwebt-mittig; }
/* Und für den Fall, dass jemand Bewegung abbestellt hat: dann läuft die
   Animation nicht, und die Zentrierung muss trotzdem stehen. */
@media (prefers-reduced-motion: reduce) {
  .game__title { transform: translateX(-50%); }
}

/* --- Die Zahlen wuchsen nicht mit -------------------------------------
   Im Entwurf standen Lage und Größe der großen Zahl in festen Pixeln
   (left: 116px, top: 58px, font-size ab 50px), während das Plättchen mit
   clamp(180px, 27vw, 600px) mitwächst. Bei 247 px Plättchenbreite saß sie
   damit richtig, bei 600 px war sie viel zu weit links und viel zu klein.

   Jetzt richtet sich alles nach der Breite des Plättchens: container-type
   macht es zum Bezug, cqw ist ein Hundertstel davon. Die Werte sind aus
   der Lage abgelesen, in der es gestimmt hat — das Bild bleibt also, wie
   es war, und wandert nur nicht mehr aus. */
.plate { container-type: inline-size; }

.plate__value { height: 42%; }
.plate--michael .plate__value { left: 47%;   top: 45%; width: 37%; }
.plate--susanne .plate__value { left: 34%;   top: 46%; width: 35%; }

/* 20.3 cqw entspricht den 50 px, die bei 247 px Plättchenbreite standen */
.plate__value span { font-size: 20.3cqw; }
/* und 6.9 cqw den 16.9 px der ZIELE-Zahl */
.plate__left span  { font-size: 6.9cqw; }

/* Container-Abfragen kennt jeder aktuelle Browser. Wer sie nicht kennt,
   bekommt wenigstens eine Größe, die zum Fenster passt — besser als die
   festen 50 px des Entwurfs. */
@supports not (container-type: inline-size) {
  .plate__value span { font-size: clamp(22px, 5.5vw, 122px); }
  .plate__left span  { font-size: clamp(9px, 1.9vw, 41px); }
}

/* --- "Zum Intro" auf dem Titelbild -------------------------------------
   Übernimmt die ganze Formensprache des Startknopfs (Rahmen, Lichtreflex,
   Schweben) und unterscheidet sich nur in der Größe: 61 % davon, genau das
   Verhältnis der beiden Grafiken zueinander (453 zu 744 Bildpunkte). So
   bleibt "Spiel starten" der Blickfang, ohne dass zwei Gestaltungen
   nebeneinanderstehen.

   Der Lichtreflex läuft versetzt, sonst blitzten beide Knöpfe im Gleichtakt
   und es sähe nach einem Fehler aus. */
.start-btn--intro {
  width: clamp(134px, 20.7vw, 281px);
  animation-delay: 1.6s;
}
.start-btn--intro .start-btn__glint { animation-delay: 2.4s; }

/* "Zum Menü" ist ein Rückweg, kein Fortschritt — deshalb blasser als
   "Neue Partie" darüber, damit die beiden nicht gleich laut rufen. */
.settings__zurueck {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .82);
}
.settings__zurueck:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* --- Weltenauswahl -------------------------------------------------------
   Ein Auswahlfeld statt Segmentknöpfen: die Zahl der Welten wächst mit jeder
   neuen Datei, und drei nebeneinandergestellte Knöpfe wären bei sechs Welten
   nicht mehr zu lesen. */
.settings__wahl {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  appearance: none;
  /* Pfeil selbst gezeichnet, damit er zur übrigen Gestaltung passt */
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.settings__wahl:hover { background-color: rgba(255, 255, 255, .18); }
.settings__wahl:disabled { opacity: .5; cursor: progress; }
/* Die Liste selbst zeichnet das Betriebssystem — dort hilft nur eine lesbare
   Farbe, alles andere ist nicht unser Feld. */
.settings__wahl option { background: #12293f; color: #fff; }

/* ===================================================== Ebene: Start ========
   Das Standbild aus dem Intro mit dem Startknopf. Liegt über allem, bis
   geklickt wurde — sie ist der erste Klick, der dem Film seinen Ton erlaubt.

   z-index 19 — bewusst UNTER Splash (20) und Film (21). Beim Klick bleibt das
   Standbild zunächst stehen und der Film blendet darüber ein; erst wenn
   wirklich ein Bild läuft, wird es weggenommen. Läge es darüber, müsste es
   erst verschwinden, und dazwischen wäre kurz nichts als Hintergrund zu sehen.
   Sichtbar ist es trotzdem von Anfang an: Film und Splash liegen beim Laden
   auf .weg, die Schwarzblende ist durchsichtig. */
#ebene-start {
  position: fixed; inset: 0; z-index: 19;
  /* Oben bündig statt mittig — mittig lag der Knopf auf den Gesichtern. */
  display: grid; place-items: start center;
  background: #0b1a2b;
  opacity: 1; transition: opacity .5s ease;
}
#ebene-start.weg { opacity: 0; pointer-events: none; }

/* Formatfüllend beschnitten statt verzerrt: das Bild behält sein Verhältnis
   und wird an der langen Seite abgeschnitten. */
#ebene-start .start__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

#btn-los {
  position: relative;
  margin-top: 10%;
  background: none; border: 0; padding: 0; cursor: pointer;
  line-height: 0;
  /* In der Breite mitwachsend, aber gedeckelt — auf einem großen Schirm soll
     der Knopf nicht ins Plakathafte wachsen. */
  width: clamp(190px, 26vw, 420px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
  transition: transform .16s ease, filter .16s ease;
}
#btn-los img { width: 100%; height: auto; display: block; }
#btn-los:hover { transform: translateY(-2px) scale(1.03); }
#btn-los:active { transform: translateY(1px) scale(.99); }
#btn-los:focus-visible { outline: 3px solid #ffd766; outline-offset: 6px; border-radius: 12px; }

/* Ein ruhiges Pochen, damit klar ist, wo es weitergeht — und nur dort, wo
   niemand es als störend empfindet: wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: no-preference) {
  #btn-los { animation: los-pocht 2.6s ease-in-out infinite; }
  /* Eigener Name, KEIN geteilter: ein @keyframes gilt global, und einen
     fremden zu überschreiben hat hier schon einmal den Splash-Titel getroffen. */
  @keyframes los-pocht {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
  }
  #btn-los:hover, #btn-los:active { animation: none; }
}

/* ---- Lichtreflex bleibt in der Knopfform -----------------------------------
   Der weiße Reflex läuft im Rahmen .start-btn__frame. Der ist rechteckig, die
   Knopfgrafiken sind rund — beim Überfahren schaute der Reflex deshalb in den
   vier Ecken als helle Fläche über den Knopf hinaus.

   Erster Versuch war ein border-radius von 48px auf dem Rahmen. Das ging nach
   hinten los: der Rahmen hat overflow:hidden und beschneidet damit ALLES darin,
   also auch die Grafik selbst. Gemessen liegt deren Rundung bei rund 22 % der
   Höhe (34px bei 153px), 48px schnitten also die Ecken ab.

   Statt einen Wert zu raten, wird jetzt mit der Knopfgrafik SELBST maskiert.
   Die Form stimmt dadurch exakt — es ist ja dieselbe Datei —, die Grafik bleibt
   unangetastet (sie ist genau ihre eigene Maske), und der Reflex kann gar nicht
   mehr darüber hinaus. Kein border-radius nötig, keine Zahl zu pflegen.

   Korrigiert wird hier, nicht in splash.css: das bleibt unverändert Michaels
   Export, damit eine neue Ausfuhr es einfach ersetzen kann. */
.start-btn__frame {
  border-radius: 0;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
#btn-start .start-btn__frame {
  -webkit-mask-image: url(../img/btn-starten.png);
  mask-image: url(../img/btn-starten.png);
}
#btn-intro .start-btn__frame {
  -webkit-mask-image: url(../img/btn-intro.png);
  mask-image: url(../img/btn-intro.png);
}
/* Der Fokusrahmen darf ruhig rund bleiben — er liegt außerhalb der Grafik. */
.start-btn:focus-visible { border-radius: 48px; }

/* ================================================== Feuerwerk ==============
   Läuft bei einem Deko-Treffer einmal ab und verschwindet wieder.

   `screen` ist der Kniff: das Filmmaterial liegt auf schwarzem Grund, und
   diese Mischung lässt Schwarz vollständig durch. Übrig bleiben die hellen
   Funken, die sich über die Szene legen — ohne dass irgendwo ein Rechteck
   sichtbar würde. Ein Alphakanal im Video wäre die Alternative, kostete aber
   ein anderes Format und ein Vielfaches an Daten.

   Es liegt HINTER der Leinwand (z-index 0 gegen 1). Anders geht es nicht:
   Spielfeld und Deko werden IN der Leinwand gezeichnet, ein Element des
   Dokuments kann sich nicht dazwischenschieben. Damit es überhaupt zu sehen
   ist, macht app.js die Leinwand für die Dauer durchsichtig (params.bgAlpha),
   sonst deckte deren schwarzer Hintergrund alles zu. */
#feuerwerk {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 260ms ease;
}
#feuerwerk.da { opacity: 1; }

/* =================================================== Booster ===============
   Die gewonnenen Booster unter dem Punktestand. Sie stehen IM Plättchen, nach
   allem anderen — dadurch haben sie ohne weiteres Zutun genau dessen Breite
   und wachsen mit ihm mit.

   AUSSERHALB des Flusses, mit position:absolute. Im Fluss vergrößerte die
   Reihe die Höhe des Plättchens — und weil Punktzahl und Bild darin auf
   Prozentwerten stehen (plate__value auf top: 45 %), wanderten die mit nach
   unten und die Zahl landete zwischen den Boostern. Absolut positioniert
   zählt die Reihe nicht zur Höhe, und alles darüber bleibt, wo es war.

   Drei Spalten fest, nicht auto-fit: die Reihe soll ihre Aufteilung behalten,
   auch wenn nur einer darin liegt. Sonst spränge ein einzelner Booster auf
   volle Breite und wirkte wie ein Fehler. */
.booster {
  position: absolute;
  left: 0; right: 0;              /* genau die Breite der Score-Grafik */
  top: calc(100% + 2%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3%;
}
.booster__stueck {
  width: 100%; height: auto; display: block;
  cursor: pointer;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
  transition: transform .15s ease, filter .15s ease;
}
.booster__stueck:hover { transform: translateY(-4%) scale(1.06); }

/* Ein freier Platz: nicht anklickbar, aber voll sichtbar.
   KEINE zusätzliche Deckkraft. Die Grafik ist von sich aus sehr zart —
   gemessen hat sie keinen einzigen deckenden Bildpunkt, 97 % sind völlig
   durchsichtig und der Rest nur angedeutet. Sie noch weiter zu dämpfen
   (vorher 38 %) machte die Plätze praktisch unsichtbar. */
.booster__stueck.is-leer {
  opacity: 1;
  cursor: default;
  filter: none;
}
.booster__stueck.is-leer:hover { transform: none; }

/* Eingelöst und wartet auf ein Feld: deutlich hervorgehoben, damit klar ist,
   dass der nächste Klick etwas anderes tut als sonst. */
.booster__stueck.is-bereit {
  filter: drop-shadow(0 0 10px rgba(255, 220, 120, .95)) brightness(1.15);
  animation: booster-wartet 1.1s ease-in-out infinite;
}
@keyframes booster-wartet {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}