@charset "UTF-8";
/*
 * Kölner Karneval – Relaunch: Stilschicht für vorhandene Funktionen
 *
 * Diese Datei erzeugt KEIN eigenes Markup. Sie nimmt die Ausgabe der
 * bestehenden Shortcodes und Blöcke und bringt sie auf das Stitch-Design.
 * Die Logik bleibt vollständig dort, wo sie heute liegt:
 *
 *   [kk_termine_liste]      WPCode „Termine-Übersicht" (10045)
 *   [kk_kuenstler_liste]    WPCode „Künstlerverzeichnis – Grundstruktur" (10198)
 *   [kkk_kneipenfuehrer]    WPCode „Karnevalskneipen-Führer" (13126)
 *   Block kk/karnevalschronik   WPCode 11671–11676
 *   [kk_lexikon]            WPCode „Karnevalslexikon" (12484)
 *
 * Warum die Selektoren einen zusätzlichen `.kk-body` tragen:
 * Die mitgelieferten CSS-Snippets (10053 Termine-Design, 10199
 * Künstlerverzeichnis-Design, 11676 Chronik-CSS) schreiben ihre Regeln über
 * `wp_head` in die Seite und stehen damit NACH den eingereihten Stylesheets
 * des Themes. Ein zusätzlicher Klassenselektor gewinnt unabhängig von der
 * Reihenfolge. Dadurch müssen die Snippets nicht angefasst werden.
 *
 * Wer die alten Design-Snippets später abschalten will, kann das tun – diese
 * Datei ist eigenständig und setzt nichts davon voraus.
 *
 * ---------------------------------------------------------------------------
 * MESSREGEL, aus drei Fehlern an einem Tag (22.09.2026)
 * ---------------------------------------------------------------------------
 *
 * Der zusätzliche `.kk-body` bringt zwei Klassen gegen die eine des Snippets.
 * Diese Regel gewinnt damit IMMER – auch bei Eigenschaften, die man gar nicht
 * ändern wollte, sondern nur mitgeschrieben hat. Dreimal ist genau das
 * passiert:
 *
 *   .kkk-kartenliste      `display: grid` durch `display: flex` ersetzt –
 *                         aus einem Raster wurde ein Stapel, die Liste
 *                         wuchs von 13.316 auf 34.697 px.
 *   .kk-jahr-marke        die Positionierung des Chronik-Zeitstrahls
 *                         überschrieben – die Jahreszahl stand 76 px neben
 *                         ihrer Karte.
 *   .kkk-karte-aktionen   `margin-top: auto` durch 4 px ersetzt – die
 *                         Schaltflächen lösten sich vom Kartenende.
 *
 * Jedes Mal war die Absicht harmlos (Abstand, Lücke, Umbruch) und die Wirkung
 * es nicht. Deshalb: WER HIER EINE REGEL SCHREIBT, LEGT DIE SNIPPET-REGEL
 * DANEBEN und vergleicht Eigenschaft für Eigenschaft. Was man nicht ändern
 * will, schreibt man nicht hin – Weglassen ist hier die sichere Seite, nicht
 * Vollständigkeit.
 *
 * Aufbau
 *  1 Gemeinsames
 *  2 Terminkalender
 *  3 Künstlerverzeichnis
 *  4 Kneipenführer
 *  5 Karnevalschronik
 *  6 Karnevalslexikon
 *  7 Kleine Bildschirme
 *  8 Gegen das Eltern-Theme
 *  9 Eigenes Markup des Themes (Kickerzeile, Randkästen)
 */

/* ==========================================================================
   1 Gemeinsames
   ========================================================================== */

/*
 * `hidden` ist ein Zustand, kein Layout.
 *
 * Die Filter der bestehenden Shortcodes blenden Eintraege aus, indem sie das
 * hidden-Attribut setzen. Dessen Wirkung (`display: none`) kommt aus dem
 * Standard-Stylesheet des Browsers und hat die Spezifitaet 0 - jede
 * display-Angabe in dieser Datei gewinnt dagegen. Genau das ist auf der
 * Testkopie passiert: Der Terminfilter setzte bei 127 von 127 Eintraegen
 * `hidden`, sichtbar blieben trotzdem alle 127. Beim Kneipenfuehrer dasselbe
 * mit 69 von 120.
 *
 * Deshalb hier ausdruecklich und mit Vorrang. Das Lexikon war nie betroffen,
 * weil dort keine display-Angabe gesetzt wird - die Regel schadet ihm aber
 * auch nicht.
 */
.kk-body [hidden] {
	display: none !important;
}


/*
 * Die Übersichten liegen in einer normalen Seite. Deren Fließtext-Rahmen
 * (.kk-prosa) würde Überschriften Balken und Großbuchstaben verpassen – das
 * übernimmt hier die jeweilige Komponente selbst.
 */
.kk-body .kk-prosa .kk-termine-liste,
.kk-body .kk-prosa .kk-kuenstlerverzeichnis,
.kk-body .kk-prosa .kkk-kneipenfuehrer,
.kk-body .kk-prosa .kk-chronik-block,
.kk-body .kk-prosa .kk-lexikon {
	margin-top: 0;
}

.kk-body .kk-prosa .kk-termin-titel,
.kk-body .kk-prosa .kk-kuenstler-name,
.kk-body .kk-prosa .kkk-karte-name,
.kk-body .kk-prosa .kk-karte-titel,
.kk-body .kk-prosa .kk-lex-begriff {
	margin-top: 0;
	padding-left: 0;
	border-left: 0;
}

/* Filterknöpfe und -chips: überall dieselbe Pille wie im Entwurf. */
.kk-body .kk-termine-filter button,
.kk-body .kk-filter-reihe .kk-filter-chip,
.kk-body .kkk-filter-chips .kkk-filter-chip,
.kk-body .kk-lex-filter .kk-lex-filter-btn {
	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;
	line-height: 1.35;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kk-body .kk-termine-filter button:hover,
.kk-body .kk-filter-reihe .kk-filter-chip:hover,
.kk-body .kkk-filter-chips .kkk-filter-chip:hover,
.kk-body .kk-lex-filter .kk-lex-filter-btn:hover {
	border-color: var(--kk-primary-container);
	color: var(--kk-primary);
}

.kk-body .kk-termine-filter button.kk-filter-aktiv,
.kk-body .kk-filter-reihe .kk-filter-chip:has(input:checked),
.kk-body .kkk-filter-chips .kkk-filter-chip.is-active,
.kk-body .kk-lex-filter .kk-lex-filter-btn.is-aktiv,
.kk-body .kk-lex-filter .kk-lex-filter-btn[aria-pressed="true"] {
	background: var(--kk-primary);
	border-color: var(--kk-primary);
	color: #fff;
}

.kk-body .kk-termine-filter,
.kk-body .kk-filter-reihe,
.kk-body .kkk-filter-chips,
.kk-body .kk-lex-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
	margin: 0 0 var(--kk-md);
}

/* Suchzeilen der Shortcodes auf das Suchfeld des Themes bringen. */
.kk-body .kk-suche-filter,
.kk-body .kkk-intro {
	padding: var(--kk-md);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
}

.kk-body .kk-suchzeile input[type="search"],
.kk-body .kkk-kneipenfuehrer input[type="search"] {
	padding: 0.55rem 0.9rem;
	background: var(--kk-low);
	border: 1px solid transparent;
	border-radius: var(--kk-r);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
}

.kk-body .kk-suchzeile input[type="search"]:focus,
.kk-body .kkk-kneipenfuehrer input[type="search"]:focus {
	background: var(--kk-lowest);
	border-color: var(--kk-primary-container);
	outline: none;
	box-shadow: 0 0 0 1.5px var(--kk-primary-container);
}

.kk-body .kk-suchzeile button,
.kk-body .kkk-kneipenfuehrer button[type="submit"] {
	padding: 0.55rem 1.25rem;
	background: var(--kk-primary);
	border: 0;
	border-radius: var(--kk-r);
	color: #fff;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.kk-body .kk-suchzeile button:hover,
.kk-body .kkk-kneipenfuehrer button[type="submit"]:hover {
	background: var(--kk-carmine-deep);
}

/* Trefferzahl und leere Ergebnisse */
.kk-body .kk-trefferzahl,
.kk-body .kkk-treffer,
.kk-body .kk-lex-treffer {
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-body .kk-termine-leer,
.kk-body .kk-kuenstler-leer,
.kk-body .kkk-keine-treffer,
.kk-body .kk-lex-keine-treffer {
	padding: var(--kk-xl) var(--kk-md);
	background: var(--kk-lowest);
	border: 1px dashed var(--kk-outline-var);
	border-radius: var(--kk-r);
	color: var(--kk-on-surface-var);
	text-align: center;
}

/* Blättern */
.kk-body .kk-pagination a,
.kk-body .kkk-pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 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-head);
	font-weight: 600;
	text-decoration: none;
}

.kk-body .kk-pagination a:hover,
.kk-body .kkk-pagination a:hover {
	border-color: var(--kk-primary-container);
	color: var(--kk-primary);
}

/* ==========================================================================
   2 Terminkalender – [kk_termine_liste]
   ========================================================================== */

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

.kk-body .kk-termine-liste .kk-termin-item {
	position: relative;
	display: flex;
	gap: var(--kk-md);
	align-items: flex-start;
	margin: 0;
	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);
	list-style: none;
	transition: box-shadow 0.2s ease;
}

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

/* Datumsschild in Rheinblau, wie im Entwurf */
.kk-body .kk-termin-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-body .kk-termin-tag {
	display: block;
	font-family: var(--kk-font-head);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.05;
}

.kk-body .kk-termin-monat {
	display: block;
	font-family: var(--kk-font-body);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.85;
}

.kk-body .kk-termin-inhalt {
	flex: 1 1 auto;
	min-width: 0;
}

.kk-body .kk-termin-titel {
	margin: 0 0 var(--kk-xs);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-sm);
	font-weight: 600;
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-body .kk-termin-titel a {
	color: inherit;
	text-decoration: none;
}

.kk-body .kk-termin-item:hover .kk-termin-titel,
.kk-body .kk-termin-item:hover .kk-termin-titel a {
	color: var(--kk-primary);
}

.kk-body .kk-termin-meta {
	margin: 0;
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-sm);
	line-height: 1.5;
}

.kk-body .kk-termin-ticketbtn,
.kk-body .kk-termin-linkbtn {
	display: inline-flex;
	align-items: center;
	gap: var(--kk-xs);
	margin-top: var(--kk-sm);
	padding: 0.3rem 0.85rem;
	border-radius: var(--kk-r);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body-md);
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
}

.kk-body .kk-termin-ticketbtn {
	background: var(--kk-primary);
	color: #fff;
}

