@charset "UTF-8";
/*
 * Kölner Karneval – Relaunch
 * Umsetzung des Stitch-Entwurfs „Karneval Magazin Editorial“.
 *
 * Aufbau
 *  01 Schriften
 *  02 Merkmalswerte (Farben, Typo, Abstände)
 *  03 Grundlagen & Hilfsklassen
 *  04 Kopfbereich
 *  05 Raster & Abschnitte
 *  06 Karten
 *  07 Randspalte
 *  08 Artikel
 *  09 Eigene Inhaltstypen
 *  10 Formulare, Knöpfe, Auszeichnungen
 *  11 Kommentare
 *  12 Fußbereich
 *  13 Kleine Bildschirme
 */

/* ==========================================================================
   01 Schriften – selbst gehostet, keine Anfrage an Dritte
   ========================================================================== */

@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("../fonts/oswald-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("../fonts/oswald-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/open-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   02 Merkmalswerte
   ========================================================================== */

:root {
	/* Flächen (warmer Blush-Kanon des Entwurfs) */
	--kk-surface: #fff8f7;
	--kk-surface-dim: #f3d3cf;
	--kk-lowest: #ffffff;
	--kk-low: #fff0ee;
	--kk-container: #ffe9e6;
	--kk-high: #ffe2de;
	--kk-highest: #fcdbd7;

	/* Schrift auf Fläche */
	--kk-on-surface: #281715;
	--kk-on-surface-var: #5c403c;
	--kk-outline: #916f6b;
	--kk-outline-var: #e6bdb8;

	/*
	 * Marke
	 *
	 * EIN Haus-Rot (23.09.2026). BELEGT, gemessen 22.09.2026 auf der
	 * Testkopie über elf Seitentypen: im Bestand standen VIER Rot
	 * nebeneinander — #94000b (Haus), #9e0a12, #c8102e (Kneipenführer,
	 * kommt aus dem Plugin-Snippet, nicht von hier) und #e81710. Jedes
	 * für sich plausibel, zusammen kein System. Ein Portal, das „Kölner
	 * Karneval" heisst, hat genau ein Rot.
	 */
	--kk-primary: #94000b;
	--kk-primary-container: #c00814;
	--kk-on-primary: #ffffff;

	/*
	 * Alias auf das Haus-Rot, vormals #9e0a12.
	 *
	 * Der Unterschied betrug 10/10/7 Stufen und war auf keinem der
	 * gemessenen Bildschirme als Absicht erkennbar — es waren zwei
	 * Entscheidungen, die nie gegeneinander geprüft wurden. Der Name
	 * bleibt vorerst stehen, damit die 16 Fundstellen in kk.css UND
	 * kk-integration.css in einem Zug folgen, ohne dass jemand in beiden
	 * Dateien gleichzeitig arbeiten muss.
	 * NACHARBEIT: Fundstellen auf --kk-primary umschreiben, dann löschen.
	 */
	--kk-carmine-deep: #94000b;

	/*
	 * NUR NOCH Fokusakzent auf dunklem Grund (23.09.2026).
	 *
	 * Trug bis heute zusätzlich die Wortmarke im Fussbereich: #e81710 auf
	 * #1a1a1a ergibt 3.78, AA verlangt 4.5 — ausgerechnet der Markenname
	 * lag unter der Schwelle.
	 *
	 * Durchgerechnet: Bei Farbton 355,5 Grad erreicht KEIN Rot die 4.5
	 * auf #1a1a1a, ohne neonfarben zu werden (#ff1f2f = 4.55). Rot hat
	 * schlicht zu wenig Eigenhelligkeit. Ein aufgehelltes Haus-Rot wäre
	 * also entweder immer noch zu dunkel oder keine Marke mehr.
	 *
	 * Die Wortmarke steht deshalb jetzt in Weiss (17.4) — auf dunklem
	 * Grund ist das die übliche und die richtige Lösung, und sie ordnet
	 * den Fussbereich zugleich sauber: Wortmarke am hellsten, Spalten-
	 * titel in Gold (8.28) darunter.
	 *
	 * Als Schriftfarbe ist der Wert damit erledigt. Er BLEIBT für den
	 * Fokusrahmen der Felder in .kk-dunkelbox: dort steht er auf dunklem
	 * Grund, erreicht 3.78 und damit die 3:1 für Bedienelemente, während
	 * ein Fokusrahmen im dunklen Haus-Rot (#94000b, 1.88 gegen Dunkel)
	 * praktisch unsichtbar wäre. Das ist die eine Stelle, an der das helle
	 * Rot eine Aufgabe hat.
	 *
	 * Letzte Fundstelle als Schriftfarbe: kk-integration.css:1772 — siehe
	 * den Hinweis an .kk-footer__titel--marke weiter unten.
	 */
	--kk-carmine-bright: #e81710;

	/* Akzente */
	--kk-navy: #003870;
	--kk-navy-deep: #002b59;
	--kk-secondary: #405f90;
	--kk-secondary-container: #a8c8ff;
	--kk-gold: #d4af37;
	--kk-gold-light: #f5e8be;
	--kk-charcoal: #1a1a1a;
	--kk-ticker: #0d0d0e;
	--kk-newsprint: #f7f7f8;
	--kk-divider: #e5e5e7;

	/* Schriften */
	--kk-font-head: "Oswald", "Arial Narrow", system-ui, sans-serif;
	--kk-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Schriftgrade – fließend zwischen Telefon und Schreibtisch */
	--kk-fs-hero: clamp(2rem, 1.35rem + 2.6vw, 3rem);      /* 32 → 48 px */
	--kk-lh-hero: 1.12;
	--kk-fs-lg: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);      /* 24 → 32 px */
	--kk-lh-lg: 1.18;
	--kk-fs-md: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem); /* 18 → 22 px */
	--kk-lh-md: 1.27;
	--kk-fs-sm: 1.125rem;                                   /* 18 px */
	--kk-lh-sm: 1.33;
	--kk-fs-lead: 1.125rem;
	--kk-lh-lead: 1.56;
	--kk-fs-body: 1rem;
	--kk-lh-body: 1.63;
	--kk-fs-body-md: 0.875rem;
	--kk-lh-body-md: 1.57;
	--kk-fs-body-sm: 0.8125rem;
	--kk-lh-body-sm: 1.5;
	--kk-fs-caps: 0.75rem;
	--kk-fs-meta: 0.75rem;

	/* Abstände nach dem 4-/8-Punkt-Raster des Entwurfs */
	--kk-xs: 0.25rem;
	--kk-sm: 0.5rem;
	--kk-md: 1rem;
	--kk-lg: 1.5rem;
	--kk-xl: 2.5rem;
	--kk-gutter: 1rem;
	--kk-rand: 1rem;

	/*
	 * Abstand zwischen den Abschnitten der Seite, fließend 32 → 48 px.
	 *
	 * Bewusst die vierte Stufe neben 8/16 (im Baustein) und 24 (Rasterrinne):
	 * solange Abschnittsabstand gleich Kartenabstand ist, liest das Auge eine
	 * Liste statt einer Gliederung. Die Tafeln sind schwere weiße Flächen mit
	 * Rahmen und Schatten; --kk-xl (40 px) ist dafür zu knapp.
	 */
	--kk-abschnitt: clamp(2rem, 1.25rem + 2.2vw, 3rem);

	/*
	 * Abstand vom Seitenkopf zum ersten Inhalt, fliessend 24 -> 32 px.
	 *
	 * Bewusst KLEINER als --kk-abschnitt (48 px): der Seitenkopf ist die
	 * Kopfzeile seines Inhalts, kein eigener Abschnitt. Solange beide gleich
	 * gross sind, schwimmt die Ueberschrift zwischen zwei Abschnitten - genau
	 * der beanstandete Eindruck (gemessen 64 px mit Einleitung, 72 px ohne).
	 */
	--kk-kopfabstand: clamp(1.5rem, 1rem + 1.4vw, 2rem);

	/*
	 * Beschnittanker für alle Bildrahmen. Deckungsgleich mit dem Anker
	 * array( 'center', 'top' ) aller sechs Bildgrößen in inc/setup.php –
	 * ein Bild sieht damit gleich aus, egal ob der Zuschnitt aus der
	 * Mediathek kommt oder der Browser beschneidet.
	 *
	 * Der Anker bleibt auch nach einem Zuschnittlauf nötig: mehrere
	 * Originale im Bestand sind nur 958–960 px breit, daraus erzeugt
	 * WordPress kein kk-lead (1200 px) – dort beschneidet der Browser.
	 *
	 * Merkmalswert, nicht fester Wert: einzelne Rahmen überschreiben ihn
	 * (siehe .kk-chronik__bild).
	 */
	--kk-bildanker: 50% 0%;

	/* Form */
	--kk-r-xs: 0.125rem;
	--kk-r: 0.25rem;
	--kk-r-lg: 0.5rem;
	--kk-r-pill: 9999px;

	/* Tiefe: newsprint-flach, kein Schatten-Theater */
	--kk-schatten-1: 0 1px 2px rgb(40 23 21 / 6%);
	--kk-schatten-2: 0 4px 16px -2px rgb(192 8 20 / 8%);
	--kk-schatten-bar: 0 1px 8px rgb(0 0 0 / 4%);

	--kk-max: 1280px;
	--kk-kopf-hoehe: 132px;
}

@media (min-width: 1024px) {
	:root {
		--kk-gutter: 1.5rem;
		--kk-rand: 2.5rem;
		--kk-kopf-hoehe: 176px;
	}
}

/* ==========================================================================
   03 Grundlagen
   ========================================================================== */

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

/*
 * KEIN `scroll-behavior: smooth` (entfernt am 22.09.2026).
 *
 * Die Chronikseite /karnevalsgeschichte/ ist gemessen 77.099 px hoch. Eine
 * weiche Bewegung über rund 69.000 px und 246 Einträge ist keine Animation
 * mehr, sondern eine Reise – und sie verwischt das Ziel für ALLE Nutzer, nicht
 * nur für bewegungsempfindliche. CSS kann die Sprungdistanz nicht
 * unterscheiden, eine Medienabfrage hätte den kurzen Fall also nicht vom
 * langen getrennt. Bei Seitenhöhen dieser Größenordnung ist der kurze Fall der
 * Ausnahmefall, deshalb gestrichen und nicht entschärft.
 *
 * `scroll-padding-top` bleibt und ist der Ausgleich für den klebenden Kopf –
 * er sitzt richtig am Scroll-Container, nicht am Sprungziel. Ein zusätzliches
 * `scroll-margin-top` an den Zielen würde den Abstand verdoppeln und das Ziel
 * um 192 px zu tief ablegen.
 */
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--kk-kopf-hoehe) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Gürtel und Hosenträger: `scroll-behavior: smooth` ist oben gestrichen,
	 * diese Zeile bleibt trotzdem stehen – falls es jemand wieder einführt,
	 * greift zumindest die Medienabfrage.
	 */
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body.kk-body {
	margin: 0;
	background: var(--kk-surface);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body);
	line-height: var(--kk-lh-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	padding-bottom: 0;
}

img,
picture,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--kk-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--kk-carmine-deep);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--kk-sm);
	font-family: var(--kk-font-head);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

p {
	margin: 0 0 var(--kk-md);
}

ul,
ol {
	margin: 0 0 var(--kk-md);
	padding-left: 1.25rem;
}

hr {
	height: 1px;
	margin: var(--kk-lg) 0;
	border: 0;
	background: var(--kk-divider);
}

/*
 * Tastaturbedienung sichtbar machen – gleiche Marke, klarer Kontrast.
 *
 * BEWUSST OHNE `:where()` (geaendert 22.09.2026). `:where()` setzt die
 * Spezifitaet auf null; jede beliebige Komponentenregel gewann damit gegen
 * diese hier. Genau so war der Fokusring am Suchfeld verschwunden -
 * `.kk-suche input.kk-suche__feld:focus` (zwei Klassen plus Element) setzte
 * dort `outline: none` und ersetzte den Ring durch einen 1,5-px-Schatten, der
 * kein Ring ist.
 *
 * Ohne `:where()` hat die Regel die Spezifitaet einer Klasse. Das ist wenig,
 * aber nicht null - und sie steht nun im Wettbewerb statt daneben.
 *
 * EIN Fokusbild auf der ganzen Seite ist der Sinn der Sache. Es gibt deshalb
 * KEINEN eigenen Ring am Suchfeld.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--kk-primary-container);
	outline-offset: 2px;
	border-radius: var(--kk-r-xs);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.kk-skip {
	position: absolute;
	top: -100px;
	left: var(--kk-md);
	z-index: 200;
	padding: 0.75rem 1.25rem;
	border-radius: var(--kk-r);
	background: var(--kk-primary);
	color: var(--kk-on-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-sm);
	text-decoration: none;
	transition: top 0.15s ease;
}

.kk-skip:focus {
	top: var(--kk-sm);
	color: var(--kk-on-primary);
}

.kk-wrap {
	width: 100%;
	max-width: var(--kk-max);
	margin: 0 auto;
	padding-inline: var(--kk-rand);
}

.kk-icon {
	flex: 0 0 auto;
	vertical-align: -0.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Flächen innerhalb eines Symbols (Punkte, Zitatzeichen) behalten ihre Füllung. */
.kk-icon [fill="currentColor"] {
	fill: currentColor;
	stroke: none;
}

.kk-main {
	display: block;
	min-height: 50vh;

	/*
	 * Oben 16 statt 24 px: das erste Element ist auf fast allen Vorlagen die
	 * Brotkrume, eine Haarlinie von 21 px Hoehe. 24 px Polster darueber
	 * setzten sie als eigenen Abschnitt ab, obwohl sie zum Kopf gehoert.
	 */
	padding-block: var(--kk-md) var(--kk-xl);
}

/* Bildflächen */
.kk-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--kk-highest);
	border-radius: var(--kk-r);
}

.kk-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--kk-bildanker);
	/* Gleicher Ursprung wie der Beschnitt, sonst wandert das Motiv beim
	   Hover-Zoom um rund 5 px nach unten. */
	transform-origin: var(--kk-bildanker);
	transition: transform 0.5s ease;
}

/*
 * Kleines Vorschaubild (Kompaktkarte): 3:2 wie kk-thumb (400×267).
 *
 * Vorher 4:3 bzw. 1:1 – damit wurde ein bereits oben beschnittenes
 * 3:2-Bild ein zweites Mal beschnitten, unter 640 px seitlich um 33 %.
 * Regel im ganzen Haus: alle Nachrichtenrahmen 3:2, alle Porträtrahmen 3:4.
 */
.kk-media--klein {
	aspect-ratio: 3 / 2;
}

.kk-media--portrait {
	aspect-ratio: 3 / 4;
}

/* ==========================================================================
   04 Kopfbereich
   ========================================================================== */

.kk-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgb(255 248 247 / 97%);
	box-shadow: var(--kk-schatten-bar);
}

/* Milchglas wie im Entwurf – nur wo der Browser es beherrscht. */
@supports (backdrop-filter: blur(12px)) {
	.kk-header {
		background: rgb(255 248 247 / 90%);
		backdrop-filter: blur(12px);
	}
}

/* -- Servicezeile -------------------------------------------------------- */

.kk-topbar {
	background: var(--kk-ticker);
	color: var(--kk-on-primary);
	font-size: var(--kk-fs-body-sm);
}

.kk-topbar__inner {
	display: flex;
	align-items: center;
	gap: var(--kk-md);
	min-height: 34px;
	padding-block: var(--kk-xs);
}

.kk-topbar__links,
.kk-topbar__rechts {
	display: flex;
	align-items: center;
	gap: var(--kk-lg);
	flex: 0 0 auto;
}

.kk-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--kk-xs);
	color: var(--kk-gold);
}

.kk-topbar__item + .kk-topbar__item {
	color: var(--kk-gold-light);
}

.kk-topbar__eil {
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	flex: 1 1 auto;
	min-width: 0;
}

.kk-eil__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex: 0 0 auto;
	padding: 0.15rem var(--kk-sm);
	border-radius: var(--kk-r);
	background: var(--kk-primary-container);
	color: var(--kk-on-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-eil__punkt {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--kk-r-pill);
	background: var(--kk-gold);
	animation: kk-puls 2s ease-in-out infinite;
}

@keyframes kk-puls {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.45;
		transform: scale(0.75);
	}
}

/* -- Eilband im Kopf: sechs Meldungen im Wechsel (22.09.2026) ------------ */

/*
 * Derselbe Mechanismus wie die Livebar der Startseite, aber in 34 px
 * Bandhoehe statt 79 px. Die Meldungen liegen uebereinander, damit beim
 * Wechsel nichts springt - eine Hoehenaenderung hier verschiebt die GANZE
 * Seite, nicht nur einen Abschnitt.
 */
.kk-topbar__folge {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	/*
	 * Feste Hoehe einer Zeile. Abgeleitet, nicht gesetzt: Schriftgroesse des
	 * Bandes mal Zeilenhoehe. Die Meldungen sind einzeilig mit Ellipse
	 * (siehe .kk-topbar__eiltext), es gibt also keinen zweizeiligen Fall -
	 * anders als bei der Livebar, wo die Schlagzeile umbrechen darf.
	 */
	min-height: calc(var(--kk-fs-body-sm) * 1.4);
}

.kk-topbar__meldung {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	margin: 0;
	list-style: none;
}

/*
 * Die erste Meldung steht NICHT absolut: sie gibt der Liste ihre Breite.
 * Ohne das schrumpft der Behaelter auf die Inhaltsbreite null - derselbe
 * Fehler, der bei der Livebar `.kk-livebar__links` auf 105 px gebracht hat.
 */
.kk-topbar__folge > .kk-topbar__meldung:first-child {
	position: relative;
}

.kk-topbar__meldung.is-uebergang {
	transition: opacity 0.32s ease, transform 0.32s ease;
	pointer-events: none;
}

.kk-topbar__meldung.is-kommt {
	opacity: 0;
	transform: translateY(0.4rem);
}

.kk-topbar__meldung.is-geht {
	opacity: 0;
	transform: translateY(-0.4rem);
}

/*
 * Ein eigener reduced-motion-Block ist NICHT noetig: kk.css:204 setzt global
 * `transition-duration: 0.001ms !important` fuer alle Elemente. kk.js
 * schaltet bei reduzierter Bewegung zusaetzlich den automatischen Wechsel
 * ganz ab. Dieselbe Begruendung wie bei der Livebar.
 */

/*
 * Pause-Schaltflaeche.
 *
 * 24 x 24 px ist das Mindestmass aus SC 2.5.8 (Level AA). Die 44 x 44 der
 * Livebar passen in ein 34 px hohes Band nicht - dort waere die Flaeche
 * hoeher als das Band.
 *
 * Die Ausnahme "Spacing" von SC 2.5.8 verlangt zusaetzlich, dass ein Kreis
 * von 24 px Durchmesser um den Mittelpunkt kein anderes Ziel schneidet.
 * Deshalb der Abstand nach links: der Meldungsverweis endet mit Ellipse, der
 * Knopf steht frei dahinter.
 */
.kk-topbar__pause {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: var(--kk-xs);
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--kk-r-xs);
	color: inherit;
	cursor: pointer;
}

.kk-topbar__pause:hover {
	background: rgba(255, 255, 255, 0.14);
}

/*
 * Eigener Fokusring wie bei der Livebar: auf dem dunklen Band ist
 * --kk-primary-container zu nah am Grund.
 */
.kk-topbar__pause:focus-visible {
	outline: 2px solid var(--kk-gold-light);
	outline-offset: 2px;
}

.kk-topbar__pause-symbol {
	display: block;
	width: 8px;
	height: 10px;
}

.kk-topbar__pause-symbol--halt {
	border-left: 3px solid currentcolor;
	border-right: 3px solid currentcolor;
}

.kk-topbar__pause-symbol--weiter {
	display: none;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid currentcolor;
}

.kk-topbar__pause.is-angehalten .kk-topbar__pause-symbol--halt {
	display: none;
}

.kk-topbar__pause.is-angehalten .kk-topbar__pause-symbol--weiter {
	display: block;
}

.kk-topbar__eiltext {
	display: block;
	overflow: hidden;
	color: var(--kk-on-primary);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
}

.kk-topbar__eiltext:hover {
	color: var(--kk-gold-light);
	text-decoration: underline;
}

.kk-topbar__menu {
	display: flex;
	gap: var(--kk-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-topbar__menu a {
	color: var(--kk-gold-light);
	text-decoration: none;
}

.kk-topbar__menu a:hover {
	color: var(--kk-on-primary);
	text-decoration: underline;
}

/* -- Titelkopf ----------------------------------------------------------- */

.kk-masthead {
	background: var(--kk-lowest);
}

.kk-masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--kk-md);
	min-height: 64px;
}

.kk-marke {
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	flex: 0 0 auto;
	min-width: 0;
}

.kk-marke__logo img,
.kk-marke__logo .custom-logo {
	display: block;
	width: auto;
	height: 34px;
	max-height: 34px;
	object-fit: contain;
}

.kk-marke__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-decoration: none;
}

.kk-marke__name {
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-sm);
	font-weight: 700;
	line-height: 1.05;
	color: var(--kk-primary);
	text-transform: uppercase;
	letter-spacing: -0.015em;
}

.kk-marke__claim {
	font-size: var(--kk-fs-meta);
	font-weight: 600;
	line-height: 1.2;
	color: var(--kk-on-surface-var);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.kk-masthead__suche {
	display: none;
	flex: 1 1 auto;
	max-width: 28rem;
}

.kk-masthead__aktionen {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin-left: auto;
	flex: 0 0 auto;
}

.kk-aktion {
	display: none;
	align-items: center;
	gap: var(--kk-xs);
	padding: 0.5rem 0.75rem;
	border-radius: var(--kk-r);
	background: var(--kk-container);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-md);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kk-aktion:hover {
	background: var(--kk-high);
	color: var(--kk-on-surface);
}

.kk-aktion .kk-icon {
	color: var(--kk-primary);
}

.kk-aktion--gold {
	background: var(--kk-gold-light);
	color: #4a3a05;
}

.kk-aktion--gold .kk-icon {
	color: #7a5c00;
}

.kk-aktion--gold:hover {
	background: var(--kk-gold);
	color: var(--kk-charcoal);
}

.kk-aktion--merkliste {
	position: relative;
}

.kk-aktion__zaehler {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	min-width: 1.15rem;
	padding: 0 0.25rem;
	border-radius: var(--kk-r-pill);
	background: var(--kk-primary-container);
	color: var(--kk-on-primary);
	font-family: var(--kk-font-head);
	font-size: 0.6875rem;
	line-height: 1.15rem;
	text-align: center;
}

.kk-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--kk-r);
	background: var(--kk-container);
	color: var(--kk-on-surface);
	cursor: pointer;
}

.kk-burger__zu {
	display: none;
}

.kk-burger[aria-expanded="true"] .kk-burger__auf {
	display: none;
}

.kk-burger[aria-expanded="true"] .kk-burger__zu {
	display: block;
}

/* -- Hauptnavigation ----------------------------------------------------- */

.kk-nav {
	display: none;
	background: var(--kk-low);
	box-shadow: 0 1px 4px rgb(0 0 0 / 3%);
}

/*
 * flex-wrap statt overflow-x: auto (22.09.2026).
 *
 * Vorher schob sich die Leiste bei zu vielen Punkten waagerecht zusammen:
 * clientWidth 1200 (.kk-wrap deckelt bei --kk-max 1280 minus 2x --kk-rand),
 * scrollWidth 1634 - und weil `scrollbar-width: none` die Bildlaufleiste
 * unterdrueckte, gab es WEDER Leiste NOCH Pfeil NOCH Verlauf am Rand. Vier
 * Menuepunkte waren damit auf dem Schreibtisch lautlos unerreichbar.
 *
 * Mit flex-wrap kann scrollWidth die clientWidth gar nicht mehr
 * uebersteigen: ein elfter Punkt rutscht sichtbar in die zweite Zeile,
 * statt spurlos zu verschwinden. Die heutigen zehn Punkte passen in eine
 * Zeile (1200 px), die Regel ist die Absicherung fuer danach.
 *
 * Nebenwirkung, erwuenscht: overflow-x: auto beschnitt zugleich die
 * absolut positionierten .sub-menu nach unten. Untermenues sind damit
 * wieder moeglich, falls die Navigation je eine zweite Ebene bekommt.
 */
