/* Vereinskalender – Terminliste und Widget. Farben/Größen kommen aus Vereinskalender › Design (CSS-Variablen). */
.vk-kalender {
	--vk-schrift: inherit;
	--vk-flaeche: #f2f7f3; --vk-rand: #d3e2d7; --vk-rand-breite: 1px; --vk-radius: 6px; --vk-linie: #e2ebe4;
	--vk-kopf-bg: #dbe9df; --vk-kopf-rand: #c8dccd; --vk-kopf-text: #333333; --vk-kopf-groesse: 20px;
	--vk-datum-farbe: #1f8a3c; --vk-datum-groesse: 16px;
	--vk-zeit-farbe: #c0392b; --vk-zeit-groesse: 16px; --vk-zeit-gewicht: 700;
	--vk-titel-farbe: #c0392b; --vk-titel-groesse: 16px; --vk-titel-stil: italic; --vk-titel-gewicht: 400;
	--vk-notiz-farbe: #222222; --vk-notiz-groesse: 14px;
	--vk-abo-farbe: #777777; --vk-abo-groesse: 15px;
	--vk-knopf-bg: #f4f4f4; --vk-knopf-text: #333333; --vk-knopf-rand: #dddddd;
	--vk-zeit-breite: 120px; --vk-w-faktor: 0.94; --vk-w-zeit-breite: 70px;
	font-family: var(--vk-schrift); line-height: 1.45; color: var(--vk-notiz-farbe);
}
.vk-kalender *, .vk-kalender *::before, .vk-kalender *::after { box-sizing: border-box; }
.vk-mit-abo { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 22px; align-items: start; }
.vk-rahmen { background: var(--vk-flaeche); border: var(--vk-rand-breite) solid var(--vk-rand); border-radius: var(--vk-radius); padding: 10px; }

.vk-monat { margin: 0 0 14px 0; }
.vk-monat:last-child { margin-bottom: 4px; }
.vk-kalender h3.vk-monat-kopf { margin: 10px 0 2px 0; padding: 5px 8px; background: var(--vk-kopf-bg);
	border: 1px solid var(--vk-kopf-rand); border-radius: 4px; font-family: var(--vk-schrift);
	font-size: var(--vk-kopf-groesse); font-weight: 400; line-height: 1.3; color: var(--vk-kopf-text); }
.vk-monat:first-child h3.vk-monat-kopf { margin-top: 0; }
.vk-monat-inhalt { padding: 0 10px; }

.vk-datum { color: var(--vk-datum-farbe); font-size: var(--vk-datum-groesse); padding: 8px 0 3px 0;
	border-bottom: 1px solid var(--vk-linie); margin-top: 6px; }
.vk-termin { display: grid; grid-template-columns: var(--vk-zeit-breite) minmax(0, 1fr); gap: 4px; padding: 8px 0;
	border-bottom: 1px solid var(--vk-linie); }
.vk-zeit { color: var(--vk-zeit-farbe); font-weight: var(--vk-zeit-gewicht); font-size: var(--vk-zeit-groesse); padding-left: 4px; }
.vk-titel { color: var(--vk-titel-farbe); font-style: var(--vk-titel-stil); font-weight: var(--vk-titel-gewicht);
	font-size: var(--vk-titel-groesse); }
.vk-notiz { font-size: var(--vk-notiz-groesse); color: var(--vk-notiz-farbe); margin-top: 2px; }
.vk-leer { margin: 6px; color: var(--vk-abo-farbe); }

/* Kalender abonnieren */
.vk-abo-rahmen { text-align: center; }
.vk-kalender h3.vk-abo-kopf { text-align: center; margin: 0 0 14px 0; }
.vk-abo-eintrag { margin: 0 0 40px 0; }
.vk-abo-eintrag:last-child { margin-bottom: 10px; }
.vk-abo-eintrag img { display: block; width: 170px; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
.vk-abo-eintrag p { color: var(--vk-abo-farbe); font-size: var(--vk-abo-groesse); margin: 14px 8px 0 8px; line-height: 1.7; }
.vk-abo-knopf { display: inline-block; padding: 8px 14px; border: 1px solid var(--vk-rand); border-radius: 4px; background: #fff; }

/* Widget – ohne äußeren Rahmen, Schrift etwas kleiner (Faktor im Designer) */
.vk-widget .vk-rahmen { border: none; border-radius: 0; background: transparent; padding: 0; }
.vk-widget.vk-widget-flaeche .vk-rahmen { background: var(--vk-flaeche); padding: 10px; border-radius: var(--vk-radius); }
.vk-widget .vk-termin { grid-template-columns: var(--vk-w-zeit-breite) minmax(0, 1fr); }
.vk-widget .vk-monat-inhalt { padding: 0 4px; }
.vk-widget h3.vk-monat-kopf { font-size: calc(var(--vk-kopf-groesse) * var(--vk-w-faktor)); }
.vk-widget .vk-datum { font-size: calc(var(--vk-datum-groesse) * var(--vk-w-faktor)); }
.vk-widget .vk-zeit { font-size: calc(var(--vk-zeit-groesse) * var(--vk-w-faktor)); }
.vk-widget .vk-titel { font-size: calc(var(--vk-titel-groesse) * var(--vk-w-faktor)); }
.vk-widget .vk-notiz { font-size: calc(var(--vk-notiz-groesse) * var(--vk-w-faktor)); }
.vk-mehr { text-align: right; margin-top: 18px; }
.vk-kalender a.vk-knopf { display: inline-block; padding: 8px 22px; background: var(--vk-knopf-bg);
	border: 1px solid var(--vk-knopf-rand); border-radius: 4px; color: var(--vk-knopf-text); text-decoration: none; font-size: 14px; }
.vk-kalender a.vk-knopf:hover { filter: brightness(0.96); }

@media (max-width: 760px) {
	.vk-mit-abo { grid-template-columns: 1fr; }
	.vk-termin { grid-template-columns: var(--vk-w-zeit-breite) minmax(0, 1fr); }
}