/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--color-primary: #16163F;
	--color-primary-dark: #211F40;
	--color-accent: #E42526;
	--color-text: #4a4a4a;
	--color-white: #ffffff;

	--font-heading: 'Merriweather', serif;
	--font-body: 'Montserrat', sans-serif;

	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 3rem;
	--spacing-xl: 4rem;

	/* Shared reading-width cap: every section's content sits inside this,
	   centered, so all sections share the same left/right gutters and
	   nothing stretches edge-to-edge on wide screens. Full-bleed section
	   backgrounds (hero, service-cards, process, cta-band) stay full
	   width — only their content is constrained. */
	--content-max-width: 1200px;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 200;
	color: var(--color-text);
	background-color: var(--color-white);
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 300;
}

p {
	margin: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	/* Every <img> here carries width/height HTML attributes (for layout
	   stability). Those attributes apply as a presentational height hint
	   whenever CSS scales width without also setting height, which
	   distorts the image at any width other than its native one. Setting
	   height:auto explicitly makes the browser preserve aspect ratio via
	   the attributes' implied aspect-ratio instead. */
	height: auto;
	display: block;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   site-header / site-nav
   ========================================================================== */
.site-header {
	text-align: center;
	padding: var(--spacing-md) 0;
}

.site-header__logo img {
	/* Scales smoothly with the viewport between a comfortable mobile
	   floor and a desktop ceiling, instead of jumping between three
	   fixed max-widths at each breakpoint. */
	width: clamp(220px, 60vw, 640px);
	margin: 0 auto;
}

.site-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: var(--color-white);
	display: flex;
	justify-content: center;
	padding-top: var(--spacing-md);
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.site-nav__link {
	display: block;
	padding: 3px 18px;
	font-family: var(--font-body);
	color: var(--color-primary);
	border-bottom: 2px solid transparent;
}

.site-nav__link:hover,
.site-nav__link:focus,
.site-nav__link--active {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

.site-nav__toggle {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.site-nav__toggle-label {
	display: none;
}

@media (max-width: 921px) {
	.site-nav {
		justify-content: flex-start;
		padding: 0 20px;
	}

	.site-nav__toggle-label {
		display: block;
		cursor: pointer;
		padding: 12px;
	}

	.site-nav__toggle:focus-visible + .site-nav__toggle-label {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	.site-nav__toggle-icon,
	.site-nav__toggle-icon::before,
	.site-nav__toggle-icon::after {
		display: block;
		width: 24px;
		height: 2px;
		background-color: var(--color-primary);
	}

	.site-nav__toggle-icon::before,
	.site-nav__toggle-icon::after {
		content: "";
		position: relative;
	}

	.site-nav__toggle-icon::before {
		top: 7px;
	}

	.site-nav__toggle-icon::after {
		top: 5px;
	}

	.site-nav__list {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.site-nav__toggle:checked ~ .site-nav__list {
		display: flex;
	}

	.site-nav__link {
		padding: 12px 0;
		border-bottom: 1px solid #eaeaea;
	}
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--spacing-xl) var(--spacing-md);
	/* Measured directly from the live Phase 1 page: the hero background
	   image is a known-missing asset, and its --color-primary overlay
	   renders via mix-blend-mode against the page background rather than
	   as a flat fill — sampling the actual composited pixel reproduces
	   that fallback appearance without depending on blend-mode math. */
	background-color: #696973;
}

.hero__overlay {
	max-width: 780px;
}

.hero__heading {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: 56px;
	line-height: 1.5em;
	letter-spacing: 0.3px;
	color: var(--color-white);
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.57);
}

.hero__attribution {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	color: var(--color-white);
	margin-top: var(--spacing-md);
}

@media (max-width: 921px) {
	.hero {
		min-height: 480px;
	}

	.hero__heading {
		font-size: 42px;
	}
}

@media (max-width: 544px) {
	.hero__heading {
		font-size: 32px;
	}
}

/* ==========================================================================
   service-cards / about-teaser
   ========================================================================== */
.service-cards {
	background-color: var(--color-primary);
	padding: var(--spacing-xl) var(--spacing-md);
}

.service-cards__inner {
	max-width: var(--content-max-width);
	min-height: 700px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-lg);
}

.service-cards__intro {
	flex: 1 1 320px;
	color: var(--color-white);
}

.service-cards__eyebrow {
	font-family: var(--font-body);
	font-weight: 300;
	color: var(--color-white);
	margin-bottom: var(--spacing-sm);
}

.service-cards__heading {
	font-size: 30px;
	color: var(--color-white);
	margin-bottom: var(--spacing-sm);
}

.service-cards__text {
	font-family: var(--font-body);
	font-weight: 200;
	color: var(--color-white);
}

.service-cards__list {
	flex: 2 1 480px;
	display: flex;
	gap: var(--spacing-sm);
}

.service-cards__card {
	flex: 1 1 0;
	max-width: 220px;
	height: 335px;
	perspective: 1000px;
}

.service-cards__card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.service-cards__card:hover .service-cards__card-inner,
.service-cards__card:focus-within .service-cards__card-inner {
	transform: rotateY(180deg);
}

.service-cards__card-front,
.service-cards__card-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--spacing-sm);
}

