@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/work-sans.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
 * DFV Berlin — Main Stylesheet
 *
 * All styles in one file for reliability and performance.
 * Organized by section — use Ctrl+F to jump to:
 *   VARIABLES, RESET, LAYOUT, HEADER, FOOTER, CARDS,
 *   FORMS, NOTICES, HERO, HOMEPAGE, SIB, FIF, PAGES, RESPONSIVE
 *
 * Brand value: --dfv-orange #CC4400 (per v3 plan).
 * Typography pairing: Fraunces (editorial serif) for headings,
 * Work Sans for body. Loaded via Google Fonts in header.php.
 */


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
	/* Brand */
	--dfv-orange:      #CC4400;
	--dfv-orange-dark: #A83800;
	--dfv-orange-light: #EF6C2E;         /* brighter orange for use ON dark slate (kicker on tools band, step icons) */
	--dfv-peach:       #FEF0E6;          /* tinted-orange surface — used behind icons */
	--dfv-slate:       #333C4E;          /* dark slate surface — used for newsletter band */
	--dfv-heading:     #2A2520;          /* soft warm charcoal - page headings + logo name */
	--dfv-blue:        #0056A7;

	/* Neutrals — warm, not grey */
	--dfv-text:        #1C1A19;
	--dfv-text-light:  #5C5450;
	--dfv-bg:          #FFFFFF;
	--dfv-bg-alt:      #F3F2EF;          /* alternating section bg — neutral light, faint warm undertone */
	--dfv-bg-deep:     #1F1B17;
	--dfv-border:      #E8E2D9;

	/* Typography — single family (Work Sans). --font-display kept as an alias
	   for components that explicitly want a "heading" font, in case we
	   reintroduce a display face later. */
	--font-main:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-display: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-size-base: 1rem;
	--line-height-base: 1.6;

	/* Layout */
	--container-width: 1180px;

	/* Spacing — generous scale */
	--spacing-xs:  0.5rem;
	--spacing-sm:  1rem;
	--spacing-md:  1.5rem;
	--spacing-lg:  2.5rem;
	--spacing-xl:  4rem;
	--spacing-xxl: 6rem;

	/* Surface */
	--radius: 6px;
	--radius-lg: 6px;   /* unified: site uses one crisp 6px radius */
	--shadow-sm: 0 1px 2px rgba(28, 26, 25, 0.04);
	--shadow:    0 6px 24px -8px rgba(28, 26, 25, 0.12);
	--card-shadow: 0 0 0 1px rgba(28, 26, 25, 0.05), 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
	--card-shadow-hover: 0 0 0 1px rgba(28, 26, 25, 0.06), 0 6px 16px -4px rgba(0, 0, 0, 0.10), 0 12px 28px -8px rgba(0, 0, 0, 0.12);
	--img-shadow: 0 10px 28px -8px rgba(20, 16, 12, 0.25);
	--shadow-lg: 0 24px 48px -16px rgba(28, 26, 25, 0.18);
	--transition: 0.2s ease;
}


/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-main);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--dfv-text);
	background-color: var(--dfv-bg);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--dfv-orange);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--dfv-orange-dark);
}

h1, h2, h3 {
	font-family: var(--font-main);
	font-weight: 700;
	color: var(--dfv-heading);
	margin-bottom: var(--spacing-sm);
	letter-spacing: -0.02em;
}

h1 {
	font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin-bottom: var(--spacing-md);
}

h2 {
	font-size: clamp(1.5rem, 1.75vw + 0.75rem, 2rem);
	line-height: 1.2;
}

h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

h4 {
	font-family: var(--font-main);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--dfv-text);
	margin-bottom: var(--spacing-xs);
	letter-spacing: 0;
}

/* Editorial eyebrow — small uppercase label above headings */
.eyebrow {
	display: inline-block;
	font-family: var(--font-main);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin-bottom: var(--spacing-xs);
}

p {
	margin-bottom: var(--spacing-sm);
	color: var(--dfv-text);
}

p.lead {
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--dfv-text-light);
	max-width: 60ch;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

.container--wide {
	max-width: 1400px;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--spacing-sm);
	background: var(--dfv-orange);
	color: #fff;
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius);
	z-index: 9999;
	font-weight: 600;
}

.skip-link:focus {
	top: var(--spacing-sm);
	color: #fff;
}

/* Visually hidden but available to screen readers */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   TOPLINE BAR
   ========================================================================== */

.site-topline {
	background: var(--dfv-bg-alt);
	border-bottom: 1px solid var(--dfv-border);
	font-size: 0.85rem;
}

.site-topline__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
	height: 36px;
}

/* Utility links (Einfache Sprache / English) */
.site-topline__links {
	display: flex;
	align-items: center;
	align-self: center;
	gap: var(--spacing-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-topline__links li {
	display: flex;
	align-items: center;
}

.site-topline__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	line-height: 1;
	color: var(--dfv-text-light);
	font-size: 0.85rem;
	font-weight: 500;
}

.site-topline__link svg {
	display: block;
	flex-shrink: 0;
}

.site-topline__link:hover {
	color: var(--dfv-orange);
}

.topline-search {
	display: flex;
	align-items: stretch;
	align-self: center;
	height: 28px;
}

/* Selectors scoped under .site-topline to outweigh the global
   input[type="search"] rule in the FORMS section (specificity 0,1,1). */
.site-topline .topline-search__input {
	-webkit-appearance: none;
	appearance: none;
	width: 200px;
	margin: 0;
	padding: 0 0.6rem;
	font-family: var(--font-main);
	font-size: 0.85rem;
	color: var(--dfv-text);
	background: var(--dfv-bg);
	border: 1px solid var(--dfv-border);
	border-right: none;
	border-radius: var(--radius);
}

/* Remove the native clear (×) widget that breaks the flush look */
.site-topline .topline-search__input::-webkit-search-decoration,
.site-topline .topline-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.site-topline .topline-search__input:focus {
	outline: none;
	border-color: var(--dfv-orange);
}

.topline-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	flex-shrink: 0;
	color: #fff;
	background: var(--dfv-orange);
	border: 1px solid var(--dfv-orange);
	border-radius: 0 var(--radius) var(--radius) 0;
	cursor: pointer;
	transition: background-color var(--transition);
}

.topline-search__submit:hover {
	background: var(--dfv-orange-dark);
	border-color: var(--dfv-orange-dark);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-main);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn:disabled,
.btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn--primary {
	background-color: var(--dfv-orange);
	color: #fff;
	border-color: var(--dfv-orange);
}

.btn--primary:hover {
	background-color: var(--dfv-orange-dark);
	border-color: var(--dfv-orange-dark);
	color: #fff;
}

/* Ghost: orange outline, transparent — for secondary CTAs on light backgrounds */
.btn--ghost {
	background: transparent;
	color: var(--dfv-orange);
	border-color: var(--dfv-orange);
}

.btn--ghost:hover {
	background: var(--dfv-orange);
	color: #fff;
}

/* Outline: white outline — for use on dark/image backgrounds (slider, hero) */
.btn--outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.85);
}

.btn--outline:hover {
	background: #fff;
	color: var(--dfv-text);
}

/* Text: link-style with arrow, no chrome */
.btn--text {
	background: transparent;
	color: var(--dfv-orange);
	border: none;
	padding: 0.4rem 0;
	font-weight: 600;
}

.btn--text::after {
	content: '→';
	transition: transform var(--transition);
}

.btn--text:hover {
	color: var(--dfv-orange-dark);
}

.btn--text:hover::after {
	transform: translateX(3px);
}


/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.site-header {
	background-color: var(--dfv-bg);
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 1px 0 rgba(28, 26, 25, 0.06), 0 4px 16px -8px rgba(28, 26, 25, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	gap: var(--spacing-lg);
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.site-header__logo:hover {
	opacity: 0.85;
}

/* Orange mark — symbol-only image (logo-mark.png), cropped from logo.png. */
.site-header__logo-mark {
	display: block;
	width: auto;
	height: 40px;
	flex-shrink: 0;
}

.site-header__logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	color: var(--dfv-text);
}

.site-header__logo-name {
	font-family: var(--font-main);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--dfv-heading);
	letter-spacing: 0;
}

.site-header__logo-sub {
	font-family: var(--font-main);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--dfv-text-light);
	letter-spacing: 0.01em;
	margin-top: 2px;
}

/* Desktop navigation */
.site-nav__list {
	display: flex;
	list-style: none;
	gap: 0;
}

.site-nav__list li {
	position: relative;
}

.site-nav__list li a {
	display: block;
	padding: var(--spacing-xs) var(--spacing-sm);
	color: var(--dfv-text);
	font-weight: 500;
	font-size: 0.95rem;
	transition: color var(--transition), background-color var(--transition);
	border-radius: var(--radius);
}

/* Top-level nav items: bolder */
.site-nav__list > li > a {
	font-weight: 700;
}

.site-nav__list li a:hover,
.site-nav__list li.current-menu-item > a,
.site-nav__list li.current-page-ancestor > a {
	color: var(--dfv-orange);
}

/* Dropdown menus */
.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--dfv-bg);
	border: 1px solid var(--dfv-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	list-style: none;
	padding: var(--spacing-xs) 0;
	z-index: 100;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	display: block;
}

.site-nav__list .sub-menu a {
	padding: var(--spacing-xs) var(--spacing-md);
	font-size: 0.78rem;
	border-radius: 0;
}

.site-nav__list .sub-menu a:hover {
	background-color: var(--dfv-bg-alt);
}

/* Desktop: thin chevron on items with dropdowns */
@media (min-width: 1025px) {
	.site-nav__list .menu-item-has-children > a {
		display: inline-flex;
		align-items: center;
	}

	.site-nav__list .menu-item-has-children > a::after {
		content: '';
		display: inline-block;
		width: 0.4em;
		height: 0.4em;
		margin-left: 0.45em;
		margin-bottom: 0.18em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--transition);
		opacity: 0.6;
	}

	.site-nav__list .menu-item-has-children:hover > a::after,
	.site-nav__list .menu-item-has-children:focus-within > a::after {
		transform: rotate(-135deg) translate(-0.1em, -0.1em);
		opacity: 1;
	}
}

/* Mobile menu toggle */
.site-header__menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--spacing-xs);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
}

.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--dfv-text);
	transition: transform var(--transition), opacity var(--transition);
}

.hamburger {
	position: relative;
}

.hamburger::before,
.hamburger::after {
	content: '';
	position: absolute;
	left: 0;
}

.hamburger::before { top: -7px; }
.hamburger::after  { top: 7px; }

.site-header__menu-toggle[aria-expanded="true"] .hamburger {
	background-color: transparent;
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger::before {
	transform: rotate(45deg);
	top: 0;
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger::after {
	transform: rotate(-45deg);
	top: 0;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
	background-color: var(--dfv-slate);
	color: rgba(255, 255, 255, 0.85);
	padding: var(--spacing-xl) 0 var(--spacing-lg);
	margin-top: var(--spacing-xxl);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer a:hover {
	color: var(--dfv-peach);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--spacing-xl);
	align-items: start;
}

.site-footer__brand {
	max-width: 320px;
}

.site-footer__brand-name {
	font-family: var(--font-main);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	display: block;
}

.site-footer__brand-sub {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
}

.site-footer__address,
.site-footer__contact {
	font-style: normal;
	font-size: 0.95rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--spacing-sm);
}

.site-footer__column h4 {
	font-family: var(--font-main);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--spacing-sm);
}

.site-footer__column p,
.site-footer__column li {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.65;
}

.site-footer__column ul {
	list-style: none;
}

/* Footer navigation / Rechtliches */
.site-footer__menu {
	list-style: none;
}

.site-footer__menu li {
	margin-bottom: 0.35rem;
}

.site-footer__menu a {
	font-size: 0.95rem;
}

/* Social links — small, restrained */
.site-footer__social {
	display: flex;
	gap: 0.6rem;
	margin-top: var(--spacing-sm);
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.85);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.site-footer__social a:hover {
	background: var(--dfv-orange);
	border-color: var(--dfv-orange);
	color: #fff;
}

/* Bottom bar — copyright + inline legal links */
.site-footer__bottom {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--spacing-md);
	margin-top: var(--spacing-md);
}

.site-footer__bottom p {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
}

.site-footer__bottom-links {
	display: flex;
	gap: var(--spacing-md);
	list-style: none;
	flex-wrap: wrap;
}

.site-footer__bottom-links a {
	font-size: 0.85rem;
	color: var(--dfv-text-light);
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
	position: relative;
	background: var(--dfv-bg);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: box-shadow var(--transition), transform var(--transition);
}

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

/* Whole card is clickable — stretch the title link over the card (same pattern
   as the Standort / job cards). */
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card:hover .card__title a {
	color: var(--dfv-orange);
}

.card__image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.card__body {
	padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
}

.card__date {
	display: block;
	font-family: var(--font-main);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dfv-text-light);
	margin-bottom: var(--spacing-xs);
}

.card__title {
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: var(--spacing-xs);
}

.card__title a {
	color: var(--dfv-heading);
}

.card__title a:hover {
	color: var(--dfv-orange);
}

.card__excerpt {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--dfv-text-light);
	margin: 0;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.75rem;
	font-family: var(--font-main);
	font-size: var(--font-size-base);
	border: 1px solid var(--dfv-border);
	border-radius: var(--radius);
	background-color: var(--dfv-bg);
	color: var(--dfv-text);
	transition: border-color var(--transition);
}

/* Browsers default <button> to system fonts; inherit Work Sans instead. */
button,
input[type="submit"],
input[type="button"] {
	font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--dfv-orange);
	box-shadow: 0 0 0 2px rgba(204, 68, 0, 0.15);
}

label {
	display: block;
	font-weight: 500;
	margin-bottom: var(--spacing-xs);
}

textarea {
	min-height: 120px;
	resize: vertical;
}

.search-form {
	display: flex;
	gap: var(--spacing-xs);
	max-width: 500px;
}

.search-form .search-field {
	flex: 1;
}

.search-form .search-submit {
	padding: 0.75rem 1.25rem;
	background: var(--dfv-orange);
	color: #fff;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	font-weight: 600;
}

.search-form .search-submit:hover {
	background: var(--dfv-orange-dark);
}


/* ==========================================================================
   NOTICES / ALERTS
   ========================================================================== */

.notice {
	padding: var(--spacing-md);
	border-radius: var(--radius);
	border-left: 4px solid var(--dfv-border);
	background: var(--dfv-bg-alt);
	color: var(--dfv-text);
	margin-bottom: var(--spacing-md);
}

.notice__title {
	font-weight: 700;
	margin-bottom: var(--spacing-xs);
}

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

.notice--info    { border-left-color: var(--dfv-blue);    background: #F1F5FA; }
.notice--success { border-left-color: #2C7A4B;            background: #F0F6F1; }
.notice--warning { border-left-color: var(--dfv-orange);  background: #FBF1EA; }

/* Warning boxes carry the same triangle as .dfv-hinweis (one warning language
   site-wide; used by the GR + FiF trip notices among others). */
.notice--warning { position: relative; padding-left: 48px; }
.notice--warning::before {
	content: "";
	position: absolute;
	left: 16px;
	top: calc(var(--spacing-md) + 1px);
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23A83800'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.29%203.86%201.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200z'/%3E%3Cline%20x1='12'%20y1='9'%20x2='12'%20y2='13'/%3E%3Cline%20x1='12'%20y1='17'%20x2='12.01'%20y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Homepage Hinweisbox banner (front-page.php) sits above the slider. */
.front-page__hinweis { margin-top: 1.25rem; }
.front-page__hinweis .dfv-hinweis { margin: 0; }
.notice--error   { border-left-color: #B3261E;            background: #FBF1F0; }


/* ==========================================================================
   SLIDER / CAROUSEL (Homepage)
   ========================================================================== */

.slider {
	position: relative;
}

.slider__card {
	background: none;
}

.slider__track {
	display: grid;
}

/* Split slide: photo on the left, text panel on the right. */
.slider__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 440px;
	opacity: 0;
	visibility: hidden;
	/* visibility waits for the fade, so the outgoing slide's image really
	   cross-fades instead of vanishing on the first frame. */
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0s; /* incoming shows at once */
}
/* The slide IMAGES cross-fade; the TEXT swaps atomically. Every animated
   variant (opacity stagger, delayed visibility flips) still painted both
   texts on a real iPhone, so the text carries NO transition at all: one
   body visible at any instant, engine-independent. */
.slider__body {
	visibility: hidden;
}
.slider__slide.is-active .slider__body {
	visibility: visible;
}

.slider__media {
	position: relative;
	grid-column: 1;
	overflow: hidden;
	margin: 40px 0;
	border-radius: var(--radius);
	box-shadow: var(--img-shadow);
}

.slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slider__body {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-xl) var(--spacing-lg);
}

.slider__title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	color: var(--dfv-heading);
	line-height: 1.2;
	margin: 0;
	text-wrap: balance;
}

.slider__text {
	font-size: 1.05rem;
	color: var(--dfv-text-light);
	line-height: 1.6;
	margin: 0;
	max-width: 44ch;
}

.slider__body .btn {
	align-self: flex-start;
	margin-top: var(--spacing-xs);
}

.slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md);
	margin-top: var(--spacing-md);
}

