/* Landingpage-spezifisches Styling (Child-Theme) – volle Breite, Visitenkarten-Farben */

/* Astra: Inhalt auf dieser Seite wirklich volle Breite (ohne 920/1200px-Container) */
body.cib-psych-landing-page .site-content > .ast-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.cib-psych-landing-page #content.site-content {
	padding-bottom: 0;
	/* Astra-Standard ist oft Weiß — sonst sichtbare Naht vor dem Footer */
	background-color: var(--cib-bg);
}

/* Letzter Hauptabschnitt vor Footer: keine doppelte „Kante“, Übergang zur Wellenform */
body.cib-psych-landing-page section#kontakt.cib-pssb-section--alt {
	border-bottom: 0;
}

/* Wellen-Overlap leicht verstärken, um Subpixel-Lücken / helle Streifen zu überdecken */
body.cib-psych-landing-page .cib-pssb-site-footer-wave {
	transform: translateY(-3px);
	height: 52px;
}

/* Design-Tokens — Web-Mockup (assets/brand/cida-mockup-reference.png) */
body.cib-psych-landing-page {
	--cib-brand-cream: #f9f7f2;
	--cib-brand-surface: #ebe7df;
	--cib-brand-accent: #b8a089;
	--cib-brand-olive: #5d5e48;
	--cib-brand-heading: #2d2d2a;
	--cib-brand-body: #4a4a45;
	--cib-brand-white: #ffffff;

	--cib-header-bg: var(--cib-brand-white);

	/* Legacy-Basis → Mockup-Farben (bestehende Selektoren bleiben gültig) */
	--cib-berry: var(--cib-brand-accent);
	--cib-mauve-rose: var(--cib-brand-surface);
	--cib-blush: var(--cib-brand-cream);
	--cib-periwinkle: var(--cib-brand-surface);
	--cib-denim: var(--cib-brand-olive);
	--cib-ink: var(--cib-brand-heading);

	--cib-cream: var(--cib-blush);
	--cib-chocolate: var(--cib-ink);
	--cib-terracotta: var(--cib-berry);
	--cib-mauve: var(--cib-mauve-rose);

	--cib-bg: var(--cib-blush);
	--cib-surface: var(--cib-brand-surface);
	--cib-text: var(--cib-brand-heading);
	--cib-muted: var(--cib-brand-body);
	--cib-border: color-mix(in oklab, var(--cib-brand-accent) 58%, transparent);
	--cib-shadow: 0 22px 60px color-mix(in oklab, var(--cib-brand-heading) 12%, transparent);

	/* Akzent Taupe für Flächen/Kicker-Basis; Oliv für CTA und Fokus */
	--cib-primary: var(--cib-brand-accent);
	--cib-primary-strong: var(--cib-brand-olive);
	--cib-secondary: var(--cib-brand-olive);
	--cib-accent: var(--cib-periwinkle);

	--cib-plum: var(--cib-brand-olive);
	--cib-magenta: var(--cib-brand-accent);
	--cib-rose: var(--cib-mauve-rose);

	--cib-joy-green: var(--cib-brand-olive);
	--cib-joy-blue: var(--cib-brand-surface);
	--cib-joy-red: var(--cib-brand-accent);

	--cib-form-bg: color-mix(in oklab, var(--cib-brand-cream) 62%, var(--cib-brand-surface) 38%);
	--cib-form-required: var(--cib-primary-strong);
	--cib-form-submit: var(--cib-primary-strong);
	--cib-form-submit-hover: color-mix(in oklab, var(--cib-primary-strong) 82%, black 18%);
	--cib-header-height: 96px;

	/* Struktur-Anbindung Referenz ingridkoeberl.at (Squarespace tweakJSON: maxPageWidth 1300px, pagePadding 3vw) */
	--cib-pssb-content-max: 1300px;
	--cib-pssb-page-pad: clamp(16px, 3vw, 48px);

	/* Scroll-/Hero-Motion — Squarespace/ingridkoeberl.at: etwas mehr Weg, kürzere Staffel, „ease-out“-Gefühl */
	--cib-pssb-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--cib-pssb-reveal-duration: 0.78s;
	--cib-pssb-reveal-duration-stagger: 0.64s;
	--cib-pssb-reveal-y: 30px;
	--cib-pssb-reveal-y-stagger: 24px;

	/* Primär-CTA: Volumen + Glanz (Innenkanten + Verlauf) */
	--cib-primary-btn-depth: linear-gradient(
		168deg,
		color-mix(in oklab, var(--cib-brand-accent) 16%, var(--cib-primary-strong)) 0%,
		var(--cib-primary-strong) 44%,
		color-mix(in oklab, var(--cib-primary-strong) 82%, black 18%) 100%
	);
	--cib-primary-btn-depth-hover: linear-gradient(
		168deg,
		color-mix(in oklab, var(--cib-brand-accent) 10%, var(--cib-form-submit-hover)) 0%,
		var(--cib-form-submit-hover) 44%,
		color-mix(in oklab, var(--cib-form-submit-hover) 78%, black 22%) 100%
	);

	/* Leistungs-Karten + Ablauf-Schritte + FAQ-Karten (+ Legacy-Akkordeon): gemeinsamer Altrosa-Verlauf */
	--cib-pssb-altrosa-card-bg: linear-gradient(
		to right,
		color-mix(in oklab, #9d636d 22%, #c49a9e 78%) 0%,
		color-mix(in oklab, #d4aeb5 45%, var(--cib-brand-cream) 55%) 100%
	);
	--cib-pssb-altrosa-card-border: color-mix(in oklab, #b5828a 22%, var(--cib-border));
	--cib-pssb-altrosa-card-shadow: 0 18px 45px color-mix(in oklab, var(--cib-chocolate) 9%, transparent);
}

.cib-pssb-content-shell {
	width: 100%;
}

.cib-pssb {
	color: var(--cib-text);
	background: var(--cib-bg);
}

body.cib-psych-landing-page *:focus-visible,
.cib-pssb *:focus-visible,
.cib-pssb-site-header *:focus-visible,
.cib-pssb-site-footer *:focus-visible {
	outline: 2px solid var(--cib-primary-strong);
	outline-offset: 3px;
	border-radius: 8px;
}

/*
 * Skip-Link: muss beim Tastatur-Fokus oberhalb des sticky Site-Headers (z-index:100)
 * und – falls aktiv – der WP-Admin-Bar (z-index:99999) landen. Ohne explizite
 * Positionierung + hohes z-index wird der Link vom Header-Overlay abgefangen
 * (vgl. /website-test Befund WT-20260422-001).
 * Basis-Hiding übernimmt Astras `.screen-reader-text`; hier wird nur der
 * sichtbare Fokus-State hart überschrieben.
 */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 100001 !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	padding: 12px 20px !important;
	background: var(--cib-surface, #fff) !important;
	color: var(--cib-primary-strong, #5d5e48) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: underline !important;
	border: 2px solid var(--cib-primary-strong, #5d5e48) !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 20px color-mix(in oklab, #000 25%, transparent) !important;
	pointer-events: auto !important;
	opacity: 1 !important;
}

body.admin-bar .skip-link.screen-reader-text:focus,
body.admin-bar .skip-link.screen-reader-text:focus-visible {
	top: 44px !important;
}

/* Hintergrund-Scroll sperren, solange das Mobile-Menü offen ist */
/* Nur `body` sperren: `overflow:hidden` auf `html` + `position:sticky` + Filter/Backdrop
   kann in WebKit/Chromium den Header nach Menü/Anker-Interaktionen „verschwinden“ lassen. */
html.cib-pssb-nav-open {
	scrollbar-gutter: stable;
}

html.cib-pssb-nav-open body {
	overflow: hidden;
}

html.cib-pssb-modal-open {
	scrollbar-gutter: stable;
}

html.cib-pssb-modal-open body {
	overflow: hidden;
}

.cib-pssb-container {
	max-width: min(var(--cib-pssb-content-max), 100%);
	width: 100%;
	margin: 0 auto;
	padding-left: var(--cib-pssb-page-pad);
	padding-right: var(--cib-pssb-page-pad);
	box-sizing: border-box;
}

/* Site-Header (ersetzt die alte sticky Topnav im Main) */
.cib-pssb-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--cib-header-bg);
	border-bottom: 1px solid var(--cib-border);
	box-shadow: 0 10px 40px color-mix(in oklab, var(--cib-chocolate) 10%, transparent);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
	.cib-pssb-site-header {
		background: color-mix(in oklab, var(--cib-header-bg) 88%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
}

/*
 * Scroll-Lock setzt overflow auf `html`/`body`. In Kombination mit `position: sticky` +
 * `backdrop-filter` kann WebKit/Chromium den kompletten Header (inkl. `.cib-pssb-site-header-inner`)
 * fälschlich unsichtbar machen. Backdrop solange abschalten, bis das Menü zu ist.
 */
html.cib-pssb-nav-open .cib-pssb-site-header {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--cib-header-bg);
}

/* Gleicher Compositor-Fehler kann nach Menü-Schließen (kein html-Lock mehr) erneut auftreten — Mobile ohne Backdrop. */
@media (max-width: 922px) {
	.cib-pssb-site-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--cib-header-bg);
	}
}

/*
 * WordPress-Admin-Leiste (position: fixed, z-index sehr hoch): Sticky-Header mit top:0
 * schiebt sich darunter → Logo/Text wirken abgeschnitten. Offset = Toolbar-Höhe.
 * @see https://developer.wordpress.org/reference/functions/is_admin_bar_showing/
 */
body.admin-bar .cib-pssb-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .cib-pssb-site-header {
		top: 46px;
	}
}

.cib-pssb-site-header-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: linear-gradient(
		90deg,
		var(--cib-joy-green) 0%,
		var(--cib-joy-blue) 38%,
		var(--cib-joy-red) 72%,
		var(--cib-magenta) 100%
	);
	opacity: 0.85;
	pointer-events: none;
}

