/* ===========================================================================
   branche.css — Benker WP-Theme
   HANDGESCHRIEBEN. Eigene Datei, damit eine Neuextraktion von components.css
   sie nicht ueberschreibt (siehe Kopf dort).

   Enthaelt Branchen-Abschnitte, die ueber den Astro-Stand hinaus dazukamen.
   Aktuell: die Anwendungsfälle (.anwfall) als Info-Textkarten statt
   Blog-Karten.

   HINWEIS(23.07.2026): Der zwischenzeitliche Einspalten-Stapel (.branche-stack)
   ist wieder entfallen — die Branchen-Datensatzseite (single-branche.php) nutzt
   wie die Produktseiten das Zwei-Spalten-Layout .branche-layout aus
   components.css (klebende Kontakt-Sidebar rechts).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Produkt-Selektor: Kennzahlen kleiner (Vorgabe Atilla, 23.07.2026).

   Seit die Kennzahlen live aus den technischen Daten der Produkte kommen,
   stehen dort auch laengere Werte ("DIN EN 61340-5-3" statt "10⁶–10⁹").
   Die 26px bold aus dem Figma-Stand (components.css) sind dafuer zu wuchtig —
   20px medium reicht und laesst lange Werte nicht mehr dominieren.
   --------------------------------------------------------------------------- */
.pselekt__stat-value {
	font-size: 20px;
	font-weight: var(--fw-medium);
}

.anwfall {
	padding-block: var(--space-7);
}
.anwfall__head {
	margin-bottom: var(--space-5);
}
.anwfall__eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-heading-5xs);
	line-height: var(--lh-heading-5xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-tight);
	color: var(--color-accent);
	margin: 0 0 var(--space-2);
}
.anwfall__title {
	margin: 0;
}

.anwfall__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 700px) {
	.anwfall__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.anwfall__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.anwfall__card {
	position: relative;
	background: var(--color-bg-muted);
	border-radius: var(--radius-image, 12px);
	padding: var(--space-5);
	padding-top: calc(var(--space-5) + 12px);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
/* Farbiger Akzentstrich oben, damit die Karte als Info gelesen wird, nicht als
   Beitrag. */
.anwfall__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--space-5);
	width: 40px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: var(--color-accent);
}
.anwfall__num {
	font-family: var(--font-heading);
	font-size: var(--fs-body-m);
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
	letter-spacing: 0.04em;
}
.anwfall__card-title {
	margin: 0;
}
.anwfall__card-text {
	font-family: var(--font-body);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	color: var(--color-text);
	margin: 0;
}

/* ---------------------------------------------------------------------------
   BILDER-SLIDER ZWISCHEN ANWENDUNGSFÄLLEN UND FAQ (14.09.2026, Vorgabe Atilla)

   Markup: single-branche.php, Abschnitt 4b — derselbe Baustein wie auf den
   Produktseiten (template-parts/produkt/bild-slider.php, .esdslider).

   WARUM EIN WRAPPER: Der Slider bringt selbst KEINEN Aussenabstand mit. Auf den
   Produktseiten liefert ihn der Block-Rahmen (.block-band); hier steht der
   Baustein nackt in der linken Spalte und braucht den Abstand von aussen. Der
   Abstand gehoert an den Wrapper und nicht an .esdslider selbst — sonst wirkt er
   auch auf den Produktseiten und verschiebt dort das Raster.

   ABSTAND OBEN NUR, WENN NÖTIG: Ueber dem Slider liegt im Normalfall .anwfall,
   das bereits Innenabstand nach unten mitbringt. Ein eigener Abstand oben wuerde
   die Luecke dort verdoppeln. Deshalb faellt er weg, sobald der Slider direkt
   auf die Anwendungsfaelle folgt. Hat eine Branche keine Anwendungsfaelle
   gepflegt, greift er wieder und der Slider klebt nicht am Einstiegstext.

   OBEN ENGER ALS UNTEN (16.09.2026, Vorgabe Atilla): Zuerst stand ueber und
   unter dem Slider derselbe Abstand von 48px. Der Slider sah dadurch aus wie ein
   eigener Abschnitt zwischen Anwendungsfaellen und FAQ — er soll aber zu den
   Anwendungsfaellen GEHOEREN.

   Deshalb wird der Innenabstand von .anwfall nach unten gekuerzt, sobald ein
   Slider folgt: auf var(--space-3), 12px. Unten bleiben es 48px. Das Verhaeltnis
   1:4 macht die Zugehoerigkeit sichtbar: Naeher heisst zusammengehoerig, weiter
   heisst neuer Abschnitt. 12px liegen noch unter dem Kartenabstand des Rasters
   (16px) — der Slider liest sich dadurch als weitere Zeile derselben Gruppe.

   :has() statt negativem Aussenabstand, weil der Abstand dorthin gehoert, wo er
   entsteht — in .anwfall. Kennt ein Browser :has() nicht, bleiben es oben 48px:
   dann sieht es aus wie vorher, nichts bricht.
   --------------------------------------------------------------------------- */
