/*
 * IFB custom styles
 * Design source: IFB_Website-Desktop_Layout_2026.pdf (project root)
 * Colors and fonts are taken from the PDF (see content/design-tokens.txt).
 */

/* Self-hosted fonts (no Google requests, nDSG/GDPR-friendly).
   Tinos is metric-compatible with Times New Roman, which the design uses. */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/roboto-latin-300-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Tinos";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/tinos-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Tinos";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/tinos-latin-400-italic.woff2") format("woff2");
}

:root {
	--ifb-red: #c32945;
	--ifb-grey-dark: #666b6d;   /* footer */
	--ifb-grey-light: #eff1f2;  /* light section backgrounds */
	--ifb-heading: #3b3b3b;
	--ifb-text: #42464b;
	--ifb-ui-text: #3a3a3a;     /* navigation, link labels */
	--ifb-white: #ffffff;

	--ifb-font-heading: "Tinos", "Times New Roman", Times, serif;
	--ifb-font-body: "Roboto", Arial, sans-serif;

	/* Arrow of the "––> Mehr erfahren" links (Links/Arrow.svg), coloured with currentColor. */
	--ifb-arrow: url("../img/arrow.svg") center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------------
 * Base typography (sizes = PDF x 0.75, see content/design-tokens.txt).
 * Divi module settings/presets override these where set.
 * ------------------------------------------------------------------ */
body {
	font-family: var(--ifb-font-body);
	font-weight: 300;
	color: var(--ifb-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header {
	font-family: var(--ifb-font-heading);
	font-weight: 400;
	color: var(--ifb-heading);
	line-height: 1.15;
	letter-spacing: 0;
}

h1 { font-size: 48px; letter-spacing: 0.03em; } /* final design: H1 tracked +0.03em */
h2 { font-size: 38px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }

strong, b {
	font-weight: 400;
}

@media (max-width: 980px) {
	h1 { font-size: 40px; }
	h2 { font-size: 32px; }
	h3 { font-size: 24px; }
}

@media (max-width: 767px) {
	h1 { font-size: 32px; }
	h2 { font-size: 27px; }
	h3 { font-size: 22px; }
}

/* ------------------------------------------------------------------
 * Utility classes - add via Divi: Advanced > CSS ID & Classes.
 * ------------------------------------------------------------------ */

/* Small uppercase serif label above section titles ("UNSERE DIENSTLEISTUNGEN"). */
.ifb-eyebrow,
.ifb-eyebrow p {
	font-family: var(--ifb-font-heading);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ifb-text);
}

/* Large white italic serif text on red (intro box, CTA box). */
.ifb-redbox .ifb-redbox-inner p {
	letter-spacing: 0.025em; /* final design tracking */
}

@media (max-width: 767px) {
	.ifb-redbox .ifb-redbox-inner .et_pb_text p {
		font-size: 22px !important;
		line-height: 1.25 !important;
	}

	/* Mobile design: red boxes 340px wide (25px gutter). */
	.ifb-redbox .ifb-redbox-inner.et_pb_row {
		width: calc(100% - 50px) !important;
	}
}

.ifb-italic-statement,
.ifb-italic-statement p {
	font-family: var(--ifb-font-heading);
	font-style: italic;
	font-size: 30px;
	line-height: 1.3;
	color: var(--ifb-white);
}

.ifb-italic-statement--large,
.ifb-italic-statement--large p {
	font-size: 38px;
}

/* Everything inside a red or dark grey section turns white. */
.ifb-on-dark,
.ifb-on-dark h1, .ifb-on-dark h2, .ifb-on-dark h3, .ifb-on-dark h4,
.ifb-on-dark p, .ifb-on-dark li, .ifb-on-dark a {
	color: var(--ifb-white);
}

/* Quote next to the portrait (red Roboto Light with a line on top). */
.ifb-quote,
.ifb-quote p {
	font-size: 18.7px;
	line-height: 1.4;
	color: var(--ifb-red);
}

@media (max-width: 767px) {
	.ifb-quote,
	.ifb-quote p {
		font-size: 13.7px;
	}
}

.ifb-quote {
	max-width: 430px; /* final design: quote column ~420px */
	border-top: 1px solid var(--ifb-red);
	padding-top: 20px;
}

/* Bulleted lists in the design use a small dot and tight spacing. */
.ifb-list ul {
	list-style: none;
	padding-left: 0;
}

.ifb-list ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 6px;
}

.ifb-list ul li::before {
	content: "•";
	position: absolute;
	left: 0;
}

@media (max-width: 767px) {
	.ifb-italic-statement,
	.ifb-italic-statement p { font-size: 24px; }

	.ifb-italic-statement--large,
	.ifb-italic-statement--large p { font-size: 28px; }
}

/* "––> Mehr erfahren" style text link with a leading arrow (final design, Oct 2026).
   Add the CSS class "ifb-line-link" to a Divi Button or Text link. */
.ifb-line-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ifb-text);
	text-decoration: none;
}

.ifb-line-link::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 10px;
	background: currentColor;
	-webkit-mask: var(--ifb-arrow);
	mask: var(--ifb-arrow);
	transition: transform 0.2s ease;
}

.ifb-line-link:hover::before {
	transform: translateX(6px);
}

/* Divi Button with the preset "IFB Linien-Link": the preset removes the box,
   this adds the leading line (presets cannot add pseudo elements). */
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ifb-button-line-link {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px;
}

body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ifb-button-line-link::before {
	content: "" !important;
	display: inline-block !important;
	position: static !important;
	width: 40px;
	height: 10px;
	margin: 0 !important;
	opacity: 1 !important;
	background: currentColor;
	-webkit-mask: var(--ifb-arrow);
	mask: var(--ifb-arrow);
	/* Divi centres its button icon with translateY(-50%); the arrow is centred by flexbox,
	   so reset it - otherwise it sits 5px high until the hover transform replaces it. */
	transform: none !important;
	transition: transform 0.2s ease;
}

body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ifb-button-line-link:hover::before {
	transform: translateX(6px) !important;
}

/* Divi adds 1em side padding on hover for its button icon; the line link has none. */
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ifb-button-line-link,
body #page-container .et_pb_section .et_pb_button.preset--module--divi-button--ifb-button-line-link:hover {
	padding: 0 !important;
}

body #page-container .ifb-on-dark .et_pb_button.preset--module--divi-button--ifb-button-line-link {
	color: var(--ifb-white) !important;
}

/* Same look for a Divi Button module with the class "ifb-line-link":
   strip Divi's default button box so only line + label remain. */
.et_pb_button.ifb-line-link,
.ifb-line-link .et_pb_button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	font-family: var(--ifb-font-body);
	font-size: 18.7px !important;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ifb-ui-text, #3a3a3a);
}

.et_pb_button.ifb-line-link::after,
.ifb-line-link .et_pb_button::after {
	display: none !important;
}

.ifb-line-link .et_pb_button::before {
	content: "";
	display: inline-block;
	position: static;
	width: 40px;
	height: 10px;
	margin: 0;
	opacity: 1;
	background: currentColor;
	-webkit-mask: var(--ifb-arrow);
	mask: var(--ifb-arrow);
	transform: none !important; /* see the preset rule above: Divi's translateY(-50%) */
	transition: transform 0.2s ease;
}

.ifb-line-link .et_pb_button:hover::before {
	transform: translateX(6px) !important;
}

.ifb-on-dark .ifb-line-link,
.ifb-on-dark .ifb-line-link .et_pb_button {
	color: var(--ifb-white);
}

/* ------------------------------------------------------------------
 * Header (Theme Builder global header, layouts/header.html)
 * ------------------------------------------------------------------ */

/* Menu sits on the right, next to pcvisit + phone (logo stays left). */
.ifb-header .et_pb_menu .et_pb_menu_inner_container {
	width: 100%;
}

.ifb-header .et_pb_menu .et_pb_menu__wrap {
	flex: 1 1 auto;
	justify-content: flex-end;
}

.ifb-header .et_pb_menu .et-menu > li {
	padding-left: 12px;
	padding-right: 12px;
}

/* "Leistungen +" instead of Divi's dropdown arrow. */
.ifb-header .et_pb_menu .et-menu .menu-item-has-children > a:first-child {
	padding-right: 16px;
}

.ifb-header .et_pb_menu .et-menu .menu-item-has-children > a:first-child::after {
	content: "+";
	font-family: var(--ifb-font-body);
	font-size: inherit;
	font-weight: 400;
	top: 0;
	right: 0;
}

/* Dropdown: white panel, red top line (set in the menu module), comfortable width. */
.ifb-header .et_pb_menu .nav li ul {
	width: 360px;
	padding: 12px 0;
}

.ifb-header .et_pb_menu .nav li li {
	width: 100%;
	padding: 0;
}

.ifb-header .et_pb_menu .nav li li a {
	width: 100%;
	padding: 8px 20px;
	font-size: 16px;
	line-height: 1.4;
}

.ifb-header .et_pb_menu .nav li li a:hover {
	color: var(--ifb-red) !important;
	opacity: 1;
}

