/* ========================================================================
 * DTP Kleiner — Druck-Stylesheet (v3, hochspezifisch)
 * Strategie: Spezifität > !important. Dunkle Sektionen explizit überschreiben.
 * ======================================================================== */

@media print {

  /* === 1) GLOBAL RESET — alles auf weiß, keine Schatten === */
  html, body, html body * {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    border-color: #ccc !important;
  }

  /* Bilder & SVG dürfen weiterhin Inhalt zeigen */
  html body img, html body svg, html body picture, html body video {
    background: transparent !important;
    background-color: transparent !important;
  }

  html, body {
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: 10.5pt !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* dekorative pseudo-elements ausblenden */
  html body *::before,
  html body *::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body::before, body::after { display: none !important; content: none !important; }

  /* === 2) UI-CHROME komplett ausblenden === */
  html body .nav, html body #nav,
  html body .drawer, html body .drawer-scrim, html body #drawer, html body #drawerScrim,
  html body .menu, html body .menu-toggle, html body .hamburger, html body .nav-cta,
  html body .tweak-panel, html body .tweaks-panel, html body #tweaks,
  html body [data-tweaks], html body .tweak-chip, html body .tweak-chips, html body .tweak-section,
  html body .lightbox, html body .lb-close, html body .lb-prev, html body .lb-next,
  html body .floating-cta, html body .sticky-cta,
  html body .scroll-indicator,
  html body .legal-cta,
  html body .map, html body .map-overlay,
  html body iframe,
  /* Hero-Slider/Particles dekorativ */
  html body #heroParticles,
  html body .hero-particles,
  html body .hero-slides,
  html body .hero-slide,
  html body .hero-bg,
  html body .hero-img,
  html body .hero-vignette,
  html body .hero-fade,
  html body .hero-footer {
    display: none !important;
  }

  /* === 3) REVEAL-Animation deaktivieren === */
  html body .reveal,
  html body .reveal:not(.in) {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* === 4) FOOTER: mit hoher Spezifität auf weiß zwingen === */
  html body footer.site,
  html body footer.site *,
  html body footer.site .foot-grid,
  html body footer.site .foot-brand,
  html body footer.site .foot-brand b,
  html body footer.site .foot-brand p,
  html body footer.site .foot-col,
  html body footer.site .foot-col b,
  html body footer.site .foot-col a,
  html body footer.site .foot-bottom,
  html body footer.site .foot-bottom div,
  html body footer.site .foot-bottom .eco {
    background: #fff !important;
    background-color: #fff !important;
    color: #1a1a1a !important;
    border-color: #ccc !important;
  }
  html body footer.site {
    border-top: 1px solid #999 !important;
    padding: 16px 16px 10px !important;
    margin-top: 20px !important;
  }
  html body footer.site .foot-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 18px !important;
    max-width: 100% !important;
  }
  html body footer.site .foot-bottom {
    margin-top: 16px !important;
    padding-top: 10px !important;
    border-top: 1px solid #ccc !important;
  }
  html body footer.site .foot-bottom .eco .leaf { display: none !important; }
  html body footer.site a { text-decoration: none !important; }

  /* === 5) DUNKLE SEKTIONEN: split.dark + mosaic-section explizit auf weiß === */
  html body section.split,
  html body section.split.dark,
  html body section.split.dark *,
  html body section.split *,
  html body .split-grid,
  html body .split-body,
  html body .split-img,
  html body .split-body .eyebrow,
  html body .split-body .eyebrow *,
  html body .split-body h3,
  html body .split-body h3 em,
  html body .split-body p,
  html body .split-stats,
  html body .split-stats *,
  html body .split.dark .split-body .eyebrow,
  html body .split.dark .split-body h3,
  html body .split.dark .split-body p {
    background: #fff !important;
    background-color: #fff !important;
    color: #1a1a1a !important;
    border-color: #ccc !important;
  }
  html body .split-stats div b { color: #8B2C3D !important; }
  html body .split-body h3 em { color: #8B2C3D !important; }

  html body section.mosaic-section,
  html body section.mosaic-section *,
  html body .mosaic-head,
  html body .mosaic-head *,
  html body .mosaic-head h2,
  html body .mosaic-head h2 em,
  html body .mosaic-head .section-index,
  html body .mosaic-head .section-label {
    background: #fff !important;
    background-color: #fff !important;
    color: #1a1a1a !important;
  }
  html body .mosaic-head h2 em,
  html body .mosaic-head .section-index { color: #8B2C3D !important; }

  /* === 6) HELLE BEIGE-SEKTIONEN: auch auf reines Weiß === */
  html body section.hero,
  html body section.hero *,
  html body section.about,
  html body section.materials,
  html body section.tools,
  html body section.weg,
  html body section.weg *,
  html body section.why,
  html body section.contact,
  html body section.certs,
  html body .weg-card,
  html body .mat,
  html body .fact,
  html body .contact-card,
  html body .cert-card,
  html body .field input,
  html body .field textarea {
    background: #fff !important;
    background-color: #fff !important;
    color: #1a1a1a !important;
  }

  /* === 6b) WERKZEUG-TILES: Gradient-Overlay weg, Captions schwarz, sehr kompakt === */
  html body .tile,
  html body .grp-grid .tile,
  html body .tools-grid .tile {
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    height: 95px !important;
    max-height: 95px !important;
    min-height: 0 !important;
  }
  html body .grp-grid .tile.feature {
    grid-column: span 2 !important;
    height: 95px !important;
    max-height: 95px !important;
    aspect-ratio: auto !important;
  }
  html body .tile::before,
  html body .tile::after,
  html body .grp-grid .tile::before,
  html body .grp-grid .tile::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
  }
  html body .tile img {
    filter: none !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* tile-cap: aus dem absolute-overlay rauslösen, unter dem Bild als schmaler Streifen */
  html body .tile .tile-cap {
    position: static !important;
    transform: none !important;
    background: #fff !important;
    color: #1a1a1a !important;
    padding: 4px 8px !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    font-size: 8.5pt !important;
  }
  html body .tile .tile-cap b,
  html body .tile .tile-cap span,
  html body .tile .tile-cap div {
    color: #1a1a1a !important;
    background: transparent !important;
  }
  html body .tile .tile-cap b { font-size: 9pt !important; }
  html body .tile .tile-cap span { font-size: 7pt !important; color: #555 !important; }
  html body .tile .tile-cap .zoom { display: none !important; }
  /* grp-section komprimieren: intro + grid kompakter */
  html body .grp-section {
    padding: 8px 16px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin: 0 !important;
  }
  html body .grp-intro {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
  }
  html body .grp-intro > * { max-width: none !important; }
  html body .grp-intro h3, html body .grp-intro h2 {
    font-size: 13pt !important; line-height: 1.1 !important; margin: 0 0 2px !important;
    color: #1a1a1a !important;
  }
  html body .grp-intro p, html body .grp-lead, html body .grp-intro .lead,
  html body .grp-section p {
    font-size: 9pt !important; line-height: 1.35 !important; margin: 0 !important;
    max-width: none !important; color: #333 !important;
  }
  html body .grp-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    margin-top: 4px !important;
  }
  html body .grp-meta, html body .grp-stats {
    font-size: 9pt !important; gap: 10px !important; margin-top: 4px !important;
  }

  /* === 7) HERO: komplett ausblenden (Logo/Slogan ist redundant zur Wir-Sektion) === */
  html body section.hero,
  html body .hero,
  html body section.hero *,
  html body .hero * {
    display: none !important;
  }

  /* === 8) SECTION-PADDINGS: alles deutlich kompakter === */
  html body section,
  html body section.about,
  html body section.materials,
  html body section.tools,
  html body section.weg,
  html body section.why,
  html body section.contact,
  html body section.certs,
  html body section.split,
  html body section.mosaic-section,
  html body main.legal {
    padding: 10px 16px !important;
    min-height: 0 !important;
    page-break-inside: auto !important;
    margin: 0 !important;
  }
  /* Werkzeug-Sektion: Hauptkopf einmalig, danach kompakte grp-sections */
  html body section.tools { padding: 10px 16px 4px !important; }
  html body section.tools > .section-head { margin-bottom: 8px !important; }
  html body section .section,
  html body section > .section {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* === 9) SECTION-HEADER: kompakt === */
  html body .section-head {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  html body .section-head > * { justify-self: start !important; }
  html body .section-head,
  html body .section-head *,
  html body .section-index,
  html body .section-label,
  html body .section-title,
  html body .section-title em,
  html body .section-lead {
    color: #1a1a1a !important;
  }
  html body .section-index { color: #8B2C3D !important; font-size: 10pt !important; }
  html body .section-label { font-size: 8pt !important; margin-top: 4px !important; }
  html body .section-title {
    font-size: 16pt !important; line-height: 1.1 !important;
    max-width: none !important; margin: 0 !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  html body .section-title em { color: #8B2C3D !important; }
  html body .section-lead {
    font-size: 9.5pt !important; line-height: 1.4 !important;
    max-width: none !important; justify-self: start !important; margin: 0 !important;
  }

  /* === 10) MOSAIC-HEAD: kompakt + spezifisch === */
  html body .mosaic-head {
    grid-template-columns: 180px 1fr !important;
    margin-bottom: 12px !important;
    gap: 14px !important;
  }
  html body .mosaic-head h2 {
    font-size: 16pt !important; line-height: 1.1 !important;
    color: #1a1a1a !important; margin: 0 !important;
  }
  html body .mosaic-head h2 em { color: #8B2C3D !important; }

  /* === 11) MOSAIC-WALL: kompakter === */
  html body .mosaic-wall {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
  }
  html body .mosaic-tile {
    aspect-ratio: 1 !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    background: #f0f0f0 !important;
    page-break-inside: avoid;
  }
  html body .mosaic-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html body .mosaic-tile .num { display: none !important; }

  /* === 12) SPLIT: kompakter Layout === */
  html body .split-grid {
    grid-template-columns: 1fr 1fr !important;
    min-height: 0 !important;
    gap: 16px !important;
  }
  html body .split-body {
    padding: 8px 0 !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  html body .split-img {
    min-height: 0 !important;
    height: auto !important;
    max-height: 200px !important;
    position: static !important;
  }
  html body .split-img img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: cover !important;
  }
  html body .split-body h3 { font-size: 18pt !important; line-height: 1.1 !important; margin: 4px 0 !important; }
  html body .split-body p { font-size: 10pt !important; line-height: 1.5 !important; max-width: none !important; margin: 0 !important; }
  html body .split-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }
  html body .split-stats div b { font-size: 14pt !important; }
  html body .split-stats div span { font-size: 7.5pt !important; color: #555 !important; }

  /* === 13) WEG-CARDS, MAT-CARDS, FACT, CERT: kompakter === */
  html body .weg-card, html body .mat, html body .fact,
  html body .contact-card, html body .cert-card,
  html body .cert, html body .certs-grid, html body .certs-head,
  html body .why-item, html body .weg-grid, html body .why-list {
    background: #fff !important;
    border: 1px solid #ddd !important;
    color: #1a1a1a !important;
    padding: 14px !important;
    page-break-inside: avoid;
  }
  html body .why-list, html body .weg-grid, html body .certs-grid {
    border: none !important; padding: 0 !important;
  }
  html body .cert {
    display: block !important;
    border: 1px solid #ddd !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    page-break-inside: avoid !important;
  }
  html body .certs-title {
    font-size: 16pt !important; line-height: 1.1 !important;
    color: #1a1a1a !important; margin: 0 0 8px !important;
  }
  html body .certs-title em { color: #8B2C3D !important; }
  html body .weg-card *, html body .mat *, html body .fact *,
  html body .contact-card *, html body .cert-card * {
    color: #1a1a1a !important;
  }
  html body .weg-card .img { max-height: 140px !important; aspect-ratio: 4/3 !important; }
  html body .weg-card .img img { object-fit: cover !important; }

  /* === 14) BILDER === */
  html body img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    filter: none !important;
    opacity: 1 !important;
  }

  /* === 15) UMBRUCHE === */
  html body h1, html body h2, html body h3 {
    page-break-after: avoid;
    break-after: avoid;
    color: #1a1a1a !important;
  }
  html body h1 { color: #8B2C3D !important; }

  /* === 16) LINKS === */
  html body a { color: #1a1a1a !important; text-decoration: none !important; }
  html body a[href^="#"]::after,
  html body a[href^="javascript"]::after { content: ""; }
  html body main.legal a[href^="http"]::after,
  html body main.legal a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #555 !important;
    word-break: break-all;
  }

  /* === 17) LEGAL-SEITEN === */
  html body .legal-hero {
    padding: 14px 16px !important;
    border-bottom: 1px solid #ccc !important;
    background: #fff !important;
    min-height: 0 !important;
  }
  html body .legal-hero h1 {
    font-size: 24pt !important; color: #8B2C3D !important; margin: 0 !important;
  }
  html body .legal-hero .kicker { color: #8B2C3D !important; font-size: 9pt !important; }
  html body .legal-hero-bg { display: none !important; }

  html body main.legal {
    padding: 14px 16px !important;
    background: #fff !important;
  }
  html body main.legal .legal-container {
    max-width: 100% !important;
    color: #1a1a1a !important;
  }
  html body main.legal h2 {
    color: #8B2C3D !important;
    font-size: 14pt !important;
    margin: 14px 0 6px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #ccc !important;
  }
  html body main.legal h3 {
    color: #1a1a1a !important;
    font-size: 11pt !important;
  }
  html body main.legal address {
    background: #f7f4ee !important;
    border: 1px solid #ddd !important;
    color: #1a1a1a !important;
  }
  html body main.legal address * { color: #1a1a1a !important; }
  html body main.legal .placeholder { display: none !important; }

  /* === 18) SEITEN-LAYOUT === */
  @page {
    size: A4;
    margin: 14mm 12mm 14mm 12mm;
  }
  @page :first { margin-top: 8mm; }

  /* === 19) NUCLEAR-OVERRIDES (am Ende, höchste Spezifität) === */
  html body footer.site,
  html body footer.site *,
  html body footer.site .foot-grid,
  html body footer.site .foot-brand,
  html body footer.site .foot-brand b,
  html body footer.site .foot-brand p,
  html body footer.site .foot-col,
  html body footer.site .foot-col b,
  html body footer.site .foot-col a,
  html body footer.site .foot-bottom,
  html body footer.site .foot-bottom div {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #1a1a1a !important;
  }
  html body section.split.dark,
  html body section.split.dark *,
  html body section.mosaic-section,
  html body section.mosaic-section * {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #1a1a1a !important;
  }
  html body section.split.dark img,
  html body section.mosaic-section img,
  html body footer.site img { background: transparent !important; }

  /* === 20) FINAL CATCH-ALL: jede Section, jeder Container, jeder Card → weiß === */
  html body section,
  html body section *,
  html body footer,
  html body footer *,
  html body main,
  html body main *,
  html body div,
  html body article,
  html body aside {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }
  /* Bilder/SVG dürfen Inhalt zeigen */
  html body img,
  html body svg,
  html body picture,
  html body video,
  html body canvas {
    background: transparent !important;
    background-color: transparent !important;
  }
  /* Border/Trennlinien sichtbar halten */
  html body section,
  html body footer.site {
    border-color: #ccc !important;
  }
}