/* ==========================================================================
   Herbst | Bröcker – Komponenten
   Farben, Schriften und Größen stehen in theme.json (--wp--preset--*).
   ========================================================================== */

:root {
	--hb-ink: var(--wp--preset--color--tinte);
	--hb-grey: var(--wp--preset--color--grau);
	--hb-white: var(--wp--preset--color--weiss);
	--hb-putz: var(--wp--preset--color--putz);
	--hb-slate: var(--wp--preset--color--schiefer);
	--hb-slate-light: var(--wp--preset--color--schiefer-hell);
	--hb-red: var(--wp--preset--color--laeufer);
	--hb-sans: var(--wp--preset--font-family--archivo);
	--hb-gutter: var(--wp--custom--gutter);
	--hb-section: var(--wp--custom--section);
	--hb-rule: var(--wp--custom--rule);
	--hb-wide: 78rem;
	--hb-header: 4.75rem;
	--hb-header-top: 6.75rem;
	--hb-admin: var(--wp-admin--admin-bar--height, 0px);
}

/* ---------- Grundlagen ---------- */
html { scroll-padding-top: 1rem; }
@media (min-width: 900px) {
	html { scroll-padding-top: calc(var(--hb-header) + var(--hb-admin)); }
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	font-variant-numeric: oldstyle-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, summary, .wp-block-navigation, .wp-element-button, .hb-lang, .hb-value { font-variant-numeric: lining-nums; }
:where(h1, h2, h3) { text-wrap: balance; }
p { text-wrap: pretty; }
a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--hb-red); }
::selection { background: var(--hb-red); color: #fff; }
:focus-visible { outline: 2px solid var(--hb-red); outline-offset: 3px; }

/* Abstände regelt dieses Stylesheet, nicht der Standard-Blockabstand. */
.wp-site-blocks > *,
.hb-main .wp-block-post-content > *,
.wp-block-group[class*="hb-"] > * { margin-block: 0; }
.wp-block-group.hb-flow > * + * { margin-block-start: 1em; }

.hb-container {
	box-sizing: content-box;
	max-width: var(--hb-wide);
	margin-inline: auto;
	padding-inline: var(--hb-gutter);
}
.hb-section { padding-block: var(--hb-section); }
.hb-section__title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 280;
	font-stretch: 74%;
	line-height: .98;
	letter-spacing: -.012em;
}
.hb-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; }
.wp-block-button__link { text-decoration: none; transition: background-color .2s, color .2s; }

/* ---------- Kopfbereich ---------- */
.hb-site-header {
	position: relative;
	z-index: 50;
	background: var(--hb-white);
	border-bottom: 1px solid var(--hb-rule);
}
@media (min-width: 900px) {
	.hb-site-header { position: sticky; top: var(--hb-admin); }
}
.wp-block-group.hb-header {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.5rem);
	box-sizing: border-box;
	max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
	min-height: var(--hb-header);
	margin-inline: auto;
	padding: .75rem var(--hb-gutter);
}
.hb-header .wp-block-site-logo { margin-right: auto; line-height: 0; }
.hb-header .wp-block-site-logo img { width: 150px; height: auto; }
@media (min-width: 900px) {
	.hb-header .wp-block-site-logo img { width: clamp(260px, 24vw, 340px); }
}
/* Beim Scrollen wird das große Logo kleiner, damit der fixierte Kopfbereich nicht zu viel Platz nimmt. */
@keyframes hb-logo-shrink { to { width: 200px; } }
@supports (animation-timeline: scroll()) {
	@media (min-width: 900px) {
		.hb-header .wp-block-site-logo img {
			animation: hb-logo-shrink linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 240px;
		}
	}
}
/* Browser ohne diese Technik (z. B. Firefox): Kopfbereich scrollt mit statt groß stehen zu bleiben. */
@supports not (animation-timeline: scroll()) {
	@media (min-width: 900px) {
		.hb-site-header { position: relative; }
		html { scroll-padding-top: 1rem; }
	}
}
.hb-nav { font-stretch: 88%; letter-spacing: .01em; }
.hb-nav .wp-block-navigation__container { gap: clamp(1rem, 2vw, 1.9rem); }
.hb-nav a, .hb-footer__nav a { text-decoration: none; padding-block: .4rem; }
.hb-nav a:hover, .hb-nav a:focus-visible { color: var(--hb-red); }
.hb-lang {
	display: flex;
	align-items: center;
	gap: .45rem;
	white-space: nowrap;
	font-family: var(--hb-sans);
	font-size: .875rem;
	font-weight: 500;
	color: var(--hb-grey);
}
.hb-lang a { color: var(--hb-grey); text-decoration: none; padding: .4rem .1rem; }
.hb-lang a[aria-current] { color: var(--hb-ink); font-weight: 700; }
.hb-lang a:hover { color: var(--hb-red); }
.hb-lang span { color: var(--hb-rule); }

