/* bauteile/kachel.css — Kachel, Zeile, Vorschaubild, Name/Untertitel einer Kachel.
   Nr. 982 Stufe 1: aus material.css hierher VERSCHOBEN (eine Quelle), Regeln unveraendert. Materialien/Tokens: material.css, tokens.css.
   Galerie aller Zustaende: /admin/bauteile. Neue Ansicht = nur diese Bauteile + Layout-CSS. */

/* Zeile */
.el-zeile { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--tap); padding: 0 var(--sp-2); border: 0; border-bottom: 1px solid var(--mat-rand); background: none; color: var(--mat-text); text-align: left; font-size: var(--fs-lg); text-decoration: none; }
.el-zeile[aria-current="true"], .el-zeile.active { background: var(--mat-hover); box-shadow: var(--mat-sh-kante-links); font-weight: 700; }

/* Kachel (Bild-Variante, z. B. Karte) */
.el-kachel { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--sp-1); min-height: var(--tap); padding: var(--sp-2) var(--sp-2) var(--sp-2); border: 0; background: none; color: var(--mat-text); text-align: left; font: inherit;
    transition: transform .15s; }
.el-kachel::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--mat-rand); border-radius: var(--mat-radius-klein); background: var(--mat-schicht), var(--mat-kachel); box-shadow: var(--mat-schatten-klein); }
.el-kachel[aria-pressed="true"] { transform: translateY(-3px); }
.el-kachel[aria-pressed="true"]::before { border: 2px solid var(--mat-akzent); box-shadow: var(--mat-sh-kachel-an); }
.el-vorschau { position: relative; display: grid; place-items: center; aspect-ratio: 16/10; border: 1px solid var(--mat-rand); background: var(--mat-vorschau); color: var(--mat-leise); overflow: hidden; box-shadow: var(--sh-vorschau-innen); }
.el-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-vorschau--leer { background-image: linear-gradient(var(--mat-gitter) 1px, transparent 1px), linear-gradient(90deg, var(--mat-gitter) 1px, transparent 1px); background-size: 16px 16px; background-color: var(--mat-vorschau); }
.el-vorschau--leer .el-etikett { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-1) var(--sp-2); border-radius: 4px; background: var(--mat-kachel); font: 700 var(--fs-xs) 'Cinzel', serif; color: var(--mat-leise); text-align: center; }
.el-vorschau--leer svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.el-name { font: 700 var(--fs-md)/1.2 'Cinzel', serif; color: var(--mat-akzent); overflow-wrap: break-word; hyphens: auto; }
.el-sub { font-size: var(--fs-md); color: var(--mat-leise); }
/* ============ KACHEL mit gemaltem Kartenblatt (Pergament): perg-kachel.webp, gewaehlt perg-kachel-gewaehlt.webp ============ */
.el-kachel--blatt { padding: 22px 22px 20px; }
.el-kachel--blatt::before { background: none; box-shadow: none; border: 1px solid transparent; border-image: var(--tex-kachel); filter: drop-shadow(4px 6px 5px var(--abdunkeln-mittel)); }
.el-kachel--blatt[aria-pressed="true"]::before { border: 1px solid transparent; border-image: var(--tex-kachel-g); box-shadow: none; }