.kk-nav__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kk-xs);
	margin: 0;
	padding: var(--kk-xs) 0;
	list-style: none;
}

.kk-nav__liste > li {
	position: relative;
	flex: 0 0 auto;
}

.kk-nav__liste > li > a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--kk-r);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kk-nav__liste > li > a:hover {
	background: var(--kk-container);
	color: var(--kk-on-surface);
}

.kk-nav__liste > li.current-menu-item > a,
.kk-nav__liste > li.current-menu-parent > a,
.kk-nav__liste > li.current-menu-ancestor > a,
.kk-nav__liste > li.current_page_item > a {
	background: var(--kk-primary-container);
	color: var(--kk-on-primary);
}

/* Untermenüs */
.kk-nav__liste .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 15rem;
	margin: 0;
	padding: var(--kk-xs);
	list-style: none;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	box-shadow: 0 8px 24px rgb(40 23 21 / 12%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.kk-nav__liste > li:hover > .sub-menu,
.kk-nav__liste > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kk-nav__liste .sub-menu a {
	display: block;
	padding: 0.5rem 0.625rem;
	border-radius: var(--kk-r-xs);
	color: var(--kk-on-surface);
	font-size: var(--kk-fs-body-md);
	text-decoration: none;
}

.kk-nav__liste .sub-menu a:hover {
	background: var(--kk-low);
	color: var(--kk-primary);
}

/* -- Schnellfilter (sichtbar auf kleinen Bildschirmen) ------------------- */

.kk-quicknav {
	display: flex;
	align-items: stretch;
	background: var(--kk-lowest);
	border-top: 1px solid var(--kk-divider);
}

/*
 * Haussymbol am linken Rand der Schnellzeile (23.09.2026).
 *
 * Es liegt neben der Liste, nicht darin: die Liste laeuft waagerecht ueber,
 * ein Eintrag darin waere beim Wischen weg. `flex: 0 0 auto` haelt es an
 * seiner Stelle, waehrend nur die Rubriken wandern.
 *
 * Zielgroesse: 18-px-Symbol in 28 px Hoehe mal 34 px Breite. Das erfuellt
 * WCAG 2.2 SC 2.5.8 (24 x 24 CSS-px, AA) und bleibt auf derselben Hoehe wie
 * die Chips daneben, damit die Zeile eine Kante hat.
 */
.kk-quicknav__haus {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	margin: var(--kk-sm) 0 var(--kk-sm) var(--kk-rand);
	padding: 0 0.5rem;
	border-radius: var(--kk-r-pill);
	background: var(--kk-high);
	color: var(--kk-on-surface-var);
}

.kk-quicknav__haus svg {
	display: block;
}

/*
 * Ohne diese Zeile erbt die Liste die linke Polsterung und das Haus stuende
 * doppelt eingerueckt neben dem ersten Chip.
 */
.kk-quicknav__haus + .kk-quicknav__liste {
	padding-left: var(--kk-sm);
}

/*
 * Enger gesetzt am 23.09.2026, auf Wunsch des Auftraggebers ("etwas kleiner,
 * damit mehr reinpasst").
 *
 * GEAENDERT wurden Laufweite (0,05 -> 0,02 em), waagerechte Polsterung
 * (0,75 -> 0,625 rem) und der Zwischenraum (0,5 -> 0,375 rem). NICHT
 * geaendert wurde der Schriftgrad: 12 px Oswald in Versalien ist die untere
 * Grenze der Lesbarkeit, und die Messung zeigt, dass er fast nichts bringt.
 *
 * BELEGT, gemessen 23.09.2026 mit tools/rahmenfenster-messen.js,
 * Verwaltungsbalken ausgeblendet, sechs Eintraege:
 *
 *   390 px  vorher 4,77 sichtbare Chips (4 ganz)  -> nachher 5,12 (5 ganz)
 *   320 px  vorher 4,12 (4 ganz)                  -> nachher 4,47 (4 ganz)
 *   Satzbreite gesamt 545 px -> 492 px
 *
 * Eine zusaetzliche Verkleinerung auf 11 px haette bei 390 px 5,33 statt
 * 5,12 ergeben - 0,21 Chips fuer einen ganzen Schriftgrad. Nicht gemacht.
 *
 * Die Chiphoehe bleibt bei 28 px und damit ueber der Zielgroesse von
 * 24 x 24 CSS-px (WCAG 2.2 SC 2.5.8, AA).
 *
 * E-03 ist in beiden Zustaenden eingehalten: 545 px = 1,40 und 492 px = 1,26
 * Bildschirmbreiten bei 390 px, und die ersten vier Eintraege stehen ohne
 * Wischen. Bei 320 px bleibt es bei vier ganzen Chips; gewonnen wird dort
 * nur der angeschnittene fuenfte (12 % -> 47 % seiner Breite), der zeigt,
 * dass es weitergeht.
 */
.kk-quicknav__liste {
	display: flex;
	gap: 0.375rem;
	margin: 0;
	padding: var(--kk-sm) var(--kk-rand);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.kk-quicknav__liste::-webkit-scrollbar {
	display: none;
}

.kk-quicknav__liste > li {
	flex: 0 0 auto;
}

.kk-quicknav__liste a {
	display: block;
	padding: 0.25rem 0.625rem;
	border-radius: var(--kk-r-pill);
	background: var(--kk-high);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.kk-quicknav__liste .current-menu-item a {
	background: var(--kk-primary);
	color: var(--kk-on-primary);
}

/*
 * Schnittkante der Schnellzeile: Schleier am rechten Rand.
 *
 * BEFUND, gemessen 23.09.2026 (Elke, tools/rahmenfenster-messen.js, Rahmen
 * mit unterdrueckter klassischer Rollleiste, damit die Layoutbreite der
 * Geraetebreite entspricht; elf Eintraege, Satzbreite 849 px):
 *
 *   320 px   Schnittkante 17 %      <- Zeile sieht fertig aus
 *   360 px   Schnittkante 87 %
 *   390 px   Schnittkante 17 %      <- Bezugsbreite aus E-03
 *   430 px   Schnittkante 57 %
 *
 * Ein und dasselbe Stylesheet erzeugt ueber vier uebliche Geraetebreiten
 * Schnittkanten zwischen 17 % und 87 %. Die Kante ist damit keine
 * Eigenschaft der Gestaltung, sondern ein Zufall der Wortlaengen an der
 * jeweiligen Breite. Bei 17 % endet die Zeile optisch buendig hinter dem
 * letzten ganzen Chip - sie behauptet dann, vollstaendig zu sein, obwohl
 * fuenf Rubriken dahinter stehen.
 *
 * LOESUNG ohne Zustand, ohne JavaScript, ohne Rollzeitstrahl:
 *
 *   1. Die Liste bekommt am Ende eine Polsterung, die breiter ist als der
 *      Schleier - 46 px gegen 32 px.
 *   2. Der Schleier liegt als ::after am NICHT rollenden Elternelement und
 *      klebt damit am rechten Rand des Rollfensters.
 *
 * Daraus folgt von selbst: solange nicht bis zum Ende gerollt ist, liegt
 * unter dem Schleier Inhalt, und die Kante verlaeuft. Am Rollende liegt
 * dort nur noch die Endpolsterung, also leerer Grund - Weiss auf Weiss, der
 * Schleier verschwindet. Gemessen bei 320 px: letzter Chip endet am
 * Rollende 46 px vor dem Rand, der Schleier deckt 32 px. Kein Zustand, der
 * gepflegt werden muss, und die Wirkung ist unabhaengig davon, wie lang die
 * Beschriftungen sind und wie viele Eintraege die Zeile fuehrt.
 *
 * NICHT ueber animation-timeline geloest, und das ist nachgeprueft: die
 * CSS-Schreibweise scroll(self x) liefert in der Pruefumgebung (Chrome,
 * 23.09.2026) einen INAKTIVEN Zeitstrahl - animation.timeline.currentTime
 * bleibt null, waehrend dieselbe Quelle ueber
 * new ScrollTimeline({ source: liste, axis: 'x' }) einwandfrei laeuft
 * (currentTime 100 % am Rollende). Gegengeprueft mit scroll(self inline)
 * und mit einer reinen opacity-Animation ohne @property; in allen Faellen
 * inaktiv. Hier notiert, damit es nicht ein zweites Mal gebaut wird.
 *
 * prefers-reduced-motion ist nicht beruehrt: hier bewegt sich nichts, der
 * Schleier steht still.
 *
 * WAS DER SCHLEIER NICHT LEISTET - bitte nicht ueberschaetzen:
 *
 * Die Abnahmevorschrift "bei 320 px ist mindestens 30 % eines Chips
 * sichtbar" ist damit NICHT erfuellt und in CSS auch nicht erfuellbar. Bei
 * 320 px stehen 10 px von "Wissen" ueber dem Rand (17 %), bei 390 px 17 px
 * von "Karnevalisten" (17 %). Wo die Kante faellt, entscheidet allein, wie
 * lang die vorangehenden Woerter sind - siehe die Streuung 17/87/17/57 %
 * ueber vier Breiten. Kein Stylesheet kann das steuern; das steuert die
 * Liste der Eintraege.
 *
 * Dazu kommt: die Chipflaeche --kk-high #ffe2de steht nur mit 1,22:1 gegen
 * den Zeilengrund --kk-lowest #ffffff. Ein 10 px breiter Rest einer Flaeche
 * mit 1,22:1 ist als Hinweis ohnehin wirkungslos - mit Schleier wie ohne.
 * Der Schleier wirkt dort, wo ein ganzer Chip ueber den Rand laeuft
 * (gemessen 360 px und 430 px): die Zeile loest sich sichtbar auf, statt
 * buendig zu enden. Bei 320 px und 390 px bleibt die Kante schwach, und
 * das ist eine Frage der Eintragszahl, nicht der Gestaltung.
 *
 * Hoechstdeckung deshalb 92 % statt 100 %: eine voll deckende Kante loescht
 * schmale Reste restlos aus, statt sie weich auslaufen zu lassen. Unter
 * 92 % bleibt rechnerisch #fffdfc stehen - sichtbar ist das nicht mehr,
 * aber es entsteht auch keine harte weisse Kappe.
 *
 * Barrierefreiheit: pointer-events: none - der Schleier verdeckt kein
 * Klickziel. scroll-padding-inline-end haelt den Tastaturfokus aus dem
 * Verlauf heraus; beim Tabben rollt der Browser den Chip so weit herein,
 * dass er vor dem Schleier steht (SC 2.4.11).
 *
 * Der Verlauf nimmt --kk-lowest, also denselben Token wie der Grund der
 * Zeile. Kaeme ein dunkles Gewand hinzu, folgt der Schleier automatisch.
 */
.kk-quicknav {
	position: relative;
}

/* Ueberschreibt bewusst die inline-end-Seite der padding-Kurzschrift oben. */
.kk-quicknav__liste {
	padding-inline-end: calc(var(--kk-rand) + 2rem);
	scroll-padding-inline-end: 2.5rem;
}

.kk-quicknav::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 2rem;
	pointer-events: none;
	background-image: linear-gradient(
		to right,
		rgb(255 255 255 / 0),
		rgb(255 255 255 / 92%)
	);
}

/* -- Ausklappfeld -------------------------------------------------------- */

.kk-panel {
	max-height: min(70vh, 34rem);
	overflow-y: auto;
	background: var(--kk-lowest);
	border-top: 1px solid var(--kk-divider);
	box-shadow: inset 0 8px 12px -12px rgb(0 0 0 / 25%);
}

.kk-panel[hidden] {
	display: none;
}

.kk-panel__inner {
	padding-block: var(--kk-md) var(--kk-lg);
}

.kk-panel__suche {
	margin-bottom: var(--kk-md);
}

.kk-panel__liste,
.kk-panel__serviceliste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-panel__liste > li > a,
.kk-panel__serviceliste > li > a {
	display: block;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--kk-divider);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

.kk-panel__liste .sub-menu {
	margin: 0 0 var(--kk-sm) var(--kk-md);
	padding: 0;
	list-style: none;
}

.kk-panel__liste .sub-menu a {
	display: block;
	padding: 0.5rem 0;
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
	text-transform: none;
	text-decoration: none;
}

.kk-panel__service {
	margin-top: var(--kk-md);
}

.kk-panel__serviceliste > li > a {
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
	font-weight: 400;
	text-transform: none;
}

/* -- Sessionsband -------------------------------------------------------- */

/*
 * Sessionsband nur auf dem Schreibtisch.
 *
 * Auf dem Telefon kostet es 66 px direkt unter dem 64 px hohen Kopf - zusammen
 * 130 px, also 17 % einer 780-px-Anzeige, bevor der erste Inhalt beginnt
 * (Messung Klaus 23.09.2026). Session, Motto und Tageszaehler sind Beiwerk;
 * der Platz gehoert der Eilmeldung und dem Aufmacher.
 * Entscheidung Auftraggeber 23.09.2026.
 *
 * Der Countdown bleibt mobil erreichbar: die ausfuehrliche Fassung steht
 * weiterhin im Fussbereich (footer.php). Es geht also kein Inhalt verloren,
 * nur die Wiederholung im Kopf.
 */
@media (max-width: 1023px) {
	.kk-sessionband {
		display: none;
	}
}

.kk-sessionband {
	background: var(--kk-lowest);
	border-bottom: 1px solid var(--kk-divider);
	font-size: var(--kk-fs-body-sm);
}

.kk-sessionband__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kk-sm) var(--kk-md);
	padding-block: var(--kk-sm);
}

.kk-sessionband__marke {
	display: inline-flex;
	align-items: center;
	gap: var(--kk-xs);
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-sessionband__punkt {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--kk-r-pill);
	background: var(--kk-primary);
}

.kk-sessionband__motto,
.kk-sessionband__wert {
	display: inline-flex;
	align-items: center;
	gap: var(--kk-xs);
	color: var(--kk-on-surface-var);
}

.kk-sessionband__motto strong,
.kk-sessionband__wert strong {
	color: var(--kk-on-surface);
}

.kk-sessionband__wert .kk-icon {
	color: var(--kk-secondary);
}

/*
 * Countdown im Band (22.09.2026).
 *
 * Das Band steht auf jeder Seite, also muss der Countdown die zweitlauteste
 * Stimme sein - nach der Sessionsmarke, vor Motto und Pegel -, ohne selbst
 * laut zu werden. Deshalb kein Kasten, keine Ziffernfelder, kein Rahmen:
 * dieselbe Zeile, dieselbe Schriftgroesse wie Motto und Pegel. Getragen
 * wird der Akzent allein von der Zahl.
 *
 * Die ausfuehrliche Fassung mit vier Ziffernfeldern bleibt dem Fuss
 * vorbehalten, wo sie Platz und Anlass hat.
 */
.kk-sessionband__countdown {
	display: inline-flex;
	align-items: baseline;
	gap: var(--kk-xs);
	color: var(--kk-on-surface-var);
}

.kk-sessionband__countdown .kk-icon {
	align-self: center;
	color: var(--kk-primary);
}

/*
 * font-variant-numeric: tabular-nums haelt die Zahl beim taeglichen Wechsel
 * (z. B. 100 → 99) auf gleicher Breite; ohne das ruecken Motto und Pegel
 * rechts daneben jeden Tag ein Stueck.
 */
.kk-sessionband__countdown strong {
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* Am Tag selbst und am Vortag traegt der Satz sich allein, ohne Zahl. */
.kk-sessionband__countdown--jetzt strong {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ==========================================================================
   05 Raster & Abschnitte
   ========================================================================== */

/*
 * Vertikale Rhythmik der Seite.
 *
 * Die Regel gehört an den Container, nicht an die Abschnitte – sonst muss
 * jeder neue Abschnitt daran denken, seinen Abstand selbst mitzubringen,
 * und genau das ist vorher schiefgegangen (gemessen 0 px zwischen Eilband,
 * Aufmacher und Zweispalter).
 *
 * Kein `* + *`: die absolut positionierte h1.screen-reader-text der
 * Startseite würde als Geschwister zählen.
 */
.kk-main > .kk-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--kk-abschnitt);
}

/* Räumt die Alt-Abstände der Abschnitte generisch ab (kk-seitenkopf,
   kk-breadcrumb, Blocksatz-Margins), damit sich nichts aufaddiert. */
.kk-main > .kk-wrap > * {
	margin-block: 0;
}

/*
 * Die Brotkrume ist eine Haarlinie über dem Seitenkopf, kein eigener
 * Abschnitt. 16 px statt 8: bei einem Rhythmus von 48 px wirken 8 px wie
 * ein Druckfehler. Der Negativwert hebt den Flex-Zwischenraum auf und ist
 * an dieselbe Stufe gebunden, gilt also bei jeder Breite.
 */
.kk-main > .kk-wrap > .kk-breadcrumb + * {
	margin-top: calc(var(--kk-md) - var(--kk-abschnitt));
}

.kk-layout {
	display: grid;
	column-gap: var(--kk-lg);
	row-gap: var(--kk-abschnitt);
}

@media (min-width: 1024px) {
	.kk-layout--mit-rand {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		align-items: start;
	}
}

/* ---- Oktober-Folge: Reihenfolge der Startseite auf dem Telefon --------- */

/*
 * Gemessen 22.09.2026: Die Startseite ist auf dem Telefon 13.042 px lang
 * (Schreibtisch 6.047). „Nächste Termine" begann bei 7.237 px - also hinter
 * dem gesamten Strang. Vor dem Sessionsauftakt ist das genau verkehrt herum:
 * im Oktober sucht ein Besucher Termine und den Countdown, nicht die dritte
 * Rubrikstrecke.
 *
 * Ursache ist keine Gestaltungsentscheidung, sondern die Quelltextfolge: auf
 * einer Spalte gewinnt sie, und dort steht erst der komplette .kk-strang
 * (drei Tafeln, zusammen über 2.600 px schon auf dem Schreibtisch) und dann
 * die .kk-rand mit den Terminen an dritter Stelle.
 *
 * `display: contents` hebt die beiden Hüllen auf, damit ihre Abschnitte zu
 * direkten Rasterkindern werden und einzeln eine Reihenfolge tragen können.
 * Ohne das ließen sich nur die beiden Blöcke als Ganzes tauschen - dann stünde
 * „Meistgelesen" vor den Terminen, und gewonnen wäre wenig.
 *
 * Beide Hüllen sind schmucklose <div> ohne eigene Bedeutung; `display:
 * contents` nimmt hier also keine Semantik mit. Die Abstände übernimmt das
 * row-gap von .kk-layout (--kk-abschnitt); die Nebenspaltenstücke bekommen
 * dadurch etwas mehr Luft als ihre eigenen --kk-lg, was auf dem Telefon
 * richtig ist.
 *
 * .kk-body.home ist NICHT schmückendes Beiwerk, sondern notwendig.
 * .kk-layout--mit-rand trägt auch die Artikel-, Archiv- und Übersichtsseiten,
 * dort aber mit einer ANDEREN Nebenspalte (Schnell-Ticker, Kommentare,
 * Leseempfehlungen). Ohne die Begrenzung hätte `display: contents` auch dort
 * die Hüllen aufgelöst und die Abschnitte umsortiert - in der Gegenprobe auf
 * einer Artikelseite sprang „Jecken-Post" ans Ende und der Schnell-Ticker
 * nach vorn. Die Oktober-Folge ist eine Entscheidung über die STARTSEITE.
 *
 * VORBEHALT, bewusst in Kauf genommen: `order` verschiebt die sichtbare
 * Folge, nicht die Tabulatorfolge (WCAG 2.4.3). Vertretbar ist das hier, weil
 * es voneinander unabhängige <section> mit eigener Überschrift sind - kein
 * zusammenhängender Text wird auseinandergerissen, jede Reihenfolge bleibt
 * für sich sinnvoll. Sauberer wäre die Umstellung im Quelltext von
 * front-page.php; die ist nachzuholen, sobald die Datei frei ist.
 *
 * NACHTRAG 23.09.2026 ZU DIESEM VORBEHALT: Mit der Einzelverteilung unten
 * wird der Abstand zwischen Seh- und Tabulatorfolge GRÖSSER, nicht kleiner.
 * Vorher sprang die Nebenspalte als Block; jetzt liegen zwei Einschübe
 * zwischen den Strecken, und wer mit der Tabulatortaste von der ersten zur
 * zweiten Strecke geht, überspringt den dazwischen SICHTBAREN Terminkasten
 * und erreicht ihn erst hinter der siebten Strecke.
 *
 * Die Abwägung bleibt dieselbe und fällt gleich aus - es sind in sich
 * abgeschlossene Abschnitte -, aber sie ist jetzt teurer. Damit steigt die
 * Umstellung im Quelltext von „wäre sauberer" zu „ist fällig": die richtige
 * Lösung ist, die Nebenspaltenstücke in front-page.php an den Stellen
 * auszugeben, an denen sie erscheinen sollen, und die Zweispaltigkeit ab
 * 1024 px über Rasterplatzierung herzustellen statt über die Quelltextfolge.
 * Dann stimmen beide Folgen überein und dieser ganze Block entfällt.
 * Das ist ein Umbau an front-page.php, also Werners Datei - hier steht er
 * als Auftrag, nicht als erledigt.
 */
