/**
 * Druckversion der Veranstaltungen ([fr_veranstaltungen_drucken]) - pro
 * Termin ein vollstaendiger Block mit allen Detailseiten-Angaben (Titel,
 * Datum & Uhrzeit, Beschreibungstext, Begleitung, Kurskosten, Maximale
 * Teilnehmeranzahl, Anmeldedaten), klar durch eine dunkle Haarlinie
 * voneinander abgesetzt. Links zusaetzlich eine gefuellte rote
 * Kalender-Flaeche (grosse weisse Zahl, darunter der abgekuerzte Monat in
 * Grossbuchstaben, z. B. "SEPT") - nach Kundenvorgabe (Screenshot-Vorschlag).
 *
 * Enthaelt eine eigene Kopie der .fr-event-details-Gestaltung aus
 * assets/single-templates.css, weil dieses Stylesheet auf der Druckseite
 * (Beitragstyp "page", nicht "event") nicht automatisch geladen wird.
 *
 * Container-Breite: bewusst KEIN eigener max-width/Zentrierung (mehr) -
 * fruehere Version begrenzte auf 1140px (wie die Seminarraum-/
 * Team-Detailseiten) und zentrierte per margin:auto. Seit dieser Shortcode
 * nicht mehr nur auf einer eigenen, sonst leeren Druckseite steht, sondern
 * gemeinsam mit normalem Seiteninhalt (WPBakery-Text) auf der Hauptseite
 * /freiraum/veranstaltungen eingebunden ist, fuehrte die eigene 1140px-Box
 * zu ZWEI unterschiedlichen Breiten auf derselben Seite (der normale
 * Seitentext ist so breit wie die jeweilige Seiten-/Theme-Spalte, die
 * Terminliste darunter dagegen schmaler und eingerueckt). Jetzt nimmt der
 * Container stattdessen einfach die volle Breite seines Eltern-Elements ein
 * - dadurch passt er sich automatisch an die Breite der jeweiligen Seite an
 * (auf der neuen Hauptseite genauso breit wie der Seitentext darueber, auf
 * der alten Druckseite /termine-frei-raum-drucken/ weiterhin so breit wie
 * deren eigene Seiten-Spalte).
 */

.fr-druck-container {
	padding: 32px 20px;
	box-sizing: border-box;
}

/* Kopf-/Fusszeile des Ausdrucks (Logo, Titel, gedruckter Zeitraum bzw.
   Kontaktdaten) - NICHT zu verwechseln mit dem Website-Header/-Footer des
   Themes (der bleibt beim Drucken separat ausgeblendet, siehe @media print
   weiter unten). Diese eigene Kopf-/Fusszeile ist am Bildschirm bewusst
   unsichtbar (sonst gaebe es zusaetzlich zum echten Website-Header einen
   zweiten Titel) und erscheint erst im @media-print-Block - genau wie beim
   QR-Code (siehe .fr-druck-termin__badge-qr weiter unten). Erscheint jeweils
   nur EINMAL (Kopfzeile am Anfang, Fusszeile am Ende des Dokuments), nicht
   auf jeder einzelnen Seite wiederholt - so vom Kunden gewuenscht. */
.fr-druck-kopfzeile,
.fr-druck-fusszeile {
	display: none;
}

.fr-druck-kopfzeile {
	text-align: center;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 2px solid #b6121e;
}

.fr-druck-kopfzeile__logo {
	max-height: 90px;
	width: auto;
	height: auto;
	margin: 0 auto 14px;
	display: block;
}

.fr-druck-kopfzeile__titel {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #b6121e;
}

.fr-druck-kopfzeile__zeitraum {
	margin: 0;
	font-size: 1.05rem;
	color: #555;
}

.fr-druck-fusszeile {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid #999;
	text-align: center;
}

.fr-druck-fusszeile p {
	margin: 0 0 4px;
	font-size: 0.8rem;
	color: #555;
}

.fr-druck-fusszeile p:last-child {
	margin-bottom: 0;
}

.fr-druck-liste {
	color: #222;
}

