/* PSAG-Veranstaltungskalender – barrierearme Darstellung.
   Schrift und Textfarbe kommen vom Theme; Hauptfarbe über --psag-haupt (Einstellungen). */

.psag-kal,
.psag-dialog {
	--psag-haupt: #333333;
	--psag-text: #1d1d1d;
	--psag-grau: #555555;
	--psag-linie: #c9c9c9;
	--psag-flaeche: #f4f4f4;
	--psag-weiss: #ffffff;
	--psag-rot: #a4161a;
	--psag-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--psag-text);
}
.psag-kal *,
.psag-kal *::before,
.psag-kal *::after,
.psag-dialog *,
.psag-dialog *::before,
.psag-dialog *::after {
	box-sizing: border-box;
}
.psag-kal { margin: 1.5rem auto; hyphens: auto; -webkit-hyphens: auto; }
.psag-filter-huelle { margin: 0 0 1rem; }
.psag-filter-titel {
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: .5rem 1rem;
	border: 2px solid var(--psag-haupt);
	border-radius: var(--psag-radius);
	font-weight: 700;
	cursor: pointer;
	list-style-position: inside;
}
.psag-filter-huelle[open] .psag-filter-titel { border-radius: var(--psag-radius) var(--psag-radius) 0 0; }
.psag-filter-huelle .psag-filter { border-radius: 0 0 var(--psag-radius) var(--psag-radius); margin: 0; }
.psag-kal button,
.psag-kal input,
.psag-kal select,
.psag-dialog button {
	font: inherit;
	color: inherit;
}

/* Fokus immer deutlich sichtbar */
.psag-kal :focus-visible,
.psag-dialog :focus-visible {
	outline: 3px solid var(--psag-haupt);
	outline-offset: 2px;
}

/* ---------- Filter */
.psag-filter {
	background: var(--psag-flaeche);
	border-radius: var(--psag-radius);
	padding: 1rem;
	margin: 0 0 1rem;
}
.psag-filter-reihe {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	align-items: flex-end;
}
.psag-feld { display: flex; flex-direction: column; gap: .25rem; min-width: 11rem; flex: 1 1 11rem; }
.psag-feld-breit { flex: 2 1 14rem; }
.psag-label { font-weight: 700; font-size: .95rem; }
.psag-fest { min-height: 44px; display: flex; align-items: center; }
.psag-filter select,
.psag-filter input[type="date"],
.psag-filter input[type="search"] {
	min-height: 44px;
	width: 100%;
	padding: .4rem .6rem;
	border: 2px solid #767676;
	border-radius: 6px;
	background: var(--psag-weiss);
	color: var(--psag-text);
}
.psag-kategorien {
	border: 0;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.psag-kategorien legend { padding: 0; margin-bottom: .4rem; }
.psag-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 44px;
	padding: .35rem .85rem;
	border: 2px solid var(--psag-linie);
	border-radius: 999px;
	background: var(--psag-weiss);
	cursor: pointer;
	text-align: left;
}
.psag-chip:hover { border-color: var(--kat); }
.psag-chip[aria-pressed="true"] {
	border-color: var(--kat);
	box-shadow: inset 0 0 0 2px var(--kat);
	font-weight: 700;
}
.psag-chip[aria-pressed="true"]::after { content: "✓"; margin-left: .15rem; }
.psag-punkt {
	display: inline-block;
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background: var(--kat, #616161);
	flex: 0 0 auto;
}
.psag-optionen { margin-top: 1rem; align-items: center; }
.psag-check {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	cursor: pointer;
}
.psag-check input { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--psag-haupt); }
.psag-link-knopf {
	background: none;
	border: 0;
	padding: .5rem 0;
	min-height: 44px;
	text-decoration: underline;
	cursor: pointer;
	margin-left: auto;
}

/* ---------- Ansichten */
.psag-tabs {
	display: flex;
	gap: .5rem;
	border-bottom: 3px solid var(--psag-haupt);
	margin-bottom: .75rem;
}
.psag-tab {
	flex: 1 1 0;
	max-width: 12rem;
	min-height: 48px;
	padding: .5rem 1rem;
	border: 2px solid var(--psag-haupt);
	border-bottom: 0;
	border-radius: var(--psag-radius) var(--psag-radius) 0 0;
	background: var(--psag-weiss);
	color: var(--psag-haupt);
	font-weight: 700;
	cursor: pointer;
}
.psag-tab[aria-selected="true"] { background: var(--psag-haupt); color: var(--psag-weiss); }
.psag-status { margin: .25rem 0 1rem; color: var(--psag-grau); }
.psag-inhalt:focus { outline: none; }

