/*
Theme Name:   Feuerwehr Elterlein
Description:  Eigenes, schlankes Theme für feuerwehr-elterlein.de. Bildet die Optik des bisherigen The7-Layouts nach, ohne Page-Builder und Slider-Plugin. Vorhandene WPBakery-, The7- und Ultimate-Addons-Shortcodes in den Inhalten werden vom Theme selbst dargestellt.
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 7.1
Text Domain:  ffe
*/

/* ==========================================================================
   Grundlagen
   ========================================================================== */

@font-face {
	font-family: "Bree Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bree-serif-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bree Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/bree-serif-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--ffe-schwarz: #000;
	--ffe-dunkel: #1e1e1e;
	--ffe-weiss: #fff;
	--ffe-hell: #ebecef;
	--ffe-gelb: #e7ff05;
	--ffe-rot: #ed3200;
	--ffe-rot-titel: #dd3333;
	--ffe-text: #fff;
	--ffe-gedaempft: #b9b9b9;
	--ffe-schrift: Tahoma, Helvetica, Arial, Verdana, sans-serif;
	--ffe-titelschrift: "Bree Serif", Helvetica, Arial, Verdana, sans-serif;
	--ffe-breite: 1040px;
	--ffe-rand: 50px;
	--ffe-kopf-hoehe: 100px;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ffe-kopf-hoehe) + 16px); }

body {
	margin: 0;
	background: var(--ffe-schwarz);
	color: var(--ffe-text);
	font: 15px/27px var(--ffe-schrift);
}

img, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; }

a { color: var(--ffe-gelb); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ffe-gelb); outline-offset: 2px; }

p { margin: 0 0 10px; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 10px;
	font-family: var(--ffe-titelschrift);
	font-weight: 400;
	color: var(--ffe-weiss);
}
/* Größen wie sie The7 tatsächlich ausgegeben hat (h3 war dort kleiner als h4). */
h1 { font-size: 47px; line-height: 53px; }
h2 { font-size: 37px; line-height: 43px; }
h3 { font-size: 17px; line-height: 20px; color: var(--ffe-hell); }
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 20px; line-height: 25px; }
h6 { font-size: 14px; line-height: 23px; }

ul, ol { margin: 0 0 10px; padding-left: 20px; }
table { border-collapse: collapse; width: 100%; margin: 0 0 20px; }
th, td { padding: 6px 10px; border-bottom: 1px solid #333; text-align: left; vertical-align: top; }
hr { border: 0; border-top: 1px solid #333; margin: 20px 0; }
blockquote { margin: 0 0 20px; padding-left: 20px; border-left: 3px solid var(--ffe-gelb); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	clip: auto; width: auto; height: auto; margin: 0;
	position: fixed !important; top: 10px; left: 10px; z-index: 1000;
	padding: 10px 16px; background: var(--ffe-gelb); color: #000;
}

.ffe-wrap {
	width: 100%;
	max-width: calc(var(--ffe-breite) + 2 * var(--ffe-rand));
	margin: 0 auto;
	padding: 0 var(--ffe-rand);
}

.alignleft { float: left; margin: 0 20px 10px 0; }
.alignright { float: right; margin: 0 0 10px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--ffe-gedaempft); }

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.ffe-kopf {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ffe-schwarz);
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, .07);
}
body.admin-bar .ffe-kopf { top: 32px; }

.ffe-kopf__innen {
	display: flex;
	align-items: center;
	gap: 30px;
	min-height: var(--ffe-kopf-hoehe);
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 40px;
}

.ffe-logo { flex: none; display: block; line-height: 0; }
.ffe-logo img { width: 320px; max-width: 100%; height: auto; }

.ffe-kopf__werkzeuge { display: flex; align-items: center; gap: 14px; margin-left: 10px; }
.ffe-icon-link, .ffe-icon-knopf {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0;
	color: var(--ffe-gelb); background: none; border: 0; cursor: pointer;
}
.ffe-icon-link:hover, .ffe-icon-knopf:hover { color: var(--ffe-weiss); text-decoration: none; }
.ffe-icon-link svg, .ffe-icon-knopf svg { width: 18px; height: 18px; fill: currentColor; }

