/* Self-hosted Schriften (DSGVO) - keine externen CDN-Calls; ersetzt das Google-Fonts-@import.
   Archivo (Display) + Space Mono (Mono), latin-Subset. Relative URLs: assets/css/ -> assets/fonts/. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/archivo-400.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/archivo-500.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/archivo-600.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/archivo-700.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/archivo-800.woff2") format("woff2");}
@font-face{font-family:"Archivo";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/archivo-900.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-mono-400.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-mono-700.woff2") format("woff2");}

/* =============================================================================
 * HdKD Projektionsflaeche - Vollbild-Signage 9:16  (v6 · Multi-Style)
 * Shortcode: [hdkd_projektion scene="events|galerie"]
 *
 * DREI WAEHLBARE STYLES (per Klasse am Wurzel-Element .hdkd-pj):
 *   .hdkd-pj--style-plakat     · Grosstypo + kraeftige Kategorie-Farbfelder
 *   .hdkd-pj--style-tableau    · Anzeigetafel/Raster, Monospace, institutionell
 *   .hdkd-pj--style-farbfeld   · driftende Farbflaechen aus der Hauspalette
 * ZWEI MODI:
 *   (Standard = hell)          .hdkd-pj--mode-dark  · warmes Dunkel
 *
 * Beide Achsen kombinierbar -> 3 Styles x 2 Modi = 6 Looks, je Events + Galerie.
 * Auswahl kommt aus den Plugin-Einstellungen (PHP gibt die Klassen aus).
 * Siehe INTEGRATION-CLAUDE-CODE.md.
 *
 * DOM-VERTRAG UNVERAENDERT. Einzige JS-Ergaenzung: setActive() veroeffentlicht
 * die aktive Kategoriefarbe als --pj-active-cat / --pj-active-cat-txt.
 * --pj-tempo / --pj-scroll-dur werden von JS gesetzt -> NICHT hart ueberschreiben.
 * ========================================================================== */

/* =============================================================================
 * 1 · TOKENS  (Modus hell = Standard, dunkel ueberschreibt)
 * ========================================================================== */
