/**
 * AIF Download Center - Frontend.
 *
 * Das Erscheinungsbild folgt bewusst der bisherigen Fassung: dieselbe
 * Ueberschrift mit Trennlinie, dieselben Filterfelder, dieselben Karten mit
 * weichem Schatten, dieselbe blaue Schaltflaeche (#3288CE aus der alten
 * stylev.css). Fuer die Redaktion und fuer Besucher soll sich beim Umschalten
 * nichts aendern - die Aenderungen liegen unter der Oberflaeche.
 *
 * Alle Klassen sind mit aif-dl__ benannt, damit sie sich nicht mit dem Theme
 * oder einer anderen Erweiterung ins Gehege kommen.
 */

.aif-dl {
	--aif-dl-blau: #3288ce;
	--aif-dl-blau-dunkel: #2a71ae;
	--aif-dl-text: #1d1d1f;
	--aif-dl-grau: #6b6f76;
	--aif-dl-linie: #dfe3e8;
	--aif-dl-flaeche: #f7f8fa;
	--aif-dl-rot: #c8102e;

	color: var(--aif-dl-text);
	font-size: 16px;
	line-height: 1.55;
}

.aif-dl *,
.aif-dl *::before,
.aif-dl *::after {
	box-sizing: border-box;
}

/* --- Ueberschrift mit Trennlinie (wie bisher) --- */

.aif-dl .aif-dl__title {
	margin: 0 0 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--aif-dl-text);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

/* --- Hinweis nach der Bestaetigung --- */

.aif-dl__notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 4px solid var(--aif-dl-blau);
	background: var(--aif-dl-flaeche);
	border-radius: 0 3px 3px 0;
}

.aif-dl__notice--ok {
	border-left-color: #1f7a3f;
}

.aif-dl__notice--warn {
	border-left-color: var(--aif-dl-rot);
}

.aif-dl__notice strong {
	display: block;
}

/* --- Filter --- */

.aif-dl__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 24px;
}

.aif-dl__filter {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 240px;
	flex: 1 1 240px;
}

.aif-dl__filter > span {
	font-size: 15px;
	color: var(--aif-dl-grau);
}

.aif-dl .aif-dl__select {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--aif-dl-linie);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--aif-dl-text);
}

/* --- Liste: Karten wie bisher --- */

.aif-dl__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aif-dl .aif-dl__item {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 14px;
	padding: 18px 24px;
	border: 1px solid #eef0f3;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .08);
}

.aif-dl__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 44px;
	object-fit: contain;
}

