/*
Theme Name: BBB Immobilien
Theme URI: https://bbb-immobilien.net/
Author: BBB Unternehmensgruppe
Description: Block-Theme für bbb-immobilien.net im Gestaltungssystem der BBB Unternehmensgruppe. Hausfarbe Dunkelblau #1C355E, Schrift Poppins lokal, ohne externe Einbindungen.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietär, BBB Unternehmensgruppe
Text Domain: bbb-immobilien
*/

:root {
	--bbb-haus: #1C355E;
	--bbb-dunkel: #0F1E36;
	--bbb-akzent: #A3B9DE;
	--bbb-text: #1D1D1F;
	--bbb-text-2: #6E6E73;
	--bbb-flaeche: #F5F5F7;
	--bbb-linie: #E5E5EA;
	--bbb-holding: #373A36;
	--bbb-consulting: #90120D;
	--bbb-service: #757A4D;
	--bbb-ecke: 30px;
	--bbb-abstand: 120px;
}

body { margin: 0; -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * { margin-block: 0 !important; }
.bbb-main { padding: 0 !important; }
::selection { background: var(--bbb-akzent); color: var(--bbb-dunkel); }
:focus-visible { outline: 2px solid var(--bbb-haus); outline-offset: 3px; }

/* ---------- Navigation ---------- */
.bbb-nav {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: rgba(15, 30, 54, 0.84);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	padding-block: 0 !important;
}
.bbb-nav-inner { min-height: 72px; gap: 24px; }
.bbb-logo { display: inline-flex; align-items: center; }
.bbb-logo img { height: 40px; width: auto; display: block; filter: brightness(0) invert(1); }
.bbb-menu { font-size: 13px; gap: 28px; }
.bbb-menu .wp-block-navigation-item__content { color: #fff; opacity: 0.86; }
.bbb-menu .wp-block-navigation-item__content:hover { opacity: 1; text-decoration: none; }
.bbb-menu .bbb-nav-kontakt .wp-block-navigation-item__content {
	opacity: 1;
	background: #fff;
	color: var(--bbb-haus);
	border-radius: 999px;
	min-height: 44px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	font-weight: 600;
}
.bbb-menu .wp-block-navigation__responsive-container-open,
.bbb-menu .wp-block-navigation__responsive-container-close { color: #fff; }
.bbb-menu .wp-block-navigation__responsive-container.is-menu-open { background: var(--bbb-dunkel) !important; color: #fff !important; padding: 28px; }
.bbb-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 22px; font-size: 22px; }
.bbb-menu .is-menu-open .wp-block-navigation-item__content { opacity: 1; }

/* ---------- Abschnitte ---------- */
.wp-block-post-content > section,
.bbb-main > section,
.is-root-container > section {
	padding-block: var(--bbb-abstand);
	padding-inline: max(28px, calc((100% - 1180px) / 2)) !important;
	margin-block: 0;
	box-sizing: border-box;
}
.wp-block-post-content > section > *,
.is-root-container > section > * { margin-left: 0; margin-right: 0; }
.wp-block-post-content > section + section { margin-top: 0; }
.wp-block-post-content > .bbb-abschnitt:nth-of-type(even) { background: var(--bbb-flaeche); }
.wp-block-post-content > section > h2 { margin-bottom: 48px; }
.bbb-abschnitt > h2:not(:first-child) { margin-top: 112px; }
.bbb-abschnitt > p:not([class*="bbb-"]) , .bbb-abschnitt > .wp-block-list { max-width: 780px; }

/* ---------- Kopf ---------- */
.bbb-kopf { padding-top: 112px !important; padding-bottom: 96px !important; }
.bbb-kicker { font-weight: 600; color: var(--bbb-haus); font-size: clamp(17px, 1.4vw, 21px); margin: 0 0 18px; }
.bbb-kopf h1 { margin: 0; max-width: 15ch; }
.home .bbb-kopf h1 { font-size: clamp(48px, 7.6vw, 104px); max-width: 13ch; }
.bbb-kopf .bbb-einleitung,
.bbb-kopf > p:not([class*="bbb-"]) {
	font-size: var(--wp--preset--font-size--einleitung);
	line-height: 1.4;
	color: var(--bbb-text-2);
	max-width: 760px;
	margin-top: 28px;
}
.bbb-kopf .wp-block-buttons { margin-top: 40px; gap: 14px; }
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--bbb-haus);
	border: 1.5px solid var(--bbb-haus);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--bbb-haus); color: #fff; }

/* Kapitelleiste */
.bbb-kapitelleiste { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 56px !important; font-size: 14px; }
.bbb-kapitelleiste a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
	border-radius: 999px; border: 1px solid #D2D2D7; color: var(--bbb-text);
}
.bbb-kapitelleiste a:hover { border-color: var(--bbb-haus); text-decoration: none; }
.bbb-kapitelleiste a[aria-current="page"] { background: var(--bbb-haus); border-color: var(--bbb-haus); color: #fff; }

/* ---------- Kernaussage auf Schwarz ---------- */
.wp-block-post-content > .bbb-kernaussage { background: #000; color: #fff; }
.bbb-kernaussage h2 { color: var(--bbb-akzent); font-size: clamp(17px, 1.4vw, 21px); letter-spacing: 0; margin-bottom: 24px !important; }
.bbb-kernaussage p:not(.bbb-textlink) {
	font-size: clamp(28px, 3.6vw, 52px); font-weight: 600; line-height: 1.14; letter-spacing: -0.03em;
	max-width: 20ch; max-width: 1000px; color: #fff;
}
.bbb-kernaussage .bbb-grafik { margin-top: 80px; opacity: 0.94; }
.bbb-kernaussage .bbb-grafik figcaption { color: #86868B; }

/* ---------- Grafiken ---------- */
.bbb-grafik { margin: 0; }
.bbb-grafik img { width: 100%; height: auto; border-radius: 18px; display: block; }
.bbb-grafik figcaption { margin-top: 16px; text-align: left; }
.bbb-grafikbuehne {
	background: var(--bbb-dunkel); border-radius: var(--bbb-ecke);
	padding: clamp(20px, 4vw, 56px) !important; margin-top: 56px !important; margin-bottom: 8px !important;
}
.bbb-grafikbuehne figcaption { color: var(--bbb-akzent); }

/* ---------- Kachelraster ---------- */
.bbb-kacheln { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-top: 0 !important; }
.bbb-kacheln > * { margin: 0 !important; }
.bbb-kachel {
	grid-column: span 7;
	background: var(--bbb-haus); color: #fff; border-radius: var(--bbb-ecke);
	padding: 44px 40px 40px; min-height: 300px;
	display: flex; flex-direction: column; gap: 14px;
}
.bbb-kachel:nth-child(4n+2), .bbb-kachel:nth-child(4n+3) { grid-column: span 5; background: var(--bbb-dunkel); }
.bbb-kachel::before {
	content: ""; width: 52px; height: 52px; margin-bottom: auto; padding-bottom: 28px; box-sizing: content-box;
	background: var(--bbb-akzent);
	-webkit-mask: url("assets/logos/icon-immobilien.svg") top left / 52px 52px no-repeat;
	mask: url("assets/logos/icon-immobilien.svg") top left / 52px 52px no-repeat;
}
.bbb-kachel h3 { color: #fff; margin: 0; }
.bbb-kachel p { color: rgba(255, 255, 255, 0.82); margin: 0; }
.bbb-textlink { margin-top: 6px !important; }
.bbb-kachel .bbb-textlink a, .bbb-karte .bbb-textlink a { color: #fff; font-weight: 600; }
.bbb-textlink a::after { content: " \2192"; }

/* Gruppenkarten */
.bbb-karte {
	grid-column: span 4; border-radius: var(--bbb-ecke); color: #fff;
	padding: 40px 36px; min-height: 380px; display: flex; flex-direction: column; gap: 14px;
}
.bbb-karte-consulting { background: var(--bbb-consulting); }
.bbb-karte-service { background: var(--bbb-service); }
.bbb-karte-immobilien { background: var(--bbb-haus); }
.bbb-karte-logo { margin: 0 0 auto !important; padding-bottom: 32px; }
.bbb-karte-logo img { height: 46px; width: auto; filter: brightness(0) invert(1); }
.bbb-karte h3 { color: #fff; margin: 0; font-size: clamp(24px, 2.2vw, 32px); }
.bbb-karte p { margin: 0; color: rgba(255, 255, 255, 0.86); }
.bbb-karte .bbb-rolle { font-weight: 600; color: #fff; }

/* ---------- Listen ---------- */
.wp-block-post-content .wp-block-list { list-style: none; padding: 0; margin-top: 0; }
.wp-block-post-content .wp-block-list li {
	position: relative; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--bbb-linie);
}
.wp-block-post-content .wp-block-list li::before {
	content: ""; position: absolute; left: 2px; top: 25px; width: 9px; height: 9px; border-radius: 50%; background: var(--bbb-haus);
}

/* ---------- Hinweise, Platzhalter, Kontakt ---------- */
.bbb-hinweis {
	font-size: 14px; color: var(--bbb-text-2); max-width: 780px;
	border-left: 2px solid var(--bbb-haus); padding-left: 16px; margin-top: 48px !important;
}
.bbb-bildplatzhalter, .bbb-formular-platzhalter {
	background: var(--bbb-flaeche); border: 1.5px dashed #C7C7CC; border-radius: var(--bbb-ecke);
	padding: 32px; font-size: 14px; color: var(--bbb-text-2);
}
.bbb-bildplatzhalter { min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; }
.bbb-kontakt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px !important; }
.bbb-kontakt-raster > * { margin: 0 !important; }
.bbb-kontaktblock {
	background: var(--bbb-haus); color: #fff; border-radius: var(--bbb-ecke);
	padding: 44px 40px; font-size: 19px; line-height: 1.6;
}
.bbb-kontaktblock strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; display: inline-block; margin-bottom: 12px; line-height: 1.2; }
.bbb-kontaktblock a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bbb-offen { color: var(--bbb-consulting); }

/* ---------- Fuß ---------- */
.bbb-fuss { background: var(--bbb-flaeche); padding: 80px 28px 36px; font-size: 13px; color: var(--bbb-text-2); }
.bbb-fuss-inner { max-width: 1180px; margin: 0 auto; }
.bbb-verzeichnis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.bbb-verzeichnis ul { list-style: none; padding: 0; margin: 0; }
.bbb-verzeichnis li { margin: 0 0 8px; }
.bbb-fuss a { color: var(--bbb-text-2); }
.bbb-fuss a:hover { color: var(--bbb-text); }
.bbb-fuss-kopf { font-size: 14px; font-weight: 600; color: var(--bbb-text); margin: 0 0 14px; }
.bbb-fuss-kopf a { color: var(--bbb-text); }
.bbb-fuss-adresse p { margin: 0; line-height: 1.7; }
.bbb-vierfarbbalken { display: flex; height: 6px; margin: 56px 0 20px; border-radius: 3px; overflow: hidden; }
.bbb-vierfarbbalken span { flex: 1; }
.bbb-vierfarbbalken span:nth-child(1) { background: var(--bbb-holding); }
.bbb-vierfarbbalken span:nth-child(2) { background: var(--bbb-consulting); }
.bbb-vierfarbbalken span:nth-child(3) { background: var(--bbb-service); }
.bbb-vierfarbbalken span:nth-child(4) { background: var(--bbb-haus); }
.bbb-fuss-recht { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; font-size: 12px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1000px) {
	.bbb-karte { grid-column: span 12; min-height: 0; }
	.bbb-verzeichnis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	:root { --bbb-abstand: 72px; }
	.bbb-kopf { padding-top: 64px !important; padding-bottom: 64px !important; }
	.bbb-kachel, .bbb-kachel:nth-child(4n+2), .bbb-kachel:nth-child(4n+3) { grid-column: span 12; min-height: 0; padding: 32px 28px; }
	.bbb-kontakt-raster { grid-template-columns: 1fr; }
	.bbb-abschnitt > h2:not(:first-child) { margin-top: 72px; }
	.bbb-logo img { height: 32px; }
}

/* Lange deutsche Wörter in großen Überschriften trennen statt überlaufen */
h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 10 4 4; }
html { overflow-x: clip; }

/* Grafikbühne als erstes Element und direkt vor Karten */
.bbb-abschnitt > .bbb-grafikbuehne:first-child { margin-top: 0 !important; }
.bbb-grafikbuehne + .bbb-kacheln { margin-top: 20px !important; }