/* ==================================================================
   Amorazza - Das Medaillen-Fenster (V692, V693)
   ==================================================================
   Christian am 12.08.2026: "Ein popup geht auf, halbtransparent, die
   erste medaille kommt von oben ins bild, dann die zweite dann die
   dritte usw bis sie alle an ort und stelle sind. die bewegung darf
   nicht linear sein, sollten langsam runterfallen, dann abbremsen und
   an ihre positin schweben."

   DIE BEWEGUNG, und warum sie so gebaut ist:

   Ein fallender Koerper wird SCHNELLER, nicht langsamer - das ist der
   Unterschied zwischen "faellt" und "wird heruntergeschoben". Deshalb
   beginnt jede Medaille langsam und nimmt Fahrt auf:
       cubic-bezier(.34,.02,.32,1.12)
   Die letzte Zahl ueber 1 laesst sie um einen Hauch UEBER ihre
   Endlage hinausgehen und zurueckschwingen - das ist das "Einschweben".
   Ohne diesen Ueberschwinger wirkt das Ankommen abgehackt.

   DAZU ZWEI DINGE, die man einzeln kaum bemerkt, zusammen aber viel
   ausmachen:
     - Sie kommt eine Spur zu gross an (1.06) und geht auf 1 zurueck.
       Wie etwas, das naeher am Auge war und sich setzt.
     - Sie kippt leicht (-6 Grad) und richtet sich auf. Eine fallende
       Scheibe faellt nie ganz gerade.

   DIE ZEITEN, V693 - Christian: "Geschwindigkeit viel zu hoch,
   mindestens 3 x langsamer".
       Flugzeit    0,9s  ->  2,7s   (genau dreifach)
       Staffelung  130ms ->  260ms  (doppelt, nicht dreifach)
       Gesamt      1,55s ->  4,00s

   WARUM DIE STAFFELUNG NUR DOPPELT: dreifach waeren 390ms, und die
   letzte Medaille startete erst nach 1,95s - dann waere die erste
   laengst gelandet, und man saehe sechs Einzelvorgaenge statt einer
   Bewegung. Bei 260ms ueberlappen sie sich: waehrend die vierte
   startet, ist die erste noch unterwegs. Das haelt es zusammen.
   Die Flugzeit selbst - das, was Christian als Geschwindigkeit
   sieht - ist exakt dreifach.

   PREFERS-REDUCED-MOTION: alles faellt weg, die Medaillen sind
   einfach da. Wer Bewegung abgestellt hat, hat gute Gruende.
   ================================================================== */

.med-popup {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(1040px, 94vw);
  max-height: 92vh;
  overflow: visible;
}

/* Halbdurchsichtiger Grund.
   V694 (Christian, 12.08.): "mehr Transparenz, mindestens 20% mehr".
   Von 0,72 (V692) ueber 0,45 (V693) auf 0,25.
   Von 0,72 auf 0,45 - die Startseite ist jetzt deutlich zu sehen,
   nicht nur zu ahnen. Die Unschaerfe ist von 4 auf 2px zurueck: bei
   4px war der Grund so verwaschen, dass die Durchsicht wenig
   brachte. Weniger Unschaerfe, mehr Durchsicht - beides zieht in
   dieselbe Richtung.
   Der Text im Fenster steht trotzdem ruhig, weil die Buehne selbst
   zu 94 Prozent deckt (.med-buehne). */