.cib-pssb-site-header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-rows: auto;
	align-items: center;
	column-gap: clamp(12px, 2.5vw, 28px);
	row-gap: 10px;
	padding: clamp(16px, 2.8vw, 24px) var(--cib-pssb-page-pad);
	max-width: min(var(--cib-pssb-content-max), 100%);
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.cib-pssb-site-brand {
	display: flex;
	align-items: center;
	gap: 0;
	text-decoration: none;
	color: var(--cib-text);
	min-width: 0;
	max-width: 100%;
	justify-self: start;
	grid-column: 1;
	grid-row: 1;
}

.cib-pssb-site-brand-logo {
	display: block;
	height: clamp(38px, 4.8vw, 46px);
	width: auto;
	max-width: min(300px, 65vw);
	object-fit: contain;
	object-position: left center;
}

.cib-pssb-site-brand-mark {
	display: inline-flex;
	gap: 6px;
	align-items: flex-end;
	height: 34px;
}

.cib-pssb-pillar {
	width: 10px;
	border-radius: 999px 999px 10px 10px;
	box-shadow: 0 6px 14px color-mix(in oklab, var(--cib-chocolate) 10%, transparent);
}

.cib-pssb-pillar--green {
	height: 28px;
	background: linear-gradient(180deg, var(--cib-joy-green), color-mix(in oklab, var(--cib-joy-green) 70%, var(--cib-cream)));
}

.cib-pssb-pillar--blue {
	height: 34px;
	background: linear-gradient(180deg, var(--cib-joy-blue), color-mix(in oklab, var(--cib-joy-blue) 70%, var(--cib-cream)));
}

.cib-pssb-pillar--red {
	height: 24px;
	background: linear-gradient(180deg, var(--cib-joy-red), color-mix(in oklab, var(--cib-joy-red) 70%, var(--cib-cream)));
}

.cib-pssb-site-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

.cib-pssb-site-brand-name {
	font-weight: 900;
	letter-spacing: -0.02em;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.25;
	overflow-wrap: break-word;
}

.cib-pssb-site-brand-tag {
	color: var(--cib-muted);
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.cib-pssb-site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	justify-content: center;
	justify-self: center;
	grid-column: 2;
	grid-row: 1;
}

.cib-pssb-site-header-aside {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	justify-self: end;
	grid-column: 3;
	grid-row: 1;
	gap: 14px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
}

/* Hamburger: nur Tablet/Mobil sichtbar */
.cib-pssb-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--cib-border);
	border-radius: 12px;
	background: color-mix(in oklab, var(--cib-surface) 92%, transparent);
	cursor: pointer;
	color: var(--cib-text);
	flex-shrink: 0;
}

.cib-pssb-nav-toggle:hover {
	background: color-mix(in oklab, var(--cib-magenta) 10%, transparent);
	border-color: color-mix(in oklab, var(--cib-magenta) 25%, var(--cib-border));
}

.cib-pssb-nav-toggle:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.cib-pssb-nav-toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cib-pssb-site-header.is-nav-open .cib-pssb-nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.cib-pssb-site-header.is-nav-open .cib-pssb-nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.cib-pssb-site-header.is-nav-open .cib-pssb-nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.cib-pssb-nav-toggle-bar {
		transition: none;
	}
}

.cib-pssb-site-header-phone {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--cib-muted);
	font-weight: 800;
	font-size: 0.92rem;
	line-height: 1.2;
	white-space: nowrap;
	min-height: 44px;
	padding: 0 8px;
}

.cib-pssb-site-header-phone:hover {
	color: var(--cib-magenta);
}

.cib-pssb-site-header-cta {
	padding: 12px 16px;
	min-height: 44px;
	white-space: normal;
	text-align: center;
	color: var(--cib-cream);
	font-size: 0.9rem;
	line-height: 1.2;
}

.cib-pssb-site-header-cta:link,
.cib-pssb-site-header-cta:visited,
.cib-pssb-site-header-cta:active,
.cib-pssb-site-header-cta:focus,
.cib-pssb-site-header-cta:focus-visible {
	color: var(--cib-cream);
}

.cib-pssb-site-header-cta:hover {
	color: var(--cib-cream);
	filter: brightness(1.04);
}

.cib-pssb-topnav-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	color: var(--cib-muted);
	font-weight: 800;
	font-size: 0.95rem;
	padding: 8px 12px;
	border-radius: 12px;
}

.cib-pssb-topnav-link:hover {
	background: color-mix(in oklab, var(--cib-magenta) 10%, transparent);
	color: var(--cib-text);
}

.cib-pssb-topnav-link.is-active,
.cib-pssb-topnav-link[aria-current="true"] {
	background: color-mix(in oklab, var(--cib-magenta) 16%, transparent);
	color: var(--cib-text);
}

/*
 * Zwischen 923–1100 px: dreispaltiges Desktop-Layout drückt die Marke stark ein.
 * Nav in die zweite Zeile legen → mehr Platz für Brand + CTA.
 * (Unter 923 px: kompaktes Mobil-Layout inkl. Hamburger — siehe max-width-922-Block.)
 */
@media (max-width: 1100px) and (min-width: 923px) {
	.cib-pssb-site-header-inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		row-gap: 10px;
	}

	.cib-pssb-site-brand {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}

	.cib-pssb-site-header-aside {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	.cib-pssb-site-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
		width: 100%;
		justify-content: center;
	}
}

/* 922px: Puffer für Scrollbar-Entfall bei overflow:hidden (sonst springt max-width-Query → Menü schließt sofort) */
@media (max-width: 922px) {
	/*
	 * Mobil: eine Zeile nur Marke + Hamburger; CTA darunter volle Breite (Aside `display:contents`
	 * → Toggle/CTA werden Grid-Kinder von inner, ohne Markup zu ändern).
	 */
	.cib-pssb-site-header-inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
		align-items: center;
	}

	.cib-pssb-site-brand {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
	}

	.cib-pssb-site-header-aside {
		grid-column: auto;
		grid-row: auto;
		display: contents;
		gap: 0;
	}

	.cib-pssb-nav-toggle {
		display: inline-flex;
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		justify-self: end;
	}

	.cib-pssb-site-header-cta {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
		width: 100%;
		max-width: none;
		box-sizing: border-box;
		padding: 12px 14px;
		min-height: 44px;
		font-size: 0.88rem;
		line-height: 1.25;
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
		text-align: center;
	}

	.cib-pssb-site-nav {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: stretch;
		justify-content: stretch;
		display: none;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 2px;
		padding: 4px 0 2px;
		margin-top: 2px;
		border-top: 1px solid var(--cib-border);
	}

	.cib-pssb-site-header.is-nav-open .cib-pssb-site-nav {
		display: flex;
		/* kein backdrop-filter: sonst doppelte Compositing-Kante zu Scroll-Lock (s. html.cib-pssb-nav-open) */
		background: var(--cib-header-bg);
	}

	.cib-pssb-topnav-link {
		padding: 12px 12px;
		border-radius: 10px;
		font-size: 1rem;
	}

	.cib-pssb-site-header-phone {
		display: none;
	}
}

/* Site-Footer */
.cib-pssb-site-footer {
	position: relative;
	margin-top: 0;
	color: var(--cib-cream);
	background: var(--cib-brand-olive);
	overflow: hidden;
}

.cib-pssb-site-footer-wave {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 48px;
	transform: translateY(-1px);
	background:
		radial-gradient(120% 120% at 50% 100%, transparent 55%, color-mix(in oklab, var(--cib-cream) 14%, transparent) 56%, transparent 57%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f9f7f2' d='M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z'/%3E%3C/svg%3E")
			center top / 100% 100% no-repeat;
	opacity: 1;
	pointer-events: none;
}

.cib-pssb-site-footer-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 1.2fr 0.9fr;
	gap: 22px;
	padding: 56px var(--cib-pssb-page-pad) 40px;
	max-width: min(var(--cib-pssb-content-max), 100%);
	width: min(100%, var(--cib-pssb-content-max));
	margin: 0 auto;
	box-sizing: border-box;
	align-items: start;
	justify-items: center;
	text-align: center;
}

@media (max-width: 991px) {
	.cib-pssb-site-footer-inner {
		grid-template-columns: 1fr;
		padding-top: 64px;
	}
}

.cib-pssb-site-footer-brand-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: min(100%, 340px);
	margin-inline: auto;
	box-sizing: border-box;
}

.cib-pssb-site-footer-partner-logos {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	padding: 5px 7px;
	background: color-mix(in oklab, var(--cib-cream) 94%, transparent);
	border-radius: 12px;
	border: 1px solid color-mix(in oklab, var(--cib-cream) 55%, var(--cib-brand-olive) 45%);
	box-shadow: 0 6px 16px color-mix(in oklab, var(--cib-ink) 14%, transparent);
	overflow: hidden;
}

.cib-pssb-site-footer-partner-img-frame {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border-radius: 6px;
	overflow: hidden;
	box-sizing: border-box;
}

.cib-pssb-site-footer-partner-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 991px) {
	.cib-pssb-site-footer-partner-logos {
		padding: 4px 6px;
		gap: 3px;
		border-radius: 12px;
		max-width: min(220px, 88vw);
		margin-inline: auto;
	}

	.cib-pssb-site-footer-partner-img-frame {
		height: 44px;
	}
}

