/* Ospella — match.css: der Augenblick, in dem zwei gleichzeitig ja gesagt haben.

   Auf Ansage vom 01.09.2026. Vorher war das eine gewöhnliche Bestätigungskarte
   — §17 verbot ausdrücklich „Konfetti und Erfolgsbanner". Der Auftrag lautete,
   diesen einen Moment hervorzuheben, und genau dieser eine ist es geworden:
   Vollbild, beide Gesichter, ein Schriftzug und ein Licht, das einmal darüber
   läuft. Alles andere in Ospella feiert weiterhin nichts.

   Der Textmarker unter „Es ist angerichtet" ist der Highlighter im Wortsinn:
   ein Strich, der sich unter das Wort zieht. Er liegt bewusst NUR im unteren
   Sechstel der Zeile — ein Balken hinter dem ganzen Wort würde den Kontrast
   der Schrift zerstören, und dann wäre die Feier auf Kosten der Lesbarkeit
   gegangen.

   Die Farben kommen ausschließlich aus den Rollen. Damit trägt der Moment jede
   Palette mit, auch eine selbst gerührte — und die Paarung
   `--text-auf-gruen` gegen `--flaeche-tisch` ist genau eine der sechs, die der
   Farb-Screen misst.

   Bewegung ist Zierde: Bei `prefers-reduced-motion` greift die globale Regel
   aus base.css, alle Abläufe springen in ihren Endzustand, und die Tafel steht
   vollständig und lesbar da. */

.matchtafel {
  position: fixed; inset: 0; z-index: 40;
  background: var(--flaeche-tisch);
  color: var(--text-auf-gruen);
  display: grid; place-items: center;
  padding: calc(var(--rand-seite) + 6px);
  overflow: hidden;
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.matchtafel.an { opacity: 1; }

.matchinhalt {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--spalte-max);
  text-align: center;
}

/* --- Der Schriftzug mit dem Textmarker --- */
.matchruf {
  position: relative; display: inline-block;
  font-family: var(--schrift-display); font-weight: 500;
  font-size: 2.125rem; line-height: 1.1;
  margin-bottom: 6px;
}
.matchruf .wort { position: relative; z-index: 2; }
.matchruf .strich {
  position: absolute; z-index: 1;
  left: -6px; bottom: .06em; height: .17em; width: 0;
  background: var(--akzent); border-radius: 2px;
  animation: marker-ziehen 560ms 300ms cubic-bezier(.22, .9, .3, 1) forwards;
}
@keyframes marker-ziehen {
  from { width: 0; }
  to { width: calc(100% + 12px); }
}

/* --- Die beiden Bilder --- */
.matchbilder {
  display: flex; justify-content: center; align-items: center;
  margin: 24px 0 20px;
}
.matchbild {
  width: 8rem; height: 8rem; flex: none;
  border-radius: var(--r-rund); overflow: hidden;
  background: var(--flaeche-karte);
  border: 3px solid var(--text-auf-gruen);
  display: grid; place-items: center;
}
/* Derselbe Ausschnitt wie überall sonst: Porträts haben den Kopf oben, mittig
   beschnitten fällt er weg (profil.css). */
.matchbild img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.matchbild .initiale {
  font-family: var(--schrift-display); font-weight: 400;
  font-size: var(--gr-buchstabe); color: var(--gruen-text);
}
.matchbild.links {
  animation: bild-von-links 520ms 120ms cubic-bezier(.22, .9, .3, 1) both;
}
.matchbild.rechts {
  margin-left: -1.4rem;
  animation: bild-von-rechts 520ms 120ms cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes bild-von-links {
  from { transform: translateX(-42%) rotate(-9deg); opacity: 0; }
  to { transform: translateX(0) rotate(-4deg); opacity: 1; }
}
@keyframes bild-von-rechts {
  from { transform: translateX(42%) rotate(9deg); opacity: 0; }
  to { transform: translateX(0) rotate(4deg); opacity: 1; }
}

/* --- Text und Knöpfe auf der grünen Fläche --- */
.matchtafel .t-rubrik {
  /* Ohne diese Zeile stünde die Rubrik in --holz-text auf Grün — die eine
     Paarung, die in keiner Palette hält. */
  color: var(--text-auf-gruen);
  margin-bottom: 8px;
}
.matchtafel .t-flies {
  color: var(--text-auf-gruen);
  margin: 0 auto; max-width: 34ch;
}
.matchtafel .aktionsreihe { justify-content: center; margin-top: 22px; }
.matchtafel .hauptaktion {
  width: auto; min-width: 9rem;
  background: var(--flaeche-karte); color: var(--gruen-text);
}
.matchtafel .nebenaktion {
  border-color: var(--text-auf-gruen); color: var(--text-auf-gruen);
}
.matchtafel :focus-visible { outline-color: var(--text-auf-gruen); }

/* --- Das Licht, das einmal darüberläuft --- */
.matchglanz {
  position: absolute; z-index: 1; pointer-events: none;
  top: -30%; bottom: -30%; left: 0; width: 38%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .18) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-180%) rotate(9deg);
  animation: glanz-laeuft 1200ms 340ms ease-out forwards;
}
@keyframes glanz-laeuft {
  from { transform: translateX(-180%) rotate(9deg); opacity: 1; }
  to { transform: translateX(340%) rotate(9deg); opacity: 0; }
}

/* Bei 200 % Schriftgröße muss der Moment mitwachsen und trotzdem passen:
   Bilder in rem, Schriftzug kleiner, Rand knapper. */
@media (max-height: 620px) {
  .matchruf { font-size: 1.75rem; }
  .matchbild { width: 6rem; height: 6rem; }
  .matchbilder { margin: 16px 0 14px; }
}