/* Viva Blocks – [viva_agenda_kalender]  Layout + Kalender-Plugin im Corporate Design.
   Das Plugin selbst bleibt unverändert: hier werden nur seine Farben/Schriften innerhalb von .vk-agenda überschrieben. */
.vk-agenda { padding-top: calc(var(--vb-space) * .5) !important; }
.vk-agenda__intro { max-width: 760px; margin: 0 0 28px !important; }
.vk-agenda__cal { min-height: 420px; }

/* Grundfarben des Plugins → CD */
/* Seit Plugin-Update: Variablen sitzen am Plugin-Container → dort überschreiben */
.vk-agenda .viva-calendar-wrapper, .vk-agenda .ct-kalender-wrapper {
	--text-main: var(--vb-text); --text-muted: var(--vb-muted); --bg-main: var(--vb-bg-warm); --bg-card: var(--vb-bg);
	--border-color: rgba(var(--vb-text-rgb), .12); --shadow-soft: 0 10px 26px -18px rgba(var(--vb-text-rgb), .35); --shadow-hover: var(--vb-shadow);
	--color-gottesdienst: var(--vb-accent); --color-gemeinde: var(--vb-primary-dark); --color-jugend: #5F7F52; --color-kjs: #4E6A87; --color-abwesenheit: #8A8178;
	--bg-gottesdienst: var(--vb-accent-soft); --bg-gemeinde: var(--vb-primary-soft); --bg-jugend: rgba(95,127,82,.12); --bg-kjs: rgba(78,106,135,.12); --bg-abwesenheit: rgba(138,129,120,.14);
	--color-sunday: var(--vb-accent); --color-today-bg: rgba(var(--vb-primary-rgb), .12); --color-search-focus: var(--vb-primary-soft); --color-day-header-bg: rgba(255,255,255,.92); --color-event-text-dark: var(--vb-text);
}
/* Kategorie-Farben: Gottesdienst = Weinrot, Gemeinde = Gold, Jugend = Salbei, KJS = Taubenblau, Abwesenheit = Warmgrau */
.vk-agenda [data-cat="gottesdienst"], .vk-agenda [data-filter="gottesdienst"], .vk-agenda .cat-gottesdienst { --ag: var(--vb-accent); --ag-rgb: var(--vb-accent-rgb); --ag-on: var(--vb-on-accent); --ag-txt: var(--vb-accent); }
.vk-agenda [data-cat="gemeinde"], .vk-agenda [data-filter="gemeinde"], .vk-agenda .cat-gemeinde { --ag: var(--vb-primary); --ag-rgb: var(--vb-primary-rgb); --ag-on: var(--vb-on-primary); --ag-txt: #8A7224; }
.vk-agenda [data-cat="jugend"], .vk-agenda [data-filter="jugend"], .vk-agenda .cat-jugend { --ag: #5F7F52; --ag-rgb: 95,127,82; --ag-on: #fff; --ag-txt: #4D6943; }
.vk-agenda [data-cat="kjs"], .vk-agenda [data-filter="kjs"], .vk-agenda .cat-kjs { --ag: #4E6A87; --ag-rgb: 78,106,135; --ag-on: #fff; --ag-txt: #41597A; }
.vk-agenda [data-cat="abwesenheit"], .vk-agenda [data-filter="abwesenheit"], .vk-agenda .cat-abwesenheit { --ag: #8A8178; --ag-rgb: 138,129,120; --ag-on: #fff; --ag-txt: #6B6359; }

/* Schriften */
.vk-agenda .calendar-container, .vk-agenda .modal-content { font-family: var(--vb-font-body); color: var(--vb-text); }
.vk-agenda .viva-calendar-wrapper .cal-header h2 { font-family: var(--vb-font-heading); font-weight: var(--vb-heading-weight); font-size: var(--vb-fs-h2); letter-spacing: -.01em; color: var(--vb-text); text-transform: var(--vb-heading-case); }
.vk-agenda .viva-calendar-wrapper .day-header h3 { font-family: var(--vb-font-heading); font-size: calc(var(--vb-fs) * 1.08); font-weight: 700; color: var(--vb-text); }
.vk-agenda .day-header { background: rgba(255,255,255,.92); }
.vk-agenda .day-header.is-today h3 { color: var(--vb-primary-dark); }
.vk-agenda .day-header.is-sunday h3 { color: var(--vb-accent); }
.vk-agenda .day-header.is-today .line { background: var(--vb-primary); opacity: .8; }
.vk-agenda .viva-calendar-wrapper .event-title { font-family: var(--vb-font-heading); font-size: calc(var(--vb-fs) * .95); font-weight: 700; line-height: 1.3; color: var(--vb-text); }
.vk-agenda .event-time { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vb-muted); }
.vk-agenda .event-predigt { color: var(--vb-accent) !important; }

/* Navigation, Filter, Suche, Ansicht */
.vk-agenda .nav-btn, .vk-agenda .carousel-nav-btn { border-color: rgba(var(--vb-text-rgb), .14); color: var(--vb-text); }
.vk-agenda .nav-btn:hover, .vk-agenda .carousel-nav-btn:hover { background: var(--vb-primary); border-color: var(--vb-primary); color: var(--vb-on-primary); }
.vk-agenda .filter-chip { padding: 9px 18px; border: 2px solid rgba(var(--vb-text-rgb), .12); background: var(--vb-bg); color: var(--vb-text); font-family: var(--vb-font-body); font-size: var(--vb-fs-small); font-weight: 700; box-shadow: none; }
.vk-agenda .filter-chip:hover { border-color: var(--ag, var(--vb-primary)); }
.vk-agenda .filter-chip.active[data-filter] { background: var(--ag); border-color: var(--ag); color: var(--ag-on); }
.vk-agenda #btn-past-events { border-color: rgba(var(--vb-text-rgb), .22) !important; color: var(--vb-muted) !important; font-family: var(--vb-font-body); font-size: var(--vb-fs-small) !important; }
.vk-agenda #btn-past-events:hover { border-color: var(--vb-primary) !important; color: var(--vb-text) !important; }
.vk-agenda .btn-icon { border-color: rgba(var(--vb-text-rgb), .14); border-radius: var(--vb-radius-btn); color: var(--vb-text); font-family: var(--vb-font-body); font-size: var(--vb-fs-small); box-shadow: none; }
.vk-agenda .btn-icon:hover, .vk-agenda .btn-icon.active { background: var(--vb-text); border-color: var(--vb-text); color: var(--vb-bg); }
.vk-agenda .cal-search-container { border-color: rgba(var(--vb-text-rgb), .14); box-shadow: none; }
.vk-agenda .cal-search-container:focus-within { border-color: var(--vb-primary-dark); box-shadow: 0 0 0 4px var(--vb-primary-soft); }
.vk-agenda .cal-search-container input { font-family: var(--vb-font-body); color: var(--vb-text); background: transparent; border: 0; outline: 0; box-shadow: none; }

/* Termin-Karten */
.vk-agenda .event-card { border-radius: var(--vb-radius); padding: 14px 14px 14px 18px; }
.vk-agenda .event-card[data-cat] { border-color: rgba(var(--ag-rgb), .28); box-shadow: 0 10px 26px -20px rgba(var(--ag-rgb), .9); }
.vk-agenda .event-card[data-cat]:hover { box-shadow: var(--vb-shadow); transform: translateY(-3px); }
.vk-agenda .event-card[data-cat]::before { width: 4px; background: var(--ag); }
.vk-agenda .event-card[data-cat] .event-badge { background: rgba(var(--ag-rgb), .14); color: var(--ag-txt); letter-spacing: .1em; }
.vk-agenda .event-card:has(.badge-multi-day) .event-time { padding-right: 92px; }
.vk-agenda .badge-multi-day { background: var(--vb-bg-warm); color: var(--vb-text); }

/* Monatsansicht */
.vk-agenda .grid-header-day { color: var(--vb-muted); }
.vk-agenda .grid-cell.empty { background: rgba(var(--vb-text-rgb), .025); }
.vk-agenda .grid-cell.is-today { background: rgba(var(--vb-primary-rgb), .12); border-color: var(--vb-primary); }
.vk-agenda .grid-cell.is-today .cell-date .d-num { background: var(--vb-primary); color: var(--vb-on-primary); }
.vk-agenda .grid-cell.is-sunday .cell-date { color: var(--vb-accent); }
.vk-agenda .grid-event[data-cat] { background: rgba(var(--ag-rgb), .12); border-left-color: var(--ag); color: var(--ag-txt); }
.vk-agenda .grid-event.multi-day[data-cat] { background: var(--ag); border-left-color: var(--ag); color: var(--ag-on); }

/* Detail-Fenster */
.vk-agenda .modal-overlay { background: rgba(var(--vb-text-rgb), .6); }
.vk-agenda .modal-content { border-radius: var(--vb-radius); }
.vk-agenda .modal-content[class*="cat-"] { border-top-color: var(--ag); }
.vk-agenda .modal-content .modal-header { height: auto; padding: 26px 70px 0 30px; border-top: 8px solid var(--ag, var(--vb-primary)); background: none !important; }
.vk-agenda .modal-content #modal-category-badge { margin: 0; }
.vk-agenda .modal-body { padding-top: 14px; }
.vk-agenda .modal-body .subtitle strong { color: var(--vb-accent) !important; }
.vk-agenda .cell-date, .vk-agenda .m-label { font-family: var(--vb-font-heading); }
.vk-agenda .modal-content[class*="cat-"] .badge, .vk-agenda .modal-content[class*="cat-"] #modal-category-badge { background: rgba(var(--ag-rgb), .14) !important; color: var(--ag-txt) !important; letter-spacing: .1em; }
.vk-agenda .viva-calendar-wrapper .modal-body h3 { font-family: var(--vb-font-heading); font-weight: var(--vb-heading-weight); color: var(--vb-text); }
.vk-agenda .meta-item i { color: var(--vb-accent); }
.vk-agenda .modal-description a { color: var(--vb-accent); }
.vk-agenda .btn-primary { background: var(--vb-primary); color: var(--vb-on-primary); border-radius: var(--vb-radius-btn); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: var(--vb-fs-small); }
.vk-agenda .btn-primary:hover { background: var(--vb-accent); color: var(--vb-on-accent); }
/* Etwas breiter + Bedienleiste in zwei sauberen Zeilen: Filter | Ansicht  /  Vergangene | Suche */
.vk-agenda > .vb-inner { max-width: max(var(--vb-width), 1320px); }
.vk-agenda { padding-bottom: calc(var(--vb-space) * .6) !important; }
.vk-agenda .viva-calendar-wrapper .days-container { gap: 16px; padding-top: 6px; padding-bottom: 16px; }
.vk-agenda .viva-calendar-wrapper .day-group { margin-bottom: 0; }
.vk-agenda .viva-calendar-wrapper { --cal-font-heading: var(--vb-font-heading); }
/* Kachelansicht: Fade links/rechts (wie bei Generationen/Neuigkeiten), dynamisch per Script im Template.
   Die Fade-Zonen liegen im Innenabstand (--vk-f) bzw. im Seitenrand (--vk-g): Eingerastete Kacheln bleiben voll sichtbar,
   die Pfeile sitzen in der Fade-Zone und überdecken keine Kachel. */
@property --vk-fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --vk-fr { syntax: '<length>'; inherits: false; initial-value: 0px; }
.vk-agenda { overflow-x: clip; --vk-f: 48px; --vk-g: min(var(--vk-f), max(24px, (100vw - max(var(--vb-width), 1320px)) / 2)); }
.vk-agenda .viva-calendar-wrapper .carousel-wrapper { margin-inline: calc(var(--vk-g) * -1); width: auto; }
.vk-agenda .viva-calendar-wrapper .days-container { padding-inline: var(--vk-f); scroll-padding-inline: var(--vk-f); --vk-fl: 0px; --vk-fr: var(--vk-f); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--vk-fl), #000 calc(100% - var(--vk-fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--vk-fl), #000 calc(100% - var(--vk-fr)), transparent 100%); transition: --vk-fl .3s var(--vb-ease), --vk-fr .3s var(--vb-ease); }
.vk-agenda .viva-calendar-wrapper .days-container.vk-can-l { --vk-fl: var(--vk-f); }
.vk-agenda .viva-calendar-wrapper .days-container.vk-at-end { --vk-fr: 0px; }
.vk-agenda .viva-calendar-wrapper .carousel-nav-btn.left { left: calc((var(--vk-f) - 40px) / 2); }
.vk-agenda .viva-calendar-wrapper .carousel-nav-btn.right { right: calc((var(--vk-f) - 40px) / 2); }
@media (max-width: 960px) { .vk-agenda { --vk-f: 24px; --vk-g: 20px; } }