.slider__prev,
.slider__next {
	background: var(--dfv-bg);
	border: 1px solid #ddd8d2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--dfv-heading);
	box-shadow: var(--card-shadow);
	transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
	flex: none;
}

.slider__prev:hover,
.slider__next:hover {
	background: var(--dfv-orange);
	color: #fff;
	box-shadow: var(--card-shadow-hover);
}

.slider__dots {
	display: flex;
	gap: 8px;
	align-items: center;
}

.slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: #cfc9c2;
	cursor: pointer;
	padding: 0;
	transition: background-color var(--transition), transform var(--transition);
}

.slider__dot.is-active {
	background: var(--dfv-orange);
	transform: scale(1.2);
}

.slider__dot:hover {
	background: #b3aca4;
}

.btn--lg {
	padding: 1rem 2rem;
	font-size: 1.05rem;
}


/* ==========================================================================
   HOMEPAGE SECTIONS
   ========================================================================== */

.front-page__section {
	padding: var(--spacing-xxl) 0;
}

.front-page__section--alt {
	background-color: var(--dfv-bg-alt);
}

.front-page__section-title {
	text-align: center;
	margin-bottom: var(--spacing-xl);
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--dfv-heading);
}

/* Newsletter — compact strip at the top of the footer (in-footer placement) */
.site-footer__newsletter {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-xl);
	align-items: center;
	padding-bottom: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__newsletter-title {
	font-family: var(--font-main);
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.3rem;
	line-height: 1.3;
}

.site-footer__newsletter-lead {
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
	line-height: 1.5;
}

.site-footer__newsletter-form {
	display: flex;
}

.site-footer__newsletter-input {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	font-family: var(--font-main);
	font-size: 0.95rem;
	color: var(--dfv-text);
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-right: none;
	border-radius: var(--radius);
}

.site-footer__newsletter-input::placeholder {
	color: var(--dfv-text-light);
}

.site-footer__newsletter-input:focus {
	outline: none;
	background: #fff;
	box-shadow: inset 2px 0 0 var(--dfv-orange);
}

.site-footer__newsletter-submit {
	flex-shrink: 0;
	margin-left: -5px;
	border-radius: 0 var(--radius) var(--radius) 0;
}

@media (max-width: 768px) {
	.site-footer__newsletter {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}
}

@media (max-width: 480px) {
	.site-footer__newsletter-form {
		flex-direction: column;
	}

	.site-footer__newsletter-input {
		border-right: 1px solid rgba(255, 255, 255, 0.2);
	}

	.site-footer__newsletter-submit {
		width: 100%;
		margin-left: 0;
		margin-top: 8px;
		border-radius: var(--radius);
	}
}

/* Social — homepage follow / Instagram + Facebook feed placeholders */
.social .front-page__section-title {
	margin-bottom: var(--spacing-sm);
}

.social__lead {
	text-align: center;
	max-width: 56ch;
	margin: 0 auto var(--spacing-xl);
	color: var(--dfv-text-light);
	font-size: 1.05rem;
}

.social__platforms {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--spacing-xl);
	align-items: flex-start;
}

.social__platform {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Facebook feed = compact fixed-height scroll widget (Smash Balloon) */
.social__platform--fb .cff-wrapper,
.social__platform--fb .cff-wrapper-ctn { width: 100%; }
.social__platform--fb #cff {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	padding: 0 !important;
}
.social__platform--fb .cff-header-hero { height: 120px !important; }
.social__platform--fb .cff-visual-header { margin: 0 !important; }
/* pin the header, scroll only the posts */
.social__platform--fb .cff-posts-wrap {
	max-height: 460px;
	overflow-y: auto;
	padding: 0 16px !important;
}
.social__platform--fb .cff-posts-wrap::-webkit-scrollbar { width: 8px; }
.social__platform--fb .cff-posts-wrap::-webkit-scrollbar-thumb { background: var(--dfv-border); border-radius: 4px; }
.social__platform--fb .cff-posts-wrap::-webkit-scrollbar-track { background: transparent; }
/* Header: stack vertically, avatar overlapping cover, name+bio full-width left */
.social__platform--fb .cff-header-wrap { padding: 0 !important; }
.social__platform--fb .cff-header-inner-wrap {
	display: block !important;
	padding: 0 16px 14px !important;
	text-align: left !important;
}
.social__platform--fb .cff-header-img {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: block !important;
}
.social__platform--fb .cff-header-img img,
.social__platform--fb .cff-header-img .cff-feed-image {
	width: 54px !important;
	height: 54px !important;
	border-radius: 50% !important;
	border: 3px solid #fff !important;
	box-shadow: var(--card-shadow) !important;
	margin: -27px 0 8px !important;
	position: relative;
	z-index: 2;
	object-fit: cover;
	background: #fff;
}
.social__platform--fb .cff-header-text {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	text-align: left !important;
}
.social__platform--fb .cff-header-name h3 {
	font-size: 1rem !important;
	line-height: 1.25 !important;
	margin: 0 0 5px !important;
}
.social__platform--fb .cff-bio {
	font-size: 0.82rem !important;
	line-height: 1.45 !important;
	color: var(--dfv-text-light) !important;
	margin: 0 !important;
	text-align: left !important;
}
.social__subtitle {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin: 0 0 var(--spacing-md);
}

.social__feed {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-sm);
}

.social__tile {
	aspect-ratio: 1 / 1;
	background: var(--dfv-peach);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dfv-orange);
	opacity: 0.85;
	transition: opacity var(--transition), transform var(--transition);
}

.social__tile:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* Facebook Page Plugin placeholder — narrow side column */
.social__fb-widget {
	background: var(--dfv-bg);
	border: 1px solid var(--dfv-border);
	border-radius: var(--radius);
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.social__fb-cover {
	height: 50px;
	background: var(--dfv-peach);
}

.social__fb-info {
	padding: 0 var(--spacing-md) var(--spacing-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--spacing-sm);
	flex: 1;
}

.social__fb-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--dfv-bg);
	border: 3px solid var(--dfv-bg);
	color: var(--dfv-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -28px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.social__fb-name {
	font-weight: 600;
	color: var(--dfv-text);
	font-size: 0.95rem;
	line-height: 1.25;
	margin-top: var(--spacing-xs);
}

.social__fb-line {
	display: block;
	height: 0.55rem;
	border-radius: 999px;
	background: var(--dfv-bg-alt);
}

.social__fb-line--short {
	width: 65%;
}

.social__fb-line--followers {
	width: 55%;
	height: 0.5rem;
}

.social__fb-follow {
	width: 100%;
	background: var(--dfv-orange);
	color: #fff;
	padding: 0.5rem var(--spacing-sm);
	border-radius: var(--radius);
	font-size: 0.85rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: var(--spacing-xs);
}

.social__fb-divider {
	width: 100%;
	height: 1px;
	background: var(--dfv-border);
	margin: var(--spacing-xs) 0;
}

.social__fb-tabs {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	width: 100%;
}

.social__fb-tab {
	width: 50px;
	height: 0.45rem;
	background: var(--dfv-bg-alt);
	border-radius: 999px;
}

.social__fb-tab--active {
	background: var(--dfv-orange);
}

.social__fb-post {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: var(--spacing-xs);
	text-align: left;
	flex: 1;
}

.social__fb-thumb {
	min-height: 90px;
	flex: 1;
	background: var(--dfv-peach);
	opacity: 0.55;
	border-radius: var(--radius);
	margin-top: 0.25rem;
}

.social__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xl);
}

.social__btn svg {
	display: block;
}

@media (max-width: 768px) {
	.social__platforms {
		grid-template-columns: 1fr;
	}

	.social__fb-widget {
		max-width: 360px;
		margin: 0 auto;
	}
}

@media (max-width: 600px) {
	.social__feed {
		grid-template-columns: repeat(2, 1fr);
	}

	.social__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.social__btn {
		justify-content: center;
	}
}

/* Quick Links Grid */
.quick-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.quick-link {
	display: flex;
	flex-direction: column;
	background: var(--dfv-bg);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: box-shadow var(--transition), transform var(--transition);
	text-decoration: none;
	color: inherit;
}

.quick-link:hover {
	box-shadow: var(--card-shadow-hover);
	transform: translateY(-2px);
	color: inherit;
}
.quick-link:hover .quick-link__title { color: var(--dfv-orange); }

/* Image band on top (colour placeholder until real photos land). */
.quick-link__img {
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.quick-link__img svg {
	width: 44px;
	height: 44px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.quick-link__img--schuld { background: url('../images/card-schuldnerberatung.jpg') center/cover; }
.quick-link__img--bildung { background: url('../images/card-familienbildung.jpg') center/cover; }
.quick-link__img--erholung { background: url('../images/card-familienerholung.jpg') center/cover; }

.quick-link__body {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.quick-link__title {
	color: var(--dfv-heading);
	margin: 0 0 var(--spacing-xs);
	font-size: 1.25rem;
}

.quick-link__text {
	color: var(--dfv-text-light);
	font-size: 0.95rem;
	margin: 0 0 var(--spacing-md);
	line-height: 1.55;
}

.quick-link__more {
	margin-top: auto;
	color: var(--dfv-orange);
	font-weight: 700;
	font-size: 0.9rem;
}

/* Centred heading + subhead above a homepage section. */
.front-page__section-head {
	text-align: center;
	margin-bottom: var(--spacing-xl);
}
.front-page__section-head .front-page__section-title {
	margin-bottom: var(--spacing-sm);
}
.front-page__section-sub {
	max-width: 56ch;
	margin: 0 auto;
	color: var(--dfv-text-light);
	font-size: 1.05rem;
	line-height: 1.55;
}

/* Homepage social block. */
.social {
	background-color: var(--dfv-bg);
}


/* ==========================================================================
   SIB (Schuldnerberatung) & CONTACT FORM
   ========================================================================== */

.sib-page .sib-contact {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--dfv-border);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
}

.form-field {
	margin-bottom: var(--spacing-md);
}

.form-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-xs);
	font-weight: 400;
	cursor: pointer;
}

.form-field--checkbox input[type="checkbox"] {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

.form-field__counter {
	display: block;
	text-align: right;
	font-size: 0.8rem;
	color: var(--dfv-text-light);
	margin-top: var(--spacing-xs);
}

.dfv-contact-form__status {
	margin-top: var(--spacing-md);
	padding: var(--spacing-sm);
	border-radius: var(--radius);
	font-weight: 500;
}

.dfv-contact-form__status:empty {
	display: none;
}

.dfv-contact-form__status--success {
	display: block;
	background-color: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #a5d6a7;
}

.dfv-contact-form__status--error {
	display: block;
	background-color: #fbe9e7;
	color: #c62828;
	border: 1px solid #ef9a9a;
}


/* ==========================================================================
   FIF (Protected Area)
   ========================================================================== */

.fif-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	background: var(--dfv-bg-alt);
	border-radius: var(--radius);
	font-size: 0.78rem;
}

.fif-bar__user {
	color: var(--dfv-text-light);
}

.fif-bar__logout {
	font-weight: 600;
	color: var(--dfv-orange);
}

.fif-bar__logout:hover {
	color: var(--dfv-orange-dark);
}

.fif-login {
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
}

.fif-login .login-form {
	text-align: left;
	margin-top: var(--spacing-lg);
}

.fif-login .login-form label {
	display: block;
	margin-bottom: var(--spacing-md);
}

.fif-login .login-submit .button {
	background: var(--dfv-orange);
	color: #fff;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	cursor: pointer;
	font-weight: 600;
	transition: background var(--transition), transform var(--transition);
}

.fif-login .login-submit .button:hover {
	background: var(--dfv-orange-dark);
	transform: translateY(-1px);
}

/* FiF Leitfaden — logged-in guide + document downloads */
.fif-lead,
.lead {
	font-size: 1.15rem;
	color: var(--dfv-text-light);
	margin-bottom: var(--spacing-md);
}

.fif-guide h2 {
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--dfv-border);
	color: var(--dfv-heading);
}

.fif-doc,
.doc-link {
	font-weight: 600;
	color: var(--dfv-orange);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.fif-doc::before,
.doc-link::before {
	content: "\2193";
	display: inline-block;
	margin-right: 0.3em;
	font-weight: 700;
}

.fif-doc:hover,
.doc-link:hover {
	color: var(--dfv-orange-dark);
}

.fif-doclist,
.doc-list {
	list-style: none;
	margin: var(--spacing-md) 0;
	padding: 0;
	display: grid;
	gap: var(--spacing-xs);
}

.fif-doclist li,
.doc-list li {
	padding: 0.6rem 0.9rem;
	background: var(--dfv-bg-alt);
	border-radius: var(--radius);
}


/* Pending download (file not yet supplied) — muted, non-link row */
.doc-pending {
	color: var(--dfv-text-light);
}

.doc-pending em {
	font-style: normal;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin-left: 0.4em;
}

/* ==========================================================================
   KARRIERE / JOB LISTINGS
   ========================================================================== */

.job-list {
	display: grid;
	gap: var(--spacing-md);
	margin-top: var(--spacing-lg);
}
.eyebrow + .job-list { margin-top: var(--spacing-xs); }

.job-card {
	position: relative;
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius);
	background: var(--dfv-bg);
	box-shadow: var(--card-shadow);
	transition: box-shadow var(--transition), transform var(--transition);
}

/* Whole card is clickable — the title link is stretched over the card. */
.job-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

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

.job-card:hover .job-card__title a { color: var(--dfv-orange); }

.job-card__title {
	margin: 0 0 var(--spacing-xs);
	font-size: 1.25rem;
}

.job-card__title a {
	color: var(--dfv-text);
	text-decoration: none;
}

.job-card__title a:hover {
	color: var(--dfv-orange);
}

.job-card__meta {
	margin: 0 0 var(--spacing-sm);
	color: var(--dfv-text-light);
	font-size: 0.95rem;
}

.job-card__link {
	position: relative;
	z-index: 2;
	font-weight: 600;
	color: var(--dfv-orange);
	text-decoration: none;
}

.job-card__link:hover {
	color: var(--dfv-orange-dark);
}

.job-empty {
	margin-top: var(--spacing-lg);
	color: var(--dfv-text-light);
}

/* Content headings breathe (single posts + pages).
   Space ABOVE a heading stays generous (separates sections); space BELOW
   scales with heading size so a large h2 isn't squashed against its content. */
.post-single__content h2,
.post-single__content h3,
.post-single__content h4,
.page-article__content h2,
.page-article__content h3,
.page-article__content h4 {
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-xs);
}

.post-single__content h2,
.page-article__content h2 {
	margin-bottom: var(--spacing-sm);
}

.post-single__content h3,
.page-article__content h3 {
	margin-bottom: 0.75rem;
}

/* interior-page section headings = small caps-orange label (blog posts + H1 excluded) */
.page-article__content h2 {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
}

/* content callout — a self-contained info panel inside page copy (grey card) */
.sb-callout {
	background: var(--dfv-bg-alt);
	border-radius: var(--radius);
	padding: 1.75rem 2rem;
	box-shadow: var(--card-shadow);
	margin: 0 0 var(--spacing-lg);
}
.page-article__content .sb-callout > :first-child { margin-top: 0; }
.page-article__content .sb-callout > :last-child { margin-bottom: 0; }
.page-article__content .sb-callout ul:not(.doc-list) li:last-child { margin-bottom: 0; }

/* Schuldnerberatung — friendly "3 Schritte" overview (stacked rows) */
.steps-eyebrow { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dfv-orange); margin: var(--spacing-lg) 0 var(--spacing-sm); }
.steps {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	margin: 0 0 var(--spacing-lg);
	max-width: 640px;
}

