/*
 * Kalender – Gestaltung.
 *
 * Leitgedanke: Ein Termin besteht aus WANN, WAS und WO, und zwar in dieser Reihenfolge der
 * Wichtigkeit. Das Datum bekommt deshalb einen eigenen Block, den man sieht statt ihn zu
 * lesen – ein Blick genügt. Beim gekauften Plugin steht dieselbe Information als
 * Fließtextzeile neben dem Titel; genau dort gewinnt diese Ansicht.
 *
 * Keine eigene Schrift, keine eigenen Markenfarben: alles erbt vom Theme, damit der
 * Kalender nach der Seite aussieht und nicht nach Plugin. Wer eingreifen will, überschreibt
 * die Variablen unten – eine Zeile im Customizer reicht:
 *
 *     :root { --pgk-akzent: #1f6b3a; }
 */

:root {
	--pgk-akzent:            #1f3a2e;   /* Datumsblock, Fokusrahmen                    */
	--pgk-akzent-schrift:    #fff;      /* Schrift auf dem Akzent                      */
	--pgk-leise:             #5a5a5a;   /* Nebeninformation – 4.6:1 auf Weiß           */
	--pgk-rand:              #e4e4e4;
	--pgk-flaeche:           #fff;
	--pgk-warnung:           #a8182b;   /* Absage – 4.5:1 auf Weiß                     */
	--pgk-warnung-flaeche:   #fdf2f3;
	--pgk-hinweis:           #7a4a00;   /* Verschoben                                  */
	--pgk-hinweis-flaeche:   #fdf7ee;
	--pgk-ecke:              10px;
	--pgk-luft:              1.15rem;
}

/* ------------------------------------------------------------------ Datumsblock */
.pgk-datum {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.75em;
	padding: .45em .2em .5em;
	border-radius: var(--pgk-ecke);
	background: var(--pgk-akzent);
	color: var(--pgk-akzent-schrift);
	line-height: 1.05;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.pgk-datum__wochentag,
.pgk-datum__monat {
	font-size: .66em;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .85;
}

.pgk-datum__tag {
	font-size: 1.72em;
	font-weight: 700;
	letter-spacing: -.02em;
}

/* ------------------------------------------------------------------ Liste */
.pgk-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgk-eintrag {
	position: relative;             /* trägt die Klickfläche des Titels */
	display: flex;
	gap: var(--pgk-luft);
	padding: var(--pgk-luft) 0;
	border-bottom: 1px solid var(--pgk-rand);
}

.pgk-eintrag:first-child { padding-top: 0; }
.pgk-eintrag:last-child  { border-bottom: 0; }

.pgk-eintrag__text { min-width: 0; }

/* 🚩 Themes legen auf Überschriften oft eine feste Laufweite in PIXELN (Astra: -2px).
   Für die 40-px-Schlagzeile ist das richtig, bei 18 px klebt der Titel zusammen – auf
   der Kundenseite live gesehen. Deshalb hier eine RELATIVE Laufweite: der Charakter
   des Themes bleibt, die Enge verschwindet. */
.pgk-eintrag__titel,
.pgk-kachel__titel {
	letter-spacing: -.012em;
}

.pgk-eintrag__titel {
	margin: 0 0 .25em;
	font-size: 1.12em;
	line-height: 1.3;
}

.pgk-eintrag__titel a {
	color: inherit;
	text-decoration: none;
}

/* Die ganze Zeile ist anklickbar – aber im Quelltext bleibt EIN Link mit dem Titel
   als Text. Ein Vorlesegerät hört den Titel, nicht „Link, Link, Link". */
.pgk-eintrag__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--pgk-ecke);
}

.pgk-eintrag:hover  .pgk-eintrag__titel a,
.pgk-eintrag:focus-within .pgk-eintrag__titel a { text-decoration: underline; }