.ffe-suche {
	display: none;
	position: absolute; top: 100%; right: 0; left: 0;
	background: rgba(0, 0, 0, .95);
	border-top: 1px solid var(--ffe-gelb);
	padding: 16px 40px;
}
.ffe-suche.ist-offen { display: block; }
.ffe-suche form { display: flex; gap: 10px; max-width: 600px; margin: 0 0 0 auto; }
.ffe-suche input[type=search] {
	flex: 1; padding: 8px 12px; font: inherit;
	background: #fff; color: #222; border: 1px solid #bbb; border-radius: 2px;
}

/* Hauptnavigation (Desktop) */
.ffe-nav { margin-left: auto; }
.ffe-nav ul { list-style: none; margin: 0; padding: 0; }
.ffe-menue { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 22px; }
.ffe-menue > li { position: relative; }
.ffe-menue > li > a,
.ffe-menue > li > .ffe-menue__gruppe {
	display: flex; align-items: center; gap: 4px;
	padding: 18px 0 14px;
	font: 17px/21px var(--ffe-titelschrift);
	text-transform: uppercase;
	color: var(--ffe-weiss);
	background: none; border: 0; cursor: pointer;
	position: relative;
}
.ffe-menue > li > a::before,
.ffe-menue > li > .ffe-menue__gruppe::before {
	content: ""; position: absolute; left: 0; right: 0; top: 8px;
	height: 2px; background: var(--ffe-gelb);
	transform: scaleX(0); transition: transform .2s;
}
.ffe-menue > li:hover > a,
.ffe-menue > li:hover > .ffe-menue__gruppe,
.ffe-menue > li > a:focus-visible,
.ffe-menue > li > .ffe-menue__gruppe:focus-visible,
.ffe-menue > li.ist-aktiv > a,
.ffe-menue > li.ist-aktiv > .ffe-menue__gruppe { color: var(--ffe-gelb); text-decoration: none; }
.ffe-menue > li.ist-aktiv > a::before,
.ffe-menue > li.ist-aktiv > .ffe-menue__gruppe::before,
.ffe-menue > li:hover > a::before,
.ffe-menue > li:hover > .ffe-menue__gruppe::before { transform: scaleX(1); }

.ffe-menue__pfeil { width: 8px; height: 8px; fill: currentColor; opacity: .8; }
.ffe-menue svg.ffe-menue__icon { width: 15px; height: 15px; fill: currentColor; }

.ffe-menue .sub-menu {
	display: none;
	position: absolute; top: 100%; left: -10px;
	width: 300px; padding: 10px;
	background: rgba(0, 0, 0, .85);
	box-shadow: 0 0 4px rgba(0, 0, 0, .2);
	z-index: 10;
}
.ffe-menue .sub-menu .sub-menu { top: -10px; left: 100%; }
.ffe-menue li:hover > .sub-menu,
.ffe-menue li.ist-offen > .sub-menu,
.ffe-menue li:focus-within > .sub-menu { display: block; }
.ffe-menue .sub-menu li { position: relative; }
.ffe-menue .sub-menu a,
.ffe-menue .sub-menu .ffe-menue__gruppe {
	display: flex; justify-content: space-between; align-items: center; width: 100%;
	padding: 5px 8px; margin-bottom: 2px;
	font: 15px/23px var(--ffe-schrift);
	color: var(--ffe-gelb); text-align: left;
	background: none; border: 0; cursor: pointer;
}
.ffe-menue .sub-menu a:hover,
.ffe-menue .sub-menu a:focus-visible,
.ffe-menue .sub-menu .ffe-menue__gruppe:hover,
.ffe-menue .sub-menu li.ist-aktiv > a { background: rgba(231, 255, 5, .07); text-decoration: none; }
.ffe-menue .sub-menu .ffe-menue__pfeil { transform: rotate(-90deg); }

.ffe-menue-knopf { display: none; }