/* single-panel variant (Zuschussrechner "So funktioniert es") */
.steps--card {
	max-width: 720px;
	background: #fff;
	border-radius: var(--radius);
	padding: 2rem 2.25rem;
	gap: var(--spacing-md);
}

.step {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
}

.step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	color: #fff;
	background: var(--dfv-slate);
	border: 2px solid var(--dfv-orange-light);
	border-radius: 50%;
}

.step__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin-bottom: var(--spacing-xs);
}

.steps .step__title {
	font-size: 1.1rem;
	margin-top: 0;
	margin-bottom: var(--spacing-xs);
}

.step__text {
	color: var(--dfv-text-light);
	font-size: 0.95rem;
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.step__icon { width: 52px; height: 52px; }
}

/* SIB location contact block — name bold, address muted, phone normal */
.contact-block {
	line-height: 1.7;
	box-shadow: var(--card-shadow);
	background: var(--dfv-bg-alt);
	border-radius: var(--radius);
	padding: 1.2rem 1.4rem;
	max-width: 480px;
}

.contact-block strong {
	font-weight: 600;
	color: var(--dfv-text);
}

/* continuation line aligned under the address text (past the icon gutter) */
.contact-cont {
	display: inline-block;
	padding-left: 0;
	font-size: 0.9rem;
	color: var(--dfv-text-light);
}

/* Inline contact icons (orange) — test on SIB Kontakt */
.contact-icon {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	vertical-align: -0.18em;
	margin-right: 0.45em;
	color: var(--dfv-orange);
}

.contact-block__muted {
	color: var(--dfv-text-light);
}

/* SIB opening-hours card (day | times rows) */
.sib-hours {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	max-width: 440px;
	margin-bottom: var(--spacing-lg);
}

.sib-hours th,
.sib-hours td {
	text-align: left;
	vertical-align: top;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--dfv-border);
}

/* Location pages: Sprechzeiten | Kontakt side by side (variant A) */
.sib-inforow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	align-items: start;
	margin: var(--spacing-lg) 0;
}

.sib-inforow__col > h2:first-child { margin-top: 0; }


/* Kontakt card that holds the details + call button together */
.sib-contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--dfv-bg-alt);
	border-radius: var(--radius);
	padding: 1.2rem 1.4rem;
	box-shadow: var(--card-shadow);
}

.sib-contact-card .contact-block {
	background: none;
	box-shadow: none;
	padding: 0;
	max-width: none;
	margin: 0;
}

.sib-call {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--spacing-sm);
	background: var(--dfv-orange);
	color: #fff;
	font-weight: 600;
	padding: 0.6rem 1.2rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background-color var(--transition);
}

.sib-call:hover { background: var(--dfv-orange-dark); color: #fff; }
.sib-call__ico { width: 1.05em; height: 1.05em; flex-shrink: 0; }

@media (max-width: 768px) {
	.sib-inforow { grid-template-columns: 1fr; }
}

.sib-hours tr:last-child th,
.sib-hours tr:last-child td {
	border-bottom: 0;
}

.sib-hours th {
	width: 4.5rem;
	font-weight: 600;
	color: var(--dfv-text);
	white-space: nowrap;
}

.sib-hours td {
	color: var(--dfv-text-light);
}

/* Location pages: Sprechzeiten | Kontakt side by side (variant A) */
.sib-inforow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	align-items: start;
	margin: var(--spacing-lg) 0;
}

.sib-inforow__col > h2:first-child { margin-top: 0; }


/* Kontakt card that holds the details + call button together */
.sib-contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--dfv-bg-alt);
	border-radius: var(--radius);
	padding: 1.2rem 1.4rem;
	box-shadow: var(--card-shadow);
}

.sib-contact-card .contact-block {
	background: none;
	box-shadow: none;
	padding: 0;
	max-width: none;
	margin: 0;
}

.sib-call {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--spacing-sm);
	background: var(--dfv-orange);
	color: #fff;
	font-weight: 600;
	padding: 0.6rem 1.2rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background-color var(--transition);
}

.sib-call:hover { background: var(--dfv-orange-dark); color: #fff; }
.sib-call__ico { width: 1.05em; height: 1.05em; flex-shrink: 0; }

@media (max-width: 768px) {
	.sib-inforow { grid-template-columns: 1fr; }
}

/* Editorial content bullet lists use orange arrow markers (matches the job ads).
   .doc-list (download cards) keeps its own treatment, so it is excluded. */
.page-article__content ul:not(.doc-list),
.post-single__content ul:not(.doc-list) {
	list-style: none;
	padding-left: 0;
	margin-bottom: var(--spacing-md);
}

.page-article__content ul:not(.doc-list) li,
.post-single__content ul:not(.doc-list) li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.4rem;
}

.page-article__content ul:not(.doc-list) li::before,
.post-single__content ul:not(.doc-list) li::before {
	content: "\2192";
	position: absolute;
	left: 0;
	color: var(--dfv-orange);
	font-weight: 700;
}

/* Stellenausschreibung — single job ad (sleeker, with orange accents) */
.single-stellenausschreibung .post-single {
	max-width: 820px;
}

.single-stellenausschreibung .post-single__content > p:first-of-type {
	font-size: 1.15rem;
	color: var(--dfv-text-light);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--dfv-border);
}

.single-stellenausschreibung .post-single__content h3 {
	color: var(--dfv-orange);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.single-stellenausschreibung .post-single__content ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: var(--spacing-md);
}

.single-stellenausschreibung .post-single__content ul li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.4rem;
}

.single-stellenausschreibung .post-single__content ul li::before {
	content: "\2192";
	position: absolute;
	left: 0;
	color: var(--dfv-orange);
	font-weight: 700;
}

.single-stellenausschreibung .post-single__content a[href^="mailto:"] {
	font-weight: 600;
	color: var(--dfv-orange);
}


/* ==========================================================================
   IMPRESSUM — cleaner legal layout
   ========================================================================== */

.page-impressum .page-article__content {
	max-width: 680px;
}

.page-impressum .page-article__content .gs {
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--dfv-border);
}

.page-impressum .page-article__content p {
	margin-bottom: var(--spacing-sm);
}

.page-impressum .page-article__content p strong {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--dfv-orange);
}

/* ==========================================================================
   DATENSCHUTZ — clean, readable legal layout (matches Impressum's restraint)
   ========================================================================== */
.page-datenschutz .page-article__content { /* full no-sidebar width, was 680px (looked cramped to the left) */ }
.page-datenschutz .page-article__content h2 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dfv-orange); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-xs); padding-top: var(--spacing-md); border-top: 1px solid var(--dfv-border); }
.page-datenschutz .page-article__content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.page-datenschutz .page-article__content h3 { font-size: 1rem; font-weight: 700; color: var(--dfv-heading); margin-top: var(--spacing-md); margin-bottom: var(--spacing-xs); }
.page-datenschutz .page-article__content p { margin-bottom: 0.75rem; }
.page-datenschutz .page-article__content ul { margin-bottom: 0.75rem; }


/* ==========================================================================
   DIVIDER — one consistent thin grey line site-wide
   ========================================================================== */

hr {
	border: 0;
	border-top: 1px solid var(--dfv-border);
	margin: var(--spacing-lg) 0;
}


/* ==========================================================================
   MAP EMBED — click-to-load Google Maps for DSGVO compliance
   ========================================================================== */

.map-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	margin: var(--spacing-md) 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--dfv-bg-alt);
}

.map-embed__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
	border-radius: var(--radius);
}

.map-embed__placeholder-inner {
	text-align: center;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
}

.map-embed__icon {
	color: var(--dfv-orange);
}

.map-embed__notice {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--dfv-text-light);
	margin: 0;
}

.map-embed__notice a {
	color: var(--dfv-orange);
}

.map-embed__iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}


/* ==========================================================================
   FAQ BANNER — section-relevant Q&A on landing pages
   ========================================================================== */

.faq-banner {
	background: var(--dfv-bg-alt);
	padding: var(--spacing-xl) 0;
	margin-top: var(--spacing-xl);
}

/* When the FAQ banner is the last thing on the page, it runs full-bleed into
   the footer. Drop the footer's top margin in that case so there's no white
   gap between the grey banner and the footer. */
.site-main:has(.faq-banner) + .site-footer {
	margin-top: 0;
}

.faq-banner__intro {
	text-align: center;
	max-width: 600px;
	margin: 0 auto var(--spacing-lg);
}

.faq-banner__title {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin: 0 0 var(--spacing-xs);
}

.faq-banner__lead {
	color: var(--dfv-text-light);
	margin: 0;
	font-size: 0.95rem;
}

.faq-banner__items {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	max-width: 760px;
	margin: 0 auto;
}

.faq-item {
	background: var(--dfv-bg);
	border: 1px solid var(--dfv-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition);
}

/* FAQ items expand in place (they don't navigate), so no lift on hover — but
   they still get a card-family cue: a soft shadow appears and the question turns
   orange, echoing the orange-title hover on the clickable cards. */
.faq-item:hover {
	box-shadow: var(--card-shadow);
}

.faq-item:hover .faq-item__question {
	color: var(--dfv-orange);
}

.faq-item[open] {
	border-color: var(--dfv-orange);
}

.faq-item__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md) var(--spacing-lg);
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	color: var(--dfv-text);
	transition: color var(--transition);
}

/* Suppress the default <summary> marker (different in each browser) */
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { display: none; }

.faq-item__icon {
	position: relative;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.faq-item__icon::before,
.faq-item__icon::after {
	content: '';
	position: absolute;
	background: var(--dfv-orange);
	border-radius: 1px;
}

/* Horizontal bar (always visible) */
.faq-item__icon::before {
	top: 6px;
	left: 0;
	right: 0;
	height: 2px;
}

/* Vertical bar (rotates out when open, leaving a minus) */
.faq-item__icon::after {
	top: 0;
	bottom: 0;
	left: 6px;
	width: 2px;
	transition: transform var(--transition);
}

.faq-item[open] .faq-item__icon::after {
	transform: rotate(90deg);
}

.faq-item__answer {
	padding: 0 var(--spacing-lg) var(--spacing-md);
	color: var(--dfv-text-light);
	line-height: 1.6;
}

.faq-item__answer p {
	margin: 0 0 var(--spacing-sm);
}

.faq-item__answer p:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   PAGES (General)
   ========================================================================== */

.page-content {
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-xxl);
}

.page-article__title {
	margin-bottom: var(--spacing-lg);
}

.page-article__content > *:last-child {
	margin-bottom: 0;
}

/* Post Grid */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--spacing-lg);
}

/* Single Post */
.post-single__meta {
	color: var(--dfv-text-light);
	margin-bottom: var(--spacing-lg);
}

.post-single__image {
	margin-bottom: var(--spacing-lg);
	position: relative;
	overflow: hidden; border-radius: var(--radius); box-shadow: var(--img-shadow);
}

/* Breadcrumb */
.breadcrumb {
	font-size: 0.875rem;
	color: var(--dfv-text-light);
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-sm) 0;
}

.breadcrumb a {
	color: var(--dfv-text-light);
}

.breadcrumb a:hover {
	color: var(--dfv-orange);
}

.breadcrumb__separator {
	margin: 0 0.4rem;
}

/* Pagination */
.pagination {
	margin-top: var(--spacing-xl);
	text-align: center;
}

.pagination .nav-links a,
.pagination .nav-links span {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	margin: 0 0.15rem;
	border-radius: var(--radius);
}

.pagination .nav-links .current {
	background-color: var(--dfv-orange);
	color: #fff;
}

/* Page sidebar (child-page navigation) */
.page-content__layout {
	display: flex;
	gap: var(--spacing-xl);
}

.page-content__main {
	flex: 1;
	min-width: 0;
}

.page-sidebar {
	width: 280px;
	flex-shrink: 0;
	order: 1;
	position: sticky;
	top: 100px;
	align-self: flex-start;
}

.page-content--with-sidebar .page-content__main {
	order: 0;
}

.page-sidebar__list {
	list-style: none;
	border-left: 3px solid var(--dfv-border);
}

.page-sidebar__item a {
	display: block;
	padding: var(--spacing-xs) var(--spacing-md);
	color: var(--dfv-text);
	font-size: 0.95rem;
	font-weight: 500;
	border-left: 3px solid transparent;
	margin-left: -3px;
	transition: color var(--transition), border-color var(--transition), background-color var(--transition);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.page-sidebar__item a:hover {
	color: var(--dfv-orange);
	border-left-color: var(--dfv-orange);
	background-color: var(--dfv-bg-alt);
}

.page-sidebar__item.is-current a {
	color: var(--dfv-orange);
	border-left-color: var(--dfv-orange);
	font-weight: 700;
}

.page-sidebar__item--parent a {
	font-weight: 700;
	font-size: 1rem;
	padding-bottom: var(--spacing-sm);
	margin-bottom: var(--spacing-xs);
}

/* 404 */
.page-404 {
	text-align: center;
	padding-top: var(--spacing-xxl);
}

.page-404 h1 {
	font-size: 2.5rem;
	margin-bottom: var(--spacing-md);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet: burger menu at 1024px */
@media (max-width: 1024px) {
	.site-header__menu-toggle {
		display: flex;
	}

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--dfv-bg);
		border-bottom: 3px solid var(--dfv-orange);
		box-shadow: var(--shadow);
		padding: var(--spacing-sm);
		max-height: 80vh;
		overflow-y: auto;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
	}

	/* Sub-menus hidden by default on mobile, toggled via JS */
	.site-nav__list .sub-menu {
		position: static;
		border: none;
		box-shadow: none;
		padding-left: var(--spacing-md);
		display: none;
	}

	.site-nav__list .sub-menu.is-open {
		display: block;
	}

	/* Arrow indicator for items with children */
	.site-nav__list .menu-item-has-children > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.site-nav__list .menu-item-has-children > a::after {
		content: '\25BC';
		font-size: 0.6rem;
		margin-left: var(--spacing-xs);
		transition: transform var(--transition);
	}

	.site-nav__list .menu-item-has-children.is-open > a::after {
		transform: rotate(180deg);
	}

	/* Page sidebar: horizontal chips on tablet/mobile */
	.page-content__layout {
		flex-direction: column;
	}

	.page-sidebar {
		width: 100%;
		order: -1;
		margin-bottom: var(--spacing-lg);
		position: static;
		max-height: none;
		overflow: visible;
	}

	.page-sidebar__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-xs);
		border-left: none;
		border-bottom: 3px solid var(--dfv-border);
		padding-bottom: var(--spacing-sm);
	}

	.page-sidebar__item a {
		border-left: none;
		margin-left: 0;
		padding: var(--spacing-xs) var(--spacing-sm);
		border-radius: var(--radius);
		font-size: 0.85rem;
	}

	.page-sidebar__item a:hover,
	.page-sidebar__item.is-current a {
		background-color: var(--dfv-bg-alt);
		border-left: none;
	}
}

@media (max-width: 768px) {
	h1 { font-size: 1.6rem; }
	h2 { font-size: 1.3rem; }

	/* Footer */
	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.site-footer__brand {
		max-width: none;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

		/* Homepage slider — stack photo above the text panel */
	.slider__slide { grid-template-columns: 1fr; min-height: 0; }
	.slider__media { grid-column: 1; grid-row: 1; min-height: 220px; }
	.slider__body { grid-column: 1; grid-row: 2; padding: var(--spacing-lg) var(--spacing-md); }
	.slider__text { font-size: 0.95rem; }
	.slider__prev, .slider__next { width: 36px; height: 36px; }
	.quick-links { grid-template-columns: 1fr 1fr; }

	/* Grids */
	.post-grid {
		grid-template-columns: 1fr;
	}

	.form-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.quick-links {
		grid-template-columns: 1fr;
	}
}

/* Instagram feed (Smash Balloon): rounded corners + card shadow to match the site.
   The shadow MUST live on .sbi_item — both .sbi_photo and .sbi_photo_wrap carry the
   plugin's own overflow:hidden, which clips any shadow set on them. .sbi_item is the
   outermost tile, so its own shadow paints into the 20px grid gutter unclipped. */
#sb_instagram #sbi_images .sbi_item {
	border-radius: var(--radius);
	box-shadow: var(--card-shadow);
}
#sb_instagram #sbi_images .sbi_item .sbi_photo,
#sb_instagram #sbi_images .sbi_item .sbi_photo img {
	border-radius: var(--radius);
}

/* Aktuelles card fallback: logo on brand surface when a post has no Beitragsbild */
.card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	background: var(--dfv-peach);
}

.card__image--placeholder img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	opacity: 0.9;
}

