/* Schrift Poppins lokal eingebunden (SIL Open Font License), keine Verbindung zu Google */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('fonts/poppins-200-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('fonts/poppins-200-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('fonts/poppins-300-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('fonts/poppins-300-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/poppins-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/poppins-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/poppins-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/poppins-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/poppins-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/poppins-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/poppins-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/poppins-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tobias Reinhardt – Stylesheet
   ========================================================================== */

:root {
	--color-accent: #5aa9d6;
	--color-accent-dark: #4295c5;
	--color-text: #16274d;
	--color-text-light: #5c5a72;
	--color-bg: #ffffff;
	--color-header-bg: #ffffff;
	--header-height: 88px;
	--max-width: 1140px;
	--font-base: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--color-accent);
	color: var(--color-text);
}

body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-bg);
	overflow-x: hidden;
}

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

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--color-header-bg);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.nav-header-mask {
	position: absolute;
	inset: 0;
	z-index: 1500;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-header-mask.is-open {
	opacity: 1;
	visibility: visible;
}

.header-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
}

.logo {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.main-nav ul {
	display: flex;
	gap: 28px;
}

.main-nav ul a {
	position: relative;
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-text);
	padding: 6px 2px 10px;
	transition: color 0.2s ease;
}

.main-nav ul a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	border-radius: 3px;
	background: var(--color-accent);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.main-nav ul a:hover,
.main-nav ul a:focus-visible {
	color: var(--color-accent);
}

.main-nav ul a:hover::after,
.main-nav ul a:focus-visible::after {
	transform: scaleX(1);
}

.main-nav ul a.is-active {
	background: var(--color-accent);
	color: var(--color-text);
	border-radius: 8px;
	padding: 6px 12px 10px;
}

.main-nav ul a.is-active:hover,
.main-nav ul a.is-active:focus-visible {
	background: var(--color-accent-dark);
	color: var(--color-text);
}

.main-nav ul a.is-active::after {
	display: none;
}

.social-links {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--color-text);
	font: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.social-icon:hover,
.social-icon:focus-visible {
	background: var(--color-accent-dark);
}

.social-icon svg {
	width: 22px;
	height: 22px;
	fill: #ffffff;
}

.ai-trigger {
	background: #ffffff;
	border: 1px solid var(--color-text);
}

/* Sprachumschalter DE | EN: kleine, graue Textzeile oberhalb der runden Symbole.
   Bewusst unauffällig, ohne Fähnchen und ohne Farbe. */
.main-nav {
	position: relative;
}

.lang-switch {
	position: absolute;
	top: -18px;
	right: 0;
	display: flex;
	align-items: center;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	color: #9a9fae;
}

.lang-switch > a,
.lang-switch > span {
	padding: 0 3px;
	color: #9a9fae;
}

.lang-switch > :last-child {
	padding-right: 0;
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
	color: #5c5f6b;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lang-switch .is-current {
	color: #5c5f6b;
	font-weight: 600;
}

/* Sprache noch nicht verfügbar: noch blasser und ohne Funktion */
.lang-switch .is-disabled {
	color: #c7cad3;
	cursor: default;
}

.ai-trigger svg {
	fill: var(--color-text);
}

.ai-trigger:hover,
.ai-trigger:focus-visible {
	background: var(--color-accent);
}

.ai-trigger:hover svg,
.ai-trigger:focus-visible svg {
	fill: var(--color-text);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: #ffffff;
	border: 1px solid var(--color-text);
	border-radius: 12px;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	background: var(--color-accent);
}

.nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Responsive – Breakpoints
   ========================================================================== */

@media (max-width: 1100px) {
	.nav-toggle {
		display: flex;
		z-index: 2001;
	}

	.nav-toggle[aria-expanded="true"] {
		position: fixed;
		top: calc((var(--header-height) - 44px) / 2);
		right: 24px;
	}

	.main-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 75%;
		max-width: 360px;
		align-items: stretch;
		flex-direction: column;
		gap: 0;
		background: #ffffff;
		box-shadow: -8px 0 24px rgba(22, 39, 77, 0.15);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 2000;
		overflow-y: auto;
		padding-top: var(--header-height);
	}

	.main-nav.is-open {
		transform: translateX(0);
	}

	.main-nav ul {
		flex-direction: column;
		gap: 0;
		padding: 8px 28px 24px;
	}

	.main-nav ul a {
		display: block;
		padding: 14px 0 14px 12px;
		border-bottom: 1px solid rgba(47, 143, 150, 0.18);
	}

	.main-nav ul a.is-active {
		padding: 14px 12px;
		border-radius: 8px;
	}

	.main-nav .social-links {
		padding: 24px 28px 0;
	}

	.main-nav .lang-switch {
		position: static;
		align-self: flex-start;
		margin: 20px 28px 0;
		font-size: 0.8rem;
	}

	.nav-overlay {
		position: fixed;
		inset: 0;
		z-index: 900;
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.nav-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	margin-top: calc(var(--header-height) * -1);
	padding-top: calc(var(--header-height) + 60px);
	overflow: hidden;
	background: #ffffff;
	min-height: 720px;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background-color: #d3d3d5;
	background-image: url('img/hero-wall.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom-left-radius: 220px;
	z-index: 0;
}

.hero-inner {
	position: absolute;
	inset: 0;
	z-index: 2;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 60px 24px 100px;
	display: flex;
	align-items: center;
}

/* Freigestelltes Foto: innerhalb des Inhaltsbereichs (max-width) positioniert,
   damit es nie über die Inhaltsbreite hinausragt und bei keiner Bildschirmbreite
   hinter der Navigation verschwindet. */
.hero-person {
	position: absolute;
	z-index: 1;
	right: 24px;
	bottom: 0;
	height: 88%;
	max-height: 640px;
	width: auto;
	object-fit: contain;
	pointer-events: none;
}

.hero-text {
	max-width: 560px;
}

.hero-eyebrow {
	color: var(--color-accent-dark);
	font-weight: 700;
	font-size: 1.1rem;
	margin: 90px 0 16px;
	min-height: 1.4em;
}

.typewriter-cursor {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-left: 2px;
	background: currentColor;
	vertical-align: middle;
	animation: cursor-blink 0.8s step-end infinite;
}

@keyframes cursor-blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

.hero-title {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-text);
	margin: 0 0 24px;
}

.hero-desc {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--color-text-light);
	max-width: 540px;
	margin: 0 0 32px;
}

.btn {
	display: inline-block;
	font-weight: 600;
	font-size: 1rem;
	padding: 16px 36px;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.btn-primary {
	background: var(--color-accent);
	color: var(--color-text);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--color-accent-dark);
}

.btn-secondary {
	background: var(--color-text);
	color: #ffffff;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	background: #2c4577;
}

.btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.btn-arrow svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Eora-Buttons sind button-Elemente und brauchen die Grundwerte eines Links */
button.btn {
	border: 0;
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}

.hero-actions .btn-arrow,
.eora-cta .btn-arrow {
	gap: 10px;
}

/* Eora-Buttons unter der Gedankenstütze: zwei Spalten, damit vier Buttons als
   2 x 2 stehen statt 3 + 1. Mouse-Over nur farblich wie überall auf der Seite. */
.eora-cta {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

@media (max-width: 820px) {
	.eora-cta {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}

	.eora-cta .btn {
		justify-content: center;
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
	}
}

/* ab Nr. 2 (bis 1200 px) keine Eckenrundung unten links */
@media (max-width: 1200px) {
	.hero-bg {
		border-bottom-left-radius: 0;
	}
}

@media (max-width: 640px) {
	.hero {
		margin-top: 0;
		padding-top: 24px;
		padding-bottom: 40px;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	/* Nr. 4 (Test): Foto rechts neben dem Text, läuft höchstens zur Hälfte rechts
	   aus dem Bild; Text und Buttons dafür kleiner */
	.hero-person {
		/* Höhe richtet sich nach dem Text, damit unter den Buttons kein Leerraum entsteht */
		right: 0;
		bottom: -40px;
		height: calc(100% - 50px);
		max-height: 560px;
		width: auto;
		transform: translateX(38%);
	}

	.hero-inner {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1 1 auto;
		width: 100%;
		padding-bottom: 40px;
	}

	.hero-eyebrow {
		margin-top: 0;
		font-size: 0.85rem;
		white-space: nowrap;
	}

	.hero-title {
		font-size: 1.35rem;
	}

	.hero-desc {
		font-size: 0.82rem;
		line-height: 1.55;
		margin-bottom: 20px;
	}

	.hero-text {
		position: relative;
		z-index: 2;
		text-align: left;
		max-width: none;
		width: 100%;
		order: 1;
	}

	/* Text fließt um das Foto (Platzhalter werden per Skript gesetzt) */
	.hero-sand {
		float: right;
		width: 0;
	}

	.hero-shape {
		float: right;
		clear: right;
	}

	.hero-actions .ai-trigger svg {
		display: none;
	}

	.hero-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.hero-actions .btn {
		padding: 10px 14px;
		font-size: 0.78rem;
		white-space: nowrap;
	}
}

/* Kompaktes Zwischen-Layout: Foto bleibt neben dem Text, beide verkleinert. */
@media (min-width: 641px) and (max-width: 900px) {
	.hero {
		min-height: 620px;
		padding-bottom: 48px;
	}

	.hero-inner {
		align-items: flex-start;
		padding-top: 100px;
	}

	/* Textspalte wächst mit der Fensterbreite: oben mehr Platz, unten nicht zu schmal */
	.hero-text {
		max-width: clamp(300px, calc(100vw - 440px), 460px);
	}

	/* die wechselnden Begriffe sollen nie in eine zweite Zeile springen */
	.hero-eyebrow {
		margin-top: 40px;
		font-size: 0.95rem;
		white-space: nowrap;
	}

	/* damit „für die Zukunft." auch bei breiter Textspalte zusammen umbricht */
	.hero-title {
		font-size: 1.7rem;
		max-width: 320px;
	}

	.hero-desc {
		font-size: 0.9rem;
		line-height: 1.6;
	}

	.hero-desc br,
	.hero-desc {
		max-width: clamp(250px, calc(100vw - 460px), 440px);
	}

	.hero-actions {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.hero-actions .btn {
		padding: 10px 14px;
		font-size: 0.8rem;
		white-space: nowrap;
	}

	.hero-person {
		right: 0;
		height: 88%;
		max-height: 560px;
	}
}

/* Tablet, schmalere Hälfte: neben dem großen Foto reicht der Platz nicht mehr für
   zwei Buttons nebeneinander, sie stehen deshalb untereinander. */
/* Der längste wechselnde Begriff („Prozessoptimierung und Effizienzsteigerung")
   passt unter 815 px nur mit etwas kleinerer Schrift in die Textspalte. */
@media (min-width: 641px) and (max-width: 814px) {
	.hero-eyebrow {
		font-size: 0.8rem;
	}
}

@media (min-width: 641px) and (max-width: 879px) {
	/* etwas mehr Höhe, damit der zweite Button nicht unten abgeschnitten wird */
	.hero {
		min-height: 720px;
	}

	.hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Ganz unten im Tablet-Bereich rutscht das Foto in voller Größe nach rechts aus dem
   Bild, statt auf dem Text zu liegen. */
@media (min-width: 641px) and (max-width: 715px) {
	.hero-person {
		right: calc(100vw - 716px);
	}
}

/* Zweitgrößte Ansicht: Das Foto richtet sich nach der Fensterbreite statt nach der
   Höhe, sonst wächst es beim Verkleinern nach links in Text und Buttons hinein.
   Überschrift und Buttons werden dafür minimal kleiner, bleiben aber nebeneinander. */
@media (min-width: 901px) and (max-width: 1200px) {
	.hero-person {
		right: 3%;
	}

	/* schmalere Spalte, damit „für die Zukunft" wie auf dem Desktop zusammen umbricht */
	.hero-text {
		max-width: 470px;
	}

	.hero-title {
		font-size: 2.6rem;
	}

	.hero-desc {
		max-width: 460px;
	}

	.hero-actions {
		gap: 12px;
	}

	.hero-actions .btn {
		padding: 14px 24px;
		font-size: 0.95rem;
	}
}

/* Unter 1010 px reicht der Platz neben dem großen Foto nicht mehr. Das Foto behält
   seine Größe und rutscht beim Schmalerziehen nach rechts aus dem Bild (der Hero
   schneidet mit overflow: hidden ab), statt auf Text und Buttons zu liegen. */
@media (min-width: 901px) and (max-width: 1060px) {
	.hero-person {
		right: calc(3% - (1060px - 100vw) * 0.95);
	}
}

/* ==========================================================================
   Sektionen
   ========================================================================== */

.section {
	padding: 80px 0;
	scroll-margin-top: var(--header-height);
}

.section-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.section-accent {
	background: var(--color-accent);
}

.section-accent .section-eyebrow {
	color: var(--color-text);
}

.section-dark {
	background: var(--color-text);
	color: #ffffff;
}

.section-dark .section-eyebrow {
	color: var(--color-accent);
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.stat {
	background: #d3d3d5;
	border-radius: 12px;
	padding: 28px 24px;
}

.stat-number {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 10px;
}

.stat-label {
	color: var(--color-text-light);
	line-height: 1.5;
	margin: 0;
}

.statement-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 32px;
}

.statement {
	display: flex;
	align-items: baseline;
	gap: 20px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 28px;
	transition: background-color 0.2s ease;
}

.statement:hover {
	background: rgba(255, 255, 255, 0.16);
}

.statement-no {
	flex: none;
	color: var(--color-accent);
	font-weight: 700;
	font-size: 1rem;
}

.statement p {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
}

.card-list {
	margin: 0;
	padding: 0;
}

.card-list li {
	position: relative;
	color: var(--color-text-light);
	line-height: 1.55;
	padding-left: 18px;
	margin-bottom: 10px;
}

.card-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent-dark);
}

.card:hover .card-list li {
	color: var(--color-text);
}

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

	.statement-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.stat-number {
		font-size: 2.4rem;
	}
}

.section-eyebrow {
	color: var(--color-accent-dark);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0 0 12px;
}

.section-title {
	font-size: 2.2rem;
	line-height: 1.2;
	margin: 0 0 16px;
}

.section-intro {
	color: var(--color-text-light);
	line-height: 1.7;
	max-width: 620px;
	margin: 0 0 40px;
}

.section-cta {
	margin: 40px 0 0;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.card {
	background: #d3d3d5;
	border-radius: 12px;
	padding: 28px;
	transition: background-color 0.2s ease;
}

.card:hover {
	background: #b3b3b8;
}

.card:hover p {
	color: var(--color-text);
}

.hl {
	position: relative;
	display: inline-block;
	isolation: isolate;
	padding: 0 0.2em 0 0.04em;
}

/* ohne Innenabstand rechts, wenn direkt ein Komma folgt (sonst steht eine Lücke davor) */
.hl-tight {
	padding-right: 0;
}

.hl::before,
.hl::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -2%;
	right: -3%;
	background: var(--color-accent);
	transform-origin: left center;
	transform: rotate(var(--tilt, -1.2deg)) scaleX(0);
	transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.3, 1) 1s;
}

.hl.is-visible::before,
.hl.is-visible::after {
	transform: rotate(var(--tilt, -1.2deg)) scaleX(1);
}

.hl::after {
	display: none;
}

/* Doppelstrich-Varianten (Abwandlungen von "zwei übereinandergezogene Striche") */
.hl-v::before {
	--tilt: var(--t1);
	bottom: var(--b1);
	height: var(--h1);
	opacity: 0.8;
	clip-path: var(--p1);
}

.hl-v::after {
	display: block;
	--tilt: var(--t2);
	bottom: var(--b2);
	height: var(--h2);
	opacity: 0.55;
	transition-delay: 1.35s;
	clip-path: var(--p2);
}

.hl-v {
	--p1: polygon(0 30%, 6% 10%, 20% 26%, 38% 8%, 58% 24%, 78% 6%, 94% 22%, 100% 40%, 96% 74%, 84% 92%, 62% 80%, 40% 96%, 18% 84%, 4% 94%, 0 70%);
	--p2: polygon(0 40%, 8% 18%, 24% 34%, 44% 12%, 66% 30%, 86% 10%, 100% 34%, 97% 68%, 88% 90%, 66% 78%, 46% 98%, 24% 82%, 8% 96%, 0 74%);
}

/* 1: Original, ein Wort */
.hl-v1 { --t1: -1.2deg; --t2: 0.8deg; --b1: 0.1em; --b2: -0.04em; --h1: 0.4em; --h2: 0.36em; }

/* 2: drei Wörter, lange Doppelstriche, gegenläufig geneigt */
.hl-v2 { --t1: -0.6deg; --t2: 0.3deg; --b1: 0.08em; --b2: -0.06em; --h1: 0.42em; --h2: 0.34em; }

/* 3: drei Wörter, ein dicker Strich */
.hl-v3 { --t1: 1.3deg; --t2: 0deg; --b1: 0.02em; --b2: 0; --h1: 0.62em; --h2: 0;
	--p1: polygon(0 34%, 3% 12%, 10% 28%, 22% 6%, 36% 22%, 50% 4%, 66% 20%, 80% 6%, 92% 24%, 98% 10%, 100% 46%, 97% 72%, 100% 94%, 86% 82%, 70% 100%, 52% 86%, 34% 98%, 18% 84%, 6% 100%, 2% 80%, 0 90%); }

/* 4: zwei Wörter, dünn und tief, fast wie ein Unterstreichen */
.hl-v4 { --t1: -0.6deg; --t2: 1.2deg; --b1: -0.1em; --b2: -0.2em; --h1: 0.24em; --h2: 0.2em; }

/* 5: drei Wörter, zweiter Strich kürzer und kräftiger */
.hl-v5 { --t1: -2deg; --t2: 1.4deg; --b1: 0.06em; --b2: -0.02em; --h1: 0.46em; --h2: 0.4em; }

.hl-v5::after {
	left: 8%;
	right: 22%;
	opacity: 0.7;
}

.card h3 {
	font-size: 1.15rem;
	margin: 0 0 10px;
}

.card p {
	color: var(--color-text-light);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 900px) {
	.section-cta {
	margin: 40px 0 0;
}

.card-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.section {
		padding: 56px 0;
	}

	.section-title {
		font-size: 1.7rem;
	}
}

/* ==========================================================================
   Koala-Quiz
   ========================================================================== */

.card-action {
	margin: 20px 0 0;
}

.koala-modal {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	/* overflow-y allein lässt overflow-x auf auto laufen: die Deko-Kreise der
	   Ergebnisbox stehen über und erzeugen dann einen waagerechten Scrollbalken */
	overflow-x: hidden;
	overflow-y: auto;
	background: #f4f8fb;
	border-radius: 16px;
	box-shadow: 0 30px 60px rgba(22, 39, 77, 0.35);
	transform: translateY(16px);
	transition: transform 0.25s ease;
}

.modal-overlay.is-open .koala-modal {
	transform: translateY(0);
}

.koala-quiz {
	padding: 48px 40px 36px;
}

.koala-bar {
	height: 6px;
	background: #dfe7f0;
	border-radius: 3px;
	margin: 0 0 24px;
	overflow: hidden;
}

.koala-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-accent);
	transition: width 0.3s ease;
}

.koala-question {
	font-size: 1.4rem;
	line-height: 1.35;
	margin: 0 0 24px;
}

.koala-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.koala-option {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #ffffff;
	border-radius: 10px;
	padding: 16px 18px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.koala-option:hover {
	background: #e6f1f8;
}

.koala-option input {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	flex: none;
	margin: 0;
	border: 2px solid var(--color-text);
	border-radius: 50%;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	cursor: pointer;
	opacity: 1;
}

.koala-option input:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%2316274d' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

.koala-option input:focus-visible {
	outline: 2px solid var(--color-accent-dark);
	outline-offset: 2px;
}

.koala-option.is-correct {
	background: #bfe3cb;
}

.koala-option.is-wrong {
	background: #f1c4c4;
}

.koala-option.is-correct,
.koala-option.is-wrong {
	cursor: default;
}

.koala-feedback {
	margin: 24px 0 0;
}

.koala-feedback-title {
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 6px;
}

.koala-feedback-text {
	color: var(--color-text-light);
	line-height: 1.6;
	margin: 0;
}

.koala-next {
	margin-top: 24px;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.koala-next[hidden],
.koala-feedback[hidden] {
	display: none;
}

.koala-result {
	position: relative;
	overflow: hidden;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	min-height: 520px;
	padding: 48px 40px;
	background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent-dark) 100%);
	color: #ffffff;
}

.koala-result > *:not(.contact-modal-deco) {
	position: relative;
	z-index: 1;
}

.koala-result h2 {
	font-size: 1.6rem;
	margin: 0;
}

.koala-result p {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.6;
	max-width: 420px;
	margin: 0;
}

.koala-result .koala-score {
	color: #ffffff;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.2;
}

.koala-intro {
	display: none;
	padding: 56px 40px 48px;
	text-align: center;
}

.koala-intro h2 {
	font-size: 1.8rem;
	line-height: 1.25;
	margin: 0 0 16px;
}

.koala-intro-text {
	color: var(--color-text-light);
	line-height: 1.7;
	max-width: 440px;
	margin: 0 auto 32px;
}

.koala-start {
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.koala-modal.is-intro .koala-intro {
	display: block;
}

.koala-modal.is-intro .koala-quiz {
	display: none;
}

.koala-modal.is-result .koala-quiz,
.koala-modal.is-result .modal-close {
	display: none;
}

.koala-modal.is-result .koala-result {
	display: flex;
}

@media (max-width: 640px) {
	.koala-quiz {
		padding: 40px 24px 28px;
	}
}

/* ==========================================================================
   Kanzlei-Schnellcheck: nutzt die Quiz-Bausteine, hat aber drei Schritte
   (Kanzleityp wählen, Fragen, Ergebnis) und eigene Zustände is-type / is-quiz / is-result
   ========================================================================== */

.kc-modal .koala-intro,
.kc-modal .koala-quiz,
.kc-modal .koala-result {
	display: none;
}

.kc-modal.is-type .koala-intro {
	display: block;
}

.kc-modal.is-quiz .koala-quiz {
	display: block;
}

.kc-modal.is-result .koala-result {
	display: flex;
}

/* Kompakter als das Quiz, damit Frage, vier Antworten und Feedback auch auf 15-Zoll-Laptops ohne Rollen passen */
.kc-modal .koala-intro {
	padding: 44px 36px 36px;
}

.kc-modal .koala-intro h2 {
	font-size: 1.6rem;
	margin-bottom: 10px;
}

.kc-modal .koala-intro-text {
	margin-bottom: 22px;
}

.kc-modal .koala-quiz {
	padding: 32px 32px 28px;
}

.kc-modal .koala-bar {
	margin-bottom: 14px;
}

.kc-modal .koala-question {
	font-size: 1.25rem;
	margin-bottom: 16px;
}

.kc-modal .koala-options {
	gap: 8px;
}

.kc-modal .koala-option {
	padding: 11px 14px;
	gap: 12px;
	font-size: 0.95rem;
	line-height: 1.4;
}

.kc-modal .koala-option input {
	width: 20px;
	height: 20px;
}

.kc-modal .koala-feedback {
	margin-top: 16px;
}

.kc-modal .koala-feedback-title {
	font-size: 1rem;
}

.kc-modal .koala-feedback-text {
	font-size: 0.95rem;
}

.kc-modal .koala-next {
	margin-top: 16px;
	padding: 12px 28px;
}

/* Schritt 1: Kanzleityp als drei große Auswahlfelder */
.kc-types {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}

.kc-type {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	font: inherit;
	text-align: left;
	color: var(--color-text);
	background: #ffffff;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 16px 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kc-type:hover,
.kc-type:focus-visible {
	background: #e6f1f8;
	border-color: var(--color-accent);
	outline: none;
}

.kc-type strong {
	font-size: 1.05rem;
}

.kc-type span {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text-light);
}

/* Schritt 2: Themenfeld über der Frage, gewählte Antwort hellblau */
.kc-theme {
	margin: 0 0 6px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.koala-option.is-chosen {
	background: #dcecf7;
	cursor: default;
}

/* Schritt 3: Ergebnis mit Balken je Themenfeld und den größten Hebeln */
.kc-result {
	justify-content: flex-start;
	min-height: 0;
	gap: 12px;
	/* overflow: hidden würde position: sticky des Pfeils unwirksam machen */
	overflow: visible;
}

/* Die Deko-Kreise ragen über die Box hinaus (einer 100 px nach rechts, einer
   20 px nach unten) und vergrößerten dadurch den Rollbereich des Fensters:
   sichtbar als weißer Rand rechts und unten. Sie werden hier abgeschnitten. */
.kc-result .contact-modal-deco {
	overflow: hidden;
	border-radius: 16px;
}

.kc-result .kc-result-eyebrow {
	color: var(--color-accent);
}

.kc-result .kc-score {
	font-size: 3.2rem;
	line-height: 1.1;
}

.kc-score-max {
	font-size: 1.3rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
}

.kc-result .kc-result-type {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.65);
	margin: -6px 0 4px;
}

.kc-result .kc-result-text {
	max-width: 480px;
}

.kc-themes {
	width: 100%;
	max-width: 480px;
	margin: 16px 0 4px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}

.kc-theme-row {
	display: grid;
	grid-template-columns: 1fr 120px 44px;
	align-items: center;
	gap: 12px;
	font-size: 0.85rem;
}

.kc-theme-bar {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}

.kc-theme-bar span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--color-accent);
	transition: width 0.4s ease;
}

.kc-theme-value {
	text-align: right;
	font-weight: 600;
}

.kc-result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 20px;
	margin-top: 16px;
}

/* Das Ergebnis mitnehmen ist die Hauptaktion, Schließen nur noch ein Textlink */
.kc-pdf-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	color: var(--color-text);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(9, 22, 50, 0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kc-pdf-btn:hover,
.kc-pdf-btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(9, 22, 50, 0.3);
}

.kc-pdf-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.kc-text-btn {
	padding: 6px 2px;
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.kc-result-actions .kc-text-btn {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

.kc-result-actions .kc-text-btn:hover {
	color: #ffffff;
	text-decoration-color: #ffffff;
}

/* Hinweis, dass es weiter nach unten geht: schwebt am unteren Rand der Ergebnisbox
   und rollt beim Klick weiter. Verschwindet, sobald das Ende erreicht ist. */
/* muss die allgemeine Regel .koala-result > * (position: relative) überstimmen */
.koala-result.kc-result .kc-scroll-hint {
	position: sticky;
	bottom: 14px;
	z-index: 2;
}

.kc-scroll-hint {
	align-self: center;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: 4px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(22, 39, 77, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #ffffff;
	cursor: pointer;
	animation: kc-hint-bounce 1.8s ease-in-out infinite;
	transition: opacity 0.25s ease, visibility 0.25s, background-color 0.2s ease;
}

.kc-scroll-hint svg {
	width: 22px;
	height: 22px;
}

.kc-scroll-hint:hover,
.kc-scroll-hint:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
	outline: none;
}

.kc-scroll-hint.is-hidden {
	opacity: 0;
	visibility: hidden;
}

@keyframes kc-hint-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.kc-scroll-hint {
		animation: none;
	}
}

.kc-result .kc-privacy {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 8px;
}

@media (max-width: 640px) {
	.kc-theme-row {
		grid-template-columns: 1fr 80px 40px;
		gap: 8px;
		font-size: 0.8rem;
	}

	.kc-result .kc-score {
		font-size: 2.6rem;
	}
}

/* ==========================================================================
   FAQ / Akkordeon
   ========================================================================== */

/* FAQ: gleiche Gestaltung wie die aufklappbaren Punkte der vier Welten auf der Startseite */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq-item {
	background: #ececef;
	border-radius: 12px;
	padding: 0 24px;
	transition: background-color 0.2s ease;
}

.faq-item:hover {
	background: #d3d3d5;
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 15px 0;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.faq-item summary::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: background-size 0.2s ease;
}

.faq-item[open] summary::after {
	background-size: 100% 2px, 2px 0;
}

.faq-item p {
	max-width: 760px;
	margin: 0 0 20px;
	color: var(--color-text-light);
	line-height: 1.7;
}

/* ==========================================================================
   Blog
   ========================================================================== */

.blog-hero {
	background: #ffffff;
	padding: 72px 0 56px;
	text-align: left;
}

.blog-title {
	font-size: 2.8rem;
	line-height: 1.15;
	margin: 0 0 20px;
}

.blog-intro {
	color: var(--color-text-light);
	line-height: 1.7;
	max-width: 620px;
	margin: 0 0 32px;
}

/* Themen immer in einer Zeile; auf schmalen Bildschirmen seitlich wischen */
.blog-filters {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 10px;
	scrollbar-width: none;
}

.blog-filters::-webkit-scrollbar {
	display: none;
}

.blog-filter {
	flex: none;
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	color: var(--color-text);
	background: #ffffff;
	border: 1px solid var(--color-text);
	border-radius: 10px;
	padding: 14px 22px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-filter:hover,
.blog-filter:focus-visible {
	background: var(--color-accent);
}

.blog-filter.is-active {
	background: var(--color-text);
	color: #ffffff;
}

.blog-list {
	padding-top: 24px;
}

.blog-featured,
.blog-card {
	display: block;
	background: #ffffff;
	border: 1px solid var(--color-text);
	border-radius: 16px;
	overflow: hidden;
	transition: background-color 0.2s ease;
}

.blog-featured:hover,
.blog-card:hover {
	background: #f2f3f5;
}

.blog-featured {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	margin-bottom: 32px;
}

.blog-featured .blog-thumb {
	min-height: 300px;
}

.blog-featured-body {
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.blog-featured-body h2 {
	font-size: 1.9rem;
	line-height: 1.25;
	margin: 0 0 14px;
}

.blog-featured-body p {
	color: var(--color-text-light);
	line-height: 1.7;
	margin: 0 0 20px;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.blog-thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #d3d3d5;
}

.blog-thumb--juristisches { background: linear-gradient(135deg, #16274d, #4295c5); }
.blog-thumb--legal-tech { background: linear-gradient(135deg, #4295c5, #16274d); }
.blog-thumb--digitales { background: linear-gradient(135deg, #5aa9d6, #2c4577); }
.blog-thumb--business { background: linear-gradient(135deg, #2c4577, #5aa9d6); }
.blog-thumb--arbeitsrecht { background: linear-gradient(135deg, #1e3553, #2f8f96); }
.blog-thumb--datenschutz { background: linear-gradient(135deg, #2f8f96, #1e3553); }
.blog-thumb--ki { background: linear-gradient(135deg, #3b6fa8, #2f8f96); }

.blog-tag,
.blog-time {
	position: absolute;
	top: 16px;
	background: #ffffff;
	color: var(--color-text);
	font-size: 0.8rem;
	border-radius: 20px;
	padding: 4px 12px;
}

.blog-tag {
	left: 16px;
}

.blog-time {
	right: 16px;
}

.blog-card-body {
	padding: 24px;
}

.blog-card-body h3 {
	font-size: 1.2rem;
	line-height: 1.35;
	margin: 0 0 20px;
	min-height: 3.2em;
}

.blog-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.blog-date {
	font-weight: 700;
	font-size: 0.9rem;
}

.blog-chip {
	background: #f2f3f5;
	color: var(--color-text-light);
	font-size: 0.85rem;
	border-radius: 8px;
	padding: 4px 12px;
}

.blog-featured:hover .blog-chip,
.blog-card:hover .blog-chip {
	background: #ffffff;
}

.blog-item[hidden],
.blog-empty[hidden] {
	display: none;
}

.blog-empty {
	text-align: center;
	color: var(--color-text-light);
	margin: 40px 0 0;
}

@media (max-width: 900px) {
	.blog-featured {
		grid-template-columns: minmax(0, 1fr);
	}

	.blog-featured .blog-thumb {
		min-height: 0;
	}

	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.blog-hero {
		padding: 48px 0 40px;
	}

	.blog-title {
		font-size: 2rem;
	}

	.blog-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.blog-featured-body {
		padding: 24px;
	}
}

/* ==========================================================================
   Horizontale Zeitleiste
   ========================================================================== */

.timeline-wrap {
	--tl-ink: var(--color-text);
	--tl-accent: var(--color-accent);
	position: relative;
	color: var(--tl-ink);
}

.timeline-scroller {
	display: flex;
	overflow-x: auto;
	padding: 12px 12px 28px;
	scroll-snap-type: x proximity;
	/* Einrasten mit Abstand zum Rand, sonst wird der Hover-Hintergrund der ersten Station links abgeschnitten */
	scroll-padding-inline: 12px;
}

/* Chrome ignoriert ::-webkit-scrollbar, sobald scrollbar-width/-color gesetzt sind.
   Deshalb nur für Browser ohne WebKit-Scrollbar (Firefox) setzen. */
@supports not selector(::-webkit-scrollbar) {
	.timeline-scroller {
		scrollbar-width: auto;
		scrollbar-color: var(--tl-ink) transparent;
	}
}

.timeline-scroller::-webkit-scrollbar {
	height: 16px;
}

.timeline-scroller::-webkit-scrollbar-track {
	background: transparent;
	border: none;
}

.timeline-scroller::-webkit-scrollbar-thumb {
	background: var(--tl-ink);
	border-radius: 10px;
	border: 3px solid transparent;
	background-clip: padding-box;
}

.timeline-scroller::-webkit-scrollbar-button:single-button {
	display: block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px;
}

.timeline-scroller::-webkit-scrollbar-button:horizontal:decrement {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M7 1 2 5l5 4z' fill='%2316274d'/%3E%3C/svg%3E");
}

.timeline-scroller::-webkit-scrollbar-button:horizontal:increment {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l5 4-5 4z' fill='%2316274d'/%3E%3C/svg%3E");
}

.tl-arrow {
	position: absolute;
	top: calc(50% - 14px);
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--tl-ink);
	background: var(--tl-ink);
	color: var(--tl-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tl-arrow:hover,
.tl-arrow:focus-visible {
	background: var(--tl-accent);
	color: var(--tl-ink);
}

.tl-arrow svg {
	width: 20px;
	height: 20px;
}

@media (min-width: 701px) {
	.timeline-wrap {
		margin-inline: 60px;
	}

	.tl-arrow-left {
		left: -64px;
	}

	.tl-arrow-right {
		right: -64px;
	}
}

/* Breite Fenster: Die Jahreszahlen nutzen die volle Seitenbreite bis zur
   Textkante, die Pfeile sitzen außerhalb. */
@media (min-width: 1240px) {
	/* links 12 px nach außen, damit die erste Jahreszahl auf der Textkante steht
	   und der Hover-Hintergrund samt Eckenrundung Platz hat */
	.timeline-wrap {
		margin-inline: -12px 0;
	}

	.timeline-scroller {
		padding-inline: 12px 0;
	}

	.tl-arrow-left {
		left: -48px;
	}

	.tl-arrow-right {
		right: -60px;
	}
}

@media (max-width: 700px) {
	.timeline-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}

	.timeline-scroller {
		order: 1;
		flex: 1 1 100%;
	}

	.tl-arrow {
		position: static;
		order: 2;
		transform: none;
	}
}

.tl-item {
	scroll-snap-align: start;
	flex: none;
	width: 250px;
	padding-right: 26px;
	position: relative;
}

.link-more {
	font-weight: 700;
	font-size: 0.9rem;
	text-underline-offset: 3px;
}

.tl-item:hover .link-more,
.tl-item:focus-visible .link-more {
	text-decoration: underline;
}

.tl-modal {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
	background: #f4f8fb;
	border-radius: 16px;
	padding: 48px 40px;
	box-shadow: 0 30px 60px rgba(22, 39, 77, 0.35);
	transform: translateY(16px);
	transition: transform 0.25s ease;
}

.modal-overlay.is-open .tl-modal {
	transform: translateY(0);
}

.tl-modal-eyebrow {
	color: var(--color-accent-dark);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0 0 8px;
}

.tl-modal-title {
	font-size: 2rem;
	margin: 0 0 20px;
}

.tl-modal-text p {
	color: var(--color-text-light);
	line-height: 1.7;
	margin: 0 0 16px;
}

@media (max-width: 640px) {
	.tl-modal {
		padding: 40px 24px 28px;
	}
}

.tl-rail {
	position: relative;
	height: 26px;
	margin-bottom: 14px;
}

.tl-rail::before {
	content: "";
	position: absolute;
	left: 0;
	right: -26px;
	top: 50%;
	height: 1px;
	background: currentColor;
}

.tl-item:first-child .tl-rail::before {
	left: 10px;
}

.tl-dot {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: currentColor;
}

.tl-year {
	font-weight: 700;
	font-size: 1.5rem;
	display: block;
	margin-bottom: 8px;
}

.tl-item {
	isolation: isolate;
}

.tl-item::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -12px 14px -12px -12px;
	border-radius: 12px;
	background: transparent;
	transition: background-color 0.2s ease;
}

.tl-item:hover::before,
.tl-item:focus-visible::before {
	background: var(--color-accent-dark);
}

.tl-text {
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0 0 12px;
	min-height: 64px;
}

/* ==========================================================================
   Kontakt-Modal
   ========================================================================== */

.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.contact-modal {
	position: relative;
	width: 100%;
	max-width: 900px;
	min-height: 520px;
	max-height: 90vh;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 30px 60px rgba(22, 39, 77, 0.35);
	transform: translateY(16px);
	transition: transform 0.25s ease;
}

.contact-modal-body {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
}

.contact-modal-success {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	padding: 48px 40px;
	background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent-dark) 100%);
	color: #ffffff;
	border-radius: 16px;
}

.contact-modal-success.is-visible {
	display: flex;
}

.contact-modal-success > *:not(.contact-modal-deco) {
	position: relative;
	z-index: 1;
}

.contact-modal-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-accent);
	margin-bottom: 8px;
}

.contact-modal-success-icon svg {
	width: 32px;
	height: 32px;
}

.contact-modal-success h2 {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0;
}

.contact-modal-success p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 380px;
	margin: 0;
}

.contact-modal-success-close {
	margin-top: 20px;
	border: none;
	border-radius: 8px;
	padding: 14px 32px;
	background: #ffffff;
	color: var(--color-text);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.contact-modal-success-close:hover,
.contact-modal-success-close:focus-visible {
	background: var(--color-accent);
}

#confetti-canvas {
	position: fixed;
	inset: 0;
	z-index: 5000;
	pointer-events: none;
}

.modal-overlay.is-open .contact-modal {
	transform: translateY(0);
}

.modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-text);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-close:hover,
.modal-close:focus-visible {
	background: var(--color-accent);
	color: var(--color-text);
}

.modal-close svg {
	width: 18px;
	height: 18px;
}

.contact-modal-info {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent-dark) 100%);
	color: #ffffff;
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.contact-modal-deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.contact-modal-deco-circle {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.contact-modal-deco-circle--1 {
	width: 260px;
	height: 260px;
	top: -80px;
	right: -100px;
	background: rgba(255, 255, 255, 0.06);
}

.contact-modal-deco-circle--2 {
	width: 140px;
	height: 140px;
	bottom: 40px;
	right: 20px;
	background: rgba(90, 169, 214, 0.15);
	border-color: rgba(90, 169, 214, 0.3);
}

.contact-modal-deco-circle--3 {
	width: 70px;
	height: 70px;
	bottom: -20px;
	left: -20px;
	background: rgba(255, 255, 255, 0.05);
}

.contact-modal-deco-circle--4 {
	width: 40px;
	height: 40px;
	top: 30%;
	left: 12%;
	background: rgba(90, 169, 214, 0.12);
	border-color: rgba(90, 169, 214, 0.25);
}

.contact-modal-deco-circle--5 {
	width: 180px;
	height: 180px;
	bottom: -70px;
	right: 15%;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.1);
}

.contact-modal-deco-circle--6 {
	width: 18px;
	height: 18px;
	top: 18%;
	right: 30%;
	background: rgba(255, 255, 255, 0.2);
}

.contact-modal-info > *:not(.contact-modal-deco):not(.contact-modal-mock) {
	position: relative;
	z-index: 1;
}

.contact-modal-mock {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 190px;
	height: 90px;
	z-index: 1;
}

.contact-modal-mock-bubble {
	position: absolute;
	left: 0;
	background: #ffffff;
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.contact-modal-mock-bubble span {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: #e3e6ea;
}

.contact-modal-mock-bubble--1 {
	top: 0;
	width: 170px;
}

.contact-modal-mock-bubble--1 span:first-child {
	width: 70%;
	margin-bottom: 8px;
}

.contact-modal-mock-bubble--1 span:last-child {
	width: 100%;
}

.contact-modal-mock-bubble--2 {
	top: 58px;
	left: 26px;
	width: 130px;
}

.contact-modal-mock-bubble--2 span {
	width: 100%;
}

.contact-modal-mock-badge {
	position: absolute;
	top: -10px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.contact-modal-mock-badge svg {
	width: 16px;
	height: 16px;
}

.contact-modal-mock-check {
	stroke: var(--color-text);
}

.contact-modal-eyebrow {
	color: var(--color-accent);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0 0 12px;
}

.contact-modal-title {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 16px;
}

.contact-modal-text {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.contact-modal-quote {
	margin: 32px 0 0;
	background: #ffffff;
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.contact-modal-quote-icon {
	width: 24px;
	height: 18px;
	fill: var(--color-accent-dark);
	margin-bottom: 8px;
}

.contact-modal-quote p {
	font-size: 0.9rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 8px;
}

.contact-modal-quote footer {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-light);
}

/* rechte Spalte der Kontaktfenster in sehr hellem Blau, wie die Fenster der vier Welten */
.contact-modal-form {
	background: #f4f8fb;
	padding: 48px 40px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.form-group {
	margin-bottom: 18px;
}

.form-group label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
}

.label-hint {
	font-weight: 400;
	color: var(--color-text-light);
}

.form-group input,
.form-group textarea {
	width: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--color-text);
	/* weiß mit feinem Rahmen, damit die Felder auf dem hellblauen Grund sichtbar bleiben */
	background: #ffffff;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 6px;
	padding: 12px 14px;
	transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

.form-group textarea {
	resize: vertical;
}

.contact-form-submit {
	width: 100%;
	border: none;
	cursor: pointer;
	margin-top: 4px;
}

.form-privacy-note {
	font-size: 0.8rem;
	color: var(--color-text-light);
	margin: 12px 0 0;
}

.form-privacy-note a {
	color: var(--color-accent-dark);
	text-decoration: none;
}

.form-privacy-note a:hover,
.form-privacy-note a:focus-visible {
	text-decoration: underline;
}

.ai-modal {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(22, 39, 77, 0.35);
	transform: translateY(16px);
	transition: transform 0.25s ease;
}

.modal-overlay.is-open .ai-modal {
	transform: translateY(0);
}

.ai-modal-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent-dark) 100%);
	color: #ffffff;
	flex-shrink: 0;
}

.ai-modal-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	flex-shrink: 0;
}

.ai-modal-avatar svg {
	width: 20px;
	height: 20px;
	fill: var(--color-accent);
}

.ai-modal-heading {
	flex: 1;
}

.ai-modal-heading h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.ai-modal-status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
}

.ai-modal-heading p {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 2px 0 0;
}

.ai-modal-header .modal-close {
	position: static;
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.4);
	color: #ffffff;
	flex-shrink: 0;
}

.ai-modal-header .modal-close:hover,
.ai-modal-header .modal-close:focus-visible {
	background: var(--color-accent);
	color: var(--color-text);
}

.ai-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
	background: #f4f8fb;
}

.ai-chat-divider {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
	margin: 0 0 16px;
}

.ai-chat-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

.ai-chat-row--bot {
	align-items: flex-start;
}

.ai-chat-row--user {
	align-items: flex-end;
}

.ai-chat-bubble {
	max-width: 85%;
	font-size: 0.9rem;
	line-height: 1.6;
	padding: 12px 16px;
	border-radius: 14px;
}

.ai-chat-row--bot .ai-chat-bubble {
	background: #ffffff;
	color: var(--color-text);
	border-bottom-left-radius: 4px;
	box-shadow: 0 2px 6px rgba(22, 39, 77, 0.08);
}

.ai-chat-row--user .ai-chat-bubble {
	background: var(--color-accent);
	color: var(--color-text);
	border-bottom-right-radius: 4px;
}

.ai-chat-time {
	font-size: 0.7rem;
	color: var(--color-text-light);
	margin-top: 4px;
	padding: 0 4px;
}

/* Eora: Absätze, Links, Hinweis, Vorschläge und „schreibt …“ */
.ai-chat-bubble p {
	margin: 0;
}

.ai-chat-bubble p + p {
	margin-top: 8px;
}

.ai-chat-bubble a {
	color: var(--color-accent-dark);
	font-weight: 600;
	word-break: break-word;
}

.ai-chat-hinweis {
	margin: 0 0 14px;
	font-size: 0.72rem;
	line-height: 1.5;
	text-align: center;
	color: var(--color-text-light);
}

.ai-chat-vorschlaege {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 16px;
}

.ai-chat-vorschlaege button {
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text);
	background: #ffffff;
	border: 1px solid rgba(47, 143, 150, 0.35);
	border-radius: 999px;
	padding: 7px 14px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ai-chat-vorschlaege button:hover,
.ai-chat-vorschlaege button:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.ai-chat-tippt {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	min-height: 44px;
}

.ai-chat-tippt span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent-dark);
	opacity: 0.35;
	animation: ai-tippt 1.2s ease-in-out infinite;
}

.ai-chat-tippt span:nth-child(2) {
	animation-delay: 0.2s;
}

.ai-chat-tippt span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes ai-tippt {
	0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

.ai-modal-input button:disabled {
	opacity: 0.5;
	cursor: wait;
}

.ai-modal-input {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid rgba(47, 143, 150, 0.2);
	background: #ffffff;
	flex-shrink: 0;
}

.ai-modal-input input {
	flex: 1;
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--color-text);
	/* weiß mit feinem Rahmen, damit die Felder auf dem hellblauen Grund sichtbar bleiben */
	background: #ffffff;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 20px;
	padding: 10px 16px;
}

.ai-modal-input input:focus {
	outline: none;
	border-color: var(--color-accent);
}

.ai-modal-input button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-text);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ai-modal-input button:hover,
.ai-modal-input button:focus-visible {
	background: var(--color-accent-dark);
}

.ai-modal-input button svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 760px) {
	.contact-modal-body {
		grid-template-columns: 1fr;
	}

	.contact-modal-info {
		padding: 40px 28px 24px;
	}

	.contact-modal-form {
		padding: 24px 28px 32px;
	}

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

/* Temporäre Gedankenstütze - vor Veröffentlichung entfernen */
/* ===== Spotlight-Element (Sprechblase + Karte) ===== */
.spot-section {
	padding-top: 160px;
	padding-bottom: 80px;
	background: var(--color-accent);
}

.spot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: visible;
	position: relative;
}

.spot-text {
	position: relative;
	background: var(--color-text);
	border-radius: 64px 0 0 64px;
	padding: 200px 48px 56px 56px;
	color: #ffffff;
}

.spot-bubble {
	position: absolute;
	top: -64px;
	left: 40px;
	width: 380px;
	color: var(--color-text);
	transform: rotate(-12deg);
	transform-origin: left bottom;
}

.spot-bubble-text {
	margin: 0;
	font-size: 2.3rem;
	font-weight: 800;
	line-height: 1.5;
}

.spot-bubble-text span {
	background: #ffffff;
	padding: 2px 20px 6px;
	border-radius: 18px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.spot-sparkle {
	position: absolute;
	top: 20px;
	left: -66px;
	width: 48px;
	height: 48px;
	color: #ffffff;
}

.spot-note {
	position: absolute;
	top: 6px;
	right: -46px;
	width: 56px;
	height: 64px;
	color: #ffffff;
	transform: rotate(12deg);
}

.spot-title {
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 20px;
	color: #ffffff;
}

.spot-lead {
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 32px;
	color: #ffffff;
}

.spot-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.spot-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
	padding: 14px 34px;
}

.spot-btn-outline:hover,
.spot-btn-outline:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

.spot-media {
	border-radius: 0 64px 64px 0;
	overflow: hidden;
	min-height: 420px;
}

.spot-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 35% center;
	display: block;
}

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

	.spot-media {
		border-radius: 0 0 40px 40px;
		min-height: 280px;
		order: 2;
	}

	.spot-text {
		border-radius: 40px 40px 0 0;
		padding: 170px 32px 40px;
	}

	.spot-bubble {
		left: 32px;
		width: 300px;
	}

	.spot-bubble-text {
		font-size: 1.8rem;
	}

	.spot-sparkle {
		left: -40px;
	}
}

@media (max-width: 480px) {
	.spot-section {
		padding-top: 100px;
	}

	.spot-text {
		padding: 150px 24px 32px;
	}

	.spot-bubble {
		left: 24px;
		width: 240px;
		top: -60px;
	}

	.spot-bubble-text {
		font-size: 1.4rem;
	}

	.spot-note {
		display: none;
	}

	.spot-sparkle {
		left: -6px;
		top: -34px;
	}
}

.logo {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.15;
}

.logo-sub {
	display: flex;
	align-self: stretch;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	margin-top: 0;
	font-size: 0.72rem;
	font-weight: 400;
	color: #7b7a8f;
}

.logo-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #7b7a8f;
	flex: none;
}

@media (max-width: 380px) {
	.logo-name {
		font-size: 1.25rem;
	}

	.logo-sub {
		font-size: 0.62rem;
		gap: 3px;
	}
}

/* ===== Kanzlei-Check: dunkles Band, darunter zweispaltige Karte (zu drei Vierteln auf dem Band) ===== */
.feature-section {
	padding: 0;
	background: var(--color-text);
}

.feature-top {
	background: transparent;
	color: #ffffff;
	padding: 80px 0 40px;
}

.feature-top-eyebrow {
	margin: 0 0 12px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-accent);
}

.feature-top-title {
	margin: 0 0 16px;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.2;
}

.feature-top-text {
	max-width: 620px;
	margin: 0;
	line-height: 1.7;
	color: #d9deea;
}

.feature-half {
	position: relative;
	background: linear-gradient(to bottom, transparent 75%, #ffffff 75%);
}

.feature-wrap {
	position: relative;
	z-index: 1;
}

.feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #ececef;
	border-radius: 12px;
}

.feature-media {
	border-radius: 12px 0 0 12px;
	overflow: hidden;
	min-height: 480px;
}

.feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.feature-text {
	padding: 48px;
	border-radius: 0 12px 12px 0;
	/* Farbverlauf von unten rechts (etwas dunkleres Grau) nach oben links (das Grau der Karte) */
	background: linear-gradient(to top left, #dfdfe4 0%, #e6e6ea 40%, #ececef 75%);
}

.feature-title {
	margin: 0 0 16px;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.3;
}

.feature-lead {
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-light);
}

.feature-list {
	margin: 0 0 34px;
}

/* gleiche Schriftgröße, Zeilenhöhe und Farbe wie die übrigen Aufzählungen der Seite.
   Dünne graue Trennlinien zwischen den Punkten; der Abstand bleibt dabei fast gleich. */
.feature-list li {
	position: relative;
	padding: 7px 0 7px 28px;
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--color-text-light);
}

.feature-list li + li {
	border-top: 1px solid rgba(22, 39, 77, 0.12);
}

.feature-list li:first-child {
	padding-top: 0;
}

.feature-list li:first-child::before {
	top: 0.4em;
}

.feature-list li:last-child {
	padding-bottom: 0;
}

.feature-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: calc(0.4em + 7px);
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--color-accent-dark);
	border-bottom: 2px solid var(--color-accent-dark);
	transform: rotate(-45deg);
}

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

	.feature-media {
		border-radius: 12px 12px 0 0;
		min-height: 300px;
	}

	.feature-text {
		border-radius: 0 0 12px 12px;
	}

	.feature-top-title {
		font-size: 1.7rem;
	}

}

@media (max-width: 480px) {
	.feature-text {
		padding: 32px 24px;
	}
}
/* ===== Wechselnde Bild-Text-Blöcke ===== */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: stretch;
	margin-bottom: 56px;
}

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

/* feste Breite, damit das Seitenverhältnis die Höhe bestimmt und nicht umgekehrt:
   sonst übernimmt das Bild die Höhe des Textes daneben und wird zu breit */
.split-media {
	width: 100%;
	min-width: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

/* Die Fotos bei Legal-Tech bis Business sowie bei Speaker und Autor sind 20 % niedriger als 3:2.
   object-fit: cover schneidet dabei nur mehr ab, das Bild wird nicht verzerrt. */
#bereiche .split-media,
#referenzen .split-media {
	aspect-ratio: 15 / 8;
}

.split-reverse .split-media {
	order: 2;
}

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

.split-img-a {
	object-position: 30% center;
}

.split-img-b {
	object-position: 80% center;
}

.split-img-c {
	object-position: 55% center;
}

.split-img-d {
	object-position: 15% center;
}

.split-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.split-text .btn {
	margin-top: auto;
}

.split-img-speaker {
	object-position: 50% 28%;
}

.split-title {
	margin: 0 0 8px;
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1.3;
}

.split-title strong {
	font-weight: 700;
}

.split-text p {
	margin: 0 0 24px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-light);
}

@media (max-width: 900px) {
	.split {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-bottom: 64px;
	}

	.split-reverse .split-media {
		order: 0;
	}

	.split-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.split-text .btn {
	margin-top: auto;
}

.split-title {
		font-size: 1.8rem;
	}
}

/* Letzter Abschnitt direkt über dem Footer: Abstand nach unten kleiner (die Kontaktkarte des Footers braucht den Platz darüber) */
#hobbys,
#faq {
	padding-bottom: 40px;
}

/* ===== Punkte mit Plus-Icon links, Foto mit Chips rechts ===== */
.pt {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: stretch;
}

.pt-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.pt-item {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.pt-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #dcecf7;
	color: var(--color-accent-dark);
}

.pt-icon svg {
	width: 28px;
	height: 28px;
}

.pt-title {
	margin: 4px 0 12px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.pt-item p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
}

.pt-media {
	position: relative;
	min-height: 460px;
	border-radius: 24px;
	overflow: hidden;
}

.pt-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% center;
}

.pt-chips {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.pt-chips li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px 10px 16px;
	background: #ffffff;
	border-radius: 8px;
	font-weight: 600;
}

.pt-chips svg {
	width: 26px;
	height: 26px;
	flex: none;
}

@media (max-width: 900px) {
	.pt {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.pt-media {
		min-height: 360px;
	}
}

/* ===== Produktseite: Kopfbereich, Karten, Schritte ===== */
.pr {
	background: linear-gradient(180deg, #e8f2fa 0%, #f6f9fc 100%);
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 28px;
	padding: 56px 48px;
}

.pr-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	margin-bottom: 72px;
}

.pr-photo {
	aspect-ratio: 1 / 1;
	max-width: 420px;
	overflow: hidden;
	border-radius: 58% 42% 46% 54% / 50% 56% 44% 50%;
}

.pr-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% center;
	display: block;
}

.pr-tags {
	display: flex;
	gap: 8px;
	margin: 0 0 16px;
}

.pr-tag {
	padding: 4px 16px;
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pr-tag-fill {
	background: var(--color-accent);
}

.pr-title {
	margin: 0 0 12px;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
}

.pr-lead {
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.65;
}

.pr-list {
	margin: 0 0 20px;
}

.pr-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 0.9rem;
}

.pr-list svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.pr-note {
	padding: 16px 20px;
	background: #ffffff;
	border-radius: 14px;
	font-size: 0.85rem;
	line-height: 1.6;
}

.pr-note p {
	margin: 0 0 6px;
}

.pr-note-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.pr-note ul {
	list-style: disc;
	padding-left: 20px;
	margin: 0;
}

.pr-heading {
	margin: 0 0 32px;
	text-align: center;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.25;
}

.pr-heading-tight {
	margin-bottom: 48px;
}

.pr-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

.pr-card {
	padding: 28px 24px;
	background: #ffffff;
	border-radius: 14px;
}

.pr-card-icon {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 20px;
}

.pr-card-icon svg {
	width: 100%;
	height: 100%;
}

.pr-card h3,
.pr-step h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.pr-card p,
.pr-step p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
}

.pr-hint {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 72px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--color-text-light);
}

.pr-hint svg {
	width: 24px;
	height: 24px;
	flex: none;
	color: var(--color-accent-dark);
}

.pr-eyebrow {
	margin: 0 0 8px;
	text-align: center;
	font-weight: 600;
	color: var(--color-accent-dark);
}

.pr-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	text-align: center;
}

.pr-step-no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	font-size: 1.7rem;
	font-weight: 700;
	color: #ffffff;
}

.pr-step-no.is-1 { background: var(--color-accent); }
.pr-step-no.is-2 { background: #8fb0c9; }
.pr-step-no.is-3 { background: var(--color-text); }

@media (max-width: 900px) {
	.pr {
		padding: 40px 24px;
	}

	.pr-top {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.pr-photo {
		max-width: 320px;
		margin: 0 auto;
	}

	.pr-cards,
	.pr-steps {
		grid-template-columns: 1fr;
	}
}

/* Über mich: Abschnitt endet nach dem Einleitungstext, die Drei-Welten-Karten folgen direkt darunter */
#ueber-mich {
	padding-bottom: 0;
}

#ueber-mich .section-intro {
	margin-bottom: 0;
}

#welten {
	padding-top: 24px;
	padding-bottom: 0;
}

#bereiche {
	padding-top: 80px;
}

/* ===== Vier Welten: Reiter mit aufklappbaren Punkten ===== */
.wt-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.wt-tab {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 220px;
	padding: 14px 16px 14px 20px;
	border: 0;
	border-radius: 12px;
	background: var(--color-accent);
	color: var(--color-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wt-tab:hover,
.wt-tab:focus-visible {
	background: var(--color-accent-dark);
}

.wt-tab[aria-selected="true"] {
	background: var(--color-text);
	color: #ffffff;
}

/* kleiner Pfeil unter dem aktiven Reiter, zeigt auf die Liste */
.wt-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 16px;
	height: 16px;
	background: var(--color-text);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 3px;
}

.wt-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wt-no {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.wt-tab[aria-selected="true"] .wt-no {
	color: var(--color-accent);
}

.wt-name {
	font-size: 1.15rem;
	font-weight: 700;
}

.wt-chevron {
	flex: none;
	width: 32px;
	height: 32px;
	padding: 6px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--color-text);
	transition: transform 0.2s ease;
}

.wt-tab[aria-selected="true"] .wt-chevron {
	background: var(--color-accent);
	transform: rotate(180deg);
}
.wt-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wt-item {
	background: #ececef;
	border-radius: 12px;
	padding: 0 24px;
	transition: background-color 0.2s ease;
}

.wt-item:hover {
	background: #d3d3d5;
}

.wt-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 15px 0;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.wt-item summary::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: background-size 0.2s ease;
}

.wt-item[open] summary::after {
	background-size: 100% 2px, 2px 0;
}

.wt-item p {
	max-width: 760px;
	margin: 0 0 20px;
	color: var(--color-text-light);
	line-height: 1.7;
}

@media (max-width: 900px) {
	.wt-tab {
		width: calc(50% - 6px);
	}
}

@media (max-width: 480px) {
	.wt-tab {
		padding: 12px 12px 12px 14px;
		gap: 8px;
	}

	.wt-chevron {
		width: 26px;
		height: 26px;
		padding: 4px;
	}

	.wt-name {
		font-size: 1rem;
	}
}

/* ===== Hobby und Privates: dichtes Foto-Mosaik ===== */
.mo {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(260px, auto);
	grid-auto-flow: dense;
	gap: 8px;
}

.mo-tile {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mo-tall {
	grid-row: span 2;
}

.mo-wide {
	grid-column: span 2;
}

/* Foto-Platzhalter: zeigt, was auf das Foto soll */
.mo-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px;
	background: #dcecf7;
	border: 2px dashed var(--color-accent);
	color: var(--color-text);
	text-align: center;
}

.mo-photo-icon svg {
	width: 40px;
	height: 40px;
	color: var(--color-accent-dark);
}

.mo-photo figcaption {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.9rem;
	line-height: 1.4;
}

.mo-photo figcaption strong {
	font-size: 0.95rem;
}

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

/* Foto-Kachel mit echtem Bild: kein gestrichelter Rahmen, das Bild füllt die Kachel */
.mo-photo.mo-img {
	position: relative;
	padding: 0;
	border: none;
	background: #d3d3d5;
}

/* Koala-Foto: bei hochkanten Kacheln so beschnitten, dass Gesicht und Koala zu sehen sind */
.mo-img .mo-img-koala {
	object-position: 28% center;
}

/* Text-Kacheln */
.mo-text {
	overflow-wrap: break-word;
	hyphens: auto;
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: #ececef;
	color: var(--color-text);
}

.mo-text h3 {
	margin: 0 0 10px;
	font-size: 1.1rem;
	line-height: 1.3;
}

.mo-text p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
}

.mo-text .mo-action {
	margin-top: auto;
	padding-top: 16px;
}

.mo-link {
	display: inline-block;
	padding: 7px 10px;
	border: 1.5px solid currentColor;
	border-radius: 6px;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mo-navy .mo-link:hover,
.mo-navy .mo-link:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
}

.mo-accent .mo-link {
	color: var(--color-text);
}

.mo-accent .mo-link:hover,
.mo-accent .mo-link:focus-visible {
	background: var(--color-text);
	border-color: var(--color-text);
	color: #ffffff;
}
.mo-navy {
	background: var(--color-text);
	color: #ffffff;
}

.mo-accent {
	background: var(--color-accent);
	color: var(--color-text);
}

/* Mouse-Over: nur auf den Text-Kacheln, leichte Farbänderung ohne Bewegung (Foto-Kacheln haben keinen) */
.mo-text:hover {
	background: #d3d3d5;
}

.mo-navy:hover {
	background: #2c4577;
}

.mo-accent:hover {
	background: var(--color-accent-dark);
}

@media (max-width: 900px) {
	.mo-link {
		white-space: normal;
	}
}

@media (min-width: 901px) and (max-width: 1160px) {
	.mo-link {
		font-size: 0.68rem;
		padding: 7px 8px;
	}
}

@media (max-width: 900px) {
	.mo {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(200px, auto);
	}

	/* Zweispaltig: Koala-Text (7. Kachel) und Minigolf-Text (11. Kachel) tauschen die
	   Plätze, damit der Koala-Text neben dem Koala-Foto steht */
	.mo > :nth-child(11) {
		order: 1;
	}

	.mo > :nth-child(8),
	.mo > :nth-child(9),
	.mo > :nth-child(10) {
		order: 2;
	}

	.mo > :nth-child(7) {
		order: 3;
	}

	.mo > :nth-child(n+12) {
		order: 4;
	}
}

@media (max-width: 480px) {
	.mo {
		grid-auto-rows: minmax(170px, auto);
	}

	.mo-text {
		padding: 18px;
	}

	.mo-photo {
		padding: 12px;
	}

	/* Nr. 4: Koala-Foto und Koala-Text über die volle Breite untereinander, sonst wird die
	   Fotokachel so schmal und hoch, dass weder Gesicht noch Koala zu sehen sind */
	.mo-koala-foto,
	.mo-koala-text {
		grid-column: 1 / -1;
	}

	.mo-koala-foto {
		aspect-ratio: 1 / 1;
	}

	.mo-img .mo-img-koala {
		object-position: center;
	}
}

/* ===== Große Gedankenstütze im Seitenfluss (vor Veröffentlichung löschen) ===== */
.todo-note-big {
	padding: 48px;
	background: #fff6d6;
	border: 2px dashed var(--color-text);
	border-radius: 12px;
}

/* kleine Gedankenstütze innerhalb eines Abschnitts, gleiche Optik wie die große */
.todo-note-small {
	margin: 0 0 14px;
	padding: 16px 20px;
	background: #fff6d6;
	border: 2px dashed var(--color-text);
	border-radius: 12px;
}

.todo-note-small p {
	margin: 0;
	line-height: 1.6;
}

.todo-note-small p + p {
	margin-top: 8px;
}

.todo-note-small .todo-note-label {
	margin-bottom: 6px;
}

.todo-note-label {
	margin: 0 0 12px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-light);
}

.todo-note-big h2 {
	margin: 0 0 20px;
	font-size: 2rem;
	line-height: 1.25;
}

.todo-note-big ul {
	list-style: disc;
	padding-left: 24px;
	margin: 0;
}

.todo-note-big li {
	margin: 0 0 10px;
	font-size: 1.15rem;
	line-height: 1.6;
}

@media (max-width: 640px) {
	.todo-note-big {
		padding: 28px 22px;
	}

	.todo-note-big h2 {
		font-size: 1.5rem;
	}
}

/* ===== Blog-Karten als Slider ===== */
/* Blog auf dem Hintergrund von "Meine wichtigsten Stationen" (section-accent): Bedienelemente angepasst */
.section-accent .hl::before,
.section-accent .hl::after {
	background: #ffffff;
}

/* Blog-Slider auf dem Hintergrund von "Meine wichtigsten Stationen": Bedienelemente angepasst */
#blog .bl-arrow {
	background: var(--color-text);
	color: #ffffff;
}

#blog .bl-arrow:hover,
#blog .bl-arrow:focus-visible {
	background: #2c4577;
}

#blog .bl-page {
	color: rgba(22, 39, 77, 0.7);
}

#blog .bl-page:hover,
#blog .bl-page:focus-visible,
#blog .bl-page[aria-current="true"] {
	color: var(--color-text);
}

#blog .bl-all {
	color: var(--color-text);
}

#blog .bl-all:hover,
#blog .bl-all:focus-visible {
	color: #ffffff;
}

.bl-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 8px;
}

.bl-head .section-title {
	margin-bottom: 0;
}

.bl-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--color-accent-dark);
	white-space: nowrap;
}

.bl-all svg {
	width: 18px;
	height: 18px;
}

.bl-all:hover,
.bl-all:focus-visible {
	color: var(--color-text);
	text-decoration: underline;
}

.bl-track {
	--bl-visible: 3;
	display: flex;
	gap: 24px;
	padding-top: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.bl-track::-webkit-scrollbar {
	display: none;
}

.bl-card {
	position: relative;
	display: block;
	flex: 0 0 calc((100% - (var(--bl-visible) - 1) * 24px) / var(--bl-visible));
	scroll-snap-align: start;
	background: var(--color-text);
	color: #ffffff;
	border-radius: 12px;
	transition: background-color 0.2s ease;
}

.bl-card:hover,
.bl-card:focus-visible {
	background: #2c4577;
}

.bl-media {
	aspect-ratio: 16 / 9;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

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

.bl-pos-1 { object-position: 30% center; }
.bl-pos-2 { object-position: 80% center; }
.bl-pos-3 { object-position: 55% center; }
.bl-pos-4 { object-position: 10% center; }
.bl-pos-5 { object-position: 65% center; }
.bl-pos-6 { object-position: 40% center; }
.bl-pos-7 { object-position: 90% center; }
.bl-pos-8 { object-position: 20% center; }
.bl-pos-9 { object-position: 72% center; }
.bl-pos-10 { object-position: 48% center; }

.bl-body {
	padding: 20px 24px 24px;
}

.bl-meta {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: #d9deea;
}

.bl-meta strong {
	font-weight: 400;
	color: #ffffff;
}

.bl-title {
	margin: 0 0 10px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bl-text {
	margin: 0 0 14px;
	font-size: 0.9rem;
	line-height: 1.6;
	min-height: 6.4em;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bl-more {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-accent);
}

.bl-card:hover .bl-more,
.bl-card:focus-visible .bl-more {
	text-decoration: underline;
}

.bl-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.bl-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.bl-arrow svg {
	width: 16px;
	height: 16px;
}

.bl-arrow:hover:not(:disabled),
.bl-arrow:focus-visible:not(:disabled) {
	background: var(--color-accent-dark);
}

.bl-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
}

.bl-page {
	min-width: 0;
	height: 26px;
	margin: 0 6px;
	padding: 0 2px;
	font-size: 0.85rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--color-text-light);
	font: inherit;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.bl-page:hover,
.bl-page:focus-visible {
	color: var(--color-text);
}

.bl-page[aria-current="true"] {
	color: var(--color-text);
	font-weight: 700;
	border-bottom-color: var(--color-text);
}
@media (max-width: 900px) {
	.bl-track {
		--bl-visible: 2;
	}
}

@media (max-width: 640px) {
	.bl-track {
		--bl-visible: 1;
	}

	.bl-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* Referenzen: Foto-Platzhalter füllen die Bildfläche der Bild-Text-Blöcke */
.split-media .mo-photo {
	height: 100%;
}

#referenzen .section-title + .split {
	margin-top: 65px;
}

/* Textlink im Fließtext: erkennbar durch Farbe, beim Mouse-Over unterstrichen */
.text-link {
	color: var(--color-accent-dark);
	font-weight: 600;
	transition: color 0.2s ease;
}

.text-link:hover,
.text-link:focus-visible {
	color: var(--color-text);
	text-decoration: underline;
}

/* ===== Footer ===== */
.site-footer {
	--footer-side-width: 400px;
	position: relative;
	margin-top: 190px;
	padding: 150px 0 24px;
	color: #ffffff;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-text);
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}

.footer-inner {
	position: relative;
	z-index: 1;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.footer-top {
	position: absolute;
	top: -150px;
	left: 24px;
	right: 24px;
	transform: translateY(-35%);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	z-index: 2;
}

.footer-next {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	background: var(--color-accent);
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	transition: background-color 0.2s ease;
}

.footer-next svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.footer-next:hover,
.footer-next:focus-visible {
	background: var(--color-accent-dark);
}

/* Jetzt zur naechsten Seite und daneben der Lebenslauf als zweiter, zurueckhaltender Button */
.footer-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.footer-cv {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 19px;
	border: 1px solid rgba(47, 143, 150, 0.38);
	border-radius: 12px;
	background: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.footer-cv svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.footer-cv:hover,
.footer-cv:focus-visible {
	border-color: var(--color-accent);
	background: #eef6fb;
}
.footer-contact {
	position: relative;
	flex: none;
	width: var(--footer-side-width);
	padding: 75px 48px 30px;
	background: var(--color-accent);
	color: var(--color-text);
	border-radius: 12px;
	z-index: 2;
}

.footer-contact-art {
	position: absolute;
	top: -58px;
	left: 23px;
	width: 150px;
	height: 118px;
	overflow: visible;
}

.footer-contact-name {
	margin: 0 0 24px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.footer-contact-address {
	margin: 0 0 28px;
	font-size: 1rem;
}

.footer-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	margin: 0 -8px;
	padding: 5px 8px;
	border-bottom: 1px solid var(--color-text);
	transition: background-color 0.2s ease;
}

.footer-contact-list svg {
	width: 22px;
	height: 22px;
	flex: none;
	fill: var(--color-text);
}

.footer-contact-list a {
	text-decoration: none;
	color: var(--color-text);
}

.footer-contact-hint {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-text);
}

.footer-contact-hint svg {
	width: 22px;
	height: 22px;
	flex: none;
}

.footer-contact-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	text-decoration: none;
	color: var(--color-text);
	cursor: pointer;
}

/* Die ganze Zeile ist klickbar und hat beim Mouse-Over einen Hintergrund (keine Unterstreichung) */
/* Der Eora-Button trägt zusätzlich die Klasse ai-trigger (runder Kopfzeilen-Button): dessen Hover-Hintergrund darf hier nicht erscheinen */
.footer-contact-link:hover,
.footer-contact-link:focus-visible {
	background: none;
}

.footer-contact-list a::after,
.footer-contact-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.footer-contact-list li:hover,
.footer-contact-list li:focus-within {
	background: var(--color-accent-dark);
}
.footer-main {
	display: grid;
	grid-template-columns: 1fr var(--footer-side-width);
	gap: 48px;
	align-items: start;
}

.footer-about {
	max-width: 560px;
}

.footer-topics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-top: 116px;
}

.footer-title {
	margin: 0 0 12px;
	font-size: 2.57rem;
	font-weight: 200;
	line-height: 1.3;
}

.footer-title strong {
	font-weight: 700;
}

.footer-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #d9deea;
}
.footer-heading {
	margin: 0 0 14px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	margin: 0 0 10px;
	font-size: 0.85rem;
}

.footer-links a {
	color: #ffffff;
	transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--color-accent);
	text-decoration: underline;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.8rem;
}

.footer-copy {
	margin: 0;
	color: #d9deea;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal a {
	color: #ffffff;
	transition: color 0.2s ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
	color: var(--color-accent);
	text-decoration: underline;
}
@media (max-width: 900px) {
	.site-footer {
		margin-top: 40px;
		padding-top: 90px;
	}

	.site-footer::before {
		clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
	}

	.footer-inner {
		display: flex;
		flex-direction: column;
	}

	.footer-top {
		position: static;
		transform: none;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
		margin-bottom: 48px;
	}

	.footer-contact {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: 420px;
		align-self: flex-end;
		margin: 0 0 48px;
	}

	.footer-main {
		grid-template-columns: 1fr;
	}

	.footer-about {
		max-width: none;
	}

	.footer-topics {
		margin-top: 0;
	}
}

/* Nr. 2 (641–900 px): Titel und Text links neben der Kontaktbox, keine leeren Flächen */
@media (min-width: 641px) and (max-width: 900px) {
	.footer-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(310px, 44vw, 380px);
		column-gap: 32px;
	}

	.footer-top,
	.footer-main {
		display: contents;
	}

	/* Button „Jetzt zur nächsten Seite" oberhalb des Footers auf weißem Grund */
	.site-footer {
		margin-top: 110px;
	}

	.footer-actions {
		position: absolute;
		top: -190px;
		left: 24px;
	}

	.footer-about {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
	}

	.footer-title {
		font-size: 1.9rem;
	}

	.footer-text {
		font-size: 0.9rem;
	}

	.footer-contact {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 70px 26px 28px;
	}

	.footer-contact-name {
		font-size: 1.35rem;
	}

	.footer-contact-list {
		font-size: 0.92rem;
	}

	.footer-topics {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 56px;
	}

	.footer-bottom {
		grid-column: 1 / -1;
		grid-row: 4;
	}
}

@media (max-width: 480px) {
	.footer-contact {
		padding: 80px 28px 32px;
		align-self: stretch;
	}

	.footer-main {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-topics {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ==========================================================================
   Blog-Beitrag (Einzelseite): links der Text, rechts die mitscrollende Autor-Box
   ========================================================================== */

/* Lesefortschritt: dünner Balken direkt unter dem Header, Breite setzt script.js */
.post-progress {
	position: fixed;
	top: var(--header-height);
	left: 0;
	right: 0;
	height: 4px;
	z-index: 900;
	pointer-events: none;
}

.post-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--color-accent);
	transition: width 0.1s linear;
}

.post {
	padding: 56px 0 96px;
}

.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 64px;
	align-items: start;
}

.post-main {
	min-width: 0;
}

/* Kopf: kleines Themenfeld, Überschrift, Unterzeile, Einleitung */
.post-eyebrow {
	color: var(--color-accent-dark);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.post-title {
	font-size: 2.6rem;
	line-height: 1.15;
	margin: 0 0 16px;
}

.post-subtitle {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text-light);
	margin: 0 0 28px;
}

.post-lead {
	font-size: 1.15rem;
	line-height: 1.75;
	margin: 0;
	padding-left: 24px;
	border-left: 4px solid var(--color-accent);
}

.post-figure {
	margin: 40px 0 44px;
}

.post-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 16px;
}

/* Fließtext */
.post-body {
	font-size: 1.0625rem;
	line-height: 1.8;
}

.post-body p {
	margin: 0 0 22px;
}

.post-body h2 {
	font-size: 1.55rem;
	line-height: 1.3;
	margin: 52px 0 18px;
	scroll-margin-top: calc(var(--header-height) + 24px);
}

.post-body h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-accent);
	margin-bottom: 14px;
}

.post-body h2:first-child {
	margin-top: 0;
}

.post-punch {
	font-weight: 600;
}

/* Hellgraue Box, z. B. für die vier Entscheidungen */
.post-box {
	background: #f2f3f5;
	border-radius: 16px;
	padding: 28px 32px 8px;
	margin: 0 0 22px;
}

.post-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid rgba(47, 143, 150, 0.3);
}

.post-footer-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--color-accent-dark);
	transition: color 0.2s ease;
}

.post-footer-link svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.post-footer-link:hover,
.post-footer-link:focus-visible {
	color: var(--color-text);
}

/* Autor-Box: dunkelblau, bleibt beim Scrollen unter dem Header stehen */
.post-aside {
	position: sticky;
	top: calc(var(--header-height) + 16px);
	background: var(--color-text);
	color: #ffffff;
	border-radius: 16px;
}

/* Der Inhalt scrollt bei niedrigen Fenstern in sich; das Popover liegt bewusst außerhalb, damit es nicht abgeschnitten wird */
.post-aside-scroll {
	max-height: calc(100vh - var(--header-height) - 32px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
	border-radius: 16px;
	padding: 24px;
}

.post-aside-scroll::-webkit-scrollbar {
	width: 6px;
}

.post-aside-scroll::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
}

/* Foto links, daneben Name und Badge „Über den Autor" */
.post-author {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.post-author-photo {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: #ffffff;
	border: 3px solid var(--color-accent);
}

.post-author-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(2.1);
	transform-origin: 50% 24%;
}

.post-author-name {
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 8px;
}

.post-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 5px 12px 5px 8px;
	cursor: help;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.post-badge svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.post-aside:has(.post-badge:hover) .post-badge,
.post-aside:has(.post-popover:hover) .post-badge,
.post-badge:focus-visible {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
	outline: none;
}

/* Popover: helle Karte mit allen Qualifikationen, erscheint bei Mouse-Over (oder Fokus/Tippen) über dem Inhalt der Box */
.post-popover {
	position: absolute;
	top: 88px;
	left: 8px;
	right: 8px;
	z-index: 5;
	background: #ffffff;
	color: var(--color-text);
	border-radius: 14px;
	padding: 18px 12px 6px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* unsichtbare Brücke, damit das Popover beim Hinüberfahren mit der Maus nicht verschwindet */
.post-popover::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

.post-aside:has(.post-badge:hover) .post-popover,
.post-aside:has(.post-badge:focus-visible) .post-popover,
.post-aside:has(.post-popover:hover) .post-popover {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.post-popover-group {
	margin: 0 0 12px;
}

.post-popover-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
	margin: 0 0 6px;
}

.post-popover-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.post-popover-chips li {
	background: #dcecf7;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 0.73rem;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.post-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	margin-bottom: 14px;
}

.post-facts li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.post-facts span {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.post-facts strong {
	font-size: 0.95rem;
	font-weight: 600;
}

.post-aside-heading {
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0 0 10px;
}

.post-toc ol {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	counter-reset: toc;
}

.post-toc li {
	counter-increment: toc;
}

.post-toc a {
	display: flex;
	gap: 10px;
	padding: 4px 0;
	font-size: 0.85rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.2s ease;
}

.post-toc a::before {
	content: counter(toc, decimal-leading-zero);
	flex: none;
	width: 1.6rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 0.8rem;
	padding-top: 2px;
	color: var(--color-accent);
}

.post-toc a:hover,
.post-toc a:focus-visible,
.post-toc a.is-active {
	color: #ffffff;
}

.post-toc a.is-active {
	font-weight: 600;
}

.post-aside-btn {
	display: block;
	width: 100%;
	padding: 14px 20px;
	text-align: center;
}

/* Niedrige Bildschirme (z. B. 15-Zoll-Laptop): Box wird gestaffelt kompakter, damit sie nie unten aus dem Fenster läuft */
@media (min-width: 901px) and (max-height: 690px) {
	.post-aside-scroll {
		padding: 20px;
	}

	.post-author {
		margin-bottom: 14px;
	}

	.post-popover {
		top: 80px;
	}

	.post-facts {
		padding: 10px 0;
		margin-bottom: 10px;
	}

	.post-aside-heading {
		margin-bottom: 6px;
	}

	.post-toc ol {
		margin-bottom: 12px;
	}

	.post-toc a {
		display: block;
		padding: 3px 0;
		font-size: 0.8rem;
		line-height: 1.4;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.post-toc a::before {
		display: inline-block;
		width: 24px;
	}

	.post-aside-btn {
		padding: 11px 16px;
	}
}

@media (min-width: 901px) and (max-height: 585px) {
	.post-toc {
		display: none;
	}
}

/* Blog-Übersicht: echtes Foto in der Kachel (liegt unter Themenfeld und Lesezeit) */
.blog-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-thumb .blog-tag,
.blog-thumb .blog-time {
	z-index: 1;
}

@media (max-width: 900px) {
	.post {
		padding: 40px 0 72px;
	}

	.post-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.post-aside {
		position: relative;
	}

	.post-aside-scroll {
		max-height: none;
		overflow: visible;
	}

	.post-toc {
		display: none;
	}

	.post-title {
		font-size: 2.1rem;
	}
}

@media (max-width: 640px) {
	.post {
		padding: 32px 0 56px;
	}

	.post-title {
		font-size: 1.85rem;
	}

	.post-subtitle {
		font-size: 1.05rem;
	}

	.post-lead {
		font-size: 1.05rem;
		padding-left: 16px;
	}

	.post-figure {
		margin: 28px 0 32px;
	}

	.post-figure img {
		border-radius: 12px;
	}

	.post-body {
		font-size: 1rem;
		line-height: 1.75;
	}

	.post-body h2 {
		font-size: 1.35rem;
		margin-top: 40px;
	}

	.post-box {
		padding: 20px 20px 2px;
	}
}

/* ==========================================================================
   Smartphone (nur bis 640 px Breite): Feinschliff. Tablet und Desktop bleiben unverändert.
   ========================================================================== */
@media (max-width: 640px) {
	/* Startbereich kompakter: kleine Überschrift weiter oben, weniger Leerraum unter den Buttons */
	.hero {
		padding-top: 8px;
		padding-bottom: 16px;
	}

	.hero-inner {
		padding: 16px 24px 24px;
	}

	/* Bild-Text-Blöcke: kleinerer senkrechter Abstand */
	.split {
		gap: 20px;
		margin-bottom: 32px;
	}

	/* Wissen teilen: weniger Abstand zwischen der Überschrift und dem ersten Foto */
	#referenzen .section-title + .split {
		margin-top: 24px;
	}

	/* Vier Welten: alle vier Reiter nebeneinander und immer sichtbar, Pfeil zeigt so immer auf die Liste darunter */
	.wt-tabs {
		flex-wrap: nowrap;
		gap: 6px;
		margin-bottom: 24px;
	}

	.wt-tab {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 2px;
		padding: 10px 8px;
	}

	.wt-text {
		min-width: 0;
	}

	.wt-no {
		font-size: 0.65rem;
	}

	.wt-name {
		font-size: 0.78rem;
		line-height: 1.25;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.wt-chevron {
		display: none;
	}

	.wt-tab[aria-selected="true"]::after {
		bottom: -7px;
		width: 14px;
		height: 14px;
	}

	/* Quiz-Links: Das letzte Wort ("testen" bzw. "erraten") entfällt, damit der Link in die Kachel passt */
	.mo-link-extra {
		display: none;
	}

	/* Kennzahlen: nie breiter als der Bildschirm */
	.stat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Footer: Karte mittig; "Jetzt zur nächsten Seite" als blauer Button in voller Breite direkt über dem Copyright (ohne Trennlinie) */
	.footer-top {
		display: contents;
	}

	.footer-contact {
		order: 0;
		align-self: stretch;
		width: 100%;
		max-width: none;
	}

	.footer-main {
		order: 1;
	}

	/* Buttonzeile: Jetzt zur naechsten Seite ueber Lebenslauf, beide in voller Breite */
	.footer-actions {
		order: 2;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
		margin: 40px 0 24px;
	}

	.footer-cv {
		justify-content: center;
		width: 100%;
		padding: 15px 36px;
		border-color: var(--color-text);
		border-radius: 6px;
		order: 3;
	}

	.footer-next {
		order: 2;
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		padding: 16px 36px;
		background: var(--color-accent);
		border-radius: 6px;
		color: var(--color-text);
	}

	.footer-next:hover,
	.footer-next:focus-visible {
		background: var(--color-accent-dark);
	}

	.footer-bottom {
		order: 3;
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 0;
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	/* Datenschutz und Impressum stehen oben, darunter eine dünne Trennlinie, dann das Copyright */
	.footer-legal {
		width: 100%;
		padding-bottom: 14px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.footer-copy {
		padding-top: 14px;
	}
}

@media (max-width: 360px) {
	.wt-tab {
		padding: 10px 6px;
	}

	.wt-name {
		font-size: 0.7rem;
	}
}

@media (max-width: 400px) {
	.stat-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Vier Welten auf Tablets: die vier Reiter stehen ebenfalls immer in einer Zeile nebeneinander, der Pfeil-Kreis bleibt sichtbar (etwas kleiner) */
@media (min-width: 641px) and (max-width: 1010px) {
	.wt-tabs {
		flex-wrap: nowrap;
		gap: 8px;
		margin-bottom: 24px;
	}

	.wt-tab {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		padding: 12px 10px 12px 14px;
		gap: 6px;
	}

	.wt-text {
		min-width: 0;
	}

	.wt-name {
		font-size: 0.95rem;
		line-height: 1.25;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.wt-chevron {
		width: 24px;
		height: 24px;
		padding: 4px;
	}
}
/* Hinweis auf KI-generierte Bilder, klein unten rechts im Bild */
.split-media:has(> .ai-tag),
.feature-media:has(> .ai-tag),
.bl-media:has(> .ai-tag),
.mo-photo:has(> .ai-tag),
.blog-thumb:has(> .ai-tag),
.post-figure:has(> .ai-tag) {
	position: relative;
}

.ai-tag {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 5px;
	background: rgba(240, 243, 247, 0.72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	color: #4d4f57;
	font-size: 0.6875rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
	white-space: nowrap;
	pointer-events: none;
}

@media (max-width: 640px) {
	.ai-tag {
		right: 6px;
		bottom: 6px;
		padding: 2px 6px;
		font-size: 0.625rem;
	}
}

/* ==========================================================================
   Weiterführende Sektion unter den Blogbeiträgen (xl = Cross-Links):
   führt zu Zur Person und den vier Themenseiten.
   Mouse-Over nur farblich, wie überall auf der Seite.
   ========================================================================== */

/* nummerierte Liste mit Anriss je Seite */
.xl-soft {
	background: #f4f8fb;
}

/* Seite Zur Person: weißer Hintergrund, schließt direkt an das Hobby-Mosaik an,
   deshalb weniger Abstand oben und unten */
.xl-section--plain {
	padding: 40px 0 56px;
}

/* auf weißem Grund wäre der weiße Mouse-Over unsichtbar: dort zart hellblau */
.xl-section--plain .xl-row:hover,
.xl-section--plain .xl-row:focus-visible {
	background: #f1f7fb;
}

.xl-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	border-top: 1px solid rgba(47, 143, 150, 0.3);
}

.xl-row {
	display: grid;
	grid-template-columns: 64px 1fr 40px;
	align-items: center;
	gap: 20px;
	padding: 22px 14px;
	border-bottom: 1px solid rgba(47, 143, 150, 0.3);
	color: var(--color-text);
	transition: background-color 0.2s ease;
}

.xl-list li:first-child .xl-row {
	border-top: 0;
}

.xl-row:hover,
.xl-row:focus-visible {
	background: #ffffff;
}

/* Symbol je Seite: feine blaue Linienzeichnung ohne Kreis,
   beim Überfahren wechselt nur die Farbe */
.xl-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent-dark);
	transition: color 0.2s ease;
}

.xl-icon svg {
	width: 34px;
	height: 34px;
}

.xl-row:hover .xl-icon,
.xl-row:focus-visible .xl-icon {
	color: var(--color-text);
}

.xl-row-title {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
}

/* Anrisstext bricht bei etwa 90 % der Breite um statt bis zum Rand zu laufen */
.xl-row-text {
	display: block;
	max-width: 90%;
	margin-top: 3px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--color-text-light);
}

.xl-row-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--color-text);
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.xl-row-arrow svg {
	width: 18px;
	height: 18px;
}

.xl-row:hover .xl-row-arrow,
.xl-row:focus-visible .xl-row-arrow {
	background: var(--color-text);
	color: #ffffff;
}

@media (max-width: 560px) {
	.xl-row {
		grid-template-columns: 40px 1fr 32px;
		gap: 12px;
		padding: 18px 6px;
	}

	.xl-icon svg {
		width: 28px;
		height: 28px;
	}

	.xl-row-text {
		max-width: none;
	}

	.xl-row-arrow {
		width: 32px;
		height: 32px;
	}
}

/* ==========================================================================
   Mehrwert und Ausblick (Startseite, zwischen Autor und Blog)
   mw = Mehrwert. Mouse-Over nur farblich, wie überall auf der Seite.
   ========================================================================== */

.mw-section {
	background: #f4f8fb;
}

.mw-intro {
	max-width: 780px;
}

/* drei Säulen: Recht, Technik, Business */
.mw-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.mw-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 26px 24px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 14px;
	background: #ffffff;
	color: var(--color-text);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mw-card:hover,
.mw-card:focus-visible {
	border-color: var(--color-accent);
	background: #eef6fb;
}

.mw-card-icon {
	margin-bottom: 6px;
	color: var(--color-accent-dark);
}

.mw-card-icon svg {
	width: 36px;
	height: 36px;
}

.mw-card-kicker {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.mw-card-title {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
}

.mw-card-text {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-text-light);
}

.mw-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-text);
	transition: color 0.2s ease;
}

.mw-card-link svg {
	width: 16px;
	height: 16px;
}

.mw-card:hover .mw-card-link,
.mw-card:focus-visible .mw-card-link {
	color: var(--color-accent-dark);
}

/* drei feine Linien führen von den Säulen zur Brücke */
.mw-connect {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	height: 52px;
}

.mw-connect span {
	position: relative;
}

.mw-connect span::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 16px;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--color-accent);
}

/* Pfeilspitze am unteren Ende: geschlossenes Dreieck */
.mw-connect span::after {
	content: "";
	position: absolute;
	bottom: 8px;
	left: 50%;
	width: 0;
	height: 0;
	border-top: 9px solid var(--color-accent);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	transform: translateX(-50%);
}

/* die Brücke: dunkelblaues Band, verlinkt auf Legal-Tech */
.mw-bridge {
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: center;
	gap: 24px;
	padding: 28px 32px;
	border-radius: 16px;
	background: var(--color-text);
	color: #ffffff;
	transition: background-color 0.2s ease;
}

.mw-bridge:hover,
.mw-bridge:focus-visible {
	background: #243d6e;
}

.mw-bridge-icon {
	color: var(--color-accent);
}

.mw-bridge-icon svg {
	width: 44px;
	height: 44px;
}

.mw-bridge-kicker {
	display: block;
	margin-bottom: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.mw-bridge-title {
	display: block;
	margin-bottom: 6px;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
}

.mw-bridge-text {
	display: block;
	max-width: 760px;
	font-size: 0.97rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.mw-bridge-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mw-bridge-arrow svg {
	width: 18px;
	height: 18px;
}

.mw-bridge:hover .mw-bridge-arrow,
.mw-bridge:focus-visible .mw-bridge-arrow {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-text);
}

/* Ausblick auf dunklem Grund */
.mw-open .mw-open-intro {
	max-width: 820px;
	color: rgba(255, 255, 255, 0.8);
}

.mw-open-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.mw-open-item {
	padding: 26px 26px 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.2s ease;
}

/* gleicher Mouse-Over wie bei den sechs Artikeln */
.mw-open-item:hover {
	background: rgba(255, 255, 255, 0.16);
}

.mw-open-label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.mw-open-title {
	margin: 0 0 8px;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
}

.mw-open-text {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

.mw-open-cta {
	margin-top: 36px;
}

@media (max-width: 900px) {
	.mw-grid,
	.mw-open-grid {
		grid-template-columns: 1fr;
	}

	.mw-connect {
		display: none;
	}

	.mw-grid {
		margin-bottom: 20px;
	}
}

@media (max-width: 560px) {
	.mw-bridge {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 24px 22px;
	}

	.mw-bridge-arrow {
		justify-self: start;
	}
}

/* KI-Buttons als eigener Abschnitt (Legal-Tech-Seite) */
.eora-section .eora-cta {
	margin-top: 0;
}

/* Nur ein Eora-Button (Blog): eine Spalte, mittig */
.eora-cta--einzeln {
	grid-template-columns: max-content;
}

/* Band „An der Schnittstelle" in Akzentblau (wie der Blog-Bereich) */

.mw-bridge--accent {
	background: var(--color-accent);
	color: var(--color-text);
}

.mw-bridge--accent:hover,
.mw-bridge--accent:focus-visible {
	background: var(--color-accent-dark);
}

.mw-bridge--accent .mw-bridge-icon,
.mw-bridge--accent .mw-bridge-kicker {
	color: var(--color-text);
}

.mw-bridge--accent .mw-bridge-text {
	color: rgba(22, 39, 77, 0.85);
}

.mw-bridge--accent .mw-bridge-arrow {
	border-color: rgba(22, 39, 77, 0.45);
}

.mw-bridge--accent:hover .mw-bridge-arrow,
.mw-bridge--accent:focus-visible .mw-bridge-arrow {
	border-color: var(--color-text);
	background: var(--color-text);
	color: #ffffff;
}

/* Fenster mit Kurzinfo zu den vier Welten (Startseite, Bereich unter dem Akkordeon) */
/* 40 % breiter als das Zeitstrahl-Fenster, weil hier längere Texte hineinkommen */
.bereich-modal {
	max-width: 896px;
}

.bereich-modal-btn {
	margin-top: 8px;
}

/* Pfeil zum Weiterscrollen in den Fenstern der vier Welten, klebt am unteren Rand */
.tl-modal .bereich-scroll-hint {
	position: sticky;
	/* negativ, weil das Fenster unten 48 px Innenabstand hat: so sitzt der Pfeil 14 px über der Unterkante */
	bottom: -34px;
	z-index: 2;
	margin: 16px auto 0;
}

/* Lebenslauf-Button neben Lassen Sie uns sprechen (Startseite, dunkler Grund) */
.mw-open-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.mw-cv-btn {
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: transparent;
	color: #ffffff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mw-cv-btn:hover,
.mw-cv-btn:focus-visible {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
}

/* Empfehlung im Abschnitt „Bereit für das nächste Kapitel“: Box wie die drei Kacheln darüber, komplett anklickbar, ganzes Schreiben im Fenster */
.rec-card {
	position: relative;
	display: block;
	margin-top: 20px;
	padding: 30px 32px 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	text-decoration: none;
	overflow: hidden;
}

.rec-quote-box {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 28px 32px;
	border-radius: 10px;
	background: #ffffff;
}

.rec-quote {
	flex: none;
	width: 44px;
	height: 37px;
	margin-top: 4px;
	color: var(--color-accent);
}

.rec-eyebrow {
	display: block;
	margin-bottom: 10px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.rec-text {
	display: block;
	max-width: 860px;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-text);
}

.rec-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rec-author {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.rec-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-accent);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.rec-author-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rec-name {
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
}

.rec-role {
	font-size: 0.88rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.7);
}

.rec-btn {
	flex: none;
}

.rec-card:focus-visible .rec-btn {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
}

.rec-modal-role {
	margin: -8px 0 22px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--color-text-light);
}

.rec-letter {
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 8px;
	background: #ffffff;
	overflow: hidden;
}

.rec-letter img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.rec-card {
		padding: 26px 22px 24px;
	}

	.rec-quote-box {
		flex-direction: column;
		gap: 12px;
		padding: 22px 20px;
	}

	.rec-quote {
		width: 34px;
		height: 28px;
	}

	.rec-text {
		font-size: 1.05rem;
	}

	.rec-author {
		flex-basis: 100%;
	}
}

/* Rechtliche Seiten (Impressum, Datenschutz): schlichte Textseite ohne Hero */
/* erste Sektion direkt unter der kleinen Hero-Section: fester Abstand nach oben (gilt für alle Unterseiten mit .subhero) */
.subhero + .section,
.subhero + .blog-hero {
	padding-top: 72px;
}

.legal-title {
	margin-bottom: 28px;
}

.legal-text {
	max-width: 820px;
	line-height: 1.7;
	color: var(--color-text);
}

.legal-text h2 {
	margin: 36px 0 12px;
	font-size: 1.3rem;
}

.legal-text p {
	margin: 0 0 14px;
}

/* Abgespeckte Hero-Section für Unterseiten: Wandhintergrund wie auf der Startseite, rechts Foto im Kreis mit Ringen */
.subhero {
	position: relative;
	overflow: hidden;
	background: #ffffff;
}

.subhero-bg {
	position: absolute;
	inset: 0;
	background-color: #d3d3d5;
	background-image: url('img/hero-wall.jpg');
	background-size: cover;
	background-position: center;
	border-bottom-left-radius: 140px;
}

.subhero-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 38px 24px 38px;
}

.subhero-eyebrow {
	margin: 0 0 10px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.subhero-title {
	margin: 0 0 14px;
	font-weight: 700;
	font-size: 3rem;
	line-height: 1.1;
	color: var(--color-text);
}

.subhero-desc {
	max-width: 520px;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--color-text);
}

.subhero-photo {
	position: relative;
	flex: none;
	width: 220px;
	height: 220px;
}

.subhero-ring {
	position: absolute;
	border-radius: 50%;
}

.subhero-ring--outer {
	inset: 0;
	border: 1px solid rgba(22, 39, 77, 0.25);
}

.subhero-ring--mid {
	inset: 14px;
	border: 6px solid var(--color-accent);
}

.subhero-circle {
	position: absolute;
	inset: 30px;
	border-radius: 50%;
	overflow: hidden;
	background: #ececef;
	border: 3px solid #ffffff;
}

.subhero-circle img {
	position: absolute;
	left: 50%;
	top: -13%;
	width: 138%;
	max-width: none;
	transform: translate(-53%, 10px);
}

.subhero-btn {
	margin-top: 22px;
}

/* Impressum: drei Angaben nebeneinander */
.legal-grid {
	display: grid;
	grid-template-columns: 1fr 1.35fr 1fr;
	gap: 20px;
}

.legal-card {
	padding: 26px 26px 24px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 14px;
	background: #ffffff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.legal-card:hover {
	border-color: var(--color-accent);
	background: #f4f8fb;
}

.legal-card a {
	white-space: nowrap;
}

.legal-card p {
	margin: 0;
	line-height: 1.7;
	color: var(--color-text);
}

.legal-card .legal-card-label {
	margin-bottom: 10px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

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

	.subhero-photo {
		width: 200px;
		height: 200px;
	}

	.subhero-title {
		font-size: 2.4rem;
	}
}

@media (max-width: 640px) {
	.subhero-bg {
		border-bottom-left-radius: 80px;
	}

	.subhero-inner {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 28px;
		padding: 40px 24px 52px;
	}

	.subhero-photo {
		width: 150px;
		height: 150px;
	}

	.subhero-ring--mid {
		inset: 9px;
		border-width: 4px;
	}

	.subhero-circle {
		inset: 20px;
	}

	.subhero-title {
		font-size: 2rem;
	}
}

/* Kleine Hero-Section: Mindesthöhe (Stand Impressum) und großes Foto, das unten rechts ca. 20 % in die nächste Sektion ragt */
.subhero {
	position: relative;
	z-index: 1;
	overflow: visible;
}

.subhero-inner {
	min-height: 366px;
}

.subhero-text {
	max-width: calc(100% - 470px);
	align-self: flex-start;
}

.subhero-photo {
	position: absolute;
	right: 24px;
	bottom: -84px;
	width: 420px;
	height: 420px;
}

.subhero-ring--mid {
	inset: 22px;
	border-width: 9px;
}

.subhero-circle {
	inset: 46px;
	border-width: 4px;
}

@media (max-width: 1100px) {
	.subhero-text {
		max-width: calc(100% - 360px);
	}

	.subhero-photo {
		width: 320px;
		height: 320px;
		bottom: -64px;
	}

	.subhero-ring--mid {
		inset: 16px;
		border-width: 7px;
	}

	.subhero-circle {
		inset: 34px;
	}

	.subhero-title {
		white-space: normal;
	}
}

@media (max-width: 760px) {
	.subhero-inner {
		min-height: 0;
	}

	.subhero-text {
		max-width: none;
	}

	.subhero-photo {
		position: relative;
		right: auto;
		bottom: auto;
		width: 150px;
		height: 150px;
	}

	.subhero-inner {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 28px;
	}

	.subhero-ring--mid {
		inset: 9px;
		border-width: 4px;
	}

	.subhero-circle {
		inset: 20px;
		border-width: 3px;
	}
}

/* Offene Bögen um den Foto-Kreis (12 bis 8 Uhr dunkelblau, 1 bis 5 Uhr hellblau, 9 bis 11 Uhr fein grau) */
.subhero-arcs {
	position: absolute;
	inset: -9.5%;
	width: 119%;
	height: 119%;
	overflow: visible;
	pointer-events: none;
}

.subhero-arcs .arc {
	fill: none;
	stroke-linecap: round;
}

.subhero-arcs .arc-a {
	stroke: var(--color-text);
	stroke-width: 5;
	stroke-dasharray: 833.6 1250.4;
}

.subhero-arcs .arc-b {
	stroke: var(--color-accent);
	stroke-width: 2.5;
	stroke-dasharray: 479.6 1438.8;
}

.subhero-arcs .arc-c {
	stroke: rgba(22, 39, 77, 0.35);
	stroke-width: 1.5;
	stroke-dasharray: 252.4 1514.2;
}

/* Datenschutz: Abschnitte als Akkordeon unter den drei Karten */
.legal-details {
	margin-top: 40px;
}

.legal-stand {
	margin: 24px 0 0;
	font-size: 0.9rem;
	color: var(--color-text-light);
}

/* Blog-Filter: in jedem Themenbereich ist der erste Beitrag ein breiter Leitartikel wie bei „Alle" */
.blog-grid .blog-card.is-lead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
}

.blog-card.is-lead .blog-thumb {
	min-height: 300px;
}

.blog-card.is-lead .blog-card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 36px 40px;
}

.blog-card.is-lead .blog-card-body h3 {
	min-height: 0;
	margin-bottom: 14px;
	font-size: 1.9rem;
	line-height: 1.25;
}

@media (max-width: 900px) {
	.blog-grid .blog-card.is-lead {
		grid-template-columns: 1fr;
	}

	.blog-card.is-lead .blog-thumb {
		min-height: 0;
	}

	.blog-card.is-lead .blog-card-body {
		padding: 24px;
	}

	.blog-card.is-lead .blog-card-body h3 {
		font-size: 1.4rem;
	}
}

/* Kleine Hero-Section: Tippeffekt-Zeile wie auf der Startseite, im mittleren Blau */
.subhero-eyebrow.subhero-typewriter {
	min-height: 1.4em;
	font-size: 1.1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-accent-dark);
	white-space: nowrap;
}

/* Blog-Übersicht: Themenbereich klein unter der Überschrift, "Weiterlesen" immer unten auf gleicher Höhe */
.blog-grid .blog-card {
	display: flex;
	flex-direction: column;
}

.blog-card-body,
.blog-featured-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-card-body h3,
.blog-featured-body h2 {
	margin-bottom: 20px;
	min-height: 0;
}

.blog-cat {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.blog-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-weight: 600;
	color: var(--color-accent-dark);
	transition: color 0.2s ease;
}

.blog-more svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.blog-featured-body {
	justify-content: center;
}

.blog-featured-body .blog-more {
	margin-top: 4px;
}

.blog-featured-body .blog-cat {
	margin: 0 0 8px;
	line-height: 1.4;
	color: var(--color-accent-dark);
}

/* Blog-Vorschaukarten: weiß, beim Überfahren das sehr helle Blau wie bei den übrigen weißen Boxen */
.blog-featured,
.blog-card {
	background: #ffffff;
}

.blog-featured:hover,
.blog-card:hover {
	background: #f4f8fb;
}

/* Blog-Vorschaukarten: feste Höhen, lange Überschriften und Texte werden mit … gekürzt */
@media (min-width: 901px) {
	.blog-featured,
	.blog-grid .blog-card.is-lead {
		height: 303px;
	}

	.blog-featured .blog-thumb,
	.blog-card.is-lead .blog-thumb {
		height: 100%;
		min-height: 0;
		aspect-ratio: auto;
	}

	.blog-featured-body,
	.blog-card.is-lead .blog-card-body {
		overflow: hidden;
	}
}

.blog-featured-body h2,
.blog-card.is-lead .blog-card-body h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.blog-featured-body > p:not(.blog-cat):not(.blog-meta) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.blog-card-body h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: calc(3 * 1.35em);
}

.blog-card.is-lead .blog-card-body h3 {
	min-height: 0;
}

/* Text in großer und kleiner Hero-Section einheitlich im Dunkelblau */
.hero-desc,
.subhero-desc {
	color: var(--color-text);
}

/* Blog-Übersicht: Knopf zum Nachladen weiterer Beiträge */
.blog-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.blog-more-wrap[hidden] {
	display: none;
}

.blog-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border: 1px solid rgba(47, 143, 150, 0.38);
	border-radius: 10px;
	background: #ffffff;
	font: inherit;
	font-weight: 600;
	color: var(--color-accent-dark);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.blog-more-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.blog-more-btn:hover,
.blog-more-btn:focus-visible {
	border-color: var(--color-accent);
	background: #f4f8fb;
}

/* ausgeblendete Blogkarten wirklich verbergen (die Flex-Regel der Karten darf das nicht überschreiben) */
.blog-item[hidden] {
	display: none !important;
}

/* Blog-Filter: aktiver Knopf mit kleinem Pfeil nach unten wie bei den Welten-Tabs */
.blog-filter {
	position: relative;
}

.blog-filter.is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: var(--color-text);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 3px;
}

/* Button am Seitenende (z. B. "Jetzt zur nächsten Seite"): weiß mit Rahmen, beim Überfahren hellblau – wie früher der Lebenslauf-Button */
.footer-next,
.footer-next:link,
.footer-next:visited {
	padding: 13px 19px;
	border: 1px solid rgba(47, 143, 150, 0.38);
	background: #ffffff;
	color: var(--color-text);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.footer-next:hover,
.footer-next:focus-visible {
	border-color: var(--color-accent);
	background: #eef6fb;
}

@media (max-width: 640px) {
	.footer-next,
	.footer-next:link,
	.footer-next:visited {
		padding: 15px 36px;
		border-color: var(--color-text);
		border-radius: 6px;
		background: #ffffff;
	}

	.footer-next:hover,
	.footer-next:focus-visible {
		border-color: var(--color-accent);
		background: #eef6fb;
	}
}

/* Kurzprofil für Veranstalter und Redaktionen: Teaser unter Speaker/Autor und Fenster */
.kp-teaser {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: 56px;
	padding: 32px 36px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 14px;
	background: #f4f8fb;
}

.kp-teaser-text {
	max-width: 680px;
}

.kp-teaser-eyebrow {
	margin: 0 0 6px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.kp-teaser-title {
	margin: 0 0 8px;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.kp-teaser-desc {
	margin: 0;
	line-height: 1.7;
	color: var(--color-text-light);
}

.kp-teaser .btn {
	flex: none;
}

.kp-rollen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 8px;
}

.kp-rolle {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 24px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 12px;
	background: #ffffff;
	font: inherit;
	text-align: left;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kp-rolle:hover,
.kp-rolle:focus-visible {
	border-color: var(--color-accent);
	background: #e6f1f8;
}

.kp-rolle-name {
	font-size: 1.3rem;
	font-weight: 700;
}

.kp-rolle-text {
	color: var(--color-text-light);
	line-height: 1.5;
}

.kp-optionen {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

.kp-option {
	padding: 16px 18px;
	border: 0;
	border-radius: 10px;
	background: #ffffff;
	font: inherit;
	font-weight: 500;
	text-align: left;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.kp-option:hover,
.kp-option:focus-visible {
	background: #e6f1f8;
}

.kp-zurueck {
	margin-top: 22px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--color-accent-dark);
	cursor: pointer;
	transition: color 0.2s ease;
}

.kp-zurueck:hover,
.kp-zurueck:focus-visible {
	color: var(--color-text);
}

.kp-karte {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 22px;
	border-radius: 12px;
	background: #ffffff;
}

.kp-foto {
	flex: none;
	width: 140px;
	border-radius: 10px;
	overflow: hidden;
	background: #ececef;
}

.kp-foto img {
	display: block;
	width: 100%;
	height: auto;
}

.kp-name {
	margin: 0 0 4px;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-text);
}

.kp-titel {
	margin: 0 0 12px;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--color-accent-dark);
}

.kp-bio {
	margin: 0;
	line-height: 1.7;
	color: var(--color-text);
}

.kp-zwischen {
	margin: 24px 0 8px;
	font-weight: 700;
	color: var(--color-text);
}

.kp-liste {
	margin: 0;
	padding-left: 20px;
	line-height: 1.7;
	color: var(--color-text);
}

.kp-liste--angaben {
	color: var(--color-text-light);
}

.kp-aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: 28px;
}

.kp-sekundaer {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--color-accent-dark);
	cursor: pointer;
	transition: color 0.2s ease;
}

.kp-sekundaer:hover,
.kp-sekundaer:focus-visible {
	color: var(--color-text);
	text-decoration: underline;
}

@media (max-width: 760px) {
	.kp-teaser {
		flex-direction: column;
		align-items: flex-start;
		padding: 26px 22px;
	}

	.kp-rollen {
		grid-template-columns: 1fr;
	}

	.kp-karte {
		flex-direction: column;
	}

	.kp-foto {
		width: 120px;
	}
}

/* Kurzprofil-Ergebnis: links unscheinbar Fenster schließen, rechts daneben das PDF */
.kp-schliessen {
	padding: 15px 22px;
	border: 1px solid rgba(47, 143, 150, 0.38);
	border-radius: 6px;
	background: #ffffff;
	font: inherit;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kp-schliessen:hover,
.kp-schliessen:focus-visible {
	border-color: var(--color-accent);
	background: #eef6fb;
}

/* Kontaktformulare: Lockfeld (unsichtbar), Fehlermeldung, Hinweis zur Bestätigung per Mail */
.form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-error {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #fdecec;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #8a1f1f;
}

.form-error[hidden] {
	display: none;
}

.contact-modal-success p {
	max-width: 560px;
}

.contact-modal-success .contact-modal-verify {
	padding: 14px 18px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.contact-modal-verify strong {
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.contact-modal-verify strong {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Fenster nach Klick auf den Bestätigungslink */
.anfrage-modal {
	text-align: center;
}

.anfrage-modal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--color-accent);
}

.anfrage-modal-icon svg {
	width: 30px;
	height: 30px;
}

.anfrage-modal-text {
	max-width: 520px;
	margin: 0 auto 8px;
	line-height: 1.7;
	color: var(--color-text);
}

.is-problem .anfrage-modal-icon {
	background: #c9d3df;
}

.contact-modal-verify strong:not(.js-confirm-email) {
	white-space: normal;
}

/* Sprachwahl im aufgeklappten Menü (Hamburger): klein und unauffällig wie oben,
   aber mit unsichtbar vergrößerter Tippfläche und Abstand zwischen DE und EN */
.lang-switch .ls-long {
	display: none;
}

@media (max-width: 1100px) {
	.main-nav .lang-switch {
		gap: 0;
		margin: 16px 16px 0;
		font-size: 0.8rem;
	}

	.main-nav .lang-switch > a,
	.main-nav .lang-switch > span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0 12px;
	}

	.main-nav .lang-switch > :first-child {
		border-right: 1px solid rgba(47, 143, 150, 0.25);
	}

	.main-nav .lang-switch > :last-child {
		padding-right: 12px;
	}
}

/* Kleine Hero-Section, Stufe Nr. 2 (901–1100 px): Foto wie bei Nr. 1, grauer Hintergrund ohne Eckenrundung */
@media (min-width: 901px) and (max-width: 1100px) {
	.subhero-bg {
		border-bottom-left-radius: 0;
	}

	.subhero-text {
		max-width: calc(100% - 490px);
	}

	.subhero-photo {
		right: 35px;
		width: 420px;
		height: 420px;
		bottom: -84px;
	}

	.subhero-ring--mid {
		inset: 22px;
		border-width: 9px;
	}

	.subhero-circle {
		inset: 46px;
	}
}

/* Kleine Hero-Section, Stufe Nr. 3 (761–900 px): Foto etwas größer, 15 px Abstand zum Rand, keine Eckenrundung */
@media (min-width: 761px) and (max-width: 900px) {
	.subhero-bg {
		border-bottom-left-radius: 0;
	}

	.subhero-text {
		max-width: calc(100% - 430px);
	}

	.subhero-photo {
		right: 33px;
		width: 370px;
		height: 370px;
		bottom: -74px;
	}

	.subhero-ring--mid {
		inset: 19px;
		border-width: 8px;
	}

	.subhero-circle {
		inset: 40px;
	}

	.subhero-title {
		font-size: 2.1rem;
	}

	.subhero-desc {
		font-size: 0.97rem;
	}
}

/* Kleine Hero-Section, Stufe Nr. 4 (641–760 px): Foto rechts neben dem Text statt darüber,
   darf rechts etwas angeschnitten sein; Schrift und Button kleiner; keine Eckenrundung */
@media (min-width: 641px) and (max-width: 760px) {
	.subhero {
		overflow-x: clip;
	}

	.subhero-bg {
		border-bottom-left-radius: 0;
	}

	.subhero-inner {
		flex-direction: row;
		align-items: flex-start;
		min-height: 300px;
	}

	.subhero-text {
		max-width: calc(100% - 300px);
	}

	.subhero-photo {
		position: absolute;
		right: -12px;
		bottom: -60px;
		width: 300px;
		height: 300px;
	}

	.subhero-ring--mid {
		inset: 16px;
		border-width: 7px;
	}

	.subhero-circle {
		inset: 33px;
		border-width: 3px;
	}

	.subhero-eyebrow.subhero-typewriter {
		font-size: 0.95rem;
	}

	.subhero-title {
		font-size: 1.75rem;
		white-space: normal;
	}

	.subhero-desc {
		font-size: 0.9rem;
		line-height: 1.6;
	}

	.subhero-btn {
		margin-top: 16px;
		padding: 12px 22px;
		font-size: 0.92rem;
	}
}

/* Kleine Hero-Section, Stufe Nr. 5 (bis 640 px): wie Nr. 4, Foto rechts neben dem Text,
   rechts angeschnitten; Schrift und Button kleiner; keine Eckenrundung */
@media (max-width: 640px) {
	.subhero {
		overflow-x: clip;
	}

	.subhero-bg {
		border-bottom-left-radius: 0;
	}

	.subhero-inner {
		flex-direction: row;
		align-items: flex-start;
		min-height: 0;
		padding-bottom: 44px;
	}

	.subhero-text {
		max-width: calc(100% - clamp(150px, 35vw, 240px));
	}

	.subhero-photo {
		position: absolute;
		right: calc(-1 * clamp(34px, 7vw, 40px));
		bottom: calc(-1 * clamp(36px, 8vw, 50px));
		width: clamp(180px, 40vw, 250px);
		height: clamp(180px, 40vw, 250px);
	}

	.subhero-ring--mid {
		inset: 6%;
		border-width: 5px;
	}

	.subhero-circle {
		inset: 12%;
		border-width: 3px;
	}

	.subhero-eyebrow.subhero-typewriter {
		font-size: 0.85rem;
	}

	.subhero-title {
		font-size: 1.35rem;
		white-space: normal;
	}

	.subhero-desc {
		font-size: 0.85rem;
		line-height: 1.55;
	}

	.subhero-btn {
		margin-top: 14px;
		padding: 10px 16px;
		font-size: 0.85rem;
	}
}

/* Stufe Nr. 5: Text fließt um das Foto (Platzhalter werden per Skript gesetzt) */
@media (max-width: 640px) {
	.subhero--flow .subhero-inner {
		display: block;
	}

	.subhero--flow .subhero-text {
		max-width: none;
	}

	.subhero-sand {
		float: right;
		width: 0;
	}

	.subhero-shape {
		float: right;
		clear: right;
	}
}

/* ==========================================================================
   TEST (Impressum und Datenschutz): Köln-Bild vom rechten Rand, läuft nach
   links in die graue Wand aus. Impressum ohne Foto, Datenschutz mit dem
   bisherigen Kreis, etwa 20 % kleiner.
   ========================================================================== */
.subhero-szene {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 56%;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%);
}

.subhero-szene-bild {
	position: absolute;
	inset: -20px;
	background: url('img/tobias-reinhardt-privat-koeln-dom.jpg') center 62% / cover no-repeat;
	filter: blur(3px);
}

.subhero-szene-tag {
	top: 8px;
	bottom: auto;
}

.subhero--ohne-foto .subhero-text {
	max-width: 50%;
}

/* Kreis etwa 28 % kleiner (20 %, dann 10 %) */
.subhero--kreis-klein .subhero-text {
	max-width: calc(100% - 352px);
}

.subhero--kreis-klein .subhero-photo {
	width: 302px;
	height: 302px;
	bottom: -60px;
}

@media (min-width: 901px) and (max-width: 1100px) {
	.subhero--kreis-klein .subhero-text {
		max-width: calc(100% - 372px);
	}

	.subhero--kreis-klein .subhero-photo {
		right: 28px;
		width: 302px;
		height: 302px;
		bottom: -60px;
	}
}

@media (max-width: 900px) {
	.subhero--ohne-foto .subhero-text {
		max-width: 58%;
	}
}

@media (min-width: 761px) and (max-width: 900px) {
	.subhero--kreis-klein .subhero-text {
		max-width: calc(100% - 326px);
	}

	.subhero--kreis-klein .subhero-photo {
		right: 28px;
		width: 266px;
		height: 266px;
		bottom: -53px;
	}
}

@media (min-width: 641px) and (max-width: 760px) {
	.subhero--kreis-klein .subhero-text {
		max-width: calc(100% - 216px);
	}

	.subhero--kreis-klein .subhero-photo {
		right: -10px;
		width: 216px;
		height: 216px;
		bottom: -43px;
	}
}

@media (max-width: 640px) {
	/* auf dem Handy kein Köln-Bild, der Text braucht die ganze Breite */
	.subhero-szene,
	.subhero-szene-tag {
		display: none;
	}

	.subhero--ohne-foto .subhero-text {
		max-width: none;
	}

	.subhero--kreis-klein .subhero-photo {
		right: calc(-1 * clamp(24px, 5vw, 29px));
		bottom: calc(-1 * clamp(26px, 5.8vw, 36px));
		width: clamp(130px, 28.8vw, 180px);
		height: clamp(130px, 28.8vw, 180px);
	}
}

/* Datenschutz (Test): Hero 100 px niedriger */
@media (min-width: 761px) {
	.subhero--kreis-klein .subhero-inner {
		min-height: 296px;
		padding-top: 39px;
		padding-bottom: 40px;
	}
}

/* Datenschutz (Test): Text und Überschrift breiter */
.subhero--kreis-klein .subhero-desc {
	max-width: 660px;
}

/* ==========================================================================
   Kleine Hero: Visitenkarte über dem Foto. Sie erscheint dort, wo die Maus das
   Foto betritt, und bleibt dann stehen (Position setzt script.js). Auf dem
   Handy öffnet sie sich per Antippen unterhalb des Fotos.
   ========================================================================== */
button.subhero-circle {
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.subhero-circle--karte:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

.subhero-karte {
	position: absolute;
	left: 50%;
	top: 80%;
	z-index: 5;
	width: 320px;
	margin-left: -160px;
	padding: 16px 16px 14px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 14px;
	background: #eef6fb;
	color: var(--color-text);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* per Maus positioniert: kein Versatz über margin */
.subhero-karte.ist-an-maus {
	margin-left: 0;
}

.subhero-photo:has(.subhero-circle--karte:hover) .subhero-karte,
.subhero-photo:has(.subhero-circle--karte:focus-visible) .subhero-karte,
.subhero-photo:has(.subhero-karte:hover) .subhero-karte,
.subhero-photo.ist-offen .subhero-karte {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s;
}

.subhero-karte-name {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 700;
}

.subhero-karte-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.subhero-karte-chips li {
	padding: 4px 8px;
	border-radius: 6px;
	background: #ffffff;
	font-size: 0.73rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-text);
}

.subhero-karte-link {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-accent-dark);
	transition: color 0.2s ease;
}

.subhero-karte-link:hover,
.subhero-karte-link:focus-visible {
	color: var(--color-text);
	text-decoration: underline;
}

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

/* Tablet und Handy: Foto steht am rechten Rand, die Karte richtet sich nach rechts aus */
@media (max-width: 760px) {
	.subhero-karte:not(.ist-an-maus) {
		left: auto;
		right: 40px;
		width: min(300px, calc(100vw - 32px));
		margin-left: 0;
	}
}
/* Nr. 1 (über 1100 px): Die Bögen dürfen nie über den rechten Bildschirmrand
   hinausragen. Bei Breiten knapp über 1100 px rückt das Foto deshalb etwas nach
   links, sodass der äußerste Bogen mindestens 15 px Abstand zum Rand hat. */
@media (min-width: 1101px) {
	.subhero-photo {
		right: max(24px, calc(46px - (100vw - 1140px) / 2));
	}
}

/* Datenschutz: Gedankenstütze unter dem Fließtext */
/* Entwurfshinweis in der Datenschutzerklärung: rot, bis Tobias den Abschnitt geprüft hat */
.dse-pruefen {
	padding: 12px 16px;
	border-left: 4px solid #c2413a;
	border-radius: 6px;
	background: #fdecea;
	color: #c2413a;
	font-weight: 700;
}

.legal-text + .todo-note-big {
	margin-top: 48px;
}

/* Datenschutz: Fließtext links, rechts mitlaufendes Inhaltsverzeichnis wie im Blog */
.legal-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px;
	align-items: start;
}

.legal-main {
	min-width: 0;
}

.legal-main h2 {
	scroll-margin-top: calc(var(--header-height) + 24px);
}

.legal-aside .post-toc ol {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.legal-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.legal-aside {
		display: none;
	}
}

/* Visitenkarte in der kleinen Hero: feste Position. Ihre obere rechte Ecke sitzt
   unten links am Fotokreis, dort, wo das Sakko an den Kreisrand stößt. */
@media (min-width: 761px) {
	.subhero-karte,
	.subhero-karte.ist-an-maus {
		left: auto;
		right: 77.6%;
		top: 50%;
		margin-left: 0;
		transform: translateY(-50%);
	}
}

/* Datenschutz: kleinerer Abstand zwischen Überschrift und Abschnitt 1 */
.legal-main .legal-title {
	margin-bottom: 20px;
}

.legal-main .legal-text > h2:first-child {
	margin-top: 0;
}

/* Visitenkarte als Link zur Startseite: Mouse-Over nur farblich */
a.subhero-karte {
	text-decoration: none;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s, background-color 0.2s ease, border-color 0.2s ease;
}

a.subhero-karte:hover,
a.subhero-karte:focus-visible {
	background: #dcecf7;
	border-color: var(--color-accent);
}

a.subhero-karte:hover .subhero-karte-link,
a.subhero-karte:focus-visible .subhero-karte-link {
	color: var(--color-text);
	text-decoration: underline;
}

/* Handy: Textspalte der kleinen Hero volle Breite (Text fließt um den Kreis) */
@media (max-width: 640px) {
	.subhero--kreis-klein .subhero-text {
		max-width: none;
	}
}


/* Nr. 4 (641–760 px): Höhe richtet sich nach dem Text, kein Leerraum darunter */
@media (min-width: 641px) and (max-width: 760px) {
	.subhero--kreis-klein .subhero-inner {
		min-height: 0;
		padding-bottom: 40px;
	}
}

/* Nr. 5 (Handy): keine Visitenkarte über dem Foto */
@media (max-width: 640px) {
	.subhero-karte {
		display: none;
	}

	.subhero-circle--karte {
		cursor: default;
		pointer-events: none;
	}
}

/* Nr. 3 (761–900 px): große Überschrift darf breiter sein als der Text darunter,
   sie läuft oben am Kreis vorbei (der Kreis beginnt erst weiter unten) */
@media (min-width: 761px) and (max-width: 900px) {
	.subhero--kreis-klein .subhero-title {
		width: calc(100vw - 325px);
		max-width: none;
	}
}

/* ==========================================================================
   Muster 2107: Textkarte ragt ins Foto, hellblaue Farbfläche dahinter
   ========================================================================== */
.tk-section {
	background: #f4f8fb;
}

.tk-raster {
	display: grid;
	grid-template-columns: 7fr 5fr;
	align-items: center;
}

.tk-bild {
	position: relative;
	isolation: isolate;
	aspect-ratio: 4 / 3;
	margin: 24px 0 0 24px;
}

.tk-bild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 12px;
	background: var(--color-accent);
	transform: translate(-24px, -24px);
}

.tk-bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

.tk-karte {
	position: relative;
	z-index: 1;
	margin-left: -80px;
	padding: 40px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 12px;
	background: #ffffff;
}

.tk-titel {
	margin: 0 0 16px;
	hyphens: auto;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text);
}

.tk-text {
	margin: 0 0 16px;
	line-height: 1.7;
	color: var(--color-text-light);
}

.tk-button {
	margin-top: 8px;
}

@media (max-width: 900px) {
	.tk-karte {
		margin-left: -40px;
		padding: 32px;
	}

	.tk-titel {
		font-size: 1.5rem;
	}
}

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

	.tk-bild {
		margin: 12px 0 0 12px;
	}

	.tk-bild::before {
		transform: translate(-12px, -12px);
	}

	.tk-karte {
		margin: -32px 16px 0;
		padding: 24px;
	}

	.tk-titel {
		font-size: 1.35rem;
	}

	.tk-button {
		width: 100%;
	}
}

/* ==========================================================================
   Muster 2207 (auf Weiß): Text mit Kennzahlen links, freigestelltes Porträt
   auf hellblauer Kreisfläche rechts, sitzt an der Unterkante auf
   ========================================================================== */
.pb-section {
	padding: 72px 0 0;
	background: #ffffff;
	border-bottom: 1px solid rgba(47, 143, 150, 0.3);
}

.pb-raster {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 64px;
	align-items: end;
}

.pb-text {
	padding-bottom: 72px;
}

.pb-titel {
	margin: 0 0 16px;
	font-size: 2.2rem;
	font-weight: 200;
	line-height: 1.2;
	color: var(--color-text);
}

.pb-titel strong {
	font-weight: 700;
}

.pb-absatz {
	max-width: 560px;
	margin: 0 0 32px;
	line-height: 1.7;
	color: var(--color-text-light);
}

.pb-zahlen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 0 36px;
}

.pb-zahlen div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	padding: 0 20px;
	border-left: 1px solid rgba(47, 143, 150, 0.3);
}

.pb-zahlen div:first-child {
	padding-left: 0;
	border-left: 0;
}

.pb-zahlen dd {
	margin: 0;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-text);
}

.pb-zahlen dt {
	margin-top: 6px;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--color-text-light);
}

.pb-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pb-btn-rahmen {
	border: 1px solid rgba(47, 143, 150, 0.38);
	background: #ffffff;
	color: var(--color-text);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pb-btn-rahmen:hover,
.pb-btn-rahmen:focus-visible {
	border-color: var(--color-accent);
	background: #eef6fb;
}

.pb-bild {
	position: relative;
	display: flex;
	justify-content: center;
	padding-top: 16px;
}

.pb-bild::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 40px;
	width: 360px;
	height: 360px;
	margin-left: -180px;
	border-radius: 50%;
	background: var(--color-accent);
}

.pb-bild img {
	position: relative;
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
}

@media (max-width: 900px) {
	.pb-raster {
		grid-template-columns: 1fr 300px;
		gap: 40px;
	}

	.pb-bild::before {
		width: 280px;
		height: 280px;
		margin-left: -140px;
	}

	.pb-zahlen dd {
		font-size: 1.9rem;
	}
}

@media (max-width: 640px) {
	.pb-section {
		padding-top: 48px;
	}

	.pb-raster {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.pb-titel {
		font-size: 1.7rem;
	}

	.pb-text {
		padding-bottom: 8px;
	}

	.pb-zahlen div {
		padding: 0 10px;
	}

	.pb-zahlen dd {
		font-size: 1.6rem;
	}

	.pb-zahlen dt {
		font-size: 0.78rem;
	}

	.pb-buttons {
		flex-direction: column;
	}

	.pb-buttons .btn {
		width: 100%;
		justify-content: center;
	}

	.pb-bild {
		padding-top: 24px;
	}

	.pb-bild::before {
		bottom: 24px;
		width: 240px;
		height: 240px;
		margin-left: -120px;
	}

	.pb-bild img {
		max-width: 280px;
	}
}

/* 2207: Kennzahlen in Hellblau */
.pb-zahlen dd {
	color: var(--color-accent-dark);
}

/* Speaker und Autor im Stil von 2107, flacher; Autor gespiegelt (Karte links) */
.tk-block {
	margin: 0 0 56px;
}

#referenzen .section-title + .tk-block {
	margin-top: 48px;
}

.tk-block .tk-bild {
	aspect-ratio: 16 / 9;
}

.tk-block .tk-karte {
	padding: 32px 36px;
}

.tk-block .tk-titel {
	font-size: 1.6rem;
}

.tk-block .tk-text {
	margin: 0;
	font-size: 0.95rem;
}

.tk-img-speaker {
	object-position: 50% 28%;
}

.tk-block--rechts {
	grid-template-columns: 5fr 7fr;
}

.tk-block--rechts .tk-bild {
	order: 2;
	margin: 24px 24px 0 0;
}

.tk-block--rechts .tk-bild::before {
	transform: translate(24px, -24px);
}

.tk-block--rechts .tk-karte {
	order: 1;
	margin: 0 -80px 0 0;
}

@media (max-width: 900px) {
	.tk-block--rechts .tk-karte {
		margin-right: -40px;
	}
}

@media (max-width: 640px) {
	.tk-block--rechts {
		grid-template-columns: 1fr;
	}

	.tk-block--rechts .tk-bild {
		order: 0;
		margin: 12px 12px 0 0;
	}

	.tk-block--rechts .tk-bild::before {
		transform: translate(12px, -12px);
	}

	.tk-block--rechts .tk-karte {
		margin: -32px 16px 0;
	}

	.tk-block .tk-karte {
		padding: 24px;
	}
}

/* 2107 auf Juristisches: hellblauer Hintergrund */
.tk-section--hellblau {
	background: #eef6fb;
}

/* Muster 2304 auf Juristisches: Einleitung links, Raster 2×2 rechts, hellgrau */
.er-section {
	background: #f2f3f5;
}

.er-split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 64px;
	align-items: start;
}

.er-einleitung {
	position: sticky;
	top: calc(var(--header-height) + 24px);
}

.er-intro {
	margin: 0 0 24px;
	line-height: 1.7;
	color: var(--color-text-light);
}

.er-raster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.er-icon {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--color-accent-dark);
}

.er-titel {
	margin: 12px 0 6px;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-text);
}

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

@media (max-width: 900px) {
	.er-split {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.er-einleitung {
		position: static;
	}
}

@media (max-width: 640px) {
	.er-raster {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Muster 2306 auf Legal-Tech: Pro und Contra, dunkelblauer Hintergrund */
.pc-section {
	background: var(--color-text);
	color: #ffffff;
}

.pc-section .section-eyebrow {
	color: var(--color-accent);
}

.pc-section .section-title {
	color: #ffffff;
}

.pc-vergleich {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 32px;
}

.pc-spalte--contra {
	padding-right: 48px;
}

.pc-spalte--pro {
	padding-left: 48px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.pc-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 0.78rem;
	font-weight: 600;
	color: #d9deea;
}

.pc-tag--blau {
	background: var(--color-accent);
	color: var(--color-text);
}

.pc-titel {
	margin: 12px 0 20px;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.35;
	color: #ffffff;
}

.pc-liste {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-liste li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.6;
}

.pc-liste svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 3px;
}

.pc-spalte--contra li {
	color: #d9deea;
}

.pc-spalte--pro li {
	color: #ffffff;
}

.pc-spalte--pro svg {
	color: var(--color-accent);
}

@media (max-width: 900px) {
	.pc-spalte--contra {
		padding-right: 32px;
	}

	.pc-spalte--pro {
		padding-left: 32px;
	}
}

@media (max-width: 640px) {
	.pc-vergleich {
		grid-template-columns: 1fr;
		margin-top: 24px;
	}

	.pc-spalte--contra {
		padding: 0 0 32px;
	}

	.pc-spalte--pro {
		padding: 32px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
}

/* Blog-Übersicht: Themenfeld als Badge, Lesezeit rechtsbündig daneben */
.blog-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.blog-badge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--color-accent);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text);
}

.blog-lesezeit {
	font-size: 0.85rem;
	color: var(--color-text-light);
	white-space: nowrap;
}

.blog-meta {
	align-self: stretch;
	width: 100%;
}

/* Lesezeit mit Uhr-Icon */
.blog-lesezeit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.blog-lesezeit svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Leitartikel oben: 25 % niedriger, Inhalt entsprechend kompakter */
.blog-featured-body > * {
	flex-shrink: 0;
}

@media (min-width: 901px) {
	.blog-featured-body {
		padding: 24px 40px;
	}

	.blog-featured-body h2 {
		margin-bottom: 10px;
		font-size: 1.6rem;
	}

	.blog-featured-body > p:not(.blog-cat):not(.blog-meta) {
		margin-bottom: 12px;
		-webkit-line-clamp: 2;
	}
}

/* ===== Legal Tech: Zielgruppen (Muster 3206 Akkordeon, 3208 Reiter) ===== */
.zg-section,
.zr-section {
	background: #ffffff;
}

.zg-box,
.zr-box {
	background: #ffffff;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 16px;
	padding: 48px;
}

/* --- 3206 Akkordeon je Zielgruppe --- */
.zg-raster {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 64px;
}

.zg-links {
	position: sticky;
	top: 24px;
}

.zg-intro {
	margin-bottom: 20px;
}

.zg-kontakt {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.zg-liste {
	border-top: 1px solid rgba(47, 143, 150, 0.3);
}

.zg-eintrag {
	border-bottom: 1px solid rgba(47, 143, 150, 0.3);
}

.zg-zeile {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	list-style: none;
	cursor: pointer;
	color: var(--color-text);
	transition: color 0.2s ease;
}

.zg-zeile::-webkit-details-marker {
	display: none;
}

.zg-zeile:hover {
	color: var(--color-accent-dark);
}

.zg-zeile:focus-visible {
	outline: 2px solid var(--color-accent-dark);
	outline-offset: 2px;
	border-radius: 6px;
}

.zg-icon {
	width: 24px;
	height: 24px;
	flex: none;
	color: var(--color-accent-dark);
}

.zg-name {
	flex: 1;
	min-width: 0;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
}

.zg-chevron {
	width: 22px;
	height: 22px;
	flex: none;
	transition: transform 0.2s ease;
}

.zg-eintrag[open] .zg-chevron {
	transform: rotate(180deg);
}

.zg-inhalt {
	padding: 0 0 20px 40px;
}

.zg-text {
	margin: 0 0 12px;
	color: var(--color-text-light);
}

.zg-links-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.zg-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--color-accent-dark);
	transition: color 0.2s ease;
}

.zg-link svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.zg-link:hover,
.zg-link:focus-visible {
	color: var(--color-text);
	text-decoration: underline;
}

/* --- 3208 Reiter mit Text und Foto --- */
.zr-intro {
	margin-bottom: 28px;
}

.zr-leiste-rahmen {
	position: relative;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(47, 143, 150, 0.3);
}

.zr-leiste {
	display: flex;
	gap: 4px;
	margin-bottom: -1px;
	overflow-x: auto;
	scrollbar-width: none;
}

.zr-leiste::-webkit-scrollbar {
	display: none;
}

.zr-reiter {
	flex: none;
	padding: 12px 18px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
	color: var(--color-text-light);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.zr-reiter:hover {
	border-color: #d6dfe9;
	color: var(--color-text);
}

.zr-reiter[aria-selected="true"] {
	border-bottom-color: var(--color-accent);
	font-weight: 600;
	color: var(--color-text);
}

.zr-reiter:focus-visible {
	outline: 2px solid var(--color-accent-dark);
	outline-offset: -2px;
}

.zr-panel {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: 48px;
}

.zr-panel[hidden] {
	display: none;
}

.zr-js .zr-panel {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.zr-js .zr-panel.zr-sichtbar {
	opacity: 1;
}

.zr-titel {
	margin: 0 0 14px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
}

.zr-absatz {
	margin: 0 0 20px;
	color: var(--color-text-light);
}

.zr-punkte {
	display: grid;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.zr-punkte li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.55;
}

.zr-punkte svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 3px;
	color: var(--color-accent-dark);
}

.zr-bild {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: #eef6fb;
}

.zr-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

.zr-bild--portraet {
	background: #f4f8fb;
}

.zr-bild--portraet img {
	object-fit: contain;
	object-position: center bottom;
}

@media (max-width: 900px) {
	.zg-box,
	.zr-box {
		padding: 32px 24px;
	}

	.zg-raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.zg-links {
		position: static;
	}

	.zr-panel {
		gap: 32px;
	}

	.zr-titel {
		font-size: 1.4rem;
	}
}

@media (max-width: 640px) {
	.zg-box,
	.zr-box {
		padding: 24px 18px;
	}

	.zg-inhalt {
		padding-left: 0;
	}

	.zg-links-zeile {
		flex-direction: column;
		gap: 8px;
	}

	.zr-leiste-rahmen {
		margin-bottom: 28px;
	}

	.zr-leiste-rahmen::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 40px;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff);
	}

	.zr-reiter {
		padding: 12px 14px;
	}

	.zr-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.zr-bild {
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.zr-titel {
		font-size: 1.3rem;
	}

	.zr-btn {
		width: 100%;
	}
}

/* 3206 und 3208 direkt untereinander: nur ein Abstand zwischen den beiden Boxen */
.zg-section + .zr-section {
	padding-top: 0;
}

/* ==========================================================================
   Kennzahlen (Muster 3402 bis 3408 aus der Bibliothek, Präfix kz)
   Jede Sektion auf Dunkelblau; aufeinanderfolgende Sektionen durch
   eine feine Linie getrennt, nur ein einfacher Abstand dazwischen.
   ========================================================================== */
.kz-section {
	background: var(--color-text);
	color: #ffffff;
}

.kz-section + .kz-section {
	padding-top: 0;
}

.kz-section + .kz-section > .section-inner {
	padding-top: 80px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kz-section .section-eyebrow {
	color: var(--color-accent);
}

.kz-section .section-title {
	color: #ffffff;
}

.kz-section .section-intro {
	color: #d9deea;
}

.kz-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.kz-absatz {
	margin: 0 0 16px;
	line-height: 1.7;
	color: #d9deea;
}

.kz-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.kz-link:hover,
.kz-link:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

/* ---------- 3402: Kompakte Zeile ---------- */
.kz02-liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	margin: 0;
	padding: 20px 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.kz02-punkt {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.kz02-haken {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--color-accent);
}

.kz02-text {
	line-height: 1.35;
}

.kz02-zahl {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
}

.kz02-label {
	font-size: 0.9rem;
	color: #d9deea;
}

.kz02-trenner {
	font-size: 1.2rem;
	line-height: 1;
	color: #d9deea;
}

/* ---------- 3403: Vier Karten mit Icon, Zahl und Erklärsatz ---------- */
.kz03-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kz03-karte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.2s ease;
}

.kz03-karte:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

.kz03-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-text);
}

.kz03-icon svg {
	width: 22px;
	height: 22px;
}

.kz03-zahl {
	margin: 20px 0 0;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
}

.kz03-suffix {
	margin-left: 2px;
	vertical-align: top;
	font-size: 0.45em;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--color-accent);
}

.kz03-titel {
	margin: 14px 0 6px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
}

.kz03-satz {
	margin: 0 0 20px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #d9deea;
}

.kz03-link {
	margin-top: auto;
	font-size: 0.95rem;
}

/* ---------- 3404: Text links, Zahlen 2×2 rechts ---------- */
.kz04-split {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 64px;
	align-items: start;
}

.kz04-text {
	min-width: 0;
}

.kz04-btn {
	margin-top: 12px;
}

.kz04-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kz04-zelle {
	min-width: 0;
}

.kz04-linie {
	display: block;
	width: 40px;
	height: 2px;
	margin-bottom: 16px;
	background: var(--color-accent);
}

.kz04-zahl {
	margin: 0;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
}

.kz04-label {
	margin: 10px 0 0;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.45;
	color: #ffffff;
}

.kz04-zusatz {
	margin: 4px 0 0;
	font-size: 0.85rem;
	line-height: 1.45;
	color: #d9deea;
}

/* ---------- 3405: Eine riesige Zahl links, Erklärung rechts ---------- */
.kz05-split {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 48px;
	align-items: end;
}

.kz05-zahlblock,
.kz05-text {
	min-width: 0;
}

.kz05-zahl {
	margin: 0;
	font-size: clamp(6rem, 12vw, 10rem);
	font-weight: 200;
	line-height: 0.9;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--color-accent);
}

.kz05-label {
	margin: 16px 0 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.7;
}

.kz05-marker {
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--color-accent);
	color: var(--color-text);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.kz05-titel {
	margin: 0 0 16px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
}

/* ---------- 3406: Foto links, drei Zahlen gestapelt rechts ---------- */
.kz06-split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 56px;
	align-items: center;
}

.kz06-bild {
	position: relative;
	min-width: 0;
	aspect-ratio: 3 / 4;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.kz06-foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 88% center;
}

.kz06-text {
	min-width: 0;
}

.kz06-liste {
	margin: 8px 0 24px;
	padding: 0;
	list-style: none;
}

.kz06-zeile {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: 24px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.kz06-zeile:first-child {
	padding-top: 8px;
}

.kz06-zahl {
	margin: 0;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--color-accent);
}

.kz06-titel {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
}

.kz06-satz {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #d9deea;
}

/* ---------- 3407: Drei Karten mit Label, Zahl und Zeitraum ---------- */
.kz07-karten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kz07-karte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	transition: border-color 0.2s ease;
}

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

.kz07-label {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #d9deea;
}

.kz07-zahl {
	margin: 8px 0 0;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--color-accent);
}

.kz07-satz {
	margin: 8px 0 20px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #d9deea;
}

.kz07-tag {
	display: inline-block;
	margin-top: auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.78rem;
	font-weight: 600;
	color: #d9deea;
}

/* ---------- 3408: Hochzählende Zahlen auf Foto-Band ---------- */
.kz08-band {
	position: relative;
	overflow: hidden;
	padding: 72px 48px;
	border-radius: 12px;
	background: var(--color-text);
}

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

.kz08-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(22, 39, 77, 0.78);
}

.kz08-inner {
	position: relative;
	z-index: 2;
}

.kz08-titel {
	max-width: 480px;
	margin: 0 0 40px;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff;
}

.kz08-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kz08-zelle {
	min-width: 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.kz08-zahl {
	margin: 0;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
}

.kz08-suffix {
	margin-left: 2px;
	font-size: 0.5em;
	vertical-align: top;
	color: var(--color-accent);
}

.kz08-label {
	margin: 10px 0 0;
	font-size: 0.95rem;
	line-height: 1.45;
	color: #d9deea;
}

@media (max-width: 900px) {
	.kz02-liste {
		gap: 12px;
	}

	.kz03-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kz04-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.kz06-split {
		gap: 40px;
	}

	.kz06-zeile {
		grid-template-columns: 110px minmax(0, 1fr);
	}

	.kz07-karten {
		gap: 16px;
	}

	.kz07-karte {
		padding: 24px;
	}

	.kz07-zahl {
		font-size: 2.6rem;
	}

	.kz08-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}
}

@media (max-width: 760px) {
	.kz05-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.kz05-zahl {
		font-size: 5rem;
	}

	.kz05-titel {
		font-size: 1.4rem;
	}
}

@media (max-width: 640px) {
	.kz-section + .kz-section > .section-inner {
		padding-top: 56px;
	}

	.kz02-liste {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 16px 12px;
		padding: 18px 0;
	}

	.kz02-trenner {
		display: none;
	}

	.kz02-punkt {
		align-items: flex-start;
	}

	.kz02-haken {
		margin-top: 6px;
	}

	.kz02-zahl {
		display: block;
		font-size: 1.2rem;
	}

	.kz02-label {
		display: block;
		font-size: 0.85rem;
	}

	.kz03-raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.kz03-karte {
		padding: 24px;
	}

	.kz03-zahl {
		font-size: 2.4rem;
	}

	.kz04-btn {
		width: 100%;
	}

	.kz04-raster {
		gap: 28px 20px;
	}

	.kz04-zahl {
		font-size: 2.2rem;
	}

	.kz04-label {
		font-size: 0.9rem;
	}

	.kz06-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.kz06-bild {
		aspect-ratio: 16 / 9;
	}

	.kz06-zeile {
		grid-template-columns: 80px minmax(0, 1fr);
		gap: 12px;
		padding: 20px 0;
	}

	.kz06-zahl {
		font-size: 2rem;
	}

	.kz07-karten {
		grid-template-columns: minmax(0, 1fr);
	}

	.kz07-zahl {
		font-size: 2.4rem;
	}

	.kz08-band {
		padding: 40px 20px 48px;
	}

	.kz08-titel {
		font-size: 1.5rem;
	}

	.kz08-raster {
		gap: 24px;
	}

	.kz08-zahl {
		font-size: 2.6rem;
	}

	.kz08-label {
		font-size: 0.9rem;
	}
}

/* ==========================================================
   Muster 3503, 3504, 3506 aus der Bibliothek (Bento-Galerie)
   auf juristisches.html / .php, weißer Hintergrund
   ========================================================== */
.bg-section {
	background: #fff;
}

.bg-section + .bg-section {
	padding-top: 0;
}

.bg-box {
	background: #fff;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 16px;
	padding: 48px;
}

/* ---------- 3503 Hohe Porträt-Kachel links, vier Fakten rechts ---------- */
.bg03-titel {
	margin-bottom: 40px;
}

.bg03-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(210px, auto);
	gap: 16px;
}

.bg03-portraet {
	position: relative;
	grid-column: 1;
	grid-row: 1 / 3;
	min-height: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #eef6fb;
}

.bg03-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.bg03-name {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	padding: 14px 20px;
	background: rgba(22, 39, 77, 0.8);
	color: #fff;
}

.bg03-name-zeile {
	font-weight: 600;
	line-height: 1.4;
}

.bg03-rolle {
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

.bg03-kachel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	padding: 24px;
	border-radius: 12px;
	background: #ececef;
}

.bg03-wert {
	margin: 0;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-text);
}

.bg03-klein {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--color-text-light);
}

.bg03-klein-titel {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-light);
}

.bg03-logos {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bg03-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	border-radius: 6px;
	background: #f4f8fb;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text);
}

.bg03-buch {
	flex-direction: row;
	gap: 16px;
}

.bg03-cover {
	width: 100px;
	aspect-ratio: 3 / 4;
	flex: none;
	border-radius: 6px;
	object-fit: cover;
}

.bg03-buch-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.bg03-h3 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.bg03-icon,
.bg04-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: #eef6fb;
	color: var(--color-accent-dark);
}

.bg03-icon {
	margin-bottom: 4px;
}

.bg03-icon svg,
.bg04-icon svg {
	width: 22px;
	height: 22px;
}

/* ---------- 3504 Drei Spalten, doppelt breite dunkle Kachel unten ---------- */
.bg04-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(240px, auto);
	gap: 20px;
}

.bg04-foto {
	position: relative;
	min-height: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #ececef;
}

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

.bg04-kachel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 28px;
	border-radius: 12px;
	background: #ececef;
}

.bg04-zahl {
	justify-content: flex-end;
}

.bg04-wert {
	margin: 0;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-text);
}

.bg04-klein {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-text-light);
}

.bg04-klein-titel {
	margin: 0 0 4px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-light);
}

.bg04-h3 {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.bg04-akzent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	grid-column: 1 / 3;
	padding: 36px;
	border-radius: 12px;
	background: var(--color-text);
	color: #fff;
}

.bg04-akzent-titel {
	margin: 0 0 12px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.bg04-akzent-text {
	max-width: 560px;
	margin: 0;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
}

.bg04-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.bg04-btn-hell {
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bg04-btn-hell:hover,
.bg04-btn-hell:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var(--color-text);
}

.bg04-buch {
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.bg04-cover {
	width: 110px;
	aspect-ratio: 3 / 4;
	flex: none;
	border-radius: 6px;
	object-fit: cover;
}

/* ---------- 3506 Welten als Fotokacheln mit Textstreifen ---------- */
.bg06-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 240px;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bg06-kachel {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #ececef;
}

.bg06-kachel--a { grid-column: 1 / 3; grid-row: 1; }
.bg06-kachel--b { grid-column: 3; grid-row: 1 / 3; }
.bg06-kachel--c { grid-column: 4; grid-row: 1; }
.bg06-kachel--d { grid-column: 1 / 3; grid-row: 2; }
.bg06-kachel--e { grid-column: 4; grid-row: 2; }

.bg06-link {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 12px;
}

.bg06-link:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: -3px;
}

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

.bg06-bild--oben {
	object-position: 80% top;
}

/* Etikett oben rechts, weil unten der Textstreifen liegt */
.bg06-link .ai-tag {
	top: 8px;
	bottom: auto;
}

.bg06-streifen {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background-color: rgba(22, 39, 77, 0.82);
	color: #fff;
	transition: background-color 0.2s ease;
}

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

.bg06-h3 {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
}

.bg06-zeile {
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

.bg06-pfeil {
	width: 22px;
	height: 22px;
	flex: none;
	color: #fff;
	transition: color 0.2s ease;
}

.bg06-link:hover .bg06-streifen,
.bg06-link:focus-visible .bg06-streifen {
	background-color: rgba(22, 39, 77, 0.95);
}

.bg06-link:hover .bg06-pfeil,
.bg06-link:focus-visible .bg06-pfeil {
	color: var(--color-accent);
}

@media (max-width: 900px) {
	.bg-box {
		padding: 32px 24px;
	}

	.bg03-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bg04-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bg04-raster > .bg04-kachel:not(.bg04-zahl),
	.bg04-akzent {
		grid-column: 1 / -1;
	}

	.bg06-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 220px;
	}

	.bg06-raster > .bg06-kachel {
		grid-column: auto;
		grid-row: auto;
	}

	.bg06-raster > .bg06-kachel--e {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.bg-box {
		padding: 24px 18px;
	}

	.bg03-titel {
		margin-bottom: 28px;
	}

	.bg03-raster {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 12px;
	}

	.bg03-portraet {
		grid-row: auto;
		aspect-ratio: 4 / 5;
	}

	.bg04-raster {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 12px;
	}

	.bg04-foto {
		aspect-ratio: 4 / 3;
	}

	.bg04-kachel {
		padding: 24px;
	}

	.bg04-akzent {
		padding: 28px 24px;
	}

	.bg04-akzent-titel {
		font-size: 1.35rem;
	}

	.bg04-buttons {
		flex-direction: column;
	}

	.bg04-buttons .btn {
		width: 100%;
	}

	.bg04-buch {
		align-items: flex-start;
	}

	.bg06-raster {
		grid-auto-rows: auto;
		gap: 12px;
	}

	.bg06-kachel {
		aspect-ratio: 1 / 1;
	}

	.bg06-raster > .bg06-kachel--e {
		aspect-ratio: 2 / 1;
	}

	.bg06-streifen {
		gap: 8px;
		padding: 10px 12px;
	}

	.bg06-h3 {
		font-size: 0.9rem;
	}

	.bg06-zeile {
		display: none;
	}

	.bg06-pfeil {
		width: 18px;
		height: 18px;
	}
}

/* =========================================================
   FAQ und Reiter (aus Muster-Bibliothek 5203 und 5206), weißer Hintergrund
   ========================================================= */
.fq-section {
	background: #fff;
}

.fq-section + .fq-section,
.bg-section + .fq-section {
	padding-top: 0;
}

.fq-box {
	background: #fff;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 16px;
	padding: 48px;
}

.fq-text {
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-light);
}

/* ---------- 5203: Kontaktkopf links, Karten-Akkordeon rechts ---------- */
.fq03-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 48px;
	align-items: start;
}

.fq03-kopf {
	position: sticky;
	top: 100px;
}

.fq03-titel {
	font-size: 1.9rem;
}

.fq03-button {
	margin-top: 8px;
}

.fq03-hinweis {
	margin: 12px 0 0;
	font-size: 0.9rem;
	color: var(--color-text-light);
}

.fq03-liste {
	display: grid;
	gap: 12px;
}

.fq03-karte {
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 12px;
	background: #f4f8fb;
	transition: border-color 0.2s ease;
}

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

.fq03-frage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--color-text);
	list-style: none;
	cursor: pointer;
}

.fq03-frage::-webkit-details-marker {
	display: none;
}

.fq03-frage:focus-visible {
	outline: 2px solid var(--color-accent-dark);
	outline-offset: 2px;
	border-radius: 12px;
}

.fq03-kreis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: #ececef;
	color: var(--color-text);
	transition: background-color 0.2s ease;
}

.fq03-kreis svg {
	width: 16px;
	height: 16px;
}

.fq03-senkrecht {
	transition: opacity 0.2s ease;
}

.fq03-karte[open] .fq03-kreis {
	background: var(--color-accent);
	color: #fff;
}

.fq03-karte[open] .fq03-senkrecht {
	opacity: 0;
}

.fq03-antwort {
	margin: 0;
	padding: 0 24px 22px;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--color-text-light);
}

/* ---------- 5206: Vertikale Reiter mit Nummern, Karte rechts ---------- */
.fq06-titel {
	max-width: 720px;
	margin-bottom: 40px;
}

.fq06-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 40px;
	align-items: start;
}

.fq06-leiste {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fq06-tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 16px 20px 16px 17px;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 6px;
	background: transparent;
	font: inherit;
	text-align: left;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fq06-tab:not([aria-selected="true"]):hover {
	background-color: #f4f8fb;
}

.fq06-tab[aria-selected="true"] {
	border-left-color: var(--color-accent);
	background: #eef6fb;
}

.fq06-tab:focus-visible,
.fq06-panel:focus-visible {
	outline: 2px solid var(--color-accent-dark);
	outline-offset: 2px;
}

.fq06-nr {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-accent-dark);
}

.fq06-tabtitel {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
}

.fq06-unter {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text-light);
}

.fq06-karte {
	padding: 40px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 12px;
	background: #f4f8fb;
}

.fq06-icon {
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: 16px;
	color: var(--color-accent-dark);
}

.fq06-paneltitel {
	margin: 0 0 12px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.fq06-punkte {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 32px;
	margin: 24px 0 32px;
	padding: 0;
	list-style: none;
}

.fq06-punkte li {
	display: flex;
	flex-direction: column;
	padding-top: 12px;
	border-top: 1px solid rgba(47, 143, 150, 0.3);
}

.fq06-punkte strong {
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text);
}

.fq06-punkte span {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--color-text-light);
}

@media (max-width: 900px) {
	.fq-box {
		padding: 32px 24px;
	}

	.fq03-raster {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.fq03-kopf {
		position: static;
	}

	.fq03-button {
		width: 100%;
	}

	.fq06-titel {
		margin-bottom: 28px;
	}

	.fq06-raster {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fq06-leiste {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		padding-bottom: 6px;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.fq06-tab {
		flex: none;
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		width: auto;
		padding: 8px 16px;
		border: 1px solid rgba(47, 143, 150, 0.3);
		border-radius: 999px;
		white-space: nowrap;
	}

	.fq06-tab[aria-selected="true"] {
		border-color: var(--color-accent);
		background: var(--color-accent);
		color: #fff;
	}

	.fq06-tab[aria-selected="true"] .fq06-nr {
		color: #fff;
	}

	.fq06-tabtitel {
		font-size: 0.9rem;
	}

	.fq06-unter {
		display: none;
	}
}

@media (max-width: 640px) {
	.fq-box {
		padding: 24px 18px;
	}

	.fq03-titel {
		font-size: 1.6rem;
	}

	.fq03-frage {
		padding: 16px 18px;
		font-size: 1rem;
	}

	.fq03-kreis {
		width: 28px;
		height: 28px;
	}

	.fq03-antwort {
		padding: 0 18px 18px;
	}

	.fq06-karte {
		padding: 24px;
	}

	.fq06-paneltitel {
		font-size: 1.3rem;
	}

	.fq06-punkte {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.fq06-button {
		width: 100%;
	}
}

/* ===== Juristisches: Rechner, Checkliste, Formate, Karte auf der Kante (aus Mustern 6303, 6304, 8406, 8408) ===== */

/* Weiße Sektionen direkt untereinander: kein doppelter Abstand */
.st03-section,
.st04-section {
	background: #fff;
}

.fq-section + .st03-section,
.st03-section + .st04-section {
	padding-top: 0;
}

/* ----- 6303: Rechner mit Reglern und mitlaufendem Ergebnis ----- */
.st03-raster {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: start;
}

.st03-regler {
	display: grid;
	gap: 28px;
}

.st03-zeile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 10px;
}

.st03-label {
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text);
}

.st03-pille {
	flex: none;
	padding: 4px 14px;
	border-radius: 999px;
	background: #eef6fb;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text);
}

.st03-range {
	display: block;
	width: 100%;
	height: 22px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.st03-range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: #d6dfe9;
}

.st03-range::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: #d6dfe9;
}

.st03-range::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	margin-top: -8px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--color-accent);
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease;
}

.st03-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--color-accent);
	transition: background-color 0.2s ease;
}

.st03-range:hover::-webkit-slider-thumb {
	background-color: var(--color-accent-dark);
}

.st03-range:hover::-moz-range-thumb {
	background-color: var(--color-accent-dark);
}

.st03-range:focus {
	outline: none;
}

.st03-range:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 4px;
	border-radius: 999px;
}

.st03-grenzen {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 0.8rem;
	color: var(--color-text-light);
}

.st03-annahmen {
	padding-top: 16px;
	border-top: 1px solid rgba(47, 143, 150, 0.3);
}

.st03-summary {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-accent-dark);
	cursor: pointer;
	transition: color 0.2s ease;
}

.st03-summary:hover {
	color: var(--color-text);
}

.st03-annahmen p {
	margin: 10px 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--color-text-light);
}

.st03-ergebnis {
	position: sticky;
	top: calc(var(--header-height, 80px) + 24px);
	align-self: start;
	padding: 32px;
	border-radius: 12px;
	background: var(--color-text);
	color: #fff;
}

.st03-ergebnis-label {
	margin: 0 0 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #d9deea;
}

.st03-gross {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 20px;
	line-height: 1.1;
}

.st03-monat {
	font-size: 3.2rem;
	font-weight: 700;
	color: var(--color-accent);
}

.st03-einheit {
	font-size: 1rem;
	font-weight: 500;
}

.st03-neben {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.95rem;
}

.st03-neben div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.st03-neben dt {
	color: #d9deea;
}

.st03-neben dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.st03-button {
	width: 100%;
}

/* ----- 6304: Checkliste in zwei Spalten mit Zähler ----- */
.st04-kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 40px;
	align-items: start;
	margin-bottom: 32px;
}

.st04-intro {
	margin-bottom: 0;
}

.st04-zaehler {
	padding: 24px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 12px;
	background: #ececef;
}

.st04-zahl {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-text-light);
}

.st04-anzahl {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-text);
}

.st04-spur {
	height: 8px;
	border-radius: 999px;
	background: #f4f8fb;
	overflow: hidden;
}

.st04-balken {
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--color-accent);
	transition: width 0.3s ease;
}

.st04-stufe {
	margin: 10px 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text-light);
}

.st04-spalten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.st04-spalte-titel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 1.1rem;
	color: var(--color-text);
}

.st04-spalte-titel svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--color-accent-dark);
}

.st04-punkte {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st04-punkt {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 12px;
	background: #ececef;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

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

.st04-punkt.st04-an {
	background-color: #eef6fb;
}

.st04-check {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.st04-box {
	position: relative;
	width: 24px;
	height: 24px;
	flex: none;
	margin-top: 1px;
	border: 2px solid rgba(47, 143, 150, 0.3);
	border-radius: 6px;
	background: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.st04-check:checked + .st04-box {
	border-color: var(--color-text);
	background-color: var(--color-text);
}

.st04-check:checked + .st04-box::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 7px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.st04-check:focus-visible + .st04-box {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.st04-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.45;
	color: var(--color-text);
}

.st04-text strong {
	font-weight: 600;
}

.st04-text span {
	margin-top: 2px;
	font-size: 0.9rem;
	color: var(--color-text-light);
}

.st04-ergebnis {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-top: 32px;
	padding: 20px 24px;
	border-radius: 12px;
	background: #eef6fb;
	color: var(--color-text);
}

.st04-ergebnis-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

.st04-link {
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ----- 8406: Punktraster auf Dunkelblau, zu den Rändern ausgeblendet ----- */
.tr06-section {
	position: relative;
	overflow: hidden;
	background: var(--color-text);
	color: #fff;
}

.tr06-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.26) 1.5px, transparent 1.6px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 60% 65% at 50% 45%, rgba(22, 39, 77, 1) 25%, transparent 90%);
	mask-image: radial-gradient(ellipse 60% 65% at 50% 45%, rgba(22, 39, 77, 1) 25%, transparent 90%);
	pointer-events: none;
}

.tr06-inhalt {
	position: relative;
}

.tr06-eyebrow {
	color: var(--color-accent);
}

.tr06-titel {
	color: #fff;
}

.tr06-intro {
	color: #d9deea;
}

.tr06-karten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr06-karte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: var(--color-text);
}

.tr06-icon {
	width: 28px;
	height: 28px;
	color: var(--color-accent);
}

.tr06-karte-titel {
	margin: 16px 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.tr06-karte-text {
	flex: 1;
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #d9deea;
}

.tr06-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--color-accent);
	cursor: pointer;
	transition: color 0.2s ease;
}

.tr06-link:hover,
.tr06-link:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* ----- 8408: Überlappende Karte auf der Kante (Bühne hell) ----- */
.tr08-section {
	padding: 0 0 64px;
	background: #f4f8fb;
	color: var(--color-text);
}

.tr08-band {
	padding: 72px 0 112px;
	background: var(--color-text);
	color: #fff;
}

.tr08-eyebrow {
	margin: 0 0 12px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-accent);
}

.tr08-titel {
	margin: 0 0 16px;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.tr08-intro {
	max-width: 620px;
	margin: 0;
	line-height: 1.7;
	color: #d9deea;
}

.tr08-karte {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 40px;
	align-items: center;
	max-width: 920px;
	margin: -72px auto 0;
	padding: 28px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 12px;
	background: #fff;
	color: var(--color-text);
	transition: border-color 0.2s ease;
}

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

.tr08-bild {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
}

.tr08-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tr08-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: #eef6fb;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text);
}

.tr08-karte-titel {
	margin: 12px 0 10px;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.tr08-karte-text {
	margin: 0 0 24px;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--color-text-light);
}

.tr08-aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
}

.tr08-link {
	font-weight: 600;
	color: var(--color-accent-dark);
	transition: color 0.2s ease;
}

.tr08-link:hover,
.tr08-link:focus-visible {
	color: var(--color-text);
	text-decoration: underline;
}

.tr08-weiter {
	padding-top: 56px;
}

.tr08-weiter-titel {
	margin: 0 0 16px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.tr08-liste {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr08-pfeillink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.tr08-pfeil {
	width: 18px;
	height: 18px;
	flex: none;
}

@media (prefers-reduced-motion: reduce) {
	.st03-range::-webkit-slider-thumb,
	.st03-summary,
	.st04-balken,
	.st04-punkt,
	.st04-box,
	.tr06-link,
	.tr08-karte,
	.tr08-link {
		transition: none;
	}
}

@media (max-width: 900px) {
	.st03-raster {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.st03-ergebnis {
		position: static;
	}

	.st04-kopf {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.st04-zaehler {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 4px 20px;
	}

	.st04-zahl {
		grid-row: span 2;
		margin: 0;
	}

	.st04-stufe {
		margin: 0;
	}

	.tr06-karten {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 640px) {
	.st03-zeile {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.st03-ergebnis {
		padding: 24px;
	}

	.st03-monat {
		font-size: 2.6rem;
	}

	.st04-spalten {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.st04-zaehler {
		padding: 20px;
	}

	.st04-ergebnis {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 20px;
	}

	.tr06-section {
		padding: 48px 0;
	}

	.tr06-section::before {
		background-size: 20px 20px;
	}

	.tr06-karte {
		padding: 22px;
	}

	.tr08-section {
		padding-bottom: 48px;
	}

	.tr08-band {
		padding: 48px 0 88px;
	}

	.tr08-titel {
		font-size: 1.7rem;
	}

	.tr08-karte {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: -48px;
		padding: 20px;
	}

	.tr08-bild {
		aspect-ratio: 3 / 2;
	}

	.tr08-bild img {
		object-position: 50% 15%;
	}

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

	.tr08-link {
		align-self: flex-start;
	}

	.tr08-weiter {
		padding-top: 40px;
	}

	.tr08-weiter-titel {
		font-size: 1.4rem;
	}
}

/* --- Variante 1: Editorial mit großer Nummer, Foto im Breitformat mit versetzter Fläche --- */
.be-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
	padding: 48px 0;
	border-top: 1px solid rgba(47, 143, 150, 0.3);
}.be-block--rev .be-bild {
	order: 2;
	margin: 0 0 20px 20px;
}

.be-bild {
	position: relative;
	isolation: isolate;
	aspect-ratio: 16 / 10;
	margin: 0 20px 20px 0;
}

.be-bild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 16px;
	background: #dcecf7;
	transform: translate(20px, 20px);
}

.be-block--rev .be-bild::before {
	transform: translate(-20px, 20px);
}

.be-bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}

.be-kopf {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 10px;
}

.be-nr {
	font-size: 3.4rem;
	font-weight: 200;
	line-height: 1;
	color: var(--color-accent);
}

.be-zeile {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.be-titel {
	margin: 0 0 14px;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

.be-text {
	margin: 0 0 20px;
	line-height: 1.75;
	color: var(--color-text-light);
}

.be-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--color-accent);
	font-weight: 600;
	color: var(--color-text);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.be-link svg {
	width: 18px;
	height: 18px;
}

.be-link:hover,
.be-link:focus-visible {
	color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
}

@media (max-width: 900px) {.be-block {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.be-block--rev .be-bild {
		order: 0;
		margin: 0 20px 20px 0;
	}

	.be-block--rev .be-bild::before {
		transform: translate(20px, 20px);
	}
}

@media (max-width: 640px) {.be-nr {
		font-size: 2.6rem;
	}

	.be-titel {
		font-size: 1.5rem;
	}

	.be-bild,
	.be-block--rev .be-bild {
		margin: 0 12px 12px 0;
	}

	.be-bild::before,
	.be-block--rev .be-bild::before {
		transform: translate(12px, 12px);
	}
}

/* Nummer links, Zusatzzeile und Überschrift rechts daneben */
.be-kopf {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 18px;
	align-items: center;
	margin-bottom: 18px;
}

.be-nr {
	grid-row: span 2;
	align-self: center;
	font-size: 3.8rem;
}

.be-zeile {
	align-self: end;
	margin-bottom: 2px;
}

.be-kopf .be-titel {
	align-self: start;
	margin: 0;
}

@media (max-width: 640px) {
	.be-kopf {
		column-gap: 12px;
	}

	.be-nr {
		font-size: 2.8rem;
	}
}

/* Zusatzzeile und Überschrift enger zusammen */
.be-kopf {
	row-gap: 0;
	align-items: start;
}

.be-zeile {
	align-self: end;
	margin: 0 0 -2px;
	line-height: 1.2;
}

.be-kopf .be-titel {
	margin-top: 0;
	line-height: 1.15;
}

.be-nr {
	align-self: center;
}

/* kein Trennstrich über dem ersten Bereich */
#bereiche .be-block:first-child {
	padding-top: 8px;
	border-top: 0;
}

/* Speaker und Autor im selben Stil wie die vier Bereiche, nur ohne Nummer */
#referenzen .be-block {
	padding: 48px 0;
	border-top: 1px solid rgba(47, 143, 150, 0.3);
}

#referenzen .section-title + .be-block {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 0;
}

.be-kopf--ohne-nr {
	display: block;
	margin-bottom: 14px;
}

.be-kopf--ohne-nr .be-zeile {
	margin: 0 0 4px;
}

#referenzen .be-bild img {
	object-position: 50% 28%;
}

#referenzen .be-block--rev .be-bild img {
	object-position: center;
}

/* Abstände im Abschnitt Speaker und Autor: mehr Luft unter der Überschrift,
   weniger Lücke zur Anfrage-Box darunter */
#referenzen .section-title + .be-block {
	margin-top: 0;
	padding-top: 40px;
}

#referenzen .be-block:last-of-type {
	padding-bottom: 8px;
}

#referenzen .kp-teaser {
	margin-top: 40px;
}

/* Autor-Block: kein Leerraum mehr zur Anfrage-Box */
#referenzen .be-block:last-of-type {
	padding-bottom: 0;
}

#referenzen .kp-teaser {
	margin-top: 16px;
}

/* Blog-Vorschau auf der Startseite wie die Karten der Blog-Übersicht:
   weiße Karte, Themenfeld als Badge, Lesezeit rechts, „Weiterlesen“ mit Pfeil */
.bl-card {
	background: #ffffff;
	color: var(--color-text);
}

.bl-card:hover,
.bl-card:focus-visible {
	background: #f4f8fb;
}

.bl-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 0.85rem;
	color: var(--color-text-light);
}

.bl-badge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--color-accent);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text);
}

.bl-lesezeit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	color: var(--color-text-light);
}

.bl-lesezeit svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.bl-text {
	color: var(--color-text-light);
}

.bl-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-accent-dark);
}

.bl-more svg {
	width: 18px;
	height: 18px;
}

/* Anfrage-Box 10 px höher */
#referenzen .kp-teaser {
	margin-top: 6px;
}

/* Blog-Karten auf der Startseite ohne Anlesetext, Titel darf drei Zeilen nutzen */
.bl-title {
	margin-bottom: 16px;
	-webkit-line-clamp: 3;
	min-height: calc(3 * 1.3em);
}

/* Blättern unter der Blog-Vorschau im Stil der Blog-Übersicht:
   weiße Knöpfe mit Rahmen, Mouse-Over sehr helles Blau */
#blog .bl-arrow,
.bl-arrow {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(47, 143, 150, 0.38);
	background: #ffffff;
	color: var(--color-text);
}

#blog .bl-arrow:hover:not(:disabled),
#blog .bl-arrow:focus-visible:not(:disabled),
.bl-arrow:hover:not(:disabled),
.bl-arrow:focus-visible:not(:disabled) {
	border-color: var(--color-text);
	background: #f4f8fb;
	color: var(--color-text);
}

.bl-arrow:disabled {
	opacity: 0.45;
}

#blog .bl-page,
.bl-page {
	color: var(--color-text);
	opacity: 0.65;
}

#blog .bl-page:hover,
#blog .bl-page:focus-visible,
#blog .bl-page[aria-current="true"],
.bl-page:hover,
.bl-page:focus-visible,
.bl-page[aria-current="true"] {
	color: var(--color-text);
	opacity: 1;
}

.bl-nav {
	gap: 12px;
	margin-top: 32px;
}

/* letzter Bereich (04 Business): weniger Abstand zur nächsten Sektion */
#bereiche .be-block:last-child {
	padding-bottom: 30px;
}

/* Kontaktbox ohne Umschlag und Rakete, Footer 20 px höher (gilt auf allen Seiten) */
.footer-contact-art {
	display: none;
}

.footer-contact {
	padding-top: 40px;
}

.site-footer {
	margin-top: 170px;
}

.footer-top {
	top: -170px;
}

@media (max-width: 900px) {
	.site-footer {
		margin-top: 20px;
	}

	.footer-contact {
		padding-top: 36px;
	}
}

@media (max-width: 480px) {
	.footer-contact {
		padding: 36px 28px 32px;
	}
}

/* Bereiche und Speaker/Autor: Eyebrow und Überschrift wie überall auf der Seite */
.be-inhalt .section-eyebrow {
	margin: 0 0 8px;
}

.be-titel {
	margin: 0 0 16px;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.2;
}

@media (max-width: 640px) {
	.be-titel {
		font-size: 1.7rem;
	}
}

/* ==========================================================================
   NEUES DESIGN: Glasflaechen, Farbverlauf Petrol nach Blau, Mint als Akzent.
   Liegt als Schicht ueber allem darueber und greift ueber <body class="neu">.
   ========================================================================== */

:root {
	--navy: #1e3553;
	--teal: #2f8f96;
	--teal-tief: #24717f;
	--blau: #3b6fa8;
	--mint: #8fd4cf;
	--mint-hell: #e4f6f2;

	/* Farben der Webseite auf die neue Welt umgelenkt */
	--color-text: #1e3553;
	--color-text-light: #4c6178;
	--color-accent: #8fd4cf;
	--color-accent-dark: #2f8f96;
	--color-bg: transparent;
	--color-header-bg: transparent;
	--header-height: 88px;

	--verlauf: linear-gradient(150deg, #24607a 0%, #287385 50%, #2e8790 100%);
	--verlauf-dunkel: linear-gradient(160deg, #1d3557 0%, #1a4763 55%, #1f6a6f 100%);
	--glas: rgba(255, 255, 255, 0.6);
	--glas-rand: rgba(255, 255, 255, 0.8);
	--glas-schatten: 0 24px 60px rgba(30, 53, 83, 0.12), 0 2px 6px rgba(30, 53, 83, 0.05);
	--rand: rgba(30, 53, 83, 0.1);
}

body.neu {
	background: #eaf3f6;
	color: var(--navy);
}

/* ---------- Hintergrund: Verlauf mit langsam treibenden Lichtflecken ---------- */
.hg-flaeche {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: linear-gradient(160deg, #e9f1f8 0%, #e6f4f3 45%, #d6efe9 75%, #bfe4dc 100%);
}

.hg-fleck {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.75;
	animation: hg-treiben 22s ease-in-out infinite alternate;
}

.hg-fleck-1 { top: -160px; left: -120px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(59, 111, 168, 0.55), rgba(59, 111, 168, 0) 70%); }
.hg-fleck-2 { top: 30%; right: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(47, 143, 150, 0.5), rgba(47, 143, 150, 0) 70%); animation-delay: -8s; }
.hg-fleck-3 { bottom: -220px; left: 25%; width: 640px; height: 640px; background: radial-gradient(circle, rgba(159, 223, 210, 0.9), rgba(159, 223, 210, 0) 70%); animation-delay: -15s; }

@keyframes hg-treiben {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(60px, 40px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.hg-fleck { animation: none; }
}

/* ---------- Kopfzeile: schwebende Glasleiste, Aufbau und Hover wie bisher ---------- */
body.neu .site-header {
	background: transparent;
	box-shadow: none;
	padding: 14px 24px 0;
}

/* Die Glasfläche liegt auf einem eigenen Element hinter dem Inhalt, nicht auf
   .header-inner selbst: Ein Weichzeichner dort würde das ausklappbare Menü
   (position: fixed) an die Kopfleiste binden, es ließe sich nicht mehr öffnen. */
body.neu .header-inner {
	position: relative;
	height: 70px;
	padding: 0 14px 0 26px;
	background: transparent;
	border: 0;
}

body.neu .header-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid var(--glas-rand);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Wortmarke: Name etwas enger gesetzt, die Zeile darunter als kleine
   Versalzeile mit weitem Buchstabenabstand und Punkten in Petrol. */
body.neu .logo-name {
	letter-spacing: -0.02em;
}

body.neu .logo-sub {
	gap: 6px;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--teal-tief);
	background-color: transparent;
}

body.neu .logo-sep {
	width: 5px;
	height: 5px;
	background: var(--teal);
	transform: rotate(45deg);
	border-radius: 1px;
}

/* Streifen oberhalb der Kopfleiste: was dort durchscrollt, wird weichgezeichnet,
   damit keine lesbaren Überschriften über der Navigation stehen. */
body.neu .site-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
	z-index: -1;
	pointer-events: none;
	backdrop-filter: blur(11px);
	-webkit-backdrop-filter: blur(11px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0) 100%);
}

/* die drei runden Symbole etwas enger zusammen */
body.neu .social-links {
	gap: 9px;
}

body.neu .main-nav ul a.is-active {
	background: var(--verlauf);
	color: #ffffff;
}

/* Mouse-Over in der Kopfzeile: kräftiges Petrol, das helle Mint war zu blass */
body.neu .main-nav ul a:hover,
body.neu .main-nav ul a:focus-visible {
	color: var(--teal-tief);
}

body.neu .main-nav ul a::after {
	background: var(--teal);
}

body.neu .social-icon {
	background: var(--navy);
}

body.neu .social-icon:hover,
body.neu .social-icon:focus-visible {
	background: var(--teal);
}

/* nur der runde Eora-Knopf in der Kopfzeile, nicht der Eintrag in der Kontaktbox */
body.neu .site-header .ai-trigger {
	background: rgba(255, 255, 255, 0.7);
	border-color: var(--navy);
}

body.neu .site-header .ai-trigger:hover,
body.neu .site-header .ai-trigger:focus-visible {
	background: var(--mint);
}

/* ---------- Buttons: Rundung wie bisher, Farbe neu ---------- */
body.neu .btn-primary {
	background: var(--verlauf);
	color: #ffffff;
}

body.neu .btn-primary:hover,
body.neu .btn-primary:focus-visible {
	background: linear-gradient(135deg, var(--teal-tief) 0%, #2c5f9a 100%);
}

body.neu .btn-secondary {
	background: var(--navy);
	color: #ffffff;
}

body.neu .btn-secondary:hover,
body.neu .btn-secondary:focus-visible {
	/* Grundfarbe bleibt, sonst blitzt der Button beim Verlassen kurz durchsichtig auf */
	background-color: var(--navy);
	background-image: linear-gradient(135deg, #1e3553 0%, #24607a 100%);
}

/* ---------- Hero: Glasfläche mit Verlauf, Foto freigestellt wie bisher ---------- */
body.neu .hero {
	background: transparent;
	margin-bottom: 8px;
}

/* Das weiche Licht hinter dem Foto liegt als eigene Verlaufsebene auf der Fläche
   selbst. Als eigenes Element hatte es eine Kante, an der die Farbe hart umsprang. */
body.neu .hero-bg {
	border-bottom-left-radius: 0;
	background-color: transparent;
	background-image:
		radial-gradient(62% 78% at 80% 64%, rgba(47, 143, 150, 0.3) 0%, rgba(59, 111, 168, 0.16) 42%, rgba(59, 111, 168, 0) 72%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 55%, rgba(159, 223, 210, 0.35) 100%);
	border: 0;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	overflow: hidden;
}

/* Abschluss der Hero-Section: sanfter Verlauf in den Seitenhintergrund plus
   eine feine Verlaufslinie, die gleiche Trennung wie zwischen den hellen Abschnitten */
body.neu .hero-bg::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140px;
	background: linear-gradient(180deg, rgba(234, 243, 246, 0) 0%, rgba(234, 243, 246, 0.85) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Trennstrich unter der Hero-Section: läuft bis an den rechten Bildschirmrand und
   nach links hin weich aus. */
body.neu .hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(calc(var(--max-width) + 220px), calc(100% - 40px));
	height: 8px;
	border-radius: 999px 0 0 999px;
	background: linear-gradient(90deg,
		rgba(36, 96, 122, 0) 0%,
		rgba(36, 96, 122, 0.5) 7%,
		#24607a 22%,
		#2e8790 58%,
		var(--mint) 100%);
	z-index: 3;
}

body.neu #ueber-mich::before {
	display: none;
}

body.neu .hero-eyebrow {
	color: var(--teal);
}

body.neu .hero-desc {
	color: var(--color-text-light);
}

/* ---------- Trennungen zwischen hellen Abschnitten ---------- */
body.neu .section {
	background: transparent;
}

body.neu .hg-trenner {
	height: 1px;
	margin: 0 auto;
	max-width: var(--max-width);
	background: linear-gradient(90deg, rgba(30, 53, 83, 0) 0%, rgba(47, 143, 150, 0.55) 20%, rgba(59, 111, 168, 0.55) 80%, rgba(30, 53, 83, 0) 100%);
}

body.neu #ueber-mich,
body.neu #mehrwert,
body.neu #referenzen,
body.neu #hobbys {
	position: relative;
}

body.neu #ueber-mich::before,
body.neu #mehrwert::before,
body.neu #referenzen::before,
body.neu #hobbys::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(var(--max-width), calc(100% - 48px));
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, rgba(30, 53, 83, 0) 0%, rgba(47, 143, 150, 0.6) 15%, rgba(59, 111, 168, 0.6) 85%, rgba(30, 53, 83, 0) 100%);
}

body.neu #ueber-mich {
	padding-top: 72px;
}

/* ---------- Bänder: volle Breite, Verlauf, schräge Kanten als Trennung ---------- */
body.neu .section-accent {
	background: var(--verlauf);
	color: #ffffff;
	padding: 120px 0 110px;
	clip-path: polygon(0 44px, 100% 0, 100% calc(100% - 44px), 0 100%);
}

body.neu .section-accent .section-eyebrow {
	color: var(--mint);
}

body.neu .section-accent .section-title,
body.neu .section-accent .section-intro {
	color: #ffffff;
}

body.neu .section-dark {
	background: var(--verlauf-dunkel);
	color: #ffffff;
}

/* Stationen-Band: Schräge unten läuft in den dunklen Block „Sechs Artikel" */
body.neu .section-accent + .section-dark {
	margin-top: -48px;
	padding-top: 128px;
}

/* Blog-Band: Schräge nur oben, unten gerade Kante zu Hobby und Privates */
body.neu #blog.section-accent {
	clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%);
	padding-bottom: 84px;
}

body.neu .section-dark .section-eyebrow {
	color: var(--mint);
}

/* „Alle Beiträge" steht auf dem Farbband: weiß statt dunkelblau */
body.neu #blog .bl-all {
	color: #ffffff;
}

body.neu #blog .bl-all:hover,
body.neu #blog .bl-all:focus-visible {
	color: var(--mint);
}

/* ---------- Vier Welten: Reiter und Akkordeon ---------- */
body.neu .wt-tab {
	background: var(--glas);
	border: 1px solid var(--glas-rand);
	color: var(--navy);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .wt-tab:hover,
body.neu .wt-tab:focus-visible {
	background: rgba(255, 255, 255, 0.9);
}

body.neu .wt-tab[aria-selected="true"] {
	background: var(--verlauf);
	border-color: transparent;
	color: #ffffff;
}

body.neu .wt-tab[aria-selected="true"]::after {
	background: #297a88;
}

body.neu .wt-item {
	background: var(--glas);
	border: 1px solid var(--glas-rand);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .wt-item:hover {
	background: rgba(255, 255, 255, 0.9);
}

/* ---------- Vier Welten untereinander (Foto mit versetzter Fläche) ---------- */
body.neu .be-bild::before {
	background: linear-gradient(135deg, rgba(47, 143, 150, 0.35), rgba(59, 111, 168, 0.35));
}

body.neu .be-block {
	border-top-color: rgba(47, 143, 150, 0.3);
}

/* ---------- Zeitstrahl im Verlaufsband ---------- */
body.neu .timeline-wrap {
	--tl-ink: #ffffff;
	--tl-accent: var(--navy);
}

body.neu .tl-arrow {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.92);
	color: var(--navy);
}

body.neu .tl-arrow:hover,
body.neu .tl-arrow:focus-visible {
	background: var(--navy);
	color: #ffffff;
}

/* ---------- Sechs Artikel ---------- */
body.neu .statement {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

body.neu .statement:hover {
	background: rgba(255, 255, 255, 0.18);
}

body.neu .statement-no {
	color: var(--mint);
}

/* ---------- Mehrwert: Glaskarten, Pfeile, Verlaufsbrücke ---------- */
body.neu .mw-card {
	background: var(--glas);
	border-color: var(--glas-rand);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .mw-card:hover {
	background: rgba(255, 255, 255, 0.9);
	border-color: var(--glas-rand);
}

body.neu .mw-card-icon {
	color: var(--teal);
}

body.neu .mw-connect span::before {
	background: var(--teal);
}

body.neu .mw-connect span::after {
	border-top-color: var(--teal);
}

body.neu .mw-bridge,
body.neu .mw-bridge--accent {
	background: var(--verlauf);
	color: #ffffff;
	box-shadow: 0 20px 50px rgba(47, 143, 150, 0.3);
}

body.neu .mw-bridge .mw-bridge-icon,
body.neu .mw-bridge .mw-bridge-kicker {
	color: var(--mint);
}

body.neu .mw-bridge .mw-bridge-title,
body.neu .mw-bridge .mw-bridge-text {
	color: #ffffff;
}

/* ---------- Offen für Neues ---------- */
body.neu .mw-open-item,
body.neu .rec-card {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

body.neu .mw-open-item:hover {
	background: rgba(255, 255, 255, 0.18);
}

body.neu .mw-open-label,
body.neu .rec-eyebrow {
	color: var(--mint);
}

body.neu .rec-quote-box {
	background: rgba(255, 255, 255, 0.95);
}

body.neu .rec-quote {
	color: var(--mint);
}

body.neu .rec-monogram {
	background: var(--mint);
	color: var(--navy);
}

body.neu .mw-cv-btn {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.45);
	color: #ffffff;
}

body.neu .mw-cv-btn:hover,
body.neu .mw-cv-btn:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: #ffffff;
}

/* ---------- Speaker und Autor: zwei Glaskarten nebeneinander ---------- */
/* Nur Abstand zwischen den Spalten. Ein Zeilenabstand würde auch zwischen
   Kleinüberschrift und Überschrift stehen und die beiden auseinanderziehen. */
body.neu #referenzen .section-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	row-gap: 0;
	align-items: stretch;
}

body.neu #referenzen .section-eyebrow,
body.neu #referenzen .section-title,
body.neu #referenzen .kp-teaser {
	grid-column: 1 / -1;
}

body.neu #referenzen .section-title {
	margin-bottom: 24px;
}

body.neu #referenzen .be-block {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--glas-rand);
	border-radius: 28px;
	overflow: hidden;
	background: var(--glas);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu #referenzen .be-block--rev .be-bild {
	order: 0;
}

body.neu #referenzen .be-bild {
	margin: 0;
	aspect-ratio: 16 / 9;
	isolation: auto;
}

body.neu #referenzen .be-bild::before {
	display: none;
}

body.neu #referenzen .be-bild img {
	border-radius: 0;
}

body.neu #referenzen .be-inhalt {
	padding: 28px 30px 30px;
}

/* Auf der Webseite sitzt die Anfrage-Box dicht am Autor-Block, weil der dort
   unten Leerraum hatte. Hier sind es geschlossene Karten, also mehr Abstand. */
body.neu #referenzen .kp-teaser {
	margin-top: 40px;
}

body.neu .kp-teaser {
	background: var(--glas);
	border-color: var(--glas-rand);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* ---------- Blog-Band ---------- */
body.neu .bl-card {
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.95);
}

body.neu .bl-card:hover,
body.neu .bl-card:focus-visible {
	background: #ffffff;
}

body.neu .bl-badge {
	background: var(--verlauf);
	color: #ffffff;
}

body.neu #blog .bl-arrow,
body.neu .bl-arrow {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.92);
	color: var(--navy);
}

body.neu #blog .bl-page,
body.neu .bl-page {
	color: #ffffff;
	opacity: 0.7;
}

body.neu #blog .bl-page[aria-current="true"],
body.neu .bl-page[aria-current="true"] {
	opacity: 1;
	border-bottom-color: #ffffff;
}

body.neu #blog .blog-all,
body.neu .section-accent .text-link {
	color: #ffffff;
}

/* ---------- Hobbys: Mosaik ---------- */
body.neu .mo-text {
	background: var(--glas);
	border: 1px solid var(--glas-rand);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .mo-text:hover {
	background: rgba(255, 255, 255, 0.9);
}

body.neu .mo-navy {
	background: var(--verlauf-dunkel);
	border-color: transparent;
	color: #ffffff;
}

body.neu .mo-navy:hover {
	background: linear-gradient(160deg, #22406a 0%, #1f5474 55%, #257a80 100%);
}

body.neu .mo-accent {
	background: var(--verlauf);
	border-color: transparent;
	color: #ffffff;
}

body.neu .mo-accent:hover {
	background: linear-gradient(135deg, var(--teal-tief) 0%, #2c5f9a 100%);
}

body.neu .mo-accent h3,
body.neu .mo-accent p,
body.neu .mo-navy h3,
body.neu .mo-navy p {
	color: #ffffff;
}

body.neu .mo-link {
	color: var(--teal);
}

body.neu .mo-link:hover,
body.neu .mo-link:focus-visible {
	background: var(--teal);
	border-color: var(--teal);
	color: #ffffff;
}

body.neu .mo-accent .mo-link,
body.neu .mo-navy .mo-link {
	color: #ffffff;
}

body.neu .mo-accent .mo-link:hover,
body.neu .mo-navy .mo-link:hover,
body.neu .mo-accent .mo-link:focus-visible,
body.neu .mo-navy .mo-link:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--navy);
}

/* ---------- Weiterlesen-Liste ---------- */
body.neu .xl-row {
	border-color: rgba(30, 53, 83, 0.1);
}

body.neu .xl-section--plain .xl-row:hover,
body.neu .xl-section--plain .xl-row:focus-visible {
	background: rgba(255, 255, 255, 0.6);
}

/* ---------- Footer: volle Breite, Schräge, Kontaktkarte näher am Mosaik ---------- */
body.neu .site-footer {
	margin-top: 130px;
}

body.neu .footer-top {
	top: -130px;
}

body.neu .site-footer::before {
	background: var(--verlauf-dunkel);
}

body.neu .footer-next {
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--glas-rand);
	color: var(--navy);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

body.neu .footer-next:hover,
body.neu .footer-next:focus-visible {
	background: #ffffff;
	border-color: var(--teal);
	color: var(--navy);
}

body.neu .footer-contact {
	background: #ffffff;
	border: 0;
	box-shadow: var(--glas-schatten);
	color: var(--navy);
}

body.neu .footer-contact-list li {
	border-bottom-color: rgba(47, 143, 150, 0.32);
}

body.neu .footer-contact-list li:hover,
body.neu .footer-contact-list li:focus-within {
	background: rgba(47, 143, 150, 0.12);
}

/* color zusätzlich zu fill: zwei der Symbole sind gezeichnete Linien (currentColor)
   und blieben sonst dunkel, während die übrigen grün waren. */
body.neu .footer-contact-list svg,
body.neu .footer-contact-hint svg {
	fill: var(--teal);
	color: var(--teal);
}

/* Eora in der Kontaktbox ist eine Zeile wie die anderen, kein runder Knopf */
body.neu .footer-contact-list .ai-trigger {
	background: none;
	border: 0;
	color: var(--navy);
}

body.neu .footer-contact-list .ai-trigger:hover,
body.neu .footer-contact-list .ai-trigger:focus-visible {
	background: none;
}

body.neu .footer-heading {
	color: var(--mint);
}

body.neu .footer-text,
body.neu .footer-links a,
body.neu .footer-copy,
body.neu .footer-legal a {
	color: rgba(255, 255, 255, 0.82);
}

body.neu .footer-links a:hover,
body.neu .footer-legal a:hover {
	color: var(--mint);
}

/* Runder Knopf links neben „Datenschutz": fährt die Seite wieder nach oben.
   Die weiche Fahrt kommt aus scroll-behavior: smooth, das html bereits hat. */
body.neu .footer-legal .footer-top-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: -8px 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	color: #ffffff;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.neu .footer-legal .footer-top-link svg {
	width: 17px;
	height: 17px;
}

body.neu .footer-legal .footer-top-link:hover,
body.neu .footer-legal .footer-top-link:focus-visible {
	background: var(--mint);
	border-color: var(--mint);
	color: var(--navy);
	text-decoration: none;
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1100px) {
	body.neu .main-nav {
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
	}

	body.neu .site-header {
		padding: 10px 12px 0;
	}

	body.neu .main-nav {
		margin-left: 0;
	}

	/* im ausgeklappten Menü steht der Sprachschalter wie bisher unten links,
	   einzeilig und ohne Trennstrich */
	body.neu .main-nav .lang-switch {
		order: 3;
		flex-direction: row;
		align-self: flex-start;
		align-items: center;
		gap: 0;
		padding-left: 0;
		border-left: 0;
		margin: 22px 28px 0;
		font-size: 0.78rem;
	}

	body.neu .main-nav .lang-switch > a,
	body.neu .main-nav .lang-switch > span {
		padding: 0 3px;
	}
}

@media (max-width: 900px) {
	body.neu #referenzen .section-inner {
		grid-template-columns: 1fr;
	}

	/* untereinander brauchen die beiden Karten wieder einen Abstand */
	body.neu #referenzen .be-block + .be-block {
		margin-top: 24px;
	}

	body.neu .section-accent {
		padding: 90px 0 84px;
		clip-path: polygon(0 26px, 100% 0, 100% calc(100% - 26px), 0 100%);
	}

	body.neu #blog.section-accent {
		clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%);
	}

	body.neu .section-accent + .section-dark {
		margin-top: -30px;
		padding-top: 100px;
	}
}

@media (max-width: 640px) {
	body.neu .header-inner {
		height: 64px;
		padding: 0 10px 0 18px;
	}

	/* Auf dem Handy beginnt die Hero-Section unterhalb der Kopfleiste. Mit einer
	   eigenen hellen Fläche entstünde dort eine harte Kante im Hintergrund,
	   deshalb läuft hier der Seitenhintergrund einfach durch. */
	body.neu .hero-bg {
		background-image: radial-gradient(70% 62% at 78% 58%, rgba(47, 143, 150, 0.26) 0%, rgba(59, 111, 168, 0.14) 45%, rgba(59, 111, 168, 0) 74%);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	body.neu .hero-bg::before {
		display: none;
	}

	body.neu .site-header::before {
		height: 22px;
	}
}

/* Handy (iPhone-Safari): Die Kopfleiste sitzt unterhalb der Statusleiste und der Adresszeile des Browsers,
   dahinter scrollt der Seiteninhalt weiter. Der Weichzeichner reicht deshalb auch dort nach oben. */
@media (max-width: 640px) {
	body.neu .site-header::before {
		top: -260px;
		height: 282px;
		-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 12px), rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 12px), rgba(0, 0, 0, 0) 100%);
	}
}

/* Ausgeklapptes Menü und Abdunklung reichen ebenfalls hinter Statusleiste und Adresszeile nach oben,
   damit dort keine harte Kante zwischen Menü und Browserleiste steht. */
@media (max-width: 1100px) {
	body.neu .main-nav {
		top: -260px;
		padding-top: calc(var(--header-height) + 260px);
	}

	body.neu .nav-overlay {
		inset: -260px 0 0 0;
	}
}

/* Hero ohne Eckenrundung unten links */
body.neu .hero-bg,
body.neu .hero-bg.hero-bg {
	border-bottom-left-radius: 0;
}

/* Sprachwahl DE | EN: klein und zweizeilig, DE über EN, hinter einem senkrechten
   Trennstrich links neben den runden Symbolen. Bewusst nicht grafisch aufbereitet. */
body.neu .main-nav {
	gap: 18px;
	margin-left: 40px;
}

body.neu .social-links {
	order: 2;
}

body.neu .lang-switch {
	position: static;
	top: auto;
	right: auto;
	order: 1;
	flex-direction: column;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding-left: 16px;
	border-left: 1px solid rgba(30, 53, 83, 0.18);
	font-size: 0.62rem;
	line-height: 1.25;
	color: #7f8da1;
}

body.neu .lang-switch > a,
body.neu .lang-switch > span {
	padding: 0;
}

body.neu .lang-switch > a,
body.neu .lang-switch > span {
	color: #7f8da1;
}

body.neu .lang-switch .is-current {
	color: var(--teal-tief);
}

body.neu .lang-switch a:hover,
body.neu .lang-switch a:focus-visible {
	color: var(--teal-tief);
}

/* ---------- Textmarker-Unterstreichungen ---------- */
/* auf hellem Grund: kräftiges Petrol statt hellem Mint, sonst kaum zu sehen */
body.neu .hl::before,
body.neu .hl::after {
	background: #53c4bd;
}

/* auf den farbigen Bändern harmoniert der Marker nicht, dort ohne Unterstreichung */
body.neu .section-accent .hl::before,
body.neu .section-accent .hl::after,
body.neu .section-dark .hl::before,
body.neu .section-dark .hl::after {
	display: none;
}

/* Speaker und Autor: Fotos oben in der Glaskarte */
body.neu #referenzen .be-bild {
	position: relative;
	flex: none;
	width: 100%;
	height: auto;
	min-height: 240px;
	aspect-ratio: 16 / 9;
	margin: 0;
	overflow: hidden;
}

body.neu #referenzen .be-bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Hero: flacher, Foto etwas kleiner */
@media (min-width: 901px) {
	body.neu .hero {
		min-height: 706px;
	}

	body.neu .hero-inner {
		align-items: flex-start;
		padding-top: 150px;
	}

	body.neu .hero-eyebrow {
		margin-top: 0;
	}

	body.neu .hero-person {
		height: 84%;
		max-height: 598px;
	}
}


/* ---------- gemeinsame Grundlage ---------- */
body.neu .subhero {
	background: transparent;
	overflow: hidden;
}

body.neu .subhero-bg {
	border-bottom-left-radius: 0;
	background-color: transparent;
	background-image:
		radial-gradient(64% 88% at 82% 56%, rgba(47, 143, 150, 0.28) 0%, rgba(59, 111, 168, 0.15) 44%, rgba(59, 111, 168, 0) 74%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 55%, rgba(159, 223, 210, 0.35) 100%);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.neu .subhero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(calc(var(--max-width) + 220px), calc(100% - 40px));
	height: 8px;
	border-radius: 999px 0 0 999px;
	background: linear-gradient(90deg,
		rgba(36, 96, 122, 0) 0%,
		rgba(36, 96, 122, 0.5) 7%,
		#24607a 22%,
		#2e8790 58%,
		var(--mint) 100%);
	z-index: 3;
}

body.neu .subhero-inner {
	min-height: 300px;
	padding: 30px 24px;
}

body.neu .subhero-eyebrow,
body.neu .subhero-eyebrow.subhero-typewriter {
	color: var(--teal);
}

body.neu .subhero-title {
	font-size: 2.7rem;
	color: var(--navy);
}

body.neu .subhero-desc {
	color: var(--color-text-light);
}

body.neu .subhero-ring--outer {
	border-color: rgba(30, 53, 83, 0.22);
}

body.neu .subhero-ring--mid {
	border-color: var(--mint);
}

body.neu .subhero-circle {
	background: rgba(255, 255, 255, 0.75);
	border-color: #ffffff;
}

body.neu .subhero-arcs .arc-a { stroke: var(--navy); }
body.neu .subhero-arcs .arc-b { stroke: var(--teal); }
body.neu .subhero-arcs .arc-c { stroke: rgba(30, 53, 83, 0.3); }

/* ----------  Großer Kreis, unten vom Strich angeschnitten, rechts bündig
   mit dem Ende der Navigation ---------- */
/* Kreis und Textspalte nur auf breiten Bildschirmen neu setzen. Darunter
   greifen die vorhandenen Stufen der Webseite, sonst wird die Textspalte
   auf dem Handy rechnerisch negativ und jedes Wort steht in einer Zeile. */
@media (min-width: 901px) {
	body.neu .subhero-inner {
		min-height: 344px;
	}

	body.neu .subhero--kreis-klein .subhero-photo {
		width: 387px;
		height: 387px;
		right: 25px;
		bottom: -65px;
	}

	body.neu .subhero--kreis-klein .subhero-text {
		max-width: calc(100% - 420px);
	}
}

/* Kennzahlen und einfache Karten als Glasflaechen */
body.neu .stat {
	background: var(--glas);
	border: 1px solid var(--glas-rand);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .stat-number {
	color: var(--teal-tief);
}

body.neu .stat-label {
	color: var(--color-text-light);
}

body.neu .card {
	background: var(--glas);
	border: 1px solid var(--glas-rand);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .card:hover {
	background: rgba(255, 255, 255, 0.9);
}

body.neu .card p {
	color: var(--color-text-light);
}

body.neu .card:hover p {
	color: var(--color-text-light);
}
/* Blog-Uebersicht: Filterzeile und Liste ohne eigene Flaechen */
body.neu .blog-hero,
body.neu .blog-list,
body.neu .xl-soft {
	background: transparent;
}

body.neu .blog-filter {
	background: var(--glas);
	border: 1px solid var(--glas-rand);
	color: var(--navy);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .blog-filter:hover,
body.neu .blog-filter:focus-visible {
	background: rgba(255, 255, 255, 0.9);
}

body.neu .blog-filter.is-active {
	background: var(--verlauf);
	border-color: transparent;
	color: #ffffff;
}

body.neu .blog-filter.is-active::after {
	background: #297a88;
}
/* ---------- Baender mit eigener Flaeche ----------
   body.neu .section macht alle Abschnitte durchsichtig. Die Abschnitte, die
   bewusst eine eigene Flaeche hatten, bekommen sie hier in der neuen Farbwelt
   zurueck, sonst stuende helle Schrift auf hellem Grund. */
body.neu .feature-section,
body.neu .pc-section,
body.neu .kz-section,
body.neu .tr06-section {
	background: var(--verlauf-dunkel);
	color: #ffffff;
}

body.neu .spot-section {
	background: var(--verlauf);
	color: #ffffff;
}

body.neu .feature-section .section-eyebrow,
body.neu .pc-section .section-eyebrow,
body.neu .kz-section .section-eyebrow,
body.neu .tr06-section .section-eyebrow,
body.neu .spot-section .section-eyebrow {
	color: var(--mint);
}

/* ruhige helle Baender: Glasflaeche statt Grau, mit feinen Kanten */
body.neu .mw-section,
body.neu .tk-section,
body.neu .tk-section--hellblau,
body.neu .er-section,
body.neu .tr08-section {
	background: rgba(143, 212, 207, 0.16);
	border-top: 1px solid rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Baender, die frueher rein weiss waren, tragen keine .section-Klasse und
   bleiben deshalb sonst weiss: hier durchsichtig, der Seitenhintergrund traegt. */
body.neu .pb-section,
body.neu .zg-section,
body.neu .zr-section,
body.neu .bg-section,
body.neu .fq-section,
body.neu .st03-section,
body.neu .st04-section {
	background: transparent;
}

/* ---------- Kleine Hero: eigene helle Flaeche wie auf der Startseite ----------
   Die Flaeche laeuft 300 Pixel nach oben hinter die Kopfleiste durch, damit es
   dort keine Kante gibt; nach unten blendet sie weich in den Seitenhintergrund
   aus, der Trennstrich bildet den Abschluss. Der Zuschnitt unten bleibt, damit
   der Kreis auf dem Strich abgeschnitten wird. */
body.neu .subhero {
	overflow: visible;
	clip-path: inset(-300px 0 0 0);
}

body.neu .subhero-bg {
	top: -300px;
	border-bottom-left-radius: 0;
	background-color: transparent;
	background-image:
		radial-gradient(closest-side, rgba(47, 143, 150, 0.26) 0%, rgba(59, 111, 168, 0.13) 45%, rgba(59, 111, 168, 0) 100%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 55%, rgba(159, 223, 210, 0.35) 100%);
	background-position: right 40px bottom 30px, 0 0;
	background-size: 640px 430px, auto;
	background-repeat: no-repeat, no-repeat;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.neu .subhero-bg::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 130px;
	background: linear-gradient(180deg, rgba(234, 243, 246, 0) 0%, rgba(234, 243, 246, 0.8) 100%);
	pointer-events: none;
}
/* Visitenkarte am Kreis: Sie lag bisher unterhalb des Fotos und damit unterhalb
   des Trennstrichs, wo die Hero-Section abschneidet. Jetzt steht sie links
   neben dem Kreis und bleibt vollstaendig sichtbar. */
body.neu .subhero-karte {
	left: auto;
	right: 372px;
	top: auto;
	bottom: 84px;
	margin-left: 0;
	transform: none;
	z-index: 12;
	width: 336px;
	padding: 20px 20px 18px;
	border: 1px solid var(--glas-rand);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}

body.neu .subhero-photo {
	z-index: 2;
}
body.neu .subhero-karte-name {
	margin: 0 0 4px;
	font-size: 1.12rem;
	color: var(--navy);
}

body.neu .subhero-karte-chips {
	margin: 10px 0 14px;
	gap: 6px;
}

body.neu .subhero-karte-chips li {
	padding: 5px 10px;
	border: 1px solid rgba(47, 143, 150, 0.28);
	border-radius: 999px;
	background: rgba(143, 212, 207, 0.18);
	color: var(--navy);
}

body.neu .subhero-karte-link {
	color: var(--teal-tief);
}

body.neu .subhero-karte-link:hover,
body.neu .subhero-karte-link:focus-visible {
	color: var(--blau);
	text-decoration: none;
}
/* Abstand zwischen zwei Abschnitten: vorher 80 + 80 Pixel, jetzt ein Drittel
   weniger. Gilt fuer alle hellen Abschnitte auf allen Seiten. Die farbigen
   Baender behalten ihre eigenen, groesseren Werte. */
body.neu .section:not(.section-accent):not(.section-dark) {
	padding-top: 54px;
	padding-bottom: 54px;
}
/* Blogbeitrag: Der Untertitel unter der Ueberschrift ist entfallen. */

/* ---------- Blogbeitrag ---------- */
body.neu .post-box {
	background: var(--glas);
	border: 1px solid var(--glas-rand);
	border-radius: 20px;
	box-shadow: none;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .post-aside {
	background: var(--verlauf-dunkel);
	border-radius: 20px;
}

body.neu .post-lead {
	border-left-color: var(--teal);
}

body.neu .post-body h2::before {
	background: var(--teal);
}

body.neu .post-footer {
	border-top-color: rgba(47, 143, 150, 0.3);
}

body.neu .post-footer-link {
	color: var(--teal-tief);
}

body.neu .post-footer-link:hover,
body.neu .post-footer-link:focus-visible {
	color: var(--blau);
}

body.neu .post-eyebrow {
	color: var(--teal);
}

body.neu .post-popover {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--glas-rand);
	box-shadow: var(--glas-schatten);
}

body.neu .post-popover-label {
	color: var(--teal-tief);
}

body.neu .post-popover-chips li {
	border: 1px solid rgba(47, 143, 150, 0.28);
	border-radius: 999px;
	background: rgba(143, 212, 207, 0.18);
	color: var(--navy);
}

body.neu .post-progress span {
	background: var(--verlauf);
}
/* Handy und Tablet: Der Abstand zwischen dem letzten Abschnitt und dem Footer
   war rund doppelt so gross wie noetig. Auf dem grossen Bildschirm bleibt er,
   weil dort die Kontaktbox in diese Luecke hineinragt. */
@media (max-width: 900px) {
	body.neu .site-footer {
		margin-top: 62px;
		padding-top: 62px;
	}
}
/* Lange Unterstreichungen: Die beiden Textmarker-Striche sind gegenlaeufig
   geneigt. Ueber eine lange Strecke laufen sie rechts weit auseinander,
   deshalb tragen lange Ueberschriften nur noch knapp die halbe Neigung. */
body.neu .hl-lang.hl-v::before {
	--tilt: calc(var(--t1) * 0.45);
}

body.neu .hl-lang.hl-v::after {
	--tilt: calc(var(--t2) * 0.45);
}

/* Aktiver Menuepunkt: Beim Ueberfahren bleibt die Schrift weiss, nur der
   Verlauf wird dunkler. Sonst stuende Petrol auf Petrol. */
body.neu .main-nav ul a.is-active:hover,
body.neu .main-nav ul a.is-active:focus-visible {
	background: linear-gradient(135deg, var(--teal-tief) 0%, #2c5f9a 100%);
	color: #ffffff;
}
/* Blog-Uebersicht: Der Abstand zwischen der Themenauswahl und der ersten Karte
   war mit 110 Pixeln zu gross. */
body.neu .blog-hero {
	padding-bottom: 24px;
}

body.neu .blog-list:not(.section-accent):not(.section-dark) {
	padding-top: 24px;
	padding-bottom: 24px;
}/* Stufe 3 (761 bis 900 Pixel): Die Ueberschrift lief knapp auf das Foto,
   deshalb hier eine Spur kleiner. */
@media (min-width: 761px) and (max-width: 900px) {
	body.neu .subhero-title {
		font-size: 2.5rem;
	}
}
/* Stufe 5 (bis 640 Pixel): groesseres Foto, das zu rund einem Drittel rechts
   aus dem Bild laeuft, der Kopf bleibt sichtbar. Ueberschrift kleiner, damit
   der Fliesstext genug Platz behaelt. */
@media (max-width: 640px) {
	body.neu .subhero-title {
		font-size: 2rem;
	}

	body.neu .subhero--kreis-klein .subhero-photo {
		width: 250px;
		height: 250px;
		right: -84px;
		bottom: -30px;
	}

	body.neu .subhero--kreis-klein .subhero-text {
		max-width: calc(100% - 104px);
	}

	body.neu .subhero-desc {
		font-size: 0.95rem;
	}
}
/* Ganz schmale Handys: Der Kreis muss weiter hereinrutschen, sonst bleibt vom
   Kopf nichts uebrig. */
@media (max-width: 480px) {
	body.neu .subhero--kreis-klein .subhero-photo {
		width: 240px;
		height: 240px;
		right: -72px;
		bottom: -26px;
	}

	body.neu .subhero--kreis-klein .subhero-text {
		max-width: calc(100% - 96px);
	}

	body.neu .subhero-title {
		font-size: 1.85rem;
	}
}
/* Stufe 4 (641 bis 760 Pixel): Foto deutlich groesser, laeuft rechts aus dem Bild. */
@media (min-width: 641px) and (max-width: 760px) {
	body.neu .subhero--kreis-klein .subhero-photo {
		width: 300px;
		height: 300px;
		right: -70px;
		bottom: -40px;
	}

	body.neu .subhero--kreis-klein .subhero-text {
		max-width: calc(100% - 250px);
	}
}
/* Kleine Hero: zwei Knoepfe unter dem Text, wie in der grossen Hero-Section */
body.neu .subhero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

body.neu .subhero-actions .btn-arrow {
	gap: 10px;
}

@media (max-width: 640px) {
	body.neu .subhero-actions {
		gap: 10px;
		margin-top: 18px;
	}

	body.neu .subhero-actions .btn {
		padding: 10px 16px;
		font-size: 0.85rem;
	}
}
/* Karten und Einleitung auf den dunklen Baendern lesbar halten */
body.neu .section-dark .section-intro {
	color: rgba(255, 255, 255, 0.85);
}

body.neu .section-dark .card {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.24);
	box-shadow: none;
	color: #ffffff;
}

body.neu .section-dark .card:hover {
	background: rgba(255, 255, 255, 0.16);
}

body.neu .section-dark .card h3 {
	color: #ffffff;
}

body.neu .section-dark .card p,
body.neu .section-dark .card:hover p {
	color: rgba(255, 255, 255, 0.85);
}
/* Zweispaltiges Kartenraster, wenn nur zwei Karten nebeneinander stehen */
body.neu .card-grid--zwei {
	grid-template-columns: repeat(2, 1fr);
}

/* Pruefzeichen TUEV Rheinland auf der Seite Juristisches */
body.neu .ju-siegel {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 32px;
	padding: 24px 28px;
	border: 1px solid var(--glas-rand);
	border-radius: 20px;
	background: var(--glas);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .ju-siegel img {
	flex: none;
	width: 320px;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

body.neu .ju-siegel-titel {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--navy);
}

body.neu .ju-siegel-text {
	margin: 0;
	line-height: 1.6;
	color: var(--color-text-light);
}

@media (max-width: 900px) {
	body.neu .card-grid--zwei {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	body.neu .ju-siegel {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
}
/* Startseite: Foto im Wechsel Legal (Anzug) und Tech (Hoodie), Umschalter am Foto */
body.neu .hero-look {
	aspect-ratio: 892 / 1036;
	width: auto;
}

body.neu .hero-look-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.7s ease;
}

body.neu .hero-look-tech {
	opacity: 0;
}

body.neu .hero-look.ist-tech .hero-look-legal {
	opacity: 0;
}

body.neu .hero-look.ist-tech .hero-look-tech {
	opacity: 1;
}

body.neu .hero-look-schalter {
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 5;
	display: flex;
	gap: 2px;
	padding: 4px;
	transform: translateX(-50%);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 10px 30px rgba(30, 53, 83, 0.18);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	pointer-events: auto;
}

body.neu .hero-look-schalter button {
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--navy);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.neu .hero-look-schalter button:hover,
body.neu .hero-look-schalter button:focus-visible {
	background: rgba(143, 212, 207, 0.35);
}

body.neu .hero-look-schalter button[aria-pressed="true"] {
	background: var(--verlauf);
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	body.neu .hero-look-bild {
		transition: none;
	}
}
/* Handy: Das Foto laeuft rechts aus dem Bild, der Umschalter sitzt mittig im sichtbaren Teil */
@media (max-width: 640px) {
	body.neu .hero-look-schalter {
		left: 31%;
		bottom: 22px;
	}

	body.neu .hero-look-schalter button {
		padding: 6px 12px;
		font-size: 0.78rem;
	}
}

/* Umschalter mit kleiner Beschriftung darueber, ganzes Foto klickbar */
body.neu .hero-look {
	pointer-events: auto;
	cursor: pointer;
}

body.neu .hero-look-schalter {
	display: grid;
	grid-template-columns: auto auto;
	gap: 2px;
	padding: 5px 4px 4px;
	border-radius: 20px;
}

body.neu .hero-look-hinweis {
	grid-column: 1 / -1;
	padding: 0 0 4px;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: var(--teal-tief);
}

body.neu .hero-look:hover .hero-look-schalter {
	box-shadow: 0 10px 30px rgba(30, 53, 83, 0.28);
}
/* Die Deko-Form liegt ueber dem Foto und darf Klicks nicht abfangen */
body.neu .hero-shape {
	pointer-events: none;
}

/* Handy: Schalter vollstaendig sichtbar, oberhalb des Trennstrichs und frei vom Eora-Knopf */
@media (max-width: 640px) {
	body.neu .hero-look-schalter {
		left: 40%;
		bottom: 58px;
		z-index: 6;
	}
}
/* Kleine Hero: Schriftgroessen wie in den Abschnitten darunter, nicht groesser */
@media (min-width: 641px) {
	body.neu .subhero-title {
		font-size: 2.2rem;
	}
}

body.neu .subhero-desc {
	font-size: 1rem;
}

body.neu .subhero-eyebrow,
body.neu .subhero-eyebrow.subhero-typewriter {
	font-size: 0.95rem;
}
/* Kleine Hero: Textblock 15 px tiefer, ohne die Hoehe der Section zu veraendern */
body.neu .subhero-text {
	position: relative;
	top: 15px;
}
@media (max-width: 900px) {
	body.neu .subhero-text {
		top: 0;
	}
}

/* Test: zwei Varianten fuer den ersten Abschnitt unter der kleinen Hero */
body.neu .erste-v3 .section-inner {
	padding: 44px 44px 48px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.45);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .erste-v3 .card {
	background: rgba(255, 255, 255, 0.75);
}

body.neu .erste-v4 .section-title {
	padding-left: 18px;
	border-left: 5px solid var(--teal);
	font-size: 1.6rem;
}

body.neu .erste-v4 .section-eyebrow,
body.neu .erste-v4 .section-intro {
	padding-left: 23px;
}

@media (max-width: 640px) {
	body.neu .erste-v3 .section-inner {
		padding: 28px 20px 32px;
		border-radius: 20px;
	}
}
/* Nach der Glaskarte 20 px weniger Abstand zum naechsten Abschnitt */
body.neu .section.erste-v3:not(.section-accent):not(.section-dark) {
	padding-bottom: 34px;
}

/* Einstieg- und Zielgruppen-Box im Glaslook */
body.neu .zg-box,
body.neu .zr-box {
	border: 1px solid var(--glas-rand);
	border-radius: 28px;
	background: var(--glas);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
/* Blogbeitrag: Lesefortschritt unter der Kopfleiste ausgeblendet */
body.neu .post-progress {
	display: none;
}

/* Blogbeitrag: Weiterdenken nach dem Blog-Band 15 px tiefer */
body.neu #blog + .section.xl-section {
	padding-top: 69px;
}

/* Test: Karten der Blog-Uebersicht im Glaslook */
body.neu .blog-list .blog-card,
body.neu .blog-list .blog-featured {
	border: 1px solid var(--glas-rand);
	background: var(--glas);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
/* Glasbox unter der kleinen Hero: links Ueberschrift und Text, rechts Kennzahlen oder Liste */
body.neu .glasbox {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 56px;
	align-items: center;
	padding: 48px 60px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .glasbox .section-title {
	margin-bottom: 16px;
}

body.neu .glasbox-text {
	margin: 0;
	line-height: 1.7;
	color: var(--color-text-light);
}

body.neu .glasbox-zahlen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

body.neu .glasbox-zahlen div {
	padding: 22px 24px;
	border: 1px solid rgba(47, 143, 150, 0.2);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.75);
}

body.neu .glasbox-zahlen b {
	display: block;
	font-size: 2.2rem;
	line-height: 1.15;
	background: var(--verlauf);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body.neu .glasbox-zahlen span {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text-light);
}

body.neu .glasbox-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.neu .glasbox-liste li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 0;
	border-bottom: 1px solid rgba(47, 143, 150, 0.25);
	font-weight: 600;
	color: var(--navy);
}

body.neu .glasbox-liste li:last-child {
	border-bottom: 0;
}

body.neu .glasbox-liste i {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--verlauf);
	font-size: 0.8rem;
	font-style: normal;
	color: #ffffff;
}

body.neu .glasbox-liste small {
	display: block;
	margin-top: 2px;
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--color-text-light);
}

body.neu .section.glasbox-section:not(.section-accent):not(.section-dark) {
	padding-bottom: 34px;
}

@media (max-width: 900px) {
	body.neu .glasbox {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 36px 32px;
	}
}

@media (max-width: 640px) {
	body.neu .glasbox {
		padding: 28px 20px;
		border-radius: 20px;
	}

	body.neu .glasbox-zahlen {
		gap: 12px;
	}

	body.neu .glasbox-zahlen div {
		padding: 16px;
	}

	body.neu .glasbox-zahlen b {
		font-size: 1.7rem;
	}
}
/* Glasbox mit Foto rechts (Seite Digitales) */
body.neu .glasbox--foto {
	grid-template-columns: 6fr 5fr;
}

body.neu .glasbox-haken {
	margin: 20px 0 28px;
	padding: 0;
	list-style: none;
}

body.neu .glasbox-haken li {
	position: relative;
	padding: 5px 0 5px 32px;
	color: var(--navy);
}

body.neu .glasbox-haken li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--teal);
	border-bottom: 2px solid var(--teal);
	transform: rotate(-45deg);
}

body.neu .glasbox-bild {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	aspect-ratio: 4 / 3;
}

body.neu .glasbox-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	body.neu .glasbox--foto {
		grid-template-columns: 1fr;
	}
}
/* Digitales: Foto links, Text rechts, damit Foto und Ueberschrift nicht unter denen der Hero stehen */
@media (min-width: 901px) {
	body.neu .glasbox--foto {
		grid-template-columns: 5fr 6fr;
	}

	body.neu .glasbox--foto .glasbox-bild {
		order: -1;
	}
}
/* Digitales: weitere Glasboxen (Vorgehen, Werkzeugkasten, gezeichnete Oberflaeche) */
body.neu .glasbox--breit {
	display: block;
}

body.neu .glasbox--breit .glasbox-text {
	max-width: 640px;
}

body.neu .glasbox-schritte {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

body.neu .glasbox-schritte::before {
	content: "";
	position: absolute;
	left: 28px;
	right: 28px;
	top: 27px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--teal), var(--blau), var(--mint));
}

body.neu .glasbox-schritte li {
	position: relative;
	padding-right: 22px;
}

body.neu .glasbox-schritte b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border: 3px solid var(--teal);
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(30, 53, 83, 0.12);
	font-size: 1.1rem;
	color: var(--navy);
}

body.neu .glasbox-schritte h3 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	color: var(--navy);
}

body.neu .glasbox-schritte p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--color-text-light);
}

body.neu .glasbox-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.neu .glasbox-chips li {
	padding: 10px 16px;
	border: 1px solid rgba(47, 143, 150, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--navy);
}

body.neu .glasbox-chips .hervor {
	border-color: transparent;
	background: var(--verlauf);
	color: #ffffff;
}

body.neu .glasbox-browser {
	overflow: hidden;
	border: 1px solid rgba(30, 53, 83, 0.08);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 24px 50px rgba(30, 53, 83, 0.18);
}

body.neu .gb-leiste {
	display: flex;
	gap: 7px;
	align-items: center;
	padding: 12px 14px;
	background: #eef4f6;
}

body.neu .gb-leiste i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #cfdde2;
}

body.neu .gb-leiste em {
	flex: 1;
	height: 22px;
	margin-left: 10px;
	border-radius: 999px;
	background: #ffffff;
}

body.neu .gb-inhalt {
	display: grid;
	grid-template-columns: 120px 1fr;
	min-height: 260px;
}

body.neu .gb-nav {
	padding: 18px 14px;
	background: var(--navy);
}

body.neu .gb-nav i {
	display: block;
	height: 9px;
	margin-bottom: 14px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.35);
}

body.neu .gb-nav i.an {
	background: var(--mint);
}

body.neu .gb-haupt {
	padding: 20px;
}

body.neu .gb-kacheln {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

body.neu .gb-kacheln span {
	height: 64px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(47, 143, 150, 0.18), rgba(59, 111, 168, 0.18));
}

body.neu .gb-zeile {
	display: block;
	height: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	background: #e3ecef;
}

body.neu .gb-knopf {
	display: inline-block;
	margin-top: 8px;
	padding: 9px 18px;
	border-radius: 8px;
	background: var(--verlauf);
	font-size: 0.8rem;
	font-weight: 700;
	color: #ffffff;
}

@media (max-width: 900px) {
	body.neu .glasbox-schritte {
		grid-template-columns: 1fr 1fr;
		gap: 28px 0;
	}

	body.neu .glasbox-schritte::before {
		display: none;
	}
}

@media (max-width: 640px) {
	body.neu .glasbox-schritte {
		grid-template-columns: 1fr;
	}

	body.neu .gb-inhalt {
		grid-template-columns: 80px 1fr;
		min-height: 200px;
	}
}
/* Digitales oben: Vorher/Nachher, Code-Fenster, drei Fragen */
body.neu .glasbox-vn {
	display: grid;
	grid-template-columns: 1fr 44px 1fr;
	align-items: center;
}

body.neu .vn-vorher,
body.neu .vn-nachher {
	padding: 24px;
	border-radius: 18px;
}

body.neu .vn-vorher {
	border: 1px dashed rgba(30, 53, 83, 0.25);
	background: rgba(255, 255, 255, 0.55);
	color: var(--color-text-light);
}

body.neu .vn-nachher {
	background: var(--verlauf);
	box-shadow: 0 16px 36px rgba(47, 143, 150, 0.3);
	color: #ffffff;
}

body.neu .glasbox-vn small {
	display: block;
	margin-bottom: 10px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.8;
}

body.neu .glasbox-vn ul {
	margin: 0;
	padding-left: 18px;
	font-size: 0.92rem;
	line-height: 1.9;
}

body.neu .vn-pfeil {
	font-size: 1.6rem;
	text-align: center;
	color: var(--teal);
}

body.neu .glasbox-code {
	overflow: hidden;
	border-radius: 16px;
	background: #162639;
	box-shadow: 0 24px 50px rgba(30, 53, 83, 0.28);
}

body.neu .gc-leiste {
	display: flex;
	gap: 7px;
	padding: 12px 14px;
	background: var(--navy);
}

body.neu .gc-leiste i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #3a5270;
}

body.neu .gc-leiste i:first-child {
	background: var(--mint);
}

body.neu .glasbox-code pre {
	margin: 0;
	padding: 18px 22px;
	overflow-x: auto;
	font: 500 0.95rem/1.9 Consolas, "Courier New", monospace;
	color: #cfe2e6;
}

body.neu .gc-c { color: #6f8aa0; }
body.neu .gc-s { color: var(--mint); }
body.neu .gc-k { color: #7fb3e6; }
body.neu .gc-n { color: #f2c46d; }

body.neu .glasbox-fragen {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.neu .glasbox-fragen li {
	display: flex;
	gap: 18px;
	align-items: center;
	margin-bottom: 12px;
	padding: 16px 20px;
	border: 1px solid rgba(47, 143, 150, 0.2);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.75);
}

body.neu .glasbox-fragen li:last-child {
	margin-bottom: 0;
}

body.neu .glasbox-fragen b {
	flex: none;
	font-size: 1.8rem;
	line-height: 1;
	background: var(--verlauf);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body.neu .glasbox-fragen span {
	font-weight: 700;
	color: var(--navy);
}

body.neu .glasbox-fragen small {
	display: block;
	margin-top: 2px;
	color: var(--color-text-light);
}

@media (max-width: 640px) {
	body.neu .glasbox-vn {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	body.neu .vn-pfeil {
		transform: rotate(90deg);
	}

	body.neu .glasbox-code pre {
		font-size: 0.78rem;
		padding: 14px 16px;
	}
}
/* Glasbox gespiegelt: rechte Spalte nach links */
@media (min-width: 901px) {
	body.neu .glasbox--gespiegelt {
		grid-template-columns: 6fr 5fr;
	}

	body.neu .glasbox--gespiegelt > :last-child {
		order: -1;
	}
}

body.neu .hero-look-hinweis {
	font-size: 0.64rem;
}

/* Blogbeitrag: Nur das Fazit am Ende steht in der Glasbox */
body.neu .post-fazit {
	margin-top: 44px;
}

/* Impressum: Hinweisbox ueber die volle Breite unter den drei Karten */
.legal-card--breit {
	grid-column: 1 / -1;
}

/* Logo: Unterzeile buendig mit dem Namen (links nicht ueberstehen, Sperrung rechts ausgleichen) */
body.neu .logo-sub {
	padding-left: 5px;
	margin-right: -0.09em;
}

/* Logo-Unterzeile: runde, etwas kleinere Trennpunkte statt Rauten */
body.neu .logo-sep {
	width: 3.5px;
	height: 3.5px;
	border-radius: 50%;
	transform: none;
}

/* Zwischen 1101 und 1260 px laeuft die Kopfleiste so breit wie die Unterstufen,
   damit das buendig ausgerichtete Logo nicht am Rand der Glasflaeche klebt */
@media (min-width: 1101px) and (max-width: 1260px) {
	body.neu .site-header {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Impressum: Abschnitt "Tiefer einsteigen" 20 px naeher an die Karten */
body.neu .legal-page:has(.legal-card--breit) + .xl-section {
	margin-top: -20px;
}
/* Handy: Name etwas groesser und Unterzeile enger, damit beide gleich breit sind */
@media (max-width: 640px) {
	body.neu .logo-name {
		font-size: 23px;
	}

	body.neu .logo-sub {
		gap: 4px;
		padding-left: 1px;
		letter-spacing: 0.07em;
	}
}

/* Hand-Zeiger nur ueber den Knoepfen Legal und Tech, nicht ueber Foto und Beschriftung */
body.neu .hero-look,
body.neu .hero-look-schalter {
	cursor: default;
}

body.neu .hero-look-schalter button {
	cursor: pointer;
}

/* Bildnachweis fuer lizenzierte Stockfotos: Kurzform immer sichtbar (wie "KI-generiert"),
   Langform als Tooltip beim Ueberfahren oder Antippen */
.ai-tag.bild-quelle {
	pointer-events: auto;
	cursor: help;
}

.bild-quelle-tip {
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	width: max-content;
	max-width: min(300px, 70vw);
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(30, 53, 83, 0.94);
	color: #ffffff;
	font-size: 0.72rem;
	line-height: 1.45;
	white-space: normal;
	box-shadow: 0 10px 30px rgba(30, 53, 83, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.bild-quelle:hover .bild-quelle-tip,
.bild-quelle:focus .bild-quelle-tip {
	opacity: 1;
	visibility: visible;
	transform: none;
}
/* Logo: kleiner Hinweis "Zur Startseite", der dem Mauszeiger folgt (Element per script.js) */
.logo-tip {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3000;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--navy);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(30, 53, 83, 0.2);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.logo-tip.ist-sichtbar {
	opacity: 1;
}
/* ==========================================================================
   Legal-Tech-Seite, Neuaufbau: Quellenzeile, Stationen, Spektrum, Skalierung,
   Rollen, KI-Stufen, Richtungen und Foto-Platzhalter
   ========================================================================== */
body.neu .lt-quelle {
	margin: 18px 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--color-text-light);
}

/* Stationen auf dem Farbband */
body.neu .lt-stationen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 36px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

body.neu .lt-stationen li {
	position: relative;
	padding-top: 26px;
	border-top: 2px solid rgba(255, 255, 255, 0.35);
}

body.neu .lt-stationen li::before {
	content: "";
	position: absolute;
	left: 0;
	top: -7px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

body.neu .lt-stationen b {
	display: block;
	margin-bottom: 6px;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #ffffff;
}

body.neu .lt-stationen h3 {
	margin: 0 0 6px;
	font-size: 1.02rem;
	color: #ffffff;
}

body.neu .lt-stationen p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

/* Community: Haken-Liste im Textblock neben dem Foto */
body.neu #lt-community .glasbox-haken {
	margin: 18px 0 0;
}

/* Spektrum Einzelfall bis Standard */
body.neu .lt-spektrum-kopf {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--navy);
}

body.neu .lt-spektrum-balken {
	height: 12px;
	margin: 10px 0 22px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--navy), var(--teal), var(--mint));
}

body.neu .lt-spektrum-spalten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

body.neu .lt-spektrum-spalte {
	padding: 18px 20px;
	border: 1px solid rgba(47, 143, 150, 0.2);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.75);
}

body.neu .lt-spektrum-spalte small {
	display: block;
	margin-bottom: 10px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teal-tief);
}

body.neu .lt-spektrum-spalte ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.neu .lt-spektrum-spalte li {
	position: relative;
	padding: 4px 0 4px 18px;
	font-weight: 600;
	color: var(--navy);
}

body.neu .lt-spektrum-spalte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--teal);
}

body.neu .lt-spektrum-spalte--produkt {
	border-color: transparent;
	background: var(--verlauf);
}

body.neu .lt-spektrum-spalte--produkt small {
	color: var(--mint);
}

body.neu .lt-spektrum-spalte--produkt li {
	color: #ffffff;
}

body.neu .lt-spektrum-spalte--produkt li::before {
	background: var(--mint);
}

/* Dunkles Band, nur oben schräg */
body.neu .section-dark.lt-schraeg {
	padding-top: 140px;
	clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%);
}

body.neu .lt-tag {
	display: inline-block;
	margin-bottom: 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(143, 212, 207, 0.18);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mint);
}

/* Skalierung: Text links, schematisches Balkendiagramm rechts */
body.neu .lt-skala {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 48px;
	align-items: center;
	margin-top: 28px;
	padding: 36px 40px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.08);
}

body.neu .lt-skala h3 {
	margin: 0 0 10px;
	font-size: 1.3rem;
	color: #ffffff;
}

body.neu .lt-skala p {
	margin: 0;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
}

body.neu .lt-fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

body.neu .lt-fakten li {
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.88rem;
	font-weight: 600;
	color: #ffffff;
}

body.neu .lt-fakten b {
	color: var(--mint);
}

body.neu .lt-skala-chart {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

body.neu .lt-skala-gruppe {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.neu .lt-skala-balken {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	height: 180px;
}

body.neu .lt-skala-balken i {
	display: block;
	width: 30px;
	height: var(--h);
	border-radius: 8px 8px 0 0;
}

body.neu .lt-skala-balken .umsatz {
	background: linear-gradient(180deg, var(--mint), var(--teal));
}

body.neu .lt-skala-balken .kosten {
	background: rgba(255, 255, 255, 0.45);
}

body.neu .lt-skala-gruppe small {
	margin-top: 10px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.8);
}

body.neu .lt-skala-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 14px;
	font-size: 0.8rem;
}

body.neu .lt-skala-legende span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

body.neu .lt-skala-legende span::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

body.neu .lt-skala-legende .umsatz::before {
	background: var(--mint);
}

body.neu .lt-skala-legende .kosten::before {
	background: rgba(255, 255, 255, 0.45);
}

body.neu .lt-skala-legende em {
	margin-left: auto;
	font-style: normal;
	color: rgba(255, 255, 255, 0.6);
}

/* Rollen: Kopf mit Foto-Platzhalter, Kompetenzen als kurze Liste in den Karten */
body.neu .lt-kopf {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: 48px;
	align-items: center;
	margin-bottom: 44px;
}

body.neu .lt-kopf .section-intro {
	margin-bottom: 0;
}

body.neu .lt-skills {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

body.neu .lt-skills li {
	position: relative;
	margin: 7px 0;
	padding-left: 24px;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--color-text-light);
}

body.neu .lt-skills li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 7px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--teal);
	border-bottom: 2px solid var(--teal);
	transform: rotate(-45deg);
}

/* Foto-Platzhalter: zeigt, welches Bild hier noch hinein soll */
body.neu .lt-platzhalter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	aspect-ratio: 4 / 3;
	padding: 28px;
	border: 2px dashed rgba(47, 143, 150, 0.45);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.55);
}

body.neu .lt-platzhalter-label {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--navy);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
}

body.neu .lt-platzhalter p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--color-text-light);
}

body.neu .section-dark .lt-platzhalter {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
}

body.neu .section-dark .lt-platzhalter-label {
	background: var(--mint);
	color: var(--navy);
}

body.neu .section-dark .lt-platzhalter p {
	color: rgba(255, 255, 255, 0.8);
}

/* KI: drei Stufen mit Pfeilen, darunter Foto und Kompetenzen */
body.neu .lt-stufen {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 16px;
	align-items: stretch;
	margin-top: 40px;
}

body.neu .lt-stufe {
	padding: 26px 24px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.08);
}

body.neu .lt-stufe small {
	display: block;
	margin-bottom: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mint);
}

body.neu .lt-stufe h3 {
	margin: 0 0 8px;
	font-size: 1.08rem;
	color: #ffffff;
}

body.neu .lt-stufe p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

body.neu .lt-stufe--hervor {
	border-color: transparent;
	background: var(--verlauf);
}

body.neu .lt-stufe--hervor small {
	color: #ffffff;
}

body.neu .lt-stufen-pfeil {
	display: flex;
	align-items: center;
	color: var(--mint);
}

body.neu .lt-stufen-pfeil svg {
	width: 26px;
	height: 26px;
}

body.neu .lt-ki-unten {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 48px;
	align-items: center;
	margin-top: 48px;
}

body.neu .lt-ki-titel {
	margin: 0 0 8px;
	font-size: 1.3rem;
	color: #ffffff;
}

body.neu .lt-ki-text {
	margin: 0 0 20px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
}

body.neu .section-dark .glasbox-chips li {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

body.neu .section-dark .glasbox-chips .hervor {
	border-color: transparent;
	background: var(--verlauf);
}

/* Nach innen und nach außen: zwei Glaskarten, Foto-Platzhalter dazwischen */
body.neu .lt-richtung {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1fr;
	gap: 24px;
	align-items: stretch;
	margin-top: 40px;
}

body.neu .lt-richtung .lt-platzhalter {
	aspect-ratio: auto;
	min-height: 300px;
}

body.neu .lt-richtung-karte {
	padding: 30px 28px;
	border: 1px solid var(--glas-rand);
	border-radius: 22px;
	background: var(--glas);
	box-shadow: var(--glas-schatten);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

body.neu .lt-richtung-karte--aussen {
	border-color: transparent;
	background: var(--verlauf);
}

body.neu .lt-richtung-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: rgba(47, 143, 150, 0.12);
	color: var(--teal-tief);
}

body.neu .lt-richtung-icon svg {
	width: 24px;
	height: 24px;
}

body.neu .lt-richtung-karte small {
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--teal-tief);
}

body.neu .lt-richtung-karte h3 {
	margin: 0;
	font-size: 1.15rem;
	color: var(--navy);
}

body.neu .lt-richtung-karte .glasbox-haken {
	margin: 16px 0 0;
}

body.neu .lt-richtung-karte--aussen .lt-richtung-icon {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

body.neu .lt-richtung-karte--aussen small {
	color: var(--mint);
}

body.neu .lt-richtung-karte--aussen h3,
body.neu .lt-richtung-karte--aussen .glasbox-haken li {
	color: #ffffff;
}

body.neu .lt-richtung-karte--aussen .glasbox-haken li::before {
	border-color: var(--mint);
}

@media (max-width: 900px) {
	body.neu .lt-stationen {
		grid-template-columns: 1fr 1fr;
	}

	body.neu .lt-skala,
	body.neu .lt-kopf,
	body.neu .lt-ki-unten,
	body.neu .lt-richtung {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	body.neu .lt-skala {
		padding: 28px 24px;
	}

	body.neu .lt-stufen {
		grid-template-columns: 1fr;
	}

	body.neu .lt-stufen-pfeil {
		justify-content: center;
	}

	body.neu .lt-stufen-pfeil svg {
		transform: rotate(90deg);
	}

	body.neu .lt-richtung .lt-platzhalter {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 640px) {
	body.neu .lt-stationen {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	body.neu .lt-spektrum-spalten {
		grid-template-columns: 1fr;
	}

	body.neu .section-dark.lt-schraeg {
		padding-top: 110px;
		clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%);
	}

	body.neu .lt-skala-balken {
		height: 140px;
	}

	body.neu .lt-skala-balken i {
		width: 22px;
	}

	body.neu .lt-platzhalter {
		padding: 22px;
	}
}

/* Legal-Tech: einzelner Foto-Text-Block ohne Trennlinie oben */
body.neu #lt-community .be-block {
	padding-top: 0;
	border-top: 0;
}

/* Legal-Tech: Kanzlei-Check ohne eigene Tönung und Linien, der Seitenhintergrund läuft durch */
body.neu #lt-check.tr08-section {
	background: transparent;
	border-top: 0;
	border-bottom: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Fenster nach Klick auf den Bestätigungslink (bestätigt, bereits bestätigt, abgelaufen, ungültig):
   gleiches Design wie „Nachricht erfolgreich versendet“ */
body .tl-modal.anfrage-modal {
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent-dark) 100%);
	color: #ffffff;
}

.anfrage-modal > *:not(.contact-modal-deco):not(.modal-close) {
	position: relative;
	z-index: 1;
}

.anfrage-modal .tl-modal-eyebrow {
	color: #8fd4cf;
}

.anfrage-modal .tl-modal-title {
	color: #ffffff;
}

.anfrage-modal .anfrage-modal-text {
	color: rgba(255, 255, 255, 0.85);
}

.anfrage-modal .modal-close {
	border-color: rgba(255, 255, 255, 0.55);
	background: transparent;
	color: #ffffff;
}

.anfrage-modal .modal-close:hover,
.anfrage-modal .modal-close:focus-visible {
	background: rgba(255, 255, 255, 0.14);
}

body.neu .anfrage-modal .bereich-modal-btn {
	margin-top: 20px;
	padding: 14px 32px;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: none;
	color: var(--color-text);
}

body.neu .anfrage-modal .bereich-modal-btn:hover,
body.neu .anfrage-modal .bereich-modal-btn:focus-visible {
	background: var(--color-accent);
	color: var(--color-text);
}

.is-problem .anfrage-modal .anfrage-modal-icon {
	background: rgba(255, 255, 255, 0.2);
}
/* Blog-Filter: Anzahl der Beiträge, alles in einer Zeile. Schrift und Innenabstand
   wachsen mit der Breite des Bereichs, damit auch zweistellige Zahlen überall hineinpassen. */
body.neu .blog-filters { gap: clamp(4px, 0.7cqi, 10px); }
body.neu .blog-filter { padding: 12px clamp(7px, 1.1cqi, 18px); font-size: clamp(0.7rem, 1.22cqi, 1rem); }
body.neu .blog-hero .section-inner { container-type: inline-size; }
.blog-filter-anzahl { font-weight: 400; opacity: 0.75; }

/* Eora: Fenster immer gleich hoch, auch wenn anfangs nur die Begrüßung darin steht */
.ai-modal { height: min(720px, 85vh); }

/* Blog-Filter: Der breite erste Beitrag eines Themenfelds sieht aus wie der Leitartikel unter „Alle“ (mit Teaser) */
.blog-card-teaser { display: none; }
.blog-card.is-lead .blog-card-teaser {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: var(--color-text-light);
	line-height: 1.7;
	margin: 0 0 20px;
}
.blog-card.is-lead .blog-card-body h3 { -webkit-line-clamp: 2; }
.blog-card.is-lead .blog-more { margin-top: 4px; }
@media (min-width: 901px) {
	.blog-card.is-lead .blog-card-body { padding: 24px 40px; }
	.blog-card.is-lead .blog-card-body h3 { margin-bottom: 10px; font-size: 1.6rem; }
	.blog-card.is-lead .blog-card-teaser { margin-bottom: 12px; -webkit-line-clamp: 2; }
}

/* Blog-Übersicht: ab dem 20. Beitrag als schlanke Liste mit Seiten */
.blog-liste { margin-top: 56px; }
.blog-liste[hidden], .blog-zeile[hidden] { display: none; }
.blog-liste-titel { margin-bottom: 20px; }
.blog-zeilen { list-style: none; margin: 0; padding: 0; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(22, 39, 77, 0.06); }
.blog-zeile + .blog-zeile { border-top: 1px solid rgba(22, 39, 77, 0.08); }
.blog-zeile a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 16px; align-items: center; padding: 14px 22px; color: var(--navy, #16274d); text-decoration: none; transition: background-color 0.2s ease; }
.blog-zeile a:hover, .blog-zeile a:focus-visible { background: #eef6fa; }
.blog-zeile-zeit { font-size: 0.88rem; color: var(--color-text-light); }
.blog-zeile-zeit { text-align: right; }
.blog-zeile .blog-badge { justify-self: start; }
.blog-zeile-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-liste-seiten { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.blog-liste-seite { font: inherit; min-width: 38px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(22, 39, 77, 0.15); background: #ffffff; color: var(--navy, #16274d); cursor: pointer; }
.blog-liste-seite.is-active { background: var(--navy, #16274d); border-color: var(--navy, #16274d); color: #ffffff; }
@media (max-width: 700px) {
	.blog-zeile a { grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 16px; }
	.blog-zeile-titel { grid-column: 1 / -1; white-space: normal; }
	.blog-zeile .blog-badge { grid-row: 1; grid-column: 1; }
	.blog-zeile-zeit { display: none; }
}

.blog-liste-pfeil { display: inline-flex; align-items: center; justify-content: center; }
.blog-liste-pfeil svg { width: 18px; height: 18px; }
.blog-liste-pfeil:disabled { opacity: 0.35; cursor: default; }

/* Eora: Einwilligung vor der ersten Frage, als eigener Hinweiskasten statt Sprechblase */
.ai-chat-einwilligung { margin: 18px 4px 6px; padding: 16px 18px; border-radius: 12px; background: rgba(90, 169, 214, 0.1); border: 1px solid rgba(90, 169, 214, 0.35); font-size: 0.8rem; line-height: 1.5; color: var(--color-text-light); }
.ai-chat-einwilligung p { margin: 0 0 12px; }
.ai-chat-einwilligung .ai-chat-einwilligung-titel { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
.ai-chat-einwilligung-titel svg { width: 20px; height: 20px; flex: none; color: var(--color-accent-dark); }
.ai-chat-einwilligung a { color: var(--color-accent-dark); text-decoration: underline; }
.ai-chat-einwilligung .btn { padding: 10px 18px; font-size: 0.88rem; }
/* Legal-Tech: Stationen „Wie meine Begeisterung entstand“ auf dem Seitenhintergrund statt auf dem Farbband */
body.neu #lt-anfang .lt-stationen li { border-top-color: rgba(22, 39, 77, 0.15); }
body.neu #lt-anfang .lt-stationen li::before { background: var(--color-accent-dark); box-shadow: 0 0 0 4px rgba(90, 169, 214, 0.2); }
body.neu #lt-anfang .lt-stationen b { color: var(--color-accent-dark); }
body.neu #lt-anfang .lt-stationen h3 { color: var(--color-text); }
body.neu #lt-anfang .lt-stationen p { color: var(--color-text-light); }

/* Legal-Tech: „Wie meine Begeisterung entstand“ als helle Karte, damit sich der Abschnitt vom Hero absetzt */
body.neu .lt-anfang-karte { padding: 48px 60px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 28px; background: rgba(255, 255, 255, 0.72); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (max-width: 700px) {
	body.neu .lt-anfang-karte { padding: 28px 22px; border-radius: 20px; }
}

/* Legal-Tech: „Offen für Neues“ direkt auf dem grünen Farbband statt in einer Box */
body.neu #lt-kapitel .glasbox { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.neu #lt-kapitel .glasbox-text,
body.neu #lt-kapitel .glasbox-haken li { color: rgba(255, 255, 255, 0.92); }
body.neu #lt-kapitel .glasbox-haken li::before { color: var(--mint); border-color: var(--mint); }
body.neu #lt-kapitel .btn-primary { background: #ffffff; color: var(--navy, #16274d); }
body.neu #lt-kapitel .btn-primary:hover { background: rgba(255, 255, 255, 0.88); }

/* Legal-Tech: dunkles Band des Kanzlei-Schnellchecks schließt ohne Lücke an die untere Schräge von „Offen für Neues“ an */
body.neu #lt-kapitel { position: relative; z-index: 1; }
body.neu #lt-kapitel + #lt-check { margin-top: -48px; padding-top: 0; }
body.neu #lt-kapitel + #lt-check .tr08-band { padding-top: 120px; }
@media (max-width: 700px) {
	body.neu #lt-kapitel + #lt-check .tr08-band { padding-top: 96px; }
}
/* „Offen für Neues“: oben gerade Kante, nur unten schräg zum dunklen Band */
body.neu #lt-kapitel { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); padding-top: 96px; }
/* Legal-Tech: „Tiefer einsteigen“ etwas näher an den Kanzlei-Schnellcheck */
body.neu #lt-check + .xl-section { margin-top: -12px; }
/* Legal-Tech: Community-Block mit Überschrift und zwei Absätzen nebeneinander */
body.neu .lt-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
body.neu .lt-drei .section-title { margin-bottom: 0; }
body.neu .lt-drei-text { margin: 0; color: var(--color-text-light); line-height: 1.75; }
@media (max-width: 900px) {
	body.neu .lt-drei { grid-template-columns: 1fr; gap: 18px; }
}
/* Legal-Tech: die drei Karten am Seitenanfang gehören zusammen und stehen dicht untereinander */
body.neu #lt-anfang { padding-bottom: 12px; }
body.neu #lt-standard { padding-top: 12px; padding-bottom: 12px; }
body.neu #lt-zukunft { padding-top: 12px; }

/* Legal-Tech: großer Hero wie auf „Zur Person“ mit Symbolen rund um das Foto */
@media (min-width: 901px) {
	body.neu .subhero--gross .subhero-inner { min-height: 588px; padding-top: 47px; }
	body.neu .subhero--gross .subhero-photo { width: 440px; height: 440px; right: 80px; top: 50%; bottom: auto; transform: translateY(-50%); }
	body.neu .subhero--gross .subhero-text { max-width: calc(100% - 600px); }
	body.neu .subhero--gross .subhero-title { font-size: 2.9rem; line-height: 1.12; }
	body.neu .subhero--gross .subhero-desc { font-size: 1.08rem; }
}
.lt-symbol { display: none; }
@media (min-width: 901px) {
	.lt-symbol { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: lt-schweben 6s ease-in-out infinite; }
	.lt-symbol svg { width: 58px; height: 58px; padding: 15px; border-radius: 50%; background: #ffffff; box-shadow: 0 10px 26px rgba(22, 39, 77, 0.16); fill: none; stroke: var(--teal, #2f8f96); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
	.lt-symbol span { padding: 3px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.88); font-size: 0.78rem; font-weight: 600; color: var(--navy, #1e3553); white-space: nowrap; }
	.lt-symbol--recht { left: -8%; top: 4%; }
	.lt-symbol--code { right: -6%; top: 10%; animation-delay: -1.5s; }
	.lt-symbol--ki { left: -14%; top: 46%; animation-delay: -3s; }
	.lt-symbol--prozesse { right: -12%; top: 50%; animation-delay: -4.5s; }
}
@keyframes lt-schweben {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
	.lt-symbol { animation: none; }
}
@media (min-width: 901px) and (max-width: 1200px) {
	body.neu .subhero--gross .subhero-photo { width: 360px; height: 360px; right: 70px; }
	body.neu .subhero--gross .subhero-text { max-width: calc(100% - 480px); }
	body.neu .subhero--gross .subhero-title { font-size: 2.4rem; }
	.lt-symbol--code { right: 4%; }
	.lt-symbol--prozesse { right: 3%; top: 56%; }
	.lt-symbol--ki { left: -6%; }
}
/* Legal-Tech: Schriftgrößen im großen Hero wie auf „Zur Person“ */
@media (min-width: 1201px) {
	body.neu .subhero--gross .subhero-eyebrow { font-size: 1.1rem; margin-bottom: 16px; }
	body.neu .subhero--gross .subhero-title { font-size: 3rem; line-height: 1.15; margin-bottom: 24px; }
	body.neu .subhero--gross .subhero-desc { font-size: 1.05rem; }
}
body.neu .subhero--gross .lt-hero-zusatz { margin-top: 12px; }

body.neu .hero-title { position: relative; z-index: 1; isolation: isolate; }

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

/* Blog-Übersicht: kleine Überschrift auf gleicher Höhe wie der Typewriter der Unterseiten */
@media (min-width: 901px) { body.neu .blog-hero { padding-top: 62px; } }
@media (min-width: 1201px) { body.neu .blog-eyebrow { font-size: 1.1rem; margin-bottom: 16px; } }
body.neu .blog-hero .section-title { margin-bottom: 38px; }
body.neu .blog-hero { padding-bottom: 6px; }

/* Handy: Blogbeitrag ohne Autorenbox und Inhaltsverzeichnis (sie wurde vom nächsten Abschnitt überdeckt) */
@media (max-width: 900px) {
	.post-aside {
		display: none;
	}

	.post-layout {
		gap: 0;
	}
}

/* Handy: Blog-Karussell auf „Zur Person“ nur mit Pfeilen zum Vor- und Zurückblättern, ohne Seitenzahlen */
@media (max-width: 640px) {
	.bl-pages {
		display: none;
	}

	.bl-nav {
		flex-wrap: nowrap;
		gap: 28px;
	}

	.bl-arrow,
	#blog .bl-arrow {
		width: 46px;
		height: 46px;
	}
}

/* Handy: Seitenwechsel der Blogliste nur mit Pfeilen, ohne Seitenzahlen */
@media (max-width: 640px) {
	.blog-liste-seite:not(.blog-liste-pfeil) {
		display: none;
	}

	.blog-liste-seiten {
		flex-wrap: nowrap;
		gap: 28px;
	}

	.blog-liste-pfeil {
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 50%;
	}
}

/* Handy: Kontaktfenster ohne die dekorativen Sprechblasen, sie lagen über der Überschrift */
@media (max-width: 760px) {
	.contact-modal-mock { display: none; }
}

/* Handy (iPhone-Safari): 90vh entspricht der Höhe bei eingeklappten Browserleisten und ist damit höher als der
   sichtbare Bereich. Fenster ragten oben und unten heraus, das X zum Schließen war nur halb zu sehen.
   dvh folgt dem tatsächlich sichtbaren Bereich. */
@supports (height: 100dvh) {
	.contact-modal,
	.koala-modal,
	.tl-modal {
		max-height: calc(100dvh - 48px);
	}

	.ai-modal {
		max-height: calc(100dvh - 48px);
		height: min(720px, calc(100dvh - 48px));
	}
}

/* Handy: Abstand zur Trennlinie zwischen den Bereichen oben wie unten (48 px), der Absatzabstand des letzten Textes entfällt */
@media (max-width: 640px) {
	#bereiche .be-block .be-inhalt > :last-child { margin-bottom: 0; }
}

/* Startseite: Der Sprung auf #zur-person (Menüpunkt "Zur Person") landet ganz oben.
   Sonst liegen Cursor-Text und erste Überschriftzeile hinter der Kopfleiste. */
body.neu #zur-person { scroll-margin-top: 140px; }

/* Empfehlung Prof. Dr. Paal vorerst ausgeblendet (hidden im Quelltext) */
.rec-card[hidden] { display: none !important; }

/* ==========================================================================
   Legal Tech, Neuaufbau Mittelteil (2026-09): Story, Schnittstelle, zwei
   Richtungen, Markt, Praxis, Vorgehen, KI
   ========================================================================== */
body.neu #lt-anfang { padding-bottom: 80px; }
body.neu #lt-zukunft { padding-top: 88px; }

/* 1 · Story: Kopf mit Kennzahlen, Zeitstrahl, Community */
body.neu .ltn-story-kopf { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; margin-bottom: 56px; }
body.neu .ltn-story .section-intro { margin-bottom: 0; }
body.neu .ltn-zahlen { margin: 0; padding: 6px 30px; list-style: none; border: 1px solid var(--glas-rand); border-radius: 24px; background: var(--glas); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .ltn-zahlen li { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(30, 53, 83, 0.08); }
body.neu .ltn-zahlen li:last-child { border-bottom: 0; }
body.neu .ltn-zahlen b { flex: none; min-width: 104px; font-size: 2.3rem; font-weight: 700; line-height: 1; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.neu .ltn-zahlen span { font-weight: 600; line-height: 1.4; color: var(--navy); }

body.neu .ltn-zeit { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 14px 0 40px; padding: 0; list-style: none; }
body.neu .ltn-zeit::before { content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 2px; background: linear-gradient(90deg, var(--teal), var(--blau)); opacity: 0.35; }
body.neu .ltn-zeit li { position: relative; padding: 30px 24px 26px; border: 1px solid var(--glas-rand); border-radius: 20px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 12px 30px rgba(30, 53, 83, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.neu .ltn-zeit li::before { content: ""; position: absolute; top: -8px; left: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--verlauf); box-shadow: 0 0 0 5px rgba(47, 143, 150, 0.18); }
body.neu .ltn-zeit b { display: block; margin-bottom: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-tief); }
body.neu .ltn-zeit h3 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.35; color: var(--navy); }
body.neu .ltn-zeit p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--color-text-light); }
body.neu .ltn-zeit li:last-child { border-color: transparent; background: var(--verlauf); box-shadow: 0 18px 40px rgba(47, 143, 150, 0.28); }
body.neu .ltn-zeit li:last-child::before { background: #ffffff; box-shadow: 0 0 0 5px rgba(59, 111, 168, 0.3); }
body.neu .ltn-zeit li:last-child b { color: var(--mint); }
body.neu .ltn-zeit li:last-child h3 { color: #ffffff; }
body.neu .ltn-zeit li:last-child p { color: rgba(255, 255, 255, 0.88); }
body.neu .ltn-community { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
body.neu .ltn-community-titel { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-tief); }

/* 2 · Schnittstelle: Führungsleiste unter der Brücke */
body.neu .ltn-fuehrung { margin-top: 28px; }
body.neu .ltn-fuehrung-titel { margin: 0 0 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-tief); }
body.neu .ltn-fuehrung ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
body.neu .ltn-fuehrung li { padding: 20px 22px; border: 1px solid var(--glas-rand); border-radius: 18px; background: var(--glas); box-shadow: 0 10px 26px rgba(30, 53, 83, 0.07); }
body.neu .ltn-fuehrung li::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--verlauf); }
body.neu .ltn-fuehrung b { display: block; margin-bottom: 4px; color: var(--navy); }
body.neu .ltn-fuehrung span { font-size: 0.9rem; line-height: 1.55; color: var(--color-text-light); }

/* 3 · Zwei Richtungen auf dunklem Band */
body.neu .ltn-seiten-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 28px; align-items: stretch; margin-top: 44px; }
body.neu .ltn-seite { position: relative; padding: 38px 36px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 26px; background: rgba(255, 255, 255, 0.06); }
body.neu .ltn-seite--hervor { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); }
body.neu .ltn-seite-nr { position: absolute; top: 22px; right: 30px; font-size: 3.8rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.1); }
body.neu .ltn-seite small { display: block; margin-bottom: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint); }
body.neu .ltn-seite h3 { max-width: 90%; margin: 0 0 12px; font-size: 1.4rem; line-height: 1.3; color: #ffffff; }
body.neu .ltn-seite > p { margin: 0 0 20px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }
body.neu .ltn-seite .glasbox-haken { margin: 0; }
body.neu .ltn-seite .glasbox-haken li { color: rgba(255, 255, 255, 0.92); }
body.neu .ltn-seite .glasbox-haken li::before { border-color: var(--mint); }
body.neu .ltn-vorteile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.neu .ltn-vorteile li { padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; background: rgba(255, 255, 255, 0.08); }
body.neu .ltn-vorteile li::before { content: ""; display: block; width: 22px; height: 3px; margin-bottom: 10px; border-radius: 2px; background: var(--mint); }
body.neu .ltn-vorteile b { display: block; margin-bottom: 4px; color: #ffffff; }
body.neu .ltn-vorteile span { font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }

/* 4 · Markt: Text links, Vergleich rechts */
body.neu .ltn-markt-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
body.neu .ltn-markt .section-intro { margin-bottom: 0; }
body.neu .ltn-vergleich { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
body.neu .ltn-vergleich-spalte { padding: 26px 24px; border: 1px solid var(--glas-rand); border-radius: 20px; background: var(--glas); box-shadow: var(--glas-schatten); }
body.neu .ltn-vergleich-spalte small { display: block; margin-bottom: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); }
body.neu .ltn-vergleich-spalte ul { margin: 0; padding: 0; list-style: none; }
body.neu .ltn-vergleich-spalte li { padding: 10px 0; border-top: 1px solid rgba(30, 53, 83, 0.08); font-size: 0.93rem; line-height: 1.5; color: var(--color-text-light); }
body.neu .ltn-vergleich-spalte li:first-child { border-top: 0; }
body.neu .ltn-vergleich-spalte--neu { border-color: transparent; background: var(--verlauf); }
body.neu .ltn-vergleich-spalte--neu small { color: rgba(255, 255, 255, 0.85); }
body.neu .ltn-vergleich-spalte--neu li { border-top-color: rgba(255, 255, 255, 0.22); font-weight: 600; color: #ffffff; }
body.neu .ltn-vergleich-pfeil { display: flex; align-items: center; color: var(--teal); }
body.neu .ltn-vergleich-pfeil svg { width: 26px; height: 26px; }

/* 5 · Praxis: Kennzahlen über dem Skalierungsdiagramm */
body.neu .ltn-kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
body.neu .ltn-kennzahlen li { padding: 24px 22px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; background: rgba(255, 255, 255, 0.08); }
body.neu .ltn-kennzahlen b { display: block; margin-bottom: 6px; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--mint); }
body.neu .ltn-kennzahlen span { font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }

/* 7 · KI: Kacheln, Regeln, Bild und Kompetenzen */
body.neu .ltn-ki-zwischen { margin: 60px 0 20px; font-size: 1.3rem; color: #ffffff; }
body.neu .ltn-ki-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
body.neu .ltn-ki-kacheln li { padding: 22px 22px 24px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 18px; background: rgba(255, 255, 255, 0.07); }
body.neu .ltn-ki-kacheln li::before { content: ""; display: block; width: 22px; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--mint); }
body.neu .ltn-ki-kacheln b { display: block; margin-bottom: 6px; color: #ffffff; }
body.neu .ltn-ki-kacheln span { font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); }
body.neu .ltn-ki-unten { display: grid; grid-template-columns: 5fr 6fr; gap: 52px; align-items: start; margin-top: 60px; }
body.neu .ltn-ki-bild { position: relative; }
body.neu .ltn-ki-bild img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
body.neu .ltn-regeln { margin: 0 0 28px; padding: 0; list-style: none; }
body.neu .ltn-regeln li { position: relative; padding: 12px 0 12px 32px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
body.neu .ltn-regeln li:first-child { border-top: 0; }
body.neu .ltn-regeln li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 12px; height: 7px; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(-45deg); }
body.neu .ltn-regeln b { display: block; margin-bottom: 2px; color: #ffffff; }
body.neu .ltn-regeln span { font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); }
body.neu .ltn-ki-kompetenz { margin: 0 0 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint); }

@media (max-width: 1100px) {
	body.neu .ltn-zeit { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
	body.neu .ltn-zeit::before { display: none; }
	body.neu .ltn-ki-kacheln { grid-template-columns: repeat(2, 1fr); }
	body.neu .ltn-fuehrung ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	body.neu .ltn-story-kopf,
	body.neu .ltn-seiten-grid,
	body.neu .ltn-markt-grid,
	body.neu .ltn-ki-unten { grid-template-columns: 1fr; gap: 32px; }
	body.neu .ltn-kennzahlen { grid-template-columns: repeat(2, 1fr); }
	body.neu .ltn-vergleich { grid-template-columns: 1fr; }
	body.neu .ltn-vergleich-pfeil { justify-content: center; transform: rotate(90deg); }
}
@media (max-width: 640px) {
	body.neu .ltn-zeit,
	body.neu .ltn-ki-kacheln,
	body.neu .ltn-fuehrung ul,
	body.neu .ltn-vorteile { grid-template-columns: 1fr; }
	body.neu .ltn-seite { padding: 30px 24px; }
	body.neu .ltn-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	body.neu .ltn-kennzahlen li { padding: 20px 16px; }
	body.neu .ltn-kennzahlen b { font-size: 1.45rem; }
	body.neu .ltn-kennzahlen span { display: block; font-size: 0.85rem; hyphens: auto; -webkit-hyphens: auto; }
	body.neu .ltn-zahlen { padding: 4px 22px; }
	body.neu .ltn-zahlen b { min-width: 84px; font-size: 1.9rem; }
}

/* Legal Tech: Fotos in Story und zwei Richtungen */
body.neu .ltn-community { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; margin-top: 8px; }
body.neu .ltn-community-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; box-shadow: var(--glas-schatten); }
body.neu .ltn-community-text p { margin: 10px 0 18px; line-height: 1.7; color: var(--color-text-light); }
body.neu .ltn-seite-bild { aspect-ratio: auto; height: 240px; margin-bottom: 20px; padding: 18px 22px; }
body.neu .ltn-seite-bild img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
body.neu .ltn-seite-nr { display: none; }
body.neu .ltn-community-bild.lt-platzhalter { aspect-ratio: 2 / 1; }
body.neu .ltn-rolle .lt-kopf .lt-platzhalter { aspect-ratio: 16 / 9; }
body.neu #lt-praxis .lt-kopf { margin-bottom: 28px; }
body.neu #lt-praxis .lt-kopf .lt-platzhalter { aspect-ratio: 2 / 1; }
@media (max-width: 900px) {
	body.neu .ltn-community { grid-template-columns: 1fr; gap: 24px; }
	body.neu .ltn-seite-bild { height: auto; aspect-ratio: 2 / 1; }
}
@media (max-width: 640px) {
	body.neu .lt-platzhalter,
	body.neu .ltn-seite-bild,
	body.neu .ltn-community-bild.lt-platzhalter,
	body.neu .ltn-rolle .lt-kopf .lt-platzhalter,
	body.neu #lt-praxis .lt-kopf .lt-platzhalter { aspect-ratio: auto; min-height: 200px; }
}

/* ==========================================================================
   Legal Tech, Erlebnis-Aufbau (2026-09-28): Zeitstrahl zum Durchklicken,
   Rollen-Akkordeon mit wechselndem Foto, zwei Richtungen, Skalierungsregler,
   Zukunfts-Reiter mit Bisher/Künftig. Ohne JavaScript bleibt alles lesbar.
   ========================================================================== */
@keyframes ltx-auftritt {
	from { opacity: 0; transform: translate(var(--ltx-dx, 0), 14px); }
	to { opacity: 1; transform: none; }
}
@keyframes ltx-takt {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@keyframes ltx-puls {
	0% { box-shadow: 0 0 0 0 rgba(47, 143, 150, 0.45); }
	70% { box-shadow: 0 0 0 14px rgba(47, 143, 150, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 143, 150, 0); }
}
@keyframes ltx-schub-links {
	0%, 100% { transform: translateX(0); opacity: 0.55; }
	50% { transform: translateX(-7px); opacity: 1; }
}
@keyframes ltx-schub-rechts {
	0%, 100% { transform: translateX(0); opacity: 0.55; }
	50% { transform: translateX(7px); opacity: 1; }
}

/* 1 · Story: Kennzahlen links, Text rechts und oben bündig */
body.neu #lt-anfang { clear: both; padding-bottom: 110px; }
body.neu .ltx-story-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; margin-bottom: 64px; }
body.neu .ltx-story-kopf .section-intro + .section-intro { margin-top: 14px; }
body.neu .ltx-story-kopf > * { min-width: 0; }
body.neu .ltn-zahlen b { font-variant-numeric: tabular-nums; }
body.neu .ltx-story-kopf .ltn-zahlen b { min-width: 136px; font-size: 1.95rem; }
body.neu .ltn-zahlen b.ltx-zahl-icon { display: flex; align-items: center; background: none; color: var(--teal); }
body.neu .ltn-zahlen b.ltx-zahl-icon svg { width: 40px; height: 40px; }

/* Mein Weg: ohne JavaScript eine einfache Liste */
body.neu .ltx-weg-kopf { margin-bottom: 22px; }
body.neu .ltx-weg-titel { margin: 0 0 6px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-tief); }
body.neu .ltx-weg-satz { max-width: 720px; margin: 0; line-height: 1.65; color: var(--color-text-light); }
body.neu .ltx-weg-rahmen,
body.neu .ltx-weg-punkte { display: none; }
body.neu .ltx-weg-liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
body.neu .ltx-station-knopf { display: flex; gap: 12px; align-items: baseline; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--navy); }
body.neu .ltx-station-knopf b { color: var(--teal-tief); }
body.neu .ltx-station-knopf span { font-weight: 700; }
body.neu .ltx-station-text { margin: 4px 0 0; line-height: 1.65; color: var(--color-text-light); }

/* Mein Weg mit JavaScript: Bühne mit Pfeilen links und rechts, Punkte darunter */
body.neu .ltx-weg.ist-interaktiv .ltx-weg-liste { display: none; }
body.neu .ltx-weg.ist-interaktiv .ltx-weg-rahmen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; }
body.neu .ltx-weg-pfeil { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--glas-rand); border-radius: 50%; background: var(--glas); color: var(--navy); cursor: pointer; box-shadow: var(--glas-schatten); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }
body.neu .ltx-weg-pfeil:hover { background: var(--navy); color: #ffffff; transform: scale(1.08); }
body.neu .ltx-weg-pfeil svg { width: 22px; height: 22px; }
body.neu .ltx-weg-buehne { position: relative; display: grid; grid-template-columns: minmax(170px, auto) 1fr; gap: 40px; align-items: center; min-height: 200px; padding: 36px 44px; overflow: hidden; border: 1px solid var(--glas-rand); border-radius: 28px; background: rgba(255, 255, 255, 0.72); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .ltx-weg-buehne::after { content: attr(data-jahr); position: absolute; right: -10px; bottom: -34px; font-size: 10rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: rgba(47, 143, 150, 0.07); pointer-events: none; }
body.neu .ltx-buehne-jahr { position: relative; z-index: 1; font-size: clamp(3rem, 6vw, 4.8rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; animation: ltx-auftritt 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.neu .ltx-buehne-text { position: relative; z-index: 1; animation: ltx-auftritt 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both; }
body.neu .ltx-buehne-text h3 { margin: 0 0 8px; font-size: 1.4rem; line-height: 1.3; color: var(--navy); }
body.neu .ltx-buehne-text p { max-width: 640px; margin: 0; line-height: 1.7; color: var(--color-text-light); }
body.neu .ltx-weg-takt { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--verlauf); transform-origin: left; animation: ltx-takt var(--ltx-takt, 5s) linear both; }
body.neu .ltx-weg:not(.ist-tour) .ltx-weg-takt { display: none; }
body.neu .ltx-weg.ist-interaktiv .ltx-weg-punkte { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
body.neu .ltx-weg-punkt { width: 10px; height: 10px; padding: 0; border: 6px solid transparent; border-radius: 999px; background: rgba(30, 53, 83, 0.2); background-clip: padding-box; box-sizing: content-box; cursor: pointer; transition: width 0.35s ease, background-color 0.35s ease; }
body.neu .ltx-weg-punkt:hover { background-color: rgba(47, 143, 150, 0.55); }
body.neu .ltx-weg-punkt.ist-aktiv { width: 30px; background: var(--verlauf); background-clip: padding-box; }

/* 2 · Fähigkeiten auf dem Verlaufsband wie „Offen für Neues“: Kernaussage, vier Bereichskarten mit
   Fähigkeiten zum Aufklappen, darunter meine Rolle als weiße Karte */
@keyframes ltx-tippen {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
body.neu .ltx-faehig-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); margin-bottom: 44px; }
body.neu .ltx-faehig .section-intro { margin-bottom: 0; }
body.neu .ltx-hinweis { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-weight: 700; color: var(--mint); }
body.neu .ltx-hinweis svg { flex: none; width: 24px; height: 24px; animation: ltx-tippen 1.8s ease-in-out infinite; }
body.neu .section-accent .lt-platzhalter { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.1); }
body.neu .section-accent .lt-platzhalter-label { background: #ffffff; color: var(--navy); }
body.neu .section-accent .lt-platzhalter p { color: rgba(255, 255, 255, 0.9); }
body.neu .ltx-kompetenzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
body.neu .ltx-bereich { padding: 26px 28px 12px; border-radius: 24px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 26px 56px rgba(16, 38, 66, 0.24); color: var(--navy); transition: transform 0.35s ease, box-shadow 0.35s ease; }
body.neu .ltx-bereich:hover { transform: translateY(-3px); box-shadow: 0 32px 64px rgba(16, 38, 66, 0.3); }
body.neu .ltx-bereich-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
body.neu .ltx-bereich-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--verlauf); color: #ffffff; box-shadow: 0 10px 22px rgba(47, 143, 150, 0.32); transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
body.neu .ltx-bereich:hover .ltx-bereich-icon { transform: rotate(-8deg) scale(1.06); }
body.neu .ltx-bereich-icon svg { width: 26px; height: 26px; }
body.neu .ltx-bereich-kopf h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; color: var(--navy); }
body.neu .ltx-bereich-kopf small { display: block; margin-top: 3px; font-size: 0.88rem; color: var(--color-text-light); }
body.neu .ltx-skill { border-top: 1px solid rgba(30, 53, 83, 0.09); }
body.neu .ltx-skill summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; list-style: none; cursor: pointer; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--navy); transition: color 0.25s ease; }
body.neu .ltx-skill summary::-webkit-details-marker { display: none; }
body.neu .ltx-skill summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--teal-tief); background-color: rgba(47, 143, 150, 0.12); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-position: center; background-repeat: no-repeat; background-size: 12px 2px, 2px 12px; transition: transform 0.4s ease, background-color 0.3s ease, background-size 0.3s ease, color 0.3s ease; }
body.neu .ltx-skill summary:hover { color: var(--teal-tief); }
body.neu .ltx-skill summary:hover::after { background-color: rgba(47, 143, 150, 0.24); }
body.neu .ltx-skill[open] summary { color: var(--teal-tief); }
body.neu .ltx-skill[open] summary::after { color: #ffffff; background-color: var(--teal); background-size: 12px 2px, 2px 0; transform: rotate(180deg); }
body.neu .ltx-skill-inhalt { overflow: hidden; }
body.neu .ltx-skill-inhalt p { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--teal); font-size: 0.93rem; line-height: 1.65; color: var(--color-text-light); }
body.neu .ltx-kompetenzen.ltx-anim .ltx-bereich { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; transition-delay: calc(var(--i, 0) * 130ms), calc(var(--i, 0) * 130ms), 0s; }
body.neu .ltx-kompetenzen.ltx-anim.ist-sichtbar .ltx-bereich { opacity: 1; transform: none; }
body.neu .ltx-kompetenzen.ltx-anim.ist-fertig .ltx-bereich { transition-delay: 0s; }
body.neu .ltx-kompetenzen.ltx-anim.ist-fertig .ltx-bereich:hover { transform: translateY(-3px); }

/* Meine Rolle: weiße Karte mit vier Schritten, die Linie zeichnet sich beim Sichtbarwerden */
body.neu .ltx-fazit { margin-top: 40px; padding: 44px 52px; border-radius: 28px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 26px 56px rgba(16, 38, 66, 0.24); color: var(--navy); }
body.neu .ltx-fazit-kopf { display: flex; gap: 24px; align-items: flex-start; }
body.neu .ltx-fazit-icon { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; background: var(--verlauf); color: #ffffff; box-shadow: 0 12px 28px rgba(47, 143, 150, 0.32); }
body.neu .ltx-fazit-icon svg { width: 30px; height: 30px; }
body.neu .section-accent .ltx-fazit .section-eyebrow { margin-bottom: 6px; color: var(--teal-tief); }
body.neu .ltx-fazit-titel { margin: 0 0 10px; font-size: 1.6rem; line-height: 1.25; color: var(--navy); }
body.neu .ltx-schritte-anim.glasbox-schritte::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s; }
body.neu .ltx-schritte-anim.ist-sichtbar::before { transform: scaleX(1); }
body.neu .ltx-schritte-anim li { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--i, 0) * 280ms + 250ms); }
body.neu .ltx-schritte-anim.ist-sichtbar li { opacity: 1; transform: none; }
body.neu .ltx-schritte-anim b { transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
body.neu .ltx-schritte-anim li:hover b { transform: scale(1.1); background: var(--navy); color: #ffffff; }

/* 3 · Zwei Richtungen: die Karten fahren beim Sichtbarwerden auseinander */
body.neu .ltn-vorteile--einspaltig { grid-template-columns: 1fr; }
body.neu .ltn-vorteile li { transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
body.neu .ltn-vorteile li:hover { transform: translateY(-3px); border-color: rgba(143, 212, 207, 0.55); background: rgba(255, 255, 255, 0.14); }
body.neu .ltx-richtungen-anim .ltn-seite { opacity: 0; transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
body.neu .ltx-richtungen-anim .ltn-seite:not(.ltn-seite--hervor) { transform: translateX(70px) scale(0.97); }
body.neu .ltx-richtungen-anim .ltn-seite--hervor { transform: translateX(-70px) scale(0.97); }
body.neu .ltx-richtungen-anim .ltn-vorteile li { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease, background 0.3s ease, border-color 0.3s ease; transition-delay: calc(var(--i, 0) * 90ms + 600ms), calc(var(--i, 0) * 90ms + 600ms), 0s, 0s; }
body.neu .ltx-richtungen-anim.ist-sichtbar .ltn-seite,
body.neu .ltx-richtungen-anim.ist-sichtbar .ltn-vorteile li { opacity: 1; transform: none; }
body.neu .ltx-richtungen-anim.ist-sichtbar .ltn-vorteile li:hover { transform: translateY(-3px); }
body.neu .ltx-richtungen-anim.ist-fertig .ltn-vorteile li { transition-delay: 0s; }

/* 4 · Praxis auf hellem Band: Kennzahlen und Skalierungsregler */
body.neu .ltx-kennzahlen li { border-color: var(--glas-rand); background: var(--glas); box-shadow: 0 10px 26px rgba(30, 53, 83, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; }
body.neu .ltx-kennzahlen li:hover { transform: translateY(-4px); box-shadow: var(--glas-schatten); }
body.neu .ltx-kennzahlen b { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
body.neu .ltx-kennzahlen span { color: var(--color-text-light); }
body.neu .ltx-skala { display: grid; grid-template-columns: 5fr 6fr; gap: 52px; align-items: center; margin-top: 28px; padding: 40px 44px; border: 1px solid var(--glas-rand); border-radius: 26px; background: rgba(255, 255, 255, 0.72); box-shadow: var(--glas-schatten); }
body.neu .ltx-skala h3 { margin: 0 0 10px; font-size: 1.35rem; color: var(--navy); }
body.neu .ltx-skala-text p { margin: 0; line-height: 1.7; color: var(--color-text-light); }
body.neu .ltx-skala .ltx-skala-hinweis { display: none; align-items: center; gap: 10px; margin-top: 20px; font-weight: 700; color: var(--teal-tief); }
body.neu .ltx-skala-hinweis svg { width: 22px; height: 22px; animation: ltx-schub-rechts 1.8s ease-in-out infinite; }
body.neu .ltx-skala.ist-interaktiv .ltx-skala-hinweis { display: flex; }
body.neu .ltx-skala-anzeige { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; }
body.neu .ltx-skala-anzeige b { font-size: 2.6rem; font-weight: 800; line-height: 1; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
body.neu .ltx-skala-anzeige span { font-weight: 600; color: var(--navy); }
body.neu .ltx-skala-marke { margin-left: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); opacity: 0.8; }
body.neu .ltx-skala-chart { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; align-items: end; height: 190px; padding-bottom: 8px; border-bottom: 1px solid rgba(30, 53, 83, 0.16); }
body.neu .ltx-skala-paar { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 100%; }
body.neu .ltx-skala-paar i { flex: 1; max-width: 16px; border-radius: 5px 5px 0 0; transform-origin: bottom; transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.35s ease; }
body.neu .ltx-skala-paar .umsatz { height: var(--u); background: linear-gradient(180deg, var(--mint), var(--teal)); }
body.neu .ltx-skala-paar .kosten { height: var(--k); background: rgba(30, 53, 83, 0.3); }
body.neu .ltx-skala.ist-interaktiv .ltx-skala-paar:not(.ist-an) i { opacity: 0.16; transform: scaleY(0.35); }
body.neu .ltx-skala-paar.ist-spitze .umsatz { box-shadow: 0 0 18px rgba(47, 143, 150, 0.55); }
body.neu .ltx-skala-achse { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8rem; color: var(--color-text-light); }
body.neu .ltx-skala-regler { display: none; width: 100%; height: 8px; margin: 22px 0 4px; border-radius: 999px; background: linear-gradient(90deg, var(--teal) 0, var(--blau) var(--fuell, 0%), rgba(30, 53, 83, 0.12) var(--fuell, 0%)); cursor: pointer; -webkit-appearance: none; appearance: none; }
body.neu .ltx-skala.ist-interaktiv .ltx-skala-regler { display: block; }
body.neu .ltx-skala-regler::-webkit-slider-thumb { width: 28px; height: 28px; border: 4px solid var(--teal); border-radius: 50%; background: #ffffff; box-shadow: 0 6px 16px rgba(30, 53, 83, 0.25); cursor: grab; -webkit-appearance: none; appearance: none; transition: transform 0.2s ease; }
body.neu .ltx-skala-regler::-webkit-slider-thumb:hover { transform: scale(1.15); }
body.neu .ltx-skala-regler::-moz-range-thumb { width: 22px; height: 22px; border: 4px solid var(--teal); border-radius: 50%; background: #ffffff; box-shadow: 0 6px 16px rgba(30, 53, 83, 0.25); cursor: grab; }
body.neu .ltx-skala .lt-skala-legende { color: var(--color-text-light); }
body.neu .ltx-skala .lt-skala-legende .kosten::before { background: rgba(30, 53, 83, 0.3); }
body.neu .ltx-skala .lt-skala-legende em { color: var(--color-text-light); opacity: 0.7; }

/* 5 · Blick nach vorn: vier Themen-Boxen im Stil der „Vier Welten“, der Pfeil wippt zum Anklicken */
@keyframes ltx-wippen {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}
body.neu .ltx-wt .wt-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 8px 0 30px; }
body.neu .ltx-wt .wt-tab { width: auto; min-height: 88px; padding: 16px 16px 16px 20px; border-radius: 16px; transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease, box-shadow 0.3s ease; }
body.neu .ltx-wt .wt-tab:hover { transform: translateY(-3px); }
body.neu .ltx-wt .wt-name { font-size: 1.02rem; line-height: 1.3; }
body.neu .ltx-wt .wt-tab:not([aria-selected="true"]) .wt-chevron { animation: ltx-wippen 2s ease-in-out infinite; }
body.neu .ltx-wt .wt-panel.ist-auftritt [style*="--i"] { animation: ltx-auftritt 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
body.neu .ltx-lead { max-width: 780px; margin: 0 0 22px; line-height: 1.7; color: var(--color-text-light); }
body.neu .ltx-h3 { margin: 0 0 10px; font-size: 1.3rem; color: var(--navy); }

/* Markt: Umschalter Bisher/Künftig, Karten klappen um */
@keyframes ltx-klappen {
	0%, 100% { transform: perspective(700px) rotateX(0deg); }
	50% { transform: perspective(700px) rotateX(90deg); }
}
body.neu .ltx-markt { display: grid; grid-template-columns: 5fr 6fr; gap: 52px; align-items: center; padding: 40px 44px; border: 1px solid var(--glas-rand); border-radius: 26px; background: rgba(255, 255, 255, 0.72); box-shadow: var(--glas-schatten); }
body.neu .ltx-markt h3 { margin: 0 0 10px; font-size: 1.5rem; color: var(--navy); }
body.neu .ltx-markt-text p { margin: 0 0 24px; line-height: 1.7; color: var(--color-text-light); }
body.neu .ltx-schalter { position: relative; display: none; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgba(30, 53, 83, 0.08); }
body.neu .ltx-markt.ist-interaktiv .ltx-schalter { display: inline-grid; }
body.neu .ltx-schalter::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--navy); transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), background 0.45s ease; }
body.neu .ltx-schalter.ist-kuenftig::before { transform: translateX(100%); background: var(--teal); }
body.neu .ltx-schalter button { position: relative; z-index: 1; padding: 11px 26px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--navy); cursor: pointer; transition: color 0.35s ease; }
body.neu .ltx-schalter button[aria-pressed="true"] { color: #ffffff; }
body.neu .ltx-wandel { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.neu .ltx-wandel-karte { display: grid; gap: 6px; }
body.neu .ltx-wandel-vorne,
body.neu .ltx-wandel-hinten { display: flex; align-items: center; min-height: 62px; padding: 14px 20px; border-radius: 16px; font-weight: 600; line-height: 1.4; }
body.neu .ltx-wandel-vorne { border: 1px solid rgba(30, 53, 83, 0.1); background: #ffffff; color: var(--color-text-light); }
body.neu .ltx-wandel-hinten { background: var(--verlauf); color: #ffffff; box-shadow: 0 12px 26px rgba(47, 143, 150, 0.25); }
body.neu .ltx-markt.ist-interaktiv .ltx-wandel-karte { gap: 0; cursor: pointer; }
body.neu .ltx-markt.ist-interaktiv .ltx-wandel-karte.ist-klappend { animation: ltx-klappen 0.64s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 110ms); }
body.neu .ltx-markt.ist-interaktiv .ltx-wandel-vorne,
body.neu .ltx-markt.ist-interaktiv .ltx-wandel-hinten { grid-area: 1 / 1; transition: opacity 0.01s linear calc(var(--k, 0) * 110ms + 0.32s), visibility 0.01s linear calc(var(--k, 0) * 110ms + 0.32s); }
body.neu .ltx-markt.ist-interaktiv .ltx-wandel-hinten { opacity: 0; visibility: hidden; }
body.neu .ltx-markt.ist-interaktiv .ltx-wandel.ist-kuenftig .ltx-wandel-vorne { opacity: 0; visibility: hidden; }
body.neu .ltx-markt.ist-interaktiv .ltx-wandel.ist-kuenftig .ltx-wandel-hinten { opacity: 1; visibility: visible; }

/* KI-Stufen, Chancen und Verantwortung auf hellem Grund */
body.neu .ltx-zukunft .lt-kopf { align-items: start; }
body.neu .ltx-zukunft .lt-stufen { margin-top: 0; }
body.neu .ltx-zukunft .lt-stufe { border-color: var(--glas-rand); background: rgba(255, 255, 255, 0.75); box-shadow: 0 10px 26px rgba(30, 53, 83, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; }
body.neu .ltx-zukunft .lt-stufe:hover { transform: translateY(-4px); box-shadow: var(--glas-schatten); }
body.neu .ltx-zukunft .lt-stufe small { color: var(--teal-tief); }
body.neu .ltx-zukunft .lt-stufe h3 { color: var(--navy); }
body.neu .ltx-zukunft .lt-stufe p { color: var(--color-text-light); }
body.neu .ltx-zukunft .lt-stufe--hervor { border-color: transparent; background: var(--verlauf); box-shadow: 0 18px 40px rgba(47, 143, 150, 0.3); }
body.neu .ltx-zukunft .lt-stufe--hervor small,
body.neu .ltx-zukunft .lt-stufe--hervor h3 { color: #ffffff; }
body.neu .ltx-zukunft .lt-stufe--hervor p { color: rgba(255, 255, 255, 0.9); }
body.neu .ltx-zukunft .lt-stufen-pfeil { color: var(--teal); }
body.neu .ltx-zukunft .ltn-ki-kacheln li { border-color: var(--glas-rand); background: rgba(255, 255, 255, 0.75); box-shadow: 0 10px 26px rgba(30, 53, 83, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; }
body.neu .ltx-zukunft .ltn-ki-kacheln li:hover { transform: translateY(-4px); box-shadow: var(--glas-schatten); }
body.neu .ltx-zukunft .ltn-ki-kacheln li::before { background: var(--verlauf); }
body.neu .ltx-zukunft .ltn-ki-kacheln b { color: var(--navy); }
body.neu .ltx-zukunft .ltn-ki-kacheln span { color: var(--color-text-light); }
body.neu .ltx-verantwortung { display: grid; grid-template-columns: 6fr 5fr; gap: 52px; align-items: start; padding: 40px 44px; border: 1px solid var(--glas-rand); border-radius: 26px; background: rgba(255, 255, 255, 0.72); box-shadow: var(--glas-schatten); }
body.neu .ltx-zukunft .ltn-regeln { margin: 0; }
body.neu .ltx-zukunft .ltn-regeln li { border-top-color: rgba(30, 53, 83, 0.1); }
body.neu .ltx-zukunft .ltn-regeln li::before { border-color: var(--teal); }
body.neu .ltx-zukunft .ltn-regeln b { color: var(--navy); }
body.neu .ltx-zukunft .ltn-regeln span { color: var(--color-text-light); }
body.neu .ltx-zukunft .ltn-ki-kompetenz { color: var(--teal-tief); }

@media (max-width: 1100px) {
	body.neu .ltx-kompetenzen { gap: 16px; }
	body.neu .ltx-bereich { padding: 22px 22px 10px; }
}
@media (max-width: 900px) {
	body.neu .ltx-story-kopf { grid-template-columns: 1fr; gap: 32px; }
	body.neu .ltx-story-kopf > .ltn-zahlen { order: 2; }
	body.neu .ltx-weg-buehne { grid-template-columns: 1fr; gap: 12px; padding: 30px 28px; }
	body.neu .ltx-faehig-kopf { grid-template-columns: 1fr; }
	body.neu .ltx-kompetenzen { grid-template-columns: 1fr; }
	body.neu .ltx-fazit { padding: 34px 28px; }
	body.neu .ltx-richtungen-anim .ltn-seite:not(.ltn-seite--hervor),
	body.neu .ltx-richtungen-anim .ltn-seite--hervor { transform: translateY(30px); }
	body.neu .ltx-skala,
	body.neu .ltx-markt,
	body.neu .ltx-verantwortung { grid-template-columns: 1fr; gap: 32px; padding: 32px 28px; }
	body.neu .ltx-wt .wt-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	body.neu .ltx-zukunft .lt-stufen { grid-template-columns: 1fr; }
	body.neu .ltx-zukunft .lt-stufen-pfeil { justify-content: center; transform: rotate(90deg); }
}
@media (max-width: 640px) {
	body.neu .ltx-weg.ist-interaktiv .ltx-weg-rahmen { grid-template-columns: 1fr 1fr; gap: 14px; }
	body.neu .ltx-weg-buehne { grid-column: 1 / -1; grid-row: 1; }
	body.neu .ltx-weg-pfeil { grid-row: 2; justify-self: center; width: 50px; height: 50px; }
	body.neu .ltx-weg-buehne::after { font-size: 6.5rem; bottom: -20px; }
	body.neu .ltx-story-kopf .ltn-zahlen li { gap: 14px; }
	body.neu .ltx-story-kopf .ltn-zahlen b { min-width: 100px; font-size: 1.55rem; }
	body.neu .ltx-story-kopf .ltn-zahlen span { min-width: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
	body.neu .ltx-bereich { padding: 20px 18px 8px; }
	body.neu .ltx-skill summary { font-size: 0.95rem; }
	body.neu .ltx-fazit { padding: 28px 20px; }
	body.neu .ltx-fazit-kopf { flex-direction: column; gap: 16px; }
	body.neu .ltx-skala-chart { gap: 5px; height: 160px; }
	body.neu .ltx-skala-anzeige b { font-size: 2.1rem; }
	body.neu .ltx-schalter button { padding: 10px 20px; }
	body.neu .ltx-wt .wt-tab { flex-direction: row; align-items: center; justify-content: space-between; min-height: 76px; padding: 12px 10px 12px 14px; }
	body.neu .ltx-wt .wt-name { font-size: 0.9rem; }
	body.neu .ltx-wt .wt-chevron { display: block; width: 24px; height: 24px; padding: 4px; }
	body.neu .ltx-wt .wt-tab[aria-selected="true"]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	body.neu .ltx-hinweis svg,
	body.neu .ltx-skala-hinweis svg,
	body.neu .ltx-wt .wt-chevron { animation: none; }
}

/* Legal Tech, Feinschliff (2026-09-28): Mouse-Over nur als Farbeffekt, nie als Bewegung */
body.neu .ltx-story-kopf { margin-bottom: 40px; }
body.neu .ltn-zahlen b.ltx-zahl-icon svg { margin-left: -7px; }
body.neu .ltx-story-kopf .ltn-zahlen li { margin: 0 -14px; padding: 18px 14px; border-radius: 14px; transition: background-color 0.25s ease; }
body.neu .ltx-story-kopf .ltn-zahlen li:hover { background-color: rgba(47, 143, 150, 0.1); }
body.neu .ltx-weg.ist-pause .ltx-weg-takt { animation-play-state: paused; }
@media (min-width: 1300px) {
	body.neu .ltx-weg.ist-interaktiv .ltx-weg-rahmen { margin: 0 -78px; }
}
body.neu .ltx-schritte-anim li { z-index: 0; }
body.neu .ltx-schritte-anim li::after { content: ""; position: absolute; inset: -16px 0 -16px -16px; z-index: -1; border-radius: 18px; background: transparent; transition: background-color 0.25s ease; }
body.neu .ltx-schritte-anim li:hover::after { background-color: rgba(47, 143, 150, 0.09); }
body.neu .ltx-schritte-anim li:hover b { transform: none; background: var(--navy); color: #ffffff; }
body.neu #lt-anfang :hover,
body.neu #lt-rolle :hover,
body.neu #lt-seiten :hover,
body.neu #lt-praxis :hover,
body.neu #lt-ki :hover { transform: none !important; }
body.neu .ltx-bereich:hover { box-shadow: 0 26px 56px rgba(16, 38, 66, 0.24); }
body.neu .ltn-vorteile li:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(143, 212, 207, 0.55); }
body.neu .ltx-kennzahlen li:hover,
body.neu .ltx-zukunft .lt-stufe:not(.lt-stufe--hervor):hover,
body.neu .ltx-zukunft .ltn-ki-kacheln li:hover { background: rgba(255, 255, 255, 0.95); }
body.neu .ltx-wt .wt-tab:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, 0.95); }body.neu #lt-ki .wt-tab[aria-selected="true"] .wt-chevron:hover { transform: rotate(180deg) !important; }
body.neu .ltx-story-kopf .ltn-zahlen span { font-weight: 400; }
body.neu .ltx-schritte-anim li::after { inset: -16px 10px -16px -14px; }
body.neu .ltx-skala-chart { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 640px) { body.neu .ltx-skala-chart { gap: 3px; } }
/* Legal Tech: „Blick nach vorn“ auf dem Verlaufsband, „Offen für Neues“ auf hellem Grund,
   Schnellcheck-Band dunkel mit leichtem Verlauf wie „Meine Methode“ */
body.neu #lt-ki .ltx-lead { color: rgba(255, 255, 255, 0.92); }
body.neu #lt-kapitel { clip-path: none; padding-top: 72px; }
body.neu #lt-kapitel .glasbox { padding: 48px 60px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 28px; background: rgba(255, 255, 255, 0.6); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu #lt-kapitel .glasbox-text { color: var(--color-text-light); }
body.neu #lt-kapitel .glasbox-haken li { color: var(--navy); }
body.neu #lt-kapitel .glasbox-haken li::before { border-color: var(--teal); }
body.neu #lt-kapitel .btn-primary { background: var(--verlauf); color: #ffffff; }
body.neu #lt-kapitel .btn-primary:hover { background: var(--navy); }
body.neu #lt-kapitel + #lt-check { margin-top: 0; }
body.neu #lt-check .tr08-band { background: var(--verlauf-dunkel); clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%); }
body.neu #lt-check + .xl-section { margin-top: -32px; }
@media (max-width: 900px) {
	body.neu #lt-kapitel .glasbox { padding: 32px 24px; }
}/* „Blick nach vorn“ auf dem Verlaufsband: weiße Karten wie bei „Meine Fähigkeiten“, aktives Thema dunkelblau */
body.neu #lt-ki .ltx-markt,
body.neu #lt-ki .ltx-verantwortung,
body.neu #lt-ki .lt-stufe:not(.lt-stufe--hervor),
body.neu #lt-ki .ltn-ki-kacheln li { border-color: transparent; background: rgba(255, 255, 255, 0.96); box-shadow: 0 26px 56px rgba(16, 38, 66, 0.24); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.neu #lt-ki .lt-stufe--hervor { background: var(--navy); box-shadow: 0 26px 56px rgba(16, 38, 66, 0.3); }
body.neu #lt-ki .lt-stufen-pfeil { color: #ffffff; }
body.neu #lt-ki .ltx-wt .wt-tab { border-color: transparent; background: rgba(255, 255, 255, 0.96); color: var(--navy); box-shadow: 0 16px 36px rgba(16, 38, 66, 0.2); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.neu #lt-ki .ltx-wt .wt-tab:not([aria-selected="true"]):hover { background: #ffffff; color: var(--teal-tief); }
body.neu #lt-ki .ltx-wt .wt-tab .wt-chevron { background: rgba(47, 143, 150, 0.12); color: var(--teal-tief); }
body.neu #lt-ki .ltx-wt .wt-tab[aria-selected="true"] { background: var(--navy); color: #ffffff; }
body.neu #lt-ki .ltx-wt .wt-tab[aria-selected="true"] .wt-no { color: var(--mint); }
body.neu #lt-ki .ltx-wt .wt-tab[aria-selected="true"] .wt-chevron { background: var(--mint); color: var(--navy); }
body.neu #lt-ki .ltx-wt .wt-tab[aria-selected="true"]::after { background: var(--navy); }
body.neu #lt-ki .ltx-schalter { background: rgba(30, 53, 83, 0.1); }/* „Offen für Neues“ auf dem dunklen Verlauf ohne Box, darunter der Schnellcheck als große Karte */
body.neu #lt-kapitel { padding-top: 140px; padding-bottom: 100px; }
body.neu #lt-kapitel .glasbox { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.neu #lt-kapitel .section-title { color: #ffffff; }
body.neu #lt-kapitel .glasbox-text,
body.neu #lt-kapitel .glasbox-haken li { color: rgba(255, 255, 255, 0.9); }
body.neu #lt-kapitel .glasbox-haken li::before { border-color: var(--mint); }
body.neu #lt-kapitel .btn-primary { background: #ffffff; color: var(--navy); }
body.neu #lt-kapitel .btn-primary:hover { background: var(--mint); }
body.neu .ltx-check-karte { max-width: none; margin: 64px 0 0; grid-template-columns: 5fr 7fr; gap: 48px; padding: 36px; border: 0; border-radius: 28px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3); color: var(--navy); }
body.neu .ltx-check-karte .tr08-bild { aspect-ratio: 1 / 1; border-radius: 20px; }
body.neu .ltx-check-karte .section-eyebrow { margin-bottom: 8px; color: var(--teal-tief); }
body.neu .ltx-check-titel { margin: 0 0 12px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; color: var(--navy); }
body.neu .ltx-check-karte .tr08-karte-text { margin: 0 0 16px; line-height: 1.7; color: var(--color-text-light); }
body.neu .ltx-check-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; }
body.neu .ltx-check-meta b,
body.neu .ltx-check-meta span { padding: 6px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; }
body.neu .ltx-check-meta b { background: var(--verlauf); color: #ffffff; }
body.neu .ltx-check-meta span { background: rgba(47, 143, 150, 0.12); color: var(--teal-tief); }
body.neu #lt-kapitel .ltx-check-karte .btn-primary { background: var(--verlauf); color: #ffffff; }
body.neu #lt-kapitel .ltx-check-karte .btn-primary:hover { background: linear-gradient(135deg, var(--teal-tief) 0%, #2c5f9a 100%); }
body.neu #lt-kapitel + .xl-section { margin-top: 0; }
@media (max-width: 900px) {
	body.neu .ltx-check-karte { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
	body.neu .ltx-check-karte .tr08-bild { aspect-ratio: 4 / 3; }
}/* Schnellcheck-Karte ragt zur Hälfte aus dem dunklen Band in den hellen Bereich darunter */
body.neu #lt-kapitel { padding-bottom: 0; clip-path: polygon(0 44px, 100% 0, 100% calc(100% + 600px), 0 calc(100% + 600px)); }
body.neu .ltx-check-karte { z-index: 2; margin-bottom: -250px; }
body.neu #lt-kapitel + .xl-section { padding-top: 300px; }
body.neu .ltx-check-titel { margin-bottom: 16px; }
@media (max-width: 900px) {
	body.neu .ltx-check-karte { margin-bottom: -200px; }
	body.neu #lt-kapitel + .xl-section { padding-top: 240px; }
}body.neu #lt-kapitel.lt-schraeg { padding-top: 96px; }
@media (max-width: 900px) { body.neu #lt-kapitel.lt-schraeg { padding-top: 80px; } }
/* verhindert, dass der negative Abstand der Karte durch das Band hindurchfällt */
body.neu #lt-kapitel { padding-bottom: 1px; }
/* Feinschliff 2: keine Aufbau-Animationen bei Fähigkeiten, Schritten und zwei Richtungen */
body.neu .ltx-kompetenzen.ltx-anim .ltx-bereich,
body.neu .ltx-schritte-anim li,
body.neu .ltx-richtungen-anim .ltn-seite,
body.neu .ltx-richtungen-anim .ltn-vorteile li { opacity: 1 !important; transform: none !important; transition-property: background-color, border-color, box-shadow !important; transition-delay: 0s !important; }
body.neu .ltx-schritte-anim.glasbox-schritte::before { transform: none !important; transition: none !important; }
/* Fähigkeiten: Hintergrund beim Überfahren, Icons ohne Bewegung */
body.neu .ltx-bereich .ltx-bereich-icon { transition: none; transform: none !important; }
body.neu .ltx-skill summary { margin: 0 -12px; padding: 14px 12px; border-radius: 12px; transition: color 0.25s ease, background-color 0.25s ease; }
body.neu .ltx-skill summary:hover { background-color: rgba(47, 143, 150, 0.09); }
body.neu .ltx-skill[open] summary { background-color: rgba(47, 143, 150, 0.06); }
body.neu .ltx-skill-inhalt p { margin-top: 10px; }
/* Schnellcheck-Karte: Text oben bündig */
body.neu .ltx-check-karte { align-items: start; }
/* Blick nach vorn: alle vier Themen in derselben weißen Box */
body.neu #lt-ki .ltx-thema-box { display: grid; grid-template-columns: 5fr 6fr; gap: 52px; align-items: center; padding: 40px 44px; border: 0; border-radius: 26px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 26px 56px rgba(16, 38, 66, 0.24); }
body.neu #lt-ki .ltx-thema-box h3 { margin: 0 0 10px; font-size: 1.5rem; color: var(--navy); }
body.neu #lt-ki .ltx-thema-box .ltx-markt-text p { margin: 0 0 24px; line-height: 1.7; color: var(--color-text-light); }
body.neu #lt-ki .ltx-thema-box .ltx-markt-text p:last-child { margin-bottom: 0; }
body.neu #lt-ki .ltx-thema-box .lt-stufen { grid-template-columns: 1fr; gap: 10px; }
body.neu #lt-ki .ltx-thema-box .lt-stufen-pfeil { display: none; }
body.neu #lt-ki .ltx-thema-box .lt-stufe:not(.lt-stufe--hervor),
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln li { padding: 14px 18px; border: 1px solid rgba(47, 143, 150, 0.16); background: rgba(47, 143, 150, 0.06); box-shadow: none; }
body.neu #lt-ki .ltx-thema-box .lt-stufe--hervor { padding: 14px 18px; background: var(--verlauf); box-shadow: none; }
body.neu #lt-ki .ltx-thema-box .lt-stufe h3 { margin: 0 0 4px; font-size: 1rem; }
body.neu #lt-ki .ltx-thema-box .lt-stufe--hervor h3 { color: #ffffff; }
body.neu #lt-ki .ltx-thema-box .lt-stufe p { font-size: 0.88rem; }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln { grid-template-columns: 1fr 1fr; gap: 10px; }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln li::before { display: none; }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln b { margin-bottom: 2px; font-size: 0.95rem; }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln span { font-size: 0.84rem; line-height: 1.45; }
body.neu #lt-ki .ltx-thema-box.ltx-verantwortung { align-items: start; }
@media (max-width: 900px) {
	body.neu #lt-ki .ltx-thema-box { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
	body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln { grid-template-columns: 1fr; }
}/* Schnellcheck-Karte flacher: Foto im Querformat, so hoch wie der Text */
body.neu .ltx-check-karte { grid-template-columns: 4fr 7fr; align-items: center; }
body.neu .ltx-check-karte .tr08-bild { aspect-ratio: 4 / 3; }
/* Blick nach vorn: Themen 2 bis 4 so kompakt wie Thema 1 */
body.neu #lt-ki .ltx-thema-box { min-height: 0 !important; }
body.neu #lt-ki .ltx-thema-box .lt-stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.neu #lt-ki .ltx-thema-box .lt-stufe small { margin-bottom: 6px; font-size: 0.68rem; }
body.neu #lt-ki .ltx-thema-box .lt-stufe h3 { font-size: 0.95rem; }
body.neu #lt-ki .ltx-thema-box .lt-stufe p { font-size: 0.82rem; line-height: 1.5; }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln li { padding: 12px 14px; }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln b { font-size: 0.88rem; line-height: 1.3; }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln span { font-size: 0.8rem; }
body.neu #lt-ki .ltx-verantwortung.ltx-thema-box { grid-template-columns: 5fr 6fr; align-items: center; }
body.neu #lt-ki .ltx-verantwortung > div:first-child { order: 2; }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln li { padding: 12px 14px 12px 36px; border: 1px solid rgba(47, 143, 150, 0.16); border-radius: 14px; background: rgba(47, 143, 150, 0.06); }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln li::before { left: 14px; top: 18px; }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln b { font-size: 0.9rem; }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln span { font-size: 0.8rem; line-height: 1.45; }
body.neu #lt-ki .ltx-verantwortung .glasbox-chips { gap: 8px; }
body.neu #lt-ki .ltx-verantwortung .glasbox-chips li { padding: 7px 12px; font-size: 0.82rem; }
@media (max-width: 900px) {
	body.neu #lt-ki .ltx-thema-box .lt-stufen,
	body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln,
	body.neu #lt-ki .ltx-verantwortung .ltn-regeln { grid-template-columns: 1fr; }
	body.neu #lt-ki .ltx-verantwortung > div:first-child { order: 0; }
}/* Themen 2 bis 4 verdichtet: breitere Inhaltsspalte, Chancen ohne Untertexte, Regeln 2x2, kleinere Chips */
body.neu #lt-ki .ltx-thema-box:not(.ltx-markt) { grid-template-columns: 4fr 7fr; gap: 40px; }
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln span { display: none; }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln { grid-template-columns: 1fr 1fr; gap: 8px; }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln li { padding: 9px 14px 9px 36px; }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln b { font-size: 0.86rem; }
body.neu #lt-ki .ltx-verantwortung .ltn-regeln span { font-size: 0.78rem; line-height: 1.4; }
body.neu #lt-ki .ltx-verantwortung .glasbox-chips { gap: 6px; }
body.neu #lt-ki .ltx-verantwortung .glasbox-chips li { padding: 5px 11px; font-size: 0.78rem; }
body.neu #lt-ki .ltx-verantwortung .ltx-h3 { font-size: 1.35rem; }
@media (max-width: 900px) {
	body.neu #lt-ki .ltx-thema-box:not(.ltx-markt) { grid-template-columns: 1fr; gap: 24px; }
	body.neu #lt-ki .ltx-verantwortung .ltn-regeln { grid-template-columns: 1fr; }
}/* Schnellcheck-Karte mit dem üblichen zarten Glas-Schatten statt schwerem Schlagschatten */
body.neu .ltx-check-karte { box-shadow: var(--glas-schatten); }
/* Übergang Fähigkeiten / Methode gerade statt schräg */
body.neu #lt-rolle { clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%); }
body.neu #lt-seiten.lt-schraeg { clip-path: none; margin-top: 0; padding-top: 100px; }
@media (max-width: 900px) { body.neu #lt-seiten.lt-schraeg { padding-top: 80px; } }
/* Blick nach vorn oben gerade */
body.neu #lt-ki { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); padding-top: 100px; }
/* Schnellcheck-Überschrift in derselben Größe wie alle Hauptüberschriften */
body.neu .ltx-check-titel { font-size: revert-layer; }
body.neu #lt-kapitel .ltx-check-titel { margin: 0 0 16px; color: var(--navy); }
body.neu .ltx-check-karte .ltx-check-titel { font-size: 2.2rem; line-height: 1.2; }
@media (max-width: 640px) { body.neu .ltx-check-karte .ltx-check-titel { font-size: 1.7rem; } }
/* Design-Gegenprüfung (2026-09-28): Glas statt schwerer Schatten, einheitliche Abstände */
body.neu .ltx-bereich,
body.neu .ltx-fazit,
body.neu #lt-ki .ltx-thema-box,
body.neu #lt-ki .ltx-wt .wt-tab:not([aria-selected="true"]) { border: 1px solid var(--glas-rand); background: rgba(255, 255, 255, 0.9); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .ltx-bereich:hover { box-shadow: var(--glas-schatten); }
body.neu #lt-ki .ltx-wt .wt-tab[aria-selected="true"] { box-shadow: var(--glas-schatten); }
body.neu .ltx-bereich-icon,
body.neu .ltx-fazit-icon,
body.neu .ltx-wandel-hinten,
body.neu .ltx-skala-paar.ist-spitze .umsatz,
body.neu #lt-ki .lt-stufe--hervor { box-shadow: none; }
body.neu .ltn-seite--hervor { box-shadow: none; }
body.neu .ltx-skill summary { font-weight: 400; }
body.neu .ltx-skill[open] summary { font-weight: 500; }
/* Abstände: alle Abschnitte im Mittelteil gleich luftig */
body.neu #lt-rolle { padding-bottom: 96px; }
body.neu #lt-seiten.lt-schraeg { padding-top: 96px; padding-bottom: 96px; margin-top: -1px; position: relative; }
body.neu #lt-praxis { padding-top: 96px; padding-bottom: 96px; }
body.neu #lt-anfang { padding-bottom: 96px; }
@media (max-width: 900px) {
	body.neu #lt-rolle, body.neu #lt-anfang { padding-bottom: 72px; }
	body.neu #lt-seiten.lt-schraeg, body.neu #lt-praxis { padding-top: 72px; padding-bottom: 72px; }
}/* Foto in Blick nach vorn */
body.neu .ltx-foto { position: relative; overflow: hidden; border-radius: 24px; box-shadow: var(--glas-schatten); }
body.neu .ltx-foto img { display: block; width: 100%; height: auto; }
/* Glas überall einheitlich: durchscheinend, heller Rand, Blur, zarter Glas-Schatten */
body.neu .ltx-weg-pfeil,
body.neu .ltx-kennzahlen li,
body.neu .ltx-skala { border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .ltx-check-karte { border: 1px solid var(--glas-rand); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* auf dunklem Grund: dunkles Glas mit Blur */
body.neu .ltn-seite,
body.neu .ltn-vorteile li { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }/* Fähigkeiten ohne Foto: Kopf einspaltig, Text etwas breiter */
body.neu .ltx-faehig-kopf { grid-template-columns: minmax(0, 1fr); }
body.neu .ltx-faehig-kopf > div { max-width: 820px; }
body.neu .ltx-faehig-kopf .section-intro { max-width: none; }
/* Geschäftsmodell: Text oben bündig, sieben Säulen in 300er-Schritten */
body.neu .ltx-skala { align-items: start; }
body.neu .ltx-skala-chart { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
body.neu .ltx-skala-paar i { max-width: 22px; }
/* Fotos im hellen Glasrahmen */
body.neu .ltx-foto { padding: 10px; border: 1px solid var(--glas-rand); border-radius: 28px; background: var(--glas); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .ltx-foto img { border-radius: 19px; }
body.neu .ltx-foto .ai-tag { right: 20px; bottom: 20px; }
body.neu .section-accent .ltx-foto { background: rgba(255, 255, 255, 0.28); }
/* Praxis und Blick nach vorn ohne Foto: Kopf einspaltig, Text etwas breiter */
body.neu #lt-praxis .lt-kopf, body.neu #lt-ki > .section-inner > .lt-kopf { grid-template-columns: minmax(0, 1fr); }
body.neu #lt-praxis .lt-kopf > div, body.neu #lt-ki > .section-inner > .lt-kopf > div { max-width: 820px; }
body.neu #lt-praxis .lt-kopf .section-intro, body.neu #lt-ki .lt-kopf .section-intro { max-width: none; }
/* Fähigkeiten-Akkordeons kompakter */
body.neu .ltx-skill summary { padding-top: 9px; padding-bottom: 9px; }
body.neu .ltx-skill summary::after { width: 26px; height: 26px; }
body.neu .ltx-bereich { padding-bottom: 10px; }
body.neu .ltx-bereich-kopf { margin-bottom: 6px; }
body.neu #lt-ki { padding-top: 96px; }
/* Eckenradien wie auf Zur Person: große Glaskarten 28 px */
body.neu .ltx-bereich, body.neu #lt-ki .ltx-thema-box, body.neu .ltx-skala, body.neu .ltx-markt, body.neu .ltx-verantwortung, body.neu .ltn-seite { border-radius: 28px; }
/* Einheitliche Schrift auch in Knöpfen */
button, input, select, textarea { font-family: inherit; }
/* Meine Rolle steht über den Fähigkeiten */
body.neu .ltx-fazit { margin: 0 0 32px; }
body.neu .ltx-fazit { margin-bottom: 22px; }
/* Methode: kleiner Strich über den Box-Überschriften entfällt */
body.neu .ltn-vorteile li::before { display: none; }
/* Methode: beide Boxen gleich breit */
body.neu .ltn-seiten-grid.ltx-richtungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { body.neu .ltn-seiten-grid.ltx-richtungen { grid-template-columns: 1fr; } }
body.neu .ltx-richtungen .ltn-vorteile { grid-template-columns: 1fr; }
/* Praxis: große Box oben, Kennzahlen darunter */
body.neu #lt-praxis .ltx-skala { margin-top: 0; }
body.neu #lt-praxis .ltx-kennzahlen { margin-top: 22px; }
/* Praxis wieder: Kennzahlen oben, große Box darunter */
body.neu #lt-praxis .ltx-kennzahlen { margin-top: 0; }
body.neu #lt-praxis .ltx-skala { margin-top: 22px; }
/* Footer: dezentes Sternchen zum Merkzettel */
body.neu .footer-stern { margin-left: 4px; color: inherit; text-decoration: none; opacity: 0.7; }
body.neu .footer-stern:hover { opacity: 1; color: var(--mint); }
/* Juristisches: Kommunikation mit Mandanten */
body.neu .ju-welle-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 36px 0 0; padding: 0; list-style: none; }
body.neu .ju-welle-karten li { padding: 28px 26px; border: 1px solid var(--glas-rand); border-radius: 28px; background: var(--glas); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background-color 0.25s ease; }
body.neu .ju-welle-karten li:hover { background-color: rgba(255, 255, 255, 0.85); }
body.neu .ju-welle-karten b { display: block; margin-bottom: 8px; font-size: 1.2rem; color: var(--navy); }
body.neu .ju-welle-karten span { line-height: 1.65; color: var(--color-text-light); }
@media (max-width: 900px) { body.neu .ju-welle-karten { grid-template-columns: 1fr; } }/* Kommunikation mit Mandanten auf dem Verlaufsband */
body.neu .section-accent .ju-welle-karten li { background: rgba(255, 255, 255, 0.9); }
body.neu .section-accent .ju-welle-karten li:hover { background: #ffffff; }
/* Kommunikation: sichtbarer, rein farblicher Mouse-Over */
body.neu .ju-welle-karten li { transition: background-color 0.25s ease, border-color 0.25s ease; }
body.neu .section-accent .ju-welle-karten li:hover { background: #e6f4f3; border-color: var(--mint); }
/* Juristisches: Arbeitsrecht auf dem Verlaufsband mit geraden Kanten, TÜV-Box, Eora-Link */
body.neu #ju-arbeitsrecht { clip-path: none; padding: 96px 0; }
body.neu #ju-arbeitsrecht .card { border: 1px solid var(--glas-rand); background: rgba(255, 255, 255, 0.9); box-shadow: var(--glas-schatten); }
body.neu #ju-arbeitsrecht + .section-dark { margin-top: 0; }
body.neu .ju-tuev-karte { display: flex; flex-direction: column; }
body.neu .ju-tuev-siegel { display: block; width: 100%; max-width: 220px; height: auto; margin-top: auto; padding-top: 18px; }
body.neu .ju-eora-link { margin: 36px 0 0; text-align: center; }/* Juristisches: einheitliche Abstände, Qualifikationen über den Profil-Karten, lesbare Karten, farbiger Mouse-Over */
body.neu #ju-profil .glasbox { margin: 32px 0 24px; }
body.neu #ju-arbeitsrecht,
body.neu #ju-insolvenz { padding-top: 96px; padding-bottom: 96px; clip-path: none; }
body.neu #ju-kommunikation { padding-top: 96px; padding-bottom: 96px; }
body.neu #ju-arbeitsrecht .card h3 { color: var(--navy); }
body.neu #ju-arbeitsrecht .card p { color: var(--color-text-light); }
body.neu main .card { transition: background-color 0.25s ease, border-color 0.25s ease; }
body.neu #ju-profil .card:hover,
body.neu #ju-beratung .card:hover,
body.neu #ju-arbeitsrecht .card:hover { background-color: #e6f4f3; border-color: var(--mint); transform: none; }
body.neu #ju-insolvenz .card:hover { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(143, 212, 207, 0.55); transform: none; }
@media (max-width: 900px) {
	body.neu #ju-arbeitsrecht, body.neu #ju-insolvenz, body.neu #ju-kommunikation { padding-top: 72px; padding-bottom: 72px; }
}body.neu #ju-insolvenz { padding-top: 72px; }
@media (max-width: 900px) { body.neu #ju-insolvenz { padding-top: 56px; } }
/* Arbeitsrecht im FAQ-Aufbau: weiße Glasbox auf dem Verlaufsband */
body.neu #ju-arbeitsrecht .fq-box { border: 1px solid var(--glas-rand); background: rgba(255, 255, 255, 0.9); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu #ju-arbeitsrecht .section-eyebrow { color: var(--teal-tief); }
body.neu #ju-arbeitsrecht .section-title { color: var(--navy); }
body.neu #ju-arbeitsrecht .fq-text { color: var(--color-text-light); }
/* Arbeitsrecht-Akkordeon in Beratung: Spalten 40/60 */
body.neu .ju-faq-box { margin: 32px 0 24px; border: 1px solid var(--glas-rand); background: var(--glas); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .ju-faq-box .fq03-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 900px) { body.neu .ju-faq-box .fq03-raster { grid-template-columns: 1fr; } }
/* Kommunikation: deutlicher farbiger Mouse-Over wie bei den übrigen Karten */
body.neu #ju-kommunikation .ju-welle-karten li:hover { background: #d7efed; border-color: var(--mint); }
/* Juristisches: Datenschutz-Akkordeon mit großem TÜV-Siegel, KI-Compliance-Karte mit Foto */
body.neu .ju-ds-siegel { display: block; width: 100%; max-width: 320px; height: auto; margin-top: 28px; }
body.neu .ju-ki-karte { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; padding: 36px; border: 1px solid var(--glas-rand); border-radius: 28px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .ju-ki-bild { aspect-ratio: 4 / 3; margin: 0; border-radius: 20px; }
body.neu .ju-ki-titel { margin: 0 0 12px; font-size: 1.6rem; line-height: 1.25; color: var(--navy); }
body.neu .ju-ki-text { margin: 0; line-height: 1.7; color: var(--color-text-light); }
@media (max-width: 900px) {
	body.neu .ju-ki-karte { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
}body.neu .ju-faq-box, body.neu .ju-ki-karte { background: var(--glas); }
/* Akkordeon-Überschriften auf der ganzen Webseite einheitlich: normal statt fett, 16 px */
body.neu .wt-item > summary, body.neu .fq03-frage, body.neu .fq03-frage span, body.neu .ltx-skill summary { font-size: 1rem; font-weight: 400; }
/* Texte immer oben bündig, nie vertikal zentriert */
body.neu .ju-ki-karte, body.neu .ju-faq-box .fq03-raster, body.neu .fq03-raster { align-items: start; }
body.neu .ju-welle-karten li { padding: 26px 28px; }
/* Glasbox: Inhalte oben bündig */
body.neu .glasbox { align-items: start; }
body.neu #ju-profil .glasbox .section-title { margin: 0; }
body.neu #ju-profil .glasbox .section-title { margin-bottom: 14px; }
/* Juristisches: ein Bereich für Arbeitsrecht und Insolvenzarbeitsrecht, feine weiße Trennlinie */
body.neu .ju-trenner { height: 0; margin: 40px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.9); }
body.neu #ju-profil .section-intro { margin-bottom: 0; }
/* Datenschutz und KI-Compliance auf dunklem Verlauf */
body.neu #ju-beratung { padding-top: 96px; padding-bottom: 96px; }
body.neu #ju-beratung > .section-inner > .section-eyebrow { color: var(--mint); }
body.neu #ju-beratung > .section-inner > .section-title,
body.neu #ju-beratung > .section-inner > .section-intro { color: #ffffff; }
body.neu #ju-beratung .ju-faq-box,
body.neu #ju-beratung .ju-ki-karte { background: rgba(255, 255, 255, 0.92); }
body.neu #ju-beratung .ju-faq-box .section-eyebrow,
body.neu #ju-beratung .ju-ki-karte .section-eyebrow { color: var(--teal-tief); }
body.neu #ju-beratung .ju-faq-box .section-title { color: var(--navy); }
body.neu #ju-beratung .fq-text { color: var(--color-text-light); }
@media (max-width: 900px) { body.neu #ju-beratung { padding-top: 72px; padding-bottom: 72px; } }/* Datenschutz/KI: untere Kante schräg, passend zur Schräge von „Kommunikation als Stärke“ */
body.neu #ju-beratung { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); padding-bottom: 140px; }
body.neu #ju-beratung + #ju-kommunikation { position: relative; margin-top: -44px; }
/* Foto-Platzhalter in der hellen KI-Karte: helle Farben wie auf hellem Grund */
body.neu #ju-beratung .ju-ki-bild { border-color: rgba(47, 143, 150, 0.45); background: rgba(255, 255, 255, 0.55); }
body.neu #ju-beratung .ju-ki-bild .lt-platzhalter-label { background: var(--navy); color: #ffffff; }
body.neu #ju-beratung .ju-ki-bild p { color: var(--color-text-light); }
@media (max-width: 900px) { body.neu #ju-beratung { padding-bottom: 116px; } }/* Fachanwalt-Box einspaltig über die volle Breite, alle Karten im selben Abstand */
body.neu .ju-glasbox-voll { grid-template-columns: 1fr; }
body.neu .ju-glasbox-voll .glasbox-text { max-width: none; }
body.neu #ju-profil .ju-insolvenz-karten { margin-top: 24px; }
/* Schräge nur über eine Kante erzeugen: Kommunikation liegt mit ihrer schrägen Oberkante direkt auf dem dunklen Bereich (keine doppelte, unscharfe Kante) */
body.neu #ju-beratung { clip-path: none; }
/* Juristisches: Fachanwalt-Box so eingerückt wie die Akkordeons, Überschrift in Kartengröße; einheitliche Eckenradien */
body.neu #ju-profil .ju-glasbox-voll { padding: 26px 24px; }
body.neu #ju-profil .ju-glasbox-voll .section-title { font-size: 1.2rem; line-height: 1.35; margin-bottom: 8px; }
body.neu #ju-profil .ju-akk { margin-top: 24px; }
body.neu .fq-box { border-radius: 28px; }body.neu #ju-beratung .wt-list { gap: 10px; }
/* Datenschutz-Akkordeons in der weißen Box: zarter Petrol-Ton, damit sie sich abheben */
body.neu #ju-beratung .wt-item { background: rgba(47, 143, 150, 0.07); border: 1px solid rgba(47, 143, 150, 0.2); box-shadow: none; }
body.neu #ju-beratung .wt-item:hover, body.neu #ju-beratung .wt-item[open] { background: rgba(47, 143, 150, 0.13); }
body.neu #ju-beratung .wt-item summary { color: var(--navy); }
body.neu #ju-beratung .wt-item p { color: var(--color-text-light); }
body.neu #ju-beratung .wt-item summary::after, body.neu #ju-beratung .wt-item summary::before { color: var(--navy); border-color: var(--navy); }
/* Lange Markierungen: Striche fast parallel, damit sie rechts nicht auseinanderlaufen */
body.neu .hl-lang.hl-v::before { --tilt: calc(var(--t1) * 0.15); }
body.neu .hl-lang.hl-v::after { --tilt: calc(var(--t2) * 0.15); }
/* Empfehlung Prof. Paal auf Juristisches, zwischen Datenschutz- und KI-Box */
body.neu .ju-rec { display: block; margin: 0 0 24px; cursor: default; }
body.neu #ju-beratung .ju-faq-box { margin-bottom: 24px; }
body.neu .ju-rec { border-radius: 28px; }
/* Datenschutz- und KI-Box im dunklen Glas wie die Empfehlung */
body.neu #ju-beratung .ju-faq-box,
body.neu #ju-beratung .ju-ki-karte { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu #ju-beratung .ju-faq-box .section-eyebrow,
body.neu #ju-beratung .ju-ki-karte .section-eyebrow { color: var(--mint); }
body.neu #ju-beratung .ju-faq-box .section-title,
body.neu #ju-beratung .ju-ki-titel { color: #ffffff; }
body.neu #ju-beratung .fq-text,
body.neu #ju-beratung .ju-ki-text { color: rgba(255, 255, 255, 0.85); }
body.neu #ju-beratung .wt-item { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
body.neu #ju-beratung .wt-item:hover,
body.neu #ju-beratung .wt-item[open] { background: rgba(255, 255, 255, 0.16); }
body.neu #ju-beratung .wt-item summary { color: #ffffff; }
body.neu #ju-beratung .wt-item summary::after,
body.neu #ju-beratung .wt-item summary::before { color: #ffffff; border-color: #ffffff; }
body.neu #ju-beratung .wt-item p { color: rgba(255, 255, 255, 0.85); }
body.neu #ju-beratung .ju-ki-bild { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); }
body.neu #ju-beratung .ju-ki-bild .lt-platzhalter-label { background: var(--mint); color: var(--navy); }
body.neu #ju-beratung .ju-ki-bild p { color: rgba(255, 255, 255, 0.8); }body.neu a.ju-rec { cursor: pointer; }
/* Legal Tech, Meine Story: Glas wie auf Zur Person und Juristisches (ohne Schatten) */
body.neu #lt-anfang .ltn-zahlen, body.neu #lt-anfang .ltx-weg-buehne, body.neu #lt-anfang .ltx-weg-pfeil { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu #lt-anfang .ltn-zahlen, body.neu #lt-anfang .ltx-weg-buehne { border-radius: 28px; }
/* Legal Tech, Meine Fähigkeiten: Akkordeons im selben Design wie auf Zur Person und Juristisches */
body.neu .ltx-skills { display: grid; gap: 10px; padding-bottom: 16px; }
body.neu .ltx-akk.wt-item { background: rgba(47, 143, 150, 0.07); border: 1px solid rgba(47, 143, 150, 0.2); }
body.neu .ltx-akk.wt-item:hover,
body.neu .ltx-akk.wt-item[open] { background: rgba(47, 143, 150, 0.13); }
body.neu .ltx-akk summary { color: var(--navy); }
body.neu .ltx-akk .ltx-skill-inhalt { overflow: hidden; }
body.neu .ltx-akk p { margin: 0 0 18px; }
/* Kanzlei-Schnellcheck: Hinweis zur Auswahl unter jeder Frage */
.kc-wahl { margin: -6px 0 14px; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-light); }

/* Legal Tech, Meine Story: links Text zur Führung, rechts der Zeitstrahl (halbe Breite), Pfeile und Punkte darunter */
body.neu .ltx-weg-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
body.neu .ltx-fuehrung { padding-top: 0; }


body.neu .ltx-weg-zeile .ltx-weg.ist-interaktiv .ltx-weg-rahmen { display: block; margin: 0; }
body.neu .ltx-weg-zeile .ltx-weg-buehne { grid-template-columns: 1fr; gap: 14px; align-items: start; min-height: 250px; padding: 32px 36px; }
body.neu .ltx-weg-zeile .ltx-buehne-jahr { font-size: clamp(2.6rem, 4vw, 3.6rem); }
body.neu .ltx-weg-steuerung { display: none; }
body.neu .ltx-weg.ist-interaktiv .ltx-weg-steuerung { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
body.neu .ltx-weg.ist-interaktiv .ltx-weg-steuerung .ltx-weg-punkte { margin-top: 0; }
body.neu .ltx-weg-steuerung .ltx-weg-pfeil { width: 46px; height: 46px; }
body.neu .ltx-weg-steuerung .ltx-weg-pfeil svg { width: 19px; height: 19px; }
body.neu .ltx-weg-steuerung .ltx-weg-pfeil:hover { transform: none; }
@media (max-width: 900px) {
	body.neu .ltx-weg-zeile { grid-template-columns: 1fr; gap: 28px; }
	body.neu .ltx-weg-zeile .ltx-weg-buehne { min-height: 0; padding: 28px 26px; }
}

/* Legal Tech, Meine Story: Kennzahlen und Text oben genauso 50:50 wie die Zeile Führung/Zeitstrahl darunter */
body.neu .ltx-story-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
@media (max-width: 900px) { body.neu .ltx-story-kopf { grid-template-columns: 1fr; gap: 32px; } }

/* Legal Tech: Abstand zwischen Meine Story und Führung 50 % größer (vorher 40px) */
body.neu .ltx-story-kopf { margin-bottom: 60px; }

/* Zwei Seiten von Legal Tech: beide Spalten gleich aufgebaut, alle Vorteils-Boxen gleich hoch */
body.neu .ltx-richtungen .ltn-seite { display: flex; flex-direction: column; }
body.neu .ltx-richtungen .ltn-vorteile { flex: 1; grid-auto-rows: 1fr; }

/* Blick nach vorn: Inhalte oben bündig, zwei Stufen statt drei, kleinere Schrift wie in den übrigen Boxen, Verantwortung wie die anderen Themen aufgebaut */
body.neu #lt-ki .ltx-thema-box, body.neu #lt-ki .ltx-verantwortung.ltx-thema-box { align-items: start; }
body.neu #lt-ki .ltx-thema-box .lt-stufen.lt-stufen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.neu #lt-ki .ltx-thema-box .lt-stufe h3 { font-size: 0.88rem; line-height: 1.3; }
body.neu #lt-ki .ltx-thema-box .lt-stufe p { font-size: 0.8rem; }
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln li { padding: 9px 14px 9px 36px; border: 1px solid rgba(47, 143, 150, 0.16); border-top: 1px solid rgba(47, 143, 150, 0.16); border-radius: 14px; background: rgba(47, 143, 150, 0.06); }
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln li::before { left: 14px; top: 16px; }
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln b { font-size: 0.86rem; }
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln span { font-size: 0.78rem; line-height: 1.4; }
body.neu #lt-ki .ltx-thema-verantwortung .ltn-ki-kompetenz { margin: 18px 0 8px; }
body.neu #lt-ki .ltx-thema-verantwortung .glasbox-chips { gap: 6px; }
body.neu #lt-ki .ltx-thema-verantwortung .glasbox-chips li { padding: 5px 11px; font-size: 0.78rem; }
@media (max-width: 900px) { body.neu #lt-ki .ltx-thema-box .lt-stufen.lt-stufen--zwei, body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln { grid-template-columns: 1fr; } }
@media (min-width: 901px) { body.neu #lt-ki .wt-panel .ltx-thema-box { min-height: 370px !important; } }

/* Blick nach vorn: alle Karten in den vier Themen einheitlich (Größe, Farbe, Schrift), je Thema gleich hoch */
body.neu #lt-ki .ltx-thema-box .lt-stufen.lt-stufen--zwei,
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln,
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; align-items: stretch; margin: 0; padding: 0; list-style: none; }
body.neu #lt-ki .ltx-thema-box .lt-stufe:not(.lt-stufe--hervor),
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln li,
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln li { padding: 18px 20px; border: 1px solid rgba(47, 143, 150, 0.16); border-radius: 16px; background: rgba(47, 143, 150, 0.06); box-shadow: none; }
body.neu #lt-ki .ltx-thema-box .lt-stufe--hervor { padding: 18px 20px; border-radius: 16px; }
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln li::before,
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln li::before { display: none; }
body.neu #lt-ki .ltx-thema-box .lt-stufe small { margin-bottom: 6px; font-size: 0.75rem; }
body.neu #lt-ki .ltx-thema-box .lt-stufe h3,
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln b,
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln b { display: block; margin: 0 0 6px; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--navy); }
body.neu #lt-ki .ltx-thema-box .lt-stufe--hervor h3 { color: #ffffff; }
body.neu #lt-ki .ltx-thema-box .lt-stufe p,
body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln span,
body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln span { display: block; margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--color-text-light); }
body.neu #lt-ki .ltx-thema-box .lt-stufe--hervor p { color: rgba(255, 255, 255, 0.9); }
@media (max-width: 900px) {
	body.neu #lt-ki .ltx-thema-box .lt-stufen.lt-stufen--zwei,
	body.neu #lt-ki .ltx-thema-box .ltn-ki-kacheln,
	body.neu #lt-ki .ltx-thema-verantwortung .ltn-regeln { grid-template-columns: 1fr; grid-auto-rows: auto; }
}
@media (min-width: 901px) { body.neu #lt-ki .wt-panel .ltx-thema-box { min-height: 405px !important; } }

/* Blick nach vorn: Inhalt 10px näher an den oberen Rand */
@media (min-width: 901px) { body.neu #lt-ki { padding-top: 86px; } }

/* Digitales und Business: Elemente im Glasdesign der fertigen Seiten (ohne Schatten, Hover nur farblich) */
body.neu:has(#di-bereiche) main > section:not(.subhero):not(.xl-section) :is(.glasbox, .card, .glasbox-browser, .glasbox-code, .vn-nachher),
body.neu:has(#bu-erfahrung) main > section:not(.subhero):not(.xl-section) :is(.glasbox, .card) { box-shadow: none !important; }
body.neu:has(#di-bereiche) main > section:not(.subhero):not(.xl-section):not(.section-dark) :is(.glasbox, .card),
body.neu:has(#bu-erfahrung) main > section:not(.subhero):not(.xl-section):not(.section-dark) :is(.glasbox, .card) { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu:has(#di-bereiche) main .card, body.neu:has(#bu-erfahrung) main .card { border-radius: 20px; }
body.neu:has(#di-bereiche) main > section:not(.subhero):not(.xl-section):not(.section-dark) :is(.glasbox, .card):hover,
body.neu:has(#bu-erfahrung) main > section:not(.subhero):not(.xl-section):not(.section-dark) .card:hover { background: rgba(255, 255, 255, 0.85); }
body.neu:has(#di-bereiche) main > section:not(.subhero):not(.xl-section) *:hover,
body.neu:has(#bu-erfahrung) main > section:not(.subhero):not(.xl-section) *:hover { transform: none !important; }
body.neu:has(#di-bereiche) .glasbox-section .glasbox li { background: rgba(47, 143, 150, 0.07); border: 1px solid rgba(47, 143, 150, 0.2); box-shadow: none; }
body.neu:has(#di-bereiche) .glasbox-section .glasbox li:hover { background: rgba(47, 143, 150, 0.12); }

/* Digitales: Erfolgsfaktoren als Glas-Kacheln */
body.neu .di-erfolg-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
body.neu .di-erfolg-liste li { display: flex; align-items: center; min-height: 64px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-weight: 600; color: var(--navy); transition: background-color 0.25s ease; }
body.neu .di-erfolg-liste li:hover { background: rgba(255, 255, 255, 0.85); }
@media (max-width: 900px) { body.neu .di-erfolg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { body.neu .di-erfolg-liste { grid-template-columns: 1fr; } }

/* Digitales: zwei Bereiche mit Bild links/rechts wie auf Zur Person, Fotos noch als Platzhalter */
#di-bereiche .be-block:first-child { padding-top: 8px; border-top: 0; }
#di-bereiche .be-block:last-child { padding-bottom: 30px; }
#di-bereiche .di-bild-platzhalter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border: 2px dashed rgba(47, 143, 150, 0.45); border-radius: 16px; background: rgba(255, 255, 255, 0.6); text-align: center; }
#di-bereiche .di-bild-platzhalter p { margin: 0; color: var(--color-text-light); }
/* Digitales: Erfolgsfaktoren mit gleichem Abstand und gleicher Trennlinie wie zwischen den beiden Bereichen */
#di-bereiche { padding-bottom: 0; }
#di-bereiche .be-block:last-child { padding-bottom: 48px; }
#di-erfolg { padding-top: 0; }
#di-erfolg > .section-inner::before { content: ""; display: block; margin-bottom: 48px; border-top: 1px solid rgba(47, 143, 150, 0.3); }
/* Digitales, Bereiche: Code-Fenster und Werkzeug-Chips statt Fotos */
#di-bereiche .di-be-element { aspect-ratio: auto; display: flex; align-items: center; }
#di-bereiche .di-be-element > * { position: relative; z-index: 1; }
#di-bereiche .di-be-element > * { width: 100%; }
#di-bereiche .glasbox-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
#di-bereiche .glasbox-chips li { padding: 10px 18px; border: 1px solid rgba(47, 143, 150, 0.2); border-radius: 999px; background: rgba(47, 143, 150, 0.07); font-weight: 600; color: var(--navy); }
/* hervorgehobene Chips überall gut lesbar (Verlauf mit weißer Schrift) */
body.neu .glasbox-chips li.hervor { border-color: transparent !important; background: var(--verlauf) !important; color: #ffffff !important; }
/* Chips im Rahmen wie ein Foto: Glasfläche mit versetztem Hintergrundrahmen */
#di-bereiche .di-be-element .glasbox-chips { align-content: center; min-height: 100%; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#di-bereiche .di-be-element { align-items: stretch; }
/* Chips-Box so hoch wie das Code-Fenster daneben: kleinere Chips */
#di-bereiche .di-be-element .glasbox-chips { gap: 8px; padding: 22px 24px; }
#di-bereiche .di-be-element .glasbox-chips li { padding: 7px 14px; font-size: 0.85rem; }
@media (min-width: 901px) { #di-bereiche .di-be-element .glasbox-chips { box-sizing: border-box; height: 273px; min-height: 0; align-content: center; } }
/* Digitales: Erfolgsfaktoren mit dem üblichen Abschnittsabstand nach unten */
#di-erfolg { padding-bottom: 80px; }

/* Erfolgsfaktoren: normale Schrift, beim Überfahren ein Fenster mit dem Warum */
body.neu .di-erfolg-liste li { position: relative; font-weight: 400; font-size: 1rem; cursor: default; outline: none; }
body.neu .di-erfolg-liste li:focus-visible { box-shadow: 0 0 0 2px var(--teal); }
body.neu .di-erfolg-info { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 20; width: 300px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 16px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 18px 40px rgba(30, 53, 83, 0.16); font-size: 0.9rem; line-height: 1.55; font-weight: 400; color: var(--color-text-light); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; }
body.neu .di-erfolg-info::after { content: ""; position: absolute; left: 28px; top: 100%; border: 8px solid transparent; border-top-color: rgba(255, 255, 255, 0.97); }
body.neu .di-erfolg-liste li:hover .di-erfolg-info,
body.neu .di-erfolg-liste li:focus .di-erfolg-info,
body.neu .di-erfolg-liste li:focus-within .di-erfolg-info { opacity: 1; visibility: visible; }
@media (min-width: 901px) {
	body.neu .di-erfolg-liste li:nth-child(4n) .di-erfolg-info,
	body.neu .di-erfolg-liste li:nth-child(4n-1) .di-erfolg-info { left: auto; right: 0; }
	body.neu .di-erfolg-liste li:nth-child(4n) .di-erfolg-info::after,
	body.neu .di-erfolg-liste li:nth-child(4n-1) .di-erfolg-info::after { left: auto; right: 28px; }
}
@media (max-width: 900px) {
	body.neu .di-erfolg-info { width: min(300px, calc(100vw - 48px)); }
	body.neu .di-erfolg-liste li:nth-child(2n) .di-erfolg-info { left: auto; right: 0; }
	body.neu .di-erfolg-liste li:nth-child(2n) .di-erfolg-info::after { left: auto; right: 28px; }
}
@media (max-width: 520px) { body.neu .di-erfolg-liste li:nth-child(2n) .di-erfolg-info { left: 0; right: auto; } }
/* Digitales, Aus zwei Jahrzehnten Praxis auf Farbverlauf: Karten als helles Glas auf Farbe, Schrift weiß */
body.neu #di-projekte .card { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; }
body.neu #di-projekte .card:hover { background: rgba(255, 255, 255, 0.2) !important; }
body.neu #di-projekte .card h3 { color: #ffffff; }
body.neu #di-projekte .card p { color: rgba(255, 255, 255, 0.88); }
/* Digitales, Aus zwei Jahrzehnten Praxis: oben gerade Kante statt schräg */
body.neu #di-ux.section-accent { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); }
body.neu #di-ux .card { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; }
body.neu #di-ux .card:hover { background: rgba(255, 255, 255, 0.2) !important; }
body.neu #di-ux .card h3 { color: #ffffff; }
body.neu #di-ux .card p { color: rgba(255, 255, 255, 0.88); }
/* Erfolgsfaktoren: dunkle Tooltips für Kontrast zu den hellen Kacheln */
body.neu .di-erfolg-info { border-color: transparent; background: var(--navy); color: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 40px rgba(16, 38, 66, 0.28); }
body.neu .di-erfolg-info::after { border-top-color: var(--navy); }
/* Mein wichtigster Maßstab: gerade Oberkante, daher normaler Abstand oben */
body.neu #di-ux.section-accent { padding-top: 80px; }
/* Erfolgsfaktoren: Hover mit leichter Türkis-Tönung wie auf den anderen Seiten */
body.neu .di-erfolg-liste li:hover, body.neu .di-erfolg-liste li:focus-within { background: rgba(47, 143, 150, 0.12); border-color: rgba(47, 143, 150, 0.3); }
/* KI-Bereich vor Tiefer einsteigen: unten gerade Kante */
body.neu #di-claude { clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); }
/* Juristisches, KI-Compliance: Foto statt Platzhalter */
body.neu .ju-ki-bild.ju-ki-foto { position: relative; padding: 0; border: 0 !important; background: none !important; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; }
body.neu .ju-ki-bild.ju-ki-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===== Digitales, neuer Aufbau (Oktober 2026) ===== */
/* Karten auf Farbverlauf: helles Glas, weiße Schrift, vier bzw. zwei Spalten */
body.neu #di-ux .di-karten-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.neu #di-claude .di-karten-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.neu #di-claude .card { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: none !important; }
body.neu #di-claude .card:hover { background: rgba(255, 255, 255, 0.2) !important; }
body.neu #di-claude .card h3 { color: #ffffff; }
body.neu #di-claude .card p { color: rgba(255, 255, 255, 0.88); }
@media (max-width: 1100px) { body.neu #di-ux .di-karten-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.neu #di-ux .di-karten-vier, body.neu #di-claude .di-karten-zwei { grid-template-columns: 1fr; } }

/* User Experience und Design: Glas-Karten mit Foto im Wechsel auf dunklem Verlauf (wie Juristisches) */
body.neu #di-design .di-design-liste { display: grid; gap: 28px; margin-top: 44px; }
body.neu #di-design .ju-ki-karte { align-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu #di-design .di-design-karte--rev { grid-template-columns: 7fr 5fr; }
body.neu #di-design .di-design-karte--rev .ju-ki-bild { order: 2; }
body.neu #di-design .section-eyebrow { color: var(--mint); }
body.neu #di-design .ju-ki-titel { color: #ffffff; }
body.neu #di-design .ju-ki-text { color: rgba(255, 255, 255, 0.85); }
body.neu #di-design .ju-ki-bild { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border: 2px dashed rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); text-align: center; }
body.neu #di-design .ju-ki-bild .lt-platzhalter-label { background: var(--mint); color: var(--navy); }
body.neu #di-design .ju-ki-bild p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 900px) {
	body.neu #di-design .di-design-karte--rev { grid-template-columns: 1fr; }
	body.neu #di-design .di-design-karte--rev .ju-ki-bild { order: 0; }
}

/* ===== Digitales, Fassung 2 ===== */
/* Projektpfad: vier Etappen auf einer Linie, ohne Kästen */
body.neu .di-pfad { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 48px 0 0; padding: 0; list-style: none; }
body.neu .di-pfad::before { content: ""; position: absolute; left: 23px; right: 23px; top: 23px; height: 2px; background: linear-gradient(90deg, rgba(143, 212, 207, 0.9), rgba(255, 255, 255, 0.35)); }
body.neu .di-pfad-schritt { position: relative; }
body.neu .di-pfad-nr { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--mint); color: var(--navy); font-size: 0.9rem; font-weight: 700; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16); }
body.neu .di-pfad-schritt h3 { margin: 20px 0 8px; font-size: 1.1rem; line-height: 1.3; color: #ffffff; }
body.neu .di-pfad-schritt p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
/* KI als doppelter Hebel: Band mit zwei Seiten und Mittelpunkt */
body.neu .di-ki-band { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 56px; padding: 30px 36px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 28px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .di-ki-seite p { margin: 0; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
body.neu .di-ki-seite .di-ki-k { margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
body.neu .di-ki-seite:last-child { text-align: right; }
body.neu .di-ki-mitte { display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.neu .di-ki-mitte svg { width: 72px; height: 72px; padding: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--mint), #ffffff); color: var(--navy); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12), 0 0 0 16px rgba(255, 255, 255, 0.06); }
body.neu .di-ki-mitte span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
@media (max-width: 900px) {
	body.neu .di-pfad { grid-template-columns: 1fr; gap: 22px; }
	body.neu .di-pfad::before { left: 22px; right: auto; top: 23px; bottom: 23px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(143, 212, 207, 0.9), rgba(255, 255, 255, 0.35)); }
	body.neu .di-pfad-schritt { padding-left: 66px; }
	body.neu .di-pfad-nr { position: absolute; left: 0; top: 0; }
	body.neu .di-pfad-schritt h3 { margin-top: 10px; }
	body.neu .di-ki-band { grid-template-columns: 1fr; text-align: center; padding: 26px 22px; }
	body.neu .di-ki-seite:last-child { text-align: center; }
	body.neu .di-ki-mitte { order: -1; }
}
/* Dunkler Block: kleine Merkmale als Pillen */
body.neu #di-design .di-haken { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
body.neu #di-design .di-haken li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.92); }
body.neu #di-design .di-haken li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
/* Projekte wie auf Juristisches */
body.neu #di-referenzen .ju-akk { margin-top: 24px; }
/* Führungskraft: Zahl im Ring, drei Stärken mit Trennlinien */
body.neu .di-fk { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: center; }
body.neu .di-fk-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 260px; height: 260px; margin: 0 auto; border: 2px solid rgba(143, 212, 207, 0.75); border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.06), 0 0 0 32px rgba(255, 255, 255, 0.035); text-align: center; }
body.neu .di-fk-ring b { font-size: 4.6rem; font-weight: 800; line-height: 1; color: #ffffff; }
body.neu .di-fk-ring span { max-width: 150px; margin-top: 8px; font-size: 0.9rem; line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
body.neu .di-staerken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 34px 0 0; padding: 0; list-style: none; }
body.neu .di-staerken li { padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, 0.28); }
body.neu .di-staerken li:first-child { padding-left: 0; border-left: 0; }
body.neu .di-st-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--navy); }
body.neu .di-st-icon svg { width: 22px; height: 22px; }
body.neu .di-staerken h3 { margin: 16px 0 6px; font-size: 1.05rem; line-height: 1.35; color: #ffffff; }
body.neu .di-staerken p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
@media (max-width: 1000px) {
	body.neu .di-fk { grid-template-columns: 1fr; gap: 48px; }
	body.neu .di-fk-ring { width: 210px; height: 210px; }
	body.neu .di-fk-ring b { font-size: 3.6rem; }
	body.neu .di-staerken { grid-template-columns: 1fr; gap: 24px; }
	body.neu .di-staerken li, body.neu .di-staerken li:first-child { padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
}
/* Erfolgsfaktoren jetzt nach den Projekten: normaler Abschnittsabstand, keine Verbindungslinie mehr; Bereiche oben wieder mit normalem Abstand */
#di-erfolg { padding-top: 0; }
#di-erfolg > .section-inner::before { display: none; }
#di-bereiche { padding-bottom: 80px; }
#di-bereiche .be-block:last-child { padding-bottom: 0; }
#di-referenzen { padding-bottom: 72px; }
/* Feine Trennlinie über die ganze Bildschirmbreite zwischen Projekten und Erfolgsfaktoren, gleicher Abstand darüber und darunter */
#di-erfolg { position: relative; padding-top: 72px; }
#di-erfolg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.7); }
@media (max-width: 768px) {
	#di-referenzen { padding-bottom: 48px; }
	#di-erfolg { padding-top: 48px; }
}
/* Dunkle und farbige Bereiche: ohne Unterstrich auch kein Zusatzabstand an hervorgehobenen Wörtern */
body.neu .section-accent .hl, body.neu .section-dark .hl { padding: 0; }
/* Digitales, Transformation: echte Fotos statt Platzhalter randlos und formatfüllend */
body.neu #di-design .ju-ki-bild.ju-ki-foto { display: block; padding: 0; border: 0; }
/* Legal Tech, Zwei Seiten: Karten untereinander, je mit Foto (erste rechts, zweite links) */
body.neu .ltn-seiten-grid.ltx-richtungen { grid-template-columns: 1fr; gap: 32px; }
body.neu .ltx-richtungen .ltn-seite { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: stretch; }
body.neu .ltx-richtungen .ltn-seite--hervor { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
body.neu .ltx-richtungen .ltn-seite-text { display: flex; flex-direction: column; min-width: 0; }
body.neu .ltx-richtungen .ltn-seite-text > p { margin: 0 0 20px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }
body.neu .ltx-richtungen .ltn-vorteile, body.neu .ltx-richtungen .ltn-vorteile--einspaltig { grid-template-columns: 1fr 1fr; flex: 1; grid-auto-rows: 1fr; }
body.neu .ltn-seite-foto.lt-platzhalter { aspect-ratio: auto; min-height: 100%; margin: 0; border-radius: 20px; }
body.neu .ltn-seite-foto.ju-ki-foto, body.neu .ltn-seite-foto img { border-radius: 20px; }
body.neu .ltn-seite-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	body.neu .ltx-richtungen .ltn-seite, body.neu .ltx-richtungen .ltn-seite--hervor { grid-template-columns: 1fr; gap: 24px; }
	body.neu .ltx-richtungen .ltn-seite-foto { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
	body.neu .ltx-richtungen .ltn-vorteile, body.neu .ltx-richtungen .ltn-vorteile--einspaltig { grid-template-columns: 1fr; grid-auto-rows: auto; }
}
body.neu .ltn-seite-foto.ju-ki-foto { position: relative; overflow: hidden; min-height: 100%; aspect-ratio: auto; }
body.neu .ltn-seite-foto.ju-ki-foto img { position: absolute; inset: 0; }
@media (max-width: 900px) { body.neu .ltn-seite-foto.ju-ki-foto { aspect-ratio: 4 / 3; min-height: 0; } }
body.neu .ltn-seite-foto img[src*="legal-tech-effizienz-kanzlei"] { object-position: 100% 50%; }
/* Legal Tech, Blick nach vorn: Text links, Foto rechts, je zur Hälfte */
body.neu #lt-ki .wt-panel .ltx-thema-box, body.neu #lt-ki .wt-panel .ltx-thema-box:not(.ltx-markt), body.neu #lt-ki .ltx-verantwortung.ltx-thema-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: stretch; }
body.neu #lt-ki .ltx-thema-box .ltx-markt-text { align-self: center; }
body.neu #lt-ki .ltx-thema-foto { margin: 0; min-height: 100%; aspect-ratio: auto; border-radius: 20px; border-color: rgba(47, 143, 150, 0.4); background: rgba(47, 143, 150, 0.06); color: var(--color-text-light); }
body.neu #lt-ki .ltx-thema-foto.ju-ki-foto { position: relative; overflow: hidden; }
body.neu #lt-ki .ltx-thema-foto.ju-ki-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	body.neu #lt-ki .wt-panel .ltx-thema-box, body.neu #lt-ki .wt-panel .ltx-thema-box:not(.ltx-markt), body.neu #lt-ki .ltx-verantwortung.ltx-thema-box { grid-template-columns: 1fr; gap: 24px; }
	body.neu #lt-ki .ltx-thema-foto { min-height: 0; aspect-ratio: 16 / 9; }
}
body.neu #lt-ki .ltx-thema-foto p { color: var(--color-text-light); }
body.neu #lt-ki .ltx-thema-box .ltx-markt-text { align-self: start; }
/* ===== Business, neuer Aufbau (Oktober 2026) ===== */
/* Erfahrener Unternehmer: Kennzahlen als helle Glaskacheln */
body.neu .bu-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
body.neu .bu-zahlen li { padding: 24px 22px; border: 1px solid var(--glas-rand); border-radius: 20px; background: var(--glas); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.3s ease; }
body.neu .bu-zahlen li:hover { background: rgba(255, 255, 255, 0.96); }
body.neu .bu-zahlen b { display: inline-block; margin-bottom: 6px; font-size: 2.2rem; font-weight: 800; line-height: 1.1; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.neu .bu-zahlen span { display: block; font-size: 0.92rem; line-height: 1.5; color: var(--color-text-light); }
/* Betriebswirtschaft: Glasbox, Text links, Themen rechts */
body.neu .bu-bwl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: start; margin-top: 24px; padding: 36px 40px; border: 1px solid var(--glas-rand); border-radius: 28px; background: var(--glas); box-shadow: var(--glas-schatten); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .bu-bwl h3 { margin: 0 0 10px; font-size: 1.4rem; line-height: 1.3; color: var(--navy); }
body.neu .bu-bwl p:not(.section-eyebrow) { margin: 0; line-height: 1.7; color: var(--color-text-light); }
body.neu .bu-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.neu .bu-chips li { padding: 9px 16px; border: 1px solid rgba(47, 143, 150, 0.2); border-radius: 999px; background: rgba(47, 143, 150, 0.07); font-size: 0.92rem; font-weight: 600; color: var(--navy); }
body.neu .bu-chips li.hervor { border-color: transparent; background: var(--verlauf); color: #ffffff; }
/* Gesamtverantwortung: Glaskarten mit Foto im Wechsel auf dunklem Grund (wie Digitales) */
body.neu .bu-fotokarten .di-design-liste { display: grid; gap: 28px; margin-top: 44px; }
body.neu .bu-fotokarten .ju-ki-karte { align-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu .bu-fotokarten .di-design-karte--rev { grid-template-columns: 7fr 5fr; }
body.neu .bu-fotokarten .di-design-karte--rev .ju-ki-bild { order: 2; }
body.neu .bu-fotokarten .ju-ki-karte .section-eyebrow { color: var(--mint); }
body.neu .bu-fotokarten .ju-ki-titel { color: #ffffff; }
body.neu .bu-fotokarten .ju-ki-text { color: rgba(255, 255, 255, 0.85); }
body.neu .bu-fotokarten .ju-ki-bild.lt-platzhalter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border: 2px dashed rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); text-align: center; }
body.neu .bu-fotokarten .ju-ki-bild.ju-ki-foto { display: block; padding: 0; border: 0; }
body.neu .bu-fotokarten .ju-ki-bild .lt-platzhalter-label, body.neu .bu-foto .lt-platzhalter-label { background: var(--mint); color: var(--navy); }
body.neu .bu-fotokarten .ju-ki-bild p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; line-height: 1.5; }
body.neu .bu-fotokarten .di-haken { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
body.neu .bu-fotokarten .di-haken li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.92); }
body.neu .bu-fotokarten .di-haken li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
/* Netzwerk und soziale Ebene: Text mit drei Punkten neben einem hohen Foto */
body.neu .bu-netz { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: stretch; }
body.neu .bu-netz--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
body.neu .bu-foto.lt-platzhalter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 100%; margin: 0; padding: 24px; aspect-ratio: auto; border: 2px dashed rgba(255, 255, 255, 0.4); border-radius: 24px; background: rgba(255, 255, 255, 0.08); text-align: center; }
body.neu .bu-foto p { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; line-height: 1.5; }
body.neu .bu-foto.ju-ki-foto { position: relative; overflow: hidden; padding: 0; border: 0; }
body.neu .bu-foto.ju-ki-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.neu .bu-punkte { display: grid; gap: 22px; margin: 32px 0 0; padding: 0; list-style: none; }
body.neu .bu-punkte li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start; }
body.neu .bu-punkte .di-st-icon { grid-row: span 2; }
body.neu .bu-punkte h3 { margin: 2px 0 4px; font-size: 1.05rem; line-height: 1.35; color: #ffffff; }
body.neu .bu-punkte p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
@media (max-width: 1000px) {
	body.neu .bu-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.neu .bu-bwl { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
}
@media (max-width: 900px) {
	body.neu .bu-fotokarten .di-design-karte--rev { grid-template-columns: 1fr; }
	body.neu .bu-fotokarten .di-design-karte--rev .ju-ki-bild { order: 0; }
	body.neu .bu-netz, body.neu .bu-netz--rev { grid-template-columns: 1fr; gap: 32px; }
	body.neu .bu-foto.lt-platzhalter { min-height: 0; aspect-ratio: 4 / 3; }
	body.neu .bu-netz--rev .bu-foto { order: 2; }
}
@media (max-width: 520px) {
	body.neu .bu-zahlen { gap: 12px; }
	body.neu .bu-zahlen li { padding: 18px 16px; }
	body.neu .bu-zahlen b { font-size: 1.6rem; }
}

/* ===== Business, zweite Fassung ===== */
/* Gerade Kanten statt Schrägen auf der ganzen Seite */
body.neu #bu-vision, body.neu #bu-netzwerk { clip-path: none; padding: 104px 0; }
body.neu #bu-vision + .section-dark, body.neu #bu-netzwerk + .section-dark { margin-top: 0; padding-top: 104px; }
/* Unternehmerischer Weg: Foto-Platzhalter links wie auf Zur Person, drei Kennzahlen */
body.neu .bu-be-foto.lt-platzhalter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 24px; aspect-ratio: 16 / 10; border: 2px dashed rgba(47, 143, 150, 0.45); border-radius: 20px; background: rgba(255, 255, 255, 0.6); text-align: center; }
body.neu .bu-be-foto p { margin: 0; color: var(--color-text-light); }
body.neu .bu-be-foto::before { display: none; }
body.neu #bu-erfahrung .be-block { padding-top: 8px; padding-bottom: 0; border-top: 0; }
body.neu .bu-zahlen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
body.neu .bu-zahlen li { box-shadow: none; background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.8); }
body.neu .bu-zahlen li:hover { background: rgba(255, 255, 255, 0.85); }
/* Betriebswirtschaft: Text links, Themen-Box rechts wie auf Digitales */
body.neu #bu-bwl { padding-top: 40px; }
body.neu #bu-bwl .be-block { padding-top: 0; border-top: 0; }
body.neu #bu-bwl .di-be-element { aspect-ratio: auto; display: flex; align-items: stretch; }
body.neu #bu-bwl .di-be-element::before { display: none; }
body.neu #bu-bwl .di-be-element > * { position: relative; z-index: 1; width: 100%; }
body.neu #bu-bwl .glasbox-chips { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; margin: 0; padding: 22px 24px; list-style: none; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.neu #bu-bwl .glasbox-chips li { padding: 7px 14px; border: 1px solid rgba(47, 143, 150, 0.2); border-radius: 999px; background: rgba(47, 143, 150, 0.07); font-size: 0.85rem; font-weight: 600; color: var(--navy); }
@media (min-width: 901px) { body.neu #bu-bwl .glasbox-chips { box-sizing: border-box; height: 273px; } }
/* Fotokarten: Texte oben bündig (auch auf Digitales) */
body.neu .bu-fotokarten .ju-ki-karte, body.neu #di-design .ju-ki-karte { align-items: start; }
/* Skalierbarkeit: Karten im Glasdesign ohne Schatten */
body.neu .bu-karten .card { box-shadow: none !important; }
@media (max-width: 700px) { body.neu .bu-zahlen--drei { grid-template-columns: 1fr; } }body.neu #bu-erfahrung .be-block, body.neu #bu-bwl .be-block { align-items: start; }
/* Business: An der Schnittstelle, fünf verbundene Felder als Brücke */
body.neu #bu-bruecke { padding-top: 40px; padding-bottom: 40px; }
body.neu .bu-bruecke { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
body.neu .bu-bruecke::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: linear-gradient(90deg, var(--teal), var(--blau)); opacity: 0.35; }
body.neu .bu-bruecke li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 12px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 20px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align: center; font-weight: 600; color: var(--navy); transition: background 0.25s ease; }
body.neu .bu-bruecke li:hover { background: rgba(255, 255, 255, 0.85); }
body.neu .bu-br-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--verlauf); color: #ffffff; }
body.neu .bu-br-icon svg { width: 24px; height: 24px; }
@media (max-width: 900px) { body.neu .bu-bruecke { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.neu .bu-bruecke::before { display: none; } }

/* Zur Person, Zeitstrahl: Stationen ohne Detailansicht, daher ohne Hover-Feld */
.tl-item:hover::before, .tl-item:focus-visible::before { background: transparent; }
/* Business, dritte Fassung */
body.neu .bu-be-rahmen .bu-be-foto { position: relative; z-index: 1; width: 100%; height: 100%; aspect-ratio: auto; background: rgba(255, 255, 255, 0.85); }
body.neu #bu-erfahrung { padding-bottom: 0; }
body.neu #bu-bruecke { padding-top: 48px; }
body.neu #bu-bwl .be-block { align-items: stretch; }
body.neu #bu-bwl .glasbox-chips { align-content: flex-start; height: auto; min-height: 100%; }
@media (min-width: 901px) { body.neu #bu-bwl .glasbox-chips { height: 100%; } }
body.neu #bu-bwl { padding-bottom: 56px; }
body.neu #bu-vision { padding-top: 80px; }
body.neu #bu-bwl .be-bild { margin-bottom: 0; }
body.neu #bu-bwl { padding-bottom: 40px; }
body.neu #bu-vision { padding-top: 72px; }
body.neu .bu-be-rahmen .bu-be-foto { background: #f3f8f9; }
body.neu #bu-bruecke { padding-top: 68px; }
/* Business, vierte Fassung: helle Bereiche im Wechsel Text und Bild, überall gleicher Abstand */
body.neu .bu-hell, body.neu #bu-bruecke, body.neu #bu-bwl { padding-top: 68px; padding-bottom: 0; }
body.neu .bu-hell .be-block { padding: 0; border-top: 0; }
body.neu #bu-modelle { padding-bottom: 80px; }
body.neu #bu-modelle .bu-karten { margin-top: 48px; }
body.neu #bu-vision { padding-top: 72px; }
/* Netzwerk auf hellem Grund */
body.neu #bu-netzwerk { padding: 88px 0; }
body.neu .bu-netz-hell .bu-punkte h3 { color: var(--navy); }
body.neu .bu-netz-hell .bu-punkte p { color: var(--color-text-light); }
body.neu .bu-netz-hell .di-st-icon { background: var(--verlauf); color: #ffffff; }
body.neu .bu-netz-hell .bu-foto.lt-platzhalter { border-color: rgba(47, 143, 150, 0.45); background: rgba(255, 255, 255, 0.6); }
body.neu .bu-netz-hell .bu-foto p { color: var(--color-text-light); }
body.neu .bu-netz-hell .bu-foto .lt-platzhalter-label { background: var(--navy); color: #ffffff; }
body.neu #bu-erfahrung .bu-zahlen { margin-top: 48px; }
body.neu #bu-modelle { padding-bottom: 68px; }
body.neu #bu-vision { padding-top: 64px; }
/* Netzwerk hell: Foto mit versetztem Hintergrund wie die übrigen Fotos */
body.neu .bu-netz-hell .bu-foto { position: relative; isolation: isolate; margin-right: 20px; margin-bottom: 20px; background: #f3f8f9; }
body.neu .bu-netz-hell .bu-foto::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 24px; background: linear-gradient(135deg, rgba(47, 143, 150, 0.35), rgba(59, 111, 168, 0.35)); transform: translate(20px, 20px); }
body.neu #bu-menschen { padding: 88px 0; }
body.neu #bu-modelle { padding-bottom: 88px; }
body.neu #bu-vision { padding: 88px 0; }
body.neu #bu-ceo { padding-top: 88px; padding-bottom: 88px; }
body.neu .bu-netz-hell .bu-foto.lt-platzhalter { background: #f3f8f9; }
body.neu .bu-netz-hell .bu-foto { isolation: auto; }
body.neu .bu-netz-hell .bu-netz { isolation: isolate; }
/* Business: alle Bild- und Badge-Boxen gleich hoch, Badge-Box mit versetztem Hintergrund */
body.neu #bu-bwl .be-block { align-items: start; }
body.neu #bu-bwl .di-be-element { aspect-ratio: 16 / 10; margin: 0 20px 20px 0; }
body.neu #bu-bwl .di-be-element::before { display: block; }
body.neu #bu-bwl .glasbox-chips { height: 100%; min-height: 0; box-sizing: border-box; background: #ffffff; }
body.neu #bu-netzwerk { padding-bottom: 0; }
body.neu #bu-menschen { padding-top: 68px; }
body.neu #bu-menschen { padding-top: 88px; }
body.neu #bu-menschen { padding-top: 142px; }
/* Business, echte Fotos im hellen Bereich: versetzter Hintergrund bleibt sichtbar */
body.neu .bu-netz-hell .bu-foto.ju-ki-foto { overflow: visible; padding: 0; border: 0; background: none; min-height: 100%; }
body.neu .bu-netz-hell .bu-foto.ju-ki-foto img { border-radius: 24px; }
@media (max-width: 900px) { body.neu .bu-netz-hell .bu-foto.ju-ki-foto { aspect-ratio: 3 / 4; min-height: 0; } }
body.neu #bu-netzwerk .bu-foto img { object-position: 50% 25%; }
/* Business: Betriebswirtschaft als dritte Karte im CEO-Bereich, Badges auf dunklem Glas */
body.neu .bu-fotokarten .bu-chip-box { display: block; padding: 0; border: 0; background: none; aspect-ratio: auto; }
body.neu .bu-chip-box .glasbox-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin: 0; padding: 22px 24px; list-style: none; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; background: rgba(255, 255, 255, 0.08); }
body.neu .bu-chip-box .glasbox-chips li { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 0.85rem; font-weight: 600; color: #ffffff; }
body.neu #bu-modelle { padding-top: 68px; }
/* Business: Betriebswirtschafts-Karte breiter für die Badges; Netzwerk und soziale Ebene im Querformat wie oben */
body.neu .bu-fotokarten .bu-bwl-karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.neu .bu-unten { padding-top: 68px; padding-bottom: 0; }
body.neu #bu-menschen.bu-unten { padding-bottom: 68px; }
body.neu #bu-netzwerk.bu-unten { padding-top: 88px; }
body.neu .bu-unten .be-block { padding: 0; border-top: 0; align-items: start; }
body.neu .bu-netzbild img { object-position: 50% 50%; }
body.neu #bu-menschen.bu-unten { padding-top: 68px; }
body.neu #bu-menschen.bu-unten { padding-bottom: 50px; }
html[lang="en"] body.neu .hl { white-space: nowrap; }
/* Englisch: Hero-Überschriften etwas kleiner, damit die längeren Übersetzungen in drei Zeilen passen */
html[lang="en"] body.neu .subhero--gross .subhero-title { font-size: 2.6rem; }
@media (min-width: 1201px) { html[lang="en"] body.neu .subhero--gross .subhero-title { font-size: 2.6rem; } }
html[lang="en"] body.neu .hero-title br { display: none; }
/* Handy: nichts breiter als der Bildschirm, Zeitstrahl-Zeile und Schnellcheck-Karte einspaltig, kleinere Lücke unter dem Hero */
html, body { overflow-x: clip; }
@media (max-width: 900px) {
	body.neu .ltx-weg-zeile { grid-template-columns: minmax(0, 1fr); }
	body.neu .ltx-weg-zeile > * { min-width: 0; }
}
@media (max-width: 700px) {
	body.neu .ltx-check-karte { grid-template-columns: minmax(0, 1fr); }
	body.neu .ltx-check-karte img { width: 100%; height: auto; }
	body.neu .ltx-check-karte > * { min-width: 0; }
	body.neu .subhero + .section { padding-top: 24px; }
}
@media (max-width: 700px) { body.neu main > .subhero + section.section { padding-top: 24px !important; } }
@media (max-width: 700px) { body.neu main > .subhero + section.section { padding-top: 32px !important; } }
@media (max-width: 700px) { body.neu main > .hero + section.section { padding-top: 32px !important; } }
/* Business, Handy: Blöcke volle Breite, Betriebswirtschafts-Karte einspaltig, lange Wörter trennen, kleinere Lücke vor „Tiefer einsteigen“ */
@media (max-width: 900px) {
	body.neu #bu-erfahrung .be-block, body.neu .bu-hell .be-block { width: auto; max-width: none; margin-left: 0; margin-right: 0; grid-template-columns: minmax(0, 1fr); }
	body.neu .bu-fotokarten .bu-bwl-karte { grid-template-columns: minmax(0, 1fr); }
	body.neu .bu-chip-box .glasbox-chips li { white-space: nowrap; }
}
body.neu .bu-zahlen span, body.neu .ju-ki-titel, body.neu .section-title, body.neu .section-eyebrow { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 700px) {
	body.neu main > section.section:has(+ .xl-section) { padding-bottom: 40px !important; }
	body.neu .xl-section { padding-top: 40px; }
}
@media (max-width: 900px) { body.neu #bu-erfahrung .be-block, body.neu .bu-hell .be-block { width: 100% !important; inline-size: 100% !important; } }
@media (max-width: 700px) { body.neu .xl-section { padding-top: 16px !important; } body.neu main > section.section:has(+ .xl-section) { padding-bottom: 32px !important; } }

/* Hauptseiten: Link zur Legal-Tech-Seite sieht aus wie normaler Text, auch beim Darüberfahren */
a.link-unauffaellig,
a.link-unauffaellig:link,
a.link-unauffaellig:visited,
a.link-unauffaellig:hover,
a.link-unauffaellig:active,
a.link-unauffaellig:focus {
	color: inherit !important;
	font: inherit !important;
	text-decoration: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	transition: none !important;
}
a.link-unauffaellig::before,
a.link-unauffaellig::after { content: none !important; }

/* Kontaktfenster, Bestätigungshinweis: Hervorhebungen als span.fett statt strong (SEO), gleiche Optik */
.contact-modal-verify .fett { font-weight: 700; white-space: nowrap; }
.contact-modal-verify .fett:not(.js-confirm-email) { white-space: normal; }
@media (max-width: 640px) {
	.contact-modal-verify .fett { white-space: normal; overflow-wrap: anywhere; }
}

/* Business, Chip-Box im dunklen Bereich: hervorgehobene Chips sehen aus wie alle anderen */
body.neu .bu-chip-box .glasbox-chips li.hervor { border: 1px solid rgba(255, 255, 255, 0.25) !important; background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; }
/* Digitales, Chip-Box: hervorgehobene Chips sehen aus wie alle anderen */
body.neu #di-bereiche .glasbox-chips li.hervor { border: 1px solid rgba(47, 143, 150, 0.2) !important; background: rgba(47, 143, 150, 0.07) !important; color: var(--navy) !important; }
/* Blog-Übersicht und Blogbeitrag: Abschnitt „Offen für Neues“ mit gerader Oberkante */
body.neu #lt-kapitel.lt-kapitel-blog { clip-path: none !important; padding-top: 100px; }
body.neu .blog-list + #lt-kapitel.lt-kapitel-blog { margin-top: 90px; }
body.neu .section-accent:has(+ .lt-kapitel-blog) { clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%); }
/* Smartphone: Themen und Mehr im Footer nebeneinander */
@media (max-width: 900px) { body.neu .footer-topics { grid-template-columns: 1fr 1fr; gap: 20px; } }
/* Smartphone: Schnellcheck-Karte ragt nicht mehr in den Abschnitt darunter */
@media (max-width: 900px) {
	body.neu #lt-kapitel { padding-bottom: 56px; }
	body.neu .ltx-check-karte { margin-bottom: 0; }
	body.neu #lt-kapitel + .xl-section { padding-top: 64px; margin-top: 0; }
}

/* ---------- Dokument-Betrachter (dokument-betrachter.js): PDFs und Bilder im Vordergrund, z. B. Ergebnis des Kanzlei-Schnellchecks ---------- */
html.dokb-offen { overflow: hidden; }
.dokb { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; padding: 24px; background: rgba(30, 53, 83, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dokb[hidden] { display: none; }
.dokb-fenster { display: flex; flex-direction: column; width: min(1320px, 100%); height: 100%; border: 1px solid var(--glas-rand); border-radius: 22px; background: #ffffff; box-shadow: var(--glas-schatten); overflow: hidden; color: var(--navy); }
.dokb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 14px 26px; border-bottom: 1px solid var(--rand); }
.dokb-titel { min-width: 0; }
.dokb-titel h2 { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dokb-titel small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--color-text-light); }
.dokb-werkzeuge { display: flex; align-items: center; gap: 4px; flex: none; }
.dokb-knopf { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--navy); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.dokb-knopf svg { width: 20px; height: 20px; }
.dokb-knopf:hover, .dokb-knopf:focus-visible { background: var(--mint-hell); border-color: var(--rand); }
.dokb-knopf[disabled] { opacity: 0.35; cursor: default; background: transparent; border-color: transparent; }
.dokb-feld { min-width: 64px; padding: 0 6px; font-size: 0.85rem; font-weight: 500; text-align: center; color: var(--color-text-light); white-space: nowrap; }
.dokb-trenner { width: 1px; height: 24px; margin: 0 8px; background: var(--rand); }
body.neu .dokb-download, .dokb-download { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 0 12px; padding: 10px 18px; font-size: 0.9rem; background: var(--verlauf); color: #ffffff; }
.dokb-download svg { width: 18px; height: 18px; }
.dokb-inhalt { flex: 1; display: flex; min-height: 0; background: #eaf3f6; }
.dokb-miniaturen { flex: none; width: 150px; padding: 16px 14px; overflow-y: auto; border-right: 1px solid var(--rand); background: #ffffff; }
.dokb--ohne-miniaturen .dokb-miniaturen { display: none; }
.dokb-mini { display: block; width: 100%; margin: 0 0 14px; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; font: inherit; color: var(--color-text-light); }
.dokb-mini:hover { background: var(--mint-hell); }
.dokb-mini.ist-aktiv { border-color: var(--teal); color: var(--teal-tief); }
.dokb-mini .dokb-seite { width: 100%; margin: 0; }
.dokb-mini span { display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 600; }
.dokb-ansicht { flex: 1; overflow: auto; padding: 24px; outline: none; }
.dokb-seiten { --dokb-breite: 900px; }
.dokb-seite { width: var(--dokb-breite); margin: 0 auto 24px; border-radius: 6px; background: #ffffff; box-shadow: 0 8px 24px rgba(30, 53, 83, 0.12); overflow: hidden; }
.dokb-seite img { display: block; width: 100%; height: auto; }
.dokb-seite--hinweis { display: grid; place-items: center; min-height: 320px; }
.dokb-hinweis { max-width: 440px; padding: 32px; text-align: center; }
.dokb-hinweis strong { display: block; margin-bottom: 8px; font-size: 1rem; }
.dokb-hinweis p { margin: 0 0 18px; color: var(--color-text-light); }
@media (max-width: 760px) {
	.dokb { padding: 0; }
	.dokb-fenster { border-radius: 0; border: 0; }
	.dokb-kopf { flex-wrap: wrap; padding: 12px 14px; }
	.dokb-titel { flex: 1 1 100%; }
	.dokb-werkzeuge { flex-wrap: wrap; width: 100%; }
	.dokb-miniaturen { display: none; }
	.dokb-ansicht { padding: 12px; }
	.dokb-download span, .dokb-trenner { display: none; }
	body.neu .dokb-download, .dokb-download { margin: 0 4px; padding: 10px 12px; }
}
/* Eora am Handy: Eingabefeld mit 16 px, sonst zoomt das iPhone beim Antippen in die Seite und das Fenster wird breiter als der Bildschirm */
@media (max-width: 760px) { .ai-modal-input input { font-size: 16px; min-width: 0; } }
/* Legal Tech, Handy: dunkle Schräge nach Blick nach vorn lückenlos anschließen (beide Kanten 44px) */
body.neu #lt-ki + #lt-kapitel { margin-top: -44px; }

/* Blog: Datum auf den Karten unten rechts neben „Weiterlesen“, auf der Beitragsseite unter der Überschrift */
.blog-fuss, .bl-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.blog-fuss .blog-more, .bl-fuss .bl-more { margin-top: 0; }
.blog-datum, .bl-datum { font-size: 0.8rem; font-weight: 500; color: var(--color-text-light); white-space: nowrap; }
.blog-featured-body .blog-fuss { margin-top: 4px; }
.post-datumzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -4px 0 18px; font-size: 0.92rem; color: var(--color-text-light); }
.post-datumzeile span { display: inline-flex; align-items: center; gap: 6px; }
.post-datumzeile svg { width: 17px; height: 17px; color: var(--teal, #2e8790); }
.post-datumzeile i { width: 4px; height: 4px; border-radius: 50%; background: rgba(46, 135, 144, 0.45); }
.post-facts:has(> li:only-child) { grid-template-columns: 1fr; }

/* Blog-Liste: Thema immer einzeilig, rechts Platz für Datum und Lesezeit */
@media (min-width: 701px) { .blog-zeile a { grid-template-columns: 190px minmax(0, 1fr) auto; } }
.blog-zeile .blog-badge, .blog-zeile-zeit { white-space: nowrap; }
@media (max-width: 700px) { .blog-zeile-zeit { display: block; grid-row: 1; grid-column: 2; justify-self: end; font-size: 0.76rem; } }
/* Blog-Liste: Datum und Lesezeit mit eigenem Symbol und deutlichem Abstand */
.blog-zeile-zeit { display: inline-flex; align-items: center; gap: 16px; }
.blog-zeile-zeit > span { display: inline-flex; align-items: center; gap: 5px; }
.blog-zeile-zeit svg { width: 14px; height: 14px; flex: none; color: var(--teal, #2e8790); }
@media (max-width: 700px) { .blog-zeile-zeit { display: inline-flex; gap: 10px; } .blog-zeile-zeit svg { width: 12px; height: 12px; } }
@media (max-width: 700px) { .blog-zeile-zeit { grid-row: 3; grid-column: 1 / -1; justify-self: start; margin-top: 2px; } }

/* Blogbeiträge: Textlinks im Fließtext erkennbar (petrol), beim Darüberfahren unterstrichen (Tobias, 09.10.2026) */
.post-body :is(p, li, td, blockquote) a { color: #24717f; font-weight: 600; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color 0.15s ease; }
.post-body :is(p, li, td, blockquote) a:hover, .post-body :is(p, li, td, blockquote) a:focus-visible { color: #1e3553; text-decoration: underline; }

/* Smartphone-Kopfzeile: Logo und Menü-Schaltfläche etwas weiter vom Rand, Schaltfläche halbtransparent wie die Kopfzeile (Tobias, 13.10.2026) */
@media (max-width: 640px) {
	body.neu .header-inner { padding: 0 18px 0 26px; }
	body.neu .nav-toggle { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(30, 53, 83, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
/* Startseite, Hero: „Ein Jurist? Ja, aber anders …“ nur am Smartphone größer */
@media (max-width: 640px) { .hero-desc { font-size: 0.95rem; } }
@media (min-width: 641px) { .hero-desc { font-size: 1rem; } }
@media (max-width: 640px) {
	body.neu .header-inner .logo { margin-left: 0; }
	/* „Change the Look“: Die Textspalte lag über dem Umschalter und fing die Fingertipps ab; Textspalte durchlässig, ihre Bedienelemente nicht */
	.hero-text { pointer-events: none; }
	.hero-text a, .hero-text button, .hero-text input, .hero-text [role="button"] { pointer-events: auto; }
	/* Größere, unsichtbare Trefferfläche für „Legal“ und „Tech“ */
	.hero-look-schalter button { position: relative; }
	.hero-look-schalter button::after { content: ''; position: absolute; inset: -10px 0; }
}

/* Footer-Ueberschrift am Smartphone 20 % kleiner (Tobias, 13.10.2026) */
@media (max-width: 640px) { .footer-title { font-size: min(1.95rem, 8.2vw); } .footer-title br { display: none; } .footer-title strong::before { content: " "; } }

/* Smartphone: Bereich vor dem Footer naeher an die Schraege (Tobias, 13.10.2026) */
@media (max-width: 640px) { .xl-section--plain { padding-bottom: 0; } body:has(.xl-section--plain) .site-footer { margin-top: 24px; } }
/* Smartphone: Fotogroesse unabhaengig von der Textmenge (kein Wachsen, kein Zittern), Hauptueberschrift so gross wie die Abschnittsueberschriften (Tobias, 13.10.2026) */
@media (max-width: 640px) {
	body.neu .hero-person { height: min(137vw, 598px); }
	body.neu .hero-title { font-size: 1.7rem; }
	body.neu .hero-look-schalter { left: 47%; }
}
/* Smartphone, Legal Tech „Meine Rolle“: Überschrift und Text neben der Ziffer statt darunter (Tobias, 13.10.2026) */
@media (max-width: 640px) {
	body.neu .ltx-fazit .glasbox-schritte li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-right: 0; }
	body.neu .ltx-fazit .glasbox-schritte li > b { grid-row: 1 / span 2; width: 46px; height: 46px; margin: 0; }
	body.neu .ltx-fazit .glasbox-schritte li > h3 { grid-column: 2; margin-top: 11px; }
	body.neu .ltx-fazit .glasbox-schritte li > p { grid-column: 2; }
}
/* Umbrechende Textmarker: Strich nur so lang wie die letzte Zeile, Wörter darin nicht trennen (Tobias, 13.10.2026) */
body.neu .hl.hl-umbruch::before,
body.neu .hl.hl-umbruch::after { right: calc(var(--hl-rest, 0px) - 0.08em); }
@media (max-width: 640px) { .section-title .hl { -webkit-hyphens: manual; hyphens: manual; } }
/* Smartphone, Juristisches: kleineres Loch vor „Kommunikation als Staerke“ */
@media (max-width: 640px) { body.neu #ju-beratung { padding-bottom: 48px; } body.neu #ju-kommunikation { padding-top: 44px; } }
/* Smartphone, Unterseiten: „Tiefer einsteigen“ weiter weg vom Farbwechsel (nicht auf der Startseite) */
@media (max-width: 640px) { body.neu main:has(> .subhero) .xl-section--plain { padding-top: 60px !important; } }
/* Smartphone, Digitales: Code-Grafik weg, keine Trennlinie, kleinere Chips, weniger Luft am Sektionsende (Tobias, 13.10.2026) */
@media (max-width: 640px) {
	body.neu #di-bereiche .be-block:first-child > .be-bild { display: none; }
	body.neu #di-bereiche .be-block:first-child { padding-bottom: 0; }
	body.neu #di-bereiche .be-block + .be-block { border-top: 0; padding-top: 20px; }
	body.neu #di-bereiche .glasbox-chips li { font-size: 0.75rem; padding: 5px 11px; }
	body.neu #di-bereiche { padding-bottom: 36px; }
}
/* iPhone: Menue richtet sich nach der tatsaechlich sichtbaren Hoehe (Adressleiste ganz oben ausgeklappt) */
@supports (height: 100dvh) {
	@media (max-width: 1100px) {
		body.neu .main-nav { bottom: auto; height: calc(100dvh + 260px); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
		body.neu .nav-overlay { bottom: auto; height: calc(100dvh + 260px); }
	}
}
/* Smartphone, Business: Bilder weg, kleinere Luecken, Text vor Foto bei Skalierbarkeit, weisse Trennlinie vor „Tiefer einsteigen“ (Tobias, 13.10.2026) */
@media (max-width: 640px) {
	body.neu #bu-erfahrung .be-block:first-child > .be-bild { display: none; }
	body.neu #bu-erfahrung .bu-zahlen { margin-top: 28px; }
	body.neu #bu-modelle { padding-bottom: 44px; }
	body.neu #bu-modelle .be-block { display: flex; flex-direction: column; }
	body.neu #bu-modelle .be-block > .be-inhalt { order: 1; }
	body.neu #bu-modelle .be-block > .be-bild { order: 2; margin: 28px 0 0; align-self: stretch; width: 100%; }
	body.neu #bu-vision { padding-top: 52px; }
	body.neu #bu-ceo { padding-top: 60px !important; }
	body.neu #bu-netzwerk .be-bild { display: none; }
	body.neu #bu-menschen { padding-top: 32px !important; padding-bottom: 44px !important; }
	body.neu #bu-menschen + .xl-section--plain { position: relative; padding-top: 44px !important; }
	body.neu #bu-menschen + .xl-section--plain::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.7); }
}
/* Smartphone, Business: Abstaende rund um die vier Zahlen-Boxen, Skalierbarkeit-Foto und Netzwerk weiter verkleinert */
@media (max-width: 640px) {
	body.neu #bu-erfahrung .bu-zahlen { margin-top: 8px; }
	body.neu #bu-modelle { padding-top: 36px !important; }
	body.neu #bu-modelle .be-block { gap: 0; }
	body.neu #bu-modelle .be-block > .be-bild { margin-top: 8px; }
	body.neu #bu-ceo { padding-bottom: 48px !important; }
	body.neu #bu-netzwerk { padding-top: 48px !important; }
}
/* iPhone: bei offenem Menue weisser Seitenhintergrund, damit Safari seine Leisten weiss einfaerbt */
@media (max-width: 1100px) { html.nav-offen, html.nav-offen body { background-color: #ffffff !important; } }
/* Smartphone, Blog-Übersicht: „Tiefer einsteigen“ wie auf den anderen Seiten (Abstand nach oben, kleinere Lücke zum Footer) */
@media (max-width: 640px) {
	body.neu main > .xl-soft { padding-top: 60px !important; padding-bottom: 0; }
	body:has(main > .xl-soft) .site-footer { margin-top: 24px; }
}
/* Smartphone, Business: Begriffe in der Box kleiner, wie bei Digitales */
@media (max-width: 640px) { body.neu .bu-chip-box .glasbox-chips li { font-size: 0.75rem; padding: 5px 11px; } }
/* Smartphone, Blog-Übersicht: kleinere Lücken unter der Beitragsliste und über „Offen für Neues“ */
@media (max-width: 640px) { body.neu .blog-list + .lt-kapitel-blog { margin-top: 24px !important; padding-top: 52px !important; } }
/* Smartphone, Blogbeitrag: weniger Luft unter den Pfeilen bis „Offen für Neues“ */
@media (max-width: 640px) { body.neu .section-accent + .lt-kapitel-blog { padding-top: 64px !important; } }
/* Smartphone: Datenschutz und Impressum im Footer mit grosser Trefferflaeche (ca. 44 px), Aussehen unveraendert */
@media (max-width: 900px) { body.neu .footer-legal a:not(.footer-top-link) { display: inline-block; padding: 13px 10px; margin: -13px -10px; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12); } }
/* Smartphone, Datenschutzerklaerung: Text ohne Hintergrundkarte */
@media (max-width: 640px) { body.neu .legal-page.erste-v3 > .section-inner { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; padding-left: 24px; padding-right: 24px; } }
/* Blogbeitrag: Autor als erster Punkt der Datumszeile */
.post-datumzeile .post-datumzeile-autor { font-weight: 400; }
/* Eora unten rechts angepinnt (Variante B), nur Desktop */
.eora-schwebend { display: none; }
@media (min-width: 1101px) {
	.eora-schwebend { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 12px; border: 0; border-radius: 19px; background: rgba(30, 53, 83, 0.88); color: #fff; font: 500 0.8rem/1 Poppins, sans-serif; box-shadow: 0 6px 18px rgba(30, 53, 83, 0.18); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
	.eora-schwebend svg { width: 15px; height: 15px; color: #8fd4cf; }
	.eora-schwebend:hover, .eora-schwebend:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 53, 83, 0.25); }
	body:has(.modal-overlay.is-open) .eora-schwebend { display: none; }
}
/* Eora angepinnt: nur rundes Symbol, erst nach 100 px Scrollen */
@media (min-width: 1101px) {
	.eora-schwebend { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
	.eora-schwebend svg { width: 19px; height: 19px; }
	body:not(.eora-sichtbar) .eora-schwebend { display: none; }
}
@media (min-width: 1101px) {
	body.neu .eora-schwebend:hover, body.neu .eora-schwebend:focus-visible { background: #24717f; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(30, 53, 83, 0.22); }
	body.neu .eora-schwebend:hover svg, body.neu .eora-schwebend:focus-visible svg { color: #fff; }
}

/* Juristisches, Venture Capital: Text links, Akkordeons rechts, Spaltenverhältnis wie die Datenschutz-Box (21.10.2026) */
body.neu .ju-vc-karte { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin-top: 28px; }
body.neu .ju-vc-karte .ju-ki-text { margin-bottom: 0; }
body.neu .ju-vc-liste { display: grid; gap: 10px; }
@media (max-width: 900px) {
	body.neu .ju-vc-karte { grid-template-columns: 1fr; }
}

/* Einzelnes Wort ohne automatische Silbentrennung (z. B. „Unternehmen“ in der Datenschutz-Überschrift, 21.10.2026) */
.kein-trenn { hyphens: none; -webkit-hyphens: none; white-space: nowrap; }

/* Legal-Tech, Story: Zahlenbox so hoch wie der Text daneben, Zeilen verteilen sich (21.10.2026) */
@media (min-width: 901px) {
	body.neu .ltx-story-kopf > .ltn-zahlen { align-self: stretch; display: flex; flex-direction: column; }
	body.neu .ltx-story-kopf > .ltn-zahlen li { flex: 1 1 auto; }
}

/* Offen für Neues (Blog, Beiträge, Legal Tech): auf dem Smartphone kein zusätzlicher Abstand über der Häkchenliste (22.10.2026) */
@media (max-width: 640px) { body.neu #lt-kapitel .glasbox-haken { margin-top: 0; } }

/* Blog-Übersicht, oberster Beitrag auf dem Smartphone: Überschrift wie bei den übrigen Karten, ohne Einleitung, Titel ausgeschrieben (22.10.2026) */
@media (max-width: 640px) {
	body.neu .blog-featured-body h2 { font-size: 1.2rem; line-height: 1.35; -webkit-line-clamp: 6; line-clamp: 6; }
	body.neu .blog-featured-body > p:not(.blog-meta):not(.blog-cat) { display: none; }
}

/* Kanzlei-Schnellcheck, Ergebnis: „Blick nach vorn“ für Boutique und Großkanzlei im dunklen Verlauf wie beim Kurzprofil (22.10.2026) */
.kc-ausblick { margin: 28px 0 8px; padding: 28px 28px 26px; border-radius: 20px; background: var(--verlauf); color: rgba(255, 255, 255, 0.9); text-align: left; }
.kc-ausblick[hidden] { display: none; }
.kc-ausblick-eyebrow { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.kc-ausblick-titel { margin: 0 0 14px; font-size: 1.45rem; line-height: 1.25; color: #ffffff; }
.kc-ausblick p { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.65; }
.kc-ausblick-zusatz { margin-top: 18px; padding-left: 16px; border-left: 3px solid var(--mint); }
.kc-ausblick-zusatz span { display: block; margin-bottom: 6px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.kc-ausblick-zusatz p { margin: 0; font-weight: 600; color: #ffffff; }
@media (max-width: 640px) { .kc-ausblick { padding: 22px 18px 20px; } .kc-ausblick-titel { font-size: 1.25rem; } }