.hdkd-pj {
	--pj-font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--pj-font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Modus hell */
	--pj-bg: #f1e7d6;
	--pj-surface: #fffdf7;
	--pj-surface-2: #e7dcc6;
	--pj-text: #1f1a12;
	--pj-text-dim: #897b62;
	--pj-line: rgba(31, 26, 18, .14);
	--pj-hi: rgba(31, 26, 18, .055);
	--pj-shadow: 0 22px 48px -26px rgba(60, 40, 15, .5);
	--pj-on-image: #fbf6ec;

	/* Aktive Kategoriefarbe (JS setzt sie pro aktivem Event; Fallback = Musik & Tanz) */
	--pj-active-cat: #F5C4B3;
	--pj-active-cat-txt: #4A1B0C;

	/* Geometrie */
	--pj-radius: clamp(10px, 1.6vh, 20px);
	--pj-gap: clamp(10px, 2.1vh, 26px);
	--pj-pad: clamp(18px, 3.2vh, 52px);

	/* Typo (an die Hoehe gekoppelt, 9:16) */
	--pj-fs-kicker: clamp(13px, 1.55vh, 19px);
	--pj-fs-month: clamp(11px, 1.3vh, 16px);
	--pj-fs-time: clamp(15px, 2.05vh, 27px);
	--pj-fs-day: clamp(30px, 4.7vh, 68px);
	--pj-fs-name: clamp(20px, 3.1vh, 44px);
	--pj-fs-title: clamp(32px, 5.4vh, 80px);
	--pj-fs-body: clamp(15px, 2vh, 25px);

	--pj-dur-x: 1100ms;
	--pj-tempo: 8s;
	--pj-scroll-dur: 60s;
	--pj-ease: cubic-bezier(.22, .61, .36, 1);

	position: relative;
	width: 100%;
	height: 100vh;
	margin: 0;
	background: #000;
	color: var(--pj-text);
	font-family: var(--pj-font-display);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.hdkd-pj * { box-sizing: border-box; }

/* Modus dunkel (warmes Anthrazit) */
.hdkd-pj--mode-dark {
	--pj-bg: #161310;
	--pj-surface: #221c15;
	--pj-surface-2: #2f2618;
	--pj-text: #f6efe1;
	--pj-text-dim: #a99a80;
	--pj-line: rgba(246, 239, 225, .12);
	--pj-hi: rgba(246, 239, 225, .07);
	--pj-shadow: 0 26px 54px -26px rgba(0, 0, 0, .75);
}

/* =============================================================================
 * 2 · BUEHNE + GEMEINSAME CHROME (Letterbox, Vollbild-Button, Uhr, Zustaende)
 * ========================================================================== */
.hdkd-pj-stage {
	position: relative;
	aspect-ratio: 9 / 16;
	height: 100vh;
	max-height: 100vh;
	width: auto;
	max-width: 100vw;
	background: var(--pj-bg);
	overflow: hidden;
}
.hdkd-pj:fullscreen { width: 100vw; height: 100vh; }
.hdkd-pj:-webkit-full-screen { width: 100vw; height: 100vh; }

.hdkd-pj-loading {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: var(--pj-text-dim); font-weight: 700; font-size: var(--pj-fs-title);
	letter-spacing: .06em;
}
.hdkd-pj-stage:not([aria-busy="true"]) .hdkd-pj-loading { display: none; }

.hdkd-pj-empty {
	position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
	padding: var(--pj-pad); text-align: center; color: var(--pj-text-dim);
	font-weight: 600; font-size: var(--pj-fs-name); line-height: 1.25; text-wrap: balance;
}

/* Vollbild-Button */
.hdkd-pj-fsbtn {
	position: absolute; top: clamp(12px, 2vh, 28px); right: clamp(12px, 2vh, 28px);
	z-index: 30; display: inline-flex; align-items: center; gap: .55em;
	padding: .55em 1em; border: 1px solid var(--pj-line); border-radius: 999px;
	background: color-mix(in srgb, var(--pj-surface) 82%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	color: var(--pj-text); font-family: var(--pj-font-display); font-weight: 600;
	font-size: clamp(12px, 1.6vh, 17px); cursor: pointer; opacity: 1;
	box-shadow: var(--pj-shadow);
	transition: opacity .4s ease, transform .4s var(--pj-ease), background .2s ease;
}
.hdkd-pj-fsbtn:hover { background: var(--pj-surface); }
.hdkd-pj-fsbtn:focus-visible { outline: 2px solid var(--pj-active-cat); outline-offset: 3px; }
.hdkd-pj-fsbtn-ico { width: 1.05em; height: 1.05em; position: relative; flex: 0 0 auto; }
.hdkd-pj-fsbtn-ico::before, .hdkd-pj-fsbtn-ico::after {
	content: ""; position: absolute; width: .46em; height: .46em;
	border: 2px solid var(--pj-text);
}
.hdkd-pj-fsbtn-ico::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hdkd-pj-fsbtn-ico::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hdkd-pj--idle { cursor: none; }
.hdkd-pj--idle .hdkd-pj-fsbtn { opacity: 0; pointer-events: none; transform: translateY(10px); }

/* Uhr */
.hdkd-pj-clock {
	font-family: var(--pj-font-mono); font-variant-numeric: tabular-nums;
	font-weight: 700; color: var(--pj-text-dim); font-size: var(--pj-fs-kicker);
	letter-spacing: .04em; white-space: nowrap;
}

/* =============================================================================
 * 3 · EVENTS · gemeinsames Geruest (Styles verfeinern danach)
 * ========================================================================== */
.hdkd-pj-events {
	position: absolute; inset: 0; display: grid; gap: var(--pj-gap); padding: var(--pj-pad);
	grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
}
.hdkd-pj-ehead {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1em;
}
.hdkd-pj-etitle { margin: 0; color: var(--pj-text); }
.hdkd-pj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.hdkd-pj-imain { min-width: 0; }
.hdkd-pj-iname {
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hdkd-pj-iloc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hdkd-pj-detail { position: relative; overflow: hidden; display: grid; }
.hdkd-pj-dimage { position: absolute; inset: 0; }
.hdkd-pj-dimage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hdkd-pj-detail.is-noimg .hdkd-pj-dimage { display: none; }
.hdkd-pj-dbody { position: relative; align-self: end; display: flex; flex-direction: column; }
.hdkd-pj-dcats { display: flex; flex-wrap: wrap; gap: .45em; }
.hdkd-pj-cat {
	font-family: var(--pj-font-display); font-size: var(--pj-fs-kicker); font-weight: 700;
	padding: .28em .85em; border-radius: 999px; background: var(--pj-surface-2);
	color: var(--pj-text); white-space: nowrap;
}
.hdkd-pj-dtitle { margin: 0; text-wrap: balance; color: inherit; }
.hdkd-pj-dmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25em 1.1em; }
.hdkd-pj-dmeta > span { white-space: nowrap; }
.hdkd-pj-ddesc {
	margin: .15em 0 0; text-wrap: pretty; overflow: hidden; display: -webkit-box;
	-webkit-line-clamp: 3; -webkit-box-orient: vertical; color: inherit;
}
/* Theme-Schutz (v5.37.0): Host-Themes scopen Ueberschriften oft als ".content h3 {color}"
   (Spezifizitaet 0,1,1) und schlagen damit ein einfaches .hdkd-pj-dtitle{color:inherit}
   (0,1,0) -> der Titel wurde im Theme-Kontext dunkel/unlesbar ueber dem Bild. Mit 0,4,0
   folgen Titel UND Beschreibung wieder zuverlaessig der (je Style korrekt gesetzten)
   dbody-Farbe (ueber Bild hell, auf Farbfeld passender Kontrast). */
.hdkd-pj .hdkd-pj-detail .hdkd-pj-dbody .hdkd-pj-dtitle { color: var(--pj-c-dtitle, inherit); }
.hdkd-pj .hdkd-pj-detail .hdkd-pj-dbody .hdkd-pj-ddesc { color: var(--pj-c-ddesc, inherit); }
/* sanfter Inhaltswechsel (JS toggelt .is-swapping) */
.hdkd-pj-detail .hdkd-pj-dbody, .hdkd-pj-detail .hdkd-pj-dimage { transition: opacity .5s var(--pj-ease); }
.hdkd-pj-detail.is-swapping .hdkd-pj-dbody, .hdkd-pj-detail.is-swapping .hdkd-pj-dimage { opacity: 0; }

/* =============================================================================
 * 4 · GALERIE · gemeinsames Geruest
 * ========================================================================== */
.hdkd-pj-gal { position: absolute; inset: 0; overflow: hidden; background: var(--pj-bg); }
.hdkd-pj-gal .hdkd-pj-clock {
	position: absolute; top: clamp(12px, 2vh, 28px); left: clamp(12px, 2vh, 28px); z-index: 20;
	padding: .4em .85em; border-radius: 999px; border: 1px solid var(--pj-line);
	background: color-mix(in srgb, var(--pj-surface) 82%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--pj-shadow);
}
.hdkd-pj-slide img { display: block; }
/* Crossfade fade/kenburns */
.hdkd-pj-gal--fade .hdkd-pj-slide, .hdkd-pj-gal--kenburns .hdkd-pj-slide {
	position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity var(--pj-dur-x) var(--pj-ease);
}
.hdkd-pj-gal--fade .hdkd-pj-slide.is-active, .hdkd-pj-gal--kenburns .hdkd-pj-slide.is-active { opacity: 1; }
.hdkd-pj-gal--fade .hdkd-pj-slide img, .hdkd-pj-gal--kenburns .hdkd-pj-slide img { width: 100%; height: 100%; object-fit: cover; }
@keyframes hdkd-pj-kenburns { from { transform: scale(1.05); } to { transform: scale(1.17); } }
.hdkd-pj-gal--kenburns .hdkd-pj-slide.is-active img { animation: hdkd-pj-kenburns var(--pj-tempo) ease-out forwards; will-change: transform; }
/* scrollup (Hauptmodus) */
.hdkd-pj-gal--scrollup .hdkd-pj-gal-track {
	display: flex; flex-direction: column; width: 100%; will-change: transform;
	animation: hdkd-pj-scroll var(--pj-scroll-dur) linear infinite;
}
.hdkd-pj-gal--scrollup .hdkd-pj-slide { margin: 0; width: 100%; }
.hdkd-pj-gal--scrollup .hdkd-pj-slide img { width: 100%; height: auto; object-fit: cover; }
@keyframes hdkd-pj-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* gemeinsame Keyframes der Styles */
@keyframes hdkd-pj-drift {
	0%   { transform: translate3d(-5%, -3%, 0) scale(1.05); }
	50%  { transform: translate3d(5%, 4%, 0) scale(1.2); }
	100% { transform: translate3d(-5%, -3%, 0) scale(1.05); }
}
@keyframes hdkd-pj-pulse { 0%,100% { transform: scale(.82); opacity: .1; } 50% { transform: scale(1.15); opacity: .2; } }

/* #############################################################################
 * STYLE A · PLAKAT  — Grosstypo, Kategorie-Farbfelder
 * ######################################################################### */
.hdkd-pj--style-plakat .hdkd-pj-events { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.12fr); }
.hdkd-pj--style-plakat .hdkd-pj-ehead { border-bottom: 2px solid var(--pj-text); padding-bottom: calc(var(--pj-gap) * .5); }
.hdkd-pj--style-plakat .hdkd-pj-etitle { font-weight: 800; font-size: clamp(20px, 2.9vh, 42px); letter-spacing: -.015em; line-height: 1; }
.hdkd-pj--style-plakat .hdkd-pj-ehead .hdkd-pj-clock { align-self: center; padding: .3em .8em; border: 1px solid var(--pj-line); border-radius: 999px; }

.hdkd-pj--style-plakat .hdkd-pj-item {
	display: flex; align-items: center; gap: clamp(12px, 2.2vh, 26px);
	padding: clamp(8px, 1.5vh, 18px) 0; border-bottom: 1px solid var(--pj-line);
	opacity: .46; transition: opacity .55s var(--pj-ease);
}
.hdkd-pj--style-plakat .hdkd-pj-item.is-active { opacity: 1; }
.hdkd-pj--style-plakat .hdkd-pj-idate { flex: 0 0 auto; display: grid; justify-items: center; gap: .1em; min-width: 1.7em; line-height: .9; }
.hdkd-pj--style-plakat .hdkd-pj-iday { font-weight: 900; font-size: var(--pj-fs-day); letter-spacing: -.02em; color: var(--pj-text); transition: color .55s var(--pj-ease); }
.hdkd-pj--style-plakat .hdkd-pj-item.is-active .hdkd-pj-iday { color: var(--pj-active-cat); }
.hdkd-pj--style-plakat .hdkd-pj-imonth { font-family: var(--pj-font-mono); font-size: var(--pj-fs-month); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--pj-text-dim); }
.hdkd-pj--style-plakat .hdkd-pj-imain { display: flex; flex-direction: column; gap: .12em; }
.hdkd-pj--style-plakat .hdkd-pj-itime { font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-time); color: var(--pj-active-cat); }
.hdkd-pj--style-plakat .hdkd-pj-item:not(.is-active) .hdkd-pj-itime { color: var(--pj-text-dim); }
.hdkd-pj--style-plakat .hdkd-pj-iname { font-weight: 800; font-size: var(--pj-fs-name); line-height: 1.08; letter-spacing: -.015em; color: var(--pj-text); }
.hdkd-pj--style-plakat .hdkd-pj-iloc { font-family: var(--pj-font-mono); font-size: var(--pj-fs-month); color: var(--pj-text-dim); margin-top: .35em; }

