/* ==========================================================================
   Kacheln blenden beim Scrollen ein — zentral für alle Produkte
   ==========================================================================
   Gehoert zu kachel-einblenden.js. Eine Datei fuer DiKita und DigiFiles,
   damit die Zeiten gar nicht erst auseinanderlaufen koennen: Wer hier etwas
   aendert, aendert es fuer beide Produkte zugleich. Genau das war die
   Vorgabe - gemeinsame Gestaltungssprache, gleiche Zeiten.

   Welche Elemente gemeint sind, steht pro Seite im <body>:
       <body data-kacheln=".card, .why__card">
   Die Auswahl ist produktspezifisch (die Klassen heissen unterschiedlich),
   das Verhalten nicht.

   Der Startzustand haengt an .kachel-an, das erst das Skript setzt. Bleibt
   das Skript aus, sind die Kacheln schlicht da - eine Seite, deren Inhalt
   ohne JavaScript unsichtbar bleibt, waere ein schlechter Tausch fuer einen
   Effekt.
   ========================================================================== */

.kachel-an .einblenden {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kachel-an .einblenden.ist-da {
    opacity: 1;
    transform: none;
}

/* Beim Laden schon sichtbare Kacheln: sofort da, ohne Bewegung. */
.kachel-an .einblenden.ohne-uebergang { transition: none; }