.ifb-header-actions .et_pb_image {
	margin-bottom: 0 !important;
}

.ifb-header-actions a {
	transition: opacity 0.2s ease;
}

.ifb-header-actions a:hover {
	opacity: 0.8;
}

/* Active page: red + underlined (final design). Posts and the blog archive mark
   "Aktuelles" (current_page_parent), service pages mark "Leistungen" (ancestor). */
.ifb-header .et_pb_menu .et-menu > li.current-menu-item > a,
.ifb-header .et_pb_menu .et-menu > li.current-menu-ancestor > a,
.ifb-header .et_pb_menu .et-menu > li.current_page_parent > a {
	color: var(--ifb-red) !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}

/* Header: solid, no animations. Divi gives menu links "transition: all 0.4s" and fades
   the dropdown; while a page loads, its late styles then visibly fade the menu in. */
header.et-l--header *,
header.et-l--header *::before,
header.et-l--header *::after {
	transition: none !important;
	animation: none !important;
}

/* Desktop: fixed header that shrinks while scrolling (ifb.js toggles html.ifb-scrolled;
   back at the top it returns to full size). The page keeps the header's height as
   top padding (--ifb-header-h, measured by ifb.js), so nothing jumps. */
@media (min-width: 981px) {
	header.et-l--header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9990;
		background: var(--ifb-white);
	}

	.admin-bar header.et-l--header {
		top: 32px; /* WordPress toolbar for logged-in users */
	}

	#page-container {
		padding-top: var(--ifb-header-h, 148px) !important;
	}

	html {
		scroll-padding-top: 90px; /* anchors and the skip link land below the small header */
	}

	html.ifb-scrolled header.et-l--header {
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}

	/* Scrolled: the logo stays anchored at the top edge and gets smaller (136 -> 88px);
	   menu, pcvisit and phone keep their position (centre 68px from the top), so they
	   move down by half the height the logo loses: (136 - 88) / 2 = 24px. */
	html.ifb-scrolled .ifb-header .et_pb_menu__logo img {
		max-height: 88px !important;
	}

	html.ifb-scrolled .ifb-header .et_pb_menu__wrap,
	html.ifb-scrolled .ifb-header .ifb-header-actions {
		transform: translateY(24px);
	}

	/* The menu links are as tall as the logo row and moved down 24px: lift the dropdown by
	   the same amount so it hangs from the smaller header, like it does at full size. */
	html.ifb-scrolled .ifb-header .et-menu > li > .sub-menu {
		margin-top: -24px;
	}

	html.ifb-scrolled .ifb-header-pcvisit,
	html.ifb-scrolled .ifb-header-pcvisit img {
		width: 76px !important;
	}

	html.ifb-scrolled .ifb-header-phone,
	html.ifb-scrolled .ifb-header-phone img {
		width: 62px !important;
	}

	/* Smooth shrink/grow - only once the page has loaded (ifb.js adds .ifb-header-ready),
	   so nothing animates while a page is being built. These selectors are more specific
	   than the "no transitions in the header" rule above. */
	html.ifb-header-ready header.et-l--header,
	html.ifb-header-ready header.et-l--header .ifb-header .et_pb_menu__logo img,
	html.ifb-header-ready header.et-l--header .ifb-header .et_pb_menu__wrap,
	html.ifb-header-ready header.et-l--header .ifb-header .ifb-header-actions,
	html.ifb-header-ready header.et-l--header .ifb-header .ifb-header-pcvisit,
	html.ifb-header-ready header.et-l--header .ifb-header .ifb-header-pcvisit img,
	html.ifb-header-ready header.et-l--header .ifb-header .ifb-header-phone,
	html.ifb-header-ready header.et-l--header .ifb-header .ifb-header-phone img {
		transition: max-height 0.3s ease, width 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
	}
}

/* ------------------------------------------------------------------
 * Mobile header + menu (final mobile design: logo + thin hamburger,
 * full-screen white menu, centred items, partner badges at the bottom).
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {
	.ifb-header .et_pb_menu .et_pb_menu__wrap,
	.ifb-header-actions {
		justify-content: flex-end;
	}

	/* Thin 3-line hamburger / X instead of Divi's icon font. */
	.ifb-header .mobile_nav .mobile_menu_bar {
		display: block;
		width: 44px;
		height: 44px;
	}

	.ifb-header .mobile_nav .mobile_menu_bar::before {
		content: "" !important;
		position: absolute;
		inset: 0;
		background: var(--ifb-ui-text);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M10 14.5h24M10 22h24M10 29.5h24' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M10 14.5h24M10 22h24M10 29.5h24' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
	}

	.ifb-header .mobile_nav.opened .mobile_menu_bar::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M13 13l18 18M31 13L13 31' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M13 13l18 18M31 13L13 31' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
	}

	/* The menu covers the screen below the header (top is set by ifb.js). */
	.ifb-header .et_pb_menu .et_mobile_menu {
		position: fixed;
		top: var(--ifb-mobile-menu-top, 96px);
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		margin: 0;
		padding: 40px 0 0 !important;
		overflow-y: auto;
		border: 0;
		box-shadow: none;
		background: var(--ifb-white) !important;
		text-align: center;
		z-index: 9999;
	}

	.ifb-header .mobile_nav.opened .et_mobile_menu {
		display: flex !important;
		flex-direction: column;
	}

	.ifb-header .et_mobile_menu li {
		padding: 0;
		text-align: center;
	}

	.ifb-header .et_mobile_menu li a {
		display: inline-block;
		width: auto;
		padding: 8px 20px !important;
		border: 0 !important;
		background: none !important;
		font-family: var(--ifb-font-body);
		font-size: 24px !important;
		font-weight: 500 !important;
		line-height: 1.25 !important;
		color: var(--ifb-ui-text) !important;
	}

	.ifb-header .et_mobile_menu li li a {
		padding: 6px 20px !important;
		font-size: 20px !important;
		font-weight: 300 !important;
	}

	.ifb-header .et_mobile_menu li.current-menu-item > a,
	.ifb-header .et_mobile_menu li.current_page_parent > a {
		color: var(--ifb-red) !important;
	}

	/* "Leistungen +" opens / "Leistungen –" closes the services (ifb.js). */
	.ifb-header .et_mobile_menu .menu-item-has-children > a::after {
		content: " +";
	}

	.ifb-header .et_mobile_menu .menu-item-has-children.ifb-sub-open > a::after {
		content: " \2013";
	}

	.ifb-header .et_mobile_menu .menu-item-has-children > .sub-menu {
		display: none !important;
		padding: 0 0 8px !important;
	}

	.ifb-header .et_mobile_menu .menu-item-has-children.ifb-sub-open > .sub-menu {
		display: block !important;
	}

	/* Partner badges at the bottom of the open menu (cloned from the footer by ifb.js). */
	.ifb-header .et_mobile_menu .ifb-mobile-badges {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		margin-top: auto;
		padding: 26px 34px 24px;
		background: var(--ifb-grey-dark);
		text-align: left;
	}

	.ifb-mobile-badges p {
		margin: 0 0 10px;
		padding: 0;
		font-family: var(--ifb-font-heading);
		font-size: 14px;
		color: var(--ifb-white);
	}

	.ifb-mobile-badges .ifb-badge-treuhand {
		width: 155px;
		height: auto;
	}

	.ifb-mobile-badges .ifb-badge-bexio {
		width: 52px;
		height: auto;
	}

	html.ifb-menu-open,
	html.ifb-menu-open body {
		overflow: hidden;
	}
}

