/* ==========================================================================
   Kleine Karten (js/mod-karten.js): Vorschau in echter Größe DIN A5 (148 × 210 mm), verkleinert angezeigt,
   Schrift und Farben wie in den Word-Vorlagen (Palatino, Farbe je Anlass). Sperre mit Countdown, Video-Karte.
   ========================================================================== */
.kk {
  --kk: #1d1d1f; --fs: 1;
  width: 148mm; height: 210mm; flex: none; background: #fff; color: #1d1d1f;
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  font-size: calc(11pt * var(--fs)); line-height: 1.28; text-align: center;
  transform-origin: 0 0; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.kk-in { height: 100%; padding: 13mm 15mm; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.kk-deko { display: block; width: 100%; height: auto; flex: none; }
.kk-deko.oben { margin-bottom: 4mm; }
.kk-deko.unten { margin-top: 5mm; }
.kk-deko.trenner { width: 86%; margin: 3.5mm auto 4.5mm; }
.kk-kopf { display: grid; gap: .25em; }
.kk-h { display: block; font-size: 2.1em; font-weight: 700; font-style: italic; line-height: 1.12; color: var(--kk); }
.kk-u, .kk-dat { display: block; font-style: italic; color: var(--kk); }
.kk-allgemein .kk-h { color: #1d1d1f; }
.kk-trauerfeier .kk-h { font-size: 1.85em; }
.kk-hochzeit .kk-u { font-size: 1.25em; }
.kk-foto { margin: 4mm auto 0; width: 62%; aspect-ratio: 4 / 3; border-radius: 2mm; overflow: hidden; }
.kk-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-foto.leer { display: grid; place-items: center; border: 1px dashed #b9b9b9; color: #8a8a8a; font-size: .8em; font-style: italic; }
.kk-gaenge { display: grid; gap: calc(4.2mm * var(--fs)); }
.kk-g { display: grid; gap: calc(2.6mm * var(--fs)); }
.kk-gt { margin: 0 0 .05em; font-family: inherit; font-size: 1.85em; font-weight: 700; font-style: normal; line-height: 1.1; letter-spacing: 0; color: var(--kk); }
.kk-kopf + .kk-gaenge { margin-top: calc(6mm * var(--fs)); }
.kk-allgemein .kk-gt { color: #1d1d1f; }
.kk-d { display: grid; }
.kk-n { font-weight: 700; }
.kk-a { font-style: italic; }
.kk-salat { margin: .2em 0 0; }
.kk-fuss { margin-top: calc(5mm * var(--fs)); font-style: italic; font-size: .92em; color: var(--kk); }
.kk-weihnachtsfeier .kk-fuss { font-weight: 700; }
.kk-allgemein .kk-fuss, .kk-trauerfeier .kk-fuss { color: #555; }

/* Rahmen für die verkleinerte Vorschau */
.kk-stage { position: relative; width: 100%; overflow: hidden; }
.kk-stage .kk { position: absolute; left: 0; top: 0; box-shadow: 0 6px 22px rgba(0,0,0,.14); }

/* ---------- Übersicht ---------- */
.kk-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.kk-tpl { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.kk-tpl-pv { display: block; padding: 18px 22px 0; overflow: hidden; background: color-mix(in srgb, var(--kk) 9%, var(--fill)); }
.kk-tpl-pv .kk-stage { border-radius: 3px 3px 0 0; }
.kk-tpl-b { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; border-top: 3px solid var(--kk); }
:root[data-theme="dark"] .kk-tpl-b { border-top-color: color-mix(in srgb, var(--kk) 55%, #fff); }
.kk-tpl-b h3 { font: 700 18px/1.25 var(--font); font-style: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kk-tpl-b p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.45; flex: 1; }

/* ---------- Sperre (bis SM.kartenInfo.frei) und Video-Karte ---------- */
.kk-tpl-pv { position: relative; }
.kk-tpl.zu .kk-stage { filter: grayscale(1) blur(5px); opacity: .85; }
.kk-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(150, 22, 30, .55), rgba(110, 12, 20, .78)); }
.kk-lock-i { width: 58px; height: 58px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: #c8202c; color: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.16), 0 10px 26px rgba(80,0,0,.45); }
.kk-lock b { font: italic 900 22px/1.1 var(--head); letter-spacing: .01em; }
.kk-cd { font: 700 21px/1.2 var(--font); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.kk-lock small { font-size: 12.5px; opacity: .85; }
.kk-lock.video { background: linear-gradient(180deg, rgba(20, 24, 22, .35), rgba(12, 14, 13, .72)); }
.kk-lock.video .kk-lock-i { background: #fff; color: #1d1d1f; box-shadow: 0 0 0 6px rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.4); }
.kk-vid .kk-tpl-pv { background: color-mix(in srgb, #1d1d1f 9%, var(--fill)); }
.kk-vframe { aspect-ratio: 148 / 210; border-radius: 3px 3px 0 0; display: grid; place-items: center; color: rgba(255,255,255,.4);
  background: radial-gradient(120% 80% at 50% 30%, #3b4a42, #161a18); box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.kk-vframe .kk-play { filter: blur(1px); }
.kk-vid .kk-lock { inset: 18px 22px 0; border-radius: 3px 3px 0 0; }
.kk-video { position: absolute; inset: 18px 22px 0; width: calc(100% - 44px); height: calc(100% - 18px); object-fit: cover; background: #000; border-radius: 3px 3px 0 0; }
.kk-vid .kk-tpl-b { border-top-color: #1d1d1f; }
:root[data-theme="dark"] .kk-vid .kk-tpl-b { border-top-color: #8a8a8f; }
.kk-ort { display: flex; gap: 7px; align-items: flex-start; margin: 4px 0 0; font-size: 13.5px; color: var(--text); flex: 0 !important; }
.kk-ort svg { flex: none; margin-top: 2px; }

/* Hinweis-Karte auf der Seite „Dokumente“ */
.kk-teaser { display: flex; align-items: center; gap: 22px; margin: 0 0 18px; padding: 18px 22px; text-decoration: none; color: inherit; }
.kk-teaser-pv { flex: none; display: flex; padding-left: 14px; }
.kk-teaser-pv i { width: 62px; height: 88px; margin-left: -14px; padding: 9px 7px; display: grid; align-content: start; gap: 5px; background: #fff; border-radius: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.16); }
.kk-teaser-pv i:nth-child(1) { transform: rotate(-7deg) translateY(4px); }
.kk-teaser-pv i:nth-child(3) { transform: rotate(7deg) translateY(4px); }
.kk-teaser-pv img { width: 100%; height: auto; }
.kk-teaser-pv b { height: 3px; border-radius: 2px; background: var(--kk); opacity: .55; margin: 0 6px; }
.kk-teaser-pv b:nth-of-type(1) { height: 5px; margin: 2px 2px 0; opacity: .9; }
.kk-teaser-pv b:nth-of-type(3) { margin: 0 12px; }
.kk-teaser-b { display: grid; gap: 4px; justify-items: start; }
.kk-teaser-b > b { font: italic 900 20px/1.15 var(--head); }
.kk-teaser-b > span:not(.chip):not(.go) { color: var(--text-2); font-size: 14.5px; }
.kk-teaser .go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 650; font-size: 14px; color: var(--accent); }
.kk-teaser:hover .go { text-decoration: underline; }
@media (max-width: 560px) { .kk-teaser { flex-direction: column; align-items: flex-start; } }