.service-cards__card-front img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-cards__card-back {
	transform: rotateY(180deg);
	background-color: #5A6063BD;
	color: var(--color-white);
}

.service-cards__card-back--sozialrecht {
	background-color: #61CE70;
}

.service-cards__card-back--referent {
	background-color: #E42526AB;
}

.service-cards__card-back h3 {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 24px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.service-cards__card-back p {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.service-cards__card-button {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	color: var(--color-white);
	background-color: var(--color-accent);
	padding: 10px 20px;
}

.service-cards__card-button:hover {
	background-color: #54595F;
}

/* CSS-drawn arrow used on CTA buttons (service-cards__card-button,
   cta-band__button) in place of Font Awesome's fa-long-arrow-alt-right —
   the webfont binary that glyph needs was never recoverable from the
   Wayback Machine archive (see report/missing-resources.md), so it always
   rendered as a missing-glyph box. currentColor means it automatically
   matches each button's text color, including on hover. */
.button-arrow {
	display: inline-block;
	width: 15px;
	height: 10px;
	margin-left: 8px;
	position: relative;
	vertical-align: middle;
}

.button-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 2px;
	background-color: currentColor;
	transform: translateY(-50%);
}

.button-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid currentColor;
	transform: translateY(-50%);
}

.about-teaser {
	flex-basis: 100%;
	text-align: center;
	color: var(--color-white);
}

.about-teaser__eyebrow,
.about-teaser__heading {
	color: var(--color-white);
	margin-bottom: var(--spacing-sm);
}

.about-teaser__card {
	max-width: 400px;
	height: 560px;
	margin: 0 auto var(--spacing-md);
}

.about-teaser__card-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.about-teaser__card-front {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	padding: var(--spacing-sm);
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
	border-bottom: 4px solid var(--color-accent);
}

.about-teaser__card-front {
	/* Photo as a background-image rather than an <img> — an absolutely
	   positioned <img> stretched via width/height:100% fights the global
	   img reset's height:auto (see that rule's comment) inconsistently
	   across browsers (correct in Chrome, mis-sized in Safari). A
	   background-image sidesteps replaced-element sizing entirely, same
	   pattern as .hero. Color below is the fallback if it fails to load,
	   measured from the live Phase 1 page's missing-image/blend-mode
	   compositing (same situation as .hero — see that rule's comment). */
	background-color: #1D6F6F;
	background-image: url("../images/mark-schaefer.jpg");
	background-size: cover;
	background-position: top center;
	opacity: 1;
}

.about-teaser__card-front h3,
.about-teaser__card-front p {
	position: relative;
	z-index: 1;
}

.about-teaser__card-front::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
}

.about-teaser__card-front h3 {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 24px;
	color: var(--color-white);
	margin-bottom: 15px;
}

.about-teaser__card-front p {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	color: var(--color-white);
}