@media (max-width: 767px) {
	/* Final mobile design: only logo + hamburger in the header (phone is in the footer). */
	.ifb-header-actions {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
 * Footer (Theme Builder global footer, layouts/footer.html)
 * One row, 7 blocks placed by CSS grid: 4 columns on desktop, the
 * 2-column order of the mobile design on phones.
 * ------------------------------------------------------------------ */
.ifb-footer a {
	color: var(--ifb-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.ifb-footer a:hover {
	opacity: 0.8;
}

.ifb-footer .et_pb_image a {
	text-decoration: none;
}

.ifb-footer .et_pb_module {
	margin-bottom: 0 !important;
}

.ifb-footer .ifb-footer-grid.et_pb_row {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas:
		"adresse kontakt zeiten  partner"
		"linkedin legal  .       partner"
		"copy     copy   copy    copy";
	column-gap: 30px;
	row-gap: 34px;
}

.ifb-footer .ifb-footer-grid > .et_pb_column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	row-gap: 14px;
}

.ifb-f-adresse  { grid-area: adresse; }
.ifb-f-kontakt  { grid-area: kontakt; }
.ifb-f-zeiten   { grid-area: zeiten; }
.ifb-f-partner  { grid-area: partner; }
.ifb-f-linkedin { grid-area: linkedin; }
.ifb-f-legal    { grid-area: legal; }
.ifb-f-copy     { grid-area: copy; }

.ifb-footer .ifb-f-linkedin,
.ifb-footer .ifb-f-legal {
	justify-content: flex-end;
}

.ifb-footer .ifb-f-partner .ifb-footer-bexio {
	margin-top: 12px;
}

.ifb-footer .ifb-footer-linkedin {
	display: inline-flex;
	color: var(--ifb-white);
	text-decoration: none;
}

.ifb-footer .ifb-footer-linkedin svg {
	display: block; /* no inline baseline gap: tile lines up with "Impressum | Datenschutz" */
}

/* Tablet + phone: 2-column order of the mobile design (4 columns are too narrow for the logos). */
@media (max-width: 980px) {
	.ifb-footer .ifb-footer-grid.et_pb_row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"adresse  zeiten"
			"kontakt  linkedin"
			"partner  partner"
			"legal    legal"
			"copy     copy";
		column-gap: 20px;
		row-gap: 28px;
	}

	.ifb-footer .ifb-f-linkedin {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.ifb-footer .ifb-footer-grid.et_pb_row {
		width: 100% !important;
		padding-left: 11% !important;
		padding-right: 4% !important;
	}

	/* Mobile design: 14px footer text, so "IFB Finanzberatungs AG" fits one line. */
	.ifb-footer .ifb-footer-grid p {
		font-size: 14px !important;
	}

	.ifb-footer .ifb-f-partner .ifb-footer-treuhand,
	.ifb-footer .ifb-f-partner .ifb-footer-treuhand img {
		width: 155px !important;
	}

	.ifb-footer .ifb-f-partner .ifb-footer-bexio,
	.ifb-footer .ifb-f-partner .ifb-footer-bexio img {
		width: 52px !important;
	}
}

/* ------------------------------------------------------------------
 * Phase 3 components (Divi Library "IFB ...", layouts/library/)
 * ------------------------------------------------------------------ */

/* Hero (final design): text on the 1020px content grid, the image runs further
   right and ends 55px before the window edge; image 542 x 497. */
.ifb-hero .ifb-hero-image img {
	width: 100%;
	aspect-ratio: 542 / 497;
	object-fit: cover;
}

@media (min-width: 768px) {
	.ifb-hero .ifb-hero-row.et_pb_row {
		align-self: stretch !important; /* Divi centres rows: auto width would shrink to the content */
		width: auto !important;
		max-width: none !important;
		margin-left: max(5%, calc((100% - 1020px) / 2)) !important;
		margin-right: max(4%, calc((100% - 1020px) / 2 - 160px)) !important;
	}
}

@media (min-width: 981px) {
	/* Design: H1 column 560px (line breaks as designed), text block sits ~100px below the image top. */
	.ifb-hero .ifb-hero-row > .et_pb_column:first-child {
		padding-top: 100px;
	}

	.ifb-hero h1 {
		max-width: 560px;
	}
}

/* Mobile design: image below the text, centred, 298 x 243. */
@media (max-width: 767px) {
	.ifb-hero .ifb-hero-row {
		row-gap: 44px !important;
	}

	.ifb-hero .ifb-hero-image {
		width: min(298px, 82%) !important;
		margin: 0 auto !important;
	}

	.ifb-hero .ifb-hero-image img {
		aspect-ratio: 298 / 243;
	}

	.ifb-hero .ifb-hero-badge,
	.ifb-hero .ifb-hero-badge img {
		width: 47px !important;
	}

	/* Service list (grey, with illustration): 22px title, 13.7px text. */
	.ifb-service-list h2 {
		font-size: 22px !important;
	}

	.ifb-service-list .et_pb_text p,
	.ifb-service-list .et_pb_text li {
		font-size: 13.7px !important;
		line-height: 1.4 !important;
	}
}

/* Red split: image column fills the full height of the red panel. */
.ifb-split .ifb-split-image {
	position: relative;
	min-height: 480px;
}

.ifb-split .ifb-split-img,
.ifb-split .ifb-split-img .et_pb_image_wrap {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
}

.ifb-split .ifb-split-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 980px) {
	.ifb-split .ifb-split-image {
		min-height: 340px;
	}
}

@media (max-width: 767px) {
	/* Mobile design: only the red panel, no image. */
	.ifb-split .ifb-split-image {
		display: none !important;
	}

	.ifb-split .et_pb_column:last-child {
		padding: 50px 11% 48px !important;
	}

	.ifb-split .ifb-list ul,
	.ifb-split .ifb-list li {
		line-height: 1.4 !important;
	}
}

.ifb-on-dark .ifb-list ul li::before {
	color: var(--ifb-white);
}

/* Service cards: "Mehr erfahren" always sits at the bottom of the card. */
.ifb-card .et_pb_button_module_wrapper {
	margin-top: auto;
	padding-top: 8px;
}

.ifb-card .et_pb_button {
	line-height: 1.4 !important;
}

/* Divi puts 60px between rows; the design has only the head row's 40px above the cards. */
.et_pb_section:has(.ifb-cards) {
	row-gap: 0 !important;
}
.ifb-cards h3 {
	word-break: break-word;
}

.ifb-card .et_pb_module {
	margin-bottom: 0 !important;
}

/* Mobile design: 13.7px card text and link. */
@media (max-width: 767px) {
	.ifb-card .ifb-card-text p,
	body #page-container .et_pb_section .ifb-card .et_pb_button.et_pb_button {
		font-size: 13.7px !important;
	}

	/* Touch target >= 24px (WCAG 2.5.8) without changing the look. */
	body #page-container .et_pb_section .ifb-card .et_pb_button.et_pb_button {
		padding-top: 3px !important;
		padding-bottom: 3px !important;
	}
}

/* Mobile design: the service cards scroll sideways (about 1.8 cards visible)
   instead of stacking - the row runs to the right edge of the screen. */
@media (max-width: 767px) {
	.ifb-cards.et_pb_row {
		display: flex !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		max-width: none !important;
		padding-left: 6% !important;
		padding-right: 6% !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 6%;
		scrollbar-width: none;
	}

	.ifb-cards.et_pb_row::-webkit-scrollbar {
		display: none;
	}

	.ifb-cards > .ifb-card.et_pb_column {
		max-width: none !important;
		margin: 0 !important;
		scroll-snap-align: start;
	}

	/* Card padding as in the mobile design (208 x 175 cards, 16px inside). */
	body #page-container .ifb-cards > .ifb-card.et_pb_column {
		padding: 20px 16px 16px !important;
	}

	.ifb-cards > .ifb-card.et_pb_column {
		flex: 0 0 208px !important;
		width: 208px !important;
	}

	/* Section intro above the cards: 13.7px. */
	.et_pb_section:has(.ifb-cards) .et_pb_row:first-child .et_pb_text p {
		font-size: 13.7px !important;
	}
}

/* Quote */
.ifb-quote-name p {
	font-family: var(--ifb-font-heading);
	font-size: 14px;
	color: var(--ifb-heading);
}

.ifb-quote-section .ifb-portrait {
	margin-bottom: 0 !important;
}

.ifb-quote-section .ifb-portrait img {
	display: block;
}

@media (max-width: 767px) {
	.ifb-quote-section .ifb-quote-row.et_pb_row {
		width: 100% !important;
		max-width: none !important;
		flex-wrap: nowrap !important;
		align-items: flex-end;
		column-gap: 0 !important;
	}

	/* 44% = 171px at 390 (mobile design); capped so large phones don't get a huge photo. */
	.ifb-quote-section .ifb-quote-portrait-col {
		flex: 0 0 min(44%, 260px) !important;
		width: min(44%, 260px) !important;
	}

	.ifb-quote-section .ifb-portrait,
	.ifb-quote-section .ifb-portrait .et_pb_image_wrap,
	.ifb-quote-section .ifb-portrait img {
		width: 100% !important;
	}

	/* Mobile design: tall 171 x 268 crop of the (wide) portrait, anchored right so the
	   whole head shows and the jacket runs off the left screen edge. */
	.ifb-quote-section .ifb-portrait img {
		aspect-ratio: 172 / 268;
		object-fit: cover;
		object-position: 100% 0;
	}

	/* "So arbeiten wir" sits above the quote text (x 151px), not above the portrait:
	   the portrait column spans the row (label at the top, image at the bottom). */
	.ifb-quote-section .ifb-quote-portrait-col {
		align-self: stretch !important;
		justify-content: space-between;
	}

	.ifb-quote-section .ifb-quote-portrait-col > .et_pb_text {
		width: auto !important;
		margin-left: calc(min(44vw, 260px) - 4vw) !important; /* same line as the quote text */
		white-space: nowrap;
	}

	.ifb-quote-row:has(.ifb-quote-portrait-col > .et_pb_text) .ifb-quote-text-col {
		padding-top: 44px !important;
	}

	/* Text from 40% of the width (slightly over the white of the photo) to 14px
	   before the right edge. */
	.ifb-quote-section .ifb-quote-text-col {
		flex: 1 1 auto !important;
		width: auto !important;
		margin-left: -4% !important;
		padding-left: 0;
		padding-right: 14px !important;
		padding-bottom: 38px !important; /* name ends ~39px above the photo's bottom */
		row-gap: 0 !important; /* Divi's 30px module gap; the design has ~20px quote -> name */
		position: relative; /* above the photo where they overlap */
	}

	.ifb-quote {
		padding-top: 4px;
		margin-bottom: 17px !important;
	}

	.ifb-quote-name p {
		font-size: 11px;
		line-height: 1.4;
	}
}

