/*
 * Case-Study-Einzelseite — Abschnitt 6 des Übergabeprotokolls.
 * Una-Korrektur 2026-08-07: kein festes Beat-Feld-Layout mehr, Inhalt kommt
 * aus dem normalen Blockeditor. Styles greifen auf die Standard-Klassen,
 * die WordPress-Core-Blöcke selbst mitbringen (wp-block-image,
 * wp-block-quote, wp-block-heading, …) statt auf eigens benannte Felder.
 */

/* .schachbrett-page (index.php-Fallback: About, Impressum, Datenschutz,
   404, Suche, Blog-Archiv, …) teilt sich Hintergrund/Farben/Schrift mit
   .case-study-page, damit der dunkle Look themeweit konsistent bleibt
   statt auf den Case-Study-Kontext beschränkt zu sein (Una-Wunsch
   2026-08-07). */
.case-study-page,
.schachbrett-page {
	/* Farb-Tokens (--color-navy usw.) stehen seit der Aufräumrunde
	   2026-08-18 auf :root in style.css statt hier lokal — dieselben
	   Werte, einmal gepflegt statt zweimal (siehe dort). */
	background: linear-gradient( 160deg, var( --color-navy ), var( --color-forest ) 70% );
	color: var( --color-text );
	/* dvh statt/zusätzlich zu vh — siehe .portfolio-grid-page in grid.css
	   für den ausführlichen Grund (Una-Fund 2026-08-08: Hintergrund deckt
	   den mobilen Viewport nicht vollständig ab). */
	min-height: 100vh;
	min-height: 100dvh;
	font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 400;
	line-height: 1.7;
}

.case-study {
	max-width: 42rem;
	margin: 0 auto;
	padding: 4rem 1.5rem 6rem;
}

/* --- Generische Seiten (.schachbrett-page) --- */

.site-content {
	max-width: 42rem;
	margin: 0 auto;
	padding: 5rem 1.5rem 6rem;
}

.site-content__back {
	display: inline-block;
	margin-bottom: 2.5rem;
	color: var( --color-text-dim );
	text-decoration: none;
	font-size: 0.9rem;
}

/* Una-Fund 2026-08-18/19 (echtes iPhone, Safari + Firefox identisch,
   gleicher WebKit-Unterbau): WebKits eigene :focus-visible-Heuristik
   stuft einen Touch-Tap dort fälschlich als "focus-visible" ein, der
   globale :focus:not(:focus-visible)-Reset (style.css) greift für diesen
   Fall also nicht. (hover:hover) and (pointer:fine) hängt stattdessen an
   der Geräte-Fähigkeit selbst statt an dieser Heuristik — auf einem
   reinen Touchscreen zuverlässig falsch, unabhängig vom Browser. */
@media ( hover: hover ) and ( pointer: fine ) {
	.site-content__back:hover,
	.site-content__back:focus-visible {
		color: var( --color-accent-turquoise );
	}
}

.site-content__body p {
	margin: 0 0 1.2rem;
}

.site-content__body a {
	color: var( --color-accent-turquoise );
}

.site-content__body h2,
.site-content__body h3 {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.1rem;
	color: var( --color-accent-turquoise );
	margin: 2.5rem 0 1rem;
}

/* --- Headline (Hook, Abschnitt 6) --- */

.case-study__headline {
	font-family: 'Italiana', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: clamp( 2rem, 5vw + 1rem, 3.75rem );
	line-height: 1.15;
	margin: 0 0 1.5rem;
}