/* Single-post featured image: block-level so all four corners round evenly */
.post-single__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Intro/lead: the first paragraph of a page is treated as a standfirst
   (larger, muted) for consistency. Pages that open with a heading/list/table
   instead of a paragraph are unaffected. */
.page-article__content > p:first-child {
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--dfv-text-light);
	max-width: 60ch;
	margin-bottom: var(--spacing-md);
}

/* Lead-in labels in arrow-bullet content lists — dark, matching body headings
   (was orange until 7 Jul 2026; Evie preferred the darker, calmer look). */
.page-article__content ul:not(.doc-list) li > strong:first-child,
.post-single__content ul:not(.doc-list) li > strong:first-child {
	color: var(--dfv-heading);
}
/* Ansprechpartner contact box ([dfv_ansprechpartner]) */
.ansprechpartner {
	background: var(--dfv-bg-alt);
	box-shadow: var(--card-shadow);
	border-radius: var(--radius);
	padding: 1.2rem 1.4rem;
	max-width: 320px;
	line-height: 1.6;
	margin: var(--spacing-lg) 0 0;
}
.ansprechpartner__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin-bottom: 0.6rem;
}
.ansprechpartner__person + .ansprechpartner__person {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ansprechpartner__name {
	font-weight: 700;
	margin: 0 0 0.15rem;
}
.ansprechpartner__role {
	margin: 0 0 0.15rem;
	color: var(--dfv-text-light);
	font-size: 0.9rem;
}
.ansprechpartner__line {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.ansprechpartner__icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	margin-top: 0.28em;
	color: var(--dfv-orange);
}
.ansprechpartner__hours {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--dfv-text-light);
}

/* ==========================================================================
   FAMILIENBILDUNG landing (templates/page-familienbildung.php)
   ========================================================================== */
.fb-landing__intro {
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--dfv-text-light);
	max-width: 60ch;
	margin-top: var(--spacing-sm);
}
.fb-landing__intro p {
	margin-bottom: var(--spacing-sm);
	color: var(--dfv-text-light);
}
.fb-landing__intro p:last-child {
	margin-bottom: 0;
}

.fb-landing .eyebrow { margin-top: var(--spacing-lg); }
.fb-bereiche {
	margin-top: var(--spacing-xs);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	background: #fff;
	border-radius: var(--radius);
	padding: 2rem 2.25rem;
	max-width: 680px;
}
.fb-bereich {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--spacing-md);
	align-items: start;
}
.fb-bereich__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--dfv-slate);
	border: 2px solid var(--dfv-orange-light);
	display: flex;
	align-items: center;
	justify-content: center;
}
.fb-bereich__icon svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fb-bereich__title {
	font-size: 1.4rem;
	margin: 0 0 var(--spacing-xs);
}
.fb-bereich__text {
	color: var(--dfv-text-light);
	max-width: 58ch;
}
.fb-bereich__text p:last-child {
	margin-bottom: 0;
}

.fb-cta { margin: 2rem 0 0; background: var(--dfv-bg-alt); border-radius: var(--radius); padding: 2rem 2.25rem; display: grid; grid-template-columns: 64px 1fr; gap: var(--spacing-md); align-items: start; text-decoration: none; color: inherit; box-shadow: var(--card-shadow); transition: box-shadow var(--transition), transform var(--transition); }
.fb-cta__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--dfv-orange); display: flex; align-items: center; justify-content: center; flex: none; }
.fb-cta__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fb-cta__text h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--dfv-heading); margin: 0 0 0.3rem; }
.fb-cta__text p { color: var(--dfv-text-light); font-size: 0.95rem; margin: 0 0 1rem; max-width: 58ch; }
.fb-cta .btn { flex-shrink: 0; }
.fb-cta:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.fb-cta:hover .btn__arrow { transform: translateX(3px); }
.fb-cta:hover .fb-cta__text h3 { color: var(--dfv-orange); }
.fb-cta:hover .btn { background-color: var(--dfv-orange-dark); border-color: var(--dfv-orange-dark); }
.fb-cta:focus-visible { outline: 2px solid var(--dfv-orange); outline-offset: 3px; }
@media (max-width: 560px) { .fb-cta { grid-template-columns: 48px 1fr; gap: var(--spacing-sm); padding: 1.5rem; } .fb-cta__icon { width: 48px; height: 48px; } .fb-cta__icon svg { width: 24px; height: 24px; } }

@media (max-width: 600px) {
	.fb-bereich {
		grid-template-columns: 48px 1fr;
		gap: var(--spacing-sm);
	}
	.fb-bereich__icon {
		width: 48px;
		height: 48px;
	}
	.fb-bereich__icon svg {
		width: 24px;
		height: 24px;
	}
}

/* ==========================================================================
   FAMILIENERHOLUNG sub-pages (templates/page-familienerholung.php)
   ========================================================================== */
.fe-lead { font-size: 1.15rem; line-height: 1.55; color: var(--dfv-text-light); max-width: 60ch; margin: var(--spacing-sm) 0 var(--spacing-lg); }
.fe-lead p { color: var(--dfv-text-light); }
.fe-lead p:last-child { margin-bottom: 0; }
.fe-hero { position: relative; min-height: clamp(230px, 30vw, 330px); border-radius: var(--radius); overflow: hidden; margin: 0 0 var(--spacing-md); display: flex; align-items: flex-end; box-shadow: var(--img-shadow); }
.fe-hero__photo, .fe-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.fe-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(255, 255, 255, 0.85) 68%, #fff 93%), linear-gradient(to right, #fff, rgba(255, 255, 255, 0) 20%), linear-gradient(to left, #fff, rgba(255, 255, 255, 0) 20%); }
.fe-hero__title { position: relative; z-index: 1; color: var(--dfv-heading); margin: 0; padding: 0 0 var(--spacing-sm); font-size: clamp(2rem, 3.5vw + 1rem, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7); max-width: 22ch; }
.fe-hero--toptitle { align-items: flex-start; }
.fe-hero--toptitle .fe-hero__scrim { background: radial-gradient(135% 100% at 0% 0%, rgba(20, 16, 12, 0.72) 0%, rgba(20, 16, 12, 0.28) 34%, rgba(20, 16, 12, 0) 60%), linear-gradient(to bottom, transparent 62%, rgba(255, 255, 255, 0.85) 90%, #fff 100%), linear-gradient(to right, #fff, rgba(255, 255, 255, 0) 20%), linear-gradient(to left, #fff, rgba(255, 255, 255, 0) 20%); }
.fe-hero--toptitle .fe-hero__title { color: #fff; padding: var(--spacing-lg) 0 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.fe-hero--banner .fe-hero__scrim { background: linear-gradient(to bottom, transparent 35%, rgba(255, 255, 255, 0.85) 68%, #fff 93%), linear-gradient(to top, transparent 85%, rgba(255, 255, 255, 0.7) 95%, #fff 100%), linear-gradient(to right, #fff, rgba(255, 255, 255, 0) 20%), linear-gradient(to left, #fff, rgba(255, 255, 255, 0) 20%); }
.fe-section-title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dfv-orange); margin: var(--spacing-lg) 0 var(--spacing-md); }

.fe-blocks { display: flex; flex-direction: column; gap: 3rem; max-width: 680px; }
.fe-block { display: grid; grid-template-columns: 52px 1fr; gap: var(--spacing-md); align-items: start; }
.fe-block__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--dfv-slate); border: 2px solid var(--dfv-orange-light); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.fe-block__icon svg { width: 26px; height: 26px; }
.fe-block h3 { font-size: 1.05rem; color: var(--dfv-heading); margin: 4px 0 5px; }
.fe-block p { margin: 0; color: var(--dfv-text-light); font-size: 0.95rem; line-height: 1.55; max-width: 58ch; }
.fe-block--accent .fe-block__icon { background: var(--dfv-orange); color: #fff; border: none; }

.fe-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.fe-card { background: var(--dfv-bg); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--card-shadow); }
.fe-card__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dfv-bg-alt); }
.fe-card__photo, .fe-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fe-card__body { padding: 16px 18px 18px; }
.fe-card__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--dfv-slate); border: 2px solid var(--dfv-orange-light); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.fe-card__icon svg { width: 20px; height: 20px; }
.fe-card h3 { font-size: 1rem; color: var(--dfv-heading); margin: 0 0 6px; }
.fe-card p { margin: 0; color: var(--dfv-text-light); font-size: 0.9rem; line-height: 1.5; }
.fe-cardlink { display: inline-block; margin-top: 12px; color: var(--dfv-orange); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.fe-cardlink:hover { color: var(--dfv-orange-dark); }

/* ==========================================================================
   FAMILIENERHOLUNG landing / Ãœbersicht (templates/page-familienerholung-landing.php)
   ========================================================================== */
.fe-ov__intro { font-size: 1.15rem; line-height: 1.55; color: var(--dfv-text-light); max-width: 60ch; margin-top: var(--spacing-sm); }
.fe-ov__intro p { margin-bottom: var(--spacing-sm); color: var(--dfv-text-light); }
.fe-ov__intro p:last-child { margin-bottom: 0; }

.fe-ov__eyebrow { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dfv-orange); margin: var(--spacing-lg) 0 var(--spacing-xs); }

.fe-ov__offers { display: flex; flex-direction: column; gap: var(--spacing-md); margin-top: var(--spacing-md); }
.fe-ov__offer { display: grid; grid-template-columns: 64px 1fr; gap: var(--spacing-md); align-items: start; padding: var(--spacing-lg); background: #fff; border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: var(--card-shadow); transition: box-shadow var(--transition), transform var(--transition); }
/* cards now: no first-child border reset */
.fe-ov__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--dfv-slate); border: 2px solid var(--dfv-orange-light); display: flex; align-items: center; justify-content: center; flex: none; }
.fe-ov__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fe-ov__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--dfv-heading); margin-bottom: var(--spacing-xs); }
.fe-ov__arrow { transition: transform var(--transition); }
.fe-ov__offer:hover .fe-ov__title { color: var(--dfv-orange); }
.fe-ov__offer:hover .fe-ov__arrow { transform: translateX(4px); }
.fe-ov__offer:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.fe-ov__text { display: block; color: var(--dfv-text-light); max-width: 58ch; }
.fe-ov__more { display: inline-block; margin-top: 0.6rem; color: var(--dfv-orange); font-weight: 700; font-size: 0.85rem; }

.fe-ov__offer--accent { background: var(--dfv-bg-alt); border-radius: var(--radius); padding: var(--spacing-lg); margin-top: var(--spacing-xs); align-items: start; box-shadow: var(--card-shadow); }
.fe-ov__offer--accent .fe-ov__icon { background: var(--dfv-orange); border: none; }
.fe-ov__offer--accent .fe-ov__icon svg { stroke: #fff; }
.fe-ov__btn { display: inline-block; margin-top: 0.8rem; background: var(--dfv-orange); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.65rem 1.5rem; border-radius: var(--radius); }
.fe-ov__offer--accent:hover .fe-ov__btn { background: var(--dfv-orange-dark); }

@media (max-width: 600px) {
	.fe-ov__offer { grid-template-columns: 48px 1fr; gap: var(--spacing-sm); }
	.fe-ov__icon { width: 48px; height: 48px; }
	.fe-ov__icon svg { width: 24px; height: 24px; }
	.fe-ov__offer--accent { padding: var(--spacing-md); }
	.fe-ov__title { font-size: 1.2rem; }
}

/* ==========================================================================
   MITGLIED WERDEN (templates/page-mitglied-werden.php)
   ========================================================================== */
.mitglied__lead { font-size: 1.15rem; line-height: 1.55; color: var(--dfv-text-light); max-width: 60ch; margin-top: var(--spacing-sm); }
.mitglied__eyebrow { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dfv-orange); margin: var(--spacing-xl) 0 var(--spacing-md); }

.mitglied-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.mitglied-col { border-radius: var(--radius); padding: 1.75rem 2rem; box-shadow: var(--card-shadow); }
.mitglied-col--reasons { background: #fff; }
.mitglied-col--steps { background: var(--dfv-bg-alt); }
.mitglied-col .mitglied__eyebrow { margin-top: 0; }
@media (max-width: 700px) { .mitglied-cols { grid-template-columns: 1fr; } }

.mitglied-reasons { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.mitglied-reasons li { display: grid; grid-template-columns: 32px 1fr; gap: var(--spacing-sm); align-items: start; }
.mitglied-reasons__tick { width: 32px; height: 32px; border-radius: 50%; background: var(--dfv-slate); border: 2px solid var(--dfv-orange-light); display: flex; align-items: center; justify-content: center; flex: none; }
.mitglied-reasons__tick svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mitglied-reasons p { margin: 4px 0 0; color: var(--dfv-text); }

.mitglied-beitrag { background: var(--dfv-slate); border-radius: var(--radius); padding: var(--spacing-lg) 2.25rem; display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; align-items: center; box-shadow: var(--card-shadow); }
.mitglied-beitrag__price { text-align: center; line-height: 1; }
.mitglied-beitrag__amount { font-size: 2.8rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.mitglied-beitrag__per { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-top: 0.35rem; }
.mitglied-beitrag__text h3 { font-size: 1.15rem; color: #fff; margin: 0 0 0.35rem; }
.mitglied-beitrag__text p { margin: 0; color: rgba(255,255,255,0.82); font-size: 0.95rem; }

.mitglied-steps { display: flex; flex-direction: column; gap: var(--spacing-md); }
.mitglied-step { display: grid; grid-template-columns: 36px 1fr; gap: var(--spacing-sm); align-items: start; }
.mitglied-step__n { width: 36px; height: 36px; border-radius: 50%; background: var(--dfv-orange); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.mitglied-step h3 { font-size: 1.05rem; color: var(--dfv-heading); margin: 4px 0 3px; }
.mitglied-step p { margin: 0; color: var(--dfv-text-light); font-size: 0.95rem; }

.mitglied-downloads { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
.mitglied-dl { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--dfv-bg); text-decoration: none; color: inherit; box-shadow: var(--card-shadow); flex: 1 1 260px; transition: box-shadow var(--transition), transform var(--transition); }
.mitglied-dl:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.mitglied-dl__icon { width: 40px; height: 40px; border-radius: 8px; background: var(--dfv-slate); border: 2px solid var(--dfv-orange-light); display: flex; align-items: center; justify-content: center; flex: none; }
.mitglied-dl__icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mitglied-dl__name { font-weight: 600; color: var(--dfv-heading); display: block; }
.mitglied-dl__meta { font-size: 0.8rem; color: var(--dfv-text-light); }

.mitglied-contact { margin-top: var(--spacing-xl); background: var(--dfv-bg-alt); border-radius: var(--radius); padding: 1.75rem 2rem; box-shadow: var(--card-shadow); }
.mitglied-contact__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dfv-orange); }
.mitglied-contact__name { font-weight: 700; color: var(--dfv-heading); margin: 0.5rem 0 0.6rem; }
.mitglied-contact__line { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; margin: 0.3rem 0; }
.mitglied-contact__line svg { width: 17px; height: 17px; fill: none; stroke: var(--dfv-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mitglied-contact__line a { text-decoration: none; }

@media (max-width: 560px) {
	.mitglied-beitrag { grid-template-columns: 1fr; text-align: center; gap: var(--spacing-sm); }
}

/* ==========================================================================
   GESCHÄFTSSTELLE contact block ([dfv_geschaeftsstelle]) — Impressum / Kontakt
   ========================================================================== */
.gs { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: var(--spacing-lg); }
.gs__name { margin: 0 0 0.5rem; }
.gs__org { display: block; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--dfv-heading); line-height: 1.25; }
.gs__sub { display: block; font-size: 0.95rem; color: var(--dfv-text-light); }
.gs__line { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; color: var(--dfv-text); }
.gs__line svg { width: 18px; height: 18px; stroke: var(--dfv-orange); flex: none; margin-top: 2px; }
.gs__line a { text-decoration: none; }

/* Schuldnerberatung locations ([dfv_standorte]) — Kontakt page */
.standorte { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-top: var(--spacing-md); }
.standort { position: relative; background: var(--dfv-bg); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--card-shadow); transition: box-shadow var(--transition), transform var(--transition); }
.standort:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.standorte .standort__name { font-size: 1.1rem; margin: 0 0 0.7rem; }
.standort__name a { color: var(--dfv-heading); text-decoration: none; }
.standort__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.standort:hover .standort__name a { color: var(--dfv-orange); }
.standort__line { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; color: var(--dfv-text); }
.standort__line + .standort__line { margin-top: 0.2rem; }
.standort__icon { width: 17px; height: 17px; stroke: var(--dfv-orange); flex: none; margin-top: 2px; }
.standort__note { display: block; font-size: 0.88rem; color: var(--dfv-text-light); margin-top: 2px; }
.standort__line a { text-decoration: none; position: relative; z-index: 2; }
.page-slug-kontakt .gs { margin-top: var(--spacing-md); }
@media (max-width: 620px) { .standorte { grid-template-columns: 1fr; } }

/* Schuldnerberatung page: bottom two-column row (P-Konto-Bescheinigung +
   Weiterfuehrende Links sit side by side below the full-width downloads). */
.sib-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); align-items: start; margin-top: var(--spacing-lg); }
.sib-twocol > .sib-twocol__col { min-width: 0; }
.sib-twocol .sib-twocol__col > :first-child { margin-top: 0; }
@media (max-width: 720px) { .sib-twocol { grid-template-columns: 1fr; gap: var(--spacing-md); } }
/* Schuldnerberatung: cards sit under their own h2, so use the same heading gap as the other sections (no extra top margin). */
.page-slug-schuldnerberatung .standorte { margin-top: 0; }

.fe-highlight { background: var(--dfv-bg-alt); border-radius: var(--radius); padding: 22px 24px; margin-top: var(--spacing-lg); display: grid; grid-template-columns: 44px 1fr; gap: var(--spacing-md); align-items: start; box-shadow: var(--card-shadow); }
.fe-highlight__icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--dfv-orange); display: flex; align-items: center; justify-content: center; flex: none; }
.fe-highlight__icon svg { width: 22px; height: 22px; }
.fe-highlight h3 { margin: 2px 0 6px; font-size: 1.05rem; color: var(--dfv-heading); }
.fe-highlight p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--dfv-text); }