@media (max-width: 921px) {
	.service-cards__list {
		flex-direction: column;
	}

	.service-cards__card {
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ==========================================================================
   process
   ========================================================================== */
.process {
	/* Measured from the live Phase 1 page (same missing-image/blend-mode
	   fallback situation as .hero — see that rule's comment). */
	background-color: #a3a6a8;
	color: var(--color-white);
	text-align: center;
	padding: var(--spacing-xl) var(--spacing-md);
}

.process__eyebrow {
	font-family: var(--font-body);
	font-weight: 300;
	color: var(--color-white);
}

.process__heading {
	font-size: 30px;
	color: var(--color-white);
	margin: var(--spacing-sm) 0;
}

.process__subtext {
	font-family: var(--font-body);
	font-weight: 200;
	margin-bottom: var(--spacing-lg);
}

.process__list {
	display: flex;
	gap: var(--spacing-md);
	max-width: 1200px;
	margin: 0 auto;
}

.process__step {
	flex: 1;
	text-align: left;
	background-color: var(--color-white);
	border-left: 4px solid var(--color-accent);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
	padding: 50px 70px;
}

.process__step-number {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 50px;
	color: var(--color-primary-dark);
	margin-bottom: var(--spacing-sm);
}

.process__step-title {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4em;
	color: var(--color-text);
	margin-bottom: var(--spacing-sm);
}

.process__step-text {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	color: var(--color-primary-dark);
}

@media (max-width: 921px) {
	.process__list {
		flex-direction: column;
	}

	.process__step {
		padding: 35px 22px;
	}
}

@media (max-width: 544px) {
	.process__step {
		padding: 35px;
	}
}

/* ==========================================================================
   mission
   ========================================================================== */
.mission {
	background-color: var(--color-primary);
	max-width: 581px;
	min-height: 547px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--spacing-md);
	padding: var(--spacing-lg);
}

.mission__heading {
	font-family: var(--font-heading);
	font-weight: 100;
	font-size: 50px;
	line-height: 1.4em;
	letter-spacing: 1.8px;
	color: var(--color-white);
	border-top: 1px solid var(--color-white);
	border-bottom: 1px solid var(--color-white);
	padding: var(--spacing-sm) 0;
}

.mission__cite {
	font-style: normal;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	color: var(--color-white);
}

.mission .service-cards__card-button:hover {
	color: #7A7A7A;
	background-color: var(--color-white);
}

@media (max-width: 921px) {
	.mission__heading {
		font-size: 34px;
	}
}

/* ==========================================================================
   testimonials
   ========================================================================== */
.testimonials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: var(--spacing-xl) var(--spacing-md);
}

.testimonials__intro {
	flex: 1 1 300px;
	border-left: 4px solid var(--color-accent);
	padding: 85px 0 85px 50px;
}

.testimonials__heading {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: 42px;
	line-height: 1.4em;
	color: var(--color-primary);
}

.testimonials__carousel {
	flex: 2 1 500px;
	/* Without this, the scrollable track's 9 full-width slides inflate
	   this flex item's intrinsic min-width to their combined content
	   width instead of the flex-basis above, blowing out the row. */
	min-width: 0;
}

.testimonials__slides {
	/* All slides share the same grid cell, so the container's height is
	   always the tallest slide's height (avoids a layout jump between
	   short/long quotes) while only the active slide is visible. */
	display: grid;
}

.testimonials__slide {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
}

.testimonials__slide--active {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.testimonials__slide {
		transition: none;
	}
}

.testimonials__monogram {
	/* Sits under the heading, inside .testimonials__intro, reading as a
	   small signature badge rather than a block-level image — this is
	   the same file the plan called a "star rating" icon, but it's
	   actually a monogram; placed here between the heading and the
	   carousel content instead of repeated above every quote. */
	width: 64px;
	height: auto;
	margin-top: var(--spacing-md);
}

.testimonials__text {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5em;
	color: #3d4459;
	margin-bottom: var(--spacing-sm);
}

.testimonials__cite {
	font-style: normal;
	display: block;
}

.testimonials__name {
	font-family: var(--font-heading);
	font-size: 16px;
	color: var(--color-primary-dark);
	margin-right: var(--spacing-sm);
}

.testimonials__title {
	font-family: var(--font-body);
	font-size: 14px;
	color: #3d4459;
}

.testimonials__controls {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
}

.testimonials__arrow {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-primary);
	background: none;
	cursor: pointer;
}

.testimonials__arrow::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

.testimonials__arrow--prev::before {
	border-right: 8px solid var(--color-primary);
	margin-right: 2px;
}

.testimonials__arrow--next::before {
	border-left: 8px solid var(--color-primary);
	margin-left: 2px;
}

.testimonials__arrow:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.testimonials__arrow--prev:hover::before {
	border-right-color: var(--color-white);
}

.testimonials__arrow--next:hover::before {
	border-left-color: var(--color-white);
}

.testimonials__dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.testimonials__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--color-primary);
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.testimonials__dot:hover {
	border-color: var(--color-accent);
}