.med-popup::backdrop {
  background: rgba(30, 12, 20, 0.12);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.med-buehne {
  position: relative;
  /* V695: HIER war der deckende Teil, nicht der Rand ringsum.
     V693 und V694 haben den ::backdrop durchsichtiger gemacht
     (0,72 -> 0,45 -> 0,25) - das ist aber nur der schmale Streifen
     aussen. Die grosse Flaeche hinter den Medaillen ist diese hier,
     und die stand unveraendert bei 0,94. Deshalb hat sich fuer
     Christian zweimal nichts geaendert.

     V696: 0,72 auf Christians Wunsch ("nochmal 15% reduzieren").
     Dafuer musste die Schrift dunkler werden, sonst waere sie ueber
     einem dunklen Bandbild unlesbar geworden:
         Ueberschrift  #993556 -> #7a2643   3,84:1 -> 5,26:1
         Fliesstext    #6b5560 -> #4b3a42   3,72:1 -> 5,80:1

     0,85 WAR DIE GRENZE bei der alten Schrift, gerechnet: darunter faellt der Fliesstext
     unter 4,5:1, wenn hinter der Buehne ein dunkles Bandbild steht.
         0,85  Ueberschrift 5,16:1  Text 5,00:1   beide ok
         0,80  Ueberschrift 4,62:1  Text 4,48:1   Text zu schwach
         0,55  Ueberschrift 2,46:1  Text 2,39:1   unlesbar
     V708 (Christian, 15.08.): HELLGRAU STATT WEISS, mit 1px
     dunkelgrauem Rand.
     Die Deckkraft steigt dabei von 0,72 auf 0,80 - NICHT aus Willkuer,
     sondern damit die Lesbarkeit bleibt. Gerechnet gegen den
     schlimmsten Fall, ein schwarzes Bandbild dahinter:
         weiss  bei 0,72  ->  wirksamer Grund 184
         grau   bei 0,80  ->  wirksamer Grund 186
     Also praktisch derselbe Untergrund. Nachgerechnet:
         Ueberschrift #7a2643   5,00:1
         Fliesstext   #4b3a42   5,52:1
     Beide bleiben ueber 4,5:1. Bei 0,72 mit Grau waeren es 4,4 und
     4,9 gewesen - die Ueberschrift also knapp darunter. */
  background: rgba(232, 234, 237, 0.80);
  border: 1px solid var(--med-rand, #4f555c);
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  max-height: 92vh;
  overflow-y: auto;
}

.med-kopf {
  text-align: center;
  margin: 0 0 20px;
}
.med-kopf h2 {
  margin: 0 0 4px;
  font-size: clamp(20px, 2.4vw, 27px);
  color: #7a2643;
}
.med-kopf p {
  margin: 0;
  color: #4b3a42;
  font-size: 15px;
}

.med-zu {
  position: absolute;
  top: 10px; right: 12px;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #4b1528;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.med-zu:hover { background: rgba(0, 0, 0, 0.12); }

/* Drei Spalten auf dem Rechner, zwei am Handy. Mehr als drei
   nebeneinander wird jede Medaille zu klein, um den Text zu lesen -
   und der Text ist der Inhalt. */
.med-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 700px) {
  .med-raster { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.med-raster img {
  display: block;
  width: 100%;
  height: auto;
  /* Das Seitenverhaeltnis MUSS hier stehen, nicht nur an der Datei:
     die Medaillen kommen mit loading="lazy" und sind beim Oeffnen
     noch nicht geladen. Ohne aspect-ratio waere das Raster in dem
     Moment flach, und das Fenster wuechse waehrend der Bewegung auf.
     NACHGEMESSEN, dass es haelt: die Buehne steht ueber die ganze
     Bewegung bei 1040x791 - sie waechst nicht. Mein erster
     Bildeindruck sagte etwas anderes (bei 120ms wirkte das Fenster
     flach), aber da waren die Medaillen nur noch nicht drin. */
  aspect-ratio: 1 / 1;
}

/* ---- Die Bewegung ---------------------------------------------- */

/* DER FLUGWEG IST KURZ: 190px, nicht 120vh.

   Mit 120vh starteten die Medaillen weit ueber dem Fenster und
   flogen sichtbar durch den abgedunkelten Raum darueber - im
   Bildvergleich bei 700ms zu sehen: halb ueber dem weissen Kasten,
   halb darueber.

   MEIN ERSTER VERSUCH, das mit overflow: clip am Raster zu loesen,
   war falsch und wurde zurueckgenommen. Nachgemessen, was er
   anrichtete: die Buehne stand 1,2 Sekunden lang bei 440x468 statt
   1040x791 und sprang dann auf - das Beschneiden nimmt dem Raster
   die Hoehe, solange die Bilder noch ausserhalb liegen.

   190px sind rund zwei Drittel einer Medaillenhoehe. Weit genug,
   dass sie sichtbar von oben hereinkommt, kurz genug, dass sie
   dabei die Buehne nicht verlaesst. */

.med-raster img {
  opacity: 0;
  transform: translateY(-190px) scale(1.06) rotate(-6deg);
}

.med-popup.laeuft .med-raster img {
  animation: med-fallen 2.7s cubic-bezier(.34, .02, .32, 1.12) forwards;
}

/* Die Staffelung. Sechs feste Werte statt einer Rechnung im Skript:
   so steht die Bewegung im Stylesheet, wo sie hingehoert, und das
   Skript schaltet nur eine Klasse. */
.med-popup.laeuft .med-raster img:nth-child(1) { animation-delay: 0ms;   }
.med-popup.laeuft .med-raster img:nth-child(2) { animation-delay: 260ms; }
.med-popup.laeuft .med-raster img:nth-child(3) { animation-delay: 520ms; }
.med-popup.laeuft .med-raster img:nth-child(4) { animation-delay: 780ms; }
.med-popup.laeuft .med-raster img:nth-child(5) { animation-delay: 1040ms; }
.med-popup.laeuft .med-raster img:nth-child(6) { animation-delay: 1300ms; }

@keyframes med-fallen {
  0% {
    opacity: 0;
    transform: translateY(-190px) scale(1.06) rotate(-6deg);
  }
  /* Frueh sichtbar werden - sonst erscheint sie aus dem Nichts,
     statt hereinzukommen. */
  12% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Wer Bewegung abgestellt hat, bekommt sie einfach hingelegt. */
@media (prefers-reduced-motion: reduce) {
  .med-raster img {
    opacity: 1;
    transform: none;
  }
  .med-popup.laeuft .med-raster img {
    animation: none;
  }
}

/* V708: zwei Knoepfe nebeneinander statt einem. flex mit Umbruch -
   auf schmalen Geraeten stehen sie untereinander statt zu quetschen. */
.med-fuss {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.med-fuss button,
.med-fuss .med-mehr {
  padding: 11px 22px;
  border: 2px solid #d4537e;
  border-radius: 22px;
  background: #ffffff;
  color: #993556;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  /* Der Link soll aussehen wie der Knopf daneben - ohne
     Unterstreichung und ohne Zeilenversatz. */
  text-decoration: none;
  display: inline-block;
  line-height: normal;
}
.med-fuss button:hover,
.med-fuss .med-mehr:hover { background: #fbeaf0; }
/* Der Weg nach draussen soll sich vom Schliessen unterscheiden -
   sonst greift man im Vorbeigehen daneben.
   NICHT #d4537e: weisse Schrift darauf ergibt nur 3,93:1 und liegt
   damit unter 4,5:1. Beim Bauen nachgerechnet und geaendert.
   #993556 ist dieselbe Farbe, die der Schliessen-Knopf als SCHRIFT
   traegt - hier umgekehrt, und mit 7,00:1 deutlich sicher. */
.med-fuss .med-mehr {
  background: #993556;
  color: #ffffff;
  border-color: #993556;
}
.med-fuss .med-mehr:hover {
  background: #7a2643;
  border-color: #7a2643;
  color: #ffffff;
}