/* Mobile Navigation */
@media (max-width: 1300px) {
	.ffe-kopf__innen { padding: 0 20px; gap: 12px; min-height: 70px; }
	:root { --ffe-kopf-hoehe: 70px; }
	.ffe-logo img { width: 240px; }
	.ffe-menue-knopf { display: inline-flex; order: 3; }
	.ffe-menue-knopf svg { width: 24px; height: 24px; }
	.ffe-kopf__werkzeuge { margin-left: auto; }

	.ffe-nav {
		display: none;
		position: fixed; inset: 0 0 0 auto; z-index: 200;
		width: min(400px, 100%);
		overflow-y: auto;
		padding: 70px 24px 40px;
		background: #0b0b0b;
		border-left: 1px solid var(--ffe-gelb);
	}
	body.admin-bar .ffe-nav { top: 46px; }
	.ffe-nav.ist-offen { display: block; }
	.ffe-nav__schliessen { position: absolute; top: 18px; right: 18px; }

	.ffe-menue { display: block; }
	.ffe-menue > li > a,
	.ffe-menue > li > .ffe-menue__gruppe { width: 100%; justify-content: flex-start; gap: 8px; padding: 10px 0; border-bottom: 1px solid #222; }
	.ffe-menue .ffe-menue__pfeil { margin-left: auto; }
	.ffe-menue > li > a::before,
	.ffe-menue > li > .ffe-menue__gruppe::before { display: none; }
	.ffe-menue .sub-menu,
	.ffe-menue .sub-menu .sub-menu { position: static; width: auto; padding: 4px 0 8px 14px; background: none; box-shadow: none; }
	.ffe-menue li:hover > .sub-menu,
	.ffe-menue li:focus-within > .sub-menu { display: none; }
	.ffe-menue li.ist-offen > .sub-menu { display: block; }
	.ffe-menue .sub-menu .ffe-menue__pfeil { transform: none; }
	.ffe-menue li.ist-offen > a .ffe-menue__pfeil,
	.ffe-menue li.ist-offen > .ffe-menue__gruppe .ffe-menue__pfeil { transform: rotate(180deg); }

	.ffe-nav-hintergrund { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .6); }
	.ffe-nav-hintergrund[hidden] { display: none; }
	.ffe-suche { padding: 12px 20px; }
}
@media (min-width: 1301px) {
	.ffe-nav__schliessen, .ffe-nav-hintergrund { display: none !important; }
}
@media (max-width: 480px) {
	.ffe-kopf__innen { padding: 0 12px; gap: 4px; min-height: 60px; }
	:root { --ffe-kopf-hoehe: 60px; }
	.ffe-logo { flex: 1 1 auto; min-width: 0; }
	.ffe-logo img { width: 190px; }
	.ffe-kopf__werkzeuge { gap: 0; }
}
@media (max-width: 782px) {
	body.admin-bar .ffe-kopf { top: 0; position: relative; }
}

/* ==========================================================================
   Startseiten-Bühne (ersetzt LayerSlider)
   ========================================================================== */

