/*
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.33
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: comictage
*/

/* 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;
}
.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%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	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;
}

/* 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: 2rem;
}
/* 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 */
.ct-rb__bar {
	background: var(--wp--preset--color--contrast, #18181d);
	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.45rem 1rem 0.55rem;
	border-radius: 4px;
	margin-bottom: 1.4rem;
}
.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: top center;
	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-rb__sponsoren h2 {
	font-size: 2rem;
}
.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;
}
/* 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; }

/* 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;
}
/* „Programm" im Kopfmenü nur in der Programmphase (Body-Klasse comictage-phase-3). */
body:not(.comictage-phase-3) .ct-nav-programm { display: none; }

/* 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;
}
.ct-panel__titlemain {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
}
.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 {
	background: #0f0f12;
	color: #fff;
	border-radius: 4px;
	padding: 0.4rem 0.8rem;
	font-size: clamp(1.05rem, 2.1vw, 1.55rem);
}
.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;
	background: #fff;
	border: 1px solid #000;
	padding: 4px 9px;
	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__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). */
@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ößer als die Beitragstitel */
	font-size: 2.6rem;
	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;
}
.ct-aktuelles__title { /* Beitragstitel – größer als der Fließtext */
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
}
.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: 0.35rem;
}
.ct-knst-filter__years button {
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.3;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--contrast, #18181d);
	background: transparent;
	color: var(--wp--preset--color--contrast, #18181d);
	padding: 0.2rem 0.75rem;
	border-radius: 9999px;
}
.ct-knst-filter__years button:hover {
	background: var(--wp--preset--color--secondary, #e6e6e6);
}
.ct-knst-filter__years button.is-active {
	background: var(--wp--preset--color--contrast, #18181d);
	color: #fff;
}
.ct-knst-filter__search {
	width: 100%;
	max-width: 18rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--secondary, #cccccc);
	border-radius: 9999px;
	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 */
}
.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, damit die Symbol-Zeile (margin-top:auto) unten bleibt. */
.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. */
.ct-knst__biolink { color: inherit; text-decoration: none; }
.ct-knst__biolink:hover, .ct-knst__biolink:focus { text-decoration: underline; }
.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;
}
.ct-knst__links {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 0.6rem;
}
.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;
}

/* Zurück-Link oben auf der Künstler:in-Detailseite (Ziel je nach Herkunft). */
.ct-knst-back { margin: 0 0 0.4rem; font-weight: 600; }
.ct-knst-back a { text-decoration: none; }
.ct-knst-back a:hover, .ct-knst-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; }
.ct-knst-detail__auftritte h2 {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.8rem;
	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;
}

/* Rückblick-Überschrift mit Platzhalter-Logo links daneben (per ct.js injiziert, nur /rueckblick/).
   font-size = H1-Größe (clamp gespiegelt), damit das Logo per em mit der Überschrift mitskaliert. */
.ct-rb-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: clamp(3rem, 8vw, 6rem);
	line-height: 1;
}
.ct-rb-head h1 {
	margin: 0;
}
/* Runder Logo-Platzhalter (Kreis), skaliert per em mit der Überschrift. */
.ct-rb-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.05em;
	height: 1.05em;
	border-radius: 50%;
	overflow: hidden;
	background: #0f0f12;
	transform: translateY(-0.03em);
}
.ct-rb-logo__txt {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.3em; /* relativ zur Überschrift → kleiner Text im Kreis */
	line-height: 0.9;
	color: #fff;
	text-align: center;
	padding: 0 0.35em;
	opacity: 0.92;
}
.ct-rb-logo img { /* echtes Site-Logo (falls gesetzt) füllt den Kreis */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #fff;
}