.kk-body .kk-termin-ticketbtn:hover {
	background: var(--kk-carmine-deep);
	color: #fff;
}

.kk-body .kk-termin-linkbtn {
	background: var(--kk-lowest);
	border: 1.5px solid var(--kk-navy-deep);
	color: var(--kk-navy-deep);
}

.kk-body .kk-termin-linkbtn:hover {
	background: var(--kk-low);
}

/* ==========================================================================
   3 Künstlerverzeichnis – [kk_kuenstler_liste]
   ========================================================================== */

.kk-body .kk-kuenstlerverzeichnis {
	max-width: none;
}

/* A–Z-Leiste wie im Entwurf */
.kk-body .kk-az-leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 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-body .kk-az-leiste a,
.kk-body .kk-az-leiste span {
	min-width: 1.85rem;
	height: 1.85rem;
	padding: 0 0.35rem;
	background: transparent;
	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-transform: uppercase;
}

.kk-body .kk-az-leiste a:hover,
.kk-body .kk-az-leiste a:focus-visible {
	background: var(--kk-low);
	color: var(--kk-primary);
	outline-color: var(--kk-primary-container);
}

.kk-body .kk-az-leiste a.kk-az-aktiv {
	background: var(--kk-primary);
	color: #fff;
}

.kk-body .kk-az-leiste span.kk-az-inaktiv {
	color: var(--kk-outline-var);
}

/* Kartenraster: Porträtkachel mit Verlauf und Namen im Bild */
.kk-body .kk-kuenstler-grid {
	display: grid;
	gap: var(--kk-md);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.kk-body .kk-kuenstler-karte-wrap {
	min-width: 0;
}

.kk-body .kk-kuenstler-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

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

.kk-body .kk-kuenstler-bild {
	position: relative;
	aspect-ratio: 3 / 4;
	margin: 0;
	overflow: hidden;
	background: var(--kk-highest);
}

/* Zwilling zu .kk-kuenstler__bild img in kk.css – gleicher Beschnittanker. */
.kk-body .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-body .kk-kuenstler-karte:hover .kk-kuenstler-bild img {
	transform: scale(1.04);
}

/* Verlauf, damit der Name über jedem Motiv lesbar bleibt. */
.kk-body .kk-kuenstler-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(10 10 12 / 90%) 0%, rgb(10 10 12 / 45%) 35%, rgb(10 10 12 / 0%) 70%);
}

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

.kk-body .kk-kuenstler-art {
	position: absolute;
	bottom: var(--kk-sm);
	left: var(--kk-sm);
	z-index: 2;
	padding: 0.1rem 0.5rem;
	background: var(--kk-primary);
	border-radius: var(--kk-r);
	color: #fff;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-body .kk-kuenstler-karte.kk-historisch .kk-kuenstler-art {
	background: var(--kk-navy);
}

.kk-body .kk-kuenstler-details {
	padding: var(--kk-md);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
	line-height: 1.5;
}

.kk-body .kk-kuenstler-profillink {
	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;
}

.kk-body .kk-geprueft-am,
.kk-body .kk-buchungsangebote,
.kk-body .kk-buchung-typ {
	color: var(--kk-outline);
	font-size: var(--kk-fs-meta);
}

/* ==========================================================================
   4 Kneipenführer – [kkk_kneipenfuehrer]
   ========================================================================== */

.kk-body .kkk-intro-titel {
	margin: 0 0 var(--kk-xs);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-lg);
	font-weight: 700;
	line-height: var(--kk-lh-lg);
	text-transform: uppercase;
}

.kk-body .kkk-intro-frage {
	margin: 0;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-lead);
	line-height: var(--kk-lh-lead);
}

/*
 * ZURUECKGENOMMEN 22.09.2026.
 *
 * Hier stand:
 *
 *     .kk-body .kkk-kartenliste {
 *         display: flex; flex-direction: column; gap: var(--kk-sm);
 *         margin: 0; padding: 0; list-style: none;
 *     }
 *
 * Das Snippet (WPCode "Karnevalskneipen-Fuehrer", CSS-Teil) setzt an
 * derselben Stelle laengst ein Raster:
 *
 *     .kkk-kartenliste { display: grid;
 *         grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
 *         gap: 20px; justify-content: center; }
 *
 * Meine Regel trug zwei Klassen, die des Snippets eine - meine gewann und
 * machte aus dem Raster einen Stapel von 120 Baendern in voller
 * Strangbreite. Es war also eine Verschlechterung durch Ueberschreiben, und
 * ein zweites Raster daneben zu bauen waere die zweite gewesen.
 *
 * Die 260 px Mindestbreite des Snippets sind am Bestand bestaetigt: laengste
 * Zeile ist die Adresse, p90 212 px plus 2 x 16 px Polster = 244 px.
 *
 * `list-style: none` war ohnehin wirkungslos - der Behaelter ist ein `div`,
 * keine Liste. `margin`/`padding` setzt das Snippet selbst nicht, sie waren
 * ohne Wirkung.
 *
 * KEINE Ersatzregel. Wer hier wieder etwas setzt, schaltet das Raster
 * wieder ab.
 */

.kk-body .kkk-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--kk-xs);
	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-body .kkk-karte:hover {
	border-color: var(--kk-outline-var);
	box-shadow: var(--kk-schatten-2);
}

.kk-body .kkk-karte--kandidat {
	border-left: 4px solid var(--kk-gold);
}

.kk-body .kkk-karte-name {
	margin: 0;
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-md);
	font-weight: 600;
	line-height: var(--kk-lh-md);
	text-transform: uppercase;
}

.kk-body .kkk-karte-name a {
	color: inherit;
	text-decoration: none;
}

.kk-body .kkk-karte:hover .kkk-karte-name a {
	color: var(--kk-primary);
}

.kk-body .kkk-karte-adresse,
.kk-body .kkk-karte-veedel {
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

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

.kk-body .kkk-karte-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
}

.kk-body .kkk-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.5rem;
	background: var(--kk-low);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-body .kkk-badge--kandidat {
	background: var(--kk-gold-light);
	border-color: var(--kk-gold);
	color: #4a3a05;
}

/*
 * `margin-top: auto` WIEDERHERGESTELLT (22.09.2026).
 *
 * Das Snippet setzt an dieser Zeile
 *
 *     .kkk-karte-aktionen { margin-top: auto; display: flex; gap: 8px; padding-top: 10px; }
 *
 * `.kkk-karte` ist `display: flex; flex-direction: column` - `margin-top:
 * auto` ist also GENAU DER MECHANISMUS, der die Schaltflaechenzeile am
 * Kartenende festhaelt. Meine Regel hier trug zwei Klassen gegen eine,
 * ersetzte `auto` durch 4 px, und die Zeile rutschte direkt unter den Text.
 * Weil die Beschreibungen verschieden lang sind, stand danach jede Karte
 * anders hoch.
 *
 * Gewollt war nur Abstand und Umbruch. Beides bleibt; `margin-top` fasse ich
 * nicht mehr an.
 *
 * DRITTER FALL DERSELBEN BAUART an einem Tag - nach dem Raster der
 * Kartenliste und der Zeitleiste der Chronik. Die Lehre steht im Dateikopf:
 * eine Regel mit `.kk-body` gewinnt IMMER gegen die Snippet-Regel, auch bei
 * Eigenschaften, die man gar nicht meinte. Wer hier etwas setzt, muss die
 * Snippet-Regel danebenlegen und Eigenschaft fuer Eigenschaft vergleichen.
 */
.kk-body .kkk-karte-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
	margin-top: auto;
}

/* Schaltflaechen des Kneipenfuehrer-Snippets.
 * MESSUNG 22.09.2026: Die Voranstellung '.kkk-karte-aktionen a' ist noetig,
 * nicht kosmetisch. Vorher stand hier '.kk-body .kkk-btn--karte' (0-2-0).
 * Darueber gewann '.kk-body .kk-prosa a' (0-2-1, Zeile 1717 dieser Datei)
 * und zog die Schriftfarbe auf --kk-primary #94000b -- identisch mit dem
 * Hintergrund dieser Schaltflaeche. Gemessen: color == background ==
 * rgb(148, 0, 11) bei 120 von 240 Schaltflaechen, Text unsichtbar.
 * Die uebrigen 120 (--route) verloren ihr Weiss auf dieselbe Weise.
 * Snippet-Regeln danebengelegt (30-kneipenfuehrer.php:2312-2334):
 *   .kkk-btn--karte { background:#eef1f7; color:var(--kkk-blau); }
 *   .kkk-btn--route { background:var(--kkk-rot); color:#fff; }
 * Beide liegen bei 0-1-0 und verlieren ebenfalls gegen die Prosa-Regel --
 * die Farbgebung der Schaltflaechen kommt daher bewusst vollstaendig von
 * hier und nicht mehr teilweise aus dem Snippet.
 */
.kk-body .kkk-karte-aktionen a.kkk-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--kk-xs);
	padding: 0.3rem 0.85rem;
	background: var(--kk-lowest);
	border: 1.5px solid var(--kk-navy-deep);
	border-radius: var(--kk-r);
	color: var(--kk-navy-deep);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body-md);
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
}

.kk-body .kkk-karte-aktionen a.kkk-btn:hover {
	background: var(--kk-low);
}

.kk-body .kkk-karte-aktionen a.kkk-btn--karte {
	background: var(--kk-primary);
	border-color: var(--kk-primary);
	color: #fff;
}

.kk-body .kkk-karte-aktionen a.kkk-btn--karte:hover {
	background: var(--kk-carmine-deep);
	color: #fff;
}

.kk-body .kkk-breadcrumb {
	margin-bottom: var(--kk-sm);
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-sm);
}

/* ==========================================================================
   5 Karnevalschronik – Block kk/karnevalschronik
   Klassen aus der laufenden Testkopie übernommen.
   ========================================================================== */

.kk-body .kk-chronik-titel {
	margin: 0 0 var(--kk-xs);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-lg);
	font-weight: 700;
	line-height: var(--kk-lh-lg);
	text-transform: uppercase;
}

.kk-body .kk-chronik-intro,
.kk-body .kk-seiten-unterzeile {
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-lead);
	line-height: var(--kk-lh-lead);
}

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

.kk-body .kk-jahr-marke {
	display: inline-flex;
	align-items: baseline;
	gap: var(--kk-sm);
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-md);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* -- Kneipenführer: Bildbereich der Karte (22.09.2026) ------------------- */

