/*
 * FBS Stadtteilberatung – Gestaltung nach Entwurf B „Auf einen Blick“ (freigegeben 04.11.2026).
 * Wird nur auf Seiten geladen, auf denen der Shortcode [stadtteilberatung] steht.
 *
 * Schriftgrößen: calc(27 * var(--fbs-sb-px)) = 27 px bei normaler Schrift. --fbs-sb-px folgt der
 * Grundschrift der Website (19,2 px) – vergrößert eine Besucherin oben mit „A+“, wächst alles mit.
 *
 * !important steht nur dort, wo das Child-Theme selbst mit !important arbeitet
 * (h1–h4: font-size/line-height, „#main ul > li“: padding-top). Es gilt nur innerhalb der fbs-sb-Klassen.
 */

/* Lato Black (900) – die Website lädt nur 400/700. Lokal, keine Anfrage an Google. Lizenz: fonts/OFL.txt */
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/lato-900-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/lato-900-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;
}

/* 1 px bei Grundschrift 19,2 px. Registriert, damit der Wert am body ausgerechnet und so vererbt wird. */
@property --fbs-sb-px {
	syntax: "<length>";
	inherits: true;
	initial-value: 1px;
}

body {
	--fbs-sb-px: calc(1em / 19.2);
}

/* ================================================================== Shortcode-Bereich [stadtteilberatung] */
.fbs-sb {
	--fbs-sb-slate: #4c5166;
	--fbs-sb-ink: #2a2e3f;
	--fbs-sb-grey: #676c81; /* 4,8:1 auf #f7f5ee, 5,2:1 auf Weiß (Entwurf: #858a9f, zu wenig Kontrast) */
	--fbs-sb-line: #e3e1dc;
	--fbs-sb-orange-text: #c4461a;

	box-sizing: border-box;
	margin: 0;
	padding: 72px 0 80px;
	background: #f7f5ee;
	color: var(--fbs-sb-ink);
	font-family: "Lato", Arial, sans-serif;
	font-size: calc(19 * var(--fbs-sb-px));
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
}

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

.fbs-sb .fbs-sb-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
}

.fbs-sb .fbs-sb-titel {
	margin: 0;
	padding: 0;
	color: var(--fbs-sb-slate);
	font-family: "Lato", Arial, sans-serif;
	font-size: calc(38 * var(--fbs-sb-px)) !important;
	font-weight: 400;
	line-height: 1.2 !important;
	letter-spacing: 2px;
	text-align: center;
	text-transform: none;
}

.fbs-sb .fbs-sb-untertitel {
	margin: 8px 0 44px;
	padding: 0;
	color: var(--fbs-sb-grey);
	font-size: calc(21 * var(--fbs-sb-px));
	line-height: 1.55;
	letter-spacing: 1px;
	text-align: center;
}

/* Raster: so viele Karten nebeneinander wie Platz ist, höchstens --fbs-sb-spalten (vom Plugin gesetzt). */
.fbs-sb .fbs-sb-karten {
	--fbs-sb-spalten: 3;
	--fbs-sb-abstand: 28px;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(280px, calc((100% - (var(--fbs-sb-spalten) - 1) * var(--fbs-sb-abstand)) / var(--fbs-sb-spalten) - 0.5px)), 1fr));
	gap: var(--fbs-sb-abstand);
}

.fbs-sb .fbs-sb-karten--einzeln {
	max-width: 620px;
	margin: 0 auto;
}

