/*
 * UB Kompetenzbereiche
 *
 * Alles hängt unter der Wurzelklasse .ubkb. Farben und Abstände stehen als
 * Custom Properties, damit sich Kleinigkeiten ohne Codeänderung anpassen
 * lassen.
 *
 * Zur Spezifität: Divi setzt Linkfarben teils aus dem Kontext #et-boc heraus,
 * und ein ID-Selektor schlägt jede Klasse. Statt eines !important-Teppichs
 * bekommen nur die wenigen farbkritischen Regeln zusätzlich den Selektor
 * #et-boc .ubkb ... mit. Alles andere kommt mit Klassen aus.
 */

.ubkb {
	/* Höhe des feststehenden Divi-Kopfs, am echten Theme gemessen
	   (data-height-onload="66"). Siehe docs/befunde.md, Abschnitt 4. */
	--ubkb-kopf-hoehe: 66px;

	--ubkb-abstand: 16px;
	--ubkb-abstand-klein: 8px;
	--ubkb-radius: 4px;
	--ubkb-kasten-min: 180px;
	--ubkb-kasten-max: 420px;
	--ubkb-umbruch: 768px;

	--ubkb-kasten-farbe: #4a5c63;
	--ubkb-kasten-farbe-dunkel: #3d4c52;
	--ubkb-kasten-text: #ffffff;

	/* Artikelzeile: dezente Karten, die den Kästen nicht die Schau stehlen. */
	--ubkb-karte-hintergrund: #f5f6f7;
	--ubkb-karte-titel: #3c4348;

	/* Schrift und Zeilenhöhe erbt das Plugin vom Theme. */
	box-sizing: border-box;
}

.ubkb *,
.ubkb *::before,
.ubkb *::after {
	box-sizing: inherit;
}

/*
 * Die Wissen-Sektion: der Sprung aus dem gleichnamigen Kasten.
 *
 * 120 px statt der sonst üblichen Kopfhöhe plus 1 rem. Der Divi-Kopf ist
 * beim Scrollen 66 px hoch, aber über dem Archiv steht die Bedienleiste mit
 * Suchfeld und Chips — landet die am oberen Rand, sieht der Leser die
 * Artikelliste erst nach dem nächsten Wisch. Mit 120 px steht die Leiste
 * vollständig unter dem Menü und die erste Zeile der Liste im Blick.
 */
#sektionWissen {
	scroll-margin-top: 120px;
}

/* Sprungziele nicht unter dem feststehenden Kopf verstecken. */
.ubkb[id],
.ubkb [id] {
	scroll-margin-top: calc(var(--ubkb-kopf-hoehe) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.ubkb) {
		scroll-behavior: smooth;
	}
}

/* ---------------------------------------------------------------- Kästen */