.cib-pssb-site-footer-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: color-mix(in oklab, var(--cib-cream) 94%, transparent);
	border-radius: 18px;
	padding: 14px 18px;
	border: 1px solid color-mix(in oklab, var(--cib-cream) 55%, var(--cib-brand-olive) 45%);
	box-shadow: 0 10px 28px color-mix(in oklab, var(--cib-ink) 18%, transparent);
}

/* Desktop: brand column stays centered in left footer grid cell. */
@media (min-width: 992px) {
	.cib-pssb-site-footer-brand-col {
		flex-direction: column;
		align-self: center;
		justify-self: center;
		width: min(100%, 320px);
		max-width: min(100%, 320px);
	}

	.cib-pssb-site-footer-brand {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.cib-pssb-site-footer-partner-logos {
		flex: 0 1 auto;
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
		padding: 6px 8px;
		border-radius: 14px;
	}

	.cib-pssb-site-footer-partner-img-frame {
		height: 56px;
	}
}

.cib-pssb-site-footer-logo {
	display: block;
	height: clamp(36px, 4.5vw, 44px);
	width: auto;
	max-width: min(260px, 78vw);
	object-fit: contain;
	object-position: center;
}

.cib-pssb-site-footer-name {
	font-weight: 900;
	font-size: 1.1rem;
}

.cib-pssb-site-footer-role {
	opacity: 0.92;
	font-weight: 700;
	margin-top: 4px;
}

.cib-pssb-site-footer-contact {
	opacity: 0.95;
	line-height: 1.75;
	font-weight: 600;
	text-align: center;
}

.cib-pssb-site-footer-col-title {
	margin: 0 0 10px 0;
	font-size: 0.95rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.9;
}

.cib-pssb-site-footer-line {
	margin: 0 0 8px 0;
}

.cib-pssb-site-footer-contact a {
	color: var(--cib-cream);
	text-decoration: none;
	font-weight: 800;
	border-bottom: 1px solid color-mix(in oklab, var(--cib-cream) 38%, transparent);
}

.cib-pssb-site-footer-contact a:hover {
	border-bottom-color: color-mix(in oklab, var(--cib-cream) 82%, transparent);
}

@media (min-width: 992px) {
	.cib-pssb-site-footer-contact a[href^="mailto:"] {
		white-space: nowrap;
	}
}

.cib-pssb-site-footer-sep {
	margin: 0 8px;
	opacity: 0.7;
}

.cib-pssb-site-footer-meta {
	text-align: center;
}

@media (max-width: 991px) {
	.cib-pssb-site-footer-meta {
		text-align: center;
	}
}

.cib-pssb-site-footer-copy {
	margin: 0 0 8px 0;
	font-weight: 800;
	opacity: 0.95;
}

.cib-pssb-site-footer-links {
	margin: 0;
}

.cib-pssb-site-footer-links a {
	display: block;
	width: fit-content;
	margin: 0 auto 6px;
	color: var(--cib-cream);
	text-decoration: none;
	font-weight: 800;
	border-bottom: 1px solid color-mix(in oklab, var(--cib-cream) 38%, transparent);
}

.cib-pssb-site-footer-links a:last-child {
	margin-bottom: 0;
}

.cib-pssb-site-footer-links a:hover {
	border-bottom-color: color-mix(in oklab, var(--cib-cream) 82%, transparent);
}


.cib-pssb-section--padded {
	padding: 64px 0;
}

.cib-pssb-section--alt {
	background: color-mix(in oklab, var(--cib-magenta) 6%, var(--cib-bg));
	border-top: 1px solid var(--cib-border);
	border-bottom: 1px solid var(--cib-border);
}

.cib-pssb-section {
	scroll-margin-top: calc(var(--cib-header-height, 96px) + 12px);
}

/* Anker-Ziele: zusätzlich Platz, wenn Admin-Bar den Header nach unten schiebt */
body.admin-bar.cib-psych-landing-page .cib-pssb-section {
	scroll-margin-top: calc(var(--cib-header-height, 96px) + 32px + 12px);
}

@media screen and (max-width: 782px) {
	body.admin-bar.cib-psych-landing-page .cib-pssb-section {
		scroll-margin-top: calc(var(--cib-header-height, 96px) + 46px + 12px);
	}
}

@media (max-width: 767px) {
	.cib-pssb-section--padded {
		padding: 48px 0;
	}
}

.cib-pssb-hero {
	position: relative;
	margin: 0;
	padding: 0;
	background: transparent;
	overflow: clip;
}

.cib-pssb-eyebrow {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 14px 0;
	padding: 8px 12px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--cib-primary) 12%, var(--cib-surface));
	border: 1px solid color-mix(in oklab, var(--cib-primary) 22%, var(--cib-border));
	font-weight: 800;
	color: var(--cib-muted);
}

/* Hero-Banner (Referenz ingridkoeberl.at section#banner): Vollfläche, cover, Text links über Verlauf */
.cib-pssb-hero-banner {
	position: relative;
	min-height: clamp(420px, 76vh, 780px);
	display: flex;
	align-items: stretch;
}

.cib-pssb-hero-banner-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 69% 42%;
	display: block;
}

.cib-pssb-hero-banner-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			color-mix(in oklab, var(--cib-chocolate) 48%, transparent) 0%,
			color-mix(in oklab, var(--cib-chocolate) 26%, transparent) 38%,
			color-mix(in oklab, var(--cib-chocolate) 8%, transparent) 58%,
			transparent 100%
		),
		linear-gradient(
			180deg,
			color-mix(in oklab, var(--cib-chocolate) 28%, transparent) 0%,
			transparent 42%,
			color-mix(in oklab, var(--cib-chocolate) 16%, transparent) 100%
		);
}

.cib-pssb-hero-banner-inner.cib-pssb-container {
	position: relative;
	z-index: 2;
	flex: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-left: clamp(16px, 3vw, 40px);
	padding-right: clamp(16px, 3vw, 40px);
	padding-top: clamp(28px, 6vh, 72px);
	padding-bottom: clamp(18px, 2.8vw, 36px);
	box-sizing: border-box;
}

.cib-pssb-hero-banner-copy {
	max-width: min(560px, 100%);
	color: var(--cib-brand-cream);
	text-shadow:
		0 1px 2px color-mix(in oklab, var(--cib-chocolate) 45%, transparent),
		0 0 20px color-mix(in oklab, var(--cib-chocolate) 22%, transparent);
}

.cib-pssb-hero-banner .cib-pssb-hero-title {
	color: var(--cib-brand-cream);
	margin-bottom: 12px;
	/* Eine Stufe kleiner als globales `.cib-pssb-hero-title` (nur Banner-Copy) */
	font-size: clamp(1.875rem, 3.05vw, 2.55rem);
	line-height: 1.12;
}

.cib-pssb-hero-banner .cib-pssb-hero-subtitle {
	color: color-mix(in oklab, var(--cib-brand-cream) 92%, white 8%);
	opacity: 0.96;
	margin-bottom: 18px;
	font-size: 0.9375rem;
	line-height: 1.65;
}

@media (min-width: 992px) {
	.cib-pssb-hero-banner .cib-pssb-hero-subtitle {
		font-size: clamp(0.94rem, 1.08vw, 1.04rem);
		line-height: 1.68;
	}
}

.cib-pssb-hero-banner-subhead {
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	font-size: clamp(1.3rem, 5vw, 1.6rem);
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 12px 0;
	color: var(--cib-brand-cream);
}

@media (min-width: 992px) {
	.cib-pssb-hero-banner-subhead {
		font-size: clamp(1.62rem, 2.05vw, 2.18rem);
		line-height: 1.14;
	}
}

.cib-pssb-hero-banner-lead {
	margin: 0 0 22px 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: color-mix(in oklab, var(--cib-brand-cream) 90%, transparent);
	font-weight: 600;
}

@media (min-width: 992px) {
	.cib-pssb-hero-banner-lead {
		font-size: clamp(0.94rem, 1.08vw, 1.04rem);
		line-height: 1.68;
	}
}

.cib-pssb-btn--banner {
	min-height: 44px;
	padding: 12px 18px;
	font-weight: 800;
	border-radius: 10px;
	text-decoration: none;
	border: 1px solid color-mix(in oklab, var(--cib-brand-cream) 55%, var(--cib-chocolate) 45%);
	background: color-mix(in oklab, var(--cib-brand-surface) 94%, var(--cib-brand-cream) 6%);
	color: var(--cib-brand-heading);
	box-shadow:
		0 8px 24px color-mix(in oklab, var(--cib-chocolate) 24%, transparent),
		inset 0 1px 0 color-mix(in oklab, white 38%, transparent);
}

.cib-pssb-btn--banner:link,
.cib-pssb-btn--banner:visited {
	color: var(--cib-brand-heading);
}

.cib-pssb-btn--banner:hover,
.cib-pssb-btn--banner:focus-visible {
	background: var(--cib-brand-cream);
	color: var(--cib-brand-heading);
	border-color: color-mix(in oklab, var(--cib-brand-cream) 70%, var(--cib-chocolate) 30%);
}

.cib-pssb-btn--banner:active {
	color: var(--cib-brand-heading);
}

.cib-pssb-hero-banner-copy .cib-pssb-btn--banner {
	font-size: 0.9375rem;
}

@media (max-width: 991px) {
	.cib-pssb-hero-banner-photo {
		/* Schmale Viewports: Mitte des Motivs (Hero_neu) — weder links noch rechts dominieren lassen */
		object-position: 50% 40%;
	}

	.cib-pssb-hero-banner-inner.cib-pssb-container {
		align-items: stretch;
		text-align: left;
	}

	.cib-pssb-hero-banner-copy {
		text-align: left;
		width: 100%;
		max-width: min(560px, 100%);
	}

	.cib-pssb-hero-actions {
		justify-content: center;
		width: 100%;
	}

	.cib-pssb-hero-banner-overlay {
		background: linear-gradient(
			165deg,
			color-mix(in oklab, var(--cib-chocolate) 46%, transparent) 0%,
			color-mix(in oklab, var(--cib-chocolate) 24%, transparent) 48%,
			color-mix(in oklab, var(--cib-chocolate) 12%, transparent) 100%
		);
	}

	.cib-pssb-hero-banner {
		min-height: min(88vh, 720px);
	}
}