.testimonials__dot--active {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.testimonials__arrow:focus-visible,
.testimonials__dot:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

@media (max-width: 921px) {
	.testimonials__intro {
		padding: var(--spacing-md);
		border-left: none;
		border-top: 4px solid var(--color-accent);
	}

	.testimonials__heading {
		font-size: 38px;
	}
}

/* ==========================================================================
   cta-band
   ========================================================================== */
.cta-band {
	background-color: var(--color-primary);
	min-height: 687px;
	margin: 75px 0 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md);
	text-align: center;
	padding: var(--spacing-lg);
}

.cta-band__heading {
	font-family: var(--font-heading);
	font-weight: 100;
	font-size: 55px;
	line-height: 1.4em;
	color: var(--color-white);
}

.cta-band__text {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 18px;
	color: var(--color-white);
}

.cta-band__button {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	color: var(--color-white);
	background-color: var(--color-accent);
	padding: 10px 20px;
}

.cta-band__button:hover {
	color: #7A7A7A;
	background-color: var(--color-white);
}

.cta-band__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	justify-content: center;
}

@media (max-width: 921px) {
	.cta-band {
		margin: 80px 0;
	}

	.cta-band__heading {
		font-size: 45px;
	}
}

@media (max-width: 544px) {
	.cta-band__heading {
		font-size: 34px;
	}
}

/* ==========================================================================
   contact-info
   ========================================================================== */
.contact-info {
	display: flex;
	gap: var(--spacing-md);
	max-width: 1200px;
	margin: -100px auto 0;
	padding: 0 var(--spacing-md);
	position: relative;
	z-index: 1;
}

.contact-info__card {
	flex: 1;
	background-color: var(--color-white);
	border-left: 4px solid var(--color-accent);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
	padding: 50px 70px;
}

.contact-info__eyebrow {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 50px;
	color: var(--color-primary-dark);
	margin-bottom: var(--spacing-sm);
}

.contact-info__title {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4em;
	color: var(--color-text);
	margin-bottom: var(--spacing-sm);
}

.contact-info__text {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	color: var(--color-primary-dark);
}

@media (max-width: 921px) {
	.contact-info {
		flex-direction: column;
		margin-top: var(--spacing-lg);
	}

	.contact-info__card {
		padding: 35px 22px;
	}
}

@media (max-width: 544px) {
	.contact-info__card {
		padding: 35px;
	}
}

/* ==========================================================================
   site-footer
   ========================================================================== */
.site-footer {
	border-top: 1px solid var(--color-accent);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: var(--spacing-md);
}

.site-footer__nav {
	display: flex;
	gap: var(--spacing-md);
}

.site-footer__nav a {
	font-family: var(--font-body);
	color: var(--color-primary-dark);
}

.site-footer__nav a:hover {
	color: var(--color-accent);
}

.site-footer__copyright {
	font-family: var(--font-body);
	color: #000000;
	text-align: right;
}

@media (max-width: 921px) {
	.site-footer {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   page-header
   ========================================================================== */
.page-header {
	text-align: center;
	padding: var(--spacing-xl) var(--spacing-md);
}

.page-header__eyebrow,
.intro__eyebrow,
.bio__eyebrow,
.section-intro__eyebrow,
.info-tiles__label {
	font-family: var(--font-body);
	font-weight: 300;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
}

.page-header__heading {
	font-size: 40px;
	color: var(--color-primary);
	/* Datenschutz's title is a single long German compound word with no
	   natural break point; without this it overflows the header on
	   narrow viewports instead of wrapping. */
	overflow-wrap: break-word;
}

@media (max-width: 544px) {
	.page-header__heading {
		font-size: 30px;
	}
}

/* ==========================================================================
   intro
   ========================================================================== */
.intro {
	padding: 0 var(--spacing-md) var(--spacing-xl);
}

.intro__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
}

.intro__col {
	flex: 1 1 320px;
}

/* For an .intro split that's just a heading in one column and a single
   paragraph in the other (no list/card content to justify two columns),
   stack them instead — side-by-side reads unbalanced when one side is a
   short heading and the other a full paragraph. */
.intro__inner--stacked {
	flex-direction: column;
	gap: var(--spacing-sm);
}

.intro__inner--stacked .intro__col {
	/* .intro__col's flex-basis is a width basis for the default row
	   layout; in the stacked column layout that same value becomes a
	   height basis instead, forcing each column artificially tall. */
	flex: none;
}

.intro__heading {
	font-size: 30px;
	color: var(--color-primary);
}

.intro__heading + .intro__text {
	margin-top: var(--spacing-sm);
}

.intro__text {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	line-height: 1.6em;
	color: var(--color-text);
}

.intro__text + .intro__subheading {
	margin-top: var(--spacing-md);
}

/* ==========================================================================
   bio
   ========================================================================== */
.bio {
	padding: var(--spacing-xl) var(--spacing-md);
}

.bio__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
}