/* --- Medien-"Fenster" (Una-Wunsch 2026-08-10) ---
   Jedes eigenständige Medium (Bild, Video, Embed) im Fließtext — auch
   innerhalb von "Medien & Text" — wirkt wie ein Ausschnitt/Guckloch, durch
   das ein dahinter fest "geklebtes" Medium sichtbar ist: es bewegt sich
   beim Scrollen überhaupt nicht, während der umgebende Text normal
   darüber hinwegzieht, bis der nächste Textabschnitt es wieder komplett
   verdeckt.

   Größe richtet sich NICHT nach eigenen Annahmen, sondern nach dem, was
   WordPress/der Editor für das jeweilige Medium bereits berechnet hat
   (Una-Fund 2026-08-10: "Bitte respektiere die Einstellungen in der
   Beitragserstellung, z. B. bezüglich Spaltenaufteilung" — der Ausschnitt
   nahm vorher per eigener min(60%, 32rem)/16:9-Annahme mehr als die
   Hälfte des Panels ein, unabhängig von der tatsächlichen Spaltenaufteilung
   im "Medien & Text"-Block oder einer im Editor gewählten Bildbreite).
   Diese Klassen setzen deshalb bewusst NUR noch die seitliche Position
   (Rand-Ausbruch), keine eigene width/aspect-ratio mehr — mit einer
   Ausnahme: --full ist als bewusst dramatischer Banner-Effekt weiterhin
   eine echte Override (volle Breite + 80vh Höhe), unabhängig vom
   ursprünglichen Seitenverhältnis.

   Gesetzt in inc/content-filters.php:
   - --full   (volle Breite/alignfull): bis zu beiden Rändern, 80vh hoch.
   - --left   (linksbündig, auch: Medien & Text mit Medium links):
              bis zum linken Rand ausgebrochen, Breite/Höhe bleiben die
              von WordPress berechneten.
   - --right  (rechtsbündig, auch: Medien & Text mit Medium rechts):
              bis zum rechten Rand ausgebrochen, Breite/Höhe unverändert.
   - --inset  (zentriert/breite Breite/Standard): kein Rand-Ausbruch,
              Breite/Höhe unverändert.
   Der Rand-Ausbruch (--full/--left/--right) rechnet dieselbe 1.5rem-
   Innenabstand von .case-study gegen, wie schon bei den früheren
   .alignwide/.alignfull-Regeln — bricht dadurch bis zum Rand von
   .case-study selbst aus (nicht bis zum Browser-Rand), funktioniert somit
   identisch auf der Einzelseite wie im schmaleren Slide-in-Panel.

   !important nur noch auf den Rand-Werten: die müssen zuverlässig
   gewinnen, auch gegen die Kernstile des Media-&-Text-Blocks
   (".wp-block-media-text > .wp-block-media-text__media { margin: 0 }",
   zwei Klassen mit Kind-Kombinator — höhere Spezifität als eine einzelne
   Klasse hier) und gegen die eigenen margin-top/-bottom-Regeln von
   .case-study__fixed-media-window weiter unten (Una-Fund 2026-08-10:
   "Bildausschnitte reichen nicht bis zum Rand" — beide Ursachen live
   nachgewiesen). */
.case-study__window--full {
	width: calc( 100% + 3rem ) !important;
	margin-left: -1.5rem !important;
	margin-right: -1.5rem !important;
}

.case-study__window--left {
	margin-left: -1.5rem !important;
	margin-right: 0 !important;
}

.case-study__window--right {
	margin-left: auto !important;
	margin-right: -1.5rem !important;
}

/* Una-Fund 2026-08-19, RICHTIGSTELLUNG: Bilder liefen früher über eine
   eigene background-attachment:fixed-Technik (.case-study__parallax-
   stage/-figure, mit unsichtbar gemachtem <img>) — auf einem echten
   iPhone (Safari + Firefox, beide auf WebKit) erwies sich das als
   grundlegend kaputt: das Bild verschwand beim Herunterscrollen komplett,
   beim Hochscrollen waren nur schmale Streifen sichtbar.
   background-attachment:fixed ist auf iOS nie zuverlässig unterstützt
   gewesen. Ersetzt durch dieselbe JS-Technik wie Video/Embeds direkt
   unten (position:fixed + laufend aktualisierter clip-path,
   assets/js/case-study-media-window.js) — dieselben CSS-Regeln gelten
   jetzt einheitlich für <img>, <video> und <iframe>, keine separate
   Bild-Behandlung mehr nötig.

--- Video/Embeds/Bilder: echtes, sichtbares Medium hinter einem per
   JavaScript laufend neu berechneten Ausschnitt (assets/js/
   case-study-media-window.js) ---
   background-attachment:fixed funktioniert nur mit einem statischen
   Hintergrundbild — ein <video> lässt sich nicht gleichzeitig abspielbar
   UND als CSS-Hintergrund darstellen (Una-Entscheidung 2026-08-10,
   "Variante 2": Abspielbarkeit soll erhalten bleiben, dafür mehr eigener
   Code als bei Bildern) — und erwies sich für Bilder auf iOS ohnehin als
   unzuverlässig (s. o.). Das <img>/<video>/<iframe> bleibt vor der JS-
   Initialisierung ganz normal sichtbar im Fenster (Kein-JS-Fallback);
   das Skript setzt es danach auf position:fixed (deutlich größer als das
   Fenster, damit beim Scrollen genug Fläche zum Aufdecken vorhanden ist)
   und schneidet es per clip-path auf genau den Bereich zu, der gerade
   hinter dem Fenster liegt. */