.fbs-sb .fbs-sb-karte {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	margin: 0;
	background: #fff;
	border-top: 8px solid var(--fbs-sb-akzent, #eb5c24);
	border-radius: 16px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 10px 30px rgba(76, 81, 102, 0.08);
}

.fbs-sb .fbs-sb-kopf {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 26px 26px 6px;
}

/* Lange Stadtteilnamen (z. B. „Lützenkirchen“) umbrechen statt an der Kartenkante abgeschnitten zu werden. */
.fbs-sb .fbs-sb-kopf > div {
	min-width: 0;
}

.fbs-sb .fbs-sb-name {
	overflow-wrap: break-word;
	hyphens: auto;
}

.fbs-sb .fbs-sb-art,
.fbs-sb .fbs-sb-inhalt p {
	overflow-wrap: break-word;
}

.fbs-sb .fbs-sb-pin {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	color: #fff;
	background: var(--fbs-sb-akzent, #eb5c24);
	border-radius: 50%;
}

.fbs-sb .fbs-sb-pin svg {
	display: block;
	width: 20px;
	height: 27px;
}

.fbs-sb .fbs-sb-name {
	margin: 0;
	padding: 0;
	color: var(--fbs-sb-ink);
	font-family: "Lato", Arial, sans-serif;
	font-size: calc(27 * var(--fbs-sb-px)) !important;
	font-weight: 900;
	line-height: 1.1 !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.fbs-sb .fbs-sb-art {
	margin: 6px 0 0;
	padding: 0;
	color: var(--fbs-sb-orange-text);
	font: 700 calc(15 * var(--fbs-sb-px)) / 1 "Lato", Arial, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.fbs-sb .fbs-sb-inhalt {
	padding: 14px 26px 22px;
}

.fbs-sb .fbs-sb-inhalt p {
	margin: 0;
	padding: 0;
}

.fbs-sb .fbs-sb-rhythmus {
	font-size: calc(19 * var(--fbs-sb-px));
	line-height: 1.55;
}

.fbs-sb .fbs-sb-inhalt .fbs-sb-zeit {
	margin: 2px 0 16px;
	color: var(--fbs-sb-slate);
	font: 900 calc(30 * var(--fbs-sb-px)) / 1.2 "Lato", Arial, sans-serif;
}

.fbs-sb .fbs-sb-inhalt .fbs-sb-ort {
	padding-left: 14px;
	font-size: calc(18 * var(--fbs-sb-px));
	line-height: 1.5;
	border-left: 3px solid var(--fbs-sb-line);
}

.fbs-sb .fbs-sb-termine {
	flex: 1;
	padding: 18px 26px 22px;
	background: #faf8f3;
	border-top: 1px solid var(--fbs-sb-line);
}

.fbs-sb .fbs-sb-termine-titel {
	margin: 0 0 12px;
	padding: 0;
	color: var(--fbs-sb-slate);
	font-family: "Lato", Arial, sans-serif;
	font-size: calc(13 * var(--fbs-sb-px)) !important;
	font-weight: 900;
	line-height: 1 !important;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.fbs-sb .fbs-sb-terminliste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fbs-sb .fbs-sb-terminliste > li {
	margin: 0;
	padding: 6px 14px;
	padding-top: 6px !important;
	font-size: calc(17 * var(--fbs-sb-px));
	line-height: 1.55;
	white-space: nowrap;
	background: #fff;
	border: 1px solid #e3ded2;
	border-radius: 30px;
}

/* Child-Theme: „#main ul > li { padding-top: .25em !important }“ und „#main ul li { line-height: 150% }“ */
#main .fbs-sb .fbs-sb-terminliste > li {
	padding-top: 6px !important;
	line-height: 1.55;
}

.fbs-sb .fbs-sb-terminliste > li::before,
.fbs-sb .fbs-sb-terminliste > li::after {
	display: none;
	content: none;
}

.fbs-sb .fbs-sb-terminliste .fbs-sb-wt {
	margin-right: 0.04em;
	color: var(--fbs-sb-grey);
}

.fbs-sb .fbs-sb-keine {
	margin: 0;
	padding: 0;
	color: var(--fbs-sb-slate);
	font-size: calc(17 * var(--fbs-sb-px));
	line-height: 1.55;
}

@media (max-width: 1000px) {

	.fbs-sb .fbs-sb-karten {
		grid-template-columns: minmax(0, 1fr);
		max-width: 620px;
		margin: 0 auto;
	}
}

@media (max-width: 760px) {

	.fbs-sb .fbs-sb-wrap {
		padding: 0 16px;
	}

	.fbs-sb .fbs-sb-titel {
		font-size: calc(29 * var(--fbs-sb-px)) !important;
	}
}

/* Sehr schmale Handys (unter 360 px): etwas weniger Innenabstand im Kartenkopf, damit Namen wie „Alkenrath“ ohne Trennung passen. */
@media (max-width: 359px) {

	.fbs-sb .fbs-sb-kopf {
		gap: 12px;
		padding-right: 20px;
		padding-left: 20px;
	}

	/* Unter 360 px passen lange Wörter (z. B. „Unterstützungsmöglichkeiten“) mit „A+“ nicht mehr in die Zeile:
	   dort automatisch trennen. Breiter bleibt der Zeilenfall wie im Entwurf. */
	.fbs-sb .fbs-sb-art,
	.fbs-sb .fbs-sb-inhalt p,
	#wrapper .fusion-flex-container.fbs-sb-hero .fbs-sb-hero-claim p,
	#wrapper .fusion-flex-container.fbs-sb-einstieg .fbs-sb-einleitung p,
	#wrapper .fusion-flex-container.fbs-sb-einstieg .fbs-sb-kachel-text p,
	#wrapper .fusion-flex-container.fbs-sb-schluss .fbs-sb-schluss-text p {
		hyphens: auto;
	}
}

/* ================================================================== Seitenrahmen der Seite „Stadtteilberatung“
 * Avada-Elemente mit den Klassen fbs-sb-hero, fbs-sb-einstieg, fbs-sb-standorte, fbs-sb-schluss.
 * Hintergrundfarben stehen in den Avada-Optionen der Container und Kacheln.
 */

/* ------------------------------------------------ Kopfband */
/* Avada-Spalten sind Flex-Elemente mit min-width:auto – ohne das würden sie bei 320 px auf die
   Breite des längsten Worts wachsen und der Container schneidet ab. */
.fusion-flex-container.fbs-sb-hero .fusion-row > .fusion-flex-column.fbs-sb-hero-in,
.fusion-flex-container.fbs-sb-einstieg .fusion-row > .fusion-flex-column.fbs-sb-einstieg-in,
.fusion-flex-container.fbs-sb-einstieg .fusion-row.fbs-sb-kacheln > .fusion-flex-column.fbs-sb-kachel {
	min-width: 0;
}

.fusion-flex-container.fbs-sb-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
}

.fusion-flex-container.fbs-sb-hero::before,
.fusion-flex-container.fbs-sb-hero::after {
	content: "";
	position: absolute;
	display: block;
	border-radius: 50%;
	pointer-events: none;
}

.fusion-flex-container.fbs-sb-hero::before {
	top: -160px;
	right: -120px;
	width: 520px;
	height: 520px;
	border: 3px solid rgba(255, 255, 255, 0.35);
}

.fusion-flex-container.fbs-sb-hero::after {
	right: 120px;
	bottom: -220px;
	width: 380px;
	height: 380px;
	background: rgba(248, 199, 79, 0.28);
}

.fusion-flex-container.fbs-sb-hero > .fusion-builder-row {
	position: relative;
	z-index: 1;
}

.fusion-flex-container.fbs-sb-hero .fusion-row .fusion-flex-column.fbs-sb-hero-in > .fusion-column-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px; /* minmax(0, …): Spalte wächst nicht auf die Breite des längsten Worts */
	grid-template-rows: 1fr auto auto 1fr; /* Titel + Claim als Gruppe mittig neben dem Icon */
	column-gap: 48px;
	row-gap: 0;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 32px 72px;
}

/* Avada setzt am h1 inline „margin:0“ – der Abstand zum Claim sitzt deshalb am Titel-Element.
   Unter 1024 px setzt Avada die Titel-Abstände mit !important aus diesen Variablen. */
.fusion-flex-container.fbs-sb-hero .fbs-sb-hero-titel {
	--awb-margin-top-medium: 0px;
	--awb-margin-bottom-medium: 14px;
	--awb-margin-top-small: 0px;
	--awb-margin-bottom-small: 14px;

	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	margin: 0 0 14px;
	container-type: inline-size; /* Bezugsbreite (cqi) für die Schriftgröße des h1 */
}

#wrapper .fusion-flex-container.fbs-sb-hero .fbs-sb-hero-titel h1 {
	margin: 0;
	padding: 0;
	color: #fff;
	min-width: 0;
	font-family: "Lato", Arial, sans-serif;
	/* Entwurfsgröße 64 px (wächst mit „A+“), aber nie breiter als die Spalte:
	   „Stadtteilberatung“ ist in Lato 900 ca. 8,12 × Schriftgröße + 17 px Laufweite breit (8,2 mit Reserve).
	   Untergrenze 28 px (wächst mit „A+“); reicht der Platz auch dafür nicht, wird getrennt statt abgeschnitten. */
	font-size: clamp(calc(28 * var(--fbs-sb-px)), calc((100cqi - 17px) / 8.2), calc(64 * var(--fbs-sb-px))) !important;
	font-weight: 900;
	line-height: 1 !important;
	letter-spacing: 1px;
	text-transform: none;
	overflow-wrap: break-word;
	hyphens: auto;
}

