/* ============================================================
   The Events Calendar — Style-Template „Schulsozialarbeit ASS"
   Brandet TEC v2 (Views: Month/List/Day + Single Event) primär über
   die plugin-eigenen CSS-Variablen (--tec-*) -> saubere, robuste
   Umfärbung. Nutzt die Theme-Preset-Variablen -> Light/Dark automatisch.
   Wird nur geladen, wenn The Events Calendar aktiv ist.
   ============================================================ */

/* Die Zuordnung steht auch auf html:root (SSA-73). TEC leitet auf :root Variablen voneinander ab
   (--tec-color-text-event-date: var(--tec-color-text-primary), --tec-color-button-primary:
   var(--tec-color-accent-primary) …); eine abgeleitete Variable wird dort aufgelöst und vererbt,
   bevor die Zuordnung an .tribe-common greift. So standen Datum und Uhrzeit der Terminliste in TECs
   #141827 (dunkel 1,25:1 gegen die Karte) und „Kalender abonnieren" in #334aff (dunkel 2,38:1). Auf
   html:root (höhere Spezifität als :root) lösen auch die abgeleiteten Variablen die Theme-Farben
   auf — ebenso in der Einzelansicht, deren Vor/Zurück-Leiste außerhalb von .tribe-common steht. */
html:root,
.tribe-common,
.tribe-events,
.tribe-events-view {
  /* Akzent (Buttons, aktive Tage, Links, Marker) */
  --tec-color-accent-primary: var(--wp--preset--color--brand, #3e6478);
  --tec-color-accent-primary-hover: var(--wp--preset--color--brand-strong, #2b4553);
  --tec-color-accent-primary-active: var(--wp--preset--color--brand-strong, #2b4553);
  --tec-color-accent-primary-background: var(--wp--preset--color--brand, #3e6478);
  --tec-color-accent-primary-multiday: color-mix(in srgb, var(--wp--preset--color--brand, #3e6478) 22%, transparent);
  --tec-color-accent-primary-multiday-hover: color-mix(in srgb, var(--wp--preset--color--brand, #3e6478) 34%, transparent);

  /* Sekundär-Akzent = Dachmarken-Gold (featured, Marker, Hervorhebungen) */
  --tec-color-accent-secondary: var(--wp--preset--color--accent, #ea9a00);
  --tec-color-accent-secondary-hover: color-mix(in srgb, var(--wp--preset--color--accent, #ea9a00) 84%, #000);
  --tec-color-accent-secondary-active: color-mix(in srgb, var(--wp--preset--color--accent, #ea9a00) 78%, #000);
  --tec-color-accent-secondary-background: var(--wp--preset--color--accent, #ea9a00);

  /* Links (Farbe als Text: brand-text; brand wäre dunkel 4,06:1 gegen die Karte) */
  --tec-color-link-primary: var(--wp--preset--color--brand-text, #3e6478);
  --tec-color-link-accent: var(--wp--preset--color--brand-text, #3e6478);
  --tec-color-link-accent-hover: var(--wp--preset--color--brand-strong, #2b4553);

  /* Text */
  --tec-color-text-primary: var(--wp--preset--color--ink, #19171a);
  --tec-color-text-secondary: var(--wp--preset--color--text, #2c2a2d);
  --tec-color-text-events-title: var(--wp--preset--color--ink, #19171a);
  /* Text des Suchknopfs: TEC nimmt die Hintergrundfarbe (dunkel die Karte, 4,06:1 auf brand) —
     on-brand ist der Text-Token für die Petrolfläche (gemessen dunkel 5,01:1, hell 6,37:1). */
  --tec-color-text-events-bar-submit-button: var(--wp--preset--color--on-brand, #fff);

  /* Flächen & Rahmen (wichtig für Dark-Mode) */
  --tec-color-background: var(--wp--preset--color--card, #fff);
  --tec-color-background-secondary: var(--wp--preset--color--sunken, #eeece7);
  --tec-color-border-default: var(--wp--preset--color--border, #e2ded7);
  --tec-color-border-secondary: var(--wp--preset--color--border, #e2ded7);
  --tec-color-border-tertiary: var(--wp--preset--color--border, #e2ded7);
  --tec-color-border-active: var(--wp--preset--color--brand, #3e6478);

  /* Day-Marker (heute / hover) */
  --tec-color-day-marker-past: var(--wp--preset--color--muted, #6b6a6d);
  --tec-color-day-marker-current-month: var(--wp--preset--color--text, #2c2a2d);

  /* Typografie */
  --tec-font-family-sans-serif: var(--wp--preset--font-family--body, inherit);
  --tec-font-family-base: var(--wp--preset--font-family--body, inherit);
}

/* Mindestschrift 16 px (SSA-73): TECs Stufen 0–2 (11, 12 und 14 px) auf 1rem; ab Stufe 3 (16 px)
   bleibt alles, wie es ist. TEC definiert die Stufen auf :root — hier ebenfalls dort (html:root
   gewinnt unabhängig von der Ladereihenfolge), damit sie auch in der Einzelansicht gelten, deren
   Vor/Zurück-Leiste außerhalb von .tribe-common steht. */
html:root {
  --tec-font-size-0: 1rem;
  --tec-font-size-1: 1rem;
  --tec-font-size-2: 1rem;
}

/* Überschriften in TEC in Display-Font */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events-single-event-title,
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3 {
  font-family: var(--wp--preset--font-family--display, inherit) !important;
  font-weight: 700;
  color: var(--wp--preset--color--ink, #19171a);
}
.tribe-events-single-event-title { font-weight: 700; letter-spacing: -0.01em; }

/* Buttons runder + Marken-typisch */
.tribe-common .tribe-common-c-btn,
.tribe-events .tribe-events-c-view-selector__button,
.tribe-events .tribe-events-c-top-bar__today-button,
.tribe-events .tribe-events-c-ical__link {
  border-radius: var(--wp--custom--radius--md, 12px) !important;
  font-family: var(--wp--preset--font-family--body, inherit);
  font-weight: 700;
}
.tribe-common .tribe-common-c-btn {
  background-color: var(--wp--preset--color--brand, #3e6478);
  color: var(--wp--preset--color--on-brand, #fff);
}
.tribe-common .tribe-common-c-btn:hover { background-color: var(--wp--preset--color--brand-strong, #2b4553); }
/* Umrandete Knöpfe („Kalender abonnieren"): TEC färbt den Text mit --tec-color-button-primary, also
   brand — dunkel 4,06:1 gegen die Karte. Als Text brand-text; beim Überfahren und im Fokus füllt TEC
   den Knopf mit accent-primary (brand), darauf on-brand statt TECs Hintergrundfarbe (dunkel 4,06:1).
   `html` davor: TECs Regel hat dieselbe Spezifität und lädt später (common-full.css); ohne den Zusatz
   blieb der Text dunkel in brand (gemessen). Die Zustände des Abo-Knopfs setzt TEC eigens mit drei
   Klassen (.tribe-events .tribe-events-c-subscribe-dropdown …__button:hover). */
html .tribe-common .tribe-common-c-btn-border,
html .tribe-common a.tribe-common-c-btn-border { color: var(--wp--preset--color--brand-text, #3e6478); }
html .tribe-common .tribe-common-c-btn-border:focus,
html .tribe-common .tribe-common-c-btn-border:hover,
html .tribe-common a.tribe-common-c-btn-border:focus,
html .tribe-common a.tribe-common-c-btn-border:hover,
html .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus,
html .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within,
html .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover,
html .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button--active { color: var(--wp--preset--color--on-brand, #fff); }

/* View-Selector aktiver Tab */
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__button {
  color: var(--wp--preset--color--brand-text, #3e6478);
}

/* Monatsansicht: heutiger Tag + Event-Punkte */
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
  background: var(--wp--preset--color--brand, #3e6478);
  color: var(--wp--preset--color--on-brand, #fff);
  border-radius: 50%;
}
.tribe-events .tribe-events-calendar-month__day-cell--selected,
.tribe-events .tribe-events-calendar-month__day-cell:hover {
  background: var(--wp--preset--color--brand-subtle, #eef3f5);
}

/* Listen-/Tagesansicht: Event-Karte */
.tribe-events .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-calendar-day__event {
  background: var(--wp--preset--color--card, #fff);
}
.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link {
  color: var(--wp--preset--color--ink, #19171a);
}
.tribe-events .tribe-events-calendar-list__event-title-link:hover {
  color: var(--wp--preset--color--brand-text, #3e6478);
}
/* Datum und Uhrzeit der Karte färbt TEC mit einer eigenen Regel gleicher Spezifität, die später lädt
   (--tec-color-text-event-date, hier = ink). Diese Regel wirkt deshalb nur am Kalenderblatt. */
.tribe-events .tribe-events-calendar-list__event-datetime,
.tribe-events .tribe-events-calendar-list__event-date-tag {
  color: var(--wp--preset--color--brand-text, #3e6478);
}

/* Hervorgehobene (featured) Events */
.tribe-events .tribe-events-calendar-list__event--featured::before {
  color: var(--wp--preset--color--accent, #ea9a00);
}
/* Der Hinweis „Hervorgehoben" ist Text: Gold als Text heißt accent-text (gemessen hell 7,13:1, dunkel 8,7:1 gegen
   die Karte); accent selbst käme hell nur auf 2,2:1. TEC färbt ihn ab der mittleren Breite mit
   accent-primary (= brand, dunkel 4,06:1) über .tribe-common--breakpoint-medium.tribe-events — daher
   dieselbe Kette mit `html` davor. */
html .tribe-events .tribe-events-calendar-list__event-datetime-featured-text,
html .tribe-events .tribe-events-calendar-day__event-datetime-featured-text,
html .tribe-events .tribe-events-calendar-latest-past__event-datetime-featured-text,
html .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-datetime-featured-text,
html .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-datetime-featured-text,
html .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-day__event-datetime-featured-text,
html .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-latest-past__event-datetime-featured-text {
  color: var(--wp--preset--color--accent-text, #7a4f00);
}
.tribe-common .tribe-common-c-svgicon--featured { color: var(--wp--preset--color--accent, #ea9a00); }

/* Einzel-Event */
.tribe-events-single .tribe-events-schedule,
.single-tribe_events .tribe-events-event-meta {
  background: var(--wp--preset--color--sunken, #eeece7);
  border: 1px solid var(--wp--preset--color--border, #e2ded7);
  border-radius: var(--wp--custom--radius--md, 12px);
}
/* Links der Einzelansicht als Text in brand-text (dunkel war brand 4,37:1 gegen die Fläche). Vor/Zurück
   färbt TEC mit `.tribe-events-single .tribe-events-sub-nav …` (--tec-color-text-secondary, dunkel
   #5d5d5d = 2,29:1) — die Regel hier braucht dieselbe Spezifität. */
.tribe-events-single a,
.tribe-events-back a,
.tribe-events-nav-previous a,
.tribe-events-nav-next a,
.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-previous a,
.tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next a { color: var(--wp--preset--color--brand-text, #3e6478); }

/* Datepicker / Top-Bar */
.tribe-events .tribe-events-c-top-bar__datepicker-button { color: var(--wp--preset--color--ink, #19171a); }
.tribe-events .datepicker .day.current,
.tribe-events .datepicker .day.active {
  background: var(--wp--preset--color--brand, #3e6478) !important;
  color: #fff !important;
}

/* ============================================================
   KOMPAKTE EVENT-KARTEN (Listen-/Tagesansicht)
   ============================================================ */
.tribe-events .tribe-events-calendar-list__event-row {
  margin-bottom: .75rem;
}
.tribe-events .tribe-events-calendar-list__event {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.15rem;
  background: var(--wp--preset--color--card, #fff);
  border: 1px solid var(--wp--preset--color--border, #e2ded7);
  border-radius: var(--wp--custom--radius--lg, 18px);
  box-shadow: var(--wp--custom--shadow--sm, 0 2px 6px rgba(24,40,49,.07));
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Die Karte trägt TECs Rasterklasse tribe-common-g-row--gutters (je −21 px Außenabstand). Rechts
   ragte sie damit über ihre Spalte hinaus und bei 320 und 390 px 2 px über den Bildschirm; jetzt
   endet sie bündig mit der Liste. */
.tribe-events .tribe-events-calendar-list__event.tribe-common-g-row--gutters { margin-right: 0; }
.tribe-events .tribe-events-calendar-list__event:hover {
  transform: translateY(-2px);
  box-shadow: var(--wp--custom--shadow--md, 0 8px 22px rgba(24,40,49,.09));
}
/* Datum als kompaktes „Kalenderblatt" links */
.tribe-events .tribe-events-calendar-list__event-date-tag {
  grid-row: span 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 84px; height: 84px; padding: 0;
  background: var(--wp--preset--color--brand-subtle, #eef3f5);
  border-radius: var(--wp--custom--radius--md, 12px);
}
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
  font-family: var(--wp--preset--font-family--display, inherit);
  font-weight: 700; font-size: 1.6rem; line-height: 1;
  color: var(--wp--preset--color--brand-text, #3e6478);
}
.tribe-events .tribe-events-calendar-list__event-date-tag-month {
  text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; font-weight: 700;
  color: var(--wp--preset--color--brand-text, #3e6478);
}
.tribe-events .tribe-events-calendar-list__event-header,
.tribe-events .tribe-events-calendar-list__event-details { padding: 0; margin: 0; }
.tribe-events .tribe-events-calendar-list__event-title { font-size: 1.1rem; margin: 0 0 .2rem; }
.tribe-events .tribe-events-calendar-list__event-datetime { font-size: 1rem; margin-bottom: .35rem; }
/* Karten-Bild schlanker */
.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper { display: none; }

/* Tagesansicht analog kompakt */
.tribe-events .tribe-events-calendar-day__event {
  padding: 1rem 1.15rem;
  border: 1px solid var(--wp--preset--color--border, #e2ded7);
  border-radius: var(--wp--custom--radius--lg, 18px);
  margin-bottom: .75rem;
}

/* ============================================================
   SCHLANKE EINZEL-EVENT-ANSICHT
   ============================================================ */
.single-tribe_events .tribe-events-single {
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.single-tribe_events .tribe-events-event-image img {
  border-radius: var(--wp--custom--radius--lg, 18px);
  max-height: 340px; width: 100%; object-fit: cover;
}
.single-tribe_events .tribe-events-schedule {
  padding: .85rem 1.15rem; margin: 1.25rem 0;
}
.single-tribe_events .tribe-events-schedule h2 {
  font-size: 1rem; margin: 0; color: var(--wp--preset--color--brand-text, #3e6478);
}
.single-tribe_events .tribe-events-event-meta {
  padding: 1.25rem; margin-top: 1.5rem; font-size: 1rem;
}
.single-tribe_events .tribe-events-cal-links,
.single-tribe_events .tribe-events-sub-nav { margin-top: 1.25rem; }
/* Überflüssige Related-Events-Blöcke ruhiger */
.single-tribe_events #tribe-events-related-events-title { font-family: var(--wp--preset--font-family--display, inherit); }

@media (max-width: 600px) {
  .tribe-events .tribe-events-calendar-list__event { grid-template-columns: 64px 1fr; gap: .75rem; padding: .85rem; }
  .tribe-events .tribe-events-calendar-list__event-date-tag { width: 64px; height: 64px; }
  .tribe-events .tribe-events-calendar-list__event-date-tag-daynum { font-size: 1.3rem; }
}