/* Detail = Plakat-Held */
.hdkd-pj--style-plakat .hdkd-pj-detail { border-radius: var(--pj-radius); background: var(--pj-surface); box-shadow: var(--pj-shadow); }
.hdkd-pj--style-plakat .hdkd-pj-dimage::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,6,3,0) 14%, rgba(8,6,3,.5) 44%, rgba(6,4,2,.85) 70%, rgba(4,3,1,.97) 100%);
}
.hdkd-pj--style-plakat .hdkd-pj-detail.is-noimg { background: var(--pj-active-cat); color: var(--pj-active-cat-txt); transition: background .8s var(--pj-ease), color .8s var(--pj-ease); }
.hdkd-pj--style-plakat .hdkd-pj-detail.is-noimg::after {
	content: ""; position: absolute; right: -8%; bottom: -14%; width: 52%; aspect-ratio: 1; border-radius: 50%;
	border: 2px solid currentColor; opacity: .22;
}
.hdkd-pj--style-plakat .hdkd-pj-dbody { padding: var(--pj-pad); gap: .5em; color: var(--pj-on-image); }
/* Lesbarkeit ueber hellen Fotos: kraeftigerer Scrim (oben) + Textschatten. */
.hdkd-pj--style-plakat .hdkd-pj-detail:not(.is-noimg) .hdkd-pj-dbody { text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hdkd-pj--style-plakat .hdkd-pj-detail.is-noimg .hdkd-pj-dbody { align-self: end; color: currentColor; text-shadow: none; }
.hdkd-pj--style-plakat .hdkd-pj-detail.is-noimg .hdkd-pj-cat { background: color-mix(in srgb, currentColor 16%, transparent); color: currentColor; border: 1.5px solid currentColor; }
.hdkd-pj--style-plakat .hdkd-pj-dtitle { font-weight: 900; font-size: var(--pj-fs-title); line-height: .98; letter-spacing: -.025em; }
.hdkd-pj--style-plakat .hdkd-pj-dmeta { font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-body); color: color-mix(in srgb, var(--pj-on-image) 80%, transparent); }
.hdkd-pj--style-plakat .hdkd-pj-detail.is-noimg .hdkd-pj-dmeta { color: color-mix(in srgb, currentColor 82%, transparent); }
.hdkd-pj--style-plakat .hdkd-pj-ddate { font-weight: 700; }
.hdkd-pj--style-plakat .hdkd-pj-ddesc { font-family: var(--pj-font-display); font-weight: 400; font-size: var(--pj-fs-body); line-height: 1.42; max-width: 28em; }

