/* =========================================
   PRINT / PDF EXPORT – SONORO MANUAL
   ========================================= */

@page {
  size: A4;
  margin: 14mm 14mm 16mm 14mm;
}

@media print {

  /* =====================================
     1) UI AUSBLENDEN
     ===================================== */

  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-top,
  .md-search,
  .md-source,
  .md-header__option,
  .sonoro-footer-links,
  .manual-links-box,
  nav,
  button,
  .device-card__button,
  .app-store-links,
  .app-store-button {
    display: none !important;
  }

  /* =====================================
     2) GRUNDLAYOUT
     ===================================== */

  html,
  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt !important;
    line-height: 1.42 !important;
    overflow: visible !important;
  }

  .md-main,
  .md-main__inner,
  .md-content,
  .md-content__inner,
  .md-grid,
  .md-typeset {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* =====================================
     3) STARTSEITE / PORTAL NICHT DRUCKEN
     ===================================== */

  .portal-hero,
  .device-grid,
  .device-card,
  .device-card__image,
  .device-card__content,
  .headline-with-icon {
    display: none !important;
  }

  /* =====================================
     4) TYPOGRAFIE
     ===================================== */

  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4 {
    color: #000 !important;
    font-weight: 700 !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  .md-typeset h1 {
    font-size: 20pt !important;
    line-height: 1.15 !important;
    margin: 0 0 12pt 0 !important;
    padding-top: 0 !important;
    page-break-before: always !important;
    break-before: page !important;
  }

  .md-typeset h1:first-of-type {
    page-break-before: auto !important;
    break-before: auto !important;
  }

  .md-typeset h2 {
    font-size: 14pt !important;
    line-height: 1.25 !important;
    margin: 16pt 0 6pt 0 !important;
  }

  .md-typeset h3 {
    font-size: 11pt !important;
    line-height: 1.3 !important;
    margin: 12pt 0 4pt 0 !important;
  }

  .md-typeset p,
  .md-typeset li,
  .md-typeset td,
  .md-typeset th {
    font-size: 10pt !important;
    line-height: 1.42 !important;
    color: #000 !important;
  }

  .md-typeset p {
    margin: 0 0 7pt 0 !important;
  }

  a,
  a:visited {
    color: #000 !important;
    text-decoration: none !important;
  }

  a::after {
    content: "" !important;
  }

  /* =====================================
     5) GRIDS IN LINEARE PDF-STRUKTUR
     ===================================== */

  .feature-grid,
  .delivery-grid,
  .device-parts-grid,
  .status-led-table,
  .startup-step,
  .startup-status,
  .battery-image-row,
  .tech-specs__row,
  .disposal-packaging__footer,
  .disposal-device__row,
  .marks-item,
  .conformity-header,
  .source-list li,
  .md-typeset .fn-hero,
  .md-typeset .fn-block,
  .md-typeset .fn-status,
  .md-typeset .bt-intro,
  .md-typeset .bt-status,
  .md-typeset .aura-intro,
  .md-typeset .aura-status,
  .md-typeset .app-intro {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  /* =====================================
     6) KARTEN / BOXEN ENTSCHÄRFEN
     ===================================== */

  .feature-item,
  .delivery-item,
  .device-part-card,
  .device-note,
  .delivery-hint,
  .startup-note,
  .startup-status-item,
  .md-typeset .battery-warning,
  .md-typeset .safety-callout,
  .md-typeset .safety-legend-card,
  .md-typeset .aura-tips {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 0 10pt 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Wichtige Warnboxen dürfen sichtbar bleiben, aber simpel */
  .md-typeset .safety-callout--warning {
    border-top: 1pt solid #000 !important;
    border-bottom: 1pt solid #000 !important;
    padding: 8pt 0 !important;
    margin: 10pt 0 12pt 0 !important;
  }

  .md-typeset .safety-callout__header,
  .md-typeset .safety-callout__body {
    padding: 0 !important;
    background: transparent !important;
  }

  .md-typeset .safety-callout__label,
  .md-typeset .safety-callout__title {
    font-weight: 700 !important;
  }

  /* =====================================
     7) BILDER SAUBER BEHANDELN
     ===================================== */

  img,
  svg,
  figure {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 8pt auto !important;
    box-shadow: none !important;
    background: transparent !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .startup-step,
  .battery-image-row,
  .device-hero,
  .hero-image,
  .travelcase-image,
  .theft-image,
  figure {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .hero-image img,
  .device-hero img,
  .startup-step__media img,
  .battery-image img,
  .battery-image--small img,
  .battery-image--wide img,
  .travelcase-image img,
  .theft-image img {
    max-width: 70% !important;
    max-height: 150mm !important;
    object-fit: contain !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .startup-step__media {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 8pt 0 !important;
    border: 0 !important;
    background: transparent !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .delivery-item img {
    max-width: 120px !important;
    max-height: 55mm !important;
  }

  .md-typeset .marks-item__logo img,
  .md-typeset .conformity-mark img,
  .md-typeset .disposal-packaging__icon img,
  .md-typeset .disposal-device__icons img {
    max-width: 110px !important;
    max-height: 35mm !important;
  }

  /* =====================================
     8) TABELLEN / TECHNISCHE DATEN
     ===================================== */

  .tech-specs {
    border-top: 1pt solid #000 !important;
    margin-top: 8pt !important;
  }

  .tech-specs__row {
    display: block !important;
    padding: 6pt 0 !important;
    margin: 0 !important;
    border-bottom: 0.5pt solid #bbb !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .tech-specs__label {
    display: block !important;
    font-weight: 700 !important;
    margin-bottom: 2pt !important;
  }

  .tech-specs__value {
    display: block !important;
  }

  /* =====================================
     9) LISTEN
     ===================================== */

  .md-typeset ul,
  .md-typeset ol {
    margin: 0 0 8pt 0 !important;
    padding-left: 14pt !important;
  }

  .md-typeset li {
    margin: 0 0 3pt 0 !important;
    padding-left: 0 !important;
    list-style: initial !important;
  }

  .md-typeset li::before {
    content: none !important;
  }

  /* =====================================
     10) DEKO-ICONS AUSBLENDEN
     ===================================== */

  .md-typeset .fn-block__icon,
  .md-typeset .fn-block__icon--volume,
  .md-typeset .bt-intro__aside,
  .md-typeset .aura-intro__aside,
  .source-icon-img,
  .device-note-icon,
  .delivery-hint-icon,
  .md-typeset .safety-callout__icon,
  .md-typeset .safety-legend-card__icon,
  .md-typeset .safety-section-label__icon {
    display: none !important;
  }

  /* =====================================
     11) STATUS LED
     ===================================== */

  .status-led-head {
    display: none !important;
  }

  .status-led-row,
  .status-led-state,
  .status-led-definition {
    display: block !important;
    margin: 0 0 6pt 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .status-led-label {
    font-weight: 700 !important;
  }

  /* =====================================
     12) VERHINDERT HÄSSLICHE EINZELZEILEN
     ===================================== */

  p,
  li {
    orphans: 3;
    widows: 3;
  }
}

@media print {
  .pdf-section {
    break-after: page;
    page-break-after: always;
  }

  .pdf-section:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .md-typeset h1 {
    page-break-before: auto !important;
    break-before: auto !important;
    margin-top: 0 !important;
  }

  .md-typeset img {
    max-height: 95mm !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .startup-step__media img,
  .device-hero img,
  .hero-image img {
    max-height: 90mm !important;
    max-width: 80% !important;
  }

  .md-typeset .app-intro__icon img {
    max-width: 55mm !important;
    max-height: 45mm !important;
  }

  .pdf-section:empty {
    display: none !important;
  }
}

@media print {
  /* Status-LED Icons deutlich kleiner */
  .status-led-icon,
  .status-led-state img,
  .status-led-blink-group img,
  .fn-status__icons img,
  .bt-status__icons img,
  .aura-status__icons img,
  .eqboost-status__icons img {
    width: auto !important;
    height: 18mm !important;
    max-height: 18mm !important;
    max-width: 12mm !important;
    display: inline-block !important;
    margin: 0 2mm 2mm 0 !important;
    object-fit: contain !important;
  }

  .status-led-blink-group {
    display: inline-flex !important;
    gap: 1.5mm !important;
    align-items: center !important;
  }

  /* Status-Zeilen kompakter */
  .status-led-state {
    margin: 0 0 2mm 0 !important;
  }

  .status-led-definition {
    margin: 0 0 5mm 0 !important;
  }
}