@media (max-width: 899px) {
	.wp-block-group.hb-header { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
	.hb-header .wp-block-site-logo { order: 1; }
	.hb-header .hb-lang { order: 2; }
	.hb-header nav.hb-nav { order: 3; flex: 0 0 calc(100% + 2 * var(--hb-gutter)); margin-inline: calc(-1 * var(--hb-gutter)); }
	.hb-header .hb-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding: .25rem var(--hb-gutter) .55rem;
		scrollbar-width: none;
	}
	.hb-header .hb-nav .wp-block-navigation__container::-webkit-scrollbar { display: none; }
}

/* ---------- Einstieg: Zitat + Raumfotos ---------- */
.wp-block-group.hb-hero {
	container-type: inline-size;
	display: grid;
	background: var(--hb-red);
	color: var(--hb-white);
}
.wp-block-group.hb-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.75rem, 4vw, 3rem);
	padding: clamp(3rem, 8vw, 6rem) var(--hb-gutter) clamp(3rem, 7vw, 5rem);
}
.hb-hero__kicker {
	font-family: var(--hb-sans);
	font-size: .9375rem;
	font-weight: 500;
	font-stretch: 92%;
	letter-spacing: .015em;
	line-height: 1.4;
	color: rgba(255, 255, 255, .8);
}
.hb-hero .hb-hero__quote { margin: 0; padding: 0; border: 0; }
.hb-hero__quote p {
	margin: 0;
	font-family: var(--hb-sans);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 260;
	font-stretch: 72%;
	line-height: .97;
	letter-spacing: -.018em;
	text-wrap: balance;
}
.hb-hero__quote cite {
	display: block;
	margin-top: 1.4rem;
	font-family: var(--hb-sans);
	font-style: normal;
	font-size: .9375rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .8);
}
.hb-hero__intro { max-width: 34rem; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .92); }
.hb-hero ::selection { background: var(--hb-white); color: var(--hb-red); }
.hb-hero :focus-visible { outline-color: var(--hb-white); }