.bio__heading {
	font-size: 30px;
	color: var(--color-primary);
	margin-bottom: var(--spacing-lg);
}

.bio__columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
}

.bio__photo {
	flex: 1 1 320px;
	max-width: 400px;
	aspect-ratio: 3 / 4;
	background-color: #eaeaea;
	background-image: url("../images/mark-schaefer.jpg");
	background-size: cover;
	background-position: top center;
}

.bio__accordion {
	flex: 2 1 400px;
}

.bio__accordion-item {
	border-bottom: 1px solid #eaeaea;
}

.bio__accordion-summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	color: var(--color-primary);
	cursor: pointer;
}

.bio__accordion-summary::-webkit-details-marker {
	display: none;
}

.bio__accordion-summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.bio__accordion-item[open] .bio__accordion-summary::after {
	transform: rotate(-135deg);
}

.bio__accordion-content {
	padding: 0 0 var(--spacing-md);
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	line-height: 1.6em;
	color: var(--color-text);
}

.bio__accordion-content p {
	margin-bottom: var(--spacing-sm);
}

.bio__accordion-content p:last-child {
	margin-bottom: 0;
}

.bio__accordion-content a {
	color: var(--color-accent);
	text-decoration: underline;
}

@media (max-width: 921px) {
	.bio__photo {
		max-width: 100%;
	}
}

/* ==========================================================================
   contact-details
   ========================================================================== */
.contact-details {
	padding: 0 var(--spacing-md) var(--spacing-xl);
}

.contact-details__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
}

.contact-details__info {
	flex: 1 1 320px;
}

.contact-details__heading {
	font-size: 30px;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
}

.contact-details__text {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	line-height: 1.6em;
	color: var(--color-text);
	margin-bottom: var(--spacing-md);
}

.contact-details__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	line-height: 1.8em;
	color: var(--color-text);
}

.contact-details__list a {
	color: var(--color-text);
	text-decoration: underline;
}

.contact-details__map {
	flex: 1 1 320px;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}

@media (max-width: 921px) {
	.contact-details__map {
		aspect-ratio: 16 / 9;
	}
}

/* ==========================================================================
   section-intro
   ========================================================================== */
.section-intro {
	text-align: center;
	padding: 0 var(--spacing-md) var(--spacing-lg);
}

.section-intro__eyebrow {
	text-align: center;
}

.section-intro__heading {
	font-size: 32px;
	color: var(--color-primary);
	overflow-wrap: break-word;
}

.section-intro__heading + .section-intro__eyebrow {
	margin: var(--spacing-sm) 0 0;
}

@media (max-width: 544px) {
	.section-intro__heading {
		font-size: 26px;
	}
}

/* ==========================================================================
   info-tiles
   ========================================================================== */
.info-tiles {
	padding: var(--spacing-xl) var(--spacing-md);
}

.info-tiles__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
}

.info-tiles__heading {
	font-size: 30px;
	color: var(--color-primary);
	text-align: center;
}

.info-tiles__label {
	text-align: center;
	margin: var(--spacing-sm) 0 var(--spacing-lg);
}

.info-tiles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-md);
}

.info-tiles__card {
	height: 380px;
	perspective: 1000px;
}

.info-tiles__card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.info-tiles__card:hover .info-tiles__card-inner,
.info-tiles__card:focus-within .info-tiles__card-inner {
	transform: rotateY(180deg);
}

