/*
Theme Name: Die Stuttgarter Comictage
Theme URI: https://stuttgarter-comictage.de
Description: Child-Theme von Twenty Twenty-Five für die Stuttgarter Comictage (Die Stuttgarter Comictage e.V.). Marke, Festival-Phasen und Inhaltstypen (Künstler:innen, Rückblick, Sponsoren).
Author: Die Stuttgarter Comictage e.V.
Template: twentytwentyfive
Version: 0.9.161
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: comictage
*/

/* =========================================================================
 * Linkstil – einheitlich für die ganze Website
 *
 * Zwei Ausprägungen, getrennt nach Funktion:
 *
 *   Stil 1 – Fließtext-Links (Standard, kommt aus theme.json):
 *            in Ruhe unterstrichen, beim Überfahren/Fokus 2px statt 1px.
 *            Die Unterstreichung bleibt bewusst stehen: unsere Linkfarbe ist
 *            identisch mit der Textfarbe, ohne Linie wäre der Link im Fließtext
 *            gar nicht erkennbar (WCAG 1.4.1 „Use of Color").
 *
 *   Stil 2 – Titel- und Navigations-Links (Klasse `ct-link-plain` bzw. die
 *            Komponentenregeln weiter unten): in Ruhe ohne Linie, weil sie
 *            durch Größe, Gewicht und Position als klickbar erkennbar sind;
 *            beim Überfahren/Fokus 2px Unterstreichung.
 *
 * Nie `border-bottom` als Ersatzunterstreichung – die überspringt keine
 * Unterlängen und stapelt sich mit einer echten Unterstreichung (so macht es
 * The Events Calendar, siehe Korrektur bei den TEC-Regeln).
 * ====================================================================== */
a {
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover,
a:focus-visible {
	text-decoration-thickness: 2px;
}
/* Sichtbarer Fokus für Tastaturbedienung – gab es bisher nur als Browser-Standard. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	/* KEIN border-radius hier: das formt nicht nur den Rahmen, sondern das Element selbst –
	   und schlägt dabei dessen eigenen Radius (höhere Spezifität durch :focus-visible).
	   Ein runder Knopf wurde dadurch im Fokus eckig. Der Umriss folgt ohnehin der Form
	   des Elements. Aufgefallen an der Lightbox: beim Öffnen bekommt der Schließen-Knopf
	   den Fokus, und Safari lässt :focus-visible auch bei programmatischem Fokus greifen. */
}
/* … aber nicht nach einem Mausklick. Zwei Ursachen, deshalb zwei Selektoren:
 * 1. Die globalen Stile bringen `:where(.wp-site-blocks :focus){outline:…}` mit – das greift
 *    schon bei :focus, also auch beim Klicken. `:focus:not(:focus-visible)` schaltet das ab.
 * 2. Manche Browser (u. a. WebKit) lassen zusätzlich :focus-visible bei Zeigerbedienung
 *    greifen. Dafür merkt sich ct.js das zuletzt benutzte Eingabegerät und setzt
 *    `ct-zeigerfokus` auf <html>; bei Tab/Pfeiltasten fällt die Klasse wieder weg.
 * In beiden Fällen ist der Rahmen bei Tastaturbedienung sofort zurück (WCAG 2.4.7).
 * Bewusst nur für Links und Schaltflächen – Eingabefelder behalten ihren Rahmen, dort ist er
 * auch bei Mausbedienung die einzige Rückmeldung, wo die Eingabe landet. */
:is(a, button, summary, [tabindex]):focus:not(:focus-visible),
.ct-zeigerfokus :is(a, button, summary, [tabindex]):focus-visible {
	outline: none;
}
/* Stil 2 gilt automatisch für Links in Überschriften – Kartentitel, Beitragstitel,
 * Künstlernamen: dort ist die Klickbarkeit aus Größe, Gewicht und Position ersichtlich. */
:is(h1, h2, h3, h4, h5, h6) a {
	text-decoration: none;
}
:is(h1, h2, h3, h4, h5, h6) a:hover,
:is(h1, h2, h3, h4, h5, h6) a:focus-visible {
	text-decoration: underline;
}

/* Reine Symbol-Links bekommen nie eine Linie – eine Unterstreichung unter einem
 * Piktogramm sagt nichts aus; die Rückmeldung kommt dort über die Deckkraft. */
.ct-knst__icon,
.ct-social__icon,
.ct-team__icon,
.ct-panel__titlelink,      /* deckt das ganze Titel-Panel ab, hat keinen eigenen Text */
.ct-sponsor-banner__item,  /* Sponsorenlogo mit Bildunterschrift */
.wp-block-image a,
.wp-block-post-featured-image a {
	text-decoration: none;
}
/* Eigene Regel: ein nicht unterstütztes :has() würde sonst die ganze Liste ungültig machen. */
a:has(> img) {
	text-decoration: none;
}

/* Stil 2 zum bewussten Setzen an einzelnen Links. */
.ct-link-plain {
	text-decoration: none;
}
.ct-link-plain:hover,
.ct-link-plain:focus-visible {
	text-decoration: underline;
}


/* Styling läuft primär über theme.json. Hier nur Ergänzungen, die theme.json nicht abdeckt. */