@media (max-width: 1023px) {
	/*
	 * Ausdrueckliche Spalte statt der impliziten.
	 *
	 * .kk-strang und .kk-rand trugen `min-width: 0` - die uebliche Bremse
	 * gegen Rasterkinder, die an einem breiten Inhalt (Tabelle, langes Wort,
	 * Einbettung) ueber den Rand hinauswachsen. Mit `display: contents` gibt
	 * es diese Kaesten nicht mehr, und die implizite Spalte des Rasters ist
	 * `auto`, also genau die Sorte, die mitwaechst. minmax(0, 1fr) setzt die
	 * Bremse an der Stelle wieder ein, an der sie jetzt hingehoert.
	 */
	.kk-body.home .kk-layout--mit-rand {
		grid-template-columns: minmax(0, 1fr);
	}

	.kk-body.home .kk-layout--mit-rand > .kk-strang,
	.kk-body.home .kk-layout--mit-rand > .kk-rand {
		display: contents;
	}

	/*
	 * NACHBESSERUNG 23.09.2026: EINZELN EINSTREUEN STATT VORANSTELLEN.
	 *
	 * Die erste Fassung stellte Termine (order 1) und Dunkelbox (order 2)
	 * geschlossen VOR alle Strecken. Damit war das eine Problem gegen ein
	 * anderes getauscht: BELEGT, gemessen 390 px, abgemeldet – zwischen
	 * Aufmacher und erster Rubrikstrecke standen 448 px Terminkasten plus
	 * 423 px Dunkelbox, zusammen rund 1.242 px ohne einen einzigen Beitrag.
	 * Wer nicht nach Terminen sucht, scrollt an der Startseite vorbei, bevor
	 * sie anfängt.
	 *
	 * Jetzt steht nie mehr als ein Nebenspaltenstück am Stück, und zwischen
	 * je zwei Stücken liegt eine ganze Strecke.
	 *
	 * `nth-child` statt einer Positionsklasse ist Absicht: fällt eine Strecke
	 * mangels Beiträgen weg, wird sie gar nicht erst ausgegeben – die nächste
	 * vorhandene rückt nach. Eine feste Positionsklasse hinterließe ein Loch.
	 * Geprüft: `.kk-strang` hat auf der Startseite ausschließlich
	 * `.kk-strecke` als Kinder, `nth-child` und `nth-of-type` fallen hier
	 * also zusammen.
	 */

	/*
	 * ZWEI VORAUSSETZUNGEN, DIE DIESE REGELN STILL VERLANGEN – die
	 * Gegenstücke stehen als Warnung über `$kk_strecken` in front-page.php
	 * (Werner, 23.09.2026). Beide sind hier notiert, damit die Abhängigkeit
	 * nicht nur an einem der beiden Enden bekannt ist.
	 *
	 * 1. `.kk-strang` enthält auf der Startseite AUSSCHLIESSLICH
	 *    `.kk-strecke`. `> .kk-strecke:nth-child(1)` verlangt beides
	 *    zugleich – Strecke UND erstes Kind. Käme irgendwann ein anderes
	 *    Element als erstes Kind dazu, griffe die Regel ins Leere, alle
	 *    Strecken blieben auf `order: 5`, und die Nebenspaltenstücke mit 2
	 *    und 4 rutschten VOR die gesamte Startseite. Der Fehler wäre nicht
	 *    zu sehen, sondern nur zu messen – deshalb steht er hier.
	 *
	 * 2. Die ersten zwei Einträge von `$kk_strecken` bekommen die
	 *    auffälligsten Ränge. Die Feldfolge ist damit keine Sortierfrage
	 *    mehr, sondern eine Gestaltungsentscheidung: dort gehören die
	 *    Schaufenster hin. Stehen zwei Register vorn, bleibt die
	 *    Verschränkung formal in Ordnung (Beitrag zuerst, nie zwei Kästen
	 *    hintereinander) – aber die Seite eröffnet dann mit einer Liste
	 *    statt mit einem Stück. Das ist kein CSS-Fehler und wird hier auch
	 *    nicht geheilt; die Reihenfolge ist Klaus' Festlegung.
	 */

	/* Grundstellung: alles, was keine eigene Zahl bekommt, in die Mitte. */
	.kk-body.home .kk-layout--mit-rand > .kk-strang > .kk-strecke {
		order: 5;
	}

	/* 1. Erste Strecke – die Seite fängt mit einem Beitrag an, nicht mit einem Kasten. */
	.kk-body.home .kk-layout--mit-rand > .kk-strang > .kk-strecke:nth-child(1) {
		order: 1;
	}

	/* 2. Termine – das im Oktober Gesuchte, so früh wie möglich. */
	.kk-body.home .kk-layout--mit-rand .kk-widget--termine {
		order: 2;
	}

	/* 3. Zweite Strecke. */
	.kk-body.home .kk-layout--mit-rand > .kk-strang > .kk-strecke:nth-child(2) {
		order: 3;
	}

	/*
	 * 4. Veedel, Kneipen & Zöch – der zweite Eigenbestand mit Suchfunktion.
	 *
	 * Klaus' Vorgabe nennt „Nächste Termine, Position 3" UND „die Dunkelbox
	 * rückt hinter die erste Rubrikstrecke". Beides zusammen geht nicht,
	 * solange nie zwei Nebenspaltenstücke aufeinander folgen sollen. Gelesen
	 * wird die Zählung deshalb einschließlich Aufmacher: Aufmacher 1,
	 * Strecke 2, Termine 3. Dann bleibt für die Dunkelbox der Platz hinter
	 * der ZWEITEN Strecke – und der Terminkasten behält den frühen Rang, der
	 * der Anlass der ganzen Regel war.
	 */
	.kk-body.home .kk-layout--mit-rand .kk-dunkelbox {
		order: 4;
	}

	/* 6./7. Stöbern und Newsletter ans Ende. */
	.kk-body.home .kk-layout--mit-rand .kk-widget--meistgelesen {
		order: 6;
	}

	.kk-body.home .kk-layout--mit-rand .kk-brief {
		order: 7;
	}

	/*
	 * 8. Eingesetzte Widgets ganz zuletzt (Markus, A1).
	 *
	 * `dynamic_sidebar()` stand bis 23.09.2026 ohne Hülle in `.kk-rand`. Mit
	 * `display: contents` an der Randspalte wäre jedes eingesetzte Widget ein
	 * eigenes Rasterkind mit dem Vorgabewert `order: 0` geworden – also VOR
	 * allem anderen, noch vor der ersten Strecke. Die Hülle
	 * `.kk-rand__widgets` fängt das ab und braucht deshalb zwingend eine
	 * Zahl.
	 *
	 * NICHT GEPRÜFT: In der lokalen Vorschau ist der Widgetbereich leer, die
	 * Hülle wird gar nicht ausgegeben. Die Regel ist Vorsorge, kein Befund.
	 */
	.kk-body.home .kk-layout--mit-rand .kk-rand__widgets {
		order: 8;
	}
}

/*
 * „Weitere Meldungen" auf dem Telefon auf drei Einträge.
 *
 * Die Tafel steht im Aufmacher und damit vor allem anderen. Es sind keine
 * Kurzmeldungen, sondern die normalen Beiträge 5 bis 9 nach Datum, alle vier
 * bis fünf Tage alt - fünf davon sind vor den Terminen ein Riegel, drei ein
 * Hinweis. Auf dem Schreibtisch stehen sie in einer eigenen Spalte neben dem
 * Aufmacher und kosten keine Länge; dort bleiben alle fünf.
 *
 * Kein Widerspruch zur weggefallenen Bildlaufleiste in der Navigation: dort
 * verschwanden Ziele lautlos und ersatzlos. Hier steht unmittelbar darunter
 * die Schaltfläche „Alle Meldungen", der Weg zu den übrigen Beiträgen ist
 * also sichtbar und beschriftet.
 */
@media (max-width: 1023px) {
	.kk-aufmacher__ticker .kk-randtermine > li:nth-child(n+4) {
		display: none;
	}
}

/*
 * Der Strang trägt Abschnitte, nicht Karten: sechs gleich aussehende weiße
 * Tafeln im Abstand einer Rasterrinne waren der Hauptgrund für den Eindruck
 * „überladen".
 */
.kk-strang {
	display: flex;
	flex-direction: column;
	gap: var(--kk-abschnitt);
	min-width: 0;
}

/*
 * Der Zwischenraum gehört dem Strang, nicht seinen Kindern (23.09.2026).
 *
 * BELEGT, gemessen 22.09.2026 auf der Testkopie, abgemeldet, Verwaltungsbalken
 * herausgerechnet, Desktop 1760 px: Aussenabstände verschmelzen im Flex-Layout
 * NICHT, sie addieren sich auf den `gap`. Jedes Kind, das noch einen eigenen
 * margin mitbringt, bekommt deshalb mehr als den Systemabstand von 48 px:
 *
 *   /category/karneval-tipps/  Einleitung  → Kartenblock   80 px (48 + 32)
 *   /category/karneval-tipps/  Kartenblock → Kartenblock   64 px (48 + 16, .kk-mt-md)
 *   /category/karneval-tipps/  Kartenblock → Seitenblättern 80 px (48 + 32)
 *   /termine/                  Artikel     → .kk-anhang     72 px (48 + 24)
 *
 * Gegenbeweis aus derselben Messung: /termine/ Tafel → Tafel steht bei exakt
 * 48 px. Wo kein Alt-Abstand klebt, stimmt das System bereits.
 *
 * Dieselbe Bauart wie .kk-main > .kk-wrap > * weiter unten, aus demselben
 * Grund — der Container setzt den Rhythmus, die Kinder folgen ihm.
 *
 * Wirkt NICHT auf .kk-kategorie-intro: deren `margin: 0 0 32px` steht als
 * style-Attribut direkt am Element (Quelle: Snippets 11708 und 11617), und
 * inline schlägt jede Klassenregel. Das wird dort geändert, nicht hier mit
 * !important erzwungen.
 *
 * Beachte: .kk-mt-md bleibt als Hilfsklasse unangetastet. Sie wirkt weiterhin
 * überall dort, wo sie gebraucht wird — etwa im zweiten Raster INNERHALB einer
 * .kk-panelblock-Tafel (front-page.php), wo es keinen Flex-Zwischenraum gibt,
 * der den Abstand schon stellt. Abgeräumt wird sie nur als direktes Strangkind.
 */
.kk-strang > * {
	margin-block: 0;
}

/*
 * Nachtrag 23.09.2026: Das ERSTE Strangkind darf auch dann keinen eigenen
 * oberen Abstand mitbringen, wenn es eine Hilfsklasse traegt.
 *
 * BELEGT, gemessen 23.09.2026, Rahmen 1440 px, Verwaltungsbalken
 * ausgeblendet: auf /category/karnevalisten/page/2/ entfaellt der Aufmacher
 * (schleife-magazin.php:28, `! is_paged()`), erstes Kind ist deshalb
 * `.kk-raster.kk-raster--2.kk-mt-md`. Dessen 16 px addieren sich auf den
 * Kopfabstand von 32 px zu 48 px - Seite 1 steht bei 32, Seite 2 und 3 bei 48.
 *
 * `.kk-mt-md` steht spaeter im Stylesheet und schlaegt bei gleicher
 * Spezifitaet die Regel darueber; `> :first-child` liegt eine Stufe hoeher
 * und raeumt den Fall ab, ohne die Hilfsklasse anzufassen.
 */
.kk-strang > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   05a Rubrikstrecken – zwei Formen, ein Bauteil
   ========================================================================== */

/*
 * ZWEI KARTENFORMEN STATT SECHS RASTERN (23.09.2026).
 *
 * Die Startseite trug drei Rubrikstrecken in drei verschiedenen Rastern
 * (`dossier`, `doppel`, `vier`). Bei sieben Strecken wäre daraus ein
 * Formenzoo geworden: sieben Abschnitte, die alle dasselbe tun – Beiträge
 * einer Rubrik anbieten – in sieben verschiedenen Anordnungen. Daran ist
 * nichts zu lernen; jeder Abschnitt müsste neu gelesen werden.
 *
 * Es bleiben zwei Formen, und ihr Unterschied ist eine Aussage:
 *
 *   SCHAUFENSTER  Eine Feature-Karte, darunter zwei Registerzeilen.
 *                 „Hier ist ein Stück, das den Aufwand lohnt."
 *   REGISTER      Fünf gleichrangige Zeilen.
 *                 „Hier ist ein Bestand, sieh ihn durch."
 *
 * Deshalb trägt die Hülle KEINEN Formhaken: die Form steht am Inhalt. Eine
 * `.kk-card--feature` vorhanden = Schaufenster; eine `.kk-register` ohne
 * `--kurz` = Register. Zwei Namen für eine Tatsache driften auseinander,
 * sobald einer vergessen wird.
 *
 * Auch kein `kk-strecke--<slug>` und kein `data-kk-rubrik`: die
 * Rubrik-Identität läuft über Form und ZEICHEN (Symbol in der Kopfzeile),
 * nicht über Farbe. Gerechnet nach WCAG-Formel aus den Tokens oben gegen
 * --kk-surface (#fff8f7): --kk-primary 8,84:1, --kk-navy 11,13:1,
 * --kk-gold 2,00:1, --kk-gold-light 1,17:1. Für helle Flächen hat das Haus
 * ZWEI tragfähige Akzente, nicht sieben. Eine Farbschiene je Rubrik wäre
 * eine Änderung am Farbsystem, nicht an der Auszeichnung – und Farbe darf
 * nach 1.4.1 ohnehin nie allein tragen. Ein Symbol trägt einfarbig, im
 * Druck und bei Farbfehlsichtigkeit.
 */

/*
 * KEIN `display: flex` an der Strecke, und das ist Absicht.
 *
 * `.kk-sectionhead` bringt `margin-bottom: var(--kk-md)` mit. Ein
 * Flex-Zwischenraum an der Hülle addierte sich darauf – genau die Falle, die
 * für `.kk-strang` oben schon belegt ist (Außenabstände verschmelzen im
 * Flex-Layout nicht, sie addieren sich auf den `gap`). Die Strecke bleibt
 * ein normaler Block; der Abstand zur Liste hängt an der Liste.
 */
.kk-strecke > .kk-register {
	margin-top: var(--kk-md);
}

.kk-register {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * ZUSTÄNDIGKEIT SCHARF GETRENNT: Das `li` trägt Trennstrich und Rhythmus,
 * das `article` darin den Innenaufbau. Keine Eigenschaft an beiden – sonst
 * ist beim nächsten Eingriff nicht entscheidbar, welche der zwei Stellen den
 * Abstand macht.
 *
 * Der Strich steht zwischen den Zeilen, nicht über der ersten: die Kopfzeile
 * der Strecke grenzt oben schon ab.
 */
.kk-register__zeile + .kk-register__zeile {
	margin-top: var(--kk-md);
	padding-top: var(--kk-md);
	border-top: 1px solid var(--kk-divider);
}

/*
 * `--kurz` ist keine Stückzahl, sondern eine Rolle: diese Liste ist an die
 * Feature-Karte ANGEHÄNGT, sie beginnt keinen neuen Abschnitt. Der Strich
 * oben sagt genau das – die zwei Zeilen gehören zum Aufmacher der Strecke,
 * und der Rhythmus innen bleibt derselbe wie im langen Register.
 */
.kk-register--kurz {
	padding-top: var(--kk-md);
	border-top: 1px solid var(--kk-divider);
}

/*
 * Kategorie-Einleitung (23.09.2026).
 *
 * Die Auszeichnung kommt aus den Snippets 11708 („Einleitungstexte weitere
 * Kategorien", bedient karnevalisten, karnevalskneipen, karneval-tipps,
 * redner, solokuenstler-musik, wissenswertes) und 11617 („Geschichte des
 * Karnevals"). Beide trugen bisher ein style-Attribut am Element:
 * `max-width:800px; margin:0 0 32px; line-height:1.7;`.
 *
 * BELEGT, gemessen 22.09.2026 auf der Testkopie bei 1760 px: daraus wurden
 * 784 px Satzbreite bei 16 px Schrift = 98 Zeichen je Zeile. Das ist mehr
 * als die 92 Zeichen, die im Artikeltext beanstandet und auf 75 gebracht
 * wurden — ausgerechnet der erste Text einer Kategorieseite war der laengste
 * der ganzen Website. Die 32 px addierten sich zusaetzlich auf den
 * Strang-Zwischenraum von 48 px zu 80 px.
 *
 * Diese Regel greift erst, wenn das style-Attribut in den beiden Snippets
 * entfernt ist — inline schlaegt jede Klassenregel. Bewusst kein !important:
 * Darstellung gehoert ins Stylesheet, nicht in den Ausgabecode, und ein
 * erzwungener Wert haette die Ursache nur verdeckt.
 *
 * Werte wie .kk-prosa, aus demselben Grund: dieselbe Leserschaft, dieselbe
 * Spalte. Der Abstand nach unten kommt vom Strang, nicht von hier.
 */
.kk-kategorie-intro {
	max-width: 42rem; /* 672 px, rund 75 Zeichen bei 18 px */
	margin-block: 0;
	font-size: 1.0625rem; /* 17 px */
	line-height: 1.65;
}

@media (min-width: 1280px) {
	.kk-kategorie-intro {
		font-size: 1.125rem; /* 18 px */
	}
}

.kk-rand {
	display: flex;
	flex-direction: column;
	gap: var(--kk-lg);
	min-width: 0;
}

/*
 * Die Randspalte bleibt bewusst NICHT klebend: ihr Inhalt ist hoeher als der
 * Bildschirm, und eine klebende Spalte macht deren unteres Ende unerreichbar.
 */

.kk-panelblock {
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	box-shadow: var(--kk-schatten-1);
}

@media (min-width: 768px) {
	.kk-panelblock {
		padding: var(--kk-lg);
	}
}

/*
 * flex-wrap, damit Titel und Verweis auf schmalen Bildschirmen umbrechen
 * statt sich zu ueberlagern.
 *
 * .kk-sectionhead__left darf auf 0 schrumpfen (min-width: 0), der Titel
 * selbst bricht als Grossbuchstabenzeile aber nicht beliebig - gemessen bei
 * 390 px: "Auch interessant aus der Domstadt" lief 23 px unter den Hinweis
 * "Empfehlungen der Redaktion", "Nachschlagen & Stoebern" 69 px.
 */
.kk-sectionhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	margin-bottom: var(--kk-md);
	padding: var(--kk-sm) var(--kk-md);
	background: var(--kk-low);
	border-radius: var(--kk-r);
}

.kk-sectionhead__left {
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	min-width: 0;
}

.kk-sectionhead__bar {
	width: 0.75rem;
	height: 1.5rem;
	flex: 0 0 auto;
	border-radius: var(--kk-r-xs);
	background: var(--kk-primary);
}

.kk-sectionhead__icon {
	display: inline-flex;
	color: var(--kk-primary);
}

.kk-sectionhead__title {
	margin: 0;
	color: var(--kk-primary);
	font-size: var(--kk-fs-lg);
	line-height: var(--kk-lh-lg);
	text-transform: uppercase;
}

/*
 * Kopfzeile zweiter Ordnung. Sie steht unter einem H2 im selben Abschnitt
 * und in einer rund 370 px breiten Spalte - bei 32 px Schriftgrad
 * (--kk-fs-lg) lief dort jeder Titel zweizeilig. 22 px (--kk-fs-md) bildet
 * die Unterordnung ab und haelt die Kopfzeile auf einer Zeile.
 */
h3.kk-sectionhead__title {
	font-size: var(--kk-fs-md);
	line-height: var(--kk-lh-md);
}

