/* =============================================================================
   pages.css — Page-specific styles
   Phase 3: Homepage sections
   Phase 4+: Further pages added here
   ============================================================================= */

/* .sr-only — screen-reader only utility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* =============================================================================
   1. Hero
   ============================================================================= */

.home-hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, var(--o4all-color-ink) 0%, var(--o4all-color-navy) 55%, var(--o4all-color-ink) 100%);
}

.home-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #050b14;
}

/* If black bars are embedded in the video file, prefer exporting a cropped
   video without letterboxing. CSS scale is only a fallback. */
.home-hero__video,
.home-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Scale compensates for letterboxing embedded in the video file.
   Increase to 1.10 or 1.12 if bands still appear at certain viewport ratios. */
.home-hero__video {
	--hero-video-scale: 1.08;
	transform: scale(var(--hero-video-scale));
	transform-origin: center center;
}

.home-hero__mobile-img {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(13, 27, 42, 0.92) 0%,
		rgba(13, 27, 42, 0.68) 55%,
		rgba(13, 27, 42, 0.32) 100%
	);
}

.home-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: 8rem 6rem;
}

.home-hero__content {
	max-width: 680px;
}


.home-hero__heading {
	font-family: var(--o4all-font-heading);
	font-size: var(--o4all-type-display, 4.5rem);
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
	margin-bottom: 1.5rem;
	hyphens: none;
	word-break: keep-all;
	overflow-wrap: normal;
}

.home-hero__subheading {
	font-size: 1.125rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	max-width: 560px;
	margin-bottom: 2.5rem;
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

@media (max-width: 767px) {
	.home-hero {
		min-height: 80vh;
	}

	.home-hero__video,
	.home-hero__poster {
		display: none;
	}

	.home-hero__mobile-img {
		display: block;
	}

	.home-hero__heading {
		font-size: clamp(2.25rem, 8vw, 3.5rem);
	}

	.home-hero__subheading {
		font-size: 1rem;
	}

	.home-hero__inner {
		padding-block: 6rem 4rem;
	}

	.home-hero__actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 374px) {
	.home-hero__heading {
		font-size: 2rem;
	}
}

/* =============================================================================
   3. Stats
   ============================================================================= */

.home-stats {
	background: var(--o4all-color-ink, #0D1B2A);
	padding-block: 3rem;
}

.home-stats__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.home-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.home-stats__number-wrap {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.125rem;
}

.home-stats__number {
	font-family: var(--o4all-font-heading);
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 700;
	color: var(--o4all-color-accent, #C9A84C);
	line-height: 1;
}

.home-stats__suffix {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--o4all-color-accent, #C9A84C);
	line-height: 1;
}

.home-stats__label {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	max-width: 160px;
	margin: 0;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.home-stats__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 1.5rem;
	}
}

@media (max-width: 374px) {
	.home-stats__list {
		gap: 1.5rem 1rem;
	}

	.home-stats__number {
		font-size: 2.25rem;
	}
}

/* =============================================================================
   4. Services
   ============================================================================= */

.home-services__header {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 2rem var(--o4all-grid-gap);
	margin-bottom: 3rem;
	align-items: start;
	border-bottom: 1px solid var(--o4all-border);
	padding-bottom: 1.5rem;
}

.home-services__header-right {
	grid-column: 3;
}

.home-services__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--o4all-color-ink, #0D1B2A);
	line-height: 1.15;
	margin: 0;
}

.home-services__intro {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--o4all-text-secondary);
	margin: 0;
	padding-top: 0.25rem;
}

.home-services__grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-card {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	transition: border-color var(--o4all-transition), box-shadow var(--o4all-transition);
}

.service-card:hover {
	border-color: var(--o4all-color-accent);
	box-shadow: var(--o4all-shadow-card-hover);
}

.service-card__link {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.service-card__link:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
	border-radius: var(--o4all-radius-card);
}

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(201, 168, 76, 0.10);
	border-radius: 8px;
	margin-bottom: 1rem;
	flex-shrink: 0;
}

.service-card__icon svg {
	width: 22px;
	height: 22px;
	color: var(--o4all-color-accent, #C9A84C);
}

.service-card__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--o4all-color-ink, #0D1B2A);
	margin: 0 0 0.625rem;
}

.service-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--o4all-text-secondary);
	margin: 0 0 auto;
	padding-bottom: 1rem;
}

.service-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--o4all-color-accent-text, #8A6A1E);
	transition: gap 0.2s ease;
	margin-top: auto;
}

.service-card__cta svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.service-card:hover .service-card__cta {
	gap: 0.5rem;
}

.home-services__footer {
	margin-top: 2.5rem;
	text-align: center;
}

.o4-admin-notice {
	padding: 1rem 1.25rem;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: var(--o4all-radius-card);
	color: #664d03;
	font-size: 0.9rem;
}

@media (max-width: 1023px) {
	.home-services__header {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.home-services__header-right {
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.home-services__grid {
		gap: 1rem;
	}

	.service-card__link {
		padding: 1.25rem;
	}
}

/* =============================================================================
   5. About
   ============================================================================= */

.home-about {
	background: var(--o4all-color-ink, #0D1B2A);
	color: #fff;
}

.home-about__inner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 4rem;
	align-items: center;
}

.home-about__media {
	position: relative;
}

.home-about__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	aspect-ratio: 4/5;
}

.home-about__img-placeholder {
	width: 100%;
	aspect-ratio: 4/5;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(201, 168, 76, 0.06) 100%);
	border-radius: 16px;
	border: 1px solid rgba(201, 168, 76, 0.18);
	position: relative;
	overflow: hidden;
}

.home-about__img-placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 40% 60%, rgba(201, 168, 76, 0.08) 0%, transparent 60%);
	pointer-events: none;
}

.home-about__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
	margin: 0 0 1rem;
}

.home-about__tagline {
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--o4all-color-accent, #C9A84C);
	margin: 0 0 1.25rem;
	line-height: 1.4;
}

.home-about__subheading {
	font-size: 1.0625rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1rem;
}

.home-about__text {
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 2rem;
}

.home-about__text p {
	margin: 0 0 1em;
}

.home-about__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.home-about__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.home-about__img,
	.home-about__img-placeholder {
		aspect-ratio: 16/9;
	}
}

/* =============================================================================
   6. Why ONE4ALL
   ============================================================================= */

.page-template-page-ueber-uns .home-why {
	background: var(--o4all-bg-subtle);
}

.home-why__header {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 2rem var(--o4all-grid-gap);
	align-items: start;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--o4all-border);
	padding-bottom: 1.5rem;
}

.home-why__header-right {
	grid-column: 3;
}

.home-why__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0;
}

.home-why__intro {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--o4all-text-secondary);
	margin: 0;
	padding-top: 0.25rem;
}

.home-why__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
	counter-reset: why-num;
}

.why-card {
	counter-increment: why-num;
	padding: 1.75rem;
	background: var(--o4all-bg-white, #fff);
	border: 1px solid var(--o4all-border, #E2E4E9);
	border-radius: var(--o4all-radius-card);
}

.why-card__num {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--o4all-font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--o4all-color-accent);
}

.why-card__num::before {
	content: counter(why-num, decimal-leading-zero);
}

.why-card__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--o4all-color-ink, #0D1B2A);
	margin: 0 0 0.625rem;
}

.why-card__text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--o4all-text-secondary);
	margin: 0;
}

.home-why__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 2.5rem;
}

@media (max-width: 1023px) {
	.home-why__header {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.home-why__header-right {
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.home-why__grid {
		gap: 1rem;
	}

	.why-card {
		padding: 1.25rem;
	}
}

/* =============================================================================
   7. Testimonials (shared slider — used on Home + أœber uns)
   ============================================================================= */

.o4-testimonials {
	background: var(--o4all-bg-subtle);
}

.o4-testimonials__admin-note {
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--o4all-warning-bg);
	border: 1px dashed var(--o4all-warning);
	border-radius: var(--o4all-radius-card);
	color: var(--o4all-warning);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* Header row — heading left (5 col), empty gap (3 col), intro right (4 col) */
.o4-testimonials__header {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: var(--o4all-grid-gap);
	align-items: end;
	margin-bottom: 1.5rem;
}

.o4-testimonials__header-right {
	grid-column: 3;
}

.o4-testimonials__heading {
	margin: 0;
	font-family: var(--o4all-font-heading);
	font-size: var(--o4all-type-h2);
	line-height: var(--o4all-leading-heading);
	letter-spacing: var(--o4all-tracking-heading);
	color: var(--o4all-text-primary);
	max-width: 18ch;
}

.o4-testimonials__intro {
	margin: 0;
	font-size: var(--o4all-type-body-lg);
	line-height: var(--o4all-leading-body);
	color: var(--o4all-text-secondary);
	max-width: 52ch;
}

.o4-testimonials__divider {
	height: 1px;
	background: var(--o4all-border);
	margin-bottom: 2.5rem;
}

/* Slider container */
.o4-testimonials__slider {
	position: relative;
}

.o4-testimonials__viewport {
	overflow: hidden;
	width: 100%;
}

.o4-testimonials__track {
	--o4-tcard-n: 3;
	--o4-tcard-index: 0;
	/* Gap used by BOTH the flex layout and the card-width math — keep them in sync.
	   Overridden per breakpoint (0 on mobile). */
	--o4-tcard-gap: var(--o4all-grid-gap);
	list-style: none;
	margin: 0;
	padding: 4px;
	display: flex;
	gap: var(--o4-tcard-gap);
	/* The slide offset is applied by JS as a measured pixel translateX (see main.js,
	   initTestimonials → update). A CSS calc() with 100% nested inside a custom
	   property resolved to an invalid transform in Chrome and was silently dropped,
	   leaving the track un-translated. JS pixel math avoids that entirely. */
	transform: translateX(0);
	transition: transform 350ms ease;
	will-change: transform;
}

/* Each card occupies 1/N of the viewport minus the gap budget */
.o4-testimonials__track > .testimonial-card {
	flex: 0 0 calc((100% - var(--o4-tcard-gap) * (var(--o4-tcard-n) - 1)) / var(--o4-tcard-n));
	min-width: 0;
}

/* Card — light variant (default) */
.testimonial-card {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	padding: var(--o4all-card-padding);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	color: var(--o4all-color-ink);
	box-shadow: var(--o4all-shadow-card);
	transition: background var(--o4all-transition), color var(--o4all-transition),
		border-color var(--o4all-transition), box-shadow var(--o4all-transition);
}

/* Card — dark/highlighted variant (center card on desktop, active on mobile) */
.testimonial-card.is-active {
	background: var(--o4all-color-ink);
	border-color: var(--o4all-color-ink);
	color: var(--o4all-text-inverse);
	box-shadow: var(--o4all-shadow-card-hover);
}

.testimonial-card__stars {
	display: flex;
	gap: 4px;
}

.testimonial-card__star {
	font-size: 1.125rem;
	color: var(--o4all-border);
	line-height: 1;
}

.testimonial-card__star.is-filled {
	color: var(--o4all-color-accent);
}

.testimonial-card.is-active .testimonial-card__star {
	color: rgba(255, 255, 255, 0.24);
}

.testimonial-card.is-active .testimonial-card__star.is-filled {
	color: var(--o4all-color-accent);
}

.testimonial-card__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.testimonial-card__quote p {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: var(--o4all-leading-body);
	color: inherit;
}

.testimonial-card__quote p:last-child {
	margin-bottom: 0;
}

.testimonial-card__rule {
	height: 1px;
	background: var(--o4all-border);
	margin-top: auto;
}

.testimonial-card.is-active .testimonial-card__rule {
	background: rgba(255, 255, 255, 0.16);
}

.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.testimonial-card__initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--o4all-bg-subtle);
	color: var(--o4all-color-ink);
	font-family: var(--o4all-font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.testimonial-card.is-active .testimonial-card__initials {
	background: var(--o4all-color-accent);
	color: var(--o4all-color-ink);
}

.testimonial-card__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.testimonial-card__name {
	font-weight: 600;
	font-size: 0.9375rem;
	color: inherit;
	line-height: 1.3;
}

.testimonial-card__source {
	font-size: 0.8125rem;
	color: var(--o4all-text-muted-accessible);
	line-height: 1.3;
}

.testimonial-card.is-active .testimonial-card__source {
	color: rgba(255, 255, 255, 0.7);
}

/* Slider nav — centered circular prev/next */
.o4-testimonials__nav {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.o4-testimonials__nav[hidden] {
	display: none;
}

.o4-testimonials__btn {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--o4all-border);
	background: var(--o4all-bg-white);
	color: var(--o4all-color-ink);
	cursor: pointer;
	transition: background var(--o4all-transition), color var(--o4all-transition),
		border-color var(--o4all-transition), transform var(--o4all-transition);
}

.o4-testimonials__btn:hover,
.o4-testimonials__btn:focus-visible {
	background: var(--o4all-color-ink);
	border-color: var(--o4all-color-ink);
	color: var(--o4all-text-inverse);
	outline: none;
}

.o4-testimonials__btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.4);
}