.ubkb-kaesten {
	display: grid;
	grid-template-columns: repeat(var(--ubkb-anzahl, 3), minmax(0, 1fr));
	gap: var(--ubkb-abstand);
	align-items: stretch;
	/* Wenig Luft zur Artikelzeile: beides gehört zusammen. */
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

/*
 * Zwei oder drei Kästen sollen nicht wie ein Werbebanner über die ganze
 * Breite laufen. Deshalb je Kasten eine Höchstbreite und die Gruppe
 * zentrieren.
 */
.ubkb-kaesten--2,
.ubkb-kaesten--3 {
	grid-template-columns: repeat(var(--ubkb-anzahl), minmax(0, var(--ubkb-kasten-max)));
	justify-content: center;
}

.ubkb-kasten {
	display: flex;
	flex-direction: column;
	gap: var(--ubkb-abstand-klein);
	min-width: 0;
	padding: var(--ubkb-abstand);
	background-color: var(--ubkb-kasten-farbe);
	border-radius: var(--ubkb-radius);
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Farbkritisch: hier gewinnt Divi sonst mit seinen Linkfarben. */
.ubkb .ubkb-kasten,
.ubkb .ubkb-kasten:link,
.ubkb .ubkb-kasten:visited,
.ubkb .ubkb-kasten:hover,
.ubkb .ubkb-kasten:focus,
#et-boc .ubkb .ubkb-kasten,
#et-boc .ubkb .ubkb-kasten:link,
#et-boc .ubkb .ubkb-kasten:visited,
#et-boc .ubkb .ubkb-kasten:hover,
#et-boc .ubkb .ubkb-kasten:focus {
	color: var(--ubkb-kasten-text);
	text-decoration: none;
}

.ubkb-kasten:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Sichtbarer Rahmen für die Tastaturbedienung. */
.ubkb-kasten:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.ubkb-kasten__titel {
	display: block;
	font-size: 1.35rem;
	line-height: 1.2;
	font-weight: 600;
}

.ubkb-kasten__text {
	display: block;
	flex: 1 1 auto;
	font-size: 0.9rem;
	line-height: 1.45;
	/*
	 * Lange Wörter wie "Konfigurationsempfehlungen" stoßen sonst an den
	 * rechten Kastenrand. hyphens braucht die Sprache am Element, die setzt
	 * das PHP als lang="de". overflow-wrap ist der Rückfall für Browser ohne
	 * deutsche Trennmuster.
	 */
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/*
 * Der Button sitzt unten bündig, auch wenn die Texte unterschiedlich lang
 * sind: margin-top:auto schiebt ihn ans Ende des Flex-Behälters.
 */
.ubkb-kasten__button {
	display: inline-block;
	align-self: center;
	margin-top: auto;
	padding: 0.5em 1.1em;
	border: 2px solid currentColor;
	border-radius: var(--ubkb-radius);
	font-size: 0.9rem;
	line-height: 1.3;
	white-space: nowrap;
}

.ubkb-kasten:hover .ubkb-kasten__button,
.ubkb-kasten:focus .ubkb-kasten__button {
	background-color: var(--ubkb-kasten-farbe-dunkel);
}

/* ------------------------------------------------- Handy: das bunte Band */

/*
 * Unter 768 px nur noch die Titel als farbige Schaltflächen in einem
 * wischbaren Band. Ziel: Der Artikel beginnt nicht erst nach drei
 * Bildschirmen.
 */
@media (max-width: 767px) {
	.ubkb-kaesten {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--ubkb-abstand-klein);
		overflow-x: auto;
		/* Das Band scrollt, nicht die Seite. */
		max-width: 100%;
		padding-bottom: var(--ubkb-abstand-klein);
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.ubkb-kaesten--2,
	.ubkb-kaesten--3 {
		justify-content: flex-start;
	}

	.ubkb-kasten {
		flex: 0 0 auto;
		padding: 0.6em 1.1em;
		scroll-snap-align: start;
	}

	.ubkb-kasten:hover {
		transform: none;
		box-shadow: none;
	}

	.ubkb-kasten__titel {
		font-size: 1rem;
		white-space: nowrap;
	}

	/*
	 * Lässt sich das Band wischen, deutet ein weicher Verlauf am rechten Rand
	 * an, dass rechts noch etwas kommt. Die Klasse setzt ubkb.js, sobald der
	 * Inhalt breiter ist als der sichtbare Bereich.
	 */
	.ubkb-kaesten--scrollbar {
		-webkit-mask-image: linear-gradient(to right, #000 85%, rgba(0, 0, 0, 0.15) 100%);
		mask-image: linear-gradient(to right, #000 85%, rgba(0, 0, 0, 0.15) 100%);
	}

	/* Text und Button gehören auf dem Handy nicht in das Band. */
	.ubkb-kasten__text,
	.ubkb-kasten__button {
		display: none;
	}
}

/* -------------------------------------------------------- Artikelzeile */

.ubkb-artikelzeile {
	margin: 0 0 0;
}

/*
 * Der Artikel soll früh anfangen. Eigener Abstand ist schon keiner mehr; was
 * bleibt, ist die Polsterung der Divi-Zeile darunter — am Theme-Builder-
 * Layout gemessen **27 px**.
 *
 * Die holt sich die Zeile hier zur Hälfte zurück. Der Selektor ist dabei
 * sehr eng, und das aus einem Grund, den eine erste Fassung teuer gelernt
 * hat: Sie zog nur `.et-l--body` heran und riss damit in der **Vorschau** ein
 * Loch — dort steckt der Block im Modul `et_pb_post_content`, und der
 * Artikeltext folgt unmittelbar danach im selben Modul. Gemessen 14 px
 * Überlappung.
 *
 * Deshalb greift die Regel nur, wo beides stimmt:
 *
 * - Der Block sitzt in einem Divi-Code-Modul (`.et_pb_code_inner`), also so,
 *   wie die Shortcodes im Theme-Builder-Template stehen.
 * - Er ist dort das **letzte** Kind. Folgt etwas dahinter, wird nicht
 *   gezogen — genau der Fall der Vorschau.
 *
 * Dazu 14 px statt 27: So bleibt immer ein Rest der Polsterung übrig, und
 * selbst wenn sie im Template später kleiner wird, rutscht nichts ineinander.
 *
 * Ganz ohne Abstand wäre eine Sache von einem Klick im Template — dort wird
 * hier aber nichts angefasst.
 */
.et-l--body .et_pb_code_inner > .ubkb-artikelzeile:last-child {
	margin-bottom: -14px;
}

/*
 * Vier dezente Karten. Sie haben dieselbe Eckenrundung und dieselben
 * Außenkanten wie die Kastenreihe darüber, damit beides als ein Block wirkt.
 * Spalten ohne Inhalt entfallen schon im PHP, die übrigen verteilen sich.
 */
.ubkb-zeile {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ubkb-abstand);
	/* stretch, nicht start: Alle Karten werden gleich hoch. */
	align-items: stretch;
	text-align: left;
}

.ubkb-spalte {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 8px 12px;
	background-color: var(--ubkb-karte-hintergrund);
	border-radius: var(--ubkb-radius);
}

/*
 * Der Kartentitel ist klein und ruhig. Er soll dem Artikeltitel nicht die
 * Aufmerksamkeit wegnehmen, und ein h-Element ist er bewusst nicht: Sonst
 * stünde er im Inhaltsverzeichnis des Beitrags.
 */
.ubkb-spalte__titel {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ubkb-karte-titel);
}

/*
 * Sechs Zeilen statt drei. Die Zahl ist nicht gegriffen: Das Schema erlaubt
 * für `zeile_text` und `werbe_text` 200 Zeichen, und 200 Zeichen brauchen in
 * dieser Spaltenbreite sechs Zeilen. Damit kann kein gepflegter Text mehr
 * mitten im Satz abgeschnitten werden.
 *
 * Die Klammer selbst bleibt stehen. Sie reserviert keine Höhe, sondern
 * begrenzt nur — ein Text, der gar nicht so lang ist, macht die Karte auch
 * nicht höher. Ohne sie könnte dagegen ein einzelner überlanger Text die
 * ganze Reihe in die Höhe ziehen, weil alle Karten gleich hoch werden.
 */
.ubkb-spalte__text {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ubkb-spalte__link,
.ubkb-bereich__abo,
.ubkb-buch__vorbereitung {
	font-size: 0.8rem;
}

/*
 * Nur unterstreichen, was auch anklickbar ist. Ohne Pillar-Seite bleibt der
 * Name eines Kompetenzbereichs ein <span>; sähe er aus wie ein Link, würde
 * jeder darauf klicken und nichts passierte.
 */
.ubkb a.ubkb-spalte__link,
.ubkb a.ubkb-bereich__name,
.ubkb a.ubkb-bereich__abo,
.ubkb a.ubkb-buch__vorbereitung,
#et-boc .ubkb a.ubkb-spalte__link,
#et-boc .ubkb a.ubkb-bereich__name,
#et-boc .ubkb a.ubkb-bereich__abo,
#et-boc .ubkb a.ubkb-buch__vorbereitung {
	text-decoration: underline;
}

/* Frag Uli und das Buchcover sind Flächenlinks, dort stört die Linie. */
.ubkb .ubkb-fraguli,
.ubkb .ubkb-buch__link,
#et-boc .ubkb .ubkb-fraguli,
#et-boc .ubkb .ubkb-buch__link {
	text-decoration: none;
}

.ubkb-fraguli:hover .ubkb-fraguli__titel,
.ubkb-buch__link:hover .ubkb-buch__titel {
	text-decoration: underline;
}

/*
 * Links innerhalb der Zeile erben die Schriftfarbe. Im Mockup stehen die
 * Kompetenzbereiche und "Frag Uli" als normaler dunkler Text, nicht in
 * Browserblau. Erkennbar bleiben sie über die Unterstreichung.
 */
.ubkb-artikelzeile a,
.ubkb-artikelzeile a:link,
.ubkb-artikelzeile a:visited,
.ubkb-artikelzeile a:hover,
.ubkb-artikelzeile a:focus,
#et-boc .ubkb-artikelzeile a,
#et-boc .ubkb-artikelzeile a:link,
#et-boc .ubkb-artikelzeile a:visited,
#et-boc .ubkb-artikelzeile a:hover,
#et-boc .ubkb-artikelzeile a:focus {
	color: inherit;
}