/* Veranstaltungs-/Termin-Listen (Blöcke comictage/programm + comictage/externer-kalender) */
.ct-programm,
.ct-extkal {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-block: 2rem;
}
.ct-event {
	padding-block-start: 0.8rem; /* Abstand unter der Trennlinie – gleich beim ersten wie bei Folge-Events */
	padding-block-end: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--secondary, #e6e6e6);
}
.ct-event:last-child {
	border-bottom: 0;
}
.ct-event__cat {
	display: inline-block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.65;
	margin-bottom: 0.2rem;
}
.ct-event__title {
	margin: 0.1rem 0 0.3rem;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
}
.ct-event__meta {
	font-weight: 400;
	font-size: 0.95rem;
	opacity: 0.7;
	margin: 0.2rem 0;
}
.ct-event__venue {
	opacity: 0.8;
	margin: 0.1rem 0;
}
.ct-event__text {
	margin-top: 0.4rem;
}
/* Programmpunkt mit kleinem Comic-Foto: Bild links, Text rechts (lockert die Liste auf). */
.ct-event--haspic {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.ct-event__thumb {
	flex: 0 0 clamp(72px, 20vw, 96px);
}
.ct-event__thumb img {
	width: 100%;
	height: auto; /* nötig, damit aspect-ratio greift (sonst überschreibt die Bild-Höhe) */
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: transparent; /* transparente Fallback-Symbole blenden mit dem Seitenhintergrund */
}
.ct-event__body {
	flex: 1 1 auto;
	min-width: 0;
}
/* Schmale Bildschirme: Float statt fester Flex-Spalte – Titel/Zeit stehen neben dem Bild,
 * der längere Beschreibungstext fließt in voller Breite unter das Bild (spart viel Höhe). */
@media (max-width: 600px) {
	.ct-event--haspic {
		display: flow-root; /* schließt den Float sauber ein, Trennlinie bleibt unter allem */
		gap: 0;
	}
	.ct-event--haspic .ct-event__thumb {
		float: left;
		width: clamp(88px, 27vw, 116px);
		margin: 0.15rem 0.9rem 0.5rem 0;
	}
}
.ct-empty {
	font-style: italic;
	opacity: 0.7;
}

/* Team-Raster */
.ct-team {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 2.5rem 1.5rem;
	margin-block: 2rem;
}
.ct-team__member {
	text-align: center;
	/* Spalte, damit die Symbolzeile per margin-top:auto ans Kartenende rutscht und
	   die Biografien aller Karten auf gleicher Höhe beginnen. */
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ct-team__bio {
	text-align: left;
	font-size: 0.88rem;
	line-height: 1.5;
	opacity: 0.85;
	margin-top: 0.7rem;
}
.ct-team__bio p {
	margin: 0 0 0.5rem;
}
.ct-team__bio p:last-child {
	margin-bottom: 0;
}
.ct-team__photo img {
	width: 100%;
	height: auto; /* nötig, damit aspect-ratio greift (sonst gewinnt die height-Angabe im HTML) */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	display: block; /* kein Inline-Zeilenabstand darunter – sonst sind Karten mit Foto
	                   ein paar Pixel höher als solche mit Platzhalter */
	margin-bottom: 0.6rem;
}
.ct-team__name {
	margin: 0.2rem 0 0;
	font-size: 1.1rem;
}
.ct-team__role {
	margin: 0.1rem 0 0;
	opacity: 0.7;
	font-size: 0.95rem;
	/* Zeilenhöhe und Mindesthöhe exakt gleich: eine leere Rollenzeile ist damit genauso
	   hoch wie eine gefüllte – die Biografien bleiben in einer Flucht. */
	line-height: 1.6;
	min-height: 1.6em;
}
/* Fußzeile: Kanal-Symbole (Instagram) – dezent, zentriert zwischen Links und Copyright. */
.ct-social {
	display: flex;
	justify-content: center;
	gap: 0.7rem;
	margin: 0.9rem 0 0;
}
.ct-social__icon {
	display: inline-flex;
	color: inherit;
	opacity: 0.55;
	line-height: 0;
	transition: opacity 0.15s ease;
}
.ct-social__icon:hover,
.ct-social__icon:focus {
	opacity: 1;
}
.ct-social__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}
/* Variante mit ausgeschriebenem Namen (Kontaktseite): je Kanal eine Zeile, Symbol + Name. */
.ct-social--labelled {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.35rem;
	margin: 0.3rem 0 0;
}
.ct-social--labelled .ct-social__icon {
	align-items: center;
	gap: 0.5rem;
	opacity: 0.85;
	line-height: 1.4;
	text-decoration: none;
}
.ct-social--labelled .ct-social__icon:hover .ct-social__label,
.ct-social--labelled .ct-social__icon:focus .ct-social__label {
	text-decoration: underline;
}

/* ── Comic-Schülerwettbewerb ─────────────────────────────────────────────── */
/* Preisträger:in über der jeweiligen Comic-Galerie */
.ct-preis-wer {
	margin: 0.1rem 0 0.7rem;
	font-size: 1.05rem;
	opacity: 0.75;
}
/* Einstiegskarten zu den Preisträgerseiten (Vorschaubild + Titel) */
.ct-preis-karten {
	margin: 1.2rem 0 0;
	gap: 1.6rem;
}
.ct-preis-karten .wp-block-column {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.ct-preis-karten .wp-block-column:hover {
	border-color: var(--wp--preset--color--contrast, #18181d);
	transform: translateY(-2px);
}
.ct-preis-karten figure {
	margin: 0;
}
/* Der verlinkte Bildblock rendert das <a> als inline-block; dessen Breite schrumpft auf das
 * Bild, und das `width: 100%` darunter bezog sich dann auf diese Breite statt auf die Karte. */
.ct-preis-karten figure a {
	display: block;
}
.ct-preis-karten figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.ct-preis-karten .ct-preis-karte__text {
	margin: 0;
	padding: 0.8rem 1rem 1rem;
	line-height: 1.45;
}
.ct-preis-karten .ct-preis-karte__text a {
	text-decoration: none;
	font-size: 1.15rem;
}
.ct-preis-karten .ct-preis-karte__text a:hover {
	text-decoration: underline;
}
.ct-preis-karten .ct-preis-karte__meta {
	display: block;
	font-size: 0.88rem;
	opacity: 0.7;
	margin-top: 0.15rem;
}

/* Kontaktseite: E-Mail-Adresse je Anliegen hervorheben. */
.ct-contact-mail {
	margin: 0.3rem 0 0;
	font-size: 1.05rem;
	font-weight: 600;
}

/* Bildbereich nie stauchen: als Flex-Element hat der Platzhalter keine intrinsische
   Höhe und würde sonst schrumpfen, sobald der Karteninhalt höher als die Rasterzeile ist. */
.ct-team__photo {
	flex: none;
}
/* Noch keine Zeichnung vorhanden: skizziertes Gesicht mit Fragezeichen (Inline-SVG). */
.ct-team__photo--empty {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #fff; /* wie die echten Zeichnungen – kein grauer Kreis */
	color: var(--wp--preset--color--contrast, #18181d);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 0.6rem;
}
.ct-team__placeholder {
	width: 78%;
	height: auto;
	display: block;
}

/* Verweise (E-Mail/Website/Instagram) mittig unter der Rolle – wie Name und Rolle zentriert.
   Die Zeile ist immer vorhanden – jede Person hat mindestens die E-Mail –, dadurch beginnen
   die Biografien aller Karten auf gleicher Höhe. */
.ct-team__links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	margin: 0.5rem 0 0;
}
.ct-team__icon {
	display: inline-flex;
	color: inherit;
	opacity: 0.7;
	line-height: 0;
	transition: opacity 0.15s ease;
}
.ct-team__icon:hover,
.ct-team__icon:focus {
	opacity: 1;
}
.ct-team__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Bühne (Startseite): zentrierten Fließtext schmaler umbrechen als die Inhaltsspalte,
   damit sich die Zentrierung klar von der linksbündigen Struktur abhebt
   (und für angenehmere Zeilenlänge). Überschriften/Buttons bleiben unberührt. */
.home main p.has-text-align-center {
	max-width: 34rem;
	margin-inline: auto;
}

/* Einheitlicher Abstand Kopfzeile → erste Überschrift, für Start- UND Unterseiten.
   Zum Anpassen NUR diesen einen Wert ändern: */
:root {
	--ct-content-top: 1.6rem;
}
/* main-Oberabstand vereinheitlichen (überschreibt Inline-Stile von Eltern-Theme + Startseite) */
.wp-site-blocks main {
	margin-top: 0 !important;
	padding-top: var(--ct-content-top) !important;
}
/* Eltern-Theme: oberen Innenabstand der ersten Inhaltsgruppe neutralisieren (unten bleibt) */
.wp-site-blocks main > .wp-block-group:first-child {
	padding-top: 0 !important;
}

/* Einzel-Rückblick: Eckdaten-Balken + ausfadendes Plakat + überlagerter Text */
/* Eckdaten-Balken (Programm, Rückblick, letzter Rückblick) – gezeichneter Textkasten wie im
   Panel-Raster. Hintergrund und Radius entfallen: Füllung und Kontur kommen aus dem SVG. */
.ct-rb__bar {
	position: relative;
	--ct-capfill: var(--wp--preset--color--contrast, #18181d);
	--ct-capink: var(--wp--preset--color--contrast, #18181d);
	--ct-capline: 2px;
	color: #fff;
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-size: clamp(1.7rem, 5.5vw, 2.5rem);
	line-height: 1.05;
	text-align: center;
	padding: 0.55rem 1.1rem 0.65rem;
	margin-bottom: 1.4rem;
}
.ct-rb__bartext {
	position: relative; /* über der Umrandung */
}
.ct-rb__bar strong {
	font-weight: 700;
}
.ct-rb__hero {
	position: relative;
}
.ct-rb__poster { /* Plakat volle Breite, Höhe begrenzt → zeigt oberen Teil (Logo/Titel/Datum) */
	width: 100%;
	height: 456px;
	background-image: var(--ct-poster);
	background-size: cover;
	background-position: center var(--ct-poster-y, 0%); /* manual focus may shift the crop down */
	position: relative;
}
.ct-rb__poster::after { /* unteren Teil des Plakats in Weiß ausblenden */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(255, 255, 255, 0) 0,
		rgba(255, 255, 255, 0) 24%,
		rgba(255, 255, 255, 0.88) 44%,
		#fff 56%);
}
.ct-rb__body { /* Text überlagert den weißen unteren Plakat-Bereich (beginnt bei ~230px) */
	position: relative;
	z-index: 1;
	margin-top: -226px;
}
.ct-rb__body--flat {
	margin-top: 0;
}
.ct-rb__galerie {
	margin-top: 2.5rem;
}
/* Galerie als Masonry: dynamisches Raster, jedes Bild in seinem natürlichen
 * Seitenverhältnis (kein Beschnitt) – auch bei gemischt hoch-/querformatigen
 * Bildern (inkl. Plakat). Wird erst per ct.js aktiviert (Klasse .ct-masonry);
 * ohne JS bleibt die normale WP-Galerie als Fallback erhalten. Die Zeilenhöhen
 * (grid-row span) berechnet ct.js pro Bild aus dem natürlichen Seitenverhältnis. */
.ct-rb__galerie .wp-block-gallery.ct-masonry {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 8px;
	column-gap: 10px;
	row-gap: 10px;
	align-items: start;
}
@media (max-width: 781px) {
	.ct-rb__galerie .wp-block-gallery.ct-masonry {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 430px) {
	.ct-rb__galerie .wp-block-gallery.ct-masonry {
		grid-template-columns: 1fr;
	}
}
.ct-rb__galerie .wp-block-gallery.ct-masonry > figure.wp-block-image {
	margin: 0 !important;
	width: auto !important;
	align-self: start !important;
	overflow: hidden;
}
.ct-rb__galerie .wp-block-gallery.ct-masonry > figure.wp-block-image > img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	max-width: 100% !important;
}
.ct-rb__doclink {
	margin-top: 1.3rem;
}
/* Visuell versteckt, aber für Screenreader UND Suchmaschinen lesbar (nicht display:none!) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.ct-rb__sponsoren {
	margin-top: 3rem;
	text-align: center;
}
.ct-sponsor-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.8rem 1.6rem;
	margin-top: 1.2rem;
}
.ct-sponsor-banner__item {
	display: block;
}
.ct-sponsor-banner img {
	height: 64px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
 * Test-/WIP-Hinweis (nur Dev): schließbare Leiste oben + dauerhaftes Eck-Badge.
 * Ein-/ausgeschaltet über „Festival-Phase → Test-Hinweis". Warngelb, bewusst
 * auffällig, aber nicht deckend – Design bleibt beurteilbar. Dismiss via ct.js.
 * ------------------------------------------------------------------------- */
.ct-testbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: relative;
	z-index: 100000;
	padding: 0.55rem 2.4rem 0.55rem 1rem;
	background: #ffd24d;
	color: #3a2f00;
	font-size: 0.95rem;
	line-height: 1.35;
	text-align: center;
}
.ct-testbar__txt {
	max-width: 62rem;
}
.ct-testbar__close {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 0.4rem;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.ct-testbar.is-hidden {
	display: none;
}
.ct-testbadge {
	position: fixed;
	right: 0.7rem;
	bottom: 0.7rem;
	z-index: 99999;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: #ffd24d;
	color: #3a2f00;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
	opacity: 0.92;
	pointer-events: none; /* blockiert keine Klicks auf darunterliegende Elemente */
}

/* -------------------------------------------------------------------------
 * Panel-Grid-Startseite (comictage/panel-grid) – comic-typische Panels:
 * quadratisch, schwarze Kontur, kleine Gutters, kein border-radius.
 * ------------------------------------------------------------------------- */
.ct-panels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: 14px;
	max-width: 1120px;
	margin-inline: auto;
	/* Sichtbarer weißer Rand links/rechts (wie auf der alten Seite) – verstärkt den Comic-Look */
	padding-inline: clamp(16px, 5vw, 64px);
	box-sizing: border-box;
}
.ct-panel {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid #000;
	overflow: hidden;
	display: flex;
	text-decoration: none;
	color: inherit;
	background: #fff;
}
/* Versuch: gezeichneter Panel-Rahmen statt CSS-Linie (ct.js, Schalter PANELRAHMEN bzw.
   `?ct-rahmen=linie`). Die Klasse setzt ct.js erst, wenn der Rahmen wirklich hängt – ohne
   JavaScript bleibt die Linie oben stehen. */
.ct-panel.is-gezeichnet {
	border-color: transparent;
}
/* Der Untertitel-Kasten muss vom Panelrand wegrücken, sobald der Rahmen gezeichnet ist.
   Sonst liegen seine Striche zwischen Panelkante und Panelrahmen – also genau in dem Streifen,
   den der Beschnitt unregelmäßig wegnimmt. Zwei unruhige Linien treffen dort aufeinander und
   der Rand franst aus. Der Abstand ist so bemessen, dass er die Strichbreite des Rahmens samt
   seiner Wanderung sicher überspringt (Rahmen bei 2,5 px, halbe Strichbreite 0,8 px, Unruhe
   gut 1 px). */
.ct-panel.is-gezeichnet .ct-panel__tab {
	left: 5px;
	bottom: 5px;
	max-width: calc(100% - 10px);
}

/* Platzierung der Kopf-/Haupt-Panels (Desktop, 3 Spalten) */
.ct-panel--logo   { grid-column: 1;          grid-row: 1; }
.ct-panel--title  { grid-column: 2 / span 2; grid-row: 1; aspect-ratio: auto; }
.ct-panel--main   { grid-column: 1 / span 2; grid-row: 2 / span 2; }
.ct-panel--poster { grid-column: 3;          grid-row: 2; }

/* Kompaktes Hero-Layout (Klasse .ct-panels--herocompact, s. COMICTAGE_GRID_COMPACT_HERO):
 * Hero-Zeile nur EINE Rasterzeile hoch; das Plakat wird hochkant (2:3) und bestimmt damit
 * die Zeilenhöhe auf das 1,5-fache eines normalen Panels; das Hauptpanel streckt sich mit.
 * Nur im 3-Spalten-Desktop; im Tablet/Mobil greifen die Standard-Umbrüche weiter unten. */
@media (min-width: 821px) {
	.ct-panels--herocompact .ct-panel--main   { grid-row: 2; aspect-ratio: auto; }
	/* Plakat im DIN-Verhältnis (1:√2) → randlos, wenn das Plakatfoto ebenfalls DIN ist;
	 * bestimmt zugleich die Hero-Zeilenhöhe (≈ 1,41× normale Panelhöhe). */
	.ct-panels--herocompact .ct-panel--poster { grid-row: 2; aspect-ratio: 1 / 1.4142; }
}

/* Logo-Panel */
.ct-panel--logo {
	background: #0f0f12;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 8%;
}
.ct-panel__logoimg { width: 58%; height: auto; display: block; }
.ct-panel__logoplaceholder {
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 4.5vw, 2.6rem);
	line-height: 1;
	color: #fff;
	text-align: center;
	opacity: 0.92;
}
.ct-panel__logocap {
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: clamp(1rem, 2.2vw, 1.5rem);
	line-height: 1;
	color: #fff;
	text-align: center;
}
/* Echtes Site-Logo im Startseiten-Panel (falls gesetzt): mittig einpassen. */
.ct-panel__logoimgwrap { width: 68%; display: flex; justify-content: center; }
.ct-panel__logoimgwrap .ct-brandlogo__img { width: 100%; height: auto; display: block; }

/* Mit echtem Logo füllt das Zeichen die Kachel randlos – so wirkt es im Raster eckig,
 * wie das alte Logo. Der Hintergrund ist exakt das Schwarz des Logos, damit die
 * durchsichtigen Ecken der runden Fassung nahtlos übergehen. Die Bildunterschrift
 * entfällt dabei: Der Ortsname steht schon im Zeichen selbst. */
.ct-panel--logo--img {
	background: #0c090a;
	padding: 0;
	gap: 0;
}
.ct-panel--logo--img .ct-panel__logoimgwrap { width: 100%; }
.ct-panel--logo--img .ct-panel__logocap { display: none; }

/* Kopfzeilen-Logo der Unterseiten: runde Marke + Wortmarke. Quelle = comictage_logo_inner()
 * (Site-Logo oder Platzhalter „Neues Logo") – identisch zum Startseiten-Panel, nur rund. */
.ct-headlogo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}
.ct-headlogo__mark {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	overflow: hidden;
	background: #0f0f12;
	color: #fff;
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 0.92;
	padding: 0.35rem;
	box-sizing: border-box;
	opacity: 0.92;
}
/* Wenn ein echtes Logo gesetzt ist: Bild randlos im Kreis, heller Grund für dunkle Logos. */
.ct-headlogo__mark--img {
	padding: 0;
	background: #fff;
	opacity: 1;
}
.ct-headlogo__mark--img .ct-brandlogo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ct-headlogo__word {
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1;
}
/* --- Textkasten-Umrandung als Stilmittel ---------------------------------
   Eine gezeichnete, leicht unruhige Kontur (comictage_caption_box_svg) – dieselbe Form an
   allen Stellen, an denen sonst ein glattes Rechteck stünde: Überlaufmenü der Navigation,
   Eckdaten-Kasten, Beschriftung der Bild-Panels. Farbe, Füllung und Strichstärke setzt
   jeder Einsatzort selbst; gemeinsam ist nur die Gestalt.

   Anwendung: Elternelement `position: relative`, das SVG als erstes Kind, der Inhalt in
   einem eigenen Element mit `position: relative` darüber. Der Elternhintergrund entfällt –
   die Füllung kommt aus dem SVG, sonst schaute das Rechteck an den Ecken hervor. */
/* Die drei Stellschrauben werden NICHT hier gesetzt, sondern nur als Rückfallwert benutzt:
   Eine Angabe direkt am SVG würde alles schlagen, was ein Elternelement setzt – und genau dort
   stellt jeder Einsatzort seine Werte ein (--ct-capline, --ct-capfill, --ct-capink). */
.ct-capbox {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible; /* die Striche dürfen an den Ecken überstehen */
}
.ct-capbox__fill {
	fill: var(--ct-capfill, #fff);
	stroke: none;
}
.ct-capbox__line {
	fill: none;
	stroke: var(--ct-capink, #000);
	stroke-linecap: round;
}
/* Schwankende Strichstärke – zusammen mit den ungenauen Ecken der Träger des
   handgezeichneten Eindrucks. Als Faktoren notiert, damit das Verhältnis bei jeder
   Grundstärke gleich bleibt. */
.ct-capbox__line--a { stroke-width: calc(var(--ct-capline, 1.5px) * 1.00); } /* oben */
.ct-capbox__line--b { stroke-width: calc(var(--ct-capline, 1.5px) * 1.35); } /* rechts */
.ct-capbox__line--c { stroke-width: calc(var(--ct-capline, 1.5px) * 0.90); } /* unten */
.ct-capbox__line--d { stroke-width: calc(var(--ct-capline, 1.5px) * 1.20); } /* links */
/* Gezeichnete Fassung: ct.js ersetzt die vier Linien durch Flächen mit schwankender Breite.
   Die Farbe ist dieselbe – aus `stroke` wird `fill`. */
.ct-capbox__brush {
	fill: var(--ct-capink, #000);
	stroke: none;
}
/* Versuch: gezeichneter Panel-Rahmen auf der Startseite statt der CSS-Linie (ct.js, Schalter
   PANELRAHMEN bzw. `?ct-rahmen=linie`). Steht bewusst NACH `.ct-capbox` – dessen `inset: 0`
   und die 100-%-Maße würden den Einzug sonst schlagen. Der Einzug ist nötig, weil das Panel
   `overflow: hidden` hat: ohne ihn wäre die äußere Hälfte jedes Strichs abgeschnitten. */
.ct-capbox.ct-panel__frame {
	/* Maße ausdrücklich rechnen statt `inset` + `width: auto`: Bei einem <svg> löst `auto`
	   nicht zur Restbreite auf, das Element wurde dadurch 0 px breit. */
	top: 1.5px;
	left: 1.5px;
	right: auto;
	bottom: auto;
	width: calc(100% - 3px);
	height: calc(100% - 3px);
	z-index: 5;
	--ct-capline: 1.6px;
	--ct-capfill: transparent;
	--ct-capink: #000;
}

/* Filterpillen im Textkasten-Stil (25.08.2026, seit 26.08.2026 überall).
   Gilt für jede Filterleiste der Website: Programm (Tage, Typen), Künstler:innen (Jahre,
   Ansicht), Andere Festivals (Sortierung) und Comic News (Sprachen). Das Markup kommt aus
   comictage_pill(); die Umrandung liegt als SVG hinter der Beschriftung, deshalb steht der
   Text in `.ct-pilltext` und wird darübergehoben. Kein `border`, kein `border-radius` – die
   Linie ist gezeichnet. */
:root {
	/* Ein Abstand für alle Filterleisten – vom Programm übernommen. Steht hier, damit eine
	   spätere Vergrößerung überall gleichzeitig wirkt. */
	--ct-pillgap: 0.5rem;
}
/* Auf schmalen Telefonen etwas enger: Bei 375 px blieben von der Tagesleiste sonst nur
   1 px Reserve, und die Zeile kippte je nach Gerät in eine dritte um. Weil alle Leisten
   an derselben Variable hängen, bleiben sie auch hier untereinander gleich. */
@media (max-width: 26rem) {
	:root { --ct-pillgap: 0.4rem; }
}
.ct-pill {
	position: relative;
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.3;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast, #18181d);
	text-decoration: none;
	padding: 0.2rem 0.7rem;
	--ct-capline: 1.4px;
	--ct-capfill: transparent;
	--ct-capink: var(--wp--preset--color--contrast, #18181d);
}
.ct-pilltext {
	position: relative; /* über der Umrandung */
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
/* Nur Symbole in der Beschriftung, nicht die Umrandung dahinter. */
.ct-pilltext svg { width: 15px; height: 15px; }
.ct-pill:hover {
	--ct-capfill: var(--wp--preset--color--secondary, #e6e6e6);
	background: transparent;
}
.ct-pill.is-active {
	--ct-capfill: var(--wp--preset--color--contrast, #18181d);
	background: transparent;
	color: #fff;
}
/* Eingabefeld in einer Filterleiste: gleicher gezeichneter Kasten, das Feld selbst ohne
   eigenen Rahmen. Der Fokusrahmen bleibt – bei Eingaben ist er die einzige Rückmeldung. */
.ct-pillfield {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 18rem;
	--ct-capline: 1.4px;
	--ct-capfill: transparent;
	--ct-capink: var(--wp--preset--color--secondary, #9a9a9a);
}
.ct-pillfield input,
.ct-pillfield select {
	position: relative; /* über der Umrandung */
	width: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
}

/* --- Hauptnavigation mit Überlaufmenü ------------------------------------
   Es stehen alle Bereiche in der Leiste; ct.js schiebt zur Laufzeit alles, was
   nicht in die verfügbare Breite passt, in das Menü rechts („Priority+").
   Ohne JavaScript bleibt die Leiste umbrechend – alle Links bleiben erreichbar. */
.ct-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.2rem;
	/* Eigene Zeile unter dem Logo: so steht der Leiste die volle Textbreite zur
	   Verfügung statt nur des Rests neben dem Logo – es passen mehr Einträge hinein. */
	width: 100%;
	margin-top: 0.7rem;
}
.ct-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Erst mit JavaScript einzeilig und beschnitten – vorher würde die Leiste sonst
   links abgeschnitten statt umzubrechen. */
.ct-nav--js .ct-nav__list {
	flex: 0 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
	overflow: hidden;
}
.ct-nav__item { flex: 0 0 auto; }
.ct-nav__link {
	font-size: 1.125rem;
	font-weight: 300;
	white-space: nowrap;
}
.ct-nav__link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	position: relative; /* Bezug für den gezeichneten Strich */
}
/* Gezeichnete Unterstreichung der aktuellen Seite (ct.js). Die CSS-Linie darüber bleibt der
   Rückfall ohne JavaScript; sie weicht erst, wenn der Strich wirklich gezeichnet ist. */
.ct-nav__link[aria-current="page"].is-gezeichnet {
	text-decoration: none;
}
.ct-capbox.ct-nav__ustrich {
	inset: auto;
	left: 0;
	bottom: -0.02em;
	width: 100%;
	height: 0.32em;
	--ct-capline: 2px;
	--ct-capink: var(--wp--preset--color--contrast, #18181d);
}

.ct-nav__more {
	position: relative;
	flex: 0 0 auto;
}
/* Der Menüknopf ist eine kleine Sprechblase – dieselbe Bildsprache wie die Panels
   der Startseite. Die SVG-Form wird auf die Knopfgröße gezogen, die Beschriftung liegt
   als echter Text darüber (bleibt wählbar, skaliert mit der Schriftgröße). */
.ct-nav__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.9em;
	/* Nur der Blasenkörper zählt für das Layout – der Schweif ragt darunter in den
	   ohnehin leeren Bereich hinein, ohne die Zeile höher zu machen. */
	height: 2.1em;
	margin: 0;
	/* Feinausrichtung: der Blasenkörper liegt im SVG bei 4…48 von 70 Einheiten, seine
	   Mitte also 3,5 px unter der Mitte des Knopfkastens. Dieser Versatz gleicht das aus,
	   sodass die Körpermitte exakt auf der Mitte der Textlinks sitzt. transform statt
	   margin, damit sich das Layout nicht verschiebt.
	   Nachgezogen am 26.08.2026: Seit die Textlinks in der Comic-Schrift stehen, liegt ihre
	   sichtbare Mitte anders als in der Grundschrift – gemessen saß „Mehr" 2,7 px zu tief. */
	transform: translateY(-0.058em);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	user-select: none; /* Doppelklick soll „Mehr" nicht markieren */
}
.ct-nav__bubble {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	/* Höher als der Knopf: der Körper (obere 63 % der viewBox) füllt den Knopf,
	   der Schweif steht darunter über. */
	height: 3.35em;
	overflow: visible;
}
.ct-nav__bubble path {
	transition: stroke-width 0.12s ease;
}
.ct-nav__toggle:hover .ct-nav__bubble path,
.ct-nav__toggle[aria-expanded="true"] .ct-nav__bubble path,
html:not(.ct-zeigerfokus) .ct-nav__toggle:focus-visible .ct-nav__bubble path {
	stroke-width: 3;
}
.ct-nav__togglelabel {
	position: absolute;
	left: 8%;
	right: 8%;
	/* Deckt genau den Blasenkörper ab (4…48 von 70 viewBox-Einheiten bei 3,35em SVG-Höhe),
	   damit die Beschriftung mittig im Körper steht und nicht im Knopfkasten.
	   In Prozent der Knopfhöhe – em wäre hier die eigene, größere Schriftgröße. */
	top: 9.1%;
	height: 100.6%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	color: #111;
}

/* Der Kasten trägt Lage und Größe; die Umrandung liegt als gezeichnete Form dahinter. */
.ct-nav__panel {
	position: absolute;
	/* Dicht unter die Schweifspitze – aber mit einem sichtbaren Spalt dazwischen,
	   sonst laufen Spitze und Rahmenlinie ineinander.
	   Nachgezogen am 26.08.2026: Seit die Umrandung genau auf der Elementkante liegt statt
	   2,2 % eingerückt, ist die obere Linie um rund 5 px nach oben gewandert und berührte die
	   Spitze wieder. Der Zuschlag holt das zurück. */
	top: calc(100% + 1rem);
	left: 0;
	z-index: 60;
	/* Der enthaltende Block ist der schmale Knopf; ohne max-content würde das Menü auf
	   die Mindestbreite fallen und lange Einträge unnötig umbrechen. */
	width: max-content;
	min-width: max(13rem, 100%);
	max-width: min(85vw, 24rem);
}
/* Gleiche Strichstärke wie die Sprechblase im geöffneten Zustand – sichtbar sind
   Kasten und Blase ja immer zusammen. */
.ct-nav__frame {
	--ct-capline: 2.4px;
}
.ct-nav__overflow {
	position: relative; /* über der Umrandung */
	max-height: min(70vh, 34rem);
	overflow-y: auto;
	margin: 0;
	/* Etwas Luft zur gezeichneten Kante, die nicht exakt gerade verläuft. */
	padding: 0.6rem 0.35rem;
	list-style: none;
}
.ct-nav__overflow .ct-nav__item { display: block; }
.ct-nav__overflow .ct-nav__link {
	display: block;
	padding: 0.5rem 1rem;
	white-space: normal;
}
.ct-nav__overflow .ct-nav__link:hover,
.ct-nav__overflow .ct-nav__link:focus-visible {
	background: rgba(0, 0, 0, 0.07);
}

/* Titel-Panel */
.ct-panel--title {
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	padding: 1rem 1.1rem;
	position: relative; /* Bezug für Stretched-Link + Kalender-Button */
}
/* Ganzes Titel-Panel klickbar (Stretched-Link); Inhalt bleibt sichtbar, Kalender-Button liegt darüber. */
.ct-panel__titlelink { position: absolute; inset: 0; z-index: 1; }
.ct-panel__titlemain, .ct-panel--title .ct-panel__stats { position: relative; z-index: 0; }
/* Kalender-Symbol oben rechts */
.ct-cal-btn {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 3;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #0f0f12;
	border-radius: 9px;
	background: #fff;
	color: #0f0f12;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ct-cal-btn:hover, .ct-cal-btn:focus-visible { background: #0f0f12; color: #fff; }
/* Modaler Kalender-Dialog */
.ct-cal-dialog {
	border: none;
	border-radius: 12px;
	padding: 1.4rem 1.5rem;
	max-width: min(30rem, 92vw);
	width: 100%;
	box-shadow: 0 12px 44px rgba(0, 0, 0, 0.28);
	color: #18181d;
	font-family: var(--wp--preset--font-family--system, system-ui, -apple-system, sans-serif);
}
.ct-cal-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.ct-cal-dialog__title {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.9rem;
	margin: 0 0 0.5rem;
	line-height: 1.1;
}
.ct-cal-dialog__text { margin: 0 0 1.1rem; line-height: 1.5; font-size: 0.95rem; }
.ct-cal-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ct-cal-dialog__go {
	display: inline-block;
	padding: 0.5rem 1.05rem;
	border-radius: 8px;
	background: #0f0f12;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
}
.ct-cal-dialog__go:hover { opacity: 0.9; }
.ct-cal-dialog__go--google { background: #1a73e8; }
.ct-cal-dialog__cancel {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: #666;
	cursor: pointer;
	text-decoration: underline;
	font: inherit;
}
/* Ist ein <h1> (führende Überschrift der Startseite). Die Typografie kommt aus den Spans
 * darin, deshalb die H1-Vorgaben hier ausdrücklich neutralisieren. */
.ct-panel__titlemain {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.ct-panel__titletop {
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: clamp(1.45rem, 3.3vw, 2.4rem);
	line-height: 1;
	letter-spacing: 0.02em;
}
.ct-panel__titlelead {
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: clamp(1.8rem, 4.4vw, 3rem);
	line-height: 1;
}
/* Programmphase: „Comictage <Jahr>" als dominante Zeile (wie im Original). */
.ct-panels--phase3 .ct-panel__titlelead {
	font-size: clamp(2.9rem, 6.7vw, 4.9rem);
	line-height: 0.96;
}
/* Alle Texte im Panel in Comicschrift – auch das Datum. */
.ct-panel__titlesub {
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: clamp(1.35rem, 2.8vw, 2.1rem);
	line-height: 1.1;
	max-width: 40ch;
}
/* Ort-Zeile (Save the Date): weniger wichtig → etwas kleiner und dezenter. */
.ct-panel__titlesub--minor {
	font-size: clamp(1.05rem, 2vw, 1.5rem);
	opacity: 0.8;
}
/* Datum in der „Stuttgarter Comictage <Datum>"-Zeile hervorheben (größer, zusammenhängend). */
.ct-title-date {
	font-size: 1.22em;
	white-space: nowrap;
}
.ct-panel__countdown { font-family: "Amatic SC", sans-serif; font-weight: 700; }
/* Countdown „Nur noch N Tage!" als Blickfang deutlich größer. Höhere Spezifität als die
 * generische .ct-std__countdown-Regel, die sonst (später im CSS) die Größe überschreibt. */
.ct-panel--title .ct-panel__countdown {
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	opacity: 1;
	margin-top: 0.55rem;
}
/* Eckdaten des Programms – zwei Varianten (schwarzer Kasten / Fußzeilen-Text). */
.ct-panel__stats {
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	text-align: center;
	line-height: 1.05;
	margin-top: 0.6rem;
}
.ct-panel__stats--box {
	position: relative;
	color: #fff;
	padding: 0.5rem 1rem;
	font-size: clamp(1.05rem, 2.1vw, 1.55rem);
}
/* Dunkler Kasten: Füllung und Strich in derselben Farbe – die Form zeigt sich hier über die
   überstehenden Ecken, nicht über einen Farbkontrast. */
.ct-panel__stats--box .ct-capbox {
	--ct-capfill: #0f0f12;
	--ct-capink: #0f0f12;
	--ct-capline: 2px;
}
.ct-panel__statstext {
	position: relative; /* über der Umrandung */
}
.ct-panel__stats--text {
	color: #111;
	border-top: 1px solid rgba(0, 0, 0, 0.3);
	padding-top: 0.5rem;
	font-size: clamp(1rem, 1.9vw, 1.45rem);
}

/* Sprechblasen-Panel: schwarzes Panel, weiße SVG-Blase, Live-Text (Auto-Fit via ct.js) */
.ct-panel--bubble { background: #0f0f12; }
.ct-panel__bubble { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ct-panel__bubbletext {
	position: absolute;
	inset: 16% 20% 32% 20%; /* Textbereich innerhalb der Ellipse (schmaler an den Seiten) */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.ct-panel__bubbletext .ct-fit {
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	line-height: 1.02;
	color: #111;
	max-width: 100%;
	font-size: 1.4rem; /* Startwert; ct.js passt an die Blasengröße an */
}
/* In die (per preserveAspectRatio="none" breit gezogene) Hauptblase einbeschriebener Textbereich;
 * Mitte bei 42 % passend zur Blasenmitte (cy=42). */
.ct-panel--main .ct-panel__bubbletext { inset: 20% 17% 36% 17%; }

/* Bild-Panel */
/* Weißer Grund: deckende Fotos (object-fit:cover) füllen das Panel ohnehin komplett;
 * transparente Bilder (z. B. Comic-&-Bier-Logo) stehen so auf Weiß statt auf Schwarz
 * und verschmelzen nicht mehr mit den schwarzen Sprechblasen-Panels. */
.ct-panel--image { background: #fff; }
.ct-panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-panel--poster .ct-panel__img { object-fit: contain; background: #fff; }
/* Bild-Panel-Beschriftung: Comic-Textkästchen UNTEN (oben stehen oft Titel im Bild).
 * Comicschrift, weiß mit schwarzer Kontur – wie ein Erzählkasten im Comic-Panel.
 * Kurze Texte füllen NICHT die volle Breite und sind zufällig links/rechts verankert. */
.ct-panel__tab {
	position: absolute;
	left: -1px;
	bottom: -1px;
	z-index: 2;
	max-width: calc(100% + 2px);
	box-sizing: border-box;
	padding: 5px 11px;
	font-family: "Amatic SC", sans-serif;
	font-weight: 700;
	font-size: clamp(0.95rem, 2.6vw, 1.3rem);
	line-height: 1.02;
	text-align: center;
}
.ct-panel__tabtext {
	position: relative; /* über der Umrandung */
}
.ct-panel__tab--right { left: auto; right: -1px; }

/* Förderer & Partner unter dem Panel-Grid (Startseite): Breite wie das Grid begrenzen,
 * gleiche seitliche Ränder. Nutzt die bestehende Rückblick-Sponsoren-Optik. */
.ct-frontsponsoren {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: clamp(16px, 5vw, 64px);
	box-sizing: border-box;
}
.ct-frontsponsoren .ct-rb__sponsoren { margin-top: 3rem; }

/* Schmale Screens (Tablet UND Handy): 2 Spalten – der Comic-Raster-Charakter bleibt so
 * auch auf dem Handy erhalten (statt einer einzelnen Vollbild-Spalte mit viel Scrollen). */
/* Reservebild: Im Dreispalten-Raster geht die Reihe ohne es auf; im Zweispalten-Band ist die
   Zellenzahl ungerade und die Schlusszeile bliebe halb leer – dort wird es eingeblendet. */
.ct-panel--spare { display: none; }
@media (max-width: 820px) {
	.ct-panel--spare { display: flex; }
}

@media (max-width: 820px) {
	.ct-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ct-panel--logo, .ct-panel--poster { grid-column: auto; grid-row: auto; }
	.ct-panel--title { grid-column: 1 / span 2; grid-row: auto; }
	.ct-panel--main  { grid-column: 1 / span 2; grid-row: auto; }
	/* Plakat im DIN-Hochformat statt quadratisch → volle Plakathöhe; das Plakat bestimmt so
	 * die Höhe der Logo-Zeile, das Logo-Panel streckt sich mit (nicht mehr quadratisch). */
	.ct-panel--poster { aspect-ratio: 1 / 1.4142; }
	/* Feste Quadrat-Ratio des Logos aufheben, sonst bleibt es quadratisch und lässt eine
	 * Lücke; ohne Ratio füllt es (align-self:stretch) die vom Plakat vorgegebene Zeilenhöhe. */
	.ct-panel--logo { aspect-ratio: auto; }
	/* „Programm" hier freier wählbar (keine Plakat-Kopplung wie im Desktop): ~150% statt ~200%
	 * einer normalen Panelzeile. */
	.ct-panel--main { aspect-ratio: 1.4 / 1; }
	/* Reihenfolge über --o (inline gesetzt): Titel-Zeile oben (über Logo + Plakat) und
	 * Körper im Schachbrett (Blase/Bild abwechselnd) statt Spaltenstreifen. Desktop
	 * (≥821px) referenziert --o NICHT → dort bleibt alles wie gehabt. */
	.ct-panels > * { order: var(--o, 0); }
}
/* Sehr schmal (Handy): engere Ränder/Abstände, damit die 2 Panels nicht zu winzig werden. */
@media (max-width: 520px) {
	.ct-panels { gap: 8px; padding-inline: 10px; }
}

/* Aktuelles (Phase 1): neueste Beiträge */
.ct-aktuelles {
	margin: 2.5rem 0;
	text-align: center;
}
.ct-aktuelles__head { /* Abschnittsüberschrift – Größe kommt aus der globalen H2-Einstellung */
	margin-bottom: 1.2rem;
}
.ct-aktuelles__list {
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
	max-width: 46rem;
	margin-inline: auto;
}
/* Foto links (~⅓), Text rechts – beide gleich hoch (Bild füllt die Texthöhe, kein toter Raum) */
.ct-aktuelles__row {
	display: flex;
	gap: 1.2rem;
	align-items: stretch;
	margin: 0.6rem 0 0;
}
.ct-aktuelles__media {
	flex: 0 0 29%;
	max-width: 29%;
	display: flex;
	flex-direction: column;
}
.ct-aktuelles__body {
	flex: 1 1 auto;
	min-width: 0;
}
.ct-aktuelles__thumb { /* füllt die Höhe der Spalte (= Texthöhe); Bild wird passend skaliert/beschnitten */
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #f4f4f2;
}
.ct-aktuelles__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Volle Bildhöhe zeigen statt zu beschneiden: bei breiten Screens (kurzer Text → niedrige Zeile)
	   erscheinen seitliche Balken, das Gesicht bleibt vollständig sichtbar – wie beim Querformat. */
	object-fit: contain;
	object-position: center;
}
/* Fußzeile: Bildnachweis (links, Spalte unter dem Foto) auf einer Linie mit dem zentrierten Datum.
   Die drei Spalten (29% | 1fr | 29%) halten das Datum mittig zur Karte und den Credit bündig unter dem Bild. */
.ct-aktuelles__foot {
	display: grid;
	grid-template-columns: 29% 1fr 29%;
	column-gap: 1.2rem;
	align-items: baseline;
	margin-top: 0.7rem;
}
.ct-aktuelles__credit { /* kurzer Bildnachweis – links unter dem Foto */
	font-size: 0.72rem;
	opacity: 0.55;
	margin: 0;
	text-align: left;
	grid-column: 1;
}
/* Schmale Screens: Blocksatz linksbündig (sonst zu große Lücken) */
@media (max-width: 540px) {
	.ct-aktuelles__row { gap: 0.8rem; }
	.ct-aktuelles__text { text-align: left; hyphens: none; }
}
/* Ausführlicher Bildnachweis am Ende eines Beitrags */
.ct-bildnachweis {
	font-size: 0.8rem;
	opacity: 0.6;
	margin-top: 2rem;
}
/* Beitrags-Detailseite: hochformatiges Beitragsbild auf den oberen Ausschnitt (Gesicht/Motiv)
   begrenzen, statt es in voller Höhe zu zeigen. Querformat bleibt unverändert. */
.single .wp-block-post-featured-image:has( img.ct-img-portrait ) {
	aspect-ratio: 1 / 1;
	max-width: 24rem;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 8px;
}
.single .wp-block-post-featured-image:has( img.ct-img-portrait ) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
/* Beitragstitel. Ohne Abschnittsüberschrift ist er eine H2 und übernimmt damit
 * automatisch Comic-Schrift und globale H2-Größe; steht die Abschnittsüberschrift
 * darüber, ist er eine H3 und bleibt bewusst kleiner und in der Grundschrift. */
.ct-aktuelles__title {
	margin: 0;
	line-height: 1.2;
}
h3.ct-aktuelles__title {
	font-size: 1.5rem;
	font-weight: 600;
}
.ct-aktuelles__title a { /* als Überschrift gestalten, nicht als unterstrichener Link */
	text-decoration: none;
	color: inherit;
}
.ct-aktuelles__title a:hover,
.ct-aktuelles__title a:focus {
	text-decoration: underline;
}
.ct-aktuelles__text {
	margin: 0;
	font-size: 1rem;
	text-align: justify;
	hyphens: auto; /* gleichmäßigere Ränder im Blocksatz */
}
.ct-aktuelles__date { /* zentriert zur Karte (mittlere Grid-Spalte der Fußzeile) */
	font-size: 0.82rem;
	opacity: 0.6;
	margin: 0;
	text-align: center;
	grid-column: 2;
}
/* Ganze Vorschau klickbar (stretched link): der Titel-Link überdeckt unsichtbar die
   gesamte Karte → ein Klick irgendwo auf den Eintrag öffnet die Beitrags-Detailseite.
   Hover unterstreicht weiterhin den Titel (über .ct-aktuelles__title a:hover). */
.ct-aktuelles__item {
	position: relative;
	/* Überschrift + Datum bleiben zentriert (von .ct-aktuelles geerbt); nur der Body-Text ist Blocksatz */
}
.ct-aktuelles__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Beitrags-Detailseite (Neuigkeiten): Meta-Zeile mit Datum + Kategorie-Pill, kein Autor */
.ct-post-meta {
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.6rem;
}
.ct-post-meta .wp-block-post-date {
	font-size: 0.9rem;
	opacity: 0.6;
}
.ct-cat-pills a {
	display: inline-block;
	background: var(--wp--preset--color--secondary, #e6e6e6);
	color: var(--wp--preset--color--contrast, #18181d);
	text-decoration: none;
	font-size: 0.78rem;
	line-height: 1.4;
	padding: 0.12rem 0.7rem;
	border-radius: 9999px;
}
.ct-cat-pills a:hover,
.ct-cat-pills a:focus {
	background: var(--wp--preset--color--contrast, #18181d);
	color: #fff;
}

/* Letztes Festival (Phase 1): Poster + Galerie */
.ct-last {
	margin-top: 3.5rem;
	text-align: center;
	position: relative; /* Bezug für den Overlay-Link */
}
/* Ganzer Bereich klickbar → Rückblick-Detailseite (Balken, Galeriefotos, alles) */
.ct-last__overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
}
.ct-last__head {
	margin-bottom: 0.2rem;
}
.ct-last__motto {
	opacity: 0.75;
	font-style: italic;
	margin-top: 0;
}
.ct-last__poster {
	display: inline-block;
	max-width: 340px;
	width: 100%;
	margin: 1.2rem auto 1.8rem;
}
.ct-last__poster img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.ct-last__gallery {
	margin-top: 1rem;
}

/* Kopier-Box (z. B. Kalender-Adresse) */
.ct-copybox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}
.ct-copybox__url {
	flex: 1 1 12rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: #fff;
	padding: 0.5rem 0.65rem;
	border-radius: 6px;
	font-size: 0.85rem;
}
.ct-copy {
	flex: 0 0 auto;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--contrast, #18181d);
	background: var(--wp--preset--color--contrast, #18181d);
	color: #fff;
	padding: 0.5rem 0.85rem;
	border-radius: 6px;
	font-size: 0.85rem;
	line-height: 1.2;
}
.ct-copy:hover {
	opacity: 0.9;
}
.ct-copy.is-copied {
	background: #2e7d32;
	border-color: #2e7d32;
}

/* FAQ-Akkordeon */
.ct-faq {
	margin-block: 2rem;
}
.ct-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--secondary, #e6e6e6);
	padding: 0.4rem 0;
}
.ct-faq__q {
	cursor: pointer;
	font-weight: 600;
	padding: 0.6rem 0;
	list-style: none;
}
.ct-faq__q::-webkit-details-marker { display: none; }
.ct-faq__q::before { content: "+ "; }
.ct-faq__item[open] .ct-faq__q::before { content: "– "; }
.ct-faq__a {
	padding: 0 0 0.8rem;
}

/* Künstler:innen-Übersicht (Seite „Comictage Künstler:innen") */
/* Steuerleiste: Jahr-Filter, Namenssuche, A–Z-Sprungleiste */
.ct-knst-filter {
	margin: 1.5rem 0 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.ct-knst-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}
.ct-knst-filter__years {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ct-pillgap);
}
/* Umschalter Festival ⇄ Zine: kräftiger als die Jahr-Pillen, damit erkennbar ist,
   dass hier zwei getrennte Bestände liegen. */
.ct-knst-mode {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ct-pillgap);
}
.ct-knst-mode .ct-pill {
	font-size: 0.95rem;
	padding: 0.3rem 1rem;
	--ct-capline: 2.4px; /* kräftiger als die Jahr-Pillen: zwei getrennte Bestände */
}
.ct-knst-mode .ct-pilltext { gap: 0.4rem; }
.ct-knst-mode__n {
	font-size: 0.78rem;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}
.ct-knst-az a.is-off {
	opacity: 0.28; /* Buchstabe in dieser Ansicht ohne Eintrag */
	pointer-events: none;
}
/* Suchfeld und Umschalter als eigene Spalte: Die Spalte ist so breit wie ihr breitestes
   Kind – das sind die beiden Umschalt-Pillen –, und das Suchfeld füllt sie aus. */
.ct-knst-top {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ct-pillgap);
	align-self: flex-start; /* nicht auf die volle Breite dehnen */
}
.ct-knst-top .ct-pillfield {
	max-width: none;
}
.ct-knst-filter__search {
	padding: 0.4rem 0.9rem;
	font-size: 0.9rem;
}
.ct-knst-az {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 0.2rem 0.3rem;
}
.ct-knst-az a,
.ct-knst-az span {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
	text-decoration: none;
	padding: 0 0.1rem;
}
.ct-knst-az a {
	color: var(--wp--preset--color--contrast, #18181d);
}
.ct-knst-az a:hover,
.ct-knst-az a:focus {
	text-decoration: underline;
}
.ct-knst-az span {
	opacity: 0.28; /* Buchstaben ohne Eintrag */
}
/* Phones: wider tap targets so neighbouring letters are not hit by mistake
 * (the alphabet then wraps to three rows). */
@media (max-width: 600px) {
	.ct-knst-az a,
	.ct-knst-az span {
		min-width: 24px;
		min-height: 28px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}
.ct-knst-empty {
	font-style: italic;
	opacity: 0.7;
}
.ct-knst__item.is-hidden {
	display: none;
}
.ct-knst {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2.2rem 1.6rem;
	margin-block: 2rem;
}
.ct-knst__item {
	scroll-margin-top: 1rem;
}
.ct-knst__item {
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* Textteil als eigene Flex-Spalte; der freie Platz bleibt UNTER den Angaben stehen,
 * damit unterschiedlich lange Karten sich nicht gegenseitig verschieben. */
.ct-knst__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}
/* Schmale Bildschirme: Foto klein links (Float), Infos umfließen es oben und laufen
 * darunter in voller Breite weiter – spart Höhe und vermeidet weißen Raum unter dem Bild. */
@media (max-width: 600px) {
	.ct-knst__item {
		display: flow-root; /* schließt den Float sauber ein */
	}
	.ct-knst__media {
		float: left;
		width: clamp(120px, 38vw, 170px);
		margin: 0 1rem 0.5rem 0;
	}
	.ct-knst__body {
		display: block; /* normaler Fluss statt BFC → Text umfließt das Bild und bricht darunter voll um */
	}
	/* Höhere Spezifität als die Basis-Regel (.ct-knst__name), die später in der Datei steht;
	 * negativer Rand kompensiert den Zeilendurchschuss → Buchstaben-Oberkante auf Bildkante. */
	.ct-knst__item .ct-knst__name {
		margin-top: -0.25rem;
	}
}
.ct-knst__photo {
	display: block; /* auch als <a> (verlinkt) korrekt als Box rendern */
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--secondary, #e6e6e6);
	text-decoration: none; /* Foto/Initialen als Link – aber KEINE Unterstreichung */
	color: inherit;
}
.ct-knst__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.ct-knst__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e9e9e9;
}
/* Bild-Ersatz: zwei Initialen (Vor-/Nachname) in einem Kreis, der den fehlenden Kopf andeutet. */
.ct-knst__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #ffffff;
	color: #8f8f8f;
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
	letter-spacing: 0.04em;
	line-height: 1;
}
.ct-knst__credit {
	font-size: 0.7rem;
	opacity: 0.55;
	margin: 0.3rem 0 0;
}
.ct-knst__name {
	margin: 0.5rem 0 0;
	font-size: 1.15rem;
	line-height: 1.2;
}
.ct-knst__herkunft {
	margin: 0.1rem 0 0;
	font-size: 0.82rem;
	opacity: 0.65;
}
.ct-knst__years {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.45rem 0 0;
}
.ct-knst__year {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1;
	padding: 0.05rem 0.55rem 0.12rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--secondary, #e6e6e6);
	color: var(--wp--preset--color--contrast, #18181d);
}
.ct-knst__bio {
	margin: 0.5rem 0 0;
	font-size: 0.86rem;
	line-height: 1.45;
	opacity: 0.85;
}
/* Gekürzte Bio ist als Ganzes ein Link zur Detailseite – aber wie Fließtext, dezent. */
/* Gekürzter Vorschautext, der als Ganzes zur Detailseite führt. Bewusst OHNE
 * Unterstreichung – auch beim Überfahren: ein mehrzeilig unterstrichener Absatz wäre
 * unruhig, und die drei Punkte am Ende zeigen bereits, dass es weitergeht. */
.ct-teaserlink {
	color: inherit;
	text-decoration: none;
}
.ct-teaserlink:hover,
.ct-teaserlink:focus-visible {
	text-decoration: none;
}
.ct-knst__auftritte {
	margin: 0.15rem 0 0;
	font-size: 0.82rem;
}
.ct-knst__auftritte summary {
	cursor: pointer;
	opacity: 0.7;
}
.ct-knst__auftritte ul {
	margin: 0.35rem 0 0;
	padding-left: 1.1rem;
}
.ct-knst__auftritte li {
	margin: 0.12rem 0;
	opacity: 0.85;
}
/* Symbolzeile folgt direkt auf die Kurzbiografie – bewusst NICHT per `margin-top: auto`
 * an den Kartenboden geheftet: sonst schiebt ein aufgeklappter „Bei den Comictagen"-Block
 * die Symbolzeilen aller Nachbarkarten derselben Rasterzeile mit nach unten. */
.ct-knst__links {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.7rem;
	margin-bottom: 0;
	padding-top: 0;
}
.ct-knst__icon {
	display: inline-flex;
	color: inherit;
	opacity: 0.7;
	line-height: 0;
	transition: opacity 0.15s ease;
}
.ct-knst__icon:hover,
.ct-knst__icon:focus {
	opacity: 1;
}
.ct-knst__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Karten einer Rasterzeile teilen sich per `subgrid` dieselben Zeilen:
 * Foto · Bildnachweis · Name · Herkunft · Jahre · Kurzbiografie · Symbole · Auftritte · Abstand.
 * Jede Zeile ist so hoch wie ihr höchster Eintrag – dadurch stehen Namen und Symbolzeilen
 * nebeneinanderliegender Karten bündig, OHNE dass die Karten aneinander gekoppelt sind:
 * ein aufgeklapptes „Bei den Comictagen" wächst nur in die letzte Zeile und verschiebt
 * bei den Nachbarkarten nichts mehr. (Früher: `margin-top: auto` an der Symbolzeile –
 * bündig, aber jede Höhenänderung zog die ganze Rasterzeile mit.) */
@supports (grid-template-rows: subgrid) {
@media (min-width: 601px) {
	.ct-knst {
		row-gap: 0; /* Abstand macht die Leerzeile am Kartenende, sonst klaffte jede Zeile */
	}
	.ct-knst__item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 9;
		height: auto;
	}
	.ct-knst__item::after {
		content: "";
		grid-row: 9;
		height: 2.2rem;
	}
	.ct-knst__media {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: 1 / span 2;
	}
	.ct-knst__photo  { grid-row: 1; }
	.ct-knst__credit { grid-row: 2; }
	.ct-knst__body {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: 3 / span 6;
	}
	/* Zeilen fest zuordnen: fehlt einer Karte z. B. die Herkunft, darf nicht alles nachrutschen. */
	.ct-knst__name      { grid-row: 1; }
	.ct-knst__herkunft  { grid-row: 2; }
	.ct-knst__years     { grid-row: 3; }
	.ct-knst__bio       { grid-row: 4; }
	.ct-knst__links     { grid-row: 5; align-self: end; }
	.ct-knst__auftritte { grid-row: 6; align-self: start; }
}
} /* @supports: ohne subgrid bleibt es beim einfachen Fluss (Angaben folgen der Biografie) */

/* Zurück-Link oben auf der Künstler:in-Detailseite (Ziel je nach Herkunft). */
/* Zurück-Link über dem Titel – gleich auf allen Detailseiten (Künstler:innen, Meldungen;
   die Event-Seite bekommt dieselbe Optik weiter unten auf TECs eigenes Markup gescoped). */
.ct-back { margin: 0 0 0.4rem; font-weight: 600; }
.ct-back a { text-decoration: none; }
.ct-back a:hover, .ct-back a:focus { text-decoration: underline; }

/* Künstler:in-Detailseite (single-kuenstler): großzügig – großes Foto neben den Infos. */
.ct-knst-detail {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.4rem;
	align-items: flex-start;
	margin-top: 1.4rem;
}
.ct-knst-detail__media { flex: 0 0 clamp(200px, 34%, 300px); max-width: 300px; }
.ct-knst-detail__body { flex: 1 1 340px; min-width: 0; }
.ct-knst-detail__herkunft { font-size: 1.05rem; opacity: 0.7; margin: 0 0 0.7rem; }
.ct-knst-detail__bio { margin: 1rem 0 0; line-height: 1.6; }
.ct-knst-detail__bio p { margin: 0 0 0.8rem; }
.ct-knst-detail__bio p:last-child { margin-bottom: 0; }
/* Detailseite: Verweise als vertikale Liste – Symbol vorn, dahinter Link/Handle. */
.ct-knst-detail__links {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.ct-knst-detail__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	width: fit-content;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}
.ct-knst-detail__link:hover,
.ct-knst-detail__link:focus { text-decoration: underline; }
.ct-knst-detail__link .ct-knst__icon { flex: none; opacity: 0.75; }
.ct-knst-detail__linktext { min-width: 0; overflow-wrap: anywhere; }
.ct-knst-detail__auftritte { margin-top: 1.8rem; }
/* Schrift, Gewicht und Größe kommen aus der globalen H2-Einstellung. */
.ct-knst-detail__auftritte h2 {
	margin: 0 0 0.6rem;
}
.ct-knst-detail__auftritte ul { margin: 0; padding-left: 1.1rem; }
.ct-knst-detail__auftritte li { margin: 0.25rem 0; }

/* Save the Date (Phase 2) */
.ct-std {
	text-align: center;
	margin: 1rem 0 1.5rem;
}
.ct-std__date {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.8rem, 9vw, 4.6rem);
	line-height: 1.04;
	margin: 0.2rem 0;
}
.ct-std__date--tbd {
	opacity: 0.7;
}
.ct-std__ort {
	font-size: 1.1rem;
	opacity: 0.8;
	margin: 0.2rem 0 0;
}
.ct-std__countdown {
	font-size: 1rem;
	opacity: 0.7;
	margin: 0.5rem 0 0;
	min-height: 1.2em;
}

/* Programm (Phase 3): Tages-Gruppierung, Filter, Symbole */
.ct-prog-eckdaten {
	font-size: clamp(1.3rem, 4.5vw, 2rem);
	margin-bottom: 1.5rem;
}
.ct-prog-days {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ct-pillgap);
	margin: 0 0 1.8rem;
}
.ct-prog-day { margin: 0 0 2.2rem; scroll-margin-top: 1rem; }
/* Tagesüberschrift: Schrift, Größe, Gewicht und Zeilenhöhe kommen aus der globalen
 * H2-Einstellung (Design → Stile → Typografie → Überschriften) – hier steht nur noch,
 * was diese Überschrift baulich ausmacht: die Linie darunter. */
.ct-prog-day__head {
	margin: 0; /* der Abstand zur Linie kommt aus .ct-event padding-block-start (einheitlich) */
	padding-bottom: 0.2rem;
	border-bottom: 2px solid var(--wp--preset--color--contrast, #18181d);
}
.ct-prog-day.is-hidden,
.ct-event.is-hidden { display: none; }
.ct-event.is-past { opacity: 0.4; }
.ct-prog-day.is-past .ct-prog-day__head { opacity: 0.5; }
.ct-prog-empty { font-style: italic; opacity: 0.7; }
.ct-event__cat {
	display: inline-flex;
	align-items: center;
	gap: 0.32rem;
}
.ct-event__cat svg { width: 16px; height: 16px; }
.ct-event__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.55rem 0 0;
}
.ct-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	line-height: 1.5;
	padding: 0.1rem 0.6rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--secondary, #e6e6e6);
	color: var(--wp--preset--color--contrast, #18181d);
	text-decoration: none;
}
.ct-chip svg { width: 15px; height: 15px; }
.ct-chip--link:hover,
.ct-chip--link:focus { background: var(--wp--preset--color--contrast, #18181d); color: #fff; }

/* Programm: Typ-Filter + ganze Karte klickbar + Künstler auf Event-Seite */
.ct-prog-days { margin-bottom: 0.6rem; }
.ct-prog-cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ct-pillgap);
	margin: 0 0 1.8rem;
}
/* Trägt die Beschriftung ein Symbol, rückt es links näher an den Rahmen: Sonst steht vor dem
   Symbol mehr Luft (11,2 px) als zwischen Symbol und erstem Buchstaben (4,8 px), und die Pille
   wirkt vorne aufgeblasen. Nebeneffekt, der den Ausschlag gab: Die Typenleiste passt dadurch
   wieder in eine Zeile – ihr fehlten in der Textspalte nur 13 px. */
/* Doppelt benannt, damit die Regel gegen `.ct-prog-cats .ct-pill` ankommt – die hat zwei
   Klassen und schlüge eine einzelne. */
.ct-pill.ct-pill--icon {
	/* Zwischen zwei Ungleichgewichten: 0,7 rem ließ das Symbol vorne schwimmen, 0,3 rem
	   (der Abstand Symbol → Text) drückte es an die Linie – denn die Tinte des Symbols sitzt
	   noch einmal knapp 2 px innerhalb seines Kastens. Bei 0,4 rem bleibt die Zeile einzeilig
	   (745 von 760 px). */
	padding-inline-start: 0.4rem;
}

/* Ganze Event-Karte klickbar (stretched link), Titel nicht unterstrichen */
.ct-event { position: relative; }
.ct-event__title a { text-decoration: none; color: inherit; }
.ct-event__title a:hover,
.ct-event__title a:focus { text-decoration: underline; }
.ct-event__title a::after { content: ""; position: absolute; inset: 0; }
.ct-chip--link { position: relative; z-index: 1; } /* Anmelde-/Ticket-Link bleibt eigener Klick */
/* Künstler:innen unter der Event-Beschreibung */
/* Einzel-Event: Comic-Foto klein links neben der Beschreibung (wie in der Programm-Liste);
 * der Text fließt rechts daneben. */
.ct-ev-pic {
	float: left;
	width: clamp(120px, 30%, 190px);
	margin: 0.3rem 1.4rem 0.8rem 0;
}
.ct-ev-pic__img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	background: transparent;
}
@media (max-width: 420px) {
	/* Sehr schmal: nicht umfließen, sondern kompakt oben links. */
	.ct-ev-pic { width: 45%; }
}

.ct-ev-artists {
	clear: both; /* unter das evtl. floatende Bild rücken */
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--secondary, #e6e6e6);
}
/* Schrift und Gewicht müssen gesetzt bleiben, weil TEC allen Überschriften auf der
 * Event-Seite eine eigene Schrift gibt; Größe folgt der globalen H2-Einstellung. */
.ct-ev-artists__head {
	font-family: var(--wp--preset--font-family--amatic), system-ui, sans-serif;
	font-weight: 700;
	margin: 0 0 1rem;
}
.ct-ev-artist {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
	margin-bottom: 1.6rem;
}
.ct-ev-artist__photo { flex: 0 0 110px; text-decoration: none; }
.ct-ev-artist__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	background: #e9e9e9;
}
.ct-ev-artist__photo img {
	width: 110px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
	border-radius: 6px;
	display: block;
}
.ct-ev-artist__name { margin: 0; font-size: 1.2rem; }
.ct-ev-artist__name a { color: inherit; text-decoration: none; }
.ct-ev-artist__name a:hover, .ct-ev-artist__name a:focus { text-decoration: underline; }
.ct-ev-artist__herkunft { margin: 0.1rem 0 0; font-size: 0.85rem; opacity: 0.65; }
.ct-ev-artist__bio { margin: 0.45rem 0 0.4rem; font-size: 0.9rem; line-height: 1.5; }
/* Künstler:in-Einzelseite (Ziel des „mehr"-Links): Beitragsdatum ergibt hier keinen Sinn. */
.single-kuenstler .wp-block-post-date { display: none; }
@media (max-width: 480px) {
	.ct-ev-artist { flex-direction: column; }
}

/* The Events Calendar – Einzel-Event: Abschnittsüberschriften (Amatic SC) größer + lesbarer.
   Höhere Spezifität als TECs eigene Regel `.tribe-events-meta-group .…-section-title`,
   sonst überschreibt das Plugin-CSS unsere Größe (FOUC: kurz groß, dann klein). */
/* Größe = globale H2-Einstellung. Ohne die Variable gewinnt hier TECs eigene Regel
 * (die Überschriften fielen auf 14px), deshalb nicht einfach weglassen. */
.single-tribe_events .tribe-events-meta-group .tribe-events-single-section-title,
.single-tribe_events .tribe-events-single-section-title {
	font-size: var(--ct-h2-size, 1.6rem);
	letter-spacing: 0.02em;
}

/* Einzel-Event an die übrigen Detailseiten angleichen (Vorbild: Künstler:in-Detailseite).
 * Die Seite kommt vom Plugin und bringt eigene Breite, Schrift und Größen mit – hier
 * werden nur die vier Stellen zurückgeholt, an denen es vom Theme abwich.
 * Durchgehend `.single-tribe_events` davor, weil TECs eigene Regeln sonst gewinnen. */

/* 1. Textbreite wie überall: Inhaltsbreite des Themes, zentriert. */
.single-tribe_events .tribe-events-single,
.single-tribe_events .tribe-events-back,
.single-tribe_events #tribe-events-content {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}

/* 2. Titel wie jede andere H1: Comic-Schrift in der globalen H1-Größe. */
.single-tribe_events h1.tribe-events-single-event-title {
	font-family: var(--wp--preset--font-family--amatic), system-ui, sans-serif;
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 700;
	line-height: 1.0;
	margin-block: 0.2em 0.15em;
}

/* 3. Fließtext in Grundschrift und -größe (TEC setzt 18px in eigener Schrift). */
.single-tribe_events .tribe-events-schedule,
.single-tribe_events .tribe-events-single-event-description,
.single-tribe_events .tribe-events-single-event-description p,
.single-tribe_events .tribe-events-event-meta {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

/* 4. Abstand oben wie auf den übrigen Detailseiten. TEC stapelt drei Abstände
 * übereinander (Blockrand 19px + Template-Polster 40px + Rand am Zurück-Link 22px = 101px);
 * auf der Künstler:in-Seite sind es 52px. Die ersten beiden abräumen, den dritten setzen. */
.single-tribe_events .tribe-block.tec-block__single-event {
	margin-top: 0;
}
.single-tribe_events #tribe-events-pg-template {
	padding-top: 0;
}
.single-tribe_events .tribe-events-back {
	margin-top: 2rem;
}

/* 5. Überschriften im Event-Inhalt: TEC setzt für alle h1–h6 seine eigene Schrift
 *    (Helvetica Neue). Die Abschnittsüberschrift „Mit dabei" gehört zur Comic-Schrift
 *    wie jede andere H2; die Künstlernamen darunter bleiben in der Grundschrift –
 *    genau wie in der Künstler:innen-Übersicht. */
.single-tribe_events .ct-ev-artists__head {
	font-family: var(--wp--preset--font-family--amatic), system-ui, sans-serif;
}
.single-tribe_events .ct-ev-artist__name {
	font-family: inherit;
}

/* 6. Links auf die Theme-Farbe holen. TEC färbt sie blau (#334AFF) und setzt auch beim
 *    Überfahren eine eigene Farbe – deshalb muss :hover mitgenannt werden, sonst wird der
 *    Künstlername beim Überfahren blau. `:is()` hält die Liste kurz, die Spezifität reicht
 *    gegen die Plugin-Regeln. */
.single-tribe_events :is(.tribe-events-meta-group, .tribe-events-sub-nav, .ct-ev-artists,
	.tribe-events-back) :is(a, a:hover, a:focus) {
	color: var(--wp--preset--color--contrast, #18181d);
	text-decoration-color: currentColor;
}
/* TEC zeichnet seine Links mit `border-bottom` statt einer echten Unterstreichung; zusammen
 * mit unserer Unterstreichung beim Überfahren ergab das einen Doppelstrich. Die Linie
 * kommt jetzt allein aus dem Linkstil oben. Der Karten-Knopf behält seinen Rahmen. */
.single-tribe_events .tribe-events-single-event-description a:not(.ct-ev-map__link),
.single-tribe_events .tribe-events-meta-group a:not(.ct-ev-map__link),
.single-tribe_events .tribe-events-back a {
	border-bottom: 0;
}

/* TEC setzt das Datum in ein <abbr>; Browser geben solchen Elementen von Haus aus eine
 * gepunktete Unterstreichung – die sieht hier nach Link aus, ist aber keiner. */
.single-tribe_events abbr[class*="tribe-events"] {
	text-decoration: none;
}

/* 7. Vor/Zurück-Navigation am Seitenfuß: Die Liste bringt das Standardpolster von 40px mit
 *    und steht dadurch links über die Textspalte hinaus eingerückt. Bündig ist mehr Platz
 *    für die Titel, und sie brechen seltener um. */
.single-tribe_events .tribe-events-sub-nav {
	padding-left: 0;
	list-style: none;
}
/* Pfeil in eine eigene Spalte, die nicht mitschrumpft: der Titel bricht daneben um,
 * statt den Pfeil in die zweite Zeile zu ziehen. TEC baut `<a><span>«</span> Titel</a>`. */
.single-tribe_events .tribe-events-sub-nav a {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	border-bottom: 0; /* TECs unechte Unterstreichung – als Flex-Box liefe sie über die volle Breite */
}
.single-tribe_events .tribe-events-sub-nav a > span {
	flex: none;
}
.single-tribe_events .tribe-events-nav-next a {
	justify-content: flex-end;
	text-align: right;
}

/* 8. Zurück-Link wie auf der Künstler:in-Seite. */
.single-tribe_events .tribe-events-back a {
	font-family: inherit; /* TEC setzt hier eigene Schrift und 16px */
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	text-decoration: none;
}
.single-tribe_events .tribe-events-back a:hover,
.single-tribe_events .tribe-events-back a:focus {
	text-decoration: underline;
}

/* Mehrere Kategorien pro Event */
.ct-event__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.9rem;
	margin: 0 0 0.2rem;
}
.ct-event__cats .ct-event__cat { margin: 0; }

/* Einzel-Event: „Auf Google Maps öffnen"-Button */
.ct-ev-map { margin: 0.7rem 0 0; }
.ct-ev-map__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--contrast, #18181d);
	border-radius: 6px;
	padding: 0.35rem 0.85rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast, #18181d);
}
.ct-ev-map__link:hover,
.ct-ev-map__link:focus {
	background: var(--wp--preset--color--contrast, #18181d);
	color: #fff;
}
.ct-ev-map__link svg { width: 18px; height: 18px; }

/* Comic-News-Aggregator (Seite „Neues aus der Comic-Welt") */
.ct-news {
	max-width: 48rem;
	margin-inline: auto;
}
.ct-news__disclaimer {
	font-size: 0.85rem;
	opacity: 0.7;
	border-left: 3px solid var(--wp--preset--color--secondary, #e6e6e6);
	padding-left: 0.9rem;
	margin-bottom: 1.6rem;
}
.ct-news__hint {
	display: block;
	margin-top: 0.2rem;
}
.ct-news-filter {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin-bottom: 1.8rem;
}
.ct-news-filter__search {
	display: flex;
	gap: var(--ct-pillgap);
	align-items: center;
}
.ct-news-filter__search .ct-pillfield {
	flex: 1 1 auto;
	max-width: none;
}
.ct-news-filter__search input[type="search"] {
	padding: 0.5rem 0.8rem;
	font-size: 0.9rem;
}
.ct-news-filter__search .ct-pill {
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
}
.ct-news-filter__clear {
	text-decoration: none;
	font-size: 1.4rem;
	line-height: 1;
	opacity: 0.6;
}
.ct-news-filter__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ct-pillgap);
}
.ct-news-tag {
	font-size: 0.82rem;
	padding: 0.18rem 0.7rem;
}
.ct-news__list {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
.ct-news__item {
	position: relative; /* Bezug für den Stretched-Link (ganze Karte klickbar) */
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--wp--preset--color--secondary, #e6e6e6);
}
.ct-news__item:last-child {
	border-bottom: 0;
}
.ct-news__source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.3rem;
}
.ct-news__src-name {
	/* Zurückgenommen, aber nicht blass: Bei 0,6 war der Quellname schwächer, als seine Rolle
	   hergibt – er sagt, woher die Meldung stammt. Die Sprache dahinter bleibt bei 0,6 und
	   liegt damit eine Stufe darunter. Favicon bleibt voll deckend. */
	opacity: 0.75;
}
.ct-news__favicon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	border-radius: 3px;
	flex: none;
}
/* Die Sprache ist eine Angabe zur Meldung, kein Bedienelement – sie hat deshalb weder
   Füllung noch Kapselform, die einen Filter vortäuschen würden. Die eckigen Klammern nehmen
   die Form der Textkästen aus der oberen Zone auf, ohne deren Schrift in die Liste zu tragen:
   Grundschrift wie der Meldungstext, gleiches Wort wie im Filter. Die Klammern selbst stehen
   im Markup (comictage_render_comic_news), nicht hier. */
.ct-news__tag {
	text-transform: none;
	letter-spacing: 0;
	background: none;
	border-radius: 0;
	padding: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast, #18181d);
	/* Nicht lauter als der Quellname: Die Sprache ist die nebensächlichere der beiden Angaben.
	   Weiter zurücknehmen geht nicht – unterhalb dieser Deckkraft fällt der Kontrast unter die
	   Lesbarkeitsschwelle. Die Abstufung kommt deshalb zusätzlich über die Schriftgröße. */
	opacity: 0.6;
}
.ct-news__title {
	margin: 0.1rem 0 0.35rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.22;
}
.ct-news__title a {
	color: inherit;
	text-decoration: none;
}
/* Ganze Karte klickbar: der Titel-Link überdeckt unsichtbar den ganzen Eintrag. */
.ct-news__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.ct-news__title a:hover,
.ct-news__title a:focus {
	text-decoration: underline;
}
.ct-news__text {
	margin: 0 0 0.4rem;
}
.ct-news__date {
	font-size: 0.8rem;
	opacity: 0.55;
	margin: 0;
}
/* Bereits geöffnete Artikel ausgegraut (clientseitig, localStorage) */
.ct-news__item.is-read {
	opacity: 0.5;
}
.ct-news__item.is-read .ct-news__title a::after {
	content: " ✓";
	font-size: 0.8em;
	opacity: 0.7;
}
.ct-news__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	margin-top: 2rem;
}
.ct-news__pglink {
	text-decoration: none;
}
.ct-news__pgnum {
	font-size: 0.85rem;
	opacity: 0.6;
}

/* Comic-News: Filterzeile (Sprach-Tags links, Quellen-Dropdown rechts) */
.ct-news-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
}
.ct-news-filter__source {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}
.ct-news-filter__source .ct-pillfield {
	max-width: 15rem;
}
.ct-news-filter__source select {
	padding: 0.35rem 0.5rem;
	max-width: 100%;
	font-size: 0.9rem;
}
.ct-news-filter__srcgo {
	padding: 0.35rem 0.8rem;
	font-size: 0.9rem;
}

/* Comic-News: „Nur ungelesene"-Schalter (erst sichtbar, wenn JS bereit ist) */
.ct-news-filter__opts {
	display: flex;
	justify-content: flex-end;
}
.ct-news__unread {
	display: none; /* ohne JS verborgen */
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.9rem;
	user-select: none;
}
.ct-news.is-js .ct-news__unread {
	display: inline-flex;
}
.ct-news__unread-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: -1px;
	overflow: hidden;
}
.ct-news__switch {
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 9999px;
	background: var(--wp--preset--color--secondary, #d7d7d7);
	transition: background 0.15s ease;
	flex: none;
}
.ct-news__switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}
.ct-news__unread-input:checked + .ct-news__switch {
	background: var(--wp--preset--color--contrast, #18181d);
}
.ct-news__unread-input:checked + .ct-news__switch::after {
	transform: translateX(16px);
}
.ct-news__unread-input:focus-visible + .ct-news__switch {
	outline: 2px solid var(--wp--preset--color--contrast, #18181d);
	outline-offset: 2px;
}
/* Toggle an → gelesene Einträge ausblenden */
.ct-news.is-unread-only .ct-news__item.is-read {
	display: none;
}
/* Hinweis, wenn auf der Seite nichts Ungelesenes übrig ist (CSS-only via :has) */
.ct-news__allread {
	display: none;
	font-style: italic;
	opacity: 0.7;
	text-align: center;
	padding: 1rem 0;
}
.ct-news.is-unread-only .ct-news__allread {
	display: block;
}
.ct-news.is-unread-only .ct-news__list:has( .ct-news__item:not(.is-read) ) ~ .ct-news__allread {
	display: none;
}

/* ── Andere Comic-Festivals (Block comictage/festival-grid) ───────────── */
.ct-festivals {
	max-width: 46rem;
	margin: 0 auto;
}
.ct-festivals__empty {
	text-align: center;
	opacity: 0.7;
}

/* Sortier-Schalter – erst sichtbar, wenn JS bereit (ct.js setzt .is-js). */
.ct-festivals__sort {
	display: none;
}
.ct-festivals.is-js .ct-festivals__sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ct-pillgap);
	margin-bottom: 1.6rem;
}
.ct-festivals__sortlabel {
	opacity: 0.75;
	font-size: 0.95rem;
}
.ct-festivals__sortbtn {
	font-size: 0.9rem;
	padding: 0.25rem 0.9rem;
	/* Kein Abblenden mehr: Wie in allen anderen Filterleisten zeigt der gefüllte Kasten,
	   welche Sortierung gilt. */
}

.ct-festivals__list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ct-festival {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	padding: 1.3rem 1.5rem;
	background: rgba(0, 0, 0, 0.015);
}
.ct-festival__name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--system, system-ui, sans-serif);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.2;
}
.ct-festival__favicon {
	width: 28px;
	height: 28px;
	flex: none;
	object-fit: contain;
	border-radius: 6px;
	background: #fff;
	padding: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ct-festival__termin {
	margin: 0 0 0.55rem;
	font-size: 0.98rem;
}
.ct-festival__terminlabel {
	font-weight: 700;
}
.ct-festival__desc {
	margin: 0 0 0.95rem;
}
.ct-festival__desc :where(p) {
	margin: 0;
}
.ct-festival__desc :where(p) + :where(p) {
	margin-top: 0.6rem;
}
.ct-festival__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
}
.ct-festival__web {
	display: inline-block;
	padding: 0.4rem 1.1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast, #161616);
	color: var(--wp--preset--color--base, #fff);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}
.ct-festival__web:hover {
	opacity: 0.85;
}
.ct-festival__social {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.ct-festival__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	color: inherit;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}
.ct-festival__icon:hover {
	opacity: 1;
}
@media (max-width: 600px) {
	.ct-festival {
		padding: 1.1rem 1.15rem;
	}
	.ct-festival__name {
		font-size: 1.28rem;
	}
}

/* Schwerpunkt-Pills (Festival-Karten) */
.ct-festival__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
}
.ct-festival__pill {
	display: inline-block;
	padding: 0.12rem 0.7rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.55;
	background: #ececec;
	color: #333;
}
.ct-festival__pill--comic {
	background: #ffe08a;
	color: #5a4500;
}
.ct-festival__pill--manga {
	background: #ffd0dc;
	color: #7a1733;
}
.ct-festival__pill--kinder {
	background: #cdeccb;
	color: #1f5520;
}
.ct-festival__pill--popkultur {
	background: #d4e4ff;
	color: #143a73;
}

/* ── Newsletter ──────────────────────────────────────────────────────── */
/* Anmeldeformular */
.ct-nl-form {
	max-width: 40rem;
	margin: 1.5rem auto;
}
.ct-nl-form__form {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	padding: 1.4rem 1.5rem;
	background: rgba(0, 0, 0, 0.015);
}
.ct-nl-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ct-nl-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1rem;
}
.ct-nl-form__field {
	flex: 1 1 12rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.9rem;
}
.ct-nl-form__field input {
	padding: 0.5rem 0.7rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 7px;
	font: inherit;
}
.ct-nl-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 1rem 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
}
.ct-nl-form__consent input {
	margin-top: 0.2rem;
	flex: none;
}
.ct-nl-form__submit {
	margin-top: 1.1rem;
	display: inline-block;
	padding: 0.55rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast, #161616);
	color: var(--wp--preset--color--base, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ct-nl-form__submit:hover {
	opacity: 0.88;
}
.ct-nl-msg { /* drawn caption box (SVG) with headline – must not be overlooked */
	position: relative;
	max-width: 40rem;
	margin: 0.5rem auto 2rem;
	padding: 1.3rem 1.6rem 1.4rem;
	--ct-capline: 2px;
	--ct-capfill: #fff;
}
.ct-nl-msg > p {
	position: relative; /* above the drawn box */
	margin: 0;
}
.ct-nl-msg__title {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
}
.ct-nl-msg > .ct-nl-msg__title {
	margin-bottom: 0.4rem;
}
.ct-nl-msg__text {
	font-size: 1.05rem;
}
.ct-nl-msg > .ct-nl-msg__more {
	margin-top: 0.8rem;
	font-size: 0.95rem;
}
.ct-nl-msg--err {
	--ct-capfill: #fbe7e7;
	color: #8a1f1f;
}

/* Archiv-Liste */
.ct-nl-archiv {
	max-width: 40rem;
	margin: 1.5rem auto;
	padding: 0;
	list-style: none;
}
.ct-nl-archiv__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.ct-nl-archiv__item a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.8rem;
	padding: 0.7rem 0.2rem;
	text-decoration: none;
	color: inherit;
}
.ct-nl-archiv__item a:hover .ct-nl-archiv__title {
	text-decoration: underline;
}
.ct-nl-archiv__date {
	flex: none;
	min-width: 9rem;
	font-size: 0.85rem;
	opacity: 0.6;
	text-transform: capitalize;
}
.ct-nl-archiv__title {
	font-weight: 600;
}
.ct-nl-archiv__empty {
	max-width: 40rem;
	margin: 1.5rem auto;
	opacity: 0.7;
	font-style: italic;
}

/* Online-Ausgabe. Breite = Inhaltsbreite des Themes, damit der Text bündig unter dem
 * Seitentitel steht; mit eigenen 42rem war er gegenüber der Überschrift eingerückt. */
.ct-nl-issue {
	max-width: var(--wp--style--global--content-size, 760px);
	margin: 0 auto;
}
.ct-nl-issue__kopf {
	line-height: 1.6;
}
.ct-nl-issue__item {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 1.8rem;
	padding-top: 1.6rem;
}
.ct-nl-issue__media img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-bottom: 0.9rem;
}
/* Größe und Zeilenhöhe kommen aus der globalen H2-Einstellung. */
.ct-nl-issue__title {
	margin: 0 0 0.4rem;
}
.ct-nl-issue__body {
	line-height: 1.6;
}
.ct-nl-issue__more {
	margin-top: 0.4rem;
}
.ct-nl-issue__fuss {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 1.8rem;
	padding-top: 1.4rem;
	line-height: 1.6;
}

/* Newsletter-Formular: gesperrter Submit-Button + Archiv-Abschnittstitel */
.ct-nl-form__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.ct-nl-archiv__head {
	margin-top: 2.5rem;
}
.ct-nl-archiv__intro {
	margin-top: 0;
}

/* Vorschau der eigenen Blöcke im Editor: nur ein dezenter Rahmen, damit erkennbar ist,
 * wo der dynamische Inhalt beginnt. Im Frontend existieren diese Klassen nicht. */
.ct-block-vorschau {
	position: relative;
}
.ct-block-leer {
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 6px;
	font-style: italic;
	opacity: 0.7;
}

/* Bildansicht der Preisträger-Galerien (siehe ct.js). Als <dialog>: Escape, Fokusfalle
 * und der abdunkelnde Hintergrund kommen vom Element selbst. */
.ct-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overscroll-behavior: contain;
}
/* `display` NUR im geöffneten Zustand setzen: ein `display: grid` an `.ct-lightbox`
 * überschreibt die Browserregel `dialog:not([open]) { display: none }` – der Dialog
 * bliebe nach dem Schließen als Bild auf der Seite stehen. */