/*
 * Feste Höhe raus, Seitenverhältnis rein.
 *
 * Das Snippet setzt `height: 190px` am Bild plus `object-fit: cover`.
 * Gemessen an der Livedomain: die Bilder sind eigens erzeugte 270 x 140
 * (Verhältnis 1,9286) und tragen weder `srcset` noch `sizes`. Bei der
 * tatsächlichen Spaltenbreite wird ein solches Bild rund 135 bis 150 px
 * hoch - die reservierten 190 px sind also ÜBERRESERVIERT, nicht leer.
 *
 * `aspect-ratio: 27 / 14` ist exakt 270:140, nicht gerundet. Damit
 * verschwindet die Überreservierung, ohne dass ein einziger Bildpunkt
 * beschnitten wird.
 *
 * `object-fit: cover` bleibt als Rückfall für den Fall, dass später ein Bild
 * mit abweichendem Verhältnis dazukommt. Bei übereinstimmendem Verhältnis
 * schneidet es nichts ab.
 *
 * `width`/`height` am Bild bleiben unangetastet - sie verhindern das
 * Springen beim Laden.
 *
 * Die zwei Karten ohne Bild bekommen weiterhin gar keinen Bildbereich: das
 * Snippet gibt ihn nur bei gefüllter `foto_url` aus.
 */
/*
 * Spaltenbreite auf 280 px begrenzt (22.09.2026).
 *
 * Die Bilder sind eigens erzeugte 270 px breite Dateien. Bei der vom Snippet
 * erlaubten Hoechstbreite von 320 px wurden sie auf gemessene 318 px
 * gestreckt - eine Hochrechnung um 17,8 %, sichtbar als Unschaerfe. Mit
 * 280 px sind es 3,7 %.
 *
 * DIESE REGEL UEBERSCHREIBT DAS SNIPPET BEWUSST, anders als die
 * zurueckgenommene Regel weiter oben. Das Snippet setzt
 * `repeat(auto-fill, minmax(260px, 320px))`; hier bleibt alles davon
 * erhalten - dieselbe Funktion, dieselbe Mindestbreite, dieselbe
 * Ausrichtung -, nur die Obergrenze sinkt. Es wird also nichts
 * ausgeschaltet, sondern ein Wert eingegrenzt. Der Unterschied ist genau
 * der, an dem der Rasterfehler von heute Mittag haengt.
 *
 * Geaendert wird NICHT im Snippet: es ist Fremdcode, und die Begruendung
 * fuer den Wert kommt aus dem Theme (Bildbreite gegen Spaltenbreite).
 */
.kk-body .kkk-kartenliste {
	grid-template-columns: repeat(auto-fill, minmax(260px, 280px));
}

.kk-body .kkk-karte-bild {
	aspect-ratio: 27 / 14;
}

.kk-body .kkk-karte-bild img {
	height: 100%;
}

/* ==========================================================================
   5-0 Streifen "Aus dem Bildarchiv" (Punkt 7, 22.09.2026)

   Er steht VOR der Zeitleiste und muss sich sichtbar von ihr unterscheiden,
   sonst liest man ihn als deren Anfang. Deshalb: waagerechter Streifen,
   kleinere Karten, eigene Ueberschrift, klare Kante darunter.

   Bewusst KEINE Zeitleistenachse, KEIN Punkt, KEIN 4-px-Balken - alles, was
   die Eintraege der Liste auszeichnet, fehlt hier.
   ========================================================================== */

/*
 * margin: 0 - den Abstand stellt .kk-strang > * (kk.css). Der eigene Wert
 * addierte sich darauf: erster Uebergang der Chronik 72 statt 48 px.
 * Spezifitaet 0,2,0 schlug Elkes 0,1,0. Befund Elke 23.09.2026.
 */
.kk-body .kk-bildarchiv {
	margin: 0;
	padding: 0 0 var(--kk-lg);
	border-bottom: 2px solid var(--kk-outline-var);
}