.kk-sectionhead__link,
.kk-sectionhead__note {
	display: inline-flex;
	align-items: center;
	gap: var(--kk-xs);
	flex: 0 0 auto;
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.kk-sectionhead__link:hover {
	color: var(--kk-primary);
}

/* Karten-Raster */
.kk-raster {
	display: grid;
	gap: var(--kk-md);
}

.kk-raster--2 {
	grid-template-columns: 1fr;
}

.kk-raster--3,
.kk-raster--4 {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.kk-raster--2,
	.kk-raster--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kk-raster--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.kk-raster--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kk-raster--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Trefferliste der Suche: Suchen heißt scannen, nicht stöbern. Kompaktkarten
 * untereinander statt Kartenraster – das Vorschaubild wirkt dort als Marke und
 * ist gegenüber der Ausrichtung des Motivs unempfindlich.
 */
.kk-liste--treffer {
	display: flex;
	flex-direction: column;
	gap: var(--kk-sm);
}

/*
 * Aufmacher-Raster der Startseite: 6 / 3 / 3 von 12.
 *
 * Abschlusslinie des Bandes (A-46). Die Spalten sind seit A46.1 inhaltshoch
 * und enden deshalb auf unterschiedlicher Höhe. Drei Spalten mit ungleich
 * langem Inhalt lesen sich nur dann als Satz und nicht als Fehler, wenn der
 * Abschnitt eine eigene Unterkante hat, an der sie hängen - genau so schließt
 * eine Zeitungsseite ihre Ressorts. Ohne Linie endet die höchste Spalte im
 * Nichts und die kürzeren sehen abgebrochen aus; mit Linie hängen alle drei an
 * der Oberkante, und die Linie schließt das Band.
 *
 * Haarlinie in --kk-outline-var, ausdrücklich NICHT in --kk-primary: Rot
 * konkurriert hier mit den roten Abschnittsköpfen darunter.
 *
 * Gilt bei jeder Breite, auch einspaltig - dort trennt sie den Aufmacher von
 * der ersten Rubrikstrecke. Summe nach unten: 24 px Innenabstand, 1 px Linie,
 * dann die 48 px des Stapelabstands.
 */
.kk-aufmacher {
	display: grid;
	gap: var(--kk-lg);
	/*
	 * Inhaltshohe Spalten (A46.1). Steht hier und nicht erst in der
	 * 64em-Abfrage: die Kopplung beginnt bei 48em, wo sich Nebenspalte und
	 * Tickertafel eine Rasterzeile teilen. Nur in der 64em-Abfrage gesetzt
	 * blieben bei 900 px 116,141 px Restluft unter der Tickertafel stehen -
	 * genau das Loch aus A-45, eine Abfrage tiefer. Einspaltig ist die Zeile
	 * ohnehin inhaltshoch, die Zeile ist dort wirkungslos.
	 *
	 * Begruendung und Messwerte der Entkopplung: siehe 48em-Block weiter unten.
	 */
	align-items: start;
	padding-bottom: var(--kk-lg);
	border-bottom: 1px solid var(--kk-outline-var);
}

/*
 * Der Stapel der Nebenspalte gehoert nicht in den 1024er Zweig: darunter war
 * die Spalte ein einfacher Block, und die beiden Karten standen mit 0 px
 * Abstand aneinander - zwei weisse Tafeln mit Rahmen auf Stoss (gemessen bei
 * 900 und bei 390 px).
 */
.kk-aufmacher__zweit {
	display: flex;
	flex-direction: column;
	gap: var(--kk-lg);
}

/*
 * Umbruchpunkte des Aufmachers in `em` statt `px` (R4).
 *
 * Laengen in `em` rechnen innerhalb einer Media Query gegen die
 * Ausgangsschriftgroesse des Browsers, also gegen die Nutzereinstellung -
 * NICHT gegen ein vom Autor gesetztes `html { font-size }`. Wer seine
 * Standardschrift verdoppelt, erreicht 64em erst bei 2048 px; der Aufmacher
 * faellt bei 1440 px dann in die zwei- bzw. einspaltige Fassung. Genau das
 * ist bei grosser Schrift richtig.
 *
 * Bei Standardschrift (16 px) sind 48em = 768 px und 64em = 1024 px, die
 * Messwerte bleiben also unveraendert. Umgestellt sind nur die beiden
 * Umbruchpunkte des Aufmachers und die daran haengenden Abfragen, nicht die
 * des ganzen Themes.
 */
@media (min-width: 48em) {
	.kk-aufmacher {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kk-aufmacher__haupt {
		grid-column: span 2;
	}
}

/*
 * Spalten inhaltshoch, nicht gleich hoch (A-46).
 *
 * Gleich hohe Spalten waren eine Setzung der Gestaltung, und sie war falsch.
 * Sie funktionierte nur, solange die drei Inhalte zufaellig gleich hoch sind:
 * bei 1440 px standen alle drei auf 651,438 px und die freie Zellenflaeche war
 * null - nicht weil das Loch behoben war, sondern weil nichts es aufriss.
 * Gemessene Gegenprobe: fuenf Ticker-Ueberschriften mit je 120 Zeichen trieben
 * die Rasterzeile auf 875,906 px und streckten Lead- und Nebenspalte um
 * 224,469 px. Die Beanstandung kam damit nicht weg, sie wurde nur verteilt.
 *
 * Deshalb ist die Kopplung aufgehoben: `align-items: start` am Raster (steht
 * an .kk-aufmacher, gleich wie .kk-layout--mit-rand). Jede Spalte
 * ist genau so hoch wie ihr Inhalt; eine wachsende Spalte kann keine Luft mehr
 * in die anderen schieben. Die ungleichen Unterkanten traegt die Abschlusslinie
 * an .kk-aufmacher.
 *
 * Verworfen: die Schwankung an der Quelle kappen (`-webkit-line-clamp: 2` auf
 * die Ticker-Ueberschriften). Wuerde rechnerisch funktionieren, kostet aber
 * Schlagzeilen - bei einer Kurzmeldung IST die Ueberschrift der ganze Inhalt.
 * Auszuege darf man kuerzen, Schlagzeilen nicht.
 *
 * Entfallen sind darum `height: 100%` an Leadkarte und Tickertafel, das
 * `margin-top: auto` an der Schaltflaeche und das `justify-content:
 * space-between` am Lead-Textkoerper: ohne gestreckte Zelle verteilen sie
 * nichts.
 */
@media (min-width: 48em) {
	/*
	 * Die Tafel bleibt ein Flex-Stapel: die Abstaende zwischen Kopfzeile,
	 * Liste und Schaltflaeche kommen von hier, nicht von gestreckter Hoehe.
	 */
	.kk-aufmacher__ticker > .kk-widget {
		display: flex;
		flex-direction: column;
	}

	/*
	 * Fester Abstand statt `margin-top: auto`. Das auto-Margin sollte die
	 * Schaltflaeche an die Unterkante einer gestreckten Tafel druecken; die
	 * Tafel ist jetzt inhaltshoch, es gibt also keine Restluft zu verteilen.
	 */
	.kk-aufmacher__ticker .kk-btn--voll {
		margin-top: var(--kk-md);
	}
}

@media (min-width: 64em) {
	.kk-aufmacher {
		/*
		 * `align-items: start` (A46.1) steht an .kk-aufmacher selbst, nicht
		 * hier - siehe dort. Damit verhaelt sich das Raster wie
		 * .kk-layout--mit-rand direkt darunter.
		 */
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.kk-aufmacher__haupt {
		grid-column: span 6;
	}

	.kk-aufmacher__zweit {
		grid-column: span 3;
	}

	.kk-aufmacher__ticker {
		grid-column: span 3;
	}

	/*
	 * Kleineres Vorschaubild in der schmalen Nebenspalte.
	 *
	 * Die Kompaktkarte ist fuer die Trefferliste gebaut (dort 784 px breit).
	 * In der 282 px breiten Nebenspalte laesst ein 152er Vorschaubild nur
	 * 109 px Textspalte uebrig - gemessen eine sechszeilige Ueberschrift und
	 * eine 240 px hohe Karte. Mit 96 px bleiben 152 px Textspalte, die
	 * Ueberschrift laeuft vierzeilig und die Karte ist 177 px hoch. Damit
	 * fallen die drei Aufmacherspalten auf 651 / 595 / 642 px.
	 *
	 * Kein Zuschnittwechsel: 96 x 64 px deckt kk-thumb (400 x 267) auch bei
	 * doppelter Pixeldichte ab.
	 */
	.kk-aufmacher__zweit .kk-card--kompakt .kk-media {
		flex-basis: 6rem;
		width: 6rem;
		/*
		 * Deckel, damit das Vorschaubild die Textspalte nicht verdraengt:
		 * 6rem waechst bei doppeltem Schriftgrad auf 192 px und liess in der
		 * dann 244 px breiten Karte 16 px Text uebrig.
		 *
		 * Gemessen bei normalem Schriftgrad: Rahmen 79 x 53 px, Textspalte
		 * 169 px, Karte 177 px hoch - Stapelhoehe der Spalte 651 px.
		 */
		max-width: 30%;
	}
}


/* Eil-Band über dem Aufmacher */
.kk-livebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	padding: var(--kk-sm) var(--kk-md);
	background: var(--kk-primary);
	border-radius: var(--kk-r);
	color: var(--kk-on-primary);
	box-shadow: var(--kk-schatten-1);
}

.kk-livebar__links {
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	min-width: 0;
	/*
	 * `flex: 1 1 auto` ist seit dem Umbau auf die Meldungsfolge nötig, nicht
	 * Zierde: die Meldungen liegen absolut übereinander, die `<ol>` hat
	 * deshalb KEINE eigene Inhaltsbreite. Ohne diese Zeile schrumpfte
	 * .kk-livebar__links auf die Breite der Plakette – gemessen 105,25 px bei
	 * jeder Bildschirmbreite –, und die Schlagzeile stand in einer 0 px
	 * breiten Spalte.
	 */
	flex: 1 1 auto;
}

.kk-livebar__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex: 0 0 auto;
	padding: 0.15rem var(--kk-sm);
	border-radius: var(--kk-r);
	background: var(--kk-carmine-deep);
	color: var(--kk-gold-light);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * Meldungsfolge im Eil-Band.
 *
 * Alle Meldungen liegen übereinander (absolut im relativen Listenrahmen),
 * damit während des Übergangs zwei gleichzeitig sichtbar sein können, ohne
 * dass das Band zweizeilig aufspringt.
 *
 * min-height hält die Höhe fest, damit ein Wechsel von einzeiliger auf
 * zweizeilige Schlagzeile das Layout nicht verschiebt (Layout Shift). Wert
 * gerechnet aus den Merkmalswerten der Zeile: 2 Zeilen x line-height 1.3 x
 * --kk-fs-sm (18 px) = 46,8 px. Gemessen liefen die vorhandenen
 * Eilmeldungen bei 1440 px einzeilig (23 px) und bei 390 px zweizeilig –
 * genau der Sprung, den der Wert abfängt.
 */
.kk-livebar__folge {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: calc(2 * 1.3 * var(--kk-fs-sm));
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-livebar__meldung {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	min-height: 100%;
	transition: opacity 0.32s ease, transform 0.32s ease;
}

/*
 * Solange der Übergang läuft, nimmt die Meldung keine Klicks an – sonst
 * wanderte ein anklickbares Ziel unter dem Zeiger weg.
 */
.kk-livebar__meldung.is-uebergang {
	pointer-events: none;
}

.kk-livebar__meldung.is-kommt {
	opacity: 0;
	transform: translateY(6px);
}

.kk-livebar__meldung.is-geht {
	opacity: 0;
	transform: translateY(-6px);
}

/*
 * Ein eigener reduced-motion-Block ist hier NICHT nötig: kk.css:204 setzt
 * global `transition-duration: 0.001ms !important` für alle Elemente. Der
 * Übergang fällt dort also schon weg. kk.js schaltet bei reduzierter
 * Bewegung zusätzlich den automatischen Wechsel ganz ab.
 */

/*
 * Die Schlagzeile wird auf ZWEI Zeilen geklammert.
 *
 * Nötig geworden durch die Meldungsfolge: die Meldungen liegen in einem
 * Kasten fester Höhe (2 Zeilen). Ohne Klammer lief die Schlagzeile bei
 * 390 px gemessen auf 94 px (vier Zeilen) und wurde im 47 px hohen Kasten
 * abgeschnitten – ein halb angeschnittenes Wort in der letzten Zeile.
 * Mit der Klammer endet sie sichtbar mit Auslassungspunkten.
 */
.kk-livebar__titel {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin: 0;
	overflow: hidden;
	color: var(--kk-on-primary);
	font-size: var(--kk-fs-sm);
	line-height: 1.3;
	text-transform: uppercase;
}

.kk-livebar__titel a {
	color: inherit;
	text-decoration: none;
}

.kk-livebar__titel a:hover {
	color: var(--kk-gold-light);
	text-decoration: underline;
}

.kk-livebar__rechts {
	display: flex;
	align-items: center;
	gap: var(--kk-md);
	flex: 0 0 auto;
}

/*
 * Bedienschaltfläche des Meldungswechsels (SC 2.2.2, Level A).
 *
 * 2,75rem = 44 px Trefferfläche (SC 2.5.8). Bleibt auch auf schmalen
 * Bildschirmen stehen – sie ist die Pflichtbedienung, kein Zierrat.
 *
 * Der Fokusring kommt aus dem vorhandenen Muster (kk.css:283,
 * `:focus-visible` mit --kk-primary-container). Auf dem roten Grund des
 * Bandes (--kk-primary #94000b) ist #c00814 zu nah: gemessen rund 1,5:1.
 * Deshalb hier ein eigener Ring in --kk-gold-light (#f5e8be) – gegen
 * #94000b rund 8,4:1, gegen den weißen Seitengrund rund 1,2:1; der zweite
 * Wert spielt keine Rolle, weil der Ring vollständig im Band liegt.
 */
.kk-livebar__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: var(--kk-r);
	color: var(--kk-gold-light);
	cursor: pointer;
}

.kk-livebar__pause:hover {
	background: rgb(255 255 255 / 10%);
	border-color: var(--kk-gold-light);
}

.kk-livebar__pause:focus-visible {
	outline: 3px solid var(--kk-gold-light);
	outline-offset: 2px;
}

/* Symboltausch über die Klasse, die kk.js setzt – kein SVG-Tausch im Skript. */
.kk-livebar__symbol--weiter,
.kk-livebar__pause.is-angehalten .kk-livebar__symbol--pause {
	display: none;
}

.kk-livebar__pause.is-angehalten .kk-livebar__symbol--weiter {
	display: inline-block;
}

/* ==========================================================================
   06 Karten
   ========================================================================== */

.kk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.kk-card:hover {
	border-color: var(--kk-outline-var);
	box-shadow: var(--kk-schatten-2);
}

.kk-card:hover .kk-media__img {
	transform: scale(1.04);
}

.kk-card__title {
	margin: 0;
	font-size: var(--kk-fs-sm);
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-card__title a {
	color: var(--kk-on-surface);
	text-decoration: none;
}

/* Die ganze Karte ist anklickbar, ohne verschachtelte Verweise. */
.kk-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kk-card:hover .kk-card__title a,
.kk-card__title a:focus-visible {
	color: var(--kk-primary);
}

.kk-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--kk-xs);
	padding: var(--kk-md);
}

.kk-card__text,
.kk-card__lead {
	margin: 0;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.kk-card__lead {
	font-size: var(--kk-fs-lead);
	line-height: var(--kk-lh-lead);
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.kk-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
	z-index: 2;
}

/*
 * Sechster Fall des Fehlertyps, gefunden von Peter Schreck 23.09.2026.
 *
 * kk_media() gibt ohne Anhang NICHTS aus. Die Plakettenzeile steht danach
 * absolut bei top/left 8 px, Bezugsrahmen ist .kk-card (position: relative),
 * z-index 2. Der Kartenkoerper hat 16 px Polster, erstes Kind ist der Titel.
 * Ohne Bild liegt die deckende Plakette damit bei y 8-32 auf einer Titelzeile,
 * die bei y 16 beginnt - sie verdeckt die erste Zeile.
 *
 * Fuer die Leadkarte ist das seit heute abgefangen (kk.css, Abschnitt
 * Aufmacher). Der else-Zweig in kk_media() - standard, feature, portrait -
 * hatte keinen Schutz; er bedient front-page.php, schleife-magazin.php
 * (alle Archive), single.php und 404.php.
 *
 * Am Bestand trifft es 2 von 272 Beitraegen ohne Beitragsbild - und jeden
 * kuenftigen. Derselbe Musterschutz wie bei der Leadkarte, nicht ein neuer.
 */
.kk-card:not(:has(.kk-media)) .kk-card__chips--auf-bild {
	position: static;
	padding: var(--kk-md) var(--kk-md) 0;
}

.kk-card__chips--auf-bild {
	position: absolute;
	top: var(--kk-sm);
	left: var(--kk-sm);
}

/* Aufmacher */
.kk-card--lead .kk-card__hero {
	position: relative;
}

.kk-card--lead .kk-media--hero {
	aspect-ratio: 3 / 2;
	border-radius: 0;
}

@media (min-width: 640px) {
	.kk-card--lead .kk-media--hero {
		aspect-ratio: 3 / 2;
	}
}

.kk-card--lead .kk-card__chips {
	position: absolute;
	top: var(--kk-md);
	left: var(--kk-md);
}

.kk-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(10 10 12 / 92%) 0%, rgb(10 10 12 / 55%) 38%, rgb(10 10 12 / 8%) 72%, transparent 100%);
}

.kk-card__overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: var(--kk-xl) var(--kk-md) var(--kk-md);
	/*
	 * Zweiter, engerer Verlauf direkt hinter der Schrift. Erst beides zusammen
	 * hält den Kontrast auch über sehr hellen Motiven sicher über 4,5:1.
	 */
	background: linear-gradient(to top, rgb(10 10 12 / 88%) 0%, rgb(10 10 12 / 55%) 60%, rgb(10 10 12 / 0%) 100%);
	color: #fff;
}

.kk-card--lead .kk-card__title {
	font-size: var(--kk-fs-lg);
	line-height: var(--kk-lh-lg);
	text-shadow: 0 1px 12px rgb(0 0 0 / 45%);
}

.kk-card--lead .kk-card__title a {
	color: #fff;
}

.kk-card--lead:hover .kk-card__title a {
	color: var(--kk-gold-light);
}

/*
 * Aufmacher ohne Beitragsbild - der offene Punkt "kk-card--lead-text".
 *
 * BELEGT, gemessen 23.09.2026 (Elke, tools/rahmenfenster-messen.js, 390 px,
 * Rahmen mit unterdrueckter Rollleiste; das Bild der Leadkarte wurde im
 * Rahmen entfernt, um einen Beitrag ohne Beitragsbild nachzustellen):
 *
 *   mit Bild     Karte 444 px, .kk-card__hero 240 px
 *   ohne Bild    Karte 204 px, .kk-card__hero   0 px
 *                .kk-card__overlay 179 px hoch, Oberkante bei y = 66,
 *                also 179 px OBERHALB der Karte (Koerper beginnt bei 245)
 *                .kk-card__title Farbe rgb(255,255,255)
 *                Stapel unter dem Titel: kk-livebar__links, kk-livebar
 *
 * Also: weisse Ueberschrift, die ueber der Eilmeldung schwebt. Ursache ist
 * kk_media() (inc/template-tags.php): ohne Anhang gibt die Funktion gar
 * nichts aus - bewusst so, siehe die Begruendung dort. Damit bleiben im
 * .kk-card__hero nur noch absolut gesetzte Kinder uebrig, die Huelle faellt
 * auf 0 px zusammen, und .kk-card__overlay haengt mit `bottom: 0` an einer
 * Kante ohne Hoehe.
 *
 * Im Bestand haben zwei Beitraege kein Beitragsbild. Sie sind heute nicht
 * der Aufmacher, koennen es aber mit jeder Veroeffentlichung werden.
 *
 * LOESUNG ohne PHP und ohne neue Klasse: `:not(:has(.kk-media))` fragt
 * genau das ab, was kk_media() entscheidet - ist die Bildhuelle da oder
 * nicht. Eine Variantenklasse am <article> waere derselbe Zustand, nur ein
 * zweites Mal gepflegt.
 *
 * GESTALTUNG, und das ist die eigentliche Entscheidung: kein Platzhalter,
 * kein graues Feld, kein Monogramm. Ohne Foto wird der Aufmacher
 * typografisch - Titel in Hausschwarz auf der Kartenflaeche, in derselben
 * Groesse wie ueber dem Foto. Statt des Bildes markiert ein 3 px starker
 * Strich in Haus-Rot die Oberkante: er sagt "Aufmacher", ohne ein Bild zu
 * behaupten, das es nicht gibt. Dieselbe Haltung wie bei kk_media() selbst,
 * wo der Monogramm-Ersatz aus genau diesem Grund entfernt wurde.
 *
 * KONTRAST nach der Umstellung, gerechnet gegen --kk-lowest #ffffff:
 *   Titel      --kk-on-surface     #281715   15,4:1
 *   Angaben    --kk-on-surface-var #5c403c    8,9:1
 *   Ueberrollt --kk-primary        #94000b   10,4:1
 * Vorher stand der Titel in #ffffff auf #ffffff, sobald er nicht ueber
 * einem Foto lag - also 1,0:1.
 *
 * RUECKFALL: Browser ohne `:has()` zeigen weiter den alten Zustand. Das ist
 * kein neuer Mangel, sondern der heutige; die Stuetze liegt seit 2023 in
 * allen laufenden Browsern vor.
 *
 * NICHT GEPRUEFT: der Fall am Schreibtisch ab 768 px, wo die Leadkarte quer
 * gebaut wird (Regel unmittelbar darunter). Dort steht die Textspalte neben
 * einer Bildspalte, die ohne Bild leer bliebe - gemessen wurde nur 390 px.
 */
.kk-card--lead .kk-card__hero:not(:has(.kk-media)) {
	padding: var(--kk-md) var(--kk-md) 0;
	border-top: 3px solid var(--kk-primary);
}

.kk-card--lead .kk-card__hero:not(:has(.kk-media)) .kk-card__scrim {
	display: none;
}

.kk-card--lead .kk-card__hero:not(:has(.kk-media)) .kk-card__chips,
.kk-card--lead .kk-card__hero:not(:has(.kk-media)) .kk-card__overlay {
	position: static;
	padding: 0;
	background: none;
	color: var(--kk-on-surface);
}

.kk-card--lead .kk-card__hero:not(:has(.kk-media)) .kk-card__chips {
	margin-bottom: var(--kk-sm);
}

.kk-card--lead .kk-card__hero:not(:has(.kk-media)) .kk-card__title a {
	color: var(--kk-on-surface);
	text-shadow: none;
}

/*
 * Die Ueberroll-Farbe muss mitgenommen werden: --kk-gold-light #f5e8be auf
 * Weiss ergibt 1,3:1. Ueber dem Foto ist Gold richtig, auf der Kartenflaeche
 * waere es unlesbar.
 */
.kk-card--lead:hover .kk-card__hero:not(:has(.kk-media)) .kk-card__title a {
	color: var(--kk-primary);
}

/*
 * Die Angabenzeile steht mit `invers` im Markup (template-tags.php), also in
 * --kk-gold-light. Ohne Foto gilt dieselbe Rechnung wie beim Titel.
 */
.kk-card--lead .kk-card__hero:not(:has(.kk-media)) .kk-meta--invers,
.kk-card--lead .kk-card__hero:not(:has(.kk-media)) .kk-meta--invers a {
	color: var(--kk-on-surface-var);
}

.kk-card--lead .kk-card__hero:not(:has(.kk-media)) .kk-meta--invers .kk-meta__sep {
	color: var(--kk-outline);
}

/*
 * Tablet: die Leadkarte quer bauen.
 *
 * Über die ganze Breite gestellt wurde ihr 3:2-Bild 567 px hoch und der
 * Aufmacher 1723 px – der zweite Beitrag lag komplett unter der Falz. Quer
 * zeigt sie Bild, Überschrift und Vorspann in einem Blick. Unter 768 px
 * bleibt sie hochgebaut, der Slot bleibt bei kk-lead.
 *
 * Steht bewusst HIER und nicht beim Aufmacher-Raster: .kk-card--lead und
 * .kk-card sind gleich spezifisch, die Regel muss also nach
 * `.kk-card { flex-direction: column }` kommen, sonst bleibt sie wirkungslos.
 *
 * Kein justify-content am Textkörper: die Aufteilung macht schon das
 * `margin-top: auto` am .kk-card__foot, und ein auto-Margin schlägt
 * justify-content in der Hauptachse.
 */
@media (min-width: 48em) and (max-width: 63.9375em) {
	.kk-card--lead {
		flex-direction: row;
	}

	.kk-card--lead .kk-card__hero {
		flex: 0 0 55%;
	}

	.kk-card--lead .kk-card__body {
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * Ohne Beitragsbild bleibt sie hochgebaut - der offene Punkt aus dem
	 * Bericht vom 23.09.2026 ("ab 768 px ungeprueft").
	 *
	 * Quer gebaut haette der Aufmacher ohne Bild eine 55 % breite Spalte mit
	 * Kicker und Titel und daneben eine 45 % breite mit Vorspann und Knopf -
	 * zwei Textspalten, deren Teilung nichts bedeutet, weil die Bildspalte
	 * fehlt, die sie begruendet. Der Titel bekaeme dazu die schmalere der
	 * beiden Spalten.
	 *
	 * `flex-direction: column` statt Werte an Hero und Koerper zurueckdrehen:
	 * eine Regel, die die Ursache trifft, statt zweier, die Folgen aufheben.
	 *
	 * NICHT GEMESSEN, sondern aus der Bauweise geschlossen: die Testkopie hat
	 * derzeit keinen Aufmacher ohne Bild, und der Rahmenversuch lief bei
	 * 390 px. Sobald einer der zwei bildlosen Beitraege nach vorn rutscht,
	 * gehoert dieser Bereich zwischen 768 und 1023 px angesehen.
	 */
	.kk-card--lead:not(:has(.kk-media--hero)) {
		flex-direction: column;
	}
}

.kk-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	margin-top: auto;
	padding: var(--kk-sm) var(--kk-md);
	background: var(--kk-low);
	border-radius: var(--kk-r);
}

.kk-card__foot--schlicht {
	padding: var(--kk-sm) var(--kk-md) var(--kk-md);
	background: transparent;
}

/*
 * Chronikkachel: das Ereignisjahr ist das Leitelement der Karte, nicht eine
 * Fußnote (Beanstandung 4). Oswald, 32 px, ohne Wort "Jahr" und ohne Symbol –
 * die Spaltenüberschrift sagt schon, dass es die Chronik ist.
 */
.kk-card--kachel-chronik .kk-card__jahr {
	/*
	 * Feste Schildhöhe von 2rem und Ausrichtung auf die Unterkante.
	 *
	 * Nötig wegen der zweiten Schriftgröße (A-55): 2rem/1 ergibt 32 px,
	 * 1,25rem/1,15 ergibt 23 px. Ohne diese Zeilen wären die drei Schilder
	 * einer Kachelreihe unterschiedlich hoch, sobald eine Kachel ein
	 * ausgeschriebenes Datum trägt – und die drei H4-Titel darunter
	 * rutschten um 9 px auseinander. Die Gleichhöhe ist der eigentliche
	 * Zweck der Staffelung.
	 *
	 * `flex-end`, nicht `center`: Zahl und Datum sitzen dann auf derselben
	 * Grundlinie direkt über dem Titel. Das unsichtbare Etikett
	 * (.screen-reader-text) ist `position: absolute` und zählt hier nicht
	 * als Flex-Element mit.
	 */
	display: flex;
	align-items: flex-end;
	min-height: 2rem;
	margin: 0 0 0.25rem;
	color: var(--kk-navy);
	font-family: var(--kk-font-head);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	/*
	 * Zweite Verteidigungslinie: `_kk_jahresanzeige` bleibt redaktionell
	 * offen. kk_chronik_jahr_schild() lässt höchstens 12 Zeichen durch, mehr
	 * kann hier also nicht ankommen – aber das Feld kann morgen einen Wert
	 * enthalten, für den heute niemand bürgt.
	 *
	 * Bewusst OHNE `text-overflow: ellipsis` und ohne `line-clamp`: bei einer
	 * Jahresangabe ist das Jahr das Entscheidende. Ein abgeschnittenes Jahr
	 * ist schlimmer als ein umbrochenes. Klammern darf man Auszüge, nicht
	 * Schlagzeilen und nicht Zahlen.
	 */
	white-space: nowrap;
}

/*
 * Zweite Größe für ausgeschriebene Datumsangaben (A-55).
 *
 * 1,25rem = 20 px statt 2rem = 32 px. Gemessen (Oswald 700, Chronikspalte
 * 367 px): "12. Dezember 1823/24" (20 Zeichen) läuft bei 32 px auf 290 px,
 * bei 20 px auf 181 px; der theoretische Grenzfall von 24 breiten Versalien
 * käme bei 32 px auf 535 px (168 px Überlauf), bei 20 px auf 334 px. Erst mit
 * der Staffelung ist ein Überlauf strukturell unmöglich.
 *
 * Es ist zugleich das bessere Schriftbild: "12. Februar 1945" bei 32 px
 * Oswald 700 sind 216 px in einer 367-px-Spalte – das ist kein Schild mehr,
 * sondern eine zweite Schlagzeile, die mit dem H4-Titel darunter
 * konkurriert. Das Schild bleibt in beiden Fällen das erste Element der
 * Kachel, die Hierarchie ändert sich nicht.
 *
 * Die Klasse setzt kk_schild_ist_datum() in PHP.
 */