.ubkb-artikelzeile a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Spalte 2: Kompetenzbereiche, Name links, Abo-Knopf rechts */

/*
 * Divi setzt auf jede Liste im Inhaltsbereich `padding: 0 0 23px 1em` und
 * `line-height: 26px` (`.et-l--body ul`). Eine einfache Klassenregel verliert
 * dagegen. Deshalb das Element im Selektor: So wiegt unsere Regel schwerer,
 * und die Liste bekommt weder einen Fusssockel noch fremde Zeilenhoehe.
 */
.ubkb ul.ubkb-bereiche,
#et-boc .ubkb ul.ubkb-bereiche {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: inherit;
}

.ubkb-bereich {
	display: flex;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	line-height: 1.5;
}

.ubkb-bereich__name {
	font-size: 0.85rem;
	min-width: 0;
}

.ubkb-bereich__abo {
	flex: 0 0 auto;
	white-space: nowrap;
	opacity: 0.85;
}

/* Spalte 3: Frag Uli, Bild links, Text rechts */

.ubkb-fraguli {
	display: flex;
	/* 6 statt 10 px: Der Titel soll einzeilig bleiben, siehe unten. */
	gap: 6px;
	align-items: center;
	text-decoration: none;
}

.ubkb-fraguli__bild {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	/* Feste Maße, damit beim Laden nichts springt. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/*
	 * Von oben zuschneiden, genau wie die eigene Bildgröße. Fehlt sie und
	 * WordPress liefert das Original aus, sieht der Ausschnitt dann gleich
	 * aus statt plötzlich mittig.
	 */
	object-position: center top;
	border-radius: 50%;
	display: block;
}

.ubkb-fraguli__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/*
 * Der Titel bleibt einzeilig.
 *
 * Gemessen: Neben dem 72 px breiten Porträt bleiben in der Karte 156 px. Der
 * globale Titel "Noch Fragen? Frag Uli" braucht bei 15 px 162 px und bräche
 * um — zwei Zeilen, wo eine gemeint ist. Bei 14 px sind es 151 px, also gut
 * 5 px Luft.
 *
 * Das Porträt bleibt bei 72 px; es kleiner zu machen wäre der teurere Weg.
 * Die Kürzung am Ende ist nur eine Sicherung: Sollte der Titel im JSON einmal
 * länger werden, bekommt er drei Punkte, statt die ganze Zeile höher zu
 * machen und alle vier Karten mitzuziehen.
 */
.ubkb-fraguli__titel {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ubkb-karte-titel);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ubkb-fraguli__zusage {
	font-size: 0.78rem;
	line-height: 1.35;
}

/* Spalte 4: Buch, Cover links, Text rechts */

/* Auf dem Desktop steht das Cover für sich, die Beschriftung stört dort. */
.ubkb-buch__kennzeichnung {
	display: none;
}

.ubkb-buch__link {
	display: flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
}

.ubkb-buch__cover {
	flex: 0 0 auto;
	height: 90px;
	width: auto;
	/*
	 * Die Breite ergibt sich aus dem Seitenverhältnis. Die Grenze fängt ein
	 * ungewöhnlich breites Cover ab, damit es dem Text nicht den Platz nimmt.
	 */
	max-width: 68px;
	object-fit: contain;
	display: block;
}

.ubkb-buch__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ubkb-buch__titel {
	font-size: 0.85rem;
	line-height: 1.3;
}

.ubkb-buch__hinweis {
	font-size: 0.72rem;
	line-height: 1.3;
	opacity: 0.8;
}

/* Partnerlink-Hinweis, steht unter der ganzen Zeile */

.ubkb-partnerhinweis {
	margin: 6px 0 0;
	font-size: 0.72rem;
	line-height: 1.35;
	opacity: 0.8;
}

/*
 * Meta-Zeile und Aktion: linksbündig direkt unter den Karten, mit einer
 * feinen Linie darüber statt frei im Raum.
 */

.ubkb-meta {
	margin: var(--ubkb-abstand-klein) 0 0;
	padding-top: 6px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	text-align: left;
	font-size: 0.78rem;
	line-height: 1.4;
}

.ubkb-aktion {
	margin: 4px 0 0;
	text-align: left;
	font-size: 0.8rem;
	line-height: 1.4;
}

.ubkb-meta__abzeichen {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.08);
	font-size: 0.72rem;
}

/* Handy: aus den Karten werden vier kompakte Textzeilen */

@media (max-width: 767px) {
	.ubkb-zeile {
		display: block;
	}

	/*
	 * Enger als am Schreibtisch: Auf 380 px bleiben pro Karte hoechstens zwei
	 * Zeilen uebrig, und jede eingesparte Zeile ist Platz fuer den Artikel.
	 */
	.ubkb-spalte {
		display: block;
		margin-bottom: 3px;
		padding: 4px 9px;
		line-height: 1.25;
	}

	/* Keine Bilder auf dem Handy: sie kosten die Höhe, die der Artikel braucht. */
	.ubkb-fraguli__bild,
	.ubkb-buch__cover,
	.ubkb-buch__hinweis {
		display: none;
	}

	/* Aus jeder Karte wird eine Zeile. */
	.ubkb-spalte__titel,
	.ubkb-fraguli__titel,
	.ubkb-buch__kennzeichnung {
		display: inline;
		font-size: 0.8rem;
		/* Hier ist der Titel Teil einer Textzeile und darf umbrechen. */
		white-space: normal;
		overflow: visible;
	}

	.ubkb-spalte__titel::after,
	.ubkb-fraguli__titel::after {
		content: ": ";
	}

	/*
	 * Folgt nichts mehr, wäre der Doppelpunkt ein Versprechen ohne Einlösung.
	 * Das passiert in der Format-Spalte, wenn kein Abo möglich ist: Der Text
	 * ist auf dem Handy ausgeblendet, ein Abo-Link fehlt.
	 */
	.ubkb-spalte--format:not(:has(.ubkb-spalte__link)) .ubkb-spalte__titel::after {
		content: "";
	}

	.ubkb-spalte__text {
		display: none;
	}

	.ubkb-spalte__link,
	.ubkb-bereich__name,
	.ubkb-bereich__abo,
	.ubkb-buch__titel,
	.ubkb-fraguli__zusage {
		display: inline;
		font-size: 0.8rem;
	}

	/*
	 * Am Schreibtisch tragen Portraet und Cover die Klickbarkeit: Es sind
	 * Flaechenlinks, eine Linie unter dem Text waere dort zu viel. Auf dem
	 * Handy sind beide Bilder ausgeblendet — dann ist der Text das Einzige,
	 * was man antippen kann, und er muss auch danach aussehen.
	 */
	.ubkb a.ubkb-fraguli .ubkb-fraguli__zusage,
	.ubkb a.ubkb-buch__link .ubkb-buch__titel,
	#et-boc .ubkb a.ubkb-fraguli .ubkb-fraguli__zusage,
	#et-boc .ubkb a.ubkb-buch__link .ubkb-buch__titel {
		text-decoration: underline;
	}

	.ubkb-fraguli,
	.ubkb-fraguli__text,
	.ubkb-buch__link,
	.ubkb-buch__text {
		display: inline;
	}

	/* Die Kompetenzbereiche stehen auf dem Handy in einer Zeile. */
	.ubkb-bereiche,
	.ubkb-bereich {
		display: inline;
	}

	.ubkb-bereich + .ubkb-bereich::before {
		content: " · ";
		opacity: 0.45;
	}

	.ubkb-meta,
	.ubkb-aktion,
	.ubkb-partnerhinweis {
		text-align: left;
	}
}