.brslider {
	padding-block: var(--space-7);
}

.anwfall + .brslider {
	padding-top: 0;
}

.anwfall:has(+ .brslider) {
	padding-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------------
   BREITE UND BILDAUSSCHNITT DES BRANCHEN-SLIDERS (16.09.2026, Vorgabe Atilla)

   Alles hier haengt an .brslider und gilt damit NUR auf den Branchenseiten. Die
   Produktseiten nutzen denselben Baustein und bleiben unveraendert — dort sind
   es Produktfreisteller mit einer eigenen Projektregel (siehe produktbilder.css).

   1. BREITE: Der Slider endete rechts vor der Spaltenkante, weil die Karten fest
   320px breit sind. Die Reihe hoerte damit irgendwo mitten in der Spalte auf,
   waehrend das Kartenraster darueber bis zum Rand laeuft — der Slider wirkte
   abgeschnitten und wie ein Fremdkoerper.

   Die Karten uebernehmen deshalb die Rechnung des Rasters darueber: dieselben
   Umbruchpunkte (700px, 1200px), dieselbe Anzahl Spalten (1, 2, 3) und derselbe
   Abstand var(--space-4). Dadurch stehen die Slider-Karten exakt unter den
   Anwendungsfall-Karten — gleiche Kanten links wie rechts, gleiche Spaltenmitten.

   2. KEIN ENDPOLSTER: Die 40px aus produktbilder.css sind eine Peek-Massnahme —
   sie sorgen dort dafuer, dass die letzte Karte nicht an der Kante klebt. Hier
   fuellen die Karten die Spalte exakt aus, es gibt keinen Peek, und das Polster
   wuerde die Reihe wieder verkuerzen. Also raus.

   3. BILD FUELLT DEN RAHMEN: produktbilder.css setzt object-fit: contain, weil
   bei einem Produktfreisteller der Rand die Information ist. Hier stehen
   Anwendungs- und Stimmungsbilder aus der Branche — da traegt das Motiv, nicht
   die Silhouette, und ein heller Streifen ringsum sieht nach Fehler aus. cover
   fuellt den Rahmen; das Seitenverhaeltnis bleibt bei allen Karten gleich, die
   Reihe steht also ruhig.
   --------------------------------------------------------------------------- */
.brslider .esdslider__track {
	gap: var(--space-4);
}

.brslider .esdslider__viewport {
	padding-right: 0;
}

.brslider .esdslider__card {
	width: 100%;
}

@media (min-width: 700px) {
	.brslider .esdslider__card {
		width: calc((100% - var(--space-4)) / 2);
	}
}

@media (min-width: 1200px) {
	.brslider .esdslider__card {
		width: calc((100% - 2 * var(--space-4)) / 3);
	}
}

.brslider .esdslider__img {
	object-fit: cover;
}