/* ============================================================
   plate_partials — Molecules/Cards/Tile/Default
   Kachel-Karte (Querformat 3:2): Bild, Titel, Kurztext, Kontaktzeile.

   Auswaehlbar ueber einen Karten-Layout-Datensatz (pl_ttcadd_cardlayout)
   und damit ueber `settings.cardLayout` des Elements.

   HARTE REGELN (Workspace-CLAUDE.md, Frame-System):
     - KEIN Sektions-Hintergrund, KEIN Sektions-Padding, KEINE Sektions-Breite
       (kein max-width / margin:auto / Seiten-Padding auf einem Wrapper). Breite
       kommt vom generischen `.frame-container` (frame_layout), Abstaende und
       Hintergrund von den Frame-Feldern des Elements. Auch das Raster gehoert
       NICHT hierher — Spaltenzahl und Spaltenabstand liefert der generische
       Grid-Wrapper aus `settings.columns` / `settings.gap`.
     - Keine Heading-Typografie (font-family/font-size an h*) — die kommt aus
       dem Theme.
     - Farben ausschliesslich ueber Bootstrap-Variablen (--bs-*); Themes
       uebersteuern ueber die --pl-card-tile-* Slots.
   ============================================================ */
.pl-card-tile {
  --pl-card-tile-line: var(--bs-border-color, rgba(0, 0, 0, 0.14));
  --pl-card-tile-muted: var(--bs-secondary-color, var(--bs-body-color, currentColor));

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--pl-card-tile-line);
  background: var(--bs-body-bg, transparent);
  overflow: hidden;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Bildformat und Bildfilter sind Slots — Default = Bestandsverhalten (3:2, kein
   Filter). Themes, die ein flacheres Format oder ein entsaettigtes/aufgehelltes
   Motiv brauchen (Vorlagen-Muster "transparentes Kachelbild"), setzen die
   Variablen; das Partial und der Backend-Crop bleiben unangetastet. */
.pl-card-tile__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--pl-card-tile-media-ratio, 3 / 2);
  background: var(--bs-tertiary-bg, transparent);
}

.pl-card-tile__media img,
.pl-card-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--pl-card-tile-media-filter, none);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.45s ease;
}

.pl-card-tile:hover .pl-card-tile__media img,
.pl-card-tile:hover .pl-card-tile__img,
.pl-card-tile:focus-within .pl-card-tile__media img,
.pl-card-tile:focus-within .pl-card-tile__img {
  filter: var(--pl-card-tile-media-filter-hover, var(--pl-card-tile-media-filter, none));
}

/* Innen-Padding des Kartenkoerpers als Slots — nicht zum Umgestalten gedacht,
   sondern damit die Badge-Geometrie unten (Ueberlappung, linker Versatz) sich
   auf dieselben Werte beziehen kann, statt sie zu verdoppeln. */
.pl-card-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: var(--pl-card-tile-body-pad-block-start, 1rem)
    var(--pl-card-tile-body-pad-inline, 1.1rem) 1.15rem;
}

.pl-card-tile__title {
  margin: 0;
  color: var(--bs-heading-color, inherit);
}

.pl-card-tile__link {
  color: inherit;
  text-decoration: none;
}

/* Klickflaeche ueber die ganze Kachel — ohne verschachteltes <a>. */
.pl-card-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pl-card-tile__text {
  margin: 0;
  color: var(--pl-card-tile-muted);
  font-size: 0.95rem;
  /* Reine Textzeilenlaenge (erlaubt) — KEINE Sektionsbreite. */
  max-width: 46ch;
}

/* Die Kontaktzeile enthaelt einen eigenen Link und muss ueber der
   Stretched-Link-Flaeche liegen. */
.pl-card-tile__contact {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 0.35rem;
}

/* ---------- Hover: leichter Zoom + Schatten ----------
   Rahmenfarbe ueber einen eigenen Slot statt direkt --bs-primary: eine kraeftige
   Akzentfarbe am Kachelrand konkurriert mit dem Inhalt (Bild + Titel). Default ist
   deshalb die vorhandene Trennlinie; Themes koennen --pl-card-tile-line-hover setzen. */
.pl-card-tile:hover,
.pl-card-tile:focus-within {
  border-color: var(--pl-card-tile-line-hover, var(--pl-card-tile-line));
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}
.pl-card-tile:hover .pl-card-tile__img,
.pl-card-tile:focus-within .pl-card-tile__img {
  transform: scale(1.04);
}
.pl-card-tile__link:focus-visible {
  outline: 2px solid var(--bs-primary, currentColor);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pl-card-tile,
  .pl-card-tile__img {
    transition: none;
  }
  .pl-card-tile:hover .pl-card-tile__img,
  .pl-card-tile:focus-within .pl-card-tile__img {
    transform: none;
  }
}

