/* ================================================================
   SABTEC — Seite „Downloads"
   ================================================================
   Die Bausteine der Seite (.sub, .sec, .wrap, .sec-h, .dlgrid, .dl,
   .dl .get, .annot, .ctab, .bigbtn) stehen im Designsystem
   `assets/css/system.css` und werden hier NICHT wiederholt. Diese
   Datei enthaelt nur, was ausschlieszlich die Downloadseite braucht:

   1. Abstaende, die im Prototyp als Inline-Stil an der Sektion und an
      den Gruppenueberschriften standen
   2. Die Pille als Link, sobald eine Datei hinterlegt ist
   3. Umbruchverhalten langer Titel auf schmalen Geraeten

   Herkunft: design/22-07-2026-seitenset/downloads.html (Stand 31.07.2026),
   Referenz figma-final/downloads.png.
   Farben und Maszen kommen aus theme.json — keine Farbliterale.
   ================================================================ */

/* 1. Abstaende ------------------------------------------------------ */

/* Die erste Gruppe steht dichter unter dem blauen Panel als der
   Standardrhythmus (112 px) es vorsieht. Im Prototyp war das ein
   Inline-Stil an der Sektion. */
.sec-downloads { padding-top: 32px; }

/* Zwischen zwei Gruppen liegen 44 px zusaetzlich zum Grundabstand der
   Ueberschrift — im Prototyp ebenfalls inline gesetzt. */
.sec-downloads .sec-h.dl-weiter { margin-top: 44px; }

/* Der Offen-Hinweis unter der letzten Gruppe. */
.sec-downloads .dl-hinweis { margin-top: 22px; }

/* 2. Pille als Download-Link ---------------------------------------- */

/* Ohne Datei ist die Pille ein <span> („PDF folgt") und damit kein toter
   Link. Sobald eine Datei gepflegt ist, wird daraus ein <a>; es erbt das
   Aussehen aus system.css und bekommt hier nur die Zustaende. */
.dl a.get:hover,
.dl a.get:focus-visible {
	background: var(--blue);
	color: var(--wp--preset--color--white);
}

/* Der Teil des Linktextes, der nur vorgelesen wird: Er ergaenzt die
   sichtbare Kurzangabe („PDF · 1,2 MB") um Titel und Zweck, damit der
   zugaengliche Name auch ausserhalb des Zusammenhangs traegt. Der
   sichtbare Text bleibt vollstaendig darin enthalten (WCAG 2.5.3). */
.dl .vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 3. Schmale Geraete ------------------------------------------------ */

/* Die Zeile ist ein Flex-Element aus Icon, Text und Pille. Ohne
   `min-width: 0` waechst der Textblock auf seine kleinste Wortbreite und
   schiebt die Zeile ueber die Karte hinaus — bei Woertern wie
   „Unternehmensbroschuere" reicht das auf 390 px fuer waagerechten
   Ueberlauf. Beides zusammen laesst den Titel stattdessen umbrechen. */
.dl > div { min-width: 0; }
.dl b {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Unter 600 px umbrechen statt quetschen (29.08.2026).
   Die Zeile hat drei Teile nebeneinander: Symbol (30 px), Text und die
   PDF-Pille (rund 100 px). Bei 390 px bleiben dem Text davon rund 150 px.
   Gemessen an /downloads/: JEDER der sechzehn Titel bricht dadurch auf
   zwei Zeilen, jede Beschreibung ebenfalls — „Containerschutz —
   Ueberblick" steht als „Containerschutz —" / „Ueberblick", und die
   Beschreibung darunter noch einmal zweizeilig. Aus einer Zeile werden
   vier, und die Karte ist doppelt so hoch wie noetig.

   `flex-wrap` allein reicht nicht: Die Pille wuerde in die naechste
   Zeile rutschen, aber der Text bliebe neben dem Symbol eingeklemmt.
   Deshalb bekommt der Textblock die volle Breite (`flex-basis: 100%`),
   und die Pille setzt sich darunter neben das Symbol — sie behaelt damit
   ihre Trefferflaeche und steht dort, wo der Daumen sie erwartet. */
@media (max-width: 600px) {
	.dl {
		flex-wrap: wrap;
		align-items: flex-start;
		row-gap: 14px;
		padding: 22px 20px;
	}
	.dl > div {
		flex: 1 1 100%;
		order: 1;
	}
	.dl svg { order: 0; }
	.dl .get {
		order: 2;
		margin-left: 0;
	}
}