.kk-card--kachel-chronik .kk-card__jahr--datum {
	font-size: 1.25rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.kk-card__stats {
	display: flex;
	gap: var(--kk-md);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

.kk-card__stat {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.kk-card__stat:first-child {
	color: var(--kk-primary);
	font-weight: 600;
}

/*
 * Der Handlungsverweis der Leadkarte ist seit 22.09.2026 ein `a`, nicht mehr
 * ein `span` (Beanstandung 2). `.kk-btn` bringt display, Polster und Farben
 * schon mit; ein Anker braucht zusätzlich die Unterstreichung weg.
 *
 * Der Fokusring: .kk-card__cta sitzt auf hellem Kartengrund (--kk-lowest,
 * weiß) im Kartenfuß, nicht auf dem dunklen Overlay – das Overlay trägt nur
 * Metazeile und Titel. Der globale Ring (--kk-primary-container #c00814)
 * kontrastiert gegen Weiß rund 5,9:1 und gegen die rote Schaltflächenfläche
 * (--kk-primary #94000b) rund 1,5:1 – der zweite Wert reißt SC 1.4.11.
 * Deshalb hier ein Ring mit Abstand plus weißem Zwischenraum: der Ring liegt
 * dadurch vollständig auf dem weißen Grund und muss nur gegen diesen
 * bestehen (5,9:1).
 */
.kk-card__cta {
	z-index: 0;
	text-decoration: none;
}

.kk-card__cta:focus-visible {
	outline: 3px solid var(--kk-primary-container);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kk-lowest);
}

/* Feature-Karte: größerer Titel */
.kk-card--feature .kk-card__title {
	font-size: var(--kk-fs-md);
	line-height: var(--kk-lh-md);
}

/* Kompaktkarte: Bild links, Text rechts */
.kk-card--kompakt {
	flex-direction: row;
	gap: var(--kk-md);
	align-items: stretch;
	padding: var(--kk-sm);
}

/*
 * Nur die Breite ändert sich, das Seitenverhältnis nicht: 3:2 kommt aus
 * .kk-media und passt damit zum angeforderten Zuschnitt kk-thumb (400×267).
 * 152 × 101 bleibt als Marke in der Kompaktzeile ausreichend.
 */
.kk-card--kompakt .kk-media {
	flex: 0 0 7.5rem;
	width: 7.5rem;
	/*
	 * Ohne align-self setzt align-items: stretch der Karte die Hoehe des
	 * Rahmens explizit und schaltet damit aspect-ratio ab - gemessen wurde
	 * ein 152 x 222 px hoher Rahmen fuer einen 3:2-Zuschnitt. Der Rahmen
	 * muss seine eigene Hoehe behalten, sonst wird das Bild ein zweites Mal
	 * beschnitten, diesmal seitlich.
	 */
	align-self: flex-start;
}

@media (min-width: 640px) {
	.kk-card--kompakt .kk-media {
		flex-basis: 9.5rem;
		width: 9.5rem;
	}
}

.kk-card--kompakt .kk-card__body {
	padding: var(--kk-xs) var(--kk-sm) var(--kk-xs) 0;
	gap: 0.15rem;
	/*
	 * Ohne min-width: 0 sitzt der Textkoerper auf seiner min-content-Breite
	 * fest - also auf der Breite des laengsten Wortes. Bei doppeltem
	 * Schriftgrad in der schmalen Nebenspalte lief die Karte damit 232 px
	 * ueber ihren Rahmen hinaus, und .kk-card { overflow: hidden } schnitt
	 * den Text ab (gemessen 474 px Inhalt in 244 px Karte).
	 *
	 * overflow-wrap vererbt sich und deckt damit auch die Metazeile ab:
	 * .kk-meta__item ist inline-flex und brach als einziges Element nicht
	 * (gemessen 31 px Ueberlauf). `anywhere` statt `break-word`, weil nur
	 * `anywhere` auch die min-content-Breite senkt.
	 */
	min-width: 0;
	overflow-wrap: anywhere;
}

.kk-card--kompakt .kk-card__title {
	font-size: var(--kk-fs-body);
	line-height: 1.35;
}

/* -- Registerzeile ------------------------------------------------------- */

/*
 * EIGENE VARIANTE, NICHT `--kompakt` UMDEFINIERT (23.09.2026).
 *
 * `--kompakt` steht im Aufmacher und in der Trefferliste der Suche. Dort
 * wird sein Bildrahmen gebraucht; ihn für das Register umzuschreiben hieße,
 * eine tragende Eigenschaft an einer Stelle zu ändern, an der sie gebraucht
 * wird. Die Zeile ist deshalb ein eigenes Bauteil.
 *
 * DIE ZEILENKARTE IST FLACH. `.kk-card` bringt Rahmen, Hintergrund, Radius
 * und einen Schatten beim Überfahren mit – eine Karte ist ein Gegenstand.
 * Fünf Gegenstände untereinander lesen sich als fünf Kästen, nicht als ein
 * Bestand. Die Zeile nimmt die Verkleidung ab und behält, was an `.kk-card`
 * TRAGEND ist: `position: relative` als Bezugsrahmen und die
 * Ganzflächen-Klickfläche `.kk-card__title a::after`.
 *
 * Das ist der Unterschied zum Umdefinieren von `--kompakt`: dort wäre ein
 * Seitenverhältnis gefallen, also Struktur. Hier fallen Rahmen und Schatten,
 * also Schmuck.
 */
.kk-card--zeile {
	flex-direction: row;
	gap: var(--kk-sm);
	align-items: flex-start;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/*
 * Rückmeldung am Titel, nicht am Kasten: ein Schatten setzte den Gegenstand
 * wieder ein, den die Regel darüber gerade abgenommen hat. Der Bildzoom von
 * `.kk-card:hover` entfällt ebenfalls – 4 % auf 120 px sind 5 px Bewegung an
 * einer Merkmarke, also Unruhe ohne Aussage.
 */
.kk-card--zeile:hover {
	border-color: transparent;
	box-shadow: none;
}

.kk-card--zeile:hover .kk-card__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.kk-card--zeile:hover .kk-media__img {
	transform: none;
}

/*
 * BILDRAHMEN 120 × 80 – 7,5 rem bei 3:2, Quelle kk-thumb (400 × 267).
 *
 * A6 (Markus): Das VERHÄLTNIS kommt von `.kk-media` (aspect-ratio: 3/2) und
 * wird hier nicht angetastet – diese Regel setzt ausschließlich die Breite.
 * Dazu schreibt `wp_get_attachment_image()` width und height als Attribute.
 * Zwei Sicherungen gegen Layoutsprung, keine davon von hier berührt.
 *
 * KEIN quadratischer Rahmen: 88 × 88 hätte ein bereits auf 3:2 beschnittenes
 * Bild per object-fit ein DRITTES Mal beschnitten, seitlich um rund 33 % –
 * derselbe Fehler, der für `.kk-media--klein` oben schon behoben ist. Die
 * Hausregel („alle Nachrichtenrahmen 3:2, alle Porträtrahmen 3:4") steht.
 * Eine neu registrierte Größe war die Alternative; sie hätte auf der
 * Livesite alle Vorschaubilder neu erzeugt und damit ShortPixel, Worthy und
 * das Caching gestreift – eine eigene Entscheidung, nicht diese.
 *
 * WARUM 120 UND NICHT 96 ODER 132. BELEGT, gemessen 23.09.2026 in der
 * lokalen Vorschau, abgemeldet, 390 px: 14 echte Titel in Oswald 600,
 * 16 px, Zeilenhöhe 1,35 gegen die verbleibende Textspalte umgebrochen –
 *
 *   Bild 132 px -> Textspalte 180 px -> 3,50 Zeilen im Schnitt, max 5
 *   Bild 120 px -> Textspalte 200 px -> 3,21 Zeilen im Schnitt, max 4
 *   Bild  96 px -> Textspalte 216 px -> 3,00 Zeilen im Schnitt, max 4
 *   Bild  88 px -> Textspalte 224 px -> 2,86 Zeilen im Schnitt, max 3
 *
 * Auf dem Telefon setzt also der TITEL die Zeilenhöhe, nicht das Bild (drei
 * Titelzeilen sind 65 px, der Rahmen ist 80 px hoch – ab Zeile vier überholt
 * der Text ihn). Die Bildbreite ist damit keine Höhenfrage, sondern eine
 * Frage der Textbreite. 120 px kostet gegenüber 96 px 0,21 Zeilen und spart
 * eine neue Zahl im Haus: es ist der Wert, den `.kk-card--kompakt` unter
 * 640 px bereits rendert, und der `sizes`-Hinweis für kk-thumb in
 * inc/assets.php:319 steht mit '152px' / '120px' schon darauf. 132 px fiel
 * durch, weil dort eine Einzelzeile auf fünf Titelzeilen läuft – das
 * zerstört den Rhythmus stärker, als 44 px Breite ihn hergeben.
 *
 * Bewusst EIGENE Regel und kein gemeinsamer Selektor mit
 * `.kk-card--kompakt .kk-media`: ein doppelter Wert ist billiger als eine
 * Kopplung. Dass beide Varianten sich beim Bildrahmen einig sind, macht sie
 * nicht zur selben Variante – sie unterscheiden sich in Verkleidung (Karte
 * gegen Listenzeile) und Inhalt (Metazeile gegen keine).
 *
 * `align-self: flex-start` ist Pflicht, nicht Geschmack: mit dem geerbten
 * `stretch` setzt das Flex-Layout die Höhe explizit und schaltet damit
 * `aspect-ratio` ab – in `--kompakt` ist derselbe Fehler belegt. An der
 * Karte steht ohnehin `align-items: flex-start`; die Deklaration bleibt
 * trotzdem, damit die Zeile heil bleibt, wenn jemand die Ausrichtung der
 * Karte ändert.
 */
.kk-media--zeile {
	flex: 0 0 7.5rem;
	width: 7.5rem;
	align-self: flex-start;
}

/*
 * `min-width: 0` und `overflow-wrap` aus demselben Grund wie in
 * `--kompakt`: ohne beides sitzt der Textkörper auf der Breite seines
 * längsten Wortes fest und läuft aus der Zeile heraus. Bei Titeln mit
 * „Karnevalsgesellschaft" oder „Sessionseröffnung" ist das kein Sonderfall.
 */
/*
 * `align-self: stretch` plus `justify-content: center` – der Grund ist am
 * Bildschirm sichtbar, nicht an den Zahlen ablesbar.
 *
 * Auf dem Schreibtisch läuft der Titel auf EINE Zeile. Der Textkörper ist
 * damit rund 50 px hoch, der Bildrahmen 80 px – und weil die Zeile
 * `align-items: flex-start` trägt (das muss sie, sonst fällt das
 * Seitenverhältnis des Bildes), klebte der Text an der Oberkante und ließ
 * 30 px Leerraum unter sich. Fünf Zeilen untereinander lasen sich dadurch
 * oben ausgerichtet statt aufeinander bezogen.
 *
 * `stretch` gibt dem Textkörper die Höhe der Zeile, `center` setzt den Text
 * darin mittig zum Bild. Auf dem Telefon, wo der Titel drei bis vier Zeilen
 * läuft und der Textkörper höher ist als der Rahmen, tut `center` nichts –
 * die Regel greift genau dort, wo sie gebraucht wird, und nirgends sonst.
 */
.kk-card--zeile .kk-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	gap: 0.15rem;
	padding: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.kk-card--zeile .kk-card__title {
	font-size: var(--kk-fs-body);
	line-height: 1.35;
	text-wrap: balance;
}

/*
 * Auf dem Schreibtisch ist die Textspalte 606 px breit (734 Tafelinnenmaß
 * minus 120 Bild minus 8 Zwischenraum). Ein Titel läuft dort auf ein bis
 * zwei Zeilen und hätte bei 16 px zu wenig Gewicht gegen den 120er Rahmen
 * daneben; 18 px füllt die Zeile, ohne die Feature-Karte zu bedrängen.
 */
@media (min-width: 768px) {
	.kk-card--zeile .kk-card__title {
		font-size: var(--kk-fs-sm);
	}
}

/* Kachel ohne Bild */
.kk-card--kachel {
	background: var(--kk-low);
	border-color: transparent;
}

.kk-card--kachel:hover {
	background: var(--kk-container);
}

.kk-card--kachel .kk-card__title {
	font-size: var(--kk-fs-sm);
}

/* Porträtkarte (Künstler) */
.kk-card--portrait .kk-media {
	aspect-ratio: 3 / 4;
	border-radius: 0;
}

.kk-card--portrait .kk-card__body {
	gap: 0.15rem;
}

/* ==========================================================================
   07 Randspalte
   ========================================================================== */

.kk-widget {
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	box-shadow: var(--kk-schatten-1);
}

@media (min-width: 768px) {
	.kk-widget {
		padding: var(--kk-lg);
	}
}

.kk-widget__title,
.kk-widget > h2,
.kk-widget > h3 {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin: 0 0 var(--kk-md);
	padding: var(--kk-sm) var(--kk-md);
	background: var(--kk-low);
	border-radius: var(--kk-r);
	color: var(--kk-primary);
	font-size: var(--kk-fs-sm);
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

/* Rangliste */
.kk-rank {
	display: flex;
	flex-direction: column;
	gap: var(--kk-md);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: kk-rang;
}

.kk-rank__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--kk-md);
}

.kk-rank__num {
	flex: 0 0 auto;
	min-width: 1.6ch;
	font-family: var(--kk-font-head);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 0.95;
	/*
	 * 50 % statt 28 % (23.09.2026). BELEGT: 28 % ergaben 1.78 auf Weiss — so
	 * blass, dass die Ziffer wie ein Druckfehler wirkte, nicht wie ein
	 * Gestaltungsmittel. 50 % ergeben 3.03 und damit die Schwelle für grosse
	 * Schrift (40 px). Bewusst nicht das Dazwischen: eine Geisterziffer muss
	 * als Absicht lesbar sein, sonst gehört sie weg.
	 */
	color: rgb(148 0 11 / 50%);
	transition: color 0.15s ease;
}

.kk-rank__item:hover .kk-rank__num {
	color: var(--kk-primary);
}

.kk-rank__body {
	min-width: 0;
}

.kk-rank__stat {
	display: block;
	color: var(--kk-primary);
	font-size: var(--kk-fs-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kk-rank__title {
	margin: 0.1rem 0 0.15rem;
	font-size: var(--kk-fs-sm);
	line-height: 1.3;
	text-transform: uppercase;
}

.kk-rank__title a {
	color: var(--kk-on-surface);
	text-decoration: none;
}

.kk-rank__title a:hover {
	color: var(--kk-primary);
}

.kk-rank__text {
	margin: 0;
	overflow: hidden;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -- Werbefläche (23.09.2026) -------------------------------------------
 *
 * Eigener Widget-Bereich `kk-werbung`, nicht `kk-sidebar` — Begründung in
 * inc/setup.php. Erscheint in beiden Randspalten: rand-artikel.php hinter
 * „Meistgelesen", rand-magazin.php hinter den Terminen.
 *
 * Der Platzhalter reserviert seine Höhe über `aspect-ratio`, damit der Text
 * darunter beim Laden des Banners nicht springt. Das Verhältnis 6:5 ist das
 * des heutigen Motivs (gemessen: KM-Karneval-Auswahl-300x250.jpg, also
 * 300 × 250). `object-fit: contain` sorgt dafür, dass ein anderes Motiv
 * eingepasst statt verzerrt wird — Adcell kann das Motiv jederzeit wechseln.
 *
 * Nebenbefund, nicht behoben: das Widget-Markup des Betreibers setzt
 * `width="400"` auf ein 300 px breites Motiv und skaliert es damit hoch.
 */
.kk-werbung {
	margin: 0 0 var(--kk-lg);
}

.kk-werbung__hinweis {
	margin: 0 0 var(--kk-xs);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kk-werbung__platz {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 6 / 5;
	overflow: hidden;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
}

.kk-werbung__platz :is(img, iframe, ins) {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Ein Werbemittel, das gar nicht lädt (Blocker, Netzfehler), soll keinen
 * leeren Rahmen hinterlassen: ohne Bild fällt die reservierte Höhe weg.
 */
.kk-werbung__platz:not(:has(:is(img, iframe, ins))) {
	aspect-ratio: auto;
	border: 0;
}

/* Dunkler Veedels-Baustein */
.kk-dunkelbox {
	padding: var(--kk-lg);
	background: var(--kk-ticker);
	border-radius: var(--kk-r);
	color: #fff;
}

.kk-dunkelbox__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	margin-bottom: var(--kk-md);
}

.kk-dunkelbox__titel {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin: 0;
	color: var(--kk-gold);
	font-size: var(--kk-fs-sm);
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-dunkelbox__text {
	color: #ded5d4;
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

.kk-dunkelbox label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--kk-gold-light);
	font-size: var(--kk-fs-meta);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-dunkelbox select,
.kk-dunkelbox input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	background: var(--kk-charcoal);
	border: 1px solid #333;
	border-radius: var(--kk-r);
	color: #fff;
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
}

/* Dieselbe Trennung wie unten bei den allgemeinen Formularfeldern. */
.kk-dunkelbox select:focus,
.kk-dunkelbox input:focus {
	border-color: var(--kk-carmine-bright);
}

.kk-dunkelbox select:focus:not(:focus-visible),
.kk-dunkelbox input:focus:not(:focus-visible) {
	outline: none;
}

.kk-dunkelbox__felder {
	display: flex;
	flex-direction: column;
	gap: var(--kk-sm);
	margin-bottom: var(--kk-md);
}

.kk-dunkelbox__knoepfe {
	display: flex;
	flex-direction: column;
	gap: var(--kk-sm);
}

/* Newsletter-Baustein */
.kk-brief {
	padding: var(--kk-lg);
	background: var(--kk-primary);
	border-radius: var(--kk-r);
	color: #fff;
}

.kk-brief__titel {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin: 0 0 var(--kk-sm);
	color: #fff;
	font-size: var(--kk-fs-sm);
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-brief__text {
	color: #ffd9d5;
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

.kk-brief .kk-btn--gold {
	width: 100%;
	justify-content: center;
}

/*
 * Schlichte Briefbox mit Anmeldefeld (Beanstandung 8.3).
 *
 * Nicht der Gold-auf-Dunkel-Ton der Startseiten-Box: die stand dort als
 * Werbeflaeche, hier steht unter einem gelesenen Beitrag ein Angebot. Heller
 * Grund, ein Haarstrich Rahmen, Ueberschrift in Versalienschriftgrad, ein
 * Symbol - kein Symbol-Feuerwerk.
 */
.kk-brief--schlicht {
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	color: var(--kk-on-surface);
}

.kk-brief--schlicht .kk-brief__titel {
	color: var(--kk-primary);
	font-size: var(--kk-fs-caps);
	letter-spacing: 0.06em;
}

.kk-brief--schlicht .kk-brief__text {
	margin-bottom: var(--kk-sm);
	color: var(--kk-on-surface-var);
}

/* Etikett: sichtbar, klein, direkt ueber dem Feld. Kein Platzhalter-Ersatz. */
.kk-brief__etikett {
	display: block;
	margin-bottom: var(--kk-xs);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Der bestehende Verweis auf /newsletter/ bleibt als kleiner Textlink UNTER
 * dem Feld - nicht als zweiter Knopf. Zwei Knoepfe nebeneinander sind zwei
 * gleich starke Aufforderungen, und nur eine davon ist hier gemeint.
 */
.kk-brief__mehr {
	margin: var(--kk-sm) 0 0;
	font-size: var(--kk-fs-body-sm);
}

.kk-brief__mehr a {
	color: var(--kk-on-surface-var);
}

/* Kolumne */
.kk-kolumne {
	padding: var(--kk-lg);
	background: var(--kk-low);
	border-left: 4px solid var(--kk-primary);
	border-radius: var(--kk-r);
}

.kk-kolumne__label {
	display: block;
	margin-bottom: var(--kk-xs);
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-kolumne__zitat {
	margin: 0 0 var(--kk-sm);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-md);
	font-weight: 600;
	line-height: var(--kk-lh-md);
	color: var(--kk-on-surface);
}

.kk-kolumne__autor {
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	margin-top: var(--kk-md);
	padding-top: var(--kk-sm);
	border-top: 1px solid var(--kk-outline-var);
}

.kk-kolumne__autor img {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--kk-r-pill);
	object-fit: cover;
}

.kk-kolumne__name {
	display: block;
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body);
	font-weight: 600;
	text-transform: uppercase;
}

.kk-kolumne__rolle {
	display: block;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
}

/* Terminliste in der Randspalte */
.kk-randtermine {
	display: flex;
	flex-direction: column;
	gap: var(--kk-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-randtermin {
	display: flex;
	gap: var(--kk-sm);
	align-items: flex-start;
	padding: var(--kk-sm);
	background: var(--kk-low);
	border-radius: var(--kk-r);
}

/*
 * Waagerechtes Scrollen abgestellt - SC 1.4.10 Reflow (AA).
 *
 * Belegt von Klaus 23.09.2026 an der Testkopie: bei 390 px scrollte die
 * Startseite 20 px waagerecht, bei 320 px 90 px. Ursache: .kk-randtermin ist
 * ein Flex-Behaelter, die Textspalte ein Flex-Element mit min-width: auto -
 * sie kann also nicht unter ihren laengsten unteilbaren Inhalt schrumpfen.
 * Der Titel "75 Jahre Stammtisch Koelner Karnevalisten: Jubilaeums-
 * Praesentationsabend 2026/27" erzwang 303 px Mindestbreite ab x = 107.
 *
 * Zwei Teile, beide noetig: min-width: 0 hebt die Flex-Sperre auf,
 * overflow-wrap: break-word erlaubt den Umbruch im Wort. Ohne das Zweite
 * schrumpft die Spalte, der Text laeuft aber weiter hinaus.
 *
 * Kein Rueckschritt dieses Umbaus - der Kasten trug das vorher schon; der
 * Umbau hat ihn nur auf Rang 3 der Mobilseite gestellt.
 */
.kk-randtermin > div {
	min-width: 0;
}

.kk-randtermin__titel,
.kk-randtermin__meta {
	overflow-wrap: break-word;
}

.kk-randtermin__titel {
	margin: 0 0 0.1rem;
	font-size: var(--kk-fs-body-md);
	line-height: 1.35;
	text-transform: uppercase;
}

.kk-randtermin__titel a {
	color: var(--kk-on-surface);
	text-decoration: none;
}

.kk-randtermin__titel a:hover {
	color: var(--kk-primary);
}

/*
 * `margin: 0` ist hier kein Aufräumen, sondern eine Fehlerbehebung.
 *
 * BELEGT, gemessen 23.09.2026, 390 px: Die Metazeile trug den
 * Browser-Vorgabewert `margin-block-end: 1em` = 16 px. Weil `.kk-randtermin`
 * ein Flex-Behälter ist, wird ihr Textkasten zum Flex-Element und bildet
 * einen eigenen Formatierungskontext - der Außenabstand fällt also nicht
 * heraus, sondern steht als tote Luft unter JEDER Terminzeile. Gemessen:
 * Textkasten 74,9 px bei 57,3 px Inhalt.
 *
 * Das galt an allen Bildschirmbreiten, nicht nur auf dem Telefon; die Regel
 * steht deshalb hier und nicht in der Medienabfrage weiter unten.
 */
.kk-randtermin__meta {
	margin: 0;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
}

/*
 * DEFINIERTE ZEILENHÖHE AUF DEM TELEFON (Markus, Auflage A7, 23.09.2026).
 *
 * BELEGT, gemessen 390 px, abgemeldet, drei Einträge: die drei Zeilen waren
 * 91, 92 und 129 px hoch. Der Ausreißer ist kein Zufall – die Höhe folgte
 * dem Titel, und der dritte Titel brach auf vier Zeilen um. Im Oktober steht
 * dieser Kasten an zweiter Stelle der Startseite; drei Zeilen, die je nach
 * Titellänge unterschiedlich hoch sind, lesen sich dort als drei
 * verschiedene Bauteile.
 *
 * Die Datumsplakette BLEIBT. Sie ist der schnellste Zugriff auf das Datum,
 * und sie ist zugleich das Maß: 60 × 67 px plus 2 × 8 px Polsterung ergeben
 * 83 px. Mit auf zwei Zeilen begrenztem Titel bleibt die Plakette in jedem
 * Fall das höhere Element – damit ist die Zeilenhöhe nicht mehr vom Text
 * abhängig, sondern gesetzt.
 *
 * Nur bis 1023 px: auf dem Schreibtisch steht der Kasten in einer eigenen
 * Spalte, kostet keine Länge und darf atmen.
 *
 * ABWÄGUNG, offen benannt: Der Titel ist ein Link, und was über zwei Zeilen
 * hinausgeht, ist sichtbar abgeschnitten. Die Textspalte ist hier 262 px
 * breit, bei 14 px also rund 38 Zeichen je Zeile – zwei Zeilen fassen rund
 * 76 Zeichen. Vorlesehilfen lesen den vollen Titel, er steht unverändert im
 * Quelltext. Titel über 76 Zeichen verlieren ihr Ende trotzdem für das Auge;
 * das ist ein Hinweis an die Redaktion, keine Nebenwirkung, die sich
 * wegstellen lässt.
 */
@media (max-width: 1023px) {
	.kk-widget--termine .kk-randtermin {
		min-height: 5.1875rem; /* 83 px = Plakette 67 + 2 x 8 Polsterung */
	}

	.kk-widget--termine .kk-randtermin__titel {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	/*
	 * NACHGEMESSEN, und die erste Diagnose war falsch: Nach der Begrenzung
	 * des Titels blieben die Zeilen 90,9 / 91,6 / 110,5 px. Der Ausreißer kam
	 * NICHT vom Titel (der stand überall bei 37,8 px = zwei Zeilen), sondern
	 * von der Metazeile – „20:00 Uhr · <Ort>" brach bei langen Ortsnamen auf
	 * zwei Zeilen um (39,1 statt 19,6 px).
	 *
	 * Eine Zeile, Rest gekürzt. Die Uhrzeit steht vorn und bleibt immer
	 * lesbar; abgeschnitten wird höchstens das Ende des Ortsnamens. Für
	 * Vorlesehilfen bleibt der Text vollständig.
	 */
	.kk-widget--termine .kk-randtermin__meta {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* -- Chronik-Einstieg in der Randspalte (23.09.2026) --------------------
 *
 * Gestaltungsgedanke: Die Jahreszahl IST das Bild.
 *
 * Der Kasten steht in einer Spalte, die schon zwei Listen traegt - Termine
 * (Datumsplakette + Titel) und Meistgelesen (Rangziffer + Titel). Eine
 * dritte Liste derselben Bauart waere ein Fremdkoerper durch Wiederholung.
 * Das Material der Chronik ist aber ein anderes: 246 belegte Ereignisse
 * ueber 203 Jahre. Was diesen Bestand ausmacht, ist die SPANNE - und die
 * laesst sich nur mit zwei Jahreszahlen und dem Abstand dazwischen zeigen,
 * nicht mit drei beliebig gewaehlten Meldungen.
 *
 * Deshalb: das aelteste Ereignis oben, das juengste unten, dazwischen eine
 * gestrichelte Strecke mit der Zahl der uebersprungenen Ereignisse. Die
 * Luecke ist keine Zierde, sie ist die Aussage. Und die Auswahl ist
 * begruendbar - "drei aktuelle Ereignisse" waere sie nicht.
 *
 * Die Huelle bleibt `.kk-widget` wie bei Terminen und Meistgelesen: heller
 * Grund, Haarlinie, derselbe Kopf. Der Kasten faellt durch die Typografie
 * auf, nicht durch eine neue Farbflaeche - die dunkle Veedel-Box und die
 * rote Briefbox stehen in derselben Spalte, eine dritte Sonderflaeche waere
 * Laerm.
 *
 * Gebaut fuer den Schreibtisch: dort stehen laut Messung vom 23.09.2026
 * unter der Spalte 1.690 px frei (Strang 3.575, Spalte 1.885). Mobil
 * beginnt die Spalte erst bei 5.381 px; dort traegt der Einstieg im
 * Einleitungstext, nicht dieser Kasten.
 *
 * Markup und Daten liefert Werner (Kastentabelle im Theme). Diese Regeln
 * greifen erst, wenn er die Klassen ausgibt - bis dahin sind sie wirkungslos
 * und stoeren nichts.
 *
 * Sprungziele: /karnevalsgeschichte/#kk-e-<jahr>-<slug>. Der klebende Kopf
 * ist bereits ueber `scroll-padding-top` (kk.css, Abschnitt 03)
 * ausgeglichen - an den Zielen selbst wird KEIN scroll-margin gesetzt, das
 * wuerde den Abstand verdoppeln.
 */

.kk-zeitstrahl__spanne {
	margin: 0 0 var(--kk-md);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-zeitstrahl {
	position: relative;
	margin: 0 0 var(--kk-md);
	padding: 0 0 0 var(--kk-lg);
	list-style: none;
}

/*
 * Die Linie beginnt und endet auf Hoehe der ersten und letzten Jahreszahl,
 * nicht am Rand des Kastens: sie verbindet Ereignisse, sie rahmt nicht.
 */
.kk-zeitstrahl::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	bottom: 0.55rem;
	left: 0.3125rem;
	width: 2px;
	background: var(--kk-divider);
}

.kk-zeitstrahl > li {
	position: relative;
}

.kk-zeitstrahl > li + li {
	margin-top: var(--kk-md);
}

/* Der Punkt sitzt auf der Linie, der weisse Ring trennt ihn von ihr. */
.kk-zeitstrahl__punkt::before {
	content: "";
	position: absolute;
	top: 0.3rem;
	left: calc(0.0625rem - var(--kk-lg));
	width: 0.625rem;
	height: 0.625rem;
	background: var(--kk-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--kk-lowest);
}

/*
 * Jahr und Titel liegen in EINEM Verweis: der Vorlesetext lautet damit
 * "1823, Reform des Karnevals ...", und das Klickziel ist die ganze Zeile
 * statt einer Textzeile von 14 px Hoehe (WCAG 2.2 SC 2.5.8).
 */
.kk-zeitstrahl__punkt a {
	display: block;
	text-decoration: none;
}

.kk-zeitstrahl__jahr {
	display: block;
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.kk-zeitstrahl__titel {
	display: block;
	margin-top: 0.15rem;
	color: var(--kk-on-surface);
	font-size: var(--kk-fs-body-md);
	line-height: 1.35;
}

.kk-zeitstrahl__punkt a:hover .kk-zeitstrahl__titel {
	color: var(--kk-primary);
	text-decoration: underline;
}

/*
 * Die Luecke. Die gestrichelte Strecke ueberdeckt die durchgezogene Linie -
 * daher der deckende Grund in den Zwischenraeumen statt `transparent`.
 */
.kk-zeitstrahl__luecke {
	min-height: 1.75rem;
	padding: 0.35rem 0;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	font-variant-numeric: tabular-nums;
}

.kk-zeitstrahl__luecke::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--kk-md));
	bottom: calc(-1 * var(--kk-md));
	left: calc(0.375rem - var(--kk-lg));
	width: 2px;
	background: repeating-linear-gradient(
		to bottom,
		var(--kk-primary) 0 3px,
		var(--kk-lowest) 3px 8px
	);
}

/* Hinweisfeld „Anzeige“ */
.kk-anzeige {
	padding: var(--kk-md);
	background: var(--kk-low);
	border: 1px dashed var(--kk-outline-var);
	border-radius: var(--kk-r);
	text-align: center;
}

.kk-anzeige__label {
	display: block;
	margin-bottom: var(--kk-xs);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   08 Artikel
   ========================================================================== */

.kk-artikel__kopf {
	margin-bottom: var(--kk-md);
}

.kk-artikel__titel {
	margin: var(--kk-sm) 0;
	font-size: var(--kk-fs-hero);
	font-weight: 700;
	line-height: var(--kk-lh-hero);
	text-transform: uppercase;
	color: var(--kk-on-surface);
}

.kk-artikel__teaser {
	margin: 0 0 var(--kk-md);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-lead);
	line-height: var(--kk-lh-lead);
}

.kk-artikel__metabar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	padding: var(--kk-sm) 0;
	border-top: 1px solid var(--kk-divider);
	border-bottom: 1px solid var(--kk-divider);
}

.kk-artikel__bild {
	margin: 0 0 var(--kk-md);
}

.kk-artikel__bild .kk-media {
	aspect-ratio: 3 / 2;
}

/*
 * Porträtfassung für Künstler-Einzelseiten. Die Regel darüber hat zwei
 * Klassen und schlägt .kk-media--portrait – deshalb hier ausdrücklich.
 * Die Breitenbegrenzung ist kein Schmuck: Ein 3:4-Porträt über die volle
 * Spaltenbreite wäre 979 px hoch und schöbe den ganzen Text unter die Falz.
 */
.kk-artikel__bild .kk-media--portrait {
	aspect-ratio: 3 / 4;
}

.kk-artikel__bild--portrait {
	max-width: 26rem;
}

.kk-artikel__bildtext {
	margin-top: var(--kk-xs);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
	line-height: 1.45;
}

/* Fließtext */

/*
 * Zeilenlänge und Schriftgrad (22.09.2026).
 *
 * Gemessen auf der Testkopie: 16 px auf 734 px Spaltenbreite = 92 Zeichen je
 * Zeile. 734 px sind kein Zufallswert, sondern ergeben sich aus dem Raster:
 * .kk-wrap 1200 → .kk-layout--mit-rand 8fr/4fr mit --kk-lg Rinne → Strang
 * 784 → .kk-panelblock 2x24 px Polsterung und 2x1 px Rahmen → 734.
 *
 * 734 / 92 = 7,98 px je Zeichen, also 0,499 em - der übliche Mittelwert für
 * Open Sans. Damit lässt sich jede Breite direkt in Zeichen umrechnen.
 *
 * WICHTIG: Die SPALTE bleibt bei 734 px. Geändert wird nur der SATZSPIEGEL.
 * Das hat zwei Gründe:
 *
 * 1. Die sizes-Karte in inc/assets.php hängt an der Spaltenbreite
 *    ('1200x800' => '734px'). Bliebe die Spalte nicht stehen, müssten dort
 *    sämtliche Werte nachgezogen werden - und die Bilder wären bis dahin
 *    wieder falsch dimensioniert.
 * 2. Es ist ohnehin die bessere Typografie: Abbildungen, Zitate, Tabellen
 *    und Einbettungen behalten die vollen 734 px und ragen aus dem
 *    schmaleren Satzspiegel heraus. Klassischer Magazinsatz - die Spannung
 *    entsteht aus dem Unterschied, nicht aus einer gleichmäßig schmaleren
 *    Spalte.
 *
 * Schriftgrad: 17 px unterhalb 1280, 18 px darüber. Die Leserschaft dieses
 * Portals ist im Schnitt älter; der größere Grad wirkt hier stärker als die
 * kürzere Zeile und kommt zusammen mit ihr.
 */
.kk-prosa {
	/* 42rem = 672 px. Bei 18 px Grad sind das rund 75 Zeichen je Zeile. */
	--kk-prosa-mass: 42rem;

	font-size: 1.0625rem; /* 17 px */
	line-height: 1.65;
	color: var(--kk-charcoal);
}

/*
 * 1280, nicht 1024: zwischen 1024 und 1279 ist der Strang schmaler als das
 * Satzmaß (bei 1024 nur 565 px), dort würden 18 px auf 63 Zeichen führen -
 * unter dem Zielkorridor. 17 px ergeben an derselben Stelle 67 Zeichen.
 * Ab 1280 steht die Spalte bei vollen 734 px, das Maß greift, 18 px = 75.
 */
@media (min-width: 1280px) {
	.kk-prosa {
		font-size: 1.125rem; /* 18 px */
	}
}

/*
 * Nur die Textzeilen werden kürzer. Alles, was NICHT hier steht - figure,
 * blockquote, table, wp-block-embed, .kk-steckbrief - behält die vollen
 * 734 px und bricht bewusst aus dem Satzspiegel aus.
 *
 * Überschriften laufen mit, damit die linke Kante des Textkörpers eine
 * durchgehende Linie bleibt.
 */
.kk-prosa > p,
.kk-prosa > ul,
.kk-prosa > ol,
.kk-prosa > dl,
.kk-prosa > h2,
.kk-prosa > h3,
.kk-prosa > h4 {
	max-width: var(--kk-prosa-mass);
}

.kk-prosa > * + * {
	margin-top: var(--kk-md);
}

.kk-prosa h2,
.kk-prosa h3,
.kk-prosa h4 {
	margin-top: var(--kk-xl);
	margin-bottom: var(--kk-sm);
	padding-left: var(--kk-sm);
	border-left: 4px solid var(--kk-primary);
	color: var(--kk-on-surface);
	text-transform: uppercase;
}

.kk-prosa h2 {
	font-size: var(--kk-fs-md);
	line-height: var(--kk-lh-md);
}

.kk-prosa h3 {
	font-size: var(--kk-fs-sm);
	line-height: var(--kk-lh-sm);
}

.kk-prosa h4 {
	font-size: var(--kk-fs-body);
	border-left-width: 3px;
}

.kk-prosa a {
	color: var(--kk-primary);
	text-decoration: underline;
}

.kk-prosa img {
	height: auto;
	border-radius: var(--kk-r);
}

.kk-prosa figure {
	margin: var(--kk-lg) 0;
}

.kk-prosa figcaption {
	margin-top: var(--kk-xs);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
	line-height: 1.45;
}

.kk-prosa blockquote {
	margin: var(--kk-lg) 0;
	padding: var(--kk-md) var(--kk-md) var(--kk-md) var(--kk-lg);
	background: var(--kk-low);
	border-left: 4px solid var(--kk-primary);
	border-radius: var(--kk-r);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-md);
	font-weight: 500;
	line-height: var(--kk-lh-md);
}

.kk-prosa blockquote p:last-child {
	margin-bottom: 0;
}

.kk-prosa blockquote cite {
	display: block;
	margin-top: var(--kk-sm);
	color: var(--kk-primary);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-sm);
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/*
 * Initial im ersten Absatz - nur in echten Artikeln.
 *
 * Auf der Testkopie zeigte sich, warum die Einschraenkung noetig ist: Die
 * Uebersichtsseiten tragen ihren Shortcode bzw. Block ebenfalls in .kk-prosa.
 * Auf /karnevalsgeschichte/ wurde dadurch das "V" des Einleitungssatzes als
 * riesiger roter Buchstabe aus dem Text gezogen.
 */
.kk-body.single .kk-prosa > p:first-of-type::first-letter {
	float: left;
	margin: 0.06em 0.08em 0 0;
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: 3.4em;
	font-weight: 700;
	line-height: 0.82;
}

.kk-prosa table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--kk-fs-body-md);
}

.kk-prosa th,
.kk-prosa td {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--kk-divider);
	text-align: left;
}

.kk-prosa th {
	background: var(--kk-low);
	font-family: var(--kk-font-head);
	text-transform: uppercase;
}

/* Steckbrief */
.kk-steckbrief {
	margin: var(--kk-lg) 0;
	padding: var(--kk-md);
	background: var(--kk-low);
	border: 1px solid var(--kk-outline-var);
	border-radius: var(--kk-r);
}

.kk-steckbrief__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	margin-bottom: var(--kk-md);
}

.kk-steckbrief__titel {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin: 0;
	color: var(--kk-primary);
	font-size: var(--kk-fs-sm);
	text-transform: uppercase;
}

.kk-steckbrief__liste {
	display: grid;
	gap: var(--kk-sm) var(--kk-md);
	margin: 0;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.kk-steckbrief__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kk-steckbrief__liste dt {
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-steckbrief__liste dd {
	margin: 0 0 var(--kk-sm);
	color: var(--kk-on-surface);
	font-size: var(--kk-fs-body-md);
}

/* Autorenkasten */
.kk-autorbox {
	display: flex;
	gap: var(--kk-md);
	margin: var(--kk-lg) 0;
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
}

.kk-autorbox img {
	width: 4rem;
	height: 4rem;
	flex: 0 0 auto;
	border-radius: var(--kk-r-pill);
	object-fit: cover;
}

.kk-autorbox__name {
	margin: 0;
	color: var(--kk-primary);
	font-size: var(--kk-fs-sm);
	text-transform: uppercase;
}

.kk-autorbox__rolle {
	display: block;
	margin-bottom: var(--kk-xs);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.kk-autorbox__text {
	margin: 0 0 var(--kk-sm);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

/* Vor/Zurück */
.kk-nachbarn {
	display: grid;
	gap: var(--kk-md);
	margin: var(--kk-lg) 0;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.kk-nachbarn {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kk-nachbar {
	display: block;
	padding: var(--kk-md);
	background: var(--kk-low);
	border-radius: var(--kk-r);
	text-decoration: none;
}

.kk-nachbar:hover {
	background: var(--kk-container);
}

.kk-nachbar__label {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin-bottom: var(--kk-xs);
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-nachbar--weiter {
	text-align: right;
}

.kk-nachbar--weiter .kk-nachbar__label {
	justify-content: flex-end;
}

.kk-nachbar__titel {
	margin: 0;
	color: var(--kk-on-surface);
	font-size: var(--kk-fs-body);
	line-height: 1.35;
	text-transform: uppercase;
}

/* Teilen */
.kk-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kk-sm);
	padding: var(--kk-sm) 0;
}

.kk-share__label {
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-share__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.7rem;
	background: var(--kk-low);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r-pill);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-sm);
	text-decoration: none;
	cursor: pointer;
}

.kk-share__link:hover {
	border-color: var(--kk-primary-container);
	background: var(--kk-container);
	color: var(--kk-primary);
}

/* ==========================================================================
   09 Eigene Inhaltstypen
   ========================================================================== */

/* -- Seitenkopf der Übersichten ------------------------------------------ */

/*
 * Der Seitenkopf bringt SELBST keinen Abstand mehr mit (22.09.2026).
 *
 * Vorher standen vier Werte an vier Stellen: `padding-top: 24`,
 * `padding-bottom: 16`, ein von `.kk-main > .kk-wrap > *` ohnehin
 * ueberschriebenes `margin-bottom: 24` - und darunter der 48-px-Rhythmus der
 * Flex-Spalte. Gemessen ergab das 64 px unter dem Kopf (mit Einleitung oder
 * Schaltflaechen) und 72 px ohne, bei nur 40 px darueber. Der Kopf schwamm.
 *
 * Die Vorgaengerregel `.kk-breadcrumb + .kk-seitenkopf { padding-top: 0 }`
 * ist ersatzlos entfallen: sie hing an der Geschwisterfolge und griff daher
 * auf 404.php nicht, wo der Kopf in einem `.kk-panelblock` steckt (dort
 * gemessen 41 px statt 16). Ohne eigenes Polster ist dieser Sonderfall weg.
 *
 * Den Abstand nach unten setzt jetzt der NACHFOLGER, nach demselben Muster
 * wie bei der Brotkrume: der negative Rand hebt den Flex-Zwischenraum auf und
 * ist an dieselbe Stufe gebunden, gilt also bei jeder Breite.
 * 48 - 48 + 32 = 32 px (Desktop), 32 - 32 + 24 = 24 px (Mobil).
 *
 * An `--kk-abschnitt` wird nicht gedreht.
 */
.kk-seitenkopf {
	padding-block: 0;
}

/*
 * Vereinheitlicht die beiden Faelle: mit Einleitung oder Schaltflaechen
 * endete der Kopf auf deren Rand, ohne beides auf dem 8-px-Rand der H1 -
 * daher 64 gegen 72 px. Der letzte Bauteil traegt keinen Rand mehr, der
 * Abstand kommt ausschliesslich aus der Regel darunter.
 */
.kk-seitenkopf > :last-child {
	margin-bottom: 0;
}

/*
 * Grundfall: normaler Fluss, kein Flex-Zwischenraum. Das ist 404.php, wo der
 * Kopf in einem `.kk-panelblock` steckt - genau die Stelle, an der die alte
 * geschwisterabhaengige Sonderregel nicht griff (gemessen 41 px oben,
 * 40 px unten). Hier ist der Merkmalswert der ganze Abstand.
 */
.kk-seitenkopf + * {
	margin-top: var(--kk-kopfabstand);
}

/*
 * Flex-Fall: `.kk-main > .kk-wrap` steuert bereits `gap: var(--kk-abschnitt)`
 * bei. Der negative Rand hebt ihn auf, damit derselbe Merkmalswert
 * herauskommt - 48 - 48 + 32 = 32 px (Desktop), 32 - 32 + 24 = 24 (Mobil).
 * Drei Klassen schlagen sowohl die Regel darueber als auch das
 * `margin-block: 0` von `.kk-main > .kk-wrap > *`.
 */
.kk-main > .kk-wrap > .kk-seitenkopf + * {
	margin-top: calc(var(--kk-kopfabstand) - var(--kk-abschnitt));
}

/*
 * Uebersichtsseiten mit Shortcode-Inhalt (page-uebersicht.php).
 *
 * Gemessen auf /termine/: der Strang war 1150 px breit. Fuer dreizeilige
 * Terminzeilen ist das zu weit - die Zeilen werden zu Baendern ohne Halt,
 * das Auge findet den Zeilenanfang nicht wieder. Begrenzt auf 46rem
 * (736 px), die Textmassbreite, die im Theme schon fuer
 * `.kk-seitenkopf__text` (kk.css) gilt. Eine Randspalte wird dafuer NICHT
 * erfunden - rechts bleibt Weissraum.
 *
 * Nur wirksam, solange keine Randspalte bestueckt ist: mit
 * `.kk-layout--mit-rand` gibt das Raster die Spaltenbreite vor.
 */
.kk-uebersicht .kk-layout:not(.kk-layout--mit-rand) .kk-strang {
	max-width: 46rem;
}

.kk-seitenkopf__label {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin-bottom: var(--kk-xs);
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kk-seitenkopf__titel {
	margin: 0 0 var(--kk-sm);
	font-size: var(--kk-fs-hero);
	font-weight: 700;
	line-height: var(--kk-lh-hero);
	text-transform: uppercase;
}

/*
 * Satzspiegel des Kopftextes (23.09.2026).
 *
 * Seit dem Umzug der elf Kategorie-Einleitungen aus dem Snippet in das
 * Beschreibungsfeld (Ausgabe: archive.php:35) steht der laengste Text einer
 * Kategorieseite nicht mehr als `.kk-kategorie-intro` im Strang, sondern hier
 * im Seitenkopf. Er hat damit die Kopftypografie geerbt.
 *
 * BELEGT, gemessen 23.09.2026 auf der Testkopie mit
 * tools/rahmenfenster-messen.js, Rahmen 1440 px, Verwaltungsbalken
 * ausgeblendet, /category/karnevalisten/:
 *   736 px Satzbreite bei 18 px = 82 Zeichen je Zeile, Zeilenabstand 1,56.
 * Der Zielkorridor der Website ist 75 Zeichen bei 1,65 (siehe .kk-prosa).
 *
 * Die Werte sind deshalb dieselben wie bei .kk-kategorie-intro und .kk-prosa:
 * dieselbe Leserschaft, derselbe Text, dieselbe Spalte. 42rem wirkt auf alle
 * Seitenkoepfe; kurze Vorspanne werden dadurch nicht schlechter, nur schmaler.
 *
 * Beachte: Der Kommentar bei `.kk-uebersicht ... .kk-strang` nennt 46rem als
 * die Textmassbreite, die fuer .kk-seitenkopf__text gilt. Das stimmt seit
 * dieser Aenderung nicht mehr; die dortige Begrenzung des Strangs bleibt
 * absichtlich bei 46rem, weil sie eine Spalten- und keine Satzbreite ist.
 */
.kk-seitenkopf__text {
	max-width: 42rem; /* 672 px, rund 75 Zeichen bei 18 px */
	margin: 0;
	color: var(--kk-on-surface-var);
	font-size: 1.0625rem; /* 17 px */
	line-height: 1.65;
}

/* Wie .kk-prosa: ab 1280 px steht die volle Spalte, dort traegt 18 px. */
@media (min-width: 1280px) {
	.kk-seitenkopf__text {
		font-size: 1.125rem; /* 18 px */
	}
}

.kk-seitenkopf__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-sm);
	margin-top: var(--kk-md);
}

/* Kennzahlen */
.kk-kennzahlen {
	display: grid;
	gap: var(--kk-sm);
	margin-bottom: var(--kk-lg);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.kk-kennzahlen {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.kk-kennzahl {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kk-sm);
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
}

.kk-kennzahl__wert {
	display: block;
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-lg);
	font-weight: 700;
	line-height: 1.1;
}

.kk-kennzahl__label {
	display: block;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-kennzahl__zusatz {
	display: block;
	margin-top: 0.15rem;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

.kk-kennzahl .kk-icon {
	color: var(--kk-outline-var);
}

.kk-kennzahl--dunkel {
	background: var(--kk-ticker);
	border-color: var(--kk-charcoal);
}

.kk-kennzahl--dunkel .kk-kennzahl__wert {
	color: var(--kk-gold);
}

.kk-kennzahl--dunkel .kk-kennzahl__label,
.kk-kennzahl--dunkel .kk-kennzahl__zusatz {
	color: #cfc5c4;
}

/* Filterleiste */
.kk-filter {
	margin-bottom: var(--kk-lg);
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
}

.kk-filter__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-sm);
	align-items: center;
}

.kk-filter__zeile + .kk-filter__zeile {
	margin-top: var(--kk-md);
	padding-top: var(--kk-md);
	border-top: 1px solid var(--kk-divider);
}

.kk-filter__label {
	flex: 0 0 auto;
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-filter__suche {
	flex: 1 1 16rem;
}

/* -- Filterleiste des Terminkalenders (T2/T3, 22.09.2026) ---------------- */

/*
 * Das Formular steht in derselben Leiste wie die Zeitraum-Chips, traegt aber
 * keine eigene Umrandung - es ist eine Zeile der Leiste, kein Kasten darin.
 */
.kk-filter__form {
	margin: var(--kk-md) 0 0;
	padding-top: var(--kk-md);
	border-top: 1px solid var(--kk-divider);
}

.kk-filter__zeile--menues,
.kk-filter__zeile--datum {
	align-items: flex-end;
}

.kk-filter__feld {
	display: flex;
	flex: 1 1 14rem;
	flex-direction: column;
	gap: 0.2rem;
	margin: 0;
	min-width: 0;
}

.kk-filter__feld label {
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Native Auswahlmenues, nur auf Hausmass gebracht - kein Nachbau. Die
 * Systemauswahl bleibt die Systemauswahl; wir geben ihr nur Groesse, Grund
 * und Rand des Themes.
 */
.kk-filter__feld select {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.45rem 0.6rem;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
}

.kk-filter__feld input[type="date"] {
	min-height: 2.5rem;
	padding: 0.45rem 0.6rem;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
}

/*
 * Der Absendeknopf waechst nicht mit: er soll so breit sein wie sein Text,
 * damit er nicht als drittes Feld gelesen wird.
 */
.kk-filter__feld--knopf {
	flex: 0 0 auto;
}

.kk-filter__feld--knopf .kk-btn {
	min-height: 2.5rem;
}

/*
 * Die Zeile "aktive Filter". Sie erscheint nur, wenn etwas gesetzt ist -
 * eine leere Zeile "Aktive Filter: (nichts)" waere eine Aussage ueber nichts.
 */
.kk-filter__aktiv .kk-pille--weg {
	gap: 0.45rem;
	background: var(--kk-primary);
	border-color: var(--kk-primary);
	color: #fff;
}

.kk-filter__aktiv .kk-pille--weg:hover {
	background: var(--kk-carmine-deep);
	border-color: var(--kk-carmine-deep);
	color: #fff;
}

.kk-pille__weg {
	font-size: 0.9em;
	line-height: 1;
	opacity: 0.85;
}

.kk-filter__reset {
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* -- Leerzustand mit Ausweg ---------------------------------------------- */

.kk-leer__filter {
	margin: var(--kk-xs) 0 var(--kk-md);
	padding-left: var(--kk-md);
	color: var(--kk-on-surface-var);
}

.kk-leer__wege {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-sm);
	justify-content: center;
	margin: 0;
}

/* -- Anhang unter der Liste (T4) ----------------------------------------- */

/*
 * Was frueher in der Randspalte stand. Auf dem Schreibtisch zwei Spalten
 * nebeneinander, damit es nicht als Fortsetzung der Liste liest; auf dem
 * Telefon untereinander.
 */
.kk-anhang {
	display: grid;
	gap: var(--kk-md);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	margin-top: var(--kk-lg);
}

.kk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
}

.kk-chips--rollen {
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-bottom: var(--kk-xs);
	scrollbar-width: thin;
}

/* -- Terminkalender ------------------------------------------------------ */

.kk-termingruppe + .kk-termingruppe {
	margin-top: var(--kk-lg);
}

.kk-termingruppe__titel {
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	margin: 0 0 var(--kk-md);
	color: var(--kk-primary);
	font-size: var(--kk-fs-md);
	line-height: var(--kk-lh-md);
	text-transform: uppercase;
}

.kk-termingruppe__titel::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	flex: 0 0 auto;
	border-radius: var(--kk-r-pill);
	background: var(--kk-primary);
}

.kk-terminliste {
	display: flex;
	flex-direction: column;
	gap: var(--kk-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-termin {
	position: relative;
	display: flex;
	gap: var(--kk-md);
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-left: 4px solid var(--kk-primary);
	border-radius: var(--kk-r);
	transition: box-shadow 0.2s ease;
}

.kk-termin:hover {
	box-shadow: var(--kk-schatten-2);
}

.kk-termin--hoehepunkt {
	border-left-color: var(--kk-gold);
	background: linear-gradient(90deg, #fffdf5, var(--kk-lowest) 40%);
}

.kk-datum {
	display: flex;
	flex: 0 0 3.75rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	padding: var(--kk-xs) 0;
	background: var(--kk-navy);
	border-radius: var(--kk-r);
	color: #fff;
	text-align: center;
}

.kk-datum__wt {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.kk-datum__tag {
	font-family: var(--kk-font-head);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.05;
}

.kk-datum__monat {
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.85;
}

.kk-termin__body {
	flex: 1 1 auto;
	min-width: 0;
}

.kk-termin__zeit {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kk-termin__titel {
	margin: 0.15rem 0 var(--kk-xs);
	font-size: var(--kk-fs-sm);
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-termin__titel a {
	color: var(--kk-on-surface);
	text-decoration: none;
}

.kk-termin__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kk-termin:hover .kk-termin__titel a {
	color: var(--kk-primary);
}

.kk-termin__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs) var(--kk-md);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

.kk-termin__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.kk-termin__rechts {
	display: none;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: var(--kk-xs);
	z-index: 2;
}

/*
 * Terminzeile unter 1024 px (ergaenzt 22.09.2026 fuer /termine/).
 *
 * Zwei Dinge, die beim Wechsel von der Shortcode-Liste auf das Hausgewand
 * sonst schlechter geworden waeren - beides am Bestand gemessen, nicht
 * vermutet:
 *
 * 1. `.kk-termin__rechts` ist bis 1023 px `display: none` (Regel oben, die
 *    Gegenregel steht in der Query ab min-width 1024px). Die Schaltflaeche
 *    fuer Tickets bzw. weitere Infos verschwand damit auf dem Telefon ganz.
 *    Die Shortcode-Liste zeigte sie dort - gemessen auf der Testkopie bei
 *    375 px sichtbar -, weil sie bei ihr im Textblock stand. Deshalb hier
 *    eine dritte Reihe unter dem Text, auf die Textachse eingerueckt, statt
 *    einer eigenen Spalte: fuer eine Spalte ist bei 313 px Zeilenbreite kein
 *    Platz.
 *
 * 2. Der Datumsklotz waechst ohne `align-self` auf die volle Zeilenhoehe.
 *    Gemessen bei 375 px: 60x185 px - ein Farbblock, der nur noch Flaeche
 *    ist. Auf dem Schreibtisch (gemessen 1280 px: 60x78 px) ist dieselbe
 *    Dehnung die gewollte Kante der Zeile, deshalb bleibt sie dort.
 *
 * Bewusst auf `.kk-terminliste` begrenzt: der einzelne Klotz im Steckbrief
 * von single-termin.php (`div.kk-termin--hoehepunkt`, nicht in einer
 * `.kk-terminliste`) behaelt sein Aussehen.
 */
@media (max-width: 1023px) {

	.kk-terminliste .kk-termin {
		flex-wrap: wrap;
	}

	.kk-terminliste .kk-termin__body {
		flex: 1 1 60%;
	}

	.kk-terminliste .kk-datum {
		align-self: flex-start;
	}

	.kk-terminliste .kk-termin__rechts {
		display: flex;
		flex-basis: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding-left: calc(3.75rem + var(--kk-md));
	}
}

/* -- Kneipenführer ------------------------------------------------------- */

.kk-kneipe {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--kk-sm);
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.kk-kneipe:hover {
	border-color: var(--kk-outline-var);
	box-shadow: var(--kk-schatten-2);
}

.kk-kneipe__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kk-sm);
}

.kk-kneipe__titel {
	margin: var(--kk-xs) 0 0;
	font-size: var(--kk-fs-md);
	line-height: var(--kk-lh-md);
	text-transform: uppercase;
}

.kk-kneipe__titel a {
	color: var(--kk-on-surface);
	text-decoration: none;
}

.kk-kneipe__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kk-kneipe:hover .kk-kneipe__titel a {
	color: var(--kk-primary);
}

.kk-kneipe__adresse {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

.kk-kneipe__text {
	margin: 0;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

.kk-kneipe__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
	z-index: 2;
}

.kk-kneipeliste {
	display: flex;
	flex-direction: column;
	gap: var(--kk-sm);
}

/* -- Künstlerverzeichnis ------------------------------------------------- */

.kk-abc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: var(--kk-lg);
	padding: var(--kk-sm) var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
}

.kk-abc__eintrag {
	min-width: 1.85rem;
	padding: 0.25rem;
	border-radius: var(--kk-r-xs);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body-md);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.kk-abc__eintrag:hover,
.kk-abc__eintrag.is-aktiv {
	background: var(--kk-primary);
	color: #fff;
}

.kk-abc__eintrag[aria-disabled="true"] {
	color: var(--kk-outline-var);
	pointer-events: none;
}

.kk-kuenstler {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.kk-kuenstler:hover {
	box-shadow: var(--kk-schatten-2);
}

.kk-kuenstler__bild {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--kk-highest);
}

/*
 * Die Künstlerkachel gibt ihr Bild ohne .kk-media__img aus
 * (template-parts/kachel-kuenstler.php). Damit Karten und Kacheln gleich
 * beschnitten werden, wird derselbe Merkmalswert hier nachgezogen.
 */
.kk-kuenstler__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--kk-bildanker);
	transform-origin: var(--kk-bildanker);
	transition: transform 0.4s ease;
}

.kk-kuenstler:hover .kk-kuenstler__bild img {
	transform: scale(1.04);
}

.kk-kuenstler__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(10 10 12 / 88%), rgb(10 10 12 / 10%) 65%, transparent);
}

.kk-kuenstler__chips {
	position: absolute;
	top: var(--kk-sm);
	left: var(--kk-sm);
	right: var(--kk-sm);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--kk-xs);
	z-index: 2;
}

.kk-kuenstler__name {
	position: absolute;
	right: var(--kk-sm);
	bottom: var(--kk-sm);
	left: var(--kk-sm);
	z-index: 2;
	margin: 0;
	color: #fff;
	font-size: var(--kk-fs-md);
	line-height: 1.15;
	text-transform: uppercase;
	text-shadow: 0 1px 10px rgb(0 0 0 / 50%);
}

.kk-kuenstler__name a {
	color: inherit;
	text-decoration: none;
}

.kk-kuenstler__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kk-kuenstler__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--kk-xs);
	padding: var(--kk-md);
}

.kk-kuenstler__label {
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-meta);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-kuenstler__text {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
	line-height: 1.45;
}

.kk-kuenstler__fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	margin-top: auto;
	padding-top: var(--kk-sm);
	border-top: 1px solid var(--kk-divider);
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* -- Karnevalschronik (Zeitstrahl) --------------------------------------- */

.kk-chronik {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--kk-lg);
	list-style: none;
	border-left: 2px solid var(--kk-outline-var);
}

.kk-chronik__eintrag {
	position: relative;
	padding-bottom: var(--kk-lg);
}

.kk-chronik__eintrag::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: calc(-1 * var(--kk-lg) - 6px);
	width: 10px;
	height: 10px;
	border: 2px solid var(--kk-lowest);
	border-radius: var(--kk-r-pill);
	background: var(--kk-primary);
}