.aif-dl__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.aif-dl__name {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* Angaben stehen in derselben Zeile wie der Titel. */
.aif-dl__sub {
	font-size: 14px;
	font-weight: 400;
	color: var(--aif-dl-grau);
	white-space: nowrap;
}

.aif-dl__actions {
	flex: 0 0 auto;
}

.aif-dl__empty {
	padding: 24px 0;
	color: var(--aif-dl-grau);
}

.aif-dl__list[aria-busy="true"] {
	opacity: .55;
	transition: opacity .15s;
}

/* --- Schaltflaechen --- */

/*
 * Die Schaltflaeche folgt der bisherigen Fassung (stylev.css, Regeln
 * .wts-dwnld-trckr-parent-wrapper .download-cmn-btnm): blau gefuellt, beim
 * Ueberfahren laeuft eine weisse Flaeche von links ein, der Text wird blau
 * und der blaue Rahmen wird sichtbar.
 *
 * Dort war der Wischer ein ::after mit z-index. Das setzt ein <span> um den
 * Text voraus, sonst deckt die Flaeche die Beschriftung zu. Hier uebernimmt
 * ein Verlauf im Hintergrund dieselbe Bewegung - Hintergrund liegt immer
 * unter dem Text, ganz ohne zusaetzliche Auszeichnung.
 *
 * Der Rahmen ist im Ruhezustand blau auf Blau und deshalb unsichtbar. So
 * erscheint er beim Ueberfahren ohne Sprung in der Groesse.
 */

.aif-dl .aif-dl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 0 15px;
	border: 1px solid var(--aif-dl-blau);
	border-radius: 0;
	background-color: var(--aif-dl-blau);
	background-image: linear-gradient(#fff, #fff);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-size .4s ease-in-out, color .4s ease-in-out;
}

/*
 * Das Theme gibt jedem <button> beim Ueberfahren eine Vorrangregel mit auf den
 * Weg: button:hover { color: #fff !important }. Die bisherigen Schaltflaechen
 * waren <a>-Elemente und wurden davon nicht getroffen - unsere sind echte
 * Schaltflaechen und werden es. Ohne denselben Vorrang bliebe die Schrift beim
 * Ueberfahren weiss und verschwaende auf der weissen Flaeche. Der Vorrang gilt
 * nur fuer diese eine Farbe.
 */
.aif-dl .aif-dl__btn:hover,
.aif-dl .aif-dl__btn:active,
.aif-dl .aif-dl__btn:focus-visible {
	background-size: 100% 100%;
	border-color: var(--aif-dl-blau);
	color: var(--aif-dl-blau) !important;
}

/* Wer die Bewegung abbestellt hat, bekommt denselben Farbwechsel ohne Lauf. */
@media (prefers-reduced-motion: reduce) {
	.aif-dl .aif-dl__btn {
		transition: none;
	}
}

/* Wie bisher: die Schaltflaechen in der Liste haben eine feste Breite. */
.aif-dl .aif-dl__btn--request,
.aif-dl .aif-dl__btn--download {
	min-width: 160px;
}

.aif-dl .aif-dl__btn[hidden] {
	display: none;
}

.aif-dl .aif-dl__btn:disabled {
	opacity: .6;
	cursor: default;
}

.aif-dl .aif-dl__link:hover,
.aif-dl .aif-dl__link:active,
.aif-dl .aif-dl__link:focus-visible {
	color: var(--aif-dl-blau-dunkel) !important;
}

.aif-dl .aif-dl__link {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--aif-dl-blau);
	font: inherit;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

/* --- Blaettern --- */

/*
 * Masse aus der bisherigen Fassung (stylev.css, .pagination .page-numbers):
 * mittig, eckig, blauer Rahmen mit blauer Ziffer; die aktuelle Seite und die
 * ueberfahrene Seite sind blau gefuellt mit weisser Ziffer.
 */

.aif-dl__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 50px 0 0;
}

.aif-dl .aif-dl__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	margin: 0 5px;
	padding: 0 16px;
	border: 1px solid var(--aif-dl-blau);
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-weight: 400;
	color: var(--aif-dl-blau);
	cursor: pointer;
	transition: background-color .3s ease-in-out, color .3s ease-in-out;
}

/*
 * Auch hier gegen button:hover { color: #fff !important } des Themes. Hier ist
 * Weiss zwar richtig, aber nur zufaellig - der Vorrang wird mitgeschrieben,
 * damit die Regel auch dann gilt, wenn das Theme die seine einmal aendert.
 * Die bisherigen Blaetter-Schaltflaechen waren <a>- und <span>-Elemente und
 * wurden von der Theme-Regel nicht getroffen.
 */
.aif-dl .aif-dl__page:hover,
.aif-dl .aif-dl__page:active,
.aif-dl .aif-dl__page:focus-visible,
.aif-dl .aif-dl__page.is-current {
	border-color: var(--aif-dl-blau);
	background: var(--aif-dl-blau);
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.aif-dl .aif-dl__page {
		transition: none;
	}
}

@media (max-width: 479px) {
	.aif-dl .aif-dl__page {
		min-width: 34px;
		min-height: 34px;
		margin: 0 3px;
		padding: 0 12px;
		font-size: 14px;
	}
}

/* --- Dialogfenster --- */

.aif-dl-open {
	overflow: hidden;
}

.aif-dl__overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	background: rgba(20, 22, 26, .6);
	overflow-y: auto;
}

.aif-dl__overlay[hidden] {
	display: none;
}

.aif-dl__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	/*
	 * Oben ausgerichtet, nicht senkrecht zentriert: das Formular ist hoeher
	 * als ein kleiner Bildschirm, und bei Zentrierung wandert die Ueberschrift
	 * ueber den oberen Rand hinaus - man landet mitten im Formular, ohne zu
	 * sehen, worum es geht. "auto" nur seitlich.
	 */
	margin: 0 auto;
	padding: 30px 32px 28px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.aif-dl__dialog h3 {
	margin: 0 0 .4em;
	padding-right: 34px;
	font-size: 20px;
	font-weight: 600;
}

