/* Print- / PDF-Styles fuer die Portale auf dem Legacy-Markup:
   myself.de und donna-magazin.de (Basis-Layout templates/layouts/layout.html.twig)
   sowie landidee.de (themes/landidee/.../layout.html.twig). Alle drei teilen
   dieselben Chrome-Bausteine (#navbar, #footer, #sidebar, Ad-Slots als
   div[id$="Wrapper"]), deshalb EINE Datei statt drei Kopien.

   Eingebunden mit media="print" -> greift NUR beim Drucken bzw. "Als PDF
   speichern", niemals in der Bildschirm-Ansicht. Das Basis-Layout (Schrift,
   Artikel, Bilder) kommt weiterhin aus prod.css, das dafuer auf media="all"
   steht; hier wird nur fuer den Druck aufgeraeumt. prod.css wird bewusst NICHT
   angefasst/neu gebaut. Da die Datei selbst media="print" ist, brauchen die
   Regeln keinen zusaetzlichen @media-Wrapper.

   BDF hat ein eigenes print.css (/html/themes/bdf/print.css) — dessen Markup ist
   Tailwind und benutzt andere Selektoren (.Footer, .print\:hidden). Siehe
   DEV-16669. */

/* --- Chrome ausblenden ----------------------------------------------------
   Navigation, Kopf-/Fusszeile, Sidebar, Overlays. */
#header,
#header-copyright-funke,
#navbar,
.navbar,
#menu,
#panel-menu,
.navbar-gallery,
#sidebar,
#footer,
#footer-copyright,
#footer-copyright-funke,
#search-overlay,
#toc-overlay,
#sticky-socials,
.socials,
#newsletter-cta,
#newsletter-cta2,
#newsletter-cta2-copyright,
.newsletter-cta-container,
/* Newsletter gibt es an mehreren Stellen, nicht nur als CTA-Leiste: als
   Areabrick mitten im Artikel (`newsletter`/`newsletterlist`), als Kasten in
   der Sidebar und als Overlay auf Mobil. Ein Anmeldeformular ist auf Papier
   nicht ausfuellbar, also fliegt es ueberall raus. Die eigene
   Newsletter-Landingpage bleibt heil — die bindet die Box direkt ein, nicht
   ueber einen Areabrick. */
.pimcore_area_newsletter,
.pimcore_area_newsletterlist,
#newsletter-sidebar,
#newsletter-overlay,
.newsletter-overlay,
/* "Bei Google bevorzugen" ist ein reiner Klick-CTA und auf Papier sinnlos. */
.google-preferred-link,
/* landidee: schwebender Pflanzensuche-Button — die Leiste in der Navigation
   (.find-my-plant) und der schwebende Button aus Includes/footer.html.twig,
   der ausserhalb von #footer liegt und deshalb noch mitdruckte. */
.find-my-plant,
.find-my-plant-link,
.find-my-plant-overlay,
/* Viewport-Sonden des Layouts (#mobile/#tablet), rein technisch. */
#mobile,
#tablet {
  display: none !important;
}

/* --- Werbung, Empfehlungswidgets, Consent ---------------------------------
   Die Ad-Slots liegen alle als div[id$="Wrapper"] im Dokument (sky1Wrapper,
   menu1Wrapper, sb1Wrapper, mr1Wrapper, bibo*Wrapper, billboard_btf_*Wrapper,
   outofpageWrapper) — dasselbe Muster, das die Layouts selbst schon fuer ihre
   Slot-Platzhalter verwenden. */
div[id$='Wrapper'],
.sidebar-ads,
.ad-wrapper,
.category-ads,
.navbar-ads-left,
.navbar-ads-right,
[id^='taboola-'],
.trc_related_container,
.OUTBRAIN,
#cmpwrapper,
#cmpbox,
.cmpboxBG,
.cmplazyload,
/* Video-Player drucken als leerer Kasten. */
[id^='kaltura_player_'] {
  display: none !important;
}

/* --- Infinite Scroll: nur der aufgerufene Artikel -------------------------
   Beim Scrollen haengt das Infinite-Scroll die naechsten Artikel als weitere
   `.append`-Bloecke unter den aktuellen. Wer danach Strg+P drueckt, druckt
   alles mit, was er vorher durchgescrollt hat (gemessen auf landidee: drei
   komplette Artikel, inklusive der Newsletter-Box aus dem nachgeladenen).
   Gedruckt wird deshalb nur der erste Block — die Seite, die man aufgerufen
   hat. BDF hat keinen Infinite Scroll, dort greift die Regel ins Leere. */
.infinite-container > .append ~ .append {
  display: none !important;
}

/* --- Druckfreundliche Flaeche --------------------------------------------- */
html,
body {
  background: #fff !important;
  color: #000 !important;
}

/* Ohne Sidebar darf der Artikel die volle Breite nutzen. Bootstrap stapelt
   unterhalb von 768px ohnehin — eine Druckseite ist meist schmaler —, die
   Regel greift aber auch bei Querformat/A3. */
.container {
  width: auto !important;
  max-width: none !important;
}

.col-sm-7 {
  width: 100% !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
}

