/*
 * Kopfbild der Startseite: Foto aus dem Referenzentwurf mit lebenden Bildschirmen und Lichtern.
 * Das Foto (assets/img/kopfbild-*.webp) enthält dieselben Bildschirme schon eingerechnet. Mit Skript und
 * erlaubter Bewegung legt sich das HTML aus template-parts/kopfbild-bildschirme.php perspektivisch genau
 * darüber und bewegt sich (Klasse .kopfbild-lebt an <html>, gesetzt von main.js).
 * Maße der Bildschirme in px, das Foto hat 1728 px Breite; --massstab rechnet auf die angezeigte Breite um.
 * Farben hier sind Bildschirminhalt, keine Seitenfarben, deshalb nicht in tokens.css.
 */

/* ---------- Lage über dem Foto ---------- */
.held__bild-innen {
	--massstab: 1;
	position: relative;
}

.held__bild-innen > img {
	display: block;
	width: 100%;
	height: auto;
}

.held__schirm,
.held__lichter {
	display: none;
}

.kopfbild-lebt .held__schirm {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	transform-origin: 0 0;
	backface-visibility: hidden;
}

/*
 * Ecken der Bildschirme im Foto, vermessen im Entwurf und als Abbildung von Bildschirm (px) auf Foto (px).
 * Erzeugt von werkzeuge/kopfbild-bauen.py (Ausgabe „CSS“), dort stehen auch die Ecken.
 */
.held__schirm--laptop {
	transform: scale(var(--massstab)) matrix3d(1.0091141, -0.17759011, 0, -0.0002718747, -0.30704899, 1.2659162, 0, -0.00010707348, 0, 0, 1, 0, 586.5, 348.29999, 0, 1);
}

.held__schirm--handy {
	transform: scale(var(--massstab)) matrix3d(0.96571335, -0.09301369, 0, -0.00017082404, -0.47425347, 1.1919082, 0, -0.00015096345, 0, 0, 1, 0, 1442.1, 544.5, 0, 1);
}

/* Licht wie im Foto: leicht gedämpft, Schimmer von links oben (dieselbe Schicht ist ins Foto eingerechnet) */
.held__schirm::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		linear-gradient(120deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0) 70%),
		rgba(4, 12, 22, 0.07);
	pointer-events: none;
}

.held__schirm--handy {
	overflow: hidden;
	border-radius: 13px;
}

/* Lichter aus dem Foto (template-parts/kopfbild-lichter.php), hellen nur auf */
.kopfbild-lebt .held__lichter {
	position: absolute;
	inset: 0;
	display: block;
	mix-blend-mode: screen;
	pointer-events: none;
}

.held__linien,
.held__knoten {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Bildschirminhalte ---------- */
.held__schirm {
	--u: 1px;
	--g-blau: #1a8fe0;
	--g-blau-hell: #9ccff5;
	--g-text: #0f1d2c;
	--g-grau: #6b7c8f;
	--g-grau-hell: #8a99aa;
	--g-flaeche: #f3f6fa;
	--g-karte: #fff;
	--g-linie: #e3e9f0;
	font-family: var(--tl-schrift);
	color: var(--g-text);
	-webkit-font-smoothing: antialiased;
}

.held__schirm p {
	margin: 0;
}

.held__schirm .icon {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.laptop__bildschirm {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: calc(2 * var(--u));
	background: var(--g-flaeche);
}

/* Spiegelung im Glas */
.laptop__bildschirm::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 42%);
	pointer-events: none;
}

/* ---------- Dashboard ---------- */
.dash {
	display: grid;
	grid-template-columns: calc(118 * var(--u)) 1fr;
	height: 100%;
	background: var(--g-flaeche);
	font-size: calc(6 * var(--u));
	line-height: 1.3;
}

.dash__seite {
	display: flex;
	flex-direction: column;
	padding: calc(12 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));
	background: linear-gradient(180deg, #0c1b2d 0%, #091522 100%);
	color: #a9bccf;
}

.dash__marke {
	display: flex;
	align-items: center;
	gap: calc(5 * var(--u));
	margin: 0 0 calc(14 * var(--u)) calc(4 * var(--u));
	color: #fff;
	font-size: calc(9 * var(--u));
	font-weight: 700;
	letter-spacing: 0.01em;
}

