/* Startseite. Werte in px gelten bei 1440 px und folgen dem Referenzentwurf (Faktor 1,40625). */

/* ---------- Kopfbereich ---------- */
.held {
	position: relative;
	isolation: isolate;
	min-height: 627px;
	overflow: hidden;
	background: var(--tl-nacht);
	color: #ffffff;
}

.held__hintergrund {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* läuft in die Farbe am linken Rand des Fotos aus (4, 15, 25) */
	background: linear-gradient(90deg, #00070e 0%, #00070e 28%, #040f19 46%, #040f19 100%);
}

.held__raster {
	position: relative;
}

.held__text {
	position: relative;
	z-index: 2;
	width: 600px;
	padding-top: 131px;
}

.held .ueberzeile {
	gap: 16px;
	font-size: 0.90625rem;
	line-height: 18px;
}

.held__titel {
	margin-top: 7px;
	font-family: var(--tl-schrift-titel);
	font-size: 3.1875rem;
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 57px;
	text-transform: uppercase;
}

.held__zeile {
	display: block;
	overflow: hidden;
	padding-bottom: 2px;
	margin-bottom: -2px;
}

.held__zeile-innen {
	display: block;
}

.held__zeile--blau {
	color: var(--tl-blau-titel);
}

.held__strich {
	display: block;
	width: 102px;
	height: 3px;
	margin-top: 7px;
	background: var(--tl-rot);
	transform-origin: left;
}

.held__einleitung {
	max-width: 562px;
	margin-top: 12px;
	color: var(--tl-text-hell);
	font-size: 1.175rem;
	line-height: 26px;
}

.held__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 23px;
	margin-top: 24px;
}

.held__knoepfe .knopf--primaer {
	min-width: 293px;
	padding-inline: 22px;
}

.held__knoepfe .knopf--rahmen-hell {
	min-width: 204px;
}

/*
 * Foto mit Laptop und Handy aus dem Referenzentwurf (werkzeuge/kopfbild-bauen.py).
 * Bei 1440 px liegt es wie im Entwurf: Ausschnitt ab x 448, y 48, Faktor 1,40625.
 * Ränder oben und links laufen in den Hintergrund aus, unten links liegt der Tisch unter den Merkmalen.
 */
.held__bild {
	--rand-links: linear-gradient(90deg, transparent 0, #000 4%);
	--rand-oben: linear-gradient(180deg, transparent 0, #000 11%);
	--rand-ecke: radial-gradient(34% 30% at 0 100%, transparent 0, transparent 35%, #000 100%);
	position: absolute;
	top: 67px;
	left: 630px;
	z-index: 1;
	width: 810px;
	-webkit-mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke);
	-webkit-mask-composite: source-in;
	mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke);
	mask-composite: intersect;
}

/* Breiter als der Entwurf: das Foto bleibt beim Text, rechts läuft es aus */
@media (min-width: 1440.02px) {
	.held__bild {
		--rand-rechts: linear-gradient(270deg, transparent 0, #000 6%);
		-webkit-mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke), var(--rand-rechts);
		mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke), var(--rand-rechts);
	}
}

/* Merkmale unter den Knöpfen */
.held__merkmale {
	position: relative;
	z-index: 2;
	display: flex;
	margin-top: 44px;
	padding-bottom: 29px;
}

.merkmal {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 0;
	color: var(--tl-text-hell);
	font-size: 0.84375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 19.7px;
	text-transform: uppercase;
}

.merkmal:not(:last-child) {
	padding-right: 30px;
}

.merkmal + .merkmal {
	padding-left: 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.merkmal__icon {
	width: 50px;
	height: 50px;
	color: var(--tl-blau-titel);
	stroke-width: 1.4;
}

.merkmal__icon--rot {
	color: var(--tl-rot-hell);
}

/* Laptop und Handy: assets/css/geraete.css */

/* ---------- Wabennetz ---------- */
.waben__grund {
	fill: none;
	stroke-width: 1;
	opacity: 0.45;
}

.waben__hervor,
.waben__lauf {
	fill: none;
	stroke-width: 1.4;
	stroke-linejoin: round;
}

.waben__hervor--rot {
	stroke: var(--tl-rot-hell);
	opacity: 0.85;
}

.waben__hervor--cyan {
	stroke: #1aa7f5;
	opacity: 0.6;
}

.waben__lauf {
	stroke: #ffffff;
	stroke-width: 1.6;
	stroke-dasharray: 26 334;
	stroke-dashoffset: 0;
	opacity: 0;
}

.waben__knoten {
	fill: #7fd3ff;
}

.waben__knoten--rot {
	fill: #ff5a63;
}

.waben--abschluss .waben__grund {
	opacity: 0.4;
}

.waben--abschluss .waben__hervor--rot {
	opacity: 1;
}

/* ---------- Systemleiste ---------- */
.systeme {
	background: linear-gradient(90deg, #021420 0%, #03111c 18%, #03101a 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	color: #ffffff;
}

.systeme .behaelter {
	min-height: 111px;
	padding-top: 18px;
}

.systeme__titel {
	color: #b9c4d0;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
}

.systeme__liste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 13px;
	padding-left: 18px;
	padding-right: 54px;
}

.systeme__eintrag {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	color: #a7b4c3;
	font-family: var(--tl-schrift-titel);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	transition: color 0.3s ease, transform 0.3s var(--tl-ease);
}

.systeme__eintrag .icon {
	width: 26px;
	height: 26px;
	stroke-width: 1.8;
}

.systeme__eintrag:hover {
	color: #ffffff;
	transform: translateY(-2px);
}

/* Kundenlogos mit Freigabe: einfarbig hell, damit unterschiedliche Logos ruhig nebeneinander stehen */
.systeme__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 56px;
	margin-top: 16px;
	padding-bottom: 18px;
}