/*
 * Das Theme gibt allen <button> eine eigene Flaeche und Farbe. Fuer die
 * Schliessen-Schaltflaeche muss das ausdruecklich zurueckgesetzt werden -
 * sonst sitzt oben im Dialog ein blauer Kasten.
 */
.aif-dl .aif-dl__close,
.aif-dl .aif-dl__close:hover,
.aif-dl .aif-dl__close:focus {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: none;
	box-shadow: none;
	color: var(--aif-dl-grau);
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

/* Auch hier gegen button:hover { color: #fff !important } des Themes - sonst
 * verschwaende das Kreuz beim Ueberfahren auf heller Flaeche. */
.aif-dl .aif-dl__close:hover,
.aif-dl .aif-dl__close:focus-visible {
	background: var(--aif-dl-flaeche);
	color: var(--aif-dl-text) !important;
}

.aif-dl__formintro {
	margin: 0 0 1.2em;
	color: var(--aif-dl-grau);
}

.aif-dl__doc {
	margin: 0 0 1.2em;
	padding: 10px 14px;
	border-radius: 3px;
	background: var(--aif-dl-flaeche);
	font-size: 15px;
}

.aif-dl__doclabel {
	color: var(--aif-dl-grau);
}

/* --- Formular --- */

.aif-dl__field {
	margin: 0 0 14px;
}

.aif-dl__field label {
	display: block;
	margin-bottom: 5px;
	font-size: 15px;
	font-weight: 600;
}

.aif-dl__hint {
	font-weight: 400;
	color: var(--aif-dl-grau);
}

.aif-dl .aif-dl__field input {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--aif-dl-linie);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--aif-dl-text);
}

.aif-dl .aif-dl__field input:focus-visible,
.aif-dl .aif-dl__select:focus-visible {
	outline: 2px solid var(--aif-dl-blau);
	outline-offset: 1px;
}

.aif-dl__error {
	display: block;
	margin-top: 4px;
	color: var(--aif-dl-rot);
	font-size: 14px;
}

.aif-dl__error:empty {
	display: none;
}

.aif-dl__check {
	margin: 0 0 14px;
	font-size: 15px;
}

.aif-dl__check label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}

.aif-dl .aif-dl__check input {
	width: auto;
	min-height: 0;
	margin-top: 4px;
	flex: 0 0 auto;
}

.aif-dl__check a {
	color: var(--aif-dl-blau);
}

.aif-dl__note {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--aif-dl-grau);
}

.aif-dl__submitrow {
	margin: 0;
}

.aif-dl .aif-dl__btn--submit {
	width: 100%;
	min-height: 50px;
}

.aif-dl__formerror {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--aif-dl-rot);
	background: #fdf3f4;
	color: var(--aif-dl-rot);
	font-size: 15px;
}

.aif-dl__formerror[hidden] {
	display: none;
}

/*
 * Honigtopf: aus dem sichtbaren Bereich geschoben statt display:none.
 * Manche automatischen Absender erkennen display:none und lassen das Feld
 * dann bewusst leer - damit waere die Falle wirkungslos.
 */
.aif-dl__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --- Bestaetigung --- */

.aif-dl__success[hidden] {
	display: none;
}

.aif-dl__success h3 {
	margin: 0 0 .5em;
}

.aif-dl__resendrow {
	margin: 1.2em 0 0;
	font-size: 15px;
	color: var(--aif-dl-grau);
}

.aif-dl__resendnote {
	margin: .5em 0 0;
	font-size: 14px;
	color: var(--aif-dl-grau);
}

.aif-dl__resendnote:empty {
	display: none;
}

/* --- Schmale Anzeigen --- */

@media (max-width: 700px) {
	.aif-dl .aif-dl__item {
		flex-wrap: wrap;
		padding: 16px 18px;
	}

	.aif-dl__meta {
		flex: 1 1 calc(100% - 52px);
	}

	.aif-dl__sub {
		display: block;
		white-space: normal;
	}

	.aif-dl__actions {
		width: 100%;
	}

	.aif-dl .aif-dl__btn {
		width: 100%;
	}

	.aif-dl__dialog {
		padding: 24px 18px 22px;
	}
}

