@layer bausteine {
/* DF2 (gdf/PLAN_DF2.md, Pruefsitzung 12.10.): Zustaende der Bausteine -- Karte, Wahlkachel,
   Feld, Aufklapper -- in einer Ebene ueber alt. Hier steht nur der Zustand (Hover, Fokus,
   offen, gewaehlt, Fehler, gesperrt), nie die Ruhe: die bleibt Vorgabe in alt, die Seiten
   ueberschreiben duerfen. Selektoren in :where() ohne Spezifitaet, Werte ueber Token mit
   Grundwert als Rueckfall; eine Seite, die einen anderen Zustand braucht, setzt das Token
   an der Karte oder einem Vorfahren, nicht die Eigenschaft unter :hover. Ueber dieser Ebene
   liegen nur typografie, form (Designs, nur ueber Token) und knoepfe. */

/* DF2a (D-283, Z-137, Z-138): Karten heben sich beim Darueberfahren -- nur mit echter Maus
   (D4). Vorher stand der Hover in stil.css (.karte:hover, .einstieg-karte:hover) und
   oberflaeche.css (:where(...):hover) und verlor gegen jede spaetere Seitenregel mit eigenem
   Schatten bzw. eigener Flaeche: auf Heute (.heute-seite .karte) und bei den Lerncenter-Wegen
   (.lerncenter-seite .lerncenter-wege > .einstieg-karte). In dieser Ebene gewinnt er gegen
   jede Regel in alt. --dv-tiefe-fokus ist --schatten-angehoben (stil.css), der Wert bleibt.
   Die Hebung laeuft ueber die eigene Eigenschaft translate, damit ein transform der Karte in
   Ruhe erhalten bleibt. */
@media (hover: hover) and (pointer: fine) {
  :where(.karte, .naechster-schritt, .einstieg-karte):hover {
    box-shadow: var(--dv-karte-tiefe-hover, var(--dv-tiefe-fokus, var(--schatten-angehoben)));
    translate: var(--dv-karte-hebung-hover, none);
  }
  :where(.einstieg-karte):hover {
    background: var(--dv-karte-flaeche-hover, var(--bg));
  }
}
}