/* FAQ accordion: plain rows with a dark bottom line and +/- on the right. */
.ifb-faq .et_pb_toggle {
	margin: 0 !important;
	padding: 14px 34px 14px 0 !important;
	border: 0;
	border-bottom: 1px solid var(--ifb-heading);
	background: transparent !important;
}

.ifb-faq .et_pb_toggle_title,
.ifb-faq .et_pb_toggle_open .et_pb_toggle_title {
	font-family: var(--ifb-font-body) !important;
	font-size: 22.5px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #3a3a3b !important;
}

.ifb-faq .et_pb_toggle_title::before {
	content: "+" !important;
	font-family: var(--ifb-font-body) !important;
	font-size: 28px !important;
	font-weight: 300;
	color: #3a3a3b !important;
	right: -40px !important;
	margin-top: -18px;
}

@media (min-width: 981px) {
	.ifb-faq .et_pb_toggle_title::before {
		right: -30px !important; /* desktop: +/- a bit closer to the question (client) */
		margin-top: -16px;
	}
}

.ifb-faq .et_pb_toggle_open .et_pb_toggle_title::before {
	content: "\2212" !important;
}

.ifb-faq .et_pb_toggle .et_pb_toggle_title {
	cursor: pointer;
	padding-right: 0 !important;
}

/* Eyebrow above the first toggle */
.ifb-faq .ifb-faq-list > .et_pb_text {
	margin-bottom: 16px !important;
}

.ifb-faq .et_pb_toggle_content,
.ifb-faq .et_pb_toggle_content p {
	padding-top: 4px;
	font-size: 18.7px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.ifb-faq .et_pb_toggle_title,
	.ifb-faq .et_pb_toggle_open .et_pb_toggle_title {
		font-size: 16.4px !important;
	}

	.ifb-faq .et_pb_toggle_content,
	.ifb-faq .et_pb_toggle_content p {
		font-size: 13.7px;
	}

	.ifb-faq .et_pb_toggle {
		padding: 10px 36px 10px 0 !important;
	}
}