.fusion-flex-container.fbs-sb-hero .fbs-sb-hero-claim {
	grid-column: 1;
	grid-row: 3;
	min-width: 0;
	margin: 0;
}

#wrapper .fusion-flex-container.fbs-sb-hero .fbs-sb-hero-claim p {
	margin: 0 0 6px;
	color: #fff;
	font: 700 calc(28 * var(--fbs-sb-px)) / 1.3 "Lato", Arial, sans-serif;
	overflow-wrap: break-word;
}

.fusion-flex-container.fbs-sb-hero .fbs-sb-hero-in .fusion-image-element {
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: center;
	width: 260px;
	max-width: 260px;
	margin: 0;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
}

.fusion-flex-container.fbs-sb-hero .fbs-sb-hero-icon,
.fusion-flex-container.fbs-sb-hero .fbs-sb-hero-icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------ Einleitung und Kacheln */
.fusion-flex-container.fbs-sb-einstieg .fusion-row .fusion-flex-column.fbs-sb-einstieg-in > .fusion-column-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 56px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 32px;
}

.fusion-flex-container.fbs-sb-einstieg .fbs-sb-einleitung {
	margin: 0;
	color: #2a2e3f;
}

#wrapper .fusion-flex-container.fbs-sb-einstieg .fbs-sb-einleitung p {
	margin: 0 0 16px;
	font-size: calc(20 * var(--fbs-sb-px));
	line-height: 1.65;
	overflow-wrap: break-word;
}