.fe-info { font-size: 0.85rem; color: var(--dfv-text-light); border-top: 1px solid var(--dfv-border); margin-top: var(--spacing-xl); padding-top: var(--spacing-md); line-height: 1.55; max-width: 66ch; }

@media (max-width: 560px) { .fe-cards { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .fe-block { grid-template-columns: 44px 1fr; gap: var(--spacing-sm); } .fe-block__icon { width: 44px; height: 44px; } }

/* ==========================================================================
   FLYER GRID + LIGHTBOX (templates/page-aktuelle-angebote.php)
   ========================================================================== */
/* Offer list — flyer thumbnail + structured details, event-listing style */
.offer-list {
	margin-top: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}
.offer {
	display: grid;
	grid-template-columns: 1fr 190px;
	gap: var(--spacing-lg);
	align-items: center;
	background: var(--dfv-bg);
	border-radius: var(--radius);
	box-shadow: var(--card-shadow);
	padding: var(--spacing-lg);
}
.offer__flyer {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--dfv-bg-alt);
	line-height: 0;
	box-shadow: var(--shadow-sm);
}
.offer__flyer img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--transition);
}
.offer__flyer:hover img,
.offer__flyer:focus-visible img {
	transform: scale(1.03);
}
.offer__zoom {
	position: absolute;
	left: 50%;
	bottom: 0.6rem;
	transform: translateX(-50%);
	background: rgba(28, 26, 25, 0.78);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	opacity: 0;
	transition: opacity var(--transition);
	white-space: nowrap;
}
.offer__flyer:hover .offer__zoom,
.offer__flyer:focus-visible .offer__zoom {
	opacity: 1;
}
.offer__flyer:focus-visible {
	outline: 3px solid var(--dfv-orange);
	outline-offset: 2px;
}
.offer--no-flyer {
	grid-template-columns: 1fr;
}
.offer__body {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}
.offer__title {
	font-size: 1.3rem;
	margin: 0 0 var(--spacing-sm);
	color: var(--dfv-heading);
}
.offer__meta {
	margin: 0 0 var(--spacing-md);
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0;
}
.offer__row {
	display: contents;
}
.offer__meta dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	padding: 0.5rem 1.1rem 0.5rem 0;
	border-bottom: 1px solid var(--dfv-border);
}
.offer__meta dd {
	margin: 0;
	color: var(--dfv-text);
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--dfv-border);
}
.offer__row:last-child dt, .offer__row:last-child dd { border-bottom: none; }
.offer__desc {
	color: var(--dfv-text-light);
	margin: 0 0 var(--spacing-sm);
}
.offer__anmeldung {
	margin: 0;
	font-size: 0.92rem;
	color: var(--dfv-text);
}
.offer__anmeldung-label {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin-right: 0.4rem;
}
@media (max-width: 620px) {
	.offer {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}
	.offer__flyer {
		max-width: 240px;
	}
	.offer__meta {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}
	.offer__row {
		display: block;
		margin-bottom: 0.5rem;
	}
}

/* Lightbox overlay */
body.lightbox-open {
	overflow: hidden;
}
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(28, 26, 25, 0.9);
}
.lightbox[hidden] {
	display: none;
}
.lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
	max-height: 100%;
}
.lightbox__img {
	display: block;
	max-width: min(88vw, 720px);
	max-height: 84vh;
	width: auto;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	background: #fff;
}
.lightbox__caption {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 500;
	text-align: center;
}
.lightbox__close,
.lightbox__nav {
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	transition: background var(--transition);
}
.lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	width: 44px;
	height: 44px;
	font-size: 1.8rem;
}
.lightbox__nav {
	width: 48px;
	height: 48px;
	font-size: 2rem;
}
.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
	background: var(--dfv-orange);
	outline: none;
}
.lightbox__nav[hidden] {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.offer__flyer img {
		transition: none;
	}
	.offer__flyer:hover img,
	.offer__flyer:focus-visible img {
		transform: none;
	}
}

/* ==========================================================================
   DOWNLOAD ACCORDION (Schuldnerberatung — collapsible doc-list groups)
   ========================================================================== */
.doc-group {
	border-bottom: 1px solid var(--dfv-border);
}
.doc-group:first-of-type {
	border-top: 1px solid var(--dfv-border);
}
.doc-group > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: var(--spacing-sm) 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--dfv-heading);
}
.doc-group > summary::-webkit-details-marker {
	display: none;
}
.doc-group > summary::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--dfv-orange);
	border-bottom: 2px solid var(--dfv-orange);
	transform: rotate(-45deg);
	transition: transform var(--transition);
	flex-shrink: 0;
}
.doc-group[open] > summary::before {
	transform: rotate(45deg);
}
.doc-group > summary:hover {
	color: var(--dfv-orange);
}
.doc-group > summary:focus-visible {
	outline: 2px solid var(--dfv-orange);
	outline-offset: 3px;
	border-radius: 2px;
}
.doc-group .doc-list {
	margin: 0;
	padding-bottom: 0.5rem;
}
/* Gruppen headings inside an open accordion sit MUCH tighter than generic
   content h3s (spacing-lg top margins stacked into huge gaps here; the
   heading-less Bereiche set the rhythm to match). */
.doc-group h3 {
	margin-top: 1rem;
	margin-bottom: 0.4rem;
	font-size: 1rem;
}
.doc-group > summary + h3 {
	margin-top: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
	.doc-group > summary::before {
		transition: none;
	}
}

@media (max-width: 600px) {
	.lightbox__nav {
		position: absolute;
		bottom: clamp(0.75rem, 3vw, 1.5rem);
	}
	.lightbox__nav--prev {
		left: clamp(0.75rem, 3vw, 1.5rem);
	}
	.lightbox__nav--next {
		right: clamp(0.75rem, 3vw, 1.5rem);
	}
}

/* ==========================================================================
   HOMEPAGE — contained hero + tools band (20 Jul)
   ========================================================================== */

/* Hero slider: framed within the container, rounded (not full-bleed) */
.slider-frame {
	max-width: var(--container-width);
	margin: var(--spacing-lg) auto var(--spacing-xl);
	padding: 0 var(--spacing-md);
}
.slider-frame .slider__card {
	border-radius: 0;
}

/* Tools band: Zuschussrechner + Finanzbarometer on the slate accent */
.hp-tools {
	background-color: var(--dfv-slate);
}
.hp-tools .front-page__section-title { color: #fff; }
.hp-tools .front-page__section-sub { color: rgba(255, 255, 255, 0.75); }

.hp-tools__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-lg);
	max-width: 820px;
	margin: 0 auto;
}

.hp-tool {
	background: var(--dfv-bg);
	border-radius: var(--radius);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
	padding: var(--spacing-lg) var(--spacing-md);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hp-tool__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--dfv-slate);
	color: #fff;
	border: 2px solid var(--dfv-orange-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--spacing-sm);
}

.hp-tool__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--dfv-heading);
	margin: 0 0 var(--spacing-xs);
}

.hp-tool__text {
	color: var(--dfv-text-light);
	font-size: 0.95rem;
	margin: 0 0 var(--spacing-md);
	max-width: 32ch;
}

.hp-tool .btn { margin-top: auto; }
.hp-tool { text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
.hp-tool:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.30); }
.hp-tool:hover .hp-tool__title { color: var(--dfv-orange); }
.hp-tool:hover .btn { background-color: var(--dfv-orange-dark); border-color: var(--dfv-orange-dark); }

@media (max-width: 640px) {
	.hp-tools__grid { grid-template-columns: 1fr; }
}

/* Homepage section kicker (small caps-orange label above the heading) */
.front-page__eyebrow {
	text-align: center;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin: 0 0 var(--spacing-xs);
}
.hp-tools .front-page__eyebrow { color: var(--dfv-orange-light); }

.slider__kicker {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfv-orange);
	margin-bottom: 0;
}

.btn__arrow { transition: transform var(--transition); }
.hp-tool:hover .btn__arrow { transform: translateX(3px); }

/* deep-shadow image system: fade retired */
.fe-hero__scrim { display: none; }

/* pull the hero photo a little closer to its title */
.page-article__title:has(+ .fe-hero) { margin-bottom: var(--spacing-md); }


/* === Homepage social wall: FB box matched to IG height via JS (social-wall matcher) === */
.social__platforms { align-items: flex-start; }

/* Instagram: full grid + keep the 'Mehr laden' button */
.social__platform--ig #sb_instagram { padding-bottom: 0 !important; }

/* Facebook: height is set by JS (= Instagram box height); posts scroll inside with a visible scrollbar */
.social__platform--fb .cff-wrapper { overflow: hidden; }   /* JS sets height here */
.social__platform--fb .cff-wrapper-ctn,
.social__platform--fb #cff { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.social__platform--fb .cff-visual-header { flex: 0 0 auto; }
.social__platform--fb .cff-posts-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; padding: 0 16px !important; }

/* Post meta (reactions + share): sit tidily and wrap instead of clipping off the edge */
.social__platform--fb .cff-meta-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; overflow: visible; }
.social__platform--fb .cff-post-links,
.social__platform--fb .cff-view-comments-wrap { float: none !important; margin: 0 !important; max-width: 100%; }

/* At 768 and below the columns stack, so let FB be natural height (the JS
   matcher clears it there; from 769px up it sets a pixel height). */
@media (max-width: 768px) {
	.social__platform--fb .cff-wrapper { height: auto !important; }
}


/* Testing: no headers, no grey/card background on either feed */
.social__platform--ig .sb_instagram_header,
.social__platform--fb .cff-visual-header { display: none !important; }
.social__platform--ig #sb_instagram { background: transparent !important; padding: 0 !important; }
.social__platform--fb .cff-wrapper,
.social__platform--fb #cff { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }

/* Round the Facebook post photos to match the Instagram tiles */
.social__platform--fb .cff-photo,
.social__platform--fb .cff-photos,
.social__platform--fb .cff-media-wrap,
.social__platform--fb .cff-photo img,
.social__platform--fb .cff-multi-image,
.social__platform--fb .cff-author-avatar img,
.social__platform--fb .cff-feed-image { border-radius: var(--radius); }
.social__platform--fb .cff-photo,
.social__platform--fb .cff-media-wrap { overflow: hidden; }

/* Tighter spacing in FB posts to use the space better */
.social__platform--fb .cff-item { padding-top: 14px !important; padding-bottom: 14px !important; }
.social__platform--fb .cff-media-wrap { margin-bottom: 10px !important; }
.social__platform--fb .cff-post-text { margin: 0 0 8px !important; line-height: 1.45 !important; }
.social__platform--fb .cff-date { margin: 0 0 6px !important; }
.social__platform--fb .cff-meta-wrap { margin-top: 8px !important; }

/* Date + 'Auf Facebook anzeigen / Teilen' share links on ONE line; reactions below */
.social__platform--fb .cff-date { float: left !important; margin: 0 !important; }
.social__platform--fb .cff-meta-wrap { display: block !important; margin-top: 0 !important; overflow: visible !important; }
.social__platform--fb .cff-meta-wrap::after { content: ""; display: block; clear: both; }
.social__platform--fb .cff-post-links { float: right !important; margin: 0 !important; text-align: right; max-width: 72%; }
.social__platform--fb .cff-view-comments-wrap { clear: both !important; float: none !important; display: block !important; margin: 10px 0 0 !important; }

/* Remove Smash Balloon's faint 1px photo outline so FB pics match the borderless site cards */
.social__platform--fb .cff-photo:after { border: none !important; content: none !important; }

/* Align the date and the share links on the same baseline (equal line-height) */
.social__platform--fb .cff-date { float: left !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 24px !important; }
.social__platform--fb .cff-post-links { float: right !important; margin: 0 !important; padding: 0 !important; line-height: 24px !important; }
.social__platform--fb .cff-post-links,
.social__platform--fb .cff-post-links a,
.social__platform--fb .cff-post-links span { font-size: 13px !important; line-height: 24px !important; vertical-align: baseline; }

/* --- FINAL FB meta row (date + links on one line, reactions below) --- */
.social__platform--fb .cff-date,
.social__platform--fb .cff-post-links { float: none !important; }
.social__platform--fb .cff-meta-wrap {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	overflow: visible !important;
	margin-top: 8px !important;
}
.social__platform--fb .cff-meta-wrap > .cff-date {
	order: 1; margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: #666 !important; max-width: none !important;
}
.social__platform--fb .cff-meta-wrap > .cff-post-links {
	order: 2; margin: 0 0 0 auto !important; text-align: right; font-size: 13px !important; line-height: 1.5 !important; white-space: nowrap; max-width: none !important;
}
.social__platform--fb .cff-meta-wrap > .cff-view-comments-wrap {
	order: 3; flex: 0 0 100% !important; clear: both !important; margin: 10px 0 0 !important;
}

/* Card shadow on FB photos to match the Instagram tiles */
.social__platform--fb .cff-media-wrap,
.social__platform--fb .cff-photos { overflow: visible !important; }
.social__platform--fb .cff-photo {
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--card-shadow);
	display: block;
}

/* --- FB post footer: date + share links on ONE line, reactions below (CSS-only via display:contents) --- */
.social__platform--fb .cff-item {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
}
.social__platform--fb .cff-item > .cff-media-wrap,
.social__platform--fb .cff-item > .cff-post-text { flex: 0 0 100% !important; }
.social__platform--fb .cff-item > .cff-media-wrap { order: 1; }
.social__platform--fb .cff-item > .cff-post-text { order: 2; }
.social__platform--fb .cff-item > .cff-date {
	order: 3; flex: 0 0 auto !important; margin: 8px 0 0 !important; float: none !important;
	font-size: 13px !important; line-height: 1.5 !important; color: #666 !important;
}
/* dissolve the meta wrapper so its children join the item's flex row */
.social__platform--fb .cff-item > .cff-meta-wrap { display: contents !important; }
.social__platform--fb .cff-meta-wrap > .cff-post-links {
	order: 4; float: none !important; margin: 8px 0 0 auto !important; text-align: right;
	font-size: 13px !important; line-height: 1.5 !important; white-space: nowrap;
}
.social__platform--fb .cff-meta-wrap > .cff-view-comments-wrap {
	order: 5; flex: 0 0 100% !important; float: none !important; margin: 10px 0 0 !important;
}
.social__platform--fb .cff-item > .cff-comments-box { order: 9; flex: 0 0 100% !important; }

/* Shrink the FB meta line so date + share links fit on ONE line in the narrow column */
.social__platform--fb .cff-item > .cff-date,
.social__platform--fb .cff-meta-wrap > .cff-post-links,
.social__platform--fb .cff-meta-wrap > .cff-post-links a,
.social__platform--fb .cff-meta-wrap > .cff-post-links span { font-size: 12px !important; }
.social__platform--fb .cff-meta-wrap > .cff-post-links .cff-dot { margin: 0 3px !important; }
.social__platform--fb .cff-meta-wrap > .cff-post-links { margin-left: auto !important; }