.kk-body .kk-bildarchiv__titel {
	display: flex;
	align-items: center;
	gap: var(--kk-xs);
	margin: 0 0 var(--kk-md);
	color: var(--kk-on-surface-var);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kk-body .kk-bildarchiv__liste {
	display: grid;
	gap: var(--kk-md);
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-body .kk-bildarchiv__eintrag {
	display: flex;
	flex-direction: column;
	gap: var(--kk-xs);
	margin: 0;
	list-style: none;
}

.kk-body .kk-bildarchiv__bild {
	overflow: hidden;
	border-radius: var(--kk-r);
	/*
	 * Festes Seitenverhaeltnis: die 16 Bilder haben sehr verschiedene
	 * Formate, und drei Karten nebeneinander mit unterschiedlich hohen
	 * Bildern lesen sich als Fehler.
	 */
	aspect-ratio: 3 / 2;
}

.kk-body .kk-bildarchiv__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kk-body .kk-bildarchiv__jahr {
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.kk-body .kk-bildarchiv__name {
	margin: 0;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body-md);
	font-weight: 600;
	line-height: 1.3;
}

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

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

/*
 * Auf dem Telefon bleibt es ein waagerechter Streifen - er wird gewischt,
 * nicht gestapelt. Gestapelt waere er drei weitere Eintraege vor der Liste
 * und damit genau das, was er nicht sein soll.
 */
@media (max-width: 767px) {

	.kk-body .kk-bildarchiv__liste {
		display: flex;
		gap: var(--kk-sm);
		overflow-x: auto;
		padding-bottom: var(--kk-xs);
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.kk-body .kk-bildarchiv__eintrag {
		flex: 0 0 11rem;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   5a Zeitleiste: linke Schiene statt alternierendem Zweispalter
   (22.09.2026)

   URSPRUNG, voll ausgelesen: WPCode-Snippet 11676 "KK Karnevalschronik - 5
   Frontend CSS und Filter-JS", Typ PHP, Ort "everywhere". Es reiht sein CSS
   ueber `wp_add_inline_style( 'kk-chronik-frontend', $css )` ein; im Dokument
   traegt es die Kennung `style#kk-chronik-frontend-inline-css`.

   Die Regeln, um die es geht, stehen dort in einer Media Query:

     .kk-jahr-marke{position:absolute;left:-33px;top:0;
                    transform:translateX(-50%);z-index:1;}
     @media (min-width:760px){
       .kk-zeitleiste::before{left:50%;transform:translateX(-1px);}
       .kk-ereignis{width:50%;padding:0 0 52px;}
       .kk-ereignis:nth-child(odd){margin-right:auto;padding-right:48px;}
       .kk-ereignis:nth-child(even){margin-left:auto;padding-left:48px;}
       .kk-ereignis:nth-child(odd)  .kk-jahr-marke{left:auto;right:-48px;
                                     transform:translateX(50%);}
       .kk-ereignis:nth-child(even) .kk-jahr-marke{left:-48px;
                                     transform:translateX(-50%);}
     }

   DAMIT IST DIE ERSTE DIAGNOSE WIDERLEGT: `left: 294px` ist kein
   Festwert und stammt nicht "aus der Zeit, als der Block die volle Breite
   hatte". Es ist der vom Browser BENUTZTE Wert, den er aus `right: -48px`
   errechnet; `transform: translateX(29px)` ist `translateX(50%)` bei 58 px
   Kastenbreite. Nichts daran ist veraltet.

   DER EIGENTLICHE FEHLER sind ZWEI Zeitleisten-Layouts uebereinander:

   - Das Snippet zeichnet ab 760 px einen ALTERNIERENDEN ZWEISPALTER:
     Mittelachse per `.kk-zeitleiste::before` (gemessen `left: 361px`),
     Ereignisse auf `width: 50%` (gemessen 349 px), Marken auf der
     Mittelachse.
   - Diese Datei zeichnet eine EINSPALTIGE LINKE Achse: `border-left` an
     `.kk-zeitleiste` plus den Punkt `.kk-ereignis::before`.

   Bei `.kk-karte-titel` gewinnt diese Datei (`.kk-body` = zwei Klassen gegen
   eine), bei `.kk-ereignis:nth-child(odd) .kk-jahr-marke` (drei Klassen)
   gewann das Snippet. Ergebnis, gemessen: die Marke steht 76 px rechts
   NEBEN ihrer Karte. Kein Vorfahr hat `overflow: hidden` - abgeschnitten
   wird nichts, die Zahl steht nur am falschen Platz.

   ABHILFE: nicht am Snippet, sondern mit Spezifitaet. Alle Regeln hier
   tragen `.kk-body` und erreichen damit mindestens vier Klassen - sie
   gewinnen unabhaengig von der Einreihungsreihenfolge, genau wie im
   Dateikopf beschrieben.

   Ein Festwert wird NICHT durch einen anderen ersetzt: `left`, `right`,
   `top` und `transform` werden zurueckgesetzt, und die Lage entsteht aus
   einem Raster.
   ========================================================================== */

/*
 * Die Mittelachse des Snippets faellt weg. Die Achse dieser Datei ist das
 * `border-left` an `.kk-zeitleiste` - zwei Achsen waeren eine zu viel.
 * Unter 760 px setzt das Snippet dasselbe `::before` als linke Achse bei
 * `left: 19px`; auch die faellt weg, sonst liegen dort zwei Linien.
 */
.kk-body .kk-zeitleiste::before {
	content: none;
}

/*
 * Schienenbreite, am Bestand erhoben (Oswald 700, `--kk-fs-md` bei 1280 px
 * = 1,375rem = 22 px, gemessen mit einem absolut positionierten
 * Vergleichselement, nicht ueber die Containerbreite - Messfalle Nr. 9):
 *
 *   "1823" 42,6 px · "1953" 42,8 px · "1888" 42,9 px · "2026" 46,6 px
 *   theoretischer Hoechstfall "0000" 48,4 px
 *
 * Alle 246 Marken sind genau vierstellig (246 von 246, 0 abweichende Werte),
 * und das Snippet liest `_kk_jahresanzeige` gar nicht - es gibt also keinen
 * Freitextfall, fuer den Reserve noetig waere. 3,25rem (52 px) traegt den
 * Hoechstfall mit 3,6 px Luft. Oswald hat keine tabellarischen Ziffern, die
 * Breite schwankt also um bis zu 6 px; die Zahl steht deshalb linksbuendig
 * an der Achse, wo sie hingehoert, und flattert nach rechts.
 */
.kk-body .kk-zeitleiste {
	--kk-schiene: 3.25rem;
}

/*
 * MARKUP, am Snippet UND am gerenderten DOM geprueft (22.09.2026):
 *
 *   <li class="kk-ereignis">
 *     <article class="kk-karte">
 *       <div class="kk-jahr-marke"><time datetime="2025">2025</time></div>
 *       <div class="kk-karte-inhalt"> ... </div>
 *     </article>
 *   </li>
 *
 * Die Marke ist also KEIN Geschwister von `.kk-karte`, sondern ihr KIND.
 * Genau deshalb hat das Snippet sie absolut positioniert - `.kk-karte` traegt
 * `position: relative`. Ein erster Versuch mit `grid-column: 1` an der Marke
 * blieb folgenlos: sie ist kein Rasterkind von `.kk-ereignis`. Gemessen lag
 * sie danach bei x 184 statt in der Schienenspalte 91-143.
 *
 * Deshalb zweistufig, ohne Markup anzufassen:
 * 1. `.kk-ereignis` wird das Raster und haelt die Schiene als leere erste
 *    Spalte frei; die Karte sitzt in Spalte 2.
 * 2. Die Marke bleibt absolut zur Karte, wird aber nach LINKS in die
 *    freigehaltene Spalte herausgesetzt - ueber Merkmalswerte, nicht ueber
 *    einen Festwert.
 *
 * Alle drei Selektoren aufgezaehlt, weil das Snippet die 50-%-Breite und die
 * wechselseitigen Polster ueber `:nth-child(odd)` und `(even)` setzt. Ohne
 * die beiden Varianten bliebe `padding-right: 48px` bzw. `padding-left`
 * stehen - gemessen war das `padding: 0px 48px 24px 0px`.
 */
.kk-body .kk-ereignis,
.kk-body .kk-ereignis:nth-child(odd),
.kk-body .kk-ereignis:nth-child(even) {
	position: relative;
	display: grid;
	grid-template-columns: var(--kk-schiene, 3.25rem) minmax(0, 1fr);
	column-gap: var(--kk-md);
	width: auto;
	margin: 0;
	padding: 0 0 var(--kk-lg);
}

.kk-body .kk-ereignis:last-child {
	padding-bottom: 0;
}

.kk-body .kk-ereignis > .kk-karte {
	grid-column: 2;
}

/*
 * Die Karte auf Hauspolster.
 *
 * ABWEICHUNG VON DER VORGABE, bitte pruefen: der Kartenumbau war nicht
 * beauftragt. Er ist aber die Voraussetzung dafuer, die Jahreszahl OHNE
 * Festwert an der ersten Textzeile auszurichten. Das Polster des Snippets
 * ist gemessen `22px 24px` - jede Rechnung damit waere wieder ein Festwert.
 * Mit `var(--kk-md)` steht auf beiden Seiten derselbe Merkmalswert, und die
 * Ausrichtung ist rechenbar statt abgelesen.
 *
 * Radius und Rand kommen ebenfalls auf Hauswerte; der Schatten des Snippets
 * bleibt, er ist unauffaellig und nicht Teil dieser Aufgabe.
 */
.kk-body .kk-ereignis > .kk-karte {
	padding: var(--kk-md);
	border-color: var(--kk-divider);
	border-radius: var(--kk-r);
}

/*
 * Die Marke sitzt in der freigehaltenen Spalte links neben der Karte.
 *
 * `left` ist aus Merkmalswerten gebildet: Schienenbreite plus Spaltenabstand,
 * negativ - also genau die Spalte, die `.kk-ereignis` freihaelt. `right` und
 * `transform` des Snippets werden zurueckgesetzt, `top` bekommt dasselbe
 * Polster wie die Karte, damit Zahl und erste Textzeile auf einer Linie
 * beginnen.
 */
.kk-body .kk-ereignis .kk-jahr-marke,
.kk-body .kk-ereignis:nth-child(odd) .kk-jahr-marke,
.kk-body .kk-ereignis:nth-child(even) .kk-jahr-marke {
	position: absolute;
	top: var(--kk-md);
	right: auto;
	bottom: auto;
	left: calc(-1 * (var(--kk-schiene, 3.25rem) + var(--kk-md)));
	z-index: 1;
	width: var(--kk-schiene, 3.25rem);
	transform: none;
	text-align: left;
}

/*
 * Die Marke bleibt TEXT und wird kein Abzeichen.
 *
 * Das Snippet macht aus dem inneren `time` einen Kreis: gemessen 58x58 px,
 * weisser Grund, 3 px Rand in rgb(191, 10, 48) - also #BF0A30, eine Farbe,
 * die in keinem Merkmalswert des Themes steht -, `border-radius: 999px` und
 * zwei Schatten. Bei 246 Eintraegen erhoeht jedes Abzeichen jede
 * Kartenhoehe, und die Schiene sagt "Zeitleiste" schon.
 *
 * `!important` nur auf den Eigenschaften, die das Snippet selbst mit
 * `!important` belegt (in seiner Query bis 759 px: `min-width`, `height`,
 * `font-size`, `padding`, `box-shadow`). Ohne das gewinnt dort das Snippet
 * trotz hoeherer Spezifitaet hier.
 */
.kk-body .kk-jahr-marke time {
	display: block;
	min-width: 0 !important;
	height: auto !important;
	padding: 0 !important;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
	color: var(--kk-primary);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-md) !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
}

/* ==========================================================================
   5b Zeitleiste auf kleinen Bildschirmen
   Unter 768 px faellt die Schiene weg: bei 313 px Zeilenbreite kostet eine
   Spalte von vier Ziffern zu viel. Die Jahreszahl steht dann UEBER der Karte,
   in derselben Schrift und Farbe.
   ========================================================================== */

@media (max-width: 767px) {

	.kk-body .kk-ereignis,
	.kk-body .kk-ereignis:nth-child(odd),
	.kk-body .kk-ereignis:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
	}

	.kk-body .kk-ereignis > .kk-karte {
		grid-column: 1;
	}

	/*
	 * Die Marke wird wieder ein normales Kind der Karte und steht damit ueber
	 * dem Karteninhalt - nicht daneben. Ein negatives `left` waere hier ein
	 * Ueberlauf aus dem Bild.
	 */
	.kk-body .kk-ereignis .kk-jahr-marke,
	.kk-body .kk-ereignis:nth-child(odd) .kk-jahr-marke,
	.kk-body .kk-ereignis:nth-child(even) .kk-jahr-marke {
		position: static;
		top: auto;
		left: auto;
		width: auto;
		margin-bottom: var(--kk-xs);
	}
}

.kk-body .kk-ereignis::before {
	content: "";
	position: absolute;
	/*
	 * `top` an der JAHRESZAHL ausgerichtet, nicht an der Kartenoberkante:
	 * die Zahl beginnt bei `var(--kk-md)` (Kartenpolster), ihre Zeile ist
	 * rund 29 px hoch, der Punkt ist 10 px hoch - seine Mitte gehoert auf die
	 * Mitte der Zahlzeile. Aus Merkmalswerten gebildet, nicht abgelesen;
	 * gemessen nachgehalten, siehe Akte.
	 */
	top: calc(var(--kk-md) + 0.6rem);
	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);
}

.kk-body .kk-karte-titel {
	margin: 0 0 var(--kk-xs);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-sm);
	font-weight: 600;
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-body .kk-karte-titel a,
.kk-body .kk-karte-link {
	color: inherit;
	text-decoration: none;
}

.kk-body .kk-karte-titel a:hover,
.kk-body .kk-karte-link:hover {
	color: var(--kk-primary);
}

.kk-body .kk-karte-vorspann,
.kk-body .kk-karte-text,
.kk-body .kk-karte-volltext {
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
}

.kk-body .kk-karte-bild img,
.kk-body .kk-foto img {
	border-radius: var(--kk-r);
}

.kk-body .kk-karte-quelle,
.kk-body .kk-quelle-optional {
	color: var(--kk-outline);
	font-size: var(--kk-fs-meta);
}

/*
 * KORREKTUR 22.09.2026: die Regel stand am `<details class="kk-mehr">`
 * selbst, nicht an seinem `<summary>`.
 *
 * `.kk-mehr` ist im Snippet (WPCode 11674:126) ein `<details>`, dessen
 * `<summary>` "Mehr erfahren" heisst und dessen zweites Kind der
 * Volltext ist. `display: inline-flex` am `<details>` legte damit
 * Aufklappmarke und Volltext in EINE Flex-Zeile und faerbte den ganzen
 * Volltext rot in Versalien, sobald er aufgeklappt war. Gemessen auf der
 * Testkopie: 92 `details.kk-mehr`, alle geschlossen - deshalb fiel es nicht
 * auf.
 *
 * Jetzt: das `<details>` ist ein normaler Block, nur das `<summary>` ist die
 * Hausschaltflaeche.
 */
.kk-body .kk-mehr {
	margin: var(--kk-sm) 0 0;
}

.kk-body .kk-mehr > summary,
.kk-body .kk-weitere-ereignisse > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--kk-xs);
	width: fit-content;
	padding: 0.3rem 0.8rem;
	background: var(--kk-lowest);
	border: 1px solid var(--kk-divider);
	border-radius: var(--kk-r-pill);
	color: var(--kk-primary);
	cursor: pointer;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	list-style: none;
	text-transform: uppercase;
}

/* Die Dreiecksmarke der Browser weicht stark ab; sie wird ersetzt. */
.kk-body .kk-mehr > summary::-webkit-details-marker,
.kk-body .kk-weitere-ereignisse > summary::-webkit-details-marker {
	display: none;
}

.kk-body .kk-mehr > summary::after,
.kk-body .kk-weitere-ereignisse > summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	rotate: 45deg;
	translate: 0 -0.1rem;
	transition: rotate 0.15s ease;
}

.kk-body .kk-mehr[open] > summary::after,
.kk-body .kk-weitere-ereignisse[open] > summary::after {
	rotate: -135deg;
	translate: 0 0.1rem;
}

.kk-body .kk-mehr > summary:hover,
.kk-body .kk-weitere-ereignisse > summary:hover {
	border-color: var(--kk-primary-container);
}

/*
 * `.kk-weitere-ereignisse` ist der Sammelbehaelter fuer alles jenseits der
 * Blockeinstellung `perPage`. Auf der Testkopie steht perPage auf 250, das
 * Element existiert dort also nicht (gemessen 0 Treffer). Die Regeln stehen
 * trotzdem, weil die Einstellung jederzeit gesenkt werden kann.
 */
.kk-body .kk-weitere-ereignisse {
	margin-top: var(--kk-lg);
}

.kk-body .kk-weitere-ereignisse > .kk-zeitleiste--weitere {
	margin-top: var(--kk-md);
}

/*
 * Die Filterleiste des Blocks in der Haussprache.
 *
 * Auf der Testkopie ueber das Blockattribut `showFilters: false`
 * abgeschaltet - gemessen `.kk-filterleiste` und `.kk-filter-pill` je
 * 0 Treffer. Die Regeln greifen, sobald die Einstellung umgelegt wird; das
 * ist eine Blockeinstellung, keine Codeaenderung.
 *
 * Bewusst dieselben Merkmalswerte wie `.kk-pille` (kk.css:3670) statt einer
 * eigenen Anmutung - die Leiste soll nicht erkennbar von woanders kommen.
 * Eine Trefferzahl wie bei `.kk-pille__zahl` ist nicht ableitbar: das Snippet
 * gibt in der Pille kein Zahlenelement aus. Siehe Akte, Abschnitt
 * Snippet-Eingriffe.
 */
