/*
 * Druck-Stylesheet (Una-Wunsch 2026-08-19: bei Bewerbungen im
 * Behördenkontext wird durchaus noch ausgedruckt/abgeheftet — das
 * dunkle, auf Bildschirm-Interaktion ausgelegte Theme (fixierte
 * Panel-Position, per JS "geklebte" Medien, Farbverlauf-Hintergrund)
 * würde unverändert gedruckt entweder gar nicht oder stark verzerrt/
 * unleserlich erscheinen.
 *
 * Als eigene, mit media="print" eingebundene Datei statt eines
 * @media print{}-Blocks in case-study.css/grid.css (inc/enqueue.php) —
 * dadurch wendet der Browser diese Regeln beim normalen Betrachten am
 * Bildschirm gar nicht erst an, kein zusätzlicher Kaskaden-Aufwand für
 * den weitaus häufigeren Fall.
 *
 * Sitweit geladen (nicht auf Case-Study-Seiten beschränkt), weil auch
 * generische Seiten (About, Impressum, .schachbrett-page-Klasse) von
 * denselben Grundregeln (helle statt dunkler Farben, Sticky-Header
 * normalisiert) profitieren.
 *
 * Wichtigster Anwendungsfall: eine einzelne Projekt-URL direkt
 * aufgerufen (single-portfolio_projekt.php) — das Panel ist dort
 * serverseitig bereits "offen", enthält also den eigentlichen
 * druckbaren Inhalt (die Case Study). Die Kachel-Übersicht/Navigation
 * drumherum ist für den Ausdruck irrelevant und wird ausgeblendet.
 */

/* --- Navigation/Interaktions-Chrome: für den Ausdruck ohne Wert --- */
.portfolio-header,
.portfolio-header__shadow,
.portfolio-grid-viewport,
.project-panel__scrim,
.project-panel__close,
.project-panel__fade,
.case-study__media-toggle,
.site-content__back {
	display: none !important;
}

/* --- Grundfarben: dunkel-auf-hell statt hell-auf-dunkel ---
   Ein unverändert dunkler Hintergrund würde entweder ungedruckt bleiben
   (die meisten Drucker/Browser lassen Hintergrundfarben standardmäßig
   weg) und dabei den ohnehin hellen Text unleserlich machen, oder bei
   aktiviertem "Hintergrundgrafiken drucken" unnötig viel Tinte/Toner
   verbrauchen. */
html,
body,
.portfolio-grid-page,
.case-study-page,
.schachbrett-page {
	background: #fff !important;
	color: #1a1a1a !important;
}

/* --- Panel: von fixiertem Bildschirm-Overlay zu normalem Fließtext ---
   .project-panel ist normalerweise position:fixed mit eigener Höhe/
   Breite und dunklem Hintergrund (Slide-in-Effekt) — für den Ausdruck
   soll es sich wie ein ganz normaler Seiteninhalt verhalten, der über
   so viele Papierseiten läuft, wie nötig, statt auf eine
   Bildschirm-Box begrenzt zu bleiben. */
.project-panel {
	position: static !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	background: #fff !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

.project-panel__scroll {
	position: static !important;
	height: auto !important;
	overflow: visible !important;
	padding-top: 0 !important;
}

.project-panel__body {
	opacity: 1 !important;
}

.case-study {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.case-study__headline {
	color: #1a1a1a !important;
	/* clamp() zielt auf Bildschirmbreiten — auf Papier reicht eine feste,
	   deutlich kleinere Größe, die nicht mehrere Zeilen Platz frisst. */
	font-size: 2rem !important;
	/* Verhindert, dass die Überschrift allein am Seitenende steht,
	   getrennt vom dazugehörigen Text (Waisenkind-Effekt). */
	break-after: avoid;
}

.case-study__content h2,
.case-study__content h3,
.case-study__content .wp-block-heading {
	color: #1a1a1a !important;
	break-after: avoid;
}

/* --- Medien: von "geklebtem" Bildschirm-Fenster zu normalem Bild ---
   Sowohl der Sticky-Fenster-Mechanismus (assets/js/
   case-study-media-window.js, setzt bei Aktivierung position:fixed +
   eine überdimensionierte Inline-Höhe direkt am Element) als auch die
   schlichte .case-study__media-frame-Variante sollen im Ausdruck
   schlicht als normal fließendes Bild erscheinen — ohne die für den
   Bildschirm-Scroll-Effekt gedachte Höhe/Position/Beschneidung.
   !important nötig, weil das JS die widerlegten Eigenschaften direkt
   als Inline-Style setzt (höhere Spezifität als jede externe
   Stylesheet-Regel ohne !important). */
.case-study__fixed-media-window,
.case-study__media-frame {
	position: static !important;
	height: auto !important;
	overflow: visible !important;
	box-shadow: none !important;
	border: none !important;
}

.case-study__fixed-media-window img,
.case-study__media-frame img {
	position: static !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: initial !important;
	clip-path: none !important;
	/* Verhindert, dass ein großes Bild mitten durchgeschnitten auf zwei
	   Seiten landet, wo sich das vermeiden lässt. */
	break-inside: avoid;
}

/* Video lässt sich nicht drucken — ausblenden statt eines leeren/
   kaputt wirkenden Kastens. Bei einem eigenständigen Video-Block bleibt
   dadurch ggf. eine leere Stelle; das ist der Kompromiss, kein Bug. */
.case-study__fixed-media-window video,
.case-study__media-frame video {
	display: none !important;
}

/* --- Zitate/Hervorhebungen: weiterhin klar abgesetzt, nur in
   druckfreundlichen statt bildschirmtypischen Farben. --- */
.case-study__content blockquote {
	color: #1a1a1a !important;
	border-left-color: #666 !important;
	break-inside: avoid;
}

.case-study__content .tests-box {
	background: none !important;
	border: 1px solid #999 !important;
	break-inside: avoid;
}

/* prototype-link (Buttons-Block "Prototyp live testen") ergibt gedruckt
   keinen Sinn — es gibt keinen klickbaren Link auf Papier. Die
   tatsächliche URL wird stattdessen sichtbar mit ausgegeben (klassische
   Druck-Stylesheet-Technik), damit die Information nicht komplett
   verloren geht. */
.case-study__content .prototype-link .wp-block-button__link {
	background: none !important;
	border: 1px solid #1a1a1a !important;
	color: #1a1a1a !important;
}

.case-study__content .prototype-link .wp-block-button__link[href]::after {
	content: ' (' attr( href ) ')';
	font-size: 0.75em;
	color: #555;
}

/* --- Generische Seiten (About, Impressum, …) --- */
.site-content__body a {
	color: #1a1a1a !important;
	text-decoration: underline;
}