/* Plakat-Galerie: kraeftig, dunkler Grund, gerundet, starker Schatten */
.hdkd-pj--style-plakat .hdkd-pj-gal { background: #0c0805; }
.hdkd-pj--style-plakat .hdkd-pj-gal--fade .hdkd-pj-slide img, .hdkd-pj--style-plakat .hdkd-pj-gal--kenburns .hdkd-pj-slide img { border-radius: 0; }
.hdkd-pj--style-plakat .hdkd-pj-gal--scrollup { padding: clamp(10px, 1.8vh, 22px); }
.hdkd-pj--style-plakat .hdkd-pj-gal--scrollup .hdkd-pj-gal-track { gap: clamp(8px, 1.5vh, 18px); }
.hdkd-pj--style-plakat .hdkd-pj-gal--scrollup .hdkd-pj-slide img { border-radius: var(--pj-radius); box-shadow: 0 18px 36px -18px rgba(0,0,0,.7); }

/* #############################################################################
 * STYLE B · TABLEAU  — Anzeigetafel, Raster, Monospace
 * ######################################################################### */
.hdkd-pj--style-tableau .hdkd-pj-events { grid-template-rows: auto minmax(0, 1.28fr) minmax(0, .82fr); gap: 0; padding: 0; }
.hdkd-pj--style-tableau .hdkd-pj-ehead {
	padding: clamp(12px, 2vh, 22px) var(--pj-pad); border-bottom: 1px solid var(--pj-line);
	background: var(--pj-surface);
}
.hdkd-pj--style-tableau .hdkd-pj-etitle { font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-kicker); text-transform: uppercase; letter-spacing: .14em; }
.hdkd-pj--style-tableau .hdkd-pj-clock { font-size: var(--pj-fs-kicker); }

.hdkd-pj--style-tableau .hdkd-pj-list { padding: 0; }
.hdkd-pj--style-tableau .hdkd-pj-item {
	position: relative; display: grid; grid-template-columns: 3.4em 1fr; align-items: center;
	gap: clamp(10px, 1.8vh, 20px); padding: clamp(9px, 1.5vh, 18px) var(--pj-pad);
	border-bottom: 1px solid var(--pj-line); background: transparent;
	transition: background .5s var(--pj-ease);
}
.hdkd-pj--style-tableau .hdkd-pj-item.is-active { background: var(--pj-hi); }
.hdkd-pj--style-tableau .hdkd-pj-item::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: var(--pj-active-cat); opacity: 0; transition: opacity .5s var(--pj-ease);
}
.hdkd-pj--style-tableau .hdkd-pj-item.is-active::before { opacity: 1; }
.hdkd-pj--style-tableau .hdkd-pj-idate { display: flex; align-items: baseline; gap: .35em; }
.hdkd-pj--style-tableau .hdkd-pj-iday { font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-time); color: var(--pj-text); }
.hdkd-pj--style-tableau .hdkd-pj-imonth { font-family: var(--pj-font-mono); font-size: var(--pj-fs-month); text-transform: uppercase; color: var(--pj-text-dim); }
.hdkd-pj--style-tableau .hdkd-pj-imain { display: grid; grid-template-columns: 3.6em 1fr; align-items: baseline; gap: .2em clamp(8px, 1.4vh, 16px); }
.hdkd-pj--style-tableau .hdkd-pj-itime { grid-row: 1 / span 2; font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-time); color: var(--pj-text); align-self: center; }
.hdkd-pj--style-tableau .hdkd-pj-item.is-active .hdkd-pj-itime { color: var(--pj-active-cat); }
.hdkd-pj--style-tableau .hdkd-pj-iname { font-weight: 600; font-size: var(--pj-fs-name); line-height: 1.05; -webkit-line-clamp: 1; }
.hdkd-pj--style-tableau .hdkd-pj-iloc { font-family: var(--pj-font-mono); font-size: var(--pj-fs-month); color: var(--pj-text-dim); margin-top: .25em; }

/* Detail = Info-Panel: Bild als Kopfband, strukturierte Meta */
.hdkd-pj--style-tableau .hdkd-pj-detail { display: grid; grid-template-rows: 44% 1fr; background: var(--pj-surface); border-top: 1px solid var(--pj-line); }
.hdkd-pj--style-tableau .hdkd-pj-dimage { position: relative; inset: auto; }
.hdkd-pj--style-tableau .hdkd-pj-detail.is-noimg { grid-template-rows: 0 1fr; }
.hdkd-pj--style-tableau .hdkd-pj-dbody { align-self: stretch; justify-content: center; gap: .55em; padding: clamp(14px, 2.4vh, 28px) var(--pj-pad); color: var(--pj-text); }
.hdkd-pj--style-tableau .hdkd-pj-dcats { gap: .4em; }
.hdkd-pj--style-tableau .hdkd-pj-cat { font-family: var(--pj-font-mono); font-size: var(--pj-fs-month); text-transform: uppercase; letter-spacing: .08em; border-radius: 4px; }
.hdkd-pj--style-tableau .hdkd-pj-dtitle { font-weight: 800; font-size: clamp(26px, 4.2vh, 56px); line-height: 1.02; letter-spacing: -.02em; }
.hdkd-pj--style-tableau .hdkd-pj-dmeta { flex-direction: column; gap: .3em; font-family: var(--pj-font-mono); font-size: var(--pj-fs-body); color: var(--pj-text); }
.hdkd-pj--style-tableau .hdkd-pj-ddate::before { content: "BEGINN  "; color: var(--pj-text-dim); letter-spacing: .06em; }
.hdkd-pj--style-tableau .hdkd-pj-dloc::before { content: "ORT  "; color: var(--pj-text-dim); letter-spacing: .06em; }
.hdkd-pj--style-tableau .hdkd-pj-ddesc { display: none; }