.kk-body .kk-filterleiste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-xs);
	margin: var(--kk-md) 0 var(--kk-lg);
}

.kk-body .kk-filter-pill {
	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-body .kk-filter-pill:hover {
	border-color: var(--kk-primary-container);
	color: var(--kk-primary);
}

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

/* Galerien des Blocks als Raster statt als Bilderstapel. */
.kk-body .kk-galerie-grid {
	display: grid;
	gap: var(--kk-sm);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin: var(--kk-sm) 0 0;
}

.kk-body .kk-galerie-grid .kk-foto,
.kk-body .kk-karte-bild .kk-foto {
	margin: 0;
}

.kk-body .kk-foto figcaption {
	margin-top: var(--kk-xs);
	color: var(--kk-outline);
	font-size: var(--kk-fs-meta);
}

/*
 * HIER STAND das Haussymbol der mobilen Schnellzeile (rund 84 Zeilen,
 * entfernt am 23.09.2026 von Elke).
 *
 * Der Menuepunkt "Startseite" ist am 23.09.2026 aus der Schnellzeile
 * genommen worden - die Zeile fuehrt seither nur Rubriken, weil Haussymbol,
 * Termine und Kneipen 730 px tiefer dauerhaft in der Fusszeile stehen.
 * Damit trafen die Regeln (.kk-quicknav__home, ihre current-menu-item-
 * Daempfung und das Token --kk-haus) kein Element mehr.
 *
 * GEPRUEFT vor dem Entfernen: --kk-haus wurde ausschliesslich von diesen
 * Regeln benutzt, sonst nirgends in Theme, Snippets oder Elterntheme; die
 * Klasse kk-quicknav__home kommt aus dem WordPress-Menue und nicht aus
 * Theme-Code. Eine geschlossene Insel, es bricht nichts.
 *
 * WARUM NICHT AUFBEWAHRT: tote Regeln haben am 23.09.2026 schon einmal in
 * die Irre gefuehrt. Kehrt das Haus zurueck, ist die Regel in wenigen
 * Minuten wieder geschrieben.
 *
 * WAS AUFBEWAHRT WIRD, steht im Entscheidungsprotokoll und nicht hier, weil
 * es ein Grundsatz ist und keine Regel: Der farbstaerkste Chip einer
 * Navigationsflaeche darf nicht auf die Seite verweisen, auf der man bereits
 * steht.
 */

/*
 * Silbentrennung auf Fliesstext begrenzen.
 *
 * Das Plugin "silbentrennung" (silbentrennung.php:13) haengt
 * `body { hyphens: auto }` an das Block-Stylesheet - also global, auf
 * Ueberschriften, Tabellenzellen, Knopfbeschriftungen und Navigationstexte
 * gleichermassen. Auf /alle-karnevalsgesellschaften-a-z/ trennt das
 * Vereinsnamen mitten durch ("angeschlos-sene", "hospitie-rende"), weil die
 * Tabellenspalten schmal sind. Befund Elke 23.09.2026; die Quelle ist das
 * Plugin, nicht Snippet 11676 - dort ist die Trennung bereits sauber auf
 * .kk-karte-* begrenzt.
 *
 * Das Plugin bleibt aktiv (es ist 13 Zeilen und hat sonst keine Wirkung);
 * wir schalten die Trennung hier gezielt dort ab, wo sie schadet, und
 * lassen sie im Fliesstext stehen, wo sie der schmalen Spalte hilft.
 */
.kk-body :is(h1, h2, h3, h4, h5, h6),
.kk-body :is(th, td),
.kk-body :is(button, .kk-btn, .kk-chip, .kkk-btn),
.kk-body :is(nav, .kk-quicknav, .kk-tabbar, .kk-breadcrumb, .kk-nav) :is(a, span, li),
.kk-body .kk-card__title,
.kk-body .kk-widget__title,
.kk-body .kk-seitenkopf__titel {
	hyphens: manual;
	-webkit-hyphens: manual;
}

/*
 * Blocksatz zurueck auf linksbuendig.
 *
 * Snippet 11676 setzt `text-align: justify !important` auf
 * `.kk-karte-volltext p` und `.kk-karte-vorspann`, dazu `hyphens: auto`.
 * Gemessen bei 375 px (Textbreite 287 px) reisst der Blocksatz sichtbare
 * Wortluecken - bei 39 Zeichen je Zeile hat er zu wenig Material zum
 * Ausgleichen. Das Hausgewand ist durchgehend linksbuendig.
 *
 * `!important` nur, weil das Snippet es setzt. Die Silbentrennung BLEIBT:
 * sie hilft der schmalen Spalte und stoert den Flattersatz nicht.
 */
.kk-body .kk-karte-volltext,
.kk-body .kk-karte-volltext p,
.kk-body .kk-karte-vorspann {
	text-align: left !important;
}

/*
 * Zeilenlaenge des Volltexts.
 *
 * Erhoben am Bestand (Testkopie, 22.09.2026, 12 Absaetze, 41 Zeilenboxen
 * ueber Range-Rechtecke gemessen): Textbreite 429 px, Open Sans 14 px/22 px,
 * Median 61 Zeichen je Zeile, Hoechstwert 68.
 *
 * Der Strang war dort 1200 px breit, weil die Seite ueber page.php lief und
 * keine Begrenzung hatte. Mit `.kk-layout--mit-rand` wird er SCHMALER
 * (bei /termine/ gemessen 774 px), der Kartentext also enger - die Gefahr
 * liegt hier nicht bei zu langen, sondern bei zu KURZEN Zeilen.
 *
 * Gemessen nach dem Umbau: der Strang schrumpfte wie erwartet auf 774 px,
 * der Kartentext WUCHS aber von 429 auf 698 px - die Karte hatte im
 * Artikelgewand eine andere Rasteraufteilung. Ohne Grenze waeren das rund
 * 98 Zeichen je Zeile.
 *
 * Die Grenze ist eingemessen, nicht gesetzt: bei 544 px (34rem) lagen Median
 * 77 und Hoechstwert 86 Zeichen - der Hoechstwert also ueber dem Zielband.
 * Bei 31rem (496 px) passt beides hinein. Nachgemessen, siehe Akte.
 */
.kk-body .kk-karte-text {
	min-width: 0;
}

.kk-body .kk-karte-vorspann,
.kk-body .kk-karte-volltext > p,
.kk-body .kk-karte-volltext > ul,
.kk-body .kk-karte-volltext > ol {
	max-width: 31rem;
}

/*
 * Rendering-Bremse fuer die 246 Ereignisse.
 *
 * `content-visibility: auto` laesst den Browser Aufbau und Anstrich eines
 * Eintrags ueberspringen, solange er weit ausserhalb des Sichtfelds liegt.
 * Anders als `hidden` oder ein geschlossenes `<details>` bleibt der Inhalt
 * dabei fuer Strg+F, fuer Sprungmarken und fuer die Vorlesehilfe erreichbar -
 * der Browser rendert ihn bei Bedarf nach. Das ist die Bedingung, unter der
 * diese Massnahme hier ueberhaupt in Frage kommt: die Chronik hat kein
 * Weiterlesen-Ziel, es darf also nichts verborgen werden.
 *
 * `contain-intrinsic-size` gibt die geschaetzte Hoehe, solange nicht
 * gerendert wurde. Die Werte sind am Bestand ERHOBEN, nicht geschaetzt:
 * 246 Eintraege gemessen, MEDIAN je Kartentyp, nicht Mittelwert - der
 * Mittelwert (309 px) wird von 16 Bildkarten hochgezogen und traf keinen
 * einzigen der 230 Textkarten.
 *
 *   Textkarten (230): min 180, Median 270, max 401 px
 *   Bildkarten  (16): min 762, Median 811, max 904 px
 *   alle       (246): min 180, Median 277, Mittelwert 309, max 904 px
 *
 * Das Schluesselwort `auto` davor: sobald ein Eintrag einmal gerendert war,
 * merkt sich der Browser seine ECHTE Hoehe und benutzt die Schaetzung nicht
 * mehr. Die Schaetzung muss also nur beim ersten Aufbau grob stimmen.
 */
.kk-body .kk-ereignis {
	content-visibility: auto;
	contain-intrinsic-size: auto 277px;
}

.kk-body .kk-ereignis--nur-text {
	contain-intrinsic-size: auto 270px;
}

.kk-body .kk-ereignis--text-bild,
.kk-body .kk-ereignis--nur-bild {
	contain-intrinsic-size: auto 811px;
}

/*
 * Ausnahme fuer das Sprungziel: ein Eintrag, auf den die Adresse zeigt, wird
 * immer aufgebaut. Ohne das haengt die Hoehenschaetzung noch am Element,
 * waehrend der Browser dorthin springt, und das Ziel landet daneben.
 */
.kk-body .kk-ereignis:target {
	content-visibility: visible;
	contain-intrinsic-size: none;
}

/* ==========================================================================
   6 Karnevalslexikon – [kk_lexikon]
   Klassen aus der laufenden Testkopie übernommen.
   ========================================================================== */

.kk-body .kk-lex-intro {
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-lead);
	line-height: var(--kk-lh-lead);
}

.kk-body .kk-lex-tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-sm);
	align-items: center;
	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-body .kk-lex-az {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 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-body .kk-lex-az a,
.kk-body .kk-lex-az span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.85rem;
	height: 1.85rem;
	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-decoration: none;
	text-transform: uppercase;
}

.kk-body .kk-lex-az a:hover {
	background: var(--kk-low);
	color: var(--kk-primary);
}

.kk-body .kk-lex-az-inaktiv {
	color: var(--kk-outline-var);
}

.kk-body .kk-lex-gruppe {
	margin-bottom: var(--kk-lg);
}

.kk-body .kk-lex-buchstabe {
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	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-family: var(--kk-font-head);
	font-size: var(--kk-fs-lg);
	font-weight: 700;
	line-height: var(--kk-lh-lg);
	text-transform: uppercase;
}

.kk-body .kk-lex-eintrag {
	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);
}

.kk-body .kk-lex-eintrag + .kk-lex-eintrag {
	margin-top: var(--kk-sm);
}

.kk-body .kk-lex-begriff {
	margin: 0 0 var(--kk-xs);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-sm);
	font-weight: 600;
	line-height: var(--kk-lh-sm);
	text-transform: uppercase;
}