/* -------------------------------------------------------- Beitragslisten */

.ubkb-beitraege-block + .ubkb-beitraege-block {
	margin-top: var(--ubkb-abstand);
}

.ubkb-beitraege__titel {
	margin: var(--ubkb-abstand) 0 var(--ubkb-abstand-klein);
}

.ubkb-beitraege {
	display: grid;
	grid-template-columns: repeat(var(--ubkb-spalten, 3), minmax(0, 1fr));
	gap: var(--ubkb-abstand);
	align-items: start;
}

/* Liste und Bildliste sind einspaltig, egal was an spalten steht. */
.ubkb-beitraege--liste,
.ubkb-beitraege--kompakt,
.ubkb-beitraege--bildliste {
	grid-template-columns: 1fr;
	gap: var(--ubkb-abstand-klein);
}

.ubkb-beitrag {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ubkb-beitrag__bildlink {
	display: block;
	line-height: 0;
}

.ubkb .ubkb-beitrag__bild,
#et-boc .ubkb .ubkb-beitrag__bild {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ubkb-radius);
}

.ubkb-beitrag__titel {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.3;
	font-weight: 700;
}

.ubkb-beitrag__auszug {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

.ubkb-beitrag__datum {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.3;
	opacity: 0.75;
}

.ubkb-beitraege__mehr {
	margin: var(--ubkb-abstand-klein) 0 0;
	font-size: 0.85rem;
}

/* --- Layout "bildliste": Bild links, Titel und Datum rechts --- */

.ubkb-bildzeile {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	min-width: 0;
}

.ubkb-bildzeile__bild {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
	width: 72px;
	height: 72px;
}

/*
 * Feste Masse und harter Zuschnitt. Die Standardgröße "thumbnail" ist 150 px
 * im Quadrat; hier wird sie nur kleiner gezeichnet. Eine eigene Bildgröße
 * braucht es dafür nicht — und damit auch keinen Lauf über die Mediathek.
 */
.ubkb .ubkb-bildzeile__bild .ubkb-beitrag__bild,
#et-boc .ubkb .ubkb-bildzeile__bild .ubkb-beitrag__bild {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--ubkb-radius);
}

/*
 * Ohne Beitragsbild ein ruhiger Platzhalter in der Kastenfarbe. Ohne ihn
 * sprängen die Zeilen unterschiedlich weit ein, und die Liste sähe kaputt
 * aus — schlimmer als ein leeres Feld.
 */
.ubkb-beitrag__bild--leer {
	display: block;
	background-color: var(--ubkb-platzhalter, #4A5C63);
	opacity: 0.25;
}

.ubkb-bildzeile__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/*
 * Divi legt im Inhaltsbereich auf jedes `p` einen Sockel
 * (`padding-bottom: 1em`). In der Bildzeile ist das ein Loch zwischen Titel
 * und Datum. Neben dem 72 px hohen Vorschaubild fiel es nicht auf; im Anriss
 * der Übersichtsseite, wo das Bild fehlt, sehr wohl. Deshalb hier mit
 * Element im Selektor — dieselbe Ausnahme wie bei den Listen, Befund 22.
 */
.ubkb p.ubkb-bildzeile__titel,
.ubkb p.ubkb-bildzeile__fuss,
#et-boc .ubkb p.ubkb-bildzeile__titel,
#et-boc .ubkb p.ubkb-bildzeile__fuss {
	padding-bottom: 0;
}

/*
 * Fuß der Bildzeile: Etikett und Datum in einer Zeile.
 *
 * `flex-wrap`, damit ein langer Bereichsname das Datum umbricht statt es aus
 * der Karte zu drängen.
 */
.ubkb-bildzeile__fuss {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 6px;
}

.ubkb-bildzeile__datum {
	font-size: 0.75rem;
	line-height: 1.3;
	opacity: 0.75;
}

/*
 * Das Etikett mit dem Kompetenzbereich.
 *
 * Die Farbe kommt als Custom Property aus dem JSON (`kaesten_standard.wissen`),
 * nicht aus dem CSS — sie soll sich mit den Kästen zusammen ändern lassen.
 * Weiß darauf, weil die Kastenfarben dafür ausgesucht sind.
 */
.ubkb a.ubkb-etikett,
.ubkb span.ubkb-etikett,
#et-boc .ubkb a.ubkb-etikett,
#et-boc .ubkb span.ubkb-etikett {
	display: inline-block;
	padding: 1px 6px;
	border-radius: var(--ubkb-radius);
	font-size: 0.68rem;
	line-height: 1.5;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.ubkb a.ubkb-etikett:hover,
.ubkb a.ubkb-etikett:focus,
#et-boc .ubkb a.ubkb-etikett:hover,
#et-boc .ubkb a.ubkb-etikett:focus {
	color: #fff;
	text-decoration: underline;
}

.ubkb-beitrag__etikett {
	margin: 0;
}