.fusion-flex-container.fbs-sb-einstieg .fusion-row.fbs-sb-kacheln {
	display: grid;
	/* Zwei Kacheln nebeneinander, solange „Vertraulich“ hineinpasst (170 px, wächst mit „A+“), sonst untereinander. */
	grid-template-columns: repeat(auto-fit, minmax(max(calc(170 * var(--fbs-sb-px)), calc(50% - 8px)), 1fr));
	/* Alle Kacheln gleich hoch – auch über die Reihen hinweg. Icon und Titel bleiben oben bündig,
	   die zusätzliche Höhe einer Kachel mit einzeiligem Titel liegt unten. */
	grid-auto-rows: 1fr;
	gap: 16px;
	align-content: start;
	align-items: stretch; /* Avada setzt an der Reihe „align-items: flex-start“ */
	align-self: start; /* nicht auf die Höhe der Einleitung strecken, sonst verteilt 1fr die ganze Höhe */
	margin: 0;
}

.fusion-flex-container.fbs-sb-einstieg .fusion-row.fbs-sb-kacheln > .fusion-flex-column.fbs-sb-kachel {
	width: auto;
	min-width: 0;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
}

.fusion-flex-container.fbs-sb-einstieg .fusion-row.fbs-sb-kacheln > .fusion-flex-column.fbs-sb-kachel > .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	box-sizing: border-box;
	height: 100%;
	min-height: 132px;
	margin: 0;
	padding: 22px 18px;
	border-radius: 14px;
}

.fusion-flex-container.fbs-sb-einstieg .fbs-sb-kachel .fusion-image-element {
	width: 50px;
	max-width: 50px;
	margin: 0;
}