/* Blog cards (grid + carousel): image, date, title, "Weiterlesen" line link. */
.ifb-blog .et_pb_post {
	display: flex !important;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 0 26px !important;
	border: 0 !important;
	background: transparent;
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Final design: the hovered card lifts off as a white card with a shadow
   (also on the grey "Aktuelle Beiträge" section of a blog post). */
.ifb-blog .et_pb_post:hover {
	background: var(--ifb-white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.ifb-blog .et_pb_post .et_pb_image_container {
	order: 0;
	margin: 0 0 14px !important; /* final design: date 14px below the image */
}

.ifb-blog .et_pb_post .entry-featured-image-url {
	margin-bottom: 0 !important; /* Divi adds 30px here */
}

.ifb-blog .et_pb_post .et_pb_image_container img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

.ifb-blog .et_pb_post .et_overlay {
	display: none !important;
}

.ifb-blog .et_pb_post .post-meta {
	order: 1;
	padding: 0 16px !important;
	margin-bottom: 10px;
	font-size: 18.7px !important;
	color: var(--ifb-text) !important;
}

.ifb-blog .et_pb_post .entry-title {
	order: 2;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: normal;
	word-break: normal;
	padding: 0 16px !important;
	font-family: var(--ifb-font-heading) !important;
	font-size: 30px !important;
	line-height: 1.17 !important;
}

.ifb-blog .et_pb_post .entry-title a {
	color: var(--ifb-heading) !important;
}

.ifb-blog .et_pb_post .post-content {
	order: 3;
	margin-top: auto;
	padding: 26px 16px 0 !important;
}

.ifb-blog--grid .et_pb_post .entry-title {
	font-size: 27px !important;
}

.ifb-blog .et_pb_post .more-link {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	margin-top: 0 !important;
	font-family: var(--ifb-font-body);
	font-size: 18.7px !important;
	font-weight: 400;
	color: var(--ifb-ui-text) !important;
}

.ifb-blog .et_pb_post .more-link::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 10px;
	background: currentColor;
	-webkit-mask: var(--ifb-arrow);
	mask: var(--ifb-arrow);
	transition: transform 0.2s ease;
}

.ifb-blog .et_pb_post:hover .more-link::before {
	transform: translateX(6px);
}

/* Grid variant: 3 cards. */
.ifb-blog--grid .et_pb_blog_posts {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 28px;
}

@media (max-width: 980px) {
	.ifb-blog--grid .et_pb_blog_posts {
		gap: 18px;
	}

	.ifb-blog .et_pb_post .entry-title,
	.ifb-blog--grid .et_pb_post .entry-title {
		font-size: 22px !important;
	}

	.ifb-blog .et_pb_post .post-meta,
	.ifb-blog .et_pb_post .more-link {
		font-size: 15px !important;
	}
}

/* Mobile design: 254px cards with 12px text inset, 13.7px date and link. */
@media (max-width: 767px) {
	.ifb-blog .et_pb_post .post-meta,
	.ifb-blog .et_pb_post .entry-title,
	.ifb-blog .et_pb_post .post-content {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.ifb-blog .et_pb_post .post-meta,
	.ifb-blog .et_pb_post .more-link {
		font-size: 13.7px !important;
	}
}

/* Mobile design: the 3-post grid becomes a swipeable carousel (dots + arrow from ifb.js).
   Not the blog overview (Aktuelles), which stays a list. */
@media (max-width: 767px) {
	.ifb-blog--grid:not(.ifb-blog--archive) .et_pb_blog_posts {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding: 10px 0 30px;
	}

	.ifb-blog--grid:not(.ifb-blog--archive) .et_pb_blog_posts::-webkit-scrollbar {
		display: none;
	}

	.ifb-blog--grid:not(.ifb-blog--archive) .et_pb_post {
		flex: 0 0 254px;
		width: auto !important;
		scroll-snap-align: start;
	}

	/* Full-width track like the carousel below (--ifb-car-off = 12% on phones). */
	.ifb-blog--grid:not(.ifb-blog--archive) {
		--ifb-car-off: 12%;
	}

	.ifb-blog--grid:not(.ifb-blog--archive) .et_pb_blog_posts {
		padding: 10px var(--ifb-car-off) 30px;
		scroll-padding-inline: var(--ifb-car-off);
	}

	.ifb-blog--grid:not(.ifb-blog--archive) .ifb-blog-row.et_pb_row {
		align-self: stretch !important;
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.ifb-blog--grid:not(.ifb-blog--archive) .ifb-blog-row > .et_pb_column > .et_pb_module:not(.et_pb_blog),
	.ifb-blog--grid:not(.ifb-blog--archive) .ifb-carousel-nav {
		margin-left: var(--ifb-car-off) !important;
		margin-right: var(--ifb-car-off) !important;
	}
}

/* Blog overview (Aktuelles) on phones: one post per row. */
@media (max-width: 767px) {
	.ifb-blog--archive .et_pb_blog_posts {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 768px) {
	.ifb-blog--grid .ifb-carousel-nav {
		display: none;
	}
}

/* Carousel variant: the track runs across the full window width. At the start the first
   card sits on the grid line (empty space on the left = --ifb-car-off); while scrolling the
   cards slide into that space, and at the end the same space is left on the right
   (padding on both sides; scroll-padding makes the snap points respect it). */
.ifb-blog--carousel {
	--ifb-car-off: max(5%, calc((100% - 1097px) / 2));
}

.ifb-blog--carousel .ifb-blog-row.et_pb_row {
	align-self: stretch !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Heading ("AKTUELLES / BLOG") and arrows stay on the grid line. */
.ifb-blog--carousel .ifb-blog-row > .et_pb_column > .et_pb_module:not(.et_pb_blog),
.ifb-blog--carousel .ifb-carousel-nav {
	margin-left: var(--ifb-car-off) !important;
	margin-right: var(--ifb-car-off) !important;
}

.ifb-blog--carousel .et_pb_blog_posts {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ifb-car-off);
	scrollbar-width: none;
	padding: 10px var(--ifb-car-off) 30px;
}

.ifb-blog--carousel .et_pb_blog_posts::-webkit-scrollbar {
	display: none;
}

.ifb-blog--carousel .et_pb_post {
	flex: 0 0 calc((100% - 3 * 28px) / 3.4);
	width: auto !important;
	scroll-snap-align: start;
}

@media (min-width: 981px) {
	.ifb-blog--carousel .et_pb_post {
		flex: 0 0 347px;
	}

	/* Dots + arrows stay under the first three cards. */
	.ifb-blog--carousel .ifb-carousel-nav {
		max-width: 1097px;
	}

	/* Final design: cards outside the 1097px grid (the --ifb-car-off strips) are faded
	   to ~45%, on the right and - while scrolled - on the left. A mask on the scroll
	   box stays fixed while the cards move under it; the 28px ramp (= gap) is empty at
	   rest and keeps the edge soft while a card slides through. Works on any background. */
	.ifb-blog--carousel .et_pb_blog_posts {
		--ifb-car-fade: linear-gradient(to right,
			rgba(0, 0, 0, .45) calc(var(--ifb-car-off) - 28px),
			#000 var(--ifb-car-off),
			#000 calc(100% - var(--ifb-car-off)),
			rgba(0, 0, 0, .45) calc(100% - var(--ifb-car-off) + 28px));
		-webkit-mask-image: var(--ifb-car-fade);
		mask-image: var(--ifb-car-fade);
	}
}

@media (max-width: 980px) {
	.ifb-blog--carousel .et_pb_post {
		flex-basis: calc((100% - 28px) / 2.2);
	}
}

@media (max-width: 767px) {
	/* Mobile design: 254px cards, 20px apart, starting 12% from the left. */
	.ifb-blog--carousel {
		--ifb-car-off: 12%;
	}

	.ifb-blog--carousel .et_pb_blog_posts {
		gap: 20px;
	}

	.ifb-blog--carousel .et_pb_post {
		flex: 0 0 254px;
	}

}

/* Mobile design: only the current card (254px at --ifb-car-off) is fully visible; the
   next card and - while scrolled - the previous one are faded to ~45% (20px ramp = gap).
   The right padding lets the last card reach the start position too, so it never stops
   half inside the faded part. Same for the home grid that becomes a carousel on phones. */
@media (max-width: 767px) {
	.ifb-blog--carousel .et_pb_blog_posts,
	.ifb-blog--grid:not(.ifb-blog--archive) .et_pb_blog_posts {
		--ifb-car-fade: linear-gradient(to right,
			rgba(0, 0, 0, .45) calc(var(--ifb-car-off) - 20px),
			#000 var(--ifb-car-off),
			#000 calc(var(--ifb-car-off) + 254px),
			rgba(0, 0, 0, .45) calc(var(--ifb-car-off) + 274px));
		-webkit-mask-image: var(--ifb-car-fade);
		mask-image: var(--ifb-car-fade);
		padding-right: max(var(--ifb-car-off), calc(100% - var(--ifb-car-off) - 254px));
	}
}

/* "––> Alle Beiträge anzeigen" under the 3-card grid: right, 22.5px (final design). */
.ifb-blog .et_pb_button_module_wrapper:has(> .ifb-all-link) {
	align-self: flex-end;
	margin-right: 33px;
}

body #page-container .et_pb_section .ifb-all-link .et_pb_button,
body #page-container .et_pb_section .et_pb_button.ifb-all-link {
	font-size: 22.5px !important;
}

@media (max-width: 767px) {
	.ifb-blog .et_pb_button_module_wrapper:has(> .ifb-all-link) {
		margin-right: 0;
	}

	body #page-container .et_pb_section .ifb-all-link .et_pb_button,
	body #page-container .et_pb_section .et_pb_button.ifb-all-link {
		font-size: 16.4px !important;
	}
}

/* Left arrow | dots (centred) | right arrow. Hidden arrows keep their space
   (visibility), so the dots never jump. */
.ifb-carousel-nav {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 20px;
}

.ifb-carousel-nav[hidden] {
	display: none;
}

.ifb-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 0;
}

.ifb-carousel-dot {
	width: 16px;
	height: 2px;
	padding: 0;
	border: 0;
	background: #c9cccf;
	cursor: pointer;
}

.ifb-carousel-dot.is-active {
	width: 26px;
	background: var(--ifb-red);
}

.ifb-carousel-prev,
.ifb-carousel-next {
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--ifb-heading);
	cursor: pointer;
}

.ifb-carousel-prev:hover,
.ifb-carousel-next:hover {
	color: var(--ifb-red);
}

.ifb-carousel-prev svg {
	transform: scaleX(-1); /* same arrow, pointing left */
}

.ifb-carousel-prev.is-hidden,
.ifb-carousel-next.is-hidden {
	visibility: hidden;
}

/* Phones: no arrows (people swipe), the dots sit centred under the cards. */
@media (max-width: 767px) {
	.ifb-carousel-nav {
		grid-template-columns: 1fr;
	}

	.ifb-carousel-prev,
	.ifb-carousel-next {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Über uns (final design Oct 2026): team, grey text blocks, red info box
 * ------------------------------------------------------------------ */

/* Shown on phones only (e.g. the "Über uns" eyebrow above the hero H1). */
@media (min-width: 768px) {
	.ifb-mobile-only {
		display: none !important;
	}
}

/* Second, smaller paragraph in a hero (Über uns). */
.ifb-hero .ifb-text-smaller {
	padding-top: 6px;
	font-size: 15px;
	line-height: 1.5;
}

/* "Wofür wir stehen": labels regular on desktop, Medium on phones (as designed). */
.ifb-split .ifb-list strong {
	font-weight: inherit;
}

@media (max-width: 767px) {
	.ifb-hero .ifb-text-smaller {
		font-size: 13.7px;
		line-height: 1.4;
	}

	.ifb-split .ifb-list strong {
		font-weight: 500;
	}
}

/* Team: portrait 309 x 354 + text, 420px line underneath. */
.ifb-team.et_pb_section {
	row-gap: 0 !important;
}

.ifb-team .ifb-team-row.et_pb_row {
	padding: 0 !important;
}

.ifb-team .ifb-team-member.et_pb_column {
	position: relative;
	display: flex !important;
	flex-direction: row;
	align-items: flex-end;
	flex: none !important;
	width: 600px !important;
	max-width: 100%;
	margin: 0 !important;
	column-gap: 0 !important; /* Divi's column gap would squeeze the text next to the portrait */
}

.ifb-team .ifb-team-member::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 420px;
	height: 1px;
	background: #3b4349;
}

.ifb-team .ifb-team-portrait {
	flex: 0 0 309px;
	margin: 0 !important;
}

.ifb-team .ifb-team-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 309 / 354;
	object-fit: cover;
}

/* Phone crop of the portrait (phase3-components team_member img_phone): only on phones. */
.ifb-team .ifb-team-portrait--phone {
	display: none !important;
}

.ifb-team .ifb-team-text {
	flex: 1 1 auto;
	margin: 0 !important;
	padding-bottom: 14px;
}

.ifb-team .ifb-team-since {
	padding-bottom: 6px;
	font-family: var(--ifb-font-heading);
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ifb-team .ifb-team-name {
	padding-bottom: 6px;
	font-size: 27px;
	color: var(--ifb-text);
}

.ifb-team .ifb-team-role {
	padding-bottom: 12px;
}

.ifb-team .ifb-team-list {
	margin: 10px 0 0; /* Divi zeroes the padding of the last <p> (the role), so the gap sits here */
	padding: 0 !important;
	list-style: none;
}

.ifb-team .ifb-team-list li {
	position: relative;
	padding-left: 11px;
	font-size: 15px;
	line-height: 1.3;
}

.ifb-team .ifb-team-list li::before {
	content: "•";
	position: absolute;
	left: 0;
}

/* Desktop: staggered positions on the 1097px grid (left / right / centre), the
   next person starts 100px before the previous one ends. */
@media (min-width: 1100px) {
	.ifb-team .ifb-team-row + .ifb-team-row {
		margin-top: -100px !important;
	}

	.ifb-team .ifb-team-member.ifb-team-member--right.et_pb_column {
		margin-left: 51.3% !important;
	}
}

/* Tablet: no overlap, people alternate left / right. */
@media (min-width: 768px) and (max-width: 1099px) {
	.ifb-team .ifb-team-row + .ifb-team-row {
		margin-top: 40px !important;
	}

	.ifb-team .ifb-team-member.ifb-team-member--right.et_pb_column {
		margin-left: auto !important;
	}
}

/* Phone (mobile design): portrait 180 x 259 at the screen edge, text beside it,
   alternating sides; the line runs out of the screen. */
@media (max-width: 767px) {
	.ifb-team .ifb-team-row.et_pb_row {
		width: 100% !important;
		max-width: none !important;
	}

	.ifb-team .ifb-team-row + .ifb-team-row {
		margin-top: 15px !important;
	}

	.ifb-team .ifb-team-member.et_pb_column {
		width: 100% !important;
	}

	.ifb-team .ifb-team-member.ifb-team-member--right.et_pb_column {
		flex-direction: row-reverse;
	}

	.ifb-team .ifb-team-member::after {
		width: 261px;
	}

	.ifb-team .ifb-team-member.ifb-team-member--right::after {
		left: auto;
		right: 0;
	}

	.ifb-team .ifb-team-portrait {
		flex-basis: 180px;
	}

	.ifb-team .ifb-team-portrait img {
		aspect-ratio: 180 / 259;
	}

	/* Mobile design: its own taller crop with room beside the shoulder (= the gap to the
	   text), mirrored on the right-hand entries so the person faces the text. */
	.ifb-team .ifb-team-member:has(.ifb-team-portrait--phone) .ifb-team-portrait:not(.ifb-team-portrait--phone) {
		display: none !important;
	}

	.ifb-team .ifb-team-portrait--phone {
		display: block !important;
	}

	.ifb-team .ifb-team-member--right .ifb-team-portrait--phone img {
		transform: scaleX(-1);
	}

	.ifb-team .ifb-team-member--right .ifb-team-text {
		padding-left: 25px;
	}

	/* Text spacing of the mobile design (390px): label -> name 20px, name -> role 25px,
	   role 19px lines, list 16.5px lines, last list line 21px above the line. */
	.ifb-team > .et_pb_row:first-child {
		padding-bottom: 11px !important;
	}

	/* 76px from the last person to the grey text blocks. */
	body #page-container .ifb-team.et_pb_section {
		padding-bottom: 76px !important;
	}

	.ifb-team .ifb-team-list {
		margin-top: 12px;
	}

	.ifb-team .ifb-team-text {
		padding-bottom: 18px;
	}

	.ifb-team .ifb-team-since {
		padding-bottom: 5px;
		font-size: 11px;
		line-height: 1.4;
	}

	.ifb-team .ifb-team-name {
		padding-bottom: 0;
		font-size: 19.7px;
		line-height: 1.2;
	}

	.ifb-team .ifb-team-role p,
	.ifb-team .ifb-team-role {
		font-size: 13.7px;
		line-height: 1.4;
	}

	.ifb-team .ifb-team-list li {
		font-size: 11px;
		line-height: 1.5;
	}
}

/* Grey text blocks (Enzler AG, Revision im Verbund): red links, 66px between blocks. */
.ifb-text-blocks > .et_pb_heading ~ .et_pb_heading {
	margin-top: 54px !important;
}

.ifb-text-links a,
.ifb-text-links strong {
	font-weight: 500;
	color: var(--ifb-red);
}

.ifb-text-links a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (max-width: 767px) {
	.ifb-textblocks h2 {
		font-size: 22px !important;
	}

	.ifb-textblocks .et_pb_text p {
		font-size: 13.7px !important;
		line-height: 1.4 !important;
	}

	.ifb-team h2 {
		font-size: 22px !important;
	}

	.ifb-text-blocks > .et_pb_heading ~ .et_pb_heading {
		margin-top: 36px !important;
	}

	/* Red info box: 340px wide like the other red boxes on phones. */
	.ifb-infobox .ifb-infobox-inner.et_pb_row {
		width: calc(100% - 50px) !important;
	}
}

/* ------------------------------------------------------------------
 * Phase 4: Kontakt page (form + map / red contact panel)
 * ------------------------------------------------------------------ */

/* Map fills the column next to the red panel. */
.ifb-mapbox .ifb-map,
.ifb-mapbox .ifb-map a,
.ifb-mapbox .ifb-map .et_pb_image_wrap {
	display: block;
	height: 100%;
	margin: 0 !important;
}

.ifb-mapbox .ifb-map img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
}