.wp-block-group.hb-hero__media { position: relative; min-height: 78vw; overflow: hidden; background: #3B3430; }
.hb-hero .hb-hero__slide { position: absolute; inset: 0; margin: 0; }
.hb-hero .hb-hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-hero .hb-hero__slide + .hb-hero__slide { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.hb-hero .hb-hero__slide { animation: hb-slide 24s linear infinite both; }
	.hb-hero .hb-hero__slide:nth-child(1) { animation-delay: -1.44s; }
	.hb-hero .hb-hero__slide:nth-child(2) { animation-delay: 6.56s; }
	.hb-hero .hb-hero__slide:nth-child(3) { animation-delay: 14.56s; }
}
@keyframes hb-slide {
	0% { opacity: 0; }
	6% { opacity: 1; }
	33.3% { opacity: 1; }
	39.3% { opacity: 0; }
	100% { opacity: 0; }
}
@media (min-width: 900px) {
	.wp-block-group.hb-hero {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
		min-height: clamp(34rem, calc(100svh - var(--hb-header-top) - var(--hb-admin)), 52rem);
	}
	.wp-block-group.hb-hero__text {
		padding-left: max(var(--hb-gutter), calc((100cqw - var(--hb-wide)) / 2));
		padding-right: clamp(2.5rem, 5vw, 5rem);
	}
	.wp-block-group.hb-hero__media { min-height: 0; }
	.hb-hero__quote p { font-size: clamp(2.25rem, 3vw, 2.75rem); line-height: 1.04; letter-spacing: -.008em; text-indent: -.28em; }
}

/* ---------- Kanzlei ---------- */
.wp-block-group.hb-kanzlei__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.hb-kanzlei__text { max-width: 38rem; }
.hb-kanzlei .hb-kanzlei__image { margin: 0; }
.hb-kanzlei .hb-kanzlei__image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.hb-statement {
	max-width: 30rem;
	padding-left: 1.25rem;
	border-left: 1px solid var(--hb-ink);
	font-family: var(--hb-sans);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 320;
	font-stretch: 80%;
	line-height: 1.18;
}
@media (min-width: 900px) {
	.wp-block-group.hb-kanzlei__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-areas: "title title" "text image" "statement image";
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(3rem, 6vw, 6rem);
		row-gap: clamp(2.5rem, 4vw, 3.5rem);
		align-items: start;
	}
	.hb-kanzlei__grid > .hb-section__title { grid-area: title; }
	.hb-kanzlei__grid > .hb-kanzlei__text { grid-area: text; }
	.hb-kanzlei__grid > .hb-kanzlei__image { grid-area: image; }
	.hb-kanzlei__grid > .hb-statement { grid-area: statement; }
}

/* ---------- Zweispaltig: Titel links, Inhalt rechts ---------- */
.wp-block-group.hb-split { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
	.wp-block-group.hb-split {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}
	.hb-split--sticky > .hb-split__aside { position: sticky; top: calc(var(--hb-header) + var(--hb-admin) + 2rem); }
}

/* ---------- Aufklapp-Elemente (natives <details>) ---------- */
.hb-area > summary,
.hb-more > summary { list-style: none; cursor: pointer; }
.hb-area > summary::-webkit-details-marker,
.hb-more > summary::-webkit-details-marker { display: none; }
/* Plus aus zwei Strichen – der senkrechte ist der Strich aus dem Logo und verschwindet beim Öffnen. */
.hb-area > summary::after,
.hb-more > summary::after {
	content: "";
	flex: none;
	width: .8em;
	height: .8em;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
	transition: background-size .25s ease;
}
.hb-area[open] > summary::after,
.hb-more[open] > summary::after { background-size: 100% 1.5px, 1.5px 0; }

@supports (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		:root { interpolate-size: allow-keywords; }
		.hb-area::details-content,
		.hb-more::details-content {
			block-size: 0;
			overflow-y: clip;
			transition: block-size .35s ease, content-visibility .35s allow-discrete;
		}
		.hb-area[open]::details-content,
		.hb-more[open]::details-content { block-size: auto; }
	}
}

/* ---------- Beratungsfelder ---------- */
.hb-beratung { background: var(--hb-putz); }
.hb-area { border-top: 1px solid var(--hb-rule); }
.hb-area:last-child { border-bottom: 1px solid var(--hb-rule); }
.hb-area > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.3rem;
	font-family: var(--hb-sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	font-stretch: 84%;
	line-height: 1.25;
	transition: color .2s;
}
.hb-area > summary:hover { color: var(--hb-red); }
.hb-area[open] { padding-bottom: 2.25rem; }
.hb-area > :not(summary) { max-width: 42rem; }
.hb-area p { font-size: 1.0625rem; }
.hb-area > .hb-area__contact { margin-block-start: 1.75rem; font-family: var(--hb-sans); font-size: .9375rem; line-height: 1.55; }
.hb-area__contact strong { display: block; font-weight: 650; }

