/*
 * Espresso-Zaehler, eigenstaendige Komponente
 * ===========================================
 * Laeuft auf /booking/ und spaeter auf der Startseite. Bewusst nicht an eine
 * Seite gebunden: eigene Datei, eigener Namensraum ip-espresso, Farben mit
 * Hex-Rueckfall, damit die Komponente auch ohne die Tokens der Seite steht.
 *
 * Die Zahl selbst steht als fertiges HTML im Dokument, gerechnet von
 * _skripte/espresso-zaehler.ps1 (E19 und W13). JavaScript zaehlt sie beim
 * Laden nur hoch, es erzeugt sie nie.
 *
 * Spec: 00-System/specs/2026-08-10-buchungstool-design.md, E19
 * Plan: 00-System/plans/2026-08-10-buchungstool.md, B9
 */

/* Das Zeichen steht mittig neben dem ganzen Textblock, nicht oben neben der
   Zahl. Es ist ein eigenes Element und keine Zeilen-Verzierung (Fabiano,
   2026-08-15). */
.ip-espresso {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.ip-espresso-zeichen {
  flex: none;
  display: block;
}
/* 80 px ist die Kachel, nicht die Zeichnung: die Tasse belegt rund die Haelfte
   der Hoehe des 44er-Feldes, gezeichnet stehen also etwa 60 mal 40 px neben dem
   Text. Auf schmalen Schirmen eine Stufe kleiner, sonst frisst das Zeichen die
   Breite, die die Zahl braucht. */
.ip-espresso-zeichen svg {
  display: block;
  width: 80px;
  height: 80px;
}
@media (max-width: 30rem) {
  .ip-espresso { gap: 12px; }
  .ip-espresso-zeichen svg { width: 58px; height: 58px; }
}

/* Der Kaffee im Zeichen laeuft beim Laden ein, die Tasse fuellt sich. Das ist
   das einzige bewegte Teil der Grafik, damit bleibt es ein Zeichen und kein
   Effekt. Getroffen wird das eine blau gefuellte Teil ueber seine Farbe, egal
   ob es als path oder als rect gezeichnet ist. Damit ueberlebt die Regel eine
   Neuzeichnung des Zeichens (passiert am 2026-08-15, Trapez zu Tasse mit
   Untertasse, der Kaffee war vorher ein rect und ist jetzt ein path).

   Dauer und Kurve stehen hier und nur hier. espresso.js liest beides aus der
   laufenden Animation aus und laesst die Zahl im selben Takt hochlaufen, damit
   die Tasse genau dann voll ist, wenn die Zahl steht (Fabiano, 2026-08-15).
   Die Kurve ist easeOutCubic als Bezier, dieselbe, die das Skript rechnet. */
.ip-espresso-zeichen svg [fill^="var(--ip-blue"] {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: ipEspressoSpiegel 1100ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes ipEspressoSpiegel {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.ip-espresso-text { min-width: 0; }

.ip-espresso-zahl {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.1;
  /* Ziffern gleich breit, sonst zappelt die Zahl beim Hochzaehlen. */
  font-variant-numeric: tabular-nums;
  color: var(--ip-black, #000000);
}

.ip-espresso-einheit {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ip-blue, #2B0AFF);
}

.ip-espresso-satz {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ip-black, #000000);
}

/* Ein Block mit data-espresso-warten haelt die Fuellung an, bis espresso.js
   data-espresso-los setzt, also bis der Zaehler im Blick ist. Zahl und Tasse
   starten damit weiterhin im selben Takt. */
.ip-espresso[data-espresso-warten]:not([data-espresso-los]) .ip-espresso-zeichen svg [fill^="var(--ip-blue"] {
  animation-name: none;
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
}

@media (prefers-reduced-motion: reduce) {
  .ip-espresso-zeichen svg [fill^="var(--ip-blue"] { animation: none; }
  .ip-espresso[data-espresso-warten] .ip-espresso-zeichen svg [fill^="var(--ip-blue"] { transform: none; }
}