.o4-testimonials__btn:active {
	transform: scale(0.96);
}

.o4-testimonials__btn svg {
	display: block;
}

/* Tablet — 2 visible cards */
@media (max-width: 1023px) {
	.o4-testimonials__track {
		--o4-tcard-n: 2;
	}

	.o4-testimonials__header {
		grid-template-columns: 1fr;
		gap: 1rem;
		align-items: start;
	}

	.o4-testimonials__header-right {
		grid-column: auto;
	}

	.o4-testimonials__heading {
		max-width: none;
	}
}

/* Mobile — single card */
@media (max-width: 767px) {
	.o4-testimonials__track {
		--o4-tcard-n: 1;
		--o4-tcard-gap: 0px;
	}

	.o4-testimonials__divider {
		margin-bottom: 1.75rem;
	}

	.o4-testimonials__nav {
		margin-top: 1.75rem;
	}

	/* On mobile the only visible card is always the active/dark card */
	.testimonial-card {
		min-height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.o4-testimonials__track,
	.testimonial-card,
	.o4-testimonials__btn {
		transition: none;
	}
}

/* =============================================================================
   8. Latest Posts
   ============================================================================= */

.home-latest__header {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 2rem var(--o4all-grid-gap);
	align-items: start;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--o4all-border);
	padding-bottom: 1.5rem;
}

.home-latest__header-right {
	grid-column: 3;
}

.home-latest__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0;
}

.home-latest__intro {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--o4all-text-secondary);
	margin: 0;
	padding-top: 0.25rem;
}

.home-latest__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
}

.post-card {
	background: var(--o4all-bg-white, #fff);
	border: 1px solid var(--o4all-border, #E2E4E9);
	border-radius: var(--o4all-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease;
}

.post-card:hover {
	box-shadow: 0 4px 20px rgba(13, 27, 42, 0.08);
}

.post-card__thumb-link {
	display: block;
	overflow: hidden;
}

.post-card__thumb {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.post-card:hover .post-card__thumb {
	transform: scale(1.03);
}

.post-card__body {
	padding: 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.post-card__date {
	font-size: 0.8125rem;
	color: var(--o4all-text-muted-accessible);
}

.post-card__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.post-card__title a {
	color: var(--o4all-color-ink, #0D1B2A);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--o4all-color-accent, #C9A84C);
}

.post-card__title a:focus-visible {
	outline: 2px solid var(--o4all-color-accent, #C9A84C);
	outline-offset: 2px;
	border-radius: 2px;
}

.post-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--o4all-text-secondary);
	margin: 0;
}

.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--o4all-color-accent-text, #8A6A1E);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	margin-top: auto;
	transition: gap var(--o4all-transition);
}

.post-card__more:hover {
	gap: 0.5rem;
}

.post-card__more:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.home-latest__footer {
	margin-top: 2.5rem;
	text-align: center;
}

@media (max-width: 1023px) {
	.home-latest__header {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.home-latest__header-right {
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.home-latest__grid {
		gap: 1rem;
	}
}

/* =============================================================================
   German hyphenation — prevents long compound words breaking layouts
   ============================================================================= */

.home-services__heading,
.home-about__heading,
.service-card__title,
.why-card__title,
.post-card__title {
	overflow-wrap: break-word;
}

/* =============================================================================
   Scroll-reveal utility (toggled by JS IntersectionObserver)
   ============================================================================= */

.o4-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.o4-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.o4-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =============================================================================
   Phase 4 — Service Pages (archive + single)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   PAGE HERO — shared dark header for archive + single service pages
   ----------------------------------------------------------------------------- */

.page-hero {
	background: linear-gradient(135deg, var(--o4all-color-ink) 0%, var(--o4all-color-navy) 100%);
	color: #fff;
	min-height: 440px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: var(--o4all-header-height, 80px);
	padding-bottom: 3.5rem;
	border-bottom: 3px solid var(--o4all-color-accent);
}

.page-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: calc(8 / 12 * 100%); /* 8 of 12 columns */
}

/* Breadcrumb inside dark hero — override light-bg defaults from components.css */
.page-hero__breadcrumb .breadcrumb__list,
.page-hero__breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 0;
	font-size: var(--o4all-type-small, 0.8125rem);
}

.page-hero__breadcrumb .breadcrumb__list a,
.page-hero__breadcrumb ol a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	padding-inline: 4px;
	transition: color var(--o4all-transition);
}

.page-hero__breadcrumb .breadcrumb__list a:hover,
.page-hero__breadcrumb ol a:hover {
	color: rgba(255, 255, 255, 0.9);
}

.page-hero__breadcrumb .breadcrumb__list > * + *::before,
.page-hero__breadcrumb ol li + li::before {
	content: 'â€؛';
	padding-inline: 2px;
	color: rgba(255, 255, 255, 0.4);
	pointer-events: none;
}

.page-hero__breadcrumb .breadcrumb__item--current,
.page-hero__breadcrumb .breadcrumb_last {
	color: rgba(255, 255, 255, 0.85);
	padding-inline: 4px;
}

.page-hero__title-row {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.page-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: rgba(201, 168, 76, 0.15);
	border-radius: 12px;
	flex-shrink: 0;
	margin-top: 0.375rem;
}

.page-hero__icon svg {
	width: 28px;
	height: 28px;
	color: var(--o4all-color-accent);
}

.page-hero__title-text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.page-hero__badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: rgba(201, 168, 76, 0.2);
	border: 1px solid rgba(201, 168, 76, 0.4);
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
	align-self: flex-start;
}

.page-hero__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 4vw, 3rem); /* max 48px */
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
	margin: 0;
	overflow-wrap: break-word;
}

@media (max-width: 767px) {
	.page-hero {
		min-height: 280px;
		padding-top: var(--o4all-header-height, 70px);
		padding-bottom: 2.5rem;
	}

	.page-hero__inner {
		max-width: 100%;
	}

	.page-hero__heading {
		font-size: clamp(1.75rem, 6vw, 2.5rem);
	}
}

/* -----------------------------------------------------------------------------
   SERVICES ARCHIVE — services grid
   ----------------------------------------------------------------------------- */

.services-grid-section {
	background: var(--o4all-bg-page, #F7F8FA);
}

.services-grid__header {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 2rem var(--o4all-grid-gap);
	align-items: start;
	margin-bottom: 3rem;
}

.services-grid__header-right {
	grid-column: 3;
}

.services-grid__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0;
	overflow-wrap: break-word;
}

.services-grid__intro {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--o4all-text-secondary);
	margin: 0;
}

.services-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 767px) {
	.services-grid__header {
		grid-template-columns: 1fr;
		gap: 1rem;
		margin-bottom: 2rem;
	}

	.services-grid__header-right {
		grid-column: auto;
	}
}

/* -----------------------------------------------------------------------------
   SERVICE DETAIL — 2-column layout (main + sticky sidebar)
   ----------------------------------------------------------------------------- */

.service-detail {
	background: var(--o4all-bg-page, #F7F8FA);
}

.service-detail__columns {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 3rem;
	align-items: start;
}

.service-detail__main {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.service-detail__sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: sticky;
	top: calc(var(--o4all-header-height, 80px) + 1.5rem);
}

@media (max-width: 1023px) {
	.service-detail__columns {
		grid-template-columns: 1fr;
	}

	.service-detail__sidebar {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.service-sidebar-nav,
	.service-sidebar-cta {
		flex: 1;
		min-width: 260px;
	}
}

@media (max-width: 767px) {
	.service-detail__columns {
		gap: 2rem;
	}

	.service-detail__main {
		gap: 1.5rem;
	}

	.service-detail__sidebar {
		flex-direction: column;
	}
}

/* -----------------------------------------------------------------------------
   SERVICE DETAIL — featured image / placeholder
   ----------------------------------------------------------------------------- */

.service-detail__image {
	border-radius: var(--o4all-radius-card);
	overflow: hidden;
}

.service-detail__img {
	width: 100%;
	display: block;
	border-radius: var(--o4all-radius-card);
	aspect-ratio: 16/9;
	object-fit: cover;
}

.service-detail__img-placeholder {
	width: 100%;
	aspect-ratio: 16/9;
	background: linear-gradient(145deg, var(--o4all-bg-subtle) 0%, rgba(201, 168, 76, 0.06) 100%);
	border-radius: var(--o4all-radius-card);
	border: 1px solid var(--o4all-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-detail__placeholder-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: rgba(201, 168, 76, 0.12);
	border-radius: 16px;
}

.service-detail__placeholder-icon svg {
	width: 40px;
	height: 40px;
	color: var(--o4all-color-accent);
	opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   SERVICE DETAIL — intro headline + text
   ----------------------------------------------------------------------------- */

.service-detail__intro-headline {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.2;
	margin: 0;
	overflow-wrap: break-word;
}

.service-detail__intro-text {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--o4all-text-secondary);
}

.service-detail__intro-text p {
	margin: 0 0 1em;
}

.service-detail__intro-text p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   SERVICE DETAIL — checklist sections (includes + suitable_for)
   ----------------------------------------------------------------------------- */

.service-checklist {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	padding: var(--o4all-card-padding, 28px);
}

.service-checklist__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 1.25rem;
	padding-bottom: 0.875rem;
	border-bottom: 2px solid var(--o4all-color-accent);
}

.service-checklist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.service-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--o4all-color-ink);
}

.service-checklist__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: rgba(201, 168, 76, 0.12);
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 1px;
}

.service-checklist__check svg {
	width: 13px;
	height: 13px;
	color: var(--o4all-color-accent);
}

@media (max-width: 767px) {
	.service-checklist {
		padding: var(--o4all-card-padding-mobile, 22px);
	}
}

/* -----------------------------------------------------------------------------
   SERVICE DETAIL — "Warum ONE4ALL?" navy block
   ----------------------------------------------------------------------------- */

.service-why {
	background: var(--o4all-color-navy);
	border-radius: var(--o4all-radius-card);
	padding: var(--o4all-card-padding, 28px);
	color: #fff;
}

.service-why__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--o4all-color-accent);
	margin: 0 0 1rem;
}

.service-why__text {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.85);
}

.service-why__text p {
	margin: 0 0 0.875em;
}

.service-why__text p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   SERVICE DETAIL SIDEBAR — related services navigation list
   ----------------------------------------------------------------------------- */

.service-sidebar-nav {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	overflow: hidden;
}

.service-sidebar-nav__heading {
	font-family: var(--o4all-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--o4all-bg-subtle);
	border-bottom: 1px solid var(--o4all-border);
	letter-spacing: 0.01em;
}

.service-sidebar-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-sidebar-nav__item {
	border-bottom: 1px solid var(--o4all-border);
}

.service-sidebar-nav__item:last-child {
	border-bottom: 0;
}

.service-sidebar-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem;
	font-size: 0.9rem;
	color: var(--o4all-color-ink);
	text-decoration: none;
	transition: background-color var(--o4all-transition), color var(--o4all-transition);
}

.service-sidebar-nav__link::after {
	content: 'â€؛';
	color: var(--o4all-color-accent);
	font-size: 1rem;
	flex-shrink: 0;
	margin-left: 0.5rem;
}

.service-sidebar-nav__link:hover {
	background: rgba(201, 168, 76, 0.06);
	color: var(--o4all-color-accent);
}

.service-sidebar-nav__link:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: -2px;
}

/* -----------------------------------------------------------------------------
   SERVICE DETAIL SIDEBAR — gold CTA box
   ----------------------------------------------------------------------------- */

.service-sidebar-cta {
	background: var(--o4all-color-accent);
	border-radius: var(--o4all-radius-card);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: center;
	text-align: center;
}