.fr-druck-termin {
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding: 22px 0; /* Abstand zwischen den Terminen halbiert (war 44px) */
	border-bottom: 1px solid #333; /* Haarlinie in Dunkelgrau zwischen den Veranstaltungen */
}

.fr-druck-termin:first-child {
	padding-top: 0;
}

.fr-druck-termin:last-child {
	border-bottom: none;
}

/* Kalender-Anzeige links: gefuellte rote Flaeche (nicht nur roter Text),
   ueber die volle Hoehe des Termin-Blocks - zusaetzlich zur Textzeile
   "Datum & Uhrzeit" unter der Ueberschrift, die unveraendert bestehen
   bleibt. Das Datum dockt oben an (statt vertikal zentriert), darunter
   folgt ein weisser QR-Code auf dem Rot, der auf die Veranstaltungsseite
   verlinkt. */
.fr-druck-termin__badge {
	flex: 0 0 90px;
	width: 90px;
	box-sizing: border-box;
	background: #b6121e;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 12px 6px;
	text-align: center;
	/* Hintergrundfarbe soll auch beim Drucken erhalten bleiben (nicht von
	   "Hintergrundgrafiken drucken"-Einstellungen des Browsers ignoriert
	   werden). */
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.fr-druck-termin__badge-datum {
	margin-bottom: 14px;
}

.fr-druck-termin__badge-tag {
	display: block;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.fr-druck-termin__badge-monat {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
}

/* Beim blossen Ansehen am Bildschirm ausgeblendet (an seiner Stelle steht
   dort stattdessen der Button "Infos & Anmeldung", siehe
   .fr-druck-termin__anmelden-button unten) - erst im @media-print-Block
   weiter unten wieder eingeblendet, wenn tatsaechlich gedruckt wird. */
.fr-druck-termin__badge-qr {
	display: none;
	width: 100%;
	height: auto;
	max-width: 72px;
	/* Das PNG selbst bringt bereits einen weissen Rand (Ruhezone) mit, siehe
	   fr_qr_png_binaerdaten() in includes/lib-qrcode.php - border-radius rundet
	   diesen weissen Rand zusaetzlich leicht ab, damit er wie ein kleines
	   Etikett auf der roten Kalender-Box wirkt statt wie ein eckiger Aufkleber. */
	border-radius: 4px;
}

.fr-druck-termin__inhalt {
	flex: 1 1 auto;
	min-width: 0;
}

.fr-druck-termin__titel {
	margin: 0 0 6px;
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #b6121e;
}

.fr-druck-termin__wann {
	margin: 0 0 14px;
	font-weight: 600;
	color: #555;
}

.fr-druck-termin__beschreibung {
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #333;
}

.fr-druck-termin__beschreibung p {
	margin: 0 0 10px;
}

.fr-druck-termin__beschreibung p:last-child {
	margin-bottom: 0;
}

/* Button "Infos & Anmeldung" - nur beim Ansehen am Bildschirm sichtbar
   (siehe @media print weiter unten, wo er wieder ausgeblendet wird), fuehrt
   auf die jeweilige Veranstaltungs-Detailseite. Steht an der Stelle, an der
   beim tatsaechlichen Drucken stattdessen der QR-Code erscheint. */
.fr-druck-termin__anmelden {
	margin: 10px 0 0;
}

/* Hintergrund-/Textfarbe bewusst mit !important gesetzt: dasselbe Theme,
   das schon bei den Filter-Dropdowns (.fr-druck-filter__monat/__jahr, siehe
   oben) eine global sehr aggressive Style-Regel fuer Links/Buttons
   mitbringt, hat auch hier den Button unsichtbar gemacht (weisser Text auf
   weissem Hintergrund - erst beim Markieren des Textes wurde er durch die
   Markierungsfarbe zufaellig sichtbar). Ohne !important reicht unsere
   Spezifitaet dagegen nicht aus. */
.fr-druck-termin__anmelden-button {
	display: inline-block;
	background: #b6121e !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px;
	padding: 8px 18px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none !important;
}

.fr-druck-termin__anmelden-button:visited {
	color: #fff !important;
}

.fr-druck-termin__anmelden-button:hover,
.fr-druck-termin__anmelden-button:focus {
	background: #8f0e17 !important;
	color: #fff !important;
}

/* Liste der Detailfelder aus [fr_event_details] (Begleitung, Kurskosten,
   Maximale Teilnehmeranzahl, Anmeldung per E-Mail/telefonisch, Anmeldung
   moeglich bis) - eigene Kopie der Gestaltung aus single-templates.css. */
.fr-event-details {
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
	font-size: 0.95rem;
}

.fr-event-details__zeile {
	padding: 2px 0; /* enger/normaler statt "doppelter" Umbruch zwischen den Feldern (war 5px) */
}

.fr-event-details a {
	color: inherit;
	text-decoration: underline;
}

/* Filterleiste "Von Monat/Jahr - Bis Monat/Jahr" oben auf der Seite -
   grenzt ein, welche Termine angezeigt/gedruckt werden (siehe
   fr_druck_zeitraum_ermitteln() in veranstaltungen-druck.php). Wird beim
   Drucken selbst nicht mitgedruckt (wie die "Drucken"-Toolbar).
   Bewusst zwei <select>-Dropdowns (Monat ausgeschrieben + Jahr) statt
   <input type="month">: Safari am Mac stellt type="month" nur als rohes
   Text-Feld dar (kein Kalender-Picker, Anzeige wie "2026-08") - Dropdowns
   sehen dagegen in jedem Browser gleich aus. */
.fr-druck-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ddd;
}

.fr-druck-filter__gruppe {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

.fr-druck-filter__label {
	font-weight: 600;
	color: #444;
	font-size: 0.95rem;
	white-space: nowrap;
}

/* Breite bewusst explizit + !important gesetzt: das Theme legt fuer
   <select>/<input> global oft eine feste, schmale Breite fest (dieselbe
   Ursache wie beim "Von"/"Bis"-Label, das anfangs Buchstabe-fuer-Buchstabe
   umgebrochen ist) - ohne Override wird z. B. "September" auf "Septeml..."
   abgeschnitten.
   BEWUSST KEIN min-width (mehr): das liess die Felder unnoetig breit wirken,
   selbst wenn ein kurzes Monat wie "Mai" ausgewaehlt war (Kundenfeedback -
   siehe Screenshot: viel Weissraum rechts neben "November", "Drucken"-Button
   rutschte deshalb in die naechste Zeile). "width: auto !important" allein
   genuegt bereits, um die vom Theme erzwungene feste Breite zu ueberschreiben
   UND sich automatisch an den jeweils angezeigten Wert anzupassen (per
   Playwright-Test gegen eine simulierte, aggressive Theme-Regel bestaetigt) -
   das Feld ist damit immer nur so breit wie noetig, hoechstens so breit wie
   der laengste Monatsname ("September"). */
.fr-druck-filter__monat,
.fr-druck-filter__jahr,
.fr-druck-filter__thema {
	font: inherit;
	font-size: 0.95rem;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	box-sizing: content-box !important;
	width: auto !important;
}

.fr-druck-filter__checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: #444;
	font-size: 0.95rem;
	white-space: nowrap;
	cursor: pointer;
}

.fr-druck-filter__checkbox input {
	margin: 0;
}

.fr-druck-filter__zuruecksetzen {
	color: #b6121e;
	font-size: 0.9rem;
	text-decoration: underline;
}

/* Eigene (statt der gemeinsamen "fr-druck-button") Klasse fuer den
   "Anzeigen"-Button der Filterleiste - bewusst NICHT "fr-druck-button",
   damit dieser Button (der nur die Seite neu laedt, nicht druckt) sich
   nicht mit den echten "Drucken"-Buttons vermischt, sieht aber optisch
   gleich aus. */
.fr-druck-button,
.fr-druck-filter__button {
	background: #b6121e;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 10px 22px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.fr-druck-button:hover,
.fr-druck-filter__button:hover {
	background: #8f0e17;
}

/* "Drucken"-Buttons - oben direkt neben dem "Anzeigen"-Button der
   Filterleiste (wirkte als eigener Block darunter "verloren", siehe
   Kundenfeedback) und unten mittig unter der Terminliste - oeffnen die
   Browser-Druckvorschau, werden aber selbst NIE mitgedruckt. */
.fr-druck-toolbar {
	margin: 0 0 20px;
}

/* Steht jetzt als <span> INNERHALB der Flex-Filterleiste (.fr-druck-filter),
   direkt neben "Anzeigen" - kein eigener Block-Abstand noetig. */
.fr-druck-toolbar--oben {
	margin: 0;
}

.fr-druck-toolbar--unten {
	text-align: center;
	margin-top: 32px;
	margin-bottom: 0;
}

/* Beim tatsaechlichen Drucken: Container darf die volle Papierbreite
   nutzen (kein zusaetzlicher Rand noetig, das regelt der
   Drucker-Dialog), die "Drucken"-Buttons werden nicht mitgedruckt, und
   ein Termin-Block soll nach Moeglichkeit nicht mitten durchgeschnitten
   ueber eine Seitengrenze laufen.

   Header/Hauptmenü/Footer der Website: urspruenglich BEWUSST nicht
   angefasst, in der Annahme, das Theme blende das beim Drucken bereits
   selbst zuverlaessig aus (vom Kunden zunaechst so bestaetigt). Die Praxis
   auf der Live-Seite zeigt aber: das ist NICHT zuverlaessig der Fall (der
   Footer blieb sichtbar, obwohl der Header korrekt verschwand). Die
   folgenden Selektoren sind nur noch eine GROBE, geratene Absicherung
   fuer den Fall, dass JavaScript deaktiviert ist - die eigentliche, robuste
   Loesung ist jetzt assets/veranstaltungen-drucken.js: das geht beim
   Drucken den DOM-Baum vom Druck-Container aus tatsaechlich nach oben durch
   und blendet alles aus, was nicht dazugehoert, unabhaengig von den
   tatsaechlichen Namen/Klassen dieses Themes. Das Andock-Menü-Plugin ist
   die einzige Ausnahme, die WIR ohnehin schon separat per CSS beisteuern
   (das Theme kennt es nicht) - siehe
   andock-menu-plugin/assets/andock-menu.css. */
@media print {
	.fr-druck-container {
		max-width: none;
		padding: 0;
	}
	.fr-druck-filter,
	.fr-druck-toolbar,
	.fr-druck-termin__anmelden {
		display: none !important;
	}
	.fr-druck-termin {
		page-break-inside: avoid;
	}
	/* Umgekehrt zum Bildschirm: der QR-Code (am Bildschirm ausgeblendet,
	   siehe .fr-druck-termin__badge-qr oben) wird erst beim tatsaechlichen
	   Ausdrucken sichtbar - dafuer verschwindet an seiner Stelle oben der
	   Button "Infos & Anmeldung" (macht auf Papier ohnehin keinen Sinn). */
	.fr-druck-termin__badge-qr {
		display: block !important;
	}

	/* Kopf-/Fusszeile des Ausdrucks (siehe .fr-druck-kopfzeile/
	   .fr-druck-fusszeile oben) - am Bildschirm ausgeblendet, nur beim
	   tatsaechlichen Ausdrucken sichtbar. */
	.fr-druck-kopfzeile,
	.fr-druck-fusszeile {
		display: block !important;
	}

	body:has(.fr-druck-container) > header,
	body:has(.fr-druck-container) > nav,
	body:has(.fr-druck-container) > footer,
	body:has(.fr-druck-container) #masthead,
	body:has(.fr-druck-container) #colophon,
	body:has(.fr-druck-container) #site-header,
	body:has(.fr-druck-container) #site-footer,
	body:has(.fr-druck-container) #site-navigation,
	body:has(.fr-druck-container) .site-header,
	body:has(.fr-druck-container) .site-footer,
	body:has(.fr-druck-container) .site-navigation,
	body:has(.fr-druck-container) .main-navigation {
		display: none !important;
	}
}