/*
 * Bewegte Motive im Seitenkopf der Branchenseiten (template-parts/branchen/): Tablet mit Anfrage (Handwerk),
 * Terminkalender am Empfang (Praxen), Netz der Programme (KMU). Die Oberflächen skalieren über
 * Container-Einheiten mit ihrer Fläche. Der Ablauf steht in bewegung.css, ohne Bewegung gilt der Endzustand.
 */

/* ---------- Gerät ---------- */
.schirm {
	--format: 4 / 3;
	--seiten: 1.3333;
	width: min(100cqw, calc(100cqh * var(--seiten)));
	aspect-ratio: var(--format);
	padding: 10px;
	border-radius: 20px;
	background: linear-gradient(145deg, #1b2b3b 0%, #0a131d 55%, #05090f 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 34px 70px -24px rgba(0, 0, 0, 0.8),
		0 0 70px -16px rgba(60, 184, 255, 0.4);
	transform: rotateY(-14deg) rotateX(5deg);
	container-type: inline-size; /* Schrift innen in Prozent der Gerätebreite */
}

.schirm--monitor {
	--format: 16 / 10;
	--seiten: 1.6;
	padding: 8px;
	border-radius: 12px;
}

.schirm__flaeche {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 11px;
	background: #f3f6fa;
	color: #0f1d2c;
	font-family: var(--tl-schrift);
	font-size: 2.15cqw;
	line-height: 1.3;
}

.schirm--monitor .schirm__flaeche {
	border-radius: 5px;
	font-size: 2.2cqw;
}

/* Spiegelung auf dem Glas */
.schirm__flaeche::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 24%, rgba(255, 255, 255, 0) 40%);
	pointer-events: none;
}

.schirm .icon {
	width: 1.5em;
	height: 1.5em;
	color: #1a8fe0;
}

.schirm__marke {
	width: auto;
	height: 1.7em;
}

.schirm__chip {
	flex: none;
	margin-left: auto;
	padding: 0.25em 0.8em;
	border-radius: 2em;
	background: #e3f1fd;
	color: #0b62b0;
	font-size: 0.82em;
	font-weight: 600;
	white-space: nowrap;
}

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

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

