/*
Theme Name: Meincke Bienmüller
Theme URI: https://www.mb-law.de/
Description: Block-Theme für Meincke Bienmüller Rechtsanwälte PartmbB, Nachbau des bisherigen TYPO3-Layouts.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: mb-law
*/

:root {
	--mb-orange: #f38504;
	--mb-green: #76a783;
	--mb-text: #333333;
	--mb-container: 1140px;
	--mb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 34z'/%3E%3C/svg%3E");
}

body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.mb-main > .wp-block-post-content { padding-bottom: 40px; }
.align-justify { text-align: justify; }
.align-center, .has-text-align-center { text-align: center; }
ul { padding-inline-start: 20px; }

/* Chevron-Icon (ersetzt FontAwesome \f054) */
.mb-chevron::before,
.mb-nav__sub a::before,
a.chevronLink::before,
a.orangeButtonSquare::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 12px;
	margin-right: 8px;
	background-color: currentColor;
	-webkit-mask: var(--mb-chevron) no-repeat center / contain;
	mask: var(--mb-chevron) no-repeat center / contain;
}

/* ------------------------------------------------------------------ Header */
.mb-header { background: #fff; position: relative; z-index: 20; }
.mb-header__inner {
	max-width: var(--mb-container);
	margin: 0 auto;
	padding: .9rem 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.mb-header__brand { width: 66%; max-width: 300px; }
.mb-header__brand img { display: block; width: 100%; height: auto; }
.mb-header__toggler {
	width: 46px; height: 38px; border: 0; border-radius: 4px; cursor: pointer;
	background: var(--mb-orange) url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") no-repeat center / 26px;
}
.mb-nav { list-style: none; margin: 0; padding: 0; width: 100%; display: none; }
.mb-nav.is-open { display: block; }
.mb-nav__item { position: relative; }
.mb-nav__item > a {
	display: inline-block;
	padding: .5rem 0;
	font-weight: 600;
	font-size: 16px;
	color: var(--mb-text);
	white-space: nowrap;
}
.mb-nav__item > a:hover, .mb-nav__item.is-active > a { color: var(--mb-orange); text-decoration: underline; }
.mb-nav__toggle {
	position: absolute; right: 0; top: 4px; width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
}
.mb-nav__toggle::after {
	content: ""; display: block; margin: auto; width: 0; height: 0;
	border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--mb-text);
}
.mb-nav__sub { list-style: none; margin: 0; padding: 0 0 0 10px; display: none; }
.mb-nav__item.is-open > .mb-nav__sub { display: block; }
.mb-nav__sub a { display: block; padding: .35rem 0; font-weight: 600; font-size: 16px; color: var(--mb-text); white-space: nowrap; }
.mb-nav__sub a::before { color: var(--mb-orange); }
.mb-nav__sub .is-active > a, .mb-nav__sub a:hover { color: var(--mb-orange); text-decoration: underline; }
.mb-nav__lang { display: flex; padding: .5rem 0; font-weight: 600; font-size: 16px; }
.mb-nav__lang a { color: var(--mb-text); }
.mb-nav__lang a[aria-current], .mb-nav__lang a:hover { color: var(--mb-orange); }

@media (min-width: 992px) {
	.mb-header__brand { width: auto; }
	.mb-header__toggler, .mb-nav__toggle { display: none; }
	.mb-nav { display: flex; width: auto; align-items: center; }
	.mb-nav__item > a { padding: .5rem .5rem; }
	.mb-nav__sub {
		display: none;
		position: absolute;
		top: 30px;
		left: -6px;
		padding: 30px 15px 15px;
		background: rgba(255, 255, 255, .9);
		min-width: 100%;
	}
	.mb-nav__item:hover > .mb-nav__sub, .mb-nav__item:focus-within > .mb-nav__sub { display: block; }
	.mb-nav__lang { padding-left: 40px; }
}

/* ------------------------------------------------------------ Seitenkopf */
.mb-page-header {
	height: 60vh;
	display: flex;
	background-position: center;
	background-size: cover;
	background-color: #ccc;
}
.mb-page-header--home { height: 80vh; }
@media (min-width: 768px) {
	.mb-page-header { height: 35vh; }
	.mb-page-header--home { height: 80vh; }
}
.mb-page-header__inner { width: 100%; max-width: var(--mb-container); margin: auto auto 0; padding: 0 15px; }
.mb-breadcrumb { list-style: none; padding: 0; margin: 0 0 5px; color: #fff; }
.mb-breadcrumb li { display: inline-block; font-size: 12px; }
.mb-breadcrumb li:not(:first-child)::before { content: "/"; padding: 0 3px; }
.mb-breadcrumb a { color: #fff; text-decoration: underline; }

/* -------------------------------------------- Raster (Gridelements-Ersatz) */
.mb-grid { padding-top: 40px; }
.mb-grid > .wp-block-columns { margin-bottom: 0; }
.mb-grid > .wp-block-columns > .wp-block-column { position: relative; margin-bottom: 40px; }
.mb-grid--3 img, .mb-grid--4 img { width: 100%; }
.mb-grid .mb-more { display: flex; justify-content: center; margin: 0 0 40px; }
.frame-1 { background: linear-gradient(to bottom, #f6f6f6 0%, #eaeaea 100%); }
.frame-2 { background: #f6f6f6; }
.mb-grid--3 .wp-block-column:has(.orangeButtonSquare), .mb-grid--2 .wp-block-column:has(.orangeButtonSquare) { padding-bottom: 40px; }
.mb-grid--3 .orangeButtonSquare, .mb-grid--2 .orangeButtonSquare { position: absolute; bottom: 0; left: 0; }

/* -------------------------------------------------------------- Buttons */
a.orangeButton, a.orangeButtonSquare {
	display: inline-block;
	background: var(--mb-orange);
	color: #fff;
	padding: 6px 15px;
	font-size: 16px;
}
a.orangeButton { border-radius: 20px; padding: 10px 30px; font-weight: 600; }
a.orangeButton:hover, a.orangeButtonSquare:hover { text-decoration: none; opacity: .9; }
a.chevronLink { color: var(--mb-orange); text-decoration: underline; }
a.link-in-special-grey { color: #333; }
.list-in-orange, .is-style-orange { color: var(--mb-orange); }
.list-in-orange li > *, .is-style-orange li > * { color: var(--mb-text); }

/* ---------------------------------------------- Kopf-Teaser (DCE 12) */
.mb-header-teaser { display: flex; flex-wrap: wrap; gap: 10px; margin-top: -170px !important; position: relative; }
.mb-header-teaser__item {
	position: relative;
	flex: 1 1 45%;
	text-align: center;
	font-size: 16px;
	padding: 15px 8px 29px;
	background: var(--mb-green);
	border-radius: 10px;
	color: #fff;
}
.mb-header-teaser > .mb-header-teaser__item { margin: 0; }
.mb-header-teaser__item h2 { font-size: 18px; color: #fff; margin: 0 0 .5rem; }
.mb-header-teaser__item a { color: #fff; font-weight: 600; text-decoration: underline; }
.mb-header-teaser__item h2 a { text-decoration: none; font-weight: inherit; }
.mb-header-teaser__text, .mb-header-teaser__more { display: none; }
.mb-header-teaser__more { position: absolute; left: 0; bottom: 14px; width: 100%; margin: 0; }
@media (min-width: 992px) {
	.mb-header-teaser { margin-top: -120px !important; flex-wrap: nowrap; }
	.mb-header-teaser__item { border-radius: 0; flex: 1 1 calc(25% - 10px); }
	.mb-header-teaser__item h2 { font-size: 22px; font-weight: 600; }
	.mb-header-teaser__text, .mb-header-teaser__more { display: block; }
}

/* ----------------------------------------------------- Personen-Teaser */
.mb-person-teaser { position: relative; text-align: center; padding-bottom: 40px; height: 100%; }
.mb-person-teaser .wp-block-image { margin: 0 auto; }
.mb-person-teaser h2 { margin: 10px 0 0; }
.mb-person-teaser h2 + h2 { margin-top: 0; }
.mb-person-teaser h3 { opacity: .7; font-size: 16px; font-weight: 400; margin-bottom: 20px; }
.mb-person-teaser .mb-person-teaser__more { position: absolute; left: 0; bottom: 10px; width: 100%; margin: 0; }

/* ------------------------------------------------------- Grüner Kasten */
.mb-green-box { padding: 20px; background: var(--mb-green); color: #fff; }
.mb-green-box h2 { color: #fff; padding-bottom: 10px; border-bottom: 1px dotted #fff; margin-bottom: 10px; }
.mb-green-box p { font-size: 14px; }
.mb-green-box a { color: #fff; }

/* -------------------------------------------- Text & Bild / Tabellen */
.mb-textpic { display: flex; gap: 10px; align-items: flex-start; }
.mb-textpic > .wp-block-image, .mb-textpic > .mb-image-row { flex: 0 0 auto; margin: 0; }
.mb-textpic__body { flex: 1 1 auto; min-width: 0; }
.mb-textpic__body > :first-child { margin-top: 0; }
.mb-image-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mb-image-row .wp-block-image { margin: 0; }
.wp-block-table.is-style-vita table { border: 0; border-collapse: collapse; width: 100%; }
.wp-block-table.is-style-vita td { border: 0; padding: 0 15px 4px 0; vertical-align: top; }
.wp-block-table.is-style-vita td:first-child { width: 100px; white-space: nowrap; }
.mb-spacer { height: 20px; }

/* --------------------------------------------------------------- Footer */
.mb-footer { background: linear-gradient(to bottom, #f6f6f6 0%, #eaeaea 100%); color: #434242; }
.mb-footer__logo { text-align: center; padding: 50px 15px 30px; }
.mb-footer__logo img { width: auto; max-width: 100%; }
.mb-footer__cols { padding-bottom: 20px; }
.mb-footer a { color: #434242; display: block; line-height: 28px; }
.mb-footer a:hover { text-decoration: underline; }
.mb-footer__links { display: flex; flex-flow: column; }
@media (min-width: 992px) {
	.mb-footer .wp-block-column { display: flex; flex-direction: column; justify-content: center; }
}
.mb-footer__copyright { background: var(--mb-green); color: #fff; padding: 15px 0; }
.mb-footer__copyright-inner { max-width: var(--mb-container); margin: 0 auto; padding: 0 15px; }

/* ------------------- Bootstrap-Raster für übernommene HTML-Elemente */
.mb-main .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.mb-main .row > [class*="col-"] { width: 100%; padding: 0 15px; }
.mb-main .ce-intext { display: flex; gap: 10px; }
.mb-main .ce-media img { display: block; }
@media (min-width: 576px) {
	.mb-main .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
	.mb-main .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
	.mb-main .col-md-5 { flex: 0 0 41.667%; max-width: 41.667%; }
	.mb-main .col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.mb-main .col-md-8 { flex: 0 0 66.667%; max-width: 66.667%; }
}