.service-sidebar-cta__heading {
	font-family: var(--o4all-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0;
	line-height: 1.35;
	hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
}

.service-sidebar-cta__btn {
	width: auto;
	justify-content: center;
}

/* White button on gold background */
.service-sidebar-cta .btn--secondary {
	background-color: #fff;
	color: var(--o4all-color-navy);
	border-color: #fff;
}

.service-sidebar-cta .btn--secondary:hover {
	background-color: var(--o4all-color-navy);
	color: #fff;
	border-color: var(--o4all-color-navy);
}

/* =============================================================================
   Contact Page  (page-kontakt.php)
   ============================================================================= */

/* --- Hero: contact-specific intro paragraph below H1 --- */

.contact-hero__intro {
	font-size: 1.125rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.80);
	max-width: 600px;
	margin: 1.25rem 0 0;
}

@media (max-width: 767px) {
	.contact-hero__intro {
		font-size: 1rem;
	}
}

/* --- Contact Split — 2-column layout --- */

.contact-split {
	background: var(--o4all-bg-page);
}

.contact-split__grid {
	display: grid;
	grid-template-columns: minmax(260px, 0.72fr) minmax(480px, 1.28fr);
	gap: 2.25rem;
	align-items: start;
}

.contact-split__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0.5rem 0 1rem;
	overflow-wrap: break-word;
}

.contact-split__intro {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--o4all-text-secondary);
	margin: 0 0 2rem;
}

/* --- Contact info cards (left column) --- */

.contact-cards-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.contact-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.125rem 1.375rem;
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	transition: border-color var(--o4all-transition), box-shadow var(--o4all-transition);
}

.contact-card:hover {
	border-color: rgba(201, 168, 76, 0.4);
	box-shadow: 0 2px 8px rgba(13, 27, 42, 0.07);
}

.contact-card__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(201, 168, 76, 0.10);
	border-radius: 8px;
	flex-shrink: 0;
	margin-top: 1px;
}

.contact-card__icon-wrap svg {
	width: 20px;
	height: 20px;
	color: var(--o4all-color-accent);
}

.contact-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.contact-card__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--o4all-text-muted);
	line-height: 1.5;
}

.contact-card__value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	text-decoration: none;
	line-height: 1.45;
	word-break: break-word;
}

a.contact-card__value:hover {
	color: var(--o4all-color-accent);
	text-decoration: underline;
}

a.contact-card__value:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.contact-card__note {
	font-size: 0.8125rem;
	color: var(--o4all-text-muted);
	line-height: 1.4;
	margin-top: 0.125rem;
}

/* --- Form card (right column) --- */

.contact-split__form-col {
	position: sticky;
	top: calc(var(--o4all-header-height, 80px) + 1.5rem);
}

.contact-form-card {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	padding: 1.5rem;
	box-shadow: var(--o4all-shadow-card);
}

.contact-form-card__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 0.625rem;
	line-height: 1.2;
}

.contact-form-card__intro {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--o4all-text-secondary);
	margin: 0 0 1.125rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid var(--o4all-border);
}

/* CF7 form — scoped to .contact-form-card__form */

.contact-form-card__form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.contact-form-card__form .wpcf7-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875rem;
}

/* cf7-grid: two-column grid wrapper used in CF7 form markup */

.contact-form-card__form .cf7-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem;
}

/* cf7-field: <label> wrapping label text + wpcf7-form-control-wrap */

.contact-form-card__form .cf7-field {
	display: block;
	min-width: 0;
}

.contact-form-card__form .cf7-field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.contact-form-card__form .cf7-field input,
.contact-form-card__form .cf7-field select,
.contact-form-card__form .cf7-field textarea {
	width: 100%;
	box-sizing: border-box;
}

/* Full-width variants */

.contact-form-card__form .cf7-field--full {
	grid-column: 1 / -1;
}

.contact-form-card__form .cf7-acceptance {
	grid-column: 1 / -1;
}

.contact-form-card__form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--o4all-color-ink);
	margin-bottom: 0.25rem;
}

.contact-form-card__form .wpcf7-form-control-wrap {
	display: block;
}

.contact-form-card__form input[type="text"],
.contact-form-card__form input[type="email"],
.contact-form-card__form input[type="tel"],
.contact-form-card__form input[type="date"],
.contact-form-card__form input[type="number"],
.contact-form-card__form select,
.contact-form-card__form textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-family: var(--o4all-font-body);
	font-size: 0.9375rem;
	color: var(--o4all-color-ink);
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-btn);
	transition: border-color var(--o4all-transition), box-shadow var(--o4all-transition);
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	min-height: 42px;
}

.contact-form-card__form input[type="text"]:focus,
.contact-form-card__form input[type="email"]:focus,
.contact-form-card__form input[type="tel"]:focus,
.contact-form-card__form input[type="date"]:focus,
.contact-form-card__form input[type="number"]:focus,
.contact-form-card__form select:focus,
.contact-form-card__form textarea:focus {
	outline: none;
	border-color: var(--o4all-color-steel);
	box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.15);
}

.contact-form-card__form textarea {
	min-height: 110px;
	resize: vertical;
}

.contact-form-card__form input.wpcf7-not-valid,
.contact-form-card__form textarea.wpcf7-not-valid,
.contact-form-card__form select.wpcf7-not-valid {
	border-color: var(--o4all-danger);
}

.contact-form-card__form .wpcf7-not-valid-tip {
	display: block;
	font-size: 0.8125rem;
	color: var(--o4all-danger);
	margin-top: 0.3125rem;
}

.contact-form-card__form .wpcf7-validation-errors,
.contact-form-card__form .wpcf7-mail-sent-ng {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--o4all-danger-bg);
	border: 1px solid var(--o4all-danger);
	border-radius: var(--o4all-radius-btn);
	color: var(--o4all-danger);
	font-size: 0.875rem;
}

.contact-form-card__form .wpcf7-mail-sent-ok {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--o4all-success-bg);
	border: 1px solid var(--o4all-success);
	border-radius: var(--o4all-radius-btn);
	color: var(--o4all-success);
	font-size: 0.875rem;
}

.contact-form-card__form .wpcf7-submit,
.contact-form-card__form input[type="submit"] {
	width: 100%;
	padding: 0.875rem 1.5rem;
	font-family: var(--o4all-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	background: var(--o4all-color-accent);
	border: none;
	border-radius: var(--o4all-radius-btn);
	cursor: pointer;
	transition: background-color var(--o4all-transition), transform var(--o4all-transition);
}

.contact-form-card__form .wpcf7-submit:hover,
.contact-form-card__form input[type="submit"]:hover {
	background: var(--o4all-color-accent-light);
	transform: translateY(-1px);
}

.contact-form-card__form .wpcf7-submit:focus-visible,
.contact-form-card__form input[type="submit"]:focus-visible {
	outline: 3px solid var(--o4all-color-accent);
	outline-offset: 3px;
}

/* Select — custom chevron arrow */

.contact-form-card__form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 1rem;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* Form section headings — small uppercase dividers between field groups */

.contact-form-card__form .cf7-section-heading {
	font-family: var(--o4all-font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--o4all-text-muted);
	margin: 0.625rem 0 0;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--o4all-border);
}

.contact-form-card__form .cf7-section-heading:first-child {
	margin-top: 0;
}

/* Acceptance / Datenschutz-Zustimmung */

.contact-form-card__form .wpcf7-acceptance .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-form-card__form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--o4all-color-ink);
	cursor: pointer;
	margin: 0;
	line-height: 1.55;
}

.contact-form-card__form .wpcf7-acceptance input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
	accent-color: var(--o4all-color-accent);
	cursor: pointer;
}

.contact-form-card__form .wpcf7-acceptance a {
	color: var(--o4all-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.contact-form-card__form .wpcf7-acceptance a:hover {
	color: var(--o4all-color-accent-light);
}

/* Suppress stray <br> and empty <p> inserted by CF7 autop */

.contact-form-card__form .wpcf7-form > br {
	display: none;
}

.contact-form-card__form .wpcf7-form p:empty {
	display: none;
	margin: 0;
}

/* Fallback block when CF7 is not configured */

.contact-form-fallback {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.contact-form-fallback__note {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--o4all-text-secondary);
	padding: 1.25rem 1.375rem;
	background: var(--o4all-bg-subtle);
	border-left: 3px solid var(--o4all-color-accent);
	border-radius: 0 var(--o4all-radius-btn) var(--o4all-radius-btn) 0;
	margin: 0;
}

.contact-form-fallback__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

.contact-form-fallback__trust {
	font-size: 0.8125rem;
	color: var(--o4all-text-muted);
	margin: 0;
}

/* Ghost button variant for light backgrounds */

.btn--ghost-dark {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	font-family: var(--o4all-font-body);
	font-size: var(--o4all-type-button, 1rem);
	font-weight: 600;
	line-height: 1;
	color: var(--o4all-color-navy);
	background: transparent;
	border: 1.5px solid var(--o4all-color-navy);
	border-radius: var(--o4all-radius-btn);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--o4all-transition), color var(--o4all-transition);
}

.btn--ghost-dark:hover {
	background: var(--o4all-color-navy);
	color: #fff;
}

.btn--ghost-dark:focus-visible {
	outline: 3px solid var(--o4all-color-navy);
	outline-offset: 3px;
}

/* --- Guidance checklist section --- */

/* --- Location / address section --- */

.contact-location {
	background: var(--o4all-bg-page);
	border-top: 1px solid var(--o4all-border);
}

.contact-location__header {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 2rem var(--o4all-grid-gap);
	align-items: start;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--o4all-border);
}

.contact-location__text-col {
	grid-column: 3;
}

.contact-location__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0;
}

.contact-location__text {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--o4all-text-secondary);
	margin: 0;
}

.contact-location__address-card {
	display: inline-flex;
	align-items: flex-start;
	gap: 1.125rem;
	padding: 1.5rem 1.75rem;
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-left: 3px solid var(--o4all-color-accent);
	border-radius: 0 var(--o4all-radius-card) var(--o4all-radius-card) 0;
	max-width: 480px;
}

.contact-location__addr-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(201, 168, 76, 0.10);
	border-radius: 8px;
	flex-shrink: 0;
}

.contact-location__addr-icon svg {
	width: 20px;
	height: 20px;
	color: var(--o4all-color-accent);
}

.contact-location__addr-body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.contact-location__addr-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--o4all-text-muted);
}

.contact-location__addr-value {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	line-height: 1.5;
}

/* --- Map (click-to-load) --- */

.contact-map {
	position: relative;
	width: 100%;
	height: 400px;
	margin-top: 2rem;
	border-radius: var(--o4all-radius-card);
	border: 1px solid var(--o4all-border);
	overflow: hidden;
	background: var(--o4all-bg-subtle);
}

.contact-map__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	background: var(--o4all-bg-subtle);
	z-index: 2;
	padding: 2rem;
	transition: opacity var(--o4all-transition-slow);
}

.contact-map__placeholder.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.contact-map__notice {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--o4all-text-secondary);
	text-align: center;
	margin: 0;
	max-width: 340px;
}

.contact-map__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6875rem 1.5rem;
	background: var(--o4all-color-ink);
	color: #fff;
	border: none;
	border-radius: var(--o4all-radius-btn);
	font-family: var(--o4all-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--o4all-transition);
}

.contact-map__button:hover {
	background: var(--o4all-color-navy);
}

.contact-map__button:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 3px;
}

.contact-map__button:disabled {
	opacity: 0.5;
	cursor: default;
}

.contact-map__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	z-index: 1;
}

.contact-map__admin-note {
	font-size: 0.875rem;
	color: var(--o4all-text-muted);
	padding: 0.75rem 1rem 0.75rem 1.125rem;
	border-left: 3px solid var(--o4all-color-accent);
	background: rgba(201, 168, 76, 0.06);
	border-radius: 0 var(--o4all-radius-sm) var(--o4all-radius-sm) 0;
	margin-top: 1.5rem;
}

/* Address card overlay — sits above the map at bottom-left */

.contact-map__address-card {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-left: 3px solid var(--o4all-color-accent);
	border-radius: 0 var(--o4all-radius-card) var(--o4all-radius-card) 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
	max-width: 360px;
}

.contact-map__addr-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(201, 168, 76, 0.10);
	border-radius: 6px;
	flex-shrink: 0;
}

.contact-map__addr-icon svg {
	width: 18px;
	height: 18px;
	color: var(--o4all-color-accent);
}

.contact-map__addr-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.contact-map__addr-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--o4all-text-muted);
}

.contact-map__addr-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	line-height: 1.5;
}

/* --- Responsive — Contact Page --- */