.cib-pssb-hero-title {
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: clamp(2rem, 3.2vw, 2.7rem);
	line-height: 1.12;
	margin: 0 0 14px 0;
}

.cib-pssb-hero-subtitle {
	margin: 0 0 22px 0;
	color: var(--cib-muted);
	font-size: 1rem;
	line-height: 1.68;
}

@media (min-width: 992px) {
	.cib-pssb-hero-subtitle {
		font-size: clamp(1.02rem, 1.18vw, 1.12rem);
		line-height: 1.72;
	}
}

.cib-pssb-hero-media {
	position: relative;
	height: 250px;
	background: color-mix(in oklab, var(--cib-primary) 10%, var(--cib-surface));
}

.cib-pssb-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Porträt-Slots (Vorlage: ingridkoeberl.at — Bild zentriert, contain, kein harter Rand-Crop) */
.cib-pssb-portrait-slot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: min(48vw, 320px);
	padding: clamp(10px, 2vw, 18px);
	background: color-mix(in oklab, var(--cib-primary) 6%, var(--cib-surface));
}

.cib-pssb-portrait-slot img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(68vh, 500px);
	object-fit: contain;
	object-position: center;
	display: block;
	margin-inline: auto;
}

@media (max-width: 991px) {
	.cib-pssb-portrait-slot {
		min-height: min(62vw, 280px);
	}

	.cib-pssb-portrait-slot img {
		max-height: min(58vh, 440px);
	}
}

@media (max-width: 600px) {
	.cib-pssb-portrait-slot img {
		max-height: min(52vh, 400px);
	}
}

.cib-pssb-hero-media-placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 260px at 0% 0%, color-mix(in oklab, var(--cib-primary) 22%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, color-mix(in oklab, var(--cib-primary) 8%, var(--cib-surface)) 0%, var(--cib-surface) 100%);
}

.cib-pssb-panel-title {
	font-size: 1.15rem;
	margin: 0 0 10px 0;
}

.cib-pssb-panel-text {
	margin: 0 0 12px 0;
	color: var(--cib-muted);
	line-height: 1.7;
}

.cib-pssb-panel-note {
	margin: 14px 0 0 0;
	color: var(--cib-text);
	font-weight: 600;
	background: color-mix(in oklab, var(--cib-primary) 12%, var(--cib-surface));
	border: 1px solid color-mix(in oklab, var(--cib-primary) 25%, var(--cib-border));
	border-radius: 14px;
	padding: 10px 12px;
}

.cib-pssb-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

/* Hero: dezenter Einstieg (nur wenn Bewegung erlaubt) */
@media (prefers-reduced-motion: no-preference) {
	@keyframes cib-pssb-hero-in {
		from {
			opacity: 0;
			transform: translateY(var(--cib-pssb-reveal-y));
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.cib-pssb-hero-banner .cib-pssb-hero-reveal {
		opacity: 0;
		animation: cib-pssb-hero-in 0.82s var(--cib-pssb-reveal-ease) forwards;
		animation-delay: 0.1s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cib-pssb-hero-banner .cib-pssb-hero-reveal {
		opacity: 1;
		animation: none;
	}
}

.cib-pssb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 12px;
	padding: 12px 16px;
	font-weight: 700;
	transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
	-webkit-tap-highlight-color: transparent;
}

.cib-pssb-btn {
	min-height: 44px;
}

.cib-pssb-btn:active {
	transform: translateY(1px);
	filter: brightness(0.96);
}

.cib-pssb-btn:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.cib-pssb-btn:active {
		transform: none;
	}
}

.cib-pssb-btn--primary {
	background-color: var(--cib-primary-strong);
	background-image: var(--cib-primary-btn-depth);
	color: var(--cib-cream);
	border: 1px solid color-mix(in oklab, var(--cib-ink) 10%, transparent);
	box-shadow:
		0 16px 34px color-mix(in oklab, var(--cib-primary-strong) 28%, transparent),
		inset 0 1px 0 color-mix(in oklab, white 22%, transparent),
		inset 0 -2px 0 color-mix(in oklab, black 18%, transparent);
}

.cib-pssb-btn--primary:link,
.cib-pssb-btn--primary:visited {
	color: var(--cib-cream);
}

.cib-pssb-btn--primary:hover,
.cib-pssb-btn--primary:focus-visible {
	background-color: var(--cib-form-submit-hover);
	background-image: var(--cib-primary-btn-depth-hover);
	color: var(--cib-cream);
	box-shadow:
		0 18px 36px color-mix(in oklab, var(--cib-form-submit-hover) 30%, transparent),
		inset 0 1px 0 color-mix(in oklab, white 16%, transparent),
		inset 0 -2px 0 color-mix(in oklab, black 24%, transparent);
}

.cib-pssb-btn--primary:active,
.cib-pssb-btn--primary:active:visited {
	color: var(--cib-cream);
}

.cib-pssb-btn--primary:focus:not(:focus-visible),
.cib-pssb-btn--primary:focus:not(:focus-visible):visited {
	color: var(--cib-cream);
}

.cib-pssb-btn--ghost {
	background: transparent;
	color: var(--cib-text);
	border: 1px solid var(--cib-border);
}

.cib-pssb-btn--ghost:hover,
.cib-pssb-btn--ghost:focus-visible {
	border-color: color-mix(in oklab, var(--cib-magenta) 45%, var(--cib-border));
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--cib-joy-blue) 18%, transparent);
}

.cib-pssb-section-head {
	margin-bottom: 26px;
}

.cib-pssb-kicker {
	margin: 0 0 10px 0;
	color: color-mix(in oklab, var(--cib-brand-accent) 34%, var(--cib-brand-heading) 66%);
	font-weight: 800;
	font-size: 0.74rem;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

/*
 * SUP-TYPO-UNIFY-001 — Fließtext & Überschriften wie „Über mich“-Panel (Serif-H2, Panel-Lead-Rhythmus).
 * Gilt für den gesamten OnePager unter `.cib-pssb` (Lesbarkeit, Farben via Tokens, einheitliche Größen).
 */
.cib-pssb-section-title {
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: clamp(1.42rem, 5.4vw, 1.72rem);
	line-height: 1.22;
	margin: 0 0 10px 0;
}

@media (min-width: 992px) {
	.cib-pssb-section-title {
		font-size: clamp(1.75rem, 2.2vw, 2.35rem);
		line-height: 1.14;
	}
}

.cib-pssb-section-lead {
	margin: 0;
	color: var(--cib-muted);
	font-size: 1rem;
	line-height: 1.68;
}

@media (min-width: 992px) {
	.cib-pssb-section-lead {
		font-size: clamp(1.02rem, 1.18vw, 1.12rem);
		line-height: 1.72;
	}
}

.cib-pssb-card-text,
.cib-pssb-step-text,
.cib-pssb-faq-card-answer,
.cib-pssb-aside-text,
.cib-pssb-cta-microcopy,
.cib-pssb-price-line,
.cib-pssb-contact-line,
.cib-pssb-trust-list li,
.cib-pssb-inline-note {
	font-size: 1rem;
	line-height: 1.68;
}

@media (min-width: 992px) {
	.cib-pssb-card-text,
	.cib-pssb-step-text,
	.cib-pssb-faq-card-answer,
	.cib-pssb-aside-text,
	.cib-pssb-cta-microcopy,
	.cib-pssb-price-line,
	.cib-pssb-contact-line,
	.cib-pssb-trust-list li,
	.cib-pssb-inline-note {
		font-size: clamp(1.02rem, 1.18vw, 1.12rem);
		line-height: 1.72;
	}
}

.cib-pssb-card-title,
.cib-pssb-step-title,
.cib-pssb-faq-card-question {
	margin: 0 0 8px 0;
	font-weight: 700;
	letter-spacing: -0.015em;
	font-size: clamp(1.08rem, 1.2vw, 1.2rem);
	line-height: 1.28;
	color: var(--cib-text);
}

.cib-pssb-aside-title {
	margin: 0 0 16px 0;
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: clamp(1.25rem, 1.5vw, 1.42rem);
	line-height: 1.22;
	color: var(--cib-text);
}

.cib-pssb-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 991px) {
	.cib-pssb-cards {
		grid-template-columns: 1fr;
	}
}

.cib-pssb-card {
	background: var(--cib-surface);
	border: 1px solid var(--cib-border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 10px 30px color-mix(in oklab, var(--cib-chocolate) 8%, transparent);
	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease,
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
	.cib-pssb-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 44px color-mix(in oklab, var(--cib-chocolate) 12%, transparent);
	}
}

.cib-pssb-cards--services .cib-pssb-card {
	background: var(--cib-pssb-altrosa-card-bg);
	border-color: var(--cib-pssb-altrosa-card-border);
	box-shadow: var(--cib-pssb-altrosa-card-shadow);
}

/* Leistungen — Mobile: Kopf, Karteninhalt, CTA und Microcopy zentriert */
@media (max-width: 991px) {
	section#leistungen .cib-pssb-section-head {
		text-align: center;
	}

	section#leistungen .cib-pssb-card {
		box-sizing: border-box;
		width: 100%;
		max-width: 65%;
		justify-self: center;
		text-align: center;
	}

	section#leistungen .cib-pssb-cta-row {
		justify-content: center;
		width: 100%;
	}

	section#leistungen .cib-pssb-cta-microcopy {
		text-align: center;
	}
}