.systeme__logo {
	display: block;
	width: auto;
	max-width: 150px;
	height: 34px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.72;
	transition: opacity 0.3s ease;
}

.systeme__logos li:hover .systeme__logo {
	opacity: 1;
}

/* ---------- Lösungen ---------- */
.loesungen {
	background: linear-gradient(90deg, #f7f9fc 0%, #f4f7fa 35%, #f3f7fa 100%);
}

.loesungen__raster {
	display: grid;
	grid-template-columns: 496px 1fr;
	min-height: 347px;
	padding-top: 29px;
	padding-bottom: 16px;
}

.loesungen .titel-2,
.ablauf .titel-2 {
	margin-top: 12px;
}

.loesungen__text {
	max-width: 482px;
	margin-top: 17px;
	color: #27313c;
	font-size: 0.90625rem;
	line-height: 22px;
}

.loesungen__einleitung .knopf {
	min-width: 253px;
	margin-top: 24px;
}

.loesungen__karten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 17.5px;
	align-self: start;
	margin-top: 2px;
}

.karte {
	position: relative;
	height: 300px;
	overflow: hidden;
	border-radius: var(--tl-radius-karte);
	background: var(--tl-karte-dunkel);
	color: #ffffff;
	box-shadow: 0 14px 30px -18px rgba(5, 20, 35, 0.6);
	transition: transform 0.45s var(--tl-ease), box-shadow 0.45s var(--tl-ease);
}

.karte::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(26, 167, 245, 0);
	transition: box-shadow 0.45s ease;
	pointer-events: none;
}

.karte:hover,
.karte:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 26px 40px -20px rgba(5, 40, 70, 0.75);
}

.karte:hover::after,
.karte:focus-within::after {
	box-shadow: inset 0 0 0 1px rgba(26, 167, 245, 0.7);
}

.karte__bild {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 54%;
}

.karte__bild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, var(--tl-karte-dunkel) 0%, rgba(11, 26, 41, 0) 36%, rgba(11, 26, 41, 0) 52%, rgba(6, 14, 22, 0.94) 86%, rgba(6, 14, 22, 0.97) 100%);
}

.illu {
	width: 100%;
	height: 100%;
	transition: transform 0.7s var(--tl-ease);
}

.karte:hover .illu,
.karte:focus-within .illu {
	transform: scale(1.06);
}

.illu__pflanze {
	fill: #0f2a1f;
	opacity: 0.85;
}

.karte__inhalt {
	position: relative;
	z-index: 2;
	height: 100%;
	padding: 19px 10px 0 27px;
}

.karte__icon {
	width: 32px;
	height: 32px;
	color: #1aa7f5;
	stroke-width: 1.5;
}

.karte__titel {
	margin-top: 9px;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 21px;
}

.karte__text {
	max-width: 152px;
	margin-top: 10px;
	color: #d7e0ea;
	font-size: 0.825rem;
	line-height: 18.7px;
}

/* Zeilenumbrüche wie im Entwurf */
.karte:nth-child(2) .karte__text { max-width: 160px; }
.karte:nth-child(3) .karte__text { max-width: 136px; }