/* Höchstens zwei Zeilen, dann Auslassungspunkte. */
.ubkb-bildzeile__titel {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.3;
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Neueste im Bereich: je Kompetenzbereich ein Block --- */

.ubkb-neueste {
	margin: var(--ubkb-abstand) 0 0;
}

.ubkb-neueste__bereich + .ubkb-neueste__bereich {
	margin-top: var(--ubkb-abstand);
	padding-top: var(--ubkb-abstand-klein);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ubkb-neueste__bereich-titel {
	margin: 0 0 var(--ubkb-abstand-klein);
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ubkb-karte-titel);
}

/*
 * Die eingeklappten Blöcke sind `details`/`summary`, also ohne JavaScript.
 * Auf einer Seite mit gecachtem HTML ist das der Weg, der sicher
 * funktioniert.
 */
summary.ubkb-neueste__bereich-titel {
	cursor: pointer;
	list-style: none;
}

summary.ubkb-neueste__bereich-titel::-webkit-details-marker {
	display: none;
}

/* Eigenes Zeichen, damit es in jedem Browser gleich aussieht. */
summary.ubkb-neueste__bereich-titel::before {
	content: "▸";
	display: inline-block;
	width: 1em;
	margin-right: 2px;
	opacity: 0.6;
	transition: transform 0.15s ease;
}

.ubkb-neueste__bereich[open] > summary.ubkb-neueste__bereich-titel::before {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	summary.ubkb-neueste__bereich-titel::before {
		transition: none;
	}
}

summary.ubkb-neueste__bereich-titel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ubkb-neueste__spalten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ubkb-abstand);
	align-items: start;
}

.ubkb-neueste__spalte {
	min-width: 0;
}

.ubkb-neueste__titel {
	margin: 0 0 var(--ubkb-abstand-klein);
	font-size: 0.95rem;
	line-height: 1.3;
	font-weight: 700;
}

.ubkb-neueste__leer {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	opacity: 0.7;
}

@media (max-width: 767px) {
	.ubkb-beitraege {
		grid-template-columns: 1fr;
		gap: var(--ubkb-abstand-klein);
	}

	/* Erst die Fachartikel, dann die Briefings. */
	.ubkb-neueste__spalten {
		grid-template-columns: 1fr;
		gap: var(--ubkb-abstand);
	}

	.ubkb-bildzeile__bild,
	.ubkb .ubkb-bildzeile__bild .ubkb-beitrag__bild,
	#et-boc .ubkb .ubkb-bildzeile__bild .ubkb-beitrag__bild {
		width: 56px;
		height: 56px;
	}
}

@media print {
	.ubkb-neueste,
	.ubkb-beitraege-block {
		display: none;
	}
}

/*
 * Verstecken, das hält.
 *
 * Das Attribut `hidden` allein genügt nicht: Es wirkt über `[hidden] {
 * display: none }` aus dem Browser-Stylesheet, und **jede** Autorenregel
 * schlägt das. Im Archiv war es die eigene Regel `.ubkb-bildzeile { display:
 * flex }` — gefiltert wurde richtig, sichtbar blieb trotzdem alles.
 *
 * Deshalb diese Klasse, und deshalb mit `!important`: Sie muss auch gegen
 * Divi gewinnen, das Formularen und Listen gern eigene Anzeigearten aufdrückt.
 * Das Attribut wird trotzdem mitgesetzt — Vorlesesoftware richtet sich
 * danach.
 */
.ubkb-versteckt,
#et-boc .ubkb-versteckt {
	display: none !important;
}

/* ------------------------------------------------------ Bereichsarchiv */

.ubkb-archiv__bedienung {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ubkb-abstand-klein) var(--ubkb-abstand);
	margin: 0 0 var(--ubkb-abstand);
	padding-bottom: var(--ubkb-abstand-klein);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ubkb-archiv__suche {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 220px;
}

.ubkb-archiv__beschriftung {
	font-size: 0.78rem;
	line-height: 1.3;
	opacity: 0.8;
}

/*
 * Das Suchfeld erbt die gemeinsamen Formularmaße; `type="search"` ist dort
 * mit aufgeführt.
 */
.ubkb .ubkb-archiv__feld,
#et-boc .ubkb .ubkb-archiv__feld {
	width: 100%;
	font-size: 0.9rem;
	padding: 0.4em 0.7em;
}

.ubkb-archiv__gruppe,
.ubkb-archiv__umschalter {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/*
 * Schalter und Chips sind `button`, und für `button` gilt im Plugin sonst
 * die dunkle Absendeschaltfläche. Deshalb hier eigene Regeln, mit Klasse
 * statt Element — sonst sähe die ganze Bedienleiste aus wie eine Reihe von
 * Absendeknöpfen.
 */
.ubkb .ubkb-archiv__schalter,
.ubkb .ubkb-archiv__chip,
.ubkb .ubkb-archiv__mehr,
#et-boc .ubkb .ubkb-archiv__schalter,
#et-boc .ubkb .ubkb-archiv__chip,
#et-boc .ubkb .ubkb-archiv__mehr {
	font-family: inherit;
	font-size: 0.8rem;
	line-height: 1.3;
	padding: 0.35em 0.75em;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: var(--ubkb-radius);
	background-color: transparent;
	color: inherit;
	cursor: pointer;
}

.ubkb .ubkb-archiv__schalter:hover,
.ubkb .ubkb-archiv__chip:hover,
.ubkb .ubkb-archiv__mehr:hover,
#et-boc .ubkb .ubkb-archiv__schalter:hover,
#et-boc .ubkb .ubkb-archiv__chip:hover,
#et-boc .ubkb .ubkb-archiv__mehr:hover {
	background-color: var(--ubkb-karte-hintergrund);
}

/* Gedrückt heißt: aktiv. Das steht auch im aria-pressed. */
.ubkb .ubkb-archiv__schalter[aria-pressed="true"],
.ubkb .ubkb-archiv__chip[aria-pressed="true"],
#et-boc .ubkb .ubkb-archiv__schalter[aria-pressed="true"],
#et-boc .ubkb .ubkb-archiv__chip[aria-pressed="true"] {
	background-color: #2f4550;
	border-color: #2f4550;
	color: #fff;
}

.ubkb-archiv__chip-zahl {
	opacity: 0.7;
}

.ubkb .ubkb-archiv__schalter:focus-visible,
.ubkb .ubkb-archiv__chip:focus-visible,
.ubkb .ubkb-archiv__mehr:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Der Umschalter gehört aufs Handy. */
.ubkb-archiv__umschalter {
	display: none;
}

.ubkb-archiv__spalten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ubkb-abstand);
	align-items: start;
}