/* ===== DEFINITIVE FB post-footer layout (overrides all earlier attempts) ===== */
.social__platform--fb .cff-meta-wrap { display: contents !important; }
.social__platform--fb .cff-meta-wrap::after { content: none !important; display: none !important; }
.social__platform--fb .cff-item > .cff-date {
	order: 3 !important; flex: 0 0 auto !important; width: auto !important;
	margin: 8px 8px 0 0 !important; padding: 0 !important; float: none !important;
	font-size: 12px !important; line-height: 1.5 !important; color: #666 !important; white-space: nowrap;
}
.social__platform--fb .cff-meta-wrap > .cff-post-links {
	order: 4 !important; flex: 1 1 auto !important; min-width: 0 !important;
	margin: 8px 0 0 0 !important; padding: 0 !important; float: none !important;
	text-align: right !important; white-space: normal !important;
	font-size: 12px !important; line-height: 1.5 !important;
}
.social__platform--fb .cff-meta-wrap > .cff-view-comments-wrap {
	order: 5 !important; flex: 0 0 100% !important; float: none !important; margin: 10px 0 0 !important;
}

/* Tighten the gap between 'Auf Facebook anzeigen' and 'Teilen' */
.social__platform--fb .cff-post-links .cff-share-container { margin-left: 0 !important; padding-left: 0 !important; }
.social__platform--fb .cff-post-links .cff-dot { margin: 0 4px !important; padding: 0 !important; }
.social__platform--fb .cff-post-links .cff-viewpost-facebook { margin-right: 0 !important; padding-right: 0 !important; }

/* Fix Smash Balloon read-more: keep the ellipsis inline + show it only when collapsed */
.social__platform--fb .cff-expand[style] { display: inline !important; font-size: 0 !important; }
.social__platform--fb .cff-expand[style] a { font-size: 12px !important; }
.social__platform--fb .cff-expand[style] .cff-more::before { content: "\2026 "; font-size: 12px; }

/* FiF landing: give the partner note room to breathe below the trip cards */
.fe-partner-note {
	font-size: 0.85rem;
	color: var(--dfv-text-light);
	line-height: 1.55;
	max-width: 66ch;
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--dfv-border);
}
.fe-partner-note strong { color: var(--dfv-heading); }

/* Weiterfuehrende Links (Schuldnerberatung): the link reads as a title with a
   muted description underneath, instead of "link – description" on one line. */
.page-article__content .wf-links { list-style: none; padding-left: 0; margin: 0; }
.page-article__content .wf-links li { margin: 0 0 var(--spacing-md); padding-left: 0; }
.page-article__content .wf-links li:last-child { margin-bottom: 0; }
.page-article__content .wf-links li::before { content: none; }
.wf-links a { font-weight: 600; }
.wf-links .wf-desc { display: block; font-size: 0.9rem; color: var(--dfv-text-light); margin-top: 2px; line-height: 1.4; }

/* Topline on small screens: icons only; the search input expands on demand
   (small script under the form in header.php). */
@media (max-width: 640px) {
	.site-topline__label {
		display: none;
	}
	.site-topline__link svg {
		width: 18px;
		height: 18px;
	}
	.site-topline .topline-search__input {
		width: 0;
		padding: 0;
		border: none;
	}
	.site-topline .topline-search.is-open .topline-search__input {
		width: 150px;
		padding: 0 0.6rem;
	}
	/* collapsed = a free-standing round button, not a cut-off bar end */
	.site-topline .topline-search:not(.is-open) .topline-search__submit {
		border-radius: var(--radius);
	}
}

/* ==========================================================================
   EXPERIMENT-SLATE-HEADER (Evie, 2 Aug): slate nav bar matching the footer.
   Delete this whole block to restore the light header.
   ========================================================================== */
.site-header {
	background-color: var(--dfv-slate);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 4px 16px -8px rgba(0, 0, 0, 0.35);
}
.site-header__logo-text {
	color: rgba(255, 255, 255, 0.85);
}
.site-header__logo-name {
	color: #fff;
}
.site-header__logo-sub {
	color: rgba(255, 255, 255, 0.65);
}
.site-nav__list li a {
	color: rgba(255, 255, 255, 0.85);
}
.site-nav__list li a:hover {
	color: #fff;
}
.site-nav__list > li > a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--dfv-orange-light);
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}
.site-nav__list li.current-menu-item > a:not(:hover),
.site-nav__list li.current-page-ancestor > a:not(:hover) {
	color: #fff;
	text-decoration: none;
}
/* dropdowns turn slate too */
.site-nav__list .sub-menu {
	background: var(--dfv-slate);
	border-color: rgba(255, 255, 255, 0.14);
}
.site-nav__list .sub-menu a:hover {
	background-color: rgba(255, 255, 255, 0.07);
}
/* burger icon + mobile slide-down panel */
.site-header__menu-toggle .hamburger,
.site-header__menu-toggle .hamburger::before,
.site-header__menu-toggle .hamburger::after {
	background-color: #fff;
}
@media (max-width: 1024px) {
	.site-nav {
		background: var(--dfv-slate);
	}
}
/* topline joins the dark header: deeper slate strip, muted light text */
.site-topline {
	background: #272E3C;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-topline__link {
	color: rgba(255, 255, 255, 0.72);
}
.site-topline__link:hover {
	color: #fff;
}
.site-topline .topline-search__input {
	border-color: transparent;
	border-radius: var(--radius) 0 0 var(--radius);
}
/* EXPERIMENT-SLATE-HEADER: mark without the white canvas (generated logo-mark-dark.png) */
.site-header__logo-mark {
	content: url(../images/logo-mark-dark.png?v=2);
}

/* EXPERIMENT-SLATE-HEADER: primary items full white, chevrons orange */
.site-nav__list > li > a {
	color: #fff;
}
.site-nav__list .menu-item-has-children > a::after {
	color: var(--dfv-orange-light);
	border-right-color: var(--dfv-orange-light);
	border-bottom-color: var(--dfv-orange-light);
	border-right-width: 2px;
	border-bottom-width: 2px;
	opacity: 1;
}

/* ==========================================================================
   RESPONSIVE AUDIT FIXES (Aug 2026)
   Appended AFTER the slate-header experiment block on purpose: deleting that
   experiment must not take these fixes with it.
   ========================================================================== */

/* .map-embed is aspect-ratio 16/9 + overflow:hidden, but the consent
   placeholder inside it does not shrink. At 320px the box is 153px tall while
   the placeholder needs 246px, and because the placeholder is vertically
   centred the overflow is clipped at BOTH ends: the map-pin icon disappears off
   the top and the Datenschutz sentence is sliced mid-line, taking the link to
   the Datenschutzerklaerung with it. Measured clipping runs 320-389px.
   Only the UNLOADED state is freed from the aspect ratio, so the real map
   (which gets .map-embed--loaded before the iframe is inserted, see
   assets/js/navigation.js) keeps its 16/9 box exactly as now. */
@media (max-width: 400px) {
	.map-embed:not(.map-embed--loaded) {
		aspect-ratio: auto;
	}
	.map-embed:not(.map-embed--loaded) .map-embed__placeholder {
		position: static;
		padding: var(--spacing-md);
	}
}

/* --------------------------------------------------------------------------
   SIDEBAR + BURGER NAV on touch (Aug 2026)
   -------------------------------------------------------------------------- */

/* The sub-menu toggle button is injected by navigation.js at every width, so it
   must be explicitly hidden on desktop: left visible it widened each nav item by
   4px and shifted the whole nav 12px left. Desktop keeps its hover dropdowns. */
.site-nav__sub-toggle {
	display: none;
}

/* Same for the section-sidebar accordion trigger: it is in the markup, so
   without this it renders on desktop and adds 26px to the sidebar. Desktop
   shows the child-page list open and unwrapped, exactly as before. */
.page-sidebar__toggle {
	display: none;
}

@media (max-width: 1024px) {

	/* The desktop hover rule (main.css ~539) sits OUTSIDE any media query, and
	   :hover sticks after a tap on touch screens. Result: the JS removes
	   .is-open, the chevron rotates shut, and the sub-menu stays on screen.
	   Neutralised here; .is-open carries an extra class so it still wins. */
	.site-nav__list li:hover > .sub-menu,
	.site-nav__list li:focus-within > .sub-menu {
		display: none;
	}
	.site-nav__list li > .sub-menu.is-open {
		display: block;
	}

	/* Parent items are real pages. The link navigates, the button expands. */
	.site-nav__list .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.site-nav__list .menu-item-has-children > a {
		flex: 1 1 auto;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.site-nav__list .menu-item-has-children > a::after {
		content: none;
	}
	.site-nav__list .menu-item-has-children > .sub-menu {
		flex: 0 0 100%;
	}
	.site-nav__sub-toggle {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		color: inherit;
	}
	.site-nav__sub-toggle::before {
		content: '';
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -0.25em;
		transition: transform var(--transition);
	}
	.menu-item-has-children.is-open > .site-nav__sub-toggle::before {
		transform: rotate(225deg);
		margin-top: 0.15em;
	}
	.site-nav__list .sub-menu a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Section sidebar: let the two halves sit either side of the article, so the
	   page opens with its own H1 instead of the Koordination box. */
	.page-content--with-sidebar .page-sidebar {
		display: contents;
	}
	.page-content--with-sidebar .page-sidebar__nav {
		order: -1;
		margin-bottom: var(--spacing-md);
	}
	.page-content--with-sidebar .ansprechpartner {
		order: 1;
		/* the layout's own 24px column gap already separates this from the
		   article, so a further 40px on top read as a hole after the map */
		margin-top: var(--spacing-xs);
	}

	/* Child-page list becomes an accordion, closed by default. Open, it is a
	   plain vertical list rather than the ragged wrapped chip row. */
	.page-sidebar__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 44px;
		padding: var(--spacing-xs) 0;
		background: none;
		border: 0;
		border-bottom: 1px solid var(--dfv-border);
		font: inherit;
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--dfv-text);
		cursor: pointer;
	}
	.page-sidebar__toggle::after {
		content: '';
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -0.25em;
		transition: transform var(--transition);
	}
	.page-sidebar__nav.is-open .page-sidebar__toggle::after {
		transform: rotate(225deg);
		margin-top: 0.15em;
	}
	.page-sidebar__nav .page-sidebar__list {
		display: none;
	}
	.page-sidebar__nav.is-open .page-sidebar__list {
		display: block;
		border-bottom: 1px solid var(--dfv-border);
		padding-bottom: var(--spacing-xs);
	}
	.page-sidebar__nav .page-sidebar__item a {
		min-height: 44px;
		display: flex;
		align-items: center;
		border-radius: 0;
	}
}

/* --------------------------------------------------------------------------
   VERTICAL RHYTHM above the H1, on touch (Aug 2026)
   At 375px there were 266px between the header and the page title, holding
   nothing but a breadcrumb and a collapsed accordion. The largest single
   contributor was .page-content__layout's 4rem flex GAP: it is a column gutter
   on desktop, but the layout turns to a column below 1025px, so it was being
   spent as vertical space. Desktop keeps the 4rem gutter untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.page-content {
		padding-top: var(--spacing-md);
	}

	.breadcrumb {
		padding: var(--spacing-xs) 0;
		margin-bottom: var(--spacing-md);
	}

	.page-content__layout {
		gap: var(--spacing-md);
	}

	/* The layout gap already separates the accordion from the article. */
	.page-content--with-sidebar .page-sidebar__nav {
		margin-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   INTRO TEXT + BOTTOM RHYTHM on touch (Aug 2026)
   -------------------------------------------------------------------------- */

/* Lead paragraphs are 1.15rem (18.4px) in four separate places with no mobile
   step-down, so on a 327px column they read almost like a heading. Stepped to
   1.05rem (16.8px): still visibly a lead against 16px body, no longer towering.
   Scoped to portrait phones; in landscape and on tablets the column is wide
   enough that 1.15rem is right. */
@media (max-width: 600px) {
	.lead,
	.page-article__content > p:first-child,
	.fb-landing__intro,
	.fe-ov__intro {
		font-size: 1.05rem;
	}
}

/* The run-out to the footer was 193px on a phone: 6rem of .page-content
   padding-bottom plus 4rem of .faq-banner margin-top, both sized for desktop. */
@media (max-width: 1024px) {
	.page-content {
		padding-bottom: var(--spacing-lg);
	}

	.faq-banner {
		margin-top: var(--spacing-md);
	}

	.site-footer {
		margin-top: var(--spacing-lg);
	}
}

/* --------------------------------------------------------------------------
   REMAINING LEADS + HOMEPAGE CAROUSEL on touch (Aug 2026)
   -------------------------------------------------------------------------- */

/* The 1.15rem lead is declared in SEVEN places. The first pass caught four.
   `p.lead` (main.css:181) is (0,1,1) and outranks a bare `.lead` rule, so it was
   only being stepped down where ".page-article__content > p:first-child"
   happened to match it as well. Named explicitly here so it no longer depends
   on where the paragraph sits. Measured at 375px before this: .mitglied__lead
   and .fe-lead were both still 18.4px. */
@media (max-width: 600px) {
	p.lead,
	.fe-lead,
	.mitglied__lead,
	.single-stellenausschreibung .post-single__content > p:first-of-type {
		font-size: 1.05rem;
	}
}

/* .slider__media carries `margin: 40px 0` for the desktop two-column layout and
   never resets it when the slider stacks, so there is 40px of dead space above
   AND below the photo on every phone. Body padding also stays desktop-sized. */
@media (max-width: 768px) {
	.slider__media {
		margin: 0;
	}
}

@media (max-width: 600px) {
	.slider__body {
		padding: var(--spacing-sm);
		gap: 0.7rem;
	}

	.slider__nav {
		margin-top: var(--spacing-sm);
	}
}

/* --------------------------------------------------------------------------
   TWO-TIER TYPE SCALE on phones (Aug 2026)
   Desktop keeps three sizes; on a phone the 16px/15.2px split was drift rather
   than a decision (article prose landed on 16, while .step__text,
   .quick-link__text and the carousel text landed on 15.2 -- all of them body
   copy). A 5% step is not a hierarchy anyone can see, so phones get two tiers:
   lead 16.8px, everything else 15.2px.

   Set on `body`, deliberately NOT on --font-size-base: inputs, textareas and
   selects (main.css:863-874) read that same variable, and taking them under
   16px is the one case where iOS Safari really does zoom the page on focus.
   Anything with an explicit rem size is unaffected; this only catches text that
   inherits.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	body {
		font-size: 0.95rem;
	}
}

/* --------------------------------------------------------------------------
   BATCH 1 (Aug 2026): long-word safety net, tap targets, offer cards
   -------------------------------------------------------------------------- */

/* A. The most repeated bug in the whole audit: an unbreakable token (a long
   e-mail, a bare URL, a German compound) sizes its container wider than the
   screen and the whole PAGE scrolls sideways. Found independently on trip
   pages, in the ZR summary, on the ZR confirmation screen, in card titles and
   in callouts. This is the class fix rather than five point fixes.
   `break-word`, NOT `anywhere`, on purpose: it wraps the word without taking
   part in min-content sizing, so it cannot resize any grid or flex track. The
   few places that genuinely need a track to shrink get `anywhere` plus
   `min-width:0` individually. */
@media (max-width: 1024px) {
	body {
		overflow-wrap: break-word;
	}
}

/* B. Tap targets. The existing fixes were scoped <=640 or <=768, so every iPad
   kept the small targets; these run to 1024. Topline, breadcrumb and the footer
   bottom link use a pseudo-element hit area so no layout moves. */
@media (max-width: 1024px) {
	.site-topline__link,
	.topline-search__submit {
		position: relative;
	}
	.site-topline__link::before,
	.topline-search__submit::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100% + 12px);
		height: 44px;
	}

	.breadcrumb a {
		display: inline-block;
		padding: 0.7rem 0;
		margin: -0.7rem 0;
	}

	.site-footer__social a {
		width: 44px;
		height: 44px;
	}

	.site-footer__menu a {
		display: inline-block;
		padding: 0.6rem 0;
	}

	.site-footer__bottom p a {
		display: inline-block;
		padding: 0.7rem 0;
		margin: -0.7rem 0;
	}

	.map-embed__load {
		min-height: 44px;
	}

	.slider__prev,
	.slider__next {
		width: 44px;
		height: 44px;
	}
	.slider__dots {
		gap: 0;
	}
	.slider__dot {
		width: 44px;
		height: 44px;
		padding: 17px;
		background-color: #cfc9c2;
		background-clip: content-box;
	}
	/* main.css:1104 and 1109 use the `background` shorthand, which resets
	   background-clip to border-box, so it has to be restated on both states. */
	.slider__dot.is-active {
		background-color: var(--dfv-orange);
		background-clip: content-box;
	}
	.slider__dot:hover {
		background-color: #b3aca4;
		background-clip: content-box;
	}
}