@media (max-width: 1023px) {
	.contact-split__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.contact-split__form-col {
		position: static;
	}



	.contact-location__header {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.contact-location__text-col {
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.contact-form-card {
		padding: 1.375rem;
	}

	.contact-form-card__form .wpcf7-row,
	.contact-form-card__form .cf7-grid {
		grid-template-columns: 1fr;
	}

	.contact-form-card__form .cf7-field--full,
	.contact-form-card__form .cf7-acceptance {
		grid-column: auto;
	}

	.contact-location__address-card {
		max-width: 100%;
		display: flex;
	}

	.contact-map {
		height: 300px;
	}

	.contact-map__address-card {
		position: static;
		max-width: 100%;
		border-radius: var(--o4all-radius-card);
		box-shadow: none;
		margin-top: 1rem;
	}

	.contact-form-fallback__actions {
		flex-direction: column;
	}
}

@media (max-width: 374px) {
	.contact-form-card {
		padding: 1.125rem;
	}

	.contact-card {
		padding: 1rem 1.125rem;
	}
}

/* =============================================================================
   About Page  (page-ueber-uns.php)
   ============================================================================= */

/* --- Hero intro paragraph --- */

.about-hero__intro {
	font-size: 1.125rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.80);
	max-width: 620px;
	margin: 1.25rem 0 0;
}

@media (max-width: 767px) {
	.about-hero__intro {
		font-size: 1rem;
	}
}

/* =============================================================================
   2. Company Story — image left, text right
   ============================================================================= */

.about-story {
	background: var(--o4all-bg-page);
}

.about-story__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 4rem;
	align-items: center;
}

.about-story__media {
	position: relative;
}

/* Image */

.about-story__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
	aspect-ratio: 4/5;
}

/* Video */

.about-story__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
	aspect-ratio: 4/5;
}

/* Placeholder when no image is uploaded */

.about-story__placeholder {
	width: 100%;
	aspect-ratio: 4/5;
	background: linear-gradient(
		145deg,
		var(--o4all-color-navy) 0%,
		var(--o4all-color-ink) 100%
	);
	border-radius: 16px;
	border: 1px solid var(--o4all-border-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.about-story__placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at 40% 60%,
		rgba(201, 168, 76, 0.10) 0%,
		transparent 65%
	);
	pointer-events: none;
}

.about-story__placeholder-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: rgba(201, 168, 76, 0.12);
	border-radius: 16px;
	position: relative;
	z-index: 1;
}

.about-story__placeholder-icon svg {
	width: 40px;
	height: 40px;
	color: var(--o4all-color-accent);
	opacity: 0.75;
}

/* Text content */

.about-story__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.2;
	margin: 0.75rem 0 1.25rem;
	overflow-wrap: break-word;
}

.about-story__text {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--o4all-text-secondary);
}

.about-story__text p {
	margin: 0 0 1em;
}

.about-story__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.about-story__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.about-story__img,
	.about-story__video,
	.about-story__placeholder {
		aspect-ratio: 16/9;
	}
}

@media (max-width: 767px) {
	.about-story__heading {
		font-size: clamp(1.375rem, 5vw, 1.75rem);
	}
}

/* =============================================================================
   3. Why ONE4ALL — 2-col header + 6 value cards
   ============================================================================= */

.about-why {
	background: var(--o4all-bg-white);
}

.about-why__header {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 2rem var(--o4all-grid-gap);
	align-items: start;
	margin-bottom: 3rem;
}

.about-why__header-right {
	grid-column: 3;
}

.about-why__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0;
	overflow-wrap: break-word;
}

.about-why__intro {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--o4all-text-secondary);
	margin: 0;
	padding-top: 0.375rem;
}

/* Cards grid */

.about-why__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: about-why-num;
}

.about-why-card {
	counter-increment: about-why-num;
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.about-why-card__num {
	margin-bottom: 0.875rem;
}

.about-why-card__num::before {
	content: counter(about-why-num, decimal-leading-zero);
	font-family: var(--o4all-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--o4all-color-accent);
}

.about-why-card__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	margin: 0 0 0.625rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.about-why-card__text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--o4all-text-secondary);
	margin: 0;
}

@media (max-width: 1023px) {
	.about-why__header {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.about-why__header-right {
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.about-why__header {
		margin-bottom: 2rem;
	}

	.about-why-card {
		padding: 1.375rem;
	}
}

/* =============================================================================
   4. Team Section
   ============================================================================= */

.about-team {
	background: var(--o4all-bg-page);
	border-top: 1px solid var(--o4all-border);
}

.about-team__header {
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 2rem var(--o4all-grid-gap);
	align-items: start;
	margin-bottom: 3rem;
}

.about-team__header-right {
	grid-column: 3;
}

.about-team__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0;
}

.about-team__intro {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--o4all-text-secondary);
	margin: 0;
	padding-top: 0.375rem;
}

/* Team cards list */

.about-team__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--o4all-grid-gap);
}

.about-team__empty {
	color: var(--o4all-text-muted);
	font-size: 1rem;
	margin: 0;
	padding: 2rem 0;
}

.about-team-card {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--o4all-transition-base), transform var(--o4all-transition-base);
}

.about-team-card:hover {
	box-shadow: var(--o4all-shadow-card-hover);
	transform: translateY(-2px);
}

.about-team-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.about-team-card__link:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
	border-radius: var(--o4all-radius-card);
}

/* Photo area */

.about-team-card__media {
	position: relative;
	overflow: hidden;
}

.about-team-card__photo {
	width: 100%;
	display: block;
	aspect-ratio: 4/3;
	object-fit: cover;
	object-position: center top;
	transition: transform var(--o4all-transition-slow);
}

.about-team-card:hover .about-team-card__photo {
	transform: scale(1.03);
}

.about-team-card__placeholder {
	width: 100%;
	aspect-ratio: 4/3;
	background: linear-gradient(
		145deg,
		var(--o4all-bg-subtle) 0%,
		var(--o4all-border) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-team-card__initials {
	font-family: var(--o4all-font-heading);
	font-size: 2rem;
	font-weight: 700;
	color: var(--o4all-text-muted);
	letter-spacing: 0.05em;
	user-select: none;
}

/* Card body */

.about-team-card__body {
	padding: 1.25rem 1.375rem 1.5rem;
	flex: 1;
}

.about-team-card__name {
	font-family: var(--o4all-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	margin: 0 0 0.3rem;
}

.about-team-card__role {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--o4all-color-accent);
	margin: 0 0 0.6rem;
}

.about-team-card__bio {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--o4all-text-secondary);
	margin: 0;
}

@media (max-width: 1023px) {
	.about-team__header {
		grid-template-columns: 1fr;
		gap: 1rem;
		margin-bottom: 2rem;
	}

	.about-team__header-right {
		grid-column: auto;
	}

	.about-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.about-team__header {
		margin-bottom: 1.75rem;
	}

	.about-team__grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   Single Team Member Page
   ============================================================================= */

/* Hero role label */

.team-member-hero__label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
	margin: 0 0 0.75rem;
}

/* Two-column profile layout */

.team-single {
	background: var(--o4all-bg-page);
}

.team-single__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 4rem;
	align-items: start;
}

/* Left column */

.team-single__media {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.team-single__photo {
	width: 100%;
	display: block;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
	aspect-ratio: 4/5;
}

.team-single__placeholder {
	width: 100%;
	aspect-ratio: 4/5;
	border-radius: 16px;
	background: linear-gradient(145deg, var(--o4all-color-navy) 0%, var(--o4all-color-ink) 100%);
	border: 1px solid var(--o4all-border-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}

.team-single__initials {
	font-family: var(--o4all-font-heading);
	font-size: 4rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: 0.05em;
	user-select: none;
}

/* Right column */

.team-single__content {
	padding-top: 0.25rem;
}

.team-single__role {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
	margin: 0 0 1.25rem;
}

.team-single__bio {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--o4all-text-secondary);
	margin-bottom: 1.5rem;
}

.team-single__bio p {
	margin: 0 0 1em;
}

.team-single__bio p:last-child {
	margin-bottom: 0;
}

.team-single__body {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--o4all-text-secondary);
	margin-bottom: 2rem;
}

.team-single__back {
	margin-top: 0.5rem;
}

/* Contact card — sits below photo in left column */

.team-contact-card {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	padding: 1.25rem 1.375rem;
}

.team-contact-card__heading {
	font-family: var(--o4all-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--o4all-text-muted);
	margin: 0 0 1rem;
}

.team-contact-row {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.5rem 0;
	text-decoration: none;
	color: var(--o4all-color-ink);
	transition: color var(--o4all-transition-base);
	border-top: 1px solid var(--o4all-border);
}

.team-contact-row:first-of-type {
	border-top: none;
	padding-top: 0;
}

.team-contact-row:hover {
	color: var(--o4all-color-accent);
}

/* Icon bubble — fixed 40 × 40, icon inside 20 × 20 */

.team-contact-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--o4all-bg-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--o4all-color-accent);
	transition: background var(--o4all-transition-base);
}

.team-contact-row:hover .team-contact-icon {
	background: color-mix(in srgb, var(--o4all-color-accent) 12%, transparent);
}

.team-contact-icon svg {
	width: 20px;
	height: 20px;
	display: block;
	flex-shrink: 0;
}

/* Label + value stack */

.team-contact-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.team-contact-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--o4all-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.2;
}

.team-contact-value {
	font-size: 0.9375rem;
	font-weight: 500;
	color: inherit;
	line-height: 1.4;
	word-break: break-all;
}

/* Responsive */

@media (max-width: 1023px) {
	.team-single__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.team-single__photo,
	.team-single__placeholder {
		aspect-ratio: 1/1;
		max-width: 340px;
		margin: 0 auto;
	}
}

@media (max-width: 479px) {
	.team-contact-value {
		word-break: break-word;
	}
}

/* =============================================================================
   Geschäftsführer section
   ============================================================================= */

.about-ceo {
	background: var(--o4all-bg-page);
}

.about-ceo__inner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 4rem;
	align-items: center;
}

.about-ceo__media {
	position: relative;
}

.about-ceo__photo {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
	aspect-ratio: 4/5;
}

.about-ceo__placeholder {
	width: 100%;
	aspect-ratio: 4/5;
	border-radius: 16px;
	background: linear-gradient(145deg, var(--o4all-color-navy) 0%, var(--o4all-color-ink) 100%);
	border: 1px solid var(--o4all-border-dark);
}

.about-ceo__label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
	margin: 0 0 0.75rem;
}

.about-ceo__name {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--o4all-text-dark);
	line-height: 1.15;
	margin: 0 0 0.5rem;
}

.about-ceo__role {
	font-size: 1rem;
	font-weight: 600;
	color: var(--o4all-text-muted);
	margin: 0 0 1.5rem;
}

.about-ceo__text {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--o4all-text-body);
}

.about-ceo__text p {
	margin: 0 0 1em;
}

.about-ceo__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.about-ceo__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.about-ceo__photo,
	.about-ceo__placeholder {
		aspect-ratio: 1/1;
		max-width: 340px;
		margin: 0 auto;
	}
}

/* German hyphenation for about page headings */

.about-story__heading,
.about-why__heading,
.about-why-card__title,
.about-team__heading,
.about-ceo__name {
	overflow-wrap: break-word;
}

/* =============================================================================
   Karriere / Jobs
   ============================================================================= */

/* ------------------------------------------------------------------
   Jobs Intro Section
   ------------------------------------------------------------------ */

.jobs-intro {
	background: var(--o4all-bg-page);
}

.jobs-intro__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 5rem;
	align-items: start;
}


.jobs-intro__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.625rem, 3vw, 2.375rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

.jobs-intro__text {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--o4all-text-secondary);
	margin: 0 0 0.875rem;
}

.jobs-values-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-top: 0.375rem;
}

.jobs-values-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-left: 1rem;
	border-left: 2px solid var(--o4all-color-accent);
}

.jobs-values-item__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
}

.jobs-values-item__text {
	font-size: 0.875rem;
	color: var(--o4all-text-muted);
	line-height: 1.6;
}

/* ------------------------------------------------------------------
   Jobs Listing Section
   ------------------------------------------------------------------ */

.jobs-listing {
	background: var(--o4all-bg-subtle);
}

.jobs-listing__header {
	margin-bottom: 2.5rem;
}

.jobs-listing__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 0.625rem;
}

.jobs-listing__note {
	font-size: 1rem;
	color: var(--o4all-text-secondary);
	margin: 0;
	max-width: 640px;
}

.jobs-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

/* ------------------------------------------------------------------
   Job Card
   ------------------------------------------------------------------ */