/* 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: 0.4rem;
	margin: 0 0 1.8rem;
}
.ct-prog-days button {
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.3;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--contrast, #18181d);
	background: transparent;
	color: var(--wp--preset--color--contrast, #18181d);
	padding: 0.2rem 0.8rem;
	border-radius: 9999px;
}
.ct-prog-days button:hover { background: var(--wp--preset--color--secondary, #e6e6e6); }
.ct-prog-days button.is-active { background: var(--wp--preset--color--contrast, #18181d); color: #fff; }
.ct-prog-day { margin: 0 0 2.2rem; scroll-margin-top: 1rem; }
.ct-prog-day__head {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.8rem, 6vw, 2.4rem);
	line-height: 1.1;
	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: 0.4rem;
	margin: 0 0 1.8rem;
}
.ct-prog-cats button {
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.3;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 1px solid var(--wp--preset--color--contrast, #18181d);
	background: transparent;
	color: var(--wp--preset--color--contrast, #18181d);
	padding: 0.2rem 0.7rem;
	border-radius: 9999px;
}
.ct-prog-cats button svg { width: 15px; height: 15px; }
.ct-prog-cats button:hover { background: var(--wp--preset--color--secondary, #e6e6e6); }
.ct-prog-cats button.is-active { background: var(--wp--preset--color--contrast, #18181d); color: #fff; }
/* 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);
}
.ct-ev-artists__head {
	font-family: var(--wp--preset--font-family--amatic-sc, "Amatic SC"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 2rem;
	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; }
.ct-ev-artist__more { white-space: nowrap; }
/* 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). */
.single-tribe_events .tribe-events-meta-group .tribe-events-single-section-title,
.single-tribe_events .tribe-events-single-section-title {
	font-size: 1.6rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

/* 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: 0.5rem;
	align-items: center;
}
.ct-news-filter__search input[type="search"] {
	flex: 1 1 auto;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--wp--preset--color--secondary, #e6e6e6);
	border-radius: 6px;
}
.ct-news-filter__search button {
	padding: 0.5rem 1rem;
	cursor: pointer;
}
.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: 0.4rem;
}
.ct-news-tag {
	display: inline-block;
	font-size: 0.82rem;
	padding: 0.18rem 0.7rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--secondary, #e6e6e6);
	color: var(--wp--preset--color--contrast, #18181d);
	text-decoration: none;
}
.ct-news-tag.is-active {
	background: var(--wp--preset--color--contrast, #18181d);
	color: #fff;
}
.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 {
	opacity: 0.6; /* Quellname dezent; Favicon bleibt voll deckend */
}
.ct-news__favicon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	border-radius: 3px;
	flex: none;
}
.ct-news__tag {
	text-transform: none;
	letter-spacing: 0;
	background: var(--wp--preset--color--secondary, #e6e6e6);
	border-radius: 9999px;
	padding: 0.05rem 0.55rem;
}
.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 select {
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--wp--preset--color--secondary, #e6e6e6);
	border-radius: 6px;
	max-width: 15rem;
}
.ct-news-filter__srcgo {
	padding: 0.35rem 0.8rem;
	cursor: pointer;
}

/* 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: 0.5rem;
	margin-bottom: 1.6rem;
}
.ct-festivals__sortlabel {
	opacity: 0.75;
	font-size: 0.95rem;
}
.ct-festivals__sortbtn {
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 999px;
	padding: 0.25rem 0.9rem;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ct-festivals__sortbtn:hover {
	opacity: 1;
}
.ct-festivals__sortbtn.is-active {
	opacity: 1;
	background: var(--wp--preset--color--contrast, #161616);
	color: var(--wp--preset--color--base, #fff);
	border-color: transparent;
}

.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 {
	max-width: 40rem;
	margin: 0 auto 1rem;
	padding: 0.8rem 1.1rem;
	border-radius: 9px;
	font-size: 0.95rem;
}
.ct-nl-msg--ok {
	background: #e7f3e7;
	color: #1f5520;
	border: 1px solid #bcdcbc;
}
.ct-nl-msg--err {
	background: #fbe7e7;
	color: #8a1f1f;
	border: 1px solid #e6bcbc;
}

/* 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 */
.ct-nl-issue {
	max-width: 42rem;
	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;
}
.ct-nl-issue__title {
	margin: 0 0 0.4rem;
	font-size: 2.2rem;
	line-height: 1.1;
}
.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;
}