/* Startseite Fer Battu (Template ferbattu_start) */
@font-face { font-family: 'muliregular'; src: url('muli-regular-webfont.woff') format('woff'); }
@font-face { font-family: 'muli_boldbold'; src: url('muli-bold-webfont.woff') format('woff'); }

body { margin: 0; background: url('../../../../../images/hg.gif'); }

/* ===== Startseite Fer Battu ===== */
.fb-start {
	--dunkelblau: #013299;
	--blau: #0268ca;
	--hell: #f1f8ff;
	--himmel: #87cceb;
	--creme: #fef2e6;
	--graublau: #cedeee;
	--grau: #cccccc;
	--linie: #cccccc;
	--text: #555555;
	display: block;
	width: min(65%, 1518px);
	margin: 66px auto;
	container-type: inline-size;
	color: var(--text);
	text-decoration: none;
	font-family: 'muliregular', sans-serif;
}
.fb-raster {
	position: relative;
	display: grid;
	grid-template-columns: 219fr 604fr 400fr 291fr;
	grid-template-rows: 234fr 496fr 183fr;
	gap: calc(2 / 1518 * 100cqw);
	aspect-ratio: 1518 / 917;
	background: var(--linie);
}
.fb-raster > div { position: relative; }
.fb-raster > .fb-z1, .fb-raster > .fb-z11 { position: static; }
.fb-z1 { background: var(--dunkelblau); }
.fb-z2 { background: var(--hell); }
.fb-z3 { background: var(--blau); }
.fb-z4 { background: var(--hell); }
.fb-z5 { background: var(--hell); }
.fb-logo { background: var(--himmel); }
.fb-liste { background: var(--creme); }
.fb-z8 { background: var(--graublau); }
.fb-z9 { background: var(--grau); }
.fb-z10 { background: var(--hell); }
.fb-z11 { background: var(--dunkelblau); }
.fb-z12 { background: var(--hell); }

/* Pan oben rechts */
.fb-pan {
	position: absolute;
	left: calc(1278 / 1518 * 100cqw);
	top: calc(35 / 1518 * 100cqw);
	width: calc(192 / 1518 * 100cqw);
}
/* Logo */
.fb-logo img {
	position: absolute;
	left: calc(46.7 / 1518 * 100cqw);
	top: calc(23.3 / 1518 * 100cqw);
	width: calc(508 / 1518 * 100cqw);
	height: auto;
}
/* Liste */
.fb-liste {
	padding: calc(57 / 1518 * 100cqw) 0 0 calc(33 / 1518 * 100cqw);
	font-family: 'muli_boldbold', sans-serif;
	font-size: calc(30 / 1518 * 100cqw);
	line-height: calc(38 / 1518 * 100cqw);
}
.fb-liste p { margin: 0 0 calc(38 / 1518 * 100cqw); }
.fb-liste ul { margin: 0; padding: 0; list-style: none; }
.fb-liste li::before { content: "• "; }

/* Texte über mehrere Felder: Farbe wechselt genau an der Feldgrenze */
.fb-spann {
	position: absolute;
	left: 0; width: 100%;
	z-index: 2;
	box-sizing: border-box;
	margin: 0;
	white-space: nowrap;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.fb-titel {
	top: calc(82 / 1518 * 100cqw);
	padding-left: calc(111 / 1518 * 100cqw);
	font-size: calc(58.1 / 1518 * 100cqw);
	line-height: 1.2;
	font-weight: normal;
	background-image: linear-gradient(to right, #fff calc(219 / 1518 * 100%), var(--text) calc(219 / 1518 * 100%));
}
.fb-unten {
	top: calc(809 / 1518 * 100cqw);
	padding-left: calc(617 / 1518 * 100cqw);
	font-size: calc(31.4 / 1518 * 100cqw);
	line-height: 1.2;
	background-image: linear-gradient(to right, var(--text) calc(826 / 1518 * 100%), #fff calc(826 / 1518 * 100%));
}

/* ===== Handy ===== */
@media (max-width: 767px) {
	.fb-start { width: auto; margin: 0; }
	.fb-raster {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		aspect-ratio: auto;
		gap: 2px;
	}
	.fb-z2, .fb-z4, .fb-z5, .fb-z8, .fb-z9, .fb-z10, .fb-z12 { display: none; }
	.fb-spann {
		position: static;
		white-space: normal;
		background: none;
		padding: 0;
		text-align: center;
	}
	.fb-z1 { order: 1; padding: 22px 16px; }
	.fb-titel { color: #fff; font-size: 30px; }
	.fb-z3 { display: none; }
	.fb-logo { order: 2; padding: 24px 16px; }
	.fb-logo img { position: static; display: block; width: 72%; max-width: 300px; height: auto; margin: 0 auto; }
	.fb-liste { order: 4; padding: 22px 24px; font-size: 18px; line-height: 1.6; }
	.fb-liste p { margin: 0 0 10px; }
	.fb-z11 { order: 3; padding: 18px 16px; }
	.fb-unten { color: #fff; font-size: 17px; }
	.fb-pan { display: none; }
}