/* packeroo.com · Einführungs-Kit (/einfuehrung/). Quelle: packeroo/site/quelle/einfuehrung/einfuehrung.css
   Nur auf dieser Seite geladen. Aushänge skalieren mit ihrer Breite (Container-Einheiten), Vorschau und Druck nutzen dasselbe Markup. */
.kit-kopf { padding-bottom: 8px; }
.kit-kopf .einleitung { max-width: 40em; }
.kit-kopf .aktualisiert { display: block; margin-top: 8px; font-size: 15px; color: var(--leise); }
.kit-sprung ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 28px 0 0; padding: 0; }
.kit-sprung a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--rund-gross); background: #fff;
  text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.kit-sprung a:hover { border-color: var(--anthrazit); transform: translateY(-1px); }
.kit-sprung .icon { width: 44px; height: 44px; border-radius: 12px; }
.kit-sprung .icon svg { width: 22px; height: 22px; }
.kit-sprung b { display: block; font: 600 16.5px/1.25 var(--titel); }
.kit-sprung small { display: block; font-size: 14px; color: var(--leise); line-height: 1.35; }

/* Angaben */
.kit-angaben-bereich { padding: 32px 0 8px; }
.kit-angaben { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px 40px; padding: 28px 32px; border-radius: var(--rund-gross);
  background: var(--anthrazit); color: #E6E6DC; }
.kit-angaben h2 { color: #fff; font-size: 26px; margin-bottom: 8px; }
.kit-angaben-text p { margin: 0 0 10px; }
.kit-angaben .kit-leise { color: #B9BAAE; }
.kit-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; }
.kit-feld-gruppe { display: grid; gap: 6px; min-width: 0; }
.kit-feld-gruppe--breit { grid-column: 1 / -1; }
.kit-feld-gruppe label { font: 600 15px var(--titel); color: #fff; }
.kit-feld-gruppe label small { font-weight: 400; color: #B9BAAE; }
.kit-feld-gruppe input { width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid transparent; border-radius: var(--rund); background: #fff; color: var(--text);
  font: 400 16px/1.4 var(--text-schrift); }
.kit-feld-gruppe input:focus-visible { outline: 3px solid var(--lime); outline-offset: 1px; }
.kit-angaben .kit-hinweis { margin: 0; font-size: 14.5px; color: var(--lime); font-weight: 500; }
.kit-angaben .kit-hinweis:empty { display: none; }
.kit-ohne-liga { margin: 12px 0 0; color: var(--leise); }
.kit-leise { font-size: 15px; color: var(--leise); }
.kit-hinweis { margin: 0; font-size: 15px; font-weight: 600; color: var(--lime-dunkel); }

/* Texte */
.kit-abschnitt { padding: 80px 0; }
.kit-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kit-karte { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--linie); border-radius: var(--rund-gross); background: #fff; min-width: 0; }
.kit-karte .icon { margin-bottom: 16px; }
.kit-karte h3 { margin-bottom: 4px; }
.kit-unter { color: var(--leise); margin-bottom: 16px; }
.kit-block + .kit-block { margin-top: 14px; }
.kit-block-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kit-label { font: 600 13px/1 var(--titel); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.kit-kopieren { min-height: 40px; padding: 6px 14px; font-size: 14.5px; }
.kit-kopieren.ist-kopiert { background: var(--anthrazit); color: #fff; }
.kit-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px 18px; border-radius: var(--rund); background: var(--flaeche); font-size: 15.5px; line-height: 1.6; }
.kit-feld { padding: 0 2px; border-radius: 4px; background: var(--lime-hell); font-weight: 600; }
.kit-feld.ist-gefuellt { background: none; padding: 0; font-weight: inherit; }
.kit-unsichtbar { position: fixed; left: -9999px; top: 0; opacity: 0; }
.kit-meldung { margin: 16px 0 0; font-weight: 600; min-height: 1.5em; }

/* Zweispaltig: Steuerung und Vorschau */
.kit-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
.kit-steuerung > p { color: var(--leise); }
.kit-gruppe { margin: 0 0 18px; padding: 0; border: 0; display: grid; gap: 8px; }
.kit-gruppe legend, .kit-regel legend { margin-bottom: 8px; padding: 0; font: 600 15px var(--titel); }
.kit-gruppe--reihe { grid-template-columns: repeat(2, minmax(0, 120px)); }
.kit-wahl { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--linie); border-radius: var(--rund); background: #fff;
  cursor: pointer; line-height: 1.35; }
.kit-wahl input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--anthrazit); }
.kit-wahl:has(input:checked) { border-color: var(--anthrazit); }
.kit-wahl--klein { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.kit-regeln { display: grid; gap: 16px; margin: 20px 0 4px; }
.kit-regel { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kit-regel legend { margin-bottom: 4px; }
.kit-vorschau { position: sticky; top: calc(var(--kopf-h) + 24px); justify-self: center; width: 100%; max-width: 460px; container-type: inline-size; }

/* Aushang (Vorschau und Druck) */
.aushang { width: 100%; aspect-ratio: 210 / 297; display: flex; flex-direction: column; overflow: hidden;
  padding: 6cqw 7cqw 5cqw; background: #fff; color: #1E1F1A; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px rgba(38, 39, 31, .14);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.aushang-kopf { display: flex; align-items: center; justify-content: space-between; gap: 4cqw; padding-bottom: 3cqw; border-bottom: .9cqw solid var(--lime); }
.aushang-kopf img { width: 26cqw; height: auto; }
.aushang-liga { font: 600 3.6cqw/1.2 var(--titel); text-align: right; overflow-wrap: anywhere; }
.aushang-titel { margin: 4cqw 0 3cqw; font: 700 7.4cqw/1.08 var(--titel); letter-spacing: -.02em; text-wrap: balance; }
.aushang-qr-code { align-self: center; margin-top: auto; width: 52cqw; aspect-ratio: 1; display: grid; place-items: center; }
.aushang-qr-code svg, .aushang-qr-klein svg { display: block; width: 100%; height: 100%; }
.aushang-qr-leer { display: grid; place-items: center; width: 100%; height: 100%; padding: 6cqw; border: .6cqw dashed #B9BAAE; border-radius: 2cqw; text-align: center;
  font: 500 3.6cqw/1.3 var(--text-schrift); color: var(--leise); }
.aushang-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; list-style: none; margin: auto 0 0; padding: 3cqw 0 0; counter-reset: s; }
.aushang-schritte li { counter-increment: s; font-size: 2.7cqw; line-height: 1.3; }
.aushang-schritte li::before { content: counter(s); display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; margin-bottom: 1.2cqw; border-radius: 50%; background: var(--lime);
  font: 700 3cqw/1 var(--titel); color: #26271F; }
.aushang-schritte b { display: block; font: 700 3.2cqw/1.2 var(--titel); margin-bottom: .6cqw; }
.aushang-schritte span { color: #4A4B43; }
.aushang-fuss { margin: 3.5cqw 0 0; padding-top: 2cqw; border-top: 1px solid #E4E4D8; font-size: 2.7cqw; color: #4A4B43; }

.aushang--regeln { padding: 5.5cqw 6.5cqw 4.5cqw; }
.aushang--regeln .aushang-titel { margin: 3.4cqw 0 2cqw; font-size: 5.4cqw; }
.aushang--regeln .aushang-liga { font-size: 3cqw; }
.aushang-liste { list-style: none; margin: 0; padding: 0; }
.aushang-liste li { display: grid; grid-template-columns: 28% minmax(0, 1fr); gap: 2.4cqw; padding: .7cqw 0; border-bottom: 1px solid #E4E4D8; font-size: 2.05cqw; line-height: 1.28; }
.aushang-liste b { font: 600 2.15cqw/1.28 var(--titel); }
.aushang-optionen { display: flex; flex-wrap: wrap; gap: .5cqw 3cqw; }
.aushang-option { display: inline-flex; align-items: flex-start; gap: 1.2cqw; }
.kasten { flex: none; position: relative; width: 2.3cqw; height: 2.3cqw; margin-top: 0; border: .3cqw solid #26271F; border-radius: .4cqw; background: #fff; }
.kasten.ist-an { background: #26271F; }
.kasten.ist-an::after { content: ""; position: absolute; left: 28%; top: 6%; width: 32%; height: 60%; border: solid #fff; border-width: 0 .45cqw .45cqw 0; transform: rotate(45deg); }
.aushang-linie { align-self: end; height: 2.8cqw; border-bottom: .25cqw solid #8C8D83; }
.aushang-offiziell { margin-top: 2.4cqw; padding: 2cqw 2.8cqw; border-radius: 1.2cqw; background: #F6F6EF; }
.aushang-h { margin: 0 0 .9cqw; font: 700 2.35cqw/1.2 var(--titel); }
.aushang-offiziell ul { margin: 0; padding-left: 3cqw; }
.aushang-offiziell li { margin: 0 0 .3cqw; font-size: 1.95cqw; line-height: 1.3; }
.aushang-unten { display: flex; align-items: center; gap: 3cqw; margin-top: auto; padding-top: 2cqw; }
.aushang-qr-klein { flex: none; width: 13cqw; aspect-ratio: 1; }
.aushang-unten span { display: block; }
.aushang-unten span[hidden] { display: none; }
.aushang-unten p { margin: 0; font-size: 2.1cqw; line-height: 1.35; color: #4A4B43; }
.aushang-unten b { display: block; font: 700 2.6cqw/1.25 var(--titel); color: #1E1F1A; margin-bottom: .6cqw; }

/* Erste Woche */
.kit-woche { list-style: none; margin: 28px 0 32px; padding: 0; border-left: 3px solid var(--lime); }
.kit-tag { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 0 0 26px 22px; position: relative; }
.kit-tag::before { content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #fff; }
.kit-tag-nr { font: 700 16px/1.6 var(--titel); color: var(--lime-dunkel); }
.kit-tag h3 { font-size: 20px; margin-bottom: 4px; }
.kit-tag p { margin: 0; color: var(--leise); }
#erste-woche h2 { font-size: clamp(28px, 3.4vw, 40px); }
#erste-woche a { color: var(--lime-dunkel); font-weight: 600; text-underline-offset: 3px; }

.kit-text-unten { padding-top: 64px; }
.kit-liga { margin-top: 24px; margin-bottom: 96px; }

@media (max-width: 1020px) {
  .kit-sprung ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-angaben, .kit-zwei { grid-template-columns: 1fr; }
  .kit-vorschau { position: static; }
}
@media (max-width: 720px) {
  .kit-karten { grid-template-columns: 1fr; }
  .kit-abschnitt { padding: 56px 0; }
  .kit-angaben { padding: 22px 18px; }
  .kit-felder { grid-template-columns: 1fr; }
  .kit-karte { padding: 20px 16px; }
  .kit-text { padding: 14px; font-size: 15px; }
  .kit-regel { grid-template-columns: 1fr; }
  .kit-tag { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 600px) {
  .kit-sprung ul { grid-template-columns: 1fr; gap: 8px; }
  .kit-sprung a { padding: 10px 12px; }
}

/* Druck: genau ein Aushang pro Seite. Ohne Auswahl (Strg+P) werden beide gedruckt. */
@page { size: A4; margin: 0; }
@page a5 { size: A5; margin: 0; }
@media print {
  body { background: #fff; }
  body > *:not(main), .skip, .schleier, main > *:not(.kit-abschnitt), .kit-abschnitt:not(#qr-aushang):not(#regel-aushang),
  .kit-steuerung { display: none !important; }
  .kit-abschnitt { padding: 0 !important; background: none !important; }
  .kit-zwei { display: block; max-width: none; padding: 0; }
  .kit-vorschau { position: static; display: block; width: 210mm; max-width: none; }
  .aushang { height: 296.5mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  #qr-aushang { break-after: page; }
  #qr-aushang:has(.aushang--a5) { page: a5; }
  #qr-aushang:has(.aushang--a5) .kit-vorschau { width: 148mm; }
  .aushang--a5 { height: 209.5mm; }
  body.druck-qr #regel-aushang, body.druck-regeln #qr-aushang { display: none !important; }
  body:not(.qr-bereit) #qr-aushang { display: none !important; }
  .aushang-qr-leer { display: none; }
}

/* Hinweis auf den QR-Code in der App (laut strategy/funktionen-live.md) */
.kit-app-hinweis { margin: 0 0 20px; padding: 14px 18px; border-left: 4px solid var(--lime); border-radius: var(--rund); background: #fff; font-size: 15.5px; line-height: 1.5; }