/* Tableau-Galerie: duenne Rahmen, Monospace-Eckmarke */
.hdkd-pj--style-tableau .hdkd-pj-gal { padding: clamp(12px, 2vh, 26px); }
.hdkd-pj--style-tableau .hdkd-pj-gal::before {
	content: "GALERIE"; position: absolute; top: clamp(12px, 2vh, 26px); right: clamp(12px, 2vh, 26px); z-index: 20;
	font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-month); letter-spacing: .16em;
	color: var(--pj-text); background: var(--pj-surface); border: 1px solid var(--pj-line); padding: .35em .7em; border-radius: 4px;
}
.hdkd-pj--style-tableau .hdkd-pj-gal--scrollup .hdkd-pj-gal-track { gap: clamp(8px, 1.4vh, 16px); }
.hdkd-pj--style-tableau .hdkd-pj-gal--scrollup .hdkd-pj-slide { border: 1px solid var(--pj-line); }
.hdkd-pj--style-tableau .hdkd-pj-gal--scrollup .hdkd-pj-slide img { border-radius: 0; }

/* #############################################################################
 * STYLE C · FARBFELD  — driftende Farbflaechen, schwebende Typo
 * ######################################################################### */
.hdkd-pj--style-farbfeld .hdkd-pj-events { grid-template-rows: auto minmax(0, 1.34fr) minmax(0, .66fr); }
.hdkd-pj--style-farbfeld .hdkd-pj-events::before {
	content: ""; position: absolute; inset: -22%; z-index: 0;
	background: var(--pj-active-cat); opacity: .5; filter: blur(74px);
	transition: background 1s var(--pj-ease); animation: hdkd-pj-drift 20s ease-in-out infinite;
}
.hdkd-pj--style-farbfeld .hdkd-pj-events::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(125% 90% at 50% 16%, rgba(0,0,0,0) 0%, var(--pj-bg) 82%);
}
.hdkd-pj--style-farbfeld .hdkd-pj-ehead,
.hdkd-pj--style-farbfeld .hdkd-pj-list,
.hdkd-pj--style-farbfeld .hdkd-pj-detail { position: relative; z-index: 1; }

.hdkd-pj--style-farbfeld .hdkd-pj-etitle { font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-kicker); text-transform: uppercase; letter-spacing: .18em; color: var(--pj-text-dim); }
.hdkd-pj--style-farbfeld .hdkd-pj-ehead .hdkd-pj-clock { align-self: center; }

.hdkd-pj--style-farbfeld .hdkd-pj-list { justify-content: center; gap: clamp(6px, 1.1vh, 14px); }
.hdkd-pj--style-farbfeld .hdkd-pj-item {
	display: flex; align-items: baseline; gap: clamp(10px, 1.8vh, 20px); padding: clamp(5px, 1vh, 12px) 0;
	opacity: .3; transform: scale(.95); transform-origin: left center;
	transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.hdkd-pj--style-farbfeld .hdkd-pj-item.is-active { opacity: 1; transform: scale(1); }
.hdkd-pj--style-farbfeld .hdkd-pj-idate { display: none; }
.hdkd-pj--style-farbfeld .hdkd-pj-imain { display: flex; flex-direction: row; align-items: baseline; gap: clamp(10px, 1.8vh, 18px); }
.hdkd-pj--style-farbfeld .hdkd-pj-itime { flex: 0 0 auto; font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-kicker); color: var(--pj-text-dim); }
.hdkd-pj--style-farbfeld .hdkd-pj-iname { font-weight: 700; font-size: var(--pj-fs-name); line-height: 1.06; letter-spacing: -.015em; color: var(--pj-text); -webkit-line-clamp: 1; }
.hdkd-pj--style-farbfeld .hdkd-pj-iloc { display: none; }

/* Detail = ruhiger Streifen: Kategorie-Pille + Meta ueber dem Wash */
.hdkd-pj--style-farbfeld .hdkd-pj-detail { background: transparent; align-content: end; overflow: visible; }
.hdkd-pj--style-farbfeld .hdkd-pj-dimage { display: none; }
.hdkd-pj--style-farbfeld .hdkd-pj-dbody { align-self: end; gap: .6em; padding: 0 var(--pj-pad) var(--pj-pad); color: var(--pj-text); }
.hdkd-pj--style-farbfeld .hdkd-pj-cat { background: var(--pj-active-cat); color: var(--pj-active-cat-txt); transition: background .8s var(--pj-ease), color .8s var(--pj-ease); font-family: var(--pj-font-mono); font-size: var(--pj-fs-month); text-transform: uppercase; letter-spacing: .1em; }
.hdkd-pj--style-farbfeld .hdkd-pj-dtitle { font-weight: 800; font-size: clamp(28px, 4.6vh, 64px); line-height: 1; letter-spacing: -.02em; color: var(--pj-text); }
.hdkd-pj--style-farbfeld .hdkd-pj-dmeta { font-family: var(--pj-font-mono); font-weight: 700; font-size: var(--pj-fs-body); color: var(--pj-text-dim); }
.hdkd-pj--style-farbfeld .hdkd-pj-ddate { color: var(--pj-text); }
.hdkd-pj--style-farbfeld .hdkd-pj-ddesc { display: none; }

