/* ===========================================================================
   Amorazza - Kachel-Popups auf der Startseite (V639)
   ---------------------------------------------------------------------------
   Zwei Aufgaben:
     1. die Kachel ist jetzt ein <button> - sie muss aussehen wie vorher
     2. das Popup: mittig, halbdurchsichtig, trotzdem gut lesbar

   ALLE Farben mit RUECKFALLWERT: var(--ink-900, #2c2c2a). Fehlt die
   Variable, ist sonst die GANZE Regel ungueltig - im Projekt dreimal
   passiert.

   Eingebunden ueber $extra_css in index2.php, VOR pages/launch-desktop.
   Es ueberstimmt nichts aus launch-desktop und will das auch nicht.
   =========================================================================== */

/* --- 1  Die Kachel als Knopf --------------------------------------------- */
/* Ein <button> bringt eigene Voreinstellungen mit: Systemschrift,
   zentrierten Text, Rahmen, grauen Grund. Ohne diese Zeilen saehe die
   Kachel nach dem Umbau anders aus als vorher - dieselbe Klasse
   .feature liefert nur Grund, Rahmen und Radius, nicht die
   Knopf-Voreinstellungen. */
.feature-klickbar {
  font: inherit;
  color: inherit;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* .feature setzt bereits background, border, radius und padding.
     Hier nur das, was der Knopf zusaetzlich mitbringt. */
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.feature-klickbar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(40, 20, 30, 0.06));
}

/* Sichtbarer Fokus. Ein Knopf ohne Fokusring ist mit der Tastatur
   nicht bedienbar - :focus-visible zeigt ihn nur dort, wo er
   gebraucht wird, und nicht nach einem Mausklick. */
.feature-klickbar:focus-visible {
  outline: 2px solid var(--rose-400, #d4537e);
  outline-offset: 3px;
}

/* "Mehr erfahren" - der Hinweis, dass hinter der Kachel etwas steckt.
   Ohne ihn sieht eine Kachel aus wie ein Schild, nicht wie eine Tuer.
   margin-top:auto schiebt ihn nach unten: .feature ist ein
   Flex-Element in Spaltenrichtung, damit stehen die Hinweise aller
   drei Kacheln auf einer Linie, auch wenn die Texte verschieden lang
   sind. */
.feature-mehr {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--fs-meta, 15px);
  font-weight: 500;
  color: var(--rose-400, #d4537e);
}

.feature-mehr::after {
  content: " →";
}

/* Systemeinstellung "Bewegung reduzieren": kein Anheben beim
   Ueberfahren. Im Projekt mehrfach so geloest (data-export.css,
   spiegel.css). */
@media (prefers-reduced-motion: reduce) {
  .feature-klickbar,
  .feature-klickbar:hover {
    transition: none;
    transform: none;
  }
}