.pgk-eintrag__titel a:focus-visible::after {
	outline: 3px solid var(--pgk-akzent);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ Zeilen mit Zeichen */
/* 🚩 Diese Zeilen sind <p>. Themes geben Absätzen einen kräftigen Abstand nach unten
   (Astra: 1.5em) mit einer spezifischeren Regel als einer einzelnen Klasse – deshalb
   hier zweifach qualifiziert statt mit !important. */
.pgk-eintrag__text .pgk-zeile,
.pgk-kachel__text .pgk-zeile {
	display: flex;
	align-items: center;
	gap: .45em;
	margin: .12em 0;
	color: var(--pgk-leise);
	font-size: .93em;
}

.pgk-symbol {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	opacity: .75;
}

/* ------------------------------------------------------------------ Kategorien */
.pgk-eintrag__text .pgk-marken,
.pgk-kachel__text .pgk-marken {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
	margin: .5em 0 0;
}

.pgk-marke {
	padding: .17em .6em;
	border: 1px solid var(--pgk-rand);
	border-radius: 999px;
	color: var(--pgk-leise);
	font-size: .78em;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Vorschaubild */
.pgk-eintrag__bild {
	flex: 0 0 5.5em;
	align-self: flex-start;
	border-radius: var(--pgk-ecke);
	overflow: hidden;
	background: #f1f1f1;
}

/* Ohne Bild bleibt der Platz leer, aber reserviert – die Textspalte bleibt bündig. */
.pgk-eintrag__bild--leer { background: none; }

.pgk-eintrag__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ------------------------------------------------------------------ Eine Zeile */
/* Für Banner und Kopfleisten: erbt Schrift und Farbe der Umgebung, bringt nur die
   Anordnung mit. Der Termin darin ist immer der nächste – von Hand getippte Banner
   veralten, dieser nicht. */
.pgk-einzeiler {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4em;
}

.pgk-einzeiler__vorspann { opacity: .8; }

.pgk-einzeiler__titel {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.pgk-einzeiler__titel:hover,
.pgk-einzeiler__titel:focus-visible { text-decoration: underline; }

.pgk-einzeiler__trenner { opacity: .5; }

.pgk-einzeiler__hinweis {
	padding: .05em .5em;
	border-radius: 999px;
	background: var(--pgk-warnung);
	color: #fff;
	font-size: .85em;
}

.pgk-einzeiler.pgk-ist-abgesagt .pgk-einzeiler__titel { text-decoration: line-through; }

/* ------------------------------------------------------------------ Kacheln */
.pgk-kacheln {
	display: grid;
	gap: var(--pgk-luft);
	grid-template-columns: 1fr;
}

.pgk-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pgk-rand);
	border-radius: var(--pgk-ecke);
	background: var(--pgk-flaeche);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}

.pgk-kachel:hover {
	box-shadow: 0 6px 22px rgb(0 0 0 / 9%);
	transform: translateY(-2px);
}

.pgk-kachel__bildflaeche {
	position: relative;
	background: #f1f1f1;
}

.pgk-kachel__bild {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Ohne Bild bleibt die Fläche flach – dann sitzt das Datum als Kopfzeile. */
.pgk-kachel__bildflaeche:not(:has(.pgk-kachel__bild)) { min-height: 3.6em; }

.pgk-datum--marke {
	position: absolute;
	left: .8em;
	bottom: -1.1em;
	width: 3.3em;
	box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
}

.pgk-kachel__text { padding: 1.7em 1em 1.15em; }

.pgk-kachel__titel {
	margin: 0 0 .25em;
	font-size: 1.06em;
	line-height: 1.3;
}

.pgk-kachel__titel a { color: inherit; text-decoration: none; }

.pgk-kachel__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--pgk-ecke);
}

.pgk-kachel:hover .pgk-kachel__titel a,
.pgk-kachel:focus-within .pgk-kachel__titel a { text-decoration: underline; }