/* Bilder vollstaendig zeigen und nicht ueber Seitenumbrueche zerschneiden. */
img,
picture,
figure {
  max-width: 100% !important;
  height: auto !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Ueberschriften nicht allein am Seitenende lassen. */
h1,
h2,
h3,
h4 {
  break-after: avoid-page;
  page-break-after: avoid;
}

/* Links neutral drucken (keine langen Affiliate-URLs einblenden).
   Bootstrap 3 steckt in prod.css einen eigenen @media-print-Block, der hinter
   JEDEN Link die URL setzt (a[href]:after { content: ' (' attr(href) ')' }) und
   dasselbe fuer abbr[title]. Solange prod.css auf media="screen" stand, ist das
   nie aufgefallen — mit media="all" landet es im Ausdruck und macht z. B. aus
   der Brotkrume "HOME (/) > BEAUTY (/beauty/) > …". Deshalb hier abgeraeumt;
   print.css wird nach prod.css eingebunden und gewinnt damit die Kaskade. */
a {
  color: #000 !important;
  text-decoration: none !important;
}

a[href]:after,
abbr[title]:after {
  content: none !important;
}

/* Aus demselben Bootstrap-Print-Block: `.label { border: 1px solid #000 }`.
   Im Pflanzen-Steckbrief ist `.label` kein Badge, sondern die Zeilenbeschriftung
   — mit Rahmen sieht sie im Ausdruck wie ein Eingabefeld aus. Gilt fuer beide
   Bloecke: die Zeilen-Tabellen UND die Ja/Nein-Liste. */
.plant-char .label {
  border: 0 !important;
}

/* --- Pflanzen-Steckbrief (landidee, gleiches Markup auf BDF) ---------------
   Rueckmeldung Stefanie Essl vom 25.08.2026: "Zeiten nicht ersichtlich da
   Balken fehlen".

   Ursache: die Monatsbalken sind reine Hintergrundfarben (.months als Schiene,
   .active als Balken). Bootstrap 3 setzt in seinem @media-print-Block
   `* { background: transparent !important }` — und selbst ohne das druckt
   Chrome Hintergruende nur, wenn der Nutzer "Hintergrundgrafiken" anhakt.
   Der Steckbrief kam damit als 12 gleich aussehende Monatskuerzel heraus.

   Deshalb zweigleisig: der aktive Monat bekommt einen *Rahmen* als Balken
   (Rahmen druckt immer) und zusaetzlich Fettung; der graue Hintergrund kommt
   ueber print-color-adjust obendrauf, wo der Browser ihn zulaesst. */
.plant-char-times .months {
  border: 1px solid #000 !important;
  border-radius: 0 !important;
}

.plant-char-times .months > * {
  color: #000 !important;
  border-right: 1px solid #999 !important;
}

.plant-char-times .months > *:last-child {
  border-right: 0 !important;
}

/* Die gestrichelten Trenner sind weiss auf weiss — im Druck unsichtbar, die
   Zellenrahmen oben uebernehmen die Aufgabe. */
.plant-char-times .months > *::after {
  display: none !important;
}

.plant-char-times .months > *.active {
  font-weight: 700 !important;
  border-bottom: 4px solid #000 !important;
  background: #d9d9d9 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* Die Ja/Nein-Liste haengt an FontAwesome-Icons — dessen Stylesheet steht auf
   media="screen", im Druck bleiben die Icons also leer und "giftig" sah aus wie
   "winterhart". Haken/Kreuz hier als echtes Zeichen setzen (mit !important,
   damit es auch gewinnen wuerde, wenn FontAwesome spaeter mitgedruckt wird). */
.plant-char-checkboxes .label > i {
  font-style: normal !important;
  /* Ohne eigene Familie erbt das Zeichen die FontAwesome-Familie aus prod.css. */
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.plant-char-checkboxes .label > i::before {
  font-family: inherit !important;
}

.plant-char-checkboxes .label > i.fa-check::before {
  content: '\2713' !important;
}

.plant-char-checkboxes .label > i.fa-circle-xmark::before,
.plant-char-checkboxes .label > i.fa-xmark::before,
.plant-char-checkboxes .label > i.fa-times::before {
  content: '\2717' !important;
}

/* Kopfzeile des Steckbriefs: der dunkle Balken faellt im Druck weg, ohne
   Rahmen steht die Ueberschrift lose ueber der Tabelle. */
.plant-char-handler {
  border: 1px solid #000 !important;
  border-bottom: 0 !important;
}

.plant-char-body {
  border-color: #000 !important;
}

/* Auf-/Zuklapp-Pfeil ist eine reine Bildschirm-Bedienung. */
.plant-char-handler > i {
  display: none !important;
}

/* --- Reine Navigations-Bausteine ------------------------------------------
   Rueckmeldung vom 25.08.2026: die "Mehr zum Thema"-Ueberschrift soll auf allen
   Portalen raus. Der Teaserslider darunter ist im Druck ohnehin kaputt — die
   Slides stehen ohne JS uebereinander, was auf Papier wie doppelter Inhalt
   aussieht —, also faellt der ganze Block weg statt nur seiner Ueberschrift.
   Dasselbe fuer das Inhaltsverzeichnis: Ankerlinks sind auf Papier tot, die
   Ueberschriften stehen im Artikel direkt darunter. */
.teaserslider-headline,
.teaserslider-by-path,
.toc,
.toc--end,
.toc-small-container,
.toc-small {
  display: none !important;
}