/* ---------- Handwerk: Anfrage wird zum Angebotsentwurf ---------- */
.schirm__kopf {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.8em 1.2em;
	background: linear-gradient(180deg, #0c1b2d 0%, #091522 100%);
}

.schirm__titel {
	padding-left: 0.9em;
	border-left: 1px solid rgba(169, 188, 207, 0.35);
	color: #a9bccf;
	font-weight: 600;
}

.schirm__inhalt {
	position: relative;
	flex: 1;
	padding: 1.1em 1.2em;
}

.sk {
	padding: 0.9em 1em;
	border-radius: 0.8em;
	background: #ffffff;
	box-shadow: 0 0.2em 0.8em rgba(15, 29, 44, 0.08);
}

.sk__kopf {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0.6em;
}

.sk__liste {
	display: grid;
	gap: 0.35em;
}

.sk__zeile {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.35em 0.5em;
	border-radius: 0.5em;
	background: #f3f6fa;
}

.sk__name {
	width: 8.4em;
	color: #6b7c8f;
}

.sk__wert {
	font-weight: 600;
	white-space: nowrap;
}

.sk__fotos {
	display: flex;
	gap: 0.35em;
}

.sk__fotos i {
	width: 2.2em;
	height: 1.5em;
	border-radius: 0.3em;
	background: linear-gradient(135deg, #9ccff5, #4d8fc4 60%, #2f6a99);
}

.schirm .sk__haken {
	margin-left: auto;
	color: #1a9a59;
}

.sk__fuss {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.6em;
	color: #12723f;
	font-size: 0.9em;
	font-weight: 600;
}

.schirm .sk__fuss .icon {
	color: #1a9a59;
}

/* Im Endzustand liegt der Entwurf vor der Anfrage */
.sk--anfrage {
	opacity: 0.7;
	scale: 0.97;
	translate: 0 -2%;
}

.sk--angebot {
	position: absolute;
	right: 1.2em;
	bottom: 1.1em;
	left: 2.6em;
	box-shadow: 0 0.6em 2em rgba(15, 29, 44, 0.22);
}

.sk__posten {
	display: grid;
	gap: 0.45em;
	margin-bottom: 0.8em;
}

.sk__posten li {
	display: flex;
	align-items: center;
	gap: 0.8em;
	color: #6b7c8f;
}

.sk__posten span {
	width: 6.4em;
}

.sk__posten i {
	flex: 1;
	height: 0.55em;
	border-radius: 1em;
	background: #e3e9f0;
	transform-origin: left center;
}

.sk__aktion {
	display: flex;
	align-items: center;
	gap: 0.8em;
}

.sk__knopf {
	padding: 0.5em 1em;
	border-radius: 0.5em;
	background: #00a7fe;
	color: #08111b;
	font-weight: 700;
}

.sk__hinweis {
	display: flex;
	align-items: center;
	gap: 0.4em;
	color: #6b7c8f;
	font-size: 0.88em;
}

/* ---------- Praxen: Terminkalender am Empfang ---------- */
.kal {
	display: grid;
	grid-template-columns: 4.2em 1fr;
	height: 100%;
}

.kal__seite {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8em;
	padding: 0.9em 0;
	background: #0f1d2c;
}

.kal__seite .schirm__marke {
	width: 2.6em;
	height: auto;
	object-fit: cover;
	object-position: left center;
	aspect-ratio: 1;
}

.kal__menue {
	display: grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 0.6em;
}

.kal__menue.ist-aktiv {
	background: rgba(60, 184, 255, 0.18);
}

.schirm .kal__menue .icon {
	color: #9ccff5;
}

.kal__haupt {
	display: flex;
	flex-direction: column;
	padding: 1em 1.2em;
}

.kal__kopf {
	display: flex;
	align-items: baseline;
	gap: 0.8em;
	margin-bottom: 0.8em;
}

.kal__kopf b {
	font-size: 1.25em;
}

.kal__kopf span:not(.schirm__chip) {
	color: #6b7c8f;
}

.kal__raster {
	display: grid;
	flex: 1;
	grid-template-columns: 5.6em repeat(5, minmax(0, 1fr));
	grid-template-rows: auto 1fr 1fr;
	gap: 0.45em;
}

.kal__tag {
	color: #6b7c8f;
	font-weight: 600;
	text-align: center;
}

.kal__teil {
	align-self: center;
	color: #6b7c8f;
	font-size: 0.9em;
}

.kal__spalte {
	display: grid;
	gap: 0.35em;
}

.kal__termin {
	position: relative;
	display: grid;
	place-items: center;
	padding: 0.2em;
	overflow: hidden;
	border-left: 0.25em solid #1a8fe0;
	border-radius: 0.35em;
	background: #e3f1fd;
	color: #0b4f8c;
	font-size: 0.85em;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}

.kal__termin--leer {
	border: 1px dashed #c9d5e1;
	background: transparent;
}

.kal__termin--wieder {
	border: 1px dashed #1a9a59;
	background: #e2f6eb;
	color: #12723f;
	line-height: 1.05;
	text-align: center;
	white-space: normal;
}

.kal__meldung {
	position: absolute;
	right: 0.9em;
	bottom: 0.9em;
	display: flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.7em 1em;
	border-radius: 0.7em;
	background: #0f1d2c;
	color: #ffffff;
	box-shadow: 0 0.6em 1.8em rgba(15, 29, 44, 0.35);
}

.kal__meldung span {
	display: grid;
	color: #9ccff5;
	font-size: 0.9em;
}

.kal__meldung b {
	color: #ffffff;
	font-size: 1.1em;
}

.schirm .kal__meldung .icon {
	color: #3cb8ff;
}

/* ---------- KMU: Programme verbinden ---------- */
.netz {
	width: min(100cqw, calc(100cqh * 4 / 3));
	height: auto;
	overflow: visible;
}

.netz__linie {
	fill: none;
	stroke: #3cb8ff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 50;
	opacity: 0.7;
}

.netz__wabe {
	fill: rgba(8, 26, 41, 0.92);
	stroke: #3cb8ff;
	stroke-width: 1.5;
}

.netz__wabe--mitte {
	fill: rgba(10, 42, 66, 0.95);
	stroke: #ff3b47;
	stroke-width: 2;
}

.netz__system,
.netz__mitte {
	transform-box: fill-box;
	transform-origin: center;
}

.netz__icon {
	color: #9ccff5;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.netz__name {
	fill: #e7edf3;
	font-family: var(--tl-schrift);
	font-size: 11.5px;
	font-weight: 600;
	text-anchor: middle;
}

.netz__fracht {
	opacity: 0;
	color: #08111b;
}

.netz__fracht rect {
	fill: #00a7fe;
}

.netz__fracht use {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.netz__fracht text {
	fill: #08111b;
	font-family: var(--tl-schrift);
	font-size: 11px;
	font-weight: 700;
}