/* ===========================================================================
   Icon-Flip · Symbol kippt nach hinten weg, Beschriftung kippt von unten hoch
   ---------------------------------------------------------------------------
   Zwei Flächen eines gedachten Würfels: vorne das Symbol, unten die Schrift.
   Beim Hover dreht der Würfel um 90° um die X-Achse.

   Der entscheidende Kniff steckt in .flip__wuerfel:
   translateZ(-hoehe/2) schiebt den DREHPUNKT um die halbe Würfeltiefe nach
   hinten. Ohne das rotiert die Fläche um ihre eigene Ebene und schwingt dabei
   auf den Betrachter zu – es sieht aus wie eine umklappende Klappe, nicht wie
   ein Würfel, der sich an Ort und Stelle dreht.
   =========================================================================== */

.flip {
  /* Alles Einstellbare an einer Stelle */
  --breite:  4.6rem;
  --hoehe:   3.75rem;
  --dauer:   610ms;
  --easing:  cubic-bezier(.32, .72, 0, 1);   /* schnell an, weich aus, kein Überschwingen */
  --tiefe:   1600px;                         /* hoher Wert = flache, ruhige Drehung */
  --radius:  .55rem;

  --fg:      #f4f0f8;
  --akzent:  #b98cff;
  --symbol:  2rem;     /* Kantenlaenge des Symbols */
  --dimm:    .2;       /* Resthelligkeit der wegkippenden Flaeche */

  display: inline-flex;
  width: var(--breite);
  height: var(--hoehe);
  perspective: var(--tiefe);
  /* Der Link selbst bewegt sich nie – die Klickfläche bleibt stabil. */
  text-decoration: none;
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}

.flip__wuerfel {
  display: block;          /* span ist von Haus aus inline – ohne das kollabiert er auf 0x0 */
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--hoehe) / -2));
  transition: transform var(--dauer) var(--easing);
}

/* Hover UND Tastaturfokus – sonst ist der Effekt für Tastaturnutzer unsichtbar. */
.flip:is(:hover, :focus-visible) .flip__wuerfel {
  transform: translateZ(calc(var(--hoehe) / -2)) rotateX(90deg);
}

.flip__flaeche {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;   /* verhindert die gespiegelte Rückseite */
  transition: opacity var(--dauer) var(--easing);
}

/* Vorderseite: das Symbol */
.flip__flaeche--symbol {
  transform: translateZ(calc(var(--hoehe) / 2));
}

/* Unterseite: die Beschriftung. Kippt beim Drehen von unten nach vorn.
   Die seitlich negativen Insets lassen lange Namen ("Apple Music") über die
   Kachelbreite hinausragen, ohne das Layout zu verändern – die Würfeltiefe
   kommt aus der HÖHE, die Breite darf also frei sein. */
.flip__flaeche--text {
  inset: 0 -.6rem;
  transform: rotateX(-90deg) translateZ(calc(var(--hoehe) / 2));
  color: var(--akzent);
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .085em;
  text-transform: uppercase;
  white-space: nowrap;
}

.flip__flaeche svg { width: var(--symbol); height: auto; display: block; }

/* --- Tiefenwirkung ---------------------------------------------------------
   Ohne Kasten kann nicht mit einem dunklen Overlay abgeblendet werden – das
   waere ein sichtbares Rechteck im Nichts. Stattdessen blendet die Fläche
   selbst ab: die wegkippende wird schwächer, die hochkommende kommt auf volle
   Deckkraft. Das liefert denselben Tiefeneindruck, ohne jede Fläche. */
.flip__flaeche--symbol { opacity: 1; }
.flip__flaeche--text   { opacity: var(--dimm); }
.flip:is(:hover, :focus-visible) .flip__flaeche--symbol { opacity: var(--dimm); }
.flip:is(:hover, :focus-visible) .flip__flaeche--text   { opacity: 1; }

/* --- Varianten ------------------------------------------------------------ */

/* Optional: doch mit Kasten. Standard ist rahmenlos. */
.flip--kachel .flip__flaeche {
  background: #1a1029;
  border: 1px solid #2f1f45;
  border-radius: var(--radius);
  overflow: hidden;
}
.flip--kachel:is(:hover, :focus-visible) .flip__flaeche {
  border-color: var(--akzent);
  transition: opacity var(--dauer) var(--easing), border-color var(--dauer) var(--easing);
}

/* Symbol kippt nach unten weg, Schrift kommt von oben */
.flip--abwaerts .flip__flaeche--text {
  transform: rotateX(90deg) translateZ(calc(var(--hoehe) / 2));
}
.flip--abwaerts:is(:hover, :focus-visible) .flip__wuerfel {
  transform: translateZ(calc(var(--hoehe) / -2)) rotateX(-90deg);
}

/* Seitliches Drehen – hier bestimmt die BREITE die Würfeltiefe */
.flip--seitlich .flip__wuerfel {
  transform: translateZ(calc(var(--breite) / -2));
}
.flip--seitlich .flip__flaeche--symbol {
  transform: translateZ(calc(var(--breite) / 2));
}
.flip--seitlich .flip__flaeche--text {
  transform: rotateY(90deg) translateZ(calc(var(--breite) / 2));
}
.flip--seitlich:is(:hover, :focus-visible) .flip__wuerfel {
  transform: translateZ(calc(var(--breite) / -2)) rotateY(-90deg);
}

/* --- Touchgeräte ----------------------------------------------------------
   Auf dem Handy gibt es kein Hover. Ohne diesen Block sieht dort NIEMAND
   jemals die Beschriftung. Deshalb: Würfel bleibt stehen, Text steht darunter. */
@media (hover: none) {
  .flip { height: auto; perspective: none; display: inline-block; }
  .flip__wuerfel { transform: none; height: auto; }
  .flip__flaeche--symbol { position: static; transform: none; height: var(--hoehe); }
  .flip__flaeche--text {
    position: static;
    transform: none;
    opacity: .7;
    height: auto;
    padding-top: .45rem;
    font-size: .62rem;
    color: var(--fg);
  }
  /* Nach dem Antippen gilt das Element auf dem Handy als :hover (bleibt hängen, bis
     woanders getippt wird). Die Hover-Drehung oben würde den stehenden Würfel dann
     wegkippen, Symbol und Schrift verschwänden. Deshalb hier ausdrücklich aufheben. */
  .flip:is(:hover, :focus-visible) .flip__wuerfel { transform: none; }
  .flip:is(:hover, :focus-visible) .flip__flaeche--symbol { opacity: 1; }
  .flip:is(:hover, :focus-visible) .flip__flaeche--text   { opacity: .7; }
}

/* --- Reduzierte Bewegung -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .flip__wuerfel, .flip__flaeche { transition-duration: 1ms; }
}