/* Farbfeld-Galerie: ruhige Rolle ueber driftendem Wash, weiche Kanten */
.hdkd-pj--style-farbfeld .hdkd-pj-gal::before {
	content: ""; position: absolute; inset: -16%; z-index: 0;
	background: var(--pj-active-cat); opacity: .34; filter: blur(82px); animation: hdkd-pj-drift 24s ease-in-out infinite;
}
.hdkd-pj--style-farbfeld .hdkd-pj-gal--scrollup, .hdkd-pj--style-farbfeld .hdkd-pj-gal--fade, .hdkd-pj--style-farbfeld .hdkd-pj-gal--kenburns { position: absolute; inset: 0; }
.hdkd-pj--style-farbfeld .hdkd-pj-gal--scrollup {
	padding: clamp(12px, 2vh, 24px);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.hdkd-pj--style-farbfeld .hdkd-pj-gal--scrollup .hdkd-pj-gal-track { position: relative; z-index: 1; gap: clamp(10px, 1.8vh, 20px); }
.hdkd-pj--style-farbfeld .hdkd-pj-gal--scrollup .hdkd-pj-slide img { border-radius: var(--pj-radius); box-shadow: 0 16px 34px -18px rgba(0,0,0,.55); }
.hdkd-pj--style-farbfeld .hdkd-pj-gal--fade .hdkd-pj-slide, .hdkd-pj--style-farbfeld .hdkd-pj-gal--kenburns .hdkd-pj-slide { z-index: 1; }

/* =============================================================================
 * 5 · REDUCED MOTION
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hdkd-pj-gal--scrollup .hdkd-pj-gal-track { animation: none; }
	.hdkd-pj-gal--kenburns .hdkd-pj-slide.is-active img { animation: none; transform: none; }
	.hdkd-pj--style-farbfeld .hdkd-pj-events::before,
	.hdkd-pj--style-farbfeld .hdkd-pj-gal::before { animation: none; }
	.hdkd-pj-item,
	.hdkd-pj-iday,
	.hdkd-pj-detail .hdkd-pj-dbody,
	.hdkd-pj-detail .hdkd-pj-dimage,
	.hdkd-pj--style-plakat .hdkd-pj-detail.is-noimg { transition-duration: .01ms; }
}

/* #############################################################################
 * 6 · BESCHRIFTUNGS-OVERRIDES  (v5.38.0)  — pro Feld editierbar (Einstellungen)
 * --------------------------------------------------------------------------
 * Inline am Wurzel-.hdkd-pj gesetzte Custom-Props ueberschreiben pro Feld:
 *   Groesse   --pj-s-<key>   Faktor 0.5-2 (Default 1 -> calc(Basis*1) = unveraendert)
 *   Farbe     --pj-c-<key>   Default = Style-Farbe
 *   Staerke   --pj-w-<key>   Default = Style-Gewicht
 *   Ausricht  --pj-a-<key>   Default inherit
 * Spezifizitaet 0,2,0 + Quell-Reihenfolge => schlaegt die Style-Grundregeln (0,2,0,
 * frueher), unterliegt aber Zustands-Regeln (is-active / :not() 0,3,0+) -> die
 * Hervorhebungen bleiben dem Style. Nichts gesetzt = identisch zu vorher.
 * keys (Liste): day month time name loc | (Detail): cat dtitle ddate dloc ddesc | clock
 * dtitle/ddesc-Farbe liegt in der 0,4,0-Theme-Regel oben (nicht hier).
 * ######################################################################### */

/* -- PLAKAT -- */
.hdkd-pj--style-plakat .hdkd-pj-iday   { font-size: calc(var(--pj-fs-day)    * var(--pj-s-day,1));    color: var(--pj-c-day,   var(--pj-text));       font-weight: var(--pj-w-day,900);    text-align: var(--pj-a-day,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-imonth { font-size: calc(var(--pj-fs-month)  * var(--pj-s-month,1));  color: var(--pj-c-month, var(--pj-text-dim));   font-weight: var(--pj-w-month,700);  text-align: var(--pj-a-month,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-itime  { font-size: calc(var(--pj-fs-time)   * var(--pj-s-time,1));   color: var(--pj-c-time,  var(--pj-active-cat)); font-weight: var(--pj-w-time,700);   text-align: var(--pj-a-time,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-iname  { font-size: calc(var(--pj-fs-name)   * var(--pj-s-name,1));   color: var(--pj-c-name,  var(--pj-text));       font-weight: var(--pj-w-name,800);   text-align: var(--pj-a-name,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-iloc   { font-size: calc(var(--pj-fs-month)  * var(--pj-s-loc,1));    color: var(--pj-c-loc,   var(--pj-text-dim));   font-weight: var(--pj-w-loc,400);    text-align: var(--pj-a-loc,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-cat    { font-size: calc(var(--pj-fs-kicker) * var(--pj-s-cat,1));    color: var(--pj-c-cat,   var(--pj-text));       font-weight: var(--pj-w-cat,700);    text-align: var(--pj-a-cat,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-dtitle { font-size: calc(var(--pj-fs-title)  * var(--pj-s-dtitle,1)); font-weight: var(--pj-w-dtitle,900); text-align: var(--pj-a-dtitle,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-ddate  { font-size: calc(var(--pj-fs-body)   * var(--pj-s-ddate,1));  color: var(--pj-c-ddate, inherit);              font-weight: var(--pj-w-ddate,700);  text-align: var(--pj-a-ddate,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-dloc   { font-size: calc(var(--pj-fs-body)   * var(--pj-s-dloc,1));   color: var(--pj-c-dloc,  inherit);              font-weight: var(--pj-w-dloc,700);   text-align: var(--pj-a-dloc,inherit); }
.hdkd-pj--style-plakat .hdkd-pj-ddesc  { font-size: calc(var(--pj-fs-body)   * var(--pj-s-ddesc,1));  font-weight: var(--pj-w-ddesc,400); text-align: var(--pj-a-ddesc,inherit); }

/* -- TABLEAU -- */
.hdkd-pj--style-tableau .hdkd-pj-iday   { font-size: calc(var(--pj-fs-time)  * var(--pj-s-day,1));    color: var(--pj-c-day,   var(--pj-text));      font-weight: var(--pj-w-day,700);    text-align: var(--pj-a-day,inherit); }
.hdkd-pj--style-tableau .hdkd-pj-imonth { font-size: calc(var(--pj-fs-month) * var(--pj-s-month,1));  color: var(--pj-c-month, var(--pj-text-dim));  font-weight: var(--pj-w-month,400);  text-align: var(--pj-a-month,inherit); }
.hdkd-pj--style-tableau .hdkd-pj-itime  { font-size: calc(var(--pj-fs-time)  * var(--pj-s-time,1));   color: var(--pj-c-time,  var(--pj-text));      font-weight: var(--pj-w-time,700);   text-align: var(--pj-a-time,inherit); }
.hdkd-pj--style-tableau .hdkd-pj-iname  { font-size: calc(var(--pj-fs-name)  * var(--pj-s-name,1));   color: var(--pj-c-name,  inherit);             font-weight: var(--pj-w-name,600);   text-align: var(--pj-a-name,inherit); }
.hdkd-pj--style-tableau .hdkd-pj-iloc   { font-size: calc(var(--pj-fs-month) * var(--pj-s-loc,1));    color: var(--pj-c-loc,   var(--pj-text-dim));  font-weight: var(--pj-w-loc,400);    text-align: var(--pj-a-loc,inherit); }
.hdkd-pj--style-tableau .hdkd-pj-cat    { font-size: calc(var(--pj-fs-month) * var(--pj-s-cat,1));    color: var(--pj-c-cat,   inherit);             font-weight: var(--pj-w-cat,700);    text-align: var(--pj-a-cat,inherit); }
.hdkd-pj--style-tableau .hdkd-pj-dtitle { font-size: calc(clamp(26px,4.2vh,56px) * var(--pj-s-dtitle,1)); font-weight: var(--pj-w-dtitle,800); text-align: var(--pj-a-dtitle,inherit); }
.hdkd-pj--style-tableau .hdkd-pj-ddate  { font-size: calc(var(--pj-fs-body)  * var(--pj-s-ddate,1));  color: var(--pj-c-ddate, inherit);             font-weight: var(--pj-w-ddate,400);  text-align: var(--pj-a-ddate,inherit); }
.hdkd-pj--style-tableau .hdkd-pj-dloc   { font-size: calc(var(--pj-fs-body)  * var(--pj-s-dloc,1));   color: var(--pj-c-dloc,  inherit);             font-weight: var(--pj-w-dloc,400);   text-align: var(--pj-a-dloc,inherit); }

/* -- FARBFELD -- (day/month/loc/ddesc sind in diesem Style ausgeblendet) */
.hdkd-pj--style-farbfeld .hdkd-pj-itime  { font-size: calc(var(--pj-fs-kicker) * var(--pj-s-time,1));  color: var(--pj-c-time, var(--pj-text-dim));     font-weight: var(--pj-w-time,700);   text-align: var(--pj-a-time,inherit); }
.hdkd-pj--style-farbfeld .hdkd-pj-iname  { font-size: calc(var(--pj-fs-name)   * var(--pj-s-name,1));  color: var(--pj-c-name, var(--pj-text));         font-weight: var(--pj-w-name,700);   text-align: var(--pj-a-name,inherit); }
.hdkd-pj--style-farbfeld .hdkd-pj-cat    { font-size: calc(var(--pj-fs-month)  * var(--pj-s-cat,1));   color: var(--pj-c-cat,  var(--pj-active-cat-txt)); font-weight: var(--pj-w-cat,700);  text-align: var(--pj-a-cat,inherit); }
.hdkd-pj--style-farbfeld .hdkd-pj-dtitle { font-size: calc(clamp(28px,4.6vh,64px) * var(--pj-s-dtitle,1)); font-weight: var(--pj-w-dtitle,800); text-align: var(--pj-a-dtitle,inherit); }
.hdkd-pj--style-farbfeld .hdkd-pj-ddate  { font-size: calc(var(--pj-fs-body)   * var(--pj-s-ddate,1)); color: var(--pj-c-ddate, var(--pj-text));        font-weight: var(--pj-w-ddate,700);  text-align: var(--pj-a-ddate,inherit); }
.hdkd-pj--style-farbfeld .hdkd-pj-dloc   { font-size: calc(var(--pj-fs-body)   * var(--pj-s-dloc,1));  color: var(--pj-c-dloc,  inherit);              font-weight: var(--pj-w-dloc,700);   text-align: var(--pj-a-dloc,inherit); }

/* -- Galerie-Uhr: Groesse/Farbe (Liste+Galerie) + Position (nur Galerie) -- */
.hdkd-pj .hdkd-pj-clock { font-size: calc(var(--pj-fs-kicker) * var(--pj-s-clock,1)); color: var(--pj-c-clock, var(--pj-text-dim)); }
.hdkd-pj--clock-tr .hdkd-pj-gal .hdkd-pj-clock { left: auto; right: clamp(12px, 2vh, 28px); }
.hdkd-pj--clock-bl .hdkd-pj-gal .hdkd-pj-clock { top: auto; bottom: clamp(12px, 2vh, 28px); }
.hdkd-pj--clock-br .hdkd-pj-gal .hdkd-pj-clock { top: auto; bottom: clamp(12px, 2vh, 28px); left: auto; right: clamp(12px, 2vh, 28px); }

/* #############################################################################
 * 7 · PROGRAMM / ABLAUF (Regieplan-Szene)  (v5.41.0)
 * --------------------------------------------------------------------------
 * Eigenes Layout, unabhaengig von plakat/tableau/farbfeld; nutzt die Tokens +
 * den Dunkel-Modus. Zwei Varianten am Wurzel: .hdkd-pj--var-public (Gaeste,
 * nur Uhrzeit+Programmpunkt) und .hdkd-pj--var-intern (Team, inkl.
 * Verantwortlich/Info). "Jetzt"/"als Naechstes" setzt das JS als .is-now/.is-next.
 * ######################################################################### */
.hdkd-pj-programm {
	position: absolute; inset: 0;
	display: grid; grid-template-rows: auto minmax(0, 1fr);
	gap: var(--pj-gap); padding: var(--pj-pad);
	background: var(--pj-bg); color: var(--pj-text);
}
.hdkd-pj-phead {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 1em;
	padding-bottom: .5em; border-bottom: 2px solid var(--pj-line);
}
.hdkd-pj-phead-text { min-width: 0; }
.hdkd-pj-ptitle {
	margin: 0; font-family: var(--pj-font-display); font-weight: 900;
	font-size: clamp(24px, 4vh, 56px); line-height: 1.04; text-wrap: balance; color: var(--pj-text);
}
.hdkd-pj-psub {
	margin-top: .25em; font-family: var(--pj-font-mono); font-size: var(--pj-fs-time);
	color: var(--pj-text-dim); letter-spacing: .02em;
}
.hdkd-pj-prog-list {
	list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden;
	display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 14px);
}
.hdkd-pj-prow {
	position: relative;
	display: grid; grid-template-columns: minmax(4.6em, auto) 1fr; gap: clamp(10px, 1.8vw, 26px);
	align-items: start; padding: clamp(8px, 1.4vh, 18px) clamp(10px, 1.6vw, 22px);
	background: var(--pj-surface); border-radius: var(--pj-radius);
	border-left: 6px solid var(--pj-line);
	transition: background .4s var(--pj-ease), border-color .4s var(--pj-ease), transform .4s var(--pj-ease), opacity .4s ease;
}
.hdkd-pj-ptime {
	display: flex; flex-direction: column; line-height: 1.05;
	font-family: var(--pj-font-mono); font-variant-numeric: tabular-nums;
}
.hdkd-pj-pvon { font-size: var(--pj-fs-name); font-weight: 700; color: var(--pj-text); }
.hdkd-pj-pbis { font-size: var(--pj-fs-month); color: var(--pj-text-dim); }
.hdkd-pj-pbis::before { content: "bis "; opacity: .55; }
.hdkd-pj-pmain { min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.hdkd-pj-ppunkt {
	font-family: var(--pj-font-display); font-weight: 700;
	font-size: var(--pj-fs-name); line-height: 1.1; color: var(--pj-text);
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--pj-prog-lines, 2); -webkit-box-orient: vertical;
}
/* v5.56.0: Der gerade laufende „Jetzt"-Punkt zeigt den vollen Titel (kein 2-Zeilen-Clamp). */
.hdkd-pj-prow.is-now .hdkd-pj-ppunkt {
	display: block; -webkit-line-clamp: unset; overflow: visible; text-overflow: clip; white-space: normal;
}
.hdkd-pj-pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; }
.hdkd-pj-pcat {
	font-family: var(--pj-font-display); font-size: var(--pj-fs-kicker); font-weight: 700;
	padding: .18em .7em; border-radius: 999px; white-space: nowrap;
	background: var(--pj-surface-2); color: var(--pj-text);
}
.hdkd-pj-pwho { font-size: var(--pj-fs-body); color: var(--pj-text-dim); font-weight: 600; }
.hdkd-pj-pwho::before { content: "\1F464\00A0"; }
.hdkd-pj-pinfo {
	font-size: var(--pj-fs-body); color: var(--pj-text-dim); line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hdkd-pj-prow.hdkd-pj-prow--empty {
	display: block; text-align: center; color: var(--pj-text-dim); font-weight: 600;
	padding-top: clamp(28px, 6vh, 80px); border-left: 0; background: transparent;
}

/* Variante "oeffentlich": interne Felder zusaetzlich per CSS ausblenden
 * (2. Schutzschicht — primaer filtert/strippt der Server diese Zeilen). */
.hdkd-pj--var-public .hdkd-pj-pwho,
.hdkd-pj--var-public .hdkd-pj-pinfo { display: none; }

/* "Jetzt" kraeftig hervorgehoben (warme Aktiv-Farbe), "als Naechstes" dezent. */
.hdkd-pj-prow.is-now {
	background: var(--pj-active-cat); color: var(--pj-active-cat-txt);
	border-left-color: var(--pj-active-cat-txt); transform: scale(1.015); box-shadow: var(--pj-shadow);
}
.hdkd-pj-prow.is-now .hdkd-pj-pvon,
.hdkd-pj-prow.is-now .hdkd-pj-ppunkt,
.hdkd-pj-prow.is-now .hdkd-pj-pcat { color: var(--pj-active-cat-txt); }
.hdkd-pj-prow.is-now .hdkd-pj-pcat { background: color-mix(in srgb, var(--pj-active-cat-txt) 16%, transparent); }
.hdkd-pj-prow.is-now .hdkd-pj-pbis,
.hdkd-pj-prow.is-now .hdkd-pj-pwho,
.hdkd-pj-prow.is-now .hdkd-pj-pinfo { color: var(--pj-active-cat-txt); opacity: .82; }
.hdkd-pj-prow.is-now::after {
	content: "\25CF Jetzt"; position: absolute; top: .55em; right: .85em;
	font-family: var(--pj-font-mono); font-size: var(--pj-fs-month); font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--pj-active-cat-txt); opacity: .85;
}
.hdkd-pj-prow.is-next { border-left-color: var(--pj-text-dim); }
.hdkd-pj-prow:not(.is-now):not(.is-next) { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
	.hdkd-pj-prow { transition-duration: .01ms; }
	.hdkd-pj-prow.is-now { transform: none; }
}