.ubkb-archiv__spalte {
	min-width: 0;
}

.ubkb-archiv__titel {
	margin: 0 0 var(--ubkb-abstand-klein);
	font-size: 0.95rem;
	line-height: 1.3;
	font-weight: 700;
}

.ubkb-archiv__zahl {
	font-weight: 400;
	opacity: 0.7;
}

.ubkb-archiv__zahl::before {
	content: "(";
}

.ubkb-archiv__zahl::after {
	content: ")";
}

.ubkb-archiv__leer {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	opacity: 0.7;
}

.ubkb .ubkb-archiv__mehr,
#et-boc .ubkb .ubkb-archiv__mehr {
	margin-top: var(--ubkb-abstand-klein);
}

/* Im Archiv stehen sehr viele Zeilen; sie dürfen enger sitzen. */
.ubkb-archiv .ubkb-beitraege--bildliste {
	gap: 6px;
}

@media (max-width: 767px) {
	.ubkb-archiv__spalten {
		grid-template-columns: 1fr;
		gap: var(--ubkb-abstand);
	}

	.ubkb-archiv__umschalter {
		display: flex;
	}

	/*
	 * Eine Spalte zur Zeit — aber nur, wenn JavaScript gelaufen ist. Die
	 * Klasse `--gewaehlt` setzt erst das Skript. Ohne JavaScript greift die
	 * Regel nicht, und beide Listen stehen untereinander.
	 */
	.ubkb-archiv__spalten:has(.ubkb-archiv__spalte--gewaehlt) .ubkb-archiv__spalte:not(.ubkb-archiv__spalte--gewaehlt) {
		display: none;
	}
}

@media print {
	.ubkb-archiv__bedienung {
		display: none;
	}
}

/* ------------------------------------------------------ Übersichtsseite */

.ubkb-uebersicht__abschnitt + .ubkb-uebersicht__abschnitt {
	margin-top: calc(var(--ubkb-abstand) * 3);
}

.ubkb-uebersicht__abschnitt-titel,
.ubkb-uebersicht__gruppe {
	/* Sprungmarken aus dem Menü sollen nicht unter dem festen Kopf landen. */
	scroll-margin-top: calc(var(--ubkb-kopf-hoehe) + 1rem);
}

.ubkb-uebersicht__abschnitt-titel {
	margin: 0 0 calc(var(--ubkb-abstand) * 1.5);
}

/*
 * Die Gruppe ist ein `p` und keine Überschrift — sie steht zwischen dem `h2`
 * des Abschnitts und den `h3` der Karten, und beide Ebenen sind vergeben.
 * Aussehen soll sie trotzdem wie eine Zwischenüberschrift, sonst liest sie
 * niemand als eine.
 *
 * Deutlich mehr Luft nach oben als nach unten: Eine Zwischenüberschrift
 * gehört zu dem, was unter ihr steht, nicht zu dem, was über ihr endet.
 */
.ubkb-uebersicht__gruppe {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: calc(var(--ubkb-abstand) * 2) 0 var(--ubkb-abstand-klein);
	padding-top: var(--ubkb-abstand);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ubkb-karte-titel);
}

/* Der Balken in der Farbe des Wissen-Kastens. */
.ubkb-uebersicht__gruppe::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 1.1em;
	border-radius: 2px;
	background-color: var(--ubkb-gruppe-balken, #56929B);
}

/* Die erste Gruppe eines Abschnitts braucht die Linie nicht: Darüber steht
   schon die Abschnittsüberschrift. */
.ubkb-uebersicht__abschnitt-titel + .ubkb-uebersicht__gruppe {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Divi legt auf jedes `p` im Inhaltsbereich einen Sockel, siehe Befund 44. */
.ubkb p.ubkb-uebersicht__gruppe,
#et-boc .ubkb p.ubkb-uebersicht__gruppe {
	padding-bottom: 0;
}

/* Bedienleiste: erst sichtbar, wenn JavaScript sie einschaltet. */
.ubkb-uebersicht__bedienung {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ubkb-abstand-klein);
	margin: 0 0 var(--ubkb-abstand);
}

.ubkb-uebersicht__suche {
	display: flex;
	flex-direction: column;
	gap: 3px;
	/* Nicht breiter als nötig: Ein Suchfeld über die ganze Seite verspricht
	   eine Volltextsuche, die es hier nicht gibt. */
	flex: 1 1 260px;
	max-width: 420px;
	min-width: 0;
}

.ubkb-uebersicht__beschriftung {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ubkb-karte-titel);
}

/* Wie beim Archivfeld: Divi legt auf Eingabefelder eigene Maße. */
.ubkb .ubkb-uebersicht__feld,
#et-boc .ubkb .ubkb-uebersicht__feld {
	width: 100%;
	font-size: 0.9rem;
	padding: 0.4em 0.7em;
}

.ubkb-uebersicht__gruppe-wahl {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/*
 * Dieselbe Begründung wie bei den Archiv-Chips: `button` trägt im Plugin
 * sonst die dunkle Absendeschaltfläche, deshalb eigene Regeln mit Klasse
 * statt Element und mit #et-boc gegen Divi.
 */
.ubkb .ubkb-uebersicht__chip,
#et-boc .ubkb .ubkb-uebersicht__chip {
	font-family: inherit;
	font-size: 0.8rem;
	line-height: 1.3;
	padding: 0.35em 0.75em;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: var(--ubkb-radius);
	background-color: transparent;
	color: inherit;
	cursor: pointer;
}

.ubkb .ubkb-uebersicht__chip:hover,
#et-boc .ubkb .ubkb-uebersicht__chip:hover {
	background-color: var(--ubkb-karte-hintergrund);
}

.ubkb .ubkb-uebersicht__chip[aria-pressed="true"],
#et-boc .ubkb .ubkb-uebersicht__chip[aria-pressed="true"] {
	background-color: #2f4550;
	border-color: #2f4550;
	color: #fff;
}

.ubkb .ubkb-uebersicht__chip:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ubkb-uebersicht__zahl:not(:empty) {
	flex: 1 0 100%;
	margin: 0;
	font-size: 0.8rem;
	opacity: 0.75;
}

.ubkb-uebersicht__leer {
	margin: var(--ubkb-abstand) 0;
	font-size: 0.9rem;
	opacity: 0.75;
}