.job-card {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	overflow: hidden;
	transition: box-shadow var(--o4all-transition-base),
	            transform var(--o4all-transition-base);
	border-left: 4px solid var(--o4all-color-accent);
}

.job-card:hover {
	box-shadow: 0 8px 32px rgba(13, 27, 42, 0.1);
	transform: translateY(-2px);
}

.job-card--fallback {
	opacity: 0.8;
}

/* Header — top-left: badge + title + text */

.job-card__header {
	grid-column: 1;
	grid-row: 1;
	padding: 1.5rem 1.5rem 0.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.job-card__badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
	background: rgba(201, 168, 76, 0.1);
	border: 1px solid rgba(201, 168, 76, 0.3);
	border-radius: 999px;
	padding: 0.2em 0.75em;
}

.job-card__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0;
	line-height: 1.3;
}

.job-card__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--o4all-text-secondary);
	margin: 0;
}

/* Body — bottom-left: chips + salary */

.job-card__body {
	grid-column: 1;
	grid-row: 2;
	padding: 0.75rem 1.5rem 1.5rem 1.75rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.job-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.job-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: 999px;
	padding: 0.35em 0.9em;
	line-height: 1;
}

.job-card__chip--location {
	background: #f0f4ff;
	color: #3b5bdb;
}

.job-card__chip--type {
	background: #f0faf4;
	color: #2f7a50;
}

.job-card__chip--level {
	background: #fff8ec;
	color: #b45309;
}

/* Salary — inline with chips */

.job-card__salary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35em 0.9em;
	background: var(--o4all-bg-subtle, #f5f5f5);
	border-radius: 999px;
	border: 1px solid var(--o4all-border);
}

.job-card__salary-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--o4all-text-muted);
}

.job-card__salary-value {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--o4all-color-ink);
}

/* Footer CTA — right column, vertically centered */

.job-card__footer {
	grid-column: 2;
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	padding: 1.5rem 1.75rem;
	border-left: 1px solid var(--o4all-border);
	background: var(--o4all-bg-subtle, #fafafa);
	transition: background var(--o4all-transition-base);
}

.job-card:hover .job-card__footer {
	background: var(--o4all-color-accent);
	border-left-color: var(--o4all-color-accent);
}

.job-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	padding: 0;
	background: transparent;
	color: var(--o4all-text-muted);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: color var(--o4all-transition-base),
	            gap var(--o4all-transition-base);
}

.job-card:hover .job-card__cta {
	color: var(--o4all-color-ink);
	gap: 0.75rem;
}

.job-card__cta--ghost {
	color: var(--o4all-text-muted);
}

@media (max-width: 767px) {
	.job-card {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	.job-card__footer {
		grid-column: 1;
		grid-row: 3;
		border-left: none;
		border-top: 1px solid var(--o4all-border);
		padding: 1rem 1.5rem;
	}

	.job-card__cta {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------
   Initiativbewerbung CTA
   ------------------------------------------------------------------ */

.jobs-initiativ {
	background: var(--o4all-color-ink);
}

.jobs-initiativ__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem 4rem;
}

.jobs-initiativ__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: var(--o4all-text-inverse);
	margin: 0 0 0.75rem;
}

.jobs-initiativ__body {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--o4all-text-inverse);
	opacity: 0.85;
	margin: 0;
	max-width: 540px;
}

.jobs-initiativ__actions {
	display: flex;
	flex-shrink: 0;
	gap: 1rem;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   Job Detail — Layout
   ------------------------------------------------------------------ */

.job-detail {
	background: var(--o4all-bg-page);
}

.job-detail__layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 3rem 4rem;
	align-items: start;
}

/* ------------------------------------------------------------------
   Job Detail — Main Content
   ------------------------------------------------------------------ */

.job-detail__main {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.job-detail__section-heading {
	font-family: var(--o4all-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 1rem;
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--o4all-border);
}

.job-detail__text {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--o4all-text-secondary);
}

.job-detail__text p {
	margin: 0 0 1rem;
}

.job-detail__checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.job-detail__checklist-item {
	padding-left: 1.5rem;
	position: relative;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--o4all-text-body);
}

.job-detail__checklist-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--o4all-color-accent);
}

/* ------------------------------------------------------------------
   Job Detail — Sidebar
   ------------------------------------------------------------------ */

.job-detail__sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: sticky;
	top: calc(var(--o4all-header-height, 80px) + 2rem);
}

.job-sidebar-meta {
	background: var(--o4all-bg-subtle);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	padding: 1.5rem;
}

.job-sidebar-meta__heading {
	font-family: var(--o4all-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--o4all-color-ink);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 1.25rem;
}

.job-sidebar-meta__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.job-sidebar-meta__item {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.job-sidebar-meta__label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--o4all-text-muted);
}

.job-sidebar-meta__value {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--o4all-color-ink);
}

.job-sidebar-cta {
	background: var(--o4all-color-ink);
	border-radius: var(--o4all-radius-card);
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.job-sidebar-cta__text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--o4all-text-inverse);
	opacity: 0.9;
	margin: 0;
}

.job-sidebar-cta__btn {
	width: 100%;
	text-align: center;
}

/* ------------------------------------------------------------------
   Application Section
   ------------------------------------------------------------------ */

.job-application {
	background: var(--o4all-bg-subtle);
	border-top: 1px solid var(--o4all-border);
}

.job-application__inner {
	max-width: 680px;
}

.job-application__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 0.625rem;
}

.job-application__intro {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--o4all-text-secondary);
	margin: 0 0 2rem;
}

.job-application__form {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	padding: 2rem;
}

.job-application__fallback {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.job-application__fallback-text {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--o4all-text-secondary);
	margin: 0;
}

.job-application__admin-note {
	font-size: 0.875rem;
	color: var(--o4all-text-muted);
	border-left: 3px solid var(--o4all-color-accent);
	padding-left: 0.75rem;
	margin: 0;
}

/* ------------------------------------------------------------------
   Related Jobs Section
   ------------------------------------------------------------------ */

.related-jobs {
	background: var(--o4all-bg-page);
	border-top: 1px solid var(--o4all-border);
}

.related-jobs__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.375rem, 2.25vw, 1.875rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 2rem;
}

.related-jobs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

/* ------------------------------------------------------------------
   Responsive — Tablet (max 1023px)
   ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.jobs-intro__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.jobs-grid {
		gap: var(--o4all-grid-gap-tablet);
	}

	.job-detail__layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.job-detail__sidebar {
		position: static;
	}

	.jobs-initiativ__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------
   Responsive — Mobile (max 767px)
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.jobs-grid {
		gap: var(--o4all-grid-gap-mobile);
	}

	.jobs-initiativ__inner {
		gap: 1.5rem;
	}

	.jobs-initiativ__actions {
		flex-direction: column;
		width: 100%;
	}

	.jobs-initiativ__actions .btn {
		width: 100%;
		text-align: center;
	}

	.job-application__form {
		padding: 1.25rem;
	}

	.job-sidebar-cta,
	.job-sidebar-meta {
		padding: 1.25rem;
	}
}

/* =============================================================================
   Bewerbung Page
   ============================================================================= */

/* ------------------------------------------------------------------
   Intro Section
   ------------------------------------------------------------------ */

.bewerbung-intro {
	background: var(--o4all-bg-page);
}

.bewerbung-intro__inner {
	max-width: 640px;
}


.bewerbung-intro__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.625rem, 3vw, 2.375rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.15;
	margin: 0 0 1rem;
}

.bewerbung-intro__text {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--o4all-text-secondary);
	margin: 0;
}

/* Job hint chip */

.bewerbung-job-hint {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding: 0.625rem 1rem;
	background: var(--o4all-bg-subtle);
	border: 1px solid var(--o4all-border);
	border-left: 3px solid var(--o4all-color-accent);
	border-radius: var(--o4all-radius-sm, 4px);
}

.bewerbung-job-hint__label {
	font-size: 0.8125rem;
	color: var(--o4all-text-muted);
	white-space: nowrap;
}

.bewerbung-job-hint__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
}

/* ------------------------------------------------------------------
   Form Section
   ------------------------------------------------------------------ */

.bewerbung-form-section {
	background: var(--o4all-bg-subtle);
	border-top: 1px solid var(--o4all-border);
}

.bewerbung-form-card {
	max-width: 900px;
	margin-inline: auto;
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	padding: 2.5rem 3rem;
	box-shadow: var(--o4all-shadow-card);
}

.bewerbung-privacy-note {
	font-size: 0.8125rem;
	color: var(--o4all-text-muted);
	margin: 0 0 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--o4all-border);
}

.bewerbung-form-card__heading {
	font-family: var(--o4all-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 1.5rem;
}

.bewerbung-form-card__form {
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------------
   CF7 form — scoped to .bewerbung-form-card__form
   ------------------------------------------------------------------ */

/* Outer form element */
.bewerbung-form-card__form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Section wrappers (rendered as <div class="cf7-section"> in CF7 markup) */
.bewerbung-form-card__form .cf7-section {
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--o4all-border);
}

.bewerbung-form-card__form .cf7-section:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.bewerbung-form-card__form .cf7-section__heading {
	font-family: var(--o4all-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--o4all-text-muted);
	margin: 0 0 1rem;
}

/* Two-column rows
   CF7 can emit children as: <p>, <span.wpcf7-form-control-wrap>, or <label>
   depending on autop context. Cover all three with > * so the grid always
   applies, and add min-width: 0 so columns can shrink below content size. */
.bewerbung-form-card__form .wpcf7-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 18px;
	row-gap: 14px;
	margin-bottom: 0.75rem;
	width: 100%;
}

.bewerbung-form-card__form .wpcf7-row > p,
.bewerbung-form-card__form .wpcf7-row > label,
.bewerbung-form-card__form .wpcf7-row > span,
.bewerbung-form-card__form .wpcf7-row > .wpcf7-form-control-wrap {
	min-width: 0;       /* let the column shrink — overrides default min-width: auto */
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}

/* Inputs/selects inside grid cells stay full-width regardless of nesting depth */
.bewerbung-form-card__form .wpcf7-row input,
.bewerbung-form-card__form .wpcf7-row select,
.bewerbung-form-card__form .wpcf7-row textarea {
	width: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Actual grid class used in the CF7 form: .cf7-grid / .cf7-field
   (The form uses these instead of .wpcf7-row, which remains for
   backward compatibility but is not referenced in the markup.)
   ------------------------------------------------------------------ */

/* Two-column grid wrapper */
.bewerbung-form-card__form .cf7-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	width: 100%;
	margin-bottom: 0.875rem;
}

/* .cf7-field is a <label> wrapping both the label text and the input
   control. Block display lets CF7's internal structure render without
   interference from flex layout. */
.bewerbung-form-card__form .cf7-field {
	display: block;
	min-width: 0;
	width: 100%;
	margin: 0;
}

/* Control wrap inside a .cf7-field */
.bewerbung-form-card__form .cf7-field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Inputs inside .cf7-field are always full-width */
.bewerbung-form-card__form .cf7-field input,
.bewerbung-form-card__form .cf7-field select,
.bewerbung-form-card__form .cf7-field textarea {
	width: 100%;
	box-sizing: border-box;
}

/* Acceptance field: remove the column font-weight so the checkbox
   label reads as body text, not a bold heading */
.bewerbung-form-card__form .cf7-acceptance-field {
	flex-direction: column;
	font-weight: 400;
	cursor: pointer;
	gap: 0;
}

/* CF7 renders [acceptance] as .wpcf7-list-item — a <label> wrapping
   checkbox + text. Display flex so the checkbox and copy align. */
.bewerbung-form-card__form .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Labels */
.bewerbung-form-card__form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--o4all-color-ink);
	margin-bottom: 0.375rem;
}

/* Control wrap — block + full width so fields never shrink */
.bewerbung-form-card__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* All field types */
.bewerbung-form-card__form input[type="text"],
.bewerbung-form-card__form input[type="email"],
.bewerbung-form-card__form input[type="tel"],
.bewerbung-form-card__form input[type="date"],
.bewerbung-form-card__form input[type="number"],
.bewerbung-form-card__form select,
.bewerbung-form-card__form textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.75rem 0.875rem;
	font-family: var(--o4all-font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--o4all-color-ink);
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: 8px;
	transition: border-color var(--o4all-transition),
	            box-shadow var(--o4all-transition);
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