.ffe-buehne {
	position: relative;
	overflow: hidden;
	background: #111 url("assets/img/hero-fahrzeuge.png") center / cover no-repeat;
	aspect-ratio: 1140 / 450;
	max-height: 560px;
	width: 100%;
}
.ffe-buehne__leinwand {
	position: absolute; top: 0; bottom: 0;
	left: 50%; transform: translateX(-50%);
	height: 100%; aspect-ratio: 1140 / 450;
	container-type: inline-size;
}
.ffe-buehne__band {
	position: absolute; left: -100vw; right: -100vw;
	top: 32.4%; height: 33.3%;
	background: #e61212; opacity: .8;
}
.ffe-buehne__wort {
	position: absolute; top: 43.6%; margin: 0;
	font: 4.386cqw/1 var(--ffe-titelschrift);
	color: #fff; text-transform: uppercase; white-space: nowrap;
}
.ffe-buehne__wappen { position: absolute; top: 18.9%; left: 38.3%; width: 22.2%; height: auto; }
.ffe-buehne__schriftzug { position: absolute; top: 32.4%; left: 18%; width: 61.4%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
	.ffe-buehne__band { animation: ffe-band 13s linear infinite; }
	.ffe-buehne__wort { opacity: 0; animation: ffe-wort 13s ease-out infinite; }
	.ffe-buehne__wort:nth-of-type(1) { animation-delay: .01s; }
	.ffe-buehne__wort:nth-of-type(2) { animation-delay: .3s; }
	.ffe-buehne__wort:nth-of-type(3) { animation-delay: .6s; }
	.ffe-buehne__wort:nth-of-type(4) { animation-delay: 1s; }
	.ffe-buehne__wappen { opacity: 0; animation: ffe-wappen 13s linear infinite; }
	.ffe-buehne__schriftzug { opacity: 0; animation: ffe-schriftzug 13s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.ffe-buehne__wort, .ffe-buehne__schriftzug { display: none; }
}
@keyframes ffe-band {
	0% { opacity: 0; } 6.2% { opacity: .8; } 83.1% { opacity: .8; } 98.5%, 100% { opacity: 0; }
}
@keyframes ffe-wort {
	0% { opacity: 0; transform: translateY(100%); }
	6.9% { opacity: 1; transform: none; }
	22.3% { opacity: 1; }
	28.5%, 100% { opacity: 0; }
}
@keyframes ffe-wappen {
	0%, 26.9% { opacity: 0; } 30% { opacity: 1; } 50% { opacity: 1; } 57.7%, 100% { opacity: 0; }
}
@keyframes ffe-schriftzug {
	0%, 53.8% { opacity: 0; } 61.5% { opacity: 1; } 84.6% { opacity: 1; } 92.3%, 100% { opacity: 0; }
}

/* ==========================================================================
   Seitentitel
   ========================================================================== */

.ffe-titel {
	background: var(--ffe-rot-titel);
	padding: 8px 0;
}
.ffe-titel h1 { margin: 0; color: var(--ffe-hell); }
.ffe-titel__unterzeile { margin: 4px 0 0; color: var(--ffe-hell); font-size: 14px; }

@media (max-width: 820px) {
	.ffe-titel h1 { font-size: 37px; line-height: 43px; }
}

/* ==========================================================================
   Inhalt und Seitenleiste
   ========================================================================== */

.ffe-haupt { padding: 50px 0; }
.ffe-haupt--ohne-abstand { padding-top: 0; }

.ffe-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 50px; }
.ffe-raster--right { grid-template-columns: minmax(0, 1fr) 30%; }
.ffe-raster--left { grid-template-columns: 30% minmax(0, 1fr); }
.ffe-raster--left .ffe-seitenleiste { order: -1; }

@media (max-width: 990px) {
	.ffe-raster--right, .ffe-raster--left { grid-template-columns: minmax(0, 1fr); }
	.ffe-raster--left .ffe-seitenleiste { order: 0; }
	:root { --ffe-rand: 20px; }
}

.ffe-inhalt::after { content: ""; display: table; clear: both; }