/* Red contact panel: icon list. */
.ifb-contact-list {
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
}

.ifb-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
	padding: 0;
	list-style: none;
}

.ifb-contact-list li svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--ifb-white);
}

.ifb-contact-list a {
	color: var(--ifb-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* Legal pages */
.ifb-legal h2,
.ifb-legal h3 {
	margin-top: 24px;
	padding-bottom: 6px;
	font-size: 22px;
}

.ifb-legal a {
	color: var(--ifb-red);
}

/* ------------------------------------------------------------------
 * Phase 5: Contact Form 7 (form "IFB Kontaktformular", .ifb-cf7)
 * ------------------------------------------------------------------ */
.ifb-cf7 {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ifb-cf7 .wpcf7-form-control-wrap {
	display: block;
}

/* Divi's CF7 module styles the fields (grey boxes) with strong selectors - override. */
body #page-container .ifb-cf7 input.wpcf7-text,
body #page-container .ifb-cf7 input.wpcf7-email,
body #page-container .ifb-cf7 input.wpcf7-tel,
body #page-container .ifb-cf7 textarea.wpcf7-textarea,
body #page-container .ifb-cf7 select.wpcf7-select {
	width: 100%;
	padding: 10px 0 8px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ifb-heading) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	font-family: var(--ifb-font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--ifb-text);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.ifb-cf7 textarea.wpcf7-textarea {
	min-height: 110px;
	resize: vertical;
}

.ifb-cf7 input::placeholder,
.ifb-cf7 textarea::placeholder {
	color: #70747a;
	opacity: 1;
}

/* Active field: no red frame or line (client wish) - the dark bottom line just gets
   1px thicker (box-shadow, so nothing moves). Still a visible focus for keyboard
   users (WCAG 2.4.7); browsers treat a clicked text field as :focus-visible, so the
   global red outline below is switched off for these fields. */
body #page-container .ifb-cf7 input.wpcf7-form-control:not([type="checkbox"]):not([type="submit"]):focus,
body #page-container .ifb-cf7 textarea:focus,
body #page-container .ifb-cf7 select:focus {
	outline: none !important;
	border-bottom-color: var(--ifb-heading) !important;
	box-shadow: 0 1px 0 0 var(--ifb-heading) !important;
}

/* Select with a thin chevron, grey while the label option is shown. */
body #page-container .ifb-cf7 select.wpcf7-select {
	padding-right: 24px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233b3b3b' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	cursor: pointer;
}

/* Grey while the "Leistung wählen *" label option (value "") is selected. */
body #page-container .ifb-cf7 select.wpcf7-select:has(option[value=""]:checked) {
	color: #70747a !important;
}

.ifb-cf7 select.wpcf7-select option {
	color: var(--ifb-text);
}

/* Privacy checkbox */
.ifb-cf7-privacy {
	max-width: 420px;
	font-size: 15px;
	line-height: 1.45;
}

.ifb-cf7-privacy .wpcf7-list-item {
	margin: 0;
}

.ifb-cf7-privacy label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.ifb-cf7-privacy input[type="checkbox"] {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 3px;
	accent-color: var(--ifb-red);
}

.ifb-cf7-privacy a {
	color: var(--ifb-red);
	text-decoration: underline;
}

/* Submit: "––– senden". The button is an <input>, so the line sits on the wrapper. */
.ifb-cf7-submit {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	margin-top: 8px;
	color: var(--ifb-ui-text);
}

.ifb-cf7-submit::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 10px;
	background: currentColor;
	-webkit-mask: var(--ifb-arrow);
	mask: var(--ifb-arrow);
	transition: transform 0.2s ease;
}

.ifb-cf7-submit:hover::before {
	transform: translateX(6px);
}

body #page-container .ifb-cf7 .ifb-cf7-submit .wpcf7-submit {
	margin: 0 !important; /* Divi adds 10px / 30px, which pushed the label off the arrow */
}

.ifb-cf7 .ifb-cf7-submit .wpcf7-spinner {
	margin: 0 0 0 8px;
}

/* Divi turns the CF7 submit into <button class="... et_pb_button">. */
body #page-container .ifb-cf7 .wpcf7-submit,
body #page-container .ifb-cf7 .wpcf7-submit:hover {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	font-family: var(--ifb-font-body) !important;
	font-size: 18.7px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--ifb-ui-text) !important;
	cursor: pointer;
}

body #page-container .ifb-cf7 .wpcf7-submit::before,
body #page-container .ifb-cf7 .wpcf7-submit::after {
	display: none !important;
}

.ifb-cf7 .wpcf7-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Kontakt (final design): form 420px wide on the 870px grid, photo 541 x 542 running out right. */
.ifb-contact .ifb-cf7 {
	max-width: 420px;
	margin-top: 76px; /* design: form starts ~107px below the intro */
}

@media (min-width: 768px) {
	.ifb-contact .ifb-contact-row.et_pb_row {
		align-self: stretch !important; /* Divi centres rows: auto width would shrink */
		width: auto !important;
		max-width: none !important;
		margin-left: max(5%, calc((100% - 870px) / 2)) !important;
		margin-right: max(4%, calc((100% - 1020px) / 2 - 160px)) !important;
	}

	.ifb-contact .ifb-contact-photo-col .ifb-hero-image img {
		aspect-ratio: 541 / 542;
	}
}

/* Phone: photo between intro and form (298 x 243, centred), small form (13.7px). */
@media (max-width: 767px) {
	.ifb-contact .ifb-contact-photo-col {
		display: none !important;
	}

	.ifb-contact .ifb-contact-photo-m {
		align-self: center;
		width: min(298px, 82%) !important;
		margin: 2px auto 12px !important;
	}

	.ifb-contact .ifb-contact-photo-m img {
		aspect-ratio: 298 / 243;
		object-fit: cover;
	}

	.ifb-contact .ifb-contact-form-col .et_pb_text p {
		font-size: 13.7px !important;
		line-height: 1.4 !important;
	}

	.ifb-contact .ifb-cf7 {
		margin-top: 0;
	}

	body #page-container .ifb-cf7 input.wpcf7-text,
	body #page-container .ifb-cf7 input.wpcf7-email,
	body #page-container .ifb-cf7 input.wpcf7-tel,
	body #page-container .ifb-cf7 textarea.wpcf7-textarea,
	body #page-container .ifb-cf7 select.wpcf7-select {
		padding: 6px 0 5px !important;
		font-size: 13.7px;
	}

	.ifb-cf7 textarea.wpcf7-textarea {
		min-height: 125px;
	}

	.ifb-cf7-privacy {
		font-size: 11px;
	}

	body #page-container .ifb-cf7 .wpcf7-submit {
		font-size: 16.4px !important;
	}
}