.karte__link {
	position: absolute;
	left: 25px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	padding-block: 2px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.karte__link::before {
	content: "";
	position: absolute;
	inset: -400px -400px -40px -400px;
}

.karte__link .icon--pfeil {
	width: 15px;
	height: 15px;
	stroke-width: 1.9;
	transition: transform 0.3s var(--tl-ease);
}

.karte:hover .karte__link .icon--pfeil,
.karte__link:focus-visible .icon--pfeil {
	transform: translateX(4px);
}

/* ---------- Ablauf ---------- */
.ablauf {
	background: #ffffff;
}

.ablauf__raster {
	display: grid;
	grid-template-columns: 370px 1fr;
	min-height: 316px;
	padding-top: 30px;
	padding-bottom: 24px;
}

.ablauf__text {
	max-width: 290px;
	margin-top: 8px;
	color: #27313c;
	font-size: 1rem;
	line-height: 21.6px;
}

.ablauf__einleitung .knopf {
	min-width: 268px;
	min-height: 45px;
	margin-top: 17px;
}

.schritte {
	display: grid;
	grid-template-columns: 233px 260px 264px 1fr;
	padding-top: 11px;
	counter-reset: schritt;
}

.schritt {
	position: relative;
}

.schritt:nth-child(1) .schritt__text { max-width: 165px; }
.schritt:nth-child(2) .schritt__text { max-width: 206px; }
.schritt:nth-child(3) .schritt__text { max-width: 195px; }
.schritt:nth-child(4) .schritt__text { max-width: 190px; }

.schritt__nummer {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1.5px solid #1aa7f5;
	border-radius: 50%;
	background: #ffffff;
	color: var(--tl-tinte);
	font-size: 0.9375rem;
	font-weight: 700;
}

.schritt__pfeil {
	position: absolute;
	left: 129px;
	top: 29px;
	width: 40px;
	height: 30px;
	color: #1d3a5c;
	stroke-width: 1.5;
}

.schritt__icon {
	width: 43px;
	height: 43px;
	margin-top: 11px;
	margin-left: 5px;
	color: #1aa7f5;
	stroke-width: 1.4;
}

.schritt:first-child .schritt__icon,
.schritt:first-child .schritt__titel,
.schritt:first-child .schritt__text {
	margin-left: 10px;
}

.schritt__titel {
	margin-top: 10px;
	color: var(--tl-tinte);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 24px;
}

.schritt__text {
	margin-top: 5px;
	color: var(--tl-grau-hell);
	font-size: 1.04rem;
	line-height: 23.4px;
}

/* ---------- Kennzahlen-Band ---------- */
.kennzahlen {
	background: var(--tl-band);
	color: #ffffff;
}

.kennzahlen__liste {
	display: grid;
	grid-template-columns: 308px 336px 328px 1fr;
	align-items: center;
	min-height: 101px;
	padding-left: max(75.6px, env(safe-area-inset-left, 0px));
}

.kennzahl {
	display: flex;
	align-items: center;
	gap: 28px;
}

.kennzahl__icon {
	width: 54px;
	height: 54px;
	stroke-width: 1.3;
}

.kennzahl__text {
	display: grid;
	gap: 2px;
}

.kennzahl__wert {
	display: flex;
	align-items: center;
	font-size: 1.71875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 32px;
	font-variant-numeric: tabular-nums;
}

.kennzahl__wert--platzhalter {
	color: rgba(255, 255, 255, 0.75);
}

.kennzahl__beschreibung {
	font-size: 1.03125rem;
	line-height: 22px;
}

/* ---------- Kundenstimmen ---------- */
.stimmen {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 120% at 100% 100%, rgba(255, 59, 71, 0.08), rgba(0, 0, 0, 0) 60%),
		radial-gradient(50% 120% at 0% 100%, rgba(10, 120, 200, 0.1), rgba(0, 0, 0, 0) 60%),
		var(--tl-nacht-2);
	color: #ffffff;
}

.stimmen__raster {
	display: grid;
	grid-template-columns: 442px 1fr;
	min-height: 281px;
	padding-top: 31px;
	padding-bottom: 24px;
	padding-left: max(74px, env(safe-area-inset-left, 0px));
}

.stimmen .titel-2 {
	margin-top: 10px;
	font-size: 2.03125rem;
	line-height: 37px;
}

.stimmen__text {
	max-width: 430px;
	margin-top: 9px;
	color: #dbe3eb;
	font-size: 1rem;
	line-height: 22.3px;
}

.stimmen__einleitung .knopf {
	min-width: 215px;
	min-height: 45px;
	margin-top: 18px;
}

.stimmen__karussell {
	position: relative;
	min-width: 0;
	padding-top: 26px;
}

.stimmen__steuerung {
	position: absolute;
	top: -17px;
	right: 13px;
	display: flex;
	gap: 23px;
}

.stimmen__knopf {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--tl-radius);
	background: rgba(255, 255, 255, 0.03);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.stimmen__knopf .icon {
	width: 16px;
	height: 16px;
	stroke-width: 1.8;
}

.stimmen__knopf:hover:not([aria-disabled="true"]) {
	border-color: var(--tl-blau);
	background: rgba(0, 167, 254, 0.14);
}

