/* ══ STERNE ═════════════════════════════════════════════════
   Aus dem Prototyp V3 übernommen (Zeilen 2950–3048; history/stars.js).
   Ein bis drei Sterne je Bild, vergeben mit Alt + 1/2/3, solange der
   Zeiger auf dem Bild liegt. Vier Lagen, vier Größen — sie stehen hier an
   einer Stelle beisammen:
     Hauptfenster  mittig über dem Generieren-Knopf
     Miniatur      mittig unter der Miniatur, in der Bildreihe
     Historie      mittig unter der Karte
     Lupe          mittig unter dem Bild
   Der Platz hält die Lage, bewegt wird allein die Figur darin: so
   verschiebt kein Flug die Reihe. Ein leerer Platz zieht sich auf null
   zusammen und nimmt seine Lücke mit. */
:root {
  --stern-haupt: 18px;
  --stern-mini: 9px;
  --stern-hist: 12px;
  --stern-zoom: 22px;
  --stern-ab-haupt: 12px;
  --stern-ab-mini: 4px;
  --stern-ab-hist: 10px;
  --stern-ab-zoom: 16px;
  --stern-lueck: 0.28; /* Lücke zwischen den Sternen, in Sterngrößen */
}
.sterne {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 0;
  white-space: nowrap;
  z-index: 60;
  gap: calc(var(--sz) * var(--stern-lueck));
}
.sterne .platz {
  position: relative;
  flex: 0 0 auto;
  width: var(--sz);
  height: var(--sz);
  transition:
    width 0.22s ease,
    margin-left 0.22s ease;
}
.sterne .platz.weg {
  width: 0;
  margin-left: calc(-1 * var(--sz) * var(--stern-lueck));
}
.sterne .platz.weg .fig {
  opacity: 0;
}
.sterne .fig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sz);
  height: var(--sz);
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  color: var(--black);
  will-change: transform, filter, opacity;
}
.sterne .fig svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Über dem Generieren-Knopf: die Wendekarte steckt in einer Halterung, an
   der die Sterne hängen. */
.gen-halt {
  position: relative;
}
.sterne.st-haupt {
  --sz: var(--stern-haupt);
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + var(--stern-ab-haupt));
  transition: opacity 0.25s ease;
}
/* Während eines Stapelauftrags steht der Zähler in genau dieser Luft über
   dem Knopf. Dann treten die Sterne zurück — gewertet wird ohnehin erst,
   wenn das Bild da ist. */
.gen-wrap:has(#batch-counter.on) .sterne.st-haupt {
  opacity: 0;
}
/* Ebenso, wenn der Knopf gar nicht der Generieren-Knopf ist: in der
   Anmeldung, der Registrierung und der Tarifwahl steht dort etwas anderes. */
body.locked .sterne.st-haupt,
body.lg-abo .sterne.st-haupt,
body.abo-app .sterne.st-haupt,
body.lg-regmodus .sterne.st-haupt,
body.lg-geht .sterne.st-haupt {
  opacity: 0;
}
/* Und in der großen Historie heißt er „Export“ und meint alle markierten
   Bilder, nicht das eine im Hauptfenster. */
body.cv-open .sterne.st-haupt {
  opacity: 0;
}
.sterne.st-mini {
  --sz: var(--stern-mini);
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + var(--stern-ab-mini));
}
.sterne.st-hist {
  --sz: var(--stern-hist);
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + var(--stern-ab-hist));
}
.sterne.st-zoom {
  --sz: var(--stern-zoom);
  position: fixed;
  transform: translateX(-50%);
  z-index: 20;
}

/* ── DIE FLUGSCHICHT ───────────────────────────────────────────────
   Der Stern kommt weit her — weiter, als die Bildreihe hoch ist. Sie rollt
   waagerecht und schneidet darum senkrecht ab; die große Historie rollt in
   ihrem eigenen Kasten und schneidet ebenso. Also fliegt nicht der Stern
   selbst, sondern sein Doppel, in einer Schicht über allem, die nichts
   beschneidet. Erst am Ziel tritt der echte an seine Stelle. */
#stern-flug {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: visible;
}
#stern-flug .flieger {
  position: fixed;
  left: 0;
  top: 0;
  color: var(--black);
  will-change: transform, filter, opacity;
}
#stern-flug .flieger svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Der Platz in der Lupe liegt außerhalb des Bildes und ist darum nur da,
   solange die Lupe offen ist. */
#cv-lb-sterne {
  display: none;
}
body.lb-open #cv-lb-sterne {
  display: flex;
}
/* Der Anker der gelben Blase: ein Punkt ohne Ausdehnung an der
   Zeigerspitze. Die Blase selbst ist die der App (#tipp). */
#stern-hilfe {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
}
/* Steht zu einem Bild etwas notiert, stehen seine Sterne rot — überall, wo
   es sich zeigt. Das Rot heißt hier nicht „wegnehmen“, sondern „dazu steht
   etwas“: es ist die einzige Farbe, die diese App für „sieh her“ hat. */
.sterne.notiert .fig {
  color: var(--red);
}
/* Liegt eine Miniatur in der Hand, gehören ihre Sterne dazu und gehen mit
   in Rot. Im Löschmodus liegt die rote Fläche über der Miniatur; dort
   treten sie ganz zurück. */
.hist-item.zieht .sterne.st-mini .fig {
  color: var(--red);
}
body.loeschmodus .sterne.st-mini {
  opacity: 0;
}
/* Die Bildreihe rollt waagerecht und schneidet darum senkrecht ab: sie
   braucht unten so viel Polster, wie Stern und Abstand verlangen — 3 px für
   das Wippen der Miniaturen, dann Abstand und Stern, und 4 px Luft bis zur
   Kante. */
.hist-scroll {
  padding-bottom: calc(3px + var(--stern-ab-mini) + var(--stern-mini) + 4px);
}