/* Red contact panel: content centred vertically next to the map (also set in the module). */
.ifb-mapbox .ifb-contact-panel.et_pb_column {
	justify-content: center !important;
}

.ifb-mapbox .ifb-contact-panel .et_pb_module {
	margin-bottom: 0 !important;
}

.ifb-mapbox .ifb-contact-list li:last-child {
	margin-bottom: 0; /* so the visible text, not an empty margin, is centred */
}

/* Red contact panel: 18.7px (phone 16.4px). */
.ifb-mapbox .ifb-contact-panel-text,
.ifb-mapbox .ifb-contact-panel-text li,
.ifb-mapbox .ifb-contact-panel-text a {
	font-size: 18.7px !important;
	line-height: 1.4 !important;
}

@media (max-width: 767px) {
	.ifb-mapbox .ifb-contact-panel-text,
	.ifb-mapbox .ifb-contact-panel-text li,
	.ifb-mapbox .ifb-contact-panel-text a {
		font-size: 16.4px !important;
	}

	.ifb-mapbox h2 {
		font-size: 27.4px !important;
	}

	.ifb-mapbox .ifb-map img {
		min-height: 0;
		aspect-ratio: 390 / 297;
	}
}

/* Validation + response messages */
body #page-container .ifb-cf7 .wpcf7-not-valid {
	border-bottom-color: var(--ifb-red) !important;
}

.ifb-cf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 13px;
	color: var(--ifb-red);
}

.ifb-contact .wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--ifb-heading);
	font-size: 15px;
}

.ifb-contact .wpcf7 form.sent .wpcf7-response-output {
	border-color: #3b7d4f;
}

.ifb-contact .wpcf7 form.invalid .wpcf7-response-output,
.ifb-contact .wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--ifb-red);
}

/* ------------------------------------------------------------------
 * Blog templates (Theme Builder "IFB Blogbeitrag" / "IFB Blog-Übersicht"),
 * final design Oct 2026: desktop p3-p5, mobile p5-p6.
 * ------------------------------------------------------------------ */

/* --- Post: text column on the 870px grid, post image (542 x 497) running out right --- */
@media (min-width: 768px) {
	.ifb-post .ifb-post-row.et_pb_row {
		align-self: stretch !important; /* Divi centres rows: auto width would shrink */
		width: auto !important;
		max-width: none !important;
		margin-left: max(5%, calc((100% - 870px) / 2)) !important;
		margin-right: max(4%, calc((100% - 1020px) / 2 - 160px)) !important;
	}
}

.ifb-post .ifb-post-text {
	max-width: 534px;
}

@media (min-width: 981px) {
	/* Design: the date sits ~90px below the top of the post image. */
	.ifb-post .ifb-post-text {
		padding-top: 90px;
	}
}

/* Date above the title (as on the blog cards). */
.ifb-post-title .et_pb_title_container {
	display: flex;
	flex-direction: column;
}

.ifb-post-title .et_pb_title_meta_container {
	order: -1;
	margin-bottom: 22px;
}

.ifb-post-title h1 {
	letter-spacing: 0.03em; /* final design tracking, like the other H1 */
}

.ifb-post-image .et_pb_title_featured_container {
	margin: 0;
}

.ifb-post-image .et_pb_title_featured_container img {
	display: block;
	width: 100%;
	aspect-ratio: 542 / 497;
	object-fit: cover;
}

/* Article: lead paragraph 18.7px, body 15px, H2 30px, red links. */
.ifb-article {
	font-size: 15px;
	line-height: 1.5;
}

.ifb-article p,
.ifb-article ul,
.ifb-article ol {
	margin-bottom: 1em;
	padding-bottom: 0;
}

.ifb-article > p:first-child {
	margin-bottom: 1.8em;
	font-size: 18.7px;
	line-height: 1.4;
}

.ifb-article h2 {
	margin: 1.4em 0 0.5em;
	font-size: 30px;
	line-height: 1.25;
}

.ifb-article h3 {
	margin: 1.4em 0 0.4em;
	font-size: 24px;
}

.ifb-article ul {
	padding-left: 1.2em;
	list-style: disc;
}

.ifb-article li {
	margin-bottom: 0.3em;
}

.ifb-article a {
	font-weight: 500;
	color: var(--ifb-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ifb-article blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--ifb-red);
	font-family: var(--ifb-font-heading);
	font-style: italic;
	font-size: 24px;
	line-height: 1.4;
	color: var(--ifb-heading);
}

/* Posts written in the Divi Builder bring their own section > row inside the post
   content. Divi's defaults narrowed the text to 80% (side margins) and added 32px
   (desktop) / 80px (tablet, phone) above it. The text now uses the full article width,
   and the gap below the title is half of what it was: 26px desktop, 50px below 981px
   (20px of it come from the template). */
.ifb-article .et-l--post .et_pb_section:first-child:not(.ifb-faq) {
	padding-top: 0 !important;
}

.ifb-article .et-l--post .et_pb_row {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ifb-article .et-l--post .et_pb_section:first-child:not(.ifb-faq) > .et_pb_row:first-child {
	padding-top: 6px !important;
}

@media (max-width: 980px) {
	.ifb-article .et-l--post .et_pb_section:first-child:not(.ifb-faq) > .et_pb_row:first-child {
		padding-top: 30px !important;
	}
}

/* FAQ at the end of a post (Divi Library "IFB FAQ Akkordeon", inserted per post in
   the Builder): same rows and +/- as on the pages, but white inside the article
   column (the grey "Aktuelle Beiträge" band follows right below), 40px above it.
   ifb.js turns its label into an h2 so the questions (h3) follow the post's h1. */
/* "#page-container" outweighs Divi's own ".et-l--post > .et_builder_inner_content .et_pb_section_N"
   background rule (same specificity, printed after ifb.css). */
body #page-container .ifb-article .ifb-faq.et_pb_section {
	margin-top: 40px;
	padding: 0 !important;
	background: transparent !important;
}

/* Without ".et-l--post": in plain (non-Builder) posts the section sits directly in
   the article, so the full-width rule above does not reach its row. */
.ifb-article .ifb-faq .et_pb_row {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
}

/* No extra space from Divi's bottom padding of the post's last text section: the FAQ
   (moved below text + image by ifb.js) or the post navigation brings its own margin.
   ... */
.ifb-article .et-l--post .et_pb_section:last-child,
.ifb-article .et-l--post .et_pb_section:last-child > .et_pb_row:last-child,
.ifb-article .et-l--post .et_pb_section:has(+ .ifb-faq),
.ifb-article .et-l--post .et_pb_section:has(+ .ifb-faq) > .et_pb_row:last-child {
	padding-bottom: 0 !important;
}

/* ... and none from the article styles: Divi's 30px module gap and the article h3
   margin would push the questions apart (on the pages both are 0). */
.ifb-article .ifb-faq .ifb-faq-list {
	row-gap: 0 !important;
}

.ifb-article .ifb-faq .et_pb_toggle_title {
	margin: 0;
}

/* No visible "FAQ" label on blog posts (client wish 2026-10-27): the label module is
   hidden visually but stays for screen readers - it is the h2 the questions (h3) need
   after the post title (h1). Same pattern as .screen-reader-text. */
.ifb-post .ifb-faq .ifb-faq-list > .et_pb_text:first-child {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Same look as the label paragraph it replaces (ifb-text-eyebrow preset). */
.ifb-article .ifb-faq h2.ifb-faq-label {
	margin: 0;
	padding: 0;
	font-family: var(--ifb-font-heading);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ifb-text);
}

@media (max-width: 767px) {
	body #page-container .ifb-article .ifb-faq.et_pb_section {
		margin-top: 32px;
	}

	.ifb-article .ifb-faq h2.ifb-faq-label {
		font-size: 11px;
	}
}

/* A post may start with a heading: no extra space above the very first element. */
.ifb-article .et-l--post .et_pb_section:first-child .et_pb_row:first-child .et_pb_module:first-child .et_pb_text_inner > :first-child {
	margin-top: 0;
}

/* "vorheriger Beitrag <––" left, "––> nächster Beitrag" right (15px, design arrows). */
.ifb-post-nav {
	display: flex !important;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px !important;
}

.ifb-post-nav .nav-previous,
.ifb-post-nav .nav-next {
	float: none !important;
}

.ifb-post-nav a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	font-family: var(--ifb-font-body);
	font-size: 15px;
	font-weight: 400;
	/* colour: set in the module (phase6-templates.py), Divi prints it with !important */
}

.ifb-post-nav .meta-nav {
	display: none; /* Divi's text arrows; the design arrow is drawn below */
}

.ifb-post-nav .nav-previous a::after,
.ifb-post-nav .nav-next a::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 7px;
	background: currentColor;
	-webkit-mask: var(--ifb-arrow);
	mask: var(--ifb-arrow);
	transition: transform 0.2s ease;
}