/* C. Aktuelle Angebote offer cards (round-1 finding H2). The <=620px rule sets
   a single column but leaves .offer__flyer at `grid-column:2; grid-row:1` and
   .offer__body at `grid-column:1; grid-row:1`. The flyer therefore creates an
   IMPLICIT second column sized to itself and the 1fr text column is squeezed:
   measured 0px wide on the first card at 320px, 168px on the others. Returning
   both children to auto placement stacks them in DOM order (flyer, then body),
   so the visual order matches the tab order. */
@media (max-width: 620px) {
	.offer__flyer {
		grid-column: 1;
		grid-row: auto;
		justify-self: center;
	}
	.offer__body {
		grid-column: 1;
		grid-row: auto;
	}
}

/* --------------------------------------------------------------------------
   MITGLIED nested min-content chain (Aug 2026)
   The only page-level sideways scroll left after the batch-1 safety net.
   .mitglied-cols is `1fr`, .mitglied-col adds 2rem of padding each side, and
   .mitglied-step / .mitglied-reasons li are themselves `36px 1fr` / `32px 1fr`
   grids. Every one of those `1fr` tracks takes its automatic minimum from
   min-content, so one long German word propagates all the way out:
   36 + 16 gap + ~190px word + 64px padding = 306px inside a 272px container.
   `overflow-wrap: break-word` cannot help here by design (it does not take part
   in min-content sizing), so the tracks need explicit permission to shrink.
   The icons keep their explicit 32/36px widths, so min-width:0 cannot squash
   them. Measured at 320px: page scrollWidth 330 -> 320.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.mitglied-cols > *,
	.mitglied-reasons li,
	.mitglied-reasons li > *,
	.mitglied-step,
	.mitglied-step > * {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   doc-link tap height (Aug 2026)
   Download links measured 46px before the phone type scale dropped body text to
   0.95rem; the smaller line box took them to 43px, one pixel under the 44px
   minimum. They are the primary action on the Downloads and Schuldnerberatung
   pages, so they get an explicit floor rather than relying on line-height.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* .doc-link and .fif-doc are inline, so min-height is inert on them, and
	   they carry a border-bottom underline that vertical padding would drag
	   away from the text. A pseudo-element hit area gives the 44px target
	   without moving anything on screen. */
	.doc-link,
	.fif-doc {
		position: relative;
	}
	.doc-link::after,
	.fif-doc::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 44px;
		transform: translateY(-50%);
	}
}

/* --------------------------------------------------------------------------
   offer meta: drop the rules on phones (Aug 2026)
   On desktop the dt/dd pairs are a two-column table and the horizontal rules
   earn their place. Below 620px the row becomes a block, so the caps-orange
   label already marks where each row starts and the rule is doing the same job
   a second time. Each row was carrying 0.5rem of padding above and below BOTH
   the label and the value, two 1px borders, and a 0.5rem row margin: about
   42px of chrome per row, five rows per card.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
	.offer__meta dt {
		padding: 0 0 0.1rem;
		border-bottom: none;
	}

	.offer__meta dd {
		padding: 0;
		border-bottom: none;
	}

	.offer__row {
		margin-bottom: 0.8rem;
	}

	.offer__row:last-child {
		margin-bottom: 0;
	}

	/* Keep ONE rule, under the whole list, so the description below does not
	   read as another table row. Same 1px --dfv-border grey as the rules that
	   were removed from between the rows. */
	.offer__meta {
		padding-bottom: 0.8rem;
		border-bottom: 1px solid var(--dfv-border);
	}
}

/* --------------------------------------------------------------------------
   BATCH 3 (Aug 2026): burger panel in landscape, CTA, Schritt cards, FE cards
   -------------------------------------------------------------------------- */

/* 1. The last HIGH. .site-nav has `max-height: 80vh`, but the panel does not
   start at the top of the viewport: it is position:absolute; top:100% inside
   the sticky header, which itself sits below the 37px topline. Measured at
   667x375 (phone landscape): panel top y=129, 80vh = 300px, so its bottom lands
   at y=429 against a 375px viewport. The last 54px is permanently off-screen
   and "Kurberatung" cannot be reached at all, because the panel scrolls
   internally and its own scrollbar is below the fold too.
   `100%` here resolves against the containing block, i.e. the header's height,
   and 40px covers the topline strip. */
@media (max-width: 1024px) {
	.site-nav {
		max-height: calc(100dvh - 100% - 40px);
		overscroll-behavior: contain;
	}
}

/* 2. Landscape phones only. The header is a permanent 88px band (24px padding
   around a 40px logo) and with the 36px topline that is 124px of a 375px-tall
   viewport, a third of the screen, before any content. Note the header's height
   is driven by the two-line logo TEXT, not the mark, so the text has to come
   down as well or nothing changes. */
@media (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
	.site-header__inner {
		padding-top: var(--spacing-xs);
		padding-bottom: var(--spacing-xs);
	}
	.site-header__logo-mark { height: 32px; }
	.site-header__logo-name { font-size: 1rem; }
	.site-header__logo-sub { font-size: 0.72rem; }
}

/* 3. Card padding on phones. These panels keep desktop padding on a 327px
   column, which is why the Schritt copy reads as a narrow tower. Measured on
   the Gruppe page at 375px: .steps--card is padding 2rem 2.25rem, so a 52px
   icon plus a 24px gap leaves the text 179px. At 1.25rem/1rem it gets 219px. */
@media (max-width: 600px) {
	.steps--card,
	.fb-bereiche,
	.sb-callout {
		padding: 1.25rem 1rem;
	}

	.fe-ov__offer,
	.fe-ov__offer--accent {
		padding: var(--spacing-md);
	}
}

/* 5. 320-359px only: below this the icon rows genuinely cannot share a line.
   .steps--card content box is 200px there, and a 52px icon plus a 24px gap
   leaves 124px, narrower than the longest word in the copy. */
@media (max-width: 359px) {
	.step {
		flex-direction: column;
		gap: var(--spacing-xs);
	}

	.fb-bereich,
	.fe-block,
	.fe-ov__offer {
		grid-template-columns: 1fr;
		gap: var(--spacing-xs);
	}
}

/* --------------------------------------------------------------------------
   BATCH 4 (Aug 2026): CTA icon, burger row split, Schritt width
   -------------------------------------------------------------------------- */

/* 2. Burger menu hit areas, reversed. Previously the link filled the row and
   the chevron button was a 44px square at the end, so almost anywhere you
   tapped navigated away and only a small square opened the sub-menu. Now the
   link is only as wide as its own label and the toggle takes the rest of the
   row: tap the word to go to the section, tap anywhere else to open it. The
   chevron stays visually at the right edge. */
@media (max-width: 1024px) {
	.site-nav__list .menu-item-has-children > a {
		flex: 0 1 auto;
	}

	.site-nav__sub-toggle {
		flex: 1 1 auto;
		width: auto;
		min-height: 44px;
		justify-content: flex-end;
		padding-right: var(--spacing-sm);
	}
}

/* 3. Schritt rows were 12px narrower than the Familienbildung blocks for no
   deliberate reason: a 52px icon and a 24px gap against 48px and 16px there.
   Measured at 375px: .step__body 219px vs .fb-bereich__body 231px. Matching the
   two brings them to the same width rather than inventing a third number. */
@media (max-width: 600px) {
	.step {
		gap: var(--spacing-sm);
	}

	.step__icon {
		width: 48px;
		height: 48px;
	}
}

/* --------------------------------------------------------------------------
   BATCH 5 (Aug 2026): the Zuschussrechner CTA on the Familienerholung landing
   It is built as one of the .fe-ov__offer cards, so it inherits their
   icon-beside-text grid, but it is a call to action rather than a list entry.
   On phones it now matches the .fb-cta treatment: icon centred above the text,
   full-width button. Scoped to --accent so the ordinary offer cards in the same
   list keep their compact icon-beside-text row.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   CTA layout reverted to icon-beside-text (Aug 2026, Evie's call)
   The stacked version was measured and worked, but read worse. The squash it
   solved is real though, so it is solved here a different way: the CTA button
   keeps its label on one line by trimming its own side padding rather than by
   taking the whole card width.
   At 375px .fb-cta__body is 215px and "Zum Zuschussrechner" plus 1.5rem of
   padding each side needed about 213px, i.e. it wrapped on a rounding error.
   1rem of padding brings it to roughly 181px, with real room to spare.
   Below 360px there is no way to keep the icon beside the text (the body drops
   to 198px, and .steps--card content is only 124px wide), so the stack is
   retained there only, with the icon centred so it looks deliberate.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.fb-cta .btn,
	.fe-ov__offer--accent .fe-ov__btn {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* The two Zuschussrechner CTAs were built as separate components and had
   drifted apart: .fb-cta uses the site-wide .btn (0.95rem / 600) while
   .fe-ov__btn was bespoke (0.9rem / 700). Aligned to the site button here, so
   there is one button spec rather than two near-identical ones. Kept as its own
   selector rather than reusing .btn, because the markup is a span inside a card
   link and changing that is a template change, not a style one. */
.fe-ov__btn {
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.7rem 1.4rem;
}

/* CTA on phones: icon above, everything centred.
   With the icon beside the text, a 48px icon next to a five-line paragraph
   leaves a 48px-wide empty column running the full height of the text, and the
   text column itself is only 200px at 360. Stacking removes the gutter and
   returns the whole card width to the copy. Centred throughout (icon, heading,
   text, button) so it reads as a deliberate card CTA rather than a centred icon
   floating over left-aligned text. */
@media (max-width: 600px) {
	.fb-cta,
	.fe-ov__offer--accent {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
		justify-items: center;
		text-align: center;
	}

	/* Every selector here must be scoped to the CTA. .fe-ov__body, __title and
	   __text are shared with the ordinary offer cards in the same list, which
	   stay left-aligned with the icon beside the text. */
	.fb-cta__body,
	.fb-cta__text,
	.fe-ov__offer--accent .fe-ov__body {
		text-align: center;
	}

	/* .fe-ov__title is a flex row (title + arrow), so it needs centring too. */
	.fe-ov__offer--accent .fe-ov__title {
		justify-content: center;
	}

	/* the 58ch cap is a desktop line-length guard; it would off-centre the copy */
	.fb-cta__text p,
	.fe-ov__offer--accent .fe-ov__text {
		max-width: none;
	}
}

@media (max-width: 359px) {
	.fb-cta,
	.fe-ov__offer--accent {
		padding: 1.25rem 1rem;
	}
}

/* Facebook feed on phones (stacked band). The matcher script in front-page.php
   returns early at 768px and below; from 769px up the JS equalises the FB box
   to the Instagram grid exactly like on desktop (both boundaries moved from
   900 in Aug 2026, when the 801-900 band went 2-column). main.css:3578 sets
   `max-height: none`, and unchecked the feed renders 3 posts at ~564px each,
   so the social wall ran to 4657px at 375px. This is the 560px scroll cap for
   the stacked band. */
@media (max-width: 768px) {
	/* Paired with the Instagram grid, which is 2 columns x 3 rows = 563px at
	   375px, so the two feeds read as a matched pair the way they do on desktop
	   rather than one being three times the other. */
	.social__platform--fb .cff-posts-wrap {
		max-height: 560px;
		overflow-y: auto;
	}


}

/* --------------------------------------------------------------------------
   Facebook: cff-photo forced square (Aug 2026)
   The plugin's own stylesheet sets `.cff-photo { aspect-ratio: 1 / 1 }`, which
   suits its grid layouts but not the single-column "regular" post style we use.
   Measured at 375px: the box renders 295x295 while the landscape photo inside
   it renders 295x165, leaving 130px of empty white inside the card. That is the
   "half photo, half card" effect, and it is present at every width, not just on
   phones; on desktop it was simply hidden inside the scroll cap.
   Letting the box hug its image removes the gap without cropping anything.
   -------------------------------------------------------------------------- */
.social__platform--fb .cff-photos,
.social__platform--fb .cff-photos > *,
.social__platform--fb .cff-photo,
.social__platform--fb .cff-single-photo,
.social__platform--fb .cff-lightbox-link {
	aspect-ratio: auto;
}

/* .cff-photo is position:relative and the lightbox anchor inside it is
   position:absolute, so if the anchor is the only thing giving the box height
   the box collapses. The image is a static child and supplies the height, but
   pin the anchor to the image box explicitly so the click target always matches
   what is on screen. */
.social__platform--fb .cff-photo > .cff-lightbox-link {
	position: absolute;
	inset: 0;
	height: auto;
}

/* --------------------------------------------------------------------------
   HOMEPAGE RHYTHM + social follow buttons on phones (Aug 2026, audit L9)
   .front-page__section carries 6rem of padding top AND bottom, so there is
   192px of empty space between every pair of homepage sections at 375px, and
   96px below the follow buttons before the section ends. The two buttons are
   also 24px apart, which reads as two separate things rather than a pair.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.front-page__section {
		padding: var(--spacing-lg) 0;
	}

	.social__actions {
		gap: 0.75rem;
		margin-top: var(--spacing-lg);
	}
}

/* --------------------------------------------------------------------------
   SEARCH / ARCHIVE / POST TITLES: unbreakable words (Aug 2026)
   .search__title had no CSS rules at all and renders raw user input, so a
   single long query token widened the whole document: at 1025px the page
   measured scrollWidth 2073 against a 1025px viewport (1048px of sideways
   scroll) and 2203 against 1440. Below 1025 the body-level safety net further
   up already caught it, so desktop was the only gap - and these three are the
   only headings on the site fed by text nobody on the team controls.
   overflow-wrap:break-word acts only on a word that would otherwise overflow
   its own line, and takes no part in min-content sizing, so it cannot move a
   title that fits today. Verified: every other page/width is byte-identical.
   -------------------------------------------------------------------------- */
