/* =========================================================================
   Filmworkshop – Theme-CSS (Frontend + Editor)
   Masse stammen 1:1 aus dem Adobe-Muse-Layout (1024 px Raster, 994 px Inhalt).
   ========================================================================= */

/* ---- Farben & Seitenschlüssel --------------------------------------- */
:root {
	--fw-rot: #e54545;
	--fw-blau: #26657f;
	--fw-ocker: #e5b545;
	--fw-gruen: #36b28d;
	--fw-grau: #5f5f5f;
	--fw-color: var(--fw-rot);
	--fw-font-text: "Open Sans", sans-serif;
	--fw-font-titel: "Advent Pro", sans-serif;
}
body.fw-blau       { --fw-color: var(--fw-blau); }
body.fw-ocker      { --fw-color: var(--fw-ocker); }
body.fw-gruen      { --fw-color: var(--fw-gruen); }
/* Eigene Seitenfarbe (Seitenleiste → Seitenfarbe) wird als Inline-Variable auf <body> gesetzt. */

html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--fw-color);
	color: #fff;
	font-family: var(--fw-font-text);
	font-weight: 300;
	font-size: 20px;
	line-height: 1.2;
	text-rendering: optimizeLegibility;
	font-feature-settings: "liga";
	word-wrap: break-word;
}
strong, b { font-weight: 600; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* ---- Kopfbereich ----------------------------------------------------- */
.fw-header {
	position: relative;
	z-index: 5;
	height: 85px;
	background: #fff;
}
.fw-header__inner {
	position: relative;
	width: 994px;
	max-width: 100%;
	height: 85px;
	margin: 0 auto;
}
.fw-logo {
	position: absolute;
	left: 10px;
	top: 19px;
	display: block;
	width: 318px;
	height: 50px;
	background-color: var(--fw-color);
	-webkit-mask: url(../img/logo/logo-home.svg) no-repeat 0 0 / 318px 50px;
	mask: url(../img/logo/logo-home.svg) no-repeat 0 0 / 318px 50px;
	text-indent: -9999px;
	overflow: hidden;
}
.fw-nav {
	position: absolute;
	right: 9px;
	top: 13px;
	display: flex;
	gap: 10px;
}
.fw-nav__item,
.fw-sidenav a {
	display: block;
	font-size: 0;            /* Linktext nur für Screenreader, sichtbar ist das Icon */
	color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
	text-decoration: none;
}
.fw-nav__item { position: relative; width: 42px; height: 42px; background-size: 42px 42px; }

/* Beschriftung beim Überfahren (wie Muse-Original): 12 px Open Sans in der Farbe der Zielseite,
   oben unter dem Icon, in der Seitenleiste als weisses Fähnchen links daneben. Nur mit Maus. */
.fw-nav__item::after,
.fw-sidenav a::after {
	content: attr(data-label);
	position: absolute;
	width: 50px;
	font-family: var(--fw-font-text);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	color: var(--fw-label, var(--fw-rot));
	display: none;           /* nur am Computer mit Maus, sonst ragt das unsichtbare Label im Tablet-Layout über den Rand */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.fw-nav__item::after { left: -3px; top: 46px; transform: translateY(-3px); } /* Textmitte 1 px rechts der Icon-Mitte, wie Muse */
.fw-nav__item--tatort, .fw-sidenav__tatort { --fw-label: var(--fw-blau); }
.fw-nav__item--dokfilm, .fw-sidenav__dokfilm { --fw-label: var(--fw-ocker); }
.fw-nav__item--musikvideo, .fw-sidenav__musikvideo { --fw-label: var(--fw-gruen); }
@media (hover: hover) and (min-width: 1024px) {
	.fw-nav__item::after, .fw-sidenav a::after { display: block; }
	.fw-nav__item:hover::after,
	.fw-nav__item:focus-visible::after,
	.fw-sidenav a:hover::after,
	.fw-sidenav a:focus-visible::after { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

.fw-nav__item--home       { background-image: url(../img/nav/home.png); }
.fw-nav__item--tatort     { background-image: url(../img/nav/tatort.png); }
.fw-nav__item--dokfilm    { background-image: url(../img/nav/dokfilm.png); }
.fw-nav__item--musikvideo { background-image: url(../img/nav/musikvideo.png); }
.fw-nav__item--mail       { background-image: url(../img/nav/mail.png); }

.fw-nav__item--home:hover       { background-image: url(../img/nav/home-hover.png); }
.fw-nav__item--tatort:hover     { background-image: url(../img/nav/tatort-hover.png); }
.fw-nav__item--dokfilm:hover    { background-image: url(../img/nav/dokfilm-hover.png); }
.fw-nav__item--musikvideo:hover { background-image: url(../img/nav/musikvideo-hover.png); }
.fw-nav__item--mail:hover       { background-image: url(../img/nav/mail-hover.png); }

body.fw-seite-home       .fw-nav__item--home       { background-image: url(../img/nav/home-active.png); }
body.fw-seite-tatort     .fw-nav__item--tatort     { background-image: url(../img/nav/tatort-active.png); }
body.fw-seite-dokfilm    .fw-nav__item--dokfilm    { background-image: url(../img/nav/dokfilm-active.png); }
body.fw-seite-musikvideo .fw-nav__item--musikvideo { background-image: url(../img/nav/musikvideo-active.png); }

/* ---- Seitliche Sprungleiste (fix am rechten Rand) -------------------- */
.fw-sidenav {
	position: fixed;
	right: 1px;              /* Muse: right 1 px */
	top: 343px;
	z-index: 10;             /* liegt hinter Kopfbereich und Einleitung, vor allen Bändern darunter (siehe unten) */
	width: 45px;
	height: 212px;
	background: #fff;
	border-radius: 3px 0 0 3px;
}
body.fw-seite-home .fw-sidenav { top: 298px; }
/* Wie Muse: Die Leiste ist fix, aber Kopfbereich (Fotos/Kacheln) und Einleitungstext liegen darüber (Muse z-index
   215–243 bzw. 95–97 gegen Leiste 171 bzw. 49). Erst wenn beim Scrollen das nächste Band (Bilder bzw. Infos) unter der
   Leiste ist, wird sie sichtbar. Kopfbereich über der Einleitung, weil seine Pfeil-Buttons in die Einleitung ragen. */
.fw-hero, .fw-kurs-hero { position: relative; z-index: 30; display: flow-root; } /* flow-root: Pfeilreihe ragt hinaus, Hintergrund endet an der Bandkante */
.fw-intro { position: relative; z-index: 20; }
/* Wie im Original: die Leiste liegt hinter dem 1024-px-Seiteninhalt. Sobald das Fenster
   so schmal ist, dass sie den Inhalt überlappen würde, ist sie nicht sichtbar. */
@media (max-width: 1113px) { .fw-sidenav { display: none; } }
.fw-sidenav a { position: absolute; left: var(--fw-x); }
.fw-sidenav__home       { --fw-x: 7px; top: 13px;  width: 34px; height: 30px; background-image: url(../img/nav/side-home.png); }
.fw-sidenav__tatort     { --fw-x: 3px; top: 55px;  width: 42px; height: 30px; background-image: url(../img/nav/side-tatort.png); }
.fw-sidenav__dokfilm    { --fw-x: 3px; top: 93px;  width: 42px; height: 30px; background-image: url(../img/nav/side-dokfilm.png); }
.fw-sidenav__musikvideo { --fw-x: 3px; top: 130px; width: 41px; height: 30px; background-image: url(../img/nav/side-musikvideo.png); }
.fw-sidenav__mail       { --fw-x: 6px; top: 173px; width: 33px; height: 25px; background-image: url(../img/nav/side-mail.png); }
/* Fähnchen: 53 x 31 px, weiss, bündig links an der Leiste (Muse: right 98 px, Leiste right 1 px) */
.fw-sidenav a::after {
	left: calc(-52px - var(--fw-x));   /* überlappt die Leiste 1 px wie im Original */
	top: 0;
	box-sizing: border-box;
	width: 53px;
	height: 31px;
	padding: 7px 1px 0 2px;
	background: #fff;
	border-radius: 3px 0 0 3px;
	transform: translateX(8px);
}
.fw-sidenav__mail::after { top: -3px; }

.fw-sidenav__home:hover       { background-image: url(../img/nav/side-home-hover.png); }
.fw-sidenav__tatort:hover     { background-image: url(../img/nav/side-tatort-hover.png); }
.fw-sidenav__dokfilm:hover    { background-image: url(../img/nav/side-dokfilm-hover.png); }
.fw-sidenav__musikvideo:hover { background-image: url(../img/nav/side-musikvideo-hover.png); }
.fw-sidenav__mail:hover       { background-image: url(../img/nav/side-mail-hover.png); }

body.fw-seite-tatort     .fw-sidenav__tatort     { background-image: url(../img/nav/side-tatort-active.png); }
body.fw-seite-dokfilm    .fw-sidenav__dokfilm    { background-image: url(../img/nav/side-dokfilm-active.png); }
body.fw-seite-musikvideo .fw-sidenav__musikvideo { background-image: url(../img/nav/side-musikvideo-active.png); }

/* ---- Bänder (Gruppen mit Stil «Band») -------------------------------- */
.wp-block-group.is-style-fw-farbe { background: var(--fw-color); color: #fff; }
.wp-block-group.is-style-fw-weiss { background: #fff; color: var(--fw-color); }
.wp-block-group.is-style-fw-weiss a { color: var(--fw-color); }

/* Sprung-Buttons ragen aus dem Band ins nächste hinein */
.fw-ragt-hinein     { position: relative; z-index: 3; margin-bottom: -32px !important; }
.fw-ragt-hinein-klein { position: relative; z-index: 3; margin-bottom: -20px !important; }

/* ---- Überschriften --------------------------------------------------- */
/* Hauptüberschrift nur für Suchmaschinen und Screenreader (siehe inc/seo.php) */
.fw-seo-h1 { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--fw-font-titel);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}
.wp-block-heading.has-text-align-center { text-align: center; }

/* Nie mitten im Wort umbrechen (Titel, Untermenü, Buttons, Labels) */
h1, h2, h3, h4, .fw-subnav h3, .wp-block-button__link, .fw-infos__liste strong, .fw-versicherung strong, .fw-ablauf__tage p, .fw-ablauf__zelle p {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}
section.alignfull > h2.wp-block-heading, .fw-subnav h3, .wp-block-button__link { white-space: nowrap; }

/* Muse setzt Abschnittstitel, Untermenü, Info-Labels und den Kontaktblock in Grossbuchstaben */
section.alignfull > h2.wp-block-heading,
.fw-subnav h3,
.fw-infos__liste strong,
.fw-versicherung strong,
.fw-kontakt__name,
.fw-kontakt__daten { text-transform: uppercase; }

/* ---- Startseite: Kacheln --------------------------------------------- */
/* Kachel = das <figure> selbst (325 x 581 mit 10 px weissem Rand). Gleiche Regeln im Editor
   und auf der Website. Mehrere Kacheln teilen sich die Breite (3 = Original, 4+ werden kleiner). */
.fw-hero { padding-top: 57px; }
.fw-kacheln { gap: 9.5px !important; }
.wp-block-image.is-style-fw-kachel-tatort     { --fw-tile: var(--fw-blau);  --fw-tile-bild: url(../img/tiles/filmstreifen-tatort.svg); }
.wp-block-image.is-style-fw-kachel-dokfilm    { --fw-tile: var(--fw-ocker); --fw-tile-bild: url(../img/tiles/filmstreifen-dokfilm-2020.png); }
.wp-block-image.is-style-fw-kachel-musikvideo { --fw-tile: var(--fw-gruen); --fw-tile-bild: url(../img/tiles/filmstreifen-musikvideo.svg); }
.wp-block-image.is-style-fw-kachel-neu        { --fw-tile: rgba(0, 0, 0, 0.35); --fw-tile-bild: none; }

.wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"]) {
	position: relative;
	box-sizing: border-box;
	flex: 1 1 0 !important;
	max-width: 325px;
	min-width: 0;
	aspect-ratio: 325 / 581;
	margin: 0 !important;
	border: 10px solid #fff;
	overflow: hidden;
	background: var(--fw-tile);
	container-type: inline-size;
}
.wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"]) > a { display: block; }
.wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"]) img {
	position: absolute;
	left: -0.3%;
	top: 0;
	width: 103.6%;
	height: 106.1%;
	max-width: none;
	object-fit: cover;
	transition: opacity 0.5s ease-out;
}
.wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"])::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--fw-tile) var(--fw-tile-bild) no-repeat -10px -10px;
	background-size: calc(100% + 20px) auto;
	transition: background-color 0.5s ease-out;
	pointer-events: none;
}
.wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"]):hover::after { background-color: transparent; }
/* Muse: Foto bei Dokfilm und Musikvideo zu 60 % über der Kachelfarbe, bei Tatort voll */
.wp-block-image.is-style-fw-kachel-dokfilm img,
.wp-block-image.is-style-fw-kachel-musikvideo img { opacity: 0.6; }
/* Muse: Dokfilm- und Musikvideo-Foto 325 x 612 ab Kachel-Aussenkante (unter dem Rand), Tatort 316 x 595 innerhalb */
.wp-block-image.is-style-fw-kachel-dokfilm:not([class*="kachel-foto"]) img,
.wp-block-image.is-style-fw-kachel-musikvideo:not([class*="kachel-foto"]) img { left: -3.279%; top: -1.783%; width: 106.557%; height: 109.091%; }

/* Neue Kachel: Foto abgedunkelt, Label «Filmworkshop» und Kurstitel (Bildunterschrift) */
.wp-block-image.is-style-fw-kachel-neu::before {
	content: "Filmworkshop";
	position: absolute;
	left: 50%;
	top: 34%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 0 1.5cqw;
	border: 1px dotted #fff;
	font-family: var(--fw-font-titel);
	font-weight: 600;
	font-size: 7cqw;
	line-height: 1.3;
	color: #fff;
	white-space: nowrap;
}
.wp-block-image.is-style-fw-kachel-neu figcaption {
	position: absolute;
	left: 0;
	right: 0;
	top: 42%;
	z-index: 2;
	margin: 0;
	padding: 0 2cqw;
	font-family: var(--fw-font-titel);
	font-weight: 700;
	font-size: 20cqw;
	line-height: 1.1;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	white-space: normal;
}
/* Im Editor: Foto sichtbar (wie beim Überfahren auf der Website), Filmstreifen-Grafik darüber */
.editor-styles-wrapper .wp-block-image[class*="is-style-fw-kachel"]:not([class*="kachel-foto"])::after { background-color: transparent; }
.editor-styles-wrapper .wp-block-image.is-style-fw-kachel-neu::after { background-color: rgba(0, 0, 0, 0.35); }

/* ---- Untermenü unter dem Hero (Bilder / Kontakt bzw. Infos / …) ------- */
.fw-subnav { margin-top: 57px; }
.fw-subnav .wp-block-heading {
	font-size: 25px;
	color: #fff;
	text-align: center;
}
.fw-subnav__item { align-items: center; }

/* ---- Runde Pfeil-Buttons --------------------------------------------- */
.wp-block-button.is-style-fw-pfeil .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 4px solid var(--fw-color);
	border-radius: 50%;
	background: #fff;
	color: var(--fw-color);
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}
.wp-block-button.is-style-fw-pfeil .wp-block-button__link::after {
	content: ">";
	display: block;
	transform: rotate(90deg);
	font-family: var(--fw-font-titel);
	font-weight: 700;
	font-size: 40px;
	color: var(--fw-color);
	padding-left: 2px;
}
.wp-block-button.is-style-fw-pfeil .wp-block-button__link:hover {
	background: var(--fw-color);
	border-color: #fff;
}
.wp-block-button.is-style-fw-pfeil .wp-block-button__link:hover::after { color: #fff; }

.wp-block-button.is-style-fw-pfeil-hoch .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 39px;
	height: 39px;
	padding: 0;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--fw-color);
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
}
.wp-block-button.is-style-fw-pfeil-hoch .wp-block-button__link::after {
	content: ">";
	display: block;
	transform: rotate(-90deg);
	font-family: var(--fw-font-titel);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	padding-left: 1px;
}
.wp-block-button.is-style-fw-pfeil-hoch .wp-block-button__link:hover {
	background: #fff;
	border-color: var(--fw-color);
}
.wp-block-button.is-style-fw-pfeil-hoch .wp-block-button__link:hover::after { color: var(--fw-color); }

