/* ================================================================
   SABTEC — Einsatzbereichsseiten (alle zehn)
   ================================================================
   Gilt fuer /einsatzbereiche/<slug>/ — Buero, Kindergaerten, Schulen,
   Unterkuenfte, Baugewerbe, Landwirtschaft, Verkaufsraeume & Shops,
   Veranstaltungen, Sonderbau, Feuerwehr.

   Bis zum 20.08.2026 hiesz die Datei `kindergaerten.css` und galt fuer
   die eine Musterseite. Geladen wird sie ueber `sabtec_aktueller_slug()`,
   das fuer alle zehn Bereichsseiten `bereich` zurueckgibt — sonst haette
   jede Seite ihre eigene, inhaltsgleiche Stildatei gebraucht.

   Die Sektionsklassen heiszen weiterhin `.kgintro`, `.kgtypen` und
   `.kgrefs`. Das ist kein Versehen: `system.css` (gesperrt) haengt an
   `.kgrefs` die Regeln, die das Referenzraster bei einer oder zwei
   Karten schmaler ziehen. Ein Umbenennen braeuchte eine Aenderung dort
   und ist im Baubericht gemeldet.

   Nur was ausschliesslich diese Seiten brauchen. Alles Geteilte kommt aus
   assets/css/system.css (.sub, .sec, .wrap, .dual, .sec-h, .grid, .kx,
   .flist/.fpill, .ncard, .lnk, .annot, .ctab). Keine Farb- oder
   Schriftliterale: die Werte stehen in theme.json.
   ================================================================ */

/* Erste Sektion nach dem blauen Seitenkopf: 72 statt 112 px (Prototyp).
   Seit 20.08.2026 ueber `--sec-y-k` — der Wert stuft sich damit schmal
   selbst herunter (72 / 72 / 48). */
.kgintro { padding-top: var(--sec-y-k); }

.kgintro .dual > div > p {
	margin-top: 18px;
	font-size: 17px;
	color: var(--mut);
}

/* Bereiche ohne eigene Ueberschrift (Baugewerbe, Landwirtschaft,
   Verkaufsraeume, Feuerwehr) beginnen mit dem ersten Absatz. Ohne diese
   Regel saesze er 18 px tiefer als die Bildflaeche daneben — der Abstand
   ist als Abstand ZUR Ueberschrift gedacht. */
.kgintro .dual > div > p:first-child { margin-top: 0; }

/* Bildflaeche des Intros. Der Prototyp gibt ihr nur eine Hoehe und keine
   Fuellung — genau so zeigt es der Frame: leere Flaeche mit der gelben
   Hinweis-Badge. */
.kgintro .ph { height: 300px; }

/* Seit 18.08.2026 steht rechts ein echtes Foto statt der leeren Flaeche.
   Gleiche Hoehe wie der Platzhalter, damit das Raster unveraendert bleibt. */
.kgintro .pic {
	height: 300px;
	background-size: cover;
	background-position: center;
}

/* Aufzaehlung im Intro. Bisher braucht sie genau ein Bereich: Feuerwehr
   zeigt den „Auszug aus unserem umfangreichen Sortiment" der bestehenden
   Website (sieben Positionen). Zweispaltig, damit die Liste neben der
   Bildflaeche nicht zur Kolonne wird; auf schmalen Geraeten einspaltig
   ueber den Umbruch von .dual. */
/* Die Auswahl ist so spezifisch wie die Regel darueber — sonst gewinnt
   deren `color` und die Beschriftung bliebe gedaempft. */
.kgintro .dual > div > p.bliste-titel {
	margin-top: 18px;
	font-size: 17px;
	font-weight: 900;
	color: var(--ink);
}

.kgintro .bliste {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 28px;
	font-size: 17px;
	color: var(--mut);
}

.kgintro .bliste li {
	padding-left: 16px;
	margin-bottom: 6px;
	break-inside: avoid;
	position: relative;
}

/* Der gruene Punkt des Designsystems, hier als Aufzaehlungszeichen. */
.kgintro .bliste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
}

@media (max-width: 640px) {
	.kgintro .bliste { columns: 1; }
}

/* Sektionskoepfe stehen im Prototyp enger ueber ihren Rastern als die
   48 px des Designsystems. */
.kgtypen .sec-h,
.kgrefs .sec-h { margin-bottom: 28px; }

/* Ueberschriftenebene statt Optik: Der Prototyp setzt in den Karten <h4>,
   das waere nach dem <h2> des Sektionskopfs ein Ebenensprung
   (Bau-Konvention Abschnitt 7). Gebaut ist <h3>; die Regeln stellen die
   Groeszen aus system.css wieder her und nehmen die negative Laufweite
   zurueck, die theme.json h3 sonst gibt. */
.kx h3 {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: normal;
}

/* Im Prototyp traegt die Referenzkarte 20 px statt der 18,5 px, die
   system.css fuer .ncard vorsieht. */
.kgrefs .ncard h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: normal;
}

.kgrefs .ncard p { margin-top: 10px; }

/* Der Prototyp setzt den Verweis als <div> mit 18 px Abstand. Gebaut ist
   ein <a> — ein Ziel gehoert in einen Link, nicht in ein Klick-<div>.
   Damit greift aber `.ncard a` aus system.css (auto nach unten, 14 px);
   diese Regel stellt den Prototyp-Abstand und die .lnk-Groesze her. */
.kgrefs .ncard .lnk {
	margin-top: 18px;
	padding-top: 0;
	font-size: 15px;
}

/* --- Schmale Ansicht (Nachtrag 20.08.2026) -------------------------
   Die Intro-Ueberschrift ist ein blankes <h2> und haengt damit an der
   Vorgabe aus theme.json (44 px). Von den Klassen, die `system.css`
   schmal herunterstuft (`.sec-h`, `.center`, `.show`, `.band`, `.ctab`),
   erfasst sie keine — gemessen bei 390 px lief „Modulare Bueros –
   flexibel, hochwertig und schnell einsatzbereit" ueber FUENF Zeilen,
   waehrend jede andere Sektionsueberschrift der Seite auf zwei stand.
   Derselbe Faktor wie `.sec-h h2` dort; ab 700 px bleibt es bei 44 px. */
@media (max-width: 700px) {
	.kgintro h2 {
		font-size: calc(var(--wp--custom--anzeige--faktor) * 44);
		letter-spacing: -0.034em;
	}
}