/* ---------- Team ---------- */
.wp-block-group.hb-team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
	align-items: start;
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 1000px) {
	.wp-block-group.hb-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hb-team .hb-person__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #F4F4F3; }
.hb-team .hb-person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.wp-block-group.hb-person__photo--empty { display: grid; place-items: center; background: var(--hb-putz); }
.hb-person__photo--empty p {
	font-family: var(--hb-sans);
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: 260;
	font-stretch: 72%;
	letter-spacing: .04em;
	color: var(--hb-slate);
}
.hb-person__name { font-family: var(--hb-sans); font-size: 1.375rem; font-weight: 650; font-stretch: 84%; line-height: 1.2; }
.hb-person__role { font-family: var(--hb-sans); font-size: .9375rem; line-height: 1.4; color: var(--hb-grey); }
.wp-block-group.hb-person > .hb-person__name { margin-block-start: 1.25rem; }
.wp-block-group.hb-person > .hb-person__role { margin-block-start: .3rem; }
.wp-block-group.hb-person > .hb-more { margin-block-start: .9rem; }

.hb-more > summary {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding-block: .35rem;
	border-bottom: 1px solid currentColor;
	font-family: var(--hb-sans);
	font-size: .875rem;
	font-weight: 650;
	letter-spacing: .02em;
}
.hb-more > summary:hover { color: var(--hb-red); }
.hb-more > summary::after { width: .7em; height: .7em; }
.hb-more[open] { padding-bottom: .5rem; }
.hb-more p, .hb-more li { font-size: 1rem; line-height: 1.65; }
.hb-more > .hb-person__label { margin-block-start: 1.75rem; font-family: var(--hb-sans); font-size: .8125rem; font-weight: 650; letter-spacing: .03em; color: var(--hb-grey); }
.hb-tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; list-style: none; }
.hb-more > .hb-tags { margin-block-start: .6rem; }
.hb-more .hb-tags li { padding: .35rem .6rem; border-radius: 2px; background: var(--hb-putz); font-family: var(--hb-sans); font-size: .8125rem; line-height: 1.3; }
.hb-more > .hb-person__mail { margin-block-start: 1.5rem; font-family: var(--hb-sans); font-size: .9375rem; }

.hb-office { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--hb-putz); }
.hb-office__names { padding: 0; list-style: none; font-family: var(--hb-sans); font-size: 1.0625rem; line-height: 1.9; }
.wp-block-group.hb-office > .hb-office__names { margin-block-start: 1rem; }

/* ---------- Karriere ---------- */
.hb-karriere { background: var(--hb-putz); }
.wp-block-group.hb-split__aside > .hb-lead { margin-block-start: 1.5rem; max-width: 30rem; }
.wp-block-group.hb-split__aside > .hb-karriere__image { margin-block-start: clamp(2rem, 4vw, 3rem); }
.hb-karriere .hb-karriere__image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.wp-block-group.hb-jobs { display: grid; gap: 1.5rem; }
.hb-job { padding: clamp(1.5rem, 3.5vw, 2.75rem); background: var(--hb-white); }
.hb-job__title { font-family: var(--hb-sans); font-size: var(--wp--preset--font-size--large); font-weight: 650; font-stretch: 84%; line-height: 1.2; }
.hb-job__meta { font-family: var(--hb-sans); font-size: .9375rem; color: var(--hb-grey); }
.wp-block-group.hb-job > .hb-job__meta { margin-block-start: .4rem; }
.wp-block-group.hb-job > .hb-more { margin-block-start: 1.25rem; }
.hb-more > h4 { margin-block-start: 1.75rem; font-family: var(--hb-sans); font-size: 1rem; font-weight: 650; }
.hb-more > ul:not(.hb-tags) { margin-block-start: .5rem; padding-left: 1.1rem; }
.hb-more ul:not(.hb-tags) li + li { margin-top: .3rem; }
.hb-more ul:not(.hb-tags) li::marker { color: var(--hb-red); }
.hb-more > .hb-job__contact { font-family: var(--hb-sans); font-size: .9375rem; }
.hb-more > .wp-block-buttons { margin-block-start: 1.5rem; }