/* Focus ring */
.bewerbung-form-card__form input[type="text"]:focus,
.bewerbung-form-card__form input[type="email"]:focus,
.bewerbung-form-card__form input[type="tel"]:focus,
.bewerbung-form-card__form input[type="date"]:focus,
.bewerbung-form-card__form input[type="number"]:focus,
.bewerbung-form-card__form select:focus,
.bewerbung-form-card__form textarea:focus {
	outline: none;
	border-color: var(--o4all-color-steel);
	box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.15);
}

/* Select — custom chevron arrow */
.bewerbung-form-card__form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 1rem;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* Textarea */
.bewerbung-form-card__form textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}

/* Paragraph spacing for fields CF7 wraps in <p> tags */
.bewerbung-form-card__form .wpcf7-form > p,
.bewerbung-form-card__form .cf7-section > p {
	margin: 0 0 0.625rem;
}

/* Suppress stray <br> and empty <p> generated by CF7 auto-formatting */
.bewerbung-form-card__form .wpcf7-form > br,
.bewerbung-form-card__form .cf7-section > br,
.bewerbung-form-card__form .wpcf7-row > br {
	display: none;
}

.bewerbung-form-card__form p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

/* ── Upload zone system (/bewerbung/ Unterlagen section only) ──────────────── */

.bewerbung-form-card__form .cf7-upload-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Outer grouping wrapper — title + zone + file item */
.bewerbung-form-card__form .cf7-upload-card {
	box-sizing: border-box;
}

.bewerbung-form-card__form .cf7-upload-card__title {
	display: block;
	font-size: var(--o4all-type-small);
	font-weight: 600;
	color: var(--o4all-color-ink);
	margin-bottom: 0.5rem;
}

/* ── Drop zone ─────────────────────────────────────────────────────────────── */
.bewerbung-form-card__form .cf7-upload-zone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3125rem;
	min-height: 108px;
	padding: 1.25rem 1.5rem;
	background: var(--o4all-bg-page);
	border: 1.5px dashed var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
	transition: border-color var(--o4all-transition),
	            background-color var(--o4all-transition),
	            box-shadow var(--o4all-transition);
}

.bewerbung-form-card__form .cf7-upload-zone:hover,
.bewerbung-form-card__form .cf7-upload-zone:focus-within {
	border-color: var(--o4all-color-accent);
	background: rgba(201, 168, 76, 0.04);
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);
}

.bewerbung-form-card__form .cf7-upload-zone.is-dragover {
	border-color: var(--o4all-color-accent);
	background: rgba(201, 168, 76, 0.09);
	box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.2);
}

/* Upload cloud icon (SVG injected by JS) */
.bewerbung-form-card__form .cf7-upload-zone__icon {
	display: block;
	width: 36px;
	height: 36px;
	margin: 0 auto 0.125rem;
	color: var(--o4all-color-accent);
	flex-shrink: 0;
	pointer-events: none;
}

.bewerbung-form-card__form .cf7-upload-zone__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Zone CTA text */
.bewerbung-form-card__form .cf7-upload-zone__title {
	display: block;
	font-size: var(--o4all-type-small);
	font-weight: 600;
	color: var(--o4all-color-steel);
	pointer-events: none;
}

/* Zone format / size hint */
.bewerbung-form-card__form .cf7-upload-zone__hint {
	display: block;
	font-size: var(--o4all-type-xs);
	color: var(--o4all-text-muted);
	margin-top: 0.125rem;
	pointer-events: none;
}

/* CF7 wraps [file] in .wpcf7-form-control-wrap — stretch it to fill the zone
   so clicking anywhere in the zone opens the file dialog */
.bewerbung-form-card__form .cf7-upload-zone .wpcf7-form-control-wrap {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Native input: invisible full-cover overlay — remains functional for CF7 */
.bewerbung-form-card__form .cf7-upload-zone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: unset;
	opacity: 0;
	cursor: pointer;
	font-size: 0;
	border: none;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	z-index: 1;
}

/* ── Selected file item card (shown by JS after selection) ──────────────────── */
.bewerbung-form-card__form .cf7-upload-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6875rem 0.875rem;
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	box-shadow: var(--o4all-shadow-card);
	margin-top: 0.5rem;
	box-sizing: border-box;
}

.bewerbung-form-card__form .cf7-upload-item[hidden] {
	display: none;
}

/* File type icon badge (SVG injected by JS) */
.bewerbung-form-card__form .cf7-upload-item__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(201, 168, 76, 0.12);
	border-radius: 8px;
	color: var(--o4all-color-accent-dark);
}

.bewerbung-form-card__form .cf7-upload-item__icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* File name + size/status column */
.bewerbung-form-card__form .cf7-upload-item__meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.bewerbung-form-card__form .cf7-upload-item__name {
	display: block;
	font-size: var(--o4all-type-small);
	font-weight: 600;
	color: var(--o4all-color-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bewerbung-form-card__form .cf7-upload-item__info {
	display: block;
	font-size: var(--o4all-type-xs);
	color: var(--o4all-text-muted);
}

/* Remove / replace button */
.bewerbung-form-card__form .cf7-upload-item__remove {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--o4all-bg-subtle);
	border: 1px solid var(--o4all-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--o4all-text-muted);
	font-size: 1.125rem;
	line-height: 1;
	transition: background-color var(--o4all-transition),
	            color var(--o4all-transition),
	            border-color var(--o4all-transition);
}

.bewerbung-form-card__form .cf7-upload-item__remove:hover {
	background: var(--o4all-danger-bg);
	border-color: var(--o4all-danger);
	color: var(--o4all-danger);
}

.bewerbung-form-card__form .cf7-upload-item__remove:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
}

/* When a file is selected, collapse the drop zone; file item takes its place.
   display:none is safe here — browsers still submit hidden file inputs on form submit. */
.bewerbung-form-card__form .cf7-upload-card.has-file .cf7-upload-zone {
	display: none;
}

/* Fallback: [file] fields placed outside a .cf7-upload-zone */
.bewerbung-form-card__form input[type="file"] {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.875rem;
	font-family: var(--o4all-font-body);
	font-size: 0.875rem;
	color: var(--o4all-text-secondary);
	background: var(--o4all-bg-subtle);
	border: 1px dashed var(--o4all-border);
	border-radius: 8px;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: auto;
	appearance: auto;
}

.bewerbung-form-card__form input[type="file"]:hover {
	border-color: var(--o4all-color-steel);
	background: var(--o4all-bg-page);
}

/* Acceptance checkbox row */
.bewerbung-form-card__form .wpcf7-acceptance {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.bewerbung-form-card__form .wpcf7-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	min-height: unset;
	margin-top: 0.1875rem;
	accent-color: var(--o4all-color-accent);
	cursor: pointer;
	border-radius: 3px;
	-webkit-appearance: auto;
	appearance: auto;
}

.bewerbung-form-card__form .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--o4all-text-secondary);
}

/* Datenschutz link — gold accent */
.bewerbung-form-card__form .wpcf7-acceptance a {
	color: var(--o4all-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bewerbung-form-card__form .wpcf7-acceptance a:hover {
	color: var(--o4all-color-accent-light);
}

/* Validation states */
.bewerbung-form-card__form input.wpcf7-not-valid,
.bewerbung-form-card__form textarea.wpcf7-not-valid,
.bewerbung-form-card__form select.wpcf7-not-valid {
	border-color: var(--o4all-danger);
}

.bewerbung-form-card__form .wpcf7-not-valid-tip {
	display: block;
	font-size: 0.8125rem;
	color: var(--o4all-danger);
	margin-top: 0.3125rem;
}

.bewerbung-form-card__form .wpcf7-validation-errors,
.bewerbung-form-card__form .wpcf7-mail-sent-ng {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--o4all-danger-bg);
	border: 1px solid var(--o4all-danger);
	border-radius: 8px;
	color: var(--o4all-danger);
	font-size: 0.875rem;
}

.bewerbung-form-card__form .wpcf7-mail-sent-ok {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--o4all-success-bg);
	border: 1px solid var(--o4all-success);
	border-radius: 8px;
	color: var(--o4all-success);
	font-size: 0.875rem;
}

.bewerbung-form-card__form .wpcf7-spinner {
	margin-left: 0.75rem;
	vertical-align: middle;
}

/* Submit button */
.bewerbung-form-card__form .wpcf7-submit,
.bewerbung-form-card__form input[type="submit"] {
	width: 100%;
	min-height: 50px;
	padding: 0.9375rem 1.5rem;
	font-family: var(--o4all-font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	background: var(--o4all-color-accent);
	border: none;
	border-radius: var(--o4all-radius-btn);
	cursor: pointer;
	transition: background-color var(--o4all-transition),
	            transform var(--o4all-transition);
	margin-top: 0.75rem;
}

.bewerbung-form-card__form .wpcf7-submit:hover,
.bewerbung-form-card__form input[type="submit"]:hover {
	background: var(--o4all-color-accent-light);
	transform: translateY(-1px);
}

.bewerbung-form-card__form .wpcf7-submit:focus-visible,
.bewerbung-form-card__form input[type="submit"]:focus-visible {
	outline: 3px solid var(--o4all-color-accent);
	outline-offset: 3px;
}

/* Admin note */

.bewerbung-admin-note {
	font-size: 0.875rem;
	color: var(--o4all-text-muted);
	border-left: 3px solid var(--o4all-color-accent);
	padding-left: 0.75rem;
	margin: 0 0 1.25rem;
}

/* Fallback */

.bewerbung-fallback__text {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--o4all-text-secondary);
	margin: 0 0 1.5rem;
}

.bewerbung-fallback__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   Single Job — Apply CTA Band
   ------------------------------------------------------------------ */

.job-apply-cta {
	background: var(--o4all-color-ink);
	padding-block: 3.5rem;
}

.job-apply-cta__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem 4rem;
}

.job-apply-cta__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	color: var(--o4all-text-inverse);
	margin: 0 0 0.625rem;
}

.job-apply-cta__body {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--o4all-text-inverse);
	opacity: 0.85;
	margin: 0;
	max-width: 520px;
}

.job-apply-cta__btn {
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.bewerbung-form-card {
		padding: 2rem 2rem;
	}

	.job-apply-cta__card {
		flex-direction: column;
		align-items: flex-start;
	}

	.job-apply-cta__btn {
		align-self: flex-start;
	}
}

@media (max-width: 767px) {
	.bewerbung-form-card {
		padding: 1.5rem 1.25rem;
	}

	.bewerbung-fallback__actions {
		flex-direction: column;
	}

	.bewerbung-fallback__actions .btn {
		width: 100%;
		text-align: center;
	}

	.job-apply-cta {
		padding-block: 2.5rem;
	}

	.job-apply-cta__btn {
		width: 100%;
		text-align: center;
	}

	/* Bewerbung CF7 — collapse two-column rows to single column */
	.bewerbung-form-card__form .wpcf7-row {
		grid-template-columns: 1fr;
	}

	.bewerbung-form-card__form .cf7-grid {
		grid-template-columns: 1fr;
	}

	/* Upload zones — compact on mobile */
	.bewerbung-form-card__form .cf7-upload-zone {
		min-height: 88px;
		padding: 1rem 1rem;
	}
}

/* =============================================================================
   Blog / Aktuelles
   home.php (archive) + single.php + post-card + related-posts
   ============================================================================= */

/* -----------------------------------------------------------------------------
   PAGE HERO — blog archive intro paragraph
   Added below the H1 in post-archive-hero.php
   ----------------------------------------------------------------------------- */

.page-hero__intro {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	max-width: 620px;
	margin: 0.875rem 0 0;
}

@media (max-width: 767px) {
	.page-hero__intro {
		font-size: 1rem;
	}
}

/* -----------------------------------------------------------------------------
   BLOG ARCHIVE — grid wrapper + empty state
   ----------------------------------------------------------------------------- */

.blog-archive {
	background: var(--o4all-bg-page);
}

.blog-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-archive__empty {
	max-width: 560px;
}

.blog-archive__empty-message {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--o4all-text-secondary);
	margin: 0 0 1rem;
}

/* WordPress pagination — the_posts_pagination() */
.blog-archive .navigation.pagination {
	margin-top: 3rem;
}

.blog-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

.blog-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--o4all-color-ink);
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-btn);
	text-decoration: none;
	transition: background-color var(--o4all-transition),
	            border-color var(--o4all-transition),
	            color var(--o4all-transition);
}

.blog-archive .page-numbers:hover {
	background: var(--o4all-bg-subtle);
	border-color: var(--o4all-color-accent);
	color: var(--o4all-color-accent);
}

.blog-archive .page-numbers.current {
	background: var(--o4all-color-ink);
	border-color: var(--o4all-color-ink);
	color: #fff;
}

