/* Druckansicht. Ausgelagert am 2026-09-23 (Lighthouse: das Haupt-Stylesheet blockiert das
   erste Bild). Diese Datei laedt der Browser mit media="print" und wartet nicht darauf.
   Eingebunden in includes/adler-site.php. */

@media print {

  /* --- 0. Kein Einblenden mehr abzuschalten ------------------------------
     Hier stand die Gegenregel zu .section-reveal. Sie war noetig, weil eine
     nicht eingeblendete Sektion leeres Papier druckte: Leon bekam auf der
     Startseite drei Seiten Inhalt, vier leere Seiten und dann den
     Fussbereich. Die Einblend-Animation ist am 2026-09-04 ganz entfallen,
     damit auch diese Regel.

     Wer wieder eine Animation mit opacity:0 als Ausgangszustand einbaut, muss
     sie hier ausnehmen. Nachweisbar mit
     node tools/design-audit/druck.mjs --all: das Werkzeug setzt bewusst kein
     is-visible und faellt genau darueber. */

  /* --- 1. Farbe: dunkel, wo es sein muss, Marke, wo es geht --------------- */

  /* Alles, was am Bildschirm weiss auf dunklem Grund steht, wuerde ohne
     Hintergrund verschwinden. Deshalb zuerst pauschal dunkel setzen. */
  body, main, footer, main *, footer *, header * {
    color: #1f2528 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
  html, body { background: #fff !important; font-size: 10.5pt; line-height: 1.5; }

  /* Danach die Marke zurueckholen. */
  h1, h2, h3, h4,
  .section-head h2,
  .fact-box-title,
  .info-card-title,
  .termin-summary-head p { color: #0b4f84 !important; }

  main a { color: #1a75ab !important; text-decoration: underline; }

  .quick-cta-eyebrow,
  .section-head .eyebrow,
  .news-article-meta,
  .info-card-eyebrow { color: #1a75ab !important; letter-spacing: .1em; }

  /* Linien und Rahmen tragen die Struktur, wenn Flaechen fehlen. */
  .fact-box,
  .info-card,
  .location-hours-card,
  .termin-summary,
  .callout-band,
  .quick-cta-card {
    border: 1pt solid #9dbdd4 !important;
    border-radius: 3pt !important;
    padding: 8pt 10pt !important;
    break-inside: avoid;
  }
  .callout-band { border-left: 3pt solid #0b4f84 !important; }

  /* --- 2. Kopf: Logo, sonst nichts --------------------------------------- */
  .site-header {
    display: block !important;
    position: static !important;
    min-height: 0 !important;
    padding: 0 0 6pt !important;
    margin: 0 0 14pt !important;
    border: 0 !important;
    border-bottom: 1.5pt solid #0b4f84 !important;
  }
  .site-header > *:not(.brand) { display: none !important; }
  .brand { display: flex !important; align-items: center; gap: 8pt; text-decoration: none; }
  .brand img { display: block !important; height: 13mm; width: auto; }
  .brand strong { font-size: 14pt; color: #0b4f84 !important; }
  .brand small { font-size: 8pt; }

  /* --- 3. Was nicht aufs Papier gehoert ----------------------------------
     Bedienelemente, und alles, was reine Werbeflaeche ist. Das ist der
     groesste Hebel gegen die Seitenzahl. */
  .skip-link,
  .top-contact,
  .main-nav,
  .nav-button,
  .nav-toggle,
  .quick-service,
  #koe-consent-host,
  .contact-fab-wrap,
  .contact-fab,
  .read-aloud-btn,
  [class^="koe-ra-"],
  #koe-readaloud-btn,
  #koe-readaloud-panel,
  .location-slider-control,
  .location-slider-dots,
  .breadcrumbs,

  /* Werbe- und Teaser-Flaechen. Immer die ganze Sektion, nie nur ihr Innenteil:
     sonst steht die Ueberschrift allein auf dem Papier und darunter nichts. */
  .brand-marquee,
  .instagram-section,
  .social-band,
  .newsletter-form,
  .footer-newsletter-form,
  .footer-garantie,
  .news-section--akustik,
  .testimonials-section,
  .testimonial-strip,
  .story-strip,
  .quick-cta-section,
  .mini-service-section,
  .hover-grid,
  .hover-grid-section { display: none !important; }

  /* Der Beitrags-Anreisser traegt auf jeder Seite die Kennung #news. Auf
     /aktuelles/ steht dieselbe Klasse ohne Kennung an der Liste, die dort der
     eigentliche Inhalt ist: die pauschale Regel hat aus der Uebersicht ein
     Blatt mit nichts als dem Fussbereich gemacht. */
  .news-section#news { display: none !important; }

  /* Schaltflaechen wirken auf Papier nicht. Ausnahme: Telefonnummern, die
     auf einer Standortseite nur im Knopf stehen. */
  .hero-actions .button:not([href^="tel:"]),
  .section-cta,
  .body-cta,
  .callout-action,
  .body-links,
  .store-actions .button:not([href^="tel:"]),
  .location-parking-actions,
  .location-switch { display: none !important; }
  .hours-termin-link { display: none !important; }

  /* Was von den Schaltflaechen uebrig bleibt, wird zum Textlink. Ein Kasten
     mit Rahmen suggeriert auf Papier eine Bedienung, die es dort nicht gibt;
     die Adresse dahinter ist dagegen brauchbar. */
  .button,
  .button-primary,
  .button-secondary,
  .button-outline {
    display: inline !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: none !important;
    font-weight: 600;
    color: #1a75ab !important;
    text-decoration: underline;
  }
  .button svg, .button-primary svg, .button-secondary svg { display: none !important; }

  .button[href^="tel:"] {
    font-weight: 700;
    color: #0b4f84 !important;
    text-decoration: none;
  }

  /* --- 4. Bilder: Inhalt ja, Dekoration nein ------------------------------ */
  .news-card-image,
  .chip-card-img,
  .brand-marquee img,
  .team-photo { display: none !important; }

  /* Bildhuellen behalten sonst ihre Hoehe, obwohl das Bild fehlt: aspect-ratio
     und feste Hoehen wirken weiter und lassen leere Kaesten stehen. (Das war
     mein erster Verdacht fuer Leons vier leere Seiten. Es stimmte als Effekt,
     war aber nicht die Ursache; die steht oben unter Punkt 0.) */
  .instagram-image,
  .instagram-post,
  .news-card-image,
  .chip-card-img,
  .location-slider,
  .hover-grid-media {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Inhaltsbilder bleiben, aber gedeckelt. Der Deckel gilt bewusst pauschal
     fuer jedes Bild im Inhalt statt fuer eine Liste von Klassen: am Bildschirm
     ist ein Bild 100mm hoch voellig richtig, auf A4 sind fuenf solche Bilder
     zwei Seiten Papier. 55mm zeigt das Motiv und kostet ein Fuenftel Seite. */
  main figure,
  main picture,
  .image-frame,
  .hero-media,
  .location-hero-media {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 55mm !important;
    overflow: hidden;
    break-inside: avoid;
  }
  main img {
    max-height: 55mm !important;
    height: auto !important;
    object-fit: cover;
  }
  .image-frame img,
  .hero-media img,
  .location-hero-media img {
    display: block !important;
    width: 100% !important;
  }

  /* --- 5. Layout auf A4 entzerren ----------------------------------------- */
  .section,
  .hero, .subhero, .location-hero, .service-hero, .about-hero {
    padding: 10pt 0 !important;
    min-height: 0 !important;
  }
  .hero, .split, .intro, .location-hero,
  .cards-grid, .info-card-grid, .fact-box-row, .footer-grid { display: block !important; }

  .hero h1, .subhero h1, .location-hero h1 { font-size: 20pt !important; }
  h2 { font-size: 14pt !important; }
  h3 { font-size: 11.5pt !important; }

  /* Fliesstext braucht ein lesbares Mass, auch auf 180mm Satzspiegel. */
  .page-prose p, .body-section p, .location-seo-body p, .intro p { max-width: 140mm; }

  /* --- 6. Adressen und Zeiten -------------------------------------------- */
  .location-hero-address { border-left: 3pt solid #0b4f84 !important; padding-left: 8pt !important; }
  .hours-table { width: 100%; border-collapse: collapse; }
  .hours-table th, .hours-table td {
    padding: 3pt 6pt !important;
    border-bottom: .5pt solid #c8d8e4 !important;
  }

  /* --- 7. Links ausschreiben --------------------------------------------- */
  /* Ein Link nach aussen ist auf Papier wertlos ohne sein Ziel, deshalb steht
     die Adresse immer dabei. Bei internen Links dagegen nur im Fliesstext:
     in Karten und Schaltflaechen stand hinter jedem zweiten Wort eine
     eingeklammerte Adresse, das hat die Kachelreihe auf /brillen/ um eine
     halbe Seite wachsen lassen und war dabei kaum zu gebrauchen. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #5e686d !important; word-break: break-all; }
  .page-prose a[href^="/"]::after,
  .body-section a[href^="/"]::after,
  .location-seo-body a[href^="/"]::after,
  .news-article-body a[href^="/"]::after { content: " (adleroptik.ch" attr(href) ")"; font-size: 8pt; color: #5e686d !important; }
  main a[href^="tel:"]::after,
  main a[href^="mailto:"]::after,
  main a[href^="#"]::after { content: ""; }

  /* Ein Link, der nur ein Bild umschliesst, hat keine Zeile, in die die
     Adresse passt: der Text lief quer ueber das Foto. */
  main a:has(img)::after,
  main a:has(svg):not(:has(span, strong))::after { content: none !important; }

  /* --- 8. Umbrueche ------------------------------------------------------- */
  h1, h2, h3 { break-after: avoid; }
  .faq-list details, .hours-table tr, figure { break-inside: avoid; }

  /* Aufgeklappte Antworten gehoeren aufs Papier, aber nur die, die auch Text
     enthalten: FAQ und die Abschnitte in Impressum und Datenschutz. Ein
     pauschales details-Aufklappen hat auf /brillen/ die Markenkacheln
     mitgeoeffnet, das waren allein 2,3 Seiten Logos und Werbetext. */
  .faq-list details > *:not(summary),
  details.legal-section > *:not(summary) { display: block !important; }

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

  /* Die Markenkacheln bleiben zu: auf Papier zaehlt, welche Marken es gibt,
     nicht der Beschreibungstext zu jeder einzelnen. */
  .brands-grid { display: block !important; columns: 3; column-gap: 8mm; }
  .brand-spotlight-card { break-inside: avoid; margin-bottom: 4pt; }
  .brand-spotlight-card > *:not(summary) { display: none !important; }
  /* Am Bildschirm sorgt min-height:120px fuer eine ruhige Kachelreihe. Auf
     Papier sind das bei 20 Marken allein 1,7 Seiten Leerraum. */
  .brand-spotlight-card summary {
    list-style: none;
    min-height: 0 !important;
    padding: 3pt !important;
    display: block !important;
    text-align: center;
  }
  .brand-spotlight-card summary::after { content: none !important; }
  .brand-spotlight-card summary img {
    max-height: 10mm !important;
    width: auto !important;
    filter: none !important;
    opacity: 1 !important;
    margin: 0 auto;
  }


  /* --- 9. Fussbereich -----------------------------------------------------
     Firma, E-Mail, Mitgliedschaften, Oeffnungszeiten und die Rechtszeile sind
     auf Papier brauchbar. Untereinander gestellt fuellten sie aber eine ganze
     Seite mit Navigationslisten. Zwei Spalten bringen das auf ein Drittel. */
  footer { border-top: 1.5pt solid #0b4f84 !important; padding-top: 8pt !important; }
  .footer-grid { columns: 2; column-gap: 10mm; }
  .footer-grid > section { break-inside: avoid; margin-bottom: 6pt; }
  .footer-grid h2 { font-size: 10pt !important; margin: 0 0 3pt !important; }
  .footer-grid ul { margin: 0; padding: 0; list-style: none; }
  .footer-grid li { padding: 0 !important; }
  .footer-grid a { text-decoration: none; }
  .footer-grid p { margin: 0 0 2pt !important; }

  /* Das Logo steht schon im Kopf, und die Newsletter-Sektion besteht ohne ihr
     Formular nur noch aus einer Ueberschrift. */
  .footer-logo { display: none !important; }
  .footer-grid > section:has(.newsletter-form) { display: none !important; }

  .footer-bottom { font-size: 8pt; margin-top: 6pt; }

  /* --- 10. Terminzettel ---------------------------------------------------
     Die Strecke gehoert nicht aufs Papier, ihre Zusammenfassung schon:
     Anliegen, Standort, Adresse, Telefon, Wunschtag und Wunschzeit ergeben
     einen brauchbaren Zettel. Die Zusammenfassung liegt tief im Formular
     (.appointment-form > .form-stage > .form-substep[data-substep="4"]), die
     ganze Kette muss sichtbar bleiben. */
  .appointment-form > *:not(.form-stage):not(.appointment-form-status),
  .form-progress,
  .termin-mini-summary { display: none !important; }

  .appointment-form, .form-stage, .appointment-form-status { display: block !important; }
  .form-substep { display: none !important; }
  .form-substep[data-substep="4"] { display: block !important; }
  /* Die Karte liegt seit 2026-09-22 im Raster .termin-daten-raster, das Raster muss sichtbar bleiben. */
  .form-substep[data-substep="4"] > *:not(.termin-summary):not(.termin-daten-raster),
  .termin-daten-raster > *:not(.termin-summary) { display: none !important; }
  .termin-daten-raster { display: block !important; }
  .termin-summary { display: block !important; max-width: 120mm; }
  /* Standortseite: ohne ausgefuellte Zusammenfassung bleibt das Formular
     ganz weg, sonst stuende ein leerer Terminwunsch-Kasten im Ausdruck. */
  .termin-vor-ort-section .appointment-form:not(.has-summary) { display: none !important; }

  .appointment-form, .form-stage, .form-substep[data-substep="4"] {
    border: 0 !important; padding: 0 !important; margin: 0 !important;
    min-height: 0 !important; max-width: none !important;
  }
  .termin-summary-list { list-style: none; margin: 0; padding: 0; }
  .termin-summary-list li {
    display: flex; gap: 8pt; padding: 3pt 0;
    border-bottom: .5pt solid #c8d8e4 !important;
  }
  .termin-summary-key { min-width: 28mm; font-weight: 700; color: #5e686d !important; }

  /* Wer hier druckt, will einen Zettel fuer die Pinnwand, keinen Ausdruck der
     Seite. Ohne Aufmacherfoto und Fussbereichsnavigation passt der Zettel auf
     eine einzige Seite; alles Noetige steht in der Zusammenfassung. */
  .hero--termin .hero-media,
  body:has(.appointment-form) .footer-grid { display: none !important; }

  /* --- 11. Ratgeber-Beitrag ----------------------------------------------
     Einspaltig und linksbuendig statt zweispaltigem Blocksatz: ruhiger und
     moderner. Damit die Zeile nicht zu lang wird, begrenzt max-width das
     Mass auf rund 75 Zeichen. */
  .news-article-meta {
    font-size: 8.5pt !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1pt solid #9dbdd4 !important;
    padding-bottom: 4pt !important;
    margin-bottom: 10pt !important;
  }
  .news-article h1 { font-size: 26pt !important; line-height: 1.1 !important; margin: 0 0 10pt !important; }
  .news-hero { height: auto !important; margin-bottom: 8pt; }
  .news-hero-crumbs { display: none !important; }

  .news-article-body {
    columns: 1;
    max-width: 135mm;
    text-align: left;
    hyphens: none;
    font-size: 10.5pt;
    line-height: 1.55;
  }
  /* Der Vorspann hebt sich ab, ohne zu schreien: fett ueber zehn Zeilen war
     zu viel Gewicht direkt unter einer 26pt-Ueberschrift. */
  .news-article-body > p:first-of-type {
    font-size: 11.5pt;
    font-weight: 500;
    color: #0b4f84 !important;
    margin-bottom: 12pt;
  }
  .news-article { max-width: none; }
  .news-article-body h2, .news-article-body h3 { margin-top: 12pt !important; }
  .news-article-body ul,
  .news-article-body ol,
  .news-article-body blockquote,
  .news-article-body .news-note,
  .news-article-body details,
  .news-article-body figure { break-inside: avoid; }

  /* Bilder im Beitrag illustrieren den Text und bleiben in voller Breite. */
  .news-article-body img,
  .news-article-body figure {
    display: block !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain;
    break-inside: avoid;
    margin: 8pt 0 !important;
  }
  .news-article-body figcaption { font-size: 8.5pt; font-style: italic; color: #5e686d !important; }
  .news-back, .news-article-cta, .news-aside { display: none !important; }

  @page { margin: 16mm 15mm; }
}

@media print{.lens3d-pin{display:none}}

@media print{
  #termin-summary{display:block}
}

@media print{
  .termin-summary{margin-top:0;background:#fff}
  .termin-summary ul{display:block}
}

@media print{.faq-aside{display:none}}