/* MARCH PUMPEN – Anwendungsübersicht
   Idee: Branchen als Kacheln, darunter je Branche eine Matrix (Anwendung × Baureihe) mit Häkchen.
   Die Tabellen sind normale Tabellen-Blöcke im Editor: Häkchen "✓" in die Zelle schreiben, leer lassen = nicht geeignet. */

.app-head__title,
.app-tiles__title,
.app-tile__name,
.app-section h2 {
	font-family: var(--font-display);
	font-weight: 700;
	text-wrap: balance;
}

/* ------------------------------------------------------------------
   Kopf: Text links, Bild rechts
   ------------------------------------------------------------------ */
.app-head {
	border-bottom: 1px solid var(--color-line);
	background:
		radial-gradient(60rem 22rem at 90% 0%, rgba(71, 208, 255, .12), transparent 70%),
		linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
	padding-block: clamp(2.5rem, 6vw, 5rem);
}
.app-head__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}
.app-head__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.6rem, 6.5vw, 5.25rem);
	line-height: .95;
	letter-spacing: -.02em;
	hyphens: auto;
}
.app-head__lead {
	max-width: 36rem;
	margin: 0 0 2rem;
	color: var(--color-text-muted);
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.55;
}
.app-head__figure {
	position: relative;
	margin: 0;
	border: 1px solid var(--color-line);
	border-radius: .375rem;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.app-head__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.app-head__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 15, 26, .55), transparent 55%);
}
@media (width < 56rem) {
	.app-head__inner { grid-template-columns: 1fr; }
	.app-head__figure { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------------
   Kachel-Navigation
   ------------------------------------------------------------------ */
.app-tiles { padding-block: clamp(2.5rem, 5vw, 4rem) 1rem; }
.app-tiles__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	line-height: 1.1;
}
.app-tiles__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.app-tile {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: .9rem 1.1rem;
	border: 1px solid var(--color-line);
	border-radius: .375rem;
	background: var(--color-bg-alt);
	color: inherit;
	text-decoration: none;
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.app-tile:hover { border-color: rgba(71, 208, 255, .6); transform: translateY(-2px); }
.app-tile:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }
.app-tile__icon,
.app-section__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: .3rem;
	background: rgba(71, 208, 255, .1);
	color: var(--color-cyan);
	transition: background .25s, color .25s;
}
.app-tile__icon .icon,
.app-section__icon .icon { width: 1.4rem; height: 1.4rem; }
.app-tile:hover .app-tile__icon { background: var(--color-cyan); color: var(--color-bg); }
.app-tile__text { display: flex; flex-direction: column; min-width: 0; }
.app-tile__name { font-size: 1.25rem; line-height: 1.1; }
.app-tile__count { color: var(--color-text-muted); font-size: .95rem; }

/* ------------------------------------------------------------------
   Inhalt: Legende und Branchen-Abschnitte
   ------------------------------------------------------------------ */
.app-content { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.app-content > p {
	margin: 0 0 1rem;
	color: var(--color-text-muted);
}
.app-content a { color: var(--color-cyan); }

.app-section {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0 1rem;
	padding-top: clamp(2.5rem, 5vw, 4rem);
	scroll-margin-top: 6rem;
}
.app-section > .wp-block-group__inner-container { display: contents; }
.app-section > *,
.app-section > .wp-block-group__inner-container > * { grid-column: 1 / -1; }
.app-section .app-section__icon,
.app-section > .wp-block-group__inner-container > .app-section__icon { grid-column: 1; grid-row: 1; width: 3.25rem; height: 3.25rem; }
.app-section h2,
.app-section > .wp-block-group__inner-container > h2 {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	line-height: 1.05;
}

/* Matrix: Anwendung × Baureihe */
.app-section .wp-block-table,
.app-matrix {
	margin: 1.25rem 0 0;
	overflow-x: auto;
	border: 1px solid var(--color-line);
	border-radius: .5rem;
	background: var(--color-bg-alt);
	box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .6);
}
.app-matrix:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }
.app-matrix table {
	width: 100%;
	min-width: 46rem;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}
.app-matrix th,
.app-matrix td {
	padding: .8rem .4rem;
	border: 0;
	text-align: center;
	vertical-align: middle;
}

/* Zeilen: Zebra, erste Zeile (die Branche selbst) hervorgehoben */
.app-matrix tbody tr { --row-bg: var(--color-bg-alt); }
.app-matrix tbody tr:nth-child(even) { --row-bg: #0c2033; }
.app-matrix tbody tr:first-child { --row-bg: #0f2c46; }
.app-matrix tbody tr:hover { --row-bg: #12354f; }
.app-matrix td { background: var(--row-bg); }
.app-matrix tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, .06); }
.app-matrix tbody tr:first-child td { border-bottom: 1px solid rgba(71, 208, 255, .35); }

/* Kopfzeile: Baureihen */
.app-matrix thead th {
	background: #0a1a2b;
	box-shadow: inset 0 -2px 0 var(--color-cyan);
	padding-block: 1rem .9rem;
	font-family: var(--font-display);
	font-size: .98rem;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.15;
	white-space: nowrap;
}
.app-matrix thead a {
	display: block;
	color: var(--color-text);
	text-decoration: none;
	transition: color .2s;
}
.app-matrix thead a:hover { color: var(--color-cyan); }

/* Spalten-Hervorhebung (Fadenkreuz, siehe anwendungen.js) */
.app-matrix td.is-col { background: #12354f; }
.app-matrix thead th.is-col { background: #12354f; }
.app-matrix thead th.is-col a { color: var(--color-cyan); }

/* Erste Spalte: Anwendung, beim Scrollen sichtbar */
.app-matrix th:first-child,
.app-matrix td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 14rem;
	padding-left: 1.25rem;
	font-weight: 600;
	text-align: left;
}
.app-matrix td:first-child { box-shadow: 1px 0 0 rgba(255, 255, 255, .06); }
.app-matrix tbody tr:first-child td:first-child {
	color: var(--color-cyan);
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
}

/* Häkchen statt Text; leere Zelle bleibt unauffällig */
.app-matrix td:not(:first-child) { width: 5rem; font-size: 0; line-height: 0; }
.app-matrix td:not(:first-child)::before {
	content: "";
	display: inline-block;
	width: .3rem;
	height: .3rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
}
.app-matrix td:not(:first-child):not(:empty)::before {
	width: 1.7rem;
	height: 1.7rem;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050f1a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 68% no-repeat,
		var(--color-cyan);
	box-shadow: 0 0 0 4px rgba(71, 208, 255, .14);
}

@media (prefers-reduced-motion: no-preference) {
	.app-matrix td,
	.app-matrix thead th { transition: background .15s; }
}

/* Schmale Bildschirme: Anwendungsspalte kompakter, damit mehr Baureihen sichtbar sind */
@media (width < 40rem) {
	.app-matrix th:first-child,
	.app-matrix td:first-child { min-width: 10.5rem; max-width: 10.5rem; padding-left: .9rem; font-size: .95rem; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
	.app-matrix tbody tr:first-child td:first-child { font-size: 1.05rem; }
	.app-matrix td:not(:first-child) { width: 4.25rem; }
}