/*
 * Der eigene Eintrag als Ankerpunkt im Zeitstrahl (Beanstandung 6).
 * Dezent: linker Balken statt der Standardmarke, leicht getönter Grund.
 * Kein zusätzlicher Rahmen, keine Vergrößerung – der Leser soll seine
 * Position sehen, nicht ein Kästchen bewundern.
 */
.kk-chronik__eintrag--hier {
	padding-left: var(--kk-sm);
	background: var(--kk-low);
	border-left: 3px solid var(--kk-primary);
	border-radius: 0 var(--kk-r) var(--kk-r) 0;
	margin-left: calc(-1 * var(--kk-lg) - 1px);
	padding-right: var(--kk-sm);
}

.kk-chronik__eintrag--hier::before {
	display: none;
}

/*
 * Randhinweis am Anfang bzw. Ende der Chronik. Fehlende Nachbarn werden
 * NICHT von der anderen Seite aufgefüllt – die Lücke ist die Information.
 */
.kk-chronik__rand {
	position: relative;
	padding-bottom: var(--kk-md);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-chronik__jahr {
	display: inline-flex;
	align-items: baseline;
	gap: var(--kk-sm);
	margin-bottom: var(--kk-xs);
}

.kk-chronik__zahl {
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-md);
	font-weight: 700;
	letter-spacing: 0.02em;
	/* Siehe .kk-card--kachel-chronik .kk-card__jahr – gleiche Begründung. */
	white-space: nowrap;
}