/* Grosser Textbutton («Anmeldung», «Kontakt») */
.wp-block-button.is-style-fw-gross .wp-block-button__link {
	display: inline-block;
	padding: 6px 30px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: var(--fw-font-titel);
	font-weight: 600;
	font-size: 50px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.wp-block-button.is-style-fw-gross .wp-block-button__link:hover {
	background: #fff;
	color: var(--fw-color);
}

/* ---- Intro-Band ------------------------------------------------------ */
.fw-intro { padding-top: 80px; padding-bottom: 60px; } /* Band 330 px hoch wie Muse (inkl. 10 px Absatzabstand) */
.fw-intro .wp-block-paragraph, .fw-intro p { font-size: 30px; line-height: 1.2; text-align: center; }

/* ---- Bilder: Slideshow ----------------------------------------------- */
.fw-bilder { padding-top: 40px; }
.fw-bilder h2.wp-block-heading { margin-bottom: 52px; }

/* Rahmen 869 x 652 mit 10 px weissem Rand, Bild darin zentriert beschnitten (wie Muse) */
figure.wp-block-gallery.is-style-fw-slideshow {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 869px;
	height: 652px;
	margin: 0 auto;
	border: 10px solid #fff;
	overflow: visible;
	gap: 0;
}
figure.wp-block-gallery.is-style-fw-slideshow figure.wp-block-image {
	display: block;
	width: 849px;
	height: 632px;
	margin: 0;
	overflow: hidden;
}
figure.wp-block-gallery.is-style-fw-slideshow figure.wp-block-image img {
	display: block;
	width: 849px;
	height: 632px;
	max-width: none;
	object-fit: cover;
	object-position: center;
}
/* Vor dem JS: nur das erste Bild sichtbar; danach nur das aktive */
figure.wp-block-gallery.is-style-fw-slideshow:not(.fw-slideshow--ready) figure.wp-block-image:not(:first-child),
figure.wp-block-gallery.is-style-fw-slideshow.fw-slideshow--ready figure.wp-block-image:not(.fw-aktiv) { display: none; }

/* Pfeile ausserhalb des Rahmens */
.fw-slideshow__pfeil {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: var(--fw-font-titel);
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
}
.fw-slideshow__pfeil--zurueck { left: -62px; text-align: left; padding-left: 14px; padding-bottom: 20px; }
.fw-slideshow__pfeil--vor { right: -62px; text-align: right; padding-right: 13px; padding-bottom: 20px; }
.fw-slideshow__pfeil:hover { color: rgba(255, 255, 255, 0.7); }
.fw-slideshow__pfeil:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Vorschaubilder (werden per JS ins weisse Band verschoben): 60 x 45 mit 1 px Rand in 72-px-Zellen */
.fw-bilder-vorschau { padding-top: 47px; padding-bottom: 25px; min-height: 300px; box-sizing: border-box; }
.fw-slideshow__vorschau {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px 0;
	width: 936px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.fw-slideshow__vorschau li { margin: 0; width: 72px; display: flex; justify-content: center; }
.fw-slideshow__vorschau button {
	display: block;
	box-sizing: border-box;
	width: 62px;
	height: 47px;
	padding: 0;
	border: 1px solid #fff;
	background: none;
	cursor: pointer;
	overflow: hidden;
}
.fw-slideshow__vorschau img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fw-slideshow__vorschau button:hover,
.fw-slideshow__vorschau button.fw-aktiv { border: 2px solid var(--fw-color); }

/* ---- Kontakt --------------------------------------------------------- */
.fw-kontakt { padding-top: 40px; }
.fw-kontakt h2.wp-block-heading { margin-bottom: 96px; }

/* Hinweistexte nur im Editor sichtbar */
.fw-hinweis { display: none; }
.editor-styles-wrapper .fw-hinweis { display: block; opacity: 0.6; font-style: italic; }
.fw-kontakt__name { font-size: 30px; text-align: center; margin-bottom: 25px; }
.fw-kontakt__daten { font-size: 18px; font-weight: 600; line-height: 1.35; text-align: center; margin-bottom: 1px; }
.fw-kontakt__daten a { text-decoration: none; }
@media (min-width: 1024px) {
	.fw-kontakt__daten { line-height: 27px; margin-top: -3px; } /* Muse: Mail- und Telefonzeile je 27 px */
}
.fw-kontakt__daten a:hover { text-decoration: underline; }
.fw-kontakt__bio {
	width: 393px;
	max-width: 100%;
	margin: 30px auto 0;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
}
.fw-kontakt__bio a { text-decoration: underline; }
.fw-kontakt .fw-ragt-hinein-klein { margin-top: 183px; }

.wp-block-image.is-style-fw-portrait {
	width: 245px;
	margin: 0 auto;
}
.wp-block-image.is-style-fw-portrait > a,
.wp-block-image.is-style-fw-portrait > figure > a {
	position: relative;
	display: block;
	width: 225px;
	height: 225px;
	border: 10px solid #fff;
	background: #fff;
	transition: transform 0.5s ease;
}
.wp-block-image.is-style-fw-portrait img {
	display: block;
	width: 225px;
	height: 225px;
	object-fit: cover;
}
.wp-block-image.is-style-fw-portrait > a::after,
.wp-block-image.is-style-fw-portrait > figure > a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff url(../img/icons/mail.svg) no-repeat center / 90px 64px;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.wp-block-image.is-style-fw-portrait > a:hover,
.wp-block-image.is-style-fw-portrait > figure > a:hover { transform: scale(0.96); }
.wp-block-image.is-style-fw-portrait > a:hover::after,
.wp-block-image.is-style-fw-portrait > figure > a:hover::after { opacity: 1; }
.editor-styles-wrapper .wp-block-image.is-style-fw-portrait img { border: 10px solid #fff; box-sizing: content-box; }

/* ---- Fussbereich ----------------------------------------------------- */
.fw-footer {
	height: 35px;
	box-sizing: border-box;
	padding-top: 19px;
	background: #fff;
	color: var(--fw-color);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}
.fw-footer p { margin: 0; font-size: 10px; letter-spacing: 0.03em; }
.fw-footer a { color: var(--fw-color); text-decoration: none; }
.fw-footer a:hover { text-decoration: underline; }
.fw-footer__zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 8px; row-gap: 4px; }
.fw-footer__trenner { opacity: 0.6; }

/* ---- Editor-Feinheiten ----------------------------------------------- */
.editor-styles-wrapper { background: var(--fw-color); }
.editor-styles-wrapper .fw-sidenav { display: none; }

/* =========================================================================
   Kursseiten (Tatort / Dokfilm / Musikvideo)
   ========================================================================= */
/* Icons sind einfarbige Formen; sie werden per CSS-Maske in der Seitenfarbe eingefärbt (beliebige Farbe möglich). */
:root { --fw-pdf: url(../img/icons/pdf-tatort-off.svg); --fw-pdf-hover: url(../img/icons/pdf-tatort.svg); --fw-archiv: url(../img/icons/archiv-tatort-zu.svg); --fw-archiv-hover: url(../img/icons/archiv-tatort.svg); }
body:not(.fw-seite-home) .fw-logo { top: 15px; }

/* Hero: Kachel mit Foto links (325 x 581, 10 px Rand), drei Fotos rechts (je 10 px Rand) */
.fw-kurs-hero { padding-top: 57px; }
.fw-kurs-hero__inhalt { align-items: flex-start; gap: 11px !important; }
.fw-kurs-hero .fw-subnav__item { width: 135px; }
@media (min-width: 1024px) {
	/* Muse: Titel bei y 780, Pfeil 7 px darunter (817) – Band endet bei 849 */
	.fw-kurs-hero .fw-subnav { margin-top: 56px; }
	.fw-kurs-hero .fw-subnav__item { gap: 7px !important; }
}
/* Startseite «Bilder / Kontakt» wie Muse: Beschriftungsboxen 107 px breit bei Seiten-x 368 und 549
   (Mitten 422 / 602), Inhaltsbereich beginnt bei Seiten-x 15. Nur Desktop. */
@media (min-width: 1024px) {
	.fw-hero .fw-subnav { justify-content: flex-start !important; gap: 74px !important; padding: 0 0 0 353px !important; }
	.fw-hero .fw-subnav__item { width: 107px; }
}

.wp-block-image[class*="is-style-fw-kachel-foto"] { position: relative; box-sizing: border-box; width: 325px; height: 581px; flex: 0 0 325px; margin: 0 0 0 1px !important; border: 10px solid #fff; overflow: hidden; }
.wp-block-image[class*="is-style-fw-kachel-foto"] img { display: block; width: 317px; height: 597px; max-width: none; object-fit: cover; margin: -8px 0 0 -3px; }
.wp-block-image[class*="is-style-fw-kachel-foto"]::after { content: ""; position: absolute; left: -8px; top: -4px; width: 331px; height: 621px; background: var(--fw-tile-bild) no-repeat 0 0 / 331px 621px; pointer-events: none; }
.wp-block-image.is-style-fw-kachel-foto-tatort     { --fw-tile-bild: url(../img/tiles/filmstreifen-tatort.svg); }
.wp-block-image.is-style-fw-kachel-foto-dokfilm    { --fw-tile-bild: url(../img/tiles/filmstreifen-dokfilm.svg); }
.wp-block-image.is-style-fw-kachel-foto-musikvideo { --fw-tile-bild: url(../img/tiles/filmstreifen-musikvideo.svg); }

/* Kachel als Cover (neue Kursseiten): Foto mit editierbarem Titel statt Filmstreifen-Grafik */
.wp-block-cover.fw-kachel-cover {
	box-sizing: border-box;
	width: 325px;
	flex: 0 0 325px;
	height: 581px;
	min-height: 581px !important;
	margin: 0 0 0 1px !important;
	padding: 0 0 120px;
	border: 10px solid #fff;
	justify-content: center;
}
.wp-block-cover.fw-kachel-cover .wp-block-cover__inner-container { width: 100%; }
.wp-block-cover.fw-kachel-cover .fw-kachel-cover__label {
	display: inline-block;
	margin: 0 auto 6px;
	padding: 0 4px;
	border: 1px dotted #fff;
	font-family: var(--fw-font-titel);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	color: #fff;
}
.wp-block-cover.fw-kachel-cover p.fw-kachel-cover__label { text-align: center; }
.wp-block-cover.fw-kachel-cover .fw-kachel-cover__titel {
	margin: 0;
	font-family: var(--fw-font-titel);
	font-weight: 700;
	font-size: 64px;
	line-height: 1.1;
	color: #fff;
	text-transform: none;
	white-space: normal;
}

.fw-kurs-fotos { width: 657px; flex: 0 0 657px; gap: var(--fw-foto-gap, 12px 10px) !important; }
.fw-kurs-fotos .wp-block-image { margin: 0; border: 10px solid #fff; }
.fw-kurs-fotos img { display: block; object-fit: cover; }

/* Intro-Band Kursseiten */
.fw-kurs-intro { padding-top: 61px; padding-bottom: 40px; }
.fw-intro p + p { padding-top: 10px; } /* Muse: zweiter Absatz 10 px Abstand (Start- und Kursseiten) */

/* Infos */
.fw-infos { padding-top: 40px; }
.fw-infos h2.wp-block-heading { margin-bottom: 52px; }
/* Abstände wie Muse: gemessen ab der linken Kante des zentrierten 994-px-Inhaltsbereichs, nicht ab dem Fensterrand */
.fw-infos__liste { width: 873px; margin-left: calc((100% - 994px) / 2 + 121px) !important; margin-right: 0 !important; }
.fw-infos__liste p { font-size: 25px; line-height: 1.2; margin-bottom: 30px; }
.fw-infos__liste p a { text-decoration: underline; }
.fw-infos__liste p:last-child { margin-bottom: 0; }

/* Ablauf-Tabelle */
.fw-ablauf { margin-left: calc((100% - 994px) / 2 + 118px) !important; margin-right: 0 !important; margin-top: 16px; }
.fw-ablauf__tage { padding-left: 43px; gap: 10px !important; }
.fw-ablauf__tage p { width: 135px; font-size: 25px; line-height: 1.4; text-align: center; margin: 0; }
.fw-ablauf__zeile { gap: 8px !important; margin-top: 7px; align-items: stretch !important; }
.fw-ablauf__zeile + .fw-ablauf__zeile { margin-top: 11px; }
.fw-ablauf__zeile > p:first-child { width: 35px; height: 137px; margin: 0; font-size: 25px; line-height: 1.4; text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); position: relative; top: -25px; } /* Muse: Beschriftung sitzt 25 px über der Zellenmitte */
.fw-ablauf__zellen { gap: 10px !important; }
.fw-ablauf__zelle { width: 135px; min-height: 137px; box-sizing: border-box; background: #fff; color: var(--fw-color); }
.fw-ablauf__zelle p { font-size: 20px; font-weight: 600; line-height: 1.4; text-align: center; padding: 10px 0 0; margin: 0; }
.fw-ablauf__zelle p.has-s-font-size { padding-top: 5px; }
.fw-ablauf__zelle p.has-klein-16-font-size, .fw-ablauf__zelle p.has-klein-13-font-size { padding-top: 5px; }
.fw-ablauf__zelle--frei { background: rgba(255, 255, 255, 0.5); color: #fff; }
.fw-ablauf__stapel { width: 135px; gap: 9px !important; }
.fw-ablauf__zellen { align-items: flex-start !important; }
.fw-ablauf__stapel { align-self: flex-start; height: 137px; flex-wrap: nowrap !important; justify-content: space-between !important; }
.fw-ablauf__stapel .fw-ablauf__zelle { min-height: 0; }
.fw-ablauf__zelle.fw-ablauf__zelle--h68 { min-height: 68px; }
.fw-ablauf__zelle--h68 p:not([class*="-font-size"]) { padding-top: 5px; } /* Muse: zweizeiliger Text oben im Stapel sitzt höher */
.fw-ablauf__zelle.fw-ablauf__zelle--h60 { min-height: 60px; }
.fw-ablauf__zelle.fw-ablauf__zelle--h63 { min-height: 63px; }
.fw-ablauf__zelle.fw-ablauf__zelle--h64 { min-height: 64px; }

.fw-versicherung { width: 802px; margin-left: calc((100% - 994px) / 2 + 120px) !important; margin-right: 0 !important; margin-top: 30px; font-size: 20px; line-height: 1.2; }
.fw-infos .wp-block-buttons { margin-top: 15px; }

/* Info-Blatt (Datei-Block) */
.fw-infoblatt { padding-top: 69px; padding-bottom: 44px; }
.wp-block-file.is-style-fw-infoblatt { text-align: center; margin: 0; font-size: 30px; }
.wp-block-file.is-style-fw-infoblatt a:first-of-type { position: relative; display: inline-block; padding-top: 152px; color: var(--fw-color); font-size: 30px; font-weight: 300; line-height: 1.2; text-decoration: none; }
.wp-block-file.is-style-fw-infoblatt a:first-of-type::before { content: ""; position: absolute; left: 50%; top: 0; width: 100px; height: 123px; transform: translateX(-50%); background-color: var(--fw-color); -webkit-mask: var(--fw-pdf) no-repeat center top / contain; mask: var(--fw-pdf) no-repeat center top / contain; }
.wp-block-file.is-style-fw-infoblatt a:first-of-type:hover::before { -webkit-mask-image: var(--fw-pdf-hover); mask-image: var(--fw-pdf-hover); }
.wp-block-file.is-style-fw-infoblatt .wp-block-file__button,
.wp-block-file.is-style-fw-infoblatt object { display: none; }

/* FilmBeispiele (Vimeo) */
.fw-filmbeispiele { padding-top: 40px; }
.fw-filmbeispiele h2.wp-block-heading { margin-bottom: 112px; }
.fw-videos { width: 1014px; max-width: none; flex-wrap: wrap !important; gap: 15px 14px !important; }
.fw-videos > .wp-block-embed { flex: 0 0 500px !important; width: 500px; max-width: none; margin: 0; border: 10px solid #fff; box-sizing: border-box; }
.fw-videos .wp-block-embed__wrapper { position: relative; width: 480px; height: 274px; padding: 0; }
.fw-videos .wp-block-embed__wrapper::before { display: none; }
.fw-videos .wp-block-embed .wp-block-embed__wrapper iframe { position: absolute; inset: 0 auto auto 0; width: 480px; height: 270px; } /* wie Muse: 4 px Rahmen unter dem Video */

/* Filmarchiv (Button mit Icon) */
.fw-filmarchiv { padding-top: 72px; padding-bottom: 56px; }
.wp-block-button.is-style-fw-archiv .wp-block-button__link { position: relative; display: block; padding: 136px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--fw-color); font-family: var(--fw-font-text); font-size: 30px; font-weight: 300; line-height: 1.2; text-decoration: none; box-shadow: none; }
/* Schublade wie Muse: Box 120 x 121, beide Bilder mit «contain» oben mittig. Geschlossen (313 x 237) und offen
   (313 x 316) sind gleich breit, dadurch gleicher Massstab – die offene Schublade wächst nur nach unten. */
.wp-block-button.is-style-fw-archiv .wp-block-button__link::before { content: ""; position: absolute; left: 50%; top: 0; width: 120px; height: 121px; transform: translateX(-50%); background-color: var(--fw-color); -webkit-mask: var(--fw-archiv) no-repeat center top / contain; mask: var(--fw-archiv) no-repeat center top / contain; }
.wp-block-button.is-style-fw-archiv .wp-block-button__link:hover::before { -webkit-mask-image: var(--fw-archiv-hover); mask-image: var(--fw-archiv-hover); }

/* Anmelden */
.fw-anmelden { padding-top: 40px; }
.fw-anmelden h2.wp-block-heading { margin-bottom: 128px; }
.fw-anmelden__text { font-size: 30px; line-height: 1.4; text-align: center; }
.fw-anmelden__text a { text-decoration: underline; }
.wp-block-button.is-style-fw-gross .wp-block-button__link { display: block; box-sizing: content-box; width: 280px; height: 120px; padding: 4px 0 0; border: 10px solid #fff; border-radius: 0; background: transparent; color: #fff; font-family: var(--fw-font-titel); font-weight: 600; font-size: 50px; line-height: 60px; text-transform: uppercase; text-align: center; text-decoration: none; box-shadow: none; transition: background-color 0.5s ease, color 0.5s ease; }
.wp-block-button.is-style-fw-gross .wp-block-button__link:hover { background: #fff; color: var(--fw-color); }
.fw-schukulu-logo { margin: 39px auto 0; width: 218px; }
.fw-schukulu-logo a { display: block; } /* sonst 5 px Leerzeile unter dem Logo */
.fw-schukulu-logo img { display: block; box-sizing: content-box; width: 206px; height: 130px; padding: 6px 6px 5px; } /* Muse: Rahmen beim Hover mit Abstand zum Logo */
.fw-schukulu-logo a:hover img { outline: 10px solid #fff; }

/* ---- Dokfilm: abweichende Masse aus dokfilm.html ---------------------- */
body.fw-seite-dokfilm .fw-kurs-fotos { --fw-foto-gap: 11px 11px; }
body.fw-seite-dokfilm .fw-kurs-hero__inhalt { gap: 12px !important; }
body.fw-seite-dokfilm .wp-block-image[class*="is-style-fw-kachel-foto"] { margin-left: 0 !important; }
body.fw-seite-dokfilm .wp-block-image[class*="is-style-fw-kachel-foto"] img { width: 325px; height: 612px; margin: -33px 0 0 -10px; }
body.fw-seite-dokfilm .wp-block-image[class*="is-style-fw-kachel-foto"]::after { left: -17px; top: -15px; width: 329px; height: 617px; background-size: 329px 617px; }
body.fw-seite-dokfilm .fw-infos { padding-top: 39px; }
body.fw-seite-dokfilm .fw-infos h2.wp-block-heading { margin-bottom: 36px; }
body.fw-seite-dokfilm .fw-ablauf { margin-top: -8px; margin-left: calc((100% - 994px) / 2 + 113px) !important; }
body.fw-seite-dokfilm .fw-versicherung { margin-top: 59px; }
body.fw-seite-dokfilm .fw-infos .wp-block-buttons { margin-top: 60px; }
body.fw-seite-dokfilm .fw-infoblatt { padding-top: 72px; padding-bottom: 41px; }
body.fw-seite-dokfilm .fw-filmbeispiele h2.wp-block-heading { margin-bottom: 63px; }
body.fw-seite-dokfilm .fw-filmarchiv { padding-top: 68px; padding-bottom: 63px; }
body.fw-seite-dokfilm .wp-block-button.is-style-fw-archiv .wp-block-button__link { padding-top: 133px; }
body.fw-seite-dokfilm .fw-anmelden { padding-top: 34px; }
body.fw-seite-dokfilm .fw-schukulu-logo { margin-top: 38px; }
@media (min-width: 1024px) {
	/* Muse-Dokfilm: Einleitung 847–1157 (Pfeile ragen 34 px hinein), Filmarchiv-Band beginnt 29 px über der Pfeilunterkante */
	body.fw-seite-dokfilm .fw-kurs-hero .fw-subnav { margin-bottom: -34px !important; }
	body.fw-seite-dokfilm .fw-kurs-intro { padding-top: 63px; padding-bottom: 47px; }
	body.fw-seite-dokfilm .fw-filmbeispiele .fw-ragt-hinein { margin-bottom: -29px !important; }
	body.fw-seite-dokfilm .fw-ablauf__zeile > p:first-child { top: -27px; }
	/* Anmelden-Block liegt im Original 13 px rechts der Mitte, der Pfeil 3 px */
	body.fw-seite-dokfilm .fw-anmelden > :not(.fw-ragt-hinein-klein) { position: relative; left: 13px; }
	body.fw-seite-dokfilm .fw-anmelden > .fw-ragt-hinein-klein { left: 3px; }
	body.fw-seite-dokfilm .fw-schukulu-logo + .fw-anmelden__text { margin-top: 34px !important; }
}

/* ---- Musikvideo: abweichende Masse aus musikvideo.html ---------------- */
body.fw-seite-musikvideo .fw-kurs-fotos { --fw-foto-gap: 11px 11px; }
body.fw-seite-musikvideo .fw-kurs-hero__inhalt { gap: 11px !important; }
body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"] { margin-left: 0 !important; width: 326px; flex-basis: 326px; }
body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"] img { width: 325px; height: 612px; margin: -6px 0 0 -10px; }
body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"]::after { left: -9px; top: -10px; width: 325px; height: 264px; background-size: 325px 611px; background-position: center top; }
body.fw-seite-musikvideo .fw-kurs-intro { padding-top: 60px; padding-bottom: 50px; }
body.fw-seite-musikvideo .fw-kurs-intro p { width: 1024px; max-width: 1024px !important; }
body.fw-seite-musikvideo .fw-infos h2.wp-block-heading { margin-bottom: 29px; }
body.fw-seite-musikvideo .fw-infos__liste { margin-left: calc((100% - 994px) / 2 + 120px) !important; }
body.fw-seite-musikvideo .fw-ablauf { margin-top: -4px; margin-left: calc((100% - 994px) / 2 + 113px) !important; }
body.fw-seite-musikvideo .fw-versicherung { margin-top: 30px; }
body.fw-seite-musikvideo .fw-infos .wp-block-buttons { margin-top: 47px; }
@media (min-width: 1024px) {
	/* Muse-Musikvideo: Pfeile ragen 31 px in Einleitung bzw. Filmarchiv, Fussband 32 px hoch (Pfeil ragt 16 px hinein),
	   Sprungmarke «Filmbeispiele» liegt 23 px über dem Band */
	body.fw-seite-musikvideo .fw-kurs-hero .fw-subnav { margin-bottom: -31px !important; }
	body.fw-seite-musikvideo .fw-filmbeispiele .fw-ragt-hinein { margin-bottom: -31px !important; }
	body.fw-seite-musikvideo .fw-anmelden .fw-ragt-hinein-klein { margin-bottom: -16px !important; }
	body.fw-seite-musikvideo .fw-footer { height: 32px; padding-top: 15px; }
	body.fw-seite-musikvideo .fw-ablauf__zeile > p:first-child { top: -27px; }
	body.fw-seite-musikvideo .fw-ablauf__zeile + .fw-ablauf__zeile { margin-top: 10px; }
	body.fw-seite-musikvideo #filmbeispiele { scroll-margin-top: 23px; }
}
body.fw-seite-musikvideo .fw-infoblatt { padding-top: 68px; padding-bottom: 44px; }
body.fw-seite-musikvideo .fw-filmbeispiele h2.wp-block-heading { margin-bottom: 114px; }
body.fw-seite-musikvideo .fw-filmarchiv { padding-top: 77px; padding-bottom: 41px; }
body.fw-seite-musikvideo .wp-block-button.is-style-fw-archiv .wp-block-button__link { padding-top: 146px; }
body.fw-seite-musikvideo .fw-anmelden { padding-top: 49px; }
body.fw-seite-musikvideo .fw-anmelden h2.wp-block-heading { margin-bottom: 100px; }
.wp-block-button.is-style-fw-gross.fw-gross--einzeilig .wp-block-button__link { width: 242px; height: 60px; }

/* ---- Rechtsseiten (Impressum, Datenschutz) --------------------------- */
.fw-recht { padding: 60px 0 80px; }
.fw-recht h2.wp-block-heading { margin-bottom: 40px; }
.fw-recht h3 { margin: 30px 0 8px; font-size: 25px; }
.fw-recht p { max-width: 760px; margin: 0 auto 12px; line-height: 1.5; }
.fw-recht h3 { max-width: 760px; margin-left: auto; margin-right: auto; }
.fw-recht a { text-decoration: underline; }

/* ---- Feste Breite wie im Muse-Original (ab 1024 px: Desktop 1:1) ------ */
@media (min-width: 1024px) {
	body { min-width: 1024px; }
	.wp-block-group.alignfull, .fw-header, .fw-footer { min-width: 1024px; }
}

/* =========================================================================
/* =========================================================================
   Mobile und Tablet (unter 1024 px): responsives Layout
   Abstände sind hier bewusst kleiner als im Desktop-Original (dort sind sie
   für 1024 px Breite gemessen und wirken auf dem Handy als Löcher).
   ========================================================================= */
@media (max-width: 1023px) {
	body { min-width: 0; }
	.wp-block-group.alignfull, .fw-header, .fw-footer { min-width: 0; }
	.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) { max-width: 100% !important; } /* Rand kommt vom Band (16 px) */
	.entry-content > .alignfull { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.fw-sidenav { display: none; }

	/* Einheitliche Abstände: Titel, Sprung-Buttons (Inline-Abstände der Blöcke überschreiben) */
	section.alignfull > h2.wp-block-heading { margin-bottom: 28px !important; }
	.wp-block-buttons.fw-ragt-hinein { margin-top: 32px !important; }
	.wp-block-buttons.fw-ragt-hinein-klein { margin-top: 40px !important; }
	.fw-hero .fw-subnav, .fw-kurs-hero .fw-subnav { margin-top: 28px !important; }

	/* Kopfbereich */
	.fw-header { height: auto; padding: 12px 16px; }
	.fw-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; width: 100%; }
	.fw-logo { position: static; width: 220px; height: 35px; -webkit-mask-size: 220px 35px; mask-size: 220px 35px; flex: 0 0 auto; }
	body:not(.fw-seite-home) .fw-logo { top: auto; }
	.fw-nav { position: static; gap: 6px; }
	.fw-nav__item { width: 34px; height: 34px; background-size: 34px 34px; }

	/* Startseite: Kacheln zu zweit (Tablet) bzw. untereinander (Handy) */
	.fw-hero { padding-top: 20px; }
	.fw-kacheln { flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }
	.fw-kacheln .wp-block-image[class*="is-style-fw-kachel"] { flex: 0 0 calc(33.333% - 11px) !important; max-width: 325px; } /* Tablet: drei nebeneinander */
	.fw-subnav { flex-wrap: wrap !important; gap: 24px !important; padding: 0 !important; }
	.fw-hero .fw-subnav { padding-right: 0 !important; }
	.fw-kurs-hero .fw-subnav__item { width: auto; }

	/* Intro */
	.fw-intro { padding-top: 64px; padding-bottom: 36px; } /* Sprung-Button ragt 32 px hinein */
	.fw-intro p, .fw-intro .wp-block-paragraph, body.fw-seite-musikvideo .fw-kurs-intro p { font-size: 21px; line-height: 1.35; width: auto; max-width: 100% !important; }
	.fw-intro p + p { padding-top: 12px !important; }

	/* Galerie */
	.fw-bilder { padding-top: 32px; }
	/* Seitenverhältnis direkt am Bild (849 x 632 wie der Desktop-Rahmen). Safari löst «height: 100 %» in einer
	   aspect-ratio-Box nicht auf und nimmt sonst das Format des Fotos – das Bild ragte dann unten aus dem Rahmen. */
	figure.wp-block-gallery.is-style-fw-slideshow { width: 100%; height: auto; aspect-ratio: auto; }
	figure.wp-block-gallery.is-style-fw-slideshow figure.wp-block-image { width: 100% !important; height: auto; }
	figure.wp-block-gallery.is-style-fw-slideshow figure.wp-block-image img { width: 100%; height: auto; aspect-ratio: 849 / 632; flex: none; }
	.fw-slideshow__pfeil--zurueck { left: 0; width: 44px; padding: 0 0 0 4px; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent); }
	.fw-slideshow__pfeil--vor { right: 0; width: 44px; padding: 0 4px 0 0; background: linear-gradient(270deg, rgba(0,0,0,.35), transparent); }
	.fw-bilder .wp-block-buttons.fw-ragt-hinein { margin-top: 28px !important; }
	.fw-bilder-vorschau { min-height: 0; padding: 52px 16px 24px; }
	.fw-slideshow__vorschau { width: 100%; justify-content: center; gap: 8px 0; }

	/* Kontakt */
	.fw-kontakt { padding-top: 32px; }
	.fw-kontakt__name { margin-bottom: 12px; }
	.fw-kontakt__bio { width: auto; max-width: 100%; margin-top: 20px; font-size: 19px; }
	.fw-kontakt .wp-block-buttons.fw-ragt-hinein-klein { margin-top: 36px !important; }

	/* Kursseiten: Kopfbereich. Kachel skaliert mit (max. 325 px, Filmstreifen-Grafik in Prozent),
	   darunter das grosse Foto, dann die zwei kleinen nebeneinander wie im Original. */
	.fw-kurs-hero { padding-top: 20px; }
	.fw-kurs-hero__inhalt { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
	.wp-block-image[class*="is-style-fw-kachel-foto"], .wp-block-cover.fw-kachel-cover { margin: 0 auto !important; }
	.wp-block-image[class*="is-style-fw-kachel-foto"] { width: min(325px, 100%) !important; flex: 0 0 auto !important; height: auto !important; aspect-ratio: 325 / 581; }
	.wp-block-image[class*="is-style-fw-kachel-foto"] > a { display: block; position: absolute; inset: 0; }
	.wp-block-image[class*="is-style-fw-kachel-foto"] img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; }
	.wp-block-image[class*="is-style-fw-kachel-foto"]::after { left: -2.5% !important; top: -0.7% !important; width: 102% !important; height: 107% !important; background-size: 100% 100% !important; background-position: 0 0 !important; }
	body.fw-seite-dokfilm .wp-block-image[class*="is-style-fw-kachel-foto"], body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"] { margin: 0 auto !important; width: min(325px, 100%) !important; flex-basis: auto !important; }
	body.fw-seite-musikvideo .wp-block-image[class*="is-style-fw-kachel-foto"]::after { height: 45.5% !important; background-size: 100% auto !important; background-position: center top !important; }
	.wp-block-cover.fw-kachel-cover { width: min(325px, 100%); flex: 0 0 auto; height: auto; min-height: 0 !important; aspect-ratio: 325 / 581; padding-bottom: 20%; }
	.wp-block-cover.fw-kachel-cover .fw-kachel-cover__titel { font-size: clamp(40px, 19vw, 64px); }
	.fw-kurs-fotos { width: 100% !important; flex: 1 1 100% !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; }
	.fw-kurs-fotos .wp-block-image { flex: 1 1 100% !important; min-width: 0; box-sizing: border-box; }
	.fw-kurs-fotos .wp-block-image.fw-foto-links, .fw-kurs-fotos .wp-block-image.fw-foto-rechts { flex: 1 1 calc(50% - 6px) !important; }
	.fw-kurs-fotos img { width: 100% !important; height: auto !important; aspect-ratio: 295 / 248; }
	.fw-kurs-fotos .fw-foto-gross img { aspect-ratio: 637 / 282; }

	/* Infos: Label auf eigener Zeile, kompakter Text */
	.fw-infos { padding-top: 32px !important; }
	.fw-infos__liste, body.fw-seite-musikvideo .fw-infos__liste { width: auto !important; margin-left: 0 !important; } /* Musikvideo hat am Desktop 120 px !important */
	.fw-infos__liste p { font-size: 17px; line-height: 1.4; margin-bottom: 14px; }
	.fw-infos__liste p strong { display: block; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 2px; }
	.fw-infos__liste p:last-child strong { margin-bottom: 0; }
	.fw-versicherung { width: auto !important; margin: 20px 0 0 !important; font-size: 16px; line-height: 1.4; }
	.fw-versicherung strong { display: block; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 2px; }
	.fw-infos .wp-block-buttons.fw-ragt-hinein { margin-top: 28px !important; }

	/* Ablauf unter 1024 px: Tag für Tag. Pro Tag eine Überschrift («Montag»), darunter Vormittag und Nachmittag als
	   zwei Kärtchen mit eigener Beschriftung. Reine CSS-Umordnung der bestehenden Blöcke: Zeilen und Zellgruppen werden
	   mit display: contents aufgelöst, jede Zelle per nth-child ins Raster gesetzt (Tag n: Kopf in Zeile 2n-1, Kärtchen
	   in Zeile 2n; bis 7 Tage). Die Zeilenbeschriftungen «Vormittag/Nachmittag» der Tabelle werden durch die
	   Kärtchen-Beschriftung ersetzt. */
	body.fw-seite-dokfilm .fw-ablauf, body.fw-seite-musikvideo .fw-ablauf { margin: 14px 0 0 !important; }
	.fw-ablauf { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: stretch; margin: 14px 0 0 !important; padding: 0; overflow: visible; min-width: 0; }
	.fw-ablauf__tage, .fw-ablauf__zeile, .fw-ablauf__zellen { display: contents !important; }
	.fw-ablauf__zeile > p:first-child { display: none !important; }
	.fw-ablauf__tage p { grid-column: 1 / -1; width: auto; margin: 14px 0 0 !important; padding: 0 0 2px; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; text-align: left; }
	.fw-ablauf__tage p:first-child { margin-top: 0 !important; }
	.fw-ablauf__tage p:nth-child(1) { grid-row: 1; } .fw-ablauf__tage p:nth-child(2) { grid-row: 3; } .fw-ablauf__tage p:nth-child(3) { grid-row: 5; }
	.fw-ablauf__tage p:nth-child(4) { grid-row: 7; } .fw-ablauf__tage p:nth-child(5) { grid-row: 9; } .fw-ablauf__tage p:nth-child(6) { grid-row: 11; } .fw-ablauf__tage p:nth-child(7) { grid-row: 13; }
	.fw-ablauf > :nth-child(2) .fw-ablauf__zellen > * { grid-column: 1; }
	.fw-ablauf > :nth-child(3) .fw-ablauf__zellen > * { grid-column: 2; }
	.fw-ablauf__zellen > :nth-child(1) { grid-row: 2; } .fw-ablauf__zellen > :nth-child(2) { grid-row: 4; } .fw-ablauf__zellen > :nth-child(3) { grid-row: 6; }
	.fw-ablauf__zellen > :nth-child(4) { grid-row: 8; } .fw-ablauf__zellen > :nth-child(5) { grid-row: 10; } .fw-ablauf__zellen > :nth-child(6) { grid-row: 12; } .fw-ablauf__zellen > :nth-child(7) { grid-row: 14; }
	.fw-ablauf__zelle { width: auto; min-height: 0 !important; height: auto !important; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch !important; padding: 8px 10px 10px; }
	.fw-ablauf__zelle p { margin-left: 0 !important; margin-right: 0 !important; font-size: 15px; line-height: 1.3; text-align: left !important; padding: 0 !important; overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
	.fw-ablauf__zelle p.has-s-font-size, .fw-ablauf__zelle p.has-klein-16-font-size, .fw-ablauf__zelle p.has-klein-13-font-size { font-size: 14px !important; }
	/* Kärtchen-Beschriftung: am einzelnen Kärtchen bzw. am ersten Kärtchen eines Stapels */
	.fw-ablauf__zellen > .fw-ablauf__zelle::before,
	.fw-ablauf__stapel > .fw-ablauf__zelle:first-child::before { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
	.fw-ablauf > :nth-child(2) .fw-ablauf__zellen > .fw-ablauf__zelle::before,
	.fw-ablauf > :nth-child(2) .fw-ablauf__stapel > .fw-ablauf__zelle:first-child::before { content: "Vormittag"; }
	.fw-ablauf > :nth-child(3) .fw-ablauf__zellen > .fw-ablauf__zelle::before,
	.fw-ablauf > :nth-child(3) .fw-ablauf__stapel > .fw-ablauf__zelle:first-child::before { content: "Nachmittag"; }
	.fw-ablauf__zelle--frei::before { opacity: 0.85 !important; }
	.fw-ablauf__stapel { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; width: auto; height: auto !important; gap: 6px !important; align-self: stretch; }
	.fw-ablauf__stapel .fw-ablauf__zelle { flex: 1 1 auto; width: auto !important; }

	/* Info-Blatt und Filmarchiv */
	.fw-infoblatt { padding: 64px 0 40px !important; }
	.wp-block-file.is-style-fw-infoblatt a:first-of-type { padding-top: 130px; font-size: 24px; }
	.wp-block-file.is-style-fw-infoblatt a:first-of-type::before { width: 84px; height: 104px; }
	.fw-filmarchiv { padding: 64px 0 40px !important; }
	.wp-block-button.is-style-fw-archiv .wp-block-button__link { padding-top: 116px !important; font-size: 24px; }
	.wp-block-button.is-style-fw-archiv .wp-block-button__link::before { width: 103px; height: 104px; }

	/* Videos */
	.fw-filmbeispiele { padding-top: 32px; }
	.fw-videos { width: 100% !important; max-width: 100%; gap: 16px !important; }
	.fw-videos > .wp-block-embed { flex: 1 1 100% !important; width: 100%; max-width: 500px; margin: 0 auto; }
	.fw-videos .wp-block-embed__wrapper { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.fw-videos .wp-block-embed .wp-block-embed__wrapper iframe { width: 100%; height: 100%; }

	/* Anmelden */
	.fw-anmelden { padding-top: 32px !important; }
	.fw-anmelden__text { width: auto; max-width: 100%; font-size: 21px; line-height: 1.35; }
	.fw-anmelden__text br { display: none; } /* fester Umbruch aus dem Original passt nicht zur schmalen Breite */
	.fw-anmelden .wp-block-buttons { margin-top: 28px !important; }
	.fw-schukulu-logo { margin-top: 28px !important; }
	.fw-anmelden .wp-block-buttons.fw-ragt-hinein-klein { margin-top: 36px !important; }

	/* Rechtsseiten und Fussbereich */
	.fw-recht { padding: 40px 0 56px; }
	.fw-recht h3 { margin-top: 24px; font-size: 22px; }
	.fw-recht p, .fw-recht h3 { max-width: 100%; }
	.fw-footer { height: auto; padding: 18px 16px 22px; line-height: 1.6; }
	.fw-footer p { font-size: 12px; }
	.fw-footer__copy { flex: 0 0 100%; text-align: center; }
	.fw-footer__copy + .fw-footer__trenner { display: none; }
}

/* Handy */
@media (max-width: 600px) {
	section.alignfull > h2.wp-block-heading { font-size: 28px; white-space: normal; margin-bottom: 22px !important; }
	.fw-header__inner { flex-wrap: wrap; justify-content: center; }
	.fw-kacheln .wp-block-image[class*="is-style-fw-kachel"] { flex: 0 0 100% !important; max-width: 325px; } /* Handy: untereinander */
	.fw-slideshow__vorschau li { width: 25%; }
	.fw-slideshow__vorschau button { width: calc(100% - 8px); height: auto; aspect-ratio: 62 / 47; }
	.fw-subnav { gap: 12px 10px !important; }
	.fw-subnav .wp-block-heading { font-size: 18px !important; } /* Preset-Klasse hat !important */
	.fw-kurs-hero .fw-subnav .wp-block-heading { font-size: 16px !important; }
	.fw-intro { padding-top: 56px; padding-bottom: 32px; }
	.fw-intro p, .fw-intro .wp-block-paragraph, body.fw-seite-musikvideo .fw-kurs-intro p { font-size: 18px; line-height: 1.4; }
	.wp-block-file.is-style-fw-infoblatt a:first-of-type, .wp-block-button.is-style-fw-archiv .wp-block-button__link { font-size: 21px; }
	.fw-infoblatt, .fw-filmarchiv { padding-bottom: 32px !important; }
	.fw-kontakt__bio { font-size: 18px; }
	.fw-infos__liste p { font-size: 16px; }
	.fw-anmelden__text { font-size: 18px; }
	.fw-ablauf__tage p { font-size: 16px; }
	.fw-ablauf__zelle p { font-size: 14px; }
	.fw-ablauf__zelle p.has-s-font-size, .fw-ablauf__zelle p.has-klein-16-font-size, .fw-ablauf__zelle p.has-klein-13-font-size { font-size: 13px !important; }
	.wp-block-button.is-style-fw-gross .wp-block-button__link { width: auto; height: auto; min-height: 60px; padding: 4px 20px 0; font-size: 36px; line-height: 1.4; white-space: normal; }
	.fw-kontakt__name { font-size: 26px; }
	.fw-kontakt__daten { font-size: 16px; }
}