.blog-archive .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	pointer-events: none;
}

/* -----------------------------------------------------------------------------
   POST CARD
   ----------------------------------------------------------------------------- */

.post-card {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color var(--o4all-transition),
	            box-shadow var(--o4all-transition);
}

.post-card:hover {
	border-color: var(--o4all-color-accent);
	box-shadow: var(--o4all-shadow-card-hover);
}

/* Image wrapper — fixed aspect ratio */

.post-card__image-link {
	display: block;
	text-decoration: none;
	flex-shrink: 0;
}

.post-card__image-wrap {
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.post-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--o4all-transition-slow);
}

.post-card:hover .post-card__image {
	transform: scale(1.03);
}

/* Fallback placeholder — dark navy with gold accent */

.post-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(
		145deg,
		var(--o4all-color-ink) 0%,
		var(--o4all-color-navy) 100%
	);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	position: relative;
	overflow: hidden;
}

.post-card__placeholder-line {
	display: block;
	width: 48px;
	height: 2px;
	background: var(--o4all-color-accent);
	border-radius: 1px;
}

.post-card__placeholder-label {
	font-family: var(--o4all-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
}

/* Card body */

.post-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
}

/* Meta row — date + separator + category */

.post-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin-bottom: 0.75rem;
}

.post-card__date {
	font-size: var(--o4all-type-small);
	color: var(--o4all-text-muted-accessible);
}

.post-card__meta-sep {
	font-size: var(--o4all-type-small);
	color: var(--o4all-text-muted);
}

.post-card__category {
	font-size: var(--o4all-type-small);
	font-weight: 600;
	color: var(--o4all-color-accent);
	text-decoration: none;
	transition: color var(--o4all-transition);
}

.post-card__category:hover {
	color: var(--o4all-color-accent-dark);
}

/* Title */

.post-card__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	line-height: 1.35;
	margin: 0 0 0.75rem;
	overflow-wrap: break-word;
}

.post-card__title-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--o4all-transition);
}

.post-card__title-link:hover {
	color: var(--o4all-color-accent);
}

/* Excerpt */

.post-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--o4all-text-secondary);
	margin: 0 0 auto;
	padding-bottom: 1.125rem;
}

/* CTA link — gold arrow style matching service cards */

.post-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--o4all-color-accent);
	text-decoration: none;
	margin-top: 1rem;
	transition: gap var(--o4all-transition), color var(--o4all-transition);
}

.post-card__cta svg {
	flex-shrink: 0;
	transition: transform var(--o4all-transition);
}

.post-card:hover .post-card__cta {
	gap: 0.5rem;
}

.post-card:hover .post-card__cta svg {
	transform: translateX(2px);
}

.post-card__cta:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   SINGLE POST — layout + meta
   ----------------------------------------------------------------------------- */

.single-post {
	background: var(--o4all-bg-page);
}

.single-post__layout {
	display: flex;
	justify-content: center;
}

.single-post__main {
	width: 100%;
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Post meta row */

.post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--o4all-border);
}

.post-meta__date {
	font-size: var(--o4all-type-small);
	color: var(--o4all-text-muted);
}

.post-meta__sep {
	font-size: var(--o4all-type-small);
	color: var(--o4all-text-muted);
}

.post-meta__category {
	font-size: var(--o4all-type-small);
	font-weight: 600;
	color: var(--o4all-color-accent);
	text-decoration: none;
}

.post-meta__category:hover {
	color: var(--o4all-color-accent-dark);
}

.post-meta__read-time {
	font-size: var(--o4all-type-small);
	color: var(--o4all-text-muted);
}

/* Featured image */

.single-post__featured-image {
	border-radius: var(--o4all-radius-card);
	overflow: hidden;
}

.single-post__img {
	width: 100%;
	display: block;
	border-radius: var(--o4all-radius-card);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* -----------------------------------------------------------------------------
   ARTICLE CONTENT TYPOGRAPHY — .o4-article-content
   ----------------------------------------------------------------------------- */

.o4-article-content {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--o4all-text-primary);
}

.o4-article-content > * + * {
	margin-top: 1.25em;
}

.o4-article-content h2 {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.25;
	margin-top: 2.25em;
	margin-bottom: 0.625em;
}

.o4-article-content h3 {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 600;
	color: var(--o4all-color-ink);
	line-height: 1.3;
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.o4-article-content h4 {
	font-family: var(--o4all-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	margin-top: 1.75em;
	margin-bottom: 0.375em;
}

.o4-article-content p {
	margin: 0 0 1em;
}

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

.o4-article-content ul,
.o4-article-content ol {
	padding-left: 1.5rem;
	margin: 0 0 1.25em;
}

.o4-article-content li {
	margin-bottom: 0.375em;
	line-height: 1.7;
}

.o4-article-content li:last-child {
	margin-bottom: 0;
}

.o4-article-content blockquote {
	margin: 1.75em 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--o4all-color-accent);
	background: var(--o4all-bg-subtle);
	border-radius: 0 var(--o4all-radius-card) var(--o4all-radius-card) 0;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--o4all-color-ink);
	font-style: italic;
}

.o4-article-content blockquote p {
	margin: 0;
}

.o4-article-content a {
	color: var(--o4all-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.o4-article-content a:hover {
	color: var(--o4all-color-accent-dark);
}

.o4-article-content img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--o4all-radius-card);
	margin-inline: auto;
}

.o4-article-content figure {
	margin: 1.75em 0;
}

.o4-article-content figcaption {
	font-size: 0.875rem;
	color: var(--o4all-text-muted);
	text-align: center;
	margin-top: 0.625rem;
}

.o4-article-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin: 1.5em 0;
}

.o4-article-content th,
.o4-article-content td {
	padding: 0.6875rem 1rem;
	border: 1px solid var(--o4all-border);
	text-align: left;
	line-height: 1.5;
}

.o4-article-content th {
	background: var(--o4all-bg-subtle);
	font-weight: 600;
	color: var(--o4all-color-ink);
}

.o4-article-content hr {
	border: none;
	border-top: 1px solid var(--o4all-border);
	margin: 2.5em 0;
}

/* WordPress image alignment classes */

.o4-article-content .alignleft {
	float: left;
	margin: 0.25em 1.75em 1.25em 0;
}

.o4-article-content .alignright {
	float: right;
	margin: 0.25em 0 1.25em 1.75em;
}

.o4-article-content .aligncenter {
	display: block;
	margin-inline: auto;
}

/* WordPress caption */
.o4-article-content .wp-caption {
	max-width: 100%;
}

.o4-article-content .wp-caption-text {
	font-size: 0.875rem;
	color: var(--o4all-text-muted);
	text-align: center;
	margin-top: 0.5rem;
}

/* -----------------------------------------------------------------------------
   POST NAVIGATION — previous / next
   ----------------------------------------------------------------------------- */

.post-nav {
	border-top: 1px solid var(--o4all-border);
	padding-top: 2.5rem;
	margin-top: 2rem;
}

.post-nav__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.post-nav__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	text-decoration: none;
	transition: border-color var(--o4all-transition),
	            box-shadow var(--o4all-transition),
	            transform var(--o4all-transition);
}

.post-nav__item--prev {
	border-left: 3px solid var(--o4all-color-accent);
}

.post-nav__item--next {
	text-align: right;
	border-right: 3px solid var(--o4all-color-accent);
}

.post-nav__item:hover {
	border-color: var(--o4all-color-accent);
	box-shadow: var(--o4all-shadow-card-hover);
	transform: translateY(-2px);
}

.post-nav__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
}

.post-nav__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
	line-height: 1.35;
	transition: color var(--o4all-transition);
}

.post-nav__item:hover .post-nav__title {
	color: var(--o4all-color-accent);
}

/* Only one direction available — item spans full width */
.post-nav__item:only-child {
	grid-column: 1 / -1;
}

/* -----------------------------------------------------------------------------
   RELATED POSTS section
   ----------------------------------------------------------------------------- */

.related-posts {
	background: var(--o4all-bg-subtle);
	border-top: 1px solid var(--o4all-border);
}

/* -----------------------------------------------------------------------------
   Responsive — Tablet (≤ 1023px)
   ----------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.blog-grid.o4-grid-3 {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--o4all-grid-gap-tablet);
	}
}

/* -----------------------------------------------------------------------------
   Responsive — Mobile (≤ 767px)
   ----------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.blog-grid.o4-grid-3 {
		grid-template-columns: 1fr;
		gap: var(--o4all-grid-gap-mobile);
	}

	.post-card__body {
		padding: 1.25rem;
	}

	.single-post__main {
		gap: 1.5rem;
	}

	.post-nav__inner {
		grid-template-columns: 1fr;
	}

	.post-nav__item--next {
		text-align: left;
		border-right: 1px solid var(--o4all-border);
		border-left: 3px solid var(--o4all-color-accent);
	}

	.o4-article-content .alignleft,
	.o4-article-content .alignright {
		float: none;
		margin: 0 0 1.25em;
		display: block;
	}
}


/* =============================================================================
   LEGAL PAGES — Impressum, Datenschutz, AGB
   Scoped under .legal-content — no global overrides.
   ============================================================================= */