.fusion-flex-container.fbs-sb-einstieg .fbs-sb-kachel-icon,
.fusion-flex-container.fbs-sb-einstieg .fbs-sb-kachel-icon img {
	display: block;
	width: 50px;
	height: 50px;
}

.fusion-flex-container.fbs-sb-einstieg .fbs-sb-kachel-text {
	margin: 0;
}

#wrapper .fusion-flex-container.fbs-sb-einstieg .fbs-sb-kachel-text p {
	margin: 0;
	color: #2a2e3f;
	font: 900 calc(17 * var(--fbs-sb-px)) / 1.25 "Lato", Arial, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

/* ------------------------------------------------ Stadtteile (Shortcode) */
.fbs-sb-standorte .fbs-sb-shortcode {
	margin: 0;
}

/* ------------------------------------------------ Schlussband */

/* Wie im Entwurf: Ist das Schlussband das letzte Element, sitzt es direkt auf der Fußzeile.
   Das Child-Theme hält sonst unten Abstand („#main #content“ 4em, „.post-content“ 2.5em). */
#main #content:has(.post-content > .fbs-sb-schluss:last-child) {
	padding-bottom: 0;
}

#main #content .post-content:has(> .fbs-sb-schluss:last-child) {
	margin-bottom: 0;
}
.fusion-flex-container.fbs-sb-schluss .fusion-row .fusion-flex-column.fbs-sb-schluss-in > .fusion-column-wrapper {
	box-sizing: border-box;
	padding: 44px 24px;
	text-align: center;
}

.fusion-flex-container.fbs-sb-schluss .fbs-sb-schluss-text {
	margin: 0;
}

#wrapper .fusion-flex-container.fbs-sb-schluss .fbs-sb-schluss-text p {
	margin: 0;
	color: #2a2e3f;
	font: 900 calc(30 * var(--fbs-sb-px)) / 1.3 "Lato", Arial, sans-serif;
	letter-spacing: 0.5px;
	overflow-wrap: break-word;
}

/* ------------------------------------------------ Breiten wie im Entwurf */
@media (min-width: 1101px) {

	.fusion-flex-container.fbs-sb-hero .fusion-row .fusion-flex-column.fbs-sb-hero-in > .fusion-column-wrapper {
		padding-right: 190px;
	}
}

@media (max-width: 1000px) {

	.fusion-flex-container.fbs-sb-einstieg .fusion-row .fusion-flex-column.fbs-sb-einstieg-in > .fusion-column-wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 760px) {

	.fusion-flex-container.fbs-sb-hero::before,
	.fusion-flex-container.fbs-sb-hero::after {
		display: none;
	}

	.fusion-flex-container.fbs-sb-hero .fusion-row .fusion-flex-column.fbs-sb-hero-in > .fusion-column-wrapper {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		column-gap: 0;
		padding: 40px 20px 48px;
	}

	.fusion-flex-container.fbs-sb-hero .fbs-sb-hero-in .fusion-image-element {
		grid-column: 1;
		grid-row: 1;
		width: 120px;
		max-width: 120px;
		margin-bottom: 24px;
	}

	.fusion-flex-container.fbs-sb-hero .fbs-sb-hero-titel {
		grid-row: 2;
	}

	.fusion-flex-container.fbs-sb-hero .fbs-sb-hero-claim {
		grid-row: 3;
	}

	#wrapper .fusion-flex-container.fbs-sb-hero .fbs-sb-hero-titel h1 {
		font-size: clamp(calc(28 * var(--fbs-sb-px)), calc((100cqi - 17px) / 8.2), calc(42 * var(--fbs-sb-px))) !important;
	}

	#wrapper .fusion-flex-container.fbs-sb-hero .fbs-sb-hero-claim p {
		font-size: calc(23 * var(--fbs-sb-px));
	}

	.fusion-flex-container.fbs-sb-einstieg .fusion-row .fusion-flex-column.fbs-sb-einstieg-in > .fusion-column-wrapper {
		padding: 64px 16px;
	}

	#wrapper .fusion-flex-container.fbs-sb-schluss .fbs-sb-schluss-text p {
		font-size: calc(24 * var(--fbs-sb-px));
	}
}