/*
 * Anpassung an schmalere Bildschirme. Der Entwurf zeigt nur 1440 px,
 * darunter ordnen sich die Abschnitte in derselben Reihenfolge neu.
 */

@media (max-width: 1439.98px) {
	:root {
		--tl-rand-l: clamp(20px, 4.86vw, 70px);
		--tl-rand-r: clamp(20px, 2.78vw, 40px);
	}

	.kopf__innen {
		padding-left: max(clamp(16px, 4.4vw, 63px), env(safe-area-inset-left, 0px));
	}

	/* Foto bündig rechts, schmaler, damit der Laptop nicht an die Knöpfe rückt; unten läuft es aus */
	.held__bild {
		--rand-unten: linear-gradient(0deg, transparent 0, #000 12%);
		right: 0;
		left: auto;
		width: min(810px, calc(100% - 590px));
		-webkit-mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke), var(--rand-unten);
		mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke), var(--rand-unten);
	}

	.fuss__raster {
		grid-template-columns: 1.45fr 1fr 0.84fr 1.07fr 1fr;
		column-gap: 16px;
	}
}

@media (max-width: 1359.98px) {
	.kopf .knopf--telefon {
		display: none;
	}
}

@media (max-width: 1299.98px) {
	.loesungen__raster {
		grid-template-columns: 1fr;
		row-gap: 32px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.loesungen__einleitung {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 48px;
		align-items: start;
	}

	.loesungen__einleitung .ueberzeile,
	.loesungen__einleitung .titel-2 {
		grid-column: 1;
	}

	.loesungen__text {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: end;
		max-width: none;
	}

	.loesungen__einleitung .knopf {
		grid-column: 2;
		justify-self: start;
	}

	.loesungen__karten {
		margin-top: 0;
	}

	.loesungen__karten .karte .karte__text {
		max-width: none;
	}

	.schritte {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 20px;
	}

	.schritte .schritt .schritt__text {
		max-width: none;
	}

	.kennzahlen__liste {
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		gap: 24px;
		padding-left: var(--tl-rand-l);
	}

	.kennzahl {
		gap: 18px;
	}

	.kennzahl__icon {
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 1199.98px) {
	.kopf__innen {
		height: 80px;
	}

	/* Ohne Skript: Navigation als umbrechende Liste im Kopf. .js-frueh setzt anzeige-frueh.js vor dem ersten Zeichnen,
	   damit die Seite nicht nachrückt, wenn main.js lädt (CLS, Phase 5). */
	html:not(.js):not(.js-frueh) .kopf {
		position: absolute;
	}

	html:not(.js):not(.js-frueh) .kopf__innen {
		flex-wrap: wrap;
		height: auto;
		padding-block: 8px;
	}

	html:not(.js):not(.js-frueh) .kopf__nav {
		order: 3;
		width: 100%;
		margin: 0;
	}

	html:not(.js):not(.js-frueh) .kopf__liste {
		flex-wrap: wrap;
		gap: 0 20px;
	}

	html:not(.js):not(.js-frueh) .held__text {
		padding-top: 230px;
	}

	.kopf .logo,
	.kopf.ist-fest .logo {
		margin-top: 0;
		transform: none;
	}

	.kopf .logo__bild {
		height: 58px;
	}

	.held {
		min-height: 0;
	}

	.held__raster {
		display: grid;
	}

	.held__text {
		width: auto;
		max-width: 640px;
		padding-top: 120px;
	}

	/* Foto unter dem Text, bis an den rechten Rand, oben knapper geschnitten */
	.held__bild {
		--rand-oben: linear-gradient(180deg, transparent 0, #000 18%);
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: min(100% + max(var(--tl-rand-r), env(safe-area-inset-right, 0px)), 900px);
		aspect-ratio: 1728 / 1000;
		margin: -12px calc(-1 * max(var(--tl-rand-r), env(safe-area-inset-right, 0px))) 0 auto;
	}

	/* oberen Teil des Fotos abschneiden: Bild samt Bildschirmen und Lichtern unten ausrichten */
	.held__bild {
		overflow: hidden;
	}

	.held__bild-innen {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.held__merkmale {
		display: grid;
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		margin-top: 24px;
		padding-bottom: 48px;
	}

	.ablauf__raster {
		grid-template-columns: 1fr;
		row-gap: 40px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.ablauf__text {
		max-width: 52ch;
	}

	.stimmen__raster {
		grid-template-columns: 1fr;
		row-gap: 24px;
		padding-top: 56px;
		padding-bottom: 56px;
		padding-left: var(--tl-rand-l);
	}

	.stimmen__text {
		max-width: 52ch;
	}

	.stimmen__karussell {
		padding-top: 56px;
	}

	.stimmen__steuerung {
		top: 0;
		left: 0;
		right: auto;
		gap: 12px;
	}

	.stimmen__knopf {
		width: 44px;
		height: 44px;
	}

	.abschluss__raster {
		flex-wrap: wrap;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.abschluss__aktion {
		margin-right: 0;
		justify-items: start;
	}

	.fuss__raster {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 32px;
		padding-top: 48px;
		padding-bottom: 32px;
		padding-left: var(--tl-rand-l);
	}

	.fuss__marke {
		grid-column: 1 / -1;
	}

	.fuss__text {
		max-width: 46ch;
	}

	.kennzahlen__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.systeme .behaelter {
		padding-bottom: 24px;
	}

	.systeme__liste {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px 28px;
		padding: 0;
	}
}

@media (max-width: 1023.98px) {
	.loesungen__einleitung {
		display: block;
	}

	.loesungen__text {
		max-width: 60ch;
	}

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


	.stimmen__spur {
		grid-auto-columns: calc((100% - 20px) / 2);
	}

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

/* Vier Merkmale passen erst ab 900 px in eine Zeile, darunter zwei Spalten */
@media (max-width: 899.98px) {
	.held__merkmale {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}

	.merkmal,
	.merkmal + .merkmal,
	.merkmal:not(:last-child) {
		padding: 0;
		border: 0;
	}
}

@media (max-width: 767.98px) {
	.kopf__innen {
		height: 68px;
	}

	/* Zwei Kundenlogos je Zeile */
	.systeme__logos {
		gap: 16px 32px;
	}

	.systeme__logo {
		max-width: 130px;
		height: 30px;
	}

	/* Foto über die ganze Breite */
	.held__bild {
		width: auto;
		margin-right: calc(-1 * max(var(--tl-rand-r), env(safe-area-inset-right, 0px)));
		margin-left: calc(-1 * max(var(--tl-rand-l), env(safe-area-inset-left, 0px)));
	}

	.kopf .logo__bild {
		height: 44px;
	}

	.kopf.ist-fest .kopf__innen {
		height: 64px;
	}

	.held__text {
		padding-top: 100px;
	}

	.held .ueberzeile {
		font-size: 0.8125rem;
		line-height: 1.38462; /* 18px wie zuvor fest, wächst mit der Schrift */
	}

	.held__titel {
		font-size: clamp(2rem, 1.1rem + 4.4vw, 3.1875rem);
		line-height: 1.08;
	}

	.held__einleitung {
		font-size: 1.0625rem;
		line-height: 1.55;
	}

	.held__knoepfe {
		gap: 12px;
	}

	.held__knoepfe .knopf {
		width: 100%;
		min-width: 0;
	}

	.held__merkmale {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
		padding-bottom: 56px;
	}

	.merkmal,
	.merkmal + .merkmal,
	.merkmal:not(:last-child) {
		padding: 0;
		border: 0;
	}

	.merkmal {
		gap: 12px;
		font-size: 0.78125rem;
		line-height: 1.576; /* 19,7px wie zuvor fest, wächst mit der Schrift */
	}

	.merkmal__icon {
		width: 40px;
		height: 40px;
	}

	.bewegung-schalter {
		bottom: 16px;
	}

	.systeme .behaelter {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.systeme__liste {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px 22px;
		padding: 0;
	}

	.systeme__eintrag {
		font-size: 1rem;
	}

	.titel-2 {
		font-size: 1.75rem;
		line-height: 1.2;
	}

	.schritte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}

	.schritt__pfeil {
		display: none;
	}

	.abschluss__titel {
		font-size: 1.375rem;
		line-height: 1.3;
	}

	.abschluss .ueberzeile--hell {
		color: #ffffff;
	}

	.abschluss .knopf--gross {
		min-width: 0;
		width: 100%;
	}

	.abschluss__aktion {
		width: 100%;
		justify-items: stretch;
		text-align: center;
	}

	.ablauf-dialog__kopf {
		padding: 16px 16px 0 20px;
	}

	.praesentation {
		padding: 8px 20px 20px;
	}

	.folie {
		grid-template-columns: 1fr;
		gap: 12px;
		min-height: 0;
	}

	.folie__bild {
		width: 140px;
	}

	.folie__icon {
		width: 64px;
		height: 64px;
	}

	.folie__titel {
		font-size: 1.75rem;
	}

	.ablauf-dialog__fuss {
		padding: 0 20px 20px;
	}

	.ablauf-dialog__fuss .knopf {
		width: 100%;
	}
}

@media (max-width: 599.98px) {
	.kopf .knopf--kopf {
		display: none;
	}

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

	.karte {
		height: 280px;
	}

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

	.stimmen__spur {
		grid-auto-columns: 86%;
	}

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

	.fuss__kontakt .knopf {
		width: 100%;
	}
}

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

	.schritt {
		display: grid;
		grid-template-columns: 46px 1fr;
		column-gap: 16px;
		align-items: start;
	}

	.schritt__nummer {
		grid-row: 1 / span 3;
	}

	.schritt__icon {
		display: none;
	}

	.schritt__titel,
	.schritt:first-child .schritt__titel,
	.schritt:first-child .schritt__text {
		margin: 0;
	}

	.schritt__titel {
		align-self: center;
	}
}

/* „Automatisieren“ passt erst ab 386 px in eine halbe Spalte, darunter stehen die Merkmale untereinander */
@media (max-width: 385.98px) {
	.held__merkmale {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 374.98px) {
	.kopf .logo__bild {
		height: 38px;
	}
}