/*
 * Zweite Größe für ausgeschriebene Datumsangaben (A-55). Die Klasse setzt
 * kk_schild_ist_datum() in PHP – in CSS bräuchte es `:has()` oder
 * Längenakrobatik über nth-child.
 */
.kk-chronik__zahl--datum {
	font-size: var(--kk-fs-body);
	letter-spacing: 0.01em;
}

.kk-chronik__epoche {
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-chronik__titel {
	margin: 0 0 var(--kk-xs);
	font-size: var(--kk-fs-sm);
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-chronik__titel a {
	color: var(--kk-on-surface);
	text-decoration: none;
}

.kk-chronik__titel a:hover {
	color: var(--kk-primary);
}

.kk-chronik__text {
	margin: 0 0 var(--kk-sm);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

/*
 * Einzige Ausnahme vom Hausanker: Archivmaterial und Plakate sind
 * Reproduktionen, nicht Reportage – dort ist die Mitte der neutrale
 * Ausschnitt. Der Merkmalswert wirkt über die Vererbung bis zum
 * .kk-media__img im Rahmen.
 */
.kk-chronik__bild {
	--kk-bildanker: 50% 50%;

	margin: var(--kk-sm) 0;
	max-width: 32rem;
}

.kk-chronik__mehr {
	display: inline-flex;
	align-items: center;
	gap: var(--kk-xs);
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.kk-chronik__mehr:hover {
	text-decoration: underline;
}

/* Epochenübersicht in der Randspalte */
.kk-epochen {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-epoche {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kk-sm);
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--kk-divider);
	font-size: var(--kk-fs-body-md);
}

.kk-epoche:last-child {
	border-bottom: 0;
}

.kk-epoche a {
	color: var(--kk-on-surface);
	text-decoration: none;
}

.kk-epoche a:hover {
	color: var(--kk-primary);
}

.kk-epoche__zahl {
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-weight: 600;
}

/* ==========================================================================
   10 Formulare, Knöpfe, Auszeichnungen
   ========================================================================== */

.kk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kk-xs);
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: var(--kk-r);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body);
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kk-btn--primary {
	background: var(--kk-primary);
	color: #fff;
}

.kk-btn--primary:hover {
	background: var(--kk-carmine-deep);
	color: #fff;
}

.kk-btn--zweit {
	background: var(--kk-lowest);
	border: 1.5px solid var(--kk-navy-deep);
	color: var(--kk-navy-deep);
}

.kk-btn--zweit:hover {
	background: var(--kk-low);
	color: var(--kk-navy-deep);
}

.kk-btn--gold {
	background: var(--kk-gold);
	color: #3a2c00;
}

.kk-btn--gold:hover {
	background: var(--kk-gold-light);
	color: #3a2c00;
}

.kk-btn--dunkel {
	background: var(--kk-charcoal);
	color: #fff;
}

.kk-btn--dunkel:hover {
	background: var(--kk-navy);
	color: #fff;
}

.kk-btn--klein {
	padding: 0.3rem 0.75rem;
	font-size: var(--kk-fs-body-md);
}

.kk-btn--voll {
	width: 100%;
}

.kk-btn--geist {
	padding-inline: 0;
	background: none;
	color: var(--kk-primary);
	text-decoration: underline;
}

/* Auszeichnungen */
.kk-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.5rem;
	border-radius: var(--kk-r);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.35;
	text-decoration: none;
	text-transform: uppercase;
}

/*
 * Zielgroesse anklickbarer Plaketten (23.09.2026).
 *
 * BELEGT: Die Rubrik-Kicker ueber den Kartentiteln sind <a class="kk-chip">
 * (inc/template-tags.php:73). Rechnerisch: 12 px Schrift x 1.35 Zeilenhoehe
 * = 16,2 px plus 2 x 0,15rem Polsterung = rund 21 px hoch. WCAG 2.2 AA,
 * Erfolgskriterium 2.5.8, verlangt 24 x 24 CSS-px. Klaus hat sieben solcher
 * Ziele gezaehlt.
 *
 * min-height statt mehr Polsterung: die Plakette waechst auf 24 px, die
 * Schrift bleibt mittig, die waagerechte Form aendert sich nicht.
 *
 * Bewusst NUR a und button. Dieselbe Klasse traegt auch reine Auszeichnungen
 * ("Aktiv", "Historisch"), die man nicht anklicken kann - fuer die gilt 2.5.8
 * nicht, und sie wuerden ohne Grund groesser. Zielgroesse ist eine Eigenschaft
 * des Ziels, nicht des Aussehens.
 *
 * NICHT GEPRUEFT: ob die 3 px Zuwachs die Kartenhoehen in einer Rasterzeile
 * verschieben. Auf dem Schreibtisch nicht nachgemessen, mobil nicht gemessen.
 */
a.kk-chip,
button.kk-chip {
	min-height: 24px;
}

.kk-chip--rot {
	background: var(--kk-primary);
	color: #fff;
}

.kk-chip--rot:hover {
	background: var(--kk-carmine-deep);
	color: #fff;
}

.kk-chip--navy {
	background: var(--kk-navy);
	color: #fff;
}

.kk-chip--navy:hover {
	background: var(--kk-navy-deep);
	color: #fff;
}

/*
 * Chip mit ausgeschriebener Datumsangabe (A-55). Der Chip auf der
 * Chronik-Einzelseite steht neben der H1; ein 24-Zeichen-Wert in der
 * Normalgröße drängt sich dort neben die Überschrift. Kein Kürzen, nur eine
 * Stufe kleiner und umbruchfest. Klasse aus kk_schild_ist_datum().
 */
.kk-chip--datum {
	font-size: var(--kk-fs-meta);
	white-space: nowrap;
}

.kk-chip--gold {
	background: var(--kk-gold-light);
	color: #4a3a05;
}

.kk-chip--dunkel {
	background: rgb(13 13 14 / 80%);
	color: var(--kk-gold);
}

.kk-chip--hell {
	background: var(--kk-low);
	border: 1px solid var(--kk-divider);
	color: var(--kk-on-surface-var);
}

.kk-chip--hell:hover {
	border-color: var(--kk-primary-container);
	color: var(--kk-primary);
}

.kk-chip--text {
	padding: 0;
	background: none;
	color: var(--kk-primary);
}

.kk-chip--text:hover {
	color: var(--kk-carmine-deep);
	text-decoration: underline;
}

/* Filter-Pillen */
.kk-pille {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.8rem;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r-pill);
	color: var(--kk-charcoal);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * `.kk-pille` als Schaltflaeche (22.09.2026): die Zeitraum- und
 * Entfernen-Knoepfe der Terminfilterleiste sind `button`, kein `a` - siehe
 * Kopf von template-parts/terminfilter.php. Ein `button` bringt eigene
 * Vorgaben des Browsers mit, die hier zurueckgesetzt werden muessen.
 */
button.kk-pille {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-transform: uppercase;
}

.kk-pille[aria-pressed="true"] {
	background: var(--kk-primary);
	border-color: var(--kk-primary);
	color: #fff;
}

.kk-pille:hover {
	border-color: var(--kk-primary-container);
	color: var(--kk-primary);
}

.kk-pille.is-aktiv,
.kk-pille[aria-current="page"] {
	background: var(--kk-primary);
	border-color: var(--kk-primary);
	color: #fff;
}

.kk-pille__zahl {
	color: inherit;
	font-family: var(--kk-font-body);
	font-size: 0.6875rem;
	font-weight: 400;
	opacity: 0.75;
}

/* Metazeile */
.kk-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.5rem;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.kk-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.kk-meta a {
	color: inherit;
	text-decoration: none;
}

.kk-meta a:hover {
	color: var(--kk-primary);
	text-decoration: underline;
}

.kk-meta__sep {
	/*
	 * --kk-outline statt --kk-outline-var (23.09.2026). BELEGT: #e6bdb8 auf
	 * Weiss = 1.70, siebzehnmal je Seite gezählt. Reine Dekoration, also ohne
	 * AA-Pflicht — aber ein Trennzeichen, das man nicht sieht, trennt nichts.
	 * #916f6b = 4.48: deutlich leichter als die Metazeile daneben (9.32) und
	 * trotzdem vorhanden. Einzige verbleibende Verwendung von --kk-outline
	 * als Schriftfarbe, und hier ist sie richtig.
	 */
	color: var(--kk-outline);
}

.kk-meta--invers {
	color: var(--kk-gold-light);
}

.kk-meta--invers a {
	color: var(--kk-gold-light);
}

.kk-meta--invers a:hover {
	color: #fff;
}

.kk-meta--invers .kk-meta__sep {
	color: rgb(255 255 255 / 45%);
}