.stimmen__knopf[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.stimmen__spur {
	display: grid;
	grid-auto-columns: calc((100% - 40px) / 3);
	grid-auto-flow: column;
	gap: 20px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.stimmen__spur::-webkit-scrollbar {
	display: none;
}

.stimme {
	position: relative;
	min-height: 196px;
	padding: 17px 16px 14px 14px;
	border: 1px solid rgba(120, 160, 200, 0.18);
	border-radius: var(--tl-radius-karte);
	background: linear-gradient(180deg, rgba(14, 38, 60, 0.72), rgba(8, 26, 41, 0.72));
	scroll-snap-align: start;
	transition: border-color 0.3s ease, transform 0.4s var(--tl-ease);
}

.stimme:hover {
	border-color: rgba(26, 167, 245, 0.55);
	transform: translateY(-3px);
}

.stimme figure {
	display: grid;
	grid-template-columns: 33px 1fr;
	column-gap: 0;
}

.stimme__zeichen {
	width: 24px;
	height: 24px;
	margin-top: 1px;
	color: #1aa7f5;
}

.stimme__zitat {
	color: #e8eef4;
	font-size: 0.84375rem;
	line-height: 20.9px;
}

.stimme__person {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 16px;
}

.stimme__bild {
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
}

.stimme__bild--leer {
	display: inline-grid;
	place-items: center;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.6);
}

.stimme__name {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 19px;
}

.stimme__rolle {
	display: block;
	color: #aab6c3;
	font-size: 0.8125rem;
	line-height: 18px;
}

.stimme .badge-beleg {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
}

.stimme--platzhalter .stimme__zitat {
	padding-right: 62px;
}

.stimme--platzhalter .stimme__zitat {
	color: #b5c1cd;
	font-style: italic;
}

/* ---------- Dialog „Ablauf ansehen“ ---------- */
.ablauf-dialog {
	width: min(880px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	padding: 0;
	overflow: auto;
	border: 1px solid rgba(120, 160, 200, 0.25);
	border-radius: 14px;
	background:
		radial-gradient(70% 90% at 90% 0%, rgba(26, 120, 200, 0.25), rgba(0, 0, 0, 0) 60%),
		var(--tl-nacht);
	color: #ffffff;
	box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8);
}

.ablauf-dialog::backdrop {
	background: rgba(0, 7, 14, 0.75);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ablauf-dialog__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 20px 0 32px;
}

.ablauf-dialog__titel {
	font-size: 1.25rem;
	font-weight: 700;
}

.ablauf-dialog__zu {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.ablauf-dialog__video {
	width: calc(100% - 64px);
	margin: 20px 32px 0;
	border-radius: 8px;
}

.ablauf-dialog__fuss {
	display: flex;
	justify-content: flex-end;
	padding: 0 32px 28px;
}

.praesentation {
	padding: 12px 32px 24px;
}

.praesentation__folien {
	position: relative;
	display: grid;
}

.folie {
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: center;
	gap: 40px;
	min-height: 260px;
	padding-block: 16px;
}

.folie[hidden] {
	display: none;
}

.folie__bild {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	max-width: 100%;
}

.folie__ring {
	position: absolute;
	inset: 12px;
	border: 1.5px solid rgba(26, 167, 245, 0.6);
	border-radius: 50%;
	box-shadow: 0 0 60px rgba(26, 167, 245, 0.25), inset 0 0 40px rgba(26, 167, 245, 0.15);
}

.folie__icon {
	width: 92px;
	height: 92px;
	color: #1aa7f5;
	stroke-width: 1.2;
}

.folie__nummer {
	color: var(--tl-blau-hell);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.folie__titel {
	margin-top: 8px;
	font-family: var(--tl-schrift-titel);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
}

.folie__beschreibung {
	max-width: 46ch;
	margin-top: 14px;
	color: var(--tl-text-hell);
	font-size: 1.125rem;
	line-height: 1.55;
}

.praesentation__leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 8px;
}

.praesentation__fortschritt {
	display: flex;
	flex: 1;
	gap: 8px;
	min-width: 200px;
}

.praesentation__punkt {
	position: relative;
	flex: 1;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.praesentation__punkt::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-50%);
}

.praesentation__fuellung {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--tl-blau);
	transform: translateY(-50%) scaleX(0);
	transform-origin: left;
}

.praesentation__punkt.ist-erledigt .praesentation__fuellung,
.praesentation__punkt[aria-current="step"] .praesentation__fuellung {
	transform: translateY(-50%) scaleX(1);
}

.praesentation__knoepfe {
	display: flex;
	align-items: center;
	gap: 12px;
}