/* Ablauf & Preis — Mobile: Kopf, Schritte, Preiszeile, CTA und Microcopy zentriert */
@media (max-width: 991px) {
	section#ablauf-preis .cib-pssb-section-head {
		text-align: center;
	}

	section#ablauf-preis .cib-pssb-steps {
		justify-items: center;
	}

	section#ablauf-preis .cib-pssb-step {
		box-sizing: border-box;
		width: 100%;
		max-width: 65%;
		justify-self: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	section#ablauf-preis .cib-pssb-price-line {
		text-align: center;
	}

	section#ablauf-preis .cib-pssb-cta-row {
		justify-content: center;
		width: 100%;
	}

	section#ablauf-preis .cib-pssb-cta-microcopy {
		text-align: center;
	}
}

/* FAQ — Raster + Karten (Kartenaufbau wie `.cib-pssb-step`) */
.cib-pssb-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
	max-width: 1100px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

/* FAQ — Karten: gleicher Aufbau wie `.cib-pssb-step` (Altrosa-Fläche, Icon-Kachel, zentrierte Spalte) */
.cib-pssb-faq-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--cib-pssb-altrosa-card-bg);
	border: 1px solid var(--cib-pssb-altrosa-card-border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: var(--cib-pssb-altrosa-card-shadow);
	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease,
		opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
	.cib-pssb-faq-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 18px 44px color-mix(in oklab, var(--cib-chocolate) 12%, transparent);
	}
}

/* Entspricht `.cib-pssb-step-num`: Kachel + zentriertes Linien-Icon */
.cib-pssb-faq-card-icon {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	margin: 0 0 10px;
	background-color: color-mix(in oklab, var(--cib-primary) 20%, transparent);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

/* Icon-Linie: Oliv (--cib-brand-olive), konsistent zu Schritt-Icons */
.cib-pssb-faq-card-icon--question {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%235d5e48' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round' d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath stroke='%235d5e48' stroke-width='1.35' stroke-linecap='round' d='M12 17h.01'/%3E%3C/svg%3E");
}

.cib-pssb-faq-card-icon--wallet {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%235d5e48' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round' d='M19 8V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2'/%3E%3Cpath stroke='%235d5e48' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round' d='M5 8h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z'/%3E%3Cpath stroke='%235d5e48' stroke-width='1.35' stroke-linecap='round' d='M16 14h.01'/%3E%3C/svg%3E");
}

.cib-pssb-faq-card-answer {
	margin: 0;
	color: var(--cib-muted);
}

@media (max-width: 767px) {
	.cib-pssb-faq-grid {
		grid-template-columns: 1fr;
	}
}

/* FAQ — Mobile: Raster + Kopf zentriert; Kartenbreite wie Ablauf-Schritte */
@media (max-width: 991px) {
	section#faq .cib-pssb-section-head {
		text-align: center;
	}

	section#faq .cib-pssb-faq-grid {
		margin-left: auto;
		margin-right: auto;
		justify-items: center;
	}

	section#faq .cib-pssb-faq-card {
		box-sizing: border-box;
		width: 100%;
		max-width: 65%;
		justify-self: center;
	}
}

.cib-pssb-split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(18px, 2.8vw, 36px);
	align-items: start;
}

@media (max-width: 991px) {
	.cib-pssb-split {
		grid-template-columns: 1fr;
	}
}

.cib-pssb-split-card {
	background: var(--cib-surface);
	border: 1px solid var(--cib-border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 18px 50px color-mix(in oklab, var(--cib-chocolate) 9%, transparent);
}

/* Über mich — Mobile: Portrait in der Content-Spur (Seitenabstand wie Referenz, kein Edge-to-Edge); darunter durchgehende Panel-Fläche. Desktop: Flächensplit + zweispaltige Collage. */
.cib-pssb-ueber-mich-section.cib-pssb-section--padded {
	padding-top: 0;
	padding-bottom: 0;
}

.cib-pssb-ueber-mich-section {
	overflow-x: hidden;
	background: var(--cib-brand-white);
	border-top: 1px solid color-mix(in oklab, var(--cib-border) 40%, transparent);
	border-bottom: 1px solid color-mix(in oklab, var(--cib-border) 40%, transparent);
}

/* Mobile: gleiche Flächenfarbe wie folgende Sektion (#leistungen, --alt) — vermeidet weißen Streifen unter dem Panel / Shell-Padding */
@media (max-width: 991px) {
	.cib-pssb-ueber-mich-section {
		background: color-mix(in oklab, var(--cib-magenta) 6%, var(--cib-bg));
	}
}

@media (min-width: 992px) {
	.cib-pssb-ueber-mich-section {
		background: linear-gradient(
			90deg,
			color-mix(in oklab, var(--cib-brand-surface) 70%, var(--cib-brand-white) 30%) 0%,
			color-mix(in oklab, var(--cib-brand-surface) 70%, var(--cib-brand-white) 30%) 50%,
			var(--cib-brand-white) 50%,
			var(--cib-brand-white) 100%
		);
	}
}

.cib-pssb-ueber-mich-shell {
	position: relative;
	z-index: 0;
	padding-top: clamp(1.25rem, calc(10vmax / 10), 2.25rem);
	padding-bottom: clamp(1.25rem, calc(10vmax / 10), 2.25rem);
	box-sizing: border-box;
}

.cib-pssb-ueber-mich-shell > .cib-pssb-container {
	position: relative;
	z-index: 1;
}

.cib-pssb-ueber-mich-collage {
	grid-template-columns: 1fr;
	gap: 0;
	align-items: stretch;
}

@media (min-width: 992px) {
	.cib-pssb-ueber-mich-collage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: clamp(18px, 3vw, 42px);
		align-items: center;
	}
}

/* Mobile: Bild bleibt in der gepaddeten Container-Spur — Abstand zum Bildschirmrand; Portrait etwas schmaler, zentriert (Referenz mobil). */
.cib-pssb-ueber-mich-photo {
	align-self: stretch;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: none;
	min-width: 0;
	padding: clamp(8px, 2vw, 14px) 0 clamp(6px, 1.5vw, 12px);
}

@media (min-width: 992px) {
	.cib-pssb-ueber-mich-photo {
		justify-content: flex-end;
		align-items: center;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: none;
		padding: clamp(12px, 2vw, 28px) clamp(4px, 1vw, 12px) clamp(12px, 2vw, 28px) 0;
	}
}

.cib-pssb-ueber-mich-photo-frame {
	position: relative;
	width: min(100%, 86vw);
	max-width: min(420px, 100%);
	margin: 0 auto;
	aspect-ratio: 3 / 4;
	border-radius: 0;
	border: none;
	box-shadow: none;
	background: transparent;
	overflow: hidden;
}

@media (min-width: 992px) {
	.cib-pssb-ueber-mich-photo-frame {
		width: 100%;
		max-width: min(380px, 100%);
		margin: 0;
	}
}

.cib-pssb-ueber-mich-photo-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

/* Mobile: volle Breite, Fläche unter dem Bild; Desktop: Karte mit Schatten + Überstand */
.cib-pssb-ueber-mich-panel {
	position: relative;
	margin-left: calc(-1 * var(--cib-pssb-page-pad));
	margin-right: calc(-1 * var(--cib-pssb-page-pad));
	margin-top: 0;
	z-index: auto;
	border-radius: 0;
	border: none;
	box-shadow: none;
	background: color-mix(in oklab, var(--cib-brand-surface) 38%, var(--cib-brand-white) 62%);
	padding: clamp(26px, 7vw, 36px) var(--cib-pssb-page-pad) clamp(28px, 7.5vw, 40px);
	text-align: center;
	min-width: 0;
}

@media (min-width: 992px) {
	.cib-pssb-ueber-mich-panel {
		margin-left: clamp(-40px, -3vw, -20px);
		margin-right: 0;
		border-radius: 16px;
		box-shadow: 0 18px 50px color-mix(in oklab, var(--cib-chocolate) 9%, transparent);
		padding: clamp(28px, 3.2vw, 44px) clamp(22px, 3vw, 40px);
		z-index: 2;
		text-align: left;
	}
}

.cib-pssb-ueber-mich-panel-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-width: 0;
}

@media (min-width: 992px) {
	.cib-pssb-ueber-mich-panel-inner {
		align-items: flex-start;
	}
}

.cib-pssb-ueber-mich-panel .cib-pssb-kicker {
	margin-bottom: 14px;
}

.cib-pssb-ueber-mich-panel-title {
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	font-weight: 700;
	font-size: clamp(1.42rem, 2.2vw, 1.85rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
}

.cib-pssb-ueber-mich-panel .cib-pssb-section-lead {
	margin-bottom: 0;
	max-width: 36rem;
	margin-left: 0;
	margin-right: 0;
}

.cib-pssb-ueber-mich-panel .cib-pssb-checklist {
	margin-top: 18px;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

@media (min-width: 992px) {
	.cib-pssb-ueber-mich-panel .cib-pssb-checklist {
		margin-left: 0;
		margin-right: 0;
	}
}

.cib-pssb-ueber-mich-panel-cta {
	margin-top: 22px;
	display: flex;
	justify-content: center;
	width: 100%;
}

@media (min-width: 992px) {
	.cib-pssb-ueber-mich-panel-cta {
		justify-content: flex-start;
		width: auto;
	}
}

.cib-pssb-ueber-mich-panel-cta .cib-pssb-btn {
	width: auto;
	max-width: 100%;
	justify-content: center;
	text-align: center;
}

.cib-pssb-extra-text {
	margin-top: 18px;
}

.cib-pssb-checklist {
	margin: 12px 0 0 0;
	padding-left: 0;
	list-style: none;
	color: var(--cib-muted);
	font-size: 1rem;
	line-height: 1.68;
}

@media (min-width: 992px) {
	.cib-pssb-checklist {
		font-size: clamp(1.02rem, 1.18vw, 1.12rem);
		line-height: 1.72;
	}
}

.cib-pssb-checklist li {
	position: relative;
	padding-left: 28px;
}

.cib-pssb-checklist li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cib-primary-strong);
	font-weight: 900;
}