.kk-body .kk-lex-synonym {
	color: var(--kk-outline);
	font-size: var(--kk-fs-meta);
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kk-body .kk-lex-def {
	margin: 0;
	color: var(--kk-charcoal);
	font-size: var(--kk-fs-body);
	line-height: var(--kk-lh-body);
}

.kk-body .kk-lex-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.5rem;
	background: var(--kk-navy);
	border-radius: var(--kk-r);
	color: #fff;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kk-body .kk-lex-verwandte,
.kk-body .kk-lex-mehr {
	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;
}

/* ==========================================================================
   7 Kleine Bildschirme
   ========================================================================== */

@media (max-width: 640px) {
	.kk-body .kk-termine-liste .kk-termin-item {
		gap: var(--kk-sm);
		padding: var(--kk-sm);
	}

	.kk-body .kk-termin-datum {
		flex-basis: 3rem;
		width: 3rem;
	}

	.kk-body .kk-termin-tag {
		font-size: 1.25rem;
	}

	.kk-body .kk-kuenstler-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--kk-sm);
	}

	.kk-body .kk-kuenstler-name {
		font-size: var(--kk-fs-body);
	}

	/* Filterreihen laufen seitlich, statt umzubrechen und Höhe zu fressen. */
	.kk-body .kk-termine-filter,
	.kk-body .kk-filter-reihe,
	.kk-body .kkk-filter-chips,
	.kk-body .kk-lex-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: var(--kk-xs);
		scrollbar-width: none;
	}

	.kk-body .kk-termine-filter::-webkit-scrollbar,
	.kk-body .kk-filter-reihe::-webkit-scrollbar,
	.kk-body .kkk-filter-chips::-webkit-scrollbar,
	.kk-body .kk-lex-filter::-webkit-scrollbar {
		display: none;
	}
}

/* ==========================================================================
   8 Gegen das Eltern-Theme
   ==========================================================================
   MoreNews Pro schreibt seine Grundtypografie mit `body.aft-default-mode …`
   in den Seitenkopf. Das sind 1 Klasse + 1 Typ (Spezifität 102) bzw. mit
   `p:not(.site-title) a` sogar 103 – mehr als die schlichten Element-Regeln
   dieses Themes. Auf der Testkopie ließ sich das messen:
   Artikel-Links erschienen in MoreNews-Blau (#1665CF) statt in Karminrot,
   und der weiße Künstlername auf dem Bildverlauf wurde dunkelgrau.
   Die folgenden Regeln stellen die Werte des Entwurfs wieder her. Sie sind
   bewusst hier und nicht in kk.css: Es geht um fremdes CSS, nicht um das
   eigene Grundgerüst.
   ========================================================================== */

.kk-body .kk-prosa a {
	color: var(--kk-primary);
}

.kk-body .kk-prosa a:hover,
.kk-body .kk-prosa a:focus-visible {
	color: var(--kk-carmine-deep);
}

.kk-body .kk-prosa h2,
.kk-body .kk-prosa h3,
.kk-body .kk-prosa h4 {
	color: var(--kk-on-surface);
}

/* Helle Schrift auf dunklem Grund darf nicht eingefärbt werden. */
.kk-body .kk-kuenstler__name,
.kk-body .kk-kuenstler__name a,
.kk-body .kk-card--lead .kk-card__title,
.kk-body .kk-card--lead .kk-card__title a,
.kk-body .kk-livebar__titel,
.kk-body .kk-livebar__titel a,
.kk-body .kk-countdown__titel,
/*
 * NUR die dunkle Fassung. Die helle Variante .kk-brief--schlicht hat in
 * kk.css eine eigene Regel (--kk-primary); die hatte dieselbe Spezifitaet
 * und verlor gegen diese Datei, weil sie spaeter laedt -> Titel und Symbol
 * der Jecken-Post-Box standen weiss auf weiss (Kontrast 1.00) auf allen
 * Artikel- und Kuenstlerseiten. Befund Elke 22.09.2026.
 */
.kk-body .kk-brief:not(.kk-brief--schlicht) .kk-brief__titel {
	color: #fff;
}

.kk-body .kk-dunkelbox__titel,
.kk-body .kk-footer__titel {
	color: var(--kk-gold);
}

/*
 * Weiss statt --kk-carmine-bright. Auf #1a1a1a ergab das Rot 3.78 und lag
 * damit unter AA - ausgerechnet der Markenname. Elke hat nachgerechnet:
 * bei Farbton 355,5 Grad erreicht KEIN Rot 4.5 auf diesem Grund, ohne
 * neonfarben zu werden (#ff1f2f = 4.55). Weiss ergibt 17.4 und ordnet den
 * Fussbereich sauber: Wortmarke am hellsten, Spaltentitel in Gold darunter.
 * Befund Elke 23.09.2026.
 */
.kk-body .kk-footer__titel--marke {
	color: #fff;
}

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

/* Kartentitel im Hellen: eigener Wert, nicht der des Eltern-Themes. */
.kk-body .kk-card__title,
.kk-body .kk-card__title a,
.kk-body .kk-rank__title,
.kk-body .kk-rank__title a,
.kk-body .kk-chronik__titel,
.kk-body .kk-chronik__titel a {
	color: var(--kk-on-surface);
}

.kk-body .kk-card:hover .kk-card__title a,
.kk-body .kk-rank__title a:hover,
.kk-body .kk-chronik__titel a:hover {
	color: var(--kk-primary);
}

.kk-body .kk-sectionhead__title,
.kk-body .kk-widget__title {
	color: var(--kk-primary);
}

/* ==========================================================================
   Newsletter-Plugin (tnp) in der Randspalte
   ==========================================================================

   Fremdmarkup, deshalb hier und nicht in kk.css (Beanstandung 8.3).

   Das Plugin gibt sein Formular als `.tnp.tnp-subscription` mit
   `.tnp-field.tnp-field-email` und `.tnp-field.tnp-field-button` aus. In der
   Randspalte stehen Feld und Knopf nebeneinander; das Etikett des Plugins
   wird ausgeblendet, weil direkt darüber das eigene `<label>` steht
   (.kk-brief__etikett) - zwei Etiketten für ein Feld wären eine Dopplung.

   Feldhöhe mindestens 44 px (SC 2.5.8). Die Angabe steht auf `input` UND auf
   `.tnp-submit`, damit beide Trefferflächen gleich hoch sind.

   Die Auswahl ist eng auf `.kk-brief` begrenzt: dieselben Klassen erscheinen
   auf der Newsletter-Seite selbst, dort soll sich nichts ändern.
   ========================================================================== */

.kk-body .kk-brief .tnp,
.kk-body .kk-brief .tnp-subscription,
.kk-body .kk-brief form {
	margin: 0;
	max-width: none;
}

.kk-body .kk-brief .tnp-subscription form {
	display: flex;
	gap: var(--kk-xs);
	align-items: stretch;
}

/* Etikett des Plugins weg - das eigene steht darüber. */
.kk-body .kk-brief .tnp-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kk-body .kk-brief .tnp-field-email {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.kk-body .kk-brief .tnp-field-button {
	flex: 0 0 auto;
	margin: 0;
}

.kk-body .kk-brief .tnp-field input[type="email"],
.kk-body .kk-brief .tnp-field input[type="text"] {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--kk-sm);
	background: var(--kk-lowest);
	border: 1px solid var(--kk-outline);
	border-radius: var(--kk-r);
	color: var(--kk-on-surface);
	font-family: var(--kk-font-body);
	font-size: var(--kk-fs-body-md);
}

/*
 * Der Knopf bekommt die Zweit-Variante, nicht Gold: Gold ist auf dieser Seite
 * der Ton der grossen Werbeflaechen.
 */
.kk-body .kk-brief .tnp-submit,
.kk-body .kk-brief input[type="submit"] {
	min-height: 44px;
	padding: 0 0.75rem;
	background: var(--kk-lowest);
	border: 1.5px solid var(--kk-navy-deep);
	border-radius: var(--kk-r);
	color: var(--kk-navy-deep);
	cursor: pointer;
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-body-md);
	font-weight: 600;
	text-transform: uppercase;
	width: auto;
}

.kk-body .kk-brief .tnp-submit:hover,
.kk-body .kk-brief input[type="submit"]:hover {
	background: var(--kk-low);
}

/* Datenschutzhinweis des Plugins: kleiner, aber nicht weg. */
.kk-body .kk-brief .tnp-field-privacy {
	margin: var(--kk-xs) 0 0;
	flex-basis: 100%;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-meta);
}

/* ==========================================================================
   Monatszäsur in der Terminliste
   ==========================================================================

   NOCH NICHT WIRKSAM. Diese Regeln greifen erst, wenn das Snippet
   [kk_termine_liste] an der ERSTEN Zeile jedes Monats das Merkmal
   `data-kk-monatswechsel="Januar 2027"` ausgibt (ausgeschriebener Monat plus
   Jahr). Bis dahin sind sie wirkungslos und schaden nicht – der Selektor
   trifft nichts.

   Warum ein Merkmal nur an der ersten Zeile: CSS kann keinen Gruppenwechsel
   erkennen. Ein Monatsmerkmal an JEDER Zeile genügt nicht; `.kk-termin-monat`
   steht gemessen 127 Mal in 127 Zeilen und taugt deshalb nicht als Zäsur.

   Warum NICHT klebend: auf der Seite kleben schon 7 Elemente, darunter
   HEADER.kk-header mit 162 px. Eine zweite klebende Ebene fräße auf einem
   900-px-Fenster ein Fünftel des Bildschirms. Ausserdem trägt jede der 127
   Zeilen ihren Monat selbst – die Orientierung beim Wiederfinden ist gelöst,
   die Zäsur teilt nur 75 gleichförmige Januarzeilen in Sinnabschnitte.

   EINSCHRÄNKUNG, die im Bericht steht und nicht als erledigt gelten darf:
   eine über ::before erzeugte Marke ist sichtbar und wird von heutigen
   Screenreadern vorgelesen, ist aber KEINE Überschrift und damit nicht per
   Überschriftennavigation erreichbar. Es geht keine Information verloren
   (jede Zeile nennt ihren Monat), es fehlt ein Sprungziel. Für echte
   Überschriften müsste das Snippet ein Element ausgeben.
   ========================================================================== */

/*
 * Variante (a): die Marke sitzt absolut im oberen Außenabstand.
 *
 * `.kk-termin-item` ist gemessen `display: flex`. Ein statisches ::before
 * würde damit zum FLEX-ELEMENT und landete links neben dem Datumsklotz –
 * nicht über der Zeile. Absolut positioniert ist es aus dem Flexfluss heraus
 * und lässt das Zeilenlayout unberührt (gemessene Zeilenbreite bleibt
 * 686 px bei einem Strang von 736 px).
 */