.ubkb-uebersicht__raster {
	display: grid;
	grid-template-columns: repeat(var(--ubkb-spalten, 2), minmax(0, 1fr));
	gap: var(--ubkb-abstand);
	/*
	 * Jede Karte so hoch, wie ihr Inhalt es verlangt. `stretch` sähe in der
	 * Ruhelage ordentlicher aus, zieht aber die Nachbarin mit in die Länge,
	 * sobald eine Karte aufgeklappt wird — daneben stünde dann ein
	 * handhohes Loch.
	 */
	align-items: start;
	margin: 0 0 var(--ubkb-abstand);
}

/*
 * Drei Karten nebeneinander sind auf einem Schreibtischbildschirm richtig,
 * auf einem Tablet zu eng: Titel, zwei Schaltflächen und die Zahlenzeile
 * brauchen zusammen gut 280 px, sonst bricht die Zahlenzeile dreifach um.
 */
@media (max-width: 1023px) {
	.ubkb-uebersicht__raster {
		grid-template-columns: repeat(min(var(--ubkb-spalten, 3), 2), minmax(0, 1fr));
	}
}

.ubkb-karte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 14px 16px;
	background-color: var(--ubkb-karte-hintergrund);
	border-radius: var(--ubkb-radius);
	/* Ein Aufruf mit #slug soll die Karte nicht unter den festen Kopf legen. */
	scroll-margin-top: calc(var(--ubkb-kopf-hoehe) + 1rem);
}

/*
 * Links alles an Text — Titel, Teaser, Schaltflächen, Zahlenzeile —, rechts
 * das Buchcover daneben. Stünde das Cover nur neben Titel und Teaser, bliebe
 * bei einem Bereich ohne Teaser darunter ein Loch neben dem Bild.
 */
.ubkb-karte__kopf {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ubkb-karte__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ubkb-karte__titel {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ubkb-karte-titel);
}

.ubkb-karte__teaser {
	margin: 4px 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

.ubkb-karte__buch {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

.ubkb-karte__cover {
	display: block;
	height: 72px;
	width: auto;
	max-width: 56px;
	object-fit: contain;
	border-radius: 2px;
}

.ubkb-karte__knoepfe {
	margin: 0;
	padding-top: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/*
 * Farbige Schaltflächen sind `a`, und auf Links legt Divi seine eigene
 * Farbe. Deshalb hier mit #et-boc — dieselbe Ausnahme wie bei den Kästen.
 */
.ubkb .ubkb-karte__knopf,
#et-boc .ubkb .ubkb-karte__knopf {
	display: inline-block;
	padding: 0.5em 1em;
	font-size: 0.8rem;
	line-height: 1.2;
	font-weight: 600;
	color: var(--ubkb-kasten-text);
	background-color: var(--ubkb-knopf, #2f4550);
	border-radius: var(--ubkb-radius);
	text-decoration: none;
}

.ubkb .ubkb-karte__knopf:hover,
.ubkb .ubkb-karte__knopf:focus,
#et-boc .ubkb .ubkb-karte__knopf:hover,
#et-boc .ubkb .ubkb-karte__knopf:focus {
	color: var(--ubkb-kasten-text);
	text-decoration: underline;
}

.ubkb .ubkb-karte__knopf--abo,
#et-boc .ubkb .ubkb-karte__knopf--abo {
	background-color: #2f4550;
	cursor: pointer;
}

.ubkb-karte__zahlen {
	margin: 0;
	font-size: 0.8rem;
	opacity: 0.8;
}

.ubkb-karte__neu {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	font-size: 0.7rem;
	font-weight: 700;
	color: #fff;
	background-color: #2f7d32;
	border-radius: 999px;
}

/* Aufklappbares Archiv je Karte. */
.ubkb-karte__archiv {
	margin: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	padding-top: 8px;
}

.ubkb-karte__aufklapp {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ubkb-karte-titel);
	cursor: pointer;
}

.ubkb-karte__archiv-inhalt {
	margin-top: 10px;
}

.ubkb-karte__anriss {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ubkb-abstand-klein);
}

.ubkb-karte__anriss-spalte {
	min-width: 0;
}

.ubkb-karte__anriss-titel {
	margin: 0 0 6px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ubkb-karte-titel);
}

.ubkb-karte__anriss-zahl {
	font-weight: 400;
	opacity: 0.7;
}

.ubkb-karte__mehr {
	margin: var(--ubkb-abstand-klein) 0 0;
	font-size: 0.85rem;
}

/* Im aufgeklappten Archiv sitzen die Listen enger als auf der Pillar-Seite. */
.ubkb-karte__archiv-inhalt .ubkb-archiv {
	margin: 0;
}

@media (max-width: 767px) {
	.ubkb-uebersicht__raster {
		grid-template-columns: 1fr;
		gap: var(--ubkb-abstand-klein);
	}

	/*
	 * Einspaltig: Cover unter den Text, Schaltflächen nebeneinander. Genau
	 * das steht im Auftrag, und nebeneinander passen zwei Knöpfe auch auf
	 * 380 px noch — untereinander wären es zwei volle Zeilen für nichts.
	 */
	.ubkb-karte__kopf {
		flex-direction: column;
	}

	.ubkb-karte__buch {
		align-self: flex-start;
	}

	.ubkb-karte__anriss {
		grid-template-columns: 1fr;
	}
}

@media print {
	.ubkb-karte__knoepfe,
	.ubkb-uebersicht__bedienung {
		display: none;
	}

	/* Auf Papier nützt ein zugeklapptes details nichts. */
	.ubkb-karte__archiv {
		display: none;
	}
}

/* Druck: Kästen, Zeile, Abo und Frag Uli gehören nicht aufs Papier. */

@media print {
	.ubkb-artikelzeile {
		display: none;
	}
}

/* ------------------------------------------------- Formulare gemeinsam */

/*
 * Divi drückt Formularfeldern eine eigene Schrift und eigene Innenabstände
 * auf. Beides wird hier zurückgeholt, sonst sähen die Felder aus wie aus
 * einem anderen Formular. Die Aufzählung ist absichtlich ausführlich: Divi
 * greift über Elementselektoren zu, und eine Klasse allein gewinnt nicht
 * immer.
 */
.ubkb input[type="email"],
.ubkb input[type="text"],
.ubkb input[type="search"],
.ubkb textarea,
.ubkb button,
#et-boc .ubkb input[type="email"],
#et-boc .ubkb input[type="text"],
#et-boc .ubkb input[type="search"],
#et-boc .ubkb textarea,
#et-boc .ubkb button {
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	/* Gleiche Innenabstände überall, damit Feld und Knopf gleich hoch werden. */
	padding: 0.6em 0.85em;
	border-radius: var(--ubkb-radius);
}