.info-tiles__card-front,
.info-tiles__card-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	/* align-items: stretch (not center) so text children get the full
	   container width to wrap within — with align-items: center a flex
	   column child sizes to its own max-content width, and for the long
	   unbroken paragraphs in some tiles (Vergütungen, Beratungshilfe)
	   that made the text wider than the card and clipped on both sides.
	   text-align: center below still centers the wrapped lines visually. */
	align-items: stretch;
	/* safe center (not bare center): when content overflows the fixed
	   height, bare center distributes overflow to both the top and
	   bottom of the flex container, but scrollTop can never go negative,
	   so whatever spills past the top edge becomes permanently
	   unreachable by scrolling. safe center falls back to start-alignment
	   only when content actually overflows, keeping the heading and top
	   of the text reachable, while leaving non-overflowing tiles centered
	   as before. */
	justify-content: safe center;
	text-align: center;
	padding: var(--spacing-md);
	overflow-y: auto;
	color: var(--color-white);
}

.info-tiles__card-front {
	/* Elementor Pro's built-in flip-box widget default front color.
	   This page's own per-widget CSS was never archived (post-396.css
	   is an empty placeholder, see report/missing-resources.md), but
	   this value was confirmed by rendering the live Phase 1 page and
	   reading its computed style — a framework default, not a guess. */
	background-color: #1ABC9C;
}

.info-tiles__card-back {
	/* Same verification method as .info-tiles__card-front above. */
	background-color: #4054B2;
	transform: rotateY(180deg);
}

.info-tiles__card-title {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 22px;
	margin-bottom: var(--spacing-sm);
}

.info-tiles__card-text {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 15px;
	line-height: 1.5em;
	/* The Vergütungen/Beratungshilfe tiles include long plain-text URLs
	   with no natural break points; without this they overflow the card
	   horizontally instead of wrapping. */
	overflow-wrap: break-word;
}

.info-tiles__card-button {
	/* Opt back out of the parent's align-items: stretch (needed on
	   .info-tiles__card-back to fix text-clipping — see above) so this
	   button keeps its natural compact width instead of stretching to
	   fill the card's cross-axis. */
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3em;
	color: var(--color-white);
	border: 1px solid var(--color-white);
	padding: 10px 20px;
	text-align: center;
}

.info-tiles__card-button:hover {
	background-color: var(--color-white);
	color: #4054B2;
}

@media (max-width: 544px) {
	.info-tiles__card {
		height: 420px;
	}
}

/* ==========================================================================
   intro extensions (stacked subsections)
   ========================================================================== */
.intro__group + .intro__group {
	margin-top: var(--spacing-md);
}

.intro__subheading {
	font-size: 22px;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
}

.intro__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	line-height: 1.8em;
	color: var(--color-text);
}

/* ==========================================================================
   highlight-grid
   ========================================================================== */
.highlight-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--spacing-sm);
}

.highlight-grid__card {
	/* Elementor call-to-action widgets whose background image was never
	   archived (see report/missing-resources.md) — no per-page CSS
	   survived either (post-279.css is a comment-only placeholder), so
	   this uses the sitewide navy token directly rather than a sampled
	   fallback color. No hover/flip interaction: the source content only
	   ever had front-face text, no back face, unlike .service-cards__card
	   or .info-tiles__card. */
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--spacing-md);
	min-height: 160px;
}

.highlight-grid__text {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 15px;
	line-height: 1.5em;
}

/* ==========================================================================
   legal-content
   ========================================================================== */
.legal-content {
	padding: 0 var(--spacing-md) var(--spacing-xl);
}

.legal-content__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
}

.legal-content__section + .legal-content__section {
	margin-top: var(--spacing-lg);
}

.legal-content__heading {
	font-size: 24px;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
}

.legal-content__text {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	line-height: 1.6em;
	color: var(--color-text);
	/* The Datenschutz page's Analyse-Tools section carries several long
	   plain-text URLs with no natural break points; without this they
	   overflow the content column horizontally instead of wrapping. */
	overflow-wrap: break-word;
}

.legal-content__text + .legal-content__text,
.legal-content__text + .legal-content__list,
.legal-content__list + .legal-content__text {
	margin-top: var(--spacing-sm);
}

.legal-content__list {
	margin: 0;
	padding-left: 1.25em;
	font-family: var(--font-body);
	font-weight: 200;
	font-size: 16px;
	line-height: 1.8em;
	color: var(--color-text);
	overflow-wrap: break-word;
}

.legal-content__list--plain {
	list-style: none;
	padding-left: 0;
}

.legal-content__list li + li {
	margin-top: var(--spacing-sm);
}

.legal-content a {
	color: var(--color-text);
	text-decoration: underline;
}