/*
 * DIE FALLE DIESER LOESUNG, und der Grund fuer die Verschachtelung:
 *
 * Der obere Abstand haengt an DERSELBEN Bedingung wie die Marke. Haengte er
 * pauschal an `li[data-kk-monatswechsel]`, riss der gefilterte Zustand fuenf
 * leere Streifen von je var(--kk-lg) in die Liste – Abstand fuer eine Marke,
 * die dort nicht steht.
 *
 * `.is-gefiltert` setzt das Snippet am Container, sobald ein anderer Filter
 * als "Alle" aktiv ist. Traegt der Container die Klasse, entfallen ALLE
 * Marken – ein bewusster Zustand statt lueckenhafter Gliederung. Es geht
 * dabei keine Information verloren: jede der 127 Zeilen nennt ihren Monat
 * selbst (.kk-termin-monat, 127 von 127 Treffern).
 *
 * Heute ist das genau Weg 1 (alle 127 Zeilen tragen
 * data-kk-kategorie="sonstiges", die Klasse greift praktisch nie, und wo sie
 * greifen wuerde, ist die Liste leer). Sobald die Kategorien echte Werte
 * tragen, wird daraus ohne weiteren Eingriff Weg 2.
 */
.kk-body .kk-prosa .kk-termine-liste:not(.is-gefiltert) .kk-termin-item[data-kk-monatswechsel] {
	position: relative;
	margin-top: var(--kk-lg);
}

/*
 * An der ersten Zeile der Liste kein oberer Abstand – sonst reißt es
 * unter dem Seitenkopf ein Loch.
 */
.kk-body .kk-prosa .kk-termine-liste:not(.is-gefiltert) .kk-termin-item[data-kk-monatswechsel]:first-child {
	margin-top: 0;
}

.kk-body .kk-prosa .kk-termine-liste:not(.is-gefiltert) .kk-termin-item[data-kk-monatswechsel]::before {
	content: attr(data-kk-monatswechsel);
	position: absolute;
	/*
	 * Asymmetrisch: var(--kk-lg) darüber, var(--kk-sm) darunter. Die Zäsur
	 * gehört zu dem, was folgt, nicht zu dem, was endet.
	 */
	top: calc(-1 * var(--kk-lg) + var(--kk-sm) * 0.5);
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: var(--kk-sm);
	color: var(--kk-navy);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * ABWEICHUNG VON DER VORGABE, bitte prüfen:
 *
 * Verlangt war die Haarlinie RECHTS NEBEN der Marke bis zur Zeilenkante. Das
 * braucht zwei Kästen – Text und Linie – und wir haben an dieser Zeile nur
 * ein Pseudoelement frei. `::after` bleibt bewusst unangetastet: das ist
 * Fremdmarkup, und was das Snippet morgen anhängt, wissen wir nicht. Ein
 * Verlauf als Ersatz kann die Linie nicht erst nach dem Text beginnen
 * lassen, ohne die Textlänge zu kennen.
 *
 * Deshalb: Text links, Haarlinie UNTER der ganzen Breite. Das liest als
 * Datumslinie und erfüllt denselben Zweck – die Zäsur ist eine Kante, an der
 * das Auge einhakt. Wenn die Linie rechts daneben stehen soll, braucht das
 * Snippet ein eigenes Element für die Marke; das ist dann kein Merkmal mehr,
 * sondern Markup, und damit der größere Schritt.
 *
 * Bewusst --kk-outline-var und NICHT --kk-primary: Rot konkurrierte mit dem
 * 4-px-Balken der Zeilen. Dieselbe Abwägung wie bei der Abschlusslinie des
 * Aufmacherbands.
 *
 * Das Polster von 16 px setzt die linke Kante auf die Achse des
 * Datumsklotzes (Zeilenpolster gemessen 16 px, Klotzbreite 60 px) – so liest
 * die Marke als Beschriftung der Datumsspalte und nicht als freischwebender
 * Text.
 */
.kk-body .kk-prosa .kk-termine-liste:not(.is-gefiltert) .kk-termin-item[data-kk-monatswechsel]::before {
	padding: 0 0 var(--kk-xs) 16px;
	border-bottom: 1px solid var(--kk-outline-var);
}

@media (max-width: 767px) {
	/*
	 * Eine Stufe kleiner, engerer oberer Abstand. Der Monat bleibt
	 * ausgeschrieben – er ist kurz genug, und auf dem Telefon ist die Zäsur
	 * wichtiger als auf dem Schreibtisch, weil dort nur zwei bis drei Zeilen
	 * gleichzeitig zu sehen sind. Zeilen dort gemessen 328 px.
	 */
	.kk-body .kk-prosa .kk-termine-liste:not(.is-gefiltert) .kk-termin-item[data-kk-monatswechsel] {
		margin-top: var(--kk-md);
	}

	.kk-body .kk-prosa .kk-termine-liste:not(.is-gefiltert) .kk-termin-item[data-kk-monatswechsel]::before {
		top: calc(-1 * var(--kk-md) + var(--kk-xs));
		font-size: var(--kk-fs-meta);
		letter-spacing: 0.06em;
		padding-left: 12px;
	}
}

/* ==========================================================================
   Landemarkierung im Chronik-Zeitstrahl
   ==========================================================================

   Snippet 11674 gibt seit 22.09.2026 je Ereignis eine Kennung `kk-e-<slug>`
   aus (246 von 246). Die Chronikkacheln der Startseite und der Zeitstrahl der
   Einzelseiten springen darauf.

   Warum eine eigene Markierung: gemessen trug das Sprungziel nur eine
   `outline-width: 3px` bei `background-color: rgba(0,0,0,0)` — das ist der
   allgemeine Fokusring des Themes, keine Ankermarkierung. Ein Fokusring sagt
   „hier ist die Tastatur", nicht „hier bist du angekommen", und er
   verschwindet beim nächsten Klick. Wer aus einer Kachel in eine Liste von
   246 Einträgen springt, braucht eine Ortsangabe.

   Sie bleibt liegen, solange die Adresse die Kennung trägt. Das ist gewollt:
   eine Ortsangabe, kein Hinweis, der wegblinkt. Kein Aufblinken, keine
   Einblendung, keine Vergrößerung — dieselbe Zurückhaltung wie bei
   .kk-chronik__eintrag--hier, an dem sich diese Regel ausrichtet.
   ========================================================================== */

/*
 * Getönter Grund, sonst nichts an der Geometrie.
 *
 * Bewusst OHNE `padding`/`margin`/`border-left` am Block selbst: `.kk-ereignis`
 * trägt ein `::before` als Punkt der Zeitleiste, und das ist über `left`
 * relativ zur Polsterkante des Blocks gesetzt. Jede Änderung an Polster oder
 * Außenabstand verschiebt damit auch den Punkt aus der Zeitleistenachse. Das
 * war der Fehler meines ersten Entwurfs.
 */
.kk-body .kk-ereignis:target {
	background: var(--kk-low);
	border-radius: 0 var(--kk-r) var(--kk-r) 0;
}

/*
 * Der Balken entsteht AUS der Standardmarke, nicht neben ihr: derselbe Punkt
 * wird zum Strich über die ganze Höhe des Eintrags. Dadurch bleibt er auf der
 * Zeitleistenachse, es kommt kein Element hinzu, und es verschiebt sich
 * nichts. Gleiche Zurückhaltung wie bei .kk-chronik__eintrag--hier: Balken
 * statt Punkt, kein zusätzlicher Rahmen, keine Vergrößerung.
 */
.kk-body .kk-ereignis:target::before {
	top: 0;
	width: 3px;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: var(--kk-primary);
}

/*
 * :target UND :focus-visible gleichzeitig: der Fokusring darf nicht
 * verschwinden und der Balken ihn nicht verdecken. Der Ring liegt über
 * `outline-offset` außerhalb des Balkens, statt auf ihm.
 */
.kk-body .kk-ereignis:target:focus-visible {
	outline: 3px solid var(--kk-primary-container);
	outline-offset: 3px;
}

/* ==========================================================================
   9 Eigenes Markup des Themes (Kickerzeile, Randkästen)
   ==========================================================================
   WARUM HIER UND NICHT IN kk.css: kk.css gehört der Gestaltung und wird dort
   gepflegt. Diese Regeln gehören zu Markup, das am 23.09.2026 in der
   Umsetzung entstanden ist (inc/template-tags.php, inc/randkaesten.php).
   Sie stehen deshalb getrennt, bis die Gestaltung sie übernimmt oder ersetzt.

   Die Messregel des Dateikopfs gilt hier NICHT im selben Sinn: die folgenden
   Klassen sind neu, es gibt zu keiner von ihnen eine konkurrierende Regel in
   kk.css oder in einem Snippet (geprüft 23.09.2026, je 0 Treffer für
   kk-kicker, kk-gattung, kk-randliste). Deshalb auch kein zusätzliches
   `.kk-body` — es gibt nichts zu überstimmen.
   ========================================================================== */

/* -- Kickerzeile: Rubrik (Verweis) · Gattung (kein Verweis) --------------- */

.kk-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kk-xs);
	margin: 0;
}

.kk-kicker__punkt {
	color: var(--kk-outline);
	font-family: var(--kk-font-head);
	font-size: var(--kk-fs-caps);
	line-height: 1;
}

/*
 * FEHLER, behoben 23.09.2026 (Elke): blaue Schrift auf den Rubrikplaketten.
 *
 * BELEGT, gemessen an der Testkopie mit tools/rahmenfenster-messen.js bei
 * 390 px, Verwaltungsbalken ausgeblendet, Rollleiste unterdrueckt. Alle
 * sichtbaren <a> der Startseite mit errechneter Farbe rgb(22,101,207):
 *
 *   .kk-chip--rot   in p.kk-kicker    1 x   #1665cf auf #94000b   1,68:1
 *   .kk-chip--navy  in p.kk-kicker   12 x   #1665cf auf #003870   2,11:1
 *   .kk-chip--text  in p.kk-kicker    4 x   #1665cf auf #ffffff   5,53:1
 *
 * Dreizehn davon verfehlen WCAG 2.2 SC 1.4.3 (AA, 4,5:1) - 12 px Oswald in
 * Versalien ist kein Grosstext. Der vierte Fall besteht den Kontrast, zeigt
 * aber Fremdblau statt Haus-Rot.
 *
 * URSACHE, nachgewiesen ueber document.styleSheets: das Elterntheme setzt in
 * einem eingebetteten Stylesheet
 *
 *   body.aft-default-mode p:not(.site-title) a { color: #1665cf }
 *
 * Spezifitaet (0,2,3). Die Farbregeln der Plaketten in kk.css stehen an
 * `.kk-chip--navy` (0,1,0) und verlieren.
 *
 * WARUM ES ERST JETZT AUFTRAT: die Plaketten lagen bisher in einem <div>
 * (.kk-card__chips). Die Kickerzeile vom 23.09.2026 setzt sie in ein <p> -
 * damit greift die Theme-Regel, die es vorher nicht traf. Es ist also kein
 * alter Mangel, sondern eine Nebenwirkung des neuen Markups.
 *
 * DIE BEHEBUNG steht hier und nicht in kk.css, weil sie nichts gestaltet,
 * sondern eine Fremdregel zurueckstellt - dafuer ist diese Datei da. Die
 * Werte sind woertlich die aus kk.css; wird dort eine Plakettenfarbe
 * geaendert, muss sie hier mitgeaendert werden. Deshalb nur die Varianten,
 * die in einer Kickerzeile ueberhaupt vorkommen koennen, und keine
 * !important-Deklaration: `.kk-body .kk-kicker a.kk-chip--navy` ist (0,3,1)
 * und schlaegt (0,2,3) ueber die Zahl der Klassen.
 *
 * NICHT GEPRUEFT: ob dieselbe Theme-Regel weitere Verweise in <p> faerbt,
 * die keine Plakette sind (Fliesstextverweise sollen blau bleiben duerfen -
 * das ist eine Gestaltungsfrage, kein Fehler). Gemessen wurde die
 * Startseite; andere Vorlagen wurden nicht durchgezaehlt.
 */