.case-study__fixed-media-window {
	position: relative;
	overflow: hidden;
	/* Langform statt margin-Kurzform — sonst würde die margin-Kurzform
	   (gleiche Spezifität, aber später im Quelltext) die seitlichen
	   Ränder der .case-study__window--*-Klassen weiter oben wieder auf 0
	   zurücksetzen. !important nötig (Una-Fund 2026-08-11, "Medien-Stile
	   greifen auf Mobile nicht mehr"): innerhalb von "Medien & Text"
	   gewinnt sonst WordPress' eigene Kernregel ".wp-block-media-text >
	   .wp-block-media-text__media { margin: 0 }" — hier live direkt
	   bestätigt: margin-top/-bottom lagen bei 0px statt 2rem. */
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
}

/* Una-Fund 2026-08-11: "Über dem Video befindet sich ein unerwünschter
   Abstand" (Mobile). Die 2rem margin-top oben sind auf Desktop bewusst so
   groß, um das Medium optisch zur Textspalte daneben auszurichten — bei
   "Medien & Text" stapelt WordPress unterhalb von 600px aber Medium und
   Text stattdessen übereinander (eigene Kernregel, ".wp-block-media-text.
   is-stacked-on-mobile"), addiert zum margin-bottom des vorherigen
   Absatzes wirkte der 2rem-Abstand dort unnötig groß. Nur in genau diesem
   gestapelten Fall verkleinert, Rand-Ausbruch/übrige Fenster bleiben
   unangetastet. */
@media ( max-width: 600px ) {
	.wp-block-media-text.is-stacked-on-mobile > .case-study__fixed-media-window {
		margin-top: 0.5rem !important;
	}
}

/* Höhe folgt dem eigenen Seitenverhältnis des Mediums (kein height:100%)
   — das Fenster (der Elternblock) hat selbst keine feste Höhe mehr (s. o.),
   bekommt sie also automatisch genau passend zum Medium. Genau das war
   Unas Fund: das Fenster war vorher künstlich auf 16:9 gezwungen statt
   der tatsächlichen Video-/Spaltenmaße zu folgen. Gilt seit 2026-08-19
   auch für <img> (s. o., ersetzt die frühere background-attachment:fixed-
   Technik) — dasselbe intrinsische-Seitenverhältnis-Verhalten wie bei
   video/iframe, aus denselben width-/height-Attributen, die WordPress an
   allen dreien mitrendert. */
.case-study__fixed-media-window img,
.case-study__fixed-media-window video,
.case-study__fixed-media-window iframe {
	display: block;
	width: 100%;
	height: auto;
	border: none;
}

/* Ausnahme --full: bewusst fester 80vh-Banner unabhängig vom
   Seitenverhältnis, hier braucht es object-fit:cover wieder, damit das
   Medium die feste Höhe formatfüllend statt verzerrt ausfüllt. */
.case-study__window--full.case-study__fixed-media-window img,
.case-study__window--full.case-study__fixed-media-window video,
.case-study__window--full.case-study__fixed-media-window iframe {
	height: 100%;
	object-fit: cover;
}