.ct-lightbox[open] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr auto;
	align-items: center;
	gap: 0.5rem;
}
.ct-lightbox::backdrop {
	background: rgba(24, 24, 29, 0.92);
}
.ct-lightbox__img {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	max-width: 100%;
	max-height: calc(100dvh - 5rem);
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}
.ct-lightbox__close,
.ct-lightbox__nav {
	/* Ohne `appearance: none` behält iOS Safari das eigene Aussehen für <button> bei und
	   zeichnet ein abgerundetes Rechteck statt des runden Knopfs – auf dem iPhone wirkte der
	   Schließen-Knopf dadurch eckig, während die Pfeile rund blieben. */
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%; /* eindeutiger als 9999px, beide Knöpfe sind quadratisch */
	cursor: pointer;
	line-height: 1;
	font-family: inherit;
	transition: background 0.15s ease;
}
.ct-lightbox__close:hover,
.ct-lightbox__nav:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.3);
}
.ct-lightbox__nav:disabled {
	opacity: 0.25;
	cursor: default;
}
.ct-lightbox__close {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	width: 2.6rem;
	height: 2.6rem;
	font-size: 1.7rem;
}
.ct-lightbox__nav {
	grid-row: 1;
	width: 3rem;
	height: 3rem;
	font-size: 1.8rem;
	margin-inline: 0.6rem;
}
.ct-lightbox__nav--prev { grid-column: 1; }
.ct-lightbox__nav--next { grid-column: 3; }
.ct-lightbox__caption {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	padding: 0.6rem 1rem 1rem;
	text-align: center;
	color: #fff;
	font-size: 0.95rem;
}
.ct-lightbox__count::before {
	content: " · ";
	opacity: 0.6;
}
.ct-lightbox__count:empty::before { content: none; }
@media (max-width: 600px) {
	/* Auf dem Handy die Pfeile unter das Bild, damit es die volle Breite bekommt.
	   Der Schließen-Knopf bekommt eine eigene Zeile ÜBER dem Bild: schwebend oben rechts
	   lag er sonst auf dem Comic – schlecht erkennbar und die Zeichnung verdeckt. Er bleibt
	   damit dort, wo man ihn erwartet, kostet aber keine Bildfläche. Auf größeren Schirmen
	   ist ringsum genug Platz, dort schwebt er weiterhin. */
	.ct-lightbox[open] {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto auto;
	}
	.ct-lightbox__close {
		position: static;
		grid-row: 1;
		grid-column: 1;
		justify-self: end;
		margin: 0.6rem 0.8rem 0;
	}
	.ct-lightbox__img {
		grid-column: 1;
		grid-row: 2;
		max-height: calc(100dvh - 10rem); /* Kopfzeile + Pfeile + Bildunterschrift */
	}
	.ct-lightbox__nav { grid-row: 3; justify-self: center; }
	.ct-lightbox__nav--prev { grid-column: 1; margin-right: 4rem; }
	.ct-lightbox__nav--next { grid-column: 1; margin-left: 4rem; }
	.ct-lightbox__caption { grid-row: 4; }
}

