/*
 * Stilprofil „karten“: wie Angebotskarten aussehen (E-054).
 *
 * Zweck: Eine Site, die Fotos als Abzüge zeigt (Variante `collage` bei den
 * Anlässen), soll denselben Gedanken bei den Angeboten wiederholen können –
 * sonst stehen zwei Bildsprachen untereinander. Die Site wählt in
 * `site.config.json` unter `stil.karten`; der Build schreibt `data-karten`
 * an `<html>`:
 *
 *   schlicht  nichts hiervon greift – Karte mit Rand und Ecke aus dem Theme,
 *             wie vor E-054
 *   abzug     Karte wie ein Fotoabzug: schmaler Rand ums Foto, breiter
 *             darunter, kaum Ecke, weicher Schatten, leicht schräg gelegt
 *
 * Betroffen sind nur `.card` (Angebote). Die Abzüge der Collage haben ihre
 * eigene Gestalt in `base.css` (`.abzug`); beide teilen sich Schatten und
 * Kartenfarbe, damit sie zusammen wie ein Stapel aussehen.
 *
 * Zusammenspiel: wird nach `base.css` und den übrigen Stilprofilen geladen
 * und gewinnt deshalb bei gleicher Spezifität – auch gegen `form` und
 * `flaeche`, die ebenfalls Ecken und Flächen von Karten setzen. Ein Abzug
 * hat keine wandernde große Ecke; das wäre kein Abzug mehr.
 */

[data-karten='abzug'] main > .section .card {
  padding: 10px 10px 0;
  border: none;
  border-radius: 3px;
  background: var(--card-bg);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 12%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Auf der zweiten Fläche dieselbe Regel wie in base.css: eine eigene Farbe,
   damit der Abzug nicht in der Fläche verschwindet. */
[data-karten='abzug'] main > .section:nth-of-type(3n + 2) .card {
  background: var(--card-bg-alt);
}

[data-karten='abzug'] main > .section .card .media {
  border-radius: 0;
}

/* Der breite Rand unter dem Foto ist der Abzug – deshalb sitzt der Text
   dort und nicht in einem eigenen Kasten. */
[data-karten='abzug'] main > .section .card-body {
  padding: 16px 8px 20px;
}

/* Statisch gedreht wie die Abzüge der Collage. Nichts bewegt sich, also
   gilt das auch bei „weniger Bewegung“. */
[data-karten='abzug'] main > .section .card:nth-child(odd) {
  transform: rotate(-1.2deg);
}

[data-karten='abzug'] main > .section .card:nth-child(even) {
  transform: rotate(1deg);
}

[data-karten='abzug'] main > .section .card:hover {
  transform: rotate(0deg) translateY(-4px);
}

/* Die Spur schneidet sonst die schräg gelegten Ecken und den Schatten ab:
   Wer waagerecht scrollt, kappt auch senkrecht. */
[data-karten='abzug'] .karussell-spur {
  padding: 10px 8px 26px;
}

@media (prefers-reduced-motion: reduce) {
  [data-karten='abzug'] main > .section .card:hover {
    transform: none;
  }
}