.ubkb input[type="email"],
.ubkb input[type="text"],
.ubkb input[type="search"],
.ubkb textarea,
#et-boc .ubkb input[type="email"],
#et-boc .ubkb input[type="text"],
#et-boc .ubkb input[type="search"],
#et-boc .ubkb textarea {
	border: 1px solid rgba(0, 0, 0, 0.3);
	background-color: #fff;
	color: inherit;
}

.ubkb button,
#et-boc .ubkb button {
	border: 1px solid transparent;
	background-color: #2f4550;
	color: #fff;
	cursor: pointer;
}

.ubkb button:hover,
.ubkb button:focus-visible,
#et-boc .ubkb button:hover,
#et-boc .ubkb button:focus-visible {
	background-color: #1f2f37;
}

.ubkb button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ------------------------------------------------------------------ Abo */

.ubkb-abo {
	margin: var(--ubkb-abstand) 0;
	padding: var(--ubkb-abstand);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--ubkb-radius);
	background-color: rgba(0, 0, 0, 0.03);
}

.ubkb-abo__titel {
	display: inline;
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.25;
}

.ubkb-abo__aufklapp {
	margin-bottom: var(--ubkb-abstand-klein);
	cursor: pointer;
	list-style-position: outside;
}

/* Aufgeklappt braucht es den Hinweis "hier klicken" nicht mehr. */
.ubkb-abo__klapp[open] > .ubkb-abo__aufklapp {
	cursor: default;
}

.ubkb-abo__klapp:not([open]) > .ubkb-abo__aufklapp::after {
	content: " – jetzt abonnieren";
	font-size: 0.9rem;
	opacity: 0.75;
}

.ubkb-abo__danke {
	margin: 0 0 var(--ubkb-abstand-klein);
	font-weight: 600;
}

.ubkb-abo__auswahl {
	margin: 0 0 var(--ubkb-abstand-klein);
	padding: 0;
	border: 0;
}

.ubkb-abo__legende {
	padding: 0;
	font-size: 0.85rem;
	opacity: 0.8;
}

.ubkb-abo__option {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 var(--ubkb-abstand) 4px 0;
	font-size: 0.9rem;
	cursor: pointer;
}

.ubkb-abo__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ubkb-abstand-klein);
	align-items: center;
}

.ubkb-abo__beschriftung {
	/* Für Vorlesewerkzeuge da, sichtbar genügt der Platzhalter. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ubkb-abo__email {
	flex: 1 1 240px;
	min-width: 0;
}

.ubkb-abo__knopf {
	flex: 0 0 auto;
	padding-left: 1.4em;
	padding-right: 1.4em;
}

.ubkb-abo__einwilligung {
	margin: var(--ubkb-abstand-klein) 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	opacity: 0.85;
}

/*
 * Der Honigtopf darf nicht display:none sein: Manche Robots erkennen das und
 * lassen das Feld dann leer. Er wird stattdessen aus dem Blickfeld geschoben.
 */
.ubkb-honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------- Frag Uli */

.ubkb-fragen {
	margin: var(--ubkb-abstand) 0;
	padding: var(--ubkb-abstand);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--ubkb-radius);
}

.ubkb-fragen__kopf {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ubkb-abstand);
	align-items: flex-start;
	margin-bottom: var(--ubkb-abstand);
}

.ubkb-fragen__bild {
	flex: 0 0 auto;
	width: 110px;
	height: 110px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
	display: block;
}

.ubkb-fragen__text {
	flex: 1 1 260px;
	min-width: 0;
}

.ubkb-fragen__titel {
	margin: 0 0 4px;
	font-size: 1.3rem;
	line-height: 1.25;
}

.ubkb-fragen__einleitung {
	margin: 0 0 4px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.ubkb-fragen__zusage {
	margin: 0;
	/* Schrift wie der Rest der Seite, nicht wie Divis Formularschrift. */
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
}

.ubkb-fragen__danke {
	margin: 0;
	font-weight: 600;
}

.ubkb-fragen__feld {
	margin-bottom: var(--ubkb-abstand-klein);
}

.ubkb-fragen__beschriftung {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ubkb-fragen__eingabe {
	display: block;
	width: 100%;
	resize: vertical;
}

.ubkb-fragen__zaehler {
	margin: 2px 0 0;
	text-align: right;
	font-size: 0.75rem;
	opacity: 0.7;
	/* Feste Höhe, damit nichts springt, wenn der Zähler erscheint. */
	min-height: 1.1em;
}

.ubkb-fragen__zaehler--knapp {
	color: #b32d2e;
	opacity: 1;
}

.ubkb-fragen__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ubkb-abstand-klein);
	align-items: center;
}

.ubkb-fragen__email {
	flex: 1 1 240px;
	min-width: 0;
}

.ubkb-fragen__knopf {
	flex: 0 0 auto;
	padding-left: 1.4em;
	padding-right: 1.4em;
}

.ubkb-fragen__datenschutz {
	margin: var(--ubkb-abstand-klein) 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	opacity: 0.85;
}

@media (max-width: 767px) {
	.ubkb-fragen__bild {
		width: 72px;
		height: 72px;
	}
}

/*
 * Ein Sprunglink ohne Ziel wird von ubkb.js zu reinem Text. Dann soll er auch
 * nicht mehr wie ein Link aussehen.
 */
.ubkb .ubkb-sprung--tot,
#et-boc .ubkb .ubkb-sprung--tot {
	cursor: default;
	text-decoration: none;
}

/* --------------------------------------------------------- Vorschau */

/*
 * Der Hinweis im Vorschau-Modus. Er soll sich deutlich vom Artikel abheben,
 * damit niemand verwechselt, was schon auf der Seite steht und was nur für
 * diesen Aufruf eingeblendet wurde.
 */
.ubkb-vorschau-hinweis {
	margin: 0 0 var(--ubkb-abstand);
	padding: 10px 14px;
	border-left: 4px solid #d19d27;
	background-color: rgba(209, 157, 39, 0.12);
	font-size: 0.85rem;
	line-height: 1.5;
}

/* Auf Papier hat der Hinweis nichts verloren. */
@media print {
	.ubkb-vorschau-hinweis {
		display: none;
	}
}

/* ------------------------------------------------------------- Druck */

@media print {
	.ubkb-kaesten,
	.ubkb-abo,
	.ubkb-fragen {
		display: none;
	}
}