.pgk-kachel__titel a:focus-visible::after {
	outline: 3px solid var(--pgk-akzent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ Hinweis */
/* 🚩 Der ganze Grund für dieses Plugin: „Abgesagt" muss man SEHEN. Beim gekauften
   Plugin stand das Wort in derselben Größe wie der Fließtext – und wurde übersehen. */
.pgk-hinweis {
	display: flex;
	flex-direction: column;
	gap: .1em;
	margin: 0 0 var(--pgk-luft);
	padding: .75em .95em;
	border-left: 4px solid var(--pgk-warnung);
	border-radius: var(--pgk-ecke);
	background: var(--pgk-warnung-flaeche);
}

.pgk-hinweis__wort {
	font-size: 1.45em;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--pgk-warnung);
}

.pgk-hinweis__grund { font-size: .95em; }

.pgk-hinweis--verschoben {
	border-left-color: var(--pgk-hinweis);
	background: var(--pgk-hinweis-flaeche);
}

.pgk-hinweis--verschoben .pgk-hinweis__wort { color: var(--pgk-hinweis); }

/* In Liste und Kachel ist es ein Vermerk, keine Überschrift. */
.pgk-hinweis--klein {
	margin: .55em 0 0;
	padding: .3em .55em;
	border-left-width: 3px;
}

.pgk-hinweis--klein .pgk-hinweis__wort { font-size: .95em; font-weight: 700; }
.pgk-hinweis--klein .pgk-hinweis__grund { font-size: .88em; }

/* ------------------------------------------------------------------ Zustände */
.pgk-ist-abgesagt .pgk-eintrag__titel a,
.pgk-ist-abgesagt .pgk-kachel__titel a { text-decoration: line-through; }

.pgk-ist-abgesagt .pgk-datum { background: var(--pgk-warnung); }

/* Vergangenes tritt zurück, verschwindet aber nicht. */
.pgk-ist-vorbei { opacity: .62; }
.pgk-ist-vorbei .pgk-datum { background: var(--pgk-leise); }

/* ------------------------------------------------------------------ Terminseite */
.pgk-titelbild {
	margin: 0 0 var(--pgk-luft);
	border-radius: var(--pgk-ecke);
	overflow: hidden;
}

.pgk-titelbild img {
	display: block;
	width: 100%;
	height: auto;
}

/* 🚩 Manche Themes blenden den Beitragstitel aus (Astra kann das pro Inhaltstyp).
   Für einen Termin geht das nicht – dann hat die Seite keinen Namen. Nur für unseren
   Inhaltstyp zurückgeholt, alles andere bleibt wie das Theme es will. */
.single-pgk_termin .entry-header .entry-title,
.single-pgk_termin .ast-single-post .entry-title {
	display: block;
}

/* Kein Verfasser-Vermerk auf einer Terminseite – der Termin gehört dem Verein, nicht
   dem Benutzerkonto, das ihn eingetragen hat. Bei Astra nimmt ihn schon die PHP-Seite
   heraus (`astra_single_post_meta`); das hier deckt die übliche Bauweise klassischer
   Themes ab.
   🚩 Block-Themes setzen den Vermerk aus einzelnen Blöcken zusammen („Written by X in Y")
   und lassen sich damit nicht sauber treffen – dort braucht es eine Zeile im Theme. */
.single-pgk_termin .entry-meta,
.single-pgk_termin .post-meta,
.single-pgk_termin .ast-single-post-meta { display: none; }

.pgk-eckdaten {
	margin: 0 0 var(--pgk-luft);
	padding: 0 0 var(--pgk-luft);
	border-bottom: 1px solid var(--pgk-rand);
}

.pgk-eckdaten .pgk-eckdaten__zeile { display: flex; gap: var(--pgk-luft); margin: 0 0 .45em; }

.pgk-eckdaten__wort {
	flex: 0 0 4.5em;
	padding-top: .22em;
	color: var(--pgk-leise);
	font-size: .82em;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.pgk-eckdaten__klein { color: var(--pgk-leise); font-size: .95em; }

.pgk-fuss { margin-top: calc(var(--pgk-luft) * 1.4); }
.pgk-fuss__titel { margin: 0 0 .3em; font-size: 1.05em; }
.pgk-fuss__knoepfe { display: flex; flex-wrap: wrap; gap: .6em; margin-top: var(--pgk-luft); }

.pgk-knopf {
	display: inline-block;
	padding: .6em 1.15em;
	border: 1px solid currentColor;
	border-radius: var(--pgk-ecke);
	line-height: 1.3;
	text-decoration: none;
}

.pgk-knopf:hover,
.pgk-knopf:focus-visible { text-decoration: underline; }

.pgk-knopf:focus-visible { outline: 3px solid var(--pgk-akzent); outline-offset: 3px; }

.pgk-knopf--leise { color: var(--pgk-leise); }

.pgk-leer { color: var(--pgk-leise); }

/* ------------------------------------------------------------------ ab Tablet */
@media (min-width: 600px) {
	.pgk-kacheln { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
	.pgk-datum { width: 4.2em; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.pgk-kachel { transition: none; }
	.pgk-kachel:hover { transform: none; }
}