.ifb-post-nav .nav-previous a::after {
	transform: scaleX(-1);
}

.ifb-post-nav .nav-previous a:hover::after {
	transform: scaleX(-1) translateX(5px);
}

.ifb-post-nav .nav-next a:hover::before {
	transform: translateX(5px);
}

/* FAQ below text AND image (ifb.js moves it, with the post navigation, into
   .ifb-post-after at the end of the row): its own full-width line, the FAQ 60% of the
   row width and centred, the navigation keeps the width of the text column. */
.ifb-post .ifb-post-row > .ifb-post-after {
	flex: 0 0 100%;
	order: 1;
}

@media (min-width: 768px) {
	.ifb-post .ifb-post-row.et_pb_row {
		flex-wrap: wrap !important;
		row-gap: 0 !important;
	}

	.ifb-post-after > .ifb-article {
		width: 60%;
		margin: 0 auto;
	}

	.ifb-post-after > .ifb-post-nav {
		width: calc((100% - 28px) / 2); /* = text column (row gap 28px) */
		max-width: 534px;
	}
}

/* Mobile design: image first (298 x 243, centred), then date, title, text. */
@media (max-width: 767px) {
	.ifb-post .ifb-post-row {
		flex-direction: column-reverse !important;
		row-gap: 44px !important;
	}

	/* FAQ block (see above): last on screen in the reversed column, and directly
	   below the text (no 44px gap - the FAQ has its own 32px margin). */
	.ifb-post .ifb-post-row > .ifb-post-after {
		order: -1;
		margin-top: -44px;
	}

	.ifb-post .ifb-post-row > .ifb-post-image-col.et_pb_column {
		align-self: center !important; /* Divi sets margin-right: 0 on the last column */
		width: min(298px, 82%) !important;
		margin: 0 auto !important;
	}

	.ifb-post-image .et_pb_title_featured_container img {
		aspect-ratio: 298 / 243;
	}

	.ifb-post .ifb-post-text {
		max-width: none;
	}

	.ifb-article {
		font-size: 13.7px;
		line-height: 1.45;
	}

	.ifb-article > p:first-child {
		font-size: 16.4px;
		line-height: 1.35;
	}

	.ifb-article h2 {
		font-size: 22px;
	}

	.ifb-post-nav a {
		font-size: 13.7px;
	}
}

/* --- Overview (Aktuelles): "AKTUELLES" label is the H1, styled as eyebrow --- */
.ifb-h1-eyebrow h1,
.ifb-h1-eyebrow .et_pb_module_header {
	font-family: var(--ifb-font-heading) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase;
	color: var(--ifb-text) !important;
}

/* Category filter: underlined "Kategorie auswählen" with chevron, white panel with shadow. */
.ifb-cat-filter {
	position: relative;
	width: 345px;
	max-width: 100%;
	z-index: 5;
}

.ifb-cat-filter summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0 9px;
	border-bottom: 1px solid var(--ifb-text);
	font-size: 18.7px;
	font-weight: 300;
	color: #333739;
	cursor: pointer;
	list-style: none;
}

.ifb-cat-filter summary::-webkit-details-marker {
	display: none;
}

.ifb-cat-filter summary::after {
	content: "";
	width: 9px;
	height: 9px;
	margin: -5px 6px 0 20px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}

.ifb-cat-filter[open] summary {
	border-bottom-color: transparent;
}

.ifb-cat-filter[open] summary::after {
	margin-top: 5px;
	transform: rotate(-135deg);
}

/* Open: white panel with shadow that lies over the posts (design), not pushing them down. */
.ifb-cat-filter[open] summary {
	position: relative;
	z-index: 1;
}

.ifb-cat-filter[open]::before {
	content: "";
	position: absolute;
	inset: -1px -15px auto;
	height: calc(100% + 2px);
	background: var(--ifb-white);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}

.ifb-cat-filter ul {
	position: absolute;
	top: 100%;
	left: -15px;
	right: -15px;
	margin: 0;
	padding: 4px 15px 14px !important;
	list-style: none !important;
	background: var(--ifb-white);
	box-shadow: 0 10px 14px rgba(0, 0, 0, 0.22);
}


.ifb-cat-filter li {
	padding: 0 !important;
}

.ifb-cat-filter li a {
	display: block;
	padding: 6px 0;
	font-size: 18.7px;
	font-weight: 300;
	line-height: 1.35;
	color: #333739;
}

.ifb-cat-filter li a:hover,
.ifb-cat-filter li a[aria-current] {
	color: var(--ifb-red);
}

/* Overview grid: 3 x 347px, 30px between rows. */
.ifb-blog--archive .et_pb_blog_posts {
	row-gap: 30px;
}

/* "––> Mehr Beiträge anzeigen" (ifb.js, replaces the hidden Divi pagination), right, 22.5px. */
.ifb-blog--archive .ifb-load-more-wrap {
	display: flex;
	justify-content: flex-end;
	margin: 40px 33px 0 0;
	padding: 0;
}

.ifb-blog--archive .ifb-load-more-wrap a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	font-family: var(--ifb-font-body);
	font-size: 22.5px;
	font-weight: 400;
	color: var(--ifb-ui-text);
}

.ifb-blog--archive .ifb-load-more-wrap a::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 10px;
	background: currentColor;
	-webkit-mask: var(--ifb-arrow);
	mask: var(--ifb-arrow);
	transition: transform 0.2s ease;
}

.ifb-blog--archive .ifb-load-more-wrap a:hover::before {
	transform: translateX(6px);
}

.ifb-blog--archive .ifb-load-more-wrap a[aria-busy="true"] {
	opacity: 0.5;
}

/* Mobile design: one column of 272px cards (centred), 11px label, 16.4px link. */
@media (max-width: 767px) {
	.ifb-h1-eyebrow h1,
	.ifb-h1-eyebrow .et_pb_module_header {
		font-size: 11px !important;
	}

	.ifb-cat-filter {
		width: 272px;
	}

	.ifb-cat-filter summary,
	.ifb-cat-filter li a {
		font-size: 13.7px;
	}

	.ifb-blog--archive .ifb-blog-row.et_pb_row {
		width: 272px !important;
		max-width: 90% !important;
	}

	.ifb-blog--archive .ifb-load-more-wrap {
		margin-right: 0;
	}

	.ifb-blog--archive .ifb-load-more-wrap a {
		font-size: 16.4px;
	}
}

/* ------------------------------------------------------------------
 * Phase 7: responsive + touch targets (WCAG 2.2: min. 24 x 24 px)
 * ------------------------------------------------------------------ */

/* Footer / contact panel links: taller hit area without changing the look. */
.ifb-footer a,
.ifb-contact-list a,
.ifb-legal a {
	display: inline-block;
	padding: 3px 0;
}

/* Carousel dots: 24px tall button, visible bar drawn inside. */
.ifb-carousel-dot {
	position: relative;
	width: 24px;
	height: 24px;
	background: none;
}

.ifb-carousel-dot.is-active {
	width: 32px;
}

.ifb-carousel-dot::before {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: 11px;
	height: 2px;
	background: #8e9297; /* 3:1 contrast for UI elements (WCAG 1.4.11) */
}

.ifb-carousel-dot.is-active {
	background: none;
}

.ifb-carousel-dot.is-active::before {
	background: var(--ifb-red);
}

.ifb-carousel-prev,
.ifb-carousel-next {
	min-width: 44px;
	min-height: 32px;
}

/* Privacy checkbox a bit larger (the whole label is clickable as well). */
.ifb-cf7-privacy input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

body #page-container .ifb-cf7 .wpcf7-submit {
	min-height: 32px;
}

/* Tablet: 3-card rows ("Weitere Dienstleistungen") need tighter cards. */
@media (min-width: 768px) and (max-width: 980px) {
	.ifb-cards .ifb-card {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.ifb-cards .ifb-card h3 {
		font-size: 21px !important;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

/* ------------------------------------------------------------------
 * Phase 8: accessibility
 * ------------------------------------------------------------------ */

/* Text for screen readers only (form labels, skip link). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link: visible when focused with the keyboard. */
.ifb-skip-link:focus {
	position: fixed !important;
	top: 10px;
	left: 10px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 18px;
	background: var(--ifb-white);
	color: var(--ifb-heading);
	font-size: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Clear focus outline for keyboard users (not shown on mouse click). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.et_pb_toggle_title:focus-visible {
	outline: 2px solid var(--ifb-red) !important;
	outline-offset: 3px;
}

.ifb-on-dark a:focus-visible,
.ifb-footer a:focus-visible {
	outline-color: var(--ifb-white) !important;
}

/* Footer headings are h2 now (heading order) - keep the small look. */
.ifb-footer h2 {
	padding-bottom: 8px;
	font-size: 19px;
	line-height: 1.4;
	color: var(--ifb-white);
}

/* FAQ titles are h3 now - Divi styles toggle titles via the h3 element too. */
.ifb-faq h3.et_pb_toggle_title {
	padding-bottom: 0;
}