/* Suchfeld */
.kk-suche {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.kk-suche__icon {
	position: absolute;
	left: 0.75rem;
	display: inline-flex;
	color: var(--kk-on-surface-var);
	pointer-events: none;
}

.kk-suche input.kk-suche__feld {
	width: 100%;
	padding: 0.55rem 3rem 0.55rem 2.5rem;
	background: var(--kk-low);
	border: 1px solid transparent;
	border-radius: var(--kk-r);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
}

.kk-suche input.kk-suche__feld::placeholder {
	color: var(--kk-on-surface-var);
}

/*
 * `outline: none` zurueckgenommen (22.09.2026).
 *
 * Die Regel nahm dem Suchfeld als einzigem Bedienelement der Seite den
 * Fokusring und ersetzte ihn durch einen 1,5 px starken Schatten - das ist
 * kein Ring, und er unterschreitet die Staerke, die ueberall sonst gilt.
 *
 * Geblieben sind Grund und Randfarbe: sie zeigen, dass das Feld aktiv ist,
 * und stehen dem Ring nicht im Weg. Der Ring kommt aus der Basisregel oben.
 */
.kk-suche input.kk-suche__feld:focus {
	background: var(--kk-lowest);
	border-color: var(--kk-primary-container);
}

/*
 * Der Ring liegt mit `outline-offset: 2px` AUSSERHALB des Feldes. `.kk-suche`
 * ist `position: relative` und ohne eigenes Polster - der Ring wuerde an der
 * Kante des Elternelements anstossen. Ein kleines Polster gibt ihm Platz,
 * ohne die Geometrie des Feldes zu aendern.
 */
.kk-suche {
	padding: 3px;
	margin: -3px;
}

.kk-suche__knopf {
	position: absolute;
	right: 0.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 0;
	border-radius: var(--kk-r);
	background: var(--kk-primary);
	color: #fff;
	cursor: pointer;
}

.kk-suche__knopf:hover {
	background: var(--kk-carmine-deep);
}

/* Allgemeine Formularfelder */
.kk-form__titel {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin: 0 0 var(--kk-sm);
	color: var(--kk-primary);
	font-size: var(--kk-fs-md);
	text-transform: uppercase;
}

.kk-form__felder {
	display: grid;
	gap: var(--kk-md);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.kk-form__felder {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kk-form__feld label,
.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-form__feld--breit {
	grid-column: 1 / -1;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

/*
 * ERWEITERT 22.09.2026, ueber den Auftrag hinaus - bitte pruefen.
 *
 * Beauftragt war nur das Suchfeld. Diese Regel hier nahm aber JEDEM
 * Formularfeld den Fokusring, also auch den beiden Auswahlmenues der neuen
 * Filterleiste. `input:focus` und `input:focus-visible` haben dieselbe
 * Spezifitaet; diese Regel steht spaeter in der Datei und gewann deshalb.
 *
 * `:focus:not(:focus-visible)` trennt die beiden Faelle sauber: wer mit der
 * Maus in ein Feld klickt, bekommt weiterhin nur Rand und Schatten - wer mit
 * der Tastatur dorthin kommt, bekommt den Ring aus der Basisregel.
 */
input:focus,
select:focus,
textarea:focus {
	border-color: var(--kk-primary-container);
	box-shadow: 0 0 0 1px var(--kk-primary-container);
}

input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
	outline: none;
}

.kk-form__hinweis {
	margin: 0 0 var(--kk-sm);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

.kk-form__hinweis--klein {
	display: block;
	margin-top: 0.2rem;
	font-size: var(--kk-fs-meta);
	text-transform: none;
	letter-spacing: 0;
}

/* Blätternavigation */
.kk-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	margin-top: var(--kk-lg);
	padding-top: var(--kk-md);
	border-top: 1px solid var(--kk-divider);
}

.kk-pagination__info {
	margin: 0;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

.kk-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-pagination__list .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	justify-content: center;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body-md);
	font-weight: 600;
	text-decoration: none;
}

.kk-pagination__list .page-numbers:hover {
	border-color: var(--kk-primary-container);
	color: var(--kk-primary);
}

.kk-pagination__list .page-numbers.current {
	background: var(--kk-primary);
	border-color: var(--kk-primary);
	color: #fff;
}

.kk-pagination__list .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* Brotkrumen */
.kk-breadcrumb {
	margin-bottom: var(--kk-sm);
}

.kk-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

.kk-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.kk-breadcrumb a {
	color: var(--kk-on-surface-var);
	text-decoration: none;
}

.kk-breadcrumb a:hover {
	color: var(--kk-primary);
	text-decoration: underline;
}

.kk-breadcrumb [aria-current="page"] {
	color: var(--kk-on-surface);
	font-weight: 600;
}

.kk-breadcrumb .kk-icon {
	color: var(--kk-outline-var);
}

/* Hinweis „keine Treffer“ */
.kk-leer {
	padding: var(--kk-xl) var(--kk-md);
	background: var(--kk-lowest);
	border: 1px dashed var(--kk-outline-var);
	border-radius: var(--kk-r);
	text-align: center;
}

.kk-leer__titel {
	margin: 0 0 var(--kk-sm);
	color: var(--kk-primary);
	font-size: var(--kk-fs-md);
	text-transform: uppercase;
}

/* ==========================================================================
   11 Kommentare
   ========================================================================== */

.kk-kommentare {
	margin-top: var(--kk-lg);
}

.kk-comment,
.comment-list li {
	list-style: none;
}

.comment-list,
.kk-comment .children {
	margin: 0;
	padding: 0;
}

.kk-comment .children {
	margin-left: var(--kk-md);
	padding-left: var(--kk-md);
	border-left: 2px solid var(--kk-outline-var);
}

.kk-comment__box {
	margin-bottom: var(--kk-md);
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
}

.kk-comment__kopf {
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	margin-bottom: var(--kk-sm);
}

.kk-comment__avatar {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	border-radius: var(--kk-r-pill);
	background: var(--kk-primary);
	color: #fff;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body-sm);
	font-weight: 600;
}

.kk-comment__name {
	display: block;
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body);
	font-weight: 600;
	text-transform: uppercase;
}

.kk-comment__meta {
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
}

.kk-comment__text {
	color: var(--kk-charcoal);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

.kk-comment__text p:last-child {
	margin-bottom: 0;
}

.kk-comment__fuss {
	margin-top: var(--kk-sm);
}

.kk-comment__antwort a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.kk-comment__antwort a:hover {
	text-decoration: underline;
}

.comment-form {
	display: grid;
	gap: var(--kk-md);
	grid-template-columns: 1fr;
	margin-bottom: var(--kk-lg);
	padding: var(--kk-md);
	background: var(--kk-low);
	border-radius: var(--kk-r);
}

@media (min-width: 640px) {
	.comment-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.comment-form p {
	margin: 0;
}

.comment-form .comment-notes,
.comment-form .comment-form-cookies-consent,
.comment-form .form-submit,
.comment-form .kk-form__feld--breit,
.comment-form .comment-respond > * {
	grid-column: 1 / -1;
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--kk-sm);
	font-size: var(--kk-fs-body-sm);
}

.comment-form .comment-form-cookies-consent input {
	width: auto;
	margin-top: 0.2rem;
	accent-color: var(--kk-primary);
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-size: var(--kk-fs-body-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.comment-form .form-submit {
	margin: 0;
	text-align: right;
}

.comment-reply-title small {
	margin-left: var(--kk-sm);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-sm);
	text-transform: none;
}

/* ==========================================================================
   12 Fußbereich
   ========================================================================== */

.kk-footer {
	margin-top: var(--kk-xl);
	padding-block: var(--kk-xl) var(--kk-lg);
	background: var(--kk-charcoal);
	color: var(--kk-newsprint);
}

.kk-countdown {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--kk-md);
	margin-bottom: var(--kk-xl);
	padding: var(--kk-md);
	background: var(--kk-navy);
	border-radius: var(--kk-r-lg);
}

@media (min-width: 768px) {
	.kk-countdown {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--kk-lg);
	}
}

.kk-countdown__text {
	display: flex;
	align-items: center;
	gap: var(--kk-md);
}

.kk-countdown__icon {
	display: inline-flex;
	color: var(--kk-gold);
}

.kk-countdown__titel {
	margin: 0;
	color: #fff;
	font-size: var(--kk-fs-sm);
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-countdown__datum {
	margin: 0;
	color: #c9daff;
	font-size: var(--kk-fs-body-sm);
}

.kk-countdown__werte {
	display: flex;
	gap: var(--kk-sm);
	width: 100%;
}

@media (min-width: 768px) {
	.kk-countdown__werte {
		width: auto;
		gap: var(--kk-md);
	}
}

.kk-countdown__feld {
	flex: 1 1 0;
	padding: var(--kk-sm) var(--kk-md);
	background: rgb(13 13 14 / 60%);
	border-radius: var(--kk-r);
	text-align: center;
}

.kk-countdown__zahl {
	display: block;
	color: var(--kk-gold);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-lg);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.kk-countdown__einheit {
	display: block;
	color: #e5e5e7;
	font-size: var(--kk-fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-footer__raster {
	display: grid;
	gap: var(--kk-lg);
	margin-bottom: var(--kk-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.kk-footer__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.kk-footer__raster {
		gap: var(--kk-xl);
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.kk-footer__spalte {
	display: flex;
	flex-direction: column;
	gap: var(--kk-xs);
	min-width: 0;
}

.kk-footer__titel {
	margin-bottom: var(--kk-xs);
	color: var(--kk-gold);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.kk-footer__titel--marke {
	/*
	 * Weiss statt --kk-carmine-bright (23.09.2026). BELEGT, gemessen
	 * 22.09.2026 auf der Testkopie: #e81710 auf #1a1a1a = 3.78, AA
	 * verlangt 4.5. Durchgerechnet über Farbton 355,5 Grad: kein Rot
	 * erreicht dort 4.5, ohne neonfarben zu werden (#ff1f2f = 4.55).
	 * Weiss = 17.4. Der Fussbereich ordnet sich damit sauber: Wortmarke
	 * am hellsten, Spaltentitel in Gold (8.28) darunter.
	 *
	 * ACHTUNG, wirkt allein noch nicht: kk-integration.css:1772 setzt
	 * .kk-body .kk-footer__titel--marke erneut auf --kk-carmine-bright
	 * und lädt SPÄTER, gewinnt also. Dort muss dieselbe Änderung
	 * nachgezogen werden. Bewusst kein !important und keine
	 * Spezifitätserhöhung von hier aus — genau daran krankt die Datei
	 * bereits an zwei belegten Stellen (120 Schaltflächen im
	 * Kneipenführer, „Jecken-Post" weiss auf weiss).
	 */
	color: #fff;
	font-size: var(--kk-fs-md);
}

.kk-footer__text {
	margin: 0 0 var(--kk-sm);
	color: var(--kk-divider);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

.kk-footer__liste,
.kk-footer__social,
.kk-footer__rechtliste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-footer__liste a {
	display: block;
	padding: 0.2rem 0;
	color: var(--kk-divider);
	font-size: var(--kk-fs-body-md);
	text-decoration: none;
}

.kk-footer__liste a:hover {
	color: #fff;
	text-decoration: underline;
}

.kk-footer__social {
	display: flex;
	gap: var(--kk-sm);
	margin-top: var(--kk-sm);
}

.kk-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: var(--kk-ticker);
	border-radius: var(--kk-r);
	color: var(--kk-gold);
}

.kk-footer__social a:hover {
	background: var(--kk-carmine-deep);
	color: #fff;
}

.kk-footer__unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	padding-top: var(--kk-md);
	border-top: 1px solid rgb(255 255 255 / 12%);
}

.kk-footer__copy {
	margin: 0;
	color: #b9b9bb;
	font-size: var(--kk-fs-body-sm);
}

.kk-footer__rechtliste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-md);
}

.kk-footer__rechtliste a {
	color: #b9b9bb;
	font-size: var(--kk-fs-body-sm);
	text-decoration: none;
}

.kk-footer__rechtliste a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
   13 Kleine Bildschirme: Leiste unten, Umschaltungen
   ========================================================================== */

.kk-tabbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	padding-bottom: env(safe-area-inset-bottom);
	background: rgb(255 248 247 / 98%);
	border-top: 1px solid var(--kk-divider);
	box-shadow: 0 -1px 8px rgb(0 0 0 / 5%);
}

@supports (backdrop-filter: blur(12px)) {
	.kk-tabbar {
		background: rgb(255 248 247 / 90%);
		backdrop-filter: blur(12px);
	}
}

.kk-tabbar__link {
	display: flex;
	flex: 1 1 0;
	/* ohne min-width schrumpfen Flex-Kinder nicht unter ihre Textbreite */
	min-width: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	min-height: 56px;
	padding: 0.35rem 0.2rem;
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.kk-tabbar__link > span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kk-tabbar__link.is-aktiv {
	color: var(--kk-primary);
}

/*
 * CookieYes: Schaltfläche „Einwilligung ändern" von der Leiste wegrücken.
 *
 * Gemessen 22.09.2026 auf der Testkopie: .cky-btn-revisit-wrapper steht ab
 * Werk auf position: fixed; left: 15px; bottom: 15px; z-index: 999999,
 * Kasten 45x45 px mit einem 30x30-Symbol mittig darin. .kk-tabbar ist
 * ebenfalls fixed, bottom: 0, mindestens 56 px hoch, z-index 90. Der Kasten
 * reicht damit von 15 bis 60 px über den unteren Rand und liegt vollständig
 * in der Leiste - bei 999999 gegen 90 immer obenauf. Auf dem Telefon lag das
 * Symbol bei x 23 / y 694 unmittelbar auf dem ersten Leistenplatz „Magazin"
 * (0-74 px / y 690-746).
 *
 * Nur verschoben, NICHT ausgeblendet: die Einwilligung muss jederzeit
 * widerrufbar bleiben. 56 px Leistenhöhe + 12 px Abstand = 68 px, dazu
 * dieselbe safe-area-Variable, die auch die Leiste benutzt, damit es auf
 * Geräten mit Hausbalken mitwandert.
 *
 * Ab 1024 px ist .kk-tabbar ausgeblendet (siehe unten); dort bleibt die
 * Schaltfläche unangetastet an ihrem Werksplatz.
 *
 * !important, weil die Werksregel aus dem CookieYes-Stylesheet dieselbe
 * Spezifität hat und je nach Ladereihenfolge nach diesem hier steht.
 *
 * ABLAGE: Fremdanbieter-Korrekturen gehören nach assets/css/kk-integration.css.
 * Liegt hier, weil dort am 22.09.2026 parallel gearbeitet wurde (Absprache
 * Klaus). Bitte bei Gelegenheit umziehen.
 */
@media (max-width: 1023px) {
	.cky-btn-revisit-wrapper {
		bottom: calc(68px + env(safe-area-inset-bottom)) !important;
	}
}

/* Ab Tablet: Leiste weg, Schreibtisch-Kopf an */
@media (min-width: 1024px) {
	.kk-tabbar,
	.kk-burger,
	.kk-quicknav {
		display: none;
	}

	.kk-panel {
		display: none !important;
	}

	.kk-masthead__suche {
		display: block;
	}

	.kk-masthead__inner {
		min-height: 80px;
	}

	.kk-aktion {
		display: inline-flex;
	}

	.kk-nav {
		display: block;
	}

	.kk-marke__logo img,
	.kk-marke__logo .custom-logo {
		height: 48px;
		max-height: 48px;
	}

	.kk-marke__name {
		font-size: var(--kk-fs-md);
	}

	.kk-termin__rechts {
		display: flex;
	}
}

@media (max-width: 1023px) {
	body.kk-body {
		padding-bottom: 56px;
	}

	.kk-topbar__links,
	.kk-topbar__rechts {
		display: none;
	}

	.kk-topbar__inner {
		gap: var(--kk-sm);
	}

	/*
	 * Unter 1024 px blendet die Servicezeile Datum, Wetter und Servicemenü
	 * aus. Trägt sie dann auch keine Eilmeldung – auf der Startseite steht
	 * die im roten Band über dem Aufmacher –, bliebe nur ein leerer
	 * schwarzer Streifen von 34 px stehen.
	 */
	.kk-topbar--ohne-eil {
		display: none;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.kk-aktion--merkliste,
	.kk-aktion--gold {
		display: inline-flex;
	}
}

/* Kein Motiv-Zoom auf Berührungsbildschirmen (verschluckt Tipp-Gesten). */
@media (hover: none) {
	.kk-card:hover .kk-media__img,
	.kk-kuenstler:hover .kk-kuenstler__bild img {
		transform: none;
	}
}

/* ==========================================================================
   14 Kleine Hilfsklassen
   ========================================================================== */

.kk-mt-md {
	margin-top: var(--kk-md);
}

.kk-eng {
	max-width: 32rem;
}

/* Kurzmeldungen im dunklen Baustein */
.kk-tickerliste {
	display: flex;
	flex-direction: column;
	gap: var(--kk-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-tickerliste > li {
	padding-bottom: var(--kk-sm);
	border-bottom: 1px solid #2a2a2c;
}

.kk-tickerliste > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.kk-tickerliste__zeit {
	display: block;
	color: var(--kk-gold);
	font-size: var(--kk-fs-meta);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-tickerliste__titel {
	color: #fff;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body-md);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

.kk-tickerliste__titel:hover {
	color: var(--kk-gold-light);
	text-decoration: underline;
}

/* Reaktionsleiste unter dem Artikel */
.kk-reaktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	margin: var(--kk-lg) 0;
	padding: var(--kk-md);
	background: var(--kk-low);
	border-radius: var(--kk-r);
}

.kk-reaktion__frage {
	margin: 0;
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body);
	font-weight: 600;
	text-transform: uppercase;
}

.kk-reaktion__werte {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-md);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

.kk-reaktion__wert {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.kk-reaktion__wert .kk-icon {
	color: var(--kk-primary);
}

/* Merk-Knopf */
.kk-merk {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.7rem;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r-pill);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-sm);
	cursor: pointer;
}

.kk-merk:hover {
	border-color: var(--kk-primary-container);
	color: var(--kk-primary);
}

.kk-merk.is-aktiv {
	background: var(--kk-primary);
	border-color: var(--kk-primary);
	color: #fff;
}

/* ==========================================================================
   15 Feinschliff für kleine Bildschirme
   ========================================================================== */

@media (max-width: 1023px) {
	/*
	 * Der Titelkopf darf nicht über den Rand hinauslaufen: der Markenblock
	 * schrumpft, die Bedienelemente bleiben immer erreichbar.
	 */
	.kk-marke {
		min-width: 0;
		overflow: hidden;
	}

	.kk-marke__name,
	.kk-marke__claim {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.kk-masthead__aktionen {
		flex: 0 0 auto;
	}

	/*
	 * Das rote Eil-Band bleibt sichtbar. Bis B-01 stand die Eilmeldung hier
	 * zusätzlich im dunklen Band über dem Titelkopf, deshalb war das Band auf
	 * kleinen Bildschirmen ausgeblendet. Jetzt lässt die Servicezeile die
	 * Meldung auf der Startseite aus – wäre das Band hier weiterhin
	 * ausgeblendet, sähe niemand unter 1024 px die Eilmeldung mehr.
	 *
	 * Schmaler und umbruchfähig, damit Abzeichen und Schlagzeile bei 360 px
	 * untereinander rutschen statt die Seite aufzuschieben.
	 */
	.kk-livebar {
		padding: var(--kk-xs) var(--kk-sm);
	}

	.kk-livebar__links {
		flex-wrap: wrap;
	}

	/*
	 * Bei 390 px blieben für die Schlagzeile neben der Plakette gemessen nur
	 * 189 px – zu wenig für eine Versalienzeile. Die Meldungsfolge rückt
	 * deshalb unter die Plakette und nutzt die ganze Breite (gemessen
	 * 294 px). Die Schaltfläche bleibt daneben: sie ist die Pflichtbedienung
	 * und darf nicht in eine eigene Zeile fallen, wo sie verloren aussieht.
	 */
	.kk-livebar__folge {
		flex-basis: 100%;
	}

	/* Kräftigerer Verlauf, damit die Überschrift auf dem Motiv sicher lesbar bleibt. */
	.kk-card__scrim {
		background: linear-gradient(to top, rgb(10 10 12 / 96%) 0%, rgb(10 10 12 / 88%) 40%, rgb(10 10 12 / 45%) 70%, rgb(10 10 12 / 8%) 100%);
	}

	.kk-card--lead .kk-card__title {
		font-size: 1.375rem;
		line-height: 1.2;
	}
}

@media (max-width: 480px) {
	.kk-marke__claim {
		display: none;
	}

	.kk-marke__logo img,
	.kk-marke__logo .custom-logo {
		height: 28px;
		max-height: 28px;
	}

	/* Schmalere Seitenränder lassen mehr Platz für den Inhalt. */
	:root {
		--kk-rand: 0.875rem;
	}
}

/* Lexikon-Baustein auf der Startseite */
/*
 * Nachschlage-Band: Verzeichnis, Chronik und Lexikon in einem Abschnitt.
 *
 * Flex statt Raster mit fester Spaltenzahl, damit keine leere Zelle
 * entsteht, wenn eine der drei Spalten fehlt (Lexikonseite nicht angelegt,
 * kein Eintrag im Verzeichnis). Bei rund 370 px Spaltenbreite stehen die
 * Kuenstlerkacheln als 2 x 2 bei rund 180 px - dafuer ist kk-portrait-s da.
 */
.kk-nachschlagen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-abschnitt) var(--kk-lg);
}

.kk-nachschlagen__spalte {
	flex: 1 1 18rem;
	min-width: 0;
}

/*
 * Kuenstlerkacheln immer 2 x 2, auch auf dem Telefon: bei 390 px sind das
 * 155 px Kachelbreite (kk-portrait-s deckt das mit 400 px ab), gestapelt
 * waeren es vier 539 px hohe Kacheln.
 */
.kk-nachschlagen__kacheln {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kk-lexikon-teaser {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kk-md);
	padding: var(--kk-md);
	background: var(--kk-low);
	border-radius: var(--kk-r);
}

.kk-lexikon-teaser__text {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

/* Hinweis auf fehlende Bausteine (nur in der Vorschau sichtbar) */
.kk-fehlt {
	padding: var(--kk-md);
	background: var(--kk-low);
	border-left: 4px solid var(--kk-gold);
	border-radius: var(--kk-r);
	font-size: var(--kk-fs-body-md);
}

.kk-fehlt p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   16 Nachbesserung: Querlauf auf sehr schmalen Bildschirmen
   ========================================================================== */

/*
 * Flex-Kinder schrumpfen ohne min-width:0 nicht unter ihre Inhaltsbreite.
 * Ohne diese Zeilen schiebt der Markenblock den Menüknopf bei 360 px aus
 * dem Bild.
 */
.kk-marke__text,
.kk-masthead__inner > *,
.kk-topbar__inner > * {
	min-width: 0;
}

/*
 * Der Markenblock stand auf `flex: 0 0 auto` und konnte deshalb gar nicht
 * schrumpfen - bei 360 px schob er den Menueknopf aus dem Bild.
 */
.kk-marke {
	flex: 0 1 auto;
}

.kk-masthead__aktionen {
	flex: 0 0 auto;
	min-width: 0;
}

/*
 * Die vier Countdown-Felder teilen sich die Breite. Ohne min-width: 0
 * bleibt jedes so breit wie das Wort "Sekunden" - vier davon passen bei
 * 360 px nicht nebeneinander und schieben die ganze Seite auf.
 */
.kk-countdown__feld {
	min-width: 0;
	padding-inline: var(--kk-xs);
}

.kk-countdown__einheit {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 400px) {
	.kk-countdown__feld {
		padding-inline: var(--kk-md);
	}
}

/* Der Schnellzugriff scrollt in sich; er darf die Seite nicht mitziehen. */
.kk-quicknav {
	max-width: 100%;
	overflow: hidden;
}

/*
 * Hier stand kurzzeitig `overflow-x: clip` auf html/body als Notnagel.
 * Bewusst entfernt: Ist die eine Achse `clip` und die andere `visible`,
 * zieht der Browser die zweite Achse mit - die Seite liess sich dann gar
 * nicht mehr scrollen. Der Querlauf ist oben an der Ursache behoben
 * (fehlendes min-width: 0 an den Flex-Kindern des Titelkopfs).
 */

/*
 * Auf sehr schmalen Bildschirmen trägt schon die Bildmarke den Namen der
 * Seite. Die zusätzliche Wortmarke daneben würde nur abgeschnitten.
 */
@media (max-width: 480px) {
	.wp-custom-logo .kk-marke__text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}