/* Raumgleiter: Flip-Karten
   Abstaende in rem: 0.5 / 0.875 / 1.5 / 2.5 / 3 / 5
   Beide Seiten liegen im Grid uebereinander, dadurch waechst die Karte
   auf die hoehere der beiden Seiten statt zu beschneiden. */

.rg-flipkarten {
  background-color: var(--rg-weiss);
  color: var(--rg-schwarz);
  padding-block: var(--rg-sektion-y);
  padding-inline: var(--rg-sektion-x);
}

.rg-flipkarten__inner {
  display: flex;
  flex-direction: column;
  gap: var(--rg-abstand-gross);
  max-width: var(--rg-content-width);
  margin-inline: auto;
}

.rg-flipkarten__ueberschrift {
  margin: 0;
  font-size: var(--rg-size-h2);
  font-weight: var(--rg-weight-semibold);
  line-height: var(--rg-lh-heading);
  letter-spacing: var(--rg-ls-heading);
}

.rg-flipkarten__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--rg-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rg-flipkarte {
  perspective: 1200px;
}

.rg-flipkarte__kern {
  display: grid;
  min-height: var(--rg-flipkarte-hoehe, 20rem);
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.rg-flipkarte--gedreht .rg-flipkarte__kern {
  transform: rotateY(180deg);
}

.rg-flipkarte__seite {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rg-abstand);
  padding: var(--rg-flipkarte-innen, 3rem);
  border-radius: var(--rg-radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: center;
}

/* Vorderseite ist der Button, Browserstile zuruecksetzen */
.rg-flipkarte__seite--vorn {
  appearance: none;
  border: 0;
  margin: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.rg-flipkarte__seite--hinten {
  transform: rotateY(180deg);
}

.rg-flipkarte__kennzahl {
  /* Figma zeigt 48px. Der globale --rg-size-stat laeuft bis 64px und wird
     im Deepdive fuer groessere Kennzahlen gebraucht, daher hier ein
     eigener Wert, der sich global ueberschreiben laesst. */
  font-size: var(--rg-size-stat-karte, clamp(2rem, 4vw, 3rem));
  font-weight: var(--rg-weight-heavy);
  line-height: var(--rg-lh-tight);
}

.rg-flipkarte__titel {
  font-size: var(--rg-size-eyebrow);
  font-weight: var(--rg-weight-semibold);
  line-height: var(--rg-lh-text);
  letter-spacing: var(--rg-ls-normal);
  text-transform: uppercase;
}

.rg-flipkarte__text {
  margin: 0;
  font-size: var(--rg-size-body-s);
  line-height: var(--rg-lh-text);
}

.rg-flipkarte__pfeil {
  /* display: block ist noetig. Als inline-Element greift width nicht und das
     SVG zoege sich auf die volle Buttonbreite. */
  display: block;
  flex: 0 0 auto;
  width: 0.875rem;
  color: currentColor;
}

.rg-flipkarte__pfeil svg {
  display: block;
  width: 100%;
  height: auto;
}

.rg-flipkarte__zurueck {
  appearance: none;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  /* Zielgroesse nach WCAG 2.5.8: mindestens 24 x 24, empfohlen 44.
     Der Pfeil bleibt 14px, nur die Flaeche waechst. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  background: none;
  color: inherit;
  cursor: pointer;
}

.rg-flipkarte__nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sichtbarer Fokus, Kontrast je Variante */
.rg-flipkarte__seite--vorn:focus-visible,
.rg-flipkarte__zurueck:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

/* --- Variante blau --- */
.rg-flipkarten--blau .rg-flipkarte {
  --rg-flipkarte-hoehe: 22.5rem;
  --rg-flipkarte-innen: 3rem;
}

.rg-flipkarten--blau .rg-flipkarte__seite {
  background-image: var(--rg-gradient-brand);
  color: var(--rg-weiss);
}

/* --- Variante gelb --- */
.rg-flipkarten--gelb .rg-flipkarte {
  --rg-flipkarte-hoehe: 20rem;
  --rg-flipkarte-innen: 2.5rem;
}

.rg-flipkarten--gelb .rg-flipkarte__seite {
  background-color: var(--rg-gelb);
  color: var(--rg-schwarz);
}

/* Pfeil deutet die Drehung an, ohne die Karte zu bewegen */
.rg-flipkarte__seite--vorn:hover .rg-flipkarte__pfeil,
.rg-flipkarte__seite--vorn:focus-visible .rg-flipkarte__pfeil {
  transform: translateX(0.25rem);
}

.rg-flipkarte__pfeil {
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rg-flipkarte__kern,
  .rg-flipkarte__pfeil {
    transition: none;
  }
}

/* Auf Geraeten mit echtem Mauszeiger dreht schon das Ueberfahren die Karte.
   Klick und Tastatur bleiben gleichwertig, das JS haelt aria und inert
   dabei konsistent. Touch bekommt kein Hover. */