.cib-pssb-mini-note {
	margin: 14px 0 0 0;
	font-weight: 700;
	color: var(--cib-text);
	background: color-mix(in oklab, var(--cib-primary) 10%, var(--cib-surface));
	border: 1px solid color-mix(in oklab, var(--cib-primary) 18%, var(--cib-border));
	border-radius: 14px;
	padding: 10px 12px;
}

.cib-pssb-card-text {
	margin: 0;
	color: var(--cib-muted);
}

.cib-pssb-bullets-list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--cib-muted);
	line-height: 1.9;
}

.cib-pssb-inline-note {
	margin-top: 20px;
	margin-bottom: 0;
	font-weight: 600;
	color: var(--cib-text);
}

.cib-pssb-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.cib-pssb-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 991px) {
	.cib-pssb-steps {
		grid-template-columns: 1fr;
	}
}

.cib-pssb-step {
	/* Altrosa wie Leistungs-Karten / FAQ (Token `--cib-pssb-altrosa-card-*`) */
	background: var(--cib-pssb-altrosa-card-bg);
	border: 1px solid var(--cib-pssb-altrosa-card-border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: var(--cib-pssb-altrosa-card-shadow);
	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease,
		opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
	.cib-pssb-step:hover {
		transform: translateY(-2px);
		box-shadow: 0 18px 44px color-mix(in oklab, var(--cib-chocolate) 12%, transparent);
	}
}

.cib-pssb-step-num {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: color-mix(in oklab, var(--cib-primary) 20%, transparent);
	color: var(--cib-primary-strong);
	margin-bottom: 10px;
}

.cib-pssb-step-num svg {
	width: 22px;
	height: 22px;
	display: block;
}

.cib-pssb-step-text {
	margin: 0;
	color: var(--cib-muted);
}

.cib-pssb-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

.cib-pssb-contact-grid > div {
	max-width: none;
	width: 100%;
	margin: 0 auto;
}

.cib-pssb-contact-grid .cib-pssb-contact-aside {
	max-width: none;
	width: 100%;
	margin: 0 auto;
}

.cib-pssb-modal {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 28px);
}

.cib-pssb-modal.is-open {
	display: flex;
}

.cib-pssb-modal-backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in oklab, var(--cib-chocolate) 60%, transparent);
}

.cib-pssb-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 760px);
	max-height: calc(100vh - 32px);
	overflow: auto;
	border-radius: 20px;
	box-shadow: 0 20px 58px color-mix(in oklab, var(--cib-chocolate) 35%, transparent);
}

.cib-pssb-modal-close {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 42px;
	height: 42px;
	border: 1px solid color-mix(in oklab, var(--cib-primary) 24%, var(--cib-border));
	border-radius: 12px;
	background: color-mix(in oklab, var(--cib-brand-cream) 78%, var(--cib-brand-white) 22%);
	color: color-mix(in oklab, var(--cib-brand-heading) 88%, var(--cib-muted) 12%);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	padding: 0;
	isolation: isolate;
	box-shadow:
		0 6px 14px color-mix(in oklab, var(--cib-chocolate) 10%, transparent),
		inset 0 1px 0 color-mix(in oklab, white 18%, transparent);
	transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease, color 150ms ease;
}

.cib-pssb-modal-close > span {
	/* Keep text node for fallback semantics, but draw icon via CSS for consistent rendering. */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cib-pssb-modal-close::before,
.cib-pssb-modal-close::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 2.4px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--cib-brand-heading) 90%, black 10%);
	transform-origin: center;
}

.cib-pssb-modal-close::before {
	transform: rotate(45deg);
}

.cib-pssb-modal-close::after {
	transform: rotate(-45deg);
}

.cib-pssb-modal-close:hover {
	background: color-mix(in oklab, var(--cib-primary) 14%, var(--cib-brand-white));
	border-color: color-mix(in oklab, var(--cib-primary-strong) 35%, var(--cib-border));
	color: var(--cib-brand-heading);
}

.cib-pssb-modal-close:active {
	transform: translateY(1px);
	background: color-mix(in oklab, var(--cib-primary) 20%, var(--cib-brand-white));
}

.cib-pssb-modal-close:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
	background: color-mix(in oklab, var(--cib-brand-cream) 78%, var(--cib-brand-white) 22%);
}

.cib-pssb-modal-close:focus-visible {
	outline: 2px solid var(--cib-primary-strong);
	outline-offset: 3px;
	box-shadow:
		0 0 0 1px color-mix(in oklab, var(--cib-primary) 18%, transparent),
		0 8px 18px color-mix(in oklab, var(--cib-chocolate) 14%, transparent);
	background: color-mix(in oklab, var(--cib-primary) 16%, var(--cib-brand-white));
	color: var(--cib-brand-heading);
}

.cib-pssb-contact-box {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-top: 16px;
}

.cib-pssb-contact-line {
	margin: 0 0 10px 0;
}

.cib-pssb-contact-line strong {
	font-weight: 700;
}

.cib-pssb-contact-line-value {
	min-width: 0;
}

@media (max-width: 480px) {
	.cib-pssb-contact-line strong {
		display: block;
		margin-bottom: 2px;
	}
}

.cib-pssb-link {
	color: var(--cib-primary-strong);
	text-decoration: none;
	font-weight: 700;
}

.cib-pssb-link:hover {
	text-decoration: underline;
}

/* Kontaktbereich: Hero-ahnliche Komposition (Text links, Bild rechts) */
.cib-pssb-contact-media {
	height: 320px;
	border-radius: 0;
	overflow: hidden;
	/* Eigene Fläche: sonst bleibt `background-color` von `.cib-pssb-hero-media` (kühler Ton) sichtbar */
	background-color: color-mix(in oklab, var(--cib-magenta) 6%, var(--cib-bg));
	background-image: url("../img/kontakt-bild1.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 24%;
	position: relative;
}

.cib-pssb-contact-media .cib-pssb-hero-media-placeholder {
	display: none;
}

/* Kein Aufhell-/Abdeck-Verlauf mehr — Foto wirkt klar; Fokus auf Personen (oberes Bild-Drittel). */
.cib-pssb-contact-media::before,
.cib-pssb-contact-media::after {
	content: none;
	display: none;
}

@media (max-width: 991px) {
	/* Kontakt — schmale Viewports: alle Texte & CTA zentriert */
	section#kontakt .cib-pssb-contact-grid > div {
		text-align: center;
	}

	section#kontakt .cib-pssb-cta-row {
		justify-content: center;
		width: 100%;
	}

	section#kontakt .cib-pssb-cta-microcopy {
		text-align: center;
	}

	section#kontakt .cib-pssb-contact-box {
		width: 100%;
	}

	section#kontakt .cib-pssb-contact-line {
		text-align: center;
		overflow-wrap: break-word;
	}

	section#kontakt .cib-pssb-contact-line strong {
		display: block;
		margin-bottom: 4px;
	}

	.cib-pssb-contact-media {
		height: clamp(300px, 56vw, 420px);
		background-size: contain;
		background-color: color-mix(in oklab, var(--cib-magenta) 6%, var(--cib-bg));
		background-position: center center;
	}
}

@media (min-width: 992px) {
	.cib-pssb-contact-grid > div {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(22px, 3vw, 44px);
		row-gap: clamp(10px, 1.1vw, 16px);
		max-width: none;
		align-items: start;
	}

	.cib-pssb-contact-grid > div > .cib-pssb-kicker,
	.cib-pssb-contact-grid > div > .cib-pssb-section-title,
	.cib-pssb-contact-grid > div > .cib-pssb-section-lead,
	.cib-pssb-contact-grid > div > .cib-pssb-contact-box,
	.cib-pssb-contact-grid > div > .cib-pssb-inline-note {
		grid-column: 1;
		max-width: none;
	}

	.cib-pssb-contact-grid > div > .cib-pssb-contact-media {
		grid-column: 2;
		grid-row: 1 / 6;
		align-self: start;
		width: 100%;
		border-radius: 0;
		height: auto;
		min-height: clamp(500px, 52vw, 680px);
		margin: 0;
		background-size: contain;
		background-position: center center;
		background-color: color-mix(in oklab, var(--cib-magenta) 6%, var(--cib-bg));
	}

	.cib-pssb-contact-grid > div > .cib-pssb-contact-box {
		max-width: none;
	}

	/* Einheitlicher Abstand Label → Wert (kein fixes 110px); Werte umbrechen nur in Spalte 2 */
	section#kontakt .cib-pssb-contact-line {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		column-gap: 0.65rem;
		align-items: start;
	}

	section#kontakt .cib-pssb-contact-line strong {
		display: block;
	}

	.cib-pssb-contact-grid > div > .cib-pssb-inline-note {
		margin-top: 4px;
	}

	.cib-pssb-contact-grid .cib-pssb-contact-aside {
		max-width: none;
	}
}