/* Von assets/js/case-study-media-window.js gesetzt, sobald ein Fenster in
   den erweiterten Sichtbereich scrollt (siehe dort) — z-index zwischen
   Panel (16) und Sticky-Header (20): muss über dem Panel-Hintergrund
   liegen, um überhaupt sichtbar zu sein, bleibt aber unter dem Header.
   Der clip-path (laufend per JS aktualisiert) sorgt dafür, dass davon
   ohnehin nur der Teil sichtbar ist, der gerade innerhalb des Fensters
   liegt — der Rest der Seite bleibt davon unberührt. */
.case-study__fixed-media--active {
	position: fixed;
	z-index: 17;
	pointer-events: auto;
	/* Sobald JS das Medium aktiviert, wird es per Inline-Style auf eine
	   bewusst andere (viel größere) Höhe gebracht, als sein eigenes
	   Seitenverhältnis hergibt (Scroll-Reveal-Fläche, siehe
	   case-study-media-window.js) — ohne object-fit:cover würde der
	   Inhalt dabei verzerrt gestreckt statt nur beschnitten. Gilt für
	   ALLE Ausrichtungen (die --full-spezifische Regel weiter oben deckt
	   nur den Vor-Aktivierungs-Zustand ab).
	   Una-Wunsch 2026-08-19 ("Ich verstehe, dass das Bild die gesamte
	   Panelhöhe einnimmt, aber bitte zentriere das Bild standardmäßig."):
	   object-position explizit statt sich auf den (ohnehin bereits
	   zentrierten) CSS-Ausgangswert zu verlassen — hier bewusst
	   ausgeschrieben, damit die Zentrierung nicht von einem impliziten
	   Default abhängt, der an anderer Stelle unbemerkt überschrieben
	   werden könnte. */
	object-fit: cover;
	object-position: center;
}

/* Una-Wunsch 2026-08-18: eigener Play/Pause-Knopf statt der nativen
   Video-Controls-Leiste (siehe case-study-media-window.js für die
   WCAG-2.2.2-Begründung) — sitzt als Geschwister von <video> INNERHALB
   von .case-study__fixed-media-window (position:relative, überschneidet
   sich also korrekt mit dessen eigenem Koordinatensystem), bleibt dadurch
   immer sichtbar, unabhängig vom aktuell per clip-path durchscheinenden
   Ausschnitt. Rein dekorativ/unaufdringlich gehalten (kleiner Kreis,
   unten rechts), damit er den Guckloch-Effekt nicht selbst stört. */
.case-study__media-toggle {
	position: absolute;
	right: var( --space-sm, 0.75rem );
	bottom: var( --space-sm, 0.75rem );
	z-index: 18;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var( --color-box-border );
	background: rgba( 10, 22, 34, 0.65 );
	color: var( --color-text );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	line-height: 1;
	transition: background 0.2s ease, border-color 0.2s ease;
}

/* Siehe ausführliche Begründung bei .site-content__back weiter oben. */
@media ( hover: hover ) and ( pointer: fine ) {
	.case-study__media-toggle:hover,
	.case-study__media-toggle:focus-visible {
		border-color: var( --color-accent-turquoise );
		background: rgba( 10, 22, 34, 0.85 );
	}
}

/* Pause-Symbol (zwei Balken) als Vorgabe — Video spielt beim Erscheinen
   im Sichtbereich automatisch ab, der Knopf zeigt also zunächst "pausieren".
   ::before/::after statt eines Icon-Fonts, damit kein zusätzliches Asset
   nötig ist. */
.case-study__media-toggle::before,
.case-study__media-toggle::after {
	content: '';
	width: 0.25rem;
	height: 0.9rem;
	background: currentColor;
	margin: 0 0.1rem;
}

/* Play-Symbol (Dreieck) im pausierten Zustand — dieselben zwei
   Pseudo-Elemente, per clip-path zu einem Dreieck statt zwei Balken
   umgeformt, damit kein zusätzliches Markup nötig ist. */
.case-study__media-toggle.is-paused::before,
.case-study__media-toggle.is-paused::after {
	width: 0.8rem;
	margin: 0;
}