/* Invertierte Frames (`-colorized`, z. B. bg primary): Rahmen und Text erben. */
.frame.-colorized .pl-card-tile {
  --pl-card-tile-line: rgba(255, 255, 255, 0.28);
  --pl-card-tile-muted: currentColor;

  background: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Optionales Piktogramm ueber dem Titel
   --------------------------------------------------------------------------
   Quelle ist ein SVG-Pfad in `data.icon` (typisch `pages.tx_bwicons_icon`).
   `Atoms/Icon` rendert es als CSS-Maske — die Farbe kommt daher aus
   `background-color` und ist ueber `--pl-card-tile-icon-color` themebar, ohne
   die SVG-Datei anzufassen. Default: Textfarbe.

   Der Wrapper `.pl-card-tile__icon` ist ein EIGENES Element und traegt bewusst
   NICHT die Klasse an `Atoms/Icon`: dessen <figure> bringt die
   Bootstrap-Utility `m-0` mit, und die traegt `!important` — jede Marge am
   Piktogramm (auch die frueher hier notierte `margin-block-end: .6rem`) lief
   damit ins Leere. Alle Groessen-/Abstands-Slots sitzen deshalb am Wrapper.
   Defaults sind neutral (kein Kasten, keine Flaeche, kein Versatz) und ergeben
   exakt die bisherige Darstellung.
   ========================================================================== */
.pl-card-tile__icon {
  /* `position: relative` OHNE z-index — nicht zum Verschieben, sondern fuer die
     Malreihenfolge: ein Bild mit `filter`/`opacity` wird wie ein positioniertes
     Element gemalt (CSS 2.1 Schritt 8) und laege sonst UEBER dem Piktogramm,
     sobald `--pl-card-tile-media-filter` gesetzt ist. Mit `z-index: auto` faellt
     das Piktogramm in dieselbe Stufe und gewinnt ueber die Baumreihenfolge —
     bleibt aber unter der Klickflaeche `.pl-card-tile__link::after` (z-index 0,
     spaeter im Baum), die Kachel bleibt also ueber das Piktogramm anklickbar. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: var(--pl-card-tile-icon-justify, flex-start);
  width: var(--pl-card-tile-icon-box, auto);
  aspect-ratio: var(--pl-card-tile-icon-aspect, auto);
  padding: var(--pl-card-tile-icon-pad, 0);
  background: var(--pl-card-tile-icon-bg, transparent);
  margin-block-start: var(--pl-card-tile-icon-lift, 0);
  margin-block-end: var(--pl-card-tile-icon-gap, 0);
  margin-inline-start: var(--pl-card-tile-icon-inset, 0);
}
.pl-card-tile__icon .mask-svg {
  background-color: var(--pl-card-tile-icon-color, currentColor);
}

/* ---------- Modifier: Piktogramm als Vollton-Kachel ueber der Bildkante ------
   Hebt das Piktogramm aus dem Textfluss und laesst es die Unterkante des Bildes
   ueberlappen (Muster vieler Instituts-/Geschaeftsfeld-Seiten). Reines CSS —
   im Markup ist das Piktogramm ohnehin das erste Kind von `__body`, direkt
   unter dem Bild. Die Klasse setzt nur Variablen; jede einzelne bleibt vom
   Theme uebersteuerbar (Kantenlaenge, Padding, Flaeche, Versatz).

   Die GLYPHEN-Kantenlaenge kommt NICHT von hier: `Atoms/Icon` schreibt sie als
   Inline-Style an die Maske. Sie haengt am Setting
   `settings.molCardTileDefault.iconSize` (Default 32) — bei 96px Kachel und
   20px Padding passt 56.
   -------------------------------------------------------------------------- */
.pl-card-tile--icon-badge {
  --pl-card-tile-icon-box: 96px;
  --pl-card-tile-icon-aspect: 1;
  --pl-card-tile-icon-pad: 20px;
  --pl-card-tile-icon-justify: center;
  --pl-card-tile-icon-gap: 0.9rem;
  /* 5/8 der Kachelkante ragen ueber die Bildunterkante; dazu das Innen-Padding
     des Kartenkoerpers, das die Kachel sonst um genau diesen Betrag nach unten
     schoebe. Ergibt bei 96px Kachel exakt 60px Ueberlappung. */
  --pl-card-tile-icon-lift: calc(
    -1 * (var(--pl-card-tile-icon-box, 96px) * 0.625 +
          var(--pl-card-tile-body-pad-block-start, 1rem))
  );
  /* Linker Versatz: Default 0 = buendig mit der Textspalte. In der Vorlage
     steht die Kachel 44px von der Kartenkante — dort ist aber auch der Titel
     44px eingerueckt, die Kachel fluchtet also mit dem Text. Genau das ist die
     Absicht, und genau das leistet 0 bei jedem Innen-Padding. */
  --pl-card-tile-icon-inset: 0;
}
/* Auf invertierten Frames erbt das Piktogramm die Textfarbe der Flaeche. */
.frame.-colorized .pl-card-tile {
  --pl-card-tile-icon-color: currentColor;
}