.widget { display: flow-root; }
.ffe-seitenleiste .widget {
	margin: 0 0 20px;
	padding: 25px;
	background: var(--ffe-rot);
	border-top: 1px solid var(--ffe-gelb);
	border-bottom: 1px solid var(--ffe-gelb);
	font-size: 14px; line-height: 24px;
}
.widget-title {
	margin: 0 0 15px;
	font: 20px/25px var(--ffe-titelschrift);
	color: var(--ffe-gelb);
}
.ffe-seitenleiste .widget a { color: var(--ffe-weiss); text-decoration: underline; }
.ffe-seitenleiste .widget a:hover { color: var(--ffe-gelb); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { margin: 0 0 6px; }

/* Einsatzverwaltung-Widget */
.einsatzberichte { list-style: none; margin: 0; padding: 0; }
.einsatzbericht { margin-bottom: 8px; }

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.ffe-fuss { border-top: 1px solid var(--ffe-gelb); }
.ffe-fuss__widgets {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px;
	padding: 50px 0 30px;
}
.ffe-fuss__widgets .widget a { color: var(--ffe-weiss); text-decoration: underline; }
.ffe-fuss__widgets .widget a:hover { color: var(--ffe-gelb); }
.ffe-fuss__leiste {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 30px;
	min-height: 60px; padding: 14px 0;
	font-size: 13px; line-height: 21px; color: var(--ffe-gelb);
}
.ffe-fuss__menue { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.ffe-fuss__menue a { color: var(--ffe-gelb); }

@media (max-width: 820px) {
	.ffe-fuss__widgets { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.ffe-fuss__leiste { justify-content: center; text-align: center; }
}

.ffe-nach-oben {
	position: fixed; right: 20px; bottom: 20px; z-index: 90;
	width: 40px; height: 40px; display: grid; place-items: center;
	background: rgba(0, 0, 0, .7); color: var(--ffe-gelb); border: 1px solid #333;
	opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ffe-nach-oben.ist-sichtbar { opacity: 1; pointer-events: auto; }
.ffe-nach-oben svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   Beiträge, Archive, Suche
   ========================================================================== */

.ffe-liste__eintrag { padding: 0 0 25px; margin: 0 0 25px; border-bottom: 1px solid #333; }
.ffe-liste__eintrag h2 { font-size: 27px; line-height: 31px; margin-bottom: 6px; }
.ffe-liste__eintrag h2 a { color: var(--ffe-weiss); }
.ffe-liste__eintrag h2 a:hover { color: var(--ffe-gelb); }
.ffe-meta { color: var(--ffe-gedaempft); font-size: 13px; margin-bottom: 10px; }
.ffe-hinweis { color: var(--ffe-gedaempft); }
.ffe-blaettern { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ffe-blaettern .page-numbers { padding: 4px 12px; border: 1px solid #333; }
.ffe-blaettern .current { background: var(--ffe-gelb); color: #000; border-color: var(--ffe-gelb); }
.ffe-beitragsnavigation { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #333; }

.search-form { display: flex; gap: 10px; }
.search-form input[type=search] { flex: 1; padding: 8px 12px; font: inherit; background: #fff; color: #222; border: 1px solid #bbb; border-radius: 2px; }
.ffe-knopf, .search-form button, .search-submit {
	display: inline-block; padding: 8px 22px; cursor: pointer;
	font: 700 15px/23px var(--ffe-schrift);
	background: var(--ffe-gelb); color: #000; border: 0; border-radius: 2px;
}
.ffe-knopf:hover, .search-form button:hover { background: #fff; color: #000; text-decoration: none; }

/* ==========================================================================
   Nachgebildete Page-Builder-Elemente (WPBakery, The7, Ultimate Addons)
   ========================================================================== */

.ffe-zeile { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.ffe-zeile--hintergrund { margin: 0 0 30px; padding: 30px 15px; }
.ffe-spalte { flex: 0 0 100%; max-width: 100%; padding: 0 15px; min-width: 0; }
.ffe-spalte > :last-child { margin-bottom: 0; }
.ffe-textblock { margin-bottom: 20px; }
.ffe-textblock > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
	.ffe-spalte--1-12 { flex-basis: 8.333%; max-width: 8.333%; }
	.ffe-spalte--1-6 { flex-basis: 16.666%; max-width: 16.666%; }
	.ffe-spalte--1-5 { flex-basis: 20%; max-width: 20%; }
	.ffe-spalte--1-4 { flex-basis: 25%; max-width: 25%; }
	.ffe-spalte--1-3 { flex-basis: 33.333%; max-width: 33.333%; }
	.ffe-spalte--2-5 { flex-basis: 40%; max-width: 40%; }
	.ffe-spalte--5-12 { flex-basis: 41.666%; max-width: 41.666%; }
	.ffe-spalte--1-2 { flex-basis: 50%; max-width: 50%; }
	.ffe-spalte--7-12 { flex-basis: 58.333%; max-width: 58.333%; }
	.ffe-spalte--3-5 { flex-basis: 60%; max-width: 60%; }
	.ffe-spalte--2-3 { flex-basis: 66.666%; max-width: 66.666%; }
	.ffe-spalte--3-4 { flex-basis: 75%; max-width: 75%; }
	.ffe-spalte--4-5 { flex-basis: 80%; max-width: 80%; }
	.ffe-spalte--5-6 { flex-basis: 83.333%; max-width: 83.333%; }
	.ffe-spalte--11-12 { flex-basis: 91.666%; max-width: 91.666%; }
}

.ffe-bild { margin: 0 0 20px; }
.ffe-bild--center { text-align: center; }
.ffe-bild--right { text-align: right; }

.ffe-trenner {
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 25px;
	--ffe-linie: var(--ffe-gelb);
}
.ffe-trenner::before, .ffe-trenner::after { content: ""; flex: 1; border-top: 1px solid var(--ffe-linie); }
.ffe-trenner--left::before, .ffe-trenner--right::after { flex: 0 0 0; display: none; }
.ffe-trenner > * { margin: 0; }
.ffe-trenner--akzent > * { color: var(--ffe-gelb); }

.ffe-linie { border: 0; border-top: 1px solid var(--ffe-linie, #eeee22); margin: 20px auto; }

.ffe-raster-bilder {
	display: grid;
	grid-template-columns: repeat(var(--ffe-spalten, 4), minmax(0, 1fr));
	gap: var(--ffe-abstand, 5px);
	margin: 0 0 20px;
}
.ffe-raster-bilder a { display: block; overflow: hidden; background: #111; }
.ffe-raster-bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s, opacity .3s; }
.ffe-raster-bilder a:hover img { transform: scale(1.04); opacity: .85; }
@media (max-width: 767px) {
	.ffe-raster-bilder { grid-template-columns: repeat(min(var(--ffe-spalten, 4), 2), minmax(0, 1fr)); }
}

.ffe-link-titel { margin: 0 0 10px; font-family: var(--ffe-titelschrift); font-size: 18px; }
.ffe-link-titel a { color: var(--ffe-link-farbe, #fff); }
.ffe-link-titel a:hover { color: var(--ffe-link-hover, var(--ffe-gelb)); }

.ffe-knopf-zeile { margin: 0 0 20px; }
.ffe-knopf-zeile--center { text-align: center; }
.ffe-knopf-zeile--right { text-align: right; }
.ffe-knopf--farbe { background: var(--ffe-knopf-bg, var(--ffe-gelb)); color: var(--ffe-knopf-text, #000); transition: transform .2s; }
.ffe-knopf--farbe:hover { transform: scale(1.04); background: var(--ffe-knopf-bg, var(--ffe-gelb)); }
.ffe-knopf--facebook { background: #3b5998; color: #fff; }
.ffe-knopf--facebook:hover { background: #4c70ba; color: #fff; }
.ffe-knopf--gross { padding: 12px 32px; font-size: 17px; }
.ffe-knopf svg { width: 16px; height: 16px; fill: currentColor; vertical-align: -2px; margin-right: 6px; }

.ffe-einbettung {
	position: relative; aspect-ratio: 4 / 3; margin: 0 0 20px;
	background: #111 center / cover no-repeat; border: 1px solid #333;
	display: grid; place-items: center; text-align: center;
}
.ffe-einbettung--video { aspect-ratio: 16 / 9; }
.ffe-einbettung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ffe-einbettung__hinweis { max-width: 360px; padding: 20px; font-size: 13px; line-height: 20px; }
.ffe-einbettung__hinweis p { margin-bottom: 12px; }

.ffe-zaehler { text-align: center; margin: 0 0 20px; }
.ffe-zaehler__zahl { display: block; font: 47px/53px var(--ffe-titelschrift); color: var(--ffe-gelb); }

.ffe-aufruf { margin: 0 0 30px; padding: 40px 30px; text-align: center; font-size: 20px; line-height: 30px; }
.ffe-aufruf .ffe-knopf { margin-top: 16px; }

.ffe-wechseltext { margin: 0 0 20px; font-family: var(--ffe-titelschrift); line-height: 1.2; }
.ffe-wechseltext span { display: block; }

.ffe-alben { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; margin: 0 0 20px; }
.ffe-album { position: relative; display: block; overflow: hidden; background: #111; color: #fff; }
.ffe-album img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.ffe-album:hover img { transform: scale(1.04); }
.ffe-album__text {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 15px 12px; text-align: center;
	background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}
.ffe-album__titel { display: block; font: 18px/22px var(--ffe-titelschrift); }
.ffe-album__anzahl { font-size: 13px; color: var(--ffe-gelb); }
.ffe-album:hover { text-decoration: none; }

/* Lightbox */
.ffe-lightbox {
	width: 100vw; height: 100vh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .94); color: #fff;
}
.ffe-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.ffe-lightbox__bild { position: absolute; inset: 50px 60px; display: grid; place-items: center; }
.ffe-lightbox__bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ffe-lightbox__zaehler { position: absolute; left: 20px; top: 14px; font-size: 13px; color: var(--ffe-gedaempft); }
.ffe-lightbox button {
	position: absolute; width: 48px; height: 48px; padding: 0;
	background: none; border: 0; color: #fff; cursor: pointer;
}
.ffe-lightbox button:hover { color: var(--ffe-gelb); }
.ffe-lightbox button svg { width: 26px; height: 26px; fill: currentColor; }
.ffe-lightbox__zu { top: 6px; right: 10px; }
.ffe-lightbox__zurueck { left: 6px; top: 50%; transform: translateY(-50%); }
.ffe-lightbox__weiter { right: 6px; top: 50%; transform: translateY(-50%); }