/* Preisträgerseiten: die Galerien in der Seitenmitte als Miniaturenreihe.
 *
 * Vorher stand jede Comicseite in voller Breite untereinander – die Seite war rund
 * 26 Bildschirmlängen lang. Zum Lesen dient jetzt die Lightbox (ct.js); hier genügt
 * eine Übersicht, die die Preisstruktur erkennbar hält. Das Beitragsbild über der
 * Überschrift ist NICHT betroffen, es bleibt groß.
 *
 * Reine Darstellungsänderung: die Galerieblöcke im Inhalt bleiben unverändert. */
.ct-preis-galerie.wp-block-gallery.has-nested-images {
	justify-content: flex-start;
	gap: 0.9rem;
	margin-block: 0.6rem 2.2rem;
}
/* Das `:not(#individual-image)` ist kein Tippfehler, sondern dieselbe Ausweichlösung, die
 * der Galerie-Block selbst benutzt: seine Breitenregel lautet
 * `…figure.wp-block-image:not(#individual-image) { width: calc(50% - …) }` und hat durch
 * die ID eine Spezifität, die mit Klassen allein nicht zu erreichen ist. Ohne den Zusatz
 * bliebe die Breite hier wirkungslos – mit `!important` ginge es auch, das wäre aber
 * schwerer nachzuvollziehen. */