/* ---------- Knöpfe */
.psag-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .6rem 1.2rem;
	border: 2px solid var(--psag-haupt);
	border-radius: var(--psag-radius);
	background: var(--psag-haupt);
	color: var(--psag-weiss);
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
.psag-knopf:hover { filter: brightness(1.15); }
.psag-knopf[disabled] { opacity: .45; cursor: not-allowed; }
.psag-knopf-zweit { background: var(--psag-weiss); color: var(--psag-haupt); }
.psag-knopf-klein { min-height: 40px; padding: .3rem .9rem; margin-top: .4rem; }
.psag-mehr { text-align: center; margin: 1.5rem 0; }

/* ---------- Liste */
.psag-tag {
	font-size: 1.15rem;
	margin: 1.5rem 0 .5rem;
	padding-bottom: .25rem;
	border-bottom: 1px solid var(--psag-linie);
}
.psag-liste,
.psag-zelle-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.psag-liste li { margin: 0 0 .6rem; }
.psag-eintrag {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	width: 100%;
	padding: .9rem 1rem;
	border: 1px solid var(--psag-linie);
	border-left: 8px solid var(--kat);
	border-radius: var(--psag-radius);
	background: var(--psag-weiss);
	text-align: left;
	cursor: pointer;
}
.psag-eintrag:hover { background: var(--psag-flaeche); }
.psag-zeitblock { display: flex; flex-direction: column; min-width: 4.2rem; }
.psag-zeit { font-weight: 700; font-size: 1.1rem; }
.psag-zeit-bis { color: var(--psag-grau); font-size: .9rem; }
.psag-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.psag-kat { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--psag-grau); }
.psag-titel { font-weight: 700; font-size: 1.1rem; }
.psag-meta { color: var(--psag-grau); overflow-wrap: anywhere; }
.psag-marken { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.psag-marke {
	display: inline-block;
	padding: .1rem .55rem;
	border: 1px solid var(--psag-linie);
	border-radius: 999px;
	font-size: .85rem;
	background: var(--psag-flaeche);
}
.psag-marke-ab { background: var(--psag-rot); border-color: var(--psag-rot); color: #fff; font-weight: 700; }
.psag-pfeil { align-self: center; font-size: 1.8rem; color: var(--psag-grau); }
.psag-abgesagt .psag-titel,
.psag-abgesagt .psag-zeit { text-decoration: line-through; }
.psag-abgesagt { background: #fbf2f2; }
.psag-leer {
	padding: 1.5rem;
	text-align: center;
	background: var(--psag-flaeche);
	border-radius: var(--psag-radius);
}
.psag-hinweis { padding: 1rem; border-left: 5px solid var(--psag-rot); background: #fbf2f2; }

/* ---------- Monat */
.psag-monat-kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
}
.psag-monat-titel { margin: 0; font-size: 1.3rem; text-align: center; }
.psag-monat {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	border-top: 1px solid var(--psag-linie);
	border-left: 1px solid var(--psag-linie);
}
.psag-wt {
	padding: .4rem;
	font-weight: 700;
	text-align: center;
	background: var(--psag-flaeche);
	border-right: 1px solid var(--psag-linie);
	border-bottom: 1px solid var(--psag-linie);
}
.psag-zelle {
	min-height: 7.5rem;
	padding: .3rem;
	border-right: 1px solid var(--psag-linie);
	border-bottom: 1px solid var(--psag-linie);
	background: var(--psag-weiss);
	min-width: 0;
}
.psag-zelle-leer { background: var(--psag-flaeche); }
.psag-vergangen { background: #fafafa; }
.psag-vergangen .psag-zelle-nr { color: var(--psag-grau); }
.psag-heute { box-shadow: inset 0 0 0 3px var(--psag-haupt); }
.psag-zelle-kopf { font-weight: 700; margin-bottom: .2rem; }
.psag-zelle-wt,
.psag-zelle-mon,
.psag-heute-text { display: none; }
.psag-zelle-liste li { margin-bottom: .25rem; }
.psag-kompakt {
	flex-direction: column;
	gap: 0;
	padding: .25rem .35rem;
	border-left-width: 5px;
	font-size: .85rem;
	line-height: 1.3;
	min-height: 44px;
}
.psag-kompakt .psag-zeit { font-size: .85rem; }
.psag-kompakt .psag-titel { font-size: .85rem; overflow-wrap: break-word; }
.psag-kompakt .psag-marke { font-size: .75rem; padding: 0 .35rem; align-self: flex-start; }
.psag-weitere {
	width: 100%;
	min-height: 40px;
	background: none;
	border: 1px dashed var(--psag-linie);
	border-radius: 6px;
	cursor: pointer;
	font-size: .85rem;
}

/* ---------- Karte */
.psag-karte {
	height: 480px;
	border-radius: var(--psag-radius);
	border: 1px solid var(--psag-linie);
	z-index: 0;
}
.psag-zustimmung {
	padding: 2rem 1.5rem;
	background: var(--psag-flaeche);
	border: 2px dashed var(--psag-linie);
	border-radius: var(--psag-radius);
	text-align: center;
}
.psag-zustimmung p { max-width: 38rem; margin: 0 auto .75rem; }
.psag-zustimmung-titel { font-weight: 700; font-size: 1.2rem; }
.psag-zustimmung .psag-check { justify-content: center; margin: 0 auto .75rem; }
.psag-klein { font-size: .9rem; color: var(--psag-grau); }
.psag-block { display: block; }
.psag-pin-huelle { background: none; border: 0; }
.psag-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	font-family: inherit;
}
.leaflet-marker-icon:focus .psag-pin { outline: 3px solid #000; outline-offset: 2px; }
.psag-popup { font-family: inherit; font-size: .95rem; }
.psag-popup-eintrag {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: .4rem 0 .6rem .6rem;
	border-left: 5px solid var(--kat);
	margin-bottom: .5rem;
}
.psag-popup-titel { font-size: 1.05rem; }

/* ---------- Detaildialog */
.psag-dialog {
	width: min(42rem, calc(100vw - 1.5rem));
	max-height: calc(100vh - 2rem);
	padding: 1.25rem 1.5rem 1.5rem;
	border: 0;
	border-radius: 12px;
	background: var(--psag-weiss);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
	overflow: auto;
}
.psag-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.psag-dialog-offen {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100000;
}
.psag-schliessen {
	float: right;
	min-height: 44px;
	padding: .4rem .9rem;
	border: 2px solid var(--psag-haupt);
	border-radius: var(--psag-radius);
	background: var(--psag-weiss);
	color: var(--psag-haupt);
	font-weight: 700;
	cursor: pointer;
}
.psag-dialog-titel { font-size: 1.5rem; margin: .4rem 0 .2rem; line-height: 1.25; }
.psag-traeger { margin: 0 0 1rem; color: var(--psag-grau); font-weight: 700; }
.psag-beschreibung { font-size: 1.05rem; }
.psag-warnung {
	padding: .6rem .9rem;
	background: var(--psag-rot);
	color: #fff;
	font-weight: 700;
	border-radius: 6px;
}
.psag-dl { margin: 1rem 0 1.25rem; }
.psag-dl dt { font-weight: 700; margin-top: .75rem; }
.psag-dl dd { margin: .1rem 0 0; overflow-wrap: anywhere; }
.psag-umbruch { white-space: pre-line; }
.psag-dialog a,
.psag-kal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.psag-kal-laden { color: var(--psag-grau); }

/* ---------- Smartphone */
@media (max-width: 700px) {
	.psag-filter { padding: .75rem; }
	.psag-feld { min-width: 100%; }
	.psag-link-knopf { margin-left: 0; }
	.psag-tab { max-width: none; padding: .5rem .25rem; }
	.psag-eintrag { gap: .6rem; padding: .75rem; }
	.psag-pfeil { display: none; }
	.psag-monat-kopf .psag-knopf { padding: .5rem .6rem; font-size: .9rem; }
	/* Monatsansicht wird zur Tagesliste: nur Tage mit Terminen */
	.psag-monat { display: block; border: 0; }
	.psag-wt,
	.psag-zelle-leer,
	.psag-zelle.psag-ohne { display: none; }
	.psag-zelle {
		min-height: 0;
		border: 1px solid var(--psag-linie);
		border-radius: var(--psag-radius);
		margin-bottom: .6rem;
		padding: .6rem;
	}
	.psag-zelle-wt,
	.psag-zelle-mon,
	.psag-heute-text { display: inline; }
	.psag-kompakt { flex-direction: row; gap: .6rem; font-size: 1rem; padding: .5rem .6rem; }
	.psag-kompakt .psag-zeit,
	.psag-kompakt .psag-titel { font-size: 1rem; }
	.psag-karte { height: 380px; }
	.psag-dialog { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.psag-kal *,
	.psag-dialog * { transition: none !important; animation: none !important; }
}