/* ---------- Kontakt ---------- */
.hb-kontakt { background: var(--hb-slate); color: var(--hb-white); }
.wp-block-group.hb-kontakt__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
	.wp-block-group.hb-kontakt__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: clamp(3rem, 6vw, 6rem);
		align-items: stretch;
	}
}
.wp-block-group.hb-kontakt__info > .hb-kontakt__item { margin-block-start: 1.6rem; }
.wp-block-group.hb-kontakt__info > .hb-section__title + .hb-kontakt__item { margin-block-start: clamp(2rem, 4vw, 3rem); }
.hb-label { font-family: var(--hb-sans); font-size: .8125rem; font-weight: 600; letter-spacing: .03em; color: var(--hb-slate-light); }
.hb-value { font-family: var(--hb-sans); font-size: var(--wp--preset--font-size--large); font-weight: 400; font-stretch: 92%; line-height: 1.4; }
.wp-block-group.hb-kontakt__item > .hb-value { margin-block-start: .2rem; }
.hb-kontakt a { color: inherit; text-decoration-color: rgba(255, 255, 255, .45); }
.hb-kontakt a:hover { color: var(--hb-white); text-decoration-color: var(--hb-white); }
.wp-block-group.hb-kontakt__info > .hb-kontakt__buttons { margin-block-start: 2.25rem; }
.hb-kontakt .wp-block-button > .wp-block-button__link { background: var(--hb-white); color: var(--hb-ink); }
.hb-kontakt .wp-block-button > .wp-block-button__link:hover { background: var(--hb-putz); color: var(--hb-ink); }
.hb-kontakt .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(.9rem - 1px) calc(1.4rem - 1px);
	border: 1px solid rgba(255, 255, 255, .7);
	background: transparent;
	color: var(--hb-white);
}
.hb-kontakt .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .1); color: var(--hb-white); }

.hb-map { position: relative; min-height: 24rem; height: 100%; overflow: hidden; background: #36424A; }
.hb-map .hb-map__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hb-map__overlay {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .9rem;
	padding: 5rem clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
	background: linear-gradient(to top, rgba(28, 34, 38, .9) 35%, rgba(28, 34, 38, 0));
}
.hb-map__load {
	appearance: none;
	padding: .9rem 1.4rem;
	border: 0;
	border-radius: 2px;
	background: var(--hb-white);
	color: var(--hb-ink);
	font: 600 .9375rem/1.2 var(--hb-sans);
	cursor: pointer;
}
.hb-map__load:hover { background: var(--hb-putz); }
.hb-map__note { max-width: 30rem; margin: 0; font: .8125rem/1.5 var(--hb-sans); color: #E1E7EA; }
.hb-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
	.hb-map { min-height: 34rem; }
}

/* ---------- Fußbereich ---------- */
.hb-site-footer { background: var(--hb-slate); color: var(--hb-white); }
.hb-footer { border-top: 1px solid rgba(255, 255, 255, .16); }
.wp-block-group.hb-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.hb-footer .wp-block-site-logo { line-height: 0; }
.hb-footer .wp-block-site-logo img { width: 168px; height: auto; filter: brightness(0) invert(1); }
.hb-footer__nav { font-stretch: 88%; }
.hb-footer__nav .wp-block-navigation__container { gap: .5rem 1.75rem; }
.hb-footer__nav a { color: var(--hb-white); }
.hb-footer__nav a:hover { color: var(--hb-slate-light); }
.wp-block-group.hb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem 2rem;
	padding-block: 0 clamp(2rem, 4vw, 3rem);
	font-family: var(--hb-sans);
	font-size: .8125rem;
	color: var(--hb-slate-light);
}
.hb-footer__legal { display: flex; gap: 1.5rem; }
.hb-footer__bottom a { color: var(--hb-slate-light); text-decoration: none; }
.hb-footer__bottom a:hover { color: var(--hb-white); text-decoration: underline; }
@media (max-width: 899px) {
	.hb-footer__nav .wp-block-navigation__container { justify-content: flex-start; }
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.hb-page { padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
.hb-page__title { font-size: var(--wp--preset--font-size--xx-large); font-weight: 280; font-stretch: 74%; line-height: 1; }
.hb-page .wp-block-post-content { margin-block-start: 2.5rem; }
.hb-page .wp-block-post-content h2 { margin-block-start: 2.5rem; font-size: var(--wp--preset--font-size--x-large); }