.legal-page {
	padding-block: var(--o4all-section-y, 112px);
	background: var(--o4all-bg-white, #ffffff);
}

.legal-content {
	max-width: var(--o4all-container-narrow, 780px);
	margin-inline: auto;
	color: var(--o4all-text-secondary, #4A5568);
	line-height: var(--o4all-leading-body, 1.7);
	font-size: var(--o4all-type-body, 1rem);
}

.legal-content h2 {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 700;
	line-height: var(--o4all-leading-heading, 1.3);
	color: var(--o4all-color-ink, #0D1B2A);
	margin-top: 3rem;
	margin-bottom: 1rem;
	padding-top: 2rem;
	border-top: 2px solid var(--o4all-border, #D1D8E0);
}

.legal-content h2:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.legal-content h3 {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 600;
	line-height: var(--o4all-leading-heading, 1.3);
	color: var(--o4all-color-ink, #0D1B2A);
	margin-top: 2rem;
	margin-bottom: 0.625rem;
}

.legal-content p {
	margin-bottom: 1.25rem;
}

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

.legal-content a {
	color: var(--o4all-color-steel, #2C5282);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-all;
}

.legal-content a:hover {
	color: var(--o4all-color-navy, #1A3350);
}

.legal-content ul,
.legal-content ol {
	margin-bottom: 1.25rem;
	padding-left: 1.5rem;
}

.legal-content ul {
	list-style: disc;
}

.legal-content ol {
	list-style: decimal;
}

.legal-content li {
	margin-bottom: 0.5rem;
}

.legal-content strong {
	font-weight: 600;
	color: var(--o4all-text-primary, #0D1B2A);
}

/* Definition list for legal metadata rows (company info, register, etc.) */
.legal-content .legal-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.75rem;
	font-size: var(--o4all-type-small, 0.875rem);
	border: 1px solid var(--o4all-border, #D1D8E0);
	border-radius: var(--o4all-radius-card, 10px);
	padding: 1.25rem 1.5rem;
	background: var(--o4all-bg-subtle, #EEF0F4);
}

.legal-content .legal-meta dt {
	font-weight: 600;
	color: var(--o4all-text-primary, #0D1B2A);
	white-space: nowrap;
}

.legal-content .legal-meta dd {
	color: var(--o4all-text-secondary, #4A5568);
	margin: 0;
}

/* Admin-only warning block — visible only to logged-in users */
.legal-admin-note {
	display: none;
}

.logged-in .legal-admin-note {
	display: block;
	padding: 1rem 1.25rem;
	background: var(--o4all-warning-bg, #FFFFF0);
	border: 2px solid var(--o4all-warning, #B7791F);
	border-radius: var(--o4all-radius-card, 10px);
	margin-bottom: 2rem;
	font-size: var(--o4all-type-small, 0.875rem);
	color: var(--o4all-warning, #B7791F);
}

.legal-admin-note strong {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 700;
	color: var(--o4all-warning, #B7791F) !important;
}

@media (max-width: 767px) {
	.legal-page {
		padding-block: var(--o4all-section-y-tight, 66px);
	}

	.legal-content .legal-meta {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.legal-content .legal-meta dt {
		margin-top: 0.75rem;
	}

	.legal-content .legal-meta dt:first-child {
		margin-top: 0;
	}
}

/* =============================================================================
   Gründer / Founder Page  (page-gruender.php)
   ============================================================================= */

/* Hero extras */

.founder-hero__label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
	margin: 0 0 0.75rem;
}

.founder-hero__role {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0.5rem 0 0;
}

/* Profile section */

.founder-profile {
	background: var(--o4all-bg-page);
}

.founder-profile__inner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 4rem;
	align-items: start;
}

.founder-profile__media {
	position: sticky;
	top: calc(var(--o4all-header-height, 80px) + 2rem);
}

.founder-profile__photo {
	width: 100%;
	display: block;
	border-radius: 16px;
	aspect-ratio: 3/4;
	object-fit: cover;
	object-position: center top;
}

.founder-profile__placeholder {
	width: 100%;
	aspect-ratio: 3/4;
	border-radius: 16px;
	background: linear-gradient(145deg, var(--o4all-color-navy) 0%, var(--o4all-color-ink) 100%);
	border: 1px solid var(--o4all-border-dark);
}

.founder-profile__intro {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--o4all-text-dark);
	margin: 0 0 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--o4all-border-light, #e5e7eb);
}

.founder-profile__bio {
	font-size: 1rem;
	line-height: 1.9;
	color: var(--o4all-text-body);
}

.founder-profile__bio p {
	margin: 0 0 1.25em;
}

.founder-profile__bio p:last-child {
	margin-bottom: 0;
}

.founder-profile__back {
	margin-top: 2.5rem;
}

.about-ceo__btn {
	margin-top: 2rem;
}

@media (max-width: 1023px) {
	.founder-profile__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.founder-profile__media {
		position: static;
		max-width: 320px;
		margin: 0 auto;
	}

	.founder-profile__photo,
	.founder-profile__placeholder {
		aspect-ratio: 1/1;
	}
}


/* =============================================================================
   Presse & Medien  (archive-o4_press.php + single-o4_press.php)
   ============================================================================= */

/* --- Intro section --- */

.press-intro {
	background: var(--o4all-bg-page);
}

.press-intro__inner {
	max-width: 860px;
}

.press-intro__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	line-height: 1.2;
	margin: 0 0 1rem;
	overflow-wrap: break-word;
}

.press-intro__text {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--o4all-text-secondary);
	margin: 0;
}

/* --- Press listing section --- */

.press-listing {
	background: var(--o4all-bg-subtle);
}

.press-listing__header {
	margin-bottom: 2.5rem;
}

.press-listing__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0;
}

.press-listing__empty {
	font-size: 1rem;
	color: var(--o4all-text-secondary);
	margin: 0;
	padding: 2.5rem 0;
}

/* --- Press grid --- */

.press-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.press-grid--compact {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
	.press-grid,
	.press-grid--compact {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.press-grid,
	.press-grid--compact {
		grid-template-columns: 1fr;
	}
}

/* --- Press card --- */

.press-card {
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--o4all-transition), transform var(--o4all-transition);
}

.press-card:hover {
	box-shadow: 0 6px 28px rgba(13, 27, 42, 0.09);
	transform: translateY(-2px);
}

.press-card__thumb-link {
	display: block;
	overflow: hidden;
	flex-shrink: 0;
}

.press-card__thumb {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.press-card:hover .press-card__thumb {
	transform: scale(1.04);
}

.press-card__thumb-placeholder {
	width: 100%;
	aspect-ratio: 16/9;
	background: linear-gradient(145deg, var(--o4all-bg-subtle) 0%, rgba(201, 168, 76, 0.06) 100%);
	border-bottom: 1px solid var(--o4all-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.press-card__thumb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: rgba(201, 168, 76, 0.10);
	border-radius: 12px;
	color: var(--o4all-color-accent);
}

.press-card__body {
	padding: 1.375rem 1.5rem 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.press-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.press-card__date {
	font-size: 0.8125rem;
	color: var(--o4all-text-muted);
	line-height: 1.4;
}

.press-card__source {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
	background: rgba(201, 168, 76, 0.10);
	border: 1px solid rgba(201, 168, 76, 0.28);
	border-radius: 999px;
	padding: 0.2em 0.7em;
	line-height: 1.4;
}

.press-card__title {
	font-family: var(--o4all-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	overflow-wrap: break-word;
}

.press-card__title a {
	color: var(--o4all-color-ink);
	text-decoration: none;
	transition: color var(--o4all-transition);
}

.press-card__title a:hover {
	color: var(--o4all-color-accent);
}

.press-card__title a:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.press-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--o4all-text-secondary);
	margin: 0;
	flex: 1;
}

.press-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--o4all-color-accent);
	text-decoration: none;
	margin-top: auto;
	padding-top: 0.25rem;
	transition: gap var(--o4all-transition);
}

.press-card__cta:hover {
	gap: 0.5rem;
}

.press-card__cta:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Pagination --- */

.press-pagination {
	margin-top: 3rem;
}

.press-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.press-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-btn);
	font-size: 0.9375rem;
	color: var(--o4all-color-ink);
	text-decoration: none;
	transition: background var(--o4all-transition), color var(--o4all-transition), border-color var(--o4all-transition);
	background: var(--o4all-bg-white);
}

.press-pagination .page-numbers:hover,
.press-pagination .page-numbers.current {
	background: var(--o4all-color-ink);
	color: #fff;
	border-color: var(--o4all-color-ink);
}

.press-pagination .page-numbers.dots {
	border: none;
	background: none;
	pointer-events: none;
	color: var(--o4all-text-muted);
}

/* --- Social media section --- */

.press-social {
	background: var(--o4all-bg-white);
	border-top: 1px solid var(--o4all-border);
}

.press-social__header {
	margin-bottom: 2rem;
}

.press-social__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 0.75rem;
}

.press-social__intro {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--o4all-text-secondary);
	margin: 0;
}

.press-social__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.press-social__item {
	flex: 1;
	min-width: 200px;
}

.press-social__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--o4all-bg-subtle);
	border: 1px solid var(--o4all-border);
	border-radius: var(--o4all-radius-card);
	text-decoration: none;
	color: var(--o4all-color-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	transition: border-color var(--o4all-transition), background var(--o4all-transition), box-shadow var(--o4all-transition);
}

.press-social__link:hover {
	border-color: rgba(201, 168, 76, 0.45);
	background: rgba(201, 168, 76, 0.05);
	box-shadow: 0 2px 10px rgba(13, 27, 42, 0.06);
}

.press-social__link:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
}

.press-social__link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(201, 168, 76, 0.10);
	border-radius: 8px;
	color: var(--o4all-color-accent);
	flex-shrink: 0;
}

.press-social__link-label {
	flex: 1;
}

.press-social__link-arrow {
	color: var(--o4all-text-muted);
	flex-shrink: 0;
}

/* --- Single press article --- */

.press-article {
	background: var(--o4all-bg-page);
}

.press-article__layout {
	max-width: 860px;
	margin-inline: auto;
}

.press-article__main {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.press-article__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.press-article__date {
	font-size: 0.9375rem;
	color: var(--o4all-text-muted);
}

.press-article__source-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--o4all-color-accent);
	background: rgba(201, 168, 76, 0.10);
	border: 1px solid rgba(201, 168, 76, 0.28);
	border-radius: 999px;
	padding: 0.25em 0.85em;
}

.press-article__image {
	margin: 0;
	border-radius: var(--o4all-radius-card);
	overflow: hidden;
}

.press-article__img {
	width: 100%;
	display: block;
	border-radius: var(--o4all-radius-card);
	aspect-ratio: 16/9;
	object-fit: cover;
}

.press-article__credit {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--o4all-text-muted);
	font-style: italic;
}

.press-article__content {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--o4all-text-secondary);
}

.press-article__content p {
	margin: 0 0 1.25em;
}

.press-article__content p:last-child {
	margin-bottom: 0;
}

.press-article__content h2,
.press-article__content h3 {
	font-family: var(--o4all-font-heading);
	color: var(--o4all-color-ink);
	line-height: 1.25;
	margin: 1.5em 0 0.75em;
}

.press-article__source-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 1.125rem 1.375rem;
	background: var(--o4all-bg-white);
	border: 1px solid var(--o4all-border);
	border-left: 3px solid var(--o4all-color-accent);
	border-radius: 0 var(--o4all-radius-card) var(--o4all-radius-card) 0;
}

.press-article__source-link-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--o4all-color-ink);
}

.press-article__source-link-url {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9375rem;
	color: var(--o4all-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--o4all-transition);
}

.press-article__source-link-url:hover {
	color: var(--o4all-color-ink);
}

.press-article__source-link-url:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Back link --- */

.o4-section--sm {
	padding-block: 1.5rem;
}

.press-back {
	background: var(--o4all-bg-page);
	border-top: 1px solid var(--o4all-border);
}

.press-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--o4all-color-ink);
	text-decoration: none;
	transition: color var(--o4all-transition), gap var(--o4all-transition);
}

.press-back__link:hover {
	color: var(--o4all-color-accent);
	gap: 0.625rem;
}

.press-back__link:focus-visible {
	outline: 2px solid var(--o4all-color-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Related press --- */

.press-related {
	background: var(--o4all-bg-subtle);
	border-top: 1px solid var(--o4all-border);
}

.press-related__heading {
	font-family: var(--o4all-font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	color: var(--o4all-color-ink);
	margin: 0 0 2rem;
}

/* German hyphenation */
.press-card__title,
.press-article__content h2,
.press-article__content h3 {
	overflow-wrap: break-word;
}

/* =============================================================================
   Phase 9 — 404 Error Page
   ============================================================================= */

.error-404 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	padding-block: var(--o4all-section-y);
	background: linear-gradient(135deg, var(--o4all-color-ink) 0%, var(--o4all-color-navy) 60%, var(--o4all-color-ink) 100%);
	color: var(--o4all-text-inverse);
	overflow: hidden;
	text-align: center;
}

/* decorative ambient orbs */
.error-404__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.error-404__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.18;
}

.error-404__orb--1 {
	width: 480px;
	height: 480px;
	background: var(--o4all-color-accent);
	top: -120px;
	right: -80px;
}

.error-404__orb--2 {
	width: 360px;
	height: 360px;
	background: var(--o4all-color-steel);
	bottom: -100px;
	left: -60px;
}

.error-404__inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
}

.error-404__code {
	display: block;
	font-size: clamp(6rem, 18vw, 12rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--o4all-color-accent);
	text-shadow: 0 0 80px rgba(201, 168, 76, 0.35);
	user-select: none;
}

.error-404__heading {
	font-size: var(--o4all-type-h2);
	color: var(--o4all-text-inverse);
	margin: 0;
	line-height: var(--o4all-leading-heading);
}

.error-404__text {
	font-size: var(--o4all-type-body-lg);
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	line-height: var(--o4all-leading-body);
	max-width: 520px;
}

/* search bar */
.error-404__search {
	display: flex;
	width: 100%;
	max-width: 460px;
	border-radius: var(--o4all-radius-btn);
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.error-404__search-input {
	flex: 1;
	padding: 0.85rem 1.25rem;
	font-size: var(--o4all-type-body);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-right: none;
	color: #fff;
	outline: none;
	transition: background var(--o4all-transition);
}

.error-404__search-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.error-404__search-input:focus {
	background: rgba(255, 255, 255, 0.15);
}

.error-404__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.25rem;
	background: var(--o4all-color-accent);
	border: none;
	color: var(--o4all-color-ink);
	cursor: pointer;
	transition: background var(--o4all-transition);
	flex-shrink: 0;
}

.error-404__search-btn:hover {
	background: var(--o4all-color-accent-light);
}

.error-404__search-btn svg {
	width: 20px;
	height: 20px;
}

/* nav buttons */
.error-404__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* ghost button override for dark background */
.error-404 .btn--ghost {
	color: rgba(255, 255, 255, 0.75);
	border-color: rgba(255, 255, 255, 0.3);
}

.error-404 .btn--ghost:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.08);
}

/* secondary button on dark */
.error-404 .btn--secondary {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.25);
}

.error-404 .btn--secondary:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
}

/* responsive */
@media (max-width: 767px) {
	.error-404 {
		min-height: 70vh;
	}

	.error-404__text {
		font-size: var(--o4all-type-body);
	}

	.error-404__search {
		max-width: 100%;
	}

	.error-404__nav {
		flex-direction: column;
		width: 100%;
		max-width: 320px;
	}

	.error-404__nav .btn {
		width: 100%;
		justify-content: center;
	}

	.error-404__orb--1 {
		width: 280px;
		height: 280px;
	}

	.error-404__orb--2 {
		width: 220px;
		height: 220px;
	}
}