/* Kontakt — Desktop: Sektion vertikal kompakter (gleiche Komponenten, weniger Luft) */
@media (min-width: 992px) {
	section#kontakt.cib-pssb-section--padded {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	section#kontakt .cib-pssb-contact-grid > div {
		row-gap: clamp(6px, 0.75vw, 12px);
	}

	section#kontakt .cib-pssb-contact-grid > div > .cib-pssb-contact-media {
		min-height: clamp(300px, 36vw, 460px);
	}

	section#kontakt .cib-pssb-kicker {
		margin-bottom: 6px;
	}

	section#kontakt .cib-pssb-section-title {
		margin-bottom: 6px;
	}

	section#kontakt .cib-pssb-contact-box {
		margin-top: 10px;
	}

	section#kontakt .cib-pssb-contact-line {
		margin-bottom: 6px;
	}

	section#kontakt .cib-pssb-contact-line:last-child {
		margin-bottom: 0;
	}

	section#kontakt .cib-pssb-cta-row {
		margin-top: 12px;
	}

	section#kontakt .cib-pssb-cta-microcopy {
		margin-top: 4px;
	}
}

.cib-pssb-contact-aside {
	background: var(--cib-surface);
	border: 1px solid var(--cib-border);
	border-radius: 18px;
	padding: 22px 22px 24px;
	box-shadow: 0 10px 30px color-mix(in oklab, var(--cib-chocolate) 8%, transparent);
}

.cib-pssb-contact-aside--modal {
	padding-top: 56px;
}

.cib-pssb-aside-text {
	margin: 0;
	color: var(--cib-muted);
	font-weight: 600;
}

/* Kontaktformular: eine Fläche mit dem Aside (kein „Kasten im Kasten“) */
.cib-pssb-contact-form {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

.cib-pssb-contact-form-stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cib-pssb-contact-form .cib-pssb-form-field,
.cib-pssb-contact-form .cib-pssb-form-fieldset {
	margin-bottom: 0;
}

.cib-pssb-contact-form-notice {
	margin: 0 0 18px 0;
	padding: 12px 16px;
	border-radius: 12px;
	font-weight: 700;
	line-height: 1.45;
}

.cib-pssb-contact-form-notice:focus-visible {
	outline: 2px solid var(--cib-primary);
	outline-offset: 3px;
}

.cib-pssb-form-field-error {
	margin: 0 0 8px 0;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cib-text);
	background: color-mix(in oklab, var(--cib-joy-red) 12%, var(--cib-surface));
	border: 1px solid color-mix(in oklab, var(--cib-joy-red) 30%, var(--cib-border));
}

.cib-pssb-form-input[aria-invalid='true'],
.cib-pssb-form-textarea[aria-invalid='true'] {
	border-color: color-mix(in oklab, var(--cib-joy-red) 45%, var(--cib-border));
}

.cib-pssb-contact-form-notice--success {
	background: color-mix(in oklab, var(--cib-joy-green) 18%, var(--cib-surface));
	border: 1px solid color-mix(in oklab, var(--cib-joy-green) 35%, var(--cib-border));
	color: var(--cib-text);
}

.cib-pssb-contact-form-notice--error {
	background: color-mix(in oklab, var(--cib-joy-red) 14%, var(--cib-surface));
	border: 1px solid color-mix(in oklab, var(--cib-joy-red) 35%, var(--cib-border));
	color: var(--cib-text);
}

.cib-pssb-form-field {
	margin-bottom: 16px;
}

.cib-pssb-form-label {
	display: block;
	font-weight: 700;
	color: var(--cib-text);
	margin-bottom: 8px;
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

@media (min-width: 992px) {
	.cib-pssb-form-label {
		font-size: clamp(1.02rem, 1.18vw, 1.12rem);
		line-height: 1.5;
	}
}

/* Telefon-Gruppe: Legend + Zeile als eine Einheit */
.cib-pssb-form-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cib-pssb-form-legend {
	padding: 0;
	margin: 0 0 10px 0;
	font-weight: 700;
	color: var(--cib-text);
	font-size: 1rem;
	line-height: 1.45;
	width: 100%;
}

@media (min-width: 992px) {
	.cib-pssb-form-legend {
		font-size: clamp(1.02rem, 1.18vw, 1.12rem);
		line-height: 1.5;
	}
}

.cib-pssb-form-fieldset .cib-pssb-form-row-2 {
	margin-top: 0;
	padding: 14px 14px 12px;
	border-radius: 12px;
	background: color-mix(in oklab, var(--cib-form-bg) 55%, var(--cib-surface));
	border: 1px solid color-mix(in oklab, var(--cib-border) 85%, transparent);
}

.cib-pssb-form-label--nested {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--cib-muted);
	margin-bottom: 6px;
	letter-spacing: 0.02em;
	text-transform: none;
}

@media (min-width: 992px) {
	.cib-pssb-form-label--nested {
		font-size: clamp(0.98rem, 1.05vw, 1.06rem);
	}
}

.cib-pssb-form-row-2-cell {
	min-width: 0;
}

.cib-pssb-form-required {
	font-weight: 700;
	color: var(--cib-form-required);
	margin-left: 4px;
}

.cib-pssb-form-input,
.cib-pssb-form-select,
.cib-pssb-form-textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid color-mix(in oklab, var(--cib-plum) 12%, var(--cib-border));
	border-radius: 10px;
	background: var(--cib-surface);
	padding: 13px 16px;
	font-size: 1rem;
	color: var(--cib-text);
	font-family: inherit;
	line-height: 1.45;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.cib-pssb-form-input,
.cib-pssb-form-select {
	min-height: 48px;
}

.cib-pssb-form-select {
	line-height: 1.35;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 12px 42px 12px 16px;
	text-overflow: ellipsis;
	background-color: var(--cib-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%232d2d2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
}

.cib-pssb-form-textarea {
	min-height: 152px;
	padding-top: 14px;
	padding-bottom: 14px;
	resize: vertical;
}

.cib-pssb-form-input:hover,
.cib-pssb-form-select:hover,
.cib-pssb-form-textarea:hover {
	border-color: color-mix(in oklab, var(--cib-magenta) 28%, var(--cib-border));
}

.cib-pssb-form-input:focus-visible,
.cib-pssb-form-select:focus-visible,
.cib-pssb-form-textarea:focus-visible {
	outline: 2px solid var(--cib-magenta);
	outline-offset: 2px;
	border-color: color-mix(in oklab, var(--cib-magenta) 45%, var(--cib-border));
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--cib-magenta) 12%, transparent);
}

.cib-pssb-form-row-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 14px;
	align-items: start;
}

@media (max-width: 600px) {
	.cib-pssb-form-row-2 {
		grid-template-columns: 1fr;
	}
}

.cib-pssb-form-hp,
.cib-pssb-form-trap {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cib-pssb-form-hp-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cib-pssb-form-spam-note {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cib-muted);
	line-height: 1.45;
	text-align: center;
}

.cib-pssb-form-submit {
	appearance: none;
	border: 0;
	border-radius: 12px;
	padding: 15px 22px;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
	background-color: var(--cib-form-submit);
	background-image: var(--cib-primary-btn-depth);
	color: var(--cib-cream);
	margin-top: 2px;
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	line-height: 1.25;
	box-shadow:
		0 16px 34px color-mix(in oklab, var(--cib-primary-strong) 26%, transparent),
		inset 0 1px 0 color-mix(in oklab, white 22%, transparent),
		inset 0 -2px 0 color-mix(in oklab, black 18%, transparent);
	transition: filter 0.15s ease, transform 0.1s ease;
}

.cib-pssb-form-submit:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.cib-pssb-form-submit:hover {
	background-color: var(--cib-form-submit-hover);
	background-image: var(--cib-primary-btn-depth-hover);
	color: var(--cib-cream);
	box-shadow:
		0 18px 36px color-mix(in oklab, var(--cib-form-submit-hover) 30%, transparent),
		inset 0 1px 0 color-mix(in oklab, white 16%, transparent),
		inset 0 -2px 0 color-mix(in oklab, black 24%, transparent);
}

.cib-pssb-form-submit:focus-visible {
	background-color: var(--cib-form-submit-hover);
	background-image: var(--cib-primary-btn-depth-hover);
	color: var(--cib-cream);
	box-shadow:
		0 18px 36px color-mix(in oklab, var(--cib-form-submit-hover) 30%, transparent),
		inset 0 1px 0 color-mix(in oklab, white 16%, transparent),
		inset 0 -2px 0 color-mix(in oklab, black 24%, transparent);
}

.cib-pssb-form-submit[aria-busy="true"],
.cib-pssb-form-submit:disabled {
	cursor: progress;
	opacity: 0.75;
	filter: saturate(0.85);
}

.cib-pssb-form-submit:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.cib-pssb-form-submit:active {
		transform: none;
	}
}

/* Scroll-Reveal: ganze Sektion (Zitat, FAQ-Kopf) + Footer-Innenbereich */
section.cib-pssb-reveal > .cib-pssb-container,
footer.cib-pssb-reveal > .cib-pssb-site-footer-inner {
	opacity: 0;
	transform: translateY(var(--cib-pssb-reveal-y));
	transition:
		opacity var(--cib-pssb-reveal-duration) var(--cib-pssb-reveal-ease),
		transform var(--cib-pssb-reveal-duration) var(--cib-pssb-reveal-ease);
}

section.cib-pssb-reveal.is-inview > .cib-pssb-container,
footer.cib-pssb-reveal.is-inview > .cib-pssb-site-footer-inner {
	opacity: 1;
	transform: translateY(0);
}

/* Sichtbarkeits-Fallback ohne JS (oder wenn JS fehlschlägt):
   Reveal-Elemente bleiben sichtbar statt opacity: 0 hängen zu bleiben. */
