@charset "utf-8";

/* ============================================================
   slotcar-treff.de - Sammelkarten und Sammelalbum
   Gehoert zu sammelkarten.js. Alle Klassen beginnen mit "sk-",
   damit nichts im Seitenlayout (slotcar-treff.css) beeinflusst wird.
   Schriften: nur Systemschriften, es wird nichts nachgeladen.
   ============================================================ */

:root {
  --sk-disp: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --sk-body: Arial, "Liberation Sans", Helvetica, sans-serif;
  --sk-paper: #f4f5f2;
  --sk-ink: #16191c;
  --sk-soft: #4a5158;
}

/* ---------- Schaltflaechen (ueberschreiben das globale button-Design) ---------- */
.sk-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  width: 100%;
  height: auto;
  min-height: 2.9rem;
  margin: 0;
  padding: .65em 1em;
  font: 700 .95rem/1.15 var(--sk-disp);
  font-stretch: condensed;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  color: #fff;
  background: var(--coral, #c8362d);
  border: 0;
  border-radius: var(--radius, .375em);
  box-shadow: none;
  cursor: pointer;
}
.sk-btn:hover { background: #a82b24; color: #fff; }
.sk-btn:active { background: #8f231d; }
.sk-btn.sk-ghost {
  color: var(--coral, #c8362d);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--coral, #c8362d);
}
.sk-btn.sk-ghost:hover { background: var(--coral-weich, rgba(200,54,45,.05)); color: var(--coral, #c8362d); }
.sk-btn.sk-ghost.sk-on { background: var(--coral, #c8362d); color: #fff; }
.sk-btn.sk-auto { width: auto; }
.sk-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.sk-btn:focus-visible,
.sk-chip:focus-visible,
.sk-miss button:focus-visible { outline: 3px solid #1f63b5; outline-offset: 2px; }
.sk-btn svg { width: 1.2em; height: 1.2em; flex: none; }

/* ---------- Sammelkarte 5:7 (63 x 88 mm) ---------- */
.sk-cw { container-type: inline-size; width: 100%; }
.sk-card {
  --acc: #c42a1f; --cink: #fff;
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--sk-paper);
  color: var(--sk-ink);
  border-radius: 4.6cqw;
  box-shadow: 0 .5rem 1.2rem rgba(20, 24, 28, .2);
  outline: .5cqw solid rgba(0, 0, 0, .14); outline-offset: -.5cqw;
  font: 400 4cqw/1.25 var(--sk-body);
  text-align: left;
}
.sk-card .sk-bar {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 3.4cqw 5.5cqw 2.2cqw;
  background: var(--acc); color: var(--cink);
}
.sk-card .sk-nrl { display: block; margin-bottom: .8cqw; font: 700 2.9cqw/1 var(--sk-body); letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.sk-card .sk-nr  { font: 800 11.5cqw/.9 var(--sk-disp); font-stretch: condensed; letter-spacing: .01em; }
.sk-card .sk-ser { font: 700 3cqw/1.1 var(--sk-body); letter-spacing: .12em; text-transform: uppercase; text-align: right; opacity: .92; }
.sk-card .sk-chk { height: 2.6cqw; background: repeating-conic-gradient(#16191c 0 25%, #f4f5f2 0 50%) 0 0 / 5.2cqw 5.2cqw; }
.sk-card .sk-ph {
  position: relative; flex: none;
  margin: 4cqw 4.5cqw 0;
  aspect-ratio: 3 / 2;
  border-radius: 2cqw; overflow: hidden; background: #222;
}
.sk-card .sk-ph .sk-bg { position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(2.2cqw) saturate(1.1) brightness(.78); }
.sk-card .sk-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; border: 0; }
.sk-card .sk-ph::after { content: ""; position: absolute; inset: 0; border-radius: 2cqw; box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .35); }
.sk-card .sk-tt { padding: 3cqw 5.5cqw 0; }
.sk-card .sk-tt .sk-name { margin: 0; font: 800 7cqw/1 var(--sk-disp); font-stretch: condensed; text-transform: uppercase; letter-spacing: .01em; color: var(--sk-ink); text-wrap: balance; }
.sk-card .sk-tt p { margin: 1.1cqw 0 0; font: 400 3.6cqw/1.2 var(--sk-body); color: var(--sk-soft); }
.sk-card dl { display: grid; grid-template-columns: auto 1fr; align-content: start; flex: 1; margin: 2.4cqw 5.5cqw 0; }
.sk-card dt, .sk-card dd { margin: 0; padding: 1.1cqw 0; border-top: .35cqw dotted #9aa1a8; font-size: 3.5cqw; line-height: 1.2; }
.sk-card dt { align-self: center; font-size: 2.8cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sk-soft); }
.sk-card dd { padding-left: 3cqw; font-weight: 700; text-align: right; color: var(--sk-ink); }
.sk-card .sk-ft { display: flex; justify-content: space-between; padding: 1.8cqw 5.5cqw 3cqw; font: 700 2.8cqw/1 var(--sk-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sk-soft); }
.sk-card .sk-stamp {
  position: absolute; top: 30cqw; right: -2cqw; transform: rotate(8deg);
  padding: 1.2cqw 3cqw; border: .9cqw solid #1f8a4c; border-radius: 1.2cqw;
  background: rgba(244, 245, 242, .92); color: #1f8a4c;
  font: 800 6cqw/1 var(--sk-disp); font-stretch: condensed; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Box auf den Modellseiten ---------- */
.sk-box {
  margin: 2.5em 0;
  padding: 1.4em 1.4em 1.2em;
  background: var(--leiste, #f5f6f7);
  border: 1px solid var(--linie, #d2d7d9);
  border-radius: var(--radius, .375em);
}
.sk-box > h3 { margin-top: 0; }
.sk-box > p { max-width: 62ch; }
.sk-status { margin: 1em 0 0; font-size: .9em; color: var(--leise, #6b7378); }

/* ---------- Karten-Raster, Gruppen, Filter ---------- */
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 14.5rem)); gap: 1.5rem; margin-top: 1.2em; }
.sk-item { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.sk-btns { display: grid; gap: .5rem; }
.sk-group { margin-bottom: 2.4em; }
.sk-group > h3 { display: flex; flex-wrap: wrap; gap: .2em .8em; align-items: baseline; margin-bottom: .2em; padding-bottom: .3em; border-bottom: 1px solid var(--linie, #d2d7d9); }
.sk-group > h3 small { font-size: .7em; font-weight: 400; color: var(--leise, #6b7378); text-transform: none; letter-spacing: 0; }
.sk-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2em 0 1.6em; }
.sk-chip {
  appearance: none; height: auto; margin: 0;
  padding: .45em .95em;
  font: 700 .9rem/1.2 var(--sk-disp); font-stretch: condensed; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--ueberschrift, #3d4449); background: transparent;
  border: 2px solid var(--linie, #d2d7d9); border-radius: 99px; box-shadow: none; cursor: pointer;
}
.sk-chip:hover { background: var(--coral-weich, rgba(200,54,45,.05)); color: var(--ueberschrift, #3d4449); }
.sk-chip[aria-pressed="true"] { color: #fff; background: var(--ueberschrift, #3d4449); border-color: var(--ueberschrift, #3d4449); }

/* ---------- Album: Kopfzeile mit Zaehler ---------- */
.sk-stats {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  margin: 1.4em 0; padding: 1em 1.2em;
  background: var(--leiste, #f5f6f7); border: 1px solid var(--linie, #d2d7d9); border-radius: var(--radius, .375em);
}
.sk-meter { flex: 1 1 16rem; min-width: 0; }
.sk-meter b { margin-right: .3em; font: 800 2.2rem/1 var(--sk-disp); font-stretch: condensed; color: var(--ueberschrift, #3d4449); }
.sk-meter .sk-barline { height: .7rem; margin-top: .5em; overflow: hidden; background: var(--linie, #d2d7d9); border-radius: 99px; }
.sk-meter .sk-barline i { display: block; width: 0; height: 100%; background: var(--coral, #c8362d); }
.sk-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Album: Albumblaetter (6 Karten je A4) ---------- */
.sk-sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.6rem; margin-top: 1.2em; }
.sk-sheet-cap { margin: 0 0 .5em; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leise, #6b7378); }
.sk-sheet {
  position: relative; container-type: inline-size;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, min-content); gap: 2.4%; align-content: start;
  aspect-ratio: 210 / 297; padding: 6.2% 5.4%;
  background: #fff; color: var(--sk-ink);
  border: 1px solid var(--linie, #d2d7d9); box-shadow: 0 .5rem 1.2rem rgba(20, 24, 28, .12);
}
.sk-sheet .sk-tick { position: absolute; left: 5.4%; right: 5.4%; bottom: 2.4%; display: flex; justify-content: space-between; font: 400 2.2cqw var(--sk-body); color: #6b7378; }
.sk-slot { min-width: 0; }
.sk-slot .sk-card { box-shadow: none; }
.sk-miss {
  display: grid; align-content: center; justify-items: center; gap: .5em;
  aspect-ratio: 5 / 7; padding: 6%;
  border: .5cqw dashed #9aa1a8; border-radius: 4.6% / 3.3%;
  background: repeating-linear-gradient(135deg, #fff 0 1.6cqw, #f0f1ee 1.6cqw 3.2cqw);
  color: var(--sk-soft); text-align: center; font-size: 2.2cqw;
}
.sk-miss b { font: 800 5cqw/1 var(--sk-disp); font-stretch: condensed; color: var(--sk-ink); }
.sk-miss span { font: 700 2.4cqw/1.2 var(--sk-body); letter-spacing: .1em; text-transform: uppercase; }
.sk-miss button {
  appearance: none; height: auto; margin: .6em 0 0; padding: 1.2cqw 2.4cqw;
  font: 700 2.6cqw/1.2 var(--sk-disp); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: var(--sk-ink); border: 0; border-radius: .8cqw; box-shadow: none; cursor: pointer;
}
.sk-miss button:hover { background: #000; color: #fff; }

/* ---------- Hinweis ohne JavaScript, Hinweiszeile ---------- */
.sk-nojs { margin: 1em 0; }
.sk-note { max-width: 70ch; margin-top: 1.6em; font-size: .9em; color: var(--leise, #6b7378); }

/* ---------- Hinweismeldung ---------- */
.sk-toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1000;
  max-width: min(92vw, 32rem); padding: .8em 1.1em;
  background: var(--ueberschrift, #3d4449); color: #fff; border-radius: var(--radius, .375em);
  font-size: .95rem; line-height: 1.35;
  opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .25s, transform .25s;
}
.sk-toast.sk-show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .sk-toast { transition: none; } }

/* ---------- Druck: eine Karte (63 x 88 mm) oder Albumblaetter (6 je A4) ---------- */
#sk-printzone { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body.sk-printing { margin: 0; padding: 0; background: #fff; }
  body.sk-printing > *:not(#sk-printzone) { display: none !important; }
  body.sk-printing #sk-printzone { display: block; }
  #sk-printzone .sk-one { width: 63mm; margin: 20mm auto 0; }
  #sk-printzone .sk-one .sk-cw { width: 63mm; }
  #sk-printzone .sk-pg {
    width: 210mm; height: 297mm; padding: 22mm 10.5mm 0;
    display: grid; grid-template-columns: repeat(3, 63mm); grid-auto-rows: 88mm; gap: 10mm 4.5mm;
    justify-content: center; align-content: start;
    break-after: page; page-break-after: always;
  }
  #sk-printzone .sk-pg:last-child { break-after: auto; page-break-after: auto; }
  #sk-printzone .sk-pg .sk-cw { width: 63mm; }
  #sk-printzone .sk-card { box-shadow: none; }
  #sk-printzone .sk-card, #sk-printzone .sk-card * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}