.search__title,
.archive__title,
.post-single__title {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   FLYER LIGHTBOX on landscape phones (Aug 2026)
   The caption was unreachable, not just ugly: .lightbox is position:fixed with
   no scroll, so anything past the fold could not be got at by any means.
   Measured cause at 667x375 - .lightbox padding clamp(1rem,4vw,3rem) resolves
   to 26.7px a side, leaving 321.6px of content height, while .lightbox__img
   max-height:84vh takes 315px of it on its own. It budgets nothing for the
   16px figure gap or the 24.3px caption, so 315 + 16 + 24.3 = 355.3 has to go
   into 321.6 and the caption lands at y382 in a 375px viewport. At 390 and 430
   the image ends up taller than its own figure (327.6 vs 322.5).
   Fix: shrink the chrome, then give the image a max-height that actually
   reserves the gap and TWO caption lines, so a longer flyer title still fits
   without scrolling. overflow-y is the backstop for a third line; the close
   button goes position:fixed so it cannot scroll away with the content.
   Portrait phones, tablets and desktop are outside the query and unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (max-height: 500px) {
	.lightbox {
		padding: 0.5rem;
		gap: 0.5rem;
		overflow-y: auto;
		/* `safe` keeps the top reachable if the content ever does overflow;
		   if a browser rejects it the declaration is dropped and the
		   align-items:center further up still applies. */
		align-items: safe center;
	}

	.lightbox__figure {
		gap: 0.35rem;
	}

	/* 0.5rem padding x2 + 0.35rem figure gap + two caption lines (~2.9rem)
	   rounds to 4.5rem of reserve. At 375px tall that is a 303px image with
	   26px still spare, which is one more caption line. */
	.lightbox__img {
		max-height: calc(100dvh - 4.5rem);
	}

	.lightbox__close {
		position: fixed;
		top: 0.35rem;
		right: 0.35rem;
	}
}

/* --------------------------------------------------------------------------
   PAGINATION tap targets + 404 on phones (Aug 2026)
   search.php, archive.php, index.php and home.php were outside the audit, so
   the tap-target pass never reached them. Measured: .pagination .nav-links a
   is 32.9x40.3 at 320-375 and 33.3x41.6 at 768-1024 - under 44px on every
   touch width, and on a search results page it is the ONLY way to reach page
   two. These are inline-BLOCK pills, not inline links, so min-height applies
   normally and no pseudo-element hit area is needed here; the row is meant to
   read as a row of buttons, so growing it is the correct look as well.
   The bottom margin is for the case where 44px pills wrap to a second line.

   404: .page-404 h1 is a flat 2.5rem (40px) at every width, so it ignores the
   phone type scale entirely - every other h1 on the site is 25.6px at <=768.
   Its 6rem top padding is desktop spacing too. Desktop keeps both.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.pagination .nav-links a,
	.pagination .nav-links span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: 0 0.15rem 0.3rem;
	}
}

@media (max-width: 768px) {
	.page-404 {
		padding-top: var(--spacing-lg);
	}

	.page-404 h1 {
		font-size: 1.6rem;
	}
}

/* --------------------------------------------------------------------------
   TOPLINE on touch: iOS focus zoom + hit areas (Aug 2026)
   Measured on every page: the search input computes to 13.6px at 375, 667,
   768, 1024 AND 1025, and iOS Safari zooms the whole page when a focused
   field is under 16px. The utility links are 18x18 icon squares at <=640 and
   129.3x15 labels above that, so they are the smallest targets on the site.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* font-size ONLY. The collapsed-search rule further up sets width, padding
	   and border to 0 at <=640; any box property here would outrank it and
	   leave a permanent 16px stub sitting in the bar. */
	.site-topline .topline-search__input {
		font-size: 16px;
	}

	/* Grow the HIT AREA, not the box: an absolutely positioned ::after adds no
	   layout, so the topline stays exactly 37px tall. 36px is the honest
	   ceiling for height here - the bar itself is 36px, and reaching a true
	   44px would mean permanent extra chrome at every width <=1024, which
	   would undo part of the landscape-header work. */
	.site-topline__link {
		position: relative;
	}

	.site-topline__link::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: max(calc(100% + 1rem), 44px);
		height: 36px;
	}

	.site-topline .topline-search__submit {
		width: 44px;
	}
}

/* --------------------------------------------------------------------------
   NO-RESULTS search form (Aug 2026)
   WordPress wraps the field in a <label> in its html5 search form, so the
   label - not the input - is the flex item. Without this the form collapses
   to the input's intrinsic ~200px instead of filling its 500px max-width.
   Only reachable from the two no-results states.
   -------------------------------------------------------------------------- */
.search-form label {
	flex: 1;
	min-width: 0;
}

/* The rule further up that makes <button> inherit Work Sans is scoped to the
   <button> element, so it never reached this input[type="submit"]: the button
   kept the browser's 13.3px system font right next to a 16px field. */
.search-form .search-submit {
	font-family: var(--font-main);
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   PAGINATION on one line (Aug 2026, Evie)
   With words, "Nächste" wrapped to a second line on a phone. The 44px pills
   added earlier are inline-block, so they were spaced with margins and their
   wrapping was governed by inline layout. A flex row with a real gap keeps
   them on one line for as long as they fit and centres them properly when
   they do not. Measured with 6 items (arrows + 4 pages): one line from 360px
   up (264px of pills + 28px of gaps against a 312px column); at 320 the
   column is 272px so it still wraps, but to two centred rows rather than a
   ragged one. Desktop keeps its inline-block layout untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.35rem;
	}

	/* child combinator: the pills only, never the spans inside them */
	.pagination .nav-links > a,
	.pagination .nav-links > span {
		margin: 0;
	}
}

/* `.pagination .nav-links span` - both the original pill rule and the 44px tap
   rule - is a DESCENDANT selector, so the two spans inside each prev/next link
   (the screen-reader wording and the arrow glyph) were picking up the pill's
   own padding, margin and 44px minimum a second time. Measured: the arrow
   pills came out 68x60 on a phone against 44x44 for the numbers, and 68x49.6
   on desktop against ~33x41 before the arrows existed. They are content, not
   pills, so reset them. Kept as a plain rule rather than folded into the
   media query because the double padding applied at every width. */
.pagination .nav-links a span:not(.screen-reader-text) {
	display: inline;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.pagination__arrow {
	font-size: 1.1em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   FiF landing: Koordination box before the internal-area note (Evie, 3 Aug)
   The note is a pointer for freelance staff; the Koordination contact is what
   a visiting family wants. On a phone the note was landing between the article
   and the contact box, so the page ended on the staff-only line.
   `display: contents` dissolves .page-content__main so the article and the note
   become flex children of .page-content__layout alongside the sidebar's two
   halves (the sidebar is already display:contents here). Only then can order
   move the note past the box. Scoped to this one page by its body slug class,
   and to <= 1024 where the layout is a single column anyway.
   margin-top drops to 0 because the flex column gap now supplies the space the
   note's own 4rem used to; its border-top and padding still separate it.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	body.page-slug-familien-in-fahrt .page-content__main {
		display: contents;
	}

	body.page-slug-familien-in-fahrt .fe-partner-note {
		/* nav is -1, article 0, .ansprechpartner 1, so 2 puts this last */
		order: 2;
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   FOOTER link rhythm on touch (Evie, 3 Aug)
   The 44px tap target was bought with padding on the link itself, which is the
   pattern this project already learned not to use: it inflates the row. Each
   item became 44.3px tall and the row pitch 49.9px, against 30.7px on desktop,
   so the footer lists read as a stack of separate things rather than a list.
   Trading target height for rhythm: pitch 49.9 -> ~31.5px, which matches the
   desktop rhythm of 30.7px, so the footer reads the same at every width. The
   li margin goes to 0 so the hit areas stay flush rather than overlapping
   (targets taller than the pitch would steal each other's taps). The links
   still get a ~31px hit area instead of the bare 18px text height, which is
   comfortably above the WCAG 2.2 AA target minimum of 24px.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.site-footer__menu li {
		margin-bottom: 0;
	}

	.site-footer__menu a {
		padding: 0.2rem 0;
	}
}

/* Below 360px, keep all six pills on one row. At 320 the column is 272px and
   six 44px pills with 5.6px gaps need 292px, so the row split 5 + 1 and left
   the NEXT arrow - the most used control here - stranded on its own line.
   40px targets at this one width are still far above the WCAG 2.2 AA minimum
   of 24px: 6 x 40 + 5 x 4 = 260px, which fits with room to spare. */
@media (max-width: 359px) {
	.pagination .nav-links {
		gap: 0.25rem;
	}

	.pagination .nav-links > a,
	.pagination .nav-links > span {
		min-width: 40px;
	}
}

/* FOOTER: gap before the bottom divider (Evie, 3 Aug)
   Once the footer stacks to one column, the last Service link sat 64px above
   the rule: the grid's own 40px row gap plus another 24px of margin on the
   bottom bar. The row gap already separates the stacked blocks, so the extra
   margin was doing the job twice. 64px -> 40px. */
@media (max-width: 768px) {
	.site-footer__bottom {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   iPad mini portrait (768) sat on the wrong side of the breakpoint (Evie, 4 Aug)
   `max-width: 768px` INCLUDES 768, so iPad mini portrait got the phone layout
   while iPad Air (820), iPad Pro 11 (834) and iPad Pro 12.9 (1024) all got the
   wide one. Measured at 768: the slider stacked into a single 720px column and
   the three quick-link cards fell 2 + 1 across two rows, with one card stranded
   on its own. At 820 the very same page was already two-up and three-across.
   Restoring the wide layout from 700 up: at 768 that gives the slider two 360px
   columns and quick-link cards of 213px, against 386px and 231px at 820, so it
   is the same design a size down rather than a different one. Below 700 the
   stacked phone layout is untouched, and nothing at 769+ changes.
   -------------------------------------------------------------------------- */
@media (min-width: 740px) and (max-width: 768px) {
	.slider__slide {
		grid-template-columns: 1fr 1fr;
		min-height: 440px;
	}

	.slider__media {
		grid-column: 1;
		grid-row: auto;
		min-height: 0;
		margin: 40px 0;
	}

	.slider__body {
		grid-column: 2;
		grid-row: auto;
		padding: var(--spacing-xl) var(--spacing-lg);
	}

	.quick-links {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Long German compounds in a 213px card. Three-across at 768 leaves each card
   165px of text column, and "Schuldnerberatung" at 20px needs about 170px, so
   the title broke mid-word: "Schuldnerberatu / ng". Dropping the title to
   1.05rem fits it on one line, and hyphens:auto is the safety net for any
   future service name that is longer still - <html lang="de"> is set, so it
   hyphenates at syllables rather than chopping anywhere. */
@media (min-width: 740px) and (max-width: 833px) {
	/* upper bound measured: the title needs ~185px of column, which the cards
	   only reach at 834px of viewport. iPad Air (820) is inside this band. */
	.quick-link__title {
		font-size: 1.05rem;
		overflow-wrap: normal;
		hyphens: auto;
	}

	.quick-link__text {
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.quick-link__more {
		font-size: 0.82rem;
	}
}

/* Instagram: 9 tiles in 2 columns leaves a half-empty last row. The plugin
   cannot do a per-tablet post count - it emits data-nummobile but no
   data-numtablet, and nummobile only takes effect below 480px - so the count
   has to be trimmed here. Measured: 481-800 is the exact band that renders 2
   columns; 480 and below already show 6 via nummobile, and 801 and up show 9
   in 3 columns, both of which fill their last row. Six leaves 3 clean rows.
   NOTE: this lives in the theme deliberately, so it travels with the files
   rather than being another feed setting that has to be redone on live. */
@media (min-width: 481px) and (max-width: 800px) {
	#sb_instagram #sbi_images .sbi_item:nth-child(n + 7) {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   BATCH 2 (Aug 2026): iPad band 801-900 Instagram grid
   The wall is side by side from 769, but the IG column is only ~370-470px
   wide up to 900, so the plugin's 3-column desktop grid gave ~116-143px
   tiles (Evie: too small on the iPad Air). Force the same 2x3 treatment the
   481-800 band already uses; the JS matcher equalises the FB column to it.
   -------------------------------------------------------------------------- */
@media (min-width: 801px) and (max-width: 900px) {
	#sb_instagram #sbi_images { grid-template-columns: repeat(2, 1fr) !important; }
	#sb_instagram #sbi_images .sbi_item:nth-child(n + 7) { display: none !important; }
}

/* --------------------------------------------------------------------------
   BATCH 2/2c (Aug 2026): tablet Koordination placement (Evie)
   A 60/40 CTA+Koordination grid pairing was built here, then REJECTED by
   Evie on eyeball (9 Aug): at iPad widths the narrow box beside the CTA
   read as wasted space however it was aligned. Final design: the CTA stays
   a full-width band and the Koordination box stacks beneath it, centred
   (BATCH 2b below), with a hairline divider when it follows plain content
   instead of the CTA (BATCH 2c at the end of the file). The fb-cta remains
   a direct child of .page-content__main in the templates; that move is
   desktop-neutral (harness-proven) and keeps the tablet source order sane.
   -------------------------------------------------------------------------- */

/* BATCH 2 (Aug 2026): trip-notice trim on the narrowest phones. 24px padding
   plus the 48px icon gutter left a 196-200px text column at 320. */
@media (max-width: 360px) {
	.notice { padding: 16px; }
	.notice--warning { padding-left: 40px; }
	.notice--warning::before { left: 10px; top: 17px; }
}

/* BATCH 2 (Aug 2026): Karriere job cards. 40px side padding left a 192px text
   column at 320. */
@media (max-width: 400px) {
	.job-card { padding-left: 24px; padding-right: 24px; }
}

/* BATCH 2 (Aug 2026): trip detail H1 mid-band step. The generic phone scale
   (h1 1.6rem at <=768) left a 25.6px title over a 553-720px column, then the
   769 boundary jumped it to 42.9px. One step in between. */
@media (min-width: 601px) and (max-width: 768px) {
	.gr-detail__title,
	.fahrt-detail h1 { font-size: 2rem; }
}

/* BATCH 2 (Aug 2026): flyer lightbox arrows on portrait iPads. With a tall
   viewport the 84vh height cap stops constraining, the image takes the full
   min(88vw, 720px), and the 48px arrows overflow both screen edges by 1-13px
   at 800/820/834. Reserve arrow room instead. */
@media (min-width: 769px) and (max-width: 859px) {
	.lightbox__img { max-width: calc(100vw - 132px); }
}

/* BATCH 2 (Aug 2026): breadcrumb-to-photo gap on trip pages (Evie's loose
   end: ~47px read as too airy). The breadcrumb's own bottom spacing goes,
   and the heroes take a single 1.5rem top margin instead (set in the two
   plugin stylesheets), so the gap is 24px on both trip page types. */
.single-dfv_fahrt .breadcrumb,
.single-dfv_gruppenreise .breadcrumb { margin-bottom: 0; padding-bottom: 0; }

/* BATCH 2b (Aug 2026, Evie's eyeball pass): wherever the Koordination box
   ends up stacked on its own below 1025 (pages without a CTA at any width,
   CTA pages below 641), centre it instead of hugging the left edge. On the
   paired pages the box fills its grid column, so auto margins are inert. */
@media (max-width: 1024px) {
	.page-content--with-sidebar .ansprechpartner { margin-left: auto; margin-right: auto; }
}

/* BATCH 2c (Aug 2026, tuned same day): a hairline above the stacked
   Koordination box wherever it appears below 1025 - after plain content AND
   after the CTA band (Evie wanted the break in both cases) - with extra air
   on both sides (flex gap 24 + margins = ~40px each side). The pseudo is a
   flex item: order 0 sorts it after the main column and before the box
   (order 1). Only on pages that have a box at all. */
@media (max-width: 1024px) {
	.page-content--with-sidebar .page-content__layout:has(.ansprechpartner)::after {
		content: "";
		order: 0;
		width: 100%;
		border-top: 1px solid var(--dfv-border);
		margin-top: 16px;
		margin-bottom: 8px;
	}
}

/* BATCH 2c (cont., Evie): the FiF partner note centres like the Koordination
   box above it once everything is one stacked column; its border-top hairline
   centres with it (auto cross margins shrink the block to its text). */
@media (max-width: 1024px) {
	body.page-slug-familien-in-fahrt .fe-partner-note {
		margin-left: auto;
		margin-right: auto;
		margin-top: var(--spacing-md); /* + the 24px flex gap = 48px above the hairline */
		text-align: center;
	}
}

/* BATCH 2d (Aug 2026): phone scroll-trap mitigation (Evie, iPhone). At the
   560px cap the FB box could end flush with a post, reading like the end of
   the page. 480px guarantees a post is cut mid-way at the box edge, which
   reads as "this box scrolls" and shows the page carrying on below. */
@media (max-width: 480px) {
	.social__platform--fb .cff-posts-wrap { max-height: 480px; }
}

/* iOS ghost-layer fix (Aug 2026): on real iPhones the compositor kept a
   stale painted layer of the outgoing slide's text on screen although the
   DOM/CSS had hidden it (verified: current CSS on device, atomic visibility
   swap active, two texts still visible). Explicit layer promotion makes
   WebKit create and CLEAR one layer per slide. Geometry-neutral. */
.slider__slide {
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: opacity;
}

/* ==========================================================================
   YouTube click-to-load ([dfv_youtube]) + Aktuelles single-post column
   ========================================================================== */

.yt-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--dfv-bg-alt, #F3F2EF);
	border-radius: var(--radius);
	overflow: hidden;
	margin: 1.5rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yt-embed__inner {
	text-align: center;
	padding: 1.5rem;
	max-width: 34rem;
}

.yt-embed__icon { color: var(--dfv-orange, #CC4400); margin-bottom: 0.75rem; }
.yt-embed__title { color: var(--dfv-heading, #2A2520); font-weight: 600; margin: 0 0 1rem; }
.yt-embed__notice { font-size: 0.8rem; color: var(--dfv-text-light, #5C5450); margin: 0.9rem 0 0; }
.yt-embed__notice a { color: var(--dfv-orange, #CC4400); }

.yt-embed--loaded { display: block; }
.yt-embed__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Aktuelles single posts: readable column + capped hero image. */
.post-single { max-width: 760px; margin: 0 auto; }
.post-single__image img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Anchor targets scrolled to from in-page CTAs (e.g. Finanzbarometer ->
   Beratungsstellen) must clear the sticky header. */
#beratungsstellen {
	scroll-margin-top: 110px;
}