@media (scripting: none) {
	section.cib-pssb-reveal > .cib-pssb-container,
	footer.cib-pssb-reveal > .cib-pssb-site-footer-inner,
	section.cib-pssb-reveal-stagger .cib-pssb-section-head,
	section.cib-pssb-reveal-stagger .cib-pssb-split > div,
	section.cib-pssb-reveal-stagger .cib-pssb-cards .cib-pssb-card,
	section.cib-pssb-reveal-stagger .cib-pssb-step,
	section.cib-pssb-reveal-stagger .cib-pssb-cta-row,
	section.cib-pssb-reveal-stagger .cib-pssb-cta-microcopy,
	section.cib-pssb-reveal-stagger > .cib-pssb-container > p.cib-pssb-price-line,
	section.cib-pssb-reveal-stagger .cib-pssb-faq-grid .cib-pssb-faq-card,
	section.cib-pssb-reveal-stagger .cib-pssb-contact-grid > *,
	section.cib-pssb-reveal-stagger .cib-pssb-extra-text {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Fallback, wenn Reveal-JS länger braucht oder fehlschlägt (kurz ohne Scroll, nach Scroll länger — siehe JS).
   Ohne diese Klasse (nach Timeout) werden Inhalte sichtbar gemacht. */
html.cib-pssb-reveal-fallback section.cib-pssb-reveal > .cib-pssb-container,
html.cib-pssb-reveal-fallback footer.cib-pssb-reveal > .cib-pssb-site-footer-inner,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-section-head,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-split > div,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-cards .cib-pssb-card,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-step,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-cta-row,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-cta-microcopy,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger > .cib-pssb-container > p.cib-pssb-price-line,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-faq-grid .cib-pssb-faq-card,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-contact-grid > *,
html.cib-pssb-reveal-fallback section.cib-pssb-reveal-stagger .cib-pssb-extra-text {
	opacity: 1;
	transform: none;
}

/* Kontakt bei Direktaufruf/Form-Redirect niemals „verstecken“. */
section#kontakt.cib-pssb-reveal-stagger .cib-pssb-contact-grid > *,
section#kontakt.cib-pssb-reveal-stagger .cib-pssb-extra-text,
section#kontakt.cib-pssb-reveal-stagger .cib-pssb-cta-microcopy {
	transition-duration: 0.35s;
}

html.cib-pssb-show-kontakt section#kontakt.cib-pssb-reveal-stagger .cib-pssb-contact-grid > *,
html.cib-pssb-show-kontakt section#kontakt.cib-pssb-reveal-stagger .cib-pssb-extra-text,
html.cib-pssb-show-kontakt section#kontakt.cib-pssb-reveal-stagger .cib-pssb-cta-microcopy {
	opacity: 1 !important;
	transform: none !important;
}

/* Scroll-Reveal: Überschrift + Karten / Spalten mit Staffel (inkl. FAQ-Karten, Preiszeile, Microcopy) */
section.cib-pssb-reveal-stagger .cib-pssb-section-head,
section.cib-pssb-reveal-stagger .cib-pssb-split > div,
section.cib-pssb-reveal-stagger .cib-pssb-cards .cib-pssb-card,
section.cib-pssb-reveal-stagger .cib-pssb-step,
section.cib-pssb-reveal-stagger .cib-pssb-cta-row,
section.cib-pssb-reveal-stagger .cib-pssb-cta-microcopy,
section.cib-pssb-reveal-stagger > .cib-pssb-container > p.cib-pssb-price-line,
section.cib-pssb-reveal-stagger .cib-pssb-faq-grid .cib-pssb-faq-card,
section.cib-pssb-reveal-stagger .cib-pssb-contact-grid > *,
section.cib-pssb-reveal-stagger .cib-pssb-extra-text {
	opacity: 0;
	transform: translateY(var(--cib-pssb-reveal-y-stagger));
	transition:
		opacity var(--cib-pssb-reveal-duration-stagger) var(--cib-pssb-reveal-ease),
		transform var(--cib-pssb-reveal-duration-stagger) var(--cib-pssb-reveal-ease);
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-section-head {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.04s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-split > div:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-split > div:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.18s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-extra-text {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.26s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-cards .cib-pssb-card:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-cards .cib-pssb-card:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.18s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-cards .cib-pssb-card:nth-child(3) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.26s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-cards .cib-pssb-card:nth-child(4) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.34s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-cards .cib-pssb-card:nth-child(5) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.42s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-cta-row {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.36s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-cta-microcopy {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.44s;
}

section.cib-pssb-reveal-stagger.is-inview > .cib-pssb-container > p.cib-pssb-price-line {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.32s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-faq-grid .cib-pssb-faq-card:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.12s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-faq-grid .cib-pssb-faq-card:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-faq-grid .cib-pssb-faq-card:nth-child(3) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.28s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-faq-grid .cib-pssb-faq-card:nth-child(4) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.36s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-faq-grid .cib-pssb-faq-card:nth-child(5) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.44s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-faq-grid .cib-pssb-faq-card:nth-child(6) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.52s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-steps .cib-pssb-step:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-steps .cib-pssb-step:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.18s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-steps .cib-pssb-step:nth-child(3) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.26s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-steps .cib-pssb-step:nth-child(4) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.34s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-contact-grid > *:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.08s;
}

section.cib-pssb-reveal-stagger.is-inview .cib-pssb-contact-grid > *:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.18s;
}

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

	/* Kein „alles sofort sichtbar“: Inhalte erscheinen weiter per `is-inview`, nur ohne Bewegung/Blenden. */
	section.cib-pssb-reveal > .cib-pssb-container,
	footer.cib-pssb-reveal > .cib-pssb-site-footer-inner,
	section.cib-pssb-reveal-stagger .cib-pssb-section-head,
	section.cib-pssb-reveal-stagger .cib-pssb-split > div,
	section.cib-pssb-reveal-stagger .cib-pssb-cards .cib-pssb-card,
	section.cib-pssb-reveal-stagger .cib-pssb-step,
	section.cib-pssb-reveal-stagger .cib-pssb-cta-row,
	section.cib-pssb-reveal-stagger .cib-pssb-cta-microcopy,
	section.cib-pssb-reveal-stagger > .cib-pssb-container > p.cib-pssb-price-line,
	section.cib-pssb-reveal-stagger .cib-pssb-faq-grid .cib-pssb-faq-card,
	section.cib-pssb-reveal-stagger .cib-pssb-contact-grid > *,
	section.cib-pssb-reveal-stagger .cib-pssb-extra-text {
		transition: none !important;
	}

	.cib-pssb-card {
		transition: none;
	}

	.cib-pssb-step {
		transition: none;
	}
}


/* SUP-IMPRV-001 — Phase 1/2 Hero & CTA Microcopy / Trust / Optional-Form */
.cib-pssb-cta-microcopy {
	margin: 8px 0 0 0;
	color: var(--cib-muted);
	letter-spacing: 0.01em;
}

.cib-pssb-hero-banner-copy .cib-pssb-cta-microcopy {
	color: color-mix(in oklab, var(--cib-brand-cream) 88%, white 12%);
}

.cib-pssb-hero-direct {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 10px 0 0 0;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.cib-pssb-hero-direct-link {
	color: var(--cib-brand-cream);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
}

.cib-pssb-hero-direct-link:focus-visible {
	outline: 2px solid var(--cib-brand-cream);
	outline-offset: 3px;
}

.cib-pssb-hero-direct-sep {
	color: color-mix(in oklab, var(--cib-brand-cream) 65%, transparent);
}

.cib-pssb-trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	list-style: none;
	margin: 8px 0 14px 0;
	padding: 0;
}

.cib-pssb-trust-list li {
	position: relative;
	padding-left: 22px;
	color: var(--cib-text);
	font-weight: 600;
}

.cib-pssb-trust-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	border-radius: 50%;
	background:
		linear-gradient(135deg, var(--cib-primary-strong) 0%, color-mix(in oklab, var(--cib-primary-strong) 70%, white 30%) 100%);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--cib-primary-strong) 18%, transparent);
}

.cib-pssb-form-optional {
	border: 1px solid var(--cib-border);
	border-radius: 12px;
	background: color-mix(in oklab, var(--cib-form-bg) 92%, var(--cib-surface) 8%);
	padding: 0;
}

.cib-pssb-form-optional > .cib-pssb-form-optional-summary {
	cursor: pointer;
	list-style: none;
	padding: 12px 14px;
	font-weight: 600;
	color: var(--cib-text);
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.cib-pssb-form-optional > .cib-pssb-form-optional-summary::-webkit-details-marker {
	display: none;
}

.cib-pssb-form-optional > .cib-pssb-form-optional-summary::after {
	content: '+';
	margin-left: auto;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--cib-primary-strong);
	transition: transform 160ms ease;
}

.cib-pssb-form-optional[open] > .cib-pssb-form-optional-summary::after {
	content: '−';
}

.cib-pssb-form-optional-body {
	padding: 4px 14px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Phase 2 — Mobile Hero-Reihenfolge: conversion-first (CTA vor Ortszeile) */
@media (max-width: 600px) {
	.cib-pssb-hero-banner-copy {
		display: flex;
		flex-direction: column;
	}

	.cib-pssb-hero-banner .cib-pssb-hero-title {
		order: 1;
		font-size: clamp(1.6rem, 6.5vw, 1.95rem);
		margin-bottom: 10px;
	}

	.cib-pssb-hero-banner .cib-pssb-hero-actions {
		order: 2;
		margin-top: 4px;
	}

	.cib-pssb-hero-banner-copy .cib-pssb-cta-microcopy {
		order: 3;
	}

	.cib-pssb-hero-banner-copy .cib-pssb-hero-direct {
		order: 4;
	}

	.cib-pssb-hero-banner .cib-pssb-hero-subtitle {
		order: 5;
		font-size: 0.9375rem;
		margin-top: 12px;
		margin-bottom: 0;
	}

	.cib-pssb-hero-actions .cib-pssb-btn {
		width: 100%;
		min-height: 44px;
	}
}