/* ---------- Drucken: nur „Das kann dein …“ mit den Karten (Knopf „Als PDF drucken“) ----------
   Gedruckt wird immer der Abschnitt unten auf der Wunsch-Seite. app.js hält die Zeichnungen
   beim Drucken an. */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
  html,
  body {
    background: #ffffff !important;
    color: #000000;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .kopf,
  noscript,
  .fussband,
  dialog {
    display: none !important;
  }
  .haupt {
    max-width: none;
    padding: 0;
  }
  .haupt > * {
    display: none !important;
  }
  .haupt > #schirm-wunsch,
  .haupt > #schirm-wunsch[hidden] {
    display: block !important;
  }
  #schirm-wunsch > * {
    display: none !important;
  }
  #schirm-wunsch > #faehigkeiten,
  #schirm-wunsch > #faehigkeiten[hidden] {
    display: flex !important;
    gap: 6mm;
    padding: 0;
  }
  .druck-reihe,
  .druck-hinweis {
    display: none !important;
  }
  .kann-figur {
    display: block;
    width: 18mm;
    height: auto;
  }
  .kann-kopf {
    flex-wrap: nowrap;
  }
  .kann-kopf .zwischentitel {
    color: #000000;
    font-size: 22pt;
  }
  .kann-raster {
    grid-template-columns: repeat(3, 1fr);
    gap: 4mm;
  }
  .kann-karte {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 3mm;
    gap: 1.5mm;
    border: 0.4mm solid #82796e;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .kann-buehne,
  .kann-figur {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .kann-buehne:not(.kann-druckbild) {
    display: none !important;
  }
  .kann-druckbild {
    display: block !important;
  }
  .kann-gruppe-marke {
    color: #404749;
    font-size: 8pt;
  }
  .kann-was {
    color: #000000;
    font-size: 11pt;
  }
  .kann-beispiel {
    color: #0e4a60;
    font-size: 10pt;
  }
  .kann-erklaerung {
    color: #404749;
    font-size: 9pt;
  }
}