.case-study__media-toggle.is-paused::before {
	clip-path: polygon( 0 0, 100% 50%, 0 100% );
}

.case-study__media-toggle.is-paused::after {
	display: none;
}

/* --- Video/Embeds, statisch eingebettet (Opt-in) ---
   Una-Wunsch 2026-08-18, nach Verständnis des Zoom-Kompromisses beim
   Sticky-Fenster: "eine [Klasse] wie bisher, eine für welche, die wir
   ganz normal im Textfluss einbetten, wenn es wichtig ist, dass man sie
   ganz sieht, auch mit unserem Playbutton." Trägt ein Video/Embed die
   Klasse "static-media" (inc/content-filters.php), bekommt es diese
   Behandlung STATT .case-study__fixed-media-window — normal fließendes
   Element, kein position:fixed, kein clip-path, das Video muss seine
   eigene Auflösung nie über die native Größe hinaus hochskalieren.
   position:relative nötig als Bezugsrahmen für den Play/Pause-Knopf
   (.case-study__media-toggle oben).
   Una-Fund 2026-08-19: Rahmen/Radius/Schatten (ursprünglich im selben
   "versenkten" Look wie .tests-box weiter unten) bewusst wieder entfernt
   — der Sinn dieser Variante ist ja gerade "hervorgehoben statt
   versenkt", ein umrahmter/abgeschatteter Kasten wirkte dem optisch
   entgegen. overflow:hidden entfällt mit, war nur für die (jetzt
   entfallenen) abgerundeten Ecken nötig. */
.case-study__media-frame {
	position: relative;
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
}

@media ( max-width: 600px ) {
	.wp-block-media-text.is-stacked-on-mobile > .case-study__media-frame {
		margin-top: 0.5rem !important;
	}
}

/* Höhe folgt dem eigenen Seitenverhältnis des Videos — kein erzwungenes
   object-fit:cover, das braucht nur das Sticky-Fenster-Pendant (die
   überdimensionierte Scroll-Puffer-Box, die zugeschnitten werden muss).
   Gilt einheitlich für alle Ausrichtungen inkl. --full — kein 80vh-
   Banner-Sonderfall wie beim Bild-Pendant, der eigens object-fit:cover
   bräuchte. */
.case-study__media-frame video,
.case-study__media-frame iframe {
	display: block;
	width: 100%;
	height: auto;
	border: none;
}

/* --- Fließtext & Überschriften im Blockinhalt --- */

.case-study__content p {
	margin: 0 0 1.2rem;
}

/* Una-Wunsch: Blocksatz mit automatischer Silbentrennung, weil Flattersatz
   in der schmalen Panel-Spalte unsauber wirkt.
   Recherchiert (nicht nur vermutet): WordPress hat den "Blocksatz"-Knopf
   in der Absatz-Werkzeugleiste bewusst entfernt (seit WP 4.7, 2016) —
   Begründung war uneinheitliche Browser-Darstellung/Lesbarkeit ohne
   Silbentrennung. Ein eigener JS-Filter, der den Knopf zurückbringt,
   müsste tief in interne, wenig dokumentierte Gutenberg-Komponenten
   eingreifen (AlignmentControl der Absatz-Blocks eigene, hartkodierte
   Optionsliste) — ohne Zugriff auf eine echte Editor-Umgebung zum Testen
   wäre das Raten statt Wissen. Stattdessen der zuverlässige Weg: WordPress
   druckt die Klasse has-text-align-justify automatisch, sobald man sie
   im Block-Inspector unter "Erweitert" → "Zusätzliche CSS-Klasse(n)"
   einträgt (dasselbe Feld, über das schon .tests-box/.prototype-link
   angewendet werden) — braucht keinen eigenen Toolbar-Knopf.
   hyphens:auto behebt das eigentliche Problem, das den Blocksatz-Knopf
   2016 kostete: ohne Silbentrennung reißen im schmalen Panel große,
   hässliche Wortzwischenräume. Greift automatisch in der Sprache aus
   language_attributes() (lang="de-DE" o. ä. in den Templates), ohne die
   hier nichts trennen würde. */