.ct-preis-galerie.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto;
	width: clamp(130px, 26vw, 190px);
	/* Sonst bläht die automatische Mindestgröße von Flex-Elementen die Kachel wieder auf
	 * die Eigenbreite des Bildes auf. */
	min-width: 0;
	margin: 0;
}
.ct-preis-galerie figure.wp-block-image > a {
	display: block;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: #fff;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.ct-preis-galerie figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	/* Oben beschneiden: der Titel der Comicseite bleibt sichtbar – daran erkennt man sie wieder. */
	object-position: center top;
}
.ct-preis-galerie figure.wp-block-image > a:hover,
.ct-preis-galerie figure.wp-block-image > a:focus-visible {
	transform: scale(1.03);
	border-color: var(--wp--preset--color--contrast, #18181d);
}

/* --- VERSUCH (26.08.2026): Comic-Schrift in jeder Textkasten-Umrandung ---------------
   Regel: Beschriftungen in einem gezeichneten Kasten stehen in der Comic-Schrift. Betrifft
   die Filterknöpfe und das Überlaufmenü der Navigation; Eckdaten-Kasten, Panel-Beschriftungen
   und Rückblick-Balken hatten sie schon.

   **Eingabe- und Auswahlfelder sind ausdrücklich ausgenommen** (Entscheidung vom 26.08.2026):
   Dort erscheint nicht nur der Platzhalter, sondern auch der getippte Text in der Handschrift –
   bei einer Eingabe erwartet man die Schrift des Systems. Sie behalten die Grundschrift.

   Rückbau = diesen ganzen Block entfernen, sonst nichts.

   Der Block steht bewusst am Dateiende: Die Größen der einzelnen Leisten stehen weiter oben
   und würden sonst gewinnen. Amatic SC hat eine sehr kleine x-Höhe – in der Grundgröße der
   Pillen (0,85 rem) wäre sie kaum lesbar, deshalb hier durchgehend größer. */
.ct-pill,
.ct-nav__link {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.15;
}
/* Gesperrt, weil die eigentliche Schwäche dieser schmalen Schrift in kleinen Größen nicht die
   Höhe ist, sondern die engen Innenräume der Buchstaben: Die Beschriftungen sind hier schmaler
   als vorher in der Grundschrift, Breite ist also vorhanden. Fett ist bereits gesetzt (700 liegt
   als eigene Datei bei, Amatic hat keinen schwereren Schnitt) – dieser Hebel ist ausgereizt.
   Am Vergleich geprüft: 0,06 em kostet 13 % Zeilenbreite und keinen Millimeter Höhe. */
.ct-pill { letter-spacing: 0.06em; }
.ct-pill { font-size: 1.2rem; }
.ct-prog-cats .ct-pill { font-size: 1.2rem; }
.ct-knst-mode .ct-pill { font-size: 1.35rem; }
.ct-knst-mode__n { font-size: 1.1rem; opacity: 0.65; }
.ct-news-tag { font-size: 1.15rem; }
.ct-festivals__sortbtn { font-size: 1.25rem; }
/* Die Navigationszeile in derselben Größe wie „Mehr" daneben – und wie dieselben Einträge
   im Überlaufmenü. Damit steht ein Eintrag überall gleich, egal ob ihn die Leiste gerade in
   der Zeile zeigt oder ins Menü geschoben hat. Etwas gesperrt aus demselben Grund wie bei den
   Pillen, hier schwächer: In dieser Größe sind die Innenräume weniger eng. */
.ct-nav__link {
	font-size: 1.5rem;
	letter-spacing: 0.04em;
}


/* iOS Safari zooms into any form field with text below 16px when it is tapped.
 * Keep phone form fields at 16px or larger (newsletter form, news search/source). */
@media (max-width: 600px) {
	input[type="text"],
	input[type="email"],
	input[type="search"]:not(.ct-knst-filter__search), /* artist search is already 18px */
	select,
	textarea {
		font-size: 16px !important; /* component rules set smaller sizes */
	}
}