/* ======================================================================
 * Kompakter Anforderungsdialog
 *
 * Der Dialog soll auf einen Blick vollstaendig sichtbar sein - auch auf einem
 * Laptop-Bildschirm, ohne zu blaettern. Dafuer: Felder zweispaltig, etwas
 * flacher, weniger Innenabstand und vor allem ein deutlich kleinerer
 * Einwilligungstext. Der Rechtstext bleibt vollstaendig und lesbar, drangt
 * sich aber nicht mehr vor das eigentliche Formular.
 * ====================================================================== */

.aif-dl .aif-dl__dialog {
	max-width: 620px;
	padding: 22px 26px 20px;
}

.aif-dl .aif-dl__dialog h3 {
	margin: 0 0 4px;
	font-size: 19px;
}

.aif-dl .aif-dl__formintro {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.45;
}

.aif-dl .aif-dl__doc {
	margin: 0 0 14px;
	padding: 7px 12px;
	font-size: 13px;
}

.aif-dl .aif-dl__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
	row-gap: 10px;
	margin: 0 0 14px;
}

.aif-dl .aif-dl__grid .aif-dl__field {
	margin: 0;
	min-width: 0;
}

.aif-dl .aif-dl__field--full {
	grid-column: 1 / -1;
}

.aif-dl .aif-dl__field label {
	margin-bottom: 3px;
	font-size: 13px;
}

.aif-dl .aif-dl__hint {
	font-size: 12px;
}

.aif-dl .aif-dl__field input {
	min-height: 38px;
	padding: 7px 11px;
	font-size: 14px;
}

.aif-dl .aif-dl__error {
	font-size: 12px;
}

/* Einwilligung und Newsletter: klein, aber gut lesbar. */
.aif-dl .aif-dl__check {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--aif-dl-grau);
}

.aif-dl .aif-dl__check label {
	gap: 8px;
}

.aif-dl .aif-dl__check input {
	margin-top: 2px;
}

.aif-dl .aif-dl__note {
	margin: 4px 0 12px;
	font-size: 11px;
}

.aif-dl .aif-dl__btn--submit {
	min-height: 44px;
}

.aif-dl .aif-dl__formerror {
	margin-top: 10px;
	font-size: 13px;
}

@media (max-width: 560px) {
	.aif-dl .aif-dl__grid {
		grid-template-columns: 1fr;
	}

	.aif-dl .aif-dl__dialog {
		padding: 20px 16px 18px;
	}
}

/*
 * Gegen das Theme: es gibt jedem <span> 18 px Schrift und 28 px Zeilenhoehe,
 * jedem Eingabefeld 24 px Abstand nach unten und Beschriftungen eine
 * Zeilenhoehe von 28 px. Ohne diese Ruecksetzung wirkt die Einwilligung
 * riesig, obwohl ihr Absatz auf 12 px steht, und der Dialog wird hoeher als
 * ein Laptop-Bildschirm.
 */
.aif-dl .aif-dl__dialog h3 {
	line-height: 1.3;
}

.aif-dl .aif-dl__field label,
.aif-dl .aif-dl__field label span {
	line-height: 1.3;
}

.aif-dl .aif-dl__field label .aif-dl__hint {
	font-size: 12px;
}

.aif-dl .aif-dl__field input {
	margin: 0;
}

.aif-dl .aif-dl__check label,
.aif-dl .aif-dl__check label span,
.aif-dl .aif-dl__check a {
	font-size: 12px;
	line-height: 1.45;
}

.aif-dl .aif-dl__note {
	line-height: 1.4;
}

/*
 * 2.0.1: iOS Safari vergroessert die Seite, sobald ein Eingabefeld mit
 * weniger als 16 px Schrift den Fokus bekommt - der Dialog rutscht dann
 * seitlich aus dem Bild. Auf schmalen Anzeigen deshalb 16 px. !important,
 * weil das Theme unter 1000 px allen Feldern 13 px mit !important gibt.
 */
@media (max-width: 1000px) {
	.aif-dl .aif-dl__field input {
		font-size: 16px !important;
	}
}

/* Die Erfolgsmeldung bekommt den Fokus per Skript, nicht per Tastatur. */
.aif-dl .aif-dl__success h3:focus {
	outline: none;
}