.case-study__content .has-text-align-justify {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.case-study__content h2,
.case-study__content h3,
.case-study__content .wp-block-heading {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.1rem;
	color: var( --color-accent-turquoise );
	margin: 3rem 0 1rem;
}

/* Drop Cap auf dem ersten Absatz des Case-Study-Texts. Una-Fund
   2026-08-18: der bisherige direkte-Kind-Selektor griff nicht, wenn der
   erste Absatz innerhalb eines Spalten-Blocks verschachtelt war —
   inc/content-filters.php markiert den tatsächlich ersten Absatz jetzt
   serverseitig (Dokumentreihenfolge, unabhängig von der
   Verschachtelungstiefe) mit dieser Klasse, siehe dort für die
   ausführliche Begründung. */
.case-study__content .case-study__first-paragraph::first-letter {
	float: left;
	font-family: 'Italiana', Georgia, serif;
	font-size: 3.4em;
	line-height: 0.8;
	padding: 0.05em 0.08em 0 0;
	color: var( --color-accent-turquoise );
}

/* Fallback-Optik für Video-Figures, die aus irgendeinem Grund nicht in
   .case-study__fixed-media-window umgewandelt wurden (z. B. innerhalb
   einer Galerie, die bewusst von der Umwandlung ausgenommen ist, siehe
   inc/content-filters.php) — bleibt dann einfach normal im Textfluss. */
.case-study__content figure video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.15rem;
	box-shadow:
		inset 0 0 0.6rem rgba( 0, 0, 0, 0.9 ),
		inset 0 0 4rem rgba( 0, 0, 0, 0.7 );
	margin: 1rem 0;
}

/* Fallback für Medien ohne Figure-Wrapper (seltener Copy/Paste-Fall) */
.case-study__content > img,
.case-study__content > video {
	max-width: 100%;
	height: auto;
	border-radius: 0.15rem;
	box-shadow:
		inset 0 0 0.6rem rgba( 0, 0, 0, 0.9 ),
		inset 0 0 4rem rgba( 0, 0, 0, 0.7 );
	margin: 1rem 0;
}

/* --- Zitate (Wendepunkt-Pull-Quotes und normale Zitate) --- */

.case-study__content blockquote {
	font-family: 'Italiana', Georgia, serif;
	font-size: 1.5rem;
	line-height: 1.4;
	border-left: 3px solid var( --color-accent-magenta );
	padding: 0.2rem 0 0.2rem 1.5rem;
	margin: 2.5rem 0;
	color: var( --color-text );
}

.case-study__content blockquote p {
	margin: 0 0 0.5rem;
}

.case-study__content blockquote cite {
	display: block;
	font-family: 'Fira Sans', sans-serif;
	font-style: normal;
	font-size: 0.85rem;
	color: var( --color-text-dim );
}

/*
 * --- Optionale Utility-Klassen ---
 * Manuell im Block-Editor über "Erweitert" → "Zusätzliche CSS-Klasse(n)"
 * an einem Block ergänzen, wenn der jeweilige visuelle Effekt gewünscht ist:
 *
 * "tests-box"       auf einer Gruppe (Abschnitt 6: abgesetzte Tester:innen-Zitate)
 * "prototype-link"  auf einem Buttons-Block (Abschnitt 6: "Prototyp live testen"-Opt-in)
 */

.case-study__content .tests-box {
	background: var( --color-box-bg );
	border: 1px solid var( --color-box-border );
	border-radius: 0.6rem;
	padding: 1.5rem 1.75rem;
	margin: 2.5rem 0;
}

.case-study__content .prototype-link .wp-block-button__link {
	background: transparent;
	border: 1px solid var( --color-accent-turquoise );
	color: var( --color-accent-turquoise );
	border-radius: 999px;
}

/* Siehe ausführliche Begründung bei .site-content__back weiter oben. */
@media ( hover: hover ) and ( pointer: fine ) {
	.case-study__content .prototype-link .wp-block-button__link:hover,
	.case-study__content .prototype-link .wp-block-button__link:focus-visible {
		background: var( --color-accent-turquoise );
		color: var( --color-navy );
	}
}