.kk-body .kk-kicker a.kk-chip--rot,
.kk-body .kk-kicker a.kk-chip--navy {
	color: #fff;
}

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

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

.kk-body .kk-kicker a.kk-chip--gold {
	color: #4a3a05;
}

.kk-body .kk-kicker a.kk-chip--dunkel {
	color: var(--kk-gold);
}

.kk-body .kk-kicker a.kk-chip--hell {
	color: var(--kk-on-surface-var);
}

.kk-body .kk-kicker a.kk-chip--hell:hover,
.kk-body .kk-kicker a.kk-chip--text {
	color: var(--kk-primary);
}

.kk-body .kk-kicker a.kk-chip--text:hover {
	color: var(--kk-carmine-deep);
}

/*
 * Gleiche Hoehe fuer beide Teile der Zeile.
 *
 * BELEGT (dieselbe Messung): Rubrikplakette 24,0 px, Gattungsplakette
 * 23,0 px. Die 24 kommen aus `a.kk-chip { min-height: 24px }` in kk.css -
 * einer Regel zur Zielgroesse nach SC 2.5.8, die bewusst nur <a> und
 * <button> trifft. Die Gattung ist ein <span> und bleibt bei 23.
 *
 * Fuer die Zielgroesse ist das richtig und bleibt so. Fuer das Auge steht
 * damit neben jeder Rubrik eine um 1 px niedrigere Nachbarplakette, deren
 * Unterkante nicht mitfluchtet - 17 mal auf der Startseite.
 *
 * `min-height` und NICHT `align-self: stretch`, und das ist nachgemessen:
 * mit `stretch` wuchs die Gattung auf 37,2 bzw. 39,2 px mit, sobald eine
 * lange Rubrik ("Geschichte des Karnevals") in einer schmalen Spalte
 * umbricht - ein hoher leerer Kasten um ein einzelnes Wort. Mit
 * `min-height` bleibt sie bei 24 px und steht ueber `align-items: center`
 * der Kickerzeile mittig neben der zweizeiligen Rubrik.
 *
 * Bei 390 px tritt dieser Umbruch auf der Startseite nicht auf: gemessen
 * 23.09.2026 in einem frischen Rahmen nach vollstaendigem Durchrollen sind
 * alle 17 Kickerzeilen einzeilig und 24 px hoch, die laengste Paarung
 * ("Kolumne · Kommentar & Meinung") eingeschlossen. Die Regel greift also
 * fuer schmalere Spalten und laengere Rubriknamen, nicht fuer den heutigen
 * Bestand der Startseite.
 */
.kk-kicker .kk-gattung {
	min-height: 24px;
}

/*
 * Der Trennpunkt entfällt, wo beide Teile eigene Flächen haben.
 *
 * In .kk-card__chips liegt die Zeile über dem Bild, in .kk-chips steht sie
 * neben weiteren Plaketten. Dort trennen die Flächen der Chips bereits
 * sichtbar; ein Punkt dazwischen schwebte auf dem Foto und wäre je nach Motiv
 * gar nicht zu sehen. Er bleibt im Markup (aria-hidden, also ohnehin stumm)
 * und wird nur nicht gezeigt — wer ihn zurückholen will, braucht eine Regel,
 * keinen Eingriff in PHP.
 */
.kk-card__chips .kk-kicker__punkt,
.kk-chips .kk-kicker__punkt {
	display: none;
}

/*
 * Die Gattung. Weißer Grund, Haus-Rot als Rand und Schrift — die Form der
 * bisherigen Plakette aus Snippet 12429/12430, aber in #94000b statt in
 * #e81710: seit 23.09.2026 hat das Portal genau EIN Rot (kk.css, --kk-primary).
 * Kontrast gemessen gegen Weiß: 10,4:1, also über AA (4,5) und über AAA (7).
 *
 * Kein `a`, also keine Zielgröße nach SC 2.5.8 — die Plakette ist Auszeichnung,
 * kein Bedienelement. Dieselbe Begründung steht in kk.css an `a.kk-chip`.
 */
.kk-gattung {
	background: var(--kk-lowest);
	border: 1px solid var(--kk-primary);
	color: var(--kk-primary);
}

/*
 * Umgekehrt für die beiden Gattungen, die einen Hinweissatz tragen: Meinung
 * und Pressemitteilung sind die zwei Fälle, in denen die Einordnung nicht
 * Beiwerk ist, sondern zur Aussage gehört. Weiß auf Haus-Rot, 10,4:1.
 */
.kk-gattung--kommentar-meinung,
.kk-gattung--pressemitteilung {
	background: var(--kk-primary);
	border-color: var(--kk-primary);
	color: var(--kk-on-primary);
}

/*
 * ÜBER DEM FOTO: die Gattung tritt zurück (Elke, 23.09.2026).
 *
 * BEFUND, gesehen und gemessen an der Testkopie bei 390 px: Im
 * .kk-card__chips liegt die Kickerzeile auf dem Bild. Dort stehen zwei
 * Plaketten nebeneinander — die Rubrik als gefüllte Fläche in Haus-Rot oder
 * Navy, die Gattung als WEISSER Kasten. Auf einem Foto ist Weiß die
 * lauteste Fläche, die es gibt; die Gattung schreit damit die Rubrik nieder.
 *
 * Das ist die Hierarchie verkehrt herum, und zwar in beiden Richtungen: die
 * Gattung ist die nachrangige Angabe UND der einzige Teil der Zeile, der
 * kein Ziel ist (sie ist ein `span`, siehe kk_kicker()). Die Rubrik ist der
 * Verweis. Im Kartenkörper stimmt die Abstufung — dort ist die Rubrik roter
 * Text ohne Fläche und die Gattung ein zurückhaltender Umriss. Nur auf dem
 * Bild kippt sie.
 *
 * KEIN weißer Umriss auf durchsichtigem Grund, und das ist der Punkt, an dem
 * die naheliegende Lösung durchfällt: Die Plaketten sitzen am OBEREN
 * Bildrand, und .kk-card__scrim läuft von unten nach oben auf `transparent`
 * aus — oben liegt also kein Schleier. Weiße Zeichnung stünde dort
 * ungeschützt auf dem Motiv, bei hellen Fotos unlesbar.
 *
 * Deshalb das durchscheinende Dunkelfeld aus --kk-chip--dunkel, mit weißer
 * Schrift statt Gold. Es ist rechnerisch sicher, unabhängig vom Motiv:
 *
 *   Grund 80 % #0d0d0e über weißem Bild  -> wirksam ~#3d3d3e -> 10,4:1
 *   Grund 80 % #0d0d0e über schwarzem    -> wirksam ~#0d0d0e -> 19,9:1
 *
 * Also über JEDEM Motiv über 10:1 und damit über AAA. Der Rand bleibt als
 * Haarlinie in Weiß mit 45 % Deckung: er löst die Plakette vom Bild, ohne
 * eine zweite helle Fläche zu setzen.
 *
 * DIE ZWEI GATTUNGEN MIT HINWEISSATZ sind mitgenommen, und das ist eine
 * eigene Entscheidung: Meinung und Pressemitteilung stehen sonst in
 * gefülltem --kk-primary — demselben Rot, das auf der Leadkarte die
 * Rubrikplakette trägt (.kk-chip--rot). Zwei identisch rote Plaketten
 * nebeneinander sind nicht zwei Angaben, sondern eine breite rote Fläche.
 * Der Hinweissatz selbst ist davon unberührt; er steht auf der
 * Beitragsseite (.kk-gattung-hinweis), nicht im Teaser.
 *
 * NICHT GEPRÜFT: wie sich das über einem sehr dunklen Motiv mit hellem
 * Fleck genau am Ort der Plakette liest. Die Rechnung deckt die Extremfälle
 * ab, angesehen wurde ein Motiv.
 */
.kk-card__chips .kk-gattung {
	background: rgb(13 13 14 / 80%);
	border-color: rgb(255 255 255 / 45%);
	color: #fff;
}

/*
 * Der Hinweissatz unter dem Titel der Einzelseite. Kursiv und eine Stufe
 * kleiner als der Fließtext, aber NICHT grau-auf-grau: #5c403c auf Weiß ergibt
 * 8,9:1. Ein Hinweis, der die Zuordnung eines Textes klärt, darf nicht
 * schlechter lesbar sein als der Text.
 */
.kk-gattung-hinweis {
	margin: var(--kk-sm) 0 0;
	color: var(--kk-on-surface-var);
	font-size: var(--kk-fs-body-md);
	font-style: italic;
	line-height: var(--kk-lh-body-md);
}

/* -- Randkasten mit einer Liste von Einstiegen --------------------------- */

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

.kk-randliste__eintrag + .kk-randliste__eintrag {
	border-top: 1px solid var(--kk-divider);
}

/*
 * Zielgröße ohne min-height: 0,5rem + 0,5rem Polsterung plus 0,875rem x 1,57
 * Zeilenhöhe ergeben rund 38 px. SC 2.5.8 verlangt 24 px; die Zeile liegt
 * darüber, ohne dass die Liste unnötig hoch wird.
 */
.kk-randliste__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-sm);
	padding: var(--kk-sm) 0;
	color: var(--kk-on-surface);
	font-size: var(--kk-fs-body-md);
	line-height: var(--kk-lh-body-md);
	text-decoration: none;
}

.kk-randliste__link:hover,
.kk-randliste__link:focus-visible {
	color: var(--kk-primary);
	text-decoration: underline;
}