.dash__menue {
	display: grid;
	gap: calc(2 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.dash__menue li {
	display: flex;
	align-items: center;
	gap: calc(6 * var(--u));
	padding: calc(4.6 * var(--u)) calc(6 * var(--u));
	border-radius: calc(5 * var(--u));
	font-size: calc(6.4 * var(--u));
	font-weight: 500;
}

.dash__menue li.ist-aktiv {
	background: rgba(26, 143, 224, 0.2);
	color: #fff;
	box-shadow: inset calc(1.6 * var(--u)) 0 0 #38b8ff;
}

.dash__menue .icon {
	flex: none;
	width: calc(8 * var(--u));
	height: calc(8 * var(--u));
}

.dash__hilfe {
	display: flex;
	gap: calc(5 * var(--u));
	align-items: flex-start;
	margin-top: auto;
	padding: calc(7 * var(--u));
	border-radius: calc(6 * var(--u));
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.08);
	color: #c7d4e2;
	font-size: calc(5.6 * var(--u));
	line-height: 1.4;
}

.dash__hilfe .icon {
	flex: none;
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
	color: #38b8ff;
}

.dash__haupt {
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	gap: calc(8 * var(--u));
	min-width: 0;
	padding: calc(11 * var(--u)) calc(12 * var(--u));
}

.dash__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dash__titel {
	font-size: calc(11 * var(--u));
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dash__untertitel {
	margin-top: calc(1 * var(--u));
	color: var(--g-grau);
	font-size: calc(5.8 * var(--u));
}

.dash__werkzeuge {
	display: flex;
	align-items: center;
	gap: calc(5 * var(--u));
}

.dash__suche,
.dash__glocke {
	display: flex;
	align-items: center;
	height: calc(15 * var(--u));
	border-radius: calc(8 * var(--u));
	background: var(--g-karte);
	box-shadow: 0 0 0 calc(0.5 * var(--u)) #dbe3ec;
	color: var(--g-grau-hell);
}

.dash__suche {
	gap: calc(3.5 * var(--u));
	width: calc(90 * var(--u));
	padding-inline: calc(5.5 * var(--u));
	font-size: calc(5.6 * var(--u));
}

.dash__glocke {
	justify-content: center;
	width: calc(15 * var(--u));
	border-radius: 50%;
}

.dash__suche svg,
.dash__glocke svg {
	width: calc(7 * var(--u));
	height: calc(7 * var(--u));
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dash__person {
	display: grid;
	place-items: center;
	width: calc(15 * var(--u));
	height: calc(15 * var(--u));
	border-radius: 50%;
	background: linear-gradient(135deg, #38b8ff, #0a6fd1);
	color: #fff;
	font-size: calc(5.4 * var(--u));
	font-weight: 700;
}

.dash__kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(7 * var(--u));
}

.dash__kachel,
.dash__karte {
	border-radius: calc(7 * var(--u));
	background: var(--g-karte);
	box-shadow:
		0 calc(0.6 * var(--u)) calc(2 * var(--u)) rgba(16, 40, 70, 0.07),
		0 0 0 calc(0.5 * var(--u)) var(--g-linie);
}

.dash__kachel {
	display: grid;
	grid-template-columns: calc(17 * var(--u)) minmax(0, 1fr) auto;
	gap: calc(4 * var(--u)) calc(5 * var(--u));
	align-items: center;
	padding: calc(7 * var(--u));
}

.dash__kachel-icon,
.dash__liste-icon,
.handy__icon {
	display: grid;
	place-items: center;
	border-radius: calc(5 * var(--u));
	background: #e6f2fd;
	color: var(--g-blau);
}

.dash__kachel-icon {
	width: calc(17 * var(--u));
	height: calc(17 * var(--u));
}

.dash__kachel-icon .icon {
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
}

.dash__kachel-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dash__kachel-name {
	color: var(--g-grau);
	font-size: calc(5.4 * var(--u));
}

.dash__kachel-wert,
.dash__liste-text > span,
.handy__text b,
.handy__text small {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dash__kachel-wert {
	font-size: calc(6.8 * var(--u));
	font-weight: 700;
}

.dash__funke {
	grid-column: 1 / -1;
	width: 100%;
	height: calc(12 * var(--u));
}

.dash__funke path {
	fill: none;
	stroke: var(--g-blau);
	stroke-width: 1.4;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.chip {
	flex: none;
	padding: calc(1.2 * var(--u)) calc(4 * var(--u));
	border-radius: calc(8 * var(--u));
	background: #eef3f8;
	color: #405468;
	font-size: calc(4.8 * var(--u));
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
}

.chip--neu {
	background: #e3f1fd;
	color: #0b62b0;
}

.chip--ok {
	background: #e2f6eb;
	color: #12723f;
}

.chip--warten {
	background: #fff2d9;
	color: #8a5200;
}

.dash__diagramme,
.dash__unten {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: calc(7 * var(--u));
	min-height: 0;
}

.dash__karte {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: calc(7 * var(--u)) calc(8 * var(--u));
}

.dash__kartenkopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: calc(5 * var(--u));
}

.dash__kartentitel {
	font-size: calc(6.6 * var(--u));
	font-weight: 700;
}

.dash__legende {
	display: flex;
	align-items: center;
	gap: calc(3 * var(--u));
	color: var(--g-grau);
	font-size: calc(5 * var(--u));
}

.dash__legende i {
	width: calc(6 * var(--u));
	height: calc(2 * var(--u));
	margin-left: calc(3 * var(--u));
	border-radius: calc(1 * var(--u));
	background: var(--g-blau);
}

.dash__legende i.hell {
	background: var(--g-blau-hell);
}

.dash__mehr {
	color: var(--g-blau);
	font-size: calc(5.4 * var(--u));
	font-weight: 600;
}

.dash__flaeche-huelle {
	flex: 1;
	min-height: 0;
}

.dash__linie {
	display: block;
	width: 100%;
	height: 100%;
}

.dash__raster {
	fill: none;
	stroke: #e8eef4;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.dash__flaeche {
	fill: url(#dash-flaeche);
}

.dash__kurve {
	fill: none;
	stroke: var(--g-blau);
	stroke-width: 1.8;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.dash__kurve--hell {
	stroke: var(--g-blau-hell);
	stroke-width: 1.4;
}

.dash__achse {
	display: flex;
	justify-content: space-between;
	margin-top: calc(4 * var(--u));
	color: var(--g-grau-hell);
	font-size: calc(5 * var(--u));
}

.dash__karte--balken .dash__achse span {
	flex: 1;
	text-align: center;
}

.dash__balken {
	display: flex;
	flex: 1;
	align-items: flex-end;
	gap: calc(5 * var(--u));
	min-height: 0;
	padding-top: calc(4 * var(--u));
	background: repeating-linear-gradient(180deg, transparent 0 calc(22 * var(--u) - 1px), #eef2f7 calc(22 * var(--u) - 1px) calc(22 * var(--u)));
}

.dash__balken i {
	flex: 1;
	border-radius: calc(2.5 * var(--u)) calc(2.5 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u));
	background: linear-gradient(180deg, #45b9ff 0%, #1a7fd6 100%);
	transform-origin: bottom;
}

.dash__balken i:nth-child(1) { height: 48%; }
.dash__balken i:nth-child(2) { height: 66%; }
.dash__balken i:nth-child(3) { height: 57%; }
.dash__balken i:nth-child(4) { height: 82%; }
.dash__balken i:nth-child(5) { height: 74%; }
.dash__balken i:nth-child(6) { height: 26%; background: linear-gradient(180deg, #a9d8fa, #7cc0f2); }
.dash__balken i:nth-child(7) { height: 18%; background: linear-gradient(180deg, #a9d8fa, #7cc0f2); }

.dash__liste {
	display: grid;
	gap: calc(4 * var(--u));
	height: calc(53 * var(--u));
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	align-content: start;
}

.dash__liste li {
	display: flex;
	align-items: center;
	gap: calc(5 * var(--u));
	height: calc(15 * var(--u));
}

.dash__liste-icon {
	flex: none;
	width: calc(14 * var(--u));
	height: calc(14 * var(--u));
	border-radius: calc(4 * var(--u));
}

.dash__liste-icon .icon {
	width: calc(7.5 * var(--u));
	height: calc(7.5 * var(--u));
}

.dash__liste-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.dash__liste-text > span {
	font-size: calc(6 * var(--u));
	font-weight: 600;
}

.dash__liste-text small {
	color: var(--g-grau-hell);
	font-size: calc(4.8 * var(--u));
}

.dash__karte--freigabe {
	justify-content: space-between;
}

.dash__freigabe-text {
	color: #33475b;
	font-size: calc(6 * var(--u));
	line-height: 1.4;
}

.dash__freigabe-knoepfe {
	display: flex;
	gap: calc(4 * var(--u));
}

.dash__knopf {
	padding: calc(3.4 * var(--u)) calc(7 * var(--u));
	border-radius: calc(5 * var(--u));
	background: var(--g-blau);
	color: #fff;
	font-size: calc(5.6 * var(--u));
	font-weight: 600;
}

.dash__knopf--leise {
	background: #e9f1f9;
	color: #1a5f9e;
}

.handy__bildschirm {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 0 calc(8 * var(--u)) calc(5 * var(--u));
	border: calc(3.5 * var(--u)) solid #050608;
	border-radius: calc(27 * var(--u));
	background: var(--g-flaeche);
}

.handy__bildschirm::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 38%);
	pointer-events: none;
}

.handy__status {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: calc(21 * var(--u));
}

.handy__insel {
	position: absolute;
	top: calc(5 * var(--u));
	left: 50%;
	width: calc(46 * var(--u));
	height: calc(13 * var(--u));
	margin-left: calc(-23 * var(--u));
	border-radius: calc(8 * var(--u));
	background: #050608;
}

.handy__signal {
	display: flex;
	align-items: flex-end;
	gap: calc(0.8 * var(--u));
	height: calc(6 * var(--u));
	margin-right: calc(2 * var(--u));
}

.handy__signal i {
	width: calc(1.5 * var(--u));
	border-radius: calc(0.4 * var(--u));
	background: var(--g-text);
}

.handy__signal i:nth-child(1) { height: 30%; }
.handy__signal i:nth-child(2) { height: 52%; }
.handy__signal i:nth-child(3) { height: 76%; }
.handy__signal i:nth-child(4) { height: 100%; }

.handy__signal svg {
	width: calc(12 * var(--u));
	height: calc(6 * var(--u));
	margin-left: calc(3 * var(--u));
	fill: none;
	stroke: var(--g-text);
	stroke-width: 1;
}

.handy__signal svg .voll {
	fill: var(--g-text);
	stroke: none;
}

.handy__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: calc(8 * var(--u)) 0 calc(7 * var(--u));
}

.handy__titel {
	font-size: calc(12.5 * var(--u));
	font-weight: 700;
	letter-spacing: -0.01em;
}

.handy__reiter {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: calc(7 * var(--u));
	padding: calc(1.6 * var(--u));
	border-radius: calc(6 * var(--u));
	background: #e4eaf1;
	color: #5d6f82;
	font-size: calc(5.6 * var(--u));
	font-weight: 600;
	text-align: center;
}

.handy__reiter span {
	padding: calc(3 * var(--u)) 0;
	border-radius: calc(5 * var(--u));
}

.handy__reiter .ist-aktiv {
	background: var(--g-karte);
	color: var(--g-text);
	box-shadow: 0 calc(0.5 * var(--u)) calc(1.5 * var(--u)) rgba(16, 40, 70, 0.12);
}

.handy__liste {
	display: grid;
	flex: 1;
	gap: calc(5 * var(--u));
	align-content: start;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
}

.handy__liste li {
	display: flex;
	align-items: center;
	gap: calc(5 * var(--u));
	padding: calc(5.5 * var(--u));
	border-radius: calc(7 * var(--u));
	background: var(--g-karte);
	box-shadow:
		0 calc(0.6 * var(--u)) calc(2 * var(--u)) rgba(16, 40, 70, 0.07),
		0 0 0 calc(0.5 * var(--u)) var(--g-linie);
}

.handy__icon {
	flex: none;
	width: calc(17 * var(--u));
	height: calc(17 * var(--u));
}

.handy__icon .icon {
	width: calc(8.5 * var(--u));
	height: calc(8.5 * var(--u));
}

.handy__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.handy__text b {
	font-size: calc(6.4 * var(--u));
	font-weight: 700;
}

.handy__text small {
	color: var(--g-grau-hell);
	font-size: calc(5 * var(--u));
}

.handy__meldung {
	position: absolute;
	right: calc(9 * var(--u));
	bottom: calc(31 * var(--u));
	left: calc(9 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(5 * var(--u));
	padding: calc(6.5 * var(--u)) calc(7 * var(--u));
	border-radius: calc(9 * var(--u));
	background: rgba(15, 29, 44, 0.96);
	color: #fff;
	font-size: calc(5.8 * var(--u));
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(5, 15, 30, 0.35);
}

.handy__meldung i {
	flex: none;
	width: calc(7 * var(--u));
	height: calc(7 * var(--u));
	border-radius: 50%;
	background: #2ccf7f;
	box-shadow: 0 0 0 calc(2 * var(--u)) rgba(44, 207, 127, 0.25);
}

.handy__leiste {
	display: flex;
	justify-content: space-around;
	margin-top: calc(4 * var(--u));
	padding-top: calc(6 * var(--u));
	border-top: calc(0.5 * var(--u)) solid var(--g-linie);
	color: #9aaabb;
}

.handy__leiste .icon {
	width: calc(9.5 * var(--u));
	height: calc(9.5 * var(--u));
}

.handy__leiste .icon:first-child {
	color: var(--g-blau);
}

/* Bildschirm des Laptops: 569 x 355,6, ohne Rundung und Spiegelung */
.laptop__bildschirm {
	width: calc(569 * var(--u));
	border-radius: 0;
}

/* Bildschirm des Handys ohne Rahmen: 154 x 330 */
.handy__bildschirm {
	box-sizing: border-box;
	width: calc(154 * var(--u));
	height: calc(330 * var(--u));
	border: 0;
	border-radius: 0;
}

.laptop__bildschirm::after,
.handy__bildschirm::after {
	display: none;
}

.dash__marke img {
	display: block;
	width: calc(96 * var(--u));
	height: auto;
}