/* Zitate in der Galerie (20.10.2026, Michas „zu jedem Bild soll ein kurzes Zitat von der Person aufploppen, geil animiert“).
   Skript galerie-zitate.js. Die Sprechblase hängt mit ihrem Zipfel (Ecke unten links) im oberen rechten Teil des vorderen
   Fotos und wächst von dort nach oben rechts, leicht schräg wie ein Aufkleber. Farben über --paper/--black, damit sie
   im hellen Modus umgekehrt steht (dunkle Blase, helle Schrift). Bewegt wird über scale/rotate/translate. */

/* Titel unter dem Rad bekommt eine zweite Zeile (Michas Wunsch vom selben Tag), seit 27.10.2026 „UND WAS IHRE JACKEN
   AUSHALTEN“ statt „UND WAS SIE ERLEBT HABEN“. */
.orbit-hud .orbit-hud-titel { display: grid; justify-items: center; gap: .32em; }
.orbit-hud .orbit-hud-spruch { font: italic 400 .78em/1 Impact, Haettenschweiler, var(--display); letter-spacing: .02em; opacity: .88; rotate: -1.5deg; }

.orbit-zitat {
  position: absolute;
  z-index: 29;
  left: calc(50% + var(--card-w) * .12);
  /* --zitat-schub: so weit rutscht die Blase nach unten, wenn sie oben anstoßen würde (galerie-zitate.js, fitTop). */
  bottom: calc(100% - var(--orbit-top) - var(--card-h) * .25 - var(--zitat-schub, 0px));
  width: clamp(210px, calc(var(--card-w) * 1.02), 300px);
  padding: 17px 18px 13px;
  border-radius: 20px 20px 20px 4px;
  background: var(--paper);
  color: var(--black);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .35);
  opacity: 0;
  scale: .2;
  rotate: -2.5deg;
  transform-origin: 0 100%;
  pointer-events: none;
}
:root[data-theme="light"] .orbit-zitat { box-shadow: 0 22px 48px rgba(var(--ink-rgb), .28), 0 3px 10px rgba(var(--ink-rgb), .18); }

/* Auftritt: aus dem Zipfel aufploppen, mit einem Federn über das Ziel hinaus. */
.orbit-zitat.is-da { animation: zitat-auf .64s cubic-bezier(.34, 1.56, .64, 1) both; }
.orbit-zitat.is-weg { animation: zitat-weg .26s cubic-bezier(.55, 0, .8, .2) both; }
@keyframes zitat-auf {
  0% { opacity: 0; scale: .2; rotate: -16deg; filter: blur(5px); }
  45% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; scale: 1; rotate: -2.5deg; filter: blur(0); }
}
@keyframes zitat-weg {
  from { opacity: 1; scale: 1; rotate: -2.5deg; }
  to { opacity: 0; scale: .3; rotate: -12deg; }
}

/* Anführungszeichen als kleiner Knopf auf der oberen Kante, dreht sich hinein. */
.orbit-zitat-zeichen { position: absolute; top: -12px; left: 16px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--black); box-shadow: 0 0 0 2px var(--paper); color: var(--paper); font: 900 24px/1 Georgia, "Times New Roman", serif; padding-top: 9px; box-sizing: border-box; }
.orbit-zitat.is-da .orbit-zitat-zeichen { animation: zitat-zeichen .6s cubic-bezier(.34, 1.56, .64, 1) .14s both; }
@keyframes zitat-zeichen { from { scale: 0; rotate: -120deg; } to { scale: 1; rotate: 0deg; } }

/* Das Zitat: jedes Wort steigt aus seiner eigenen Kante, eins nach dem anderen. Ein Satz, zwei Stimmen (27.10.2026): die
   Lage etwas leiser, der letzte Satz, wie die Jacke gehalten hat, fett und in voller Farbe (galerie-zitate.js .ist-betont). */
.orbit-zitat-text { margin: 0; color: color-mix(in srgb, var(--black) 64%, var(--paper)); font: 600 clamp(14px, 1.12vw, 16.5px)/1.24 var(--sans); letter-spacing: -.012em; }
.orbit-zitat-wort.ist-betont { color: var(--black); font-weight: 800; }
.orbit-zitat-wort { display: inline-block; overflow: hidden; margin-bottom: -.12em; padding-bottom: .12em; vertical-align: top; }
.orbit-zitat-wort > span { display: inline-block; }
.orbit-zitat.is-da .orbit-zitat-wort > span { animation: zitat-wort .5s cubic-bezier(.2, .8, .2, 1) calc(.18s + var(--w, 0) * 38ms) both; }
@keyframes zitat-wort { from { translate: 0 115%; rotate: 7deg; } to { translate: 0 0; rotate: 0deg; } }

/* Sprachwechsel bei stehender Blase: neuer Text ohne neuen Auftritt. */
.orbit-zitat.ist-still * { animation: none !important; }

/* Handy: die Karte ist schmal, die Blase steht rechts am Rand und reicht mit dem Zipfel ins Foto. Damit sie oben nicht
   abgeschnitten wird und kein Gesicht verdeckt, steht das Rad hier etwas tiefer (mehr Luft über den Karten). */
@media (max-width: 680px) {
  .orbit-stage { --orbit-top: calc(var(--card-h) * .3); }
  .orbit-zitat { right: 12px; left: auto; bottom: calc(100% - var(--orbit-top) - var(--card-h) * .12 - var(--zitat-schub, 0px)); width: min(212px, calc(50% + var(--card-w) * .2 - 12px)); padding: 15px 14px 11px; border-radius: 17px 17px 17px 4px; }
  .orbit-zitat-text { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-zitat { scale: 1; }
  .orbit-zitat.is-da { animation: zitat-sanft .3s ease both; }
  .orbit-zitat.is-weg { animation: zitat-sanft .2s ease reverse both; }
  .orbit-zitat * { animation: none !important; }
}
@keyframes zitat-sanft { from { opacity: 0; } to { opacity: 1; } }